/* ============================================================
   دفتر کلاس — لایهٔ ظاهری تازه
   روی app.css سوار می‌شود و رنگ/شکل را عوض می‌کند.
   ============================================================ */

:root{
  --brand:#2f3fd4;          /* آبی اصلی */
  --brand-ink:#1f2aa8;
  --brand-2:#6b63ea;        /* بنفش کناری */
  --brand-soft:#e8ebfd;
  --side-1:#4b44d6;         /* نوار کناری */
  --side-2:#5d51e4;
  --paper:#f6f7fc;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --ink:#1b2340;
  --muted:#6b7794;
  --faint:#95a0b8;
  --line:#e6e9f3;
  --line-soft:#eef1f8;
  --ok:#22a06b;      --ok-soft:#dcf5ea;
  --bad:#e05263;     --bad-soft:#fde8ec;
  --warn:#e2a032;    --warn-soft:#fdf1da;
  --slate:#6b7794;   --slate-soft:#eceff6;
  --accent:#e2a032;
  --violet:#7c6bf5;  --violet-soft:#ece9fe;
  --pink:#f2617a;    --pink-soft:#ffe3e9;
  --mint:#2fb98a;    --mint-soft:#d9f5ea;
  --sun:#e8a92c;     --sun-soft:#fdf0d2;
  --shadow:0 1px 2px rgba(27,35,64,.04), 0 10px 30px -14px rgba(27,35,64,.18);
  --shadow-lg:0 20px 50px -22px rgba(27,35,64,.35);
  --r:16px;
  /* گرادیان کارت خوش‌آمد — تم‌ها این سه را عوض می‌کنند */
  --wc-g1:#2f45c3; --wc-g2:#4654d4; --wc-g3:#6d65df;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#8aa2f5; --brand-ink:#adbdfb; --brand-2:#9b93f4; --brand-soft:#232a52;
    --side-1:#2a2670; --side-2:#332c85;
    --paper:#0e1120; --surface:#171b2f; --surface-2:#1d2238;
    --ink:#e8ecf7; --muted:#9fabc6; --faint:#7c88a5;
    --line:#2a3050; --line-soft:#232842;
    --ok:#4cc492; --ok-soft:#14321f; --bad:#ec7f8d; --bad-soft:#3a1c22;
    --warn:#e8b45c; --warn-soft:#352a13; --slate:#9fabc6; --slate-soft:#242a44;
    --violet:#9b8cf8; --violet-soft:#272357; --pink:#f6889b; --pink-soft:#3d2029;
    --mint:#4cc492; --mint-soft:#123328; --sun:#e8b45c; --sun-soft:#352a13;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    --shadow-lg:0 20px 50px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --brand:#8aa2f5; --brand-ink:#adbdfb; --brand-2:#9b93f4; --brand-soft:#232a52;
  --side-1:#2a2670; --side-2:#332c85;
  --paper:#0e1120; --surface:#171b2f; --surface-2:#1d2238;
  --ink:#e8ecf7; --muted:#9fabc6; --faint:#7c88a5;
  --line:#2a3050; --line-soft:#232842;
  --ok:#4cc492; --ok-soft:#14321f; --bad:#ec7f8d; --bad-soft:#3a1c22;
  --warn:#e8b45c; --warn-soft:#352a13; --slate:#9fabc6; --slate-soft:#242a44;
  --violet:#9b8cf8; --violet-soft:#272357; --pink:#f6889b; --pink-soft:#3d2029;
  --mint:#4cc492; --mint-soft:#123328; --sun:#e8b45c; --sun-soft:#352a13;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-lg:0 20px 50px -22px rgba(0,0,0,.9);
}

body{background:var(--paper)}
[hidden]{display:none!important}
body.auth{background:linear-gradient(140deg,#2f3fd4 0%,#3b40d8 45%,#4a3fd0 100%); background-attachment:fixed}

/* ===================== صفحهٔ ورود ===================== */
body.auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:36px;
  background:
    radial-gradient(circle at 5% 4%,   #ffd36f 0 12%,   transparent 12.2%),
    radial-gradient(circle at 93% 18%, #8cdeb0 0 5%,    transparent 5.2%),
    radial-gradient(circle at 96% 94%, #ff7188 0 13%,   transparent 13.2%),
    radial-gradient(circle at 67% 0%,  #9e96f3 0 12%,   transparent 12.2%),
    #394dc4;
  background-attachment:fixed;
}
.login-wrapper{
  width:min(1180px,100%); direction:ltr; display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1fr);
  overflow:hidden; border-radius:22px; background:#fff;
  box-shadow:0 24px 70px rgba(26,39,104,.18);
}
/* پنل تصویر (سمت چپ) — نسبت تصویر تا هیچ‌کدام از دو متن بریده نشود */
.visual-panel{position:relative; background:#2d3ea7; aspect-ratio:800/1162; overflow:hidden}
.visual-panel img{width:100%; height:100%; display:block; object-fit:cover; object-position:center}

/* پنل فرم (سمت راست) */
.form-panel{
  display:flex; align-items:center; justify-content:center;
  padding:56px 62px; background:#fff; direction:rtl;
}
.form-content{width:100%; max-width:420px}
.form-content .brand{margin-bottom:34px; text-align:center}
.form-content .brand h1{color:var(--brand); font-size:30px; font-weight:800; line-height:1.5; margin-bottom:8px}
.form-content .brand p{color:var(--muted); font-size:14.5px; font-weight:500; margin:0}

.field-group{margin-bottom:22px}
.field-label{display:block; margin-bottom:10px; color:#66708e; font-size:13.5px; font-weight:600}

.role-options{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px}
.role-option{position:relative}
.role-option input{position:absolute; opacity:0; pointer-events:none}
.role-option label{
  min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid var(--line); border-radius:14px; color:#7c86a2; cursor:pointer;
  transition:.2s ease; font-size:14px; font-weight:600; background:#fff;
}
.role-option label svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7}
.role-option label:hover{border-color:#b9c1e8}
.role-option input:checked + label{
  color:var(--brand); border-color:var(--brand); background:#f4f6ff;
  box-shadow:0 7px 18px rgba(48,75,209,.1);
}
.role-option .tick{
  position:absolute; top:-9px; right:-9px; z-index:2; width:23px; height:23px; border-radius:50%;
  background:var(--brand); color:#fff; display:none; place-items:center; font-size:12px;
  box-shadow:0 3px 8px rgba(48,75,209,.35);
}
.role-option input:checked ~ .tick{display:grid}

.input-wrapper{position:relative}
.input-control{
  width:100%; height:58px; padding:0 18px; border:1px solid var(--line); border-radius:13px;
  outline:none; color:var(--ink); background:#fafbfe; font-family:inherit; font-size:15px; transition:.2s ease;
}
.input-control::placeholder{color:#a2aac0; font-size:14px}
.input-control:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(48,75,209,.1)}
.password-input{padding-left:52px}
.password-toggle{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#8992ad; cursor:pointer; padding:4px; line-height:0;
}
.password-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}

.remember-row{
  display:flex; align-items:center; gap:9px; margin:2px 0 26px;
  color:#69738f; font-size:14px; cursor:pointer; user-select:none;
}
.remember-row input{width:18px; height:18px; accent-color:var(--brand); cursor:pointer}

.submit-button{
  width:100%; height:60px; border:0; border-radius:14px; color:#fff;
  background:linear-gradient(135deg,#304bd1,#3c54dd);
  box-shadow:0 13px 24px rgba(48,75,209,.25);
  font-family:inherit; font-size:17px; font-weight:700; cursor:pointer; transition:.2s ease;
}
.submit-button:hover{background:linear-gradient(135deg,#263cae,#304bd1); transform:translateY(-2px);
  box-shadow:0 17px 28px rgba(48,75,209,.3)}
.submit-button:active{transform:translateY(0)}
.login-note{margin-top:16px; text-align:center; color:var(--faint); font-size:12.5px}
.login-err{
  background:#fde8ec; color:#b3323f; border-radius:11px; padding:11px 14px;
  font-size:13.5px; font-weight:600; margin-bottom:20px; text-align:center;
}

@media (max-width:900px){
  body.auth{padding:18px}
  .login-wrapper{grid-template-columns:1fr; max-width:600px}
  .visual-panel{aspect-ratio:auto; height:300px; order:2}
  .visual-panel img{object-fit:contain}
  .form-panel{padding:44px 30px; order:1}
}
@media (max-width:500px){
  body.auth{padding:0}
  .login-wrapper{min-height:100vh; border-radius:0}
  .form-panel{padding:36px 20px}
  .visual-panel{height:230px}
  .form-content .brand h1{font-size:26px}
}

/* ===================== پوستهٔ برنامه ===================== */
.appshell{display:grid; grid-template-columns:232px 1fr; min-height:100vh}
@media (max-width:980px){ .appshell{grid-template-columns:1fr} }

.side{
  background:linear-gradient(180deg,var(--side-1) 0%,var(--side-2) 100%);
  color:#fff; padding:18px 14px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; align-self:stretch; min-height:100vh;
}
@media (max-width:980px){
  .side{position:static; height:auto; flex-direction:row; overflow-x:auto; align-items:center; padding:10px}
}
.side .logo{
  width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;margin:2px auto 18px;flex:none;
}
.side .logo svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7}
@media (max-width:980px){ .side .logo{margin:0 0 0 6px} }
.sidebtn{
  display:flex; align-items:center; gap:11px; width:100%; text-align:right;
  background:transparent; border:0; border-radius:12px; padding:11px 13px;
  color:rgba(255,255,255,.82); font:inherit; font-size:14px; font-weight:600;
  white-space:nowrap; transition:background .15s, color .15s;
}
.sidebtn:hover{background:rgba(255,255,255,.12); color:#fff}
.sidebtn[aria-current="true"]{background:rgba(255,255,255,.2); color:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.sidebtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.sidebtn .n{
  margin-inline-start:auto; background:#ffc93c; color:#3a2c00; border-radius:999px;
  min-width:20px; text-align:center; font-size:11px; font-weight:800; padding:1px 6px;
}
.side .spacer{flex:1}
@media (max-width:980px){ .side .spacer{display:none} }

.maincol{min-width:0; display:flex; flex-direction:column}
.appbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:30;
}
.appbar .course{display:flex; align-items:center; gap:11px}
.appbar .course .crs-ic{
  width:44px; height:44px; padding:0; border:0; border-radius:13px;
  background:var(--brand-soft); display:grid; place-items:center; flex:none;
}
.appbar .course .crs-ic svg{
  display:block; width:22px; height:22px; stroke:var(--brand); fill:none; stroke-width:1.7;
}
.appbar .course .t{font-size:16px;font-weight:700;color:var(--brand);line-height:1.35}
.appbar .course .s{font-size:12px;color:var(--muted)}
.appbar .tools{margin-inline-start:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tool{
  background:transparent; border:0; border-radius:11px; padding:7px 10px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font:inherit; font-size:11px; font-weight:600; position:relative;
}
.tool:hover{background:var(--surface-2); color:var(--ink)}
.tool svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.tool .dot{
  position:absolute; top:2px; inset-inline-end:4px; min-width:17px; height:17px;
  border-radius:999px; background:var(--pink); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center; padding:0 4px;
}
.who{display:flex; align-items:center; gap:10px; padding-inline-start:14px; border-inline-start:1px solid var(--line)}
.who .av{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff; font-weight:700; font-size:15px;
}
.who .nm{font-size:13.5px;font-weight:700;line-height:1.3}
.who .no{font-size:11.5px;color:var(--faint)}
@media (max-width:640px){ .who .meta{display:none} .appbar{padding:10px 14px} }

.page{padding:24px; display:flex; flex-direction:column; gap:22px; width:100%;
      max-width:1680px; margin-inline:auto}
@media (max-width:640px){ .page{padding:14px} }

/* هر نما یک div است؛ فاصلهٔ کارت‌ها از همین‌جا می‌آید */
#view > div{display:flex; flex-direction:column; gap:20px}
.panel + .panel{margin-top:0}
.acc + .acc{margin-top:0}
.viewhead{margin-bottom:0}
.notif{margin-bottom:0}
#view > div > .note{margin:0}

/* ===================== کارت خوش‌آمد ===================== */
.hero{
  background:linear-gradient(110deg,var(--violet-soft) 0%,var(--brand-soft) 100%);
  border:1px solid color-mix(in srgb,var(--brand) 14%,transparent);
  border-radius:20px; padding:26px 28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.hero .txt{flex:1; min-width:220px}
.hero h2{font-size:21px; margin-bottom:6px}
.hero p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.9}
.hero .art{flex:none; width:150px}
.hero .art svg{width:100%;height:auto}
@media (max-width:760px){ .hero .art{display:none} }
.termchip{
  flex:none; background:linear-gradient(140deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff; border-radius:16px; padding:14px 18px;
  display:flex; align-items:center; gap:11px; box-shadow:0 14px 30px -14px rgba(47,63,212,.7);
}
.termchip .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.termchip .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8}
.termchip .t{font-size:14.5px;font-weight:700}
.termchip .s{font-size:11.5px;opacity:.85}

/* ===================== کاشی‌های آمار ===================== */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; display:flex; align-items:center; gap:15px; box-shadow:var(--shadow);
}
.stat .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.stat .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.stat .k{font-size:12.5px;color:var(--muted);font-weight:600}
.stat .v{font-size:25px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.stat .v small{font-size:12.5px;font-weight:600;color:var(--faint)}
.stat .m{font-size:11.5px;color:var(--faint)}
.ic-violet{background:var(--violet-soft); color:var(--violet)}
.ic-mint{background:var(--mint-soft); color:var(--mint)}
.ic-sun{background:var(--sun-soft); color:var(--sun)}
.ic-pink{background:var(--pink-soft); color:var(--pink)}
.stat.alert{border-color:color-mix(in srgb,var(--bad) 45%,transparent); background:var(--bad-soft)}

/* ===================== شبکهٔ دو ستونه ===================== */
.duo{display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:start}
@media (max-width:900px){ .duo{grid-template-columns:1fr} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{padding:14px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.card-h h3{font-size:14.5px; display:flex; align-items:center; gap:8px}
.card-h h3 .badge-ic{
  width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none;
}
.card-h h3 .badge-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.card-h .grow{margin-inline-start:auto}
.card-b{padding:18px 20px}
.card-b.flush{padding:0}
.card-f{padding:11px 18px; border-top:1px solid var(--line-soft)}
.card-f a, .linkbtn{
  background:none;border:0;color:var(--brand);font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;padding:0;text-decoration:none;
}
.card-f a:hover, .linkbtn:hover{text-decoration:underline}

.searchbox{position:relative; flex:1; min-width:150px; max-width:280px}
.searchbox input{
  width:100%; border:1px solid var(--line); background:var(--surface-2); border-radius:10px;
  padding:8px 34px 8px 12px; font:inherit; font-size:12.5px;
}
.searchbox input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.searchbox svg{position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:2}

/* فهرست تکالیف پیش‌رو */
.uplist{display:flex; flex-direction:column}
.upitem{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap}
.upitem:last-child{border-bottom:0}
.upitem .info{flex:1; min-width:170px}
.upitem .ttl{font-weight:700; font-size:13.8px}
.upitem .due{font-size:11.5px; margin-top:3px}
.upitem .due.soon{color:var(--pink)} .upitem .due.ok{color:var(--muted)} .upitem .due.gone{color:var(--faint)}
.upitem .prog{width:130px; flex:none}
.upitem .prog .pct{font-size:11.5px; color:var(--muted); text-align:center; margin-bottom:4px; font-variant-numeric:tabular-nums}
.track{height:7px; border-radius:99px; background:var(--line-soft); overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:var(--mint)}
.track.warn i{background:var(--sun)} .track.bad i{background:var(--pink)} .track.done i{background:var(--brand)}
.tagchip{
  flex:none; border-radius:9px; padding:5px 11px; font-size:11.5px; font-weight:700; white-space:nowrap;
}
.tag-new{background:var(--slate-soft); color:var(--slate)}
.tag-doing{background:var(--sun-soft); color:#a3721a}
.tag-done{background:var(--mint-soft); color:var(--mint)}
.tag-late{background:var(--pink-soft); color:var(--pink)}

/* دونات حضور */
.donutwrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center}
.donut{position:relative; width:168px; height:168px; flex:none}
.donut svg{transform:rotate(-90deg)}
.donut .mid{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; line-height:1.15;
}
.donut .mid b{display:block; font-size:22px; font-weight:800; line-height:1.1}
.donut .mid span{font-size:11.5px; color:var(--muted)}
.legend{flex:1; min-width:150px; display:flex; flex-direction:column; gap:9px}
.legend .row2{display:flex; align-items:center; gap:9px; font-size:13px}
.legend .row2 i{width:9px;height:9px;border-radius:50%;flex:none}
.legend .row2 .lbl{flex:1}
.legend .row2 .val{color:var(--muted); font-size:12.5px}
.legend .tot{
  margin-top:4px; background:var(--surface-2); border-radius:11px; padding:10px 13px;
  display:flex; justify-content:space-between; font-size:12.5px; font-weight:600;
}

/* جدول نمرات */
.gtable{width:100%; border-collapse:collapse; font-size:13px}
.gtable thead th{
  background:var(--surface-2); color:var(--muted); font-size:11.5px; font-weight:700;
  padding:10px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line);
}
.gtable td{padding:11px 12px; border-bottom:1px solid var(--line-soft)}
.gtable tbody tr:last-child td{border-bottom:0}
.gtable tbody tr:hover{background:var(--surface-2)}
.gtable .c{text-align:center; font-variant-numeric:tabular-nums}

/* دایره‌های تزئینی گوشهٔ صفحه */
.decor{position:fixed; pointer-events:none; z-index:0; border-radius:50%; opacity:.5}
.decor.d1{width:130px;height:130px;background:var(--sun-soft);bottom:22%;left:-50px}
.decor.d2{width:190px;height:190px;background:var(--pink-soft);bottom:-70px;left:4%}
@media (max-width:980px){ .decor{display:none} }
.page > *{position:relative; z-index:1}

/* شمارندهٔ خنثی در منوی استاد (زرد فقط برای اعلان تکلیف تازهٔ دانشجو) */
.sidebtn .n.count{background:rgba(255,255,255,.22); color:#fff; font-weight:700}

/* ============================================================
   کارت خوش‌آمدگویی پنل دانشجو
   ساختار و تصویرِ CSS از خود کاربر؛ انتخابگرها زیر .welcome-card
   محدود شده‌اند تا با کلاس‌های سامانه (مثل .bar) تداخل نکنند.
   ============================================================ */
.welcome-card{
  --wc-blue:#344bd2; --wc-purple:#716be8; --wc-mint:#a9ead0;
  --wc-yellow:#ffd66f; --wc-coral:#ff8492;
  position:relative; min-height:176px; display:flex; align-items:center;
  gap:30px; overflow:hidden; padding:26px 34px; border-radius:20px; color:#fff;
  background:
    radial-gradient(ellipse 60% 120% at 12% 0%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(ellipse 50% 100% at 95% 100%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(115deg, var(--wc-g1) 0%, var(--wc-g2) 52%, var(--wc-g3) 100%);
  box-shadow:0 14px 34px -14px rgba(52,75,210,.45);
}
.welcome-content{position:relative; z-index:3; max-width:560px; flex:none}
.welcome-card h1{
  margin:0 0 7px; color:#fff; font-size:clamp(21px,2.1vw,28px);
  font-weight:800; line-height:1.45; letter-spacing:-.01em;
}
.welcome-card .wave{display:inline-block; margin-right:4px; font-size:22px; animation:kelas-waving 2.4s infinite}
.welcome-card p{max-width:520px; margin:0; color:rgba(255,255,255,.84); font-size:13.5px; line-height:1.95}
.welcome-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:12px;
  color:rgba(255,255,255,.7); font-size:11.5px;
}
.welcome-meta .meta-dot{width:4px; height:4px; border-radius:50%; background:var(--wc-yellow)}
.welcome-button{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:9px 16px;
  border:0; border-radius:10px; color:#273aa4; background:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:.2s ease;
}
.welcome-button span{font-size:16px; line-height:1}
.welcome-button:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18)}

/* --- تصویر ساخته‌شده با CSS ---
   در فضای باقی‌ماندهٔ کارت وسط‌چین می‌شود تا در نمایشگر پهن،
   بین متن و تصویر حفرهٔ خالی نیفتد. */
.welcome-illustration{
  flex:1; min-width:270px; display:flex; align-items:center; justify-content:center;
  direction:ltr; align-self:stretch;
}
.wi-stage{
  position:relative; width:390px; height:235px; flex:none;
  transform:scale(.66); transform-origin:center; margin:-40px -66px;
}
.wi-stage .decor-circle{position:absolute; border-radius:50%; opacity:.85}
.wi-stage .decor-circle-one{top:13px; right:30px; width:85px; height:85px; background:var(--wc-mint)}
.wi-stage .decor-circle-two{right:220px; bottom:8px; width:52px; height:52px; background:var(--wc-coral)}

.wi-stage .calculator{
  position:absolute; z-index:2; right:35px; bottom:20px; width:112px; height:162px;
  padding:12px; border-radius:17px; transform:rotate(-11deg);
  background:#f8fbff; box-shadow:0 14px 22px rgba(21,32,119,.3);
}
.wi-stage .calculator-top{width:28px; height:5px; margin:0 auto 10px; border-radius:5px; background:var(--wc-purple)}
.wi-stage .calculator-screen{
  display:flex; align-items:center; justify-content:flex-end; height:31px; padding:0 8px;
  border-radius:6px; color:#3242b2; background:#dce8ff; font-size:15px; font-weight:800;
}
.wi-stage .calculator-buttons{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px}
.wi-stage .calculator-buttons span{height:15px; border-radius:4px; background:#c7d1ef}
.wi-stage .calculator-buttons span:nth-child(3n){background:var(--wc-yellow)}

.wi-stage .computer{position:absolute; z-index:3; left:48px; bottom:13px; width:260px; height:190px}
.wi-stage .monitor{
  width:230px; height:142px; padding:9px; border-radius:13px;
  background:#232e70; box-shadow:0 17px 24px rgba(19,29,106,.35);
}
.wi-stage .monitor-screen{width:100%; height:100%; overflow:hidden; padding:9px; border-radius:7px; background:#f8fbff}
.wi-stage .screen-header{display:flex; gap:4px; direction:ltr}
.wi-stage .screen-header span{width:6px; height:6px; border-radius:50%; background:var(--wc-coral)}
.wi-stage .screen-header span:nth-child(2){background:var(--wc-yellow)}
.wi-stage .screen-header span:nth-child(3){background:var(--wc-mint)}
.wi-stage .screen-content{display:flex; align-items:flex-end; gap:14px; height:92px; margin-top:15px; direction:ltr}
.wi-stage .chart-box{
  display:flex; align-items:flex-end; gap:5px; width:112px; height:72px;
  padding:8px; border-radius:7px; background:#eef1ff;
}
.wi-stage .bar{display:block; width:15px; height:auto; min-width:0; border-radius:3px 3px 0 0; background:var(--wc-blue); overflow:visible}
.wi-stage .bar-one{height:25px}
.wi-stage .bar-two{height:44px; background:var(--wc-purple)}
.wi-stage .bar-three{height:34px; background:var(--wc-coral)}
.wi-stage .bar-four{height:58px; background:#4ebf9c}
.wi-stage .screen-lines{display:flex; flex-direction:column; gap:8px; width:65px}
.wi-stage .screen-lines span{display:block; height:6px; border-radius:5px; background:#d9def5}
.wi-stage .screen-lines span:nth-child(2){width:80%}
.wi-stage .screen-lines span:nth-child(3){width:60%}
.wi-stage .screen-lines span:nth-child(4){width:75%}
.wi-stage .monitor-stand{width:27px; height:26px; margin:0 auto; background:#27347e}
.wi-stage .monitor-base{width:75px; height:9px; margin:0 auto; border-radius:8px; background:#27347e}
.wi-stage .keyboard{
  display:flex; align-items:center; justify-content:center; gap:5px; width:160px; height:24px;
  margin:7px 0 0 34px; border-radius:6px; transform:perspective(40px) rotateX(8deg);
  background:#fff; box-shadow:0 7px 12px rgba(24,32,109,.25);
}
.wi-stage .keyboard span{width:12px; height:5px; border-radius:2px; background:#b9c3e5}

@keyframes kelas-waving{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(14deg)}
  50%{transform:rotate(-7deg)}
  75%{transform:rotate(10deg)}
}
@media (prefers-reduced-motion: reduce){ .welcome-card .wave{animation:none} }

@media (max-width:980px){
  .welcome-card{padding:24px 26px; gap:18px}
  .welcome-illustration{min-width:230px}
  .wi-stage{transform:scale(.55); margin:-53px -88px}
}
@media (max-width:760px){
  .welcome-card{flex-direction:column; align-items:flex-start; min-height:0}
  .welcome-content{max-width:100%}
  .welcome-card p{max-width:100%}
  .welcome-illustration{width:100%; min-width:0; align-self:center}
  .wi-stage{transform:scale(.62); margin:-45px -74px}
}
@media (max-width:520px){
  .welcome-card{padding:20px 18px; border-radius:16px}
  .welcome-meta{display:none}
  .wi-stage{transform:scale(.5); margin:-59px -98px}
}

/* ============================================================
   تم‌های رنگی — آخر فایل می‌آیند تا انتخاب کاربر بر حالت
   خودکار سیستم اولویت داشته باشد.
   بدون data-skin → خودکار (روشن/تاریک هم‌رنگ سیستم)
   ============================================================ */

/* --- نیلی (پیش‌فرض روشن) --- */
:root[data-skin="indigo"]{
  --brand:#2f3fd4; --brand-ink:#1f2aa8; --brand-2:#6b63ea; --brand-soft:#e8ebfd;
  --side-1:#4b44d6; --side-2:#5d51e4;
  --paper:#f6f7fc; --surface:#fff; --surface-2:#f4f6fb;
  --ink:#1b2340; --muted:#6b7794; --faint:#95a0b8; --line:#e6e9f3; --line-soft:#eef1f8;
  --violet:#7c6bf5; --violet-soft:#ece9fe; --mint:#2fb98a; --mint-soft:#d9f5ea;
  --sun:#e8a92c; --sun-soft:#fdf0d2; --pink:#f2617a; --pink-soft:#ffe3e9;
  --ok:#22a06b; --ok-soft:#dcf5ea; --bad:#e05263; --bad-soft:#fde8ec;
  --warn:#e2a032; --warn-soft:#fdf1da; --slate:#6b7794; --slate-soft:#eceff6;
  --wc-g1:#2f45c3; --wc-g2:#4654d4; --wc-g3:#6d65df;
}

/* --- فیروزه‌ای --- */
:root[data-skin="teal"]{
  --brand:#0d8b91; --brand-ink:#096c72; --brand-2:#1fb8ab; --brand-soft:#dcf5f4;
  --side-1:#0f7f8c; --side-2:#17a79c;
  --paper:#f2fbfa; --surface:#fff; --surface-2:#eef8f7;
  --ink:#10333a; --muted:#5b7d80; --faint:#8aa8aa; --line:#d9ecea; --line-soft:#e6f4f2;
  --violet:#5b8ff9; --violet-soft:#e4edff; --mint:#20a97f; --mint-soft:#d6f3e7;
  --sun:#e0a11f; --sun-soft:#fcefd3; --pink:#ef6b86; --pink-soft:#ffe4ea;
  --ok:#1a9b74; --ok-soft:#d7f2e7; --bad:#dd5566; --bad-soft:#fde6e9;
  --warn:#d99a25; --warn-soft:#fbefd8; --slate:#5b7d80; --slate-soft:#e6eff0;
  --wc-g1:#0a7d86; --wc-g2:#12a29c; --wc-g3:#37c1ad;
}

/* --- ارغوانی --- */
:root[data-skin="violet"]{
  --brand:#6d3bc4; --brand-ink:#552d9c; --brand-2:#9457e0; --brand-soft:#eee7fd;
  --side-1:#6733bd; --side-2:#8348d6;
  --paper:#f8f5fe; --surface:#fff; --surface-2:#f4effd;
  --ink:#241a3d; --muted:#6f6490; --faint:#9e95bb; --line:#e9e1f7; --line-soft:#f1ecfb;
  --violet:#8b5cf6; --violet-soft:#efe8fe; --mint:#2fb08c; --mint-soft:#d9f3ec;
  --sun:#e4a124; --sun-soft:#fcf0d6; --pink:#ee5f93; --pink-soft:#ffe3ed;
  --ok:#22a07a; --ok-soft:#d9f3ea; --bad:#e0506f; --bad-soft:#fde7ec;
  --warn:#dd9c28; --warn-soft:#fbefd9; --slate:#6f6490; --slate-soft:#efebf7;
  --wc-g1:#5c2fb5; --wc-g2:#7d44cf; --wc-g3:#a163e8;
}

/* --- مرجانی --- */
:root[data-skin="coral"]{
  --brand:#d6405f; --brand-ink:#ad2f4a; --brand-2:#f0728a; --brand-soft:#ffe6ec;
  --side-1:#cf3a5c; --side-2:#e96179;
  --paper:#fff5f7; --surface:#fff; --surface-2:#fdeff2;
  --ink:#3a1b26; --muted:#8a6470; --faint:#b493a0; --line:#f7dde4; --line-soft:#fbebef;
  --violet:#8b6bf0; --violet-soft:#ece7fe; --mint:#28ab88; --mint-soft:#d6f2e9;
  --sun:#e09a1e; --sun-soft:#fcefd2; --pink:#ef5f7f; --pink-soft:#ffe3ea;
  --ok:#22a07a; --ok-soft:#d9f3ea; --bad:#d63b58; --bad-soft:#fde3e8;
  --warn:#dd9522; --warn-soft:#fbeed5; --slate:#8a6470; --slate-soft:#f6eaee;
  --wc-g1:#c4325a; --wc-g2:#e05173; --wc-g3:#f7808f;
}

/* --- زمردی --- */
:root[data-skin="emerald"]{
  --brand:#13855b; --brand-ink:#0d6846; --brand-2:#2cb37c; --brand-soft:#ddf3e8;
  --side-1:#12795a; --side-2:#1ba171;
  --paper:#f2fbf6; --surface:#fff; --surface-2:#edf8f2;
  --ink:#12332a; --muted:#587a6c; --faint:#8aa89b; --line:#d9ecdf; --line-soft:#e7f4ec;
  --violet:#6d7ef5; --violet-soft:#e6e9fe; --mint:#1fa876; --mint-soft:#d5f2e5;
  --sun:#dfa11c; --sun-soft:#fcefd1; --pink:#ee6a84; --pink-soft:#ffe3e9;
  --ok:#17966a; --ok-soft:#d5f1e3; --bad:#dc5464; --bad-soft:#fde6e8;
  --warn:#d79a22; --warn-soft:#fbeed6; --slate:#587a6c; --slate-soft:#e7f0ea;
  --wc-g1:#0e7351; --wc-g2:#17946b; --wc-g3:#2fbb8a;
}

/* --- کهربایی --- */
:root[data-skin="amber"]{
  --brand:#c2680f; --brand-ink:#9b5109; --brand-2:#e59120; --brand-soft:#fdeed6;
  --side-1:#b85f10; --side-2:#d9861b;
  --paper:#fffaf2; --surface:#fff; --surface-2:#fdf4e9;
  --ink:#3a2712; --muted:#856b4d; --faint:#b3a087; --line:#f4e6d4; --line-soft:#faf0e3;
  --violet:#7b6bf2; --violet-soft:#e9e6fe; --mint:#25a884; --mint-soft:#d4f1e8;
  --sun:#d9931c; --sun-soft:#fcedcf; --pink:#ee6a7f; --pink-soft:#ffe3e8;
  --ok:#1f9a72; --ok-soft:#d7f1e6; --bad:#d9525f; --bad-soft:#fde5e7;
  --warn:#c98a1c; --warn-soft:#fbecd2; --slate:#856b4d; --slate-soft:#f5eee3;
  --wc-g1:#ad5a0e; --wc-g2:#cf7d16; --wc-g3:#eda42c;
}

/* --- چمنزار (سرد، سبز به آبی) --- */
:root[data-skin="meadow"]{
  --brand:#1a759f; --brand-ink:#184e77; --brand-2:#34a0a4; --brand-soft:#dcf0ec;
  --side-1:#1e6091; --side-2:#34a0a4;
  --paper:#f4faf1; --surface:#fff; --surface-2:#eef7ea;
  --ink:#14313d; --muted:#5b7a78; --faint:#8aa5a0; --line:#dceadd; --line-soft:#e9f3e6;
  --violet:#1e6091; --violet-soft:#dde9f4; --mint:#52b69a; --mint-soft:#dcf1e7;
  --sun:#5f9e4f; --sun-soft:#e7f5d5; --pink:#168aad; --pink-soft:#d9eff5;
  --ok:#3f9d7c; --ok-soft:#dbf2e7; --bad:#d9596b; --bad-soft:#fbe6e9;
  --warn:#c1901d; --warn-soft:#f8eed3; --slate:#5b7a78; --slate-soft:#e7efec;
  --wc-g1:#184e77; --wc-g2:#1a759f; --wc-g3:#34a0a4;
}

/* --- نسیم دریا (سرد، آبی اقیانوسی) --- */
:root[data-skin="ocean"]{
  --brand:#0077b6; --brand-ink:#03045e; --brand-2:#00b4d8; --brand-soft:#d4f0f8;
  --side-1:#03045e; --side-2:#0077b6;
  --paper:#f2fbfd; --surface:#fff; --surface-2:#eaf7fb;
  --ink:#08223f; --muted:#52748e; --faint:#8aa5b8; --line:#d6e9f1; --line-soft:#e6f3f8;
  --violet:#3f4bb0; --violet-soft:#e2e5f8; --mint:#0d9bb5; --mint-soft:#d3f2f8;
  --sun:#0096c7; --sun-soft:#caf0f8; --pink:#5a8fd8; --pink-soft:#e0ecfb;
  --ok:#1a9b8a; --ok-soft:#d5f2ee; --bad:#d9556a; --bad-soft:#fbe5e9;
  --warn:#c78f1e; --warn-soft:#f8ecd2; --slate:#52748e; --slate-soft:#e6eef3;
  --wc-g1:#03045e; --wc-g2:#0059a3; --wc-g3:#0096c7;
}

/* --- جنگلی (سرد، سبز خزه‌ای) --- */
:root[data-skin="forest"]{
  --brand:#4e7f4e; --brand-ink:#3a6039; --brand-2:#7fae76; --brand-soft:#dff2d9;
  --side-1:#3f6b3e; --side-2:#629460;
  --paper:#f5faf2; --surface:#fff; --surface-2:#eff7ec;
  --ink:#243119; --muted:#5f7256; --faint:#93a58a; --line:#dfeada; --line-soft:#ecf4e8;
  --violet:#5d8aa6; --violet-soft:#dfebf1; --mint:#629460; --mint-soft:#dff0da;
  --sun:#96a23a; --sun-soft:#eff2d2; --pink:#bb7b69; --pink-soft:#f7e6e0;
  --ok:#4e8c58; --ok-soft:#ddf0e0; --bad:#bf5a5a; --bad-soft:#f8e3e3;
  --warn:#a8862c; --warn-soft:#f4ecd3; --slate:#5f7256; --slate-soft:#e9efe5;
  --wc-g1:#2f4626; --wc-g2:#456b3c; --wc-g3:#629460;
}

/* --- پاستلی (سرد و ملایم) --- */
:root[data-skin="pastel"]{
  --brand:#6478c9; --brand-ink:#4a5da8; --brand-2:#93a8e8; --brand-soft:#e4eafd;
  --side-1:#6b7ecb; --side-2:#93a3e2;
  --paper:#f7f5f4; --surface:#fff; --surface-2:#f3f1ee;
  --ink:#33303a; --muted:#7a7484; --faint:#a7a1af; --line:#e8e3e6; --line-soft:#f1edef;
  --violet:#8f86c9; --violet-soft:#e7e3f4; --mint:#6fae9b; --mint-soft:#e2ece9;
  --sun:#c9924f; --sun-soft:#fff1e6; --pink:#d4788f; --pink-soft:#fde2e4;
  --ok:#5aa38c; --ok-soft:#dfeee8; --bad:#cc6178; --bad-soft:#fde2e4;
  --warn:#c08e4c; --warn-soft:#fdeee0; --slate:#7a7484; --slate-soft:#eeeaec;
  --wc-g1:#4f63ab; --wc-g2:#6b80c9; --wc-g3:#93a5e2;
}

/* --- شبانه --- */
:root[data-skin="night"]{
  --brand:#8aa2f5; --brand-ink:#adbdfb; --brand-2:#9b93f4; --brand-soft:#232a52;
  --side-1:#221e5e; --side-2:#2c2673;
  --paper:#0e1120; --surface:#171b2f; --surface-2:#1d2238;
  --ink:#e8ecf7; --muted:#9fabc6; --faint:#7c88a5; --line:#2a3050; --line-soft:#232842;
  --violet:#9b8cf8; --violet-soft:#272357; --mint:#4cc492; --mint-soft:#123328;
  --sun:#e8b45c; --sun-soft:#352a13; --pink:#f6889b; --pink-soft:#3d2029;
  --ok:#4cc492; --ok-soft:#14321f; --bad:#ec7f8d; --bad-soft:#3a1c22;
  --warn:#e8b45c; --warn-soft:#352a13; --slate:#9fabc6; --slate-soft:#242a44;
  --wc-g1:#1f1c55; --wc-g2:#2e2a73; --wc-g3:#453e96;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
}

/* ---------- پنجرهٔ اعلان زیر زنگ ---------- */
.notifwrap{position:relative}
.notifpop{
  position:absolute; top:calc(100% + 9px); inset-inline-start:-8px; z-index:70;
  width:min(340px,86vw); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 48px -18px rgba(20,28,60,.45); overflow:hidden;
  animation:pop-in .16s ease-out;
}
@keyframes pop-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .notifpop{animation:none} }
.notifpop-h{
  padding:12px 15px; border-bottom:1px solid var(--line-soft); background:var(--brand-soft);
  color:var(--brand-ink); font-size:13.5px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.notifpop-h .pip{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.notifpop-b{max-height:300px; overflow-y:auto; display:flex; flex-direction:column}
.notifpop-row{
  display:block; width:100%; text-align:right; background:transparent; border:0;
  padding:11px 15px; font:inherit; cursor:pointer; border-bottom:1px solid var(--line-soft);
}
.notifpop-row:last-child{border-bottom:0}
.notifpop-row:hover{background:var(--surface-2)}
.notifpop-row .t{font-size:13.5px; font-weight:600; color:var(--ink)}
.notifpop-row .d{font-size:11.5px; color:var(--muted); margin-top:3px}
.notifpop-f{padding:9px 15px; border-top:1px solid var(--line-soft); display:flex; gap:10px}
.notifpop .empty2{padding:22px 15px; text-align:center; color:var(--muted); font-size:13px}

/* ---------- انتخاب تم رنگی ---------- */
.skins{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.skin-grp{
  margin:4px 0 -2px; font-size:12.5px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.skin-grp::after{content:""; flex:1; height:1px; background:var(--line)}
.skin{
  position:relative; border:1.5px solid var(--line); background:var(--surface);
  border-radius:14px; padding:13px; cursor:pointer; text-align:right;
  font:inherit; transition:.16s ease; display:flex; flex-direction:column; gap:10px;
}
.skin:hover{border-color:var(--brand-2); transform:translateY(-2px)}
.skin.on{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.skin .sw{display:flex; gap:6px}
.skin .sw i{width:26px; height:26px; border-radius:8px; flex:none}
.skin .nm{font-size:13px; font-weight:700; color:var(--ink)}
.skin .on-tick{
  position:absolute; top:-8px; inset-inline-end:-8px; width:22px; height:22px; border-radius:50%;
  background:var(--brand); color:#fff; display:none; place-items:center; font-size:12px;
}
.skin.on .on-tick{display:grid}

/* ============================================================
   کارگاه شبیه‌سازی — صفحهٔ «در حال ساخت» (طرح از خود کاربر)
   انتخابگرها با پیشوند cs- تا با کلاس‌های سامانه
   (.decor, .eyebrow, .description …) تداخل نکنند.
   تصویرها از PNG های ~۱ مگابایتی به WebP فشرده شده‌اند (assets/soon).
   ============================================================ */
.cs-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(600px, 70vh);
  border:2px solid rgba(255,255,255,.92); border-radius:30px;
  background:
    radial-gradient(circle at 73% 38%, rgba(255,255,255,.92), transparent 23rem),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,251,237,.86));
  box-shadow:0 20px 45px rgba(114,90,39,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
.cs-hero::before,.cs-hero::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; background:#f8edcf; opacity:.72;
}
.cs-hero::before{width:410px; height:250px; left:-120px; bottom:-110px; transform:rotate(18deg)}
.cs-hero::after{width:310px; height:190px; right:-110px; top:-85px; transform:rotate(14deg)}

.cs-copy{
  position:relative; z-index:5; width:45%; text-align:right;
  padding:clamp(30px,4vw,60px) clamp(24px,4vw,56px) 48px clamp(24px,5vw,66px);
}
.cs-eyebrow{
  display:inline-flex; margin-bottom:16px; padding:8px 15px; border-radius:99px;
  color:#1d4ab7; background:rgba(42,92,208,.09);
  font-size:clamp(12px,1.2vw,15px); font-weight:700;
}
.cs-title{
  color:#081946; font-size:clamp(42px,5vw,84px); line-height:1.1;
  font-weight:900; letter-spacing:-.07em;
}
.cs-title span{
  display:block; margin-top:14px; color:#2459cf;
  font-size:.48em; line-height:1.35; letter-spacing:-.04em;
}
.cs-desc{margin:28px 0 34px; color:#17295d; font-size:clamp(15px,1.3vw,20px); line-height:2.1; font-weight:500}
.cs-back{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-width:260px; padding:16px 22px; border:0; border-radius:13px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,#2f64dc,#2453c4);
  box-shadow:0 10px 18px rgba(35,82,194,.22);
  font:inherit; font-size:clamp(14px,1.15vw,18px); font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cs-back:hover{transform:translateY(-3px); box-shadow:0 15px 25px rgba(35,82,194,.3)}
.cs-arrow{direction:ltr; font-size:26px; line-height:1}

.cs-scene{position:absolute; inset:0 43% 0 0; z-index:2; direction:ltr; pointer-events:none}
.cs-scene img{position:absolute; display:block; object-fit:contain; user-select:none; -webkit-user-drag:none}
.cs-board  {z-index:2; left:4%;  bottom:19%; width:33%}
.cs-student{z-index:4; left:25%; bottom:11%; width:26%}
.cs-papers {z-index:3; left:17%; bottom:3%;  width:32%}
.cs-books  {z-index:5; left:51%; bottom:7%;  width:17%}
.cs-cone   {z-index:5; left:67%; bottom:6%;  width:16%}

.cs-dot,.cs-ring,.cs-dash{position:absolute; z-index:1; pointer-events:none}
.cs-dot{width:13px; height:13px; border-radius:50%; background:#f9bd18; box-shadow:0 0 0 8px rgba(249,189,24,.11)}
.cs-dot-1{top:18%; right:64%}
.cs-dot-2{top:26%; right:41%; background:#2459cf; box-shadow:0 0 0 8px rgba(36,89,207,.1)}
.cs-ring{width:28px; height:28px; border:3px solid #2459cf; border-radius:50%}
.cs-ring-1{top:12%; right:51%}
.cs-ring-2{top:50%; right:48%; width:38px; height:38px; border-color:#f9bd18}
.cs-dash{width:23px; height:7px; border-radius:8px; background:#f9bd18; transform:rotate(-44deg)}
.cs-dash-1{top:30%; right:54%}
.cs-dash-2{top:13%; right:37%; background:#2459cf; transform:rotate(135deg)}

@media (prefers-reduced-motion:no-preference){
  .cs-student{animation:cs-float-a 5s ease-in-out infinite}
  .cs-board{animation:cs-float-b 6s ease-in-out infinite}
  @keyframes cs-float-a{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
  @keyframes cs-float-b{0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-.5deg) translateY(-5px)}}
}
@media (max-width:1100px){
  .cs-hero{min-height:640px}
  .cs-copy{width:50%; padding-left:5vw}
  .cs-scene{inset:0 48% 0 0}
  .cs-board{width:34%; bottom:20%}
  .cs-student{left:24%; width:26%}
  .cs-papers{width:32%}
  .cs-books{left:50%; width:18%}
  .cs-cone{left:66%; width:17%}
}
@media (max-width:760px){
  .cs-hero{min-height:660px; border-radius:22px}
  .cs-copy{width:100%; padding:32px 20px 0; text-align:center}
  .cs-title{font-size:clamp(38px,13vw,62px)}
  .cs-title span{margin-top:10px; font-size:.5em}
  .cs-desc{margin:18px 0 22px; font-size:15.5px; line-height:1.9}
  .cs-back{min-width:min(100%,300px); padding:14px 18px}
  .cs-scene{inset:auto 0 0 0; height:46%}
  .cs-board{left:2%;  bottom:18%; width:30%}
  .cs-student{left:26%; bottom:10%; width:24%}
  .cs-papers{left:18%; bottom:2%;  width:30%}
  .cs-books{left:52%; bottom:6%;  width:16%}
  .cs-cone{left:70%; bottom:5%;  width:15%}
  .cs-dot-1{top:30%; right:12%}
  .cs-dot-2{top:40%; right:84%}
}

/* دکمهٔ متمایز «کارگاه شبیه‌سازی» در نوار کناری */
.sidebtn.accent{
  background:#ffc93c; color:#3a2c00; font-weight:800;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
}
.sidebtn.accent:hover{background:#ffd75e; color:#3a2c00}
.sidebtn.accent[aria-current="true"]{background:#ffd75e; color:#2f2300; box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.sidebtn.accent svg{stroke:currentColor}