/* =========================================================
   TARS Design System — لوکس، سریع، بدون فریم‌ورک سنگین
   فونت‌ها: محلی (static_src/fonts/) — بدون CDN خارجی
   ========================================================= */

/* ایران‌سنس اگر روی سیستم باشد؛ وگرنه Vazirmatn محلی */
@font-face {
    font-family: 'IranSans';
    src: local('IRANSans'), local('IRANSans Web'), local('IranSans'),
         url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IranSans';
    src: local('IRANSans Medium'), local('IranSans'),
         url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IranSans';
    src: local('IRANSans Bold'), local('IranSans'),
         url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Doran';
    src: local('Doran'),
         url('../fonts/Doran.woff2') format('woff2'),
         url('../fonts/Doran-Bold.woff2') format('woff2'),
         url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #050505;
    --bg-elevated: rgba(14, 14, 14, 0.72);
    --bg-glass: rgba(18, 18, 18, 0.55);
    --text: #e0e0e0;
    --text-muted: #8a8a8a;
    --text-dim: #5c5c5c;
    --gold: #d4a85a;
    --gold-soft: #c4a06a;
    --gold-deep: #a8874a;
    --gold-glow: rgba(180, 140, 80, 0.22);
    --border: rgba(180, 150, 100, 0.16);
    --border-strong: rgba(180, 150, 100, 0.38);
    --success: #34d399;
    --success-bg: rgba(16, 185, 129, 0.08);
    --success-border: rgba(16, 185, 129, 0.28);
    --warn: #fbbf24;
    --warn-bg: rgba(245, 158, 11, 0.08);
    --warn-border: rgba(245, 158, 11, 0.28);
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.08);
    --danger-border: rgba(239, 68, 68, 0.28);
    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow: 0 0 28px rgba(120, 100, 60, 0.05);
    --font-body: 'IranSans', Tahoma, 'Segoe UI', sans-serif;
    --font-display: 'Doran', 'IranSans', Tahoma, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
    --container: 1180px;
    --header-h: 68px;
    --page-pad: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    direction: rtl;
    text-align: right;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
.tech-num { font-family: var(--font-mono); letter-spacing: .04em; }
p, .lead, .prose, .tutorial-card__summary, .team-bio, .footer-tagline,
.comment-card__body, .course-card__desc, .hint {
    text-align: justify;
    text-align-last: right;
}

/* --- Typography --- */
.font-display { font-family: var(--font-display); }
.h-hero {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
    letter-spacing: -.01em;
}
.h-section {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}
.h-card {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.lead { font-size: .95rem; color: var(--text-muted); line-height: 2; max-width: 40rem; }
.prose {
    font-size: .95rem;
    color: #c9c9c9;
    line-height: 2.15;
    text-align: right;
    white-space: pre-line;
}
.prose p + p { margin-top: 1rem; }
.prose--rich {
    white-space: normal;
}
.prose--rich h1 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.45;
}
.prose--rich h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold);
    margin: 1.75rem 0 .75rem;
    line-height: 1.5;
}
.prose--rich h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #f3e6c8;
    margin: 1.35rem 0 .55rem;
    line-height: 1.5;
}
.prose--rich p { margin: 0 0 1rem; }
.prose--rich ul,
.prose--rich ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}
.prose--rich li { margin-bottom: .35rem; }
.prose--rich a {
    color: var(--gold-soft);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.prose--rich strong { color: #fff; font-weight: 700; }
.prose--rich :not(pre) > code {
    font-family: var(--font-mono);
    font-size: .86em;
    color: #f5e6c8;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(212,163,89,.2);
    border-radius: 6px;
    padding: .12em .4em;
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left !important;
}
.prose--rich .code-block {
    margin: 1.25rem 0 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(212,163,89,.22);
    background:
        linear-gradient(160deg, rgba(20,16,10,.95), rgba(8,8,8,.98));
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    overflow: hidden;
    direction: ltr !important;
    text-align: left !important;
    text-align-last: left !important;
    unicode-bidi: isolate;
}
.prose--rich .code-block,
.prose--rich .code-block * {
    direction: ltr !important;
    text-align: left !important;
    text-align-last: left !important;
}
.prose--rich .code-block__lang {
    display: block;
    padding: .45rem .9rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-soft);
    background: rgba(212,163,89,.08);
    border-bottom: 1px solid rgba(212,163,89,.15);
}
.prose--rich .code-block__pre {
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: none;
    white-space: pre;
}
.prose--rich .code-block__code {
    display: block;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.75;
    color: #e8e4d9;
    white-space: pre;
    unicode-bidi: isolate;
}
.prose--rich pre:not(.code-block__pre) {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(212,163,89,.22);
    background: rgba(8,8,8,.95);
    overflow-x: auto;
    direction: ltr !important;
    text-align: left !important;
    text-align-last: left !important;
    unicode-bidi: isolate;
}
.prose--rich pre:not(.code-block__pre) code {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: #e8e4d9;
    background: none;
    border: none;
    padding: 0;
    direction: ltr !important;
    text-align: left !important;
}
.delta-neon {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(245,158,11,.8), 0 0 22px rgba(245,158,11,.3);
}

/* --- Layout --- */
.tars-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--page-pad);
}
.section { padding: 4rem 0; }
.section-tight { padding: 2.5rem 0; }
.section--soft { background: linear-gradient(180deg, transparent, rgba(20, 16, 8, .2)); }
.page-title { font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: .75rem; }
.section-cta { text-align: center; margin-top: 1.75rem; }
.grid-2 { display: grid; gap: 1.25rem; }
.grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 720px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Surfaces --- */
.glass {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow);
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 0 32px rgba(212,163,89,.1);
}
.card-link { display: block; color: inherit; }
.card-link:hover { transform: translateY(-3px); }

/* --- Buttons / Pills --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.5rem; border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: #0a0a0a; color: #fff;
    transition: all .3s;
}
.btn:hover {
    border-color: var(--border-strong);
    box-shadow: 0 0 22px var(--gold-glow);
    color: var(--gold);
}
.btn-primary {
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(10,10,10,.95));
    border-color: rgba(245,158,11,.45);
}
.btn-primary:hover { color: #fff; }
.btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.1);
    color: var(--text-muted);
}
.btn-block { width: 100%; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(10,10,10,.6));
    color: var(--gold-soft);
    box-shadow: 0 0 16px rgba(245,158,11,.08);
    transition: border-color .3s, box-shadow .3s;
}
.chip:hover { border-color: var(--border-strong); box-shadow: 0 0 20px var(--gold-glow); }
.chips { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }

/* --- Badges --- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .68rem; font-weight: 700; padding: .28rem .7rem;
    border-radius: var(--radius-pill); white-space: nowrap;
}
.badge-open { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.badge-pending { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); }
.badge-closed { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.badge-soon { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.3); color: #a5b4fc; }
.badge-premium { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: var(--gold); }
.badge-preview { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.badge-locked { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); color: var(--text-dim); }
.badge-on { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.badge-wait { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); }
.badge-err { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.badge-off { background: rgba(115,115,115,.08); border: 1px solid rgba(115,115,115,.25); color: #a3a3a3; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; gap: .5rem; }
.card-title { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: #fff; }
.meta-row { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); padding: .4rem 0; }
.meta-row b { color: #e5e5e5; font-weight: 600; }
.hint { font-size: .78rem; color: var(--text-muted); line-height: 1.9; }
.divider { height: 1px; background: rgba(255,255,255,.06); margin: .85rem 0; }
.key-box {
    display: flex; align-items: center; gap: .5rem; margin-top: .65rem;
    background: rgba(5,5,5,.8); border: 1px solid #1f1f1f; border-radius: 12px; padding: .65rem .75rem;
    min-width: 0; max-width: 100%;
}
.key-box code {
    flex: 1 1 auto; min-width: 0; font-size: .72rem; color: #fbbf24; direction: ltr; text-align: left;
    overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
}
.copy-btn {
    background: #0a0a0a; border: 1px solid rgba(212,163,89,.25); border-radius: 8px;
    color: #e5e5e5; font-size: .68rem; padding: .4rem .85rem; cursor: pointer;
    font-family: inherit; transition: all .3s; white-space: nowrap; flex-shrink: 0;
}
.copy-btn:hover { border-color: rgba(212,163,89,.7); color: var(--gold); }

/* کارت لایسنس — کلید بلند نباید از عرض صفحه بیرون بزند */
.license-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    max-width: 100%;
}
.license-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.license-key-panel {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: .75rem;
    background: rgba(5,5,5,.8);
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    padding: .75rem;
    min-width: 0;
    max-width: 100%;
}
.license-key-panel__body {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    max-height: 9.5rem;
    border-radius: 8px;
    background: rgba(0,0,0,.35);
    padding: .65rem .7rem;
}
.license-key-text {
    display: block;
    font-size: .72rem;
    line-height: 1.55;
    color: #fbbf24;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.license-key-panel .copy-btn {
    align-self: stretch;
    text-align: center;
}
.license-card__issued {
    margin-top: .15rem;
}
.licenses-intro {
    color: var(--text-muted);
    line-height: 1.9;
    min-width: 0;
    max-width: 100%;
}
.licenses-intro p { margin: 0 0 .55rem; }
.licenses-intro p:last-child { margin-bottom: 0; }
.spotplayer-download-card {
    min-width: 0;
    max-width: 100%;
}
.admin-link { font-size: .68rem; color: var(--text-dim); }
.admin-link:hover { color: var(--gold); }
.learn-head { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }

/* --- Navbar --- */
.tars-nav {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, rgba(8,8,8,.92), rgba(5,5,5,.78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(212,163,89,.18);
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.tars-nav__inner {
    height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
}
.tars-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    max-height: calc(var(--header-h) - 20px);
    overflow: visible;
    justify-self: center;
    grid-column: 2;
}
.tars-logo--row {
    flex-direction: row;
    gap: .5rem;
}
.tars-logo__mark {
    height: 22px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(180, 140, 80, .25));
    background: transparent;
}
.tars-logo__word {
    height: 14px;
    width: auto;
    display: block;
    object-fit: contain;
    background: transparent;
}
.tars-nav__links {
    display: none;
    align-items: center;
    justify-content: center;
}
.tars-nav__pill {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .28rem;
    border-radius: 999px;
    border: 1px solid rgba(180,150,100,.2);
    background: linear-gradient(135deg, rgba(180,140,80,.06), rgba(10,10,10,.55));
}
.tars-nav__pill a {
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 600;
    color: #bdbdbd;
    letter-spacing: .02em; transition: all .25s;
    padding: .55rem .85rem; border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tars-nav__pill a:hover {
    color: #fff;
    background: rgba(180,140,80,.1);
}
.tars-nav__pill a.is-active {
    color: #111;
    background: linear-gradient(135deg, #d4a85a, #c4963f);
    box-shadow: 0 0 14px rgba(180,140,80,.25);
}
.tars-nav__actions {
    display: flex; align-items: center; gap: .35rem;
    justify-self: end;
    grid-column: 3;
}
.nav-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; color: var(--text-muted);
    transition: color .25s, filter .25s; background: transparent;
}
.nav-icon-btn svg { width: 18px; height: 18px; display: block; }
.nav-icon-btn:hover {
    color: var(--gold);
    filter: drop-shadow(0 0 6px rgba(180,140,80,.35));
}
.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text); width: 36px; height: 36px; padding: 0; cursor: pointer;
    grid-column: 1; justify-self: start;
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
@media (min-width: 900px) {
    .tars-nav__inner {
        display: flex;
        justify-content: space-between;
    }
    .tars-logo { justify-self: auto; grid-column: auto; }
    .tars-logo__mark { height: 30px; }
    .tars-logo__word { height: 18px; }
    .tars-nav__links { display: flex; flex: 1; }
    .tars-nav__actions { justify-self: auto; grid-column: auto; }
    .nav-toggle { display: none; }
}
.tars-nav__mobile {
    display: none;
    padding: 0 var(--page-pad) 1rem;
    border-bottom: 1px solid rgba(180,150,100,.1);
}
.tars-nav__mobile.is-open { display: block; }
.mobile-menu {
    display: grid;
    gap: .45rem;
    padding: .35rem 0 .5rem;
}
.mobile-menu__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border-radius: 12px;
    border: 1px solid rgba(180,150,100,.12);
    background: rgba(12,12,12,.55);
    font-size: .8rem;
    color: #d0d0d0;
    transition: border-color .2s, background .2s;
}
.mobile-menu__item:hover {
    border-color: rgba(180,150,100,.3);
    background: rgba(20,16,10,.7);
    color: #fff;
}
.mobile-menu__item--accent {
    border-color: rgba(180,140,80,.28);
    color: var(--gold-soft);
}
.mobile-menu__icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(180,140,80,.08);
    color: var(--gold-soft);
    flex-shrink: 0;
}
.mobile-menu__icon svg { width: 18px; height: 18px; }

/* --- Footer --- */
.tars-footer {
    margin-top: auto;
    border-top: 1px solid rgba(212,163,89,.12);
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, transparent, rgba(20,16,8,.35));
}
.tars-footer__grid {
    display: grid; gap: 2.5rem;
    align-items: start;
}
@media (min-width: 800px) {
    .tars-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-col { text-align: center; }
.footer-col--brand { text-align: center; }
.footer-col--links {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-col--links h4 {
    text-align: center;
    width: 100%;
}
.footer-col--links p {
    margin: 0;
    text-align: center !important;
    text-align-last: center !important;
    width: 100%;
}
.footer-col--links a {
    display: inline-block;
    text-align: center;
}
.footer-col--enamad { text-align: center; }
.tars-footer h4 {
    font-family: var(--font-display);
    font-size: .85rem; color: var(--gold-soft); margin-bottom: .85rem; letter-spacing: .08em;
}
.tars-footer p, .tars-footer a { font-size: .8rem; color: var(--text-muted); line-height: 2; }
.tars-footer a:hover { color: var(--gold); }
.footer-tagline {
    max-width: 28rem;
    margin: 0 auto 1rem;
    text-align: justify;
    text-align-last: center;
}
.social-row { display: flex; gap: .65rem; margin-top: .75rem; flex-wrap: wrap; }
.social-row--center { justify-content: center; }
.social-row a {
    width: 40px; height: 40px; border-radius: 50%;
    border: none; display: inline-flex;
    align-items: center; justify-content: center; color: var(--gold-soft);
    transition: color .25s, filter .25s; background: transparent;
}
.social-row a svg { width: 18px; height: 18px; }
.social-row a:hover {
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(180,140,80,.4));
}
.footer-brand {
    display: inline-flex;
    margin: 0 auto .85rem;
}
.footer-brand--stack {
    flex-direction: column;
    align-items: center;
    gap: .45rem;
}
.footer-brand__mark {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(180, 140, 80, .2));
    background: transparent;
}
.footer-brand__word {
    height: 18px;
    width: auto;
    display: block;
    object-fit: contain;
}
.enamad-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    max-width: 125px;
}
.enamad-box a,
.enamad-box img {
    display: block;
    margin: 0 auto;
    max-width: 90px !important;
    height: auto !important;
}
.footer-bottom {
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
    font-size: .7rem; color: var(--text-dim); letter-spacing: .2em;
    text-align: center;
}

/* --- Forms --- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
.input {
    width: 100%; background: rgba(5,5,5,.85); border: 1px solid #222;
    border-radius: var(--radius-sm); padding: .9rem 1rem; color: #fff;
    font-size: .85rem; outline: none; transition: border-color .25s, box-shadow .25s;
}
.input:focus { border-color: rgba(245,158,11,.45); box-shadow: 0 0 12px rgba(245,158,11,.08); }
.msg { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .8rem; margin-bottom: .85rem; }
.msg-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.msg-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.msg-reminder {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 2;
    font-size: .88rem;
    padding: 1.15rem 1.35rem;
    border-color: rgba(212,163,89,.35);
    background: linear-gradient(160deg, rgba(212,163,89,.12), rgba(10,10,10,.9));
    color: #f3e6c8;
}
.empty-state {
    text-align: center; padding: 3rem 1.5rem;
    border: 1px dashed rgba(255,255,255,.1); border-radius: var(--radius);
}
.empty-state .big { font-family: var(--font-display); font-size: 1rem; color: #fff; margin-bottom: .5rem; }
.empty-state .small { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.9; }

/* --- Hero --- */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 50% at 70% 40%, rgba(245,158,11,.08), transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(52,211,153,.04), transparent 55%),
        var(--bg);
}
.hero--home {
    min-height: auto;
    padding-bottom: 2rem;
}
.hero__canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 1;
}
.hero__canvas--page {
    position: fixed;
    inset: 0;
    opacity: .75;
    z-index: 0;
}
.hero__content {
    position: relative; z-index: 1; width: 100%;
    padding: 2rem 0 2.5rem;
}
.hero__grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 960px) {
    /* در RTL: ستون اول سمت راست (متن)، ستون دوم سمت چپ (انیمیشن) */
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
    .hero--home .coder-scene {
        max-width: 460px;
        width: 100%;
        margin-inline: 0;
    }
    .hero--home .tech-orbit {
        max-width: 100%;
    }
}
.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: right;
    gap: .9rem;
    max-width: 36rem;
    width: 100%;
    margin: 0;
}
.hero__eyebrow {
    font-size: .72rem; letter-spacing: .35em; color: var(--gold);
    font-weight: 700; margin: 0;
}
.hero__copy .h-hero {
    margin: 0;
    text-align: right;
    width: 100%;
}
.hero__lead {
    margin: 0;
    max-width: 36rem;
    text-align: justify;
    text-align-last: right;
}
.glow-text {
    background: linear-gradient(135deg, #f0e0b8 0%, #d4a85a 50%, #a8874a 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(180,140,80,.22));
}
.hero-cta {
    display: flex; gap: .75rem; flex-wrap: wrap;
    margin-top: .5rem; justify-content: flex-start;
    width: 100%;
}
.section-intro {
    text-align: right;
    margin-bottom: 1.75rem;
}
.section-intro--start { text-align: right; }
.section-intro--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-intro--center .h-hero,
.section-intro--center .h-section,
.section-intro--center .lead {
    text-align: center;
    text-align-last: center;
    width: auto;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.section-intro .h-section { margin-bottom: .5rem; }
.section-intro .lead {
    margin: 0;
    max-width: 40rem;
}
.courses-page-intro { margin-bottom: 2.5rem; text-align: right; }
.courses-page-intro .h-hero {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    text-align: right;
}
.courses-page-intro .lead {
    margin-top: .75rem;
    text-align: right !important;
    text-align-last: right !important;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* --- Coder hero scene --- */
.coder-scene {
    position: relative;
    max-width: 620px; margin: 0 auto;
    min-height: 380px;
}
.coder-window {
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(245,158,11,.28);
    background: rgba(8,8,8,.82);
    box-shadow: 0 0 40px rgba(245,158,11,.12), 0 20px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}
.coder-window__bar {
    display: flex; gap: .4rem; align-items: center;
    padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.coder-dot { width: 9px; height: 9px; border-radius: 50%; }
.coder-dot.r { background: #f87171; }
.coder-dot.y { background: #fbbf24; }
.coder-dot.g { background: #34d399; }
.coder-window__title {
    margin-inline-start: .55rem; font-size: .7rem; color: var(--text-dim);
    letter-spacing: .12em; font-family: var(--font-mono);
}
.coder-screen {
    padding: 1.15rem 1.25rem 1.35rem; min-height: 220px;
    font-family: var(--font-mono); font-size: .84rem; line-height: 1.9;
    color: #d4d4d4; direction: ltr; text-align: left;
}
.coder-prompt { color: var(--gold); margin-inline-end: .35rem; }
.blink { animation: blink 1s step-end infinite; color: var(--gold); }
@keyframes blink { 50% { opacity: 0; } }
.tech-orbit {
    display: flex; flex-direction: column; align-items: center;
    gap: .55rem; margin-top: 1.15rem; max-width: 600px; margin-inline: auto;
}
.tech-orbit__row {
    display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
}
.tech-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .7rem; border-radius: 999px;
    border: 1px solid rgba(245,158,11,.22);
    background: rgba(10,10,10,.65);
    font-size: .68rem; color: var(--gold-soft); font-weight: 600;
    box-shadow: 0 0 14px rgba(245,158,11,.08);
    animation: floatChip 5.5s ease-in-out infinite;
}
.tech-chip img {
    width: 22px; height: 22px; border-radius: 4px;
    object-fit: contain; background: rgba(255,255,255,.04); padding: 2px;
}
@keyframes floatChip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
    .tech-chip, .blink { animation: none; }
}

/* --- Modern TARS scrollbar (menus + scroll panels) --- */
.tars-scroll,
.tutorials-sort__menu,
.tars-select__menu,
.comments-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(212,163,89,.65) rgba(255,255,255,.05);
}
.tars-scroll::-webkit-scrollbar,
.tutorials-sort__menu::-webkit-scrollbar,
.tars-select__menu::-webkit-scrollbar,
.comments-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.tars-scroll::-webkit-scrollbar-track,
.tutorials-sort__menu::-webkit-scrollbar-track,
.tars-select__menu::-webkit-scrollbar-track,
.comments-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.045);
    border-radius: 999px;
    margin: 6px 0;
    border: 1px solid rgba(255,255,255,.04);
}
.tars-scroll::-webkit-scrollbar-thumb,
.tutorials-sort__menu::-webkit-scrollbar-thumb,
.tars-select__menu::-webkit-scrollbar-thumb,
.comments-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(226,192,122,.95), rgba(168,120,40,.92));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,240,200,.18);
}
.tars-scroll::-webkit-scrollbar-thumb:hover,
.tutorials-sort__menu::-webkit-scrollbar-thumb:hover,
.tars-select__menu::-webkit-scrollbar-thumb:hover,
.comments-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f0d59a, #d4a359);
    background-clip: padding-box;
}
.tars-scroll::-webkit-scrollbar-corner,
.tutorials-sort__menu::-webkit-scrollbar-corner,
.tars-select__menu::-webkit-scrollbar-corner,
.comments-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- Comments --- */
.comments-scroll {
    max-height: calc(6 * 7.2rem);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .85rem;
    padding-inline-end: .35rem;
    margin-top: 1.5rem;
}
.comment-card {
    padding: 1.15rem 1.25rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-elevated);
}
.comment-card__meta {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-bottom: .65rem;
}
.comment-card__body {
    font-size: .85rem; color: #cfcfcf; line-height: 2;
}
.badge-admin { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: var(--gold); }
.badge-student { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.28); color: var(--success); }
.badge-guest { background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.28); color: #cbd5e1; }
.comment-form-box {
    max-width: 640px; margin: 2rem auto 0; padding: 1.5rem;
}

/* --- Tutorial comments --- */
.tutorial-comments {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.tutorial-comments__title {
    margin-bottom: 1.25rem;
    text-align: right;
}
.tutorial-comments__empty {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    text-align: center;
}
.tutorial-comments__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.tutorial-comments__thread {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.t-comment {
    padding: 1.15rem 1.2rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(212,163,89,.16);
    background:
        linear-gradient(155deg, rgba(22,18,12,.92), rgba(10,10,10,.96));
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.t-comment--reply {
    margin-inline-start: 1.35rem;
    border-color: rgba(255,255,255,.08);
    background: rgba(12,12,12,.75);
    box-shadow: none;
}
.t-comment__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .55rem;
}
.t-comment__name {
    font-size: .9rem;
    font-weight: 700;
    color: #f5f0e6;
}
.t-comment__body {
    font-size: .88rem;
    color: #d4d0c6;
    line-height: 2;
    margin: 0;
    text-align: right;
}
.t-comment__actions {
    margin-top: .75rem;
    display: flex;
    justify-content: flex-start;
}
.t-comment__reply-btn {
    appearance: none;
    border: 1px solid rgba(212,163,89,.3);
    background: transparent;
    color: var(--gold-soft);
    font-size: .72rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.t-comment__reply-btn:hover {
    border-color: rgba(245,158,11,.55);
    color: var(--gold);
    background: rgba(245,158,11,.08);
}
.tutorial-comments__form {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.35rem 1.4rem 1.5rem;
}
.tutorial-comments__form .h-card { margin-bottom: .35rem; }
.tutorial-comments__form .hint { margin-bottom: .85rem; }
.tutorial-comments__form .field { margin-bottom: .85rem; }
.t-comment__cancel-reply {
    appearance: none;
    border: none;
    background: none;
    color: var(--gold);
    cursor: pointer;
    font-size: inherit;
    margin-inline-start: .5rem;
    text-decoration: underline;
}
.link-gold { color: var(--gold); text-decoration: underline; text-underline-offset: .15em; }

/* --- Course cards --- */
.course-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all .35s; height: 100%;
}
.course-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 30px rgba(212,163,89,.1);
}
.course-card__banner {
    aspect-ratio: 16 / 9; background:
        radial-gradient(circle at 30% 40%, rgba(245,158,11,.2), transparent 55%),
        linear-gradient(145deg, #14110a, #0a0a0a);
    position: relative; overflow: hidden;
}
.course-card__banner img { width: 100%; height: 100%; object-fit: cover; }
.course-card__body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.course-card__meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.course-card__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); margin-bottom: .65rem; }
.course-card__desc { font-size: .8rem; color: var(--text-muted); line-height: 1.9; flex: 1; margin-bottom: 1.1rem; }
.course-card__footer {
    display: flex;
    direction: ltr; /* چپ/راست فیزیکی: مبلغ چپ، CTA راست */
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem;
    width: 100%;
    margin-top: auto;
    padding-top: .35rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.course-card__cta {
    font-size: .75rem;
    color: var(--text-muted);
    letter-spacing: .02em;
    transition: color .25s;
    margin-left: auto; /* همیشه سمت راست کارت */
}
.course-card:hover .course-card__cta { color: var(--gold-soft); }
.course-card__price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .35rem;
    flex-shrink: 0;
    margin-right: auto; /* همیشه سمت چپ کارت */
}
.course-card__price-amount {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f3e6c8;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #f5e6c8 0%, var(--gold) 45%, #c9a227 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}
.course-card__price-currency {
    font-size: .7rem;
    font-weight: 600;
    color: var(--gold-soft);
    letter-spacing: .04em;
    opacity: .92;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .course-card__price-amount {
        color: var(--gold);
        -webkit-text-fill-color: unset;
        background: none;
    }
}

/* --- Dashboard shell --- */
.dash-shell {
    display: grid; gap: 1.25rem; padding: 1.5rem 0 3rem;
}
.dash-sidebar {
    position: static;
    z-index: 1;
    padding: 1.25rem; border-radius: var(--radius);
    background: var(--bg-elevated); border: 1px solid var(--border);
}
@media (min-width: 960px) {
    .dash-shell { grid-template-columns: 260px 1fr; align-items: start; }
    .dash-sidebar {
        position: sticky;
        top: calc(var(--header-h) + 1rem);
        align-self: start;
    }
}
.dash-user { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.dash-user__name { font-family: var(--font-display); font-size: .95rem; color: #fff; margin-bottom: .25rem; }
.dash-user__meta { font-size: .72rem; color: var(--text-muted); }
.dash-nav { display: flex; flex-direction: column; gap: .35rem; }
.dash-nav a {
    padding: .7rem .85rem; border-radius: 10px; font-size: .8rem;
    color: var(--text-muted); transition: all .25s;
}
.dash-nav a:hover, .dash-nav a.is-active {
    background: rgba(245,158,11,.07); color: var(--gold); border: 1px solid rgba(245,158,11,.2);
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.stat-card {
    padding: 1rem 1.1rem; border-radius: var(--radius-sm);
    background: var(--bg-glass); border: 1px solid var(--border);
    min-width: 0;
    box-sizing: border-box;
}
.stat-card .num { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); display: block; }
.stat-card .lbl { font-size: .7rem; color: var(--text-muted); }
.dash-main { min-width: 0; }
@media (max-width: 899px) {
    .dash-shell {
        width: calc(100% - .7rem);
        max-width: calc(100% - .7rem);
        margin-inline: auto;
        box-sizing: border-box;
        gap: 1rem;
        padding-top: 1.1rem;
        padding-bottom: 2.25rem;
    }
    .dash-sidebar {
        padding: 1.05rem 1rem;
    }
    .dash-main .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .55rem;
        margin-bottom: 1.15rem;
    }
    .dash-main .stat-card {
        padding: .75rem .55rem;
        text-align: center;
    }
    .dash-main .stat-card .num { font-size: 1.15rem; }
    .dash-main .stat-card .lbl { font-size: .62rem; }
    .dash-main .grid-2 {
        gap: .85rem;
    }
    .dash-main .card {
        padding: .9rem .95rem;
        box-sizing: border-box;
        max-width: 100%;
    }
    .dash-main .card-title { font-size: .84rem; }
    .dash-main .meta-row { font-size: .74rem; }
}

/* --- Curriculum --- */
.curriculum { width: 100%; margin-top: 2.5rem; text-align: right; }
.curriculum-title { font-family: var(--font-display); font-size: 1.15rem; color: #fff; margin-bottom: 1.1rem; }
.curriculum-title span { color: var(--gold); }
.section-block {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: .85rem; overflow: hidden;
}
.section-head {
    padding: .9rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.section-head h3 { font-size: .85rem; font-weight: 700; color: #e5e5e5; font-family: var(--font-display); }
.section-desc { font-size: .75rem; color: var(--text-muted); padding: .65rem 1.1rem 0; line-height: 1.8; }
.lesson-list { list-style: none; margin: 0; padding: .35rem 0; }
.lesson-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1.1rem; font-size: .8rem; color: var(--text-muted);
    transition: background .25s;
}
.lesson-row:hover { background: rgba(245,158,11,.03); }
.lesson-link { color: #e5e5e5; transition: color .25s; }
.lesson-link:hover { color: var(--gold); }
.lesson-locked-name { color: #525252; }
.lesson-meta { display: flex; align-items: center; gap: .5rem; }

/* --- OS downloads --- */
.os-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .85rem; margin-top: 1rem;
}
.os-tile {
    text-align: center; padding: 1.1rem .75rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: rgba(10,10,10,.5);
    transition: all .3s; color: var(--text-muted);
}
.os-tile:hover { border-color: var(--border-strong); color: var(--gold); box-shadow: 0 0 18px var(--gold-glow); }
.os-tile__icon {
    width: 48px; height: 48px; margin: 0 auto .65rem;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2);
    font-size: 1.2rem; font-weight: 800; color: var(--gold);
}
.os-tile__name { font-size: .75rem; font-weight: 600; }
.os-tile__ver { font-size: .65rem; color: var(--text-dim); margin-top: .2rem; }

/* --- Tutorial cards --- */
.tutorial-card { position: relative; overflow: hidden; }
.tutorial-card__cover {
    aspect-ratio: 16/9; background: linear-gradient(145deg, #1a1408, #0a0a0a);
}
.tutorial-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-card .lock-overlay {
    position: absolute; top: .75rem; left: .75rem;
}

/* --- Roadmap --- */
.toc {
    display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 2rem;
}
.toc a {
    padding: .4rem .85rem; border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: var(--text-muted);
}
.toc a:hover { color: var(--gold); border-color: var(--border); }
.roadmap-cat { scroll-margin-top: calc(var(--header-h) + 1rem); margin-bottom: 2.5rem; }
.roadmap-item {
    display: flex; gap: 1rem; padding: 1rem; margin-bottom: .65rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated);
}
.roadmap-item__icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.roadmap-item__icon img { width: 100%; height: 100%; object-fit: cover; }

/* --- Search --- */
.search-panel { max-width: 720px; margin: 2rem auto; }
.search-results { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.search-hit {
    padding: 1rem 1.15rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-elevated);
}
.search-hit .kind { font-size: .65rem; color: var(--gold); letter-spacing: .1em; }
.search-hit h3 { font-size: .95rem; margin: .25rem 0; color: #fff; }
.search-hit p { font-size: .78rem; color: var(--text-muted); }

/* --- Tutorials list toolbar (search + sort) --- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
/* Desktop: title on the right, compact search card on the left */
.tutorials-page-head {
    display: block;
    margin-bottom: 0;
}
.tutorials-toolbar {
    position: relative;
    z-index: 40;
    margin: 0 0 1.75rem;
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid rgba(212,163,89,.18);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(212,163,89,.1), transparent 55%),
        linear-gradient(180deg, rgba(18,14,8,.55), rgba(8,8,8,.72));
    display: flex;
    flex-direction: column;
    gap: .95rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    overflow: visible;
}
@media (min-width: 900px) {
    .tutorials-page-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        gap: 1.15rem 1.5rem;
        align-items: start;
        margin-bottom: 1.5rem;
    }
    .tutorials-page-head__intro {
        margin-bottom: 0;
        min-width: 0;
    }
    .tutorials-page-head .tutorials-toolbar {
        width: 100%;
        max-width: 340px;
        justify-self: stretch;
        margin: 0;
        padding: .75rem .85rem .85rem;
        gap: .55rem;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(0,0,0,.24);
    }
    .tutorials-page-head .tutorials-toolbar__eyebrow {
        font-size: .62rem;
        letter-spacing: .12em;
    }
    .tutorials-page-head .tutorials-toolbar__hint {
        font-size: .68rem;
        line-height: 1.5;
    }
    .tutorials-page-head .tutorials-search {
        padding: .22rem .28rem .22rem .7rem;
    }
    .tutorials-page-head .tutorials-search__icon {
        width: .95rem;
        height: .95rem;
    }
    .tutorials-page-head .tutorials-search__input {
        font-size: .78rem;
        padding: .38rem 0;
    }
    .tutorials-page-head .tutorials-search__btn {
        padding: .42rem .85rem;
        font-size: .7rem;
    }
    .tutorials-page-head .tutorials-search__clear {
        width: 1.35rem;
        height: 1.35rem;
        font-size: .9rem;
    }
    .tutorials-page-head .tutorials-toolbar__controls {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    .tutorials-page-head .tutorials-toolbar__label {
        font-size: .62rem;
    }
    .tutorials-page-head .tutorials-pill {
        padding: .36rem .7rem;
        font-size: .68rem;
    }
    .tutorials-page-head .tutorials-sort {
        min-width: 0;
    }
    .tutorials-page-head .tutorials-sort__trigger {
        padding: .55rem .8rem;
        font-size: .74rem;
        border-radius: 12px;
    }
    .tutorials-page-head .tutorials-toolbar__meta {
        font-size: .66rem;
        gap: .35rem .55rem;
        padding-top: .1rem;
    }
}
.tutorials-toolbar__head {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.tutorials-toolbar__eyebrow {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight: 700;
}
.tutorials-toolbar__hint {
    margin: 0;
    font-size: .76rem;
    color: var(--text-dim);
    line-height: 1.7;
}
.tutorials-toolbar__form { width: 100%; }
.tutorials-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .35rem .4rem .35rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(5,5,5,.72);
    transition: border-color .25s, box-shadow .25s;
}
.tutorials-search:focus-within {
    border-color: rgba(212,163,89,.55);
    box-shadow: 0 0 0 3px rgba(212,163,89,.12);
}
.tutorials-search__icon {
    width: 1.05rem; height: 1.05rem;
    color: var(--gold-soft);
    flex-shrink: 0;
    opacity: .9;
}
.tutorials-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #f5f5f5;
    font-family: inherit;
    font-size: .88rem;
    padding: .55rem 0;
}
.tutorials-search__input::placeholder { color: var(--text-dim); }
.tutorials-search__clear {
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    font-size: 1rem;
    line-height: 1;
    transition: color .2s, border-color .2s;
}
.tutorials-search__clear:hover {
    color: var(--gold);
    border-color: rgba(212,163,89,.4);
}
.tutorials-search__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: .55rem 1.15rem;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    color: #111;
    background: linear-gradient(135deg, #e2c07a, #c4963f);
    transition: filter .2s, transform .15s;
}
.tutorials-search__btn:hover { filter: brightness(1.06); }
.tutorials-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    position: relative;
    z-index: 2;
    overflow: visible;
}
.tutorials-toolbar__group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}
.tutorials-toolbar__group--sort {
    position: relative;
    z-index: 3;
}
.tutorials-toolbar__label {
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--text-dim);
    font-weight: 600;
}
.tutorials-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.tutorials-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .42rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(8,8,8,.65);
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 600;
    transition: all .2s;
}
.tutorials-pill:hover {
    color: var(--gold);
    border-color: rgba(212,163,89,.35);
}
.tutorials-pill.is-active {
    color: #111;
    border-color: transparent;
    background: linear-gradient(135deg, #e2c07a, #c4963f);
    box-shadow: 0 0 18px rgba(212,163,89,.2);
}
.tutorials-sort {
    position: relative;
    min-width: min(100%, 260px);
    width: 100%;
    z-index: 50;
}
.tutorials-sort__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(5,5,5,.82);
    color: #eee;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .72rem 1rem;
    cursor: pointer;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tutorials-sort__trigger:hover,
.tutorials-sort.is-open .tutorials-sort__trigger {
    border-color: rgba(212,163,89,.5);
    box-shadow: 0 0 0 3px rgba(212,163,89,.12);
}
.tutorials-sort__value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tutorials-sort__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--gold-soft);
    flex-shrink: 0;
    transition: transform .2s;
}
.tutorials-sort.is-open .tutorials-sort__chevron {
    transform: rotate(180deg);
}
.tutorials-sort__menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    left: 0;
    margin: 0;
    padding: .4rem;
    list-style: none;
    border-radius: 14px;
    border: 1px solid rgba(212,163,89,.28);
    background:
        linear-gradient(180deg, rgba(24,18,10,.98), rgba(10,10,10,.98));
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index: 60;
    max-height: min(60vh, 280px);
    overflow-y: auto;
}
.tutorials-sort__menu[hidden] { display: none; }
.tutorials-sort__option {
    display: block;
    padding: .7rem .85rem;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.tutorials-sort__option:hover {
    background: rgba(212,163,89,.12);
    color: var(--gold);
}
.tutorials-sort__option.is-active {
    background: linear-gradient(135deg, rgba(226,192,122,.95), rgba(196,150,63,.95));
    color: #111;
}
.tutorials-toolbar__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    font-size: .72rem;
    color: var(--text-dim);
    padding-top: .15rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.tutorials-toolbar__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.tutorial-grid {
    position: relative;
    z-index: 1;
}
/* Mobile: only make the search/sort card shorter — keep stacked layout */
@media (max-width: 899px) {
    .tutorials-toolbar {
        padding: .7rem .75rem .8rem;
        gap: .65rem;
        margin-bottom: 1rem;
    }
    .tutorials-toolbar__eyebrow { font-size: .62rem; }
    .tutorials-toolbar__hint {
        font-size: .68rem;
        line-height: 1.45;
    }
    .tutorials-search {
        padding: .28rem .32rem .28rem .7rem;
    }
    .tutorials-search__input {
        font-size: .82rem;
        padding: .4rem 0;
    }
    .tutorials-search__btn {
        padding: .48rem .9rem;
        font-size: .72rem;
    }
    .tutorials-sort__trigger {
        padding: .58rem .85rem;
        font-size: .76rem;
    }
    .tutorials-pill {
        padding: .38rem .8rem;
        font-size: .7rem;
    }
}
@media (max-width: 720px) {
    .tutorials-toolbar__controls {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .tutorials-toolbar__group--sort { width: 100%; }
    .tutorials-sort { min-width: 0; width: 100%; }
    .tutorials-pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
    }
    .tutorials-pill {
        width: 100%;
        padding: .45rem .4rem;
        font-size: .7rem;
        text-align: center;
    }
    .tutorials-search {
        border-radius: 14px;
        flex-wrap: wrap;
        padding: .45rem;
        gap: .4rem;
    }
    .tutorials-search__input {
        flex: 1 1 calc(100% - 2.5rem);
        order: 2;
        width: 100%;
        padding: .28rem 0 .1rem;
    }
    .tutorials-search__icon { order: 1; }
    .tutorials-search__clear { order: 3; }
    .tutorials-search__btn {
        order: 4;
        width: 100%;
        padding: .58rem 1rem;
    }
    .tutorials-sort__menu {
        max-height: min(50vh, 260px);
    }
}

/* --- Landing polish --- */
.landing-hero { text-align: center; padding: 2.5rem 0 1rem; position: relative; }
.landing-hero .hero__eyebrow,
.landing-hero .h-hero,
.landing-hero .lead,
.landing-hero #countdown-banner > p {
    text-align: center !important;
    text-align-last: center !important;
}
.landing-hero .hero__eyebrow {
    margin-left: auto;
    margin-right: auto;
}
.landing-hero .lead {
    max-width: 40rem;
    margin: 1rem auto 2rem;
}
.landing-hero__desc {
    text-align: center !important;
    text-align-last: center !important;
}
.landing-hero .countdown-label {
    font-size: .7rem;
    color: rgba(245,158,11,.7);
    letter-spacing: .25em;
    margin: 0 auto 1rem;
    text-align: center !important;
    text-align-last: center !important;
}
.landing-panel {
    max-width: 520px; margin: 0 auto 1.5rem; padding: 1.35rem;
}
.countdown-banner {
    max-width: 500px;
    margin: 0 auto 2rem;
}
.landing-enroll-wrap {
    max-width: 400px;
    margin: 0 auto;
    min-height: 140px;
}
.landing-state-box {
    padding: 1.5rem;
    text-align: center;
}
.landing-state-box p,
.landing-state-box__title,
.landing-state-box__body {
    text-align: center !important;
    text-align-last: center !important;
}
.landing-state-box__title {
    font-size: .85rem;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0 .5rem;
}
.landing-state-box__title--danger { color: var(--danger); }
.landing-state-box__body {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0;
}
.full-description {
    max-width: 640px; margin: 2.5rem auto 0;
    padding: 1.75rem 1.5rem; border-radius: var(--radius);
    background: rgba(12,12,12,.55); border: 1px solid rgba(212,163,89,.12);
}
.full-description .label {
    font-family: var(--font-display); font-size: .8rem; color: var(--gold);
    letter-spacing: .15em; margin-bottom: 1rem;
}
.full-description__rules {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(212,163,89,.12);
}
.btn-rules-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem 1rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--gold-soft);
    background: linear-gradient(145deg, rgba(245,158,11,.1), rgba(10,10,10,.75));
    border: 1px solid rgba(212,163,89,.28);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    transition: color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.btn-rules-link svg {
    width: .9rem;
    height: .9rem;
    flex-shrink: 0;
    opacity: .85;
}
.btn-rules-link:hover {
    color: #fff;
    border-color: rgba(245,158,11,.55);
    box-shadow: 0 0 18px rgba(212,163,89,.22);
    transform: translateY(-1px);
}
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.countdown-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background: rgba(10,10,10,.55); border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-sm); padding: 1.1rem .65rem; text-align: center;
}
.countdown-card .card-val {
    display: block;
    font-size: 1.45rem; font-weight: 700; color: #fff;
    font-family: var(--font-mono); line-height: 1; letter-spacing: .04em;
}
.countdown-card.sec-card { border-color: rgba(245,158,11,.25); }
.countdown-card.sec-card .card-val { color: var(--gold); }
.countdown-card .card-lbl {
    display: block;
    font-size: .68rem; color: var(--text-dim);
    line-height: 1; letter-spacing: .06em;
}

/* لندینگ موبایل: کمی جمع‌تر تا به لبهٔ صفحه نچسبد */
@media (max-width: 899px) {
    .landing-hero .countdown-banner,
    .landing-hero .landing-panel,
    .landing-hero .landing-enroll-wrap {
        width: calc(100% - .7rem);
        max-width: calc(100% - .7rem);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .landing-hero .countdown-banner { margin-bottom: 1.5rem; }
    .landing-hero .countdown-grid { gap: .45rem; }
    .landing-hero .countdown-card {
        padding: .85rem .35rem;
        min-width: 0;
    }
    .landing-hero .countdown-card .card-val { font-size: 1.2rem; }
    .landing-hero .countdown-card .card-lbl { font-size: .62rem; }
    .landing-hero .landing-panel { padding: 1.15rem 1rem; }
    .landing-hero .landing-state-box { padding: 1.25rem 1rem; }
}

/* --- Reminder CTA + modal --- */
.reminder-cta-wrap {
    display: flex;
    justify-content: center;
    margin: 1.25rem auto 0;
}
.btn-reminder {
    min-width: 9.5rem;
    padding: .72rem 1.85rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: #f3e6c8;
    background:
        linear-gradient(145deg, rgba(245,158,11,.18), rgba(10,10,10,.92));
    border: 1px solid rgba(212,163,89,.45);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
}
.btn-reminder:hover {
    color: #fff;
    border-color: rgba(245,158,11,.7);
    box-shadow: 0 0 28px rgba(212,163,89,.28);
    transform: translateY(-1px);
}
body.reminder-modal-open { overflow: hidden; }
.reminder-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.reminder-modal.hidden { display: none; }
.reminder-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
}
.reminder-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: 2rem 1.6rem 1.75rem;
    text-align: center;
    border: 1px solid rgba(212,163,89,.28);
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(212,163,89,.08);
}
.reminder-modal__close {
    position: absolute;
    top: .65rem;
    left: .85rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.reminder-modal__close:hover { color: var(--gold); }
.reminder-modal__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--gold);
    margin: 0 0 .85rem;
    letter-spacing: .08em;
    text-align: center;
}
.reminder-modal__text {
    font-size: .86rem;
    line-height: 2;
    color: var(--text-muted);
    margin: 0 auto 1.35rem;
    max-width: 22rem;
    text-align: center;
}
.reminder-modal__form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    text-align: center;
}
.reminder-modal__form .input {
    text-align: center;
}

/* --- Enrollment success --- */
.success-page {
    min-height: calc(100vh - var(--header-h) - 8rem);
    display: flex; align-items: center;
}
.success-page__wrap {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.success-page__icon {
    width: 72px; height: 72px; margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(52,211,153,.35);
    background: rgba(16,185,129,.08);
    box-shadow: 0 0 28px rgba(16,185,129,.15);
    color: #34d399;
}
.success-page__icon svg { width: 30px; height: 30px; }
.success-page__title { margin: .75rem 0 0; line-height: 1.7; }
.success-page__lead { margin: 1rem auto 1.75rem; }
.success-page__card {
    padding: 1.75rem 1.5rem;
    text-align: right;
}
.success-page__row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; font-size: .85rem; color: var(--text-muted);
}
.success-page__row b { color: #fff; font-weight: 600; }
.success-page__actions {
    display: flex; flex-direction: column; gap: .75rem;
    margin-top: 1.35rem;
}
.success-page__note {
    margin-top: 1.25rem;
    font-size: .78rem;
    color: var(--text-dim);
    line-height: 1.9;
}

/* --- Focus / a11y --- */
:focus-visible {
    outline: 2px solid rgba(180,140,80,.7);
    outline-offset: 2px;
}

/* --- Tutorial tags & cards --- */
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; align-items: center; }
.tag {
    display: inline-flex; align-items: center;
    font-size: .65rem; font-weight: 700;
    padding: .28rem .55rem; border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
}
.tag--video { color: #7dd3fc; background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.28); }
.tag--text { color: #c4b5fd; background: rgba(139,92,246,.12); border-color: rgba(167,139,250,.4); }
.tag--audio { color: #f0abfc; background: rgba(217,70,239,.1); border-color: rgba(217,70,239,.28); }
.tutorial-card { position: relative; padding: 0; overflow: hidden; }
.tutorial-card__cover {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #14110a, #0a0a0a);
    overflow: hidden;
}
.tutorial-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-card__body { padding: 1rem 1.1rem 1.2rem; }
.tutorial-card__summary {
    font-size: .78rem; color: var(--text-muted); margin-top: .4rem; line-height: 1.9;
}
.tutorial-card .h-card { margin-top: .15rem; }
.icon-lock { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; margin-inline-start: .2rem; }
.badge-premium, .badge-preview {
    display: inline-flex; align-items: center; gap: .3rem;
}
.lock-overlay {
    position: absolute; top: .65rem; left: .65rem; z-index: 2;
}

/* --- About / ویدیو لوپ کنار تیتر --- */
.about-page { max-width: 980px; }
.about-hero {
    display: grid;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}
@media (min-width: 800px) {
    .about-hero {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
        gap: 2.5rem;
    }
}
.about-hero__copy { text-align: right; }
.about-hero__eyebrow { margin-bottom: .85rem; }
.about-hero__title { margin: 0; }
.about-hero__tagline {
    margin-top: .85rem;
    font-size: .86rem;
    color: var(--gold-soft);
    letter-spacing: .04em;
}
.about-content { margin-top: .5rem; }
.about-story { margin: 0; }

.about-hero__media {
    width: min(420px, 100%);
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
}
.about-hero__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(420px, 70vw);
    object-fit: contain;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

@media (max-width: 799px) {
    .about-hero__copy { text-align: center; }
    .about-hero__eyebrow,
    .about-hero__title,
    .about-hero__tagline {
        text-align: center !important;
        text-align-last: center !important;
    }
    .about-hero__media {
        order: -1;
        width: min(320px, 88vw);
        margin-bottom: .2rem;
    }
}

.social-row--labeled {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    row-gap: 1.5rem;
    margin-top: 1.75rem;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .55rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--gold-soft);
    font-size: .78rem;
    background: transparent;
    transition: border-color .2s, color .2s, filter .2s;
    margin: 0;
}
.social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.social-btn:hover {
    border-color: var(--border-strong);
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(180,140,80,.3));
}
.team-grid { margin-top: 1.5rem; }
.team-photo {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover; margin-bottom: 1rem; border: 1px solid var(--border);
}
.team-role { font-size: .75rem; color: var(--gold); margin: .35rem 0 .75rem; }
.team-bio { font-size: .8rem; color: var(--text-muted); line-height: 1.9; }
.team-resume { margin-top: 1rem; font-size: .78rem; overflow-wrap: anywhere; }

/* --- Consultation hub --- */
.consult-page { max-width: 720px; }
.service-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin: 1.5rem 0 1.25rem;
}
@media (min-width: 720px) {
    .service-tabs { grid-template-columns: repeat(4, 1fr); }
}
.service-tab {
    border: 1px solid var(--border);
    background: rgba(10,10,10,.55);
    color: var(--text-muted);
    border-radius: 12px;
    padding: .7rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.service-tab.is-active {
    color: #111;
    background: linear-gradient(135deg, #d4a85a, #c4963f);
    border-color: transparent;
}
.service-panel { display: none; }
.service-panel.is-active { display: block; }
.form-panel { padding: 1.5rem; position: relative; overflow: visible; }
.form-panel .field { position: relative; z-index: 1; }
.form-panel .field:has(.tars-select.is-open) { z-index: 30; }

/* --- Custom selects (خدمات / فرم‌ها) --- */
.tars-select {
    position: relative;
    width: 100%;
    z-index: 2;
}
.tars-select.is-open {
    z-index: 50;
}
.tars-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.tars-select__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: 14px;
    border: 1px solid rgba(212,163,89,.28);
    background:
        linear-gradient(180deg, rgba(18,14,8,.9), rgba(8,8,8,.95));
    color: #f0f0f0;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    padding: .85rem 1rem;
    cursor: pointer;
    outline: none;
    text-align: right;
    transition: border-color .2s, box-shadow .2s, background .2s;
    min-height: 3rem;
}
.tars-select__trigger:hover,
.tars-select.is-open .tars-select__trigger {
    border-color: rgba(212,163,89,.6);
    box-shadow: 0 0 0 3px rgba(212,163,89,.12);
}
.tars-select__value {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tars-select__chevron {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--gold-soft);
    flex-shrink: 0;
    transition: transform .2s;
}
.tars-select.is-open .tars-select__chevron {
    transform: rotate(180deg);
}
.tars-select__menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    left: 0;
    margin: 0;
    padding: .45rem;
    list-style: none;
    border-radius: 14px;
    border: 1px solid rgba(212,163,89,.3);
    background: linear-gradient(180deg, rgba(24,18,10,.99), rgba(8,8,8,.99));
    box-shadow: 0 22px 48px rgba(0,0,0,.5);
    z-index: 80;
    max-height: min(55vh, 300px);
    overflow-y: auto;
}
.tars-select__menu[hidden] { display: none; }
.tars-select__option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: right;
    padding: .78rem .9rem;
    border-radius: 10px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tars-select__option:hover {
    background: rgba(212,163,89,.12);
    color: var(--gold);
}
.tars-select__option.is-active {
    background: linear-gradient(135deg, rgba(226,192,122,.95), rgba(196,150,63,.95));
    color: #111;
}
@media (max-width: 720px) {
    .tars-select__trigger {
        font-size: .8rem;
        padding: .8rem .9rem;
        border-radius: 12px;
        white-space: normal;
        align-items: flex-start;
    }
    .tars-select__value {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .tars-select__menu {
        max-height: min(45vh, 260px);
    }
    .tars-select__option {
        font-size: .78rem;
        padding: .85rem .85rem;
        white-space: normal;
    }
}

.course-comments {
    max-width: 720px;
    margin: 2.5rem auto 0;
    text-align: right;
}
.comments-scroll--compact { max-height: calc(4 * 7.2rem); }
.comment-form-box .h-card { margin-bottom: .85rem; }
.comment-form-box .hint { margin-bottom: 1rem; }
.otp-resend { margin-top: 1rem; }
.otp-timer { margin-top: .65rem; text-align: center !important; }
.detail-page { max-width: 760px; }
.detail-meta {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.detail-meta .tag-row {
    margin-bottom: 0;
    display: inline-flex;
    vertical-align: middle;
}
.detail-meta .badge {
    line-height: 1.2;
}
.detail-cover {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: 1.25rem 0 1.5rem;
    background: rgba(10, 10, 10, .35);
}
.detail-actions { margin-bottom: 1rem; }
.detail-content { padding: 1.75rem; margin-top: 1rem; }
.audio-box {
    margin: 1rem 0 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(10,10,10,.45);
}
.audio-box audio { width: 100%; display: block; }

/* --- Tech chips: no hard rectangle halo --- */
.tech-chip img {
    background: transparent;
    padding: 0;
    border-radius: 0;
    filter: drop-shadow(0 0 4px rgba(180,140,80,.2));
}

/* --- Mobile density & alignment --- */
@media (max-width: 899px) {
    :root {
        --header-h: 56px;
        --page-pad: 1.15rem;
        --gold: #b8955e;
        --gold-soft: #a88858;
        --gold-glow: rgba(150,120,70,.18);
        --radius: 12px;
        --radius-sm: 10px;
    }
    body { font-size: 14px; }
    .section { padding: 2.4rem 0; }
    .section-tight { padding: 1.5rem 0; }
    .btn {
        padding: .62rem 1.05rem;
        font-size: .72rem;
        border-radius: 10px;
    }
    .card { padding: 1rem; }
    .h-hero { font-size: clamp(1.25rem, 6vw, 1.7rem); }
    .h-section { font-size: 1.05rem; }
    .lead { font-size: .86rem; line-height: 1.9; }
    .hero--home .tars-container,
    .hero__content {
        padding-inline: 0;
    }
    .hero__content { padding: 1.25rem 0 1.5rem; }
    .hero__copy {
        text-align: center;
        align-items: center;
        padding-inline: .15rem;
        max-width: 100%;
    }
    .hero__copy .h-hero,
    .hero__eyebrow,
    .hero__lead {
        text-align: center;
        text-align-last: center;
    }
    .hero-cta {
        justify-content: center;
        width: 100%;
    }
    .coder-scene {
        min-height: 260px;
        max-width: 100%;
        margin-inline: .15rem;
        padding-inline: .1rem;
        box-sizing: border-box;
    }
    .coder-window { margin-inline: 0; }
    .coder-screen { min-height: 140px; font-size: .66rem; }
    .tech-chip { font-size: .62rem; padding: .32rem .55rem; }
    .tech-chip img { width: 16px; height: 16px; }
    .tars-logo__mark { height: 20px; }
    .tars-logo__word { height: 12px; }
    .input { padding: .75rem .85rem; font-size: .8rem; }
    .chips {
        justify-content: center;
        padding-inline: .15rem;
    }
    .grid-3 { gap: .9rem; }
    .footer-col--links,
    .footer-col--links h4,
    .footer-col--links p,
    .footer-col--links a {
        text-align: center !important;
        text-align-last: center !important;
    }
}

/* پشتیبانی داشبورد — گفتگوی تیکت */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.ticket-list__item {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, background .2s ease;
}
.ticket-list__item:hover {
    border-color: rgba(245, 158, 11, .35);
}
.ticket-list__head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
}
.ticket-list__preview {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .65rem;
    line-height: 1.9;
}
.ticket-list__meta {
    font-size: .65rem;
    color: var(--text-dim);
    margin-top: .5rem;
}
.ticket-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.ticket-msg {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}
.ticket-msg--staff {
    border-color: rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .06);
}
.ticket-msg--user {
    border-color: rgba(52, 211, 153, .22);
    background: rgba(52, 211, 153, .05);
}
.ticket-msg__meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    margin-bottom: .55rem;
    font-size: .72rem;
    color: var(--text-dim);
}
.ticket-msg__who {
    font-weight: 600;
    color: var(--text-muted);
}
.ticket-msg--staff .ticket-msg__who { color: var(--gold); }
.ticket-msg--user .ticket-msg__who { color: var(--success); }
.ticket-msg__body {
    font-size: .84rem;
    line-height: 1.9;
    margin: 0;
    color: var(--text);
}
.ticket-reply__actions { margin-top: .25rem; }
.ticket-close-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* --- Pagination --- */
.tars-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.tars-pagination__status {
    font-size: .78rem;
    color: var(--text-muted);
    min-width: 7rem;
    text-align: center;
}
.tars-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .45rem .9rem;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .08);
    color: var(--gold-soft, #fbbf24);
    font-size: .78rem;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.tars-pagination__btn:hover {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .45);
    color: var(--gold);
}
.tars-pagination__btn--disabled {
    opacity: .35;
    pointer-events: none;
    border-color: #333;
    background: transparent;
    color: var(--text-dim, #888);
}