:root,
[data-air-theme-host],
.app-host-embedded {
  --font-body: Inter, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Avenir Next", Inter, "Segoe UI", system-ui, sans-serif;
  --sidebar: #101014;
  --sidebar-raised: #19191f;
  --sidebar-text: #a8a8b4;
  --sidebar-strong: #f6f5fa;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f8f8fa;
  --text: #1e1e25;
  --text-soft: #6d6d78;
  --text-faint: #9898a3;
  --border: #e7e6eb;
  --border-strong: #d9d8df;
  --accent: #7662e8;
  --accent-hover: #6752dd;
  --accent-soft: #eeeafd;
  --accent-ink: #513db8;
  --positive: #198c68;
  --positive-soft: #e6f6f0;
  --warning: #a96810;
  --warning-soft: #fff3dc;
  --danger: #c84454;
  --danger-soft: #fdebee;
  --shadow: 0 1px 2px rgba(24, 24, 31, .04), 0 12px 36px rgba(24, 24, 31, .05);
  --shadow-lg: 0 28px 80px rgba(10, 10, 16, .22);
  --radius: 16px;
  --space: 1;
  --section-rhythm-tight: 8px;
  --section-rhythm-compact: 16px;
  --section-rhythm-comfortable: 28px;
  --section-rhythm-spacious: 48px;
  --section-rhythm-dramatic: 72px;
  --section-gap: var(--section-rhythm-comfortable);
  --z-base: 1;
  --z-sticky: 20;
  --z-popover: 50;
  --z-drawer-backdrop: 90;
  --z-drawer: 100;
  --z-modal: 110;
  --z-toast: 120;
  background-color: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"],
[data-air-theme-host][data-theme="dark"],
.app-host-embedded[data-theme="dark"] {
  --sidebar: #0c0c10;
  --sidebar-raised: #18181f;
  --sidebar-text: #9f9eac;
  --sidebar-strong: #f6f5fa;
  --bg: #121217;
  --surface: #1a1a21;
  --surface-raised: #202028;
  --surface-muted: #16161c;
  --text: #f0eff4;
  --text-soft: #a6a4b0;
  --text-faint: #787682;
  --border: #2b2a33;
  --border-strong: #3a3944;
  --accent-soft: #2b2549;
  --accent-ink: #b8aaff;
  --positive: #6ed6b0;
  --positive-soft: #18392f;
  --warning: #efbc68;
  --warning-soft: #3a2e19;
  --danger: #f28b99;
  --danger-soft: #432229;
  --shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 14px 42px rgba(0, 0, 0, .18);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, .5);
}

/* 17 Central Accents */
:root[data-accent="violet"], [data-air-theme-host][data-accent="violet"], .app-host-embedded[data-accent="violet"] { --accent: #7662e8; --accent-hover: #6752dd; --accent-soft: #eeeafd; --accent-ink: #513db8; }
:root[data-accent="blue"], [data-air-theme-host][data-accent="blue"], .app-host-embedded[data-accent="blue"] { --accent: #3973e7; --accent-hover: #2e63ce; --accent-soft: #e8effe; --accent-ink: #295cb9; }
:root[data-accent="emerald"], [data-air-theme-host][data-accent="emerald"], .app-host-embedded[data-accent="emerald"] { --accent: #198c68; --accent-hover: #147456; --accent-soft: #e6f6f0; --accent-ink: #12694e; }
:root[data-accent="rose"], [data-air-theme-host][data-accent="rose"], .app-host-embedded[data-accent="rose"] { --accent: #d54d72; --accent-hover: #ba3d60; --accent-soft: #fdebf0; --accent-ink: #a83454; }
:root[data-accent="amber"], [data-air-theme-host][data-accent="amber"], .app-host-embedded[data-accent="amber"] { --accent: #b57916; --accent-hover: #96620f; --accent-soft: #fff3dc; --accent-ink: #80520d; }
:root[data-accent="red"], [data-air-theme-host][data-accent="red"], .app-host-embedded[data-accent="red"] { --accent: #dc2626; --accent-hover: #b91c1c; --accent-soft: #fee2e2; --accent-ink: #991b1b; }
:root[data-accent="orange"], [data-air-theme-host][data-accent="orange"], .app-host-embedded[data-accent="orange"] { --accent: #ea580c; --accent-hover: #c2410c; --accent-soft: #ffedd5; --accent-ink: #9a3412; }
:root[data-accent="yellow"], [data-air-theme-host][data-accent="yellow"], .app-host-embedded[data-accent="yellow"] { --accent: #ca8a04; --accent-hover: #a16207; --accent-soft: #fef9c3; --accent-ink: #854d0e; }
:root[data-accent="lime"], [data-air-theme-host][data-accent="lime"], .app-host-embedded[data-accent="lime"] { --accent: #65a30d; --accent-hover: #4d7c0f; --accent-soft: #ecfccb; --accent-ink: #3f6212; }
:root[data-accent="green"], [data-air-theme-host][data-accent="green"], .app-host-embedded[data-accent="green"] { --accent: #16a34a; --accent-hover: #15803d; --accent-soft: #dcfce7; --accent-ink: #166534; }
:root[data-accent="teal"], [data-air-theme-host][data-accent="teal"], .app-host-embedded[data-accent="teal"] { --accent: #0d9488; --accent-hover: #0f766e; --accent-soft: #ccfbf1; --accent-ink: #115e59; }
:root[data-accent="cyan"], [data-air-theme-host][data-accent="cyan"], .app-host-embedded[data-accent="cyan"] { --accent: #0891b2; --accent-hover: #0e7490; --accent-soft: #cffafe; --accent-ink: #155e75; }
:root[data-accent="sky"], [data-air-theme-host][data-accent="sky"], .app-host-embedded[data-accent="sky"] { --accent: #0284c7; --accent-hover: #0369a1; --accent-soft: #e0f2fe; --accent-ink: #075985; }
:root[data-accent="indigo"], [data-air-theme-host][data-accent="indigo"], .app-host-embedded[data-accent="indigo"] { --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #e0e7ff; --accent-ink: #3730a3; }
:root[data-accent="purple"], [data-air-theme-host][data-accent="purple"], .app-host-embedded[data-accent="purple"] { --accent: #9333ea; --accent-hover: #7e22ce; --accent-soft: #f3e8ff; --accent-ink: #6b21a8; }
:root[data-accent="fuchsia"], [data-air-theme-host][data-accent="fuchsia"], .app-host-embedded[data-accent="fuchsia"] { --accent: #c026d3; --accent-hover: #a21caf; --accent-soft: #fae8ff; --accent-ink: #86198f; }
:root[data-accent="pink"], [data-air-theme-host][data-accent="pink"], .app-host-embedded[data-accent="pink"] { --accent: #db2777; --accent-hover: #be185d; --accent-soft: #fce7f3; --accent-ink: #9d174d; }

/* Dark mode overrides for contrast */
:root[data-theme="dark"][data-accent="violet"], [data-air-theme-host][data-theme="dark"][data-accent="violet"], .app-host-embedded[data-theme="dark"][data-accent="violet"] { --accent-soft: #2b2549; --accent-ink: #b8aaff; }
:root[data-theme="dark"][data-accent="blue"], [data-air-theme-host][data-theme="dark"][data-accent="blue"], .app-host-embedded[data-theme="dark"][data-accent="blue"] { --accent-soft: #182e54; --accent-ink: #8cb4ff; }
:root[data-theme="dark"][data-accent="emerald"], [data-air-theme-host][data-theme="dark"][data-accent="emerald"], .app-host-embedded[data-theme="dark"][data-accent="emerald"] { --accent-soft: #18392f; --accent-ink: #71d4b1; }
:root[data-theme="dark"][data-accent="rose"], [data-air-theme-host][data-theme="dark"][data-accent="rose"], .app-host-embedded[data-theme="dark"][data-accent="rose"] { --accent-soft: #44222f; --accent-ink: #f39ab1; }
:root[data-theme="dark"][data-accent="amber"], [data-air-theme-host][data-theme="dark"][data-accent="amber"], .app-host-embedded[data-theme="dark"][data-accent="amber"] { --accent-soft: #3a2e19; --accent-ink: #efbc68; }
:root[data-theme="dark"][data-accent="red"], [data-air-theme-host][data-theme="dark"][data-accent="red"], .app-host-embedded[data-theme="dark"][data-accent="red"] { --accent-soft: #451a1a; --accent-ink: #fca5a5; }
:root[data-theme="dark"][data-accent="orange"], [data-air-theme-host][data-theme="dark"][data-accent="orange"], .app-host-embedded[data-theme="dark"][data-accent="orange"] { --accent-soft: #431f13; --accent-ink: #fdba74; }
:root[data-theme="dark"][data-accent="yellow"], [data-air-theme-host][data-theme="dark"][data-accent="yellow"], .app-host-embedded[data-theme="dark"][data-accent="yellow"] { --accent-soft: #3d3011; --accent-ink: #fde047; }
:root[data-theme="dark"][data-accent="lime"], [data-air-theme-host][data-theme="dark"][data-accent="lime"], .app-host-embedded[data-theme="dark"][data-accent="lime"] { --accent-soft: #273812; --accent-ink: #bef264; }
:root[data-theme="dark"][data-accent="green"], [data-air-theme-host][data-theme="dark"][data-accent="green"], .app-host-embedded[data-theme="dark"][data-accent="green"] { --accent-soft: #143820; --accent-ink: #86efac; }
:root[data-theme="dark"][data-accent="teal"], [data-air-theme-host][data-theme="dark"][data-accent="teal"], .app-host-embedded[data-theme="dark"][data-accent="teal"] { --accent-soft: #123835; --accent-ink: #5eead4; }
:root[data-theme="dark"][data-accent="cyan"], [data-air-theme-host][data-theme="dark"][data-accent="cyan"], .app-host-embedded[data-theme="dark"][data-accent="cyan"] { --accent-soft: #11363f; --accent-ink: #67e8f9; }
:root[data-theme="dark"][data-accent="sky"], [data-air-theme-host][data-theme="dark"][data-accent="sky"], .app-host-embedded[data-theme="dark"][data-accent="sky"] { --accent-soft: #103248; --accent-ink: #7dd3fc; }
:root[data-theme="dark"][data-accent="indigo"], [data-air-theme-host][data-theme="dark"][data-accent="indigo"], .app-host-embedded[data-theme="dark"][data-accent="indigo"] { --accent-soft: #23224d; --accent-ink: #a5b4fc; }
:root[data-theme="dark"][data-accent="purple"], [data-air-theme-host][data-theme="dark"][data-accent="purple"], .app-host-embedded[data-theme="dark"][data-accent="purple"] { --accent-soft: #381b52; --accent-ink: #d8b4fe; }
:root[data-theme="dark"][data-accent="fuchsia"], [data-air-theme-host][data-theme="dark"][data-accent="fuchsia"], .app-host-embedded[data-theme="dark"][data-accent="fuchsia"] { --accent-soft: #44174a; --accent-ink: #f0abfc; }
:root[data-theme="dark"][data-accent="pink"], [data-air-theme-host][data-theme="dark"][data-accent="pink"], .app-host-embedded[data-theme="dark"][data-accent="pink"] { --accent-soft: #4a1831; --accent-ink: #f472b6; }

:root[data-density="compact"], [data-air-theme-host][data-density="compact"], .app-host-embedded[data-density="compact"] { --space: .84; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: -3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.boot-state, .fatal { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; text-align: center; }
.boot-mark, .fatal-mark { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; background: var(--accent); color: white; font: 800 22px var(--font-display); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.fatal-mark { background: var(--danger); }
.fatal h1 { margin: 0; font: 700 28px/1.2 var(--font-display); }
.fatal p { max-width: 540px; margin: 0 0 8px; color: var(--text-soft); }
.skeleton { width: 240px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--border) 20%, var(--surface) 50%, var(--border) 80%); background-size: 200% 100%; animation: shimmer 1.25s infinite; }
.skeleton.wide { width: 320px; height: 17px; margin-top: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 248px; flex-direction: column; padding: 24px 16px 18px; background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid rgba(255,255,255,.04); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sidebar > .brand { padding: 0 8px 30px; }
.brand-mark { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #d9a7ff)); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
.brand div { min-width: 0; }
.brand strong { display: block; overflow: hidden; color: var(--sidebar-strong); font: 700 14px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.brand small { display: block; margin-top: 3px; color: #6f6e79; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-weight: 600; text-align: left; transition: .16s ease; }
.nav-item:hover { background: rgba(255,255,255,.055); color: #dddce4; }
.nav-item.active { background: var(--sidebar-raised); color: var(--sidebar-strong); box-shadow: inset 3px 0 var(--accent); }
.nav-item.active .icon { color: color-mix(in srgb, var(--accent) 82%, white); }
.sidebar-footer { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); }
.demo-picker span { display: block; margin: 0 9px 7px; color: #6f6e79; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.demo-picker select { width: 100%; padding: 9px 30px 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: var(--sidebar-raised); color: #c9c8d1; font-size: 12px; }
.theme-button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #aaa9b4; font-size: 12px; font-weight: 600; text-align: left; }
.theme-button:hover { background: rgba(255,255,255,.05); color: #fff; }
.reset-button { padding: 3px 10px; border: 0; background: transparent; color: #64636e; font-size: 11px; text-align: left; }
.reset-button:hover { color: #aaa9b4; }
.mobile-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
}
.mobile-header .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
.mobile-header .brand strong { color: var(--text); font-size: 13px; }

.mobile-nav {
  position: fixed;
  z-index: 40;
  inset: auto 0 0;
  display: flex;
  height: 70px;
  align-items: stretch;
  justify-content: space-around;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
}
.mobile-nav .nav-item {
  width: auto;
  min-width: 68px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border-radius: 10px;
  color: var(--text-faint);
  font-size: 9px;
  text-align: center;
}
.mobile-nav .nav-item.active { background: var(--accent-soft); box-shadow: none; color: var(--accent-ink); }
.mobile-nav .nav-item .icon { width: 19px; height: 19px; }

.app-shell[data-shell-representation="compact"] body,
.app-shell[data-shell-representation="compact"] {
  padding-bottom: 70px;
}
.app-shell[data-shell-representation="compact"] .content {
  min-height: calc(100vh - 130px);
  margin-left: 0;
  padding: 25px 16px 45px;
}

.content { min-height: 100vh; margin-left: 248px; padding: calc(42px * var(--space)) clamp(28px, 4.5vw, 74px) 72px; background: radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--accent-soft) 35%, transparent), transparent 26%), var(--bg); }
.content:focus { outline: none; }

/* ============================================================ */
/* EMBEDDED HOST MODE & CONTAINER CONTAINMENT                   */
/* ============================================================ */

.app-host-embedded {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  contain: layout paint;
  box-sizing: border-box;
}

.app-host-embedded .boot-state,
.app-host-embedded .fatal {
  min-height: 100%;
  height: 100%;
}

.app-shell[data-host-mode="embedded"] {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: block;
}

.app-shell[data-host-mode="embedded"] .sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 248px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}

.app-shell[data-host-mode="embedded"] .sidebar nav {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.app-shell[data-host-mode="embedded"] .sidebar nav::-webkit-scrollbar {
  width: 6px;
}

.app-shell[data-host-mode="embedded"] .sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 3px;
}

.app-shell[data-host-mode="embedded"] .sidebar-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.app-shell[data-host-mode="embedded"] .content {
  position: relative;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  margin-left: 248px;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.app-shell[data-host-mode="embedded"] .content::-webkit-scrollbar {
  width: 8px;
}

.app-shell[data-host-mode="embedded"] .content::-webkit-scrollbar-track {
  background: transparent;
}

.app-shell[data-host-mode="embedded"] .content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

.app-shell[data-host-mode="embedded"] .content::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

.app-shell[data-host-mode="embedded"][data-shell-representation="compact"] {
  padding-bottom: 70px;
}

.app-shell[data-host-mode="embedded"][data-shell-representation="compact"] .sidebar {
  display: none;
}

.app-shell[data-host-mode="embedded"][data-shell-representation="compact"] .content {
  margin-left: 0;
  height: calc(100% - 130px);
  min-height: 0;
  overflow-y: auto;
}

.app-shell[data-host-mode="embedded"] .mobile-nav {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  z-index: 40;
}

.app-shell[data-host-mode="embedded"] .mobile-header {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Embedded Overlays & Portals */
.app-host-embedded .modal-backdrop,
.app-shell[data-host-mode="embedded"] ~ .modal-backdrop,
.app-host-embedded .drawer-backdrop,
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop,
.app-host-embedded .menu-backdrop,
.app-shell[data-host-mode="embedded"] ~ .menu-backdrop,
.app-host-embedded .notification-popover-backdrop,
.app-shell[data-host-mode="embedded"] ~ .notification-popover-backdrop,
.app-host-embedded .notification-sheet-backdrop,
.app-shell[data-host-mode="embedded"] ~ .notification-sheet-backdrop {
  position: absolute;
  inset: 0;
}

.app-host-embedded .drawer-panel,
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop .drawer-panel,
.app-shell[data-host-mode="embedded"] ~ .drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  max-width: 100%;
}

.app-host-embedded .drawer-panel[data-size="compact"],
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop .drawer-panel[data-size="compact"] {
  width: min(380px, 100%);
}

.app-host-embedded .drawer-panel[data-size="standard"],
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop .drawer-panel[data-size="standard"] {
  width: min(480px, 100%);
}

.app-host-embedded .drawer-panel[data-size="wide"],
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop .drawer-panel[data-size="wide"] {
  width: min(640px, 100%);
}

.app-host-embedded .drawer-panel[data-representation="sheet"],
.app-shell[data-host-mode="embedded"] ~ .drawer-backdrop .drawer-panel[data-representation="sheet"] {
  width: 100%;
  max-width: 100%;
}

.app-host-embedded .menu-dropdown,
.app-shell[data-host-mode="embedded"] ~ .menu-dropdown {
  position: absolute;
}

.app-host-embedded .menu-dropdown[data-representation="compact_sheet"],
.app-shell[data-host-mode="embedded"] ~ .menu-dropdown[data-representation="compact_sheet"] {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
}

.app-host-embedded .notification-popover,
.app-shell[data-host-mode="embedded"] ~ .notification-popover-backdrop .notification-popover,
.app-shell[data-host-mode="embedded"] ~ .notification-popover {
  position: absolute;
  top: 56px;
  left: 256px;
  max-width: calc(100% - 270px);
  max-height: calc(100% - 70px);
}

.app-host-embedded .notification-sheet,
.app-shell[data-host-mode="embedded"] ~ .notification-sheet-backdrop .notification-sheet,
.app-shell[data-host-mode="embedded"] ~ .notification-sheet {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  max-height: 85%;
}

.app-host-embedded .toast,
.app-shell[data-host-mode="embedded"] ~ .toast {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.app-host-embedded .modal,
.app-shell[data-host-mode="embedded"] ~ .modal-backdrop .modal {
  max-width: calc(100% - 32px);
  max-height: calc(100% - 40px);
}

.app-host-embedded .confirm-modal,
.app-shell[data-host-mode="embedded"] ~ .modal-backdrop .confirm-modal {
  max-width: calc(100% - 32px);
}

/* Parent-Owned Section Stack & Inter-Section Rhythm */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.section-stack[data-section-rhythm="tight"] {
  gap: var(--section-rhythm-tight);
}

.section-stack[data-section-rhythm="compact"] {
  gap: var(--section-rhythm-compact);
}

.section-stack[data-section-rhythm="comfortable"] {
  gap: var(--section-rhythm-comfortable);
}

.section-stack[data-section-rhythm="spacious"] {
  gap: var(--section-rhythm-spacious);
}

.section-stack[data-section-rhythm="dramatic"] {
  gap: var(--section-rhythm-dramatic);
}

/* Explicit grouped / continuous sections that intentionally share surface */
.section-group.attached,
.section-group[data-section-relationship="continuous"],
.section-group[data-section-relationship="grouped"],
.section-group[data-section-relationship="attached"] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-group[data-section-relationship="attached"] > .panel + .panel,
.section-group[data-section-relationship="continuous"] > .panel + .panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

.section-stack > .page-heading,
.section-stack > .metric-grid,
.section-stack > .panel,
.section-stack > .landing-section,
.section-stack > .landing-hero {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; }
.page-heading h1 { margin: 2px 0 8px; font: 800 clamp(28px, 3.2vw, 40px)/1.12 var(--font-display); letter-spacing: -.035em; }
.page-heading p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--text-soft); font-size: 15px; }
.eyebrow { margin: 0; color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.date-chip { padding: 8px 12px; border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-soft); font-size: 12px; white-space: nowrap; }

.metric-grid { display: grid; max-width: 1280px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card { position: relative; min-height: 162px; overflow: hidden; padding: calc(22px * var(--space)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card::after { position: absolute; width: 110px; height: 110px; right: -28px; top: -36px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--accent)) 9%, transparent); content: ""; }
.metric-card .metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--tone, var(--accent)) 13%, transparent); color: var(--tone, var(--accent)); }
.metric-card p { margin: 20px 0 3px; color: var(--text-soft); font-size: 12px; font-weight: 600; }
.metric-card strong { display: block; font: 800 31px var(--font-display); letter-spacing: -.04em; }
.metric-card > span { color: var(--text-faint); font-size: 11px; }
.tone-violet { --tone: #7662e8; }
.tone-emerald { --tone: #22a77c; }
.tone-amber { --tone: #d08a26; }
.tone-blue { --tone: #3973e7; }

.panel { max-width: 1280px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(22px * var(--space)) 24px 16px; }
.panel-heading h2 { margin: 3px 0 0; font: 700 18px var(--font-display); letter-spacing: -.02em; }
.text-button { display: inline-flex; align-items: center; gap: 3px; padding: 5px; border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--accent); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: calc(14px * var(--space)) 18px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 13px; }
tbody tr { transition: background .14s ease; }
tbody tr[data-detail] { cursor: pointer; }
tbody tr[data-detail]:hover, tbody tr[data-detail]:focus { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); outline: none; }
tbody tr:last-child td { border-bottom: 0; }
.row-arrow { width: 36px; padding-left: 4px; padding-right: 14px; color: var(--text-faint); }

/* Semantic Record List & Record Card Representation */
.record-list {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.record-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.record-card[data-detail] {
  cursor: pointer;
}

.record-card[data-detail]:hover,
.record-card[data-detail]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface));
  outline: none;
}

.record-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.record-card-primary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-field-value.primary-value {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.card-arrow {
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
}

.record-card-body {
  display: grid;
  gap: 8px;
}

.card-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}

.card-field-label {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.card-field-value {
  color: var(--text-soft);
  text-align: right;
}

.form-grid.single-column {
  grid-template-columns: 1fr;
}

.form-grid.single-column .field.span-2 {
  grid-column: auto;
}
.identity { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.avatar { display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.avatar.large { width: 58px; height: 58px; border-radius: 17px; font-size: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 99px; background: var(--surface-muted); color: var(--text-soft); font-size: 10px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.badge > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.positive { background: var(--positive-soft); color: var(--positive); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.violet { background: var(--accent-soft); color: var(--accent-ink); }

.button, .icon-button, .back-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; font-weight: 700; transition: .15s ease; }
.button { min-height: 39px; padding: 9px 14px; border-radius: 10px; font-size: 12px; }
.button.primary { background: var(--accent); color: white; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent); }
.button.primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.button.secondary { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft); }
.button.secondary:hover { border-color: var(--accent); color: var(--text); }
.button.danger { background: var(--danger); color: white; }
.button.danger-ghost { border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); background: transparent; color: var(--danger); }
.icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-soft); }
.icon-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.collection-heading { align-items: center; }
.collection-panel { overflow: visible; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.search-control { display: flex; width: min(370px, 45%); min-width: 220px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-muted); color: var(--text-faint); }
.search-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.search-control input { width: 100%; padding: 9px 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-control input::placeholder { color: var(--text-faint); }
.select-control { position: relative; }
.select-control select { min-height: 38px; max-width: 170px; padding: 8px 28px 8px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-soft); font-size: 12px; font-weight: 600; }
.sort-control { display: flex; align-items: center; padding-left: 9px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-faint); }
.sort-control select { border: 0; padding-left: 6px; }
.result-meta { display: flex; min-height: 36px; align-items: center; justify-content: space-between; padding: 0 21px 10px; color: var(--text-faint); font-size: 11px; }
.result-meta strong { color: var(--text-soft); }
.pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 20px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 11px; }
.pagination > div { display: flex; align-items: center; gap: 10px; }
.pagination .next .icon { transform: none; }
.empty-state { display: grid; min-height: 280px; place-content: center; justify-items: center; padding: 35px; text-align: center; }
.empty-state > div { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); }
.empty-state h3 { margin: 14px 0 5px; font: 700 16px var(--font-display); }
.empty-state p { max-width: 320px; margin: 0; color: var(--text-soft); font-size: 13px; }

.message-card { display: grid; max-width: 680px; min-height: 360px; margin: 72px auto; place-content: center; justify-items: center; padding: 60px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.message-card > div { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); }
.message-card h2 { margin: 22px 0 10px; font: 800 23px var(--font-display); letter-spacing: -.03em; }
.message-card p { max-width: 470px; margin: 0; color: var(--text-soft); line-height: 1.7; }
.capability-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; padding: 7px 11px; border-radius: 99px; background: var(--surface-muted); color: var(--text-faint); font-size: 10px; font-weight: 700; }

.back-button { margin: 0 auto 24px; padding: 5px 0; background: transparent; color: var(--text-soft); font-size: 12px; }
.back-button:hover { color: var(--accent); }
.detail-hero { display: flex; max-width: 1280px; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 24px; }
.detail-identity { display: flex; align-items: center; gap: 16px; }
.detail-identity h1 { margin: 3px 0 4px; font: 800 30px var(--font-display); letter-spacing: -.035em; }
.record-id { color: var(--text-faint); font: 10px ui-monospace, monospace; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-panel dl { display: grid; margin: 0; padding: 4px 24px 24px; grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
.detail-panel dl > div { min-width: 0; padding: 17px 0; border-top: 1px solid var(--border); }
.detail-panel dt { margin-bottom: 8px; color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-panel dd { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.history-panel { margin-top: 18px; }
.history-panel ol { display: grid; margin: 0; padding: 0 24px 24px 54px; list-style: none; }
.history-panel li { position: relative; display: grid; gap: 5px; padding: 13px 0 13px 18px; border-left: 1px solid var(--border-strong); }
.history-panel li::before { position: absolute; top: 18px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); content: ""; box-shadow: 0 0 0 4px var(--accent-soft); }
.history-panel li strong { color: var(--text); font-size: 13px; }
.history-panel li span, .history-panel li small { color: var(--text-faint); font-size: 10px; }
.history-panel li p { margin: 2px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }

tbody tr[class*="highlight-"] { box-shadow: inset 3px 0 var(--highlight-color); }
tbody tr.highlight-accent { --highlight-color: var(--accent); background: var(--accent-soft); }
tbody tr.highlight-positive { --highlight-color: var(--positive); background: var(--positive-soft); }
tbody tr.highlight-warning { --highlight-color: var(--warning); background: var(--warning-soft); }
tbody tr.highlight-danger { --highlight-color: var(--danger); background: var(--danger-soft); }
tbody tr.highlight-neutral { --highlight-color: var(--text-faint); background: var(--surface-muted); }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8, 8, 12, .62); backdrop-filter: blur(4px); animation: fade-in .15s ease-out; }
.modal, .confirm-modal { width: min(680px, 100%); max-height: min(800px, 92vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-raised); box-shadow: var(--shadow-lg); animation: modal-in .18s ease-out; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; border-bottom: 1px solid var(--border); }
.modal-heading h2 { margin: 3px 0 0; font: 800 22px var(--font-display); letter-spacing: -.025em; }
.form-grid { display: grid; padding: 22px 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.field.span-2 { grid-column: 1 / -1; }
.field > span i { color: var(--danger); font-style: normal; }
.field input, .field select, .field textarea { width: 100%; min-height: 41px; padding: 10px 11px; border: 1px solid var(--border-strong); border-radius: 10px; outline: 0; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 10px; font-weight: 600; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input { width: 18px; min-height: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 17px 26px 22px; border-top: 1px solid var(--border); }
.confirm-modal { width: min(430px, 100%); padding: 30px; text-align: center; }
.danger-icon { display: grid; width: 52px; height: 52px; margin: 0 auto; place-items: center; border-radius: 16px; background: var(--danger-soft); color: var(--danger); }
.confirm-modal h2 { margin: 17px 0 8px; font: 800 21px var(--font-display); }
.confirm-modal p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.confirm-modal .modal-actions { justify-content: center; margin-top: 22px; padding: 0; border: 0; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ============================================================
   UI INTERACTION ARTIFACTS: DRAWERS & MENUS
   ============================================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-backdrop);
  background: rgba(8, 8, 12, 0.62);
  backdrop-filter: blur(4px);
  animation: fade-in 0.15s ease-out;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  animation: drawerSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.drawer-panel[data-size="compact"] { width: min(380px, 100vw); }
.drawer-panel[data-size="standard"] { width: min(480px, 100vw); }
.drawer-panel[data-size="wide"] { width: min(640px, 100vw); }

.drawer-panel[data-representation="wide_sheet"] {
  width: min(640px, 100vw);
}

.drawer-panel[data-representation="full_screen_sheet"] {
  width: 100vw;
  max-width: 100vw;
  inset: 0;
  border-left: 0;
  border-radius: 0;
  animation: sheetSlideInUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  flex-shrink: 0;
}

.drawer-header h2 {
  margin: 2px 0 0;
  font: 800 20px var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-height: 0;
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  flex-shrink: 0;
}

.drawer-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.drawer-footer-actions .button {
  white-space: nowrap;
}

.button.icon-only {
  padding: 8px 10px;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drawer-detail-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.drawer-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-detail-item.span-2 {
  grid-column: 1 / -1;
}

.drawer-detail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drawer-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) - 1);
  background: transparent;
}

.menu-dropdown {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 180px;
  max-width: 320px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: menuFadeIn 0.12s ease-out;
}

.menu-dropdown[data-representation="compact_sheet"] {
  position: fixed;
  inset: auto 0 0 0;
  width: 100vw;
  max-width: 100vw;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 24px;
  border: 1px solid var(--border);
  border-bottom: 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  animation: sheetSlideInUp 0.18s ease-out;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.menu-item:hover, .menu-item:focus-visible, .menu-item[data-active="true"] {
  background: var(--surface-muted);
  outline: none;
}

.menu-item[data-tone="destructive"], .menu-item.destructive {
  color: var(--danger);
}

.menu-item[data-tone="destructive"]:hover, .menu-item.destructive:focus-visible, .menu-item[data-tone="destructive"][data-active="true"] {
  background: var(--danger-soft);
}

.menu-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

.action-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-menu-button:hover, .action-menu-button:focus-visible {
  background: var(--surface-muted);
  color: var(--text);
  border-color: var(--border);
}

@keyframes drawerSlideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes drawerSlideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes sheetSlideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes sheetSlideOutDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdropFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.drawer-backdrop[data-status="closing"] {
  animation: backdropFadeOut 0.20s ease-in forwards;
}

.drawer-panel[data-status="closing"] {
  animation: drawerSlideOutRight 0.20s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.drawer-panel[data-representation="full_screen_sheet"][data-status="closing"] {
  animation: sheetSlideOutDown 0.20s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel,
  .drawer-backdrop,
  .drawer-panel[data-status="closing"],
  .drawer-backdrop[data-status="closing"],
  .menu-dropdown,
  .modal,
  .modal-backdrop {
    animation: none !important;
    transition: none !important;
  }
}

.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; display: flex; min-width: 220px; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--shadow-lg); color: var(--text); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(14px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 4px var(--positive-soft); }
.toast.error .toast-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

/* ============================================================
   MARKETING / LANDING EXPERIENCES & MOTION SEMANTICS
   ============================================================ */

.marketing-landing {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.pointer-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--pointer-x, 50%) var(--pointer-y, 30%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}

.button.large {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}

.landing-section {
  position: relative;
}

.landing-section-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.landing-section-heading h2 {
  font: 800 clamp(28px, 3.5vw, 38px)/1.2 var(--font-display);
  letter-spacing: -.025em;
  margin: 8px 0 12px;
}

.landing-section-heading p:not(.eyebrow) {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feature-card:hover, .feature-card:focus {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 8%, var(--shadow));
}

.feature-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.feature-card h3 {
  font: 700 18px var(--font-display);
  margin: 0 0 10px;
}

.feature-card p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  text-align: center;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.stat-card strong {
  display: block;
  font: 800 36px var(--font-display);
  color: var(--accent-ink);
  margin-bottom: 6px;
}

.stat-card span {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.testimonial-card {
  margin: 0;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 20px;
  font-style: italic;
}

.testimonial-card footer strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}

.testimonial-card footer small {
  color: var(--text-soft);
  font-size: 12px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease;
}

.pricing-card.popular {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: scale(1.02);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pricing-card-header h3 {
  font: 800 22px var(--font-display);
  margin: 0 0 6px;
}

.pricing-card-header p {
  color: var(--text-soft);
  font-size: 13px;
  margin: 0 0 20px;
}

.pricing-card-price {
  margin-bottom: 24px;
}

.pricing-card-price strong {
  font: 800 42px var(--font-display);
  letter-spacing: -.03em;
}

.pricing-card-price span {
  color: var(--text-soft);
  font-size: 14px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-soft);
}

.pricing-features li .icon {
  color: var(--positive);
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-question {
  padding: 18px 22px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question .icon {
  transition: transform .2s ease;
}

.faq-item[open] .faq-question .icon {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.faq-answer p {
  margin: 0;
}

.cta-banner {
  padding: 60px 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow);
  text-align: center;
}

.cta-banner-content h2 {
  font: 800 clamp(28px, 4vw, 40px)/1.2 var(--font-display);
  margin: 0 0 12px;
}

.cta-banner-content p {
  color: var(--text-soft);
  font-size: 16px;
  max-width: 580px;
  margin: 0 auto 28px;
}

.landing-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

.landing-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.landing-footer-brand .copyright {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 12px;
}

.landing-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.landing-footer-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s ease;
}

.landing-footer-links a:hover {
  color: var(--accent);
}

/* ============================================================
   AIR VISUAL DESIGN SYSTEM: PUBLIC SHELL & HEROIC COMPOSITIONS
   ============================================================ */

/* ============================================================
   AIR VISUAL DESIGN SYSTEM: PUBLIC SHELL & HEROIC COMPOSITIONS
   ============================================================ */

.public-shell {
  min-height: 100vh;
  background: 
    radial-gradient(1100px circle at 50% -12%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 70%),
    radial-gradient(900px circle at 90% 25%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(800px circle at 10% 60%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
    var(--bg);
  position: relative;
}

.public-nav-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.public-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand-monogram {
  font: 900 13px/1 var(--font-display);
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 90%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-ink);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.public-brand .brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.brand-tagline {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.public-nav-link {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .15s ease;
}

.public-nav-link:hover {
  color: var(--text);
}

.public-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-mobile-drawer {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: drawerSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.public-mobile-nav-link {
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.public-mobile-cta {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

@keyframes drawerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.public-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 100px;
  outline: none;
}

/* Monumental Hero (Open Page Canvas) */
.landing-hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vw, 80px) 0 40px;
  text-align: left;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.landing-hero-composition {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.landing-hero-composition.stacked-hero {
  grid-template-columns: 1fr;
  gap: 36px;
}

.landing-hero-content {
  max-width: 700px;
}

.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-glow 2.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.landing-hero-headline {
  margin: 0 0 24px;
  font: 800 clamp(44px, 6.2vw, 80px)/1.04 var(--font-display);
  letter-spacing: -.045em;
  color: var(--text);
}

.landing-hero-tagline {
  margin: 0 0 36px;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 620px;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Hero Technical Trust Strip */
.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  flex-wrap: wrap;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-stat-val {
  font: 800 20px var(--font-display);
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}

.trust-stat-lbl {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
}

.trust-stat-divider {
  width: 1px;
  height: 28px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
}

/* Spatial Transformation Visual Centerpiece */
.landing-hero-visual {
  position: relative;
}

.hero-stage-card {
  border-radius: 20px;
  background: color-mix(in srgb, var(--sidebar) 92%, black);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, .1));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 50px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: color-mix(in srgb, var(--sidebar) 98%, black);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.term-dots {
  display: flex;
  gap: 6px;
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
}

.term-dot:nth-child(1) { background: #ef4444; }
.term-dot:nth-child(2) { background: #eab308; }
.term-dot:nth-child(3) { background: #22c55e; }

.term-title {
  font: 600 11.5px ui-monospace, monospace;
  color: #94a3b8;
  letter-spacing: .04em;
}

.term-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px ui-monospace, monospace;
  color: #22c55e;
  text-transform: uppercase;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.hero-transformation-workbench {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transform-step {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
}

.step-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.step-badge {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 800;
}

.step-title {
  font: 700 11px ui-monospace, monospace;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.step-intent-quote {
  font-size: 13px;
  line-height: 1.5;
  color: #e2e1ea;
  font-style: italic;
}

.step-code-snippet code {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: #e2e1ea;
}

.step-graph-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.graph-node {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
}

.graph-node.valid {
  border-color: rgba(34, 197, 94, .4);
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
}

.graph-node.active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-ink);
  font-weight: 700;
}

.graph-link {
  color: #64748b;
}

.delivery-targets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.target-node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font: 700 11px ui-monospace, monospace;
  color: #e2e1ea;
}

.target-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}

.transform-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  margin: -4px 0;
}

/* Syntax Highlighting Tokens */
.tok-kw { color: #c084fc; font-weight: 700; }
.tok-prop { color: #60a5fa; }
.tok-val { color: #34d399; }
.tok-comment { color: #94a3b8; font-style: italic; }

.button.large {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}

.button.small {
  padding: 7px 15px;
  font-size: 13px;
  border-radius: 9px;
}

/* Ambient Spotlight & Pointer Follow */
.motion-spotlight {
  position: relative;
}

.motion-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  opacity: 1;
  transition: opacity .3s ease;
  z-index: 0;
}

.motion-spotlight > * {
  position: relative;
  z-index: 1;
}

/* Interactive Compiler Architecture Showcase */
.compiler-story-section {
  padding: 80px 0;
}

.landing-section-heading {
  margin-bottom: 40px;
}

.landing-section-heading h2 {
  font: 800 clamp(28px, 3.6vw, 44px)/1.15 var(--font-display);
  letter-spacing: -.03em;
  margin: 6px 0 12px;
}

.landing-section-heading p:not(.eyebrow) {
  color: var(--text-soft);
  font-size: 16px;
  max-width: 680px;
  margin: 0;
  line-height: 1.6;
}

.compiler-showcase {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 40px color-mix(in srgb, var(--accent) 8%, transparent);
  overflow: hidden;
}

.compiler-pipeline-stepper {
  display: flex;
  overflow-x: auto;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  gap: 6px;
}

.stepper-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: all .18s ease;
  cursor: pointer;
}

.stepper-tab:hover {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
}

.stepper-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.step-num {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.stepper-tab.active .step-num {
  background: var(--accent);
  color: #fff;
}

.compiler-stage-display {
  padding: 32px 36px;
}

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

.stage-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-pill {
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.stage-header strong {
  font: 700 18px var(--font-display);
}

.stage-annotation {
  color: var(--text-soft);
  font-size: 13px;
  font-style: italic;
}

.stage-code-panel {
  background: color-mix(in srgb, var(--sidebar) 96%, black);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.stage-code-block {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #e2e1ea;
}

.stage-nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.stage-flow-dots {
  display: flex;
  gap: 8px;
}

.flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: all .2s ease;
}

.flow-dot.active {
  background: var(--accent);
  transform: scale(1.4);
}

.flow-dot.completed {
  background: color-mix(in srgb, var(--accent) 60%, var(--text-faint));
}

/* Asymmetric Bento Grid (Selective Cards) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* Balanced 2-Column Grid (Medium Viewports) */
.balanced-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.balanced-grid .dominant-card {
  grid-column: span 2;
  grid-row: span 1;
}

.balanced-grid .supporting-card,
.balanced-grid .proof-card {
  grid-column: span 1;
}

/* Narrative Stack (Narrow Mobile) */
.narrative-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.bento-card {
  padding: 36px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}

.bento-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.narrative-stack .bento-card,
.bento-card.stacked-card {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  width: 100%;
  padding: 24px 20px;
}

.dominant-card {
  grid-column: span 7;
  grid-row: span 2;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 30%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.dominant-card .bento-card-badge {
  margin-bottom: 18px;
}

.bento-card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
  color: var(--accent-ink);
  margin-bottom: 20px;
}

.bento-card-icon.large {
  width: 60px;
  height: 60px;
  border-radius: 16px;
}

.dominant-card h3 {
  font: 800 26px var(--font-display);
  letter-spacing: -.025em;
  margin: 0 0 14px;
}

.dominant-desc {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 32px;
}

.dominant-visual-preview {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 85%, transparent);
  border: 1px solid var(--border);
}

.dominant-visual-preview.stacked-metrics {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}

.preview-metric span {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.preview-metric strong {
  font: 800 18px var(--font-display);
  color: var(--accent-ink);
}

.supporting-card {
  grid-column: span 5;
}

.supporting-card h4, .proof-card h4 {
  font: 700 19px var(--font-display);
  margin: 0 0 8px;
}

.supporting-card p, .proof-card p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.proof-card {
  grid-column: span 5;
  background: color-mix(in srgb, var(--surface-muted) 60%, var(--surface));
}

.proof-card-footer {
  margin-top: auto;
  padding-top: 18px;
}

.chip-live {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--positive);
  background: var(--positive-soft);
  padding: 4px 10px;
  border-radius: 99px;
}

/* Minimal Flat Feature List */
.flat-feature-list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--border);
}

.flat-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.flat-feature-index {
  font: 800 20px ui-monospace, monospace;
  color: var(--accent-ink);
  opacity: .8;
}

.flat-feature-body h3 {
  font: 700 19px var(--font-display);
  margin: 0 0 6px;
}

.flat-feature-body p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* Editorial Columns */
.editorial-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.editorial-story-item {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}

.editorial-story-item h3 {
  font: 800 24px var(--font-display);
  margin: 0 0 12px;
}

.editorial-story-item p {
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* Metric Callout Band (Open Canvas / Unboxed) */
.social-proof-section {
  padding: 70px 0;
}

.stats-callout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
  margin-bottom: 60px;
}

.stat-callout-item {
  padding: 0 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
}

.stat-callout-item:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.stat-value {
  display: block;
  font: 800 clamp(44px, 5.8vw, 72px)/1 var(--font-display);
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: 8px;
}

.stat-label {
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* Editorial Quotes (Integrated / Uncontained) */
.editorial-quotes-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.editorial-quote-card {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 32px;
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.quote-symbol {
  position: absolute;
  top: -12px;
  left: -2px;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  font-family: Georgia, serif;
  user-select: none;
  display: none;
}

.stats-callout-grid.stacked-stats {
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px 0;
}

.stats-callout-grid.stacked-stats .stat-callout-item {
  border-right: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding: 12px 0;
}

.stats-callout-grid.stacked-stats .stat-callout-item:last-child {
  border-bottom: none;
}

.editorial-columns.single-column,
.editorial-quotes-wrap.single-column {
  grid-template-columns: 1fr;
  gap: 28px;
}

.pricing-grid.sequential-plans {
  grid-template-columns: 1fr;
  gap: 24px;
}

.flat-feature-list.stacked .flat-feature-row {
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.metric-grid.single-column {
  grid-template-columns: 1fr;
}

.metric-grid.two-column {
  grid-template-columns: repeat(2, 1fr);
}

.quote-text {
  font: italic 400 clamp(16px, 1.8vw, 20px)/1.6 var(--font-display);
  color: var(--text);
  margin: 0 0 20px;
}

.quote-footer strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.quote-footer span {
  color: var(--text-soft);
  font-size: 13px;
}

@media (max-width: 980px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 130px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-control { width: 100%; }
  .toolbar-actions { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .page-heading { align-items: flex-start; margin-bottom: 22px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p:not(.eyebrow) { font-size: 13px; }
  .date-chip { display: none; }
  .metric-grid { gap: 11px; }
  .metric-card { min-height: 116px; padding: 16px; }
  .metric-card p { margin-top: 12px; }
  .metric-card strong { position: absolute; top: 19px; right: 19px; font-size: 28px; }
  .recent-panel .panel-heading { padding: 17px 16px 12px; }
  .toolbar { padding: 14px 14px 9px; }
  .toolbar-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .select-control select { width: 100%; max-width: none; }
  .sort-control { grid-column: 1 / -1; }
  .sort-control select { width: 100%; }
  .result-meta { padding: 0 15px 9px; }
  .identity .avatar { width: 33px; height: 33px; }
  .pagination { padding: 10px 14px; }
  .pagination > span { display: none; }
  .pagination > div { width: 100%; justify-content: space-between; }
  .message-card { min-height: 330px; margin: 30px auto; padding: 35px 24px; }
  .detail-hero { align-items: flex-start; flex-direction: column; }
  .detail-actions { width: 100%; }
  .detail-actions .button { flex: 1; }
  .detail-panel dl { grid-template-columns: 1fr; padding: 0 17px 18px; }
  .detail-panel dl > div { padding: 14px 0; }
  .modal-heading { padding: 20px 18px 15px; }
  .modal-actions { padding: 14px 18px 18px; }
  .modal { max-height: 94vh; border-radius: 16px; }
  .toast { right: 14px; bottom: 84px; left: 14px; }
}

/* ============================================================
   DATA VISUALIZATION & SEMANTIC GRAPH ARTIFACTS
   ============================================================ */

.visualization-panel,
.graph-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 16px);
  position: relative;
  overflow: hidden;
}

.viz-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}

.viz-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.viz-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.viz-title {
  font: 700 18px var(--font-display);
  color: var(--text);
  margin: 0;
}

.viz-grand-total {
  font: 700 20px/1 var(--font-display);
  color: var(--accent);
}

.viz-subtitle {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}

.viz-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.viz-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.viz-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.viz-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.viz-stage {
  width: 100%;
  min-height: 200px;
  position: relative;
}

.viz-svg {
  overflow: visible;
  display: block;
}

.viz-data-dot,
.viz-bar-rect,
.viz-h-bar-fill,
.viz-scatter-dot {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.viz-data-dot:hover,
.viz-data-dot:focus-visible,
.viz-bar-rect:hover,
.viz-bar-rect:focus-visible,
.viz-h-bar-fill:hover,
.viz-h-bar-fill:focus-visible,
.viz-scatter-dot:hover,
.viz-scatter-dot:focus-visible {
  opacity: 0.85;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.viz-table-container {
  width: 100%;
}

.viz-table-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.viz-data-table {
  width: 100%;
  font-size: 13px;
}

.viz-table-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 80px;
}

.viz-table-meter-bar {
  height: 6px;
  background: var(--accent);
  border-radius: 3px;
  display: block;
  min-width: 2px;
}

.viz-table-meter-text {
  font-size: 11px;
  color: var(--text-soft);
}

.viz-sparkline-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.viz-sparkline-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.viz-stage-skeleton {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding: 16px;
}

.skeleton-chart-bar {
  flex: 1;
  background: var(--border);
  border-radius: 4px;
  animation: pulse 1.5s infinite ease-in-out;
}

/* -------------------------------------------------------------
   Semantic Workflow & State Graph Styles
   ------------------------------------------------------------- */
.wf-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.wf-horizontal-graph {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.wf-vertical-stepper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0;
}

.wf-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-muted, rgba(255, 255, 255, 0.02));
  position: relative;
}

.wf-node.node-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft, #7662e8) 12%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent);
}

.wf-node.node-completed {
  border-color: rgba(34, 167, 124, 0.4);
  background: color-mix(in srgb, #22a77c 8%, var(--surface));
}

.wf-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-soft);
}

.wf-node.node-active .wf-node-dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.wf-node.node-completed .wf-node-dot {
  background: #22a77c;
}

.wf-node-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.wf-node-badge {
  font-size: 11px;
  color: var(--text-soft);
}

.wf-transitions-panel {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wf-transitions-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin: 0 0 8px;
}

.wf-transitions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-edge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.02));
  flex-wrap: wrap;
}

.wf-edge-item.edge-available {
  border-left: 3px solid var(--accent);
}

/* -------------------------------------------------------------
   Timeline Graph Styles
   ------------------------------------------------------------- */
.timeline-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  position: relative;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 4px;
  z-index: 2;
}

.timeline-event.tone-positive .timeline-dot { background: #22a77c; }
.timeline-event.tone-danger .timeline-dot { background: #c84454; }

.timeline-line {
  width: 2px;
  height: calc(100% + 16px);
  background: var(--border);
  position: absolute;
  top: 14px;
  left: 4px;
  z-index: 1;
}

.timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.timeline-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.timeline-time {
  font-size: 11px;
  color: var(--text-soft);
}

.timeline-actor {
  font-size: 12px;
  color: var(--text-soft);
}

.timeline-comment {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text);
  margin: 4px 0 0;
  padding: 4px 8px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.03));
  border-radius: 4px;
}

/* -------------------------------------------------------------
   DAG Graph Styles
   ------------------------------------------------------------- */
.dag-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.dag-node-card {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-muted, rgba(255, 255, 255, 0.02));
}

.dag-node-id {
  font-size: 13.5px;
  color: var(--text);
}

.dag-node-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin: 4px 0 0;
}

.visualization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

/* -------------------------------------------------------------
   Schedule & Calendar Artifact Styles
   ------------------------------------------------------------- */
.schedule-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.schedule-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.screen-view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.schedule-nav-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.icon-button-group {
  display: inline-flex;
  gap: 2px;
}

.schedule-date-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.view-mode-toggle {
  display: inline-flex;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.view-toggle-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  transition: background 0.15s, color 0.15s;
}

.view-toggle-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button.compact {
  padding: 5px 12px;
  font-size: 13px;
}

/* Schedule Time Grid */
.schedule-grid-container {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--surface);
  min-width: 0;
}

.schedule-grid-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  position: sticky;
  top: 0;
  z-index: 5;
}

.corner-cell {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.time-axis-lane {
  position: relative;
  height: 38px;
  min-width: 540px;
}

.time-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--border);
  padding-left: 4px;
  display: flex;
  align-items: center;
}

.time-tick-label {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-soft);
}

.schedule-grid-body {
  display: flex;
  flex-direction: column;
}

.schedule-grid-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--border);
  min-height: 68px;
  position: relative;
}

.schedule-grid-row:last-child {
  border-bottom: none;
}

.row-group-label {
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  z-index: 2;
}

.row-lane {
  position: relative;
  height: 100%;
  min-height: 68px;
  min-width: 540px;
  background: var(--surface);
}

.schedule-empty-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.schedule-empty-slot:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  opacity: 1;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  margin: 4px;
}

.schedule-block {
  position: absolute;
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  z-index: 3;
  transition: transform 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.schedule-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 10;
}

.schedule-block.tone-positive {
  background: color-mix(in srgb, var(--positive) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--positive) 40%, transparent);
  color: var(--text);
}

.schedule-block.tone-accent {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

.schedule-block.tone-warning {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--text);
}

.schedule-block.tone-neutral {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-soft);
}

.schedule-block.blackout {
  background: repeating-linear-gradient(45deg, rgba(200, 68, 84, 0.1), rgba(200, 68, 84, 0.1) 8px, rgba(200, 68, 84, 0.2) 8px, rgba(200, 68, 84, 0.2) 16px);
  border: 1px solid var(--danger);
  color: var(--danger);
  cursor: default;
}

.block-title {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-soft);
}

.block-quote {
  font-weight: 600;
  color: var(--positive);
}

.schedule-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 15;
  pointer-events: none;
}

.now-pill {
  position: absolute;
  top: 2px;
  left: 4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Schedule Agenda Representation (< 640px Mobile) */
.schedule-agenda-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.agenda-day-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda-day-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px 4px;
}

.agenda-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-agenda-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.schedule-agenda-card:hover {
  border-color: var(--accent);
}

.schedule-agenda-card.blackout {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  cursor: default;
}

.agenda-card-time {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  flex-shrink: 0;
}

.agenda-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.agenda-group-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}

.agenda-card-title {
  font-size: 14px;
  color: var(--text);
}

.agenda-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.agenda-quote {
  font-size: 12px;
  font-weight: 600;
  color: var(--positive);
}

.agenda-status-pill.blocked {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ */
/* NOTIFICATION CENTER & BELL ARTIFACT                          */
/* ============================================================ */

.bell-button {
  position: relative;
}

.bell-button .unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.notification-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: transparent;
}

.notification-popover {
  position: fixed;
  top: 60px;
  left: 270px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.2));
  z-index: 1060;
  overflow: hidden;
  animation: notifPopoverEnter 0.15s ease-out;
}

@keyframes notifPopoverEnter {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
}

.notification-sheet {
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: notifSheetSlideUp 0.2s ease-out;
}

@keyframes notifSheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.notification-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.notification-center-header h2,
.notification-center-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.notification-center-body {
  overflow-y: auto;
  max-height: 480px;
  padding: 8px 0;
}

.empty-notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-soft);
  gap: 8px;
}

.empty-notifications p {
  margin: 0;
  font-size: 14px;
}

.notification-feed {
  display: flex;
  flex-direction: column;
}

.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  text-decoration: none;
}

.notification-card:hover,
.notification-card:focus-visible {
  background: var(--surface-muted);
  outline: none;
}

.notification-card.unread {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.notification-card.unread:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.notification-tone-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.notification-tone-icon.info {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.notification-tone-icon.warning {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.notification-tone-icon.danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.notification-tone-icon.success {
  background: color-mix(in srgb, var(--positive) 15%, transparent);
  color: var(--positive);
}

.notification-tone-icon.neutral {
  background: var(--surface-muted);
  color: var(--text-soft);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.notification-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.notification-time {
  font-size: 11px;
  color: var(--text-muted, var(--text-soft));
}

.notification-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.notification-card.unread .notification-title {
  font-weight: 700;
}

.notification-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.notification-card:hover .notification-actions,
.notification-card:focus-visible .notification-actions,
.notification-card:focus-within .notification-actions {
  opacity: 1;
}

.icon-button-sm {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button-sm:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.unread-dot {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.notification-card:hover .unread-dot {
  opacity: 0;
}