/* ============ AURA design tokens & base ============ */
:root {
  --bg-primary: #0B0F1A;
  --bg-secondary: #0F172A;
  --bg-elevated: #111827;
  --glass-light: rgba(255,255,255,0.06);
  --glass-medium: rgba(255,255,255,0.08);
  --glass-heavy: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.12);
  --glass-border-strong: rgba(255,255,255,0.18);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.70);
  --text-tertiary: rgba(255,255,255,0.55);
  --text-disabled: rgba(255,255,255,0.25);
  --brand-start: #7C3AED;
  --brand-end: #22D3EE;
  --inhale: #60A5FA;
  --hold: #A78BFA;
  --exhale: #34D399;
  --rest: #64748B;
  --warning: #F59E0B;
  --glow-purple: rgba(124,58,237,0.6);
  --glow-cyan: rgba(34,211,238,0.55);
  --glow-blue: rgba(96,165,250,0.55);
  --glow-green: rgba(52,211,153,0.55);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;
  --dur-breathe: 4000ms;
  --font: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;

  /* ---- Spacing scale ----------------------------------------------------
     Everything vertical and internal comes from this 4px-based ramp. Before
     it existed the UI carried 24 distinct hand-typed gap values across 423
     inline declarations, including 3, 5, 7, 15, 22, 26 and 30px, which is why
     no two screens shared a rhythm. New spacing uses a token or it does not
     ship. Rhythm rule: --s5 between groups, --s3 within a group. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;   /* the .glass card radius, already consistent app-wide */
  --r-pill: 9999px;

  /* ---- Minimum hit target -----------------------------------------------
     Apple HIG and WCAG 2.5.8 both land near this. Controls smaller than it
     get padded up to it rather than redrawn. */
  --tap-min: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- Stable viewport reference (single source of truth) ----------
   --vh-fixed is THE layout height every full-screen container measures against.
   It resolves, in order of preference:
     1. 100svh  — the SMALL viewport height. Unlike 100dvh this is a constant:
        it is the height with the mobile browser's URL bar EXPANDED, and it does
        NOT change while the bar collapses during scroll. `dvh` was the previous
        value and is precisely why the layout resized mid-scroll on phones.
     2. 100vh   — fallback for engines without svh (older Safari/Firefox).
   Declared once here so no screen can drift to a different height basis.     */
:root { --vh-fixed: 100vh; }
@supports (height: 100svh) { :root { --vh-fixed: 100svh; } }

html, body { height: 100%; }
html {
  /* Lock the horizontal axis to the viewport so nothing can widen the page and
     introduce a horizontal scrollbar (which would itself shift layout). */
  width: 100%;
  overflow-x: hidden;
  /* The page scroll container is ALWAYS html, and it is always scrollable, so
     the document never toggles between "has a scroll container" and "doesn't"
     when navigating from a fixed-height screen to a scrolling one. Combined
     with the zero-width scrollbar above this reserves no pixels at all. */
  overflow-y: scroll;
}
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
  /* body must NOT declare its own overflow: that would make it a second scroll
     container competing with html and reintroduce inconsistent sizing. */
  -webkit-font-smoothing: antialiased;
  /* Long copy wraps and never overflows its container (issue: text should
     break to the next line instead of being clipped / causing h-scroll). */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* Headings balance their lines for a cleaner rag. */
h1, h2, h3, .overline { text-wrap: balance; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: var(--font); }
a { color: inherit; text-decoration: none; }

.app-root { position: relative; min-height: var(--vh-fixed); width: 100%; }

/* ============ Ambient background ============ */
.aura-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 25% 20%, rgba(124,58,237,0.55), transparent 70%),
    radial-gradient(55% 40% at 80% 85%, rgba(34,211,238,0.35), transparent 70%),
    radial-gradient(40% 30% at 60% 50%, rgba(96,165,250,0.22), transparent 70%),
    linear-gradient(180deg, #0B0F1A 0%, #050810 100%);
  animation: auraAmbientDrift 45s ease-in-out infinite;
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%;
  will-change: background-position;
}
.aura-bg--blue { background:
    radial-gradient(60% 45% at 30% 15%, rgba(96,165,250,0.55), transparent 70%),
    radial-gradient(55% 40% at 75% 90%, rgba(34,211,238,0.4), transparent 70%),
    radial-gradient(40% 30% at 55% 55%, rgba(124,58,237,0.2), transparent 70%),
    linear-gradient(180deg, #0B0F1A 0%, #050810 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
.aura-bg--green { background:
    radial-gradient(60% 45% at 25% 20%, rgba(52,211,153,0.45), transparent 70%),
    radial-gradient(55% 40% at 80% 85%, rgba(34,211,238,0.35), transparent 70%),
    radial-gradient(40% 30% at 60% 50%, rgba(124,58,237,0.18), transparent 70%),
    linear-gradient(180deg, #0B0F1A 0%, #050810 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
.aura-bg--deep { background:
    radial-gradient(70% 50% at 50% 100%, rgba(124,58,237,0.35), transparent 70%),
    radial-gradient(50% 40% at 15% 10%, rgba(34,211,238,0.2), transparent 70%),
    radial-gradient(40% 30% at 85% 30%, rgba(96,165,250,0.15), transparent 70%),
    linear-gradient(180deg, #0B0F1A 0%, #050810 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }

.aura-stars {
  position: fixed; inset: 0; z-index: 0; opacity: 0.35; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.6) 0.6px, transparent 1px),
    radial-gradient(circle at 78% 44%, rgba(255,255,255,0.5) 0.5px, transparent 1px),
    radial-gradient(circle at 34% 78%, rgba(255,255,255,0.45) 0.6px, transparent 1px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.35) 0.4px, transparent 1px),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,0.3) 0.4px, transparent 1px),
    radial-gradient(circle at 65% 30%, rgba(255,255,255,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 8% 55%, rgba(255,255,255,0.3) 0.4px, transparent 1px);
}

/* ============ Keyframes (from design AURA_KEYFRAMES) ============ */
@keyframes auraBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes auraBreatheSlow { 0%,100% { transform: scale(0.98); } 50% { transform: scale(1.08); } }
@keyframes auraShimmer { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes auraFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes auraPulseRing { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes auraOrbBlobA {
  0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: rotate(0deg); }
  50% { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: rotate(180deg); }
}
@keyframes auraOrbBlobB {
  0%,100% { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; transform: rotate(360deg); }
  50% { border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; transform: rotate(0deg); }
}
@keyframes auraAmbientDrift {
  0%,100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  50% { background-position: 12% 8%, 88% 92%, 42% 58%, 0 0; }
}
@keyframes auraPulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes auraSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes auraFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes auraShimmerSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ============ Boot loader ============ */
.boot-loader { display: flex; align-items: center; justify-content: center; min-height: var(--vh-fixed); }
.boot-orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, #7C3AED 30%, #22D3EE 65%, #1a0f3a 100%);
  animation: auraBreatheSlow 3s ease-in-out infinite;
  box-shadow: 0 0 80px rgba(124,58,237,0.6);
}

/* ============ Orb ============ */
.orb-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-breathe) var(--ease);
}
/* Orb colour is interpolated frame-by-frame in JS (setOrbPhase) on a single
   eased timeline. A CSS `transition: background` here would restart a 400ms
   transition on every one of those per-frame writes, so the two curves fought
   each other and the result read as a stutter/snap. The JS timeline is the
   only colour animation now — these layers declare no colour transition. */
.orb-aura { position: absolute; filter: blur(20px); pointer-events: none; will-change: transform; }
.orb-halo { position: absolute; inset: -20px; border-radius: 50%; opacity: 0.65; filter: blur(8px); will-change: transform; }
.orb-blob-a {
  position: absolute; width: 92%; height: 92%;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: auraOrbBlobA 8s ease-in-out infinite;
  will-change: transform;
}
.orb-blob-b {
  position: absolute; width: 80%; height: 80%;
  border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
  animation: auraOrbBlobB 10s ease-in-out infinite;
  mix-blend-mode: screen; opacity: 0.9;
  will-change: transform;
}
.orb-specular {
  position: absolute; width: 38%; height: 30%; top: 14%; left: 22%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.15) 40%, transparent 70%);
  border-radius: 50%; filter: blur(6px); opacity: 0.9;
}
.orb-spark { position: absolute; width: 10px; height: 10px; top: 26%; left: 30%; background: #fff; border-radius: 50%; filter: blur(2px); opacity: 0.9; }
.orb-innerring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 0 40px rgba(255,255,255,0.08); pointer-events: none; }

/* ============ Glass surfaces ============ */
.glass {
  position: relative;
  background: var(--glass-light);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 40px rgba(0,0,0,0.35);
}
.glass--heavy {
  background: rgba(20,20,30,0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-color: rgba(255,255,255,0.14);
}

/* ============ Buttons ============ */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px; border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  box-shadow: 0 10px 40px rgba(124,58,237,0.45), 0 0 40px var(--glow-cyan);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), opacity var(--dur-med);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 48px rgba(124,58,237,0.55), 0 0 60px rgba(34,211,238,0.25); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; pointer-events: none; }

.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 24px; border-radius: 9999px;
  background: var(--glass-light); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); color: var(--text-secondary);
  font-size: 15px; font-weight: 500;
  /* Explicit property list, never `all`: `all` makes every declared property
     animatable, so any state change that also touched width/padding/font-size
     would animate LAYOUT and force a reflow per frame. Only compositable and
     paint-only properties are listed here. */
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.btn-ghost:hover { background: var(--glass-medium); color: #fff; }
.btn-ghost:active { transform: scale(0.97); }

.btn-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-light); border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-icon:hover { background: var(--glass-medium); }
.btn-icon:active { transform: scale(0.94); }

/* Global "Skip & breathe" escape — low-emphasis, but a real 44px tap target. */
.skip-breathe {
  display: block; width: 100%; min-height: 44px; margin-top: var(--s2);
  background: none; border: none; border-radius: 14px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.2px;
  color: var(--text-tertiary); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.skip-breathe:hover { color: var(--text-secondary); background: var(--glass-light); }
.skip-breathe:focus-visible { outline: 2px solid var(--brand-end); outline-offset: 2px; }

/* FAB */
.fab {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(124,58,237,0.55), 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.fab:hover { box-shadow: 0 0 90px rgba(124,58,237,0.75), 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
.fab:active { transform: scale(0.94); }

.allowance-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  margin: 0 0 var(--s5);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(167,139,250,0.10), rgba(255,255,255,0.035));
  border: 1px solid rgba(196,181,253,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#home-screen .allowance-notice { margin: var(--s1) 20px var(--s3); }
.allowance-notice-icon { flex-shrink: 0; color: var(--text-secondary); padding-top: 2px; }
.allowance-notice-message { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.allowance-notice-detail { margin-top: 4px; font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }

/* ============ Chips / pills ============ */
.chip {
  padding: 10px 18px; border-radius: 9999px;
  background: var(--glass-light); border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.chip:hover { background: var(--glass-medium); }
.chip.selected {
  background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(34,211,238,0.25));
  border-color: rgba(167,139,250,0.55); color: #fff;
  box-shadow: 0 0 24px rgba(124,58,237,0.35), inset 0 0 0 1px rgba(167,139,250,0.3);
}

/* ============ Toggle ============ */
.toggle {
  position: relative; width: 48px; height: 28px; border-radius: 9999px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12);
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
  flex-shrink: 0;
}
/* Knob travel is a TRANSFORM, not `left`. Animating `left` on an absolutely
   positioned box dirties layout every frame; translateX composites on the GPU.
   The knob rests at left:2px and travelled to left:22px, so the transform
   distance is exactly 20px and the on/off positions are pixel-identical. The
   two independent effects (travel + press) are composed through custom
   properties so :active never cancels the travel. */
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  --knob-x: 0px; --knob-s: 1;
  transform: translateX(var(--knob-x)) scale(var(--knob-s));
  background: #fff; transition: transform var(--dur-med) var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.toggle.on { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); border-color: transparent; box-shadow: 0 0 16px rgba(124,58,237,0.45); }
.toggle.on::after { --knob-x: 20px; }
.toggle:active::after { --knob-s: 0.94; }

/* ============ Sliders ============ */
input[type="range"].aura-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--exhale), var(--inhale), var(--hold));
  outline: none;
}
input[type="range"].aura-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(96,165,250,0.55);
}
input[type="range"].aura-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(96,165,250,0.55), 0 0 16px rgba(96,165,250,0.8), 0 2px 6px rgba(0,0,0,0.4);
}
input[type="range"].aura-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(96,165,250,0.55);
}
input[type="range"].aura-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 16px rgba(96,165,250,0.8), 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab; transition: transform var(--dur-fast) var(--ease);
}
input[type="range"].aura-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }

/* ============ Typography helpers ============ */
.overline { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-tertiary); }
.grad-text { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text--blue { background: linear-gradient(135deg, #60A5FA, #22D3EE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text--violet { background: linear-gradient(135deg, #A78BFA, #22D3EE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tabular { font-variant-numeric: tabular-nums; }

/* ============ Screen container (mobile-first, centers on desktop) ============ */
@keyframes auraScreenIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes auraScreenOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.99); }
}
.screen {
  position: relative; z-index: 1;
  /* Identical bounding box on EVERY screen: same max-width, same centring,
     same height basis. Nothing here is content-derived, so no page can
     compute a different container size from another. */
  width: 100%;
  max-width: 480px; margin: 0 auto;
  min-height: var(--vh-fixed);
  display: flex; flex-direction: column;
  animation: auraScreenIn var(--dur-slow) var(--ease) both;
}
/* Smart-switch exit: the router keeps the leaving node in the DOM just long
   enough for this to play before the next screen mounts. */
.screen--leaving { animation: auraScreenOut 200ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .screen, .screen--leaving { animation: auraFadeIn 1ms linear both; }
}
.screen--wide { max-width: 1100px; }

/* ============ Mobile fit: zero scroll, constant orb ============
   The orb must read the SAME size on every screen AND never overflow a small
   phone. We pin it to a viewport-relative constant (so it is identical across
   screens) that scales down only on narrow/short viewports. Internal blobs are
   percentage/inset based, so they follow the wrap. */
.screen .orb-wrap {
  width: min(58vw, 220px) !important;
  height: min(58vw, 220px) !important;
  flex-shrink: 0;
}

/* Compact every full-screen surface on small phones so nothing scrolls.
   Targets short (landscape-ish / small) and narrow devices. */
@media (max-height: 740px), (max-width: 400px) {
  .screen { padding: 16px !important; }
  .screen[style*="padding"] { padding: 16px !important; }
  .screen h1 { font-size: clamp(22px, 7vw, 28px) !important; line-height: 1.18 !important; }
  .screen p, .screen .overline { font-size: 13px !important; }
  .screen .btn-primary { padding: 13px 18px !important; font-size: 15px !important; }
  /* Shrink the orb a touch more on the smallest screens, but keep it constant. */
  .screen .orb-wrap { width: min(54vw, 180px) !important; height: min(54vw, 180px) !important; }
  /* Let flex children compress instead of forcing a scrollbar. */
  .screen > div[style*="flex:1"], .screen > div[style*="flex: 1"] { min-height: 0; }
  /* Reduce blur stacking cost on the smallest screens (perf). */
  .orb-aura { filter: blur(14px); }
  .orb-halo { filter: blur(6px); }
}

/* ============ Auth / form ============ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; letter-spacing: 0.5px; }
.field input {
  width: 100%; padding: 15px 18px; border-radius: 16px;
  background: var(--glass-light); border: 1px solid var(--glass-border);
  /* 16px is a hard floor: iOS Safari zooms the viewport when a focused field
     is smaller, and it never zooms back out. This is not a taste decision. */
  color: #fff; font-size: 16px; outline: none;
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.field input:focus { border-color: rgba(34,211,238,0.5); box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.field input::placeholder { color: var(--text-disabled); }

.form-error {
  padding: 12px 16px; border-radius: 14px; font-size: 13px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: #FCD34D;
  margin-bottom: 16px; animation: auraSlideUp var(--dur-med) var(--ease);
}

/* ============ Progress ring ============ */
/* Centred on both axes inside its positioned parent. `inset:0` gives the
   absolutely-positioned SVG a containing rectangle to be centred in, and
   `margin:auto` splits the leftover space evenly on each axis (the SVG has an
   intrinsic width/height, so auto margins resolve symmetrically). This is
   offset-free, so it stays centred at any parent size — and because only
   stroke-dashoffset animates, the geometry never moves during the countdown. */
.progress-ring {
  position: absolute; inset: 0; margin: auto;
  pointer-events: none;
}
.progress-ring circle { transition: stroke-dashoffset 1s linear; }

/* ============ Modal / bottom sheet ============ */
.modal-veil {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,8,15,0.55); backdrop-filter: blur(12px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: auraFadeIn var(--dur-med) var(--ease);
}
.modal-veil--center { align-items: center; padding: 24px; }
.sheet {
  width: 100%; max-width: 480px;
  background: rgba(20,20,30,0.72); backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14); border-bottom: none;
  border-radius: 32px 32px 0 0; padding: 12px 24px 40px;
  animation: auraSlideUp var(--dur-med) var(--ease);
}
.sheet--center { border-radius: 28px; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 32px 28px; }
.sheet-grabber { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); margin: 0 auto 20px; }

/* ============ Pricing page ============ */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 28px; border-radius: 24px;
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.price-card:hover { transform: translateY(-6px); }
.price-card--popular {
  border-color: rgba(167,139,250,0.55) !important;
  box-shadow: 0 0 60px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 40px rgba(0,0,0,0.35);
}
.popular-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,0.5); white-space: nowrap;
}
.feat-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-secondary); padding: 7px 0; }

.billing-toggle {
  display: inline-flex; padding: 4px; border-radius: 9999px;
  background: var(--glass-light); border: 1px solid var(--glass-border); gap: 4px;
}
.billing-toggle button { padding: 9px 22px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--text-tertiary);
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease); }
.billing-toggle button.active { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color: #fff; box-shadow: 0 4px 16px rgba(124,58,237,0.4); }

/* ============ FAQ ============ */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; padding: 20px 4px; font-size: 15px; font-weight: 500; color: #fff; }
.faq-a { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; padding: 0 4px 20px; display: none; }
.faq-item.open .faq-a { display: block; animation: auraFadeIn var(--dur-med); }
.faq-item .faq-chev { transition: transform var(--dur-med) var(--ease); }
.faq-item.open .faq-chev { transform: rotate(180deg); }

/* ============ Admin (Super Command Centre) — see SCC section below ============ */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
.badge--admin { background: rgba(124,58,237,0.25); color: #C4B5FD; border: 1px solid rgba(124,58,237,0.4); }
.badge--user { background: rgba(255,255,255,0.08); color: var(--text-tertiary); }
.badge--active { background: rgba(52,211,153,0.15); color: #6EE7B7; }
.badge--suspended { background: rgba(245,158,11,0.15); color: #FCD34D; }
.badge--pro { background: rgba(96,165,250,0.18); color: #93C5FD; }
.badge--premium { background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(34,211,238,0.2)); color: #A5F3FC; }
.badge--free { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 13px 22px; border-radius: 9999px;
  background: rgba(20,20,30,0.85); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.15); font-size: 14px; color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); animation: auraSlideUp var(--dur-med) var(--ease);
  max-width: 90vw; text-align: center;
}

/* ============ Misc ============ */
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; animation: auraPulseDot 1.6s ease-in-out infinite; }
.shimmer-track { position: relative; width: 200px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.shimmer-track::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(167,139,250,0.9), transparent); animation: auraShimmerSlide 1.6s ease-in-out infinite; }
.hidden { display: none !important; }
/* ---------- Invisible scrollbars (scroll fully preserved) ----------
   The scrollbar is hidden EVERYWHERE, on every scrollable element, so it can
   never occupy layout width and therefore can never cause a width shift when
   it appears or disappears between screens. Scrolling itself is untouched:
   no `overflow: hidden`, no `touch-action` change, no height clamp — only the
   scrollbar's own rendering is suppressed.

   Three engines, three mechanisms, all required for full coverage:
     - WebKit/Blink (Safari, Chrome, Edge): zero-size ::-webkit-scrollbar
     - Firefox: scrollbar-width: none
     - legacy Edge/IE: -ms-overflow-style: none                              */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* The pseudo-elements are zeroed too — some WebKit builds still reserve the
   track's own box even when the scrollbar box itself is zero-width. */
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner { background: transparent; width: 0; height: 0; }

/* ================================================================
   PREMIUM INTERACTION LAYER — motion, viewport-fit, slider, modal
   (behavior refinements only; visual design tokens unchanged)
   ================================================================ */

/* ---------- Global motion primitives ---------- */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
/* Modal scroll-lock. `html` is the page scroll container, so the lock must be
   applied there for it to take effect. Because the scrollbar is zero-width in
   every state, switching to `hidden` reclaims no space and therefore causes no
   width shift when a modal opens or closes (the classic modal jump). */
html.modal-open { overflow: hidden; }
html:has(body.modal-open) { overflow: hidden; }
body.modal-open { overflow: hidden; touch-action: none; }

/* ---- Hit-area floor -----------------------------------------------------
   Several controls are drawn deliberately small: a 28px-tall switch, an 11px
   glow dot, a 30px chip, a 6px slider track. The drawing is fine; the touch
   target was not. This overlay centres a --tap-min box on the control without
   changing a single visible pixel.

   Only applied where targets cannot collide. The glow dots sit 6px apart, so
   a 44px overlay on each would make neighbours fight for the same touch -
   those are widened in the markup instead. */
.toggle, .chip { position: relative; }
.toggle::before, .chip::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: var(--tap-min);
}

/* The range track is 6px of paint. Give the INPUT the full target height and
   draw the track inside it, so the whole band is draggable rather than a
   6px ribbon. */
input[type="range"].aura-slider {
  height: var(--tap-min);
  background: transparent;
}
input[type="range"].aura-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--exhale), var(--inhale), var(--hold));
}
input[type="range"].aura-slider::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--exhale), var(--inhale), var(--hold));
}
/* Re-centre the thumb now that the track sits inside a taller box. */
input[type="range"].aura-slider::-webkit-slider-thumb { margin-top: -8px; }

/* Suppress double-tap-to-zoom on things meant to be tapped once, which also
   removes the 300ms click delay Safari holds open waiting for a second tap.
   Deliberately scoped to controls: the page itself stays pinch-zoomable, so
   nobody who needs to magnify text loses the ability to. */
button, a, [role="button"], label, .glass, .mood-card, .pill, .btn-icon,
input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }

/* Screen enter/leave crossfade: fade + 12px vertical rise */
@keyframes auraScreenIn {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auraScreenOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.995); }
}
.screen {
  animation: auraScreenIn 420ms var(--ease-out) both;
  will-change: opacity, transform;
  padding-top: var(--safe-top);
}
.screen--leaving { animation: auraScreenOut 240ms var(--ease) both; pointer-events: none; }

/* ---------- Viewport-perfect layout ----------
   Every screen resolves to the SAME fixed height reference (--vh-fixed) and
   the SAME width box. Fixed-height screens simply cannot overflow; scrolling
   screens grow downward from the identical minimum. Because the two variants
   now share one height basis and one width, navigating between them cannot
   change the container's bounding box. */
.screen {
  height: var(--vh-fixed);
  min-height: 0;
  overflow: hidden;
}
/* screens that legitimately need scroll (lists, admin, pricing) opt out of the
   height clamp only — width, centring and the minimum height are unchanged. */
.screen--scroll {
  height: auto; min-height: var(--vh-fixed);
  overflow: visible;
}
.screen--wide { height: auto; min-height: var(--vh-fixed); overflow: visible; }

button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-end); outline-offset: 4px;
}

/* CTA anchored to bottom safe area */
.cta-anchor { padding-bottom: calc(24px + var(--safe-bottom)); margin-top: auto; }

/* Adaptive density: compress spacing/typography instead of scrolling */
@media (max-height: 740px) {
  .screen h1 { font-size: 90%; }
  .compress-gap { margin-bottom: 18px !important; }
}
@media (max-height: 640px) {
  /* iPhone SE class devices */
  .screen h1 { font-size: 82%; }
  .compress-gap { margin-bottom: 12px !important; }
  .orb-scale { transform: scale(0.82); }
}
/* Orb scales with viewport height, never clipped */
.orb-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  contain: layout;
}
.orb-stage > * { max-height: 100%; }

/* ---------- Micro-interactions (GPU transforms only) ---------- */
.btn-primary, .btn-ghost, .btn-icon, .chip, .fab, .goal-card, .mood-card {
  will-change: transform;
  transition-property: transform, box-shadow, background, color, border-color, opacity;
  transition-duration: var(--dur-med);
  transition-timing-function: var(--ease-out);
}
.btn-primary:active { transform: scale(0.98); box-shadow: 0 8px 32px rgba(124,58,237,0.65), 0 0 70px rgba(34,211,238,0.3); transition-duration: 120ms; }
.btn-ghost:active, .btn-icon:active, .chip:active { transform: scale(0.98); transition-duration: 120ms; }
.glass { transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
button.glass:active, a.glass:active { transform: scale(0.985); box-shadow: 0 6px 28px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08); transition-duration: 120ms; }

/* Toggle: springier knob travel (single transform timeline) */
.toggle::after { transition: transform 320ms var(--ease-out); }
.toggle { transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out); }

/* ---------- Slider engine (custom, GPU-driven) ---------- */
input[type="range"].aura-slider {
  touch-action: none;             /* we own the gesture */
  cursor: grab;
  transition: filter 240ms var(--ease-out);
}
input[type="range"].aura-slider.dragging { cursor: grabbing; filter: drop-shadow(0 0 10px rgba(96,165,250,0.55)) brightness(1.08); }
input[type="range"].aura-slider::-webkit-slider-thumb { transition: transform 180ms var(--ease-out), box-shadow 240ms var(--ease-out); will-change: transform; }
input[type="range"].aura-slider.dragging::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 26px rgba(96,165,250,1), 0 2px 8px rgba(0,0,0,0.45); }
input[type="range"].aura-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 0 16px rgba(96,165,250,0.8), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 180ms var(--ease-out);
}
input[type="range"].aura-slider.dragging::-moz-range-thumb { transform: scale(1.25); }
/* value readouts crossfade instead of flicker */
.slider-val { display: inline-block; transition: opacity 140ms var(--ease), transform 140ms var(--ease); will-change: opacity; }
.slider-val.bump { animation: auraValBump 220ms var(--ease-out); }
@keyframes auraValBump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- Modal / sheet system ---------- */
.modal-veil {
  animation: auraVeilIn 300ms var(--ease-out) both;
  overscroll-behavior: contain;
}
@keyframes auraVeilIn { from { opacity: 0; } to { opacity: 1; } }
.modal-veil--closing { animation: auraVeilOut 260ms var(--ease) both; pointer-events: none; }
@keyframes auraVeilOut { from { opacity: 1; } to { opacity: 0; } }

.sheet {
  /* Sheet height is derived from the same stable reference, so an open sheet
     cannot resize when the mobile URL bar collapses behind it. */
  max-height: calc(var(--vh-fixed) * 0.9);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(40px + var(--safe-bottom));
  animation: auraSheetIn 340ms var(--ease-out) both;
  will-change: transform, opacity;
}
@keyframes auraSheetIn {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-veil--closing .sheet { animation: auraSheetOut 260ms var(--ease) both; }
@keyframes auraSheetOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(22px) scale(0.98); }
}
.sheet--center { animation: auraCenterIn 300ms var(--ease-out) both; }
@keyframes auraCenterIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-veil--closing .sheet--center { animation: auraCenterOut 240ms var(--ease) both; }
@keyframes auraCenterOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}
/* hide scrollbars inside sheets but keep scrollability */
.sheet::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- Orb-as-loader (never a static spinner) ---------- */
.orb-loading { animation: auraOrbLoading 2.4s var(--ease) infinite; will-change: transform, opacity; }
@keyframes auraOrbLoading {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* stat cards on completion stagger in */
.stagger-in > * { animation: auraScreenIn 480ms var(--ease-out) both; }
.stagger-in > *:nth-child(1) { animation-delay: 60ms; }
.stagger-in > *:nth-child(2) { animation-delay: 140ms; }
.stagger-in > *:nth-child(3) { animation-delay: 220ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .sheet, .sheet--center, .modal-veil, .stagger-in > * { animation-duration: 1ms !important; }
  * { transition-duration: 1ms !important; }
}

/* ==================================================================
   THEME SYSTEM — LIGHT MODE ("luminous environment")
   Light-physics variant per design handoff: frosted white glass,
   morning-sky gradients, soft ink text. Dark stays the default.
   ================================================================== */
:root {
  --hairline: rgba(255,255,255,0.08);
  --hairline-soft: rgba(255,255,255,0.05);
  --ink-50: rgba(255,255,255,0.5);
  --ink-55: rgba(255,255,255,0.55);
  --ink-60: rgba(255,255,255,0.6);
  --sheet-bg: rgba(20,20,30,0.72);
  --veil-bg: rgba(6,8,15,0.55);
  --toast-bg: rgba(20,20,30,0.85);
  --dot-dim: rgba(255,255,255,0.2);
  --bar-empty: rgba(255,255,255,0.08);
  --bg-vis: 1;
}
html[data-theme="light"] {
  --bg-primary: #F4F6FB;
  --bg-secondary: #EEF1F8;
  --bg-elevated: #FFFFFF;
  --glass-light: rgba(255,255,255,0.55);
  --glass-medium: rgba(255,255,255,0.65);
  --glass-heavy: rgba(255,255,255,0.80);
  --glass-border: rgba(255,255,255,0.90);
  --glass-border-strong: rgba(255,255,255,0.95);
  --text-primary: #1E2436;
  --text-secondary: rgba(30,36,54,0.62);
  --text-tertiary: rgba(30,36,54,0.60);
  --text-disabled: rgba(30,36,54,0.22);
  --glow-purple: rgba(124,58,237,0.30);
  --glow-cyan: rgba(34,211,238,0.28);
  --glow-blue: rgba(96,165,250,0.30);
  --glow-green: rgba(52,211,153,0.28);
  --hairline: rgba(15,23,42,0.08);
  --hairline-soft: rgba(15,23,42,0.06);
  --ink-50: rgba(30,36,54,0.50);
  --ink-55: rgba(30,36,54,0.55);
  --ink-60: rgba(30,36,54,0.60);
  --sheet-bg: rgba(252,253,255,0.86);
  --veil-bg: rgba(226,232,245,0.45);
  --toast-bg: rgba(255,255,255,0.92);
  --dot-dim: rgba(30,36,54,0.22);
  --bar-empty: rgba(30,36,54,0.10);
}

/* Luminous ambient skies (per light_tokens handoff) */
html[data-theme="light"] .aura-bg { background:
    radial-gradient(70% 55% at 20% 15%, rgba(196,208,255,0.60), transparent 65%),
    radial-gradient(65% 50% at 85% 90%, rgba(232,217,255,0.55), transparent 70%),
    radial-gradient(45% 35% at 60% 45%, rgba(180,222,255,0.35), transparent 70%),
    linear-gradient(180deg, #F5F8FE 0%, #EFF3FB 55%, #F6F1FA 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
html[data-theme="light"] .aura-bg--blue { background:
    radial-gradient(70% 55% at 25% 20%, rgba(180,216,255,0.70), transparent 65%),
    radial-gradient(65% 50% at 80% 90%, rgba(210,232,255,0.55), transparent 70%),
    radial-gradient(45% 35% at 55% 55%, rgba(214,201,255,0.30), transparent 70%),
    linear-gradient(180deg, #F1F6FE 0%, #E8F0FB 60%, #F0EEFB 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
html[data-theme="light"] .aura-bg--green { background:
    radial-gradient(70% 55% at 25% 20%, rgba(196,240,222,0.60), transparent 65%),
    radial-gradient(65% 50% at 80% 88%, rgba(210,232,255,0.55), transparent 70%),
    radial-gradient(45% 35% at 55% 55%, rgba(226,213,255,0.30), transparent 70%),
    linear-gradient(180deg, #F0FAF4 0%, #ECF3F6 55%, #F5F2FA 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
html[data-theme="light"] .aura-bg--deep { background:
    radial-gradient(70% 55% at 20% 10%, rgba(214,201,255,0.55), transparent 65%),
    radial-gradient(65% 50% at 85% 90%, rgba(180,216,255,0.55), transparent 70%),
    radial-gradient(45% 35% at 60% 55%, rgba(255,224,214,0.20), transparent 70%),
    linear-gradient(180deg, #F5F1FA 0%, #EBEEF7 60%, #F3F0F8 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
html[data-theme="light"] .aura-bg--violet { background:
    radial-gradient(70% 55% at 30% 20%, rgba(226,213,255,0.65), transparent 65%),
    radial-gradient(65% 50% at 78% 88%, rgba(206,190,255,0.50), transparent 70%),
    radial-gradient(45% 35% at 55% 55%, rgba(186,214,255,0.30), transparent 70%),
    linear-gradient(180deg, #F5F1FE 0%, #EEEAFC 55%, #F3F6FE 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }
html[data-theme="light"] .aura-stars { opacity: 0.12; }

/* Missing violet variant in dark (profile screen fell back to default) */
.aura-bg--violet { background:
    radial-gradient(60% 45% at 30% 18%, rgba(167,139,250,0.5), transparent 70%),
    radial-gradient(55% 40% at 78% 88%, rgba(124,58,237,0.35), transparent 70%),
    radial-gradient(40% 30% at 55% 55%, rgba(96,165,250,0.18), transparent 70%),
    linear-gradient(180deg, #0B0F1A 0%, #050810 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; }

/* Frosted white glass — elevation by brightness, not darkness */
html[data-theme="light"] .glass {
  background: rgba(255,255,255,0.62);
  border-color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(15,23,42,0.04),
    0 10px 30px rgba(148,163,220,0.18), 0 1px 3px rgba(15,23,42,0.04);
}
html[data-theme="light"] .glass--heavy {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.95);
}
html[data-theme="light"] button.glass:active, html[data-theme="light"] a.glass:active {
  box-shadow: 0 4px 16px rgba(148,163,220,0.22), inset 0 0 0 1px rgba(15,23,42,0.05);
}
html[data-theme="light"] .btn-ghost { border-color: rgba(15,23,42,0.12); color: var(--text-secondary); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(255,255,255,0.7); color: var(--text-primary); }
html[data-theme="light"] .btn-icon { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.9); box-shadow: 0 2px 10px rgba(148,163,220,0.18); }
html[data-theme="light"] .btn-icon:hover { background: rgba(255,255,255,0.85); }
html[data-theme="light"] .chip { background: rgba(255,255,255,0.55); border-color: rgba(15,23,42,0.08); color: var(--text-secondary); }
html[data-theme="light"] .chip:hover { background: rgba(255,255,255,0.8); }
html[data-theme="light"] .toggle { background: rgba(15,23,42,0.12); border-color: rgba(15,23,42,0.08); }
html[data-theme="light"] .toggle::after { background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,0.25); }
html[data-theme="light"] .field input {
  background: rgba(255,255,255,0.7); border-color: rgba(15,23,42,0.1); color: var(--text-primary);
}
html[data-theme="light"] .field input::placeholder { color: var(--text-disabled); }
html[data-theme="light"] .modal-veil { background: var(--veil-bg); }
html[data-theme="light"] .sheet {
  background: var(--sheet-bg); border-color: rgba(255,255,255,0.95);
  box-shadow: 0 -12px 60px rgba(148,163,220,0.35);
}
html[data-theme="light"] .sheet--center { box-shadow: 0 24px 80px rgba(148,163,220,0.4); }
html[data-theme="light"] .sheet-grabber { background: rgba(15,23,42,0.18); }
html[data-theme="light"] .toast {
  background: var(--toast-bg); border-color: rgba(15,23,42,0.08);
  color: var(--text-primary); box-shadow: 0 10px 40px rgba(148,163,220,0.4);
}
html[data-theme="light"] .badge--user { background: rgba(15,23,42,0.06); }
html[data-theme="light"] .badge--free { background: rgba(15,23,42,0.05); }
html[data-theme="light"] .faq-item { border-color: rgba(15,23,42,0.08); }
html[data-theme="light"] .shimmer-track { background: rgba(15,23,42,0.08); }
html[data-theme="light"] .progress-ring circle:first-child { stroke: rgba(15,23,42,0.08); }

/* Light orb refinements: airy translucent mist (colors set inline by JS) */
html[data-theme="light"] .orb-blob-b { mix-blend-mode: multiply; opacity: 0.45; }
html[data-theme="light"] .orb-innerring { border-color: rgba(255,255,255,0.6); box-shadow: inset 0 0 40px rgba(255,255,255,0.5); }
html[data-theme="light"] .orb-specular { opacity: 1; }

/* Theme intensity: ambient background visibility (settings slider) */
.aura-bg { opacity: var(--bg-vis); }

/* Glow intensity preference */
html[data-glow="low"] .orb-aura { opacity: 0.45; }
html[data-glow="high"] .orb-aura { opacity: 1; filter: blur(26px); }

/* Theme switch crossfade (~250ms total) */
#app { transition: opacity 120ms ease; }
html.theme-switching #app { opacity: 0; }

/* ============ Library filtering ============ */
/* The Library renders every journey card once and keeps its node identity for
   the life of the screen; switching filters toggles this class instead of
   rebuilding the list. In the surrounding block layout display:none is
   indistinguishable from the node not being emitted at all, so the rendered
   result matches the previous rebuild exactly. */
.lib-off { display: none !important; }

/* ============ Orb color interpolation ============ */
/* Gradients cannot interpolate in CSS, so setOrbPhase() runs ONE eased
   requestAnimationFrame timeline per orb that numerically mixes the previous
   palette into the next one and rewrites each layer's gradient per frame.
   No overlay layer is involved, so there is no base/overlay handoff frame and
   no double-composite through .orb-blob-b's mix-blend-mode: screen.
   .orb-fade is retained (inert, fully transparent) purely so any orb markup
   cached by a previously loaded client keeps painting identically. */
.orb-fade {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; pointer-events: none;
}

/* ============ Swipe-back gesture ============ */
.screen--swiping { animation: none !important; transition: none !important; will-change: transform, opacity; }
.screen--swipe-cancel { transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out) !important; }
.screen--swipe-commit { transition: transform 200ms ease-out, opacity 200ms ease-out !important; pointer-events: none; }

/* Wordmark gradient — light-safe */
.wordmark-grad { background: linear-gradient(135deg, #fff, #22D3EE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .wordmark-grad { background: linear-gradient(135deg, #7C3AED, #0891B2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ================================================================
   SUPER COMMAND CENTRE — admin console (per admin_tokens handoff)
   Dark default · light via html[data-theme="light"] · desktop-first
   ================================================================ */
:root {
  --adm-bg: #080B14;
  --adm-bg-elev: #0E1220;
  --adm-panel: rgba(255,255,255,0.025);
  --adm-panel-elev: rgba(255,255,255,0.05);
  --adm-panel-hover: rgba(255,255,255,0.05);
  --adm-border: rgba(255,255,255,0.06);
  --adm-border-strong: rgba(255,255,255,0.12);
  --adm-text: #E5E7EB;
  --adm-text-2: rgba(229,231,235,0.60);
  --adm-text-3: rgba(229,231,235,0.38);
  --adm-accent: #8B5CF6;
  --adm-accent-end: #22D3EE;
  --adm-grid: rgba(255,255,255,0.05);
  --adm-good: #34D399;
  --adm-warn: #F59E0B;
  --adm-bad: #F87171;
  --adm-info: #60A5FA;
  --adm-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  --adm-side-bg: rgba(255,255,255,0.02);
  --adm-top-bg: rgba(255,255,255,0.015);
  --adm-input-bg: rgba(255,255,255,0.03);
  --adm-chip-bg: rgba(255,255,255,0.04);
  --adm-chip-on: rgba(255,255,255,0.10);
  --adm-nav-on-bg: rgba(139,92,246,0.10);
  --adm-nav-on-border: rgba(139,92,246,0.20);
  --adm-nav-on-ic: #A78BFA;
  --adm-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
html[data-theme="light"] {
  --adm-bg: #F6F7FB;
  --adm-bg-elev: #FFFFFF;
  --adm-panel: rgba(255,255,255,0.72);
  --adm-panel-elev: #FFFFFF;
  --adm-panel-hover: rgba(255,255,255,0.9);
  --adm-border: rgba(15,23,42,0.06);
  --adm-border-strong: rgba(15,23,42,0.12);
  --adm-text: #0F172A;
  --adm-text-2: rgba(15,23,42,0.60);
  --adm-text-3: rgba(15,23,42,0.38);
  --adm-accent: #7C3AED;
  --adm-accent-end: #0891B2;
  --adm-grid: rgba(15,23,42,0.06);
  --adm-good: #059669;
  --adm-warn: #D97706;
  --adm-bad: #DC2626;
  --adm-info: #2563EB;
  --adm-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04);
  --adm-side-bg: rgba(255,255,255,0.65);
  --adm-top-bg: rgba(255,255,255,0.6);
  --adm-input-bg: rgba(15,23,42,0.03);
  --adm-chip-bg: rgba(15,23,42,0.04);
  --adm-chip-on: #FFFFFF;
  --adm-nav-on-bg: rgba(124,58,237,0.08);
  --adm-nav-on-border: rgba(124,58,237,0.18);
  --adm-nav-on-ic: #7C3AED;
}

/* ---- Shell + ambient background ---- */
body#aura-admin { background: var(--adm-bg); }
.scc { display: flex; min-height: var(--vh-fixed); position: relative; z-index: 1; color: var(--adm-text); }
.scc-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 12% 8%, rgba(124,58,237,0.18), transparent 70%),
    radial-gradient(45% 35% at 92% 88%, rgba(34,211,238,0.14), transparent 70%),
    radial-gradient(60% 40% at 60% 40%, rgba(96,165,250,0.06), transparent 70%),
    linear-gradient(180deg, #05070E 0%, #080B14 60%, #06070D 100%);
}
.scc-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
}
html[data-theme="light"] .scc-bg { background:
    radial-gradient(60% 40% at 15% 10%, rgba(124,58,237,0.10), transparent 70%),
    radial-gradient(55% 40% at 90% 90%, rgba(34,211,238,0.08), transparent 70%),
    linear-gradient(180deg, #F6F7FB 0%, #EEF1F8 100%); }
html[data-theme="light"] .scc-bg::after { background-image:
    linear-gradient(to right, rgba(15,23,42,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.02) 1px, transparent 1px); }

/* ---- Sidebar ---- */
.scc-side { width: 240px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--adm-border); background: var(--adm-side-bg);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  position: sticky; top: 0; height: var(--vh-fixed); z-index: 2; }
.scc-brand { padding: 20px; display: flex; align-items: center; gap: 10px; }
.scc-mark { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6), #22D3EE 25%, #7C3AED 70%, #4C1D95 100%);
  box-shadow: 0 0 12px rgba(124,58,237,0.5), inset -3px -3px 6px rgba(0,0,0,0.4), inset 2px 2px 4px rgba(255,255,255,0.2); }
.scc-brand-name { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; }
.scc-brand-sub { font-size: 10px; color: var(--adm-text-2); letter-spacing: 2px; text-transform: uppercase; }
.scc-ver { margin-left: auto; padding: 2px 6px; border-radius: 4px; background: var(--adm-chip-bg);
  font-size: 9px; color: var(--adm-text-2); font-family: var(--adm-mono); }
.scc-nav { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.scc-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; color: var(--adm-text-2); border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); cursor: pointer; }
.scc-nav-item:hover { background: var(--adm-panel-hover); color: var(--adm-text); }
.scc-nav-item--on { background: var(--adm-nav-on-bg); border-color: var(--adm-nav-on-border);
  box-shadow: inset 0 0 20px rgba(139,92,246,0.08); color: var(--adm-text); font-weight: 500; }
.scc-nav-item--on svg { color: var(--adm-nav-on-ic); }
.scc-nav-live { margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 9px; color: var(--adm-good); font-family: var(--adm-mono); letter-spacing: 1px; }
.scc-side-foot { border-top: 1px solid var(--adm-border); padding: 12px; }
.scc-me { display: flex; align-items: center; gap: 10px; padding: 8px; min-width: 0; }
.scc-me-name { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-me-sub { font-size: 10px; color: var(--adm-text-2); }

/* ---- Topbar ---- */
.scc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.scc-top { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  border-bottom: 1px solid var(--adm-border); background: var(--adm-top-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: sticky; top: 0; z-index: 3; }
.scc-crumbs { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--adm-text-2); margin-bottom: 2px; }
.scc-crumbs .sep { opacity: 0.4; }
.scc-title { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; }
.scc-env { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px;
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.35);
  font-size: 10px; color: var(--adm-good); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.scc-avatar { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), #22D3EE 45%, rgba(0,0,0,0.4));
  box-shadow: 0 0 12px rgba(34,211,238,0.27), inset -2px -2px 4px rgba(0,0,0,0.35), inset 1px 1px 3px rgba(255,255,255,0.2); }

/* ---- Content + cards ---- */
.scc-body { flex: 1; overflow-x: hidden; padding: 24px; }
.scc-card { background: var(--adm-panel); border: 1px solid var(--adm-border); border-radius: 16px;
  box-shadow: var(--adm-shadow); padding: 20px; position: relative;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.scc-card--glow { box-shadow: var(--adm-shadow), 0 0 40px rgba(139,92,246,0.15); }
.scc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.scc-card-title { font-size: 13px; font-weight: 500; color: var(--adm-text); }
.scc-card-sub { font-size: 11px; color: var(--adm-text-2); margin-top: 2px; }

/* ---- Grid helpers ---- */
.scc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.scc-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.scc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.scc-grid-t-d { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.scc-stack { display: flex; flex-direction: column; gap: 16px; }

/* ---- KPI card internals ---- */
.scc-kpi-label { font-size: 11px; color: var(--adm-text-2); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.scc-kpi-val { font-size: 30px; font-weight: 400; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; line-height: 1; }
.scc-kpi-unit { font-size: 13px; color: var(--adm-text-2); }
.scc-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.scc-delta--up { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.30); color: var(--adm-good); }
.scc-delta--down { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.30); color: var(--adm-bad); }
.scc-delta--flat { background: var(--adm-chip-bg); border: 1px solid var(--adm-border); color: var(--adm-text-2); }

/* ---- Atoms ---- */
.scc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; font-family: var(--adm-mono); }
.scc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.scc-dot--pulse { animation: sccPulse 1.6s ease-in-out infinite; }
.scc-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--adm-chip-bg); border: 1px solid var(--adm-border); }
.scc-seg button { padding: 5px 11px; border-radius: 6px; font-size: 11px; font-weight: 500;
  color: var(--adm-text-2); font-family: var(--adm-mono); background: transparent; border: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast); }
.scc-seg button.on { background: var(--adm-chip-on); color: var(--adm-text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
html[data-theme="light"] .scc-seg button.on { box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
.scc-search { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px;
  background: var(--adm-input-bg); border: 1px solid var(--adm-border); }
.scc-search input { flex: 1; background: transparent; border: none; outline: none; font-size: 16px;
  color: var(--adm-text); font-family: inherit; min-width: 0; }
.scc-search input::placeholder { color: var(--adm-text-3); }
.scc-search:focus-within { border-color: rgba(139,92,246,0.5); }
.scc-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer;
  background: var(--adm-chip-bg); border: 1px solid var(--adm-border); color: var(--adm-text-2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.scc-btn:hover:not(:disabled) { background: var(--adm-panel-hover); color: var(--adm-text); transform: translateY(-1px); }
.scc-btn:disabled { opacity: 0.35; cursor: default; }
.scc-btn--violet:hover:not(:disabled) { background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.45); color: #C4B5FD; }
.scc-btn--green:hover:not(:disabled) { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.4); color: var(--adm-good); }
.scc-btn--amber:hover:not(:disabled) { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: var(--adm-warn); }
.scc-btn--danger:hover:not(:disabled) { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.4); color: var(--adm-bad); }
html[data-theme="light"] .scc-btn--violet:hover:not(:disabled) { color: #6D28D9; }

/* ---- Toggle (functional) ---- */
.scc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.scc-toggle input { opacity: 0; width: 0; height: 0; }
.scc-toggle span { position: absolute; inset: 0; border-radius: 9999px;
  background: var(--adm-chip-on); border: 1px solid var(--adm-border-strong);
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast); }
html[data-theme="dark"] .scc-toggle span, body#aura-admin .scc-toggle span { background: rgba(255,255,255,0.08); }
html[data-theme="light"] .scc-toggle span { background: rgba(15,23,42,0.10); }
.scc-toggle span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  /* translateX instead of `left` — same 18px travel, composited not laid out */
  transform: translateX(0); transition: transform 400ms cubic-bezier(0.4,0,0.2,1); }
.scc-toggle input:checked + span { background: linear-gradient(135deg, #7C3AED, #22D3EE);
  border-color: transparent; box-shadow: 0 0 12px rgba(139,92,246,0.4); }
.scc-toggle input:checked + span::after { transform: translateX(18px); }

/* ---- Data table ---- */
.scc-thead { display: grid; padding: 12px 20px; font-size: 10px; color: var(--adm-text-3);
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--adm-border); }
.scc-trow { display: grid; padding: 12px 20px; align-items: center; border-bottom: 1px solid var(--adm-border);
  transition: background var(--dur-fast); font-size: 12px; }
.scc-trow:last-child { border-bottom: none; }
.scc-trow:hover { background: var(--adm-panel-hover); }
.scc-mono { font-family: var(--adm-mono); font-variant-numeric: tabular-nums; }
.scc-cell-2 { color: var(--adm-text-2); }
.scc-cell-3 { color: var(--adm-text-3); }
.scc-user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scc-user-cell .nm { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.scc-user-cell .em { font-size: 10px; color: var(--adm-text-3); font-family: var(--adm-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; font-size: 12px; color: var(--adm-text-2); }
.scc-empty { font-size: 12px; color: var(--adm-text-3); padding: 18px 20px; }
.scc-err { border-color: rgba(245,158,11,0.35) !important; color: var(--adm-warn); font-size: 13px; }

/* ---- Bars / meters ---- */
/* Data-viz bar fills. The fill's width IS the datum, so it cannot become a
   transform without squashing its own gradient (a visual change). Instead each
   fill lives in a fixed-size clipping track marked `contain: layout` — the
   width animation still dirties the fill, but containment stops that from
   propagating to any ancestor, so it can never reflow the page. */
.scc-meter { height: 4px; border-radius: 2px; background: var(--adm-grid); overflow: hidden; position: relative; contain: layout size; }
.scc-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; display: block;
  transition: width 0.8s var(--ease-out); }
.scc-activity-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--adm-border); }
.scc-activity-row:last-child { border-bottom: none; }

/* ---- Loading ---- */
.scc-loading { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; min-height: 50vh; color: var(--adm-text-3); font-size: 13px; }
.scc-loading-orb { width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), #22D3EE 30%, #7C3AED 75%);
  box-shadow: 0 0 24px rgba(124,58,237,0.5); animation: sccBreathe 2.4s ease-in-out infinite; }

/* ---- Motion ---- */
@keyframes sccPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes sccBreathe { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes sccIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.scc-body > * { animation: sccIn 420ms var(--ease-out) both; }
.scc-body > *:nth-child(2) { animation-delay: 50ms; }
.scc-body > *:nth-child(3) { animation-delay: 100ms; }
.scc-body > *:nth-child(4) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) { .scc-body > * { animation-duration: 1ms !important; animation-delay: 0ms !important; } }

/* ---- Responsive (desktop primary, tablet secondary) ---- */
@media (max-width: 1180px) {
  .scc-kpis { grid-template-columns: repeat(2, 1fr); }
  .scc-grid-2-1, .scc-grid-3, .scc-grid-t-d { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .scc-side { width: 64px; }
  .scc-nav-item span, .scc-brand > div, .scc-ver, .scc-nav-live, .scc-me > div { display: none; }
  .scc-nav-item { justify-content: center; padding: 11px 0; }
  .scc-brand { justify-content: center; padding: 20px 0; }
  .scc-me { justify-content: center; }
  .scc-top { gap: 10px; padding: 0 14px; }
  .scc-body { padding: 14px; }
}

/* ---- SCC sub-components (charts, meters, kpi internals, programs) ---- */
.scc-top-right { display: flex; align-items: center; gap: 12px; }
.scc-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.scc-kpi-spark { margin-top: 10px; opacity: 0.9; }
.scc-kpi-spark svg { display: block; width: 100%; }
.scc-chart-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px;
  color: var(--adm-text-3); font-family: var(--adm-mono); letter-spacing: 0.5px; }
.scc-legend { display: flex; gap: 14px; font-size: 11px; color: var(--adm-text-2); align-items: center; }
.scc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.scc-donut-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 14px;
  font-size: 11px; color: var(--adm-text-2); text-transform: capitalize; }
.scc-donut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.scc-donut-legend b { color: var(--adm-text); font-weight: 600; }
.scc-meter { margin-bottom: 14px; }
.scc-meter:last-child { margin-bottom: 0; }
.scc-meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
  font-size: 12px; color: var(--adm-text-2); gap: 10px; }
.scc-meter-top .scc-mono { font-size: 11px; color: var(--adm-text-3); white-space: nowrap; }
.scc-meter-track { height: 6px; border-radius: 9999px; background: var(--adm-chip-bg); overflow: hidden; contain: layout size; }
.scc-meter-fill { height: 100%; border-radius: 9999px; transition: width 700ms cubic-bezier(0.4,0,0.2,1); }
.scc-activity-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--adm-text-2); }
.scc-activity-what strong { color: var(--adm-text); font-weight: 500; }
.scc-activity-what em { color: var(--adm-text-3); font-style: normal; font-size: 11px; }
.scc-activity-when { font-size: 10px; color: var(--adm-text-3); white-space: nowrap; }
.scc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.scc-filter-bar { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--adm-border); }
/* Program cards */
.scc-prog { display: flex; flex-direction: column; gap: 14px; }
.scc-prog-head { display: flex; align-items: center; gap: 12px; }
.scc-prog-orb { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, rgba(34,211,238,0.85), rgba(124,58,237,0.75) 62%, rgba(124,58,237,0.35));
  box-shadow: 0 0 18px rgba(139,92,246,0.35), inset 0 0 12px rgba(255,255,255,0.18); }
.scc-prog-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--adm-border); border-bottom: 1px solid var(--adm-border); }
.scc-prog-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.scc-prog-stats span { font-size: 13px; font-weight: 600; color: var(--adm-text); }
.scc-prog-stats label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--adm-text-3); }
.scc-prog-toggles { display: flex; flex-direction: column; gap: 10px; }
.scc-prog-tg { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 12px; color: var(--adm-text-2); }

/* ============ SCC v2 — full rebuild components (design handoff3) ============ */
/* KPI strip supporting 4 or 5 cards */
.scc-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.scc-kpi--glow { box-shadow: 0 0 34px rgba(139,92,246,0.16), inset 0 0 0 1px rgba(139,92,246,0.14); }

/* Grid variants used by handoff screens */
.scc-grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.scc-grid-121 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.scc-grid-171 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; }
.scc-grid-141 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.scc-grid-151 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.scc-grid-113 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.scc-grid-131 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.scc-grid-11 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scc-grid-1114 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 14px; }
.scc-grid-1610 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }

/* Globe stub */
.scc-globe { position: relative; height: 230px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, rgba(34,211,238,0.06), transparent 70%); }
.scc-globe svg { width: 100%; height: 100%; }
.scc-globe-live { position: absolute; top: 10px; right: 10px; }
.scc-ping { animation: sccPulse 2.2s ease-in-out infinite; transform-origin: center; }

/* Heatmap */
.scc-heat { display: grid; gap: 3px; }
.scc-heat-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; }
.scc-heat-lbl { font-size: 9px; letter-spacing: 0.5px; color: var(--adm-text-3);
  font-family: 'SF Mono', ui-monospace, monospace; }
.scc-heat-cell { aspect-ratio: 1; border-radius: 3px; min-width: 0; transition: transform 0.15s ease; }
.scc-heat-cell:hover { transform: scale(1.25); }
.scc-heat-cell--hot { box-shadow: 0 0 8px rgba(139,92,246,0.55); }
.scc-heat-cols { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; margin-top: 4px; }
.scc-heat-cols span { font-size: 9px; color: var(--adm-text-3); font-family: 'SF Mono', ui-monospace, monospace; }
.scc-heat-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 10px; color: var(--adm-text-3); }
.scc-heat-legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }

/* Cohort grid */
.scc-cohort { display: grid; grid-template-columns: 90px 70px repeat(8, 1fr); gap: 4px; align-items: center; }
.scc-cohort-h { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--adm-text-3);
  text-align: center; padding-bottom: 4px; }
.scc-cohort-w { font-size: 11px; color: var(--adm-text-2); font-family: 'SF Mono', ui-monospace, monospace; }
.scc-cohort-n { font-size: 10px; color: var(--adm-text-3); font-family: 'SF Mono', ui-monospace, monospace; }
.scc-cohort-c { height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; font-family: 'SF Mono', ui-monospace, monospace; }
.scc-cohort-c--hot { box-shadow: 0 0 10px rgba(139,92,246,0.45); }

/* Funnel */
.scc-funnel { display: flex; flex-direction: column; gap: 8px; }
.scc-funnel-row { display: flex; align-items: center; gap: 10px; }
.scc-funnel-lbl { width: 118px; flex-shrink: 0; font-size: 11px; color: var(--adm-text-2); }
.scc-funnel-track { flex: 1; contain: layout; }
.scc-funnel-bar { height: 32px; border-radius: 7px; display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; font-weight: 600; color: #fff; font-family: 'SF Mono', ui-monospace, monospace;
  min-width: 56px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.scc-funnel-conv { width: 52px; flex-shrink: 0; text-align: right; font-size: 11px; font-weight: 600;
  font-family: 'SF Mono', ui-monospace, monospace; }

/* Drop-off bars */
.scc-drop { display: flex; flex-direction: column; gap: 9px; }
.scc-drop-row { display: flex; align-items: center; gap: 10px; font-size: 11px; contain: layout; }
.scc-drop-lbl { width: 64px; flex-shrink: 0; color: var(--adm-text-2); font-family: 'SF Mono', ui-monospace, monospace; }
.scc-drop-bar { height: 14px; border-radius: 4px; background: rgba(139,92,246,0.45); transition: width 0.5s ease; }
.scc-drop-bar--hot { background: linear-gradient(90deg, #F59E0B, #F87171); box-shadow: 0 0 12px rgba(245,158,11,0.4); }
.scc-drop-pct { margin-left: auto; font-family: 'SF Mono', ui-monospace, monospace; color: var(--adm-text-2); }

/* Insight boxes */
.scc-insight { border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.55; margin-top: 12px; }
.scc-insight--amber { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22); color: #FCD34D; }
.scc-insight--green { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.22); color: #6EE7B7; }
html[data-theme="light"] .scc-insight--amber { color: #92600A; }
html[data-theme="light"] .scc-insight--green { color: #065F46; }

/* Sliders (AI tuning) */
.scc-slider-row { padding: 12px 0; border-bottom: 1px solid var(--adm-border); }
.scc-slider-row:last-child { border-bottom: none; }
.scc-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scc-slider-name { font-size: 12.5px; font-weight: 600; color: var(--adm-text); }
.scc-slider-desc { font-size: 10.5px; color: var(--adm-text-3); margin-top: 2px; }
.scc-slider-hint { font-size: 10px; color: var(--adm-text-3); margin-right: 8px; }
.scc-slider-pill { font-size: 11px; font-weight: 700; font-family: 'SF Mono', ui-monospace, monospace;
  padding: 2px 8px; border-radius: 20px; }
.scc-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 4px; background: var(--adm-border); outline: none; cursor: pointer; }
.scc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--sl-c, #8B5CF6);
  box-shadow: 0 0 10px var(--sl-c, #8B5CF6); cursor: grab; }
.scc-slider input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sl-c, #8B5CF6); box-shadow: 0 0 10px var(--sl-c, #8B5CF6); cursor: grab; }

/* Feature flag rows */
.scc-flag-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--adm-border); }
.scc-flag-row:last-child { border-bottom: none; }
.scc-flag-name { font-size: 12.5px; font-weight: 600; color: var(--adm-text); display: flex; align-items: center; gap: 8px; }
.scc-flag-sub { font-size: 10.5px; color: var(--adm-text-3); margin-top: 2px; }

/* AI decision preview */
.scc-kv { border-radius: 10px; background: rgba(148,163,184,0.06); border: 1px solid var(--adm-border);
  padding: 10px 12px; font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; }
.scc-kv div { display: flex; justify-content: space-between; padding: 3px 0; }
.scc-kv span:first-child { color: var(--adm-text-3); }
.scc-ai-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0;
  color: var(--adm-text-3); font-size: 12px; }
.scc-ai-model-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px;
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3); color: var(--adm-text);
  font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; }
.scc-ai-out { border-radius: 12px; padding: 18px; text-align: center;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(34,211,238,0.1));
  border: 1px solid rgba(139,92,246,0.3); box-shadow: 0 0 26px rgba(139,92,246,0.18); }
.scc-ai-pattern { font-size: 38px; font-weight: 700; letter-spacing: 4px; font-family: 'SF Mono', ui-monospace, monospace; }
.scc-ai-sub { font-size: 11px; color: var(--adm-text-3); margin-top: 6px; }

/* Rollout */
.scc-roll-bar { height: 10px; border-radius: 6px; background: var(--adm-border); overflow: hidden; margin: 10px 0 8px; contain: layout size; }
.scc-roll-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8B5CF6, #22D3EE);
  box-shadow: 0 0 12px rgba(139,92,246,0.5); transition: width 0.6s ease; }
.scc-roll-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.scc-roll-box { border-radius: 9px; border: 1px solid var(--adm-border); padding: 10px;
  background: rgba(148,163,184,0.04); }
.scc-roll-box b { font-family: 'SF Mono', ui-monospace, monospace; font-size: 12px; color: var(--adm-text); display: block; }
.scc-roll-box span { font-size: 10px; color: var(--adm-text-3); }

/* Segment rows (biometrics) */
.scc-seg-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
  border: 1px solid var(--adm-border); background: rgba(148,163,184,0.04); margin-bottom: 8px; }
.scc-seg-name { flex: 1; font-size: 11.5px; color: var(--adm-text-2); }
.scc-seg-pat { font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; font-size: 12px;
  padding: 3px 9px; border-radius: 7px; }
.scc-seg-eff { width: 90px; display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  font-family: 'SF Mono', ui-monospace, monospace; color: var(--adm-text-2); }
.scc-seg-eff i { flex: 1; height: 5px; border-radius: 3px; background: var(--adm-border); position: relative; overflow: hidden; display: block; }
.scc-seg-eff i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; display: block; }

/* Featured experiment */
.scc-exp-variants { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-top: 14px; }
.scc-exp-var { border-radius: 12px; border: 1px solid var(--adm-border); padding: 14px;
  background: rgba(148,163,184,0.04); position: relative; }
.scc-exp-var--win { background: rgba(52,211,153,0.07); border-color: rgba(52,211,153,0.35);
  box-shadow: 0 0 22px rgba(52,211,153,0.14); }
.scc-exp-win-tag { position: absolute; top: -9px; right: 10px; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  background: #34D399; color: #052e22; }
.scc-exp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.scc-exp-stats div { font-size: 10px; color: var(--adm-text-3); }
.scc-exp-stats b { display: block; font-size: 15px; font-weight: 700; color: var(--adm-text);
  font-family: 'SF Mono', ui-monospace, monospace; }
.scc-conf-bar { display: inline-flex; align-items: center; gap: 6px; }
.scc-conf-bar i { width: 44px; height: 5px; border-radius: 3px; background: var(--adm-border);
  position: relative; overflow: hidden; display: inline-block; }
.scc-conf-bar i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; display: block; }

/* Rule builder blocks */
.scc-rule { position: relative; border-radius: 12px; border: 1px solid var(--rb-c, rgba(139,92,246,0.35));
  padding: 16px 14px 13px; margin-top: 16px; background: rgba(148,163,184,0.03);
  box-shadow: inset 0 0 18px rgba(139,92,246,0.05); }
.scc-rule-lbl { position: absolute; top: -9px; left: 12px; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 9px; border-radius: 20px;
  background: var(--adm-bg, #0B0F1D); border: 1px solid var(--rb-c, rgba(139,92,246,0.4)); color: var(--rb-t, #C4B5FD); }
.scc-rule-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 3px 0; font-size: 11.5px; }
.scc-pill { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; padding: 3px 9px; border-radius: 7px;
  background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3); color: #C4B5FD; }
html[data-theme="light"] .scc-pill { color: #6D28D9; }
.scc-op { color: var(--adm-text-3); font-size: 11px; }
.scc-val { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; padding: 3px 9px; border-radius: 7px;
  background: rgba(148,163,184,0.1); border: 1px solid var(--adm-border); color: var(--adm-text-2); }
.scc-kw { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--adm-text-3); }

/* iOS notification preview */
.scc-ios { border-radius: 18px; padding: 22px 16px 30px; text-align: center;
  background: linear-gradient(160deg, #1e1b4b 0%, #0f172a 55%, #082f49 100%);
  border: 1px solid rgba(139,92,246,0.25); }
.scc-ios-date { color: rgba(255,255,255,0.75); font-size: 12px; margin-bottom: 16px; }
.scc-ios-card { display: flex; gap: 10px; align-items: flex-start; text-align: left; border-radius: 14px;
  padding: 12px; background: rgba(255,255,255,0.14); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18); }
.scc-ios-orb { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, #22D3EE, #7C3AED 70%); }
.scc-ios-app { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px; }
.scc-ios-title { font-size: 12.5px; font-weight: 700; color: #fff; margin-top: 2px; }
.scc-ios-body { font-size: 11.5px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.scc-ios-meta { margin-top: 12px; font-size: 10.5px; color: var(--adm-text-3); text-align: center; }

/* Status banner (System Health) */
.scc-demo-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 10px 14px; border-radius: 12px; font-size: 12px; line-height: 1.5;
  color: #FBBF24; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.28); }
.scc-demo-strip strong { font-weight: 600; }

.scc-banner { display: flex; align-items: center; gap: 16px; border-radius: 14px; padding: 16px 18px;
  background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.25);
  box-shadow: 0 0 30px rgba(52,211,153,0.1); }
.scc-banner-orb { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; color: #052e22;
  background: radial-gradient(circle at 35% 30%, #6EE7B7, #10B981); box-shadow: 0 0 20px rgba(52,211,153,0.5); }
.scc-banner-title { font-size: 15px; font-weight: 700; color: var(--adm-text); }
.scc-banner-sub { font-size: 11.5px; color: var(--adm-text-3); margin-top: 2px; }
.scc-banner-regions { margin-left: auto; display: flex; gap: 14px; font-size: 11px;
  font-family: 'SF Mono', ui-monospace, monospace; color: var(--adm-text-2); }
.scc-banner-regions span { display: inline-flex; align-items: center; gap: 6px; }

/* Service health rows */
.scc-svc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--adm-border); font-size: 12px; }
.scc-svc-row:last-child { border-bottom: none; }
.scc-svc-name { flex: 1; color: var(--adm-text-2); }
.scc-svc-ms, .scc-svc-up { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; color: var(--adm-text-3); }
.scc-svc-up { width: 58px; text-align: right; }

/* Incidents */
.scc-inc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--adm-border); }
.scc-inc-row:last-child { border-bottom: none; }
.scc-inc-t { font-size: 12px; font-weight: 600; color: var(--adm-text); display: flex; align-items: center; gap: 8px; }
.scc-inc-code { font-family: 'SF Mono', ui-monospace, monospace; font-size: 9.5px; padding: 1px 6px;
  border-radius: 5px; background: rgba(148,163,184,0.1); border: 1px solid var(--adm-border); color: var(--adm-text-3); }
.scc-inc-sub { font-size: 10.5px; color: var(--adm-text-3); margin-top: 2px; }
.scc-inc-ago { margin-left: auto; font-size: 10.5px; color: var(--adm-text-3);
  font-family: 'SF Mono', ui-monospace, monospace; flex-shrink: 0; }

/* Device rows / small bars */
.scc-bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 11.5px; }
.scc-bar-row .lbl { width: 108px; flex-shrink: 0; color: var(--adm-text-2); display: flex; align-items: center; gap: 7px; }
.scc-bar-row .trk { flex: 1; height: 6px; border-radius: 4px; background: var(--adm-border); overflow: hidden; contain: layout size; }
.scc-bar-row .trk i { display: block; height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.scc-bar-row .num { width: 42px; text-align: right; font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--adm-text-2); }

/* User detail panel */
.scc-detail-head { display: flex; align-items: center; gap: 12px; }
.scc-detail-live { display: flex; align-items: center; gap: 10px; border-radius: 11px; padding: 11px 13px;
  margin-top: 14px; background: linear-gradient(90deg, rgba(52,211,153,0.12), rgba(52,211,153,0.04));
  border: 1px solid rgba(52,211,153,0.3); font-size: 11.5px; color: var(--adm-text-2); }
.scc-statboxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.scc-statbox { border-radius: 10px; border: 1px solid var(--adm-border); padding: 10px 8px; text-align: center;
  background: rgba(148,163,184,0.04); }
.scc-statbox b { display: block; font-size: 16px; font-weight: 700; font-family: 'SF Mono', ui-monospace, monospace; }
.scc-statbox span { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--adm-text-3); }
.scc-timeline { margin-top: 8px; }
.scc-tl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px;
  border-bottom: 1px solid var(--adm-border); }
.scc-tl-row:last-child { border-bottom: none; }
.scc-tl-ic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.scc-tl-ago { margin-left: auto; font-size: 10.5px; color: var(--adm-text-3);
  font-family: 'SF Mono', ui-monospace, monospace; }
.scc-user-row--sel { background: rgba(139,92,246,0.1) !important;
  box-shadow: inset 2px 0 0 #8B5CF6; }

/* Anomaly boxes */
.scc-anom { display: flex; align-items: flex-start; gap: 9px; border-radius: 10px; padding: 10px 12px;
  margin-bottom: 8px; font-size: 11.5px; }
.scc-anom b { display: block; font-size: 12px; color: var(--adm-text); }
.scc-anom span { color: var(--adm-text-3); font-size: 10.5px; }
.scc-anom .ago { margin-left: auto; font-family: 'SF Mono', ui-monospace, monospace; font-size: 10px;
  color: var(--adm-text-3); flex-shrink: 0; }

/* Topbar search + range control */
.scc-search-wrap { position: relative; display: flex; align-items: center; }
.scc-search-keys { position: absolute; right: 9px; display: flex; gap: 3px; pointer-events: none; }
.scc-key { font-size: 9px; font-family: 'SF Mono', ui-monospace, monospace; padding: 2px 5px;
  border-radius: 4px; background: rgba(148,163,184,0.12); border: 1px solid var(--adm-border);
  color: var(--adm-text-3); }
.scc-bell { position: relative; width: 32px; height: 32px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; border: 1px solid var(--adm-border); cursor: pointer;
  color: var(--adm-text-2); background: transparent; }
.scc-bell i { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }

/* Live view stat cards (5-up) */
.scc-live-stat b { font-size: 22px; font-weight: 700; font-family: 'SF Mono', ui-monospace, monospace; }

/* Stacked bars (revenue) small labels */
.scc-stack-lbl { font-size: 10px; font-family: 'SF Mono', ui-monospace, monospace; fill: var(--adm-text-3); }

/* Responsive collapse of new grids */
@media (max-width: 1180px) {
  .scc-kpis--5 { grid-template-columns: repeat(3, 1fr); }
  .scc-grid-121, .scc-grid-1114 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .scc-grid-21, .scc-grid-121, .scc-grid-171, .scc-grid-141, .scc-grid-151, .scc-grid-113,
  .scc-grid-131, .scc-grid-11, .scc-grid-1114, .scc-grid-1610 { grid-template-columns: 1fr; }
  .scc-kpis--5 { grid-template-columns: repeat(2, 1fr); }
  .scc-exp-variants { grid-template-columns: 1fr; }
  .scc-banner { flex-wrap: wrap; }
  .scc-banner-regions { margin-left: 0; width: 100%; }
}

/* link-style inline button */
#aura-admin .scc-link { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--adm-text-2); font-family: inherit; padding: 0; transition: color 0.2s; }
#aura-admin .scc-link:hover { color: var(--adm-accent); }

/* ===== SCC v2 — functional layer: popovers + input modals ===== */
.scc-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:280px;max-width:340px;background:var(--adm-card);border:1px solid var(--adm-border);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,0.35);padding:10px 12px;animation:auraSlideUp 220ms cubic-bezier(0.4,0,0.2,1)}
.scc-pop-head{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--adm-text-2);font-weight:600;padding:4px 2px 8px;border-bottom:1px solid var(--adm-border);margin-bottom:6px}
.scc-pop-row{display:flex;align-items:flex-start;gap:8px;padding:7px 2px;font-size:12px;color:var(--adm-text);border-bottom:1px solid var(--adm-border)}
.scc-pop-row:last-child{border-bottom:none}
.scc-pop-row em{font-style:normal;font-size:10.5px;color:var(--adm-text-3);margin-left:auto;flex-shrink:0}
.scc-pop-sec{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--adm-text-3);font-weight:600;margin:8px 2px 5px}
.scc-pop-opts{display:flex;gap:6px;flex-wrap:wrap}
.scc-pop-opt{font-size:11px;padding:5px 12px;border-radius:9px;border:1px solid var(--adm-border);background:transparent;color:var(--adm-text-2);cursor:pointer;transition:background 160ms,border-color 160ms,color 160ms,box-shadow 160ms,opacity 160ms}
.scc-pop-opt:hover{color:var(--adm-text);border-color:var(--adm-text-3)}
.scc-pop-opt.on{background:linear-gradient(90deg,rgba(139,92,246,0.25),rgba(34,211,238,0.2));border-color:rgba(139,92,246,0.5);color:var(--adm-text)}
.scc-modal .scc-modal-title{font-size:16px;font-weight:600;letter-spacing:-0.2px;margin-bottom:14px;color:var(--adm-text, inherit)}
.scc-modal .scc-modal-lbl{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--adm-text-2, var(--text-tertiary));font-weight:600;margin:10px 0 5px}
.scc-modal .scc-modal-input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--adm-border, rgba(255,255,255,0.14));background:rgba(120,130,150,0.08);color:inherit;font-size:13.5px;font-family:inherit;outline:none;margin-bottom:2px}
.scc-modal .scc-modal-input:focus{border-color:rgba(139,92,246,0.55);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}
.scc-modal .scc-modal-btns{display:flex;gap:10px;margin-top:16px}
.scc-modal .scc-modal-btns .btn-ghost,.scc-modal .scc-modal-btns .btn-primary{flex:1}
.scc-modal .scc-modal-list{max-height:52vh;overflow-y:auto;margin:2px 0}

.library-title .badge { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) {
  .library-card { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 12px !important; }
  .library-card > span:first-child { width: 40px !important; height: 40px !important; }
  .library-title > span:first-child { flex-basis: 100%; }
  .library-card [data-adjust] { grid-column: 2 / 4; justify-self: start; min-height: 44px; }
  .library-card.lib-off { display: none !important; }
}