/* ════════════════════════════════════════════════════════════════════
   APEX JOURNAL — Premium Trading Journal Stylesheet
   Design language: Glass · Aurora · Soft-neon · Precision typography
   ════════════════════════════════════════════════════════════════════ */

/* ───── DESIGN TOKENS (Obsidian-inspired) ───── */

:root {
  /* canvas — deep & quiet, like Obsidian */
  /* canvas — Refined Dark: deeper, cooler, layered */
  --bg-0: #08080c;
  --bg-1: #0c0c12;
  --bg-2: #14141c;
  --surface: rgba(22, 22, 30, 0.82);
  --surface-2: rgba(30, 30, 40, 0.9);
  --surface-3: rgba(40, 40, 52, 0.96);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-bright: rgba(167, 139, 250, 0.34);
  /* hairline highlight that sits on the TOP edge of surfaces */
  --edge-light: rgba(255, 255, 255, 0.055);
  /* text — crisper, higher-contrast */
  --text-1: #edeef3;
  --text-2: #aeb0bb;
  --text-3: #72747f;
  --text-4: #4a4b55;
  /* accents — refined Obsidian purple */
  --accent: #a78bfa;
  --accent-2: #8b5cf6;
  --accent-3: #c8bafd;
  --accent-glow: 167, 139, 250;
  /* semantic */
  --win: #4ade80;
  --win-soft: rgba(74, 222, 128, 0.13);
  --loss: #f87171;
  --loss-soft: rgba(248, 113, 113, 0.13);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, 0.13);
  --info: #60a5fa;
  /* layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 74px;
  --topbar-h: 64px;
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  /* shadows — layered elevation scale */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 36px rgba(var(--accent-glow), 0.28);
  /* type */
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-display: "Space Grotesk", "Inter", sans-serif;
  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  color-scheme: dark;
}

/* Theme variants */

[data-theme="midnight"] {
  --bg-0: #08080c;
  --bg-1: #0c0c12;
  --accent: #a78bfa;
  --accent-2: #8b5cf6;
  --accent-3: #c8bafd;
  --accent-glow: 167, 139, 250;
}

[data-theme="emerald"] {
  --bg-0: #051611;
  --bg-1: #0a2520;
  --accent: #10b981;
  --accent-2: #34d399;
  --accent-3: #22d3a4;
  --accent-glow: 16, 185, 129;
}

[data-theme="rose"] {
  --bg-0: #160814;
  --bg-1: #240b22;
  --accent: #ec4899;
  --accent-2: #f472b6;
  --accent-3: #fb7185;
  --accent-glow: 236, 72, 153;
}

[data-theme="amber"] {
  --bg-0: #160c05;
  --bg-1: #20140a;
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --accent-3: #facc15;
  --accent-glow: 245, 158, 11;
}

[data-theme="ocean"] {
  --bg-0: #04101e;
  --bg-1: #082035;
  --accent: #06b6d4;
  --accent-2: #38bdf8;
  --accent-3: #67e8f9;
  --accent-glow: 6, 182, 212;
}

/* New themes */

[data-theme="synthwave"] {
  --bg-0: #0c0420;
  --bg-1: #1a0833;
  --accent: #ec4899;
  --accent-2: #f472b6;
  --accent-3: #22d3ee;
  --accent-glow: 236, 72, 153;
  --win: #22d3ee;
  --loss: #ec4899;
}

[data-theme="forest"] {
  --bg-0: #061410;
  --bg-1: #0a1d18;
  --accent: #22c55e;
  --accent-2: #16a34a;
  --accent-3: #86efac;
  --accent-glow: 34, 197, 94;
}

[data-theme="solar"] {
  --bg-0: #170d04;
  --bg-1: #261707;
  --accent: #f97316;
  --accent-2: #fb923c;
  --accent-3: #fde047;
  --accent-glow: 249, 115, 22;
}

[data-theme="bloodmoon"] {
  --bg-0: #100404;
  --bg-1: #1d0808;
  --accent: #dc2626;
  --accent-2: #ef4444;
  --accent-3: #fda4af;
  --accent-glow: 220, 38, 38;
}

[data-theme="cyberpunk"] {
  --bg-0: #0a0a14;
  --bg-1: #14142a;
  --accent: #fde047;
  --accent-2: #facc15;
  --accent-3: #f0abfc;
  --accent-glow: 253, 224, 71;
  --win: #4ade80;
  --loss: #fb7185;
}

[data-theme="mono"] {
  --bg-0: #0a0a0a;
  --bg-1: #141414;
  --accent: #e5e7eb;
  --accent-2: #d1d5db;
  --accent-3: #f3f4f6;
  --accent-glow: 229, 231, 235;
  --win: #ffffff;
  --loss: #6b7280;
}

[data-theme="aurora"] {
  --bg-0: #07101a;
  --bg-1: #0b1a2a;
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --accent-3: #4ade80;
  --accent-glow: 56, 189, 248;
}

[data-theme="lavender"] {
  --bg-0: #110b1a;
  --bg-1: #1c1530;
  --accent: #c084fc;
  --accent-2: #a78bfa;
  --accent-3: #fbcfe8;
  --accent-glow: 192, 132, 252;
}

/* ───── RESET & BASE ───── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--ff-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg-0);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 48% 36% at 16% -6%, rgba(var(--accent-glow), 0.16), transparent 62%),
    radial-gradient(ellipse 40% 34% at 92% 6%, rgba(74,222,128,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

kbd {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-3);
}

/* ───── AURORA BACKGROUND ───── */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  mix-blend-mode: screen;
  animation: floaty 22s ease-in-out infinite;
}

.aurora__blob--1 {
  width: 480px;
  height: 480px;
  top: -160px;
  left: -180px;
  background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
  opacity: 0.18;
  transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px));
}

.aurora__blob--2 {
  width: 520px;
  height: 520px;
  bottom: -200px;
  right: -200px;
  background: radial-gradient(circle, #4ade80 0%, transparent 70%);
  animation-delay: -7s;
  opacity: 0.10;
  transform: translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -8px));
}

.aurora__blob--3 {
  width: 360px;
  height: 360px;
  top: 40%;
  right: 30%;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  animation-delay: -14s;
  opacity: 0.10;
  transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px));
}

.aurora__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}

@keyframes floaty {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(40px, 30px) scale(1.05);
  }

  66% {
    transform: translate(-30px, 50px) scale(0.95);
  }
}

/* ───── BOOT LOADER ───── */

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, var(--bg-1), var(--bg-0));
  gap: 18px;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}

.boot-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.boot-logo {
  animation: none !important;
}

@keyframes bootPulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.5));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 20px rgba(94, 234, 212, 0.7));
  }
}

.boot-text {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--text-2);
  font-size: 13px;
}

.boot-bar {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.boot-bar span {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  animation: bootBar 1.2s ease-in-out infinite;
}

@keyframes bootBar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* App initial state */

.app-loading .sidebar,
.app-loading .topbar,
.app-loading .main {
  opacity: 0;
}

.sidebar,
.topbar,
.main {
  transition: opacity .5s var(--ease);
}

/* ═══════════ SIDEBAR ═══════════ */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(11, 15, 36, 0.85), rgba(7, 9, 26, 0.75));
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border-right: 1px solid var(--border);
  transition: width var(--t-base) var(--ease);
}

.sidebar.is-collapsed {
  width: var(--sidebar-w-collapsed);
}

.sidebar.is-collapsed .brand__text,
.sidebar.is-collapsed .nav__label,
.sidebar.is-collapsed .nav__badge,
.sidebar.is-collapsed .account-card,
.sidebar.is-collapsed .btn--block span,
.sidebar.is-collapsed .btn--block kbd {
  display: none;
}

.sidebar.is-collapsed .sidebar__toggle {
  transform: rotate(180deg);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  position: relative;
}

.brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(94,234,212,0.18));
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text-1);
  white-space: nowrap;
  background: linear-gradient(135deg, #dcdde0, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand__sub {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar__toggle {
  position: absolute;
  right: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all var(--t-fast) var(--ease);
}

.sidebar__toggle:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-1);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}

.nav__section {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 16px 12px 7px;
  user-select: none;
}

.sidebar.is-collapsed .nav__section {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar__nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-3);
  font-weight: 500;
  font-size: 13.5px;
  transition: background .16s var(--ease), color .16s var(--ease);
  white-space: nowrap;
}

.nav__item:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.045);
}

.nav__item.is-active {
  color: var(--text-1);
  background: linear-gradient(90deg, rgba(var(--accent-glow),0.17), rgba(var(--accent-glow),0.03));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-glow),0.17), inset 0 1px 0 rgba(255,255,255,0.03);
}

.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 14px rgba(var(--accent-glow), 0.7);
}

.nav__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex-shrink: 0;
}

.nav__item.is-active .nav__icon {
  color: var(--accent-3);
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.45));
}

.nav__label {
  flex: 1;
}

.nav__badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
}

.nav__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 164, 0.6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(34, 211, 164, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 164, 0);
  }
}

.sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.account-card {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(var(--accent-glow),0.12), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--edge-light);
}

.account-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  animation: shimmer 5s linear infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.account-card__label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-card__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
  color: var(--text-1);
}

.account-card__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--win);
}

.account-card__delta.is-loss {
  color: var(--loss);
}

/* ═══════════ TOPBAR ═══════════ */

.topbar {
  position: absolute;
  top: 0;
  right: 0;
  height: var(--topbar-h);
  left: var(--sidebar-w);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(11, 15, 36, 0.6), rgba(11, 15, 36, 0.3));
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--border);
  transition: left var(--t-base) var(--ease);
}

.sidebar.is-collapsed~.topbar {
  left: var(--sidebar-w-collapsed);
}

.topbar__menu {
  display: none;
}

.topbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 460px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast) var(--ease);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.topbar__search:focus-within {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(var(--accent-glow),0.5);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-glow),0.12), inset 0 1px 2px rgba(0,0,0,0.2);
}

.topbar__search svg {
  color: var(--text-3);
}

.topbar__search input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13.5px;
  color: var(--text-1);
}

.topbar__search input::placeholder {
  color: var(--text-3);
}

.topbar__pills {
  display: flex;
  gap: 8px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}

.icon-btn:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.09);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.93);
}

.topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  font-weight: 700;
  font-family: var(--ff-display);
  color: white;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

/* ═══════════ MAIN ═══════════ */

.main {
  position: relative;
  z-index: 1;
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 24px) 28px 80px;
  min-height: 100vh;
  transition: margin-left var(--t-base) var(--ease);
}

.sidebar.is-collapsed~.main {
  margin-left: var(--sidebar-w-collapsed);
}

/* ═══════════ VIEWS ═══════════ */

.view {
  display: none;
  animation: viewIn .55s var(--ease-out);
}

.view.is-active {
  display: block;
  animation: refinedViewIn .5s var(--ease-out);
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.view__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 6px;
}

.view__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -0.03em;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #b9bac4 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.view__subtitle {
  color: var(--text-3);
  margin: 6px 0 0;
  font-size: 13.5px;
}

.view__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ═══════════ GRIDS ═══════════ */

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

@media (max-width: 1100px) {
  .kpi-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

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

}

@media (max-width: 520px) {
  .kpi-grid {
      grid-template-columns: 1fr;
    }

}

/* Analytics page — 3 columns (6 cards = 2 neat rows of 3) */

#analyticsKpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  #analyticsKpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 520px) {
  #analyticsKpis {
      grid-template-columns: 1fr;
    }

}

.grid-2-1 {
  display: grid;
  gap: 16px;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 16px;
}

.grid-1-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 2fr;
  margin-bottom: 16px;
}

.grid-1-1 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

.grid-1-1-1 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}

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

}

/* ═══════════ CARDS (Glass) ═══════════ */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(30,30,40,0.62), rgba(16,16,22,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%, transparent 60%, rgba(255, 255, 255, 0.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  display: none;
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-light);
}

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

.card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
}

.card__sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.card__tools {
  display: flex;
  gap: 6px;
}

/* KPI Card variant */

.kpi {
  position: relative;
  padding: 17px 19px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(34,34,46,0.72), rgba(18,18,25,0.5));
  border: 1px solid var(--border);
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
}

.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.09);
}

.kpi__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

.kpi__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 27px;
  margin-top: 9px;
  color: var(--text-1);
  letter-spacing: -0.025em;
}

.kpi__value.is-pos {
  color: var(--win);
}

.kpi__value.is-neg {
  color: var(--loss);
}

.kpi__hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi__hint .delta {
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.kpi__hint .delta.is-pos {
  color: var(--win);
  background: var(--win-soft);
}

.kpi__hint .delta.is-neg {
  color: var(--loss);
  background: var(--loss-soft);
}

.kpi__spark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 90px;
  height: 32px;
  opacity: .6;
}

.kpi::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
}

.kpi--win::after {
  background: radial-gradient(circle, rgba(34,211,164,0.20), transparent 70%);
}

.kpi--loss::after {
  background: radial-gradient(circle, rgba(244,63,94,0.18), transparent 70%);
}

.kpi--warn::after {
  background: radial-gradient(circle, rgba(245,158,11,0.18), transparent 70%);
}

/* ═══════════ BUTTONS ═══════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .14s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease);
  white-space: nowrap;
  letter-spacing: 0.005em;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 5px 16px rgba(var(--accent-glow), 0.42), inset 0 1px 0 rgba(255,255,255,0.28);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 26px rgba(var(--accent-glow), 0.52), inset 0 1px 0 rgba(255,255,255,0.34);
  filter: brightness(1.07);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border-color: var(--border);
  border: 1px solid var(--border-strong);
}

.btn--ghost:hover {
  color: var(--text-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.2);
}

.btn--danger {
  color: white;
  background: linear-gradient(180deg, #fb6b6b, #e23d3d);
  box-shadow: 0 5px 16px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn--danger:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn--sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.btn kbd {
  background: rgba(255,255,255,0.16);
  border-color: transparent;
  color: rgba(255,255,255,0.9);
  margin-left: 4px;
}

/* ═══════════ CHIPS / SEGMENTS ═══════════ */

.chip {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.chip:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
}

.chip.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-glow),0.22), rgba(var(--accent-glow),0.1));
  border-color: rgba(var(--accent-glow),0.45);
  color: var(--text-1);
}

.chip--toggle {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg {
  display: inline-flex;
  padding: 3px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: 11px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.seg__btn {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  transition: all var(--t-fast) var(--ease);
}

.seg__btn:hover {
  color: var(--text-1);
}

.seg__btn.is-active {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: white;
  box-shadow: 0 3px 10px rgba(var(--accent-glow),0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Extra-small segmented control — fits inside card heads next to titles */
.seg--xs { padding: 2px; border-radius: 8px; }
.seg--xs .seg__btn { padding: 4px 9px; font-size: 11px; border-radius: 6px; letter-spacing: 0.04em; }

/* Journal — Quick Templates head with right-aligned EN/TH toggle */
.jrnl-templates__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.jrnl-templates__lang { flex-shrink: 0; }

/* Modal head — group the language toggle and close button together
   on the right side of the journal entry modal */
.modal__head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}



.badge {
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.badge--ghost {
  background: transparent;
  border: 1px solid var(--border);
}

.badge--win {
  background: var(--win-soft);
  color: var(--win);
}

.badge--loss {
  background: var(--loss-soft);
  color: var(--loss);
}

.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ═══════════ INPUTS ═══════════ */

.input,
.select,
.textarea {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 13px;
  transition: all var(--t-fast) var(--ease);
  outline: 0;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.55;
}

.input--sm,
.select--sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.select.select--sm {
  padding-right: 28px;
  background-position: right 8px center;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a92aa' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.toggle-group {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  transition: all var(--t-fast) var(--ease);
}

.toggle-btn:hover {
  color: var(--text-1);
}

.toggle-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

.toggle-btn[data-val="Long"].is-active {
  background: linear-gradient(135deg, #10b981, #22d3a4);
}

.toggle-btn[data-val="Short"].is-active {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
}

.emotion-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.emotion-row button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}

.emotion-row button:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.08);
}

.emotion-row button.is-active {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}

.rating {
  display: flex;
  gap: 2px;
}

.rating button {
  font-size: 22px;
  padding: 4px 6px;
  color: rgba(255,255,255,0.18);
  transition: all var(--t-fast) var(--ease);
}

.rating button:hover,
.rating button.is-active {
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
  transform: scale(1.15);
}

.range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  outline: 0;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(99,102,241,0.5);
  border: 2px solid rgba(255,255,255,0.9);
}

.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.9);
}

.range-value {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--accent-3);
  margin-top: 4px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 8px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.checkbox-grid label:hover {
  background: rgba(255,255,255,0.06);
}

.checkbox-grid input {
  accent-color: var(--accent);
}

.checkbox-grid label:has(input:checked) {
  background: rgba(244,63,94,0.10);
  border-color: rgba(244,63,94,0.4);
  color: var(--text-1);
}

.checkbox-grid label .x {
  opacity: 0.5;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.checkbox-grid label .x:hover {
  opacity: 1;
  color: var(--loss) !important;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.3);
  color: var(--text-1);
}

.tag-pill .x {
  cursor: pointer;
  opacity: .6;
}

.tag-pill .x:hover {
  opacity: 1;
}

.chip {
  display: inline-flex;
  align-items: center;
}

.chip .x {
  cursor: pointer;
  opacity: .6;
  margin-left: 6px;
  font-weight: bold;
}

.chip .x:hover {
  opacity: 1;
  color: var(--loss);
}

.tag-input-row {
  margin-top: 6px;
}

/* ═══════════ CHART WRAPPERS ═══════════ */

.chart-wrap {
  position: relative;
  height: 320px;
}

.chart-wrap--sm {
  height: 220px;
}

.card--chart .chart-wrap {
  height: 340px;
}

/* ═══════════ STREAKS / MOOD / PLAYBOOK LIST ═══════════ */

.streak-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.streak {
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  text-align: center;
}

.streak__label {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.streak__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  margin-top: 6px;
}

.streak--win .streak__value {
  color: var(--win);
}

.streak--loss .streak__value {
  color: var(--loss);
}

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

.playbook-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}

.playbook-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
  transform: translateX(2px);
}

.playbook-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.playbook-item__name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.playbook-item__count {
  font-size: 11px;
  color: var(--text-3);
}

.playbook-item__pnl {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 12px;
}

.mood-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.mood-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.3), rgba(99,102,241,0.05));
  border: 2px solid rgba(99,102,241,0.3);
  animation: floaty 4s ease-in-out infinite;
}

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

.mood-sub {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* ═══════════ TRADES ═══════════ */

.recent-trades {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trade-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}

.trade-row:hover {
  background: rgba(255,255,255,0.055);
  transform: translateX(2px);
  border-color: var(--border-strong);
}

.trade-row__dir {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--win-soft);
  color: var(--win);
}

.trade-row__dir--short {
  background: var(--loss-soft);
  color: var(--loss);
}

.trade-row__sym {
  font-weight: 600;
}

.trade-row__meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.trade-row__r {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--text-3);
}

.trade-row__pnl {
  font-family: var(--ff-mono);
  font-weight: 600;
}

.is-pos {
  color: var(--win);
}

.is-neg {
  color: var(--loss);
}

.trade-filters {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  grid-template-columns: 2fr repeat(6, 1fr) auto;
  align-items: end;
}

@media (max-width: 1200px) {
  .trade-filters {
    grid-template-columns: repeat(3, 1fr);
  }

}

.filter-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}

.filter-group--actions {
  align-self: end;
}

.trade-table-wrap {
  /* width: 100% + min-width: 0 lets this flex/grid child shrink below its
     intrinsic table width so the page doesn't expand horizontally on mobile.
     Without this the 1054px-wide table forces a 1054px-wide viewport and
     every fixed-position modal (paywall, checkout) overflows the screen. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 72vh;
  -webkit-overflow-scrolling: touch;
}

.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.trade-table th,
.trade-table td {
  padding: 12px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.trade-table th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-3);
  user-select: none;
}

.th-sortable {
  cursor: pointer;
}

.th-sortable:hover {
  color: var(--text-1);
}

.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: .4;
}

.th-sortable.is-asc .sort-arrow::after {
  content: "▲";
  opacity: 1;
}

.th-sortable.is-desc .sort-arrow::after {
  content: "▼";
  opacity: 1;
}

.trade-table tbody tr {
  transition: background var(--t-fast) var(--ease);
}

.trade-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.trade-table .pnl-cell {
  font-family: var(--ff-mono);
  font-weight: 600;
}

.row-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.trade-table tbody tr:hover .row-actions {
  opacity: 1;
}

.row-actions button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--text-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.row-actions button:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.1);
}

.row-actions button.danger:hover {
  color: var(--loss);
  background: rgba(244,63,94,0.1);
}

.trade-empty {
  text-align: center;
  padding: 60px 20px;
}

.empty-illo {
  font-size: 56px;
  margin-bottom: 12px;
  opacity: .6;
}

/* ═══════════ TRADINGVIEW LAYOUT ═══════════ */

.symbol-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.symbol-picker svg {
  color: var(--text-3);
}

.symbol-picker .input {
  background: transparent;
  border: 0;
  padding: 6px 0;
  min-width: 200px;
}

.chart-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28,35,66,0.55), rgba(22,28,54,0.4));
  border: 1px solid var(--border);
}

.chart-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

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

}

.chart-card-tv {
  padding: 0;
  overflow: hidden;
  height: 640px;
}

.tv-widget {
  width: 100%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(167,139,250,0.06), transparent 60%),
    var(--bg-1);
}

.chart-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.watch-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
}

.watch-row__sym {
  font-weight: 600;
  font-size: 12.5px;
}

.watch-row__rm {
  opacity: 0;
  color: var(--text-3);
  transition: opacity var(--t-fast);
}

.watch-row:hover .watch-row__rm {
  opacity: 1;
}

.watchlist__add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.session-times {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  font-size: 12px;
}

.session-time__name {
  font-weight: 600;
}

.session-time.is-open {
  background: rgba(34,211,164,0.08);
  border-color: rgba(34,211,164,0.3);
}

.session-time .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  margin-right: 6px;
  display: inline-block;
}

.session-time.is-open .dot {
  background: var(--win);
  box-shadow: 0 0 8px var(--win);
  animation: pulse 2s infinite;
}

/* ═══════════ CALENDAR RESIZING & GALLERY ═══════════ */

.calendar-card,
#dayDetailCard {
  max-width: 760px;
  margin: 0 auto 24px auto;
}

.compare-wide-bento-card {
  background: rgba(25, 18, 48, 0.45);
  border: 1px solid rgba(94, 234, 212, 0.15);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.compare-wide-bento-card:hover {
  border-color: rgba(94, 234, 212, 0.3);
  background: rgba(25, 18, 48, 0.6);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.08);
}

.compare-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.direction-glow-pill {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.direction-glow-pill.buy {
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.15);
}

.direction-glow-pill.sell {
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.15);
}

.compare-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .compare-bento-grid {
      grid-template-columns: 1fr;
    }

}

.compare-img-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.03);
  position: relative;
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
}

.box-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.box-badge.before {
  background: rgba(6, 182, 212, 0.85);
  color: #fff;
  backdrop-filter: blur(5px);
}

.box-badge.after {
  background: rgba(236, 72, 153, 0.85);
  color: #fff;
  backdrop-filter: blur(5px);
}

.img-holder-glow {
  flex: 1;
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-holder-glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.img-holder-glow:hover img {
  transform: scale(1.03);
}

.img-caption-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8, 4, 18, 0.85);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #e2e8f0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.missing-img-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.25s ease;
  padding: 24px;
}

.missing-img-placeholder:hover {
  border-color: rgba(94, 234, 212, 0.25);
  background: rgba(94, 234, 212, 0.02);
  color: #fff;
}

.missing-img-placeholder .btn-add-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.missing-img-placeholder p {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}

.missing-img-placeholder span {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 2px;
  text-align: center;
}

/* ═══════════ CALENDAR ═══════════ */

.cal-month-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  min-width: 160px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-bottom: 6px;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  font-size: 12px;
}

.cal-day:hover {
  transform: scale(1.04);
  z-index: 2;
  border-color: var(--border-strong);
}

.cal-day.is-today {
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}

.cal-day.is-other {
  opacity: .35;
}

.cal-day.is-win {
  background: linear-gradient(135deg, rgba(34,211,164,0.18), rgba(34,211,164,0.08));
  border-color: rgba(34,211,164,0.3);
}

.cal-day.is-loss {
  background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(244,63,94,0.08));
  border-color: rgba(244,63,94,0.3);
}

.cal-day.is-be {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.3);
}

.cal-day__date {
  font-weight: 600;
  color: var(--text-2);
}

.cal-day__pnl {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
}

.cal-day__count {
  font-size: 10px;
  color: var(--text-3);
}

.cal-day.is-win .cal-day__pnl {
  color: var(--win);
}

.cal-day.is-loss .cal-day__pnl {
  color: var(--loss);
}

.cal-day.is-be .cal-day__pnl {
  color: var(--warn);
}

#miniCalendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mini-day {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: var(--text-3);
}

.mini-day.is-win {
  background: var(--win);
  color: white;
}

.mini-day.is-loss {
  background: var(--loss);
  color: white;
}

.mini-day.is-be {
  background: var(--warn);
  color: white;
}

.mini-day.is-other {
  opacity: .3;
}

/* ═══════════ MODAL ═══════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 7, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: backdropIn .25s var(--ease);
}

.modal-backdrop[hidden] {
  display: none !important;
}

.cmdk[hidden] {
  display: none !important;
}

[hidden] {
  display: none !important;
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a1a23 0%, #101015 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.055);
  animation: modalIn .35s var(--ease-out);
}

.modal--lg {
  max-width: 760px;
}

.modal--md {
  max-width: 560px;
}

.modal--sm {
  max-width: 420px;
}

@keyframes modalIn {
  from {
    transform: translateY(12px) scale(.97);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.01em;
}

.modal__sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 4px 0 0;
}

.modal__steps {
  display: flex;
  gap: 4px;
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--border);
}

.step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  position: relative;
  transition: color var(--t-fast) var(--ease);
}

.step span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  font-size: 11px;
}

.step.is-active {
  color: var(--text-1);
}

.step.is-active span {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: white;
  box-shadow: 0 0 12px rgba(99,102,241,0.4);
}

.step.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 2px;
}

.modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.step-panel {
  display: none;
  animation: stepIn .3s var(--ease-out);
}

.step-panel.is-active {
  display: block;
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.modal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

.modal__foot-right {
  display: flex;
  gap: 8px;
}

.pnl-preview {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.pnl-preview b {
  font-family: var(--ff-mono);
  font-weight: 700;
}

.dropzone {
  position: relative;
  padding: 18px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  background: rgba(255,255,255,0.02);
}

.dropzone:hover,
.dropzone.is-dragging {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.06);
}

.dropzone__hint {
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dropzone__preview img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}

/* ═══════════ COMMAND PALETTE ═══════════ */

.cmdk {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 7, 18, 0.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  animation: backdropIn .2s var(--ease);
}

.cmdk__panel {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, #161c36, #11162e);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn .25s var(--ease-out);
}

.cmdk__input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.cmdk__input-row input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  font-size: 15px;
  color: var(--text-1);
}

.cmdk__input-row svg {
  color: var(--text-3);
}

.cmdk__list {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}

.cmdk__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease);
}

.cmdk__item:hover,
.cmdk__item.is-active {
  background: rgba(99, 102, 241, 0.15);
  color: var(--text-1);
}

.cmdk__item svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.cmdk__item .right {
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
}

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

.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-height: 100vh;
  overflow: hidden;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #20202b, #15151c);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text-1);
  font-size: 13px;
  min-width: 280px;
  pointer-events: auto;
  animation: toastIn .35s var(--ease-out);
}

.toast.is-leaving {
  animation: toastOut .25s var(--ease) forwards;
}

@keyframes toastIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastOut {
  to {
    transform: translateX(20px);
    opacity: 0;
  }
}

.toast__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,0.18);
  color: var(--accent-3);
  flex-shrink: 0;
}

.toast--success .toast__icon {
  background: var(--win-soft);
  color: var(--win);
}

.toast--error .toast__icon {
  background: var(--loss-soft);
  color: var(--loss);
}

.toast--warn .toast__icon {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ═══════════ JOURNAL / PROMPTS ═══════════ */

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

.prompt-item {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(99,102,241,0.02));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.prompt-item:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.4);
  box-shadow: var(--shadow);
}

.prompt-item__title {
  font-weight: 600;
  font-size: 13px;
}

.prompt-item__sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

.journal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-entry {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}

.journal-entry:hover {
  border-color: var(--border-strong);
}

.journal-entry__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.journal-entry__title {
  font-weight: 600;
  font-size: 14px;
}

.journal-entry__date {
  font-size: 11px;
  color: var(--text-3);
}

.journal-entry__body {
  color: var(--text-2);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
}

.journal-entry__type {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,0.18);
  color: var(--accent-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 6px;
}

.journal-entry__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-3);
  transition: gap var(--t-fast) var(--ease);
}

.link-arrow:hover {
  gap: 8px;
}

/* ═══════════ PLAYBOOK ═══════════ */

.playbook-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pb-card {
  position: relative;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(28,35,66,0.55), rgba(22,28,54,0.4));
  border: 1px solid var(--border);
  transition: all var(--t-base) var(--ease);
}

.pb-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.pb-card__top-bar {
  height: 4px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.pb-card__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.pb-card__market {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pb-card__stats {
  display: flex;
  gap: 14px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pb-card__stat-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pb-card__stat-value {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
}

.pb-card__conds {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

.pb-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

/* ═════════ PLAYBOOK MODAL — structured form ═════════ */

.modal--lg {
  max-width: 760px;
}

/* Section dividers with labels */

.pb-section {
  padding: 18px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.pb-section:first-child {
  padding-top: 4px;
}

.pb-section:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.pb-section__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pb-section__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

/* Required asterisk + inline hints */

.req {
  color: rgb(248, 113, 113);
  margin-left: 2px;
}

.form-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* Name row with emoji prefix button */

.pb-name-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pb-emoji {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

.pb-emoji:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Emoji popover */

.pb-emoji-pop {
  position: absolute;
  z-index: 9999;
  padding: 8px;
  border-radius: 12px;
  background: rgba(20, 24, 42, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.pb-emoji-pop__grid {
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 2px;
  max-width: 240px;
}

.pb-emoji-pop__btn {
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}

.pb-emoji-pop__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
}

/* Toggle switch — used for Active status */

.pb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  height: 38px;
}

.pb-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pb-toggle__track {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.pb-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), background .2s var(--ease);
}

.pb-toggle input:checked+.pb-toggle__track {
  background: rgba(34, 211, 164, 0.32);
  border-color: rgba(34, 211, 164, 0.55);
}

.pb-toggle input:checked+.pb-toggle__track .pb-toggle__thumb {
  transform: translateX(16px);
  background: rgb(34, 211, 164);
  box-shadow: 0 0 10px rgba(34, 211, 164, 0.5);
}

.pb-toggle__label {
  font-size: 12.5px;
  color: var(--text-2);
}

/* Dynamic confluences checklist */

.pb-conflist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pb-conflist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pb-conflist__item {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 8px;
  align-items: center;
  /* No opacity:0 start state — rows are added while modal is display:none,
     which means browser may never fire the animation. Stay visible by default;
     use a subtle transform-only nudge that's safe even if it doesn't run. */
  animation: pbConfIn .25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pbConfIn {
  from {
    transform: translateY(-3px);
  }

  to {
    transform: translateY(0);
  }
}

.pb-conflist__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 0;
}

.pb-conflist__input {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
}

.icon-btn--sm {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
}

/* Tiny inline number input for "minimum to take trade" */

.input--tiny {
  width: 44px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  margin-left: 4px;
}

.input--tiny:focus {
  outline: none;
  border-color: rgba(34, 211, 164, 0.55);
}

/* Input with suffix (e.g. %, R) */

.input-suffix {
  position: relative;
}

.input-suffix .input {
  padding-right: 32px;
}

.input-suffix>span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  pointer-events: none;
}

/* Color input cleanup */

.pb-color-input {
  width: 100%;
  height: 38px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pb-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.pb-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHART CONSOLE v2 — unified card system, hero band, equal rail/bottom
   ═══════════════════════════════════════════════════════════════════════ */

/* Chart view: compact page header so chart sits near the top */

#view-chart .view__header {
  padding-bottom: 8px;
  margin-bottom: 0;
}

#view-chart .view__eyebrow {
  display: none;
}

#view-chart .view__title {
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
}

#view-chart .view__subtitle {
  display: none;
}

/* Hero band — compact single-row strip (search + chips wrap + interval) */

.cv-hero {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 10px;
}

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

}

.cv-hero__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cv-hero__search svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.cv-hero__search .input {
  background: transparent;
  border: 0;
  padding: 6px 0;
  flex: 1;
  min-width: 0;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--text-1);
  letter-spacing: 0.02em;
}

.cv-hero__search .input:focus {
  outline: none;
}

.cv-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.cv-chips__cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-right: 3px;
}

.cv-chips .chip {
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--ff-mono);
}

.cv-chips .chip.is-active {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.22), rgba(94, 234, 212, 0.08));
  border-color: rgba(94, 234, 212, 0.5);
  color: rgb(94, 234, 212);
}

/* ─── Unified card primitive — every chart card uses this ─── */

.cv-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.cv-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
}

.cv-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 10px;
}

.cv-card__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
}

.cv-card__title-accent {
  color: rgb(94, 234, 212);
  font-family: var(--ff-mono);
  font-weight: 600;
}

.cv-card__sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  font-family: var(--ff-mono);
}

.cv-card__chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(94, 234, 212, 0.14);
  color: rgb(94, 234, 212);
  border: 1px solid rgba(94, 234, 212, 0.32);
}

/* ─── Main grid — chart + rail (chart fixed height, rail scrolls if needed) ─── */

.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  margin-bottom: 12px;
  align-items: start;
  /* don't stretch — let chart keep its height */
}

@media (max-width: 1200px) {
  .cv-grid {
      grid-template-columns: 1fr;
    }

}

.cv-card--chart {
  padding: 0;
  overflow: hidden;
  height: 460px;
  /* fixed — chart no longer expands to rail */
}

.cv-card--chart .tv-widget {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  overflow: hidden;
}

.cv-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  /* match chart so rail aligns; scroll if needed */
  overflow-y: auto;
}

.cv-rail .cv-card {
  min-height: 0;
  flex-shrink: 0;
}

/* Symbol Profile card */

.cv-card--profile {
  gap: 0;
}

.cv-profile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 10px;
}

.cv-profile__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.cv-profile__exch {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 2px;
}

.cv-profile__price {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text-1);
  letter-spacing: -0.025em;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.cv-profile__delta {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 2px;
}

.cv-profile__delta.is-pos {
  color: rgb(94, 234, 212);
}

.cv-profile__delta.is-neg {
  color: rgb(248, 113, 113);
}

.cv-profile__range {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--ff-mono);
  display: flex;
  justify-content: space-between;
}

.cv-profile__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}

.cv-profile__actions .btn {
  justify-content: center;
  gap: 4px;
  padding: 7px;
  font-size: 12px;
}

/* Watchlist add row */

.cv-watch-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.cv-watch-add .input {
  flex: 1;
}

/* ─── Bottom row — 3 equal cards ─── */

.cv-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 980px) {
  .cv-bottom {
      grid-template-columns: 1fr;
    }

}

/* Recent trades list */

.cv-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-recent__empty {
  padding: 18px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

.cv-recent__item {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .15s var(--ease);
  cursor: pointer;
}

.cv-recent__item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.cv-recent__date {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.cv-recent__strat {
  font-size: 12px;
  color: var(--text-1);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-recent__r {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}

.cv-recent__result {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cv-recent__result--win {
  background: rgba(94, 234, 212, 0.14);
  color: rgb(94, 234, 212);
}

.cv-recent__result--loss {
  background: rgba(248, 113, 113, 0.14);
  color: rgb(248, 113, 113);
}

.cv-recent__result--be {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-3);
}

/* Linked playbooks list */

.cv-pb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-pb-list__empty {
  padding: 18px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

.cv-pb-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.cv-pb-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(94, 234, 212, 0.3);
}

.cv-pb-item__emoji {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(167, 139, 250, 0.12);
  font-size: 16px;
}

.cv-pb-item__txt {
  min-width: 0;
  line-height: 1.2;
}

.cv-pb-item__name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-pb-item__meta {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
}

.cv-pb-item__rr {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgb(94, 234, 212);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.12);
}

/* Pre-trade checklist */

.cv-chk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-chk__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--ease);
}

.cv-chk__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cv-chk__item input {
  accent-color: rgb(94, 234, 212);
  cursor: pointer;
}

.cv-chk__item span {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.3;
}

.cv-chk__item.is-checked span {
  color: var(--text-1);
}

.cv-chk__cta {
  margin-top: 10px;
  justify-content: center;
  gap: 4px;
}

.cv-chk__edit {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: all .18s var(--ease);
}

.cv-chk__edit:hover {
  color: rgb(94, 234, 212);
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.08);
}

/* ─── Checklist Editor modal ─── */

.chk-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-edit-row {
  display: grid;
  grid-template-columns: 22px 56px 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.chk-edit-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.chk-edit-row__handle {
  color: var(--text-3);
  cursor: grab;
  text-align: center;
  font-size: 14px;
  user-select: none;
}

.chk-edit-row__handle:active {
  cursor: grabbing;
}

.chk-edit__icon {
  text-align: center;
  font-size: 18px;
  padding: 4px 6px;
  font-family: -apple-system, "Segoe UI Emoji", sans-serif;
}

.chk-edit__text {
  font-size: 13px;
}

.chk-edit__hint {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(94, 234, 212, 0.05);
  border: 1px solid rgba(94, 234, 212, 0.15);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* When opened from inside another modal (e.g. pre-trade checklist),
   the editor must stack above to be reachable. */

#checklistModal.modal-backdrop {
  z-index: 1100;
}

#checklistModal .modal {
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.7),
    0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIOS v2 — funded accounts, firm presets, polished switcher
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Firm monogram logo (reusable) ─── */

.firm-logo {
  --c: #9aa3bc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: white;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(160deg, color-mix(in oklab, var(--c) 95%, white), color-mix(in oklab, var(--c) 75%, black));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px -8px color-mix(in oklab, var(--c) 60%, transparent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.firm-logo svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}

.firm-logo svg.brand-logo-svg {
  width: 100%;
  height: 100%;
  fill: initial;
}

.firm-logo:has(svg.brand-logo-svg) {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.firm-logo--all {
  background:
    linear-gradient(160deg, rgba(94, 234, 212, 0.22), rgba(167, 139, 250, 0.12));
  border: 1px solid rgba(94, 234, 212, 0.32);
  color: rgb(94, 234, 212);
}

/* ─── Account modal v2 ─── */

.acc-section {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.acc-section:first-child {
  padding-top: 4px;
}

.acc-section:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.acc-section__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-section__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

/* Firm picker grid — 3 cols on desktop */

.acc-firm-grid-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.acc-firm-grid-container::-webkit-scrollbar {
  width: 4px;
}

.acc-firm-grid-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.firm-picker-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.firm-picker-category__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.firm-picker-category__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

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

@media (max-width: 900px) {
  .acc-firm-grid {
      grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 520px) {
  .acc-firm-grid {
      grid-template-columns: 1fr;
    }

}

.acc-firm {
  --c: #9aa3bc;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  text-align: left;
  transition: all .22s var(--ease);
  min-width: 0;
  overflow: hidden;
}

.acc-firm:hover {
  border-color: color-mix(in oklab, var(--c) 35%, rgba(255, 255, 255, 0.15));
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.acc-firm.is-active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 16%, transparent), color-mix(in oklab, var(--c) 6%, transparent));
  border-color: color-mix(in oklab, var(--c) 55%, transparent);
  box-shadow: 0 10px 28px -14px color-mix(in oklab, var(--c) 60%, transparent);
}

.acc-firm__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
}

.acc-firm__txt b {
  font-size: 12.5px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.acc-firm__txt small {
  font-size: 10px;
  color: var(--text-3);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Size picker */

.acc-size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.acc-size {
  --c: #22d3a4;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .18s var(--ease);
}

.acc-size:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-1);
}

.acc-size.is-active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 22%, transparent), color-mix(in oklab, var(--c) 8%, transparent));
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  color: var(--text-1);
}

.acc-cost-line {
  margin-top: 8px;
  font-size: 12px;
}

/* ─── Portfolio Switcher (topbar pill — matches reference) ─── */

.acc-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
  text-align: left;
  font-family: inherit;
}

.acc-switch:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.acc-switch[aria-expanded="true"] {
  border-color: rgba(94, 234, 212, 0.55);
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.12), rgba(94, 234, 212, 0.04));
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.10);
}

.acc-switch__logo {
  display: inline-flex;
}

.acc-switch__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-switch__caret {
  color: var(--text-3);
  transition: transform .25s var(--ease);
  flex-shrink: 0;
}

.acc-switch[aria-expanded="true"] .acc-switch__caret {
  transform: rotate(180deg);
  color: rgb(94, 234, 212);
}

/* ─── Sidebar balance-only card (after switcher moved to topbar) ─── */

.account-card--balance-only {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.06), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(94, 234, 212, 0.16);
}

.account-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Switcher menu (popover) */

.acc-switch-menu {
  z-index: 1200;
  padding: 8px;
  border-radius: 14px;
  background: rgba(15, 18, 32, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: min(560px, 80vh);
  overflow-y: auto;
  animation: accSwitchIn .18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes accSwitchIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.acc-switch-menu__label {
  padding: 6px 10px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
}

.acc-switch-menu__item {
  --c: #22d3a4;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-1);
  position: relative;
  transition: background .15s var(--ease);
}

.acc-switch-menu__item:hover {
  background: rgba(255, 255, 255, 0.045);
}

.acc-switch-menu__item.is-active {
  background: linear-gradient(90deg, color-mix(in oklab, var(--c) 12%, transparent), transparent);
}

.acc-switch-menu__item.is-active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 4px;
  background: var(--c);
  box-shadow: 0 0 10px color-mix(in oklab, var(--c) 80%, transparent);
}

.acc-switch-menu__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  flex: 1;
}

.acc-switch-menu__txt b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-switch-menu__txt small {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.acc-switch-menu__div {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 4px;
}

.acc-switch-menu__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.acc-switch-menu__action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-1);
}

.acc-switch-menu__action--primary {
  color: rgb(94, 234, 212);
  font-weight: 600;
}

.acc-switch-menu__action--primary:hover {
  background: rgba(94, 234, 212, 0.10);
}

.acc-switch-menu__action svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.acc-switch-menu__action--primary svg {
  color: rgb(94, 234, 212);
}

/* ─── Portfolios page hero ─── */

.pf-hero {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 16px 0 22px;
}

@media (max-width: 1200px) {
  .pf-hero {
      grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 720px) {
  .pf-hero {
      grid-template-columns: 1fr 1fr;
    }

}

.pf-hero__tile {
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}

.pf-hero__tile--cta {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.10), rgba(167, 139, 250, 0.04));
  border-color: rgba(94, 234, 212, 0.28);
}

.pf-hero__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pf-hero__val {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--text-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}

.pf-hero__val.is-pos {
  color: rgb(94, 234, 212);
}

.pf-hero__val.is-neg {
  color: rgb(248, 113, 113);
}

.pf-hero__val span {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  margin-left: 4px;
}

.pf-hero__sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: auto;
}

/* ─── Filters bar ─── */

.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 18px;
}

.pf-filters__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pf-filters__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
}

.pf-firm-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
}

.pf-firm-chip .firm-logo {
  box-shadow: none;
}

.pf-firm-chip.is-active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 18%, transparent), color-mix(in oklab, var(--c) 8%, transparent)) !important;
  border-color: color-mix(in oklab, var(--c) 50%, transparent) !important;
}

/* ─── Account Card v2 ─── */

.pf-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.pf-card {
  --c: #22d3a4;
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s var(--ease), box-shadow .3s var(--ease);
  isolation: isolate;
}

.pf-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c) 35%, transparent);
  box-shadow: 0 30px 60px -25px color-mix(in oklab, var(--c) 50%, transparent);
}

.pf-card__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c), transparent);
  opacity: 0.7;
}

.pf-card.is-passed .pf-card__rail {
  background: linear-gradient(180deg, rgb(94, 234, 212), transparent);
}

.pf-card.is-failed .pf-card__rail {
  background: linear-gradient(180deg, rgb(248, 113, 113), transparent);
}

.pf-card.is-archived {
  opacity: 0.55;
}

.pf-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.pf-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.pf-card__brand-txt {
  min-width: 0;
  line-height: 1.25;
}

.pf-card__name {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
}

.pf-card__firm {
  color: var(--c);
  font-weight: 600;
}

.pf-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.5;
}

.pf-card__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.pf-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pf-status--active {
  background: rgba(94, 234, 212, 0.14);
  color: rgb(94, 234, 212);
  border: 1px solid rgba(94, 234, 212, 0.38);
}

.pf-status--passed {
  background: rgba(34, 211, 164, 0.18);
  color: rgb(94, 234, 212);
  border: 1px solid rgba(34, 211, 164, 0.5);
}

.pf-status--failed {
  background: rgba(248, 113, 113, 0.16);
  color: rgb(248, 113, 113);
  border: 1px solid rgba(248, 113, 113, 0.45);
}

.pf-status--archived {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pf-card__actions {
  display: flex;
  gap: 4px;
}

.pf-card__actions .icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: all .18s var(--ease);
}

.pf-card__actions .icon-btn:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.08);
}

.pf-card__balance {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.pf-card__sub-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}

.pf-card__big {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin-top: 3px;
}

.pf-card__big.is-pos {
  color: rgb(94, 234, 212);
}

.pf-card__big.is-neg {
  color: rgb(248, 113, 113);
}

.pf-card__pnl-val {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 15px;
  margin-top: 3px;
}

.pf-card__pnl-val.is-pos {
  color: rgb(94, 234, 212);
}

.pf-card__pnl-val.is-neg {
  color: rgb(248, 113, 113);
}

/* Profit progress */

.pf-progress {
  margin-top: 14px;
  padding: 18px 20px;
}

.pf-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 5px;
}

.pf-progress__row b {
  color: var(--text-1);
  font-family: var(--ff-mono);
}

.pf-progress__bar {
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.pf-progress__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c) 75%, transparent), var(--c));
  border-radius: 4px;
  box-shadow: 0 0 12px color-mix(in oklab, var(--c) 70%, transparent);
  transition: width .35s var(--ease);
}

/* Two-up gauges (daily loss + DD) */

.pf-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.pf-gauge {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pf-gauge__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}

.pf-gauge__head b {
  font-family: var(--ff-mono);
  font-size: 12px;
}

.pf-gauge__bar {
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.pf-gauge__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width .35s var(--ease);
}

.pf-gauge__sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--ff-mono);
}

.pf-card__foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}

.pf-card__foot>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-card__foot b {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  color: var(--text-1);
  font-weight: 700;
}

/* ═══════════ RISK LAB ═══════════ */

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }

}

.calc-output {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(94,234,212,0.06));
  border: 1px solid rgba(99,102,241,0.25);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.calc-out-item {
}

.calc-out-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}

.calc-out-value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
}

.ror-summary {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.daily-limit {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) {
  .daily-limit {
    grid-template-columns: 1fr;
  }

}

.dl-card {
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.dl-card__label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}

.dl-card__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  margin-top: 6px;
}

.dl-card__bar {
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  margin-top: 10px;
  overflow: hidden;
}

.dl-card__fill {
  height: 100%;
  border-radius: 6px;
  transition: width .6s var(--ease);
}

.dl-card.is-warn .dl-card__fill {
  background: linear-gradient(90deg, var(--warn), #fbbf24);
}

.dl-card.is-danger .dl-card__fill {
  background: linear-gradient(90deg, var(--loss), #f87171);
}

.dl-card.is-ok .dl-card__fill {
  background: linear-gradient(90deg, var(--win), #34d399);
}

/* ═══════════ MONTE CARLO GRID ═══════════ */
.mc-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .mc-grid {
    grid-template-columns: 1fr;
  }
}

.mc-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-display {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mc-chart-wrap {
  height: 280px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

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

@media (max-width: 600px) {
  .mc-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mc-stat-card {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mc-summary-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

/* ═══════════ THEME GRID ═══════════ */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.theme-card {
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.theme-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.theme-card.is-active {
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
}

.theme-card__preview {
  height: 50px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.theme-card__name {
  font-size: 13px;
  font-weight: 600;
}

.shortcut-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  font-size: 13px;
  color: var(--text-2);
}

.shortcut-grid>div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.muted {
  color: var(--text-3);
  font-size: 13px;
}

/* ═══════════ INSIGHTS ═══════════ */

.insights {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.insight {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(94,234,212,0.06));
  border: 1px solid rgba(99,102,241,0.25);
  display: flex;
  gap: 12px;
}

.insight--win {
  background: linear-gradient(135deg, rgba(34,211,164,0.12), rgba(34,211,164,0.04));
  border-color: rgba(34,211,164,0.25);
}

.insight--loss {
  background: linear-gradient(135deg, rgba(244,63,94,0.12), rgba(244,63,94,0.04));
  border-color: rgba(244,63,94,0.25);
}

.insight--warn {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
  border-color: rgba(245,158,11,0.25);
}

.insight__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.insight__title {
  font-weight: 600;
  font-size: 13.5px;
}

.insight__body {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.55;
}

/* ═══════════ LEGEND ═══════════ */

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ═══════════ MOBILE ═══════════ */

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    z-index: 100;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .topbar {
    left: 0;
    padding: 0 14px;
  }

  .topbar__menu {
    display: grid;
  }

  .main {
    margin-left: 0;
    padding: calc(var(--topbar-h) + 14px) 14px 80px;
  }

  .view__title {
    font-size: 24px;
  }

}

/* ═══════════ UTILITY ═══════════ */

::selection {
  background: rgba(99,102,241,0.4);
  color: white;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.09);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-glow),0.4);
  background-clip: padding-box;
}

/* Reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Sparkle for big numbers */

.spark-num {
  background-image: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.4) 55%, transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 100%;
  background-position: -100% 0;
  animation: spark 3s linear infinite;
}

@keyframes spark {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Reduce motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
      animation-duration: 0.001s !important;
      transition-duration: 0.001s !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════
   GRAPH VIEW — Obsidian-style knowledge network
   ═══════════════════════════════════════════════════════════════════ */

.graph-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  height: calc(100vh - var(--topbar-h) - 140px);
  min-height: 600px;
}

@media (max-width: 1100px) {
  .graph-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

}

.graph-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ═════════ QUOTA METER (Free plan progress) ═════════ */
.quota-meter {
  background: linear-gradient(135deg, rgba(167,139,250,0.07), rgba(34,211,238,0.05));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.quota-meter__label { font-size: 13px; color: var(--text-2); flex: 0 0 auto; }
.quota-meter__label b { color: var(--text-1); }
.quota-meter__bar {
  flex: 1;
  min-width: 180px;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.quota-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.quota-meter.is-danger .quota-meter__fill { background: linear-gradient(90deg, var(--loss), #fb923c); }
.quota-meter__cta { flex: 0 0 auto; }

/* ═════════ PDPA CONSENT BANNER ═════════ */
.pdpa-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(20, 22, 30, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  z-index: 9999;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.pdpa-banner__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pdpa-banner__msg {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.pdpa-banner__msg a { color: var(--accent-3); text-decoration: underline; }

.graph-stage {
  position: relative;
  min-height: 420px;
  /* Hard cap to prevent the v1 feedback-loop bug (canvas height ballooning
     into thousands of pixels). The JS resize() also clamps. */
  height: min(600px, 78vh);
  max-height: 78vh;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 30% 20%, rgba(167,139,250,0.10), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(34,211,238,0.07), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04), transparent 70%),
    linear-gradient(180deg, rgba(13,13,18,0.95), rgba(9,9,14,0.98));
  border: 1px solid var(--border-strong);
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-light);
}

.graph-stage canvas {
  display: block;
  position: relative;
  z-index: 1;
}

.graph-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  gap: 8px;
}

.graph-overlay>* {
  pointer-events: auto;
}

.graph-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(20,20,28,0.92), rgba(13,13,18,0.86));
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-strong);
  font-size: 11.5px;
  color: var(--text-2);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 var(--edge-light);
}

.graph-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .18s var(--ease);
}

.graph-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor, 0 0 16px currentColor;
}

.graph-controls {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(20,20,28,0.92), rgba(13,13,18,0.86));
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 var(--edge-light);
}

.graph-controls button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.graph-controls button:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text-1);
  transform: translateY(-1px);
}

.graph-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  display: none;
  min-width: 180px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c1c28, #131319);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--text-1);
  animation: tipIn .15s var(--ease-out);
}

@keyframes tipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.graph-filter-card {
  padding: 14px 16px;
}

.graph-filter-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: padding-left .2s var(--ease);
}

.graph-filter-card .row label {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.toggle-pill {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.toggle-pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

input.toggle-pill-input {
  display: none;
}

input.toggle-pill-input:checked+.toggle-pill {
  background: rgba(167, 139, 250, 0.5);
}

input.toggle-pill-input:checked+.toggle-pill::after {
  left: 16px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.graph-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 0;
}

.graph-stat {
  padding: 9px 11px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.graph-stat__lbl {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.graph-stat__val {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  margin-top: 2px;
}

.graph-mini {
  height: 280px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.10), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(74,222,128,0.06), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(34,211,238,0.05), transparent 50%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.graph-mini:hover {
  border-color: var(--border-strong);
}

.graph-mini canvas {
  display: block;
}

.graph-mini__hint {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: var(--text-3);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   OBSIDIAN POLISH — Refine cards, nav, typography
   ═══════════════════════════════════════════════════════════════════ */

/* Slightly flatter, more Obsidian card */

.card {
  background: linear-gradient(180deg, rgba(30,30,40,0.62), rgba(16,16,22,0.5));
  border-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}

.kpi {
  background: linear-gradient(180deg, rgba(34,34,46,0.72), rgba(18,18,25,0.5));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  padding: 17px 19px;
}

/* Sidebar: more Obsidian */

.sidebar {
  background: linear-gradient(180deg, rgba(15, 15, 21, 0.95), rgba(11, 11, 15, 0.92));
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.nav__item {
  font-weight: 500;
  border-radius: 10px;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.nav__item.is-active {
  background: linear-gradient(90deg, rgba(var(--accent-glow),0.17), rgba(var(--accent-glow),0.03));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-glow),0.17), inset 0 1px 0 rgba(255,255,255,0.03);
}

.nav__item.is-active::before {
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 14px rgba(var(--accent-glow), 0.7);
  width: 3px;
  border-radius: 0 3px 3px 0;
}

/* Topbar: cleaner */

.topbar {
  background: linear-gradient(180deg, rgba(15, 15, 21, 0.85), rgba(15, 15, 21, 0.55));
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* View title: refined */

.view__title {
  background: linear-gradient(180deg, #ffffff 0%, #b9bac4 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -0.03em;
}

.view__eyebrow {
  color: var(--accent-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.brand__name {
  background: linear-gradient(135deg, #dcdde0, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */

.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 5px 16px rgba(var(--accent-glow), 0.42), inset 0 1px 0 rgba(255,255,255,0.28);
  color: #fff;
}

.btn--primary:hover {
  box-shadow: 0 9px 26px rgba(var(--accent-glow), 0.52), inset 0 1px 0 rgba(255,255,255,0.34);
  transform: translateY(-1px);
  filter: brightness(1.07);
}

/* Subtle glow on important inputs/cards */

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.10);
}

/* Account card */

.account-card {
  background: linear-gradient(160deg, rgba(var(--accent-glow),0.12), rgba(255,255,255,0.02));
  border-color: rgba(167, 139, 250, 0.18);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 var(--edge-light);
}

/* Pulsing node on the nav for live chart */

.nav__pulse {
  background: var(--win);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

/* Cool hover glow on KPI cards */

.kpi {
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  background: linear-gradient(180deg, rgba(34,34,46,0.72), rgba(18,18,25,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  padding: 17px 19px;
}

.kpi:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.09);
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.kpi--win:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(74,222,128,0.20);
}

.kpi--loss:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(248,113,113,0.20);
}

.kpi--warn:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(252,211,77,0.20);
}

/* Edge ring on important sections */

.card--featured {
  position: relative;
}

.card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167,139,250,0.4), transparent 50%, rgba(74,222,128,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Mini cluster motif on first card */

.constellation {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SYMBOL PICKER DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */

.sym-drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 6px;
  max-height: 360px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c1c28, #131319);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: dropIn .18s var(--ease-out);
}

.sym-drop[hidden] {
  display: none !important;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sym-drop__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 8px 12px 4px;
}

.sym-drop__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--t-fast) var(--ease);
}

.sym-drop__item:hover {
  background: rgba(167,139,250,0.10);
}

.sym-drop__sym {
  font-family: var(--ff-mono);
  font-weight: 600;
  color: var(--text-1);
}

.sym-drop__name {
  color: var(--text-2);
  font-size: 12.5px;
}

.sym-drop__cat-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
}

.sym-drop__empty {
  padding: 12px;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   AI HERO (top of trade form — prominent autofill)
   ═══════════════════════════════════════════════════════════════════ */

.ai-hero {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.20), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(74,222,128,0.10), transparent 50%),
    linear-gradient(180deg, rgba(28,28,38,0.92), rgba(20,20,28,0.72));
  border: 1px solid rgba(167,139,250,0.32);
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
  animation: aiHeroIn .45s var(--ease-out);
}

@keyframes aiHeroIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-hero__sparkles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 18% 30%, white, transparent),
    radial-gradient(1px 1px at 65% 22%, white, transparent),
    radial-gradient(2px 2px at 38% 70%, white, transparent),
    radial-gradient(1px 1px at 80% 80%, white, transparent),
    radial-gradient(1.5px 1.5px at 56% 38%, white, transparent),
    radial-gradient(1px 1px at 28% 88%, white, transparent),
    radial-gradient(2px 2px at 92% 50%, white, transparent);
  opacity: 0.10;
  pointer-events: none;
  animation: twinkle 6s linear infinite;
}

.ai-hero__body {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.ai-hero__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(167,139,250,0.30), rgba(74,222,128,0.20));
  border: 1px solid rgba(167,139,250,0.40);
  flex-shrink: 0;
  animation: aiPulse 3s ease-in-out infinite;
}

@keyframes aiPulse {

  0%,
  100% {
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.30);
  }

  50% {
    box-shadow: 0 0 28px rgba(167, 139, 250, 0.55), 0 0 40px rgba(74, 222, 128, 0.25);
  }
}

.ai-hero__text {
  flex: 1;
  min-width: 0;
}

.ai-hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #dcdde0, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-hero__sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.45;
}

/* Bias card */

.ai-bias-card {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
  animation: biasIn .45s var(--ease-out);
}

@keyframes biasIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-bias-card[hidden] {
  display: none !important;
}

.bias-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid;
}

.bias-arrow {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--ff-display);
  filter: drop-shadow(0 0 12px currentColor);
}

.bias-label {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.05em;
}

.bias-strength {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.bias-meta {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-3);
}

.bias-reason {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.bias-gex {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(167,139,250,0.32);
  border-radius: 10px;
}

.bias-gex__title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 8px;
  font-weight: 700;
}

.bias-gex__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.bias-gex__grid>div {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.bias-gex__grid b {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.bias-gex__grid span {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
  color: var(--text-1);
}

/* ═══════════════════════════════════════════════════════════════════
   EXTRACTION CARD — what the AI read from the chart
   ═══════════════════════════════════════════════════════════════════ */

.extract-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28,28,38,0.92), rgba(20,20,28,0.78));
  border: 1px solid rgba(167,139,250,0.30);
  animation: extractIn .45s var(--ease-out);
}

@keyframes extractIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.extract-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.extract-card__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-3);
}

.extract-card__close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  color: var(--text-3);
  transition: all var(--t-fast) var(--ease);
}

.extract-card__close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-1);
}

.extract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

@media (max-width: 560px) {
  .extract-grid {
    grid-template-columns: 1fr;
  }

}

.extract-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 12.5px;
  transition: all var(--t-fast) var(--ease);
}

.extract-row.is-filled {
  background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02));
  border-color: rgba(74,222,128,0.30);
}

.extract-row__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.extract-row.is-filled .extract-row__icon {
  background: rgba(74,222,128,0.25);
  color: #4ade80;
}

.extract-row.is-empty .extract-row__icon {
  background: rgba(255,255,255,0.05);
  color: var(--text-4);
}

.extract-row__label {
  color: var(--text-3);
  flex: 1;
  font-weight: 500;
}

.extract-row__val {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--text-1);
}

.extract-row.is-empty .extract-row__val {
  color: var(--text-4);
  font-weight: 400;
}

.extract-card__meta {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 10px;
}

.extract-card__meta b {
  color: var(--accent-3);
  font-family: var(--ff-mono);
}

.extract-card__hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 10px;
  line-height: 1.55;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   AI ANALYSIS RESULT CARD
   ═══════════════════════════════════════════════════════════════════ */

.ai-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.ai-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-progress__bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.ai-progress__bar span {
  display: block;
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transition: width var(--t-fast) linear;
  border-radius: 4px;
}

.ai-progress__label {
  font-size: 11px;
  color: var(--text-3);
}

.ai-result {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.12), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(74,222,128,0.06), transparent 50%),
    linear-gradient(180deg, rgba(28,28,38,0.85), rgba(20,20,28,0.6));
  border: 1px solid rgba(167,139,250,0.30);
  animation: aiResultIn .35s var(--ease-out);
}

@keyframes aiResultIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-result__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ai-result__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-3);
  letter-spacing: 0.02em;
}

.ai-result__close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  display: grid;
  place-items: center;
  font-size: 11px;
  transition: all var(--t-fast) var(--ease);
}

.ai-result__close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-1);
}

.ai-result__summary {
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.5;
}

.ai-result__row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
}

.ai-result__lbl {
  color: var(--text-3);
  min-width: 110px;
}

.ai-result__val {
  font-family: var(--ff-mono);
}

.ai-result__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  font-family: var(--ff-mono);
}

.ai-chip--accent {
  background: rgba(167,139,250,0.18);
  color: var(--accent-3);
}

.ai-result__err {
  color: var(--loss);
  font-size: 12.5px;
}

.ai-gex {
  margin-top: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(167,139,250,0.06);
  border: 1px dashed rgba(167,139,250,0.35);
}

.ai-gex__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ai-gex__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  letter-spacing: 0.04em;
}

.ai-gex__sub {
  font-size: 11px;
  color: var(--text-3);
}

.ai-gex__levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.ai-gex__level {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 12px;
}

.ai-gex__val {
  font-family: var(--ff-mono);
  font-weight: 700;
  margin-left: auto;
}

.ai-gex__notes {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.55;
}

.ai-gex__notes>div {
  margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   TAG MANAGER (Settings)
   ═══════════════════════════════════════════════════════════════════ */

.tag-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tag-add-row input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
}

.tag-manager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-manager__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.tag-manager__del {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.8);
  display: grid;
  place-items: center;
  font-size: 9px;
  transition: all var(--t-fast) var(--ease);
}

.tag-manager__del:hover {
  background: rgba(244,63,94,0.7);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   GUEST BANNER
   ═══════════════════════════════════════════════════════════════════ */

.guest-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(252,211,77,0.95), rgba(251,146,60,0.95));
  color: #1a1a1a;
  font-size: 12.5px;
  box-shadow: 0 12px 30px rgba(252,211,77,0.35);
  animation: guestIn .5s var(--ease-out);
}

@keyframes guestIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.guest-banner svg {
  flex-shrink: 0;
}

.guest-banner b {
  font-weight: 700;
}

.guest-banner__cta {
  background: rgba(0,0,0,0.18);
  color: #1a1a1a;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11.5px;
  transition: background var(--t-fast) var(--ease);
}

.guest-banner__cta:hover {
  background: rgba(0,0,0,0.32);
}

.guest-banner__close {
  background: transparent;
  color: rgba(0,0,0,0.5);
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.guest-banner__close:hover {
  background: rgba(0,0,0,0.15);
  color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════════
   MORE ANIMATIONS — Tilt, Glow, Parallax
   ═══════════════════════════════════════════════════════════════════ */

/* 3D tilt on KPI cards (via JS-set CSS vars --rx --ry) */

.kpi {
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  background: linear-gradient(180deg, rgba(34,34,46,0.72), rgba(18,18,25,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  padding: 17px 19px;
}

.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.09);
}

/* Glow ring on focus around inputs */

.input:focus,
.select:focus,
.textarea:focus {
  animation: focusGlow 1.4s var(--ease) infinite;
}

@keyframes focusGlow {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.10);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.18);
  }
}

/* Nav item slide-in indicator */

.nav__item.is-active::before {
  animation: navSlide .35s var(--ease-out);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 14px rgba(var(--accent-glow), 0.7);
}

@keyframes navSlide {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Card hover lift (consistent everywhere) */

.card {
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
  background: linear-gradient(180deg, rgba(30,30,40,0.62), rgba(16,16,22,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-light);
  border-color: var(--border-strong);
}

/* Parallax aurora — JS will set --px --py */

.aurora__blob--1 {
  transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px));
}

.aurora__blob--2 {
  transform: translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -8px));
}

.aurora__blob--3 {
  transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px));
}

/* ═══════════════════════════════════════════════════════════════════
   FX — Cursor glow, particles, sparkles, magnetic
   ═══════════════════════════════════════════════════════════════════ */

#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: auto;
  opacity: 0.4;
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.16) 0%, rgba(167, 139, 250, 0) 60%);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s var(--ease);
  will-change: transform;
  mix-blend-mode: screen;
  display: none !important;
}

.cursor-glow.is-hot {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, rgba(74,222,128,0.07) 40%, rgba(167,139,250,0) 65%);
}

@media (hover: none) {
  .cursor-glow {
    display: none;
  }

}

[data-magnetic] {
  transition: transform .18s var(--ease);
  will-change: transform;
}

.sparkle {
  position: fixed;
  z-index: 5800;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: sparkleOut .9s var(--ease-out) forwards;
  box-shadow: 0 0 10px currentColor;
}

@keyframes sparkleOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0)), calc(-50% + var(--ty, 0))) scale(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   STAGGER REVEAL (used on every view change)
   ═══════════════════════════════════════════════════════════════════ */

.stagger-in {
  animation: staggerIn .5s var(--ease-out) both;
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATED GRADIENT BORDER on featured cards
   ═══════════════════════════════════════════════════════════════════ */

.card--featured::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    #a78bfa, #22d3ee, #4ade80, #fcd34d, #f87171, #a78bfa
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
  animation: rotateGrad 8s linear infinite;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateGrad {
  to {
    --angle: 360deg;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AI VISION VIEW
   ═══════════════════════════════════════════════════════════════════ */

.vsn-hero {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 40px 30px;
  margin-bottom: 18px;
}

.vsn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(167,139,250,0.18), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(34,211,238,0.14), transparent 60%);
  pointer-events: none;
}

.vsn-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: opacity var(--t-base) var(--ease);
}

.vsn-hero.is-dragging .vsn-hero__inner {
  transform: scale(1.04);
}

.vsn-hero.is-dragging::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(167,139,250,0.6);
  border-radius: var(--radius-lg);
  pointer-events: none;
  animation: dashShift 1.6s linear infinite;
}

@keyframes dashShift {
  to {
    background-position: 100px 0;
  }
}

.vsn-hero__icon {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 12px;
  animation: vsnFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(167,139,250,0.5));
}

@keyframes vsnFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vsn-hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--text-1) 0%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

.vsn-hero__sub {
  color: var(--text-2);
  font-size: 13.5px;
  max-width: 520px;
  margin: 0 auto 22px;
  line-height: 1.55;
}

.vsn-cta {
  padding: 14px 24px;
  font-size: 14px;
  box-shadow: 0 8px 28px rgba(167,139,250,0.5);
}

.vsn-formats {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.vsn-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(13,13,18,0.55);
  backdrop-filter: blur(6px);
  animation: vsnFade .3s var(--ease);
}

@keyframes vsnFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.vsn-progress[hidden] {
  display: none;
}

.vsn-progress__ring {
  position: relative;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 12px rgba(167,139,250,0.45));
}

.vsn-progress__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}

.vsn-progress__label {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

/* Results */

.vsn-results {
  margin-bottom: 18px;
}

.vsn-results[hidden] {
  display: none;
}

.vsn-result {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(28,28,38,0.85), rgba(20,20,28,0.6));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.vsn-result__top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-bottom: 18px;
}

@media (max-width: 800px) {
  .vsn-result__top {
    grid-template-columns: 1fr;
  }

}

.vsn-result__thumb {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}

.vsn-result__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.vsn-bias-headline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid;
  margin-bottom: 14px;
}

.vsn-bias-arrow {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--ff-display);
  filter: drop-shadow(0 0 16px currentColor);
  animation: arrowBeat 1.8s ease-in-out infinite;
}

@keyframes arrowBeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

.vsn-bias-label {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.06em;
}

.vsn-bias-strength {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.vsn-bias-flag {
  margin-left: auto;
  font-size: 28px;
}

.vsn-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.vsn-meta__item {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.vsn-meta__item span {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vsn-meta__item b {
  display: block;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
  color: var(--text-1);
}

.vsn-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vsn-reasons {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.55;
}

.vsn-reason {
  padding-left: 4px;
}

.vsn-gex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.vsn-gex-tile {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.vsn-gex-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.vsn-gex-tile__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vsn-gex-tile__val {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  margin: 4px 0;
  color: var(--text-1);
}

.vsn-gex-tile__desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.45;
}

.vsn-levels-row {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.vsn-levels-row__title {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.vsn-levels-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vsn-chip {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
}

.reveal-stagger {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.reveal-stagger.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   QUANT DESK — rich AI Vision readout
   ═══════════════════════════════════════════════════════════════════ */

.vsn-result__thumb {
  position: relative;
}

.vsn-result__type {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13,13,18,0.85);
  color: var(--accent-3);
  border: 1px solid rgba(167,139,250,0.3);
}

.vsn-headline {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 600;
  line-height: 1.5;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(167,139,250,0.08);
  border: 1px solid rgba(167,139,250,0.2);
}

.vsn-section {
  margin-top: 18px;
}

.vsn-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.vsn-section__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: rgba(167,139,250,0.14);
  border: 1px solid rgba(167,139,250,0.25);
}

.vsn-regime {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid;
}

.vsn-regime--bull {
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.3);
}

.vsn-regime--bear {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.3);
}

.vsn-regime--neutral {
  background: rgba(252,211,77,0.07);
  border-color: rgba(252,211,77,0.25);
}

.vsn-regime__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 5px;
}

.vsn-regime--bull .vsn-regime__title {
  color: #4ade80;
}

.vsn-regime--bear .vsn-regime__title {
  color: #f87171;
}

.vsn-regime--neutral .vsn-regime__title {
  color: #fcd34d;
}

.vsn-regime__note {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
}

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

.vsn-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.vsn-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.vsn-card__top b {
  font-size: 12.5px;
  color: var(--text-1);
  font-weight: 600;
}

.vsn-card__val {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}

.vsn-card__note {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.55;
}

.vsn-scenarios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vsn-scenario {
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--accent);
}

.vsn-scenario--bull {
  border-left-color: #4ade80;
}

.vsn-scenario--bear {
  border-left-color: #f87171;
}

.vsn-scenario--warn {
  border-left-color: #fcd34d;
}

.vsn-scenario--neutral {
  border-left-color: #a78bfa;
}

.vsn-scenario__title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-1);
  margin-bottom: 3px;
}

.vsn-scenario__note {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}

.vsn-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vsn-list li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  padding: 8px 12px 8px 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  position: relative;
}

.vsn-list--edge li {
  border: 1px solid rgba(74,222,128,0.2);
}

.vsn-list--edge li::before {
  content: "⚡";
  position: absolute;
  left: 9px;
}

.vsn-list--risk li {
  border: 1px solid rgba(252,211,77,0.18);
}

.vsn-list--risk li::before {
  content: "›";
  position: absolute;
  left: 11px;
  color: var(--warn);
  font-weight: 700;
}

/* History */

.vsn-history-card[hidden] {
  display: none;
}

.vsn-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.vsn-hist {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.vsn-hist:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.vsn-hist__thumb {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.vsn-hist__body {
  flex: 1;
  min-width: 0;
}

.vsn-hist__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.vsn-hist__time {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

.vsn-hist__gex {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--text-2);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL POLISH — keep particles behind everything
   ═══════════════════════════════════════════════════════════════════ */

.aurora,
#particles {
  z-index: 1;
}

.cursor-glow {
  z-index: 5;
  display: none !important;
}

.main,
.guest-banner {
  z-index: 10;
}

.sidebar {
  z-index: 50;
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.topbar {
  z-index: 40;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.modal-backdrop {
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cmdk {
  z-index: 2000;
}

.toast-stack {
  z-index: 3000;
  max-height: 100vh;
  overflow: hidden;
}

.boot-loader {
  z-index: 9999;
}

.auth-screen {
  z-index: 8000;
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE TICKER STRIP (topbar)
   ═══════════════════════════════════════════════════════════════════ */

.ticker-strip {
  flex: 1;
  min-width: 0;
  max-width: 460px;
  height: 36px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

.ticker-strip__inner {
  display: flex;
  gap: 22px;
  padding: 0 12px;
  height: 100%;
  align-items: center;
  animation: tickerSlide 40s linear infinite;
  white-space: nowrap;
}

.ticker-strip:hover .ticker-strip__inner {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-family: var(--ff-mono);
}

.ticker-item__sym {
  color: var(--text-1);
  font-weight: 600;
}

.ticker-item__price {
  color: var(--text-2);
}

.ticker-item__chg {
  font-weight: 600;
}

.ticker-item__chg.is-pos {
  color: var(--win);
}

.ticker-item__chg.is-neg {
  color: var(--loss);
}

@keyframes tickerSlide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .ticker-strip {
    display: none;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   TIME MACHINE
   ═══════════════════════════════════════════════════════════════════ */

.tm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.tm-kpi {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(28,28,38,0.78), rgba(22,22,30,0.6));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.tm-kpi--accent {
  background: linear-gradient(160deg, rgba(167,139,250,0.18), rgba(167,139,250,0.04));
  border-color: rgba(167,139,250,0.25);
}

.tm-kpi__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

.tm-kpi__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
  color: var(--text-1);
}

.tm-kpi__value.is-pos {
  color: var(--win);
}

.tm-kpi__value.is-neg {
  color: var(--loss);
}

.tm-trail-card {
  margin-bottom: 16px;
}

.tm-trail-card .chart-wrap {
  height: 280px;
}

.tm-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(28,28,38,0.78), rgba(22,22,30,0.6));
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.tm-ctrl {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.tm-ctrl:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-1);
  transform: scale(1.08);
}

.tm-ctrl--big {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  box-shadow: 0 6px 18px rgba(167,139,250,0.4);
}

.tm-ctrl--big:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 28px rgba(167,139,250,0.55);
}

.tm-ctrl.is-hidden {
  display: none;
}

.tm-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(255,255,255,0.06) 0%);
  outline: 0;
  cursor: pointer;
}

.tm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  cursor: pointer;
  box-shadow: 0 0 16px rgba(167,139,250,0.7);
  border: 2px solid white;
}

.tm-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  cursor: pointer;
  border: 2px solid white;
}

.tm-card-glow {
  padding: 16px 18px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02));
  border: 1px solid var(--border-strong);
  animation: tmGlow .8s var(--ease-out);
}

.tm-card-glow.is-win {
  background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(74,222,128,0.02));
  border-color: rgba(74,222,128,0.4);
  box-shadow: 0 0 30px rgba(74,222,128,0.15);
}

.tm-card-glow.is-loss {
  background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(248,113,113,0.02));
  border-color: rgba(248,113,113,0.4);
  box-shadow: 0 0 30px rgba(248,113,113,0.15);
}

.tm-card-glow.is-be {
  background: linear-gradient(135deg, rgba(252,211,77,0.12), rgba(252,211,77,0.02));
  border-color: rgba(252,211,77,0.4);
}

@keyframes tmGlow {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.tm-card__sym {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
}

.tm-card__meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.tm-card__row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.tm-card__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   HOUR × DOW HEATMAP
   ═══════════════════════════════════════════════════════════════════ */

.hour-heatmap {
  padding: 6px 0;
  overflow-x: auto;
}

.hh-grid {
  display: grid;
  grid-template-columns: 60px repeat(24, 1fr);
  gap: 3px;
  min-width: 720px;
}

.hh-corner {
}

.hh-hour {
  text-align: center;
  font-size: 9.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
}

.hh-dow {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.hh-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  transition: transform var(--t-fast) var(--ease);
  cursor: pointer;
}

.hh-cell:hover {
  transform: scale(1.4);
  z-index: 5;
  box-shadow: 0 0 8px rgba(167,139,250,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   PRE-TRADE CHECKLIST
   ═══════════════════════════════════════════════════════════════════ */

.precheck-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.precheck-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.precheck-item:hover {
  border-color: var(--border-strong);
}

.precheck-item:has(input:checked) {
  background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02));
  border-color: rgba(74,222,128,0.35);
}

.precheck-item input {
  margin-top: 3px;
  accent-color: var(--win);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.precheck-item__title {
  font-weight: 600;
  font-size: 13px;
}

.precheck-item__sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.precheck-bar {
  margin-top: 14px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.precheck-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--loss), var(--warn) 50%, var(--win));
  transition: width .4s var(--ease);
  border-radius: 6px;
}

.precheck-status {
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO / EMPTY-STATE CARD ON DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */

.hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.20), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(74,222,128,0.10), transparent 50%),
    linear-gradient(180deg, rgba(28,28,38,0.85), rgba(20,20,28,0.6));
  border: 1px solid rgba(167,139,250,0.25);
  margin-bottom: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: heroIn .8s var(--ease-out);
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-card[hidden] {
  display: none !important;
}

.hero-card__sparkles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 70% 20%, white, transparent),
    radial-gradient(2px 2px at 40% 70%, white, transparent),
    radial-gradient(1px 1px at 80% 80%, white, transparent),
    radial-gradient(1.5px 1.5px at 60% 40%, white, transparent),
    radial-gradient(1px 1px at 30% 90%, white, transparent),
    radial-gradient(2px 2px at 90% 50%, white, transparent),
    radial-gradient(1px 1px at 10% 60%, white, transparent);
  opacity: 0.18;
  pointer-events: none;
  animation: twinkle 6s linear infinite;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.32;
  }
}

.hero-card__content {
  position: relative;
  z-index: 2;
}

.hero-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-3);
  text-transform: uppercase;
}

.hero-card__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 10px 0 12px;
  max-width: 540px;
  background: linear-gradient(180deg, var(--text-1) 60%, var(--text-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-card__title span {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-card__sub {
  color: var(--text-2);
  max-width: 540px;
  line-height: 1.6;
  margin: 0 0 22px;
  font-size: 14px;
}

.hero-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-card__feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
  max-width: 540px;
}

.hero-feat {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
}

.hero-feat b {
  color: var(--text-1);
  font-size: 13px;
}

.hero-feat span {
  font-size: 11px;
  color: var(--text-3);
}

.hero-feat__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hero-card__art {
  align-self: center;
  animation: floaty 6s ease-in-out infinite;
}

@media (max-width: 800px) {
  .hero-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .hero-card__title {
    font-size: 24px;
  }

  .hero-card__art {
    display: none;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD DAILY MOTIVATION CARD (cinematic upgrade)
   ═══════════════════════════════════════════════════════════════════ */

.motivation-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: 20px;
  background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.22), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(74,222,128,0.12), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,0.08), transparent 60%),
    linear-gradient(135deg, rgba(28,28,38,0.95), rgba(18,18,24,0.92));
  border: 1px solid rgba(167,139,250,0.22);
  padding: 32px 36px;
  animation: motivIn 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

@keyframes motivIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.motivation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167,139,250,0.4), transparent 50%, rgba(74,222,128,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.motivation-card__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 12% 30%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 90% 20%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 18% 70%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0.4;
  animation: none !important;
  pointer-events: none;
}

@keyframes motivTwinkle {

  0%,
  100% {
    opacity: 0.15;
    transform: translateX(0);
  }

  50% {
    opacity: 0.35;
    transform: translateX(8px);
  }
}

.motivation-card__body {
  position: relative;
  z-index: 2;
}

.motivation-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.motivation-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(167,139,250,0.45);
}

.motivation-card__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
  animation: pulse 1.8s infinite;
}

.motivation-card__date {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  font-weight: 500;
}

.motivation-card__shuffle {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  transition: all .35s var(--ease);
}

.motivation-card__shuffle:hover {
  color: var(--text-1);
  background: rgba(167,139,250,0.15);
  border-color: rgba(167,139,250,0.4);
  transform: rotate(180deg);
  box-shadow: 0 6px 18px rgba(167,139,250,0.3);
}

.motivation-card__quote {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  max-width: 980px;
  background: linear-gradient(135deg, var(--text-1) 0%, var(--accent-3) 70%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .8s var(--ease);
}

.motivation-card__author {
  font-size: 14px;
  color: var(--text-3);
  font-style: italic;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: opacity .8s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH SCREEN — Smooth Trader Login (performance-first redesign)
   Entrance animations run ONCE. No canvas RAF loops. No backdrop blur.
   Only transform/opacity animate → buttery on any machine.
   ═══════════════════════════════════════════════════════════════════ */

.auth-screen.auth-screen--v2 {
  display: block;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: radial-gradient(ellipse 70% 55% at 24% 16%, rgba(167,139,250,0.16), transparent 72%),
    radial-gradient(ellipse 60% 55% at 84% 90%, rgba(74,222,128,0.10), transparent 72%),
    linear-gradient(175deg, #07070e 0%, #0b0b17 55%, #08080f 100%);
}

.auth-screen.auth-screen--v2[hidden] {
  display: none !important;
}

/* ── Background ── */

.auth-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.auth-bg__orb--1 {
  width: 540px;
  height: 540px;
  top: -180px;
  left: -140px;
  background: radial-gradient(circle, rgba(167,139,250,0.50), transparent 66%);
  animation: orbDrift1 34s ease-in-out infinite;
}

.auth-bg__orb--2 {
  width: 600px;
  height: 600px;
  bottom: -220px;
  right: -180px;
  background: radial-gradient(circle, rgba(74,222,128,0.30), transparent 66%);
  animation: orbDrift2 40s ease-in-out infinite;
}

@keyframes orbDrift1 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(70px, 46px, 0);
  }
}

@keyframes orbDrift2 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-56px, -44px, 0);
  }
}

.auth-bg__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 38% 28%, black, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 75% at 38% 28%, black, transparent 82%);
}

/* ══════════════════════════════════════════════════════════════
   AUTH SCREEN — Animated product mockups (floating preview cards)
   ══════════════════════════════════════════════════════════════ */

.auth-bg__mockups {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Soft circular fade so cards dissolve into the dark edges */
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 50%, black 30%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
  mask-image: radial-gradient(ellipse 130% 100% at 50% 50%, black 30%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
}

/* Base mockup card — solid bg (no backdrop-filter) for scroll perf */

.bg-mock {
  position: absolute;
  background:
    linear-gradient(165deg, rgba(28, 35, 66, 0.92), rgba(18, 22, 42, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 14px 48px -16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0;
  animation: mockFloatIn 1.6s var(--ease-out, ease-out) forwards,
    mockDriftY 14s ease-in-out infinite;
  filter: saturate(0.95);
  /* No will-change here — over-promoting causes ghost-frame artifacts during scroll */
}

.bg-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 50%, rgba(255, 255, 255, 0.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Entrance only — drift is now handled via CSS-var animation in the
   parent's transform property so mouse parallax (which also writes
   to CSS vars) can coexist. */

@keyframes mockFloatIn {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--mock-op, 0.42);
  }
}

@keyframes mockDriftY {

  0%,
  100% {
    --drift-y: 0px;
    --drift-extra: 0deg;
  }

  50% {
    --drift-y: -8px;
    --drift-extra: 0.5deg;
  }
}

/* Positions — corners and edges, away from form */

.bg-mock--pos-tr {
  top: 8.5%;
  right: 4.5%;
  --mock-op: 0.42;
  --mock-rot: 2deg;
  animation-delay: 0s, 1.6s;
}

.bg-mock--pos-mr {
  top: 42%;
  right: 3.5%;
  --mock-op: 0.36;
  --mock-rot: -1.5deg;
  animation-delay: 0.4s, 2.0s;
}

.bg-mock--pos-bl {
  bottom: 8%;
  left: 4%;
  --mock-op: 0.38;
  --mock-rot: -2deg;
  animation-delay: 0.6s, 2.2s;
}

.bg-mock--pos-br {
  bottom: 7%;
  right: 6%;
  --mock-op: 0.40;
  --mock-rot: 1.5deg;
  animation-delay: 0.8s, 2.4s;
}

.bg-mock--pos-ml {
  top: 38%;
  left: 3%;
  --mock-op: 0.36;
  --mock-rot: -1deg;
  animation-delay: 1.0s, 2.6s;
}

/* Hide mockups that would sit over the hero / form columns
   (the auth-shell is max-width: 1380px — anything inside that band
   would overlap foreground content). */

@media (max-width: 1700px) {
  /* Left-positioned mockups sit over the hero column on narrower screens */

  .bg-mock--pos-ml,
  .bg-mock--pos-tl,
  .bg-mock--pos-bl {
      display: none;
    }

}

@media (max-width: 1480px) {
  /* Mid-right also sits behind the form */

  .bg-mock--pos-mr {
      display: none;
    }

}

@media (max-width: 1180px) {
  /* Mobile — no mockups at all */

  .auth-bg__mockups {
      display: none;
    }

}

/* ─── KPI mock ─── */

.bg-mock--kpi {
  width: 240px;
}

.bg-mock__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.bg-mock__value {
  font-family: var(--ff-display, inherit);
  font-weight: 700;
  font-size: 24px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
}

.bg-mock__value--pos {
  color: #4ade80;
}

.bg-mock__value--neg {
  color: #f87171;
}

.bg-mock__hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.bg-mock__delta {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.bg-mock__delta--pos {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.bg-mock__delta--neg {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.bg-mock__spark {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 8px;
}

/* ─── Equity Chart mock ─── */

.bg-mock--chart {
  width: 280px;
}

.bg-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.bg-mock__head-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.bg-mock__pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bg-mock__pill--pos {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.14);
}

.bg-mock__pill--neg {
  color: #f87171;
  background: rgba(248, 113, 113, 0.14);
}

.bg-mock__big-chart {
  display: block;
  width: 100%;
  height: 110px;
}

.bg-mock__draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mockDraw 3.4s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
  filter: drop-shadow(0 0 4px rgba(34, 211, 164, 0.45));
}

@keyframes mockDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.bg-mock__chart-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
  font-family: var(--ff-mono, monospace);
}

/* ─── Calendar mock ─── */

.bg-mock--cal {
  width: 240px;
}

.bg-mock__cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}

.bg-mock__cal-row span {
  font-size: 8px;
  text-align: center;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.bg-mock__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.bg-mock__cal-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  animation: mockCellPulse 6s ease-in-out infinite;
}

.bg-mock__cal-grid i.bg-cal--w {
  background: rgba(34, 211, 164, 0.32);
  border-color: rgba(34, 211, 164, 0.45);
}

.bg-mock__cal-grid i.bg-cal--l {
  background: rgba(244, 63, 94, 0.30);
  border-color: rgba(244, 63, 94, 0.45);
}

.bg-mock__cal-grid i.bg-cal--n {
  opacity: 0.55;
}

/* Opacity instead of filter brightness — composited */

@keyframes mockCellPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.78;
  }
}

.bg-mock__cal-grid i:nth-child(3n) {
  animation-delay: 0.3s;
}

.bg-mock__cal-grid i:nth-child(5n) {
  animation-delay: 0.6s;
}

.bg-mock__cal-grid i:nth-child(7n) {
  animation-delay: 1.1s;
}

.bg-mock__cal-grid i:nth-child(11n) {
  animation-delay: 1.5s;
}

/* ─── Trades mock ─── */

.bg-mock--trades {
  width: 280px;
}

.bg-mock__trade {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
}

.bg-mock__trade:first-of-type {
  border-top: none;
}

.bg-mock__dir {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.bg-mock__dir--long {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}

.bg-mock__dir--short {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.bg-mock__sym {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bg-mock__sym b {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bg-mock__sym span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9.5px;
}

.bg-mock__r {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
}

.bg-mock__pnl {
  font-family: var(--ff-mono, monospace);
  font-weight: 700;
  font-size: 11px;
}

.bg-mock__pnl--pos {
  color: #4ade80;
}

.bg-mock__pnl--neg {
  color: #f87171;
}

/* ─── Donut / Win Rate mock ─── */

.bg-mock--donut {
  width: 200px;
}

.bg-mock__donut-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 6px auto;
}

.bg-mock__donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-12deg);
  animation: mockDonutSpin 18s linear infinite;
}

@keyframes mockDonutSpin {
  to {
    transform: rotate(348deg);
  }
}

.bg-mock__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bg-mock__donut-center b {
  font-family: var(--ff-display, inherit);
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.bg-mock__donut-center span {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.bg-mock__donut-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

.bg-mock__donut-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bg-mock {
      animation: mockFloatIn 1s ease-out forwards;
    }

  .bg-mock__draw-path {
      animation: none;
      stroke-dashoffset: 0;
    }

  .bg-mock__donut-svg {
      animation: none;
    }

  .bg-mock__cal-grid i {
      animation: none;
    }

}

/* ══════════════════════════════════════════════════════════════
   CINEMATIC AUTH BACKGROUND — multi-layer immersive experience
   ══════════════════════════════════════════════════════════════ */

/* Register --scroll-y so scroll handlers can write to it.
   We use calc() with it in each layer's translateY for parallax depth. */

@property --scroll-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.auth-screen {
  --scroll-y: 0px;
  z-index: 8000;
}

/* ─── Layer: 3D perspective grid floor ─── */

.auth-cinema__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  perspective: 600px;
  perspective-origin: 50% 0%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  contain: layout paint;
}

.auth-cinema__floor-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  /* 2x tall so translateY loop is seamless */
  transform-origin: 50% 0%;
  transform: rotateX(58deg) translate3d(0, 0, 0);
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.10) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridFlow 14s linear infinite;
  will-change: transform;
  /* transform-based — composited */
  backface-visibility: hidden;
}

@keyframes gridFlow {
  from {
    transform: rotateX(58deg) translate3d(0, 0, 0);
  }

  to {
    transform: rotateX(58deg) translate3d(0, -80px, 0);
  }
}

/* ─── Layer: Aurora wave gradient mesh ─── */

.auth-cinema__aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
  isolation: isolate;
  /* contains blend-mode repaints */
  contain: layout paint;
  transform: translateZ(0);
  /* force own compositing layer */
}

.auth-cinema__aurora-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: screen;
  filter: blur(50px);
  /* moved here from parent — each blob is its own layer */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.auth-cinema__aurora-blob--1 {
  width: 720px;
  height: 720px;
  top: -15%;
  left: 25%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.55), transparent 65%);
  animation: auroraFloat1 22s ease-in-out infinite;
}

.auth-cinema__aurora-blob--2 {
  width: 660px;
  height: 660px;
  top: 40%;
  left: -8%;
  background: radial-gradient(circle, rgba(34, 211, 164, 0.45), transparent 65%);
  animation: auroraFloat2 28s ease-in-out infinite;
}

.auth-cinema__aurora-blob--3 {
  width: 580px;
  height: 580px;
  bottom: -10%;
  right: 12%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.42), transparent 65%);
  animation: auroraFloat3 32s ease-in-out infinite;
}

@keyframes auroraFloat1 {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(80px, 60px, 0) scale(1.1);
  }

  66% {
    transform: translate3d(-50px, 100px, 0) scale(.95);
  }
}

@keyframes auroraFloat2 {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(-70px, -50px, 0) scale(1.08);
  }

  66% {
    transform: translate3d(90px, 60px, 0) scale(.92);
  }
}

@keyframes auroraFloat3 {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-100px, -80px, 0) scale(1.12);
  }
}

/* ─── Layer: Orbital rings ─── */

.auth-cinema__orbits {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1100px;
  height: 1100px;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.25));
}

/* Rings use the dasharray "rotation illusion" — animating
   stroke-dashoffset gives a flowing-dot effect, avoiding the
   SVG transform-box compatibility pitfalls. */

.orbit {
  animation: orbitDashFlow 8s linear infinite;
}

.orbit--2 {
  animation-duration: 12s;
  animation-direction: reverse;
}

.orbit--3 {
  animation-duration: 16s;
}

@keyframes orbitDashFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -120;
  }
}

.orbit-planet {
  filter: drop-shadow(0 0 6px currentColor);
}

/* ─── Layer: Light beam sweeps ─── */

.auth-cinema__beam {
  position: absolute;
  width: 200%;
  height: 280px;
  top: 30%;
  left: -50%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(167, 139, 250, 0) 30%,
      rgba(167, 139, 250, 0.10) 48%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(74, 222, 128, 0.10) 52%,
      rgba(74, 222, 128, 0) 70%,
      transparent 100%);
  transform: rotate(-12deg) translate3d(-100%, 0, 0);
  pointer-events: none;
  z-index: 1;
  filter: blur(40px);
  animation: beamSweep 11s ease-in-out infinite;
  animation-delay: 3s;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.auth-cinema__beam--2 {
  top: 65%;
  animation-duration: 14s;
  animation-delay: 9s;
  transform: rotate(8deg) translateX(-100%);
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(34, 211, 164, 0.12) 48%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(167, 139, 250, 0.10) 52%,
      transparent 100%);
}

@keyframes beamSweep {
  0% {
    transform: rotate(-12deg) translate3d(-60%, 0, 0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: rotate(-12deg) translate3d(60%, 0, 0);
    opacity: 0;
  }
}

/* ─── Layer: Particle canvas ─── */

.auth-cinema__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

/* ─── Layer: CSS sparkles ─── */

.auth-cinema__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.auth-cinema__sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 4px white,
    0 0 12px rgba(167, 139, 250, 0.6),
    0 0 20px rgba(74, 222, 128, 0.4);
  transform: scale(var(--s, 1));
  opacity: 0;
  animation: sparkleTwinkle 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes sparkleTwinkle {

  0%,
  100% {
    opacity: 0;
    transform: scale(calc(var(--s) * 0.3));
  }

  50% {
    opacity: 1;
    transform: scale(var(--s));
  }
}

/* ─── Layer: Bottom candlestick strip ─── */

.auth-cinema__candles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  opacity: 0.65;
}

.auth-cinema__candles rect,
.auth-cinema__candles line {
  opacity: 0;
  animation: candleRise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom center;
}

@keyframes candleRise {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ─── Scanline overlay ─── */

.auth-cinema__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0.012) 2px,
      rgba(255, 255, 255, 0.012) 4px);
  opacity: 0.6;
}

/* Register CSS vars so they interpolate smoothly in keyframes */

@property --drift-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --drift-extra {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --tilt-x {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --tilt-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ─── Enhanced mockup cards: 3D perspective + drift + tilt (single transform) ─── */

.bg-mock {
  transform-style: preserve-3d;
  /* SINGLE transform composes: drift (animated) + tilt (mouse) + base rotation */
  transform:
    perspective(900px) translate3d(0, var(--drift-y, 0px), 0) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) rotate(calc(var(--mock-rot, 0deg) + var(--drift-extra, 0deg)));
  transition: --tilt-x .35s cubic-bezier(0.16, 1, 0.3, 1),
    --tilt-y .35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shimmer overlay — translateX (GPU) instead of background-position (CPU) */

.bg-mock__shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bg-mock__shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 50%,
      transparent 100%);
  transform: translate3d(-100%, 0, 0);
  animation: shimmerSweep 8s ease-in-out infinite;
  /* No will-change — contained inside card which is already its own layer */
}

.bg-mock--pos-tr .bg-mock__shimmer::after {
  animation-delay: 1.5s;
}

.bg-mock--pos-mr .bg-mock__shimmer::after {
  animation-delay: 2.8s;
}

.bg-mock--pos-bl .bg-mock__shimmer::after {
  animation-delay: 4.2s;
}

.bg-mock--pos-br .bg-mock__shimmer::after {
  animation-delay: 5.5s;
}

.bg-mock--pos-ml .bg-mock__shimmer::after {
  animation-delay: 6.8s;
}

.bg-mock--pos-tl .bg-mock__shimmer::after {
  animation-delay: 3.5s;
}

@keyframes shimmerSweep {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  50% {
    transform: translate3d(350%, 0, 0);
  }

  100% {
    transform: translate3d(350%, 0, 0);
  }
}

/* Live "pulsing dot" badge */

.bg-mock__live {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(34, 211, 164, 0.9);
  letter-spacing: 0.12em;
  z-index: 2;
}

.bg-mock__live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3a4;
}

.bg-mock__live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(34, 211, 164, 0.55);
  transform: scale(1);
  opacity: 1;
  animation: liveDotPulse 1.6s ease-out infinite;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.bg-mock__head .bg-mock__live {
  position: static;
}

/* Glowing dot riding the equity line */

.bg-mock__line-dot {
  filter: drop-shadow(0 0 6px #4ade80);
}

/* Trade rows stagger entrance */

.bg-mock__trade {
  opacity: 0;
  transform: translateX(20px);
  animation: tradeRowIn .8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(2s + var(--td, 0s));
}

@keyframes tradeRowIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Area fade animation */

.bg-mock__area-fade {
  opacity: 0;
  animation: areaFadeIn 1.4s ease-out 3.2s forwards;
}

@keyframes areaFadeIn {
  to {
    opacity: 1;
  }
}

/* ─── New: AI Vision mockup ─── */

.bg-mock--ai {
  width: 250px;
}

.bg-mock--pos-tl {
  top: 10%;
  left: 4%;
  --mock-op: 0.40;
  --mock-rot: 1.5deg;
  animation-delay: 1.2s, 2.8s;
}

@media (max-width: 1480px) {
  .bg-mock--pos-tl {
      display: none;
    }

}

.bg-mock__ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}

.bg-mock__ai-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(74, 222, 128, 0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bg-mock__ai-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(167, 139, 250, 0.45);
  transform: scale(1);
  opacity: 1;
  animation: aiIconPulse 3s ease-out infinite;
}

@keyframes aiIconPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.bg-mock__ai-text {
  min-width: 0;
}

.bg-mock__ai-text b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.bg-mock__ai-text span {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.bg-mock__ai-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  margin-bottom: 6px;
}

.bg-mock__ai-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a78bfa, #4ade80);
  border-radius: inherit;
  animation: aiBarFill 2.4s cubic-bezier(0.16, 1, 0.3, 1) 2.6s forwards;
}

@keyframes aiBarFill {
  to {
    width: 98%;
  }
}

.bg-mock__ai-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--ff-mono, monospace);
}

/* Make mockups z-stacked above particle canvas */

.auth-bg__mockups {
  z-index: 4;
}

/* Auth shell sits on top of everything */

.auth-screen .auth-shell {
  z-index: 5;
}

.auth-screen .auth-ticker {
  z-index: 6;
}

/* Stop cinema layers from showing during boot */

.app-loading .auth-cinema__floor,
.app-loading .auth-cinema__aurora,
.app-loading .auth-cinema__orbits,
.app-loading .auth-cinema__particles,
.app-loading .auth-cinema__candles {
  display: none;
}

/* Reduced motion = static, no drift/spin/sweep */

@media (prefers-reduced-motion: reduce) {
  .auth-cinema__floor-grid,
  .auth-cinema__aurora-blob,
  .orbit,
  .orbit-planet,
  .auth-cinema__beam,
  .auth-cinema__sparkles i,
  .bg-mock__live-dot,
  .bg-mock__shimmer,
  .bg-mock__ai-icon,
  .bg-mock__line-dot {
      animation: none !important;
    }

  .bg-mock {
      transform: none;
    }

}

/* ── SVG chart — draws ONCE then stays static ── */

.auth-chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 70%;
  opacity: 0;
  animation: chartFade 1.6s ease-out .2s forwards;
  /* soft fade at top + bottom — kills the hard horizontal seam */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 88%, transparent 100%);
}

@keyframes chartFade {
  to {
    opacity: 0.5;
  }
}

.auth-chart__line {
  fill: none;
  stroke: url(#authChartGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawChart 3.6s cubic-bezier(0.16, 1, 0.3, 1) .5s forwards;
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.4));
}

@keyframes drawChart {
  to {
    stroke-dashoffset: 0;
  }
}

.auth-chart__area {
  opacity: 0;
  animation: areaFade 2.2s ease-out 2.6s forwards;
}

@keyframes areaFade {
  to {
    opacity: 1;
  }
}

/* ── Ticker (single transform — GPU cheap) ── */

.auth-ticker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: 38px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,8,15,0.92), rgba(8,8,15,0));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.auth-ticker__inner {
  display: flex;
  gap: 38px;
  height: 100%;
  align-items: center;
  padding: 0 16px;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  animation: tickerSlide 80s linear infinite;
  will-change: transform;
}

.auth-ticker__inner span {
  display: inline-flex;
  gap: 6px;
}

.auth-ticker__inner b {
  font-weight: 700;
}

.auth-ticker__inner b.is-pos {
  color: var(--win);
}

.auth-ticker__inner b.is-neg {
  color: var(--loss);
}

/* ── Shell ── */

.auth-shell {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.12fr 440px;
  gap: 64px;
  min-height: 100vh;
  padding: 84px 64px 56px;
  align-items: center;
  max-width: 1380px;
  margin: 0 auto;
}

@media (max-width: 1180px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 36px;
    padding: 78px 28px 40px;
  }

}

.auth-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One-time entrance — opacity + transform only */

@keyframes authUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── LEFT hero ── */

.auth-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-hero__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: authUp .8s var(--ease-out) .05s both;
}

.auth-hero__logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(167,139,250,0.22), rgba(74,222,128,0.12));
  border: 1px solid rgba(167,139,250,0.40);
  box-shadow: 0 8px 26px rgba(167,139,250,0.30);
}

.auth-hero__brandname {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.28em;
  background: linear-gradient(135deg, #ffffff, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-hero__tagline {
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 500;
}

.auth-hero__headline {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(52px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text-1);
  display: flex;
  flex-direction: column;
}

.auth-hero__line {
  display: block;
  opacity: 0;
  animation: authUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-hero__line:nth-child(1) {
  animation-delay: .22s;
}

.auth-hero__line:nth-child(2) {
  animation-delay: .36s;
}

.auth-hero__line:nth-child(3) {
  animation-delay: .50s;
}

.auth-hero__line:nth-child(4) {
  animation-delay: .64s;
}

.auth-hero__accent {
  background: linear-gradient(120deg, #a78bfa 0%, #c4b5fd 38%, #5eead4 72%, #4ade80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-hero__desc {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 560px;
  margin: 4px 0 0;
  opacity: 0;
  animation: authUp 1s var(--ease-out) .8s both;
}

.auth-hero__desc b {
  color: var(--text-1);
  font-weight: 600;
}

/* Feature pills */

.auth-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
}

@media (max-width: 560px) {
  .auth-features {
    grid-template-columns: 1fr;
  }

}

/* ─────────── Feature cards — editorial premium (no tile chrome) ───────────
   The "identical icon-in-tile grid" is the SaaS template cliché. Here
   the icon floats inside a soft radial halo (no hard border), the card
   stays nearly transparent, and an accent stripe slides in on hover.
   Two-tone palette (lilac + aqua) alternates by column → cohesion + rhythm. */

.auth-feature {
  --c: 167, 139, 250;
  /* default lilac — overridden per column below */
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-radius: 14px;
  /* Near-transparent card — gradient is barely there, lets the bg breathe */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  animation: authPop .85s var(--ease-out) both;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,0.035);
}

/* Two-tone by column position — must match icon palette below */

.auth-feature:nth-child(odd) {
  --c: 167, 139, 250;
}

/* lilac (col 1) */

.auth-feature:nth-child(even) {
  --c: 94, 234, 212;
}

/* aqua  (col 2) */

@media (max-width: 560px) {
  /* Stacked layout: alternate by row instead so rhythm survives */

  .auth-feature:nth-child(even) {
      --c: 167, 139, 250;
    }

  .auth-feature:nth-child(odd) {
      --c: 94, 234, 212;
    }

  .auth-feature:nth-child(1) {
      --c: 167, 139, 250;
    }

}

/* Accent stripe on the left edge — invisible until hover, follows --c */

.auth-feature::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgb(var(--c)) 50%, transparent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .35s var(--ease), transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.auth-feature:nth-child(1) {
  animation-delay: .92s;
}

.auth-feature:nth-child(2) {
  animation-delay: 1.0s;
}

.auth-feature:nth-child(3) {
  animation-delay: 1.08s;
}

.auth-feature:nth-child(4) {
  animation-delay: 1.16s;
}

.auth-feature:nth-child(5) {
  animation-delay: 1.24s;
}

.auth-feature:nth-child(6) {
  animation-delay: 1.32s;
}

.auth-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(167,139,250,0.40);
  background: rgba(167,139,250,0.07);
}

.auth-feature:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────── Feature icons — halo only, no hard tile ───────────
   Soft radial halo replaces the tile chrome. The icon itself
   becomes the focal point — feels like an illustration, not a button. */

.auth-feature__icon {
  --c: 167, 139, 250;
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  color: #c4b5fd;
  border-radius: 11px;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1),
    background .35s var(--ease);
  background: linear-gradient(135deg, rgba(167,139,250,0.16), rgba(74,222,128,0.07));
  border: 1px solid rgba(167,139,250,0.26);
  font-size: initial;
  line-height: normal;
  margin-top: 0;
}

/* 24×24 icon inside 38×38 halo — icon-forward, halo is just light */

.auth-feature__icon svg {
  width: 21px;
  height: 21px;
  display: block;
  stroke-width: 1.75;
  filter: drop-shadow(0 0 6px rgba(var(--c), 0.55));
  transition: filter .35s var(--ease), stroke-width .35s var(--ease);
}

/* Two-tone palette — lilac (left col) + aqua (right col).
   Alternating by column gives visual rhythm without rainbow chaos. */

.auth-feature__icon.icn-tv,
.auth-feature__icon.icn-net,
.auth-feature__icon.icn-target {
  --c: 167, 139, 250;
}

/* lilac (col 1) */

.auth-feature__icon.icn-ai,
.auth-feature__icon.icn-clock,
.auth-feature__icon.icn-shield {
  --c: 94, 234, 212;
}

/* aqua (col 2) */

/* Hover: halo blooms, icon glows brighter, no clumsy lift */

.auth-feature:hover .auth-feature__icon {
  transform: scale(1.08);
  background:
    radial-gradient(circle at center, rgba(var(--c), 0.26) 0%, rgba(var(--c), 0.08) 50%, transparent 75%);
}

.auth-feature:hover .auth-feature__icon svg {
  filter: drop-shadow(0 0 10px rgba(var(--c), 0.85));
  stroke-width: 2;
}

.auth-feature b {
  display: block;
  font-size: 13.5px;
  color: var(--text-1);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.auth-feature > div > span {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
  line-height: 1.35;
}

/* Counters */

.auth-counters {
  display: flex;
  gap: 38px;
  opacity: 0;
  animation: authUp 1s var(--ease-out) 1.4s both;
}

.auth-counter b {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #a78bfa, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.auth-counter span {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 6px;
  display: block;
  font-weight: 500;
}

/* Quote */

.auth-quote {
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  max-width: 560px;
  opacity: 0;
  animation: authUp 1s var(--ease-out) 1.55s both;
}

.auth-quote__mark {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 0.55;
  color: var(--accent);
  opacity: 0.55;
  flex-shrink: 0;
}

.auth-quote__text {
  font-size: 15px;
  color: var(--text-1);
  font-style: italic;
  margin: 0;
  line-height: 1.55;
  transition: opacity .7s var(--ease);
}

.auth-quote__author {
  font-size: 12px;
  color: var(--text-3);
  margin: 8px 0 0;
  letter-spacing: 0.05em;
  transition: opacity .7s var(--ease);
}

/* ── RIGHT card ── */

.auth-card--v2 {
  margin: 0;
  max-width: none;
  padding: 38px 34px 26px;
  background: linear-gradient(180deg, #1a1a24 0%, #101015 100%);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: authPop 1s cubic-bezier(0.16, 1, 0.3, 1) .3s both;
}

.auth-card--v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a78bfa, #5eead4, #4ade80);
}

.auth-card__head {
  text-align: center;
  margin-bottom: 22px;
}

.auth-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-1);
}

.auth-sub {
  font-size: 13.5px;
  color: var(--text-3);
  margin: 8px 0 0;
}

/* Tabs */

.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}

.auth-tab {
  position: relative;
  z-index: 2;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  transition: color .25s var(--ease);
}

.auth-tab.is-active {
  color: #fff;
}

.auth-tab__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(50% - 4px);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(167,139,250,0.4);
  transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-tabs[data-tab="signup"] .auth-tab__indicator {
  transform: translateX(100%);
}

/* Form fields */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  position: relative;
}

.auth-field[hidden] {
  display: none;
}

.auth-field input {
  width: 100%;
  padding: 15px 14px 13px 40px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text-1);
  font-size: 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  outline: 0;
}

.auth-field input:hover {
  border-color: rgba(255,255,255,0.16);
}

.auth-field input:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
}

.auth-field label {
  position: absolute;
  left: 40px;
  top: 14px;
  font-size: 13px;
  color: var(--text-3);
  pointer-events: none;
  transition: top .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease);
}

.auth-field input:focus+label,
.auth-field input:not(:placeholder-shown)+label {
  top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-3);
}

.auth-field__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.auth-field input:focus~.auth-field__icon {
  color: var(--accent-3);
}

.auth-field__eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}

.auth-field__eye:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.06);
}

.auth-strength {
  padding-top: 2px;
}

.auth-strength[hidden] {
  display: none;
}

.auth-strength__bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.auth-strength__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--loss), var(--warn) 50%, var(--win));
  border-radius: 4px;
  transition: width .3s var(--ease);
}

.auth-strength__label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

.auth-error {
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.35);
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
}

.auth-error[hidden] {
  display: none;
}

.auth-submit {
  padding: 14px 16px;
  margin-top: 6px;
  font-size: 14px;
  position: relative;
  border-radius: 12px;
}

.auth-submit__loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}

.auth-submit.is-loading .auth-submit__text {
  opacity: 0;
}

.auth-submit.is-loading .auth-submit__loader {
  display: inline-block !important;
  position: absolute;
}

.auth-divider {
  text-align: center;
  position: relative;
  margin: 18px 0;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 26px);
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.auth-divider::before {
  left: 0;
}

.auth-divider::after {
  right: 0;
}

.auth-divider--guest {
  margin: 12px 0;
}

/* ── OAuth buttons ── */

.auth-oauth {
  display: flex;
  gap: 10px;
}

.auth-oauth__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background .25s var(--ease), border-color .25s var(--ease),
    transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s var(--ease);
  text-decoration: none;
  cursor: pointer;
}

.auth-oauth__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.auth-oauth__btn--discord {
  --dc: 88, 101, 242;
  border-color: rgba(var(--dc), 0.35);
  background: rgba(var(--dc), 0.08);
  color: #fff;
}

.auth-oauth__btn--discord:hover {
  background: rgba(var(--dc), 0.18);
  border-color: rgba(var(--dc), 0.55);
  box-shadow: 0 4px 20px rgba(var(--dc), 0.25);
}

.auth-oauth__btn--discord svg {
  color: #5865F2;
}

.auth-oauth__btn--google {
  --gg: 234, 67, 53;
  border-color: rgba(var(--gg), 0.35);
  background: rgba(var(--gg), 0.08);
  color: #fff;
}

.auth-oauth__btn--google:hover {
  background: rgba(var(--gg), 0.18);
  border-color: rgba(var(--gg), 0.55);
  box-shadow: 0 4px 20px rgba(var(--gg), 0.25);
}

.auth-oauth__btn--google svg {
  color: #EA4335;
}

.auth-guest-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.auth-foot__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 8px var(--win);
}

.auth-foot .dot {
  color: var(--text-4);
}

/* Perks card */

.auth-perks {
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  opacity: 0;
  animation: authPop 1s var(--ease-out) .5s both;
}

.auth-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-2);
}

.auth-perk b {
  color: var(--text-1);
  font-weight: 600;
}

.auth-perk__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(74,222,128,0.22), rgba(34,211,164,0.10));
  border: 1px solid rgba(74,222,128,0.32);
  color: #4ade80;
}

/* Mini stats */

.auth-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  opacity: 0;
  animation: authPop 1s var(--ease-out) .62s both;
}

.auth-mini-stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.auth-mini-stat__label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.auth-mini-stat__val {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
  color: var(--accent-3);
}

/* Respect reduced-motion */

@media (prefers-reduced-motion: reduce) {
  .auth-bg__orb,
  .auth-ticker__inner,
  .auth-chart__line,
  .auth-chart__area,
  .auth-hero__brand,
  .auth-hero__line,
  .auth-hero__desc,
  .auth-feature,
  .auth-counters,
  .auth-quote,
  .auth-card--v2,
  .auth-perks,
  .auth-mini-stats {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      stroke-dashoffset: 0 !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════
   AVATAR MENU (topbar dropdown)
   ═══════════════════════════════════════════════════════════════════ */

.avatar-wrap {
  position: relative;
}

.avatar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 8px;
  background: linear-gradient(180deg, #1c1c28, #131319);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  animation: avatarMenuIn .2s var(--ease-out);
  transform-origin: top right;
}

@keyframes avatarMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.avatar-menu[hidden] {
  display: none !important;
}

.avatar-menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.avatar-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: white;
  font-weight: 700;
  font-family: var(--ff-display);
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(167,139,250,0.4);
}

.avatar-menu__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-1);
}

.avatar-menu__email {
  font-size: 11.5px;
  color: var(--text-3);
}

.avatar-menu__divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.avatar-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  transition: all var(--t-fast) var(--ease);
}

.avatar-menu__item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
}

.avatar-menu__item--danger {
  color: var(--loss);
}

.avatar-menu__item--danger:hover {
  background: rgba(248,113,113,0.10);
  color: #fca5a5;
}

/* Profile card */

.profile-row {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: white;
  font-weight: 700;
  font-family: var(--ff-display);
  font-size: 24px;
  box-shadow: 0 4px 18px rgba(167,139,250,0.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CELEBRATE BANNER
   ═══════════════════════════════════════════════════════════════════ */

.celebrate-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5500;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(167,139,250,0.95), rgba(74,222,128,0.95));
  color: white;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 60px rgba(167,139,250,0.4);
  animation: celebrateIn .5s var(--ease-out);
  pointer-events: none;
}

.celebrate-banner.is-leaving {
  animation: celebrateOut .4s var(--ease) forwards;
}

.celebrate-banner__icon {
  font-size: 36px;
}

.celebrate-banner__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
}

.celebrate-banner__sub {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 2px;
}

@keyframes celebrateIn {
  from {
    transform: translate(-50%, -50%) scale(.7);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes celebrateOut {
  to {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL POLISH PASS — accessibility, tactility, consistency
   ═══════════════════════════════════════════════════════════════════ */

/* Tabular numerals so every number column lines up perfectly */

.trade-table,
.kpi__value,
.pnl-cell,
.trade-row__pnl,
.trade-row__r,
.calc-out-value,
.tm-kpi__value,
.streak__value,
.graph-stat__val,
.account-card__value,
.vsn-card__val,
.extract-row__val,
.ai-gex__val,
.dl-card__value,
.pb-card__stat-value,
.cal-day__pnl {
  font-variant-numeric: tabular-nums;
}

/* Keyboard focus rings — visible only for keyboard users */

:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 2px;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.auth-field input:focus-visible,
.range:focus-visible {
  outline: none;
}

.nav__item:focus-visible {
  outline-offset: -2px;
  border-radius: 8px;
}

/* Tactile press feedback */

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.icon-btn:active {
  transform: scale(0.93);
}

.chip:active,
.seg__btn:active,
.toggle-btn:active {
  transform: scale(0.96);
}

.kpi:active {
  transform: translateY(-1px) scale(0.997);
}

/* Sticky trade-table header so it stays in view while scrolling */

.trade-table-wrap {
  overflow: auto;
  max-height: 72vh;
}

.trade-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #15151d;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* TradingView loading skeleton — no blank white flash */

.tv-widget {
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(167,139,250,0.06), transparent 60%),
    var(--bg-1);
}

.tv-widget::before {
  content: "Connecting to TradingView…";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.tv-widget iframe {
  position: relative;
  z-index: 1;
}

/* Smooth, consistent card radius + hover everywhere */

.kpi,
.card,
.pb-card,
.tm-kpi,
.vsn-card {
  will-change: transform;
}

.kpi__value {
  transition: color .35s var(--ease);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.025em;
  margin-top: 9px;
  color: var(--text-1);
}

/* Nicer scrollbars inside scroll regions */

.trade-table-wrap::-webkit-scrollbar,
.graph-side::-webkit-scrollbar,
.cmdk__list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Disabled buttons read as disabled */

.btn:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:active {
  transform: none;
}

/* Empty-state polish — center & breathe */

.trade-empty,
.muted {
  line-height: 1.6;
}

/* Selection + caret accent */

input,
textarea {
  caret-color: var(--accent);
}

/* Prevent layout shift on images loading in dropzone */

.dropzone__preview img {
  background: rgba(255,255,255,0.04);
}

/* Toast: subtle entrance polish already set — ensure stack never overflows */

.toast-stack {
  max-height: 100vh;
  overflow: hidden;
}

/* Make the active nav item icon pop a touch more */

.nav__item.is-active .nav__icon {
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.45));
}

/* Smooth number/letter rendering */

body {
  text-rendering: optimizeLegibility;
  font-size: 13.5px;
  letter-spacing: 0.005em;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESS BANNER — trial / expired / paid / guest
   ═══════════════════════════════════════════════════════════════════ */

.access-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  max-width: 640px;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 12.5px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  animation: guestIn .5s var(--ease-out);
}

.access-banner b {
  font-weight: 700;
}

.access-banner__msg {
  flex: 1;
}

.access-banner svg {
  flex-shrink: 0;
}

.access-banner__cta {
  padding: 5px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.access-banner__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.access-banner__x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.ab--trial {
  background: linear-gradient(135deg, #1f1b3a, #181830);
  border: 1px solid rgba(167,139,250,0.4);
  color: var(--text-1);
}

.ab--trial>svg {
  color: var(--accent-3);
}

.ab--trial .access-banner__cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.ab--trial .access-banner__x {
  background: rgba(255,255,255,0.08);
  color: var(--text-2);
}

.ab--expired {
  background: linear-gradient(135deg, #2a1216, #1f0e12);
  border: 1px solid rgba(248,113,113,0.5);
  color: #fecaca;
}

.ab--expired>svg {
  color: #f87171;
}

.ab--expired .access-banner__cta {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
}

.ab--expired .access-banner__x {
  background: rgba(255,255,255,0.08);
  color: #fca5a5;
}

.ab--guest {
  background: linear-gradient(135deg, rgba(252,211,77,0.95), rgba(251,146,60,0.95));
  color: #1a1a1a;
}

.ab--guest>svg {
  color: #1a1a1a;
}

.ab--guest .access-banner__cta {
  background: rgba(0,0,0,0.2);
  color: #1a1a1a;
}

.ab--guest .access-banner__x {
  background: rgba(0,0,0,0.12);
  color: #1a1a1a;
}

.ab--paid {
  background: linear-gradient(135deg, #122a1e, #0e2018);
  border: 1px solid rgba(74,222,128,0.4);
  color: #bbf7d0;
}

.ab--paid>svg {
  color: #4ade80;
}

.ab--paid .access-banner__cta {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.ab--paid .access-banner__x {
  background: rgba(255,255,255,0.08);
  color: #86efac;
}

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

.paywall {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.paywall__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.paywall__glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.4), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.paywall__body {
  position: relative;
  z-index: 2;
  padding: 34px 32px 26px;
}

/* Mobile: tighten padding + ensure modal fits within viewport.
   Without these the paywall modal overflows the right side on 375px
   because the title/price text uses fixed width assumptions. */
@media (max-width: 480px) {
  /* Stop any descendant (e.g. wide tables) from blowing out the page
     width and breaking fixed-position modal centering. */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .view, .card { max-width: 100%; }
  .modal-backdrop { padding: 12px; }
  .paywall { max-width: 100%; }
  .paywall__body { padding: 28px 18px 20px; }
  .paywall__title { font-size: 22px !important; }
  .paywall__sub { font-size: 13px !important; }
  .paywall__amount { font-size: 36px !important; }
  .paywall__per { font-size: 14px !important; }
  .paywall__feats { padding-left: 0 !important; text-align: left; }
}

.paywall__badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent-3);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(167,139,250,0.14);
  border: 1px solid rgba(167,139,250,0.3);
  margin-bottom: 14px;
}

.paywall__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.paywall__sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 auto 18px;
  max-width: 380px;
  line-height: 1.55;
}

.paywall__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 18px;
}

.paywall__amount {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(135deg, #a78bfa, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.paywall__per {
  font-size: 15px;
  color: var(--text-3);
}

.paywall__feats {
  list-style: none;
  margin: 0 0 20px;
  padding: 16px 18px;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paywall__feats li {
  font-size: 12.5px;
  color: var(--text-2);
}

.paywall__cta {
  padding: 14px;
  font-size: 14.5px;
  margin-bottom: 8px;
}

.paywall__note {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(252,211,77,0.06);
  border: 1px solid rgba(252,211,77,0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   PLAN BADGES
   ═══════════════════════════════════════════════════════════════════ */

.plan-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.plan-badge--owner {
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  color: #1a1a1a;
}

.plan-badge--paid {
  background: rgba(74,222,128,0.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
}

.plan-badge--trial {
  background: rgba(167,139,250,0.18);
  color: var(--accent-3);
  border: 1px solid rgba(167,139,250,0.4);
}

.plan-badge--expired {
  background: rgba(248,113,113,0.16);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.4);
}

.plan-badge--guest {
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN PAGE
   ═══════════════════════════════════════════════════════════════════ */

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
}

.admin-table tbody tr {
  transition: background var(--t-fast) var(--ease);
}

.admin-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.admin-grant {
  display: flex;
  gap: 4px;
}

.admin-grant button {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(167,139,250,0.14);
  color: var(--accent-3);
  border: 1px solid rgba(167,139,250,0.3);
  transition: all var(--t-fast) var(--ease);
}

.admin-grant button:hover {
  background: rgba(167,139,250,0.28);
  transform: translateY(-1px);
}

.admin-grant button.admin-expire {
  background: rgba(252,211,77,0.13);
  color: #fcd34d;
  border-color: rgba(252,211,77,0.32);
}

.admin-grant button.admin-expire:hover {
  background: rgba(252,211,77,0.25);
}

.admin-grant button.admin-expire[disabled] {
  background: rgba(248,113,113,0.14);
  color: #f87171;
  border-color: rgba(248,113,113,0.30);
  cursor: not-allowed;
  opacity: .85;
  transform: none;
}

.admin-del {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 7px;
  background: rgba(248,113,113,0.12);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.3);
  transition: all var(--t-fast) var(--ease);
}

.admin-del:hover {
  background: rgba(248,113,113,0.25);
}

.admin-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

.admin-note svg {
  color: var(--accent-3);
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-note b {
  color: var(--text-2);
}

.nav__item--admin .nav__icon {
  color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════
   BILLING CARD (Settings)
   ═══════════════════════════════════════════════════════════════════ */

.billing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.billing__cell {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.billing__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.billing__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  margin-top: 4px;
}

.billing__plan {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
}

.billing__plan--owner {
  color: #fbbf24;
}

.billing__plan--paid {
  color: #4ade80;
}

.billing__plan--trial {
  color: var(--accent-3);
}

.billing__plan--guest {
  color: var(--text-3);
}

.billing__owner {
  font-size: 13px;
  color: #fcd34d;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.25);
}

/* ═══════════ DISCORD BUTTON / LINK ═══════════ */

.paywall__discord {
  background: linear-gradient(135deg, #5865F2, #4752c4);
  color: #fff;
  box-shadow: 0 8px 24px rgba(88,101,242,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  gap: 9px;
}

.paywall__discord:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.paywall__discord:active {
  transform: translateY(1px) scale(0.99);
}

.avatar-menu__item--discord {
  color: #a3acf9;
}

.avatar-menu__item--discord:hover {
  background: rgba(88,101,242,0.16);
  color: #c7cdfb;
}

.avatar-menu__item--discord svg {
  color: #5865F2;
}

/* ════════════════════════════════════════════════════════════════════
   REFINED DARK — premium overhaul (CSS-only, overrides earlier rules)
   Layered surfaces · lit-from-above highlights · elevation depth
   ════════════════════════════════════════════════════════════════════ */

/* ── Canvas ── */

body {
  font-size: 13.5px;
  letter-spacing: 0.005em;
}

body::before {
  background: radial-gradient(ellipse 48% 36% at 16% -6%, rgba(var(--accent-glow), 0.16), transparent 62%),
    radial-gradient(ellipse 40% 34% at 92% 6%, rgba(74,222,128,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

/* ── Cards — layered surface with a top edge-light ── */

.card {
  background: linear-gradient(180deg, rgba(30,30,40,0.62), rgba(16,16,22,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}

.card::before {
  display: none;
}

/* drop the old masked gradient border for a cleaner edge */

.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-light);
}

.card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.card__sub {
  font-size: 12px;
  color: var(--text-3);
}

.card__head {
  margin-bottom: 18px;
}

/* ── KPI cards — the hero metric tiles ── */

.kpi {
  background: linear-gradient(180deg, rgba(34,34,46,0.72), rgba(18,18,25,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  padding: 17px 19px;
}

.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.09);
}

.kpi__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

.kpi__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.025em;
  margin-top: 9px;
  color: var(--text-1);
}

.kpi__hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
}

.kpi::after {
  opacity: 0.7;
}

/* ── Buttons — crisp, lit ── */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform .14s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), filter .2s var(--ease);
}

.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 5px 16px rgba(var(--accent-glow), 0.42), inset 0 1px 0 rgba(255,255,255,0.28);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 26px rgba(var(--accent-glow), 0.52), inset 0 1px 0 rgba(255,255,255,0.34);
  filter: brightness(1.07);
}

.btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}

.btn--ghost:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.2);
  color: var(--text-1);
}

.btn--danger {
  background: linear-gradient(180deg, #fb6b6b, #e23d3d);
  box-shadow: 0 5px 16px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ── Inputs — recessed, focus-glow ── */

.input,
.select,
.textarea {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-glow), 0.6);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-glow), 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.2);
  animation: none;
}

.form-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* ── Sidebar — deeper, refined ── */

.sidebar {
  background: linear-gradient(180deg, #0c0c13 0%, #08080c 100%);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.sidebar__brand {
  border-bottom: 1px solid var(--border);
}

.nav__item {
  border-radius: 10px;
  font-weight: 500;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.nav__item:hover {
  background: rgba(255,255,255,0.045);
}

.nav__item.is-active {
  background: linear-gradient(90deg, rgba(var(--accent-glow),0.17), rgba(var(--accent-glow),0.03));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-glow),0.17), inset 0 1px 0 rgba(255,255,255,0.03);
}

.nav__item.is-active::before {
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 14px rgba(var(--accent-glow), 0.7);
}

.nav__section {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-4);
  padding: 16px 12px 7px;
}

.account-card {
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(var(--accent-glow),0.12), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 var(--edge-light);
}

/* ── Topbar — crisp glass ── */

.topbar {
  background: linear-gradient(180deg, rgba(10, 10, 16, 0.92), rgba(10, 10, 16, 0.66));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.topbar__search {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  border-radius: var(--radius-sm);
}

.topbar__search:focus-within {
  border-color: rgba(var(--accent-glow),0.5);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-glow),0.12), inset 0 1px 2px rgba(0,0,0,0.2);
}

.icon-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: 10px;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--border-strong);
}

/* ── View headers — sharper typographic hierarchy ── */

.view__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-3);
}

.view__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #b9bac4 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.view__subtitle {
  color: var(--text-3);
  font-size: 13.5px;
}

/* ── Modals — deep elevation ── */

.modal {
  background: linear-gradient(180deg, #1a1a23 0%, #101015 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.055);
}

.modal-backdrop {
  background: rgba(5, 5, 9, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__head {
  border-bottom: 1px solid var(--border);
}

.modal__foot {
  border-top: 1px solid var(--border);
}

.modal__title {
  font-family: var(--ff-display);
  letter-spacing: -0.01em;
}

/* ── Tables — refined rows ── */

.trade-table thead th,
.admin-table thead th {
  background: #131319;
  font-size: 10px;
  letter-spacing: 0.11em;
  color: var(--text-3);
}

.trade-table td,
.admin-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.trade-table tbody tr:hover,
.admin-table tbody tr:hover {
  background: rgba(var(--accent-glow), 0.055);
}

/* ── Chips, segments, badges ── */

.chip {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: 999px;
}

.chip:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
}

.chip.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-glow),0.22), rgba(var(--accent-glow),0.1));
  border-color: rgba(var(--accent-glow),0.45);
  color: var(--text-1);
}

.seg {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  border-radius: 11px;
}

.seg__btn.is-active {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 3px 10px rgba(var(--accent-glow),0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

.badge {
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Toast — refined ── */

.toast {
  background: linear-gradient(180deg, #20202b, #15151c);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Recent-trade rows / list items ── */

.trade-row,
.playbook-item,
.watch-row,
.session-time,
.journal-entry,
.streak,
.dl-card,
.calc-out-item {
  border-radius: var(--radius-sm);
}

.trade-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
  border: 1px solid var(--border);
}

.trade-row:hover {
  background: rgba(255,255,255,0.055);
  border-color: var(--border-strong);
}

/* ── Scrollbars ── */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.09);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-glow),0.4);
  background-clip: padding-box;
}

/* ── Auth card — refined to match ── */

.auth-card--v2 {
  background: linear-gradient(180deg, #1a1a24 0%, #101015 100%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.06);
}

.auth-feature,
.auth-perks,
.auth-mini-stat,
.auth-quote {
  box-shadow: inset 0 1px 0 var(--edge-light);
}

/* ── Modal step indicator + form sections ── */

.modal__steps {
  border-bottom: 1px solid var(--border);
}

.kpi-grid {
  gap: 14px;
}

/* ── Subtle entrance refinement on view switch ── */

.view.is-active {
  animation: refinedViewIn .5s var(--ease-out);
}

@keyframes refinedViewIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════════
   UX / UI + MOTION REFINEMENT — design-critique pass (CSS-only)
   Focus: visual hierarchy · accessible contrast · calmer ambient motion
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Accessible muted text ──
   --text-3 sat ~4.2:1 on the near-black canvas — just under WCAG AA.
   Lift it so hints, subtitles & captions clear 4.5:1 while staying muted. */

:root {
  --text-3: #898b96;
  color-scheme: dark;
}

/* ── 2 · Hero KPI tile ──
   A row of equal-weight tiles gave the eye no entry point. Feature the
   lead tile (Net P&L / headline metric) so each grid has a clear focus. */

.kpi-grid>.kpi:first-child {
  background:
    linear-gradient(180deg, rgba(var(--accent-glow), 0.10), rgba(18, 18, 25, 0)),
    linear-gradient(180deg, rgba(34, 34, 46, 0.74), rgba(18, 18, 25, 0.52));
  border-color: rgba(var(--accent-glow), 0.30);
  box-shadow:
    var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--accent-glow), 0.10);
}

.kpi-grid>.kpi:first-child:hover {
  border-color: rgba(var(--accent-glow), 0.46);
  box-shadow:
    var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(var(--accent-glow), 0.20);
}

.kpi-grid>.kpi:first-child .kpi__label {
  color: var(--accent-3);
}

.kpi-grid>.kpi:first-child .kpi__value {
  font-size: 33px;
}

.kpi-grid>.kpi:first-child .kpi__hint {
  color: var(--text-2);
}

.kpi-grid>.kpi:first-child::after {
  opacity: 1;
  transform: scale(1.18);
}

/* keep a win/loss lead tile semantically tinted, not just accent-purple */

.kpi-grid>.kpi--win:first-child {
  border-color: rgba(74, 222, 128, 0.32);
}

.kpi-grid>.kpi--win:first-child .kpi__label {
  color: var(--win);
}

.kpi-grid>.kpi--loss:first-child {
  border-color: rgba(248, 113, 113, 0.32);
}

.kpi-grid>.kpi--loss:first-child .kpi__label {
  color: var(--loss);
}

/* ── 3 · Calmer ambient motion ──
   Particles + cursor glow competed with the data. Drop them behind it. */

#particles {
  opacity: 0.4;
  will-change: auto;
}

.cursor-glow {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0) 60%);
  display: none !important;
}

.cursor-glow.is-hot {
  background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, rgba(74,222,128,0.07) 40%, rgba(167,139,250,0) 65%);
}

/* ── 4 · Unified entrance motion ──
   Three entrance keyframes had different travel + a stray scale-pop.
   Normalise to one identical slide-up so every view & card feels coherent. */

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 5 · Accessibility — let users opt out of ambient FX ── */

@media (prefers-reduced-motion: reduce) {
  #particles,
  .cursor-glow {
      display: none !important;
    }

}

/* ════════════════════════════════════════════════════════════════════
   PERFORMANCE PASS — make every view glide
   ────────────────────────────────────────────────────────────────────
   Refined Dark stacked too many real-time blur layers + infinite
   ambient animations. Strategy:
   • Keep backdrop-filter ONLY on surfaces that genuinely benefit
     (topbar, sidebar, modal, modal-backdrop, auth card). Inline cards
     keep the glassy look via gradients + edge-light, no real-time blur.
   • Kill the expensive ambient FX that cost the GPU most for the
     least visual return: aurora blur(80px) blobs, cursor-glow's
     mix-blend, infinite micro-pulses.
   • Promote the few elements that DO animate to their own GPU layer
     so a hover costs one composite, not a full repaint.
   ════════════════════════════════════════════════════════════════════ */

/* — Strip backdrop-filter from inline content surfaces — */

.card,
.kpi,
.pb-card,
.tm-kpi,
.vsn-card,
.trade-row,
.playbook-item,
.watch-row,
.journal-entry,
.toast,
.seg,
.chip,
.streak,
.dl-card,
.calc-out-item,
.session-time,
.panel,
.quant-card,
.ai-history-item,
.auth-feature,
.auth-perks,
.auth-quote,
.auth-mini-stat,
.cmdk__item,
.cmdk__list,
.badge,
.nav__item,
.account-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* — Calm/cheaper backdrop on the surfaces we DO keep blurred — */

.topbar {
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.sidebar {
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* — Kill the expensive ambient layer (3× blur(80px) at opacity .18) — */

.aurora,
.aurora__blob {
  display: none !important;
}

/* — Cursor glow used mix-blend-mode: screen — forces a compositor
     isolation layer every frame. Drop it, the page reads cleaner. — */

.cursor-glow {
  display: none !important;
}

/* — Stop continuous re-compositing animations that weren't doing work — */

.nav__pulse,
.motivation-card__pulse {
  animation: none !important;
  opacity: 0.55;
}

.motivation-card__bg {
  animation: none !important;
  opacity: 0.4;
}

.boot-logo {
  animation: none !important;
}

/* — Promote interactive surfaces to their own GPU layer (one-time cost,
     then hover/transform animates without a full composite). — */

.card,
.kpi,
.pb-card,
.modal,
.nav__item,
.btn--primary {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* — Narrow the transition surface so the browser doesn't watch ALL
     properties on every state change. — */

.card,
.kpi,
.pb-card,
.tm-kpi {
  transition-property: transform, border-color, box-shadow;
}

.btn,
.btn--primary,
.btn--ghost,
.btn--danger {
  transition-property: transform, box-shadow, background-color, filter;
}

.input,
.select,
.textarea {
  transition-property: border-color, background-color, box-shadow;
}

/* — Keep particles static & out of the compositor's hot path — */

#particles {
  will-change: auto;
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 4 — Notifications bell, language toggle, expanded admin, pricing
   Inherits all design tokens; uses --accent / --surface / --border etc.
   ════════════════════════════════════════════════════════════════════ */

/* ───── Language toggle ───── */

.lang-btn {
  position: relative;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: auto;
  padding: 0 10px;
  min-width: 40px;
}

.lang-btn:hover {
  color: var(--accent);
}

/* ───── Notification bell + panel ───── */

.notif-wrap {
  position: relative;
}

.notif-btn {
  position: relative;
}

.notif-btn:hover {
  color: var(--accent);
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ff-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-1);
  animation: badgePulse 2.4s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--surface-2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  overflow: hidden;
  animation: notifPop var(--t-base) var(--ease-out);
}

@keyframes notifPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notif-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-glow), 0.10), transparent 60%),
    transparent;
}

.notif-panel__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.notif-panel__sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.notif-panel__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.notif-action {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
  font-weight: 600;
}

.notif-action:hover {
  text-decoration: underline;
}

.notif-action--danger {
  color: var(--loss);
}

.notif-panel__body {
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.notif-panel__body::-webkit-scrollbar {
  width: 6px;
}

.notif-panel__body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.notif-item {
  display: grid;
  grid-template-columns: 30px 1fr 24px;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-fast) var(--ease);
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notif-item.is-unread {
  background: linear-gradient(90deg, rgba(var(--accent-glow), 0.07), transparent 60%);
}

.notif-item.is-unread::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(var(--accent-glow), 0.7);
}

.notif-item__icon {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(var(--accent-glow), 0.10);
}

.notif-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.notif-item__msg {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.4;
}

.notif-item__time {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-family: var(--ff-mono);
}

.notif-item__x {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  transition: all var(--t-fast) var(--ease);
}

.notif-item__x:hover {
  background: rgba(248, 113, 113, 0.15);
  color: var(--loss);
}

.notif-panel__empty {
  padding: 40px 20px;
  text-align: center;
}

.notif-empty__icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.notif-empty__text {
  font-size: 13px;
  color: var(--text-3);
}

/* ───── Admin tabs ───── */

.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tab {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  background: transparent;
  border: none;
}

.admin-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}

.admin-tab.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-glow), 0.18), rgba(var(--accent-glow), 0.08));
  color: var(--accent-3);
  box-shadow: inset 0 1px 0 var(--edge-light);
}

.admin-pane {
  display: none;
}

.admin-pane.is-active {
  display: block;
  animation: paneFade var(--t-base) var(--ease-out);
}

@keyframes paneFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ───── KPI cards (admin variant — tighter) ───── */

.kpi--admin {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: all var(--t-fast) var(--ease);
}

.kpi--admin:hover {
  border-color: var(--border-bright);
  box-shadow: 0 0 0 1px rgba(var(--accent-glow), 0.2), var(--shadow);
}

.kpi--admin .kpi__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.kpi--admin .kpi__icon {
  font-size: 14px;
}

.kpi--admin .kpi__value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--ff-display);
  color: var(--text-1);
  letter-spacing: -0.5px;
}

.kpi--admin .is-pos {
  color: var(--win);
}

.kpi--admin .is-neg {
  color: var(--loss);
}

.kpi--admin .is-warn {
  color: var(--warn);
}

/* ───── Activity feed (overview) ───── */

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

.activity-feed__row {
  display: grid;
  grid-template-columns: 160px 110px 1fr 2fr;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.activity-feed__row:last-child {
  border-bottom: none;
}

.activity-feed__time {
  color: var(--text-3);
  font-family: var(--ff-mono);
  font-size: 11.5px;
}

.activity-feed__user {
  color: var(--text-2);
}

.activity-feed__details {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───── Chips ───── */

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  color: var(--text-2);
  border: 1px solid var(--border);
  text-transform: uppercase;
}

.chip--win {
  color: var(--win);
  background: var(--win-soft);
  border-color: rgba(74, 222, 128, 0.3);
}

.chip--loss {
  color: var(--loss);
  background: var(--loss-soft);
  border-color: rgba(248, 113, 113, 0.3);
}

.chip--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(252, 211, 77, 0.3);
}

.chip--gold {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.14);
  border-color: rgba(252, 211, 77, 0.4);
}

/* ───── Filter row ───── */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.filter-row .input,
.filter-row .select {
  min-width: 120px;
  flex: 1 1 140px;
}

/* ───── Distribution bars (analytics) ───── */

.dist-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.dist-row {
  display: grid;
  grid-template-columns: 84px 1fr 36px;
  align-items: center;
  gap: 12px;
}

.dist-row__label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.dist-row__bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
}

.dist-row__bar>span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(var(--accent-glow), 0.4);
  transition: width var(--t-slow) var(--ease-out);
}

.dist-row__count {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}

/* ───── Bar (table cell) ───── */

.bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}

.bar>span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 3px;
}

/* ───── System status / alerts ───── */

.system-status {
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.sys-status__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.sys-status__label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.sys-status__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}

.sys-status__sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
  font-family: var(--ff-mono);
}

.sys-status__icon {
  font-size: 36px;
}

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
}

.alert--warning {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, rgba(252, 211, 77, 0.06), transparent);
}

.alert--error {
  border-left-color: var(--loss);
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.08), transparent);
}

.alert__icon {
  font-size: 18px;
  line-height: 1;
}

/* ───── Reports grid ───── */

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-card__icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.report-card__title {
  font-size: 14px;
  font-weight: 700;
}

.report-card__desc {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 12px;
  flex: 1;
}

/* ───── Switch (feature flags) ───── */

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
}

.switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.switch input:checked+span {
  background: rgba(var(--accent-glow), 0.5);
  border-color: var(--accent);
}

.switch input:checked+span::after {
  transform: translateX(16px);
  background: #fff;
  box-shadow: 0 0 8px rgba(var(--accent-glow), 0.7);
}

.range--sm {
  width: 100%;
  max-width: 100px;
}

.select--sm,
.input--sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* ───── Broadcast templates ───── */

.bc-templates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bc-template {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  transition: all var(--t-fast) var(--ease);
}

.bc-template:hover {
  background: rgba(var(--accent-glow), 0.06);
  border-color: var(--border-bright);
  transform: translateY(-1px);
}

/* Broadcast live preview card */

.bc-live-preview {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.06), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(94, 234, 212, 0.22);
  align-items: center;
}

.bc-live-preview__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.bc-live-preview__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.bc-live-preview__txt b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-live-preview__txt b.muted,
.bc-live-preview__txt span.muted {
  color: var(--text-3);
  font-weight: 400;
}

.bc-live-preview__txt span {
  font-size: 11.5px;
  color: var(--text-2);
}

.bc-template__icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--accent-glow), 0.10);
}

.bc-template__title {
  font-size: 13px;
  font-weight: 700;
}

.bc-template__msg {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING v2 — 3-tier cards (.pricing-tier) + comparison table (.pc-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero accent (gradient on the headline word) */

.price-headline-accent {
  background: linear-gradient(95deg, rgb(167, 139, 250), rgb(94, 234, 212));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Cycle toggle — save badge */

.seg__btn-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(34, 211, 164, 0.22);
  color: rgb(94, 234, 212);
  border: 1px solid rgba(34, 211, 164, 0.4);
}

/* ─── 3 tier cards ─── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 56px;
  align-items: stretch;
}

@media (max-width: 880px) {
  .pricing-grid {
      grid-template-columns: 1fr;
    }

}

.pricing-tier {
  --tier-c: #22d3a4;
  position: relative;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--tier-c) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s var(--ease), box-shadow .35s var(--ease);
  isolation: isolate;
}

.pricing-tier::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tier-c) 30%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}

.pricing-tier:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--tier-c) 35%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--tier-c) 50%, transparent);
}

.pricing-tier.is-recommended {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--tier-c) 22%, transparent), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014));
  border-color: color-mix(in oklab, var(--tier-c) 40%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--tier-c) 25%, transparent),
    0 30px 60px -30px color-mix(in oklab, var(--tier-c) 50%, transparent);
}

.pricing-tier.is-current {
  outline: 1px dashed color-mix(in oklab, var(--tier-c) 50%, transparent);
  outline-offset: -4px;
}

.pt-ribbon {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tier-c) 30%, #0b0d18), color-mix(in oklab, var(--tier-c) 12%, transparent));
  border: 1px solid color-mix(in oklab, var(--tier-c) 45%, transparent);
  border-top: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--tier-c) 80%, white);
  box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--tier-c) 55%, transparent);
}

.pt-head {
  margin-top: 4px;
  margin-bottom: 18px;
}

.pricing-tier.is-recommended .pt-head {
  margin-top: 16px;
}

.pt-name {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.pt-tagline {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.pt-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.pt-amount {
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.025em;
  line-height: 1;
}

.pt-period {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

.pt-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pt-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

.pt-bullets svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--tier-c);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--tier-c) 60%, transparent));
}

.pt-cta {
  width: 100%;
  margin-top: auto;
  justify-content: center;
  padding: 11px;
  font-weight: 600;
}

.pt-cta[disabled] {
  opacity: .5;
  cursor: default;
}

/* ─── Comparison table ─── */

.price-compare {
  margin: 8px 0 40px;
  padding: 28px 28px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.price-compare__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px;
  margin-bottom: 24px;
}

.price-compare__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
}

.price-compare__num {
  color: rgb(94, 234, 212);
}

.price-compare__title {
  margin: 4px 0 0;
  grid-column: 1;
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.price-compare__sub {
  margin: 3px 0 0;
  grid-column: 1;
  font-size: 13px;
  color: var(--text-3);
}

.price-compare__rowcount {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
}

.price-compare__rowcount::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--text-3);
  margin-right: 6px;
  vertical-align: middle;
}

.price-compare__table {
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.pc-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .18s var(--ease);
}

.pc-row:last-child {
  border-bottom: 0;
}

.pc-row:not(.pc-row--head):hover {
  background: rgba(255, 255, 255, 0.025);
}

.pc-row--head {
  background: rgba(255, 255, 255, 0.018);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pc-cell {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.pc-cell:last-child {
  border-right: 0;
}

.pc-cell--feature {
  font-weight: 600;
  color: var(--text-1);
}

.pc-num {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 24px;
  text-align: center;
}

.pc-label {
  flex: 1;
}

.pc-cell--tier {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 18px;
  padding-bottom: 14px;
}

.pc-tier-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-1);
}

.pc-recommended {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(94, 234, 212);
}

.pc-recommended::before {
  content: "—";
  opacity: .55;
}

.pc-cell--tier.is-recommended {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.10), transparent 90%);
  border-top: 1px solid rgba(94, 234, 212, 0.32);
}

/* Recommended column highlight throughout body */

.pc-cell--val.is-recommended {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.025), rgba(94, 234, 212, 0.012));
}

.pc-cell--val {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--text-2);
  justify-content: flex-start;
}

.pc-cell--val.is-inf {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: rgb(94, 234, 212);
  letter-spacing: 0;
}

.pc-cell--val.is-check {
  color: rgb(94, 234, 212);
  font-weight: 600;
}

.pc-cell--val.is-dash {
  color: var(--text-3);
  font-family: var(--ff-display);
  font-size: 18px;
}

.price-compare__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: var(--text-3);
}

.price-compare__legend b {
  display: inline-block;
  width: 22px;
  text-align: center;
  color: var(--text-1);
  font-family: var(--ff-display);
  font-weight: 700;
}

.price-compare__hint {
  margin-left: auto;
}

@media (max-width: 760px) {
  .price-compare {
      padding: 18px 14px;
    }

  .price-compare__table {
      overflow-x: auto;
    }

  .pc-row {
      grid-template-columns: minmax(200px, 1.5fr) 90px 90px 100px;
      min-width: 600px;
    }

  .pc-cell {
      padding: 12px 12px;
      font-size: 12px;
    }

}

/* ─── Checkout modal ─── */

.checkout .modal__body {
  padding: 22px 26px;
}

.checkout__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}

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

}

.checkout__section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 4px 0 10px;
}

.checkout__section-label:not(:first-child) {
  margin-top: 22px;
}

.checkout__cycle-seg {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.checkout__cycle-seg .seg__btn {
  padding: 10px;
}

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

.checkout__method {
  padding: 12px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: left;
}

.checkout__method svg {
  color: var(--text-3);
  flex-shrink: 0;
  transition: color .2s var(--ease);
}

.checkout__method span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.checkout__method b {
  font-size: 12.5px;
  color: var(--text-1);
  font-weight: 600;
}

.checkout__method small {
  font-size: 10.5px;
  color: var(--text-3);
}

.checkout__method:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.checkout__method.is-active {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.10), rgba(94, 234, 212, 0.025));
  border-color: rgba(94, 234, 212, 0.42);
}

.checkout__method.is-active svg {
  color: rgb(94, 234, 212);
}

.checkout__card-fields {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout__card-fields .form-group {
  margin-bottom: 0;
}

.checkout__assurance {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(34, 211, 164, 0.06);
  border: 1px solid rgba(34, 211, 164, 0.18);
}

.checkout__assurance svg {
  color: rgb(94, 234, 212);
  flex-shrink: 0;
}

.checkout__qr-stub {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.checkout__qr-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 234, 212, 0.10);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: 10px;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: rgb(94, 234, 212);
}

.checkout__qr-stub b {
  display: block;
  font-size: 13px;
  color: var(--text-1);
}

.checkout__qr-stub small {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* RIGHT SIDE — summary */

.checkout__right {
  position: relative;
}

.checkout__summary {
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.08), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(94, 234, 212, 0.22);
  position: sticky;
  top: 0;
}

.cs-tier-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--tier-c, #22d3a4) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--tier-c, #22d3a4) 40%, transparent);
  color: var(--tier-c, #22d3a4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-tagline {
  margin: 10px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}

.cs-includes {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 16px;
}

.cs-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 13px;
  color: var(--text-2);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.cs-line:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.cs-line b {
  color: var(--text-1);
  font-family: var(--ff-display);
  font-weight: 700;
}

.cs-line--saving .cs-pos {
  color: rgb(94, 234, 212);
  font-weight: 600;
  font-family: var(--ff-mono);
}

.cs-line--note {
  color: var(--text-3);
  font-size: 11.5px;
}

.cs-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(94, 234, 212, 0.30);
  font-size: 14px;
  color: var(--text-1);
  font-weight: 600;
}

.cs-total b {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 800;
}

.cs-perks {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-perk {
  font-size: 11px;
  color: var(--text-3);
}

/* Pay button */

.checkout__pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.checkout__pay-amount {
  font-weight: 700;
}

.checkout__pay-spin {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Legacy .pricing-card kept below for back-compat (unused) ─── */

.pricing-grid--legacy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* ═══════════ ADMIN — Plans & Pricing editor ═══════════ */

.ap-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.05), rgba(94, 234, 212, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ap-toolbar__right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

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

}

.ap-tier-card {
  --c: #22d3a4;
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border: 1px solid color-mix(in oklab, var(--c) 22%, rgba(255, 255, 255, 0.07));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-tier-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ap-tier-card__head .ap-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  padding: 7px 10px;
}

.ap-recommend {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgb(94, 234, 212);
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.36);
  padding: 3px 7px;
  border-radius: 999px;
}

.ap-subsection {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.ap-kv-grid,
.ap-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin-top: 6px;
}

.ap-kv {
  display: grid;
  grid-template-columns: 1fr 70px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.ap-kv>span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ff-mono);
}

.ap-kv input {
  padding: 4px 6px;
  font-size: 11px;
  text-align: right;
  font-family: var(--ff-mono);
}

.ap-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--ff-mono);
  cursor: pointer;
}

.ap-feature input {
  accent-color: rgb(94, 234, 212);
}

.ap-recommend-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-2);
  margin: 4px 0 2px;
  cursor: pointer;
}

.ap-recommend-toggle input {
  accent-color: rgb(94, 234, 212);
}

/* Comparison rows editor */

.ap-compare-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  max-height: 540px;
  overflow-y: auto;
}

.ap-compare-row {
  display: grid;
  grid-template-columns: 140px 1.5fr 1fr 1fr 1fr 28px;
  gap: 6px;
  align-items: center;
}

.ap-compare-row--head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 4px 6px;
}

.ap-compare-row input {
  padding: 5px 8px;
  font-size: 12px;
}

.ap-compare-row input:nth-child(1) {
  font-family: var(--ff-mono);
  color: var(--text-3);
  font-size: 11px;
}

@media (max-width: 900px) {
  .ap-compare-row {
      grid-template-columns: 1fr;
    }

  .ap-compare-row--head {
      display: none;
    }

}

.pricing-card {
  position: relative;
  padding: 32px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--t-base) var(--ease);
  overflow: hidden;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-glow), 0.10), transparent 60%);
  pointer-events: none;
  opacity: 0.4;
  transition: opacity var(--t-base) var(--ease);
}

.pricing-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-glow), 0.35), 0 24px 64px rgba(var(--accent-glow), 0.18);
  background:
    linear-gradient(180deg, rgba(var(--accent-glow), 0.10), transparent 50%),
    var(--surface-2);
  transform: translateY(-6px);
}

.pricing-card.is-featured::before {
  opacity: 1;
}

.pricing-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(var(--accent-glow), 0.4);
}

.pricing-card__name {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 12px;
  position: relative;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
  position: relative;
}

.pricing-card__currency {
  font-size: 18px;
  color: var(--text-2);
  font-weight: 600;
}

.pricing-card__amount {
  font-family: var(--ff-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--text-1);
  line-height: 1;
}

.pricing-card__per {
  font-size: 13px;
  color: var(--text-3);
  margin-left: 2px;
}

.pricing-card__tagline {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 8px 0 20px;
  position: relative;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  flex: 1;
}

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

.pricing-card__features li svg {
  flex-shrink: 0;
  color: var(--accent);
}

.pricing-card__cta {
  position: relative;
}

.pricing-card.is-featured .pricing-card__cta {
  box-shadow: 0 8px 24px rgba(var(--accent-glow), 0.32);
}

.pricing-faq {
  margin-top: 16px;
}

.faq details {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

.faq details:first-child {
  border-top: none;
  padding-top: 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq summary::after {
  content: "+";
  font-size: 18px;
  color: var(--accent);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ───── Helper: nowrap ───── */

.nowrap {
  white-space: nowrap;
}

/* ───── Responsive ───── */

@media (max-width: 720px) {
  .notif-panel {
      width: 320px;
      right: -8px;
    }

  .activity-feed__row {
      grid-template-columns: 1fr;
      gap: 4px;
    }

  .pricing-card.is-featured {
      transform: none;
    }

}

/* ════════════════════════════════════════════════════════════════════
   PHASE 5 — Split emotion (before/after) + screenshot role gallery
   ════════════════════════════════════════════════════════════════════ */

/* Emotion split — two stacked rows, lighter visual weight than the rest */

.emotion-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--accent-glow), 0.06), transparent 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.emotion-split .form-label {
  font-size: 11.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

/* Screenshot gallery (multi-shot with role + caption per card) */

.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.screenshot-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.screenshot-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
}

.screenshot-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-0);
  overflow: hidden;
}

.screenshot-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screenshot-card__role-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  border: 1px solid currentColor;
  font-family: var(--ff-mono);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.screenshot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.screenshot-remove:hover {
  background: rgba(248, 113, 113, 0.9);
  transform: scale(1.1);
}

.screenshot-card__controls {
  display: flex;
  gap: 6px;
  padding: 8px;
  align-items: center;
}

.screenshot-role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  font-family: var(--ff-mono);
  text-transform: uppercase;
  background: transparent;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.screenshot-role:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.screenshot-role option {
  background: var(--bg-1);
  color: var(--text-1);
}

.screenshot-note {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--text-1);
}

.screenshot-note::placeholder {
  color: var(--text-3);
}

.screenshot-note:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(var(--accent-glow), 0.06);
}

/* ─────────── Dashboard bottom split: Calendar ⇆ Recent Trades 50/50 ─────────── */

.dash-bottom-split {
  align-items: stretch;
}

.dash-bottom-split>* {
  min-width: 0;
  /* prevent overflow from forcing column to grow */
}

/* LEFT column: calendar (+ day detail) — defines the row's natural height */

.dash-bottom-split> :first-child {
  display: flex;
  flex-direction: column;
}

/* RIGHT column: Recent Trades wrapper.
   position: relative + absolute child = wrapper has 0 intrinsic height,
   so it never pushes the grid row taller than the calendar.            */

.recent-trades-slot {
  position: relative;
  min-height: 0;
}

.recent-trades-slot>.recent-trades-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.recent-trades-card .recent-trades {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.recent-trades-card .recent-trades {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.recent-trades-card .recent-trades::-webkit-scrollbar {
  width: 6px;
}

.recent-trades-card .recent-trades::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.recent-trades-card .recent-trades::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ─────────── Dashboard tools: Date range + Filters ─────────── */

.dropdown-wrap {
  position: relative;
}

.dash-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

.dash-tool svg {
  flex-shrink: 0;
}

.dropdown-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  min-width: 280px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(28, 35, 66, 0.96), rgba(20, 25, 46, 0.96));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  animation: dropdownIn .15s var(--ease-out);
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.date-range-pop__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.date-range-pop__row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

.date-range-pop__row input[type="date"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  color-scheme: dark;
}

.date-range-pop__row input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(var(--accent-glow), 0.06);
}

.date-range-pop__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.date-range-pop__presets .chip {
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

.date-range-pop__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Filter badge (count of active) */

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #0a0f1e;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

/* ─────────── Filters Modal ─────────── */

.modal--filters {
  width: min(720px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.filters-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  flex: 1;
  min-height: 320px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.filters-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  background: rgba(0, 0, 0, 0.18);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.filters-cats__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 0 4px;
}

.filter-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all .15s var(--ease);
}

.filter-cat svg:first-child {
  flex-shrink: 0;
  color: var(--text-3);
}

.filter-cat>span {
  flex: 1;
}

.filter-cat__chev {
  opacity: 0.4;
  transition: transform .15s var(--ease);
}

.filter-cat:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}

.filter-cat:hover svg:first-child {
  color: var(--text-2);
}

.filter-cat.is-active {
  background: rgba(var(--accent-glow), 0.10);
  border-color: rgba(var(--accent-glow), 0.30);
  color: var(--accent);
}

.filter-cat.is-active svg:first-child {
  color: var(--accent);
}

.filter-cat.is-active .filter-cat__chev {
  opacity: 0.8;
}

.filters-panels {
  padding: 20px 24px;
  overflow-y: auto;
}

.filter-panel {
  display: none;
}

.filter-panel.is-active {
  display: block;
  animation: viewIn .25s var(--ease-out);
}

.filter-group {
  margin-bottom: 22px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filt-chip {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s var(--ease);
}

.filt-chip:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
  border-color: var(--border-strong);
}

.filt-chip.is-active {
  background: rgba(var(--accent-glow), 0.12);
  border-color: rgba(var(--accent-glow), 0.45);
  color: var(--accent);
}

.filters-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  gap: 12px;
}

@media (max-width: 640px) {
  .modal--filters {
      width: 95vw;
    }

  .filters-body {
      grid-template-columns: 1fr;
    }

  .filters-cats {
      flex-direction: row;
      overflow-x: auto;
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 10px;
    }

  .filters-cats__label {
      display: none;
    }

  .filter-cat {
      flex-shrink: 0;
    }

  .filter-cat__chev {
      display: none;
    }

}

/* ────────────────────────────────────────────────────────────────
   SELECT DROPDOWN BACKGROUND BUG FIX & MONTE CARLO STYLES
   ──────────────────────────────────────────────────────────────── */

select option {
  background-color: var(--bg-1, #0c0c12) !important;
  color: #f1f2f5;
  background: #1a1a23;
  padding: 6px 8px;
  font-weight: 500;
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
  background-color: var(--accent, #6366f1) !important;
  color: #ffffff !important;
}

.mc-inputs-grid .form-group {
  margin-bottom: 0px !important;
}

.mc-val.is-neg {
  color: #f43f5e !important;
}

.mc-val.is-pos {
  color: #22d3a4 !important;
}

/* ────────────────────────────────────────────────────────────────
   GALLERY COMPACT GRID & CARD STYLES
   ──────────────────────────────────────────────────────────────── */

.gallery-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

@media (max-width: 480px) {
  .gallery-grid-container {
      grid-template-columns: 1fr;
    }

}

.gallery-compact-card {
  background: #111116;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gallery-compact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gallery-card-images {
  display: flex;
  position: relative;
  aspect-ratio: 16/9;
  background: #08080c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gallery-card-image-box {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-card-image-box:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-card-image-box:hover img {
  transform: scale(1.04);
}

.gallery-image-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  color: #ffffff;
}

.gallery-image-badge.before {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-image-badge.after {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-result-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.gallery-result-badge.win {
  background: rgba(34, 211, 164, 0.15);
  color: #22d3a4;
  border: 1px solid rgba(34, 211, 164, 0.3);
}

.gallery-result-badge.loss {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.gallery-result-badge.breakeven {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.gallery-card-details {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #111116;
}

.gallery-card-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-card-symbol {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.gallery-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.gallery-edit-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.gallery-card-pnl {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--ff-mono);
}

.gallery-card-pnl.is-pos {
  color: #22d3a4;
}

.gallery-card-pnl.is-neg {
  color: #f43f5e;
}

.gallery-card-row2 {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gallery-compact-card .missing-img-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.25s ease;
  padding: 12px;
  height: 100%;
}

.gallery-compact-card .missing-img-placeholder:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.gallery-compact-card .missing-img-placeholder .btn-add-circle {
  width: 24px;
  height: 24px;
  font-size: 14px;
  margin-bottom: 4px;
}

.gallery-compact-card .missing-img-placeholder p {
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}

.gallery-compact-card .missing-img-placeholder span {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   UNIQUE RULES MERGED FROM VERSION B
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

input, select, textarea { font-family: inherit; color: inherit; }

@keyframes floaty {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px, 30px) scale(1.05); }
  66%      { transform: translate(-30px, 50px) scale(0.95); }
}

@keyframes bootPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(99,102,241,0.5)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(94,234,212,0.7)); }
}

@keyframes bootBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.app-loading .sidebar, .app-loading .topbar, .app-loading .main { opacity: 0; }

.sidebar, .topbar, .main { transition: opacity .5s var(--ease); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,164, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(34,211,164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,164, 0); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.sidebar.is-collapsed ~ .topbar { left: var(--sidebar-w-collapsed); }

.sidebar.is-collapsed ~ .main { margin-left: var(--sidebar-w-collapsed); }

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

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

}

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1); font-size: 13px;
  transition: all var(--t-fast) var(--ease);
  outline: 0;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.input:focus, .select:focus, .textarea:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.input--sm, .select--sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

.rating button:hover, .rating button.is-active { color: #facc15; text-shadow: 0 0 12px rgba(250,204,21,0.5); transform: scale(1.15); }

.trade-table th, .trade-table td {
  padding: 12px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

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

@keyframes modalIn {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

.dropzone:hover, .dropzone.is-dragging { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.06); }

.cmdk__item:hover, .cmdk__item.is-active {
  background: rgba(99,102,241,0.15); color: var(--text-1);
}

@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@keyframes toastOut { to { transform: translateX(20px); opacity: 0; } }

.shortcut-grid > div { display: flex; gap: 8px; align-items: center; }

@keyframes spark {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }

}

.graph-stage::before {
  /* Twinkling starfield */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 23% 47%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 41% 28%, rgba(167,139,250,0.50), transparent),
    radial-gradient(1px 1px at 58% 72%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 67% 14%, rgba(34,211,238,0.40), transparent),
    radial-gradient(1.5px 1.5px at 76% 52%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 84% 31%, rgba(167,139,250,0.35), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1.5px 1.5px at 8% 64%, rgba(74,222,128,0.30), transparent),
    radial-gradient(1px 1px at 33% 86%, rgba(255,255,255,0.35), transparent);
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.7;
  animation: graphTwinkle 7s ease-in-out infinite alternate;
}

.graph-stage::after {
  /* Subtle scanning glow that drifts slowly */
  content: "";
  position: absolute; inset: -20%;
  background: radial-gradient(circle at center, rgba(167,139,250,0.06), transparent 40%);
  pointer-events: none;
  animation: graphDrift 18s ease-in-out infinite alternate;
}

@keyframes graphTwinkle {
  0%   { opacity: 0.50; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.55; }
}

@keyframes graphDrift {
  0%   { transform: translate(-15%, -10%); }
  100% { transform: translate(15%, 10%); }
}

.graph-overlay > * { pointer-events: auto; }

.graph-legend__item:hover { color: var(--text-1); }

@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.graph-filter-card .row:last-child { border-bottom: none; }

.graph-filter-card .row:hover { padding-left: 4px; color: var(--text-1); }

.graph-filter-card .row label span:first-child {
  /* Color dot (already has inline styles for color/shadow) */
  flex-shrink: 0;
}

input.toggle-pill-input:checked + .toggle-pill { background: rgba(167,139,250,0.5); }

input.toggle-pill-input:checked + .toggle-pill::after { left: 16px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.graph-stat::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, currentColor 0%, transparent 60%);
  opacity: 0.10;
  pointer-events: none;
  color: var(--accent);
}

.graph-stat:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.graph-stat--strat { border-left-color: #a78bfa; }

.graph-stat--strat::before { color: #a78bfa; }

.graph-stat--strat .graph-stat__val { color: #c8bafd; text-shadow: 0 0 12px rgba(167,139,250,0.5); }

.graph-stat--sym { border-left-color: #94a3b8; }

.graph-stat--sym::before { color: #94a3b8; }

.graph-stat--sym .graph-stat__val { color: #cbd5e1; }

.graph-stat--tag { border-left-color: #22d3ee; }

.graph-stat--tag::before { color: #22d3ee; }

.graph-stat--tag .graph-stat__val { color: #67e8f9; text-shadow: 0 0 12px rgba(34,211,238,0.5); }

.graph-stat--sess { border-left-color: #fb923c; }

.graph-stat--sess::before { color: #fb923c; }

.graph-stat--sess .graph-stat__val { color: #fdba74; text-shadow: 0 0 12px rgba(251,146,60,0.5); }

.graph-stat--conn { border-left-color: #4ade80; }

.graph-stat--conn::before { color: #4ade80; }

.graph-stat--conn .graph-stat__val { color: #86efac; text-shadow: 0 0 12px rgba(74,222,128,0.5); }

.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(167,139,250,0.5);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.10);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(74,222,128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128, 0); }
}

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

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

@keyframes aiPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(167,139,250,0.30); }
  50% { box-shadow: 0 0 28px rgba(167,139,250,0.55), 0 0 40px rgba(74,222,128,0.25); }
}

@keyframes biasIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.bias-gex__grid > div {
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  display: flex; flex-direction: column;
  font-size: 11px;
}

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

@keyframes aiResultIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ai-gex__notes > div { margin-bottom: 3px; }

@keyframes guestIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

.input:focus, .select:focus, .textarea:focus {
  animation: focusGlow 1.4s var(--ease) infinite;
}

@keyframes focusGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(167,139,250,0.10); }
  50% { box-shadow: 0 0 0 6px rgba(167,139,250,0.18); }
}

@keyframes navSlide {
  from { transform: translateX(-10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes sparkleOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0)), calc(-50% + var(--ty, 0))) scale(0); }
}

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateGrad {
  to { --angle: 360deg; }
}

@keyframes dashShift {
  to { background-position: 100px 0; }
}

@keyframes vsnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

@keyframes arrowBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.aurora, #particles { z-index: 1; }

.main, .guest-banner { z-index: 10; }

@keyframes tickerSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@keyframes twinkle { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.32; } }

@keyframes motivIn {
  from { opacity: 0; transform: translateY(-16px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motivTwinkle {
  0%, 100% { opacity: 0.15; transform: translateX(0); }
  50% { opacity: 0.35; transform: translateX(8px); }
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(70px, 46px, 0); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-56px, -44px, 0); }
}

@keyframes chartFade { to { opacity: 0.5; } }

@keyframes drawChart { to { stroke-dashoffset: 0; } }

@keyframes areaFade { to { opacity: 1; } }

@keyframes authUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes authPop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-feature__icon.icn-tv { color: #a78bfa; }

.auth-feature__icon.icn-ai { color: #22d3ee; }

.auth-feature__icon.icn-net { color: #4ade80; }

.auth-feature__icon.icn-clock { color: #fcd34d; }

.auth-feature__icon.icn-target { color: #fb923c; }

.auth-feature__icon.icn-shield { color: #f472b6; }

.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label {
  top: 4px; font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-3);
}

.auth-field input:focus ~ .auth-field__icon { color: var(--accent-3); }

.auth-divider::before, .auth-divider::after {
  content: ""; position: absolute; top: 50%;
  width: calc(50% - 26px); height: 1px; background: rgba(255,255,255,0.07);
}

@media (prefers-reduced-motion: reduce) {
  .auth-bg__orb, .auth-ticker__inner, .auth-chart__line, .auth-chart__area,
  .auth-hero__brand, .auth-hero__line, .auth-hero__desc, .auth-feature,
  .auth-counters, .auth-quote, .auth-card--v2, .auth-perks, .auth-mini-stats {
      animation: none !important; opacity: 1 !important; transform: none !important;
      stroke-dashoffset: 0 !important;
    }

}

@keyframes avatarMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes celebrateIn {
  from { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes celebrateOut {
  to { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

.trade-table, .kpi__value, .pnl-cell, .trade-row__pnl, .trade-row__r,
.calc-out-value, .tm-kpi__value, .streak__value, .graph-stat__val,
.account-card__value, .vsn-card__val, .extract-row__val, .ai-gex__val,
.dl-card__value, .pb-card__stat-value, .cal-day__pnl {
  font-variant-numeric: tabular-nums;
}

.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.auth-field input:focus-visible, .range:focus-visible { outline: none; }

.chip:active, .seg__btn:active, .toggle-btn:active { transform: scale(0.96); }

.kpi, .card, .pb-card, .tm-kpi, .vsn-card { will-change: transform; }

.btn:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }

.trade-empty, .muted { line-height: 1.6; }

input, textarea { caret-color: var(--accent); }

.ab--trial > svg { color: var(--accent-3); }

.ab--expired > svg { color: #f87171; }

.ab--guest > svg { color: #1a1a1a; }

.ab--paid > svg { color: #4ade80; }

.admin-table th, .admin-table td {
  padding: 11px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.input, .select, .textarea {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.28);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.input:focus, .select:focus, .textarea:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(var(--accent-glow), 0.6);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-glow), 0.14), inset 0 1px 2px rgba(0,0,0,0.2);
  animation: none;
}

.trade-table thead th, .admin-table thead th {
  background: #131319;
  font-size: 10px; letter-spacing: 0.11em; color: var(--text-3);
}

.trade-table td, .admin-table td { border-bottom: 1px solid rgba(255,255,255,0.045); }

.trade-table tbody tr:hover, .admin-table tbody tr:hover {
  background: rgba(var(--accent-glow), 0.055);
}

.trade-row, .playbook-item, .watch-row, .session-time, .journal-entry,
.streak, .dl-card, .calc-out-item {
  border-radius: var(--radius-sm);
}

.auth-feature, .auth-perks, .auth-mini-stat, .auth-quote {
  box-shadow: inset 0 1px 0 var(--edge-light);
}

@keyframes refinedViewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kpi-grid > .kpi:first-child {
  background:
    linear-gradient(180deg, rgba(var(--accent-glow), 0.10), rgba(18,18,25,0)),
    linear-gradient(180deg, rgba(34,34,46,0.74), rgba(18,18,25,0.52));
  border-color: rgba(var(--accent-glow), 0.30);
  box-shadow:
    var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(var(--accent-glow), 0.10);
}

.kpi-grid > .kpi:first-child:hover {
  border-color: rgba(var(--accent-glow), 0.46);
  box-shadow:
    var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--accent-glow), 0.20);
}

.kpi-grid > .kpi:first-child .kpi__label { color: var(--accent-3); }

.kpi-grid > .kpi:first-child .kpi__value { font-size: 33px; }

.kpi-grid > .kpi:first-child .kpi__hint { color: var(--text-2); }

.kpi-grid > .kpi:first-child::after { opacity: 1; transform: scale(1.18); }

.kpi-grid > .kpi--win:first-child { border-color: rgba(74,222,128,0.32); }

.kpi-grid > .kpi--win:first-child .kpi__label { color: var(--win); }

.kpi-grid > .kpi--loss:first-child { border-color: rgba(248,113,113,0.32); }

.kpi-grid > .kpi--loss:first-child .kpi__label { color: var(--loss); }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #particles, .cursor-glow { display: none !important; }

}

.card, .kpi, .pb-card, .tm-kpi, .vsn-card,
.trade-row, .playbook-item, .watch-row, .journal-entry,
.toast, .seg, .chip, .streak, .dl-card, .calc-out-item,
.session-time, .panel, .quant-card, .ai-history-item,
.auth-feature, .auth-perks, .auth-quote, .auth-mini-stat,
.cmdk__item, .cmdk__list, .badge, .nav__item, .account-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.aurora, .aurora__blob { display: none !important; }

.nav__pulse, .motivation-card__pulse { animation: none !important; opacity: 0.55; }

.card, .kpi, .pb-card, .modal, .nav__item, .btn--primary {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.card, .kpi, .pb-card, .tm-kpi {
  transition-property: transform, border-color, box-shadow;
}

.btn, .btn--primary, .btn--ghost, .btn--danger {
  transition-property: transform, box-shadow, background-color, filter;
}

.input, .select, .textarea {
  transition-property: border-color, background-color, box-shadow;
}

.pf-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: flex-start;
}

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

}

.pf-setup { position: sticky; top: 86px; }

.pf-tagline {
  font-size: 11.5px; color: var(--text-3); margin-top: 6px; font-style: italic;
}

.pf-rules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px; margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.025);
}

.pf-rule { display: flex; flex-direction: column; }
.pf-rule .form-label { margin-bottom: 4px; }
.pf-rule .input,
.pf-rule .select,
.pf-rule .textarea { margin-top: auto; }

.pf-rule--full { grid-column: 1 / -1; }

.pf-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}

.pf-check small { color: var(--text-3); font-size: 11px; }

.pf-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}

.pf-dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 8px;
}

.pf-hint {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-glow), 0.08);
  border: 1px solid rgba(var(--accent-glow), 0.20);
  font-size: 11.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}

.pf-hint svg { color: var(--accent-3); flex-shrink: 0; }

.pf-results { display: flex; flex-direction: column; gap: 16px; }

.pf-empty {
  padding: 60px 40px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}

.pf-empty__icon { color: var(--accent-3); margin: 0 auto 20px; opacity: .8; }

.pf-empty h2 {
  font-family: var(--ff-display); font-weight: 700; font-size: 24px;
  margin: 0 0 10px; letter-spacing: -0.01em;
}

.pf-empty__cta { color: var(--accent-3); }

.pf-empty p { color: var(--text-3); max-width: 520px; margin: 0 auto 20px; font-size: 13.5px; }

.pf-empty__points {
  list-style: none; padding: 0; margin: 0 auto;
  display: inline-flex; flex-direction: column; gap: 6px; text-align: left;
  font-size: 12.5px; color: var(--text-2);
}

/* ────────────────────────────────────────────────────────────
   PROP FIRM — PORTFOLIO (ACCOUNT) PICKER
   ──────────────────────────────────────────────────────────── */
.pf-account-group {
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(34,211,164,0.06), rgba(34,211,164,0.01));
  border: 1px solid rgba(34,211,164,0.25);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.pf-account-hint {
  font-size: 11px; line-height: 1.5;
  margin-top: 6px;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   PROP FIRM — TRADING EDGE OVERRIDE INPUTS (left card)
   ──────────────────────────────────────────────────────────── */
.pf-edge-inputs {
  margin: 12px 0 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(167,139,250,0.01));
  border: 1px solid rgba(167,139,250,0.22);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 10px;
}

.pf-edge-inputs__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #c4b5fd; text-transform: uppercase;
}

.pf-edge-inputs__reset {
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.30);
  color: #c4b5fd;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  padding: 4px 8px; border-radius: var(--radius-sm);
  cursor: pointer; text-transform: none;
  transition: all var(--t-fast) var(--ease);
}

.pf-edge-inputs__reset:hover {
  background: rgba(167,139,250,0.18);
  border-color: rgba(167,139,250,0.50);
}

.pf-edge-inputs__src {
  color: var(--text-3); font-weight: 400; font-size: 10.5px;
  margin-left: 4px; font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   PROP FIRM — LIVE EDGE PREVIEW
   Replaces the static empty state. Updates instantly as user
   tweaks preset/phase/size/rules.
   ──────────────────────────────────────────────────────────── */
.pf-preview {
  display: flex; flex-direction: column; gap: 14px;
}

.pf-preview__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(99,102,241,0.02));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius);
}

.pf-preview__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent-3); text-transform: uppercase;
}

.pf-preview__title {
  font-size: 15px; font-weight: 700; color: var(--text-1);
  margin-top: 4px;
}

.pf-preview__verdict {
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  max-width: 380px;
}

.pf-preview__verdict.is-pos { color: #66e599; border: 1px solid rgba(74,222,128,0.30); }
.pf-preview__verdict.is-warn { color: #f5d670; border: 1px solid rgba(252,211,77,0.30); }
.pf-preview__verdict.is-neg { color: #ff9999; border: 1px solid rgba(248,113,113,0.35); }

.pf-preview__stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 1100px) {
  .pf-preview__stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .pf-preview__stats { grid-template-columns: 1fr 1fr; }
}

.pf-preview__stat {
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}

.pf-preview__stat-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-3); text-transform: uppercase;
}

.pf-preview__stat-val {
  font-family: var(--ff-mono); font-size: 16px; font-weight: 700;
  color: var(--text-1);
}

.pf-preview__stat-val.is-pos { color: #22d3a4; }
.pf-preview__stat-val.is-warn { color: #fcd34d; }
.pf-preview__stat-val.is-neg { color: #f43f5e; }

.pf-preview__chart-card {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pf-preview__chart-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-2);
  margin-bottom: 10px;
}

.pf-preview__chart-head > span:first-child {
  font-weight: 600; color: var(--text-1);
  font-size: 12px;
}

.pf-preview__legend {
  display: inline-flex; gap: 14px; align-items: center;
  font-size: 10.5px; color: var(--text-3);
  font-family: var(--ff-mono);
}

.pf-preview__legend > span {
  display: inline-flex; align-items: center; gap: 6px;
}

.pf-preview__legend .dot {
  display: inline-block; width: 10px; height: 2.5px; border-radius: 2px;
}

.pf-preview__legend .dot.is-eq     { background: #22d3a4; height: 3px; }
.pf-preview__legend .dot.is-target { background: rgba(34,211,164,0.7); }
.pf-preview__legend .dot.is-floor  { background: rgba(244,63,94,0.7); }

.pf-preview__chart-wrap {
  height: 220px;
}

.pf-preview__cta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--text-2);
}

.pf-preview__cta .btn { display: inline-flex; align-items: center; gap: 6px; }

.pf-verdict {
  position: relative;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light);
}

.pf-verdict--passed { border-color: rgba(74,222,128,0.45); }

.pf-verdict--failed { border-color: rgba(248,113,113,0.50); }

.pf-verdict--in_progress { border-color: rgba(252,211,77,0.45); }

.pf-verdict--funded_ok { border-color: rgba(74,222,128,0.40); }

.pf-verdict__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}

.pf-verdict__label {
  font-family: var(--ff-display);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600;
}

.pf-verdict__status {
  font-family: var(--ff-display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
}

.pf-verdict__status.is-pos { color: var(--win); text-shadow: 0 0 24px rgba(74,222,128,0.4); }

.pf-verdict__status.is-neg { color: var(--loss); text-shadow: 0 0 24px rgba(248,113,113,0.4); }

.pf-verdict__status.is-warn { color: var(--warn); text-shadow: 0 0 24px rgba(252,211,77,0.4); }

.pf-verdict__reason {
  font-size: 13.5px; color: var(--text-2); line-height: 1.55;
}

.pf-kpis { margin: 0; }

.pf-bar {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pf-bar:last-child { border-bottom: none; padding-bottom: 0; }

.pf-bar:first-of-type { padding-top: 4px; }

.pf-bar__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-2); margin-bottom: 6px;
  font-weight: 600;
}

.pf-bar__head span:last-child {
  font-family: var(--ff-mono);
  font-size: 11px; color: var(--text-3);
}

.pf-bar__track {
  height: 7px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}

.pf-bar__fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s var(--ease-out);
  box-shadow: 0 0 12px rgba(var(--accent-glow), 0.35);
}

.pf-bar__fill.is-target { background: linear-gradient(90deg, #22d3a4, #4ade80); box-shadow: 0 0 12px rgba(74,222,128,0.4); }

.pf-bar__fill.is-ok { background: linear-gradient(90deg, #34d399, #4ade80); }

.pf-bar__fill.is-warn { background: linear-gradient(90deg, #f59e0b, #fcd34d); box-shadow: 0 0 12px rgba(252,211,77,0.4); }

.pf-bar__fill.is-danger { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 14px rgba(239,68,68,0.5); }

.pf-bar__sub {
  font-size: 11px; color: var(--text-3); margin-top: 5px;
  font-family: var(--ff-mono);
}

.pf-table { padding: 18px 20px; }

.pf-table__wrap {
  max-height: 480px; overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pf-table__tbl { margin: 0; width: 100%; }

.pf-table__tbl thead { position: sticky; top: 0; z-index: 2; }

.pf-table__tbl th {
  padding: 9px 12px;
  font-size: 10.5px; letter-spacing: 0.11em; font-weight: 700;
  text-transform: uppercase; color: var(--text-3);
  background: #131319; border-bottom: 1px solid var(--border);
}

.pf-table__tbl td {
  padding: 8px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--ff-mono);
}

.pf-table__tbl tbody tr.is-violation {
  background: linear-gradient(90deg, rgba(248,113,113,0.16), rgba(248,113,113,0.04));
  border-left: 3px solid #f87171;
}

.pf-table__tbl tbody tr.is-pos-row td:nth-child(3),
.pf-table__tbl tbody tr.is-pos-row td:nth-child(4) { color: var(--win); }

.pf-table__tbl tbody tr.is-neg-row td:nth-child(3),
.pf-table__tbl tbody tr.is-neg-row td:nth-child(4) { color: var(--loss); }

.pf-table__tbl tbody tr:hover { background: rgba(var(--accent-glow), 0.06); }

.pf-flag {
  display: inline-block;
  margin-left: 6px;
  color: #fcd34d;
  font-size: 13px;
  cursor: help;
}

.pf-table__note {
  font-size: 11.5px; color: var(--text-3);
  text-align: center; margin-top: 10px; font-style: italic;
}

.pf-prob { padding: 18px 22px; }

.pf-prob__grid {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}

.pf-prob__big {
  font-family: var(--ff-display);
  font-size: 64px; font-weight: 700; letter-spacing: -0.04em;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong);
  text-align: center;
  min-width: 150px;
}

.pf-prob__big.is-pos { color: var(--win);  text-shadow: 0 0 28px rgba(74,222,128,0.35); }

.pf-prob__big.is-neg { color: var(--loss); text-shadow: 0 0 28px rgba(248,113,113,0.35); }

.pf-prob__big.is-warn { color: var(--warn); text-shadow: 0 0 28px rgba(252,211,77,0.35); }

.pf-prob__detail {
  display: grid; gap: 6px;
  font-size: 12.5px; color: var(--text-2);
}

.pf-prob__detail b { color: var(--text-1); font-weight: 600; }

.pf-prob__note {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  font-style: italic;
}

@media (max-width: 760px) {
  .pf-prob__grid { grid-template-columns: 1fr; text-align: center; }

  .pf-prob__detail { text-align: left; }

}

.pf-checklist { padding: 14px 18px 18px; }

.pf-check-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 12px;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.pf-check-row:hover { transform: translateX(2px); border-color: var(--border-strong); }

.pf-check-row__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

.pf-check-row--pass .pf-check-row__icon { color: var(--win);  background: rgba(74,222,128,0.14); border: 1px solid rgba(74,222,128,0.3); }

.pf-check-row--fail .pf-check-row__icon { color: var(--loss); background: rgba(248,113,113,0.16); border: 1px solid rgba(248,113,113,0.36); }

.pf-check-row--pending .pf-check-row__icon { color: var(--warn); background: rgba(252,211,77,0.14); border: 1px solid rgba(252,211,77,0.32); }

.pf-check-row--n-a .pf-check-row__icon { color: var(--text-3); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }

.pf-check-row--pass { border-left: 3px solid var(--win); }

.pf-check-row--fail { border-left: 3px solid var(--loss); background: rgba(248,113,113,0.05); }

.pf-check-row--pending { border-left: 3px solid var(--warn); }

.pf-check-row--n-a { opacity: 0.6; }

.pf-check-row__rule { font-weight: 600; font-size: 13.5px; color: var(--text-1); margin-bottom: 2px; }

.pf-check-row__detail { font-size: 12px; color: var(--text-3); line-height: 1.45; }

.pf-check-row__badge {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-3);
}

.pf-check-row--pass    .pf-check-row__badge { color: var(--win);  border-color: rgba(74,222,128,0.4);  background: rgba(74,222,128,0.08); }

.pf-check-row--fail    .pf-check-row__badge { color: var(--loss); border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.10); }

.pf-check-row--pending .pf-check-row__badge { color: var(--warn); border-color: rgba(252,211,77,0.4); background: rgba(252,211,77,0.10); }

.pf-firms { padding: 14px 18px 18px; }

.pf-firms__list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.pf-firm-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.022);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.pf-firm-row:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.04);
}

.pf-firm-row--top {
  border-color: rgba(var(--accent-glow), 0.40);
  background: linear-gradient(180deg, rgba(var(--accent-glow),0.07), rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px rgba(var(--accent-glow), 0.10), 0 6px 18px rgba(0,0,0,0.25);
}

.pf-firm-row__rank {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; color: var(--text-3); text-align: center;
}

.pf-firm-row--top .pf-firm-row__rank { color: var(--accent-3); text-shadow: 0 0 14px rgba(var(--accent-glow),0.4); }

.pf-firm-row__name {
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.pf-firm-row__phase { font-size: 11.5px; color: var(--text-3); font-weight: 500; }

.pf-firm-row__detail { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }

.pf-firm-row__meta {
  font-size: 11px; color: var(--text-3); margin-top: 4px;
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--ff-mono);
}

.pf-firm-row__bar {
  margin-top: 6px;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px; overflow: hidden;
}

.pf-firm-row__fill {
  height: 100%; border-radius: 3px;
  transition: width .6s var(--ease-out);
}

.pf-firm-row__fill.is-pos { background: linear-gradient(90deg, #22d3a4, #4ade80); }

.pf-firm-row__fill.is-neg { background: linear-gradient(90deg, #ef4444, #f87171); }

.pf-firm-row__fill.is-warn { background: linear-gradient(90deg, #f59e0b, #fcd34d); }

.pf-firm-row__right {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}

.pf-firm-status {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-3);
}

.pf-firm-status.is-pos { color: var(--win);  background: rgba(74,222,128,0.10);  border-color: rgba(74,222,128,0.40); }

.pf-firm-status.is-neg { color: var(--loss); background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.40); }

.pf-firm-status.is-warn { color: var(--warn); background: rgba(252,211,77,0.10);  border-color: rgba(252,211,77,0.40); }

.pf-firm-row__btn { font-size: 11px; padding: 5px 10px; }

@media (max-width: 760px) {
  .pf-firm-row { grid-template-columns: 28px 1fr; }

  .pf-firm-row__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }

}

.lang-toggle {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 0; padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
  height: 32px;
  overflow: hidden;
}

.lang-toggle:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.06); }

.lang-toggle__opt {
  position: relative; z-index: 2;
  padding: 5px 11px;
  color: var(--text-3);
  transition: color .22s var(--ease);
  user-select: none;
}

html[data-lang="en"] .lang-toggle__opt[data-lang="en"],
html[data-lang="th"] .lang-toggle__opt[data-lang="th"] { color: #ffffff; }

.lang-toggle__pill {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px); height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 3px 12px rgba(var(--accent-glow), 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .28s var(--ease-out);
  z-index: 1;
}

html[data-lang="th"] .lang-toggle__pill { transform: translateX(100%); }

html[data-lang="th"] body {
  font-family: "Noto Sans Thai", "Inter", system-ui, -apple-system, sans-serif;
}

html[data-lang="th"] .view__title { letter-spacing: 0; }

select, input[type="date"], input[type="time"], input[type="datetime-local"] {
  color-scheme: dark;
}

select optgroup {
  color: var(--accent-3);
  font-weight: 700;
  font-style: normal;
  background: #15151d;
}

select option:checked,
select option:hover {
  background: linear-gradient(0deg, rgba(var(--accent-glow), 0.4), rgba(var(--accent-glow), 0.4)), #1a1a23;
  color: #ffffff;
}

.vsn-deep .vsn-section__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.vsn-deep__verdict {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
}

.vsn-deep__verdict.is-pos { color: var(--win);  border-color: rgba(74,222,128,0.45);  background: rgba(74,222,128,0.10); }

.vsn-deep__verdict.is-neg { color: var(--loss); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.10); }

.vsn-deep__verdict.is-warn { color: var(--warn); border-color: rgba(252,211,77,0.45);  background: rgba(252,211,77,0.10); }

.vsn-deep__intro {
  font-size: 13px; color: var(--text-2);
  margin: 8px 0 14px; line-height: 1.55;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-glow), 0.08), rgba(255,255,255,0.01));
  border-radius: 0 8px 8px 0;
}

.vsn-layers { display: grid; gap: 10px; }

.vsn-layer {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
  transition: border-color .18s var(--ease);
}

.vsn-layer:hover { border-color: var(--border-strong); }

.vsn-layer__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.vsn-layer__name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 13.5px; color: var(--text-1);
}

.vsn-layer__weight {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--text-3);
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.04);
}

.vsn-layer__score {
  margin-left: auto;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.04);
}

.vsn-layer__score.is-pos { color: var(--win);  background: rgba(74,222,128,0.10); }

.vsn-layer__score.is-neg { color: var(--loss); background: rgba(248,113,113,0.10); }

.vsn-layer__score.is-warn { color: var(--warn); background: rgba(252,211,77,0.10); }

.vsn-layer__signals {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.vsn-layer__signals li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-2);
}

.vsn-signal-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.vsn-trade {
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--accent-glow), 0.06), rgba(255,255,255,0.01));
}

.vsn-trade__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.vsn-trade__cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.vsn-trade__cell span {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.vsn-trade__cell b {
  font-family: var(--ff-mono); font-size: 14.5px; font-weight: 700;
  color: var(--text-1);
}

.vsn-trade__cell b.is-pos { color: var(--win); }

.vsn-trade__cell b.is-neg { color: var(--loss); }

.vsn-trade__structure {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
}

.vsn-horizons { display: grid; gap: 8px; }

.vsn-horizon {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
}

.vsn-horizon__label {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 13px; color: var(--accent-3);
  margin-bottom: 4px;
}

.vsn-horizon__view {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
}

.vsn-think-list {
  margin: 0; padding: 0 0 0 22px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}

.vsn-think-list li { padding-left: 4px; }

.vsn-tomorrow {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(167,139,250,0.06), rgba(255,255,255,0.01));
}

.vsn-tomorrow__verdict {
  margin-left: auto;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong);
}

.vsn-tomorrow__verdict.is-pos { color: var(--win);  border-color: rgba(74,222,128,0.45);  background: rgba(74,222,128,0.10); }

.vsn-tomorrow__verdict.is-neg { color: var(--loss); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.10); }

.vsn-tomorrow__verdict.is-warn { color: var(--warn); border-color: rgba(252,211,77,0.45);  background: rgba(252,211,77,0.10); }

.vsn-tomorrow__summary {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.025);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px; color: var(--text-1); line-height: 1.55;
}

.vsn-tomorrow__range {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(var(--accent-glow), 0.07);
  border: 1px solid rgba(var(--accent-glow), 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.vsn-tomorrow__range span:first-child {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.vsn-tomorrow__range b {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; color: var(--accent-3); letter-spacing: -0.02em;
}

.vsn-tomorrow__src {
  font-size: 11px; color: var(--text-3); font-style: italic;
}

.vsn-tomorrow__block { margin-top: 12px; }

.vsn-tomorrow__h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.vsn-pivots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.vsn-pivot {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
  display: flex; flex-direction: column; gap: 2px;
}

.vsn-pivot span {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.vsn-pivot b {
  font-family: var(--ff-mono); font-size: 14px; font-weight: 700;
  color: var(--text-1);
}

.vsn-scenario-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.vsn-scenario-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  padding: 7px 10px;
  border-left: 2px solid var(--border);
  background: rgba(255,255,255,0.015);
  border-radius: 0 6px 6px 0;
}

.vsn-prob-badge {
  flex-shrink: 0;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(var(--accent-glow), 0.18);
  color: var(--accent-3);
  min-width: 38px; text-align: center;
}

.vsn-comp {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.vsn-comp__grade {
  margin-left: auto;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-strong);
}

.vsn-comp__grade.is-pos { color: var(--win);  border-color: rgba(74,222,128,0.45);  background: rgba(74,222,128,0.10); }

.vsn-comp__grade.is-neg { color: var(--loss); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.10); }

.vsn-comp__grade.is-warn { color: var(--warn); border-color: rgba(252,211,77,0.45);  background: rgba(252,211,77,0.10); }

.vsn-comp__bar {
  margin: 10px 0 8px;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px; overflow: hidden;
  border: 1px solid var(--border);
}

.vsn-comp__fill {
  height: 100%; border-radius: 5px;
  transition: width .6s var(--ease-out);
}

.vsn-comp__fill.is-pos { background: linear-gradient(90deg, #22d3a4, #4ade80); box-shadow: 0 0 12px rgba(74,222,128,0.4); }

.vsn-comp__fill.is-warn { background: linear-gradient(90deg, #f59e0b, #fcd34d); box-shadow: 0 0 12px rgba(252,211,77,0.4); }

.vsn-comp__fill.is-neg { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 12px rgba(239,68,68,0.4); }

.vsn-comp__blurb {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  margin-bottom: 14px;
}

.vsn-comp__count {
  font-family: var(--ff-mono);
  color: var(--text-3); font-size: 11px;
  margin-left: 4px;
}

.vsn-comp__block { margin-top: 12px; }

.vsn-comp__h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-2);
  margin-bottom: 7px;
  text-transform: uppercase;
}

.vsn-comp__list, .vsn-comp__got-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}

.vsn-comp-miss {
  padding: 9px 11px;
  border: 1px solid rgba(252,211,77,0.25);
  border-left: 3px solid var(--warn);
  background: rgba(252,211,77,0.05);
  border-radius: var(--radius-sm);
}

.vsn-comp-miss__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}

.vsn-comp-cross {
  color: var(--warn); font-weight: 700; font-size: 14px;
}

.vsn-comp-miss__label {
  font-weight: 600; font-size: 13px; color: var(--text-1);
  flex: 1;
}

.vsn-comp-weight {
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--text-3); letter-spacing: 0.1em;
}

.vsn-comp-miss__impact {
  font-size: 11.5px; color: var(--text-2); line-height: 1.5;
  padding-left: 22px;
  font-style: italic;
}

.vsn-comp__got-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}

.vsn-comp-got {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 12px; color: var(--text-2);
  border: 1px solid rgba(74,222,128,0.18);
  border-left: 2px solid var(--win);
  background: rgba(74,222,128,0.04);
  border-radius: 6px;
}

.vsn-comp-tick {
  color: var(--win); font-weight: 700; font-size: 13px;
}

.rl-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rl-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  font-family: var(--ff-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-3);
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.rl-tab:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }

.rl-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(var(--accent-glow), 0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  border-color: rgba(var(--accent-glow), 0.4);
}

.rl-tab span { font-weight: 600; }

@media (max-width: 640px) {
  .rl-tab span { display: none; }

  .rl-tab { padding: 9px 11px; }

}

.rl-panel { animation: rlPanelIn .32s var(--ease-out); }

@keyframes rlPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pf-header-card { padding: 18px 22px; margin-bottom: 16px; }

.pf-header-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.pf-header__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 24px; letter-spacing: -0.02em;
  margin: 4px 0 6px;
  background: linear-gradient(180deg, #ffffff 0%, #b9bac4 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pf-header__sub {
  font-size: 13px; color: var(--text-3); margin: 0;
  max-width: 700px; line-height: 1.55;
}

.pf-header__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

@keyframes spin { to { transform: rotate(360deg); } }

.jrnl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.jrnl-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(30,30,40,0.62), rgba(16,16,22,0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.jrnl-stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.jrnl-stat--warm {
  border-color: rgba(252,211,77,0.35);
  background: linear-gradient(180deg, rgba(252,211,77,0.08), rgba(255,255,255,0.01));
}

.jrnl-stat--hot {
  border-color: rgba(248,113,113,0.40);
  background: linear-gradient(180deg, rgba(248,113,113,0.10), rgba(255,255,255,0.01));
  box-shadow: var(--shadow), 0 0 18px rgba(248,113,113,0.20), inset 0 1px 0 var(--edge-light);
}

.jrnl-stat__icon {
  font-size: 22px; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.jrnl-stat__main { display: flex; flex-direction: column; min-width: 0; }

.jrnl-stat__value {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; color: var(--text-1); letter-spacing: -0.02em;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.jrnl-stat__label {
  font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--text-3); text-transform: uppercase; font-weight: 600;
  margin-top: 2px;
}

.jrnl-templates { padding: 16px 18px; }

.jrnl-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.jrnl-tpl {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.jrnl-tpl:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-glow), 0.45);
  background: linear-gradient(180deg, rgba(var(--accent-glow), 0.08), rgba(255,255,255,0.02));
  box-shadow: 0 6px 18px rgba(var(--accent-glow), 0.18);
}

.jrnl-tpl__icon { font-size: 22px; }

.jrnl-tpl__name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 13.5px; color: var(--text-1);
}

.jrnl-tpl__hint { font-size: 11px; color: var(--text-3); line-height: 1.4; }

.jrnl-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 12px;
}

.jrnl-filter .input, .jrnl-filter .select {
  flex: 1 1 140px; min-width: 100px;
}

.jrnl-empty {
  text-align: center; padding: 32px 0;
  color: var(--text-3); font-style: italic;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}

.jrnl-entry {
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.jrnl-entry:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-strong);
  transform: translateX(2px);
}

.jrnl-entry__head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 6px;
}

.jrnl-entry__main { flex: 1; min-width: 0; }

.jrnl-entry__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 14.5px; color: var(--text-1);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.jrnl-entry__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--text-3);
}

.jrnl-entry__type {
  padding: 2px 7px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 10px;
  background: rgba(var(--accent-glow), 0.16);
  color: var(--accent-3);
  border: 1px solid rgba(var(--accent-glow), 0.30);
}

.jrnl-entry__type--plan { background: rgba(167,139,250,0.16); color: #c8bafd; border-color: rgba(167,139,250,0.35); }

.jrnl-entry__type--reflection { background: rgba(34,211,164,0.14); color: #5eead4; border-color: rgba(34,211,164,0.30); }

.jrnl-entry__type--lesson { background: rgba(252,211,77,0.14); color: #fde68a; border-color: rgba(252,211,77,0.30); }

.jrnl-entry__type--review { background: rgba(96,165,250,0.14); color: #93c5fd; border-color: rgba(96,165,250,0.30); }

.jrnl-entry__type--note { background: rgba(255,255,255,0.06); color: var(--text-2); border-color: var(--border-strong); }

.jrnl-entry__mood {
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-2); font-weight: 600;
}

.jrnl-entry__date, .jrnl-entry__wc {
  color: var(--text-3); font-size: 10.5px;
  font-family: var(--ff-mono);
}

.jrnl-entry__actions {
  display: flex; gap: 4px;
}

.jrnl-entry__body {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 6px;
  cursor: pointer;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jrnl-entry__body:hover { color: var(--text-1); }

.vsn-guide { padding: 14px 18px 18px; margin-bottom: 16px; }

.vsn-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.vsn-guide__tile {
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.vsn-guide__tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-glow), 0.40);
  box-shadow: 0 8px 24px rgba(var(--accent-glow), 0.15);
}

.vsn-guide__icon {
  font-size: 28px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.vsn-guide__name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 14.5px; color: var(--text-1); letter-spacing: -0.01em;
}

.vsn-guide__desc {
  font-size: 11.5px; color: var(--text-3); font-style: italic;
  margin: 2px 0 8px;
}

.vsn-guide__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; color: var(--text-2); line-height: 1.45;
}

.vsn-guide__list li { padding-left: 0; }

.vsn-guide__unlocks {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text-3);
}

.vsn-guide__unlocks b { color: var(--accent-3); font-weight: 700; }

.vsn-compact {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  margin-bottom: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}

.vsn-compact.is-pos { border-color: rgba(74,222,128,0.50);  background: linear-gradient(135deg, rgba(74,222,128,0.14), rgba(255,255,255,0.012)); box-shadow: var(--shadow), 0 0 18px rgba(74,222,128,0.18); }

.vsn-compact.is-neg { border-color: rgba(248,113,113,0.50); background: linear-gradient(135deg, rgba(248,113,113,0.14), rgba(255,255,255,0.012)); box-shadow: var(--shadow), 0 0 18px rgba(248,113,113,0.18); }

.vsn-compact.is-warn { border-color: rgba(252,211,77,0.50);  background: linear-gradient(135deg, rgba(252,211,77,0.13), rgba(255,255,255,0.012)); box-shadow: var(--shadow), 0 0 18px rgba(252,211,77,0.16); }

.vsn-compact__pill {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}

.vsn-compact__arrow {
  font-size: 28px;
  line-height: 1; font-weight: 900;
  text-shadow: 0 0 14px currentColor;
}

.vsn-compact.is-pos  .vsn-compact__arrow { color: var(--win); }

.vsn-compact.is-neg  .vsn-compact__arrow { color: var(--loss); }

.vsn-compact.is-warn .vsn-compact__arrow { color: var(--warn); }

.vsn-compact__main { display: flex; flex-direction: column; }

.vsn-compact__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.04em;
  color: var(--text-1);
}

.vsn-compact__sub {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--text-3); margin-top: 1px;
}

.vsn-compact__divider {
  width: 1px; align-self: stretch;
  background: var(--border);
  margin: 2px 0;
}

.vsn-compact__pill--tomorrow .vsn-compact__title { color: var(--accent-3); }

.vsn-compact__meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-left: auto;
}

.vsn-compact__data-pill {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
  letter-spacing: 0.03em;
}

.vsn-compact__data-pill.is-pos { color: var(--win);  border-color: rgba(74,222,128,0.4);  background: rgba(74,222,128,0.10); }

.vsn-compact__data-pill.is-neg { color: var(--loss); border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.10); }

.vsn-compact__data-pill.is-warn { color: var(--warn); border-color: rgba(252,211,77,0.4); background: rgba(252,211,77,0.10); }

@media (max-width: 720px) {
  .vsn-compact__meta { width: 100%; margin-left: 0; margin-top: 8px; }

  .vsn-compact__divider { display: none; }

}

.risk-card { padding: 16px 18px; }

.risk-card .card__head { margin-bottom: 12px; }

.risk-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.risk-form .form-group { margin: 0; }

.risk-form .form-label { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 3px; }

.risk-form .input { padding: 6px 9px; font-size: 13px; }

.risk-output {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.risk-out__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.risk-out__cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.risk-out__cell span {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.risk-out__cell b {
  font-family: var(--ff-mono); font-size: 13.5px; font-weight: 700;
  color: var(--text-1);
}

.risk-out__cell b.is-pos { color: var(--win); }

.risk-out__cell b.is-neg { color: var(--loss); }

.risk-out__cell b.is-warn { color: var(--warn); }

.risk-out__note {
  font-size: 11.5px; color: var(--text-2); line-height: 1.5;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-style: italic;
}

.risk-out__note.is-pos { color: #66e599; }

.risk-out__note.is-neg { color: #ff9999; }

.risk-out__note.is-warn { color: #f5d670; }

.risk-out__hint {
  font-size: 11.5px; color: var(--text-3); font-style: italic;
  padding: 4px 0;
}

.stress-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .stress-grid { grid-template-columns: 1fr; }

}

.stress-controls { display: flex; flex-direction: column; gap: 10px; }

.stress-display { display: flex; flex-direction: column; gap: 14px; }

.stress-chart-wrap {
  height: 280px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

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

@media (max-width: 600px) {
  .stress-stats-grid { grid-template-columns: 1fr 1fr; }
}

.stress-stat-card {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stress-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.stress-val {
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

.stress-val.is-pos { color: #22d3a4; }
.stress-val.is-warn { color: #fcd34d; }
.stress-val.is-neg { color: #f43f5e; }

.stress-summary-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.stress-summary-text.is-pos { color: #66e599; }
.stress-summary-text.is-warn { color: #f5d670; }
.stress-summary-text.is-neg { color: #ff9999; font-weight: 600; }

.stress-verdict {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stress-verdict__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 8px;
}

.stress-verdict__cell {
  display: flex; flex-direction: column; gap: 3px;
}

.stress-verdict__cell span {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.stress-verdict__cell b {
  font-family: var(--ff-mono); font-size: 16px; font-weight: 700;
}

.stress-verdict__cell b.is-pos { color: var(--win); }

.stress-verdict__cell b.is-warn { color: var(--warn); }

.stress-verdict__cell b.is-neg { color: var(--loss); }

.stress-verdict__note {
  font-size: 12px; line-height: 1.55;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.stress-verdict__note.is-pos { color: #66e599; }

.stress-verdict__note.is-warn { color: #f5d670; }

.stress-verdict__note.is-neg { color: #ff9999; font-weight: 600; }

.compound-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .compound-grid { grid-template-columns: 1fr; }

}

.compound-controls { display: flex; flex-direction: column; gap: 10px; }

.compound-display { display: flex; flex-direction: column; gap: 14px; }

.compound-chart-wrap {
  height: 280px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

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

@media (max-width: 600px) {
  .compound-stats-grid { grid-template-columns: 1fr 1fr; }
}

.compound-stat-card {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compound-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.compound-val {
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

.compound-val.is-pos { color: #22d3a4; }
.compound-val.is-warn { color: #fcd34d; }
.compound-val.is-neg { color: #f43f5e; }

.compound-summary-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.compound-summary-text.is-pos { color: #66e599; }
.compound-summary-text.is-warn { color: #f5d670; }
.compound-summary-text.is-neg { color: #ff9999; }

.compound-summary {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.compound-summary__row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 6px; }

.compound-summary__cell { display: flex; flex-direction: column; gap: 3px; }

.compound-summary__cell span { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }

.compound-summary__cell b { font-family: var(--ff-mono); font-size: 15px; font-weight: 700; }

.compound-summary__cell b.is-pos { color: var(--win); }

.compound-summary__cell b.is-warn { color: var(--warn); }

.compound-summary__cell b.is-neg { color: var(--loss); }

.compound-summary__note { font-size: 11.5px; padding-top: 6px; border-top: 1px dashed var(--border); line-height: 1.5; }

.compound-summary__note.is-pos { color: #66e599; }

.compound-summary__note.is-warn { color: #f5d670; }

.compound-summary__note.is-neg { color: #ff9999; }

.ror-heatmap { overflow-x: auto; }

.ror-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-family: var(--ff-mono);
}

.ror-table th {
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 8px 6px;
  border-radius: 5px;
  text-align: center;
}

.ror-table th.ror-corner {
  background: transparent; color: var(--text-3); font-style: italic; font-size: 10px;
  text-align: right; padding-right: 12px;
}

.ror-cell {
  padding: 9px 5px;
  text-align: center;
  font-size: 12.5px; font-weight: 700;
  border-radius: 5px;
  color: #1a1a1f;
  transition: transform .15s var(--ease);
  cursor: help;
}

.ror-cell:hover { transform: scale(1.10); z-index: 1; position: relative; box-shadow: 0 0 0 2px var(--accent); }

.ror-cell--safe { background: linear-gradient(135deg, #22d3a4, #15b389); }

.ror-cell--watch { background: linear-gradient(135deg, #fcd34d, #f59e0b); }

.ror-cell--risky { background: linear-gradient(135deg, #fb923c, #ea580c); color: white; }

.ror-cell--danger { background: linear-gradient(135deg, #f87171, #dc2626); color: white; }

.ror-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--text-3);
}

.ror-legend__item { display: flex; align-items: center; gap: 6px; }

.ror-legend__item span {
  display: inline-block;
  width: 14px; height: 14px; border-radius: 4px;
}

.validator-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.validator-grid .form-group { margin: 0; }

.validator-grid .form-label { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 3px; }

.validator-result {
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.validator-verdict {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  border: 1px solid var(--border-strong);
}

.validator-verdict.is-pos { background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.05)); border-color: rgba(74,222,128,0.45); }

.validator-verdict.is-warn { background: linear-gradient(135deg, rgba(252,211,77,0.18), rgba(252,211,77,0.05)); border-color: rgba(252,211,77,0.45); }

.validator-verdict.is-neg { background: linear-gradient(135deg, rgba(248,113,113,0.20), rgba(248,113,113,0.05)); border-color: rgba(248,113,113,0.45); }

.validator-verdict__icon { font-size: 24px; }

.validator-verdict__label {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  flex: 1;
}

.validator-verdict.is-pos  .validator-verdict__label { color: var(--win); }

.validator-verdict.is-warn .validator-verdict__label { color: var(--warn); }

.validator-verdict.is-neg  .validator-verdict__label { color: var(--loss); }

.validator-verdict__score {
  font-family: var(--ff-mono); font-size: 12px;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.05); color: var(--text-2);
}

.validator-checks {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}

.validator-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

.validator-check.is-pass {
  background: rgba(74,222,128,0.06);
  border-left: 3px solid var(--win);
  color: var(--text-2);
}

.validator-check.is-fail {
  background: rgba(248,113,113,0.08);
  border-left: 3px solid var(--loss);
  color: var(--text-1);
  font-weight: 500;
}

.validator-check__icon {
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}

.validator-check.is-pass .validator-check__icon { color: var(--win); }

.validator-check.is-fail .validator-check__icon { color: var(--loss); }

.validator-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-3);
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}