:root {
  --bg: #101820;
  --panel-bg: #1b2733;
  --text: #f0f5f7;
  --text-dim: #8fa3ad;
  --red: #ff6b6b;
  --gold: #fbbf24;
  --accent: #34d399;
  --accent-dark: #06281c;
}

/* Theme variants: 4 colors x 3 shades, selected in /profile. Each color
   family also tints the page background gradient and panel surfaces
   (--bg-grad-a/b, --panel-tint) so a theme changes the whole page's mood,
   not just button colors. */
[data-theme^="green-"]  { --bg-grad-a: #0a2018; --bg-grad-b: #0d2a1e; --panel-bg: #142a20; --panel-tint: rgba(52, 211, 153, 0.16); }
[data-theme^="blue-"]   { --bg-grad-a: #0a1c28; --bg-grad-b: #0d2636; --panel-bg: #142433; --panel-tint: rgba(56, 189, 248, 0.16); }
[data-theme^="orange-"] { --bg-grad-a: #24160a; --bg-grad-b: #2e1c0d; --panel-bg: #2e2013; --panel-tint: rgba(251, 146, 60, 0.16); }
[data-theme^="purple-"] { --bg-grad-a: #1b0e26; --bg-grad-b: #241132; --panel-bg: #24152f; --panel-tint: rgba(192, 132, 252, 0.16); }

[data-theme="green-1"] { --accent: #6ee7b7; --accent-dark: #06281c; }
[data-theme="green-2"] { --accent: #34d399; --accent-dark: #06281c; }
[data-theme="green-3"] { --accent: #059669; --accent-dark: #ffffff; }
[data-theme="blue-1"]  { --accent: #7dd3fc; --accent-dark: #06232e; }
[data-theme="blue-2"]  { --accent: #38bdf8; --accent-dark: #06232e; }
[data-theme="blue-3"]  { --accent: #0284c7; --accent-dark: #ffffff; }
[data-theme="orange-1"] { --accent: #fdba74; --accent-dark: #2e1a06; }
[data-theme="orange-2"] { --accent: #fb923c; --accent-dark: #2e1a06; }
[data-theme="orange-3"] { --accent: #ea580c; --accent-dark: #ffffff; }
[data-theme="purple-1"] { --accent: #d8b4fe; --accent-dark: #24102e; }
[data-theme="purple-2"] { --accent: #c084fc; --accent-dark: #24102e; }
[data-theme="purple-3"] { --accent: #9333ea; --accent-dark: #ffffff; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(160deg, var(--bg-grad-a, var(--bg)) 0%, var(--bg-grad-b, var(--bg)) 45%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 90px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--panel-tint, transparent), transparent 70%), var(--panel-bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.topbar-user { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: bold; }
.topbar-user .emoji { font-size: 1.4rem; }
.topbar-widgets { display: flex; gap: 10px; }
.mini-widget {
  display: flex; align-items: center; gap: 4px;
  background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px; padding: 5px 10px; font-size: 0.85rem;
}
.mini-widget .over { color: var(--red); font-weight: bold; }

.idea-box-btn {
  position: fixed; bottom: 18px; right: 18px;
  background: var(--red); color: #fff; border-radius: 50%;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 10;
}

.main-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.main-nav a {
  color: var(--text-dim); text-decoration: none; background: var(--panel-bg);
  border: 1px solid #2c3a45; border-radius: 8px; padding: 6px 14px; font-size: 0.9rem;
}
.main-nav a.active { color: var(--text); border-color: var(--accent); }

.panel {
  background: linear-gradient(160deg, var(--panel-tint, transparent), transparent 65%), var(--panel-bg);
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.panel h2 { margin-top: 0; }

input, select, textarea {
  width: 100%;
  background: #101820;
  border: 2px solid #2c3a45;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 8px;
}
label { font-size: 0.85rem; color: var(--text-dim); display: block; margin-top: 8px; }
.checkbox-row { display: flex; align-items: center; gap: 6px; }
.checkbox-row input { width: auto; margin: 0; }

button, .secondary-btn, .link-btn-solid {
  background: var(--accent);
  color: var(--accent-dark);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.secondary-btn { background: #263544; color: var(--text); }
.danger-btn { background: var(--red); color: #fff; }
.link-btn { color: var(--accent); text-decoration: none; }

.empty-note { color: var(--text-dim); font-size: 0.85rem; }
.error-msg { color: var(--red); }
.badge-ok { color: var(--accent); margin-left: 8px; font-size: 0.85rem; }
.badge-off { color: var(--text-dim); margin-left: 8px; font-size: 0.85rem; }
.badge-ai { color: var(--gold); font-size: 0.75rem; margin-left: 6px; }

.connection-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.yt-setup { margin-top: 12px; background: #101820; border-radius: 10px; padding: 10px 14px; }
.yt-setup form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.yt-setup ol { padding-left: 20px; color: var(--text-dim); font-size: 0.9rem; }
.yt-setup textarea { width: 100%; background: #0b1216; color: var(--text); border: 1px solid #2c3a45; border-radius: 8px; padding: 8px; }

.bpm-tag { color: var(--gold); font-size: 0.85rem; white-space: nowrap; }

.cadence-star-rating { white-space: nowrap; flex-shrink: 0; }
.cadence-star-rating .star { cursor: pointer; font-size: 1.1rem; color: var(--gold); padding: 0 1px; user-select: none; }

.library-list { list-style: none; padding: 0; }
.library-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #263544; }
.library-item .track-info { min-width: 0; }
.library-item .track-title { display: block; font-weight: bold; }
.library-item .track-artist { display: block; color: var(--text-dim); font-size: 0.85rem; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-tile { background: #101820; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 1.3rem; font-weight: bold; }
.stat-label { font-size: 0.75rem; color: var(--text-dim); }

canvas { width: 100%; display: block; }
.chart-wrap { position: relative; }
.chart-tooltip {
  display: none; position: absolute; background: #06090c; border: 1px solid #2c3a45;
  color: var(--text); font-size: 0.75rem; padding: 4px 8px; border-radius: 6px;
  pointer-events: none; white-space: nowrap;
}
.map-fullscreen-btn {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.92); color: #101820; font-size: 1.15rem;
  cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.map-fullscreen-btn:hover { background: #fff; }
.map-fullscreen-active { height: 100vh !important; width: 100vw !important; background: #101820; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.8rem; color: var(--text-dim); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.period-filter, .sport-filter, .year-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.period-filter a, .sport-filter a, .year-filter a {
  color: var(--text-dim); text-decoration: none; background: #101820;
  border: 1px solid #2c3a45; border-radius: 8px; padding: 5px 12px; font-size: 0.85rem; text-transform: capitalize;
}
.period-filter a.active, .sport-filter a.active, .year-filter a.active { color: var(--text); border-color: var(--accent); }

.activity-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.activity-table th, .activity-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #263544; }
.activity-table th { color: var(--text-dim); font-weight: normal; font-size: 0.75rem; }
.activity-table tbody tr:hover { background: #101820; }
.sortable-table th[data-sort]::after { content: " ⇕"; opacity: 0.4; font-size: 0.7em; }
.sortable-table th.sort-asc::after { content: " ▲"; opacity: 1; }
.sortable-table th.sort-desc::after { content: " ▼"; opacity: 1; }

#activity-map, #outing-map { height: 320px; border-radius: 12px; overflow: hidden; background: #101820; }

.widget-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.widget-tile { background: #101820; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.widget-icon { font-size: 1.1rem; }
.widget-value { font-size: 1.15rem; font-weight: bold; }
.widget-label { font-size: 0.7rem; color: var(--text-dim); }
.widget-delta { font-size: 0.75rem; margin-top: 2px; }
.widget-delta-good { color: var(--accent); }
.widget-delta-muted { color: var(--text-dim); }
.widget-delta-neutral { color: #38bdf8; }

.insight-list { list-style: none; padding: 0; margin: 0; }
.insight-list li { padding: 8px 0; border-bottom: 1px solid #263544; font-size: 0.9rem; line-height: 1.4; }
.insight-list li:last-child { border-bottom: none; }

.theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 500px) { .theme-swatches { grid-template-columns: repeat(6, 1fr); } }
.theme-swatch-label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.theme-swatch-label input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.theme-swatch {
  width: 100%; aspect-ratio: 1; max-width: 56px;
  border-radius: 12px;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease;
}
.theme-swatch-label:hover .theme-swatch { transform: scale(1.08); }
.theme-swatch-label input[type="radio"]:checked + .theme-swatch {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px #ffffff;
}
.theme-swatch-name { font-size: 0.7rem; color: var(--text-dim); }

.candidate-row { border-bottom: 1px solid #263544; padding: 10px 0; }
.candidate-row:last-child { border-bottom: none; }

.fav-group-label { color: var(--text-dim); font-size: 0.8rem; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.fav-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-chip { position: relative; }
.fav-chip summary {
  list-style: none; cursor: pointer; user-select: none;
  background: #263544; color: var(--text); border-radius: 20px;
  padding: 8px 16px; font-size: 0.9rem; white-space: nowrap;
}
.fav-chip summary::-webkit-details-marker { display: none; }
.fav-chip summary::marker { content: ""; }
.fav-chip[open] summary { background: var(--accent); color: var(--accent-dark, #06281c); }
.fav-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: #101820; border: 1px solid #263544; border-radius: 10px;
  padding: 12px; min-width: 190px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.fav-popover form { display: flex; flex-direction: column; gap: 8px; }

.app-loading-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(6, 18, 12, 0.88);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.app-loading-figure { font-size: 4.5rem; animation: app-loading-bounce 0.9s ease-in-out infinite; }
@keyframes app-loading-bounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-22px) rotate(6deg); }
}
.app-loading-text { color: var(--text); font-size: 1.05rem; text-align: center; max-width: 280px; }

.avatar-slot { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar-slot.emoji { font-size: 1.4rem; line-height: 1; }
.avatar-slot svg { width: 100%; height: 100%; }
.avatar-preview-big { width: 140px; height: 140px; border-radius: 50%; background: #101820; font-size: 4rem; }

.avatar-option-row, .avatar-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.avatar-option {
  width: 52px; height: 52px; border-radius: 50%; background: #101820;
  border: 3px solid transparent; padding: 0; cursor: pointer; overflow: hidden;
}
.avatar-option svg { width: 100%; height: 100%; }
.avatar-option.selected { border-color: var(--accent); }
.avatar-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; padding: 0;
}
.avatar-swatch.selected { border-color: #ffffff; box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px #ffffff; }

.pushup-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #06120c;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.pushup-view { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; }
.pushup-set-label { font-size: 1.4rem; font-weight: 600; color: var(--accent); margin-bottom: 8px; text-align: center; }
.pushup-target-label { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 24px; }
.pushup-count { font-size: 9rem; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pushup-hint { font-size: 1rem; color: var(--text-dim); margin-top: 24px; text-align: center; max-width: 280px; }
.pushup-exit-btn, .pushup-skip-btn {
  position: absolute; bottom: 28px; background: #263544; color: var(--text);
  border: none; border-radius: 20px; padding: 10px 20px; font-size: 0.9rem;
}
.pushup-skip-btn { bottom: 80px; background: var(--accent); color: var(--accent-dark, #06281c); }
.pushup-flash { animation: pushup-flash-anim 0.15s ease-out; }
@keyframes pushup-flash-anim { 0% { background: #ffffff22; } 100% { background: transparent; } }

.mfa-secret-box { font-family: monospace; font-size: 1.1rem; background: #101820; padding: 10px 14px; border-radius: 10px; letter-spacing: 2px; word-break: break-all; }
.backup-codes { font-family: monospace; background: #101820; padding: 12px; border-radius: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.auth-page #app { max-width: 380px; padding-top: 60px; }
.auth-page .panel { text-align: center; }

/* landing.html reuses auth-page's random-photo background (see the body
   script below) but needs the wide layout, not the narrow login-form
   width - overrides .auth-page's cap at equal specificity, so it must stay
   *after* it here (and again after the media query's own re-assertion of
   the 380px cap, below) to win the cascade. */
.landing-page #app { max-width: 1100px; padding-top: 24px; }
.landing-page .panel { text-align: left; }

/* Desktop: use the full width, lay chart panels out side by side. */
@media (min-width: 900px) {
  #app { max-width: 1200px; }
  .auth-page #app { max-width: 380px; }
  .landing-page #app { max-width: 1100px; }
  .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .chart-grid .panel { margin-top: 0; }
  .topbar { flex-wrap: nowrap; }
}

/* --- landing page (logged-out home) ------------------------------------- */

@keyframes landing-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes landing-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.landing-hero { text-align: center; padding: 12px 8px 8px; }
.landing-logo { width: 96px; height: 96px; border-radius: 22px; animation: landing-pulse 4s ease-in-out infinite; }
.landing-title { font-size: 2.2rem; margin: 14px 0 4px; }
.landing-tagline { color: var(--text-dim); font-size: 1.05rem; max-width: 560px; margin: 0 auto 20px; }
.landing-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.landing-cta a { padding: 12px 26px; font-size: 1.05rem; }

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.landing-card {
  background: linear-gradient(160deg, var(--panel-tint, transparent), transparent 65%), var(--panel-bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 20px;
  opacity: 0;
  animation: landing-fade-up 0.6s ease-out forwards;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.landing-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.landing-card-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.landing-card h3 { margin: 0 0 6px; }
.landing-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0; line-height: 1.5; }

.landing-footer { text-align: center; margin: 32px 0 8px; }

@media (max-width: 480px) {
  .landing-title { font-size: 1.7rem; }
}