:root {
  color-scheme: dark;
  --bg: #0d1117;
  --card: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #9da7b3;
  --orange: #ff6600;
  --z1: #8b949e;
  --z2: #58a6ff;
  --z3: #3fb950;
  --z4: #d29922;
  --z5: #ff7b00;
  --z6: #f85149;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
  background: var(--bg); color: var(--text); line-height: 1.5;
  overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.top, main, footer { width: min(100%, 920px); margin-inline: auto; }
.top { display: flex; align-items: center; gap: 12px; padding: 18px 0 24px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--orange); color: #111; font-weight: 900; font-size: 1.5rem; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.1rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; line-height: 1.2; }
.eyebrow { color: var(--orange); font-size: .69rem; font-weight: 800; letter-spacing: .13em; }
.local-tag, .badge { margin-left: auto; padding: 5px 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; white-space: nowrap; }
main { display: grid; gap: 14px; }
.panel { padding: 19px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.intro { background: radial-gradient(100% 130% at 0 0, #3a1b08 0, var(--card) 66%); }
.intro h2 { margin: 6px 0 9px; font-size: clamp(1.55rem, 6vw, 2.1rem); }
.muted { color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-heading .eyebrow { margin-bottom: 3px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 5px; color: var(--muted); font-size: .83rem; }
input, select { min-height: 46px; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: #0d1117; color: var(--text); font: 500 .95rem ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
fieldset { margin: 17px 0 12px; padding: 0; border: 0; }
legend { margin-bottom: 8px; color: var(--muted); font-size: .83rem; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.day { min-height: 44px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: .76rem; cursor: pointer; }
.day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day:has(input:checked) { color: #fff; border-color: var(--orange); background: #42200d; }
.day:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.button { min-height: 46px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; cursor: pointer; }
.primary { border-color: var(--orange); background: var(--orange); color: #111; }
.secondary { background: #212830; }
.hint { margin-top: 12px; color: var(--muted); font-size: .76rem; }
.session-panel { border-color: #75401f; }
.session-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; font-size: .85rem; }
.session-meta span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.workout-chart { display: flex; height: 112px; align-items: flex-end; gap: 1px; margin: 15px 0 8px; padding: 6px 5px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: repeating-linear-gradient(to top, transparent 0 24px, #30363d 25px, transparent 26px), #0d1117; }
.chart-segment { min-width: 1px; flex-shrink: 0; border-radius: 3px 3px 0 0; border-right: 1px solid #0d111780; transition: height .2s ease; }
.z1 { background: var(--z1); } .z2 { background: var(--z2); } .z3 { background: var(--z3); }
.z4 { background: var(--z4); } .z5 { background: var(--z5); } .z6 { background: var(--z6); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .7rem; }
.readiness-panel { padding: 12px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: #0d1117; }
.readiness-title { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.score-track { height: 8px; margin: 8px 0; border-radius: 99px; background: #30363d; overflow: hidden; }
.score-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); }
.readiness-details { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .72rem; }
.readiness-details span { padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; }
.readiness-chart { display: block; width: 100%; height: 72px; margin-top: 5px; overflow: visible; }
.ai-response { padding: 12px; border-left: 3px solid var(--orange); background: #0d1117; border-radius: 0 8px 8px 0; }
.connection-copy { margin-bottom: 12px; }
.connection-actions { margin-top: 10px; }
.connection-actions .button { flex: 1; }
.ftp-detection { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: .8rem; }
[hidden] { display: none !important; }
.chart-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.steps, .plan-list { display: grid; gap: 8px; margin-top: 15px; }
.step, .plan-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.step-time { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.step-name { font-weight: 700; font-size: .84rem; }
.step-power { color: var(--muted); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.plan-item { grid-template-columns: minmax(66px, .8fr) 1fr auto; font-size: .8rem; }
.plan-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-title { font-weight: 700; }
.plan-status { color: var(--muted); text-align: right; }
.rest { border-color: #30363d; color: var(--muted); }
footer { padding: 20px 4px; color: var(--muted); font-size: .74rem; }
@media (min-width: 700px) { body { padding-inline: 24px; } .panel { padding: 24px; } .fields { grid-template-columns: repeat(4, minmax(0,1fr)); } .session-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .session-panel > * { grid-column: 1 / -1; } .session-panel .actions { grid-template-columns: max-content max-content; } }