/* ===================================================================
   ShopVPN Admin Panel — flat design system
   جهت‌گیری: داشبورد فین‌تک مسطح و تمیز — سطوح تخت با رنگ یک‌دست، بدون
   گرادیان‌های دکوری، بدون سایه‌های نئومورفیک/درخشش نئون. عمق فقط از
   طریق کنتراست رنگ سطح‌ها و یک سایه‌ی خیلی ملایم تأمین می‌شود.
   لهجه‌ی اصلی: بنفش/ایندیگو (#7367F0) — همان زبان رنگی داشبوردهای
   فین‌تک مرجع؛ رنگ‌های وضعیت (سبز/قرمز/زرد/آبی) فقط روی بج‌ها و نمودارها.
=================================================================== */

@property --pct{ syntax:'<number>'; inherits:false; initial-value:0; }

:root{
  --bg: #1B1D2C;
  --bg-2: #171826;
  --surface: #23253A;
  --surface-2: #2A2C42;
  --surface-hi: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.05);

  --text: #E9E9F2;
  --text-muted: #8B8DA6;
  --text-dim: #5A5C74;

  --primary: #7367F0;
  --primary-ink: #FFFFFF;
  --cyan: #00CFE8;
  --amber: #FF9F43;
  --emerald: #28C76F;
  --rose: #EA5455;

  /* برای هر دسته از آیتم‌های ناوبری/نمودار یک رنگ ثابت، بدون گرادیان */
  --accent-1: var(--primary);
  --accent-2: var(--cyan);
  --accent-3: var(--amber);
  --accent-4: var(--emerald);

  /* نام‌های قدیمی که هنوز از app.js ارجاع داده می‌شوند (رنگ حلقه‌ی CPU،
     چرخه‌ی رنگ دسته‌بندی‌ها) — به پالت تخت جدید نگاشت شده‌اند */
  --violet: var(--primary);
  --fuchsia: #FF6B9D;

  --font-body: "Vazirmatn", -apple-system, Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Vazirmatn", monospace;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.16);
  --shadow-pop: 0 12px 32px rgba(0,0,0,.4);
  --shadow-btn: 0 2px 6px rgba(0,0,0,.2);

  --ease: cubic-bezier(.4,0,.2,1);
  --focus-ring: 0 0 0 3px rgba(115,103,240,.35);
}

/* حالت روشن — همان زبان طراحی تخت، فقط با سطوح روشن و کنتراست ملایم‌تر */
html[data-mode="light"]{
  --bg: #F4F5FA;
  --bg-2: #EDEEF6;
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --surface-hi: rgba(40,35,80,.04);
  --border: rgba(40,35,80,.10);
  --border-soft: rgba(40,35,80,.07);

  --text: #2B2C40;
  --text-muted: #6B6D85;
  --text-dim: #A3A5BC;

  --primary: #6C5DD3;
  --cyan: #0B9FBF;
  --amber: #C97A16;
  --emerald: #1FA45E;
  --rose: #D9424D;
  --fuchsia: #D6437A;

  --shadow-card: 0 1px 3px rgba(40,35,80,.08);
  --shadow-pop: 0 16px 36px rgba(40,35,80,.16);
  --shadow-btn: 0 2px 6px rgba(40,35,80,.1);
}
html[data-mode="light"] ::-webkit-scrollbar-thumb{ background:rgba(40,35,80,.14); }
html[data-mode="light"] ::selection{ background:rgba(108,93,211,.18); }

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  min-height:100%; position:relative; overflow-x:hidden; width:100%;
}
img, svg, table{ max-width:100%; }

.bg-blobs{ display:none; }

h1,h2,h3,h4{ font-family:var(--font-body); margin:0; }
::selection{ background:rgba(115,103,240,.3); color:var(--text); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:20px; }
::-webkit-scrollbar-track{ background:transparent; }
button, input, select, textarea{ font-family:inherit; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.icon{ width:18px; height:18px; flex-shrink:0; }

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
.field input:focus-visible, .input:focus-visible, select.input:focus-visible, textarea.input:focus-visible{ outline:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), filter .15s var(--ease), opacity .15s;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-hi); border-color:rgba(255,255,255,.16); }
.btn:active{ filter:brightness(.94); }
.btn-block{ width:100%; }
.btn-primary{
  background:var(--primary); color:#fff; border-color:transparent; box-shadow:var(--shadow-btn);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ filter:brightness(.94); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-hi); border-color:var(--border); }
.btn-danger{ background:rgba(234,84,85,.12); color:var(--rose); border-color:rgba(234,84,85,.25); }
.btn-danger:hover{ border-color:var(--rose); background:rgba(234,84,85,.2); }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:var(--radius-xs); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* ---------------------------------------------------------- login ----- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:20px; z-index:1;
}
.login-card{
  position:relative; z-index:1; width:100%; max-width:400px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:20px;
  padding:38px 32px; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:18px;
  animation:login-in .35s var(--ease);
}
@keyframes login-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.login-brand{ text-align:center; margin-bottom:6px; }
.login-logo{
  width:56px; height:56px; margin:0 auto 16px; border-radius:14px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
  font-family:var(--font-mono);
}
.login-brand h1{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.login-brand p{ color:var(--text-muted); font-size:13px; margin-top:7px; }
.field{ display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--text-muted); font-weight:600; }
.field input{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text); font-size:14px; outline:none; transition:border-color .15s; box-shadow:none;
}
.field input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(115,103,240,.18); }
.login-error{
  background:rgba(234,84,85,.12); color:var(--rose); border:1px solid rgba(234,84,85,.25);
  border-radius:var(--radius-xs); padding:9px 13px; font-size:13px;
}

/* ---------------------------------------------------------- layout ---- */
.app{ display:flex; min-height:100vh; position:relative; z-index:1; }
.sidebar{
  width:250px; flex-shrink:0; background:var(--bg-2); border-left:1px solid var(--border-soft);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.sidebar-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 22px; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
  font-family:var(--font-mono); font-size:13px; flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text strong{ font-size:14.5px; letter-spacing:-.01em; }
.brand-text span{ font-size:11px; color:var(--text-muted); }

.nav-tunnel{ position:relative; flex:1; overflow-y:auto; overflow-x:hidden; }
.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; padding:9px 11px;
  border-radius:var(--radius-xs); color:var(--text-muted); font-size:13.5px; font-weight:600;
  cursor:pointer; margin-bottom:2px; transition:color .15s, background .15s;
}
.nav-icon{
  position:relative; width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:transparent; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background .15s, color .15s;
}
.nav-icon .icon{ width:16px; height:16px; }
.nav-item:hover{ color:var(--text); background:var(--surface-hi); }
.nav-item:hover .nav-icon{ color:var(--text); }
.nav-item.active{ color:#fff; background:var(--primary); }
.nav-item.active .nav-icon{ color:#fff; }
.nav-item .dot-count{
  margin-inline-start:auto; background:rgba(234,84,85,.16); color:var(--rose); font-size:10.5px;
  font-weight:700; padding:1px 7px; border-radius:20px; font-family:var(--font-mono);
}
.nav-item.active .dot-count{ background:rgba(255,255,255,.22); color:#fff; }
.nav-section{
  font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em;
  margin:18px 11px 8px; font-weight:700; padding-top:14px; border-top:1px solid var(--border-soft);
}
.nav-section:first-child{ margin-top:2px; padding-top:0; border-top:none; }

.sidebar-footer{ border-top:1px solid var(--border-soft); padding-top:14px; margin-top:10px; }
.me-card{ display:flex; align-items:center; gap:10px; padding:6px 8px 14px; }
.me-avatar{
  width:34px; height:34px; border-radius:10px; background:var(--surface-2); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-mono);
  flex-shrink:0; font-size:12px; border:1px solid var(--border);
}
.me-info{ display:flex; flex-direction:column; line-height:1.3; overflow:hidden; }
.me-info strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-info span{ font-size:11px; color:var(--text-muted); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 28px;
  position:sticky; top:0; background:var(--bg); z-index:5;
  border-bottom:1px solid var(--border-soft);
}
.topbar h2{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.topbar-actions{ display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:12.5px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--emerald); }
.topbar-clock{ font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border-soft); padding:6px 13px; border-radius:20px; }

.content{ padding:24px 28px 70px; flex:1; }

/* ------------------------------------------------------------ hero ---- */
.hero{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:24px 26px;
  background:var(--surface); border:1px solid var(--border-soft); margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.hero-text h2{ font-size:21px; font-weight:800; letter-spacing:-.01em; }
.hero-text p{ color:var(--text-muted); font-size:13.5px; margin-top:7px; }
.hero-orbit, .hero-net{ display:none; }

/* ---------------------------------------------------------- widgets --- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:2fr 1fr; }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid-4{ grid-template-columns:1fr;} }

.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow-card); transition:border-color .15s;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.card-head h3{ font-size:14px; font-weight:700; }
.card-sub{ color:var(--text-muted); font-size:12px; }

.stat-card{ display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:rgba(115,103,240,.12); color:var(--primary);
}
.stat-icon .icon{ width:19px; height:19px; }
.stat-icon-1{ background:rgba(115,103,240,.12); color:var(--primary); }
.stat-icon-2{ background:rgba(0,207,232,.12); color:var(--cyan); }
.stat-icon-3{ background:rgba(255,159,67,.12); color:var(--amber); }
.stat-icon-4{ background:rgba(40,199,111,.12); color:var(--emerald); }
.stat-card .label{ color:var(--text-muted); font-size:12.5px; font-weight:600; }
.stat-card .value{ font-family:var(--font-mono); font-size:24px; font-weight:700; letter-spacing:-.01em; }
.stat-card .delta{ font-size:11.5px; font-family:var(--font-mono); font-weight:700; padding:4px 10px; border-radius:20px; }
.delta.up{ color:var(--emerald); background:rgba(40,199,111,.12); }
.delta.down{ color:var(--rose); background:rgba(234,84,85,.12); }

/* حلقه‌ی درصد — برای گیج‌های سلامت/منابع، بدون درخشش، فقط رنگ تخت */
.ring{
  --pct: 0; width:52px; height:52px; border-radius:50%; flex-shrink:0; position:relative;
  background: conic-gradient(from -90deg, var(--ring-a,var(--primary)) calc(var(--pct)*1%), var(--surface-2) 0);
  transition: --pct 1.1s var(--ease);
}
.ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface); }
.ring span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-pending{ background:rgba(255,159,67,.12); color:var(--amber); }
.badge-approved{ background:rgba(40,199,111,.12); color:var(--emerald); }
.badge-rejected{ background:rgba(234,84,85,.12); color:var(--rose); }
.badge-owner{ background:rgba(115,103,240,.14); color:var(--primary); }
.badge-admin{ background:rgba(40,199,111,.12); color:var(--emerald); }
.badge-mid{ background:rgba(255,159,67,.12); color:var(--amber); }
.badge-support{ background:var(--surface-hi); color:var(--text-muted); }

table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:right; color:var(--text-muted); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--border-soft); }
tbody td{ padding:13px 12px; border-bottom:1px solid var(--border-soft); }
tbody tr{ transition:background .12s; }
tbody tr:hover{ background:var(--surface-hi); }
.table-wrap{ overflow-x:auto; margin:-4px -4px 0; padding:4px; }
.empty-state{ text-align:center; padding:56px 20px; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:4px; }
.empty-state .icon{
  width:44px; height:44px; margin:0 auto 10px; padding:12px; box-sizing:border-box;
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-dim);
}
.empty-state strong{ color:var(--text); font-size:13.5px; }
.empty-state span{ font-size:12.5px; }

.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.input, select.input{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; color:var(--text); font-size:13.5px; outline:none; transition:border-color .15s; box-shadow:none;
}
.input:focus, select.input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(115,103,240,.16); }
.tabs{ display:flex; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn{
  padding:8px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ background:var(--primary); color:#fff; border-color:transparent; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,10,18,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
  animation:backdrop-in .15s ease;
}
@keyframes backdrop-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:24px; width:100%; max-width:520px; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-pop);
  animation:modal-in .18s var(--ease);
}
.modal.modal-lg{ max-width:720px; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.modal h3{ margin-bottom:16px; font-size:16px; font-weight:800; }
.form-grid{ display:flex; flex-direction:column; gap:12px; }
.form-row{ display:flex; gap:10px; }
.form-row > *{ flex:1; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }

/* ---- بانک کانفیگ: خلاصه‌ی موجودی + لیست لینک‌ها ---------------------- */
.cfg-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cfg-stat{
  display:flex; flex-direction:column; gap:5px; padding:11px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.cfg-stat span{ font-size:11px; color:var(--text-muted); }
.cfg-stat b{ font-size:15px; }
.cfg-list-title{ font-size:13px; margin:18px 0 8px; color:var(--text-muted); font-weight:700; }
.cfg-table-wrap{ max-height:280px; overflow-y:auto; }
.cfg-link-cell{ font-size:11px; word-break:break-all; max-width:1px; }
.cfg-actions{ display:flex; gap:6px; white-space:nowrap; }

/* ---- کارت جزئیات کاربر ------------------------------------------------ */
.ud-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ud-avatar{
  width:44px; height:44px; border-radius:12px; background:var(--primary); color:var(--primary-ink, #fff);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-mono);
  font-size:16px; flex-shrink:0;
}
.ud-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ud-id strong{ font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ud-id span{ font-size:11.5px; color:var(--text-muted); }
.ud-head .badge{ margin-inline-start:auto; }
.ud-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ud-stat{
  display:flex; flex-direction:column; gap:5px; padding:11px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.ud-stat span{ font-size:11px; color:var(--text-muted); }
.ud-stat b{ font-size:13.5px; }
.ud-section-title{ font-size:13px; margin:18px 0 8px; color:var(--text-muted); font-weight:700; }
@media (max-width:520px){ .cfg-stats, .ud-stats{ grid-template-columns:repeat(2,1fr); } }

.toast-root{ position:fixed; bottom:20px; left:20px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 18px; font-size:13px; box-shadow:var(--shadow-pop); animation:toast-in .25s var(--ease);
  border-inline-start:3px solid var(--primary);
}
.toast.error{ border-inline-start-color:var(--rose); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

.pager{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.spark{ display:flex; align-items:flex-end; gap:5px; height:70px; }
.spark i{
  flex:1; background:var(--cyan); border-radius:4px 4px 0 0; min-height:2px; height:0; opacity:.85;
  transition:height .9s var(--ease);
}

/* ---- گرید بنتوی داشبورد (گیج سلامت، رادار، لیدربورد) ---------------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(120px,auto); gap:16px; }
.bento .card{ display:flex; flex-direction:column; min-width:0; }
.bento .span-2{ grid-column:span 2; } .bento .span-3{ grid-column:span 3; } .bento .span-4{ grid-column:span 4; }
.bento .rows-2{ grid-row:span 2; }
@media (max-width:1100px){ .bento{ grid-template-columns:repeat(2,1fr); } .bento .span-2,.bento .span-3,.bento .span-4{ grid-column:span 2; } .bento .rows-2{ grid-row:span 1; } }

.gauge-wrap{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:150px; }
.gauge-wrap svg{ width:150px; height:150px; transform:rotate(-90deg); }
.gauge-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-center .v{ font-family:var(--font-mono); font-size:26px; font-weight:700; }
.gauge-center .l{ font-size:11px; color:var(--text-muted); margin-top:2px; }

.radar-wrap{ flex:1; display:flex; align-items:center; justify-content:center; }
.radar-wrap svg{ width:100%; max-width:230px; }

.bar-row{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12.5px; }
.bar-row .bar-name{ flex:0 0 88px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ flex:1; height:7px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.bar-fill{ display:block; height:100%; width:0; border-radius:5px; transition:width 1s var(--ease); }
.bar-row .bar-val{ flex:0 0 auto; font-family:var(--font-mono); color:var(--text-muted); font-size:11.5px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:20px; padding:6px 13px; font-size:12px; }

/* ---------------------------------------------- dashboard range bar ---- */
.dash-range-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.dash-range-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dash-range-chip{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); }
.dash-range-chip.active{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.dash-range-custom{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.dash-range-custom input[type="date"]{ padding:7px 10px; font-size:12.5px; max-width:150px; }
.dash-range-custom span{ font-size:12px; color:var(--text-muted); }

.loading{ text-align:center; padding:48px; color:var(--text-muted); }

/* transition ملایم هنگام تعویض تیره/روشن */
html{ transition: background .2s ease; }
body{ transition: background .2s ease, color .2s ease; }
.card, .btn, .nav-item, .sidebar, .topbar, .field input, .input, .modal, .login-card{
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mode-toggle{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:3px; }
.mode-toggle button{ border:none; background:none; padding:7px 16px; border-radius:16px; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-family:inherit; font-weight:600; transition:background .15s, color .15s; }
.mode-toggle button.active{ background:var(--primary); color:#fff; }

/* ---------------------------------------------------------- theme picker --- */
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.theme-card{
  position:relative; display:flex; align-items:center; gap:12px; padding:12px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  cursor:pointer; transition:border-color .15s var(--ease), transform .1s var(--ease);
}
.theme-card:hover{ border-color:var(--primary); }
.theme-card.active{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.theme-card.locked{ opacity:.55; cursor:not-allowed; }
.theme-card.locked:hover{ border-color:var(--border); }
.theme-card-swatch{ display:flex; flex-shrink:0; border-radius:9px; overflow:hidden; width:38px; height:38px; }
.theme-card-swatch span{ flex:1; }
.theme-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.theme-card-body strong{ font-size:13.5px; color:var(--text); }
.theme-card-body span{ font-size:11.5px; color:var(--text-muted); }
.theme-card-badge{
  position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:20px; background:var(--primary); color:#fff;
}
.theme-card-badge.locked{ background:var(--surface-hi); color:var(--text-dim); }

/* ---- گیج‌های منابع سرور (صفحه‌ی خانه) ------------------------------- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
@media (max-width:900px){ .res-grid{ grid-template-columns:1fr; } }
.res-card{ display:flex; align-items:center; gap:16px; }
.res-ring{ --pct:0; width:64px; height:64px; border-radius:50%; flex-shrink:0; position:relative;
  background:conic-gradient(from -90deg, var(--ring-a,var(--primary)) calc(var(--pct)*1%), var(--surface-2) 0);
  transition:--pct 1s var(--ease);
}
.res-ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface); }
.res-ring span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12.5px; }
.res-info strong{ display:block; font-size:13.5px; margin-bottom:3px; }
.res-info span{ font-size:11.5px; color:var(--text-muted); }

/* ===================================================================
   ریسپانسیو موبایل
=================================================================== */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:4px; width:34px; height:34px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface); cursor:pointer; flex-shrink:0; }
.hamburger span{ width:16px; height:2px; background:var(--text-muted); border-radius:2px; margin:0 auto; }
.topbar-right{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-right h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:19; }
.sidebar-overlay.show{ display:block; }

@media (max-width:960px){
  .hamburger{ display:flex; }
  .app{ display:block; }
  .sidebar{
    position:fixed !important; top:0; bottom:0; inset-inline-end:0; z-index:20; height:100vh;
    width:78vw; max-width:300px; transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--shadow-pop);
  }
  html[dir="rtl"] .sidebar{ transform:translateX(-100%); }
  .sidebar.open, html[dir="rtl"] .sidebar.open{ transform:translateX(0); }
  .main{ width:100%; }
  .topbar{ padding:14px 16px; }
  .topbar h2{ font-size:15.5px; }
  .topbar-actions{ gap:8px; font-size:11.5px; }
  .topbar-clock{ padding:5px 10px; font-size:11px; }
  .content{ padding:14px 14px 50px; }

  .hero{ padding:18px 16px; border-radius:14px; gap:14px; }
  .hero-text h2{ font-size:17px; }
  .hero-text p{ font-size:12.5px; }

  .grid{ gap:12px; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr !important; }
  .res-grid{ grid-template-columns:1fr !important; }
  .bento{ grid-template-columns:1fr !important; gap:12px; }
  .bento .span-2, .bento .span-3, .bento .span-4{ grid-column:1 !important; }
  .bento .rows-2{ grid-row:auto !important; }

  .card{ padding:15px; border-radius:13px; }
  .stat-card .value{ font-size:20px; }

  table{ font-size:12px; }
  thead th, tbody td{ padding:9px 8px; white-space:nowrap; }
  tbody td:has(.btn){ white-space:normal; }
  tbody td .btn + .btn{ margin-inline-start:6px; }
  tbody td:has(.btn + .btn){ display:flex; flex-wrap:wrap; gap:6px; }
  .toolbar{ gap:8px; }
  .toolbar .input, .toolbar select.input{ flex:1 1 140px; min-width:0; }
  .tabs{ gap:6px; }
  .tab-btn{ padding:7px 12px; font-size:12px; }

  .modal, .modal.modal-lg{ padding:20px; max-width:94vw; }
  .form-row{ flex-direction:column; }
  .modal-actions{ flex-direction:column; }
  .modal-actions .btn{ width:100%; }

  .login-card{ padding:26px 20px; }
}

@media (max-width:420px){
  .grid-4, .grid-3, .grid-2, .res-grid{ grid-template-columns:1fr !important; }
  .stat-top{ flex-wrap:wrap; gap:8px; }
  .topbar-clock{ display:none; }
  .content{ padding:12px 10px 46px; }
  .card{ padding:13px; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar .input, .toolbar select.input{ flex:1 1 auto; }
}

/* -------------------------------------------------------- settings --- */
.settings-accordion{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.settings-group{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-sm); overflow:hidden;
}
.settings-group-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; background:transparent; border:none; cursor:pointer;
  color:var(--text); font-size:13.5px; font-weight:700; font-family:inherit; text-align:right;
}
.settings-group-arrow{ color:var(--text-muted); transition:transform .2s ease; }
.settings-group.open .settings-group-arrow{ transform:rotate(180deg); }
.settings-group-body{ display:none; padding:0 18px 18px; }
.settings-group.open .settings-group-body{ display:block; }

.field-row{ flex-direction:row !important; align-items:center; justify-content:space-between; gap:12px; }
.field-row > span{ color:var(--text); font-size:13.5px; font-weight:600; }

.switch{
  --w:44px; --h:26px; width:var(--w); height:var(--h); border-radius:999px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  position:relative; cursor:pointer; transition:.2s ease;
}
.switch i{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:var(--text-muted); transition:.2s ease;
}
.switch[data-on="1"]{ background:var(--emerald); border-color:transparent; }
.switch[data-on="1"] i{ right:calc(var(--w) - 22px); background:#fff; }

.image-field{ display:flex; flex-direction:column; gap:10px; }
.image-field-preview{ max-width:220px; max-height:100px; border-radius:var(--radius-sm); border:1px solid var(--border); object-fit:contain; background:var(--surface-2); }
.image-field-actions{ display:flex; gap:8px; }

.color-pick{ display:flex; align-items:center; gap:10px; }
.color-swatch{
  width:28px; height:28px; border-radius:50%; cursor:pointer; flex-shrink:0;
  border:2px solid var(--border); position:relative; transition:.15s ease;
}
.color-swatch:hover{ transform:scale(1.08); }
.color-swatch.active{ border-color:var(--text); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.color-swatch.active::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.swatch-default{ background:#7A7C90; }
.swatch-primary{ background:#3d8bfd; }
.swatch-success{ background:var(--emerald); }
.swatch-danger{ background:var(--rose); }

.settings-save-bar{ position:sticky; bottom:12px; margin-top:4px; }

.menu-order-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 6px; border-bottom:1px solid var(--border);
  background:var(--surface-2); border-radius:var(--radius-xs); margin-bottom:6px;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.menu-order-row:last-child{ margin-bottom:0; }
.menu-order-row.dragging{ opacity:.55; border:1px dashed var(--primary); touch-action:none; }
.menu-order-row.drag-over{ border-top:2px solid var(--primary); }
.menu-order-drag-handle{
  cursor:grab; font-size:16px; color:var(--text-muted); padding:2px 6px;
  user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none;
}
.menu-order-drag-handle:active{ cursor:grabbing; }
.menu-order-label{ flex:1; font-size:13px; }
.menu-order-arrows{ display:flex; gap:4px; }
body.menu-order-dragging-lock{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ===================================================================
   تم Bento Grid — پالت روشن و رنگارنگ به سبک ویجت‌های iOS/اپل.
   تعریف مجدد متغیرهای پایه یعنی خیلی از کامپوننت‌های عمومی (دکمه، فرم،
   جدول، بج) خودکار رنگ عوض می‌کنن؛ علاوه بر اون چیدمان سایدبار و
   داشبورد هم به‌صورت اختصاصی بازطراحی شده.
=================================================================== */
html[data-theme="bento"]{
  --bg: #F2F2F7;
  --bg-2: #E8E8ED;
  --surface: #FFFFFF;
  --surface-2: #F7F7FA;
  --surface-hi: rgba(0,0,0,.035);
  --border: rgba(0,0,0,.07);
  --border-soft: rgba(0,0,0,.05);

  --text: #1C1C1E;
  --text-muted: #6E6E73;
  --text-dim: #AEAEB2;

  --primary: #0A84FF;
  --primary-ink: #FFFFFF;
  --cyan: #40C8E0;
  --amber: #FF9F0A;
  --emerald: #30D158;
  --rose: #FF375F;
  --violet: #BF5AF2;
  --fuchsia: #FF2D78;

  --accent-1: var(--primary);
  --accent-2: var(--emerald);
  --accent-3: var(--amber);
  --accent-4: var(--rose);

  --radius: 26px;
  --radius-sm: 18px;
  --radius-xs: 13px;

  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-pop: 0 20px 50px rgba(0,0,0,.14);
  --shadow-btn: 0 2px 8px rgba(0,0,0,.08);

  --focus-ring: 0 0 0 3px rgba(10,132,255,.3);
}
html[data-theme="bento"] body{ background:var(--bg); }
html[data-theme="bento"] .bg-blobs{ display:none; }

/* کارت‌ها: بدون بوردر، سایه‌ی نرم شناور */
html[data-theme="bento"] .card,
html[data-theme="bento"] .login-card,
html[data-theme="bento"] .modal{
  border:none; box-shadow:var(--shadow-card);
}
html[data-theme="bento"] .btn{ border-radius:16px; }
html[data-theme="bento"] .input, html[data-theme="bento"] .field input{ border-radius:14px; }

/* سایدبار به یک ریل آیکونی جمع‌وجور تبدیل می‌شه */
html[data-theme="bento"] .sidebar{
  width:80px; align-items:center; padding:20px 10px; background:transparent; border-left:none;
}
html[data-theme="bento"] .sidebar-brand{ padding:0 0 18px; justify-content:center; }
html[data-theme="bento"] .brand-text{ display:none; }
html[data-theme="bento"] .brand-mark{ border-radius:16px; width:42px; height:42px; box-shadow:var(--shadow-btn); }
html[data-theme="bento"] .nav-tunnel{ width:100%; }
html[data-theme="bento"] .nav-item{
  flex-direction:column; gap:2px; padding:10px 4px; border-radius:16px; text-align:center;
}
html[data-theme="bento"] .nav-item span:last-child{ font-size:9px; white-space:normal; line-height:1.15; }
html[data-theme="bento"] .nav-item.active{ background:var(--primary); box-shadow:var(--shadow-btn); }
html[data-theme="bento"] .nav-section{ text-align:center; margin:14px 4px 6px; font-size:8.5px; }
html[data-theme="bento"] .sidebar-footer{ width:100%; }
html[data-theme="bento"] .me-card{ flex-direction:column; padding:6px 0 10px; text-align:center; }
html[data-theme="bento"] .me-info{ display:none; }
html[data-theme="bento"] .logout-btn, html[data-theme="bento"] #logout-btn{ font-size:0; padding:10px; border-radius:14px; }
html[data-theme="bento"] #logout-btn .icon{ width:16px; height:16px; }

/* تاپ‌بار: شناور و کپسولی */
html[data-theme="bento"] .topbar{
  margin:14px 14px 0; border-radius:20px; background:var(--surface); box-shadow:var(--shadow-card);
  border-bottom:none; top:14px;
}
html[data-theme="bento"] .topbar-clock{ background:var(--surface-2); border:none; }

/* -------------------------------------------------- bento widgets ---- */
.bento-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(118px,auto); gap:14px; }
.bento-grid .span-2{ grid-column:span 2; }
.bento-grid .rows-2{ grid-row:span 2; }
@media (max-width:900px){ .bento-grid{ grid-template-columns:repeat(2,1fr); } .bento-grid .span-2{ grid-column:span 2; } }

.bw{
  border-radius:26px; padding:18px; display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden; color:#fff; min-width:0;
}
.bw-white{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); }
.bw-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bw-label{ font-size:12.5px; font-weight:700; opacity:.92; }
.bw-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.bw-sub{ font-size:11px; opacity:.85; }
.bw-badge{ font-size:11px; font-weight:800; background:rgba(255,255,255,.22); padding:3px 9px; border-radius:20px; }
.bw-badge.down{ background:rgba(0,0,0,.18); }
.bw-trend{ width:100%; height:44px; margin-top:auto; }

.w-blue{ background:linear-gradient(155deg,#0A84FF,#0060DF); }
.w-green{ background:linear-gradient(155deg,#30D158,#1E9E42); }
.w-orange{ background:linear-gradient(155deg,#FF9F0A,#E07E00); }
.w-pink{ background:linear-gradient(155deg,#FF375F,#D91E45); }
.w-purple{ background:linear-gradient(155deg,#BF5AF2,#9433D6); }

.bento-rings-card .bw-head{ margin-bottom:4px; }
.bento-rings{ display:flex; align-items:center; gap:16px; flex:1; }
.bento-rings svg{ width:112px; height:112px; flex-shrink:0; }
.bento-rings-legend{ display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--text-muted); }
.bento-rings-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; }

.bw-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bw-mini{ border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; color:#fff; }
.bw-mini-name{ font-size:11px; opacity:.9; }
.bw-mini-val{ font-size:14px; font-weight:800; }

.bw-row{ display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.bw-row:last-child{ border-bottom:none; }
.bw-row-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.bw-row-name{ flex:1; font-size:12.5px; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bw-row-val{ font-size:12px; color:var(--text-muted); }

/* ------------------------------------------------ bento: list/card system */
/* سگمنت کپسولی (جایگزین تب) */
.bn-hero{ background:var(--surface); border-radius:22px; box-shadow:var(--shadow-card); padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.bn-hero h2{ font-size:17px; font-weight:800; margin:0 0 2px; }
.bn-hero p{ font-size:12.5px; color:var(--text-muted); margin:0; }
.bn-seg{ display:inline-flex; background:var(--surface-2); border-radius:999px; padding:4px; gap:2px; }
.bn-seg-btn{ border:none; background:transparent; padding:7px 15px; border-radius:999px; font-family:inherit;
  font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:background .15s, color .15s; }
.bn-seg-btn.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-btn); }
.bn-search{ width:100%; border:none; border-radius:999px; padding:10px 16px; background:var(--surface-2);
  font-size:13px; font-family:inherit; color:var(--text); }
.bn-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(10,132,255,.22); }
.bn-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:14px; }

/* لیست گروهی (مثل اپ تنظیمات/میل اپل) */
.bn-list{ background:var(--surface); border-radius:20px; box-shadow:var(--shadow-card); overflow:hidden; }
.bn-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-soft);
  transition:background .12s; cursor:default; }
.bn-row:last-child{ border-bottom:none; }
.bn-row:hover{ background:var(--surface-2); }
.bn-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff; flex-shrink:0; }
.bn-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.bn-row-title{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bn-row-sub{ font-size:11.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bn-row-trail{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.bn-row-amount{ font-size:13px; font-weight:800; }
.bn-row-actions{ display:flex; gap:8px; padding:0 16px 12px; margin-top:-6px; flex-wrap:wrap; }

/* کارت (برای محصولات/کوپن/نمایندگی/پنل) */
.bn-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.bn-card{ background:var(--surface); border-radius:22px; padding:16px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:8px; transition:transform .15s cubic-bezier(.2,.8,.3,1.2); }
.bn-card:active{ transform:scale(.97); }

/* پیل وضعیت */
.bn-pill{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:10.5px; font-weight:700; }
.bn-pill-ok{ background:rgba(48,209,88,.15); color:#1E9E42; }
.bn-pill-no{ background:rgba(255,55,95,.14); color:#D91E45; }
.bn-pill-pending{ background:rgba(255,159,10,.15); color:#E07E00; }
.bn-pill-info{ background:rgba(10,132,255,.13); color:#0A84FF; }

/* دکمه‌ی کپسولی با پرش لمسی (spring tap) */
.bn-btn{ border:none; border-radius:999px; padding:8px 17px; font-family:inherit; font-size:12px; font-weight:700;
  cursor:pointer; transition:transform .12s; }
.bn-btn:active{ transform:scale(.92); }
.bn-btn-ok{ background:var(--emerald); color:#fff; }
.bn-btn-no{ background:var(--rose); color:#fff; }
.bn-btn-ghost{ background:var(--surface-2); color:var(--text); }
.bn-btn:disabled{ opacity:.5; }

/* ورود آرام: بالا‌آمدن + بزرگ‌شدن جزئی (فیزیک نرم اپلی) */
@keyframes bnRise{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.bn-card-anim{ animation:bnRise .38s cubic-bezier(.2,.9,.25,1.1) both; }
@media (prefers-reduced-motion:reduce){ .bn-card-anim{ animation:none; } }

/* سوییچ/سواچ/آکاردئون گردتر برای تنظیمات (بدون نیاز به تغییر منطق JS) */
html[data-theme="bento"] .settings-group{ border-radius:18px; box-shadow:var(--shadow-card); margin-bottom:12px; overflow:hidden; }
html[data-theme="bento"] .settings-group-head{ border-radius:0; }
html[data-theme="bento"] .switch{ border-radius:999px; }
html[data-theme="bento"] .switch i{ border-radius:50%; }
html[data-theme="bento"] .color-swatch{ border-radius:50%; }
html[data-theme="bento"] .menu-order-row{ border-radius:16px; box-shadow:var(--shadow-btn); margin-bottom:8px; }

/* ===================================================================
   تم Neo-brutalist — بوردر ضخیم مشکی، سایه‌ی افست سخت (بدون بلور)،
   بدون گردی گوشه، تایپوگرافی بولد، رنگ زرد/مشکی/سفید بی‌واسطه.
=================================================================== */
html[data-theme="brutalist"]{
  --bg: #FDF6E3;
  --bg-2: #F5EBC9;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-hi: rgba(0,0,0,.05);
  --border: #000000;
  --border-soft: #000000;

  --text: #000000;
  --text-muted: #3A3A3A;
  --text-dim: #6B6B6B;

  --primary: #FFE600;
  --primary-ink: #000000;
  --cyan: #2B6CFF;
  --amber: #FF8A00;
  --emerald: #00C853;
  --rose: #FF3B3B;
  --violet: #7C3AED;
  --fuchsia: #FF3EA5;

  --font-body: "Vazirmatn", -apple-system, Tahoma, sans-serif;

  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;

  --shadow-card: 5px 5px 0 #000;
  --shadow-pop: 9px 9px 0 #000;
  --shadow-btn: 3px 3px 0 #000;

  --focus-ring: 0 0 0 3px #000;
}
html[data-theme="brutalist"] body{ font-weight:600; }
html[data-theme="brutalist"] h1, html[data-theme="brutalist"] h2, html[data-theme="brutalist"] h3, html[data-theme="brutalist"] h4{ font-weight:800; letter-spacing:-.01em; }

html[data-theme="brutalist"] .card,
html[data-theme="brutalist"] .login-card,
html[data-theme="brutalist"] .modal{
  border:3px solid #000; box-shadow:var(--shadow-card);
}
html[data-theme="brutalist"] .btn{
  border:2.5px solid #000; box-shadow:var(--shadow-btn); font-weight:800;
  transition:transform .08s, box-shadow .08s;
}
html[data-theme="brutalist"] .btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 #000; }
html[data-theme="brutalist"] .btn-primary{ background:var(--primary); color:#000; }
html[data-theme="brutalist"] .input, html[data-theme="brutalist"] .field input{ border:2.5px solid #000; }
html[data-theme="brutalist"] .badge{ border:1.5px solid currentColor; font-weight:800; }
html[data-theme="brutalist"] table{ border:2.5px solid #000; }
html[data-theme="brutalist"] thead th{ border-bottom:2.5px solid #000; text-transform:none; }

html[data-theme="brutalist"] .sidebar{
  background:#000; border-left:none;
}
html[data-theme="brutalist"] .brand-mark{ border-radius:0; background:var(--primary); color:#000; border:2.5px solid #000; }
html[data-theme="brutalist"] .brand-text strong{ color:#fff; }
html[data-theme="brutalist"] .brand-text span{ color:#aaa; }
html[data-theme="brutalist"] .nav-item{ color:#ccc; border-radius:0; }
html[data-theme="brutalist"] .nav-icon{ border-radius:0; }
html[data-theme="brutalist"] .nav-item:hover{ background:#222; color:#fff; }
html[data-theme="brutalist"] .nav-item.active{ background:var(--primary); color:#000; }
html[data-theme="brutalist"] .nav-item.active .nav-icon{ color:#000; }
html[data-theme="brutalist"] .nav-section{ color:#777; border-top-color:#333; }
html[data-theme="brutalist"] .sidebar-footer{ border-top-color:#333; }
html[data-theme="brutalist"] .me-avatar{ border-radius:0; border:2px solid #fff; color:#fff; background:#000; }
html[data-theme="brutalist"] .me-info strong{ color:#fff; }
html[data-theme="brutalist"] #logout-btn{ background:#fff; }

html[data-theme="brutalist"] .topbar{ border-bottom:3px solid #000; background:var(--bg); }
html[data-theme="brutalist"] .topbar-clock{ border-radius:0; border:2px solid #000; }

/* -------------------------------------------------- brutalist dashboard --- */
.bru-hero{ border:3px solid #000; background:#FFE600; padding:20px 22px; box-shadow:5px 5px 0 #000; margin-bottom:16px; }
.bru-hero h2{ font-size:22px; font-weight:900; }
.bru-hero p{ font-size:13px; margin-top:4px; font-weight:700; }

.bru-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .bru-grid-4{ grid-template-columns:repeat(2,1fr); } }
.bru-block{ border:3px solid #000; box-shadow:5px 5px 0 #000; padding:16px; display:flex; flex-direction:column; gap:6px; }
.bru-yellow{ background:#FFE600; }
.bru-white{ background:#fff; }
.bru-black{ background:#000; color:#fff; }
.bru-block-label{ font-size:11.5px; font-weight:800; text-transform:uppercase; opacity:.75; }
.bru-block-val{ font-size:25px; font-weight:900; }
.bru-block-tag{ font-size:11px; font-weight:800; width:fit-content; padding:2px 8px; border:2px solid currentColor; }
.bru-block-tag.neg{ color:#FF3B3B; }

.bru-panel{ border:3px solid #000; background:#fff; box-shadow:5px 5px 0 #000; padding:16px 18px; }
.bru-panel-head{ font-size:13px; font-weight:900; text-transform:uppercase; margin-bottom:14px; padding-bottom:8px; border-bottom:2.5px solid #000; }

.bru-bars{ display:flex; align-items:flex-end; gap:6px; height:130px; }
.bru-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.bru-bar-val{ font-size:9px; font-weight:800; writing-mode:vertical-rl; opacity:.7; }
.bru-bar{ width:100%; max-width:26px; height:4%; border:2px solid #000; transition:height 1s cubic-bezier(.16,1,.3,1); }

.bru-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .bru-cols{ grid-template-columns:1fr; } }

.bru-metric-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bru-metric-label{ width:110px; flex-shrink:0; font-size:11.5px; font-weight:700; }
.bru-metric-track{ flex:1; height:16px; border:2px solid #000; background:#fff; overflow:hidden; }
.bru-metric-fill{ display:block; height:100%; width:0; transition:width 1s cubic-bezier(.16,1,.3,1); }
.bru-metric-val{ width:38px; text-align:left; font-size:11.5px; font-weight:800; flex-shrink:0; }

.bru-stack{ display:flex; height:28px; border:2.5px solid #000; overflow:hidden; margin-bottom:12px; }
.bru-stack-seg{ border-inline-end:2px solid #000; }
.bru-stack-seg:last-child{ border-inline-end:none; }
.bru-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; }
.bru-legend-item{ font-size:11.5px; font-weight:700; display:flex; align-items:center; }
.bru-legend-item i{ display:inline-block; width:10px; height:10px; border:1.5px solid #000; margin-inline-end:6px; }

.bru-prod-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:2px solid #000; }
.bru-prod-row:last-child{ border-bottom:none; }
.bru-prod-num{ font-size:12px; font-weight:900; width:26px; }
.bru-prod-name{ flex:1; font-size:13px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bru-prod-val{ font-size:12.5px; font-weight:800; }

/* ---- ورود کارت‌ها: اسلَم (افت با کمی چرخش) به‌جای فید ساده ---------- */
@keyframes bruSlam{ from{ opacity:0; transform:translateY(16px) rotate(-1.2deg); } to{ opacity:1; transform:translateY(0) rotate(0); } }
.bru-card-anim{ animation:bruSlam .36s cubic-bezier(.2,.85,.32,1.25) both; }
@media (prefers-reduced-motion:reduce){ .bru-card-anim{ animation:none; } }

/* ---- کنترل سگمنتی (جایگزین تب/سلکت) --------------------------------- */
.bru-seg{ display:inline-flex; border:2.5px solid #000; background:#fff; box-shadow:var(--shadow-btn); overflow:hidden; }
.bru-seg-btn{ font-family:inherit; font-size:12px; font-weight:800; padding:9px 14px; background:#fff; color:#000; border:none;
  border-inline-end:2.5px solid #000; cursor:pointer; transition:background .1s; }
.bru-seg-btn:last-child{ border-inline-end:none; }
.bru-seg-btn:hover{ background:#f2f2f2; }
.bru-seg-btn.active{ background:var(--primary); }

.bru-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:16px; }
.bru-search-input{ flex:1; min-width:220px; font-family:inherit; font-size:13px; font-weight:600; padding:10px 14px;
  border:2.5px solid #000; background:#fff; box-shadow:var(--shadow-btn); }
.bru-search-input:focus{ outline:none; box-shadow:0 0 0 3px #000; }

/* ---- برچسب وضعیت (استیکر گوشه) --------------------------------------- */
.bru-flag{ display:inline-block; font-size:10.5px; font-weight:900; text-transform:uppercase; padding:3px 9px;
  border:2px solid #000; letter-spacing:.02em; }
.bru-flag-ok{ background:var(--emerald); color:#000; }
.bru-flag-no{ background:var(--rose); color:#fff; }
.bru-flag-pending{ background:var(--primary); color:#000; }

/* ---- سفارش‌ها: کارت «تیکت/پرونده» ------------------------------------ */
.bru-ticket-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.bru-ticket{ border:3px solid #000; background:#fff; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  transition:transform .12s, box-shadow .12s; }
.bru-ticket:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.bru-ticket-stub{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#000;
  border-bottom:3px dashed var(--primary); }
.bru-ticket-num{ color:#fff; font-weight:900; font-size:14px; }
.bru-ticket-stub .btn{ background:transparent; color:#fff; border-color:#fff; box-shadow:none; }
.bru-ticket-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.bru-ticket-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; gap:10px; }
.bru-ticket-row span{ color:var(--text-muted); font-weight:700; flex-shrink:0; }
.bru-ticket-row b{ font-weight:800; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bru-amount{ font-size:14px; }
.bru-ticket-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-top:2.5px solid #000; margin-top:auto; }

/* ---- دکمه‌ی مُهر (تایید/رد) ------------------------------------------- */
.bru-stamp{ font-family:inherit; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.03em;
  padding:7px 14px; background:#fff; border:2.5px solid currentColor; cursor:pointer; border-radius:3px;
  transform:rotate(var(--r,0deg)); transition:transform .12s, background .12s; }
.bru-stamp-ok{ color:#00893F; }
.bru-stamp-no{ color:#C4001D; }
.bru-stamp:hover{ transform:rotate(0deg) scale(1.05); }
.bru-stamp-ok:hover{ background:var(--emerald); color:#000; }
.bru-stamp-no:hover{ background:var(--rose); color:#fff; }
.bru-stamp:disabled{ opacity:.5; cursor:default; }
@keyframes bruStampHit{ 0%{ transform:rotate(var(--r,0deg)) scale(1); } 45%{ transform:rotate(0deg) scale(1.25); } 100%{ transform:rotate(0deg) scale(1.08); } }
.bru-stamp.hit{ animation:bruStampHit .32s ease forwards; }

/* ---- کاربران: گرید دایرکتوری ------------------------------------------ */
.bru-user-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.bru-user-card{ position:relative; border:3px solid #000; background:#fff; box-shadow:var(--shadow-card); padding:16px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  transition:transform .12s, box-shadow .12s; }
.bru-user-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.bru-user-card .bru-flag{ position:absolute; top:-2px; inset-inline-end:-2px; }
.bru-user-avatar{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:22px;
  font-weight:900; background:var(--primary); border:2.5px solid #000; margin-bottom:6px; }
.bru-user-name{ font-size:14px; font-weight:800; }
.bru-user-id, .bru-user-joined{ font-size:11px; color:var(--text-muted); font-weight:700; }
.bru-user-actions{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; justify-content:center; }

/* ---- تخفیف‌ها: کارت «کوپن پانچ‌شده» ------------------------------------ */
.bru-coupon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.bru-coupon{ position:relative; border:3px solid #000; background:#fff; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; transition:transform .12s, box-shadow .12s, opacity .12s; }
.bru-coupon:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.bru-coupon-off{ opacity:.55; }
.bru-coupon-value{ background:var(--primary); color:#000; font-size:26px; font-weight:900; text-align:center;
  padding:16px 10px 20px; }
.bru-coupon-cut{ height:0; border-top:3px dashed #000; position:relative; }
.bru-coupon-cut::before, .bru-coupon-cut::after{ content:''; position:absolute; top:-9px; width:18px; height:18px;
  background:var(--bg); border:3px solid #000; border-radius:50%; }
.bru-coupon-cut::before{ inset-inline-start:-12px; }
.bru-coupon-cut::after{ inset-inline-end:-12px; }
.bru-coupon-body{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.bru-coupon-code{ font-size:16px; font-weight:900; letter-spacing:.03em; }
.bru-coupon-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.bru-coupon-row span{ color:var(--text-muted); font-weight:700; }
.bru-coupon-row b{ font-weight:800; }
.bru-coupon-actions{ display:flex; gap:8px; padding:12px 16px; border-top:2.5px solid #000; margin-top:auto; }

/* ---- دسته‌بندی‌ها: ردیف فهرست ضخیم‌قاب ------------------------------- */
.bru-cat-list{ display:flex; flex-direction:column; gap:10px; }
.bru-cat-row{ display:flex; align-items:center; gap:14px; border:3px solid #000; background:#fff;
  box-shadow:var(--shadow-btn); padding:12px 16px; flex-wrap:wrap; transition:transform .12s, box-shadow .12s; }
.bru-cat-row:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.bru-cat-name{ font-weight:800; font-size:14px; flex:1; min-width:120px; }
.bru-cat-actions{ display:flex; gap:8px; margin-inline-start:auto; }

/* ---- محصولات: کارت «برچسب قیمت آویزون» -------------------------------- */
.bru-product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.bru-product-card{ border:3px solid #000; background:#fff; box-shadow:var(--shadow-card); display:flex;
  flex-direction:column; transition:transform .12s, box-shadow .12s; }
.bru-product-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.bru-product-tag{ background:#000; color:var(--primary); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.bru-product-tag-hole{ width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--primary); flex-shrink:0; }
.bru-product-price{ font-size:17px; font-weight:900; }
.bru-product-body{ padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.bru-product-name{ font-size:14.5px; font-weight:800; }
.bru-product-cat{ font-size:11.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; }

/* ---- پشتیبانی: ردیف‌های اینباکس ---------------------------------------- */
.bru-inbox-list{ display:flex; flex-direction:column; gap:10px; }
.bru-inbox-row{ display:flex; align-items:center; gap:12px; border:3px solid #000; background:#fff;
  box-shadow:var(--shadow-btn); padding:10px 14px; transition:transform .12s, box-shadow .12s; }
.bru-inbox-row:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.bru-inbox-avatar{ width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; background:var(--primary); border:2.5px solid #000; }
.bru-inbox-main{ flex:1; min-width:0; }
.bru-inbox-name{ font-size:13px; font-weight:800; }
.bru-inbox-msg{ font-size:12px; color:var(--text-muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bru-inbox-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:10.5px; flex-shrink:0; }
.bru-inbox-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:50%; background:var(--rose); color:#fff; font-size:11px; font-weight:900; border:2px solid #000; }

/* ---- نمایندگی‌ها: کارت اعتباری ------------------------------------------ */
.bru-reseller-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.bru-reseller-card{ border:2.5px solid #000; background:#fff; box-shadow:var(--shadow-btn); padding:14px;
  display:flex; flex-direction:column; gap:8px; transition:transform .12s, box-shadow .12s; }
.bru-reseller-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.bru-reseller-top{ display:flex; align-items:center; justify-content:space-between; }
.bru-reseller-id{ font-size:11px; font-weight:800; color:var(--text-muted); }
.bru-reseller-name{ font-size:13.5px; font-weight:800; }
.bru-reseller-credit{ background:#000; color:var(--primary); padding:8px 10px; display:flex; align-items:baseline; gap:6px; }
.bru-reseller-credit .mono{ font-size:19px; font-weight:900; }
.bru-reseller-credit small{ font-size:10.5px; font-weight:700; opacity:.8; }

/* ---- پنل‌های VPN: کارت سرور -------------------------------------------- */
.bru-panel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.bru-server-card{ border:3px solid #000; background:#fff; box-shadow:var(--shadow-card); padding:14px 16px;
  display:flex; flex-direction:column; gap:8px; transition:transform .12s, box-shadow .12s; }
.bru-server-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.bru-server-top{ display:flex; align-items:center; gap:9px; }
.bru-server-dot{ width:11px; height:11px; border-radius:50%; border:2px solid #000; flex-shrink:0; }
.bru-server-dot.on{ background:var(--emerald); }
.bru-server-dot.off{ background:var(--rose); }
.bru-server-name{ font-weight:800; font-size:14px; }
.bru-server-url{ font-size:11px; direction:ltr; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
[data-test].bru-testing{ animation:bruPulse .7s ease-in-out infinite; }
@keyframes bruPulse{ 50%{ opacity:.45; } }

/* ---- تنظیمات: سایدبار عمودی + آکاردئون + سوییچ/سواچ برutalist --------- */
.bru-settings-layout{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.bru-settings-nav{ display:flex; flex-direction:column; gap:0; flex-shrink:0; width:210px;
  border:2.5px solid #000; box-shadow:var(--shadow-btn); overflow:hidden; }
.bru-settings-nav .bru-seg-btn{ width:100%; text-align:right; border-inline-end:none; border-bottom:2.5px solid #000; padding:12px 14px; }
.bru-settings-nav .bru-seg-btn:last-child{ border-bottom:none; }
.bru-settings-content{ flex:1; min-width:260px; }

html[data-theme="brutalist"] .settings-group{ border:2.5px solid #000; box-shadow:var(--shadow-btn); margin-bottom:14px; background:#fff; }
html[data-theme="brutalist"] .settings-group-head{ background:#000; color:#fff; font-weight:800; padding:12px 16px; }
html[data-theme="brutalist"] .settings-group-body{ padding:16px; }
html[data-theme="brutalist"] .switch{ width:44px; height:24px; border:2.5px solid #000; border-radius:0; background:#fff; position:relative; }
html[data-theme="brutalist"] .switch i{ position:absolute; top:2px; inset-inline-start:2px; width:16px; height:16px; background:#000; border-radius:0; transition:transform .12s; }
html[data-theme="brutalist"] .switch[data-on="1"]{ background:var(--emerald); }
html[data-theme="brutalist"] .switch[data-on="1"] i{ transform:translateX(20px); }
html[data-theme="brutalist"] .color-swatch{ border-radius:0; border:2.5px solid #000; width:26px; height:26px; }
html[data-theme="brutalist"] .color-swatch.active{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #000; }
html[data-theme="brutalist"] .menu-order-row{ border:2.5px solid #000; box-shadow:var(--shadow-btn); margin-bottom:8px; background:#fff; border-radius:0; }
html[data-theme="brutalist"] .menu-order-row.dragging{ box-shadow:0 0 0 #000; transform:translate(3px,3px); }
html[data-theme="brutalist"] .menu-order-drag-handle{ font-weight:900; }

/* ---- لاگ‌ها: تایم‌لاین ------------------------------------------------- */
.bru-log-list{ display:flex; flex-direction:column; gap:9px; }
.bru-log-row{ border-inline-start:5px solid #000; background:#fff; box-shadow:var(--shadow-btn); padding:10px 14px;
  border-top:2.5px solid #000; border-bottom:2.5px solid #000; border-inline-end:2.5px solid #000; }
.bru-log-time{ font-size:11px; font-weight:800; color:var(--text-muted); }
.bru-log-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:3px; }
.bru-log-action{ font-weight:800; font-size:13px; }
.bru-log-admin{ font-size:11px; color:var(--text-muted); }
.bru-log-details{ font-size:12px; color:var(--text-muted); margin-top:4px; }
@keyframes glassBlobFloat{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(30px,-25px) scale(1.12);} }

.glass-stat{ display:flex; flex-direction:column; gap:8px; }
.glass-stat-label{ font-size:12px; color:var(--text-muted); font-weight:600; }
.glass-stat-tag{ width:fit-content; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.glass-stat-tag.up{ color:#34D399; background:rgba(52,211,153,.14); }
.glass-stat-tag.down{ color:#FB7185; background:rgba(251,113,133,.14); }

.glass-eq{ display:flex; align-items:flex-end; gap:4px; height:90px; }
.glass-eq i{
  flex:1; min-width:3px; border-radius:6px 6px 2px 2px; height:6%; background:var(--c,#8B5CF6);
  box-shadow:0 0 10px var(--c,#8B5CF6); transition:height 1s cubic-bezier(.16,1,.3,1);
}

.glass-dials{ display:flex; justify-content:space-around; gap:10px; flex-wrap:wrap; padding-top:6px; }
.glass-dial{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.glass-dial svg{ width:88px; height:88px; }
.glass-dial-center{ position:absolute; top:0; width:88px; height:88px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.glass-dial-label{ font-size:11px; color:var(--text-muted); font-weight:600; }

.glass-donut-wrap{ position:relative; width:180px; height:180px; margin:6px auto 14px; }
.glass-donut-wrap svg{ width:100%; height:100%; }
.glass-donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.glass-donut-center span{ font-size:17px; font-weight:800; }
.glass-donut-center small{ font-size:10.5px; color:var(--text-muted); }
.glass-legend{ display:flex; flex-direction:column; gap:8px; }
.glass-legend-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); }
.glass-legend-item i{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.glass-legend-item b{ margin-inline-start:auto; color:var(--text); font-weight:700; font-size:12px; }

.glass-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.glass-row:last-child{ border-bottom:none; }
.glass-row-badge{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; background:var(--c,#8B5CF6); color:#fff; box-shadow:0 0 10px var(--c,#8B5CF6);
}
.glass-row-name{ flex:1; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glass-row-val{ font-size:12px; color:var(--text-muted); }

/* ---------------------------------------------- server resources: bento --- */
.bw-res-grid{ display:flex; flex-direction:column; gap:12px; }
.bw-res-top{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-bottom:5px; }
.bw-res-top b{ color:var(--text); font-size:12.5px; }
.bw-res-track{ display:block; height:8px; border-radius:20px; background:var(--surface-2); overflow:hidden; }
.bw-res-fill{ display:block; height:100%; width:0; border-radius:20px; transition:width 1s cubic-bezier(.16,1,.3,1); }

/* ----------------------------------------- server resources: brutalist --- */
.bru-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
@media (max-width:900px){ .bru-res-grid{ grid-template-columns:1fr; } }
.bru-res-card{ border:3px solid #000; background:#fff; box-shadow:5px 5px 0 #000; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.bru-res-label{ font-size:11px; font-weight:800; text-transform:uppercase; }
.bru-res-val{ font-size:22px; font-weight:900; }
.bru-res-track{ height:14px; border:2px solid #000; background:#fff; overflow:hidden; }
.bru-res-fill{ display:block; height:100%; width:0; transition:width 1s cubic-bezier(.16,1,.3,1); }
.bru-res-sub{ font-size:11px; font-weight:700; color:var(--text-muted); }

/* --------------------------------------------- shared page kit: glass --- */
.gl-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 20px; border-radius:var(--radius); margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:var(--shadow-card);
}
.gl-hero h2{ margin:0 0 4px; font-size:19px; }
.gl-hero p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.gl-seg{ display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--border-soft); }
.gl-seg-btn{
  border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:700;
  padding:8px 16px; border-radius:999px; cursor:pointer; transition:.2s;
}
.gl-seg-btn.active{ background:var(--primary); color:#fff; box-shadow:0 0 14px rgba(139,92,246,.55); }
.gl-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.gl-btn{
  border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text);
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:12px; cursor:pointer; transition:.2s;
}
.gl-btn:hover{ background:rgba(255,255,255,.1); }
.gl-btn-ok{ background:var(--primary); border-color:transparent; color:#fff; box-shadow:0 0 12px rgba(139,92,246,.45); }
.gl-btn-ghost{ background:transparent; }
.gl-btn-no{ color:#FB7185; border-color:rgba(251,113,133,.3); }
.gl-btn-no:hover{ background:rgba(251,113,133,.12); }

.gl-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.gl-card{
  padding:16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:8px; transition:.2s;
}
.gl-card:hover{ border-color:rgba(139,92,246,.5); box-shadow:0 0 20px rgba(139,92,246,.25); }
.gl-card-price{ font-size:17px; font-weight:800; }
.gl-card-title{ font-size:13.5px; font-weight:700; }
.gl-card-sub{ font-size:11.5px; color:var(--text-muted); }
.gl-card-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

.gl-list{ display:flex; flex-direction:column; gap:8px; }
.gl-row{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.gl-row-main{ flex:1; min-width:0; }
.gl-row-title{ font-size:13.5px; font-weight:700; display:block; }
.gl-row-sub{ font-size:11.5px; color:var(--text-muted); }
.gl-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gl-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; background:var(--c,#8B5CF6); box-shadow:0 0 10px var(--c,#8B5CF6);
}
.gl-pill{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:20px; width:fit-content; }
.gl-pill-ok{ color:#34D399; background:rgba(52,211,153,.14); }
.gl-pill-no{ color:#FB7185; background:rgba(251,113,133,.14); }
.gl-pill-mid{ color:#FBBF24; background:rgba(251,191,36,.14); }
.gl-row-wrap{ border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; }
.gl-row-wrap .gl-row{ border:none; backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; border-radius:0; }
.gl-row-amount{ font-size:13px; font-weight:800; }
.gl-row-actions{ display:flex; gap:8px; padding:0 14px 12px; margin-top:-4px; flex-wrap:wrap; }
.gl-search{ width:100%; border:1px solid var(--border); border-radius:999px; padding:10px 16px; background:var(--surface);
  color:var(--text); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.gl-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.35); }

/* ---------------------------------------------- shared page kit: cyberpunk (cyb-) --- */
.cyb-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--radius); margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card);
}
.cyb-hero h2{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; font-size:16px; margin:0 0 4px; }
.cyb-hero p{ margin:0; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }
.cyb-seg{ display:flex; gap:2px; padding:3px; border-radius:var(--radius-xs); background:var(--surface-2); border:1px solid var(--border-soft); }
.cyb-seg-btn{
  border:none; background:transparent; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase;
  font-size:11px; letter-spacing:.04em; font-weight:700; padding:7px 14px; border-radius:2px; cursor:pointer; transition:.15s;
}
.cyb-seg-btn.active{ background:var(--primary); color:var(--primary-ink); box-shadow:0 0 14px rgba(0,255,156,.5); }
.cyb-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.cyb-btn{
  border:1px solid var(--border); background:transparent; color:var(--text); font-family:var(--font-mono); text-transform:uppercase;
  font-size:11px; font-weight:700; letter-spacing:.03em; padding:7px 14px; border-radius:2px; cursor:pointer; transition:.15s;
}
.cyb-btn:hover{ border-color:var(--primary); color:var(--primary); }
.cyb-btn-ok{ background:var(--primary); color:var(--primary-ink); border-color:transparent; box-shadow:0 0 12px rgba(0,255,156,.4); }
.cyb-btn-ghost{ background:transparent; }
.cyb-btn-no{ color:var(--rose); border-color:rgba(255,46,91,.4); }
.cyb-btn-no:hover{ background:rgba(255,46,91,.1); color:var(--rose); }

.cyb-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.cyb-card{
  padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:8px; transition:.15s;
}
.cyb-card:hover{ border-color:var(--primary); box-shadow:0 0 20px rgba(0,255,156,.25); }

.cyb-list{ display:flex; flex-direction:column; gap:8px; }
.cyb-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); }
.cyb-row-main{ flex:1; min-width:0; }
.cyb-row-title{ font-size:13px; font-weight:700; display:block; }
.cyb-row-sub{ font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.cyb-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cyb-avatar{
  width:34px; height:34px; border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:var(--c,#00FF9C); background:rgba(0,255,156,.08); border:1px solid var(--c,#00FF9C);
  font-family:var(--font-mono); text-shadow:0 0 8px var(--c,#00FF9C);
}
.cyb-pill{ font-size:10px; font-weight:700; padding:3px 10px; border-radius:2px; width:fit-content; font-family:var(--font-mono); text-transform:uppercase; border:1px solid currentColor; }
.cyb-pill-ok{ color:var(--primary); background:rgba(0,255,156,.1); }
.cyb-pill-no{ color:var(--rose); background:rgba(255,46,91,.1); }
.cyb-pill-mid{ color:var(--amber); background:rgba(198,255,0,.1); }
.cyb-row-wrap{ border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.cyb-row-wrap .cyb-row{ border:none; background:transparent; border-radius:0; }
.cyb-row-amount{ font-size:13px; font-weight:800; font-family:var(--font-mono); }
.cyb-row-actions{ display:flex; gap:8px; padding:0 14px 12px; margin-top:-4px; flex-wrap:wrap; }
.cyb-search{ width:100%; border:1px solid var(--border); border-radius:var(--radius-xs); padding:10px 16px; background:var(--surface-2);
  color:var(--text); font-family:var(--font-mono); }
.cyb-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,255,156,.25); border-color:var(--primary); }

/* ---------------------------------------------- shared page kit: clay (cly-) --- */
.cly-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 22px; border-radius:var(--radius); margin-bottom:16px;
  background:linear-gradient(135deg,#FFF7ED,#FFEDD5); border:1.5px solid var(--border-soft); box-shadow:var(--shadow-card);
}
.cly-hero h2{ margin:0 0 4px; font-size:18px; font-weight:800; }
.cly-hero p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.cly-seg{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--border-soft); }
.cly-seg-btn{ border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; transition:.2s; }
.cly-seg-btn.active{ background:linear-gradient(135deg,#F97316,#FB923C); color:#fff; box-shadow:0 4px 12px rgba(249,115,22,.35); }
.cly-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.cly-btn{ border:1.5px solid var(--border-soft); background:var(--surface); color:var(--text); font-size:12px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; transition:.2s; }
.cly-btn:hover{ box-shadow:var(--shadow-card); }
.cly-btn-ok{ background:linear-gradient(135deg,#F97316,#FB923C); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(249,115,22,.3); }
.cly-btn-ghost{ background:transparent; }
.cly-btn-no{ color:#DC5A2E; border-color:#FBCBA6; }
.cly-btn-no:hover{ background:rgba(251,113,133,.1); }

.cly-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.cly-card{ padding:18px; border-radius:var(--radius-sm); background:var(--surface); border:1.5px solid var(--border-soft);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:8px; transition:.2s; }
.cly-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(249,115,22,.16); }

.cly-list{ display:flex; flex-direction:column; gap:10px; }
.cly-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--radius-sm); background:var(--surface); border:1.5px solid var(--border-soft); box-shadow:var(--shadow-card); }
.cly-row-main{ flex:1; min-width:0; }
.cly-row-title{ font-size:13.5px; font-weight:800; display:block; }
.cly-row-sub{ font-size:11.5px; color:var(--text-muted); }
.cly-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cly-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; background:var(--c,#F97316); box-shadow:0 4px 10px color-mix(in srgb, var(--c,#F97316) 45%, transparent); }
.cly-pill{ font-size:10.5px; font-weight:700; padding:4px 12px; border-radius:999px; width:fit-content; }
.cly-pill-ok{ color:#0D8A5A; background:rgba(16,185,129,.16); }
.cly-pill-no{ color:#C2410C; background:rgba(251,113,133,.16); }
.cly-pill-mid{ color:#B45309; background:rgba(251,191,36,.18); }
.cly-row-wrap{ border-radius:var(--radius-sm); background:var(--surface); border:1.5px solid var(--border-soft); box-shadow:var(--shadow-card); overflow:hidden; }
.cly-row-wrap .cly-row{ border:none; box-shadow:none; border-radius:0; }
.cly-row-amount{ font-size:13.5px; font-weight:800; }
.cly-row-actions{ display:flex; gap:8px; padding:0 16px 14px; margin-top:-4px; flex-wrap:wrap; }
.cly-search{ width:100%; border:1.5px solid var(--border-soft); border-radius:999px; padding:11px 18px; background:var(--surface); color:var(--text); }
.cly-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(249,115,22,.22); }

/* ---------------------------------------------- shared page kit: paper (ppr-) --- */
.ppr-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--radius); margin-bottom:16px;
  background:#fff; border:1px solid var(--border); box-shadow:none;
}
.ppr-hero h2{ margin:0 0 4px; font-size:17px; font-weight:900; letter-spacing:-.01em; }
.ppr-hero p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.ppr-seg{ display:flex; gap:2px; padding:3px; border-radius:6px; background:var(--bg-2); border:1px solid var(--border-soft); }
.ppr-seg-btn{ border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:700; padding:7px 15px; border-radius:4px; cursor:pointer; transition:.15s; }
.ppr-seg-btn.active{ background:var(--primary); color:var(--primary-ink); }
.ppr-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.ppr-btn{ border:1px solid var(--border); background:#fff; color:var(--text); font-size:12px; font-weight:600; padding:7px 14px; border-radius:6px; cursor:pointer; transition:.15s; }
.ppr-btn:hover{ border-color:var(--text-dim); }
.ppr-btn-ok{ background:var(--primary); border-color:transparent; color:#fff; }
.ppr-btn-ghost{ background:transparent; }
.ppr-btn-no{ color:var(--rose); border-color:#E7C7C7; }
.ppr-btn-no:hover{ background:#FBEAEA; }

.ppr-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.ppr-card{ padding:16px; border-radius:var(--radius); background:#fff; border:1px solid var(--border); box-shadow:none; display:flex; flex-direction:column; gap:8px; transition:.15s; }
.ppr-card:hover{ border-color:var(--text-dim); }

.ppr-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.ppr-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border-soft); }
.ppr-row:last-child{ border-bottom:none; }
.ppr-row-main{ flex:1; min-width:0; }
.ppr-row-title{ font-size:13px; font-weight:700; display:block; }
.ppr-row-sub{ font-size:11.5px; color:var(--text-muted); }
.ppr-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ppr-avatar{ width:32px; height:32px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12.5px; color:var(--c,#111827); background:transparent; border:1px solid var(--c,#111827); }
.ppr-pill{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:4px; width:fit-content; border:1px solid currentColor; background:transparent; }
.ppr-pill-ok{ color:var(--emerald); }
.ppr-pill-no{ color:var(--rose); }
.ppr-pill-mid{ color:var(--amber); }
.ppr-row-wrap{ border-radius:var(--radius); background:#fff; border:1px solid var(--border); overflow:hidden; }
.ppr-row-wrap .ppr-row{ border:none; border-radius:0; }
.ppr-row-amount{ font-size:13px; font-weight:800; }
.ppr-row-actions{ display:flex; gap:8px; padding:0 16px 12px; margin-top:-4px; flex-wrap:wrap; }
.ppr-search{ width:100%; border:1px solid var(--border); border-radius:6px; padding:10px 16px; background:#fff; color:var(--text); }
.ppr-search:focus{ outline:none; border-color:var(--text-dim); }

/* ---------------------------------------------- shared page kit: obsidian (obk-) --- */
.obk-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--radius); margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); box-shadow:none;
}
.obk-hero h2{ margin:0 0 4px; font-size:16px; font-family:var(--font-mono); }
.obk-hero p{ margin:0; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }
.obk-seg{ display:flex; gap:2px; padding:3px; border-radius:var(--radius-xs); background:var(--surface-2); border:1px solid var(--border); }
.obk-seg-btn{ border:none; background:transparent; color:var(--text-muted); font-family:var(--font-mono); font-size:11.5px; padding:7px 14px; border-radius:2px; cursor:pointer; transition:.15s; }
.obk-seg-btn.active{ background:var(--emerald); color:#000; font-weight:800; }
.obk-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.obk-btn{ border:1px solid var(--border); background:transparent; color:var(--text); font-family:var(--font-mono); font-size:11.5px; padding:7px 14px; border-radius:var(--radius-xs); cursor:pointer; transition:.15s; }
.obk-btn:hover{ border-color:var(--emerald); color:var(--emerald); }
.obk-btn-ok{ background:var(--emerald); color:#000; border-color:var(--emerald); font-weight:800; }
.obk-btn-ghost{ background:transparent; }
.obk-btn-no{ color:var(--rose); border-color:var(--border); }
.obk-btn-no:hover{ border-color:var(--rose); }

.obk-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.obk-card{ padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); box-shadow:none; display:flex; flex-direction:column; gap:8px; }
.obk-card:hover{ border-color:var(--emerald); }

.obk-list{ display:flex; flex-direction:column; gap:6px; }
.obk-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-xs); background:var(--surface); border:1px solid var(--border); }
.obk-row-main{ flex:1; min-width:0; }
.obk-row-title{ font-size:12.5px; font-weight:700; display:block; }
.obk-row-sub{ font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.obk-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.obk-avatar{ width:30px; height:30px; border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:var(--c,#0AFF6B); background:var(--surface-2); border:1px solid var(--c,#0AFF6B); font-family:var(--font-mono); }
.obk-pill{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:2px; width:fit-content; font-family:var(--font-mono); border:1px solid currentColor; background:transparent; }
.obk-pill-ok{ color:var(--emerald); }
.obk-pill-no{ color:var(--rose); }
.obk-pill-mid{ color:var(--amber); }
.obk-row-wrap{ border-radius:var(--radius-xs); background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.obk-row-wrap .obk-row{ border:none; border-radius:0; }
.obk-row-amount{ font-size:12.5px; font-weight:800; font-family:var(--font-mono); }
.obk-row-actions{ display:flex; gap:8px; padding:0 14px 12px; margin-top:-4px; flex-wrap:wrap; }
.obk-search{ width:100%; border:1px solid var(--border); border-radius:var(--radius-xs); padding:10px 16px; background:var(--surface-2); color:var(--text); font-family:var(--font-mono); }
.obk-search:focus{ outline:none; border-color:var(--emerald); }

/* ---------------------------------------------- shared page kit: warp (wrp-) --- */
.wrp-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 22px; border-radius:var(--radius); margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border-soft); box-shadow:var(--shadow-card);
}
.wrp-hero h2{ margin:0 0 4px; font-size:18px; font-family:var(--font-display); }
.wrp-hero p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.wrp-seg{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-soft); }
.wrp-seg-btn{ border:none; background:transparent; color:var(--text-muted); font-family:var(--font-display); font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:999px; cursor:pointer; transition:.2s; }
.wrp-seg-btn.active{ background:var(--primary); color:#fff; box-shadow:0 0 14px rgba(124,92,255,.55); }
.wrp-toolbar{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }

.wrp-btn{ border:1px solid var(--border-soft); background:var(--surface-2); color:var(--text); font-family:var(--font-display); font-size:12px; font-weight:600; padding:7px 15px; border-radius:var(--radius-xs); cursor:pointer; transition:.2s; }
.wrp-btn:hover{ border-color:var(--primary); }
.wrp-btn-ok{ background:var(--primary); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(124,92,255,.4); }
.wrp-btn-ghost{ background:transparent; }
.wrp-btn-no{ color:var(--rose); border-color:rgba(255,111,145,.3); }
.wrp-btn-no:hover{ background:rgba(255,111,145,.1); }

.wrp-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.wrp-card{ padding:16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:8px; transition:.2s; }
.wrp-card:hover{ border-color:var(--primary); box-shadow:0 0 24px rgba(124,92,255,.3); transform:translateY(-2px); }

.wrp-list{ display:flex; flex-direction:column; gap:8px; }
.wrp-row{ display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-soft); }
.wrp-row-main{ flex:1; min-width:0; }
.wrp-row-title{ font-size:13.5px; font-weight:700; display:block; }
.wrp-row-sub{ font-size:11.5px; color:var(--text-muted); }
.wrp-row-trail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wrp-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; background:var(--c,#7C5CFF); box-shadow:0 0 12px color-mix(in srgb, var(--c,#7C5CFF) 55%, transparent); }
.wrp-pill{ font-size:10.5px; font-weight:700; padding:3px 11px; border-radius:20px; width:fit-content; }
.wrp-pill-ok{ color:#3FE0C0; background:rgba(63,224,192,.14); }
.wrp-pill-no{ color:#FF6F91; background:rgba(255,111,145,.14); }
.wrp-pill-mid{ color:#FFB454; background:rgba(255,180,84,.14); }
.wrp-row-wrap{ border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); overflow:hidden; }
.wrp-row-wrap .wrp-row{ border:none; box-shadow:none; border-radius:0; }
.wrp-row-amount{ font-size:13px; font-weight:800; font-family:var(--font-display); }
.wrp-row-actions{ display:flex; gap:8px; padding:0 15px 13px; margin-top:-4px; flex-wrap:wrap; }
.wrp-search{ width:100%; border:1px solid var(--border-soft); border-radius:999px; padding:10px 16px; background:var(--surface-2); color:var(--text); }
.wrp-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(124,92,255,.3); border-color:var(--primary); }
@keyframes cpPulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ------------------------------------------------- cyberpunk dashboard --- */
.cp-hero{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:22px 24px;
  background:var(--surface); border:1px solid var(--border-soft); margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cp-tag{ font-family:var(--font-mono); font-size:11px; color:var(--primary); letter-spacing:.03em; }
.cp-glitch{ position:relative; font-size:20px; font-weight:700; margin-top:6px; color:var(--text); }
.cp-glitch::before, .cp-glitch::after{
  content:attr(data-text); position:absolute; inset:0; overflow:hidden; opacity:.75;
}
.cp-glitch::before{ color:#FF2E9A; animation:cpGlitch1 3.4s infinite linear; clip-path:inset(0 0 60% 0); }
.cp-glitch::after{ color:#00E5FF; animation:cpGlitch2 4.1s infinite linear; clip-path:inset(60% 0 0 0); }
@keyframes cpGlitch1{ 0%,92%,100%{ transform:translate(0,0); } 93%{ transform:translate(-2px,-1px); } 95%{ transform:translate(2px,1px); } }
@keyframes cpGlitch2{ 0%,90%,100%{ transform:translate(0,0); } 91%{ transform:translate(2px,1px); } 94%{ transform:translate(-2px,0); } }
.cp-hero-text p{ color:var(--text-muted); font-size:12.5px; margin-top:8px; font-family:var(--font-mono); }
.cp-radar{ position:relative; width:110px; height:110px; flex-shrink:0; }
.cp-radar svg{ width:100%; height:100%; }
.cp-radar-ring{ fill:none; stroke:rgba(0,255,156,.28); stroke-width:1; }
.cp-radar-cross{ stroke:rgba(0,255,156,.16); stroke-width:1; }
.cp-radar-sweep{ stroke:var(--primary); stroke-width:2; transform-origin:60px 60px; animation:cpRadarSpin 3s linear infinite; filter:drop-shadow(0 0 6px var(--primary)); }
@keyframes cpRadarSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.cp-radar-blip{ fill:#FF2E9A; animation:cpBlip 2.4s ease-in-out infinite; filter:drop-shadow(0 0 4px #FF2E9A); }
@keyframes cpBlip{ 0%,100%{ opacity:.15;} 50%{ opacity:1;} }
.cp-radar-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; color:var(--text-dim); letter-spacing:.08em;
}

.cp-panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px 18px; }
.cp-panel-head{
  display:flex; align-items:center; gap:6px; margin-bottom:12px; font-family:var(--font-mono);
  font-size:12.5px; color:var(--primary); text-transform:uppercase; letter-spacing:.03em;
}
.cp-cursor{ width:7px; height:13px; background:var(--primary); animation:cpBlinkCursor 1s step-end infinite; box-shadow:0 0 6px var(--primary); }
@keyframes cpBlinkCursor{ 0%,49%{ opacity:1;} 50%,100%{ opacity:0;} }

.cp-stat{ display:flex; flex-direction:column; gap:8px; }
.cp-stat-label{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.cp-stat-val{ font-size:24px; font-weight:700; color:var(--text); }
.cp-stat-tag{ width:fit-content; font-family:var(--font-mono); font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:2px; }
.cp-stat-tag.up{ color:#00FF9C; background:rgba(0,255,156,.12); border:1px solid rgba(0,255,156,.3); }
.cp-stat-tag.down{ color:#FF2E5B; background:rgba(255,46,91,.12); border:1px solid rgba(255,46,91,.3); }

.cp-chart-wrap{ position:relative; height:150px; }
.cp-fog-svg{ width:100%; height:100%; }
.cp-scanline{
  position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(0,255,156,.7), transparent);
  animation:cpScan 3.2s linear infinite; pointer-events:none;
}
@keyframes cpScan{ 0%{ top:0; opacity:0;} 10%{ opacity:1;} 90%{ opacity:1;} 100%{ top:100%; opacity:0;} }

.cp-gauges{ display:flex; justify-content:space-around; gap:10px; flex-wrap:wrap; padding-top:4px; }
.cp-gauge{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.cp-gauge svg{ width:82px; height:82px; }
.cp-gauge-val{ position:absolute; top:0; width:82px; height:82px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--text); }
.cp-gauge-val small{ font-size:9px; margin-inline-start:1px; }
.cp-gauge-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); text-transform:uppercase; }

.cp-bars{ display:flex; flex-direction:column; gap:10px; }
.cp-bar-row{ display:flex; align-items:center; gap:10px; }
.cp-bar-name{ flex:0 0 90px; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-bar-track{ flex:1; height:8px; background:rgba(0,255,156,.08); border:1px solid var(--border-soft); border-radius:2px; overflow:hidden; }
.cp-bar-fill{ display:block; height:100%; width:0; background:var(--c,#00FF9C); box-shadow:0 0 8px var(--c,#00FF9C); transition:width 1s cubic-bezier(.16,1,.3,1); }
.cp-bar-val{ flex:0 0 auto; font-size:11.5px; color:var(--text); }

.cp-log{ display:flex; flex-direction:column; }
.cp-log-row{
  display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border-soft);
  font-family:var(--font-mono); font-size:12.5px;
}
.cp-log-row:last-child{ border-bottom:none; }
.cp-log-idx{ color:var(--primary); }
.cp-log-name{ flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-log-val{ color:var(--text-muted); }

.cp-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cp-res-item{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.cp-res-track{ height:8px; background:rgba(0,255,156,.08); border:1px solid var(--border-soft); border-radius:2px; overflow:hidden; }
.cp-res-fill{ display:block; height:100%; width:0; transition:width 1s cubic-bezier(.16,1,.3,1); }
.cp-res-item b{ color:var(--text); font-size:13px; }
@media (max-width:640px){ .cp-res-grid{ grid-template-columns:1fr; } }
/* clay dashboard */
.clay-hero{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background: linear-gradient(135deg,#FFF7ED 0%,#FFEDD5 50%,#FED7AA 100%); border:1.5px solid #FED7AA; border-radius:28px; padding:26px 28px; margin-bottom:16px; box-shadow: 0 8px 24px rgba(249,115,22,.10); }
.clay-hero h2{ font-size:22px; font-weight:900; color:#431407; }
.clay-hero p{ color:#9A6B4D; font-size:13px; margin-top:6px; }
.clay-hero-orb{ width:90px; height:90px; border-radius:50%; flex-shrink:0; background: radial-gradient(circle at 30% 30%, #FDBA74, #F97316 55%, #EA580C); box-shadow: 0 12px 32px rgba(249,115,22,.35), inset 0 2px 12px rgba(255,255,255,.5); position:relative; }
.clay-hero-orb::after{ content:''; position:absolute; top:16px; left:20px; width:22px; height:22px; border-radius:50%; background: rgba(255,255,255,.45); filter: blur(1px); }
.clay-stat{ display:flex; flex-direction:column; gap:8px; border-radius:24px; }
.clay-stat-label{ font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.clay-stat-val{ font-size:28px; font-weight:900; color:var(--text); letter-spacing:-.02em; }
.clay-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:4px 12px; border-radius:999px; width:fit-content; }
.clay-pill.up{ background:#FEF3C7; color:#92400E; border:1.5px solid #FDE68A; }
.clay-pill.down{ background:#FEE2E2; color:#991B1B; border:1.5px solid #FECACA; }
.clay-card-head{ font-size:13px; font-weight:800; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.clay-card-head::before{ content:''; width:4px; height:16px; border-radius:999px; background: var(--primary); flex-shrink:0; }
.clay-bars{ display:flex; align-items:flex-end; gap:5px; height:110px; }
.clay-bar{ flex:1; border-radius:999px 999px 6px 6px; min-height:4px; transition: height 1s cubic-bezier(.16,1,.3,1); max-width:32px; }
.clay-donut-wrap{ display:flex; align-items:center; gap:18px; }
.clay-donut-wrap svg{ width:140px; height:140px; flex-shrink:0; }
.clay-legend{ display:flex; flex-direction:column; gap:8px; flex:1; }
.clay-legend-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.clay-legend-item i{ width:12px; height:12px; border-radius:999px; flex-shrink:0; }
.clay-legend-item b{ margin-inline-start:auto; font-size:12px; }
.clay-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.clay-row:last-child{ border-bottom:none; }
.clay-row-num{ width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; flex-shrink:0; }
.clay-row-name{ flex:1; font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clay-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .clay-res-grid{ grid-template-columns:1fr; } }
.clay-res-card{ border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:8px; border:1.5px solid var(--border-soft); }
.clay-res-track{ height:10px; border-radius:999px; background: var(--bg-2); overflow:hidden; }
.clay-res-fill{ display:block; height:100%; border-radius:999px; width:0; transition: width 1s cubic-bezier(.16,1,.3,1); }
/* paper dashboard */
.paper-hero{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:28px 30px; margin-bottom:16px; }
.paper-hero-rule{ height:3px; background: var(--primary); border-radius:2px; margin-top:14px; }
.paper-hero h2{ font-size:26px; font-weight:900; letter-spacing:-.02em; color:var(--text); }
.paper-hero p{ font-size:12.5px; color:var(--text-muted); margin-top:8px; }
.paper-hero-meta{ display:flex; gap:16px; margin-top:12px; font-size:11px; color:var(--text-dim); font-family: var(--font-mono); }
.paper-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .paper-stats{ grid-template-columns:repeat(2,1fr); } }
.paper-stat{ background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:20px 18px; display:flex; flex-direction:column; gap:6px; }
.paper-stat-label{ font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text-muted); }
.paper-stat-val{ font-size:32px; font-weight:900; letter-spacing:-.03em; color:var(--text); font-family: var(--font-mono); }
.paper-stat-sub{ font-size:11.5px; color:var(--text-muted); border-top:1px solid var(--border-soft); padding-top:8px; margin-top:2px; }
.paper-delta{ font-size:11px; font-weight:700; font-family: var(--font-mono); }
.paper-delta.up{ color: var(--emerald); } .paper-delta.down{ color: var(--rose); }
.paper-panel{ background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:18px 20px; }
.paper-panel-head{ font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border-soft); }
.paper-spark{ display:flex; align-items:flex-end; gap:3px; height:80px; }
.paper-spark i{ flex:1; background: var(--primary); border-radius:1px 1px 0 0; min-height:2px; transition: height .9s cubic-bezier(.16,1,.3,1); opacity:.85; max-width:28px; }
.paper-hairline{ height:1px; background: var(--border-soft); margin:14px 0; }
.paper-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
.paper-row:last-child{ border-bottom:none; }
.paper-row-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.paper-row-bar{ flex:0 0 90px; height:3px; background: var(--bg-2); border-radius:2px; overflow:hidden; }
.paper-row-fill{ display:block; height:100%; width:0; background: var(--primary); transition: width 1s cubic-bezier(.16,1,.3,1); }
.paper-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .paper-res-grid{ grid-template-columns:1fr; } }
.paper-res-card{ background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.paper-res-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.paper-res-val{ font-size:22px; font-weight:900; font-family: var(--font-mono); }
/* obsidian dashboard */
.obs-hero{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background: var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px 22px; margin-bottom:14px; border-inline-start:3px solid var(--emerald); }
.obs-hero h2{ font-family: var(--font-mono); font-size:16px; font-weight:800; letter-spacing:-.01em; }
.obs-hero p{ font-family: var(--font-mono); font-size:11px; color:var(--text-muted); margin-top:6px; }
.obs-hero-tag{ font-family: var(--font-mono); font-size:10px; color: var(--emerald); letter-spacing:.08em; }
.obs-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .obs-grid4{ grid-template-columns:repeat(2,1fr); } }
.obs-stat{ background: var(--surface); border:1px solid var(--border); border-radius:4px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; border-inline-start:2px solid var(--border); }
.obs-stat.accent{ border-inline-start-color: var(--emerald); }
.obs-stat-label{ font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.obs-stat-val{ font-family: var(--font-mono); font-size:22px; font-weight:800; letter-spacing:-.02em; }
.obs-stat-sub{ font-family: var(--font-mono); font-size:10.5px; color:var(--text-dim); }
.obs-panel{ background: var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px 18px; }
.obs-panel-head{ font-family: var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.obs-panel-head::before{ content:'▸'; color: var(--emerald); }
.obs-bars{ display:flex; align-items:flex-end; gap:4px; height:100px; }
.obs-bar{ flex:1; background: var(--emerald); border-radius:1px 1px 0 0; min-height:2px; transition: height 1s cubic-bezier(.16,1,.3,1); max-width:28px; opacity:.9; }
.obs-table{ width:100%; font-family: var(--font-mono); font-size:12px; }
.obs-table th{ text-align:right; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; border-bottom:1px solid var(--border); }
.obs-table td{ padding:9px 10px; border-bottom:1px solid var(--border-soft); }
.obs-table tr:hover{ background: var(--surface-hi); }
.obs-meter{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft); }
.obs-meter:last-child{ border-bottom:none; }
.obs-meter-label{ flex:0 0 100px; font-family: var(--font-mono); font-size:11px; color:var(--text-muted); }
.obs-meter-track{ flex:1; height:4px; background: var(--surface-2); border-radius:2px; overflow:hidden; }
.obs-meter-fill{ display:block; height:100%; width:0; border-radius:2px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.obs-meter-val{ font-family: var(--font-mono); font-size:11px; font-weight:700; min-width:36px; text-align:left; }
.obs-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .obs-res-grid{ grid-template-columns:1fr; } }
.obs-res-card{ background: var(--surface); border:1px solid var(--border); border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.obs-res-label{ font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.obs-res-val{ font-family: var(--font-mono); font-size:18px; font-weight:800; }

/* ====================================================== world map === */
.sv-map-card{ margin-top:16px; }
.sv-map-head{ margin-bottom:6px; }
.sv-map-head h3{ display:flex; align-items:center; gap:8px; }
.sv-map-actions{ display:flex; align-items:center; gap:10px; }
.sv-map-updated{ font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.sv-map-card > .card-sub{ margin:-6px 0 12px; display:block; }

.sv-map-linkrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.sv-map-linkrow .input{ flex:1 1 240px; min-width:0; }

.sv-map-checkrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; font-size:13px; color:var(--text-muted); }
.sv-map-checkrow label{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sv-map-checkrow .input-sm{ padding:4px 6px; text-align:center; }

.sv-map-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

.sv-map-wrap{
  position:relative; width:100%; aspect-ratio:2/1; border-radius:var(--radius-sm);
  background:var(--bg-2); border:1px solid var(--border-soft); overflow:hidden;
}
.sv-map-wrap svg{ width:100%; height:100%; display:block; }
.sv-map-grid line{ stroke:var(--border); stroke-width:1; opacity:.55; vector-effect:non-scaling-stroke; }
.sv-map-grid line.sv-map-meridian, .sv-map-grid line.sv-map-equator{ opacity:.9; stroke-width:1.3; }
.sv-map-graticule-path{ fill:none; stroke:var(--border); stroke-width:1; opacity:.5; vector-effect:non-scaling-stroke; }
.sv-map-land-poly{
  fill:var(--primary); fill-opacity:.16; stroke:var(--primary); stroke-opacity:.5; stroke-width:1.2;
  stroke-linejoin:round; vector-effect:non-scaling-stroke; fill-rule:evenodd;
}

.sv-map-pin{ cursor:pointer; color:var(--text-dim); }
.sv-map-pin.online{ color:var(--emerald); }
.sv-map-pin.offline{ color:var(--rose); }
.sv-map-pin.unknown{ color:var(--amber); }
.sv-map-dot{ fill:currentColor; filter:drop-shadow(0 0 4px currentColor); transition:r .15s; }
.sv-map-pin:hover .sv-map-dot{ filter:drop-shadow(0 0 8px currentColor); }
.sv-map-pulse{
  fill:none; stroke:currentColor; stroke-width:1.4; opacity:.55;
  transform-box:fill-box; transform-origin:center; animation:svMapPulse 2.4s ease-out infinite;
}
@keyframes svMapPulse{
  0%{ transform:scale(.35); opacity:.6; }
  100%{ transform:scale(1.7); opacity:0; }
}

.sv-map-tooltip{
  position:absolute; z-index:5; min-width:190px; max-width:230px; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop); font-size:12px; pointer-events:none;
}
.sv-tt-head{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:13px; }
.sv-tt-head b{ color:var(--text); }
.sv-tt-country{ color:var(--text-muted); font-size:11px; }
.sv-tt-name{ color:var(--text); font-size:12px; margin-bottom:4px; word-break:break-word; }
.sv-tt-ip{ color:var(--text-muted); margin-bottom:4px; font-size:11.5px; }
.sv-tt-row{ margin-bottom:6px; color:var(--text-muted); }
.sv-tt-status-online{ color:var(--emerald); }
.sv-tt-status-offline{ color:var(--rose); }
.sv-tt-status-unknown{ color:var(--amber); }
.sv-tt-protocols{ display:flex; flex-wrap:wrap; gap:4px; }
.sv-tt-source{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); color:var(--text-muted); font-size:10.5px; }

.sv-map-empty, .sv-map-loading{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px; color:var(--text-muted); font-size:13px; background:var(--bg-2);
}
.sv-map-spinner{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2.5px solid var(--border); border-top-color:var(--primary); animation:svMapSpin .8s linear infinite;
}
@keyframes svMapSpin{ to{ transform:rotate(360deg); } }

.sv-map-legend{ display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.sv-map-legend .dot, .sv-map-list .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:5px; vertical-align:middle;
}
.dot.online{ background:var(--emerald); }
.dot.offline{ background:var(--rose); }
.dot.unknown{ background:var(--amber); }

.sv-map-list{ margin-top:12px; display:flex; flex-direction:column; gap:6px; max-height:270px; overflow-y:auto; }
.sv-map-list-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-xs);
  background:var(--surface-2); cursor:pointer; font-size:12.5px; transition:background .15s;
}
.sv-map-list-row:hover{ background:var(--surface-hi); }
.sv-ml-flag{ font-size:15px; }
.sv-ml-name{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.sv-ml-name small{ color:var(--text-muted); font-size:10.5px; }
.sv-ml-ip{ color:var(--text-muted); font-size:11px; }
.sv-ml-count{ color:var(--text); font-size:11.5px; flex-shrink:0; }

@media (max-width:640px){
  .sv-map-wrap{ aspect-ratio:2/1; }
  .sv-ml-ip{ display:none; }
}
@keyframes warpDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-30px,26px) scale(1.08); }
}
@keyframes warpPulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

@supports (animation-timeline: view()){
  @keyframes warpViewIn{
    from{ opacity:0; transform:translateY(30px) scale(.97); }
    to{ opacity:1; transform:none; }
  }
}

/* =================================================================
   حالت روشن/تیره برای همه‌ی تم‌ها — هر تم فقط متغیرهای رنگی رو برای
   حالت مقابلِ پیش‌فرض خودش override می‌کنه؛ شکل/فونت/گردی‌گوشه/افکت‌های
   خاص تم دست‌نخورده می‌مونه، فقط روشنایی سطوح و کنتراست متن عوض می‌شه.
================================================================= */

/* ---- Bento (پیش‌فرض روشن) → نسخه‌ی تیره ---- */
html[data-theme="bento"][data-mode="dark"]{
  --bg:#161618; --bg-2:#0F0F11; --surface:#1F1F22; --surface-2:#2A2A2E;
  --surface-hi:rgba(255,255,255,.04); --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.06);
  --text:#F2F2F5; --text-muted:#9A9AA2; --text-dim:#5C5C63;
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.4);
  --shadow-pop:0 20px 50px rgba(0,0,0,.55); --shadow-btn:0 2px 8px rgba(0,0,0,.35);
}

/* ---- Brutalist (پیش‌فرض روشن/کرم) → نسخه‌ی تیره؛ حاشیه‌های مشکی سفت
   سیگنیچر اصلیه، پس توی تیره به سفید تبدیل می‌شن تا دیده بشن ---- */
html[data-theme="brutalist"][data-mode="dark"]{
  --bg:#151515; --bg-2:#0E0E0E; --surface:#1E1E1E; --surface-2:#1E1E1E;
  --border:#F5F0DC; --border-soft:#F5F0DC; --text:#F5F0DC; --text-muted:#B8B4A0; --text-dim:#7A7768;
  --shadow-card:5px 5px 0 #F5F0DC; --shadow-pop:9px 9px 0 #F5F0DC; --shadow-btn:3px 3px 0 #F5F0DC;
  --focus-ring:0 0 0 3px #F5F0DC;
}
html[data-theme="brutalist"][data-mode="dark"] .card,
html[data-theme="brutalist"][data-mode="dark"] .login-card,
html[data-theme="brutalist"][data-mode="dark"] .modal{ border-color:#F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] .btn{ border-color:#F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] .btn:active{ box-shadow:0 0 0 #F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] .input, html[data-theme="brutalist"][data-mode="dark"] .field input{ border-color:#F5F0DC; background:var(--surface); color:var(--text); }
html[data-theme="brutalist"][data-mode="dark"] table,
html[data-theme="brutalist"][data-mode="dark"] thead th{ border-color:#F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] .topbar{ border-bottom-color:#F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] .topbar-clock{ border-color:#F5F0DC; }
html[data-theme="brutalist"][data-mode="dark"] #logout-btn{ background:#1E1E1E; color:var(--text); }
html[data-theme="brutalist"][data-mode="dark"] .me-avatar{ background:#F5F0DC; color:#000; border-color:#000; }

/* ===================================================================
   Cyberpunk theme — neon terminal / HUD. Single dark mode by design.
   Menu moves to a top command bar (not a side rail like bento/brutalist),
   flat surfaces are replaced with scanlined panels and neon accents.
=================================================================== */
html[data-theme="cyberpunk"]{
  --bg:#05050A; --bg-2:#0A0A14; --surface:#0B0E17; --surface-2:#111726;
  --surface-hi:rgba(0,255,194,.07); --border:rgba(0,255,194,.28); --border-soft:rgba(0,255,194,.14);
  --text:#D8FFF3; --text-muted:#7C93AE; --text-dim:#41546C;
  --primary:#FF2A6D; --primary-ink:#05050A; --cyan:#00FFF0; --amber:#FFD400; --emerald:#00FFC2; --rose:#FF2A6D;
  --accent-1:var(--primary); --accent-2:var(--cyan); --accent-3:var(--amber); --accent-4:var(--emerald);
  --violet:#B967FF; --fuchsia:#FF2A6D;
  --font-body:"Chakra Petch","Vazirmatn",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:3px; --radius-sm:2px; --radius-xs:2px;
  --shadow-card:0 0 0 1px rgba(0,255,194,.06), 0 10px 30px rgba(0,0,0,.5);
  --shadow-pop:0 0 70px rgba(255,42,109,.28); --shadow-btn:0 0 14px rgba(0,255,194,.3);
  --focus-ring:0 0 0 2px rgba(0,255,194,.55);
}
html[data-theme="cyberpunk"] body{
  background:
    repeating-linear-gradient(0deg, rgba(0,255,194,.025) 0px, rgba(0,255,194,.025) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,42,109,.14), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 10%, rgba(0,255,240,.10), transparent 60%),
    var(--bg);
}
html[data-theme="cyberpunk"] body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0px, transparent 1px, transparent 2px);
  animation:cp-scan 9s linear infinite;
}
@keyframes cp-scan{ 0%{ background-position:0 0; } 100%{ background-position:0 240px; } }
html[data-theme="cyberpunk"] *{ font-family:var(--font-body); }
html[data-theme="cyberpunk"] h1, html[data-theme="cyberpunk"] h2, html[data-theme="cyberpunk"] h3, html[data-theme="cyberpunk"] h4{
  text-transform:uppercase; letter-spacing:.03em;
}
html[data-theme="cyberpunk"] ::selection{ background:rgba(0,255,194,.3); color:#fff; }
html[data-theme="cyberpunk"] :focus-visible{ outline:2px solid var(--emerald); }

/* ---- brand / login ---- */
html[data-theme="cyberpunk"] .login-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  box-shadow:0 0 0 1px rgba(0,255,194,.08), 0 0 60px rgba(255,42,109,.15);
}
html[data-theme="cyberpunk"] .login-logo, html[data-theme="cyberpunk"] .brand-mark{
  border-radius:2px; background:var(--bg); border:1px solid var(--emerald); color:var(--emerald);
  box-shadow:0 0 14px rgba(0,255,194,.5);
}
html[data-theme="cyberpunk"] .login-brand h1{
  text-shadow:2px 0 var(--cyan), -2px 0 var(--primary); font-size:17px;
}
html[data-theme="cyberpunk"] .field span{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--emerald); }

/* ---- shared components ---- */
html[data-theme="cyberpunk"] .card, html[data-theme="cyberpunk"] .modal{
  border-radius:var(--radius); border:1px solid var(--border-soft); border-inline-start:3px solid var(--emerald);
  background:linear-gradient(180deg, rgba(0,255,194,.03), transparent 40%), var(--surface);
}
html[data-theme="cyberpunk"] .card-head h3::before{ content:'// '; color:var(--emerald); }
html[data-theme="cyberpunk"] .btn{
  border-radius:var(--radius-xs); text-transform:uppercase; font-size:12px; letter-spacing:.06em;
  font-family:var(--font-mono); border:1px solid var(--border); background:var(--surface-2);
}
html[data-theme="cyberpunk"] .btn:hover{ border-color:var(--emerald); box-shadow:0 0 12px rgba(0,255,194,.35); }
html[data-theme="cyberpunk"] .btn-primary{
  background:transparent; color:var(--primary); border-color:var(--primary);
  box-shadow:0 0 12px rgba(255,42,109,.35); text-shadow:0 0 8px rgba(255,42,109,.6);
}
html[data-theme="cyberpunk"] .btn-primary:hover{ background:rgba(255,42,109,.12); }
html[data-theme="cyberpunk"] .btn-danger{ background:transparent; border-color:var(--rose); color:var(--rose); }
html[data-theme="cyberpunk"] .field input, html[data-theme="cyberpunk"] .input, html[data-theme="cyberpunk"] select.input, html[data-theme="cyberpunk"] textarea.input{
  border-radius:var(--radius-xs); background:var(--bg-2); border:1px solid var(--border-soft); font-family:var(--font-mono);
}
html[data-theme="cyberpunk"] .field input:focus, html[data-theme="cyberpunk"] .input:focus{
  border-color:var(--emerald); box-shadow:0 0 0 3px rgba(0,255,194,.15);
}
html[data-theme="cyberpunk"] .badge{ border-radius:0; border:1px solid currentColor; background:transparent !important; font-family:var(--font-mono); text-transform:uppercase; }
html[data-theme="cyberpunk"] .badge::before{ display:none; }
html[data-theme="cyberpunk"] table{ font-family:var(--font-mono); font-size:12.5px; }
html[data-theme="cyberpunk"] thead th{ border-bottom:1px solid var(--border); color:var(--emerald); }
html[data-theme="cyberpunk"] tbody tr:hover{ background:var(--surface-hi); box-shadow:inset 3px 0 0 var(--emerald); }
html[data-theme="cyberpunk"] .tab-btn{ border-radius:var(--radius-xs); font-family:var(--font-mono); text-transform:uppercase; font-size:11.5px; border:1px solid var(--border-soft); }
html[data-theme="cyberpunk"] .tab-btn.active{ background:transparent; color:var(--emerald); border-color:var(--emerald); box-shadow:0 0 10px rgba(0,255,194,.35); }
html[data-theme="cyberpunk"] .modal-backdrop{ backdrop-filter:blur(2px); }
html[data-theme="cyberpunk"] .empty-state{ font-family:var(--font-mono); }
html[data-theme="cyberpunk"] .toast{ border-radius:var(--radius-xs); border:1px solid var(--border); font-family:var(--font-mono); box-shadow:0 0 16px rgba(0,255,194,.2); }
html[data-theme="cyberpunk"] .stat-card .value, html[data-theme="cyberpunk"] .topbar-clock{ font-family:var(--font-mono); }
html[data-theme="cyberpunk"] .topbar-clock{ border-radius:var(--radius-xs); border:1px solid var(--border-soft); }

/* ---- menu placement: top command bar instead of a side rail ---- */
@media (min-width:961px){
  html[data-theme="cyberpunk"] .app{ display:flex; flex-direction:column; min-height:100vh; }
  html[data-theme="cyberpunk"] .sidebar{
    position:sticky; top:0; z-index:15; width:100%; height:auto; flex-direction:row; align-items:center;
    padding:0 26px; gap:26px; border-left:none; border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, var(--bg-2), var(--bg));
  }
  html[data-theme="cyberpunk"] .sidebar-brand{ padding:14px 0; flex-shrink:0; }
  html[data-theme="cyberpunk"] .nav-tunnel{ flex:1; display:flex; align-items:stretch; overflow-x:auto; overflow-y:hidden; gap:2px; }
  html[data-theme="cyberpunk"] .nav-tunnel::-webkit-scrollbar{ height:4px; }
  html[data-theme="cyberpunk"] .nav-section{
    display:flex; align-items:center; margin:0; padding:0 12px; border-top:none; white-space:nowrap; font-size:9.5px;
  }
  html[data-theme="cyberpunk"] .nav-section:first-child{ padding-inline-start:0; }
  html[data-theme="cyberpunk"] .nav-item{
    flex-direction:column; gap:4px; padding:14px 13px; margin:0; white-space:nowrap; border-radius:0;
    border-bottom:2px solid transparent;
  }
  html[data-theme="cyberpunk"] .nav-item span:last-child{ font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; }
  html[data-theme="cyberpunk"] .nav-icon{ border-radius:0; background:transparent; }
  html[data-theme="cyberpunk"] .nav-item:hover{ background:var(--surface-hi); border-bottom-color:var(--border); }
  html[data-theme="cyberpunk"] .nav-item.active{
    color:var(--emerald); background:transparent; border-bottom-color:var(--emerald);
    text-shadow:0 0 10px rgba(0,255,194,.6);
  }
  html[data-theme="cyberpunk"] .nav-item.active .nav-icon{ color:var(--emerald); }
  html[data-theme="cyberpunk"] .sidebar-footer{
    flex-shrink:0; display:flex; align-items:center; gap:14px; border-top:none; padding:0; margin:0; width:auto;
  }
  html[data-theme="cyberpunk"] .me-card{ padding:0; }
  html[data-theme="cyberpunk"] .me-info{ display:flex; }
  html[data-theme="cyberpunk"] #logout-btn{ width:auto; }
  html[data-theme="cyberpunk"] #logout-btn span:last-child{ display:none; }
}
html[data-theme="cyberpunk"] .topbar{ border-bottom:1px solid var(--border-soft); background:transparent; }
html[data-theme="cyberpunk"] .topbar h2{ font-family:var(--font-mono); font-weight:700; }
html[data-theme="cyberpunk"] .topbar h2::before{ content:'>_ '; color:var(--emerald); }
html[data-theme="cyberpunk"] .live-dot{ background:var(--emerald); box-shadow:0 0 8px var(--emerald); }

/* ---- dashboard: cyberpunk ---- */
html[data-theme="cyberpunk"] .cp-hero{ margin-bottom:18px; }
html[data-theme="cyberpunk"] .cp-hero-line{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:6px; }
html[data-theme="cyberpunk"] .cp-prompt{ color:var(--emerald); }
html[data-theme="cyberpunk"] .cp-path{ color:var(--text-muted); }
html[data-theme="cyberpunk"] .cp-cmd{ color:var(--cyan); }
html[data-theme="cyberpunk"] .cp-hero h2{ font-size:22px; margin:0; text-shadow:0 0 12px rgba(0,255,194,.35); }
html[data-theme="cyberpunk"] .cp-cursor{ color:var(--emerald); animation:cp-blink 1s step-end infinite; }
@keyframes cp-blink{ 50%{ opacity:0; } }
html[data-theme="cyberpunk"] .cp-hero p{ color:var(--text-muted); font-size:12px; margin-top:4px; }
html[data-theme="cyberpunk"] .cp-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
html[data-theme="cyberpunk"] .cp-stat{
  background:var(--surface); border:1px solid var(--border-soft); border-inline-start:3px solid var(--cyan);
  border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
html[data-theme="cyberpunk"] .cp-stat-a{ border-inline-start-color:var(--primary); }
html[data-theme="cyberpunk"] .cp-stat-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); letter-spacing:.06em; }
html[data-theme="cyberpunk"] .cp-stat-val{ font-size:24px; font-weight:700; color:var(--text); }
html[data-theme="cyberpunk"] .cp-stat-tag{ font-family:var(--font-mono); font-size:11px; align-self:flex-start; padding:2px 8px; border:1px solid var(--border-soft); }
html[data-theme="cyberpunk"] .cp-stat-tag.up{ color:var(--emerald); border-color:var(--emerald); }
html[data-theme="cyberpunk"] .cp-stat-tag.down{ color:var(--rose); border-color:var(--rose); }
html[data-theme="cyberpunk"] .cp-panel{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px 18px;
}
html[data-theme="cyberpunk"] .cp-panel-head{
  font-family:var(--font-mono); font-size:11.5px; color:var(--emerald); letter-spacing:.05em; margin-bottom:12px;
  text-transform:uppercase; border-bottom:1px dashed var(--border-soft); padding-bottom:8px;
}
html[data-theme="cyberpunk"] .cp-trend{ width:100%; height:160px; display:block; }
html[data-theme="cyberpunk"] .cp-grid line{ stroke:var(--border-soft); stroke-width:1; }
html[data-theme="cyberpunk"] .cp-gauge-row{ display:flex; gap:22px; flex-wrap:wrap; justify-content:space-around; }
html[data-theme="cyberpunk"] .cp-gauge{ display:flex; flex-direction:column; align-items:center; gap:4px; width:110px; }
html[data-theme="cyberpunk"] .cp-gauge svg{ width:100px; height:100px; }
html[data-theme="cyberpunk"] .cp-gauge svg circle:first-child{ fill:none; stroke:var(--border-soft); stroke-width:8; }
html[data-theme="cyberpunk"] .cp-gauge-txt{ display:flex; flex-direction:column; align-items:center; margin-top:-64px; }
html[data-theme="cyberpunk"] .cp-gauge-txt b{ font-size:16px; }
html[data-theme="cyberpunk"] .cp-gauge-txt span{ font-size:9px; color:var(--text-muted); letter-spacing:.08em; }
html[data-theme="cyberpunk"] .cp-gauge-sub{ font-size:9.5px; color:var(--text-dim); margin-top:44px; }
html[data-theme="cyberpunk"] .cp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
html[data-theme="cyberpunk"] .cp-bar-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
html[data-theme="cyberpunk"] .cp-bar-label{ width:110px; flex-shrink:0; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="cyberpunk"] .cp-bar-track{ flex:1; height:6px; background:var(--surface-2); position:relative; overflow:hidden; }
html[data-theme="cyberpunk"] .cp-bar-fill{ position:absolute; inset:0; width:0; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:width 1s cubic-bezier(.16,1,.3,1); }
html[data-theme="cyberpunk"] .cp-bar-val{ font-size:11.5px; color:var(--text-muted); width:64px; text-align:end; flex-shrink:0; }
html[data-theme="cyberpunk"] .cp-list-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border-soft); }
html[data-theme="cyberpunk"] .cp-list-row:last-child{ border-bottom:none; }
html[data-theme="cyberpunk"] .cp-list-idx{ color:var(--primary); font-size:11px; width:20px; }
html[data-theme="cyberpunk"] .cp-list-name{ flex:1; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="cyberpunk"] .cp-list-val{ color:var(--emerald); font-size:12px; }

@media (max-width:960px){
  html[data-theme="cyberpunk"] .cp-stat-grid, html[data-theme="cyberpunk"] .cp-cols{ grid-template-columns:1fr; }
  html[data-theme="cyberpunk"] .cp-gauge-row{ gap:14px; }
}

/* ===================================================================
   Street Ops theme — open-world game HUD. Nav becomes a floating
   bottom dock; brand + account chips float in the top corners over
   the content, like an in-game HUD overlay. Single dark mode.
=================================================================== */
html[data-theme="streetops"]{
  --bg:#14161C; --bg-2:#0F1014; --surface:#1B1D24; --surface-2:#22252E;
  --surface-hi:rgba(255,176,32,.07); --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.06);
  --text:#F2F1EC; --text-muted:#9A9A9E; --text-dim:#5C5C60;
  --primary:#FFB020; --primary-ink:#14161C; --cyan:#22D3EE; --amber:#FFB020; --emerald:#8BC34A; --rose:#FF3B30;
  --accent-1:var(--primary); --accent-2:var(--cyan); --accent-3:var(--amber); --accent-4:var(--emerald);
  --violet:#8BC34A; --fuchsia:#FF3B30;
  --font-body:"Rajdhani","Vazirmatn",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:6px; --radius-sm:6px; --radius-xs:4px;
  --shadow-card:0 10px 26px rgba(0,0,0,.45); --shadow-pop:0 20px 60px rgba(0,0,0,.6); --shadow-btn:0 4px 12px rgba(0,0,0,.4);
  --focus-ring:0 0 0 2px rgba(255,176,32,.55);
}
html[data-theme="streetops"] body{
  background:
    radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(255,176,32,.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 100%, rgba(34,211,238,.08), transparent 60%),
    var(--bg);
}
html[data-theme="streetops"] h1, html[data-theme="streetops"] h2, html[data-theme="streetops"] h3, html[data-theme="streetops"] h4{
  text-transform:uppercase; letter-spacing:.02em; font-weight:700;
}

/* ---- shared components ---- */
html[data-theme="streetops"] .card, html[data-theme="streetops"] .modal, html[data-theme="streetops"] .login-card{
  border-radius:var(--radius); border:1px solid var(--border-soft);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  background:var(--surface);
}
html[data-theme="streetops"] .card-head h3{ font-size:13px; }
html[data-theme="streetops"] .btn{
  border-radius:4px; font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.03em;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
}
html[data-theme="streetops"] .btn-primary{ background:var(--primary); color:#14161C; box-shadow:0 0 16px rgba(255,176,32,.4); }
html[data-theme="streetops"] .btn-primary:hover{ filter:brightness(1.1); }
html[data-theme="streetops"] .btn-danger{ background:rgba(255,59,48,.15); color:var(--rose); border-color:rgba(255,59,48,.4); }
html[data-theme="streetops"] .field input, html[data-theme="streetops"] .input, html[data-theme="streetops"] select.input{
  border-radius:4px; background:var(--bg-2);
}
html[data-theme="streetops"] .badge{ border-radius:4px; text-transform:uppercase; font-weight:700; font-size:10.5px; }
html[data-theme="streetops"] table{ font-size:13px; }
html[data-theme="streetops"] thead th{ color:var(--primary); font-size:10.5px; }
html[data-theme="streetops"] tbody tr:hover{ background:var(--surface-hi); }
html[data-theme="streetops"] .tab-btn{ border-radius:4px; text-transform:uppercase; font-weight:700; font-size:11.5px; }
html[data-theme="streetops"] .tab-btn.active{ background:var(--primary); color:#14161C; }
html[data-theme="streetops"] .stat-card .value, html[data-theme="streetops"] .topbar-clock{ font-family:var(--font-mono); }
html[data-theme="streetops"] .login-logo, html[data-theme="streetops"] .brand-mark{ border-radius:6px; background:var(--primary); color:#14161C; }

/* ---- menu placement: floating bottom dock + corner HUD chips ---- */
@media (min-width:961px){
  html[data-theme="streetops"] .sidebar{ display:contents; }
  html[data-theme="streetops"] .sidebar-brand{
    position:fixed; top:16px; inset-inline-start:16px; z-index:16; padding:8px 16px 8px 10px;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-btn);
    clip-path:polygon(0 0,100% 0,100% 70%,88% 100%,0 100%);
  }
  html[data-theme="streetops"] .sidebar-footer{
    position:fixed; top:16px; inset-inline-end:16px; z-index:16; width:auto; border:none; padding:8px 14px;
    margin:0; display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
    clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 30%);
  }
  html[data-theme="streetops"] .me-card{ gap:8px; }
  html[data-theme="streetops"] .me-info{ display:flex; max-width:60px; }
  html[data-theme="streetops"] .me-info span{ display:none; }
  html[data-theme="streetops"] #logout-btn{ width:auto; padding:8px; font-size:0; }
  html[data-theme="streetops"] #logout-btn .icon{ width:16px; height:16px; }
  html[data-theme="streetops"] .nav-tunnel{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:16;
    display:flex; align-items:center; gap:4px; overflow-x:auto; max-width:88vw;
    background:rgba(27,29,36,.92); backdrop-filter:blur(6px); border:1px solid var(--border);
    padding:8px; border-radius:14px; box-shadow:var(--shadow-pop);
  }
  html[data-theme="streetops"] .nav-section{ display:none; }
  html[data-theme="streetops"] .nav-item{
    flex-direction:column; gap:3px; padding:8px 12px; margin:0; border-radius:9px; white-space:nowrap;
  }
  html[data-theme="streetops"] .nav-item span:last-child{ font-size:9.5px; text-transform:uppercase; font-weight:700; }
  html[data-theme="streetops"] .nav-item.active{ background:var(--primary); color:#14161C; }
  html[data-theme="streetops"] .nav-item.active .nav-icon{ color:#14161C; }
  html[data-theme="streetops"] .topbar{ padding-inline:210px; }
  html[data-theme="streetops"] .content{ padding-bottom:110px; }
}
html[data-theme="streetops"] .topbar{ background:transparent; border-bottom:1px solid var(--border-soft); }
html[data-theme="streetops"] .live-dot{ background:var(--emerald); box-shadow:0 0 8px var(--emerald); }

/* ---- dashboard: streetops ---- */
html[data-theme="streetops"] .so-hero{ position:relative; padding:26px 10px; margin-bottom:18px; text-align:center; }
html[data-theme="streetops"] .so-hero-bar{ position:absolute; left:0; right:0; height:22px; background:#000; }
html[data-theme="streetops"] .so-hero-bar.top{ top:0; } html[data-theme="streetops"] .so-hero-bar.bottom{ bottom:0; }
html[data-theme="streetops"] .so-hero-tag{ font-family:var(--font-mono); font-size:11px; color:var(--primary); letter-spacing:.15em; }
html[data-theme="streetops"] .so-hero h2{ font-size:24px; margin:6px 0 4px; }
html[data-theme="streetops"] .so-hero p{ color:var(--text-muted); font-size:12px; }
html[data-theme="streetops"] .so-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
html[data-theme="streetops"] .so-stat{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
html[data-theme="streetops"] .so-stat-cash{ border:1px solid var(--primary); box-shadow:0 0 16px rgba(255,176,32,.25); }
html[data-theme="streetops"] .so-stat-label{ font-size:10.5px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.05em; }
html[data-theme="streetops"] .so-stat-val{ font-size:24px; font-weight:700; }
html[data-theme="streetops"] .so-stat-cash .so-stat-val{ color:var(--emerald); }
html[data-theme="streetops"] .so-stat-tag{ font-size:11px; font-family:var(--font-mono); align-self:flex-start; padding:2px 8px; border-radius:4px; background:var(--surface-2); }
html[data-theme="streetops"] .so-stat-tag.up{ color:var(--emerald); } html[data-theme="streetops"] .so-stat-tag.down{ color:var(--rose); }
html[data-theme="streetops"] .so-stat-stars{ font-size:16px; letter-spacing:2px; color:var(--border); }
html[data-theme="streetops"] .so-star.on{ color:var(--rose); text-shadow:0 0 8px rgba(255,59,48,.6); }
html[data-theme="streetops"] .so-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
html[data-theme="streetops"] .so-panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px 18px; }
html[data-theme="streetops"] .so-panel-head{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--primary); margin-bottom:12px; text-transform:uppercase; border-bottom:1px solid var(--border-soft); padding-bottom:8px; }
html[data-theme="streetops"] .so-vital-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
html[data-theme="streetops"] .so-vital-row > span:first-child{ width:120px; flex-shrink:0; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="streetops"] .so-vital-row b{ width:52px; text-align:end; font-size:12px; flex-shrink:0; }
html[data-theme="streetops"] .so-seg{ flex:1; height:12px; background:var(--surface-2); border-radius:1px; }
html[data-theme="streetops"] .so-mission-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border-soft); }
html[data-theme="streetops"] .so-mission-row:last-child{ border-bottom:none; }
html[data-theme="streetops"] .so-mission-check{ color:var(--emerald); font-weight:700; }
html[data-theme="streetops"] .so-mission-name{ flex:1; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="streetops"] .so-mission-val{ color:var(--primary); font-size:12px; }

@media (max-width:960px){
  html[data-theme="streetops"] .so-stat-grid, html[data-theme="streetops"] .so-cols{ grid-template-columns:1fr; }
}