/* ══════════════════════════════════════════════
   ARTH.OS — FINANCIAL HEALTH OS
   Design System · v3.0 (Professional Redesign)
   ══════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Canvas */
  --bg: #050713;
  --bg-2: #0B1220;
  --bg-3: #0B1220;

  /* Surfaces */
  --surface: rgba(11, 18, 32, 0.88);
  --surface-2: rgba(11, 18, 32, 0.82);
  --surface-3: rgba(5, 7, 19, 0.94);
  --panel: rgba(11, 18, 32, 0.78);
  --panel-strong: rgba(11, 18, 32, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.04);
  --card-bg: rgba(5, 7, 19, 0.96);

  /* Glass utility */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-active: rgba(0, 255, 255, 0.08);

  /* Text */
  --text: white;
  --text-2: white;
  --text-3: white;
  --ink-0: white;
  --ink-1: white;
  --ink-2: rgba(255, 255, 255, 0.8);
  --ink-3: rgba(255, 255, 255, 0.6);
  --muted: rgba(255, 255, 255, 0.5);
  --muted-2: rgba(255, 255, 255, 0.4);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-sm: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(128, 0, 128, 0.4);
  --line: rgba(255, 255, 255, 0.09);
  --line-cyan: rgba(0, 255, 255, 0.15);
  --line-purple: rgba(128, 0, 128, 0.18);

  /* Brand — allowed palette only */
  --purple: purple;
  --cyan: cyan;
  --emerald: emerald;
  --white: white;

  /* Semantic aliases (must not introduce new colors) */
  --bg-primary: #050713;
  --bg-secondary: #0B1220;

  --purple-light: var(--purple);
  --purple-2: var(--purple);
  --violet: var(--purple);

  --cyan-light: var(--cyan);

  /* Map disallowed semantic colors to allowed ones */
  --amber: var(--emerald);
  --coral: var(--purple);
  --green: var(--emerald);
  --green-500: var(--emerald);

  /* ── COLOR SHADES (Mapped to Allowed Palette) ── */
  /* Purple shades */
  --purple-50: rgba(168, 85, 247, 0.1);
  --purple-100: rgba(168, 85, 247, 0.15);
  --purple-200: rgba(168, 85, 247, 0.25);
  --purple-300: rgba(168, 85, 247, 0.4);
  --purple-400: rgba(168, 85, 247, 0.6);
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;

  /* Red shades (mapped to purple) */
  --red-50: rgba(168, 85, 247, 0.1);
  --red-100: rgba(168, 85, 247, 0.15);
  --red-200: rgba(168, 85, 247, 0.25);
  --red-300: rgba(168, 85, 247, 0.4);
  --red-400: rgba(168, 85, 247, 0.6);
  --red-500: #a855f7;
  --red-600: #9333ea;
  --red-700: #7e22ce;
  --red-800: #6b21a8;
  --red-900: #581c87;

  /* Yellow/Amber shades (mapped to emerald) */
  --yellow-50: rgba(16, 185, 129, 0.1);
  --yellow-100: rgba(16, 185, 129, 0.15);
  --yellow-200: rgba(16, 185, 129, 0.25);
  --yellow-300: rgba(16, 185, 129, 0.4);
  --yellow-400: rgba(16, 185, 129, 0.6);
  --yellow-500: #10b981;
  --yellow-600: #059669;
  --yellow-700: #047857;
  --yellow-800: #065f46;
  --yellow-900: #064e3b;

  /* Green shades (mapped to emerald) */
  --green-50: rgba(16, 185, 129, 0.1);
  --green-100: rgba(16, 185, 129, 0.15);
  --green-200: rgba(16, 185, 129, 0.25);
  --green-300: rgba(16, 185, 129, 0.4);
  --green-400: rgba(16, 185, 129, 0.6);
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;

  /* Cyan shades */
  --cyan-50: rgba(6, 182, 212, 0.1);
  --cyan-100: rgba(6, 182, 212, 0.15);
  --cyan-200: rgba(6, 182, 212, 0.25);
  --cyan-300: rgba(6, 182, 212, 0.4);
  --cyan-400: rgba(6, 182, 212, 0.6);
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;

  /* Emerald shades */
  --emerald-50: rgba(16, 185, 129, 0.1);
  --emerald-100: rgba(16, 185, 129, 0.15);
  --emerald-200: rgba(16, 185, 129, 0.25);
  --emerald-300: rgba(16, 185, 129, 0.4);
  --emerald-400: rgba(16, 185, 129, 0.6);
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  /* Amber shades (mapped to yellow) */
  --amber-50: rgba(16, 185, 129, 0.1);
  --amber-100: rgba(16, 185, 129, 0.15);
  --amber-200: rgba(16, 185, 129, 0.25);
  --amber-300: rgba(16, 185, 129, 0.4);
  --amber-400: rgba(16, 185, 129, 0.6);
  --amber-500: #10b981;
  --amber-600: #059669;
  --amber-700: #047857;
  --amber-800: #065f46;
  --amber-900: #064e3b;

  /* Gradients (brand only, minimal use) */
  --grad-purple: linear-gradient(135deg, purple, #6d4cff);
  --grad-cyan: linear-gradient(135deg, cyan, purple);
  --grad-accent: linear-gradient(135deg, purple, #6d4cff 58%, cyan);

  /* Shadows — more subtle, layered */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 40px 96px rgba(0, 0, 0, 0.36);
  --glow-cyan: 0 0 28px rgba(0, 255, 255, 0.1), 0 0 60px rgba(0, 255, 255, 0.04);
  --glow-purple: 0 0 32px rgba(128, 0, 128, 0.12), 0 0 64px rgba(128, 0, 128, 0.04);
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  --surface-depth: linear-gradient(180deg, rgba(9, 13, 28, 0.96), rgba(4, 7, 17, 0.98));
  --surface-command: linear-gradient(180deg, rgba(11, 16, 34, 0.98), rgba(4, 7, 17, 0.99));
  --hairline: rgba(255, 255, 255, 0.065);
  --hairline-strong: rgba(0, 255, 255, 0.18);

  /* Typography */
  --display: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Radii */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  color: var(--text);
  background: var(--bg);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(98, 228, 209, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #050713 0%, #080c1a 46%, #050713 100%);
  background-attachment: fixed;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 72%);
}

body::after {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 42vh;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(98, 228, 209, 0.026));
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 180ms ease;
}
a:hover {
  opacity: 0.85;
}
h1,
h2,
h3,
p,
blockquote {
  margin: 0;
}
button {
  cursor: pointer;
  font-family: inherit;
}
button,
input,
textarea,
select {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.segmented-option:focus-within {
  outline: 2px solid rgba(98, 228, 209, 0.5);
  outline-offset: 2px;
}

/* ── Animations ── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ── Score Ring Glow Pulse ── */
@keyframes scoreRingPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* ── Vision / Flow transition polish ── */
@keyframes flowEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── App Shell ── */
.app-shell {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Assessment interstitial overlay */
.assessment-interstitial {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 10, 15, 0.6);
  z-index: 1200;
}
.assessment-interstitial .interstitial-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 12px;
  padding: 28px 36px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(3,8,18,0.6);
  backdrop-filter: blur(6px) saturate(120%);
}
.interstitial-hero {
  font-size: 18px;
  letter-spacing: 0.2px;
}
.interstitial-logo-wrap { display:flex; justify-content:center; margin-bottom:12px }
.interstitial-progress { width: 320px; height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; margin-top:14px; overflow:hidden }
.interstitial-progress-bar { height:100%; background: linear-gradient(90deg,#72ffe2,#7ad3ff); border-radius:999px }

main {
  position: relative;
  isolation: isolate;
}

[id] {
  scroll-margin-top: 148px;
}

.standalone-route-section {
  width: min(1440px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 54px) 0 clamp(54px, 7vw, 92px);
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  transition: background 200ms ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--hairline-strong);
  background:
    linear-gradient(180deg, rgba(7, 10, 22, 0.96), rgba(5, 7, 19, 0.88)), rgba(5, 7, 19, 0.92);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
}

@media (min-width: 1024px) {
  .topbar {
    grid-template-rows: auto auto;
    min-height: auto;
    height: auto;
    row-gap: 8px;
  }
}

/* Ensure page content isn't overlapped by the fixed header */
.page-shell-main {
  padding-top: calc(100px + 32px); /* header height + spacing for mobile */
}

@media (min-width: 1024px) {
  .page-shell-main {
    padding-top: 240px; /* accommodate multi-row header on desktop */
  }
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: fit-content;
}

.logo-word {
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(26px, 2rem, 34px);
  font-weight: 900;
  line-height: 0.9;
}

.logo-word span {
  color: var(--purple);
}

.brand small {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Weekly Mission styles */
.weekly-mission-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}
.mission-progress { margin-top: 6px }
.mission-bar { background: rgba(255,255,255,0.04); border-radius: 999px }
.mission-bar-fill { border-radius: 999px }


/* ── Nav Links (Desktop) ── */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0 12px;
  padding: 6px 8px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  z-index: 110;
  flex-wrap: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-width: none;
}

.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(5,7,19,0.6);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--ink-1);
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.nav-scroll-btn.left { left: 6px; }
.nav-scroll-btn.right { right: 6px; }

@media (min-width: 720px) {
  .nav-scroll-btn { display: inline-flex; }
}

.nav-scroll-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.94); transition: opacity 180ms ease, transform 180ms ease; }
.nav-scroll-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }

.nav-links.dragging { cursor: grabbing; cursor: -webkit-grabbing; user-select: none; }

/* edge fade masks to indicate overflow */
.nav-wrap::before,
.nav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
}
.nav-wrap::before { left: 0; background: linear-gradient(90deg, rgba(5,7,19,0.98), rgba(5,7,19,0.06)); }
.nav-wrap::after { right: 0; background: linear-gradient(270deg, rgba(5,7,19,0.98), rgba(5,7,19,0.06)); }

@media (min-width: 1200px) {
  /* make arrows subtler on very wide screens */
  .nav-scroll-btn { width: 34px; height: 34px; }
}

@media (min-width: 1024px) {
  /* Allow the topbar to grow to accommodate wrapped nav */
  .topbar {
    align-items: flex-start;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    min-height: auto;
    height: auto;
    padding: 12px clamp(18px, 4vw, 54px);
    row-gap: 12px;
  }

  .nav-wrap {
    align-items: flex-start;
    width: 100%;
  }

  /* Layout: brand on first row left, actions on first row right */
  .brand {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .model-header-actions {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    justify-self: end;
  }

  /* Nav on second row, full width */
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    overflow: visible !important;
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px 0;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-links a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 12px;
    margin: 4px 0;
  }

  .page-shell-main {
    padding-top: 200px; /* accommodate two-line header */
  }

  /* hide scroll arrows on desktop when nav is wrapped */
  .nav-scroll-btn { display: none !important; }
}

.nav-links::-webkit-scrollbar {
  height: 10px;
}

@media (min-width: 1024px) {
  .nav-links::-webkit-scrollbar {
    display: block;
  }
  .nav-links::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
  }
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 8px;
  min-width: auto;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  transition: all 160ms ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.08);
  box-shadow: inset 0 0 0 1px rgba(98, 228, 209, 0.14);
}

/* ── Header Actions ── */
.model-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  flex-wrap: wrap;
}

.header-sync {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 150px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(115, 240, 191, 0.18);
  border-radius: var(--radius-xs);
  color: rgba(225, 255, 247, 0.85);
  background: rgba(115, 240, 191, 0.06);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.save-state-unsaved-changes {
  border-color: rgba(244, 178, 85, 0.28);
  color: rgba(255, 224, 179, 0.9);
  background: rgba(244, 178, 85, 0.08);
}

.save-state-upload-pending,
.save-state-saved-offline {
  border-color: rgba(98, 228, 209, 0.24);
  color: rgba(226, 255, 250, 0.9);
  background: rgba(98, 228, 209, 0.07);
}

/* ── Icon Buttons ── */
.model-icon-btn,
.model-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: var(--glass);
  transition: all 170ms ease;
}

.dev-intelligence-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  min-width: max-content;
  padding: 0 10px;
  border: 1px solid rgba(98, 228, 209, 0.22);
  border-radius: var(--radius-xs);
  color: rgba(98, 228, 209, 0.85);
  background: rgba(98, 228, 209, 0.05);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 170ms ease;
}

.dev-intelligence-link:hover {
  border-color: rgba(98, 228, 209, 0.4);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.model-icon-btn:hover,
.model-avatar-btn:hover {
  border-color: var(--line-cyan);
  color: var(--ink-0);
  background: var(--glass-active);
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

.model-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  min-width: max-content;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-xs);
  color: #ffffff;
  background: var(--grad-accent);
  box-shadow: 0 8px 24px rgba(109, 76, 255, 0.25);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: all 170ms ease;
}

.model-start-btn:hover {
  box-shadow: 0 12px 32px rgba(109, 76, 255, 0.35);
  transform: translateY(-1px);
}

.notification-btn {
  position: relative;
}

.notification-badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  min-height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
}

.auth-header-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.auth-header-user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  max-width: 150px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: var(--glass);
  font-size: 11px;
  font-weight: 700;
}

.auth-header-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-avatar-btn span {
  font-size: 12px;
  font-weight: 900;
  color: var(--purple);
}

/* ══════════════════════════════════════════════
   FLOW NAVIGATION
   ══════════════════════════════════════════════ */

.app-nav-tabs {
  position: sticky;
  top: 68px;
  z-index: 19;
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 12px;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.app-nav-tabs::-webkit-scrollbar {
  height: 2px;
}
.app-nav-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.app-nav-tabs::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}

.app-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  min-width: max-content;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
}

.app-nav-tab svg {
  flex: 0 0 auto;
}

.app-nav-tab-label {
  display: inline-block;
  color: inherit;
  line-height: 1.2;
}

.app-nav-tab small {
  display: none;
}

.app-nav-tab:hover,
.app-nav-tab.active {
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.08);
  box-shadow: inset 0 0 0 1px rgba(98, 228, 209, 0.14);
}

.app-nav-tab.primary {
  border-color: rgba(75, 218, 236, 0.25);
  background: rgba(75, 218, 236, 0.1);
  color: var(--cyan);
}

.app-nav-tab.primary:hover,
.app-nav-tab.primary.active {
  background: rgba(75, 218, 236, 0.16);
  color: var(--cyan);
}

.app-nav-developer-menu {
  position: sticky;
  top: calc(68px + 58px);
  z-index: 19;
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dev-menu-header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(98, 228, 209, 0.12);
}

.dev-menu-items {
  display: grid;
  gap: 6px;
}

.dev-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 180ms ease;
}

.dev-menu-item:hover,
.dev-menu-item.active {
  border-color: rgba(98, 228, 209, 0.18);
  background: rgba(98, 228, 209, 0.08);
  color: var(--ink-0);
}

/* ══════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════ */

.model-screen {
  position: relative;
  width: min(1540px, calc(100% - 44px));
  min-height: calc(100vh - 124px);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 68px) 0 clamp(48px, 6vw, 88px);
  animation: fadeInUp 0.6s ease;
}

.model-hero-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.1fr) minmax(260px, 0.58fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
}

/* ── Hero Copy ── */
.model-hero-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(24px, 3.5vw, 48px);
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.075), transparent 34%),
    linear-gradient(315deg, rgba(139, 92, 246, 0.085), transparent 42%), var(--surface-depth);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: scaleIn 0.5s ease;
}

.model-hero-copy::before {
  position: absolute;
  inset: 16px;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(var(--radius) - 6px);
}

.model-hero-copy::after,
.model-engine-panel::after,
.model-insights-rail::after,
.summary-card::after,
.auth-card::after,
.onboarding-card::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.model-hero-copy h1 {
  max-width: 11.5ch;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(42px, 4.25rem, 72px);
  font-weight: 900;
  line-height: 0.96;
}

.model-hero-copy h1 span {
  display: block;
  color: var(--cyan);
}

.model-hero-copy p {
  max-width: 54ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.6;
}

/* ── Hero Stat Card ── */
.hero-stat-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.hero-stat-card .metric {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, rgba(98, 228, 209, 0.045), rgba(0, 0, 0, 0.22));
}

.hero-stat-card .metric span {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.hero-stat-card .metric label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.model-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-primary-cta,
.model-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: all 170ms ease;
}

.model-primary-cta svg,
.model-secondary-cta svg {
  flex: 0 0 auto;
}

.model-primary-cta {
  border: none;
  color: #ffffff;
  background: var(--grad-accent);
  box-shadow: 0 12px 32px rgba(109, 76, 255, 0.25);
}

.model-secondary-cta {
  border: 1px solid var(--line-cyan);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.06);
}

.model-primary-cta:hover,
.model-secondary-cta:hover {
  transform: translateY(-1px);
}

.model-primary-cta:hover {
  box-shadow: 0 18px 40px rgba(109, 76, 255, 0.32);
}

.model-secondary-cta:hover {
  border-color: rgba(98, 228, 209, 0.4);
  background: rgba(98, 228, 209, 0.1);
  box-shadow: var(--glow-cyan);
}

/* ── Engine Panel ── */
.model-engine-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.09), transparent 42%),
    linear-gradient(315deg, rgba(98, 228, 209, 0.055), transparent 48%), var(--surface-command);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: scaleIn 0.5s ease 0.1s both;
}

.model-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-sm);
}

.model-panel-title h2 {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.model-orb {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(98, 228, 209, 0.7);
  animation: pulse 2s ease-in-out infinite;
}

.model-engine-content {
  display: grid;
  grid-template-columns: minmax(160px, 0.6fr) minmax(220px, 1fr);
  gap: 16px;
  align-content: start;
  padding: 18px;
}

.model-score-block {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.24)), rgba(0, 0, 0, 0.24);
  text-align: center;
}

.model-score-block > span,
.model-score-block small {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.model-score-block p {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 800;
}

.score-ring-chart {
  position: relative;
  width: min(200px, 100%);
}

.score-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.score-ring-label strong {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.score-ring-label small {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
}

.awareness-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(98, 228, 209, 0.035), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.2);
}

.awareness-card h3 {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
}

.gap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gap-grid div {
  display: grid;
  gap: 3px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.04);
}

.gap-grid h1 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.gap-grid label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.awareness-copy {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.model-metric-stack {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.035), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.2);
}

.model-metric-row {
  display: grid;
  gap: 6px;
}

.model-metric-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.model-metric-row strong {
  color: var(--ink-0);
  font-weight: 800;
}

.model-metric-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.model-metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 16px rgba(98, 228, 209, 0.2);
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.model-engine-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-sm);
}

.model-engine-footer span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.model-engine-footer a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
}

/* ── Insights Rail ── */
.model-insights-rail {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(98, 228, 209, 0.05), transparent 34%), var(--surface-command);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: scaleIn 0.5s ease 0.2s both;
}

.model-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-sm);
}

.model-insights-header h2 {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
}

.model-view-insights {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
}

.model-view-insights:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.model-insight-list {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
}

.model-insight-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--border-sm);
  border-radius: var(--radius-sm);
  background: var(--glass);
  transition: all 180ms ease;
}

.model-insight-card:hover {
  background: var(--glass-hover);
  border-color: var(--border);
  transform: translateY(-1px);
}

.model-insight-card.tone-cyan {
  border-left: 2px solid rgba(98, 228, 209, 0.3);
}
.model-insight-card.tone-purple {
  border-left: 2px solid rgba(139, 92, 246, 0.3);
}

.insight-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.07);
}

.insight-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.insight-content strong {
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
}

.insight-content p {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insight-content small {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   MINIMIZABLE PANEL STYLES
   ══════════════════════════════════════════════ */

.minimizable-panel {
  position: relative;
}

.minimizable-panel.is-minimized {
  padding: 12px 16px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.985));
}

.minimized-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.minimized-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-minimize-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.055);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
  cursor: pointer;
}

.panel-minimize-button:hover {
  border-color: rgba(98, 228, 209, 0.34);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.1);
}

/* Panel header with minimize controls */
.panel-header-with-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-header-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* Panel with Minimize Component */
.panel-with-minimize {
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.985));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: fadeInUp 0.5s ease;
  transition:
    padding 160ms ease,
    height 160ms ease;
}

.panel-with-minimize.is-minimized {
  padding: 12px 16px;
}

.panel-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.panel-content-section {
  margin-top: 16px;
}

.minimized-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.minimized-label {
  font-size: 12px;
  color: var(--ink-2);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   CARDS & SUMMARY
   ══════════════════════════════════════════════ */

.summary-card {
  position: relative;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.985));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: fadeInUp 0.5s ease;
}

.summary-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 5% 0%, rgba(98, 228, 209, 0.06), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(139, 92, 246, 0.05), transparent 25%);
}

.summary-card > * {
  position: relative;
}

.panel,
.result-card,
.section-card,
.admin-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: var(--surface-sheen);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.panel,
.result-card {
  padding: 22px;
}

.panel,
.participant-card,
.wizard-progress-track,
.result-card,
.summary-card,
.premium-metric-tile,
.flow-card,
.enrichment-banner,
.journey-card,
.financial-dna-card {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.panel:hover,
.participant-card:hover,
.result-card:hover,
.summary-card:hover,
.premium-metric-tile:hover,
.flow-card:hover,
.journey-card:hover,
.financial-dna-card:hover {
  border-color: rgba(98, 228, 209, 0.2);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Score Ring ── */
.score-card {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 16px;
  overflow: hidden;
}

.score-copy {
  display: grid;
  align-content: center;
  gap: 6px;
}

.metric-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.score-copy h1 {
  color: var(--text);
  font-family: var(--display);
  font-size: 50px;
  font-weight: 900;
  line-height: 0.95;
}

.score-dial {
  position: relative;
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
}

.score-dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-dial circle {
  fill: transparent;
  stroke-width: 10;
  stroke-linecap: round;
}
.score-dial .track {
  stroke: var(--border);
}
.score-dial .progress {
  stroke: var(--green);
}

.dial-critical .progress {
  stroke: var(--coral);
}
.dial-warning .progress {
  stroke: var(--amber);
}
.dial-steady .progress {
  stroke: var(--cyan);
}

.score-dial span {
  position: absolute;
  color: var(--text);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
}

/* ── Panel Headings ── */
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-sm);
}

.panel-heading > div,
.result-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-heading svg {
  color: var(--purple);
}

.panel-heading h2 {
  color: var(--ink-0);
  font-size: 19px;
  font-weight: 900;
}

.panel-heading > span {
  padding: 6px 10px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
  font-size: 11px;
  font-weight: 800;
}

/* Support for minimize buttons in panel headers */
.panel-heading-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}

.panel-heading .panel-minimize-button {
  width: 28px;
  height: 28px;
  padding: 0;
}

.result-heading {
  padding-bottom: 14px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.result-heading h2 {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
.result-heading svg {
  flex: 0 0 auto;
  color: var(--purple);
}

/* ══════════════════════════════════════════════
   ASSESSMENT
   ══════════════════════════════════════════════ */

.assessment-section {
  width: min(1440px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) 0 clamp(52px, 7vw, 96px);
  animation: fadeInUp 0.5s ease;
}

.assessment-heading {
  position: relative;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin-bottom: 22px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(98, 228, 209, 0.07), transparent 34%),
    linear-gradient(300deg, rgba(139, 92, 246, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(8, 12, 26, 0.96), rgba(5, 8, 19, 0.985));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.assessment-heading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(98, 228, 209, 0.38),
    rgba(139, 92, 246, 0.26),
    transparent
  );
}

.assessment-heading > span {
  width: max-content;
  padding: 7px 10px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.assessment-heading h2 {
  max-width: 820px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(36px, 3.6rem, 58px);
  font-weight: 900;
  line-height: 1;
}

.assessment-heading h2 em {
  color: var(--cyan);
  font-style: normal;
}

.assessment-heading p {
  max-width: 740px;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.express-mode-toggle,
.adaptive-time-badge-row {
  max-width: 860px;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.56fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

.form-stack,
.result-stack-inner {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.result-stack {
  position: sticky;
  top: 124px;
}

/* ── Wizard Progress ── */
.wizard-progress-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 14px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2)), rgba(6, 10, 22, 0.72);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wizard-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wizard-node-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-3);
  background: var(--glass);
  transition: all 200ms ease;
}

.wizard-node-marker span {
  display: none;
}

.wizard-node.active .wizard-node-marker {
  border-color: var(--line-cyan);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.07);
}

.wizard-node.current .wizard-node-marker {
  color: var(--white);
  background: var(--grad-cyan);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(98, 228, 209, 0.15);
}

.wizard-node.completed .wizard-node-marker {
  border-color: rgba(98, 228, 209, 0.3);
  color: var(--emerald);
  background: rgba(98, 228, 209, 0.08);
}

.wizard-node-check {
  font-size: 13px;
  font-weight: 900;
}

.wizard-node-label {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-node.active .wizard-node-label {
  color: var(--ink-1);
}

.wizard-node-connector {
  position: absolute;
  top: 17px;
  left: 36px;
  width: calc(100% - 36px);
  height: 1px;
  background: var(--border);
}

/* ── Participant Card ── */
.participant-card {
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 36%), var(--surface-sheen);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 20px;
}

.participant-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.15fr);
  gap: 10px;
}

.field-input,
.money-input {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.field-input span,
.money-input > span,
.question-label {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.field-input input,
.money-input > div {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
}

.field-input input:focus,
.money-input > div:focus-within {
  border-color: rgba(98, 228, 209, 0.36);
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(98, 228, 209, 0.08);
  outline: none;
}

.field-input input {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
}

.field-input input::placeholder,
.money-input input::placeholder {
  color: rgba(184, 190, 214, 0.4);
}

/* ── Questions ── */
.question-list {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.question-row {
  display: grid;
  grid-template-columns: minmax(210px, 0.52fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.018);
  transition: all 160ms ease;
}

.question-row:hover {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.question-row.answered {
  border-color: rgba(98, 228, 209, 0.18);
  background: linear-gradient(90deg, rgba(98, 228, 209, 0.06), rgba(98, 228, 209, 0.018));
}

.question-row.answered .question-label {
  color: var(--ink-1);
}

.question-row.compact {
  padding-top: 20px;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.22)), rgba(0, 0, 0, 0.22);
}

.segmented-control .segmented-option {
  position: relative;
  min-height: 44px;
  min-width: 0;
  border-radius: 6px;
  color: var(--ink-2);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 10px;
  transition: all 160ms ease;
}

.segmented-control .segmented-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control .segmented-option:hover {
  background: rgba(98, 228, 209, 0.06);
  color: var(--ink-0);
}

.segmented-control .segmented-option.selected {
  color: #ffffff;
  background: var(--grad-cyan);
  box-shadow: 0 8px 18px rgba(98, 228, 209, 0.14);
}

.segmented-control .segmented-option span {
  overflow-wrap: anywhere;
}

.numeric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding-top: 22px;
}

.money-input > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

.money-input > div > span {
  padding: 0 8px 0 12px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
}

.money-input input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 0;
  outline: 0;
  color: var(--ink-0);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.money-input input::-webkit-outer-spin-button,
.money-input input::-webkit-inner-spin-button {
  margin: 0;
}

/* ── Live Score Card ── */
.live-score-card {
  overflow: hidden;
}

.live-score-card {
  border-color: rgba(98, 228, 209, 0.16);
  background:
    linear-gradient(145deg, rgba(98, 228, 209, 0.055), transparent 42%), var(--surface-sheen);
}

.live-score-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 12px;
  align-items: center;
}

.live-score-header strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.live-score-header p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.live-score-orbit {
  display: grid;
  width: 86px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line-cyan);
  border-radius: 50%;
  color: var(--cyan);
  background:
    conic-gradient(
      from 180deg,
      rgba(98, 228, 209, 0.7) var(--score-progress),
      rgba(255, 255, 255, 0.06) 0
    ),
    rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 0 0 8px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(98, 228, 209, 0.1);
}

.live-score-orbit span {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 900;
}

.live-score-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.live-score-meta > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-sm);
  border-radius: var(--radius-xs);
  background: var(--glass);
}

.live-score-meta strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
}

.live-score-meta span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.live-breakdown-bars {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.live-breakdown-row {
  display: grid;
  gap: 6px;
}

.live-breakdown-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.live-breakdown-row span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.live-breakdown-row strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
}

.bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Right Rail Intelligence Cards ── */
.result-stack,
.result-stack * {
  font-family: var(--body);
}

.result-stack .result-card {
  width: 100%;
  min-width: 0;
}

.result-stack .result-heading,
.narrative-card .result-heading,
.simulator-card .result-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
}

.result-stack .result-heading svg,
.narrative-card .result-heading svg,
.simulator-card .result-heading svg {
  width: 18px;
  height: 18px;
  color: var(--purple);
}

.result-stack .result-heading h2,
.narrative-card .result-heading h2,
.simulator-card .result-heading h2 {
  margin: 0;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.15;
}

.narrative-card,
.simulator-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-color: rgba(139, 92, 246, 0.18);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.055), transparent 38%),
    linear-gradient(180deg, rgba(9, 13, 28, 0.96), rgba(5, 8, 19, 0.985));
}

.narrative-card .premium-report-block-header {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(98, 228, 209, 0.12);
}

.narrative-card .premium-report-block-subtitle,
.simulator-subtitle,
.simulator-placeholder p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
}

.narrative-copy {
  margin: 0;
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.62;
}

.narrative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.narrative-box,
.simulator-metric,
.simulator-placeholder,
.simulator-recommendation-box {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
}

.narrative-box strong,
.behavior-correlation > strong,
.simulator-input-group label,
.impact-label,
.risk-label,
.rec-label,
.simulator-metric span {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.narrative-box p,
.simulator-metric strong {
  margin: 5px 0 0;
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.behavior-correlation {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.behavior-correlation ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.behavior-correlation li {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: rgba(98, 228, 209, 0.035);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.48;
}

.behavior-correlation li::before {
  position: absolute;
  top: 15px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  content: "";
  box-shadow: 0 0 12px rgba(98, 228, 209, 0.4);
}

.behavior-correlation li strong {
  color: var(--ink-0);
  font-weight: 850;
}

.simulator-input-group {
  display: grid;
  gap: 7px;
}

.simulator-input-group .input-wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.26);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.simulator-input-group .input-wrapper:focus-within {
  border-color: rgba(98, 228, 209, 0.36);
  background: rgba(0, 0, 0, 0.34);
  box-shadow: 0 0 0 3px rgba(98, 228, 209, 0.08);
}

.currency-label {
  padding: 0 10px 0 12px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

.simulator-input-group input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 0;
  outline: 0;
  color: var(--ink-0);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.simulator-input-group input::placeholder {
  color: rgba(184, 190, 214, 0.42);
}

.simulator-impact-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.impact-row {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
}

.impact-value {
  display: block;
  margin-top: 5px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.impact-value.forecast {
  color: var(--cyan);
}

.impact-arrow {
  align-self: center;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.impact-reduction {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid rgba(244, 178, 85, 0.16);
  border-radius: var(--radius-xs);
  color: rgba(255, 224, 179, 0.92);
  background: rgba(244, 178, 85, 0.055);
  font-size: 12px;
  font-weight: 750;
}

.simulator-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.simulator-risk-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(115, 240, 191, 0.16);
  border-radius: var(--radius-xs);
  background: rgba(115, 240, 191, 0.045);
}

.simulator-risk-indicator.risk-negative {
  border-color: rgba(255, 111, 145, 0.2);
  background: rgba(255, 111, 145, 0.055);
}

.risk-value {
  color: var(--green);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.risk-negative .risk-value {
  color: var(--coral);
}

.simulator-recommendation-box {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  border-color: rgba(244, 178, 85, 0.2);
  background: rgba(244, 178, 85, 0.055);
}

.simulator-recommendation-box svg {
  margin-top: 1px;
  color: var(--amber);
}

.rec-text {
  margin: 4px 0 0;
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.48;
}

/* ── Wizard Nav ── */
.wizard-nav-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.wizard-primary-btn,
.wizard-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: all 170ms ease;
}

.wizard-primary-btn {
  min-width: max-content;
  padding: 0 15px;
  border: none;
  color: #ffffff;
  background: var(--grad-accent);
  box-shadow: 0 8px 24px rgba(109, 76, 255, 0.22);
}

.wizard-primary-btn:hover {
  box-shadow: 0 14px 36px rgba(109, 76, 255, 0.3);
  transform: translateY(-1px);
}

.wizard-secondary-btn {
  min-width: 120px;
  padding: 0 13px;
  color: var(--ink-1);
  background: var(--glass);
}

.wizard-secondary-btn:hover {
  border-color: var(--line-cyan);
  color: var(--ink-0);
  background: var(--glass-active);
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

.wizard-secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
}

/* ── Validation Alert ── */
.validation-alert {
  padding: 14px 16px;
  border: 1px solid rgba(255, 111, 145, 0.22);
  border-radius: var(--radius-sm);
  color: rgba(255, 223, 231, 0.95);
  background: linear-gradient(180deg, rgba(255, 111, 145, 0.08), rgba(255, 255, 255, 0.02));
  font-size: 13px;
  font-weight: 700;
}

.validation-alert ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   SURVIVAL HERO
   ══════════════════════════════════════════════ */

.survival-hero {
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.survival-inner {
  display: grid;
  gap: 4px;
  text-align: center;
}

.survival-label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.survival-days {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 50px;
  font-weight: 900;
  line-height: 0.9;
}

.survival-sub {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.survival-title {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════
   COGNITION GAP CARD
   ══════════════════════════════════════════════ */

.cognition-gap-card {
  padding: 18px;
}
.cognition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.cog-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
}
.cog-label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.cog-value {
  color: var(--ink-0);
  font-size: 26px;
  font-weight: 900;
  font-family: var(--display);
  line-height: 1;
}

/* ══════════════════════════════════════════════
   BEHAVIOUR DRIVERS
   ══════════════════════════════════════════════ */

.behaviour-drivers-card {
  padding: 18px;
}
.drivers-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.driver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
}
.driver-title {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 800;
}
.driver-impact {
  font-size: 18px;
  font-weight: 900;
  font-family: var(--display);
}
.driver-impact.negative {
  color: var(--coral);
}
.driver-impact.positive {
  color: var(--green);
}

/* ══════════════════════════════════════════════
   SINGLE RECOMMENDED ACTION
   ══════════════════════════════════════════════ */

.single-action-card {
  padding: 18px;
}
.action-container {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.action-headline-block h3 {
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
}
.action-reason {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.action-impact-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.05);
}
.impact-label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.impact-value {
  display: block;
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 900;
  margin-top: 3px;
}
.action-guidance-block,
.action-microgola-block {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
}
.action-guidance-block h4,
.action-microgola-block h4 {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.archetype-guidance,
.microgola-text {
  color: var(--ink-0);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.action-engagement-block {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.engagement-btn,
.completion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 160ms ease;
}
.engagement-btn {
  border: 1px solid var(--purple);
  color: #fff;
  background: var(--grad-purple);
}
.engagement-btn:hover {
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}
.engagement-btn.engaged {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--green-500);
}
.completion-btn {
  border: 1px solid var(--border);
  color: var(--ink-1);
  background: var(--glass);
}
.completion-btn:hover {
  border-color: var(--purple);
  background: var(--glass-hover);
}
.completion-btn.completed {
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--green-500);
}
.completion-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: var(--radius-xs);
  background: rgba(34, 197, 94, 0.05);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   FLOW COMPONENTS
   ══════════════════════════════════════════════ */

.flow-section {
  display: none;
}
.flow-section.active {
  display: block;
  animation: flowEnter 260ms ease both;
}

.flow-section-container {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) 0;
}

.flow-section-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.flow-section-header h1 {
  font-family: var(--display);
  font-size: clamp(26px, 4.5vw, 38px);
  color: var(--text);
  margin-bottom: 10px;
  font-weight: 900;
}
.flow-section-header p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.flow-section-header span {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.flow-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.flow-card {
  position: relative;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(145deg, rgba(98, 228, 209, 0.04), transparent 38%),
    linear-gradient(180deg, rgba(22, 25, 44, 0.9), rgba(10, 14, 28, 0.92));
  box-shadow: var(--shadow);
  transition: all 200ms ease;
  overflow: hidden;
}

.flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.06), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.flow-card:hover {
  border-color: var(--line-purple);
  box-shadow:
    var(--shadow-md),
    0 8px 24px rgba(98, 228, 209, 0.06);
  transform: translateY(-2px);
}

.flow-card:hover::before {
  opacity: 1;
}
.flow-card > * {
  position: relative;
  z-index: 1;
}

.flow-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.07);
  border: 1px solid var(--border);
  color: var(--cyan);
  margin-bottom: 14px;
}

.flow-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.flow-card-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.flow-card-meta {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 600;
}

.flow-highlight-card {
  grid-column: 1 / -1;
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius);
  border: 1px solid var(--line-cyan);
  background:
    radial-gradient(circle at 94% 8%, rgba(98, 228, 209, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(32, 20, 58, 0.85), rgba(8, 12, 28, 0.94));
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: center;
}

.flow-highlight-content h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.flow-highlight-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.flow-highlight-cta {
  display: inline-flex;
  padding: 10px 22px;
  border-radius: var(--radius-xs);
  background: var(--grad-purple);
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 180ms ease;
}
.flow-highlight-cta:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.flow-highlight-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

.flow-progress-tracker {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(6, 10, 22, 0.8);
}

.flow-progress-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all 180ms ease;
}

.flow-progress-item.completed {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.25);
}
.flow-progress-item.active {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.25);
}

.flow-progress-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.flow-progress-item.completed .flow-progress-number {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.35);
  color: var(--green);
}
.flow-progress-item.active .flow-progress-number {
  background: var(--grad-purple);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.flow-progress-content {
  flex: 1;
}
.flow-progress-label {
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 3px;
  font-size: 14px;
}
.flow-progress-desc {
  font-size: 12px;
  color: var(--muted-2);
}

/* ══════════════════════════════════════════════
   REPORTS GRID
   ══════════════════════════════════════════════ */

.flow-report-grid {
  padding-top: clamp(32px, 4vw, 54px);
  scroll-margin-top: 160px;
}

.assessment-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(1420px, calc(100% - 44px));
  margin: 0 auto;
  gap: 22px;
}

.summary-main-column,
.flow-insights-section {
  display: grid;
  gap: 18px;
}

.flow-insights-section {
  width: min(1260px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 0 58px;
  scroll-margin-top: 160px;
}

.summary-span {
  scroll-margin-top: 160px;
}

/* Diagnostics Grid */
.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.assessment-summary-sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.assessment-summary-sidebar > * {
  min-width: 0;
}

.decision-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 16px;
}

/* ══════════════════════════════════════════════
   FINANCIAL DNA & UPGRADE JOURNEY
   ══════════════════════════════════════════════ */

.financial-dna-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: var(--glass);
  margin-top: 10px;
}

.dna-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.dna-item {
  display: grid;
  gap: 6px;
}
.dna-item > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}
.dna-item strong {
  color: var(--ink-0);
}

.dna-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.dna-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════════
   HISTORY + PREDICTION DASHBOARDS
   ══════════════════════════════════════════════ */

.user-history-card {
  display: grid;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.045), transparent 36%),
    linear-gradient(180deg, rgba(12, 16, 32, 0.94), rgba(6, 9, 20, 0.98));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.user-history-card .result-heading {
  gap: 12px;
}

.history-empty,
.history-summary-note,
.history-chart-container,
.history-timeline,
.history-recent {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
}

.history-timespan-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.timespan-tab {
  min-width: 48px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-2);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.timespan-tab.active,
.timespan-tab:hover {
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.1);
}

.history-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.history-stat {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16)),
    rgba(255, 255, 255, 0.02);
}

.stat-label,
.timeline-label,
.timeline-count,
.recent-label {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.stat-value {
  display: block;
  margin-top: 4px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 950;
  line-height: 1;
}

.history-summary-note p,
.history-empty p {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
}

.history-trend {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(115, 240, 191, 0.18);
  border-radius: var(--radius-pill);
  color: var(--green);
  background: rgba(115, 240, 191, 0.065);
  font-size: 13px;
  font-weight: 900;
}

.history-trend.negative {
  border-color: rgba(255, 111, 145, 0.22);
  color: var(--coral);
  background: rgba(255, 111, 145, 0.06);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.timeline-bars {
  display: flex;
  align-items: end;
  gap: 12px;
  min-height: 150px;
  padding: 12px;
  overflow-x: auto;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.timeline-bar-wrapper {
  display: grid;
  grid-template-rows: minmax(90px, 1fr) auto;
  gap: 8px;
  min-width: 52px;
  align-items: end;
  justify-items: center;
}

.timeline-bar {
  position: relative;
  width: 28px;
  min-height: 10px;
  border-radius: var(--radius-pill) var(--radius-pill) 6px 6px;
  background: linear-gradient(180deg, rgba(98, 228, 209, 0.95), rgba(139, 92, 246, 0.82));
  box-shadow: 0 10px 24px rgba(98, 228, 209, 0.1);
}

.timeline-bar.latest {
  box-shadow:
    0 0 0 1px rgba(98, 228, 209, 0.35),
    0 12px 28px rgba(98, 228, 209, 0.16);
}

.bar-score {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 950;
  transform: translateX(-50%);
}

.bar-date,
.recent-date,
.recent-score {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.recent-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.16);
}

.recent-score {
  color: var(--cyan);
  font-family: var(--display);
}

.prediction-engine-loading,
.prediction-engine-dashboard {
  width: min(1420px, calc(100% - 44px));
  margin: 28px auto 78px;
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  color: var(--ink-1);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.99));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.prediction-engine-inner {
  display: grid;
  gap: 22px;
}

.prediction-engine-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.prediction-engine-dashboard h1 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 950;
  line-height: 1.05;
}

.prediction-engine-dashboard h3,
.prediction-engine-dashboard h4 {
  color: var(--ink-0);
}

.prediction-engine-dashboard p {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
}

.prediction-primary-btn,
.prediction-engine-dashboard button[type="submit"] {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 10px 28px rgba(109, 76, 255, 0.24);
  font-size: 14px;
  font-weight: 900;
}

.prediction-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.prediction-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-2);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.prediction-tabs button:hover,
.prediction-tabs button[class*="text-blue-600"] {
  border-color: rgba(98, 228, 209, 0.22);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.08);
}

.prediction-empty-state,
.prediction-engine-dashboard [class*="bg-white"],
.prediction-engine-dashboard [class*="bg-slate-50"],
.prediction-engine-dashboard [class*="bg-green-50"],
.prediction-engine-dashboard [class*="from-blue-50"],
.prediction-engine-dashboard [class*="from-emerald-50"],
.prediction-engine-dashboard [class*="from-amber-50"],
.prediction-engine-dashboard [class*="from-indigo-50"] {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.022);
  box-shadow: none;
}

.prediction-engine-dashboard input,
.prediction-engine-dashboard select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(0, 0, 0, 0.22);
}

.prediction-engine-dashboard .space-y-8,
.prediction-engine-dashboard .space-y-4 {
  display: grid;
  gap: 18px;
}

/* ── Journey Card ── */
.journey-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  margin-top: 12px;
}

.journey-chart-wrapper {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-sm);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.15);
}

/* ══════════════════════════════════════════════
   ADMIN SECTION
   ══════════════════════════════════════════════ */

.admin-section {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0;
}

.admin-panel {
  padding: 24px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-label {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-login-card {
  display: grid;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
}

.admin-login-card label {
  display: grid;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.admin-login-card input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(0, 0, 0, 0.24);
}

.admin-login-error {
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
}

.admin-login-btn,
.admin-generate-btn {
  min-height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-xs);
  color: #fff;
  background: var(--grad-purple);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 170ms ease;
}

.admin-login-btn:hover,
.admin-generate-btn:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.admin-logout-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: var(--glass);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.admin-logout-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.admin-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
}

.admin-card h3 {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.admin-card pre {
  margin: 0;
  font-size: 11px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.admin-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.admin-report-hint {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}

.admin-report-preview {
  padding: 18px;
  border: 1px solid var(--line-purple);
  border-radius: var(--radius-sm);
  background: rgba(139, 92, 246, 0.04);
}

.admin-report-preview h3 {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.admin-report-preview pre {
  margin: 0;
  font-size: 11px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════
   AUTH & ONBOARDING
   ══════════════════════════════════════════════ */

.auth-page-overlay {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.09), transparent 28%),
    linear-gradient(315deg, rgba(139, 92, 246, 0.11), transparent 32%),
    linear-gradient(180deg, #050713, #080c1a 54%, #050713);
}

.auth-page-overlay::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 84%);
}

.auth-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(460px, 100%);
  gap: 22px;
  padding: clamp(24px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(98, 228, 209, 0.07), transparent 36%),
    linear-gradient(180deg, rgba(9, 13, 28, 0.98), rgba(5, 8, 19, 0.99));
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

.auth-card-header {
  display: grid;
  gap: 10px;
}

.auth-icon-wrapper {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.2);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.075);
  box-shadow: var(--glow-cyan);
}

.auth-card-header h2 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(30px, 2.25rem, 36px);
  font-weight: 900;
  line-height: 1;
}

.auth-card-header p {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.auth-field label svg {
  color: var(--cyan);
}

.auth-field input,
.auth-password-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(0, 0, 0, 0.28);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.auth-field input {
  padding: 0 13px;
}

.auth-password-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  overflow: hidden;
}

.auth-password-input input {
  min-height: 44px;
  border: 0;
  background: transparent;
}

.auth-field input:focus,
.auth-password-input:focus-within {
  border-color: rgba(98, 228, 209, 0.36);
  background: rgba(0, 0, 0, 0.34);
  box-shadow: 0 0 0 3px rgba(98, 228, 209, 0.08);
  outline: none;
}

.auth-password-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  background: transparent;
}

.auth-password-toggle:hover {
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
}

.auth-submit-btn,
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}

.auth-submit-btn,
.button-primary {
  border: 0;
  color: #ffffff;
  background: var(--grad-accent);
  box-shadow: 0 14px 34px rgba(109, 76, 255, 0.25);
}

.button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-1);
  background: rgba(255, 255, 255, 0.045);
}

.auth-submit-btn:not(:disabled):hover,
.button-primary:hover,
.button-secondary:hover {
  transform: translateY(-1px);
}

.auth-submit-btn:not(:disabled):hover,
.button-primary:hover {
  box-shadow: 0 18px 44px rgba(109, 76, 255, 0.34);
}

.button-secondary:hover {
  border-color: rgba(98, 228, 209, 0.25);
  background: rgba(98, 228, 209, 0.075);
}

.auth-submit-btn:disabled {
  cursor: not-allowed;
  filter: saturate(0.55);
  opacity: 0.54;
}

.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 850;
  letter-spacing: 0.01em;
  transition: transform 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.auth-google-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.auth-google-btn:focus {
  outline: 2px solid rgba(98, 228, 209, 0.32);
  outline-offset: 2px;
}

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 111, 145, 0.22);
  border-radius: var(--radius-xs);
  color: rgba(255, 223, 231, 0.96);
  background: rgba(255, 111, 145, 0.07);
  font-size: 12px;
  font-weight: 700;
}

.auth-footer {
  display: grid;
  gap: 8px;
  padding-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
}

.auth-footer .auth-link-btn {
  color: var(--cyan);
  font-weight: 850;
}

.auth-demo-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12px;
}

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

.auth-modal-container {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.25s ease;
}

.auth-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.auth-status-card strong {
  color: var(--ink-0);
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--cyan);
  font-weight: 700;
  cursor: pointer;
  font-size: inherit;
}

.auth-link-btn:hover {
  text-decoration: underline;
}

/* ── Enrichment Banner ── */
.enrichment-banner {
  padding: 16px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-sm);
  background: rgba(98, 228, 209, 0.04);
  margin-top: 0;
}

.enrichment-banner-title {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
}

.enrichment-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.07);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 160ms ease;
}

.enrichment-button:hover {
  background: rgba(98, 228, 209, 0.12);
  border-color: var(--cyan);
}

.enrichment-copy {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════
   ONBOARDING OVERLAY
   ══════════════════════════════════════════════ */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px) saturate(1.15);
  animation: fadeIn 0.3s ease;
}

.onboarding-card {
  position: relative;
  display: grid;
  gap: 22px;
  width: min(600px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(98, 228, 209, 0.065), transparent 36%),
    linear-gradient(180deg, rgba(8, 12, 26, 0.985), rgba(5, 7, 19, 0.99));
  box-shadow: var(--shadow-xl);
}

.onboarding-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.onboarding-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.22);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.075);
  box-shadow: var(--glow-cyan);
}

.onboarding-card h2 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(28px, 2.1rem, 34px);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 8px;
}

.onboarding-card p {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.onboarding-features {
  display: grid;
  gap: 12px;
}

.onboarding-feature {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018));
}

.onboarding-feature > svg {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.065);
}

.onboarding-feature strong {
  display: block;
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.onboarding-feature p {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  margin: 0;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* ── Enhanced Onboarding Sections ── */

.onboarding-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-sm);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.onboarding-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.onboarding-section-title svg {
  color: var(--cyan);
  flex-shrink: 0;
}

.onboarding-steps {
  display: grid;
  gap: 8px;
}

.onboarding-step {
  display: grid;
  gap: 0;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 200ms ease;
}

.onboarding-step:hover {
  border-color: rgba(98, 228, 209, 0.22);
  background: rgba(0, 0, 0, 0.26);
}

.onboarding-step-button {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 160ms ease;
}

.step-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.step-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.08);
}

.step-icon svg {
  flex-shrink: 0;
}

.step-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.step-info strong {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.step-duration {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.onboarding-step-button .chevron {
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.onboarding-step-button .chevron.expanded {
  transform: rotate(180deg);
}

.step-description {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  margin: 0;
  grid-column: 2;
}

.step-details {
  padding: 12px;
  padding-left: 52px;
  border-top: 1px solid rgba(98, 228, 209, 0.12);
  background: rgba(98, 228, 209, 0.05);
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  animation: slideDown 200ms ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 300px;
  }
}

/* ── Privacy Section ── */

.onboarding-section-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.onboarding-section-toggle:hover {
  opacity: 0.85;
}

.toggle-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toggle-header svg {
  color: var(--cyan);
  flex-shrink: 0;
}

.toggle-header h3 {
  margin: 0;
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
}

.onboarding-section-toggle .chevron {
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.onboarding-section-toggle .chevron.expanded {
  transform: rotate(180deg);
}

.privacy-guarantees {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  animation: slideDown 200ms ease;
}

.guarantee-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(115, 240, 191, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(115, 240, 191, 0.04);
}

.guarantee-item svg {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}

.guarantee-item strong {
  display: block;
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}

.guarantee-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.privacy-note {
  padding: 12px;
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.06);
}

.privacy-note p {
  margin: 0;
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
}

.privacy-note strong {
  color: var(--cyan);
}

/* ══════════════════════════════════════════════
   ADAPTIVE & EXPRESS MODE
   ══════════════════════════════════════════════ */

.express-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.express-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: var(--glass);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.express-mode-btn:hover {
  border-color: var(--line-cyan);
  color: var(--ink-0);
  background: var(--glass-active);
}

.express-mode-btn.active {
  border-color: var(--line-cyan);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.07);
}

.express-mode-badge {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(98, 228, 209, 0.12);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
}

.express-mode-hint {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

.adaptive-time-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.adaptive-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
}

.adaptive-time-badge.express {
  border-color: var(--line-cyan);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.05);
}

.adaptive-question-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}

.adaptive-q-counter {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.adaptive-q-track {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.adaptive-q-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-cyan);
  transition: width 400ms ease;
}

.adaptive-skip-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
}

.adaptive-skip-badge {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.adaptive-skip-reason {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
}

/* ── Resume Banner ── */
.resume-banner {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-sm);
  background: rgba(98, 228, 209, 0.05);
}

.resume-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
}

.resume-banner-content div {
  display: grid;
  gap: 2px;
}

.resume-banner-content strong {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
}

.resume-banner-content span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.resume-banner-actions {
  display: flex;
  gap: 8px;
}

.resume-banner-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.resume-banner-btn.primary {
  border: none;
  color: #fff;
  background: var(--grad-cyan);
}

.resume-banner-btn.primary:hover {
  box-shadow: 0 6px 18px rgba(98, 228, 209, 0.2);
}

.resume-banner-btn.secondary {
  border: 1px solid var(--border);
  color: var(--ink-2);
  background: var(--glass);
}

.resume-banner-btn.secondary:hover {
  border-color: var(--line-cyan);
  color: var(--ink-0);
}

/* ── Step Celebration ── */
.step-celebration {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-sm);
  background: rgba(98, 228, 209, 0.06);
  animation: scaleIn 0.3s ease;
}

.step-celebration-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-cyan);
}

.step-celebration-checkmark {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.step-celebration-text {
  display: grid;
  gap: 2px;
}

.step-celebration-text strong {
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 800;
}

.step-celebration-text span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* ── Idle Nudge ── */
.idle-nudge {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
  animation: fadeIn 0.3s ease;
}

.idle-nudge.stuck {
  border-color: rgba(244, 178, 85, 0.25);
  background: rgba(244, 178, 85, 0.05);
}

.idle-nudge-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}

.idle-nudge-content.stuck-content {
  display: grid;
  gap: 8px;
}

.idle-skip-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.idle-skip-btn:hover {
  background: rgba(98, 228, 209, 0.08);
  border-color: var(--line-cyan);
}

/* ── Question Context ── */
.question-context-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
  vertical-align: middle;
}

.question-context-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
  transition: all 160ms ease;
  padding: 0;
}

.question-context-toggle:hover {
  border-color: var(--line-cyan);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
}

.question-context-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-3);
  box-shadow: var(--shadow-md);
}

.question-context-tooltip strong {
  display: block;
  color: var(--ink-0);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.question-context-tooltip p {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* ══════════════════════════════════════════════
   PAYWALL
   ══════════════════════════════════════════════ */

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

.paywall-card {
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(8, 12, 26, 0.98), rgba(5, 7, 19, 0.98));
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.25s ease;
}

.paywall-card h2 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
}

.paywall-card p {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 16px;
}

.paywall-features {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.paywall-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 700;
}

.paywall-feature svg {
  color: var(--green);
  flex-shrink: 0;
}

.paywall-actions {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.paywall-upgrade-btn {
  min-height: 46px;
  border: none;
  border-radius: var(--radius-xs);
  color: #fff;
  background: var(--grad-accent);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 170ms ease;
}

.paywall-upgrade-btn:hover {
  box-shadow: 0 12px 32px rgba(109, 76, 255, 0.3);
  transform: translateY(-1px);
}

.paywall-close-btn {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: var(--glass);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.paywall-close-btn:hover {
  border-color: var(--line-cyan);
  color: var(--ink-0);
  background: var(--glass-active);
}

/* ══════════════════════════════════════════════
   VALIDATION FEEDBACK FORM
   ══════════════════════════════════════════════ */

.validation-feedback-form-card {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feedback-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.feedback-header svg {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  flex-shrink: 0;
}

.feedback-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}

.feedback-header p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}

.feedback-options {
  border: none;
  margin: 0 0 20px 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feedback-options legend {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.feedback-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
  cursor: pointer;
  transition: all 160ms ease;
}

.feedback-option:hover {
  border-color: var(--line-cyan);
  background: var(--glass-hover);
  color: var(--cyan);
}

.feedback-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cyan);
}

.feedback-option span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  user-select: none;
}

.feedback-option:has(input:checked) {
  border-color: var(--line-cyan);
  background: var(--glass-active);
}

.feedback-option:has(input:checked) span {
  color: var(--cyan);
  font-weight: 600;
}

.feedback-textarea-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.feedback-textarea-wrapper label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);
  text-transform: capitalize;
}

.feedback-textarea-wrapper textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--glass);
  color: var(--ink-0);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: all 160ms ease;
}

.feedback-textarea-wrapper textarea:focus {
  outline: none;
  border-color: var(--line-cyan);
  background: var(--glass-active);
  box-shadow: 0 0 0 2px rgba(98, 228, 209, 0.1);
}

.feedback-textarea-wrapper textarea::placeholder {
  color: var(--ink-3);
}

.feedback-textarea-wrapper small {
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

.feedback-submit-btn {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--cyan), var(--purple-light));
  color: #000;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.feedback-submit-btn:hover:not(:disabled) {
  box-shadow: 0 0 16px rgba(98, 228, 209, 0.4);
  transform: translateY(-1px);
}

.feedback-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.feedback-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-error {
  padding: 12px;
  border: 1px solid var(--coral);
  border-radius: var(--radius-xs);
  background: rgba(255, 111, 145, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--coral);
}

.feedback-retry-btn {
  padding: 6px 10px;
  border: 1px solid var(--coral);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}

.feedback-retry-btn:hover {
  background: rgba(255, 111, 145, 0.15);
  border-color: var(--coral);
}

.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.feedback-success svg {
  width: 36px;
  height: 36px;
  color: var(--cyan);
}

.feedback-success h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-0);
}

.feedback-success p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.view-results-btn {
  padding: 10px 16px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--cyan), var(--purple-light));
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.view-results-btn:hover {
  box-shadow: 0 0 12px rgba(98, 228, 209, 0.3);
  transform: translateY(-1px);
}

.ghost-button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.ghost-button:hover {
  border-color: var(--ink-2);
  color: var(--ink-0);
  background: var(--glass);
}

/* ══════════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════════ */

.notification-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: transparent;
}

.notification-panel {
  position: fixed;
  top: 68px;
  right: 0;
  z-index: 31;
  width: min(380px, 100vw);
  height: calc(100vh - 68px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: rgba(5, 7, 19, 0.96);
  backdrop-filter: blur(20px);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  animation: slideInRight 0.25s ease;
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.notification-panel-header h3 {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
}

.notification-panel-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: var(--glass);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 160ms ease;
}

.notification-panel-close:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.notification-list {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.notification-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border-sm);
  border-radius: var(--radius-xs);
  background: var(--glass);
  transition: all 160ms ease;
}

.notification-item:hover {
  background: var(--glass-hover);
}

.notification-item.unread {
  border-left: 2px solid var(--cyan);
}

.notification-item-title {
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
}

.notification-item-body {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.notification-item-time {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
}

.notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(8, 12, 26, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
}

.toast.success {
  border-color: rgba(115, 240, 191, 0.25);
}
.toast.error {
  border-color: rgba(255, 111, 145, 0.25);
}
.toast.info {
  border-color: rgba(98, 228, 209, 0.25);
}

.toast-content {
  flex: 1;
}

.toast-content strong {
  display: block;
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 2px;
}

.toast-content p {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}

.toast-close {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 160ms ease;
}

.toast-close:hover {
  color: var(--ink-0);
  background: var(--glass);
}

/* ══════════════════════════════════════════════
   CONSENT BANNER
   ══════════════════════════════════════════════ */

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.98), rgba(5, 8, 19, 0.99));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.32);
  animation: slideUp 300ms ease;
}

.consent-banner-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0;
}

.consent-banner-content > div:first-child {
  display: grid;
  gap: 8px;
}

.consent-banner h3 {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.consent-banner p {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.consent-banner strong {
  color: var(--cyan);
  font-weight: 700;
}

.consent-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

.consent-links a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-links a:hover {
  opacity: 1;
  color: var(--cyan-light);
}

.consent-links .separator {
  color: var(--ink-3);
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.consent-banner .btn-primary,
.consent-banner .btn-secondary,
.consent-banner .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 160ms ease;
}

.consent-banner .btn-primary {
  color: #ffffff;
  background: var(--grad-accent);
  box-shadow: 0 6px 16px rgba(109, 76, 255, 0.2);
  white-space: nowrap;
}

.consent-banner .btn-primary:hover {
  box-shadow: 0 10px 24px rgba(109, 76, 255, 0.28);
  transform: translateY(-1px);
}

.consent-banner .btn-secondary {
  border: 1px solid var(--border);
  color: var(--ink-1);
  background: var(--glass);
  white-space: nowrap;
}

.consent-banner .btn-secondary:hover {
  border-color: var(--line-cyan);
  background: var(--glass-active);
  color: var(--ink-0);
}

.consent-banner .btn-icon {
  width: 36px;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--ink-2);
  background: var(--glass);
}

.consent-banner .btn-icon:hover {
  border-color: var(--border);
  color: var(--ink-0);
  background: var(--glass-hover);
}

/* ══════════════════════════════════════════════
   INPUT VALIDATION
   ══════════════════════════════════════════════ */

.required-indicator {
  color: var(--coral);
  font-weight: 900;
  margin-left: 4px;
}

.validation-error {
  display: block;
  margin-top: 4px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  animation: fadeIn 200ms ease;
}

.money-input:has(input[aria-invalid="true"]) > div {
  border-color: rgba(255, 111, 145, 0.32);
  background: rgba(255, 111, 145, 0.04);
}

.money-input:has(input[aria-invalid="true"]) > div:focus-within {
  border-color: rgba(255, 111, 145, 0.48);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(255, 111, 145, 0.1);
}

/* ══════════════════════════════════════════════
   PROFESSIONAL FLOW REDESIGN
   ══════════════════════════════════════════════ */

.flow-command-center {
  position: relative;
  z-index: 11;
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(300px, 0.32fr) minmax(420px, 1fr);
  gap: 14px;
  align-items: stretch;
  width: min(1540px, calc(100% - 44px));
  margin: 14px auto 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.06), transparent 34%),
    linear-gradient(300deg, rgba(139, 92, 246, 0.065), transparent 48%), rgba(5, 8, 19, 0.88);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.flow-command-center::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 75%);
}

.flow-command-summary,
.flow-command-metrics,
.flow-stage-rail {
  position: relative;
  min-width: 0;
}

.flow-command-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.flow-command-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.25);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background:
    linear-gradient(145deg, rgba(98, 228, 209, 0.14), rgba(139, 92, 246, 0.08)),
    rgba(255, 255, 255, 0.035);
  box-shadow: var(--glow-cyan);
}

.flow-command-summary h2 {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.flow-command-summary p {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.flow-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.034);
}

.flow-command-metrics > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.flow-command-metrics span,
.flow-kpi-card span,
.assessment-flow-card small {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.flow-command-metrics strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-stage-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.flow-stage-rail::before {
  position: absolute;
  top: 29px;
  right: 24px;
  left: 24px;
  height: 2px;
  content: "";
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cyan) var(--flow-progress), rgba(255, 255, 255, 0.08) 0);
}

.flow-stage-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: rgba(5, 8, 19, 0.72);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.flow-stage-node:hover {
  border-color: rgba(98, 228, 209, 0.2);
  background: rgba(98, 228, 209, 0.055);
  opacity: 1;
  transform: translateY(-1px);
}

.flow-stage-node.active {
  border-color: rgba(98, 228, 209, 0.34);
  color: var(--cyan);
  background:
    linear-gradient(180deg, rgba(98, 228, 209, 0.12), rgba(98, 228, 209, 0.045)),
    rgba(5, 8, 19, 0.88);
  box-shadow: 0 10px 24px rgba(98, 228, 209, 0.08);
}

.flow-stage-node.completed {
  border-color: rgba(115, 240, 191, 0.16);
}

.flow-stage-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(0, 0, 0, 0.24);
}

.flow-stage-node strong {
  display: block;
  overflow: hidden;
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.flow-stage-node small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-flow-deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.assessment-flow-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 10px;
  align-items: center;
  min-height: 78px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xs);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent), rgba(0, 0, 0, 0.18);
}

.assessment-flow-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.065);
}

.assessment-flow-card.active {
  border-color: rgba(98, 228, 209, 0.35);
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.11), rgba(139, 92, 246, 0.055)),
    rgba(0, 0, 0, 0.24);
  box-shadow: var(--glow-cyan);
}

.assessment-flow-card.complete {
  border-color: rgba(115, 240, 191, 0.2);
}

.assessment-flow-card.active::after,
.assessment-flow-card.complete::after {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.assessment-flow-index {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 900;
}

.assessment-flow-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.055);
}

.assessment-flow-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-flow-card small {
  grid-column: 2;
  color: var(--ink-3);
}

.flow-report-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.58fr) minmax(520px, 1fr);
  gap: 18px;
  align-items: stretch;
  width: min(1420px, calc(100% - 44px));
  margin: 42px auto 0;
}

.flow-report-copy,
.flow-kpi-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.06), transparent 36%),
    linear-gradient(300deg, rgba(139, 92, 246, 0.06), transparent 45%),
    linear-gradient(180deg, rgba(8, 12, 26, 0.96), rgba(5, 8, 19, 0.985));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.flow-report-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 34px;
}

.flow-report-copy > span {
  width: max-content;
  padding: 7px 10px;
  border: 1px solid var(--line-cyan);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.flow-report-copy h1 {
  max-width: 780px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

.flow-report-copy p {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.6;
}

.flow-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.flow-kpi-card {
  display: grid;
  align-content: space-between;
  min-height: 150px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.025);
}

.flow-kpi-card strong {
  display: block;
  margin: 16px 0 10px;
  overflow-wrap: anywhere;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 900;
  line-height: 0.95;
}

.flow-kpi-card small {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.flow-report-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: 22px;
  align-items: start;
}

.summary-main-column {
  min-width: 0;
}

.assessment-summary-sidebar {
  position: sticky;
  top: 148px;
}

.summary-span {
  grid-column: 1 / -1;
}

.flow-insights-section {
  width: min(1420px, calc(100% - 44px));
  margin-top: 24px;
  padding: 22px 0 68px;
}

.flow-insights-section > .summary-card,
.flow-insights-section > .diagnostics-grid,
.flow-insights-section > .single-action-card,
.flow-insights-section > .trait-matrix-card,
.flow-insights-section > .result-card {
  min-width: 0;
}

/* Report analytics cards */
.analytics-dashboard {
  display: grid;
  gap: 18px;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.diagnostic-card,
.visibility-blindspot-block {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.055), transparent 36%),
    linear-gradient(300deg, rgba(139, 92, 246, 0.05), transparent 48%), rgba(8, 12, 26, 0.86);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.diagnostic-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
}

.diagnostic-card::after,
.visibility-blindspot-block::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.diagnostic-card > *,
.visibility-blindspot-block > * {
  position: relative;
  z-index: 1;
}

.card-header,
.blindspot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-0);
}

.card-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.card-header svg,
.blindspot-header svg {
  flex: 0 0 auto;
  color: var(--cyan);
}

.card-header span {
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 900;
}

.card-content {
  display: grid;
  gap: 7px;
}

.card-content .label {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.personality-title,
.risk-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.personality-title {
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.08);
  box-shadow: inset 0 0 0 1px rgba(98, 228, 209, 0.16);
}

.risk-badge {
  color: var(--coral);
  background: rgba(255, 111, 145, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 111, 145, 0.18);
}

.risk-badge.stable,
.risk-badge.low-risk {
  color: var(--green);
  background: rgba(115, 240, 191, 0.08);
  box-shadow: inset 0 0 0 1px rgba(115, 240, 191, 0.18);
}

.card-note {
  max-width: 72ch;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.visibility-blindspot-block {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.blindspot-header {
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.blindspot-header h3 {
  flex: 1;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.blindspot-header svg:last-child {
  color: var(--ink-3);
}

.blindspot-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.blindspot-sub-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(98, 228, 209, 0.13);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.025);
}

.blindspot-sub-card span {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.blindspot-sub-card strong {
  display: block;
  margin-top: 10px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.blindspot-insight {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.045);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.blindspot-metric {
  margin: 0;
  padding: 12px 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
}

/* Enhanced Analytics Dashboard */
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  text-align: center;
}

.summary-card .card-header {
  justify-content: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}

.summary-score strong {
  font-size: 32px;
  font-weight: 900;
  color: var(--cyan);
}

.summary-score span {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 650;
}

.analytics-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-teaser-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 28px;
}

.teaser-card {
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(98, 228, 209, 0.14);
  background: rgba(8, 12, 26, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.teaser-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  color: var(--ink-3);
}

.teaser-card strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--cyan);
  margin-bottom: 10px;
}

.teaser-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.teaser-actions-card {
  display: grid;
  align-content: space-between;
}

.teaser-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.teaser-actions button {
  width: 100%;
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-0);
  font-weight: 800;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.teaser-actions button:hover {
  background: rgba(98, 228, 209, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .dashboard-teaser-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dashboard-teaser-panel {
    grid-template-columns: 1fr;
  }
}

.analytics-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .analytics-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .analytics-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.runway-display,
.component-display {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.runway-item,
.component-item {
  padding: 8px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.04);
}

.runway-item span,
.component-item span {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.runway-item strong,
.component-item strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-0);
  font-size: 18px;
  font-weight: 900;
}

.weight-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.weight-item {
  padding: 8px 0;
}

.weight-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(98, 228, 209, 0.08);
  overflow: hidden;
}

.weight-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Advanced Area Tabs */
.advanced-area-tabs {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-button {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.04);
}

.tab-button.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.app-shell {
  font-size: 16px;
}

.topbar,
.app-nav-tabs,
.flow-command-center,
.assessment-section,
.flow-report-hero,
.flow-report-grid,
.flow-insights-section {
  font-size: 16px;
}

.topbar button,
.topbar a,
.app-nav-tab,
.flow-stage-node,
.assessment-flow-card,
.question-row,
.segmented-option,
.wizard-primary-btn,
.wizard-secondary-btn,
.summary-card,
.premium-metric-tile {
  line-height: 1.35;
}

.nav-links a {
  min-height: 36px;
  font-size: 14px;
}

.app-nav-tab {
  min-height: 50px;
}

.app-nav-tab-label {
  font-size: 14px;
}

.app-nav-tab small {
  max-width: 128px;
  font-size: 12px;
  line-height: 1.2;
}

.model-start-btn,
.model-primary-cta,
.model-secondary-cta,
.wizard-primary-btn,
.wizard-secondary-btn,
.enrichment-button,
.auth-link-btn {
  font-size: 15px;
}

.flow-command-summary h2 {
  font-size: 22px;
}

.flow-command-summary p {
  font-size: 15px;
}

.flow-command-metrics span,
.flow-kpi-card span,
.assessment-flow-card small {
  font-size: 12px;
}

.flow-command-metrics strong {
  font-size: 16px;
}

.flow-stage-node strong {
  font-size: 14px;
}

.flow-stage-node small {
  font-size: 12px;
}

.flow-report-copy h1 {
  font-size: 50px;
}

.flow-report-copy p {
  font-size: 18px;
}

.flow-kpi-card strong {
  font-size: 36px;
}

.assessment-heading h2 {
  font-size: 56px;
  line-height: 1.02;
}

.assessment-heading p {
  font-size: 18px;
}

.assessment-heading > span,
.express-mode-btn,
.adaptive-time-badge {
  font-size: 13px;
}

.assessment-flow-card {
  min-height: 92px;
}

.assessment-flow-card strong {
  font-size: 16px;
}

.panel-heading h2,
.result-heading h2 {
  font-size: 24px;
}

.field-input span,
.money-input > span,
.question-label {
  font-size: 15px;
  line-height: 1.35;
}

.field-input input,
.money-input input {
  font-size: 16px;
}

.segmented-control .segmented-option {
  min-height: 52px;
  font-size: 14px;
  line-height: 1.25;
}

.live-score-header p,
.live-score-meta strong,
.live-breakdown-row strong,
.premium-report-block-subtitle,
.premium-metric-desc,
.premium-metric-longtext,
.enrichment-copy,
.action-reason,
.archetype-guidance,
.microgola-text {
  font-size: 15px;
}

.live-score-meta span,
.live-breakdown-row span,
.premium-metric-kicker,
.metric-label {
  font-size: 12px;
}

.premium-report-section-title,
.premium-report-block-title {
  font-size: 24px;
}

.summary-card,
.premium-metric-tile,
.result-card,
.panel {
  font-size: 15px;
}

@media (max-width: 1280px) {
  .flow-command-center {
    grid-template-columns: 1fr;
  }

  .flow-report-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .flow-report-grid {
    grid-template-columns: 1fr;
  }

  .assessment-summary-sidebar {
    position: static;
  }

  .diagnostic-grid,
  .blindspot-metrics {
    grid-template-columns: 1fr;
  }

  .flow-stage-rail {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(128px, 1fr));
  }

  .flow-stage-rail::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .flow-command-center,
  .flow-report-hero,
  .flow-insights-section,
  .assessment-summary-grid {
    width: calc(100% - 24px);
  }

  .flow-command-metrics,
  .flow-kpi-strip,
  .assessment-flow-deck {
    grid-template-columns: 1fr 1fr;
  }

  .flow-command-summary {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 8px;
  }

  .flow-command-mark {
    width: 36px;
    height: 36px;
  }

  .flow-report-copy h1 {
    font-size: 36px;
  }

  .assessment-heading h2 {
    font-size: 40px;
  }

  .question-label,
  .segmented-control .segmented-option,
  .field-input input,
  .money-input input {
    font-size: 15px;
  }

  .diagnostic-card,
  .visibility-blindspot-block {
    padding: 18px;
  }

  .blindspot-header h3 {
    font-size: 21px;
  }

  .blindspot-sub-card strong {
    font-size: 24px;
  }

  .flow-kpi-card {
    min-height: 118px;
  }
}

@media (max-width: 480px) {
  .flow-command-metrics,
  .flow-kpi-strip,
  .assessment-flow-deck {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1500px) {
  .topbar {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .nav-links {
    display: flex;
    width: 100%;
  }

  .app-nav-tabs {
    display: none;
  }
}

@media (max-width: 1100px) {
  .model-hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  .model-insights-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
  }

  .model-insight-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .result-stack {
    position: static;
  }
}

@media (max-width: 900px) {
  .model-hero-grid {
    grid-template-columns: 1fr;
  }

  .model-hero-copy h1 {
    font-size: clamp(32px, 8vw, 44px);
  }

  .diagnostics-grid {
    grid-template-columns: 1fr;
  }

  .decision-section-grid {
    grid-template-columns: 1fr;
  }

  .admin-summary-grid {
    grid-template-columns: 1fr;
  }

  .assessment-summary-sidebar {
    margin-top: 14px;
  }

  .participant-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .flow-section.active {
    animation: none;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px 14px;
  }

  .brand small {
    display: none;
  }

  .model-header-actions .model-icon-btn {
    width: 32px;
    height: 32px;
  }

  .app-nav-tabs {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .app-nav-tab {
    min-width: max-content;
  }

  .header-sync {
    display: none;
  }

  .model-screen,
  .assessment-section {
    width: calc(100% - 24px);
  }

  .model-engine-content {
    grid-template-columns: 1fr;
  }

  .model-score-block,
  .awareness-card,
  .model-metric-stack {
    min-width: 0;
  }

  .model-engine-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-card {
    padding: 18px;
    border-radius: var(--radius-sm);
  }

  .flow-highlight-card {
    grid-template-columns: 1fr;
  }

  .model-insight-list {
    grid-template-columns: 1fr;
  }

  .live-score-header {
    grid-template-columns: 1fr;
  }

  .wizard-progress-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
  }

  .wizard-node-label {
    display: none;
  }

  .question-row,
  .question-row.compact {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .segmented-control {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .wizard-nav-footer {
    flex-direction: column-reverse;
  }

  .wizard-primary-btn,
  .wizard-secondary-btn {
    width: 100%;
  }

  .narrative-grid,
  .simulator-metrics-grid,
  .simulator-impact-summary {
    grid-template-columns: 1fr;
  }

  .impact-arrow {
    justify-self: start;
    padding-left: 12px;
  }

  .consent-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(98, 228, 209, 0.18);
    border-radius: var(--radius-sm);
    box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.38);
  }

  .consent-banner-content {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-height: min(48vh, 360px);
    padding: 14px;
    overflow-y: auto;
  }

  .consent-banner-content > div:first-child {
    gap: 6px;
  }

  .consent-banner h3 {
    font-size: 13px;
  }

  .consent-banner p {
    font-size: 11px;
    line-height: 1.45;
  }

  .consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    width: 100%;
  }

  .consent-banner .btn-primary,
  .consent-banner .btn-secondary,
  .consent-banner .btn-icon {
    min-height: 36px;
  }
}

/* ══════════════════════════════════════════════
   COLLAPSIBLE REPORT PANELS
   ══════════════════════════════════════════════ */

.collapsible-panel {
  min-width: 0;
}

.collapsible-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.collapsible-panel-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}

.collapsible-panel-heading h2,
.collapsible-panel-heading p {
  overflow-wrap: anywhere;
}

.collapsible-panel-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--purple);
}

.collapsible-panel-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.055);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.collapsible-panel-toggle:hover {
  border-color: rgba(98, 228, 209, 0.34);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.1);
}

.collapsible-panel-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.collapsible-panel-minimize-btn {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.055);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
  cursor: pointer;
}

.collapsible-panel-minimize-btn:hover {
  border-color: rgba(98, 228, 209, 0.34);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.1);
}

.collapsible-panel.is-minimized {
  padding-bottom: 18px;
}

.collapsible-panel.is-minimized .collapsible-panel-header {
  border-bottom: none;
  padding-bottom: 0;
}

.collapsible-panel.is-collapsed {
  padding-bottom: 18px;
}

.collapsible-panel-content > .premium-report-section-header:first-child,
.collapsible-panel-content > .premium-report-block-header:first-child,
.collapsible-panel-content > .forecast-section > .forecast-header:first-child {
  display: none;
}

.collapsible-panel .result-heading {
  margin-bottom: 0;
}

.collapsible-panel .result-heading p,
.collapsible-panel .result-heading span {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

/* Peer comparison */
.peer-comparison-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.045), transparent 40%), rgba(255, 255, 255, 0.026);
}

.peer-comparison-card .collapsible-panel-content {
  display: grid;
  gap: 14px;
}

.peer-percentile-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.045);
}

.peer-percentile-emoji {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-xs);
  background: rgba(139, 92, 246, 0.12);
  font-size: 18px;
}

.peer-percentile-info {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.peer-percentile-info strong {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.peer-percentile-info span,
.peer-summary,
.peer-card-empty {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.peer-chart {
  min-height: 168px;
}

.peer-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.peer-stat {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.peer-stat span {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.peer-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

/* Scenario forecast */
.forecast-section,
.forecast-section .collapsible-panel-content {
  display: grid;
  gap: 18px;
}

.forecast-header,
.forecast-card-header,
.forecast-card-title,
.forecast-status-heading,
.forecast-simulator-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.forecast-header {
  justify-content: space-between;
}

.forecast-header h3,
.forecast-simulator-header h4,
.forecast-card h4 {
  color: var(--ink-0);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.forecast-header p,
.forecast-card p,
.forecast-simulator-header p,
.forecast-card-note {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.forecast-subsection {
  display: grid;
  gap: 12px;
}

.forecast-subsection-title {
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 900;
}

.forecast-card,
.forecast-status-card,
.forecast-detail-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
}

.forecast-card-positive {
  border-color: rgba(115, 240, 191, 0.18);
}

.forecast-card-negative {
  border-color: rgba(255, 111, 145, 0.18);
}

.forecast-card-neutral {
  border-color: rgba(98, 228, 209, 0.16);
}

.forecast-card-header {
  justify-content: space-between;
  margin-bottom: 12px;
}

.forecast-card-metrics,
.forecast-list,
.forecast-simulator-form {
  display: grid;
  gap: 10px;
}

.forecast-detail-card span,
.forecast-field label {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.forecast-detail-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.forecast-detail-card small {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.forecast-simulator-result {
  padding: 18px;
  border: 1px solid rgba(98, 228, 209, 0.16);
  border-radius: calc(var(--radius-xs) * 1.25);
  background: rgba(98, 228, 209, 0.04);
}

.forecast-simulator-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.forecast-simulator-title strong {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.forecast-simulator-title small {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}

.forecast-detail-card-highlight {
  border-color: rgba(115, 240, 191, 0.35);
  background: rgba(115, 240, 191, 0.08);
}

.future-score-card strong {
  color: var(--green);
  font-size: 24px;
}

.forecast-two-up-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.forecast-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.16);
}

.forecast-tag {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.forecast-tag-critical {
  color: var(--coral);
}

.forecast-tag-warning {
  color: var(--amber);
}

.forecast-input,
.forecast-range,
.decision-form-field input,
.decision-form-field textarea,
.reminder-field select,
.reminder-field input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(0, 0, 0, 0.22);
}

.forecast-input,
.decision-form-field input,
.reminder-field select,
.reminder-field input {
  min-height: 40px;
  padding: 0 12px;
}

.decision-form-field textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
}

.forecast-button,
.decision-submit-button,
.decision-reset-button,
.reminder-save-btn,
.checkin-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  width: fit-content;
  max-width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(98, 228, 209, 0.22);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.09);
  font-size: 13px;
  font-weight: 850;
}

.forecast-button:hover,
.decision-submit-button:hover,
.decision-reset-button:hover,
.reminder-save-btn:hover,
.checkin-submit-button:hover:not(:disabled) {
  border-color: rgba(98, 228, 209, 0.36);
  background: rgba(98, 228, 209, 0.14);
}

.forecast-positive {
  color: var(--green);
}

.forecast-negative {
  color: var(--coral);
}

/* Insight narrative */
.insight-section {
  display: grid;
  gap: 16px;
}

.insight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.insight-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 800;
}

.insight-tab-active {
  border-color: rgba(98, 228, 209, 0.28);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.08);
}

.insight-tab-label,
.insight-main-tag-row,
.insight-main-header,
.insight-action-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-main-header {
  justify-content: space-between;
}

.insight-main-card,
.insight-patterns-card,
.insight-details-panel,
.insight-summary-card {
  padding: 20px;
}

.insight-main-headline {
  color: var(--ink-0);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.15;
}

.insight-main-copy,
.insight-action-card p,
.insight-pattern-text,
.insight-summary-text,
.insight-detail-text {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.58;
}

.insight-signal-box,
.insight-action-card,
.insight-details-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.insight-summary-grid,
.insight-patterns-list,
.insight-details-list {
  display: grid;
  gap: 12px;
}

.insight-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insight-summary-card {
  text-align: left;
}

.insight-summary-top,
.insight-pattern-row,
.insight-detail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.insight-tag,
.insight-pill,
.insight-category-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.insight-category-pill {
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.06);
}

.insight-details-summary {
  cursor: pointer;
  color: var(--ink-0);
  font-weight: 900;
}

/* Daily check-in, reminders, decisions */
.daily-checkin-card,
.reminder-preferences-card,
.decision-history,
.record-decision {
  display: grid;
  gap: 16px;
}

.reminder-preferences-card {
  padding: 22px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.985));
}

.reminder-preferences-card h3,
.decision-history .premium-report-block-title,
.record-decision .premium-report-block-title {
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 900;
}

.reminder-preferences-card .subtitle {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.checkin-header,
.streak-badge-group,
.checkin-title-group,
.checkin-summary-row,
.reminder-toggle-row,
.decision-trend-banner,
.decision-history-meta,
.decision-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkin-header,
.reminder-toggle-row,
.decision-history-meta {
  justify-content: space-between;
}

.streak-badge-group,
.checkin-options,
.decision-form-actions {
  flex-wrap: wrap;
}

.streak-badge,
.checkin-count-badge,
.decision-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-pill);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.055);
  font-size: 12px;
  font-weight: 850;
}

.checkin-questions,
.decision-history-list,
.decision-form-field {
  display: grid;
  gap: 12px;
}

.checkin-question label,
.decision-form-field label,
.reminder-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 850;
}

.checkin-options {
  display: flex;
  gap: 8px;
}

.checkin-option {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 800;
}

.checkin-option.selected {
  border-color: rgba(98, 228, 209, 0.32);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.09);
}

.checkin-summary-row {
  align-items: stretch;
}

.checkin-summary-row > div {
  flex: 1 1 220px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.checkin-summary-row strong,
.decision-history-category,
.decision-history-quality {
  color: var(--ink-0);
  font-weight: 900;
}

.checkin-summary-row p,
.checkin-footer-text,
.decision-history-notes,
.decision-trend-note {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.checkin-submit-button.disabled,
.checkin-submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.reminder-toggle-row {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
}

.reminder-toggle-row span {
  display: block;
  color: var(--ink-0);
  font-weight: 850;
}

.reminder-toggle-row small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.reminder-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
}

.reminder-toggle::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-1);
  content: "";
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.reminder-toggle.active {
  border-color: rgba(98, 228, 209, 0.3);
  background: rgba(98, 228, 209, 0.16);
}

.reminder-toggle.active::after {
  background: var(--cyan);
  transform: translateX(20px);
}

.reminder-field {
  display: grid;
  gap: 6px;
}

.decision-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.decision-history-item {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
}

.decision-history-timestamp,
.decision-empty-state {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 750;
}

.decision-input-error {
  border-color: rgba(255, 111, 145, 0.45) !important;
}

.decision-error-text {
  color: var(--coral);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 900px) {
  .forecast-two-up-grid,
  .insight-summary-grid,
  .peer-stats-row {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════
   PROFESSIONAL REPORT FLOW REDESIGN
   Keeps the existing ARTH.OS color system; improves hierarchy and readability.
   ══════════════════════════════════════════════ */

.flow-report-hero,
.flow-report-grid,
.flow-insights-section {
  font-family: "Segoe UI", Inter, Roboto, Arial, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.flow-report-hero {
  grid-template-columns: minmax(420px, 0.92fr) minmax(420px, 0.72fr);
  gap: 22px;
  margin-top: 34px;
}

.flow-report-copy,
.flow-kpi-strip {
  border-color: rgba(98, 228, 209, 0.18);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.07), transparent 34%),
    linear-gradient(310deg, rgba(139, 92, 246, 0.075), transparent 46%),
    linear-gradient(180deg, rgba(8, 12, 26, 0.98), rgba(5, 8, 19, 0.99));
}

.flow-report-copy {
  gap: 18px;
  padding: clamp(28px, 3vw, 42px);
}

.report-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.report-eyebrow-row span,
.flow-report-copy > span {
  width: fit-content;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(98, 228, 209, 0.2);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.065);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.report-eyebrow-row span + span {
  border-color: rgba(139, 92, 246, 0.22);
  color: var(--purple-light);
  background: rgba(139, 92, 246, 0.075);
}

.flow-report-copy h1 {
  max-width: 900px;
  color: var(--ink-0);
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.03;
  letter-spacing: 0;
  text-wrap: balance;
}

.flow-report-copy p {
  max-width: 78ch;
  color: var(--ink-1);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
}

.report-menu-flow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.report-menu-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 9px;
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)),
    rgba(255, 255, 255, 0.018);
}

.report-menu-step::after {
  position: absolute;
  right: -9px;
  top: 50%;
  width: 8px;
  height: 1px;
  content: "";
  background: rgba(98, 228, 209, 0.18);
}

.report-menu-step:last-child::after {
  display: none;
}

.report-menu-step:hover {
  border-color: rgba(98, 228, 209, 0.28);
  color: var(--ink-0);
  background:
    linear-gradient(180deg, rgba(98, 228, 209, 0.085), rgba(139, 92, 246, 0.045)),
    rgba(255, 255, 255, 0.02);
  opacity: 1;
}

.report-menu-index {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 950;
}

.report-menu-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
}

.report-menu-copy {
  min-width: 0;
}

.report-menu-copy strong {
  display: block;
  overflow: hidden;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.report-menu-copy small {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.flow-kpi-strip {
  gap: 12px;
  padding: 14px;
}

.flow-kpi-card {
  min-height: 154px;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.024);
}

.flow-kpi-card span {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.flow-kpi-card strong {
  margin: 18px 0 10px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}

.flow-kpi-card small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
}

.flow-report-grid {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.34fr);
  gap: 26px;
  padding-top: 28px;
}

.summary-main-column {
  position: relative;
  display: grid;
  gap: 24px;
  counter-reset: reportStage;
}

.summary-main-column::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 13px;
  width: 1px;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(98, 228, 209, 0.32),
    rgba(139, 92, 246, 0.14),
    transparent
  );
}

.summary-main-column > .summary-card,
.summary-main-column > .collapsible-panel,
.summary-main-column > .premium-report-block,
.summary-main-column > section,
.summary-main-column > div {
  position: relative;
  margin-left: 34px;
}

.summary-main-column > .summary-card::before,
.summary-main-column > .collapsible-panel::before,
.summary-main-column > .premium-report-block::before,
.summary-main-column > section::before,
.summary-main-column > div::before {
  position: absolute;
  top: 22px;
  left: -34px;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.25);
  border-radius: var(--radius-xs);
  color: var(--cyan);
  background: rgba(8, 12, 26, 0.98);
  box-shadow: 0 0 0 5px rgba(5, 7, 19, 0.92);
  counter-increment: reportStage;
  content: counter(reportStage);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 950;
}

.summary-card,
.premium-metric-tile,
.result-card,
.panel,
.single-action-card,
.journey-card,
.peer-comparison-card,
.reminder-preferences-card {
  border-radius: var(--radius-sm);
}

.summary-card,
.premium-metric-tile,
.result-card,
.panel {
  font-size: 16px;
}

.premium-report-section-title,
.premium-report-block-title,
.single-insight-title,
.panel-heading h2,
.result-heading h2 {
  color: var(--ink-0);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.16;
}

.premium-report-block-subtitle,
.premium-metric-desc,
.premium-metric-longtext,
.action-reason,
.archetype-guidance,
.microgola-text,
.narrative-copy,
.forecast-card-note {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}

.premium-metric-kicker,
.metric-label,
.impact-label {
  font-size: 12px;
  font-weight: 950;
}

.premium-metric-value {
  font-size: clamp(28px, 3vw, 38px);
}

.premium-metric-value-compact {
  font-size: 20px;
  line-height: 1.3;
}

.assessment-summary-sidebar {
  top: 142px;
  gap: 18px;
}

.assessment-summary-sidebar > * {
  border-color: rgba(98, 228, 209, 0.13);
}

.flow-insights-section {
  display: grid;
  gap: 24px;
  margin-top: 28px;
  padding-bottom: 78px;
}

.flow-insights-section::before {
  display: block;
  width: 100%;
  padding: 0 2px 8px;
  color: var(--ink-3);
  content: "Action layer";
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.flow-insights-section > .diagnostics-grid {
  padding: 12px;
  border: 1px solid rgba(98, 228, 209, 0.11);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.diagnostics-grid {
  gap: 18px;
}

.decision-section-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
  gap: 18px;
}

.app-nav-tabs {
  gap: 8px;
  padding-block: 10px;
  border-bottom-color: rgba(98, 228, 209, 0.13);
}

.app-nav-tab {
  min-height: 40px;
  min-width: max-content;
  padding: 8px 10px;
  font-size: 12px;
}

.app-nav-tab-label {
  font-size: 13px;
  font-weight: 700;
}

.app-nav-tab small {
  display: none;
}

@media (max-width: 1200px) {
  .flow-report-hero,
  .flow-report-grid {
    grid-template-columns: 1fr;
  }

  .report-menu-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .report-menu-step::after {
    display: none;
  }

  .assessment-summary-sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .flow-report-hero,
  .assessment-summary-grid,
  .flow-insights-section {
    width: calc(100% - 24px);
  }

  .flow-report-copy h1 {
    font-size: 34px;
  }

  .flow-report-copy p {
    font-size: 16px;
  }

  .report-menu-flow,
  .flow-kpi-strip,
  .diagnostics-grid {
    grid-template-columns: 1fr;
  }

  .summary-main-column::before,
  .summary-main-column > .summary-card::before,
  .summary-main-column > .collapsible-panel::before,
  .summary-main-column > .premium-report-block::before,
  .summary-main-column > section::before,
  .summary-main-column > div::before {
    display: none;
  }

  .summary-main-column > .summary-card,
  .summary-main-column > .collapsible-panel,
  .summary-main-column > .premium-report-block,
  .summary-main-column > section,
  .summary-main-column > div {
    margin-left: 0;
  }

  .premium-report-section-title,
  .premium-report-block-title,
  .single-insight-title,
  .panel-heading h2,
  .result-heading h2 {
    font-size: 22px;
  }

  .app-nav-tab {
    min-width: 124px;
  }
}

/* ══════════════════════════════════════════════
   REPORT MODULE DETAIL POLISH
   ══════════════════════════════════════════════ */

.consequence-forecast-card,
.interventions-prescription-card,
.strategic-metrics-card,
.single-action-card,
.trait-matrix-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.14);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(5, 8, 19, 0.985));
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.single-action-card {
  overflow: hidden;
}

.single-action-card .collapsible-panel-content {
  display: grid;
  gap: 18px;
}

.single-action-card .action-container {
  margin-top: 2px;
}

.trajectory-warning,
.dqi-constraint,
.readiness-recommendation,
.interventions-reasoning,
.forecast-cta,
.trait-insights {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(98, 228, 209, 0.13);
  border-radius: var(--radius-xs);
  color: var(--ink-1);
  background: rgba(98, 228, 209, 0.045);
}

.trajectory-warning.warning-critical,
.trajectory-warning.warning-high,
.dqi-constraint {
  border-color: rgba(255, 111, 145, 0.22);
  background: rgba(255, 111, 145, 0.06);
}

.trajectory-warning strong,
.dqi-constraint strong,
.readiness-recommendation strong,
.interventions-reasoning p,
.forecast-cta p {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.trajectory-warning p,
.dqi-constraint p,
.readiness-recommendation p,
.rec-impact,
.forecast-narrative,
.trait-insights li {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.forecast-chart-container {
  min-height: 320px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
}

.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.forecast-metric,
.metric-column,
.intervention-card,
.trait-item {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.018);
}

.forecast-metric .metric-value {
  display: block;
  margin-top: 8px;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.forecast-metric .metric-value.decline {
  color: var(--coral);
}

.forecast-metric .metric-value.stable,
.forecast-metric .metric-value.current {
  color: var(--cyan);
}

.forecast-narrative {
  display: grid;
  gap: 10px;
}

.consequence-text {
  color: var(--ink-0);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.55;
}

.decay-rate-text,
.forecast-footnote {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.interventions-list,
.intervention-group,
.interventions-grid {
  display: grid;
  gap: 14px;
}

.interventions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intervention-group-title,
.metric-column-title,
.trait-insights h4 {
  color: var(--ink-0);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.intervention-card {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.intervention-card:hover {
  border-color: rgba(98, 228, 209, 0.25);
  background:
    linear-gradient(180deg, rgba(98, 228, 209, 0.06), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.02);
  transform: translateY(-1px);
}

.intervention-card.primary {
  border-color: rgba(139, 92, 246, 0.2);
}

.intervention-card.completed {
  border-color: rgba(115, 240, 191, 0.24);
}

.intervention-header,
.intervention-meta,
.interventions-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.intervention-title {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}

.intervention-impact,
.intervention-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.intervention-meta {
  justify-content: flex-start;
  margin-top: 10px;
  flex-wrap: wrap;
}

.intervention-description,
.no-interventions {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.intervention-button {
  margin-top: 12px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(98, 228, 209, 0.24);
  border-radius: var(--radius-xs);
  color: var(--ink-0);
  background: rgba(98, 228, 209, 0.09);
  font-size: 13px;
  font-weight: 900;
}

.interventions-progress {
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  background: rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 850;
}

.progress-bar,
.breakdown-bar,
.trait-meter .meter-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.075);
}

.interventions-progress .progress-bar {
  flex: 1 1 220px;
}

.progress-fill,
.breakdown-fill,
.meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dqi-score-display,
.readiness-score-display,
.archetype-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(98, 228, 209, 0.11);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.16);
}

.dqi-score-circle,
.readiness-score-circle {
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(98, 228, 209, 0.25);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(98, 228, 209, 0.11), rgba(139, 92, 246, 0.04) 68%),
    rgba(0, 0, 0, 0.22);
}

.dqi-score-number,
.readiness-score-number {
  color: var(--ink-0);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.dqi-score-max,
.readiness-score-max {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 850;
}

.dqi-band,
.readiness-band {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(98, 228, 209, 0.18);
  border-radius: var(--radius-pill);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.06);
  font-size: 12px;
  font-weight: 950;
}

.dqi-meaning,
.readiness-meaning,
.dqi-narrative,
.readiness-narrative {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.dqi-breakdown,
.readiness-breakdown {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.breakdown-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.breakdown-label,
.breakdown-value {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
}

.breakdown-value {
  color: var(--ink-0);
}

.trait-matrix-card {
  color: var(--ink-1);
}

.archetype-banner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.archetype-name strong {
  display: block;
  color: var(--ink-0);
  font-size: 22px;
  font-weight: 950;
}

.archetype-name span,
.score-label {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.score-value {
  display: block;
  margin-top: 4px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.traits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.trait-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.trait-icon-wrapper {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--radius-xs);
}

.trait-header h4 {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.25;
}

.trait-header p,
.trait-interpretation {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.trait-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.meter-label {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 950;
}

.trait-insights {
  display: grid;
}

.trait-insights ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.trait-insights strong {
  color: var(--ink-0);
}

/* ===== ENHANCED INSIGHT NARRATIVE FLOW ===== */

/* Animation for progressive insight reveal */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-light {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.enhanced-flow {
  display: grid;
  gap: 28px;
  padding: 0;
}

/* Behavioral Patterns Section */
.insight-patterns-section {
  display: grid;
  gap: 16px;
}

.section-header {
  display: grid;
  gap: 8px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-description {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.insight-patterns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.pattern-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(98, 228, 209, 0.08);
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.02), transparent);
  transition: all 0.2s ease;
}

.pattern-card:hover {
  border-color: rgba(98, 228, 209, 0.15);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.04), transparent);
}

.pattern-severity-high {
  border-color: rgba(139, 92, 246, 0.18);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent);
}

.pattern-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.pattern-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(98, 228, 209, 0.12);
  color: var(--cyan);
}

.pattern-badge-high {
  background: rgba(139, 92, 246, 0.12);
  color: var(--purple);
}

.pattern-badge-medium {
  background: rgba(98, 228, 209, 0.12);
  color: var(--cyan);
}

.pattern-title {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.pattern-description {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.pattern-evidence {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(98, 228, 209, 0.08);
}

/* Insights Flow - Main Journey */
.insights-flow {
  display: grid;
  gap: 20px;
}

.insight-moment-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.03), transparent 40%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.95), rgba(5, 8, 19, 0.98));
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.insight-moment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insight-moment-card.insight-card-critical::before {
  background: linear-gradient(90deg, var(--purple), transparent);
  opacity: 1;
}

.insight-moment-card.insight-card-high::before {
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 1;
}

.insight-moment-card.insight-card-high {
  border-color: rgba(98, 228, 209, 0.18);
}

.insight-moment-card.insight-card-critical {
  border-color: rgba(139, 92, 246, 0.18);
}

.insight-moment-card:hover {
  border-color: rgba(98, 228, 209, 0.2);
  background:
    linear-gradient(140deg, rgba(98, 228, 209, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.97), rgba(5, 8, 19, 0.99));
}

.insight-moment-card.expanded {
  border-color: rgba(98, 228, 209, 0.25);
}

/* Insight Moment Header */
.insight-moment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.moment-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.priority-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(98, 228, 209, 0.1);
  color: var(--cyan);
  flex-shrink: 0;
  animation: pulse-light 2s ease-in-out infinite;
}

.priority-indicator.priority-critical {
  background: rgba(139, 92, 246, 0.15);
  color: var(--purple);
}

.priority-indicator.priority-high {
  background: rgba(98, 228, 209, 0.15);
  color: var(--cyan);
}

.priority-indicator.priority-medium {
  background: rgba(98, 228, 209, 0.12);
  color: var(--emerald);
}

.moment-label {
  display: grid;
  gap: 3px;
}

.label-text {
  color: var(--ink-0);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.insight-index {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

.insight-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.05);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.insight-expand-btn:hover {
  border-color: rgba(98, 228, 209, 0.2);
  background: rgba(98, 228, 209, 0.1);
  color: var(--cyan);
}

/* Context Layer */
.insight-context {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.05);
  border-left: 3px solid var(--cyan);
}

.priority-context {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* Headline - Key Moment */
.insight-headline {
  color: var(--ink-0);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

/* Narrative */
.insight-narrative {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

/* Signal Card */
.insight-signal-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.03);
}

.signal-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.signal-content {
  display: grid;
  gap: 4px;
}

.signal-label {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.signal-text {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* Action Section */
.action-section {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.action-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.06), transparent);
  transition: all 0.2s ease;
}

.action-card:hover {
  border-color: rgba(98, 228, 209, 0.25);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.09), transparent);
}

.action-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.action-content {
  display: grid;
  gap: 8px;
}

.action-text {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  margin: 0;
}

.action-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

.action-footnote {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0 8px;
  border-left: 2px solid rgba(98, 228, 209, 0.1);
}

/* Impact Projection */
.impact-projection {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
}

.impact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.impact-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 110px;
}

.impact-bars {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.impact-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--cyan), rgba(98, 228, 209, 0.6));
  transition: width 0.3s ease;
  min-width: 20px;
}

.impact-dim {
  color: var(--ink-0);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Insights Footer */
.insights-footer {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.03), transparent);
  margin-top: 8px;
}

.footer-content {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink-0);
}

.footer-content > svg:first-child {
  color: var(--cyan);
  flex-shrink: 0;
}

.footer-text {
  display: grid;
  gap: 4px;
  flex: 1;
}

.footer-title {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.footer-description {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.footer-content > svg:last-child {
  color: var(--ink-3);
  flex-shrink: 0;
}

/* Empty State Enhancement */
.insight-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 12px;
  border: 1px solid rgba(98, 228, 209, 0.08);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.02), transparent);
}

/* Responsive Design */
@media (max-width: 640px) {
  .enhanced-flow {
    gap: 20px;
  }

  .insight-moment-card {
    gap: 14px;
    padding: 18px;
  }

  .insight-headline {
    font-size: 18px;
  }

  .insight-patterns-grid {
    grid-template-columns: 1fr;
  }

  .moment-badge {
    gap: 8px;
  }

  .priority-indicator {
    min-width: 32px;
    width: 32px;
    height: 32px;
  }

  .impact-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .impact-bars {
    width: 100%;
  }

  .footer-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-content > svg:last-child {
    display: none;
  }
}

/* ===== B2B PARTNER PORTAL MODERN DESIGN ===== */

.partner-portal-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  gap: 32px;
}

.partner-header-section {
  display: grid;
  gap: 16px;
}

.partner-header-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.partner-header-icon {
  font-size: 36px;
  line-height: 1;
}

.partner-header-content {
  display: grid;
  gap: 6px;
}

.partner-header-title {
  color: var(--ink-0);
  font-size: 32px;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}

.partner-header-subtitle {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3px;
}

.partner-blueprint-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent),
    linear-gradient(180deg, rgba(7, 11, 24, 0.95), rgba(5, 8, 19, 0.98));
  border: 1px solid rgba(34, 197, 94, 0.15);
  margin-bottom: 8px;
}

.partner-active-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), transparent);
  border: 1px solid rgba(34, 197, 94, 0.2);
  margin-bottom: 8px;
}

.partner-badge-content {
  color: rgb(34, 197, 94);
  font-size: 13px;
  font-weight: 700;
}

.partner-badge-meta {
  color: rgba(34, 197, 94, 0.7);
  font-size: 11px;
  font-weight: 600;
}

.partner-blueprint-text {
  color: rgb(34, 197, 94);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

/* Partner Tabs */
.partner-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xs);
  width: fit-content;
}

.partner-tab {
  padding: 10px 16px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.partner-tab:hover {
  border-color: rgba(98, 228, 209, 0.2);
  background: rgba(98, 228, 209, 0.05);
  color: var(--cyan);
}

.partner-tab-active {
  border-color: rgba(98, 228, 209, 0.3);
  background: rgba(98, 228, 209, 0.12);
  color: var(--cyan);
}

/* Tab Content Sections */
.partner-overview-section {
  display: grid;
  gap: 28px;
}

.partner-section-header {
  display: grid;
  gap: 8px;
}

.partner-section-title {
  color: var(--ink-0);
  font-size: 22px;
  font-weight: 900;
  margin: 0;
}

.partner-section-description {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

/* Use Cases Grid */
.partner-usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.partner-usecase-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.02), transparent);
  transition: all 0.2s ease;
}

.partner-usecase-card:hover {
  border-color: rgba(98, 228, 209, 0.2);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.04), transparent);
}

.partner-usecase-icon {
  font-size: 28px;
  line-height: 1;
}

.partner-usecase-title {
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.partner-usecase-desc {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
}

/* Revenue Model Section */
.partner-revenue-callout {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(251, 146, 60, 0.08), transparent),
    linear-gradient(180deg, rgba(7, 11, 24, 0.95), rgba(5, 8, 19, 0.98));
  border: 1px solid rgba(251, 146, 60, 0.15);
}

.partner-revenue-title {
  color: rgb(251, 146, 60);
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-revenue-desc {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

/* Pricing Grid */
.partner-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.partner-tier-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.02), transparent),
    linear-gradient(180deg, rgba(7, 11, 24, 0.95), rgba(5, 8, 19, 0.98));
  transition: all 0.3s ease;
  position: relative;
}

.partner-tier-card:hover {
  border-color: rgba(98, 228, 209, 0.25);
  transform: translateY(-4px);
}

.partner-tier-card.tier-featured {
  border-color: rgba(34, 197, 94, 0.3);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.06), transparent),
    linear-gradient(180deg, rgba(7, 11, 24, 0.97), rgba(5, 8, 19, 0.99));
}

.partner-tier-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  padding: 4px 12px;
  background: rgb(34, 197, 94);
  color: var(--ink-0);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.partner-tier-header {
  display: grid;
  gap: 8px;
}

.partner-tier-name {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.partner-tier-price {
  display: grid;
  gap: 4px;
}

.partner-tier-amount {
  color: var(--ink-0);
  font-size: 28px;
  font-weight: 900;
}

.partner-tier-period {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

.partner-tier-savings {
  color: rgb(34, 197, 94);
  font-size: 12px;
  font-weight: 700;
}

.partner-tier-meta {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
}

.partner-tier-meta-item {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.partner-tier-features {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(98, 228, 209, 0.1);
}

.partner-tier-feature-label {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.partner-tier-feature {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.partner-tier-feature::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(98, 228, 209, 0.2);
  font-size: 10px;
}

/* Register Form */
.partner-register-form-container {
  max-width: 500px;
  padding: 24px;
  border: 1px solid rgba(98, 228, 209, 0.1);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.02), transparent);
}

.partner-register-title {
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 20px;
}

.partner-form-group {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.partner-form-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.partner-form-input,
.partner-form-select {
  padding: 12px 14px;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.partner-form-input::placeholder {
  color: var(--ink-3);
}

.partner-form-input:focus,
.partner-form-select:focus {
  outline: none;
  border-color: rgba(98, 228, 209, 0.4);
  background: rgba(98, 228, 209, 0.03);
}

.partner-form-toggle {
  display: flex;
  gap: 8px;
}

.partner-form-toggle-btn {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.partner-form-toggle-btn:hover {
  border-color: rgba(98, 228, 209, 0.3);
  background: rgba(98, 228, 209, 0.05);
}

.partner-form-toggle-btn.active {
  border-color: rgba(98, 228, 209, 0.4);
  background: rgba(98, 228, 209, 0.15);
  color: var(--cyan);
}

.partner-form-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--cyan), rgba(98, 228, 209, 0.8));
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
}

.partner-form-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(98, 228, 209, 0.25);
}

.partner-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Alert Messages */
.partner-alert {
  padding: 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 700;
  margin-top: 16px;
}

.partner-alert-success {
  border: 1px solid rgba(34, 197, 94, 0.2);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), transparent);
  color: rgb(34, 197, 94);
}

.partner-alert-error {
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), transparent);
  color: rgb(239, 68, 68);
}

.partner-result-box {
  padding: 16px;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.03);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 12px;
}

.partner-alert-info {
  padding: 12px 16px;
  border: 1px solid rgba(98, 228, 209, 0.2);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.08);
  color: var(--cyan);
  font-size: 13px;
}

.partner-metric-box {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.partner-metric-label {
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.partner-query-form-container {
  max-width: 600px;
  padding: 24px;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.partner-billing-section {
  display: grid;
  gap: 20px;
}

.partner-result-key {
  font-family: "Courier New", monospace;
  color: var(--cyan);
  word-break: break-all;
}

/* Responsive */
@media (max-width: 768px) {
  .partner-portal-container {
    padding: 20px 16px;
    gap: 20px;
  }

  .partner-header-hero {
    gap: 12px;
  }

  .partner-header-icon {
    font-size: 28px;
  }

  .partner-header-title {
    font-size: 24px;
  }

  .partner-pricing-grid,
  .partner-usecases-grid {
    grid-template-columns: 1fr;
  }

  .partner-tabs {
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 980px) {
  .forecast-metrics,
  .interventions-grid,
  .metrics-grid,
  .traits-grid {
    grid-template-columns: 1fr;
  }

  .breakdown-item {
    grid-template-columns: 1fr;
  }

  .dqi-score-display,
  .readiness-score-display,
  .archetype-banner {
    grid-template-columns: 1fr;
  }
}

/* ── B2B Partner Portal Design System Alignment ── */

.partner-portal-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.partner-header {
  margin-bottom: 32px;
}

.partner-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.partner-header-icon {
  font-size: 32px;
  line-height: 1;
}

.partner-header-content h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
}

.partner-header-content p {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.partner-status-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(115, 240, 191, 0.25);
  border-radius: var(--radius-xs);
  background: rgba(115, 240, 191, 0.08);
  font-size: 13px;
  color: var(--green);
  margin-bottom: 12px;
}

.partner-status-badge strong {
  font-weight: 700;
}

.partner-blueprint-info {
  padding: 12px 16px;
  border: 1px solid rgba(98, 228, 209, 0.15);
  border-radius: var(--radius-xs);
  background: rgba(98, 228, 209, 0.05);
  font-size: 13px;
  color: var(--cyan);
  line-height: 1.6;
}

.partner-blueprint-info strong {
  font-weight: 700;
  color: var(--cyan-light);
}

.partner-tabs-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-sm);
}

.partner-tab-button {
  padding: 10px 20px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.partner-tab-button:hover {
  background: var(--surface);
  color: var(--text);
  border-color: rgba(98, 228, 209, 0.1);
}

.partner-tab-button.active {
  background: rgba(98, 228, 209, 0.12);
  color: var(--cyan);
  border-color: rgba(98, 228, 209, 0.3);
}

.partner-tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .partner-portal-container {
    padding: 24px 16px;
  }

  .partner-header-top {
    gap: 12px;
  }

  .partner-header-icon {
    font-size: 28px;
  }

  .partner-header-content h1 {
    font-size: 24px;
  }

  .partner-tabs-container {
    gap: 6px;
  }

  .partner-tab-button {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════
   STORY HOME — Financial Story Single-Scroll UX
   ════════════════════════════════════════════════ */

:root {
  /* Design tokens: hi-tech palette */
  --bg-900: #050713;
  --bg-800: #0b1220;
  --accent-cyan: #06b6d4;
  --accent-purple: #7c3aed;
  --accent-emerald: #10b981;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 18px;
  --hero-gradient-1: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(124, 58, 237, 0.06));
}

/* Hi‑tech full screen hero */
.hi-tech-hero {
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  padding: clamp(48px, 7vw, 80px) 24px;
  color: white;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(6, 182, 212, 0.08), transparent 8%),
    radial-gradient(1000px 500px at 90% 90%, rgba(124, 58, 237, 0.07), transparent 12%),
    var(--bg-800);
  overflow: hidden;
}

.hi-tech-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.06) 0, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.04) 0, transparent 18%);
  pointer-events: none;
  z-index: 0;
}

/* subtle animated particle field (CSS-only approximation) */
.hi-tech-hero .particle-field {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.02) 0, transparent 2%),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.01) 0, transparent 2%),
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.015) 0, transparent 2%);
  background-size:
    1200px 800px,
    900px 600px,
    1400px 1000px;
  animation: particleShift 18s linear infinite;
  z-index: 0;
}

@keyframes particleShift {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.95;
  }
  50% {
    transform: translate3d(-30px, 10px, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 0.95;
  }
}

.hi-tech-hero .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1100px;
}

.hi-tech-hero .hero-title {
  font-size: clamp(20px, 3vw, 28px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.hi-tech-hero .hero-subtitle {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 1;
  margin: 6px 0 0 0;
  color: white;
}

.score-ring {
  --size: 220px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent-cyan) calc(var(--score) * 1%),
    rgba(255, 255, 255, 0.06) 0 100%
  );
  box-shadow:
    0 12px 40px rgba(6, 182, 212, 0.08),
    0 6px 18px rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.score-ring .score-inner {
  width: calc(var(--size) - 44px);
  height: calc(var(--size) - 44px);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06));
  display: grid;
  place-items: center;
}

.score-number-hero {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  color: white;
}

.score-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
}

.hero-cta {
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 800;
}

.financial-core-label {
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 22px;
}

.core-orb-shell {
  display: grid;
  place-items: center;
  width: min(380px, 90vw);
  margin: 0 auto 28px;
  position: relative;
}

.core-orb {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.16), transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 80px rgba(31, 41, 55, 0.24),
    inset 0 0 30px rgba(255, 255, 255, 0.08);
}

.core-orb::before,
.core-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.7;
}

.core-orb::before {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 45%);
}

.core-orb::after {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 50%);
}

.core-score {
  font-size: clamp(72px, 8vw, 108px);
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
  z-index: 1;
}

.core-orb-label {
  position: absolute;
  bottom: 24px;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  z-index: 1;
}

.core-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.core-metric {
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  text-align: center;
}

.core-metric span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.core-metric strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
}

/* glass card variant for small stats */
.mini-glass-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  z-index: 2;
}
.mini-glass {
  padding: 14px 18px;
  border-radius: 12px;
  backdrop-filter: blur(var(--glass-blur));
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(255, 255, 255, 0.9);
  min-width: 140px;
  text-align: center;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: clamp(40px, 6vw, 80px) 24px;
  color: white;
  background:
    radial-gradient(circle at 20% 20%, rgba(6, 182, 212, 0.16), transparent 24%),
    radial-gradient(circle at 85% 25%, rgba(124, 58, 237, 0.14), transparent 20%),
    radial-gradient(circle at 50% 90%, rgba(16, 185, 129, 0.08), transparent 18%), rgba(5, 7, 19, 1);
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.05), transparent 18%);
  pointer-events: none;
}

.home-hero .hero-copy,
.home-hero .hero-visual {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}

.hero-headline {
  margin: 0;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.98;
  font-weight: 900;
}

.hero-meta,
.hero-description,
.section-copy {
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
}

.hero-meta {
  margin: 18px 0 0;
  font-size: 1rem;
}

.hero-description {
  margin: 18px 0 0;
  line-height: 1.8;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.hero-cta,
.hero-secondary,
.action-cta,
.why-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  font-weight: 700;
}

.hero-cta {
  padding: 16px 26px;
  background: linear-gradient(90deg, #06b6d4, #7c3aed);
  color: white;
}

.hero-secondary {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-visual {
  display: grid;
  gap: 26px;
  justify-items: center;
}

.score-ring {
  --size: 280px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    rgba(6, 182, 212, 0.9) calc(var(--score) * 1%),
    rgba(255, 255, 255, 0.08) 0 100%
  );
  box-shadow:
    0 18px 55px rgba(6, 182, 212, 0.18),
    0 10px 30px rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.score-inner {
  width: calc(var(--size) - 60px);
  height: calc(var(--size) - 60px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  backdrop-filter: blur(14px);
}

.score-number-hero {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  color: white;
}

.score-label {
  margin-top: 8px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}

.hero-mini-glass-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.hero-metrics-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-suggestion-button {
  border: none;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.coach-suggestion-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.glass-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.glass-value {
  font-size: 1.4rem;
  font-weight: 800;
}

.unified-journey-home {
  position: relative;
  min-height: 100vh;
  background: #090d1f;
}

.home-block {
  padding: 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  scroll-margin-top: 120px;
}

.home-block:hover {
  opacity: 1;
}

.home-block:nth-child(3) {
  margin-top: 60px;
}

.home-block:nth-child(n+5) {
  opacity: 0.7;
}

.home-block:nth-child(n+5):hover {
  opacity: 0.95;
}

.section-header {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}

.section-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 800;
  color: white;
  line-height: 1.1;
}

.cinematic-hero .section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
}

.section-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  max-width: 760px;
  line-height: 1.7;
}

.today-grid,
.why-grid {
  display: grid;
  gap: 18px;
}

.today-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.glass-panel {
  padding: 28px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.glass-panel-label {
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.glass-panel-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
}

.why-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.why-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.why-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

.why-card-headline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.why-card-impact {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.why-card-symbol {
  font-size: 1.8rem;
}

/* Cinematic Hero */
.cinematic-hero {
  position: relative;
  padding: 80px 24px;
  margin-bottom: 0;
  overflow: visible;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cinematic-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px circle at 10% 20%, rgba(124,58,237,0.14), transparent 8%), radial-gradient(1000px circle at 90% 80%, rgba(6,182,212,0.12), transparent 12%);
  filter: blur(40px) saturate(120%);
  z-index: 0;
  pointer-events: none;
}
.cinematic-mesh {
  transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0) scale(1.02);
  transition: transform 220ms ease-out;
  animation: mesh-oscillate 12s linear infinite;
}
@keyframes mesh-oscillate {
  0% { transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0) scale(1.02); }
  50% { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) scale(1.04); }
  100% { transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0) scale(1.02); }
}
.cinematic-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cinematic-particles .particle {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.2));
  border-radius: 50%;
  opacity: 0.9;
  transform: translate3d(0,0,0);
  animation: particle-float 6s ease-in-out infinite;
}
@keyframes particle-float {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9 }
  50% { transform: translateY(-18px) translateX(6px) scale(1.08); opacity: 0.6 }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9 }
}
.cinematic-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.cinematic-left {
  flex: 1 1 560px;
}
.cinematic-right {
  width: 360px;
  display: grid;
  place-items: center;
}
.cinematic-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
}
.cinematic-score .score-number {
  font-size: 7.5rem;
  font-weight: 900;
  color: white;
  line-height: 0.9;
}
.cinematic-metrics { display:flex; gap: 18px; margin-top: 12px; align-items:center }
.metric-delta { color: #a7f3d0; font-weight:800 }
.metric-percent { color: rgba(255,255,255,0.82); font-weight:700 }
.score-ring-large {
  --size: 320px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(rgba(6,182,212,0.95) calc(var(--score) * 1%), rgba(255,255,255,0.04) 0 100%);
  box-shadow: 0 28px 120px rgba(6,182,212,0.14), 0 18px 60px rgba(124,58,237,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  animation: ring-glow 3.6s ease-in-out infinite;
}
@keyframes ring-glow {
  0% { box-shadow: 0 28px 120px rgba(6,182,212,0.12), 0 18px 60px rgba(124,58,237,0.08) }
  50% { box-shadow: 0 34px 160px rgba(6,182,212,0.18), 0 22px 80px rgba(124,58,237,0.12) }
  100% { box-shadow: 0 28px 120px rgba(6,182,212,0.12), 0 18px 60px rgba(124,58,237,0.08) }
}
.score-inner-large { width: calc(var(--size) - 70px); height: calc(var(--size) - 70px); border-radius:50%; background: rgba(255,255,255,0.04); display:grid; place-items:center; backdrop-filter: blur(12px) }
.score-number-hero-large { font-size: 4.8rem; font-weight:900; color: white }
.score-label-large { margin-top:8px; color: rgba(255,255,255,0.9) }

/* Hologram FutureYou */
.future-you-card.hologram { position: relative; overflow: visible }
.future-avatar-holo { display:flex; gap:14px; align-items:center }
.holo-silhouette { width:96px; height:96px; border-radius:50%; background: radial-gradient(circle at 30% 20%, rgba(124,58,237,0.9), rgba(6,182,212,0.6)); box-shadow: 0 18px 60px rgba(99,102,241,0.14), inset 0 -6px 18px rgba(0,0,0,0.25); position:relative }
.holo-silhouette::after { content:""; position:absolute; inset:6px; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent); mix-blend-mode: screen }
.holo-details { color: white }
.holo-name { font-size: 1.05rem; font-weight:800 }
.holo-stats { margin-top:8px; display:grid; gap:6px }
.holo-stats strong { color: #a7f3d0; font-weight:900 }
.holo-silhouette { animation: holo-pulse 2.8s infinite ease-in-out }
@keyframes holo-pulse { 0% { transform: translateY(0) scale(1) } 50% { transform: translateY(-6px) scale(1.02) } 100% { transform: translateY(0) scale(1) } }

/* Coach quick prompts */
.coach-quick-actions { display:flex; gap:10px; margin-top:14px }
.coach-quick-actions button { padding:8px 12px; border-radius:12px; background: rgba(255,255,255,0.06); color:white; border:1px solid rgba(255,255,255,0.04); font-weight:700 }

/* Larger trajectory hero tweaks */
.trajectory-hero-card.large { padding: 42px }
.trajectory-chart-wrapper svg { filter: drop-shadow(0 10px 30px rgba(6,182,212,0.08)); }

/* Trajectory line draw animation and glow */
.trajectory-hero-card.large .recharts-line-curve {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 1400ms forwards ease-out;
  filter: drop-shadow(0 14px 40px rgba(6,182,212,0.14));
}

.trajectory-hero-card.large .recharts-line-curve:nth-of-type(2) {
  animation-delay: 200ms;
  filter: drop-shadow(0 14px 48px rgba(124,58,237,0.14));
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* active dot pulse */
.trajectory-hero-card.large .recharts-dot {
  transition: transform 220ms ease, opacity 220ms ease;
}
.trajectory-hero-card.large .recharts-active-dot {
  transform-origin: center;
  animation: dot-pulse 1600ms infinite ease-in-out;
  filter: drop-shadow(0 8px 20px rgba(255,255,255,0.06));
}
@keyframes dot-pulse {
  0% { transform: scale(1); opacity: 1 }
  50% { transform: scale(1.18); opacity: 0.9 }
  100% { transform: scale(1); opacity: 1 }
}

/* Make the tooltip and axes more subtle against cinematic background */
.trajectory-hero-card.large .recharts-cartesian-axis-tick tspan,
.trajectory-hero-card.large .recharts-cartesian-axis-label {
  fill: rgba(255,255,255,0.85);
}



/* Prevent home-hero styles from leaking into header/dev menu
   Scoped override for the header's Dev Intelligence link so
   home-specific rules can't unintentionally change it. */
.topbar .model-header-actions .dev-intelligence-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  min-width: max-content;
  padding: 0 10px;
  border: 1px solid rgba(98, 228, 209, 0.22);
  border-radius: var(--radius-xs);
  color: rgba(98, 228, 209, 0.85);
  background: rgba(98, 228, 209, 0.05);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 170ms ease;
}

.topbar .model-header-actions .dev-intelligence-link:hover {
  border-color: rgba(98, 228, 209, 0.4);
  color: var(--cyan);
  background: rgba(98, 228, 209, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.why-card-detail {
  padding: 0 26px 26px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.why-card-detail p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
}

.why-action {
  padding: 12px 18px;
  color: white;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.trajectory-block {
  padding-top: 20px;
  padding-bottom: 40px;
}

.trajectory-hero-card {
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.2);
  padding: 32px;
}

.trajectory-hero-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.trajectory-hero-small {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
}

.trajectory-hero-title {
  margin: 8px 0 0;
  font-size: clamp(2rem, 3vw, 3rem);
  color: white;
  line-height: 1.04;
}

.trajectory-hero-legends {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.trajectory-path-chip {
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.9rem;
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.trajectory-path-chip.current {
  background: rgba(248, 113, 28, 0.18);
}

.trajectory-path-chip.recommended {
  background: rgba(34, 197, 94, 0.18);
}

.trajectory-chart-wrapper {
  border-radius: 30px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.98);
}

.trajectory-number-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.trajectory-number-card {
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.trajectory-number-card p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.trajectory-number-card strong {
  font-size: 2rem;
  color: white;
}

.future-you-hero {
  border-radius: 32px;
  padding: 32px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

.future-you-hero-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  align-items: center;
}

.future-you-hero-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}

.future-you-hero-title {
  margin: 14px 0 0;
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: white;
}

.future-you-hero-copy {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
  line-height: 1.75;
}

.future-you-hero-visual {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.future-you-orb-shell {
  position: relative;
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.future-you-orb-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 60px rgba(59, 130, 246, 0.18);
  opacity: 0.65;
  pointer-events: none;
}

.future-you-orb {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.4), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 12px rgba(59, 130, 246, 0.08);
  animation: future-you-pulse 2.2s ease-in-out infinite alternate;
}

.future-you-orb-value {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 900;
  color: white;
}

.future-you-orb-label {
  margin-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.future-you-orb-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  max-width: 280px;
}

.future-you-gap-grid {
  margin-top: 28px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.future-you-gap-card {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  min-height: 126px;
  display: grid;
  place-items: center;
}

.future-you-gap-card p {
  margin: 0;
}

.future-you-summary {
  margin-top: 26px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 940px) {
  .future-you-hero-grid,
  .future-you-summary {
    grid-template-columns: 1fr;
  }

  .future-you-gap-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .future-you-orb {
    width: 150px;
    height: 150px;
  }

  .future-you-orb-value {
    font-size: 3rem;
  }

  .future-you-hero-copy {
    max-width: 100%;
  }
}

.future-you-gap-card p {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.future-you-gap-card strong {
  display: block;
  margin-top: 10px;
  font-size: 2rem;
  color: white;
}

.future-you-gap-card.positive strong {
  color: #84cc16;
}

.future-you-gap-card.negative strong {
  color: #fb7185;
}

.future-you-summary {
  margin-top: 26px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.future-you-summary-item {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.future-you-summary-item span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.future-you-summary-item strong {
  margin-top: 8px;
  display: block;
  font-size: 1.1rem;
  color: white;
}

@keyframes future-you-pulse {
  from {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.08);
  }
  to {
    transform: scale(1.04);
    box-shadow: 0 0 0 18px rgba(59, 130, 246, 0.05);
  }
}

@media (max-width: 940px) {
  .future-you-hero-grid,
  .future-you-summary {
    grid-template-columns: 1fr;
  }

  .future-you-gap-grid {
    grid-template-columns: 1fr;
  }
}

.future-you-frame {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.future-avatar-shell {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(6, 182, 212, 0.2), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(124, 58, 237, 0.18), transparent 30%),
    rgba(15, 23, 42, 0.95);
  display: grid;
  place-items: center;
}

.future-avatar-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(16, 185, 129, 0.18), transparent 30%);
}

.future-avatar-core {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 34px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.future-avatar-name {
  font-size: 1.7rem;
  font-weight: 900;
  color: white;
}

.future-avatar-age {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
}

.future-you-details {
  display: grid;
  gap: 16px;
}

.future-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.future-metric span {
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  font-size: 0.82rem;
}

.future-metric strong {
  font-size: 1.4rem;
  color: white;
}

.action-card {
  display: grid;
  gap: 24px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.action-copy {
  display: grid;
  gap: 14px;
}

.action-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  color: white;
}

.action-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  max-width: 720px;
  line-height: 1.7;
}

.action-right {
  display: grid;
  gap: 18px;
}

.action-cta {
  padding: 18px 24px;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  color: white;
  font-size: 1rem;
}

.action-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.impact-pill {
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
}

.impact-pill span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.impact-pill strong {
  font-size: 1.4rem;
}

.command-center-grid,
.digital-twin-grid,
.mri-grid,
.mission-grid {
  display: grid;
  gap: 18px;
}

.command-center-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.digital-twin-grid {
  grid-template-columns: 1.15fr minmax(280px, 1fr);
  align-items: start;
}

.mri-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mission-grid {
  grid-template-columns: 1.35fr minmax(320px, 1fr);
}

.bas-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.bas-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.bas-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.bas-card-header span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bas-card-header strong {
  font-size: 1.85rem;
  color: white;
}

.bas-card-band {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.bas-card-bar {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.bas-card-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.single-insight-section {
  padding: 0;
  border: none;
  background: transparent;
}

.single-insight-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.single-insight-title-group h2 {
  margin: 0;
  font-size: 2.2rem;
}

.single-insight-subtitle {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.7;
}

.single-insight-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.12);
  color: #a7f3d0;
  font-weight: 700;
}

.insight-card-critical {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.14), rgba(15, 23, 42, 0.96));
}

.insight-card-high {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(15, 23, 42, 0.96));
}

.insight-card-medium {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(15, 23, 42, 0.96));
}

.insight-card-low {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.96));
}

.single-insight-hero {
  padding: 32px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.single-insight-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.single-insight-category,
.single-insight-priority {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
}

.single-insight-category {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

.single-insight-priority {
  background: rgba(255, 255, 255, 0.08);
}

.single-insight-headline {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.05;
  color: white;
}

.single-insight-explanation,
.single-insight-action-text,
.single-insight-item-text,
.single-insight-item-action {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
}

.single-insight-signal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.76);
}

.single-insight-action-card {
  padding: 24px;
  margin-top: 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.single-insight-action-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.single-insight-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.single-insight-commit-btn,
.single-insight-ack-btn {
  padding: 14px 18px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.single-insight-commit-btn {
  background: linear-gradient(90deg, #22c55e, #06b6d4);
  color: white;
}

.single-insight-ack-btn {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.single-insight-toggle {
  margin-top: 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  color: white;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  cursor: pointer;
}

.single-insight-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.single-insight-item {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.single-insight-item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.single-insight-item-headline {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: white;
}

.single-insight-item-signal {
  display: inline-flex;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.74);
}

.single-insight-footer-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(13, 19, 34, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a7f3d0;
}

.insight-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.insight-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.cinematic-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

@media (max-width: 1140px) {
  .command-center-grid,
  .mri-grid,
  .mission-grid,
  .digital-twin-grid {
    grid-template-columns: 1fr;
  }
  .bas-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-mini-glass-row,
  .today-grid,
  .why-grid,
  .trajectory-number-row,
  .action-impact-grid,
  .future-you-frame,
  .command-center-grid,
  .mri-grid,
  .mission-grid,
  .digital-twin-grid,
  .insight-rail {
    grid-template-columns: 1fr;
  }

  .future-you-frame {
    grid-template-columns: 1fr;
  }
}

.floating-coach {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  display: grid;
  gap: 14px;
  align-items: end;
}

.coach-button {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #06b6d4, #7c3aed);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(6, 182, 212, 0.24);
  cursor: pointer;
}

.coach-suggestions {
  display: grid;
  gap: 10px;
  padding: 16px;
  width: 240px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

.coach-suggestion-button {
  border: none;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  text-align: left;
  cursor: pointer;
}

.coach-shell {
  min-height: 100vh;
  padding: 32px 24px;
  background: radial-gradient(circle at top left, rgba(0, 255, 255, 0.12), transparent 22%),
    radial-gradient(circle at bottom right, rgba(156, 39, 176, 0.14), transparent 18%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

.coach-start-page {
  display: grid;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.coach-start-grid {
  display: grid;
  gap: 28px;
}

.coach-active-session {
  display: grid;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.coach-context-panel {
  padding: 26px;
  display: grid;
  gap: 18px;
}

.coach-context-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coach-context-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.18), rgba(128, 0, 128, 0.16));
  color: white;
}

.coach-context-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: white;
}

.coach-context-subtitle {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.coach-context-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.coach-context-card {
  padding: 18px;
  display: grid;
  gap: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-context-label,
.coach-context-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
}

.coach-context-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: white;
}

.coach-context-summary {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.98rem;
  line-height: 1.7;
}

.coach-start-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0 0;
}

.coach-icon-box {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(128, 0, 128, 0.2));
  color: white;
}

.coach-page-title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.02;
  font-weight: 900;
  color: white;
}

.coach-page-subtitle {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.8);
  max-width: 680px;
  font-size: 1rem;
}

.coach-start-card,
.coach-session-bar,
.coach-settings-panel,
.coach-chat-main,
.coach-recommendations-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
}

.coach-start-card {
  padding: 28px;
  display: grid;
  gap: 24px;
}

.coach-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.coach-card-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.68);
}

.coach-card-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: white;
  line-height: 1.05;
}

.coach-topic-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.coach-topic-button {
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: white;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.coach-topic-button:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 255, 255, 0.2);
  background: rgba(0, 255, 255, 0.08);
}

.coach-topic-emoji {
  font-size: 1.6rem;
}

.coach-topic-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.coach-topic-desc {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.93rem;
  line-height: 1.5;
}

.coach-main-button {
  width: fit-content;
  min-width: 240px;
  padding: 16px 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.95), rgba(128, 0, 128, 0.9));
  color: white;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coach-main-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0, 255, 255, 0.12);
}

.coach-stat-card-group {
  padding: 28px;
}

.coach-stat-heading {
  margin: 0 0 18px;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
}

.coach-stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.coach-stat-card {
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-stat-value {
  font-size: 2.15rem;
  font-weight: 900;
  color: white;
}

.coach-stat-accent {
  color: #f97316;
}

.coach-stat-label {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.coach-session-bar {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.coach-session-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.coach-session-bar-left h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.coach-session-bar-actions {
  display: flex;
  gap: 12px;
}

.coach-icon-button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.coach-icon-button:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.coach-end-button {
  color: #fee2e2;
}

.coach-settings-panel {
  padding: 24px;
}

.coach-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.coach-settings-grid label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 700;
}

.coach-settings-grid select {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  padding: 12px 14px;
  font: inherit;
}

.coach-save-button {
  width: fit-content;
}

.coach-chat-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  align-items: start;
}

.coach-chat-main {
  display: grid;
  gap: 20px;
  min-height: 600px;
}

.coach-messages-wrapper {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-message-row {
  display: flex;
}

.coach-message-row-user {
  justify-content: flex-end;
}

.coach-message-row-coach {
  justify-content: flex-start;
}

.coach-message {
  max-width: 80%;
  padding: 18px 20px;
  border-radius: 24px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.coach-message-user {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.9), rgba(128, 0, 128, 0.9));
}

.coach-message-error {
  background: rgba(244, 63, 94, 0.16);
  color: #fee2e2;
  border-color: rgba(248, 113, 113, 0.28);
}

.coach-message-loading {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
}

.coach-message span {
  display: block;
  margin-top: 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.coach-message-loader {
  animation: spin 1s linear infinite;
}

.coach-input-pane {
  padding: 20px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-input-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.coach-text-input {
  width: 100%;
  height: 56px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: white;
  background: rgba(255, 255, 255, 0.04);
}

.coach-text-input:focus {
  outline: none;
  border-color: rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.08);
}

.coach-submit-button,
.coach-recommend-button {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coach-submit-button {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.96), rgba(128, 0, 128, 0.92));
  color: white;
}

.coach-recommend-button {
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  color: white;
}

.coach-submit-button:hover,
.coach-recommend-button:hover {
  transform: translateY(-1px);
}

.coach-input-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.coach-link-button {
  border: none;
  background: none;
  color: rgba(0, 255, 255, 0.9);
  cursor: pointer;
  font-size: 0.9rem;
}

.coach-link-button:hover {
  text-decoration: underline;
}

.coach-recommendations-panel {
  padding: 24px;
  min-width: 300px;
  display: grid;
  gap: 18px;
}

.coach-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.coach-sidebar-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.coach-recommend-list {
  display: grid;
  gap: 14px;
}

.coach-recommend-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-recommend-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.coach-recommend-card-top p {
  margin: 0;
  font-size: 0.96rem;
  color: white;
}

.coach-recommend-meta {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}

.coach-select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 14px;
  color: white;
}

@media (max-width: 1120px) {
  .coach-chat-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .coach-shell {
    padding: 20px 16px;
  }

  .coach-start-header,
  .coach-session-bar,
  .coach-chat-layout,
  .coach-input-form {
    flex-direction: column;
    align-items: stretch;
  }

  .coach-session-bar-left {
    gap: 10px;
  }

  .coach-input-form {
    grid-template-columns: 1fr;
  }

  .coach-submit-button,
  .coach-recommend-button {
    width: 100%;
    height: 52px;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .coach-start-card,
  .coach-settings-panel,
  .coach-chat-main,
  .coach-recommendations-panel {
    border-radius: 22px;
    padding: 20px;
  }
}

.home-hero {
  grid-template-columns: 1fr;
  min-height: auto;
}

.hero-mini-glass-row,
.today-grid,
.why-grid,
.trajectory-number-row,
.action-impact-grid,
.future-you-frame {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .home-hero {
    padding: 28px 16px;
  }

  .action-card,
  .trajectory-hero-card,
  .future-you-hero,
  .glass-panel,
  .why-card {
    border-radius: 22px;
  }
}

/* ── Story Hero ─ */
.story-hero {
  display: grid;
  gap: 32px;
  text-align: center;
}

.story-header {
  display: grid;
  gap: 8px;
}

.story-title {
  color: var(--ink-0);
  font-size: clamp(28px, 7vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.story-subtitle {
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
}

/* Score Display */
.score-hero {
  display: grid;
  gap: 20px;
  align-items: center;
}

.score-display {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-items: center;
}

.score-number {
  color: var(--cyan);
  font-size: clamp(72px, 15vw, 120px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(135deg, var(--cyan), #a8e6e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-label {
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.score-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 50px;
  background: rgba(98, 228, 209, 0.08);
  border: 1px solid rgba(98, 228, 209, 0.15);
  width: fit-content;
  margin: 0 auto;
}

.score-change-value {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
}

.emotional-narrative {
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  margin-top: 8px;
}

/* ── Sections ─ */
.story-section {
  display: grid;
  gap: 16px;
}

.section-title {
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(98, 228, 209, 0.2);
}

/* Reality Card */
.reality-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.04), transparent);
}

.reality-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.reality-item {
  display: grid;
  gap: 4px;
  text-align: center;
}

.reality-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reality-value {
  color: var(--ink-0);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.reality-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  grid-column: 1 / -1;
}

.reality-insight {
  display: flex;
  gap: 12px;
  align-items: start;
  padding: 0;
}

.insight-label {
  display: block;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.insight-value {
  display: block;
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

/* Reasons List */
.reasons-list {
  display: grid;
  gap: 12px;
}

.reason-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: all 0.2s ease;
}

.reason-card:hover {
  border-color: rgba(98, 228, 209, 0.15);
  background: rgba(98, 228, 209, 0.05);
}

.reason-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.reason-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(98, 228, 209, 0.1);
}

.reason-content {
  display: grid;
  gap: 4px;
  flex: 1;
}

.reason-label {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 700;
}

.reason-impact {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.reason-detail {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: slideDown 200ms ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reason-detail p {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.reason-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(98, 228, 209, 0.1);
  border: 1px solid rgba(98, 228, 209, 0.2);
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reason-action:hover {
  background: rgba(98, 228, 209, 0.15);
  border-color: rgba(98, 228, 209, 0.3);
}

/* Future Card */
.future-card {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(98, 228, 209, 0.12);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.04), transparent);
}

.future-paths {
  display: grid;
  gap: 20px;
}

.future-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.future-chart-copy {
  color: var(--ink-2);
  font-size: 13px;
  margin: 4px 0 0 0;
}

.future-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-dot.current {
  background: #fb923c;
}

.legend-dot.recommended {
  background: #22d3ee;
}

.future-chart-wrapper {
  min-height: 240px;
}

.path-label {
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.path-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.path-point {
  display: grid;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.path-year {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}

.path-score {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.path-score.current {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
}

.path-score.recommended {
  background: rgba(98, 228, 209, 0.1);
  color: var(--cyan);
}

.future-note {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

/* Twin Card */
.twin-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(156, 39, 176, 0.15);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05), transparent);
}

.twin-label {
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.twin-metrics {
  display: grid;
  gap: 12px;
}

.twin-metric {
  display: flex;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.twin-metric-label {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.twin-metric-value {
  display: block;
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
}

/* Action Card */
.action-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 2px solid rgba(98, 228, 209, 0.2);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(98, 228, 209, 0.08), transparent);
}

.action-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-text {
  color: var(--ink-0);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.action-impacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.impact-item {
  display: grid;
  gap: 4px;
  text-align: center;
}

.impact-metric {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.impact-change {
  color: var(--ink-0);
  font-size: 16px;
  font-weight: 800;
}

.impact-change.positive {
  color: var(--cyan);
}

.impact-change.negative {
  color: rgb(239, 68, 68);
}

.action-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--cyan);
  border: none;
  color: var(--bg);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  justify-self: start;
}

.action-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(98, 228, 209, 0.2);
}

/* Floating Coach */
.floating-coach {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
}

.coach-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cyan);
  border: none;
  color: var(--bg);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(98, 228, 209, 0.3);
  transition: all 0.2s ease;
}

.coach-button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(98, 228, 209, 0.4);
}

.coach-button:active {
  transform: scale(0.95);
}

/* ── Responsive Design ─ */
@media (max-width: 768px) {
  .story-home {
    gap: 32px;
    padding: 32px 16px;
  }

  .story-title {
    font-size: 24px;
  }

  .story-subtitle {
    font-size: 14px;
  }

  .score-number {
    font-size: 64px;
  }

  .section-title {
    font-size: 18px;
  }

  .reality-row {
    grid-template-columns: 1fr;
  }

  .path-scores {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .action-impacts {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .impact-metric {
    font-size: 10px;
  }

  .impact-change {
    font-size: 14px;
  }

  .floating-coach {
    bottom: 16px;
    right: 16px;
  }

  .coach-button {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .story-home {
    gap: 24px;
    padding: 24px 12px;
  }

  .story-title {
    font-size: 20px;
  }

  .story-subtitle {
    font-size: 13px;
  }

  .score-number {
    font-size: 48px;
  }

  .section-title {
    font-size: 16px;
    padding-bottom: 6px;
  }

  .reality-card {
    padding: 16px;
    gap: 8px;
  }

  .reality-item {
    gap: 3px;
  }

  .reality-value {
    font-size: 20px;
  }

  .path-scores {
    gap: 6px;
  }

  .path-score {
    padding: 6px 4px;
    font-size: 14px;
  }

  .action-card {
    padding: 16px;
    gap: 12px;
  }

  .action-text {
    font-size: 16px;
  }

  .action-impacts {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px;
  }

  .impact-change {
    font-size: 13px;
  }

  .twin-metric {
    padding: 10px;
    gap: 8px;
  }
}

/* ══════════════════════════════════════════════
   PROFESSIONAL VISUAL FLOW REFRESH
   Final override layer for the app module. Keeps the ARTH.OS base palette.
   ══════════════════════════════════════════════ */

html {
  font-size: 17px;
}

body,
.app-shell {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

.topbar {
  grid-template-columns: minmax(210px, 0.25fr) minmax(420px, 1fr) minmax(460px, 0.58fr);
  min-height: 76px;
  gap: clamp(14px, 2vw, 24px);
  padding: 12px clamp(18px, 4vw, 56px);
  border-bottom-color: rgba(0, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.98), rgba(5, 7, 19, 0.94)),
    var(--bg);
}

.brand {
  gap: 4px;
}

.logo-word {
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 0.95;
}

.brand small {
  font-size: 10px;
  line-height: 1.2;
}

.nav-links {
  gap: 6px;
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
}

.nav-links a {
  min-height: 40px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 800;
}

.model-header-actions {
  gap: 8px;
}

.header-sync,
.auth-header-user,
.dev-intelligence-link,
.model-start-btn {
  font-size: 13px;
  line-height: 1.2;
}

.header-sync {
  min-height: 38px;
  max-width: 180px;
  padding: 0 12px;
}

.model-icon-btn,
.model-avatar-btn {
  width: 42px;
  height: 42px;
}

.model-start-btn {
  min-height: 42px;
  padding: 0 18px;
}

.auth-header-user,
.topbar .model-header-actions .dev-intelligence-link {
  min-height: 42px;
  padding: 0 12px;
}

.app-nav-tabs {
  top: 76px;
  min-height: 58px;
  gap: 8px;
  padding: 9px clamp(12px, 3vw, 28px);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-color: rgba(0, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.96), rgba(5, 7, 19, 0.92)),
    var(--bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.app-nav-tab {
  min-height: 42px;
  gap: 9px;
  padding: 9px 13px;
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
  font-weight: 800;
}

.app-nav-tab-label {
  font-size: 14px;
  font-weight: 850;
}

.app-nav-tab svg {
  width: 17px;
  height: 17px;
}

/* ══════════════════════════════════════════════
   DESKTOP NAVIGATION WRAP FIX
   Ensures nav items wrap to 2 lines on 1024px+ screens
   ══════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .topbar {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    gap: 0 !important;
  }

  .brand {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    gap: 4px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: none !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    width: 100% !important;
    justify-content: flex-start;
  }

  .nav-links a {
    flex: 0 0 auto !important;
    margin: 4px 4px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    white-space: nowrap;
  }

  .model-header-actions {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
  }

  .page-shell-main {
    padding-top: 160px !important;
  }

  .nav-scroll-btn {
    display: none !important;
  }
}

.app-nav-developer-menu {
  top: calc(76px + 58px);
  width: min(720px, calc(100% - 24px));
  margin: 10px auto 16px;
  padding: 14px;
  border-color: rgba(0, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.98), rgba(5, 7, 19, 0.98)),
    var(--bg-2);
}

.dev-menu-title {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.dev-menu-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dev-menu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  min-height: 64px;
  padding: 12px;
  font-size: 14px;
}

.dev-menu-item small {
  grid-column: 2;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.home-hero {
  display: block;
  min-height: auto;
  padding: 0 0 clamp(64px, 7vw, 112px);
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 255, 255, 0.11), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(128, 0, 128, 0.16), transparent 25%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 48%, var(--bg) 100%);
}

.home-hero::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.66), transparent 70%);
}

.cinematic-hero {
  width: min(1480px, calc(100% - 40px));
  min-height: clamp(560px, calc(100vh - 136px), 760px);
  margin: 0 auto clamp(26px, 4vw, 48px);
  padding: clamp(40px, 6vw, 84px);
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.07), transparent 32%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.9), rgba(5, 7, 19, 0.96));
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cinematic-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr);
  gap: clamp(28px, 5vw, 76px);
  max-width: none;
  min-height: inherit;
}

.cinematic-eyebrow,
.section-eyebrow,
.glass-panel-label,
.bas-card-header span,
.single-insight-badge,
.premium-metric-kicker,
.flow-kpi-card span,
.report-menu-index {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-transform: uppercase;
}

.cinematic-score .score-number {
  font-family: var(--display);
  font-size: clamp(86px, 12vw, 168px);
  line-height: 0.86;
}

.cinematic-metrics {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  font-size: 18px;
}

.metric-delta,
.metric-percent {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgba(0, 255, 255, 0.16);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.045);
}

.cinematic-cta-row,
.hero-actions {
  gap: 12px;
}

.hero-cta,
.hero-secondary,
.action-cta,
.reason-action,
.single-insight-commit-btn,
.single-insight-ack-btn,
.salary-roast-tool-button,
.salary-roast-share-button,
.salary-roast-copy-button {
  min-height: 48px;
  padding: 13px 20px;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.hero-cta {
  background: var(--grad-accent);
}

.hero-secondary {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.075);
}

.score-ring-large {
  --size: clamp(250px, 28vw, 360px);
  background: conic-gradient(var(--cyan) calc(var(--score) * 1%), rgba(255, 255, 255, 0.06) 0 100%);
}

.score-number-hero-large {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 86px);
}

.score-label-large {
  color: var(--ink-1);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.home-block {
  width: min(1320px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 58px) 0;
}

.section-header {
  grid-template-columns: minmax(0, 0.52fr) minmax(320px, 0.48fr);
  gap: 12px 36px;
  align-items: end;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.12);
}

.section-eyebrow {
  grid-column: 1 / -1;
  color: var(--cyan);
}

.section-title {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--ink-0);
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
}

.section-copy {
  max-width: 70ch;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.7;
}

.command-center-grid,
.mri-grid,
.bas-breakdown-grid,
.insight-rail {
  gap: 16px;
}

.glass-panel,
.bas-card,
.insight-card,
.single-insight-hero,
.summary-card,
.premium-metric-tile,
.result-card,
.panel,
.consequence-forecast-card,
.interventions-prescription-card,
.strategic-metrics-card,
.single-action-card,
.trait-matrix-card {
  border-color: rgba(0, 255, 255, 0.13);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.035), transparent 36%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.045), transparent 48%),
    rgba(11, 18, 32, 0.72);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.glass-panel {
  min-height: 190px;
  padding: clamp(22px, 2.5vw, 32px);
}

.glass-panel-value {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
}

.glass-panel .section-copy,
.insight-card p,
.single-insight-explanation,
.single-insight-action-text,
.single-insight-item-text,
.single-insight-item-action {
  font-size: 16px;
}

.flow-report-hero,
.flow-report-grid,
.flow-insights-section {
  width: min(1420px, calc(100% - 40px));
  font-family: var(--body);
}

.flow-report-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 4vw, 48px);
}

.flow-report-copy {
  min-height: 360px;
  padding: clamp(28px, 4vw, 54px);
}

.flow-report-copy h1 {
  max-width: 980px;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
}

.flow-report-copy p {
  max-width: 82ch;
  font-size: 18px;
}

.report-menu-flow {
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.report-menu-step {
  min-height: 108px;
  padding: 12px;
}

.report-menu-copy strong {
  font-size: 16px;
}

.report-menu-copy small {
  font-size: 13px;
}

.flow-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flow-kpi-card {
  min-height: 168px;
}

.flow-kpi-card strong,
.premium-metric-value {
  font-family: var(--display);
}

.flow-report-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.32fr);
  gap: 28px;
}

.summary-main-column {
  gap: 26px;
}

.summary-main-column > .summary-card,
.summary-main-column > .collapsible-panel,
.summary-main-column > .premium-report-block,
.summary-main-column > section,
.summary-main-column > div {
  margin-left: 42px;
}

.summary-main-column::before {
  left: 16px;
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.38), rgba(128, 0, 128, 0.24), transparent);
}

.summary-main-column > .summary-card::before,
.summary-main-column > .collapsible-panel::before,
.summary-main-column > .premium-report-block::before,
.summary-main-column > section::before,
.summary-main-column > div::before {
  left: -42px;
  width: 32px;
  height: 32px;
  border-color: rgba(0, 255, 255, 0.28);
}

.premium-report-section-title,
.premium-report-block-title,
.single-insight-title,
.panel-heading h2,
.result-heading h2,
.single-insight-headline {
  font-family: var(--display);
}

.premium-report-block-subtitle,
.premium-metric-desc,
.premium-metric-longtext,
.action-reason,
.archetype-guidance,
.microgola-text,
.narrative-copy,
.forecast-card-note,
.card-note,
.blindspot-insight {
  font-size: 16px;
}

.app-nav-dev-toggle.dev-active,
.app-nav-tab.active,
.app-nav-tab.primary.active {
  border-color: rgba(0, 255, 255, 0.32);
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.12), rgba(128, 0, 128, 0.08)),
    rgba(255, 255, 255, 0.04);
}

@media (min-width: 1281px) {
  .nav-links {
    display: flex;
  }

  .app-nav-tabs {
    display: none;
  }
}

@media (max-width: 1280px) {
  html {
    font-size: 16px;
  }

  .topbar {
    grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  }

  .nav-links {
    display: flex;
    width: 100%;
  }

  .app-nav-tabs {
    display: none;
  }

  .model-header-actions {
    overflow-x: auto;
    justify-content: flex-end;
    scrollbar-width: none;
  }

  .model-header-actions::-webkit-scrollbar {
    display: none;
  }

  .cinematic-content,
  .section-header,
  .flow-report-grid {
    grid-template-columns: 1fr;
  }

  .cinematic-hero {
    min-height: auto;
  }

  .cinematic-right {
    width: auto;
  }

  .flow-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html {
    font-size: 16px;
  }

  .topbar {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 10px;
    padding: 12px;
  }

  .brand {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
  }

  .brand small {
    display: inline;
    max-width: 120px;
    text-align: right;
  }

  .nav-links {
    display: flex;
    overflow-x: auto;
    padding: 4px 0;
  }

  .model-header-actions {
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 2px;
  }

  .header-sync,
  .auth-header-user,
  .topbar .model-header-actions .dev-intelligence-link {
    min-height: 40px;
  }

  .model-icon-btn,
  .model-avatar-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }

  .model-start-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .app-nav-tabs {
    top: 117px;
    padding: 8px 12px;
  }

  .app-nav-tab {
    min-width: 132px;
    min-height: 44px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .app-nav-developer-menu {
    top: calc(117px + 58px);
  }

  .dev-menu-items {
    grid-template-columns: 1fr;
  }

  .home-hero,
  .flow-report-hero,
  .flow-report-grid,
  .flow-insights-section,
  .assessment-summary-grid {
    width: 100%;
  }

  .cinematic-hero,
  .home-block,
  .flow-report-hero,
  .flow-report-grid,
  .flow-insights-section {
    width: calc(100% - 24px);
  }

  .cinematic-hero,
  .flow-report-copy,
  .flow-kpi-strip,
  .summary-card,
  .premium-metric-tile,
  .result-card,
  .panel {
    border-radius: var(--radius-sm);
  }

  .cinematic-hero {
    padding: 28px 18px;
  }

  .cinematic-score .score-number {
    font-size: clamp(76px, 24vw, 116px);
  }

  .cinematic-metrics,
  .cinematic-cta-row,
  .hero-actions {
    align-items: stretch;
  }

  .metric-delta,
  .metric-percent,
  .hero-cta,
  .hero-secondary {
    width: 100%;
  }

  .score-ring-large {
    --size: min(78vw, 280px);
  }

  .section-header {
    display: grid;
    gap: 10px;
  }

  .section-title,
  .flow-report-copy h1 {
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.05;
  }

  .section-copy,
  .flow-report-copy p,
  .premium-report-block-subtitle,
  .premium-metric-desc,
  .premium-metric-longtext {
    font-size: 16px;
  }

  .command-center-grid,
  .mri-grid,
  .bas-breakdown-grid,
  .mission-grid,
  .digital-twin-grid,
  .insight-rail,
  .flow-kpi-strip,
  .diagnostics-grid,
  .decision-section-grid {
    grid-template-columns: 1fr;
  }

  .report-menu-flow {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .report-menu-step {
    min-height: 84px;
  }

  .flow-kpi-card,
  .glass-panel {
    min-height: auto;
  }

  .summary-main-column::before,
  .summary-main-column > .summary-card::before,
  .summary-main-column > .collapsible-panel::before,
  .summary-main-column > .premium-report-block::before,
  .summary-main-column > section::before,
  .summary-main-column > div::before {
    display: none;
  }

  .summary-main-column > .summary-card,
  .summary-main-column > .collapsible-panel,
  .summary-main-column > .premium-report-block,
  .summary-main-column > section,
  .summary-main-column > div {
    margin-left: 0;
  }

  .floating-coach {
    right: 14px;
    bottom: 14px;
  }

  .coach-quick-actions {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand {
    align-items: center;
  }

  .brand small {
    display: none;
  }

  .logo-word {
    font-size: 30px;
  }

  .app-nav-tabs {
    top: 105px;
  }

  .app-nav-developer-menu {
    top: calc(105px + 58px);
  }

  .cinematic-hero,
  .home-block,
  .flow-report-hero,
  .flow-report-grid,
  .flow-insights-section {
    width: calc(100% - 18px);
  }

  .flow-report-copy,
  .glass-panel,
  .bas-card,
  .insight-card,
  .summary-card,
  .premium-metric-tile,
  .result-card,
  .panel {
    padding: 18px;
  }

  .premium-report-section-title,
  .premium-report-block-title,
  .single-insight-title,
  .panel-heading h2,
  .result-heading h2 {
    font-size: 22px;
  }
}

/* ══════════════════════════════════════════════
   PREMIUM PRODUCT REDESIGN OVERRIDES
   ARTH.OS visual system: deep navy, purple, cyan, emerald, white.
   ══════════════════════════════════════════════ */

:root {
  --premium-bg: #050713;
  --premium-bg-raised: rgba(11, 18, 32, 0.88);
  --premium-bg-soft: rgba(255, 255, 255, 0.045);
  --premium-line: rgba(0, 255, 255, 0.14);
  --premium-line-soft: rgba(255, 255, 255, 0.09);
  --premium-glow-cyan: 0 24px 90px rgba(0, 255, 255, 0.14);
  --premium-glow-purple: 0 24px 90px rgba(128, 0, 128, 0.16);
}

.topbar {
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
  min-height: 74px;
  align-items: center;
}

.nav-links {
  flex-wrap: nowrap;
  align-items: center;
  min-height: 48px;
  max-height: 54px;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-links a {
  flex: 0 0 auto;
  min-height: 36px;
}

.model-header-actions {
  flex-wrap: nowrap;
  max-width: min(100%, 620px);
  overflow-x: auto;
  overflow-y: hidden;
}

.home-hero {
  isolation: isolate;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(circle at calc(50% + (var(--mx, 0) * 8%)) 10%, rgba(0, 255, 255, 0.13), transparent 30%),
    radial-gradient(circle at calc(88% + (var(--mx, 0) * -6%)) 18%, rgba(128, 0, 128, 0.18), transparent 28%),
    linear-gradient(180deg, var(--premium-bg) 0%, #0b1220 44%, var(--premium-bg) 100%);
  background-size:
    72px 72px,
    72px 72px,
    auto,
    auto,
    auto;
}

.home-hero::after {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 44vh;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(0, 255, 255, 0.035));
  pointer-events: none;
}

.cinematic-hero.big-reveal {
  display: grid;
  width: min(1480px, calc(100% - 40px));
  min-height: clamp(650px, calc(100vh - 126px), 820px);
  margin: 0 auto clamp(24px, 4vw, 54px);
  padding: clamp(36px, 6vw, 84px);
  place-items: center;
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.085), transparent 34%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.92), rgba(5, 7, 19, 0.98));
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.cinematic-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 82%);
  pointer-events: none;
}

.cinematic-hero.big-reveal .cinematic-mesh {
  background:
    radial-gradient(900px circle at 12% 18%, rgba(0, 255, 255, 0.16), transparent 42%),
    radial-gradient(820px circle at 92% 20%, rgba(128, 0, 128, 0.2), transparent 42%),
    radial-gradient(720px circle at 68% 88%, rgba(0, 128, 0, 0.13), transparent 42%);
  filter: blur(26px) saturate(1.15);
}

.cinematic-hero.big-reveal .cinematic-content {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.cinematic-system-line {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.cinematic-title {
  max-width: 980px;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(3.25rem, 6.4vw, 6.9rem);
  font-weight: 950;
  line-height: 0.92;
}

.cinematic-lede {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 650;
  line-height: 1.72;
}

.cinematic-hero.big-reveal .metric-delta,
.cinematic-hero.big-reveal .metric-percent {
  gap: 9px;
  min-height: 46px;
  border-color: rgba(0, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.055);
}

.cinematic-hero.big-reveal .cinematic-cta-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
}

.cinematic-hero.big-reveal .hero-cta,
.cinematic-hero.big-reveal .hero-secondary {
  gap: 9px;
  min-height: 52px;
  border-radius: 8px;
}

.cinematic-hero.big-reveal .hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.cinematic-hero.big-reveal .cinematic-right {
  position: relative;
  width: 100%;
  min-width: 0;
}

.cinematic-hero.big-reveal .score-ring-large {
  --size: min(34vw, 390px);
  min-width: 260px;
  border: 1px solid rgba(0, 255, 255, 0.24);
  background:
    conic-gradient(var(--cyan) calc(var(--score) * 1%), rgba(255, 255, 255, 0.065) 0 100%);
  box-shadow:
    var(--premium-glow-cyan),
    var(--premium-glow-purple),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.cinematic-hero.big-reveal .score-inner-large {
  display: grid;
  width: calc(var(--size) - 78px);
  height: calc(var(--size) - 78px);
  gap: 8px;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.94), rgba(5, 7, 19, 0.98)),
    var(--premium-bg);
}

.hero-signal-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 470px);
  margin: 18px auto 0;
}

.hero-signal-stack > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(0, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.hero-signal-stack span {
  display: block;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-signal-stack strong {
  display: block;
  min-width: 0;
  margin-top: 7px;
  overflow: hidden;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-block {
  position: relative;
}

.home-block::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0.68;
}

.section-header {
  border-bottom-color: rgba(0, 255, 255, 0.15);
}

.section-eyebrow {
  color: rgba(0, 255, 255, 0.86);
}

.command-center-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mri-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bas-breakdown-grid,
.insight-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.digital-twin-grid,
.mission-grid,
.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.glass-panel,
.bas-card,
.insight-card,
.single-insight-section,
.single-insight-hero,
.result-card,
.panel,
.future-you-card,
.trajectory-hero-card,
.single-action-card {
  border-radius: 8px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.glass-panel:hover,
.bas-card:hover,
.insight-card:hover,
.single-insight-hero:hover,
.result-card:hover,
.future-you-card:hover,
.trajectory-hero-card:hover {
  border-color: rgba(0, 255, 255, 0.24);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.28),
    0 0 46px rgba(0, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
  transform: translateY(-2px);
}

.glass-panel {
  position: relative;
  overflow: hidden;
}

.glass-panel::before,
.bas-card::before,
.insight-card::before,
.result-card::before,
.future-you-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 34%);
  opacity: 0.48;
  pointer-events: none;
}

.glass-panel-label,
.bas-card-header span {
  color: rgba(0, 255, 255, 0.82);
}

.bas-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 28px);
}

.bas-card-fill {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.18);
}

.future-you-card.hologram {
  min-height: 100%;
  padding: clamp(22px, 2.4vw, 34px);
  color: white;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.052), transparent 36%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.07), transparent 48%),
    rgba(11, 18, 32, 0.76);
}

.future-you-card.hologram p,
.future-you-card.hologram h3,
.future-you-card.hologram strong,
.future-you-card.hologram div {
  color: inherit;
}

.future-you-card.hologram [style*="rgba(15,23,42"],
.future-you-card.hologram [style*="#0f172a"] {
  color: rgba(255, 255, 255, 0.78) !important;
}

.future-you-card.hologram [style*="rgba(59,130,246"],
.future-you-card.hologram [style*="rgba(16,185,129"],
.future-you-card.hologram [style*="rgba(236,72,153"] {
  border-color: rgba(0, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.weather-card {
  min-height: 100%;
}

.weather-card > div > div:last-child {
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.22), rgba(128, 0, 128, 0.22)),
    rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 16px 38px rgba(0, 255, 255, 0.08);
}

.mission-card {
  min-height: 100%;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.05), transparent 36%),
    rgba(11, 18, 32, 0.82) !important;
}

.mission-card > div:first-child {
  background: linear-gradient(90deg, var(--cyan), var(--purple)) !important;
}

.mission-card button:not(:disabled) {
  color: #050713 !important;
  background: var(--cyan) !important;
}

.single-insight-section,
.single-insight-hero,
.single-action-card,
.trajectory-hero-card.large {
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.04), transparent 34%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.05), transparent 46%),
    rgba(11, 18, 32, 0.78);
}

.trajectory-hero-card.large {
  padding: clamp(24px, 4vw, 46px);
  border-color: rgba(0, 255, 255, 0.16);
}

.trajectory-chart-wrapper {
  min-height: 360px;
}

.coach-quick-actions {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: grid;
  width: min(340px, calc(100vw - 36px));
  gap: 8px;
  margin: 0;
}

.coach-quick-actions button,
.coach-suggestion-button {
  border-radius: 8px;
  border-color: rgba(0, 255, 255, 0.13);
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.06), transparent),
    rgba(11, 18, 32, 0.92);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1180px) {
  .command-center-grid,
  .bas-breakdown-grid,
  .insight-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .cinematic-hero.big-reveal {
    width: calc(100% - 24px);
    min-height: auto;
    padding: 28px 18px;
  }

  .cinematic-hero.big-reveal .cinematic-content {
    grid-template-columns: 1fr;
  }

  .cinematic-title {
    font-size: clamp(2.6rem, 12vw, 4.25rem);
  }

  .cinematic-hero.big-reveal .score-ring-large {
    --size: min(78vw, 320px);
    min-width: 0;
  }

  .hero-signal-stack,
  .command-center-grid,
  .mri-grid,
  .bas-breakdown-grid,
  .insight-rail,
  .digital-twin-grid,
  .mission-grid {
    grid-template-columns: 1fr;
  }

  .home-block::before {
    width: 46px;
  }
}

@media (max-width: 520px) {
  .model-header-actions {
    flex-wrap: wrap;
    overflow: visible;
  }

  .model-header-actions .model-start-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .cinematic-hero.big-reveal .hero-cta,
  .cinematic-hero.big-reveal .hero-secondary {
    width: 100%;
  }

  .cinematic-hero.big-reveal .score-inner-large {
    width: calc(var(--size) - 52px);
    height: calc(var(--size) - 52px);
  }

  .hero-signal-stack strong {
    white-space: normal;
  }
}

/* ======================================================================
   PREMIUM PRODUCT SYSTEM V4
   Same ARTH.OS color format: deep navy, purple, cyan, emerald, white.
   ====================================================================== */

:root {
  --accent-cyan: var(--cyan);
  --premium-page-width: min(1440px, calc(100% - 44px));
  --premium-text-soft: rgba(255, 255, 255, 0.72);
  --premium-text-muted: rgba(255, 255, 255, 0.56);
  --premium-panel-bg:
    linear-gradient(145deg, rgba(0, 255, 255, 0.045), transparent 34%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.06), transparent 48%),
    rgba(11, 18, 32, 0.78);
}

.page-shell {
  min-height: 100vh;
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(0, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(128, 0, 128, 0.12), transparent 28%),
    linear-gradient(180deg, #050713 0%, #0b1220 44%, #050713 100%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

.topbar {
  grid-template-columns: minmax(180px, 236px) minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 76px;
  border-bottom-color: rgba(0, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(5, 7, 19, 0.96), rgba(5, 7, 19, 0.82)),
    rgba(5, 7, 19, 0.92);
}

.brand {
  min-width: 0;
}

.logo-word {
  font-size: clamp(24px, 2vw, 32px);
}

.nav-links {
  gap: 6px;
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.nav-links a {
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 820;
}

.nav-links a svg {
  flex: 0 0 auto;
  color: rgba(0, 255, 255, 0.72);
}

.nav-links a:hover,
.nav-links a.active {
  border-color: rgba(0, 255, 255, 0.18);
  color: white;
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(128, 0, 128, 0.07)),
    rgba(255, 255, 255, 0.045);
}

.model-header-actions {
  padding-bottom: 2px;
}

.model-icon-btn,
.model-avatar-btn,
.model-start-btn,
.dev-intelligence-link,
.header-sync,
.auth-header-user {
  border-radius: 8px;
}

.model-start-btn,
.hero-cta,
.premium-route-cta {
  color: #050713;
  background: linear-gradient(135deg, cyan, #6d4cff 58%, purple);
  box-shadow: 0 18px 48px rgba(0, 255, 255, 0.13);
}

.home-hero {
  padding-bottom: clamp(40px, 6vw, 90px);
}

.cinematic-hero.big-reveal {
  overflow: hidden;
  border-color: rgba(0, 255, 255, 0.2);
}

.cinematic-hero.big-reveal .cinematic-system-line,
.section-eyebrow,
.premium-route-kicker {
  letter-spacing: 0;
}

.cinematic-title {
  letter-spacing: 0;
}

.home-block {
  width: var(--premium-page-width);
  margin: 0 auto clamp(26px, 4.6vw, 64px);
  padding: clamp(24px, 3.2vw, 44px);
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.home-block::before {
  top: -1px;
  left: clamp(20px, 3vw, 42px);
  width: 92px;
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.52fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: end;
  margin-bottom: clamp(18px, 3vw, 32px);
  padding-bottom: clamp(16px, 2.4vw, 26px);
}

.section-header .section-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -8px;
}

.section-title {
  max-width: 780px;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.98;
}

.section-copy {
  max-width: 680px;
  color: var(--premium-text-soft);
  font-weight: 620;
}

.glass-panel,
.bas-card,
.insight-card,
.premium-route-card,
.advanced-route-panel,
.single-insight-section,
.single-action-card,
.trajectory-hero-card.large,
.summary-card,
.premium-report-block,
.premium-metric-tile,
.result-card,
.panel {
  border: 1px solid rgba(0, 255, 255, 0.13);
  border-radius: 8px;
  background: var(--premium-panel-bg);
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.046);
}

.glass-panel,
.insight-card,
.bas-card {
  min-height: 190px;
  padding: clamp(20px, 2.4vw, 30px);
}

.glass-panel-value,
.premium-metric-value {
  color: white;
  font-family: var(--display);
  letter-spacing: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-cta,
.hero-secondary,
.premium-route-cta,
.premium-route-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 880;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.hero-secondary,
.premium-route-secondary {
  border: 1px solid rgba(0, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.hero-cta:hover,
.hero-secondary:hover,
.premium-route-cta:hover,
.premium-route-secondary:hover {
  transform: translateY(-1px);
}

.premium-route-shell {
  width: var(--premium-page-width);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 92px);
}

.premium-route-shell-compact {
  width: min(1120px, calc(100% - 44px));
}

.premium-route-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  margin-bottom: clamp(22px, 4vw, 42px);
  padding: clamp(26px, 5vw, 58px);
  border: 1px solid rgba(0, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.06), transparent 34%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.1), transparent 48%),
    rgba(11, 18, 32, 0.74);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.premium-route-hero > div {
  display: grid;
  max-width: 860px;
  gap: 14px;
}

.premium-route-kicker {
  margin: 0;
  color: rgba(0, 255, 255, 0.86);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.premium-route-hero h1,
.premium-route-section h2,
.future-you-nudge h2 {
  margin: 0;
  color: white;
  font-family: var(--display);
  font-weight: 950;
  letter-spacing: 0;
}

.premium-route-hero h1 {
  max-width: 900px;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: 0.96;
}

.premium-route-hero p:not(.premium-route-kicker),
.premium-route-section-head p:not(.premium-route-kicker),
.future-you-nudge p {
  margin: 0;
  color: var(--premium-text-soft);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  font-weight: 640;
  line-height: 1.72;
}

.premium-route-card {
  padding: clamp(22px, 3vw, 34px);
}

.premium-route-section {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.premium-route-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.premium-route-section-head > div {
  display: grid;
  max-width: 780px;
  gap: 10px;
}

.premium-route-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.02;
}

.future-you-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.52fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
  margin-bottom: clamp(26px, 4vw, 52px);
}

.future-you-main,
.future-you-side {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
}

.future-you-side {
  position: sticky;
  top: 98px;
}

.future-you-nudge {
  display: grid;
  gap: 14px;
}

.future-you-nudge .premium-route-cta {
  width: fit-content;
}

.premium-route-loading {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--premium-text-soft);
  font-weight: 760;
}

.advanced-area-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 clamp(18px, 3vw, 28px);
  border: 0;
}

.tab-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.tab-button > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 8px;
  color: cyan;
  background: rgba(0, 255, 255, 0.07);
}

.tab-button span {
  display: grid;
  gap: 4px;
}

.tab-button strong {
  color: white;
  font-size: 0.95rem;
  font-weight: 880;
}

.tab-button small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
}

.tab-button.active {
  border-color: rgba(0, 255, 255, 0.28);
  color: white;
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.11), rgba(128, 0, 128, 0.08)),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 18px 48px rgba(0, 255, 255, 0.07);
}

.advanced-route-panel {
  overflow: hidden;
}

.auth-card {
  border-radius: 8px;
}

@media (max-width: 1280px) {
  .topbar {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  }

  .model-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: 100%;
  }

  .page-shell-main {
    padding-top: 170px;
  }

  .section-header,
  .future-you-layout {
    grid-template-columns: 1fr;
  }

  .future-you-side {
    position: static;
  }
}

@media (max-width: 860px) {
  :root {
    --premium-page-width: calc(100% - 24px);
  }

  .premium-route-shell-compact {
    width: calc(100% - 24px);
  }

  .premium-route-hero,
  .premium-route-section-head {
    display: grid;
    align-items: start;
  }

  .premium-route-cta,
  .premium-route-secondary,
  .future-you-nudge .premium-route-cta {
    width: 100%;
  }

  .advanced-area-tabs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-shell-main {
    padding-top: 194px;
  }

  .topbar {
    padding: 12px;
  }

  .nav-links a {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .nav-links a span {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-block {
    padding: 22px 16px;
  }

  .section-header {
    gap: 12px;
    margin-bottom: 20px;
  }

  .section-header .section-eyebrow {
    margin-bottom: 0;
  }

  .section-title,
  .premium-route-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .glass-panel,
  .bas-card,
  .insight-card {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .page-shell-main {
    padding-top: 228px;
  }

  .premium-route-hero,
  .premium-route-card,
  .advanced-route-panel {
    padding: 20px 16px;
  }
}

/* Simple view home */
.simple-journey-home {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: grid;
  gap: 1.5rem;
}

.simple-hero h1 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.simple-hero-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a5b4fc;
}

.simple-hero-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.simple-score-card {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.simple-score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#8b5cf6 calc(var(--score) * 1%), rgba(255, 255, 255, 0.08) 0);
  position: relative;
}

.simple-score-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0f172a;
}

.simple-score-number,
.simple-score-max {
  position: relative;
  z-index: 1;
}

.simple-score-number {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.simple-score-max {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.simple-score-band {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.simple-score-hint {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.65);
}

.simple-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.simple-metric-card,
.simple-block {
  padding: 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.simple-metric-card span,
.simple-block-header span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.simple-metric-card strong {
  display: block;
  margin: 0.35rem 0;
  font-size: 1.35rem;
}

.simple-metric-card p,
.simple-block-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

.simple-block-header h2 {
  margin: 0 0 0.35rem;
}

.simple-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.simple-primary-btn,
.simple-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.simple-primary-btn {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  color: #fff;
}

.simple-secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.simple-footnote {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

.app-view-settings {
  padding: 1.25rem;
}

.app-view-settings h2 {
  margin: 0 0 0.35rem;
}

.app-view-settings-copy {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.68);
}

.app-view-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.app-view-settings-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.app-view-settings-option.active {
  border-color: rgba(139, 92, 246, 0.65);
  background: rgba(139, 92, 246, 0.1);
}

.app-view-settings-option strong {
  display: block;
}

.app-view-settings-option span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.58);
}

.app-view-settings-message {
  margin: 0.85rem 0 0;
  color: #86efac;
}

.dashboard-grid-item--full {
  grid-column: 1 / -1;
}

/* Final shell nav guard: keep the fixed header nav in its own full-width row. */
@media (min-width: 1024px) {
  .topbar .nav-wrap {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    width: 100%;
    min-width: 0;
  }

  .topbar .nav-links {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  .simple-metrics,
  .app-view-settings-grid {
    grid-template-columns: 1fr;
  }

  .simple-score-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════
   ENTERPRISE B2B FLOW — Bank/Insurance Edition
   ══════════════════════════════════════════════ */

.enterprise-nav-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(5, 7, 19, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
}

.enterprise-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.enterprise-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #06b6d4;
}

.enterprise-nav-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.enterprise-nav-badge {
  font-size: 0.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  font-weight: 600;
}

.enterprise-nav-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.enterprise-nav-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.enterprise-nav-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.enterprise-nav-tab.active {
  color: #06b6d4;
  border-bottom-color: #06b6d4;
}

.enterprise-tab-icon {
  opacity: 0.8;
}

.enterprise-tab-label {
  white-space: nowrap;
}

.enterprise-tab-tooltip {
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.enterprise-nav-tab:hover .enterprise-tab-tooltip {
  opacity: 1;
}

.enterprise-nav-footer {
  padding: 1rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
}

.enterprise-security-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.enterprise-portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.enterprise-logout-btn {
  gap: 0.5rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.enterprise-logout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Main Section Styling */
.enterprise-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.enterprise-section-header h2 {
  margin: 0;
}

.enterprise-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem;
}

.enterprise-section-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.enterprise-header-controls {
  display: flex;
  gap: 1rem;
}

.enterprise-btn-secondary,
.enterprise-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.3rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enterprise-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.enterprise-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.enterprise-btn-icon:hover {
  background: rgba(255, 255, 255, 0.08);
}

.enterprise-btn-link {
  background: none;
  border: none;
  color: #06b6d4;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
}

.enterprise-select,
.enterprise-select-compact {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Metrics Grid */
.enterprise-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.enterprise-metric-card {
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.metric-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.7rem;
}

.metric-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.8rem;
}

.metric-change {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.metric-change.positive {
  color: #22c55e;
}

.metric-change.negative {
  color: #ef4444;
}

/* Cards */
.enterprise-card {
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 2rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.card-header h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Score Distribution */
.score-distribution-chart {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.distribution-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 1rem;
}

.distribution-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.band-name {
  font-weight: 600;
}

.band-count {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.distribution-bar-container {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.distribution-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.distribution-percentage {
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.alert-severity-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.3rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.alert-message {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.enterprise-alert-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.enterprise-alert-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
}

.enterprise-alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.enterprise-alert-card-header strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.enterprise-alert-card-header span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.enterprise-alert-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.alert-critical {
  border-color: rgba(239, 68, 68, 0.35);
}

.alert-warning {
  border-color: rgba(251, 191, 36, 0.35);
}

.alert-info {
  border-color: rgba(37, 99, 235, 0.35);
}

.alert-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.alert-time {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Search Bar */
.enterprise-search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.enterprise-settings-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.enterprise-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.enterprise-config-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.config-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
}

.enterprise-config-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.enterprise-config-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}

.enterprise-config-action {
  margin-top: auto;
  justify-self: start;
}

.search-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.2rem;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 0.95rem;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Tables */
.enterprise-table-container {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.enterprise-customers-table {
  width: 100%;
  border-collapse: collapse;
}

.enterprise-customers-table thead {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.enterprise-customers-table th {
  padding: 1rem;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.enterprise-customers-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease;
}

.enterprise-customers-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.enterprise-customers-table tbody tr.status-alert {
  background: rgba(239, 68, 68, 0.05);
}

.enterprise-customers-table td {
  padding: 1rem;
}

.customer-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.customer-name {
  font-weight: 600;
  color: #fff;
}

.customer-id {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.score-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.score-value {
  font-weight: 700;
  font-size: 1.1rem;
}

.score-band {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.risk-badge.risk-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.risk-badge.risk-high {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.risk-badge.risk-medium {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.risk-badge.risk-low {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.trend-indicator {
  font-size: 1.2rem;
  font-weight: 700;
}

.trend-indicator.up {
  color: #22c55e;
}

.trend-indicator.down {
  color: #ef4444;
}

.trend-indicator.stable {
  color: rgba(255, 255, 255, 0.5);
}

/* Pagination */
.enterprise-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.enterprise-pagination button {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enterprise-pagination button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.enterprise-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Compliance Metrics */
.compliance-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.compliance-metric-card {
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.metric-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

.metric-score {
  font-size: 2rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.metric-audit {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Reports List */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.report-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.report-icon {
  flex-shrink: 0;
  color: #06b6d4;
  opacity: 0.7;
}

.report-info {
  flex: 1;
}

.report-name {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.4rem;
}

.report-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.6rem;
}

.report-regulations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.regulation-tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  font-size: 0.75rem;
  font-weight: 500;
}

.report-status {
  flex-shrink: 0;
}

.status-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-badge.pending {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.report-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Audit Trail */
.audit-trail {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.audit-entry {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.audit-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8rem;
}

.audit-icon.success {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.audit-icon.warning {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.audit-info {
  flex: 1;
}

.audit-action {
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.3rem;
}

.audit-details {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 1024px) {
  .enterprise-metrics-grid,
  .compliance-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .distribution-row {
    grid-template-columns: 100px 1fr 50px;
  }

  .enterprise-nav-tab {
    padding: 0.8rem 1rem;
  }
}

@media (max-width: 768px) {
  .enterprise-metrics-grid,
  .compliance-metrics-grid {
    grid-template-columns: 1fr;
  }

  .enterprise-section-header {
    flex-direction: column;
    gap: 1rem;
  }

  .enterprise-header-controls {
    width: 100%;
    flex-direction: column;
  }

  .enterprise-header-controls button,
  .enterprise-header-controls select {
    width: 100%;
  }

  .enterprise-nav-tabs {
    overflow-x: auto;
  }

  .distribution-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .enterprise-search-bar {
    flex-direction: column;
  }

  .report-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .report-actions {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Enterprise Portal Structure */
.enterprise-portal {
  min-height: 100vh;
  background: #050713;
}

.enterprise-main-content {
  padding: 2rem;
  min-height: calc(100vh - 200px);
}

.enterprise-container {
  max-width: 1400px;
  margin: 0 auto;
}

.enterprise-placeholder {
  padding: 3rem 2rem;
  border-radius: 16px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.enterprise-placeholder h2 {
  font-size: 1.8rem;
  margin: 0 0 1rem;
  color: #fff;
}

.enterprise-placeholder p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.enterprise-loading,
.enterprise-empty-state,
.enterprise-error-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
}

.enterprise-error-banner {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
}

.enterprise-btn-secondary:disabled,
.enterprise-btn-primary:disabled,
.enterprise-btn-icon:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.enterprise-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.enterprise-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.enterprise-detail-grid strong {
  color: #fff;
  font-size: 1rem;
}

.enterprise-insight-strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(6, 182, 212, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

.enterprise-insight-strip strong {
  color: #fff;
  white-space: nowrap;
}

.enterprise-insight-strip span {
  text-align: right;
  line-height: 1.45;
}

.enterprise-link-card {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.58);
}

.enterprise-link-input {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.78);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.85rem;
}

.enterprise-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.enterprise-link-actions a {
  text-decoration: none;
}

.customer-assessment-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    linear-gradient(135deg, rgba(8, 47, 73, 0.72), rgba(15, 23, 42, 0.96)),
    #020617;
  color: #f8fafc;
}

.customer-assessment-panel {
  width: min(920px, 100%);
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.customer-assessment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.customer-assessment-header h1 {
  margin: 0.45rem 0 0.35rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.customer-assessment-header p {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.5;
}

.customer-assessment-form {
  display: grid;
  gap: 1rem;
}

.customer-assessment-form label {
  display: grid;
  gap: 0.45rem;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.9rem;
}

.customer-assessment-form input,
.customer-assessment-form select {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.74);
  color: #fff;
}

.customer-assessment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.customer-assessment-result {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 10px;
  background: rgba(22, 101, 52, 0.18);
}

.customer-assessment-result strong {
  font-size: 2rem;
  line-height: 1;
}

.customer-assessment-result span,
.customer-assessment-result p {
  margin: 0;
  color: rgba(226, 232, 240, 0.86);
}

.enterprise-customers-table tbody tr {
  cursor: pointer;
}

.enterprise-customers-table tbody tr.status-monitor:hover,
.enterprise-customers-table tbody tr.status-alert:hover {
  background: rgba(6, 182, 212, 0.06);
}

/* Shell nav overlap fix: the header nav is a grid child wrapper, not the nav itself. */
@media (min-width: 1024px) {
  .topbar .nav-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar .nav-links {
    max-height: none !important;
  }
}

/* ======================================================================
   ARTH.OS PROFESSIONAL SHELL FINAL PASS
   The dashboard header now participates in layout, so content cannot hide
   under the menu as routes and nav rows change.
   ====================================================================== */

:root {
  --app-page-width: min(1480px, calc(100% - 48px));
  --app-header-bg: rgba(4, 7, 18, 0.94);
  --app-surface: rgba(11, 18, 32, 0.84);
  --app-surface-strong: rgba(13, 20, 35, 0.96);
  --app-border: rgba(148, 163, 184, 0.16);
  --app-border-accent: rgba(0, 255, 255, 0.18);
  --app-text: rgba(255, 255, 255, 0.94);
  --app-muted: rgba(226, 232, 240, 0.66);
  --app-muted-soft: rgba(226, 232, 240, 0.48);
}

.app-shell,
.page-shell {
  min-height: 100vh;
  color: var(--app-text);
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.98), rgba(5, 7, 19, 1) 54%),
    #050713;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  grid-template-columns: minmax(172px, 232px) minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px 18px !important;
  width: 100% !important;
  min-height: 78px !important;
  padding: 12px clamp(16px, 3vw, 40px) !important;
  border-bottom: 1px solid var(--app-border) !important;
  background: var(--app-header-bg) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

.brand {
  min-width: 0 !important;
  gap: 3px !important;
}

.logo-word {
  font-size: clamp(25px, 2vw, 34px) !important;
  letter-spacing: 0 !important;
}

.brand small {
  color: rgba(0, 255, 255, 0.82) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

.topbar .nav-wrap {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.topbar .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  scrollbar-width: none !important;
}

.topbar .nav-links::-webkit-scrollbar {
  display: none !important;
}

.topbar .nav-links a {
  flex: 0 0 auto !important;
  gap: 7px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

.topbar .nav-links a svg {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  color: rgba(0, 255, 255, 0.72) !important;
}

.topbar .nav-links a:hover,
.topbar .nav-links a.active {
  border-color: var(--app-border-accent) !important;
  color: #fff !important;
  background: rgba(0, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.nav-wrap::before,
.nav-wrap::after,
.nav-scroll-btn {
  display: none !important;
}

.model-header-actions {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

.header-sync,
.auth-header-user,
.dev-intelligence-link,
.model-icon-btn,
.model-avatar-btn,
.model-start-btn {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.model-icon-btn,
.model-avatar-btn {
  width: 38px !important;
  height: 38px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.model-start-btn {
  min-width: max-content !important;
  padding: 0 18px !important;
  color: #041018 !important;
  background: linear-gradient(135deg, #19e6ff, #7c3aed 62%, #8b008b) !important;
  font-weight: 850 !important;
}

.app-main,
.page-shell-main {
  width: 100%;
  padding: clamp(22px, 3vw, 38px) 0 clamp(54px, 6vw, 88px) !important;
}

.app-main > *,
.page-shell-main > * {
  scroll-margin-top: 112px;
}

.dashboard-page {
  width: var(--app-page-width);
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

.dashboard-page-header {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.42fr);
  gap: clamp(14px, 2.6vw, 34px);
  align-items: end;
  padding: clamp(24px, 3.5vw, 42px);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 255, 255, 0.055), rgba(124, 58, 237, 0.06)),
    rgba(255, 255, 255, 0.026);
}

.dashboard-page-header h1 {
  max-width: 840px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 4.6vw, 4.8rem);
  font-weight: 880;
  line-height: 0.98;
  letter-spacing: 0;
}

.dashboard-page-header p {
  margin: 0;
  color: var(--app-muted);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 560;
  line-height: 1.55;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}

.dashboard-grid-item {
  min-width: 0;
}

.dashboard-grid-item > .summary-card,
.dashboard-grid-item > .result-card,
.dashboard-grid-item > .page-section,
.dashboard-grid-item > .coach-shell,
.summary-card,
.result-card,
.panel,
.single-action-card,
.trait-matrix-card,
.consequence-forecast-card,
.interventions-prescription-card,
.strategic-metrics-card {
  border: 1px solid var(--app-border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--app-surface) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.24) !important;
  text-align: left !important;
}

.summary-card,
.result-card,
.panel {
  padding: clamp(20px, 2vw, 28px) !important;
}

.dashboard-grid .summary-card > h2,
.result-heading h2 {
  color: #fff;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 820;
  line-height: 1.18;
}

.coach-shell {
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.coach-start-grid {
  gap: clamp(18px, 2vw, 26px) !important;
}

.coach-start-header,
.coach-session-bar,
.coach-context-panel,
.coach-settings-panel,
.coach-chat-main,
.coach-recommendations-panel,
.coach-start-card,
.coach-stat-card-group {
  border: 1px solid var(--app-border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--app-surface) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.22) !important;
}

.coach-start-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
}

.coach-page-title,
.coach-card-title,
.coach-context-title {
  color: #fff !important;
  letter-spacing: 0 !important;
}

.coach-page-title {
  font-size: clamp(2rem, 3.5vw, 3.7rem) !important;
  line-height: 0.98 !important;
}

.coach-page-subtitle,
.coach-topic-desc,
.coach-context-subtitle,
.simulator-subtitle {
  color: var(--app-muted) !important;
}

.coach-card-eyebrow,
.coach-context-label,
.simulator-input-group label {
  color: var(--app-muted-soft) !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.coach-topic-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

.coach-topic-button,
.coach-stat-card,
.coach-context-card,
.simulator-path-card,
.simulator-metric,
.simulator-placeholder,
.input-wrapper {
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.034) !important;
}

.coach-topic-button {
  min-height: 144px !important;
  padding: 20px !important;
}

.coach-main-button,
.coach-submit-button,
.coach-recommend-button,
.premium-route-cta,
.hero-cta {
  border-radius: 8px !important;
  color: #041018 !important;
  background: linear-gradient(135deg, #19e6ff, #7c3aed 62%, #8b008b) !important;
  font-weight: 840 !important;
}

.simulator-card {
  overflow: visible !important;
}

.simulator-subtitle {
  margin: 8px 0 18px !important;
  line-height: 1.5 !important;
}

.simulator-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.simulator-path-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--path-color) 42%, transparent) !important;
}

.simulator-path-title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #fff;
}

.simulator-path-title svg {
  flex: 0 0 auto;
  color: var(--path-color);
}

.simulator-path-title strong {
  line-height: 1.2;
}

.simulator-path-card p {
  color: var(--app-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.simulator-path-metric {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.simulator-path-metric span {
  color: var(--app-muted-soft);
  font-size: 0.76rem;
  font-weight: 780;
}

.simulator-path-metric strong {
  color: var(--path-color);
  font-size: 1.05rem;
  line-height: 1.1;
}

.simulator-path-risk {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 6px;
  color: #041018;
  background: var(--path-color);
  font-size: 0.78rem;
  font-weight: 850;
}

.simulator-test-section {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 255, 255, 0.16);
}

.simulator-test-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.25;
}

.simulator-test-section p {
  margin: 0 0 16px;
  color: var(--app-muted);
  line-height: 1.5;
}

.input-wrapper {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 0 14px !important;
}

.input-wrapper input {
  min-width: 0;
  color: #fff !important;
}

@media (min-width: 1281px) {
  .dashboard-page:has(.coach-shell) .dashboard-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
  }

  .dashboard-page:has(.coach-shell) .dashboard-grid-item:first-child {
    grid-row: span 2;
  }
}

@media (max-width: 1320px) {
  .topbar {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) !important;
  }

  .model-header-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .topbar .nav-wrap {
    grid-column: 2 / 3 !important;
  }
}

@media (max-width: 980px) {
  :root {
    --app-page-width: calc(100% - 28px);
  }

  .topbar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .topbar .brand,
  .topbar .nav-wrap,
  .model-header-actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .dashboard-page-header,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-page-header h1 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }
}

@media (max-width: 640px) {
  :root {
    --app-page-width: calc(100% - 20px);
  }

  .topbar {
    padding: 10px !important;
  }

  .model-header-actions {
    flex-wrap: nowrap !important;
  }

  .auth-header-user,
  .header-sync {
    max-width: 116px !important;
  }

  .model-start-btn {
    padding: 0 12px !important;
  }

  .dashboard-page-header,
  .summary-card,
  .result-card,
  .panel,
  .coach-start-header,
  .coach-start-card,
  .coach-stat-card-group {
    padding: 18px !important;
  }

  .coach-topic-grid,
  .simulator-path-grid {
    grid-template-columns: 1fr !important;
  }
}
/**
 * Privacy Settings Component Styling
 */

.privacy-settings {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    sans-serif;
}

.settings-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 1rem;
}

.settings-header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.settings-header p {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

.message {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid #10b981;
  background-color: #f0fdf4;
  color: #065f46;
  font-size: 0.9375rem;
}

.message.error {
  border-left-color: #ef4444;
  background-color: #fef2f2;
  color: #7f1d1d;
}

/* Tab Navigation */
.settings-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  font-weight: 500;
}

.tab-btn:hover {
  color: #1f2937;
}

.tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

/* Settings Panel */
.settings-panel {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-panel h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.subtext {
  color: #6b7280;
  margin-bottom: 1.5rem;
}

/* Retention Grid */
.retention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.retention-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.retention-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
}

.card-header h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.retention-badge {
  background-color: #dbeafe;
  color: #1e40af;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.card-header h4 + .retention-badge {
  flex-shrink: 0;
  margin-left: 1rem;
}

.description {
  color: #4b5563;
  font-size: 0.9375rem;
  margin: 0.5rem 0;
}

.rationale {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0.75rem 0;
  font-style: italic;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Info & Warning Boxes */
.info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 2rem;
  color: #1e40af;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.warning-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  color: #7f1d1d;
}

.warning-box ul {
  margin: 0.75rem 0 0 1.5rem;
  padding: 0;
}

.warning-box li {
  margin: 0.5rem 0;
}

/* Export Categories */
.export-categories {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.export-categories h4 {
  margin-top: 0;
  color: #1f2937;
}

.checkbox-item {
  display: flex;
  align-items: center;
  margin: 0.75rem 0;
  cursor: pointer;
  user-select: none;
}

.checkbox-item input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.75rem;
  cursor: pointer;
  accent-color: #2563eb;
}

.checkbox-item span {
  color: #374151;
  font-size: 0.9375rem;
}

/* Export Formats */
.export-formats {
  margin: 2rem 0;
}

.export-formats h4 {
  color: #1f2937;
  margin-bottom: 1rem;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-danger-strong {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.btn-primary {
  background-color: #2563eb;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #1d4ed8;
}

.btn-secondary {
  background-color: #e5e7eb;
  color: #1f2937;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #d1d5db;
}

.btn-danger {
  background-color: #fca5a5;
  color: #7f1d1d;
}

.btn-danger:hover:not(:disabled) {
  background-color: #f87171;
}

.btn-danger-strong {
  background-color: #dc2626;
  color: white;
}

.btn-danger-strong:hover:not(:disabled) {
  background-color: #b91c1c;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Delete Confirmation */
.delete-panel {
  max-width: 600px;
}

.delete-confirmation {
  background: #fff5f5;
  border: 2px solid #fed7d7;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.delete-confirmation p {
  color: #7f1d1d;
  font-weight: 500;
  margin: 0 0 1rem 0;
}

.delete-confirmation input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #fc8181;
  border-radius: 0.375rem;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.delete-confirmation input:focus {
  outline: none;
  border-color: #f56565;
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.1);
}

.delete-options {
  margin: 1.5rem 0;
}

.confirmation-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .privacy-settings {
    padding: 1rem;
  }

  .retention-grid {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .confirmation-buttons {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-danger-strong {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}
:root {
  /* TEXT */
  --premium-report-kicker: rgba(255, 255, 255, 0.7);
  --premium-report-text: rgba(255, 255, 255, 0.9);
  --premium-report-muted: rgba(255, 255, 255, 0.65);
  --premium-report-muted-85: rgba(255, 255, 255, 0.85);
  --premium-report-muted-88: rgba(255, 255, 255, 0.88);
  --premium-report-muted-90: rgba(255, 255, 255, 0.9);
  --premium-report-muted-92: rgba(255, 255, 255, 0.92);
  --premium-report-strong-white: var(--white);
  --premium-report-strong-white-96: rgba(255, 255, 255, 0.96);
  --premium-report-notes-text: rgba(255, 255, 255, 0.88);
  --premium-report-hero-copy: rgba(255, 255, 255, 0.8);
  --premium-report-hero-copy-muted: rgba(255, 255, 255, 0.7);

  /* BACKGROUNDS */
  --premium-report-bg: var(--bg);
  --premium-report-tile-bg: var(--bg-2);
  --premium-report-panel-bg: var(--bg);
  --premium-report-summary-bg-start: rgba(8, 13, 28, 0.95);
  --premium-report-summary-bg-end: rgba(12, 17, 35, 0.98);
  --premium-report-summary-bg-fill: rgba(8, 13, 28, 0.98);
  --premium-report-share-panel-bg: var(--bg-2);

  /* BORDERS */
  --premium-report-border: rgba(255, 255, 255, 0.1);
  --premium-report-hero-border: rgba(255, 255, 255, 0.15);
  --premium-report-button-hover-border: rgba(255, 255, 255, 0.24);

  /* SEMANTIC COLORS (Mapped to Brand Palette) */
  --premium-report-success-text: var(--emerald);
  --premium-report-success-border: rgba(0, 255, 135, 0.3);
  --premium-report-success-gradient-start: rgba(0, 255, 135, 0.08);
  --premium-report-success-gradient-end: rgba(0, 255, 135, 0.05);

  --premium-report-risk-border: rgba(255, 255, 255, 0.2);
  --premium-report-opportunity-border: var(--premium-report-success-border);
  --premium-report-info-border: rgba(255, 255, 255, 0.2);
  
  --premium-report-notice-border: rgba(255, 255, 255, 0.25);
  --premium-report-notice-bg: rgba(255, 255, 255, 0.08);
  --premium-report-warning-text: var(--white);

  /* GRADIENTS & DECORATIVE */
  --premium-report-summary-radial-cyan: rgba(0, 255, 255, 0.08);
  --premium-report-summary-radial-amber: rgba(255, 193, 7, 0); /* Disabled */
  --premium-report-hero-gradient-cyan: rgba(0, 255, 255, 0.12);
  --premium-report-hero-gradient-purple: rgba(139, 92, 246, 0.09);
  --premium-report-hero-gradient-amber: rgba(244, 178, 85, 0); /* Disabled */
  --premium-report-share-gradient-start: rgba(139, 92, 246, 0.1);
  --premium-report-share-gradient-end: rgba(0, 255, 255, 0.08);

  /* BADGES (Mapped to Brand Palette) */
  --premium-report-badge-border-gold: rgba(255, 215, 0, 0); /* Disabled */
  --premium-report-badge-bg-gold: rgba(255, 215, 0, 0); /* Disabled */
  --premium-report-badge-border-green: var(--premium-report-success-border);
  --premium-report-badge-bg-green: rgba(0, 255, 135, 0.08);
  --premium-report-badge-border-blue: rgba(0, 119, 255, 0); /* Disabled */
  --premium-report-badge-bg-blue: rgba(0, 119, 255, 0); /* Disabled */
  --premium-report-badge-border-purple: rgba(139, 92, 246, 0.2);
  --premium-report-badge-bg-purple: rgba(139, 92, 246, 0.08);
  --premium-report-badge-border-orange: rgba(255, 165, 0, 0); /* Disabled */
  --premium-report-badge-bg-orange: rgba(255, 165, 0, 0); /* Disabled */
  --premium-report-badge-hover-bg: rgba(255, 255, 255, 0.1);

  /* SOCIAL COLORS (Minimal Opacity) */
  --premium-report-share-twitter-bg: rgba(29, 161, 242, 0.12);
  --premium-report-share-linkedin-bg: rgba(0, 119, 181, 0.12);

  /* LEGACY & MISC (Remapped or Disabled) */
  --shadow-10: 0 4px 14px rgba(0, 0, 0, 0.1);
  --shadow-20: 0 8px 28px rgba(0, 0, 0, 0.2);
  --shadow-30: 0 12px 48px rgba(0, 0, 0, 0.3);
  --coral: var(--emerald); /* Remapped */
  --green: var(--emerald); /* Remapped */
  --premium-report-shadow: rgba(0, 0, 0, 0.3);

  /* WHITE OPACITY TOKENS (Standardized) */
  --white-03: rgba(255, 255, 255, 0.03);
  --white-04: rgba(255, 255, 255, 0.04);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-24: rgba(255, 255, 255, 0.24);
  --white-28: rgba(255, 255, 255, 0.28);
  --white-32: rgba(255, 255, 255, 0.32);
  --white-48: rgba(255, 255, 255, 0.48);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-92: rgba(255, 255, 255, 0.92);
  --white-96: rgba(255, 255, 255, 0.96);
}

.premium-inline-badge-wrap{padding:0 16px}
.premium-success-badge{padding:12px 16px;border-radius:12px;border:1px solid var(--premium-report-success-border);background:linear-gradient(135deg,var(--premium-report-success-gradient-start),var(--premium-report-success-gradient-end)),var(--premium-report-panel-bg);color:var(--premium-report-success-text);font-weight:800;box-shadow:0 18px 50px var(--premium-report-shadow),inset 0 1px 0 var(--white-05)}

.premium-report-section-header{padding:18px 0;border-bottom:1px solid var(--white-08);margin-bottom:18px}
.premium-report-section-title{font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px;color:var(--premium-report-strong-white)}

.premium-report-block{border-radius:26px}
.premium-report-block-header{padding-bottom:16px;border-bottom:1px solid var(--white-08);margin-bottom:18px}
.premium-report-block-title{font-size:20px;font-weight:950;color:var(--premium-report-strong-white-96)}
.premium-report-block-subtitle{margin:8px 0 0;font-size:13px;color:var(--premium-report-muted);font-weight:750;line-height:1.55}

.premium-report-grid{display:grid;gap:16px}
.premium-report-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.premium-report-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.premium-metric-tile{padding:16px;border-radius:14px;border:1px solid var(--premium-report-border);background:var(--premium-report-bg)}
.premium-metric-tile:hover{border-color:var(--premium-report-border)}

.premium-metric-tile-wide{grid-column:1/-1}

.premium-metric-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--premium-report-kicker);font-weight:950;margin-bottom:8px}
.premium-metric-value{font-size:24px;font-weight:950;color:var(--white);line-height:1.1}
.premium-metric-value-compact{font-size:18px}

.premium-metric-desc{margin-top:6px;font-size:13px;color:var(--premium-report-muted);font-weight:700;line-height:1.55}

.premium-metric-heading{display:block;margin-bottom:8px;color:var(--white);font-size:14px;font-weight:900}
.premium-metric-longtext{margin:0;color:var(--premium-report-muted);font-size:13px;line-height:1.65}
.memory-timeline-list{margin:12px 0 0;padding-left:18px;color:var(--premium-report-muted);font-size:13px;line-height:1.65;}
.memory-timeline-list li{margin-bottom:10px;}
.memory-timeline-list strong{color:var(--white);display:block;font-size:13px;font-weight:700;}
.memory-timeline-list span{color:var(--premium-report-muted-85);font-size:12px;display:block;margin-top:4px;}
.memory-timeline-page-list{margin:20px 0 0;padding-left:18px;color:var(--premium-report-muted);font-size:14px;line-height:1.8;}
.memory-timeline-page-list li{margin-bottom:16px;padding:16px;border-radius:14px;border:1px solid var(--white-08);background:var(--white-03);}
.memory-timeline-page-list strong{color:var(--white);display:block;font-size:14px;font-weight:700;margin-bottom:6px;}
.memory-timeline-page-list span{color:var(--premium-report-muted-88);font-size:13px;display:block;margin-top:4px;}
.memory-toggle-button{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--white-18);background:var(--white-06);color:var(--white);font-weight:700;cursor:pointer;transition:background 0.2s ease;border-color:var(--white-18);}
.memory-toggle-button:hover{background:var(--white-12);}

.risk-alert-list{margin:12px 0 0;padding-left:18px;color:var(--premium-report-muted);font-size:13px;line-height:1.75;}
.risk-alert-list li{margin-bottom:12px;padding:12px 14px;border-radius:12px;background:var(--white-04);border:1px solid var(--white-08);}
.risk-alert-list li strong{display:block;color:var(--white);font-size:13px;font-weight:700;margin-bottom:4px;}
.risk-alert-list li span{color:var(--premium-report-muted-90);font-size:12px;}
.risk-alert-risk{border-color:var(--premium-report-risk-border);}
.risk-alert-opportunity{border-color:var(--premium-report-opportunity-border);}
.risk-alert-info{border-color:var(--premium-report-info-border);}

.cognition-graph-view{padding:16px 0;}
.graph-legend{font-size:13px;color:var(--premium-report-muted-90);font-weight:700;margin-bottom:16px;}
.graph-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.graph-column{background:var(--white-04);border:1px solid var(--white-08);border-radius:14px;padding:14px;}
.graph-column-header{font-size:12px;font-weight:700;color:var(--premium-report-muted-92);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.graph-node{display:flex;align-items:center;gap:10px;color:var(--premium-report-text);font-size:13px;padding:8px 0;border-bottom:1px solid var(--white-06);}
.graph-node:last-child{border-bottom:none;}
.graph-edges{margin-top:16px;padding-top:14px;border-top:1px solid var(--white-08);}
.graph-edge{display:flex;align-items:center;gap:8px;color:var(--premium-report-text);font-size:13px;margin-bottom:8px;}

@media (max-width:980px){
  .premium-report-grid-2{grid-template-columns:1fr}
  .premium-report-grid-3{grid-template-columns:1fr}
  .premium-metric-value-compact{font-size:18px}
}

.summary-card{
  position:relative;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--premium-report-border);
  border-radius:24px;
  background:
    linear-gradient(180deg,var(--premium-report-summary-bg-start),var(--premium-report-summary-bg-end)),
    var(--premium-report-summary-bg-fill);
  box-shadow:0 28px 80px var(--shadow-20),inset 0 1px 0 var(--white-05)
}

.summary-card::before{
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  background:
    radial-gradient(circle at 10% 0%,var(--premium-report-summary-radial-cyan),transparent 28%),
    radial-gradient(circle at 92% 12%,var(--premium-report-summary-radial-amber),transparent 24%)
}

.summary-card>*{position:relative}

.salary-roast{
  display:grid;
  gap:18px;
  color:var(--premium-report-text)
}

.salary-roast-empty{
  padding:18px;
  border:1px solid var(--premium-report-notice-border);
  border-radius:14px;
  background:var(--premium-report-notice-bg);
  color:var(--premium-report-warning-text);
  font-weight:800
}

.salary-roast-hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);
  gap:18px;
  align-items:stretch;
  padding:22px;
  border:1px solid var(--premium-report-hero-border);
  border-radius:20px;
  background:
    linear-gradient(135deg,var(--premium-report-hero-gradient-cyan),var(--premium-report-hero-gradient-purple) 48%,var(--premium-report-hero-gradient-amber)),
    var(--bg-2)
}

.salary-roast-hero-copy{
  display:grid;
  align-content:center;
  gap:12px;
  min-width:0
}

.salary-roast-eyebrow,
.salary-roast-score-panel>span,
.salary-roast-panel-heading small,
.salary-roast-stat>span,
.salary-roast-comparison>span,
.salary-roast-compare-grid span,
.salary-roast-share-copy>span{
  color:var(--premium-report-muted-92);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase
}

.salary-roast-hero h3{
  max-width:760px;
  color:var(--white);
  font-size:clamp(24px,3vw,36px);
  font-weight:950;
  line-height:1.08;
  overflow-wrap:anywhere;
  text-wrap:balance
}

.salary-roast-hero p{
  color:var(--premium-report-hero-copy);
  font-size:15px;
  font-weight:750;
  line-height:1.55
}

.salary-roast-hero strong{color:var(--white)}

.salary-roast-score-panel{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  min-width:0;
  padding:20px;
  border:1px solid var(--white-12);
  border-radius:18px;
  background:rgba(18,20,35,.36);
  text-align:center
}

.salary-roast-score-panel>strong{
  color:var(--white);
  font-size:64px;
  font-weight:950;
  line-height:.92
}

.salary-roast-score-panel>small{
  color:var(--premium-report-hero-copy-muted);
  font-size:14px;
  font-weight:850
}

.salary-roast-score-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  margin-top:8px
}

.salary-roast-score-meta>div,
.salary-roast-stat,
.salary-roast-compare-grid>div{
  min-width:0;
  padding:12px;
  border:1px solid var(--white-10);
  border-radius:12px;
  background:var(--white-04)
}

.salary-roast-score-meta span{
  display:block;
  color:var(--premium-report-muted-92);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase
}

.salary-roast-score-meta strong{
  display:block;
  margin-top:4px;
  color:var(--white);
  font-size:22px;
  font-weight:950
}

.salary-roast-tone-positive strong{color:var(--green)}
.salary-roast-tone-negative strong{color:var(--coral)}

.salary-roast-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:16px
}

.salary-roast-panel{
  min-width:0;
  padding:18px;
  border:1px solid var(--white-10);
  border-radius:18px;
  background:var(--bg-2)
}

.salary-roast-panel-featured{
  border-color:var(--premium-report-notice-border);
  background:linear-gradient(135deg,var(--premium-report-notice-bg),var(--white-03))
}

.salary-roast-panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px
}

.salary-roast-panel-heading>span{
  color:var(--white);
  font-size:16px;
  font-weight:950
}

.salary-roast-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.salary-roast-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--white-12);
  border-radius:999px;
  background:var(--bg);
  color:var(--premium-report-notes-text);
  font-size:13px;
  font-weight:900
}

.salary-roast-badge-gold{border-color:var(--premium-report-badge-border-gold);background:var(--premium-report-badge-bg-gold)}
.salary-roast-badge-green{border-color:var(--premium-report-badge-border-green);background:var(--premium-report-badge-bg-green)}
.salary-roast-badge-blue{border-color:var(--premium-report-badge-border-blue);background:var(--premium-report-badge-bg-blue)}
.salary-roast-badge-purple{border-color:var(--premium-report-badge-border-purple);background:var(--premium-report-badge-bg-purple)}
.salary-roast-badge-orange{border-color:var(--premium-report-badge-border-orange);background:var(--premium-report-badge-bg-orange)}

.salary-roast-notes{
  display:grid;
  gap:10px
}

.salary-roast-notes p{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin:0;
  color:var(--premium-report-notes-text);
  font-size:14px;
  font-weight:700;
  line-height:1.55
}

.salary-roast-notes p>span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--premium-report-hero-gradient-cyan);
  color:var(--cyan);
  font-size:12px;
  font-weight:950
}

.salary-roast-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.salary-roast-stat{
  display:grid;
  gap:8px
}

.salary-roast-stat strong{
  color:var(--white);
  font-size:24px;
  font-weight:950;
  line-height:1.12;
  overflow-wrap:anywhere
}

.salary-roast-stat small{
  margin-left:4px;
  color:var(--premium-report-muted-90);
  font-size:13px;
  font-weight:850
}

.salary-roast-comparison{
  padding:16px;
  border:1px solid var(--white-10);
  border-radius:16px;
  background:var(--white-04)
}

.salary-roast-comparison p{
  margin-top:6px;
  color:var(--white);
  font-size:15px;
  font-weight:800;
  line-height:1.55
}

.salary-roast-spinner{
  animation:salaryRoastSpin 800ms linear infinite
}

.salary-roast-export-target{
  /* Captures the entire roast card for PNG export */
  width:100%;
}

@keyframes salaryRoastSpin{
  to{transform:rotate(360deg)}
}

.salary-roast-actions,
.salary-roast-share-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center
}

.salary-roast-tool-button,
.salary-roast-share-button,
.salary-roast-copy-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid var(--premium-report-border);
  border-radius:999px;
  color:var(--white);
  background:var(--bg-2);
  font-size:13px;
  font-weight:900;
  transition:background 160ms ease,border-color 160ms ease,transform 160ms ease
}

.salary-roast-tool-button{padding:0 14px}
.salary-roast-share-button,.salary-roast-copy-button{padding:0 16px}

.salary-roast-tool-button:hover,
.salary-roast-share-button:hover,
.salary-roast-copy-button:hover{
  border-color:var(--premium-report-button-hover-border);
  background:var(--premium-report-badge-hover-bg);
  transform:translateY(-1px)
}

.salary-roast-copy-feedback{
  color:var(--green);
  font-size:13px;
  font-weight:900
}

.salary-roast-share-panel{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--white-10);
  border-radius:16px;
  background:var(--premium-report-share-panel-bg)
}

.salary-roast-share-button-twitter{background:var(--premium-report-share-twitter-bg)}
.salary-roast-share-button-linkedin{background:var(--premium-report-share-linkedin-bg)}
.salary-roast-share-button-whatsapp{background:linear-gradient(135deg,rgba(37,211,102,.14),rgba(37,211,102,.06));border-color:rgba(37,211,102,.2)}
.salary-roast-share-button-telegram{background:linear-gradient(135deg,rgba(0,136,204,.14),rgba(0,136,204,.06));border-color:rgba(0,136,204,.2)}
.salary-roast-share-button-facebook{background:rgba(24,119,242,.12);border-color:rgba(24,119,242,.22)}
.salary-roast-share-button-native{background:linear-gradient(135deg,rgba(98,228,209,.14),rgba(98,228,209,.06));border-color:rgba(98,228,209,.24)}
.salary-roast-share-button-link{background:var(--white-06);border-color:var(--white-16)}
.salary-roast-share-button-caption{background:linear-gradient(135deg,var(--premium-report-share-gradient-start),var(--premium-report-share-gradient-end))}
.salary-roast-share-button-text{background:var(--white-06)}

.salary-roast-share-native-full{grid-column:1/-1}

.salary-roast-share-section-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  margin-bottom:4px;
  color:var(--premium-report-muted-92);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em
}

.salary-roast-share-button-native ~ .salary-roast-share-section-label:first-of-type{margin-top:16px}

.salary-roast-share-copy{
  display:grid;
  gap:8px
}

.salary-roast-share-text{
  width:100%;
  min-height:84px;
  padding:12px;
  resize:vertical;
  border:1px solid var(--white-12);
  border-radius:12px;
  color:var(--white);
  background:var(--bg);
  font:inherit;
  font-size:13px;
  line-height:1.55
}

.salary-roast-copy-button{
  width:max-content
}

.salary-roast-compare-panel{
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid var(--white-10);
  border-radius:16px;
  background:var(--bg-2)
}

.salary-roast-compare-panel h3{
  margin:0;
  color:var(--white);
  font-size:16px;
  font-weight:950
}

.salary-roast-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.salary-roast-compare-grid strong{
  display:block;
  margin-top:6px;
  color:var(--white);
  font-size:28px;
  font-weight:950
}

@media (max-width:980px){
  .summary-card{padding:20px}
  .salary-roast-hero,
  .salary-roast-detail-grid,
  .salary-roast-stat-grid,
  .salary-roast-compare-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:560px){
  .summary-card{padding:18px;border-radius:20px}
  .salary-roast-hero{padding:16px;border-radius:16px}
  .salary-roast-score-panel>strong{font-size:52px}
  .salary-roast-score-meta{grid-template-columns:1fr}
  .salary-roast-actions,
  .salary-roast-share-grid{
    align-items:stretch
  }
  .salary-roast-tool-button,
  .salary-roast-share-button,
  .salary-roast-copy-button{
    width:100%
  }
}

/* ===== FORECAST MODEL CARD (Multi-Model Ensemble) ===== */
.forecast-model-badge{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  margin-bottom:18px;
  border:1px solid var(--white-12);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(98,228,209,.06));
  color:var(--premium-report-muted-90);
  font-size:13px;
  font-weight:700;
}
.forecast-model-badge strong{
  color:var(--white);
}
.forecast-model-badge-meta{
  margin-left:auto;
  font-size:12px;
  color:var(--premium-report-kicker);
}

.forecast-model-toggle{
  margin-top:16px;
}
.forecast-model-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--white-12);
  border-radius:10px;
  background:var(--white-04);
  color:var(--premium-report-muted-90);
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  transition:all 160ms ease;
}
.forecast-model-toggle-btn:hover{
  background:var(--white-08);
  border-color:var(--white-18);
  color:var(--white);
}

.forecast-model-details{
  margin-top:16px;
  padding:18px;
  border:1px solid var(--white-08);
  border-radius:14px;
  background:var(--white-03);
}

.forecast-governance-panel{
  display:grid;
  gap:14px;
  margin-bottom:20px;
}

.forecast-governance-panel .forecast-subsection-title{
  display:flex;
  align-items:center;
  gap:8px;
}

.forecast-registry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.forecast-registry-grid>div{
  min-width:0;
  padding:12px;
  border:1px solid var(--white-08);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}

.forecast-registry-grid span,
.forecast-registry-grid small{
  display:block;
  color:var(--premium-report-kicker);
  font-size:11px;
  font-weight:850;
  overflow-wrap:anywhere;
}

.forecast-registry-grid span{
  text-transform:uppercase;
}

.forecast-registry-grid strong{
  display:block;
  margin:5px 0 3px;
  color:var(--white);
  font-size:15px;
  font-weight:900;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.forecast-registry-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.forecast-registry-flow span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:7px 10px;
  border:1px solid var(--white-10);
  border-radius:999px;
  background:var(--white-04);
  color:var(--premium-report-muted-90);
  font-size:12px;
  font-weight:850;
}

.forecast-model-table{
  display:grid;
  gap:2px;
}
.forecast-model-table-header,
.forecast-model-table-row{
  display:grid;
  grid-template-columns:1.5fr 0.6fr 0.6fr 0.6fr 0.6fr 0.8fr;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  font-size:12px;
}
.forecast-model-table-header{
  color:var(--premium-report-kicker);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--white-08);
}
.forecast-model-table-row{
  color:var(--premium-report-muted-90);
  font-weight:700;
  border-radius:8px;
  transition:background 140ms ease;
}
.forecast-model-table-row:hover{
  background:var(--white-06);
}
.forecast-model-row-best{
  background:rgba(115,240,191,.06);
  border:1px solid rgba(115,240,191,.16);
}

.forecast-ensemble-list{
  display:grid;
  gap:8px;
}
.forecast-ensemble-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:12px;
  border-radius:10px;
  background:var(--white-03);
  border:1px solid var(--white-08);
}
.forecast-ensemble-row-header{
  font-weight:800;
  color:var(--white);
}

@media (max-width:760px){
  .forecast-model-table-header,
  .forecast-model-table-row{
    grid-template-columns:1fr 1fr;
  }
  .forecast-registry-grid{
    grid-template-columns:1fr;
  }
  .forecast-model-badge-meta{
    width:100%;
    margin-left:0;
  }
}
/* ===== RETENTION DASHBOARD STYLES ===== */

.retention-dashboard {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: 56px 0;
}

.retention-dashboard.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.retention-dashboard.loading p {
  color: var(--muted);
  font-size: 16px;
}

.retention-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.retention-header h2 {
  color: var(--text);
  font-size: 42px;
  font-weight: 900;
  font-family: var(--display);
}

.retention-header .subtitle {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.btn-secondary:hover {
  border-color: var(--cyan);
  background: rgba(98, 228, 209, 0.08);
  color: var(--cyan);
  box-shadow: 0 8px 20px rgba(98, 228, 209, 0.15);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--purple);
  border-radius: 8px;
  color: #ffffff;
  background: var(--purple);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.3);
  transition: all 160ms ease;
}

.btn-primary:hover {
  background: var(--violet);
  border-color: var(--violet);
  box-shadow: 0 16px 32px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

/* KPI Card */
.retention-kpi {
  margin-bottom: 48px;
}

.kpi-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(98, 228, 209, 0.08), rgba(139, 92, 246, 0.05)),
    var(--surface);
}

.kpi-card.success {
  border-color: rgba(115, 240, 191, 0.3);
}

.kpi-card.warning {
  border-color: rgba(244, 178, 85, 0.3);
}

.kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(98, 228, 209, 0.1);
  color: var(--cyan);
}

.kpi-content h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.kpi-metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.kpi-metric {
  color: var(--text);
  font-family: var(--display);
  font-size: 42px;
  font-weight: 900;
}

.target {
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

.kpi-status {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

.kpi-card.warning .kpi-status {
  color: var(--amber);
}

/* Retention Curve */
.retention-section {
  margin-bottom: 48px;
}

.retention-section h3 {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
}

.retention-curve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.curve-bar {
  display: grid;
  gap: 12px;
}

.bar-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.bar-value {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 900;
}

.bar-graph {
  height: 24px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-2);
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: inherit;
  transition: width 400ms ease;
}

.bar-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Stats Grid */
.retention-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.stat-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(98, 228, 209, 0.1);
  color: var(--cyan);
}

.stat-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  color: var(--text);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-top: 4px;
}

/* Cohort Age Breakdown */
.cohort-age-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.age-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--surface-2);
}

.age-label {
  color: var(--text);
  font-weight: 700;
}

.age-count {
  color: var(--purple);
  font-weight: 700;
  font-family: var(--display);
}

/* Cohort Table */
.cohort-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.cohort-table {
  width: 100%;
  border-collapse: collapse;
}

.cohort-table thead {
  background: var(--surface-2);
}

.cohort-table th {
  padding: 16px;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

.cohort-table td {
  padding: 16px;
  color: var(--text);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cohort-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.user-id {
  font-family: monospace;
  color: var(--muted-2);
}

.badge-success,
.badge-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-success {
  background: rgba(115, 240, 191, 0.1);
  color: var(--green);
  border: 1px solid rgba(115, 240, 191, 0.2);
}

.badge-pending {
  background: rgba(244, 178, 85, 0.1);
  color: var(--amber);
  border: 1px solid rgba(244, 178, 85, 0.2);
}

.cohort-table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.cohort-table-empty p {
  font-size: 15px;
  font-weight: 600;
}

/* Footer */
.retention-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
  .retention-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .retention-curve {
    grid-template-columns: 1fr;
  }

  .retention-stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    grid-template-columns: 50px 1fr;
  }

  .cohort-table {
    font-size: 12px;
  }

  .cohort-table th,
  .cohort-table td {
    padding: 12px;
  }
}
/* Roast View Page Styling */

.roast-view-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #050713 0%, #1a1a2e 50%, #0f3460 100%);
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Error State */
.roast-view-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #050713 0%, #1a1a2e 50%, #0f3460 100%);
  padding: 2rem;
}

.roast-view-error-card {
  background: white;
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.roast-view-error-icon {
  color: #d32f2f;
  margin-bottom: 1.5rem;
}

.roast-view-error-card h2 {
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

.roast-view-error-card p {
  color: #666;
  margin-bottom: 2rem;
}

/* Loading State */
.roast-view-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  gap: 1rem;
  color: white;
}

.roast-view-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Header */
.roast-view-header {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
}

.roast-view-header-badge {
  display: inline-block;
  background: rgba(255, 87, 34, 0.2);
  color: #ff5722;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 87, 34, 0.4);
}

.roast-view-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ff5722, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roast-view-subheading {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.roast-view-subheading strong {
  color: #ff9100;
  font-weight: 600;
}

/* Card Container */
.roast-view-card-container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Social Proof */
.roast-view-social-proof {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.roast-view-stat {
  text-align: center;
  color: white;
}

.roast-view-stat-label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.roast-view-stat-value {
  display: block;
  font-size: 1.8rem;
  color: #ff9100;
  font-weight: 700;
}

/* Share Section */
.roast-view-share-section {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.roast-view-share-section h3 {
  color: white;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.roast-view-share-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.roast-view-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 0.95rem;
}

.roast-view-share-btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #20ba5f);
}

.roast-view-share-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.roast-view-share-btn-twitter {
  background: linear-gradient(135deg, #1da1f2, #1a91da);
}

.roast-view-share-btn-twitter:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29, 161, 242, 0.3);
}

.roast-view-share-btn-link {
  background: linear-gradient(135deg, #ff5722, #ff9100);
}

.roast-view-share-btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.3);
}

/* Main CTA Section */
.roast-view-cta-section {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.roast-view-cta-card {
  background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(255, 145, 0, 0.15));
  border: 2px solid rgba(255, 87, 34, 0.3);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

.roast-view-cta-card h2 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ff5722, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roast-view-cta-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.roast-view-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #ff5722, #ff9100);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.4);
}

.roast-view-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 87, 34, 0.6);
}

.roast-view-cta-primary:active {
  transform: translateY(-1px);
}

.roast-view-cta-subtext {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}

/* Trust Indicators */
.roast-view-trust {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.roast-view-trust-item {
  display: flex;
  gap: 1rem;
  color: white;
}

.roast-view-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.roast-view-trust-item strong {
  display: block;
  margin-bottom: 0.5rem;
  color: white;
}

.roast-view-trust-item p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* CTA Button */
.roast-view-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #ff5722, #ff9100);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.roast-view-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .roast-view-page {
    gap: 2rem;
    padding: 1rem 0.5rem;
  }

  .roast-view-header h1 {
    font-size: 1.8rem;
  }

  .roast-view-subheading {
    font-size: 1rem;
  }

  .roast-view-cta-card {
    padding: 2rem 1.5rem;
  }

  .roast-view-cta-card h2 {
    font-size: 1.4rem;
  }

  .roast-view-share-buttons {
    grid-template-columns: 1fr;
  }

  .roast-view-error-card {
    padding: 2rem;
    margin: 1rem;
  }
}
.privacy-consent{border:1px solid rgba(0,0,0,0.06);padding:18px;border-radius:8px;background:#fff}
.privacy-summary p{margin:0 0 12px;color:#333}
.privacy-actions{display:flex;gap:8px}
.privacy-settings{margin-top:12px;padding-top:12px;border-top:1px solid #eee}
.privacy-field{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.privacy-settings label{display:block;margin-bottom:8px}
.btn{padding:8px 12px;border-radius:6px;border:1px solid #ddd;background:#f7f7f7}
.btn-primary{background:#0b66ff;color:#fff;border:none}

/* Focus styles for accessibility */
input:focus, button:focus { outline: 3px solid rgba(11,102,255,0.25); outline-offset: 2px }.assessment-building-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1623 0%, #1a2f5e 100%);
  padding: 24px;
}

.building-content {
  max-width: 560px;
  width: 100%;
  text-align: center;
}

.building-header {
  margin-bottom: 60px;
}

.building-header h1 {
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 900;
  color: white;
  margin: 0 0 14px;
  letter-spacing: -0.04em;
}

.building-header p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.6;
}

.building-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 42px;
}

.building-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.building-step.completed {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.3);
}

.step-label-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.step-label {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.step-percent {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  min-width: 42px;
  text-align: right;
}

.step-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 10px;
}

.step-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee 0%, #7c3aed 100%);
}

.building-progress {
  height: 4px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(124, 58, 237, 0.9));
  border-radius: 999px;
  transform-origin: left;
}

.building-reveal {
  display: grid;
  gap: 24px;
  justify-items: center;
  padding: 60px 24px;
}

.reveal-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.reveal-score-shell {
  width: min(360px, 92vw);
  height: min(360px, 92vw);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.16), rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(59, 130, 246, 0.28);
  box-shadow: 0 0 110px rgba(59, 130, 246, 0.16);
}

.reveal-orb-shell {
  display: grid;
  place-items: center;
  width: min(320px, 85vw);
  height: min(320px, 85vw);
  position: relative;
}

.reveal-orb-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(99, 102, 241, 0.22), inset 0 0 36px rgba(34, 211, 238, 0.16);
  pointer-events: none;
}

.reveal-orb {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 35%, rgba(124, 58, 237, 0.2), transparent 34%),
    radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 90px rgba(31, 41, 55, 0.24),
    inset 0 0 24px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: reveal-orb-pulse 3.8s ease-in-out infinite;
}

.reveal-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 45%);
  opacity: 0.8;
}

@keyframes reveal-orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 24px 90px rgba(31, 41, 55, 0.24),
      inset 0 0 24px rgba(255, 255, 255, 0.05);
  }
  50% {
    transform: scale(1.015);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 26px 110px rgba(31, 41, 55, 0.28),
      inset 0 0 30px rgba(255, 255, 255, 0.08);
  }
}

.reveal-score {
  position: relative;
  font-size: clamp(4rem, 7vw, 5.5rem);
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  z-index: 1;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.18);
}

.reveal-orb-label {
  position: relative;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 14px;
  z-index: 1;
}

.reveal-copy {
  max-width: 440px;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
}

.reveal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(620px, 100%);
  margin: 0 auto;
}

.reveal-metric-card {
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
}

.reveal-metric-card span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.reveal-metric-card strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
}

.reveal-metric-card.positive {
  border-color: rgba(34, 197, 94, 0.24);
}

.reveal-metric-card.negative {
  border-color: rgba(248, 113, 113, 0.24);
}
/* Onboarding Page Styles */

.onboarding-container {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 42px);
  color: white;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(0, 255, 255, 0.13), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(128, 0, 128, 0.18), transparent 28%),
    linear-gradient(180deg, #050713 0%, #0b1220 48%, #050713 100%);
  background-size: 70px 70px, 70px 70px, auto, auto, auto;
}

.onboarding-welcome {
  position: relative;
  width: min(100%, 860px);
}

.onboarding-content {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.07), transparent 36%),
    linear-gradient(315deg, rgba(128, 0, 128, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(11, 18, 32, 0.94), rgba(5, 7, 19, 0.99));
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(18px) saturate(1.18);
}

.onboarding-content::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 82%);
  pointer-events: none;
}

.onboarding-hero {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 720px;
  gap: 16px;
  margin: 0 auto;
  text-align: center;
}

.onboarding-eyebrow {
  color: rgba(0, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.onboarding-title {
  margin: 0;
  color: white;
  font-family: var(--display, "Segoe UI", system-ui, sans-serif);
  font-size: clamp(2.7rem, 8vw, 5.4rem);
  font-weight: 950;
  line-height: 0.95;
}

.onboarding-title span {
  color: var(--cyan, cyan);
  text-shadow: 0 0 36px rgba(0, 255, 255, 0.18);
}

.onboarding-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.08rem, 2.2vw, 1.45rem);
  font-weight: 760;
  line-height: 1.45;
}

.onboarding-description {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  font-weight: 640;
  line-height: 1.75;
}

.onboarding-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.benefit-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(0, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 255, 255, 0.052), transparent 38%),
    rgba(255, 255, 255, 0.046);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.benefit-item:hover {
  border-color: rgba(0, 255, 255, 0.28);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.24),
    0 0 42px rgba(0, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.benefit-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--cyan, cyan);
  background: rgba(0, 255, 255, 0.075);
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.08);
}

.benefit-text {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.benefit-text strong {
  color: white;
  font-size: 0.98rem;
  font-weight: 850;
}

.benefit-text span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  font-weight: 640;
  line-height: 1.45;
}

.onboarding-complete-card {
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 36px));
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(11, 18, 32, 0.86);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.onboarding-complete-card h2,
.onboarding-complete-card p {
  margin: 0;
}

.onboarding-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.38);
  animation: float 20s infinite ease-in-out;
  animation-delay: var(--delay);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.35);
}

@keyframes float {
  0%,
  100% {
    opacity: 0;
    transform: translateY(0) translateX(0);
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) translateX(100px);
  }
}

@media (max-width: 720px) {
  .onboarding-benefits {
    grid-template-columns: 1fr;
  }

  .benefit-item {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .onboarding-container {
    align-items: flex-start;
    padding: 14px;
  }

  .onboarding-content {
    padding: 30px 18px;
  }
}
.view-mode-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 42%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.14), transparent 38%),
    var(--bg, #0b1020);
}

.view-mode-card {
  width: min(1200px, 100%);
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.view-mode-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5b4fc;
}

.view-mode-card h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
}

.view-mode-lede {
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.view-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.view-mode-option {
  text-align: left;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.view-mode-option:hover,
.view-mode-option.selected {
  border-color: rgba(139, 92, 246, 0.65);
  background: rgba(139, 92, 246, 0.08);
}

.view-mode-option-top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.view-mode-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
  flex-shrink: 0;
}

.view-mode-option strong {
  display: block;
  font-size: 1.05rem;
}

.view-mode-option-subtitle {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.view-mode-selected-badge {
  margin-left: auto;
  color: #86efac;
}

.view-mode-option p {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.view-mode-option ul {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
}

.view-mode-continue-btn {
  margin-top: 1.5rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.25rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.view-mode-continue-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 768px) {
  .view-mode-options {
    grid-template-columns: 1fr;
  }

  .view-mode-card {
    padding: 1.25rem;
  }
}
/* src/styles/user-assessment-history.css */
/* Styling for user assessment history and score tracking */

.assessment-history-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.history-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid #e0e7ff;
  padding-bottom: 1rem;
}

.history-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  color: #1f2937;
  font-weight: 600;
}

.user-info {
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.auth-required {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  background: #fff;
  border-radius: 8px;
}

.error-banner {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #991b1b;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.error-banner p {
  margin: 0;
}

.loading-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #6b7280;
  background: #fff;
  border-radius: 8px;
}

.history-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Trends Section */
.trends-section {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.trends-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #1f2937;
}

.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.trend-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2);
}

.trend-label {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
  text-align: center;
}

.trend-value {
  font-size: 2rem;
  font-weight: 700;
}

.trend-value.up {
  color: #86efac;
}

.trend-value.down {
  color: #fca5a5;
}

.trend-value.same {
  color: #fbbf24;
}

.trend-arrow {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  opacity: 0.7;
}

/* Assessments Section */
.assessments-section {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.assessments-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #1f2937;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #9ca3af;
  background: #f9fafb;
  border-radius: 6px;
}

.empty-state p {
  margin: 0;
}

.assessments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.assessment-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.assessment-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 0.75rem;
}

.card-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #1f2937;
  flex: 1;
}

.card-date {
  font-size: 0.85rem;
  color: #6b7280;
  white-space: nowrap;
  margin-left: 1rem;
}

.card-scores {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.score-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.score-label {
  color: #6b7280;
  font-size: 0.9rem;
}

.score-value {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
}

.card-footer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.personality-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #4f46e5;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Timeline Section */
.timeline-section {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.timeline-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #1f2937;
}

.score-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.timeline-entry {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 4px solid #667eea;
}

.timeline-date {
  font-weight: 600;
  color: #1f2937;
  min-width: 120px;
}

.timeline-values {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.score-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #4f46e5;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .assessment-history-container {
    padding: 1rem;
  }

  .history-header h2 {
    font-size: 1.5rem;
  }

  .trends-grid {
    grid-template-columns: 1fr;
  }

  .assessments-list {
    grid-template-columns: 1fr;
  }

  .card-header {
    flex-direction: column;
  }

  .card-date {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .timeline-entry {
    flex-direction: column;
  }
}

/* Scrollbar Styling */
.score-timeline::-webkit-scrollbar {
  width: 8px;
}

.score-timeline::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.score-timeline::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.score-timeline::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Minimal skeleton styles */
.skeleton {
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.list-skeleton {
  display: grid;
  gap: 14px;
}
.list-skeleton-item {
  display: grid;
  gap: 10px;
}
.page-skeleton {
  display: grid;
  gap: 24px;
  max-width: 1220px;
  margin: 0 auto;
}
.page-skeleton-header {
  display: grid;
  gap: 12px;
  max-width: 680px;
}
.page-skeleton-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.page-skeleton-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  padding: 22px;
  display: grid;
  gap: 16px;
}
.page-skeleton-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.page-skeleton-card-body {
  display: grid;
  gap: 12px;
}
.offline-banner {
  background: #fff3cd;
  color: #856404;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
}
.error-state {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid #fdecea;
  padding: 16px;
  background: #fff5f5;
  border-radius: 8px;
}
.error-state h3 { margin: 0 0 6px 0; }
.error-actions { margin-top: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: #4f46e5; color: white; padding: 8px 12px; border-radius: 6px; }
.muted { color: #6b7280; }
/* Digital Twin Dashboard Styling */

.digital-twin-dashboard {
  background: linear-gradient(135deg, var(--bg) 0%, #0a0f20 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.digital-twin-dashboard.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.digital-twin-dashboard .empty-state {
  text-align: center;
  padding: 60px 20px;
  user-select: none;
}

.digital-twin-dashboard .empty-state h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: var(--cyan);
  font-weight: 600;
}

.digital-twin-dashboard .empty-state p {
  font-size: 16px;
  color: rgba(251, 248, 255, 0.7);
  margin: 8px 0;
  line-height: 1.5;
}

/* Header */
.twin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.twin-title h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.twin-subtitle {
  font-size: 14px;
  color: rgba(251, 248, 255, 0.6);
  margin: 0;
}

.twin-meta {
  display: flex;
  gap: 32px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.meta-item .label {
  font-size: 12px;
  color: rgba(251, 248, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.meta-item .value {
  font-size: 24px;
  font-weight: 600;
  color: var(--cyan);
}

.meta-item .value.ready {
  color: #10b981;
}

/* Tabs */
.twin-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  overflow-x: auto;
  padding-bottom: 12px;
}

.tab {
  background: none;
  border: none;
  color: rgba(251, 248, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab:hover {
  color: var(--cyan);
}

.tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* Content */
.twin-content {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content {
  padding: 24px 0;
}

.tab-content.empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(251, 248, 255, 0.6);
}

/* Overview Tab */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

.overview-section {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.overview-section.full-width {
  grid-column: 1 / -1;
}

.overview-section h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--cyan);
}

.state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.state-item {
  display: flex;
  flex-direction: column;
}

.state-item label {
  font-size: 12px;
  color: rgba(251, 248, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.state-item value {
  font-size: 18px;
  font-weight: 600;
  color: var(--cyan);
}

.future-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  background: rgba(98, 228, 209, 0.05);
  border: 1px solid rgba(98, 228, 209, 0.2);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-card h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(251, 248, 255, 0.7);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 8px;
}

.stat-value.positive {
  color: #10b981;
}

.stat-value.warning {
  color: #f59e0b;
}

.stat-desc {
  margin: 0;
  font-size: 12px;
  color: rgba(251, 248, 255, 0.5);
}

.insight-box {
  background: rgba(98, 228, 209, 0.1);
  border-left: 4px solid var(--cyan);
  padding: 16px;
  border-radius: 4px;
}

.insight-box p {
  margin: 0;
  line-height: 1.6;
  color: rgba(251, 248, 255, 0.8);
}

.digital-twin-dashboard.digital-twin-landing {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(7, 10, 23, 1) 100%);
  padding: 32px;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.16);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: 2.4fr 1.6fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-identity {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-copy p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 680px;
  font-size: 1rem;
}

.hero-quick-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hero-quick-summary div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 16px;
  min-height: 88px;
}

.hero-quick-summary span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.hero-quick-summary strong {
  display: block;
  font-size: 1.2rem;
  color: #fff;
}

.hero-panel {
  display: grid;
  gap: 20px;
}

.hero-score-card,
.hero-scenario-summary,
.legacy-summary-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 24px;
}

.hero-score-card {
  display: grid;
  gap: 20px;
}

.hero-score-copy span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.hero-score-copy strong {
  font-size: 2.5rem;
  color: var(--cyan);
  line-height: 1;
}

.hero-score-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hero-score-meta div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
}

.hero-score-meta span,
.hero-score-meta strong {
  display: block;
}

.hero-score-meta span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-score-meta strong {
  color: #fff;
  font-size: 1rem;
}

.hero-scenario-summary {
  display: grid;
  gap: 18px;
}

.hero-scenario-summary-copy span {
  display: inline-block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hero-scenario-summary-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
}

.hero-scenario-summary-copy p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
}

.hero-scenario-summary .scenario-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hero-scenario-summary .scenario-metrics div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
}

.hero-scenario-summary .scenario-metrics strong {
  display: block;
  font-size: 1.25rem;
  color: #fff;
}

.hero-scenario-summary .scenario-metrics span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}

.hero-scenario-summary--positive {
  border-color: var(--green-500);
}

.hero-scenario-summary--warning {
  border-color: var(--amber-500);
}

.hero-scenario-summary--danger {
  border-color: var(--red-500);
}

.legacy-summary-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.legacy-summary-card div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
}

.legacy-summary-card span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 8px;
}

.legacy-summary-card strong {
  color: #fff;
  font-size: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 28px;
}

.dashboard-main {
  display: grid;
  gap: 24px;
}

.dashboard-sidebar {
  display: grid;
  gap: 22px;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 22px;
}

.dashboard-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 24px;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.section-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
}

.section-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
}

.summary-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.metric-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
}

.metric-card span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.metric-card strong {
  display: block;
  color: #fff;
  font-size: 1.25rem;
}

.dashboard-cta-panel {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-cta-panel h2 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
}

.dashboard-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
}

.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #fff;
  border-radius: 16px;
  padding: 14px 24px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .dashboard-grid,
  .hero-panel,
  .hero-quick-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-quick-summary,
  .hero-score-meta,
  .hero-scenario-summary .scenario-metrics,
  .legacy-summary-card,
  .summary-metrics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-cta-panel {
    flex-direction: column;
    align-items: stretch;
  }
}

.insight-box strong {
  color: var(--cyan);
}

/* Futures Tab */
.futures-chart {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  overflow-x: auto;
}

.chart-container {
  min-height: 200px;
}

.ascii-chart pre {
  margin: 0;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.2;
  color: var(--cyan);
  letter-spacing: 2px;
}

.chart-legend {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(251, 248, 255, 0.6);
}

.futures-table {
  overflow-x: auto;
  margin-top: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

table thead {
  background: rgba(139, 92, 246, 0.2);
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--cyan);
}

table td {
  padding: 12px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  font-size: 14px;
}

table td.highlight {
  color: var(--cyan);
  font-weight: 600;
}

table tbody tr:hover {
  background: rgba(139, 92, 246, 0.05);
}

/* Simulator Tab */
.section-desc {
  color: rgba(251, 248, 255, 0.6);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.simulator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.decision-card {
  background: rgba(139, 92, 246, 0.1);
  border: 2px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.decision-card:hover {
  border-color: var(--cyan);
  background: rgba(98, 228, 209, 0.1);
  transform: translateY(-4px);
}

.decision-card.selected {
  border-color: var(--cyan);
  background: rgba(98, 228, 209, 0.15);
  box-shadow: 0 0 20px rgba(98, 228, 209, 0.2);
}

.decision-card h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.decision-impact {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.decision-impact span {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.2);
}

.decision-impact span.positive {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.decision-impact span.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.confidence {
  margin: 0;
  font-size: 12px;
  color: rgba(251, 248, 255, 0.5);
}

.simulator-result {
  background: rgba(98, 228, 209, 0.1);
  border: 1px solid rgba(98, 228, 209, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}

.simulator-result h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--cyan);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.result-item {
  display: flex;
  flex-direction: column;
}

.result-item label {
  font-size: 12px;
  color: rgba(251, 248, 255, 0.6);
  margin-bottom: 4px;
}

.result-item value {
  font-size: 20px;
  font-weight: 700;
  color: var(--cyan);
}

.result-item value.positive {
  color: #10b981;
}

.result-item value.negative {
  color: #ef4444;
}

.result-item value.warning {
  color: #f59e0b;
}

.result-insight {
  background: rgba(0, 0, 0, 0.2);
  border-left: 4px solid var(--cyan);
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}

.result-insight p {
  margin: 0;
  color: rgba(251, 248, 255, 0.8);
}

.result-insight strong {
  color: var(--cyan);
}

/* Behavior Tab */
.behavior-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.behavior-month {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  padding: 12px;
}

.behavior-month label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 8px;
}

.meter {
  background: rgba(0, 0, 0, 0.3);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.meter .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--purple) 0%, var(--cyan) 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.meter .bar.success {
  background: linear-gradient(90deg, #10b981 0%, var(--cyan) 100%);
}

.label-small {
  margin: 4px 0 8px 0;
  font-size: 11px;
  color: rgba(251, 248, 255, 0.5);
}

/* Stress Test Tab */
.stress-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.stress-scenario {
  background: rgba(139, 92, 246, 0.1);
  border: 2px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.stress-scenario.survived {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.stress-scenario.failed {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.stress-scenario h4 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--text);
}

.result-detail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}

.result-detail .label {
  color: rgba(251, 248, 255, 0.6);
}

.result-detail .value {
  font-weight: 600;
}

.result-detail .value.positive {
  color: #10b981;
}

.result-detail .value.negative {
  color: #ef4444;
}

.result-detail .value.warning {
  color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
  .digital-twin-dashboard {
    padding: 20px;
  }

  .twin-header {
    flex-direction: column;
    gap: 16px;
  }

  .twin-meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .meta-item {
    align-items: flex-start;
  }

  .twin-tabs {
    gap: 8px;
  }

  .tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  .state-grid,
  .future-stats {
    grid-template-columns: 1fr;
  }

  .simulator-grid {
    grid-template-columns: 1fr;
  }

  .result-grid {
    grid-template-columns: 1fr;
  }

  .behavior-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stress-results {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════
   PHASE-BASED FLOW REDESIGN
   ══════════════════════════════════════════════ */

/* ── Scroll Reveal Animations ── */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.scroll-reveal.scroll-revealed {
  animation: slideInUp 0.6s ease-out forwards;
}

.scroll-reveal-fade {
  opacity: 0;
}

.scroll-reveal-fade.scroll-revealed {
  animation: fadeIn 0.8s ease-out forwards;
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
}

.scroll-reveal-left.scroll-revealed {
  animation: slideInLeft 0.6s ease-out forwards;
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(30px);
}

.scroll-reveal-right.scroll-revealed {
  animation: slideInRight 0.6s ease-out forwards;
}

/* Stagger animations for multiple elements */
.scroll-reveal-stagger:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal-stagger:nth-child(2) { animation-delay: 100ms; }
.scroll-reveal-stagger:nth-child(3) { animation-delay: 200ms; }
.scroll-reveal-stagger:nth-child(4) { animation-delay: 300ms; }
.scroll-reveal-stagger:nth-child(5) { animation-delay: 400ms; }
.scroll-reveal-stagger:nth-child(n+6) { animation-delay: 500ms; }

/* ── Phase Container ── */
.phase-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

.phase-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Phase Indicator ── */
.phase-indicator-wrapper {
  padding: 2rem 2rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.phase-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.phase-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: var(--muted);
  font-weight: 500;
}

.phase-dot:hover {
  color: var(--cyan);
}

.phase-dot.active {
  color: var(--cyan);
}

.phase-dot.completed {
  color: var(--emerald);
}

.phase-icon {
  font-size: 1.5rem;
}

.phase-label {
  font-size: 0.875rem;
  white-space: nowrap;
}

.phase-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  transition: background 0.3s ease;
}

.phase-connector.completed {
  background: var(--emerald);
}

.phase-progress-text {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.phase-current {
  font-weight: 600;
  color: var(--cyan);
}

.phase-count {
  margin-left: 0.5rem;
  color: var(--muted-2);
}

/* ── Phase Navigation ── */
.phase-navigation-wrapper {
  padding: 2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: auto;
}

.phase-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
}

.phase-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.phase-nav-btn:hover {
  background: var(--glass-hover);
  border-color: var(--cyan);
  color: var(--cyan);
}

.phase-nav-back {
  order: 1;
}

.phase-nav-next {
  order: 3;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-color: transparent;
  color: var(--bg);
}

.phase-nav-next:hover {
  opacity: 0.9;
}

.phase-nav-restart {
  order: 3;
  background: var(--glass);
  border-color: var(--emerald);
  color: var(--emerald);
}

.phase-nav-spacer {
  order: 2;
  flex: 1;
}

.phase-nav-arrow {
  font-size: 1.2rem;
}

.discover-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.form-group input {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.05);
}

.form-group input::placeholder {
  color: var(--muted-2);
}

.form-group select {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.form-group select:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.05);
}

.form-group select option {
  background: var(--bg);
  color: var(--text);
}

.discover-welcome {
  text-align: center;
  padding: 3rem 2rem;
}

.discover-hero {
  margin-bottom: 3rem;
}

.discover-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.discover-subtitle {
  font-size: 1.125rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.discover-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.benefit-icon {
  font-size: 1.2rem;
}

.discover-cta {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border: none;
  border-radius: var(--radius);
  color: var(--bg);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.discover-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 255, 255, 0.2);
}

.discover-privacy {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.discover-privacy a {
  color: var(--cyan);
  text-decoration: none;
}

.discover-quiz {
  max-width: 600px;
  margin: 0 auto;
}

.discover-section-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.discover-quiz-subtitle {
  color: var(--muted);
  margin-bottom: 2rem;
}

.discover-score-reveal {
  max-width: 700px;
  margin: 0 auto;
}

.discover-score-explanation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.score-band-explanation {
  border-right: 1px solid var(--border);
  padding-right: 2rem;
}

.explanation-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.explanation-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cyan);
}

.score-band-meaning {
  padding-left: 2rem;
}

.score-band-meaning p {
  color: var(--text-2);
  line-height: 1.6;
}

.discover-next-cta {
  width: 100%;
  padding: 1rem;
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border: none;
  border-radius: var(--radius);
  color: var(--bg);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.discover-next-cta:hover {
  transform: translateY(-2px);
}

/* ── UNDERSTAND Phase ── */
.understand-phase {
  width: 100%;
}

.understand-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.understand-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.understand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.understand-section {
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.understand-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--cyan);
}

.insights-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.insight-card {
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 1rem;
  border-left: 4px solid;
}

.insight-positive {
  background: rgba(16, 185, 129, 0.08);
  border-left-color: var(--emerald);
}

.insight-warning {
  background: rgba(255, 193, 7, 0.08);
  border-left-color: var(--purple);
}

.insight-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.insight-content {
  flex: 1;
}

.insight-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.insight-description {
  font-size: 0.9rem;
  color: var(--muted);
}

.understand-action-focus {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(128, 0, 128, 0.08));
  border-color: var(--cyan);
}

.understand-action-subtitle {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

.understand-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.understand-export-btn,
.understand-next-btn {
  flex: 1;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.understand-next-btn {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-color: transparent;
  color: var(--bg);
}

.understand-next-btn:hover {
  transform: translateY(-2px);
}

/* ── OPTIMIZE Phase ── */
.optimize-phase {
  width: 100%;
}

.optimize-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.optimize-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.optimize-section {
  margin-bottom: 2rem;
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.optimize-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.optimize-section-desc {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.scenario-card {
  padding: 1.5rem;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 200px;
  justify-content: flex-start;
}

.scenario-card:hover {
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.05);
}

.scenario-card.selected {
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.1);
}

.scenario-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.scenario-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.scenario-description {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.optimize-results {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(128, 0, 128, 0.08));
  border-color: var(--cyan);
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.timeline-point {
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.timeline-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.timeline-value {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timeline-score {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cyan);
}

.timeline-band {
  font-size: 0.9rem;
  color: var(--text-2);
}

.timeline-trend {
  font-size: 0.85rem;
  color: var(--emerald);
}

.optimize-save-btn {
  width: 100%;
  padding: 1rem;
  margin-top: 1.5rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.optimize-save-btn:hover {
  background: var(--glass-hover);
  border-color: var(--emerald);
  color: var(--emerald);
}

.optimize-next-btn {
  width: 100%;
  padding: 1rem;
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border: none;
  border-radius: var(--radius);
  color: var(--bg);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.optimize-next-btn:hover {
  transform: translateY(-2px);
}

/* ── EXECUTE Phase ── */
.execute-phase {
  width: 100%;
}

.execute-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.execute-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.execute-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.overview-card {
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.overview-metric {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.metric-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transition: width 0.3s ease;
}

.metric-note {
  font-size: 0.8rem;
  color: var(--muted-2);
  margin-top: 0.5rem;
}

.execute-section {
  margin-bottom: 2rem;
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.execute-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--cyan);
}

.missions-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mission-item {
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 1rem;
  transition: all 0.3s ease;
  align-items: flex-start;
}

.mission-item:hover {
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.04);
}

.mission-item.completed {
  opacity: 0.6;
  border-color: var(--emerald);
}

.mission-checkbox {
  position: relative;
  margin-top: 0.25rem;
}

.mission-checkbox input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--emerald);
}

.mission-content {
  flex: 1;
}

.mission-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.mission-icon {
  font-size: 1.25rem;
}

.mission-title {
  font-weight: 600;
  flex: 1;
}

.mission-priority {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.mission-priority.priority-high {
  background: rgba(255, 107, 53, 0.2);
  color: var(--purple);
}

.mission-priority.priority-medium {
  background: rgba(245, 158, 11, 0.2);
  color: var(--purple);
}

.mission-description {
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.mission-time {
  font-size: 0.8rem;
  color: var(--muted-2);
}

.execute-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.quick-action-btn {
  padding: 1.5rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  font-weight: 600;
}

.quick-action-btn:hover {
  background: var(--glass-hover);
  border-color: var(--cyan);
}

.action-icon {
  font-size: 1.5rem;
}

.action-text {
  font-size: 0.95rem;
}

.progress-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.progress-card {
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.progress-label {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.progress-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.progress-detail {
  font-size: 0.8rem;
  color: var(--muted-2);
}

.execute-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--text);
}

/* ── Advanced Features Drawer ── */
.advanced-features-trigger {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border: none;
  border-radius: var(--radius-pill);
  color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

.advanced-features-trigger:hover {
  transform: scale(1.1);
}

.trigger-icon {
  font-size: 1.5rem;
}

.trigger-text {
  display: none;
}

.advanced-features-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}

.advanced-features-drawer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 90vh;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.drawer-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.drawer-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.drawer-close:hover {
  color: var(--text);
}

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 2rem;
  flex: 1;
}

.feature-card {
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--text);
}

.feature-card:hover {
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.05);
  transform: translateY(-2px);
}

.feature-icon {
  font-size: 2rem;
}

.feature-label {
  margin: 0;
  font-size: 0.95rem;
}

.feature-description {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
}

.feature-arrow {
  margin-top: auto;
}

.drawer-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.drawer-back {
  padding: 1rem 2rem;
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--cyan);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: color 0.3s ease;
}

.drawer-back:hover {
  color: var(--emerald);
}

.drawer-body {
  padding: 2rem;
  flex: 1;
  overflow-y: auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .phase-content {
    padding: 1.5rem;
  }

  .understand-grid {
    grid-template-columns: 1fr;
  }

  .optimize-phase {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .phase-dot {
    padding: 0.75rem;
  }

  .phase-label {
    display: none;
  }

  .phase-connector {
    display: none;
  }

  .discover-title {
    font-size: 1.75rem;
  }

  .discover-benefits {
    gap: 1rem;
  }

  .benefit-item {
    font-size: 0.85rem;
  }

  .discover-score-explanation {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .score-band-explanation {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .score-band-meaning {
    padding-left: 0;
    padding-top: 1rem;
  }

  .understand-title,
  .optimize-title,
  .execute-title {
    font-size: 1.5rem;
  }

  .phase-navigation {
    flex-direction: column;
    gap: 0.75rem;
  }

  .phase-nav-btn {
    width: 100%;
    order: unset !important;
  }

  .phase-nav-spacer {
    display: none;
  }

  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .advanced-features-trigger {
    width: 48px;
    height: 48px;
    bottom: 1rem;
    right: 1rem;
  }

  .drawer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .phase-indicator {
    flex-wrap: wrap;
  }

  .discover-hero {
    margin-bottom: 1.5rem;
  }

  .discover-title {
    font-size: 1.5rem;
  }

  .scenarios-grid {
    grid-template-columns: 1fr;
  }

  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .execute-overview {
    grid-template-columns: 1fr;
  }

  .missions-board {
    gap: 0.75rem;
  }

  .mission-item {
    padding: 1rem;
    gap: 0.75rem;
  }

  .execute-quick-actions {
    grid-template-columns: 1fr;
  }

  .drawer-grid {
    grid-template-columns: 1fr;
  }
}
/*
  DEPRECATED: This file is part of a legacy design system and should not be used.
  All color variables have been migrated to src/styles.css.
  This file is intentionally left blank to prevent style conflicts.
  It will be removed in a future update.
*/