:root{
  --navy:#023047; --teal:#219EBC; --sky:#8ECAE6; --yellow:#FFB703; --orange:#FB8500;
  --white:#FFFFFF; --gray-50:#F7F9FA; --gray-100:#EDF1F3; --gray-300:#C7D1D6;
  --gray-500:#7C8B92; --gray-700:#4A5A61; --sky-tint-10:#EAF5FA; --sky-tint-20:#D5EBF5;
  --font-fa:'Vazirmatn',sans-serif; --radius-md:10px; --radius-lg:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{direction:rtl; text-align:right; font-family:var(--font-fa); background:#fff; color:var(--navy);}
a{color:inherit; text-decoration:none;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--gray-300);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand-mark img{height:32px; width:auto;}
nav.links{display:flex; gap:28px; font-size:.92rem; font-weight:500; color:var(--gray-700);}
.nav-cta{background:var(--navy); color:#fff; padding:10px 20px; border-radius:var(--radius-md); font-size:.88rem; font-weight:600;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:var(--radius-md); font-weight:700; font-size:.92rem; min-height:46px; border:1.5px solid transparent; cursor:pointer; font-family:var(--font-fa);}
.btn-primary{background:var(--yellow); color:var(--navy);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--gray-300);}

.site-footer{background:var(--gray-50); border-top:1px solid var(--gray-300); padding:40px 0; margin-top:40px; text-align:center; font-size:.78rem; color:var(--gray-500);}
.site-footer a{color:var(--teal); font-weight:600;}

/* فرم‌ها */
.form-field{margin-bottom:16px; max-width:400px;}
.form-field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; font-family:var(--font-fa); padding:11px 14px; border:1px solid var(--gray-300);
  border-radius:8px; font-size:.9rem;
}
.alert{padding:10px 16px; border-radius:8px; font-size:.85rem; margin-bottom:14px; max-width:400px;}
.alert-error{background:#FDE8E8; color:#E02424;}
.alert-success{background:#DEF7EC; color:#0E9F6E;}

/* پنل (ادمین/کاربری) */
.panel-layout{display:flex; min-height:100vh;}
.panel-sidebar{width:250px; background:#fff; border-left:1px solid var(--gray-100); flex-shrink:0; padding:24px 0;}
.panel-sidebar a{display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:.87rem; color:var(--gray-700);}
.panel-sidebar a.active{background:var(--sky-tint-10); color:var(--teal); font-weight:700;}
.panel-main{flex:1; padding:32px 36px;}
.card{background:#fff; border:1px solid var(--gray-100); border-radius:12px; padding:22px; margin-bottom:18px;}
table{width:100%; border-collapse:collapse; font-size:.85rem;}
thead th{text-align:right; padding:10px; background:var(--gray-50); color:var(--gray-500); font-size:.75rem;}
tbody td{padding:10px; border-bottom:1px solid var(--gray-100);}
.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px;}
.badge.paid, .badge.available, .badge.active{background:#DEF7EC; color:#0E9F6E;}
.badge.pending{background:#FEF3C7; color:#C27803;}
.badge.failed, .badge.consumed{background:#FDE8E8; color:#E02424;}

@media (max-width:860px){ nav.links{display:none;} .panel-sidebar{display:none;} }

/* ===== تایپوگرافی پایه برای محتوای تولیدشده با ادیتور حرفه‌ای (Quill) ===== */
.body h2, .rich-content h2 { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin: 24px 0 12px; }
.body h3, .rich-content h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 18px 0 8px; }
.body p, .rich-content p { margin: 0 0 14px; line-height: 1.9; }
.body ul, .body ol, .rich-content ul, .rich-content ol { margin: 0 0 14px; padding-inline-start: 24px; line-height: 1.9; }
.body blockquote, .rich-content blockquote { border-inline-start: 3px solid var(--teal); margin: 16px 0; padding: 4px 16px; color: var(--gray-700); font-style: italic; }
.body a, .rich-content a { color: var(--teal); font-weight: 600; }