/* ============================================================
   Ambika Marketing OS — shared design system (theme.css)
   Self-hosted (served from /public, CSP style-src 'self').
   Load AFTER Google Fonts + Font Awesome links in each page.
   Fonts used: 'Plus Jakarta Sans' (body), 'Space Grotesk' (display/numerals).
   ============================================================ */

/* ---- Theme tokens (dark default, light override) ---- */
:root{
  --bg:#09090f; --bg2:#0f0d1c; --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.16);
  --ink:#f4f2ff; --ink2:#b6b1d4; --mut:#7d7898;
  --p:#a855f7; --p2:#6366f1; --pink:#ec4899; --cyan:#22d3ee;
  --ok:#34d399; --ok2:#22d3ee; --warn:#fbbf24; --bad:#fb7185;
  --glow:rgba(168,85,247,.35); --glow-ok:rgba(52,211,153,.35);
  --grad:linear-gradient(135deg,#a855f7 0%,#6366f1 55%,#ec4899 110%);
  --grad-ok:linear-gradient(135deg,#34d399 0%,#22d3ee 110%);
  --grad-soft:linear-gradient(135deg,rgba(168,85,247,.22),rgba(99,102,241,.14));
  --shadow:0 18px 50px -18px rgba(0,0,0,.72);
  --ring-track:rgba(255,255,255,.08);
  --radius:22px;
}
:root[data-theme="light"]{
  --bg:#f4f2fb; --bg2:#efeaff; --surface:rgba(255,255,255,.72); --surface2:#ffffff;
  --border:rgba(20,16,40,.08); --border2:rgba(20,16,40,.14);
  --ink:#1c1830; --ink2:#4b4668; --mut:#8b86a6;
  --glow:rgba(147,51,234,.22); --glow-ok:rgba(16,185,129,.22);
  --shadow:0 18px 44px -20px rgba(80,40,160,.32);
  --ring-track:rgba(20,16,40,.08);
}

/* ---- Reset / base ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);
  background-image:
    radial-gradient(60vw 60vw at 12% -8%,rgba(168,85,247,.20),transparent 60%),
    radial-gradient(50vw 50vw at 100% 0%,rgba(99,102,241,.16),transparent 55%),
    radial-gradient(42vw 42vw at 80% 100%,rgba(236,72,153,.12),transparent 55%);
  background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
.font-display{font-family:'Space Grotesk',sans-serif;}
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mut{color:var(--mut);} .ink2{color:var(--ink2);}
.livedot{width:7px;height:7px;border-radius:99px;background:var(--ok);display:inline-block;
  animation:pulseOk 1.8s infinite;flex-shrink:0;}
@keyframes pulseOk{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);}70%{box-shadow:0 0 0 7px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,191,36,.5);}70%{box-shadow:0 0 0 7px rgba(251,191,36,0);}100%{box-shadow:0 0 0 0 rgba(251,191,36,0);}}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ---- Sidebar shell ---- */
.side{position:fixed;top:14px;left:14px;bottom:14px;width:246px;padding:20px 14px;z-index:40;border-radius:24px;
  background:var(--surface);backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px;
  transition:width .28s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.side.collapsed{width:78px;}
.brand{display:flex;align-items:center;gap:11px;padding:6px 10px 16px;}
.brand .logo{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;
  font-size:20px;box-shadow:0 10px 26px -6px var(--glow);flex-shrink:0;position:relative;}
.brand .logo::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.brand b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
.brand span{display:block;font-size:11px;color:var(--mut);font-weight:600;white-space:nowrap;}
.side.collapsed .brand .txt,.side.collapsed .nav a .lbl,.side.collapsed .navsec,.side.collapsed .sidefoot{opacity:0;pointer-events:none;}
.navsec{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);font-weight:700;margin:15px 12px 5px;transition:opacity .2s;}
.nav{display:flex;flex-direction:column;gap:3px;}
.nav a{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;color:var(--ink2);
  font-weight:600;font-size:14px;position:relative;transition:background .18s,color .18s,transform .18s;white-space:nowrap;}
.nav a i{width:20px;text-align:center;font-size:15px;flex-shrink:0;transition:transform .18s,filter .18s;}
.nav a:hover{background:var(--surface2);color:var(--ink);transform:translateX(2px);}
.nav a:hover i{filter:drop-shadow(0 0 8px var(--glow));transform:scale(1.08);}
.nav a.on{color:#fff;background:var(--grad);box-shadow:0 12px 28px -10px var(--glow);}
.nav a.on::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:22px;
  border-radius:0 4px 4px 0;background:var(--grad);box-shadow:0 0 12px var(--glow);}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:9px;transition:opacity .2s;}
.statuspill{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:var(--surface2);
  border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;}
.collapse{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:none;border:1px solid var(--border);color:var(--ink2);cursor:pointer;font:inherit;font-size:13px;font-weight:600;transition:.18s;}
.collapse:hover{background:var(--surface2);color:var(--ink);}

/* ---- Main + topbar ---- */
.main{margin-left:274px;padding:22px 30px 48px;transition:margin-left .28s cubic-bezier(.4,0,.2,1);}
body.sb-collapsed .main{margin-left:106px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.topbar h1{font-size:26px;font-weight:800;letter-spacing:-.03em;}
.topbar p{color:var(--mut);font-size:14px;margin-top:2px;font-weight:500;}
.tb-right{display:flex;align-items:center;gap:10px;}
.clockchip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:var(--surface);
  border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink2);backdrop-filter:blur(12px);white-space:nowrap;}
.chip{display:flex;align-items:center;gap:9px;padding:6px 7px 6px 13px;border-radius:99px;background:var(--surface);
  border:1px solid var(--border);font-size:13px;font-weight:600;backdrop-filter:blur(12px);}
.chip .av{width:29px;height:29px;border-radius:99px;background:var(--grad);display:grid;place-items:center;font-size:12px;color:#fff;font-weight:800;box-shadow:0 6px 16px -6px var(--glow);}
.iconbtn{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
  color:var(--ink2);cursor:pointer;display:grid;place-items:center;font-size:15px;backdrop-filter:blur(12px);transition:.18s;}
.iconbtn:hover{color:var(--ink);border-color:var(--border2);transform:translateY(-1px);box-shadow:0 8px 20px -12px var(--glow);}
.menubtn{display:none;}

/* ---- Cards + grid ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:.6;pointer-events:none;}
.card.pad0{padding:0;}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;}
.span-3{grid-column:span 3;} .span-4{grid-column:span 4;} .span-5{grid-column:span 5;} .span-6{grid-column:span 6;}
.span-7{grid-column:span 7;} .span-8{grid-column:span 8;} .span-9{grid-column:span 9;} .span-12{grid-column:span 12;}
.row-2{grid-row:span 2;}
.sec-head{display:flex;align-items:center;gap:11px;margin:4px 2px 14px;}
.sec-head .gi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:var(--grad-soft);border:1px solid var(--border2);}
.sec-head h2,.sec-head h3{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.sec-head p{font-size:12px;color:var(--mut);font-weight:500;}

/* ---- Buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:13px;
  font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;overflow:hidden;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 16px 34px -12px var(--glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -12px var(--glow);}
.btn-primary .sheen{position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s;}
.btn-primary:hover .sheen{left:150%;}
.btn-ghost{background:var(--surface2);border-color:var(--border);color:var(--ink2);}
.btn-ghost:hover{color:var(--ink);border-color:var(--border2);transform:translateY(-2px);}
.btn-ok{background:var(--grad-ok);color:#04381f;box-shadow:0 16px 34px -12px var(--glow-ok);}
.btn-ok:hover{transform:translateY(-2px);}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px;}
.btn.lg{padding:14px 24px;font-size:15px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---- Form controls ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
label,.label{font-size:12.5px;font-weight:700;color:var(--ink2);letter-spacing:.01em;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],select,textarea,.input{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface2);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s;}
input::placeholder,textarea::placeholder{color:var(--mut);}
input:focus,select:focus,textarea:focus,.input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--glow);}
textarea{resize:vertical;min-height:90px;line-height:1.55;}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px;}
.hint{font-size:12px;color:var(--mut);}
.switch{position:relative;display:inline-flex;align-items:center;width:46px;height:26px;flex-shrink:0;cursor:pointer;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.switch .track{width:100%;height:100%;border-radius:99px;background:var(--surface2);border:1px solid var(--border);transition:.2s;}
.switch .knob{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:99px;background:var(--mut);transition:.2s;}
.switch input:checked + .track{background:var(--grad);border-color:transparent;}
.switch input:checked ~ .knob{transform:translateX(20px);background:#fff;}

/* ---- Badges + tiles ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px;}
.badge.ready{background:rgba(52,211,153,.16);color:var(--ok);}
.badge.soon{background:rgba(251,191,36,.14);color:var(--warn);}
.badge.soon .dot{width:6px;height:6px;border-radius:99px;background:var(--warn);animation:pulse 1.4s infinite;}
.badge.info{background:var(--grad-soft);color:var(--p);border:1px solid var(--border2);}
.tile{display:flex;align-items:center;gap:14px;padding:15px;border-radius:16px;background:var(--surface2);
  border:1px solid var(--border);transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer;position:relative;overflow:hidden;}
.tile:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 20px 40px -20px var(--glow);}
.tile .ti{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex-shrink:0;background:var(--grad-soft);border:1px solid var(--border2);}
.tile .tt{flex:1;min-width:0;} .tile .tt b{font-size:14.5px;font-weight:700;display:block;} .tile .tt small{font-size:12px;color:var(--mut);font-weight:500;}
.tile .arw{color:var(--mut);font-size:13px;transition:.2s;}
.tile:hover .arw{color:var(--p);transform:translateX(3px);}

/* ---- KPI / stat ---- */
.stat .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;margin-bottom:8px;background:var(--grad-soft);border:1px solid var(--border2);}
.stat .n{font-size:34px;font-weight:800;letter-spacing:-.03em;font-family:'Space Grotesk';line-height:1;}
.stat .l{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:6px;}

/* ---- Auth layout (login/signup) ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;}
.auth-card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--border);border-radius:26px;
  padding:34px 30px;backdrop-filter:blur(24px) saturate(1.3);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px;text-align:center;}
.auth-brand .logo{width:56px;height:56px;border-radius:16px;background:var(--grad);display:grid;place-items:center;font-size:27px;box-shadow:0 14px 34px -10px var(--glow);}
.auth-brand h1{font-size:23px;font-weight:800;letter-spacing:-.02em;}
.auth-brand p{font-size:13.5px;color:var(--mut);font-weight:500;}

/* ---- Doc layout (legal pages) ---- */
.doc{max-width:820px;margin:0 auto;padding:40px 24px 80px;}
.doc-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px 42px;backdrop-filter:blur(20px);box-shadow:var(--shadow);}
.doc-card h1{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;}
.doc-card .updated{color:var(--mut);font-size:13px;margin-bottom:26px;}
.doc-card h2{font-size:18px;font-weight:700;margin:26px 0 10px;letter-spacing:-.01em;}
.doc-card p,.doc-card li{color:var(--ink2);font-size:14.5px;line-height:1.7;margin-bottom:10px;}
.doc-card ul,.doc-card ol{padding-left:22px;}
.doc-card a{color:var(--p);font-weight:600;}
.doc-card .note{background:var(--grad-soft);border:1px solid var(--border2);border-radius:12px;padding:13px 15px;margin:16px 0;font-size:14px;color:var(--ink);line-height:1.65;}
.doc-card .muted{color:var(--mut);font-size:13px;}
.doc-card h2:first-of-type{margin-top:0;}
.doc-top{max-width:820px;margin:0 auto;padding:24px 24px 0;display:flex;align-items:center;justify-content:space-between;}
.doc-top .home{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-weight:600;font-size:14px;}
.doc-top .home:hover{color:var(--ink);}

.foot{text-align:center;color:var(--mut);font-size:12px;margin-top:34px;}

/* ---- Entrance animation for grid children ---- */
.grid>*{animation:rise .55s cubic-bezier(.2,.7,.3,1) both;}
.grid>*:nth-child(2){animation-delay:.05s;} .grid>*:nth-child(3){animation-delay:.08s;}
.grid>*:nth-child(4){animation-delay:.11s;} .grid>*:nth-child(5){animation-delay:.14s;}
.grid>*:nth-child(6){animation-delay:.17s;} .grid>*:nth-child(7){animation-delay:.20s;}
.grid>*:nth-child(8){animation-delay:.23s;} .grid>*:nth-child(9){animation-delay:.26s;}

/* ---- Responsive ---- */
@media(max-width:1180px){ .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9{grid-column:span 6;} .row-2{grid-row:auto;} }
@media(max-width:860px){
  .side{transform:translateX(-110%);transition:transform .28s;top:0;left:0;bottom:0;border-radius:0;}
  body.sb-open .side{transform:none;}
  .main{margin-left:0;} body.sb-collapsed .main{margin-left:0;}
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12{grid-column:span 12;}
  .menubtn{display:grid!important;}
  .clockchip{display:none;}
  .doc-card{padding:28px 22px;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}

/* ============================================================
   Legacy component skins — re-style the bespoke class names the
   existing app pages' JS relies on, so markup + behavior stay intact
   while the look matches the design system.
   ============================================================ */
/* Section card (was white .sec) */
.sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);margin-bottom:18px;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);position:relative;overflow:hidden;}
.sec h2{font-size:18px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em;}
.sec h2 small{font-weight:600;}
.sec p.sub{color:var(--mut);font-size:13px;margin-bottom:14px;}

/* Tabs (sub-nav) */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.tab{background:var(--surface);border:1px solid var(--border);padding:9px 16px;border-radius:11px;cursor:pointer;
  font-weight:700;font-size:14px;color:var(--ink2);transition:.18s;backdrop-filter:blur(10px);}
.tab:hover{color:var(--ink);border-color:var(--border2);}
.tab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 26px -12px var(--glow);}
.tabpanel{display:none;} .tabpanel.on{display:block;animation:rise .4s ease both;}

/* Legacy buttons (.btn.p/.g/.r/.s) */
.btn.p{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px var(--glow);border-color:transparent;}
.btn.g{background:var(--grad-ok);color:#04381f;border-color:transparent;}
.btn.r{background:linear-gradient(135deg,#fb7185,#f43f5e);color:#fff;border-color:transparent;}
.btn.s{background:var(--surface2);color:var(--p);border-color:var(--border);}
.btn.p:hover,.btn.g:hover,.btn.r:hover,.btn.s:hover{transform:translateY(-2px);}

/* Pills / status */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.pill.ok{background:rgba(52,211,153,.16);color:var(--ok);}
.pill.bad,.pill.off{background:rgba(251,113,133,.16);color:var(--bad);}
small.mut,.mut{color:var(--mut);}

/* Legacy fields */
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;color:var(--ink2);}
.chk{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-weight:600;font-size:14px;color:var(--ink);}
.chk input{width:18px;height:18px;accent-color:var(--p);}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);}
th{color:var(--mut);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}

/* Progress bars */
.bars .bar{margin-bottom:12px;}
.bars .bar .l{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;color:var(--ink2);}
.bars .track{height:10px;background:var(--ring-track);border-radius:6px;overflow:hidden;}
.bars .fill{height:100%;background:var(--grad);}

/* Image cards (app) */
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.imgc{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface2);}
.imgc img{width:100%;height:120px;object-fit:cover;display:block;background:var(--bg2);}
.imgc .meta{padding:9px;}
.imgc input{width:100%;border:1px solid var(--border);border-radius:8px;padding:7px;font-size:12px;margin-bottom:7px;background:var(--surface2);color:var(--ink);}
.imgc .acts{display:flex;gap:5px;}
.imgc .acts button{flex:1;padding:7px;font-size:11.5px;border:none;border-radius:8px;cursor:pointer;font-weight:700;}

/* Warning banner */
.banner{background:rgba(251,191,36,.14);color:var(--warn);border:1px solid rgba(251,191,36,.25);
  text-align:center;padding:10px;font-weight:700;font-size:13px;border-radius:12px;margin-bottom:16px;display:none;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.subbox{background:var(--surface2);border:1px dashed var(--border2);border-radius:12px;padding:11px;}
.subbox input,.subbox select{background:var(--bg2);}

/* Alerts / flash messages */
.alert{padding:12px 15px;border-radius:13px;font-size:13.5px;font-weight:600;margin-bottom:16px;border:1px solid transparent;}
.alert-success{background:rgba(52,211,153,.12);color:var(--ok);border-color:rgba(52,211,153,.25);}
.alert-warning{background:rgba(251,191,36,.12);color:var(--warn);border-color:rgba(251,191,36,.25);}
.alert-danger{background:rgba(251,113,133,.12);color:var(--bad);border-color:rgba(251,113,133,.25);}
.table-wrap{overflow-x:auto;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--surface2);
  border:1px solid var(--border);padding:2px 7px;border-radius:7px;color:var(--p);word-break:break-all;}

/* ---- Shared sidebar drawer scrim (mobile) ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .28s;z-index:39;backdrop-filter:blur(2px);}
body.sb-open .scrim{opacity:1;pointer-events:auto;}
@media(min-width:861px){.scrim{display:none;}}