/* ════ فونت — روی سرور خودمان، نه گوگل‌فونتس ════
   Estedad (SIL OFL 1.1) — assets/fonts/OFL.txt
   فونت متغیر است: یک فایل همهٔ وزن‌های ۱۰۰ تا ۹۰۰ را می‌دهد.
   unicode-range باعث می‌شود مرورگر فقط زیرمجموعه‌ای را بگیرد که صفحه لازم دارد. */
@font-face{
  font-family:Estedad;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/estedad-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EEFF;
}
@font-face{
  font-family:Estedad;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/estedad-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Estedad;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/estedad-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ════ توکن‌ها — «مجله‌ای آرام» (طرح B) ════
   کاغذ کرم، جوهر سبزِ تیره، یک سبزآبی عمیق برای تأکید و پیشرفت؛ قرمز آجری فقط برای خطا و هشدار.
   پیش‌فرض روشن است؛ تیره با دکمهٔ تم یا «پیرو سیستم». */
/* Sahel، فونت متغیر صابر راستی‌کردار (SIL OFL 1.1) */
@font-face{font-family:Sahel;font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/sahel-vf.woff2) format('woff2')}
:root{
  color-scheme:light;
  --font:Sahel,Estedad,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --bg:#F4EFE6;
  --surface:#FBF8F2;
  --surface-2:#ECE5D8;
  --side-paper:#F1EBE0;
  --line:rgba(20,33,31,.13);
  --line-2:rgba(20,33,31,.08);
  --line-strong:rgba(20,33,31,.24);
  --text:#14211F;
  --ink-2:rgba(20,33,31,.78);
  --muted:#56615D;
  --faint:#5F6662;
  --brand:#14211F;          /* دکمهٔ پر: قرص جوهری، کاغذ روی آن */
  --brand-hover:#0C1715;
  --brand-soft:#DCE7E1;
  --on-brand:#F4EFE6;
  --brand-bright:#0F5C56;
  --brand-ink:#F4EFE6;
  --accent:#0F5C56;         /* سبزآبی عمیق */
  --accent-2:#2F7E74;
  --accent-soft:#DCE7E1;
  --accent-text:#0F5C56;
  --on-accent:#F4EFE6;
  --stone:#14211F; --on-stone:#F4EFE6; --stone-mu:rgba(244,239,230,.7); --stone-hi:#BFE0D6;
  --up:#0F5C56;
  --up-soft:#DCE7E1;
  --warn:#8A6418;
  --warn-soft:#F1E6CC;
  --info:#56615D;
  --danger:#A5493B;
  --danger-soft:#F1DFD8;
  --ink-band:#14211F;
  --side-bg:#F1EBE0; --side-text:rgba(20,33,31,.78); --side-hover:rgba(20,33,31,.05); --side-active:#FBF8F2; --side-active-text:#14211F;
  --shadow-sm:0 0 0 1px rgba(20,33,31,.13);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 44px -30px rgba(20,33,31,.42),0 2px 6px -2px rgba(20,33,31,.06);
  --shadow-lift:0 1px 0 rgba(255,255,255,.7) inset,0 34px 60px -32px rgba(20,33,31,.5),0 4px 10px -4px rgba(20,33,31,.08);
  --ease-quint:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --r:20px; --r-sm:14px; --r-lg:24px; --r-pill:999px;
  --side:268px;
  --cv1:#EFE9DE; --cv2:#ECE5D8; --cv3:#EEE8DC; --cv4:#E9E2D4; --cv5:#F0EAE0; --cv6:#E8E1D3;
  --gold:#A9821F; --gold-deep:#7A5D12; --gold-soft:#F1E6CC;
  --silver:#8C9692; --silver-soft:#ECE9E3;
  --bronze:#A5693B; --bronze-soft:#F1E3D6;
}
/* تم تیره: همان خانواده، جوهر و کاغذ جابه‌جا */
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0E1514; --surface:#151F1D; --surface-2:#1D2A28; --side-paper:#111A19;
    --line:rgba(226,238,233,.12); --line-2:rgba(226,238,233,.07); --line-strong:rgba(226,238,233,.24);
    --text:#E9EFEB; --ink-2:rgba(233,239,235,.82); --muted:#B4C1BC; --faint:#94A39D;
    --brand:#E9EFEB; --brand-hover:#FFFFFF; --brand-soft:#16312D; --on-brand:#0E1514; --brand-ink:#0E1514; --brand-bright:#7CC8BA;
    --accent:#7CC8BA; --accent-2:#5FB3A6; --accent-soft:#16312D; --accent-text:#8FD3C5; --on-accent:#0E1514;
    --stone:#1F3B36; --on-stone:#E9EFEB; --stone-mu:rgba(233,239,235,.68); --stone-hi:#BFE0D6;
    --up:#7CC8BA; --up-soft:#16312D; --warn:#E3B65E; --warn-soft:#2E2614; --info:#B4C1BC; --danger:#EC9787; --danger-soft:#3A1F1A;
    --ink-band:#0A100F;
    --side-bg:#111A19; --side-text:rgba(233,239,235,.8); --side-hover:rgba(233,239,235,.06); --side-active:#151F1D; --side-active-text:#E9EFEB;
    --shadow-sm:0 0 0 1px rgba(226,238,233,.12);
    --shadow:0 22px 44px -30px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.3);
    --shadow-lift:0 34px 60px -32px rgba(0,0,0,.8),0 4px 10px -4px rgba(0,0,0,.4);
    --cv1:#1A2523; --cv2:#1D2A28; --cv3:#182220; --cv4:#1F2C2A; --cv5:#1B2725; --cv6:#17211F;
    --gold:#E0C05C; --gold-deep:#B08F2C; --gold-soft:#2B2412;
    --silver:#AEB8B4; --silver-soft:#1D2725;
    --bronze:#CB9160; --bronze-soft:#2A1F16;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    color-scheme:dark;
    --bg:#0E1514; --surface:#151F1D; --surface-2:#1D2A28; --side-paper:#111A19;
    --line:rgba(226,238,233,.12); --line-2:rgba(226,238,233,.07); --line-strong:rgba(226,238,233,.24);
    --text:#E9EFEB; --ink-2:rgba(233,239,235,.82); --muted:#B4C1BC; --faint:#94A39D;
    --brand:#E9EFEB; --brand-hover:#FFFFFF; --brand-soft:#16312D; --on-brand:#0E1514; --brand-ink:#0E1514; --brand-bright:#7CC8BA;
    --accent:#7CC8BA; --accent-2:#5FB3A6; --accent-soft:#16312D; --accent-text:#8FD3C5; --on-accent:#0E1514;
    --stone:#1F3B36; --on-stone:#E9EFEB; --stone-mu:rgba(233,239,235,.68); --stone-hi:#BFE0D6;
    --up:#7CC8BA; --up-soft:#16312D; --warn:#E3B65E; --warn-soft:#2E2614; --info:#B4C1BC; --danger:#EC9787; --danger-soft:#3A1F1A;
    --ink-band:#0A100F;
    --side-bg:#111A19; --side-text:rgba(233,239,235,.8); --side-hover:rgba(233,239,235,.06); --side-active:#151F1D; --side-active-text:#E9EFEB;
    --shadow-sm:0 0 0 1px rgba(226,238,233,.12);
    --shadow:0 22px 44px -30px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.3);
    --shadow-lift:0 34px 60px -32px rgba(0,0,0,.8),0 4px 10px -4px rgba(0,0,0,.4);
    --cv1:#1A2523; --cv2:#1D2A28; --cv3:#182220; --cv4:#1F2C2A; --cv5:#1B2725; --cv6:#17211F;
    --gold:#E0C05C; --gold-deep:#B08F2C; --gold-soft:#2B2412;
    --silver:#AEB8B4; --silver-soft:#1D2725;
    --bronze:#CB9160; --bronze-soft:#2A1F16;
  }
}

/* ════ پایه ════ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.85;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.5;margin:0;font-weight:800}
button,input,select,textarea{font:inherit}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:32px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ════ دکمه‌ها ════ */
.btn{
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap;
  appearance:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  min-height:44px;padding:0 18px;background:var(--surface);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{background:var(--line)}
.btn.primary{border-color:var(--brand);color:var(--on-brand);background:var(--brand)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.soft{background:var(--brand-soft);border-color:transparent;color:var(--brand)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.icon{width:44px;padding:0}
.btn.sm{min-height:36px;padding:0 12px;font-size:.88rem}
.btn.sm.icon{width:36px}
.btn.lg{min-height:52px;padding:0 24px;font-size:1.02rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ════ پوستهٔ سایت عمومی: نوار بالا ════ */
body:not(.shell) > header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:24px;min-height:68px;padding-block:10px;flex-wrap:wrap}
svg.mark{flex:none;display:block}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem}
.brand .mark{width:32px;height:32px}
.bar nav.links{display:flex;gap:4px;flex-wrap:wrap}
.bar nav.links a{min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-sm);color:var(--muted);font-size:.95rem;font-weight:600}
.bar nav.links a:hover{background:var(--surface-2);color:var(--text)}
.bar nav.links a.active{color:var(--brand)}
.spacer{flex:1}
.auth{display:flex;gap:8px;align-items:center}

/* ════ پوستهٔ برنامه: منوی کناری بعد از ورود ════
   روی دسکتاپ ستون ثابت کنار صفحه، روی موبایل نوار پایین. */
body.shell > header{position:fixed;inset-block:0;inset-inline-start:0;width:var(--side);z-index:30;
  background:var(--surface);border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;padding:18px 14px;overflow-y:auto}
body.shell > main,body.shell > footer{margin-inline-start:var(--side)}
.side-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem;padding:4px 10px 18px}
.side-logo .mark{width:32px;height:32px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);
  font-weight:600;font-size:.95rem;color:var(--muted)}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:800}
.side-nav .ico{width:20px;height:20px}
.side-nav .badge{margin-inline-start:auto;font-size:.75rem;font-weight:800;background:var(--accent);color:var(--on-accent);
  min-width:22px;height:22px;border-radius:999px;display:inline-grid;place-items:center;padding:0 6px}
.side-group{font-size:.78rem;font-weight:700;color:var(--faint);padding:16px 12px 4px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:16px}
.side-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:var(--surface-2)}
.side-user .who{flex:1;min-width:0;line-height:1.5}
.side-user .who b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .who span{font-size:.78rem;color:var(--faint)}
.side-mob{display:none}

.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:.85rem;
  object-fit:cover;overflow:hidden}
img.avatar{box-shadow:inset 0 0 0 1px var(--line)}
.avatar.sm{width:30px;height:30px;font-size:.78rem}
.avatar.lg{width:88px;height:88px;font-size:2rem}

/* ════ کاتالوگ ════ */
.catalog{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;padding-block:48px 80px}
.filters{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
body.shell .filters{top:24px}
.filter-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.filter-box :is(h2,h3){font-size:.95rem;padding:12px 16px;border-bottom:1px solid var(--line)}
.filter-box .opts{padding:6px;display:flex;flex-direction:column}
.filter-box .opts button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px;
  padding:0 12px;border-radius:var(--r-sm);font-weight:600;color:var(--muted)}
.filter-box .opts button:hover{background:var(--surface-2);color:var(--text)}
.filter-box .opts button[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand);font-weight:800}
.filter-box .opts button:focus-visible{outline:2px solid var(--brand)}
.catalog-main{flex:999 1 620px;min-width:0;display:flex;flex-direction:column;gap:20px}
.tybox{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--muted)}
.tybox.brand{background:var(--brand-soft);color:var(--brand)}
.tybox.accent{background:var(--accent-soft);color:var(--accent-text)}
.tybox.up{background:var(--up-soft);color:var(--up)}
.tybox.danger{background:var(--danger-soft);color:var(--danger)}

/* ════ بخش‌ها ════ */
.section{padding-block:48px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.panel + .section-head{margin-top:32px}
.section-head h2{font-size:1.3rem}
.section-head .link{color:var(--brand);font-size:.9rem;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}

/* ════ کارت دوره ════ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:border-color .15s ease
}
.card:hover{border-color:var(--line-strong)}
.card .thumb{aspect-ratio:16/9;position:relative;background:var(--surface-2)}
.card .thumb .badge{position:absolute;inset-block-start:10px;inset-inline-start:10px;font-size:.75rem;font-weight:700;
  background:rgba(12,14,24,.62);color:#fff;padding:3px 10px;border-radius:var(--r-pill)}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:1.02rem;font-weight:700}
.card .sub{color:var(--faint);font-size:.85rem;display:flex;gap:8px;align-items:center}
.card .sub .lv{color:var(--muted);font-weight:600}
.card .foot-line{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.cover{width:100%;height:100%;display:block;object-fit:cover}

/* ════ داشبورد ════ */
.dash{display:flex;flex-direction:column;gap:28px;padding-block:32px 64px}
.dash-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.dash-main{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.rail{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.greet h1{font-size:1.75rem}
.greet .cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.streak{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-weight:800;font-size:.9rem}
.resume{display:flex;flex-direction:row;flex-wrap:wrap;border-radius:var(--r-lg)}
.resume .thumb{flex:1 1 240px;min-height:200px;position:relative;background:var(--surface-2)}
.resume .thumb .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:#fff;color:#433C33;display:grid;place-items:center;box-shadow:var(--shadow)}
.resume .body{flex:1 1 280px;padding:24px;gap:10px}
.resume h2{font-size:1.2rem}
.date-chip{width:48px;text-align:center;flex:none;border-radius:10px;padding:6px 0;line-height:1.3;background:var(--brand-soft);color:var(--brand)}
.date-chip b{display:block;font-size:1.1rem}
.date-chip span{font-size:.75rem;font-weight:700}
.date-chip.danger{background:var(--danger-soft);color:var(--danger)}
.date-chip.accent{background:var(--accent-soft);color:var(--accent-text)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{padding:16px 20px;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--line);margin-inline-start:-1px}
.stat b{display:block;font-size:1.6rem;font-weight:900;line-height:1.4;font-variant-numeric:tabular-nums}
.stat span{color:var(--faint);font-size:.85rem;font-weight:600}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.panel > :is(h2,h3){font-size:1rem;font-weight:800;padding:14px 18px;border-bottom:1px solid var(--line)}
.row{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:flex-start;flex-wrap:wrap}
.row:last-child{border-bottom:0}
a.row:hover,.row.link-row:hover{background:var(--surface-2)}
.row .when{flex:none;width:48px;text-align:center;border-radius:10px;background:var(--brand-soft);color:var(--brand);
  padding:5px 0;font-size:.75rem;font-weight:700;line-height:1.4}
.row .when b{display:block;font-size:1.05rem}
.row .t{font-size:.95rem;font-weight:700}
.row .d{color:var(--faint);font-size:.84rem}
.row .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:10px}
.row .dot.warn{background:var(--accent)}
.panel .foot{padding:11px 16px;border-top:1px solid var(--line);text-align:center}
.panel .foot a{color:var(--brand);font-size:.88rem;font-weight:700}

/* پیشرفت */
.progress{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.progress.accent i{background:var(--accent)}
.card .pct{display:flex;justify-content:space-between;font-size:.82rem;color:var(--faint);margin-top:6px}
.card .pct b{color:var(--text);font-variant-numeric:tabular-nums}
.card .actions{padding:0 16px 16px}
.divider{height:1px;background:var(--line);margin-block:32px}

footer{border-top:1px solid var(--line);margin-top:20px;background:var(--surface)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:24px;color:var(--muted);font-size:.88rem}

/* ════ ریسپانسیو ════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}

/* ════ برچسب وضعیت ════
   پس‌زمینهٔ کم‌رنگ و متن پررنگ همان رنگ؛ رنگ تنها نشانه نیست، متن برچسب معنی را می‌گوید. */
.tag-type{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;line-height:1;
  padding:6px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);
  margin-inline-start:6px;white-space:nowrap;vertical-align:middle}
.t-session{color:var(--brand);background:var(--brand-soft)}
.t-assign{color:var(--accent-text);background:var(--accent-soft)}
.t-webinar{color:var(--muted);background:var(--surface-2)}
.t-exam{color:var(--danger);background:var(--danger-soft)}
.t-up{color:var(--up);background:var(--up-soft)}
.row .dot.t-session{background:var(--brand)}
.row .dot.t-assign{background:var(--accent)}
.row .dot.t-webinar{background:var(--faint)}
.row .dot.t-exam{background:var(--danger)}
.row .dot.t-up{background:var(--up)}

/* ════ مشخصات هنرجو ════ */
.info{margin:0;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}
.info > div{min-width:0}
.info .wide{grid-column:1/-1}
.info dt{color:var(--muted);font-size:.8rem;margin-bottom:2px}
.info dd{margin:0;font-weight:600;font-size:.95rem;overflow-wrap:anywhere}

/* ════ تقویم ════ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:16px}
.cal .dow{text-align:center;color:var(--muted);font-size:.78rem;padding-bottom:4px}
.day{
  appearance:none;font:inherit;cursor:pointer;position:relative;
  aspect-ratio:1;border:0;border-radius:var(--r);background:var(--surface-2);color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s,background .15s;
}
.day:hover{box-shadow:inset 0 0 0 2px var(--line-strong)}
.day.out{background:transparent;cursor:default;pointer-events:none}
.day.off{color:var(--danger)}
.day.today{box-shadow:inset 0 0 0 2px var(--brand)}
.day.selected{background:var(--brand);color:var(--brand-ink);box-shadow:none}
.day .n{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:0 16px 16px;color:var(--muted);font-size:.82rem}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend i.t-session{background:var(--brand)}
.legend i.t-assign{background:var(--warn)}
.legend i.t-webinar{background:var(--info)}
.legend i.t-exam{background:var(--danger)}

/* ════ فرم ════ */
.one-col{grid-template-columns:1fr}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide{grid-column:1/-1}
.field > span{font-size:.88rem;color:var(--text);font-weight:700}
.field input,.field select,.field textarea{
  font:inherit;color:var(--text);background-color:var(--surface);
  border:1px solid var(--line-strong);box-shadow:none;border-radius:var(--r-sm);
  min-height:44px;padding:9px 13px;width:100%;resize:vertical;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);background-color:var(--surface)}
.field .err{color:var(--danger);font-size:.78rem;font-style:normal;min-height:1em}
.checks{padding:16px;display:flex;flex-direction:column;gap:12px}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem}
.check input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.saved{color:var(--brand);font-weight:600;margin-top:16px}

/* ════ صفحهٔ دوره ════ */
.course{padding-block:28px 48px;display:flex;flex-direction:column;gap:18px}
.course-head{display:grid;grid-template-columns:280px 1fr;gap:0;overflow:hidden}
.course-head > .cover{height:100%;min-height:180px;object-fit:cover;border-inline-end:1px solid var(--line)}
.course-meta{padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.course-meta .row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.course-meta h1{font-size:1.4rem}
.course-meta p{margin:0}
.course-meta .meta{margin:0}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs a{min-height:48px;padding:0 16px;font-weight:700;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

.session summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);list-style:none}
.session summary::-webkit-details-marker{display:none}
.session summary:hover{background:var(--surface-2)}
.session .s-title{flex:1;font-weight:500;font-size:.95rem}
.session[open] summary{background:var(--surface-2)}
.session-body{padding:16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.session-body .video{min-height:78px;border-radius:var(--r);background:var(--surface-2);
  display:grid;place-items:center;color:var(--muted);box-shadow:inset 0 0 0 2px var(--line);
  padding:18px;text-align:center;font-size:.9rem}
/* ویدیوهای جلسه */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vid{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.vid .t{font-weight:600;font-size:.92rem}
.vid .d{color:var(--muted);font-size:.8rem}
.vid video{width:100%;border-radius:calc(var(--r) - 4px);background:#000;display:block}
a.vid.link{transition:box-shadow .18s ease,transform .18s ease}
a.vid.link:hover{box-shadow:inset 0 0 0 1.5px var(--brand);transform:translateY(-1px)}
a.vid.link .play{color:var(--brand);font-size:1.1rem}
.session-body .files{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.session-body .files a{font-size:.85rem;padding:5px 12px;border-radius:var(--r);
  box-shadow:inset 0 0 0 1.5px var(--line);color:var(--muted)}
.session-body .files a:hover{color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.session-body p{margin:0;font-size:.9rem}

.lock-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lock-body p{margin:0}
.join-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.join-row input{flex:1 1 280px;min-width:0}
.lock-body .err{color:var(--danger);font-style:normal;font-size:.85rem}
.lock-body .err:empty{display:none}
.panel .note{padding:10px 18px;margin:0;font-size:.85rem}

/* ════ گام‌های سری تمرین ════ */
.steps{display:flex;flex-direction:column;gap:14px;margin-block:4px 10px}
.step{display:flex;flex-direction:column;gap:7px;padding:12px 13px;border-radius:var(--r);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.step-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step textarea{font:inherit;color:var(--text);background-color:var(--bg);border:1px solid var(--line-strong);
  border-radius:10px;padding:8px 11px;resize:vertical;width:100%;min-width:0}
.step textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
/* تنظیمات جداگانهٔ هر تمرینِ سری */
.step-more{border-radius:10px}
.step-more > summary{cursor:pointer;list-style:none;font-size:.84rem;font-weight:600;color:var(--brand);
  padding:5px 2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.step-more > summary::-webkit-details-marker{display:none}
.step-more > summary::before{content:'+';font-weight:800;width:17px;height:17px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--brand-soft);font-size:.8rem;line-height:1}
.step-more[open] > summary::before{content:'−'}
.step-more > summary .d{font-weight:400}
.step-opts{display:flex;flex-direction:column;gap:10px;padding:10px 0 2px}
.step-nums{display:flex;gap:10px;flex-wrap:wrap}
.step-nums label{display:flex;flex-direction:column;gap:4px;flex:1 1 150px}
.step-nums input{font:inherit;color:var(--text);background-color:var(--bg);border:1px solid var(--line-strong);
  border-radius:10px;padding:7px 11px;min-height:38px;width:100%;min-width:0}
.step-nums input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.other-subs{margin-top:10px}
.other-subs > summary{cursor:pointer;list-style:none;font-size:.83rem;font-weight:600;color:var(--brand);
  display:flex;align-items:center;gap:6px;padding:4px 0}
.other-subs > summary::-webkit-details-marker{display:none}
.other-subs > summary::before{content:'+';font-weight:800;width:16px;height:16px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--brand-soft);font-size:.75rem;line-height:1}
.other-subs[open] > summary::before{content:'−'}
.step-attach{display:flex;flex-direction:column;gap:5px}
.step-attach input[type=file]{font-size:.85rem}
.step .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:.78rem;font-weight:700}
.step input{font:inherit;color:var(--text);background-color:var(--bg);border:1px solid var(--line-strong);
  border-radius:10px;padding:7px 11px;min-height:38px;min-width:0}
.step-top input[name="stepTitle"]{flex:1 1 170px}
.step input[name="stepDue"]{flex:0 0 auto;width:165px}
.step input[name="stepTime"]{flex:0 0 auto;width:135px}
.step input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.step .btn{flex:none}
@media (max-width:560px){ .step input[name="stepDue"],.step input[name="stepTime"]{flex:1 1 40%;width:auto} }
/* ردیف سرگروه سری و گام‌های زیرش */
.row.series-head{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.row.series-step{padding-inline-start:34px}

@media (max-width:760px){
  .course-head{grid-template-columns:1fr}
  .course-head > .cover{max-height:160px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .session summary{flex-wrap:wrap}
}

/* ════ صفحهٔ تمرین ════ */
.crumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.88rem;flex-wrap:wrap}
.crumbs a{color:var(--brand);font-weight:600}

.link-row{display:flex;text-decoration:none}
.link-row:hover .t{color:var(--brand)}

.assign-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 18px 6px;flex-wrap:wrap}
.assign-head h1{font-size:1.3rem}
.assign-head h2{font-size:1.17em}
.assign-head p{margin:2px 0 0;font-size:.9rem}
.assign-facts{margin:0;padding:14px 18px 18px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 20px}
.assign-facts dt{color:var(--muted);font-size:.8rem;margin-bottom:3px}
.assign-facts dd{margin:0;font-weight:600;font-size:.92rem}
.assign-facts dd.over{color:var(--danger)}
.assign-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.assign-body p{margin:0;line-height:1.9}

.upload{padding:16px 18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.upload p{margin:0}
.upload input[type=file]{font:inherit;font-size:.9rem;width:100%;max-width:460px;
  padding:12px;border-radius:var(--r);background:var(--surface-2);
  box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.upload input[type=file]::file-selector-button{
  font:inherit;font-weight:600;margin-inline-end:12px;cursor:pointer;
  border:0;border-radius:var(--r);padding:7px 16px;
  background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.upload input[type=file]:hover{box-shadow:inset 0 0 0 2px var(--line-strong)}
.upload .err{color:var(--danger);font-size:.85rem;font-style:normal}

/* تاریخچهٔ ارسال‌ها */
.subs-wrap{overflow-x:auto}
.subs{width:100%;border-collapse:collapse;font-size:.88rem;min-width:720px}
.subs th{text-align:right;font-weight:600;color:var(--muted);font-size:.8rem;
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.subs td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.subs tr:last-child td{border-bottom:0}
.subs tr.current{background:var(--brand-soft)}
.subs .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.subs .fname{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  direction:ltr;text-align:left;overflow-wrap:anywhere}
.subs .tag-type{margin:0}

/* ════ پنل مدرس ════ */
.new-form{border-top:1px solid var(--line)}
.new-form > summary{padding:12px 16px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--brand);list-style:none}
.new-form > summary::-webkit-details-marker{display:none}
.new-form > summary:hover{background:var(--surface-2)}
.new-form[open] > summary{background:var(--surface-2)}
.fmts{display:flex;flex-wrap:wrap;gap:10px 16px;padding:4px 0}
.fmts .check{font-size:.85rem}
.field select[multiple]{padding:6px;min-height:96px}

.review{border-bottom:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.review:last-child{border-bottom:0}
.review-top{display:flex;align-items:flex-start;gap:12px}
.review-top .t{font-weight:600}
.review-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.review-form .field{flex:0 0 132px}
.review-form .field.wide{flex:1 1 240px;grid-column:auto}
/* An empty error line under the score used to push it out of the row: with
   no text it takes no height and no gap either. */
.review-form .err{min-height:0}
.review-form .err:empty{display:none}
.review-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.review .note{margin:0;color:var(--muted)}

.row .avatar{margin-top:2px}

/* ════ رمز ثبت‌نام ════ */
.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;
  letter-spacing:.08em;text-transform:uppercase}
#enroll-form{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:340px;width:100%}
#enroll-form .field{width:100%}

/* ════ فرم پاسخ تمرین: متن، ضمیمه و ضبط صدا ════ */
.draft{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.draft textarea{font:inherit;width:100%;color:var(--text);background:var(--surface);
  border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:var(--r);padding:10px 12px;resize:vertical}
.draft textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}
.attach-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.attach-row input[type=file]{font:inherit;font-size:.86rem;width:100%;padding:10px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.attach-row input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-inline-end:10px;
  cursor:pointer;border:0;border-radius:var(--r);padding:6px 14px;background:transparent;
  color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}

.recorder{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600;min-width:52px}

.parts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.parts li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:.88rem}
.parts .pk{flex:none}
.parts .pn{flex:1;min-width:120px;overflow-wrap:anywhere}
.parts .pn a{color:var(--brand);font-weight:600}
.parts audio{height:32px;max-width:220px}
.sub-text{margin:6px 0 0;max-width:52ch;white-space:pre-wrap}

/* ════ سلکت و ورودی‌ها: فلش هم‌رنگ تم ════ */
select,.field select,.ver-pick{
  appearance:none;-webkit-appearance:none;
  font:inherit;color:var(--text);background-color:var(--surface);
  border:1px solid var(--line-strong);box-shadow:none;border-radius:var(--r-sm);
  padding:9px 12px;padding-inline-end:34px;cursor:pointer;
  /* یک فلش SVG تمیز؛ خاکستری میانه که روی تم روشن و تیره هر دو دیده می‌شود */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%2390999e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:left 12px center;
  background-size:12px 8px;
  background-repeat:no-repeat;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
select:hover,.field select:hover{border-color:var(--faint)}
select:focus,.field select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);background-color:var(--surface)}
select[multiple],.field select[multiple]{background-image:none;padding-inline-end:12px;cursor:default}
select option{background:var(--surface);color:var(--text)}
.ver-pick{padding:7px 12px;padding-inline-end:32px;font-size:.88rem;
  background-position:left 11px center}
input[type=date],input[type=time],input[type=number]{color-scheme:inherit}

/* ════ عکس پروفایل ════ */
.photo-row{display:flex;gap:18px;align-items:flex-start;padding:16px 18px;flex-wrap:wrap}
.photo-actions{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.photo-actions .field{width:100%}
.photo-actions input[type=file]{font:inherit;font-size:.86rem;width:100%;padding:10px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.photo-actions p{margin:0}

/* ════ گفت‌وگو ════ */
.composer{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.composer textarea{font:inherit;width:100%;color:var(--text);background:var(--surface);
  border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:var(--r);padding:10px 12px;resize:vertical}
.composer textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}
.composer-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.composer-row input[type=file]{font:inherit;font-size:.82rem;flex:1;min-width:180px;padding:8px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.composer-row .err{flex-basis:100%;color:var(--danger);font-size:.82rem;font-style:normal}

.posts{display:flex;flex-direction:column}
.post{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.post:last-child{border-bottom:0}
.post-head{display:flex;align-items:center;gap:10px}
.post-who{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}
.post-text{margin:0;white-space:pre-wrap;line-height:1.85;overflow-wrap:anywhere}
.post-actions{display:flex;gap:8px}
.post-img{max-width:min(280px,100%);border-radius:var(--r);margin-top:6px;
  box-shadow:inset 0 0 0 1px var(--line)}
.replies{display:flex;flex-direction:column;gap:8px;
  border-inline-start:2px solid var(--line);padding-inline-start:12px;margin-inline-start:6px}
.post.reply{padding:10px 0;border-bottom:0;background:transparent}
.reply-box{padding:0}
.reply-box .composer{padding:8px 0}

/* ════ موبایل ════ */
@media (max-width:760px){
  .wrap{padding-inline:16px}
  .bar{gap:10px;flex-wrap:wrap;padding-block:9px}
  .bar nav.links{display:flex;order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    gap:2px;padding:8px 0 1px;border-top:1px solid var(--line)}
  .bar nav.links::-webkit-scrollbar{display:none}
  .bar nav.links a{white-space:nowrap;font-size:.88rem}
  .spacer{display:none}
  .auth{margin-inline-start:auto;gap:6px}
  .user{padding:4px}
  .user b{display:none}
  .btn{padding:8px 14px}
  .btn.sm{padding:6px 12px}
  .tabs{overflow-x:auto;scrollbar-width:none;gap:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;padding:10px 12px;font-size:.9rem}
  .greet{gap:12px}
  .greet .cta{width:100%}
  .greet .cta .btn,.greet .cta .ver-pick{flex:1}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat b{font-size:1.25rem}
  .assign-facts{grid-template-columns:1fr 1fr;gap:12px}
  .assign-head{padding:14px 14px 4px}
  .assign-head h1{font-size:1.15rem}
  .section{padding-block:30px}
  .cal{gap:4px;padding:10px}
  .day{border-radius:6px}
  .day .n{font-size:.8rem}
  .legend{padding:0 12px 12px;gap:10px;font-size:.78rem}
  .info,.form-grid,.draft,.composer,.lock-body,.upload{padding-inline:14px}
  .form-grid{grid-template-columns:1fr}
  .review-form{flex-direction:column;align-items:stretch}
  .review-form .field,.review-form .field.wide{flex:1 1 auto}
  .review-actions{gap:8px}
  .review-actions .btn{flex:1}
  .attach-row{grid-template-columns:1fr}
  .recorder{gap:8px}
  .parts audio{max-width:100%;width:100%}
  .crumbs{font-size:.82rem}
  .post{padding:12px 14px}
  .replies{padding-inline-start:8px;margin-inline-start:2px}
  .row{padding:13px 14px;flex-wrap:wrap}
  .row .btn.sm{margin-inline-start:auto}
  .panel > :is(h2,h3){padding:12px 14px}
  .course-meta{padding:16px 14px}
  .course-meta h1{font-size:1.2rem}
  .dots button[aria-current="true"]{width:18px}
}
@media (max-width:420px){
  .assign-facts{grid-template-columns:1fr}
  .slide{padding:24px 20px}
  .nav{width:36px;height:36px;font-size:1rem}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:15px}
  .auth .btn:not(.icon):not(.sm){padding-inline:12px}
}

/* ════ عکس دوره در پنل مدرس ════ */
.cover-row{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;flex-wrap:wrap}
.cover-preview{width:200px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-2)}
@media (max-width:760px){ .cover-preview{width:100%} }

/* ════ پنل ادمین ════ */
.cover-mini{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:none;
  box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-2)}
.row .ver-pick{flex:none;max-width:190px}
#admin-users-err{display:block;padding:0 16px 14px;color:var(--danger);font-style:normal;font-size:.85rem}
@media (max-width:760px){
  .row .ver-pick{max-width:none;width:100%}
  .cover-mini{width:52px}
}

/* ════ صفحهٔ ورود و ثبت‌نام ════ */
.auth-page{display:grid;place-items:center;min-height:70vh;padding-block:40px}
.auth-card{width:100%;max-width:440px}
.auth-head{display:flex;gap:14px;align-items:flex-start;padding:20px 20px 8px}
.auth-head .mark{width:42px;height:42px;flex:none}
.auth-head h1{font-size:1.25rem}
.auth-head p{margin:4px 0 0;font-size:.9rem}
.auth-body{padding:14px 20px 18px}
.auth-body form{display:flex;flex-direction:column;gap:14px}
.auth-body .field input{width:100%}
.auth-body .cta{display:flex;gap:8px;flex-wrap:wrap}
.auth-body p{margin:0}
.otp{font-size:1.3rem;letter-spacing:.4em;text-align:center}
.auth-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:.86rem;font-weight:600}

/* ════ آیکون‌ها ════ */
.ico{width:18px;height:18px;display:block;flex:none}
.btn.icon{padding:10px}
.btn.icon:hover .ico{transform:rotate(-12deg)}
.ico{transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){ .ico{transition:none} }

/* ════ تب‌های صفحهٔ ورود ════ */
.auth-tabs{padding-inline:20px;margin-top:2px;border-bottom:1px solid var(--line)}
.auth-tabs a{cursor:pointer}

/* ════ فوتر و ارتباط با ما ════ */
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding-block:26px}
.foot-col :is(h2,h4){font-size:.95rem;margin:0 0 8px}
.foot-col p{margin:2px 0}
.foot-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem}
.foot-brand .mark{width:28px;height:28px}
.foot-col a{color:var(--brand)}
.contact-list{margin:0;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 22px}
.contact-item dt{color:var(--muted);font-size:.8rem;margin-bottom:3px}
.contact-item dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.contact-item dd a{color:var(--brand)}
@media (max-width:600px){ .foot-grid{grid-template-columns:1fr;gap:18px} }

/* متن معرفی فوتر */
.foot-about{margin:8px 0;color:var(--muted);font-size:.88rem;line-height:1.9;max-width:46ch}

/* ════ لیست سفید ════ */
.wl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.wl-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 4px;
  border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:.85rem}
.wl-chip .btn.sm{padding:2px 8px;font-size:.9rem;line-height:1}
#wl-form textarea{font:inherit;width:100%;color:var(--text);background:var(--surface);
  border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:var(--r);padding:10px 12px;resize:vertical;
  direction:ltr;text-align:left}
#wl-form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}

/* ════ پرداخت نهایی رابط ════ */
.empty-state{min-height:170px;padding:34px 24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center}
.empty-state .empty-icon .mark{width:50px;height:50px;margin-bottom:4px}
.empty-state h2{font-size:1.1rem;margin-bottom:4px}
.empty-state p{margin:0;color:var(--muted);max-width:44ch}
.empty-state .btn{margin-top:14px}
.home-empty{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.panel + .panel{margin-top:20px}
.one-col{max-width:1100px}
.course-meta{padding:22px 24px}
.course-meta h1{font-size:1.5rem}
/* هر برچسب جزیرهٔ جهت خودش است: نام فارسی-انگلیسی («مرحله اول - Market Mastery»)
   با عدد برچسب کناری قاطی نشود و قاب بیضی چند تکه نشود */
.tag-type,.chip,.qb-label{display:inline-block;unicode-bidi:isolate}
.auth-page{padding-block:64px}
.auth-card{max-width:460px}
.auth-head{padding:26px 26px 12px}
.auth-body{padding:18px 26px 26px}
.auth-tabs{padding-inline:26px}
.cal{gap:8px;padding:20px}
.day{border:1px solid transparent}
.day:hover{border-color:var(--line-strong);box-shadow:none}
.day.today{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 15%,transparent)}
.day.selected{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}

@media (max-width:760px){
  .panel + .panel{margin-top:16px}
  .panel{border-radius:15px}
  .greet h1{font-size:1.5rem}
  .empty-state{min-height:150px;padding:26px 18px}
  .course-meta{padding:20px 18px}
  .cal{gap:4px;padding:12px}
}
@media (max-width:480px){
  .brand{font-size:1.15rem}
  .brand .mark{width:36px;height:36px}
  .auth{gap:5px}
  .user{padding-inline-start:7px}
}

/* ════ پنل نام کاربری و رمز ════ */
.cred-body{padding:16px 18px;display:flex;flex-direction:column;gap:16px;max-width:420px}
.cred-body .field{gap:6px}
.cred-body .field > .d{font-size:.8rem}
.cred-body .err:empty{display:none}

/* ════ لیدربورد ════
   رتبه، جابه‌جایی هفته، و سهم هر نفر از امتیاز صدر. طلا فقط برای سکو.
   بدنه حاشیهٔ خودش را دارد، چون .panel بی‌حاشیه است و هر بخش حاشیه‌اش را
   خودش می‌گذارد. جدول پهن نمی‌شود تا ستون‌ها از هم فاصلهٔ بی‌معنی نگیرند. */
.lb-body{display:flex;flex-direction:column;gap:16px;padding:18px}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lb-head select{min-width:250px;max-width:100%}
.lb-table{display:flex;flex-direction:column;gap:10px;max-width:780px;width:100%}
.lb-head-row,.lb-row{
  display:grid;
  grid-template-columns:44px 56px minmax(0,1fr) 84px 130px;
  align-items:center;gap:14px;
}
.lb-head-row{padding:0 16px;font-size:12px;color:var(--muted)}
.lb-head-row span:not(:nth-child(3)){text-align:center}
.lb-row{padding:11px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.lb-row.top1{border-color:var(--gold);background:var(--gold-soft)}
.lb-row.top2{border-color:var(--silver);background:var(--silver-soft)}
.lb-row.top3{border-color:var(--bronze);background:var(--bronze-soft)}
/* ردیف خودت سکو را از دست نمی‌دهد؛ فقط یک حلقه دورش می‌آید */
.lb-row.me{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.lb-row:not(.top1):not(.top2):not(.top3).me{background:var(--brand-soft)}
/* رتبه یک نشان گرد است، نه ایموجی: در هر فونت و هر سکو یک‌جور می‌نشیند */
.lb-rank{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--text);
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.top1 .lb-rank{background:var(--gold);color:#22190a}
.top2 .lb-rank{background:var(--silver);color:#15191c}
.top3 .lb-rank{background:var(--bronze);color:#1d1109}
.lb-move{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-move.up{color:var(--up)}
.lb-move.down{color:var(--danger)}
.lb-who{display:flex;align-items:center;gap:10px;min-width:0}
.lb-who .avatar{flex:0 0 auto}
.lb-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-name .t{font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name .d{font-size:11.5px;line-height:1.5}
.lb-points{text-align:center;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.lb-bar{display:block;height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.lb-bar i{display:block;height:100%;border-radius:8px;background:var(--accent)}
.lb-foot{margin:0;font-size:.82rem;line-height:1.9}
@media (max-width:700px){
  .lb-body{padding:14px;gap:12px}
  .lb-head-row,.lb-row{grid-template-columns:34px 46px minmax(0,1fr) 64px;gap:10px}
  .lb-head-row span:last-child,.lb-bar{display:none}
  .lb-head select{min-width:100%}
  .lb-rank{width:28px;height:28px;font-size:13px}
}

/* ════ معیارهای امتیاز در کارت تصحیح ════ */
.crit-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
.crit{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2)}
.crit-t{font-size:12.5px;font-weight:600}
.crit input{width:58px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;text-align:center}
.crit-max{font-size:11px;color:var(--muted)}
.wl-chip .t{font-weight:600}

/* جانگهدار فارسی روی فیلدهای تک‌عرض: حروف بزرگ و فاصلهٔ حروف مال مقدار است، نه راهنما */
.code-input::placeholder{
  font-family:var(--font);
  text-transform:none;letter-spacing:normal;
}
.code-input{unicode-bidi:plaintext}
/* تا وقتی خالی است، راهنما از لبهٔ راست شروع شود؛ با نوشتن، مقدار چپ‌چین می‌شود */
.code-input:placeholder-shown{text-align:right}

/* ════ آزمون (ساید هنرجو) ════
   ساختار برگهٔ آزمون: نوار زمان چسبان، سؤال با چارت، گزینه‌های دوستونه، ناوبری
   شماره‌ای و نتیجه. هنگام آزمون سربرگ و پانویس سایت کنار می‌روند (exam-mode). */
body.exam-mode > header,body.exam-mode > footer{display:none}
.ex-page{padding-block:24px 56px;display:flex;flex-direction:column;gap:16px}
.ex-page .cta,.ex-modal .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ex-page .err{color:var(--danger);font-style:normal;font-size:.85rem}
.ex-page .err:empty{display:none}
.btn.danger{border-color:color-mix(in srgb,var(--danger) 60%,var(--line));color:var(--danger)}
.btn.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.ex-live-banner{display:block;margin-top:16px;padding:11px 16px;border-radius:var(--r);font-weight:600;font-size:.9rem;
  color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line))}

.ex-top{position:sticky;top:10px;z-index:30;display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:12px 18px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ex-brand{min-width:0}
.ex-brand h1{font-size:1.1rem;line-height:1.5;letter-spacing:0}
.ex-brand p{margin:0;color:var(--muted);font-size:.8rem}
.ex-brand b{color:var(--text);font-weight:600}
.ex-timer{direction:ltr;flex:none;min-width:112px;text-align:center;padding:9px 14px;border-radius:14px;
  background:var(--text);color:var(--bg);font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ex-timer.warn{background:var(--accent);color:var(--on-accent)}
.ex-timer.danger{background:var(--danger);color:#fff;animation:ex-pulse 1s infinite}
@keyframes ex-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}

.ex-progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-bottom:6px}
.ex-progress .progress{margin:0}
.ex-q{padding:22px}
.ex-qtop{display:flex;gap:14px;align-items:flex-start}
.ex-qnum{flex:none;text-align:center;padding:7px 12px;border-radius:13px;background:var(--brand-soft);color:var(--brand);
  font-weight:800;font-size:1.1rem;line-height:1.4;min-width:58px;font-variant-numeric:tabular-nums}
.ex-qnum small{display:block;font-size:.75rem;font-weight:600}
.ex-qtext{flex:1;margin:0;font-size:1.1rem;line-height:1.95;font-weight:700;letter-spacing:0}
.ex-chart{margin:18px auto 0;max-width:960px;border-radius:16px;overflow:hidden;background:#fff;position:relative;border:1px solid var(--line)}
.ex-chart img{width:100%;display:block;cursor:zoom-in}
.ex-zoom{position:absolute;bottom:10px;left:10px;border:0;border-radius:10px;padding:6px 10px;font:inherit;font-size:.75rem;font-weight:700;
  background:rgba(10,24,19,.82);color:#fff;cursor:pointer}
.ex-opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:17px}
.ex-opt{position:relative;min-height:58px;display:flex;align-items:center;width:100%;text-align:start;
  font:inherit;font-size:.95rem;line-height:1.75;color:var(--text);cursor:pointer;user-select:none;-webkit-user-select:none;
  border:1px solid var(--line-strong);background:var(--bg);border-radius:15px;padding-block:12px;padding-inline:54px 14px;
  transition:border-color .15s,background .15s,transform .15s}
.ex-opt:hover{border-color:var(--brand);transform:translateY(-1px)}
.ex-opt[aria-checked="true"]{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.ex-opt .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.ex-letter{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);font-weight:800;font-size:.78rem}
.ex-opt[aria-checked="true"] .ex-letter{background:var(--brand);color:var(--surface)}
/* متن سؤال انتخاب و کپی نمی‌شود؛ تلاش برای کپی ثبت می‌شود */
.ex-q,.ex-top{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.ex-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ex-actions .grp{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.ex-save{font-size:.8rem;color:var(--muted)}
.ex-finish{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px;padding-top:20px;
  border-top:1px dashed var(--line);text-align:center}
.ex-finish .d{margin:0;color:var(--muted);font-size:.82rem;max-width:46ch}
.ex-save.bad{color:var(--danger)}
.ex-nav{padding:14px}
.ex-nav-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.ex-legend{display:flex;gap:12px;flex-wrap:wrap}
.ex-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-inline-end:4px;border:1px solid var(--line)}
.ex-legend .l-ans{background:var(--brand-soft);border-color:var(--brand)}
.ex-legend .l-cur{background:var(--text);border-color:var(--text)}
.ex-legend .l-blank{background:var(--surface);border-color:var(--warn)}
.ex-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:7px}
.ex-dot{min-height:35px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);
  font:inherit;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.ex-dot.answered{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--brand)}
.ex-dot.current{background:var(--text);border-color:var(--text);color:var(--bg)}
.ex-nav.review .ex-dot:not(.answered):not(.current){border-color:var(--warn);color:var(--warn);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 25%,transparent)}

.ex-start{padding:28px}
.ex-start-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.ex-start h1{font-size:1.45rem;margin-bottom:2px}
.ex-start .muted{margin:0}
.ex-rules{margin:14px 0 6px;padding-inline-start:18px;line-height:2.05;color:var(--muted);font-size:.9rem}
.ex-rules li.warn{color:var(--danger);font-weight:600}
.ex-facts{padding:8px 0 14px}
.ex-mark{width:144px;height:144px;margin:auto;display:grid;place-content:center;text-align:center;border-radius:34px;
  background:var(--brand);color:var(--on-brand);font-size:2.8rem;font-weight:900;line-height:1.2;
  box-shadow:0 20px 38px color-mix(in srgb,var(--brand) 28%,transparent)}
.ex-mark small{display:block;font-size:.9rem;font-weight:700}
.ex-side{display:flex;flex-direction:column;align-items:center;gap:16px}
.ex-clock{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:220px;padding:12px 18px;text-align:center;
  border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.ex-clock b{direction:ltr;font-size:1.7rem;font-weight:800;line-height:1.35;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ex-clock .d{font-size:.78rem;color:var(--muted)}
.ex-clock-left{margin-top:4px;font-size:.85rem;font-weight:700;color:var(--brand)}
.ex-clock.soon .ex-clock-left{color:var(--warn)}
.ex-clock.closed .ex-clock-left{color:var(--muted)}
.ex-block{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:.86rem}
.ex-block.warn{background:color-mix(in srgb,var(--warn) 11%,var(--surface));border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}

.ex-result{padding:26px}
.ex-score{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.ex-score h2{font-size:1.2rem;margin:4px 0 8px}
.ex-score strong{font-size:3.4rem;line-height:1.15;color:var(--brand);font-variant-numeric:tabular-nums}
.ex-score .tag-type{margin:8px 0 0}
.ex-stats{margin:22px 0 12px}
.ex-meta{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;color:var(--muted);font-size:.8rem;margin:0 0 12px}
.ex-review{border-top:1px dashed var(--line);margin-top:8px}
.ex-later{margin:12px 0 4px}
.ex-rrow{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.ex-rrow .q{font-weight:700;white-space:nowrap}
.ex-rrow .ans{color:var(--muted)}
.ex-rrow .ans b{color:var(--text);font-weight:600}
.ex-rrow .ca{display:block;color:var(--up)}
.ex-rrow .st{font-weight:700}
.ex-rrow .st.ok{color:var(--up)}
.ex-rrow .st.bad{color:var(--danger)}
.ex-rrow .st.muted{font-weight:400}
.ex-result-actions{justify-content:center;margin-top:18px}
.ex-print{display:none}

.ex-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,18,13,.5);backdrop-filter:blur(3px)}
.ex-modal-card{width:min(520px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.ex-modal-card h3{font-size:1.05rem;margin-bottom:8px}
.ex-modal-body{font-size:.9rem;color:var(--muted);line-height:1.9}
.ex-modal-body p{margin:0}
.ex-modal .cta{margin-top:18px}
.ex-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ex-chip{font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;border-radius:999px;padding:3px 11px;color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.ex-lb{position:fixed;inset:0;z-index:70;background:#060a0d;display:flex;flex-direction:column}
.ex-lb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;color:#fff;font-size:.85rem}
.ex-lb-bar .cta{display:flex;gap:8px}
.ex-lb-bar .btn{background:rgba(255,255,255,.14);border-color:transparent;color:#fff;box-shadow:none}
.ex-lb-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;display:flex;padding:0 0 16px}
.ex-lb-scroll img{width:max(100%,900px);max-width:none;display:block;margin:auto;border-radius:10px;background:#fff}
.ex-lb-scroll.fit img{width:100%}
@media (min-width:960px){.ex-lb-scroll img{width:min(96vw,1500px)}}
.ex-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;max-width:calc(100% - 32px);text-align:center;
  padding:10px 16px;border-radius:12px;background:var(--text);color:var(--bg);font-size:.85rem;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s}
.ex-toast.show{opacity:1}

@media (max-width:820px){
  .ex-page{padding-block:10px 40px;gap:12px}
  .ex-top{top:6px;padding:10px 12px;border-radius:14px}
  .ex-brand h1{font-size:.92rem}
  .ex-brand p{font-size:.75rem}
  .ex-timer{min-width:86px;font-size:1rem;padding:8px 10px}
  .ex-start,.ex-result{padding:20px}
  .ex-start-grid{grid-template-columns:1fr}
  .ex-mark{width:100px;height:100px;font-size:2rem;border-radius:26px}
  .ex-side{order:-1;flex-direction:row;justify-content:center;flex-wrap:wrap}
  .ex-side .ex-mark{width:72px;height:72px;font-size:1.4rem;border-radius:20px;margin:0}
  .ex-clock{min-width:0;flex:1}
  .ex-opts{grid-template-columns:1fr}
  .ex-q{padding:16px}
  .ex-qtext{font-size:.98rem}
  .ex-qtop{flex-direction:column;gap:8px}
  .ex-qnum{display:inline-flex;gap:6px;align-items:baseline;min-width:0;padding:4px 10px;font-size:.85rem}
  .ex-qnum small{display:inline;font-size:.75rem}
  .ex-grid{grid-template-columns:repeat(6,1fr)}
  .ex-actions{flex-direction:column}
  .ex-actions .grp{width:100%}
  .ex-actions .grp .btn{flex:1}
  .ex-score strong{font-size:2.8rem}
  .ex-rrow{grid-template-columns:auto 1fr;grid-template-areas:"q s" "a a"}
  .ex-rrow .q{grid-area:q}.ex-rrow .st{grid-area:s;justify-self:end}.ex-rrow .ans{grid-area:a}
}
@media print{
  body{background:#fff}
  header,footer,.crumbs,.ex-result-actions,.ex-modal,.ex-lb,.ex-toast,.ex-live-banner{display:none!important}
  .ex-result{box-shadow:none;border:0;padding:0}
  .ex-print{display:block;text-align:center;font-weight:800}
  .ex-rrow{break-inside:avoid}
}

/* ════ پنل مدرس: آزمون، نتیجه‌ها و بانک سؤال ════ */
.ex-tstats{padding:4px 16px 16px;margin:0}
.panel .note .link{color:var(--brand);font-weight:600}
.row.ex-att.suspect{background:color-mix(in srgb,var(--danger) 6%,transparent)}
.row.ex-att.watch{background:color-mix(in srgb,var(--warn) 6%,transparent)}
.ex-why{margin:6px 0 0;padding-inline-start:18px;font-size:.82rem;line-height:1.9;color:var(--danger)}
.ex-att.watch .ex-why{color:var(--warn)}
.ex-agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:5px;margin:8px 0}
.ex-agrid span{display:flex;flex-direction:column;align-items:center;padding:3px 0;border-radius:8px;background:var(--surface-2);font-size:.78rem}
.ex-agrid b{font-size:.75rem;color:var(--muted);font-weight:600}
.ex-agrid .ok{background:var(--up-soft);color:var(--up)}
.ex-agrid .bad{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
.ex-timeline{margin:6px 0 0;padding-inline-start:20px;font-size:.8rem;line-height:1.9;color:var(--muted);max-height:340px;overflow:auto}
.ex-timeline li.bad{color:var(--danger)}
.ex-timeline bdi{color:var(--text);font-variant-numeric:tabular-nums}

.qb-filter{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px 4px}
.qb-filter select{min-width:240px;max-width:100%}
.qb-filter input{flex:1;min-width:200px;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line-strong);
  border-radius:11px;min-height:42px;padding:8px 12px}
.qb-filter input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.qb-list{display:flex;flex-direction:column}
.qb-item{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.qb-item:last-child{border-bottom:0}
.qb-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qb-head .tag-type{margin:0}
.qb-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:.85rem}
.qb-label{font-size:.75rem;padding:2px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.qb-tools{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.qb-pick{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.qb-text{margin:0;font-weight:600;line-height:1.9}
.qb-img{max-width:min(420px,100%);border-radius:10px;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.qb-opts{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qb-opts li{display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:10px;background:var(--surface-2);font-size:.86rem}
.qb-opts li b{flex:none;color:var(--muted);font-size:.78rem}
.qb-opts li.ok{background:var(--up-soft);color:var(--up);font-weight:600;box-shadow:inset 0 0 0 1px var(--up)}
.qb-used{margin:0}
/* فرم ویرایش داخل کارت سؤال حاشیهٔ کارت را دارد؛ فرم‌های دیگر حاشیهٔ خودشان را نگه می‌دارند */
.qb-item .qf .form-grid,.qb-item .qf .lock-body{padding-inline:0}
.qf .lock-body .err{color:var(--danger);font-style:normal;font-size:.85rem}
.qf .lock-body .saved,.lock-body .saved{margin:0}
#move-msg{color:var(--brand);font-weight:600}
#move-msg:empty{display:none}
.qf-file{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 12px;border-radius:11px;
  background:var(--surface-2);border:1px dashed var(--line-strong)}
.qf-file .btn{position:relative;cursor:pointer}
.qf-file .btn:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.field .qf-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer}
.qf-file .d{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.qf .lock-body .err:empty{display:none}
.qf-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qf-opt{display:flex;align-items:center;gap:8px}
.qf-opt b{flex:none;width:30px;text-align:center;color:var(--muted);font-size:.85rem}
/* رادیو و چک‌باکس داخل .field اندازهٔ ورودی متنی را نگیرند */
.field input[type=radio],.field input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;flex:none;accent-color:var(--brand)}
@media (max-width:760px){
  .qb-opts,.qf-opts{grid-template-columns:1fr}
  .qb-item{padding:12px 14px}
  .qb-tools{margin-inline-start:0}
  .qb-filter{padding-inline:14px}
}

/* ════ فرم‌های ساده‌شدهٔ مدرس ════ */
/* انتخاب با دکمه‌های کنار هم به‌جای منوی کشویی */
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);width:fit-content;max-width:100%}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:8px 16px;border-radius:calc(var(--r) - 3px);font-size:.88rem;font-weight:600;color:var(--muted)}
.seg label:hover span{color:var(--text)}
.seg input:checked + span{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgb(0 0 0 / .08),inset 0 0 0 1px var(--line)}
.seg input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
/* تاریخ و ساعت کنار هم + دکمه‌های سریع */
.due-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.due-row input[type=date]{flex:1 1 160px;min-width:0}
.due-row input[type=time]{flex:0 1 150px;min-width:0}
.field .hint{color:var(--brand);font-weight:600}
/* تنظیمات کم‌کاربرد، جمع‌شده با پیش‌فرض‌هایش */
details.more{margin:0 16px 4px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
details.more > summary{padding:11px 14px;cursor:pointer;font-weight:600;font-size:.88rem}
details.more > summary .d{font-weight:400}
details.more > .form-grid{padding:4px 14px 14px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px}
.form-actions p{flex-basis:100%;margin:0}
.form-actions .err{color:var(--danger);font-style:normal;font-size:.85rem}
.form-actions .err:empty{display:none}
.step .hint{font-size:.8rem;color:var(--brand)}

/* ════ لایهٔ بصری: آیکون، رنگ تأکیدی، حالت خالی ════ */
/* کارت آمار: هر کدام رنگ خودش (--tone)، آیکون در مربع رنگی کنار عدد */
.stat .stat-ic{display:none}
.stat.accent b{color:var(--brand)} .stat.warn b{color:var(--accent-text)} .stat.danger b{color:var(--danger)}
.stat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* تب‌ها با آیکون */
.tabs a{display:inline-flex;align-items:center;gap:7px}
.tabs a .ico{width:17px;height:17px;opacity:.75}
.tabs a.active .ico{opacity:1}
/* سربرگ پنل‌ها: نوار رنگی کوچک کنار عنوان */
.panel > :is(h2,h3){display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
/* ردیفی که فقط یک پیام دارد (فهرست خالی): متن آرام وسط */
.panel .row:has(> .d:only-child){justify-content:center;text-align:center;padding:22px 18px;color:var(--faint)}
.panel .row:has(> .d:only-child):hover{background:none}
/* سربرگ صفحه‌ها کارت ملایم رنگی است */

.card .sub{flex-wrap:wrap}

/* ════ پنل‌ها: کارهای منتظر، کارت نسخه، فهرست هنرجو، جست‌وجو ════ */
.tab-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-size:.72rem;font-weight:700;background:var(--surface-2);color:var(--muted);margin-inline-start:2px}
.tabs a.active .tab-n{background:var(--surface);color:var(--brand)}
.tab-n.hot{background:var(--accent);color:var(--on-accent)}
/* کار منتظر: آیکون رنگی + متن + دکمه؛ کل ردیف پیوند است */
.row.todo{align-items:center;color:inherit}
.row.todo:hover .t{color:var(--brand)}
.todo-ic{--tone:var(--brand);flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent)}
.todo-ic.warn{--tone:var(--warn)} .todo-ic.blue{--tone:var(--info)} .todo-ic.danger{--tone:var(--danger)} .todo-ic.gold{--tone:var(--gold)}
.todo-ic .ico{width:20px;height:20px}
/* کارت‌های نسخه کنار هم */
.ver-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px}
.ver-card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.ver-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ver-top .t{font-weight:700;font-size:1.02rem}
.ver-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0}
.ver-nums span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.ver-nums b{font-size:1.1rem;color:var(--text)}
.ver-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ver-links .tab-n{margin-inline-start:6px}
.new-form > summary .ico{display:inline-block;width:17px;height:17px;vertical-align:-3px}
.storage-line{text-align:center;margin:18px 0 0}
/* جست‌وجو و صافی فهرست */
.list-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px 4px}
.list-search{display:flex;align-items:center;gap:8px;flex:1 1 220px;margin:14px 16px 4px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--surface-2);color:var(--faint)}
.list-tools .list-search{margin:0}
.list-search input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font:inherit;color:var(--text);outline:0}
.list-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
/* ردیف هنرجو: نوار پیشرفت کوچک و منوی «⋯» */
.stu-row{align-items:center}
.stu-main{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px}
.mini-bar{display:block;height:6px;max-width:220px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.mini-bar i{display:block;height:100%;background:var(--brand);border-radius:6px}
.row-more{position:relative}
.row-more > summary{list-style:none;cursor:pointer;padding-inline:10px}
.row-more > summary::-webkit-details-marker{display:none}
.row-more > summary .ico{width:18px;height:18px}
.row-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;width:260px;display:flex;flex-direction:column;gap:10px;
  padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.row-menu .cta{display:flex;gap:8px;flex-wrap:wrap}
.next-steps{margin-bottom:20px}
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;flex:none;padding-inline:14px}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.danger-zone > :is(h2,h3)::before{background:var(--danger)}
/* افزودن منتور با شماره، در همان پنل دوره */
.mentor-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.mentor-add input{flex:1 1 170px;min-width:0;font:inherit;padding:8px 12px;border-radius:11px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text)}
.mentor-add input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.mentor-add .err{flex-basis:100%;color:var(--danger);font-style:normal;font-size:.85rem}
.mentor-add .err:empty{display:none}
.mentor-row .mentor-of{display:block;margin-top:8px}
.mentor-row .fmts{padding-top:4px}

/* ════════════════════════════════════════════════════════════════
   طراحی ۳: صفحه‌های تازه — دوره، جلسه، تمرین‌ها، عکس‌ها، بررسی، نسخه‌ها
   ════════════════════════════════════════════════════════════════ */

/* سربرگ دوره: جلد، مشخصات، آمار؛ روی صفحهٔ باریک زیر هم */
.course{padding-block:28px 56px;gap:20px}
.course-head{display:flex;flex-wrap:wrap;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.course-head > .cover{flex:0 0 260px;height:auto;min-height:180px;object-fit:cover}
.course-head .course-meta{flex:999 1 380px;min-width:0}
.course-stats{flex:1 1 260px;border:0;border-radius:0;border-inline-start:1px solid var(--line);grid-template-columns:1fr;align-content:center}
.course-stats .stat{border-inline-start:0;margin:0}
.course-stats .stat + .stat{border-top:1px solid var(--line)}
.course-stats .progress{margin-top:6px}
.chip{font-size:.82rem;border-radius:var(--r-pill);color:var(--muted);background:var(--surface-2);padding:4px 12px}
.chip.up{color:var(--up);background:var(--up-soft);font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.ver-pick{min-height:36px;font-size:.88rem}
.tab-n{vertical-align:middle}

/* ردیف جلسه در فهرست دوره */
.lesson-row{align-items:center}
.lesson-n{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;
  background:var(--surface-2);color:var(--muted)}
.lesson-n.done{background:var(--up);color:#fff}
.lesson-n .ico{width:16px;height:16px;stroke-width:3}
.prog-cell{display:flex;align-items:center;gap:10px;width:180px;flex:none}
.prog-cell .progress{flex:1}
.prog-cell b{font-size:.82rem;white-space:nowrap}
.cover-mini{width:56px;height:56px;aspect-ratio:auto;border-radius:10px}

/* پخش‌کننده: نوار بالا، محتوای جلسه، سرفصل کنار */
.player{display:flex;flex-direction:column;min-height:100vh}
.player-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:64px;padding:8px 20px;
  background:var(--surface);border-bottom:1px solid var(--line);line-height:1.5}
.player-body{flex:1;display:flex;flex-wrap:wrap;align-items:stretch}
.player-main{flex:999 1 620px;min-width:0;padding:28px 32px 56px;display:flex;flex-direction:column;gap:22px;max-width:980px}
.player-main h1{font-size:1.6rem}
.player-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.files{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.outline{flex:1 1 320px;min-width:0;background:var(--surface);border-inline-start:1px solid var(--line)}
.outline-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.lesson{display:flex;align-items:center;gap:12px;padding:10px 20px;min-height:56px;font-size:.92rem;border-bottom:1px solid var(--line)}
.lesson:hover{background:var(--surface-2)}
.lesson.current{background:var(--brand-soft);color:var(--brand);font-weight:800}
.lesson.current .lesson-n{background:var(--brand);color:var(--on-brand)}
.lesson .tag-type{margin:0}
.video,.session-body .video{min-height:78px;border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;color:var(--faint);padding:18px;text-align:center}

/* تمرین‌های یک جلسه */
.item-group{display:flex;flex-direction:column;gap:10px}
.item-group > h2,.item-group > h3{font-size:1.15rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.item-group + .item-group{margin-top:20px}
.item{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.item.hot{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.item.locked{background:var(--bg);color:var(--faint)}
.item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.item-body h3{font-size:1.02rem}
.item-body p{margin:0}
.item-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--faint)}
.item-meta .tag-type{margin:0}
.item > .btn{flex:none;align-self:center}
.steps-line{display:flex;gap:6px;flex-wrap:wrap}
.step-pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--surface-2);color:var(--faint)}
.step-pill.done{background:var(--up-soft);color:var(--up)}
.step-pill.now{background:var(--accent-soft);color:var(--accent-text)}
.step-pill .ico{width:14px;height:14px}
.tally{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tally .tag-type{margin:0}
.tally .tag-type .ico{width:15px;height:15px}
.seg-bar{display:flex;gap:4px}
.seg-bar i{flex:1;height:8px;border-radius:4px;background:var(--surface-2)}
.seg-bar i.sent{background:var(--brand)}
.seg-bar i.done{background:var(--up)}
.seg-bar i.bad{background:var(--danger)}
.seg-bar i.opt{opacity:.55;outline:1px dashed var(--line-strong);outline-offset:-1px}

/* صفحهٔ تمرین */
.assign-head{align-items:center}
.assign-head h1{font-size:1.35rem}
.over{font-size:.8rem;font-weight:700;color:var(--brand)}

/* مجموعهٔ عکس */
.photo-wrap{display:flex;flex-wrap:wrap;gap:20px;padding:18px;align-items:flex-start}
.photo-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.photo-side{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px;position:sticky;top:20px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.box p{margin:0}
.warn-box{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.warn-box b{display:flex;gap:8px;align-items:center}
.warn-box .d{color:var(--text)}
.dropzone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;border:2px dashed var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--brand);background:var(--brand-soft)}
.dropzone:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.ph-progress{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r)}
.ph-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ph-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ph-list:empty{display:none}
.ph-row{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.ph-row:last-child{border-bottom:0}
.ph-row.bad{background:var(--danger-soft)}
.ph-row.failed{background:var(--danger-soft)}
.ph-n{width:28px;flex:none;text-align:center;color:var(--faint);font-size:.85rem;padding-top:6px}
.thumb{border-radius:8px;background:var(--surface-2);overflow:hidden;display:grid;place-items:center;color:var(--faint);flex:none}
.ph-thumb{width:150px;height:104px;padding:0}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-thumb .progress{width:70%}
.ph-cap{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ph-cap textarea{font:inherit;width:100%;min-height:104px;resize:vertical;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);line-height:1.8}
.ph-cap textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.err-t{color:var(--danger)}
.mark-note{display:flex;align-items:center;gap:6px;color:var(--danger);font-size:.85rem;font-weight:700}
.mark-ok{display:flex;align-items:center;gap:6px;color:var(--up);font-size:.85rem;font-weight:700}
.mark-note .ico,.mark-ok .ico{width:16px;height:16px}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist li.ok .ico{color:var(--up)}
.checklist li.no .ico{color:var(--accent-text)}
.dock{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(18,22,43,.06)}
.dock .err{color:var(--danger);font-style:normal;font-size:.85rem;flex-basis:100%}
.dock .err:empty{display:none}
.kbd{font-family:ui-monospace,Consolas,monospace;font-size:.75rem;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;background:var(--surface);color:var(--muted)}
.ph-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;padding-top:8px;max-width:520px}
.ph-strip a{aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surface-2);outline:2px solid transparent;outline-offset:-2px}
.ph-strip a.ok{outline-color:var(--up)}
.ph-strip a.bad{outline-color:var(--danger)}
.ph-strip img{width:100%;height:100%;object-fit:cover;display:block}
.ph-sum-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:.9rem}
.up{color:var(--up)} .down{color:var(--danger)}

/* بررسی عکس‌به‌عکس */
.rv{display:flex;flex-direction:column;gap:16px}
.rv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px}
.rv-counts{display:flex;gap:16px;font-size:.85rem;font-weight:800}
.rv-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-2)}
.rv-bar i.ok{background:var(--up)} .rv-bar i.bad{background:var(--danger)}
.rv-body{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.rv-main{flex:999 1 560px;min-width:0;padding:18px;display:flex;flex-direction:column;gap:14px}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rv-img{display:grid;place-items:center;background:#100E0B;border-radius:var(--r);min-height:280px;max-height:62vh;overflow:hidden}
.rv-img img{max-width:100%;max-height:62vh;display:block}
.rv-cap{padding:12px 14px;border-radius:var(--r);background:var(--surface-2)}
.rv-cap p{margin:0;white-space:pre-wrap}
.rv-verdict{display:flex;gap:10px;flex-wrap:wrap}
.rv-verdict .btn{flex:1 1 200px}
.rv-verdict .btn .ico{width:20px;height:20px}
.rv-verdict [data-mark="1"] .ico{color:var(--up)}
.rv-verdict [data-mark="0"] .ico{color:var(--danger)}
.rv-verdict .btn.is-ok{border-color:var(--up);background:var(--up-soft);color:var(--up)}
.rv-verdict .btn.is-bad{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.rv-phrases{display:flex;gap:6px;flex-wrap:wrap}
.rv-side{flex:1 1 320px;min-width:0;padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
.rv-side .seg{display:flex}
.rv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;max-height:360px;overflow-y:auto}
.rv-grid button{all:unset;cursor:pointer;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:.78rem;font-weight:700;
  background:var(--surface-2);color:var(--faint)}
.rv-grid button.ok{background:var(--up-soft);color:var(--up)}
.rv-grid button.bad{background:var(--danger-soft);color:var(--danger)}
.rv-grid button.cur{box-shadow:inset 0 0 0 2px var(--brand)}
.rv-grid button:focus-visible{outline:2px solid var(--brand)}
.rv-actions{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.rv-actions .err{color:var(--danger);font-style:normal;font-size:.85rem}
.rv-actions .err:empty{display:none}

/* ساخت تمرین: گزینه‌های نوع پاسخ */
.photo-opts,.req-opts{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;padding:12px 14px;border-radius:var(--r);background:var(--surface-2)}
.photo-opts .field,.req-opts .field{flex:1 1 160px}
.photo-opts .check,.req-opts .check{min-height:44px}
.copy-opts{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0}
.copy-opts legend{font-weight:700;font-size:.88rem;padding:0 6px}
.copy-opts .check{min-height:40px}

/* چرخهٔ عمر نسخه */
.life{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:16px 16px 0}
.life-step{padding:10px 12px;background:var(--surface-2);display:flex;flex-direction:column;line-height:1.6}
.life-step:first-child{border-radius:0 10px 10px 0}
.life-step:last-child{border-radius:10px 0 0 10px}
.life-step b{font-size:.88rem}
.life-step span{font-size:.78rem;color:var(--faint)}
.life-step.open{background:var(--accent-soft);color:var(--accent-text)}
.life-step.running{background:var(--up-soft);color:var(--up)}
.life-step.open span,.life-step.running span{color:inherit;opacity:.85}

/* ════ پوستهٔ برنامه روی صفحهٔ باریک: منو به نوار پایین می‌رود ════ */
@media (max-width:900px){
  body.shell > header{inset-block:auto 0;inset-inline:0;width:auto;height:auto;flex-direction:row;padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    border-inline-end:0;border-top:1px solid var(--line);overflow:visible}
  body.shell > main,body.shell > footer{margin-inline-start:0}
  body.shell > main{padding-bottom:84px}
  body.shell .side-logo,body.shell .side-foot{display:none}
  body.shell .side-nav{flex-direction:row;flex:1;justify-content:space-around}
  body.shell .side-nav a{flex:1;flex-direction:column;gap:2px;min-height:56px;justify-content:center;padding:4px;font-size:.75rem;position:relative;text-align:center}
  body.shell .side-nav a.active{background:none}
  body.shell .side-nav .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 22px);margin:0;min-width:18px;height:18px;font-size:.68rem}
  .wrap{padding-inline:16px}
  .player-main{padding:20px 16px 40px}
  .outline{border-inline-start:0;border-top:1px solid var(--line)}
  .course-head > .cover{flex-basis:100%;max-height:180px}
  .course-stats{border-inline-start:0;border-top:1px solid var(--line)}
  .filters{position:static}
  .life{grid-template-columns:1fr 1fr}
  .life-step{border-radius:10px!important}
}
@media (min-width:901px){ .side-mob-only{display:none!important} }
@media (max-width:640px){
  .ph-row{flex-wrap:wrap}
  .ph-thumb{width:100%;height:180px}
  .ph-n{width:auto;padding:0}
  .item{flex-wrap:wrap}
  .item > .btn{width:100%}
  .prog-cell{width:100%}
  .lesson-row .prog-cell{width:120px}
  .rv-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media print{ body.shell > header{display:none} body.shell > main{margin:0} }

/* ════ آزمون، حالت تمرکز: بدون منو، ستون باریک وسط، نوار زمان بالا و ناوبری پایین ════ */
body.exam-mode > main{margin-inline-start:0;padding-bottom:0}
body.exam-mode{background:var(--surface);overflow-x:clip}
.ex-page{max-width:820px;gap:22px;padding-block:0 40px}
.ex-top{top:0;margin-inline:calc(50% - 50vw);padding:12px max(16px,calc(50vw - 410px));border-radius:0;border:0;
  border-bottom:1px solid var(--line);box-shadow:none;background:var(--surface)}
.ex-brand h1{font-size:1.05rem}
.ex-timer{border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:1.15rem;font-weight:800;min-height:44px;display:grid;place-items:center}
.ex-q{border:0;box-shadow:none;padding:8px 0;background:transparent}
.ex-qtext{font-size:1.35rem;line-height:1.9;font-weight:800}
.ex-opts{grid-template-columns:1fr;gap:12px}
.ex-opt{min-height:60px;border-width:1.5px;border-radius:var(--r)}
.ex-opt:hover{transform:none;border-color:var(--line-strong)}
.ex-opt[aria-checked="true"]{box-shadow:none}
.ex-letter{width:32px;height:32px;background:var(--surface-2);color:var(--muted)}
.ex-actions{position:sticky;bottom:0;z-index:20;margin-inline:calc(50% - 50vw);padding:12px max(16px,calc(50vw - 410px));
  background:var(--surface);border-top:1px solid var(--line)}
.ex-nav{border:0;box-shadow:none;padding:0;background:transparent}
.ex-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
.ex-dot{min-height:38px;border-radius:50%;aspect-ratio:1}
.ex-dot.answered{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.ex-dot.current{background:var(--surface);border:2px solid var(--brand);color:var(--brand)}
.ex-finish{border-top:1px solid var(--line);padding-top:18px}

/* ════ پنل مدرس: منوی نسخه، صفحه، تصحیح سه‌ستونه، سازندهٔ جلسه، نسخه‌ها ════ */
.side-ctx{display:flex;flex-direction:column;gap:6px}
.side-back{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;color:var(--faint);font-size:.88rem;font-weight:600;border-radius:var(--r-sm)}
.side-back:hover{background:var(--surface-2);color:var(--text)}
.side-back .ico{width:16px;height:16px}
.side-ver{display:flex;flex-direction:column;gap:6px;margin:2px 4px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.side-ver .ver-pick{width:100%;font-weight:700}
.side-nav .badge.muted{background:var(--surface-2);color:var(--faint)}
.side-link{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;margin-top:6px;border-top:1px solid var(--line);
  color:var(--faint);font-size:.88rem;font-weight:600}
.side-link .ico{width:18px;height:18px}
.side-logo .tag-type{font-size:.75rem;padding:4px 8px}
@media (min-width:901px){
  body.shell > header.has-ctx .side-nav.global{display:none}
  .mob-tabs{display:none!important}
}
@media (max-width:900px){ body.shell .side-ctx{display:none} }

.teach-page{padding:24px 28px 64px;display:flex;flex-direction:column;gap:20px;max-width:1400px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:1.6rem}
.page-head .cta{display:flex;gap:10px;flex-wrap:wrap}
.teach-page > .panel + .panel{margin-top:0}

/* تصحیح: صف | پاسخ | نمره */
.grade{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.q-col{flex:1 1 280px;max-width:340px;position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.q-head{padding:12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.q-head .seg{width:100%}
.q-head .seg label{flex:1}
.q-head .seg span{padding:7px 8px;text-align:center}
.q-head .list-search{margin:0;flex:none}
.q-list{overflow-y:auto}
.q-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.q-item:hover{background:var(--surface-2)}
.q-item.current{background:var(--brand-soft);box-shadow:inset -3px 0 0 var(--brand)}
.q-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.6}
.q-main b{font-size:.92rem}
.q-item .tag-type{margin:0}
.q-empty{padding:18px;margin:0;text-align:center}
.g-main{flex:999 1 420px;min-width:0}
.g-head{display:flex;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.g-head h2{font-size:1.2rem}
.g-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.g-body .sub-text{max-width:none;font-size:1rem;line-height:1.95;margin:0}
.g-side{flex:1 1 260px;max-width:340px;position:sticky;top:20px}
.g-side :is(h2,h3){font-size:1rem;padding:14px 16px;border-bottom:1px solid var(--line)}
.g-side .crit-row{padding:12px 16px 0;margin:0;flex-direction:column;align-items:stretch}
.g-side .crit{justify-content:space-between;border-radius:var(--r-sm)}
.g-side .review-form{flex-direction:column;align-items:stretch;padding:16px;gap:10px}
.g-side .review-form .field{flex:none}
.g-side .review-form .err{color:var(--danger);font-style:normal;font-size:.85rem}
.g-empty,.g-photo{flex:999 1 600px;min-width:0}
.g-photo .rv-body{gap:16px}
.g-photo .rv-main{flex-basis:420px}
.g-photo .rv-side{flex-basis:270px}
.g-photo .rv-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.crit-panel{overflow:visible}
.crit-panel > summary{padding:14px 18px;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center}
.crit-panel > summary::-webkit-details-marker{display:none}
.crit-panel[open] > summary{border-bottom:1px solid var(--line)}

/* سازندهٔ جلسه: فهرست جلسه‌ها | جلسهٔ انتخاب‌شده */
.build{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.s-col{flex:1 1 260px;max-width:320px;position:sticky;top:20px}
.s-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.s-col .lesson{padding:10px 16px}
.s-col .one-col{padding:12px 16px}
.b-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.type-pick{padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.type-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
.type-card:hover{border-color:var(--brand);background:var(--brand-soft)}
.type-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.type-card .tybox{width:36px;height:36px}

/* نسخه‌ها: ردیف هر نسخه | پنل نسخهٔ تازه */
.course-bar{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.course-bar h2{font-size:1.15rem}
.vers{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;padding:16px}
.ver-rows{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.ver-row{align-items:center;flex-wrap:wrap}
.ver-row .ver-name{font-size:1.05rem;color:var(--text)}
.ver-row.ver-running{border-color:color-mix(in srgb,var(--up) 45%,var(--line))}
.ver-row.ver-draft{border-style:dashed}
.ver-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* نسخهٔ تازه زیر فهرست نسخه‌ها و تمام‌عرض؛ ستونی کنار فهرست بیش از حد بلند می‌شد */
.nv-panel{margin:0 16px 16px;min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.nv-form{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nv-form .copy-opts{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 22px}
.nv-form .copy-opts > p{flex-basis:100%}
.nv-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
.nv-actions > span{flex-basis:100%}
.nv-panel > summary{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800;color:var(--brand);padding:12px 16px}
.nv-panel[open]{box-shadow:var(--shadow)}
.nv-panel[open] > summary{justify-content:flex-start;border-bottom:1px solid var(--line);color:var(--text)}
.nv-panel .form-grid{padding:16px}
@media (max-width:900px){
  .teach-page{padding:16px 16px 40px}
  .q-col,.g-side,.s-col{max-width:none;position:static;max-height:none}
  .q-list{max-height:320px}
}

/* ════ صفحهٔ دوره‌ها: عنوان و جست‌وجو، خبر ثبت‌نام باز ════ */
.page-band{background:var(--surface);border-bottom:1px solid var(--line)}
.page-band-in{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-block:28px}
.page-band h1{font-size:1.7rem}
.page-band p{margin:2px 0 0}
.home-search{flex:0 1 360px;background:var(--bg);border:1px solid var(--line-strong)}
.catalog{padding-block:28px 64px}
.open-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.open-note > span:nth-child(2){flex:1;min-width:0}
.open-note:hover{border-color:var(--accent)}
.foot-grid{grid-template-columns:1.4fr .7fr 1fr}
.foot-col a{color:var(--muted)}
.foot-col a:hover{color:var(--brand)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
.edit-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;
  background:var(--accent);color:var(--on-accent);font-size:.9rem}
.edit-bar > span{flex:1;min-width:220px;display:flex;gap:8px;align-items:center}
.t-edit{outline:1.5px dashed var(--accent);outline-offset:3px;border-radius:3px;cursor:text}
.t-edit:focus{outline:2px solid var(--brand);background:var(--brand-soft)}
.t-edit.saving{opacity:.6}
.t-edit.save-err{outline-color:var(--danger)}

/* ════ ورود و ثبت‌نام: معرفی کنار، فرم وسط؛ سربرگ و فوتر سایت کنار می‌روند ════ */
body.auth-mode > header,body.auth-mode > footer{display:none}
.auth-split{display:flex;flex-wrap:wrap;min-height:100vh}
.auth-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;padding:24px 32px 48px;background:var(--surface)}
.auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.auth-logo-sm{display:flex;align-items:center;gap:8px;font-weight:900}
.auth-logo-sm .mark{width:28px;height:28px}
.auth-main .auth-card{width:100%;max-width:420px;margin:auto;padding-block:32px;background:none;border:0;box-shadow:none}
.auth-main .auth-head{padding:0 0 20px;display:block}
.auth-main .auth-head h1{font-size:1.7rem}
.auth-main .auth-body{padding:0}
.auth-methods{display:flex;gap:4px;padding:4px;margin-bottom:22px;border-radius:10px;background:var(--surface-2)}
.auth-methods button{all:unset;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  border-radius:var(--r-sm);font-weight:700;font-size:.9rem;color:var(--faint)}
.auth-methods button .ico{width:16px;height:16px}
.auth-methods button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.auth-methods button:focus-visible{outline:2px solid var(--brand)}
.auth-main .auth-body form{gap:16px}
.auth-main .auth-body .btn.primary[type=submit]{min-height:52px;font-size:1.02rem}
.auth-main #auth-phone .btn.primary,.auth-main #auth-pass .btn.primary{width:100%}
.auth-main input[name="phone"]{direction:ltr;text-align:left;font-size:1.05rem;letter-spacing:.04em}
.auth-switch{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.auth-switch a{color:var(--brand);font-weight:800}
@media (max-width:860px){
  .auth-main{padding:16px 20px 40px}
}
button.side-link{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;
  margin-top:6px;border-top:1px solid var(--line);color:var(--faint);font-size:.88rem;font-weight:600;width:100%}
button.side-link:hover{color:var(--brand)}
button.side-link:focus-visible{outline:2px solid var(--brand)}
.user-edit{width:300px;gap:10px}
.user-edit .field input,.user-edit .field textarea{min-height:40px}
.text-group .field > span{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ════════════════════════════════════════════════════════════════
   جهت «الف»: روشن و پرانرژی — نوار بالا با جست‌وجو، تراشه‌های صافی، کارت رنگی هر دوره، فوتر تیره
   ════════════════════════════════════════════════════════════════ */
.btn{border-radius:var(--r-sm);font-weight:800}
.btn.primary{box-shadow:none}
body:not(.shell) > header{background:var(--surface);border-bottom:1px solid var(--line)}
.bar{min-height:76px;gap:28px;flex-wrap:nowrap}
.brand{font-size:1.35rem}
.bar nav.links a.active{color:var(--brand);background:none}
.site-search{flex:1;max-width:460px;margin-inline:auto;min-height:46px;background:var(--surface-2);border-radius:var(--r-sm)}
.site-search input{font-size:.95rem}
.auth .btn.ghost{color:var(--text)}

.catalog-page{padding-block:40px 72px;display:flex;flex-direction:column;gap:36px}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.catalog-head h1{font-size:2.2rem;font-weight:900}
.catalog-head p{margin:4px 0 0;font-size:1.02rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.9rem;color:var(--muted)}
.fchip:hover{border-color:var(--line-strong);color:var(--text)}
.fchip.on{background:var(--text);border-color:var(--text);color:var(--surface)}
.fchip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.course-section{display:flex;flex-direction:column;gap:16px}
.course-section h2{font-size:1.25rem;font-weight:800}
.course-section .count{font-size:.88rem;color:var(--brand);font-weight:700;margin-inline-start:6px}
.course-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.course-card{border-radius:var(--r);border-color:var(--line);box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.course-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.course-card .thumb{aspect-ratio:auto;height:150px;position:relative;overflow:hidden}
.course-card .thumb .cover{position:absolute;inset:0}
.course-card .thumb .badge{inset-block-start:auto;inset-block-end:14px;inset-inline-start:14px;background:rgba(255,255,255,.24);
  color:#fff;font-size:.8rem;padding:4px 12px;backdrop-filter:none}
.course-card .body{padding:16px;gap:10px}
.course-card h3{font-size:1.08rem;font-weight:800;line-height:1.6}
.teacher{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);font-weight:600}
.meta-line{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.84rem;color:var(--faint)}
.card-cta{margin-top:auto;width:100%}
.card-state{margin:0;align-self:flex-start}
.btn.soft{background:var(--brand-soft);color:var(--brand)}
.btn.soft:hover{background:color-mix(in srgb,var(--brand) 16%,var(--surface))}

/* فوتر تیره */
footer{background:var(--ink-band);border-top:0;color:#D9D0C0;margin-top:0}
footer .foot-brand{color:#fff}
footer .foot-col :is(h2,h4){color:#fff}
footer .foot-about,footer .d{color:#B5A894}
footer .foot-col a{color:#F1EBDF}
footer .foot-col a:hover{color:#6EE7B7}

/* پنل‌ها و کارت‌های داخلی هم‌خانوادهٔ کارت دوره */
.panel{border-radius:var(--r-lg);box-shadow:none}
.item,.box,.tally{border-radius:var(--r)}
.side-nav a{border-radius:var(--r-sm)}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

@media (max-width:900px){
  .bar{flex-wrap:wrap;gap:12px}
  .site-search{order:3;flex-basis:100%;max-width:none}
  .catalog-head h1{font-size:1.7rem}
}
.site-search{display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--faint);border:1px solid transparent}
.site-search:focus-within{border-color:var(--brand);background:var(--surface)}
.site-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);outline:0;padding:0}
.site-search .ico{width:18px;height:18px}
.cover-box{position:relative;display:block;overflow:hidden;flex:none}
.cover-box .cover{position:absolute;inset:0}
.cover-box.cover-mini{width:56px;height:56px;border-radius:12px}
.course-head > .course-cover{flex:0 0 260px;min-height:180px}
.resume .thumb{overflow:hidden}
@media (max-width:900px){ .course-head > .course-cover{flex-basis:100%;min-height:140px} }

/* ════════════════════════════════════════════════════════════════
   ساختار برگرفته از کوئرا و مکتب‌خونه: یک نوار بالا برای همه، پنل با منوی داخل صفحه،
   کارت دورهٔ بی‌دکمه، صفحهٔ دوره دوستونه با کارت ثبت‌نام چسبان، دکمه‌های تخت و سبک
   ════════════════════════════════════════════════════════════════ */
body{font-size:14px;line-height:1.9}
h1,h2,h3,h4{font-weight:700}
.btn{border-radius:8px;font-weight:600;font-size:.92rem;min-height:40px;padding:0 16px}
.btn.lg{min-height:50px;border-radius:10px;font-size:1rem;padding:0 22px}
.btn.sm{min-height:34px;padding:0 12px;font-size:.84rem;border-radius:8px}
.btn.sm.icon{width:34px}
.btn:not(.primary):not(.ghost):not(.soft):hover{border-color:var(--brand);color:var(--brand);background:var(--surface)}

/* نوار بالا */
body > header{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{min-height:68px;gap:20px}
.brand{font-size:1.25rem;font-weight:800}
.brand .mark{width:30px;height:30px}
.bar nav.links{gap:2px}
.bar nav.links a{position:relative;font-weight:600;color:var(--muted);min-height:40px;padding:0 12px;border-radius:8px}
.bar nav.links a:hover{background:var(--surface-2);color:var(--text)}
.bar nav.links a.active{color:var(--brand);background:var(--brand-soft)}
.nav-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:800}
.site-search{max-width:380px;min-height:42px;border-radius:8px}
.umenu{position:relative}
.umenu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 6px 0 12px;
  border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.88rem}
.umenu > summary::-webkit-details-marker{display:none}
.umenu > summary:hover{border-color:var(--line-strong)}
.umenu-name{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;z-index:40}
.umenu-who{display:flex;gap:10px;align-items:center;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--line);line-height:1.6}
.umenu-who span{display:flex;flex-direction:column}
.umenu-pop a,.umenu-pop button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;
  border-radius:8px;font-size:.9rem;color:var(--muted)}
.umenu-pop a:hover,.umenu-pop button:hover{background:var(--surface-2);color:var(--text)}
.umenu-pop a:focus-visible,.umenu-pop button:focus-visible{outline:2px solid var(--brand)}
.umenu-pop button{color:var(--danger)}
.umenu-pop .ico{width:18px;height:18px}

/* پنل: منو کنار محتوا، داخل صفحه */
.pl{display:flex;gap:24px;align-items:flex-start;padding-block:28px 64px}
.pmenu{flex:0 0 250px;position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:4px}
.pmenu-who{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:6px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line);line-height:1.6}
.pmenu-who .avatar.lg{width:64px;height:64px;font-size:1.4rem;margin-bottom:6px}
.pmenu .side-nav a{min-height:42px;font-size:.92rem}
.pmenu .side-ctx{gap:6px}
.pmenu-out{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;margin-top:6px;
  border-top:1px solid var(--line);color:var(--danger);font-size:.9rem;font-weight:600}
.pmenu-out:focus-visible{outline:2px solid var(--brand)}
.pmenu-out .ico{width:18px;height:18px}
.pmain{flex:1;min-width:0}
.pmain .wrap{max-width:none;padding-inline:0}
.pmain .teach-page{padding:0;max-width:none}
.pmain .dash{padding-block:0}
.pmain .teach-page,.pmain .dash{gap:20px}

/* کارت دوره */
.course-card .thumb{height:auto;aspect-ratio:16/9}
.course-card .body{padding:12px 14px 12px;gap:6px}
.course-card h3{font-size:.98rem;font-weight:700;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.4em}
.course-card .teacher{font-size:.84rem;color:var(--faint);font-weight:500}
.course-card .meta-line{gap:4px 12px;font-size:.8rem}
.meta-line span{display:inline-flex;align-items:center;gap:4px}
.meta-line .ico{width:14px;height:14px}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--faint);white-space:nowrap}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.state.open,.state.mine{color:var(--brand)}
.state.running{color:var(--info)}
.catalog-head h1{font-size:1.8rem;font-weight:800}
.course-section h2{font-size:1.1rem}

/* صفحهٔ دوره: ستون اصلی و کارت ثبت‌نام چسبان */
.cpage{display:flex;gap:28px;align-items:flex-start;padding-block:24px 64px;flex-wrap:wrap}
.cpage-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
.cpage-main h1{font-size:1.9rem;font-weight:800;line-height:1.5}
.cpage-teacher{margin:0;color:var(--muted)}
.cpage-about{margin:0;line-height:2.1;color:var(--muted);max-width:70ch}
.facts-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:6px}
.facts-card > div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px}
.facts-card > div + div{border-inline-start:1px solid var(--line)}
.facts-card .wide{grid-column:span 2}
.facts-card .wide .progress{width:80%;margin-top:4px}
.fi{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:4px}
.fi .ico{width:20px;height:20px}
.facts-card b{font-size:.92rem}
.facts-card > div > span:not(.fi):not(.progress){font-size:.8rem;color:var(--faint)}
.cpage-sec{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.cpage-sec h2{font-size:1.15rem}
.outline-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.outline-list li{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.outline-list li:last-child{border-bottom:0}
.outline-list .n{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}
.outline-list .t{flex:1;min-width:0;font-weight:600}
.buy-card{flex:1 1 300px;max-width:340px;position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.buy-cover{aspect-ratio:16/9;position:relative;overflow:hidden}
.buy-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.buy-body p{margin:0}
.buy-card #enroll-form{max-width:none}
.buy-card .btn{width:100%}

/* سربرگ صفحهٔ دورهٔ هنرجو */
.course-top{display:flex;flex-direction:column;gap:8px}
.course-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.course-title h1{font-size:1.7rem;font-weight:800}

@media (max-width:900px){
  .bar{flex-wrap:wrap}
  .site-search{order:3;flex-basis:100%;max-width:none}
  .umenu-name{display:none}
  .pl{flex-direction:column;padding-block:16px 48px}
  .pmenu{position:static;width:100%;flex:none;padding:8px}
  .pmenu-who,.pmenu-out,.pmenu .side-back,.pmenu .side-link{display:none}
  .pmenu .side-nav{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .pmenu .side-nav a{flex:none;white-space:nowrap}
  .buy-card{position:static;max-width:none}
  .facts-card .wide{grid-column:1/-1}
  .facts-card > div + div{border-inline-start:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
  body > header .bar{min-height:60px;gap:8px;flex-wrap:wrap;padding-block:8px}
  body > header .bar nav.links{display:none}
  body > header:not(.on-home) .site-search{display:none}
  body > header .auth{margin-inline-start:auto}
}
.req-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.req-note:hover{border-color:var(--line-strong)}
.enroll-inline{display:flex;flex-direction:column;gap:10px;max-width:360px}
.buy-body > .btn,.enroll-inline > .btn{width:100%}
.req-panel :is(h2,h3){display:flex;align-items:center;gap:8px}

/* ── ویرایش جلسه: بخش‌های ساده، افزودن کم‌صدا ── */
.sess-edit{padding:0}
.se-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.se-head h2{margin:0 0 2px;font-size:1.15rem}
.se-sec{padding:14px 20px 16px;border-bottom:1px solid var(--line)}
.se-title{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.9rem}
.se-title .faint{font-size:.82rem}
.se-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.se-title + .se-row,.se-series + .se-row{border-top:0}
.se-row.in-series{padding-inline-start:14px;border-inline-start:2px solid var(--line)}
.se-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.se-ic .ico{width:16px;height:16px}
.se-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.se-main > b{font-weight:600;font-size:.93rem}
.se-main > .faint,.se-main > bdi{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-series{display:flex;align-items:center;gap:8px;padding:10px 0 4px;font-size:.88rem}
.btn.del{color:var(--faint)}
.btn.del:hover{color:var(--danger);background:var(--danger-soft)}
.btn.danger-fill{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-fill:hover{filter:brightness(.92)}
.add-inline > summary,.add-row > .faint{display:inline-flex;align-items:center;gap:6px;font-size:.86rem}
.add-inline > summary{list-style:none;cursor:pointer;color:var(--brand);font-weight:600;padding:6px 0;margin-top:4px}
.add-inline > summary::-webkit-details-marker{display:none}
.add-inline > summary:hover{text-decoration:underline}
.add-inline[open] > summary{display:none}
.add-inline > form{margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.add-inline .ico,.add-row .ico{width:15px;height:15px}
.form-actions{display:flex;gap:8px;margin-top:12px}
.add-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.add-row .btn{gap:6px}
.add-form:not([open]){display:none}
.add-form{border-top:0}
.add-form > summary{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:var(--text);background:transparent!important;border-bottom:1px solid var(--line)}
.add-form > summary .x{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--muted)}
.add-form > summary .x:hover{background:var(--surface-2);color:var(--text)}
@media (max-width:640px){.se-head,.se-sec{padding-inline:14px}}

/* «قدم بعدی» صفحهٔ دوره: یک ردیف کم‌حجم */
.next-one{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;margin-bottom:18px;
  border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:10px;background:var(--surface);color:var(--text)}
.next-one:hover{border-color:var(--brand)}
.next-one > .faint{font-size:.8rem}
.next-one > b{font-weight:600}
.next-one > .d{flex:1;min-width:120px}

/* ── جعبهٔ پیام: گفت‌وگو و پشتیبانی ── */
.chat-box{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);transition:border-color .15s}
.chat-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.chat-box textarea{all:unset;box-sizing:border-box;width:100%;padding:12px 14px 4px;min-height:44px;max-height:260px;overflow-y:auto;
  font:inherit;line-height:1.8;color:var(--text);white-space:pre-wrap;resize:none}
.chat-box textarea::placeholder{color:var(--faint)}
.cb-files{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.cb-files:empty{display:none}
.cb-file{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 10px;border-radius:999px;background:var(--surface-2);
  font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-file .ico{width:14px;height:14px;flex:none}
.cb-bar{display:flex;align-items:center;gap:8px;padding:6px 8px}
.cb-bar label.btn{cursor:pointer;color:var(--muted)}
.cb-bar label.btn:hover{color:var(--brand)}
.cb-topic{min-height:32px;padding:0 10px;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:13px}
.topic-seg{margin-bottom:12px}
.cb-bar .err{flex:1;color:var(--danger);font-size:.82rem;font-style:normal}

.chat{padding:16px 18px}
.chat > .chat-box{margin-bottom:6px}
.chat .posts{margin-top:4px}
.chat .post{flex-direction:row;align-items:flex-start;gap:12px;padding:14px 0}
.post-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.post-body .post-head{gap:8px;flex-wrap:wrap;font-size:.9rem}
.post-body .post-head .faint{font-size:.78rem}
.post-actions{gap:14px;margin-top:2px}
.link-btn{all:unset;cursor:pointer;font-size:.82rem;color:var(--muted)}
.link-btn:hover{color:var(--brand)}
.link-btn.del:hover{color:var(--danger)}
.link-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.chat .replies{margin:6px 0 0;padding:0;padding-inline-start:14px;border:0;border-inline-start:2px solid var(--line);gap:0}
.chat .post.reply{padding:8px 0}
.chat .reply-box{padding:6px 0 4px}

/* ── تیکت ── */
.tk-row{align-items:center}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.fchips .fchip{min-height:36px;padding:0 14px;font-size:.86rem;gap:6px}
.tk-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.tk-thread{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.tk-msg{max-width:min(620px,92%);padding:12px 14px;border-radius:12px;background:var(--surface-2);align-self:flex-start}
.tk-msg.staff{align-self:flex-end;background:var(--brand-soft)}
.tk-msg p{margin:4px 0 0;white-space:pre-wrap;line-height:1.85;overflow-wrap:anywhere}
.tk-meta{display:flex;gap:10px;align-items:baseline;font-size:.86rem}
.tk-meta .faint{font-size:.76rem}
.tk-reply{margin-top:6px}
.page-head a.d{display:inline-flex;align-items:center;gap:4px;margin-bottom:4px}
.page-head a.d .ico{width:14px;height:14px}
.tk-new .seg{flex-wrap:wrap}

/* ── فاصلهٔ سربرگ صفحه تا کارت زیرش؛ جایی که والد gap ندارد ── */
:where(.greet, .page-head) + *{margin-top:20px}
:where(.dash, .teach-page) > :where(.greet, .page-head) + *{margin-top:0}
.panel + .btn,.panel + button{margin-top:14px}

/* ── انتخاب فایل فارسی ── */
.file-x{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.file-x .btn{gap:6px;flex:none}
.file-x .btn .ico{width:15px;height:15px}
.fx-name{font-size:.84rem;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.field .file-x{margin-top:2px}

/* ── پیام کوتاه سامانه ── */
#toasts{position:fixed;inset-inline:0;bottom:20px;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(520px,100%);padding:12px 16px;border-radius:12px;
  background:var(--text);color:var(--surface);font-size:.9rem;line-height:1.7;box-shadow:var(--shadow);cursor:pointer;animation:toast-in .2s ease-out}
.toast .ico{width:18px;height:18px;flex:none}
.toast.ok .ico{color:#8FD9B6}
.toast.err{background:var(--danger);color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ════ پنل: منوی کناری تیرهٔ فولادی، گزینهٔ فعال قرصی روشن ════ */
.pmenu{background:var(--side-bg);border:0;border-radius:20px;padding:18px 12px;color:var(--side-text);box-shadow:var(--shadow-sm)}
.pmenu-who{border-bottom-color:rgba(241,235,223,.1)}
.pmenu-who b{color:#F1EBDF}
.pmenu-who .d{color:var(--side-text)}
.pmenu-who .avatar{background:#433C33;color:#F1EBDF}
.pmenu .side-nav a{color:var(--side-text);border-radius:999px;padding:0 14px}
.pmenu .side-nav a:hover{background:var(--side-hover);color:#F1EBDF}
.pmenu .side-nav a.active{background:var(--side-active);color:var(--side-active-text);font-weight:700}
.pmenu .side-nav .badge.muted{background:rgba(241,235,223,.1);color:var(--side-text)}
.pmenu .side-nav a.active .badge.muted{background:rgba(27,24,19,.1);color:var(--side-active-text)}
.pmenu .side-back,.pmenu button.side-link,.pmenu .side-link{color:var(--side-text);border-color:rgba(241,235,223,.1)}
.pmenu .side-back:hover,.pmenu button.side-link:hover{background:var(--side-hover);color:#F1EBDF}
.pmenu .side-ver{border-color:rgba(241,235,223,.12);background:var(--side-hover);color:#F1EBDF}
.pmenu .side-ver select{background:var(--side-bg);color:#F1EBDF;border-color:rgba(241,235,223,.15)}
.pmenu .side-ver .d,.pmenu .side-ver .faint{color:var(--side-text)}
.pmenu-out{border-top-color:rgba(241,235,223,.1);color:#F4A39C}
.pmenu-out:hover{background:var(--side-hover)}

/* ════ داشبورد هنرجو ════ */

.pmain{container-type:inline-size}
.pl > .pmain{align-self:stretch}

/* ════ نوار پایین موبایل: «قرص فعال» ════ */
#bnav{display:none}
@media (max-width:760px){
  #bnav:not([hidden]){display:flex;position:fixed;inset-inline:10px;bottom:10px;z-index:900;justify-content:space-around;gap:2px;
    padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px rgba(27,24,19,.14)}
  #bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;border-radius:16px;
    font-size:.75rem;color:var(--faint);-webkit-tap-highlight-color:transparent}
  #bnav a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
  #bnav .bn-ic{position:relative;display:grid;place-items:center}
  #bnav .ico{width:21px;height:21px}
  #bnav .bn-dot{position:absolute;top:-6px;inset-inline-end:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;font-style:normal;
    font-size:.62rem;display:grid;place-items:center;background:var(--danger);color:#fff}
  body:has(#bnav:not([hidden])){padding-bottom:84px}
  body.exam-mode #bnav,body.auth-mode #bnav{display:none}
  /* منوی کناری روی موبایل فقط برای پنل نسخه و ادمین */
  .pl:not(.ctx) > .pmenu{display:none}
  .pl.ctx > .pmenu{border-radius:14px;padding:6px}
}

/* ════ صفحهٔ اول: قهرمان، اعداد، ویژگی‌ها، دوره‌ها، چرا، نظرها، پرسش‌ها، نوار پایانی ════ */
.landing{display:flex;flex-direction:column;gap:72px;padding-block:40px 80px}
.hero-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.84rem;font-weight:600;color:var(--muted)}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px var(--up-soft)}
.hero-copy > p{font-size:1.08rem;color:var(--muted);margin:0;max-width:46ch;line-height:1.9}
.btn.lg{min-height:50px;padding:0 24px;font-size:.98rem;border-radius:12px}
.trust{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 48px;padding:22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);margin-top:-36px}
.trust span{display:flex;align-items:baseline;gap:8px;color:var(--faint);font-size:.92rem}
.trust b{font-size:1.5rem;color:var(--text);font-weight:800}
.l-sec{display:flex;flex-direction:column;gap:24px}
.l-title{text-align:center}
.l-title.start{text-align:start}
.l-title h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0;font-weight:800}
.bento{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bento-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);min-height:190px}
.bento-card.b1{grid-column:span 3;background:var(--side-bg);color:#F1EBDF;border-color:transparent}
.bento-card.b2{grid-column:span 2}
.bento-card.b3{grid-column:span 2}
.bento-card.b4{grid-column:span 3;background:var(--brand-soft);border-color:transparent}
.bento-card h3{margin:auto 0 0;font-size:1.1rem}
.bento-card p{margin:0;color:var(--muted);line-height:1.8;font-size:.92rem}
.bento-card.b1 p{color:var(--side-text)}
.b-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.b1 .b-ic{background:rgba(241,235,223,.1);color:#F1EBDF}
.b4 .b-ic{background:var(--surface)}
.b-ic .ico{width:22px;height:22px}
.landing .catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.why-n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--side-bg);color:#F1EBDF;font-weight:800;margin-bottom:8px}
.why-card h3{margin:0;font-size:1rem}
.why-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.8}
.reviews{display:flex;gap:16px;overflow-x:auto;padding:4px max(16px,calc((100vw - 1200px) / 2)) 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.review{flex:0 0 min(340px,85vw);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.review blockquote{margin:0;line-height:1.9;color:var(--text)}
.review figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}
.review figcaption > span{display:flex;flex-direction:column;font-size:.88rem}
.review .faint{font-size:.78rem}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:40px;border-radius:24px;background:var(--side-bg);color:#F1EBDF;
  background-image:radial-gradient(circle at 0% 100%,rgba(78,106,131,.5),transparent 55%)}
.cta-band h2{margin:0 0 6px;font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
.cta-band p{margin:0;color:var(--side-text)}
.cta-band .btn{background:var(--side-active);color:var(--side-active-text);border-color:transparent}
@media (max-width:900px){
  .landing{gap:52px;padding-block:24px 56px}
  .trust{margin-top:0;gap:10px 28px}
  .bento{grid-template-columns:1fr 1fr}
  .bento-card.b1,.bento-card.b2,.bento-card.b3,.bento-card.b4{grid-column:span 1}
  .why{grid-template-columns:1fr 1fr}
  .cta-band{padding:28px}
}
@media (max-width:560px){
  .bento,.why{grid-template-columns:1fr}
  .bento-card{min-height:0}
}

/* ── کارت‌های داشبورد ── */
.card2{background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;color:var(--text)}
.req-note{margin:0}

/* ── فهرست دوره‌ها داخل برنامه: کارت پهن با تصویر و پیکان ── */
.clist{display:flex;flex-direction:column;gap:16px}
.clist-filter{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.clist-filter .faint{font-size:.86rem;margin-inline-end:4px}
.clist-filter .fchip{min-height:38px;padding:0 16px;background:var(--surface);border:0;font-size:.86rem}
.clist-filter .fchip.on{background:var(--side-bg);color:#fff}
.ccard{display:flex;align-items:center;gap:22px;padding:18px;border-radius:22px;color:var(--text);transition:transform .15s,box-shadow .15s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,24,19,.08)}
.ccard-art{flex:none;width:210px;height:136px;border-radius:16px;overflow:hidden;position:relative}
.ccard-art > *{width:100%;height:100%}
.ccard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ccard-body > b{font-size:1.2rem;font-weight:800}
.ccard-about{color:var(--muted);font-size:.9rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard-by{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;color:var(--faint)}
.ccard-by b{color:var(--text)}
.ccard-by .state{margin-inline-start:6px}
.ccard-go{flex:none;align-self:flex-end;width:44px;height:44px;border-radius:50%;background:var(--side-bg);color:#fff;display:grid;place-items:center}
.ccard-go .ico{width:18px;height:18px}

/* ورودی فایلِ پنهان پشت دکمهٔ فارسی؛ قاعده‌های عرض فیلدها نباید بزرگش کنند */
input[type=file][data-fx]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;margin:0!important;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
/* کارت و فهرست ساده */
.card{background:var(--surface);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.card-h h2{margin:0;font-size:.98rem;font-weight:700}
.card-h a.faint{font-size:.82rem}
.card-h a.faint:hover{color:var(--text)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lrow{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--text);min-width:0}
.lrow + .lrow{border-top:1px solid var(--line)}
.lrow > .ico{width:15px;height:15px;color:var(--faint);flex:none}
a.lrow:hover .lrow-t b{color:var(--brand)}
.lrow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.lrow-t b{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-t .faint{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-n{flex:none;font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow-n.hot{color:var(--danger);font-weight:700}
.lrow.me .lrow-t b{color:var(--brand);font-weight:800}
.rank{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);font-size:.78rem;font-weight:700;color:var(--muted)}
.meter{flex:0 0 110px;height:4px;border-radius:999px;background:var(--line)}
.meter i{display:block;height:100%;border-radius:999px;background:var(--brand)}

/* عددهای کلیدی: یک نوار، بی‌رنگ */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border-radius:16px;overflow:hidden}
.kpi{display:flex;flex-direction:column;gap:2px;padding:18px 22px;color:var(--text);min-width:0}
.kpi + .kpi{border-inline-start:1px solid var(--line)}
a.kpi:hover{background:var(--surface-2)}
.kpi-l{font-size:.8rem;color:var(--faint)}
.kpi b{font-size:1.75rem;font-weight:800;line-height:1.35;font-variant-numeric:tabular-nums}
.kpi b small{font-size:.85rem;font-weight:600;color:var(--faint)}
.kpi-s{font-size:.76rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi.warn b{color:var(--danger)}

/* تقویم داخل داشبورد: ماه کنار برنامهٔ روز */
.calcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;padding:20px 22px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-size:.98rem}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-nav button{all:unset;box-sizing:border-box;cursor:pointer;height:32px;min-width:32px;padding:0 10px;border-radius:9px;display:grid;place-items:center;font-size:.8rem;color:var(--muted)}
.cal-nav button:hover{background:var(--surface-2);color:var(--text)}
.cal-nav button:focus-visible{outline:2px solid var(--brand)}
.cal-nav .ico{width:15px;height:15px}
.calcard .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;border:0;background:none;padding:0}
.calcard .dow{font-size:.75rem;color:var(--faint);text-align:center;padding-bottom:6px;background:none;border:0}
.calcard .day{all:unset;box-sizing:border-box;cursor:pointer;position:relative;height:40px;border-radius:10px;display:grid;place-items:center;font-size:.86rem;color:var(--text);background:none;border:0;min-height:0}
.calcard .day:hover{background:var(--surface-2)}
.calcard .day:focus-visible{outline:2px solid var(--brand)}
.calcard .day.out{cursor:default}
.calcard .day.out:hover{background:none}
.calcard .day.off{color:var(--faint)}
.calcard .day i{position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--brand-bright)}
.calcard .day.today{font-weight:800;color:var(--brand);box-shadow:inset 0 0 0 1px var(--line-strong)}
.calcard .day.selected{background:var(--side-bg);color:#fff;font-weight:700}
.calcard .day.selected i{background:#fff}
.agenda{display:flex;flex-direction:column;gap:2px;padding-inline-start:28px;border-inline-start:1px solid var(--line);min-width:0}
.ag-day{font-size:.9rem;margin-bottom:8px}
.ag-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;color:var(--text)}
.ag-row + .ag-row{border-top:1px solid var(--line)}
.ag-row > span{display:flex;flex-direction:column;min-width:0}
.ag-row b{font-size:.88rem;font-weight:600}
.ag-row .faint{font-size:.76rem}
.ag-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:8px;background:var(--brand)}
.ag-dot.t-assign{background:#D99A1E}
.ag-dot.t-exam{background:var(--danger)}
.ag-empty{margin:4px 0 0;font-size:.86rem}
.sh-body > .req-note{margin:0}

.sh-body{container-type:inline-size}
@container (max-width:640px){ .calcard{grid-template-columns:1fr;gap:18px} .agenda{padding:16px 0 0;border:0;border-top:1px solid var(--line)} }
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-inline-start:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .duo{grid-template-columns:1fr}
}
@media (max-width:560px){ .kpi{padding:14px 16px} .kpi b{font-size:1.45rem} .meter{flex-basis:60px} .card,.calcard{padding:16px} }

/* منوی «بیشتر» ردیف‌ها روی گوشی زیر همان ردیف باز می‌شود، نه بیرون از صفحه */
@media (max-width:560px){
  .row-more[open]{flex-basis:100%}
  .row-more[open] > summary{width:max-content}
  .row-menu{position:static;width:auto;margin-top:8px;box-shadow:none}
}

.resend > summary.resend-h{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 18px;font-weight:700;font-size:.95rem}
.resend > summary.resend-h::-webkit-details-marker{display:none}
.resend > summary .ico{width:18px;height:18px;color:var(--brand)}
.resend[open] > summary{border-bottom:1px solid var(--line)}
.dash-start{align-items:flex-start;gap:10px;padding:28px}
.dash-start h2{margin:0;font-size:1.1rem}
.dash-start p{margin:0 0 6px;max-width:52ch;line-height:1.8}

/* ════ ایده‌ها از inkday و home widgets: صفحهٔ خط‌دار، کارهای تیک‌خور، نقشهٔ پیوستگی ════ */
.today{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:22px}
.dial{position:relative;width:150px;aspect-ratio:1}
.dial-svg{width:100%;height:100%;display:block}
.dial-svg line{stroke:var(--line-strong);stroke-width:2.2;stroke-linecap:round}
.dial-svg line.on{stroke:var(--brand)}
.dial-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.dial-c b{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.dial-c small{font-size:.8rem;color:var(--faint)}
.today-s{display:flex;flex-direction:column;min-width:0}
.today-s .kpi-l{margin-bottom:4px}
.tstat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;color:var(--text)}
.tstat + .tstat{border-top:1px solid var(--line)}
.tstat span{display:flex;flex-direction:column;font-size:.86rem;color:var(--muted)}
.tstat small{font-size:.75rem;color:var(--faint)}
.tstat b{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}
a.tstat:hover b{color:var(--brand)}
.tstat.warn b{color:var(--danger)}

.task .tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line-strong);display:grid;place-items:center;color:#fff}
.task .tick .ico{width:13px;height:13px}
.task.t-done .tick{background:var(--brand);border-color:var(--brand)}
.task.t-done .lrow-t b{text-decoration:line-through;color:var(--faint);font-weight:500}
.task.t-wait .tick{border-style:dashed;border-color:var(--brand)}
.task.t-fix .tick{border-color:var(--danger)}
.task.t-fix .lrow-n{color:var(--danger)}

.heat-body{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.heat-grid{display:grid;grid-template-rows:repeat(7,16px);grid-auto-flow:column;grid-auto-columns:16px;gap:4px}
.heat-stats{flex:1;min-width:200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.heat-stats div{display:flex;flex-direction:column;gap:2px;padding:4px 18px}
.heat-stats div + div{border-inline-start:1px solid var(--line)}
.heat-stats b{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.heat-stats span{font-size:.78rem}
.heat-grid i,.heat-key i{display:block;aspect-ratio:1;border-radius:4px;background:var(--line)}
.heat-grid i.h1,.heat-key i.h1{background:color-mix(in srgb,var(--brand) 35%,var(--line))}
.heat-grid i.h2,.heat-key i.h2{background:color-mix(in srgb,var(--brand) 65%,var(--line))}
.heat-grid i.h3,.heat-key i.h3{background:var(--brand)}
.heat-key{display:flex;align-items:center;gap:4px;font-size:.75rem;margin-top:8px}
.heat-key i{width:12px}
.heat-key span:first-child{margin-inline-end:4px}
.heat-key span:last-child{margin-inline-start:4px}
@media (max-width:560px){ .today{grid-template-columns:118px minmax(0,1fr);gap:14px} .dial{width:118px} .dial-c b{font-size:1.9rem}
  .heat-grid{grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-columns:minmax(0,1fr);gap:3px;width:100%} .heat-grid i{aspect-ratio:1} .heat-body > div:first-child{width:100%} .heat-stats div{padding:4px 10px} .heat-stats b{font-size:1.3rem} }

/* ════ صفحهٔ اول سه‌بعدی (ایده از kernel code و drift school) ════ */

/* ════ پوشهٔ شیشه‌ای پاسخ (ایده از foldwell) ════ */
.ftray{display:flex;align-items:center;gap:22px;padding:18px 20px;border-radius:16px;background:#101013;color:#EDEDEF;transition:box-shadow .2s}
.ftray.hot{box-shadow:0 0 0 2px #F2701F inset}
.fold{position:relative;flex:none;width:132px;height:112px}
.fold::before{content:"";position:absolute;inset:16px 0 0 0;border-radius:12px;background:#2A2A31}
.fold-back{position:absolute;top:0;inset-inline-start:0;width:46%;height:30px;border-radius:10px 10px 0 0;background:#2A2A31}
.fold-sheet{position:absolute;left:14px;right:14px;top:calc(14px + var(--i) * 7px);height:66px;border-radius:6px;background:#EDEDEF;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.fold-sheet:nth-of-type(2n){background:#DAD9DE}
.fold-front{position:absolute;inset:40px 0 0 0;border-radius:12px;background:rgba(58,62,78,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;transform-origin:bottom;transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .25s,box-shadow .25s}
.fold-front b{font-size:.82rem}
.fold-front small{font-size:.75rem;color:#A4A4AE;font-variant-numeric:tabular-nums}
.ftray.hot .fold-front{transform:perspective(420px) rotateX(-24deg);background:rgba(79,139,255,.45);box-shadow:0 0 26px rgba(79,139,255,.5)}
.fold.drop .fold-front{animation:fold-tilt .7s cubic-bezier(.3,1.5,.5,1)}
.fold.drop .fold-sheet.new{animation:sheet-in .6s cubic-bezier(.3,1.4,.5,1) both}
.fold.drop .fold-sheet.new:nth-last-of-type(2){animation-delay:.12s}
.fold.drop .fold-sheet.new:nth-last-of-type(3){animation-delay:.24s}
@keyframes fold-tilt{0%{transform:perspective(420px) rotateX(-24deg);background:rgba(79,139,255,.45)}100%{transform:none}}
@keyframes sheet-in{from{transform:translateY(-46px);opacity:0}to{transform:none;opacity:1}}
.ftray-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.ftray-t b{font-size:.98rem}
.ftray-t > span{font-size:.8rem;color:#A4A4AE}
.ftray-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ftray-btns .field{flex:none}
.ftray .btn{background:rgba(255,255,255,.08);color:#EDEDEF;border-color:rgba(255,255,255,.18)}
.ftray .btn:hover{background:rgba(255,255,255,.16)}
.ftray .fx-name{display:none}
.on-touch{display:none}
@media (hover:none){ .on-hover{display:none} .on-touch{display:inline} }
@media (max-width:560px){ .ftray{flex-direction:column;align-items:flex-start} }
@media (prefers-reduced-motion:reduce){ .fold-front,.fold.drop .fold-front,.fold.drop .fold-sheet.new{transition:none;animation:none} }
.toast-act{all:unset;cursor:pointer;margin-inline-start:10px;padding:2px 8px;border-radius:6px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}
.toast-act:focus-visible{outline:2px solid currentColor}

/* دروازهٔ دانجن: سنگ ← مشعل ← دریچه ← شمع‌ها ← خط روند ← نور ته راهرو؛ بعد شعله، غبار و مه */

/* ════ حرکت در پنل: کوتاه، یک ریتم، فقط برای معنا ════ */
:root{--dur:180ms;--dur-fast:120ms;--ease-out:cubic-bezier(.2,.8,.3,1)}
/* ورود صفحه: بخش‌ها پشت‌سرهم، فقط وقتی مسیر عوض شده */
.pg-in > *{animation:pg-in var(--dur) var(--ease-out) both}
.pg-in > :nth-child(2){animation-delay:40ms}
.pg-in > :nth-child(3){animation-delay:80ms}
.pg-in > :nth-child(4){animation-delay:120ms}
.pg-in > :nth-child(5){animation-delay:160ms}
.pg-in > :nth-child(n+6){animation-delay:200ms}
@keyframes pg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* منوها از سمت دکمهٔ خودشان باز می‌شوند */
details[open] > .umenu-pop,details[open] > .row-menu{animation:pop-in var(--dur-fast) var(--ease-out) both;transform-origin:top left}
@keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
/* پیام: خروج کوتاه‌تر از ورود */
.toast.out{animation:toast-out 160ms ease-in forwards}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}
/* تیک تمرین تأییدشده خودش را می‌کشد، فقط هنگام ورود به صفحه */
.pg-in .task.t-done .tick{animation:tick-pop .3s .25s var(--ease-out) both}
.pg-in .task.t-done .tick .ico *{stroke-dasharray:30;stroke-dashoffset:30;animation:tick-draw .35s .4s ease-out forwards}
@keyframes tick-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes tick-draw{to{stroke-dashoffset:0}}
/* دکمهٔ در حال ارسال: چرخنده کنار متن */
.btn.busy{position:relative;pointer-events:none}
.btn.busy::after{content:"";width:14px;height:14px;margin-inline-start:8px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* اسکلت بار اول، تا رسیدن داده */
.skel{max-width:1100px;margin:32px auto;padding:0 24px;display:flex;flex-direction:column;gap:16px}
.skel i{display:block;border-radius:16px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite}
.skel .sk-h{width:220px;height:32px;border-radius:10px}
.skel .sk-row{height:92px}
.skel .sk-card{height:220px}
.skel .sk-card.short{height:140px;width:60%}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .pg-in > *,details[open] > .umenu-pop,details[open] > .row-menu,.toast.out,.pg-in .task.t-done .tick,.pg-in .task.t-done .tick .ico *,.skel i{animation:none!important}
  .pg-in .task.t-done .tick .ico *{stroke-dashoffset:0}
  .btn.busy::after{animation-duration:2s}
}
/* ════════ دسترس‌پذیری: پرش به محتوا، فوکوس جابه‌جایی صفحه، اندازهٔ لمس روی گوشی ════════ */
.skip{position:fixed;top:10px;inset-inline-start:10px;z-index:2000;padding:10px 16px;border-radius:10px;background:var(--surface);color:var(--text);font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.18);transform:translateY(-160%)}
.skip:focus{transform:none}
/* ظرف محتوا فقط برای جابه‌جایی فوکوس گرفته می‌شود؛ قاب دور کل صفحه لازم نیست */
#app[tabindex="-1"]:focus,.sh-body[tabindex="-1"]:focus{outline:none}
.subs-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (pointer:coarse){
  .btn.sm{min-height:40px}
  .btn.sm.icon{width:40px}
  .fchip{min-height:44px}
  .cal-nav button{height:40px;min-width:40px}
  .card-h a.faint{padding:10px 8px;margin:-10px -8px}
}

/* ════════ صفحهٔ اول، نسخهٔ حرفه‌ای: نوار تیره روی هیرو، تیتر دوتکه، ورود پلکانی، بخش‌های با برچسب ════════
   فارسی: فاصلهٔ حروف همیشه صفر (اتصال حروف می‌شکند) و ارتفاع خط بازتر از لاتین */

.landing{gap:112px;padding-block:40px 112px}
.landing .btn{border-radius:999px}
/* دکمهٔ اصلی با دایرهٔ پیکان؛ پیکان در هاور دو پیکسل جلو می‌رود */
.pill-go{gap:14px;padding-inline:26px 7px!important}
.go-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1B1813;color:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.go-dot .ico{width:17px;height:17px}
.pill-go:hover .go-dot{transform:translateX(-3px)}
.pill-go:active{transform:scale(.97)}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:18px 0 0;font-size:.88rem;color:rgba(220,232,238,.6)}
.hero-proof span{display:inline-flex;align-items:baseline;gap:6px}
.hero-proof span + span::before{content:"";width:1px;height:14px;margin-inline:16px;background:rgba(255,255,255,.18);align-self:center}
.hero-proof b{font-size:1.05rem;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
/* ورود پلکانی: برچسب، تیتر، متن، دکمه‌ها، آمار؛ حالت نهایی بدون JS هم دیده می‌شود */
@keyframes hero-rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* سرتیتر بخش‌ها: راست‌چین، درشت‌تر، با برچسب شماره‌دار */
.l-title,.l-title.start{text-align:start;display:flex;flex-direction:column;gap:10px}
.l-title h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.4;font-weight:800;letter-spacing:0}
.l-eye{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.l-eye i{width:32px;height:1px;background:var(--line-strong)}
.landing .catalog-head{align-items:flex-end}

/* «چرا دانجن»: فهرست تحریری به‌جای چهار کارت هم‌شکل */
.why{gap:32px}
.why-card{background:none;border:0;border-top:1px solid var(--line-strong);border-radius:0;padding:22px 0 0;gap:10px}
.why-n{width:auto;height:auto;margin:0 0 6px;background:none;color:var(--brand);font-size:2.6rem;font-weight:300;line-height:1;border-radius:0;place-items:start}
.why-card h3{font-size:1.08rem}

/* نوار پایانی: تیتر درشت، نور ملایم بالا */
.cta-band{padding:56px;border-radius:32px;background:radial-gradient(600px circle at 80% 0%,rgba(150,205,222,.14),transparent 70%),#1B1813}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.4;margin-bottom:10px}
.cta-band p{color:rgba(220,232,238,.7);max-width:34rem}
.cta-band .btn.primary{background:#fff;color:#1B1813;border-color:#fff}

@media (max-width:900px){
  .landing{gap:72px;padding-block:24px 72px}
  .hero-proof span + span::before{margin-inline:12px}
  .cta-band{padding:32px 24px;border-radius:24px}
  .why{gap:24px}
}
@media (max-width:900px){
  /* گوشی: دروازه کوتاه‌تر تا دکمه‌ها در صفحهٔ اول دیده شوند؛ سایهٔ پشت متن تمام‌عرض، بدون لبه */
  .hero-proof{font-size:.82rem;margin-top:8px}
  .hero-proof span + span::before{margin-inline:10px}
}

/* ════════════════════════════════════════════════════════════════
   «مجله‌ای آرام» (طرح B) — لایهٔ آخر
   کاغذ کرم و جوهر؛ سبزآبی عمیق برای تأکید. دکمه‌ها قرصی، کارت‌ها ۲۰ پیکسل با سایهٔ نرم و حلقهٔ نازک،
   سربخش‌های شماره‌دار، زیرخط دست‌کشیده زیر یک کلمهٔ تیتر.
   ════════════════════════════════════════════════════════════════ */
:root{--gut:16px}
@media (min-width:760px){:root{--gut:32px}}
@media (min-width:1280px){:root{--gut:48px}}
html{background:var(--bg)}
body{font-size:15px;line-height:1.8;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:0}
::selection{background:rgba(15,92,86,.22);color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ── دکمه‌ها و تراشه‌ها: قرصی ── */
.btn{border:0;border-radius:999px;min-height:44px;padding:0 20px;font-weight:650;font-size:14.5px;background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--line) inset;
  transition:background .25s,box-shadow .3s,transform .15s,color .2s}
.btn:hover{background:var(--surface);box-shadow:0 0 0 1px var(--text) inset}
.btn:active{transform:scale(.97);background:var(--surface)}
.btn.primary{background:var(--brand);color:var(--on-brand);border:0;box-shadow:0 1px 2px rgba(20,33,31,.18),0 8px 18px -10px rgba(20,33,31,.45)}
.btn.primary:hover{background:var(--brand-hover);box-shadow:0 0 0 4px rgba(15,92,86,.14),0 10px 22px -10px rgba(20,33,31,.5)}
.btn.accent{background:var(--accent);color:var(--on-accent);box-shadow:none}
.btn.light{background:#F4EFE6;color:#14211F;box-shadow:none}
.btn.soft{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.btn.ghost{background:transparent;box-shadow:none;color:var(--text)}
.btn.ghost:hover{background:var(--side-hover)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn.lg{min-height:52px;padding:0 26px;font-size:15.5px}
.btn.icon{width:44px;padding:0}
.btn.sm.icon{width:36px}
.ulink{color:var(--accent-text);font-weight:650;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease-quint)}
.ulink:hover{background-size:0 1px;background-position:100% 100%}
.ib{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2);cursor:pointer;position:relative;flex:none;transition:background .2s,color .2s}
.ib:hover{background:var(--side-hover);color:var(--text)}
.ib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ib svg{width:19px;height:19px}
.fchip{border:0;min-height:36px;padding:0 14px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line) inset;color:var(--ink-2);font-size:13px;font-weight:600}
.fchip:hover{background:var(--bg);box-shadow:0 0 0 1px var(--line-strong) inset;color:var(--text)}
.fchip.on,.clist-filter .fchip.on{background:var(--text);color:var(--bg);box-shadow:none}
.badge{background:var(--paper,var(--surface-2));color:var(--ink-2);border-radius:999px;font-weight:700}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--surface-2)}
.seg a,.seg button{min-height:34px;min-width:44px;padding:0 14px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;color:var(--muted);background:transparent;cursor:pointer}
.seg .on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,33,31,.12)}
.state.open,.state.mine{color:var(--accent-text)}

/* ── کارت‌ها ── */
.card,.card2,.panel,.calcard,.facts-card{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.card{padding:clamp(18px,2vw,26px)}
.in-shell .panel + .panel{margin-top:18px}
.in-shell .teach-page > .panel + .panel{margin-top:0}
.card-h{margin-bottom:12px}
.card-h h2{font-size:16.5px;font-weight:740}
.lrow + .lrow,.ag-row + .ag-row{border-top-color:var(--line-2)}
.lrow-n.hot{color:var(--danger)}
.lrow.me .lrow-t b,a.lrow:hover .lrow-t b{color:var(--accent-text)}
.rank{background:var(--surface-2);color:var(--text);border-radius:9px}
.progress{height:6px;background:var(--surface-2)}
.progress i,.meter i{background:var(--accent)}
.meter{height:6px;background:var(--surface-2)}
.tabs{border-bottom:1px solid var(--line);gap:4px}
.tabs a{color:var(--muted);font-weight:650;border-bottom-width:2px}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text);border-bottom-color:var(--accent)}
.tabs a.active .tab-n{background:var(--accent-soft);color:var(--accent-text)}
.dial-svg line.on{stroke:var(--accent)}
.calcard .day.today{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.calcard .day.selected{background:var(--text);color:var(--bg)}
.calcard .day i,.calcard .day.selected i{background:var(--accent-2)}
.ag-dot{background:var(--accent)}
.ag-dot.t-assign{background:var(--warn)}
.ag-dot.t-exam{background:var(--danger)}

/* سربخش شماره‌دار */
.sect-h{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;margin-top:22px;border-bottom:1px solid var(--line)}
.sect-h:first-child{margin-top:0}
.sect-h .n{font-size:12.5px;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.sect-h h2{margin:0;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:740}
.sect-h p{margin:0 auto 0 0;font-size:13px;color:var(--faint);text-align:end}

/* عددهای کلیدی: هر عدد یک کارت؛ اولی کارت جوهری */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.kpi{border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:18px 20px;transition:transform .45s var(--ease-quint),box-shadow .45s var(--ease-quint)}
.kpi + .kpi{border:0}
a.kpi:hover{background:var(--surface);transform:translateY(-3px);box-shadow:var(--shadow-lift),0 0 0 1px var(--line-strong)}
.kpi-l{font-size:12.5px;font-weight:650;color:var(--muted)}
.kpi b{font-size:clamp(26px,2.6vw,34px);font-weight:800}
.kpi-s{color:var(--faint)}
.kpi.warn b{color:var(--danger)}
.kpi.hero{background:var(--stone);color:var(--on-stone);box-shadow:0 30px 60px -34px rgba(20,33,31,.7)}
.kpi.hero .kpi-l,.kpi.hero .kpi-s{color:var(--stone-mu)}
.kpi.hero b,.kpi.hero.warn b{color:var(--stone-hi)}
a.kpi.hero:hover{background:var(--stone)}

/* ── پوسته: منوی کناری روشن سمت راست ── */
body.in-shell{background:var(--bg)}
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;padding:20px 14px 14px;background:var(--side-paper);border-inline-end:1px solid var(--line);overflow-y:auto;scrollbar-width:thin;z-index:60}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-size:22px;font-weight:820;line-height:1;color:var(--text)}
.side-brand .mark{width:26px;height:26px}
.side-brand small{margin-inline-start:auto;font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.nav-label{padding:14px 12px 4px;font-size:11.5px;font-weight:700;color:var(--faint)}
.side .side-nav{display:flex;flex-direction:column;gap:2px}
.side .side-nav a{position:relative;display:flex;align-items:center;gap:11px;min-height:40px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:560;color:var(--ink-2);background:none}
.side .side-nav a:hover{background:var(--side-hover);color:var(--text)}
.side .side-nav .ico{width:18px;height:18px;color:var(--faint)}
.side .side-nav a.active{background:var(--surface);color:var(--text);font-weight:700;box-shadow:0 0 0 1px var(--line-2),0 6px 14px -10px rgba(20,33,31,.4)}
.side .side-nav a.active .ico{color:var(--accent)}
.side .side-nav a.active::before{content:"";position:absolute;inset-inline-start:-14px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.side .side-nav .badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;font-size:11px;line-height:1;background:var(--accent);color:var(--on-accent)}
.side .side-nav .badge.muted{background:none;color:var(--faint);padding:0}
/* زیرمنوی پنل نسخه یا ادمین، با خط عمودی کنارش */
.side-sub{margin:2px 16px 8px 0;margin-inline:16px 0;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.side-sub .side-ctx{display:flex;flex-direction:column;gap:2px}
.side-sub .side-back{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 8px;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--faint)}
.side-sub .side-back:hover{background:var(--side-hover);color:var(--text)}
.side-sub .side-back .ico{width:14px;height:14px}
.side-sub .side-ver{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px;padding:10px;border:0;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);color:var(--text)}
.side-sub .side-ver > .d{font-size:12.5px;font-weight:700;color:var(--text)}
.side-sub .side-ver select{min-height:36px;border-radius:10px;font-size:13px}
.side-sub .side-nav a{min-height:36px;font-size:13.5px}
.side-sub .side-nav a.active::before{inset-inline-start:-15px}
.side-sub .side-link{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;margin:4px 0 0;border:0;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--accent-text);background:none}
.side-sub button.side-link{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;margin-top:4px;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--accent-text)}
.side-sub .side-link:hover{background:var(--side-hover)}
.side-sub .side-link .ico{width:15px;height:15px}
.side-space{flex:1;min-height:12px}
.userpill{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.userpill .avatar{width:38px;height:38px;background:var(--text);color:var(--bg);font-size:13px}
.userpill .meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.userpill .meta b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userpill .meta span{font-size:11.5px;font-weight:700;color:var(--accent-text)}
.userpill .ib{width:40px;height:40px;color:var(--faint)}
.scrim{display:none}
.sh-main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;height:68px;padding-inline:var(--gut);
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line-2)}
.menu-btn{display:none}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);white-space:nowrap;min-width:0}
.crumb b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.crumb .sep{opacity:.5}
.tb-search{display:flex;align-items:center;gap:10px;flex:1;max-width:420px;height:42px;margin-inline-start:12px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;color:var(--faint)}
.tb-search .ico{width:17px;height:17px;flex:none}
.tb-search input{all:unset;flex:1;min-width:0;font-size:13.5px;color:var(--text)}
.tb-search input::placeholder{color:var(--faint)}
.tb-search:focus-within{box-shadow:0 0 0 1px var(--text) inset,0 0 0 4px rgba(15,92,86,.1)}
.tb-space{flex:1}
.tb-bell i{position:absolute;top:8px;inset-inline-end:8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;font-style:normal;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.topbar .umenu > summary{border:0;background:none;padding:0;min-height:44px;border-radius:50%}
.topbar .umenu .avatar.sm{width:38px;height:38px;background:var(--text);color:var(--bg);font-size:13px}
.umenu-pop{border:0;border-radius:18px;padding:8px;box-shadow:var(--shadow-lift),0 0 0 1px var(--line)}
.umenu-pop a,.umenu-pop button{min-height:44px;border-radius:12px}
.content{flex:1;width:100%;max-width:1320px;margin-inline:auto;padding:28px var(--gut) 72px}
.sh-body{display:flex;flex-direction:column;gap:18px;min-width:0;container-type:inline-size}
.sh-body .wrap{max-width:none;padding-inline:0;margin:0}
.sh-body .teach-page{padding:0;max-width:none}
.sh-body .dash{padding-block:0}
.sh-body .course,.sh-body .catalog-page{padding-block:0}
body.in-shell.exam-mode .side,body.in-shell.exam-mode .topbar{display:none}
body.in-shell.exam-mode .shell{display:block}
body.in-shell.exam-mode .content{max-width:none;padding:0}

/* ── سرتیتر صفحه: خط مشخصات، تیتر درشت، زیرخط دست‌کشیده ── */
.ph{margin-bottom:26px}
.ph-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);line-height:1.4}
.jdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-inline-end:7px;vertical-align:1px}
.ph h1{margin:0;font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.3;font-weight:780;text-wrap:balance}
.h1-sub{display:block;margin-top:.55em;font-size:clamp(15px,1.4vw,19px);line-height:1.95;color:var(--muted);font-weight:500;max-width:56ch}
.ink-mark{position:relative;display:inline-block;white-space:nowrap}
.ink-mark > svg{position:absolute;inset-inline:-3%;bottom:-.04em;width:106%;height:.28em;overflow:visible;pointer-events:none}
.ink-mark path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:mark-draw 1.2s cubic-bezier(.65,0,.35,1) .45s both}
@keyframes mark-draw{from{stroke-dashoffset:1}}
.page-head h1,.course-title h1,.cpage-main h1,.catalog-head h1{font-weight:780}
.page-head h1{font-size:clamp(1.7rem,2.8vw,2.4rem)}
.course-title h1{font-size:clamp(1.8rem,3vw,2.6rem)}

/* ── کارت «ادامه بده»: کارت قهرمان جوهری ── */
.go-on{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px 26px 0;border-radius:var(--r);background:var(--stone);color:var(--on-stone);box-shadow:0 30px 60px -34px rgba(20,33,31,.7)}
.go-l{font-size:12.5px;font-weight:650;color:var(--stone-mu)}
.go-t{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);font-weight:800;line-height:1.5;color:var(--stone-hi)}
.go-on .btn.light{margin:8px 0 4px;position:relative;z-index:1}
.go-on:focus-visible{outline-offset:3px}

/* ── نمودار جلد ── */
.spark{display:block;width:100%;height:100%}
.spark .g{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.spark .a{fill:rgba(15,92,86,.08);stroke:none}
.spark .l{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
:is(.cover-box,.thumb,.ccard-art) .spark{position:absolute;inset:18% 0 0}
:is(.cover-box,.thumb,.ccard-art){position:relative;overflow:hidden}

/* ── فهرست دوره‌ها داخل پنل ── */
/* ستون‌ها از ۳۲۰ پیکسل؛ با ۴۴۰ یک دورهٔ تنها کل عرض را می‌گرفت و جلدش نواری پهن و بریده می‌شد */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.clist-filter{grid-column:1/-1}
.ccard{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line);overflow:hidden;transition:transform .45s var(--ease-quint),box-shadow .45s var(--ease-quint)}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift),0 0 0 1px var(--line-strong)}
.ccard-art{width:100%;height:auto;aspect-ratio:16/7;border-radius:0;border-bottom:1px solid var(--line-2)}
/* عکس جلد ۶۴۰×۳۶۰ آپلود می‌شود؛ قاب ۱۶:۷ بالا و پایینش را می‌برید (نام دوره روی Market Mastery) */
.ccard-art:has(> img.cover){aspect-ratio:16/9}
.ccard-body{padding:20px 22px 22px;gap:8px}
.ccard-body > b{font-size:1.25rem;font-weight:780}
.ccard-by{padding-inline-end:56px}
.ccard-go{position:absolute;bottom:22px;left:22px;display:grid;width:44px;height:44px;border-radius:50%;background:var(--text);color:var(--bg)}

/* ── ورود: کارت وسط صفحه روی خط نمودار ── */
body.auth-mode{background:var(--bg)}
.auth-split{position:relative;display:grid;place-items:center;min-height:100vh;padding:24px 16px 120px;overflow:hidden}
.auth-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 199px,var(--line-2) 199px 200px)}
.auth-bg svg{position:absolute;inset-inline:0;top:calc(50% + 120px);width:100%;height:200px}
.auth-bg path{fill:none;stroke:var(--accent-2);stroke-width:1.4;opacity:.55;vector-effect:non-scaling-stroke}
.auth-main{position:relative;z-index:1;flex:none;width:min(440px,100%);display:flex;flex-direction:column;padding:clamp(24px,4vw,38px);border-radius:28px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-lift),0 0 0 1px var(--line)}
.auth-top{flex-direction:row-reverse}
.auth-main .auth-card{max-width:none;padding-block:18px 0}
.auth-main .auth-card > .seg{margin-bottom:18px}
.auth-main .auth-head{padding-bottom:14px}
.auth-main .auth-head h1{font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.4}
.auth-methods{display:flex;gap:4px;padding:0;margin-bottom:20px;border-radius:0;background:none;border-bottom:1px solid var(--line)}
.auth-methods button{flex:none;min-height:46px;padding:0 14px;border-radius:0;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.auth-methods button.active{background:none;color:var(--text);box-shadow:none;border-bottom-color:var(--accent)}
.auth-main .auth-body .btn.primary[type=submit]{background:var(--accent);color:var(--on-accent)}
.auth-main .field input{min-height:50px;border-radius:14px;background:var(--bg);border:0;box-shadow:0 0 0 1px var(--line) inset}
.auth-main .field input:focus{box-shadow:0 0 0 1.5px var(--text) inset,0 0 0 4px rgba(15,92,86,.1);background:var(--surface);outline:0}
.auth-switch a{color:var(--accent-text)}
.auth-foot{position:absolute;bottom:28px;inset-inline-start:var(--gut);z-index:1;margin:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--faint)}
.auth-foot b{font-size:1.35rem;font-weight:800;color:var(--text)}
.auth-foot b span{color:var(--accent-text)}

/* ── صفحهٔ اول: هیروی روشن، تیتر درشت با زیرخط، کارت نمونهٔ کلاس ── */
body:not(.in-shell) > header{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.bar nav.links a{border-radius:999px}
.bar nav.links a.active{color:var(--text)}
.hero-b{padding-bottom:clamp(48px,7vw,96px)}
.hb-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,6vw,80px)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:none}
.hero-b h1{margin:0;font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1.2;font-weight:850}
.hero-b h1 > span{display:block}
.hero-b h1 .h1-mute{color:var(--accent-text)}
.hero-copy > p{margin:0;max-width:34rem;font-size:clamp(15px,1.3vw,17.5px);line-height:2;color:var(--muted)}
.hero-b .cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pill-go{gap:14px;padding-inline:24px 6px!important}
.go-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--text);transition:transform .3s var(--ease-quint)}
.go-dot .ico{width:17px;height:17px}
.pill-go:hover .go-dot{transform:translateX(-3px)}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:4px 0 0;font-size:13px;color:var(--muted)}
.hero-proof span{display:inline-flex;align-items:center;gap:6px}
.hero-proof span + span::before{content:"";width:1px;height:16px;margin-inline:14px;background:var(--line)}
.hero-proof .ico{width:15px;height:15px;color:var(--accent)}
.hero-b.anim .hero-copy > *{animation:hero-rise .9s var(--ease-quint) both}
.hero-b.anim .hero-copy > :nth-child(2){animation-delay:.1s}
.hero-b.anim .hero-copy > :nth-child(3){animation-delay:.22s}
.hero-b.anim .hero-copy > :nth-child(4){animation-delay:.34s}
.hero-b.anim .hero-copy > :nth-child(5){animation-delay:.46s}
.l-eye{color:var(--muted);font-weight:650}
.l-eye i{width:48px;background:var(--line)}
.l-title h2{font-weight:780}
.bento-card{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line);transition:transform .45s var(--ease-quint),box-shadow .45s var(--ease-quint)}
.bento-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift),0 0 0 1px var(--line-strong)}
.bento-card.b1{background:var(--stone);color:var(--on-stone)}
.bento-card.b1 p{color:var(--stone-mu)}
.bento-card.b4{background:var(--accent-soft)}
.bento-card .b-ic{background:var(--accent-soft);color:var(--accent-text);border-radius:12px}
.bento-card.b1 .b-ic{background:rgba(191,224,214,.14);color:var(--stone-hi)}
.cta-band{flex-direction:column;justify-content:center;text-align:center;padding:clamp(40px,7vw,88px) 24px;border-radius:0;background:none;color:var(--text);border-top:1px solid var(--line)}
.cta-band h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:820;line-height:1.3}
.cta-band p{color:var(--muted)}
footer{background:var(--surface-2);color:var(--muted);border-top:1px solid var(--line)}
footer .foot-col a{color:var(--text)}
footer .foot-about,footer .d{color:var(--muted)}
footer .foot-col h2,footer .foot-brand{color:var(--text)}

/* ── تبلت: منو کشویی ── */
@media (max-width:1023px){
  .shell{display:block}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);transform:translateX(105%);transition:transform .45s var(--ease-quint);visibility:hidden}
  .nav-open .side{transform:none;visibility:visible;box-shadow:-30px 0 60px -30px rgba(20,33,31,.4)}
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,33,31,.28);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .nav-open .scrim{opacity:1;visibility:visible}
  .menu-btn{display:inline-grid}
  .tb-search{max-width:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .kpi.hero{grid-column:span 2}
  .duo{grid-template-columns:1fr}
  .hb-in{grid-template-columns:1fr}
}
/* ── گوشی ── */
@media (max-width:759px){
  .topbar{height:60px;gap:4px;padding-inline:8px 10px}
  .crumb{display:none}
  .tb-search{margin:0;height:40px;padding:0 12px}
  .tb-bell,#theme{display:none}
  .content{padding-top:20px;padding-bottom:108px}
  .ph h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .sect-h{flex-wrap:wrap}
  .sect-h p{margin:0;text-align:start;flex-basis:100%}
  .kpi{padding:14px}
  .kpi b{font-size:24px}
  .auth-foot{display:none}
  .auth-split{padding-bottom:24px}
  #bnav:not([hidden]){height:62px;padding:5px;border-radius:22px;border:0;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-lift),0 0 0 1px var(--line)}
  #bnav a{min-height:0;border-radius:16px;font-size:10.5px;font-weight:650;color:var(--muted)}
  #bnav a.active{background:var(--text);color:var(--bg);font-weight:700}
  #bnav .bn-dot{background:var(--danger);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .ink-mark path,.hero-b.anim .hero-copy > *{animation:none!important}
  .side,.scrim,.kpi,.ccard,.bento-card{transition:none!important}
}

/* ════════════════════════════════════════════════════════════════
   «دفتر و دانجن»: همان کاغذ، جوهر و سبزآبی، ولی با حس یادگیری.
   کاغذ شطرنجی دفتر زیر صفحه، مسیر طبقه‌به‌طبقه برای جلسه‌ها، کارت‌های دفتری،
   یادداشت‌های چسبان و تختهٔ جوهری برای دعوت آخر.
   ════════════════════════════════════════════════════════════════ */
:root{--grid:color-mix(in srgb,var(--text) 11%,transparent)}
body.in-shell .sh-main{background-image:radial-gradient(circle at 1px 1px,var(--grid) 1.1px,transparent 0);background-size:24px 24px}

/* سرتیتر پنل: تراشه به‌جای خط رسمی */
.ph-meta{justify-content:flex-start;gap:8px;padding:0;margin-bottom:16px;border:0}
.ph-meta > span{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.sect-h{align-items:center;gap:12px;margin-top:30px;border-bottom:1.5px dashed var(--line-strong)}
.sect-h .n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent-text)}
.sect-h .n .ico{width:18px;height:18px}

/* مسیر دوره: هر جلسه یک ایستگاه؛ گذشته‌ها پر، جای فعلی جوهری، بقیه نقطه‌چین */
.trail-card{padding:22px 24px 20px}
.tr-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.tr-l{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:12px;font-weight:700}
.tr-l .ico{width:14px;height:14px}
.tr-head h2{margin:0;font-size:1.15rem;font-weight:800}
.tr-pct{margin-inline-start:auto;font-size:13px;color:var(--muted)}
.tr-pct b{color:var(--text);font-size:15px}
.trail{display:flex;list-style:none;margin:16px -6px 14px;padding:10px 6px 6px;overflow-x:auto;scrollbar-width:thin}
.tn{position:relative;flex:1 0 78px;display:flex;justify-content:center}
.tn::before{content:"";position:absolute;top:22px;inset-inline-start:50%;width:100%;border-top:3px dashed var(--line-strong)}
.tn:last-child::before{display:none}
.tn.done::before{border-top-style:solid;border-color:var(--accent)}
.tn a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 4px 2px;border-radius:12px;color:var(--muted);font-size:12px;font-weight:650;text-decoration:none}
.tn-c{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--line-strong) inset;color:var(--text);font-size:15px;font-weight:800;transition:transform .3s var(--ease-quint)}
.tn-c .ico{width:20px;height:20px}
.tn.done .tn-c{background:var(--accent);color:var(--on-accent);box-shadow:none}
.tn.now .tn-c{background:var(--stone);color:var(--on-stone);box-shadow:0 0 0 5px var(--accent-soft)}
.tn.now a{color:var(--accent-text);font-weight:800}
.tn a:hover .tn-c{transform:translateY(-3px)}
.trail-card .go-on{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:16px 20px;border-radius:16px;box-shadow:none}
.trail-card .go-t{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem)}
.trail-card .go-on .btn{grid-row:1 / span 2;grid-column:2;margin:0}

/* صفحهٔ اول: کاغذ شطرنجی پشت هیرو که لبه‌هایش محو می‌شود */
.hero-b{position:relative;isolation:isolate}
.hero-b::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 1px 1px,var(--grid) 1.2px,transparent 0);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%)}
.hero-proof{gap:8px}
.hero-proof span{padding:6px 12px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;color:var(--ink-2);font-weight:600}
.hero-proof span + span::before{display:none}

/* نقشهٔ یک جلسه: چهار طبقه که با راه نقطه‌چین به هم وصل‌اند */
.quest{display:grid;padding:18px 20px 22px;border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lift),0 0 0 1px var(--line)}
.q-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:12px;border-bottom:1.5px dashed var(--line)}
.q-tag{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:750}
.q-tag .ico{width:16px;height:16px;color:var(--accent)}
.q-floor{font-size:12px;font-weight:650;color:var(--muted)}
.q-path,.q-steps{grid-area:2 / 1}
.q-path{display:block;width:100%;height:auto;aspect-ratio:400 / 440;margin-top:8px}
.q-path path{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.q-path path.on{stroke:var(--accent);stroke-dasharray:none}
.q-steps{position:relative;list-style:none;margin:8px 0 0;padding:0}
.q-step{position:absolute;display:flex;align-items:center;gap:12px;max-width:62%}
.q-step.s1{top:calc(9% - 24px);right:calc(27.5% - 24px)}
.q-step.s2{top:calc(34% - 24px);left:calc(27.5% - 24px);flex-direction:row-reverse;text-align:end}
.q-step.s3{top:calc(60% - 24px);right:calc(27.5% - 24px)}
.q-step.s4{top:calc(87.5% - 24px);left:calc(27.5% - 24px);flex-direction:row-reverse;text-align:end}
.q-n{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--line-strong) inset;font-size:17px;font-weight:800}
.q-n .ico{width:22px;height:22px}
.q-step.done .q-n{background:var(--accent);color:var(--on-accent);box-shadow:none}
.q-step.now .q-n{background:var(--stone);color:var(--on-stone);box-shadow:0 0 0 6px var(--accent-soft);animation:q-pulse 2.4s ease-in-out infinite}
@keyframes q-pulse{50%{box-shadow:0 0 0 11px var(--accent-soft)}}
.q-t{display:flex;flex-direction:column;line-height:1.55}
.q-t small{font-size:11px;font-weight:700;color:var(--accent-text)}
.q-t b{font-size:15.5px;font-weight:800}
.q-t > span{font-size:12.5px;color:var(--muted)}
.q-you{position:absolute;top:-34px;left:-8px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:750;font-style:normal;white-space:nowrap}
.q-you::after{content:"";position:absolute;top:100%;left:26px;border:6px solid transparent;border-top-color:var(--accent)}
.hero-b.anim .quest{animation:hero-rise 1.1s .3s var(--ease-quint) both}

/* برچسب بخش‌ها: تراشهٔ سبزآبی با آیکون */
.l-eye{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:7px;padding:5px 13px 5px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:12.5px;font-weight:700}
.l-eye .ico{width:15px;height:15px}

/* ویژگی‌ها: کارت دفتر خط‌دار با خط حاشیه؛ اولی تختهٔ جوهری */
.bento-card{padding-inline-start:44px;background:linear-gradient(to left,transparent 27px,color-mix(in srgb,var(--danger) 35%,transparent) 27px 28.5px,transparent 28.5px),repeating-linear-gradient(to bottom,transparent 0 29px,var(--line-2) 29px 30px),var(--surface)}
.bento-card.b4{background:linear-gradient(to left,transparent 27px,color-mix(in srgb,var(--danger) 35%,transparent) 27px 28.5px,transparent 28.5px),repeating-linear-gradient(to bottom,transparent 0 29px,var(--line-2) 29px 30px),var(--accent-soft)}
.bento-card.b1{padding-inline-start:24px;background:radial-gradient(circle at 1px 1px,rgba(244,239,230,.07) 1.1px,transparent 0) 0 0 / 22px 22px,var(--stone)}

/* چرا دانجن: یادداشت‌های چسبان با نوار چسب */
.why{gap:26px;padding-top:12px}
.why-card{position:relative;padding:28px 22px 22px;border:0;border-radius:6px 6px 22px 6px;box-shadow:0 18px 30px -22px rgba(20,33,31,.55);transform:rotate(-1.3deg);transition:transform .4s var(--ease-quint)}
.why-card:nth-child(4n+1){background:var(--warn-soft)}
.why-card:nth-child(4n+2){background:var(--accent-soft);transform:rotate(1.1deg)}
.why-card:nth-child(4n+3){background:var(--danger-soft)}
.why-card:nth-child(4n+4){background:var(--surface-2);transform:rotate(.9deg)}
.why-card:hover{transform:rotate(0) translateY(-3px)}
.why-card::before{content:"";position:absolute;top:-10px;left:50%;width:72px;height:22px;margin-left:-36px;background:color-mix(in srgb,var(--surface) 70%,transparent);box-shadow:0 0 0 1px var(--line-2);transform:rotate(-3deg)}
.why-n{font-size:2rem;font-weight:850;color:var(--accent-text)}
.why-card p{color:var(--ink-2)}

/* دعوت آخر: تختهٔ جوهری با کاغذ نقطه‌دار */
.cta-band{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:32px;background:var(--stone);color:var(--on-stone)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 1px 1px,rgba(244,239,230,.08) 1.1px,transparent 0);background-size:24px 24px}
.cta-band h2{color:var(--on-stone)}
.cta-band p{color:var(--stone-mu)}
.cta-band .btn.primary{background:#F4EFE6;color:#14211F;border-color:#F4EFE6}
.cta-band .go-dot{background:#14211F;color:#F4EFE6}

/* جلدها: کاغذ شطرنجی زیر خط نمودار */
:is(.cover-box,.thumb,.ccard-art){background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px)!important;background-size:20px 20px!important}
:is(.cover-box,.thumb,.ccard-art) .spark .g{display:none}

@media (max-width:1023px){
  .quest{max-width:560px;width:100%;margin-inline:auto}
}
@media (max-width:759px){
  .trail-card{padding:18px 16px}
  .trail-card .go-on{grid-template-columns:1fr;row-gap:4px}
  .trail-card .go-on .btn{grid-row:auto;grid-column:auto;justify-self:start;margin-top:8px}
  .q-path{display:none}
  .q-steps{display:grid;gap:18px;margin-top:16px}
  .q-steps .q-step:nth-child(n){position:relative;inset:auto;flex-direction:row;text-align:start;max-width:none}
  .q-step:not(:last-child)::after{content:"";position:absolute;top:52px;bottom:-16px;inset-inline-start:22.5px;border-inline-start:3px dashed var(--line-strong)}
  .q-step.done::after{border-inline-start-style:solid;border-color:var(--accent)}
  .q-you{position:static;margin-inline-start:auto;align-self:center}
  .q-you::after{display:none}
  .why-card,.why-card:nth-child(n){transform:none}
}
@media (prefers-reduced-motion:reduce){
  .q-step.now .q-n,.hero-b.anim .quest{animation:none!important}
  .why-card,.tn-c{transition:none!important}
}

/* خط نمودار وقتی به دید می‌آید از چپ کشیده می‌شود، مثل draw-path طرح B؛ با برش، چون خط‌ها کش می‌آیند و خط‌چین با پهنای ثابت جور نیست */
.draw-path{clip-path:inset(-20% 100% -20% -2%);transition:clip-path 1.9s cubic-bezier(.65,0,.35,1) .15s}
.in .draw-path{clip-path:inset(-20% -2% -20% -2%)}
.auth-bg .draw-path{transition-duration:3.2s}
.spark .a{opacity:0;transition:opacity .9s .6s}
.spark.in .a{opacity:1}
@media (prefers-reduced-motion:reduce){
  .draw-path,.in .draw-path{clip-path:none;transition:none}
  .spark .a{opacity:1;transition:none}
}

/* ════ خط داستان صفحهٔ اول (storyline طرح B) ════ */
.landing{position:relative}
.landing > section{position:relative;z-index:1}
.story{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.story svg{position:absolute;inset:0;overflow:visible}
.story .ghost{fill:none;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.6}
.story .ink{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story .head{fill:var(--accent)}
.story .halo{fill:var(--accent);opacity:.14}
.anno{position:absolute;width:0;height:0}
.anno .dot{position:absolute;width:13px;height:13px;margin:-6.5px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);transform:scale(.3);opacity:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.anno .lab{position:absolute;top:16px;left:0;white-space:nowrap;text-align:center;font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--surface);box-shadow:0 0 0 1px var(--line),0 8px 18px -12px rgba(20,33,31,.4);border-radius:12px;padding:6px 11px;opacity:0;transform:translate(-50%,6px);transition:opacity .5s .1s,transform .6s .1s var(--ease-quint)}
.anno .lab b{display:block;font-size:14px;font-weight:760;color:var(--text)}
.anno.chipL .lab,.anno.chipR .lab{top:-14px;transform:translateY(6px);text-align:start;border-radius:999px;padding:5px 11px;line-height:1.3}
.anno.chipL .lab b,.anno.chipR .lab b{display:inline;font-size:12.5px;margin-inline-end:6px}
.anno.chipL .lab{left:14px;right:auto}
.anno.chipR .lab{right:14px;left:auto}
.anno.on .dot{transform:none;opacity:1}
.anno.on .lab{opacity:1;transform:translate(-50%,0)}
.anno.chipL.on .lab,.anno.chipR.on .lab{transform:none}
.ln{display:block;width:0;height:0;pointer-events:none}
.ln-end{margin:0 auto 76px}
@media (prefers-reduced-motion:reduce){
  .anno .dot,.anno .lab{transition:none}
}

/* ════ هماهنگی اجزا با کارت‌ها، دکمه‌ها و فیلدهای طرح B ════
   قاعده‌ها: هر دکمه در هر اندازه قرصی است؛ هر فیلد گوشهٔ ۱۴ و حلقهٔ داخلی دارد؛
   کارت داخل کارت قاب نمی‌گیرد و بلوک کاغذی بی‌قاب می‌شود. */
.btn,.btn.sm,.btn.lg,.btn.icon,.cal-nav button{border-radius:999px}
.ver-pick,.qb-filter input,.mentor-add input,.field textarea.code-input,#wl-form textarea,.side-sub .side-ver select{border-radius:14px}

/* بلوک تکی (تمرین، آیتم جلسه): همان کارت سایه‌دار؛ داخل کارت: بلوک کاغذی بی‌قاب */
.item{border:0;box-shadow:var(--shadow),0 0 0 1px var(--line)}
:is(.panel,.card,.card2) .item{background:var(--bg);box-shadow:none}
.ver-row.ver-running{border-color:transparent}
.ver-row.ver-draft{outline:1.5px dashed var(--line-strong);outline-offset:-1.5px}

/* لیدربورد: ردیف‌ها بلوک کاغذی بی‌قاب؛ سه نفر اول فقط رنگ ملایم، ردیف خودت حلقهٔ سبزآبی */
.lb-table{gap:6px}
.lb-row{border:0;border-radius:14px;background:var(--bg);box-shadow:none}
.lb-row.top1,.lb-row.top2,.lb-row.top3{border:0}
.lb-row.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.lb-row:not(.top1):not(.top2):not(.top3).me{background:var(--accent-soft)}

.chat-box{border-radius:16px}
.rv-grid button{border-radius:12px}

/* صفحهٔ جلسه داخل پنل: نوار بالا و سرفصل کارت‌اند، نه نوار تخت تمام‌عرض */
body.in-shell .player{min-height:0;gap:18px}
body.in-shell .player-bar{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:10px 18px}
body.in-shell .player-body{gap:18px;align-items:flex-start}
body.in-shell .player-main{padding:8px 4px 40px}
body.in-shell .outline{border:0;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line);overflow:hidden}
.outline .lesson:last-child{border-bottom:0}
@media (min-width:1024px){body.in-shell .outline{position:sticky;top:84px}}
.vid{background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line)}
a.vid.link:hover{box-shadow:var(--shadow-lift),0 0 0 1px var(--line-strong)}

/* صفحهٔ دوره: کارت ثبت‌نام، سرفصل و «قدم بعدی» همان کارت ۲۰ با سایه */
.buy-card,.outline-list,.course-head{border:0;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.next-one{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:14px 18px}
.next-one::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.next-one:hover{box-shadow:var(--shadow-lift),0 0 0 1px var(--line-strong)}

/* لیدربورد تمام عرض کارتش */
.lb-table{max-width:none}

/* فیلدها: همه یک‌شکل — سطح روشن با حاشیهٔ باریک، گوشهٔ ۱۴ */
.qb-filter input,.mentor-add input,.list-search{border:1px solid var(--line-strong);background:var(--surface);box-shadow:none}
.chat-box{border:1px solid var(--line-strong);background:var(--surface);box-shadow:none}
.chat-box:focus-within,.list-search:focus-within,.qb-filter input:focus,.mentor-add input:focus{border-color:var(--text);box-shadow:0 0 0 4px rgba(15,92,86,.1)}
.cb-bar{padding:8px 10px 10px}
.q-head .list-search{width:100%}
.field > span.d{font-size:12.5px;font-weight:400;color:var(--muted)}
.field textarea:not(:focus){border-color:var(--line-strong)}

/* دکمه‌های متنی کنار قرص‌ها: قرص روشن با حلقه، تا در یک ردیف یک‌جور باشند */
.btn.ghost.sm:not(.icon){box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost.sm:not(.icon):hover{box-shadow:0 0 0 1px var(--text) inset;background:var(--surface)}
.seg span{white-space:nowrap}

/* زنگ: عدد کنار آیکون، نه رویش */
.tb-bell i{top:4px;inset-inline-end:3px;box-shadow:0 0 0 2px var(--bg)}

/* ویژگی سبزآبی صفحهٔ اول: خانهٔ آیکون روی زمینهٔ هم‌رنگ گم نشود */
.bento-card.b4 .b-ic{background:var(--surface)}

@media (max-width:1023px){
  .kpis .kpi.hero{grid-column:auto}
}
@media (max-width:759px){
  /* متن ردیف جای خودش را دارد و دکمه‌ها به خط بعد می‌روند، نه اینکه متن له شود */
  :is(.row,.assign-head) > [style*="flex:1"]{flex:1 1 200px!important;min-width:0}
  .q-you{margin-inline-start:6px}
}
/* صافی ستون باریک تصحیح: اگر جا نشد خوش‌فرم به خط بعد برود */
.rv-side .seg{border-radius:18px}
.rv-side .seg label{flex:1 1 auto!important}
.rv-side .seg span{padding:7px 10px;text-align:center;font-size:12.5px}

/* منوی بازشو داخل کارت: وقتی باز است کارت لبه‌هایش را نمی‌بُرد و منو روی ردیف‌های بعد می‌نشیند */
:is(.panel,.card,.card2):has(.row-more[open],.step-more[open]){overflow:visible;position:relative;z-index:6}

/* امتیاز دستی در پنل مدرس */
.pts-give h2 .ico{width:20px;height:20px;color:var(--accent);vertical-align:-3px;margin-inline-end:6px}
.pts-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pts-quick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.pts-quick .btn{min-width:56px;font-variant-numeric:tabular-nums}
.pts-row{align-items:center}
.pts-total{min-width:48px;text-align:center;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:759px){.pts-grid{grid-template-columns:1fr}}

/* عکس و فیلم صورت تمرین */
.step-media{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.step-media label.btn{position:relative;cursor:pointer}
.step-media label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.step-media-list{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.step-media-list:empty{display:none}
.pm-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:10px 0}
.pm-imgs a{display:grid;place-items:center;border-radius:14px;overflow:hidden;background:var(--surface-2);box-shadow:0 0 0 1px var(--line)}
.pm-imgs img{display:block;max-width:100%;max-height:70vh;height:auto}
.pm-video{display:block;width:100%;max-height:70vh;margin:10px 0;border-radius:14px;background:#000}
.att-edit{margin:-2px 0 10px;padding:12px 14px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px var(--line) inset}
.att-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.att-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:3px 3px 3px 10px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13px}
.att-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.att-chip .ico{width:16px;height:16px;color:var(--accent);flex:none}
.att-chip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.att-chip .ib{width:30px;height:30px}
.att-edit .err{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px}