html { color-scheme: dark; background: var(--carbon); }
body { margin: 0; color: var(--chalk); font-family: var(--fightr-font); }
* { box-sizing: border-box; }
button, select, input { font: inherit; }
button, select, summary, a { touch-action: manipulation; }
button:not(.fightr-ui button, .recording-position-grid button), .boxing-fields button {
    min-height: 44px; padding: .5rem .8rem; color: var(--chalk); background: #242424;
    border: 1px solid #505050; border-radius: .55rem; cursor: pointer;
}
button[aria-pressed="true"]:not(.fightr-ui button, .recording-position-grid button) { border-color: var(--fight-red-light); background: #371816; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
button.primary:not(.fightr-ui button) { background: var(--fight-red); border-color: var(--fight-red-light); font-weight: 700; }
a { color: inherit; }
p { line-height: 1.5; }
h1 { margin: 0 0 1.2rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
h3 { font-size: 1.03rem; margin: 1.25rem 0 .45rem; }
.boxing-shell { max-width: 920px; margin: auto; padding-inline: clamp(.75rem, 3vw, 2rem); }
.boxing-header { display: flex; align-items: center; min-height: 68px; gap: .75rem; border-bottom: 1px solid #404040; }
.boxing-header img { display: block; }
.boxing-header nav { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.boxing-header nav button { border-color: transparent; border-radius: 0; background: transparent; padding-inline: .55rem; }
.boxing-header nav button[aria-pressed="true"] { box-shadow: inset 0 -2px var(--fight-red-light); background: transparent; }
.boxing-main { max-width: 740px; margin: 1.5rem auto 2rem; min-width: 0; }
.boxing-main > p, .node-content p { color: var(--steel); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .65rem; color: var(--steel); font-size: .78rem; padding: 1rem 0; border-top: 1px solid #404040; }
.loading { padding: 2rem; text-align: center; }
.notice { margin: 0 0 1rem; padding: .65rem .9rem; background: #262626; border: 1px solid #666; border-radius: .55rem; overflow-wrap: anywhere; }
.notice.error { background: #421b19; border-color: #cc7770; }
.notice button { margin-inline-start: .4rem; }
.workout-result { position: fixed; z-index: 11; top: .6rem; left: 50%; transform: translateX(-50%); width: min(70vw, 560px); text-align: center; pointer-events: none; }
.training-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.training-summary button { text-align: left; }
.training-summary .continue { border-color: #b35b54; }
.training-summary span { display: block; font-size: .84rem; color: var(--steel); margin-top: .25rem; }
.boxing-fields > label, .skill-row > label:not(.check), .stat-filters > label { display: grid; gap: .4rem; font-weight: 600; }
.boxing-fields select, .skill-row select, .stat-filters select {
    background: var(--carbon); color: var(--chalk); width: 100%; min-width: 0; min-height: 44px;
    padding: .4rem .5rem; border: 1px solid #676767; border-radius: .45rem;
}
.boxing-fields > label, .boxing-fields > button { margin-bottom: .8rem; }
.boxing-fields .workout-task { margin-top: .4rem; }
.round-stepper { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding-block: .7rem; }
.start { margin-top: .65rem; width: 100%; }
.page-heading { display: flex; gap: .65rem; align-items: start; justify-content: space-between; }
.page-heading p { margin-top: -.65rem; color: var(--steel); }
.milestones { display: flex; flex-wrap: wrap; gap: .4rem; }
.milestones span { border: 1px solid #846055; border-radius: 1rem; padding: .3rem .6rem; font-size: .8rem; }
.roadmap-chapter { margin: 1.5rem 0; }
.roadmap-chapter h2 span { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-right: .2rem; background: var(--fight-red); border-radius: 50%; font-size: .85rem; }
.roadmap-list { margin: 0 0 0 .75rem; padding: 0 0 0 .85rem; border-left: 2px solid #494949; list-style: none; }
.roadmap-node { border: 1px solid #464646; border-radius: .65rem; background: #181818; margin: .45rem 0; }
.roadmap-node.current { border-color: var(--fight-red-light); }
.roadmap-node .node-toggle { border: 0; background: transparent; width: 100%; display: grid; gap: .55rem; grid-template-columns: 1.1rem minmax(0, 1fr) 1rem; align-items: center; text-align: left; }
.current .node-state { color: #ff887e; }
.node-copy small { display: block; font-size: .8rem; margin-top: .2rem; color: var(--steel); }
.node-content { padding: .1rem .8rem .8rem; overflow-wrap: anywhere; }
.instructions { padding-left: 1.2rem; line-height: 1.5; }
.instructions li + li { margin-top: .25rem; }
progress { width: 100%; accent-color: var(--fight-red-light); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .55rem; }
.sequence { border-top: 1px solid #454545; padding-block: .4rem; }
.sequence summary { cursor: pointer; min-height: 42px; padding-block: .35rem; overflow-wrap: anywhere; }
.sequence summary small { color: var(--steel); margin-left: .45rem; white-space: nowrap; }
.requirements { padding-left: 1.25rem; }
.requirements li { margin-block: .45rem; }
.requirements button { margin-left: .35rem; }
.panel { border: 1px solid #464646; border-radius: .65rem; background: #181818; padding: 1rem; margin: .75rem 0; }
.skill-row { display: grid; grid-template-columns: 1fr minmax(8rem, 11rem) auto; align-items: center; gap: .55rem; padding-block: .65rem; border-top: 1px solid #444; }
.skill-row.combination-row { grid-template-columns: 1fr auto; }
.check { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.check input { min-width: 20px; min-height: 20px; accent-color: var(--fight-red-light); }
.stat-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.total-stat strong { display: block; margin-block: .4rem; font-size: 1.9rem; }
.stat-row { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding-block: .6rem; border-top: 1px solid #444; overflow-wrap: anywhere; }
.stat-row strong { flex: none; }
.stat-bar { position: absolute; bottom: 0; height: 2px; background: var(--fight-red-light); }
.time-chart svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: #555; }
.chart-axis { fill: var(--steel); font: 18px var(--fightr-font); }
.chart-bar { fill: var(--fight-red); }
.chart-bar.selected { fill: var(--fight-red-light); }
.time-chart g:focus-visible .chart-bar { stroke: var(--chalk); stroke-width: 2px; }
#blazor-error-ui { display: none; }
#pwa-update { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 20; padding: .75rem; background: var(--carbon); border: 1px solid #777; }
@media (max-width: 520px) {
    .boxing-header { gap: .3rem; }
    .boxing-header nav { justify-content: flex-start; }
    .boxing-header nav button { padding-inline: .35rem; font-size: .79rem; }
    .skill-row { grid-template-columns: minmax(0, 1fr) auto; }
    .skill-row .check { grid-column: 1 / -1; }
    .skill-row.combination-row { grid-template-columns: 1fr; }
    .skill-row.combination-row .actions { margin-block: 0; }
    .stat-row { flex-wrap: wrap; }
}