:root {
  --bg: #0e1117;
  --bg-2: #111722;
  --panel: #101821;
  --panel-2: #121d28;
  --panel-3: #162434;
  --line: #17352e;
  --line-soft: rgba(77, 255, 171, 0.13);
  --text: #eef7f1;
  --muted: #8da69e;
  --green: #4dffab;
  --green-2: #00c77a;
  --teal: #00d8c4;
  --cyan: #58c7ff;
  --red: #ff5f57;
  --gold: #f6c34e;
  --purple: #7c5cff;
  --blue: #46a6ff;
  --ink: #06100a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(77, 255, 171, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.026) 1px, transparent 1px),
    radial-gradient(ellipse at 18% 10%, rgba(0, 199, 122, 0.14), transparent 31%),
    radial-gradient(ellipse at 82% 18%, rgba(0, 216, 196, 0.08), transparent 28%),
    linear-gradient(180deg, #0e1117 0%, #0c1518 48%, #0e1117 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 255, 171, 0.1), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.46));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(174, 255, 222, 0.018) 3px 4px);
  mix-blend-mode: screen;
}

@keyframes headlineGlow {
  0%, 100% {
    color: var(--text);
    text-shadow: 0 0 0 rgba(86, 214, 109, 0);
  }
  50% {
    color: var(--green);
    text-shadow: 0 0 26px rgba(86, 214, 109, 0.38);
  }
}

@keyframes floatPhone {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes chartPulse {
  0%, 100% {
    box-shadow: inset 0 0 0 rgba(86, 214, 109, 0), 0 0 0 rgba(86, 214, 109, 0);
  }
  50% {
    box-shadow: inset 0 0 32px rgba(86, 214, 109, 0.05), 0 0 30px rgba(86, 214, 109, 0.12);
  }
}

@keyframes buttonShine {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(140%);
  }
}

@keyframes statusBlink {
  0%, 100% {
    border-color: var(--line);
  }
  50% {
    border-color: rgba(246, 195, 78, 0.65);
  }
}

@keyframes eliteRadiance {
  0%, 100% {
    box-shadow: 0 0 0 rgba(246, 195, 78, 0), 0 0 18px rgba(246, 195, 78, 0.24);
    filter: saturate(1);
  }
  50% {
    box-shadow: 0 0 34px rgba(246, 195, 78, 0.34), 0 0 70px rgba(246, 195, 78, 0.18);
    filter: saturate(1.22);
  }
}

@keyframes startTrainingPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
    filter: saturate(1.22);
  }
}

button,
a {
  font: inherit;
}

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

.site-shell {
  width: min(1540px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 92px;
}

.hero {
  min-height: 92vh;
  padding: 26px 0 30px;
  display: flex;
  flex-direction: column;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(1540px, calc(100% - 40px));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 54px;
  padding: 12px 0 14px;
  background:
    linear-gradient(180deg, rgba(6, 14, 12, 0.92), rgba(3, 6, 8, 0.82));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(77, 255, 171, 0.18);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 44px rgba(77, 255, 171, 0.07);
}

.brand,
.nav-actions,
.feature-list div,
.phone-bar,
.mini-tabs,
.trade-input,
.reward-card div,
.stat-row,
.control-row {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  min-height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.brand:hover strong span {
  color: #f6c34e;
}

.brand strong {
  font-size: 30px;
  letter-spacing: 0;
}

.brand strong span,
.signal,
.panel-title,
.challenge-reward {
  color: var(--green);
}

.brand-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 20%, rgba(86, 214, 109, 0.34), transparent 38%),
    linear-gradient(135deg, rgba(86, 214, 109, 0.22), rgba(70, 166, 255, 0.14));
  border: 1px solid rgba(86, 214, 109, 0.42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 34px rgba(86, 214, 109, 0.16);
  overflow: hidden;
}

.brand-icon span {
  position: absolute;
  bottom: 13px;
  width: 8px;
  background: var(--green);
  border-radius: 2px 2px 0 0;
}

.brand-icon span:nth-child(1) {
  left: 13px;
  height: 18px;
}

.brand-icon span:nth-child(2) {
  left: 25px;
  height: 30px;
}

.brand-icon span:nth-child(3) {
  left: 37px;
  height: 40px;
}

.nav-actions {
  gap: 12px;
  position: relative;
}

.nav-actions a,
.nav-actions button,
.panel-button,
.primary-button,
.ghost-button,
.answer-button,
.timeframe-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  cursor: pointer;
  transition: 160ms ease;
}

.hidden {
  display: none !important;
}

.nav-actions a,
.nav-actions button {
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  background: rgba(11, 18, 24, 0.82);
  color: var(--text);
}

.nav-actions button {
  min-width: 118px;
  background: rgba(86, 214, 109, 0.12);
  color: var(--green);
  border: 1px solid rgba(86, 214, 109, 0.32);
  font-weight: 900;
}

.menu-wrap {
  position: relative;
}

.menu-button {
  display: inline-grid;
  place-items: center;
  min-width: 96px;
  height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  background: rgba(86, 214, 109, 0.12);
  color: var(--green);
  border: 1px solid rgba(86, 214, 109, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.start-training-nav {
  min-width: 148px !important;
  height: 46px;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #041008 !important;
  border: 1px solid rgba(86, 214, 109, 0.82) !important;
  background:
    linear-gradient(135deg, #b7ffc7, var(--green) 46%, #1fb153) !important;
  box-shadow:
    0 0 34px rgba(86, 214, 109, 0.28),
    0 18px 42px rgba(86, 214, 109, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  animation: startTrainingPulse 2.8s ease-in-out infinite;
}

.start-training-nav::before {
  content: "▶";
  margin-right: 0;
  font-size: 12px;
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  min-width: max-content;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 14, 19, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 180ms ease;
}

.menu-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nav-actions .nav-tab {
  min-width: auto;
  background: rgba(11, 18, 24, 0.82);
  color: var(--text);
  border: 1px solid var(--line);
  position: relative;
  gap: 8px;
  overflow: hidden;
  justify-content: center;
}

.nav-actions .nav-tab.active {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

.elite-nav-button {
  min-width: 104px !important;
  color: #1a1200 !important;
  border: 1px solid rgba(246, 195, 78, 0.7) !important;
  background: linear-gradient(135deg, #fbe28a, #f6c34e 42%, #b7791f) !important;
  animation: eliteRadiance 2.6s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.elite-nav-button::before {
  content: "◆";
  margin-right: 8px;
}

.nav-actions .nav-tab::before {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 950;
  background: rgba(86, 214, 109, 0.12);
  color: var(--green);
}

.home-tab::before {
  content: "⌂";
}

.play-tab::before {
  content: "▶";
}

.futures-tab::before {
  content: "F";
}

.profile-tab::before {
  content: "ID";
}

.plans-tab::before {
  content: "$";
}

.roadmap-tab::before {
  content: "✓";
}

.faq-tab::before {
  content: "?";
}

.elite-tab::before {
  content: "◆";
}

.nav-actions .nav-tab.active::before {
  background: rgba(6, 16, 10, 0.18);
  color: var(--ink);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(720px, 1.28fr);
  gap: 34px;
  align-items: center;
}

.hero-copy h1 {
  margin: 10px 0 18px;
  max-width: 520px;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: 0;
}

.animated-headline {
  display: inline-block;
  animation: headlineGlow 4.2s ease-in-out infinite;
}

.lead {
  position: relative;
  max-width: 620px;
  color: #e4eee7;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 780;
  line-height: 1.38;
  margin: 0 0 30px;
  padding-left: 18px;
  text-wrap: balance;
}

.lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--gold));
  box-shadow: 0 0 24px rgba(86, 214, 109, 0.28);
}

.signal,
.panel-title,
.tag-line {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.feature-list {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.feature-list div {
  gap: 10px;
  color: #dce7df;
  width: fit-content;
  padding: 9px 12px;
  border: 1px solid rgba(86, 214, 109, 0.13);
  border-radius: 8px;
  background: rgba(8, 17, 20, 0.62);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--green);
  border: 1px solid rgba(86, 214, 109, 0.52);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 950;
  background: rgba(86, 214, 109, 0.09);
  box-shadow: 0 0 18px rgba(86, 214, 109, 0.16);
}

.safe-copy {
  max-width: 420px;
  color: var(--green);
  line-height: 1.45;
  font-weight: 750;
}

.phone-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}

.phone {
  position: relative;
  min-height: 690px;
  border: 3px solid rgba(82, 96, 102, 0.82);
  border-radius: 44px;
  padding: 28px 18px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(86, 214, 109, 0.14), transparent 34%),
    linear-gradient(#0a1015, #0b1118) padding-box,
    linear-gradient(145deg, #4e565b, #11161b) border-box;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 44px rgba(86, 214, 109, 0.08),
    inset 0 0 22px rgba(86, 214, 109, 0.035);
  overflow: hidden;
  animation: floatPhone 6s ease-in-out infinite;
}

.phone:nth-child(2) {
  animation-delay: 0.8s;
}

.phone:nth-child(3) {
  animation-delay: 1.6s;
}

.phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 104px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #010305;
}

.center-phone {
  min-height: 735px;
}

.phone-bar {
  justify-content: space-between;
  color: #b8c3cc;
  font-size: 12px;
  font-weight: 800;
  margin: 18px 0 18px;
}

.phone-bar span:last-child {
  color: #ff5f57;
}

.phone-meta,
.prediction,
.muted,
.phone-answer,
.context-box p,
.mode-card p {
  color: var(--muted);
}

.phone-meta {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 750;
}

.mini-tabs {
  gap: 8px;
  margin-bottom: 14px;
}

.mini-tabs span {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  color: #b6c1c7;
  background: #111922;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.mini-tabs .active {
  background: var(--green);
  color: var(--ink);
}

.mini-chart,
#chart {
  display: block;
  width: 100%;
  background: #070c11;
}

.mini-chart {
  animation: chartPulse 3.8s ease-in-out infinite;
}

.context-box,
.reward-card,
.phone-answer,
.trade-input {
  border: 1px solid rgba(86, 214, 109, 0.14);
  background: rgba(9, 17, 22, 0.82);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.context-box {
  padding: 12px;
  margin-top: 14px;
}

.context-box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
}

.context-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.phone-answer {
  margin-top: 9px;
  padding: 11px 12px;
  font-size: 13px;
}

.correct {
  color: var(--green);
  text-align: center;
  font-size: 26px;
  font-weight: 950;
}

.prediction {
  text-align: center;
  margin: 6px 0 16px;
  font-size: 13px;
}

.reward-card {
  padding: 14px;
  margin-top: 12px;
}

.reward-card > strong {
  display: block;
  color: var(--gold);
  font-size: 28px;
  margin-bottom: 12px;
}

.reward-card div {
  justify-content: space-between;
  color: #c7d1cc;
  margin-top: 8px;
  font-size: 13px;
}

.reward-card div span:last-child {
  color: var(--green);
  font-weight: 850;
}

.phone-cta,
.panel-button {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--green), #2fcf73);
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(86, 214, 109, 0.16);
  border-radius: 8px;
  min-height: 48px;
  font-weight: 950;
  position: relative;
  overflow: hidden;
}

.phone-cta::after,
.panel-button::after,
.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: buttonShine 3.8s ease-in-out infinite;
}

.panel-button.mode-start {
  border: 0;
}

.market-intel {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.intel-card {
  position: relative;
  min-height: 178px;
  padding: 22px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(86, 214, 109, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(10, 24, 23, 0.86), rgba(7, 12, 15, 0.95));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(86, 214, 109, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.intel-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 32%;
  height: 120px;
  background: radial-gradient(circle, rgba(86, 214, 109, 0.16), transparent 65%);
  pointer-events: none;
}

.intel-card > * {
  position: relative;
  z-index: 1;
}

.intel-card h3 {
  margin: 8px 0;
  font-size: 20px;
}

.intel-card p:not(.signal) {
  margin: 0;
  color: #aebbb4;
  line-height: 1.45;
  font-weight: 700;
}

.edge-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}

.edge-ring {
  display: grid;
  place-items: center;
  align-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #061012 54%, transparent 56%),
    conic-gradient(var(--green) 0 72%, rgba(86, 214, 109, 0.12) 72% 100%);
  box-shadow: 0 0 36px rgba(86, 214, 109, 0.18), inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.edge-ring strong {
  color: var(--green);
  font-size: 34px;
  line-height: 1;
}

.edge-ring span {
  color: #b9c5be;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.balance-scale {
  position: relative;
  height: 74px;
  margin: 14px 0 12px;
}

.balance-scale span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 58px;
  transform: translateX(-50%);
  background: linear-gradient(var(--green), rgba(86, 214, 109, 0.2));
  box-shadow: 0 0 20px rgba(86, 214, 109, 0.35);
}

.balance-scale i {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 16px;
  height: 3px;
  transform: rotate(-6deg);
  transform-origin: center;
  background: #d9e4df;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.balance-scale b {
  position: absolute;
  left: 23%;
  right: 23%;
  bottom: 6px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--red));
  box-shadow: 0 0 22px rgba(86, 214, 109, 0.14);
}

.flow-bars {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 64px;
  margin: 14px 0 12px;
}

.flow-bars span {
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), rgba(86, 214, 109, 0.18));
  box-shadow: 0 0 18px rgba(86, 214, 109, 0.25);
}

.flow-bars span:nth-child(1) { height: 28px; }
.flow-bars span:nth-child(2) { height: 46px; }
.flow-bars span:nth-child(3) { height: 34px; }
.flow-bars span:nth-child(4) { height: 58px; }
.flow-bars span:nth-child(5) { height: 40px; }

.pulse-line {
  height: 64px;
  margin: 14px 0 12px;
  background:
    linear-gradient(90deg, transparent 0 10%, #9fb1bd 10% 18%, transparent 18% 24%, #9fb1bd 24% 28%, transparent 28% 34%, var(--green) 34% 62%, transparent 62% 70%, var(--red) 70% 92%, transparent 92%),
    linear-gradient(180deg, transparent 48%, rgba(255, 255, 255, 0.16) 48% 52%, transparent 52%);
  filter: drop-shadow(0 0 16px rgba(86, 214, 109, 0.18));
}

.warning {
  background:
    radial-gradient(circle at 28% 0%, rgba(246, 195, 78, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(24, 18, 12, 0.82), rgba(7, 12, 15, 0.95));
}

.trade-input {
  justify-content: space-between;
  margin-top: 10px;
  padding: 13px;
  font-size: 13px;
}

.trade-input span {
  color: #aeb8c0;
}

main {
  padding-bottom: 58px;
}

.page-section:not(.active-page),
.dashboard-section:not(.active-page) {
  display: none;
}

.page-section.active-page,
.dashboard-section.active-page {
  display: block;
}

.info-grid.dashboard-section.active-page,
.invite-section.page-section.active-page,
.feature-preview.page-section.active-page,
.info-grid.dashboard-section.active-view,
.invite-section.page-section.active-view,
.feature-preview.page-section.active-view {
  display: grid;
}

.page-section:not(.active-view),
.dashboard-section:not(.active-view) {
  display: none;
}

.page-section.active-view,
.dashboard-section.active-view {
  display: block;
}

body:not([data-view="home"]) .hero,
body:not([data-page="home"]) .hero {
  min-height: auto;
  padding-bottom: 0;
}

body:not([data-view="home"]) .hero-grid,
body:not([data-page="home"]) .hero-grid {
  display: none;
}

body:not([data-view="home"]) .market-intel,
body:not([data-page="home"]) .market-intel {
  display: none;
}

.info-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.65fr;
  gap: 18px;
  margin-bottom: 42px;
}

.panel,
.replay-card,
.game-panel,
.mode-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 31, 38, 0.88), rgba(6, 12, 14, 0.96)),
    radial-gradient(circle at 12% 0%, rgba(86, 214, 109, 0.1), transparent 28%);
  border: 1px solid rgba(86, 214, 109, 0.16);
  border-radius: 8px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(86, 214, 109, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.panel::before,
.replay-card::before,
.game-panel::before,
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 28%, transparent 72%, rgba(86, 214, 109, 0.06));
  opacity: 0.7;
}

.panel:hover,
.mode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(86, 214, 109, 0.38);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.44),
    0 0 48px rgba(86, 214, 109, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.panel > *,
.replay-card > *,
.game-panel > *,
.mode-card > * {
  position: relative;
  z-index: 1;
}

.panel {
  padding: 20px;
}

.wide {
  grid-column: 1;
  grid-row: auto;
}

.panel-title {
  margin-bottom: 18px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.steps div,
.roadmap-grid div {
  min-width: 0;
}

.steps b,
.roadmap-grid b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border: 1px solid rgba(86, 214, 109, 0.32);
  border-radius: 50%;
  color: var(--green);
  background: rgba(86, 214, 109, 0.08);
  font-size: 13px;
}

.steps strong,
.roadmap-grid strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.steps span,
.roadmap-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.progress-panel {
  display: grid;
  gap: 14px;
}

.level-ring {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--purple) 0 72%, #202934 72% 100%);
  box-shadow: inset 0 0 0 12px #171224;
}

.level-ring span {
  font-size: 30px;
  font-weight: 950;
}

.level-ring small {
  color: #d8d2ff;
}

.xp-meter {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #202a33;
  overflow: hidden;
}

.xp-meter span {
  position: absolute;
  z-index: 1;
  top: -22px;
  right: 0;
  color: #d5ded8;
  font-size: 12px;
  font-weight: 850;
}

.xp-meter i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.stat-row {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.stat-row span {
  color: var(--muted);
}

.leaderboard {
  display: grid;
  gap: 10px;
}

.gainers-panel {
  border-color: rgba(246, 195, 78, 0.32);
  background:
    radial-gradient(circle at 86% 0%, rgba(246, 195, 78, 0.16), transparent 34%),
    radial-gradient(circle at 12% 12%, rgba(86, 214, 109, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(18, 20, 10, 0.9), rgba(6, 12, 14, 0.97));
}

.gainers-panel .panel-title {
  color: var(--gold);
  font-size: 15px;
}

.leaderboard-subtitle {
  margin: -8px 0 16px;
  color: #c8d3cc;
  font-size: 13px;
  font-weight: 800;
}

.leader-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #101922;
  border: 1px solid var(--line);
}

.gainer-row {
  grid-template-columns: 44px 1fr auto;
  min-height: 72px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(14, 26, 22, 0.94), rgba(9, 14, 18, 0.96));
  border-color: rgba(86, 214, 109, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.gainer-row.top-gainer {
  border-color: rgba(246, 195, 78, 0.28);
  background:
    linear-gradient(135deg, rgba(34, 28, 8, 0.88), rgba(9, 17, 15, 0.96));
}

.gainer-rank {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #120d02;
  background: linear-gradient(135deg, #fff0a5, var(--gold), #b7791f);
  box-shadow: 0 0 28px rgba(246, 195, 78, 0.24);
}

.gainer-name {
  color: #f1f8f3;
  font-weight: 900;
}

.gainer-points {
  color: var(--green);
  padding: 8px 10px;
  border: 1px solid rgba(86, 214, 109, 0.24);
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.1);
  box-shadow: 0 0 22px rgba(86, 214, 109, 0.1);
}

.leader-row.you {
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.18), rgba(246, 195, 78, 0.12)),
    rgba(12, 20, 18, 0.94);
  border-color: rgba(86, 214, 109, 0.46);
  box-shadow: 0 0 38px rgba(86, 214, 109, 0.12), 0 16px 38px rgba(0, 0, 0, 0.25);
}

.leader-row span {
  color: #d7e0da;
}

.leader-row small {
  color: var(--muted);
}

.challenge-reward {
  margin: 16px 0;
  font-weight: 900;
}

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

.achievement {
  display: grid;
  place-items: center;
  min-height: 86px;
  border-radius: 8px;
  background: #101922;
  border: 1px solid var(--line);
  text-align: center;
  color: #d7e0da;
  font-size: 12px;
}

.achievement b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(86, 214, 109, 0.14);
  color: var(--green);
}

.rank-meter-panel {
  grid-column: 1 / -1;
  border-color: rgba(124, 92, 255, 0.28);
  background:
    radial-gradient(circle at 14% 0%, rgba(124, 92, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(86, 214, 109, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(11, 16, 28, 0.92), rgba(6, 12, 14, 0.97));
}

.rank-meter-copy {
  margin: -8px 0 18px;
  color: var(--muted);
  font-weight: 800;
}

.rank-meter {
  display: grid;
  gap: 16px;
}

.rank-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(143, 157, 168, 0.14);
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.rank-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9d4cf, var(--green), #46a6ff, #7c5cff, #ff5f57, #f6c34e);
  box-shadow: 0 0 26px rgba(86, 214, 109, 0.24);
}

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

.rank-gem-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 13px 8px;
  border: 1px solid rgba(143, 157, 168, 0.16);
  border-radius: 8px;
  background: rgba(8, 14, 19, 0.72);
  opacity: 0.58;
}

.rank-gem-item.unlocked {
  opacity: 1;
}

.rank-gem-item.current {
  border-color: rgba(246, 195, 78, 0.5);
  box-shadow: 0 0 36px rgba(246, 195, 78, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rank-gem {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: white;
  font-size: 18px;
  font-weight: 950;
  clip-path: polygon(50% 0%, 92% 24%, 76% 88%, 50% 100%, 24% 88%, 8% 24%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.rank-gem::after {
  content: "";
  position: absolute;
  inset: 8px 12px auto 9px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  filter: blur(1px);
}

.rank-gem.quartz {
  background: linear-gradient(135deg, #f4fff9, #9fb1bd 48%, #52606b);
}

.rank-gem.emerald {
  background: linear-gradient(135deg, #8cffb0, #22c55e 48%, #0b6b3a);
}

.rank-gem.sapphire {
  background: linear-gradient(135deg, #8fd3ff, #2563eb 50%, #102a77);
}

.rank-gem.amethyst {
  background: linear-gradient(135deg, #d6b4ff, #7c5cff 50%, #35207d);
}

.rank-gem.ruby {
  background: linear-gradient(135deg, #ffb4b4, #ff3b66 52%, #771326);
}

.rank-gem.diamond {
  background: linear-gradient(135deg, #ffffff, #7dd3fc 40%, #f6c34e 72%, #9f6b00);
}

.rank-gem-item strong {
  color: var(--text);
  font-size: 13px;
}

.rank-gem-item small,
.rank-next {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.rank-next {
  margin: 0;
  color: #f6c34e;
}

.trainer-section,
.other-sections,
.roadmap {
  margin-top: 42px;
}

body:not([data-view="game"]) .trainer-section,
body:not([data-page="game"]) .trainer-section {
  display: none;
}

body.playing .info-grid,
body.playing #modes,
body.playing .feature-preview,
body.playing .roadmap,
body.playing .plans-section,
body.playing .futures-section,
body.playing .faq-section,
body.playing .invite-section {
  display: none;
}

body.playing .site-shell {
  width: min(1500px, calc(100% - 24px));
}

body.playing .hero {
  min-height: auto;
  padding: 0;
}

body.playing .hero-grid {
  display: none;
}

body.playing .market-intel {
  display: none;
}

body.playing .top-nav,
body:not([data-view="home"]) .top-nav,
body:not([data-page="home"]) .top-nav {
  margin-bottom: 22px;
}

body.playing .trainer-section {
  min-height: 100vh;
  margin-top: 0;
  padding: 22px 0;
}

.section-heading {
  margin-bottom: 18px;
}

.section-heading .ghost-button {
  margin-top: 12px;
  width: auto;
  padding: 0 16px;
}

.section-heading h2 {
  margin: 6px 0 6px;
  font-size: clamp(30px, 4vw, 52px);
}

.section-heading p:last-child {
  color: var(--muted);
  margin: 0;
}

.trainer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 18px;
}

.replay-card,
.game-panel {
  padding: 18px;
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.scenario-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.difficulty-badge {
  width: max-content;
  padding: 8px 10px;
  border: 1px solid rgba(246, 195, 78, 0.32);
  border-radius: 999px;
  background: rgba(246, 195, 78, 0.1);
  color: #ffe6a8;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.difficulty-badge.easy {
  border-color: rgba(77, 255, 171, 0.32);
  background: rgba(77, 255, 171, 0.1);
  color: var(--green);
}

.difficulty-badge.hard {
  border-color: rgba(255, 95, 87, 0.34);
  background: rgba(255, 95, 87, 0.1);
  color: #ffb0ac;
}

.scenario-header p,
.scenario-header h3,
.scenario-header span {
  margin: 0;
}

.scenario-header p {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.scenario-header h3 {
  margin: 5px 0;
  font-size: 28px;
}

.scenario-header span {
  color: #c5d1ca;
}

.timer {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(246, 195, 78, 0.45);
  color: var(--gold);
  font-weight: 950;
}

.timeframe-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.timeframe-tabs button {
  min-width: 70px;
  padding: 0 14px;
  background: #101922;
  color: #c6d1cb;
}

.timeframe-tabs button.active,
.timeframe-tabs button:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
  font-weight: 950;
}

.chart-frame {
  position: relative;
  background: #070c11;
  border: 1px solid #1b2732;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 8.4;
  animation: chartPulse 4.5s ease-in-out infinite;
}

.replay-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.82);
  color: #c5d1ca;
  font-size: 12px;
  font-weight: 850;
  animation: statusBlink 2.6s ease-in-out infinite;
}

.large {
  margin-top: 14px;
}

.game-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.score-strip div {
  background: #101922;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.score-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.score-strip strong {
  font-size: 18px;
}

.game-panel h3 {
  margin: 0;
  font-size: 27px;
}

.answers {
  display: grid;
  gap: 10px;
}

.answer-button {
  width: 100%;
  padding: 14px;
  text-align: left;
  background: #101922;
  color: var(--text);
  line-height: 1.35;
}

.answer-button:hover,
.ghost-button:hover,
.primary-button:hover,
.panel-button:hover,
.nav-actions a:hover,
.nav-actions button:hover {
  transform: translateY(-1px);
}

.answer-button.correct {
  border-color: var(--green);
  background: rgba(86, 214, 109, 0.14);
}

.answer-button.wrong {
  border-color: var(--red);
  background: rgba(255, 95, 87, 0.14);
}

.result-panel {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 14px;
  background: #101922;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.result-panel.hidden {
  display: none;
}

.grade {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 50%;
  font-size: 27px;
  font-weight: 950;
}

.result-panel h4,
.result-panel p {
  margin: 0;
}

.result-panel p {
  color: #c8d3cc;
  line-height: 1.45;
}

.xp-line {
  margin-top: 10px !important;
  color: var(--gold) !important;
  font-weight: 950;
}

.control-row {
  gap: 10px;
  margin-top: auto;
}

.ghost-button,
.primary-button {
  flex: 1;
  padding: 0 12px;
}

.ghost-button {
  background: #101922;
  color: #d7e0da;
}

.primary-button {
  border-color: var(--green);
  background: var(--green);
  color: var(--ink);
  font-weight: 950;
  position: relative;
  overflow: hidden;
}

.primary-button:disabled,
.plan-button:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none !important;
}

.primary-button.is-loading::after,
.plan-button.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: translateX(-100%);
  animation: loadingSheen 1s linear infinite;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.mode-card {
  padding: 20px;
  min-height: 210px;
}

.mode-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.mode-card h3 {
  margin: 10px 0;
  font-size: 24px;
}

.mode-card p {
  line-height: 1.55;
}

.mode-card .panel-button {
  margin-top: 18px;
}

.trade-form {
  display: grid;
  gap: 10px;
}

.trade-form label,
.modal-card label {
  display: grid;
  gap: 7px;
  color: #d7e0da;
  font-size: 13px;
  font-weight: 850;
}

.trade-form input,
.modal-card input,
.modal-card select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #071016;
  color: var(--text);
  padding: 0 12px;
  outline: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

.modal-card {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #101922, #081016);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(77, 255, 171, 0.24);
  border-radius: 4px;
  background: rgba(7, 20, 16, 0.94);
  color: #dff8eb;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.modal-close:hover {
  border-color: var(--green);
  background: rgba(77, 255, 171, 0.12);
  color: var(--green);
}

.modal-card h2 {
  margin: 0;
  font-size: 34px;
}

.safe-note {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  line-height: 1.45;
}

.fineprint {
  margin: 0;
  color: #7e8b94;
  font-size: 11px;
  line-height: 1.45;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 22px 0 6px;
  color: #7e8b94;
  font-size: 13px;
}

.site-footer a {
  color: var(--green);
}

.legal-page {
  width: min(860px, calc(100% - 32px));
  margin: 0 auto;
  padding: 64px 0;
}

.legal-page a {
  color: var(--green);
}

.legal-page h1 {
  margin: 24px 0;
  font-size: clamp(38px, 6vw, 72px);
}

.legal-page p {
  color: #c8d3cc;
  line-height: 1.7;
  font-size: 18px;
}

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

.paywall-progress-line {
  padding: 13px 14px;
  border: 1px solid rgba(246, 195, 78, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(246, 195, 78, 0.12), rgba(77, 255, 171, 0.07)),
    rgba(8, 18, 17, 0.8);
  color: #fff0bd;
  font-weight: 900;
  box-shadow: inset 3px 0 0 var(--gold);
}

.pricing-grid article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 310px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0b1218;
}

.pricing-grid h3,
.pricing-grid p {
  margin: 0;
}

.pricing-grid strong {
  color: var(--gold);
  font-size: clamp(25px, 2.3vw, 34px);
  white-space: nowrap;
}

.pricing-grid p {
  color: #b5c4be;
  line-height: 1.45;
}

.pricing-grid .plan-button {
  flex: 0 0 48px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin-top: auto;
  padding: 0 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.paywall-card {
  width: min(1040px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  border-color: rgba(77, 255, 171, 0.22);
  background:
    linear-gradient(rgba(77, 255, 171, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, #0b1916, #06100f 68%);
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow:
    0 44px 130px rgba(0, 0, 0, 0.72),
    0 0 70px rgba(77, 255, 171, 0.08);
}

.paywall-card > .muted {
  max-width: 680px;
  margin: -4px 0 2px;
  line-height: 1.5;
}

.paywall-card #close-paywall {
  width: 100%;
  min-height: 48px;
}

.featured-plan {
  border-color: rgba(86, 214, 109, 0.55) !important;
}

.elite-plan-card,
.elite-paywall-plan {
  border-color: rgba(246, 195, 78, 0.62) !important;
  background:
    radial-gradient(circle at 80% 10%, rgba(246, 195, 78, 0.14), transparent 32%),
    rgba(16, 25, 34, 0.9) !important;
}

.elite-plan-card > span,
.elite-paywall-plan h3 {
  color: var(--gold) !important;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.plans-section {
  margin-top: 18px;
}

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

.plans-grid article {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 25, 34, 0.82);
}

.plans-grid article > span {
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.plans-grid h3 {
  margin: 0;
  color: var(--gold);
  font-size: 38px;
}

.plans-grid ul {
  margin: 0;
  padding-left: 20px;
  color: #c8d3cc;
  line-height: 1.75;
}

.plans-grid li::marker {
  color: var(--green);
}

.plans-grid .primary-button {
  min-height: 48px;
}

.plan-compare {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(77, 255, 171, 0.15);
  border-radius: 8px;
  background: rgba(12, 20, 27, 0.78);
}

.compare-table {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(77, 255, 171, 0.14);
  border-radius: 8px;
  background: rgba(77, 255, 171, 0.12);
}

.compare-table > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(80px, 0.6fr));
  gap: 1px;
  background: rgba(77, 255, 171, 0.12);
}

.compare-table span,
.compare-table strong,
.compare-table b {
  display: grid;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  background: #0d151e;
}

.compare-table strong,
.compare-table b {
  justify-content: center;
  color: var(--green);
}

.compare-head span,
.compare-head strong {
  color: #eef7f1;
  background: rgba(77, 255, 171, 0.1);
  font-weight: 950;
}

.profile-section {
  margin-top: 42px;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, auto);
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  border-color: rgba(86, 214, 109, 0.34);
  background:
    radial-gradient(circle at 12% 20%, rgba(86, 214, 109, 0.16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(246, 195, 78, 0.14), transparent 30%),
    rgba(8, 14, 19, 0.9);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--green), #f6c34e);
  box-shadow: 0 18px 44px rgba(86, 214, 109, 0.22);
}

.profile-hero h2 {
  margin: 6px 0;
  font-size: clamp(34px, 4vw, 64px);
  letter-spacing: 0;
}

.profile-hero p {
  margin: 0;
  color: var(--muted);
}

.profile-access {
  display: grid;
  gap: 7px;
  justify-items: end;
  padding: 18px;
  border: 1px solid rgba(86, 214, 109, 0.22);
  border-radius: 8px;
  background: rgba(6, 11, 15, 0.72);
}

.profile-access span,
.profile-stat-card span,
.profile-rank-card span,
.profile-patterns span {
  color: var(--muted);
  font-weight: 850;
}

.profile-access strong {
  color: var(--green);
  font-size: 24px;
}

.profile-access small {
  color: #f6c34e;
  font-weight: 800;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 0.75fr);
  gap: 18px;
}

.profile-empty-state {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  border-color: rgba(246, 195, 78, 0.28);
  background:
    radial-gradient(circle at 85% 0%, rgba(246, 195, 78, 0.12), transparent 36%),
    rgba(12, 20, 27, 0.84);
}

.profile-empty-state h3 {
  margin: 6px 0;
  font-size: 28px;
}

.profile-empty-state p:not(.signal) {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.freeze-card strong {
  color: #ffe6a8;
}

.profile-rank-card,
.profile-stat-card,
.profile-sub-card {
  min-height: 210px;
}

.profile-rank-card {
  display: grid;
  gap: 14px;
}

.profile-rank-card > strong,
.profile-stat-card strong {
  color: var(--text);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}

.profile-ring {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: var(--text);
  background:
    radial-gradient(circle at center, #13202a 52%, transparent 54%),
    conic-gradient(#7c4dff, #56d66d, #f6c34e, #7c4dff);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.42), 0 16px 36px rgba(124, 77, 255, 0.18);
}

.profile-ring b {
  font-size: 34px;
  line-height: 1;
}

.profile-ring small {
  margin-top: -20px;
  color: var(--muted);
  font-weight: 800;
}

.profile-stat-card {
  display: grid;
  align-content: center;
  gap: 12px;
}

.profile-stat-card small {
  color: var(--muted);
  font-weight: 750;
}

.profile-wide {
  grid-column: span 2;
}

.profile-mode-list,
.profile-recent {
  display: grid;
  gap: 10px;
}

.profile-mode-row,
.profile-recent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 21, 28, 0.72);
}

.profile-mode-row strong,
.profile-recent-row strong {
  display: block;
}

.profile-mode-row span,
.profile-recent-row span {
  color: var(--muted);
  font-weight: 750;
}

.profile-mode-row b {
  color: var(--green);
}

.profile-weekly-goal {
  display: grid;
  gap: 16px;
}

.profile-weekly-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.profile-weekly-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.profile-weekly-head > strong {
  color: var(--green);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.profile-weekly-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.profile-weekly-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56d66d, #f6c34e);
  transition: width 260ms ease;
}

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

.profile-weekly-stats div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(12, 21, 28, 0.62);
}

.profile-weekly-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-weekly-stats strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-weekly-cta {
  justify-self: start;
}

.training-journal-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgba(255, 255, 255, 0.08);
}

.training-journal-row.is-correct {
  border-color: rgba(86, 214, 109, 0.2);
}

.training-journal-row.needs-review {
  border-color: rgba(244, 98, 42, 0.22);
}

.training-journal-row small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 850;
}

.training-journal-row b {
  display: grid;
  gap: 3px;
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.training-journal-row.needs-review b {
  color: #f6c34e;
}

.training-journal-row b em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

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

.profile-patterns div {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 21, 28, 0.72);
}

.profile-patterns strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 20px;
}

.profile-pattern-bar {
  margin-top: 12px;
}

.profile-pattern-bar strong {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.profile-sub-card {
  grid-column: span 2;
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.08), rgba(246, 195, 78, 0.09)),
    rgba(8, 14, 19, 0.9);
}

.profile-sub-card h3 {
  margin: 12px 0;
  color: #f6c34e;
  font-size: 38px;
}

.profile-sub-card p {
  color: var(--muted);
}

.profile-sub-card .ghost-button,
.profile-sub-card .primary-button {
  width: 100%;
  margin-top: 10px;
}

.referral-card {
  display: grid;
  gap: 14px;
}

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

.referral-header .panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.referral-header .panel-title svg {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.referral-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(86, 214, 109, 0.28);
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.referral-copy {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  line-height: 1.45;
}

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

.referral-reward-grid div {
  padding: 10px 12px;
  border: 1px solid rgba(86, 214, 109, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.1), rgba(86, 214, 109, 0.02)),
    rgba(3, 8, 13, 0.38);
}

.referral-reward-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.referral-reward-grid strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.referral-code-row,
.referral-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-code-field {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(3, 8, 13, 0.72);
  color: var(--green);
  cursor: default;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  user-select: all;
}

.referral-copy-button {
  min-width: 84px;
}

.referral-link-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.referral-link-copy span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 800;
}

.referral-link-copy strong {
  overflow: hidden;
  color: rgba(86, 214, 109, 0.78);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-share-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
}

.referral-share-button svg {
  width: 16px;
  height: 16px;
}

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

.referral-stats-row div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.referral-stats-row div > span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 800;
}

.referral-stats-row div > strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.referral-status-pending {
  color: #ffcb4d;
}

.referral-status-applied {
  color: var(--green);
}

.referral-generate-button {
  width: fit-content;
}

.referral-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(86, 214, 109, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(86, 214, 109, 0.14), transparent 34%),
    rgba(3, 8, 13, 0.5);
}

.referral-empty-state div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.referral-empty-state strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.referral-empty-state span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.referral-error {
  color: rgba(255, 95, 95, 0.82);
  font-size: 13px;
  font-weight: 800;
}

.referral-error button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  text-decoration: underline;
  box-shadow: none;
}

.referral-loading {
  display: grid;
  gap: 12px;
}

.referral-skeleton {
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  background-size: 220% 100%;
  animation: referralPulse 1.2s ease-in-out infinite;
}

.referral-skeleton-title {
  width: 220px;
  height: 22px;
}

.referral-skeleton-copy {
  width: min(100%, 620px);
  height: 16px;
}

.referral-skeleton-input {
  width: 100%;
  height: 48px;
}

@keyframes referralPulse {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (max-width: 639px) {
  .referral-header,
  .referral-code-row,
  .referral-link-row {
    align-items: stretch;
  }

  .referral-stats-row {
    grid-template-columns: 1fr;
  }

  .referral-reward-grid {
    grid-template-columns: 1fr;
  }

  .referral-empty-state {
    align-items: stretch;
    flex-direction: column;
  }
}

.profile-billing-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.logout-tab::before {
  content: "↪";
}

.futures-section {
  margin-top: 42px;
}

.futures-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 34px;
  align-items: center;
  padding: clamp(28px, 5vw, 66px);
  border-color: rgba(86, 214, 109, 0.28);
  background:
    radial-gradient(circle at 72% 20%, rgba(86, 214, 109, 0.18), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(246, 195, 78, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(9, 21, 20, 0.92), rgba(5, 9, 12, 0.97));
}

.futures-hero h2 {
  max-width: 850px;
  margin: 10px 0 18px;
  font-size: clamp(44px, 6vw, 86px);
  line-height: 1.02;
  letter-spacing: 0;
}

.futures-hero p:not(.signal) {
  max-width: 780px;
  color: #c8d3cc;
  font-size: 21px;
  line-height: 1.55;
}

.futures-hero .primary-button {
  width: fit-content;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 22px;
}

.futures-diagram {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(86, 214, 109, 0.22);
  border-radius: 8px;
  background: rgba(4, 11, 13, 0.72);
  box-shadow: inset 0 0 44px rgba(86, 214, 109, 0.06), 0 24px 70px rgba(0, 0, 0, 0.32);
}

.futures-scale {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 110px;
}

.futures-scale span {
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.futures-scale i {
  position: relative;
  width: 120px;
  height: 3px;
  transform: rotate(-8deg);
  background: #dfe8e2;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.18);
}

.futures-scale i::before,
.futures-scale i::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 38px;
  height: 26px;
  border: 2px solid rgba(86, 214, 109, 0.32);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.futures-scale i::before {
  left: 0;
}

.futures-scale i::after {
  right: 0;
  border-color: rgba(246, 195, 78, 0.48);
}

.futures-meter {
  height: 12px;
  border-radius: 999px;
  background: #182229;
  overflow: hidden;
}

.futures-meter b {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green));
  box-shadow: 0 0 24px rgba(86, 214, 109, 0.24);
}

.futures-diagram > strong {
  color: var(--green);
  font-size: 20px;
}

.futures-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.futures-card {
  min-height: 270px;
}

.futures-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border: 1px solid rgba(86, 214, 109, 0.32);
  border-radius: 8px;
  color: var(--green);
  background: rgba(86, 214, 109, 0.1);
  box-shadow: 0 0 26px rgba(86, 214, 109, 0.12);
  font-weight: 950;
}

.futures-card h3,
.futures-comparison h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.futures-card p,
.futures-comparison p,
.futures-warning p {
  color: var(--muted);
  line-height: 1.55;
}

.futures-comparison {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}

.futures-comparison ul {
  margin: 0;
  padding-left: 22px;
  color: #dce7df;
  line-height: 1.85;
  font-weight: 750;
}

.futures-comparison li::marker {
  color: var(--green);
}

.futures-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  border-color: rgba(246, 195, 78, 0.28);
}

.futures-warning strong {
  color: var(--gold);
}

.futures-warning p {
  margin: 0;
}

.elite-section {
  margin-top: 42px;
}

.elite-hero {
  padding: clamp(28px, 5vw, 68px);
  border: 1px solid rgba(124, 92, 255, 0.44);
  border-radius: 12px;
  background:
    radial-gradient(circle at 74% 22%, rgba(124, 92, 255, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(14, 16, 31, 0.96), rgba(5, 8, 12, 0.98));
}

.elite-hero h2 {
  max-width: 900px;
  margin: 10px 0 18px;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 1.02;
}

.elite-hero p:not(.signal) {
  max-width: 760px;
  color: #c8d3cc;
  font-size: 20px;
  line-height: 1.55;
}

.elite-hero .primary-button {
  width: fit-content;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 24px;
}

.elite-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.elite-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 25, 34, 0.82);
}

.elite-grid span {
  color: var(--purple);
  font-size: 12px;
  font-weight: 950;
}

.elite-grid h3 {
  margin: 10px 0;
  font-size: 20px;
}

.elite-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.elite-value {
  margin-top: 18px;
}

.elite-value h3 {
  margin: 0 0 8px;
  font-size: 30px;
}

.elite-value p {
  max-width: 980px;
  color: #c8d3cc;
  line-height: 1.55;
}

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

.elite-comparison div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(124, 92, 255, 0.08);
}

.elite-comparison strong {
  display: block;
  color: var(--gold);
  margin-bottom: 4px;
}

.elite-comparison span {
  color: var(--muted);
}

.elite-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.elite-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 25, 34, 0.9), rgba(8, 14, 19, 0.94));
}

.elite-action-panel {
  display: flex;
  flex-direction: column;
}

.elite-action-panel .playlist-list,
.elite-action-panel .filter-grid {
  width: 100%;
}

.elite-action-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(77, 255, 171, 0.12);
}

.elite-action-footer .primary-button {
  flex: 0 1 300px;
  width: min(100%, 300px);
  min-height: 50px;
  padding: 0 20px;
  text-align: center;
  white-space: nowrap;
}

.weakness-panel,
.mistake-panel,
.curriculum-panel {
  grid-column: span 2;
}

.elite-panel h3 {
  margin: 0 0 8px;
  font-size: 28px;
}

.elite-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.elite-bars,
.playlist-list,
#mistake-journal,
#elite-curriculum {
  display: grid;
  gap: 10px;
}

.elite-bar,
.playlist-item,
.journal-item,
.curriculum-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 16, 22, 0.84);
}

.elite-bar strong,
.playlist-item strong,
.journal-item strong,
.curriculum-item strong {
  display: block;
  margin-bottom: 5px;
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: #202a33;
  overflow: hidden;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}

.filter-grid,
.analytics-grid,
.trade-score-card {
  display: grid;
  gap: 10px;
}

.filter-grid label {
  display: grid;
  gap: 6px;
  color: #d7e0da;
  font-size: 13px;
  font-weight: 850;
}

.filter-grid select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #071016;
  color: var(--text);
  padding: 0 10px;
}

.analytics-grid,
.trade-score-card {
  grid-template-columns: repeat(2, 1fr);
}

.analytics-grid div,
.trade-score-card div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(124, 92, 255, 0.08);
}

.analytics-grid span,
.trade-score-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.analytics-grid strong,
.trade-score-card strong {
  font-size: 24px;
  color: var(--gold);
}

.invite-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items: center;
  margin-top: 18px;
  padding: clamp(28px, 5vw, 72px);
  border: 1px solid rgba(0, 170, 132, 0.45);
  border-radius: 12px;
  background:
    radial-gradient(circle at 72% 45%, rgba(0, 170, 132, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(2, 12, 9, 0.94), rgba(1, 6, 5, 0.98));
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.35);
}

.invite-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 0 32px;
  padding: 9px 18px;
  border: 1px solid rgba(0, 170, 132, 0.34);
  border-radius: 999px;
  background: rgba(0, 170, 132, 0.12);
  color: #00a884;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.invite-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a884;
  box-shadow: 0 0 18px rgba(0, 170, 132, 0.75);
}

.invite-section h2 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.08;
  letter-spacing: 0;
}

.invite-section h2 span {
  color: #00a884;
}

.invite-section p:not(.invite-pill) {
  max-width: 640px;
  margin: 26px 0 0;
  color: #a5aaa7;
  font-size: 22px;
  line-height: 1.45;
}

.invite-form {
  display: grid;
  gap: 18px;
}

.invite-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0, 170, 132, 0.36);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 0 0 4px rgba(0, 170, 132, 0.08);
}

.invite-form input,
.invite-form select {
  min-width: 0;
  min-height: 62px;
  border: 0;
  border-radius: 10px;
  background: #1b2420;
  color: var(--text);
  padding: 0 18px;
  font-size: 16px;
  outline: 0;
}

.invite-form button {
  min-height: 62px;
  border: 0;
  border-radius: 10px;
  background: #00a884;
  color: #eafff8;
  padding: 0 26px;
  font-weight: 950;
  font-size: 18px;
  cursor: pointer;
}

.trial-form button {
  grid-column: span 2;
}

.trial-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: #a5aaa7;
  font-size: 13px;
  line-height: 1.4;
}

.trial-consent input {
  min-height: auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #00a884;
}

.invite-form small {
  color: #818883;
  font-size: 14px;
}

.faq-section {
  margin-top: 18px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.faq-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 25, 34, 0.74);
}

.faq-grid h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
}

.faq-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .hero-grid,
  .trainer-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .wide {
    grid-row: auto;
  }

  .phone-row,
  .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone-row .center-phone {
    grid-column: span 2;
    width: min(430px, 100%);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: min(100% - 24px, 1460px);
    padding-top: 168px;
  }

  .top-nav,
  .scenario-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-nav {
    width: min(100% - 24px, 1460px);
  }

  .nav-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .nav-actions a,
  .nav-actions button {
    flex: 1;
    text-align: center;
  }

  .menu-dropdown {
    right: 0;
    width: min(92vw, 520px);
    flex-wrap: wrap;
  }

  .menu-dropdown .nav-tab {
    flex: 1 1 150px;
  }

  .phone-row,
  .market-intel,
  .steps,
  .mode-grid,
  .roadmap-grid,
  .pricing-grid,
  .plans-grid,
  .futures-hero,
  .futures-grid,
  .futures-comparison,
  .profile-hero,
  .profile-grid,
  .profile-patterns,
  .elite-grid,
  .elite-dashboard,
  .faq-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .rank-gems {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-access {
    justify-items: start;
  }

  .profile-wide,
  .profile-sub-card {
    grid-column: auto;
  }

  .elite-comparison {
    grid-template-columns: 1fr;
  }

  .weakness-panel,
  .mistake-panel,
  .curriculum-panel {
    grid-column: auto;
  }

  .invite-section {
    grid-template-columns: 1fr;
  }

  .invite-form > div {
    grid-template-columns: 1fr;
  }

  .trial-form button {
    grid-column: auto;
  }

  .phone-row .center-phone {
    grid-column: auto;
  }

  .edge-card {
    grid-template-columns: 1fr;
  }

  .futures-hero .primary-button {
    width: 100%;
  }

  .phone {
    min-height: 0;
    width: 100%;
    max-width: 430px;
    justify-self: center;
    border-radius: 34px;
  }

  .timeframe-tabs {
    overflow-x: auto;
  }

  .hero-copy h1 {
    font-size: 42px;
  }

  .brand strong {
    font-size: 22px;
  }

  .chart-frame {
    min-width: 0;
  }

  .score-strip {
    grid-template-columns: 1fr;
  }
}

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

/* 2026 analytical interface refresh */
@keyframes tapeSweep {
  from { transform: translateX(-130%); }
  to { transform: translateX(620%); }
}

@keyframes terminalBlink {
  0%, 46%, 100% { opacity: 1; }
  48%, 96% { opacity: 0.25; }
}

@keyframes dataDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 96px 0, 0 48px; }
}

@keyframes gameArtFloat {
  0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); }
  50% { transform: scale(1.075) translate3d(0, -7px, 0); }
}

@keyframes gameScan {
  0% { transform: translateY(-120%); opacity: 0; }
  18% { opacity: 0.55; }
  72% { opacity: 0.18; }
  100% { transform: translateY(520%); opacity: 0; }
}

@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 255, 171, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(77, 255, 171, 0); }
}

.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  width: 100vw;
  height: 720px;
  transform: translateX(-50%);
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(77, 255, 171, 0.08) 50%, transparent 50.2%),
    linear-gradient(rgba(77, 255, 171, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 48px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  animation: dataDrift 14s linear infinite;
}

.market-tape {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  min-height: 66px;
  margin: 8px 0 56px;
  border-top: 1px solid rgba(77, 255, 171, 0.2);
  border-bottom: 1px solid rgba(77, 255, 171, 0.14);
  background: linear-gradient(90deg, rgba(5, 18, 14, 0.92), rgba(5, 14, 15, 0.68));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.market-tape::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77, 255, 171, 0.08), transparent);
  animation: tapeSweep 8s linear infinite;
}

.market-tape > div,
.tape-action {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 18px;
  border-right: 1px solid rgba(77, 255, 171, 0.1);
}

.market-tape span {
  color: #66887e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.market-tape strong {
  color: #dff8eb;
  font-size: 14px;
}

.market-tape b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--green);
  font-size: 10px;
}

.market-tape b.neutral {
  color: #779b91;
}

.market-tape b.negative {
  color: var(--red);
}

.market-tape strong {
  transition: color 220ms ease, text-shadow 220ms ease;
}

.market-tape > div:nth-child(n + 2) strong {
  animation: tapeNumberPulse 4s ease-in-out infinite;
}

.market-tape .tape-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
}

.tape-status i,
.terminal-rail i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
  animation: terminalBlink 1.8s linear infinite;
}

.tape-action {
  border: 0;
  border-left: 1px solid rgba(77, 255, 171, 0.18);
  background: rgba(77, 255, 171, 0.06);
  color: var(--green);
  font-weight: 900;
  cursor: pointer;
}

.tape-action:hover {
  background: var(--green);
  color: #02110a;
}

.hero-grid {
  grid-template-columns: minmax(390px, 0.84fr) minmax(620px, 1.16fr);
  min-height: 680px;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 4;
  padding: 28px 0 36px;
}

.hero-copy::after {
  content: "RE / SIM-01";
  position: absolute;
  top: 4px;
  right: 0;
  color: rgba(77, 255, 171, 0.24);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  writing-mode: vertical-rl;
}

.hero-copy h1 {
  max-width: 720px;
  font-size: clamp(52px, 6vw, 92px);
  line-height: 0.93;
  text-wrap: balance;
}

.hero-copy h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--green), var(--teal), transparent);
  box-shadow: 0 0 22px rgba(77, 255, 171, 0.45);
}

.lead {
  max-width: 690px;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 670;
}

.feature-list {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 22px;
}

.feature-list div {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(77, 255, 171, 0.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-performance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
  margin: 28px 0 20px;
  border-top: 1px solid rgba(77, 255, 171, 0.18);
  border-bottom: 1px solid rgba(77, 255, 171, 0.1);
}

.hero-performance div {
  display: grid;
  gap: 4px;
  padding: 16px 18px 16px 0;
}

.hero-performance div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(77, 255, 171, 0.1);
}

.hero-performance strong {
  color: var(--green);
  font-size: 25px;
  line-height: 1;
}

.hero-performance span {
  color: #729087;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.phone-row {
  position: relative;
  display: block;
  min-height: 650px;
  perspective: 1600px;
}

.phone {
  position: absolute;
  width: min(330px, 44%);
  min-height: 625px;
  border-width: 1px;
  border-radius: 34px;
  animation: none;
  transition: transform 400ms ease, filter 400ms ease;
}

.phone:nth-child(1) {
  left: 0;
  top: 54px;
  z-index: 1;
  transform: rotateY(9deg) rotateZ(-2.5deg) scale(0.92);
  filter: brightness(0.72) saturate(0.78);
}

.phone:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  min-height: 680px;
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.72), 0 0 80px rgba(77, 255, 171, 0.14);
}

.phone:nth-child(3) {
  right: 0;
  top: 54px;
  z-index: 2;
  transform: rotateY(-9deg) rotateZ(2.5deg) scale(0.92);
  filter: brightness(0.72) saturate(0.78);
}

.phone-row:hover .phone:nth-child(1) {
  transform: translateX(-8px) rotateY(4deg) rotateZ(-1deg) scale(0.95);
  filter: brightness(0.92);
}

.phone-row:hover .phone:nth-child(3) {
  transform: translateX(8px) rotateY(-4deg) rotateZ(1deg) scale(0.95);
  filter: brightness(0.92);
}

.phone::after {
  content: "";
  position: absolute;
  inset: 80px 10px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 255, 171, 0.58), transparent);
}

.market-intel {
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  margin-top: 56px;
  border-top: 1px solid rgba(77, 255, 171, 0.16);
  border-bottom: 1px solid rgba(77, 255, 171, 0.1);
  background: rgba(3, 12, 10, 0.54);
}

.intel-card {
  min-height: 190px;
  border: 0;
  border-right: 1px solid rgba(77, 255, 171, 0.12);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(8, 28, 22, 0.54), rgba(3, 10, 9, 0.4));
  box-shadow: none;
}

.intel-card:last-child {
  border-right: 0;
}

.intel-card:hover {
  background: linear-gradient(180deg, rgba(10, 40, 31, 0.72), rgba(3, 13, 11, 0.58));
}

.panel,
.replay-card,
.game-panel,
.mode-card,
.elite-panel {
  border-color: rgba(77, 255, 171, 0.14);
  background:
    linear-gradient(120deg, rgba(12, 31, 26, 0.9), rgba(5, 13, 13, 0.97) 68%),
    radial-gradient(circle at 0 0, rgba(77, 255, 171, 0.12), transparent 32%);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.panel::after,
.mode-card::after,
.game-panel::after,
.replay-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 1px;
  background: var(--green);
  box-shadow: 0 0 16px rgba(77, 255, 171, 0.7);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 30px;
}

.section-heading h2 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 0.98;
  text-wrap: balance;
}

.other-sections {
  position: relative;
  margin-top: 36px;
  padding: 44px 0;
}

.game-mode-showcase {
  position: relative;
  margin: 34px 0 54px;
  padding: 36px 0 42px;
}

.game-mode-showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  border-top: 1px solid rgba(77, 255, 171, 0.12);
  border-bottom: 1px solid rgba(77, 255, 171, 0.09);
  background:
    linear-gradient(rgba(77, 255, 171, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(4, 17, 15, 0.9), rgba(3, 11, 11, 0.72));
  background-size: 36px 36px, 36px 36px, auto;
}

.game-mode-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.game-mode-heading h2 {
  margin: 6px 0 8px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}

.game-mode-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.show-all-modes {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(77, 255, 171, 0.26);
  border-radius: 6px;
  background: rgba(77, 255, 171, 0.08);
  color: var(--green);
  font-weight: 900;
  cursor: pointer;
}

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

.game-mode-card {
  --mode-accent: var(--green);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 430px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 38%, transparent);
  border-radius: 7px;
  background: #06100f;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.daily-game {
  --mode-accent: #f6c34e;
}

.ranked-game {
  --mode-accent: #a66cff;
}

.trade-game {
  --mode-accent: #55b7ff;
}

.spot-game {
  --mode-accent: #00d8c4;
}

.survival-game {
  --mode-accent: #ff8c5a;
}

.notrade-game {
  --mode-accent: #f6c34e;
}

.detective-game {
  --mode-accent: #d482ff;
}

.thesis-game {
  --mode-accent: #69a7ff;
}

.game-mode-card:hover,
.game-mode-card:focus-visible {
  z-index: 2;
  transform: translateY(-8px) scale(1.015);
  border-color: var(--mode-accent);
  outline: none;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.46),
    0 0 38px color-mix(in srgb, var(--mode-accent) 22%, transparent);
}

.game-mode-card.locked-mode {
  opacity: 0.72;
  filter: saturate(0.72);
}

.game-mode-card.locked-mode::before {
  content: "Locked";
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  padding: 6px 9px;
  border: 1px solid rgba(246, 195, 78, 0.38);
  border-radius: 999px;
  background: rgba(246, 195, 78, 0.15);
  color: #ffe6a8;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.game-mode-card.locked-mode:hover,
.game-mode-card.locked-mode:focus-visible {
  transform: translateY(-3px);
}

.game-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: #020807;
}

.game-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(3, 12, 10, 0.9) 100%),
    radial-gradient(circle at 50% 55%, transparent 20%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

.game-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: gameArtFloat 7s ease-in-out infinite;
  filter: saturate(0.92) contrast(1.06);
  transition: filter 220ms ease;
}

.game-mode-card:nth-child(2) .game-art img {
  animation-delay: -1.4s;
}

.game-mode-card:nth-child(3) .game-art img {
  animation-delay: -2.8s;
}

.game-mode-card:nth-child(4) .game-art img {
  animation-delay: -4.2s;
}

.game-mode-card:hover .game-art img {
  filter: saturate(1.18) contrast(1.08);
}

.art-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 22%;
  border-bottom: 1px solid color-mix(in srgb, var(--mode-accent) 70%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mode-accent) 12%, transparent));
  animation: gameScan 5.8s linear infinite;
  pointer-events: none;
}

.game-copy {
  display: grid;
  gap: 8px;
  padding: 18px 20px 14px;
}

.game-copy small {
  color: var(--mode-accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.game-copy strong {
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1;
}

.game-copy > span {
  color: #a8bbb4;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}

.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 40px);
  margin: auto 20px 0;
  padding: 14px 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--mode-accent) 22%, transparent);
}

.game-footer b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #88a49b;
  font-size: 11px;
}

.game-footer b i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: liveDot 1.8s ease-in-out infinite;
}

.game-footer em {
  color: var(--mode-accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.training-game-grid .game-mode-card {
  min-height: 470px;
}

.replay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(77, 255, 171, 0.12);
  border-top: 0;
  background: rgba(2, 11, 9, 0.86);
}

.replay-controls > button,
.speed-control button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 36px;
  border: 1px solid rgba(77, 255, 171, 0.16);
  border-radius: 4px;
  background: rgba(13, 32, 27, 0.84);
  color: #b9d0c8;
  cursor: pointer;
}

.replay-controls button:hover:not(:disabled),
.speed-control button.active {
  border-color: var(--green);
  background: rgba(77, 255, 171, 0.14);
  color: var(--green);
}

.replay-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.replay-controls .replay-play {
  color: #03110a;
  background: var(--green);
}

.speed-control {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.speed-control button {
  min-width: 46px;
  font-size: 11px;
  font-weight: 900;
}

.candle-counter {
  min-width: 54px;
  color: #79978d;
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.mode-instruction {
  margin: 8px 0 14px;
  padding: 11px 12px;
  border-left: 2px solid var(--green);
  background: rgba(77, 255, 171, 0.055);
  color: #9bb5ac;
  font-size: 12px;
  line-height: 1.45;
}

.confidence-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
  padding: 12px;
  border: 1px solid rgba(77, 255, 171, 0.13);
  background: rgba(4, 16, 13, 0.7);
}

.confidence-picker > span {
  color: #8eaaa0;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.confidence-picker > div,
.direction-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.confidence-picker button,
.direction-picker button {
  min-height: 38px;
  border: 1px solid rgba(77, 255, 171, 0.14);
  border-radius: 4px;
  background: #0a1815;
  color: #9db5ad;
  font-weight: 850;
  cursor: pointer;
}

.confidence-picker button.active,
.direction-picker button.active {
  border-color: var(--green);
  background: rgba(77, 255, 171, 0.14);
  color: var(--green);
}

.confidence-picker small {
  color: #708c83;
  line-height: 1.4;
}

.direction-picker {
  margin-bottom: 4px;
}

.trade-form .game-submit,
.thesis-builder .game-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}

.rr-preview {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(246, 195, 78, 0.16);
  color: #9dadab;
  font-size: 12px;
}

.rr-preview strong {
  color: var(--gold);
}

.thesis-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.thesis-builder label {
  display: grid;
  gap: 6px;
  color: #91aba2;
  font-size: 11px;
  font-weight: 850;
}

.thesis-builder select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(77, 255, 171, 0.16);
  border-radius: 4px;
  background: #071310;
  color: var(--text);
  padding: 0 9px;
}

.thesis-builder label:last-of-type,
.thesis-builder .game-submit {
  grid-column: 1 / -1;
}

.survival-status {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 140, 90, 0.22);
  background: rgba(255, 140, 90, 0.06);
}

.survival-status > span {
  color: #ffc1a6;
  font-size: 12px;
  font-weight: 850;
}

.survival-status > div {
  height: 7px;
  background: #1c2925;
  overflow: hidden;
}

.survival-status i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff8c5a, var(--gold), var(--green));
  transition: width 220ms ease;
}

.survival-status small {
  color: #8ea39c;
}

.chart-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.chart-hotspots button {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 5px;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #dff8eb;
  cursor: crosshair;
  pointer-events: auto;
}

.chart-hotspots button span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: rgba(4, 22, 16, 0.74);
  box-shadow: 0 0 0 8px rgba(77, 255, 171, 0.07), 0 0 28px rgba(77, 255, 171, 0.26);
  font-weight: 950;
  transition: transform 160ms ease, background 160ms ease;
}

.chart-hotspots button:hover span {
  transform: scale(1.15);
  background: var(--green);
  color: #03110a;
}

.chart-hotspots button small {
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(2, 9, 8, 0.86);
  font-size: 9px;
  white-space: nowrap;
}

.result-breakdown {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.result-breakdown > .result-section {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(77, 255, 171, 0.11);
  background:
    linear-gradient(90deg, rgba(77, 255, 171, 0.045), transparent 48%),
    rgba(5, 17, 14, 0.76);
}

.result-section-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(77, 255, 171, 0.28);
  border-radius: 50%;
  color: var(--green);
  background: rgba(77, 255, 171, 0.08);
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.result-breakdown .result-section > div > strong {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
  font-size: 11px;
  text-transform: uppercase;
}

.result-breakdown p {
  margin: 0;
  color: #95aaa3;
  font-size: 12px;
  line-height: 1.42;
}

.distribution-list {
  display: grid;
  gap: 8px;
}

.distribution-row {
  display: grid;
  gap: 5px;
}

.distribution-row strong {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #d8e7e0;
  font-size: 11px;
  text-transform: none;
}

.distribution-row strong span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-row strong b {
  color: #93aaa2;
}

.distribution-row > div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(142, 166, 158, 0.16);
}

.distribution-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #506472, #8ea69e);
}

.distribution-row.correct i {
  background: linear-gradient(90deg, var(--green), #b6ffdc);
  box-shadow: 0 0 16px rgba(77, 255, 171, 0.22);
}

.distribution-row.selected:not(.correct) i {
  background: linear-gradient(90deg, var(--red), #ffb36d);
}

.result-coach.locked {
  border-color: rgba(246, 195, 78, 0.24);
  background:
    linear-gradient(90deg, rgba(246, 195, 78, 0.08), transparent 52%),
    rgba(5, 17, 14, 0.76);
}

.session-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(77, 255, 171, 0.24);
  background:
    linear-gradient(135deg, rgba(77, 255, 171, 0.12), rgba(88, 199, 255, 0.06)),
    rgba(6, 17, 15, 0.9);
  box-shadow: inset 3px 0 0 var(--green), 0 16px 34px rgba(0, 0, 0, 0.16);
}

.level-up-nudge {
  padding: 12px 14px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  border-radius: 5px;
  background:
    radial-gradient(circle at 90% 0%, rgba(246, 195, 78, 0.16), transparent 36%),
    rgba(246, 195, 78, 0.08);
  color: #ffe6a8;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 3px 0 0 var(--gold);
}

.distribution-summary {
  margin: 4px 0 10px !important;
  color: #dfe9e3 !important;
  font-size: 12px;
  font-weight: 850;
}

.session-summary.hidden {
  display: none;
}

.session-summary > strong {
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
}

#session-summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#session-summary-stats span {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(77, 255, 171, 0.12);
  background: rgba(2, 10, 8, 0.48);
  color: #91a9a1;
  font-size: 10px;
  font-weight: 850;
}

#session-summary-stats b {
  display: block;
  color: #ecfff7;
  font-size: 13px;
}

.result-extras {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}

.coach-tone-line {
  padding: 10px 11px;
  border: 1px solid rgba(255, 216, 77, 0.2);
  border-radius: 8px;
  background: rgba(255, 216, 77, 0.07);
  color: #ffe2a3;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.beat-crowd-stat {
  padding: 9px 10px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 8px;
  background: rgba(86, 214, 109, 0.08);
  color: #dff8ea;
  font-size: 12px;
  font-weight: 850;
}

.daily-exam-board,
.trade-score-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(143, 173, 190, 0.18);
  border-radius: 10px;
  background: rgba(21, 26, 35, 0.82);
}

.daily-exam-board > strong,
.trade-score-card > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f5fbf7;
  font-size: 13px;
}

.daily-exam-board > span {
  color: #9fb0aa;
  font-size: 11px;
  font-weight: 750;
}

.daily-exam-board p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #aebeb8;
  font-size: 12px;
  font-weight: 800;
}

.daily-exam-board p.you {
  color: var(--green);
}

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

.trade-score-grid span {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(86, 214, 109, 0.12);
  border-radius: 8px;
  background: rgba(4, 12, 15, 0.7);
  color: #8fa29c;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.trade-score-grid b {
  display: block;
  color: #f6c34e;
  font-size: 16px;
  text-transform: none;
}

#chart {
  cursor: crosshair;
}

#chart.dragging-trade-line {
  cursor: ns-resize;
}

.trainer-grid.hot-hand {
  border-color: rgba(246, 195, 78, 0.34);
  box-shadow: 0 0 0 1px rgba(246, 195, 78, 0.12), 0 18px 42px rgba(246, 195, 78, 0.08);
}

.profile-mastery-map {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 8px;
  background: rgba(86, 214, 109, 0.06);
}

.profile-mastery-map strong {
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
}

.profile-mastery-map span {
  color: #9fb0aa;
  font-size: 11px;
  font-weight: 750;
}

.pattern-drill-cta {
  width: 100%;
  justify-content: center;
}

.session-recap-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
}

.session-recap-modal.hidden {
  display: none;
}

.session-recap-card {
  position: relative;
  width: min(560px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(86, 214, 109, 0.22);
  border-radius: 14px;
  background: #151a23;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  animation: resultSlide 250ms ease;
}

.session-recap-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #eef7f1;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.session-recap-card h3 {
  margin: 0;
  color: #eef7f1;
  font-size: clamp(28px, 5vw, 42px);
}

.session-recap-card p {
  margin: 0;
  color: #adbbb6;
  font-weight: 750;
}

.session-recap-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.session-recap-stats span {
  padding: 12px;
  border: 1px solid rgba(86, 214, 109, 0.12);
  border-radius: 10px;
  background: rgba(6, 12, 16, 0.8);
  color: #93aaa2;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.session-recap-stats b {
  display: block;
  color: var(--green);
  font-size: 17px;
  text-transform: none;
}

.session-recap-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.xp-burst {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 140;
  padding: 10px 14px;
  border: 1px solid rgba(77, 255, 171, 0.4);
  border-radius: 999px;
  background: rgba(3, 14, 10, 0.94);
  color: var(--green);
  font-size: 28px;
  font-weight: 950;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: xpBurst 1.15s ease forwards;
  box-shadow: 0 0 36px rgba(77, 255, 171, 0.26);
}

.xp-burst.review {
  border-color: rgba(246, 195, 78, 0.36);
  color: var(--gold);
  box-shadow: 0 0 36px rgba(246, 195, 78, 0.18);
}

.combo-flash {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 145;
  padding: 12px 18px;
  border: 1px solid rgba(246, 195, 78, 0.52);
  border-radius: 999px;
  background: rgba(27, 18, 3, 0.94);
  color: #ffe6a8;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: comboFlash 1.45s ease forwards;
  box-shadow: 0 0 44px rgba(246, 195, 78, 0.28);
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 180;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  padding: 13px 14px;
  border: 1px solid rgba(77, 255, 171, 0.28);
  border-radius: 8px;
  background: rgba(15, 24, 32, 0.96);
  color: #ecfff7;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 3px 0 0 var(--green);
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.warning {
  border-color: rgba(246, 195, 78, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 3px 0 0 var(--gold);
}

.toast.error {
  border-color: rgba(255, 95, 87, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 3px 0 0 var(--red);
}

.exit-intent,
.return-recap {
  position: fixed;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(77, 255, 171, 0.24);
  border-radius: 8px;
  background: rgba(16, 25, 34, 0.97);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48), 0 0 38px rgba(77, 255, 171, 0.08);
}

.exit-intent {
  left: 50%;
  top: 16px;
  width: min(760px, calc(100vw - 36px));
  padding: 14px;
  transform: translateX(-50%);
}

.exit-intent div,
.return-recap span {
  flex: 1;
  min-width: 0;
}

.exit-intent strong {
  display: block;
  color: #ecfff7;
}

.exit-intent span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.exit-intent .primary-button {
  flex: 0 0 auto;
  min-height: 42px;
}

.exit-close,
#close-return-recap {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(77, 255, 171, 0.22);
  border-radius: 6px;
  background: rgba(7, 16, 22, 0.92);
  color: #dff8eb;
  cursor: pointer;
}

.return-recap {
  left: calc(var(--sidebar-width) + 20px);
  right: 20px;
  top: 86px;
  padding: 12px 14px;
}

.return-recap span {
  color: #dff8eb;
  font-weight: 850;
}

.return-recap .mode-start {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: var(--ink);
  font-weight: 950;
  cursor: pointer;
}

.profile-report-progress {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(77, 255, 171, 0.16);
  background: rgba(6, 18, 15, 0.74);
}

.profile-report-progress strong {
  color: #effff8;
}

.profile-report-progress span {
  color: #93aaa2;
  line-height: 1.45;
}

.elite-locked-preview .elite-action-panel {
  position: relative;
  overflow: hidden;
}

.elite-locked-preview .elite-action-panel::after {
  content: "Elite-only";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 8px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  border-radius: 999px;
  background: rgba(246, 195, 78, 0.12);
  color: #ffe4a3;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.option-review-list {
  display: grid;
  gap: 7px;
}

.option-review-item {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(142, 166, 158, 0.12);
  background: rgba(2, 10, 8, 0.56);
}

.option-review-item > span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #83968f;
  background: rgba(142, 166, 158, 0.1);
  font-weight: 950;
}

.option-review-item.correct {
  border-color: rgba(77, 255, 171, 0.25);
  background: rgba(77, 255, 171, 0.055);
}

.option-review-item.correct > span {
  color: #03110a;
  background: var(--green);
}

.option-review-item.selected.failed {
  border-color: rgba(255, 95, 87, 0.28);
  background: rgba(255, 95, 87, 0.055);
}

.option-review-item.selected.failed > span {
  color: #fff;
  background: var(--red);
}

.option-review-item strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 3px;
  color: #d8e7e0;
  font-size: 11px;
  text-transform: none;
}

.option-review-item strong small {
  color: #708c83;
  font-size: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.option-review-item p {
  font-size: 11px;
}

.clue-jump {
  min-height: 34px;
  margin-top: 9px;
  padding: 0 11px;
  border: 1px solid rgba(88, 199, 255, 0.28);
  border-radius: 4px;
  background: rgba(88, 199, 255, 0.08);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.similar-drill-button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid rgba(246, 195, 78, 0.38);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(246, 195, 78, 0.15), rgba(77, 255, 171, 0.08)),
    #081510;
  color: #fff1bd;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--gold);
}

.similar-drill-button span,
.similar-drill-button strong {
  grid-column: 1;
}

.similar-drill-button span {
  color: #9f9b83;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.similar-drill-button strong {
  margin-top: 3px;
  color: #fff2c1;
  font-size: 13px;
  text-transform: none;
}

.similar-drill-button i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold);
  font-size: 24px;
  font-style: normal;
  transition: transform 160ms ease;
}

.similar-drill-button:hover i {
  transform: translateX(4px);
}

.save-review-button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 64px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 214, 109, 0.34);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(86, 214, 109, 0.14), rgba(88, 199, 255, 0.06)),
    #07141a;
  color: #eaffef;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--green);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.save-review-button:hover {
  transform: translateY(-1px);
  border-color: rgba(86, 214, 109, 0.68);
  box-shadow: inset 3px 0 0 var(--green), 0 14px 34px rgba(86, 214, 109, 0.12);
}

.save-review-button.saved {
  border-color: rgba(246, 195, 78, 0.52);
  box-shadow: inset 3px 0 0 var(--gold);
}

.save-review-button span,
.save-review-button strong {
  grid-column: 1;
}

.save-review-button span {
  color: #9bb4ae;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.save-review-button strong {
  margin-top: 3px;
  font-size: 13px;
}

.save-review-button i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--green);
  font-size: 22px;
  font-style: normal;
}

.result-clue-marker {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  transform: translate(-12px, -50%);
}

.result-clue-marker span {
  width: 24px;
  height: 24px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(246, 195, 78, 0.18);
  box-shadow: 0 0 0 6px rgba(246, 195, 78, 0.09), 0 0 26px rgba(246, 195, 78, 0.62);
  animation: cluePulse 1.4s ease-in-out infinite;
}

.result-clue-marker small {
  max-width: 150px;
  padding: 5px 7px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  border-radius: 3px;
  background: rgba(5, 10, 8, 0.92);
  color: #ffe9a7;
  font-size: 9px;
  font-weight: 900;
}

.chart-frame.clue-focus {
  animation: chartClueFocus 900ms ease;
}

@keyframes cluePulse {
  50% { transform: scale(1.16); box-shadow: 0 0 0 10px rgba(246, 195, 78, 0.04), 0 0 34px rgba(246, 195, 78, 0.8); }
}

@keyframes chartClueFocus {
  0%, 100% { box-shadow: none; }
  45% { box-shadow: 0 0 0 2px rgba(246, 195, 78, 0.55), 0 0 44px rgba(246, 195, 78, 0.2); }
}

@keyframes loadingSheen {
  100% { transform: translateX(100%); }
}

@keyframes xpBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -18%) scale(0.82);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -48%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -160%) scale(1.08);
  }
}

@keyframes comboFlash {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.86); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1.08); }
}

@keyframes tapeNumberPulse {
  50% {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(77, 255, 171, 0.24);
  }
}

.other-sections::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  border-top: 1px solid rgba(77, 255, 171, 0.1);
  border-bottom: 1px solid rgba(77, 255, 171, 0.08);
  background: linear-gradient(90deg, rgba(3, 12, 11, 0.92), rgba(9, 26, 23, 0.62), rgba(3, 12, 11, 0.92));
}

.mode-grid {
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 12px;
}

.mode-card {
  min-height: 310px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
}

.mode-card:first-child {
  background:
    linear-gradient(180deg, transparent 8%, rgba(5, 18, 15, 0.92) 78%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(77, 255, 171, 0.05) 29px 30px),
    linear-gradient(135deg, rgba(0, 199, 122, 0.28), rgba(4, 15, 13, 0.98));
}

.mode-card::before {
  background:
    linear-gradient(140deg, rgba(77, 255, 171, 0.08), transparent 38%),
    linear-gradient(90deg, transparent 14%, rgba(77, 255, 171, 0.23) 14.4% 14.7%, transparent 15% 30%, rgba(77, 255, 171, 0.15) 30.3% 30.6%, transparent 31%);
  clip-path: polygon(0 0, 100% 0, 100% 54%, 0 32%);
}

.mode-card > span {
  width: fit-content;
  margin-bottom: auto;
  color: var(--green);
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.mode-card h3 {
  margin: 0 0 10px;
  font-size: 25px;
}

.trainer-section {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 40px max(20px, calc((100vw - 1540px) / 2)) 64px;
  background:
    linear-gradient(rgba(77, 255, 171, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.024) 1px, transparent 1px),
    linear-gradient(180deg, rgba(2, 8, 7, 0.98), rgba(5, 17, 15, 0.98));
  background-size: 32px 32px, 32px 32px, auto;
  border-top: 1px solid rgba(77, 255, 171, 0.18);
  border-bottom: 1px solid rgba(77, 255, 171, 0.12);
  scroll-margin-top: 96px;
}

.page-section,
.dashboard-section {
  scroll-margin-top: 96px;
}

.trainer-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.45fr);
  gap: 0;
  border: 1px solid rgba(77, 255, 171, 0.18);
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.52), 0 0 80px rgba(77, 255, 171, 0.06);
}

.replay-card,
.game-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.replay-card {
  padding-top: 0;
}

.game-panel {
  border-left: 1px solid rgba(77, 255, 171, 0.16);
}

.terminal-rail {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 -20px 22px;
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(77, 255, 171, 0.12);
  color: #6f9187;
  background: rgba(2, 10, 8, 0.72);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.terminal-rail span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
}

.decision-kicker {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 18px;
  color: #6f9187;
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.decision-kicker b {
  color: var(--green);
}

.chart-frame {
  border: 1px solid rgba(77, 255, 171, 0.12);
  background:
    linear-gradient(rgba(77, 255, 171, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.028) 1px, transparent 1px),
    #030a09;
  background-size: 32px 32px;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.46);
}

.score-strip {
  border-top: 1px solid rgba(77, 255, 171, 0.12);
  border-bottom: 1px solid rgba(77, 255, 171, 0.12);
  background: rgba(2, 11, 9, 0.54);
}

.answer-button {
  position: relative;
  overflow: hidden;
  border-color: rgba(77, 255, 171, 0.13);
  background: rgba(8, 25, 21, 0.7);
}

.answer-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: rgba(77, 255, 171, 0.2);
  transition: width 160ms ease;
}

.answer-button:hover::before {
  width: 6px;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
}

.info-grid {
  margin-top: 44px;
}

.info-grid .wide {
  background: transparent;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

.steps {
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 17px;
  height: 1px;
  background: linear-gradient(90deg, var(--green), rgba(77, 255, 171, 0.1));
}

.steps > div {
  position: relative;
  padding-right: 14px;
  background: #06110f;
}

.gainers-panel {
  border-color: rgba(246, 195, 78, 0.25);
}

.gainer-row {
  border-left: 3px solid rgba(77, 255, 171, 0.3);
  border-radius: 2px;
}

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

.faq-grid article {
  min-height: 170px;
  padding: 24px;
  border-radius: 2px;
  background:
    linear-gradient(140deg, rgba(10, 31, 25, 0.74), rgba(4, 13, 12, 0.88));
}

.invite-section {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(5, 22, 17, 0.97), rgba(3, 12, 11, 0.92)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(77, 255, 171, 0.05) 39px 40px);
}

.invite-section::after {
  content: "03 DAYS / UNLIMITED REPLAY";
  position: absolute;
  right: 28px;
  top: 18px;
  color: rgba(77, 255, 171, 0.12);
  font: 900 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

body:not([data-page="home"]) .market-tape {
  display: none;
}

@media (max-width: 1180px) {
  .market-tape {
    grid-template-columns: repeat(3, 1fr);
  }

  .market-tape > :nth-child(4),
  .market-tape > :nth-child(5) {
    display: none;
  }

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

  .phone-row {
    width: min(820px, 100%);
    margin: 0 auto;
  }

  .mode-grid,
  .market-intel {
    grid-template-columns: repeat(2, 1fr);
  }

  .intel-card:nth-child(2) {
    border-right: 0;
  }

  .trainer-grid {
    grid-template-columns: 1fr;
  }

  .game-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-panel {
    border-left: 0;
    border-top: 1px solid rgba(77, 255, 171, 0.16);
  }
}

@media (max-width: 760px) {
  .site-shell {
    padding-top: 176px;
  }

  .market-tape {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    margin-bottom: 34px;
  }

  .market-tape .tape-status,
  .market-tape .tape-action {
    min-height: 48px;
  }

  .market-tape > :nth-child(3) {
    display: none;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-copy h1 {
    font-size: 48px;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

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

  .hero-performance div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(77, 255, 171, 0.1);
  }

  .phone-row {
    display: grid;
    min-height: 0;
    gap: 18px;
  }

  .phone,
  .phone:nth-child(1),
  .phone:nth-child(2),
  .phone:nth-child(3) {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    transform: none;
    filter: none;
  }

  .phone:nth-child(1),
  .phone:nth-child(3) {
    display: none;
  }

  .market-intel,
  .mode-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .game-mode-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .show-all-modes {
    width: 100%;
  }

  .game-mode-grid {
    grid-template-columns: 1fr;
  }

  .game-mode-card,
  .training-game-grid .game-mode-card {
    min-height: 0;
  }

  .replay-controls {
    flex-wrap: wrap;
  }

  .speed-control {
    order: 2;
    width: 100%;
    margin-left: 0;
  }

  .speed-control button {
    flex: 1;
  }

  .candle-counter {
    margin-left: auto;
  }

  .thesis-builder {
    grid-template-columns: 1fr;
  }

  .thesis-builder label:last-of-type,
  .thesis-builder .game-submit {
    grid-column: auto;
  }

  .intel-card {
    border-right: 0;
    border-bottom: 1px solid rgba(77, 255, 171, 0.12);
  }

  .trainer-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .terminal-rail {
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .paywall-card {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 20px 16px;
  }

  .pricing-grid article {
    min-height: 0;
  }

  .pricing-grid .plan-button {
    margin-top: 12px;
  }
}

/* Collapsible application sidebar */
body {
  --sidebar-width: 76px;
}

body.sidebar-expanded {
  --sidebar-width: 252px;
}

.side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  padding: 14px 10px;
  border-right: 1px solid rgba(77, 255, 171, 0.14);
  background:
    linear-gradient(rgba(77, 255, 171, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, #151a23, #10151d);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.34);
  transition: width 240ms ease;
  overflow: visible;
}

.side-toggle,
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #88a89e;
  cursor: pointer;
  overflow: visible;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.side-toggle {
  margin-bottom: 18px;
  border-color: rgba(77, 255, 171, 0.14);
  background: rgba(77, 255, 171, 0.055);
  color: var(--green);
}

.side-nav-links {
  display: grid;
  gap: 7px;
}

.side-section-label {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: #65717b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 160ms ease;
}

.sidebar-expanded .side-section-label {
  width: auto;
  height: auto;
  margin: 9px 0 4px 24px;
  opacity: 1;
}

.side-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 50px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.side-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.side-label {
  width: 0;
  opacity: 0;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
  transition: width 210ms ease, opacity 150ms ease;
}

.sidebar-expanded .side-label {
  width: 164px;
  opacity: 1;
}

.side-link:hover,
.side-toggle:hover,
.side-link.active {
  color: var(--green);
  border-color: rgba(77, 255, 171, 0.24);
  background: rgba(77, 255, 171, 0.085);
  box-shadow: inset 3px 0 0 rgba(77, 255, 171, 0.8), 0 0 28px rgba(77, 255, 171, 0.06);
}

.side-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 4;
  width: max-content;
  max-width: 190px;
  padding: 8px 10px;
  border: 1px solid rgba(77, 255, 171, 0.2);
  border-radius: 4px;
  background: rgba(4, 16, 13, 0.97);
  color: #dff8eb;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-6px, -50%);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

body:not(.sidebar-expanded) .side-link:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.side-link::before {
  display: none !important;
  content: none !important;
}

.side-divider {
  height: 1px;
  margin: 9px 8px;
  background: linear-gradient(90deg, rgba(77, 255, 171, 0.3), transparent);
}

.start-side-link {
  color: #03110a;
  border-color: rgba(77, 255, 171, 0.8);
  background: linear-gradient(135deg, #b9ffd9, var(--green) 50%, #16c979);
  box-shadow: 0 0 30px rgba(77, 255, 171, 0.18);
}

.start-side-link:hover,
.start-side-link.active {
  color: #020b07;
  background: linear-gradient(135deg, #d0ffe5, #65ffb6 50%, #24d88a);
  box-shadow: 0 0 38px rgba(77, 255, 171, 0.3);
}

.elite-side-link {
  color: #201500;
  border-color: rgba(246, 195, 78, 0.75);
  background: linear-gradient(135deg, #ffeaa0, var(--gold) 52%, #b87918);
  box-shadow: 0 0 28px rgba(246, 195, 78, 0.18);
}

.elite-side-link:hover,
.elite-side-link.active {
  color: #160e00;
  border-color: #ffe28a;
  background: linear-gradient(135deg, #fff0b7, #ffd05f 52%, #c98920);
  box-shadow: 0 0 38px rgba(246, 195, 78, 0.3);
}

.side-progress-card {
  display: none;
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(77, 255, 171, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 0%, rgba(77, 255, 171, 0.14), transparent 32%),
    rgba(77, 255, 171, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.22);
}

.sidebar-expanded .side-progress-card {
  display: grid;
  gap: 9px;
}

.side-progress-card span {
  color: #a8bbb4;
  font-size: 12px;
  font-weight: 850;
}

.side-progress-card strong {
  color: var(--green);
  font-size: 15px;
}

.side-progress-card div {
  height: 7px;
  border-radius: 999px;
  background: rgba(142, 166, 158, 0.18);
  overflow: hidden;
}

.side-progress-card i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #f6c34e);
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.24);
}

.side-progress-card small {
  color: #d8e2dc;
  font-weight: 850;
}

.side-nav > .logout-tab {
  margin-top: 10px;
}

.site-shell {
  width: min(1540px, calc(100% - var(--sidebar-width) - 40px));
  margin-left: calc(var(--sidebar-width) + max(20px, (100vw - var(--sidebar-width) - 1540px) / 2));
  margin-right: 0;
  transition: width 240ms ease, margin-left 240ms ease;
}

.top-nav {
  left: calc(var(--sidebar-width) + max(20px, (100vw - var(--sidebar-width) - 1540px) / 2));
  width: min(1540px, calc(100% - var(--sidebar-width) - 40px));
  transform: none;
  justify-content: flex-start;
  transition: width 240ms ease, left 240ms ease;
}

body.playing .site-shell,
body[data-view="game"] .site-shell,
body[data-page="game"] .site-shell {
  width: min(1540px, calc(100% - var(--sidebar-width) - 40px));
}

body.playing .trainer-section,
body[data-view="game"] .trainer-section,
body[data-page="game"] .trainer-section {
  width: calc(100vw - var(--sidebar-width));
  padding-right: max(20px, calc((100vw - var(--sidebar-width) - 1540px) / 2));
  padding-left: max(20px, calc((100vw - var(--sidebar-width) - 1540px) / 2));
  transition: width 240ms ease, padding 240ms ease;
}

@media (max-width: 760px) {
  body,
  body.sidebar-expanded {
    --sidebar-width: 60px;
  }

  .side-nav {
    width: 60px;
    padding: 10px 5px;
  }

  body.sidebar-expanded .side-nav {
    width: min(252px, calc(100vw - 28px));
  }

  .side-icon {
    flex-basis: 48px;
    width: 48px;
  }

  .side-link::after {
    display: none;
  }

  .site-shell {
    width: calc(100% - 76px);
    margin-left: 68px;
    padding-top: 98px;
  }

  body.playing .site-shell,
  body[data-view="game"] .site-shell,
  body[data-page="game"] .site-shell {
    width: calc(100% - 76px);
  }

  body.playing .trainer-section,
  body[data-view="game"] .trainer-section,
  body[data-page="game"] .trainer-section {
    width: calc(100vw - 60px);
    padding-right: 12px;
    padding-left: 12px;
  }

  .top-nav {
    left: 68px;
    width: calc(100% - 76px);
    align-items: center;
    flex-direction: row;
  }

  .brand-icon {
    width: 46px;
    height: 46px;
  }

  .brand strong {
    font-size: 18px;
  }

  body.sidebar-expanded::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(3px);
  }
}

/* Routed shell and simulator polish */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.topbar-back,
.audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(77, 255, 171, 0.18);
  border-radius: 6px;
  background: rgba(12, 23, 29, 0.86);
  color: #dff8eb;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(77, 255, 171, 0.06);
}

.audio-toggle svg {
  width: 18px;
  height: 18px;
}

.audio-toggle.active {
  color: #06100a;
  background: linear-gradient(135deg, #b9ffd9, var(--green));
  border-color: rgba(77, 255, 171, 0.8);
}

.countdown-bar {
  position: relative;
  height: 5px;
  margin: -18px -18px 16px;
  background: rgba(143, 157, 168, 0.12);
  overflow: hidden;
}

.countdown-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #75ffd4);
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.35);
}

.countdown-bar.amber i {
  background: linear-gradient(90deg, var(--gold), #ffe08a);
  box-shadow: 0 0 18px rgba(246, 195, 78, 0.35);
}

.countdown-bar.red i {
  background: linear-gradient(90deg, var(--red), #ff9a8d);
  box-shadow: 0 0 20px rgba(255, 95, 87, 0.38);
}

.countdown-bar.pulse {
  animation: timerPulse 420ms ease-in-out infinite;
}

.scenario-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px;
}

.scenario-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(77, 255, 171, 0.14);
  border-radius: 999px;
  background: rgba(8, 17, 24, 0.78);
  color: #cfe0d8;
  font-size: 12px;
  font-weight: 900;
}

.scenario-pills svg {
  width: 14px;
  height: 14px;
}

.scenario-pills .difficulty-pill.easy {
  color: var(--green);
  border-color: rgba(77, 255, 171, 0.28);
}

.scenario-pills .difficulty-pill.medium {
  color: var(--gold);
  border-color: rgba(246, 195, 78, 0.32);
}

.scenario-pills .difficulty-pill.hard {
  color: var(--red);
  border-color: rgba(255, 95, 87, 0.32);
}

.answer-button {
  min-height: 58px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.answer-button:hover:not(:disabled) {
  border-color: rgba(77, 255, 171, 0.48);
  box-shadow: 0 0 24px rgba(77, 255, 171, 0.12);
}

.answer-button.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(246, 195, 78, 0.2), rgba(8, 25, 21, 0.72));
  box-shadow: 0 0 26px rgba(246, 195, 78, 0.12), inset 3px 0 0 var(--gold);
}

.answer-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.answer-main b {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(77, 255, 171, 0.08);
  color: var(--green);
}

.answer-button.correct .answer-main::after,
.answer-button.wrong .answer-main::after {
  margin-left: auto;
  font-size: 18px;
  font-weight: 950;
}

.answer-button.correct .answer-main::after {
  content: "✓";
  color: var(--green);
}

.answer-button.wrong .answer-main::after {
  content: "×";
  color: var(--red);
}

.answer-button.correct {
  background: linear-gradient(135deg, rgba(77, 255, 171, 0.28), rgba(8, 25, 21, 0.86));
  box-shadow: 0 0 28px rgba(77, 255, 171, 0.14);
}

.answer-button.wrong {
  background: linear-gradient(135deg, rgba(255, 95, 87, 0.26), rgba(8, 18, 20, 0.86));
  box-shadow: 0 0 28px rgba(255, 95, 87, 0.12);
}

.answer-button.dimmed {
  opacity: 0.48;
}

.answer-button.wrong-flash {
  animation: wrongFlash 360ms ease;
}

.answer-distribution-bar {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: #92aaa2;
  font-size: 11px;
  font-weight: 900;
}

.answer-distribution-bar::before {
  display: none;
}

.answer-distribution-bar b {
  font-weight: 900;
}

.answer-distribution-bar i {
  display: block;
  width: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 400ms ease;
}

.answer-submit {
  width: 100%;
  min-height: 54px;
}

.result-panel {
  animation: resultSlideUp 250ms ease both;
}

.result-next-button {
  width: auto;
  min-height: 42px;
  margin-top: 12px;
  padding: 0 16px;
}

.combo-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  padding: 9px 13px;
  border: 1px solid rgba(246, 195, 78, 0.58);
  border-radius: 999px;
  background: rgba(30, 20, 4, 0.92);
  color: #ffe7a3;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.02em;
  box-shadow: 0 0 30px rgba(246, 195, 78, 0.2);
  opacity: 0;
  transform: scale(0.5);
}

.combo-badge.show {
  animation: comboBadgeIn 620ms cubic-bezier(.2, 1.55, .4, 1) both;
}

.streak-dots {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.streak-dots span {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(77, 255, 171, 0.25);
  border-radius: 999px;
  background: rgba(143, 157, 168, 0.14);
}

.streak-dots span.filled {
  background: var(--green);
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.35);
}

.trainer-grid.shake {
  animation: gameShake 300ms ease;
}

.xp-burst {
  animation: xpBurst 700ms ease forwards;
}

.leaderboard-full {
  margin-top: 18px;
}

.leaderboard-rank-scale {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.leaderboard-rank-scale-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.leaderboard-rank-scale-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.leaderboard-rank-scale-header > strong {
  color: var(--green);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.rank-gate-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 195, 78, 0.2);
  border-radius: 10px;
  background: rgba(246, 195, 78, 0.07);
}

.rank-gate-summary b {
  flex: 0 0 auto;
  color: #ffe08a;
  font-size: 12px;
  font-weight: 950;
}

.rank-gate-summary span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.leaderboard-rank-scale-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.leaderboard-rank-scale-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid rgba(143, 157, 168, 0.14);
  border-radius: 8px;
  background: rgba(8, 14, 19, 0.58);
  opacity: 0.58;
}

.leaderboard-rank-scale-item.unlocked {
  opacity: 1;
}

.leaderboard-rank-scale-item.current {
  border-color: rgba(246, 195, 78, 0.5);
  background: rgba(246, 195, 78, 0.06);
}

.leaderboard-rank-scale-item .rank-gem {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.leaderboard-rank-scale-item strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.leaderboard-rank-scale-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 760px) {
  .leaderboard-rank-scale-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .leaderboard-rank-scale-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes timerPulse {
  50% { filter: brightness(1.45); }
}

@keyframes wrongFlash {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.35) saturate(1.4); }
}

@keyframes resultSlideUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes comboBadgeIn {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gameShake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-6px); }
  25% { transform: translateX(6px); }
  38% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  63% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
  88% { transform: translateX(-2px); }
}

/* Compact lobby refresh */
body {
  --sidebar-width: 68px;
  background: linear-gradient(180deg, #132834 0%, #10222c 44%, #0d1a22 100%);
  color: #f4fbf8;
}

body.sidebar-expanded {
  --sidebar-width: 224px;
}

body::before {
  opacity: 0.16;
  background:
    linear-gradient(rgba(114, 154, 168, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 154, 168, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}

body::after,
.hero::before,
.game-mode-showcase::before,
.hero-copy::after,
.art-scan {
  display: none;
}

.side-nav {
  padding: 12px 9px;
  border-right-color: rgba(145, 183, 193, 0.1);
  background: #162a35;
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.18);
}

.side-toggle,
.side-link {
  min-height: 44px;
  border-radius: 8px;
}

.side-toggle {
  margin-bottom: 12px;
  border-color: rgba(139, 181, 195, 0.18);
  background: rgba(36, 68, 82, 0.82);
}

.side-nav-links {
  gap: 6px;
}

.side-icon {
  flex-basis: 48px;
  width: 48px;
  height: 44px;
}

.side-icon svg {
  width: 20px;
  height: 20px;
}

.side-link:hover,
.side-toggle:hover,
.side-link.active {
  border-color: rgba(101, 255, 182, 0.22);
  background: rgba(52, 89, 104, 0.76);
  box-shadow: inset 3px 0 0 rgba(101, 255, 182, 0.82);
}

.start-side-link,
.elite-side-link {
  border-radius: 8px;
  box-shadow: none;
}

.start-side-link,
.start-side-link:hover,
.start-side-link.active {
  color: #05140d;
  border-color: rgba(101, 255, 182, 0.75);
  background: linear-gradient(135deg, #9dffd0, #37e98d);
}

.elite-side-link,
.elite-side-link:hover,
.elite-side-link.active {
  color: #1d1402;
  border-color: rgba(255, 218, 108, 0.82);
  background: linear-gradient(135deg, #ffe88b, #d79b29);
}

.site-shell {
  width: min(1420px, calc(100% - var(--sidebar-width) - 28px));
  margin-left: calc(var(--sidebar-width) + max(14px, (100vw - var(--sidebar-width) - 1420px) / 2));
  padding-top: 70px;
}

.top-nav {
  left: calc(var(--sidebar-width) + max(14px, (100vw - var(--sidebar-width) - 1420px) / 2));
  width: min(1420px, calc(100% - var(--sidebar-width) - 28px));
  min-height: 70px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(145, 183, 193, 0.1);
  background: rgba(22, 42, 53, 0.93);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 9px;
}

.brand strong {
  font-size: 26px;
  letter-spacing: -0.04em;
}

.topbar-back,
.audio-toggle {
  min-height: 40px;
  border-radius: 8px;
  border-color: rgba(145, 183, 193, 0.15);
  background: #284858;
  box-shadow: none;
}

.hero {
  min-height: auto;
  padding-top: 18px;
}

.market-tape,
.market-intel,
.info-grid.dashboard-section[data-dashboard-pages="home"] {
  display: none !important;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.8fr) minmax(520px, 1.2fr);
  min-height: 340px;
  gap: clamp(28px, 5vw, 72px);
  padding: 18px 0 24px;
  align-items: center;
}

.hero-copy {
  padding: 0;
}

.signal {
  color: #73e7ad;
  letter-spacing: 0.08em;
}

.hero-copy h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.hero-copy h1::after {
  display: none;
}

.animated-headline {
  color: #65ffb6;
}

.lead {
  max-width: 560px;
  margin: 20px 0 24px;
  color: #b7c8ca;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
}

.feature-list {
  display: none;
}

.hero-performance {
  max-width: 480px;
  margin: 22px 0 18px;
  border-color: rgba(145, 183, 193, 0.14);
}

.hero-performance div {
  padding: 12px 14px 12px 0;
}

.hero-performance div + div {
  padding-left: 14px;
  border-color: rgba(145, 183, 193, 0.12);
}

.hero-performance strong {
  color: #65ffb6;
  font-size: 22px;
}

.hero-performance span {
  color: #91a9ad;
  font-size: 10px;
}

.safe-copy {
  max-width: 560px;
  color: #81a0a7;
  font-size: 12px;
}

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

.lobby-feature-card {
  display: grid;
  grid-template-rows: minmax(185px, 1fr) auto;
  min-height: 282px;
  padding: 0;
  border: 2px solid rgba(101, 255, 182, 0.45);
  border-radius: 10px;
  background: #1a3440;
  color: #f8fffc;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lobby-feature-card:hover,
.lobby-feature-card:focus-visible {
  transform: translateY(-4px);
  border-color: #65ffb6;
  outline: none;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24), 0 0 0 4px rgba(101, 255, 182, 0.08);
}

.lobby-art {
  position: relative;
  display: block;
  min-height: 185px;
  background:
    radial-gradient(circle at 58% 40%, rgba(255, 255, 255, 0.24), transparent 0 18%, transparent 32%),
    radial-gradient(circle at 40% 55%, rgba(101, 255, 182, 0.35), transparent 0 23%, transparent 42%),
    linear-gradient(135deg, #0875d9, #053a77 58%, #072735);
}

.lobby-art::before,
.lobby-art::after {
  content: "";
  position: absolute;
  border-radius: 18px;
  transform: rotate(-12deg);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.lobby-art::before {
  width: 38%;
  height: 58%;
  left: 26%;
  top: 18%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(178, 221, 232, 0.9));
}

.lobby-art::after {
  width: 34%;
  height: 54%;
  right: 18%;
  top: 24%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(25, 55, 65, 0.98), rgba(6, 22, 30, 0.96));
}

.ranked-art {
  background:
    radial-gradient(circle at 63% 42%, rgba(255, 220, 99, 0.24), transparent 0 18%, transparent 30%),
    radial-gradient(circle at 42% 55%, rgba(101, 255, 182, 0.4), transparent 0 22%, transparent 40%),
    linear-gradient(135deg, #0fcf6e, #048e45 56%, #064133);
}

.ranked-art::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.42), transparent 0 16%, transparent 28%),
    linear-gradient(135deg, #ff6860, #a81d2e);
}

.ranked-art::after {
  width: 36%;
  height: 44%;
  right: 20%;
  top: 26%;
  transform: rotate(11deg);
}

.lobby-card-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 20px;
  background: #203d4a;
}

.lobby-card-copy small {
  display: none;
}

.lobby-card-copy strong {
  margin-right: auto;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.lobby-card-copy span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dce9e8;
  font-size: 14px;
  font-weight: 850;
}

.lobby-card-copy i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19f255;
  box-shadow: 0 0 10px rgba(25, 242, 85, 0.5);
}

.game-mode-showcase {
  margin: 0 0 40px;
  padding: 22px 0 36px;
}

.game-mode-heading {
  align-items: center;
  margin-bottom: 18px;
}

.game-mode-heading h2 {
  font-size: clamp(26px, 2.7vw, 38px);
  letter-spacing: -0.035em;
}

.game-mode-heading p:last-child {
  color: #9db5b9;
  font-size: 14px;
}

.show-all-modes {
  min-height: 42px;
  border-radius: 8px;
  border-color: rgba(145, 183, 193, 0.2);
  background: #284858;
  color: #e8f3f0;
}

.lobby-search {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  margin-bottom: 24px;
  padding: 0 20px;
  border: 1px solid rgba(145, 183, 193, 0.24);
  border-radius: 10px;
  background: #10242e;
  color: #96b0b7;
  font-size: 18px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lobby-search svg {
  width: 24px;
  height: 24px;
}

.game-mode-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 16px;
}

.game-mode-card,
.training-game-grid .game-mode-card {
  min-height: 248px;
  border: 0;
  border-radius: 10px;
  background: #1c3844;
  box-shadow: none;
}

.game-mode-card:hover,
.game-mode-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.game-art {
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #102832;
}

.game-art::after {
  background: linear-gradient(180deg, transparent 58%, rgba(28, 56, 68, 0.85) 100%);
}

.game-art img {
  animation: none;
  object-position: center;
}

.game-copy {
  gap: 4px;
  padding: 12px 14px 8px;
}

.game-copy small {
  font-size: 9px;
}

.game-copy strong {
  font-size: 18px;
  letter-spacing: -0.025em;
}

.game-copy > span {
  display: none;
}

.game-footer {
  width: calc(100% - 28px);
  margin: auto 14px 0;
  padding: 9px 0 13px;
  border-top-color: rgba(145, 183, 193, 0.12);
}

.game-footer b {
  color: #bdd0d1;
  font-size: 12px;
}

.game-footer em {
  display: none;
}

.other-sections[data-view="home"] {
  display: none !important;
}

.panel,
.replay-card,
.game-panel,
.mode-card,
.elite-panel {
  border-radius: 10px;
  background: #152d38;
  box-shadow: none;
}

.panel::after,
.mode-card::after,
.game-panel::after,
.replay-card::after {
  display: none;
}

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

  .lobby-feature-cards {
    max-width: 860px;
  }

  .game-mode-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 92px;
  }

  .hero-grid {
    padding-top: 20px;
  }

  .lobby-feature-cards {
    grid-template-columns: 1fr;
  }

  .lobby-feature-card {
    min-height: 260px;
  }

  .lobby-art {
    min-height: 170px;
  }

  .game-mode-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .game-mode-card,
  .training-game-grid .game-mode-card {
    min-height: 210px;
  }
}

/* Launch polish: cleaner logo, better lobby imagery, and wrong-answer learning flow */
.top-nav .brand {
  min-height: 52px;
  gap: 12px;
}

.top-nav .brand-icon,
.brand-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.brand-icon span {
  bottom: 9px;
  width: 7px;
  border-radius: 2px;
}

.brand-icon span:nth-child(1) {
  left: 10px;
  height: 16px;
}

.brand-icon span:nth-child(2) {
  left: 21px;
  height: 25px;
}

.brand-icon span:nth-child(3) {
  left: 32px;
  height: 34px;
}

.top-nav .brand strong {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.lobby-art {
  min-height: 185px;
  background: #102832;
  overflow: hidden;
}

.lobby-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 185px;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.01);
  transition: transform 240ms ease, filter 240ms ease;
}

.lobby-art::before {
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  border-radius: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(28, 56, 68, 0.82) 100%),
    radial-gradient(circle at 18% 18%, rgba(101, 255, 182, 0.28), transparent 0 22%, transparent 46%);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.lobby-art::after,
.ranked-art::after {
  display: none;
}

.ranked-art::before {
  border-radius: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(28, 56, 68, 0.82) 100%),
    radial-gradient(circle at 18% 18%, rgba(101, 255, 182, 0.28), transparent 0 22%, transparent 46%);
}

.lobby-feature-card:hover .lobby-art img,
.lobby-feature-card:focus-visible .lobby-art img {
  transform: scale(1.055);
  filter: saturate(1.16) contrast(1.1);
}

.learning-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 22px;
}

.learning-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 14, 0.78);
  backdrop-filter: blur(14px);
}

.learning-card {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 36px));
  min-height: min(680px, calc(100vh - 36px));
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(88, 255, 178, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(13, 35, 42, 0.98), rgba(7, 17, 23, 0.98)),
    #0b151b;
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.58), 0 0 80px rgba(57, 255, 160, 0.13);
  animation: lesson-pop 260ms cubic-bezier(.2, .9, .2, 1);
  overflow: hidden;
}

.learning-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(88, 255, 178, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 255, 178, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, black, transparent 92%);
  pointer-events: none;
}

.learning-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(160, 188, 190, 0.22);
  border-radius: 12px;
  background: rgba(19, 39, 47, 0.95);
  color: #f7fffb;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.learning-close:hover,
.learning-close:focus-visible {
  border-color: rgba(88, 255, 178, 0.65);
  box-shadow: 0 0 0 4px rgba(88, 255, 178, 0.1);
  outline: none;
}

.learning-rail {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #54ffaf;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learning-rail span {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 36px;
  border: 1px solid rgba(88, 255, 178, 0.36);
  border-radius: 999px;
  background: rgba(88, 255, 178, 0.08);
}

.learning-visual {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(88, 255, 178, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 40% 35%, rgba(88, 255, 178, 0.12), transparent 0 32%),
    linear-gradient(180deg, rgba(13, 39, 47, 0.92), rgba(5, 16, 20, 0.96));
  overflow: hidden;
}

.learning-chart {
  position: absolute;
  inset: 28px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(168, 195, 195, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 195, 195, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}

.learn-zone,
.learn-vwap,
.learn-candle,
.learn-ping {
  position: absolute;
  display: block;
}

.learn-zone {
  left: 0;
  right: 0;
  height: 50px;
  border-radius: 8px;
}

.learn-zone.upper {
  top: 42px;
  background: rgba(255, 89, 89, 0.14);
  border: 1px solid rgba(255, 89, 89, 0.25);
}

.learn-zone.lower {
  bottom: 66px;
  background: rgba(88, 255, 178, 0.13);
  border: 1px solid rgba(88, 255, 178, 0.25);
}

.learn-vwap {
  left: 4%;
  right: 4%;
  top: 52%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99, 142, 255, 0.92), transparent);
  transform: rotate(-8deg);
}

.learn-candle {
  width: 12px;
  border-radius: 4px;
  background: #54ffaf;
  box-shadow: 0 0 18px rgba(84, 255, 175, 0.24);
  animation: candle-step 1700ms ease-in-out infinite;
}

.learn-candle::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -16px;
  width: 2px;
  height: calc(100% + 32px);
  border-radius: 2px;
  background: inherit;
  opacity: 0.75;
}

.learn-candle.c1 { left: 14%; top: 54%; height: 54px; animation-delay: 0ms; }
.learn-candle.c2 { left: 29%; top: 38%; height: 72px; background: #54ffaf; animation-delay: 100ms; }
.learn-candle.c3 { left: 45%; top: 24%; height: 96px; background: #ff6262; animation-delay: 200ms; }
.learn-candle.c4 { left: 60%; top: 39%; height: 74px; background: #ff6262; animation-delay: 300ms; }
.learn-candle.c5 { left: 76%; top: 57%; height: 60px; background: #54ffaf; animation-delay: 400ms; }

.learn-ping {
  left: 58%;
  top: 42%;
  width: 20px;
  height: 20px;
  border: 3px solid #ffdf68;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 223, 104, 0.5);
  animation: clue-ping 1200ms ease-out infinite;
}

.learning-visual[data-visual="risk"] .learn-ping,
.learning-visual[data-visual="locked"] .learn-ping {
  border-color: #ff6262;
}

.learning-visual[data-visual="distribution"] .learn-ping,
.learning-visual[data-visual="coach"] .learn-ping,
.learning-visual[data-visual="streak"] .learn-ping {
  border-color: #54ffaf;
}

.learning-visual[data-scene="vwap"] .learn-vwap {
  height: 4px;
  background: linear-gradient(90deg, transparent, #6f9cff, #54ffaf, transparent);
  transform: rotate(-4deg);
}

.learning-visual[data-scene="vwap"] .learn-ping {
  left: 50%;
  top: 50%;
  border-color: #6f9cff;
}

.learning-visual[data-scene="sweep"] .learn-zone.upper {
  height: 68px;
  border-color: rgba(255, 223, 104, 0.44);
  background: rgba(255, 223, 104, 0.11);
}

.learning-visual[data-scene="sweep"] .learn-candle.c3 {
  top: 12%;
  height: 130px;
}

.learning-visual[data-scene="sweep"] .learn-ping {
  left: 46%;
  top: 22%;
  border-color: #ffdf68;
}

.learning-visual[data-scene="fakeout"] .learn-zone.upper {
  border-color: rgba(255, 98, 98, 0.4);
  background: rgba(255, 98, 98, 0.16);
}

.learning-visual[data-scene="fakeout"] .learn-candle.c4,
.learning-visual[data-scene="fakeout"] .learn-candle.c5 {
  background: #ff6262;
}

.learning-visual[data-scene="fakeout"] .learn-ping {
  left: 62%;
  top: 37%;
  border-color: #ff6262;
}

.learning-visual[data-scene="breakout"] .learn-candle.c1,
.learning-visual[data-scene="breakout"] .learn-candle.c2,
.learning-visual[data-scene="breakout"] .learn-candle.c3,
.learning-visual[data-scene="breakout"] .learn-candle.c4,
.learning-visual[data-scene="breakout"] .learn-candle.c5 {
  background: #54ffaf;
}

.learning-visual[data-scene="breakout"] .learn-candle.c5 {
  top: 18%;
  height: 140px;
}

.learning-visual[data-scene="breakout"] .learn-ping {
  left: 76%;
  top: 22%;
  border-color: #54ffaf;
}

.learning-visual[data-scene="range"] .learn-zone.upper,
.learning-visual[data-scene="range"] .learn-zone.lower {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.learning-visual[data-scene="range"] .learn-vwap {
  transform: rotate(0deg);
  opacity: 0.75;
}

.learning-visual[data-scene="range"] .learn-ping {
  left: 46%;
  top: 50%;
  border-color: #ffdf68;
}

.learning-scene {
  position: absolute;
  inset: 28px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(rgba(168, 195, 195, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 195, 195, 0.045) 1px, transparent 1px),
    rgba(4, 12, 17, 0.45);
  background-size: 34px 34px;
  overflow: hidden;
}

.learning-scene::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 255, 175, 0.14), transparent 62%);
  animation: learn-scene-pulse 2400ms ease-in-out infinite;
}

.learn-gauge,
.learn-calendar,
.learn-lock-card,
.learn-trade-ticket,
.learn-no-trade-zone,
.learn-clue-card,
.learn-thesis-stack,
.learn-hidden-date,
.learn-versus,
.learn-liquidity-map,
.learn-crash-candles,
.learn-combo-token,
.learn-boss-health,
.learn-boss-face,
.learn-rule-shield {
  position: relative;
  z-index: 1;
}

.learn-liquidity-map {
  width: min(320px, 84%);
  height: 240px;
}

.learn-liquidity-map .pool {
  position: absolute;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  background: rgba(84, 255, 175, 0.14);
  border: 1px solid rgba(84, 255, 175, 0.38);
}

.learn-liquidity-map .pool.high {
  right: 10px;
  top: 24px;
}

.learn-liquidity-map .pool.low {
  left: 8px;
  bottom: 26px;
}

.learn-liquidity-map .sweep-path {
  position: absolute;
  left: 16%;
  top: 50%;
  width: 70%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffdf68, #54ffaf);
  transform: rotate(-18deg);
  animation: sweep-beam 1500ms ease-in-out infinite;
}

.learn-liquidity-map b {
  position: absolute;
  left: 52%;
  top: 38%;
  width: 34px;
  aspect-ratio: 1;
  border: 4px solid #ffdf68;
  border-radius: 50%;
  animation: clue-ping 1100ms ease-out infinite;
}

.learn-crash-candles {
  display: flex;
  align-items: end;
  gap: 14px;
  height: 230px;
}

.learn-crash-candles span {
  display: block;
  width: 28px;
  border-radius: 12px;
  background: #54ffaf;
  animation: arcade-candle-in 820ms cubic-bezier(.2, 1.35, .28, 1) infinite alternate;
}

.learn-crash-candles span:nth-child(1) { height: 80px; animation-delay: 0ms; }
.learn-crash-candles span:nth-child(2) { height: 138px; background: #54ffaf; animation-delay: 100ms; }
.learn-crash-candles span:nth-child(3) { height: 58px; background: #ff6262; animation-delay: 200ms; }
.learn-crash-candles span:nth-child(4) { height: 162px; background: #ffdf68; animation-delay: 300ms; }
.learn-crash-candles span:nth-child(5) { height: 98px; background: #ff6262; animation-delay: 400ms; }

.learn-combo-token {
  position: absolute;
  right: 42px;
  top: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #0d121b;
  background: #ffdf68;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  animation: combo-pop 1400ms ease-in-out infinite;
}

.learn-boss-health {
  position: absolute;
  left: 36px;
  right: 36px;
  top: 34px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.learn-boss-health i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6262, #ffdf68);
}

.learn-boss-face {
  width: 168px;
  aspect-ratio: 1;
  border-radius: 42% 42% 35% 35%;
  background: linear-gradient(180deg, #5b234f, #101722);
  border: 2px solid rgba(255, 98, 98, 0.45);
  animation: boss-bob 1600ms ease-in-out infinite;
}

.learn-boss-face b,
.learn-boss-face span {
  position: absolute;
  top: 58px;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff6262;
}

.learn-boss-face b { left: 42px; }
.learn-boss-face span { right: 42px; }

.learn-boss-face em {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 44px;
  height: 9px;
  border-radius: 999px;
  background: #ffdf68;
}

.learn-rule-shield {
  position: absolute;
  right: 44px;
  bottom: 44px;
  padding: 13px 16px;
  border-radius: 16px;
  color: #0d121b;
  background: #54ffaf;
  font-size: 13px;
  font-weight: 950;
  animation: combo-pop 1800ms ease-in-out infinite;
}

.learn-gauge {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 3px solid rgba(84, 255, 175, 0.46);
  border-radius: 50%;
  background: rgba(84, 255, 175, 0.09);
}

.learn-gauge b {
  color: #f6fffb;
  font-size: 46px;
  font-weight: 950;
}

.learn-gauge span {
  margin-top: -42px;
  color: rgba(225, 242, 235, 0.6);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learn-gauge i {
  position: absolute;
  bottom: 28px;
  width: 3px;
  height: 74px;
  border-radius: 999px;
  background: #ffdf68;
  transform-origin: bottom;
  animation: learn-needle 1800ms ease-in-out infinite;
}

.learn-risk-bars {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  gap: 8px;
  align-items: end;
  z-index: 1;
}

.learn-risk-bars span {
  width: 18px;
  border-radius: 8px;
  background: #54ffaf;
  animation: risk-bar-rise 1300ms ease-in-out infinite;
}

.learn-risk-bars span:nth-child(1) { height: 46px; }
.learn-risk-bars span:nth-child(2) { height: 80px; animation-delay: 120ms; }
.learn-risk-bars span:nth-child(3) { height: 116px; background: #ff6262; animation-delay: 240ms; }

.learn-limit-line {
  position: absolute;
  left: 34px;
  right: 34px;
  top: 72px;
  z-index: 1;
}

.learn-limit-line em {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #54ffaf, #ffdf68, #ff6262);
}

.learn-limit-line strong {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.learn-calendar {
  display: grid;
  gap: 10px;
  width: min(310px, 78%);
  padding: 24px;
  border: 1px solid rgba(122, 215, 255, 0.34);
  border-radius: 20px;
  background: rgba(23, 107, 184, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.learn-calendar span {
  color: #7ad7ff;
  font-size: 13px;
  font-weight: 950;
}

.learn-calendar b {
  color: #fff;
  font-size: 72px;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.learn-calendar em {
  width: max-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 98, 98, 0.16);
  color: #ffb0ac;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.learn-alert-ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 3px solid rgba(255, 98, 98, 0.54);
  border-radius: 50%;
  animation: clue-ping 1200ms ease-out infinite;
}

.learn-impact-chips {
  position: absolute;
  right: 34px;
  bottom: 34px;
  display: flex;
  gap: 8px;
  z-index: 1;
}

.learn-impact-chips span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(122, 215, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.learn-rule-path {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 44px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.learn-rule-path span {
  display: grid;
  min-height: 82px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.learn-rule-path span.complete {
  border-color: rgba(84, 255, 175, 0.48);
  color: #54ffaf;
}

.learn-rule-path span.danger {
  border-color: rgba(255, 98, 98, 0.48);
  color: #ff8f8f;
}

.learn-lock-card {
  display: grid;
  place-items: center;
  gap: 12px;
  width: 260px;
  height: 210px;
  border: 1px solid rgba(255, 93, 115, 0.34);
  border-radius: 22px;
  background: rgba(165, 31, 61, 0.18);
}

.learn-lock-card b,
.learn-lock-card em {
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.learn-lock-card i {
  width: 72px;
  height: 72px;
  border: 10px solid #ff5d73;
  border-top-color: transparent;
  border-radius: 16px;
  animation: learn-lock-bounce 1600ms ease-in-out infinite;
}

.learn-rr-ladder {
  position: relative;
  z-index: 1;
  width: min(420px, 84%);
  display: grid;
  gap: 28px;
}

.learn-rr-ladder span {
  padding: 12px 16px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.learn-rr-ladder .target { background: rgba(84, 255, 175, 0.22); border: 1px solid rgba(84, 255, 175, 0.44); }
.learn-rr-ladder .entry { background: rgba(111, 156, 255, 0.18); border: 1px solid rgba(111, 156, 255, 0.42); }
.learn-rr-ladder .stop { background: rgba(255, 98, 98, 0.18); border: 1px solid rgba(255, 98, 98, 0.42); }

.learn-trade-ticket {
  position: absolute;
  right: 42px;
  bottom: 42px;
  display: grid;
  gap: 4px;
  z-index: 1;
  padding: 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
}

.learn-trade-ticket b,
.learn-trade-ticket em {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.learn-trade-ticket strong {
  color: #54ffaf;
  font-size: 34px;
  font-weight: 950;
}

.learn-stoplight {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.34);
}

.learn-stoplight span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.learn-stoplight span:nth-child(1) {
  background: #ff6262;
  animation: learn-blink 1300ms ease-in-out infinite;
}

.learn-no-trade-zone {
  position: absolute;
  right: 42px;
  z-index: 1;
  padding: 18px 26px;
  border: 2px solid rgba(255, 98, 98, 0.48);
  border-radius: 999px;
  color: #ff8f8f;
  font-size: 34px;
  font-weight: 950;
}

.patience-scene p {
  position: absolute;
  bottom: 38px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 950;
}

.learn-magnifier {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  border: 10px solid rgba(84, 255, 175, 0.78);
  border-radius: 50%;
  animation: learn-scan 2200ms ease-in-out infinite;
}

.learn-magnifier::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -36px;
  width: 78px;
  height: 14px;
  border-radius: 999px;
  background: rgba(84, 255, 175, 0.78);
  transform: rotate(42deg);
}

.learn-clue-card {
  position: absolute;
  inset: auto 38px 42px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.learn-clue-card span {
  padding: 12px;
  border-radius: 12px;
  background: rgba(84, 255, 175, 0.1);
  color: #54ffaf;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}

.learn-thesis-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(360px, 82%);
}

.learn-thesis-stack span {
  padding: 16px;
  border: 1px solid rgba(84, 255, 175, 0.22);
  border-radius: 14px;
  background: rgba(84, 255, 175, 0.08);
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  animation: thesis-pop 1800ms ease-in-out infinite;
}

.learn-thesis-stack span:nth-child(2) { animation-delay: 120ms; }
.learn-thesis-stack span:nth-child(3) { animation-delay: 240ms; }
.learn-thesis-stack span:nth-child(4) { animation-delay: 360ms; }

.learn-health-bar {
  position: relative;
  z-index: 1;
  width: min(420px, 84%);
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.learn-health-bar i {
  display: block;
  height: 100%;
  width: 72%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ffaf, #ffdf68);
  animation: health-dip 2200ms ease-in-out infinite;
}

.learn-survival-steps {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
}

.learn-survival-steps span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(84, 255, 175, 0.18);
  border: 1px solid rgba(84, 255, 175, 0.32);
}

.survival-scene b {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 34px;
  font-weight: 950;
}

.learn-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  width: min(460px, 86%);
}

.learn-versus span,
.learn-versus b {
  display: grid;
  min-height: 96px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.learn-versus b {
  min-height: 62px;
  color: #ffdf68;
  background: rgba(255, 223, 104, 0.12);
}

.learn-trophy {
  position: absolute;
  bottom: 42px;
  width: 82px;
  height: 82px;
  z-index: 1;
  border-radius: 22px 22px 34px 34px;
  background: linear-gradient(180deg, #ffdf68, #f2a93b);
  animation: trophy-hop 1700ms ease-in-out infinite;
}

.learn-calendar-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.26);
}

.learn-calendar-grid b {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 28px;
  font-weight: 950;
}

.learn-calendar-grid span {
  height: 54px;
  border-radius: 12px;
  background: rgba(84, 255, 175, 0.14);
}

.learn-calendar-grid span:nth-child(5) {
  background: #54ffaf;
  animation: calendar-pop 1500ms ease-in-out infinite;
}

.daily-scene em {
  position: absolute;
  bottom: 42px;
  z-index: 1;
  color: #ffdf68;
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
}

.learn-hidden-date {
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.learn-blind-candles {
  position: absolute;
  inset: auto 44px 54px;
  display: flex;
  justify-content: center;
  gap: 18px;
  z-index: 1;
}

.learn-blind-candles span {
  width: 18px;
  border-radius: 8px;
  background: #54ffaf;
  animation: candle-step 1700ms ease-in-out infinite;
}

.learn-blind-candles span:nth-child(1) { height: 64px; }
.learn-blind-candles span:nth-child(2) { height: 94px; background: #ff6262; animation-delay: 120ms; }
.learn-blind-candles span:nth-child(3) { height: 76px; animation-delay: 240ms; }
.learn-blind-candles span:nth-child(4) { height: 118px; animation-delay: 360ms; }

.learning-slide {
  align-self: center;
  position: relative;
  z-index: 1;
  padding: 12px 18px 12px 0;
}

.learning-slide h3 {
  margin: 8px 0 16px;
  color: #f6fffb;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.learning-slide > p:not(.signal) {
  color: #b2c4c4;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  font-weight: 700;
}

.learning-extra {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-height: 240px;
  overflow: auto;
  padding-right: 4px;
}

.learning-option,
.learning-dist-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(160, 188, 190, 0.13);
  border-radius: 12px;
  background: rgba(7, 18, 23, 0.74);
}

.learning-option.correct {
  border-color: rgba(88, 255, 178, 0.36);
  background: rgba(88, 255, 178, 0.08);
}

.learning-option.selected:not(.correct) {
  border-color: rgba(255, 98, 98, 0.4);
  background: rgba(255, 98, 98, 0.08);
}

.learning-option > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(160, 188, 190, 0.12);
  color: #a8b8b8;
  font-weight: 1000;
}

.learning-option.correct > span {
  background: #54ffaf;
  color: #061015;
}

.learning-option.selected:not(.correct) > span {
  background: #ff6262;
  color: #fff;
}

.learning-option strong {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  color: #f6fffb;
  font-size: 15px;
}

.learning-option small {
  color: #8ca1a2;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.learning-option p {
  margin: 5px 0 0;
  color: #aebfc0;
  font-size: 13px;
  line-height: 1.45;
}

.learning-dist-row {
  display: block;
}

.learning-dist-row strong {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #f6fffb;
  font-size: 14px;
}

.learning-dist-row i {
  display: block;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(160, 188, 190, 0.16);
  overflow: hidden;
}

.learning-dist-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #768e96, #b5c5c5);
  animation: dist-grow 420ms ease both;
}

.learning-dist-row.correct em {
  background: linear-gradient(90deg, #54ffaf, #b9f2d8);
}

.learning-dist-row.selected:not(.correct) em {
  background: linear-gradient(90deg, #ff6262, #ffcf6a);
}

.learning-controls {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 130px 1fr 170px;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.learning-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.learning-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(160, 188, 190, 0.28);
  cursor: pointer;
}

.learning-dots button.active {
  width: 28px;
  background: #54ffaf;
  box-shadow: 0 0 18px rgba(84, 255, 175, 0.35);
}

body.learning-open {
  overflow: hidden;
}

@keyframes lesson-pop {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes candle-step {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes clue-ping {
  to {
    box-shadow: 0 0 0 24px rgba(255, 223, 104, 0);
  }
}

@keyframes dist-grow {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes learn-scene-pulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes learn-needle {
  0%, 100% {
    transform: rotate(-28deg);
  }
  50% {
    transform: rotate(22deg);
  }
}

@keyframes risk-bar-rise {
  0%, 100% {
    transform: scaleY(0.8);
    transform-origin: bottom;
  }
  50% {
    transform: scaleY(1.08);
    transform-origin: bottom;
  }
}

@keyframes learn-lock-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-4deg);
  }
}

@keyframes learn-blink {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes learn-scan {
  0%, 100% {
    transform: translate(-54px, -22px);
  }
  50% {
    transform: translate(62px, 28px);
  }
}

@keyframes thesis-pop {
  0%, 100% {
    transform: translateX(0);
    border-color: rgba(84, 255, 175, 0.22);
  }
  50% {
    transform: translateX(12px);
    border-color: rgba(84, 255, 175, 0.52);
  }
}

@keyframes health-dip {
  0%, 100% {
    width: 72%;
  }
  50% {
    width: 48%;
  }
}

@keyframes trophy-hop {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

@keyframes calendar-pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@media (max-width: 860px) {
  .learning-card {
    grid-template-columns: 1fr;
    min-height: auto;
    max-height: calc(100vh - 28px);
    overflow: auto;
    padding: 20px;
  }

  .learning-visual {
    min-height: 230px;
  }

  .learning-slide {
    padding-right: 0;
  }

  .learning-slide h3 {
    font-size: 36px;
  }

  .learning-controls {
    grid-template-columns: 1fr;
  }
}

/* Plan system, search, bookmarks, and assistant */
.free-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px solid rgba(244, 98, 42, 0.32);
  border-radius: 10px;
  background: rgba(67, 43, 21, 0.78);
  color: #ffd89b;
  font-size: 13px;
  font-weight: 850;
}

.beta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(246, 195, 78, 0.34);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(246, 195, 78, 0.16), rgba(86, 214, 109, 0.06)), #111912;
  color: #ffe6a6;
  font-size: 13px;
  font-weight: 850;
}

.beta-banner button {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(246, 195, 78, 0.16);
  color: #ffe7a8;
  font-weight: 950;
  cursor: pointer;
}

.beta-banner button:last-child {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.feedback-card form {
  display: grid;
  gap: 12px;
}

.feedback-card label {
  display: grid;
  gap: 7px;
  color: #9db5b9;
  font-size: 12px;
  font-weight: 850;
}

.feedback-card select,
.feedback-card textarea {
  width: 100%;
  border: 1px solid rgba(145, 183, 193, 0.22);
  border-radius: 8px;
  background: #081119;
  color: #f5fffb;
  padding: 12px;
  font: inherit;
}

.free-plan-banner.used-up {
  border-color: rgba(228, 70, 70, 0.42);
  background: rgba(68, 24, 24, 0.82);
  color: #ffd0d0;
}

.free-plan-upgrade {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  background: #56d66d;
  color: #071015;
  font-weight: 950;
  cursor: pointer;
}

.lobby-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5fffb;
  font: inherit;
}

.lobby-search input::placeholder {
  color: #96b0b7;
}

.game-mode-card.search-hidden {
  display: none;
}

.game-mode-card.locked-mode::before {
  content: "Locked";
}

.game-mode-card.free-locked::before {
  content: "Free plays used";
}

.game-mode-card.elite-early-access::before {
  content: "Early Access";
  background: linear-gradient(135deg, #ffd86b, #9b6b05);
  color: #090d10;
}

.bookmark-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(145, 183, 193, 0.22);
  border-radius: 10px;
  background: rgba(13, 24, 32, 0.9);
  color: #9db5b9;
  cursor: pointer;
}

.bookmark-button:hover,
.bookmark-button.saved {
  border-color: rgba(86, 214, 109, 0.65);
  color: #56d66d;
  box-shadow: 0 0 18px rgba(86, 214, 109, 0.14);
}

.plan-tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 8px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}

.plan-free {
  background: rgba(145, 158, 166, 0.14);
  color: #c0c8ca;
}

.plan-player {
  background: rgba(72, 143, 255, 0.16);
  color: #82b7ff;
}

.plan-coach {
  background: rgba(160, 107, 255, 0.18);
  color: #c6a5ff;
}

.plan-elite {
  background: linear-gradient(135deg, #ffdc73, #a87009);
  color: #0a0e11;
  box-shadow: 0 0 22px rgba(255, 210, 84, 0.3);
}

.digest-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  margin: 14px 0;
  border: 1px solid rgba(145, 183, 193, 0.16);
  border-radius: 10px;
  background: rgba(12, 25, 33, 0.72);
}

.digest-toggle strong,
.digest-toggle small {
  display: block;
}

.digest-toggle small {
  color: #91a9ad;
  font-size: 12px;
}

.digest-toggle.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.upgrade-list {
  display: grid;
  gap: 6px;
}

.leader-row.plan-elite .gainer-name {
  color: #ffd86b;
  text-shadow: 0 0 16px rgba(255, 216, 107, 0.28);
}

.leader-row.plan-coach .gainer-name {
  color: #c6a5ff;
}

.assistant-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

.assistant-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #56d66d;
  color: #071015;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 0 28px rgba(86, 214, 109, 0.26);
  cursor: pointer;
}

.assistant-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 11px;
  height: 11px;
  border: 2px solid #0e1117;
  border-radius: 50%;
  background: #e44646;
}

.assistant-panel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 340px;
  height: 480px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid rgba(86, 214, 109, 0.28);
  border-radius: 14px;
  background: #151a23;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.assistant-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(145, 183, 193, 0.12);
  background: #1a2030;
}

.assistant-panel header strong {
  display: block;
  color: #f7fffb;
}

.assistant-panel header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #91f7a4;
  font-size: 12px;
  font-weight: 800;
}

.assistant-panel header i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56d66d;
  animation: pulse-dot 1.2s ease-in-out infinite;
}

.assistant-panel header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.assistant-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow: auto;
}

.assistant-bubble {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 12px;
  color: #e9f5f2;
  background: #1f2735;
  line-height: 1.4;
  font-size: 13px;
  animation: message-in 200ms ease both;
}

.assistant-bubble.user {
  align-self: flex-end;
  background: rgba(86, 214, 109, 0.2);
  color: #dfffe5;
}

.assistant-bubble.assistant {
  align-self: flex-start;
}

.assistant-bubble.typing {
  display: flex;
  gap: 5px;
  align-items: center;
}

.assistant-bubble.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #56d66d;
  animation: pulse-dot 700ms ease-in-out infinite;
}

.assistant-bubble.typing i:nth-child(2) { animation-delay: 120ms; }
.assistant-bubble.typing i:nth-child(3) { animation-delay: 240ms; }

.assistant-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(145, 183, 193, 0.12);
}

.assistant-form input {
  min-width: 0;
  border: 1px solid rgba(145, 183, 193, 0.16);
  border-radius: 10px;
  background: #0e1117;
  color: #f7fffb;
  padding: 10px;
}

.assistant-form button {
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: #56d66d;
  color: #071015;
  font-weight: 950;
}

.topbar-freeze-bank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(145, 183, 193, 0.14);
  border-radius: 999px;
  background: rgba(14, 17, 23, 0.66);
}

.topbar-freeze-bank span {
  color: #52616a;
  font-size: 13px;
}

.topbar-freeze-bank span.active {
  color: #9eeaff;
  text-shadow: 0 0 14px rgba(158, 234, 255, 0.45);
}

.topbar-freeze-bank.locked {
  opacity: 0.55;
}

.elite-insight-grid {
  display: grid;
  gap: 10px;
}

.elite-insight-grid > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 8px;
  background: rgba(14, 17, 23, 0.42);
}

.elite-insight-grid span {
  color: #9eb5b0;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.elite-insight-grid strong {
  color: #f5fff8;
  font-size: 18px;
}

.elite-trend-line {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 46px;
}

.elite-trend-line i {
  width: 100%;
  min-width: 8px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #56f7a6, #2dcf63);
  box-shadow: 0 0 18px rgba(86, 214, 109, 0.22);
  animation: trend-grow 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: bottom;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 10px;
}

.google-auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(145, 183, 193, 0.18);
  border-radius: 8px;
  background: #253545;
  color: #f5fff8;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.google-auth-button.full {
  width: 100%;
  margin: 4px 0 12px;
}

.google-auth-button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #1a73e8;
  font-weight: 1000;
}

.social-proof {
  color: #a7bbb8;
  font-weight: 800;
}

.social-proof b {
  color: #56d66d;
}

.onboarding-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px 220px auto;
  gap: 14px;
  align-items: end;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(86, 214, 109, 0.16);
  border-radius: 10px;
  background: rgba(20, 34, 42, 0.88);
}

.onboarding-strip h2 {
  margin: 4px 0 0;
  font-size: clamp(24px, 3vw, 42px);
}

.onboarding-strip label,
.billing-toggle {
  color: #9eb5b0;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
}

.onboarding-strip select {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(145, 183, 193, 0.18);
  border-radius: 8px;
  background: #0e1117;
  color: #f7fffb;
  font-weight: 900;
}

.billing-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid rgba(145, 183, 193, 0.16);
  border-radius: 999px;
  background: rgba(14, 17, 23, 0.72);
}

.billing-option {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  background: transparent;
  color: #9eb5b0;
  font-weight: 950;
  cursor: pointer;
}

.billing-option.active {
  background: #56d66d;
  color: #071015;
}

.billing-option span,
.popular-badge {
  margin-left: 6px;
  font-size: 11px;
}

.popular-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4622a;
  color: #160804;
}

.plan-guarantee {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 8px;
  background: rgba(86, 214, 109, 0.08);
  color: #dfffe5;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7e928e;
  font-weight: 900;
  margin: 4px 0 10px;
}

.divider-text::before,
.divider-text::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(145, 183, 193, 0.16);
}

.growth-section {
  display: none;
}

.growth-section.active-view {
  display: block;
}

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

.share-card-preview {
  background: radial-gradient(circle at 20% 0%, rgba(86, 214, 109, 0.16), transparent 40%), #1a2030;
}

.season-badge,
.referral-code {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244, 98, 42, 0.14);
  color: #ffb28f;
  font-weight: 950;
}

.referral-code {
  margin: 12px 0;
  letter-spacing: 0.12em;
  background: rgba(86, 214, 109, 0.1);
  color: #56d66d;
}

.discord-link {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}

@keyframes trend-grow {
  from { transform: scaleY(0.12); opacity: 0.45; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes pulse-dot {
  50% { opacity: 0.35; transform: scale(0.82); }
}

@keyframes message-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .assistant-widget {
    inset: auto 12px 12px auto;
  }

  .assistant-panel {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
  }
}

@media (max-width: 900px) {
  .onboarding-strip,
  .growth-grid {
    grid-template-columns: 1fr;
  }

  .plan-guarantee {
    flex-direction: column;
  }
}

/* Launch polish pass: simpler shell, clearer hook, and tighter lobby. */
:root { --sidebar-width: 236px; }

.side-nav {
  width: var(--sidebar-width);
  padding: 18px 12px;
  background-color: #151a23;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 30px 30px;
}

.side-toggle { display: none; }

.side-label,
.side-section-label {
  width: auto;
  height: auto;
  opacity: 1;
}

.side-label {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
}

.side-section-label {
  margin: 12px 0 4px 22px;
  color: rgba(255, 255, 255, 0.32);
}

.side-link,
.start-side-link,
.elite-side-link,
.start-side-link:hover,
.start-side-link.active,
.elite-side-link:hover,
.elite-side-link.active {
  color: #9eb0ac;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.side-link:hover,
.side-link.active {
  color: #fff;
  border-color: rgba(86, 214, 109, 0.16);
  background: rgba(86, 214, 109, 0.08);
  box-shadow: inset 3px 0 0 #56d66d;
}

.elite-side-link .side-icon { color: #f6c34e; }

.subscriber-nav { display: none; }
body.has-paid-plan .subscriber-nav { display: flex; }
body.has-paid-plan .side-section-label.subscriber-nav,
body.has-paid-plan .side-divider.subscriber-nav { display: block; }

.side-progress-card {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding: 16px 4px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.side-progress-card small {
  text-decoration: underline;
  text-decoration-color: rgba(86, 214, 109, 0.65);
  cursor: pointer;
}

.site-shell {
  width: min(1440px, calc(100% - var(--sidebar-width) - 32px));
  margin-left: calc(var(--sidebar-width) + 16px);
}

.top-nav {
  left: calc(var(--sidebar-width) + 16px);
  width: min(1440px, calc(100% - var(--sidebar-width) - 32px));
}

.hero {
  min-height: 92vh;
  padding-top: 20px;
  background: #0a0d12;
}

.hero-grid {
  align-items: center;
  grid-template-columns: minmax(360px, 0.9fr) minmax(380px, 0.8fr);
  min-height: calc(92vh - 190px);
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: -0.01em;
}

.hero-copy .lead { max-width: 710px; }

.hero-primary-cta {
  min-height: 62px;
  padding-inline: 26px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(86, 214, 109, 0.46), 0 0 34px rgba(86, 214, 109, 0.18);
  animation: blindReplayPulse 1.8s ease-in-out infinite;
}

.cta-note {
  margin: -6px 0 8px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 850;
}

@keyframes blindReplayPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(86, 214, 109, 0.48), 0 0 22px rgba(86, 214, 109, 0.15); }
  50% { box-shadow: 0 0 0 2px rgba(86, 214, 109, 0.8), 0 0 44px rgba(86, 214, 109, 0.28); }
}

.hero-replay-demo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(86, 214, 109, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, #111a22, #0b1117);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.demo-terminal-top,
.demo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  color: #a8b8b8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-terminal-top strong { color: #56d66d; }

.demo-chart {
  position: relative;
  height: 340px;
  background:
    linear-gradient(rgba(86, 214, 109, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(86, 214, 109, 0.12), transparent 34%),
    #071016;
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.demo-candle {
  position: absolute;
  bottom: calc(78px + var(--y, 0px));
  left: var(--x);
  width: 14px;
  height: var(--h);
  border-radius: 3px;
  opacity: 0;
  animation: candleDraw 4.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.demo-candle::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -22px;
  width: 2px;
  height: calc(100% + 42px);
  background: currentColor;
  opacity: 0.75;
}

.demo-candle.up { color: #56d66d; background: #56d66d; }
.demo-candle.down { color: #e44646; background: #e44646; }
.demo-candle.reveal { color: #56d66d; background: #56d66d; box-shadow: 0 0 26px rgba(86, 214, 109, 0.44); }
.demo-candle.c1 { --x: 12%; --h: 56px; --y: 14px; --d: 0.1s; }
.demo-candle.c2 { --x: 22%; --h: 72px; --y: 38px; --d: 0.45s; }
.demo-candle.c3 { --x: 32%; --h: 46px; --y: 22px; --d: 0.8s; }
.demo-candle.c4 { --x: 43%; --h: 88px; --y: 54px; --d: 1.15s; }
.demo-candle.c5 { --x: 54%; --h: 62px; --y: 24px; --d: 1.5s; }
.demo-candle.c6 { --x: 64%; --h: 50px; --y: 0px; --d: 1.85s; }
.demo-candle.c7 { --x: 74%; --h: 76px; --y: 42px; --d: 2.2s; }
.demo-candle.c8 { --x: 84%; --h: 118px; --y: 72px; --d: 2.75s; }

@keyframes candleDraw {
  0%, 8% { opacity: 0; transform: scaleY(0.2) translateY(10px); }
  14%, 78% { opacity: 1; transform: scaleY(1) translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

.demo-pause-line {
  position: absolute;
  inset: 0 29% 0 auto;
  width: 1px;
  background: linear-gradient(transparent, rgba(246, 195, 78, 0.7), transparent);
}

.demo-vwap {
  position: absolute;
  left: 18px;
  bottom: 118px;
  color: #77a7ff;
  font-size: 11px;
  font-weight: 950;
}

.demo-actions span {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.demo-actions span:nth-child(1) { color: #56d66d; }
.demo-actions span:nth-child(2) { color: #ff7474; }

.hero-replay-demo p {
  margin: 0;
  padding: 0 18px 18px;
  color: #b2c2bf;
  font-weight: 850;
}

.pain-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 20px;
}

.pain-section article {
  padding: 22px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 12px;
  background: #111821;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.pain-section svg { color: #56d66d; }

.pain-section h3 {
  margin: 14px 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.pain-section p {
  margin: 0;
  color: #a7b8b5;
  font-weight: 700;
}

.game-mode-heading h2 { font-size: clamp(28px, 3.3vw, 48px); }

.game-mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.game-mode-card {
  min-height: 310px;
  border-radius: 10px;
  background: #1a2030;
}

.game-art { aspect-ratio: 1 / 0.8; }
.game-copy { padding: 16px; }
.game-copy strong { font-size: 24px; }
.game-footer { padding: 0 16px 16px; }

.mode-search-empty {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(246, 195, 78, 0.24);
  border-radius: 10px;
  background: rgba(246, 195, 78, 0.08);
  color: #ffe0a0;
  font-weight: 850;
}

.mode-search-empty.hidden { display: none; }

.other-sections[data-view="home"] {
  display: none !important;
}

@media (max-width: 860px) {
  :root { --sidebar-width: 0px; }
  .side-nav { display: none; }
  .site-shell,
  .top-nav {
    width: calc(100% - 24px);
    margin-left: 12px;
    left: 12px;
  }
  .hero-grid,
  .pain-section { grid-template-columns: 1fr; }
  .demo-chart { height: 260px; }
}

/* Collision fix: force one stable desktop geometry after legacy styles. */
@media (min-width: 861px) {
  :root,
  body,
  body.sidebar-expanded {
    --sidebar-width: 236px !important;
  }

  .side-nav {
    display: flex !important;
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 18px 14px !important;
    overflow: hidden !important;
  }

  .side-link {
    min-height: 46px !important;
    padding: 0 10px 0 0 !important;
  }

  .side-icon {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .side-label {
    display: block !important;
    width: auto !important;
    max-width: 150px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .site-shell {
    width: calc(100vw - 268px) !important;
    max-width: 1440px !important;
    margin-left: 252px !important;
    margin-right: 16px !important;
    padding-top: 86px !important;
  }

  .top-nav {
    left: 252px !important;
    width: calc(100vw - 268px) !important;
    max-width: 1440px !important;
    transform: none !important;
    padding: 12px 0 !important;
  }

  .brand {
    max-width: 320px !important;
    overflow: hidden !important;
  }

  .brand:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .brand-icon,
  .top-nav .brand-icon {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .brand strong,
  .top-nav .brand strong {
    font-size: clamp(24px, 2vw, 34px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 12px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(380px, 0.82fr) minmax(420px, 0.9fr) !important;
    gap: clamp(28px, 3.2vw, 56px) !important;
    min-height: auto !important;
    padding: clamp(26px, 4vh, 48px) 0 34px !important;
  }

  .hero-copy h1 {
    max-width: 560px !important;
    font-size: clamp(42px, 4.15vw, 64px) !important;
    line-height: 1.02 !important;
  }

  .hero-copy .lead {
    max-width: 600px !important;
    font-size: clamp(15px, 1.02vw, 18px) !important;
    line-height: 1.55 !important;
  }

  .hero-cta-row {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.44fr) !important;
    max-width: 680px !important;
  }

  .hero-replay-demo {
    align-self: center !important;
    max-width: 640px !important;
    margin-left: auto !important;
  }

  .demo-chart {
    height: clamp(240px, 25vw, 320px) !important;
  }

  .hero-performance {
    max-width: 620px !important;
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-replay-demo {
    max-width: 820px !important;
    margin-left: 0 !important;
  }
}

/* 9/10 experience pass: clearer hierarchy and cleaner landing. */
html {
  scroll-behavior: smooth;
}

button,
.button-like,
.primary-button,
.ghost-button {
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease, border-color 150ms ease !important;
}

button:hover,
.primary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #56d66d;
  outline-offset: 3px;
}

.audio-toggle,
.theme-toggle {
  width: auto;
  min-width: 86px;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}

.theme-toggle {
  min-height: 48px;
  border: 1px solid rgba(145, 183, 193, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #d9e7e3;
  cursor: pointer;
}

.topbar-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}

.topbar-status span,
.topbar-status strong,
.topbar-status b {
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd8d5;
  font-size: 12px;
  font-weight: 900;
}

.topbar-status b {
  color: #56d66d;
}

@media (min-width: 861px) {
  .hero {
    min-height: auto !important;
    padding-bottom: 24px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(360px, 0.72fr) minmax(420px, 0.9fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 48px) !important;
    padding: 34px 0 30px !important;
  }

  .hero-copy h1 {
    max-width: 520px !important;
    font-size: clamp(46px, 4.8vw, 72px) !important;
    line-height: 0.96 !important;
  }

  .hero-copy .lead {
    max-width: 560px !important;
    font-size: 17px !important;
  }

  .feature-list,
  .safe-copy {
    display: none !important;
  }

  .hero-performance {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 560px !important;
    margin-top: 18px !important;
  }

  .hero-performance span {
    font-size: 11px !important;
  }

  .hero-replay-demo {
    max-width: 620px !important;
  }
}

.how-proof-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 18px;
}

.how-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  padding: 18px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 12px;
  background: #111821;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.how-step > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(86, 214, 109, 0.36);
  border-radius: 50%;
  color: #56d66d;
  font-weight: 950;
}

.how-step h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.how-step p {
  margin: 0;
  color: #9eb0ac;
  font-weight: 750;
}

.mock-candles {
  display: flex;
  align-items: end;
  gap: 5px;
}

.mock-candles i {
  width: 9px;
  border-radius: 4px;
  background: #56d66d;
  box-shadow: 0 0 18px rgba(86, 214, 109, 0.22);
}

.mock-candles i:nth-child(1) { height: 26px; }
.mock-candles i:nth-child(2) { height: 44px; background: #e44646; }
.mock-candles i:nth-child(3) { height: 60px; }

.mock-clock,
.mock-xp {
  color: #56d66d;
  font-weight: 950;
}

.social-proof-bar {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
  margin: 18px 0 24px;
  padding: 16px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 12px;
  background: #0d2020;
  box-shadow: inset 4px 0 0 rgba(86, 214, 109, 0.82);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.social-proof-bar span {
  color: #56d66d;
}

.blind-replay-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(86, 214, 109, 0.58);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(86, 214, 109, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(86, 214, 109, 0.12), rgba(26, 32, 48, 0.98));
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(86, 214, 109, 0.16), 0 26px 70px rgba(0, 0, 0, 0.28);
  animation: blindReplayPulse 2s ease-in-out infinite;
}

.blind-replay-card small {
  display: block;
  color: #56d66d;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blind-replay-card strong {
  display: block;
  margin: 6px 0;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.01em;
}

.blind-replay-card em {
  display: block;
  color: #b7c5c1;
  font-style: normal;
  font-weight: 800;
}

.blind-replay-card b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 10px;
  background: #56d66d;
  color: #071015;
  font-weight: 950;
}

.scenario-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.scenario-filter-pills button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(145, 183, 193, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #aebfbb;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.scenario-filter-pills button.active {
  color: #071015;
  border-color: #56d66d;
  background: #56d66d;
}

.game-mode-card[data-mode="replay"] {
  display: none !important;
}

.game-mode-card {
  min-height: 270px !important;
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 860px) {
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(86, 214, 109, 0.15);
    background: rgba(21, 26, 35, 0.96);
    backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav button {
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #d7e5e1;
    font-weight: 900;
  }

  .mobile-bottom-nav .mobile-play {
    background: #56d66d;
    color: #071015;
  }

  .topbar-status {
    display: none;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 13vw, 58px) !important;
  }

  .how-proof-section,
  .pain-section {
    grid-template-columns: 1fr;
  }

  .social-proof-bar,
  .blind-replay-card {
    flex-direction: column;
    align-items: stretch;
  }
}

body.light-mode {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #0a0d12;
  --muted: #5c6870;
  color: #0a0d12;
  background: #f4f6f8;
}

body.light-mode .site-shell,
body.light-mode .hero,
body.light-mode main {
  background: #f4f6f8 !important;
}

body.light-mode .top-nav,
body.light-mode .side-nav,
body.light-mode .pain-section article,
body.light-mode .how-step,
body.light-mode .game-mode-card,
body.light-mode .blind-replay-card,
body.light-mode .hero-replay-demo,
body.light-mode .social-proof-bar {
  background-color: #ffffff !important;
  color: #0a0d12;
  box-shadow: 0 18px 48px rgba(13, 20, 28, 0.08);
}

body.light-mode .side-link,
body.light-mode .side-progress-card span,
body.light-mode .pain-section p,
body.light-mode .how-step p,
body.light-mode .lead {
  color: #51606a !important;
}

body.light-mode .side-link.active,
body.light-mode .side-link:hover {
  color: #0a0d12 !important;
  background: rgba(86, 214, 109, 0.14) !important;
}

.return-recap {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 12px 0 16px;
  z-index: 5;
}

/* Senior polish pass: crisp surfaces, contained sidebar, intentional spacing. */
:root {
  --tp-border-soft: rgba(145, 183, 193, 0.14);
  --tp-border-green: rgba(86, 214, 109, 0.22);
  --tp-surface-a: #0e1117;
  --tp-surface-b: #111821;
  --tp-surface-c: #151d27;
  --tp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --tp-shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.18);
  --tp-shadow-md: 0 12px 26px rgba(0, 0, 0, 0.22);
  --tp-shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.side-nav {
  isolation: isolate;
  overflow-x: visible;
  overflow-y: hidden;
  padding: 16px 12px !important;
  border-right: 1px solid rgba(145, 183, 193, 0.14) !important;
  background:
    linear-gradient(rgba(86, 214, 109, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.018) 1px, transparent 1px),
    #151a23 !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  box-shadow: none !important;
}

.side-toggle,
.side-link {
  min-height: 48px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.side-nav-links {
  gap: 8px !important;
}

.side-link:hover,
.side-toggle:hover,
.side-link.active {
  border-color: rgba(86, 214, 109, 0.28) !important;
  background: rgba(86, 214, 109, 0.08) !important;
  box-shadow: inset 3px 0 0 rgba(86, 214, 109, 0.72) !important;
}

.start-side-link,
.start-side-link:hover,
.start-side-link.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), var(--tp-shadow-xs) !important;
}

.elite-side-link,
.elite-side-link:hover,
.elite-side-link.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), var(--tp-shadow-xs) !important;
}

.side-link::after {
  z-index: 75 !important;
  border-color: rgba(145, 183, 193, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: var(--tp-shadow-md) !important;
}

.side-progress-card {
  padding: 16px !important;
  border-color: rgba(86, 214, 109, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(86, 214, 109, 0.06) !important;
  box-shadow: none !important;
}

.side-progress-card i {
  box-shadow: none !important;
}

.top-nav {
  min-height: 72px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(145, 183, 193, 0.12) !important;
  background: rgba(21, 32, 40, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: var(--tp-shadow-sm) !important;
}

.brand,
.top-nav .brand,
.top-nav .brand-icon {
  box-shadow: none !important;
}

.topbar-status span,
.topbar-status strong,
.topbar-status b,
.audio-toggle,
.theme-toggle,
.topbar-back {
  border-radius: 10px !important;
  border-color: rgba(145, 183, 193, 0.18) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

.hero,
.page,
.page-section,
.trainer-section {
  overflow: visible;
}

.hero-grid,
.mode-grid,
.game-mode-grid,
.plans-grid,
.pricing-grid,
.profile-grid,
.lobby-feature-cards,
.how-proof-section,
.pain-section {
  gap: 24px !important;
}

.hero-grid {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.hero-copy,
.hero-replay-demo,
.pain-section article,
.how-step,
.market-intel,
.intel-card,
.game-mode-card,
.training-game-grid .game-mode-card,
.lobby-feature-card,
.replay-card,
.mode-card,
.reward-card,
.futures-card,
.trade-score-card,
.profile-rank-card,
.profile-stat-card,
.profile-sub-card,
.paywall-card,
.modal-card,
.learning-card,
.assistant-panel,
.free-plan-banner,
.return-recap,
.toast,
.result-breakdown > .result-section,
.result-panel,
.leaderboard-full,
.feedback-card,
.share-card-preview,
.blind-replay-card,
.social-proof-bar,
.lobby-search {
  border-color: var(--tp-border-soft) !important;
  border-radius: 10px !important;
  box-shadow: var(--tp-shadow-sm) !important;
}

.hero-replay-demo,
.learning-card,
.modal-card,
.paywall-card,
.assistant-panel {
  box-shadow: var(--tp-shadow-lg) !important;
}

.intel-card,
.game-mode-card,
.training-game-grid .game-mode-card,
.lobby-feature-card,
.how-step,
.pain-section article,
.profile-stat-card,
.profile-rank-card,
.profile-sub-card {
  padding: 24px !important;
}

.lobby-feature-card,
.game-mode-card,
.training-game-grid .game-mode-card {
  min-height: auto !important;
}

.lobby-feature-card:hover,
.lobby-feature-card:focus-visible,
.game-mode-card:hover,
.game-mode-card:focus-visible,
.mode-card:hover,
.replay-card:hover,
button:hover,
.primary-button:hover,
.ghost-button:hover {
  box-shadow: var(--tp-shadow-md) !important;
  filter: brightness(1.04) !important;
}

.primary-button,
.ghost-button,
.panel-button,
.plan-button,
.result-next-button,
.mode-start,
.hero-primary-cta,
.blind-replay-card b,
.assistant-form button,
.free-plan-banner .primary-button {
  border-radius: 10px !important;
  box-shadow: var(--tp-shadow-xs) !important;
}

.hero-primary-cta,
.blind-replay-card {
  animation: none !important;
}

@keyframes blindReplayPulse {
  0%, 100% { box-shadow: var(--tp-shadow-sm); }
  50% { box-shadow: var(--tp-shadow-md); }
}

.mock-candles i,
.demo-candle.reveal,
.edge-ring,
.online-dot,
.assistant-fab,
.assistant-dot,
.profile-level-ring,
.result-clue-marker,
.streak-freeze-icons span,
.combo-badge,
.xp-float,
.answer-option.correct,
.answer-choice.correct {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.assistant-fab {
  box-shadow: var(--tp-shadow-md) !important;
}

.toast-stack {
  z-index: 1700 !important;
}

.modal {
  z-index: 1600 !important;
  backdrop-filter: blur(6px) !important;
}

.learning-modal {
  z-index: 1800 !important;
  backdrop-filter: blur(8px) !important;
}

.assistant-widget {
  z-index: 1900 !important;
}

.mobile-bottom-nav {
  z-index: 80 !important;
  box-shadow: var(--tp-shadow-sm) !important;
}

.result-breakdown,
.profile-patterns,
.pricing-grid,
.plans-grid,
.leaderboard-list,
.achievements-row,
.faq-grid {
  gap: 16px !important;
}

.scenario-filter-pills,
.hero-cta-row,
.topbar-actions,
.answer-grid,
.confidence-row,
.timeframe-tabs,
.mode-actions {
  gap: 8px !important;
}

.social-proof-bar {
  margin: 24px 0 !important;
  padding: 16px 24px !important;
  box-shadow: inset 4px 0 0 rgba(86, 214, 109, 0.78) !important;
}

.blind-replay-card {
  margin: 24px 0 16px !important;
  padding: 32px !important;
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.1), rgba(21, 26, 35, 0.96)) !important;
}

.return-recap {
  margin: 16px 0 24px !important;
}

body.light-mode .top-nav,
body.light-mode .side-nav,
body.light-mode .pain-section article,
body.light-mode .how-step,
body.light-mode .game-mode-card,
body.light-mode .blind-replay-card,
body.light-mode .hero-replay-demo,
body.light-mode .social-proof-bar,
body.light-mode .modal-card,
body.light-mode .paywall-card,
body.light-mode .learning-card,
body.light-mode .assistant-panel {
  box-shadow: 0 8px 18px rgba(13, 20, 28, 0.08) !important;
}

@media (max-width: 860px) {
  .site-shell,
  .top-nav {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
  }

  .hero-grid,
  .mode-grid,
  .game-mode-grid,
  .plans-grid,
  .pricing-grid,
  .profile-grid,
  .lobby-feature-cards,
  .how-proof-section,
  .pain-section {
    gap: 16px !important;
  }

  .hero-grid {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }

  .intel-card,
  .game-mode-card,
  .training-game-grid .game-mode-card,
  .lobby-feature-card,
  .how-step,
  .pain-section article,
  .profile-stat-card,
  .profile-rank-card,
  .profile-sub-card,
  .blind-replay-card {
    padding: 16px !important;
  }
}

/* Final crispness hardening: win against older launch glow rules. */
body .side-nav {
  overflow-x: visible !important;
  overflow-y: hidden !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(145, 183, 193, 0.16) !important;
}

body .top-nav {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

body .hero-replay-demo,
body .modal-card,
body .paywall-card,
body .learning-card,
body .assistant-panel {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
}

body .hero-primary-cta,
body .primary-button,
body .ghost-button,
body .panel-button,
body .plan-button,
body .result-next-button,
body .mode-start,
body .assistant-form button {
  animation: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22) !important;
}

body .game-mode-card,
body .training-game-grid .game-mode-card,
body .lobby-feature-card,
body .pain-section article,
body .how-step,
body .intel-card,
body .profile-rank-card,
body .profile-stat-card,
body .profile-sub-card,
body .blind-replay-card,
body .social-proof-bar,
body .lobby-search,
body .return-recap,
body .toast {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

body .start-side-link,
body .start-side-link:hover,
body .start-side-link.active,
body .elite-side-link,
body .elite-side-link:hover,
body .elite-side-link.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

body .side-link:hover,
body .side-toggle:hover,
body .side-link.active {
  box-shadow: inset 3px 0 0 rgba(86, 214, 109, 0.72) !important;
}

body .demo-candle.reveal,
body .mock-candles i,
body .edge-ring,
body .assistant-fab,
body .assistant-dot,
body .online-dot {
  box-shadow: none !important;
  filter: none !important;
}

/* Hero fit fix: prevent clipping/crowding in the main landing viewport. */
body .site-shell {
  width: min(1440px, calc(100% - var(--sidebar-width) - 64px)) !important;
  margin-left: calc(var(--sidebar-width) + 32px) !important;
}

body .top-nav {
  left: calc(var(--sidebar-width) + 32px) !important;
  width: min(1440px, calc(100% - var(--sidebar-width) - 64px)) !important;
}

body[data-view="home"] .hero-grid,
body[data-page="home"] .hero-grid {
  grid-template-columns: minmax(0, 560px) minmax(380px, 620px) !important;
  gap: 64px !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: auto !important;
  padding: 48px 0 !important;
}

body[data-view="home"] .hero-copy,
body[data-page="home"] .hero-copy {
  min-width: 0 !important;
  max-width: 560px !important;
  overflow: visible !important;
}

body[data-view="home"] .hero-copy h1,
body[data-page="home"] .hero-copy h1 {
  max-width: 560px !important;
  font-size: clamp(42px, 4.4vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  margin: 8px 0 28px !important;
  text-wrap: balance;
}

body[data-view="home"] .hero-copy .lead,
body[data-page="home"] .hero-copy .lead {
  max-width: 560px !important;
  margin: 0 0 28px !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: pretty;
}

body[data-view="home"] .hero-cta-row,
body[data-page="home"] .hero-cta-row {
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) minmax(170px, 220px) !important;
  gap: 16px !important;
  max-width: 560px !important;
  margin: 28px 0 8px !important;
}

body[data-view="home"] .hero-primary-cta,
body[data-page="home"] .hero-primary-cta,
body[data-view="home"] .google-auth-button,
body[data-page="home"] .google-auth-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  padding-inline: 18px !important;
  white-space: normal !important;
  text-align: center !important;
}

body[data-view="home"] .return-recap,
body[data-page="home"] .return-recap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content 40px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  margin: 24px 0 32px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body[data-view="home"] .return-recap span,
body[data-page="home"] .return-recap span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  line-height: 1.3 !important;
}

body[data-view="home"] .return-recap .mode-start,
body[data-page="home"] .return-recap .mode-start {
  min-width: 0 !important;
  white-space: nowrap !important;
  padding-inline: 16px !important;
}

body[data-view="home"] .hero-performance,
body[data-page="home"] .hero-performance {
  max-width: 560px !important;
}

@media (max-width: 1500px) and (min-width: 861px) {
  body[data-view="home"] .hero-grid,
  body[data-page="home"] .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 40px 0 !important;
  }

  body[data-view="home"] .hero-replay-demo,
  body[data-page="home"] .hero-replay-demo {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important;
  }

  body[data-view="home"] .hero-copy,
  body[data-page="home"] .hero-copy,
  body[data-view="home"] .hero-copy h1,
  body[data-page="home"] .hero-copy h1,
  body[data-view="home"] .hero-copy .lead,
  body[data-page="home"] .hero-copy .lead,
  body[data-view="home"] .hero-cta-row,
  body[data-page="home"] .hero-cta-row,
  body[data-view="home"] .hero-performance,
  body[data-page="home"] .hero-performance {
    max-width: 760px !important;
  }
}

@media (max-width: 980px) {
  body[data-view="home"] .hero-copy h1,
  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(40px, 8vw, 58px) !important;
  }

  body[data-view="home"] .hero-cta-row,
  body[data-page="home"] .hero-cta-row {
    grid-template-columns: 1fr !important;
  }
}

/* Content gutter: creates breathing room without squeezing the whole shell. */
body {
  --page-gutter: 48px;
}

body .site-shell {
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .hero > .hero-grid,
body .hero > .pain-section,
body .hero > .onboarding-strip,
body .hero > .game-mode-showcase,
body .hero > .other-sections,
body .hero > .page-section,
body .hero > .dashboard-section,
body .hero > .return-recap {
  width: auto !important;
  margin-left: var(--page-gutter) !important;
  margin-right: var(--page-gutter) !important;
  box-sizing: border-box !important;
}

body .hero > .trainer-section {
  left: auto !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .market-tape,
body .free-plan-banner,
body .streak-risk-banner {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
  body {
    --page-gutter: 32px;
  }
}

@media (max-width: 639px) {
  body {
    --page-gutter: 20px;
  }
}

/* Home cleanup: keep proof compact below content, not in the landing hero. */
body[data-view="home"] .social-proof-bar,
body[data-page="home"] .social-proof-bar,
.pain-section,
.how-proof-section {
  display: none !important;
}

body .social-proof-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
  min-height: 44px !important;
  width: auto !important;
  margin: 24px var(--page-gutter, 48px) 18px !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body .social-proof-bar strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

body .onboarding-modal-card {
  width: min(760px, calc(100vw - 40px)) !important;
  padding: 24px !important;
}

body .onboarding-modal-card h2 {
  max-width: 620px !important;
  margin: 6px 0 18px !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.05 !important;
}

body .onboarding-modal-card .onboarding-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
  margin-top: 0 !important;
  padding: 14px !important;
}

body .onboarding-modal-card .onboarding-strip label {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  body .onboarding-modal-card .onboarding-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Launch polish pass: crisp surfaces, predictable spacing, and no fuzzy bleed. */
:root {
  --tp-bg: #0a0d12;
  --tp-sidebar: #151a23;
  --tp-card: #1a2030;
  --tp-card-2: #202736;
  --tp-green: #56d66d;
  --tp-danger: #e44646;
  --tp-warning: #f4622a;
  --tp-gold: #f0b429;
  --tp-border: rgba(255, 255, 255, 0.07);
  --tp-muted: rgba(255, 255, 255, 0.45);
  --tp-text: rgba(255, 255, 255, 0.85);
  --tp-radius: 10px;
  --tp-button-radius: 8px;
  --tp-elevation: 0 12px 26px rgba(0, 0, 0, 0.24);
  --tp-elevation-soft: 0 6px 16px rgba(0, 0, 0, 0.18);
}

body {
  background:
    linear-gradient(rgba(86, 214, 109, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.018) 1px, transparent 1px),
    var(--tp-bg) !important;
  color: var(--tp-text);
}

body::before,
body::after {
  opacity: 0.18 !important;
}

body .side-nav {
  background: var(--tp-sidebar) !important;
  border-right: 1px solid var(--tp-border) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
}

body .site-shell {
  width: calc(100% - var(--side-width, 90px)) !important;
  max-width: none !important;
  margin-left: var(--side-width, 90px) !important;
  margin-right: 0 !important;
  padding-top: 92px !important;
  overflow-x: hidden !important;
}

body.sidebar-expanded .site-shell {
  width: calc(100% - var(--side-expanded, 260px)) !important;
  margin-left: var(--side-expanded, 260px) !important;
}

body .top-nav {
  left: var(--side-width, 90px) !important;
  width: calc(100% - var(--side-width, 90px)) !important;
  transform: none !important;
  padding: 12px var(--page-gutter, 48px) 14px !important;
  background: #142532 !important;
  border-bottom: 1px solid var(--tp-border) !important;
  box-shadow: var(--tp-elevation-soft) !important;
}

body.sidebar-expanded .top-nav {
  left: var(--side-expanded, 260px) !important;
  width: calc(100% - var(--side-expanded, 260px)) !important;
}

body .hero {
  padding-top: 24px !important;
}

body .hero > .hero-grid,
body .hero > .game-mode-showcase,
body .hero > .other-sections,
body .hero > .page-section,
body .hero > .dashboard-section,
body .hero > .return-recap {
  margin-left: var(--page-gutter, 48px) !important;
  margin-right: var(--page-gutter, 48px) !important;
}

body[data-view="home"] .hero-grid,
body[data-page="home"] .hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.95fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 72px) !important;
  padding-top: clamp(48px, 7vw, 86px) !important;
  min-height: auto !important;
}

body[data-view="home"] .hero-copy,
body[data-page="home"] .hero-copy {
  width: 100% !important;
  max-width: 760px !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

body[data-view="home"] .hero-copy h1,
body[data-page="home"] .hero-copy h1 {
  max-width: 650px !important;
  font-size: clamp(58px, 7vw, 112px) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

body[data-view="home"] .hero-copy .lead,
body[data-page="home"] .hero-copy .lead {
  max-width: 660px !important;
  font-size: clamp(18px, 1.5vw, 24px) !important;
  line-height: 1.45 !important;
  text-wrap: pretty !important;
}

body[data-view="home"] .hero-cta-row,
body[data-page="home"] .hero-cta-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;
}

body .primary-button,
body .ghost-button,
body .panel-button,
body .plan-button,
body .result-next-button,
body .mode-start,
body .google-auth-button,
body .assistant-form button,
body .free-plan-banner .primary-button {
  min-height: 52px !important;
  border-radius: var(--tp-button-radius) !important;
  box-shadow: var(--tp-elevation-soft) !important;
  white-space: nowrap !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, filter 160ms ease !important;
}

body .primary-button:hover,
body .ghost-button:hover,
body .panel-button:hover,
body .plan-button:hover,
body .result-next-button:hover,
body .mode-start:hover,
body .google-auth-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  box-shadow: var(--tp-elevation) !important;
}

body .primary-button:active,
body .ghost-button:active,
body .panel-button:active,
body .plan-button:active,
body .result-next-button:active,
body .mode-start:active,
body .google-auth-button:active {
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

body .side-link {
  min-height: 40px !important;
  height: 40px !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
}

body .side-link.active {
  border-left-color: var(--tp-green) !important;
  background: rgba(86, 214, 109, 0.08) !important;
  box-shadow: none !important;
}

body .modal-close,
body .learning-close,
body #close-return-recap,
body .assistant-panel header button,
body .beta-banner button:last-child {
  min-width: 32px !important;
  width: 32px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body .game-mode-card,
body .training-game-grid .game-mode-card,
body .lobby-feature-card,
body .intel-card,
body .profile-rank-card,
body .profile-stat-card,
body .profile-sub-card,
body .blind-replay-card,
body .hero-replay-demo,
body .modal-card,
body .paywall-card,
body .learning-card,
body .assistant-panel,
body .return-recap,
body .lobby-search,
body .social-proof-bar {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius) !important;
  box-shadow: var(--tp-elevation-soft) !important;
}

body .game-mode-card::after,
body .mode-card::after,
body .hero-copy::after,
body .game-mode-showcase::before {
  opacity: 0.25 !important;
}

body .brand-icon,
body .assistant-fab,
body .edge-ring,
body .demo-candle.reveal,
body .mock-candles i {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 14px rgba(86, 214, 109, 0.16) !important;
}

body input,
body select,
body textarea {
  min-height: 52px;
  border: 1px solid var(--tp-border) !important;
  border-radius: 8px !important;
  background: #0e1117 !important;
  color: var(--tp-text) !important;
}

body .market-tape,
body .free-plan-banner,
body .streak-risk-banner {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body .social-proof-bar {
  max-width: calc(100% - (var(--page-gutter, 48px) * 2)) !important;
}

@media (max-width: 1279px) {
  body[data-view="home"] .hero-grid,
  body[data-page="home"] .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  body[data-view="home"] .hero-copy h1,
  body[data-page="home"] .hero-copy h1 {
    max-width: 760px !important;
    font-size: clamp(52px, 9vw, 86px) !important;
  }
}

@media (max-width: 767px) {
  body .site-shell,
  body.sidebar-expanded .site-shell {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body .top-nav,
  body.sidebar-expanded .top-nav {
    left: 0 !important;
    width: 100% !important;
    padding-left: var(--page-gutter, 20px) !important;
    padding-right: var(--page-gutter, 20px) !important;
  }

  body[data-view="home"] .hero-copy h1,
  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(42px, 14vw, 62px) !important;
  }

  body[data-view="home"] .hero-cta-row,
  body[data-page="home"] .hero-cta-row {
    flex-direction: column !important;
  }
}

/* True collapsible sidebar: transform-based, remembered by localStorage. */
body {
  --side-open-width: 220px;
  --side-current-width: 0px;
}

body.sidebar-expanded {
  --side-current-width: var(--side-open-width);
}

body .side-nav {
  width: var(--side-open-width) !important;
  transform: translateX(calc(var(--side-open-width) * -1)) !important;
  transition: transform 250ms ease !important;
  padding: 72px 12px 16px !important;
  border-right: 1px solid var(--tp-border) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
}

body.sidebar-expanded .side-nav {
  transform: translateX(0) !important;
}

body .side-toggle {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 160 !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(86, 214, 109, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(21, 26, 35, 0.96) !important;
  color: var(--tp-green) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
  transform: none !important;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease !important;
}

body .side-toggle svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2.5 !important;
}

body .side-toggle:hover {
  border-color: rgba(86, 214, 109, 0.45) !important;
  background: rgba(32, 39, 54, 0.98) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

body .side-nav .side-label,
body .side-nav .side-section-label,
body .side-nav .side-progress-card {
  opacity: 1 !important;
}

body .side-label {
  width: auto !important;
}

body .side-section-label {
  width: auto !important;
  height: auto !important;
  margin: 10px 0 4px 12px !important;
}

body .side-progress-card {
  display: grid !important;
}

body .site-shell,
body.sidebar-expanded .site-shell {
  width: calc(100% - var(--side-current-width)) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: var(--side-current-width) !important;
  margin-right: 0 !important;
  padding-top: 92px !important;
  padding-right: 48px !important;
  overflow-x: hidden !important;
  transition: margin-left 250ms ease, width 250ms ease !important;
}

body .top-nav,
body.sidebar-expanded .top-nav {
  left: var(--side-current-width) !important;
  width: calc(100% - var(--side-current-width)) !important;
  max-width: 100% !important;
  transform: none !important;
  padding-left: 64px !important;
  padding-right: 48px !important;
  transition: left 250ms ease, width 250ms ease !important;
}

body .top-nav .brand {
  margin-left: 0 !important;
  min-width: 0 !important;
}

body .top-nav .brand strong {
  white-space: nowrap !important;
}

body .hero,
body main,
body .page-section,
body .dashboard-section,
body .trainer-section,
body .hero-grid,
body .hero-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.playing .trainer-section,
body[data-view="game"] .trainer-section,
body[data-page="game"] .trainer-section {
  width: calc(100vw - var(--side-current-width)) !important;
  padding-left: var(--page-gutter, 48px) !important;
  padding-right: 48px !important;
  transition: width 250ms ease, padding 250ms ease !important;
}

body[data-view="home"] .hero-copy,
body[data-page="home"] .hero-copy {
  overflow: hidden !important;
  word-break: break-word !important;
}

body[data-view="home"] .hero-copy h1,
body[data-page="home"] .hero-copy h1 {
  font-size: clamp(28px, 4vw, 64px) !important;
  line-height: 1.02 !important;
  overflow-wrap: anywhere !important;
}

body[data-view="home"] .hero-copy .lead,
body[data-page="home"] .hero-copy .lead {
  overflow-wrap: anywhere !important;
}

body .hero > .hero-grid,
body .hero > .game-mode-showcase,
body .hero > .other-sections,
body .hero > .page-section,
body .hero > .dashboard-section,
body .hero > .return-recap {
  margin-left: var(--page-gutter, 48px) !important;
  margin-right: 0 !important;
}

body .sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 250ms ease;
}

@media (max-width: 1279px) and (min-width: 768px) {
  body:not(.sidebar-expanded) {
    --side-current-width: 0px;
  }
}

@media (max-width: 767px) {
  body,
  body.sidebar-expanded {
    --side-current-width: 0px;
  }

  body .site-shell,
  body.sidebar-expanded .site-shell {
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 20px !important;
  }

  body.playing .trainer-section,
  body[data-view="game"] .trainer-section,
  body[data-page="game"] .trainer-section {
    width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body .top-nav,
  body.sidebar-expanded .top-nav {
    left: 0 !important;
    width: 100% !important;
    padding-left: 64px !important;
    padding-right: 20px !important;
  }

  body.sidebar-expanded .sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  body .side-nav {
    z-index: 120 !important;
  }

  body .hero > .hero-grid,
  body .hero > .game-mode-showcase,
  body .hero > .other-sections,
  body .hero > .page-section,
  body .hero > .dashboard-section,
  body .hero > .return-recap {
    margin-left: 20px !important;
    margin-right: 0 !important;
  }
}

/* Stake-style sidebar/topbar rebuild: compact drawer, clean pills, no content cutoff. */
body {
  --side-open-width: 240px;
  --side-current-width: 0px;
  --topbar-height: 56px;
  --content-pad-x: 32px;
}

body.sidebar-expanded {
  --side-current-width: var(--side-open-width);
}

body .site-shell,
body.sidebar-expanded .site-shell {
  width: calc(100% - var(--side-current-width)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: var(--side-current-width) !important;
  margin-right: 0 !important;
  padding: calc(var(--topbar-height) + 24px) var(--content-pad-x) 0 !important;
  overflow-x: hidden !important;
  transition: margin-left 240ms cubic-bezier(0.4, 0, 0.2, 1), width 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body .top-nav,
body.sidebar-expanded .top-nav {
  left: var(--side-current-width) !important;
  top: 0 !important;
  width: calc(100% - var(--side-current-width)) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-width: none !important;
  padding: 0 16px 0 64px !important;
  gap: 12px !important;
  background: #0e1117 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: left 240ms cubic-bezier(0.4, 0, 0.2, 1), width 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body .side-toggle {
  position: fixed !important;
  top: 10px !important;
  left: 16px !important;
  z-index: 1300 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
  transition: background-color 120ms ease !important;
}

body .side-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

body .side-toggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.4 !important;
}

body .side-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  z-index: 1000 !important;
  width: var(--side-open-width) !important;
  height: 100vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #151a23 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: translateX(calc(var(--side-open-width) * -1)) !important;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-expanded .side-nav {
  transform: translateX(0) !important;
}

body .side-nav-header {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 14px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body .side-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body .side-brand-icon {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(86, 214, 109, 0.14);
  border: 1px solid rgba(86, 214, 109, 0.28);
}

body .side-brand-icon span {
  position: absolute;
  bottom: 5px;
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: #56d66d;
}

body .side-brand-icon span:nth-child(1) { left: 6px; height: 8px; }
body .side-brand-icon span:nth-child(2) { left: 12px; height: 13px; }
body .side-brand-icon span:nth-child(3) { left: 18px; height: 18px; }

body .side-brand strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body .side-brand strong span {
  color: #56d66d;
}

body .side-nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 0 8px !important;
  overflow-y: auto !important;
}

body .side-link,
body .start-side-link,
body .start-side-link:hover,
body .start-side-link.active,
body .elite-side-link,
body .elite-side-link:hover,
body .elite-side-link.active {
  height: 42px !important;
  min-height: 42px !important;
  width: auto !important;
  margin: 0 8px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}

body .side-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body .side-link.active,
body .start-side-link.active,
body .elite-side-link.active {
  background: rgba(86, 214, 109, 0.1) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #56d66d !important;
}

body .side-icon {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

body .side-link:hover .side-icon,
body .side-link:hover .side-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

body .side-link.active .side-icon {
  color: #56d66d !important;
}

body .side-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2 !important;
}

body .side-label {
  flex: 1 1 auto !important;
  width: auto !important;
  opacity: 1 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body .daily-tab .side-label::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: #56d66d;
  box-shadow: 0 0 8px rgba(86, 214, 109, 0.45);
  vertical-align: middle;
}

/* Final micro-alignment fixes only. */
body .side-section-label {
  padding: 20px 20px 6px 20px !important;
  margin-left: 0 !important;
  transform: none !important;
}

body .side-brand-icon,
body .top-nav .brand-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .side-section-label {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 20px 20px 6px !important;
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body .side-divider {
  height: 1px !important;
  margin: 6px 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body .side-lock {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.25);
}

body .side-lock svg {
  width: 15px;
  height: 15px;
}

body .premium-lock.locked {
  color: rgba(255, 255, 255, 0.33) !important;
}

body .side-link::after {
  display: none !important;
}

body .side-progress-card {
  display: grid !important;
  gap: 8px !important;
  margin: auto 8px 8px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

body .side-progress-card span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body .side-progress-card strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body .side-progress-card div {
  height: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

body .side-progress-card i {
  background: #56d66d !important;
  box-shadow: none !important;
}

body .side-progress-card small {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body .side-nav > .logout-tab {
  margin: 0 8px 12px !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

body .side-nav > .logout-tab:hover {
  color: #e44646 !important;
}

body .top-nav .brand {
  gap: 8px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 !important;
}

body .top-nav .brand-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

body .top-nav .brand-icon span {
  width: 4px !important;
  bottom: 4px !important;
}

body .top-nav .brand-icon span:nth-child(1) { left: 5px !important; height: 8px !important; }
body .top-nav .brand-icon span:nth-child(2) { left: 11px !important; height: 13px !important; }
body .top-nav .brand-icon span:nth-child(3) { left: 17px !important; height: 17px !important; }

/* ReplayEdge logo mark: sharper replay/edge symbol replacing the old three bars. */
body .top-nav .brand-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body .top-nav .brand-icon span {
  display: none !important;
}

body .top-nav .brand-icon .replayedge-mark {
  display: block !important;
  width: 52px !important;
  height: 32px !important;
}

body .top-nav .brand-icon .mark-wing-back {
  fill: rgba(86, 214, 109, 0.16);
  stroke: rgba(139, 255, 182, 0.42);
  stroke-width: 1.4;
}

body .top-nav .brand-icon .mark-edge {
  fill: url("#replayedge-mark-fill");
  filter: url("#replayedge-mark-glow");
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease;
}

body .top-nav .brand:hover .brand-icon .mark-edge {
  transform: translateX(1px) scale(1.02);
}

body .top-nav .brand-icon .mark-cut {
  fill: none;
  stroke: #06120c;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

body .top-nav .brand-icon .mark-node {
  fill: #eafff4;
  stroke: rgba(6, 18, 12, 0.75);
  stroke-width: 1.2;
}

body .top-nav .brand strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

body .topbar-status {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body .topbar-status span,
body .topbar-status strong,
body .topbar-status b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body .topbar-status span {
  color: #f4622a !important;
  border: 1px solid rgba(244, 98, 42, 0.25) !important;
  background: rgba(244, 98, 42, 0.12) !important;
}

body .topbar-status span::before {
  content: "🔥";
  font-size: 13px;
}

body .topbar-status strong {
  color: #56d66d !important;
  border: 1px solid rgba(86, 214, 109, 0.2) !important;
  background: rgba(86, 214, 109, 0.08) !important;
}

body .topbar-status strong::before {
  content: "⚡";
  font-size: 13px;
}

body .topbar-status b {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body .topbar-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tp-topbar-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-width: 172px;
  max-width: 240px;
  height: 40px;
  min-height: 40px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(246, 195, 78, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
}

.tp-topbar-rank-pill:hover {
  border-color: rgba(246, 195, 78, 0.36);
  background: rgba(255, 255, 255, 0.065);
}

.tp-topbar-rank-badge {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: #ffffff;
  clip-path: polygon(50% 0%, 92% 24%, 76% 88%, 50% 100%, 24% 88%, 8% 24%);
}

.tp-topbar-rank-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke-width: 2.4;
}

.tp-topbar-rank-quartz {
  background: linear-gradient(135deg, #f4fff9, #9fb1bd 48%, #52606b);
}

.tp-topbar-rank-emerald {
  background: linear-gradient(135deg, #8cffb0, #22c55e 48%, #0b6b3a);
}

.tp-topbar-rank-sapphire {
  background: linear-gradient(135deg, #8fd3ff, #2563eb 50%, #102a77);
}

.tp-topbar-rank-amethyst {
  background: linear-gradient(135deg, #d6b4ff, #7c5cff 50%, #35207d);
}

.tp-topbar-rank-ruby {
  background: linear-gradient(135deg, #ffb4b4, #ff3b66 52%, #771326);
}

.tp-topbar-rank-diamond {
  background: linear-gradient(135deg, #ffffff, #7dd3fc 40%, #f6c34e 72%, #9f6b00);
}

.tp-topbar-rank-info {
  display: grid;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.tp-topbar-rank-info strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-topbar-rank-track {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.tp-topbar-rank-track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6c34e, #ffe38a);
  transition: width 180ms ease;
}

.tp-topbar-rank-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.54);
}

.tp-topbar-rank-chevron svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

body .theme-toggle,
body .audio-toggle {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

body .theme-toggle:hover,
body .audio-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

body .theme-toggle svg,
body .audio-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

body .topbar-freeze-bank {
  display: none !important;
}

body .topbar-login {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .topbar-avatar {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1.5px solid #56d66d !important;
  border-radius: 50% !important;
  background: rgba(86, 214, 109, 0.15) !important;
  color: #56d66d !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body .topbar-avatar span {
  display: grid;
  place-items: center;
}

body .game-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(21, 26, 35, 0.92) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

body .game-help-button:hover {
  transform: translateY(-1px);
  border-color: rgba(86, 214, 109, 0.44) !important;
  background: rgba(86, 214, 109, 0.12) !important;
  color: #f7fff9 !important;
}

body .game-help-button svg {
  width: 18px !important;
  height: 18px !important;
}

/* Sidebar label lift: keeps LEARN / ACCOUNT / PREMIUM fully visible and aligned. */
body .side-section-label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 14px 20px 6px 20px !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  transform: none !important;
}

body .hero,
body main,
body .page-section,
body .dashboard-section,
body .trainer-section,
body .game-mode-showcase,
body .other-sections,
body .hero-grid,
body .hero-copy,
body .plans-grid,
body .pricing-grid,
body .profile-grid,
body .leaderboard-row,
body .game-mode-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

body h1,
body h2,
body h3 {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

body[data-view="home"] .hero-copy h1,
body[data-page="home"] .hero-copy h1 {
  font-size: clamp(28px, 4vw, 56px) !important;
}

body .signal {
  padding-left: 0 !important;
}

body .hero > .hero-grid,
body .hero > .game-mode-showcase,
body .hero > .other-sections,
body .hero > .page-section,
body .hero > .dashboard-section,
body .hero > .return-recap {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body .free-plan-banner {
  width: calc(100% + (var(--content-pad-x) * 2)) !important;
  margin-left: calc(var(--content-pad-x) * -1) !important;
  margin-right: calc(var(--content-pad-x) * -1) !important;
}

body .sidebar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;
  display: none !important;
  background: rgba(0, 0, 0, 0.65) !important;
  opacity: 0 !important;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 1023px) {
  body,
  body.sidebar-expanded {
    --side-current-width: 0px;
  }

  body.sidebar-expanded .sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
  }
}

@media (max-width: 639px) {
  body {
    --content-pad-x: 20px;
  }

  .tp-topbar-rank-pill {
    display: none;
  }

  body .site-shell,
  body.sidebar-expanded .site-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body .top-nav,
  body.sidebar-expanded .top-nav {
    padding-left: 64px !important;
    padding-right: 12px !important;
  }

  body .topbar-status span,
  body .topbar-status strong {
    display: none !important;
  }

  body .topbar-login {
    padding: 0 10px !important;
  }
}

/* Flat illustrated training cards inspired by game-originals grids. */
body .game-mode-heading,
body .training-hub-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body .game-mode-heading h2,
body .training-hub-heading h2 {
  margin-bottom: 2px !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

body .mode-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

body .mode-section-actions .show-all-modes,
body .mode-grid-arrow {
  display: inline-grid;
  place-items: center;
  min-height: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #252342 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer;
  transition: transform 200ms ease, filter 200ms ease, background 200ms ease !important;
}

body .mode-section-actions .show-all-modes {
  padding: 0 16px !important;
}

body .mode-grid-arrow {
  width: 38px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body .mode-section-actions .show-all-modes:hover,
body .mode-grid-arrow:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

body .game-mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body .game-mode-card,
body .training-game-grid .game-mode-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 318px !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: #151a23 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
  transition: transform 200ms ease, filter 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

body .game-mode-card:hover,
body .game-mode-card:focus-visible,
body .training-game-grid .game-mode-card:hover,
body .training-game-grid .game-mode-card:focus-visible {
  z-index: 3 !important;
  transform: scale(1.03) !important;
  filter: brightness(1.08) !important;
  border-color: color-mix(in srgb, var(--mode-accent) 72%, rgba(255, 255, 255, 0.12)) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28) !important;
  outline: none !important;
}

body .game-mode-card.locked-mode {
  opacity: 1 !important;
  filter: saturate(0.9) brightness(0.82) !important;
}

body .game-mode-card.locked-mode:hover,
body .game-mode-card.locked-mode:focus-visible {
  transform: scale(1.015) !important;
}

body .game-mode-card::before {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 8 !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body .game-mode-card:not(.locked-mode):not(.elite-early-access)::before {
  content: none !important;
}

body .game-mode-card.elite-early-access::before {
  content: "Early Access" !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: #ffe28a !important;
}

body .game-art {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--mode-bg, #4d2db7) !important;
}

body .game-art::after,
body .art-scan {
  display: none !important;
}

body .game-art img {
  display: none !important;
}

body .flat-mode-illustration {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.01);
}

body .game-mode-card:hover .flat-mode-illustration,
body .game-mode-card:focus-visible .flat-mode-illustration {
  animation: flatModePop 420ms ease both;
}

body .game-copy {
  display: grid !important;
  gap: 5px !important;
  padding: 14px 16px 8px !important;
  background: #151a23 !important;
}

body .game-copy small {
  color: var(--mode-accent) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body .game-copy strong {
  color: #fff !important;
  font-size: clamp(20px, 1.45vw, 22px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.01em !important;
}

body .game-copy > span {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body .game-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: auto !important;
  margin: auto 16px 0 !important;
  padding: 10px 0 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #151a23 !important;
}

body .game-footer b {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body .game-footer b i {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--mode-accent) !important;
  box-shadow: none !important;
}

body .game-footer em {
  flex: 0 0 auto !important;
  color: var(--mode-accent) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@keyframes flatModePop {
  0% { transform: scale(1.01) rotate(0deg); }
  55% { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1.03) rotate(0deg); }
}

@media (min-width: 1280px) {
  body .game-mode-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body .game-mode-heading,
  body .training-hub-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body .game-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  body .game-mode-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final notification density pass: one calm top notice, beta lower on home, quieter chat. */
body #notification-slot {
  display: block !important;
  width: auto !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
}

body #notification-slot:has(> .hidden:nth-child(1)):has(> .hidden:nth-child(2)) {
  margin: 0 !important;
}

/* Horizontal game lobby shelves. */
body .game-mode-grid.mode-shelf-stack,
body .training-game-grid.mode-shelf-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  overflow: visible !important;
}

body .mode-shelf {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body .mode-shelf.hidden {
  display: none !important;
}

body .mode-shelf-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body .mode-shelf-heading h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.02em;
}

body .mode-shelf-heading p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 800;
}

body .mode-shelf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

body .mode-shelf-view,
body .mode-shelf-arrow {
  display: inline-grid;
  place-items: center;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #252342;
  color: #fff;
  box-shadow: none;
  font-weight: 950;
  cursor: pointer;
  transition: transform 200ms ease, filter 200ms ease, background 200ms ease;
}

body .mode-shelf-view {
  padding: 0 16px;
  font-size: 13px;
}

body .mode-shelf-arrow {
  width: 38px;
  font-size: 24px;
  line-height: 1;
}

body .mode-shelf-view:hover,
body .mode-shelf-arrow:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

body .mode-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(176px, 214px);
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(86, 214, 109, 0.45) transparent;
}

body .mode-shelf-track::-webkit-scrollbar {
  height: 8px;
}

body .mode-shelf-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.38);
}

body .mode-shelf-track .game-mode-card {
  scroll-snap-align: start;
  width: 100% !important;
}

body[data-active-mode="risklab"] .timeframe-tabs,
body[data-active-mode="risklab"] .chart-frame,
body[data-active-mode="risklab"] .replay-controls,
body[data-active-mode="liquidityhunt"] .timeframe-tabs,
body[data-active-mode="liquidityhunt"] .chart-frame,
body[data-active-mode="liquidityhunt"] .replay-controls,
body[data-active-mode="candlecrash"] .timeframe-tabs,
body[data-active-mode="candlecrash"] .chart-frame,
body[data-active-mode="candlecrash"] .replay-controls,
body[data-active-mode="bossfight"] .timeframe-tabs,
body[data-active-mode="bossfight"] .chart-frame,
body[data-active-mode="bossfight"] .replay-controls,
body[data-active-mode="newsdesk"] .timeframe-tabs,
body[data-active-mode="newsdesk"] .chart-frame,
body[data-active-mode="newsdesk"] .replay-controls,
body[data-active-mode="propescape"] .timeframe-tabs,
body[data-active-mode="propescape"] .chart-frame,
body[data-active-mode="propescape"] .replay-controls {
  display: none !important;
}

body[data-active-mode="risklab"] .replay-card,
body[data-active-mode="liquidityhunt"] .replay-card,
body[data-active-mode="candlecrash"] .replay-card,
body[data-active-mode="bossfight"] .replay-card,
body[data-active-mode="newsdesk"] .replay-card,
body[data-active-mode="propescape"] .replay-card {
  display: none !important;
}

body[data-active-mode="risklab"] .trainer-grid,
body[data-active-mode="liquidityhunt"] .trainer-grid,
body[data-active-mode="candlecrash"] .trainer-grid,
body[data-active-mode="bossfight"] .trainer-grid,
body[data-active-mode="newsdesk"] .trainer-grid,
body[data-active-mode="propescape"] .trainer-grid {
  grid-template-columns: 1fr !important;
}

body[data-active-mode="risklab"] .game-panel,
body[data-active-mode="liquidityhunt"] .game-panel,
body[data-active-mode="candlecrash"] .game-panel,
body[data-active-mode="bossfight"] .game-panel,
body[data-active-mode="newsdesk"] .game-panel,
body[data-active-mode="propescape"] .game-panel {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-mode="risklab"] .game-panel::before,
body[data-active-mode="liquidityhunt"] .game-panel::before,
body[data-active-mode="candlecrash"] .game-panel::before,
body[data-active-mode="bossfight"] .game-panel::before,
body[data-active-mode="newsdesk"] .game-panel::before,
body[data-active-mode="propescape"] .game-panel::before,
body[data-active-mode="risklab"] .game-panel::after,
body[data-active-mode="liquidityhunt"] .game-panel::after,
body[data-active-mode="candlecrash"] .game-panel::after,
body[data-active-mode="bossfight"] .game-panel::after,
body[data-active-mode="newsdesk"] .game-panel::after,
body[data-active-mode="propescape"] .game-panel::after,
body[data-active-mode="risklab"] .decision-kicker,
body[data-active-mode="liquidityhunt"] .decision-kicker,
body[data-active-mode="candlecrash"] .decision-kicker,
body[data-active-mode="bossfight"] .decision-kicker,
body[data-active-mode="newsdesk"] .decision-kicker,
body[data-active-mode="propescape"] .decision-kicker,
body[data-active-mode="risklab"] .score-strip,
body[data-active-mode="liquidityhunt"] .score-strip,
body[data-active-mode="candlecrash"] .score-strip,
body[data-active-mode="bossfight"] .score-strip,
body[data-active-mode="newsdesk"] .score-strip,
body[data-active-mode="propescape"] .score-strip,
body[data-active-mode="risklab"] #setup-tags,
body[data-active-mode="liquidityhunt"] #setup-tags,
body[data-active-mode="candlecrash"] #setup-tags,
body[data-active-mode="bossfight"] #setup-tags,
body[data-active-mode="newsdesk"] #setup-tags,
body[data-active-mode="propescape"] #setup-tags,
body[data-active-mode="risklab"] #question,
body[data-active-mode="liquidityhunt"] #question,
body[data-active-mode="candlecrash"] #question,
body[data-active-mode="bossfight"] #question,
body[data-active-mode="newsdesk"] #question,
body[data-active-mode="propescape"] #question,
body[data-active-mode="risklab"] #mode-instruction,
body[data-active-mode="liquidityhunt"] #mode-instruction,
body[data-active-mode="candlecrash"] #mode-instruction,
body[data-active-mode="bossfight"] #mode-instruction,
body[data-active-mode="newsdesk"] #mode-instruction,
body[data-active-mode="propescape"] #mode-instruction {
  display: none !important;
}

body[data-active-mode="risklab"] .answers,
body[data-active-mode="liquidityhunt"] .answers,
body[data-active-mode="candlecrash"] .answers,
body[data-active-mode="bossfight"] .answers,
body[data-active-mode="newsdesk"] .answers,
body[data-active-mode="propescape"] .answers {
  gap: 0 !important;
}

body[data-active-mode="risklab"] .terminal-rail span:first-child,
body[data-active-mode="liquidityhunt"] .terminal-rail span:first-child,
body[data-active-mode="candlecrash"] .terminal-rail span:first-child,
body[data-active-mode="bossfight"] .terminal-rail span:first-child,
body[data-active-mode="newsdesk"] .terminal-rail span:first-child,
body[data-active-mode="propescape"] .terminal-rail span:first-child {
  color: var(--green) !important;
}

body .education-game-board {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.09), transparent 42%),
    #101722;
}

body .education-brief {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}

body .education-brief span,
body .education-meter span {
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .education-brief strong {
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
}

body .education-brief p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

body .education-game-board label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

body .education-game-board input,
body .education-game-board select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #0d121b;
  color: #fff;
  padding: 0 12px;
  font: inherit;
  font-weight: 850;
}

body .education-game-board input:focus,
body .education-game-board select:focus {
  outline: none;
  border-color: rgba(86, 214, 109, 0.72);
  box-shadow: 0 0 0 3px rgba(86, 214, 109, 0.12);
}

body .education-meter {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

body .education-meter b {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.35;
}

body .education-arena {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  width: 100%;
  min-height: 560px;
  padding: 18px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.07), transparent 46%),
    #0d121b;
}

body .education-stage,
body .education-controls {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #111a24;
}

body .education-stage {
  display: grid;
  align-content: space-between;
  gap: 22px;
  min-height: 520px;
  padding: 26px;
}

body .education-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(86, 214, 109, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.6;
}

body .education-stage-copy,
body .risk-console,
body .news-board,
body .prop-path,
body .prop-health {
  position: relative;
  z-index: 1;
}

body .education-stage-copy {
  max-width: 680px;
}

body .education-stage-copy span {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body .education-stage-copy strong {
  display: block;
  color: #f7fff9;
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

body .education-stage-copy p {
  max-width: 560px;
  margin: 14px 0 0;
  color: rgba(225, 242, 235, 0.68);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

body .education-controls {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    #121923;
}

body .education-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 12px;
  align-items: center;
  color: rgba(225, 242, 235, 0.74);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body .education-controls label input,
body .education-controls label select {
  grid-column: 1 / -1;
}

body .education-controls label b {
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
}

body .education-controls input[type="range"] {
  height: 42px;
  padding: 0;
  accent-color: var(--green);
  background: transparent;
}

body .education-controls select {
  min-height: 48px;
  cursor: pointer;
}

body .chart-frame {
  position: relative;
}

body .candle-pop-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

body .pop-candle {
  position: absolute;
  left: var(--x);
  bottom: var(--b);
  width: 14px;
  height: var(--h);
  border-radius: 3px;
  isolation: isolate;
  opacity: 0;
  transform: translateY(26px) scale(0.72) rotateX(0deg);
  animation: candle-pop 780ms cubic-bezier(.2, 1.35, .28, 1) var(--delay) forwards;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  transform-origin: bottom center;
}

body .pop-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc((var(--w) - var(--h)) / -2);
  height: var(--w);
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
  z-index: 0;
}

body .pop-candle i {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body .pop-candle.up {
  color: #56d66d;
  background: linear-gradient(180deg, #7dff9f, #2fc767);
}

body .pop-candle.down {
  color: #ff6464;
  background: linear-gradient(180deg, #ff7777, #e44646);
}

@keyframes candle-pop {
  0% { opacity: 0; transform: translateY(26px) scale(0.72) rotateX(42deg); }
  58% { opacity: 0.82; transform: translateY(-7px) scale(1.08) rotateX(-8deg); }
  100% { opacity: 0.5; transform: translateY(0) scale(1) rotateX(0deg); }
}

body .reveal-sequence {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 7;
  display: grid;
  min-width: min(360px, calc(100% - 36px));
  max-width: 460px;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(86, 214, 109, 0.3);
  border-radius: 14px;
  color: #eef7f1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  background:
    linear-gradient(135deg, rgba(86, 214, 109, 0.18), transparent 48%),
    rgba(10, 16, 24, 0.92);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

body .reveal-sequence.show {
  animation: reveal-sequence-pop 1550ms ease both;
}

body .reveal-sequence span,
body .reveal-sequence em {
  color: rgba(144, 255, 181, 0.78);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body .reveal-sequence strong {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1;
}

@keyframes reveal-sequence-pop {
  0% { opacity: 0; transform: translateY(14px) scale(0.98); }
  14% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.99); }
}

body .education-meter {
  border: 1px solid rgba(86, 214, 109, 0.12);
  background: rgba(86, 214, 109, 0.055);
}

body .education-meter.safe {
  border-color: rgba(86, 214, 109, 0.42);
  background: rgba(86, 214, 109, 0.1);
}

body .education-meter.danger {
  border-color: rgba(228, 70, 70, 0.36);
  background: rgba(228, 70, 70, 0.09);
}

body .arcade-board {
  background:
    radial-gradient(circle at 25% 22%, rgba(86, 214, 109, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 40%),
    #0d121b;
}

body .arcade-stage {
  min-height: 590px;
}

body .arcade-chart-stage,
body .candle-crash-lane,
body .boss-arena {
  position: relative;
  z-index: 1;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(rgba(138, 166, 174, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 166, 174, 0.075) 1px, transparent 1px),
    #071016;
  background-size: 42px 42px;
}

body .arcade-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(138, 166, 174, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 166, 174, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 68% 36%, rgba(86, 214, 109, 0.16), transparent 32%);
  background-size: 42px 42px, 42px 42px, auto;
}

body .arcade-chart-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 64px 0 18px;
  border-bottom: 1px solid rgba(138, 166, 174, 0.1);
  background: rgba(19, 27, 39, 0.86);
  color: rgba(225, 242, 235, 0.76);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .arcade-chart-header b {
  color: var(--green);
  font-size: 11px;
}

body .arcade-price-axis {
  position: absolute;
  top: 52px;
  right: 10px;
  bottom: 42px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 56px;
  color: rgba(225, 242, 235, 0.54);
  font-size: 10px;
  font-weight: 850;
  text-align: right;
  pointer-events: none;
}

body .arcade-time-axis {
  position: absolute;
  left: 18px;
  right: 72px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  color: rgba(225, 242, 235, 0.48);
  font-size: 10px;
  font-weight: 850;
  pointer-events: none;
}

body .arcade-volume-bars {
  position: absolute;
  left: 20px;
  right: 74px;
  bottom: 42px;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 36px;
  pointer-events: none;
  opacity: 0.28;
}

body .arcade-volume-bars i {
  display: block;
  width: 7px;
  height: var(--h);
  border-radius: 2px 2px 0 0;
  transform: scaleY(0.2);
  transform-origin: bottom;
  animation: volume-rise 520ms ease var(--delay) forwards;
  max-height: 36px;
}

body .arcade-volume-bars i.up {
  background: rgba(86, 214, 109, 0.56);
}

body .arcade-volume-bars i.down {
  background: rgba(228, 70, 70, 0.56);
}

@keyframes volume-rise {
  to { transform: scaleY(1); }
}

body .arcade-crosshair {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

body .arcade-crosshair.vertical {
  top: 42px;
  bottom: 28px;
  left: 62%;
  width: 1px;
  background: rgba(246, 195, 78, 0.42);
}

body .arcade-crosshair.horizontal {
  left: 18px;
  right: 72px;
  top: 54%;
  height: 1px;
  background: rgba(113, 153, 255, 0.34);
}

body .arcade-candle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: var(--h);
  border-radius: 3px;
  isolation: isolate;
  opacity: 0;
  transform: translateY(34px) scale(0.75);
  transform-style: preserve-3d;
  animation: arcade-candle-in 760ms cubic-bezier(.2, 1.35, .28, 1) var(--delay) forwards;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset -5px 0 0 rgba(0, 0, 0, 0.18),
    0 12px 16px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
}

body .arcade-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc((var(--w) - var(--h)) / -2);
  height: var(--w);
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: currentColor;
  z-index: 0;
}

body .arcade-candle b {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: inherit;
  box-shadow:
    inset 4px 0 0 rgba(255, 255, 255, 0.14),
    inset -4px 0 0 rgba(0, 0, 0, 0.22);
}

body .arcade-candle em {
  position: absolute;
  top: 4px;
  right: -5px;
  bottom: 4px;
  z-index: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, 0.28);
  transform: skewY(-11deg);
  transform-origin: left center;
}

body .arcade-candle span {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  z-index: 2;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  opacity: 0.58;
  pointer-events: none;
}

body .arcade-candle.up {
  color: #56d66d;
  background: linear-gradient(180deg, #66f38b, #27bf65);
}

body .arcade-candle.down {
  color: #ff5f57;
  background: linear-gradient(180deg, #ff7770, #e44646);
}

@keyframes arcade-candle-in {
  0% { opacity: 0; transform: translateY(34px) scale(0.75) rotate(-4deg); }
  68% { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

body .liquidity-line.vwap {
  position: absolute;
  left: 18px;
  right: 72px;
  top: 52%;
  z-index: 3;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(113, 153, 255, 0.12), rgba(113, 153, 255, 0.85), rgba(113, 153, 255, 0.12));
  color: #8fb0ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-indent: 10px;
}

body .liquidity-pool {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 214, 109, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(21, 34, 43, 0.96), rgba(8, 18, 24, 0.96));
  color: #f7fff9;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body .liquidity-pool:hover,
body .liquidity-pool.selected {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(86, 214, 109, 0.86);
  background:
    linear-gradient(180deg, rgba(31, 77, 57, 0.98), rgba(10, 31, 24, 0.98));
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.38), 0 0 0 2px rgba(86, 214, 109, 0.18);
}

body .liquidity-pool b {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

body .liquidity-pool small {
  position: relative;
  z-index: 1;
  color: rgba(225, 242, 235, 0.58);
  font-size: 11px;
  font-weight: 850;
}

body .pool-0 { top: 58px; right: 88px; }
body .pool-1 { bottom: 46px; left: 30px; }
body .pool-2 { top: 46%; right: 88px; }
body .pool-3 { bottom: 50px; right: 36%; }

body .liquidity-sweep-beam {
  position: absolute;
  z-index: 1;
  left: 18%;
  top: 32%;
  width: 64%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 216, 77, 0.92), transparent);
  transform: rotate(-11deg);
  animation: sweep-beam 1.8s ease-in-out infinite;
}

@keyframes sweep-beam {
  0%, 100% { opacity: 0.24; transform: translateX(-18px) rotate(-11deg); }
  50% { opacity: 0.96; transform: translateX(24px) rotate(-11deg); }
}

body .game-walkthrough-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

body .game-walkthrough-modal.hidden {
  display: none !important;
}

body .game-walkthrough-card {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(86, 214, 109, 0.24);
  border-radius: 22px;
  background:
    linear-gradient(rgba(86, 214, 109, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.045) 1px, transparent 1px),
    #151a23;
  background-size: 42px 42px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  padding: 28px;
  color: #f7fff9;
  animation: walkthrough-in 220ms ease both;
}

body .game-walkthrough-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(138, 166, 174, 0.18);
  border-radius: 12px;
  background: rgba(8, 14, 20, 0.74);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

body .game-walkthrough-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 52px;
}

body .game-walkthrough-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(86, 214, 109, 0.36);
  border-radius: 18px;
  background: rgba(86, 214, 109, 0.12);
  color: var(--green);
}

body .game-walkthrough-icon svg {
  width: 28px;
  height: 28px;
}

body .game-walkthrough-head p {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body .game-walkthrough-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

body .game-walkthrough-why {
  margin: 22px 0 0;
  max-width: 650px;
  color: rgba(225, 242, 235, 0.72);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.45;
}

body .game-walkthrough-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

body .game-walkthrough-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  border: 1px solid rgba(138, 166, 174, 0.14);
  border-radius: 16px;
  background: rgba(7, 16, 22, 0.72);
  padding: 14px;
}

body .game-walkthrough-step b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(86, 214, 109, 0.34);
  border-radius: 50%;
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

body .game-walkthrough-step span {
  color: rgba(247, 255, 249, 0.86);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

body .game-walkthrough-start {
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #55f59a, #2cd36b);
  color: #05120b;
  font-size: 17px;
  font-weight: 950;
  cursor: pointer;
}

@keyframes walkthrough-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
  body .game-walkthrough-modal {
    padding: 14px;
  }

  body .game-walkthrough-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  body .game-walkthrough-steps {
    grid-template-columns: 1fr;
  }
}

body .candle-crash-lane {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(138, 166, 174, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 166, 174, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 52%, rgba(255, 223, 77, 0.22), transparent 24%),
    linear-gradient(135deg, rgba(186, 60, 150, 0.3), transparent 50%),
    #080d16;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

body .combo-badge,
body .crash-zone {
  position: absolute;
  z-index: 2;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

body .combo-badge {
  top: 54px;
  left: 22px;
  color: #101620;
  background: #ffdf4d;
  box-shadow: 0 10px 22px rgba(255, 223, 77, 0.18);
  animation: combo-pop 1.6s ease-in-out infinite;
}

body .crash-zone {
  right: 22px;
  bottom: 24px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 95, 87, 0.22);
}

@keyframes combo-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(-2deg); }
}

body .crash-spark {
  position: absolute;
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffdf4d;
  animation: spark-float 1.4s ease-in-out infinite;
}

body .crash-spark.s1 { left: 28%; top: 26%; }
body .crash-spark.s2 { right: 26%; top: 36%; animation-delay: 220ms; }
body .crash-spark.s3 { left: 50%; bottom: 24%; animation-delay: 440ms; }

@keyframes spark-float {
  0%, 100% { opacity: 0.25; transform: translateY(10px) scale(0.8); }
  50% { opacity: 1; transform: translateY(-10px) scale(1.15); }
}

body .arcade-choice-grid {
  display: grid;
  gap: 10px;
}

body .arcade-choice {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: #f7fff9;
  font-size: 15px;
  font-weight: 950;
  text-align: left;
  padding: 0 16px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body .arcade-choice:hover {
  transform: translateX(4px);
  border-color: rgba(86, 214, 109, 0.54);
  background: rgba(86, 214, 109, 0.09);
}

body .arcade-choice.correct {
  border-color: rgba(86, 214, 109, 0.72);
  background: rgba(86, 214, 109, 0.18);
}

body .arcade-choice.wrong {
  border-color: rgba(228, 70, 70, 0.72);
  background: rgba(228, 70, 70, 0.16);
}

body .arcade-score-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}

body .arcade-score-card span {
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .arcade-score-card b {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

body .boss-arena {
  min-height: 390px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 93, 115, 0.22), transparent 28%),
    linear-gradient(rgba(255, 93, 115, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 93, 115, 0.04) 1px, transparent 1px),
    #090d16;
  background-size: auto, 42px 42px, 42px 42px;
}

body .boss-health,
body .player-health {
  position: absolute;
  left: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  color: rgba(225, 242, 235, 0.72);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body .boss-health { top: 22px; }
body .player-health { bottom: 22px; }

body .boss-health i,
body .player-health i {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5d73 72%, rgba(255, 255, 255, 0.12) 72%);
}

body .player-health i {
  background: linear-gradient(90deg, #56d66d 88%, rgba(255, 255, 255, 0.12) 88%);
}

body .boss-monster {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 170px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 42% 42% 34% 34%;
  background: linear-gradient(180deg, #5b234f, #141724);
  border: 2px solid rgba(255, 93, 115, 0.42);
  animation: boss-bob 1.7s ease-in-out infinite;
}

body .boss-monster b,
body .boss-monster i {
  position: absolute;
  top: 58px;
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5d73;
}

body .boss-monster b { left: 44px; }
body .boss-monster i { right: 44px; }

body .boss-monster em {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 44px;
  height: 10px;
  border-radius: 999px;
  background: #ffdf4d;
}

@keyframes boss-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -54%) scale(1.04); }
}

body .boss-attack {
  position: absolute;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 93, 115, 0.17);
  border: 1px solid rgba(255, 93, 115, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  animation: attack-float 1.6s ease-in-out infinite;
}

body .attack-one { left: 18%; top: 34%; }
body .attack-two { right: 16%; top: 36%; animation-delay: 220ms; }
body .attack-three { left: 43%; bottom: 25%; animation-delay: 440ms; }

@keyframes attack-float {
  0%, 100% { transform: translateY(0); opacity: 0.64; }
  50% { transform: translateY(-12px); opacity: 1; }
}

body .risk-lab-board .education-stage {
  background:
    radial-gradient(circle at 48% 58%, rgba(86, 214, 109, 0.16), transparent 34%),
    linear-gradient(135deg, #101e24, #0d121b 72%);
}

body .risk-console {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin: 0 auto;
  width: min(720px, 100%);
}

body .risk-orb {
  display: grid;
  place-items: center;
  width: clamp(180px, 23vw, 300px);
  aspect-ratio: 1;
  border: 2px solid rgba(86, 214, 109, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(86, 214, 109, 0.28), transparent 38%),
    #0b1119;
  transition: border-color 180ms ease, background 180ms ease;
}

body .risk-orb b {
  color: #f7fff9;
  font-size: clamp(38px, 6vw, 86px);
  font-weight: 950;
  line-height: 0.9;
}

body .risk-orb span {
  margin-top: -18px;
  color: rgba(225, 242, 235, 0.64);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body .risk-orb.caution {
  border-color: rgba(255, 216, 77, 0.55);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 216, 77, 0.22), transparent 38%),
    #111117;
}

body .risk-orb.danger {
  border-color: rgba(228, 70, 70, 0.55);
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 70, 70, 0.2), transparent 38%),
    #130f14;
}

body .risk-needle-wrap {
  position: relative;
  width: min(520px, 90%);
  height: 92px;
  border-bottom: 12px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 260px 260px;
}

body .risk-needle-wrap::before {
  content: "";
  position: absolute;
  inset: auto 10% -12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #ffd84d, #e44646);
}

body .risk-needle-wrap i {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 4px;
  height: 92px;
  border-radius: 999px;
  background: #fff;
  transform-origin: center bottom;
  transition: transform 180ms ease;
}

body .risk-readouts,
body .prop-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

body .risk-readouts span,
body .prop-health div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(225, 242, 235, 0.58);
  font-size: 12px;
  font-weight: 850;
}

body .risk-readouts b,
body .prop-health b {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

body .news-desk-board .education-stage {
  background:
    radial-gradient(circle at 78% 38%, rgba(122, 215, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #0d1b28, #0d121b 72%);
}

body .news-board {
  display: grid;
  gap: 18px;
}

body .news-event-card {
  display: grid;
  gap: 10px;
  max-width: 760px;
  padding: 20px;
  border: 1px solid rgba(122, 215, 255, 0.22);
  border-radius: 16px;
  background: rgba(122, 215, 255, 0.075);
}

body .news-event-card small {
  color: #7ad7ff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body .news-event-card b {
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

body .news-event-card span {
  color: rgba(225, 242, 235, 0.68);
  font-size: 14px;
  font-weight: 900;
}

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

body .risk-lanes span,
body .market-impact-grid span {
  min-height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(225, 242, 235, 0.56);
  font-size: 18px;
  font-weight: 950;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

body .risk-lanes span.active,
body .market-impact-grid span.active {
  transform: translateY(-2px);
  border-color: rgba(86, 214, 109, 0.5);
  background: rgba(86, 214, 109, 0.13);
  color: #fff;
}

body .risk-lanes span.medium {
  border-color: rgba(255, 216, 77, 0.5);
  background: rgba(255, 216, 77, 0.12);
}

body .risk-lanes span.high {
  border-color: rgba(228, 70, 70, 0.5);
  background: rgba(228, 70, 70, 0.12);
}

body .market-impact-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body .market-impact-grid span {
  min-height: 68px;
  font-size: 16px;
}

body .prop-escape-board .education-stage {
  background:
    radial-gradient(circle at 72% 40%, rgba(255, 93, 115, 0.17), transparent 30%),
    linear-gradient(135deg, #24121a, #0d121b 72%);
}

body .prop-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body .prop-path span {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 128px;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(225, 242, 235, 0.58);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

body .prop-path span b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
}

body .prop-path span.complete {
  border-color: rgba(86, 214, 109, 0.48);
  background: rgba(86, 214, 109, 0.1);
  color: #fff;
}

body .prop-path span.complete b {
  background: var(--green);
  color: #06100b;
}

body .prop-path span.danger {
  border-color: rgba(228, 70, 70, 0.44);
  background: rgba(228, 70, 70, 0.1);
}

body .prop-health {
  margin-top: 18px;
}

@media (max-width: 1080px) {
  body .education-arena {
    grid-template-columns: 1fr;
  }

  body .education-stage {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  body .education-arena {
    padding: 12px;
  }

  body .education-stage,
  body .education-controls {
    padding: 16px;
  }

  body .risk-readouts,
  body .prop-health,
  body .risk-lanes,
  body .market-impact-grid,
  body .prop-path {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  body .game-mode-grid.mode-shelf-stack,
  body .training-game-grid.mode-shelf-stack {
    grid-template-columns: 1fr !important;
  }

  body .mode-shelf-track {
    grid-auto-columns: minmax(184px, 220px);
  }
}

@media (max-width: 768px) {
  body .mode-shelf-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body .mode-shelf-track {
    grid-auto-columns: minmax(164px, 46vw);
  }
}

@media (max-width: 480px) {
  body .mode-shelf-track {
    grid-auto-columns: minmax(168px, 78vw);
  }
}

body #notification-slot .return-recap,
body #notification-slot .free-plan-banner {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  transform: none !important;
}

body #notification-slot .return-recap.hidden,
body #notification-slot .free-plan-banner.hidden {
  display: none !important;
}

body #notification-slot .return-recap {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(21, 26, 35, 0.82) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

body #notification-slot .return-recap span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #notification-slot .return-recap .mode-start,
body #notification-slot .free-plan-upgrade {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(86, 214, 109, 0.12) !important;
  color: #56d66d !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body #notification-slot #close-return-recap {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.62) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

body #notification-slot .free-plan-banner.free-plan-calm {
  border: 1px solid rgba(86, 214, 109, 0.18) !important;
  background: rgba(17, 34, 28, 0.78) !important;
  color: rgba(210, 255, 230, 0.84) !important;
}

body #notification-slot .free-plan-banner.free-plan-warning {
  border-color: rgba(246, 195, 78, 0.32) !important;
  background: rgba(51, 39, 20, 0.84) !important;
  color: #ffe2a3 !important;
}

body #notification-slot .free-plan-banner.used-up {
  border-color: rgba(228, 70, 70, 0.34) !important;
  background: rgba(47, 18, 20, 0.86) !important;
  color: #ffc5c5 !important;
}

body #notification-slot .free-plan-banner span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .beta-banner {
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 24px 0 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(246, 195, 78, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(42, 38, 20, 0.52) !important;
  box-shadow: none !important;
  color: rgba(255, 231, 168, 0.84) !important;
  font-size: 12px !important;
}

body .beta-banner.hidden {
  display: none !important;
}

body .beta-banner button {
  min-height: 0 !important;
  padding: 5px 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

body .beta-banner button:last-child {
  width: 22px !important;
  height: 22px !important;
}

body .topbar-status {
  flex: 0 0 auto !important;
}

body #topbar-xp,
body #topbar-plan {
  display: none !important;
}

body .assistant-widget {
  right: 18px !important;
  bottom: 18px !important;
}

body .assistant-fab {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(86, 214, 109, 0.36) !important;
  background: #151a23 !important;
  color: #56d66d !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body .assistant-fab svg {
  width: 18px !important;
  height: 18px !important;
}

body .assistant-dot {
  top: 2px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border: 1px solid #151a23 !important;
  box-shadow: none !important;
}

/* Business foundation layer: scenario moat, paid-tier proof, and trust controls. */
body .foundation-section {
  display: none;
  width: 100%;
  margin: 32px 0 0;
}

body[data-view="home"] .foundation-section,
body[data-page="home"] .foundation-section {
  display: block;
}

body .foundation-grid,
body .plan-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

body .foundation-card,
body .plan-proof-grid article,
body .trust-card {
  border: 1px solid rgba(86, 214, 109, 0.13);
  background: linear-gradient(180deg, rgba(21, 26, 35, 0.96), rgba(13, 18, 25, 0.96));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body .foundation-primary {
  border-color: rgba(86, 214, 109, 0.28);
}

body .foundation-icon,
body .proof-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(86, 214, 109, 0.24);
  border-radius: 11px;
  background: rgba(86, 214, 109, 0.12);
  color: #56d66d;
}

body .foundation-icon svg,
body .proof-icon svg {
  width: 19px;
  height: 19px;
}

body .foundation-card h3,
body .plan-proof-grid strong {
  display: block;
  margin: 0 0 10px;
  color: #f4fff8;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body .foundation-card p,
body .plan-proof-grid p,
body .trust-checklist span {
  margin: 0;
  color: rgba(225, 242, 235, 0.68);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

body .foundation-card ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body .foundation-card li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 850;
}

body .foundation-card li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #56d66d;
}

body .weekly-habit-loop {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 10px;
  background: rgba(86, 214, 109, 0.055);
}

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

body .weekly-loop-header strong {
  color: #f4fff8;
  font-size: 13px;
  font-weight: 950;
}

body .weekly-loop-header span,
body .weekly-habit-loop small {
  color: rgba(225, 242, 235, 0.62);
  font-size: 12px;
  font-weight: 850;
}

body .weekly-habit-loop .bar-track {
  height: 8px;
}

body .foundation-progress {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

body .foundation-progress strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

body .foundation-progress span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 800;
}

body .practice-path-section {
  display: none;
  width: 100%;
  margin: 28px 0 0;
}

body[data-view="home"] .practice-path-section,
body[data-page="home"] .practice-path-section {
  display: block;
}

body .practice-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

body .practice-path-card {
  display: grid;
  gap: 10px;
  min-height: 230px;
  padding: 20px;
  text-align: left;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(21, 26, 35, 0.96), rgba(13, 18, 25, 0.96));
  color: inherit;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

body .practice-path-card:hover {
  transform: translateY(-3px);
  border-color: rgba(86, 214, 109, 0.34);
  background: linear-gradient(180deg, rgba(24, 34, 42, 0.98), rgba(13, 22, 25, 0.98));
}

body .practice-path-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(86, 214, 109, 0.22);
  border-radius: 12px;
  background: rgba(86, 214, 109, 0.1);
  color: #56d66d;
}

body .practice-path-icon svg {
  width: 20px;
  height: 20px;
}

body .practice-path-card small {
  color: #56d66d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body .practice-path-card strong {
  color: #f4fff8;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

body .practice-path-card p {
  margin: 0;
  color: rgba(225, 242, 235, 0.66);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.42;
}

body .practice-path-card em {
  align-self: end;
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 216, 77, 0.22);
  border-radius: 999px;
  background: rgba(255, 216, 77, 0.08);
  color: #ffe2a3;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

body .plan-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0;
}

body .plan-proof-grid article {
  padding: 18px;
  border-radius: 12px;
}

body .plan-proof-grid .coach-proof {
  border-color: rgba(185, 101, 255, 0.28);
}

body .plan-proof-grid .coach-proof .proof-icon {
  border-color: rgba(185, 101, 255, 0.32);
  background: rgba(185, 101, 255, 0.13);
  color: #b965ff;
}

body .plan-proof-grid .elite-proof {
  border-color: rgba(255, 216, 77, 0.34);
}

body .plan-proof-grid .elite-proof .proof-icon {
  border-color: rgba(255, 216, 77, 0.36);
  background: rgba(255, 216, 77, 0.14);
  color: #ffd84d;
}

body .trust-card {
  grid-column: 1 / -1;
}

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

body .trust-checklist div {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

body .trust-checklist svg {
  width: 19px;
  height: 19px;
  color: #56d66d;
}

body .trust-checklist strong {
  color: #f4fff8;
  font-size: 14px;
  font-weight: 950;
}

@media (max-width: 640px) {
  .profile-weekly-head,
  .profile-weekly-stats {
    grid-template-columns: 1fr;
  }

  .profile-weekly-head {
    display: grid;
  }

  .profile-weekly-cta {
    width: 100%;
  }

  body #notification-slot {
    margin: 10px 0 14px !important;
  }

  body #notification-slot .return-recap,
  body #notification-slot .free-plan-banner,
  body .beta-banner {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  body .assistant-widget {
    right: 14px !important;
    bottom: 78px !important;
  }
}

@media (max-width: 900px) {
  body .foundation-grid,
  body .practice-path-grid,
  body .plan-proof-grid,
  body .trust-checklist {
    grid-template-columns: 1fr;
  }
}

/* Dedicated all-games catalog view. */
body .catalog-section {
  display: none;
  gap: 24px;
  padding-top: 8px;
}

body .catalog-section.active-view,
body .catalog-section.active-page {
  display: grid !important;
}

body .catalog-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(21, 26, 35, 0.98), rgba(13, 31, 30, 0.92));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

body .catalog-hero h2 {
  margin: 6px 0 8px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

body .catalog-hero p:not(.signal) {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

body .catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

body .catalog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #101722;
}

body .catalog-search svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.56);
}

body .catalog-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

body .catalog-search input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

body .catalog-count {
  flex: 0 0 auto;
  padding: 12px 14px;
  border: 1px solid rgba(86, 214, 109, 0.2);
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.08);
  color: #56d66d;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body .catalog-grid,
body .catalog-group {
  display: grid;
  gap: 28px;
  min-width: 0;
}

body .catalog-group {
  gap: 14px;
}

body .catalog-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body .catalog-group-head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
}

body .catalog-group-head p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 800;
}

body .catalog-group-head > span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body .catalog-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

body .catalog-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 318px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #151a23;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transition: transform 200ms ease, filter 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

body .catalog-mode-card:hover,
body .catalog-mode-card:focus-visible {
  transform: scale(1.03);
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--catalog-accent) 72%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  outline: none;
}

body .catalog-mode-locked {
  filter: saturate(0.9) brightness(0.82);
}

body .catalog-mode-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: var(--catalog-bg);
}

body .catalog-mode-art .flat-mode-illustration {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body .catalog-mode-art b {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 5px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body .catalog-mode-copy {
  display: grid;
  gap: 5px;
  padding: 14px 16px 8px;
}

body .catalog-mode-copy small {
  color: var(--catalog-accent);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body .catalog-mode-copy strong {
  color: #fff;
  font-size: clamp(20px, 1.45vw, 22px);
  font-weight: 950;
  line-height: 1.03;
  letter-spacing: -0.01em;
}

body .catalog-mode-copy span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

body .catalog-mode-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: auto 16px 0;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

body .catalog-mode-status i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--catalog-accent);
}

body .catalog-empty {
  display: grid;
  gap: 6px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #101722;
  color: #fff;
}

body .catalog-empty span {
  color: rgba(255, 255, 255, 0.52);
  font-weight: 800;
}

.result-next-step-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(86, 214, 109, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(86, 214, 109, 0.12), rgba(21, 26, 35, 0.86));
  color: #ecfff7;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.result-next-step-card:hover,
.result-next-step-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(86, 214, 109, 0.46);
  background: linear-gradient(135deg, rgba(86, 214, 109, 0.18), rgba(21, 26, 35, 0.9));
  outline: none;
}

.result-next-step-card span {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(255, 211, 90, 0.26);
  border-radius: 999px;
  background: rgba(255, 211, 90, 0.1);
  color: #ffe08a;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-next-step-card strong {
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}

.result-next-step-card p {
  margin: 0;
  color: rgba(232, 248, 242, 0.68);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.result-next-step-card b {
  color: #56d66d;
  font-size: 12px;
  font-weight: 950;
}

.result-save-progress-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(244, 98, 42, 0.22);
  border-radius: 12px;
  background: rgba(244, 98, 42, 0.08);
}

.result-save-progress-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.result-save-progress-card span {
  color: #ffd5a6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-save-progress-card strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.result-save-progress-card button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: #56d66d;
  color: #06120b;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.onboarding-microcopy {
  max-width: 720px;
  margin: -6px 0 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.first-session-path {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.first-session-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(7, 12, 17, 0.36);
}

.first-session-step b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(86, 214, 109, 0.28);
  border-radius: 999px;
  color: #56d66d;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.first-session-step span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.first-session-step strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.first-session-step small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-session-step.done {
  border-color: rgba(86, 214, 109, 0.2);
  background: rgba(86, 214, 109, 0.08);
}

.first-session-step.done b {
  border-color: transparent;
  background: #56d66d;
  color: #06120b;
}

.verified-replay-pill {
  border-color: rgba(86, 214, 109, 0.26) !important;
  background: rgba(86, 214, 109, 0.1) !important;
  color: #c8ffda !important;
}

.verified-replay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(86, 214, 109, 0.18);
  border-radius: 12px;
  background: rgba(86, 214, 109, 0.07);
}

.verified-replay-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(236, 255, 247, 0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.verified-replay-strip svg {
  width: 14px;
  height: 14px;
  color: #56d66d;
  stroke-width: 2.5;
}

.result-share-moment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 211, 90, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 211, 90, 0.1), rgba(21, 26, 35, 0.88));
}

.result-share-moment div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.result-share-moment span {
  color: #ffe08a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.result-share-moment strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
}

.result-share-moment p {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-share-moment button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255, 211, 90, 0.24);
  border-radius: 9px;
  background: rgba(255, 211, 90, 0.12);
  color: #ffe08a;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.result-share-moment button:hover,
.result-share-moment button:focus-visible {
  border-color: rgba(255, 211, 90, 0.42);
  background: rgba(255, 211, 90, 0.18);
  outline: none;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .result-save-progress-card {
    align-items: stretch;
    flex-direction: column;
  }

  .result-save-progress-card button {
    width: 100%;
  }

  .result-share-moment {
    align-items: stretch;
    flex-direction: column;
  }

  .result-share-moment button {
    width: 100%;
  }
}

@media (max-width: 1280px) {
  body .catalog-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body .catalog-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body .catalog-hero,
  body .catalog-toolbar,
  body .catalog-group-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body .catalog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body .catalog-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact profile dashboard pass. Keeps all profile features, but removes the oversized empty-card feel. */
body .profile-section {
  margin-top: 24px !important;
}

body .profile-hero {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 16px !important;
  min-height: 0 !important;
  margin-bottom: 16px !important;
  padding: 16px 18px !important;
}

body .profile-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

body .profile-hero h2 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 2px 0 4px !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.05 !important;
}

body .profile-hero p {
  overflow: hidden !important;
  max-width: 680px !important;
  font-size: 13px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-access {
  gap: 3px !important;
  min-width: 176px !important;
  padding: 10px 12px !important;
  justify-items: start !important;
}

body .profile-access strong {
  font-size: 18px !important;
  line-height: 1 !important;
}

body .profile-access small {
  max-width: 190px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-empty-state {
  margin-bottom: 16px !important;
  padding: 16px !important;
}

body .profile-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body .profile-rank-card,
body .profile-stat-card,
body .profile-sub-card,
body .profile-wide,
body .referral-card {
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 12px !important;
}

body .profile-rank-card {
  grid-column: span 2 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 10px !important;
  align-items: center !important;
}

body .profile-stat-card {
  grid-column: span 2 !important;
  align-content: start !important;
  gap: 6px !important;
}

body .profile-rank-card > span,
body .profile-stat-card > span {
  font-size: 12px !important;
  line-height: 1 !important;
}

body .profile-rank-card > strong {
  overflow: hidden !important;
  font-size: clamp(26px, 2vw, 34px) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-stat-card strong {
  font-size: clamp(28px, 2.4vw, 42px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
}

body .profile-stat-card small {
  max-width: 190px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body .profile-ring {
  grid-row: 1 / span 3 !important;
  grid-column: 2 !important;
  width: 58px !important;
  height: 58px !important;
  box-shadow: none !important;
}

body .profile-ring b {
  font-size: 20px !important;
}

body .profile-ring small {
  margin-top: -10px !important;
  font-size: 9px !important;
}

body .profile-rank-card .xp-meter {
  grid-column: 1 / -1 !important;
  height: 8px !important;
  margin-top: 2px !important;
}

body .profile-rank-card .xp-meter span {
  display: none !important;
}

body .profile-wide,
body .profile-sub-card,
body .referral-card {
  grid-column: span 6 !important;
}

body .profile-mode-list,
body .profile-recent {
  gap: 8px !important;
  max-height: 420px !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

body .profile-mode-row,
body .profile-recent-row {
  gap: 10px !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
}

body .profile-mode-row strong,
body .profile-recent-row strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

body .profile-mode-row span,
body .profile-recent-row span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body .profile-patterns {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

body .profile-patterns div {
  padding: 12px !important;
  border-radius: 9px !important;
}

body .profile-patterns strong {
  margin-top: 5px !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
}

body .profile-weekly-goal {
  gap: 12px !important;
}

body .profile-weekly-head {
  gap: 12px !important;
}

body .profile-weekly-head > strong {
  font-size: 24px !important;
}

body .profile-weekly-stats {
  gap: 8px !important;
}

body .profile-weekly-stats div {
  padding: 9px !important;
}

body .profile-sub-card h3 {
  margin: 8px 0 !important;
  font-size: 26px !important;
}

body .profile-sub-card p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

@media (max-width: 1180px) {
  body .profile-rank-card,
  body .profile-stat-card {
    grid-column: span 4 !important;
  }

  body .profile-wide,
  body .profile-sub-card,
  body .referral-card {
    grid-column: span 12 !important;
  }
}

@media (max-width: 760px) {
  body .profile-hero {
    grid-template-columns: 1fr !important;
  }

  body .profile-access {
    width: 100% !important;
  }

  body .profile-rank-card,
  body .profile-stat-card {
    grid-column: span 12 !important;
  }
}

/* Referral card polish: compact, reward-focused, and aligned with the tightened profile layout. */
body .referral-card {
  align-content: start !important;
  gap: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 214, 109, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(21, 33, 48, 0.98), rgba(18, 58, 63, 0.78)) !important;
}

body .referral-card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -16px -16px 2px;
  background: linear-gradient(90deg, var(--green), rgba(255, 203, 77, 0.78), transparent);
  opacity: 0.9;
}

body .referral-header {
  gap: 10px !important;
}

body .referral-header .panel-title {
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
}

body .referral-pill {
  min-height: 26px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

body .referral-copy {
  max-width: 720px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body .referral-reward-grid {
  gap: 8px !important;
}

body .referral-reward-grid div {
  min-height: 62px !important;
  padding: 10px 12px !important;
}

body .referral-empty-state {
  margin-top: 2px !important;
}

body .referral-generate-button {
  width: auto !important;
  min-width: 176px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

body .referral-code-row,
body .referral-link-row {
  gap: 8px !important;
}

body .referral-code-field {
  padding: 11px 12px !important;
  border-radius: 10px !important;
}

body .referral-stats-row {
  gap: 8px !important;
}

body .referral-stats-row div {
  padding: 10px 11px !important;
  border-radius: 10px !important;
}

@media (max-width: 760px) {
  body .referral-empty-state {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body .referral-generate-button {
    width: 100% !important;
  }
}

/* 9/10 polish pass: activation clarity, in-game decision clarity, and billing trust. */
body .activation-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

body .activation-panel > div {
  position: relative;
  min-height: 108px;
  padding: 14px 14px 14px 48px;
  border: 1px solid rgba(86, 214, 109, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(21, 32, 44, 0.94), rgba(14, 24, 30, 0.86)),
    rgba(255, 255, 255, 0.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

body .activation-panel span {
  position: absolute;
  left: 14px;
  top: 15px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(86, 214, 109, 0.34);
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.1);
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
}

body .activation-panel strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

body .activation-panel p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

body .game-readiness-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(86, 214, 109, 0.14);
  border-radius: 12px;
  background: rgba(3, 8, 13, 0.46);
}

body .game-readiness-card > span {
  grid-column: 1 / -1;
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .game-readiness-card div {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

body .game-readiness-card i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(86, 214, 109, 0.1);
}

body .billing-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

body .billing-trust-strip div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

body .billing-trust-strip svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--green);
}

body .billing-trust-strip strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

body .billing-trust-strip span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

body .market-tape .neutral {
  color: rgba(255, 255, 255, 0.62) !important;
}

@media (max-width: 980px) {
  body .activation-panel,
  body .billing-trust-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body .game-readiness-card {
    grid-template-columns: 1fr;
  }
}

/* Training path text polish: keep every card self-contained and readable. */
body .practice-path-grid {
  align-items: stretch !important;
}

body .practice-path-card {
  min-width: 0 !important;
  overflow: hidden !important;
  align-content: start !important;
}

body .practice-path-card small,
body .practice-path-card strong,
body .practice-path-card p,
body .practice-path-card em {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body .practice-path-card strong {
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.12 !important;
}

body .practice-path-card p {
  font-size: 13px !important;
  line-height: 1.38 !important;
}

@media (max-width: 1180px) {
  body .practice-path-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final-stage product polish: clearer next action and more meaningful game catalog cards. */
body .profile-command-center {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.55fr) minmax(280px, 0.8fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 16px 0 18px !important;
  padding: 18px !important;
  border-color: rgba(86, 214, 109, 0.2) !important;
  background:
    linear-gradient(135deg, rgba(21, 32, 48, 0.96), rgba(14, 34, 37, 0.9)),
    rgba(255, 255, 255, 0.02) !important;
}

body .profile-command-copy {
  min-width: 0 !important;
}

body .profile-command-copy h3 {
  margin: 3px 0 6px !important;
  color: #ffffff !important;
  font-size: clamp(22px, 2vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

body .profile-command-copy p:last-child {
  max-width: 680px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
}

body .profile-command-focus,
body .profile-command-metrics > div {
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(5, 13, 19, 0.46) !important;
}

body .profile-command-focus span,
body .profile-command-metrics span {
  display: block !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body .profile-command-focus strong,
body .profile-command-metrics strong {
  display: block !important;
  margin-top: 4px !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow-wrap: break-word !important;
}

body .profile-command-focus small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--green) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body .profile-command-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .profile-command-center .primary-button {
  min-width: 152px !important;
  height: 48px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}

body .catalog-mode-copy .catalog-mode-proof {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-style: normal !important;
}

body .catalog-mode-copy .catalog-mode-proof b,
body .catalog-mode-copy .catalog-mode-proof i,
body .catalog-mode-copy .catalog-mode-proof mark {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

body .catalog-mode-copy .catalog-mode-proof b {
  border-color: color-mix(in srgb, var(--catalog-accent) 48%, transparent) !important;
  color: var(--catalog-accent) !important;
}

body .catalog-mode-copy .catalog-mode-proof mark {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: rgba(86, 214, 109, 0.08) !important;
}

@media (max-width: 1180px) {
  body .profile-command-center {
    grid-template-columns: 1fr 1fr !important;
  }

  body .profile-command-copy,
  body .profile-command-metrics {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 680px) {
  body .profile-command-center,
  body .profile-command-metrics {
    grid-template-columns: 1fr !important;
  }

  body .profile-command-center .primary-button {
    width: 100% !important;
  }
}

/* Post-answer result consolidation. Keeps the same content, but prevents the result rail from becoming a long vertical stack. */
body .trainer-grid.result-mode {
  align-items: start !important;
}

@media (min-width: 1180px) {
  body .trainer-grid.result-mode {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 560px) !important;
  }
}

body .trainer-grid.result-mode .game-panel {
  gap: 12px !important;
}

body .trainer-grid.result-mode .result-panel {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-height: calc(100vh - 156px) !important;
  padding: 14px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

body .trainer-grid.result-mode .result-panel.hidden {
  display: none !important;
}

body .trainer-grid.result-mode .grade {
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
}

body .trainer-grid.result-mode .result-panel h4 {
  font-size: clamp(20px, 1.5vw, 28px) !important;
  line-height: 1.02 !important;
}

body .trainer-grid.result-mode .result-panel #explanation {
  display: -webkit-box !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: rgba(225, 242, 235, 0.72) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
}

body .trainer-grid.result-mode .xp-line {
  margin-top: 8px !important;
  font-size: 14px !important;
}

body .trainer-grid.result-mode .result-extras {
  display: grid !important;
  gap: 10px !important;
  margin: 10px 0 !important;
}

body .result-compact-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap: 8px !important;
}

body .result-compact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body .result-momentum-hook {
  padding: 10px 12px;
  border: 1px solid rgba(246, 195, 78, 0.24);
  border-radius: 12px;
  color: #ffe6a8;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.32;
  background:
    linear-gradient(135deg, rgba(246, 195, 78, 0.12), transparent 62%),
    rgba(246, 195, 78, 0.055);
}

body .result-compact-grid > * {
  min-width: 0 !important;
  margin: 0 !important;
}

body .trainer-grid.result-mode .coach-tone-line,
body .trainer-grid.result-mode .beat-crowd-stat,
body .trainer-grid.result-mode .result-momentum-hook,
body .trainer-grid.result-mode .verified-replay-strip,
body .trainer-grid.result-mode .daily-exam-board,
body .trainer-grid.result-mode .trade-score-card,
body .trainer-grid.result-mode .result-next-step-card,
body .trainer-grid.result-mode .result-share-moment,
body .trainer-grid.result-mode .result-save-progress-card {
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body .trainer-grid.result-mode .coach-tone-line,
body .trainer-grid.result-mode .beat-crowd-stat {
  display: grid !important;
  align-content: center !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
}

body .trainer-grid.result-mode .coach-tone-line {
  gap: 4px !important;
}

body .trainer-grid.result-mode .coach-tone-line b {
  color: #eef7f1 !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
}

body .trainer-grid.result-mode .coach-tone-line span {
  color: rgba(225, 242, 235, 0.66) !important;
}

body .trainer-grid.result-mode .result-momentum-hook {
  display: grid !important;
  align-content: center !important;
  min-height: 0 !important;
}

body .trainer-grid.result-mode .verified-replay-strip {
  grid-column: 1 / -1 !important;
  gap: 6px !important;
}

body .trainer-grid.result-mode .verified-replay-strip span {
  font-size: 10px !important;
}

body .trainer-grid.result-mode .daily-exam-board,
body .trainer-grid.result-mode .trade-score-card {
  gap: 6px !important;
}

body .trainer-grid.result-mode .daily-exam-board > strong,
body .trainer-grid.result-mode .trade-score-card > strong,
body .trainer-grid.result-mode .result-next-step-card strong,
body .trainer-grid.result-mode .result-share-moment strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

body .trainer-grid.result-mode .daily-exam-board > span,
body .trainer-grid.result-mode .daily-exam-board p,
body .trainer-grid.result-mode .result-next-step-card p,
body .trainer-grid.result-mode .result-share-moment p,
body .trainer-grid.result-mode .result-save-progress-card strong {
  font-size: 11px !important;
  line-height: 1.28 !important;
}

body .trainer-grid.result-mode .result-next-step-card p,
body .trainer-grid.result-mode .result-save-progress-card strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body .trainer-grid.result-mode .result-share-moment,
body .trainer-grid.result-mode .result-save-progress-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body .trainer-grid.result-mode .result-share-moment button,
body .trainer-grid.result-mode .result-save-progress-card button {
  min-height: 34px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

body .trainer-grid.result-mode .result-next-button {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 8px !important;
}

body .trainer-grid.result-mode .result-breakdown {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body .trainer-grid.result-mode .result-breakdown.hidden {
  display: none !important;
}

body .trainer-grid.result-mode .result-breakdown > .result-section,
body .trainer-grid.result-mode .session-summary,
body .trainer-grid.result-mode .level-up-nudge,
body .trainer-grid.result-mode .similar-drill-button,
body .trainer-grid.result-mode .save-review-button {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body .trainer-grid.result-mode .result-breakdown > .result-section {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body .trainer-grid.result-mode .result-breakdown .result-section > div > strong {
  margin-bottom: 4px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

body .trainer-grid.result-mode .result-breakdown p {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(225, 242, 235, 0.68) !important;
  font-size: 11px !important;
  line-height: 1.32 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

body .trainer-grid.result-mode .result-options,
body .trainer-grid.result-mode .result-social,
body .trainer-grid.result-mode .session-summary,
body .trainer-grid.result-mode .level-up-nudge,
body .trainer-grid.result-mode .similar-drill-button,
body .trainer-grid.result-mode .save-review-button {
  grid-column: 1 / -1 !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode,
body[data-active-mode="bossfight"] .trainer-grid.result-mode,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode,
body[data-active-mode="propescape"] .trainer-grid.result-mode {
  grid-template-columns: 1fr !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .replay-card,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .replay-card,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .replay-card,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .replay-card,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .replay-card,
body[data-active-mode="propescape"] .trainer-grid.result-mode .replay-card {
  display: none !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .game-panel,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .game-panel,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .game-panel,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .game-panel,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .game-panel,
body[data-active-mode="propescape"] .trainer-grid.result-mode .game-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 16px !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="risklab"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="risklab"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="risklab"] .trainer-grid.result-mode #question,
body[data-active-mode="risklab"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="risklab"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="risklab"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="risklab"] .trainer-grid.result-mode .control-row,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode #question,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .control-row,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode #question,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .control-row,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="bossfight"] .trainer-grid.result-mode #question,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .control-row,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode #question,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .control-row,
body[data-active-mode="propescape"] .trainer-grid.result-mode .decision-kicker,
body[data-active-mode="propescape"] .trainer-grid.result-mode .score-strip,
body[data-active-mode="propescape"] .trainer-grid.result-mode .tag-line,
body[data-active-mode="propescape"] .trainer-grid.result-mode #question,
body[data-active-mode="propescape"] .trainer-grid.result-mode .mode-instruction,
body[data-active-mode="propescape"] .trainer-grid.result-mode .game-readiness-card,
body[data-active-mode="propescape"] .trainer-grid.result-mode .confidence-picker,
body[data-active-mode="propescape"] .trainer-grid.result-mode .control-row {
  display: none !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .answers,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .answers,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .answers,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .answers,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .answers,
body[data-active-mode="propescape"] .trainer-grid.result-mode .answers {
  min-height: 0 !important;
  max-height: calc(100vh - 168px) !important;
  padding: 12px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(86, 214, 109, 0.12) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(rgba(86, 214, 109, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 214, 109, 0.022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(86, 214, 109, 0.06), transparent 42%),
    rgba(15, 31, 38, 0.72) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .answers:empty,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .answers:empty,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .answers:empty,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .answers:empty,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .answers:empty,
body[data-active-mode="propescape"] .trainer-grid.result-mode .answers:empty {
  display: none !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .result-panel,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .result-panel,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .result-panel,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .result-panel,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .result-panel,
body[data-active-mode="propescape"] .trainer-grid.result-mode .result-panel {
  max-height: calc(100vh - 168px) !important;
  align-self: stretch !important;
}

body[data-active-mode="risklab"] .trainer-grid.result-mode .result-breakdown,
body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .result-breakdown,
body[data-active-mode="candlecrash"] .trainer-grid.result-mode .result-breakdown,
body[data-active-mode="bossfight"] .trainer-grid.result-mode .result-breakdown,
body[data-active-mode="newsdesk"] .trainer-grid.result-mode .result-breakdown,
body[data-active-mode="propescape"] .trainer-grid.result-mode .result-breakdown {
  max-height: calc(100vh - 168px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

@media (min-width: 1540px) {
  body .trainer-grid.result-mode .result-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1360px) {
  body .result-compact-summary,
  body .result-compact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1080px) {
  body .trainer-grid.result-mode,
  body[data-active-mode="risklab"] .trainer-grid.result-mode .game-panel,
  body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .game-panel,
  body[data-active-mode="candlecrash"] .trainer-grid.result-mode .game-panel,
  body[data-active-mode="bossfight"] .trainer-grid.result-mode .game-panel,
  body[data-active-mode="newsdesk"] .trainer-grid.result-mode .game-panel,
  body[data-active-mode="propescape"] .trainer-grid.result-mode .game-panel {
    grid-template-columns: 1fr !important;
  }

  body .trainer-grid.result-mode .result-panel {
    max-height: none !important;
  }

  body[data-active-mode="risklab"] .trainer-grid.result-mode .answers,
  body[data-active-mode="liquidityhunt"] .trainer-grid.result-mode .answers,
  body[data-active-mode="candlecrash"] .trainer-grid.result-mode .answers,
  body[data-active-mode="bossfight"] .trainer-grid.result-mode .answers,
  body[data-active-mode="newsdesk"] .trainer-grid.result-mode .answers,
  body[data-active-mode="propescape"] .trainer-grid.result-mode .answers {
    min-height: 220px !important;
  }
}

@media (max-width: 640px) {
  body .trainer-grid.result-mode .result-panel {
    grid-template-columns: 1fr !important;
  }

  body .trainer-grid.result-mode .grade {
    width: 42px !important;
    height: 42px !important;
  }

  body .trainer-grid.result-mode .result-share-moment,
  body .trainer-grid.result-mode .result-save-progress-card {
    grid-template-columns: 1fr !important;
  }
}

/* Launch snapshot */
.launch-section {
  display: none;
  flex-direction: column;
  gap: 24px;
}

.launch-section.active-view {
  display: flex;
}

.launch-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
}

.launch-hero h2 {
  max-width: 760px;
  margin: 0 0 8px;
  color: #f4fff9;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.launch-hero p:last-child {
  max-width: 680px;
  margin: 0;
  color: rgba(225, 242, 235, 0.68);
}

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

.launch-metric {
  min-height: 142px;
  padding: 20px;
}

.launch-metric span,
.launch-row span,
.launch-activity-item span {
  color: rgba(225, 242, 235, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.launch-metric strong {
  display: block;
  margin-top: 12px;
  color: #56f0a0;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 0.95;
}

.launch-metric small {
  display: block;
  margin-top: 10px;
  color: rgba(225, 242, 235, 0.5);
  line-height: 1.3;
}

.launch-deep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
}

.launch-card {
  padding: 22px;
}

.launch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.launch-row:last-child {
  border-bottom: 0;
}

.launch-row strong {
  color: #f4fff9;
  text-align: right;
}

.launch-activity-list {
  display: grid;
  gap: 10px;
}

.launch-activity-item {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(86, 214, 109, 0.12);
  border-radius: 12px;
  background: rgba(10, 20, 26, 0.62);
}

.launch-activity-item strong {
  min-width: 0;
  overflow: hidden;
  color: #f4fff9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launch-activity-item small {
  color: rgba(225, 242, 235, 0.48);
  white-space: nowrap;
}

.launch-checklist #launch-readiness {
  display: grid;
  gap: 12px;
}

.launch-checklist #launch-readiness div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(225, 242, 235, 0.72);
  font-weight: 800;
}

.launch-checklist svg {
  width: 18px;
  height: 18px;
  color: #56d66d;
}

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

  .launch-deep-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .launch-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }

  .launch-grid {
    grid-template-columns: 1fr;
  }

  .launch-activity-item {
    grid-template-columns: 1fr;
  }

  .launch-activity-item small {
    white-space: normal;
  }
}

/* Launch pricing deal treatment */
body .launch-deal-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid rgba(246, 195, 78, 0.34);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(246, 195, 78, 0.16), rgba(86, 214, 109, 0.08)),
    rgba(15, 20, 27, 0.92);
  color: #fff1c4;
  box-shadow: inset 3px 0 0 rgba(246, 195, 78, 0.8);
}

body .launch-deal-strip.compact {
  margin: 0;
  padding: 10px 14px;
}

body .launch-deal-strip span {
  color: rgba(255, 241, 196, 0.78);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .launch-deal-strip strong {
  color: #56d66d;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 950;
  text-align: right;
}

body .annual-savings-stamp {
  display: none;
  width: fit-content;
  margin: -4px 0 16px auto;
  padding: 7px 11px;
  transform: rotate(1.5deg);
  border: 1px dashed rgba(246, 195, 78, 0.62);
  border-radius: 10px;
  background: rgba(246, 195, 78, 0.1);
  color: #ffe8a3;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .plans-section.annual-pricing .annual-savings-stamp {
  display: block;
}

body .launch-price {
  display: grid !important;
  gap: 5px !important;
  align-items: start !important;
  min-width: 0;
  margin: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: normal !important;
}

body .plans-grid h3.launch-price,
body .pricing-grid strong.launch-price {
  font-size: inherit !important;
}

body .launch-price small {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: rgba(255, 241, 196, 0.72);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body .launch-price small s {
  color: rgba(214, 224, 219, 0.52);
  text-decoration-color: rgba(255, 94, 94, 0.95);
  text-decoration-thickness: 2px;
}

body .launch-price small em,
body .deal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(246, 195, 78, 0.42);
  border-radius: 999px;
  background: rgba(246, 195, 78, 0.14);
  color: #ffe38f;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

body .deal-badge {
  margin-left: 6px;
  vertical-align: middle;
}

body .deal-badge.elite {
  border-color: rgba(255, 221, 124, 0.5);
  background: rgba(255, 221, 124, 0.16);
}

body .plans-grid article > span,
body .pricing-grid h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body .plans-grid article > span .popular-badge,
body .pricing-grid h3 .popular-badge {
  margin-left: 0;
}

body .launch-price > b {
  display: inline-block;
  width: fit-content;
  color: #56d66d;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-shadow: 0 0 14px rgba(86, 214, 109, 0.18);
  animation: launchPriceRadiate 2.8s ease-in-out infinite;
}

body .pricing-grid .launch-price > b {
  font-size: clamp(26px, 2.2vw, 34px);
}

@keyframes launchPriceRadiate {
  0%, 100% {
    color: #56d66d;
    text-shadow: 0 0 10px rgba(86, 214, 109, 0.12);
  }
  50% {
    color: #fff1a8;
    text-shadow: 0 0 14px rgba(246, 195, 78, 0.22);
  }
}

body .plans-grid article.featured-plan,
body .plans-grid article.elite-plan-card,
body .pricing-grid article.featured-plan,
body .pricing-grid article.elite-paywall-plan {
  position: relative;
}

body .plans-grid article.featured-plan::after,
body .plans-grid article.elite-plan-card::after,
body .pricing-grid article.featured-plan::after,
body .pricing-grid article.elite-paywall-plan::after {
  content: none;
  display: none;
}

@media (max-width: 760px) {
  body .launch-deal-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  body .launch-deal-strip strong {
    text-align: left;
  }

  body .annual-savings-stamp {
    margin: -2px 0 14px;
    transform: none;
  }

  body .launch-price > b {
    font-size: 32px;
  }
}

/* Retention pass: clearer game lobby and easier first-play decisions */
body .game-mode-showcase {
  padding-top: 18px;
}

body .training-hub-heading {
  max-width: none;
}

body .training-hub-heading h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.035em;
}

body .training-hub-heading > p:last-of-type {
  max-width: 680px;
  font-size: 15px;
  line-height: 1.45;
}

body .mode-shelf-stack {
  display: grid;
  gap: 26px;
}

body .mode-shelf {
  position: relative;
  min-width: 0;
}

body .mode-shelf-heading {
  align-items: center;
  margin-bottom: 12px;
}

body .mode-shelf-heading h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f5fffb;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 1000;
  letter-spacing: -0.035em;
}

body .mode-shelf-heading h3::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #56d66d;
  border-radius: 4px;
  background: rgba(86, 214, 109, 0.14);
  box-shadow: 0 0 0 4px rgba(86, 214, 109, 0.05);
}

body .mode-shelf[data-shelf="start-here"] .mode-shelf-heading h3::after {
  content: "Recommended";
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.13);
  color: #56d66d;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .mode-shelf-heading p {
  margin: 5px 0 0 22px;
  color: #9db1ad;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

body .mode-shelf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body .mode-shelf-view,
body .mode-shelf-arrow {
  min-height: 36px;
  border-radius: 10px;
  border-color: rgba(145, 183, 193, 0.18);
  background: #172331;
  color: #f4fffb;
  box-shadow: none;
}

body .mode-shelf-view {
  padding: 0 14px;
  font-size: 12px;
  font-weight: 1000;
}

body .mode-shelf-arrow {
  width: 36px;
  font-size: 20px;
  line-height: 1;
}

body .mode-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(184px, 1fr);
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

body .mode-shelf-track::-webkit-scrollbar {
  height: 8px;
}

body .mode-shelf-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(145, 183, 193, 0.22);
}

body .game-mode-card,
body .training-game-grid .game-mode-card {
  min-height: 292px;
  border: 1px solid rgba(145, 183, 193, 0.12);
  border-radius: 14px;
  background: #151a23;
  scroll-snap-align: start;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  transition: transform 200ms ease, border-color 200ms ease, filter 200ms ease, box-shadow 200ms ease;
}

body .game-mode-card:hover,
body .game-mode-card:focus-visible {
  transform: translateY(-4px) scale(1.025);
  border-color: color-mix(in srgb, var(--mode-accent) 62%, rgba(255, 255, 255, 0.16));
  filter: brightness(1.08);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

body .game-mode-card::after {
  content: "PLAY";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(86, 214, 109, 0.14);
  color: #56d66d;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

body .game-mode-card:hover::after,
body .game-mode-card:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

body .game-mode-card.locked-mode::after {
  content: "UPGRADE";
  background: rgba(246, 195, 78, 0.14);
  color: #ffe38f;
}

body .game-art {
  aspect-ratio: 1.12 / 1;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--mode-accent) 38%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--mode-accent) 44%, #101827), #182033 74%);
  border-radius: 14px 14px 0 0;
}

body .game-art::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%),
    linear-gradient(180deg, transparent 62%, rgba(21, 26, 35, 0.7) 100%);
}

body .flat-mode-illustration {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.22));
}

body .flat-mode-illustration .float-shape,
body .flat-mode-illustration .main-shape {
  transform-box: fill-box;
  transform-origin: center;
  animation: modeShapeBounce 3.8s ease-in-out infinite;
}

body .flat-mode-illustration .float-shape {
  animation-delay: -1.4s;
}

body .game-mode-card:hover .flat-mode-illustration .main-shape {
  animation-duration: 1.4s;
}

body .art-scan {
  opacity: 0.28;
  height: 26%;
  animation-duration: 4.8s;
}

body .game-copy {
  gap: 5px;
  padding: 13px 15px 8px;
}

body .game-copy small {
  color: var(--mode-accent);
  font-size: 10px;
  letter-spacing: 0.06em;
}

body .game-copy strong {
  max-width: 100%;
  color: #ffffff;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body .game-copy > span {
  display: block;
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #a8bab6;
  font-size: 12px;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .game-footer {
  width: calc(100% - 30px);
  margin: auto 15px 0;
  padding: 9px 0 13px;
}

body .game-footer b {
  max-width: calc(100% - 54px);
  overflow: hidden;
  color: #c7d7d3;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body .game-footer em {
  display: none;
}

body .trainer-section .section-heading {
  display: grid;
  gap: 8px;
  max-width: 980px;
  margin-bottom: 20px;
}

body .trainer-section .section-heading h2 {
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 0.98;
}

body .trainer-section .section-heading p:not(.signal) {
  max-width: 760px;
  color: #b8c8c4;
  font-size: 16px;
  line-height: 1.45;
}

body .mode-instruction {
  border-left: 3px solid #56d66d;
  background: rgba(86, 214, 109, 0.08);
  color: #d9e8e4;
  font-size: 14px;
  line-height: 1.42;
}

body .mode-instruction::before {
  content: "How to play";
  display: block;
  margin-bottom: 6px;
  color: #56d66d;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body .game-readiness-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 33, 0.72);
}

@keyframes modeShapeBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.035);
  }
}

@media (min-width: 1280px) {
  body .mode-shelf-track {
    grid-auto-columns: minmax(196px, 1fr);
  }
}

@media (max-width: 920px) {
  body .mode-shelf-track {
    grid-auto-columns: minmax(178px, 48%);
  }

  body .mode-shelf-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  body .mode-shelf-track {
    grid-auto-columns: minmax(168px, 82%);
  }

  body .game-mode-card,
  body .training-game-grid .game-mode-card {
    min-height: 270px;
  }

  body .mode-shelf-actions {
    width: 100%;
  }

  body .mode-shelf-view {
    flex: 1;
  }
}

/* ===================== Academy ===================== */

.academy-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.academy-summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(0, 199, 122, 0.12), rgba(0, 216, 196, 0.05));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 28px;
}

.academy-summary-copy h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.academy-summary-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.55;
}

.academy-summary-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
}

.academy-summary-progress > strong {
  font-size: 15px;
  color: var(--text);
}

.academy-summary-bar,
.academy-tier-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.academy-summary-bar i,
.academy-tier-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  transition: width 0.4s ease;
}

.academy-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--green), var(--teal));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.academy-continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(77, 255, 171, 0.25);
}

.academy-continue svg {
  width: 16px;
  height: 16px;
}

.academy-complete-note {
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
}

.academy-tiers {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.academy-tier {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 22px 24px;
}

.academy-tier.locked {
  opacity: 0.62;
}

.academy-tier.complete {
  border-color: rgba(77, 255, 171, 0.4);
}

.academy-tier-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.academy-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(77, 255, 171, 0.1);
  border: 1px solid var(--line-soft);
  color: var(--green);
  flex-shrink: 0;
}

.academy-tier-icon svg {
  width: 24px;
  height: 24px;
}

.academy-tier-title {
  flex: 1;
  min-width: 200px;
}

.academy-tier-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.academy-tier-title h3 {
  margin: 2px 0 4px;
  font-size: 19px;
}

.academy-tier-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.academy-tier-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 120px;
}

.academy-tier-progress strong {
  font-size: 14px;
}

.academy-tier-progress .academy-tier-bar {
  width: 120px;
}

.academy-tier-locknote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.academy-tier-locknote svg {
  width: 14px;
  height: 14px;
}

.academy-tier-lessons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.academy-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 13px 15px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.academy-lesson:hover:not(:disabled) {
  border-color: rgba(77, 255, 171, 0.45);
  transform: translateY(-1px);
}

.academy-lesson:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.academy-lesson-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.academy-lesson.ready .academy-lesson-status {
  background: rgba(77, 255, 171, 0.12);
  color: var(--green);
}

.academy-lesson.done .academy-lesson-status {
  background: rgba(77, 255, 171, 0.2);
  color: var(--green);
}

.academy-lesson-status svg {
  width: 15px;
  height: 15px;
}

.academy-lesson-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.academy-lesson-body strong {
  font-size: 14px;
}

.academy-lesson-body small {
  color: var(--muted);
  font-size: 12px;
}

.academy-lesson-xp {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}

.academy-lesson.done .academy-lesson-xp {
  color: var(--green);
}

/* ---- lesson modal ---- */

.academy-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 8, 0.78);
  backdrop-filter: blur(6px);
}

.academy-modal.hidden {
  display: none;
}

.academy-modal-card {
  position: relative;
  width: min(640px, 100%);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 28px;
}

.academy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}

.academy-modal-close:hover {
  color: var(--text);
}

.academy-modal-close svg {
  width: 16px;
  height: 16px;
}

.academy-modal-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.academy-modal-head h2 {
  margin: 6px 0 12px;
  font-size: 22px;
  padding-right: 40px;
}

.academy-modal-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.academy-modal-dots span {
  width: 22px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}

.academy-modal-dots span.done {
  background: rgba(77, 255, 171, 0.4);
}

.academy-modal-dots span.active {
  background: var(--green);
}

.academy-modal-body h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.academy-modal-body p {
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.65;
  font-size: 14.5px;
}

.academy-modal-body ul {
  margin: 0;
  padding-left: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-modal-body ul li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.academy-modal-body ul li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  color: var(--green);
}

.academy-quiz-question {
  margin-bottom: 18px;
}

.academy-quiz-question > p {
  margin-bottom: 10px;
}

.academy-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-quiz-option {
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.academy-quiz-option:hover {
  border-color: rgba(77, 255, 171, 0.4);
}

.academy-quiz-option.selected {
  border-color: var(--green);
  background: rgba(77, 255, 171, 0.1);
}

.academy-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.academy-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
}

.academy-result.pass .academy-result-icon {
  background: rgba(77, 255, 171, 0.15);
  color: var(--green);
}

.academy-result.fail .academy-result-icon {
  background: rgba(246, 195, 78, 0.14);
  color: var(--gold);
}

.academy-result-icon svg {
  width: 22px;
  height: 22px;
}

.academy-result h3 {
  margin: 0;
}

.academy-result-item {
  border-left: 3px solid var(--line-soft);
  padding: 8px 0 8px 14px;
  margin-bottom: 10px;
}

.academy-result-item.correct {
  border-left-color: var(--green);
}

.academy-result-item.wrong {
  border-left-color: var(--red);
}

.academy-result-item p {
  margin: 0 0 4px;
  font-size: 14px;
}

.academy-result-item small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.academy-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.academy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease;
}

.academy-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.academy-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.academy-btn.primary {
  border: none;
  color: var(--ink);
  background: linear-gradient(135deg, var(--green), var(--teal));
}

.academy-btn.ghost {
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
}

.academy-btn.ghost:hover {
  color: var(--text);
}

.academy-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .academy-section {
    padding: 18px 14px 60px;
  }

  .academy-summary {
    padding: 20px;
  }

  .academy-tier-lessons {
    grid-template-columns: 1fr;
  }

  .academy-modal-card {
    padding: 22px 18px;
  }

  .academy-modal-actions {
    flex-wrap: wrap;
  }
}

/* ===================== Arcade + Tech Design Layer ===================== */

.arcade-kicker {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--green);
  text-shadow: 0 0 12px rgba(77, 255, 171, 0.5);
}

.home-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.home-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.home-block-head h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.home-academy-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.home-academy-meter span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}

.home-academy-meter div {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.home-academy-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 12px rgba(77, 255, 171, 0.6);
}

/* ---- skill path ---- */

.academy-path {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 18px 4px 22px;
  scrollbar-width: thin;
}

.path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 118px;
  font: inherit;
  color: var(--text);
}

.path-node:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.path-node-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--line-soft);
  background: radial-gradient(circle at 30% 30%, rgba(77, 255, 171, 0.08), rgba(10, 16, 14, 0.9));
  color: var(--muted);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.path-node-ring svg {
  width: 24px;
  height: 24px;
}

.path-node:hover:not(:disabled) .path-node-ring {
  transform: translateY(-3px);
}

.path-node.complete .path-node-ring {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.35);
}

.path-node.current .path-node-ring {
  border-color: var(--green);
  color: var(--green);
  animation: pathPulse 2s ease-in-out infinite;
}

@keyframes pathPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 255, 171, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(77, 255, 171, 0); }
}

.path-node.open .path-node-ring {
  border-color: rgba(88, 199, 255, 0.5);
  color: var(--cyan);
}

.path-node-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.path-node-label b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.path-node-label strong {
  font-size: 12.5px;
  max-width: 110px;
  line-height: 1.25;
}

.path-node-label small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--green);
}

.path-connector {
  flex: 1;
  min-width: 26px;
  height: 2px;
  margin-top: 30px;
  background: repeating-linear-gradient(90deg, var(--line-soft) 0 6px, transparent 6px 12px);
}

.path-connector.lit {
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 10px rgba(77, 255, 171, 0.5);
}

.academy-continue.big {
  width: 100%;
  padding: 18px 22px;
  font-size: 16px;
  border-radius: 16px;
}

.academy-continue.big b {
  font-weight: 800;
}

/* ---- arcade hub ---- */

.arcade-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.arcade-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 26px 30px;
  border-radius: 20px;
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(120deg, rgba(77, 255, 171, 0.08), transparent 42%),
    linear-gradient(rgba(77, 255, 171, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.03) 1px, transparent 1px),
    var(--panel);
  background-size: auto, 24px 24px, 24px 24px, auto;
}

.arcade-head h2 {
  margin: 0 0 8px;
  font-size: 30px;
}

.arcade-sub {
  margin: 0;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.55;
}

.arcade-head-stats {
  display: flex;
  gap: 14px;
}

.arcade-head-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(6, 14, 10, 0.6);
  min-width: 110px;
}

.arcade-head-stats strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  color: var(--green);
}

.arcade-head-stats span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.arcade-head-stats .boost strong {
  color: var(--gold);
  font-size: 14px;
}

.arcade-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.arcade-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.arcade-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, rgba(77, 255, 171, 0.06), rgba(6, 14, 10, 0.4));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.arcade-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(77, 255, 171, 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.arcade-card:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: rgba(77, 255, 171, 0.55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(77, 255, 171, 0.14);
}

.arcade-card:hover:not(.locked)::before {
  opacity: 1;
}

.arcade-card.cyan { background: linear-gradient(135deg, rgba(88, 199, 255, 0.08), rgba(6, 12, 16, 0.4)); }
.arcade-card.gold { background: linear-gradient(135deg, rgba(246, 195, 78, 0.09), rgba(16, 13, 6, 0.4)); }
.arcade-card.purple { background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(11, 8, 20, 0.4)); }
.arcade-card.red { background: linear-gradient(135deg, rgba(255, 95, 110, 0.09), rgba(18, 7, 9, 0.4)); }
.arcade-card.orange { background: linear-gradient(135deg, rgba(255, 149, 77, 0.09), rgba(18, 11, 5, 0.4)); }
.arcade-card.blue { background: linear-gradient(135deg, rgba(70, 166, 255, 0.09), rgba(6, 10, 18, 0.4)); }

.arcade-card.locked {
  opacity: 0.55;
  cursor: pointer;
}

.arcade-card-boost {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: linear-gradient(90deg, var(--gold), #ffe29a);
  padding: 3px 8px;
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(246, 195, 78, 0.5);
}

.arcade-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-soft);
  color: var(--green);
  flex-shrink: 0;
}

.arcade-card.cyan .arcade-card-icon { color: var(--cyan); }
.arcade-card.gold .arcade-card-icon { color: var(--gold); }
.arcade-card.purple .arcade-card-icon { color: var(--purple); }
.arcade-card.red .arcade-card-icon { color: var(--red); }
.arcade-card.orange .arcade-card-icon { color: #ff954d; }
.arcade-card.blue .arcade-card-icon { color: var(--blue); }

.arcade-card-icon svg {
  width: 24px;
  height: 24px;
}

.arcade-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.arcade-card-body strong {
  font-size: 16px;
  letter-spacing: 0.01em;
}

.arcade-card-body small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.arcade-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.arcade-card-meta b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.06em;
}

.arcade-card-meta b.new {
  color: var(--gold);
}

.arcade-card-meta b.locked-tag {
  color: var(--muted);
}

.arcade-card-meta i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
}

/* ---- game overlay shell ---- */

.arcade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    linear-gradient(rgba(77, 255, 171, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.02) 1px, transparent 1px),
    rgba(3, 8, 6, 0.94);
  background-size: 34px 34px, 34px 34px, auto;
  backdrop-filter: blur(8px);
}

.arcade-overlay.hidden {
  display: none;
}

.arcade-shell {
  width: min(760px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid rgba(77, 255, 171, 0.22);
  background: linear-gradient(180deg, rgba(14, 22, 18, 0.98), rgba(8, 13, 11, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(77, 255, 171, 0.08);
  padding: 20px 22px 24px;
}

.arcade-shell-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.arcade-shell-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 180px;
}

.arcade-shell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(77, 255, 171, 0.1);
  border: 1px solid var(--line-soft);
  color: var(--green);
}

.arcade-shell-icon svg { width: 20px; height: 20px; }

.arcade-shell-title h2 {
  margin: 0;
  font-size: 19px;
}

.arcade-shell-title small {
  color: var(--muted);
  font-size: 12px;
}

.arcade-hud {
  display: flex;
  gap: 8px;
}

.arcade-hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.4);
  min-width: 72px;
}

.arcade-hud-item span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.arcade-hud-item strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  color: var(--green);
}

.arcade-shell-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.arcade-shell-close:hover { color: var(--text); }
.arcade-shell-close svg { width: 16px; height: 16px; }

.arcade-play-stage {
  min-height: 380px;
}

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

.arcade-canvas {
  width: 100%;
  height: 300px;
  border-radius: 14px;
  border: 1px solid rgba(77, 255, 171, 0.14);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(77, 255, 171, 0.05), transparent 60%),
    #070d0a;
  display: block;
}

.arcade-canvas.short { height: 220px; }

.arcade-canvas-wrap {
  position: relative;
  cursor: crosshair;
}

.sniper-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed var(--cyan);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(88, 199, 255, 0.8));
}

.sniper-line span {
  position: absolute;
  right: 8px;
  top: -22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
}

.sniper-line.hidden { display: none; }

.arcade-controls {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.arcade-controls.single { justify-content: center; }

.arcade-call {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px 12px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.arcade-call:active { transform: scale(0.97); }

.arcade-call.long {
  border: 1px solid rgba(61, 255, 162, 0.5);
  background: linear-gradient(180deg, rgba(61, 255, 162, 0.16), rgba(61, 255, 162, 0.05));
  color: #3dffa2;
}

.arcade-call.long:hover { box-shadow: 0 0 22px rgba(61, 255, 162, 0.25); }

.arcade-call.short {
  border: 1px solid rgba(255, 95, 110, 0.5);
  background: linear-gradient(180deg, rgba(255, 95, 110, 0.16), rgba(255, 95, 110, 0.05));
  color: #ff5f6e;
}

.arcade-call.short:hover { box-shadow: 0 0 22px rgba(255, 95, 110, 0.25); }

.arcade-call small {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

.arcade-call svg { width: 18px; height: 18px; }

.arcade-cashout {
  flex: 0 0 auto;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--gold), #ffdf8e);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(246, 195, 78, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.arcade-cashout:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(246, 195, 78, 0.55);
}

.arcade-cashout:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.arcade-cashout small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}

.arcade-cashout.mega {
  min-width: 240px;
  padding: 16px 30px;
  font-size: 18px;
}

.arcade-hint {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  min-height: 20px;
}

.arcade-round-strip {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.arcade-round-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}

.arcade-round-strip span.active {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 10px rgba(77, 255, 171, 0.35);
}

.arcade-round-strip span.done {
  background: rgba(77, 255, 171, 0.12);
  color: var(--green);
  border-color: transparent;
}

.arcade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.arcade-btn:hover:not(:disabled) { transform: translateY(-1px); }
.arcade-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.arcade-btn.primary {
  border: none;
  color: var(--ink);
  background: linear-gradient(135deg, var(--green), var(--teal));
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.25);
}

.arcade-btn.ghost {
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
}

.arcade-btn.ghost:hover { color: var(--text); }

.arcade-btn.danger {
  border: 1px solid rgba(255, 95, 110, 0.5);
  background: rgba(255, 95, 110, 0.12);
  color: #ff5f6e;
}

.arcade-btn.big { padding: 15px 30px; font-size: 15px; }
.arcade-btn.wide { flex: 1; }
.arcade-call.wide { flex: 1; flex-direction: row; gap: 8px; padding: 15px 10px; }

.arcade-btn.zone-pick {
  flex: 1;
  border: 1px solid rgba(88, 199, 255, 0.4);
  background: rgba(88, 199, 255, 0.08);
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
}

.arcade-btn.zone-pick:hover { box-shadow: 0 0 18px rgba(88, 199, 255, 0.3); }

/* stop hunt */

.hunt-mult {
  position: absolute;
  top: 84px;
  right: 42px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 34px;
  font-weight: 900;
  color: var(--green);
  text-shadow: 0 0 20px rgba(77, 255, 171, 0.6);
  pointer-events: none;
}

.hunt-mult.crashed {
  color: var(--red);
  text-shadow: 0 0 20px rgba(255, 95, 87, 0.7);
  animation: crashShake 0.5s ease;
}

@keyframes crashShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.stop-hunt { position: relative; }

/* gap hunter / trap timer */

.gap-timer {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.gap-timer i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 10px rgba(77, 255, 171, 0.5);
}

.trap-context {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  min-height: 52px;
}

/* risk mines */

.mines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.mine-card {
  position: relative;
  min-height: 84px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(145deg, rgba(77, 255, 171, 0.07), rgba(0, 0, 0, 0.35));
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
  padding: 8px;
}

.mine-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(77, 255, 171, 0.5);
}

.mine-card-back svg { width: 20px; height: 20px; }

.mine-card.flipped { cursor: default; }

.mine-card.safe {
  border-color: rgba(61, 255, 162, 0.5);
  background: rgba(61, 255, 162, 0.09);
  color: #baffd9;
}

.mine-card.mine {
  border-color: rgba(255, 95, 110, 0.7);
  background: rgba(255, 95, 110, 0.14);
  color: #ffb3bb;
  animation: crashShake 0.5s ease;
}

.mine-card.dim { opacity: 0.4; }

.mine-card-face {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  display: block;
}

/* prop run */

.prop-bars { display: flex; flex-direction: column; gap: 10px; }

.prop-bar-head {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.prop-bar-head strong { color: var(--green); font-size: 14px; }

.prop-track {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.prop-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 14px rgba(77, 255, 171, 0.5);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.prop-track b {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 95, 87, 0.8);
  transition: left 0.6s ease;
}

.prop-bar-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.prop-bar-foot small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}

.prop-quality {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.prop-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid var(--line-soft);
}

.prop-chip.on {
  color: var(--green);
  border-color: rgba(61, 255, 162, 0.45);
  background: rgba(61, 255, 162, 0.08);
}

.prop-chip.off {
  color: var(--muted);
  opacity: 0.6;
}

/* result screen */

.arcade-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 30px 16px;
}

.arcade-result-xp {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.arcade-result-xp span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 64px;
  font-weight: 900;
}

.arcade-result-xp.win span {
  color: var(--green);
  text-shadow: 0 0 30px rgba(77, 255, 171, 0.55);
  animation: xpPop 0.5s cubic-bezier(0.22, 1.61, 0.36, 1);
}

.arcade-result-xp.bust span {
  color: var(--red);
  text-shadow: 0 0 30px rgba(255, 95, 87, 0.5);
}

@keyframes xpPop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.arcade-result-xp small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 8px;
}

.arcade-result h3 {
  margin: 4px 0 0;
  font-size: 24px;
}

.arcade-result p {
  margin: 0;
  color: var(--muted);
}

.arcade-result-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  background: rgba(246, 195, 78, 0.07);
  color: #ffe1a1;
  font-size: 13px;
  max-width: 460px;
  text-align: left;
}

.arcade-result-lesson svg { width: 18px; height: 18px; flex-shrink: 0; }

.arcade-result-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* mobile */

@media (max-width: 720px) {
  .home-main { padding: 6px 14px 50px; gap: 36px; }
  .arcade-section { padding: 18px 14px 60px; }
  .arcade-head { padding: 20px; }
  .arcade-canvas { height: 230px; }
  .mines-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .mine-card { min-height: 68px; }
  .arcade-cashout { min-width: 130px; }
  .arcade-cashout.mega { min-width: 100%; }
  .hunt-mult { font-size: 24px; right: 26px; }
  .arcade-controls { flex-wrap: wrap; }
  .arcade-call { min-width: 40%; }
  .path-node { min-width: 92px; }
}

/* arcade card text balance fixes */
.arcade-card-meta {
  max-width: 38%;
  text-align: right;
}

.arcade-card-meta i {
  text-align: right;
  line-height: 1.3;
}

.arcade-card-body strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arcade-card.compact .arcade-card-meta i {
  display: none;
}

/* ===================== Landing Motion Layer ===================== */

.hero-grid { position: relative; }

.hero-fx {
  position: absolute;
  inset: -40px 0 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-grid > *:not(.hero-fx) { position: relative; z-index: 1; }

.fx-candle {
  position: absolute;
  bottom: -80px;
  width: 7px;
  border-radius: 2px;
  opacity: 0;
  animation: fxFloat 13s linear infinite;
}

.fx-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  bottom: -14px;
  width: 1.5px;
  transform: translateX(-50%);
  background: inherit;
  opacity: 0.7;
}

.fx-candle.up { background: rgba(61, 255, 162, 0.35); box-shadow: 0 0 12px rgba(61, 255, 162, 0.35); height: 34px; }
.fx-candle.down { background: rgba(255, 95, 110, 0.28); box-shadow: 0 0 12px rgba(255, 95, 110, 0.28); height: 26px; }

.fx-candle:nth-child(1) { left: 6%; animation-delay: 0s; }
.fx-candle:nth-child(2) { left: 18%; animation-delay: 2.6s; }
.fx-candle:nth-child(3) { left: 31%; animation-delay: 5.4s; }
.fx-candle:nth-child(4) { left: 46%; animation-delay: 1.4s; }
.fx-candle:nth-child(5) { left: 58%; animation-delay: 7.8s; }
.fx-candle:nth-child(6) { left: 72%; animation-delay: 4s; }
.fx-candle:nth-child(7) { left: 84%; animation-delay: 9.2s; }
.fx-candle:nth-child(8) { left: 93%; animation-delay: 6.2s; }

@keyframes fxFloat {
  0% { transform: translateY(0) scale(0.9); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-620px) scale(1.15); opacity: 0; }
}

/* animated gradient headline */
.hero-copy h1 {
  background: linear-gradient(100deg, #eef7f1 0%, #eef7f1 38%, #4dffab 50%, #00d8c4 58%, #eef7f1 70%, #eef7f1 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroSheen 5.5s ease-in-out infinite;
}

@keyframes heroSheen {
  0%, 100% { background-position: 110% 0; }
  50% { background-position: -10% 0; }
}

/* CTA shimmer */
.hero-primary-cta {
  position: relative;
  overflow: hidden;
}

.hero-primary-cta::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 34px;
  left: -60px;
  transform: rotate(18deg);
  background: rgba(255, 255, 255, 0.5);
  filter: blur(10px);
  animation: ctaSheen 3.4s ease-in-out infinite;
}

@keyframes ctaSheen {
  0%, 55% { left: -70px; }
  85%, 100% { left: 115%; }
}

/* scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.in-view > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.27s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.33s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.39s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.45s; }
.reveal-stagger.in-view > *:nth-child(9) { transition-delay: 0.51s; }
.reveal-stagger.in-view > *:nth-child(10) { transition-delay: 0.57s; }
.reveal-stagger.in-view > *:nth-child(11) { transition-delay: 0.63s; }
.reveal-stagger.in-view > *:nth-child(12) { transition-delay: 0.69s; }
.reveal-stagger.in-view > *:nth-child(13) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .fx-candle, .hero-copy h1, .hero-primary-cta::after { animation: none; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* compact limited-time trial section */
.invite-section.page-section {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 26px auto 34px;
  padding: 20px 26px !important;
  border-radius: 16px;
  border: 1px solid rgba(246, 195, 78, 0.28);
  background: linear-gradient(120deg, rgba(246, 195, 78, 0.07), rgba(6, 14, 10, 0.4));
}

.invite-section.page-section:not(.active-view) { display: none !important; }

.invite-section > div:first-child { max-width: 380px; }

.invite-section .invite-pill {
  font-size: 11px;
  margin-bottom: 6px;
}

.invite-section h2 {
  font-size: 19px;
  margin: 0 0 4px;
}

.invite-section h2 span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  display: inline;
}

.invite-section > div > p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.invite-form.trial-form {
  flex: 1;
  min-width: 300px;
  max-width: 560px;
  margin: 0;
}

.invite-form .trial-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.invite-form .trial-fields input {
  flex: 1;
  min-width: 130px;
  padding: 11px 14px;
  font-size: 13px;
}

.invite-form .trial-fields button {
  padding: 11px 18px;
  font-size: 13px;
}

.invite-form .trial-consent {
  font-size: 11px;
  margin-top: 8px;
}

.invite-form small {
  font-size: 10.5px;
}

/* ===================== Leaderboard Arena ===================== */

.arena-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.arena-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  letter-spacing: 0.18em;
  font-weight: 800;
}

.arena-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: arenaBlink 1.6s ease-in-out infinite;
}

@keyframes arenaBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.arena-reset { color: var(--muted); }
.arena-reset b { color: var(--gold); }

.arena-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}

.podium-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 190px;
  padding: 16px 10px 0;
  border-radius: 16px 16px 0 0;
}

.podium-crown {
  font-size: 26px;
  animation: crownBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(246, 195, 78, 0.7));
}

@keyframes crownBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

.podium-avatar,
.arena-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
  background: linear-gradient(135deg, hsl(var(--hue, 150), 85%, 62%), hsl(calc(var(--hue, 150) + 40), 80%, 48%));
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.podium-slot.place-1 .podium-avatar {
  width: 72px;
  height: 72px;
  font-size: 22px;
  border-color: var(--gold);
  box-shadow: 0 0 26px rgba(246, 195, 78, 0.5);
}

.podium-slot.place-2 .podium-avatar { border-color: #cfd8dc; box-shadow: 0 0 16px rgba(207, 216, 220, 0.35); }
.podium-slot.place-3 .podium-avatar { border-color: #d08a4e; box-shadow: 0 0 16px rgba(208, 138, 78, 0.4); }

.podium-name {
  font-size: 14px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.podium-meta {
  color: var(--muted);
  font-size: 11px;
}

.podium-xp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--green);
  font-weight: 800;
}

.podium-base {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 12px 12px 0 0;
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 900;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(77, 255, 171, 0.14), rgba(77, 255, 171, 0.02));
  border: 1px solid var(--line-soft);
  border-bottom: none;
}

.podium-slot.place-1 .podium-base {
  height: 96px;
  background: linear-gradient(180deg, rgba(246, 195, 78, 0.2), rgba(246, 195, 78, 0.03));
  border-color: rgba(246, 195, 78, 0.4);
  color: var(--gold);
}

.podium-slot.place-2 .podium-base { height: 64px; }
.podium-slot.place-3 .podium-base { height: 46px; }

.podium-slot.you .podium-name { color: var(--green); }

.arena-chase {
  text-align: center;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px dashed rgba(77, 255, 171, 0.35);
  background: rgba(77, 255, 171, 0.05);
  font-size: 13.5px;
}

.arena-chase b { color: var(--green); }

.arena-chase.gold {
  border-color: rgba(246, 195, 78, 0.4);
  background: rgba(246, 195, 78, 0.06);
}

.arena-chase.gold b { color: var(--gold); }

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

.arena-row {
  display: grid;
  grid-template-columns: 30px 40px minmax(120px, 1fr) minmax(80px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.arena-row:hover {
  transform: translateX(3px);
  border-color: rgba(77, 255, 171, 0.35);
}

.arena-row.you {
  border-color: var(--green);
  background: rgba(77, 255, 171, 0.06);
  box-shadow: 0 0 18px rgba(77, 255, 171, 0.12);
}

.arena-place {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
}

.arena-avatar { width: 34px; height: 34px; font-size: 12px; }

.arena-name {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 700;
  min-width: 0;
}

.arena-name small {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
}

.arena-you-tag {
  display: inline-block;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--green);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 7px;
  vertical-align: 1px;
}

.arena-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.arena-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 8px rgba(77, 255, 171, 0.5);
}

.arena-xp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--green);
}

@media (max-width: 640px) {
  .arena-row { grid-template-columns: 24px 34px 1fr auto; }
  .arena-bar { display: none; }
  .podium-avatar { width: 44px; height: 44px; font-size: 14px; }
  .podium-slot.place-1 .podium-avatar { width: 58px; height: 58px; font-size: 18px; }
}

/* ===================== Profile Redesign ===================== */

.profile-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 28px;
}

.pr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 24px;
  color: var(--ink);
  background: linear-gradient(135deg, hsl(var(--hue, 150), 85%, 62%), hsl(calc(var(--hue, 150) + 40), 80%, 48%));
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 24px rgba(77, 255, 171, 0.2);
  flex-shrink: 0;
}

.pr-identity {
  flex: 1;
  min-width: 240px;
}

.pr-identity h2 {
  margin: 0 0 4px;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pr-identity > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.pr-level-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 380px;
}

.pr-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.06em;
}

.pr-level-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.pr-level-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow: 0 0 10px rgba(77, 255, 171, 0.5);
  transition: width 0.5s ease;
}

.pr-level-row small {
  color: var(--muted);
  font-size: 11px;
}

.pr-header-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.pr-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px !important;
  text-align: center;
}

.pr-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(77, 255, 171, 0.1);
  color: var(--green);
  margin-bottom: 2px;
}

.pr-tile-icon svg { width: 16px; height: 16px; }

.pr-tile strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
}

.pr-tile-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

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

.pr-panel { padding: 22px 24px; }

.pr-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-tier {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 2fr auto;
  align-items: center;
  gap: 12px;
}

.pr-tier.locked { opacity: 0.5; }

.pr-tier-name { font-size: 12.5px; font-weight: 700; }

.pr-tier-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.pr-tier-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-2), var(--green));
}

.pr-tier b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.pr-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pr-game {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}

.pr-game:hover:not(:disabled) { border-color: rgba(77, 255, 171, 0.4); }
.pr-game.locked { opacity: 0.45; cursor: not-allowed; }

.pr-game-icon {
  display: inline-flex;
  color: var(--green);
  flex-shrink: 0;
}

.pr-game-icon svg { width: 15px; height: 15px; }

.pr-game-name {
  font-size: 12.5px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-game-stats {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
  flex-shrink: 0;
}

.pr-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  background: rgba(246, 195, 78, 0.07);
  color: #ffe1a1;
  font-size: 12.5px;
  font-weight: 700;
}

.pr-badge-empty {
  color: var(--muted);
  font-size: 13px;
}

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

@media (max-width: 860px) {
  .pr-columns, .profile-bottom-grid { grid-template-columns: 1fr; }
  .pr-games { grid-template-columns: 1fr; }
  .pr-header { padding: 20px; }
}

/* ===================== Trader Toolkit ===================== */

.toolkit-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.tk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.tk-head h2 { margin: 0 0 6px; font-size: 28px; }

.tk-boost-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 22px;
  border-radius: 14px;
  border: 1px dashed var(--line-soft);
  color: var(--muted);
}

.tk-boost-pill.on {
  border: 1px solid rgba(246, 195, 78, 0.4);
  background: rgba(246, 195, 78, 0.07);
}

.tk-boost-pill strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  color: var(--gold);
}

.tk-boost-pill span { font-size: 11px; }

.tk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.tk-card { padding: 22px 24px; position: relative; overflow: hidden; }
.tk-card.tk-wide { grid-column: 1 / -1; }

.tk-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.tk-card-head h3 { margin: 0; font-size: 17px; flex: 1; }

.tk-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(77, 255, 171, 0.1);
  color: var(--green);
  flex-shrink: 0;
}

.tk-card-icon svg { width: 18px; height: 18px; }

.tk-plan-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
}

.tk-plan-tag.on {
  color: var(--green);
  border-color: rgba(77, 255, 171, 0.4);
  background: rgba(77, 255, 171, 0.07);
}

.tk-copy { color: var(--muted); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }

.tk-locked > *:not(.tk-lock-overlay) { filter: blur(1px); opacity: 0.5; }

.tk-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(5, 10, 8, 0.55);
  backdrop-filter: blur(2px);
  color: var(--muted);
  filter: none !important;
  opacity: 1 !important;
}

.tk-lock-overlay svg { width: 22px; height: 22px; }

.tk-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.tk-risk-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.tk-risk-grid input,
.tk-risk-grid select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.tk-risk-result {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tk-risk-result > div {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.tk-risk-result span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tk-risk-result strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; }

.tk-risk-final { border-color: rgba(77, 255, 171, 0.45) !important; background: rgba(77, 255, 171, 0.07) !important; }
.tk-risk-final strong { color: var(--green); }
.tk-risk-final.warn { border-color: rgba(255, 95, 110, 0.45) !important; background: rgba(255, 95, 110, 0.07) !important; }
.tk-risk-final.warn strong { color: var(--red); }

.tk-risk-result small { width: 100%; color: var(--gold); font-size: 11.5px; }

.tk-journal { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }

.tk-journal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.tk-journal-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 5px;
}

.tk-journal-type.quiz { background: rgba(88, 199, 255, 0.14); color: var(--cyan); }
.tk-journal-type.bust { background: rgba(255, 95, 110, 0.14); color: var(--red); }

.tk-journal-label { flex: 1; font-size: 12.5px; font-weight: 600; min-width: 0; }
.tk-journal-row .arcade-btn { padding: 7px 12px; font-size: 11px; }

.tk-resolve {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.tk-resolve:hover { color: var(--green); border-color: rgba(77, 255, 171, 0.45); }

.tk-empty { color: var(--muted); font-size: 13px; }

.tk-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 12px;
}

.tk-spark i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--green), var(--green-2));
  box-shadow: 0 0 8px rgba(77, 255, 171, 0.3);
  min-height: 4px;
}

.tk-spark i.bust { background: rgba(255, 95, 110, 0.55); box-shadow: none; }

.tk-analytics-stats { display: flex; gap: 10px; margin-bottom: 12px; }

.tk-analytics-stats > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}

.tk-analytics-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tk-analytics-stats strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; }

.tk-analytics-table { display: flex; flex-direction: column; gap: 6px; }

.tk-analytics-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
}

.tk-analytics-row b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--muted); font-size: 11px; text-align: right; }

.tk-regen { margin-left: auto; padding: 7px 13px; font-size: 11px; }

.tk-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.tk-plan-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.tk-plan-day > b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--green);
}

.tk-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}

.tk-plan-item.done span { text-decoration: line-through; color: var(--muted); }
.tk-plan-item input { accent-color: #00c77a; margin-top: 1px; }

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

.arena-name-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* invite compact — final overrides over legacy rules */
.invite-section.page-section::after { content: none; }

.invite-section.page-section .invite-pill {
  margin: 0 0 8px;
  padding: 6px 12px;
  font-size: 10.5px;
}

.invite-section.page-section h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 4px;
}

.invite-section.page-section h2 span {
  font-size: 14px;
  color: var(--muted);
}

.invite-section.page-section p:not(.invite-pill) {
  font-size: 12.5px;
  margin: 0;
  line-height: 1.5;
}

.invite-section.page-section .invite-form {
  gap: 8px;
}

/* home-main: restore flex gap (page-section active rules force display:block) */
.home-main.page-section.active-view,
.home-main.page-section.active-page {
  display: flex;
}

#home-arcade-rail {
  margin-top: 14px;
}

/* headroom inside the scroll container so hover-lift isn't clipped */
.arcade-rail {
  padding-top: 12px;
}

.arcade-games-grid {
  padding-top: 6px;
}

/* keep the daily-boost badge clear of the card title */
.arcade-card:has(.arcade-card-boost) {
  padding-top: 30px;
}

/* ===================== Multi-Market / Compete / Orderflow ===================== */

/* track bar */
.track-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 99px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.track-chip:hover { transform: translateY(-1px); border-color: rgba(77, 255, 171, 0.4); }

.track-chip.active {
  border-color: var(--green);
  color: var(--text);
  background: rgba(77, 255, 171, 0.08);
  box-shadow: 0 0 14px rgba(77, 255, 171, 0.18);
}

.track-chip svg { width: 15px; height: 15px; }

.track-chip b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--green);
}

/* hero market chips */
.hero-markets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.market-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.market-chip:hover { transform: translateY(-2px); border-color: rgba(77, 255, 171, 0.5); box-shadow: 0 0 16px rgba(77, 255, 171, 0.15); }
.market-chip.active { border-color: var(--green); background: rgba(77, 255, 171, 0.08); }
.market-chip svg { width: 17px; height: 17px; color: var(--green); }
.market-chip span { display: inline-flex; align-items: center; gap: 6px; }
.market-chip small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: var(--muted); font-weight: 600; }

/* onboarding niche picker */
.onboard-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.onboard-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.onboard-track:hover { transform: translateY(-2px); border-color: var(--green); }
.onboard-track-icon { color: var(--green); }
.onboard-track-icon svg { width: 20px; height: 20px; }
.onboard-track strong { font-size: 15px; }
.onboard-track-tag { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* orderflow stage */
.orderflow-stage {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px dashed rgba(246, 195, 78, 0.3);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.orderflow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.orderflow-head h2 { margin: 0 0 6px; font-size: 26px; }

.of-new-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), #ffe29a);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.1em;
  animation: ofPulse 2s ease-in-out infinite;
}

@keyframes ofPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(246, 195, 78, 0.4); }
  50% { box-shadow: 0 0 18px rgba(246, 195, 78, 0.8); }
}

.orderflow-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px dashed var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}

.orderflow-lock svg { width: 16px; height: 16px; }
.orderflow-stage.locked .orderflow-head h2 { opacity: 0.7; }
.academy-tier-icon.of { background: rgba(246, 195, 78, 0.1); color: var(--gold); }
.of-tier .academy-tier-step { color: var(--gold); }

/* flow reader */
.flow-context {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.3);
}

.flow-grid-wrap {
  border: 1px solid rgba(246, 195, 78, 0.2);
  border-radius: 14px;
  background: #070d0a;
  padding: 12px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.flow-grid-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}

.flow-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13px;
  border-radius: 6px;
}

.flow-row.ask-imb { background: rgba(61, 255, 162, 0.08); box-shadow: inset 2px 0 0 var(--green); }
.flow-row.bid-imb { background: rgba(255, 95, 110, 0.08); box-shadow: inset 2px 0 0 var(--red); }
.flow-price { color: var(--muted); }
.flow-vol .bid { color: #ff5f6e; font-weight: 700; }
.flow-vol .ask { color: #3dffa2; font-weight: 700; }
.flow-delta.pos, .flow-summary .pos { color: #3dffa2; }
.flow-delta.neg, .flow-summary .neg { color: #ff5f6e; }

.flow-summary {
  display: flex;
  gap: 22px;
  justify-content: center;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}

/* compete */
.compete-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.cp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cp-head h2 { margin: 0 0 6px; font-size: 28px; }

.cp-rank-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 26px;
  border-radius: 16px;
  border: 1px solid rgba(246, 195, 78, 0.35);
  background: linear-gradient(160deg, rgba(246, 195, 78, 0.09), rgba(6, 14, 10, 0.4));
}

.cp-rank-icon { font-size: 30px; filter: drop-shadow(0 0 10px rgba(246, 195, 78, 0.5)); }
.cp-rank-badge strong { font-size: 17px; letter-spacing: 0.04em; }
.cp-rank-badge small { color: var(--muted); font-size: 11px; }
.cp-rank-badge b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--gold); }

.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.cp-panel { padding: 22px 24px; }

.cp-code-row, .cp-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cp-code-row span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.cp-code-row b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; color: var(--green); flex: 1; }

.cp-add-row input {
  flex: 1;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-transform: uppercase;
}

.cp-add-row.grow { flex: 1; margin-bottom: 0; }
.cp-mini { padding: 8px 14px !important; font-size: 11.5px !important; }

.cp-friends { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }

.cp-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.cp-friend-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 12px;
  color: var(--ink);
  background: linear-gradient(135deg, hsl(var(--hue, 150), 85%, 62%), hsl(calc(var(--hue, 150) + 40), 80%, 48%));
  flex-shrink: 0;
}

.cp-friend-name { flex: 1; display: flex; flex-direction: column; font-size: 13px; font-weight: 700; min-width: 0; }
.cp-friend-name small { color: var(--muted); font-weight: 500; font-size: 11px; }
.cp-offtrack { font-size: 10.5px; color: var(--muted); border: 1px dashed var(--line-soft); border-radius: 99px; padding: 4px 9px; }

.cp-row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.cp-log-row {
  padding: 8px 12px;
  border-radius: 9px;
  border-left: 3px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.cp-log-row.won { border-left-color: var(--green); }
.cp-log-row.lost { border-left-color: var(--red); }
.cp-lobby-board { margin: 10px 0; }
.cp-lobby-meta { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 8px; }
.cp-results { max-height: 240px; overflow-y: auto; }

/* weakness radar */
.wk-list { display: flex; flex-direction: column; gap: 9px; }

.wk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 95, 110, 0.25);
  background: rgba(255, 95, 110, 0.04);
}

.wk-icon { color: var(--red); flex-shrink: 0; }
.wk-icon svg { width: 17px; height: 17px; }
.wk-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-body strong { font-size: 13px; }
.wk-body small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* AI review */
.ai-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ai-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ai-form-grid input, .ai-form-grid select {
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.ai-flags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.ai-flags label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ai-flags input { accent-color: #00c77a; }

.ai-result { display: flex; gap: 18px; margin-top: 16px; align-items: flex-start; }

.ai-grade {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px;
  font-weight: 900;
  flex-shrink: 0;
}

.ai-grade.grade-A { background: rgba(61, 255, 162, 0.14); color: var(--green); box-shadow: 0 0 18px rgba(61, 255, 162, 0.25); }
.ai-grade.grade-B { background: rgba(88, 199, 255, 0.14); color: var(--cyan); }
.ai-grade.grade-C { background: rgba(246, 195, 78, 0.14); color: var(--gold); }
.ai-grade.grade-D, .ai-grade.grade-F { background: rgba(255, 95, 110, 0.14); color: var(--red); }

.ai-sections { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ai-section b { display: flex; align-items: center; gap: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 4px; }
.ai-section b svg { width: 14px; height: 14px; color: var(--green); }
.ai-section p { margin: 0 0 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.ai-section.better { padding: 12px 14px; border-radius: 11px; border: 1px solid rgba(246, 195, 78, 0.3); background: rgba(246, 195, 78, 0.05); }
.ai-section.better p { color: #ffe1a1; }

@media (max-width: 860px) {
  .cp-grid { grid-template-columns: 1fr; }
  .ai-result { flex-direction: column; }
  .track-bar { gap: 6px; }
  .track-chip { padding: 8px 11px; font-size: 12px; }
}

/* ===================== Splash Loader ===================== */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 92, 255, 0.14), transparent 42%),
    #07070d;
  transition: opacity 0.6s ease;
}

.splash.splash-done { opacity: 0; pointer-events: none; }

.splash-core {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 65%, #7c5cff 85%, #4dffab 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: splashSpin 1.1s linear infinite;
}

@keyframes splashSpin { to { transform: rotate(360deg); } }

.splash-candles {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 52px;
}

.splash-candles i {
  width: 9px;
  border-radius: 3px;
  animation: splashCandle 1s ease-in-out infinite;
}

.splash-candles i:nth-child(1) { background: #3dffa2; height: 40%; animation-delay: 0s; }
.splash-candles i:nth-child(2) { background: #ff5f6e; height: 62%; animation-delay: 0.12s; }
.splash-candles i:nth-child(3) { background: #3dffa2; height: 88%; animation-delay: 0.24s; box-shadow: 0 0 12px rgba(61,255,162,.5); }
.splash-candles i:nth-child(4) { background: #3dffa2; height: 55%; animation-delay: 0.36s; }
.splash-candles i:nth-child(5) { background: #ff5f6e; height: 72%; animation-delay: 0.48s; }

@keyframes splashCandle {
  0%, 100% { transform: scaleY(0.62); opacity: 0.65; }
  50% { transform: scaleY(1); opacity: 1; }
}

.splash-brand {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #eef1ff;
}

.splash-brand span { color: #7c5cff; text-shadow: 0 0 18px rgba(124, 92, 255, 0.6); }

.splash-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(238, 241, 255, 0.4);
  animation: splashBlink 1.6s ease-in-out infinite;
}

@keyframes splashBlink { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

/* avatar photos */
.podium-avatar, .arena-avatar, .av, .pr-avatar, .cp-friend-avatar { overflow: hidden; }
.podium-avatar img, .arena-avatar img, .av img, .pr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  color: var(--ink);
  background: linear-gradient(135deg, hsl(var(--hue, 150), 85%, 62%), hsl(calc(var(--hue, 150) + 40), 80%, 48%));
}

.av.av-topbar { width: 30px; height: 30px; font-size: 11px; }

/* ===================== TradeEdge Design Layer (violet re-skin) ===================== */

:root {
  --violet: #7c5cff;
  --violet-2: #9d7bff;
  --violet-soft: rgba(124, 92, 255, 0.14);
  --violet-line: rgba(124, 92, 255, 0.35);
}

body {
  background:
    radial-gradient(ellipse at 15% 8%, rgba(124, 92, 255, 0.12), transparent 34%),
    radial-gradient(ellipse at 85% 15%, rgba(88, 92, 255, 0.07), transparent 30%),
    linear-gradient(rgba(124, 92, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 92, 255, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, #08080f 0%, #0a0a14 50%, #08080f 100%);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
}

body::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.09), transparent 40%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.46));
}

.panel, .academy-tier, .arcade-card, .tk-card, .cp-panel, .pr-tile,
.arcade-head, .academy-summary, .pf-banner {
  border-color: rgba(124, 92, 255, 0.14) !important;
}

.panel { background: linear-gradient(180deg, #10101d, #0c0c16); }

/* violet primaries */
.primary-button,
.arcade-btn.primary,
.academy-continue,
.academy-btn.primary {
  background: linear-gradient(135deg, #8a66ff, #5b3df5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(124, 92, 255, 0.35) !important;
}

.primary-button:hover, .arcade-btn.primary:hover:not(:disabled), .academy-continue:hover {
  box-shadow: 0 6px 28px rgba(124, 92, 255, 0.55) !important;
}

.arcade-kicker { color: var(--violet-2); text-shadow: 0 0 12px rgba(124, 92, 255, 0.5); }
.signal { color: var(--violet-2) !important; }

.hero-copy h1 {
  background: linear-gradient(100deg, #eef1ff 0%, #eef1ff 38%, #9d7bff 50%, #58c7ff 58%, #eef1ff 70%, #eef1ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* progression = violet, market semantics stay green/red */
.academy-summary-bar i, .academy-tier-bar i, .home-academy-meter i,
.pr-level-bar i, .pf-level-bar i, .dq-bar i, .ach-bar i, .pr-tier-bar i,
.xp-meter i, #side-progress-fill {
  background: linear-gradient(90deg, #5b3df5, #9d7bff) !important;
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.55) !important;
}

.side-link.nav-tab.active, .side-link:hover {
  background: var(--violet-soft) !important;
  color: #fff;
}

.side-link.nav-tab.active .side-icon, .side-link:hover .side-icon { color: var(--violet-2) !important; }

.track-chip.active, .market-chip.active {
  border-color: var(--violet) !important;
  background: var(--violet-soft) !important;
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.25) !important;
}

.track-chip b { color: var(--violet-2); }
.market-chip svg { color: var(--violet-2); }

.academy-tier-icon { background: var(--violet-soft) !important; color: var(--violet-2) !important; }
.academy-tier-step { color: var(--violet-2) !important; }
.path-node.current .path-node-ring, .path-node.complete .path-node-ring {
  border-color: var(--violet) !important;
  color: var(--violet-2) !important;
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.4) !important;
}

.path-connector.lit { background: linear-gradient(90deg, #5b3df5, #9d7bff) !important; box-shadow: 0 0 10px rgba(124,92,255,.5) !important; }

.arcade-card:hover:not(.locked) {
  border-color: var(--violet-line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 255, 0.18) !important;
}

.tk-card-icon, .cp-rank-icon { color: var(--violet-2); }
.tk-card-icon { background: var(--violet-soft) !important; }
.tk-plan-tag.on { color: var(--violet-2) !important; border-color: var(--violet-line) !important; background: var(--violet-soft) !important; }

.pr-rank, .academy-lesson-xp { color: var(--violet-2) !important; }
.arcade-hud-item strong { color: var(--violet-2); }

.plan-tier-badge { border: 1px solid var(--violet-line); background: var(--violet-soft); color: var(--violet-2); padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; }

/* ===================== Skill Trail ===================== */

.trail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 0;
}

.trail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  border-left: 3px dashed rgba(255, 255, 255, 0.09);
  transform: translateX(-50%);
}

.trail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  height: calc((100% - 48px) * var(--trailp, 0%) / 100%);
  border-left: 3px solid var(--violet);
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.6);
  transition: height 0.6s ease;
}

.trail-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 46%;
  padding: 8px 0;
}

.trail-step.right {
  margin-left: 54%;
}

.trail-step.left {
  flex-direction: row-reverse;
  text-align: right;
  margin-right: 54%;
  width: 46%;
}

.trail-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 20px;
  transform: rotate(45deg);
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, #14142a, #0d0d1a);
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trail-node svg { width: 22px; height: 22px; transform: rotate(-45deg); }

.trail-node:hover:not(:disabled) { transform: rotate(45deg) scale(1.08); }
.trail-node:disabled { cursor: not-allowed; opacity: 0.5; }

.trail-step.done .trail-node {
  border-color: var(--violet);
  background: linear-gradient(145deg, #5b3df5, #8a66ff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.45);
}

.trail-step.current .trail-node {
  border-color: var(--violet-2);
  color: var(--violet-2);
  animation: trailPulse 1.8s ease-in-out infinite;
}

@keyframes trailPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5); }
  50% { box-shadow: 0 0 0 14px rgba(124, 92, 255, 0); }
}

.trail-flag {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  background: var(--violet);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 8px;
  white-space: nowrap;
  animation: flagBob 1.6s ease-in-out infinite;
}

.trail-flag::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--violet);
  border-bottom: none;
}

@keyframes flagBob {
  0%, 100% { transform: translateX(-50%) rotate(-45deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-45deg) translateY(-4px); }
}

.trail-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trail-info strong { font-size: 13.5px; line-height: 1.3; }
.trail-info small { color: var(--muted); font-size: 11px; }
.trail-step.done .trail-info strong { color: var(--violet-2); }
.trail-step.locked .trail-info { opacity: 0.55; }

@media (max-width: 640px) {
  .trail::before, .trail::after { left: 29px; }
  .trail-step, .trail-step.left, .trail-step.right { width: 100%; margin: 0; flex-direction: row; text-align: left; }
  .trail-node { width: 48px; height: 48px; }
}

/* ===================== Daily Quests ===================== */

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

.dq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.16);
  background: linear-gradient(180deg, #10101d, #0c0c16);
}

.dq-card.done { border-color: rgba(77, 255, 171, 0.4); }

.dq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--violet-soft);
  color: var(--violet-2);
  flex-shrink: 0;
}

.dq-card.done .dq-icon { background: rgba(77, 255, 171, 0.12); color: var(--green); }
.dq-icon svg { width: 17px; height: 17px; }

.dq-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dq-body strong { font-size: 13px; }
.dq-body small { color: var(--muted); font-size: 11px; }

.dq-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dq-bar.big { height: 10px; }
.dq-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.4s ease; }
.dq-card.done .dq-bar i { background: linear-gradient(90deg, var(--green-2), var(--green)) !important; }

.dq-counter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted); }

/* ===================== Achievements ===================== */

.achievements-section { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 20px; }

.ach-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  background: linear-gradient(180deg, #10101d, #0c0c16);
  opacity: 0.85;
}

.ach-card.unlocked {
  opacity: 1;
  border-color: rgba(246, 195, 78, 0.4);
  background: linear-gradient(160deg, rgba(246, 195, 78, 0.07), #0c0c16);
}

.ach-icon {
  font-size: 30px;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.ach-card.unlocked .ach-icon { background: rgba(246, 195, 78, 0.12); filter: drop-shadow(0 0 8px rgba(246, 195, 78, 0.4)); }

.ach-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ach-body strong { font-size: 14px; }
.ach-body small { color: var(--muted); font-size: 12px; }
.ach-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ach-bar i { display: block; height: 100%; }
.ach-card.unlocked .ach-bar i { background: linear-gradient(90deg, var(--gold), #ffe29a) !important; box-shadow: 0 0 8px rgba(246,195,78,.5) !important; }
.ach-body b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--muted); }
.ach-card.unlocked .ach-body b { color: var(--gold); }

/* ===================== Confetti ===================== */

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

.confetti-holder i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) translateX(var(--drift, 0px)) rotate(var(--spin, 360deg)); opacity: 0.7; }
}

/* ===================== Profile v2 (Duolingo-inspired) ===================== */

.pf-banner { position: relative; padding: 0 26px 20px !important; overflow: hidden; }

.pf-cover {
  height: 110px;
  margin: 0 -26px 0;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(124, 92, 255, 0.4), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(88, 199, 255, 0.2), transparent 50%),
    linear-gradient(135deg, #191932, #0e0e1c);
}

.pf-banner-row { display: flex; align-items: flex-end; gap: 20px; margin-top: -44px; flex-wrap: wrap; }

.pf-avatar-wrap { position: relative; border: none; background: none; padding: 0; cursor: pointer; }

.av.av-profile {
  width: 104px;
  height: 104px;
  font-size: 34px;
  border: 4px solid #0c0c16;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pf-avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  border: 2px solid #0c0c16;
}

.pf-avatar-edit svg { width: 14px; height: 14px; }

.pf-identity { flex: 1; min-width: 220px; padding-top: 46px; }
.pf-identity h2 { margin: 0 0 3px; font-size: 24px; }
.pf-joined { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }

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

.pf-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  border: 1px solid var(--violet-line);
  background: var(--violet-soft);
  color: var(--violet-2);
  font-size: 12px;
  font-weight: 800;
}

.pf-track-badge svg { width: 14px; height: 14px; }

.pf-rank-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  padding: 6px 11px;
  border-radius: 99px;
}

.pf-actions { display: flex; gap: 10px; align-items: center; padding-top: 46px; flex-wrap: wrap; }

.pf-level-bar { height: 9px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 18px; }
.pf-level-bar i { display: block; height: 100%; }

.pf-columns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 18px; }

.pf-section-title { margin: 0 0 12px; font-size: 19px; }
.pf-section-head { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.pf-section-head .pf-section-title { margin: 0; }

.pf-viewall {
  border: none;
  background: none;
  color: var(--violet-2);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

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

.pf-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px !important; }
.pf-stat-icon { font-size: 22px; }
.pf-stat strong { display: block; font-size: 18px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pf-stat small { color: var(--muted); font-size: 11px; }

.pf-ach-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.pf-ach { display: flex; gap: 14px; padding: 14px 16px !important; }
.pf-ach-icon { font-size: 26px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.04); flex-shrink: 0; }
.pf-ach.unlocked .pf-ach-icon { background: rgba(246, 195, 78, 0.12); }
.pf-ach-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pf-ach-top { display: flex; justify-content: space-between; align-items: center; }
.pf-ach-top strong { font-size: 13.5px; }
.pf-ach-top b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.pf-ach.unlocked .pf-ach-top b { color: var(--gold); }
.pf-ach-body small { color: var(--muted); font-size: 11.5px; }

.pf-friends-card { padding: 20px 22px; }
.pf-friend { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.pf-friend:last-of-type { border-bottom: none; }
.av.av-small { width: 36px; height: 36px; font-size: 12px; }
.pf-friend span { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; }
.pf-friend span small { color: var(--muted); font-weight: 500; font-size: 11px; }

.pf-friend-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.pf-friend-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease;
}

.pf-friend-action:hover { border-color: var(--violet-line); }
.pf-friend-action svg { width: 16px; height: 16px; color: var(--violet-2); }

.fr-quest { display: flex; flex-direction: column; gap: 9px; }
.fr-quest-head { display: flex; justify-content: space-between; align-items: center; }
.fr-quest-head b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--violet-2); }
.fr-quest.done .fr-quest-head b { color: var(--green); }
.fr-quest small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.fr-actions { display: flex; gap: 6px; }

@media (max-width: 900px) {
  .pf-columns { grid-template-columns: 1fr; }
  .pf-banner-row { align-items: center; }
  .pf-identity, .pf-actions { padding-top: 10px; }
}

/* ===================== Daily Streak ===================== */

/* topbar chip states */
.topbar-status { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.topbar-status.streak-secured {
  border-color: rgba(255, 149, 77, 0.55) !important;
  box-shadow: 0 0 14px rgba(255, 149, 77, 0.3);
}
.topbar-status.streak-risk { animation: streakRiskPulse 2.2s ease-in-out infinite; }
.topbar-status.streak-zero { opacity: 0.75; }

@keyframes streakRiskPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 87, 0.35); }
  50% { box-shadow: 0 0 12px 2px rgba(255, 95, 87, 0.25); }
}

/* celebration pop */
.streak-pop {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.streak-pop.show { opacity: 1; }

.streak-pop-card {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 40px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 149, 77, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 149, 77, 0.18), transparent 60%),
    linear-gradient(180deg, #16121f, #0d0b14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 149, 77, 0.2);
  transform: translateY(-14px) scale(0.94);
  transition: transform 0.35s cubic-bezier(0.22, 1.4, 0.36, 1);
  text-align: center;
}

.streak-pop.show .streak-pop-card { transform: translateY(0) scale(1); }

.streak-pop-flame {
  font-size: 44px;
  animation: flamePop 0.7s cubic-bezier(0.22, 1.61, 0.36, 1), flameFlicker 1.4s ease-in-out 0.7s infinite;
  filter: drop-shadow(0 0 18px rgba(255, 149, 77, 0.7));
}

@keyframes flamePop {
  0% { transform: scale(0.2) rotate(-14deg); }
  60% { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes flameFlicker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07) rotate(-2deg); }
}

.streak-pop-card strong { font-size: 20px; letter-spacing: 0.01em; }
.streak-pop-bonus {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(246, 195, 78, 0.1);
  border: 1px solid rgba(246, 195, 78, 0.35);
  border-radius: 99px;
  padding: 4px 12px;
}
.streak-pop-card small { color: var(--muted); font-size: 12.5px; }

/* week heatmap */
.streak-week { display: flex; gap: 7px; margin-top: 8px; }

.wk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.wk-day i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  font-style: normal;
}

.wk-day.done i {
  border-color: rgba(255, 149, 77, 0.7);
  background: rgba(255, 149, 77, 0.14);
  box-shadow: 0 0 10px rgba(255, 149, 77, 0.35);
}

.wk-day.pending i { border-style: dashed; border-color: rgba(255, 149, 77, 0.5); animation: streakRiskPulse 2s ease-in-out infinite; }
.wk-day.miss i { opacity: 0.45; }
.wk-day.future i { opacity: 0.25; }
.wk-day b { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); }

.pf-week-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 149, 77, 0.22);
  background: rgba(255, 149, 77, 0.04);
}

.pf-week-label { font-size: 13px; font-weight: 800; }
.pf-week-wrap .streak-week { margin-top: 0; }

/* ===================== Social v2 / Signature Games / Mastery ===================== */

/* friends tabs */
.fr-tabs {
  display: flex;
  border-bottom: 2px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 14px;
}

.fr-tab {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fr-tab b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: 5px; }
.fr-tab.active { color: var(--violet-2); border-bottom-color: var(--violet); }
.fr-tab:hover { color: var(--text); }

.fr-empty { text-align: center; padding: 22px 10px; }
.fr-empty-faces { font-size: 34px; letter-spacing: 4px; margin-bottom: 12px; filter: saturate(1.2); }
.fr-empty p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

.fr-clickable { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.fr-clickable:hover { border-color: var(--violet-line); transform: translateX(2px); }

/* add friends rows (Duolingo-style) */
.fr-add-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-radius: 13px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}

.fr-add-row:hover { border-color: var(--violet-line); }
.fr-add-icon { font-size: 20px; }
.fr-add-label { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fr-add-label strong { font-size: 14px; }
.fr-add-label small { color: var(--muted); font-size: 11.5px; }
.fr-add-row svg { width: 16px; height: 16px; color: var(--muted); }
.fr-find-panel { padding: 4px 2px 10px; }
.fr-find-panel.hidden { display: none; }

/* friend profile modal */
.fr-profile-card { max-width: 560px; }
.fr-profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; padding-right: 40px; }
.fr-profile-head h2 { margin: 0 0 6px; font-size: 22px; }
.fr-profile-stats { margin-bottom: 16px; }
.fr-profile-actions { justify-content: flex-end; }

/* signature games */
.sig-board { min-height: 190px; display: flex; align-items: center; justify-content: center; }

.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.matrix-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, #12121f, #0b0b14);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.matrix-tile:hover { transform: translateY(-2px); border-color: var(--violet-line); }
.matrix-tile b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.matrix-arrow { font-size: 26px; line-height: 1; }
.matrix-tile.up .matrix-arrow { color: var(--green); text-shadow: 0 0 12px rgba(61, 255, 162, 0.5); }
.matrix-tile.down .matrix-arrow { color: var(--red); text-shadow: 0 0 12px rgba(255, 95, 110, 0.5); }
.matrix-tile small { color: var(--muted); font-size: 11px; }

.judge-card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(124, 92, 255, 0.22);
  background: linear-gradient(165deg, #13131f, #0b0b14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.judge-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13px; }
.judge-row span { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }
.judge-row b { font-size: 14px; text-align: right; }
.judge-row b.pos { color: var(--green); }
.judge-row b.neg { color: var(--red); }

/* mastery */
.mastery-stage {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px dashed rgba(124, 92, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mastery-ladder {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 2px 14px;
}

.mastery-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, #13131f, #0b0b14);
  color: var(--muted);
  flex-shrink: 0;
}

.mastery-node b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 900; }

.mastery-node.done {
  border-color: var(--violet);
  background: linear-gradient(145deg, #5b3df5, #8a66ff);
  color: #fff;
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.4);
}

.mastery-node.next {
  border-color: var(--violet-2);
  color: var(--violet-2);
  animation: trailPulse 2s ease-in-out infinite;
}

.mastery-link {
  flex: 1;
  min-width: 14px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 5px, transparent 5px 10px);
}

.mastery-panel, .gauntlet-panel { padding: 20px 24px; }

.mastery-reqs { display: flex; flex-direction: column; gap: 11px; }

.mastery-req {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.mastery-req span { color: var(--text); }
.mastery-req.met span { color: var(--green); }
.mastery-req b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted); }
.mastery-req.met .dq-bar i { background: linear-gradient(90deg, var(--green-2), var(--green)) !important; }

.gauntlet-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-color: rgba(246, 195, 78, 0.35) !important;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(246, 195, 78, 0.08), transparent 55%),
    linear-gradient(180deg, #14111d, #0c0b14) !important;
}

.gauntlet-panel.locked { opacity: 0.7; }
.gauntlet-copy { flex: 1; min-width: 260px; }

.gauntlet-rounds { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.gauntlet-round {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid rgba(246, 195, 78, 0.3);
  color: #ffe1a1;
  background: rgba(246, 195, 78, 0.05);
}

@media (max-width: 640px) {
  .matrix-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mastery-req { grid-template-columns: 1fr; gap: 5px; }
}

/* ===================== Profile consolidation ===================== */

.profile-bottom-grid.hidden { display: none !important; }

.pf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}

.pf-cell { min-width: 0; display: flex; flex-direction: column; }
.pf-cell > article, .pf-cell > .referral-card, .pf-cell > .profile-sub-card { height: 100%; }

/* referral + subscription cards fill their cells uniformly */
#pf-referral-slot .referral-card,
#pf-subscription-slot .profile-sub-card {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.pf-ach-panel, .pf-friends-card { padding: 20px 22px !important; }

.pf-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pf-cell-head .panel-title { margin: 0; }

/* achievements inside the panel: lighter rows instead of nested panels */
.pf-ach-panel .pf-ach {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
}

.pf-ach-panel .pf-ach.unlocked {
  border-color: rgba(246, 195, 78, 0.3);
  background: rgba(246, 195, 78, 0.05);
}

.pf-ach-panel .pf-ach-list { margin-top: 0; flex: 1; }

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

/* ===================== Trainer / Assistant / Game Identities ===================== */

/* personal trainer panel */
.trainer-panel {
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 22px 26px;
  border-color: rgba(124, 92, 255, 0.3) !important;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(124, 92, 255, 0.14), transparent 45%),
    linear-gradient(180deg, #12101f, #0c0b15) !important;
}

.trainer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.trainer-avatar { font-size: 30px; filter: drop-shadow(0 0 12px rgba(124, 92, 255, 0.5)); }
.trainer-head h3 { margin: 2px 0 0; font-size: 17px; }
.trainer-head h3 i { color: var(--violet-2); font-style: normal; }
.trainer-head > div { flex: 1; }

.trainer-bonus {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid rgba(246, 195, 78, 0.35);
  background: rgba(246, 195, 78, 0.07);
  padding: 5px 11px;
  border-radius: 99px;
}

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

.trainer-rec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
}

.trainer-rec.done { border-color: rgba(77, 255, 171, 0.4); opacity: 0.8; }

.trainer-rec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--violet-soft);
  color: var(--violet-2);
  flex-shrink: 0;
}

.trainer-rec.done .trainer-rec-icon { background: rgba(77, 255, 171, 0.12); color: var(--green); }
.trainer-rec-icon svg { width: 17px; height: 17px; }
.trainer-rec-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trainer-rec-body strong { font-size: 13px; }
.trainer-rec-body small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.trainer-done-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 900; color: var(--green); letter-spacing: 0.1em; }

/* assistant quick replies */
.assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 4px;
}

.assistant-chip {
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--violet-line);
  background: var(--violet-soft);
  color: var(--violet-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.assistant-chip:hover { transform: translateY(-1px); background: rgba(124, 92, 255, 0.22); }

.assistant-bubble b { color: var(--violet-2); }

/* --- signature game identities --- */

/* pair matrix: tiles pop in staggered */
.matrix-arena .matrix-tile { animation: tilePop 0.4s cubic-bezier(0.22, 1.4, 0.36, 1) backwards; }
.matrix-arena .matrix-tile:nth-child(1) { animation-delay: 0.02s; }
.matrix-arena .matrix-tile:nth-child(2) { animation-delay: 0.1s; }
.matrix-arena .matrix-tile:nth-child(3) { animation-delay: 0.18s; }
.matrix-arena .matrix-tile:nth-child(4) { animation-delay: 0.26s; }

@keyframes tilePop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* gap judge: swipe deck */
.swipe-stack { position: relative; width: 100%; max-width: 440px; margin: 0 auto; min-height: 230px; }

.swipe-stack .judge-card { position: absolute; inset: 0; margin: 0; max-width: none; }
.swipe-ghost { transform: scale(0.94) translateY(14px); opacity: 0.35; }
.swipe-ghost.g2 { transform: scale(0.88) translateY(26px); opacity: 0.18; }

.swipe-top {
  cursor: grab;
  border-color: rgba(255, 149, 77, 0.4) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.45s ease;
}

.swipe-top.swipe-right { transform: translateX(130%) rotate(14deg); opacity: 0; }
.swipe-top.swipe-left { transform: translateX(-130%) rotate(-14deg); opacity: 0; }

.swipe-ticker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 900;
  color: #ff954d;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.swipe-hints {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.7;
}

/* greek gauntlet: terminal desk + contribution bars */
.greek-desk .judge-card {
  border-color: rgba(124, 92, 255, 0.4);
  background:
    linear-gradient(rgba(124, 92, 255, 0.04) 1px, transparent 1px),
    linear-gradient(165deg, #100d1e, #0a0813);
  background-size: 100% 26px, auto;
  box-shadow: inset 0 0 30px rgba(124, 92, 255, 0.06);
}

.greek-breakdown {
  width: 100%;
  max-width: 460px;
  margin: 12px auto 0;
  padding: 14px 18px;
  border-radius: 13px;
  border: 1px solid rgba(124, 92, 255, 0.3);
  background: #0b0913;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  animation: tilePop 0.35s ease backwards;
}

.greek-bar-row { display: grid; grid-template-columns: 74px 1fr 58px; gap: 10px; align-items: center; margin-bottom: 7px; font-size: 11.5px; }
.greek-bar-row span { color: var(--muted); }
.greek-bar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.greek-bar i { display: block; height: 100%; border-radius: 99px; }
.greek-bar i.pos { background: linear-gradient(90deg, var(--green-2), var(--green)); }
.greek-bar i.neg { background: linear-gradient(90deg, #c2404e, var(--red)); }
.greek-bar-row b { text-align: right; font-size: 11.5px; }
.greek-bar-row b.pos, .greek-net.pos { color: var(--green); }
.greek-bar-row b.neg, .greek-net.neg { color: var(--red); }
.greek-net { text-align: right; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }

/* funding flip: pressure gauge */
.pressure-board { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.pressure-gauge {
  position: relative;
  width: 240px;
  height: 130px;
  overflow: hidden;
}

.pressure-dial {
  position: absolute;
  inset: 0 0 -130px 0;
  border-radius: 50%;
  background: conic-gradient(from 270deg,
    rgba(61, 255, 162, 0.55) 0deg 55deg,
    rgba(246, 195, 78, 0.45) 55deg 125deg,
    rgba(255, 95, 110, 0.55) 125deg 180deg,
    transparent 180deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}

.pressure-needle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 104px;
  border-radius: 99px;
  background: #eef1ff;
  box-shadow: 0 0 12px rgba(238, 241, 255, 0.6);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(calc(var(--pressure, 50) * 1.8deg - 90deg));
  transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.pressure-needle::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef1ff;
}

.pressure-label-l, .pressure-label-c, .pressure-label-r {
  position: absolute;
  bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}

.pressure-label-l { left: -4px; color: var(--green); }
.pressure-label-c { left: 50%; transform: translateX(-50%); bottom: auto; top: 0; }
.pressure-label-r { right: -4px; color: var(--red); }

.pressure-readout { max-width: 440px; }

@media (max-width: 640px) {
  .trainer-recs { grid-template-columns: 1fr; }
  .pressure-gauge { width: 200px; height: 110px; }
  .pressure-needle { height: 86px; }
}

/* ===================== Streak Pill v2 — radiating, no corners ===================== */

body .topbar-status span,
body .topbar-status.streak-secured span,
body .topbar-status.streak-risk span {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 138, 66, 0.4) !important;
  background: linear-gradient(140deg, rgba(255, 110, 40, 0.2), rgba(180, 52, 32, 0.1)) !important;
  color: #ffb27d !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  padding: 5px 16px !important;
  min-height: 30px !important;
  position: relative;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* neutralize the old squared chrome + wrapper glow */
body .topbar-status,
body .topbar-status.streak-secured,
body .topbar-status.streak-risk {
  border: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

@keyframes streakRadiatePill {
  0% { box-shadow: 0 0 0 0 rgba(255, 130, 55, 0.45), 0 0 16px rgba(255, 130, 55, 0.3); }
  70% { box-shadow: 0 0 0 11px rgba(255, 130, 55, 0), 0 0 16px rgba(255, 130, 55, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 130, 55, 0), 0 0 16px rgba(255, 130, 55, 0.3); }
}

@keyframes streakRadiateRisk {
  0% { box-shadow: 0 0 0 0 rgba(255, 95, 87, 0.45), 0 0 14px rgba(255, 95, 87, 0.25); }
  70% { box-shadow: 0 0 0 9px rgba(255, 95, 87, 0), 0 0 14px rgba(255, 95, 87, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(255, 95, 87, 0), 0 0 14px rgba(255, 95, 87, 0.25); }
}

body .topbar-status.streak-secured span {
  border-color: rgba(255, 154, 74, 0.65) !important;
  color: #ffc79b !important;
  animation: streakRadiatePill 2.8s ease-out infinite;
}

body .topbar-status.streak-risk span {
  border-color: rgba(255, 106, 95, 0.55) !important;
  color: #ffa39b !important;
  background: linear-gradient(140deg, rgba(255, 80, 60, 0.18), rgba(150, 40, 32, 0.1)) !important;
  animation: streakRadiateRisk 2s ease-out infinite;
}

body .topbar-status.streak-zero span {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(230, 238, 236, 0.55) !important;
  animation: none;
  box-shadow: none;
}

body .topbar-status.streak-zero span::before { filter: grayscale(1) opacity(0.6); }

.academy-result-boost {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 130, 55, 0.14);
  border: 1px solid rgba(255, 130, 55, 0.4);
  color: #ffb27d;
  font-size: 12px;
  font-weight: 900;
  vertical-align: middle;
}

/* ===================== Session Brief (RE.AI) ===================== */

.session-brief {
  position: relative;
  border: 1px solid rgba(77, 255, 171, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(10, 28, 22, 0.92), rgba(7, 16, 14, 0.96)),
    repeating-linear-gradient(0deg, rgba(77, 255, 171, 0.025) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(77, 255, 171, 0.025) 0 1px, transparent 1px 28px);
  padding: 18px 22px;
  margin: 18px 0 22px;
  overflow: hidden;
}

.session-brief::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 140px at 15% 0%, rgba(77, 255, 171, 0.07), transparent 70%);
}

.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(77, 255, 171, 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 800;
}

.sb-live { color: #4dffab; display: inline-flex; align-items: center; gap: 8px; }
.sb-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4dffab;
  box-shadow: 0 0 8px rgba(77, 255, 171, 0.8);
  animation: sbBlink 2.2s ease-in-out infinite;
}
@keyframes sbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sb-session { color: rgba(220, 238, 232, 0.7); letter-spacing: 0.18em; }

.sb-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; position: relative; z-index: 1; }

.sb-row { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; }

.sb-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.sb-icon svg { width: 17px; height: 17px; }
.sb-icon.tone svg { color: #9aa7b5; }
.sb-icon.driver svg { color: #4dffab; }
.sb-icon.watch svg { color: #58c7ff; }
.sb-icon.avoid svg { color: #f6c34e; }

.sb-row small {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em;
  color: rgba(214, 230, 226, 0.55);
}
.sb-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sb-dot.tone { background: #9aa7b5; }
.sb-dot.driver { background: #4dffab; }
.sb-dot.watch { background: #58c7ff; }
.sb-dot.avoid { background: #f6c34e; }

.sb-row p { margin: 3px 0 0; font-size: 15.5px; font-weight: 650; color: #eef6f3; line-height: 1.35; }

.sb-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(77, 255, 171, 0.1);
  font-size: 11.5px; color: rgba(214, 230, 226, 0.45);
}

/* compact hub variant: rows fan out into a grid */
.session-brief.compact { padding: 14px 18px; margin: 14px 0 18px; }
.session-brief.compact .sb-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 18px; }
.session-brief.compact .sb-row p { font-size: 13.5px; }
.session-brief.compact .sb-icon { width: 32px; height: 32px; border-radius: 9px; }
.session-brief.compact .sb-foot { font-size: 10.5px; }

/* pre-game gate */
.sb-stage { max-width: 660px; margin: 0 auto; padding: 12px 6px 22px; display: flex; flex-direction: column; gap: 4px; }
.sb-stage .session-brief { margin: 6px 0 16px; }
.sb-enter { align-self: center; min-width: 260px; }

/* ===================== Sidebar LIVE pill ===================== */

.side-live-pill {
  margin-left: auto;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #4dffab;
  border: 1px solid rgba(77, 255, 171, 0.35);
  background: rgba(77, 255, 171, 0.08);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
}
.side-link.locked .side-live-pill { display: none; }
body:not(.sidebar-expanded) .side-nav .side-live-pill { display: none; }

/* ===================== Traders Dashboard ===================== */

.tdash-section { padding: 8px 0 40px; }

.tdash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tdash-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tdash-title-row h2 { margin: 2px 0; font-size: clamp(26px, 4vw, 36px); letter-spacing: 0.02em; }
.tdash-sub { color: var(--muted); font-size: 12.5px; }
.tdash-head-actions { display: flex; gap: 8px; align-items: center; }

.tdash-live-dot { color: #4dffab; display: inline-flex; align-items: center; gap: 6px; }
.tdash-live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #4dffab; box-shadow: 0 0 8px rgba(77,255,171,.8); animation: sbBlink 2.2s ease-in-out infinite; }

.tdash-change { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 900; font-size: 16px; padding: 4px 12px; border-radius: 999px; }
.tdash-change.up { color: #3ddc97; background: rgba(61, 220, 151, 0.1); border: 1px solid rgba(61, 220, 151, 0.3); }
.tdash-change.down { color: #ff5f6e; background: rgba(255, 95, 110, 0.1); border: 1px solid rgba(255, 95, 110, 0.3); }

.tdash-bias { font-weight: 900; font-size: 13px; padding: 5px 14px; border-radius: 999px; letter-spacing: 0.04em; }
.tdash-bias.bullish { color: #3ddc97; border: 1px solid rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.08); }
.tdash-bias.bearish { color: #ff5f6e; border: 1px solid rgba(255, 95, 110, 0.4); background: rgba(255, 95, 110, 0.08); }
.tdash-bias.neutral { color: #cbd8d5; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }

.tdash-confidence { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tdash-confidence small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.2em; font-size: 10.5px; color: var(--muted); font-weight: 800; }
.tdash-conf-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.tdash-conf-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f9e77, #4dffab); transition: width 0.6s ease; }
.tdash-confidence b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.tdash-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.tdash-main, .tdash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tdash-card {
  border: 1px solid var(--line-soft, rgba(255,255,255,.07));
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(16, 22, 34, 0.85), rgba(10, 14, 22, 0.92));
  padding: 18px 20px;
}

.tdash-card-kicker { margin: 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: #58c7ff; }
.tdash-card-kicker.gold { color: #f6c34e; }

.tdash-chart-card { padding: 14px 14px 10px; }
.tdash-chart-card canvas { display: block; width: 100%; }
.tdash-chart-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 6px 4px; }
.tdash-chart-stats div { display: flex; flex-direction: column; gap: 2px; }
.tdash-chart-stats small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: 0.18em; color: var(--muted); font-weight: 800; }
.tdash-chart-stats b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }

.tdash-ai-text { margin: 0; font-size: 15px; line-height: 1.65; color: #e6efec; }
.tdash-ai-actions { margin-top: 14px; display: flex; gap: 10px; }

.tdash-edge { display: flex; gap: 18px; align-items: center; border-color: rgba(246, 195, 78, 0.22); }
.tdash-edge-ring {
  flex: 0 0 auto;
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background:
    radial-gradient(closest-side, rgba(10, 14, 22, 0.97) 78%, transparent 79%),
    conic-gradient(#f6c34e calc(var(--edge) * 1%), rgba(255, 255, 255, 0.08) 0);
}
.tdash-edge-ring b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px; color: #f6c34e; }
.tdash-edge-ring small { font-size: 7.5px; font-weight: 900; letter-spacing: 0.08em; color: #f6c34e; text-align: center; line-height: 1.3; max-width: 64px; }
.tdash-edge-copy p:last-child { margin: 0; font-size: 13.5px; line-height: 1.55; color: #dbe7e3; }

.tdash-drivers { display: flex; flex-direction: column; }
.tdash-driver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; font-weight: 650; }
.tdash-driver:last-child { border-bottom: none; }
.tdash-driver b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tdash-driver b.up, .tdash-dd-driver b.up { color: #3ddc97; }
.tdash-driver b.down, .tdash-dd-driver b.down { color: #ff5f6e; }

.tdash-news { display: block; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); text-decoration: none; color: inherit; }
.tdash-news:last-child { border-bottom: none; }
.tdash-news span { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; color: #e6efec; }
.tdash-news:hover span { color: #8ec9ff; }
.tdash-news small { color: var(--muted); font-size: 11px; }
.tdash-empty { color: var(--muted); font-size: 13px; margin: 0; }

.tdash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.tdash-tile {
  border: 1px solid var(--line-soft, rgba(255,255,255,.07));
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(16, 22, 34, 0.85), rgba(10, 14, 22, 0.92));
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
}
.tdash-tile small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.24em; font-size: 10px; color: var(--muted); font-weight: 800; align-self: flex-start; }
.tdash-tile-icon { font-size: 22px; line-height: 1; }
.tdash-tile b { font-size: 19px; font-weight: 900; letter-spacing: 0.06em; }
.tdash-tile em { font-style: normal; font-size: 10.5px; color: var(--muted); }

.tdash-tile-meter { display: flex; gap: 5px; }
.tdash-tile-meter i { width: 34px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.tdash-tile-meter i.on { background: #f6c34e; box-shadow: 0 0 9px rgba(246, 195, 78, 0.55); }
.tdash-tile-meter i.on.good { background: #3ddc97; box-shadow: 0 0 9px rgba(61, 220, 151, 0.55); }
.tdash-tile-meter i.on.bad { background: #ff5f6e; box-shadow: 0 0 9px rgba(255, 95, 110, 0.55); }

.tdash-tile.flow-thin .tdash-tile-icon, .tdash-tile.flow-thin b { color: #f6c34e; }
.tdash-tile.flow-healthy .tdash-tile-icon, .tdash-tile.flow-healthy b { color: #3ddc97; }
.tdash-tile.flow-crowded .tdash-tile-icon, .tdash-tile.flow-crowded b { color: #ff5f6e; }
.tdash-tile.pulse-quiet .tdash-tile-icon, .tdash-tile.pulse-quiet b { color: #8ea3b5; }
.tdash-tile.pulse-tradable .tdash-tile-icon, .tdash-tile.pulse-tradable b { color: #3ddc97; }
.tdash-tile.pulse-wild .tdash-tile-icon, .tdash-tile.pulse-wild b { color: #ff5f6e; }

.tdash-bearing-word { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tdash-tile.bearing-flatline .tdash-bearing-word { color: #8ea3b5; }
.tdash-tile.bearing-climbing .tdash-bearing-word { color: #3ddc97; }
.tdash-tile.bearing-sliding .tdash-bearing-word { color: #ff5f6e; }
.tdash-tile-bar { width: 100%; max-width: 150px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.05); display: flex; align-items: center; padding: 0 5px; }
.tdash-tile-bar i { display: block; width: 100%; height: 8px; border-radius: 4px; background: currentColor; opacity: .85; }
.tdash-tile.bearing-flatline .tdash-tile-bar i { color: #4f9e77; height: 8px; }
.tdash-tile.bearing-climbing .tdash-tile-bar i { color: #3ddc97; transform: rotate(-6deg); }
.tdash-tile.bearing-sliding .tdash-tile-bar i { color: #ff5f6e; transform: rotate(6deg); }

.tdash-stale-note { margin: 14px 0 0; font-size: 12px; color: #f6c34e; }
.tdash-disclaimer { margin: 18px 0 0; font-size: 11.5px; color: var(--muted); }

/* loading / error */
.tdash-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 90px 20px; color: var(--muted); }
.tdash-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(77, 255, 171, 0.15); border-top-color: #4dffab; animation: tdashSpin 0.9s linear infinite; }
@keyframes tdashSpin { to { transform: rotate(360deg); } }
.tdash-error { text-align: center; padding: 70px 20px; }
.tdash-error h3 { margin: 0 0 8px; }
.tdash-error p { color: var(--muted); margin: 0 0 18px; }
.tdash-error-actions { display: flex; gap: 10px; justify-content: center; }

/* setup */
.tdash-setup { max-width: 720px; margin: 20px auto; text-align: center; padding: 30px 18px; }
.tdash-setup h2 { font-size: clamp(28px, 4vw, 38px); margin: 6px 0 8px; }
.tdash-market-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin: 22px 0 18px; }
.tdash-market-chip {
  font: inherit; font-weight: 800; font-size: 14px;
  color: var(--text); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-soft, rgba(255,255,255,.1));
  border-radius: 999px; padding: 9px 20px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tdash-market-chip:hover { border-color: var(--violet-line, rgba(124,92,255,.5)); }
.tdash-market-chip.active { border-color: var(--violet-2, #9f87ff); background: rgba(124, 92, 255, 0.14); color: #cabdff; }
.tdash-sym-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
.tdash-sym-row input {
  flex: 1; max-width: 340px;
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--line-soft, rgba(255,255,255,.12));
  border-radius: 12px; padding: 12px 16px;
}
.tdash-sym-row input:focus { outline: none; border-color: var(--violet-2, #9f87ff); }
.tdash-preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.tdash-preset {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  color: var(--text); font-weight: 750; font-size: 13.5px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: 12px; padding: 11px 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.tdash-preset:hover { border-color: #4dffab; transform: translateY(-1px); }
.tdash-preset small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-size: 11px; }
.tdash-foot-note { margin-top: 16px; color: var(--muted); font-size: 12.5px; }

/* locked */
.tdash-locked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 34px; align-items: center; padding: 30px 6px; }
.tdash-locked-fake { border: 1px solid var(--line-soft, rgba(255,255,255,.08)); border-radius: 18px; padding: 20px; filter: blur(1.2px) saturate(.8); opacity: .55; pointer-events: none; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(165deg, rgba(16,22,34,.85), rgba(10,14,22,.92)); }
.tlf-row { display: flex; gap: 10px; }
.tlf-pill { height: 22px; width: 90px; border-radius: 999px; background: rgba(77,255,171,.15); }
.tlf-pill.wide { width: 170px; background: rgba(255,255,255,.07); }
.tlf-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.tlf-chart i { flex: 1; border-radius: 3px; background: rgba(61,220,151,.35); }
.tlf-chart i:nth-child(odd) { background: rgba(255,95,110,.3); }
.tlf-chart i:nth-child(1) { height: 34%; } .tlf-chart i:nth-child(2) { height: 55%; } .tlf-chart i:nth-child(3) { height: 42%; }
.tlf-chart i:nth-child(4) { height: 70%; } .tlf-chart i:nth-child(5) { height: 52%; } .tlf-chart i:nth-child(6) { height: 84%; }
.tlf-chart i:nth-child(7) { height: 64%; } .tlf-chart i:nth-child(8) { height: 90%; } .tlf-chart i:nth-child(9) { height: 71%; }
.tlf-chart i:nth-child(10) { height: 96%; } .tlf-chart i:nth-child(11) { height: 80%; } .tlf-chart i:nth-child(12) { height: 100%; }
.tlf-tile { flex: 1; height: 58px; border-radius: 12px; background: rgba(255,255,255,.05); }
.tdash-locked-copy h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 8px 0 10px; }
.tdash-locked-copy p { color: #dbe7e3; line-height: 1.6; }
.tdash-locked-copy ul { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.tdash-locked-copy small { display: block; margin-top: 10px; color: var(--muted); }

/* deep dive modal */
.tdash-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 8, 12, 0.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.tdash-modal-card { width: min(640px, 100%); max-height: 84vh; display: flex; flex-direction: column; border: 1px solid rgba(88, 199, 255, 0.2); border-radius: 20px; background: linear-gradient(165deg, rgba(14, 20, 32, 0.98), rgba(9, 13, 20, 0.99)); overflow: hidden; }
.tdash-modal-card header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tdash-modal-card header h3 { margin: 0; font-size: 18px; }
.tdash-modal-card header button { font: inherit; font-size: 16px; background: rgba(255,255,255,.05); color: var(--text); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; }
.tdash-modal-body { padding: 20px 22px; overflow-y: auto; }
.tdash-dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.tdash-dd-grid div { border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.tdash-dd-grid small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--muted); font-weight: 800; }
.tdash-dd-grid strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.tdash-dd h4 { margin: 18px 0 8px; font-size: 12px; letter-spacing: 0.18em; color: #58c7ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tdash-dd-drivers { display: flex; flex-direction: column; }
.tdash-dd-driver { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; }
.tdash-dd-scenario { font-size: 13.5px; line-height: 1.6; color: #dbe7e3; margin: 0 0 10px; }
.tdash-dd-news { display: block; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); text-decoration: none; }
.tdash-dd-news span { display: block; font-size: 13px; color: #e6efec; font-weight: 650; }
.tdash-dd-news:hover span { color: #8ec9ff; }
.tdash-dd-news small { color: var(--muted); font-size: 11px; }
.tdash-dd-note { margin: 18px 0 0; font-size: 11px; color: var(--muted); }

@media (max-width: 980px) {
  .tdash-grid { grid-template-columns: 1fr; }
  .tdash-locked { grid-template-columns: 1fr; }
  .tdash-tiles { grid-template-columns: 1fr; }
  .tdash-dd-grid { grid-template-columns: repeat(2, 1fr); }
  .session-brief.compact .sb-rows { grid-template-columns: 1fr; }
}
.tdash-proxy-note { display: block; margin-top: 3px; color: #f6c34e; font-size: 11.5px; }

/* ===================== Admin badge (local dev only) ===================== */
#admin-badge {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9500;
  font: 900 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  color: #ffd27a;
  background: linear-gradient(140deg, rgba(120, 82, 20, 0.5), rgba(60, 40, 8, 0.55));
  border: 1px solid rgba(246, 195, 78, 0.5);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(246, 195, 78, 0.25);
}
#admin-badge:hover { color: #fff; border-color: rgba(246, 195, 78, 0.8); }

/* ===================== Home hero: use the top of the page ===================== */
body .hero { padding-top: 8px !important; }
body .hero-grid,
body[data-view="home"] .hero-grid,
body[data-page="home"] .hero-grid { padding-top: 18px !important; }

/* ===================== Sidebar v3: collapsible icon rail (Stake-style) =====================
   Expanded  = full 240px labeled menu (unchanged).
   Collapsed = 74px icon rail: same items, icons centered, tooltips on hover.
   Mobile (<861px) keeps the existing off-canvas drawer + backdrop. */

@media (min-width: 861px) {
  body { --side-rail-width: 74px; --side-current-width: var(--side-rail-width); }
  body.sidebar-expanded { --side-current-width: var(--side-open-width, 240px); }

  body .side-nav {
    transform: none !important;
    transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), min-width 240ms cubic-bezier(0.4, 0, 0.2, 1), max-width 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* hard collapsed geometry — beats every legacy layer on specificity */
  body:not(.sidebar-expanded) .side-nav {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
  body:not(.sidebar-expanded) .site-shell {
    width: calc(100% - 74px) !important;
    margin-left: 74px !important;
  }
  body:not(.sidebar-expanded) .top-nav {
    left: 74px !important;
    width: calc(100% - 74px) !important;
  }
  body.sidebar-expanded .side-nav {
    width: var(--side-open-width, 240px) !important;
    min-width: var(--side-open-width, 240px) !important;
    max-width: var(--side-open-width, 240px) !important;
  }

  /* rail mode: kill clipping so hover tooltips can escape */
  body:not(.sidebar-expanded) .side-nav {
    overflow: visible !important;
    clip-path: none !important;
  }
  body:not(.sidebar-expanded) .side-nav-links {
    overflow: visible !important;
    padding-top: 58px !important;
  }

  /* hide text, keep symbols */
  body:not(.sidebar-expanded) .side-nav .side-label,
  body:not(.sidebar-expanded) .side-nav .side-section-label,
  body:not(.sidebar-expanded) .side-nav .side-progress-card,
  body:not(.sidebar-expanded) .side-nav .side-live-pill {
    display: none !important;
  }

  body:not(.sidebar-expanded) .side-link {
    justify-content: center !important;
    padding: 0 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
    margin: 2px auto !important;
    border-radius: 12px !important;
    position: relative !important;
  }

  body:not(.sidebar-expanded) .side-icon {
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
  }

  body:not(.sidebar-expanded) .side-divider {
    width: 34px !important;
    margin: 8px auto !important;
  }

  /* premium lock shrinks into a corner tag */
  body:not(.sidebar-expanded) .side-link .side-lock {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    margin: 0 !important;
  }
  body:not(.sidebar-expanded) .side-link .side-lock svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* hover tooltip with the item name */
  body:not(.sidebar-expanded) .side-link::before { content: none !important; }
  body:not(.sidebar-expanded) .side-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #1b2230;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eef4f2;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    z-index: 1500;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  /* bottom logout: icon only, centered */
  body:not(.sidebar-expanded) .side-nav > .logout-tab {
    justify-content: center !important;
    padding: 10px 0 !important;
    margin: 0 10px 12px !important;
  }

  /* admin badge slides with the rail */
  #admin-badge { left: calc(var(--side-current-width, 74px) + 14px) !important; transition: left 240ms cubic-bezier(0.4, 0, 0.2, 1); }
}

/* ===================== Elite Command Center ===================== */

.gold-kicker { color: #f6c34e !important; }

.elite-desk { padding: 6px 0 40px; }
.elite-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.elite-head h2 { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 38px); }
.elite-member-chip {
  font: 900 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em; color: #f6c34e;
  border: 1px solid rgba(246, 195, 78, 0.45);
  background: linear-gradient(140deg, rgba(246, 195, 78, 0.12), rgba(246, 195, 78, 0.03));
  border-radius: 999px; padding: 9px 16px;
  box-shadow: 0 0 18px rgba(246, 195, 78, 0.15);
}

.elite-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.elite-kpi {
  border: 1px solid rgba(246, 195, 78, 0.16);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(24, 22, 14, 0.75), rgba(12, 12, 10, 0.9));
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.elite-kpi small { font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.22em; color: rgba(246, 195, 78, 0.75); }
.elite-kpi b { font-size: 26px; font-weight: 900; }
.elite-kpi span { font-size: 11.5px; color: var(--muted); }
.elite-kpi.good b { color: #3ddc97; }
.elite-kpi.warn b { color: #ffb45f; }
.elite-kpi.muted b { color: var(--muted); }

.elite-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.elite-col-main, .elite-col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.elite-card {
  border: 1px solid rgba(246, 195, 78, 0.14);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(20, 20, 26, 0.9), rgba(11, 12, 16, 0.95));
  padding: 18px 20px;
}
.elite-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.elite-watch-add { display: flex; gap: 8px; }
.elite-watch-add input {
  font: 700 12.5px/1 inherit; letter-spacing: 0.03em;
  color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 8px 12px; width: 210px;
}
.elite-watch-add input:focus { outline: none; border-color: #f6c34e; }

.elite-watch-rows { display: flex; flex-direction: column; margin-top: 10px; }
.elite-watch-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.elite-watch-row:last-child { border-bottom: none; }
.elite-watch-row > b { min-width: 86px; font-size: 14.5px; letter-spacing: 0.03em; }
.elite-watch-spark { flex: 0 0 110px; height: 34px; }
.elite-watch-price { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 13.5px; }
.elite-watch-chg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 12.5px; min-width: 72px; text-align: right; }
.elite-watch-chg.up { color: #3ddc97; }
.elite-watch-chg.down { color: #ff5f6e; }
.elite-watch-x { font: 700 12px inherit; color: var(--muted); background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.elite-watch-x:hover { color: #ff5f6e; background: rgba(255,95,110,.08); }
.elite-watch-row.error small, .elite-watch-row.loading small { color: var(--muted); margin-left: auto; }

.elite-foot-note { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
.elite-inline-link { font: 700 11px inherit; color: #8ec9ff; background: none; border: none; cursor: pointer; padding: 0; }

.elite-week-bars { display: flex; align-items: flex-end; gap: 10px; padding: 16px 4px 6px; }
.elite-week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.elite-week-bar i { display: block; width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px; background: rgba(255,255,255,.07); }
.elite-week-bar i.on { background: linear-gradient(180deg, #f6c34e, #b8871c); box-shadow: 0 0 12px rgba(246,195,78,.25); }
.elite-week-bar small { font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.elite-week-bar span { font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: #f6c34e; min-height: 12px; }

.elite-report-verdict { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: #dbe7e3; }
.elite-report-verdict b { color: #f6c34e; }

.elite-discipline-note { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #dbe7e3; }
.elite-leak-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.elite-leak { display: grid; grid-template-columns: 110px 1fr 24px; align-items: center; gap: 10px; font-size: 12.5px; }
.elite-leak span { color: var(--muted); font-weight: 650; }
.elite-leak-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.elite-leak-track i { display: block; height: 100%; border-radius: 999px; }
.elite-leak-track i.clean { background: rgba(61,220,151,.4); width: 4% !important; }
.elite-leak-track i.warn { background: #ffb45f; }
.elite-leak-track i.bad { background: #ff5f6e; }
.elite-leak b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

.elite-plan { display: flex; flex-direction: column; gap: 8px; }
.elite-plan-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: 650 13px/1.4 inherit; color: var(--text);
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 11px 13px; cursor: pointer;
  transition: border-color .15s ease;
}
.elite-plan-item:hover { border-color: rgba(246,195,78,.45); }
.elite-plan-item.done { opacity: .62; }
.elite-plan-item.done span:last-child { text-decoration: line-through; }
.elite-plan-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(246,195,78,.5); color: #3ddc97; font-weight: 900; font-size: 12px;
}
.elite-plan-item.done .elite-plan-check { background: rgba(61,220,151,.14); border-color: rgba(61,220,151,.6); }

.elite-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.elite-tool-row:last-child { border-bottom: none; }
.elite-tool-row b { font-size: 13.5px; }
.elite-tool-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.5; }
.elite-grade { color: #f6c34e; }

.elite-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.elite-records div { border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.elite-records small { font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; color: var(--muted); }
.elite-records b { font-size: 16px; font-weight: 900; color: #f6c34e; }

/* locked upsell */
.elite-locked { max-width: 760px; margin: 30px auto; text-align: center; padding: 20px; }
.elite-locked h2 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 10px; }
.elite-locked-sub { color: #dbe7e3; margin-bottom: 22px; }
.elite-locked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 26px; text-align: left; }
.elite-locked-grid div { border: 1px solid rgba(246,195,78,.18); border-radius: 14px; padding: 14px 16px; font-size: 14px; background: linear-gradient(165deg, rgba(24,22,14,.6), rgba(12,12,10,.8)); }
.elite-locked-grid div span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.elite-locked small { display: block; margin-top: 12px; color: var(--muted); }

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

/* ===================== Legal pages ===================== */
.legal-page { max-width: 780px; margin: 0 auto; padding: 48px 24px 80px; line-height: 1.75; color: #dfe9e6; }
.legal-page h1 { font-size: clamp(30px, 5vw, 42px); margin: 18px 0 4px; color: #fff; }
.legal-page h2 { font-size: 19px; margin: 34px 0 10px; color: #fff; }
.legal-page h3 { font-size: 15px; margin: 20px 0 8px; color: #cfe3dc; }
.legal-page p { margin: 0 0 14px; font-size: 15px; }
.legal-page ul { margin: 0 0 16px; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; font-size: 15px; }
.legal-page a { color: #58c7ff; }
.legal-back { display: inline-block; margin-bottom: 8px; font-weight: 700; text-decoration: none; }
.legal-updated { color: #8fa6a0; font-size: 13px !important; margin-bottom: 26px !important; }
.legal-related { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13.5px !important; color: #8fa6a0; }

/* ===================== Prop Firm Training Grounds ===================== */

.propfirm-section { padding: 4px 0 44px; }
.prop-shell { max-width: 1280px; margin: 0 auto; }

.prop-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(13, 17, 23, 0.97), rgba(9, 12, 17, 0.98));
  backdrop-filter: blur(10px);
}
.prop-topbar h2 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 28px); }
.prop-wallet { text-align: right; }
.prop-wallet small { display: block; font: 800 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.22em; color: #86efac; }
.prop-wallet strong { font: 900 26px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace; color: #dcfce7; text-shadow: 0 0 18px rgba(34, 197, 94, 0.35); }

.prop-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.prop-tab {
  font: 800 13px inherit; letter-spacing: 0.02em; cursor: pointer;
  color: rgba(226, 232, 240, 0.65); background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 12px; padding: 10px 18px;
}
.prop-tab.active { color: #eef4f2; border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.08); }

/* desk layout */
.prop-desk { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(290px, 1fr); gap: 14px; align-items: start; }
.prop-chart-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.prop-inst-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prop-inst {
  font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  color: #e2e8f0; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 10px; padding: 7px 12px;
}
.prop-inst b { font-size: 12.5px; }
.prop-inst small { font-size: 9.5px; color: rgba(226, 232, 240, 0.45); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prop-inst.active { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.08); }
.prop-inst:disabled { opacity: 0.45; cursor: not-allowed; }
.prop-speed { margin-left: auto; display: flex; gap: 4px; }
.prop-speed-btn { font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; color: rgba(226,232,240,.55); background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.12); border-radius: 8px; padding: 6px 10px; }
.prop-speed-btn.active { color: #86efac; border-color: rgba(34,197,94,.5); }

.prop-chart-wrap {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.98), rgba(7, 10, 15, 0.99)),
    repeating-linear-gradient(90deg, rgba(148,163,184,.02) 0 1px, transparent 1px 60px);
  overflow: hidden;
}
.prop-chart-wrap canvas { display: block; width: 100%; }
.prop-chart-badge {
  position: absolute; top: 10px; left: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.18em;
  color: rgba(226, 232, 240, 0.6);
  background: rgba(10, 14, 20, 0.72); border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 999px; padding: 5px 11px;
}
.prop-chart-badge i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.8); animation: sbBlink 2s ease-in-out infinite; }

/* trade panel */
.prop-trade-panel {
  display: flex; gap: 12px; align-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 16px;
  background: linear-gradient(165deg, rgba(13, 17, 23, 0.95), rgba(9, 12, 17, 0.98));
  padding: 12px;
}
.prop-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; }
.prop-qty small { font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.2em; color: rgba(226,232,240,.5); }
.prop-qty-ctrl { display: flex; align-items: center; gap: 10px; }
.prop-qty-ctrl button { font: 900 18px inherit; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; color: #e2e8f0; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.15); }
.prop-qty-ctrl b { font: 900 22px ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 30px; text-align: center; }
.prop-qty-max { color: rgba(226,232,240,.35) !important; }

.prop-buy, .prop-sell {
  flex: 1; cursor: pointer; border-radius: 12px; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 900 17px inherit; letter-spacing: 0.04em; padding: 16px 10px;
  color: #06120c; transition: transform 0.08s ease, filter 0.12s ease;
}
.prop-buy { background: linear-gradient(180deg, #34d97b, #16a34a); box-shadow: 0 6px 22px rgba(34, 197, 94, 0.25); }
.prop-sell { background: linear-gradient(180deg, #f87171, #dc2626); color: #17090b; box-shadow: 0 6px 22px rgba(239, 68, 68, 0.25); }
.prop-buy:hover, .prop-sell:hover { filter: brightness(1.08); }
.prop-buy:active, .prop-sell:active { transform: scale(0.97); }
.prop-buy small, .prop-sell small { font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.75; }

.prop-trade-panel.in-trade { align-items: center; }
.prop-pos-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; }
.prop-pos-chip.long { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.4); color: #86efac; }
.prop-pos-chip.short { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; }
.prop-pos-chip b { font-size: 15px; letter-spacing: 0.05em; }
.prop-pos-chip small { font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.8; }

.prop-live-pnl { flex: 0 0 auto; font: 900 30px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 14px; }
.prop-live-pnl.up { color: #22c55e; text-shadow: 0 0 20px rgba(34,197,94,.4); }
.prop-live-pnl.down { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,.35); }

.prop-exit {
  flex: 1; cursor: pointer; border: none; border-radius: 12px; padding: 18px 12px;
  font: 900 16px inherit; letter-spacing: 0.05em;
  color: #0b0f14; background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.3);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.prop-exit:hover { filter: brightness(1.07); }
.prop-exit:active { transform: scale(0.97); }
.prop-exit span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prop-exit span.up { color: #065f46; }
.prop-exit span.down { color: #7f1d1d; }

.prop-locked-panel {
  border: 1px dashed rgba(148, 163, 184, 0.25); border-radius: 16px; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: rgba(226, 232, 240, 0.75);
}

/* account side panel */
.prop-acct-card {
  border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 16px;
  background: linear-gradient(165deg, rgba(13, 17, 23, 0.95), rgba(9, 12, 17, 0.98));
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.prop-acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prop-acct-head b { font-size: 15px; }
.prop-acct-head small { display: block; color: rgba(226,232,240,.45); font-size: 11px; margin-top: 2px; }
.prop-state { font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; border-radius: 999px; padding: 5px 10px; }
.prop-state.eval { color: #93c5fd; border: 1px solid rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.prop-state.funded { color: #fcd34d; border: 1px solid rgba(252, 211, 77, 0.5); background: rgba(252, 211, 77, 0.08); box-shadow: 0 0 14px rgba(252, 211, 77, 0.15); }
.prop-state.failed { color: #fca5a5; border: 1px solid rgba(252, 165, 165, 0.35); background: rgba(252, 165, 165, 0.06); }

.prop-acct-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prop-acct-nums div { border: 1px solid rgba(148,163,184,.08); border-radius: 10px; padding: 8px; text-align: center; }
.prop-acct-nums small { display: block; font: 800 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; color: rgba(226,232,240,.45); margin-bottom: 3px; }
.prop-acct-nums b { font: 800 15px ui-monospace, SFMono-Regular, Menlo, monospace; }

.prop-meter { display: flex; flex-direction: column; gap: 5px; }
.prop-meter-head { display: flex; justify-content: space-between; }
.prop-meter-head small { font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; color: rgba(226,232,240,.5); }
.prop-meter-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.prop-meter-track i { display: block; height: 100%; border-radius: 999px; transition: width 0.35s ease; }
.prop-meter-track i.good { background: linear-gradient(90deg, #16a34a, #4ade80); }
.prop-meter-track i.bad { background: linear-gradient(90deg, #b91c1c, #f87171); }

.prop-payout-btn { width: 100%; }
.prop-payout-note { color: rgba(226,232,240,.45); font-size: 11px; text-align: center; }

.prop-rules-toggle { font: 700 11.5px inherit; cursor: pointer; color: rgba(226,232,240,.5); background: none; border: none; text-align: left; padding: 2px 0; }
.prop-rules { display: none; margin: 0; padding: 0 0 0 16px; }
.prop-rules.open { display: block; }
.prop-rules li { font-size: 11.5px; color: rgba(226,232,240,.6); line-height: 1.6; margin-bottom: 4px; }
.prop-rules b { color: #e2e8f0; }
.prop-empty-copy { color: rgba(226,232,240,.65); font-size: 13.5px; line-height: 1.6; }

/* accounts tab */
.prop-buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.prop-tier-card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 16px; padding: 20px;
  background: linear-gradient(165deg, rgba(13, 17, 23, 0.95), rgba(9, 12, 17, 0.98));
  display: flex; flex-direction: column; gap: 10px;
}
.prop-tier-card.featured { border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 0 26px rgba(34, 197, 94, 0.09); }
.prop-tier-tag { position: absolute; top: -9px; left: 18px; font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; color: #06120c; background: #22c55e; border-radius: 999px; padding: 4px 10px; }
.prop-tier-card h3 { margin: 0; font-size: 22px; }
.prop-tier-blurb { margin: 0; color: rgba(226,232,240,.55); font-size: 12.5px; }
.prop-tier-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prop-tier-card li { font-size: 12.5px; color: rgba(226,232,240,.7); }
.prop-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.prop-bailout { margin-top: 14px; width: 100%; cursor: pointer; font: 700 13px inherit; color: #fbbf24; background: rgba(251,191,36,.06); border: 1px dashed rgba(251,191,36,.4); border-radius: 12px; padding: 12px; }

.prop-list-head { margin: 22px 0 10px; font-size: 15px; }
.prop-list-head small { font-weight: 500; color: rgba(226,232,240,.45); font-size: 12px; margin-left: 8px; }
.prop-list-head.dim { color: rgba(226,232,240,.45); }
.prop-acct-list { display: flex; flex-direction: column; gap: 8px; }
.prop-acct-list.dim { opacity: 0.6; }
.prop-acct-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.12); border-radius: 12px; padding: 11px 14px;
  background: rgba(255,255,255,.02);
}
.prop-acct-row.selected { border-color: rgba(34,197,94,.5); }
.prop-acct-row small { color: rgba(226,232,240,.5); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.prop-acct-row em { margin-left: auto; font-style: normal; font-size: 11px; color: #86efac; }
.prop-acct-row.dead { cursor: default; }

/* prize shop */
.prop-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prop-shop-card {
  border: 1px solid rgba(148,163,184,.12); border-radius: 14px; padding: 16px;
  background: linear-gradient(165deg, rgba(13,17,23,.95), rgba(9,12,17,.98));
  display: flex; flex-direction: column; gap: 7px; text-align: center; align-items: center;
}
.prop-shop-card.equipped { border-color: rgba(34,197,94,.5); box-shadow: 0 0 18px rgba(34,197,94,.08); }
.prop-shop-icon { font-size: 30px; line-height: 1; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; }
.prop-shop-card b { font-size: 13px; letter-spacing: 0.04em; }
.prop-shop-card small { color: rgba(226,232,240,.5); font-size: 11px; line-height: 1.5; min-height: 32px; }
.prop-shop-lock { font-size: 10.5px; color: #fbbf24; }
.prop-shop-btn { width: 100%; cursor: pointer; font: 800 12px inherit; color: #06120c; background: linear-gradient(180deg, #34d97b, #16a34a); border: none; border-radius: 9px; padding: 9px; }
.prop-shop-btn.ghost { color: #86efac; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.4); }
.prop-shop-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* avatar frames (box-shadow rings — clip-safe) */
.prop-frame { position: relative; }
.prop-frame.frame-bronze { box-shadow: 0 0 0 3px #b5722a, 0 0 14px rgba(181,114,42,.5) !important; }
.prop-frame.frame-silver { box-shadow: 0 0 0 3px #cbd5e1, 0 0 16px rgba(203,213,225,.55) !important; animation: propPulseSilver 3s ease-in-out infinite; }
.prop-frame.frame-gold { box-shadow: 0 0 0 3px #f6c34e, 0 0 20px rgba(246,195,78,.6) !important; animation: propPulseGold 2.6s ease-in-out infinite; }
.prop-frame.frame-emerald { box-shadow: 0 0 0 3px #10b981, 0 0 18px rgba(16,185,129,.55) !important; }
.prop-frame.frame-blood { box-shadow: 0 0 0 3px #dc2626, 0 0 18px rgba(220,38,38,.55) !important; }
.prop-frame.frame-aurora { animation: propAurora 4s linear infinite; }
@keyframes propPulseGold { 0%,100% { box-shadow: 0 0 0 3px #f6c34e, 0 0 14px rgba(246,195,78,.4); } 50% { box-shadow: 0 0 0 3px #f6c34e, 0 0 26px rgba(246,195,78,.75); } }
@keyframes propPulseSilver { 0%,100% { box-shadow: 0 0 0 3px #cbd5e1, 0 0 10px rgba(203,213,225,.35); } 50% { box-shadow: 0 0 0 3px #e2e8f0, 0 0 20px rgba(226,232,240,.6); } }
@keyframes propAurora {
  0% { box-shadow: 0 0 0 3px #22d3ee, 0 0 20px rgba(34,211,238,.55); }
  33% { box-shadow: 0 0 0 3px #a78bfa, 0 0 20px rgba(167,139,250,.55); }
  66% { box-shadow: 0 0 0 3px #34d97b, 0 0 20px rgba(52,217,123,.55); }
  100% { box-shadow: 0 0 0 3px #22d3ee, 0 0 20px rgba(34,211,238,.55); }
}
.prop-preview { background: rgba(255,255,255,.04); }
.prop-preview.frame-bronze { box-shadow: 0 0 0 3px #b5722a; }
.prop-preview.frame-silver { box-shadow: 0 0 0 3px #cbd5e1; }
.prop-preview.frame-gold { box-shadow: 0 0 0 3px #f6c34e, 0 0 14px rgba(246,195,78,.5); }
.prop-preview.frame-emerald { box-shadow: 0 0 0 3px #10b981; }
.prop-preview.frame-blood { box-shadow: 0 0 0 3px #dc2626; }
.prop-preview.frame-aurora { animation: propAurora 4s linear infinite; }

.prop-title-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em;
  color: #fcd34d; background: rgba(252,211,77,.07);
  border: 1px solid rgba(252,211,77,.4); border-radius: 999px; padding: 4px 10px;
}

/* overlays */
.prop-overlay { position: fixed; inset: 0; z-index: 8600; display: flex; align-items: center; justify-content: center; background: rgba(4,8,12,.8); backdrop-filter: blur(6px); }
.prop-overlay-card {
  width: min(430px, 92vw); text-align: center; border-radius: 20px; padding: 34px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(165deg, rgba(15,19,26,.98), rgba(9,12,17,.99));
}
.prop-overlay-card.failed { border: 1px solid rgba(239,68,68,.5); box-shadow: 0 0 60px rgba(239,68,68,.15); }
.prop-overlay-card.funded { border: 1px solid rgba(252,211,77,.55); box-shadow: 0 0 60px rgba(252,211,77,.18); }
.prop-overlay-icon { font-size: 46px; line-height: 1; }
.prop-overlay-card h3 { margin: 0; font-size: 24px; letter-spacing: 0.06em; }
.prop-overlay-card.failed h3 { color: #fca5a5; }
.prop-overlay-card.funded h3 { color: #fcd34d; }
.prop-overlay-card p { margin: 0; color: rgba(226,232,240,.7); font-size: 13.5px; line-height: 1.65; }

.prop-disclaimer { margin: 18px 0 0; font-size: 11px; color: rgba(226,232,240,.35); }

@media (max-width: 980px) {
  .prop-desk { grid-template-columns: 1fr; }
  .prop-trade-panel { flex-direction: column; }
  .prop-live-pnl { text-align: center; }
}

/* prop firm locked page */
.prop-locked-page { max-width: 760px; margin: 30px auto; text-align: center; padding: 20px; }
.prop-locked-page h2 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 10px; }
.prop-locked-sub { color: #dbe7e3; line-height: 1.65; margin-bottom: 22px; }
.prop-locked-page .elite-locked-grid { margin-bottom: 26px; }
.prop-locked-page small { display: block; margin-top: 12px; color: rgba(226,232,240,.45); }

/* gainers board + comeback loop */
.arena-mode-toggle { display: flex; gap: 8px; margin-top: 14px; }
.arena-mode {
  font: 800 12.5px inherit; cursor: pointer;
  color: rgba(226,232,240,.6); background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.14); border-radius: 999px; padding: 8px 16px;
}
.arena-mode.active { color: #eef4f2; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); }
.podium-xp.cash, .arena-xp.cash { color: #34d97b !important; }
.arena-bar i.cash { background: linear-gradient(90deg, #16a34a, #4ade80) !important; }
.prop-earn-note { margin: 14px 0 0; font-size: 12.5px; color: rgba(226,232,240,.6); }
.prop-earn-note b { color: #86efac; }
.prop-comeback-note { font-size: 12px !important; color: #86efac !important; }

/* pnl calendar */
.prop-cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.prop-cal-nav { display: flex; align-items: center; gap: 12px; }
.prop-cal-nav h3 { margin: 0; font-size: 20px; min-width: 170px; text-align: center; }
.prop-cal-nav button { font: 800 13px inherit; cursor: pointer; width: 34px; height: 34px; border-radius: 9px; color: #e2e8f0; background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.15); }
.prop-cal-nav button:disabled { opacity: .3; cursor: not-allowed; }
.prop-cal-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.prop-cal-summary div { border: 1px solid rgba(148,163,184,.1); border-radius: 10px; padding: 7px 12px; text-align: center; }
.prop-cal-summary small { display: block; font: 800 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: rgba(226,232,240,.45); margin-bottom: 2px; }
.prop-cal-summary b { font: 800 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.prop-cal-summary div.up b { color: #34d97b; }
.prop-cal-summary div.down b { color: #f87171; }
.prop-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.prop-cal-dow { text-align: center; font: 800 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; color: rgba(226,232,240,.4); padding: 4px 0; }
.prop-cal-cell {
  min-height: 68px; border-radius: 11px; padding: 8px 9px;
  border: 1px solid rgba(148,163,184,.08); background: rgba(255,255,255,.015);
  display: flex; flex-direction: column; justify-content: space-between;
}
.prop-cal-cell.empty { border: none; background: none; }
.prop-cal-cell small { font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(226,232,240,.45); }
.prop-cal-cell b { font: 800 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.prop-cal-cell b.dash { color: rgba(226,232,240,.18); font-weight: 600; }
.prop-cal-cell.green { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.32); }
.prop-cal-cell.green b { color: #4ade80; }
.prop-cal-cell.red { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.32); }
.prop-cal-cell.red b { color: #f87171; }
.prop-cal-cell.today { outline: 2px solid rgba(246,195,78,.55); outline-offset: 1px; }
.prop-cal-cell.future { opacity: .35; }
.prop-cal-note { margin: 16px 0 0; font-size: 12px; color: rgba(226,232,240,.5); }

/* clickable arena rows + trader card */
.arena-row.clickable, .podium-slot.clickable { cursor: pointer; transition: transform .1s ease, border-color .15s ease; }
.arena-row.clickable:hover { border-color: rgba(34,197,94,.45); transform: translateX(2px); }
.podium-slot.clickable:hover { transform: translateY(-3px); }
.arena-tap-hint { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: rgba(226,232,240,.4); }
.prop-record-grid .pf-stat strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 760px) { .prop-cal-cell { min-height: 52px; padding: 5px 6px; } .prop-cal-cell b { font-size: 10px; } }

/* ===================== Google sign-in button — official style ===================== */
body .google-auth-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font: 600 15px/1 "Roboto", Inter, system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  color: #1f1f1f !important;
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s ease, background 0.15s ease;
  text-shadow: none !important;
}
body .google-auth-button:hover {
  background: #f7f8f8 !important;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.28);
}
body .google-auth-button:active { background: #eef1f2 !important; }
body .google-auth-button .g-logo { width: 20px; height: 20px; flex: 0 0 20px; }
body .google-auth-button .g-label { color: #1f1f1f !important; }
body .google-auth-button.full { width: 100%; }

/* ===================== Mobile polish (≤640px only — desktop untouched) ===================== */
@media (max-width: 640px) {
  /* plans comparison table: fit 375px instead of clipping */
  .compare-table > div { grid-template-columns: minmax(104px, 1.3fr) repeat(3, minmax(52px, 0.6fr)); }
  .compare-table span, .compare-table strong, .compare-table b { font-size: 10.5px !important; padding: 8px 6px !important; }

  /* arcade header stats: wrap into two rows instead of clipping */
  .arcade-head-stats { flex-wrap: wrap; gap: 8px; }
  .arcade-head-stats > div { padding: 9px 12px; flex: 1 1 40%; }

  /* arena leaderboard topbar: allow wrap */
  .arena-topbar { flex-wrap: wrap; gap: 6px; }
  .arena-reset { font-size: 10.5px; flex-basis: 100%; white-space: normal; }
  .arena-row { gap: 8px; padding: 9px 10px; }
  .arena-bar { display: none; } /* free space for names + numbers on tiny screens */

  /* prop firm: header + tabs + panels breathe on phones */
  .prop-topbar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .prop-wallet { text-align: left; }
  .prop-wallet strong { font-size: 21px; }
  .prop-tabs { flex-wrap: wrap; }
  .prop-tab { padding: 8px 12px; font-size: 12px; flex: 1 1 40%; }
  .prop-inst-row { gap: 6px; }
  .prop-inst { padding: 6px 9px; }
  .prop-speed { margin-left: 0; width: 100%; justify-content: flex-end; }
  .prop-buy, .prop-sell, .prop-exit { padding: 14px 8px; font-size: 15px; }
  .prop-locked-page .primary-button, .prop-locked-panel .primary-button { max-width: 100%; white-space: normal; }
  .prop-acct-nums { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .prop-acct-nums b { font-size: 12.5px; }
  .prop-cal-summary { gap: 6px; }
  .prop-cal-summary div { padding: 5px 8px; }
  .prop-cal-summary b { font-size: 12px; }

  /* skill trail: smaller nodes = more visible per screen (still swipeable) */
  .path-node { min-width: 92px; }

  /* traders dashboard: title row + actions stack cleanly */
  .tdash-head-actions { width: 100%; }
  .tdash-head-actions .arcade-btn { flex: 1; }
  .tdash-title-row h2 { font-size: 24px; }
  .tdash-chart-stats { grid-template-columns: repeat(2, 1fr); }

  /* elite desk numbers */
  .elite-kpi b { font-size: 20px; }
  .elite-watch-row { flex-wrap: wrap; row-gap: 4px; }
  .elite-watch-spark { flex-basis: 90px; }

  /* modals fit the screen */
  .academy-modal-card, .tdash-modal-card, .prop-overlay-card { width: min(94vw, 560px) !important; }

  /* assistant bubble doesn't cover the exit/trade buttons */
  body .assistant-widget { bottom: 12px !important; right: 12px !important; }
}

/* the legacy .google-auth-button span rule styled a round badge — neutralize it for the new label */
body .google-auth-button .g-label {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ============================================================
   FEATURE TOUR — animated walkthrough after onboarding
   ============================================================ */

.feature-tour {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  padding: 18px;
}

.feature-tour.hidden { display: none; }

.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.82);
  backdrop-filter: blur(12px);
}

.tour-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(77, 255, 171, 0.55), rgba(88, 199, 255, 0.25) 35%, rgba(124, 92, 255, 0.4) 70%, rgba(246, 195, 78, 0.45));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65), 0 0 60px rgba(77, 255, 171, 0.08);
  animation: tour-pop 0.45s cubic-bezier(0.2, 1.2, 0.3, 1);
}

@keyframes tour-pop {
  from { transform: translateY(26px) scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

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

.tour-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(180deg, #0d1520, #070d13);
}

.tour-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 0;
}

.tour-brand {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green);
}

.tour-step {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.tour-skip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tour-skip:hover { color: var(--text); border-color: var(--green-2); }

.tour-visual {
  position: relative;
  height: 190px;
  margin: 14px 16px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(77, 255, 171, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 255, 171, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 120%, rgba(77, 255, 171, 0.12), transparent 60%),
    linear-gradient(180deg, #0a1119, #081018);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.tour-body {
  display: grid;
  gap: 8px;
  padding: 16px 20px 4px;
}

.tour-slide-in { animation: tour-slide 0.35s ease both; }

@keyframes tour-slide {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.tour-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-kicker {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--teal);
}

.tour-plan {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid;
}

.tour-plan.free { color: var(--green); border-color: rgba(77, 255, 171, 0.4); background: rgba(77, 255, 171, 0.08); }
.tour-plan.gold { color: var(--gold); border-color: rgba(246, 195, 78, 0.45); background: rgba(246, 195, 78, 0.1); }
.tour-plan.cyan { color: var(--cyan); border-color: rgba(88, 199, 255, 0.4); background: rgba(88, 199, 255, 0.08); }
.tour-plan.blue { color: var(--blue); border-color: rgba(70, 166, 255, 0.4); background: rgba(70, 166, 255, 0.08); }
.tour-plan.purple { color: #b39dff; border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.12); }

.tour-body h3 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.tour-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.tour-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 18px;
}

.tour-dots {
  display: flex;
  gap: 6px;
  margin: 0 auto;
}

.tour-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(141, 166, 158, 0.32);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}

.tour-dot.active {
  width: 20px;
  background: var(--green);
}

.tour-next { min-width: 96px; }

/* ---------- shared visual bits ---------- */

.tv-float-chip {
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--green);
  padding: 4px 9px;
  border-radius: 999px;
  animation: tv-float 2.2s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(77, 255, 171, 0.35);
}

.tv-path .tv-float-chip { top: -36px; right: -14px; }
.tv-chart .tv-float-chip.win { top: -16px; right: -58px; }

@keyframes tv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* academy path */
.tv-path {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 12px;
}

.tv-path-line {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-2) 62%, rgba(141, 166, 158, 0.25) 62%);
}

.tv-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--ink);
  background: var(--green);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 0 18px rgba(77, 255, 171, 0.25);
  animation: tv-node-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.tv-node.d1 { animation-delay: 0.15s; }
.tv-node.d2 { animation-delay: 0.3s; }
.tv-node.d3 { animation-delay: 0.45s; }

.tv-node.current {
  background: var(--gold);
  animation: tv-node-pop 0.4s 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both, tv-pulse 1.6s 1s infinite;
}

.tv-node.locked {
  background: #1a2735;
  color: var(--muted);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
  animation-delay: 0.7s;
}

@keyframes tv-node-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes tv-pulse {
  0%, 100% { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(246, 195, 78, 0.5); }
  50% { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 0 0 12px rgba(246, 195, 78, 0); }
}

/* arcade chart */
.tv-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 120px;
  padding-bottom: 40px;
}

.tv-candle {
  position: relative;
  width: 13px;
  border-radius: 3px;
  animation: tv-grow 0.45s ease both;
  transform-origin: bottom;
}

.tv-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 2px;
  transform: translateX(-50%);
  background: inherit;
  opacity: 0.7;
}

.tv-candle.up { background: var(--green); }
.tv-candle.dn { background: var(--red); }
.tv-candle.c1 { height: 26px; animation-delay: 0.1s; }
.tv-candle.c2 { height: 20px; margin-bottom: 8px; animation-delay: 0.22s; }
.tv-candle.c3 { height: 30px; margin-bottom: 6px; animation-delay: 0.34s; }
.tv-candle.c4 { height: 24px; margin-bottom: 22px; animation-delay: 0.46s; }
.tv-candle.c5 { height: 16px; margin-bottom: 30px; animation-delay: 0.58s; }
.tv-candle.c6 { height: 28px; margin-bottom: 32px; animation-delay: 0.7s; }
.tv-candle.c7 { height: 34px; margin-bottom: 44px; animation-delay: 0.82s; }

@keyframes tv-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.tv-chart-btns {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.tv-btn {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-radius: 8px;
  white-space: nowrap;
}

.tv-btn.long {
  color: var(--ink);
  background: var(--green);
  animation: tv-btn-pulse 1.5s 1s infinite;
}

.tv-btn.short { color: var(--red); border: 1px solid rgba(255, 95, 87, 0.5); }

@keyframes tv-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 255, 171, 0.55); }
  60% { box-shadow: 0 0 0 11px rgba(77, 255, 171, 0); }
}

/* prop firm */
.tv-prop {
  position: relative;
  width: min(280px, 84%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, #0c141d, #0a1017);
}

.tv-prop-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.tv-prop-bal { font-size: 1rem; color: var(--green); letter-spacing: 0; }

.tv-equity {
  width: 100%;
  height: 64px;
  margin-top: 6px;
}

.tv-equity polyline {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: tv-draw 1.6s 0.3s ease-out forwards;
}

@keyframes tv-draw {
  to { stroke-dashoffset: 0; }
}

.tv-stamp {
  position: absolute;
  top: 46px;
  right: 14px;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--gold);
  border: 2.5px solid var(--gold);
  border-radius: 8px;
  padding: 5px 11px;
  transform: rotate(-9deg);
  background: rgba(8, 12, 16, 0.82);
  animation: tv-stamp 0.4s 1.7s cubic-bezier(0.2, 2, 0.4, 1) both;
  box-shadow: 0 0 24px rgba(246, 195, 78, 0.3);
}

@keyframes tv-stamp {
  from { transform: rotate(-9deg) scale(2.4); opacity: 0; }
  to { transform: rotate(-9deg) scale(1); opacity: 1; }
}

/* leaderboard */
.tv-board {
  display: grid;
  gap: 8px;
  width: min(310px, 88%);
}

.tv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  animation: tv-row-in 0.4s ease both;
}

.tv-row.r1 { animation-delay: 0.15s; border-color: rgba(246, 195, 78, 0.45); background: rgba(246, 195, 78, 0.06); }
.tv-row.r2 { animation-delay: 0.3s; }
.tv-row.r3 { animation-delay: 0.45s; border-color: rgba(77, 255, 171, 0.4); }

@keyframes tv-row-in {
  from { transform: translateX(-18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.tv-rank { font-size: 0.72rem; font-weight: 900; width: 14px; }
.tv-rank.gold { color: var(--gold); }
.tv-rank.silver { color: #c9d6e2; }
.tv-rank.bronze { color: #d99a5b; }

.tv-ava {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
}

.tv-ava.a1 { background: var(--gold); }
.tv-ava.a2 { background: var(--cyan); }
.tv-ava.a3 { background: var(--green); }

.tv-name { font-size: 0.76rem; font-weight: 700; }
.tv-score { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: var(--muted); }

.tv-crown {
  position: absolute;
  top: -12px;
  left: 26px;
  font-size: 0.9rem;
  transform: rotate(-14deg);
  animation: tv-crown 2s ease-in-out infinite;
}

@keyframes tv-crown {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-14deg) translateY(-3px); }
}

/* streaks */
.tv-streak {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.tv-flame { font-size: 2.6rem; position: relative; animation: tv-float 2s ease-in-out infinite; }

.tv-flame-rings {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.tv-flame-rings i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 50%;
  border: 2px solid rgba(246, 195, 78, 0.5);
  animation: tv-ring 2s ease-out infinite;
}

.tv-flame-rings i:nth-child(2) { animation-delay: 1s; }

@keyframes tv-ring {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(2); opacity: 0; }
}

.tv-streak-count {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.tv-quest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  background: rgba(255, 255, 255, 0.03);
  animation: tv-row-in 0.4s 0.5s ease both;
}

.tv-quest b { color: var(--green); }

.tv-check {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

/* dashboard tiles */
.tv-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(320px, 88%);
}

.tv-tile {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  animation: tv-row-in 0.35s ease both;
}

.tv-tile.t1 { animation-delay: 0.1s; }
.tv-tile.t2 { animation-delay: 0.2s; }
.tv-tile.t3 { animation-delay: 0.3s; }
.tv-tile.t4 { animation-delay: 0.4s; }

.tv-tile svg { width: 100%; height: 22px; }

.tv-tile svg polyline {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: tv-draw 1.2s 0.5s ease-out forwards;
}

.tv-tile-sym { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.tv-tile-pct { font-size: 0.68rem; font-weight: 800; }
.tv-tile-pct.up { color: var(--green); }
.tv-tile-pct.dn { color: var(--red); }

/* toolkit radar */
.tv-radar {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.tv-radar svg { width: 104px; height: 96px; }

.tv-radar-shape {
  transform-origin: center;
  animation: tv-radar-in 0.8s 0.2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes tv-radar-in {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.tv-radar-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}

.tv-radar-tags span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--blue);
  border: 1px solid rgba(70, 166, 255, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(70, 166, 255, 0.08);
  animation: tv-row-in 0.35s ease both;
}

.tv-radar-tags span:nth-child(1) { animation-delay: 0.4s; }
.tv-radar-tags span:nth-child(2) { animation-delay: 0.55s; }
.tv-radar-tags span:nth-child(3) { animation-delay: 0.7s; }

/* elite kpis */
.tv-elite {
  position: relative;
  display: flex;
  gap: 10px;
}

.tv-kpi {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 86px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0.03));
  animation: tv-node-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.tv-kpi.k1 { animation-delay: 0.12s; }
.tv-kpi.k2 { animation-delay: 0.26s; }
.tv-kpi.k3 { animation-delay: 0.4s; }

.tv-kpi span { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.tv-kpi strong { font-size: 1.15rem; }
.tv-kpi strong.tv-grade { color: var(--gold); font-size: 1.5rem; text-shadow: 0 0 8px rgba(246, 195, 78, 0.25); }
.tv-kpi b { font-size: 0.6rem; font-weight: 800; }
.tv-kpi b.up { color: var(--green); }

.tv-elite-crown {
  position: absolute;
  top: -20px;
  left: -8px;
  font-size: 1.15rem;
  transform: rotate(-18deg);
  animation: tv-crown 2.2s ease-in-out infinite;
}

/* mobile + motion safety */
@media (max-width: 640px) {
  .feature-tour { padding: 10px; }
  .tour-card { width: min(560px, 96vw); }
  .tour-visual { height: 165px; margin: 12px 12px 0; }
  .tour-body { padding: 14px 16px 2px; }
  .tour-body h3 { font-size: 1.12rem; }
  .tour-controls { padding: 12px 14px 14px; flex-wrap: wrap; row-gap: 11px; }
  .tour-dots { order: -1; width: 100%; justify-content: center; margin: 0; }
  .tour-back, .tour-next { flex: 1; min-width: 0; }
  .tour-next { font-size: 0.92rem; padding-left: 8px; padding-right: 8px; }
  .tour-brand { font-size: 0.56rem; }
  .tv-path { gap: 12px; }
  .tv-node { width: 34px; height: 34px; }
  .tv-elite { gap: 7px; }
  .tv-kpi { min-width: 72px; padding: 10px 8px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-tour *, .feature-tour { animation: none !important; }
  .tv-equity polyline, .tv-tile svg polyline { stroke-dashoffset: 0; }
}

/* ============================================================
   FREE-PLAN GATING — plan-locked tiers + arcade daily plays
   ============================================================ */

.academy-tier.plan-locked {
  border-color: rgba(246, 195, 78, 0.28);
}

.academy-tier.plan-locked .trail-node {
  cursor: pointer;
}

.academy-tier-plannote {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin: 4px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(246, 195, 78, 0.4);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(246, 195, 78, 0.1), rgba(246, 195, 78, 0.03));
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.academy-tier-plannote:hover {
  border-color: rgba(246, 195, 78, 0.7);
  background: linear-gradient(90deg, rgba(246, 195, 78, 0.16), rgba(246, 195, 78, 0.05));
}

.academy-tier-plannote svg,
.academy-tier-plannote i {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex: none;
}

.academy-tier-plannote b {
  color: var(--gold);
}

.academy-continue.upsell {
  border-color: rgba(246, 195, 78, 0.5);
  background: linear-gradient(90deg, rgba(246, 195, 78, 0.14), rgba(246, 195, 78, 0.04));
  color: var(--text);
}

.academy-continue.upsell b {
  color: var(--gold);
}

.academy-continue.upsell svg,
.academy-continue.upsell i {
  color: var(--gold);
}

.path-node.plan-locked .path-node-ring {
  border-color: rgba(246, 195, 78, 0.4);
}

.path-node.plan-locked .path-node-ring svg,
.path-node.plan-locked .path-node-ring i {
  color: var(--gold);
}

/* arcade free-plays strip */
.arcade-freeplays {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 2px 0 12px;
  padding: 9px 14px;
  border: 1px solid rgba(246, 195, 78, 0.4);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 195, 78, 0.1), rgba(246, 195, 78, 0.02));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s;
}

.arcade-freeplays:hover {
  border-color: rgba(246, 195, 78, 0.75);
}

.arcade-freeplays svg,
.arcade-freeplays i {
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex: none;
}

.arcade-freeplays b {
  color: var(--gold);
}

.arcade-freeplays em {
  font-style: normal;
  color: var(--gold);
}

@media (max-width: 640px) {
  .arcade-freeplays {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .academy-tier-plannote {
    font-size: 0.74rem;
  }
}

/* ============================================================
   EMAIL + PASSWORD AUTH MODAL
   ============================================================ */

.auth-card {
  width: min(440px, 100%);
  gap: 12px;
  max-height: 92vh;
  overflow-y: auto;
}

.auth-card h2 { margin: 0; }
.auth-card .muted { margin: 0 0 2px; font-size: 0.88rem; }

/* segmented register / login toggle */
.auth-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.auth-toggle-btn {
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.auth-toggle-btn.active {
  background: linear-gradient(180deg, var(--purple), #6a4bff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35);
}

.auth-field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.auth-field input,
.auth-field select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
}

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22);
}

/* password field + reveal eye */
.auth-password {
  position: relative;
  display: block;
}

.auth-password input {
  padding-right: 46px;
}

.auth-reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.auth-reveal:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.auth-reveal[aria-pressed="true"] { color: var(--green); }
.auth-reveal svg, .auth-reveal i { width: 18px; height: 18px; }

/* live strength checklist */
.auth-checklist {
  list-style: none;
  margin: 2px 0 0;
  padding: 11px 13px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
}

.auth-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.15s;
}

.auth-checklist li i,
.auth-checklist li svg { display: none; } /* use a CSS tick instead of lucide */

.auth-checklist li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(141, 166, 158, 0.5);
  background: transparent;
  transition: all 0.15s;
}

.auth-checklist li.ok {
  color: var(--green);
}

.auth-checklist li.ok::before {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: var(--green);
  background: var(--green);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 900;
}

.auth-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.auth-card .auth-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.auth-card .auth-remember input {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  accent-color: var(--purple);
  cursor: pointer;
}

.auth-error {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 95, 87, 0.4);
  border-radius: 9px;
  background: rgba(255, 95, 87, 0.1);
  color: #ff8b84;
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-submit { margin-top: 2px; }
.auth-submit:disabled { opacity: 0.7; cursor: progress; }

.auth-card .divider-text { margin: 2px 0; }

@media (max-width: 640px) {
  .auth-card { width: min(440px, 94vw); padding: 20px; }
  .auth-row-2 { grid-template-columns: 1fr; }
}