/* ============================================================
   RoboCard Lite — ADMIN PORTAL + AUTH + WORKSPACE
   Old-portal-inspired purple theme for admin/auth/workspace surfaces.
   Tablet-first (1180×820), desktop-fluent (1440×880).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* Robocard portal palette — semantic source of truth */
  --primary:#5840EF;
  --primary-hover:#462DE6;
  --primary-active:#321AD1;
  --primary-rgb:88, 64, 239;
  --primary-soft:#ECE9FF;
  --accent-pink:#E46DCE;
  --accent-pink-soft:#F9E5F5;
  --accent-yellow:#ECE5A2;
  --accent-yellow-soft:#F8F5D8;
  --bg-soft:#E6ECF8;
  --bg-blue-soft:#BFD2FA;
  --page-gradient-start:#FDE7F3;
  --page-gradient-mid:#EAE9FF;
  --page-gradient-end:#DFFFEE;
  --page-gradient:linear-gradient(135deg, var(--page-gradient-start) 0%, var(--page-gradient-mid) 50%, var(--page-gradient-end) 100%);
  --text-main:#222222;
  --text-muted:#5B576A;
  --text-subtle:#706B7F;
  --border:#D8D9E7;
  --border-soft:#E7E8F0;
  --card-bg:#FFFFFF;
  --sidebar-bg:rgba(255,255,255,.94);
  --header-bg:rgba(255,255,255,.92);
  --input-bg:#FFFFFF;
  --secondary-action-bg:#F3F0FF;
  --secondary-action-hover:#E8E3FF;
  --focus-ring:rgba(var(--primary-rgb),.18);
  --disabled-bg:#EEF0F5;
  --disabled-text:#8B8798;
  --danger:#C8455B;
  --danger-soft:#F8DEE2;
  --success:#1F8A6D;
  --success-soft:#DCF1E9;
  --warning:#8A7114;
  --warning-soft:#F8F5D8;

  /* Backwards-compatible aliases consumed by existing portal components. */
  --ink:var(--text-main); --ink-2:var(--text-muted); --ink-3:var(--text-subtle); --ink-4:#9D98AA;
  --line:var(--border); --line-2:var(--border-soft); --line-3:#F3F4F8;
  --paper:#F5F7FC; --paper-2:var(--bg-soft); --paper-3:#DDE5F5; --card:var(--card-bg);
  --ember:var(--primary); --ember-deep:var(--primary-hover); --ember-soft:var(--primary-soft);
  --gold:var(--accent-yellow); --gold-deep:#716A19; --gold-soft:var(--accent-yellow-soft);
  --plum:#2F284F; --plum-2:#4A416E;
  --teal:#1F8A6D; --teal-soft:#DCF1E9;
  --sky:#315C9E; --sky-soft:var(--bg-blue-soft);
  --rose:var(--danger); --rose-soft:var(--danger-soft);
  --violet:var(--primary); --violet-soft:var(--primary-soft);
  /* density-driven (changed by .density-compact/.density-spacious) */
  --pad-y:16px; --pad-x:18px;
  --row-h:48px;
  --gap:14px;
  /* radius / elevation */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 1px 2px rgba(34,34,34,.05), 0 2px 8px rgba(67,55,120,.05);
  --shadow-2:0 4px 14px rgba(49,42,82,.08), 0 12px 34px rgba(67,55,120,.07);
  --shadow-3:0 10px 30px rgba(49,42,82,.12), 0 30px 70px rgba(67,55,120,.12);
  --font-disp:'Bricolage Grotesque', sans-serif;
  --font-text:'Hanken Grotesk', sans-serif;
}

/* density vars — actually consumed by .adm-body/.surface/.kpi-card/.tbl below */
.density-compact { --pad-y:10px; --pad-x:12px; --row-h:36px; --gap:10px; --surf-pad:13px; --row-pad-y:9px; --kpi-val:24px; --body-pad:14px; }
.density-cozy    { --pad-y:14px; --pad-x:18px; --row-h:48px; --gap:14px; --surf-pad:18px; --row-pad-y:12px; --kpi-val:32px; --body-pad:22px; }
.density-spacious{ --pad-y:20px; --pad-x:24px; --row-h:60px; --gap:20px; --surf-pad:24px; --row-pad-y:16px; --kpi-val:36px; --body-pad:28px; }

/* ===== device shells (re-used) ===== */
.device{
  background:#0E0A07; box-shadow:var(--shadow-3);
  position:relative; flex:none; font-family:var(--font-text); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.device .screen{ width:100%; height:100%; overflow:hidden; background:var(--paper); position:relative; display:flex; flex-direction:column;}

/* Tablet landscape */
.tab-l{ width:1180px; height:820px; border-radius:36px; padding:16px;}
.tab-l .screen{ border-radius:22px;}
.tab-l .cam{ position:absolute; top:50%; right:9px; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#3a322a;}

/* Desktop */
.dsk{ width:1440px; height:880px; border-radius:14px; padding:12px 12px 36px; background:#1A1410;}
.dsk .screen{ border-radius:8px;}
.dsk .stand{ position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); width:260px; height:30px; background:linear-gradient(#262019,#15110D); border-radius:0 0 14px 14px;}

/* ============================================================
   AUTH — LOGIN / FORGOT PASSWORD
   ============================================================ */
.auth-stage{
  flex:1; display:grid; grid-template-columns: 1.15fr 1fr; min-height:0;
  background:var(--paper);
}
.auth-stage.full{ grid-template-columns:1fr;}

/* Left brand panel */
.auth-brand{
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--primary-rgb),.22) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(58,42,60,.6) 0%, transparent 60%),
    linear-gradient(155deg,#1F140E,#3A2A1E 60%,#56402C);
  color:#fff; position:relative; overflow:hidden;
  padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-brand .toprow{ display:flex; align-items:center; gap:14px; position:relative;}
.auth-brand .brandmark{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,var(--ember),var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-disp); font-weight:800; font-size:22px;
  box-shadow:0 8px 18px rgba(var(--primary-rgb),.30);
}
.auth-brand .wordmark{ font-family:var(--font-disp); font-weight:700; font-size:24px; letter-spacing:-.01em;}
.auth-brand .wordmark .sub{ display:block; font-family:var(--font-text); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin-top:1px;}
.auth-brand h1{
  font-family:var(--font-disp); font-weight:700; font-size:54px; letter-spacing:-.025em;
  line-height:1.02; max-width:480px; position:relative;
}
.auth-brand h1 em{ font-style:normal; color:var(--gold);}
.auth-brand .lede{
  margin-top:18px; font-size:17px; line-height:1.5; opacity:.78; max-width:440px; position:relative;
}
.auth-brand .benefits{ list-style:none; padding:0; margin:34px 0 0; display:flex; flex-direction:column; gap:18px; position:relative;}
.auth-brand .benefits li{ display:flex; align-items:flex-start; gap:14px; font-size:15.5px; line-height:1.35;}
.auth-brand .benefits .ic{
  width:38px; height:38px; border-radius:12px; flex:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.auth-brand .benefits .ic svg{ width:18px; height:18px; color:var(--gold);}
.auth-brand .benefits b{ font-weight:800; display:block; font-size:15.5px;}
.auth-brand .benefits .s{ display:block; opacity:.68; font-size:13.5px; margin-top:2px;}
.auth-brand .footrow{
  position:relative; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; opacity:.6; font-weight:600;
}

/* decorative motifs on brand side */
.auth-brand .motif{
  position:absolute; right:-60px; top:48%; transform:translateY(-50%);
  width:520px; height:520px; pointer-events:none; opacity:.18;
}
.auth-brand .motif .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.4);
}
.auth-brand .motif .ring.r2{ inset:60px; border-style:solid; border-color:rgba(224,164,59,.35);}
.auth-brand .motif .ring.r3{ inset:120px; border-style:dashed; border-color:rgba(255,255,255,.25);}
.auth-brand .motif .ring.r4{ inset:180px; border-style:solid; border-color:rgba(255,255,255,.18);}
.auth-brand .motif .stamp{
  position:absolute; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:22px;
}

/* Right form panel */
.auth-form{
  background:var(--paper);
  padding:48px 60px; display:flex; flex-direction:column; gap:24px;
  position:relative;
}
.auth-form .topbar{ display:flex; align-items:center; justify-content:flex-end; gap:10px;}
.auth-form .card-wrap{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:stretch;}
.auth-form .card{
  width:100%; max-width:440px; margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
}
.auth-form .eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-deep);
}
.auth-form h2{ font-family:var(--font-disp); font-weight:700; font-size:38px; letter-spacing:-.02em; line-height:1.05;}
.auth-form .lede{ font-size:15.5px; color:var(--ink-2); line-height:1.5;}

.field{
  background:var(--input-bg); border:1.5px solid var(--line); border-radius:14px;
  padding:11px 16px 12px; display:flex; flex-direction:column; gap:2px;
  cursor:text; transition:border-color .15s, box-shadow .15s;
}
.field.focus{ border-color:var(--ember); box-shadow:0 0 0 4px var(--ember-soft);}
.field.err{ border-color:var(--rose); box-shadow:0 0 0 4px var(--rose-soft);}
.field .lab{ font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.field .row{ display:flex; align-items:center; gap:10px; min-height:24px;}
.field .val{ flex:1; font-size:16px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.field .val.ph{ color:var(--ink-3); font-weight:500;}
.field .ic{ color:var(--ink-3); display:flex; flex:none;}
.field .ic > svg, .field .row > svg{ width:18px; height:18px; flex:none;}
.field .eye{ background:none; border:none; color:var(--ink-3); cursor:pointer; padding:2px; display:flex;}
.field .eye > svg{ width:18px; height:18px; flex:none;}
.field .cur{ width:2px; height:18px; background:var(--ember); animation:cursorBlink 1s infinite;}
@keyframes cursorBlink{ 50%{ opacity:0;}}

.checkrow{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px;}
.checkrow .lk{ color:var(--ember-deep); font-weight:700; cursor:pointer;}
.checkbox{
  width:18px; height:18px; border-radius:5px; border:2px solid var(--line); background:#fff;
  display:inline-flex; align-items:center; justify-content:center; vertical-align:-4px; margin-right:8px;
}
.checkbox.on{ background:var(--ember); border-color:var(--ember); color:#fff;}
.checkbox.on svg{ width:11px; height:11px;}

.bigbtn{
  width:100%; padding:16px; border-radius:14px;
  font-family:var(--font-text); font-weight:800; font-size:16px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .1s, filter .15s, background .2s;
}
.bigbtn > svg{ width:18px; height:18px; flex:none;}
.bigbtn:active{ transform:scale(.99);}
.bigbtn.primary{ background:var(--primary); color:#fff; box-shadow:0 10px 24px rgba(var(--primary-rgb),.28);}
.bigbtn.primary:hover{ background:var(--primary-hover);}
.bigbtn.primary:active{ background:var(--primary-active);}
.bigbtn.primary.loading{ background:var(--primary-hover); pointer-events:none;}
.bigbtn.primary.loading .dot{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.4; animation:dot 1.2s infinite ease-in-out;}
.bigbtn.primary.loading .dot:nth-child(2){ animation-delay:.2s;}
.bigbtn.primary.loading .dot:nth-child(3){ animation-delay:.4s;}
@keyframes dot{ 0%,80%,100%{ opacity:.3;} 40%{ opacity:1;}}
.bigbtn.ghost{ background:#fff; border:1.5px solid var(--line); color:var(--ink);}
.bigbtn.dark{ background:var(--ink); color:#fff;}

/* tiny pill chooser (language / theme) */
.pillsel{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  background:#fff; border:1.5px solid var(--line); border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--ink-2);
}
.pillsel svg{ width:14px; height:14px;}

/* error banner */
.errbanner{
  background:var(--rose-soft); border:1.5px solid #F0BFC8; border-radius:14px;
  padding:12px 14px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#7A2535;
}
.errbanner b{ font-weight:800; display:block;}
.errbanner .ic{ width:22px; height:22px; border-radius:7px; background:var(--rose); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.errbanner .ic svg{ width:14px; height:14px;}
.warnbanner{
  background:var(--gold-soft); border:1.5px solid #F0DCAE; border-radius:14px;
  padding:12px 14px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#6A4910;
}
.warnbanner .ic{ width:22px; height:22px; border-radius:7px; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.warnbanner .ic svg{ width:14px; height:14px;}

/* OTP code boxes */
.otp{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
}
.otp .box{
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  height:60px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:800; font-size:30px; color:var(--ink);
}
.otp .box.on{ border-color:var(--ember); box-shadow:0 0 0 4px var(--ember-soft); }
.otp .box.cur{ border-color:var(--ember);}
.otp .box.cur::after{ content:""; width:2px; height:30px; background:var(--ember); animation:cursorBlink 1s infinite;}

/* progress stepper */
.stepbar{ display:flex; align-items:center; gap:6px; }
.stepbar .seg{ flex:1; height:5px; border-radius:3px; background:var(--line-2);}
.stepbar .seg.on{ background:var(--ember);}
.stepbar .seg.done{ background:var(--ember-deep);}

/* password strength */
.pwd-meter{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:4px;}
.pwd-meter span{ height:5px; border-radius:3px; background:var(--line-2);}
.pwd-meter[data-s="1"] span:nth-child(-n+1){ background:var(--rose);}
.pwd-meter[data-s="2"] span:nth-child(-n+2){ background:var(--gold);}
.pwd-meter[data-s="3"] span:nth-child(-n+3){ background:var(--gold-deep);}
.pwd-meter[data-s="4"] span{ background:var(--teal);}

/* success ring (re-used) */
.auth-success{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px;
  background:linear-gradient(160deg, var(--paper), #FDF1DD 60%, var(--gold-soft));
}
.auth-success .ring{
  width:140px; height:140px; border-radius:50%;
  background:var(--teal-soft); color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:28px; position:relative;
}
.auth-success .ring::after{ content:""; position:absolute; inset:-12px; border-radius:50%; border:3px solid var(--teal); opacity:.25;}
.auth-success h2{ font-family:var(--font-disp); font-weight:700; font-size:44px; letter-spacing:-.025em;}
.auth-success p{ font-size:17px; color:var(--ink-2); margin:14px auto 0; max-width:420px; line-height:1.5;}
.auth-success .actrow{ margin-top:34px; display:flex; gap:12px;}

/* ============================================================
   WORKSPACE SELECTOR
   ============================================================ */
.ws-stage{
  flex:1; position:relative;
  transition:opacity .55s ease, transform .65s cubic-bezier(.25,.8,.25,1);
  background:
    radial-gradient(80% 60% at 14% 0%, rgba(var(--primary-rgb),.18) 0%, transparent 55%),
    radial-gradient(80% 60% at 86% 100%, rgba(58,42,60,.18) 0%, transparent 60%),
    var(--paper);
  display:flex; flex-direction:column;
  padding:36px 56px 48px;
}
.ws-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
.ws-top .brand{ display:flex; align-items:center; gap:14px;}
.ws-top .brand .brandmark{ width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,var(--primary),var(--accent-pink)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:20px; box-shadow:0 6px 14px rgba(var(--primary-rgb),.28);}
.ws-top .biz{ font-family:var(--font-disp); font-weight:700; font-size:18px;}
.ws-top .biz .sub{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:1px;}
.ws-top .right{ display:flex; align-items:center; gap:10px; font-size:13px;}
.ws-greet{
  text-align:center; margin:24px 0 28px; position:relative; z-index:2;
}
.ws-greet .eyebrow{ font-size:12px; font-weight:800; color:var(--ember-deep); letter-spacing:.14em; text-transform:uppercase;}
.ws-greet h1{ font-family:var(--font-disp); font-weight:700; font-size:44px; letter-spacing:-.025em; margin-top:6px; line-height:1.02;}
.ws-greet .sub{ font-size:15px; color:var(--ink-2); margin-top:8px;}

.ws-cards{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:24px; min-height:0; position:relative; z-index:2;}
.ws-card{
  position:relative; border-radius:28px; padding:34px;
  display:flex; flex-direction:column; gap:18px;
  cursor:pointer; transition:transform .35s cubic-bezier(.3,.9,.3,1), filter .35s ease, box-shadow .35s ease, opacity .25s ease;
  overflow:hidden; color:#fff;
}
.ws-card .sheen{ position:absolute; inset:0; background:radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.18), transparent 55%); pointer-events:none;}
.ws-card.terminal{ background:linear-gradient(155deg,#221A14,#3A2A1E 60%,#56402C); box-shadow:var(--shadow-3);}
.ws-card.portal{ background:linear-gradient(150deg,#2E2030,#4A2F45 55%,#7A4A6D); box-shadow:var(--shadow-3);}
.ws-card .topline{ display:flex; align-items:center; justify-content:space-between; position:relative;}
.ws-card .tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.ws-card .tag .d{ width:7px; height:7px; border-radius:50%; background:var(--gold);}
.ws-card .glyph{
  width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.ws-card .glyph svg{ width:30px; height:30px;}
.ws-card h2{ font-family:var(--font-disp); font-weight:700; font-size:38px; letter-spacing:-.022em; line-height:1.02; position:relative;}
.ws-card .sub{ font-size:15px; opacity:.78; line-height:1.5; position:relative; max-width:380px;}
.ws-card .featgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; position:relative;
}
.ws-card .feat{
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  font-size:12.5px; font-weight:700;
}
.ws-card .feat .fic{ width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex:none;}
.ws-card .feat .fic svg{ width:13px; height:13px; opacity:.9;}
.ws-card.terminal .feat .fic{ background:rgba(var(--primary-rgb),.32);}
.ws-card.portal .feat .fic{ background:rgba(224,164,59,.32);}

.ws-card .preview{
  margin-top:auto; padding:14px; border-radius:18px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  display:flex; gap:10px; align-items:center; position:relative;
}
.ws-card .preview .mini{
  width:72px; height:48px; border-radius:8px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ws-card .preview .mt{ flex:1; min-width:0;}
.ws-card .preview .mt .h{ font-size:13px; font-weight:800;}
.ws-card .preview .mt .s{ font-size:11.5px; opacity:.65; margin-top:1px;}
.ws-card .enterbtn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:16px 18px; border-radius:14px;
  background:var(--gold); color:#3a2a10; font-weight:800; font-size:15px; border:none; cursor:pointer;
  margin-top:6px; box-shadow:0 10px 22px rgba(224,164,59,.34);
}
.ws-card.terminal .enterbtn{ background:var(--primary); color:#fff; box-shadow:0 10px 22px rgba(var(--primary-rgb),.30);}

/* selected / unselected states */
.ws-card.sel{ transform:scale(1.015) translateY(-4px); filter:brightness(1.04);}
.ws-card.dim{ transform:scale(.94); opacity:.62; filter:brightness(.84) saturate(.9);}
.ws-stage.exiting{ opacity:0; transform:scale(.975) translateY(-14px); pointer-events:none;}

.ws-bottom{ margin-top:22px; display:flex; justify-content:center; gap:10px; align-items:center; font-size:13px; color:var(--ink-2); position:relative; z-index:2;}
.ws-bottom .lk{ color:var(--ember-deep); font-weight:700; cursor:pointer;}

/* ============================================================
   WORKSPACE LOADING — full-bleed intermediate screen
   ============================================================ */
.ws-loading{
  position:fixed; inset:0; z-index:50; overflow:hidden;
  display:flex; flex-direction:column;
  padding:48px 56px;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s cubic-bezier(.25,.8,.25,1);
}
.ws-loading.active{ opacity:1; pointer-events:all; }
.ws-loading:not(.active) *{ animation-play-state:paused; }
.ws-loading.terminal{
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(var(--primary-rgb),.32) 0%, transparent 60%),
    linear-gradient(155deg,#1A120C,#3A2A1E 55%,#5A4030);
}
.ws-loading.terminal .ws-loading-rings .r2{ border-color:rgba(var(--primary-rgb),.32);}
.ws-loading-title .line2.terminal-line2{
  background:linear-gradient(180deg,var(--primary-soft),var(--primary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ws-loading-bar.terminal-bar i{
  background:linear-gradient(90deg,transparent,var(--primary-soft),var(--primary),transparent);
}
.ws-loading-steps .step.on .spinner.terminal-spinner{ border-top-color:var(--primary);}
.ws-loading.portal{
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(224,164,59,.28) 0%, transparent 60%),
    linear-gradient(150deg,#1E1424,#3A2840 55%,#5A3C55);
}
.ws-loading-sheen{
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}
@keyframes wsRingSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@keyframes wsRingPulse{ 0%,100%{ opacity:.35; transform:scale(1);} 50%{ opacity:.6; transform:scale(1.04);} }
.ws-loading-rings{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:920px; height:920px; pointer-events:none; opacity:.5;
}
.ws-loading-rings > div{
  position:absolute; inset:0; border-radius:50%;
}
.ws-loading-rings .r1{ inset:0; border:1.5px dashed rgba(255,255,255,.18); animation:wsRingSpin 60s linear infinite;}
.ws-loading-rings .r2{ inset:120px; border:1px solid rgba(224,164,59,.28); animation:wsRingPulse 3s ease-in-out infinite;}
.ws-loading-rings .r3{ inset:240px; border:1.5px dashed rgba(255,255,255,.14); animation:wsRingSpin 80s linear infinite reverse;}

.ws-loading-brand{
  display:flex; align-items:center; gap:12px; position:relative; z-index:2;
  opacity:0; animation:wsFadeIn .9s .08s cubic-bezier(.2,.7,.3,1) forwards;
}
.ws-loading-brand .brandmark{
  width:42px; height:42px; border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--accent-pink));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:800; font-size:20px;
  box-shadow:0 6px 14px rgba(var(--primary-rgb),.28);
}
.ws-loading-brand .biz{ font-family:var(--font-disp); font-weight:700; font-size:17px; line-height:1.05;}
.ws-loading-brand .biz .sub{ display:block; font-family:var(--font-text); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-top:1px;}

.ws-loading-center{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; z-index:2;
  gap:14px;
}
.ws-loading-center .tag{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; animation:wsFadeIn .7s .35s ease forwards;
}
.ws-loading-center .tag .d{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 12px currentColor;}

@keyframes wsTitleIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes wsFadeIn { from{ opacity:0; } to{ opacity:1; } }
.ws-loading-title{
  font-family:var(--font-disp); font-weight:700;
  font-size:78px; letter-spacing:-.03em; line-height:.96;
  margin:0;
}
.ws-loading-title .line1{
  display:block; opacity:0;
  animation:wsTitleIn .9s .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.ws-loading-title .line2{
  display:block; opacity:0;
  background:linear-gradient(180deg, #FBE3B4, #E0A43B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wsTitleIn .9s .75s cubic-bezier(.2,.7,.3,1) forwards;
}
.ws-loading-sub{
  font-size:16px; opacity:0;
  animation:wsFadeIn .7s 1.2s ease forwards;
  color:rgba(255,255,255,.72); font-weight:600;
  letter-spacing:.02em;
}

.ws-loading-progress{
  width:300px; margin-top:18px;
  opacity:0; animation:wsFadeIn .7s 1.5s ease forwards;
}
.ws-loading-bar{
  height:4px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; position:relative;
}
@keyframes wsBarSlide{ 0%{ left:-40%; } 100%{ left:100%; } }
.ws-loading-bar i{
  position:absolute; top:0; bottom:0; width:40%;
  background:linear-gradient(90deg, transparent, #FBE3B4, #E0A43B, transparent);
  border-radius:2px; left:-40%;
  animation:wsBarSlide 2s 1.5s ease-in-out infinite;
}

.ws-loading-steps{
  display:flex; gap:18px; margin-top:18px; align-items:center;
  font-size:12px; font-weight:700; opacity:0;
  animation:wsFadeIn .7s 1.8s ease forwards;
}
.ws-loading-steps .step{
  display:inline-flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.6);
}
.ws-loading-steps .step.done{ color:rgba(255,255,255,.85);}
.ws-loading-steps .step.done svg{
  width:14px; height:14px; padding:2px;
  border-radius:50%; background:rgba(31,138,109,.4); color:#5AC4A0;
}
.ws-loading-steps .step.on{ color:#fff;}
.ws-loading-steps .step.on .spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  border-top-color:#E0A43B; animation:wsSpin .8s linear infinite;
}
@keyframes wsSpin{ to{ transform:rotate(360deg);} }

.ws-loading-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; opacity:.5; font-weight:600;
  opacity:0; animation:wsFadeIn .7s 2.1s ease forwards;
}
.ws-loading-foot > *{ opacity:.55;}

/* ============================================================
   ADMIN CHROME — SIDEBAR + HEADER
   ============================================================ */
.adm-stage{ flex:1; display:flex; min-height:0; background:var(--page-gradient);}

.sidebar{
  flex:none; width:248px; background:var(--sidebar-bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; padding:18px 12px 14px; gap:6px;
  transition:width .22s ease;
}
.sidebar.collapsed{ width:72px; padding:18px 10px 14px; align-items:center;}
.sidebar .sb-brand{ display:flex; align-items:center; gap:12px; padding:4px 8px 6px; border-bottom:1px solid var(--line-2); margin-bottom:8px; width:100%;}
.sidebar.collapsed .sb-brand{ justify-content:center;}
.sidebar .sb-brand .brandmark{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--primary),var(--accent-pink)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:17px; flex:none; box-shadow:0 4px 10px rgba(var(--primary-rgb),.24);}
.sidebar .sb-brand .biz{ font-family:var(--font-disp); font-weight:800; font-size:15px; line-height:1.05;}
.sidebar .sb-brand .biz .sub{ display:block; font-family:var(--font-text); font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; margin-top:1px;}
.sidebar.collapsed .sb-brand .biz{ display:none;}

/* Scrollable nav region — brand stays pinned above, sign-out foot below.
   Negative margins keep the .sb-item.on::before active bar inside the clip box. */
.sidebar .sb-nav{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overflow-x:hidden; margin:0 -12px; padding:0 12px;
  scrollbar-width:thin; overscroll-behavior:contain;
}
.sidebar.collapsed .sb-nav{ align-items:center; margin:0 -10px; padding:0 10px;}

.sb-section{ font-size:13.5px; font-weight:800; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; padding:10px 10px 4px;}
.sidebar.collapsed .sb-section{ display:none;}

.sb-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:11px;
  font-size:13.5px; font-weight:700; color:var(--ink-2); cursor:pointer;
  position:relative; transition:background .15s, color .15s;
}
.sb-item.sb-child{ font-size:13.5px; }
.sb-item:hover{ background:var(--secondary-action-bg); color:var(--primary-hover);}
.sb-item.on{ background:var(--primary-soft); color:var(--primary-active);}
.sb-item.on::before{
  content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0;
  background:var(--ember);
}
.sb-item .ic{ width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center;}
.sb-item .ic svg{ width:18px; height:18px;}
.sb-item .badge{
  margin-left:auto; background:var(--ember); color:#fff;
  font-size:10px; font-weight:800; padding:2px 6px; border-radius:999px; min-width:18px; text-align:center;
}
/* Foodics compatibility warning marker — flags nav items whose Missions/
   Occasions still hand out Benefits while Foodics has them locked. */
.sb-item .sb-warn-dot{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--amber, #C8821A); color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  box-shadow:0 0 0 0 rgba(200,130,26,.45);
  animation:sb-warn-pulse 2.4s ease-in-out infinite;
}
[dir="rtl"] .sb-item .sb-warn-dot{ margin-left:0; margin-right:auto; }
.sidebar.collapsed .sb-item .sb-warn-dot{
  position:absolute; top:4px; right:4px; margin:0; width:9px; height:9px; font-size:0;
}
[dir="rtl"] .sidebar.collapsed .sb-item .sb-warn-dot{ right:auto; left:4px; }
@keyframes sb-warn-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,130,26,.45); }
  55%    { box-shadow:0 0 0 5px rgba(200,130,26,0); }
}
@media (prefers-reduced-motion: reduce){
  .sb-item .sb-warn-dot{ animation:none; box-shadow:none; }
}

.sidebar.collapsed .sb-item{ width:46px; height:46px; justify-content:center; padding:0;}
.sidebar.collapsed .sb-item.on::before{ left:-10px; top:8px; bottom:8px;}
.sidebar.collapsed .sb-item span:not(.badge){ display:none;}
.sidebar.collapsed .sb-item .badge{ position:absolute; top:4px; right:4px; margin:0; padding:1px 4px; font-size:9px;}

[dir="rtl"] .sb-item.sb-child{ padding-right:28px; }

.sb-foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px; width:100%;}
.sidebar.collapsed .sb-foot{ align-items:center;}

/* HEADER */
.adm-main{ flex:1; display:flex; flex-direction:column; min-height:0; min-width:0;}
.adm-topbar{
  flex:none; height:64px; padding:0 18px;
  display:flex; align-items:center; gap:12px;
  background:var(--header-bg); border-bottom:1px solid var(--line);
  white-space:nowrap; overflow:hidden;
}
.adm-topbar > *{ flex:none; white-space:nowrap;}
.adm-topbar .crumbs{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-3); font-weight:700; white-space:nowrap; flex:0 0 auto; max-width:240px; overflow:hidden; text-overflow:ellipsis;}
.adm-topbar .crumbs > *{ white-space:nowrap;}
.adm-topbar .crumbs .here{ color:var(--ink); overflow:hidden; text-overflow:ellipsis;}
.adm-topbar .search{
  flex:1 1 auto; min-width:0; max-width:420px;
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  font-size:13.5px; color:var(--ink-3); font-weight:600;
  white-space:nowrap; overflow:hidden;
}
.adm-topbar .search > svg{ width:16px; height:16px; flex:none;}
.adm-topbar .search > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;}
.adm-topbar .search input{
  min-width:0; width:100%; flex:1 1 auto; border:0; outline:0; background:transparent;
  color:var(--ink); font:inherit; font-weight:700; padding:0;
}
.adm-topbar .search input::placeholder{ color:var(--ink-3); opacity:1;}
.adm-topbar .search.rc-global-search{
  cursor:text; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.adm-topbar .search.rc-global-search:focus-within,
.adm-topbar .search.rc-global-search.is-open{
  border-color:var(--primary); background:var(--input-bg);
  box-shadow:0 0 0 4px var(--focus-ring), var(--shadow-1);
}
.adm-topbar .search .rc-global-search-leading{ color:var(--ink-3);}
.adm-topbar .search .kbd{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:10.5px; font-weight:800; color:var(--ink-3); background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px 6px;
}
.rc-global-search-panel{
  position:fixed; z-index:2000; max-height:min(560px, calc(100dvh - 92px)); overflow:auto;
  background:#fff; border:1px solid rgba(46,35,27,.12); border-radius:18px;
  box-shadow:0 22px 55px rgba(33,26,21,.20), 0 6px 16px rgba(33,26,21,.08);
  padding:10px; white-space:normal;
}
.rc-gs-group + .rc-gs-group{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line);}
.rc-gs-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 9px 6px; font-size:11px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.rc-gs-group-head b{
  min-width:22px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:10px; color:var(--ink-2);
}
.rc-gs-item{
  width:100%; min-height:58px; display:grid; grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center; gap:11px; padding:9px; border:1px solid transparent; border-radius:14px;
  background:transparent; color:var(--ink); cursor:pointer; text-align:left;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.rc-gs-item:hover,
.rc-gs-item.is-active{
  background:linear-gradient(135deg, var(--primary-soft), var(--accent-pink-soft));
  border-color:rgba(var(--primary-rgb),.24);
}
.rc-gs-item:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px;}
.rc-gs-icon{
  width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--primary-hover); background:var(--primary-soft); border:1px solid rgba(var(--primary-rgb),.16);
}
.rc-gs-icon svg{ width:18px; height:18px;}
.rc-gs-copy{ min-width:0; display:flex; flex-direction:column; gap:3px;}
.rc-gs-title{ font-size:13.5px; font-weight:900; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rc-gs-title mark{ background:rgba(255,198,107,.42); color:inherit; border-radius:5px; padding:0 2px;}
.rc-gs-desc{ font-size:12px; line-height:1.3; color:var(--ink-3); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rc-gs-badge{
  flex:none; align-self:center; max-width:90px; overflow:hidden; text-overflow:ellipsis;
  border-radius:999px; padding:4px 8px; background:var(--paper); border:1px solid var(--line);
  color:var(--ink-2); font-size:10.5px; font-weight:900;
}
.rc-gs-state{
  min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:18px; text-align:center; color:var(--ink-3); font-weight:700;
}
.rc-gs-state strong{ color:var(--ink); font-size:14px;}
.rc-gs-state span{ font-size:12px;}
.rc-gs-state.error strong{ color:var(--rose);}
.rc-gs-spinner{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--ember);
  animation:rc-gs-spin .8s linear infinite;
}
@keyframes rc-gs-spin{ to{ transform:rotate(360deg); } }
.adm-topbar .actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap;}
.adm-topbar .actions > *{ flex:none; white-space:nowrap;}

.iconbtn{
  width:38px; height:38px; border-radius:11px; background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-2); flex:none; cursor:pointer;
  position:relative;
}
.iconbtn:hover{ border-color:var(--ink-3);}
.iconbtn svg{ width:18px; height:18px;}
.iconbtn .dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--ember); border:2px solid #fff;}

.branchpick{
  display:flex; align-items:center; gap:9px; padding:6px 10px; background:var(--paper); border:1px solid var(--line); border-radius:11px;
  cursor:pointer; white-space:nowrap; flex:none;
}
.branchpick .pin{ width:22px; height:22px; border-radius:7px; background:var(--ember-soft); color:var(--ember-deep); display:flex; align-items:center; justify-content:center; flex:none;}
.branchpick .pin svg{ width:13px; height:13px;}
.branchpick .nm{ font-size:13px; font-weight:800; line-height:1.1; white-space:nowrap;}
.branchpick .br{ font-size:11px; color:var(--ink-3); font-weight:700; white-space:nowrap;}

.usermenu{ display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; background:var(--paper); border:1px solid var(--line); border-radius:999px; cursor:pointer; white-space:nowrap; flex:none;}
.usermenu .av{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#5A4F46,#211A15); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:12px; flex:none;}
.usermenu .nm{ font-size:13px; font-weight:800; white-space:nowrap;}
.usermenu .ro{ font-size:11px; color:var(--ink-3); font-weight:700; white-space:nowrap;}
.usermenu > div{ display:flex; flex-direction:column; gap:0;}

/* quick-add menu open */
.quickmenu{
  position:absolute; top:48px; right:0; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-2); padding:6px; z-index:30;
}
.quickmenu .qmi{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:700; cursor:pointer;}
.quickmenu .qmi:hover{ background:var(--paper-2);}
.quickmenu .qmi .ic{ width:26px; height:26px; border-radius:8px; background:var(--paper-2); display:flex; align-items:center; justify-content:center;}
.quickmenu .qmi .ic svg{ width:14px; height:14px;}
.quickmenu .qmi .k{ margin-left:auto; font-size:11px; color:var(--ink-3); font-weight:800; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2px 5px;}
.quickmenu hr{ border:0; border-top:1px solid var(--line-2); margin:4px 4px;}

/* ===== PAGE ===== */
.adm-body{ flex:1; min-height:0; overflow:hidden; padding:var(--body-pad, 22px); display:flex; flex-direction:column; gap:var(--gap, 14px);}
.adm-pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.adm-pagehead h1{ font-family:var(--font-disp); font-weight:700; font-size:30px; letter-spacing:-.022em; line-height:1.04;}
.adm-pagehead .sub{ font-size:14px; color:var(--ink-2); margin-top:6px;}
.adm-pagehead .right{ display:flex; align-items:center; gap:10px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:11px; font-family:var(--font-text); font-weight:800; font-size:13.5px;
  border:1px solid #D7D1F8; background:var(--secondary-action-bg); color:var(--primary-active); cursor:pointer;
  white-space:nowrap; flex:none;
  transition:background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover{ background:var(--secondary-action-hover); border-color:#BEB4F5;}
.btn:active{ background:#DDD7FF; border-color:#A99DF1;}
.btn:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px;}
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 14px rgba(var(--primary-rgb),.26);}
.btn.primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover);}
.btn.primary:active{ background:var(--primary-active); border-color:var(--primary-active);}
.btn:disabled, .btn[disabled], .bigbtn:disabled, .bigbtn[disabled]{ background:var(--disabled-bg); border-color:var(--border); color:var(--disabled-text); box-shadow:none; cursor:not-allowed; opacity:.72;}
.btn.dark{ background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.gold{ background:var(--gold); color:#3a2a10; border-color:var(--gold);}
.btn.lg{ padding:12px 18px; font-size:14.5px; border-radius:13px;}
.btn svg{ width:14px; height:14px; flex:none;}
.btn.lg svg{ width:16px; height:16px;}

/* ============================================================
   KPI / CHARTS / WIDGETS
   ============================================================ */
.kpi-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap, 14px);}
.kpi-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:18px;
  padding:var(--surf-pad, 18px); display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.kpi-card .head{ display:flex; align-items:center; justify-content:space-between;}
.kpi-card .lab{ font-size:11.5px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.kpi-card .ic{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.kpi-card .ic svg{ width:17px; height:17px;}
.kpi-card.ember .ic{ background:var(--ember-soft); color:var(--ember-deep);}
.kpi-card.gold  .ic{ background:var(--gold-soft);  color:var(--gold-deep);}
.kpi-card.teal  .ic{ background:var(--teal-soft);  color:var(--teal);}
.kpi-card.sky   .ic{ background:var(--sky-soft);   color:var(--sky);}
.kpi-card.violet .ic{ background:var(--violet-soft); color:var(--violet);}
.kpi-card.rose  .ic{ background:var(--rose-soft);  color:var(--rose);}
.kpi-card .val{ font-family:var(--font-disp); font-weight:800; font-size:var(--kpi-val, 32px); letter-spacing:-.025em; line-height:1; color:var(--ink); margin-top:4px;}
.kpi-card .val .u{ font-family:var(--font-text); font-size:14px; font-weight:700; color:var(--ink-3); margin-left:5px;}
.kpi-card .delta{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; padding:3px 8px; border-radius:999px; align-self:flex-start; margin-top:6px;}
.kpi-card .delta.up{ background:var(--teal-soft); color:var(--teal);}
.kpi-card .delta.down{ background:var(--rose-soft); color:var(--rose);}
.kpi-card .delta svg{ width:11px; height:11px;}
.kpi-card .spark{ position:absolute; right:14px; bottom:14px; width:84px; height:34px; opacity:.6;}

/* surface panel (general card) */
.surface{ background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:var(--surf-pad, 18px); display:flex; flex-direction:column; gap:calc(var(--gap, 14px) - 2px); min-height:0; box-shadow:var(--shadow-1);}
.surface .head{ display:flex; align-items:center; justify-content:space-between;}
.surface .head h3{ font-family:var(--font-disp); font-weight:700; font-size:17px; letter-spacing:-.012em;}
.surface .head .sub{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.surface .head .right{ display:flex; gap:8px; align-items:center;}

/* chart frame */
.chartframe{ position:relative; height:200px;}
.chartframe svg{ width:100%; height:100%; display:block; overflow:visible;}
.chartframe .gridline{ stroke:var(--line-2); stroke-width:1;}
.chartframe .axislab{ fill:var(--ink-3); font-size:10.5px; font-weight:700;}
.chartframe .barlab{ fill:var(--ink-2); font-size:10.5px; font-weight:800;}
.chartframe .line{ fill:none; stroke-width:2.5;}
.chartframe .area{ opacity:.18;}
.chartframe .dot{ fill:#fff; stroke-width:2;}

/* segmented pill (range, type, etc.) */
.segctl{ background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:3px; display:inline-flex; gap:2px;}
.segctl .seg{ padding:6px 11px; border-radius:8px; font-size:12px; font-weight:800; color:var(--ink-2); cursor:pointer;}
.segctl .seg.on{ background:var(--primary); color:#fff; box-shadow:0 3px 10px rgba(var(--primary-rgb),.22);}

/* ============================================================
   TABLES
   ============================================================ */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl thead th{
  text-align:left; padding:calc(var(--row-pad-y, 12px) - 2px) 12px; font-size:11px; font-weight:800; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line-2);
  background:var(--paper);
  white-space:nowrap;
}
.tbl thead th:first-child{ border-top-left-radius:12px;}
.tbl thead th:last-child{ border-top-right-radius:12px;}
.tbl tbody td{ padding:var(--row-pad-y, 12px) 12px; border-bottom:1px solid var(--line-2); vertical-align:middle;}
.tbl tbody tr:hover td{ background:var(--primary-soft);}
.tbl .who{ display:flex; align-items:center; gap:10px;}
.tbl .who .av{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--ember),var(--gold)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:14px; flex:none;}
.tbl .who .nm{ font-weight:800; font-size:13.5px; line-height:1.15;}
.tbl .who .sub{ font-size:11.5px; color:var(--ink-3); font-weight:700; margin-top:1px; font-variant-numeric:tabular-nums;}
.tbl .mono{ font-variant-numeric:tabular-nums;}
.tbl .progmini{
  width:90px; height:5px; background:var(--line-2); border-radius:3px; overflow:hidden;
}
.tbl .progmini i{ display:block; height:100%; background:var(--ember); border-radius:3px;}
.tbl .progmini.gold i{ background:var(--gold);}
.tbl .ck{ width:18px; height:18px; border-radius:5px; border:2px solid var(--line); background:#fff;}
.tbl .ck.on{ background:var(--ember); border-color:var(--ember);}
.tbl tbody tr:last-child td{ border-bottom:none;}

.tag{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:.04em;
}
.tag .d{ width:6px; height:6px; border-radius:50%; background:currentColor;}
.tag.gold{ background:var(--gold-soft); color:var(--gold-deep);}
.tag.teal{ background:var(--teal-soft); color:var(--teal);}
.tag.sky{ background:var(--sky-soft); color:var(--sky);}
.tag.ember{ background:var(--ember-soft); color:var(--ember-deep);}
.tag.rose{ background:var(--rose-soft); color:var(--rose);}
.tag.violet{ background:var(--violet-soft); color:var(--violet);}
.tag.line{ background:var(--card-bg); border:1px solid var(--line); color:var(--ink-2);}
.tag.dark{ background:var(--ink); color:#fff;}

/* filter bar */
.filterbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.filterbar .fbsearch{ flex:1; min-width:200px; display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--input-bg); border:1px solid var(--line); border-radius:11px; font-size:13.5px; color:var(--ink-3); font-weight:600;}
.filterbar .fbsearch > svg{ width:16px; height:16px; flex:none;}
.filterbar .fbsearch > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.filterbar .select{
  appearance:none; -webkit-appearance:none;
  background:var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5l3.5 3 3.5-3' stroke='%23706B7F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line); border-radius:11px; padding:8px 32px 8px 12px;
  font-family:var(--font-text,sans-serif); font-size:13px; font-weight:700; color:var(--ink-2,#5A4F46);
  cursor:pointer; white-space:nowrap;
}
.filterbar .select:focus{ outline:none; border-color:var(--primary,#5840EF); box-shadow:0 0 0 3px var(--focus-ring,rgba(88,64,239,.18));}
.fchip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; background:var(--card-bg); border:1px solid var(--line); border-radius:10px;
  font-size:12.5px; font-weight:800; color:var(--ink-2); cursor:pointer;
}
.fchip.on{ background:var(--primary); color:#fff; border-color:var(--primary);}
.fchip .x{ width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;}

/* ============================================================
   DRAWER / MODAL / SIDESHEET
   ============================================================ */
.drawer{
  position:absolute; top:0; right:0; bottom:0; width:440px;
  background:#fff; border-left:1px solid var(--line); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; min-height:0;
}
.drawer .dhead{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;
}
.drawer .dhead .ttl{ font-family:var(--font-disp); font-weight:700; font-size:18px;}
.drawer .dbody{ flex:1; overflow:hidden; padding:18px 22px; display:flex; flex-direction:column; gap:14px;}
.drawer .dfoot{ padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end;}

/* form blocks */
.formgrp{ display:flex; flex-direction:column; gap:6px;}
.formgrp .label{ font-size:11.5px; font-weight:800; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;}
.formgrp .input, .formgrp .select, .formgrp .textarea{
  background:var(--input-bg); border:1.5px solid var(--line); border-radius:11px; padding:10px 12px;
  font-family:var(--font-text); font-weight:600; font-size:14px; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.formgrp .input.focus{ border-color:var(--ember); box-shadow:0 0 0 4px var(--ember-soft);}
.formgrp input.input:focus, .formgrp select.select:focus, .formgrp textarea.textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--focus-ring);
}
.formgrp .hint{ font-size:11.5px; color:var(--ink-3); font-weight:600;}
.formgrp.tworow{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}

/* ============================================================
   LOYALTY — stamp card preview, rule builder
   ============================================================ */
.stampcard-preview{
  border-radius:24px; padding:22px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#4B2E22,#7A4A30 70%,#9A5E37);
  box-shadow:var(--shadow-3);
}
.stampcard-preview.points{ background:linear-gradient(155deg,#2E2030,#4A2F45 60%,#6E3F57);}
.stampcard-preview .sheen{ position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%); pointer-events:none;}
.stampcard-preview .head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative;}
.stampcard-preview .brand{ font-size:10px; font-weight:900; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; opacity:.82; max-width:70%;}
.stampcard-preview .gly{ width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:900; font-size:21px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.16);}
.stampcard-preview .nm{ font-family:var(--font-disp); font-weight:800; font-size:25px; line-height:1.04; letter-spacing:-.02em; margin-top:18px;}
.stampcard-preview .perk{ font-size:12.5px; opacity:.78; margin-top:5px; font-weight:700; line-height:1.38;}
.stampcard-preview .counter{ display:flex; align-items:baseline; gap:6px; margin-top:8px; position:relative;}
.stampcard-preview .counter b{ font-family:var(--font-disp); font-weight:900; font-size:44px; line-height:.95; letter-spacing:-.04em;}
.stampcard-preview .counter span{ font-size:18px; font-weight:900; opacity:.62;}
.stampcard-preview .stamps{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-top:12px; position:relative;}
.stampcard-preview .st{ aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.stampcard-preview .st.empty{ border:2px dashed rgba(255,255,255,.34);}
.stampcard-preview .st.full{ background:rgba(255,255,255,.95); color:#7A4A30; box-shadow:0 3px 8px rgba(0,0,0,.18);}
.stampcard-preview .st.reward{ border:2px solid rgba(255,211,124,.9); background:rgba(224,164,59,.25); color:#FFD37C;}
.stampcard-preview .reward-callout{ position:relative; margin-top:14px; border-radius:16px; padding:10px 12px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:10px; backdrop-filter:blur(6px);}
.stampcard-preview .reward-callout > span{ width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:none;}
.stampcard-preview .reward-callout b{ display:block; font-size:11.5px; line-height:1.2;}
.stampcard-preview .reward-callout em{ display:block; margin-top:2px; font-style:normal; font-size:10.5px; font-weight:800; opacity:.7;}

/* rule builder */
.rule{
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:700;
}
.rule .when{ font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;}
.rule .pill{
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:6px 11px;
  display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--ink);
}
.rule .pill.field{ background:var(--ember-soft); border-color:#F4D2C2; color:var(--ember-deep);}
.rule .pill.op{ background:var(--ink); border-color:var(--ink); color:#fff;}
.rule .pill.val{ background:var(--gold-soft); border-color:#F0DCAE; color:var(--gold-deep);}
.rule .pill.action{ background:var(--teal-soft); border-color:#BFE5D7; color:var(--teal);}

/* permission grid */
.permgrid{ overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff;}
.permgrid .pg-row{
  display:grid; grid-template-columns: 230px repeat(6, 1fr);
  border-bottom:1px solid var(--line-2);
}
.permgrid .pg-row:last-child{ border-bottom:none;}
.permgrid .pg-row.head{ background:var(--paper); }
.permgrid .pg-cell{
  padding:13px 14px; display:flex; align-items:center; justify-content:center;
  border-left:1px solid var(--line-2);
  font-size:13px;
}
.permgrid .pg-cell:first-child{ border-left:none; justify-content:flex-start; }
.permgrid .pg-cell.cat{ font-weight:800;}
.permgrid .pg-cell.head{ font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.permgrid .pg-cell.role{ font-weight:800; color:var(--ink); font-size:12px; letter-spacing:.05em; text-transform:uppercase;}
.permgrid .pg-cell .dotmark{ width:22px; height:22px; border-radius:7px; background:var(--teal-soft); color:var(--teal); display:flex; align-items:center; justify-content:center;}
.permgrid .pg-cell .dotmark svg{ width:12px; height:12px;}
.permgrid .pg-cell .dotmark.no{ background:var(--paper-2); color:var(--ink-4);}
.permgrid .pg-cell .dotmark.amber{ background:var(--gold-soft); color:var(--gold-deep);}

/* timeline (audit) */
.atimeline{ position:relative; padding-left:34px;}
.atimeline::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line);}
.atimeline .aev{ position:relative; margin-bottom:18px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px;}
.atimeline .aev:last-child{ margin-bottom:0;}
.atimeline .aev::before{ content:""; position:absolute; left:-29px; top:14px; width:23px; height:23px; border-radius:50%; background:#fff; border:3px solid var(--ember);}
.atimeline .aev.teal::before{ border-color:var(--teal);}
.atimeline .aev.gold::before{ border-color:var(--gold);}
.atimeline .aev.rose::before{ border-color:var(--rose);}
.atimeline .aev.sky::before{ border-color:var(--sky);}
.atimeline .aev .head{ display:flex; align-items:center; justify-content:space-between; gap:10px;}
.atimeline .aev .ttl{ font-weight:800; font-size:13.5px;}
.atimeline .aev .meta{ font-size:11.5px; color:var(--ink-3); font-weight:700; font-variant-numeric:tabular-nums;}
.atimeline .aev .det{ display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; font-size:12px; color:var(--ink-2);}
.atimeline .aev .det b{ color:var(--ink); font-weight:800; margin-right:2px;}

/* map placeholder */
.mapbox{
  background:
    linear-gradient(135deg, var(--paper-2), var(--paper)),
    repeating-linear-gradient(0deg, rgba(150,134,120,.08) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150,134,120,.08) 0 1px, transparent 1px 32px);
  background-blend-mode: normal, normal, normal;
  border:1px solid var(--line); border-radius:16px; position:relative; overflow:hidden;
  min-height:240px;
}
.mapbox .road{ position:absolute; background:rgba(120,100,80,.12);}
.mapbox .road.h{ height:6px; left:0; right:0;}
.mapbox .road.v{ width:6px; top:0; bottom:0;}
.mapbox .pin{
  position:absolute; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
}
.mapbox .pin .marker{
  width:30px; height:36px; background:var(--ember); color:#fff;
  border-radius:18px 18px 18px 4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:800; font-size:12px;
  box-shadow:0 6px 14px rgba(var(--primary-rgb),.30);
  transform:rotate(-45deg);
}
.mapbox .pin .marker span{ transform:rotate(45deg); display:block;}
.mapbox .pin .lab{
  margin-top:8px; font-size:11px; font-weight:800; color:var(--ink); background:#fff; padding:3px 8px;
  border-radius:7px; border:1px solid var(--line); box-shadow:var(--shadow-1); white-space:nowrap;
}

/* QR preview */
.qrtile{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
  display:flex; gap:14px; align-items:center;
}
.qrtile .qrimg{
  width:88px; height:88px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:11px; flex:none;
}
.qrtile .qrimg svg{ width:100%; height:100%;}
.qrtile .body{ flex:1; min-width:0;}
.qrtile .nm{ font-weight:800; font-size:14px;}
.qrtile .meta{ font-size:11.5px; color:var(--ink-3); font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums;}
.qrtile .acts{ display:flex; gap:6px; margin-top:8px;}
.qrtile .acts .ab{
  padding:5px 9px; font-size:11px; font-weight:800; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}

/* integration tile */
.integ{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.integ .head{ display:flex; align-items:center; gap:12px;}
.integ .logo{
  width:48px; height:48px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:18px;
}
.integ .nm{ font-weight:800; font-size:15px;}
.integ .desc{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.integ .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.integ .stat{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px;}
.integ .stat .k{ font-size:10px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.integ .stat .v{ font-family:var(--font-disp); font-weight:800; font-size:18px; letter-spacing:-.022em; margin-top:1px;}

/* spec note (canvas-level) */
.spec-note{ margin:10px 0 0; font-size:13px; color:var(--ink-2); background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:12px; padding:12px 14px; line-height:1.5; }
.spec-note b{ color:var(--ink);}

/* tablet has slightly tighter density inside admin */
.tab-l .sidebar{ width:228px;}
.tab-l .sidebar.collapsed{ width:64px;}
.tab-l .adm-topbar{ height:60px; padding:0 14px; gap:8px;}
.tab-l .adm-topbar .search{ max-width:240px;}
.tab-l .adm-topbar .search > span{ font-size:13px;}
.tab-l .adm-topbar .search .kbd{ display:none;}
.tab-l .adm-topbar .crumbs{ max-width:180px; font-size:12px;}
.tab-l .adm-topbar .iconbtn{ width:34px; height:34px;}
.tab-l .adm-topbar .iconbtn svg{ width:16px; height:16px;}
.tab-l .adm-topbar .branchpick{ padding:5px 9px;}
.tab-l .adm-topbar .branchpick .br{ display:none;}
.tab-l .adm-topbar .btn{ padding:7px 11px; font-size:12.5px;}
.tab-l .adm-topbar .usermenu .ro{ display:none;}
.tab-l .adm-pagehead h1{ font-size:26px;}
/* on tablet at cozy density, default body/kpi to slightly tighter than desktop */
.tab-l .density-cozy{ --body-pad:18px; --gap:12px; --surf-pad:16px; --kpi-val:26px; --row-pad-y:11px;}
.tab-l .density-compact{ --body-pad:12px; --gap:9px; --surf-pad:12px; --kpi-val:22px; --row-pad-y:8px;}
.tab-l .density-spacious{ --body-pad:24px; --gap:18px; --surf-pad:22px; --kpi-val:32px; --row-pad-y:14px;}

/* helper layout */
.gridcol-2{ display:grid; grid-template-columns: 2fr 1fr; gap:18px; min-height:0;}
.gridcol-2c{ display:grid; grid-template-columns: 1.4fr 1fr; gap:18px; min-height:0;}
.gridcol-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.row-flex{ display:flex; gap:14px; align-items:flex-start;}
.col{ display:flex; flex-direction:column;}
.gap-2{ gap:8px;} .gap-3{ gap:12px;} .gap-4{ gap:16px;}
.muted{ color:var(--ink-2);} .mono{ font-variant-numeric:tabular-nums;}

/* misc */
.divider{ height:1px; background:var(--line-2); margin:4px 0;}
.scroll-y{ overflow-y:auto;}
.scroll-y::-webkit-scrollbar{ width:0;}

/* ============================================================
   TIER MANAGEMENT
   ============================================================ */

/* keep tier-page sections at natural height so the body scrolls
   instead of compressing surfaces into each other (overlap fix) */
.adm-body.tier-body > *{ flex-shrink:0; }

/* compact strategy banner on the main tier page */
.strat-banner{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:13px 16px;
}
.strat-banner .sb-ic{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:var(--ember-soft); color:var(--ember-deep);
  display:flex; align-items:center; justify-content:center;
}
.strat-banner .sb-ic svg{ width:20px; height:20px;}
.strat-banner .sb-txt{ flex:1; min-width:0;}
.strat-banner .sb-txt .t{ font-size:14px; font-weight:700; color:var(--ink);}
.strat-banner .sb-txt .t b{ font-weight:800;}
.strat-banner .sb-txt .s{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}

/* Strategy chooser — two side-by-side cards */
.stratbox{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:var(--surf-pad, 18px); display:flex; flex-direction:column; gap:14px; min-height:0;
}
.stratbox > .head{ display:flex; align-items:center; justify-content:space-between;}
.stratbox > .head h3{ font-family:var(--font-disp); font-weight:700; font-size:17px; letter-spacing:-.012em;}
.stratbox > .head .sub{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.strat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.strat-opt{
  position:relative; padding:16px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--paper); display:flex; flex-direction:column; gap:10px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.strat-opt:hover{ border-color:var(--ink-3);}
.strat-opt.on{ background:#fff; border-color:var(--ember); box-shadow:0 0 0 4px var(--ember-soft);}
.strat-opt .so-top{ display:flex; align-items:center; gap:12px;}
.strat-opt .so-ic{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft); color:var(--gold-deep);
}
.strat-opt.on .so-ic{ background:var(--ember-soft); color:var(--ember-deep);}
.strat-opt .so-ic svg{ width:20px; height:20px;}
.strat-opt .so-nm{ font-family:var(--font-disp); font-weight:700; font-size:18px; letter-spacing:-.012em;}
.strat-opt .so-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line);
}
.strat-opt.on .so-tag{ background:var(--ember); color:#fff; border-color:var(--ember);}
.strat-opt .so-desc{ font-size:13px; color:var(--ink-2); line-height:1.5;}
.strat-opt .so-eg{
  font-size:12px; color:var(--ink-2); padding:9px 11px; background:#fff;
  border:1px dashed var(--line); border-radius:10px; font-weight:600;
}
.strat-opt.on .so-eg{ background:var(--paper);}
.strat-opt .so-eg b{ color:var(--ink); font-weight:800;}
.strat-opt .so-radio{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; margin-left:auto;
}
.strat-opt.on .so-radio{ border-color:var(--ember); background:var(--ember);}
.strat-opt.on .so-radio::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff;}

/* large strategy cards (dedicated settings page) */
.strat-grid.lg{ gap:16px;}
.strat-opt.lg{ padding:22px; gap:14px;}
.strat-opt.lg .so-nm{ font-size:21px;}
.strat-opt.lg .so-desc{ font-size:13.5px;}
.so-bullets{ display:flex; flex-direction:column; gap:8px; margin-top:2px;}
.so-bullet{ display:flex; align-items:flex-start; gap:10px;}
.so-bullet .bd{ width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;}
.so-bullet .bd.up{ background:var(--teal-soft); color:var(--teal);}
.so-bullet .bd.down{ background:var(--rose-soft); color:var(--rose);}
.so-bullet .bd svg{ width:13px; height:13px;}
.so-bullet .bl{ font-size:10px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.so-bullet .bt{ font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:1px; line-height:1.4;}
.so-bullet .bt b{ color:var(--ink); font-weight:800;}

/* comparison table */
.cmp{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.cmp-row{ display:grid; grid-template-columns:1.1fr 1fr 1fr; border-bottom:1px solid var(--line-2);}
.cmp-row:last-child{ border-bottom:none;}
.cmp-row > div{ padding:12px 14px; font-size:13px; font-weight:700; color:var(--ink-2); border-left:1px solid var(--line-2); display:flex; align-items:center;}
.cmp-row > div:first-child{ border-left:none;}
.cmp-row.head > div{ background:var(--paper); font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;}
.cmp-row .k{ font-weight:800; color:var(--ink); background:var(--paper-3);}
.cmp-row > div.on{ background:var(--ember-soft); color:var(--ember-deep); font-weight:800;}

/* Tier card — sequential, color-themed */
.tier-card{
  position:relative; border-radius:20px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
}
.tier-card .tc-hero{
  position:relative; padding:14px 16px 14px; color:#fff;
  background:linear-gradient(150deg, var(--tc-a, #4B2E22), var(--tc-b, #7A4A30) 70%, var(--tc-c, #9A5E37));
  display:flex; flex-direction:column; gap:8px;
}
.tier-card .tc-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events:none;
}
.tier-card .tc-top{ display:flex; align-items:center; gap:10px; position:relative;}
.tier-card .tc-level{
  width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:none; line-height:1;
}
.tier-card .tc-level .lab{ font-size:8.5px; font-weight:800; letter-spacing:.1em; opacity:.7; text-transform:uppercase;}
.tier-card .tc-level .num{ font-family:var(--font-disp); font-weight:800; font-size:17px; letter-spacing:-.02em; margin-top:1px;}
.tier-card .tc-glyph{
  width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  flex:none; font-size:20px;
}
.tier-card .tc-glyph svg{ width:20px; height:20px;}
.tier-card .tc-status{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.tier-card .tc-status .d{ width:6px; height:6px; border-radius:50%; background:#7ECBA0;}
.tier-card .tc-status.off .d{ background:rgba(255,255,255,.5);}
.tier-card .tc-names{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}
.tier-card .tc-en{
  font-family:var(--font-disp); font-weight:700; font-size:22px; letter-spacing:-.022em; line-height:1.02;
}
.tier-card .tc-ar{
  font-size:16px; font-weight:700; opacity:.78;
  font-family:'Bricolage Grotesque', 'Tahoma', sans-serif; direction:rtl;
  letter-spacing:.01em;
}
.tier-card .tc-desc{
  position:relative; font-size:11.5px; opacity:.78; line-height:1.4; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tier-card .tc-type{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px; align-self:flex-start;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.tier-card .tc-type .d{ width:6px; height:6px; border-radius:50%;}
.tier-card .tc-type.stamp .d{ background:#FBE3B4;}
.tier-card .tc-type.points .d{ background:#A3D7C5;}
.tier-card .tc-type.cust .d{ background:#fff;}

.tier-card .tc-body{
  padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px;
}
.tier-card .tc-rules{
  display:flex; flex-direction:column; gap:6px;
  flex:1; justify-content:center;
}
.tier-card .tc-rule{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 10px; background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.tier-card .tc-rule .rk{
  width:22px; height:22px; border-radius:6px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.tier-card .tc-rule.up .rk{ background:var(--teal-soft); color:var(--teal);}
.tier-card .tc-rule.down .rk{ background:var(--rose-soft); color:var(--rose);}
.tier-card .tc-rule .rk svg{ width:13px; height:13px;}
.tier-card .tc-rule .rb{ flex:1; min-width:0;}
.tier-card .tc-rule .rl{ font-size:10px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.tier-card .tc-rule .rt{ font-size:11.5px; font-weight:700; color:var(--ink); margin-top:2px; line-height:1.35;}
.tier-card .tc-rule .rt b{ color:var(--tc-deep, var(--ember-deep)); font-weight:800;}

.tier-card .tc-foot{
  display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center;
  padding-top:8px; border-top:1px solid var(--line-2);
}
.tier-card .tc-foot .btn{ padding:6px 10px; font-size:11.5px; border-radius:8px;}
.tier-card .tc-foot .btn svg{ width:12px; height:12px;}
.tier-card .tc-foot .iconbtn{ width:30px; height:30px; border-radius:8px;}

/* tier card disabled */
.tier-card.off{ opacity:.66;}
.tier-card.off .tc-status{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.16);}

/* tier strip — sequential layout with arrows */
.tier-strip{
  display:grid;
  grid-template-columns: 1fr 38px 1fr 38px 1fr 38px 1fr;
  align-items:stretch; gap:0;
}
.tier-strip .tier-card{ min-width:0;}
.tier-strip .tier-arrow{
  display:flex; align-items:center; justify-content:center; color:var(--ink-3);
  position:relative; min-width:0;
}
.tier-strip .tier-arrow svg{ width:22px; height:22px;}
.tier-strip .tier-arrow .ln{ position:absolute; left:0; right:0; top:50%; height:2px; background:repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 8px); opacity:.4;}
.tier-strip .tier-arrow .ic{ width:30px; height:30px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; color:var(--ink-2);}

/* empty tier slot — ghost add card */
.tier-add{
  flex:1; min-width:0;
  border-radius:20px; border:2px dashed var(--line); background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--ink-3); cursor:pointer; padding:24px;
  min-height:260px; transition:border-color .15s, color .15s, background .15s;
}
.tier-add:hover{ border-color:var(--ember); color:var(--ember-deep); background:#fff;}
.tier-add .plusring{ width:44px; height:44px; border-radius:14px; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;}
.tier-add .plusring svg{ width:20px; height:20px;}
.tier-add .ttl{ font-weight:800; font-size:14px;}
.tier-add .sub{ font-size:12px; font-weight:600; max-width:180px; text-align:center; line-height:1.4;}

/* standalone "add tier" CTA row */
.tier-add-row{ display:flex; justify-content:center;}
.tier-add-row .tier-add{ flex:none; width:380px; min-height:120px; padding:18px;}

/* big empty state */
.empty-tier{
  background:#fff; border:1.5px dashed var(--line); border-radius:20px;
  padding:48px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.empty-tier .glyph{
  width:88px; height:88px; border-radius:26px;
  background:linear-gradient(150deg, var(--ember-soft), var(--gold-soft));
  display:flex; align-items:center; justify-content:center; color:var(--ember-deep);
}
.empty-tier .glyph svg{ width:42px; height:42px;}
.empty-tier h3{ font-family:var(--font-disp); font-weight:700; font-size:24px; letter-spacing:-.02em;}
.empty-tier p{ font-size:14px; color:var(--ink-2); max-width:440px; line-height:1.5;}
.empty-tier .acts{ display:flex; gap:10px; margin-top:6px;}

/* drawer: color swatch picker, rule editor */
.swatchgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:7px;}
.swatchgrid .sw{
  aspect-ratio:1; border-radius:10px; cursor:pointer; position:relative;
  border:2px solid transparent;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.swatchgrid .sw.on{ border-color:var(--ink); box-shadow:0 0 0 3px #fff inset;}
.swatchgrid .sw.on svg{ width:14px; height:14px;}

/* compact rule field with unit */
.rulefield{
  display:grid; grid-template-columns:1fr 110px; gap:8px;
}
.rulefield .uni{
  background:var(--paper); border:1.5px solid var(--line); border-radius:11px;
  padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:var(--font-text); font-weight:700; font-size:13px; color:var(--ink-2); cursor:pointer;
}
.rulefield .uni svg{ width:13px; height:13px; color:var(--ink-3);}

/* timeframe pills (drawer) */
.tfrow{ display:flex; gap:6px; flex-wrap:wrap;}
.tfrow .tf{
  padding:7px 11px; background:#fff; border:1.5px solid var(--line); border-radius:10px;
  font-size:12px; font-weight:800; color:var(--ink-2); cursor:pointer;
}
.tfrow .tf.on{ background:var(--ink); color:#fff; border-color:var(--ink);}

/* Rule explainer block under fields */
.explain{
  background:var(--paper-2); border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; font-size:12.5px; color:var(--ink-2); line-height:1.45; font-weight:600;
}
.explain b{ color:var(--ink); font-weight:800;}
.explain .head{
  display:flex; align-items:center; gap:7px;
  font-size:10px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
}
.explain .head svg{ width:12px; height:12px;}

/* Backend job note */
.jobnote{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:#fff; border:1px solid var(--line); border-radius:12px;
  font-size:12.5px; color:var(--ink-2); font-weight:700;
}
.jobnote .ic{ width:24px; height:24px; border-radius:8px; background:var(--sky-soft); color:var(--sky); display:flex; align-items:center; justify-content:center; flex:none;}
.jobnote .ic svg{ width:14px; height:14px;}
.jobnote b{ color:var(--ink); font-weight:800;}

/* Confirmation modal */
.scrim{
  position:absolute; inset:0; background:rgba(34,34,34,.46); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:40;
}
.modal{
  width:480px; max-width:92%; background:var(--card-bg); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-3); overflow:hidden;
}
.modal .mhead{ padding:20px 22px 0; display:flex; gap:14px; align-items:flex-start;}
.modal .mhead .mic{
  width:48px; height:48px; border-radius:14px; flex:none;
  background:var(--rose-soft); color:var(--rose); display:flex; align-items:center; justify-content:center;
}
.modal .mhead .mic svg{ width:22px; height:22px;}
.modal .mhead h3{ font-family:var(--font-disp); font-weight:700; font-size:20px; letter-spacing:-.018em;}
.modal .mhead .sub{ font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.5;}
.modal .mbody{ padding:14px 22px 4px; display:flex; flex-direction:column; gap:12px;}
.modal .mfoot{ padding:16px 22px 18px; display:flex; gap:10px; justify-content:flex-end;}

/* warning callout in drawer/modal */
.callout{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--rose-soft); border:1px solid #F0BFC8; border-radius:12px;
  padding:11px 13px; color:#7A2535; font-size:12.5px; font-weight:600; line-height:1.45;
}
.callout.warn{ background:var(--gold-soft); border-color:#F0DCAE; color:#6A4910;}
.callout.info{ background:var(--sky-soft); border-color:#CFE0F2; color:#1F4A86;}
.callout .ic{ width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;}
.callout .ic svg{ width:13px; height:13px;}
.callout.warn .ic{ background:var(--gold); color:#fff;}
.callout .ic{ background:var(--rose); color:#fff;}
.callout.info .ic{ background:var(--sky); color:#fff;}
.callout b{ font-weight:800;}

/* ============================================================
   NOTES PANEL
   ============================================================ */
.rc-notes-panel{
  position:fixed; top:72px; right:16px;
  width:320px; max-height:520px;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
  z-index:200; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .15s, transform .15s;
}
.rc-notes-panel.open{ opacity:1; pointer-events:auto; transform:translateY(0);}

.rc-notes-panel .np-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px 11px; border-bottom:1px solid var(--line); flex:none;
}
.rc-notes-panel .np-head h4{
  font-family:var(--font-disp); font-weight:700; font-size:14.5px; letter-spacing:-.01em; margin:0;
}

.rc-notes-panel .np-form{
  padding:12px 14px; border-bottom:1px solid var(--line); flex:none;
  display:flex; flex-direction:column; gap:8px;
}
.rc-notes-panel .np-input,
.rc-notes-panel .np-textarea{
  width:100%; box-sizing:border-box;
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  padding:8px 11px; font-family:var(--font-text); font-size:13px; font-weight:600; color:var(--ink);
  outline:none; resize:none;
  transition:border-color .15s, box-shadow .15s;
}
.rc-notes-panel .np-input:focus,
.rc-notes-panel .np-textarea:focus{ border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft);}
.rc-notes-panel .np-textarea{ min-height:68px;}
.rc-notes-panel .np-textarea.err{ border-color:var(--rose); box-shadow:0 0 0 3px rgba(200,69,91,.14);}
.rc-notes-panel .np-form-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.rc-notes-panel .np-share{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:var(--ink-2);
}
.rc-notes-panel .np-share .checkbox{
  width:15px; height:15px; min-width:15px; border-radius:4px;
  background:var(--paper); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
}
.rc-notes-panel .np-share .checkbox.on{ background:var(--ember); border-color:var(--ember); color:#fff;}
.rc-notes-panel .np-save{
  padding:6px 14px; border-radius:9px; font-size:12.5px; font-weight:700;
  background:var(--ember); color:#fff; border:1px solid var(--ember);
  cursor:pointer; flex:none; transition:opacity .15s;
}
.rc-notes-panel .np-save:hover{ opacity:.86;}
.rc-notes-panel .np-save:disabled{ opacity:.5; cursor:not-allowed;}

.rc-notes-panel .np-list{ flex:1; overflow-y:auto; padding:6px 8px; min-height:0;}
.rc-notes-panel .np-empty{
  text-align:center; padding:20px 12px; color:var(--ink-3); font-size:12.5px; font-weight:600; margin:0;
}

.rc-notes-panel .np-item{
  border-radius:10px; margin-bottom:4px;
  border:1px solid var(--line); background:var(--paper); overflow:hidden;
}
.rc-notes-panel .np-item-head{
  display:flex; align-items:center; gap:7px;
  padding:9px 11px; cursor:pointer; user-select:none;
  transition:background .12s;
}
.rc-notes-panel .np-item-head:hover{ background:var(--paper-2);}
.rc-notes-panel .np-item-title{
  flex:1; font-size:12.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rc-notes-panel .np-item-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--teal-soft); color:var(--teal); border-radius:5px; padding:2px 5px; flex:none;
}
.rc-notes-panel .np-chevron{
  color:var(--ink-3); flex:none; transition:transform .15s;
}
.rc-notes-panel .np-item.open .np-chevron{ transform:rotate(180deg);}

.rc-notes-panel .np-item-body{
  padding:2px 11px 11px; display:none;
  flex-direction:column; gap:7px;
}
.rc-notes-panel .np-item.open .np-item-body{ display:flex;}
.rc-notes-panel .np-item-text{
  font-size:12.5px; color:var(--ink-2); font-weight:600; line-height:1.55; white-space:pre-wrap; margin:0;
}
.rc-notes-panel .np-item-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
}
.rc-notes-panel .np-item-btn{
  padding:5px 10px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); transition:opacity .12s;
}
.rc-notes-panel .np-item-btn:hover{ opacity:.72;}
.rc-notes-panel .np-item-btn:disabled{ opacity:.45; cursor:not-allowed;}
.rc-notes-panel .np-item-btn.del{ color:var(--rose);}
.rc-notes-panel .np-item-btn.upd{ background:var(--ember); color:#fff; border-color:var(--ember);}

/* notes dark mode */
html.dark .rc-notes-panel{ background:var(--card); border-color:var(--line);}
html.dark .rc-notes-panel .np-input,
html.dark .rc-notes-panel .np-textarea{ background:var(--paper-2); border-color:var(--line);}
html.dark .rc-notes-panel .np-share .checkbox{ background:var(--paper-2); border-color:var(--line);}
html.dark .rc-notes-panel .np-item{ background:var(--paper-2); border-color:var(--line);}
html.dark .rc-notes-panel .np-item-head:hover{ background:var(--paper-3);}
html.dark .rc-notes-panel .np-item-btn{ background:var(--paper-3); border-color:var(--line);}

/* DARK MODE (admin tweak) */
.dark-admin{
  --paper:#171622; --paper-2:#211F31; --paper-3:#29263C; --card:#222032;
  --ink:#F3F1FA; --ink-2:#C2BED1; --ink-3:#918BA5; --ink-4:#666078;
  --line:#3B3850; --line-2:#302D43; --line-3:#29263A;
  --ember-soft:rgba(var(--primary-rgb),.2); --gold-soft:rgba(236,229,162,.16);
  --teal-soft:rgba(31,138,109,.18); --sky-soft:rgba(45,108,192,.18);
  --rose-soft:rgba(200,69,91,.16); --violet-soft:rgba(107,78,158,.2);
}
.dark-admin .sidebar{ background:#1C1A2A;}
.dark-admin .adm-topbar{ background:#1C1A2A;}
.dark-admin .surface, .dark-admin .kpi-card, .dark-admin .field, .dark-admin .integ, .dark-admin .qrtile, .dark-admin .formgrp .input{ background:#222032; }
.dark-admin .tbl thead th{ background:var(--paper-2);}
.dark-admin .tbl tbody tr:hover td{ background:#29263C;}
.dark-admin .iconbtn, .dark-admin .branchpick, .dark-admin .usermenu, .dark-admin .segctl, .dark-admin .fchip, .dark-admin .btn, .dark-admin .bigbtn.ghost, .dark-admin .pillsel{ background:#211F31; border-color:#3B3850; color:var(--ink);}
.dark-admin .adm-topbar .search{ background:#211F31;}
.dark-admin .quickmenu{ background:#29263C; border-color:#3B3850;}
.dark-admin .quickmenu .qmi:hover{ background:#332F4A;}
.dark-admin .permgrid{ background:#222032;}
.dark-admin .stampcard-preview{ box-shadow:none;}

/* ============================================================
   LANGUAGE TOGGLE — topbar pill that carries a short text label.
   Works in both directions; auto-widens past the square .iconbtn.
   ============================================================ */
.iconbtn.lang-toggle{ width:auto; min-width:38px; gap:6px; padding:0 11px; font-family:var(--font-text); font-weight:800; font-size:12px; letter-spacing:.02em;}
.iconbtn.lang-toggle svg{ width:16px; height:16px; flex:none;}
.iconbtn.lang-toggle .lang-code{ white-space:nowrap;}
.tab-l .adm-topbar .iconbtn.lang-toggle{ width:auto;}

/* ============================================================
   RTL — Arabic. Driven purely by <html dir="rtl">; flips the
   directional bits the admin shell hard-codes for LTR.
   ============================================================ */
[dir="rtl"] .sidebar{ border-right:0; border-left:1px solid var(--line);}

/* active-item accent bar moves to the inner (right) edge */
[dir="rtl"] .sb-item.on::before{ left:auto; right:-12px; border-radius:3px 0 0 3px;}
[dir="rtl"] .sidebar.collapsed .sb-item.on::before{ left:auto; right:-10px;}

/* badge + collapsed badge pin to the opposite side */
[dir="rtl"] .sb-item .badge{ margin-left:0; margin-right:auto;}
[dir="rtl"] .sidebar.collapsed .sb-item .badge{ right:auto; left:4px;}

/* topbar: actions cluster and search shortcut hug the other end */
[dir="rtl"] .adm-topbar .actions{ margin-left:0; margin-right:auto;}
[dir="rtl"] .adm-topbar .search .kbd{ margin-left:0; margin-right:auto;}
[dir="rtl"] .rc-gs-item{ text-align:right;}
[dir="rtl"] .iconbtn .dot{ right:auto; left:8px;}

/* user pill avatar sits on the right */
[dir="rtl"] .usermenu{ padding:4px 4px 4px 10px;}

/* dropdown / quick-add menu anchors to the right */
[dir="rtl"] .quickmenu{ right:auto; left:0;}

/* notes panel slides in from the left edge */
[dir="rtl"] .rc-notes-panel{ right:auto; left:16px;}

/* account page: inline sub-label spacing follows the text direction */
[dir="rtl"] .sc-media-title span{ margin-left:0; margin-right:4px;}

/* branches: row actions cluster hugs the opposite end in RTL */
[dir="rtl"] .rc-branch-actions{ margin-left:0; margin-right:auto;}

/* ============================================================
   GROUPED SIDEBAR NAV — hierarchy, guide line, active state
   ============================================================ */

.sb-group{ position:relative; }

/* ── Parent group toggle ── */
.sb-group-toggle{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:10px 10px; border-radius:11px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-text); color:var(--ink-2); text-align:left;
  position:relative; transition:background .15s, color .15s;
}
.sb-group-toggle:hover{ background:var(--paper-2); color:var(--ink);}
.sb-group-toggle .ic{
  width:20px; height:20px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); transition:color .15s;
}
.sb-group-toggle .ic svg{ width:18px; height:18px;}

/* ── Group text — clear typographic hierarchy ── */
.sb-group-info{ flex:1; min-width:0; text-align:left;}
.sb-group-title{
  display:block; font-size:14px; font-weight:800;
  color:var(--ink); line-height:1.15; letter-spacing:-.01em;
}
.sb-group-subtitle{
  display:block; font-size:11.5px; font-weight:600;
  color:var(--ink-3); margin-top:2px; line-height:1.2;
}

/* ── Chevron ── */
.sb-chevron{ width:14px; height:14px; flex:none; color:var(--ink-4); transition:transform .2s ease, color .15s;}
.sb-group.open > .sb-group-toggle .sb-chevron{ transform:rotate(180deg); color:var(--ink-3);}

/* ── Open group: subtle container treatment ── */
.sb-group.open > .sb-group-toggle{
  background:var(--paper-2); color:var(--ink);
  border-radius:11px 11px 0 0;
}
.sb-group.open > .sb-group-toggle .ic{ color:var(--ink-2);}

/* ── Active group: ember accent on toggle and icon ── */
.sb-group.has-active > .sb-group-toggle{ color:var(--ember-deep);}
.sb-group.has-active > .sb-group-toggle .ic{ color:var(--ember-deep);}
.sb-group.has-active > .sb-group-toggle .sb-group-title{ color:var(--ember-deep);}
.sb-group.has-active > .sb-group-toggle .sb-group-subtitle{ color:rgba(var(--primary-rgb),.72);}

/* ── Children container: vertical guide line ── */
.sb-group-items{
  display:flex; flex-direction:column; gap:1px;
  margin-left:20px;
  padding:4px 0 8px 10px;
  border-left:2px solid var(--line-2);
}
.sb-group-items[hidden]{ display:none;}

/* Guide line turns ember when this group has the active page */
.sb-group.has-active .sb-group-items{ border-left-color:var(--ember);}

/* ── Child items — clearly nested ── */
.sb-group-items .sb-item{
  padding:8px 10px;
  font-size:13px; font-weight:700;
  color:var(--ink-2); border-radius:8px;
}
.sb-group-items .sb-item .ic{ display:none;}
.sb-group-items .sb-item:hover{ background:var(--paper-3); color:var(--ink);}

/* Active child: warm fill + bolder text; guide line handles the accent */
.sb-group-items .sb-item.on{
  background:var(--ember-soft); color:var(--ember-deep); font-weight:800;
}
.sb-group-items .sb-item.on::before{ display:none;}

/* ── Home direct link — same visual weight as a group toggle ── */
.sb-home-item{ font-size:14px; font-weight:800; padding:10px 10px;}
.sb-home-item .ic{ color:var(--ink-3);}
.sb-home-item:hover{ background:var(--paper-2); color:var(--ink);}
.sb-home-item.on{ background:var(--ember-soft); color:var(--ember-deep);}
.sb-home-item.on::before{ border-radius:0 3px 3px 0;}

/* ── Collapsed sidebar ── */
.sidebar.collapsed .sb-group-toggle{
  width:46px; height:46px; justify-content:center; padding:0; border-radius:12px;
}
.sidebar.collapsed .sb-group-info,
.sidebar.collapsed .sb-chevron{ display:none;}
.sidebar.collapsed .sb-group-items{ display:none !important;}
.sidebar.collapsed .sb-home-item{ width:46px; height:46px; justify-content:center; padding:0;}

/* ============================================================
   DENSITY SWITCHER — topbar dropdown
   ============================================================ */
.density-wrap{ position:relative; flex:none;}

.density-menu{
  position:fixed;
  min-width:176px; padding:5px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-2); z-index:200;
  display:flex; flex-direction:column; gap:1px;
}
.density-menu[hidden]{ display:none;}

.density-menu-label{
  font-size:10.5px; font-weight:800; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px 4px;
}

.density-menu button{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 11px; border:0; background:transparent; border-radius:9px;
  font-family:var(--font-text); font-weight:700; font-size:13px;
  color:var(--ink-2); cursor:pointer; text-align:left;
}
.density-menu button svg{ width:16px; height:16px; flex:none; color:var(--ink-3);}
.density-menu button:hover{ background:var(--paper-2); color:var(--ink);}
.density-menu button.on{ background:var(--ember-soft); color:var(--ember-deep); font-weight:800;}
.density-menu button.on svg{ color:var(--ember-deep);}

/* ── RTL ── */
[dir="rtl"] .sb-group-toggle{ text-align:right;}
[dir="rtl"] .sb-group-info{ text-align:right;}
[dir="rtl"] .sb-group-items{
  margin-left:0; margin-right:20px;
  padding-left:0; padding-right:10px;
  border-left:0; border-right:2px solid var(--line-2);
}
[dir="rtl"] .sb-group.has-active .sb-group-items{
  border-right-color:var(--ember); border-left-color:transparent;
}
[dir="rtl"] .density-menu button{ text-align:right;}

/* ── Dark mode ── */
html.dark .sb-group-title{ color:var(--ink);}
html.dark .sb-group.open > .sb-group-toggle{ background:var(--paper-3);}
html.dark .sb-group-items{ border-left-color:var(--line);}
html.dark .sb-group.has-active .sb-group-items{ border-left-color:var(--ember);}
[dir="rtl"] html.dark .sb-group.has-active .sb-group-items{ border-right-color:var(--ember);}
html.dark .sb-group-items .sb-item:hover{ background:var(--paper-3);}
html.dark .density-menu{ background:var(--card); border-color:var(--line);}
html.dark .density-menu button:hover{ background:var(--paper-2);}
html.dark .density-menu button.on{ background:rgba(var(--primary-rgb),.20); color:var(--primary);}
html.dark .density-menu button.on svg{ color:var(--ember);}
html.dark .density-menu-label{ color:var(--ink-3);}

/* ============================================================
   UNIFIED PREFERENCES MENU (language + theme + density)
   ============================================================ */
.pref-wrap{ position:relative; flex:none;}

.pref-menu{
  position:fixed;
  min-width:224px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-2); z-index:300;
  display:flex; flex-direction:column;
}
.pref-menu[hidden]{ display:none;}

.pref-eyebrow{
  font-size:10px; font-weight:800; color:var(--ink-3);
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px 2px;
}

.pref-section{
  padding:8px 6px 6px;
  display:flex; flex-direction:column; gap:6px;
}

.pref-label{
  font-size:10.5px; font-weight:800; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase; padding:0 4px;
}

.pref-sep{ height:1px; background:var(--line-2); margin:2px 6px;}

/* Language + theme: two equal pills side by side */
.pref-pills{ display:grid; grid-template-columns:1fr 1fr; gap:4px;}
.pref-pill{
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 6px; border-radius:9px;
  border:1.5px solid var(--line); background:var(--paper);
  font-family:var(--font-text); font-size:12px; font-weight:700;
  color:var(--ink-2); cursor:pointer; line-height:1.2;
  transition:background .12s, color .12s, border-color .12s;
}
.pref-pill svg{ width:13px; height:13px; flex:none;}
.pref-pill:hover{ background:var(--paper-2); color:var(--ink); border-color:var(--line-2);}
.pref-pill.on{ background:var(--ink); color:#fff; border-color:var(--ink);}

/* Density: stacked rows */
.pref-density-row{ display:flex; flex-direction:column; gap:1px;}
.pref-density-opt{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 10px; border-radius:9px; border:0; background:transparent;
  font-family:var(--font-text); font-size:12.5px; font-weight:700;
  color:var(--ink-2); cursor:pointer; text-align:left;
  transition:background .12s, color .12s;
}
.pref-density-opt svg{ width:15px; height:15px; flex:none; color:var(--ink-3);}
.pref-density-opt:hover{ background:var(--paper-2); color:var(--ink);}
.pref-density-opt.on{ background:var(--ember-soft); color:var(--ember-deep); font-weight:800;}
.pref-density-opt.on svg{ color:var(--ember-deep);}

/* RTL overrides */
[dir="rtl"] .pref-density-opt{ text-align:right;}

/* Dark mode */
html.dark .pref-menu{ background:var(--card); border-color:var(--line);}
html.dark .pref-pill{ background:var(--paper-2); border-color:var(--line); color:var(--ink-2);}
html.dark .pref-pill:hover{ background:var(--paper-3); color:var(--ink); border-color:var(--line-2);}
html.dark .pref-pill.on{ background:var(--ink-3); color:#fff; border-color:transparent;}
html.dark .pref-sep{ background:var(--line);}
html.dark .pref-density-opt:hover{ background:var(--paper-3);}
html.dark .pref-density-opt.on{ background:rgba(var(--primary-rgb),.20); color:var(--primary);}
html.dark .pref-density-opt.on svg{ color:var(--ember);}