/* voice2txt marketing console — visual system (RTL, dual-theme). */

/* Pinar — variable font: ONE 84KB file covers every weight, versus three
   static files for three weights. `font-weight: 100 900` is what tells the
   browser this face spans the whole range, otherwise it synthesises bold by
   smearing the glyphs (which looks especially wrong in Persian).
   The non-FD cut is deliberate: FD remaps Latin digits to Persian glyphs, and
   this UI shows genuinely Latin technical strings (start_param, emails, bot
   usernames) where Persian-looking digits would be misleading. */
@font-face{
  font-family:"Pinar";
  src:url("/static/fonts/Pinar-VF.woff2") format("woff2-variations"),
      url("/static/fonts/Pinar-VF.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ── design tokens ──────────────────────────────────────────────────────── */
:root{
  /* new names */
  --surface:#ffffff; --surface-2:#eef2f8; --inset:#f6f8fb;
  --line-2:#d0d7e3; --faint:#98a0b0;
  --brand:#17233d; --brand-ink:#eaeefb; --brand-sub:#9fb0d6;
  --accent-2:#245cc0; --accent-tint:#e9f0fc;
  --ok-line:#bfe2c8; --warn-line:#eccf96; --bad-line:#f0c2c2;
  --shadow:0 1px 2px rgba(20,30,55,.05), 0 6px 20px rgba(20,30,55,.07);
  --shadow-sm:0 1px 2px rgba(20,30,55,.06);
  --radius:14px; --radius-sm:10px;
  /* legacy names (kept so existing inline styles / app.js keep working) */
  --bg:#f4f6f9; --card:#ffffff; --line:#e3e7ef;
  --text:#131722; --muted:#5d6675;
  --accent:#2f6fdc; --accent-bg:#e9f0fc;
  --ok:#2f8a45; --ok-bg:#e6f4ea;
  --warn:#996507; --warn-bg:#fbeed7;
  --bad:#cc3b3b; --bad-bg:#fbe8e8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#161d29; --surface-2:#1f2836; --inset:#131a26;
    --line-2:#36435c; --faint:#66728a;
    --brand:#0b111d; --brand-ink:#e6ecfa; --brand-sub:#8a97b5;
    --accent-2:#719cf2; --accent-tint:#182740;
    --ok-line:#1f4d2e; --warn-line:#5a441a; --bad-line:#5c2a2a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --bg:#0e131c; --card:#161d29; --line:#26303f;
    --text:#e8edf6; --muted:#99a3b5;
    --accent:#5b8def; --accent-bg:#182740;
    --ok:#5cc274; --ok-bg:#12301c;
    --warn:#e0a53a; --warn-bg:#33260c;
    --bad:#ec6a6a; --bad-bg:#351818;
  }
}
:root[data-theme="dark"]{
  --surface:#161d29; --surface-2:#1f2836; --inset:#131a26;
  --line-2:#36435c; --faint:#66728a;
  --brand:#0b111d; --brand-ink:#e6ecfa; --brand-sub:#8a97b5;
  --accent-2:#719cf2; --accent-tint:#182740;
  --ok-line:#1f4d2e; --warn-line:#5a441a; --bad-line:#5c2a2a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --bg:#0e131c; --card:#161d29; --line:#26303f;
  --text:#e8edf6; --muted:#99a3b5;
  --accent:#5b8def; --accent-bg:#182740;
  --ok:#5cc274; --ok-bg:#12301c;
  --warn:#e0a53a; --warn-bg:#33260c;
  --bad:#ec6a6a; --bad-bg:#351818;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pinar",Tahoma,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition:none!important}}

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar{
  background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(16px,4vw,40px);
}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.logo{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.09);
  display:grid; place-items:center; flex:none}
.logo svg{width:20px; height:20px}
.brand .name{font-weight:700; font-size:15.5px; letter-spacing:.1px; line-height:1.25; white-space:nowrap}
.brand .sub{font-size:11px; color:var(--brand-sub); line-height:1.2}
.topbar .grow{margin-inline-start:auto}
.topbar .ver{font-size:11px; color:var(--brand-sub); font-family:ui-monospace,Menlo,monospace; direction:ltr}
.icon-btn{width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:var(--brand-ink); cursor:pointer; display:grid; place-items:center; flex:none}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn svg{width:17px; height:17px}

.wrap{max-width:1040px; margin:0 auto; padding:20px clamp(14px,4vw,28px) 60px}

/* status pill (legacy #healthPill uses .pill.ok / .pill.bad) */
.pill{font-size:12px; padding:4px 11px; border-radius:99px; display:inline-flex; align-items:center; gap:7px; font-weight:500}
.pill.ok{background:rgba(74,222,128,.14); color:#3fae63}
.topbar .pill.ok{color:#7ee2a0}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block}
.topbar .pill.ok .dot{box-shadow:0 0 0 3px rgba(126,226,160,.18)}

/* legacy header (if still present) reflows into topbar look */
header{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
header h1{font-size:16px; font-weight:700; margin:0}
header .spacer{margin-inline-start:auto; color:var(--muted); font-size:12px; font-family:ui-monospace,monospace; direction:ltr}

/* ── nav (segmented pills, single scrollable row — never hides a tab) ─────── */
nav{display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:5px; box-shadow:var(--shadow-sm);
  margin-bottom:20px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
nav::-webkit-scrollbar{height:6px}
nav::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
nav button{border:none; background:none; font:inherit; font-size:13px; font-weight:500;
  color:var(--muted); padding:8px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; flex:none;
  scroll-snap-align:start; display:inline-flex; align-items:center; gap:7px; transition:.12s}
nav button:hover{color:var(--text); background:var(--surface-2)}
nav button.active{color:#fff; background:var(--accent); box-shadow:0 2px 8px rgba(47,111,220,.28)}
nav .badge{background:var(--bad); color:#fff; border-radius:99px; min-width:18px; height:18px;
  padding:0 5px; font-size:11px; font-weight:700; display:inline-grid; place-items:center; line-height:1}
nav button.active .badge{background:rgba(255,255,255,.24)}

/* ── KPI tiles (.stats/.stat) ───────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--accent)}
.stat .label{font-size:12px; color:var(--muted)}
.stat .value{font-size:26px; font-weight:700; line-height:1.25; margin-top:2px; font-variant-numeric:tabular-nums}

/* ── cards ──────────────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow-sm)}
.card .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:12px}
.badge-type{background:var(--accent-tint); color:var(--accent); border-radius:99px; padding:2px 11px; font-weight:500}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; direction:ltr; color:var(--muted); font-size:12px}
.flag-ok{color:var(--ok); margin-inline-start:auto; font-weight:500}
.flag-warn{color:var(--warn); margin-inline-start:auto; font-weight:500}
.body-text{background:var(--inset); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; white-space:pre-wrap; margin-bottom:12px; font-size:13.5px; line-height:1.8}
.flags{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn);
  border-radius:var(--radius-sm); padding:8px 12px; font-size:12.5px; margin-bottom:12px}
.seg-info{background:var(--accent-tint); color:var(--accent); border-radius:var(--radius-sm);
  padding:8px 12px; font-weight:500}
.seg-info-txt{color:var(--accent)!important}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
button.b{font:inherit; font-size:13px; font-weight:500; padding:8px 15px; border-radius:9px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.12s}
button.b:hover{background:var(--surface-2); border-color:var(--muted)}
/* بازنشسته: در مارکت‌راد .approve یعنی «کنش اصلی» و رنگ برند دارد.
   تعریف قدیمیِ سبز، به‌خاطر specificity بالاتر (button.b.approve) روی قانون
   جدید غالب می‌شد و دکمهٔ ورود را کم‌رنگ نشان می‌داد. */
button.b.approve:hover{filter:brightness(1.06)}
button.b.reject{color:var(--bad); border-color:var(--bad-line)}
button.b.reject:hover{background:var(--bad); border-color:var(--bad); color:#fff}
button.b.danger{background:var(--surface); color:var(--bad); border-color:var(--bad-line)}
button.b.danger:hover{background:var(--bad); border-color:var(--bad); color:#fff}
button.b:disabled{opacity:.5; cursor:default}

textarea, input[type=text], input[type=password], input[type=datetime-local]{
  width:100%; font:inherit; font-size:13.5px; padding:10px 13px;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface); color:var(--text);
}
textarea:focus, input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
textarea{min-height:72px; resize:vertical}
input[type=checkbox]{width:auto; accent-color:var(--accent)}

/* ── agent chat: messenger layout — the message list scrolls inside a bounded
   pane so the whole page doesn't scroll endlessly; the composer stays pinned. ── */
#tab-chat{display:flex; flex-direction:column; gap:10px; height:calc(100dvh - 208px); min-height:320px}
#tab-chat .chatlog{flex:1 1 auto; overflow-y:auto; min-height:0; margin:0; padding:4px 2px 8px}
#tab-chat .chatform{flex:none}
.chatlog{display:flex; flex-direction:column; gap:14px; margin-bottom:14px; min-height:120px}
.turn{display:flex; gap:10px; max-width:90%}
.turn.user{align-self:flex-start; flex-direction:row-reverse}
.turn.assistant{align-self:flex-end}
.avatar{width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; font-size:15px}
.turn.user .avatar{background:var(--accent); color:#fff; font-weight:700; font-size:13px}
.turn.assistant .avatar{background:var(--surface-2); border:1px solid var(--line)}
.bubble{padding:9px 14px; border-radius:15px; font-size:13.5px; line-height:1.7; min-width:0}
.turn.user .bubble{background:var(--accent-tint); border-bottom-right-radius:5px}
.turn.assistant .bubble{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); border-bottom-left-radius:5px}
/* collapse very long answers so the thread stays scannable */
.bubble .md.clamped{max-height:300px; overflow:hidden; position:relative}
.bubble .md.clamped::after{content:""; position:absolute; inset-inline:0; bottom:0; height:56px; pointer-events:none;
  background:linear-gradient(to top, var(--surface), transparent)}
.turn.user .bubble .md.clamped::after{background:linear-gradient(to top, var(--accent-tint), transparent)}
.md-more{margin-top:7px; cursor:pointer; font:inherit; font-size:12px; font-weight:500;
  color:var(--accent); background:none; border:none; padding:2px 0; display:inline-flex; align-items:center; gap:4px}
.md-more:hover{text-decoration:underline}
.tool-note{align-self:center; font-size:12px; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; padding:4px 13px; max-width:90%; text-align:center}

/* legacy plain bubbles (.msg) — used by site-chat thread & sales pulse (untrusted text, stays plain) */
.msg{max-width:85%; padding:9px 14px; border-radius:14px; white-space:pre-wrap; font-size:13.5px; line-height:1.8}
.msg.user{background:var(--accent-tint); align-self:flex-start; border-bottom-right-radius:5px}
.msg.assistant{background:var(--surface); border:1px solid var(--line); align-self:flex-end; box-shadow:var(--shadow-sm); border-bottom-left-radius:5px}
.msg.tool{font-size:12px; color:var(--muted); align-self:center; background:none; padding:0}

.chatform{display:flex; gap:9px}
.chatform input{flex:1; padding:11px 15px; border-radius:11px}

/* ── rendered markdown ──────────────────────────────────────────────────── */
.md > :first-child{margin-top:0} .md > :last-child{margin-bottom:0}
.md p{margin:0 0 8px}
.md strong{font-weight:700}
.md h1,.md h2,.md h3{font-weight:700; margin:12px 0 6px; line-height:1.4}
.md h1{font-size:16px} .md h2{font-size:15px} .md h3{font-size:14px}
.md ul,.md ol{margin:6px 0 10px; padding-inline-start:20px}
.md li{margin:2px 0}
.md code{font-family:ui-monospace,Menlo,monospace; background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px; font-size:12px; direction:ltr; unicode-bidi:embed}
.md a{color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent); word-break:break-all}
.md a:hover{border-bottom-color:var(--accent)}
.md .tbl-wrap{overflow-x:auto; margin:8px 0 10px; border:1px solid var(--line); border-radius:10px}
.md table{width:100%; border-collapse:collapse; font-size:12.5px; margin:0}
.md thead th{background:var(--surface-2); color:var(--muted); font-weight:700; text-align:right;
  padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.md tbody td{padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-variant-numeric:tabular-nums}
.md tbody tr:last-child td{border-bottom:none}
.md tbody tr:nth-child(even){background:var(--inset)}

/* ── tables (metrics/campaigns/logs) ────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:right; padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:500; font-size:12px}
td{font-variant-numeric:tabular-nums}
.card table{overflow-x:auto; display:block}
@media (min-width:640px){.card table{display:table}}

/* ── status chips ───────────────────────────────────────────────────────── */
.status-chip{border-radius:99px; padding:2px 10px; font-size:11.5px; font-weight:500; display:inline-flex; align-items:center; gap:5px}
.st-pending{background:var(--accent-tint); color:var(--accent)}
.st-needs_review{background:var(--warn-bg); color:var(--warn)}
.st-approved{background:var(--ok-bg); color:var(--ok)}
.st-rejected{background:var(--bad-bg); color:var(--bad)}
.st-published{background:var(--ok-bg); color:var(--ok)}
.st-scheduled{background:var(--accent-tint); color:var(--accent)}
.st-active{background:var(--ok-bg); color:var(--ok)}

.empty{color:var(--muted); text-align:center; padding:30px 0}

/* ── toggle switch (autopilot) ──────────────────────────────────────────── */
.switch{position:relative; display:inline-block; width:44px; height:24px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch .slider{position:absolute; inset:0; cursor:pointer; background:var(--line-2);
  border-radius:99px; transition:.18s}
.switch .slider::before{content:""; position:absolute; height:18px; width:18px; right:3px; top:3px;
  background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(-20px)}
#autopilotCard input[type=number]{padding:6px 8px; text-align:center; font-variant-numeric:tabular-nums}

/* ── login ──────────────────────────────────────────────────────────────── */
#login{max-width:400px; margin:14vh auto 0; padding:22px 24px}
#login h1{font-weight:700}

/* ── toast ──────────────────────────────────────────────────────────────── */
#toast{position:fixed; bottom:22px; right:50%; transform:translateX(50%);
  background:var(--brand); color:var(--brand-ink); border-radius:11px;
  padding:10px 18px; font-size:13px; display:none; z-index:9; box-shadow:var(--shadow); max-width:90vw}
.spin{display:inline-block; animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ══ مارکت‌راد — لایهٔ چندتنانتی ═══════════════════════════════════════════
   Additions for the multi-role dashboard. The tokens above are unchanged, so
   light/dark and the Pinar stack keep working exactly as before. */

/* ── ورود / ثبت‌نام ─────────────────────────────────────────────────────── */
.auth-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:min(420px,100%)}
.auth-brand{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.auth-brand .name{font-weight:700;font-size:18px}
.auth-brand .sub{color:var(--muted);font-size:12px}
.seg{display:flex;gap:6px;background:var(--inset);padding:4px;border-radius:var(--radius-sm);margin-bottom:14px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:8px;border-radius:8px;
  font:inherit;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-weight:600}
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.err{color:var(--bad);font-size:12px;min-height:16px;margin:8px 0 0}
.wide{width:100%;justify-content:center}

/* ── فرم‌ها ─────────────────────────────────────────────────────────────── */
input,select,textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
textarea{resize:vertical;line-height:1.7}
.mini{width:auto;min-width:140px;padding:5px 9px;font-size:13px}

/* ── چیدمان ─────────────────────────────────────────────────────────────── */
.ws-switch{width:auto;max-width:220px;padding:6px 10px;font-size:13px}
.pane[hidden]{display:none}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
h2{font-size:15px;margin:0 0 10px}
h3{font-size:14px;margin:18px 0 8px}
.hint{color:var(--muted);font-size:12.5px;line-height:1.8;margin:6px 0}
.hint.inline{display:inline-block;margin:0 4px}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
nav button{border:1px solid var(--line);background:var(--surface);color:var(--muted);
  padding:7px 13px;border-radius:999px;font:inherit;cursor:pointer}
nav button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* ── دکمه‌ها ────────────────────────────────────────────────────────────── */
.b{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:7px 13px;
  border-radius:var(--radius-sm);font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.b:hover{background:var(--surface-2)}
.b:disabled{opacity:.55;cursor:default}
.b.approve{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.b.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.b.ghost{background:transparent;color:var(--muted)}
.chip{border:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 11px;
  border-radius:999px;font:inherit;font-size:12.5px;cursor:pointer}
.chip.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-2);font-weight:600}
.filters{display:flex;gap:6px;flex-wrap:wrap}

/* ── فهرست و کارت آیتم ──────────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:12px}
.item{border:1px solid var(--line);border-radius:var(--radius);padding:13px;background:var(--surface)}
.item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.meta{color:var(--muted);font-size:12px;line-height:1.9}
.item pre.body{white-space:pre-wrap;word-break:break-word;font:inherit;background:var(--inset);
  border-radius:var(--radius-sm);padding:11px;margin:9px 0;max-height:320px;overflow:auto}
.tag{font-size:11.5px;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);color:var(--muted)}
.tag.approved,.tag.published{background:var(--ok-bg);color:var(--ok)}
.tag.pending,.tag.scheduled,.tag.sending{background:var(--warn-bg);color:var(--warn)}
.tag.needs_review,.tag.rejected{background:var(--bad-bg);color:var(--bad)}
.logline{border-bottom:1px solid var(--line);padding:7px 0;font-size:13px;display:flex;
  gap:8px;align-items:center;flex-wrap:wrap}

/* ── چت ─────────────────────────────────────────────────────────────────── */
.chat-log{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 0 12px}
.chat-log .msg{max-width:82%;padding:9px 12px;border-radius:var(--radius);background:var(--inset)}
.chat-log .msg.user{align-self:flex-start;background:var(--accent-tint)}
.chat-log .msg.assistant{align-self:flex-end}
.chat-log .who{font-size:11px;color:var(--muted);margin-bottom:3px}
.chat-log .body{white-space:pre-wrap;line-height:1.85}
.chat-input{display:flex;gap:8px;align-items:flex-end}
.chat-input textarea{flex:1}

/* ── جدول و آمار ────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:right;padding:8px 6px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:500;font-size:12px}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat-row .stat{flex:1;min-width:130px;background:var(--inset);border-radius:var(--radius-sm);padding:11px}
.stat .k{color:var(--muted);font-size:12px;margin-bottom:4px}
.stat .v{font-size:19px;font-weight:700}

/* ── ماتریس دسترسی و راهنما ─────────────────────────────────────────────── */
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:8px 0}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;margin-top:6px}
.chk input{width:auto}
.notice{background:var(--accent-tint);border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:11px;margin:10px 0;font-size:13px;line-height:1.9}
.notice input{margin-top:7px}
.guide{padding-inline-start:20px;line-height:2;font-size:13.5px;margin:0 0 14px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--inset);padding:1px 5px;border-radius:5px}

/* ── مودال و توست ───────────────────────────────────────────────────────── */
.modal-back{position:fixed;inset:0;background:rgba(10,15,25,.55);display:flex;
  align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{width:min(560px,100%);max-height:88vh;overflow:auto}
.toast{position:fixed;inset-block-end:22px;inset-inline-start:22px;background:var(--brand);
  color:var(--brand-ink);padding:11px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow);
  font-size:13.5px;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:60;max-width:min(420px,90vw)}
.toast.show{opacity:1;transform:none}
.toast.bad{background:var(--bad);color:#fff}
.toast.warn{background:var(--warn);color:#fff}

@media (max-width:640px){
  .chat-log .msg{max-width:95%}
  .item pre.body{max-height:220px}
  .ws-switch{max-width:130px}
}

/* روز تعطیل در تقویم — کم‌رنگ ولی خوانا در هر دو تم */
.tbl tr.is-holiday td{background:var(--bad-bg);opacity:.92}

/* ── نوار بالا در عرض کم ─────────────────────────────────────────────────
   The quota pill is a single sentence; without nowrap it broke into one word
   per line and grew the header to ~200px tall on a narrow pane. Below the
   breakpoint it is dropped entirely — the same number lives in the metrics
   tab, so nothing is lost, and the header stays a header. */
.topbar{flex-wrap:wrap; row-gap:8px}
.topbar .pill{white-space:nowrap; flex:none}
.topbar .brand{min-width:0}
.topbar .brand .sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42vw}

@media (max-width:760px){
  .topbar #quotaPill{display:none}
  .topbar .ver{display:none}
  .ws-switch{max-width:42vw}
}