/* ── Persian webfont (self-hosted, used across the whole app) ─────────────── */
@font-face{
  font-family:"Vazirmatn";
  src:url("/static/fonts/Vazirmatn.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ── design tokens — warm (orange → red) palette, one look ────────────────
   light default, dark by browser theme or [data-theme]. The old blue/violet
   accent (and its [data-accent] toggle) was removed 2026-09-09. */
:root{
  color-scheme:light dark;
  /* light — white panels, a barely-there cool neutral ground */
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#f1f2f6; --line:#e5e7ee;
  --text:#161a22; --dim:#57616f; --faint:#8b93a2;
  --brand:#ef5f10; --brand2:#e02f28; --ok:#12a150; --warn:#b07d09; --bad:#e5484d;
  --brand-weak:rgba(239,95,16,.075); --brand2-weak:rgba(224,47,40,.07);
  --header-bg:rgba(247,248,250,.85); --band-bg:rgba(255,255,255,.62);
  --sheen:rgba(20,24,34,.06);
  --code-bg:#0b0e14; --code-fg:#c9d2e3;
  --shadow:0 1px 2px rgba(16,20,32,.04),0 10px 30px -14px rgba(16,20,32,.16);
  --shadow-lg:0 24px 60px -20px rgba(16,20,32,.28);
  --ok-weak:rgba(18,161,80,.14); --warn-weak:rgba(176,125,9,.16); --bad-weak:rgba(229,72,77,.14);
  --radius:14px; --radius-sm:9px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Vazirmatn",Tahoma,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d12; --panel:#12151c; --panel2:#161a22; --line:#242a36;
    --text:#e7eaf0; --dim:#9aa3b2; --faint:#6b7484;
    --brand:#ff8a3d; --brand2:#ff5a4d;
    --brand-weak:rgba(255,138,61,.16); --brand2-weak:rgba(255,90,77,.15);
    --ok:#3ecf8e; --warn:#f5b301; --bad:#ff6b6b;
    --ok-weak:rgba(62,207,142,.16); --warn-weak:rgba(245,179,1,.16); --bad-weak:rgba(255,107,107,.16);
    --header-bg:rgba(11,13,18,.85); --band-bg:rgba(18,21,28,.5);
    --sheen:rgba(255,255,255,.05);
    --shadow:0 2px 6px rgba(0,0,0,.4),0 18px 50px -14px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0b0d12; --panel:#12151c; --panel2:#161a22; --line:#242a36;
  --text:#e7eaf0; --dim:#9aa3b2; --faint:#6b7484;
  --brand:#ff8a3d; --brand2:#ff5a4d;
  --brand-weak:rgba(255,138,61,.16); --brand2-weak:rgba(255,90,77,.15);
  --ok:#3ecf8e; --warn:#f5b301; --bad:#ff6b6b;
  --ok-weak:rgba(62,207,142,.16); --warn-weak:rgba(245,179,1,.16); --bad-weak:rgba(255,107,107,.16);
  --header-bg:rgba(11,13,18,.85); --band-bg:rgba(18,21,28,.5);
  --sheen:rgba(255,255,255,.05);
  --shadow:0 2px 6px rgba(0,0,0,.4),0 18px 50px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
html[dir="ltr"]{--dir:ltr}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono{font-family:var(--mono)}
button{font-family:inherit}
.hidden{display:none!important}
[hidden]{display:none!important}   /* the attribute must win over display:flex etc. */
img{max-width:100%}

/* theme toggle button (shared) */
.theme-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2);color:var(--text);cursor:pointer;flex:0 0 auto}
.theme-btn:hover{border-color:var(--brand)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun,
:root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon,
:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .theme-btn .i-sun{display:none}
  :root:not([data-theme="dark"]) .theme-btn .i-moon{display:block} }

/* layout */
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.side{background:var(--panel);border-inline-end:1px solid var(--line);
  padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:800;font-size:1.05rem;padding:6px 10px 14px;display:flex;align-items:center;gap:8px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.brand .dot.mock{background:var(--warn)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--dim);font-weight:600}
.nav a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.nav a.on{background:var(--brand-weak);color:var(--text)}
.nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--faint);font-size:.8rem}
.main{padding:26px clamp(16px,4vw,40px);max-width:1180px;width:100%}
h1{font-size:1.35rem;margin:0 0 4px}
.sub{color:var(--dim);margin:0 0 22px}

/* cards */
.grid{display:grid;gap:16px}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:.95rem}
.stat .label{color:var(--dim);font-size:.82rem}
.stat .value{font-size:1.5rem;font-weight:800;margin-top:4px}
.stat .value small{font-size:.8rem;color:var(--dim);font-weight:600}

/* ── signup gift cards ─────────────────────────────────────────────── */
.giftrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.giftcard{position:relative;overflow:hidden;border-radius:var(--radius);padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--brand) 40%,var(--line));
  background:linear-gradient(140deg,var(--brand-weak),transparent 62%),var(--panel);
  box-shadow:var(--shadow)}
.giftcard.trials{border-color:color-mix(in srgb,var(--ok) 42%,var(--line));
  background:linear-gradient(140deg,var(--ok-weak),transparent 62%),var(--panel)}
.giftcard .gc-sheen{position:absolute;inset:0;transform:translateX(-120%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:gcsheen 6s ease-in-out 1s infinite}
.gc-top{display:flex;gap:12px;align-items:center}
.gc-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:1.35rem;background:linear-gradient(120deg,var(--brand),var(--brand2));
  animation:gcwiggle 3.6s ease-in-out infinite}
.giftcard.trials .gc-ico{background:linear-gradient(120deg,var(--ok),#0c8f47)}
.gc-hd{min-width:0}
.gc-title{font-weight:800;font-size:.92rem}
.gc-big{font-size:1.4rem;font-weight:900;margin-top:2px;color:var(--brand)}
.giftcard.trials .gc-big{color:var(--ok)}
.gc-big .gc-unit{font-size:.78rem;font-weight:600;color:var(--dim)}
.giftbar{height:8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);
  overflow:hidden;margin:12px 0 10px}
.giftbar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .6s ease}
.gc-dots{display:flex;gap:6px;margin:12px 0 10px}
.gc-dots i{width:100%;height:8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line)}
.gc-dots i.on{background:linear-gradient(90deg,var(--ok),#0c8f47);border-color:transparent}
.gc-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.gc-foot .muted{font-size:.76rem;flex:1;min-width:0}
.gc-foot .btn{flex:0 0 auto}
.giftstrip{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;padding:9px 13px;
  border-radius:10px;font-size:.82rem;
  border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line));background:var(--brand-weak)}
.giftstrip b{color:var(--brand);font-weight:800}
@keyframes gcsheen{to{transform:translateX(120%)}}
@keyframes gcwiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-9deg)}95%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){.giftcard .gc-sheen,.gc-ico{animation:none}}
/* phones/tablets: each gift card becomes one tidy row — icon · title+number · button */
@media (max-width:860px){
  .giftrow{grid-template-columns:1fr;gap:8px}
  .giftcard{padding:10px 12px;border-radius:11px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .giftcard .gc-sheen{display:none}
  .gc-top{gap:9px;flex:1 1 auto;min-width:0}
  .gc-ico{width:30px;height:30px;font-size:1rem;border-radius:9px}
  .gc-hd{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .gc-title{font-size:.76rem;line-height:1.3}
  .gc-big{font-size:.98rem;margin-top:0}
  .gc-big .gc-unit{font-size:.66rem}
  .giftbar,.gc-dots{display:none}
  .gc-foot{flex:0 0 auto;margin:0;gap:0}
  .gc-foot .muted{display:none}
  .gc-foot .btn{width:auto;padding:6px 12px;font-size:.75rem}
}

/* table */
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:9px 10px;border-bottom:1px solid var(--line);font-size:.86rem}
th{color:var(--dim);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tr:hover td{background:var(--panel2)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}

/* pills / buttons */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:.74rem;font-weight:700;border:1px solid var(--line)}
.pill.active{color:var(--ok);border-color:var(--ok)}
.pill.disabled{color:var(--warn);border-color:var(--warn)}
.pill.revoked,.pill.expired{color:var(--bad);border-color:var(--bad)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:700;cursor:pointer;font-size:.86rem}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:linear-gradient(120deg,var(--brand),var(--brand2));border-color:transparent;color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:.78rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* forms */
label{display:block;color:var(--dim);font-size:.82rem;margin:10px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:.9rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}

/* code block */
pre.code{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;overflow-x:auto;font-size:.82rem;line-height:1.7;position:relative}
pre.code .copy{position:absolute;inset-inline-end:8px;top:8px}

/* toast */
#toast{position:fixed;inset-inline:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:99}
#toast .t{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 18px;
  font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);transition:.28s}
#toast .t.show{opacity:1;transform:none}
#toast .t.ok{border-color:var(--ok)}
#toast .t.err{border-color:var(--bad)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,20,.55);backdrop-filter:blur(2px);
  display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;max-width:520px;width:100%;box-shadow:var(--shadow-lg)}
.modal h2{margin:0 0 14px;font-size:1.05rem}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:
    radial-gradient(900px 420px at 50% -10%,var(--brand2-weak),transparent),
    radial-gradient(700px 360px at 90% 10%,var(--brand-weak),transparent)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;
  max-width:400px;width:100%;box-shadow:var(--shadow-lg)}
.login-gift{display:flex;gap:9px;align-items:flex-start;margin:12px 0 2px;padding:10px 12px;
  border-radius:12px;font-size:.82rem;line-height:1.7;color:var(--text);
  border:1px solid var(--brand);background:var(--brand-weak)}
.login-gift .lg-ico{font-size:1.05rem;line-height:1.4;flex:0 0 auto}
.login-gift b{color:var(--brand);font-weight:800}
.tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px;margin:14px 0}
.tabs button{flex:1;padding:8px;border:0;background:transparent;color:var(--dim);border-radius:7px;font-weight:700;cursor:pointer}
.tabs button.on{background:var(--panel2);color:var(--text)}

.muted{color:var(--faint);font-size:.8rem}
.spacer{height:16px}
.qs-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--dim)}
.qs-list code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  font-size:.8rem;color:var(--brand);direction:ltr;display:inline-block}
svg.chart{width:100%;height:200px;display:block}

@media(max-width:1100px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
}

/* ── mobile / tablet: sidebar → compact sticky top bar + scroll-strip nav
     (staff panels /admin + /management — those .shell have NO data-drawer) ── */
@media(max-width:860px){
  .shell:not([data-drawer]){display:block;min-height:100vh}
  .shell:not([data-drawer]) .side{position:sticky;top:0;z-index:30;height:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    padding:9px 12px;border-inline-end:0;border-bottom:1px solid var(--line);
    background:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .shell:not([data-drawer]) .side .brand{order:0;flex:1 1 auto;min-width:0;padding:0;font-size:1rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shell:not([data-drawer]) .side-foot{order:1;display:block;flex:0 0 auto;margin:0;padding:0;border-top:0;font-size:.82rem}
  .shell:not([data-drawer]) .side-foot #whoami{display:none}
  .shell:not([data-drawer]) .side-foot>div{margin-top:0!important}
  .shell:not([data-drawer]) .side-foot .theme-btn{width:32px;height:32px}
  .shell:not([data-drawer]) .nav{order:2;flex-basis:100%;display:flex;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;padding:2px 0 2px;margin:0 -2px;
    scrollbar-width:none;-ms-overflow-style:none}
  .shell:not([data-drawer]) .nav::-webkit-scrollbar{display:none}
  .shell:not([data-drawer]) .nav a{flex:0 0 auto;white-space:nowrap;padding:7px 13px;font-size:.82rem;border-radius:999px;
    background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
  .shell:not([data-drawer]) .nav a svg{display:none}
  .shell:not([data-drawer]) .nav a.on{background:var(--brand-weak);border-color:var(--brand);color:var(--brand)}
  .shell:not([data-drawer]) .nav .sep{display:none}

  .main{padding:16px 14px 40px;max-width:100%}
  h1{font-size:1.18rem}
  .sub{margin:0 0 14px;font-size:.85rem}
  .grid{gap:10px}
  .grid.c4{grid-template-columns:1fr 1fr}
  .grid.c3,.grid.c2{grid-template-columns:1fr}
  .card{padding:13px 14px}
  .card h3{font-size:.9rem;margin-bottom:8px}
  .stat .value{font-size:1.25rem;display:flex;flex-direction:column;gap:2px}
  .stat .value small{display:block;font-size:.72rem}
  /* dense tables: one line per cell + horizontal swipe (with an edge hint) */
  .tbl-wrap{position:relative;-webkit-overflow-scrolling:touch}
  .tbl-wrap::after{content:"";position:absolute;top:1px;bottom:1px;left:1px;width:22px;
    pointer-events:none;background:linear-gradient(to right,var(--panel),transparent);border-radius:var(--radius) 0 0 var(--radius)}
  .tbl-wrap table{min-width:500px}
  th,td{padding:8px 9px;font-size:.8rem;white-space:nowrap}
  th{font-size:.7rem}
  .btn{padding:8px 13px;font-size:.83rem}
  .btn.sm{padding:5px 9px}
  .row{gap:8px}
  .row>*{flex:1 1 150px}
  .modal{padding:18px}
  .tabs button{font-size:.8rem;padding:7px 4px}
  input,select,textarea{font-size:16px}          /* stop iOS auto-zoom on focus */
  pre.code{font-size:.76rem;padding:12px 12px 12px 14px}
  #toast{bottom:16px}
}

@media(max-width:430px){
  .shell:not([data-drawer]) .side .brand{font-size:.95rem}
  .shell:not([data-drawer]) .nav a{padding:6px 11px;font-size:.8rem}
  .main{padding:14px 12px 36px}
  h1{font-size:1.1rem}
  .stat .value{font-size:1.15rem}
  .stat .label{font-size:.76rem}
  .card{padding:12px}
  .tabs{gap:3px;padding:3px}
  .tabs button{font-size:.72rem;padding:6px 2px}
}

/* ══════════════════════════════════════════════════════════════════════
   Customer dashboard — refined shell, ambient background, rich widgets
   ══════════════════════════════════════════════════════════════════════ */

/* ambient background — white ground + a faint corner glow + a slow line mesh */
.appbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.appbg-glow{position:absolute;inset:-24% -12% auto -12%;height:76vh;
  background:
    radial-gradient(50vw 44vh at 84% -10%, var(--brand-weak), transparent 72%),
    radial-gradient(46vw 40vh at -8% 2%, var(--brand2-weak), transparent 74%)}
.appbg-mesh{position:absolute;top:-6%;left:-4%;width:112%;height:118%;
  color:var(--brand);opacity:.16;animation:appdrift 46s ease-in-out infinite alternate}
.appbg-mesh g{stroke-width:1.4}
@keyframes appdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,16px,0)}}
:root[data-theme="dark"] .appbg-mesh,
:root:not([data-theme="light"]) .appbg-mesh{opacity:.11}
@media (prefers-reduced-motion:reduce){.appbg-mesh{animation:none}}

/* card polish (dashboard only, so staff panels stay untouched) */
.app .card{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.app .main .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.app .side{background:color-mix(in srgb,var(--panel) 82%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fade-in{animation:fadeIn .34s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* sidebar brand as a home link */
.side .brand{color:var(--text);text-decoration:none}
.side .brand:hover{text-decoration:none}
.side .brand .brand-home{width:15px;height:15px;margin-inline-start:auto;opacity:0;color:var(--brand);transition:opacity .15s}
.side .brand:hover .brand-home{opacity:1}
.side .brand .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a span{flex:1;min-width:0}
.nav-badge{background:var(--bad);color:#fff;font-size:.68rem;font-weight:800;line-height:1;
  min-width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.side-foot-row{margin-top:8px;display:flex;align-items:center;gap:10px}
.side-foot-row .theme-btn{margin-inline-start:auto}

/* page header row */
.page-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-hd h1{margin:0}
.hd-actions{display:flex;gap:8px;flex-wrap:wrap}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-hd h3{margin:0}
.hd-link{font-size:.8rem;color:var(--brand);white-space:nowrap}
.back-link{font-size:.82rem;color:var(--dim)}
.back-link:hover{color:var(--brand)}

/* KPI cards */
.kpi{display:flex;gap:13px;align-items:center}
.kpi-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(140deg,var(--brand-weak),var(--panel2));border:1px solid var(--line)}
.kpi.warn .kpi-ico{background:linear-gradient(140deg,var(--warn-weak),var(--panel2));border-color:var(--warn)}
.kpi-body{min-width:0}
.kpi-label{color:var(--dim);font-size:.8rem}
.kpi-value{font-size:1.28rem;font-weight:800;margin-top:1px;letter-spacing:-.01em}
.kpi-sub{color:var(--faint);font-size:.74rem;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* overview split grid (clock + tickets) */
.ov-grid{grid-template-columns:1fr 1fr}

/* analog clock */
.clockcard{display:flex;align-items:center;gap:16px}
.clock-face{width:92px;height:92px;flex:0 0 auto}
.clock-face .cl-rim{fill:var(--panel2);stroke:var(--line);stroke-width:1.5}
.clock-face .cl-tick{stroke:var(--faint);stroke-width:1.4;stroke-linecap:round}
.clock-face .cl-tick.maj{stroke:var(--dim);stroke-width:2.4}
.clock-face .cl-h{stroke:var(--text);stroke-width:3.4;stroke-linecap:round;transition:transform .4s cubic-bezier(.4,2.1,.5,1)}
.clock-face .cl-m{stroke:var(--text);stroke-width:2.6;stroke-linecap:round;transition:transform .4s cubic-bezier(.4,2.1,.5,1)}
.clock-face .cl-s{stroke:var(--brand);stroke-width:1.5;stroke-linecap:round}
.clock-face .cl-cap{fill:var(--brand)}
.clock-txt{min-width:0}
.clock-time{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock-date{color:var(--dim);font-size:.86rem;margin-top:2px}

/* tickets mini card */
.tk-nums{display:flex;gap:8px}
.tk-num{flex:1;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 4px}
.tk-num b{display:block;font-size:1.2rem;font-weight:800}
.tk-num span{color:var(--faint);font-size:.72rem}
.tk-num.open b{color:var(--brand)}
.tk-num.answered b{color:var(--ok)}
.tk-alert{margin-top:10px;background:var(--brand-weak);border:1px solid var(--brand);color:var(--brand);
  border-radius:10px;padding:8px 11px;font-size:.8rem;font-weight:700}

/* recent activity list */
.acts{display:flex;flex-direction:column}
.act{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line);font-size:.83rem}
.act:first-child{border-top:0}
.act-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ok)}
.act-dot.bad{background:var(--bad)}
.act-model{font-family:var(--mono);font-size:.76rem;color:var(--text);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:start}
.act-tok{color:var(--dim);font-size:.76rem;white-space:nowrap}
.act-cost{font-weight:700;white-space:nowrap}
.act-ago{color:var(--faint);font-size:.74rem;white-space:nowrap;min-width:62px;text-align:end}

/* ticket list + thread */
.tklist{display:flex;flex-direction:column;gap:8px}
.tkrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-family:inherit;color:var(--text);font-size:.9rem;transition:border-color .15s,transform .15s}
.tkrow:hover{border-color:var(--brand);transform:translateX(-3px)}
.tkrow-sub{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkrow-ago{color:var(--faint);font-size:.74rem;white-space:nowrap}
.tkrow-badge{background:var(--bad);color:#fff;font-size:.7rem;font-weight:800;border-radius:999px;padding:1px 7px}
.tkrow-st{font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid var(--line)}
.st-open{color:var(--brand);border-color:var(--brand);background:var(--brand-weak)}
.st-answered{color:var(--ok);border-color:var(--ok);background:var(--ok-weak)}
.st-closed{color:var(--faint)}
.tkthread{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:2px}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:.88rem;line-height:1.7}
.bubble-hd{font-size:.72rem;color:var(--faint);font-weight:700;margin-bottom:3px}
.bubble-body{white-space:pre-wrap;word-break:break-word}
.bubble.me{align-self:flex-start;background:var(--brand-weak);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line))}
.bubble.staff{align-self:flex-end;background:var(--panel2);border:1px solid var(--line)}

/* empty state */
.empty{text-align:center;padding:34px 18px}
.empty-ico{font-size:2.4rem}
.empty h3{margin:8px 0 4px}
.empty .muted{margin:0 0 16px}

/* ── mobile topbar + off-canvas drawer (dashboard only: .shell[data-drawer]) ──
   Uses PHYSICAL right/left (not inset-inline-*) so RTL slides in from the right
   and LTR from the left, both correctly off-screen when closed. */
.topbar{display:none}
.drawer-scrim{display:none}
@media(max-width:900px){
  .shell[data-drawer]{display:block;min-height:100vh}

  .shell[data-drawer] .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:45;
    padding:10px 14px;background:var(--header-bg);border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .shell[data-drawer] .topbar-brand{flex:1;font-weight:800;color:var(--text);text-decoration:none;
    display:flex;align-items:center;gap:8px;font-size:1.02rem;min-width:0}
  .shell[data-drawer] .topbar-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
  .shell[data-drawer] .topbar-brand .dot.mock{background:var(--warn)}
  .shell[data-drawer] .icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
    border-radius:11px;background:var(--panel);color:var(--text);cursor:pointer;flex:0 0 auto}
  .shell[data-drawer] .icon-btn svg{width:21px;height:21px}

  .shell[data-drawer] .side{
    position:fixed;top:0;bottom:0;right:0;left:auto;
    width:min(84vw,310px);height:100dvh;height:100vh;z-index:60;
    display:flex;flex-direction:column;gap:4px;padding:18px 14px;
    background:var(--panel);border:0;border-inline-start:1px solid var(--line);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-28px 0 70px -24px rgba(0,0,0,.4);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  html[dir="ltr"] .shell[data-drawer] .side{right:auto;left:0;
    border-inline-start:0;border-inline-end:1px solid var(--line);
    box-shadow:28px 0 70px -24px rgba(0,0,0,.4);transform:translateX(-100%)}
  .shell[data-drawer].drawer-open .side{transform:translateX(0)}

  .shell[data-drawer] .drawer-scrim{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(10,12,20,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s ease}
  .shell[data-drawer].drawer-open .drawer-scrim{opacity:1;pointer-events:auto}

  .shell[data-drawer] .side .brand{font-size:1.08rem;padding:6px 8px 14px;margin-bottom:2px;
    border-bottom:1px solid var(--line)}
  .shell[data-drawer] .side .brand .brand-home{opacity:.65}
  .shell[data-drawer] .nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
  .shell[data-drawer] .nav a{display:flex;align-items:center;gap:12px;padding:12px 12px;
    font-size:.95rem;border-radius:11px;color:var(--dim);background:transparent;border:0}
  .shell[data-drawer] .nav a svg{width:19px;height:19px;flex:0 0 auto;opacity:.9;display:block}
  .shell[data-drawer] .nav a span{flex:1}
  .shell[data-drawer] .nav a:hover{background:var(--panel2);color:var(--text)}
  .shell[data-drawer] .nav a.on{background:var(--brand-weak);color:var(--brand);font-weight:700}
  .shell[data-drawer] .side-foot{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
  .shell[data-drawer] .side-foot #whoami{display:block;font-weight:600;color:var(--dim);font-size:.85rem}
  .shell[data-drawer] .side-foot-row{margin-top:10px}
  .shell[data-drawer] .main{max-width:100%;padding:18px 14px 44px}

  /* the desktop-only sidebar polish must not bleed into the drawer */
  .app .side{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}

  .page-hd{gap:10px}
  .ov-grid{grid-template-columns:1fr}
  .grid.c4{grid-template-columns:1fr 1fr}
  .kpi-value{font-size:1.12rem}
  .clockcard{gap:13px}
  .clock-face{width:78px;height:78px}
  .clock-time{font-size:1.4rem}
  .bubble{max-width:90%}
}
@media(max-width:430px){
  .grid.c4{grid-template-columns:1fr}
  .tk-num b{font-size:1.05rem}
  .act-tok{display:none}
  .shell[data-drawer] .main{padding:14px 12px 40px}
}