@font-face{font-family:"Vazirmatn";src:url("fonts/vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* =========================================================
   سامانه منابع انسانی رازقی
   هویت بصری هم‌خانواده با رازقی‌گرام:
   زغالی عمیق، طلایی برند، کاغذ گرم، گوشه‌های نرم، یک لایه سایه
   ========================================================= */
/* =========================================================
   ۱) توکن‌ها — پایه همه چیز
   نام‌ها ثابت‌اند؛ فقط مقدارشان بین تم روشن و تیره عوض می‌شود.
   برای تغییر ظاهر کل برنامه فقط همین بلوک را دست بزن.
   ========================================================= */
:root{
  color-scheme: light;

  --paper:#F7F5F1; --paper-2:#EFEBE4; --card:#FFFFFFEE; --card-2:#FCFAF7EE;
  --chrome:#1A1617; --chrome-2:#252021; --chrome-tx:#C3BAAE; --chrome-tx-2:#938B81;
  --chrome-line:rgba(200,157,94,.18);
  --ink:#1E1A1B; --ink-2:#565049; --ink-3:#6F6960; --ink-inv:#F7F3EC;
  --gold:#C89D5E; --gold-deep:#86632A; --gold-wash:#F8EFE1; --gold-line:#E3CFAC; --gold-ink:#1E1A1B;
  --rule:#E9E3D8; --rule-soft:#F2EEE7;
  --ok:#3F6B4E; --ok-bg:#EFF5F0; --ok-br:#C4D6C9;
  --warn:#8D6415; --warn-bg:#FBF3E4; --warn-br:#E6D4AE;
  --stop:#8A352C; --stop-bg:#FBEEEC; --stop-br:#E2C3BE;
  --info:#35566B; --info-bg:#EEF3F7; --info-br:#C3D4DE;

  --r:18px; --rs:13px; --rx:9px;
  --sh:0 1px 2px rgba(90,66,30,.05), 0 12px 32px -18px rgba(90,66,30,.22);
  --sh-lift:0 2px 4px rgba(30,26,27,.05), 0 18px 40px -18px rgba(30,26,27,.26);

  /* مقیاس تایپ — پایه تبلت */
  --fs-body:15.5px;
  --fs-xs:.74rem; --fs-sm:.84rem; --fs-md:.93rem;
  --fs-lg:1.08rem; --fs-xl:1.3rem; --fs-2xl:1.62rem; --fs-3xl:2.05rem;
  --lh-tight:1.45; --lh-body:1.85;

  /* فاصله — مضرب ۴ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:42px;

  /* حرکت */
  --ease:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.22,1.15,.36,1);
  --dur-1:.14s; --dur-2:.24s; --dur-3:.42s;

  --side:252px; --rail:74px;
}

/* ---------- تم تیره ---------- */
[data-theme="dark"]{
  color-scheme: dark;

  --paper:#100E0F; --paper-2:#1A1718; --card:#1E1A1BEE; --card-2:#241F20EE;
  --chrome:#0D0B0C; --chrome-2:#171415; --chrome-tx:#A9A096; --chrome-tx-2:#8B857D;
  --chrome-line:rgba(200,157,94,.22);
  --ink:#F0EBE3; --ink-2:#B6AEA4; --ink-3:#969087; --ink-inv:#1A1617;
  --gold:#D4AC72; --gold-deep:#E0BE8C; --gold-wash:#2A2118; --gold-line:#4A3B26; --gold-ink:#14110F;
  --rule:#342E2E; --rule-soft:#282323;
  --ok:#7FB58E; --ok-bg:#18211B; --ok-br:#2F4436;
  --warn:#D9AE63; --warn-bg:#241E13; --warn-br:#4A3B22;
  --stop:#D98C82; --stop-bg:#251817; --stop-br:#4C2F2B;
  --info:#89AEC4; --info-bg:#161E23; --info-br:#2C3F4A;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
  --sh-lift:0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Vazirmatn",Tahoma,system-ui,sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);font-weight:800;letter-spacing:-.015em}
h1{font-size:var(--fs-xl)}h2{font-size:var(--fs-lg)}h3{font-size:var(--fs-md)}h4{font-size:var(--fs-sm);color:var(--ink-2)}
p{margin:0 0 .9em;max-width:72ch}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold);color:var(--gold-ink)}
svg{display:block}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i-lg{width:21px;height:21px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;direction:ltr;unicode-bidi:isolate;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;padding:.05em .4em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- اسکلت ---------- */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--chrome);color:var(--chrome-tx);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:#3A3435;border-radius:99px}

.brand{display:flex;gap:11px;align-items:center;color:inherit;padding:20px 18px 18px}
.brand .mark{width:34px;height:34px;flex:0 0 auto}
.brand>span{display:block;line-height:1.4}
.brand .wm b i{font-style:normal;color:var(--gold);font-weight:800;margin-inline-start:.35em;letter-spacing:.02em}
.brand b{display:block;font-size:.93rem;color:#F2EDE5;font-weight:800;letter-spacing:-.01em}
.brand>span>span{display:block;font-size:.7rem;color:var(--chrome-tx-2)}

#nav{padding:4px 10px 28px;flex:1}
.nav-group{padding:18px 10px 7px;font-size:var(--fs-xs);color:var(--chrome-tx-2);font-weight:700;letter-spacing:.02em}
#nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:2px;border-radius:var(--rs);
  color:var(--chrome-tx);font-size:.875rem;position:relative;transition:background .12s,color .12s}
#nav a:hover{color:#fff;background:rgba(255,255,255,.055)}
#nav a.on{color:#fff;background:rgba(200,157,94,.16);font-weight:700}
#nav a.on::before{content:"";position:absolute;inset-inline-start:-10px;top:9px;bottom:9px;width:3px;
  background:var(--gold);border-radius:0 3px 3px 0}
#nav a .i{opacity:.8;flex:0 0 auto}
#nav a.on .i{opacity:1;color:var(--gold)}
#nav a .ct{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--chrome-tx);
  background:rgba(255,255,255,.07);border-radius:99px;padding:0 7px;font-weight:600}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(246,244,240,.88);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px;padding:0 26px;min-height:62px}
.crumb{font-size:.85rem;color:var(--ink-3);flex:1;min-width:0}
.crumb b{color:var(--ink);font-weight:700}
.whoami{display:flex;align-items:center;gap:10px}
.whoami .who{text-align:end;line-height:1.35;display:none}
.whoami .who b{display:block;font-size:.83rem;font-weight:700}
.whoami .who span{display:block;font-size:.7rem;color:var(--ink-3)}
@media(min-width:700px){.whoami .who{display:block}}
.whoami select{font:inherit;font-size:.83rem;padding:7px 11px;border:1px solid var(--rule);border-radius:var(--rs);
  background:var(--card);color:var(--ink);max-width:210px;box-shadow:var(--sh)}
.iconbtn{background:none;border:0;font:inherit;cursor:pointer;color:var(--ink-2);padding:8px;
  border-radius:var(--rs);display:grid;place-items:center}
.iconbtn:hover{background:var(--paper-2)}
#menubtn{display:none}
main{padding:30px 26px 80px;flex:1;min-width:0}
.wrap{max-width:1120px}

@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-end:0;width:min(84vw,var(--side));z-index:60;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--sh-lift)}
  .side.open{transform:none}
  #menubtn{display:grid}
  main{padding:20px 15px 70px}
  .topbar{padding:0 13px;min-height:58px}
}

/* ---------- سرصفحه صفحه ---------- */
.phead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.phead .txt{flex:1;min-width:230px}
.phead h1 small{display:block;font-size:var(--fs-xs);color:var(--gold-deep);font-weight:700;direction:ltr;
  text-align:right;letter-spacing:.06em;margin-bottom:2px}
.phead p{color:var(--ink-2);margin:6px 0 0;font-size:.89rem}
.phead .acts{display:flex;gap:9px;flex-wrap:wrap}

.hello{margin-bottom:26px}
.hello h1{font-size:1.6rem}
.hello p{color:var(--ink-2);margin:5px 0 0;font-size:.92rem}

/* ---------- دکمه‌ها ---------- */
.btn{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--rs);padding:9px 16px;display:inline-flex;align-items:center;
  gap:7px;box-shadow:var(--sh);transition:border-color .12s,background .12s,transform .08s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.btn.solid:hover{background:#000}
.btn.gold{background:var(--gold);color:#2A2113;border-color:#B98D4B;font-weight:700}
.btn.gold:hover{background:#D4AC70}
.btn.sm{font-size:var(--fs-sm);padding:5px 11px;box-shadow:none}
.btn.danger{color:var(--stop);border-color:var(--stop-br)}
.btn.danger:hover{background:var(--stop-bg)}
.btn.lg{font-size:.95rem;padding:13px 26px}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ---------- کارت ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:24px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}
.card h3{margin-bottom:9px}
.card>:last-child{margin-bottom:0}
.stat b{display:block;font-size:1.9rem;font-weight:800;line-height:1.25;letter-spacing:-.03em}
.stat span{font-size:.79rem;color:var(--ink-3)}
.stat.alert b{color:var(--stop)}
.stat.good b{color:var(--ok)}
.sec{margin:0 0 32px}
.sec>h2{padding-bottom:11px;border-bottom:1px solid var(--rule);margin-bottom:16px;
  display:flex;align-items:center;gap:10px}
.sec>h2 .btn{margin-inline-start:auto}

/* ---------- دکمه‌های بزرگ صفحه اول ---------- */
.bigacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin-bottom:30px}
.bigact{display:flex;gap:15px;align-items:center;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);padding:19px 20px;min-height:98px;
  box-shadow:var(--sh);transition:transform .14s,box-shadow .14s,border-color .14s}
.bigact:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);border-color:var(--gold-line)}
.bigact .ic{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:var(--gold-wash);border:1px solid var(--gold-line);color:var(--gold-deep)}
.bigact .tx{flex:1;min-width:0}
.bigact b{display:block;font-size:1.04rem;font-weight:800;line-height:1.5}
.bigact small{display:block;color:var(--ink-3);font-size:.82rem;line-height:1.7;margin-top:1px}
.bigact .badge{flex:0 0 auto;background:var(--stop);color:var(--paper);border-radius:99px;font-size:var(--fs-xs);
  font-weight:700;padding:2px 9px;min-width:24px;text-align:center}
.bigact.quiet .ic{background:var(--paper-2);border-color:var(--rule);color:var(--ink-3)}

/* ---------- جدول ---------- */
.tbl-tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.tbl-tools input[type=search],.tbl-tools select{font:inherit;font-size:.84rem;padding:8px 12px;
  border:1px solid var(--rule);border-radius:var(--rs);background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.tbl-tools input[type=search]{min-width:210px}
.tblwrap{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh)}
.tblwrap>table{width:100%}
table{width:100%;border-collapse:collapse;font-size:.865rem}
.tblwrap{overflow-x:auto}
thead th{background:var(--paper-2);text-align:start;font-weight:700;font-size:.79rem;color:var(--ink-2);
  padding:11px 15px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:11px 15px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FCFBF8}
td.act{white-space:nowrap;text-align:end}
.empty{padding:44px 22px;text-align:center;color:var(--ink-3);font-size:.89rem}
.empty b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:7px}

/* ---------- پیل ---------- */
.pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:2px 10px;border-radius:99px;
  border:1px solid;white-space:nowrap;line-height:1.7}
.pill.g{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-br)}
.pill.y{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-br)}
.pill.r{color:var(--stop);background:var(--stop-bg);border-color:var(--stop-br)}
.pill.b{color:var(--info);background:var(--info-bg);border-color:var(--info-br)}
.pill.n{color:var(--ink-3);background:var(--paper-2);border-color:var(--rule)}
.code-chip{display:inline-grid;place-items:center;min-width:2.3em;height:2.2em;padding:0 .55em;font-size:.73rem;
  font-weight:700;color:var(--gold-deep);background:var(--gold-wash);border:1px solid var(--gold-line);
  border-radius:var(--rx);direction:ltr}

/* ---------- فرم ---------- */
.form{display:grid;gap:15px}
.form .row{display:grid;gap:6px}
.form .row.two{grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:600px){.form .row.two{grid-template-columns:1fr}}
.form label{font-size:.82rem;font-weight:700;color:var(--ink-2)}
.form label .req{color:var(--stop)}
.form input,.form select,.form textarea{font:inherit;font-size:.9rem;padding:10px 13px;border:1px solid var(--rule);
  border-radius:var(--rs);background:var(--card);color:var(--ink);width:100%;transition:border-color .12s,box-shadow .12s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(200,157,94,.16)}
.form textarea{min-height:88px;resize:vertical;line-height:1.85}
.form .hint{font-size:.76rem;color:var(--ink-3)}
.form .err{font-size:.8rem;color:var(--stop);background:var(--stop-bg);border:1px solid var(--stop-br);
  border-radius:var(--rs);padding:9px 12px}
.checks{display:grid;gap:7px;max-height:250px;overflow-y:auto;border:1px solid var(--rule);
  border-radius:var(--rs);padding:12px 14px;background:var(--card)}
.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.87rem;cursor:pointer}
.checks input{width:auto;margin:.5em 0 0;accent-color:var(--gold-deep)}

/* ---------- مودال ---------- */
.modal[hidden],.toast[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:80;background:rgba(24,20,21,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px}
.modal-box{background:var(--paper);border-radius:16px;width:min(100%,660px);max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 40px 80px -24px rgba(0,0,0,.55);overflow:hidden}
.modal-box.wide{width:min(100%,920px)}
.modal-box>header{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--rule);
  background:var(--card)}
.modal-box>header h3{flex:1;font-size:1.03rem}
.modal-box>div{padding:22px;overflow-y:auto}
.modal-box>footer{padding:15px 22px;border-top:1px solid var(--rule);display:flex;gap:10px;background:var(--card)}
.modal-box>footer .fill{margin-inline-start:auto}

/* ---------- توست ---------- */
.toast{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;background:var(--chrome);color:#fff;
  padding:13px 20px;border-radius:var(--r);font-size:.87rem;font-weight:600;max-width:min(90vw,420px);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
.toast.bad{background:var(--stop)}
.toast.good{background:var(--ok)}

/* ---------- بلوک‌های متنی ---------- */
.note{background:var(--gold-wash);border:1px solid var(--gold-line);border-inline-start-width:3px;
  border-inline-start-color:var(--gold);padding:14px 17px;border-radius:var(--rs);margin-bottom:18px;font-size:.88rem}
.note>:last-child{margin-bottom:0}
.note.r{background:var(--stop-bg);border-color:var(--stop-br);border-inline-start-color:var(--stop)}
.note.g{background:var(--ok-bg);border-color:var(--ok-br);border-inline-start-color:var(--ok)}
.note.b{background:var(--info-bg);border-color:var(--info-br);border-inline-start-color:var(--info)}
.note.y{background:var(--warn-bg);border-color:var(--warn-br);border-inline-start-color:var(--warn)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:.87rem;align-items:baseline}
.kv dt{color:var(--ink-3);font-size:.79rem}
.kv dd{margin:0;font-weight:600}
.split{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start}
@media(max-width:920px){.split{grid-template-columns:1fr}}

/* ---------- لیست قابل لمس ---------- */
.simple{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.srow{display:flex;gap:14px;align-items:center;width:100%;text-align:start;background:none;border:0;
  font:inherit;color:inherit;padding:15px 18px;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  transition:background .12s}
.srow:last-child{border-bottom:0}
.srow:hover{background:#FCFBF8}
.av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid transparent;font-weight:800;font-size:var(--fs-sm);line-height:1;
  overflow:hidden;box-sizing:border-box}
.srow .av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-wash);border:1px solid var(--gold-line);font-weight:800;color:var(--gold-deep);font-size:.95rem}
.srow .tx{flex:1;min-width:0}
.srow .tx b{display:block;font-size:.96rem;font-weight:700}
.srow .tx small{display:block;color:var(--ink-3);font-size:.8rem}
.srow .rt{flex:0 0 auto;text-align:end;font-size:.81rem;color:var(--ink-3)}
.srow .chev{color:var(--ink-3);flex:0 0 auto}

/* ---------- چارت درختی ---------- */
.tree{list-style:none;padding:0;margin:0}
.tree ul{list-style:none;margin:0;padding-inline-start:24px;border-inline-start:1px dashed var(--rule)}
.tree li{margin:0;padding:2px 0}
.tnode{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--rule);
  border-radius:var(--rs);background:var(--card);margin:4px 0;box-shadow:var(--sh)}
.tnode .nm{font-weight:700;font-size:.88rem}
.tnode .ty{font-size:.72rem;color:var(--ink-3)}
.tnode .hc{margin-inline-start:auto;font-size:.76rem;color:var(--ink-3)}
.tnode.vac{border-color:var(--warn-br);background:var(--warn-bg)}

/* ---------- خط جذب ---------- */
.pipe{display:grid;grid-template-columns:repeat(5,minmax(168px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.pcol{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rs);padding:11px;min-height:120px}
.pcol>h4{margin-bottom:10px;display:flex;gap:6px;align-items:center;font-size:.82rem}
.pcol>h4 span{margin-inline-start:auto;font-size:.72rem;color:var(--ink-3)}
.pcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--rx);padding:10px 12px;
  margin-bottom:8px;font-size:.83rem;cursor:pointer;box-shadow:var(--sh)}
.pcard:hover{border-color:var(--gold)}
.pcard b{display:block;font-size:.88rem}
.pcard small{color:var(--ink-3);font-size:var(--fs-xs)}

/* ---------- زنجیره ---------- */
.chain{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chain a{flex:1;min-width:112px;background:var(--card);border:1px solid var(--rule);border-radius:var(--rs);
  padding:11px 13px;color:var(--ink);box-shadow:var(--sh);transition:border-color .12s,background .12s}
.chain a:hover{border-color:var(--gold);background:var(--gold-wash)}
.chain a b{display:block;font-size:.85rem}
.chain a i{font-style:normal;font-size:.67rem;color:var(--gold-deep);font-weight:700;letter-spacing:.06em}

/* ---------- نوار پیشرفت ---------- */
.bar{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;min-width:96px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .3s}
.bar.ok i{background:var(--ok)}
.bar.bad i{background:var(--stop)}

/* ---------- کارنامه ---------- */
.score-row{display:grid;grid-template-columns:1fr 130px 96px;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--rule-soft)}
.score-row:last-child{border-bottom:0}
.score-row .qn{font-size:.88rem;font-weight:600}
.score-row .qn small{display:block;color:var(--ink-3);font-size:.75rem;font-weight:400}
.score-row select,.score-row input{font:inherit;font-size:.86rem;padding:8px 11px;border:1px solid var(--rule);
  border-radius:var(--rs);width:100%;background:var(--card);color:var(--ink)}
@media(max-width:620px){.score-row{grid-template-columns:1fr;gap:6px}}

.timeline{border-inline-start:2px solid var(--rule);padding-inline-start:18px;margin:0}
.timeline li{list-style:none;margin-bottom:15px;position:relative;font-size:.86rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:-24px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);border:2px solid var(--paper)}
.timeline b{display:block;font-weight:600}
.timeline small{color:var(--ink-3)}

/* ---------- ویزارد ---------- */
.wiz{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:28px;max-width:640px;
  box-shadow:var(--sh)}
.wiz .dots{display:flex;gap:6px;margin-bottom:22px}
.wiz .dots i{height:4px;flex:1;background:var(--paper-2);border-radius:99px;transition:background .25s}
.wiz .dots i.on{background:var(--gold)}
.wiz h1,.wiz h2{font-size:var(--fs-xl);margin-bottom:6px}
.wiz .sub{color:var(--ink-2);font-size:.89rem;margin-bottom:22px}
.wiz .opts{display:grid;gap:10px;margin-bottom:24px}
.wiz .opt{display:flex;gap:13px;align-items:center;width:100%;text-align:start;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--rs);padding:15px 17px;font:inherit;color:inherit;cursor:pointer;
  transition:border-color .12s,background .12s}
.wiz .opt:hover{border-color:var(--gold-line);background:#FDFCFA}
.wiz .opt.sel{border-color:var(--gold-deep);background:var(--gold-wash)}
.wiz .opt b{display:block;font-size:.96rem;font-weight:700}
.wiz .opt small{display:block;color:var(--ink-3);font-size:.8rem}
.wiz .opt .mark{width:21px;height:21px;border:2px solid var(--rule);border-radius:50%;flex:0 0 auto;transition:.12s}
.wiz .opt.sel .mark{border-color:var(--gold-deep);background:var(--gold-deep);box-shadow:inset 0 0 0 3.5px var(--gold-wash)}
.wiz .nav{display:flex;gap:10px;align-items:center;border-top:1px solid var(--rule-soft);padding-top:18px}
.wiz .nav .sp{margin-inline-start:auto}
.wiz input,.wiz textarea,.wiz select{font:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--rule);
  border-radius:var(--rs);width:100%;background:var(--card);color:var(--ink)}

/* ---------- نتیجه ---------- */
.verdict{border-radius:var(--r);padding:22px 24px;margin-bottom:20px;border:1px solid;border-inline-start-width:4px}
.verdict h3{font-size:1.14rem;margin-bottom:7px}
.verdict p{margin:0;font-size:.91rem;max-width:60ch}
.verdict.ok{background:var(--ok-bg);border-color:var(--ok-br);border-inline-start-color:var(--ok)}
.verdict.ok h3{color:var(--ok)}
.verdict.no{background:var(--stop-bg);border-color:var(--stop-br);border-inline-start-color:var(--stop)}
.verdict.no h3{color:var(--stop)}
.verdict.hm{background:var(--warn-bg);border-color:var(--warn-br);border-inline-start-color:var(--warn)}
.verdict.hm h3{color:var(--warn)}
.verdict ul{margin:11px 0 0;padding-inline-start:19px;font-size:.88rem}

/* ---------- تیک بزرگ ---------- */
.bigcheck{display:flex;gap:14px;align-items:center;width:100%;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--rs);padding:15px 17px;margin-bottom:9px;font:inherit;color:inherit;text-align:start;
  cursor:pointer;box-shadow:var(--sh);transition:border-color .12s,background .12s}
.bigcheck:hover{border-color:var(--gold-line)}
.bigcheck .bx{width:26px;height:26px;flex:0 0 auto;border:2px solid var(--rule);border-radius:8px;
  display:grid;place-items:center;color:transparent;transition:.14s}
.bigcheck.on{border-color:var(--ok-br);background:var(--ok-bg)}
.bigcheck.on .bx{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.bigcheck .tx{flex:1}
.bigcheck .tx b{display:block;font-size:.95rem;font-weight:700}
.bigcheck .tx small{display:block;color:var(--ink-3);font-size:.79rem}

/* ---------- نمره‌دهی کلمه‌ای ---------- */
.scoreq{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;
  margin-bottom:13px;box-shadow:var(--sh)}
.scoreq>b{display:block;font-size:1rem;font-weight:700}
.scoreq>small{display:block;color:var(--ink-3);font-size:.82rem;margin-bottom:13px}
.scoreq .picks{display:flex;gap:8px;flex-wrap:wrap}
.scoreq .pick{flex:1;min-width:82px;background:var(--card);border:1px solid var(--rule);border-radius:var(--rs);
  padding:12px 8px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:.12s}
.scoreq .pick:hover{border-color:var(--gold-line);background:#FDFCFA}
.scoreq .pick.sel{background:var(--ink);color:var(--ink-inv);border-color:var(--ink);font-weight:700}

@media(max-width:880px){
  body{font-size:15.5px}
  .bigact{min-height:86px;padding:17px}
  .wiz{padding:20px;border-radius:var(--r)}
  .srow{padding:16px}
}

/* =========================================================
   پرداخت نهایی رابط — هم‌خانواده با رازقی‌گرام
   ========================================================= */

/* سایه‌های نرم‌تر برای کارت‌ها و مودال */
:root{
  --shadow-1:0 1px 1px rgba(90,66,30,.04), 0 6px 18px -12px rgba(90,66,30,.20),
             inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-2:0 2px 4px rgba(90,66,30,.05), 0 16px 36px -16px rgba(90,66,30,.28),
             inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-3:0 32px 70px -24px rgba(50,36,16,.45);
  --tab:62px;
}
[data-theme="dark"]{
  --shadow-1:0 1px 1px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.7),
             inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-3:0 32px 70px -24px rgba(0,0,0,.9);
}

/* ---------- نشان و نوار کناری ---------- */
.brand{gap:11px;padding:18px 18px 17px}
.brand .mark{width:32px;height:32px;color:var(--gold)}
.brand .wm b{font-size:1.02rem;letter-spacing:.06em;color:#F4F0E9;font-weight:800}
.brand .wm>span{font-size:var(--fs-xs);color:var(--chrome-tx-2);letter-spacing:.02em;margin-top:-2px}
.side{box-shadow:var(--shadow-2)}
#nav a{transition:background .12s, color .12s;position:relative}
#nav a.on{background:linear-gradient(to left, rgba(200,157,94,.18), rgba(200,157,94,.04))}
.nav-group{letter-spacing:.04em;text-transform:none;margin-top:4px}
.nav-group:first-child{margin-top:0}

/* ---------- نوار بالا ---------- */
.topbar{min-height:60px;box-shadow:0 1px 0 rgba(35,31,32,.05)}
.crumb{font-size:.88rem}
.whoami-lbl{font-size:var(--fs-xs);color:var(--ink-3)}
.whoami select{border-radius:999px;padding:6px 13px;box-shadow:var(--shadow-1);
  transition:border-color .12s}
.whoami select:hover{border-color:var(--ink-3)}

/* ---------- عمق ملایم به جای خطوط تخت ---------- */
.card,.tblwrap,.simple,.wiz,.scoreq,.bigact,.bigcheck{box-shadow:var(--shadow-1)}
.bigact{transition:box-shadow .15s, border-color .15s, transform .15s}
.bigact:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.modal-box{box-shadow:var(--shadow-3)}
.btn{transition:background .12s,border-color .12s,box-shadow .12s}
.btn.solid,.btn.gold{box-shadow:var(--shadow-1)}
.btn.gold:hover{box-shadow:var(--shadow-2)}
.srow,.pick,.opt,.bigcheck{transition:background .12s,border-color .12s}

/* ---------- صفحه اول: سربرگ برنددار ---------- */
.hero{background:var(--ink);color:#F0EBE2;border-radius:8px;padding:22px 24px;margin-bottom:22px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-block:0;inset-inline-start:-40px;width:190px;
  background:radial-gradient(closest-side, rgba(200,157,94,.22), transparent 72%)}
.hero .hmark{width:44px;height:44px;flex:0 0 auto;color:var(--gold);opacity:.95;position:relative;z-index:1}
.hero .htx{position:relative;z-index:1;flex:1;min-width:0}
.hero h1{font-size:1.4rem;color:#fff;letter-spacing:-.01em}
.hero p{margin:3px 0 0;color:#B3AB9E;font-size:.87rem}
.hero .hrole{position:relative;z-index:1;font-size:var(--fs-xs);color:var(--gold);border:1px solid rgba(200,157,94,.45);
  background:rgba(200,157,94,.12);border-radius:999px;padding:3px 12px;white-space:nowrap}
@media(max-width:600px){.hero{padding:18px;border-radius:6px}.hero .hmark{width:36px;height:36px}.hero h1{font-size:1.2rem}}

/* ---------- آواتار رنگی و پایدار ---------- */
.srow .av,.bigact .ic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.av.c0{background:#F5EBD9;border-color:#DDC08A;color:#7A5A1E}
.av.c1{background:#EAF0EC;border-color:#BBCFC1;color:#3F6249}
.av.c2{background:#EDF1F5;border-color:#C2D2DE;color:#3A566B}
.av.c3{background:#F6EAE6;border-color:#E0C4BB;color:#7E4638}
.av.c4{background:#F1EEF6;border-color:#CDC5DE;color:#4E4467}
.av.c5{background:#F5F0E2;border-color:#DCCFA8;color:#6E5A22}

/* ---------- نوار پایین موبایل ---------- */
.tabbar{display:none}
@media(max-width:860px){
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;inset-block-end:0;z-index:40;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--rule);
    padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -2px 12px rgba(35,31,32,.06)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none;color:var(--ink-3);font-size:var(--fs-xs);font-weight:600;min-height:var(--tab);padding:6px 2px}
  .tabbar a .ti{font-size:1.15rem;line-height:1}
  .tabbar a.on{color:var(--gold-deep)}
  .tabbar a.on .ti{transform:translateY(-1px)}
  main{padding-bottom:calc(var(--tab) + 26px)}
  .tabbar.hide{display:none}
}

/* ---------- ریزه‌کاری‌ها ---------- */
.empty{padding:44px 20px}
.empty b{font-size:1.05rem}
.pill{letter-spacing:0}
h2{letter-spacing:-.005em}
.sec>h2{border-bottom-width:1px;border-color:var(--rule);padding-bottom:9px}
.sec>h2::before{content:"";display:inline-block;width:3px;height:1.05em;background:var(--gold);
  border-radius:2px;margin-inline-end:2px}
thead th{letter-spacing:.01em}
.verdict{box-shadow:var(--shadow-1)}
.verdict h3{display:flex;align-items:center;gap:8px}
.note{box-shadow:var(--shadow-1)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D6D0C5;border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#BEB7A9}
::-webkit-scrollbar-track{background:transparent}

@media print{
  .side,.topbar,.tabbar,.acts,.modal,.toast{display:none!important}
  .shell{grid-template-columns:1fr}
  main{padding:0}
  body{background:#fff}
  .card,.tblwrap,.simple{box-shadow:none;border-color:#ccc}
}


/* =========================================================
   ۲) تبلت — چیدمان اصلی برنامه
   ≥۱۱۰۰ نوار کامل · ۷۶۰ تا ۱۰۹۹ نوار آیکونی · <۷۶۰ نوار پایین
   ========================================================= */
#nav a .ni{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;opacity:.9}
#nav a .nl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* نوار کناری جمع‌شده — با انتخاب خود کاربر */
@media(min-width:1100px){
body.railed .shell{grid-template-columns:var(--rail) 1fr}
body.railed .side{width:var(--rail);overflow:visible}
body.railed .brand{justify-content:center;padding:18px 0 16px}
body.railed .brand .wm{display:none}
body.railed .brand::after{inset-inline:14px}
body.railed .nav-group{padding:16px 0 6px;text-align:center;font-size:.58rem;opacity:.65}
body.railed #nav a{justify-content:center;padding:11px 0;gap:0;position:relative}
body.railed #nav a .nl{display:none}
body.railed #nav a .ct{position:absolute;top:5px;inset-inline-end:13px;margin:0;font-size:.6rem;padding:0 5px}
body.railed #nav a .ni{width:22px;height:22px}
body.railed .whochip{margin:0 10px 10px;padding:10px 0;justify-content:center}
body.railed .whochip .tx,body.railed .whochip .sw{display:none}
}

@media (min-width:760px) and (max-width:1099px){
  .shell{grid-template-columns:var(--rail) 1fr}
  .side{width:var(--rail);position:sticky;transform:none !important;overflow:visible}
  .brand{justify-content:center;padding:18px 0 16px}
  .brand .wm{display:none}
  .brand::after{inset-inline:14px}
  .nav-group{padding:16px 0 6px;text-align:center;font-size:.58rem;opacity:.65}
  #nav a{justify-content:center;padding:11px 0;gap:0;position:relative}
  #nav a .nl{display:none}
  #nav a .ct{position:absolute;top:5px;inset-inline-end:13px;margin:0;font-size:.6rem;padding:0 5px}
  #nav a .ni{width:22px;height:22px}
  .whochip{margin:0 10px 10px;padding:10px 0;justify-content:center}
  .whochip .tx,.whochip .sw{display:none}
  .tabbar{display:none}
  main{padding:26px 30px 40px}
  .topbar{padding:0 30px}
}

/* تبلت و بالاتر: ستون‌بندی سخاوتمندانه‌تر */
@media (min-width:760px){
  .bigacts{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  main{padding-bottom:48px}
}

/* =========================================================
   ۳) کلید تم روشن/تیره
   ========================================================= */
.themebtn{background:none;border:1px solid var(--rule);color:var(--ink-2);border-radius:999px;
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease)}
.themebtn:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-wash)}
.themebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.themebtn .moon{display:none}
[data-theme="dark"] .themebtn .sun{display:none}
[data-theme="dark"] .themebtn .moon{display:block}

/* در تم تیره سربرگ نباید سیاهِ روی سیاه شود */
[data-theme="dark"] .hero{background:var(--card-2);border:1px solid var(--rule)}
[data-theme="dark"] .hero h1{color:var(--ink)}
[data-theme="dark"] .hero p{color:var(--ink-2)}
[data-theme="dark"] .hero .hrole{background:var(--gold-wash);color:var(--gold-deep);border-color:var(--gold-line)}
[data-theme="dark"] .btn.gold{color:var(--gold-ink)}
[data-theme="dark"] .btn.solid{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
[data-theme="dark"] .whochip .av{color:var(--gold-ink)}
[data-theme="dark"] .topbar{background:rgba(18,16,17,.86)}
[data-theme="dark"] .tabbar{background:rgba(18,16,17,.94)}
[data-theme="dark"] tbody tr:hover td{background:var(--card-2)}
[data-theme="dark"] .srow:hover{background:var(--card-2)}

/* تغییر تم نباید پرش رنگی بدهد */
body,.side,.topbar,.card,.simple,.tblwrap,.scoreq,.bigact,.wiz,.modal-box{
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease)}
@media (prefers-reduced-motion:reduce){
  body,.side,.topbar,.card,.simple,.tblwrap,.scoreq,.bigact,.wiz,.modal-box{transition:none}
}

/* =========================================================
   ۴) لایه گرافیکی — سربرگ جمع‌شونده، ظهور با اسکرول، نمودار
   همه با transform و opacity کار می‌کنند تا روی تبلت کند نشود.
   ========================================================= */

/* ---------- ظهور تدریجی با اسکرول ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .55s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
}

/* ---------- سربرگ بزرگ ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;gap:16px;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(200,157,94,.34), transparent 58%),
    radial-gradient(90% 120% at 8% 120%, rgba(200,157,94,.14), transparent 60%),
    linear-gradient(152deg, #2A2425 0%, #161314 62%, #100E0F 100%);
  border:1px solid rgba(200,157,94,.2);
  border-radius:16px;padding:30px 32px;margin-bottom:24px;
  display:flex;align-items:center;gap:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, var(--shadow-2);
  transition:padding .34s var(--ease), border-radius .34s var(--ease), margin .34s var(--ease)}

/* بافت ریز — از نزدیک دیده می‌شود، از دور فقط عمق می‌دهد */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px)}

/* هاله طلایی که آرام نفس می‌کشد */
.hero::after{content:"";position:absolute;z-index:-1;inset-block:-60%;inset-inline-end:-14%;
  width:52%;background:radial-gradient(closest-side, rgba(200,157,94,.30), transparent 70%);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}

.hero .hmark{width:38px;height:38px;flex:0 0 auto;color:var(--gold);
  filter:drop-shadow(0 3px 12px rgba(200,157,94,.45));
  transition:width .34s var(--ease), height .34s var(--ease)}
.hero .htx{flex:1;min-width:0}
.hero h1{color:#FBF7F1;font-size:var(--fs-2xl);letter-spacing:-.02em;
  transition:font-size .34s var(--ease)}
.hero p{color:#B7ADA0;font-size:var(--fs-xs);margin:3px 0 0}
.hero .hrole{align-self:flex-start;background:rgba(200,157,94,.14);color:#E7CFA6;
  border:1px solid rgba(200,157,94,.34);border-radius:999px;padding:4px 13px;
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}

/* جمع شدن هنگام اسکرول */
body.scrolled .hero{padding:16px 22px;border-radius:12px;margin-bottom:18px}
body.scrolled .hero .hmark{width:30px;height:30px}
body.scrolled .hero h1{font-size:var(--fs-lg)}
body.scrolled .hero p{display:none}

/* نوار بالا هنگام اسکرول جامدتر می‌شود */
.topbar{transition:box-shadow .3s var(--ease), background .3s var(--ease)}
body.scrolled .topbar{box-shadow:0 1px 0 var(--rule), 0 10px 24px -20px rgba(0,0,0,.5)}

/* ---------- نوار وضعیت امروز ---------- */
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:26px}
.tile{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:17px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow-1);transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--gold-line)}
/* خط طلایی که هنگام هاور عبور می‌کند */
.tile::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.tile:hover::after{transform:scaleX(1)}
.tile .tv{flex:1;min-width:0}
.tile .tv b{display:block;font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.tile .tv span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.tile.alert .tv b{color:var(--stop)}
.tile.good .tv b{color:var(--ok)}

/* ---------- حلقه پیشرفت ---------- */
.ring{width:46px;height:46px;flex:0 0 auto;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.ring .bgc{stroke:var(--rule)}
.ring .fgc{stroke:var(--gold);stroke-dasharray:113;stroke-dashoffset:113;
  transition:stroke-dashoffset 1.1s var(--ease)}
.ring.ok .fgc{stroke:var(--ok)}
.ring.bad .fgc{stroke:var(--stop)}
.ringwrap{position:relative;flex:0 0 auto;display:grid;place-items:center}
.ringwrap .rl{position:absolute;font-size:var(--fs-xs);font-weight:800;color:var(--ink-2)}

/* ---------- نمودار میله‌ای ---------- */
.chart{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-1);margin-bottom:22px}
.chart > h3{margin-bottom:3px}
.chart > .cs{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:18px}
.bars{display:flex;align-items:flex-end;gap:10px;height:132px;padding-bottom:26px;position:relative}
.bars::before{content:"";position:absolute;inset-inline:0;bottom:26px;height:1px;background:var(--rule)}
.bar2{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;position:relative}
.bar2 i{display:block;width:100%;max-width:46px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(200,157,94,.55) 100%);
  height:0;transition:height .9s var(--ease)}
.bar2.g i{background:linear-gradient(180deg, var(--ok) 0%, rgba(63,107,78,.5) 100%)}
.bar2.r i{background:linear-gradient(180deg, var(--stop) 0%, rgba(138,53,44,.5) 100%)}
.bar2 em{position:absolute;bottom:-24px;font-style:normal;font-size:var(--fs-xs);color:var(--ink-3);
  white-space:nowrap}
.bar2 u{position:absolute;text-decoration:none;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);
  opacity:0;transition:opacity .35s var(--ease) .5s}
.bar2.in u{opacity:1}

/* ---------- کارت‌های اقدام، غنی‌تر ---------- */
.bigact{position:relative;overflow:hidden;border-radius:var(--r)}
.bigact::before{content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(90% 120% at 100% 0%, rgba(200,157,94,.13), transparent 62%);
  transition:opacity .3s var(--ease)}
.bigact:hover::before{opacity:1}
.bigact .ic{transition:transform .28s var(--ease), background .2s var(--ease)}
.bigact:hover .ic{transform:scale(1.07) rotate(-3deg)}
.bigact > *{position:relative}

/* ---------- شمارنده ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* =========================================================
   ۵) اجزای داده — دونات، گیج، میله انباشته، روند، نوار حرارتی
   ========================================================= */

/* ---------- دونات ---------- */
.donut{position:relative;width:var(--dsz,140px);height:var(--dsz,140px);flex:0 0 auto}
.donut svg{width:100%;height:100%}
.donut .dbg{fill:none;stroke:var(--rule-soft);stroke-width:13}
.donut .dseg{fill:none;stroke-width:13;stroke-linecap:butt;
  transition:stroke-dasharray 1s var(--ease)}
.donut .dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.25}
.donut .dc b{display:block;font-size:calc(var(--dsz,140px)*.22);font-weight:800;letter-spacing:-.03em}
.donut .dc span{display:block;font-size:var(--fs-xs);color:var(--ink-3)}

.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.legend li{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm)}
.legend li i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.legend li span{flex:1;color:var(--ink-2)}
.legend li b{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- گیج ---------- */
.gauge{position:relative;width:124px;flex:0 0 auto}
.gauge svg{width:100%;display:block}
.gauge path{fill:none;stroke-width:9;stroke-linecap:round}
.gauge .gbg{stroke:var(--rule-soft)}
.gauge .gfg{stroke:var(--gold);transition:stroke-dashoffset 1.2s var(--ease)}
.gauge.ok .gfg{stroke:var(--ok)}
.gauge.bad .gfg{stroke:var(--stop)}
.gauge .gc{position:absolute;inset-block-end:0;inset-inline:0;text-align:center;line-height:1.2}
.gauge .gc b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.gauge .gc span{display:block;font-size:var(--fs-xs);color:var(--ink-3)}

/* ---------- میله افقی انباشته ---------- */
.stackwrap{display:grid;gap:11px}
.strow{display:grid;grid-template-columns:96px 1fr 34px;gap:11px;align-items:center}
.strow .sl{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strow .sbar{display:flex;height:24px;border-radius:6px;overflow:hidden;background:var(--rule-soft)}
.strow .sbar i{width:0;display:grid;place-items:center;transition:width .9s var(--ease);min-width:0}
.strow .sbar i em{font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--paper);opacity:0;
  transition:opacity .3s var(--ease) .6s}
.strow .sbar i.in em{opacity:1}
.strow .st{font-size:var(--fs-sm);font-weight:700;text-align:end;font-variant-numeric:tabular-nums}
@media(max-width:600px){.strow{grid-template-columns:74px 1fr 30px}}

/* ---------- روند (خط؛ بقیه اجزا در بخش ۲۸) ---------- */
.trend .tline{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}

/* =========================================================
   ۶) نقشه چرخه — امضای بصری محصول
   ========================================================= */
.cyc{background:
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--rule);border-radius:16px;padding:24px;margin-bottom:26px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.cyc::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:3px;
  background:linear-gradient(90deg, var(--stop), var(--warn), var(--gold), var(--ok));opacity:.75}
.cyc > header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.cyc > header > div:first-child{flex:1;min-width:200px}
.cyc .cs{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
/* =========================================================
   ۷) چیدمان داشبورد
   ========================================================= */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.grid3{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:1099px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.panel > h3{margin-bottom:3px}
.panel > .cs{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:16px}
.panel .mid{flex:1;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.panel .foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-soft);
  font-size:var(--fs-xs);color:var(--ink-3)}

/* فهرست توجه — چیزهایی که باید دیده شوند */
.attn{display:grid;gap:9px}
.attn a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--rule);background:var(--card);text-decoration:none;color:var(--ink);
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.attn a:hover{border-color:var(--gold);transform:translateX(-3px)}
.attn a .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ink-3)}
.attn a.r .dot{background:var(--stop)} .attn a.y .dot{background:var(--warn)}
.attn a.g .dot{background:var(--ok)} .attn a.b .dot{background:var(--info)}
.attn a .tx{flex:1;min-width:0}
.attn a .tx b{display:block;font-size:var(--fs-sm);font-weight:700}
.attn a .tx small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.attn a .chev{color:var(--ink-3)}

/* =========================================================
   ۹) برد کار — ستون‌بندی مرحله‌ها
   ========================================================= */
.board{display:grid;grid-template-columns:repeat(5,minmax(184px,1fr));gap:13px;
  overflow-x:auto;padding-bottom:8px;margin-bottom:22px}
@media(max-width:1099px){.board{grid-template-columns:repeat(3,minmax(184px,1fr))}}
@media(max-width:700px){.board{grid-template-columns:repeat(2,minmax(160px,1fr))}}
.bcol{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:12px;min-height:140px}
.bcol > h4{display:flex;align-items:center;gap:8px;margin-bottom:11px;font-size:var(--fs-sm)}
.bcol > h4 .bdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.bcol > h4 .bn{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--ink-3);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:0 8px;font-weight:700}
.bcol.hot{background:linear-gradient(180deg,var(--stop-bg),var(--paper-2));border-color:var(--stop-br)}
.bcard{display:block;width:100%;text-align:start;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;padding:12px 13px;margin-bottom:9px;cursor:pointer;font:inherit;color:inherit;
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease)}
.bcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--gold)}
.bcard b{display:block;font-size:var(--fs-sm);font-weight:700;line-height:1.5}
.bcard .bmeta{display:flex;align-items:center;gap:7px;margin-top:9px}
.bcard .bmeta .av{width:22px;height:22px;font-size:.65rem}
.bcard .bmeta small{font-size:var(--fs-xs);color:var(--ink-3);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .prio{font-size:var(--fs-xs);font-weight:700;border-radius:999px;padding:0 7px;border:1px solid}
.bcard .prio.f{color:var(--stop);background:var(--stop-bg);border-color:var(--stop-br)}
.bcard .prio.m{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-br)}
.bempty{font-size:var(--fs-xs);color:var(--ink-3);text-align:center;padding:16px 6px}

/* =========================================================
   ۱۰) طبقه‌بندی مشاغل و پرونده فرد
   ========================================================= */
.gbadge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 13px 4px 8px;
  background:var(--gold-wash);border:1px solid var(--gold-line);font-size:var(--fs-xs);font-weight:700}
.gbadge b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);font-size:var(--fs-xs);font-weight:800}
.gbadge.oc{background:var(--chrome);border-color:var(--gold-line);color:#EFE6D8}
.gbadge.oc b{background:var(--gold);color:var(--gold-ink)}

/* نردبان گروه‌ها */
.ladder{display:grid;gap:5px}
.lrow{display:grid;grid-template-columns:56px 1fr 120px 62px;gap:12px;align-items:center;
  padding:8px 12px;border-radius:9px;border:1px solid var(--rule);background:var(--card);
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.lrow:hover{border-color:var(--gold);transform:translateX(-3px)}
.lrow .lg{display:grid;place-items:center;height:30px;border-radius:8px;background:var(--paper-2);
  font-weight:800;font-size:var(--fs-sm)}
.lrow .lt{font-size:var(--fs-sm);font-weight:700}
.lrow .lp{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.lrow .ln{display:flex;justify-content:flex-end;align-items:center;padding-inline-start:7px}
.lrow .ln .av{width:26px;height:26px;font-size:.66rem;margin-inline-start:-7px;
  border:2px solid var(--card);position:relative}
.lrow .ln .av:first-child{margin-inline-start:0}
.lrow .ln .more{font-size:var(--fs-xs);color:var(--ink-3);align-self:center;margin-inline-start:6px}
.lrow.oc{background:linear-gradient(90deg,var(--chrome),var(--chrome-2));border-color:var(--gold-line);color:#EFE6D8}
.lrow.oc .lg{background:rgba(200,157,94,.2);color:var(--gold)}
.lrow.oc .lp{color:#9C9285}
.lrow.here{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-wash)}
@media(max-width:700px){.lrow{grid-template-columns:46px 1fr 70px}.lrow .ln{display:none}}

/* امتیاز عوامل */
.fbars{display:grid;gap:11px}
.frow{display:grid;grid-template-columns:132px 1fr 62px;gap:12px;align-items:center}
.frow .fl{font-size:var(--fs-sm);color:var(--ink-2)}
.frow .ft{height:10px;border-radius:999px;background:var(--rule-soft);overflow:hidden}
.frow .ft i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width .85s var(--ease)}
.frow .fv{font-size:var(--fs-xs);color:var(--ink-3);text-align:end;font-variant-numeric:tabular-nums}
@media(max-width:600px){.frow{grid-template-columns:96px 1fr 54px}}

/* پرونده فرد */
.pcard{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(150deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--rule);border-radius:16px;padding:22px 24px;margin-bottom:22px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.pcard::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:linear-gradient(180deg,var(--gold),transparent)}
.pcard .pav{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  font-size:1.5rem;font-weight:800;flex:0 0 auto}
.pcard .pi{flex:1;min-width:190px}
.pcard .pi h2{font-size:var(--fs-xl)}
.pcard .pi .psub{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px}
.pcard .pmeta{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.pcard .pts{text-align:center;flex:0 0 auto}
.pcard .pts b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.pcard .pts span{font-size:var(--fs-xs);color:var(--ink-3)}

/* =========================================================
   ۱۱) جوّ — نور، عمق، بافت
   یک لایه پس‌زمینه ساکن پشت کل برنامه. نه محتوا را می‌پوشاند،
   نه جای چیزی را می‌گیرد؛ فقط صفحه را از حالت کاغذ خشک درمی‌آورد.
   ========================================================= */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.55;
  will-change:transform}
.aurora .a1{width:52vw;height:52vw;inset-block-start:-16vw;inset-inline-end:-12vw;
  background:radial-gradient(closest-side, rgba(200,157,94,.55), transparent 72%);
  animation:drift1 38s ease-in-out infinite}
.aurora .a2{width:44vw;height:44vw;inset-block-end:-18vw;inset-inline-start:-10vw;
  background:radial-gradient(closest-side, rgba(122,150,132,.34), transparent 72%);
  animation:drift2 46s ease-in-out infinite}
.aurora .a3{width:36vw;height:36vw;inset-block-start:38%;inset-inline-start:42%;
  background:radial-gradient(closest-side, rgba(206,170,132,.30), transparent 72%);
  animation:drift3 54s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5vw,6vh,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(6vw,-5vh,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}
  50%{transform:translate3d(-7vw,-7vh,0) scale(1.16)}}
[data-theme="dark"] .aurora i{opacity:.42;filter:blur(110px)}
[data-theme="dark"] .aurora .a1{background:radial-gradient(closest-side, rgba(200,157,94,.42), transparent 72%)}
[data-theme="dark"] .aurora .a2{background:radial-gradient(closest-side, rgba(90,120,140,.32), transparent 72%)}
[data-theme="dark"] .aurora .a3{background:radial-gradient(closest-side, rgba(150,90,70,.26), transparent 72%)}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* بافت ریز روی کل صفحه — از نزدیک دیده می‌شود، از دور فقط جنس می‌دهد */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] .grain{opacity:.22}

body{background:transparent}
html{background:var(--paper)}

/* =========================================================
   ۱۲) سطح شیشه‌ای — کارت‌ها، نوارها، مودال
   ========================================================= */
.card,.panel,.simple,.tblwrap,.chart,.cyc,.tile,.bigact,.wiz,.scoreq,.bcol,.org-unit,.pcard,.attn a,.lrow{
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35)}

.topbar{background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent)}
.side{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

.modal{background:color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-box{border-radius:24px;box-shadow:var(--shadow-3);border:1px solid var(--rule)}
.modal-box > footer{border-radius:0 0 24px 24px}

/* =========================================================
   ۱۳) نور دنبال‌کننده اشاره‌گر
   هر سطحی که کلاس lit دارد، هاله‌ای نرم زیر نشانگر می‌سازد.
   ========================================================= */
.lit{position:relative}
.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(200,157,94,.16), transparent 62%)}
.lit:hover::after{opacity:1}
[data-theme="dark"] .lit::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
  rgba(212,172,114,.14), transparent 62%)}

/* =========================================================
   ۱۴) حرکت نرم‌تر و فنری
   ========================================================= */
.bigact,.tile,.bcard,.attn a,.lrow,.srow,.btn{
  transition:transform .3s var(--spring), box-shadow .3s var(--ease),
             border-color .25s var(--ease), background .25s var(--ease)}
.bigact:hover,.tile:hover,.bcard:hover{
  transform:translateY(-4px) scale(1.012)}
.btn:active,.bigact:active,.bcard:active{transform:scale(.985)}

/* دکمه طلایی — گرادیان با درخشش داخلی */
.btn.gold{background:linear-gradient(180deg, #DCB478 0%, var(--gold) 55%, #B98B4C 100%);
  border-color:#A87D42;color:#1E1A1B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -8px rgba(160,120,60,.6)}
.btn.gold:hover{background:linear-gradient(180deg, #E4C08A 0%, #CFA468 55%, #BE9052 100%)}
.btn.solid{background:linear-gradient(180deg, #332C2D 0%, var(--chrome) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px -8px rgba(0,0,0,.5)}

/* =========================================================
   ۱۵) سربرگ — تیتر گرادیانی و مه طلایی
   ========================================================= */
.hero{border-radius:20px;padding:20px 24px;margin-bottom:18px}
.hero h1{background:linear-gradient(92deg, #FFF8EC 0%, #EBD3AB 44%, #C89D5E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:var(--fs-xl);letter-spacing:-.03em}
body.scrolled .hero{padding:13px 18px;border-radius:14px}
body.scrolled .hero h1{font-size:var(--fs-lg)}
[data-theme="dark"] .hero{background:
    radial-gradient(120% 140% at 88% -20%, rgba(200,157,94,.26), transparent 58%),
    linear-gradient(152deg, #221D1E 0%, #141112 62%, #0C0A0B 100%);
  border-color:rgba(200,157,94,.22)}

/* =========================================================
   ۱۶) نقشه چرخه — قاب کارت (خود شمسه در بخش ۳۰ است)
   ========================================================= */
.cyc{border-radius:26px;padding:28px}
.cyc::before{height:2px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
/* =========================================================
   ۱۷) نمودارها — لبه گرد، خط درخشان
   ========================================================= */
.ring .fgc{filter:drop-shadow(0 0 5px rgba(200,157,94,.45))}
.ring.ok .fgc{filter:drop-shadow(0 0 5px rgba(63,107,78,.45))}
.gauge .gfg{filter:drop-shadow(0 0 6px rgba(200,157,94,.4))}
.donut .dseg{stroke-linecap:round}
.trend .tline{stroke-width:2.8;filter:drop-shadow(0 3px 8px rgba(200,157,94,.35))}
.bar2 i{border-radius:10px 10px 4px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(160,120,60,.55)}
.strow .sbar{border-radius:999px;height:26px}
.strow .sbar i:first-child{border-start-end-radius:999px;border-end-end-radius:999px}
.strow .sbar i:last-child{border-start-start-radius:999px;border-end-start-radius:999px}

/* =========================================================
   ۱۸) ریزه‌کاری‌ها
   ========================================================= */
.tile{border-radius:20px;padding:20px}
.tile .tv b{font-size:1.95rem}
.bigact{padding:20px;border-radius:20px}
.bigact .ic{border-radius:14px;width:46px;height:46px;
  background:linear-gradient(160deg, var(--gold-wash), color-mix(in srgb,var(--gold) 22%, transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.panel{border-radius:22px;padding:24px}
.simple{border-radius:20px}
.srow:hover{background:color-mix(in srgb, var(--gold-wash) 55%, transparent)}
.bcol{border-radius:20px}
.bcard{border-radius:16px}
.pcard{border-radius:24px}
.tblwrap{border-radius:20px}
.gbadge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.av,.pcard .pav{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px -4px rgba(90,66,30,.5)}
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
[data-theme="dark"] .pill,[data-theme="dark"] .gbadge,[data-theme="dark"] .av{box-shadow:none}
.empty{border-radius:20px}

/* =========================================================
   ۱۹) پرداخت نهایی
   ========================================================= */

/* درخشش آرامی که روی تیتر سربرگ می‌گذرد */
.hero h1{background-size:220% 100%;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none}}

/* عنوان بخش‌ها — خط طلایی کوتاه به‌جای خط کامل */
.sec > h2{border-bottom:0;position:relative;padding-bottom:12px}
.sec > h2::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:38px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 25%, transparent))}
main > h2{position:relative;padding-bottom:11px;margin-bottom:14px}
main > h2::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:34px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 25%, transparent))}

/* آواتارها — گرادیان به‌جای رنگ تخت */
.av.c0{background:linear-gradient(145deg,#D6A96A,#B4854A);color:#241B10}
.av.c1{background:linear-gradient(145deg,#8FB39C,#5F8571);color:#12211A}
.av.c2{background:linear-gradient(145deg,#9DB4C8,#6D8DA8);color:#101A23}
.av.c3{background:linear-gradient(145deg,#C9A0A0,#A57070);color:#241414}
.av.c4{background:linear-gradient(145deg,#B7A8CB,#8C7AA6);color:#1B1526}
.av.c5{background:linear-gradient(145deg,#CBB98F,#A3905F);color:#221D10}

/* نوار اسکرول نرم */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 45%, transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold) 40%, transparent);
  border-radius:999px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 65%, transparent);
  background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

::selection{background:color-mix(in srgb,var(--gold) 55%, transparent);color:var(--ink)}

/* حلقه فوکوس نرم‌تر */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}

/* جدول‌ها کمی هوادار */
thead th{background:color-mix(in srgb,var(--paper-2) 70%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
td{border-bottom:1px solid var(--rule-soft)}
tbody tr{transition:background .2s var(--ease)}

/* نوار پایین موبایل — شیشه‌ای */
.tabbar{backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  background:color-mix(in srgb,var(--paper) 78%, transparent);
  border-top:1px solid color-mix(in srgb,var(--rule) 70%, transparent)}

/* ورودی‌ها نرم‌تر */
.form input,.form select,.form textarea,.tbl-tools input,.tbl-tools select,.whoami select,.wiz input,.wiz textarea,.wiz select{
  border-radius:12px;background:color-mix(in srgb,var(--card) 88%, transparent);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%, transparent);outline:none}
.checks{border-radius:14px}
.btn{border-radius:12px}
.pill{border-radius:999px}

/* یادداشت‌ها */
.note{border-radius:14px;backdrop-filter:blur(10px)}
.verdict{border-radius:18px}
.toast{border-radius:14px;backdrop-filter:blur(12px);box-shadow:var(--shadow-3)}

/* =========================================================
   ۲۰) گزارش‌ها
   ========================================================= */
.repgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.repcard{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:20px;
  box-shadow:var(--shadow-1);min-height:104px;
  transition:transform .3s var(--spring), box-shadow .3s var(--ease), border-color .25s var(--ease)}
.repcard:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--shadow-2);border-color:var(--gold)}
.repcard .ic{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--gold-wash),color-mix(in srgb,var(--gold) 20%, transparent));
  border:1px solid var(--gold-line);color:var(--gold-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.repcard b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.5}
.repcard small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7;margin-top:3px}

.reptools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.reptools select{font:inherit;font-size:var(--fs-sm);padding:9px 14px;border:1px solid var(--rule);
  border-radius:12px;background:var(--card);color:var(--ink)}
.reptools .sp{margin-inline-start:auto}
.repmeta{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:16px}

/* چاپ — فقط گزارش روی کاغذ برود */
@media print{
  .side,.topbar,.tabbar,.aurora,.grain,.reptools,.phead .acts,#toast,.modal{display:none !important}
  .shell{grid-template-columns:1fr}
  main{padding:0}
  html,body{background:#fff}
  .panel,.tblwrap,.card{box-shadow:none;border-color:#CCC;backdrop-filter:none;background:#fff;
    border-radius:6px;break-inside:avoid}
  .today,.repsum{break-inside:avoid}
  table{font-size:10.5pt}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  .prfoot{display:block !important;margin-top:14px;font-size:9pt;color:#666;
    border-top:1px solid #CCC;padding-top:8px}
}
.prfoot{display:none}

/* =========================================================
   ۲۱) هرم مجموعه — باز شدن مرحله‌به‌مرحله
   ========================================================= */
.tree2{display:grid;gap:8px}
.tnode2{border:1px solid var(--rule);border-radius:16px;background:var(--card);overflow:hidden;
  box-shadow:var(--shadow-1);transition:border-color .2s var(--ease)}
.tnode2:hover{border-color:var(--gold-line)}
.tnode2 > .th{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;
  background:none;border:0;font:inherit;color:inherit;padding:15px 18px}
.tnode2 > .th:hover{background:color-mix(in srgb,var(--gold-wash) 45%, transparent)}
.tnode2 > .th .tw{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-3);font-size:.8rem;
  transition:transform .25s var(--spring), background .2s var(--ease), color .2s var(--ease)}
.tnode2.open > .th .tw{transform:rotate(90deg);background:var(--gold-wash);color:var(--gold-deep)}
[dir=rtl] .tnode2 > .th .tw{transform:rotate(180deg)}
[dir=rtl] .tnode2.open > .th .tw{transform:rotate(90deg)}
.tnode2 > .th .tt{flex:1;min-width:0}
.tnode2 > .th .tt b{display:block;font-size:var(--fs-md);font-weight:800}
.tnode2 > .th .tt small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.tnode2 > .th .tm{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.tnode2 > .th .fillbar{width:104px;height:8px;border-radius:999px;background:var(--rule-soft);overflow:hidden}
.tnode2 > .th .fillbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.tnode2 > .th .fillbar.full i{background:linear-gradient(90deg,#3F6B4E,#6FA07E)}
.tnode2 > .th .fillbar.low i{background:linear-gradient(90deg,#8A352C,#C2685C)}
.tnode2 > .th .cnt{font-size:var(--fs-sm);font-weight:800;font-variant-numeric:tabular-nums;min-width:74px;text-align:end}
.tnode2 > .th .cnt s{text-decoration:none;color:var(--ink-3);font-weight:600;font-size:var(--fs-xs)}
.tnode2 > .tb{display:none;padding:2px 18px 16px;border-top:1px solid var(--rule-soft)}
.tnode2.open > .tb{display:block;animation:slideIn .28s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tnode2.open > .tb{animation:none}}

.tnode2.lv1 > .th{padding:18px 20px}
.tnode2.lv1 > .th .tt b{font-size:var(--fs-lg)}
.tnode2.lv2{border-radius:13px;background:color-mix(in srgb,var(--card-2) 90%, transparent)}
.tnode2.lv2 > .th{padding:12px 14px}
.tnode2.lv3{border-radius:11px;border-style:dashed}
.tnode2.lv3 > .th{padding:10px 13px}
.tnode2.lv3 > .th .tt b{font-size:var(--fs-sm)}

/* فهرست افراد داخل پست */
.plist{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 2px}
.plist a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:4px 12px 4px 5px;
  font-size:var(--fs-xs);transition:border-color .18s var(--ease), transform .18s var(--spring)}
.plist a:hover{border-color:var(--gold);transform:translateY(-2px)}
.plist a .av{width:24px;height:24px;font-size:.62rem}
.plist .vac{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--stop-br);
  color:var(--stop);background:var(--stop-bg);border-radius:999px;padding:5px 12px;font-size:var(--fs-xs)}
.plist .more2{align-self:center;font-size:var(--fs-xs);color:var(--ink-3)}

/* =========================================================
   ۲۲) هرم گروه‌های شغلی
   ========================================================= */
.pyr{display:grid;gap:5px}
.pyrow{display:grid;grid-template-columns:96px 1fr 54px;gap:11px;align-items:center}
.pyrow .pl{font-size:var(--fs-xs);color:var(--ink-2);text-align:end;white-space:nowrap}
.pyrow .pbwrap{display:flex;justify-content:center}
.pyrow .pb{height:22px;border-radius:7px;width:0;transition:width .9s var(--ease);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 55%, transparent),var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pyrow .pn{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pyrow.top .pb{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.pyrow.oc .pb{background:linear-gradient(90deg,#1E1A1B,#4A4142)}

/* رتبه‌بندی واحدها */
.rank{display:grid;gap:9px}
.rank a{display:grid;grid-template-columns:22px 1fr 120px 78px;gap:12px;align-items:center;
  padding:11px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--card);
  text-decoration:none;color:var(--ink);
  transition:border-color .18s var(--ease), transform .2s var(--spring)}
.rank a:hover{border-color:var(--gold);transform:translateX(-3px)}
.rank a .no{font-weight:800;color:var(--ink-3);font-size:var(--fs-sm)}
.rank a .nm{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank a .rb{height:9px;border-radius:999px;background:var(--rule-soft);overflow:hidden}
.rank a .rb i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width .9s var(--ease)}
.rank a .rv{font-size:var(--fs-xs);color:var(--ink-3);text-align:end;font-variant-numeric:tabular-nums}
@media(max-width:700px){.rank a{grid-template-columns:20px 1fr 64px}.rank a .rb{display:none}}

/* =========================================================
   ۲۳) کارتابل — نوار مراحل و زنگ اعلان
   ========================================================= */
.chainbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:22px;
  background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:14px 18px;
  box-shadow:var(--shadow-1)}
.cstep{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--rule);background:var(--paper-2);flex:1;min-width:130px;
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.cstep .cn{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:800;background:var(--card);border:1px solid var(--rule);color:var(--ink-3)}
.cstep .cl{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3)}
.cstep.ok{background:var(--ok-bg);border-color:var(--ok-br)}
.cstep.ok .cn{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.cstep.ok .cl{color:var(--ok)}
.cstep.now{background:var(--gold-wash);border-color:var(--gold)}
.cstep.now .cn{background:var(--gold);border-color:var(--gold-deep);color:var(--gold-ink)}
.cstep.now .cl{color:var(--gold-deep)}
.cstep.bad{background:var(--stop-bg);border-color:var(--stop-br)}
.cstep.bad .cn{background:var(--stop);border-color:var(--stop);color:var(--paper)}
.cstep.bad .cl{color:var(--stop)}
.carrow{color:var(--ink-3);display:grid;place-items:center;flex:0 0 auto}
.carrow svg{width:14px;height:14px}
@media(max-width:860px){.chainbar{gap:5px;padding:12px}.carrow{display:none}}

/* زنگ اعلان در نوار بالا */
.bellbtn{position:relative;background:none;border:1px solid var(--rule);color:var(--ink-2);
  border-radius:999px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease)}
.bellbtn:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-wash)}
.bellbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bellbtn .bdg{position:absolute;inset-block-start:-4px;inset-inline-start:-4px;min-width:18px;height:18px;
  border-radius:999px;background:var(--stop);color:var(--paper);font-size:var(--fs-xs);font-weight:800;
  display:grid;place-items:center;padding:0 5px;border:2px solid var(--paper)}
.bellbtn .bdg[hidden]{display:none}

/* =========================================================
   ۲۵) پرونده فرد — عکس و اطلاعات
   ========================================================= */
.pphoto{width:104px;height:104px;border-radius:22px;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--gold-line);background:var(--gold-wash);box-shadow:var(--shadow-1)}
.pphoto svg{width:100%;height:100%;display:block}
.pcap{display:block;text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px}
.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
@media(max-width:600px){.infogrid{grid-template-columns:1fr}}
.inforow{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.inforow dt{flex:0 0 auto;min-width:112px;font-size:var(--fs-xs);color:var(--ink-3)}
.inforow dd{margin:0;font-size:var(--fs-sm);font-weight:600;flex:1;min-width:0}


/* =========================================================
   ۲۶) نوار کناری جمع‌شونده
   ========================================================= */
.collapse{background:none;border:1px solid var(--rule);color:var(--ink-3);border-radius:10px;
  width:32px;height:32px;display:none;place-items:center;cursor:pointer;flex:0 0 auto;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease)}
.collapse:hover{background:var(--gold-wash);color:var(--gold-deep);border-color:var(--gold)}
@media(min-width:1100px){.collapse{display:grid}}
.collapse svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--spring)}
body.railed .collapse svg{transform:rotate(180deg)}

/* حالت جمع‌شده با body.railed است (بخش ۲ بالا)؛ قواعد تکراری .shell.rail حذف شد */


/* دکمه جمع کردن نوار کناری */
.brand{position:relative}
.railbtn{position:absolute;inset-inline-start:10px;inset-block-start:22px;
  background:none;border:0;cursor:pointer;color:var(--chrome-tx-2);
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  transition:background .15s var(--ease), color .15s var(--ease)}
.railbtn:hover{background:rgba(255,255,255,.08);color:var(--gold)}
.railbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--spring)}
body.railed .railbtn{position:static;margin:10px auto 0}
body.railed .railbtn svg{transform:rotate(180deg)}
/* زیر ۱۱۰۰ نوار خودش آیکونی یا کشویی است؛ دکمه جمع کردن آنجا کاری نمی‌کند */
@media(max-width:1099px){.railbtn{display:none}}


/* =========================================================
   ۲۷) بهینه‌سازی — کارایی و موبایل
   ========================================================= */

/* نوار بالا در موبایل: پیشوند مسیر و برچسب حذف، انتخاب کاربر جمع‌وجور
   (قبلاً ۳۶ پیکسل از عرض صفحه بیرون می‌زد و کل صفحه اسکرول افقی داشت) */
@media(max-width:759px){
  .crumb .cr-root,.whoami-lbl{display:none}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .whoami{min-width:0;flex:0 1 auto}
  .whoami select{max-width:42vw;text-overflow:ellipsis}
  .topbar{gap:8px}
}

/* بخش‌های خارج از دید رسم نمی‌شوند تا صفحه‌های بلند (شکاف، کارکنان، ماتریس) روی
   تبلت سبک بمانند. اندازه تخمینی جلوی پرش نوار اسکرول را می‌گیرد. */
#view .sec{content-visibility:auto;contain-intrinsic-size:auto 520px}
@media print{#view .sec{content-visibility:visible}}

/* ماتریس کار و پست: سلول سبک، سرستون و ستون اول چسبان */
.mx-wrap{max-height:72vh;overflow:auto}
.mx-wrap table{font-size:var(--fs-xs)}
.mx-wrap thead th{position:sticky;top:0;z-index:2;background:var(--paper);
  white-space:nowrap;writing-mode:vertical-rl;padding:10px 4px;vertical-align:bottom;max-height:180px}
.mx-wrap thead th:first-child,.mx-wrap thead th:nth-child(2),.mx-wrap thead th:last-child{writing-mode:horizontal-tb}
.mx-wrap tbody td:first-child,.mx-wrap thead th:first-child{position:sticky;inset-inline-start:0;z-index:1;
  background:var(--paper);min-width:170px}
.mx-wrap thead th:first-child{z-index:3}
.mx-wrap td.mx{text-align:center;padding:0;color:var(--ink-3);min-width:26px}
.mx-wrap td.mx.on{color:var(--ok);font-weight:700;background:var(--ok-bg)}
.mx-wrap tbody tr:hover td{background:color-mix(in srgb, var(--gold) 6%, transparent)}

/* جست‌وجو و «نمایش بیشتر» در فهرست کارکنان */
.emp-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 var(--s4)}
.emp-tools input{flex:1 1 220px;min-width:0}
.more-row td{text-align:center;padding:12px}
.emp-tools input{font:inherit;font-size:.9rem;padding:10px 14px;border:1px solid var(--rule);border-radius:12px;
  color:var(--ink);background:color-mix(in srgb,var(--card) 88%, transparent);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.emp-tools input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%, transparent);outline:none}

/* نوار آیکونی: شمارنده‌های رکورد روی آیکون می‌افتادند و عنوان گروه‌ها در ۷۴ پیکسل
   سه‌خطی می‌شد. در حالت آیکونی شمارنده پنهان و عنوان گروه یک خط جداکننده است. */
@media (min-width:760px) and (max-width:1099px){
  #nav a .ct{display:none}
  .nav-group{font-size:0;padding:0;margin:12px 18px;height:1px;background:var(--chrome-line);opacity:1}
}
@media(min-width:1100px){
  body.railed #nav a .ct{display:none}
  body.railed .nav-group{font-size:0;padding:0;margin:12px 18px;height:1px;background:var(--chrome-line);opacity:1}
}


/* دکمه داخل نوار کناری روی نشان «R» می‌افتاد و کار دکمه نوار بالا را تکرار می‌کرد؛
   حالا فقط وقتی نوار جمع شده دیده می‌شود (برای باز کردن دوباره از همان‌جا) */
body:not(.railed) .railbtn{display:none}


/* =========================================================
   ۲۸) پرونده ۳۶۰ — شرح وظایف، آموزش، معیار، روند و سابقه نمره
   ========================================================= */
.xlist{display:grid}
.xrow{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft)}
.xrow:last-child{border-bottom:0}
.xrow .tx{flex:1;min-width:0}
.xrow .tx b{display:block;font-size:var(--fs-sm);font-weight:700;line-height:var(--lh-tight)}
.xrow .tx small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.xrow .rt{flex:0 0 auto}
.xrow .wn{color:var(--warn)}
.panel .foot .bad{color:var(--stop)}
.jsum{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s2)}
.tsum{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s2)}
.tsum b{display:block;font-size:var(--fs-lg)}
.tsum small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}

/* روند نمره یک نفر (charts.js ← scoreTrend): خط در SVG، نقطه و برچسب‌ها HTML روی آن.
   برچسب خط‌های مرجع در حاشیه سمت راست است تا با نقطه‌ها برخورد نکند. */
.panel > .strend{margin-block:auto}
.trend.strend{padding-top:var(--s4)}
.strend .splot{position:relative;height:120px;margin-inline-start:64px}
.trend.strend svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.strend .sref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 5;opacity:.45;vector-effect:non-scaling-stroke}
.strend .sreft{position:absolute;inset-inline-start:-64px;width:56px;transform:translateY(-50%);
  text-align:end;font-size:var(--fs-xs);line-height:1.2;color:var(--ink-3)}
.strend .spt{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--card);border:2px solid var(--gold);opacity:0;transition:opacity .3s var(--ease) .7s}
.strend .spt::before{content:"";position:absolute;inset:-9px;border-radius:50%}   /* هدف اشاره بزرگ‌تر از نقطه */
.strend .spt.last{background:var(--gold)}
.strend .sval{position:absolute;transform:translate(-50%,-170%);font-size:var(--fs-sm);font-weight:800;
  line-height:1;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease) .8s}
.strend.in .spt,.strend.in .sval{opacity:1}
.strend .slabels{position:relative;height:1.6em;margin-top:var(--s2);margin-inline-start:64px}
.strend .slabels span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-size:var(--fs-xs);color:var(--ink-3)}

/* سابقه ارزیابی: جدول داخل پنل بدون قاب دوم */
.hwrap{overflow-x:auto;margin-inline:calc(var(--s2) * -1)}
.hwrap table{min-width:560px}
.hwrap td.nw{white-space:nowrap;font-size:var(--fs-xs);color:var(--ink-3)}
/* کارت باریک (موبایل و ۷۶۰): هر دوره یک کارت سه‌خطی — دوره، نمره و سطح | بازه و ارزیاب |
   یادداشت. با اسکرول افقی، «پایین‌ترین سطح» که مهم‌ترین ستون است از دید بیرون می‌ماند */
.evh{container-type:inline-size}
@container (max-width:640px){
  .hwrap td.nil{display:none}
  .hwrap table,.hwrap tbody{display:block;min-width:0}
  .hwrap thead{display:none}
  .hwrap tbody tr{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--s1) var(--s3);
    padding:var(--s3) var(--s2);border-bottom:1px solid var(--rule-soft)}
  .hwrap tbody tr:last-child{border-bottom:0}
  .hwrap tbody td{padding:0;border:0}
  .hwrap td:nth-child(1){grid-area:1 / 1;font-weight:700}
  .hwrap td:nth-child(3){grid-area:1 / 2}
  .hwrap td:nth-child(4){grid-area:1 / 3}
  .hwrap td:nth-child(2){grid-area:2 / 1}
  .hwrap td:nth-child(5){grid-area:2 / 2 / 3 / 4;text-align:end;font-size:var(--fs-xs);color:var(--ink-3)}
  .hwrap td:nth-child(6){grid-area:3 / 1 / 4 / 4;font-size:var(--fs-xs);color:var(--ink-2)}
}

/* اطلاعات شخصی و پرسنلی: دوستونه فقط وقتی خود کارت جا دارد. قبلاً در عرض تبلت حداقل عرض
   ستون‌ها کارت را از ستون شبکه بیرون می‌زد و کل صفحه ۷ پیکسل اسکرول افقی می‌خورد */
.pinfo{container-type:inline-size}
.pinfo .inforow dd{overflow-wrap:anywhere}
@container (max-width:470px){.pinfo .inforow dt{min-width:96px}}
@container (max-width:425px){.pinfo .infogrid{grid-template-columns:1fr}}


/* =========================================================
   ۲۹) حرفه‌ای‌سازی — ناوبری، مودال، فرم، جدول، جست‌وجو، سند شغل
   ========================================================= */

/* پرش به محتوا: فقط با فوکوس صفحه‌کلید دیده می‌شود */
.skip{position:fixed;inset-block-start:var(--s3);inset-inline-start:var(--s3);z-index:200;
  padding:var(--s2) var(--s4);border-radius:var(--rs);background:var(--ink);color:var(--paper);
  font-size:var(--fs-sm);font-weight:700;transform:translateY(-180%);transition:transform .2s var(--ease)}
.skip:focus{transform:none;color:var(--paper)}
#view:focus{outline:none}

/* نوار مسیر: والد، پیوند است */
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--gold-deep)}

/* مودال باز: صفحه پشتش اسکرول نمی‌خورد */
html.modal-open{overflow:hidden}

/* فرم: خطای هر فیلد کنار خودش */
.form .row.bad input,.form .row.bad select,.form .row.bad textarea,.form .row.bad .checks{
  border-color:var(--stop);box-shadow:0 0 0 3px color-mix(in srgb,var(--stop) 14%, transparent)}
.form .row.bad label{color:var(--stop)}
.form .ferr{font-size:var(--fs-xs);color:var(--stop);font-weight:600}
.form input[dir=ltr]{text-align:right}
.form input[dir=ltr]::placeholder{text-align:right}

/* «تغییرات ذخیره نشده» — جای دکمه‌ها را نمی‌گیرد، بالای آن‌ها می‌نشیند */
.modal-box>footer{flex-wrap:wrap}
.modal-box>footer .dirty{flex:1 0 100%;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s2) var(--s3);border-radius:var(--rs);background:var(--warn-bg);border:1px solid var(--warn-br);
  color:var(--warn);font-size:var(--fs-sm);font-weight:600}
.modal-box>footer .dirty span{flex:1;min-width:140px}

/* پیام کوتاه با دکمه عمل (مثل بازگردانی) */
.toast{display:flex;align-items:center;gap:var(--s3)}
.toast .tact{font:inherit;font-size:var(--fs-sm);font-weight:800;color:inherit;background:none;cursor:pointer;
  border:1px solid currentColor;border-radius:999px;padding:2px var(--s3);opacity:.92}
.toast .tact:hover{opacity:1}

/* جست‌وجوی سراسری — دکمه نوار بالا و کادر */
.srchbtn{display:flex;align-items:center;gap:var(--s2);font:inherit;font-size:var(--fs-sm);color:var(--ink-3);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;height:36px;padding:0 var(--s3);cursor:pointer;
  min-width:168px;transition:border-color .15s var(--ease), color .15s var(--ease)}
.srchbtn:hover{border-color:var(--gold);color:var(--ink-2)}
.srchbtn .i{width:16px;height:16px}
.srchbtn .sl{flex:1;text-align:start}
kbd{font:inherit;font-size:var(--fs-xs);font-weight:700;direction:ltr;unicode-bidi:isolate;color:var(--ink-3);
  background:var(--paper-2);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:0 5px}
@media(max-width:1099px){.srchbtn{min-width:0}.srchbtn kbd{display:none}}
@media(max-width:759px){.srchbtn{padding:0;width:36px;height:36px;justify-content:center;flex:0 0 auto}
  .srchbtn .sl{display:none}}

.cmdk[hidden]{display:none!important}
.cmdk{position:fixed;inset:0;z-index:85;display:flex;justify-content:center;align-items:flex-start;
  padding:12vh var(--s4) var(--s4);background:color-mix(in srgb, var(--ink) 38%, transparent);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cmdk-box{width:min(100%,640px);max-height:72vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow-3)}
.cmdk-in{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule)}
.cmdk-in .i{width:20px;height:20px;color:var(--ink-3);flex:0 0 auto}
.cmdk-in input{flex:1;min-width:0;font:inherit;font-size:var(--fs-lg);color:var(--ink);background:none;border:0;
  padding:var(--s2) 0;outline:none}
.cmdk-in input::-webkit-search-cancel-button{display:none}
.cmdk-list{overflow-y:auto;padding:var(--s2);flex:1}
.cmdk-sec{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);padding:var(--s3) var(--s3) var(--s1)}
.cmdk-it{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--rs);
  color:var(--ink);text-decoration:none}
.cmdk-it:hover,.cmdk-it.on{background:var(--gold-wash);color:var(--ink)}
.cmdk-it.on{box-shadow:inset 0 0 0 1px var(--gold-line)}
.cmdk-it .av{width:32px;height:32px;font-size:var(--fs-sm);flex:0 0 auto}
.cmdk-it .ci{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--paper-2);color:var(--gold-deep)}
.cmdk-it .ci .i{width:17px;height:17px}
.cmdk-it .ct{flex:1;min-width:0}
.cmdk-it .ct b{display:block;font-size:var(--fs-md);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-it .ct small{display:block;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-empty{padding:var(--s6) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--fs-sm)}
.cmdk-empty:empty{display:none}
.cmdk-foot{display:flex;gap:var(--s4);padding:var(--s2) var(--s4);border-top:1px solid var(--rule);
  font-size:var(--fs-xs);color:var(--ink-3);background:var(--card)}
.cmdk-foot kbd{margin-inline-end:2px}
@media(max-width:759px){.cmdk{padding:var(--s2)}.cmdk-box{max-height:86vh}.cmdk-foot{display:none}}

/* برگه شرح شغل — روی صفحه یک کاغذ، روی چاپ همان کاغذ بدون قاب */
.doc{max-width:900px;margin:0 auto var(--s6);background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:var(--s6);box-shadow:var(--shadow-1)}
.doc-h{display:flex;align-items:center;gap:var(--s5);padding-bottom:var(--s4);margin-bottom:var(--s4);
  border-bottom:2px solid var(--ink)}
.doc-brand{display:flex;align-items:center;gap:var(--s2);color:var(--gold-deep)}
.doc-brand svg{width:40px;height:40px;flex:0 0 auto}
.doc-brand b{display:block;font-size:var(--fs-sm);color:var(--ink)}
.doc-brand small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.doc-tt{flex:1;text-align:center}
.doc-tt small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.doc-tt h2{font-size:var(--fs-2xl)}
.doc-tt span{font-size:var(--fs-sm);color:var(--ink-2)}
.doc-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:0 0 var(--s5)}
.doc-meta div{background:var(--paper-2);border-radius:var(--rs);padding:var(--s2) var(--s3)}
.doc-meta dt{font-size:var(--fs-xs);color:var(--ink-3)}
.doc-meta dd{margin:0;font-size:var(--fs-sm);font-weight:700}
.doc-meta dd.ltr{direction:ltr;unicode-bidi:isolate;text-align:right}
.doc-s{margin-bottom:var(--s5);overflow-x:auto}
.doc-s h3{font-size:var(--fs-md);padding-bottom:var(--s1);margin-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.doc-s p{margin:0;max-width:none;font-size:var(--fs-sm);color:var(--ink-2)}
.doc-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.doc-t{font-size:var(--fs-sm)}
.doc-t thead th{background:none;border-bottom:1px solid var(--rule);font-size:var(--fs-xs);color:var(--ink-3);
  padding:var(--s1) var(--s2)}
.doc-t td{padding:var(--s2);vertical-align:top}
.doc-t td small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.doc-t td.n{width:28px;color:var(--ink-3)}
.doc-t tbody tr:hover td{background:none}
.doc-none,.doc-note{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s2)}
.doc-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
.doc-sign div{padding-top:var(--s2);border-top:1px solid var(--ink-3);text-align:center;font-size:var(--fs-xs);color:var(--ink-3)}
.doc-foot{margin:var(--s5) 0 0;max-width:none;text-align:center;font-size:var(--fs-xs);color:var(--ink-3)}
@media(max-width:759px){
  .doc{padding:var(--s4)}
  .doc-h{flex-wrap:wrap;gap:var(--s3)}
  .doc-meta{grid-template-columns:1fr 1fr}
  .doc-2{grid-template-columns:1fr;gap:0}
}

/* چاپ: هر کارتی که هنوز به آن اسکرول نشده هم باید روی کاغذ بیاید (Motion.finish پیش از چاپ) */
@media print{
  .noprint,.srchbtn,.cmdk,.skip,.tabbar,#view .btn{display:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .strend .spt,.strend .sval{opacity:1!important}
  .pcard,.cyc,.tile,.simple,.chart,.doc,.panel{box-shadow:none!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important}
  .doc{border:0;padding:0;max-width:none;background:none;margin:0}
  .doc-meta div{background:none;border:1px solid var(--rule)}
  .doc-s,.doc-t tr,.doc-sign,.panel,.pcard{break-inside:avoid}
  .doc-s h3{break-after:avoid}
  .doc-s{overflow:visible}
  @page{margin:14mm 12mm}
}

/* نوار مسیر یک خط می‌ماند؛ عنوان بلند («شرح شغل آشپز ایستگاه گرم») با … کوتاه می‌شود */
.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* نوار مسیر در موبایل: فقط عنوان صفحه؛ والد جا نمی‌شود */
@media(max-width:759px){.crumb .cr-up{display:none}}

/* انتخاب‌گر یکی‌از‌چند (مثل واحد در ماتریس) — دکمه‌های قرصی با aria-pressed */
.segs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
.segs button{font:inherit;font-size:var(--fs-sm);color:var(--ink-2);background:var(--card);cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:var(--s1) var(--s3);
  transition:border-color .15s var(--ease), background .15s var(--ease)}
.segs button:hover{border-color:var(--gold)}
.segs button small{font-size:var(--fs-xs);color:var(--ink-3)}
.segs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.segs button[aria-pressed="true"] small{color:inherit;opacity:.75}

/* کاشی‌های «وضعیت امروز» در موبایل دوتایی؛ تک‌ستونه هر کدام یک صفحه جا می‌گرفت */
@media(max-width:599px){
  .today{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .today .tile{padding:var(--s3);gap:var(--s2);flex-direction:column;align-items:flex-start}
  .today .tile .tv b{font-size:var(--fs-xl)}
  .today .tile .ring{width:36px;height:36px}
}

/* سرستون مرتب‌شونده — مثلث کم‌رنگ یعنی «می‌شود مرتب کرد»، پررنگ یعنی جهت فعلی */
th .sortb{font:inherit;font-weight:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap}
th .sortb:hover{color:var(--ink)}
th .sortb i{width:0;height:0;border-inline:4px solid transparent;border-block-start:5px solid currentColor;
  opacity:.25;transition:transform .15s var(--ease), opacity .15s var(--ease)}
th .sortb.asc i{opacity:.9;transform:rotate(180deg)}
th .sortb.desc i{opacity:.9}
/* کد لاتین در جدول: یک‌خطی و چپ‌به‌راست؛ قبلاً «RST-KIT-» و «01» در دو خط می‌افتاد */
.tblwrap td.ltr{direction:ltr;unicode-bidi:isolate;text-align:right;white-space:nowrap}

/* موبایل: دکمه جست‌وجو جای نوار مسیر را گرفته بود و عنوان صفحه به «خ…» می‌رسید؛
   انتخاب‌گر نقش (ابزار نمایش) باریک‌تر، عنوان صفحه جا می‌شود */
@media(max-width:759px){.whoami select{max-width:30vw}}


/* =========================================================
   ۳۰) نگارخانه — تذهیب در رابط
   زبان تصویری از کتاب‌آرایی ایرانی، با امساک: شمسه هشت‌پر همان چرخه هشت‌مرحله‌ای است،
   لچک‌ترنج برای سطح‌های مهم (سربرگ، پرونده، برگه شغل)، گره‌چینی کم‌رنگ در نوار کناری و
   سربرگ، ستاره طلایی کنار عنوان صفحه و خط تذهیب زیر سرفصل‌ها.
   هر نقش یک ماسک است (--m-*) که رنگش را background با توکن می‌دهد؛ هیچ تصویر رنگی.
   ماسک‌ها را tools/ornaments.js می‌سازد.
   ========================================================= */
/* ↓ نقش‌ها — ساخته tools/ornaments.js؛ دستی ویرایش نکن */
:root{
  --m-star:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%200.5L15.37%203.87L20.13%203.87L20.13%208.63L23.5%2012L20.13%2015.37L20.13%2020.13L15.37%2020.13L12%2023.5L8.63%2020.13L3.87%2020.13L3.87%2015.37L0.5%2012L3.87%208.63L3.87%203.87L8.63%203.87Z'%2F%3E%3C%2Fsvg%3E");
  --m-star-line:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.6'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M24%202L30.44%208.44L39.56%208.44L39.56%2017.56L46%2024L39.56%2030.44L39.56%2039.56L30.44%2039.56L24%2046L17.56%2039.56L8.44%2039.56L8.44%2030.44L2%2024L8.44%2017.56L8.44%208.44L17.56%208.44Z'%2F%3E%3Cpath%20d%3D'M28.97%2011.99L31.04%2016.96L36.01%2019.03L33.95%2024L36.01%2028.97L31.04%2031.04L28.97%2036.01L24%2033.95L19.03%2036.01L16.96%2031.04L11.99%2028.97L14.05%2024L11.99%2019.03L16.96%2016.96L19.03%2011.99L24%2014.05Z'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'4.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-girih:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2060'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M30%200L38.79%208.79L51.21%208.79L51.21%2021.21L60%2030L51.21%2038.79L51.21%2051.21L38.79%2051.21L30%2060L21.21%2051.21L8.79%2051.21L8.79%2038.79L0%2030L8.79%2021.21L8.79%208.79L21.21%208.79Z'%2F%3E%3Cpath%20d%3D'M34.97%2017.99L37.04%2022.96L42.01%2025.03L39.95%2030L42.01%2034.97L37.04%2037.04L34.97%2042.01L30%2039.95L25.03%2042.01L22.96%2037.04L17.99%2034.97L20.05%2030L17.99%2025.03L22.96%2022.96L25.03%2017.99L30%2020.05Z'%2F%3E%3Cpath%20d%3D'M0%200L8.79%208.79M60%200L51.21%208.79M0%2060L8.79%2051.21M60%2060L51.21%2051.21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-lachak-tl:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2080%2080'%3E%3Cg%20transform%3D'translate(0%200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M26%200L18.39%207.62L18.38%2018.38L7.62%2018.39L0%2026'%2F%3E%3Cpath%20d%3D'M0%2036A36%2036%200%200%200%2036%200'%2F%3E%3Cpath%20d%3D'M0%2044A44%2044%200%200%200%2044%200'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M0%2070C18%2068%2030%2058%2038%2044C44%2034%2050%2024%2052%2014C56%2026%2060%2038%2070%2044'%20stroke-width%3D'1.1'%2F%3E%3Cpath%20d%3D'M70%200C68%2018%2058%2030%2044%2038C34%2044%2024%2050%2014%2052C26%2056%2038%2060%2044%2070'%20stroke-width%3D'1.1'%2F%3E%3C%2Fg%3E%3Cg%3E%3Ccircle%20cx%3D'52.16'%20cy%3D'13.98'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'38.18'%20cy%3D'38.18'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'13.98'%20cy%3D'52.16'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'0'%20r%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-lachak-tr:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2080%2080'%3E%3Cg%20transform%3D'translate(80%200)%20scale(-1%201)'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M26%200L18.39%207.62L18.38%2018.38L7.62%2018.39L0%2026'%2F%3E%3Cpath%20d%3D'M0%2036A36%2036%200%200%200%2036%200'%2F%3E%3Cpath%20d%3D'M0%2044A44%2044%200%200%200%2044%200'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M0%2070C18%2068%2030%2058%2038%2044C44%2034%2050%2024%2052%2014C56%2026%2060%2038%2070%2044'%20stroke-width%3D'1.1'%2F%3E%3Cpath%20d%3D'M70%200C68%2018%2058%2030%2044%2038C34%2044%2024%2050%2014%2052C26%2056%2038%2060%2044%2070'%20stroke-width%3D'1.1'%2F%3E%3C%2Fg%3E%3Cg%3E%3Ccircle%20cx%3D'52.16'%20cy%3D'13.98'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'38.18'%20cy%3D'38.18'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'13.98'%20cy%3D'52.16'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'0'%20r%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-lachak-bl:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2080%2080'%3E%3Cg%20transform%3D'translate(0%2080)%20scale(1%20-1)'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M26%200L18.39%207.62L18.38%2018.38L7.62%2018.39L0%2026'%2F%3E%3Cpath%20d%3D'M0%2036A36%2036%200%200%200%2036%200'%2F%3E%3Cpath%20d%3D'M0%2044A44%2044%200%200%200%2044%200'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M0%2070C18%2068%2030%2058%2038%2044C44%2034%2050%2024%2052%2014C56%2026%2060%2038%2070%2044'%20stroke-width%3D'1.1'%2F%3E%3Cpath%20d%3D'M70%200C68%2018%2058%2030%2044%2038C34%2044%2024%2050%2014%2052C26%2056%2038%2060%2044%2070'%20stroke-width%3D'1.1'%2F%3E%3C%2Fg%3E%3Cg%3E%3Ccircle%20cx%3D'52.16'%20cy%3D'13.98'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'38.18'%20cy%3D'38.18'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'13.98'%20cy%3D'52.16'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'0'%20r%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-lachak-br:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2080%2080'%3E%3Cg%20transform%3D'translate(80%2080)%20scale(-1%20-1)'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M26%200L18.39%207.62L18.38%2018.38L7.62%2018.39L0%2026'%2F%3E%3Cpath%20d%3D'M0%2036A36%2036%200%200%200%2036%200'%2F%3E%3Cpath%20d%3D'M0%2044A44%2044%200%200%200%2044%200'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M0%2070C18%2068%2030%2058%2038%2044C44%2034%2050%2024%2052%2014C56%2026%2060%2038%2070%2044'%20stroke-width%3D'1.1'%2F%3E%3Cpath%20d%3D'M70%200C68%2018%2058%2030%2044%2038C34%2044%2024%2050%2014%2052C26%2056%2038%2060%2044%2070'%20stroke-width%3D'1.1'%2F%3E%3C%2Fg%3E%3Cg%3E%3Ccircle%20cx%3D'52.16'%20cy%3D'13.98'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'38.18'%20cy%3D'38.18'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'13.98'%20cy%3D'52.16'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'0'%20r%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --m-rule:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20160%2010'%3E%3Cpath%20d%3D'M150.5%205L155%20.5L159.5%205L155%209.5Z'%2F%3E%3Cpath%20d%3D'M141%205L143.5%202.5L146%205L143.5%207.5Z'%2F%3E%3Crect%20x%3D'0'%20y%3D'4.4'%20width%3D'139'%20height%3D'1.2'%20rx%3D'.6'%2F%3E%3C%2Fsvg%3E");
  --m-frame:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%20120'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M18%202%20H102%20C102%2010.8%20109.2%2018%20118%2018%20V102%20C109.2%20102%20102%20109.2%20102%20118%20H18%20C18%20109.2%2010.8%20102%202%20102%20V18%20C10.8%2018%2018%2010.8%2018%202%20Z'%2F%3E%3C%2Fsvg%3E");
  --m-toranj:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-100%20-100%20200%20200'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'.35'%3E%3Ccircle%20r%3D'98'%2F%3E%3Ccircle%20r%3D'92'%20stroke-dasharray%3D'.1%202.4'%20stroke-linecap%3D'round'%20stroke-width%3D'1.1'%2F%3E%3Ccircle%20r%3D'86'%2F%3E%3Cpath%20d%3D'M0%20-80L23.43%20-56.57L56.57%20-56.57L56.57%20-23.43L80%200L56.57%2023.43L56.57%2056.57L23.43%2056.57L0%2080L-23.43%2056.57L-56.57%2056.57L-56.57%2023.43L-80%200L-56.57%20-23.43L-56.57%20-56.57L-23.43%20-56.57Z'%2F%3E%3Cpath%20d%3D'M30.61%20-73.91L43.3%20-43.3L73.91%20-30.61L61.23%200L73.91%2030.61L43.3%2043.3L30.61%2073.91L0%2061.23L-30.61%2073.91L-43.3%2043.3L-73.91%2030.61L-61.23%200L-73.91%20-30.61L-43.3%20-43.3L-30.61%20-73.91L0%20-61.23Z'%2F%3E%3Cpath%20d%3D'M0%20-54L15.82%20-38.19L38.18%20-38.18L38.19%20-15.82L54%200L38.19%2015.82L38.18%2038.18L15.82%2038.19L0%2054L-15.82%2038.19L-38.18%2038.18L-38.19%2015.82L-54%200L-38.19%20-15.82L-38.18%20-38.18L-15.82%20-38.19Z'%2F%3E%3Ccircle%20r%3D'40'%2F%3E%3Ccircle%20r%3D'34'%20stroke-dasharray%3D'.1%202'%20stroke-linecap%3D'round'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M9.95%20-24.02L14.07%20-14.07L24.02%20-9.95L19.9%200L24.02%209.95L14.07%2014.07L9.95%2024.02L0%2019.9L-9.95%2024.02L-14.07%2014.07L-24.02%209.95L-19.9%200L-24.02%20-9.95L-14.07%20-14.07L-9.95%20-24.02L0%20-19.9Z'%2F%3E%3Ccircle%20r%3D'8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* ↑ نقش‌ها */

/* طلای تذهیب: دو سر طیف و گرادیان زرورق. رنگ خط نقش‌ها (--orn) از خود طلا مشتق است */
:root{
  --gold-hi:#EBD19B; --gold-lo:#A27639;
  --gild:linear-gradient(135deg,#F2DDAE 0%,#D6AF6B 32%,#B7874A 55%,#E6C98F 76%,#A77A3E 100%);
  --orn:color-mix(in srgb, var(--gold) 58%, transparent);
  --orn-soft:color-mix(in srgb, var(--gold) 26%, transparent);
  --shine:rgba(255,255,255,.55);
}
[data-theme="dark"]{
  --gold-hi:#F2DCA8; --gold-lo:#B78A4E;
  --gild:linear-gradient(135deg,#F6E4BA 0%,#DDB878 32%,#C0914F 55%,#ECD29C 76%,#B08244 100%);
  --orn:color-mix(in srgb, var(--gold) 62%, transparent);
  --orn-soft:color-mix(in srgb, var(--gold) 30%, transparent);
  --shine:rgba(255,255,255,.3);
}

/* ---------- ستاره طلایی کنار عنوان هر صفحه ---------- */
.phead h1::before{content:"";display:inline-block;width:.7em;height:.7em;margin-inline-end:.42em;
  vertical-align:-.02em;background:var(--gild);
  -webkit-mask:var(--m-star) center/contain no-repeat;mask:var(--m-star) center/contain no-repeat}

/* ---------- سرفصل‌ها: لوزی زرین و خط تذهیب که رو به پایان محو می‌شود ---------- */
.sec > h2::before,main > h2::before{content:"";display:inline-block;width:.46em;height:.46em;
  border-radius:1.5px;transform:rotate(45deg);background:var(--gild);margin-inline-end:.6em;vertical-align:.14em}
.sec > h2::after,main > h2::after{width:150px;height:10px;border-radius:0;
  background:linear-gradient(to left, var(--gold), transparent 94%);
  -webkit-mask:var(--m-rule) right center/150px 10px no-repeat;mask:var(--m-rule) right center/150px 10px no-repeat}

/* ---------- حالت خالی: ستاره خطی بالای پیام ---------- */
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto var(--s3);opacity:.7;
  background:var(--gild);
  -webkit-mask:var(--m-star-line) center/contain no-repeat;mask:var(--m-star-line) center/contain no-repeat}

/* ---------- نوار کناری: گره‌چینی زرین که از بالا و پایین محو می‌شود ---------- */
.side{isolation:isolate}
.side::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--gold);opacity:.09;
  -webkit-mask:var(--m-girih) 0 0/56px 56px repeat, linear-gradient(to bottom, transparent, black 35%, black 70%, transparent);
  -webkit-mask-composite:source-in;
  mask:var(--m-girih) 0 0/56px 56px repeat, linear-gradient(to bottom, transparent, black 35%, black 70%, transparent);
  mask-composite:intersect}
/* گزینه فعال: لوزی زرین به‌جای خط */
#nav a.on::before{inset-inline-start:-5px;top:50%;bottom:auto;width:8px;height:8px;margin-top:-4px;
  border-radius:2px;transform:rotate(45deg);background:var(--gild);
  box-shadow:0 0 12px color-mix(in srgb, var(--gold) 70%, transparent)}
.brand .mark .g1{stop-color:var(--gold-hi)}
.brand .mark .g2{stop-color:var(--gold)}
.brand .mark .g3{stop-color:var(--gold-lo)}

/* ---------- نوار بالا: خط زرین نازک به‌جای مرز خاکستری ---------- */
.topbar{border-bottom-color:transparent;
  background-image:linear-gradient(to left, transparent, var(--orn-soft) 25%, var(--orn-soft) 75%, transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:bottom}

/* ---------- سربرگ صفحه اول — لچک‌ترنج ---------- */
.hero{isolation:isolate;min-height:168px;padding:var(--s6) var(--s6) var(--s6) 30%;gap:var(--s4);
  border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background:radial-gradient(80% 150% at 0% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 62%),
    linear-gradient(150deg, var(--chrome-2) 0%, var(--chrome) 60%)}
.hero::after{display:none}
.hero .hpat{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--gold);opacity:.12;
  -webkit-mask:var(--m-girih) 0 0/64px 64px repeat, linear-gradient(to right, black 0%, transparent 68%);
  -webkit-mask-composite:source-in;
  mask:var(--m-girih) 0 0/64px 64px repeat, linear-gradient(to right, black 0%, transparent 68%);
  mask-composite:intersect}
.hero .hmed{position:absolute;z-index:-1;inset-inline-end:-120px;top:50%;margin-top:-190px;width:380px;height:380px;
  opacity:.62;pointer-events:none;animation:rosespin 180s linear infinite}
.hmed *,.doc-med *{fill:none;stroke:var(--gold);stroke-width:1.1;vector-effect:non-scaling-stroke}
.hmed .t,.doc-med .t{stroke-width:.7;opacity:.6}
.hmed .p,.doc-med .p{stroke-width:2.4;stroke-dasharray:0 6;stroke-linecap:round;opacity:.8}
.hmed .f,.doc-med .f{fill:var(--gold);stroke:none}
@keyframes rosespin{to{transform:rotate(360deg)}}
.hero .lachak{inset:var(--s2);opacity:.42}
.hero .hdate{display:block;font-size:var(--fs-xs);color:var(--gold);margin-bottom:var(--s1);opacity:.9}
.hero h1{font-size:var(--fs-2xl)}
.hero .hrole{display:inline-block;margin-top:var(--s2)}
.hero .hmark{width:48px;height:48px;filter:drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 45%, transparent))}
@media(max-width:760px){.hero{padding:var(--s4) var(--s4) var(--s4) 32%;min-height:0}.hero h1{font-size:var(--fs-xl)}
  .hero .hmed{width:240px;height:240px;margin-top:-120px;inset-inline-end:-96px}}
body.scrolled .hero .hmed{opacity:.35}

/* ---------- لچک: چهار گوشه تذهیب ---------- */
.lachak{position:absolute;inset:var(--s2);z-index:-1;pointer-events:none;background:var(--gild);opacity:.5;
  -webkit-mask:var(--m-lachak-tl) top left/58px 58px no-repeat, var(--m-lachak-tr) top right/58px 58px no-repeat,
    var(--m-lachak-bl) bottom left/58px 58px no-repeat, var(--m-lachak-br) bottom right/58px 58px no-repeat;
  mask:var(--m-lachak-tl) top left/58px 58px no-repeat, var(--m-lachak-tr) top right/58px 58px no-repeat,
    var(--m-lachak-bl) bottom left/58px 58px no-repeat, var(--m-lachak-br) bottom right/58px 58px no-repeat}

/* ---------- نقشه چرخه — شمسه هشت‌پر (charts.js ← cycleMap) ---------- */
.cyc::before{display:none}
.cyc .rose-wrap{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,440px);justify-content:space-evenly;
  gap:var(--s6);align-items:center}
.rose-fig{position:relative}
.rose{display:block;width:100%;height:auto;overflow:visible}
.rose-orn circle,.rose-orn path{fill:none;stroke:var(--orn-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.rose-orn .p{stroke:var(--orn);stroke-width:2.6;stroke-dasharray:0 7;stroke-linecap:round}
.rose-orn .t{stroke:var(--orn-soft);stroke-dasharray:2 4}
.ray{cursor:pointer;outline:none}
.ray .rb{fill:color-mix(in srgb, var(--paper-2) 85%, transparent);stroke:var(--orn);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .2s var(--ease), fill .2s var(--ease)}
.ray .rf{transform-box:view-box;transform-origin:0 0;transform:scale(.36);
  transition:transform 1.3s var(--spring);pointer-events:none}
.ray .rp{font-size:11px;font-weight:800;fill:var(--ink-2);text-anchor:middle;dominant-baseline:central}
.rose .s1.ok{stop-color:var(--gold-lo)}
.rose .s2.ok{stop-color:var(--gold-hi)}
.rose .s1.mid{stop-color:var(--gold-lo)}
.rose .s2.mid{stop-color:var(--gold-hi)}
.rose .s1.bad{stop-color:var(--gold-lo)}
.rose .s2.bad{stop-color:var(--gold-hi)}
/* مرحله عقب‌مانده: بخش خالی پرش گلی است — طلا کم و خالی زیاد، یعنی کار مانده */
.ray.bad .rb{fill:color-mix(in srgb, var(--stop-bg) 90%, transparent);stroke:color-mix(in srgb, var(--stop) 45%, transparent)}
.ray.ok .rf{filter:drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 45%, transparent))}
.rose .core{fill:var(--chrome)}
.rose .core-in{fill:none;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.rose .core-st{fill:none;stroke:var(--orn);stroke-width:.8;vector-effect:non-scaling-stroke}
.rose .core-n{fill:var(--gold-hi);font-size:22px;font-weight:900;text-anchor:middle;dominant-baseline:central}
.rose .core-l{fill:var(--chrome-tx);font-size:8.5px;text-anchor:middle;dominant-baseline:central}
.ray:hover .rb,.ray:focus-visible .rb{stroke:var(--gold);fill:var(--gold-wash)}
.ray:focus-visible .rb{stroke-width:2}

.rose-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cy-row{display:grid;grid-template-columns:auto 3.4em auto minmax(24px,1fr) auto;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--rs);color:var(--ink);text-decoration:none;
  transition:background .2s var(--ease)}
.cy-row:hover{background:var(--gold-wash);color:var(--ink)}
.cy-row .lz{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--gild)}
.cy-row.ok .lz{background:var(--ok)}
.cy-row.bad .lz{background:var(--stop)}
.cy-row .ck{font-size:var(--fs-xs);font-weight:800;color:var(--gold-deep);direction:ltr;unicode-bidi:isolate;
  text-align:center;border:1px solid var(--gold-line);border-radius:999px;background:var(--gold-wash);padding:0 var(--s1)}
.cy-row .cn{min-width:0}
.cy-row .cn b{display:block;font-size:var(--fs-sm)}
.cy-row .cn small{display:block;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-row .cp{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums}
/* خط نقطه‌چین فهرست کتاب، از نام تا درصد */
.cy-row .dl{align-self:center;height:0;border-bottom:2px dotted var(--orn-soft);margin-top:-.9em}
.cy-row:hover .dl{border-bottom-color:var(--orn)}
/* پر و ردیف هم‌شماره با هم روشن می‌شوند */
.cyc:has([data-i="0"]:hover) .cy-row[data-i="0"],.cyc:has([data-i="1"]:hover) .cy-row[data-i="1"],
.cyc:has([data-i="2"]:hover) .cy-row[data-i="2"],.cyc:has([data-i="3"]:hover) .cy-row[data-i="3"],
.cyc:has([data-i="4"]:hover) .cy-row[data-i="4"],.cyc:has([data-i="5"]:hover) .cy-row[data-i="5"],
.cyc:has([data-i="6"]:hover) .cy-row[data-i="6"],.cyc:has([data-i="7"]:hover) .cy-row[data-i="7"]{background:var(--gold-wash)}
.cyc:has([data-i="0"]:hover) .ray[data-i="0"] .rb,.cyc:has([data-i="1"]:hover) .ray[data-i="1"] .rb,
.cyc:has([data-i="2"]:hover) .ray[data-i="2"] .rb,.cyc:has([data-i="3"]:hover) .ray[data-i="3"] .rb,
.cyc:has([data-i="4"]:hover) .ray[data-i="4"] .rb,.cyc:has([data-i="5"]:hover) .ray[data-i="5"] .rb,
.cyc:has([data-i="6"]:hover) .ray[data-i="6"] .rb,.cyc:has([data-i="7"]:hover) .ray[data-i="7"] .rb{
  stroke:var(--gold);fill:var(--gold-wash)}
@media(max-width:900px){
  .cyc .rose-wrap{grid-template-columns:1fr;gap:var(--s4)}
  .rose-fig{width:min(100%,340px);margin:0 auto}
}

/* ---------- پرونده فرد: لچک روی کارت، عکس در قاب رازقی ---------- */
.pcard{isolation:isolate}
.pcard::before{display:none}
.pcard .lachak{opacity:.4}
.pphoto{position:relative;border:0;border-radius:0;box-shadow:none;background:var(--gold-wash);
  -webkit-mask:var(--m-frame) center/100% 100% no-repeat;mask:var(--m-frame) center/100% 100% no-repeat}
.pphoto .pframe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pphoto .pframe path{fill:none;stroke:var(--gold);stroke-width:5;vector-effect:non-scaling-stroke}

/* ---------- برگه شرح شغل: قاب دوخطی نسخه خطی، لچک و ترنج بالای عنوان ---------- */
.doc{position:relative;isolation:isolate;border-color:var(--gold-line);
  outline:1px solid var(--gold-line);outline-offset:-10px}
.doc .lachak{inset:18px;opacity:.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-med{display:block;width:38px;height:38px;margin:0 auto var(--s1)}

/* ---------- دکمه طلایی: برقی که هنگام اشاره از رویش می‌گذرد ---------- */
.btn.gold{position:relative;overflow:hidden}
.btn.gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, var(--shine) 50%, transparent 65%);
  transform:translateX(130%);transition:transform .8s var(--ease)}
.btn.gold:hover::after{transform:translateX(-130%)}

/* ---------- ورود هر صفحه: محو و بالا آمدن کوتاه (فقط با عوض شدن مسیر) ---------- */

/* ---------- آب‌نگار: ترنج بزرگ و کم‌رنگ در گوشه کاغذ، پشت همه چیز و ساکن ---------- */
.aurora::after{content:"";position:absolute;width:78vmin;height:78vmin;inset-inline-end:-22vmin;inset-block-end:-24vmin;
  background:var(--gold);opacity:.1;
  -webkit-mask:var(--m-toranj) center/contain no-repeat;mask:var(--m-toranj) center/contain no-repeat}
[data-theme="dark"] .aurora::after{opacity:.09}

/* ---------- قاب رازقی روی کاشی آیکون‌ها (کارت‌های صفحه اول، جست‌وجو) ---------- */
.bigact .ic,.cmdk-it .ci{border-radius:0;
  -webkit-mask:var(--m-frame) center/100% 100% no-repeat;mask:var(--m-frame) center/100% 100% no-repeat}

/* ---------- ستاره طلایی کنار عنوان مودال، مثل عنوان صفحه ---------- */
.modal-box > header h3::before{content:"";display:inline-block;width:.72em;height:.72em;margin-inline-end:.45em;
  vertical-align:-.04em;background:var(--gild);
  -webkit-mask:var(--m-star) center/contain no-repeat;mask:var(--m-star) center/contain no-repeat}

/* ---------- نوار پایین موبایل: لوزی زرین بالای گزینه فعال ---------- */
.tabbar a{position:relative}
.tabbar a.on::before{content:"";position:absolute;inset-block-start:-3px;inset-inline-start:50%;width:6px;height:6px;
  margin-inline-start:-3px;border-radius:1.5px;transform:rotate(45deg);background:var(--gild)}

/* =========================================================
   ۳۱) چارت سازمانی — از بالا به پایین، فرو رفتن در هر واحد
   مدیرعامل (یا مدیر واحد) بالا، خط تنه طلایی، سینی واحدها یا دپارتمان‌ها زیرش.
   هر پست صندلی‌هایش را نشان می‌دهد: چهره هر نفر، خط‌چین برای صندلی خالی.
   ========================================================= */
.org{display:flex;flex-direction:column;gap:var(--s4)}
.org-sec{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s2) 0 var(--s3)}

/* ---- نوار بالا: مسیر و جست‌وجو ---- */
.org-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.org-path{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-md);color:var(--ink-3)}
.org-path a{font-weight:700;padding:var(--s2) 0}
.org-path b{color:var(--ink);font-weight:800}
.org-find{position:relative;flex:0 1 360px;min-width:min(100%,240px)}
.org-find input{width:100%;height:46px;padding:0 16px;padding-inline-start:44px;border-radius:999px;border:1px solid var(--rule);
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-sm);box-shadow:var(--sh)}
.org-find input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent)}
.org-find .of-i{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:flex;pointer-events:none}
.org-res{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 6px);padding:var(--s1);max-height:380px;overflow:auto;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--rs);box-shadow:var(--sh-lift);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.org-res[hidden]{display:none!important}
.org-res button{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:52px;padding:var(--s1) var(--s3);
  border:0;border-radius:var(--rx);background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.org-res button.on,.org-res button:hover{background:var(--gold-wash)}
.org-res b{display:block;font-size:var(--fs-sm);line-height:1.5}
.org-res small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}
.org-res .none{margin:0;padding:var(--s3);font-size:var(--fs-sm);color:var(--ink-3)}
.oface.pos{display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash)}

/* ---- پرش سریع بین واحدها ---- */
.org-jump{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 2px var(--s1);scrollbar-width:thin;
  /* لبه انتهای نوار محو می‌شود تا معلوم باشد ادامه دارد و اسکرول می‌خورد */
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 36px);mask-image:linear-gradient(to right, transparent 0, black 36px)}
.org-jump a{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s4);
  border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.org-jump a:hover{border-color:var(--gold);color:var(--ink)}
.org-jump a[aria-current]{background:var(--gold-wash);border-color:var(--gold);color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--ink-3)}
.dot.ok{background:var(--ok)}.dot.mid{background:var(--warn)}.dot.bad{background:var(--stop)}

/* ---- پنج عدد کلیدی ---- */
.org-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
.org-stats div{padding:var(--s3) var(--s4);border-radius:var(--rs);background:var(--card);border:1px solid var(--rule);box-shadow:var(--sh)}
.org-stats b{display:block;font-size:var(--fs-2xl);font-weight:900;line-height:1.3;color:var(--ink)}
.org-stats span{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.org-stats .ok b{color:var(--ok)}.org-stats .mid b{color:var(--warn)}.org-stats .bad b{color:var(--stop)}

/* ---- صحنه: سر شاخه، تنه، سینی ---- */
.org-stage{display:flex;flex-direction:column;align-items:center}
.org-head{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:var(--s4);
  width:min(100%,480px);padding:var(--s4) var(--s5);border-radius:var(--r);
  background:linear-gradient(160deg, var(--chrome) 0%, var(--chrome-2) 100%);
  border:1px solid color-mix(in srgb, var(--gold) 65%, transparent);box-shadow:var(--sh-lift);color:var(--chrome-tx)}
a.org-head:hover{color:var(--chrome-tx);border-color:var(--gold)}
.org-head .lachak{inset:6px;opacity:.55}
.oh-photo{position:relative;width:80px;height:80px;flex:0 0 auto;background:var(--gold-wash);
  -webkit-mask:var(--m-frame) center/100% 100% no-repeat;mask:var(--m-frame) center/100% 100% no-repeat}
.oh-photo > svg{width:100%;height:100%;display:block}
.oh-photo .pframe{position:absolute;inset:0;pointer-events:none}
.oh-photo .pframe path{fill:none;stroke:var(--gold);stroke-width:6;vector-effect:non-scaling-stroke}
.oh-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.oh-tx small{font-size:var(--fs-xs);font-weight:700;color:var(--gold)}
.oh-tx b{font-size:var(--fs-xl);font-weight:900;line-height:1.4;color:var(--gold-hi)}
.oh-tx > span{font-size:var(--fs-sm)}
.org-head .ringwrap{flex:0 0 auto}
.org-head .ring .bgc{stroke:color-mix(in srgb, var(--chrome-tx) 22%, transparent)}
.org-head .rl{color:var(--gold-hi)}
.org-trunk{display:block;width:2px;height:var(--s6);background:linear-gradient(var(--gold), var(--gold-line))}
.org-tray{position:relative;width:100%;padding-top:var(--s5);border-top:2px solid var(--gold-line);
  display:flex;flex-direction:column;gap:var(--s5)}
.org-tray::before{content:"";position:absolute;top:-7px;inset-inline-start:50%;margin-inline-start:-6px;
  width:12px;height:12px;border-radius:2px;transform:rotate(45deg);background:var(--gild)}

/* ---- دسته‌ها و کارت واحد ---- */
.org-group > header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s3)}
.org-group h3{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-lg)}
.org-group h3::before{content:"";width:9px;height:9px;border-radius:1.5px;transform:rotate(45deg);background:var(--gild)}
.org-group header span{font-size:var(--fs-sm);color:var(--ink-2)}
/* کارت‌ها وسط‌چین و هم‌اندازه، هم‌راستا با تنه چارت: پنج شعبه روی دسکتاپ در یک ردیف، ستاد زیرش */
.org-units{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.org-units > .org-unit{flex:0 0 184px;padding:var(--s4) var(--s3) var(--s3)}
.ou-m .oface{width:34px;height:34px}
.ou-h{padding-inline-end:22px}
.org-unit{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);
  border-radius:var(--r);background:var(--card);border:1px solid var(--rule);box-shadow:var(--sh);color:var(--ink);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease), border-color .25s var(--ease)}
.org-unit::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--ok)}
.org-unit.mid::before{background:var(--warn)}.org-unit.bad::before{background:var(--stop)}
.org-unit:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--sh-lift);color:var(--ink)}
.ou-h b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.5}
.ou-h small{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.ou-m{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:var(--rx);background:var(--paper-2)}
.ou-m > span:last-child{min-width:0}
.ou-m b{display:block;font-size:var(--fs-sm);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ou-m small{display:block;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ou-m.none{background:var(--stop-bg);color:var(--stop)}
.ou-m.none small{color:var(--stop)}
.ou-n{font-size:var(--fs-sm);color:var(--ink-2)}
.ou-n b{font-size:var(--fs-2xl);font-weight:900;color:var(--ink);margin-inline-end:2px}
.ou-n small{font-size:var(--fs-xs)}
.ou-c{display:flex;flex-wrap:wrap;gap:6px}
/* نشانه «بیشتر» در گوشه بالا، روبه‌روی نام: کارت به نمای واحد می‌رود */
.ou-go{position:absolute;inset-block-start:var(--s4);inset-inline-end:var(--s3);display:flex;color:var(--ink-3);
  transition:transform .3s var(--spring), color .2s var(--ease)}
.org-unit:hover .ou-go{transform:translateX(-3px);color:var(--gold-deep)}
.ou-c em{font-style:normal;font-size:var(--fs-xs);font-weight:700;padding:2px 10px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-2)}
.ou-c em.bad{background:var(--stop-bg);color:var(--stop)}.ou-c em.ok{background:var(--ok-bg);color:var(--ok)}
.oface{display:block;width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;border:1.5px solid var(--gold-line)}
.oface svg{width:100%;height:100%;display:block}
.org-bar{display:block;height:6px;border-radius:99px;overflow:hidden;background:var(--rule-soft)}
.org-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok);transition:width 1s var(--ease)}
.org-bar.mid i{background:var(--warn)}.org-bar.bad i{background:var(--stop)}

/* ---- نمای واحد: دپارتمان‌ها ستون‌به‌ستون ---- */
/* شبکه ساده، نه ستون‌بندی روزنامه‌ای (columns): آن یکی برای تراز کردن ستون‌ها محتوا را چند بار
   می‌چید و نمای کترینگ را تا ۶ برابر کند می‌کرد. جای خالی را ترتیب دپارتمان‌ها کم می‌کند
   (بزرگ‌ترها اول، views.js ← orgUnitView) */
.org-lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s3);align-items:start}
.org-lane{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border-radius:var(--r);
  background:var(--card);border:1px solid var(--rule);box-shadow:var(--sh);
  backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}
.ol-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s2);padding:var(--s1) var(--s1) var(--s3);
  border-bottom:1px solid var(--rule-soft)}
.ol-h .org-bar{grid-column:1/-1}
.ol-t b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.5}
.ol-t small{display:block;font-size:var(--fs-xs);line-height:1.55;color:var(--ink-2)}
.ol-n{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap}
.ol-n b{font-size:var(--fs-lg);font-weight:900;color:var(--ink)}
.ol-sub{display:flex;flex-direction:column;gap:var(--s2);padding-inline-start:var(--s2);border-inline-start:2px solid var(--gold-line)}
.ol-sub h4{font-size:var(--fs-xs);font-weight:800;color:var(--gold-deep);padding-top:var(--s1)}

/* ---- پست و صندلی‌هایش ---- */
.org-pos{position:relative;border-radius:var(--rs);border:1px solid var(--rule-soft);background:var(--card-2)}
.org-pos.short{border-color:color-mix(in srgb, var(--stop) 25%, var(--rule))}
.org-pos.hl::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--gold);
  pointer-events:none;animation:orgflash 2.8s var(--ease) forwards}
@keyframes orgflash{0%,60%{opacity:1}100%{opacity:0}}
.op-h{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "s s";gap:var(--s2);
  width:100%;min-height:48px;padding:var(--s2) var(--s3);border:0;border-radius:inherit;background:none;
  color:inherit;font:inherit;text-align:start;cursor:pointer}
.op-h:hover{background:color-mix(in srgb, var(--gold-wash) 70%, transparent)}
.op-t{grid-area:t;min-width:0}
.op-t b{display:block;font-size:var(--fs-sm);font-weight:800;line-height:1.5}
.op-t small{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.op-c{grid-area:c;font-size:var(--fs-md);font-weight:900;white-space:nowrap}
.op-c small{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.op-s{grid-area:s;display:flex;flex-wrap:wrap;gap:5px}
.st{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;font-style:normal;
  border:1.5px solid var(--gold-line);background:var(--paper-2)}
.st svg{width:100%;height:100%;display:block}
.st.tr{border-color:var(--info);box-shadow:0 0 0 2px var(--info-bg)}
.st.v{border:1.5px dashed var(--stop);background:var(--stop-bg)}
.st.more{width:auto;min-width:28px;padding:0 8px;border-radius:999px;font-size:var(--fs-xs);font-weight:800;color:var(--ink-2)}
.org-pos.open .op-h{border-end-start-radius:0;border-end-end-radius:0;border-bottom:1px solid var(--rule-soft)}
.op-people{display:none;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;padding:var(--s2)}
.org-pos.open .op-people{display:grid}
.op-p{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:6px var(--s2);border-radius:var(--rx);color:var(--ink)}
.op-p:hover{background:var(--gold-wash);color:var(--ink)}
.op-p > span:last-child{min-width:0}
.op-p b{display:block;font-size:var(--fs-sm);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-p small{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.op-p.hl{background:var(--gold-wash);box-shadow:inset 0 0 0 2px var(--gold)}
.op-vac,.op-more{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s2);
  border-radius:var(--rx);font-size:var(--fs-xs);font-weight:700;text-align:center}
.op-vac{border:1.5px dashed var(--stop);background:var(--stop-bg);color:var(--stop)}
.op-more{border:1px dashed var(--rule);color:var(--ink-2)}

/* ---- راهنما ---- */
.org-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);font-size:var(--fs-xs);color:var(--ink-2)}
.org-legend span{display:inline-flex;align-items:center;gap:6px}
.org-legend .st{width:16px;height:16px}

/* ---- تبلت و موبایل ---- */
@media(max-width:1099px){.org-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .org-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-stats div:first-child{grid-column:1/-1}
  .org-find{flex-basis:100%}
  .org-head{padding:var(--s3) var(--s4);gap:var(--s3)}
  .oh-photo{width:64px;height:64px}
  .oh-tx b{font-size:var(--fs-lg)}
  .org-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-lanes{grid-template-columns:1fr}
  .org-unit{padding:var(--s3)}
  .ou-m small{display:none}
}
@media(pointer:coarse){.st{width:30px;height:30px}}

/* ---- چاپ: همه چیز روی کاغذ، بدون نوار جست‌وجو ---- */
@media print{
  .org-find,.org-jump,.org-legend{display:none!important}
  .org-unit,.org-lane,.org-pos,.org-head{break-inside:avoid;box-shadow:none}
  .org-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =========================================================
   ۳۲) خوانایی و لمس — برای تبلت سالن و گوشی
   ========================================================= */
/* روی صفحه لمسی هر کنترل حداقل ۴۰ تا ۴۴ پیکسل؛ دکمه کوچک جدول‌ها ۳۰ پیکسل بود */
@media (pointer:coarse){
  .btn.sm{min-height:40px;padding-inline:14px}
  .iconbtn,.bellbtn,.srchbtn{min-width:44px;min-height:44px}
  th .sortb{min-height:40px}
  .crumb .cr-up a{display:inline-block;padding-block:10px}
}
/* منوی کشویی موبایل وقتی بسته است از دسترس صفحه‌کلید و صفحه‌خوان هم بیرون می‌رود؛
   قبلاً پیوندهایش بیرون از صفحه بودند ولی Tab رویشان می‌رفت */
@media(max-width:759px){
  .side{visibility:hidden;transition:transform .2s ease, visibility 0s linear .2s}
  .side.open{visibility:visible;transition:transform .2s ease, visibility 0s}
}
/* جدول پهن روی تبلت و گوشی: ستون دکمه‌ها (ویرایش، حذف…) هنگام اسکرول افقی سر جایش می‌ماند؛
   قبلاً برای رسیدن به «ویرایش» باید تا ته جدول اسکرول می‌شد */
@media(max-width:1099px){
  .tblwrap tr > td.act,.tblwrap table:has(td.act) thead th:last-child{position:sticky;inset-inline-end:0;z-index:1;
    background:var(--paper);border-inline-start:1px solid var(--rule)}
}
/* کد کار زیر عنوان در ماتریس: small داخل جدول xs به ۱۰ پیکسل می‌رسید */
.mx-wrap td small{font-size:inherit;color:var(--ink-3)}
/* چهار دکمه صفحه اول (مدیر شعبه، سرپرست کارگاه، مدیرعامل، مدیر مالی) دوبه‌دو؛ در شبکه سه‌ستونه
   دکمه چهارم تنها در ردیف دوم می‌ماند */
@media(min-width:760px){
  .bigacts:has(> .bigact:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   ۳۳) نسخه سروری — ورود، نوار کاربر، ورود از اکسل، تخصیص پست، چارت با داده واقعی
   ========================================================= */
/* فقط برای صفحه‌خوان؛ مثل ورودی فایل پشت دکمه «انتخاب فایل» */
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- دروازه: صفحه ورود و راه‌اندازی، روی همه‌چیز ---- */
body.gated{overflow:hidden}
body.gated #app{visibility:hidden}
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;overflow-y:auto;padding:var(--s4);background:var(--paper)}
.gate-box{width:min(400px,100%);display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6) var(--s5);
  border-radius:var(--r);background:var(--card);border:1px solid var(--rule);box-shadow:var(--sh-lift);text-align:center}
.gate-mark{width:64px;height:64px;margin:0 auto var(--s1);color:var(--gold-deep)}
.gate-box h1{font-size:var(--fs-xl);font-weight:900;line-height:var(--lh-tight)}
.gate-box > p{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body)}
.gate-box .form{text-align:start;display:flex;flex-direction:column;gap:var(--s3)}
.gate-box .form .row{margin:0}
.gate-box .form input{width:100%;min-height:44px}
.gate-box .form .btn{width:100%;justify-content:center;min-height:46px;margin-top:var(--s1)}
.gate-box .note{margin:0}
@media(max-width:480px){.gate-box{padding:var(--s5) var(--s4)}}

/* ---- نوار بالا: کاربر واردشده، وضعیت ذخیره، تغییر رمز و خروج ---- */
.whoami.me{gap:var(--s2)}
.me-n{text-align:end;line-height:1.35;min-width:0}
.me-n b{display:block;font-size:var(--fs-sm);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18ch}
.me-n small{display:block;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.sync{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.sync.wait{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg);animation:syncp 1.2s ease-in-out infinite}
.sync.err{background:var(--stop);box-shadow:0 0 0 3px var(--stop-bg)}
@keyframes syncp{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sync.wait{animation:none}}
@media(max-width:699px){.me-n{display:none}}

/* ---- ورود کارکنان از اکسل ---- */
.imp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.imp-pick label.btn{cursor:pointer}
.imp-pick input:focus-visible + .hint,.imp-pick:focus-within label.btn{outline:2px solid var(--gold);outline-offset:2px}
.imp-sum{margin-top:var(--s4)}
.imp-go{display:flex;justify-content:flex-end;margin:var(--s4) 0}
.imp-go .btn{min-height:46px}

/* ---- تخصیص پست ---- */
.segs button small.bad{color:var(--stop);font-weight:700}
.segs button[aria-pressed="true"] small.bad{color:inherit}
.asg{align-items:start}
.asg-tools{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.asg-tools input[type=search]{width:100%;min-height:42px;font:inherit;font-size:var(--fs-sm);padding:8px 12px;
  border:1px solid var(--rule);border-radius:var(--rs);background:var(--card);color:var(--ink)}
.asg-all{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.asg-list{display:flex;flex-direction:column;max-height:min(62vh,640px);overflow-y:auto;border:1px solid var(--rule-soft);border-radius:var(--rs)}
.asg-row{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:6px var(--s3);cursor:pointer;
  border-bottom:1px solid var(--rule-soft)}
.asg-row:last-child{border-bottom:0}
.asg-row:hover{background:var(--gold-wash)}
.asg-row:has(input:checked){background:var(--gold-wash)}
.asg-row input,.asg-all input{width:18px;height:18px;accent-color:var(--gold-deep);flex:0 0 auto}
.asg-head{border:0;min-height:40px;padding-inline:var(--s3)}
.asg-row .tx,.asg-p .tx{min-width:0}
.asg-row b,.asg-p b{display:block;font-size:var(--fs-sm);line-height:1.5}
.asg-row small,.asg-p small{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.asg-pos{display:flex;flex-direction:column;gap:var(--s2)}
.asg-p{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--rule-soft);border-radius:var(--rs);background:var(--card-2)}
.asg-seat{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap}
.asg-seat input{width:56px;min-height:36px;text-align:center;font:inherit;font-size:var(--fs-sm);padding:4px;
  border:1px solid var(--rule);border-radius:var(--rx);background:var(--card);color:var(--ink)}
@media(max-width:599px){
  .asg-p{grid-template-columns:1fr 1fr}
  .asg-p .tx{grid-column:1/-1}
}

/* ---- چارت با داده واقعی: صندلی تعریف‌نشده و «بدون پست» ---- */
.dot.na{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.org-unit.na::before{background:var(--rule)}
.org-lane.lone{border-color:var(--warn-br);background:var(--warn-bg)}
.org-lane.lone .ol-t b{color:var(--warn)}
.org-pos.none{border-style:dashed;border-color:var(--warn-br)}
.op-go{border-color:var(--gold);color:var(--gold-deep)}
.op-go:hover{background:var(--gold-wash);color:var(--ink)}
@media print{.gate,.sync,#mepass,#meout{display:none !important}}
/* درخت مجموعه: پستی که صندلی مصوب ندارد نوار خنثی می‌گیرد، نه «۱۰۰٪ پر» */
.tnode2 > .th .fillbar.na{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}

/* =========================================================
   ۳۴) یادآورها، پنل مدیریت و گزارش رویدادها
   ========================================================= */
/* ---- یک ردیف یادآور: دکمه گرد «انجام شد»، متن، و دکمه‌های سازنده ---- */
.remlist{display:flex;flex-direction:column;gap:var(--s2)}
.rem{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border-radius:var(--rs);
  background:var(--card);border:1px solid var(--rule);border-inline-start:3px solid var(--rule)}
.rem.due{border-inline-start-color:var(--gold)}
.rem.late{border-inline-start-color:var(--stop);background:var(--stop-bg);border-color:var(--stop-br)}
.rem.done{opacity:.72}
.rem.done .tx b{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.rem .tx{flex:1 1 auto;min-width:0}
.rem .tx b{display:block;font-size:var(--fs-md);font-weight:700;line-height:var(--lh-tight);overflow-wrap:anywhere}
.rem .tx small{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:2px}
.rem.late .tx small:first-of-type{color:var(--stop);font-weight:700}
.rem .tx small.nt{color:var(--ink-3)}
.rem-ok{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--gold);background:transparent;color:transparent;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform .25s var(--spring)}
.rem-ok:hover,.rem-ok:focus-visible{background:var(--gold-wash);color:var(--gold-deep)}
.rem-ok:active{transform:scale(.92)}
.rem-ok.on{background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok)}
.rem-ok.off{cursor:default;border-color:var(--rule);color:var(--ink-3)}
.rem-ok .i{width:18px;height:18px}
.rem-acts{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rem-more{display:block;text-align:center;font-size:var(--fs-sm);font-weight:700;padding:var(--s2)}
.remsec{margin-bottom:var(--s5)}
.remsec h2 small{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);margin-inline-start:6px}
/* زیر سلام صفحه اول */
.remstrip{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s5);padding:var(--s3);border-radius:var(--r);
  background:var(--gold-wash);border:1px solid var(--gold-line)}
.remstrip header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:0 var(--s1)}
.remstrip header b{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-md)}
.remstrip header a{font-size:var(--fs-sm);font-weight:700}
.remstrip header .i{width:18px;height:18px;color:var(--gold-deep)}
/* فرم یادآور: میان‌برهای تاریخ */
.form .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.form label .req{font-style:normal;margin-inline-start:3px}
/* شمار یادآور سررسیده کنار منو */
#nav a .ct.hot{background:var(--gold);color:var(--gold-ink);font-weight:800;border-radius:99px;padding:0 7px}

/* ---- زبانه‌های پنل مدیریت ---- */
.segs a.seg{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);background:var(--card);border:1px solid var(--rule);
  border-radius:999px;padding:6px var(--s4);min-height:38px;display:inline-flex;align-items:center}
.segs a.seg:hover{border-color:var(--gold);color:var(--ink)}
.segs a.seg[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.adm-links a.card{color:var(--ink);transition:transform .3s var(--spring), border-color .2s var(--ease), box-shadow .3s var(--ease)}
.adm-links a.card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--sh-lift)}
.adm-links a.card p{font-size:var(--fs-sm);color:var(--ink-2)}
.adm-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.acctbl td small,.logtbl td small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.acctbl td.nw,.logtbl td.nw{white-space:nowrap}
.acctbl .pill + .pill{margin-inline-start:4px}

/* ---- گزارش رویدادها ---- */
.logfilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);align-items:end;
  padding:var(--s3);margin-bottom:var(--s3);border-radius:var(--r);background:var(--card);border:1px solid var(--rule)}
.logfilters label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.logfilters select,.logfilters input{font:inherit;font-size:var(--fs-sm);font-weight:400;min-height:40px;padding:6px 10px;width:100%;
  border:1px solid var(--rule);border-radius:var(--rs);background:var(--paper);color:var(--ink)}
.logfilters select:focus-visible,.logfilters input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.logfilters .grow{grid-column:span 2}
.logfilters .lf-acts{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;justify-content:flex-end}
.logtbl small.chg{color:var(--ink-2);line-height:var(--lh-body)}
.logtbl small.ip{font-size:.68rem;text-align:right;unicode-bidi:isolate}
.logfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3)}
@media(max-width:599px){
  .logfilters .grow{grid-column:1/-1}
  .rem{flex-wrap:wrap}
  .rem-acts{flex:1 1 100%;justify-content:flex-start;padding-inline-start:52px}
}
@media print{.logfilters,.logfoot,.rem-ok,.rem-acts{display:none !important}}