/* ── DARK THEME (default) ── */
:root, [data-theme="dark"] {
  --black: #0a0a0a;
  --white: #f5f2ed;
  --cream: #ede9e3;
  --accent: #e8ff47;
  --accent-dim: rgba(232,255,71,0.12);
  --accent2: #ff4d1c;
  --gray: #2a2a2a;
  --gray2: #3d3d3d;
  --muted: #7a7a7a;
  --border: rgba(245,242,237,0.1);
  --card: #141414;
  --input-bg: #1c1c1c;
  --body-bg: #0a0a0a;
  --header-bg: rgba(10,10,10,0.92);
  --analysis-bg: linear-gradient(135deg, #141414 0%, #1a1f0a 100%);
  --analysis-border: rgba(232,255,71,0.15);
  --zone-z1-bg:#1a1a2e; --zone-z1-c:#4a9eff; --zone-z1-b:#4a9eff33;
  --zone-z2-bg:#1a2318; --zone-z2-c:#4ade80; --zone-z2-b:#4ade8033;
  --zone-z3-bg:#252200; --zone-z3-c:#e8ff47; --zone-z3-b:rgba(232,255,71,0.3);
  --zone-z4-bg:#2a1500; --zone-z4-c:#fb923c; --zone-z4-b:#fb923c33;
  --zone-z5-bg:#2a0a0a; --zone-z5-c:#ff4d1c; --zone-z5-b:rgba(255,77,28,0.3);
  --step-divider-bg: #111418;
  --step-divider-border: rgba(232,255,71,0.08);
  --step-divider-num: rgba(232,255,71,0.07);
  --step-divider-text: #f5f2ed;
  --step-divider-sub: #7a7a7a;
  --step-icon-bg: rgba(232,255,71,0.1);
  --step-icon-c: #e8ff47;
  --noise-opacity: 0.03;
  --type-rest-bg: #333;
  --session-hover-border: rgba(245,242,237,0.2);
  --table-row-border: rgba(245,242,237,0.04);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --black: #1a1a1a;
  --white: #1a1a1a;
  --cream: #f0ede8;
  --accent: #c8a800;
  --accent-dim: rgba(200,168,0,0.1);
  --accent2: #d93a10;
  --gray: #e8e4de;
  --gray2: #b0aa9f;
  --muted: #7a7672;
  --border: rgba(26,26,26,0.1);
  --card: #ffffff;
  --input-bg: #f7f4ef;
  --body-bg: #f0ede8;
  --header-bg: rgba(240,237,232,0.94);
  --analysis-bg: linear-gradient(135deg, #fffef5 0%, #f5f9e8 100%);
  --analysis-border: rgba(200,168,0,0.2);
  --zone-z1-bg:#e8f2ff; --zone-z1-c:#1a6bc4; --zone-z1-b:#1a6bc433;
  --zone-z2-bg:#e8f5ec; --zone-z2-c:#1a7a38; --zone-z2-b:#1a7a3833;
  --zone-z3-bg:#fffbe6; --zone-z3-c:#7a5800; --zone-z3-b:rgba(122,88,0,0.2);
  --zone-z4-bg:#fff3e6; --zone-z4-c:#b84f00; --zone-z4-b:#b84f0033;
  --zone-z5-bg:#ffeee8; --zone-z5-c:#c02a00; --zone-z5-b:rgba(192,42,0,0.2);
  --step-divider-bg: #ffffff;
  --step-divider-border: rgba(200,168,0,0.12);
  --step-divider-num: rgba(200,168,0,0.08);
  --step-divider-text: #1a1a1a;
  --step-divider-sub: #7a7672;
  --step-icon-bg: rgba(200,168,0,0.12);
  --step-icon-c: #7a5800;
  --noise-opacity: 0.015;
  --type-rest-bg: #ccc;
  --session-hover-border: rgba(26,26,26,0.2);
  --table-row-border: rgba(26,26,26,0.05);
}

[data-theme="light"] body { background: var(--body-bg); }
[data-theme="light"] .logo { color: var(--black); }
[data-theme="light"] h1 { color: var(--black); }
[data-theme="light"] .hero-sub { color: var(--muted); }
[data-theme="light"] .badge { background: var(--accent); color: #fff; }
[data-theme="light"] .plan-title { color: var(--black); }
[data-theme="light"] .analysis-text { color: var(--black); }
[data-theme="light"] .week-name { color: var(--black); }
[data-theme="light"] .session-name { color: var(--black); }
[data-theme="light"] .interval-table td { color: var(--black); }
[data-theme="light"] .card-title { color: var(--black); }
[data-theme="light"] .session-card { background: #fff; }
[data-theme="light"] .session-card:hover { border-color: var(--session-hover-border); }
[data-theme="light"] .session-body { border-top-color: var(--border); }
[data-theme="light"] .stats-strip { background: var(--border); }
[data-theme="light"] .stat-cell { background: var(--input-bg); }
[data-theme="light"] .week-header { border-bottom-color: var(--border); }
[data-theme="light"] .week-num { color: var(--accent); }
[data-theme="light"] .week-deload .week-num { color: var(--accent2); }
[data-theme="light"] .week-deload .week-name { color: var(--accent2); }
[data-theme="light"] select option { background: #fff; color: #1a1a1a; }
[data-theme="light"] .toggle-btn:hover { border-color: var(--muted); color: var(--black); }
[data-theme="light"] .toggle-btn.active { background: var(--accent); color: #fff; }
[data-theme="light"] .day-toggle:hover { border-color: var(--muted); color: var(--black); }
[data-theme="light"] .day-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="light"] .import-btn { color: var(--black); }
[data-theme="light"] .import-btn:hover { background: var(--gray); }
[data-theme="light"] .drop-text strong { color: var(--black); }
[data-theme="light"] .error-card { background: #fff5f5; border-color: rgba(193,42,0,0.2); }
[data-theme="light"] footer { color: var(--gray2); }
[data-theme="light"] input::placeholder { color: var(--gray2); }
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,168,0,0.1);
}
[data-theme="light"] .btn-generate:hover { box-shadow: 0 8px 32px rgba(200,168,0,0.2); }
[data-theme="light"] .drop-zone:hover, [data-theme="light"] .drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(200,168,0,0.04);
}
[data-theme="light"] .file-chip {
  background: rgba(200,168,0,0.1);
  border-color: rgba(200,168,0,0.2);
  color: #7a5800;
}
[data-theme="light"] .loading-sub { color: var(--muted); }

/* ── FONT VARS (theme-independent) ── */
:root {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 12px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--body-bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── NOISE TEXTURE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: 999;
}

/* ── HEADER ── */
header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  z-index: 100;
}

.logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--accent);
  color: var(--black);
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ── HERO ── */
.hero {
  padding: 52px 24px 44px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* Subtle diagonal grid lines behind hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 28px,
      var(--border) 28px,
      var(--border) 29px
    );
  opacity: 0.4;
  pointer-events: none;
  border-radius: var(--radius);
}

.hero-inner { position: relative; z-index: 1; }

.hero-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-dim);
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(232,255,71,0.2);
}

[data-theme="light"] .hero-tag {
  background: rgba(200,168,0,0.08);
  border-color: rgba(200,168,0,0.2);
}

.hero-tag-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 84px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  color: var(--white);
}

h1 span {
  color: var(--accent);
  display: block;
}

.hero-sub {
  font-size: 14px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  max-width: 380px;
  margin-top: 16px;
  margin-bottom: 28px;
}

/* Three stat pills in a row */
.hero-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.hero-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}

.hero-stat-info { display: flex; flex-direction: column; }

.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-stat-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 1px;
}

[data-theme="light"] .hero-stat-sub { color: var(--muted); }

/* ── SECTION ── */
.section {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── CARD ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title .icon {
  font-size: 18px;
}

.card-note {
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.65;
  padding: 12px 14px;
  background: var(--input-bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 18px;
}

.card-note strong {
  color: var(--white);
  font-weight: 500;
}

[data-theme="light"] .card-note strong { color: var(--black); }

/* ── GRID ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 400px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── FORM ELEMENTS ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,255,71,0.08);
}

input::placeholder { color: var(--gray2); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7a7a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

select option { background: var(--gray); }

textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.unit {
  position: relative;
}

.unit input { padding-right: 48px; }

.unit-label {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

/* ── TOGGLE GROUP ── */
.toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toggle-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.05em;
}

.toggle-btn:hover { border-color: var(--muted); color: var(--white); }

.toggle-btn.active {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
  font-weight: 500;
}

/* ── WEEKDAY GRID ── */
.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.day-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.day-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.day-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-toggle:hover { border-color: var(--muted); color: var(--white); }
.day-toggle.active { background: var(--accent); color: var(--black); border-color: var(--accent); }

/* ── SUBMIT BUTTON ── */
.btn-generate {
  width: 100%;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.btn-generate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s;
}

.btn-generate:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232,255,71,0.25); }
.btn-generate:active { transform: translateY(0); }
.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── LOADING ── */
.loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px;
  text-align: center;
  gap: 20px;
}

.loading-state.visible { display: flex; }

.spinner {
  width: 48px;
  height: 48px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.loading-sub {
  font-size: 13px;
  color: var(--gray2);
  max-width: 280px;
}

/* ── PLAN OUTPUT ── */
#plan-output {
  display: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

#plan-output.visible { display: block; }

.plan-header {
  margin-bottom: 32px;
}

.plan-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.plan-title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 12px;
}

/* ── PROFILE ANALYSIS ── */
.analysis-card {
  background: var(--analysis-bg);
  border: 1px solid var(--analysis-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.analysis-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.analysis-text {
  font-size: 14px;
  color: var(--white);
  line-height: 1.75;
  white-space: pre-wrap;
}

/* ── WEEK CARDS ── */
.week-block {
  margin-bottom: 32px;
}

.week-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.week-num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
}

.week-info {
  flex: 1;
}

.week-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  letter-spacing: 0.04em;
}

.week-focus {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.week-deload .week-num { color: var(--accent2); }
.week-deload .week-name { color: var(--accent2); }

/* ── SESSION CARDS ── */
.session-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.session-card:hover { border-color: var(--session-hover-border); }

.session-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.session-day {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  width: 30px;
  flex-shrink: 0;
}

.session-type {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.type-endurance { background: #4a9eff; }
.type-threshold { background: var(--accent); }
.type-vo2 { background: var(--accent2); }
.type-recovery { background: #666; }
.type-strength { background: #a78bfa; }
.type-rest { background: var(--type-rest-bg); }

.session-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  flex: 1;
}

.session-duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.session-chevron {
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.2s;
}

.session-card.expanded .session-chevron { transform: rotate(90deg); }
.session-card.pdf-expanded .session-body { display: block !important; max-height: none !important; transition: none !important; }

.session-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.session-card.expanded .session-body { display: block; }

.session-goal {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

/* ── INTERVAL TABLE — horizontal scroll on mobile ── */
.interval-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  border-radius: var(--radius-sm);
}

.interval-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 420px; /* prevents squish on narrow screens */
}

.interval-table th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.interval-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--table-row-border);
  color: var(--white);
  vertical-align: top;
}

.interval-table tr:last-child td { border-bottom: none; }

.zone-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

.zone-z1 { background: var(--zone-z1-bg); color: var(--zone-z1-c); border: 1px solid var(--zone-z1-b); }
.zone-z2 { background: var(--zone-z2-bg); color: var(--zone-z2-c); border: 1px solid var(--zone-z2-b); }
.zone-z3 { background: var(--zone-z3-bg); color: var(--zone-z3-c); border: 1px solid var(--zone-z3-b); }
.zone-z4 { background: var(--zone-z4-bg); color: var(--zone-z4-c); border: 1px solid var(--zone-z4-b); }
.zone-z5 { background: var(--zone-z5-bg); color: var(--zone-z5-c); border: 1px solid var(--zone-z5-b); }

/* ── STATS STRIP ── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 12px;
}

.stat-cell {
  background: var(--input-bg);
  padding: 10px 12px;
  text-align: center;
}

.stat-val {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  display: block;
  line-height: 1;
}

.stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── ERROR ── */
.error-card {
  background: #1a0a0a;
  border: 1px solid rgba(255,77,28,0.3);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px;
}

.error-card .ecode {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent2);
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.error-card p { font-size: 14px; color: var(--muted); }

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}

/* ── FOOTER ── */
footer {
  text-align: center;
  padding: 32px 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray2);
  letter-spacing: 0.1em;
  border-top: 1px solid var(--border);
}

/* ── DESKTOP ADJUSTMENTS ── */
@media (min-width: 768px) {
  .hero { padding: 80px 24px 64px; }
  h1 { font-size: 100px; }
  .card { padding: 32px; }
  header { padding: 20px 40px; }
}

/* ── MOBILE PLAN OUTPUT ── */
@media (max-width: 480px) {
  .plan-title { font-size: 36px; }

  .session-header {
    gap: 8px;
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  /* Day + dot stay on left, chevron on far right — name wraps below */
  .session-name {
    order: 3;
    flex-basis: 100%;
    font-size: 13px;
    padding-left: 22px; /* indent under the dot */
    margin-top: -2px;
  }

  .session-day  { order: 1; }
  .session-type { order: 2; }
  .session-duration { order: 4; font-size: 10px; }
  .zwo-btn      { order: 5; }
  .session-chevron { order: 6; }

  .week-num { font-size: 36px; }
  .week-name { font-size: 18px; }

  .plan-actions { flex-direction: column; align-items: stretch; }
  .zwo-all-btn, .pdf-btn { width: 100%; justify-content: center; }

  .hero-stats { gap: 6px; }
  .hero-stat { padding: 6px 10px; }
  .hero-stat-val { font-size: 18px; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.4s ease forwards;
  opacity: 0;
}

.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.15s; }
.fade-up:nth-child(4) { animation-delay: 0.2s; }

/* ── PROGRESS BAR (streaming) ── */
.progress-track {
  width: 120px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  animation: progress 3s ease-in-out infinite;
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* ── IMPORT SECTION ── */
.import-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.import-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.import-btn:hover { border-color: var(--muted); background: var(--gray); }
.import-btn.coming-soon { opacity: 0.4; cursor: not-allowed; }

.import-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.import-info { flex: 1; }
.import-name { font-weight: 500; font-size: 13px; line-height: 1.2; }
.import-status { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px; }

.chip-live { color: #4ade80; }
.chip-soon { color: var(--muted); }

/* file drop zone */
.drop-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(232,255,71,0.04);
}

.drop-zone input[type=file] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.drop-icon { font-size: 24px; margin-bottom: 8px; }
.drop-text { font-size: 13px; color: var(--muted); }
.drop-text strong { color: var(--white); }
.drop-sub { font-family: var(--font-mono); font-size: 10px; color: var(--gray2); letter-spacing: 0.1em; margin-top: 4px; }

/* ── STEP DIVIDERS ── */
.step-divider {
  position: relative;
  margin: 32px 0 28px;
  padding: 20px 20px 20px 64px;
  background: var(--step-divider-bg);
  border: 1px solid var(--step-divider-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.step-divider::before {
  content: attr(data-step-num);
  position: absolute;
  right: -8px;
  top: -8px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--step-divider-num);
  pointer-events: none;
  letter-spacing: -0.02em;
  user-select: none;
}

.step-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--step-icon-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.step-divider-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.step-divider-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--step-divider-text);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.step-divider-sub {
  font-size: 12px;
  color: var(--step-divider-sub);
  font-weight: 300;
  line-height: 1.5;
  max-width: 340px;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.theme-btn.active {
  background: var(--accent);
  color: var(--black);
  font-weight: 500;
}

[data-theme="light"] .theme-btn.active { color: #fff; }

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7672' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ── PARSED FILE CARD ── */
.parsed-card {
  margin-top: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
}

.parsed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.parsed-ok {
  color: var(--accent);
  font-size: 14px;
}

.parsed-filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parsed-format {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--accent-dim);
  color: var(--accent);
  letter-spacing: 0.1em;
}

.parsed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.parsed-stat {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 4px;
}

.ps-val {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--white);
  line-height: 1;
}

.ps-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.parsed-curve {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.pc-label { color: var(--muted); letter-spacing: 0.08em; font-size: 10px; }
.pc-item { color: var(--white); }
.pc-item strong { color: var(--accent); }

.parsed-ftp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.parsed-ftp strong { color: var(--accent); }

.parsed-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* light theme overrides for parsed card */
[data-theme="light"] .parsed-filename { color: var(--black); }
[data-theme="light"] .ps-val { color: var(--black); }
[data-theme="light"] .pc-item { color: var(--black); }

/* ── ZWO BUTTONS ── */
.zwo-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.zwo-btn:hover {
  background: var(--accent);
  color: var(--black);
}

[data-theme="light"] .zwo-btn:hover { color: #fff; }

.zwo-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}

.zwo-all-btn:hover {
  background: var(--accent);
  color: var(--black);
}

[data-theme="light"] .zwo-all-btn:hover { color: #fff; }

.zwo-compat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,255,71,0.1);
  border: 1px solid rgba(232,255,71,0.2);
  border-radius: 100px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
}

/* ── FORM PROGRESS BAR ── */
.form-progress {
  position: sticky;
  top: 61px;
  z-index: 90;
  background: var(--body-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}

.form-progress-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-steps {
  display: flex;
  gap: 6px;
  flex: 1;
}

.fp-step {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.fp-step-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
}

.fp-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ── MODULE B: PLAN VISUALS DASHBOARD ── */
.plan-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 500px) {
  .plan-dashboard { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.chart-card.full-width {
  grid-column: 1 / -1;
}

.chart-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-label span {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--white);
  letter-spacing: 0.03em;
}

[data-theme="light"] .chart-label span { color: var(--black); }

.chart-wrap {
  position: relative;
  height: 140px;
}

.chart-wrap.tall { height: 180px; }

/* Zone legend */
.zone-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.zl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.zl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* MODULE D: PDF export button */
.pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 8px;
}

.pdf-btn:hover {
  border-color: var(--white);
  color: var(--white);
}

[data-theme="light"] .pdf-btn:hover {
  border-color: var(--black);
  color: var(--black);
}

.pdf-btn.loading {
  opacity: 0.5;
  cursor: wait;
}

.plan-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: center;
}

  /* ── ZWO GENERATE / READY PANELS ── */
  .zwo-btn.zwo-hidden { display: none; }

  .zwo-generate-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
  }

  .zwo-generate-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }

  .zwo-generate-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--white);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }

  [data-theme="light"] .zwo-generate-title { color: var(--black); }

  .zwo-generate-sub {
    font-size: 13px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.5;
    max-width: 340px;
  }

  .zwo-ready-panel {
    background: var(--card);
    border: 1px solid rgba(232,255,71,0.2);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
  }

  [data-theme="light"] .zwo-ready-panel { border-color: rgba(200,168,0,0.25); }

  .zwo-ready-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  .zwo-ready-check { color: var(--accent); font-size: 18px; font-weight: 500; }

  .zwo-ready-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--white);
    letter-spacing: 0.04em;
  }

  [data-theme="light"] .zwo-ready-title { color: var(--black); }

  .zwo-ready-sub {
    font-size: 13px;
    color: var(--muted);
    font-weight: 300;
    flex-basis: 100%;
    margin-top: 4px;
  }

/* ── REQUIRED / OPTIONAL FIELD INDICATORS ── */
label .req {
  color: var(--accent2);
  margin-left: 2px;
  font-size: 10px;
}

label .opt {
  color: var(--muted);
  margin-left: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: uppercase;
  font-weight: 400;
}

/* Invalid field highlight */
input.field-error,
select.field-error {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 3px rgba(255,77,28,0.1) !important;
}

/* Inline validation message below generate button */
.validation-msg {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255,77,28,0.08);
  border: 1px solid rgba(255,77,28,0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  letter-spacing: 0.05em;
  line-height: 1.6;
  display: none;
}

.validation-msg.visible { display: block; }