/* Argess Central — AI Business Control Tower. Internal design system (light, RTL, Persian). No external dependencies. */
@font-face { font-family:"CentralSans"; src:url("fonts/central-sans.woff") format("woff"); font-weight:400; font-display:swap; }
@font-face { font-family:"CentralSans"; src:local("IRANSans Medium"), local("IRANSans-Medium"); font-weight:500; font-display:swap; }
@font-face { font-family:"CentralSans"; src:local("IRANSans Bold"), local("IRANSans-Bold"); font-weight:700; font-display:swap; }

:root {
  --navy-950:#060d20; --navy-900:#0a1631; --navy-850:#0d1c3e; --navy-800:#12244d; --navy-700:#1b3163; --navy-600:#2a4480;
  --teal-800:#0b5f59; --teal-700:#0f766e; --teal-600:#0d9488; --teal-500:#14b8a6; --teal-400:#2dd4bf; --teal-100:#cdf4ee; --teal-50:#ebfaf7;
  --ink-900:#0d1526; --ink-800:#1c2740; --ink-700:#334059; --ink-600:#4c5a76; --ink-500:#5f6c88; --ink-400:#8792aa; --ink-300:#b5bdcf;
  --line:#e3e8f1; --line-strong:#cfd7e5; --bg:#f2f5fa; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eef2f8;
  --success:#137a3b; --success-bg:#e7f7ee; --success-line:#bfe8cf;
  --warning:#a14d05; --warning-bg:#fff4e2; --warning-line:#f7d9a8;
  --danger:#b42318; --danger-bg:#fdeeec; --danger-line:#f6c7c1;
  --info:#1d4fc4; --info-bg:#ebf1ff; --info-line:#c9d8fb;
  --violet:#5b4fd1;
  --accent:var(--teal-700); --accent-strong:var(--teal-800); --focus:#2dd4bf;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:22px;
  --shadow-xs:0 1px 2px rgba(13,21,38,.05);
  --shadow-sm:0 1px 2px rgba(13,21,38,.05), 0 2px 8px -2px rgba(13,21,38,.06);
  --shadow:0 1px 3px rgba(13,21,38,.06), 0 12px 32px -14px rgba(13,21,38,.16);
  --shadow-lg:0 24px 64px -20px rgba(6,13,32,.45), 0 2px 8px rgba(6,13,32,.08);
  --sidebar:272px; --topbar:64px;
  --font:"CentralSans", "IRANSans", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --mono:"Cascadia Mono", Consolas, "Courier New", monospace;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); font-size:14px; line-height:1.75; color:var(--ink-800); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1, h2, h3, h4 { margin:0; color:var(--ink-900); line-height:1.45; font-weight:700; }
p { margin:0; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }
button, input, select, textarea { font:inherit; color:inherit; }
svg.i { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
svg.i.sm { width:15px; height:15px; } svg.i.lg { width:22px; height:22px; } svg.i.xl { width:28px; height:28px; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--focus) 70%, transparent); outline-offset:2px; border-radius:6px; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; inset-inline-start:16px; top:-60px; z-index:100; background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); }
.skip-link:focus { top:12px; color:#fff; }
.ltr { direction:ltr; unicode-bidi:isolate; }
.num { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); direction:ltr; unicode-bidi:isolate; font-size:12.5px; letter-spacing:.2px; }
.muted { color:var(--ink-500); } .subtle { color:var(--ink-400); } .small { font-size:12.5px; } .tiny { font-size:11.5px; }
.strong { font-weight:700; color:var(--ink-900); }
.nowrap { white-space:nowrap; }
.stack { display:grid; gap:4px; } .row { display:flex; align-items:center; gap:8px; } .row.wrap { flex-wrap:wrap; } .spacer { flex:1; }

/* ---------- Application shell ---------- */
.app { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; color:#d8e1f3; overflow-y:auto;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(45,212,191,.16), transparent 55%),
    radial-gradient(90% 50% at 0% 100%, rgba(91,79,209,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-inline-end:1px solid rgba(255,255,255,.04); }
.sidebar::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:28px 28px; mask-image:linear-gradient(180deg, #000, transparent 45%); }
.brand { position:relative; display:flex; align-items:center; gap:12px; padding:22px 22px 18px; color:#fff; text-decoration:none; }
.brand:hover { color:#fff; text-decoration:none; }
.brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg, rgba(45,212,191,.22), rgba(45,212,191,.04)); border:1px solid rgba(45,212,191,.35);
  box-shadow:0 0 0 4px rgba(45,212,191,.06), 0 8px 24px -8px rgba(45,212,191,.55); }
.brand-mark svg { width:26px; height:26px; }
.brand-name { font-size:16px; font-weight:700; line-height:1.3; }
.brand-sub { font-size:11px; color:#8fa3c8; letter-spacing:.4px; direction:ltr; text-align:end; }
.nav { position:relative; padding:8px 14px; display:grid; gap:2px; }
.nav-label { padding:16px 12px 6px; font-size:11px; color:#7486ab; font-weight:500; letter-spacing:.3px; }
.nav a { position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#c3cee6; font-weight:500; text-decoration:none; transition:background .15s, color .15s; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a[aria-current="page"] { background:linear-gradient(270deg, rgba(45,212,191,.18), rgba(45,212,191,.04)); color:#fff; }
.nav a[aria-current="page"]::before { content:""; position:absolute; inset-inline-start:-14px; top:9px; bottom:9px; width:4px; border-radius:4px 0 0 4px; background:var(--teal-400); box-shadow:0 0 12px var(--teal-400); }
.nav a[aria-current="page"] svg { color:var(--teal-400); }
.nav a .count { margin-inline-start:auto; min-width:22px; padding:0 7px; border-radius:20px; background:rgba(255,255,255,.1); color:#e6ecf8; font-size:11.5px; text-align:center; }
.nav a .count.alert { background:rgba(244,114,94,.22); color:#ffc9bf; }
.side-status { position:relative; margin:14px 14px 0; padding:14px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); font-size:12.5px; }
.side-status h2 { color:#fff; font-size:12.5px; font-weight:500; margin-bottom:8px; }
.side-status .line { display:flex; align-items:center; gap:8px; color:#aebbd6; padding:3px 0; }
.side-status .line b { margin-inline-start:auto; font-weight:500; color:#e6ecf8; }
.side-foot { position:relative; margin-top:auto; padding:14px; }
.user-card { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); }
.avatar { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; font-weight:700; font-size:13px; color:var(--navy-900); background:linear-gradient(145deg, var(--teal-400), #8be9da); }
.user-card .who { min-width:0; line-height:1.4; } .user-card .who b { display:block; color:#fff; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.user-card .who span { font-size:11.5px; color:#8fa3c8; }
.user-card form { margin-inline-start:auto; }
.icon-btn-dark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:transparent; color:#c3cee6; cursor:pointer; }
.icon-btn-dark:hover { background:rgba(255,255,255,.08); color:#fff; }

.main { min-width:0; display:flex; flex-direction:column; }
.scrim { display:none; }
.topbar { position:sticky; top:0; z-index:20; height:var(--topbar); display:flex; align-items:center; gap:14px; padding:0 28px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.topbar.scrolled { border-bottom-color:var(--line); box-shadow:0 6px 18px -16px rgba(13,21,38,.4); }
.crumbs { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-500); min-width:0; white-space:nowrap; overflow:hidden; }
.crumbs a, .crumbs [aria-current] { display:inline-block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.crumbs a { color:var(--ink-500); } .crumbs a:hover { color:var(--accent); }
.crumbs [aria-current] { color:var(--ink-900); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumbs .sep { color:var(--ink-300); }
.search-trigger { margin-inline-start:auto; display:flex; align-items:center; gap:10px; width:min(360px, 40vw); height:40px; padding:0 12px; border-radius:11px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-500); cursor:pointer; box-shadow:var(--shadow-xs); }
.search-trigger:hover { border-color:var(--teal-500); color:var(--ink-700); }
.search-trigger kbd, .kbd { unicode-bidi:isolate; margin-inline-start:auto; font-family:var(--mono); font-size:11px; padding:1px 6px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-500); direction:ltr; }
.today { font-size:12.5px; color:var(--ink-500); white-space:nowrap; }
.topbar .menu-toggle { display:none; }
.content { padding:8px 28px 48px; width:100%; max-width:1480px; }

/* ---------- Page header ---------- */
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:14px 0 22px; }
.page-head h1 { font-size:24px; letter-spacing:-.2px; }
.page-head .lead { color:var(--ink-500); margin-top:4px; max-width:760px; }
.page-head .actions { margin-inline-start:auto; display:flex; gap:10px; flex-wrap:wrap; }
.title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.entity-mark { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none; font-size:18px; font-weight:700; color:#fff;
  background:linear-gradient(145deg, var(--navy-700), var(--navy-900)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -12px rgba(10,22,49,.7); }
.entity-mark.teal { background:linear-gradient(145deg, var(--teal-600), var(--teal-800)); }

/* ---------- Buttons ---------- */
.btn { --b:var(--line-strong); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border-radius:11px;
  border:1px solid var(--b); background:var(--surface); color:var(--ink-800); font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:var(--shadow-xs); transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
.btn:hover { background:var(--surface-2); border-color:var(--ink-300); text-decoration:none; color:var(--ink-900); }
.btn:active { transform:translateY(1px); }
.btn-primary { --b:var(--teal-700); background:linear-gradient(180deg, var(--teal-600), var(--teal-700)); color:#fff; box-shadow:0 1px 2px rgba(11,95,89,.3), 0 8px 18px -10px rgba(13,148,136,.7), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-primary:hover { background:linear-gradient(180deg, var(--teal-700), var(--teal-800)); color:#fff; border-color:var(--teal-800); }
.btn-navy { --b:var(--navy-800); background:var(--navy-800); color:#fff; } .btn-navy:hover { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.btn-danger { --b:var(--danger); background:var(--danger); color:#fff; } .btn-danger:hover { background:#931c13; color:#fff; border-color:#931c13; }
.btn-soft-danger { color:var(--danger); --b:var(--danger-line); } .btn-soft-danger:hover { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.btn-ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-600); } .btn-ghost:hover { background:var(--surface-3); border-color:transparent; }
.btn-sm { min-height:32px; padding:0 11px; border-radius:9px; font-size:13px; }
.btn-lg { min-height:48px; padding:0 22px; font-size:15px; border-radius:13px; }
.btn-block { width:100%; }
.btn-icon { width:36px; min-height:36px; padding:0; border-radius:10px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.btn .spin { display:none; }
.btn.is-loading { pointer-events:none; } .btn.is-loading .spin { display:inline-block; } .btn.is-loading svg.i:not(.spin) { display:none; }
.spin { width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-inline-end-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Surfaces ---------- */
.grid { display:grid; gap:18px; }
.grid.kpis { grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid.two { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); }
.grid.halves { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.thirds { grid-template-columns:repeat(3, minmax(0,1fr)); }
.section { margin-top:18px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); min-width:0; }
.panel-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 20px 0; }
.panel-head h2 { font-size:15.5px; }
.panel-head .sub { color:var(--ink-500); font-size:12.5px; }
.panel-head .tools { margin-inline-start:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.panel-body { padding:16px 20px 20px; }
.panel-body.flush { padding:12px 0 0; }
.panel-foot { padding:12px 20px; border-top:1px solid var(--line); color:var(--ink-500); font-size:12.5px; display:flex; align-items:center; gap:10px; }

.kpi { position:relative; overflow:hidden; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:grid; gap:6px; min-width:0; }
.kpi::after { content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, var(--kpi-glow, rgba(20,184,166,.10)), transparent 70%); pointer-events:none; }
.kpi-top { display:flex; align-items:center; gap:10px; color:var(--ink-600); font-size:13px; font-weight:500; }
.kpi-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-100); }
.kpi-icon.navy { color:var(--navy-700); background:#edf1fa; border-color:#dbe3f4; } .kpi-icon.violet { color:var(--violet); background:#f1efff; border-color:#e1dcff; }
.kpi-icon.amber { color:var(--warning); background:var(--warning-bg); border-color:var(--warning-line); }
.kpi-value { font-size:28px; font-weight:700; color:var(--ink-900); line-height:1.25; letter-spacing:-.3px; }
.kpi-value small { font-size:14px; color:var(--ink-500); font-weight:500; letter-spacing:0; }
.kpi-foot { font-size:12.5px; color:var(--ink-500); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kpi .spark { position:absolute; inset-inline-start:16px; top:18px; width:96px; height:32px; opacity:.9; }
a.kpi { color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
a.kpi:hover { border-color:var(--teal-100); box-shadow:var(--shadow); transform:translateY(-1px); text-decoration:none; }

/* ---------- Badges, dots, progress ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-700); border:1px solid var(--line); }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.badge.plain::before { display:none; }
.badge.success { background:var(--success-bg); color:var(--success); border-color:var(--success-line); }
.badge.warning { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-line); }
.badge.danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
.badge.info { background:var(--info-bg); color:var(--info); border-color:var(--info-line); }
.badge.accent { background:var(--teal-50); color:var(--teal-800); border-color:var(--teal-100); }
.conn { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.dot { position:relative; width:9px; height:9px; border-radius:50%; background:var(--ink-300); flex:none; }
.dot.success { background:#22a35a; } .dot.warning { background:#e08a12; } .dot.danger { background:#e0442f; } .dot.info { background:#3b6fe0; }
.dot.success::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #22a35a; opacity:0; animation:ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform:scale(.6); opacity:.6; } 80%, 100% { transform:scale(1.6); opacity:0; } }
.meter { display:grid; gap:5px; min-width:140px; }
.meter-top { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; }
.bar { height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(13,21,38,.03); }
.bar > span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--teal-500), var(--teal-600)); }
.bar.warning > span { background:linear-gradient(90deg, #f0a43a, #d47b06); } .bar.danger > span { background:linear-gradient(90deg, #f0705f, #c62d1f); }
.bar.lg { height:10px; }

/* ---------- Tables ---------- */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--line); }
.search { position:relative; flex:1 1 260px; max-width:420px; }
.search svg { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none; }
.search input { padding-inline-start:38px !important; }
.seg { display:inline-flex; padding:3px; gap:2px; border-radius:11px; background:var(--surface-3); border:1px solid var(--line); flex-wrap:wrap; }
.seg button, .seg a { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--ink-600); cursor:pointer; font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; }
.seg button:hover, .seg a:hover { color:var(--ink-900); text-decoration:none; }
.seg [aria-pressed="true"], .seg [aria-current="true"] { background:var(--surface); color:var(--ink-900); box-shadow:var(--shadow-sm); }
.seg .n { font-size:11.5px; color:var(--ink-500); background:var(--surface-3); border-radius:20px; padding:0 6px; }
.seg [aria-pressed="true"] .n { background:var(--teal-50); color:var(--teal-800); }
.table-wrap { overflow-x:auto; }
table.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th { position:sticky; top:0; z-index:1; text-align:start; font-size:12px; font-weight:500; color:var(--ink-500); background:var(--surface-2); padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:#f9fbfd; }
.table tr[data-href] { cursor:pointer; }
.table td.end, .table th.end { text-align:end; }
.table .actions-cell { width:1%; white-space:nowrap; text-align:end; }
.cell-main { display:flex; align-items:center; gap:12px; min-width:0; }
.cell-main .t { font-weight:500; color:var(--ink-900); } .cell-main .s { font-size:12px; color:var(--ink-500); }
.cell-main a.t { color:var(--ink-900); } .cell-main a.t:hover { color:var(--accent); }
.mini-avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:12.5px; font-weight:700; color:var(--navy-700); background:linear-gradient(145deg, #e8eefb, #d9e2f5); }
.mini-avatar.teal { color:var(--teal-800); background:linear-gradient(145deg, var(--teal-50), var(--teal-100)); }
.table-foot { padding:12px 20px; color:var(--ink-500); font-size:12.5px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; }
tr.is-hidden { display:none; }

/* ---------- Forms ---------- */
.form { display:grid; gap:16px; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:6px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field > label, .label { font-size:13px; font-weight:500; color:var(--ink-700); }
.field .req { color:var(--danger); margin-inline-start:2px; }
.hint { font-size:12px; color:var(--ink-500); }
.field-error { font-size:12.5px; color:var(--danger); display:none; align-items:center; gap:6px; }
.field.invalid .field-error { display:flex; }
.control { width:100%; height:42px; padding:0 12px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-900);
  transition:border-color .15s, box-shadow .15s; box-shadow:var(--shadow-xs); }
textarea.control { height:auto; min-height:84px; padding:10px 12px; resize:vertical; }
select.control { appearance:none; padding-inline-end:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6c88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 10px center; }
.control::placeholder { color:var(--ink-400); }
.control:hover { border-color:var(--ink-300); }
.control:focus { outline:none; border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(20,184,166,.16); }
.field.invalid .control, .control[aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 4px rgba(180,35,24,.08); }
.control.sm { height:36px; border-radius:10px; font-size:13px; }
.input-group { position:relative; display:flex; align-items:center; }
.input-group .control { padding-inline-end:56px; }
.input-group .affix { position:absolute; inset-inline-end:1px; top:1px; bottom:1px; display:grid; place-items:center; padding:0 12px; color:var(--ink-500); font-size:12.5px; border-inline-start:1px solid var(--line); border-start-start-radius:0; border-end-start-radius:0; border-start-end-radius:10px; border-end-end-radius:10px; background:var(--surface-2); direction:ltr; }
.input-icon { position:relative; } .input-icon > svg { position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none; }
.input-icon .control { padding-inline:40px; }
.input-icon .reveal { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:var(--ink-500); border-radius:8px; cursor:pointer; }
.input-icon .reveal:hover { background:var(--surface-3); color:var(--ink-800); }
.checklist { display:grid; gap:4px; margin:2px 0 0; padding:0; list-style:none; font-size:12.5px; }
.checklist li { display:flex; align-items:center; gap:8px; color:var(--ink-500); }
.checklist li::before { content:""; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--ink-300); flex:none; }
.checklist li.ok { color:var(--success); }
.checklist li.ok::before { border-color:var(--success); background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ---------- Alerts, toasts ---------- */
.alert { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-700); font-size:13.5px; }
.alert svg.i { margin-top:3px; }
.alert.info { background:var(--info-bg); border-color:var(--info-line); color:#1c3d8f; }
.alert.success { background:var(--success-bg); border-color:var(--success-line); color:#0f5c2e; }
.alert.warning { background:var(--warning-bg); border-color:var(--warning-line); color:#7a3a04; }
.alert.danger { background:var(--danger-bg); border-color:var(--danger-line); color:#8f1c13; }
.alert b { color:inherit; }
.toasts { position:fixed; z-index:90; inset-inline-end:24px; bottom:24px; display:grid; gap:10px; width:min(420px, calc(100vw - 32px)); }
.toast { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--navy-900); color:#e8eef9; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.08); animation:toast-in .3s cubic-bezier(.2,.8,.2,1); }
.toast .ico { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none; background:rgba(45,212,191,.16); color:var(--teal-400); }
.toast.error .ico { background:rgba(240,112,95,.16); color:#ff9d8f; }
.toast p { flex:1; padding-top:3px; }
.toast button { border:0; background:transparent; color:#8fa3c8; cursor:pointer; padding:4px; border-radius:6px; }
.toast button:hover { color:#fff; background:rgba(255,255,255,.08); }
.toast.leaving { animation:toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(.98); } }
@keyframes toast-out { to { opacity:0; transform:translateY(8px); } }

/* ---------- Empty and error states ---------- */
.empty { display:grid; justify-items:center; text-align:center; gap:10px; padding:44px 24px 48px; }
.empty-art { width:120px; height:96px; margin-bottom:4px; }
.empty h3 { font-size:16px; }
.empty p { color:var(--ink-500); max-width:440px; }
.empty .btn { margin-top:8px; }
.empty.compact { padding:28px 20px; } .empty.compact .empty-art { width:84px; height:66px; }

/* ---------- Dialogs ---------- */
dialog.modal { width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:0; border-radius:20px; background:var(--surface); color:var(--ink-800); box-shadow:var(--shadow-lg); overflow:visible; }
dialog.modal.wide { width:min(720px, calc(100vw - 32px)); }
dialog.modal::backdrop { background:rgba(6,13,32,.48); backdrop-filter:blur(3px); }
dialog.modal[open] { animation:modal-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
.modal-head { display:flex; align-items:flex-start; gap:14px; padding:22px 24px 6px; }
.modal-head .ico { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100); }
.modal-head .ico.danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
.modal-head .ico.warning { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-line); }
.modal-head h2 { font-size:17px; } .modal-head p { color:var(--ink-500); font-size:13px; margin-top:2px; }
.modal-head .close { margin-inline-start:auto; }
.modal-body { padding:16px 24px 8px; max-height:calc(100vh - 220px); overflow-y:auto; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 24px 22px; flex-wrap:wrap; }
.code-box { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; padding:16px 18px; border-radius:14px;
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.code-box code { font-family:var(--mono); font-size:24px; letter-spacing:3px; direction:ltr; color:#9ff3e6; word-break:break-all; }
.code-box .btn { --b:rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; box-shadow:none; }
.code-box .btn:hover { background:rgba(255,255,255,.16); color:#fff; }
.steps { counter-reset:s; display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.steps li { counter-increment:s; display:flex; gap:10px; align-items:flex-start; color:var(--ink-700); font-size:13.5px; }
.steps li::before { content:counter(s, persian); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:12px; font-weight:700; background:var(--teal-50); color:var(--teal-800); border:1px solid var(--teal-100); }

/* ---------- Dropdown menu ---------- */
.menu-wrap { position:relative; display:inline-block; }
.menu { position:fixed; z-index:70; min-width:220px; max-width:calc(100vw - 16px); padding:6px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); display:none; }
.menu.open { display:grid; animation:modal-in .14s ease; }
.menu button, .menu a { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--ink-800); cursor:pointer; text-align:start; font-size:13.5px; text-decoration:none; }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background:var(--surface-3); text-decoration:none; outline:none; }
.menu .danger { color:var(--danger); } .menu .danger:hover { background:var(--danger-bg); }
.menu hr { border:0; border-top:1px solid var(--line); margin:5px 4px; }
.menu form { display:contents; }

/* ---------- Detail lists, feeds ---------- */
.facts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; margin:0; }
.facts > div { padding:12px 0; border-bottom:1px dashed var(--line); display:grid; gap:2px; }
.facts > div:nth-last-child(-n+2) { border-bottom:0; }
.facts dt { font-size:12px; color:var(--ink-500); } .facts dd { margin:0; color:var(--ink-900); font-weight:500; overflow-wrap:anywhere; }
.facts.one { grid-template-columns:1fr; } .facts.one > div:nth-last-child(2) { border-bottom:1px dashed var(--line); }
.feed { list-style:none; margin:0; padding:0; display:grid; }
.feed li { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.feed li:last-child { border-bottom:0; }
.feed .ico { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--surface-3); color:var(--ink-600); }
.feed .ico.success { background:var(--success-bg); color:var(--success); } .feed .ico.warning { background:var(--warning-bg); color:var(--warning); }
.feed .ico.danger { background:var(--danger-bg); color:var(--danger); } .feed .ico.info { background:var(--info-bg); color:var(--info); }
.feed .what { font-weight:500; color:var(--ink-900); font-size:13.5px; } .feed .meta { font-size:12px; color:var(--ink-500); }
.attention-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.attention-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); color:inherit; text-decoration:none; transition:border-color .15s, background .15s; }
a.attention-item:hover { border-color:var(--teal-100); background:#fbfefd; text-decoration:none; }
.attention-item .issues { display:grid; gap:3px; font-size:12.5px; margin-top:4px; }
.attention-item .issues span { display:flex; gap:6px; align-items:center; }
.attention-item .issues span.danger { color:var(--danger); } .attention-item .issues span.warning { color:var(--warning); } .attention-item .issues span.info { color:var(--info); }
.rank { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.rank li { display:grid; gap:6px; }
.rank .top { display:flex; align-items:center; gap:10px; font-size:13.5px; }
.rank .top .v { margin-inline-start:auto; font-weight:500; color:var(--ink-900); }

/* ---------- Charts ---------- */
.chart { position:relative; width:100%; min-height:240px; }
.chart svg { display:block; width:100%; overflow:visible; }
.chart:focus-visible { outline-offset:6px; border-radius:12px; }
.chart .grid-line { stroke:var(--line); stroke-width:1; shape-rendering:crispEdges; }
.chart .axis-label { fill:var(--ink-400); font-size:11px; font-family:var(--font); }
.chart .bar-rect { fill:url(#central-bar-gradient); transition:opacity .15s; }
.chart .bar-rect.fail { fill:#f2b2a8; }
.chart .line-path { fill:none; stroke:var(--violet); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.chart .line-area { fill:url(#central-area-gradient); }
.chart .line-dot { fill:#fff; stroke:var(--violet); stroke-width:2; }
.chart .hover-col { fill:rgba(20,184,166,.07); }
.chart.dim .bar-rect:not(.on) { opacity:.45; }
.chart-tip { position:absolute; z-index:5; pointer-events:none; min-width:170px; padding:10px 12px; border-radius:12px; background:var(--navy-900); color:#e8eef9; font-size:12.5px; box-shadow:var(--shadow-lg); transform:translate(-50%, -100%); white-space:nowrap; }
.chart-tip b { display:block; color:#fff; margin-bottom:4px; font-weight:500; }
.chart-tip .r { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-600); }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.donut-wrap { display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center; justify-content:center; }
.donut { position:relative; width:168px; height:168px; flex:none; }
.donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut .center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.35; }
.donut .center b { font-size:20px; color:var(--ink-900); } .donut .center span { font-size:12px; color:var(--ink-500); }
.donut-legend { list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1 1 220px; min-width:0; }
.donut-legend li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px; line-height:1.5; border-radius:8px; }
.donut-legend li .c { display:block; font-size:11.5px; color:var(--ink-500); }
.donut-legend li:focus-visible { outline-offset:3px; }
.donut-legend i { width:12px; height:12px; border-radius:4px; }
.donut-legend .v { color:var(--ink-900); font-weight:500; }

/* ---------- Jalali date picker ---------- */
.jdate { position:relative; }
.jdate .control { padding-inline-end:44px; direction:rtl; }
.jdate-btn { position:absolute; inset-inline-end:5px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--ink-500); cursor:pointer; }
.jdate-btn:hover { background:var(--surface-3); color:var(--teal-700); }
.jcal { position:fixed; z-index:95; width:300px; padding:14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.jcal-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.jcal-head .title { flex:1; text-align:center; font-weight:700; color:var(--ink-900); }
.jcal-head button { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; color:var(--ink-600); }
.jcal-head button:hover { border-color:var(--teal-500); color:var(--teal-700); }
.jcal table { width:100%; border-collapse:collapse; table-layout:fixed; }
.jcal th { font-size:11.5px; font-weight:500; color:var(--ink-400); padding:4px 0; }
.jcal td { padding:2px; text-align:center; }
.jcal td button { width:100%; aspect-ratio:1; border:0; border-radius:9px; background:transparent; cursor:pointer; color:var(--ink-800); font-size:13px; }
.jcal td button:hover { background:var(--teal-50); color:var(--teal-800); }
.jcal td button.today { box-shadow:inset 0 0 0 1.5px var(--teal-500); }
.jcal td button.sel { background:var(--teal-700); color:#fff; font-weight:700; }
.jcal td button.fri { color:var(--danger); } .jcal td button.sel.fri { color:#fff; }
.jcal td button:focus-visible { outline:2px solid var(--teal-500); outline-offset:0; }
.jcal-foot { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }

/* ---------- Command palette ---------- */
dialog.palette { width:min(640px, calc(100vw - 24px)); margin-top:12vh; padding:0; border:0; border-radius:18px; background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden; }
dialog.palette::backdrop { background:rgba(6,13,32,.42); backdrop-filter:blur(3px); }
.palette-input { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--ink-500); }
.palette-input input { flex:1; border:0; outline:none; font-size:16px; background:transparent; color:var(--ink-900); }
.palette-list { list-style:none; margin:0; padding:8px; max-height:min(420px, 55vh); overflow-y:auto; }
.palette-list li a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:var(--ink-800); text-decoration:none; }
.palette-list li a .s { font-size:12px; color:var(--ink-500); }
.palette-list li a .badge { margin-inline-start:auto; }
.palette-list li a[aria-selected="true"], .palette-list li a:hover { background:var(--teal-50); text-decoration:none; }
.palette-group { padding:8px 12px 4px; font-size:11.5px; color:var(--ink-400); font-weight:500; }
.palette-empty { padding:28px; text-align:center; color:var(--ink-500); }
.palette-foot { display:flex; gap:16px; padding:10px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-500); background:var(--surface-2); }

/* ---------- Authentication ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); background:var(--surface); }
.auth-form { display:flex; flex-direction:column; justify-content:center; padding:48px clamp(24px, 6vw, 96px); }
.auth-card { width:100%; max-width:400px; margin:0 auto; display:grid; gap:22px; }
.auth-card .logo { display:flex; align-items:center; gap:12px; }
.auth-card .logo .brand-mark { width:46px; height:46px; }
.auth-card .logo b { display:block; font-size:16px; color:var(--ink-900); line-height:1.3; } .auth-card .logo span { font-size:12px; color:var(--ink-500); }
.auth-card h1 { font-size:26px; letter-spacing:-.3px; }
.auth-card .lead { color:var(--ink-500); margin-top:4px; }
.auth-note { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-500); }
.caps { display:none; color:var(--warning); font-size:12.5px; align-items:center; gap:6px; } .caps.on { display:flex; }
.auth-art { position:relative; overflow:hidden; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:48px clamp(32px, 5vw, 72px);
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(45,212,191,.28), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(91,79,209,.35), transparent 70%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950)); }
.auth-art::before { content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:36px 36px; mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent); }
.auth-art > * { position:relative; }
.auth-art .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:99px; background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.3); color:#a8f5ea; font-size:12.5px; width:fit-content; }
.auth-art h2 { color:#fff; font-size:clamp(26px, 2.6vw, 36px); line-height:1.45; margin-top:18px; max-width:520px; }
.auth-art h2 em { font-style:normal; background:linear-gradient(90deg, #5eead4, #a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-art p.lead { color:#b5c3df; margin-top:12px; max-width:480px; }
.tower { width:min(420px, 80%); margin:28px auto; display:block; }
.tower .ring { fill:none; stroke:rgba(94,234,212,.35); stroke-width:1.2; }
.tower .sweep { transform-origin:200px 200px; animation:sweep 6s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.tower .blip { fill:#5eead4; animation:blip 3s ease-in-out infinite; } .tower .blip:nth-of-type(2) { animation-delay:1s; } .tower .blip:nth-of-type(3) { animation-delay:2s; }
@keyframes blip { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
.trust { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.trust li { display:flex; gap:12px; align-items:flex-start; color:#c9d4ea; font-size:13.5px; }
.trust li svg { color:#5eead4; margin-top:3px; }
.trust b { color:#fff; font-weight:500; }

/* ---------- Responsive ---------- */
@media (max-width:1280px) { .grid.kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } .grid.two { grid-template-columns:minmax(0,1fr); } }
@media (max-width:1080px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed; inset-block:0; inset-inline-start:0; width:min(300px, 86vw); z-index:60; transform:translateX(105%); transition:transform .25s cubic-bezier(.2,.8,.2,1); box-shadow:var(--shadow-lg); }
  .nav-open .sidebar { transform:none; }
  .scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(6,13,32,.45); opacity:0; pointer-events:none; transition:opacity .2s; }
  .nav-open .scrim { opacity:1; pointer-events:auto; }
  .topbar .menu-toggle { display:inline-flex; }
  .grid.thirds { grid-template-columns:minmax(0,1fr); }
  .auth { grid-template-columns:minmax(0,1fr); } .auth-art { display:none; }
}
@media (max-width:760px) {
  .topbar { padding:0 16px; gap:10px; } .content { padding:4px 16px 40px; }
  .today, .search-trigger kbd, .search-trigger .label { display:none; }
  .search-trigger { width:40px; padding:0; justify-content:center; flex:none; }
  .crumbs { display:none; }
  .page-head h1 { font-size:20px; } .page-head .actions { margin-inline-start:0; width:100%; } .page-head .actions .btn { flex:1; }
  .grid.kpis, .grid.halves { grid-template-columns:minmax(0,1fr); }
  .form-grid, .facts { grid-template-columns:minmax(0,1fr); } .facts > div:nth-last-child(2) { border-bottom:1px dashed var(--line); }
  .kpi-value { font-size:24px; }
  .toolbar { padding:12px 14px; } .search { max-width:none; flex-basis:100%; }
  /* Tables become stacked cards. */
  table.table.stackable thead { display:none; }
  table.table.stackable, .table.stackable tbody, .table.stackable tr, .table.stackable td { display:block; width:100%; }
  .table.stackable tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  .table.stackable tr.is-hidden { display:none; }
  .table.stackable td { border:0; padding:5px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:end; }
  .table.stackable td[data-label]::before { content:attr(data-label); font-size:12px; color:var(--ink-500); text-align:start; flex:none; }
  .table.stackable td.lead-cell { display:block; text-align:start; padding-bottom:8px; }
  .table.stackable td.actions-cell { width:100%; justify-content:flex-end; }
  .table.stackable .meter { min-width:0; width:60%; }
  .modal-body { max-height:calc(100vh - 200px); }
  dialog.modal { border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@media print { .sidebar, .topbar, .page-head .actions, .toolbar, .actions-cell { display:none !important; } .app { display:block; } .panel { box-shadow:none; } }