/* ============================================================
   HUNTER SYSTEM × SOLO LEVELING THEME
   Loaded AFTER styles.css + workout.css — overrides all visuals.
   v1 — 2026-05-07
   ============================================================ */

@import url('/lib/fonts.css');

/* ============ CORE TOKENS ============ */
:root,
body.dark-mode,
body:not(.dark-mode) {
  --sl-bg-deep: #020611;
  --sl-bg: #050d1f;
  --sl-bg-card: rgba(8, 18, 38, 0.78);
  --sl-bg-card-hover: rgba(12, 26, 50, 0.92);
  --sl-cyan: #00f6ff;
  --sl-cyan-dim: rgba(0, 246, 255, 0.4);
  --sl-cyan-glow: rgba(0, 246, 255, 0.6);
  --sl-purple: #7b2dff;
  --sl-purple-dim: rgba(123, 45, 255, 0.4);
  --sl-purple-glow: rgba(123, 45, 255, 0.55);
  --sl-gold: #ffd700;
  --sl-gold-glow: rgba(255, 215, 0, 0.6);
  --sl-danger: #ff3366;
  --sl-success: #00ffa3;
  --sl-text: #e8efff;
  --sl-text-dim: #7a8fb8;
  --sl-text-muted: #4a5f87;
  --sl-line: rgba(0, 246, 255, 0.12);
  --primary: var(--sl-cyan) !important;
  --bg: var(--sl-bg) !important;
  --card-bg: var(--sl-bg-card) !important;
  --text: var(--sl-text) !important;
  --text-secondary: var(--sl-text-dim) !important;
  --success: var(--sl-success) !important;
  --danger: var(--sl-danger) !important;
}

/* ============ BACKGROUND — dungeon vibe ============ */
html, body {
  background: var(--sl-bg-deep) !important;
  color: var(--sl-text) !important;
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Dungeon void gradient + radial nebulae */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(123, 45, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 100%, rgba(0, 246, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #020611 0%, #050d1f 60%, #02060f 100%);
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 2px,
    rgba(0, 246, 255, 0.025) 2px,
    rgba(0, 246, 255, 0.025) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.container {
  position: relative;
  z-index: 1;
}

/* Hex-grid faint background pattern — only on home screen */
#homeView::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 246, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 246, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent 80%);
}

/* ============ HEADER — system online ============ */
header {
  position: relative;
  padding: 18px 0 22px !important;
  margin-bottom: 8px;
}
header::before {
  content: '[ SYSTEM · ONLINE ]';
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--sl-cyan);
  opacity: 0.7;
  text-shadow: 0 0 8px var(--sl-cyan-glow);
}
header h1 img {
  filter: drop-shadow(0 0 12px var(--sl-cyan-glow)) brightness(1.2);
  transition: filter 0.3s;
}
header h1 img:hover { filter: drop-shadow(0 0 18px var(--sl-cyan-glow)) brightness(1.4); }

/* ============ HEADER TIMER ============ */
.header-timer {
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.06), rgba(123, 45, 255, 0.04)) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-family: 'Orbitron', monospace !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 8px var(--sl-cyan-glow);
  transition: all 0.2s;
}
.header-timer:hover {
  border-color: var(--sl-cyan);
  box-shadow: 0 0 20px var(--sl-cyan-glow);
}

.theme-toggle .toggle-track {
  background: rgba(0, 246, 255, 0.1) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
}
.theme-toggle .toggle-thumb {
  background: var(--sl-cyan) !important;
  box-shadow: 0 0 12px var(--sl-cyan-glow);
}
.icon-btn {
  background: rgba(8, 18, 38, 0.6) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  border-radius: 4px !important;
  color: var(--sl-cyan) !important;
}
.icon-btn:hover {
  border-color: var(--sl-cyan);
  box-shadow: 0 0 14px var(--sl-cyan-glow);
}

/* ============ BOTTOM NAV — hex hunter dock ============ */
.bottom-nav {
  background: linear-gradient(180deg, rgba(2, 6, 17, 0) 0%, rgba(2, 6, 17, 0.95) 50%) !important;
  border-top: 1px solid var(--sl-cyan-dim) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -4px 30px rgba(0, 246, 255, 0.08);
}
.nav-item {
  color: var(--sl-text-muted) !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  position: relative;
  transition: color 0.25s;
}
.nav-item.active {
  color: var(--sl-cyan) !important;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: var(--sl-cyan);
  box-shadow: 0 0 10px var(--sl-cyan-glow);
}
.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 6px var(--sl-cyan-glow));
}

/* ============ CARDS — system frame ============ */
.card,
.body-weight-card,
.workout-banner,
.summary-card,
.workout-notes-card,
.modal-sheet,
#weeklySchedule > *,
#recentWorkouts > * {
  background: var(--sl-bg-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 1px rgba(0, 246, 255, 0.04) inset,
    0 8px 30px rgba(0, 0, 0, 0.45) !important;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px
  );
}

/* Hex bracket corners on key cards */
.body-weight-card::before,
.workout-banner::before,
.summary-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--sl-cyan);
  border-left: 2px solid var(--sl-cyan);
  pointer-events: none;
}
.body-weight-card::after,
.workout-banner::after,
.summary-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--sl-purple);
  border-right: 2px solid var(--sl-purple);
  pointer-events: none;
}

/* ============ TODAY HEADER — keep as transparent passthrough ============ */
/* Inner .today-header div already has its own styling from workout.css.
   We just give it Solo Leveling treatment via the generic .today-header rule below. */
#todayHeader {
  margin-bottom: 14px;
}
.today-header {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.08), rgba(123, 45, 255, 0.05)) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  border-left: 3px solid var(--sl-cyan) !important;
  border-radius: 0 !important;
  padding: 36px 16px 18px !important;
  clip-path: none !important;
  overflow: visible !important;
}
.today-header::after {
  content: '▾ DUNGEON';
  position: absolute;
  top: 14px; right: 16px; left: auto;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--sl-cyan);
  opacity: 0.85;
  text-shadow: 0 0 6px var(--sl-cyan-glow);
  pointer-events: none;
  padding: 3px 10px;
  white-space: nowrap;
  background: rgba(0, 246, 255, 0.1);
  border: 1px solid rgba(0, 246, 255, 0.4);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.today-header.recovery::after {
  content: '◆ REST · DAY';
  color: var(--sl-purple);
  text-shadow: 0 0 6px var(--sl-purple-glow);
}
.today-header-icon {
  font-size: 32px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.2), rgba(123, 45, 255, 0.12));
  border: 1px solid rgba(0, 246, 255, 0.5);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 12px rgba(0, 246, 255, 0.35), inset 0 0 8px rgba(0, 246, 255, 0.12);
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(0, 246, 255, 0.5));
}
.today-header-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  text-shadow: 0 0 12px var(--sl-cyan-glow);
  margin-bottom: 6px !important;
}
.today-header-sub {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--sl-text-dim) !important;
  text-transform: uppercase;
}

/* ============ SECTION LABEL — quest log header ============ */
.section-label {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--sl-cyan) !important;
  opacity: 0.85;
  margin: 22px 0 10px !important;
  padding-left: 14px;
  position: relative;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  background: var(--sl-cyan);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 10px var(--sl-cyan-glow);
}

/* ============ BUTTONS — angular system buttons ============ */
.btn,
button.btn,
.warmup-start-btn,
.finish-btn,
.wizard-nav-btn,
.timer-preset {
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.05), rgba(123, 45, 255, 0.03)) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  color: var(--sl-cyan) !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.2s !important;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn:hover, button.btn:hover, .timer-preset:hover {
  border-color: var(--sl-cyan) !important;
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.15), rgba(123, 45, 255, 0.08)) !important;
  color: #fff !important;
  text-shadow: 0 0 8px var(--sl-cyan-glow);
  box-shadow: 0 0 20px var(--sl-cyan-glow);
  transform: translateY(-1px);
}
.btn-primary, .finish-btn {
  background: linear-gradient(135deg, var(--sl-cyan), #0099cc) !important;
  color: #02060f !important;
  border-color: var(--sl-cyan) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 0 28px var(--sl-cyan-glow), inset 0 0 20px rgba(255, 255, 255, 0.15) !important;
}
.btn-primary:hover, .finish-btn:hover {
  background: linear-gradient(135deg, #4dffff, var(--sl-cyan)) !important;
  box-shadow: 0 0 38px var(--sl-cyan-glow) !important;
}
.btn-secondary {
  background: linear-gradient(135deg, rgba(123, 45, 255, 0.15), rgba(0, 246, 255, 0.05)) !important;
  border-color: var(--sl-purple-dim) !important;
  color: #c4a5ff !important;
}
.btn-secondary:hover {
  border-color: var(--sl-purple) !important;
  box-shadow: 0 0 24px var(--sl-purple-glow) !important;
  color: #fff !important;
}
.btn-outline, .btn-ghost {
  background: rgba(8, 18, 38, 0.4) !important;
  border-color: var(--sl-text-muted) !important;
  color: var(--sl-text-dim) !important;
}
.btn-outline:hover, .btn-ghost:hover {
  border-color: var(--sl-cyan) !important;
  color: var(--sl-cyan) !important;
}

/* ============ WARMUP START BUTTON — quest entry point ============ */
.warmup-start-btn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 246, 255, 0.05)) !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  color: var(--sl-gold) !important;
  padding: 18px !important;
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.warmup-start-btn::before {
  content: '▣ NEW QUEST AVAILABLE ▣';
  display: block;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--sl-gold);
  opacity: 0.75;
  margin-bottom: 6px;
}
.warmup-start-btn:hover {
  border-color: var(--sl-gold) !important;
  box-shadow: 0 0 35px var(--sl-gold-glow) !important;
  text-shadow: 0 0 8px var(--sl-gold-glow);
}
.warmup-start-text {
  font-size: 17px !important;
  letter-spacing: 0.15em;
}
.warmup-start-sub {
  font-size: 11px !important;
  opacity: 0.7;
}

/* ============ INPUTS ============ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: rgba(2, 6, 17, 0.8) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  color: var(--sl-text) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--sl-cyan) !important;
  box-shadow: 0 0 18px var(--sl-cyan-glow), inset 0 0 12px rgba(0, 246, 255, 0.06) !important;
  background: rgba(8, 18, 38, 0.95) !important;
}

/* Body weight card big number — wide enough for 3 digits at 36px */
.body-weight-input-wrap {
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.body-weight-input-wrap input {
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 14px var(--sl-cyan-glow);
  width: 130px !important;          /* fits 3 digits + spinner */
  padding: 4px 6px !important;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.body-weight-label {
  font-family: 'Orbitron', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.25em;
  color: var(--sl-cyan);
  text-transform: uppercase;
  opacity: 0.8;
}
.body-weight-unit {
  color: #00f6ff !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 246, 255, 0.6);
  margin-left: 8px;
  opacity: 0.95;
}

/* ============ WORKOUT BANNER — active dungeon HUD ============ */
.workout-banner {
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.1), rgba(123, 45, 255, 0.06)) !important;
  border: 1px solid var(--sl-cyan) !important;
  padding: 38px 18px 16px !important;
  position: relative;
  text-align: center !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  overflow: visible !important;
}
.workout-banner::before {
  content: '◆ DUNGEON' !important;
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 246, 255, 0.1) !important;
  border: 1px solid rgba(0, 246, 255, 0.4) !important;
  padding: 4px 14px !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 8px var(--sl-cyan-glow) !important;
  white-space: nowrap !important;
  text-align: center !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%) !important;
  box-shadow: 0 0 12px rgba(0, 246, 255, 0.2) !important;
  z-index: 5 !important;
}
/* Disable the inherited corner bracket on workout-banner — we use ::before for the pill */
.workout-banner::after {
  content: '' !important;
  border-bottom: 2px solid var(--sl-purple) !important;
  border-right: 2px solid var(--sl-purple) !important;
  width: 16px !important;
  height: 16px !important;
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  background: none !important;
  padding: 0 !important;
}
.workout-banner-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.workout-banner-name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  text-shadow: 0 0 16px var(--sl-cyan-glow), 0 0 30px rgba(0, 246, 255, 0.4);
  line-height: 1 !important;
  text-transform: uppercase;
}
.workout-banner-timer {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 12px var(--sl-cyan-glow);
  padding: 3px 14px;
  background: rgba(0, 246, 255, 0.06);
  border: 1px solid rgba(0, 246, 255, 0.35);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
}
.workout-banner-meta {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  color: var(--sl-text-dim) !important;
  text-transform: uppercase;
  display: flex !important;
  justify-content: center !important;
  gap: 18px !important;
}
.workout-banner-meta span { position: relative; }
.workout-banner-meta span + span::before {
  content: '·';
  position: absolute;
  left: -12px;
  color: var(--sl-cyan);
  opacity: 0.6;
}

/* ============ EXERCISE CARDS / BATTLE LOG ============ */
.exercise-card,
#workoutExercises > div {
  background: var(--sl-bg-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-left: 2px solid var(--sl-purple-dim) !important;
  border-radius: 0 !important;
  margin-bottom: 10px;
}
.exercise-card .exercise-name,
#workoutExercises h3 {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--sl-text) !important;
  text-shadow: 0 0 6px rgba(0, 246, 255, 0.15);
}

/* Set rows */
.set-row {
  font-family: 'Orbitron', monospace !important;
  border: 1px solid var(--sl-line) !important;
  background: rgba(2, 6, 17, 0.5) !important;
}
.set-row.completed {
  border-color: var(--sl-success) !important;
  background: rgba(0, 255, 163, 0.05) !important;
  box-shadow: 0 0 12px rgba(0, 255, 163, 0.2);
}

/* ============ WIZARD (warmup) — quest progression ============ */
.wizard-top-bar {
  border-bottom: 1px solid var(--sl-cyan-dim) !important;
  background: rgba(2, 6, 17, 0.85) !important;
}
.wizard-cancel-btn {
  background: rgba(255, 51, 102, 0.1) !important;
  border: 1px solid rgba(255, 51, 102, 0.4) !important;
  border-radius: 0 !important;
  color: var(--sl-danger) !important;
}
.wizard-timer {
  font-family: 'Orbitron', monospace !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 8px var(--sl-cyan-glow);
  font-weight: 700;
}
.wizard-step-counter {
  font-family: 'Orbitron', monospace !important;
  color: var(--sl-text-dim) !important;
  letter-spacing: 0.15em;
}
.wizard-progress {
  background: rgba(0, 246, 255, 0.06) !important;
  border: 1px solid var(--sl-cyan-dim);
  height: 4px !important;
}
.wizard-progress-bar {
  background: linear-gradient(90deg, var(--sl-cyan), var(--sl-purple)) !important;
  box-shadow: 0 0 12px var(--sl-cyan-glow);
}
.wizard-card {
  background: var(--sl-bg-card) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  border-radius: 0 !important;
  position: relative;
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0, 100% 16px,
    100% calc(100% - 16px), calc(100% - 16px) 100%,
    16px 100%, 0 calc(100% - 16px), 0 16px
  );
}

/* ============ SUMMARY CARD — quest cleared ============ */
.summary-card {
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.08), rgba(123, 45, 255, 0.05)) !important;
  border: 1px solid var(--sl-cyan) !important;
  padding: 28px 22px !important;
  text-align: center;
}
.summary-icon { animation: pulse-cyan 2s ease-in-out infinite; }
.summary-icon svg {
  width: 64px !important; height: 64px !important;
  stroke: var(--sl-cyan) !important;
  filter: drop-shadow(0 0 18px var(--sl-cyan-glow));
}
.summary-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.15em !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 14px var(--sl-cyan-glow);
  text-transform: uppercase !important;
}
.summary-title::before {
  content: '⚔ ';
}
.summary-stat-value {
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 12px var(--sl-cyan-glow);
}
.summary-stat-label {
  font-family: 'Orbitron', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: var(--sl-text-dim) !important;
  text-transform: uppercase;
}

/* ============ MODALS — system dialog ============ */
.modal-overlay {
  background: rgba(2, 6, 17, 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-sheet {
  background: var(--sl-bg-card) !important;
  border: 1px solid var(--sl-cyan-dim) !important;
  border-top: 2px solid var(--sl-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 246, 255, 0.18) !important;
}
.modal-handle {
  background: var(--sl-cyan) !important;
  box-shadow: 0 0 8px var(--sl-cyan-glow);
}
.modal-title {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 10px var(--sl-cyan-glow);
}
.modal-title::before { content: '◆ '; }

/* ============ REST TIMER OVERLAY ============ */
.rest-timer-overlay {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(0, 246, 255, 0.04)) !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  border-radius: 0 !important;
  position: relative;
}
.rest-timer-overlay::before {
  content: '⏱ COOLDOWN ⏱';
  position: absolute;
  top: -8px; left: 12px;
  background: var(--sl-bg-deep);
  padding: 0 8px;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--sl-gold);
  text-shadow: 0 0 6px var(--sl-gold-glow);
}
.rest-timer-time {
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  color: var(--sl-gold) !important;
  text-shadow: 0 0 14px var(--sl-gold-glow);
  font-size: 36px !important;
}
.rest-timer-label {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em;
  color: var(--sl-gold) !important;
  text-transform: uppercase;
}
.rest-timer-btn {
  background: rgba(255, 215, 0, 0.06) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  color: var(--sl-gold) !important;
  font-family: 'Orbitron', monospace !important;
  border-radius: 0 !important;
}
.rest-timer-btn:hover {
  border-color: var(--sl-gold) !important;
  background: rgba(255, 215, 0, 0.15) !important;
  box-shadow: 0 0 14px var(--sl-gold-glow);
}

/* ============ EMPTY STATES ============ */
.empty-state {
  background: rgba(8, 18, 38, 0.4) !important;
  border: 1px dashed var(--sl-line) !important;
  color: var(--sl-text-dim) !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.empty-state::before { content: '▤ '; opacity: 0.5; }

/* ============ TOAST — system notification ============ */
.toast {
  background: linear-gradient(135deg, rgba(0, 246, 255, 0.95), rgba(123, 45, 255, 0.85)) !important;
  border: 1px solid var(--sl-cyan) !important;
  border-radius: 0 !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: #02060f !important;
  font-weight: 700 !important;
  box-shadow: 0 0 30px var(--sl-cyan-glow) !important;
}
.toast::before {
  content: '[SYSTEM] ';
  font-weight: 800;
}

/* ============ HISTORY / STATS pages ============ */
table {
  background: var(--sl-bg-card);
  border: 1px solid var(--sl-line);
}
th {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  color: var(--sl-cyan) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--sl-cyan-dim) !important;
}
td { color: var(--sl-text) !important; border-color: var(--sl-line) !important; }

/* Stat values everywhere */
.stat-value, .stat-num, [class*="value"] {
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  color: var(--sl-cyan) !important;
  text-shadow: 0 0 10px var(--sl-cyan-glow);
}
.stat-label, [class*="label"] {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sl-text-dim) !important;
}

/* Progress bars */
.progress-row-bar, [class*="progress-bar"] {
  background: rgba(0, 246, 255, 0.06) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: 0 !important;
}
.progress-row-fill, [class*="progress-fill"] {
  background: linear-gradient(90deg, var(--sl-cyan), var(--sl-purple)) !important;
  box-shadow: 0 0 12px var(--sl-cyan-glow);
}

/* ============ ANIMATIONS ============ */
@keyframes pulse-cyan {
  0%, 100% { filter: drop-shadow(0 0 12px var(--sl-cyan-glow)); }
  50%      { filter: drop-shadow(0 0 22px var(--sl-cyan-glow)) brightness(1.2); }
}

@keyframes scan-line {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%, 90% { opacity: 0.4; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--sl-cyan-glow); }
  50%      { box-shadow: 0 0 28px var(--sl-cyan-glow); }
}

/* Active workout glow */
#activeView .workout-banner { animation: glow-pulse 3s ease-in-out infinite; }

/* ============ SYSTEM NOTIFICATION — standalone class ============ */
.sys-notif {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%) translateY(-200%);
  z-index: 9999;
  background: linear-gradient(135deg, rgba(8, 18, 38, 0.98), rgba(15, 25, 50, 0.98));
  border: 1px solid var(--sl-cyan);
  border-left: 3px solid var(--sl-cyan);
  padding: 14px 22px;
  min-width: 280px;
  max-width: 90vw;
  box-shadow: 0 0 40px var(--sl-cyan-glow), 0 12px 40px rgba(0, 0, 0, 0.6);
  font-family: 'Orbitron', monospace;
  color: var(--sl-text);
  letter-spacing: 0.05em;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.sys-notif.visible { transform: translateX(-50%) translateY(0); }
.sys-notif-tag {
  font-size: 10px; letter-spacing: 0.3em; color: var(--sl-cyan);
  text-shadow: 0 0 6px var(--sl-cyan-glow);
  margin-bottom: 4px; font-weight: 700;
}
.sys-notif-msg { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.sys-notif-reward {
  margin-top: 6px; font-size: 11px; color: var(--sl-gold);
  text-shadow: 0 0 6px var(--sl-gold-glow); letter-spacing: 0.15em;
}

/* Disable any leftover light backgrounds */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sl-cyan-dim) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
  background: var(--sl-cyan-dim);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--sl-cyan); }