/* ===== LIQUID GLASS DESIGN SYSTEM — Aurian ===== */

[data-t="light"]{
  /* ── SURFACES ────────────────────────────────────────────────────────
     --bg is purposefully deep blue-slate so cards have a real contrast pop.
     Delta-L between bg (#D8E0EC) and card surface (white) is ~14 lightness
     points — the old #EEF1F6 vs rgba(255,255,255,0.42) was only ~2pts.
     --s1 is pure white for the highest elevation layer (modals, dropdowns).
     --card near-solid opacity so the teal orb tint bleeds through faintly.
  ──────────────────────────────────────────────────────────────────── */
  --bg:#FAF9F7;
  --s1:#FFFFFF;
  --card:rgba(255,255,255,0.96);

  /* ── GLASS / CARD LAYER SYSTEM ───────────────────────────────────────
     On dark themes, transparency reveals the depth below the card.
     On light themes, there IS no depth below — everything is bright.
     Depth in light mode lives entirely in SHADOW STACKS, not opacity.

     --glass: 88% opacity so backdrop-blur still activates.
     --glass-h: 97% opacity on hover — card "lifts" by becoming more solid.
     --glass-brd: NEVER white-on-white. Slate-500 at 28% = always visible.
     --glass-inner: 4-layer inset stack —
       [1] top-edge pure white catch-light (refraction lip)
       [2] bottom-edge micro-shadow (glass weight)
       [3] left edge specular
       [4] right edge ambient dim
     --glass-sh: 4-layer shadow stack —
       [1] 1px top-offset white — the "lifted plate" visual trick
       [2] tight contact shadow — card sitting on the bg surface
       [3] medium ambient diffuse
       [4] large soft bloom
     --glass-sh-h: same stack boosted for hover
  ──────────────────────────────────────────────────────────────────── */
  --glass:rgba(255,255,255,0.88);
  --glass-h:rgba(255,255,255,0.97);
  --glass-brd:rgba(140,125,90,0.18);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(140,125,90,0.06),inset 1px 0 0 rgba(255,255,255,0.65),inset -1px 0 0 rgba(140,125,90,0.04);
  --glass-sh:0 1px 0 rgba(255,255,255,0.85),0 2px 5px rgba(30,25,15,0.04),0 8px 24px rgba(30,25,15,0.06),0 18px 44px rgba(30,25,15,0.04);
  --glass-sh-h:0 1px 0 rgba(255,255,255,1),0 4px 10px rgba(30,25,15,0.06),0 16px 40px rgba(30,25,15,0.10),0 32px 64px rgba(30,25,15,0.06);

  /* ── STRUCTURAL TOKENS ───────────────────────────────────────────────
     --el: element fill — blue-slate tint, not neutral gray
     --hov: row hover fill — teal-tinted so hover signals action
     --brd: dividers — dark-tinted, legible on white cards
     --brd2: hairline row dividers
     --brd-a: accent-tinted border for focus rings and active states
  ──────────────────────────────────────────────────────────────────── */
  --el:#F0EEE9;
  --hov:rgba(20,121,184,0.06);
  --brd:rgba(15,23,42,0.11);
  --brd2:rgba(15,23,42,0.06);
  --brd-a:rgba(20,121,184,0.32);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────
     --t1: deep navy-black. Richer than slate-900, has hue warmth.
     --t2: contrast ratio 6.2:1 on white. Old #64748B was 4.48:1 on
           rgba(255,255,255,0.88) glass — borderline fail. Fixed.
     --t3: 4.7:1 on white — passes WCAG AA as secondary label text.
           Old #94A3B8 was 2.85:1 — a clear accessibility failure.
     --t4: decorative only. Borders, muted placeholders.
  ──────────────────────────────────────────────────────────────────── */
  --t1:#1A1A2E;
  --t2:#4A4A5A;
  --t3:#7A7A8A;
  --t4:#B8B8C4;

  /* ── ACCENT / PRIMARY ACTION ─────────────────────────────────────────
     Old #0D9373 = HSL 168° 84% 31% — muddy, low-saturation.
     New #0A8C6C = HSL 164° 88% 29% — jewel-toned emerald-teal.
     Richer, more saturated, unmistakably premium on white backgrounds.
     accent-g density increased 25% so icon wells and tag bgs show color.
  ──────────────────────────────────────────────────────────────────── */
  --accent:#1479B8;
  --accent2:#106A9E;
  --accent-g:rgba(20,121,184,0.10);

  /* ── VIOLET ──────────────────────────────────────────────────────── */
  --violet:#5B21B6;
  --violet-g:rgba(91,33,182,0.09);

  /* ── SEMANTIC COLORS ─────────────────────────────────────────────────
     All shifted from Tailwind -600 tier to -700/-800 tier.
     This adds ~15% contrast on white while remaining recognisably
     green / red / amber / blue rather than dark.
     Tag -g values tripled from 0.05–0.06 to 0.10–0.12 so pill
     backgrounds are visible not ghostlike.
  ──────────────────────────────────────────────────────────────────── */
  --green:#1A7A5C;
  --green-g:rgba(26,122,92,0.10);
  --red:#B04040;
  --red-g:rgba(176,64,64,0.09);
  --amber:#8C6B10;
  --amber-g:rgba(140,107,16,0.09);
  --blue:#2D4EA0;
  --blue-g:rgba(45,78,160,0.09);

  /* ── AMBIENT ORBS ────────────────────────────────────────────────────
     Tripled vs original — blurred blobs now visibly tint the bg canvas,
     signalling a living premium environment vs a flat corporate page.
  ──────────────────────────────────────────────────────────────────── */
  --orb1:rgba(79,163,216,0.18);
  --orb2:rgba(20,121,184,0.10);
  --orb3:rgba(14,90,134,0.07);

  /* ── SIDEBAR — always dark, theme-independent ────────────────────── */
  --sb-bg:#0F1525;
  --sb-t:rgba(255,255,255,0.58);
  --sb-t2:rgba(255,255,255,0.28);
  --sb-brd:rgba(255,255,255,0.06);

  /* ── GLASS OPTICAL EFFECTS ───────────────────────────────────────────
     --reflect: top-edge shine on cards.
       Full white at the very lip → rapid fade → gone by 58%.
       Reads as a real glass surface catching overhead light.
     --specular: elliptical point-light highlight at upper-left corner.
       Full white at center, transitions to transparent by 55%.
  ──────────────────────────────────────────────────────────────────── */
  --reflect:linear-gradient(160deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.55) 15%,rgba(255,255,255,0.12) 38%,transparent 58%);
  --specular:radial-gradient(ellipse at 18% 0%,rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 22%,transparent 55%);

  /* ── UTILITY ─────────────────────────────────────────────────────── */
  --tip-bg:rgba(11,20,38,0.95);
  --tip-c:#F0F4FA;
  --skel-hi:rgba(20,121,184,0.13);
  --toast-sh:0 1px 0 rgba(255,255,255,0.9),0 8px 28px rgba(15,23,42,0.14),0 3px 8px rgba(15,23,42,0.08);
  --kpi-hover-brd:rgba(20,121,184,0.32);
  --scroll-accent:rgba(20,121,184,0.28);
  --scroll-accent-h:rgba(20,121,184,0.50);

  /* ── NOTIFICATION BADGE ──────────────────────────────────────────── */
  --badge-bg:linear-gradient(135deg,#B91C1C,#991B1B);
  --badge-sh:0 2px 10px rgba(185,28,28,0.42);
  --badge-ring:rgba(185,28,28,0.30);

  /* ── LIGHT-MODE EXCLUSIVE TOKENS ────────────────────────────────────
     --btn-c-sh / --btn-c-sh-h: emerald-tinted shadow on accent buttons.
       Dark mode uses rgba(94,234,212,...) which looks wrong on light bg.
       Warm emerald glow is the correct pairing for the new accent.
     --modal-scrim: needs to be darker in light mode (0.58 vs 0.35 base)
       so modals pop visibly against the light canvas.
     --ph-grad: page header h2 gradient override.
       Current global rule fades from --t1 to --t2 (navy to gray) = flat.
       Light-mode override routes to accent teal for a premium editorial feel.
     --tag-brd-mult: used in tag border calculations below.
  ──────────────────────────────────────────────────────────────────── */
  --btn-c-sh:inset 0 1px 0 rgba(255,255,255,0.22),0 1px 3px rgba(16,106,158,0.30),0 4px 14px rgba(20,121,184,0.35);
  --btn-c-sh-h:inset 0 1px 0 rgba(255,255,255,0.28),0 2px 6px rgba(16,106,158,0.35),0 8px 28px rgba(20,121,184,0.45);
  --modal-scrim:rgba(11,20,38,0.58);
  --ph-grad:linear-gradient(135deg,#1A1A2E 0%,#1479B8 100%);

  /* Chart bars — warm tones harmonized with gold */
  --bar-confirm:#C4A044;
  --bar-pending:#D4C090;
  --bar-cancel:#B89878;

  /* Aliases for legacy --b1/--b2 usage */
  --b1:var(--el);--b2:var(--brd);

  /* Typographic scale */
  --text-xs:9px;--text-sm:11px;--text-md:13px;--text-lg:15px;
}

[data-t="dark"]{
  --bg:#080D18;--s1:#0E1525;--card:rgba(14,21,37,0.75);
  --glass:rgba(14,21,37,0.72);--glass-h:rgba(20,28,46,0.82);--glass-brd:rgba(201,204,212,0.12);--glass-inner:inset 0 1px 0 rgba(201,204,212,0.08),inset 0 -1px 0 rgba(0,0,0,0.2),inset 1px 0 0 rgba(201,204,212,0.03),inset -1px 0 0 rgba(0,0,0,0.12);--glass-sh:0 0 0 1px rgba(201,204,212,0.04),0 8px 32px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.35);--glass-sh-h:0 0 0 1px rgba(201,204,212,0.08),0 20px 48px rgba(0,0,0,0.55),0 4px 8px rgba(0,0,0,0.3);
  --el:#182236;--hov:rgba(201,204,212,0.04);--brd:rgba(255,255,255,0.09);--brd2:rgba(255,255,255,0.05);--brd-a:rgba(201,204,212,0.2);
  --t1:#EDE8DF;--t2:#B0A89A;--t3:#847B6E;--t4:#3A3228;
  /* Accent: warm gold — Aurian identity */
  --accent:#C9CCD4;--accent2:#DFE2E8;--accent-g:rgba(201,204,212,0.08);
  --violet:#A78BFA;--violet-g:rgba(167,139,250,0.08);
  --green:#5BC9A0;--green-g:rgba(91,201,160,0.08);--red:#E07070;--red-g:rgba(224,112,112,0.08);
  --amber:#E0C060;--amber-g:rgba(224,192,96,0.08);--blue:#7DD3FC;--blue-g:rgba(125,211,252,0.08);
  --orb1:rgba(201,204,212,0.16);--orb2:rgba(140,150,170,0.10);--orb3:rgba(100,110,130,0.07);
  --ph-grad:linear-gradient(135deg,#EDE8DF 0%,#C9CCD4 100%);
  --sb-bg:#0A0F1C;--sb-t:rgba(255,255,255,0.55);--sb-t2:rgba(255,255,255,0.25);--sb-brd:rgba(201,204,212,0.08);
  --reflect:linear-gradient(160deg,rgba(201,204,212,0.07) 0%,rgba(255,255,255,0.03) 25%,transparent 55%);
  --specular:radial-gradient(ellipse at 25% 8%,rgba(201,204,212,0.05) 0%,transparent 55%);
  --tip-bg:rgba(0,0,0,0.88);--tip-c:#fff;
  --skel-hi:rgba(201,204,212,0.06);
  --toast-sh:0 12px 40px rgba(0,0,0,0.4),0 4px 8px rgba(0,0,0,0.25);
  --kpi-hover-brd:rgba(201,204,212,0.15);
  --scroll-accent:rgba(201,204,212,0.2);--scroll-accent-h:rgba(201,204,212,0.4);
  --badge-bg:linear-gradient(135deg,#FB7185,#F43F5E);--badge-sh:0 2px 8px rgba(251,113,133,0.4);--badge-ring:rgba(251,113,133,0.3);

  /* Chart bars — warm tones for dark */
  --bar-confirm:#C9CCD4;
  --bar-pending:#A89470;
  --bar-cancel:#8C7A60;

  /* Aliases for legacy --b1/--b2 usage */
  --b1:var(--el);--b2:var(--brd);

  /* Typographic scale */
  --text-xs:9px;--text-sm:11px;--text-md:13px;--text-lg:15px;
}

@font-face{font-family:'Supreme';src:url('/fonts/Supreme-Variable.woff2') format('woff2-variations'),url('/fonts/Supreme-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ClashDisplay';src:url('/fonts/ClashDisplay-Variable.woff2') format('woff2-variations'),url('/fonts/ClashDisplay-Variable.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Supreme',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .5s,color .4s;}
.display{font-family:'ClashDisplay','Supreme',sans-serif;font-weight:500;letter-spacing:-0.5px;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--t3);}

/* Noise overlay — adds micro-texture so glass doesn't look flat */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:var(--z-noise);opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* In light mode the noise is more visible — boost slightly */
[data-t="light"] body::after{opacity:0.04;}

/* Orbs */
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(120px);animation:morph 25s ease-in-out infinite;}
.orb-1{width:600px;height:600px;background:var(--orb1);top:-15%;right:5%;}
.orb-2{width:500px;height:500px;background:var(--orb2);bottom:0;left:10%;animation-delay:-9s;}
.orb-3{width:400px;height:400px;background:var(--orb3);top:35%;right:25%;animation-delay:-17s;}
/* App logado: orbs de fundo desligados — invisíveis atrás do chrome do app
   (prova: docs/perf/bench, orbs-compare, ≤5px de diferença) e caros de compor. */
body.app-shell .orbs { display: none; }
@keyframes morph{0%,100%{transform:translate(0,0) scale(1);border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}25%{transform:translate(40px,-30px) scale(1.08);border-radius:30% 60% 70% 40%/50% 60% 30% 60%;}50%{transform:translate(-30px,40px) scale(0.92);border-radius:50% 30% 50% 70%/40% 70% 30% 60%;}75%{transform:translate(20px,20px) scale(1.04);border-radius:40% 60% 40% 60%/60% 40% 60% 40%;}}

@keyframes pd{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);}}
@keyframes draw{from{stroke-dashoffset:800;}to{stroke-dashoffset:0;}}
@keyframes glow{0%,100%{box-shadow:0 0 6px var(--accent),0 0 12px rgba(79,163,216,0.15);}50%{box-shadow:0 0 10px var(--accent),0 0 20px rgba(79,163,216,0.25);}}

/* Glass card */
.gc{
  background:var(--glass);
  backdrop-filter:blur(36px) saturate(1.6);-webkit-backdrop-filter:blur(36px) saturate(1.6);
  border-radius:20px;border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh),var(--glass-inner);
  position:relative;overflow:hidden;
  transition:all .45s cubic-bezier(0.16,1,0.3,1);
}
.gc:hover{background:var(--glass-h);box-shadow:var(--glass-sh-h),var(--glass-inner);transform:translateY(-3px);}
.gc::before{content:'';position:absolute;top:0;left:0;right:0;height:55%;background:var(--reflect);pointer-events:none;border-radius:20px 20px 0 0;z-index:1;}
.gc::after{content:'';position:absolute;inset:0;background:var(--specular);pointer-events:none;z-index:1;border-radius:20px;}
.gc-h{padding:16px 20px;border-bottom:1px solid var(--brd2);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
.gc-h h3{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--t1);}
.gc-h a{font-size:11px;color:var(--accent);font-weight:700;cursor:pointer;transition:opacity .2s;}
.gc-h a:hover{opacity:.8;}
.gc-b{padding:18px 20px;position:relative;z-index:2;}
.gc-nohover:hover{transform:none;background:var(--glass);box-shadow:var(--glass-sh),var(--glass-inner);}

/* Buttons */
.btn{padding:9px 18px;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:7px;transition:all .25s cubic-bezier(0.16,1,0.3,1);font-family:inherit;letter-spacing:.1px;position:relative;overflow:hidden;}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
/* `.aurora-btn` é dona do próprio indisponível e do carregando (tecla travada/segurada,
   AuroraButton.css). O :where() zera o peso da exclusão: a regra segue (0,2,0) para o resto. */
.btn:disabled:not(:where(.aurora-btn)){opacity:.4;cursor:not-allowed;transform:none !important;filter:none !important;}

/* Tags — glass */
.tag{display:inline-flex;font-size:9px;padding:3px 8px;border-radius:6px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid transparent;}
/* Border colors use currentColor-relative opacity via the -g vars for dark mode compatibility.
   Light mode tag overrides below re-specify these with darker values for full visibility. */
/* Escopadas em .tag: soltas, as classes curtas (tr/ta/tb...) vazavam para
   sufixos de posição de outros componentes — .mc.tr/.dc.tr (brackets de
   modal/drawer) ganhavam fundo vermelho de badge. Todo consumidor usa o par
   ("tag tr"), então o escopo não muda nenhum badge real. */
.tag.tg{background:var(--green-g);color:var(--green);border-color:color-mix(in srgb,var(--green) 20%,transparent);}
.tag.tr{background:var(--red-g);color:var(--red);border-color:color-mix(in srgb,var(--red) 20%,transparent);}
.tag.ta{background:var(--amber-g);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 20%,transparent);}
.tag.tb{background:var(--accent-g);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 20%,transparent);}
.tag.tp{background:var(--violet-g);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 20%,transparent);}
.t-blue{background:var(--blue-g);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 20%,transparent);}

/* Section tag — glass */
.sec{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;text-transform:uppercase;letter-spacing:2px;font-weight:800;color:var(--accent);border:1px solid var(--brd-a);border-radius:6px;padding:3px 10px;background:var(--accent-g);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);}
.sec svg{width:10px;height:10px;stroke:var(--accent);fill:none;stroke-width:2.5;}

/* Status dot */
.sts{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.sts::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pd 2s infinite;}

/* Input — glass */
.input{padding:9px 12px;border:1px solid var(--glass-brd);border-radius:10px;font-size:12px;font-family:var(--ff-sans);font-weight:500;width:100%;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);color:var(--t1);transition:all .25s;box-shadow:var(--glass-inner);}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g),0 0 16px rgba(79,163,216,0.06),var(--glass-inner);}
.input:hover:not(:focus){border-color:var(--t4);}
.input::placeholder{color:var(--t3);}
select.input{cursor:pointer;}
textarea.input{resize:vertical;}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(15px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1);}
.reveal.shown{opacity:1;transform:translateY(0);}

/* Avatar — glass ring */
.av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;color:#fff;flex-shrink:0;
  position:relative;
  box-shadow:0 3px 12px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.1);
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
  letter-spacing:.3px;
  border:2px solid rgba(255,255,255,0.25);
  transition:all .3s cubic-bezier(0.16,1,0.3,1);
}
.av:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,0.16),inset 0 1px 0 rgba(255,255,255,0.35);}

/* Mono font utility */
.mono{font-family:'JetBrains Mono',monospace;}

/* Table base — refined */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.tbl th{text-align:left;padding:12px 16px;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);font-weight:800;border-bottom:2px solid var(--brd);background:var(--glass);position:sticky;top:0;z-index:2;}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--brd2);vertical-align:middle;transition:background .15s;font-weight:500;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--accent-g);}
.tbl tbody tr{transition:background .15s;}
.tbl .btn-icon{width:28px;height:28px;border-radius:8px;border:1px solid var(--brd);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s, background .2s;}
.tbl .btn-icon svg{width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:1.8;}
.tbl .btn-icon:hover{border-color:var(--accent);background:var(--accent-g);}
.tbl .btn-icon:hover svg{stroke:var(--accent);}

/* Modal overlay — global */
.modal-overlay{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  animation:overlayIn .3s ease;
}
.modal-overlay>.gc,.modal-overlay>.modal,.modal-overlay>.stepper-modal{animation:modalSpring .35s cubic-bezier(0.34,1.36,0.64,1);}
.stepper-modal{width:680px;max-width:92vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;}
.stepper-modal .gc-b{overflow-y:auto;flex:1;}

/* Form grid — standard 2-col */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* Empty state — illustrated */
.empty-state{text-align:center;padding:48px 24px;color:var(--t3);}
.empty-state .empty-illust{width:100px;height:100px;margin:0 auto 20px;}
.empty-state .empty-illust svg{width:100%;height:100%;}
.empty-state svg.empty-icon-legacy{width:48px;height:48px;stroke:var(--t4);fill:none;stroke-width:1.2;margin:0 auto 16px;}
.empty-state h4{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:6px;}
.empty-state p{font-size:12px;line-height:1.5;max-width:280px;margin:0 auto;}
.empty-state .empty-action{margin-top:16px;}
.empty-state .empty-action button{
  padding:8px 20px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 2px 10px rgba(0,0,0,0.14);
  transition:all .25s cubic-bezier(0.16,1,0.3,1);
}
[data-t="light"] .empty-state .empty-action button{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 16px rgba(20,121,184,0.32),0 1px 3px rgba(20,121,184,0.2);}
[data-t="light"] .empty-state .empty-action button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 8px 28px rgba(20,121,184,0.42),0 2px 6px rgba(20,121,184,0.25);}
.empty-state .empty-action button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 8px 28px rgba(0,0,0,0.2);}

/* Send spinner */
.send-spinner{width:32px;height:32px;border:3px solid var(--brd);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* Tooltip */
[data-tip]{position:relative;}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:var(--tip-bg);color:var(--tip-c);font-size:10px;font-weight:600;white-space:nowrap;z-index:var(--z-tooltip);pointer-events:none;animation:fadeIn .15s ease;}

/* ===== DARK MODE OVERRIDES ===== */
[data-t="dark"] .gc{border-color:rgba(201,204,212,0.10);}
[data-t="dark"] .gc:hover{border-color:rgba(201,204,212,0.18);box-shadow:0 0 0 1px rgba(201,204,212,0.10),0 20px 48px rgba(0,0,0,0.55),0 4px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(201,204,212,0.10),inset 0 -1px 0 rgba(0,0,0,0.2);}
[data-t="dark"] .input{background:rgba(10,15,28,0.7);border-color:rgba(201,204,212,0.14);}
[data-t="dark"] .input:hover:not(:focus){border-color:rgba(201,204,212,0.22);}
[data-t="dark"] .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,204,212,0.18),0 0 16px rgba(201,204,212,0.06),var(--glass-inner);}
[data-t="dark"] .modal-overlay{background:rgba(0,0,0,0.60);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);}
[data-t="dark"] .tbl th{background:rgba(10,15,28,0.95);backdrop-filter:blur(20px);}
[data-t="dark"] .tbl tr:hover td{background:rgba(201,204,212,0.06);}
[data-t="dark"] .gc-h{border-bottom-color:rgba(201,204,212,0.08);}
[data-t="dark"] .ph{border-bottom-color:rgba(201,204,212,0.10);}
[data-t="dark"] .tag{border-width:1px;}
[data-t="dark"] .tag.tg{background:rgba(74,222,128,0.1);color:#4ADE80;border-color:rgba(74,222,128,0.18);}
[data-t="dark"] .tag.tr{background:rgba(251,113,133,0.1);color:#FB7185;border-color:rgba(251,113,133,0.18);}
[data-t="dark"] .tag.ta{background:rgba(252,211,77,0.1);color:#FCD34D;border-color:rgba(252,211,77,0.18);}
[data-t="dark"] .tag.tb{background:rgba(201,204,212,0.1);color:#C9CCD4;border-color:rgba(201,204,212,0.18);}
[data-t="dark"] .tag.tp{background:rgba(167,139,250,0.1);color:#A78BFA;border-color:rgba(167,139,250,0.18);}
[data-t="dark"] .t-blue{background:rgba(125,211,252,0.1);color:#7DD3FC;border-color:rgba(125,211,252,0.18);}

/* ===== LIGHT MODE OVERRIDES ===== */
/*
  DESIGN RATIONALE:
  Dark mode glass = transparent dark card over dark bg (opacity does the work).
  Light mode glass = raised white card over tinted bg (shadows + borders do the work).
  The two modes need fundamentally different physics, not just variable swaps.
*/

/* --- Glass card --- */
[data-t="light"] .gc{
  /* Slightly tinted white — not pure #FFF, not the bg colour either.
     The faint teal tint (--glass-tint) reads as "glass catching ambient light". */
  background:linear-gradient(145deg,rgba(255,255,255,0.88) 0%,rgba(248,252,251,0.78) 100%);
  /* Visible cool-grey border — acts like the physical edge of a glass panel */
  border-color:rgba(148,163,184,0.4);
  /* The top-left edge is brighter (light source), bottom-right is darker (shadow).
     This is the single most impactful trick for making glass feel raised in light mode. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9) inset,          /* top-left bright edge */
    0 -1px 0 0 rgba(148,163,184,0.3) inset,          /* bottom inner edge */
    0 2px 4px rgba(15,23,42,0.04),                   /* contact shadow */
    0 8px 20px rgba(15,23,42,0.07),                  /* ambient lift */
    0 20px 48px rgba(15,23,42,0.05);                 /* distant halo */
}
[data-t="light"] .gc:hover{
  background:linear-gradient(145deg,rgba(255,255,255,0.97) 0%,rgba(248,252,251,0.9) 100%);
  border-color:rgba(20,121,184,0.3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,1) inset,
    0 -1px 0 0 rgba(20,121,184,0.15) inset,
    0 4px 8px rgba(15,23,42,0.06),
    0 16px 40px rgba(15,23,42,0.12),
    0 32px 72px rgba(15,23,42,0.07),
    0 0 0 3px rgba(20,121,184,0.08);                 /* gold halo on hover */
}

/* Reflect gradient: use a bright-white streak at top-left edge only.
   The rest is transparent — too much white-on-white kills it. */
[data-t="light"] .gc::before{
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.5) 15%,
    rgba(255,255,255,0.1) 35%,
    transparent 55%
  );
  height:60%;
}
/* Specular: a tight bright spot at top-left corner — simulates glass catching window light */
[data-t="light"] .gc::after{
  background:radial-gradient(
    ellipse at 8% 0%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.6) 15%,
    rgba(255,255,255,0.1) 35%,
    transparent 55%
  );
}

/* Section header divider — needs more visible rule */
[data-t="light"] .gc-h{border-bottom-color:rgba(15,23,42,0.07);}

/* --- Modal overlay --- */
/* Darker scrim so the floating modal really separates from page */
[data-t="light"] .modal-overlay{
  background:rgba(15,23,42,0.5);
  backdrop-filter:blur(12px) saturate(1.8);
  -webkit-backdrop-filter:blur(12px) saturate(1.8);
}
/* Modal card itself gets strongest shadow treatment */
[data-t="light"] .modal-overlay>.gc,
[data-t="light"] .modal-overlay>.modal,
[data-t="light"] .modal-overlay>.stepper-modal{
  background:linear-gradient(160deg,rgba(255,255,255,0.97) 0%,rgba(248,252,250,0.95) 100%);
  border-color:rgba(148,163,184,0.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,1) inset,
    0 -1px 0 0 rgba(148,163,184,0.2) inset,
    0 4px 8px rgba(15,23,42,0.06),
    0 16px 48px rgba(15,23,42,0.16),
    0 40px 96px rgba(15,23,42,0.12),
    0 0 0 1px rgba(255,255,255,0.5);              /* outer ring — Apple-style */
}

/* --- Inputs in light mode — solid, readable --- */
[data-t="light"] .input{
  background:rgba(255,255,255,0.9);
  border-color:rgba(148,163,184,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 1px 3px rgba(15,23,42,0.05),
    0 2px 6px rgba(15,23,42,0.04);
}
[data-t="light"] .input:hover:not(:focus){
  border-color:rgba(100,116,139,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 1px 4px rgba(15,23,42,0.07),
    0 3px 8px rgba(15,23,42,0.05);
}
[data-t="light"] .input:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,0.98);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 0 0 3px rgba(20,121,184,0.12),
    0 2px 8px rgba(15,23,42,0.06);
}

/* --- Tags in light mode — richer fills so they read on white cards --- */
[data-t="light"] .tag.tg{background:rgba(26,122,92,0.09);color:#065F46;border-color:rgba(26,122,92,0.20);}
[data-t="light"] .tag.tr{background:rgba(220,38,38,0.09);color:#991B1B;border-color:rgba(220,38,38,0.22);}
[data-t="light"] .tag.ta{background:rgba(180,83,9,0.09);color:#92400E;border-color:rgba(180,83,9,0.22);}
[data-t="light"] .tag.tb{background:rgba(20,121,184,0.10);color:#106A9E;border-color:rgba(20,121,184,0.22);}
[data-t="light"] .tag.tp{background:rgba(109,40,217,0.09);color:#4C1D95;border-color:rgba(109,40,217,0.22);}
[data-t="light"] .t-blue{background:rgba(29,78,216,0.09);color:#1E3A8A;border-color:rgba(29,78,216,0.22);}

/* --- KPI cards inherit .gc overrides, but boost hover glow --- */
[data-t="light"] .dash-kpi:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,1) inset,
    0 -1px 0 0 rgba(20,121,184,0.15) inset,
    0 6px 16px rgba(15,23,42,0.09),
    0 24px 56px rgba(15,23,42,0.13),
    0 0 0 3px rgba(20,121,184,0.1);
}

/* --- View toggle in light mode --- */
[data-t="light"] .view-toggle{
  background:rgba(255,255,255,0.8);
  border-color:rgba(148,163,184,0.4);
  box-shadow:0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);
}
[data-t="light"] .vt-btn.active{
  background:var(--accent);
  box-shadow:0 1px 3px rgba(20,121,184,0.3),0 0 0 1px rgba(16,106,158,0.4);
}

/* --- Table in light mode — visible row separators --- */
[data-t="light"] .tbl th{
  background:rgba(241,245,249,0.9);
  border-bottom-color:rgba(15,23,42,0.1);
}
[data-t="light"] .tbl td{border-bottom-color:rgba(15,23,42,0.06);}

/* --- Date input in light mode --- */
[data-t="light"] .input-date{
  background:rgba(255,255,255,0.9);
  border-color:rgba(148,163,184,0.45);
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset,0 1px 3px rgba(15,23,42,0.05);
}

/* --- Toast in light mode — card-like, not washed out --- */
[data-t="light"] .toast{
  background:rgba(255,255,255,0.95);
  border-color:rgba(148,163,184,0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(15,23,42,0.06),
    0 12px 36px rgba(15,23,42,0.12),
    0 4px 8px rgba(15,23,42,0.06);
}

/* --- Skeleton shimmer — richer contrast in light mode --- */
[data-t="light"] .skel{
  background:linear-gradient(90deg,#EDEAE5 25%,rgba(20,121,184,0.10) 50%,#EDEAE5 75%);
  background-size:200% 100%;
}

/* --- Scrollbar — more visible in light mode --- */
[data-t="light"] ::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.5);}
[data-t="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.65);}

/* --- Body background: stronger orbs so the blur gives depth --- */
[data-t="light"] body{background:var(--bg);}

/* --- Section tag in light mode --- */
[data-t="light"] .sec{
  background:rgba(20,121,184,0.09);
  border-color:rgba(20,121,184,0.25);
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;
}

/* --- Page header gradient text ---
   Dark mode fades from near-white to slate — looks premium on dark bg.
   Light mode needs a different story: navy anchor → emerald teal endpoint.
   This matches the accent and gives visual identity to each page title,
   rather than a gray fade that looks like "default browser text color". */
[data-t="light"] .ph h2{
  background:var(--ph-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* View toggle tabs (reusable) */
.view-toggle{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(12px);}
.vt-btn{padding:5px 14px;border:none;background:transparent;font-size:10px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .15s;}
.vt-btn.active{background:var(--accent);color:#fff;}
.vt-btn:not(.active):hover{background:var(--hov);}

/* Skeleton loading shimmer */
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.skel{border-radius:8px;background:linear-gradient(90deg,var(--el) 25%,var(--skel-hi) 50%,var(--el) 75%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;}
.skel-line{height:12px;margin-bottom:10px;border-radius:6px;}
.skel-line.w60{width:60%;}.skel-line.w80{width:80%;}.skel-line.w40{width:40%;}
.skel-circle{width:36px;height:36px;border-radius:50%;}
.skel-kpi{height:100px;border-radius:16px;}
.skel-bar{height:180px;border-radius:12px;}
.skel-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--brd2);}

/* Modal animation — spring */
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalSpring{from{opacity:0;transform:scale(0.93) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}

/* Page transition */
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.page-enter{animation:pageIn .3s ease;}

/* Date input — glass */
.input-date{
  padding:7px 12px;border:1px solid var(--glass-brd);border-radius:10px;
  font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:600;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  color:var(--t1);transition:all .25s;cursor:pointer;box-shadow:var(--glass-inner);
}
.input-date:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g),var(--glass-inner);}
.input-date:hover:not(:focus){border-color:var(--t4);}
[data-t="dark"] .input-date::-webkit-calendar-picker-indicator{filter:invert(0.7);cursor:pointer;}

/* Toast notifications */
.toast-container{position:fixed;top:20px;right:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{
  background:var(--glass);backdrop-filter:blur(36px) saturate(1.6);-webkit-backdrop-filter:blur(36px) saturate(1.6);
  border:1px solid var(--glass-brd);border-radius:14px;
  padding:14px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--toast-sh),var(--glass-inner);
  animation:toastIn .4s cubic-bezier(0.34,1.56,0.64,1);
  min-width:280px;max-width:380px;position:relative;overflow:hidden;pointer-events:auto;
}
.toast.removing{animation:toastOut .3s ease forwards;}
.toast::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:var(--reflect);pointer-events:none;border-radius:14px 14px 0 0;}
.toast-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;}
.toast-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;}
.toast-body{flex:1;position:relative;z-index:2;}
.toast-title{font-size:12px;font-weight:700;margin-bottom:2px;}
.toast-msg{font-size:10px;color:var(--t2);}
.toast-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;position:relative;z-index:2;transition:color .15s;}
.toast-close:hover{color:var(--t1);}
.toast-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.toast-progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 14px 14px;animation:toastProgress 3s linear forwards;}
.toast.t-success .toast-icon{background:var(--green-g);color:var(--green);}
.toast.t-success .toast-progress{background:var(--green);}
.toast.t-error .toast-icon{background:var(--red-g);color:var(--red);}
.toast.t-error .toast-progress{background:var(--red);}
.toast.t-info .toast-icon{background:var(--blue-g);color:var(--blue);}
.toast.t-info .toast-progress{background:var(--blue);}
@keyframes toastIn{from{opacity:0;transform:translateX(60px) scale(0.9);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes toastOut{to{opacity:0;transform:translateX(60px) scale(0.9);}}
@keyframes toastProgress{from{width:100%;}to{width:0%;}}

/* ===== THEME TRANSITION ===== */
@media(prefers-reduced-motion:no-preference){
  .gc,.btn,.input,.tag,.tbl,.toast,.dash-kpi,.ex-card,.rel-kpi,
  .queue-chip,.template-option,.send-summary,.drawer,.import-preview,
  .sa-stat-card,.sa-mini-card,.sa-module-card,.sa-plan-card-v2,
  .config-tab,.persona-card,.conv-chat,.bubble,.pp-container{
    transition:background-color .4s,border-color .3s,color .3s,box-shadow .4s;
  }
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.15s !important;}
  .orb{animation:none !important;}
  .gc:hover,.dash-kpi:hover,.kpi-new:hover,.ex-card:hover{transform:none !important;}
  .gc:hover,.dash-kpi:hover{box-shadow:var(--glass-sh-h),var(--glass-inner);}
  .reveal{opacity:1 !important;transform:none !important;}
  .page-enter{animation:none !important;}
  .fab:hover{transform:none !important;}
  .ni .bdg{animation:none !important;}
  .ni .bdg::after{animation:none !important;}
  .sts::before{animation:none !important;}
}