/* ============================================================
   ICM Admin — style.css (tokens + base + components)
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOKENS — Accent colors + radius + theme
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root,
[data-accent="emerald"] { --ac-h:158; --ac-s:74%; --ac-l:42%; --ac-glow:158 74% 50%; }
[data-accent="ruby"]    { --ac-h:352; --ac-s:78%; --ac-l:50%; --ac-glow:352 78% 58%; }
[data-accent="ocean"]   { --ac-h:212; --ac-s:84%; --ac-l:52%; --ac-glow:212 84% 60%; }
[data-accent="violet"]  { --ac-h:258; --ac-s:72%; --ac-l:58%; --ac-glow:258 72% 64%; }
[data-accent="amber"]   { --ac-h: 34; --ac-s:92%; --ac-l:50%; --ac-glow: 34 92% 56%; }
[data-accent="rose"]    { --ac-h:330; --ac-s:74%; --ac-l:54%; --ac-glow:330 74% 60%; }

[data-radius="sharp"] { --r-sm:4px;  --r-md:8px;  --r-lg:12px; --r-pill:12px; }
[data-radius="soft"]  { --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px; }
[data-radius="round"] { --r-sm:14px; --r-md:22px; --r-lg:30px; --r-pill:999px; }

[data-theme="dark"] {
  --bg:hsl(228 18% 7%);
  --bg-grad:radial-gradient(900px 420px at 85% -10%, hsl(var(--ac-h) 60% 18% / .55), transparent 60%),
            radial-gradient(700px 380px at -10% 30%, hsl(var(--ac-h) 50% 14% / .35), transparent 55%);
  --surface:hsl(228 16% 11%); --surface-2:hsl(228 15% 14.5%); --surface-3:hsl(228 14% 19%);
  --line:hsl(228 14% 22% / .7);
  --txt:hsl(228 20% 94%); --txt-2:hsl(228 12% 68%); --txt-3:hsl(228 10% 48%);
  --accent:hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 8%));
  --accent-strong:hsl(var(--ac-h) var(--ac-s) var(--ac-l));
  --on-accent:hsl(0 0% 100%);
  --accent-soft:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .14);
  --accent-line:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .35);
  --glow:0 0 28px hsl(var(--ac-glow) / .35);
  --ok:hsl(150 70% 46%); --ok-soft:hsl(150 70% 46% / .14);
  --warn:hsl(38 92% 54%); --warn-soft:hsl(38 92% 54% / .14);
  --bad:hsl(354 78% 58%); --bad-soft:hsl(354 78% 58% / .14);
  --info:hsl(212 84% 60%); --info-soft:hsl(212 84% 60% / .14);
  --bar-bg:hsl(228 18% 10% / .82);
  --side-bg:hsl(228 17% 9%);
  --shadow:0 10px 30px hsl(228 30% 3% / .5);
  --shadow-sm:0 2px 8px hsl(228 30% 3% / .3);
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:hsl(220 30% 97%);
  --bg-grad:radial-gradient(900px 420px at 85% -10%, hsl(var(--ac-h) 70% 88% / .8), transparent 60%),
            radial-gradient(700px 380px at -10% 30%, hsl(var(--ac-h) 60% 92% / .6), transparent 55%);
  --surface:hsl(0 0% 100%); --surface-2:hsl(220 25% 95%); --surface-3:hsl(220 22% 90%);
  --line:hsl(220 18% 86%);
  --txt:hsl(228 30% 14%); --txt-2:hsl(228 14% 38%); --txt-3:hsl(228 10% 58%);
  --accent:hsl(var(--ac-h) var(--ac-s) var(--ac-l));
  --accent-strong:hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) - 6%));
  --on-accent:hsl(0 0% 100%);
  --accent-soft:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .12);
  --accent-line:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .3);
  --glow:0 0 24px hsl(var(--ac-glow) / .25);
  --ok:hsl(150 65% 36%); --ok-soft:hsl(150 65% 36% / .12);
  --warn:hsl(34 92% 44%); --warn-soft:hsl(34 92% 44% / .12);
  --bad:hsl(352 72% 48%); --bad-soft:hsl(352 72% 48% / .12);
  --info:hsl(212 78% 44%); --info-soft:hsl(212 78% 44% / .12);
  --bar-bg:hsl(0 0% 100% / .85);
  --side-bg:hsl(0 0% 100%);
  --shadow:0 10px 28px hsl(228 30% 30% / .12);
  --shadow-sm:0 2px 8px hsl(228 30% 30% / .06);
  color-scheme:light;
}
html { --card-line:var(--line); --sidebar-w:240px; }
html[data-collapsed="1"] { --sidebar-w:64px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { overflow-x:hidden; max-inline-size:100vw; }
body{
  font-family:'Cairo',system-ui,sans-serif;
  background:var(--bg); color:var(--txt);
  background-image:var(--bg-grad); background-attachment:fixed;
  min-height:100dvh; line-height:1.5;
  transition:background-color .3s, color .3s;
  font-feature-settings:"locl" 0, "lnum" 1;
  font-variant-numeric:lining-nums;
}
.mono{
  font-family:'JetBrains Mono',monospace;
  font-feature-settings:"lnum" 1, "tnum" 1;
  font-variant-numeric:tabular-nums lining-nums;
}
input, button, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-soft); }
.ic{ inline-size:1em; block-size:1em; stroke:currentColor; fill:none;
     stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block; }
.hidden{ display:none !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APP LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100dvh;
  transition:grid-template-columns .3s cubic-bezier(.2,.8,.2,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar{
  background:var(--side-bg);
  border-inline-end:1px solid var(--card-line);
  position:sticky; top:0; align-self:start;
  height:100dvh; max-height:100dvh;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding:14px 10px;
  z-index:40;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.sidebar::-webkit-scrollbar{ inline-size:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:3px; }
.side-brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 6px 14px; margin-block-end:8px;
  border-block-end:1px solid var(--card-line);
}
.side-logo{
  inline-size:38px; block-size:38px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 16%)));
  box-shadow:var(--glow);
}
.side-logo .ic{ inline-size:20px; block-size:20px; }
.side-brand-txt{ display:grid; gap:0; min-width:0; opacity:1; transition:opacity .2s; }
.side-brand-txt b{ font-size:14px; font-weight:900; line-height:1.1; white-space:nowrap; }
.side-brand-txt small{ font-size:10.5px; color:var(--txt-3); font-weight:700; white-space:nowrap; }
.side-section{ display:flex; flex-direction:column; gap:2px; margin-block-end:6px; }
.side-section-title{
  font-size:10px; font-weight:800; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.5px; padding:10px 12px 4px;
  white-space:nowrap; overflow:hidden; opacity:1; transition:opacity .2s;
}
.side-link{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--r-sm);
  color:var(--txt-2); font-size:13px; font-weight:700;
  cursor:pointer; transition:background .2s, color .2s;
  position:relative; inline-size:100%; text-align:start;
}
.side-link:hover{ background:var(--surface-2); color:var(--txt); }
.side-link.active{ background:var(--accent-soft); color:var(--accent); }
.side-link.active::before{
  content:""; position:absolute;
  inset-inline-start:-10px; inset-block:8px;
  inline-size:3px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 8px hsl(var(--ac-glow) / .6);
}
.side-link .ic{ inline-size:18px; block-size:18px; flex:none; }
.side-link-text{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-link-badge{
  font-size:10px; font-weight:800; padding:2px 7px;
  border-radius:99px; background:var(--bad); color:white; flex:none;
}
.side-link.active .side-link-badge{ background:var(--accent); color:var(--on-accent); }
.side-footer{ margin-block-start:auto; padding-block-start:8px; border-block-start:1px solid var(--card-line); }
.side-collapse-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:8px; color:var(--txt-3); font-size:11px; font-weight:700;
  border-radius:var(--r-sm);
}
.side-collapse-btn:hover{ background:var(--surface-2); color:var(--txt); }
.side-collapse-btn .ic{ inline-size:16px; block-size:16px; transition:transform .3s; }

/* Collapsed state (desktop) */
html[data-collapsed="1"] .side-brand-txt,
html[data-collapsed="1"] .side-section-title,
html[data-collapsed="1"] .side-link-text,
html[data-collapsed="1"] .side-link-badge,
html[data-collapsed="1"] .side-collapse-btn span{
  opacity:0; pointer-events:none; max-width:0; overflow:hidden;
}
html[data-collapsed="1"] .side-link{ justify-content:center; padding:9px; }
html[data-collapsed="1"] .side-brand{ justify-content:center; padding:6px 0 14px; }
html[data-collapsed="1"] .side-collapse-btn .ic{ transform:rotate(180deg); }
[dir="rtl"] html[data-collapsed="1"] .side-collapse-btn .ic{ transform:rotate(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN + TOPBAR (Detached Floating Style)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.main{ display:flex; flex-direction:column; min-width:0; padding-block-end:env(safe-area-inset-bottom); }
.topbar-wrap{
  position:sticky; top:0; z-index:30;
  padding:14px 22px 0;
  background:linear-gradient(180deg, var(--bg) 60%, transparent);
}
.topbar{
  background:var(--surface);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--card-line);
  border-radius:var(--r-lg);
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  box-shadow:var(--shadow-sm);
  max-width:1400px; margin-inline:auto;
}
.top-toggle{
  display:none;
  inline-size:38px; block-size:38px;
  align-items:center; justify-content:center;
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--card-line);
  color:var(--txt-2);
}
.top-search{
  flex:1; max-width:440px; position:relative;
  display:flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-md); transition:border-color .2s, background .2s;
}
.top-search:focus-within{ border-color:var(--accent); }
.top-search > .ic{ flex:none; inline-size:17px; block-size:17px; margin-inline-start:12px; color:var(--txt-3); }
.top-search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--txt);
  padding:10px 12px; font-size:13.5px; font-weight:600;
}
.top-search input::placeholder{ color:var(--txt-3); font-weight:500; }
.kbd{
  display:inline-flex; align-items:center; gap:2px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--txt-3); padding:2px 6px;
  border:1px solid var(--card-line); border-radius:4px;
  background:var(--bg); flex:none; margin-inline-end:6px;
}
.top-actions{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.top-status{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:11.5px; font-weight:800;
  background:var(--ok-soft); color:var(--ok);
  border-radius:99px;
}
.top-status .pulse{
  inline-size:7px; block-size:7px; border-radius:50%;
  background:currentColor; box-shadow:0 0 8px currentColor;
  animation:pulse 2s infinite;
}
.iconbtn{
  inline-size:38px; block-size:38px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--card-line);
  color:var(--txt-2); position:relative; transition:transform .15s;
}
.iconbtn .ic{ inline-size:18px; block-size:18px; }
.iconbtn:active{ transform:scale(.92); }
.iconbtn:hover{ background:var(--surface-2); color:var(--txt); }
.iconbtn .dot{
  position:absolute; inset-block-start:7px; inset-inline-end:7px;
  inline-size:8px; block-size:8px; border-radius:50%;
  background:var(--bad); box-shadow:0 0 0 2px var(--surface);
}
.user-pill{
  display:flex; align-items:center; gap:10px;
  padding:4px 14px 4px 4px;
  border-radius:99px;
  background:var(--surface); border:1px solid var(--card-line);
  cursor:pointer; transition:background .2s;
}
[dir="rtl"] .user-pill{ padding:4px 4px 4px 14px; }
.user-pill:hover{ background:var(--surface-2); }
.user-pill .avatar{
  inline-size:32px; block-size:32px;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 14%)));
  color:var(--on-accent); font-weight:900; font-size:13px;
  position:relative;
}
.user-pill .avatar::after{
  content:""; position:absolute;
  inset-block-end:-1px; inset-inline-end:-1px;
  inline-size:10px; block-size:10px; border-radius:50%;
  background:var(--ok); border:2px solid var(--surface);
  box-shadow:0 0 8px hsl(150 70% 46% / .5);
  animation:pulse 2s infinite;
}
.user-pill .uname{
  font-size:12.5px; font-weight:800;
  max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE + BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page{ padding:22px 22px 28px; max-width:1400px; width:100%; margin-inline:auto; }
.page-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-block-end:22px;
}
.page-title{ font-size:24px; font-weight:900; letter-spacing:-.4px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wave{ display:inline-block; animation:wave 1.8s ease-in-out 1; transform-origin:70% 80%; }
.page-sub{ color:var(--txt-3); font-size:13px; font-weight:700; margin-block-start:6px; }
.page-sub b{ color:var(--accent); font-weight:900; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--card-line);
  color:var(--txt); font-weight:700; font-size:13px;
  cursor:pointer; transition:background .2s, transform .15s, border-color .2s;
  min-height:38px; white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); border-color:var(--accent); }
.btn:active{ transform:scale(.97); }
.btn .ic{ inline-size:16px; block-size:16px; }
.btn-primary{
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 14%)));
  color:var(--on-accent); border-color:transparent;
  box-shadow:0 6px 16px -4px hsl(var(--ac-glow) / .45);
}
.btn-primary:hover{ border-color:transparent; }
.btn-icon-only{
  padding:0; inline-size:38px; flex:none; justify-content:center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KPI STRIP (4 cards — Vuexy icon-badge pattern)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  margin-block-end:14px;
}
.kpi-card{
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow-sm); position:relative;
  transition:transform .15s, border-color .2s;
  cursor:pointer; text-align:start;
}
.kpi-card:hover{ border-color:var(--kpi-color, var(--accent)); transform:translateY(-2px); }
.kpi-card .kpi-badge{
  display:inline-grid; place-items:center;
  inline-size:44px; block-size:44px;
  border-radius:10px;
  background:var(--kpi-bg, var(--accent-soft));
  color:var(--kpi-color, var(--accent));
  margin-block-end:14px;
}
.kpi-card .kpi-badge .ic{ inline-size:22px; block-size:22px; }
.kpi-card .kpi-title{ font-size:13px; font-weight:700; color:var(--txt-2); margin-block-end:2px; }
.kpi-card .kpi-sub{ font-size:11px; color:var(--txt-3); font-weight:700; margin-block-end:8px; }
.kpi-card .kpi-value{
  font-size:26px; font-weight:900; letter-spacing:-.5px;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
  margin-block-end:8px; line-height:1.1; color:var(--txt);
}
.kpi-card .kpi-delta{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:99px;
  font-size:11px; font-weight:800;
  background:var(--kpi-bg, var(--accent-soft));
  color:var(--kpi-color, var(--accent));
}
.kpi-card .kpi-delta .ic{ inline-size:11px; block-size:11px; }
.kpi-card[data-kind="primary"]{ --kpi-bg:var(--accent-soft); --kpi-color:var(--accent); }
.kpi-card[data-kind="ok"]     { --kpi-bg:var(--ok-soft);     --kpi-color:var(--ok); }
.kpi-card[data-kind="info"]   { --kpi-bg:var(--info-soft);   --kpi-color:var(--info); }
.kpi-card[data-kind="warn"]   { --kpi-bg:var(--warn-soft);   --kpi-color:var(--warn); }
.kpi-card[data-kind="bad"]    { --kpi-bg:var(--bad-soft);    --kpi-color:var(--bad); }

/* Mini KPI variant (smaller) */
.kpi-strip-mini{ gap:10px; }
.kpi-card.kpi-mini{ padding:12px; }
.kpi-card.kpi-mini .kpi-badge{ inline-size:36px; block-size:36px; margin-block-end:10px; }
.kpi-card.kpi-mini .kpi-badge .ic{ inline-size:18px; block-size:18px; }
.kpi-card.kpi-mini .kpi-value{ font-size:22px; margin-block-end:4px; }
.kpi-card.kpi-mini .kpi-title{ font-size:11.5px; margin:0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bento{ display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.bento > *{ min-width:0; }
.b-col-3 { grid-column:span 3; }
.b-col-4 { grid-column:span 4; }
.b-col-6 { grid-column:span 6; }
.b-col-8 { grid-column:span 8; }
.b-col-12{ grid-column:span 12; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card{
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px; gap:8px;
}
.card-head b{ font-size:13.5px; font-weight:800; letter-spacing:-.1px; }
.card-head small{ font-size:11.5px; color:var(--txt-3); font-weight:700; display:block; margin-block-start:2px; }
.card-head-action{
  font-size:11.5px; color:var(--accent); font-weight:800;
  display:inline-flex; align-items:center; gap:3px;
  padding:5px 8px; border-radius:var(--r-sm);
  transition:background .2s;
}
.card-head-action:hover{ background:var(--accent-soft); }
.card-head-action .ic{ inline-size:13px; block-size:13px; }
.card-body{ padding:8px 16px 16px; flex:1; }
.card-list{ padding:4px 8px 8px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MONEY PULSE HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-pulse{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-lg); padding:20px 22px 0;
  box-shadow:var(--shadow-sm);
}
.hero-pulse::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, var(--accent-soft), transparent 55%);
}
.pulse-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; position:relative; }
.pulse-label{ font-size:11.5px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.pulse-trend{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:99px;
  font-size:11.5px; font-weight:800;
  background:var(--ok-soft); color:var(--ok);
}
.pulse-trend.down{ background:var(--bad-soft); color:var(--bad); }
.pulse-trend.flat{ background:var(--surface-3); color:var(--txt-3); }
.pulse-trend .ic{ inline-size:13px; block-size:13px; }
.pulse-value{
  margin-block:10px 4px;
  font-size:42px; font-weight:900; letter-spacing:-1.2px; line-height:1;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums lining-nums;
  position:relative;
}
.pulse-value small{
  font-size:15px; font-weight:700; color:var(--txt-2);
  letter-spacing:0; margin-inline-start:8px;
  font-family:'Cairo',sans-serif;
}
.pulse-meta{ font-size:12px; color:var(--txt-3); font-weight:700; position:relative; }
.pulse-meta b{ color:var(--txt); }
.spark{ block-size:60px; inline-size:100%; margin-block:14px 0; position:relative; }
.spark svg{ inline-size:100%; block-size:100%; display:block; }
.spark .area{ fill:url(#sparkGrad); opacity:.45; }
.spark .line{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px hsl(var(--ac-glow) / .55));
}
.spark .dot{ fill:var(--accent); filter:drop-shadow(0 0 6px hsl(var(--ac-glow) / .9)); }
.pulse-foot{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  padding:12px 0 16px;
  border-block-start:1px solid var(--card-line);
  margin-block-start:10px; position:relative;
}
.pf-item{ text-align:center; position:relative; }
.pf-item + .pf-item::before{
  content:""; position:absolute; inset-block:8px 8px; inset-inline-start:0;
  inline-size:1px; background:var(--card-line);
}
.pf-item .ic{ inline-size:16px; block-size:16px; color:var(--accent); margin-inline:auto; margin-block-end:4px; }
.pf-item b{
  display:block; font-size:18px; font-weight:900;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.3px;
}
.pf-item span{ font-size:11px; color:var(--txt-3); font-weight:700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NETWORK SNAPSHOT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.snapshot{ padding:6px 14px 10px; }
.snap-row{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 4px; }
.snap-row + .snap-row{ border-block-start:1px solid var(--card-line); }
.snap-ic{
  inline-size:36px; block-size:36px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--snap-bg, var(--accent-soft));
  color:var(--snap-color, var(--accent));
}
.snap-ic .ic{ inline-size:17px; block-size:17px; }
.snap-body{ min-width:0; display:grid; gap:1px; }
.snap-body b{ font-size:13px; font-weight:800; }
.snap-body small{ font-size:11px; color:var(--txt-3); font-weight:700; }
.snap-val{
  font-size:17px; font-weight:900;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
  text-align:end; letter-spacing:-.3px;
}
.snap-val small{
  display:block; font-size:10.5px; color:var(--txt-3); font-weight:700;
  font-family:'Cairo',sans-serif;
}
.snap-row[data-kind="online"]  { --snap-bg:var(--ok-soft);     --snap-color:var(--ok); }
.snap-row[data-kind="users"]   { --snap-bg:var(--accent-soft); --snap-color:var(--accent); }
.snap-row[data-kind="agents"]  { --snap-bg:var(--info-soft);   --snap-color:var(--info); }
.snap-row[data-kind="servers"] { --snap-bg:var(--warn-soft);   --snap-color:var(--warn); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CIRCULAR PROGRESS RING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.circle-ring{ position:relative; inline-size:140px; block-size:140px; margin-inline:auto; }
.circle-ring svg{ inline-size:100%; block-size:100%; transform:rotate(-90deg); }
.circle-ring .track{ fill:none; stroke:var(--surface-3); stroke-width:10; }
.circle-ring .fill{
  fill:none; stroke:var(--ring-color, var(--accent));
  stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 0 6px hsl(var(--ac-glow) / .5));
}
.circle-ring .center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.circle-ring .center b{
  font-size:26px; font-weight:900;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.5px; line-height:1; color:var(--ring-color, var(--accent));
}
.circle-ring .center small{ font-size:10px; color:var(--txt-3); font-weight:700; display:block; margin-block-start:4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ALERTS + LIST ITEMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alerts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; }
.alert{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--alert-bg, var(--warn-soft));
  border:1px solid var(--alert-line, hsl(38 92% 54% / .35));
  cursor:pointer; transition:transform .15s;
}
.alert:active{ transform:scale(.99); }
.alert .ai{
  inline-size:36px; block-size:36px; flex:none;
  display:grid; place-items:center; border-radius:10px;
  background:var(--alert-color-soft, hsl(38 92% 54% / .2));
  color:var(--alert-color, var(--warn));
}
.alert .ai .ic{ inline-size:17px; block-size:17px; }
.alert .ab{ flex:1; min-width:0; display:grid; gap:1px; }
.alert .ab b{ font-size:13px; font-weight:800; }
.alert .ab small{ font-size:11px; color:var(--txt-2); font-weight:700; }
.alert .arrow .ic{ inline-size:18px; block-size:18px; color:var(--alert-color); }
.alert[data-kind="warn"]{ --alert-bg:var(--warn-soft); --alert-line:hsl(38 92% 54% / .35); --alert-color:var(--warn); --alert-color-soft:hsl(38 92% 54% / .2); }
.alert[data-kind="bad"] { --alert-bg:var(--bad-soft);  --alert-line:hsl(354 78% 58% / .35); --alert-color:var(--bad);  --alert-color-soft:hsl(354 78% 58% / .2); }
.alert[data-kind="info"]{ --alert-bg:var(--info-soft); --alert-line:hsl(212 84% 60% / .35); --alert-color:var(--info); --alert-color-soft:hsl(212 84% 60% / .2); }

.list-item{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:var(--r-sm); transition:background .15s; }
.list-item + .list-item{ margin-block-start:2px; }
.list-item:hover{ background:var(--surface-2); }
.li-ic{
  inline-size:34px; block-size:34px; flex:none;
  display:grid; place-items:center; border-radius:10px;
  background:var(--li-bg, var(--accent-soft));
  color:var(--li-color, var(--accent));
}
.li-ic .ic{ inline-size:16px; block-size:16px; }
.li-body{ flex:1; min-width:0; display:grid; gap:1px; }
.li-title{ font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li-sub{ font-size:11px; color:var(--txt-3); font-weight:600; font-family:'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li-meta{
  font-size:13px; font-weight:900; flex:none; text-align:end;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
}
.li-meta small{ display:block; font-size:10px; color:var(--txt-3); font-weight:700; font-family:'Cairo',sans-serif; }
.li-color-primary{ --li-bg:var(--accent-soft); --li-color:var(--accent); }
.li-color-ok     { --li-bg:var(--ok-soft);     --li-color:var(--ok); }
.li-color-warn   { --li-bg:var(--warn-soft);   --li-color:var(--warn); }
.li-color-bad    { --li-bg:var(--bad-soft);    --li-color:var(--bad); }
.li-color-info   { --li-bg:var(--info-soft);   --li-color:var(--info); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DROPDOWN + NOTIFICATIONS + SHORTCUTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dd{ position:relative; }
.dd-toggle{
  inline-size:32px; block-size:32px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--txt-3); transition:background .2s, color .2s;
}
.dd-toggle:hover{ background:var(--surface-2); color:var(--txt); }
.dd-toggle .ic{ inline-size:18px; block-size:18px; }
.dd-menu{
  position:absolute; inset-block-start:calc(100% + 6px); inset-inline-end:0;
  min-inline-size:180px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md); padding:6px;
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(-6px) scale(.97);
  pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:25;
}
.dd.open .dd-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dd-item{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; inline-size:100%; text-align:start;
  border-radius:var(--r-sm);
  color:var(--txt); font-size:12.5px; font-weight:700;
  transition:background .15s;
}
.dd-item:hover{ background:var(--surface-2); }
.dd-item.danger{ color:var(--bad); }
.dd-item.danger:hover{ background:var(--bad-soft); }
.dd-item.sel{ color:var(--accent); font-weight:800; background:var(--accent-soft); }

/* ═══ Login screen: language + theme controls ═══ */
.auth{ position:relative; }
.auth-controls{
  position:absolute; inset-block-start:18px; inset-inline-end:18px;
  display:flex; align-items:center; gap:8px; z-index:6;
}
.auth-ctrl-btn{
  inline-size:40px; block-size:40px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  border-radius:12px; color:var(--txt-2);
  background:var(--surface-2); border:1px solid var(--card-line);
  transition:color .15s ease, border-color .15s ease, transform .15s ease, background .15s ease;
}
.auth-ctrl-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.auth-ctrl-btn .ic{ inline-size:19px; block-size:19px; }
.auth-controls .dd-menu{ min-inline-size:170px; }
.dd-item.sel .ic{ color:var(--accent); }
.dd-item .ic{ inline-size:15px; block-size:15px; color:var(--txt-3); }
.dd-item.danger .ic{ color:var(--bad); }
.dd-divider{ block-size:1px; background:var(--card-line); margin:4px 2px; }

/* Notifications panel */
.notif-panel{
  position:absolute; inset-block-start:calc(100% + 6px); inset-inline-end:0;
  inline-size:420px; max-block-size:560px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:25; overflow:hidden;
}
.dd.open .notif-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.notif-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-block-end:1px solid var(--card-line);
  background:var(--surface-2);
}
.notif-head-l b{ font-size:13.5px; font-weight:900; display:block; }
.notif-head-l small{
  font-size:11px; color:var(--accent); font-weight:800;
  display:inline-flex; align-items:center; gap:4px; margin-block-start:2px;
}
.notif-head-l small::before{
  content:""; inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px hsl(var(--ac-glow) / .8);
}
.notif-mark-read{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 8px; border-radius:var(--r-sm);
  color:var(--accent); font-size:11px; font-weight:800;
  transition:background .2s;
}
.notif-mark-read:hover{ background:var(--accent-soft); }
.notif-mark-read .ic{ inline-size:13px; block-size:13px; }
.notif-list{ flex:1; overflow-y:auto; padding:4px; }
.notif-list::-webkit-scrollbar{ inline-size:5px; }
.notif-list::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:3px; }
.notif-item{
  display:grid; grid-template-columns:36px 1fr auto; gap:10px;
  padding:10px 10px; border-radius:var(--r-sm);
  cursor:pointer; transition:background .15s; position:relative;
}
.notif-item:hover{ background:var(--surface-2); }
.notif-item.unread::before{
  content:""; position:absolute;
  inset-block-start:50%; inset-inline-end:8px;
  transform:translateY(-50%);
  inline-size:7px; block-size:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px hsl(var(--ac-glow) / .7);
}
.notif-item.unread{ padding-inline-end:24px; }
.notif-avatar{
  inline-size:36px; block-size:36px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--n-bg, var(--accent-soft));
  color:var(--n-color, var(--accent));
}
.notif-avatar .ic{ inline-size:17px; block-size:17px; }
.notif-body{ min-width:0; display:grid; gap:1px; }
.notif-body b{ font-size:12.5px; font-weight:800; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.notif-body small{
  font-size:11px; color:var(--txt-3); font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.notif-time{ font-size:10px; color:var(--txt-3); font-weight:700; flex:none; padding-block-start:1px; }
.notif-foot{ border-block-start:1px solid var(--card-line); padding:6px; }
.notif-foot button{
  inline-size:100%; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border-radius:var(--r-sm);
  color:var(--accent); font-size:12.5px; font-weight:800;
  transition:background .15s;
}
.notif-foot button:hover{ background:var(--accent-soft); }
.notif-empty{ display:grid; place-items:center; gap:8px; padding:40px 16px; text-align:center; }
.notif-empty .ic{ inline-size:32px; block-size:32px; color:var(--txt-3); opacity:.5; }
.notif-empty b{ font-size:13px; font-weight:800; color:var(--txt-2); }
.notif-empty span{ font-size:11px; color:var(--txt-3); font-weight:700; }
.notif-item[data-kind="primary"]{ --n-bg:var(--accent-soft); --n-color:var(--accent); }
.notif-item[data-kind="ok"]     { --n-bg:var(--ok-soft);     --n-color:var(--ok); }
.notif-item[data-kind="info"]   { --n-bg:var(--info-soft);   --n-color:var(--info); }
.notif-item[data-kind="warn"]   { --n-bg:var(--warn-soft);   --n-color:var(--warn); }
.notif-item[data-kind="bad"]    { --n-bg:var(--bad-soft);    --n-color:var(--bad); }

/* ─── بانر تحفيز الاشتراك جوّه تبويب التنبيهات (يظهر لو مش مشترك) ─── */
.notif-sub-cta{
  display:flex; align-items:center; gap:10px;
  margin:6px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--warn-soft); border:1px solid hsl(var(--warn-h,38) 90% 50% / .25);
}
.notif-sub-cta .ic{ inline-size:20px; block-size:20px; color:var(--warn); flex:none; }
.notif-sub-cta .nsc-txt{ flex:1; min-width:0; }
.notif-sub-cta .nsc-txt b{ font-size:12px; font-weight:800; display:block; }
.notif-sub-cta .nsc-txt small{ font-size:10.5px; color:var(--txt-3); font-weight:600; }
.notif-sub-cta button{
  flex:none; padding:7px 12px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; white-space:nowrap;
}

/* ─── رقائق الفلترة (صفحة الإشعارات + غيرها) ─── */
.filter-chips{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.filter-chips::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--card-line);
  color:var(--txt-2); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s;
}
.filter-chip .ic{ inline-size:14px; block-size:14px; }
.filter-chip:hover{ background:var(--surface-3); }
.filter-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.filter-chip .chip-n{ font-size:10.5px; opacity:.85; font-weight:800; }

/* ─── صفحة كل الإشعارات ─── */
.notifpage-list{ display:flex; flex-direction:column; gap:8px; margin-block-start:12px; }
.np-item{
  display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:start;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--card-line);
}
.np-item.unread{ border-inline-start:3px solid var(--accent); }
.np-ic{ inline-size:40px; block-size:40px; display:grid; place-items:center; border-radius:11px;
  background:var(--n-bg, var(--accent-soft)); color:var(--n-color, var(--accent)); }
.np-ic .ic{ inline-size:19px; block-size:19px; }
.np-item[data-kind="ok"]  { --n-bg:var(--ok-soft);   --n-color:var(--ok); }
.np-item[data-kind="bad"] { --n-bg:var(--bad-soft);  --n-color:var(--bad); }
.np-item[data-kind="warn"]{ --n-bg:var(--warn-soft); --n-color:var(--warn); }
.np-item[data-kind="info"]{ --n-bg:var(--info-soft); --n-color:var(--info); }
.np-body{ min-width:0; }
.np-body b{ font-size:13px; font-weight:800; display:block; line-height:1.35; }
.np-body small{ font-size:11.5px; color:var(--txt-3); font-weight:600; line-height:1.4; word-break:break-word; }
.np-time{ font-size:10.5px; color:var(--txt-3); font-weight:700; white-space:nowrap; }

/* Shortcuts panel */
.shortcuts-panel{
  position:absolute; inset-block-start:calc(100% + 6px); inset-inline-end:0;
  inline-size:320px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
  opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:25; overflow:hidden;
}
.dd.open .shortcuts-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.shortcuts-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-block-end:1px solid var(--card-line);
  background:var(--surface-2);
}
.shortcuts-head b{ font-size:13.5px; font-weight:900; }
.shortcuts-grid{ display:grid; grid-template-columns:repeat(2, 1fr); padding:6px; gap:4px; }
.shortcut-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border-radius:var(--r-sm);
  cursor:pointer; transition:background .15s; text-align:center;
}
.shortcut-card:hover{ background:var(--surface-2); }
.shortcut-ic{
  inline-size:40px; block-size:40px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--sc-bg, var(--accent-soft));
  color:var(--sc-color, var(--accent));
  transition:transform .15s;
}
.shortcut-card:hover .shortcut-ic{ transform:scale(1.08); }
.shortcut-ic .ic{ inline-size:18px; block-size:18px; }
.shortcut-card b{ font-size:11.5px; font-weight:800; line-height:1.2; }
.shortcut-card small{ font-size:10px; color:var(--txt-3); font-weight:700; line-height:1.2; }
.shortcut-card[data-kind="primary"]{ --sc-bg:var(--accent-soft); --sc-color:var(--accent); }
.shortcut-card[data-kind="ok"]     { --sc-bg:var(--ok-soft);     --sc-color:var(--ok); }
.shortcut-card[data-kind="info"]   { --sc-bg:var(--info-soft);   --sc-color:var(--info); }
.shortcut-card[data-kind="warn"]   { --sc-bg:var(--warn-soft);   --sc-color:var(--warn); }
.shortcut-card[data-kind="bad"]    { --sc-bg:var(--bad-soft);    --sc-color:var(--bad); }
.shortcut-card[data-kind="violet"] { --sc-bg:hsl(258 72% 58% / .14); --sc-color:hsl(258 72% 70%); }
[data-theme="light"] .shortcut-card[data-kind="violet"]{ --sc-color:hsl(258 72% 50%); }
.shortcut-card[data-kind="amber"]  { --sc-bg:hsl(34 92% 50% / .14); --sc-color:hsl(34 92% 60%); }
[data-theme="light"] .shortcut-card[data-kind="amber"]{ --sc-color:hsl(34 92% 44%); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SUBSCRIBERS PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.subs-toolbar{
  display:grid; grid-template-columns:1fr auto; gap:10px;
  margin-block-end:14px;
}
.subs-search{
  display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md); transition:border-color .2s;
}
.subs-search:focus-within{ border-color:var(--accent); }
.subs-search .ic{ flex:none; inline-size:17px; block-size:17px; margin-inline-start:12px; color:var(--txt-3); }
.subs-search input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent; color:var(--txt);
  padding:11px 12px; font-size:13.5px; font-weight:600;
}
.subs-search input::placeholder{ color:var(--txt-3); font-weight:500; }
.subs-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.subs-select{
  padding:10px 12px;
  background:var(--surface); border:1px solid var(--card-line); color:var(--txt);
  border-radius:var(--r-sm); font-size:12.5px; font-weight:700;
  cursor:pointer; min-height:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 10px center;
  background-size:14px;
  padding-inline-start:30px; padding-inline-end:12px;
  appearance:none; -webkit-appearance:none;
}
[dir="rtl"] .subs-select{ background-position:left 10px center; }
.subs-select:hover{ border-color:var(--accent); }

.subs-list{ display:flex; flex-direction:column; gap:6px; }
.sub-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:12px; align-items:center;
  padding:12px 14px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md);
  transition:border-color .2s, transform .15s;
  cursor:pointer;
}
.sub-row:hover{ border-color:var(--accent); transform:translateY(-1px); }
.sub-row.skel-row{ cursor:default; pointer-events:none; }
.sub-row.skel-row:hover{ transform:none; border-color:var(--card-line); }
.sub-avatar{
  inline-size:40px; block-size:40px; flex:none;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--ac-strong, var(--accent-strong)), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 14%)));
  color:var(--on-accent); font-weight:900; font-size:14px;
  position:relative;
}
.sub-avatar.disabled{
  background:linear-gradient(135deg, var(--surface-3), var(--surface-2));
  color:var(--txt-3);
}
.sub-avatar::after{
  content:""; position:absolute;
  inset-block-end:-1px; inset-inline-end:-1px;
  inline-size:11px; block-size:11px; border-radius:50%;
  background:var(--st-color, var(--ok));
  border:2px solid var(--surface);
}
.sub-avatar[data-status="disabled"]::after{ --st-color:var(--bad); }
.sub-avatar[data-status="expired"]::after { --st-color:var(--warn); }
.sub-avatar[data-status="active"]::after  { --st-color:var(--ok); }
.sub-info{ min-width:0; display:grid; gap:2px; }
.sub-name{ font-size:13.5px; font-weight:800; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-meta{
  font-size:11px; color:var(--txt-3); font-weight:600;
  font-family:'JetBrains Mono',monospace;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.sub-meta span{ display:inline-flex; align-items:center; gap:3px; }
.sub-meta .dot-sep{ inline-size:3px; block-size:3px; border-radius:50%; background:var(--txt-3); opacity:.5; }
.sub-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:800;
  background:var(--chip-bg, var(--accent-soft));
  color:var(--chip-color, var(--accent));
  white-space:nowrap;
}
.sub-chip[data-kind="ok"]  { --chip-bg:var(--ok-soft);   --chip-color:var(--ok); }
.sub-chip[data-kind="warn"]{ --chip-bg:var(--warn-soft); --chip-color:var(--warn); }
.sub-chip[data-kind="bad"] { --chip-bg:var(--bad-soft);  --chip-color:var(--bad); }
.sub-chip[data-kind="info"]{ --chip-bg:var(--info-soft); --chip-color:var(--info); }
.sub-actions .dd-toggle{
  inline-size:34px; block-size:34px;
  background:var(--surface-2);
}
.sub-actions .dd-toggle:hover{ background:var(--accent-soft); color:var(--accent); }
.sub-actions .dd-menu{ inset-inline-start:auto; inset-inline-end:0; min-inline-size:200px; }

.subs-pagination{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding-block:20px;
}
.subs-pagination .page-info{
  font-size:12.5px; color:var(--txt-2); font-weight:700;
  font-family:'JetBrains Mono',monospace;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE BOTTOM BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bottombar{ position:fixed; inset-inline:0; inset-block-end:0; z-index:35; display:none; }
.bottombar .bar{
  display:grid; grid-template-columns:repeat(5, 1fr);
  background:var(--bar-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border-block-start:1px solid var(--card-line);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom));
}
.nav-btn{
  display:grid; justify-items:center; gap:3px; padding:7px 2px;
  border-radius:var(--r-md); color:var(--txt-3);
  min-block-size:44px; transition:color .2s, transform .15s;
}
.nav-btn .ic{ inline-size:21px; block-size:21px; }
.nav-btn span{ font-size:10px; font-weight:700; }
.nav-btn:active{ transform:scale(.92); }
.nav-btn.active{ color:var(--accent); }
.nav-btn.active .ic{ filter:drop-shadow(0 0 8px hsl(var(--ac-glow) / .6)); }
.nav-fab{
  display:grid; place-items:center; margin-block-start:-22px; justify-self:center;
  inline-size:56px; block-size:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 14%)));
  color:var(--on-accent); border:4px solid var(--bg); box-shadow:var(--glow);
}
.nav-fab .ic{ inline-size:24px; block-size:24px; }

.scrim{
  position:fixed; inset:0; z-index:38;
  background:hsl(228 30% 3% / .55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN + TOAST + SKELETON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ═══ Split-screen login (desktop) ═══ */
.auth{ min-height:100dvh; display:flex; align-items:stretch; padding:0; position:relative; }
.auth-main{
  flex:1 1 46%; min-inline-size:0; position:relative;
  display:grid; place-items:center; padding:20px;
}
.auth-hero{
  flex:1 1 54%; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:48px;
  color:#fff; border-inline-start:1px solid var(--card-line);
  background:
    radial-gradient(120% 120% at 100% 0%, hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 8%) / .40), transparent 55%),
    linear-gradient(160deg, var(--accent-strong), hsl(var(--ac-h) calc(var(--ac-s) - 4%) calc(var(--ac-l) - 20%)));
}
.auth-hero-inner{ position:relative; z-index:2; max-inline-size:460px; animation:fadeUp .6s cubic-bezier(.2,.8,.2,1); }
.auth-hero-brand{ display:flex; align-items:center; gap:12px; margin-block-end:28px; }
.auth-hero-logo{ inline-size:46px; block-size:46px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.auth-hero-logo .ic{ inline-size:26px; block-size:26px; color:#fff; }
.auth-hero-brand b{ font-size:22px; font-weight:900; letter-spacing:-.3px; }
.auth-hero-title{ font-size:30px; line-height:1.32; font-weight:900; margin:0 0 12px; letter-spacing:-.5px; }
.auth-hero-sub{ font-size:15px; line-height:1.7; opacity:.92; margin:0 0 28px; }
.auth-hero-feats{ list-style:none; margin:0 0 32px; padding:0; display:grid; gap:14px; }
.auth-hero-feats li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:700; }
.auth-hero-feats .ic{ inline-size:18px; block-size:18px; flex:none; padding:8px; box-sizing:content-box; border-radius:10px; background:rgba(255,255,255,.16); }
.auth-hero-foot{ font-size:12.5px; opacity:.82; font-weight:700; }
.auth-hero-orbs{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.auth-hero-orbs span{ position:absolute; border-radius:50%; filter:blur(52px); opacity:.5; background:rgba(255,255,255,.35); animation:heroFloat 14s ease-in-out infinite; }
.auth-hero-orbs span:nth-child(1){ inline-size:260px; block-size:260px; inset-block-start:-40px; inset-inline-start:-40px; }
.auth-hero-orbs span:nth-child(2){ inline-size:200px; block-size:200px; inset-block-end:-30px; inset-inline-end:10%; animation-delay:-5s; }
.auth-hero-orbs span:nth-child(3){ inline-size:150px; block-size:150px; inset-block-start:42%; inset-inline-end:-30px; animation-delay:-9s; opacity:.35; }
@keyframes heroFloat{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(0,-24px); } }
@media (prefers-reduced-motion: reduce){ .auth-hero-orbs span{ animation:none; } }
/* منظومة me for ai — chips */
.auth-hero-eco{ margin-block-end:26px; }
.auth-hero-eco-lbl{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; opacity:.75; margin-block-end:10px; }
.auth-hero-eco-list{ display:grid; gap:10px; }
.auth-hero-eco-item{
  display:flex; align-items:center; gap:12px; min-inline-size:0;
  padding:11px 12px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  transition:background .15s ease, border-color .15s ease;
}
.auth-hero-eco-item:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.30); }
.auth-hero-eco-item .ic{
  inline-size:18px; block-size:18px; flex:none; padding:8px; box-sizing:content-box;
  border-radius:10px; background:rgba(255,255,255,.16);
}
.auth-hero-eco-txt{ display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.auth-hero-eco-txt b{ font-size:13.5px; font-weight:800; line-height:1.25; }
.auth-hero-eco-txt small{ font-size:11.5px; font-weight:600; opacity:.82; line-height:1.3; }
/* زر الرجوع (يظهر فى overlay الموبايل فقط) */
.auth-hero-back{ display:none; position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:3;
  align-items:center; gap:6px; background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:800; cursor:pointer; }
.auth-hero-back .ic{ inline-size:16px; block-size:16px; }
/* زر "عن المنصة" — موبايل فقط */
.auth-about-btn{ display:none; }

/* موبايل/تابلت: يختفى البانل ويفضل الكارت مركزى */
@media (max-width:900px){
  .auth{ display:grid; place-items:center; padding:20px; }
  .auth-hero{ display:none; }
  .auth-main{ padding:0; inline-size:100%; }
  /* الأزرار تتثبّت فوق الشاشة بعيد عن الكارت */
  .auth-controls{ position:fixed; inset-block-start:14px; inset-inline-start:14px; inset-inline-end:auto; }
  .auth-about-btn{ display:grid; }
  /* overlay: عرض البانل كامل بضغطة زر */
  .auth.show-about{ display:block; padding:0; }
  .auth.show-about .auth-main{ display:none; }
  .auth.show-about .auth-hero{
    display:flex; position:fixed; inset:0; z-index:60;
    overflow-y:auto; padding:66px 22px 32px; align-items:flex-start;
  }
  .auth.show-about .auth-hero-inner{ margin-block:auto; inline-size:100%; }
  .auth.show-about .auth-hero-back{ display:flex; }
}
.auth-card{
  width:100%; max-width:400px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-lg); padding:30px 22px 22px;
  box-shadow:var(--shadow); animation:fadeUp .5s cubic-bezier(.2,.8,.2,1);
}
.auth-brand{ display:grid; place-items:center; gap:14px; margin-block-end:22px; }
.auth-logo{
  inline-size:64px; block-size:64px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 16%)));
  color:var(--on-accent); box-shadow:var(--glow);
}
.auth-logo .ic{ inline-size:34px; block-size:34px; }
.auth-title{ text-align:center; }
.auth-title b{ display:block; font-size:20px; font-weight:900; letter-spacing:-.4px; }
.auth-title small{ display:block; font-size:12px; color:var(--txt-3); font-weight:700; margin-block-start:4px; }
.field{ display:grid; gap:5px; margin-block-end:12px; }
.field-label{ font-size:11.5px; font-weight:800; color:var(--txt-2); padding-inline:2px; }
.field-wrap{
  position:relative; display:flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-md); transition:border-color .2s, background .2s;
}
.field-wrap:focus-within{ border-color:var(--accent); background:var(--surface); }
.field-wrap > .ic{ flex:none; inline-size:18px; block-size:18px; margin-inline-start:12px; color:var(--txt-3); }
.field-wrap input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--txt);
  padding:11px 12px; font-size:14px; font-weight:600;
}
.field-wrap input::placeholder{ color:var(--txt-3); font-weight:500; }
.field-wrap .toggle-pwd{
  flex:none; inline-size:36px; block-size:36px;
  display:grid; place-items:center; color:var(--txt-3);
  margin-inline-end:2px; border-radius:var(--r-sm);
}
.field-wrap .toggle-pwd:active{ color:var(--accent); }
.auth-advanced{
  margin-block-end:14px; padding:8px;
  border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--card-line);
}
.auth-advanced summary{
  display:flex; align-items:center; gap:7px;
  cursor:pointer; user-select:none;
  font-size:11.5px; font-weight:800; color:var(--txt-2); padding:2px;
}
.auth-advanced summary::-webkit-details-marker{ display:none; }
.auth-advanced summary .ic{ inline-size:14px; block-size:14px; }
.auth-advanced[open] summary{ margin-block-end:8px; }
.auth-advanced .field:last-child{ margin-block-end:0; }
.btn-primary-full{
  inline-size:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px;
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 12%)));
  color:var(--on-accent); border-radius:var(--r-md);
  font-weight:900; font-size:14px; box-shadow:var(--glow);
  transition:transform .15s, opacity .2s; min-block-size:48px;
}
.btn-primary-full:active:not(:disabled){ transform:scale(.97); }
.btn-primary-full:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary-full .ic{ inline-size:18px; block-size:18px; }
.spinner{
  inline-size:18px; block-size:18px;
  border:2px solid currentColor; border-block-start-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite;
}
.auth-foot{
  text-align:center; margin-block-start:18px;
  font-size:11px; color:var(--txt-3); font-weight:700;
}
.auth-foot a{ color:var(--accent); font-weight:800; }

.toast-stack{
  position:fixed; inset-block-start:max(12px, env(safe-area-inset-top));
  inset-inline:0; z-index:200;
  display:grid; gap:8px; justify-items:center;
  padding-inline:16px; pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-md); padding:11px 14px;
  display:flex; align-items:center; gap:9px;
  box-shadow:var(--shadow); max-width:380px;
  animation:fadeUp .25s cubic-bezier(.2,.8,.2,1);
}
.toast.ok  { border-color:hsl(150 70% 46% / .35); }
.toast.bad { border-color:hsl(354 78% 58% / .35); }
.toast.warn{ border-color:hsl(38 92% 54% / .35); }
.toast .ic{ inline-size:18px; block-size:18px; flex:none; }
.toast.ok .ic  { color:var(--ok); }
.toast.bad .ic { color:var(--bad); }
.toast.warn .ic{ color:var(--warn); }
.toast span{ font-size:13px; font-weight:700; }

/* ── Toast محسّن: شريط لون جانبى + أيقونة دائرية + progress + إغلاق ── */
.toast{ position:relative; overflow:hidden; min-inline-size:250px; padding-inline-start:13px; }
.toast::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; inline-size:4px; background:var(--accent); }
.toast.ok::before  { background:var(--ok); }
.toast.bad::before { background:var(--bad); }
.toast.warn::before{ background:var(--warn); }
.toast-ico{ inline-size:26px; block-size:26px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--accent-soft); color:var(--accent); }
.toast.ok  .toast-ico{ background:var(--ok-soft);   color:var(--ok); }
.toast.bad .toast-ico{ background:var(--bad-soft);  color:var(--bad); }
.toast.warn .toast-ico{ background:var(--warn-soft); color:var(--warn); }
.toast-ico .ic{ inline-size:15px; block-size:15px; }
.toast-msg{ font-size:13px; font-weight:700; flex:1; line-height:1.45; }
.toast .toast-x{ flex:none; inline-size:22px; block-size:22px; border-radius:6px; display:grid; place-items:center;
  color:var(--txt-3); opacity:.55; background:transparent; border:0; cursor:pointer; transition:opacity .15s, background .15s; }
.toast .toast-x:hover{ opacity:1; background:var(--surface-3); }
.toast .toast-x .ic{ inline-size:13px; block-size:13px; color:var(--txt-3); }
.toast-prog{ position:absolute; inset-block-end:0; inset-inline-start:0; block-size:2px; inline-size:100%;
  background:var(--accent); opacity:.45; transform-origin:inline-start; animation:toastProg linear forwards; }
.toast.ok  .toast-prog{ background:var(--ok); }
.toast.bad .toast-prog{ background:var(--bad); }
.toast.warn .toast-prog{ background:var(--warn); }
.toast.toast-out{ animation:toastOut .26s cubic-bezier(.4,0,1,1) forwards; }
@keyframes toastProg{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px) scale(.98); } }

/* ── المتاح جنب "عدد الكروت": رقم بلون مميّز بدون حواف/خلفية ── */
#cardAllowedHint{
  margin-inline-start:auto; text-align:end; flex:none;
  font-size:12px; font-weight:800; color:var(--accent);
  white-space:nowrap; letter-spacing:-.2px;
}
#cardAllowedHint b{ font-weight:900; font-variant-numeric:tabular-nums; }
#cardAllowedHint.is-low{ color:var(--warn); }

/* ── بيانات الباقة — مكعبات بعناوين، 4/صف موبايل · 8/صف ديسكتوب، تملأ العرض ── */
.card-tpl-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-block-start:10px;
}
.card-tpl-grid[hidden]{ display:none; }
.card-tpl-grid .ctpl-cell{
  flex:1 1 calc(25% - 6px); min-inline-size:68px;   /* موبايل: 4 فى الصف، تكبر لتملأ لو أقل */
  display:flex; flex-direction:column; gap:3px;
  padding:8px 10px;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:10px;
  animation:ctplPop .34s cubic-bezier(.2,.9,.3,1.2) backwards;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-tpl-grid .ctpl-cell:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-sm);
}
@media (min-width:768px){
  .card-tpl-grid .ctpl-cell{ flex-basis:calc(12.5% - 7px); }   /* ديسكتوب: 8 فى الصف */
}
.card-tpl-grid .ctpl-l{ font-size:10.5px; font-weight:700; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-tpl-grid .ctpl-v{ font-size:14px; font-weight:900; color:var(--txt); letter-spacing:-.2px; white-space:nowrap; }
.card-tpl-grid .ctpl-cell.ctpl-price{ background:var(--ok-soft); border-color:hsl(150 70% 46% / .3); }
.card-tpl-grid .ctpl-cell.ctpl-price .ctpl-v{ color:var(--ok); }
.card-tpl-grid .ctpl-cell.ctpl-agent{ background:var(--accent-soft); border-color:var(--accent-line); }
.card-tpl-grid .ctpl-cell.ctpl-agent .ctpl-v{ color:var(--accent); }
.card-tpl-grid .ctpl-empty{ font-size:12px; font-weight:700; color:var(--txt-3); padding-block:4px; }
@keyframes ctplPop{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce){
  .card-tpl-grid .ctpl-cell{ animation:none; }
}

/* ── رابط "مجموعات الكروت" قصاد العنوان ── */
.cardf-back{ color:var(--txt-2); }
.cardf-back .ic{ inline-size:16px; block-size:16px; color:var(--accent); }

/* ── رسالة خطأ تحت الحقل (inline validation) ── */
.pkg-field.has-err .pkg-field-input{
  border-color:var(--bad);
  box-shadow:0 0 0 3px hsl(354 78% 58% / .16);
}
.pkg-field-err{
  display:flex; align-items:center; gap:6px;
  margin-block-start:6px; padding-inline:2px;
  color:var(--bad); font-size:11.5px; font-weight:800;
  animation:fadeUp .2s ease-out;
}
.pkg-field-err .ic{ inline-size:13px; block-size:13px; flex:none; color:var(--bad); }

/* ── الأزرار العائمة (إنشاء/إلغاء) — أزرار فقط، بدون طبقة/خلفية/حد ── */
.cardf-actionbar{
  position:fixed; z-index:34;
  inset-block-end:0;
  inset-inline-start:var(--sidebar-w);   /* يترك مكان الـ sidebar (يتبع الطى تلقائياً) */
  inset-inline-end:0;
  display:flex; gap:10px; align-items:center; justify-content:center;   /* توسيط المجموعة */
  padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  background:transparent; border:0;      /* لا طبقة ولا حد */
  pointer-events:none;                   /* الفراغ حوالين الأزرار شفاف للتمرير/الضغط */
  transition:inset-inline-start .25s ease;
}
.cardf-actionbar .btn{ pointer-events:auto; min-block-size:48px; font-size:14px; box-shadow:var(--shadow); }
/* عام لأى drawer: الزر الأساسى يكبر بحد أقصى، والثانوى ثابت — والاتنين متوسّطين */
.cardf-actionbar .btn-primary{ flex:1 1 auto; max-inline-size:360px; justify-content:center; }
.cardf-actionbar .btn:not(.btn-primary){ flex:0 0 auto; min-inline-size:120px; justify-content:center; }
/* مسافة سفلية فى الصفحة عشان آخر الفورم ما يتغطّاش بالشريط الثابت */
#cardDrawer, #pkgDrawer{ padding-block-end:104px; }
/* دخول opacity فقط (بدون transform) — عشان الـ transform بيكسر position:fixed للشريط */
#cardDrawer:not(.hidden), #pkgDrawer:not(.hidden){ animation:cardAddIn .28s ease-out; }
@keyframes cardAddIn{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:767px){
  .cardf-actionbar{
    inset-inline-start:0; inset-inline-end:0;
    inset-block-end:calc(56px + env(safe-area-inset-bottom));  /* فوق الـ bottombar */
    padding:10px 12px;
  }
  #cardDrawer, #pkgDrawer{ padding-block-end:calc(150px + env(safe-area-inset-bottom)); }
}

/* ── تفاصيل داخل نافذة التأكيد (showConfirm details) ── */
.cdlg-details{
  text-align:start; background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-md); padding:10px 12px; margin-block-end:16px;
  display:grid; gap:7px;
}
.cdlg-details .cdlg-drow{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; }
.cdlg-details .cdlg-dk{ color:var(--txt-3); font-weight:700; }
.cdlg-details .cdlg-dv{ color:var(--txt); font-weight:800; font-variant-numeric:tabular-nums; }

/* ══ سجل عمليات الكروت (cards_gen_log) ══ */
.cgl-stats{ margin-block-end:16px; }
.cgl-filters{ padding:14px; margin-block-end:16px; }
.cgl-filter-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.cgl-field{ display:flex; flex-direction:column; gap:5px; min-inline-size:0; }
.cgl-field label{ font-size:11px; font-weight:700; color:var(--txt-3); }
.cgl-field .pkg-field-unit{ inline-size:100%; min-block-size:40px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--card-line); color:var(--txt);
  font-size:13px; font-weight:700; padding:0 10px; }
/* ── قايمة السجل — صفوف بنفس لغة #cards_options ──────────────
   الجدول القديم كان بـ white-space:nowrap + سكرول أفقى، يعنى على
   الموبايل لازم تسحب يمين وشمال عشان تقرا سطر واحد. الصفوف دى
   بتلتف لوحدها ومالهاش سكرول.
   الألوان من نفس لوحة st-* اللى فى cards.css.              */
.cgl-list{ display:flex; flex-direction:column; gap:9px; }
.cgl-item{
  position:relative;
  background:var(--st-bg,var(--surface));
  border:1px solid var(--st-line,var(--cok-line,var(--card-line)));
  border-radius:var(--r-md);
  padding:11px 13px;
  padding-inline-start:17px;                /* مكان الشريط الجانبى */
  display:flex; flex-direction:column; gap:7px;
  box-shadow:var(--cok-rest,none);
  transition:border-color .18s ease;
}
.cgl-item::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:4px; background:var(--st-mark,var(--card-line)); pointer-events:none;
  border-start-start-radius:var(--r-md); border-end-start-radius:var(--r-md);
}
@media (hover:hover){ .cgl-item:hover{ border-color:var(--accent); } }

.cgl-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cgl-dt{
  margin-inline-start:auto; white-space:nowrap;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px;
  font-variant-numeric:tabular-nums; color:var(--txt-3);
}
.cgl-msg{ font-size:13px; font-weight:700; color:var(--txt); line-height:1.5; overflow-wrap:anywhere; }

.cgl-details{ display:flex; flex-wrap:wrap; gap:6px; }
.cgl-d{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--card-line);
  font-size:11px; font-weight:700; color:var(--txt-2); max-inline-size:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cgl-d b{ color:var(--txt); font-weight:800; font-variant-numeric:tabular-nums; }
.cgl-d.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; direction:ltr; cursor:pointer; }
.cgl-d.mono:hover{ border-color:var(--accent); color:var(--accent); }
.cgl-d.err{ background:var(--bad-soft); border-color:hsl(354 78% 58% / .3); color:var(--bad); white-space:normal; }

.cgl-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-block-start:6px; border-block-start:1px solid var(--card-line); }
.cgl-ip{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  color:var(--txt-3); direction:ltr; }
.cgl-err{ color:var(--bad); font-weight:800; }
.cgl-admin{ display:inline-block; padding:2px 8px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:800; }
.cgl-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:800; white-space:nowrap; flex:none;
  background:var(--surface-2); border:1px solid var(--card-line); color:var(--txt-2); }
.cgl-badge .ic{ inline-size:12px; block-size:12px; }
.cgl-badge[data-kind="ok"]  { background:var(--ok-soft);   color:var(--ok);   border-color:hsl(150 70% 46% / .3); }
.cgl-badge[data-kind="bad"] { background:var(--bad-soft);  color:var(--bad);  border-color:hsl(354 78% 58% / .3); }
.cgl-badge[data-kind="warn"]{ background:var(--warn-soft); color:var(--warn); border-color:hsl(38 92% 54% / .3); }
.cgl-badge[data-kind="info"]{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }

.cgl-more{ display:flex; justify-content:center; padding-block-start:12px; }
.cgl-shown{ text-align:center; font-size:11.5px; color:var(--txt-3); padding-block-start:8px; }

.cgl-skel{ display:flex; flex-direction:column; gap:10px; padding:12px; }
.cgl-skel .cgl-row{ display:flex; align-items:center; gap:12px; }
@media (max-width:767px){
  .cgl-filter-row{ grid-template-columns:1fr 1fr; }
  .cgl-item{ padding:10px 11px; padding-inline-start:15px; }
  .cgl-dt{ font-size:11px; }
}

/* ══ فحص الكروت (card_check) ══ */
.cck-search{ padding:16px; margin-block-end:16px; max-inline-size:560px; }
.cck-label{ display:block; font-size:13px; font-weight:800; color:var(--txt); margin-block-end:8px; }
.cck-field{ display:flex; gap:8px; }
.cck-field input{ flex:1; min-inline-size:0; min-block-size:46px; padding:0 14px;
  border-radius:12px; border:1px solid var(--card-line); background:var(--surface-2);
  color:var(--txt); font-size:16px; font-weight:700; outline:none; transition:border-color .15s, box-shadow .15s; }
.cck-field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cck-field input.cck-err{ border-color:var(--bad); box-shadow:0 0 0 3px hsl(354 78% 58% / .16); }
.cck-field .btn{ min-block-size:46px; min-inline-size:100px; justify-content:center; }
.cck-alert{ margin-block-start:12px; padding:12px 14px; border-radius:12px; font-size:13px; font-weight:700; line-height:1.8; }
.cck-alert[hidden]{ display:none; }
.cck-alert .ic{ inline-size:15px; block-size:15px; vertical-align:-2px; }
.cck-alert-bad{ background:var(--bad-soft); color:var(--bad); }
.cck-alert-warn{ background:var(--warn-soft); color:var(--warn); }
.cck-result{ padding:16px; max-inline-size:560px; }
.cck-result[hidden]{ display:none; }
.cck-rhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-block-end:14px; }
.cck-rhead h3{ margin:0; font-size:16px; font-weight:900; color:var(--txt); }
.cck-badge{ padding:5px 13px; border-radius:99px; font-size:12px; font-weight:800; color:#fff; background:var(--accent); }
.cck-badge[data-kind="ok"]  { background:var(--ok); }
.cck-badge[data-kind="bad"] { background:var(--bad); }
.cck-badge[data-kind="info"]{ background:var(--accent); }
.cck-rows{ display:flex; flex-direction:column; gap:7px; }
.cck-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface-2); border:1px solid var(--card-line); border-radius:10px; padding:10px 12px; }
.cck-k{ display:flex; align-items:center; gap:8px; color:var(--txt-3); font-size:13px; font-weight:700; }
.cck-k .ic{ inline-size:16px; block-size:16px; color:var(--accent); }
.cck-v{ font-weight:800; font-size:13.5px; color:var(--txt); text-align:end; word-break:break-word; }
.cck-v.ltr{ direction:ltr; unicode-bidi:embed; }
.cck-copy{ margin-block-start:14px; inline-size:100%; justify-content:center; }

/* ══ حذف الكروت المنتهية (cards_expired) ══ */
.cxp-warn{ display:flex; align-items:flex-start; gap:9px; margin-block-end:16px;
  padding:12px 14px; border-radius:12px; background:var(--warn-soft); border:1px solid hsl(38 92% 54% / .3);
  color:var(--txt-2); font-size:12.5px; font-weight:700; line-height:1.7; }
.cxp-warn .ic{ inline-size:18px; block-size:18px; color:var(--warn); flex:none; margin-block-start:1px; }
.cxp-warn b{ color:var(--warn); }
.cxp-stats{ margin-block-end:16px; }
.cxp-card{ padding:16px; margin-block-end:16px; }
.cxp-card-head{ display:flex; flex-direction:column; gap:2px; margin-block-end:12px; }
.cxp-card-head b{ font-size:14px; font-weight:900; color:var(--txt); }
.cxp-card-head small{ font-size:11.5px; color:var(--txt-3); font-weight:600; }
.cxp-periods{ display:flex; flex-wrap:wrap; gap:7px; }
.cxp-period{ padding:7px 13px; border-radius:99px; font-size:12px; font-weight:800;
  background:var(--surface-2); border:1px solid var(--card-line); color:var(--txt-2); cursor:pointer;
  transition:all .15s; }
.cxp-period:hover{ border-color:var(--accent-line); }
.cxp-period.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent,#fff); }
.cxp-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cxp-btn-danger{ background:var(--bad); color:#fff; border:0; }
.cxp-btn-danger:hover{ filter:brightness(.94); }
.cxp-table-wrap{ overflow-x:auto; margin-block-start:12px; }
.cxp-table{ inline-size:100%; border-collapse:collapse; font-size:12.5px; }
.cxp-table thead th{ text-align:start; font-size:11px; font-weight:800; color:var(--txt-3);
  padding:9px 10px; border-block-end:1px solid var(--card-line); white-space:nowrap; }
.cxp-table tbody td{ padding:9px 10px; border-block-end:1px solid var(--card-line); color:var(--txt-2); }
.cxp-table code{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--txt); }
.cxp-table .cxp-dt{ white-space:nowrap; color:var(--txt-3); }
.cxp-tag{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:var(--surface-3); color:var(--txt-2); }
.cxp-tag-new{ background:var(--ok-soft); color:var(--ok); }
.cxp-note, .cxp-loading{ font-size:11.5px; font-weight:700; color:var(--txt-3); padding:8px 2px; }
.cxp-auto-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cxp-auto-row > span{ font-size:13px; font-weight:700; color:var(--txt); }
.cxp-auto-period{ min-inline-size:120px; min-block-size:40px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--card-line); color:var(--txt); font-weight:700; padding:0 10px; }
.cxp-auto-meta{ margin-block-start:10px; font-size:11.5px; font-weight:600; color:var(--txt-3); }
.cxp-auto-meta b{ color:var(--txt-2); font-weight:800; }
.cxp-switch{ position:relative; display:inline-block; inline-size:42px; block-size:24px; flex:none; }
.cxp-switch input{ opacity:0; inline-size:0; block-size:0; }
.cxp-switch-slider{ position:absolute; inset:0; cursor:pointer; background:var(--surface-3);
  border-radius:99px; transition:.2s; }
.cxp-switch-slider::before{ content:""; position:absolute; block-size:18px; inline-size:18px; inset-block-start:3px;
  inset-inline-start:3px; background:#fff; border-radius:50%; transition:.2s; }
.cxp-switch input:checked + .cxp-switch-slider{ background:var(--accent); }
.cxp-switch input:checked + .cxp-switch-slider::before{ transform:translateX(18px); }
[dir="rtl"] .cxp-switch input:checked + .cxp-switch-slider::before{ transform:translateX(-18px); }

.skel{
  background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size:200% 100%; border-radius:var(--r-sm);
  animation:shimmer 1.6s linear infinite;
}
.empty{
  display:grid; place-items:center; gap:8px;
  padding:30px 16px; color:var(--txt-3);
}
.empty .ic{ inline-size:32px; block-size:32px; opacity:.5; }
.empty b{ font-size:13px; font-weight:800; color:var(--txt-2); }
.empty span{ font-size:11.5px; font-weight:700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes pulse{ 50%{ opacity:.3; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes wave{ 0%, 100%{ transform:rotate(0); } 25%{ transform:rotate(15deg); } 75%{ transform:rotate(-15deg); } }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.bento > *{ animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) backwards; }
.bento > *:nth-child(1){ animation-delay:.02s; }
.bento > *:nth-child(2){ animation-delay:.05s; }
.bento > *:nth-child(3){ animation-delay:.08s; }
.bento > *:nth-child(4){ animation-delay:.11s; }
.bento > *:nth-child(5){ animation-delay:.14s; }
.bento > *:nth-child(6){ animation-delay:.17s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REMEMBER ME SWITCH (login)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.remember-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 2px 16px;
  font-size:12.5px; font-weight:700; color:var(--txt-2);
  cursor:pointer; user-select:none;
}
.switch{ position:relative; flex:none; }
.switch input{ position:absolute; opacity:0; inline-size:0; block-size:0; pointer-events:none; }
.switch-track{
  display:inline-block; inline-size:40px; block-size:22px;
  background:var(--surface-3); border-radius:99px;
  position:relative; transition:background .25s;
}
.switch-thumb{
  position:absolute; inset-block-start:3px; inset-inline-start:3px;
  inline-size:16px; block-size:16px;
  background:var(--surface); border-radius:50%;
  box-shadow:0 1px 3px hsl(228 30% 3% / .3);
  transition:transform .25s, background .25s;
}
[dir="ltr"] .switch input:checked + .switch-track .switch-thumb{ transform:translateX(18px); }
[dir="rtl"] .switch input:checked + .switch-track .switch-thumb{ transform:translateX(-18px); }
.switch input:checked + .switch-track{
  background:var(--accent);
  box-shadow:0 0 8px hsl(var(--ac-glow) / .4);
}
.switch input:checked + .switch-track .switch-thumb{
  background:var(--on-accent);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KPI STRIP — 6-card variant (Home page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-strip-6{
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
}
/* extra KPI colors (violet + amber) */
.kpi-card[data-kind="violet"]{
  --kpi-bg:hsl(258 72% 58% / .14);
  --kpi-color:hsl(258 72% 70%);
}
[data-theme="light"] .kpi-card[data-kind="violet"]{ --kpi-color:hsl(258 72% 50%); }
.kpi-card[data-kind="amber"]{
  --kpi-bg:hsl(34 92% 50% / .14);
  --kpi-color:hsl(34 92% 60%);
}
[data-theme="light"] .kpi-card[data-kind="amber"]{ --kpi-color:hsl(34 92% 44%); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KPI CARD — Centered layout (v101-style)
   ━━ مرتبات عمودياً مع المحاذاة الوسطى ━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-card.kpi-mini{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:14px 8px;
  min-block-size:96px;
  position:relative;
  overflow:hidden;
}
.kpi-card.kpi-mini::before{
  /* subtle gradient overlay */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, var(--kpi-bg, var(--accent-soft)) 0%, transparent 60%);
  opacity:.6;
}
.kpi-card.kpi-mini > *{ position:relative; }
.kpi-card.kpi-mini .kpi-badge{
  inline-size:38px; block-size:38px;
  margin:0 0 2px;
  background:var(--kpi-bg, var(--accent-soft));
  color:var(--kpi-color, var(--accent));
  border-radius:10px;
  box-shadow:0 4px 10px hsl(228 30% 3% / .12);
}
.kpi-card.kpi-mini .kpi-badge .ic{ inline-size:20px; block-size:20px; }
.kpi-card.kpi-mini .kpi-value{
  font-size:20px;
  font-weight:900;
  line-height:1;
  margin:0;
  color:var(--kpi-color, var(--accent));
  letter-spacing:-.3px;
}
.kpi-card.kpi-mini .kpi-value:empty,
.kpi-card.kpi-mini .kpi-value[data-empty="1"]{
  display:none;
}
.kpi-card.kpi-mini .kpi-title{
  font-size:11.5px;
  font-weight:700;
  color:var(--txt-2);
  line-height:1.2;
  margin:0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APPEARANCE SHEET (bottom drawer — v101 style)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sheet-scrim{
  position:fixed; inset:0; z-index:60;
  background:hsl(228 30% 3% / .55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.sheet-scrim.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:62;
  max-width:480px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--card-line); border-block-end:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow); max-block-size:90dvh; overflow-y:auto;
}
.sheet.open{ transform:translateY(0); }
.sheet .grip{
  inline-size:42px; block-size:5px;
  border-radius:99px; background:var(--surface-3);
  margin:4px auto 16px;
}
.sheet h3{
  font-size:15px; font-weight:900;
  display:flex; gap:8px; align-items:center;
  margin-block-end:6px;
}
.sheet h3 .ic{ inline-size:18px; block-size:18px; color:var(--accent); }
.opt-lbl{
  font-size:11.5px; font-weight:800; color:var(--txt-3);
  margin-block:14px 8px;
}
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{
  inline-size:40px; block-size:40px;
  border-radius:50%; border:3px solid transparent;
  position:relative; transition:transform .15s;
  cursor:pointer;
}
.swatch:hover{ transform:scale(1.08); }
.swatch:active{ transform:scale(.9); }
.swatch.sel{ border-color:var(--txt); }
.swatch.sel::after{
  content:"✓"; position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:900; font-size:15px;
  text-shadow:0 1px 2px hsl(228 30% 3% / .4);
}
.seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-md); padding:4px;
}
.seg button{
  padding:9px 6px; border-radius:calc(var(--r-md) - 4px);
  font-size:12px; font-weight:800; color:var(--txt-3);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .2s, color .2s;
}
.seg button .ic{ inline-size:15px; block-size:15px; }
.seg button.sel{
  background:var(--surface); color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.seg button:hover:not(.sel){ color:var(--txt-2); }
.sheet-actions{ margin-block-start:18px; display:flex; justify-content:flex-end; }
.sheet-actions .btn{
  padding:10px 18px; min-block-size:42px;
  background:var(--accent); color:var(--on-accent); border-color:transparent;
  box-shadow:var(--glow);
}
.sheet-actions .btn:hover{ background:var(--accent-strong); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS GRID — 12 stat cards (6×2 / 4×3 / 3×4 / 2×6)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  margin-block-end:18px;
}
.stats-grid > .kpi-card{
  /* compact size for grid */
  min-block-size:92px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTIFICATIONS — Tabs + Settings (v101-inspired)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ntab-bar{
  display:flex; gap:4px;
  background:var(--surface-2); border-block-end:1px solid var(--card-line);
  padding:6px 8px;
}
.ntab{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:8px 6px;
  border-radius:var(--r-sm);
  color:var(--txt-2); font-size:12.5px; font-weight:800;
  transition:background .15s, color .15s;
  position:relative;
}
.ntab:hover{ background:var(--surface); }
.ntab.active{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 4px 12px hsl(var(--ac-glow) / .35);
}
.ntab .ic{ inline-size:14px; block-size:14px; }
.ntab-badge{
  display:inline-grid; place-items:center;
  min-inline-size:18px; block-size:18px;
  padding:0 5px;
  border-radius:99px;
  background:var(--bad); color:#fff;
  font-size:10px; font-weight:900;
  font-family:'JetBrains Mono',monospace;
}
.ntab.active .ntab-badge{ background:rgba(255,255,255,.25); }
.ntab-panel{ flex:1; display:flex; flex-direction:column; min-block-size:0; }
.ntab-panel[hidden]{ display:none; }
.ntab-scroll{
  flex:1; overflow-y:auto;
  padding:10px 12px;
  max-block-size:380px;
}
.ntab-scroll::-webkit-scrollbar{ inline-size:5px; }
.ntab-scroll::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:3px; }

/* Section title + info card + divider */
.nsec-title{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; color:var(--txt);
  margin-block:6px 8px;
}
.nsec-title .ic{
  inline-size:14px; block-size:14px;
  color:var(--accent);
}
.nsec-info{
  display:flex; gap:9px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  padding:10px 12px; margin-block-end:10px;
}
.nsec-info .ic{
  flex:none; inline-size:16px; block-size:16px;
  color:var(--accent); margin-block-start:2px;
}
.nsec-info b{
  display:block; font-size:12px; color:var(--accent-strong);
  font-weight:800; margin-block-end:4px;
}
.nsec-info span{
  font-size:10.5px; color:var(--txt-2);
  font-weight:600; line-height:1.6;
}
.nsec-divider{
  block-size:1px; background:var(--card-line);
  margin-block:14px; opacity:.6;
}

/* Status row */
.nsec-status{
  display:flex; align-items:center; gap:9px;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-sm);
  padding:10px 12px; margin-block-end:8px;
}
.nsec-status .ns-dot{
  inline-size:10px; block-size:10px; border-radius:50%;
  background:var(--txt-3); flex:none;
  transition:background .25s, box-shadow .25s;
}
.nsec-status.ok .ns-dot{
  background:var(--ok);
  box-shadow:0 0 8px hsl(150 70% 46% / .6);
}
.nsec-status.warn .ns-dot{ background:var(--warn); }
.nsec-status.bad .ns-dot{ background:var(--bad); }
.nsec-status > div{ flex:1; min-inline-size:0; }
.nsec-status b{
  display:block; font-size:12.5px; font-weight:800;
}
.nsec-status small{
  display:block; font-size:10.5px; color:var(--txt-3); font-weight:600;
}

/* Toggle row (with switch) */
.nsec-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0;
  cursor:pointer;
}
.nsec-toggle + .nsec-toggle{ border-block-start:1px solid var(--card-line); }
.nsec-toggle > div{ flex:1; min-inline-size:0; }
.nsec-toggle b{
  display:block; font-size:12.5px; font-weight:800; color:var(--txt);
}
.nsec-toggle small{
  display:block; font-size:10.5px; color:var(--txt-3); font-weight:600;
  margin-block-start:2px;
}

/* Buttons (settings tab) */
.ns-btn{
  inline-size:100%;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  font-size:12.5px; font-weight:800;
  cursor:pointer; transition:transform .15s, opacity .2s;
  margin-block-end:6px;
}
.ns-btn:active{ transform:scale(.98); }
.ns-btn .ic{ inline-size:15px; block-size:15px; }
.ns-btn-primary{
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 4px 12px hsl(var(--ac-glow) / .35);
}
.ns-btn-primary:hover{ background:var(--accent-strong); }
.ns-btn-ghost{
  background:var(--surface-2); color:var(--txt);
  border:1px solid var(--card-line);
}
.ns-btn-ghost:hover{ background:var(--surface-3); }
.ns-btn-danger{
  background:var(--bad-soft); color:var(--bad);
  border:1px solid hsl(354 78% 58% / .35);
}
.ns-btn-danger:hover{
  background:var(--bad); color:#fff; border-color:var(--bad);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIRM DIALOG (v101-style modal)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cdlg-scrim{
  position:fixed; inset:0; z-index:9500;
  background:hsl(228 30% 3% / .62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:grid; place-items:center;
  padding:18px;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.cdlg-scrim.open{ opacity:1; pointer-events:auto; }
.cdlg-card{
  width:100%; max-width:360px;
  background:var(--surface); border:1px solid var(--card-line);
  border-radius:var(--r-lg); padding:22px 20px 18px;
  box-shadow:var(--shadow);
  transform:scale(.92); opacity:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.cdlg-scrim.open .cdlg-card{
  transform:scale(1); opacity:1;
}
.cdlg-icon{
  inline-size:54px; block-size:54px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cd-bg, var(--accent-soft));
  color:var(--cd-color, var(--accent));
  margin-inline:auto; margin-block-end:14px;
}
.cdlg-icon .ic{ inline-size:26px; block-size:26px; }
.cdlg-card[data-kind="warn"]{ --cd-bg:var(--warn-soft); --cd-color:var(--warn); }
.cdlg-card[data-kind="bad"] { --cd-bg:var(--bad-soft);  --cd-color:var(--bad); }
.cdlg-card[data-kind="ok"]  { --cd-bg:var(--ok-soft);   --cd-color:var(--ok); }
.cdlg-card[data-kind="info"]{ --cd-bg:var(--info-soft); --cd-color:var(--info); }
.cdlg-title{
  text-align:center;
  font-size:16px; font-weight:900;
  margin-block-end:6px;
}
.cdlg-msg{
  text-align:center;
  font-size:13px; color:var(--txt-2);
  font-weight:600; line-height:1.6;
  margin-block-end:18px;
}
.cdlg-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.cdlg-actions button{
  padding:11px 12px;
  border-radius:var(--r-sm);
  font-size:13px; font-weight:800;
  cursor:pointer;
  min-block-size:42px;
  transition:transform .15s, background .2s;
}
.cdlg-actions button:active{ transform:scale(.97); }
.cdlg-btn-cancel{
  background:var(--surface-2); color:var(--txt);
  border:1px solid var(--card-line);
}
.cdlg-btn-cancel:hover{ background:var(--surface-3); }
.cdlg-btn-confirm{
  background:var(--cd-color, var(--accent));
  color:#fff; border:0;
}
.cdlg-card[data-kind="bad"] .cdlg-btn-confirm{ background:var(--bad); }
.cdlg-card[data-kind="warn"] .cdlg-btn-confirm{ background:var(--warn); color:#000; }
/* نافذة بـ ٣ أزرار عمودية (اختيار وضع بورت API) */
.cdlg-actions.cdlg-actions-col{ grid-template-columns:1fr; }
.cdlg-actions .cdlg-btn-alt{
  background:var(--surface-2); color:var(--txt);
  border:1px solid var(--card-line); border-radius:var(--r-sm);
  padding:11px 12px; font-size:13px; font-weight:800; cursor:pointer; min-block-size:42px;
  transition:transform .15s, background .2s;
}
.cdlg-actions .cdlg-btn-alt:hover{ background:var(--surface-3); border-color:var(--accent-line); }
.cdlg-actions .cdlg-btn-alt:active{ transform:scale(.97); }

/* Telegram button + devices list */
.ns-btn-tg{
  background:#0088cc; color:#fff; border:0;
  box-shadow:0 4px 12px rgba(0,136,204,.35);
}
.ns-btn-tg:hover{ background:#0077b3; }

.devices-section{
  margin-block-start:10px; padding:10px;
  background:var(--surface-2); border:1px solid var(--card-line);
  border-radius:var(--r-sm);
}
.devices-head{
  display:flex; align-items:center; gap:7px;
  margin-block-end:8px;
}
.devices-head .ic{ inline-size:14px; block-size:14px; color:var(--accent); }
.devices-head b{ font-size:12px; font-weight:800; flex:1; }
.devices-head span{
  font-size:10.5px; font-weight:800;
  padding:2px 7px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent);
  font-family:'JetBrains Mono',monospace;
}
.dev-item{
  display:flex; align-items:center; gap:9px;
  padding:8px 4px;
}
.dev-item + .dev-item{ border-block-start:1px solid var(--card-line); }
.dev-icon{
  inline-size:30px; block-size:30px; flex:none;
  display:grid; place-items:center; border-radius:8px;
  background:var(--accent-soft); color:var(--accent);
}
.dev-icon .ic{ inline-size:15px; block-size:15px; }
.dev-info{ flex:1; min-inline-size:0; }
.dev-info b{
  display:block; font-size:11.5px; font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dev-info small{
  display:block; font-size:10px; color:var(--txt-3); font-weight:600;
  font-family:'JetBrains Mono',monospace;
}
.dev-this{
  font-size:9.5px; font-weight:800;
  padding:2px 6px; border-radius:99px;
  background:var(--ok-soft); color:var(--ok);
}

/* ════════════════════════════════════════════════════════════
   🎉 Celebrate / 🚨 Alert — Modal للنجاح/الخطأ مع confetti
   (Ported من subscriber portal v101)
   ════════════════════════════════════════════════════════════ */
.celebrate-bg{
  position:fixed; inset:0; z-index:9000; pointer-events:none; overflow:hidden;
}
.celebrate-bg .conf{
  position:absolute; inline-size:10px; block-size:14px; inset-block-start:-20px;
  opacity:0; will-change:transform,opacity;
  animation:confFall var(--d,3s) cubic-bezier(.2,.55,.4,1) var(--delay,0s) forwards;
}
.celebrate-bg .conf.round{ border-radius:50%; }
.celebrate-bg .conf.tri{
  inline-size:0; block-size:0; background:transparent !important;
  border-inline-start:7px solid transparent; border-inline-end:7px solid transparent;
  border-block-end:12px solid var(--c);
}
@keyframes confFall{
  0%   { transform:translateY(-20px) translateX(0) rotate(0); opacity:1; }
  100% { transform:translateY(110vh) translateX(var(--drift,40px)) rotate(var(--spin,720deg)); opacity:.85; }
}

.celebrate-card{
  position:fixed; inset:0; z-index:9001; display:grid; place-items:center;
  padding:20px; pointer-events:none;
  animation:celFadeIn .35s ease-out;
  background:rgba(0,0,0,.55);
}
.celebrate-card .cel-inner{
  background:var(--surface); border:2px solid var(--accent);
  border-radius:18px; padding:32px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 60px hsl(var(--ac-glow,var(--ac-h) var(--ac-s) var(--ac-l)) / .35);
  display:grid; place-items:center; gap:10px;
  inline-size:min(380px,100%); text-align:center;
  pointer-events:auto;
  animation:celPop .55s cubic-bezier(.34,1.56,.64,1);
}
.celebrate-card[data-type="error"] .cel-inner{
  border-color:var(--bad);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 60px hsl(354 78% 58% / .35);
  animation:celPop .55s cubic-bezier(.34,1.56,.64,1), celShake .5s ease-in-out .55s;
}
.celebrate-card .cel-check{
  inline-size:72px; block-size:72px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent)));
  color:white;
  box-shadow:0 6px 20px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .5);
  animation:celCheckIn .5s cubic-bezier(.34,1.56,.64,1) .15s backwards;
}
.celebrate-card[data-type="error"] .cel-check{
  background:linear-gradient(135deg, var(--bad), hsl(354 78% 48%));
  box-shadow:0 6px 20px hsl(354 78% 58% / .5);
}
.celebrate-card .cel-check .ic{ inline-size:38px; block-size:38px; }
.celebrate-card .cel-title{
  font-size:18px; font-weight:900; color:var(--txt); line-height:1.3;
  margin-block-start:6px;
}
.celebrate-card .cel-sub{
  font-size:13.5px; color:var(--txt-2); line-height:1.5;
  max-inline-size:300px;
}
.celebrate-card .cel-amount{
  font-size:32px; font-weight:900; color:var(--accent);
  line-height:1; margin-block:6px;
}
.celebrate-card .cel-amount small{ font-size:14px; color:var(--txt-2); margin-inline-start:4px; }
.celebrate-card .cel-balance{
  font-size:12.5px; color:var(--txt-2);
  background:var(--surface-2); border:1px solid var(--line);
  padding:8px 14px; border-radius:99px;
}
.celebrate-card .cel-balance b{ color:var(--txt); font-weight:800; }
.celebrate-card .cel-actions{
  display:flex; gap:10px; margin-block-start:14px; flex-wrap:wrap; justify-content:center;
}
.celebrate-card .cel-close,
.celebrate-card .cel-primary{
  padding:10px 22px; border-radius:99px; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:800;
  transition:transform .12s ease;
}
.celebrate-card .cel-close{
  background:var(--surface-2); color:var(--txt-2);
  border:1px solid var(--line);
}
.celebrate-card .cel-primary{
  background:var(--accent); color:white;
  box-shadow:0 4px 12px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .35);
}
.celebrate-card .cel-close:active,
.celebrate-card .cel-primary:active{ transform:scale(.96); }

@keyframes celFadeIn{ from{background:rgba(0,0,0,0)} to{background:rgba(0,0,0,.55)} }
@keyframes celPop{
  0%   { transform:scale(.6);   opacity:0; }
  60%  { transform:scale(1.06); opacity:1; }
  100% { transform:scale(1);    opacity:1; }
}
@keyframes celCheckIn{
  0%   { transform:scale(0) rotate(-45deg); opacity:0; }
  100% { transform:scale(1) rotate(0);      opacity:1; }
}
@keyframes celShake{
  0%, 100%{ transform:translateX(0); }
  20%, 60%{ transform:translateX(-6px); }
  40%, 80%{ transform:translateX(6px); }
}
.celebrate-card.closing{ animation:celFadeOut .25s ease-in forwards; }
.celebrate-card.closing .cel-inner{ animation:celShrink .25s ease-in forwards; }
@keyframes celFadeOut{ from{background:rgba(0,0,0,.55)} to{background:rgba(0,0,0,0);visibility:hidden} }
@keyframes celShrink{ to{ transform:scale(.85); opacity:0; } }

/* ════════════════════════════════════════════════════════════
   📞 Telegram Bot UI — Ported من subscriber portal
   ════════════════════════════════════════════════════════════ */
.tg-spinner{
  inline-size:36px; block-size:36px;
  border:3px solid var(--surface-2); border-block-start-color:#0088cc;
  border-radius:50%; animation:tgSpin .8s linear infinite;
}
@keyframes tgSpin{ to{ transform:rotate(360deg); } }

.tg-status{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:10px; border:1px solid var(--line);
}
.tg-status.active{ background:linear-gradient(135deg,hsl(140 60% 45% / .12),hsl(140 60% 45% / .04)); border-color:var(--ok); }
.tg-status.inactive{ background:var(--surface-2); }
.tg-status .ts-ic{
  inline-size:36px; block-size:36px; flex:none; display:grid; place-items:center;
  border-radius:8px; background:#0088cc; color:#fff;
}
.tg-status.inactive .ts-ic{ background:var(--txt-3); }
.tg-status .ts-ic .ic{ inline-size:20px; block-size:20px; }
.tg-status .ts-txt{ flex:1; min-inline-size:0; display:grid; gap:1px; }
.tg-status .ts-txt b{ font-size:13px; font-weight:800; color:var(--txt); }
.tg-status .ts-txt span{ font-size:11px; color:var(--txt-3); font-weight:600; }

.tg-acc-list{ display:grid; gap:7px; max-block-size:230px; overflow-y:auto; padding-block:2px; }
.tg-acc{
  display:flex; align-items:center; gap:9px; padding:9px 10px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px;
}
.tg-acc-avatar{
  inline-size:32px; block-size:32px; flex:none; border-radius:50%;
  background:linear-gradient(135deg,#0088cc,#005c8a); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800; text-transform:uppercase;
}
.tg-acc-info{ flex:1; min-inline-size:0; display:grid; gap:1px; }
.tg-acc-name{ font-size:12.5px; font-weight:700; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-acc-meta{ font-size:10.5px; color:var(--txt-3); font-weight:600; }
.tg-acc-del{
  inline-size:28px; block-size:28px; flex:none; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  color:var(--bad); cursor:pointer; display:grid; place-items:center;
}
.tg-acc-del:hover{ background:hsl(354 78% 58% / .1); }
.tg-acc-del .ic{ inline-size:14px; block-size:14px; }

.tg-actions{ display:grid; gap:7px; margin-block-start:6px; }
.tg-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 12px; border-radius:10px; border:0; cursor:pointer;
  font:inherit; font-weight:800; font-size:13px; text-decoration:none;
}
.tg-btn.primary{ background:#0088cc; color:#fff; }
.tg-btn.danger{ background:transparent; color:var(--bad); border:1px solid var(--bad); }
.tg-btn.subtle{ background:var(--surface-2); color:var(--txt-2); border:1px solid var(--line); }
.tg-btn .ic{ inline-size:14px; block-size:14px; }

/* Invite modal sub */
.tg-invite{ text-align:center; padding-block:6px; }
.tg-invite-msg{ font-size:12.5px; color:var(--txt-2); font-weight:600; margin-block-end:14px; line-height:1.5; }
.tg-invite-url{
  font-size:10.5px; color:var(--txt-3); padding:8px 10px; margin-block-start:10px;
  background:var(--surface-2); border-radius:8px; word-break:break-all;
  font-family:'JetBrains Mono', ui-monospace, monospace; user-select:all;
}
.tg-invite-btns{ display:grid; gap:7px; }
.tg-invite-btns a{ text-decoration:none; }

/* Telegram Sheet (bottom sheet للأدمن) */
.tg-sheet-bg{
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.55); animation:celFadeIn .25s ease-out;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width: 600px){
  .tg-sheet-bg{ align-items:center; }
}
.tg-sheet{
  background:var(--surface); border-radius:18px 18px 0 0;
  inline-size:100%; max-inline-size:480px;
  max-block-size:80vh; overflow-y:auto;
  padding:18px 18px 26px;
  animation:tgSheetUp .35s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.4);
}
@media (min-width: 600px){
  .tg-sheet{ border-radius:18px; max-block-size:85vh; }
}
@keyframes tgSheetUp{
  from{ transform:translateY(100%); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
.tg-sheet .grip{
  inline-size:42px; block-size:4px; border-radius:99px;
  background:var(--line); margin:0 auto 14px;
}
.tg-sheet h3{
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:900; color:var(--txt);
  margin:0 0 4px;
}
.tg-sheet h3 .ic{ inline-size:22px; block-size:22px; }
.tg-sheet .tg-note{
  font-size:11.5px; color:var(--txt-3); font-weight:600;
  margin-block-end:14px; line-height:1.5;
}

/* ════════════════════════════════════════════════════════════
   🖥️ Servers Page — MikroTik servers grid
   ════════════════════════════════════════════════════════════ */
.srv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:12px;
  margin-block-start:14px;
}
.srv-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:grid;
  gap:10px;
  position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.srv-card:hover{ border-color:var(--accent-line); }
.srv-card.is-primary{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.srv-card.is-primary::before{
  content:'';
  position:absolute; inset-block-start:0; inset-inline-end:14px;
  inline-size:30px; block-size:4px;
  background:var(--accent);
  border-radius:0 0 4px 4px;
}

/* Skeleton */
.srv-card.srv-skel{ padding:0; border:0; background:transparent; }
.srv-skel .skel{
  background:linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer{ to{ background-position:-200% 0; } }

/* Header row */
.srv-head{
  display:flex; align-items:center; gap:10px;
  border-block-end:1px solid var(--line);
  padding-block-end:10px;
}
.srv-logo{
  inline-size:44px; block-size:44px; flex:none;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent)));
  display:grid; place-items:center;
  color:#fff;
  font-weight:900; font-size:16px;
  text-transform:uppercase;
}
.srv-logo img{
  inline-size:100%; block-size:100%; object-fit:cover; border-radius:10px;
}
.srv-head-info{ flex:1; min-inline-size:0; }
.srv-name{
  font-size:14px; font-weight:800; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px;
}
.srv-name .ic-star{ inline-size:14px; block-size:14px; color:var(--accent); fill:var(--accent); }
.srv-id{
  font-size:11px; color:var(--txt-3); font-weight:700;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}

/* Status pill */
.srv-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:800;
}
.srv-status[data-online="true"]{ background:hsl(150 70% 46% / .14); color:var(--ok); }
.srv-status[data-online="false"]{ background:hsl(354 78% 58% / .14); color:var(--bad); }
.srv-status .ic{ inline-size:10px; block-size:10px; }
.srv-status .dot{
  inline-size:8px; block-size:8px; border-radius:50%;
}
.srv-status[data-online="true"] .dot{
  background:var(--ok); box-shadow:0 0 6px var(--ok);
  animation:srvPulse 2s ease-in-out infinite;
}
.srv-status[data-online="false"] .dot{ background:var(--bad); }
@keyframes srvPulse{
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.85); }
}

/* Info rows */
.srv-meta{
  display:grid; gap:5px;
  font-size:12px; color:var(--txt-2);
}
.srv-meta-row{
  display:flex; align-items:center; gap:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srv-meta-row .ic{ inline-size:13px; block-size:13px; color:var(--txt-3); flex:none; }
.srv-meta-row b{ color:var(--txt); font-weight:700; }

/* Stats footer */
.srv-stats{
  display:flex; gap:10px;
  border-block-start:1px solid var(--line);
  padding-block-start:10px;
}
.srv-stat{
  flex:1;
  text-align:center;
  background:var(--surface-2);
  padding:7px 4px;
  border-radius:8px;
}
.srv-stat-val{ font-size:14px; font-weight:900; color:var(--accent); font-family:'JetBrains Mono', ui-monospace, monospace; }
.srv-stat-lbl{ font-size:10px; color:var(--txt-3); font-weight:700; margin-block-start:2px; }

/* Actions toolbar */
.srv-actions{
  display:flex; gap:5px; flex-wrap:wrap;
}
.srv-btn{
  flex:1; min-inline-size:0;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 8px;
  border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--txt-2); cursor:pointer;
  font:inherit; font-size:11px; font-weight:700;
  transition:background .12s ease, color .12s ease;
}
.srv-btn:hover{ background:var(--surface); color:var(--txt); }
.srv-btn .ic{ inline-size:13px; block-size:13px; }
.srv-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.srv-btn.danger{ color:var(--bad); }
.srv-btn.danger:hover{ background:hsl(354 78% 58% / .1); }
.srv-btn.warn{ color:var(--warn, #f59e0b); }

/* Empty state */
.srv-empty{
  text-align:center; padding:60px 20px;
  display:grid; gap:8px; place-items:center;
}
.srv-empty h3{ font-size:16px; color:var(--txt); margin:6px 0 0; }
.srv-empty p{ font-size:12.5px; color:var(--txt-3); margin:0 0 14px; }

/* ═══ Add/Edit Server Modal ═══ */
.srv-form{ display:grid; gap:12px; }
.srv-form-field{ display:grid; gap:5px; }
.srv-form-field label{
  font-size:12px; font-weight:700; color:var(--txt-2);
  display:flex; align-items:center; gap:5px;
}
.srv-form-field label .req{ color:var(--bad); }
.srv-form-field input,
.srv-form-field textarea,
.srv-form-field select{
  inline-size:100%;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font:inherit; font-size:13px;
}
.srv-form-field input:focus,
.srv-form-field textarea:focus,
.srv-form-field select:focus{
  border-color:var(--accent); outline:none;
}
.srv-form-field textarea{ resize:vertical; min-block-size:64px; }
.srv-form-field small{ font-size:11px; color:var(--txt-3); }

/* ═══ Server Info Modal (15 sections) ═══ */
.srv-info-sheet{
  background:var(--surface); border-radius:18px 18px 0 0;
  inline-size:100%; max-inline-size:900px;
  max-block-size:88vh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr;
  animation:tgSheetUp .35s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 600px){
  .srv-info-sheet{ border-radius:18px; max-block-size:88vh; }
}
.srv-info-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-block-end:1px solid var(--line);
}
.srv-info-head h3{ flex:1; font-size:15px; margin:0; }
.srv-info-head .close{
  inline-size:30px; block-size:30px; border-radius:50%; border:0;
  background:var(--surface-2); color:var(--txt-2); cursor:pointer;
  display:grid; place-items:center;
}
.srv-info-body{
  display:grid; grid-template-columns:170px 1fr;
  overflow:hidden;
}
@media (max-width: 600px){
  .srv-info-body{ grid-template-columns:1fr; }
  .srv-info-tabs{ overflow-x:auto; display:flex !important; flex-direction:row; padding:8px !important; gap:5px; border-inline-end:0 !important; border-block-end:1px solid var(--line); }
  .srv-info-tab{ white-space:nowrap; }
}
.srv-info-tabs{
  display:flex; flex-direction:column; gap:2px; padding:10px 8px;
  background:var(--surface-2);
  border-inline-end:1px solid var(--line);
  overflow-y:auto;
}
.srv-info-tab{
  text-align:start;
  padding:8px 10px; border-radius:8px; border:0;
  background:transparent; color:var(--txt-2); cursor:pointer;
  font:inherit; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.srv-info-tab:hover{ background:var(--surface); }
.srv-info-tab.active{ background:var(--accent); color:#fff; }
.srv-info-tab .ic{ inline-size:13px; block-size:13px; }
.srv-info-content{
  overflow-y:auto; padding:14px 18px;
}
.srv-info-content .table{
  inline-size:100%; border-collapse:collapse; font-size:12px;
}
.srv-info-content .table th,
.srv-info-content .table td{
  padding:8px 10px;
  border-block-end:1px solid var(--line);
  text-align:start;
}
.srv-info-content .table th{
  font-weight:700; color:var(--txt-2);
  background:var(--surface-2);
  position:sticky; inset-block-start:0;
}
.srv-info-content .table td{ color:var(--txt); }
.srv-info-content .table td .pill{
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700;
}
.srv-info-content .table td .pill.ok{ background:hsl(150 70% 46% / .14); color:var(--ok); }
.srv-info-content .table td .pill.off{ background:hsl(354 78% 58% / .14); color:var(--bad); }
.srv-info-content .info-kvs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px;
}
.srv-info-content .kv{
  background:var(--surface-2); padding:10px 12px; border-radius:10px;
  display:grid; gap:3px;
}
.srv-info-content .kv-key{ font-size:11px; color:var(--txt-3); font-weight:700; }
.srv-info-content .kv-val{ font-size:13px; color:var(--txt); font-weight:800; font-family:'JetBrains Mono', ui-monospace, monospace; }

.srv-info-loading{
  padding:50px 0; text-align:center; color:var(--txt-3);
  display:grid; place-items:center; gap:8px;
}

/* srv-toggle (checkbox card style) */
.srv-toggle{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  font-size:12.5px; color:var(--txt-2); font-weight:700;
  transition:border-color .12s ease, background .12s ease;
}
.srv-toggle:hover{ border-color:var(--accent-line); }
.srv-toggle input[type=checkbox]{ display:none; }
.srv-toggle-vis{
  inline-size:32px; block-size:18px; flex:none;
  background:var(--line); border-radius:99px;
  position:relative; transition:background .15s ease;
}
.srv-toggle-vis::before{
  content:''; position:absolute; inset-block-start:2px; inset-inline-start:2px;
  inline-size:14px; block-size:14px; background:#fff; border-radius:50%;
  transition:transform .15s ease;
}
.srv-toggle input:checked + .srv-toggle-vis{ background:var(--accent); }
.srv-toggle input:checked + .srv-toggle-vis::before{ transform:translateX(-14px); }
.srv-toggle input:checked ~ span{ color:var(--txt); }

/* ════════════════════════════════════════════════════════════
   🎛️ Server Card — Dropdown Actions Menu
   ════════════════════════════════════════════════════════════ */
.srv-actions{
  display:flex; gap:6px; align-items:stretch;
}
.srv-actions .srv-btn{
  flex:1;
}
.srv-menu-wrap{
  position:relative; flex:none;
}
.srv-menu-toggle{
  flex:none !important; inline-size:38px;
}
.srv-menu{
  position:absolute;
  inset-block-start:calc(100% + 6px);
  inset-inline-end:0;
  min-inline-size:220px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  padding:5px;
  z-index:50;
  display:none;
  animation:srvMenuIn .18s ease-out;
}
.srv-menu.open{ display:block; }
@keyframes srvMenuIn{
  from{ opacity:0; transform:translateY(-6px) scale(.96); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}
.srv-menu-item{
  inline-size:100%;
  display:flex; align-items:center; gap:9px;
  padding:9px 11px;
  background:transparent; border:0; border-radius:8px;
  color:var(--txt); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700;
  text-align:start;
  transition:background .12s ease;
}
.srv-menu-item:hover{ background:var(--surface-2); }
.srv-menu-item .ic{ inline-size:15px; block-size:15px; color:var(--txt-3); flex:none; }
.srv-menu-item.warn      { color:var(--warn, #f59e0b); }
.srv-menu-item.warn .ic  { color:var(--warn, #f59e0b); }
.srv-menu-item.danger    { color:var(--bad); }
.srv-menu-item.danger .ic{ color:var(--bad); }
.srv-menu-sep{
  block-size:1px; background:var(--line); margin:4px 8px;
}

/* ════════════════════════════════════════════════════════════
   📸 Image Upload UI (Portal Images tab)
   ════════════════════════════════════════════════════════════ */
.img-upload-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.img-upload-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  display:grid; gap:10px;
}
.img-upload-card h4{
  margin:0; font-size:13px; font-weight:800;
  display:flex; align-items:center; gap:7px;
}
.img-upload-card h4 .ic{ inline-size:16px; block-size:16px; color:var(--accent); }
.img-preview{
  inline-size:100%;
  block-size:140px;
  background:var(--surface);
  border:2px dashed var(--line);
  border-radius:10px;
  display:grid; place-items:center;
  color:var(--txt-3); font-size:12px;
  overflow:hidden;
  position:relative;
}
.img-preview img{
  inline-size:100%; block-size:100%; object-fit:contain;
}
.img-preview.has-img{ border-style:solid; padding:6px; background:#fff; }
.img-upload-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px;
  background:var(--accent); color:#fff;
  border:0; border-radius:8px;
  cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700;
  transition:opacity .12s ease;
}
.img-upload-btn:hover{ opacity:.9; }
.img-upload-btn:disabled{ opacity:.5; cursor:not-allowed; }
.img-upload-btn .ic{ inline-size:15px; block-size:15px; }
.img-upload-note{
  font-size:11px; color:var(--txt-3);
  text-align:center;
}
.img-upload-card input[type=file]{ display:none; }

/* ════════════════════════════════════════════════════════════
   🎯 Server Actions Grid — 4 primary buttons فى 2x2
   ════════════════════════════════════════════════════════════ */
.srv-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-block-start:2px;
}
.srv-act-big{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:800;
  color:var(--txt);
  transition:all .15s ease;
  min-block-size:74px;
  position:relative;
  overflow:hidden;
}
.srv-act-big::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong, var(--accent)) 100%);
  opacity:0; transition:opacity .2s ease;
  z-index:0;
}
.srv-act-big > *{ position:relative; z-index:1; }
.srv-act-big:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 4px 12px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .15);
}
.srv-act-big:hover::before{ opacity:1; }
.srv-act-big:hover{ color:#fff; }
.srv-act-big .ic{
  inline-size:22px; block-size:22px;
  color:var(--accent);
  transition:color .15s ease;
}
.srv-act-big:hover .ic{ color:#fff; }
.srv-act-big:active{ transform:translateY(0); }

/* Menu row */
.srv-actions-menu{
  margin-block-start:4px;
}
.srv-actions-menu .srv-menu-toggle{
  inline-size:100%;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px;
  font-size:12.5px;
}
.srv-actions-menu .srv-menu{
  inset-inline-end:auto;
  inset-inline-start:0;
  inline-size:100%;
}

/* ضبط padding الـ card عشان الـ الـ grid يبان أفضل */
.srv-card{
  padding:14px;
  gap:11px;
}

/* ════════════════════════════════════════════════════════════
   🔧 Global [hidden] fix (يـ override أى display)
   ════════════════════════════════════════════════════════════ */
[hidden]{ display:none !important; }

/* ════════════════════════════════════════════════════════════
   🎨 Server Card — 6 compact actions (icon بجوار النص)
   ════════════════════════════════════════════════════════════ */
.srv-actions-mini{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  margin-block-start:2px;
}
@media (max-width: 380px){
  .srv-actions-mini{ grid-template-columns:1fr 1fr; }
}
.srv-act-mini{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:9px;
  cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700;
  color:var(--txt);
  transition:all .12s ease;
  white-space:nowrap;
}
.srv-act-mini:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateY(-1px);
}
.srv-act-mini .ic{
  inline-size:14px; block-size:14px;
  color:var(--accent);
  flex:none;
  transition:color .12s ease;
}
.srv-act-mini:hover .ic{ color:#fff; }
.srv-act-mini.warn .ic{ color:var(--warn, #f59e0b); }
.srv-act-mini.danger .ic{ color:var(--bad); }

/* ════════════════════════════════════════════════════════════
   ⬅️ Sheet Back Button + Header redesign
   ════════════════════════════════════════════════════════════ */
.srv-info-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-block-end:1px solid var(--line);
}
.srv-info-head .back-btn{
  inline-size:32px; block-size:32px;
  border-radius:50%; border:0;
  background:var(--surface-2);
  color:var(--txt-2); cursor:pointer;
  display:grid; place-items:center;
  font-size:18px;
  transition:background .12s ease, color .12s ease;
}
.srv-info-head .back-btn:hover{ background:var(--accent); color:#fff; }
.srv-info-head .back-btn .ic{ inline-size:18px; block-size:18px; }
.srv-info-head h3{ flex:1; font-size:14.5px; margin:0; font-weight:800; }
.srv-info-head h3 small{
  display:block; font-size:11px; font-weight:600; color:var(--txt-3);
  margin-block-start:2px;
}

/* ════════════════════════════════════════════════════════════
   📑 Portal Sheet — tabs أفقية فوق دايماً (mobile-first)
   ════════════════════════════════════════════════════════════ */
.srv-info-body{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  overflow:hidden;
}
.srv-info-tabs{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px !important;
  gap:5px;
  border-inline-end:0 !important;
  border-block-end:1px solid var(--line);
  background:var(--surface-2);
  flex:none;
  scrollbar-width:none;
}
.srv-info-tabs::-webkit-scrollbar{ display:none; }
.srv-info-tab{
  white-space:nowrap;
  padding:7px 12px;
  border-radius:8px;
  flex:none;
  font-size:12px;
}
.srv-info-tab .ic{ inline-size:14px; block-size:14px; }
.srv-info-content{
  overflow-y:auto;
  padding:16px;
  flex:1;
}

/* ════════════════════════════════════════════════════════════
   🏷️ Server Card — Header redesign (location + edit بجوار status)
   ════════════════════════════════════════════════════════════ */
.srv-head{
  display:flex; align-items:flex-start; gap:10px;
}
.srv-head-info{
  flex:1; min-inline-size:0;
  display:flex; flex-direction:column; gap:3px;
}
.srv-name{
  font-size:14px; font-weight:800; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px;
}
.srv-location{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--txt-3); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srv-location .ic{ inline-size:12px; block-size:12px; color:var(--txt-3); flex:none; }
.srv-head-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  flex:none;
}
.srv-edit-mini{
  display:flex; align-items:center; gap:4px;
  padding:4px 8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  font:inherit; font-size:10.5px; font-weight:700;
  color:var(--txt-2);
  transition:all .12s ease;
}
.srv-edit-mini:hover{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.srv-edit-mini .ic{ inline-size:11px; block-size:11px; }

/* Menu sections + hints */
.srv-menu-section{
  font-size:10px; font-weight:800; color:var(--txt-3);
  padding:8px 11px 4px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.srv-menu-section:first-child{ padding-top:4px; }
.srv-menu-item{
  position:relative;
}
.srv-menu-hint{
  position:absolute;
  inset-block-end:6px; inset-inline-start:34px;
  font-size:9.5px;
  color:var(--txt-3); font-weight:600;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.srv-menu-item:has(.srv-menu-hint){ padding-block-end:18px; }

/* Make menu width larger to fit hints */
.srv-menu{
  min-inline-size:280px;
  max-block-size:70vh;
  overflow-y:auto;
}

/* ════════════════════════════════════════════════════════════
   🔧 FIXES — overflow + responsive
   ════════════════════════════════════════════════════════════ */

/* الـ card مفيش overflow */
.srv-card{
  overflow:visible;       /* عشان الـ menu يـ float خارج */
  min-inline-size:0;
}

/* الـ grid responsive proper */
.srv-grid{
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width: 560px){
  .srv-grid{
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  }
}

/* Header — Force layout صحيح */
.srv-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  inline-size:100%;
}
.srv-head-info{
  flex:1 1 0 !important;
  min-inline-size:0 !important;
  max-inline-size:calc(100% - 130px);  /* احتفظ بمكان للـ side panel */
  overflow:hidden;
}
.srv-head-side{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:6px !important;
  min-inline-size:78px;
}

/* status pill أصغر على الموبايل */
.srv-status{ font-size:10.5px !important; padding:3px 8px !important; white-space:nowrap; }

/* الأزرار الصغيرة - 2 cols على mobile, 3 على desktop */
.srv-actions-mini{
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
}
@media (min-width: 480px){
  .srv-actions-mini{ grid-template-columns:1fr 1fr 1fr !important; }
}

/* النص بـ break clean */
.srv-act-mini{
  white-space:normal !important;
  text-align:center;
  line-height:1.3;
  min-block-size:42px;
  font-size:12px !important;
  padding:8px 6px !important;
}
.srv-act-mini span{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* الـ Menu — overlay فوق كل شى */
.srv-menu-wrap{ position:static !important; }
.srv-menu{
  position:fixed !important;
  inset-block-start:auto !important;
  inset-block-end:0;
  inset-inline-start:0 !important;
  inset-inline-end:0 !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:auto !important;
  border-radius:18px 18px 0 0 !important;
  box-shadow:0 -8px 32px rgba(0,0,0,.4) !important;
  max-block-size:80vh !important;
  z-index:9000 !important;
  padding:8px !important;
  animation:srvMenuSheet .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes srvMenuSheet{
  from{ transform:translateY(100%); }
  to  { transform:translateY(0); }
}
.srv-menu::before{
  content:'';
  display:block;
  inline-size:40px; block-size:4px;
  background:var(--line);
  border-radius:99px;
  margin:4px auto 10px;
}
@media (min-width: 560px){
  /* على desktop، الـ menu يبقى absolute dropdown */
  .srv-menu-wrap{ position:relative !important; }
  .srv-menu{
    position:absolute !important;
    inset-block-start:calc(100% + 6px) !important;
    inset-block-end:auto !important;
    inset-inline-end:0 !important;
    inset-inline-start:auto !important;
    inline-size:320px !important;
    max-inline-size:320px !important;
    border-radius:12px !important;
    box-shadow:0 12px 28px rgba(0,0,0,.25) !important;
    animation:srvMenuIn .18s ease-out;
  }
  .srv-menu::before{ display:none; }
}

/* الـ menu items wrap للنصوص الطويلة */
.srv-menu-item{
  white-space:normal !important;
  line-height:1.4;
  padding:10px 11px !important;
}

/* Backdrop للـ menu على mobile */
.srv-menu-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:8999;
  animation:fadeIn .2s ease;
}
@media (min-width: 560px){
  .srv-menu-backdrop{ display:none; }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ════════════════════════════════════════════════════════════
   🔥 FINAL OVERFLOW FIX — clean truncation everywhere
   ════════════════════════════════════════════════════════════ */

/* Card itself - منع overflow horizontal */
.srv-card{
  overflow-x:hidden !important;
  overflow-y:visible;
  inline-size:100%;
  max-inline-size:100%;
  box-sizing:border-box;
}

/* Head — لازم flex math صحيح */
.srv-head{
  inline-size:100%;
  max-inline-size:100%;
}

/* Logo flex:none عشان مش يـ shrink */
.srv-logo{ flex:0 0 44px !important; }

/* Info shrinkable */
.srv-head-info{
  flex:1 1 0 !important;
  min-inline-size:0 !important;
  max-inline-size:none !important;  /* شيل الـ 130px قيد */
  overflow:hidden;
}

/* Side panel ثابت */
.srv-head-side{
  flex:0 0 auto !important;
  inline-size:auto;
  min-inline-size:0;
}

/* أى text داخل الـ info لازم يـ truncate */
.srv-name,
.srv-location,
.srv-id{
  inline-size:100%;
  max-inline-size:100%;
  overflow:hidden;
}
.srv-name > span:not(.ic),
.srv-location > span:not(.ic),
.srv-id{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-inline-size:0;
}
/* لو فى class ic فى الـ name (الـ star) - متخدش مساحة كبيرة */
.srv-name{
  display:flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.srv-name .ic-star{ flex:none; inline-size:13px; block-size:13px; }
.srv-location{
  display:flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.srv-location .ic{ flex:none; }
.srv-location span{
  flex:1 1 0;
  overflow:hidden;
  text-overflow:ellipsis;
  min-inline-size:0;
}

/* Mini buttons - لازم تـ shrink مع النص */
.srv-actions-mini{
  inline-size:100%;
  max-inline-size:100%;
}
.srv-act-mini{
  min-inline-size:0;
  overflow:hidden;
}
.srv-act-mini span{
  flex:1 1 0;
  min-inline-size:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Meta rows */
.srv-meta-row{
  inline-size:100%;
  max-inline-size:100%;
  overflow:hidden;
}
.srv-meta-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-inline-size:0;
}

/* ════════════════════════════════════════════════════════════
   🎯 FORCE flex shrink — اجبر الـ children تشيل min-content
   ════════════════════════════════════════════════════════════ */
.srv-head-info{
  flex:1 1 0 !important;
  inline-size:0 !important;          /* force basis 0 */
  min-inline-size:0 !important;
  max-inline-size:none !important;
  overflow:hidden;
}
.srv-name,
.srv-location,
.srv-id{
  inline-size:100% !important;
  min-inline-size:0 !important;
  max-inline-size:100% !important;
}
.srv-name{
  display:flex; align-items:center; gap:5px;
}
/* الـ نص داخل srv-name لازم يـ truncate */
.srv-name > *:first-child{
  flex:1 1 0;
  min-inline-size:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.srv-location > span{
  flex:1 1 0 !important;
  min-inline-size:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  display:block;
}

/* ════════════════════════════════════════════════════════════
   📋 Server Card — 3 sections design
   ════════════════════════════════════════════════════════════ */

/* معرف الميكروتك + متصل منذ tracks */
.srv-id-row,
.srv-meta-row{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--txt-3); font-weight:700;
  overflow:hidden;
  white-space:nowrap;
  inline-size:100%; min-inline-size:0;
}
.srv-id-row .ic,
.srv-meta-row .ic{ flex:none; inline-size:12px; block-size:12px; color:var(--txt-3); }
.srv-id-row span,
.srv-meta-row span{
  flex:1 1 0; min-inline-size:0; overflow:hidden; text-overflow:ellipsis;
}
.srv-id-row b,
.srv-meta-row b{ color:var(--txt-2); font-weight:800; }

.srv-meta-online{ color:var(--ok); }
.srv-meta-online .ic{ color:var(--ok); }
.srv-meta-online b{ color:var(--ok); }
.srv-meta-offline{ color:var(--warn, #f59e0b); }
.srv-meta-offline .ic{ color:var(--warn, #f59e0b); }
.srv-meta-offline b{ color:var(--warn, #f59e0b); }

/* Sections */
.srv-section{
  display:grid; gap:7px;
  padding-block-start:8px;
  border-block-start:1px solid var(--line);
}
.srv-section-title{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.5px;
}
.srv-section-title .ic{ inline-size:12px; block-size:12px; color:var(--accent); }
.srv-section-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
@media (min-width: 480px){
  .srv-section-actions{ grid-template-columns:1fr 1fr 1fr; }
}

/* الـ card spacing */
.srv-card{
  display:grid;
  gap:10px;
}

/* شيل الـ menu القديم لو ظاهر */
.srv-actions-menu,
.srv-menu-wrap{ display:none !important; }

/* ════════════════════════════════════════════════════════════
   🖥️ Winbox Sheet — بيانات الاتصال + شرح
   ════════════════════════════════════════════════════════════ */
.wbx-box{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-block-end:14px;
  display:grid; gap:12px;
}
.wbx-row{ display:grid; gap:5px; }
.wbx-lbl{
  font-size:11px; font-weight:800; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.4px;
}
.wbx-val-wrap{
  display:flex; gap:6px; align-items:stretch;
}
.wbx-val{
  flex:1;
  padding:9px 11px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px; font-weight:700;
  color:var(--accent);
  user-select:all; cursor:text;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  overflow:auto; white-space:nowrap;
}
.wbx-val.wbx-mono{ letter-spacing:.5px; }
.wbx-copy{
  flex:none;
  display:flex; align-items:center; gap:5px;
  padding:9px 14px;
  background:var(--accent);
  color:#fff; border:0; border-radius:8px;
  cursor:pointer; font:inherit; font-size:12.5px; font-weight:800;
  transition:all .15s ease;
}
.wbx-copy:hover{ opacity:.9; transform:translateY(-1px); }
.wbx-copy.copied{ background:var(--ok); }
.wbx-copy .ic{ inline-size:14px; block-size:14px; }

/* Guides */
.wbx-guide{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  margin-block-end:10px;
}
.wbx-guide-head{
  display:flex; align-items:center; gap:7px;
  margin-block-end:8px;
  font-size:13px; font-weight:800; color:var(--txt);
}
.wbx-guide-head .ic{ inline-size:17px; block-size:17px; color:var(--accent); }
.wbx-steps{
  margin:0; padding-inline-start:22px;
  display:grid; gap:6px;
  font-size:12.5px; color:var(--txt-2); line-height:1.6;
}
.wbx-steps li{ padding-inline-start:4px; }
.wbx-steps b{ color:var(--accent); font-weight:800; }

.wbx-tip{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .12);
  border:1px solid hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .3);
  border-radius:10px;
  font-size:12px; color:var(--txt-2);
}
.wbx-tip .ic{ inline-size:16px; block-size:16px; color:var(--accent); flex:none; }








/* ═══════════════════════════════════════════════════════════
   Sidebar Scrollbar — على اليمين فى RTL (desktop فقط)
   ─────────────────────────────────────────────────────────
   ملحوظة: على الموبايل، الـ sidebar drawer بيعتمد على translateX
   فمش نعدل direction عشان لا نكسر الـ animation
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px){
  /* نقلب الـ direction عشان scrollbar تظهر على اليمين */
  .sidebar{
    direction:ltr;
  }
  /* بس الـ content يفضل RTL */
  .sidebar > *{
    direction:rtl;
  }
}

/* Scrollbar أنعم شكلاً — لكل الأحجام */
.sidebar::-webkit-scrollbar{
  inline-size:5px;
}
.sidebar::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--card-line);
  border-radius:99px;
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background:var(--txt-3);
}

/* Firefox */
.sidebar{
  scrollbar-width:thin;
  scrollbar-color:var(--card-line) transparent;
}







/* ═══════════════════════════════════════════════════════════
   Sidebar Brand Toggle — زرار طى القائمة صغير فى الأعلى
   ═══════════════════════════════════════════════════════════ */
.side-brand-toggle{
  margin-inline-start:auto;
  inline-size:26px; block-size:26px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2);
  color:var(--txt-2);
  border:1px solid var(--card-line);
  cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
  flex-shrink:0;
  padding:0;
}
.side-brand-toggle:hover{
  background:var(--surface-3);
  color:var(--txt);
}
.side-brand-toggle:active{
  transform:scale(0.92);
}
.side-brand-toggle .ic{
  inline-size:12px; block-size:12px;
}

/* لما القائمة مطوية (desktop) — نقلب الـ chevron */
html[data-collapsed="1"] .side-brand-toggle .ic{
  transform:scaleX(-1);
}




/* ═══════════════════════════════════════════════════════════
   Hover-to-Expand — الـ sidebar تفتح لما الماوس يمر عليها
   (Desktop only)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px){
  /* لما collapsed + hovered → توسع سريع */
  html[data-collapsed="1"][data-sidebar-hover="1"]{
    --sidebar-w:240px;
  }

  /* عند hover — نرجع النصوص كلها */
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-brand-txt,
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-section-title,
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-link-text,
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-link-badge{
    opacity:1; max-width:none; pointer-events:auto;
  }
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-link{
    justify-content:flex-start; padding:9px 11px;
  }
  html[data-collapsed="1"][data-sidebar-hover="1"] .side-brand{
    justify-content:flex-start; padding:6px 6px 14px;
  }

  /* Transition smoother */
  .side-brand-txt, .side-section-title, .side-link-text, .side-link-badge{
    transition: opacity .18s ease, max-width .25s ease;
  }
}



/* ═══════════════════════════════════════════════════════════
   Collapsed — إخفاء كل العناصر الزيادة
   ─────────────────────────────────────────────────────────
   عند الطى: يختفوا (toggle + badges + chevron + submenu)
   عند الفتح أو hover: يظهروا
   ═══════════════════════════════════════════════════════════ */

/* مطوية → إخفاء كل ما هو زيادة */
html[data-collapsed="1"] .side-brand-toggle,
html[data-collapsed="1"] .side-link-badge,
html[data-collapsed="1"] .side-chevron{
  opacity:0 !important;
  max-inline-size:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  transition:opacity .15s ease, max-inline-size .2s ease;
}

/* مطوية → القائمة الفرعية تُقفل */
html[data-collapsed="1"] .side-submenu{
  max-block-size:0 !important;
  padding-block:0 !important;
}

/* مطوية + hover → إظهار كل حاجة تانى */
html[data-collapsed="1"][data-sidebar-hover="1"] .side-brand-toggle,
html[data-collapsed="1"][data-sidebar-hover="1"] .side-link-badge,
html[data-collapsed="1"][data-sidebar-hover="1"] .side-chevron{
  opacity:1 !important;
  max-inline-size:none !important;
  pointer-events:auto !important;
}

/* مطوية + hover → القائمة الفرعية ترجع تفتح لو كانت مفتوحة */
html[data-collapsed="1"][data-sidebar-hover="1"] .side-submenu.is-open{
  max-block-size:500px !important;
  padding-block-start:4px !important;
}

/* ═══════════════════════════════════════════════════════════
   Accordion الأساسى (القائمة المفرودة العادية):
   القوائم الفرعية مطوية افتراضياً، وتفتح فقط مع .is-open (بالـ JS).
   القواعد اللى فوق للوضع المطوى (data-collapsed) فقط، فكانت ناقصة هنا.
   ═══════════════════════════════════════════════════════════ */
.side-submenu{
  overflow:hidden;
  max-block-size:0;
  padding-block:0;
  transition:max-block-size .28s ease, padding-block .28s ease;
}
.side-submenu.is-open{
  max-block-size:600px;
  padding-block-start:4px;
}
.side-chevron{ transition:transform .2s ease; }
.side-link-parent.is-open .side-chevron{ transform:rotate(-90deg); }

/* ═══════════════════════════════════════════════════════════
   Mobile — الطى ما ينفعش، الـ drawer يشتغل عادى
   ─────────────────────────────────────────────────────────
   على الهواتف: الـ sidebar drawer إما مفتوح أو مقفول
   فمش محتاجين زرار الطى، ولا الـ collapsed styles
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px){
  /* إخفاء زرار الطى نهائياً */
  .side-brand-toggle{ display:none !important; }

  /* Reset — لو data-collapsed=1 موروث من desktop، نتجاهله */
  html[data-collapsed="1"] .side-brand-txt,
  html[data-collapsed="1"] .side-section-title,
  html[data-collapsed="1"] .side-link-text,
  html[data-collapsed="1"] .side-link-badge,
  html[data-collapsed="1"] .side-chevron{
    opacity:1 !important;
    max-inline-size:none !important;
    max-width:none !important;
    pointer-events:auto !important;
    overflow:visible !important;
  }
  html[data-collapsed="1"] .side-link{
    justify-content:flex-start !important;
    padding:9px 11px !important;
  }
  html[data-collapsed="1"] .side-brand{
    justify-content:flex-start !important;
    padding:6px 6px 14px !important;
  }
  html[data-collapsed="1"] .side-submenu.is-open{
    max-block-size:500px !important;
    padding-block-start:4px !important;
  }
}



/* ═══════════════════════════════════════════════════════════
   ICM Subscriber Card — كارت المشترك (مستوحى من sale_point)
   status dot + شارة أيام + شريط استهلاك + رصيد/مديونية
   ═══════════════════════════════════════════════════════════ */
.subs-list{ display:flex; flex-direction:column; gap:8px; }

.icm-search-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  animation:icmCardIn .3s cubic-bezier(.16,1,.3,1) backwards;
}
.icm-search-card:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
@keyframes icmCardIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .icm-search-card{ animation:none; } }

.icm-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.icm-name-wrap{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.icm-name{ font-size:.95rem; font-weight:700; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.icm-status-dot{ inline-size:9px; block-size:9px; border-radius:50%; flex:none; position:relative; }
.icm-status-dot.icm-dot-online{ background:var(--ok); }
.icm-status-dot.icm-dot-online::after{ content:''; position:absolute; inset:0; background:inherit; border-radius:50%; animation:icmPulse 2s infinite ease-out; }
.icm-status-dot.icm-dot-offline{ background:var(--txt-3); }
.icm-status-dot.icm-dot-danger{ background:var(--bad); }
@keyframes icmPulse{ 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(3.4);opacity:0;} }
@media (prefers-reduced-motion: reduce){ .icm-status-dot.icm-dot-online::after{ animation:none; } }

.icm-days{ font-size:.7rem; font-weight:800; padding:3px 10px; border-radius:10px; white-space:nowrap; flex:none; }
.icm-days-active{ background:var(--ok-soft); color:var(--ok); }
.icm-days-warning{ background:var(--warn-soft); color:var(--warn); }
.icm-days-expired{ background:var(--bad-soft); color:var(--bad); }

.icm-card-menu{ flex:none; }
.icm-card-menu .dd-toggle{ inline-size:28px; block-size:28px; display:grid; place-items:center; border-radius:8px; color:var(--txt-3); background:transparent; border:none; cursor:pointer; }
.icm-card-menu .dd-toggle:hover{ background:var(--surface-2); color:var(--txt); }

.icm-meta-row{ display:flex; gap:14px; align-items:center; margin:6px 0 8px; font-size:.72rem; color:var(--txt-2); flex-wrap:wrap; }
.icm-meta-item{ display:inline-flex; align-items:center; gap:4px; min-width:0; }
.icm-meta-item strong{ color:var(--txt); font-weight:700; direction:ltr; }
.icm-meta-item span{ direction:ltr; }
.icm-meta-icon{ inline-size:13px; block-size:13px; color:var(--accent); opacity:.85; }
.icm-money-ok strong, .icm-money-ok .icm-meta-icon{ color:var(--ok); }
.icm-money-bad strong, .icm-money-bad .icm-meta-icon{ color:var(--bad); }

.icm-usage-bar{ block-size:4px; background:var(--surface-3); border-radius:10px; overflow:hidden; margin-bottom:6px; }
.icm-bar-fill{ block-size:100%; border-radius:10px; transition:width .6s cubic-bezier(.65,0,.35,1); min-inline-size:2px; }
.icm-bar-fill-primary{ background:var(--accent); }
.icm-bar-fill-warning{ background:var(--warn); }
.icm-bar-fill-danger{ background:var(--bad); }
.icm-bar-fill-unlimited{ background:linear-gradient(90deg, var(--accent) 0%, var(--info) 100%); opacity:.45; }

.icm-card-footer{ display:flex; justify-content:space-between; align-items:center; font-size:.7rem; font-weight:700; gap:8px; }
.icm-plan-name{ color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.icm-usage-text{ color:var(--txt); font-weight:800; flex:none; direction:ltr; }

@media (max-width:480px){
  .icm-search-card{ padding:10px 12px; }
  .icm-name{ font-size:.9rem; }
  .icm-meta-row{ gap:10px; }
}

/* ═══ فورم إنشاء مشترك (create-sub sheet) ═══ */
.csub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
@media (max-width:520px){ .csub-grid{ grid-template-columns:1fr; } }
.csub-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.csub-field label{ font-size:12px; font-weight:700; color:var(--txt-2); }
.csub-req{ color:var(--bad); }
.csub-input{
  inline-size:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--txt);
  font-size:14px; font-family:inherit; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.csub-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select.csub-input{ cursor:pointer; }
.csub-warn{
  margin-block-start:12px; padding:10px 12px; border-radius:10px;
  background:var(--bad-soft); color:var(--bad); font-size:13px; font-weight:600;
  border:1px solid var(--bad-soft);
}

/* ═══ صفحة إنشاء مشترك (#new_sub) — أقسام ═══ */
.csub-form{ max-inline-size:820px; margin-inline:auto; padding-block-end:24px; }
.csub-sec{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-block-end:14px; box-shadow:var(--shadow-sm);
}
.csub-sec-head{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800;
  color:var(--txt); margin-block-end:14px;
}
.csub-sec-head .ic{ inline-size:18px; block-size:18px; color:var(--accent); }
.csub-field-full{ grid-column:1 / -1; }
.csub-inrow{ display:flex; gap:8px; align-items:stretch; }
.csub-inrow .csub-input{ flex:1; }
.csub-iconbtn{
  flex:none; inline-size:42px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--accent); cursor:pointer; display:grid; place-items:center;
}
.csub-iconbtn:hover{ background:var(--accent-soft); }
.csub-iconbtn .ic{ inline-size:18px; block-size:18px; }
.csub-hint{ font-size:11.5px; color:var(--txt-3); margin-block-start:5px; }

.csub-toggle{
  inline-size:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-2); border:1px dashed var(--line); border-radius:12px;
  padding:12px 14px; color:var(--txt-2); font-weight:700; font-size:13px; cursor:pointer;
  margin-block-end:14px;
}
.csub-toggle:hover{ color:var(--txt); border-color:var(--accent-line); }
.csub-toggle .ic{ inline-size:16px; block-size:16px; }
.csub-chev{ transition:transform .2s ease; }
.csub-toggle.is-open .csub-chev{ transform:rotate(180deg); }
.csub-extra{ animation:icmCardIn .25s ease backwards; }

.csub-checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media (max-width:520px){ .csub-checks{ grid-template-columns:1fr; } }
.csub-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--txt-2); cursor:pointer; }
.csub-check input{ inline-size:17px; block-size:17px; accent-color:var(--accent); flex:none; }

.csub-submit-row{ display:flex; gap:10px; justify-content:flex-end; margin-block-start:4px; }
.btn.btn-lg{ padding:12px 22px; font-size:15px; }

/* ═══ كروت اختيار نوع الخدمة (radio) ═══ */
.ctype-row{ display:flex; gap:10px; }
.ctype-card{ flex:1; cursor:pointer; position:relative; }
.ctype-card input{ position:absolute; opacity:0; pointer-events:none; }
.ctype-inner{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 10px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface-2); color:var(--txt-2); transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ctype-inner .ic{ inline-size:22px; block-size:22px; }
.ctype-inner b{ font-size:13px; color:var(--txt); }
.ctype-inner small{ font-size:11px; color:var(--txt-3); }
.ctype-card input:checked + .ctype-inner{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.ctype-card input:checked + .ctype-inner b{ color:var(--accent); }

/* ═══ إجراءات سريعة — شريط أفقى قابل للتمرير (بشكل كروت الإحصائيات) ═══ */
.qa-head{ font-size:13px; font-weight:800; color:var(--txt-2); margin-block:2px 10px; }
.qa-strip{
  display:flex; gap:10px; margin-block-end:16px;
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; padding-block-end:2px;
  scrollbar-width:none;
}
.qa-strip::-webkit-scrollbar{ display:none; }
.qa-tile{
  flex:0 0 auto;
  inline-size:calc((100% - 20px) / 3);   /* 3 ظاهرين + الباقى scroll */
  min-inline-size:96px; max-inline-size:150px;
  scroll-snap-align:start; cursor:pointer;
}
.qa-tile .kpi-title{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qa-tile.qa-add{ border-style:dashed; }

/* لوحة التخصيص */
.qa-cust-list{ display:flex; flex-direction:column; gap:8px; }
.qa-cust-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); cursor:pointer;
}
.qa-cust-ic{
  inline-size:38px; block-size:38px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.qa-cust-ic .ic{ inline-size:18px; block-size:18px; }
.qa-cust-ic[data-kind="ok"]     { background:var(--ok-soft);     color:var(--ok); }
.qa-cust-ic[data-kind="info"]   { background:var(--info-soft);   color:var(--info); }
.qa-cust-ic[data-kind="warn"]   { background:var(--warn-soft);   color:var(--warn); }
.qa-cust-ic[data-kind="bad"]    { background:var(--bad-soft);    color:var(--bad); }
.qa-cust-ic[data-kind="primary"]{ background:var(--accent-soft); color:var(--accent); }
.qa-cust-ic[data-kind="violet"] { background:hsl(258 90% 66% / .14); color:hsl(258 72% 62%); }
.qa-cust-label{ flex:1; font-size:14px; font-weight:700; color:var(--txt); }
.qa-cust-check{ inline-size:20px; block-size:20px; accent-color:var(--accent); flex:none; }

/* ═══ زر التحديث — لفّة واحدة عند الضغط ═══ */
@keyframes icmSpinOnce{ to{ transform:rotate(360deg); } }
.spin-once{ animation:icmSpinOnce .6s ease; }

/* ═══ البروفايل — دائرة avatar فقط (تايت، بدون حد/خلفية، أقصى الشمال) ═══ */
.user-pill .uname{ display:none; }
.user-pill, [dir="rtl"] .user-pill{ padding:0; gap:0; background:transparent; border:none; }
.user-pill:hover{ background:transparent; }
.user-pill .avatar{ inline-size:36px; block-size:36px; font-size:14px; }

/* ════════════════════════════════════════════════════════════════
   كل التصاميم (Card Designs) — cd-*
   ════════════════════════════════════════════════════════════════ */
.cd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.cd-count{font-weight:700;color:var(--txt-2)}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.cd-item{background:var(--surface);border:1px solid var(--card-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease}
.cd-item:hover{border-color:var(--accent-line,var(--accent));box-shadow:0 6px 22px rgba(0,0,0,.10)}
.cd-thumb{position:relative;aspect-ratio:16/10;background:var(--surface-2);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cd-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.cd-thumb-ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--txt-3);font-size:32px}
.cd-thumb-ph .ic{width:34px;height:34px}
.cd-thumb-broken .cd-thumb-img{display:none}
.cd-thumb-broken .cd-thumb-ph,.cd-thumb:not(:has(.cd-thumb-img)) .cd-thumb-ph{display:flex}
.cd-thumb-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:700;background:rgba(0,0,0,.42);opacity:0;transition:opacity .15s ease}
.cd-thumb:hover .cd-thumb-hover{opacity:1}
.cd-meta{padding:10px 12px 6px}
.cd-name{font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-date{font-size:12px;color:var(--txt-3);margin-top:2px}
.cd-actions{display:flex;gap:8px;padding:8px 12px 12px;margin-top:auto}
.cd-btn{flex:1;justify-content:center;padding:7px 8px;font-size:13px}
.cd-btn-danger{color:var(--bad);border-color:var(--bad-soft)}
.cd-btn-danger:hover{background:var(--bad-soft)}
.cd-empty{grid-column:1/-1}

/* modal معاينة */
.cd-modal-ov{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}
.cd-modal{background:var(--surface);border:1px solid var(--card-line);border-radius:18px;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.cd-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cd-modal-head b{font-size:16px;color:var(--txt)}
.cd-modal-x{background:transparent;border:0;color:var(--txt-2);cursor:pointer;padding:6px;border-radius:9px;line-height:0}
.cd-modal-x:hover{background:var(--surface-2);color:var(--txt)}
.cd-modal-body{padding:16px;overflow:auto}
.cd-modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.cd-modal-foot:empty{display:none}
.cd-view-img{position:relative;aspect-ratio:16/10;background:var(--surface-2);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cd-view-img img{width:100%;height:100%;object-fit:contain;display:block}
.cd-view-rows{display:flex;flex-direction:column;gap:8px}
.cd-view-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.cd-view-row span{color:var(--txt-3)}
.cd-view-row b{color:var(--txt)}
.cd-view-label{margin:14px 0 8px;font-weight:700;color:var(--txt-2)}
.cd-view-texts{display:flex;flex-wrap:wrap;gap:6px}
.cd-view-muted{color:var(--txt-3);font-size:13px}
.cd-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--txt-2)}

/* ════════════════════════════════════════════════════════════════
   مُصمِّم الكروت (Card Designer) — cde-*
   ════════════════════════════════════════════════════════════════ */
.cd-toolbar-btns{display:flex;gap:8px;align-items:center}
.cde-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){ .cde-wrap{grid-template-columns:1fr} }
.cde-preview-card{padding:14px;position:sticky;top:12px}
@media(max-width:860px){ .cde-preview-card{position:static} }
.cde-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cde-preview-head b{color:var(--txt)}
.cde-preview-head small{color:var(--txt-3)}
.cde-stage{display:flex;justify-content:center;padding:14px;background:var(--surface-2);border:1px dashed var(--card-line);border-radius:12px;overflow:auto}
.cde-canvas{position:relative;background:var(--bg);border:1px solid var(--card-line);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.14);flex:0 0 auto;touch-action:none;overflow:hidden}
.cde-item{position:absolute;cursor:grab;user-select:none;line-height:1.1;white-space:nowrap;padding:1px 2px;touch-action:none}
.cde-item:hover{outline:1px dashed var(--accent)}
.cde-item.cde-dragging{cursor:grabbing;outline:1px dashed var(--bad);z-index:5}
.cde-item-qr{display:flex;align-items:center;justify-content:center}
.cde-hint{margin-top:10px;font-size:12px;color:var(--txt-3);text-align:center}

.cde-controls{padding:14px;display:flex;flex-direction:column;gap:14px}
.cde-field{display:flex;flex-direction:column;gap:6px}
.cde-lbl{font-weight:700;color:var(--txt-2);font-size:13px}
.cde-input{width:100%;background:var(--surface-2);border:1px solid var(--card-line);border-radius:10px;padding:9px 11px;color:var(--txt);font-size:14px;font-family:inherit}
.cde-input:focus{outline:none;border-color:var(--accent)}
.cde-mini{margin-bottom:8px}
.cde-dim{font-size:12px;color:var(--txt-3)}
.cde-sections{display:flex;flex-direction:column;gap:10px}
.cde-sec{border:1px solid var(--card-line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.cde-sec.cde-off{opacity:.55}
.cde-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cde-sec-title{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--txt)}
.cde-sec-title .ic{width:17px;height:17px;color:var(--accent)}
.cde-sec-body{margin-top:9px}
.cde-off .cde-sec-body{pointer-events:none}
.cde-row{display:flex;align-items:center;gap:8px}
.cde-row-lbl{font-size:12px;color:var(--txt-3);white-space:nowrap}
.cde-range{flex:1;accent-color:var(--accent);height:4px}
.cde-badge{min-width:44px;text-align:center;font-size:12px;background:var(--surface-2);border:1px solid var(--card-line);border-radius:999px;padding:2px 8px;color:var(--txt-2)}
.cde-color{width:34px;height:30px;padding:0;border:1px solid var(--card-line);border-radius:8px;background:var(--surface-2);cursor:pointer}
.cde-color::-webkit-color-swatch-wrapper{padding:3px}
.cde-color::-webkit-color-swatch{border:none;border-radius:5px}

/* switch */
.cde-switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto}
.cde-switch input{opacity:0;width:0;height:0;position:absolute}
.cde-switch-s{position:absolute;inset:0;background:var(--surface-3,var(--surface-2));border:1px solid var(--card-line);border-radius:999px;transition:.15s;cursor:pointer}
.cde-switch-s::before{content:"";position:absolute;width:16px;height:16px;right:3px;top:2px;background:var(--txt-3);border-radius:50%;transition:.15s}
.cde-switch input:checked + .cde-switch-s{background:var(--accent);border-color:var(--accent)}
.cde-switch input:checked + .cde-switch-s::before{right:auto;left:3px;background:#fff}

.cde-actionbar{display:flex;gap:10px;justify-content:center;padding-top:6px}
.cde-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cde-spin .6s linear infinite;margin-inline-end:6px;vertical-align:-2px}
@keyframes cde-spin{to{transform:rotate(360deg)}}

/* ── معاينة حيّة لبطاقة التصميم (بمواضع العناصر) ── */
.cd-thumb-render{width:100%;display:flex;align-items:center;justify-content:center}
.cd-render{position:relative;background:var(--surface-2);border-radius:6px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);flex:0 0 auto}
.cd-render.cd-render-nobg{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 8px,var(--surface-3,var(--surface)) 8px,var(--surface-3,var(--surface)) 16px)}
.cd-render-el{position:absolute;line-height:1.1;white-space:nowrap;font-weight:600;text-shadow:0 1px 1px rgba(255,255,255,.35)}
.cd-render-qr{position:absolute;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:2px}
.cd-view-stage{display:flex;justify-content:center;padding:10px;background:var(--surface-2);border:1px dashed var(--card-line);border-radius:12px;margin-bottom:14px;overflow:auto}

/* ── حذف صور بورتال الهوتسبوت ── */
.img-upload-actions{display:flex;gap:8px;align-items:stretch}
.img-upload-actions .img-upload-btn{flex:1}
.img-del-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid var(--bad-soft);color:var(--bad);background:transparent;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap}
.img-del-btn:hover{background:var(--bad-soft)}
.img-del-btn:disabled{opacity:.55;cursor:not-allowed}
.img-del-btn.is-hidden{display:none}
.img-del-btn .ic{width:16px;height:16px}

/* ════════════════════════════════════════════════════════════════
   إدارة المنيو والطلبات — mo-*
   ════════════════════════════════════════════════════════════════ */
.mo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mo-tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--card-line);border-radius:12px;padding:4px}
.mo-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;background:transparent;color:var(--txt-2);border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700}
.mo-tab .ic{width:16px;height:16px}
.mo-tab.active{background:var(--accent);color:#fff}
.mo-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mo-select{background:var(--surface-2);border:1px solid var(--card-line);border-radius:10px;padding:9px 12px;color:var(--txt);font-family:inherit;font-size:14px;min-width:220px;max-width:320px}
.mo-select:focus{outline:none;border-color:var(--accent)}
.mo-frame-wrap{background:var(--surface);border:1px solid var(--card-line);border-radius:16px;overflow:hidden;min-height:70vh;display:flex}
.mo-frame{width:100%;min-height:78vh;border:0;display:block;background:var(--bg)}
.mo-empty{margin:auto;text-align:center}
@media(max-width:600px){ .mo-select{min-width:0;flex:1} .mo-frame{min-height:70vh} }

/* ════════════════════════════════════════════════════════════
   🌐 Portal Sheet — أقسام قابلة للطى (pf-sec)
   ════════════════════════════════════════════════════════════ */
.pf-sec{
  border:1px solid var(--card-line, var(--line));
  border-radius:14px;
  background:var(--surface);
  margin-block-end:12px;
  overflow:hidden;
}
.pf-sec-head{
  display:flex; align-items:center; gap:9px;
  padding:12px 14px;
  background:var(--surface-2);
  border-block-end:1px solid var(--line);
}
.pf-sec-head .ic{
  inline-size:17px; block-size:17px; flex:none; color:var(--accent);
}
.pf-sec-head h4{
  margin:0; font-size:13.5px; font-weight:800; color:var(--txt);
  flex:1; min-inline-size:0;
}
.pf-sec-body{
  padding:14px;
  display:grid; gap:12px;
}

/* توجل داخل رأس القسم — نفس شكل srv-toggle-vis */
.pf-sw{ display:inline-flex; align-items:center; cursor:pointer; flex:none; }
.pf-sw input[type=checkbox]{ display:none; }
.pf-sw input:checked + .srv-toggle-vis{ background:var(--accent); }
.pf-sw input:checked + .srv-toggle-vis::before{ transform:translateX(-14px); }

/* حالة الطى — القيم تفضل فى الـ DOM (مش display:none على الحقول) */
.pf-sec[data-on="0"] > .pf-sec-body,
.pf-sub[data-on="0"] > .pf-sub-body{
  max-block-size:0;
  padding-block:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
.pf-sec > .pf-sec-body,
.pf-sub > .pf-sub-body{
  max-block-size:600px;
  opacity:1;
  transition:max-block-size .26s cubic-bezier(.2,.7,.3,1),
             opacity .18s ease,
             padding-block .26s cubic-bezier(.2,.7,.3,1);
}
.pf-sec[data-on="0"] > .pf-sec-head{ opacity:.6; }
.pf-sec[data-on="0"] > .pf-sec-head .ic{ color:var(--txt-3); }

/* قسم فرعى (واتساب جوّه الدعم) */
.pf-sub{
  border:1px dashed var(--line);
  border-radius:11px;
  background:var(--surface-2);
  overflow:hidden;
}
.pf-sub-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px;
  font-size:12.5px; font-weight:700; color:var(--txt-2);
}
.pf-sub-body{ padding:0 11px 11px; }
.pf-sub-body .srv-form-field{ margin:0; }

/* شبكة حقلين — mobile-first: عمود واحد ثم عمودين */
.pf-grid-2{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:520px){
  .pf-grid-2{ grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   🎞️ Portal — العروض / الإعلانات (slides)
   ════════════════════════════════════════════════════════════ */
.pf-empty{
  display:grid; place-items:center; gap:5px;
  padding:30px 16px; text-align:center;
  border:1px dashed var(--line); border-radius:12px;
  background:var(--surface-2);
  margin-block-end:10px;
}
.pf-empty-ic{ font-size:30px; line-height:1; opacity:.75; }
.pf-empty b{ font-size:13px; color:var(--txt); }
.pf-empty span{ font-size:11.5px; color:var(--txt-3); max-inline-size:280px; }

.pf-slide{
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2);
  overflow:hidden;
  margin-block-end:9px;
  transition:border-color .15s ease;
}
.pf-slide:hover{ border-color:var(--accent-line); }

.pf-slide-bar{
  inline-size:5px; flex:none;
  background:var(--accent);
}
.pf-slide-main{
  flex:1; min-inline-size:0;
  padding:10px 11px;
  display:grid; gap:7px;
}
.pf-slide-row{ display:flex; gap:7px; align-items:center; }

.pf-slide-emoji{
  inline-size:56px; flex:none;
  font-size:16px; text-align:center;
  padding:6px 2px;
  background:var(--surface); color:var(--txt);
  border:1px solid var(--line); border-radius:8px;
}
.pf-slide-title,
.pf-slide-desc{
  inline-size:100%; min-inline-size:0;
  padding:7px 9px;
  background:var(--surface); color:var(--txt);
  border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; font-family:inherit;
}
.pf-slide-title{ font-weight:700; }
.pf-slide-desc{ color:var(--txt-2); }
.pf-slide-title:focus,
.pf-slide-desc:focus{ outline:none; border-color:var(--accent); }

.pf-color{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--txt-3); font-weight:700;
}
.pf-color input[type=color]{
  inline-size:34px; block-size:26px; padding:0;
  border:1px solid var(--line); border-radius:7px;
  background:none; cursor:pointer;
}

.pf-slide-acts{
  flex:none;
  display:grid; gap:4px; align-content:center;
  padding:8px 8px 8px 0;
  padding-inline-end:8px; padding-inline-start:0;
}
.pf-ico-btn{
  inline-size:28px; block-size:26px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--txt-2);
  border:1px solid var(--line); border-radius:7px;
  cursor:pointer; font-size:10px; line-height:1;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.pf-ico-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.pf-ico-btn:disabled{ opacity:.3; cursor:not-allowed; }
.pf-ico-btn.danger:hover{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft, transparent); }
.pf-ico-btn .ic{ inline-size:13px; block-size:13px; }

@media (max-width:420px){
  .pf-slide-emoji{ inline-size:46px; }
  .pf-color span{ display:none; }
}

/* ── Portal Slides — شريط الأدوات (استيراد/تصدير/AI) ───────── */
.pf-tools{
  display:grid; gap:7px;
  margin-block-start:11px;
  padding-block-start:11px;
  border-block-start:1px dashed var(--line);
}
.pf-tools-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

.pf-tool{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 12px;
  background:var(--surface-2); color:var(--txt-2);
  border:1px solid var(--line); border-radius:10px;
  font-size:12.5px; font-weight:700; font-family:inherit;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.pf-tool:hover{ border-color:var(--accent-line); color:var(--txt); }
.pf-tool .ic{ inline-size:15px; block-size:15px; flex:none; }

/* زر الـ AI — مميّز */
.pf-tool[data-kind="ai"]{
  background:linear-gradient(135deg, var(--accent-soft), var(--surface-2));
  border-color:var(--accent-line);
  color:var(--accent);
}
.pf-tool[data-kind="ai"]:hover{
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft));
}

/* صندوق البرومبت */
.pf-ai-box{
  inline-size:100%;
  block-size:230px;
  max-block-size:42vh;
  padding:12px;
  background:var(--surface-2); color:var(--txt-2);
  border:1px solid var(--line); border-radius:11px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px; line-height:1.65;
  direction:rtl; text-align:start;
  resize:vertical;
  white-space:pre-wrap;
  margin-block-end:14px;
}
.pf-ai-box:focus{ outline:none; border-color:var(--accent); }

/* ── Portal Toggles — شبكة + وصف فرعى ───────────────────────── */
.pf-tg-grid{
  display:grid; grid-template-columns:1fr; gap:9px;
}
@media (min-width:520px){
  .pf-tg-grid{ grid-template-columns:1fr 1fr; }
}
.srv-toggle.has-hint{ align-items:flex-start; padding-block:10px; }
.srv-toggle.has-hint .srv-toggle-vis{ margin-block-start:2px; }
.srv-toggle .tg-lbl{ display:grid; gap:2px; min-inline-size:0; }
.srv-toggle .tg-lbl small{
  font-size:10.5px; font-weight:600; color:var(--txt-3);
  line-height:1.4;
}
.srv-toggle input:checked ~ .tg-lbl{ color:var(--txt); }

/* ════════════════════════════════════════════════════════════
   🔐 Portal — أكواد الدخول (staff / kitchen / cashier)
   ════════════════════════════════════════════════════════════ */
.pf-pins{ display:grid; gap:11px; max-inline-size:560px; }

.pf-pin{
  border:1px solid var(--card-line, var(--line));
  border-radius:13px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .15s ease;
}
.pf-pin[data-on="1"]{ border-color:var(--ok, var(--accent)); }

.pf-pin-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  background:var(--surface-2);
  border-block-end:1px solid var(--line);
}
.pf-pin-ic{ font-size:20px; line-height:1; flex:none; }
.pf-pin-txt{ flex:1; min-inline-size:0; display:grid; gap:2px; }
.pf-pin-txt b{ font-size:13px; font-weight:800; color:var(--txt); }
.pf-pin-txt span{ font-size:10.5px; color:var(--txt-3); line-height:1.4; }

.pf-pin-badge{
  flex:none;
  font-size:10px; font-weight:800;
  padding:3px 9px; border-radius:99px;
  background:var(--line); color:var(--txt-3);
  white-space:nowrap;
}
.pf-pin[data-on="1"] .pf-pin-badge{
  background:color-mix(in srgb, var(--ok) 16%, transparent);
  color:var(--ok);
}

.pf-pin-body{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:11px 13px;
}
.pf-pin-input{
  flex:1 1 150px; min-inline-size:0;
  padding:9px 11px;
  background:var(--surface-2); color:var(--txt);
  border:1px solid var(--line); border-radius:9px;
  font-size:13px; font-family:inherit;
  letter-spacing:.12em;
  direction:ltr; text-align:start;
}
.pf-pin-input:focus{ outline:none; border-color:var(--accent); }

.pf-pin-eye{
  flex:none;
  inline-size:34px; block-size:34px;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--txt-3);
  border:1px solid var(--line); border-radius:9px;
  cursor:pointer;
  transition:color .12s ease, border-color .12s ease;
}
.pf-pin-eye:hover,
.pf-pin-eye.on{ color:var(--accent); border-color:var(--accent); }
.pf-pin-eye .ic{ inline-size:15px; block-size:15px; }

.pf-pin-body .tg-btn{ flex:none; padding-inline:16px; }

/* ملاحظة أسفل التبويب */
.pf-note{
  display:flex; align-items:flex-start; gap:8px;
  margin-block-start:13px; max-inline-size:560px;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px dashed var(--line); border-radius:10px;
  font-size:11.5px; color:var(--txt-3); line-height:1.6;
}
.pf-note .ic{ inline-size:15px; block-size:15px; flex:none; margin-block-start:1px; color:var(--accent); }

@media (max-width:420px){
  .pf-pin-input{ flex:1 1 100%; }
  .pf-pin-body .tg-btn{ flex:1; }
}

/* ════════════════════════════════════════════════════════════
   🎨 Portal — مظهر صفحة الهوتسبوت
   ════════════════════════════════════════════════════════════ */
.pf-theme{ max-inline-size:580px; }

/* الألوان */
.pf-acc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (min-width:520px){ .pf-acc-grid{ grid-template-columns:repeat(6,1fr); } }

.pf-acc{
  display:grid; justify-items:center; gap:6px;
  padding:11px 4px;
  background:var(--surface-2);
  border:2px solid var(--line); border-radius:12px;
  cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, transform .12s ease;
}
.pf-acc:hover{ transform:translateY(-2px); }
.pf-acc.sel{ border-color:var(--accent); }
.pf-acc-dot{
  inline-size:30px; block-size:30px; border-radius:50%;
  box-shadow:0 2px 7px rgba(0,0,0,.18);
  position:relative;
}
.pf-acc.sel .pf-acc-dot::after{
  content:'✓'; position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-size:15px; font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.pf-acc-lbl{ font-size:11px; font-weight:700; color:var(--txt-3); }
.pf-acc.sel .pf-acc-lbl{ color:var(--txt); }

/* الحواف */
.pf-rad-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pf-rad{
  display:grid; justify-items:center; gap:5px;
  padding:12px 6px;
  background:var(--surface-2);
  border:2px solid var(--line); border-radius:12px;
  cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; color:var(--txt-3);
  transition:border-color .15s ease;
}
.pf-rad:hover{ border-color:var(--accent-line); }
.pf-rad.sel{ border-color:var(--accent); color:var(--txt); }
.pf-rad-box{
  inline-size:34px; block-size:26px;
  background:var(--accent); opacity:.85;
}
.pf-rad small{ font-size:9.5px; font-weight:600; color:var(--txt-3); opacity:.75; }

/* المعاينة */
.pf-prev{
  --pv1:#0ca678; --pv2:#20c997; --pvr:6px;
  display:grid; gap:9px;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
}
.pf-prev-hero{
  display:grid; gap:3px;
  padding:16px 14px;
  border-radius:var(--pvr);
  background:linear-gradient(135deg, var(--pv1), var(--pv2));
  color:#fff; text-align:center;
  transition:border-radius .22s cubic-bezier(.2,.7,.3,1), background .22s ease;
}
.pf-prev-hero b{ font-size:15px; font-weight:800; }
.pf-prev-hero span{ font-size:11px; opacity:.9; }

.pf-prev-in{
  block-size:36px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--pvr);
  transition:border-radius .22s cubic-bezier(.2,.7,.3,1);
}
.pf-prev-btn{
  padding:10px; text-align:center;
  border-radius:var(--pvr);
  background:linear-gradient(135deg, var(--pv1), var(--pv2));
  color:#fff; font-size:13px; font-weight:800;
  transition:border-radius .22s cubic-bezier(.2,.7,.3,1), background .22s ease;
}
.pf-prev-row{ display:flex; gap:6px; }
.pf-prev-chip{
  flex:1; text-align:center;
  padding:7px 4px;
  border-radius:var(--pvr);
  background:var(--surface);
  border:1px solid var(--line);
  font-size:10.5px; font-weight:700; color:var(--txt-3);
  transition:border-radius .22s cubic-bezier(.2,.7,.3,1);
}

/* ── Walled Garden — صف السماح بالرابط ─────────────────────── */
.pf-wg{
  display:flex; align-items:center; gap:10px;
  margin-block-start:2px;
  padding:10px 11px;
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:11px;
}
.pf-wg-txt{ flex:1; min-inline-size:0; display:grid; gap:2px; }
.pf-wg-txt b{ font-size:12px; font-weight:800; color:var(--txt-2); }
.pf-wg-txt span{ font-size:10.5px; color:var(--txt-3); line-height:1.45; }

.pf-wg-acts{ display:flex; gap:6px; flex:none; }
.pf-wg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-block-size:34px; padding:0 13px;
  background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:9px;
  font-size:12px; font-weight:800; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:filter .12s ease, opacity .12s ease;
}
.pf-wg-btn:hover:not(:disabled){ filter:brightness(1.08); }
.pf-wg-btn:disabled{ opacity:.55; cursor:progress; }
.pf-wg-btn .ic{ inline-size:14px; block-size:14px; }

.pf-wg-btn.ghost{
  inline-size:34px; padding:0;
  background:transparent; color:var(--txt-3);
  border-color:var(--line);
}
.pf-wg-btn.ghost:hover{ border-color:var(--bad); color:var(--bad); }

@media (max-width:460px){
  .pf-wg{ flex-wrap:wrap; }
  .pf-wg-acts{ inline-size:100%; }
  .pf-wg-btn{ flex:1; }
  .pf-wg-btn.ghost{ flex:0 0 44px; }
}