/* =====================================================
   HYROX ARENA — Style global
   Mobile-first, ambiance arène premium néon
   ===================================================== */

:root {
  --bg: #0A0E1A;
  --surface: #141925;
  --surface-2: #1c2233;
  --border: #232a3d;
  --text: #F5F5F7;
  --text-muted: #8B92A8;
  --accent: #00FF88;
  --accent-dim: #00cc6e;
  --claude: #7B5EA7;
  --claude-dim: #5d4583;
  --danger: #FF3B5C;
  --warn: #FFB534;
  --cardio: #FF8A3D;
  --strength: #3DA1FF;
  --mobility: #B58CFF;
  --hyrox: #00FF88;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 4px 18px rgba(0,0,0,.4);
  --shadow-glow: 0 0 24px rgba(0, 255, 136, 0.18);
  --t: 300ms cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100%;
  overscroll-behavior: none;
}
body {
  padding-bottom: 92px;
  background-image: radial-gradient(circle at 20% -10%, rgba(0,255,136,0.05), transparent 40%),
                    radial-gradient(circle at 100% 100%, rgba(123,94,167,0.06), transparent 40%);
}
body.mode-immersive { padding-bottom: 0; background: #050811; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg, object { display: block; max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }

/* ========== Topbar ========== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.logo span { color: var(--accent); }
.topbar-right { display: flex; gap: 8px; }
.streak-pill, .level-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.level-pill { color: var(--accent); }

/* ========== Bottom nav ========== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--text-muted);
  transition: color var(--t);
}
.nav-item i { width: 22px; height: 22px; }
.nav-item.active { color: var(--accent); }
.nav-item.active i { filter: drop-shadow(0 0 8px var(--accent)); }

/* ========== Layout commun ========== */
.app-main { max-width: 720px; margin: 0 auto; }
.screen-pad { padding: 18px 18px 24px; }
.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 4px;
}
.page-header { display: flex; justify-content: space-between; align-items: center; }
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 24px 0 12px;
}
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.error { color: var(--danger); }
.center-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 18px; }
.display {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0;
}
.display span { color: var(--accent); }

/* ========== Cards ========== */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
  display: block;
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow), var(--shadow-glow); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.card-title { margin: 0; font-size: 18px; font-weight: 700; }
.card-title.small { font-size: 15px; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.empty-card, .success-card { text-align: center; padding: 28px 16px; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; min-height: 48px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: all var(--t);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #061a10;
  box-shadow: 0 0 20px rgba(0,255,136,0.25);
}
.btn-primary:hover { box-shadow: 0 0 28px rgba(0,255,136,0.4); }
.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.btn-claude {
  background: linear-gradient(180deg, var(--claude) 0%, var(--claude-dim) 100%);
  color: #fff;
  box-shadow: 0 0 20px rgba(123,94,167,0.3);
}
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); }
.btn-danger-ghost { background: transparent; border-color: rgba(255,59,92,0.3); color: var(--danger); }
.btn-sm { padding: 8px 12px; min-height: 36px; font-size: 13px; }
.btn-big { font-size: 18px; min-height: 64px; padding: 18px 28px; flex: 1; }
.btn-square { width: 56px; min-height: 56px; padding: 0; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ========== Hero greeting ========== */
.hero-greeting { display: flex; gap: 14px; align-items: center; margin: 8px 0 16px; }
.avatar-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-hello {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 700; margin: 0;
}
.hero-level { color: var(--accent); margin: 0; font-size: 13px; }

/* ========== XP bar ========== */
.xp-card { padding: 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 16px; }
.xp-bar {
  height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden;
  position: relative;
}
.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4dffaa);
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(0,255,136,0.6);
  position: relative;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.xp-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2.4s infinite;
}
@keyframes shimmer { 0% {transform: translateX(-100%);} 100% {transform: translateX(100%);} }
.xp-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* ========== KPI grid ========== */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; margin: 4px 0; color: var(--accent); }
.kpi-sub { font-size: 11px; color: var(--text-muted); }

/* ========== CTA row ========== */
.cta-row { display: grid; gap: 8px; margin-top: 12px; }
.next-session .badge-tag {
  display: inline-block;
  background: rgba(0,255,136,0.15);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== Mini session card ========== */
.mini-session {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
}
.xp-pill {
  background: rgba(0,255,136,0.15);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
}

/* ========== Tile grid ========== */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  transition: all var(--t);
}
.tile:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.tile i { color: var(--accent); }

/* ========== Auth ========== */
.auth-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 24px;
  box-shadow: var(--shadow), var(--shadow-glow);
}
.auth-card .display { font-size: 36px; margin-bottom: 4px; }
.form-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.form-stack input, .form-stack textarea, .form-stack select,
.form-row input, .form-row select, .builder-form input, .builder-form select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  width: 100%;
}
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.form-stack label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-alt { text-align: center; margin-top: 18px; font-size: 14px; }
.auth-alt a { color: var(--accent); }

/* ========== Builder / library ========== */
.builder-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.builder-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.toggle { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); }
.toggle span { color: var(--text); font-size: 14px; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.chip { padding: 6px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 13px; white-space: nowrap; }
.chip.active { background: var(--accent); color: #061a10; border-color: var(--accent); }
.search-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 8px 0; color: var(--text); }

.exo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.exo-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 8px; cursor: pointer; transition: all var(--t);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; text-align: center; line-height: 1.2;
}
.exo-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.exo-tile.cat-hyrox i { color: var(--hyrox); }
.exo-tile.cat-cardio i { color: var(--cardio); }
.exo-tile.cat-strength i { color: var(--strength); }
.exo-tile.cat-mobility i { color: var(--mobility); }
.cat-hyrox { color: var(--hyrox); }
.cat-cardio { color: var(--cardio); }
.cat-strength { color: var(--strength); }
.cat-mobility { color: var(--mobility); }
.section-title.cat-hyrox { color: var(--hyrox); }
.section-title.cat-cardio { color: var(--cardio); }
.section-title.cat-strength { color: var(--strength); }
.section-title.cat-mobility { color: var(--mobility); }

.exo-list { display: flex; flex-direction: column; gap: 6px; }
.exo-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border);
}
.exo-row-left { display: flex; gap: 12px; align-items: center; }
.exo-row-actions { display: flex; gap: 4px; }
.icon-btn { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); }

.blocks-list { display: flex; flex-direction: column; gap: 8px; }
.block-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.block-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.block-pos {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #061a10;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.block-name { font-weight: 600; flex: 1; }
.block-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.block-card-grid label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 2px; }
.block-card-grid input { padding: 8px 10px; }

.builder-actions { display: flex; gap: 8px; margin-top: 16px; }
.builder-actions .btn { flex: 1; }

/* ========== Live session (immersive) ========== */
.immersive-screen {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, rgba(0,255,136,0.08), transparent 60%), #050811;
  display: flex; flex-direction: column;
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
}
.live-header { display: flex; justify-content: space-between; align-items: center; }
.exit-link { color: var(--text-muted); padding: 8px; }
.live-title { text-align: center; }
.live-spacer { width: 32px; }
.timer-zone { text-align: center; padding: 36px 0 18px; }
.timer-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(72px, 22vw, 120px);
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(0,255,136,0.4);
  line-height: 1;
}
.timer-target { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); margin-top: 8px; }
.block-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.block-detail h4 { margin: 0 0 8px; }
.block-detail .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.block-detail .row:last-child { border-bottom: 0; }
.live-controls { display: flex; gap: 8px; align-items: center; }
.block-actions { display: flex; gap: 8px; margin-top: 12px; }
.block-actions .btn { flex: 1; }

.metric-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.metric-input-grid label { font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.metric-input-grid input, .metric-input-grid select { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.rpe-row { margin: 12px 0; }
.rpe-row input[type="range"] { width: 100%; }
.rpe-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent); }

.finalize-zone { background: var(--surface); padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 18px; }
.finalize-zone textarea { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); min-height: 80px; }
.upload-zone { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.upload-zone input { display: none; }
#photo-preview img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.recap-zone { background: var(--surface); padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 18px; }
.hidden { display: none !important; }

/* XP popup animation */
.xp-pop {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px; font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(0,255,136,0.7);
  z-index: 100;
  pointer-events: none;
  animation: xpFloat 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes xpFloat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -120px) scale(1); }
}

/* Badge unlock */
.badge-pop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 200;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.badge-pop-card {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 60px rgba(0,255,136,0.5);
  text-align: center;
  max-width: 320px;
}
.badge-pop-icon { width: 80px; height: 80px; color: var(--accent); margin: 0 auto 12px; }

/* ========== Heatmap ========== */
.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  overflow-x: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.heat-cell {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--surface-2);
}
.heat-cell.lvl1 { background: rgba(0,255,136,0.25); }
.heat-cell.lvl2 { background: rgba(0,255,136,0.5); }
.heat-cell.lvl3 { background: rgba(0,255,136,0.75); }
.heat-cell.lvl4 { background: var(--accent); box-shadow: 0 0 6px rgba(0,255,136,0.6); }

/* ========== Charts ========== */
.chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }

/* ========== PR list ========== */
.pr-list { display: flex; flex-direction: column; gap: 6px; }
.pr-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
}
.pr-info { flex: 1; }
.pr-name { font-weight: 600; margin: 0; }
.pr-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent); font-size: 18px; }

/* ========== Badges grid ========== */
.badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.badge-card {
  background: var(--surface); padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border); text-align: center;
  transition: all var(--t);
}
.badge-card.unlocked { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.badge-card.locked { opacity: 0.4; filter: grayscale(0.7); }
.badge-icon { font-size: 32px; color: var(--accent); margin-bottom: 8px; display: flex; justify-content: center; }
.badge-icon i { width: 32px; height: 32px; }
.badge-name { font-weight: 700; margin: 4px 0; font-size: 14px; }
.badge-desc { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; min-height: 32px; }
.badge-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent); margin: 6px 0 0; }

/* ========== Coach chat ========== */
.coach-screen { padding: 18px; padding-bottom: 100px; }
.chat-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; max-height: 60vh; overflow-y: auto; }
.chat-msg { display: flex; }
.chat-msg.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
}
.chat-msg.user .chat-bubble { background: var(--accent); color: #061a10; border-color: var(--accent); }
.chat-msg.assistant .chat-bubble { background: linear-gradient(180deg, var(--claude), var(--claude-dim)); border-color: var(--claude); color: #fff; }
.chat-form { position: fixed; bottom: 80px; left: 0; right: 0; padding: 8px 18px; display: flex; gap: 8px; background: rgba(10,14,26,0.9); backdrop-filter: blur(10px); border-top: 1px solid var(--border); }
.chat-form input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; color: var(--text); }

/* ========== Modal ========== */
.modal {
  background: transparent; border: 0; padding: 0;
  max-width: 480px; width: 100%;
}
.modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}
.modal-content h3 { margin: 0 0 12px; }
.modal-body { font-size: 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.proposal-list { padding-left: 18px; margin: 12px 0; }
.proposal-list li { margin: 4px 0; }
.claude-msg {
  margin: 12px 0; padding: 12px;
  background: rgba(123,94,167,0.15);
  border-left: 3px solid var(--claude);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 14px;
}
.focus-list { padding-left: 18px; }

/* ========== Status dot ========== */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.status-dot.ok { background: var(--accent); }
.status-dot.warn { background: var(--warn); }
.status-dot.danger { background: var(--danger); }
.status-dot.muted { background: var(--text-muted); }

/* ========== Toast ========== */
#toast-host {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 999; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--surface); border: 1px solid var(--accent);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow), var(--shadow-glow);
  animation: slideDown 200ms ease, slideOut 200ms ease 2.5s forwards;
}
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOut { to { transform: translateY(-20px); opacity: 0; } }

/* ========== Settings ========== */
.settings-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.settings-actions .btn { justify-content: flex-start; }

/* ========== Desktop ========== */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav {
    position: sticky;
    bottom: auto; top: 60px;
    max-width: 720px; margin: 0 auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
  }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .badges-grid { grid-template-columns: repeat(4, 1fr); }
  .exo-grid { grid-template-columns: repeat(5, 1fr); }
}