:root {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #090b16);
  --text: var(--tg-theme-text-color, #f8fbff);
  --hint: var(--tg-theme-hint-color, #a5afc6);
  --button: var(--tg-theme-button-color, #7c6cff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary: var(--tg-theme-secondary-bg-color, #14182a);
  --card: color-mix(in srgb, var(--secondary), #ffffff 3%);
  --border: color-mix(in srgb, var(--hint), transparent 78%);
  --glow: color-mix(in srgb, var(--button), transparent 35%);
  --positive: #62f3ad;
  --neutral: #8aa7ff;
  --intense: #ff7695;
  --gold: #ffd166;
  --safe-top: var(--tg-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% -10%, rgba(124,108,255,.46), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(98,243,173,.22), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg), #18203c 42%), var(--bg) 34rem);
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: calc(18px + var(--safe-top)) 14px calc(26px + var(--safe-bottom));
}

.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card), #fff 2%), color-mix(in srgb, var(--card), #000 6%));
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.glass { backdrop-filter: blur(18px); }


.demo-banner {
  display: none;
  margin-bottom: 14px;
  padding: 13px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 204, 102, .45);
  background: linear-gradient(135deg, rgba(255, 204, 102, .22), rgba(255,255,255,.06));
  color: #ffe7a6;
  font-weight: 800;
  box-shadow: 0 18px 48px rgba(255, 204, 102, .10);
}
body.demo-mode .demo-banner { display: block; }
body.demo-mode .hero { outline: 1px solid rgba(255, 204, 102, .35); }
body.demo-mode .health-pill.demo { color: #ffe7a6; border-color: rgba(255, 204, 102, .45); background: rgba(255, 204, 102, .12); }

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 220px;
  padding: 24px;
  border-radius: 32px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(130deg, rgba(124,108,255,.22), transparent 42%),
    radial-gradient(circle at 86% 28%, rgba(255,209,102,.2), transparent 14rem);
  pointer-events: none;
}
.hero-copy, .hero-score { position: relative; z-index: 1; }
.eyebrow {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.11);
  color: var(--button-text);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1 {
  margin: 18px 0 10px;
  max-width: 760px;
  font-size: clamp(30px, 7vw, 60px);
  line-height: .98;
  letter-spacing: -0.05em;
}
h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
p { margin: 0; color: var(--hint); line-height: 1.65; }
.hero-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.user-pill, .health-pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--hint);
  font-size: 13px;
}
.health-pill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--positive); box-shadow: 0 0 18px var(--positive); }
.health-pill.demo::before { background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.hero-score {
  width: 138px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 38px;
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.13);
}
.hero-score span { font-size: 38px; font-weight: 900; letter-spacing: -.05em; }
.hero-score small { color: var(--hint); }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.action-card {
  min-height: 118px;
  display: grid;
  gap: 5px;
  justify-items: start;
  align-content: center;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.action-card.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--button), transparent 44%), rgba(255,255,255,.06)); }
.action-card:active, .dock-button:active, .ghost:active { transform: scale(.98); }
.action-card:hover { border-color: color-mix(in srgb, var(--button), transparent 35%); }
.action-card span { font-size: 28px; }
.action-card strong { font-size: 17px; }
.action-card small { color: var(--hint); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.stat-card {
  min-height: 126px;
  padding: 18px;
  border-radius: 24px;
  display: grid;
  gap: 7px;
}
.stat-card span, .stat-card small { color: var(--hint); font-size: 13px; }
.stat-card strong { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.06em; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  margin-top: 16px;
}
.panel {
  padding: 18px;
  border-radius: 28px;
  min-height: 280px;
}
.panel.xl { min-height: 340px; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-head.compact { margin-bottom: 12px; }
.panel-head p { margin-top: 5px; font-size: 13px; }
.ghost {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.11);
}

.chart-wrap { position: relative; }
.line-chart {
  width: 100%;
  min-height: 150px;
  overflow: visible;
}
.gridline { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.line-shadow { fill: none; stroke: rgba(124,108,255,.22); stroke-width: 12; stroke-linecap: round; filter: blur(8px); }
.line-path { fill: none; stroke: url(#lineGlow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.line-dot { fill: var(--text); stroke: var(--button); stroke-width: 3; }
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 172px;
  margin-top: -6px;
}
.bar-day {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 7px;
  min-width: 0;
  text-align: center;
  color: var(--hint);
}
.bar-value { font-size: 11px; opacity: .9; }
.bar-track {
  height: 112px;
  display: flex;
  align-items: end;
  border-radius: 999px;
  padding: 4px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.bar-track i {
  width: 100%;
  min-height: 5%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--positive), var(--button));
  box-shadow: 0 0 18px rgba(124,108,255,.4);
}
.bar-day:not(.active) .bar-track i { background: rgba(255,255,255,.14); box-shadow: none; }
.bar-day strong { color: var(--text); font-size: 12px; }
.bar-day small { font-size: 11px; }

.mood-layout { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.donut {
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 40px rgba(0,0,0,.24);
}
.donut::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: inherit;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
}
.donut span { position: relative; z-index: 1; font-weight: 900; font-size: 26px; letter-spacing: -.04em; }
.legend { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; color: var(--hint); }
.legend-row strong { color: var(--text); font-size: 14px; }
.legend-row em { font-style: normal; }
.dot { width: 11px; height: 11px; border-radius: 99px; }
.dot.positive { background: var(--positive); } .dot.neutral { background: var(--neutral); } .dot.intense { background: var(--intense); }
.microcopy { margin-top: 14px; font-size: 12px; }

.radar-card { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; }
.radar { width: 100%; max-width: 220px; }
.radar-ring { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1; }
.radar-axis { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.radar-fill { fill: rgba(124,108,255,.33); stroke: var(--button); stroke-width: 2; filter: drop-shadow(0 0 16px rgba(124,108,255,.42)); }
.radar-label { fill: var(--hint); font-size: 10px; }
.skill-list { display: grid; gap: 9px; }
.skill-row { display: grid; grid-template-columns: 82px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; }
.skill-row div, .mode-row div { height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.skill-row i, .mode-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--button), var(--positive)); }
.skill-row strong { text-align: end; }

.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.heat-cell {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.heat-cell span { font-weight: 900; font-size: 18px; letter-spacing: -.04em; }
.heat-cell small { color: var(--hint); font-size: 11px; }
.level-1 { background: rgba(124,108,255,.14); }
.level-2 { background: rgba(124,108,255,.22); }
.level-3 { background: rgba(98,243,173,.2); }
.level-4 { background: linear-gradient(180deg, rgba(98,243,173,.28), rgba(124,108,255,.24)); border-color: rgba(98,243,173,.28); }

.mode-split { display: grid; gap: 14px; margin-top: 8px; }
.mode-row { display: grid; grid-template-columns: 88px 1fr 36px; align-items: center; gap: 10px; }
.mode-row i.quick { background: linear-gradient(90deg, #ffd166, #ff9f1c); }
.mode-row i.standard { background: linear-gradient(90deg, var(--button), var(--neutral)); }
.mode-row i.long { background: linear-gradient(90deg, var(--positive), #40c9ff); }

.recent-list { display: grid; gap: 10px; }
.game-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
}
.game-row strong { display: block; margin-bottom: 4px; }
.game-row small { color: var(--hint); }
.result {
  min-width: 70px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255,255,255,.08);
}
.result.win { color: #001f12; background: var(--positive); }
.result.loss { color: #2c0010; background: var(--intense); }
.result.draw { color: #1f1600; background: var(--gold); }
.empty { padding: 20px; border-radius: 18px; background: rgba(255,255,255,.05); color: var(--hint); }

.tool-dock {
  position: sticky;
  bottom: calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 24px;
}
.dock-button {
  min-height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
.toast {
  position: fixed;
  inset-inline: 16px;
  bottom: calc(18px + var(--safe-bottom));
  max-width: 720px;
  margin-inline: auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--button), #000 18%);
  color: var(--button-text);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-score { width: 118px; border-radius: 30px; }
  .quick-actions, .stats-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .radar-card, .mood-layout { grid-template-columns: 1fr; justify-items: center; }
  .skill-list { width: 100%; }
}
@media (max-width: 520px) {
  .shell { padding-inline: 10px; }
  .hero, .panel { border-radius: 24px; padding: 16px; }
  h1 { font-size: 34px; }
  .action-card { min-height: 96px; }
  .bar-chart { gap: 5px; }
  .bar-track { height: 96px; }
  .heatmap { grid-template-columns: repeat(4, 1fr); }
  .tool-dock { grid-template-columns: repeat(2, 1fr); }
}

/* Mini App v2 improvements */
.user-pill, .health-pill, .badge, .hearts-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--hint);
  font-size: 13px;
}
.hearts-pill {
  color: #ff7695;
  border-color: rgba(255,118,149,.35);
  background: rgba(255,118,149,.10);
}
.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.range-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
}
.range-toggle button {
  min-width: 48px;
  padding: 7px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--hint);
  font-size: 12px;
  font-weight: 800;
}
.range-toggle button.active {
  color: var(--button-text);
  background: color-mix(in srgb, var(--button), transparent 28%);
}
.ghost.active {
  color: var(--button-text);
  background: color-mix(in srgb, var(--button), transparent 34%);
  border-color: color-mix(in srgb, var(--button), transparent 30%);
}
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, color-mix(in srgb, var(--card), #fff 8%) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 12px;
  min-height: 24px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.stat-skeleton { min-height: 126px; border-radius: 24px; }
.bar-skeleton { min-height: 160px; border-radius: 18px; }
.row-skeleton { min-height: 74px; border-radius: 18px; }

.radar-card { grid-template-columns: 260px 1fr; }
.radar { max-width: 260px; }
.skill-row { grid-template-columns: 92px 1fr 34px; }

.game-row.translating {
  position: relative;
  opacity: .72;
}
.game-row.translating::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--button);
  animation: spin .8s linear infinite;
  justify-self: end;
}
@keyframes spin { to { transform: rotate(360deg); } }

.live-badge { color: var(--hint); }
.live-badge.on {
  color: #ff7695;
  border-color: rgba(255,118,149,.35);
  background: rgba(255,118,149,.10);
}
.live-list { display: grid; gap: 10px; }
.live-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
}
.live-row strong { display: block; margin-bottom: 4px; }
.live-row small { color: var(--hint); }
.watch-button { white-space: nowrap; }

.play-confirm {
  position: fixed;
  inset-inline: 14px;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 80;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px;
  border-radius: 26px;
  transform: translateY(calc(100% + 34px));
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.play-confirm.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.play-confirm h2 { margin-bottom: 8px; }
.play-confirm strong { display: block; font-size: 20px; margin-bottom: 3px; }
.cost-warning { color: #ffb0c1; margin-top: 10px; }
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.confirm-actions .primary {
  background: color-mix(in srgb, var(--button), transparent 16%);
  color: var(--button-text);
}

.heatmap.wide {
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.heat-cell em {
  color: var(--gold);
  font-style: normal;
  font-size: 10px;
  min-height: 12px;
}

@media (max-width: 860px) {
  .panel-actions { justify-content: flex-start; }
  .radar-card { grid-template-columns: 1fr; }
  .radar { max-width: min(260px, 100%); }
  .live-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .heatmap.wide { grid-template-columns: repeat(7, 1fr); }
  .heatmap.wide .heat-cell { min-height: 76px; padding: 6px; border-radius: 14px; }
  .heatmap.wide .heat-cell span { font-size: 13px; }
  .heatmap.wide .heat-cell small { display: none; }
  .range-toggle button { min-width: 42px; padding-inline: 8px; }
}

/* Gamification & retention UI */
.daily-topic-card { margin-bottom: 18px; }
.personality-pill {
  border: 1px solid color-mix(in srgb, var(--tg-theme-link-color, #6aa9ff), transparent 55%);
  background: color-mix(in srgb, var(--tg-theme-link-color, #6aa9ff), transparent 88%);
  color: var(--tg-theme-text-color, #fff);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 700;
}
.badge-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge-tag {
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--tg-theme-secondary-bg-color, #182036), #fff 6%);
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #9ca3af), transparent 70%);
  font-size: 12px;
}
.badge-tag.rare { box-shadow: 0 0 0 1px rgba(255, 215, 128, .32), 0 0 18px rgba(255, 215, 128, .18); }
.vote-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tg-theme-secondary-bg-color, #182036), #000 12%);
  margin: 8px 0 5px;
}
.vote-bar i { display: block; height: 100%; background: var(--tg-theme-button-color, #5d8cff); border-radius: inherit; }
.hall-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hall-tabs button {
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #9ca3af), transparent 70%);
  background: transparent;
  color: var(--tg-theme-text-color, #fff);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
}
.hall-tabs button.active { background: var(--tg-theme-button-color, #5d8cff); color: var(--tg-theme-button-text-color, #fff); }
.hall-list { display: grid; gap: 10px; }
.hall-row {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #9ca3af), transparent 78%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tg-theme-secondary-bg-color, #182036), transparent 10%);
}
.hall-row strong { display: block; margin-bottom: 5px; }
.hall-row small { color: var(--tg-theme-hint-color, #9ca3af); }


/* UI polish pack */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--button), var(--positive));
  z-index: 100;
  transition: width .3s ease, opacity .3s ease;
  border-radius: 0 999px 999px 0;
}
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 240px;
  padding: 28px 28px 24px;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--secondary), #7c6cff 12%),
    color-mix(in srgb, var(--secondary), #000 8%)
  );
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(52px);
  animation: heroFloat 8s ease-in-out infinite alternate;
}
.hero::before {
  width: 280px;
  height: 280px;
  top: -80px;
  left: -60px;
  inset: auto;
  background: radial-gradient(circle, rgba(124,108,255,.38), transparent 70%);
}
.hero::after {
  width: 200px;
  height: 200px;
  bottom: -60px;
  right: 60px;
  background: radial-gradient(circle, rgba(98,243,173,.28), transparent 70%);
  animation-delay: -4s;
}
@keyframes heroFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(16px, -12px) scale(1.08); }
}
.hero-score {
  width: 148px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  position: relative;
  z-index: 1;
  background: conic-gradient(
    var(--button) 0deg,
    var(--positive) calc(var(--win-deg, 180deg)),
    rgba(255,255,255,.08) calc(var(--win-deg, 180deg))
  );
  padding: 6px;
  border: 0;
}
.hero-score-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--secondary);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
}
.hero-score span { font-size: 36px; font-weight: 900; letter-spacing: -.05em; }
.hero-score small { color: var(--hint); font-size: 12px; }
.trend { font-size: 11px; font-weight: 800; }
.trend.up { color: var(--positive); }
.trend.down { color: var(--intense); }
.trend.flat { color: var(--hint); }
.action-card {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              border-color .18s ease,
              box-shadow .18s ease;
  will-change: transform;
}
.action-card:hover {
  border-color: color-mix(in srgb, var(--button), transparent 25%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--button), transparent 40%),
              0 18px 40px rgba(124,108,255,.22);
  transform: translateY(-2px);
}
.action-card:active { transform: scale(.97); box-shadow: none; }
.action-card.primary {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--button), transparent 38%),
    color-mix(in srgb, var(--button), transparent 62%)
  );
  border-color: color-mix(in srgb, var(--button), transparent 40%);
}
.chart-tooltip {
  position: fixed;
  z-index: 60;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--secondary), #fff 8%);
  border: 1px solid var(--border);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}
.chart-tooltip.show { opacity: 1; transform: translateY(0); }
.line-dot { cursor: pointer; }
.line-dot:focus { outline: none; stroke-width: 5; }
.daily-fresh-dot, .live-dot {
  display: inline-block;
  border-radius: 999px;
  vertical-align: middle;
}
.daily-fresh-dot {
  width: 8px;
  height: 8px;
  background: var(--positive);
  box-shadow: 0 0 0 0 rgba(98,243,173,.5);
  animation: dailyPulse 2s ease-out infinite;
  margin-inline-end: 6px;
}
@keyframes dailyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(98,243,173,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(98,243,173,0); }
  100% { box-shadow: 0 0 0 0 rgba(98,243,173,0); }
}
.live-dot {
  width: 9px;
  height: 9px;
  background: var(--intense);
  box-shadow: 0 0 0 0 rgba(255,118,149,.5);
  animation: livePulse 1.4s ease-out infinite;
  margin-inline-end: 5px;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,118,149,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,118,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,118,149,0); }
}
.score-pill {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  margin-inline-start: 6px;
}
.dock-button { position: relative; }
.dock-button.active {
  background: color-mix(in srgb, var(--button), transparent 36%);
  border-color: color-mix(in srgb, var(--button), transparent 30%);
  color: var(--button-text);
}
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--intense);
  border: 2px solid var(--bg);
}
.empty-state {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
  color: var(--hint);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
}
.empty-state::before {
  content: attr(data-icon);
  font-size: 40px;
  opacity: .5;
  filter: grayscale(1);
}
.opponent-preview {
  position: fixed;
  inset-inline: 14px;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 85;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px;
  border-radius: 26px;
  transform: translateY(calc(100% + 34px));
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.opponent-preview.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.opponent-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.opponent-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.opponent-preview-grid div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.opponent-preview-grid span { display: block; color: var(--hint); font-size: 12px; margin-bottom: 4px; }
.opponent-preview-grid strong { font-size: 16px; }
.opponent-button { margin-top: 8px; width: fit-content; }
[dir="rtl"] .hero-score { order: -1; }
[dir="rtl"] .bar-chart { direction: ltr; }
[dir="rtl"] .tool-dock { direction: rtl; }
[dir="rtl"] .hall-tabs { direction: rtl; }
@media (max-width: 520px) {
  .hero-score { width: 128px; }
  .opponent-preview-grid { grid-template-columns: 1fr; }
}

.tool-dock { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 520px) { .tool-dock { grid-template-columns: repeat(2, 1fr); } }

.hall-filter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  color: var(--hint);
  font-size: 12px;
}
.hall-filter select {
  color: var(--text);
  background: color-mix(in srgb, var(--secondary), #fff 6%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
}
.badge-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--button), transparent 45%);
  color: var(--button);
  background: color-mix(in srgb, var(--button), transparent 88%);
  font-size: 11px;
  font-weight: 800;
}