/* =============================================================================
   app.css — رابط کارکنان CRM شازده کوچولو · راست‌چین
   -----------------------------------------------------------------------------
   ایده: «آسمان شب شازده کوچولو». نوار کناری سرمه‌ای با چند ستاره و سیارهٔ
   کوچک نشان — تنها جای پررنگ رابط. بقیه روشن، آرام و خوانا است، چون کار اصلی
   این برنامه جدول و عدد است.

   رنگ‌ها
     --night    #1a2142  آسمان: نوار کناری، دکمهٔ اصلی
     --gold     #e7b14a  ستاره: مورد فعال منو، نشانهٔ تأکید
     --rose     #d9577a  گل سرخ: فقط در نشان و شمارندهٔ هشدار منو
     --paper    #f3f4f8  زمینهٔ صفحه
     --ink      #1d2335  متن
   قلم‌ها
     وزیرمتن (متغیر) برای همه‌چیز · لاله‌زار فقط برای نام استودیو و صفحهٔ ورود
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────── ۱. قلم‌ها */
@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
      url("fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lalezar";
  src:url("fonts/Lalezar-Arabic.woff2") format("woff2");
  font-weight:400; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,
                U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:"Lalezar";
  src:url("fonts/Lalezar-Latin.woff2") format("woff2");
  font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}

/* ─────────────────────────────────────────────────────────────── ۲. نشانه‌ها */
:root{
  --night:#1a2142; --night-2:#232c56; --night-3:#2e3868; --night-ink:#c9cfe6; --night-dim:#8a92b8;
  --gold:#e7b14a; --gold-soft:#fbf1dc; --gold-ink:#8a5d0c;
  --rose:#d9577a;

  --paper:#f3f4f8; --surface:#fff; --surface-2:#f8f9fc;
  --ink:#1d2335; --ink-2:#3b4360; --muted:#6c7391; --faint:#9aa1bb;
  --line:#e3e6ef; --line-2:#d3d8e6;

  --primary:#2b3775; --primary-hover:#222c62; --primary-soft:#eceffa; --primary-ring:rgba(43,55,117,.18);

  --ok:#237a55;  --ok-soft:#e8f5ee;  --ok-line:#bfe1cf;
  --warn:#9a6508; --warn-soft:#fdf4e2; --warn-line:#f0d9a6;
  --bad:#c0392b; --bad-soft:#fdeeec; --bad-line:#f2c6c0;
  --info:#2e6aa3; --info-soft:#e9f2fb; --info-line:#c3d9ef;

  --r-s:6px; --r:10px; --r-l:14px;
  --shadow-1:0 1px 2px rgba(26,33,66,.05);
  --shadow-2:0 8px 28px rgba(26,33,66,.12);
  --sidebar-w:264px;
  --font:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
  --display:"Lalezar","Vazirmatn",sans-serif;

  /* نام‌های قدیمی — بعضی نماها هنوز این‌ها را صدا می‌کنند */
  --bg:var(--paper); --panel:var(--surface); --brand:var(--primary); --brand-soft:var(--primary-soft);
  --radius:var(--r);
}

/* ─────────────────────────────────────────────────────────────── ۳. پایه */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); direction:rtl;
  font-family:var(--font); font-size:14px; line-height:1.75;
  font-feature-settings:"ss01"; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1{font-size:1.45rem; font-weight:800; line-height:1.4; margin:0; letter-spacing:-.005em; color:var(--ink)}
h2{font-size:1.05rem; font-weight:700; line-height:1.5; margin:1.75rem 0 .65rem; color:var(--ink)}
h3{font-size:.95rem; font-weight:700; margin:1rem 0 .5rem}
p{margin:.4rem 0}
hr{border:0; border-top:1px solid var(--line); margin:1.25rem 0}
img{max-width:100%}
::selection{background:var(--gold-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.mt{margin-top:1.25rem !important} .mt-s{margin-top:.75rem !important}
.muted{color:var(--muted)} .ok{color:var(--ok)} .bad{color:var(--bad)} .err{color:var(--bad)}
.center{text-align:center}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.8rem; direction:ltr; unicode-bidi:isolate}
.mono .badge,.mono .pill{font-family:var(--font); font-size:.72rem; letter-spacing:0}
h2.mono{font-size:1.05rem}
code{background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 .3rem; font-size:.85em}
kbd{background:var(--surface); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px;
    padding:0 .35rem; font:inherit; font-size:.78rem}

/* ─────────────────────────────────────────────────────────────── ۴. پوسته */
.shell{display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh}

/* نوار کناری — آسمان شب */
.sidebar{
  position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  /* ستاره‌ها فقط بالای نوار، دور از متن: صفرِ فارسی خودش یک نقطه است */
  background:
    radial-gradient(120% 40% at 100% 0%, #2a3470 0%, transparent 70%),
    var(--night);
  color:var(--night-ink);
  scrollbar-width:thin; scrollbar-color:var(--night-3) transparent;
}
.brand{
  display:flex; align-items:center; gap:.7rem; padding:1.35rem 1.2rem 1.2rem; color:#fff;
}
.brand:hover{text-decoration:none}
.brand-mark{width:46px; height:46px; flex:0 0 46px}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-name{font-family:var(--display); font-size:1.22rem; line-height:1.45; color:#fff; font-weight:400; text-wrap:balance}
.brand-sub{font-size:.74rem; color:var(--night-dim); line-height:1.4}

.nav{flex:1; padding:.4rem .6rem 1rem; display:flex; flex-direction:column; gap:.2rem}

/* گروه منو — آکاردئونی (نسخهٔ ۱٫۳): بسته است و با کلیک باز می‌شود */
.nav-group{border-radius:var(--r-l); transition:background-color .25s ease}
.nav-group.open{background:rgba(255,255,255,.035)}
.nav-head{
  position:relative; display:flex; align-items:center; gap:.65rem; width:100%;
  padding:.55rem .6rem; border:0; border-radius:var(--r); background:transparent; cursor:pointer;
  color:var(--night-ink); font:inherit; font-size:.88rem; font-weight:600; text-align:start;
  transition:background-color .18s, color .18s;
}
.nav-head:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-head:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.nav-head-ic{width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:9px;
             background:rgba(255,255,255,.06); color:var(--night-dim); transition:background-color .2s, color .2s}
.nav-head-ic .ic{width:17px; height:17px}
.nav-head-t{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-head-n{font-size:.68rem; line-height:1; padding:.28rem .45rem; border-radius:99px; background:rgba(255,255,255,.08);
            color:var(--night-dim); font-weight:600; transition:opacity .2s}
.nav-dot{width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 3px rgba(217,87,122,.25)}
.nav-chev{display:grid; place-items:center; color:var(--night-dim); transform:rotate(90deg);
          transition:transform .3s cubic-bezier(.4,0,.2,1), color .2s}
.nav-chev .ic{width:15px; height:15px}
.nav-group.open > .nav-head{color:#fff}
.nav-group.open > .nav-head .nav-head-ic{background:rgba(231,177,74,.16); color:var(--gold)}
.nav-group.open > .nav-head .nav-chev{transform:rotate(0); color:var(--gold)}
.nav-group.open > .nav-head .nav-head-n{opacity:0}
.nav-group.has-on > .nav-head::before{content:""; position:absolute; inset-inline-start:-.6rem; top:.6rem; bottom:.6rem;
            width:3px; border-radius:3px 0 0 3px; background:var(--gold)}

.nav-sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.nav-group.open > .nav-sub{grid-template-rows:1fr}
.nav-sub-in{min-height:0; overflow:hidden; position:relative; padding-inline-start:1.05rem}
.nav-sub-in::before{content:""; position:absolute; inset-inline-start:1.55rem; top:.2rem; bottom:.9rem; width:1px;
            background:linear-gradient(rgba(231,177,74,.5), rgba(255,255,255,.07))}
.nav-sub-in > .nav-item:last-child{margin-bottom:.45rem}

.nav-item{
  position:relative; display:flex; align-items:center; gap:.6rem;
  padding:.42rem .6rem .42rem .6rem; margin:1px 0; margin-inline-start:.55rem; border-radius:var(--r);
  color:var(--night-ink); font-size:.86rem; font-weight:500;
  opacity:0; transform:translateX(6px);
  transition:opacity .22s ease, transform .22s ease, background-color .15s, color .15s;
}
.nav-group.open .nav-item{opacity:1; transform:none; transition-delay:calc(var(--i,0)*30ms + 60ms),calc(var(--i,0)*30ms + 60ms),0s,0s}
.nav-item .ic{width:17px; height:17px; flex:0 0 17px; opacity:.75}
.nav-item:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.nav-item.on{background:rgba(231,177,74,.14); color:#fff; font-weight:600}
.nav-item.on .ic{color:var(--gold); opacity:1}
.nav-label{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-count{min-width:1.45rem; padding:0 .4rem; border-radius:99px; font-size:.72rem; line-height:1.45rem;
           text-align:center; background:rgba(255,255,255,.12); color:#fff; font-weight:600}
.nav-count.late{background:var(--rose)}
.nav:not(.ready) *{transition:none !important}

.sidebar-foot{display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem;
              border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.12)}
.avatar{width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
        background:var(--gold); color:var(--night); font-weight:800; font-size:.95rem}
.who{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.who-name{color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who-role{color:var(--night-dim); font-size:.72rem}
.icon-btn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:var(--r-s);
          border:0; background:transparent; color:inherit; cursor:pointer; padding:0}
.icon-btn .ic{width:19px; height:19px}
.sidebar .icon-btn{color:var(--night-dim)}
.sidebar .icon-btn:hover{background:rgba(255,255,255,.08); color:#fff}

/* فضای کار */
.workspace{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem;
  height:56px; padding:0 1.75rem;
  background:rgba(243,244,248,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.menu-btn{display:none; color:var(--ink-2)}
.menu-btn:hover{background:var(--surface)}
.crumb{flex:1; min-width:0; display:flex; align-items:center; gap:.45rem; font-size:.86rem;
       white-space:nowrap; overflow:hidden}
.crumb-group{color:var(--muted)}
.crumb-sep{color:var(--line-2)}
.crumb-page{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis}
.today{color:var(--muted); font-size:.8rem; white-space:nowrap}

main{width:100%; max-width:1480px; margin:0 auto; padding:1.6rem 1.75rem 3rem}
.scrim{display:none}

/* ─────────────────────────────────────────────────────────── ۵. سر صفحه */
.page-head{margin:0 0 1.25rem}
.page-head h1{margin-bottom:.2rem}
.page-head .hint{max-width:80ch}
main > h1:first-child{margin-bottom:1rem}
.hint{color:var(--muted); font-size:.84rem; margin:.2rem 0 0; line-height:1.8}
.sample{color:var(--muted); font-size:.8rem}
.req{color:var(--bad)}
.src{color:var(--muted); font-size:.78rem; white-space:normal; max-width:22rem}

/* ─────────────────────────────────────────────── ۶. سطح‌ها: کارت، پنل، شاخص */
.card,.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.1rem 1.25rem; box-shadow:var(--shadow-1);
}
.panel,.card{margin:0 0 1.25rem; min-width:0; overflow-x:auto}
.cols > .panel,.cols > .card{margin:0}
.card.login{margin:0}
/* جدولی که بی‌قاب داخل پنل آمده، به‌جای بیرون زدن می‌شکند */
.panel > table.grid th,.panel > table.grid td,.card > table.grid th,.card > table.grid td{white-space:normal}
.panel > table.grid,.card > table.grid{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.panel > h2:first-child,.card > h2:first-child{margin-top:0}
.panel > h2{font-size:1rem; color:var(--ink)}
.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:start; margin:0 0 1.25rem}

.cards,.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin:0 0 1.5rem}
.kpi{
  position:relative; display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:1rem 1.1rem .9rem; color:var(--ink); box-shadow:var(--shadow-1);
  overflow:hidden;
}
a.kpi{transition:border-color .15s, box-shadow .15s}
a.kpi:hover{text-decoration:none; border-color:var(--line-2); box-shadow:0 4px 14px rgba(26,33,66,.08)}
.kpi .n{font-size:1.75rem; font-weight:800; line-height:1.25; color:var(--ink); font-variant-numeric:tabular-nums}
.kpi .n.money{font-size:1.25rem; line-height:1.55}
.kpi .l{color:var(--muted); font-size:.82rem; margin-top:.2rem}
.kpi .delta{display:inline-block; margin-top:.45rem; padding:0 .45rem; border-radius:99px; font-size:.74rem;
            background:var(--surface-2); color:var(--muted)}
.kpi .delta.up{background:var(--ok-soft); color:var(--ok)}
.kpi .delta.down{background:var(--bad-soft); color:var(--bad)}
.kpi.small .n{font-size:1.3rem}
.kpi.ok .n{color:var(--ok)} .kpi.warn .n{color:var(--warn)} .kpi.bad .n{color:var(--bad)}

/* ─────────────────────────────────────────────────────────────── ۷. جدول */
.grid-wrap{
  overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-1); max-height:calc(100vh - 140px);
}
table.grid{border-collapse:separate; border-spacing:0; width:100%; font-size:.86rem}
table.grid th,table.grid td{
  padding:.6rem .8rem; text-align:right; white-space:nowrap; vertical-align:middle;
  border-bottom:1px solid var(--line);
}
table.grid thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--muted);
  font-size:.78rem; font-weight:600; border-bottom:1px solid var(--line-2);
}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr{transition:background-color .1s}
table.grid tbody tr:hover{background:#f7f8fc}
table.grid td a{font-weight:500}
table.grid.compact th,table.grid.compact td{padding:.4rem .65rem}
table.grid td.num,table.grid th.num{text-align:center; font-variant-numeric:tabular-nums}
table.grid td.money{text-align:left; font-variant-numeric:tabular-nums}
.rownum{color:var(--faint); text-align:center; width:2.6rem; font-variant-numeric:tabular-nums}
.st{width:3rem; text-align:center; font-weight:700}
tr.saved{background:var(--ok-soft)} tr.saved .st{color:var(--ok)}
tr.muted-row td{color:var(--faint)}
tr.late-row td{background:#fff6f5}
tr.late-row td:first-child{box-shadow:inset -3px 0 0 var(--bad)}
table.kv{width:100%; font-size:.86rem; border-collapse:collapse}
table.kv th{text-align:right; color:var(--muted); font-weight:400; width:7.5rem; padding:.3rem 0; vertical-align:top}
table.kv td{padding:.3rem 0}
dl{display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; margin:.5rem 0}
dt{color:var(--muted); font-size:.85rem} dd{margin:0}

/* ─────────────────────────────────────────────────────── ۸. فرم و ورودی */
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.cell),
main select:not(.cell), main textarea,
.login input{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-s);
  padding:.45rem .7rem; min-height:38px; line-height:1.5;
  transition:border-color .15s, box-shadow .15s;
}
main textarea{min-height:auto; line-height:1.7}
main select:not(.cell){
  appearance:none; -webkit-appearance:none; padding-inline-start:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:15px; background-position:left .6rem center;
}
main input:not([type=checkbox]):not([type=radio]):not(.cell):hover,
main select:not(.cell):hover, main textarea:hover{border-color:#bcc3d6}
main input:not([type=checkbox]):not([type=radio]):not(.cell):focus,
main select:not(.cell):focus, main textarea:focus, .login input:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);
}
main input::placeholder, main textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{accent-color:var(--primary); width:16px; height:16px; margin:0}
main input[type=file]{font:inherit; font-size:.85rem; color:var(--muted)}
main input[type=file]::file-selector-button{
  font:inherit; margin-inline-end:.7rem; padding:.4rem .9rem; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer;
}

.filters,.toolbar{
  display:flex; gap:.75rem 1rem; align-items:flex-end; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:.85rem 1rem; margin:0 0 1.25rem; box-shadow:var(--shadow-1);
}
.toolbar{align-items:center}
.filters label,.toolbar label,.frow label,
form.stack label,form.row label{
  display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--muted); font-weight:500;
}
.toolbar label{flex-direction:row; align-items:center}
.frow{display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; margin-top:.8rem}
form.stack{display:flex; flex-direction:column; gap:.75rem}
form.row{display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap}
form.inline{display:inline-flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:0}
form.inline input:not([type=checkbox]):not(.cell), form.inline select{min-height:32px; padding:.25rem .55rem}
div.row{display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap}
div.row label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--muted); font-weight:500}
.chk,.check{display:inline-flex !important; flex-direction:row !important; align-items:center;
            gap:.45rem; color:var(--ink) !important; font-size:.86rem !important; cursor:pointer}
.check{margin:.6rem 0 .2rem}
.checks{display:flex; gap:1rem; flex-wrap:wrap}

fieldset{border:1px solid var(--line); border-radius:var(--r); padding:.6rem 1rem .8rem; margin:.75rem 0}
legend{padding:0 .45rem; color:var(--muted); font-size:.8rem; font-weight:600}

/* ─────────────────────────────────────────────────────────────── ۹. دکمه */
main button:not([class]),.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:38px; padding:.4rem 1rem; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font:inherit; font-size:.88rem; font-weight:600; line-height:1.4; cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:background-color .15s, border-color .15s, box-shadow .15s;
}
main button:not([class]):hover,.btn:hover{background:var(--surface-2); border-color:#bcc3d6; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--primary)}
.btn.ghost:hover{background:var(--primary-soft)}
.btn.danger{background:var(--surface); border-color:var(--bad-line); color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.small{min-height:30px; padding:.2rem .7rem; font-size:.8rem; font-weight:600}
.btn.link{background:none; border:0; color:var(--primary); padding:0; min-height:0}
.btn:disabled,.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ─────────────────────────────────────────── ۱۰. زبانه، تراشه، برچسب، نشان */
.tabs{
  display:flex; gap:.25rem; flex-wrap:wrap; margin:0 0 1.25rem; padding:.3rem;
  background:#e8eaf2; border-radius:var(--r); width:fit-content; max-width:100%;
}
.tabs a{
  display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .9rem; border-radius:var(--r-s);
  color:var(--ink-2); font-size:.86rem; font-weight:500; white-space:nowrap;
}
.tabs a:hover{background:rgba(255,255,255,.6); text-decoration:none}
.tabs a.on{background:var(--surface); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(26,33,66,.12)}

.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0}
.chip{display:inline-block; padding:.3rem .85rem; border-radius:99px; background:var(--surface);
      border:1px solid var(--line); color:var(--ink-2); font-size:.82rem}
.chip:hover{border-color:var(--primary); color:var(--primary); text-decoration:none}

.badge{
  display:inline-block; min-width:1.35rem; padding:0 .45rem; margin-inline-start:.3rem;
  border-radius:99px; font-size:.72rem; line-height:1.35rem; text-align:center; font-weight:600;
  background:var(--warn-soft); color:var(--warn); vertical-align:middle;
}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.bad{background:var(--bad-soft); color:var(--bad)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.late{background:var(--bad); color:#fff}

.pill,.tag{
  display:inline-block; padding:.05rem .6rem; border-radius:99px; font-size:.76rem; line-height:1.6;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted); white-space:nowrap;
}
.pill.ok,.pill.sla-on_time,.tag.valid,.tag.imported{color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft)}
.pill.bad,.pill.sla-overdue,.tag.invalid,.tag.failed,.tag.conf-exact{color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft)}
.pill.inferred,.pill.sla-due_soon,.tag.duplicate,.tag.unknown_value,.tag.partially_imported,.tag.conf-probable
  {color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft)}
.tag.conf-possible{color:var(--info); border-color:var(--info-line); background:var(--info-soft)}
.tag.rolled_back,.tag.skipped{opacity:.6}

/* ─────────────────────────────────────────────────── ۱۱. پیام و جزئیات */
.flash{
  display:flex; align-items:flex-start; gap:.6rem; padding:.75rem 1rem; margin:0 0 1.25rem;
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:.9rem; box-shadow:var(--shadow-1);
}
.flash::before{content:""; flex:0 0 8px; height:8px; margin-top:.5rem; border-radius:50%; background:var(--muted)}
.flash.ok{background:var(--ok-soft); border-color:var(--ok-line); color:#1b5e41}
.flash.ok::before{background:var(--ok)}
.flash.warn{background:var(--warn-soft); border-color:var(--warn-line); color:#6f4a06}
.flash.warn::before{background:var(--gold)}
.flash.bad{background:var(--bad-soft); border-color:var(--bad-line); color:#8f2a1f}
.flash.bad::before{background:var(--bad)}
.status{font-size:.85rem} .status.ok{color:var(--ok)} .status.bad{color:var(--bad)}

details>summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.35rem;
                color:var(--primary); font-weight:500}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:""; width:.45rem; height:.45rem; border:solid currentColor;
                        border-width:0 0 2px 2px; transform:rotate(45deg); transition:transform .15s}
details[open]>summary::before{transform:rotate(-45deg)}
.rowline{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.55rem 0; border-bottom:1px solid var(--line)}
.rowline:last-child{border-bottom:0}

/* ───────────────────────────────────────────────── ۱۲. جدول ورود اطلاعات */
/* خانه‌های جدول ورود مثل اکسل دیده شوند: مرز ملایم، زمینهٔ سفید */
.cell{width:100%; min-width:6rem; border:1px solid var(--line); background:var(--surface); padding:.3rem .45rem;
      font:inherit; color:inherit; border-radius:5px; min-height:34px}
.cell:hover{border-color:var(--line-2)}
tr.saved .cell{background:transparent; border-color:transparent}
.cell:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-ring)}
.cell.bad{border-color:var(--bad); background:var(--bad-soft)}
.cell:disabled{color:var(--muted)}
select.cell{appearance:auto}
table.grid td:has(> .cell){padding:.2rem .3rem}

/* ─────────────────────────────────────────────────────── ۱۳. پنجرهٔ تصمیم */
.modal{position:fixed; inset:0; background:rgba(20,26,52,.5); backdrop-filter:blur(3px);
       display:flex; align-items:center; justify-content:center; z-index:60; padding:1rem}
.modal[hidden]{display:none}
.modal-box{background:var(--surface); border-radius:var(--r-l); padding:1.4rem; max-width:540px; width:100%;
           box-shadow:var(--shadow-2)}
.modal-box h2{margin-top:0}
.modal-actions{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap}
.dup{border:1px solid var(--line); border-radius:var(--r); padding:.7rem .8rem; margin:.5rem 0;
     display:flex; justify-content:space-between; align-items:center; gap:.75rem; background:var(--surface-2)}
.dup .sig{color:var(--muted); font-size:.8rem}
.dup-head{display:flex; gap:.8rem; align-items:center; margin-bottom:.7rem; flex-wrap:wrap}
.dup-cols{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.dup-side{border:1px solid var(--line); border-radius:var(--r); padding:.8rem; background:var(--surface-2)}
.dup-side h3{margin:0 0 .5rem; font-size:.9rem}
.dup-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; align-items:center}
.dup-actions input[type=text]{flex:1; min-width:12rem}

/* ──────────────────────────────────────── ۱۴. گردش کار، پروژه، تابلوی کار */
.proj-head{display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:1rem}
.proj-stage{background:var(--night); color:#fff; border-radius:var(--r-l); padding:.8rem 1.1rem; min-width:220px}
.proj-stage .n{font-size:1.15rem; font-weight:800; color:#fff}
.proj-stage .l{color:var(--night-dim); font-size:.8rem}
.proj-stage a{color:var(--gold)}

.tracker{display:flex; gap:.35rem; flex-wrap:wrap; margin:1rem 0 1.25rem}
.tk{display:inline-flex; gap:.35rem; align-items:center; padding:.28rem .7rem; border-radius:99px;
    border:1px solid var(--line); background:var(--surface); font-size:.8rem; color:var(--muted)}
.tk .m{font-weight:700}
.tk.done{color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft)}
.tk.now{color:#fff; background:var(--primary); border-color:var(--primary); font-weight:600;
        box-shadow:0 0 0 3px var(--primary-ring)}
.tk.now.late{background:var(--bad); border-color:var(--bad); box-shadow:0 0 0 3px rgba(192,57,43,.18)}

.move{padding:.6rem 0; border-bottom:1px solid var(--line)}
.move:last-child{border-bottom:0}
.move .arrow{color:var(--faint)} .move .to{color:var(--ink); font-weight:600}
.move.blocked .to{color:var(--muted); font-weight:400}
.move .why{color:var(--bad); font-size:.82rem; margin:.25rem 0 .3rem}

.board{display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.8rem; align-items:flex-start}
.board-col{min-width:210px; flex:0 0 210px; background:#eceef5; border-radius:var(--r-l); padding:.6rem}
.board-head{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.88rem; padding:0 .2rem}
.board-dept{color:var(--muted); font-size:.74rem; margin:0 .2rem .5rem}
.board-card{display:block; padding:.55rem .65rem; margin-bottom:.45rem; border-radius:var(--r);
            background:var(--surface); color:var(--ink); border:1px solid var(--line);
            border-inline-start:3px solid var(--line-2); box-shadow:var(--shadow-1)}
.board-card:hover{text-decoration:none; border-color:var(--line-2); box-shadow:0 4px 12px rgba(26,33,66,.08)}
.board-card.sla-overdue{border-inline-start-color:var(--bad)}
.board-card.sla-due_soon{border-inline-start-color:var(--gold)}
.board-card.sla-on_time{border-inline-start-color:var(--ok)}
.bc-name{font-weight:600; font-size:.86rem}
.bc-meta,.bc-due{color:var(--muted); font-size:.75rem}
.bc-due{color:var(--bad)}
.board-empty{color:var(--faint); text-align:center; padding:.6rem; font-size:.8rem}

.decision{margin-bottom:1rem}
.dec-head{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.dec-head h3{margin:0; font-size:1rem}
.dec-q{color:var(--muted); margin:.4rem 0 .8rem}
.dec-opts{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.dec-opt{border:1px solid var(--line); border-radius:var(--r); padding:.7rem .85rem; background:var(--surface-2)}
.dec-opt.on{border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary)}
.do-head{display:flex; gap:.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.do-note{color:var(--muted); font-size:.83rem; margin-top:.3rem}
.dec-why{margin-top:.7rem} .dec-why p{margin:.4rem 0 0}

/* ─────────────────────────────────────────── ۱۵. گزارش، نمودار، میله */
/* مختصات نمودار چپ‌به‌راست حساب شده؛ بدون این، text-anchor در صفحهٔ راست‌چین وارونه می‌شود
   و برچسب‌ها بیرون از کادر می‌افتند. شکل‌دهی متن فارسی آسیبی نمی‌بیند. */
.chart{width:100%; height:auto; display:block; direction:ltr}
.chart .c-lab{font-size:11px; fill:var(--ink-2); font-family:inherit}
.chart .c-val{font-size:11px; fill:var(--muted); font-family:inherit}
.chart .c-bar{fill:var(--primary)}
.chart .c-bar-bg{fill:#eef0f7}
.chart .c-grid{stroke:#e9ecf4; stroke-width:1}
.chart .c-line{fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.chart .c-line-0{stroke:var(--primary)}
.chart .c-line-1{stroke:var(--gold)}
.chart .c-line-2{stroke:var(--ok)}
.legend{display:flex; gap:1rem; font-size:.8rem; color:var(--muted); margin-bottom:.5rem}
.legend .lg::before{content:""; display:inline-block; width:10px; height:10px; border-radius:3px;
                    margin-inline-end:.35rem; vertical-align:middle}
.legend .lg-0::before{background:var(--primary)}
.legend .lg-1::before{background:var(--gold)}
.legend .lg-2::before{background:var(--ok)}
.chart-and-table{display:grid; gap:1rem}

table.grid.report th.num,table.grid.report td.num{text-align:center}
table.grid.report td.money{text-align:left; font-variant-numeric:tabular-nums}
table.grid.report td.date{text-align:center; white-space:nowrap}
table.grid.report tr.grouprow th{background:var(--night); color:#fff; text-align:center;
                                 border-inline-start:1px solid rgba(255,255,255,.18)}
table.grid.report tfoot td{position:sticky; bottom:0; background:#eef0f8; font-weight:700; border-top:1px solid var(--line-2)}
table.grid.report td.empty{text-align:center; color:var(--muted); padding:2rem}

.bar{background:var(--primary-soft); height:.6rem; border-radius:99px; display:inline-block; vertical-align:middle}
.stagebar{display:flex; align-items:flex-end; gap:.75rem; overflow-x:auto; padding-top:.5rem}
.stagebar .stage{text-align:center; min-width:78px}
.stagebar .bar{display:block; background:var(--primary); border-radius:6px 6px 2px 2px; margin:0 auto .35rem; width:28px}
.stagebar .n{font-weight:800; font-size:.9rem}
.stagebar .l{font-size:.72rem; color:var(--muted)}

/* ──────────────────────────────────────────────────── ۱۶. صفحهٔ ورود */
.login-page{
  margin:0; min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--paper);
}
.login-sky{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:3rem 3.5rem; color:#fff;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 9%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 22%, #f4e3b4 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 41%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 47%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 56% 36%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 64%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(90% 70% at 85% 10%, #2f3a7a 0%, transparent 65%),
    linear-gradient(180deg, #151b38 0%, var(--night) 100%);
}
.login-planet{position:absolute; width:min(46vh,380px); top:12%; inset-inline-start:14%}
.login-sky h1{font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,4vw,3.3rem);
              line-height:1.25; color:#fff; margin:0 0 .5rem; position:relative; text-wrap:balance}
.login-sky p{color:var(--night-ink); font-size:1rem; max-width:34ch; margin:0; position:relative}
main.login-side{display:flex; align-items:center; justify-content:center; padding:2rem; max-width:none; margin:0}
.login{width:100%; max-width:360px; display:flex; flex-direction:column; gap:1rem}
.login h2{font-size:1.35rem; font-weight:800; margin:0}
.login .hint{margin:-.6rem 0 .4rem}
.login label{display:flex; flex-direction:column; gap:.35rem; font-size:.84rem; color:var(--ink-2); font-weight:600}
.login input{min-height:44px; font-size:.95rem}
.login .btn{min-height:44px; font-size:.95rem; margin-top:.3rem}
.login .err{display:flex; gap:.5rem; align-items:center; background:var(--bad-soft); border:1px solid var(--bad-line);
            border-radius:var(--r-s); padding:.55rem .75rem; font-size:.86rem; margin:0}
.login-foot{color:var(--faint); font-size:.78rem; margin-top:1rem}

/* ────────────────────────────────────────────────────── ۱۷. واکنش‌گرا */
@media (max-width:1100px){
  main{padding:1.25rem 1.25rem 3rem}
  .topbar{padding:0 1.25rem}
}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw,var(--sidebar-w));
           z-index:50; transform:translateX(100%); transition:transform .22s ease; box-shadow:var(--shadow-2)}
  .nav-open .sidebar{transform:none}
  .scrim{display:block; position:fixed; inset:0; z-index:40; background:rgba(20,26,52,.45)}
  .scrim[hidden]{display:none}
  .menu-btn{display:inline-grid}
  .cols,.dup-cols,.dec-opts{grid-template-columns:minmax(0,1fr)}
  .login-page{grid-template-columns:minmax(0,1fr)}
  .login-sky{padding:9.5rem 1.5rem 1.75rem}
  .login-planet{width:130px; top:1rem; inset-inline-start:auto; inset-inline-end:1.25rem}
}
@media (max-width:640px){
  .today{display:none}
  main{padding:1rem .85rem 2.5rem}
  h1{font-size:1.25rem}
  .cards,.kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
  .kpi .n{font-size:1.35rem}
  .filters{padding:.75rem}
  .filters label{flex:1 1 140px}
  .tabs{width:100%; overflow-x:auto; flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ─────────────────────────────────────────────────── ۱۸. چاپ A4 راست‌چین */
@media print{
  @page{size:A4; margin:12mm}
  .sidebar,.topbar,.scrim,.filters,.tabs,.toolbar,.no-print,.chips{display:none !important}
  .shell{display:block}
  body{background:#fff; font-size:10pt}
  main{padding:0; max-width:none}
  .panel,.card,.kpi,.grid-wrap{box-shadow:none; border-color:#ccc}
  .panel{break-inside:avoid; padding:0; border:0}
  .grid-wrap{overflow:visible !important; max-height:none}
  table.grid{font-size:9pt}
  table.grid thead{display:table-header-group}
  table.grid thead th{position:static}
  table.grid tr{break-inside:avoid}
  table.grid.report tfoot td{position:static}
  .chart{max-height:60mm}
  a{text-decoration:none; color:inherit}
}

/* ───────────────────────────────────────── ۱۹. چارت سازمانی (نسخهٔ ۱٫۲) */
/* درخت بالا به پایین با خطوط رابط؛ همه با ویژگی‌های منطقی تا در راست‌چین درست بنشیند. */
.orgchart{overflow-x:auto; padding:.5rem 0 1rem; direction:rtl}
.orgchart ul{display:flex; justify-content:center; position:relative; list-style:none; margin:0;
             padding:1.25rem 0 0}
.orgchart > ul{padding-top:0; min-width:max-content}
.orgchart li{position:relative; display:flex; flex-direction:column; align-items:center;
             padding:1.25rem .35rem 0}
.orgchart li::before,.orgchart li::after{content:""; position:absolute; top:0; width:50%; height:1.25rem;
             border-top:1.5px solid var(--line-2)}
.orgchart li::before{inset-inline-start:0}
.orgchart li::after{inset-inline-end:0; border-inline-start:1.5px solid var(--line-2)}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-inline-end:1.5px solid var(--line-2); border-start-end-radius:6px}
.orgchart li:first-child::after{border-start-start-radius:6px}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:0}
.orgchart ul ul::before{content:""; position:absolute; top:0; inset-inline-start:50%; height:1.25rem;
             border-inline-start:1.5px solid var(--line-2)}
.orgchart > ul > li{padding-top:0}
.orgchart > ul > li::before,.orgchart > ul > li::after{display:none}
.orgchart ul.org-pos,.orgchart ul.org-pos li{display:block; padding:0; margin:0}
.orgchart ul.org-pos::before,.orgchart ul.org-pos li::before,.orgchart ul.org-pos li::after{display:none}

.org-node{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--primary);
          border-radius:var(--r); box-shadow:var(--shadow-1); padding:.55rem .7rem; min-width:170px; max-width:230px;
          text-align:start; font-size:.8rem; line-height:1.7}
.org-node.root{border-top-color:var(--gold); background:var(--gold-soft)}
.org-node-head{font-weight:800; font-size:.88rem; margin-bottom:.3rem; color:var(--ink)}
.org-node-head a{color:inherit}
.org-node-head .badge{font-size:.68rem; font-weight:600}
.org-pos li{border-top:1px dashed var(--line); padding:.25rem 0 !important}
.org-pos li:first-child{border-top:0}
.org-pos li.head .org-pos-title{font-weight:700}
.org-pos-title{display:block; color:var(--ink-2)}
.org-holders{display:block; color:var(--muted)}
.org-holders.vacant{color:var(--warn); font-weight:600}
.org-empty{color:var(--faint); font-size:.78rem}

/* پروندهٔ پرسنلی: فرم پهن + ستون کناری */
.org-person{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:1.25rem; align-items:start}
.org-person > .card{margin:0}
.org-side > .card h2:first-child{margin-top:0}
.org-profile fieldset{border:1px solid var(--line); border-radius:var(--r); padding:.6rem .9rem .9rem; margin:0}
.org-profile legend{font-weight:700; font-size:.88rem; padding:0 .4rem; color:var(--ink)}
.org-fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.7rem}
.org-fields label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--muted); font-weight:500}
.org-fields label.wide{grid-column:1 / -1}
.org-fields input,.org-fields select,.org-fields textarea{width:100%}

@media (max-width:980px){
  .org-person{grid-template-columns:minmax(0,1fr)}
}
@media print{
  .orgchart{overflow:visible}
  .org-node{box-shadow:none; break-inside:avoid}
}
/* چارت تخت: ریشه وسط، واحدهای هم‌سطح در شبکه‌ای که می‌شکند */
.orgchart.flat > ul{min-width:0}
.orgchart.flat > ul > li{align-items:stretch; padding-inline:0; flex:1 1 auto; width:100%}
.orgchart.flat > ul > li > .org-node{align-self:center}
.orgchart ul.org-leaves{display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:.8rem;
             align-items:start; margin-top:1.25rem; padding:1rem; border:1.5px dashed var(--line-2);
             border-radius:var(--r-l); background:var(--surface-2)}
.orgchart ul.org-leaves::before{top:calc(-1.25rem - 1.5px)}
.orgchart ul.org-leaves > li{padding:0}
.orgchart ul.org-leaves > li::before,.orgchart ul.org-leaves > li::after{display:none}
.orgchart ul.org-leaves .org-node{max-width:none; width:100%}

/* ───────────────────────────────────────── ۲۰. کاربران و دسترسی (نسخهٔ ۱٫۳) */
.acc-choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.75rem}
.acc-choice{position:relative; display:block; border:1.5px solid var(--line); border-radius:var(--r-l); padding:.75rem .9rem;
            background:var(--surface); cursor:pointer; transition:border-color .15s, background-color .15s, box-shadow .15s}
.acc-choice:hover{border-color:var(--line-2)}
.acc-choice input{position:absolute; inset-inline-end:.8rem; top:.85rem; width:17px; height:17px; accent-color:var(--primary)}
.acc-choice b{display:flex; align-items:center; gap:.45rem; font-size:.9rem; padding-inline-end:1.6rem}
.acc-choice b .ic{width:18px; height:18px; color:var(--primary)}
.acc-choice span{display:block; color:var(--muted); font-size:.8rem; line-height:1.7; margin-top:.2rem}
.acc-choice:has(input:checked){border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary)}
.acc-section{display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem}
.acc-section .num{width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:grid; place-items:center;
                  background:var(--night); color:var(--gold); font-weight:800; font-size:.82rem}
.acc-section h2{margin:0}
.acc-section p{margin:0; color:var(--muted); font-size:.82rem}
.acc-fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.8rem}
.acc-fields label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--ink-2); font-weight:600}
.acc-fields label.wide{grid-column:span 2}
.acc-fields input,.acc-fields select{width:100%}
.acc-fields .hint{font-weight:400; margin:0}
.acc-picker{border:1px solid var(--line); border-radius:var(--r); max-height:300px; overflow-y:auto; background:var(--surface)}
.acc-picker label{display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; border-bottom:1px solid var(--line); cursor:pointer; font-size:.86rem}
.acc-picker label:last-child{border-bottom:0}
.acc-picker label:hover{background:var(--surface-2)}
.acc-picker input{width:16px; height:16px; accent-color:var(--primary)}
.acc-picker .pn{flex:1}
.acc-picker .pn small{display:block; color:var(--muted); font-size:.74rem}
.acc-user{display:flex; align-items:center; gap:.6rem}
.acc-user .avatar{width:32px; height:32px; flex:0 0 32px; font-size:.85rem}
.acc-user b{display:block; font-size:.86rem; font-weight:600}
.acc-user small{display:block; color:var(--muted); font-size:.74rem; direction:ltr; text-align:end}
.badge.ad{background:var(--info-soft); color:var(--info)}
.badge.local{background:var(--gold-soft); color:var(--gold-ink)}
.badge.super{background:var(--night); color:#fff}
/* ───────────── درخت دسترسی منوها (۱٫۴) — کاربر و نقش */
.mtree{border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); overflow:hidden}
.mtree-bar{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.6rem .7rem;
           background:var(--surface-2); border-bottom:1px solid var(--line)}
.mtree-search{position:relative; flex:1 1 220px; min-width:180px}
.mtree-search .ic{position:absolute; inset-inline-start:.6rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); pointer-events:none}
.mtree-search input.mtree-q{width:100%; padding-inline-start:2.1rem !important}
.mtree-tpl{max-width:220px}
.mtree-tools{display:flex; gap:.35rem; flex-wrap:wrap}
.mtree-sum{margin-inline-start:auto; font-size:.8rem; color:var(--muted); white-space:nowrap}
.mtree-sum b{color:var(--ink)}
.mtree-sum .mtree-on{color:var(--primary)}
.mtree ul{list-style:none; margin:0; padding:0}
.mtree-root{padding:.35rem .5rem .5rem}
.mtree-group{border-bottom:1px dashed var(--line); padding:.15rem 0}
.mtree-group:last-child{border-bottom:0}
.mtree-row{display:flex; align-items:center; gap:.2rem; border-radius:var(--r); transition:background .15s}
.mtree-row:hover{background:var(--surface-2)}
.mtree-node[data-key] > .mtree-row:has(.mtree-chk:checked){background:var(--primary-soft)}
.mtree-tog{width:26px; height:26px; flex:0 0 26px; border:0; background:none; padding:0; display:grid; place-items:center;
           color:var(--muted); border-radius:6px; cursor:pointer}
.mtree-tog:hover{background:var(--line); color:var(--ink)}
.mtree-tog.is-leaf{cursor:default; background:none}
.mtree-tog.is-leaf::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--line-2)}
.mtree-tog .ic{width:16px; height:16px; transition:transform .18s ease}
.mtree-node:not(.open) > .mtree-row .mtree-tog .ic{transform:rotate(90deg)}
.mtree-lbl{flex:1; min-width:0; display:flex; align-items:center; gap:.55rem; padding:.4rem .35rem; cursor:pointer; margin:0}
.mtree-lbl .mtree-chk{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.mtree-box{position:relative; width:19px; height:19px; flex:0 0 19px; border:1.8px solid var(--line-2); border-radius:6px;
           background:var(--surface); transition:background .15s, border-color .15s, box-shadow .15s}
.mtree-lbl:hover .mtree-box{border-color:var(--primary)}
.mtree-chk:focus-visible + .mtree-box{box-shadow:0 0 0 3px var(--primary-ring); border-color:var(--primary)}
.mtree-chk:checked + .mtree-box{background:var(--primary); border-color:var(--primary)}
.mtree-chk:checked + .mtree-box::after{content:""; position:absolute; left:5.5px; top:2px; width:5px; height:9px;
           border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.mtree-chk:indeterminate + .mtree-box{background:var(--primary-soft); border-color:var(--primary)}
.mtree-chk:indeterminate + .mtree-box::after{content:""; position:absolute; left:3.5px; right:3.5px; top:50%; height:2px;
           margin-top:-1px; border:0; background:var(--primary); border-radius:2px; transform:none; width:auto}
.mtree-chk:disabled + .mtree-box{opacity:.55}
.mtree-ic{display:grid; place-items:center; flex:0 0 auto}
.mtree-ic .ic{width:17px; height:17px; color:var(--primary)}
.mtree-group > .mtree-row .mtree-ic{width:28px; height:28px; border-radius:8px; background:var(--primary-soft)}
.mtree-t{flex:1; min-width:0; line-height:1.5}
.mtree-t b{display:block; font-size:.87rem; font-weight:600; color:var(--ink)}
.mtree-group > .mtree-row .mtree-t b{font-size:.92rem; font-weight:700}
.mtree-t small{display:block; color:var(--muted); font-size:.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mtree-n{font-size:.72rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
         padding:.05rem .55rem; white-space:nowrap}
.mtree-node.is-some > .mtree-row .mtree-n{color:var(--primary); border-color:var(--primary-ring); background:var(--primary-soft)}
.mtree-tag{font-size:.68rem; white-space:nowrap}
.mtree-kids{display:none; margin-inline-start:12px; padding-inline-start:12px; border-inline-start:1.5px solid var(--line)}
.mtree-node.open > .mtree-kids{display:block; animation:mtreeIn .18s ease}
@keyframes mtreeIn{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}
.mtree-empty{padding:.3rem 1rem 1rem; margin:0}
.mtree.is-locked .mtree-root{opacity:.6}
.mtree.is-locked .mtree-lbl{cursor:not-allowed}
@media (max-width:640px){
  .mtree-sum{margin-inline-start:0; width:100%}
  .mtree-t small{white-space:normal}
  .mtree-kids{margin-inline-start:8px; padding-inline-start:8px}
}
@media (prefers-reduced-motion:reduce){ .mtree-node.open > .mtree-kids{animation:none} .mtree-tog .ic{transition:none} }
.acc-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:0 0 1.25rem}
.testbox{margin-top:.8rem; border-radius:var(--r); padding:.6rem .8rem; font-size:.86rem; display:none}
.testbox.show{display:block}
.testbox.ok{background:var(--ok-soft); color:#1b5e41; border:1px solid var(--ok-line)}
.testbox.bad{background:var(--bad-soft); color:#8f2a1f; border:1px solid var(--bad-line)}
.forbidden{max-width:520px; margin:3rem auto; text-align:center}
.forbidden .ic{width:54px; height:54px; color:var(--bad)}
.login .mode-note{display:flex; gap:.55rem; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
                  border-radius:var(--r); padding:.6rem .75rem; font-size:.8rem; color:var(--ink-2); line-height:1.8; margin:-.3rem 0 .2rem}
.login .mode-note .ic{width:18px; height:18px; flex:0 0 18px; color:var(--info); margin-top:.2rem}
@media (max-width:980px){ .acc-fields label.wide{grid-column:auto} }
.flash.info{background:var(--info-soft); border-color:var(--info-line); color:#23507c}
.flash.info::before{background:var(--info)}
.hidden,[hidden]{display:none !important}