@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap');

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --black:        #080705;
  --dark:         #0f0d0a;
  --panel:        #131109;
  --panel-metal:  #141618;
  --red:          #c1121f;
  --red-bright:   #ff2020;
  --red-glow:     rgba(193, 18, 31, 0.45);
  --orange:       #e85d04;
  --orange-fire:  #ff6a00;
  --gray-dark:    #2a2d2f;
  --gray:         #6b6d70;
  --gray-light:   #9a9d9f;
  --light:        #d4cfc8;
  --brown:        #5c3317;
  --brown-dark:   #2a1500;
  --rust:         #8b4513;
  --green:        #3ddc84;
  --yellow:       #f5a623;
  --blue:         #4fc3f7;
  --border-dim:   #221508;
  --border-metal: #1e2124;
  --stone:        #3d3530;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(193,18,31,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(90,30,10,.08) 0%, transparent 50%);
  color: var(--light);
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── Scanline overlay ───────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(0,0,0,0.07) 4px,
    rgba(0,0,0,0.07) 5px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ─── Navigation ─────────────────────────────────────────────── */
nav {
  background: linear-gradient(180deg, #0e0c09 0%, #0a0806 100%);
  border-bottom: 2px solid var(--red);
  box-shadow: 0 3px 30px var(--red-glow), 0 1px 0 rgba(232,93,4,.15);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--red-bright);
  letter-spacing: 4px;
  text-shadow: 0 0 14px var(--red), 0 0 28px var(--red-glow);
  flex: 1;
  text-decoration: none;
  animation: flicker 12s infinite;
}

.nav-links { display: flex; gap: 2px; }

.nav-links a {
  color: var(--gray);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s, text-shadow .15s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--red-bright);
  border-color: var(--red);
  background: rgba(193,18,31,.1);
  text-shadow: 0 0 10px var(--red);
}

.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border-dim);
  color: var(--gray);
  font-family: inherit;
  font-size: 20px;
  padding: 4px 10px;
  cursor: pointer;
}

/* ─── Mobile nav ─────────────────────────────────────────────── */
@media (max-width: 620px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 56px; left: 0; right: 0;
    background: #0e0c09;
    border-bottom: 2px solid var(--red);
    padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 24px; }
  .nav-hamburger { display: block; }
}

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px;
}

/* ─── Panel / Card ───────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border-dim);
  border-left: 4px solid var(--red);
  padding: 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

/* top-edge highlight */
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 30%, transparent 70%);
  opacity: .6;
}

/* corner rivet effect */
.panel::after {
  content: '';
  position: absolute;
  top: 6px; right: 8px;
  width: 4px; height: 4px;
  background: var(--brown);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--orange);
}

.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 4px;
  margin-bottom: 18px;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--red-glow);
}

/* ─── Metal panel variant ─────────────────────────────────────── */
.panel-metal {
  background: var(--panel-metal);
  border-color: var(--border-metal);
  border-left-color: var(--gray-dark);
}

.panel-metal::before {
  background: linear-gradient(90deg, var(--gray-dark) 0%, transparent 70%);
}

/* ─── Stats grid ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--dark);
  border: 1px solid var(--border-dim);
  border-top: 3px solid var(--red);
  padding: 18px 14px;
  text-align: center;
  position: relative;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193,18,31,.3), transparent);
}

.stat-value {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--red-bright);
  text-shadow: 0 0 18px rgba(255,32,32,.55);
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Health bars ────────────────────────────────────────────── */
.hbar-wrap { margin: 10px 0; }

.hbar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 4px;
}

.hbar {
  height: 8px;
  background: #180a00;
  border: 1px solid var(--border-dim);
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  transition: width .6s ease;
  box-shadow: 0 0 8px currentColor;
}

.hbar-fill.red    { background: var(--red);    color: var(--red);    }
.hbar-fill.green  { background: var(--green);  color: var(--green);  }
.hbar-fill.yellow { background: var(--yellow); color: var(--yellow); }
.hbar-fill.orange { background: var(--orange); color: var(--orange); }
.hbar-fill.blue   { background: var(--blue);   color: var(--blue);   }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid var(--red);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: background .12s, color .12s, box-shadow .12s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.btn:hover {
  background: var(--red);
  color: #000;
  box-shadow: 0 0 20px var(--red-glow), inset 0 0 10px rgba(255,32,32,.1);
}

.btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.btn.green  { border-color: var(--green);  color: var(--green);  }
.btn.green:hover  { background: var(--green);  color: #000; box-shadow: 0 0 20px rgba(61,220,132,.4); }

.btn.orange { border-color: var(--orange); color: var(--orange); }
.btn.orange:hover { background: var(--orange); color: #000; }

.btn.gray   { border-color: #3a3a3a; color: var(--gray-light); }
.btn.gray:hover { background: #3a3a3a; color: #fff; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}

.doom-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.doom-input,
.doom-select {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  background: var(--dark);
  border: 1px solid #2a1200;
  border-bottom: 2px solid var(--red);
  color: var(--light);
  padding: 9px 12px;
  outline: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.doom-input:focus,
.doom-select:focus {
  border-color: var(--red);
  border-bottom-color: var(--orange-fire);
  box-shadow: 0 0 10px var(--red-glow);
}

.doom-select { cursor: pointer; }

/* ─── Login page ─────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(193,18,31,.14) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(90,30,10,.1) 0%, transparent 50%);
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 44px 36px;
  border: 1px solid var(--border-dim);
  border-top: 3px solid var(--red);
  background: var(--panel);
  box-shadow: 0 0 60px var(--red-glow), 0 0 120px rgba(90,30,10,.2);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-fire), var(--red-bright), transparent);
}

.login-skull {
  text-align: center;
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 14px var(--red)) drop-shadow(0 0 28px var(--orange));
}

.login-title {
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--red-bright);
  text-shadow: 0 0 20px var(--red), 0 0 40px var(--red-glow);
  margin-bottom: 4px;
  letter-spacing: 6px;
  animation: flicker 8s infinite;
}

.login-sub {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 3px;
  margin-bottom: 32px;
}

.login-error {
  color: var(--red-bright);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-top: 16px;
  animation: shake .3s ease;
}

/* ─── Timer ──────────────────────────────────────────────────── */
.timer-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
}

.timer-mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--border-dim);
}

.timer-mode-tabs button {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 22px;
  background: transparent;
  border: none;
  color: var(--gray);
  cursor: pointer;
  border-right: 1px solid var(--border-dim);
  transition: all .15s;
}

.timer-mode-tabs button:last-child { border-right: none; }

.timer-mode-tabs button.active,
.timer-mode-tabs button:hover {
  background: var(--red);
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.3);
}

/* Circular timer */
.timer-ring-wrap {
  position: relative;
  width: 290px;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

/* outer glow ring */
.timer-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(193,18,31,.08) 0%, transparent 70%);
}

.timer-svg {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(-90deg);
}

.timer-track {
  fill: none;
  stroke: #1a0800;
  stroke-width: 14;
}

.timer-ring {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 14;
  stroke-linecap: butt;
  transition: stroke-dashoffset .5s linear, stroke .3s;
  filter: drop-shadow(0 0 8px var(--red));
}

.timer-ring.rest  { stroke: var(--green);  filter: drop-shadow(0 0 8px var(--green)); }
.timer-ring.ready { stroke: var(--yellow); filter: drop-shadow(0 0 8px var(--yellow)); }

.timer-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}

.timer-seconds {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  color: var(--red-bright);
  text-shadow: 0 0 30px rgba(255,32,32,.7), 0 0 60px rgba(255,32,32,.3);
}

.timer-seconds.rest  { color: var(--green);  text-shadow: 0 0 30px rgba(61,220,132,.7); }
.timer-seconds.ready { color: var(--yellow); text-shadow: 0 0 30px rgba(245,166,35,.7); }

.timer-phase {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  margin-top: 10px;
  text-transform: uppercase;
}

.timer-phase.work  { color: var(--red-bright); }
.timer-phase.rest  { color: var(--green); }
.timer-phase.ready { color: var(--yellow); }
.timer-phase.done  { color: var(--orange-fire); }

.round-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 4px;
  text-shadow: 0 0 12px rgba(232,93,4,.55);
  margin: 14px 0;
}

.timer-config { width: 100%; max-width: 520px; }

/* ─── Upload zone ────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed #2a1500;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  background: rgba(10,6,0,.4);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--orange);
  background: rgba(232,93,4,.05);
}

.upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.upload-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.upload-label { font-size: 13px; font-weight: 600; color: var(--gray); letter-spacing: 1px; }

.preview-img {
  max-width: 220px;
  max-height: 220px;
  border: 1px solid var(--border-dim);
  display: block;
  margin: 14px auto 0;
}

/* Parsed result table */
.parse-result {
  background: var(--dark);
  border: 1px solid var(--border-dim);
  padding: 16px;
  margin-top: 16px;
  font-size: 13px;
}

.parse-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #1c1208;
}

.parse-row:last-child { border-bottom: none; }
.parse-key   { color: var(--gray); font-weight: 600; letter-spacing: 1px; }
.parse-val   { color: var(--light); font-weight: 600; }
.parse-val.ok { color: var(--green); }
.parse-val.missing { color: #3a1800; }

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.doom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.doom-table th {
  background: #140800;
  color: var(--red);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-dim);
}

.doom-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #171209;
  color: var(--light);
  font-weight: 500;
}

.doom-table tr:hover td {
  background: rgba(193,18,31,.06);
}

.zone-extreme   { color: #ff2020; font-weight: 700; }
.zone-anaerobic { color: #ff6b35; }
.zone-aerobic   { color: #f5a623; }
.zone-fat       { color: #3ddc84; }
.zone-warmup    { color: #4fc3f7; }

/* ─── Toast notification ─────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--panel);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  max-width: 300px;
  z-index: 9998;
  animation: slideIn .25s ease;
  line-height: 1.7;
}

.toast.success { border-color: var(--green); border-left-color: var(--green); }
.toast.warning { border-color: var(--yellow); border-left-color: var(--yellow); }

/* ─── Chart container ────────────────────────────────────────── */
.chart-box {
  background: var(--dark);
  border: 1px solid var(--border-dim);
  border-top: 2px solid var(--brown);
  padding: 18px;
  margin-bottom: 18px;
}

.chart-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 3px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* ─── Misc helpers ───────────────────────────────────────────── */
.text-red    { color: var(--red-bright); }
.text-green  { color: var(--green); }
.text-orange { color: var(--orange); }
.text-gray   { color: var(--gray); }
.text-center { text-align: center; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}

.badge.tabata  { color: var(--red);    }
.badge.emom    { color: var(--orange); }
.badge.custom  { color: var(--blue);   }
.badge.other   { color: var(--gray);   }

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border-dim);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}

/* ─── Section divider ────────────────────────────────────────── */
.section-divider {
  border: none;
  border-top: 1px solid var(--border-dim);
  margin: 24px 0;
  position: relative;
}

.section-divider::after {
  content: '//';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  padding: 0 12px;
  color: var(--gray-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes flicker {
  0%,89%,91%,93%,100% { opacity: 1; }
  90%   { opacity: .72; }
  92%   { opacity: .9; }
  94%   { opacity: .78; }
}

@keyframes pulseRed {
  0%,100% { text-shadow: 0 0 10px rgba(255,32,32,.4); }
  50%     { text-shadow: 0 0 32px rgba(255,32,32,1), 0 0 64px rgba(255,32,32,.5); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

@keyframes slideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

@keyframes fireFlicker {
  0%,100% { opacity: 1; filter: brightness(1); }
  33%     { opacity: .9; filter: brightness(1.1); }
  66%     { opacity: .95; filter: brightness(.95); }
}

.animate-pulse-red  { animation: pulseRed 1.5s ease-in-out infinite; }
.animate-blink      { animation: blink 1s step-end infinite; }
.animate-fire       { animation: fireFlicker 2s ease-in-out infinite; }