/* آسان‌یار — استایل مشترک همه صفحات */
/* ---------- tokens · light is base ---------- */
:root{
  --bg:#F6F5F1; --surface:#FCFCFB; --surface-2:#F1EFEA;
  --ink:#191C21; --ink-2:#565C66; --ink-3:#8B909A;
  --line:#E4E1D9; --grid:#ECEAE3;
  --accent:#155FC0; --accent-strong:#114997; --on-accent:#FFFFFF; --accent-tint:#E6EEFA;
  --orange:#D95F00; --orange-tint:#FBEADF;
  --good:#1F9D66; --good-tint:#E2F3EB;
  --warn:#B45309; --warn-tint:#FBEFD9;
  --bad:#B3261E;  --bad-tint:#FBE5E3;
  --team-1:#155FC0; --team-2:#1F9D66; --team-3:#D95F00; --team-4:#7A3300; --team-5:#5C8FDF;
  --shadow:0 1px 2px rgba(25,28,33,.05),0 8px 24px -12px rgba(25,28,33,.12);
  --r:12px; --r-s:8px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131417; --surface:#1C1D20; --surface-2:#232428;
    --ink:#EDEEF0; --ink-2:#A7ACB6; --ink-3:#7B8089;
    --line:#2E2F34; --grid:#292A2E;
    --accent:#5C8FDF; --accent-strong:#7BA5E8; --on-accent:#0E1520; --accent-tint:#1E2938;
    --orange:#D07F1F; --orange-tint:#33261A;
    --good:#34B37A; --good-tint:#17301F;
    --warn:#E0A63D; --warn-tint:#322818;
    --bad:#E5534B;  --bad-tint:#341B1A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131417; --surface:#1C1D20; --surface-2:#232428;
  --ink:#EDEEF0; --ink-2:#A7ACB6; --ink-3:#7B8089;
  --line:#2E2F34; --grid:#292A2E;
  --accent:#5C8FDF; --accent-strong:#7BA5E8; --on-accent:#0E1520; --accent-tint:#1E2938;
  --orange:#D07F1F; --orange-tint:#33261A;
  --good:#34B37A; --good-tint:#17301F;
  --warn:#E0A63D; --warn-tint:#322818;
  --bad:#E5534B;  --bad-tint:#341B1A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15.5px;scrollbar-gutter:stable}
body{
  font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.65; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
.side{
  background:var(--surface);border-inline-end:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column;gap:5px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;color:inherit;text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:15px;
}
.brand-txt b{font-size:15px;font-weight:800;display:block;line-height:1.3}
.brand-txt span{font-size:10.5px;color:var(--ink-3)}
.nav-btn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  background:none;border:none;color:var(--ink-2);font-size:13.5px;font-weight:500;
  padding:9px 12px;border-radius:var(--r-s);transition:background .15s,color .15s;
  text-decoration:none;
}
.nav-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav-btn.on{background:var(--accent-tint);color:var(--accent);font-weight:700}
.nav-btn .ic{width:20px;text-align:center;font-size:15px;flex:none}
.nav-btn .bdg{
  margin-inline-start:auto;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:20px;padding:1px 7px;min-width:20px;text-align:center;
}
.side-foot{margin-top:auto;padding:12px 6px 0;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);line-height:1.7}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:12px 26px;
}
.crumb b{display:block;font-size:14.5px;font-weight:700;line-height:1.4}
.crumb span{font-size:11.5px;color:var(--ink-3)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:15px;display:grid;place-items:center;
  transition:background .15s;position:relative;
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .dot{
  position:absolute;top:-4px;inset-inline-end:-4px;background:var(--bad);color:#fff;
  font-size:9px;font-weight:700;border-radius:20px;padding:0 5px;line-height:1.5;
}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none;
}

/* ---------- منوی پروفایل — دایره بالای صفحه ---------- */
.avatar-btn{border:none;background:none;padding:0;border-radius:50%;display:grid;flex:none}
.profile-wrap{position:relative}
.profile-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:70;
  width:230px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:8px;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s,transform .18s;
}
.profile-menu.show{opacity:1;pointer-events:auto;transform:none}
.profile-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;border-bottom:1px solid var(--grid);margin-bottom:6px}
.profile-head .avatar{width:38px;height:38px;font-size:13px}
.profile-head .nm{min-width:0}
.profile-head .nm b{display:block;font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-head .nm span{font-size:10.5px;color:var(--ink-3);display:block;white-space:nowrap}
.pm-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  background:none;border:none;color:var(--ink-2);font-family:inherit;
  font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:var(--r-s);
  text-decoration:none;transition:background .15s,color .15s;
}
.pm-item .ic{font-size:14px;display:inline-flex;flex:none}
.pm-item:hover{background:var(--surface-2);color:var(--ink)}
.pm-item.danger{color:var(--bad)}
.pm-item.danger:hover{background:var(--bad-tint);color:var(--bad)}
.pm-sep{height:1px;background:var(--grid);margin:6px 4px}

/* ---------- جست‌وجوی سراسری — مودال جست‌وجو ---------- */
.search-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(10,12,16,.55);
  display:flex;justify-content:center;align-items:flex-start;padding:10vh 18px 18px;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.search-scrim.show{opacity:1;pointer-events:auto}
.search-box{
  width:min(560px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(-10px) scale(.99);transition:transform .18s;
}
.search-scrim.show .search-box{transform:none}
.search-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-head .ic{color:var(--ink-3);font-size:15px;display:inline-flex}
.search-head input{
  flex:1;min-width:0;border:none;background:none;font-family:inherit;font-size:14px;color:var(--ink);
}
.search-head input::placeholder{color:var(--ink-3)}
.search-head input:focus{outline:none}
.search-head kbd{
  font-family:inherit;font-size:10px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;background:var(--surface-2);white-space:nowrap;
}
.search-res{max-height:52vh;overflow-y:auto;padding:6px 6px 10px}
.search-empty{padding:26px 16px;text-align:center;font-size:12px;color:var(--ink-3)}
.search-grp{font-size:10px;font-weight:700;color:var(--ink-3);padding:10px 10px 4px;letter-spacing:.02em}
.search-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  background:none;border:none;font-family:inherit;color:var(--ink);cursor:pointer;
  padding:9px 10px;border-radius:var(--r-s);
}
.search-item .ic{
  width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);
  display:grid;place-items:center;font-size:13px;flex:none;
}
.search-item .ic.i{background:var(--accent-tint);color:var(--accent)}
.search-item .ic.g{background:var(--good-tint);color:var(--good)}
.search-item .tx{min-width:0;flex:1}
.search-item .tx b{display:block;font-size:12.5px;font-weight:600;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .tx span{display:block;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .go{font-size:11px;color:var(--ink-3);flex:none;opacity:0;transition:opacity .12s}
.search-item.sel{background:var(--accent-tint)}
.search-item.sel .go{opacity:1}
.search-foot{display:flex;gap:14px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);font-size:10px;color:var(--ink-3)}
.search-foot kbd{
  font-family:inherit;font-size:9.5px;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;background:var(--surface-2);
}

/* ---------- حالت بارگذاری — همه‌جای سامانه یکسان ---------- */
/* اسپینر تنها — داخل هر دکمه یا برچسبی: <span class="spin"></span> */
.spin{
  display:inline-block;width:15px;height:15px;flex:none;vertical-align:-.16em;
  border:2px solid color-mix(in srgb,currentColor 25%,transparent);
  border-top-color:currentColor;border-radius:50%;
  animation:spin .7s linear infinite;
}
.spin.sm{width:12px;height:12px;border-width:2px}
.spin.lg{width:26px;height:26px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* لایه بارگذاری روی همه صفحه یا یک کادر: showLoading() در app.js */
.loading-scrim{
  position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--bg) 65%,transparent);
  backdrop-filter:blur(2px);display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.loading-scrim.show{opacity:1;pointer-events:auto}
.loading-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 28px;display:flex;align-items:center;gap:13px;
  transform:translateY(8px);transition:transform .18s;
}
.loading-scrim.show .loading-card{transform:none}
.loading-card .spin.lg{color:var(--accent)}
.loading-card b{font-size:13px;font-weight:700}
/* اسکلتون — جای محتوایی که هنوز نیامده: <div class="sk w-50"></div> */
.sk{
  display:inline-block;height:12px;border-radius:5px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--grid) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* دکمه در حال کار — متن مخفی و اسپینر جایش: btn.classList.add('busy') */
.btn.busy{pointer-events:none;opacity:.75}
.btn.busy::before{content:"";width:13px;height:13px;flex:none;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.content{padding:22px 26px 46px;max-width:1460px;width:100%;margin-inline:auto}

/* ---------- generic ---------- */
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:20px;font-weight:800;text-wrap:balance}
.page-head p{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.head-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:var(--r-s);
  transition:background .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.block{width:100%;justify-content:center;margin-top:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h3{font-size:13.5px;font-weight:700}
.card-h .sub{font-size:11px;color:var(--ink-3)}
.card-h .push{margin-inline-start:auto}
.card-b{padding:16px 18px}
.card-b.flush-top{padding-top:6px}
.card-b.divided{border-top:1px solid var(--grid)}
.card-b.note{font-size:11.5px;color:var(--ink-2)}
.card-b.row-list{display:flex;flex-direction:column;gap:9px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.g{background:var(--good-tint);color:var(--good)}
.pill.w{background:var(--warn-tint);color:var(--warn)}
.pill.b{background:var(--bad-tint);color:var(--bad)}
.pill.n{background:var(--accent-tint);color:var(--accent)}
.pill.m{background:var(--surface-2);color:var(--ink-2)}
.pill.m::before{background:var(--ink-3)}
.pill .unit{font-size:12px;font-weight:600;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.tgl{
  position:relative;width:44px;height:24px;border-radius:20px;border:1px solid var(--line);
  background:var(--surface-2);transition:background .2s;
}
.tgl::after{
  content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;
  border-radius:50%;background:var(--ink-2);transition:transform .2s;
}
.tgl[aria-pressed="true"]{background:var(--accent)}
.tgl[aria-pressed="true"]::after{transform:translateX(-19px);background:#fff}

/* ---------- utility ها — به‌جای استایل درون‌خطی ---------- */
.bg-accent{background:var(--accent)}
.bg-orange{background:var(--orange)}
.bg-good{background:var(--good)}
.bg-warn{background:var(--warn)}
.bg-bad{background:var(--bad)}
.bg-muted{background:var(--ink-3)}
/* رنگ شناسه هر کارشناس — در همه صفحات یکسان */
.av.p1{background:var(--team-1)}
.av.p2{background:var(--team-2)}
.av.p3{background:var(--team-3)}
.av.p4{background:var(--team-4)}
.av.p5{background:var(--team-5)}
/* عرض نوارها و قطعات نمودار — داده نمایشی صفحات */
.w-0{width:0}
.w-6{width:6%}
.w-7{width:7%}
.w-15{width:15%}
.w-16{width:16%}
.w-17{width:17%}
.w-31{width:31%}
.w-33{width:33%}
.w-38{width:38%}
.w-50{width:50%}
.w-79{width:79%}
.w-85{width:85%}
.w-87{width:87%}
.w-88{width:88%}
.w-92{width:92%}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{padding:15px 16px}
.kpi .lbl{font-size:11.5px;color:var(--ink-2);font-weight:500}
.kpi .val{font-size:27px;font-weight:800;line-height:1.3;margin-top:2px}
.kpi .val .unit{font-size:12px;font-weight:600;color:var(--ink-3)}
.kpi .delta{font-size:11px;font-weight:600;margin-top:1px}
.kpi .delta.up{color:var(--good)} .kpi .delta.down{color:var(--bad)}
.kpi.alert .val{color:var(--bad)}
.kpi .spark{margin-top:8px;display:block;width:100%;height:22px}
.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- dashboard grid ---------- */
.dash{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}
@media(max-width:1050px){.dash{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---------- charts ---------- */
.chart-wrap{width:100%;overflow-x:auto;position:relative}
.chart-wrap svg{display:block;width:100%;height:auto}
.gridln{stroke:var(--grid);stroke-width:1}
.axlbl{font-size:10px;fill:var(--ink-3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-2);padding:2px 18px 10px}
.legend .key{display:inline-flex;align-items:center;gap:6px}
.key .sw{width:10px;height:10px;border-radius:3px;flex:none}
.segbar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px}
.segbar .s{height:100%;min-width:2px}
.segbar.tall{height:14px}
.bar-lbl{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin-bottom:6px}
.bar-lbl b{font-weight:600}
.bar-lbl .m{font-size:11px;color:var(--ink-3)}
.bar-lbl.gap-above{margin-top:14px}
.legend.under{padding:8px 0 0}
.legend.wide{padding:10px 0 0}
.seg{transition:opacity .15s}
.seg:hover{opacity:.8}
.tip{
  position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);
  padding:8px 12px;border-radius:var(--r-s);font-size:11.5px;line-height:1.7;
  white-space:nowrap;z-index:30;box-shadow:var(--shadow);
}
.tip .t{font-weight:700;font-size:11px}
.crosshair{stroke:var(--ink-3);stroke-width:1;opacity:.55}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:start;font-size:10.5px;font-weight:700;color:var(--ink-3);
  padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px 14px;border-bottom:1px solid var(--grid);vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
.tick{font-size:10px;font-weight:700;border-radius:20px;padding:2px 8px;display:inline-block}
.tick.ok{background:var(--good-tint);color:var(--good)}
.tick.so{background:var(--warn-tint);color:var(--warn)}
.tick.no{background:var(--bad-tint);color:var(--bad)}
.tick.n{background:var(--accent-tint);color:var(--accent)}
.tick.m{background:var(--surface-2);color:var(--ink-2)}
.mini-meter{display:inline-flex;align-items:center;gap:8px}
.mini-meter .track{width:52px;height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.mini-meter .fill{height:100%;border-radius:4px}
.mini-meter .pc{font-size:10.5px;color:var(--ink-2);min-width:30px}
.who{display:flex;align-items:center;gap:8px}
.who .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;flex:none}
.who .nm b{display:block;font-size:12px;font-weight:600;line-height:1.4}
.who .nm span{font-size:10px;color:var(--ink-3)}
.tid{font-weight:700;color:var(--accent);font-size:12px}

/* ---------- board ---------- */
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px;margin-bottom:14px}
@media(max-width:1150px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tech{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 11px;display:flex;align-items:center;gap:9px;min-width:0;
  font-family:inherit;text-align:start;color:inherit;transition:border-color .15s,background .15s;
}
button.tech:hover{border-color:var(--accent);background:var(--accent-tint)}
.tech.on{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.tech.over{border-color:var(--accent);border-style:solid;background:var(--accent-tint)}
.tech .tx{min-width:0}
.tech .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:700;flex:none}
.tech b{font-size:11.5px;display:block;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tech span{font-size:9.5px;color:var(--ink-3);display:block;white-space:nowrap}
.load{margin-inline-start:auto;font-size:9.5px;font-weight:700;border-radius:20px;padding:2px 7px;white-space:nowrap;flex:none}
.load.lo{background:var(--good-tint);color:var(--good)}
.load.md{background:var(--warn-tint);color:var(--warn)}
.load.hi{background:var(--bad-tint);color:var(--bad)}
.board-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.board-filters .inp{width:auto;min-width:150px;font-size:12px;padding:7px 11px}
.board-count{margin-inline-start:auto}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
@media(max-width:1300px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.board{grid-template-columns:minmax(0,1fr)}}
.bcol{min-width:0}
.col-h{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.col-h b{font-size:12.5px;font-weight:700}
.cnt{font-size:10.5px;font-weight:700;background:var(--surface-2);color:var(--ink-2);border-radius:20px;padding:1px 8px}
.tcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(25,28,33,.04);
  border-inline-start:3px solid transparent;transition:box-shadow .15s,transform .15s;
}
.tcard[draggable="true"]{cursor:grab}
.tcard[draggable="true"]:active{cursor:grabbing}
.tcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.tcard.u1{border-inline-start-color:var(--bad)}
.tcard.u2{border-inline-start-color:var(--warn)}
.tcard.u3{border-inline-start-color:var(--accent)}
.tcard.dragging{opacity:.45}
.tcard .top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tcard .id{font-size:11px;font-weight:800;color:var(--accent)}
.tcard .typ{font-size:10px;background:var(--surface-2);color:var(--ink-2);border-radius:20px;padding:1px 8px;font-weight:600}
.tcard .sla-p{margin-inline-start:auto}
.tcard h4{font-size:12.5px;font-weight:600;line-height:1.55;margin-bottom:4px}
.tcard .meta{display:flex;gap:9px;font-size:10px;color:var(--ink-3);flex-wrap:wrap}
.zone-chip{font-size:9.5px;font-weight:700;background:var(--accent-tint);color:var(--accent);border-radius:4px;padding:1px 6px}
.assign{margin-top:8px}
.assign .as{width:100%;font-size:11px;padding:6px 9px}
.dropzone{min-height:130px;border:2px dashed transparent;border-radius:var(--r-s);padding:4px;transition:border-color .15s,background .15s}
.dropzone.over{border-color:var(--accent);background:var(--accent-tint)}
.empty-hint{font-size:11px;color:var(--ink-3);text-align:center;padding:22px 6px;border:2px dashed var(--line);border-radius:var(--r-s)}
.tcard.filtered,.tech-hide{display:none!important}

/* ---------- penalty ---------- */
.model-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1000px){.model-grid{grid-template-columns:1fr}}
.tier-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--grid)}
.tier-row:last-child{border-bottom:none}
.tier-badge{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;color:#fff}
.t1{background:#DB7B22}.t2{background:#B54F00}.t3{background:#7A3300}.t4{background:#4A1F00}
:root[data-theme="dark"] .t1{background:#D07F1F;color:#241300}
:root[data-theme="dark"] .t2{background:#A35D0E}
:root[data-theme="dark"] .t3{background:#7A430F}
:root[data-theme="dark"] .t4{background:#53300C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t1{background:#D07F1F;color:#241300}
  :root:not([data-theme="light"]) .t2{background:#A35D0E}
  :root:not([data-theme="light"]) .t3{background:#7A430F}
  :root:not([data-theme="light"]) .t4{background:#53300C}
}
.tier-row .tx b{font-size:12.5px;display:block}
.tier-row .tx span{font-size:11px;color:var(--ink-2)}
.tier-mult{margin-inline-start:auto;text-align:end;font-size:16px;font-weight:800;white-space:nowrap}
.tier-mult small{font-size:10px;font-weight:600;color:var(--ink-3);display:block}
.calc-box{background:var(--orange-tint);border-radius:var(--r-s);padding:11px 14px;font-size:12px;line-height:1.9}
.calc-box b{color:var(--orange)}

/* ---------- ticket detail ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1050px){.detail-grid{grid-template-columns:1fr}}
.tl{position:relative;padding-inline-start:20px}
.tl::before{content:"";position:absolute;inset-inline-start:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;inset-inline-start:-20px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.tl-item.bad .tl-dot{border-color:var(--bad)}
.tl-item.good .tl-dot{border-color:var(--good)}
.tl-item .t{font-size:12.5px;font-weight:700}
.tl-item .d{font-size:11.5px;color:var(--ink-2)}
.tl-item .ts{font-size:10px;color:var(--ink-3)}
.attr{display:flex;gap:10px;align-items:center;background:var(--bad-tint);border-radius:var(--r-s);padding:10px 12px}
.attr .ic{font-size:15px;flex:none}
.attr b{font-size:11.5px;color:var(--bad);display:block;line-height:1.5}
.attr span{font-size:10.5px;color:var(--ink-2);line-height:1.5}
.attr.w{background:var(--warn-tint)} .attr.w b{color:var(--warn)}
.attr.n{background:var(--accent-tint)} .attr.n b{color:var(--accent)}
.attr .btn{margin-inline-start:auto;flex:none;padding:5px 12px;font-size:11px}
.prop{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prop>div{background:var(--surface-2);border-radius:var(--r-s);padding:8px 12px}
.prop .k{font-size:10px;color:var(--ink-3)}
.prop .v{font-size:12.5px;font-weight:600}
.prop .v.danger{color:var(--bad)}

/* ---------- analytics / team ---------- */
.an-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.an-grid>*{min-width:0}
@media(max-width:1000px){.an-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- جداول پهن در موبایل — فشرده‌تر ---------- */
@media(max-width:640px){
  th{padding:8px 10px}
  td{padding:9px 10px;font-size:12px}
}

/* ---------- workload bars ---------- */
.wl{display:flex;flex-direction:column;gap:12px}
.wl-item .bar-lbl{margin-bottom:3px}
.wl-item .bar-lbl b{font-size:12px}
.wl-item .bar-lbl b .zone{font-weight:400;color:var(--ink-3);font-size:10.5px}
.wl-track{height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.wl-fill{height:100%;border-radius:5px;transition:width .4s}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%) translateY(80px);
  background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;opacity:0;transition:all .3s;z-index:99;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- ناوبری موبایل — برگر + کشو ---------- */
.burger{
  display:none;width:38px;height:38px;flex:none;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r-s);
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
}
.burger span{width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.scrim{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.scrim.show{opacity:1;pointer-events:auto}
body.nav-locked{overflow:hidden}

@media(max-width:960px){
  .app{display:block}
  .burger{display:flex}
  .crumb span{display:none}
  .side{
    position:fixed;inset-block:0;inset-inline-start:0;z-index:60;
    width:min(280px,84vw);overflow-y:auto;
    transform:translateX(105%);transition:transform .28s ease;
    box-shadow:var(--shadow);
  }
  .side.open{transform:none}
  .content{padding:16px 14px 40px}
  .topbar{padding:10px 14px;gap:10px}
}

/* ---------- گروه‌بندی منو ---------- */
.nav-lbl{font-size:10px;font-weight:700;color:var(--ink-3);padding:12px 12px 2px;letter-spacing:.02em}

/* ---------- فرم‌ها ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
@media(max-width:760px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.flbl{font-size:12px;font-weight:600;color:var(--ink-2)}
.field .req{color:var(--bad)}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.inp{
  width:100%;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 12px;transition:border-color .15s,box-shadow .15s;min-width:0;
}
.inp::placeholder{color:var(--ink-3)}
.inp:hover{border-color:var(--ink-3)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.inp:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
.inp[aria-invalid="true"]{border-color:var(--bad)}
.inp[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--bad-tint)}
textarea.inp{resize:vertical;min-height:92px;line-height:1.8}
select.inp{
  appearance:none;cursor:pointer;padding-inline-end:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B909A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;
}
.hint{font-size:11px;color:var(--ink-3);line-height:1.7}
.hint.bad{color:var(--bad)}
.inp-wrap{position:relative}
.inp-wrap>.ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px;pointer-events:none}
.inp-wrap .inp{padding-inline-start:34px}
.inp-group{display:flex}
.inp-group .inp{flex:1;border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}
.inp-group .inp:focus{border-inline-end-color:var(--accent)}
.inp-group .btn{border-start-start-radius:0;border-end-start-radius:0}
.opt-row{display:flex;flex-direction:column;gap:10px}
.opt-inline{display:flex;gap:18px;flex-wrap:wrap;row-gap:10px}
.chk,.rad{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;position:relative}
.chk input,.rad input,.file input{position:absolute;opacity:0;width:1px;height:1px}
.chk .box,.rad .ring{
  flex:none;width:17px;height:17px;border:1.5px solid var(--ink-3);border-radius:5px;
  background:var(--surface);display:grid;place-items:center;transition:border-color .15s,background .15s;
}
.rad .ring{border-radius:50%}
.chk:hover .box,.rad:hover .ring{border-color:var(--accent)}
.chk input:checked+.box{background:var(--accent);border-color:var(--accent)}
.chk input:checked+.box::after{content:"✓";color:#fff;font-size:10px;font-weight:800;line-height:1}
.rad input:checked+.ring{border-width:5px;border-color:var(--accent)}
.chk input:focus-visible+.box,.rad input:focus-visible+.ring{outline:2px solid var(--accent);outline-offset:2px}
.chk.dis,.rad.dis{cursor:not-allowed;opacity:.55}
.chk input:disabled~*,.rad input:disabled~*{opacity:.45}
.file{
  position:relative;display:block;border:1.5px dashed var(--line);border-radius:var(--r-s);
  padding:20px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.file:hover{border-color:var(--accent);background:var(--accent-tint)}
.file .ic{font-size:20px;color:var(--ink-3)}
.file b{display:block;font-size:12.5px;margin-top:6px}
.file span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.tgl-row{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.rng{width:100%;accent-color:var(--accent);cursor:pointer}

/* ---------- مودال ---------- */
.modal-scrim{
  position:fixed;inset:0;z-index:80;background:rgba(10,12,16,.55);
  display:grid;place-items:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-scrim.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);width:100%;max-width:470px;max-height:86vh;
  display:flex;flex-direction:column;transform:translateY(14px) scale(.98);transition:transform .2s;
}
.modal-scrim.show .modal{transform:none}
.modal.lg{max-width:640px}
.modal.sm{max-width:370px}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
.modal-h h3{font-size:15px;font-weight:800}
.modal-h .x{margin-inline-start:auto;width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--ink-3);font-size:15px}
.modal-h .x:hover{background:var(--surface-2);color:var(--ink)}
.modal-b{padding:2px 18px 16px;overflow-y:auto;font-size:12.5px;color:var(--ink-2);line-height:1.8}
.modal-b p{margin-bottom:10px}
.modal-f{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.modal-f .push{margin-inline-start:auto}
body.modal-locked{overflow:hidden}

/* ---------- اعلان‌ها ---------- */
.alert{display:flex;gap:11px;align-items:flex-start;border:1px solid transparent;border-radius:var(--r-s);padding:12px 14px;font-size:12.5px}
.alert .ic{font-size:15px;line-height:1.5;flex:none}
.alert .bdy{min-width:0;flex:1}
.alert b{display:block;font-size:12.5px;margin-bottom:2px}
.alert p{color:var(--ink-2);font-size:12px;line-height:1.75}
.alert .x{margin-inline-start:auto;background:none;border:none;color:var(--ink-3);font-size:14px;flex:none;padding:2px 4px}
.alert .x:hover{color:var(--ink)}
.alert.i{background:var(--accent-tint)} .alert.i .ic,.alert.i b{color:var(--accent)}
.alert.ok{background:var(--good-tint)} .alert.ok .ic,.alert.ok b{color:var(--good)}
.alert.w{background:var(--warn-tint)} .alert.w .ic,.alert.w b{color:var(--warn)}
.alert.b{background:var(--bad-tint)} .alert.b .ic,.alert.b b{color:var(--bad)}
.alert.n{background:var(--surface);border-color:var(--line)} .alert.n .ic,.alert.n b{color:var(--ink-2)}
.badge{background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 7px;min-width:20px;text-align:center;display:inline-block}
.notif-list{display:flex;flex-direction:column}
.notif{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--grid);align-items:flex-start;min-width:0}
.notif:last-child{border-bottom:none}
.notif .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:none;background:var(--surface-2);color:var(--ink-2)}
.notif .ic.i{background:var(--accent-tint);color:var(--accent)}
.notif .ic.ok{background:var(--good-tint);color:var(--good)}
.notif .ic.w{background:var(--warn-tint);color:var(--warn)}
.notif .ic.b{background:var(--bad-tint);color:var(--bad)}
.notif .bdy{min-width:0;flex:1}
.notif .t{font-size:12.5px;font-weight:600;line-height:1.6}
.notif .t::after{content:"";display:none;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-inline-start:6px;vertical-align:middle}
.notif.unread .t::after{display:inline-block}
.notif .d{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.notif .ts{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.notif .x{margin-inline-start:auto;background:none;border:none;color:var(--ink-3);font-size:14px;flex:none;padding:2px 4px}
.notif .x:hover{color:var(--ink)}
.alert .bdy .btn{margin-top:8px;font-size:11.5px;padding:5px 12px}
.notif-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- تایپوگرافی و آیکون ---------- */
.type-scale{display:flex;flex-direction:column}
.type-scale>div{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--grid);padding:11px 2px}
.type-scale>div:last-child{border-bottom:none}
.type-scale .spec{font-size:10.5px;color:var(--ink-3);min-width:180px;font-variant-numeric:tabular-nums}
.type-scale .sample{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){
  .type-scale>div{flex-direction:column;gap:2px;align-items:flex-start}
  .type-scale .spec{min-width:0}
}
.t-display{font-size:28px;font-weight:800;line-height:1.4}
.t-h1{font-size:20px;font-weight:800}
.t-h2{font-size:16px;font-weight:800}
.t-h3{font-size:13.5px;font-weight:700}
.t-body{font-size:13px;font-weight:400}
.t-small{font-size:12px;font-weight:400;color:var(--ink-2)}
.t-note{font-size:11.5px;font-weight:400;color:var(--ink-2)}
.t-cap{font-size:10.5px;font-weight:500;color:var(--ink-3)}
.wt4{font-weight:400}.wt5{font-weight:500}.wt6{font-weight:600}.wt7{font-weight:700}.wt8{font-weight:800}
.w-demo{display:flex;flex-direction:column;gap:10px;font-size:14px}
.t-accent{color:var(--accent)} .t-good{color:var(--good)} .t-warn{color:var(--warn)} .t-bad{color:var(--bad)} .t-muted{color:var(--ink-3)}
.mt-10{margin-top:10px}
.code{
  font-family:Consolas,Menlo,monospace;font-size:11.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--accent);
  direction:ltr;unicode-bidi:embed;
}
.link{color:var(--accent);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}
blockquote.quote{border-inline-start:3px solid var(--accent);background:var(--accent-tint);border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 14px;font-size:12.5px;color:var(--ink-2)}
ul.demo-list{padding-inline-start:18px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.ic-cell{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 4px;text-align:center;min-width:0}
.ic-cell .g{font-size:19px;line-height:1.5;display:block;color:var(--ink)}
.ic-cell span{font-size:9.5px;color:var(--ink-3);display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- حالت خالی ---------- */
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;align-items:stretch}
.demo-grid>*{min-width:0}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:46px 22px;gap:2px;white-space:normal}
.empty-state .art{width:80px;height:80px;border-radius:24px;background:var(--surface-2);display:grid;place-items:center;font-size:32px;color:var(--ink-3);margin-bottom:12px}
.empty-state.ok .art{background:var(--good-tint);color:var(--good)}
.empty-state.bad .art{background:var(--bad-tint);color:var(--bad)}
.empty-state h2{font-size:15px;font-weight:800}
.empty-state p{font-size:12.5px;color:var(--ink-2);max-width:340px;line-height:1.85;margin-top:4px}
.empty-state .acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.empty-state.slim{padding:30px 14px}
.empty-state.slim .art{width:56px;height:56px;border-radius:18px;font-size:22px;margin-bottom:8px}

/* ---------- دیالوگ آیکون‌دار — تأیید، خطا، ورودی ---------- */
.swal-scrim{
  position:fixed;inset:0;z-index:85;background:rgba(10,12,16,.55);
  display:grid;place-items:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.swal-scrim.show{opacity:1;pointer-events:auto}
.swal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);width:100%;max-width:400px;max-height:86vh;overflow-y:auto;
  padding:26px 22px 18px;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .2s;
}
.swal-scrim.show .swal{transform:none}
.swal-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 12px}
.swal-icon svg{width:28px;height:28px;display:block}
.swal-icon.success{background:var(--good-tint);color:var(--good)}
.swal-icon.error{background:var(--bad-tint);color:var(--bad)}
.swal-icon.info,.swal-icon.question{background:var(--accent-tint);color:var(--accent)}
.swal-icon.warning{background:var(--warn-tint);color:var(--warn)}
.swal h3{font-size:16px;font-weight:800;line-height:1.6}
.swal .swal-d{font-size:12.5px;color:var(--ink-2);line-height:1.85;margin-top:6px}
.swal .inp{margin-top:14px;text-align:center}
.swal-f{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.swal-f .btn{min-width:110px;justify-content:center}
body.swal-locked{overflow:hidden}

/* ---------- توست پشته‌ای — چند پیام هم‌زمان ---------- */
.stack-toasts{
  position:fixed;bottom:20px;inset-inline-start:50%;transform:translateX(50%);z-index:99;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:max-content;max-width:92vw;
}
.stack-toast{
  display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:var(--r-s);font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow);max-width:min(440px,92vw);
  opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;
}
.stack-toast.show{opacity:1;transform:none}
.stack-toast .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.stack-toast .ic svg{width:11px;height:11px;display:block}
.stack-toast.ok .ic{background:var(--good)}
.stack-toast.bad .ic{background:var(--bad)}
.stack-toast.warn .ic{background:var(--warn)}
.stack-toast.i .ic{background:var(--accent)}
.stack-toast .msg{min-width:0;text-align:start}

/* ---------- صفحات ورود و ثبت‌نام — بدون سایدبار ---------- */
.auth{
  min-height:100vh;display:grid;place-items:center;align-content:center;gap:14px;
  padding:24px 16px;position:relative;
  background:
    radial-gradient(560px 300px at 85% -8%,var(--accent-tint),transparent 70%),
    radial-gradient(480px 260px at 8% 108%,var(--orange-tint),transparent 70%);
}
.auth-card{
  width:min(430px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:28px 26px 22px;
}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand .brand-mark{width:46px;height:46px;border-radius:13px;font-size:19px;margin:0 auto 10px}
.auth-brand .brand-mark .bi{font-size:21px}
.auth-brand h1{font-size:18px;font-weight:800}
.auth-brand p{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.8}
.auth-brand p b{color:var(--ink-2)}
.auth-card .field{margin-bottom:13px}
.auth-card .btn.block{margin-top:16px}
.btn.block:disabled{opacity:.55;cursor:not-allowed}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:2px 2px 0}
.auth-row.center{justify-content:center;margin-top:10px}
.auth-alt{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:14px;padding-top:13px;border-top:1px solid var(--grid)}
.auth-foot{font-size:11px;color:var(--ink-3);text-align:center}
.auth-theme{position:fixed;top:16px;inset-inline-end:16px;z-index:10;box-shadow:var(--shadow)}
.pw-tgl{
  position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:none;background:none;color:var(--ink-3);
  font-size:14px;display:grid;place-items:center;border-radius:6px;
}
.pw-tgl:hover{color:var(--ink)}
.inp-wrap.has-tgl .inp{padding-inline-end:38px}
/* دکمه چشم داخلی مرورگر (Edge) — چشم خود سامانه جای آن را می‌گیرد */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none;width:0;height:0}
.otp{display:flex;gap:8px;margin-bottom:8px;direction:ltr}
.otp .inp{flex:1;min-width:0;text-align:center;font-size:19px;font-weight:800;padding:9px 2px}
.resend{border:none;background:none;color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:700;padding:2px 4px}
.resend:disabled{color:var(--ink-3);cursor:not-allowed}
.resend:not(:disabled):hover{text-decoration:underline}
.t-center{text-align:center}

/* ---------- زیرمنوی سایدبار — مدیریت تیکت‌ها ---------- */
.nav-btn .chev{margin-inline-start:auto;font-size:13px;display:inline-flex;color:var(--ink-3);transition:transform .2s}
.nav-btn.sub[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-sub{display:none;flex-direction:column;gap:2px;margin:1px 0 3px}
.nav-sub.open{display:flex}
.nav-sub .nav-btn{font-size:12.5px;padding:7px 12px;padding-inline-start:24px}
.sla-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px}