:root { color-scheme: dark; font-family: "Avenir Next", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif; background: #071d13; color: #fff5f4; }
.timing-nav { align-items: center; background: #0b291a; border-bottom: 1px solid #397453; display: flex; gap: 1rem; justify-content: space-between; padding: .8rem max(1rem, calc((100vw - 72rem) / 2)); }.timing-nav-brand { color: #a9ef81; font-weight: 800; text-decoration: none; }.timing-nav span { color: #bfe5c9; font-size: .82rem; font-weight: 700; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(rgb(4 25 15 / .87), rgb(4 25 15 / .94)), url('assets/disc-golf-background.png') center / cover fixed, #071d13; }
.app-shell { width: min(100%, 38rem); min-height: 100svh; margin: auto; padding: 3rem 1.25rem 2rem; }
header { margin-bottom: 2.5rem; }
.eyebrow { color: #ff9b9e; font-size: .75rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 .5rem; }
h1, h2, button { font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-sans-serif, sans-serif; } h1 { font-size: clamp(2.5rem, 10vw, 4.2rem); letter-spacing: -.06em; line-height: .9; margin: 0; }
h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #eebebf; margin: 0 0 .8rem; }
.subtitle, .hint, .legend, .form-help { color: #eebebf; line-height: 1.5; }
.profiles { display: grid; gap: .55rem; }
.profile { align-items: center; background: #3c1115; border: 1px solid #7c3639; border-radius: .8rem; color: inherit; cursor: pointer; display: grid; grid-template-columns: 1fr auto; min-height: 6.4rem; padding: .8rem 1rem; text-align: left; }
.profile strong { display: block; }.profile small { color: #edbbbc; margin-top: .25rem; }
.profile.selected { background: #fff0e9; border-color: #fff0e9; color: #400d10; }
.profile-total { background: #621e25; border-radius: 10rem; color: #ffcfcc; font-size: .78rem; font-variant-numeric: tabular-nums; padding: .28rem .48rem; }.profile.selected .profile-total { background: #f4bbb4; color: #561216; }
.profile-timeline { background: #7a3339; border-radius: 10rem; grid-column: 1 / -1; height: .25rem; margin: 1rem .45rem .1rem; position: relative; }.profile-marker { align-items: center; background: #ffd9d2; border: 1px solid #ac4b50; border-radius: 50%; color: #500e12; display: flex; font-size: .5rem; font-style: normal; font-weight: 900; height: 1.3rem; justify-content: center; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.3rem; }.profile.selected .profile-timeline { background: #c06a68; }.profile.selected .profile-marker { border-color: #6b2125; }
.edit-profile { margin-top: .75rem; min-height: 2.8rem; width: 100%; }.video-section { background: #321014; border-radius: 1rem; margin-top: 2rem; padding: 1.25rem; }.video-upload { background: #431419; border: 1px dashed #9d555a; border-radius: .7rem; display: block; padding: .75rem; text-align: center; }.video-upload input { margin-top: .5rem; }.video-section video { border-radius: .7rem; margin-top: .75rem; max-height: 18rem; width: 100%; }
.profile-row { align-items: stretch; display: grid; gap: .45rem; grid-template-columns: 1fr 3rem; }.profile-row .profile { width: 100%; }.profile-edit { background: #733137; color: #fff5f4; min-height: 0; padding: .4rem; }.profile-editor { background: #200708; border: 1px solid #8d454a; border-radius: 1rem; color: #fff5f4; max-width: min(96vw, 42rem); padding: 1.25rem; width: 100%; }.profile-editor::backdrop { background: rgb(0 0 0 / .7); }.profile-editor h2 { color: #fff5f4; font-size: 1.45rem; }.profile-editor video { background: #080202; border-radius: .7rem; margin-top: .75rem; max-height: 45vh; width: 100%; }.frame-controls, .footfall-buttons { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }.frame-controls button, .footfall-buttons button { background: #733137; color: #fff5f4; min-height: 2.5rem; padding: .45rem .65rem; }.frame-controls output { color: #ffb4b3; font-variant-numeric: tabular-nums; }.frame-controls label { margin: 0; }.frame-controls select { margin-left: .3rem; }
.add-profile { background: #ff8487; color: #35090b; margin: 0 0 .65rem; min-height: 2.6rem; width: 100%; }.profile { min-height: 3.5rem; padding: .5rem .7rem; }.board-toggle { background: #4a181d; border: 1px solid #8b4247; color: #ffd4d1; font-size: .68rem; min-height: 0; padding: .25rem .4rem; }.comparison-dashboard { background: #321014; border-radius: 1rem; margin-top: 1.5rem; padding: 1.25rem; }
.player-workspace { display: grid; gap: 1rem; }.comparison-dashboard { margin-top: 0; min-height: 16rem; }.comparison-row { margin: 1rem 0; }.comparison-row strong { display: block; font-size: .78rem; margin-bottom: .65rem; }.comparison-line { background: #8b3b41; border-radius: 20rem; display: block; height: .22rem; margin: 0 .55rem; position: relative; }.comparison-line i { align-items: center; background: #ffe5de; border: 1px solid #a74349; border-radius: 50%; color: #460e12; display: flex; font-size: .48rem; font-style: normal; font-weight: 900; height: 1.15rem; justify-content: center; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.15rem; }.profile-editor .actions { margin: .9rem 0; } @media (min-width: 48rem) { .player-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .8fr); }.players-panel { max-height: 75vh; overflow: auto; padding-right: .2rem; } }
.settings { background: #321014; border-radius: 1rem; margin: 2rem 0; padding: 1.25rem; }
label { display: grid; gap: .55rem; grid-template-columns: 1fr auto; margin-top: 1rem; font-weight: 650; }
input { accent-color: #a7ee80; grid-column: 1 / -1; width: 100%; }
output { color: #ffaaa8; font-variant-numeric: tabular-nums; }
.rhythm { min-height: 9rem; text-align: center; }.rhythm p { margin: 0; }
#status { font-size: 1.1rem; font-weight: 700; min-height: 1.8rem; }
.steps { align-items: center; display: flex; justify-content: center; margin: 1.35rem 0 .6rem; }
.steps span { align-items: center; background: #ffe5de; border-radius: 50%; color: #4a0c10; display: inline-flex; font-weight: 900; height: 2.4rem; justify-content: center; width: 2.4rem; }
.steps i { background: #d2575d; height: 2px; width: clamp(.7rem, 6vw, 2.2rem); }
.actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
button { border: 0; border-radius: .8rem; cursor: pointer; font: inherit; font-weight: 800; min-height: 3.5rem; padding: .8rem 1rem; }
.primary { background: #ff8487; color: #35090b; font-size: 1.05rem; }.secondary { background: #733137; color: #fff5f4; }.stop { background: #8b1d27; color: white; }
.workout-actions { grid-template-columns: 1.5fr .7fr; margin-top: 1.25rem; }
button:disabled { cursor: not-allowed; opacity: .45; }.hint { font-size: .85rem; margin: 1.5rem auto; max-width: 28rem; text-align: center; }
@media (min-width: 42rem) { .app-shell { padding-top: 4.5rem; } .actions { grid-template-columns: 1.5fr 1fr .7fr; } }
.add-player { background: #2b0c10; border: 1px solid #683036; border-radius: .8rem; margin-top: .75rem; padding: .9rem 1rem; }
summary { cursor: pointer; font-weight: 800; }.add-player form { margin-top: 1rem; }.add-player label { margin-top: .7rem; }
.add-player input { background: #180508; border: 1px solid #86434a; border-radius: .5rem; color: inherit; font: inherit; min-height: 2.6rem; padding: .45rem .6rem; }
.timing-editor { padding: 1rem 0 .4rem; touch-action: none; }.timing-track { background: #8b3b41; border-radius: 10rem; height: .45rem; margin: 1.4rem .7rem 0; position: relative; }.fixed-marker, .timing-marker { align-items: center; background: #ffe5de; border: 2px solid #a74349; border-radius: 50%; color: #460e12; display: flex; font-size: .58rem; font-weight: 900; height: 1.6rem; justify-content: center; min-height: 0; padding: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.6rem; }.fixed-marker { left: 0; }.timing-marker { cursor: grab; }.timing-marker:active { cursor: grabbing; scale: 1.08; }.timing-values { display: grid; font-size: .72rem; gap: .55rem; grid-template-columns: 1fr 1fr; margin-top: 1.1rem; }.timing-values span { align-items: center; background: #430f14; border-radius: .45rem; display: flex; justify-content: space-between; padding: .38rem .48rem; }.timing-values output { color: #ffb4b3; font-size: .88rem; font-weight: 850; }
.form-help { font-size: .85rem; margin: .7rem 0; }.add-button { background: #ff8487; color: #35090b; margin-top: 1rem; min-height: 2.8rem; width: 100%; }

/* Final green UI theme overrides */
button { border-radius: .65rem; min-height: 2.65rem; padding: .5rem .72rem; }
.primary, .add-profile, .add-button { background: #a9ef81; color: #102c1b; }
.secondary, .stop, .profile-edit, .frame-controls button, .footfall-buttons button { background: #2d6949; color: #f3fff5; }
.profile { background: #113824; border-color: #397453; }.profile small { color: #b9d8c2; }.profile.selected { background: #e2f7d9; border-color: #e2f7d9; color: #10331f; }
.settings, .comparison-dashboard, .profile-editor { background: #103523; border-color: #397453; }
.profile-editor h2 { color: #f2fff3; }.video-upload { background: #173f2a; border-color: #5d9b74; color: #dff6e5; }
.board-toggle { background: #184a31; border-color: #5d9b74; color: #e5f8e9; }
.comparison-line { background: #5b9771; }.comparison-line i { background: #e4f8dc; border-color: #4c9069; color: #123d27; }
.profile-editor input, .profile-editor select { appearance: none; background: #0a2618; border: 1px solid #5d9b74; border-radius: .55rem; color: #f3fff5; font: inherit; min-height: 2.5rem; padding: .45rem .65rem; }.profile-editor input:focus, .profile-editor select:focus { border-color: #a9ef81; outline: 2px solid rgb(169 239 129 / .35); }.profile-editor select { padding-right: 1.8rem; }.profile-editor .video-upload input { background: transparent; border: 0; min-height: auto; padding: .2rem 0; }.profile-editor .video-upload input::file-selector-button { background: #a9ef81; border: 0; border-radius: .45rem; color: #102c1b; cursor: pointer; font: inherit; font-weight: 800; margin-right: .6rem; padding: .4rem .55rem; }
.step-table { border-collapse: separate; border-spacing: .22rem; margin-top: .7rem; table-layout: fixed; width: 100%; }.step-table th, .step-table td { background: #173f2a; padding: .28rem .12rem; text-align: center; }.step-table th { color: #bfe2c8; font-size: .65rem; }.step-table th:first-child, .step-table td:first-child { background: transparent; color: #bfe2c8; font-size: .65rem; text-align: right; }.step-table button { background: #2d6949; color: #f3fff5; font-size: .6rem; min-height: 1.9rem; padding: .22rem .18rem; width: 100%; }.step-table button:disabled { opacity: .35; }.optional-step { color: #a9ef81; cursor: pointer; font: inherit; font-weight: 800; }
.shot-meta { display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; }.shot-meta label:last-child { grid-column: 1 / -1; }.shot-meta label { font-size: .72rem; margin-top: .4rem; }
.workout-video { background: #071d13; border: 1px solid #5d9b74; border-radius: 1rem; color: #f3fff5; max-width: min(94vw, 42rem); padding: .75rem; width: 100%; }.workout-video::backdrop { background: rgb(0 0 0 / .75); }.workout-video video { display: block; margin-top: .6rem; max-height: 78vh; width: 100%; }.workout-video button { background: #2d6949; color: #f3fff5; min-height: 2.2rem; }.recorded-steps { display: none; }
.workout-step-bar { background: #0a2618; border-radius: 2rem; height: .7rem; margin: .8rem 0 .15rem; overflow: hidden; position: relative; }.workout-step-bar span { border-right: 1px solid #0a2618; height: 100%; opacity: .35; position: absolute; top: 0; transition: opacity .08s, filter .08s; }.workout-step-bar span.active { filter: brightness(1.4); opacity: 1; }
.text-button { background: transparent; color: #baf4c9; min-height: 0; padding: 0; text-decoration: underline; }
.profile { padding-left: .8rem; }.add-profile { font-size: .78rem; min-height: 2.25rem; padding: .35rem .55rem; }.video-upload { font-size: .76rem; padding: .45rem .55rem; }.video-upload input::file-selector-button { font-size: .72rem; padding: .28rem .4rem; }.comparison-dashboard.drag-target { box-shadow: 0 0 0 2px #a9ef81 inset; }
.profile-row .profile { padding: .5rem 1rem; }
.profile-copy { display: block; padding-right: .3rem; }
.profile-row { grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem; }.profile { min-width: 0; }.profile-copy { min-width: 0; overflow: hidden; }.profile-edit, .board-toggle { font-size: 1rem; min-height: 2.15rem; padding: .1rem; }.board-toggle { white-space: nowrap; }
.profile { grid-template-columns: minmax(0, 1fr); width: 100%; }.profile-copy, .profile-copy strong { display: block; min-width: 0; width: 100%; }
.profile-edit, .board-toggle { font-size: 1.45rem; min-height: 2.15rem; width: 2.15rem; }.player-required { background: #0b291a; border: 1px solid #5d9b74; border-radius: 1rem; color: #f3fff5; max-width: 22rem; padding: 1.25rem; }.player-required::backdrop { background: rgb(0 0 0 / .7); }.player-required h2 { color: #f3fff5; font-size: 1.15rem; }
.video-upload { font-size: .68rem; padding: .28rem .4rem; }.video-upload input::file-selector-button { font-size: .65rem; padding: .18rem .32rem; }.profile-editor label, .profile-editor input, .profile-editor select { padding-left: .65rem; padding-right: .65rem; }.profile-editor input, .profile-editor select { min-height: 2.55rem; }.profile-editor .video-upload input { padding: .15rem 0; }
.debug-log { background: #14251b; border-left: 3px solid #d9c85a; color: #fff4a8; font: .68rem ui-monospace, monospace; margin: .75rem 0; max-height: 8rem; overflow: auto; padding: .55rem; white-space: pre-wrap; }
.eyebrow, h2, .subtitle, .hint, .legend, .form-help, output { color: #bfe5c9; }.steps i { background: #69af7d; }.steps span { background: #e3f8dc; color: #17452d; }.profile-editor { background: #0b291a; }.profile-editor .actions { grid-template-columns: 1fr 1fr 1fr; }.optional-step { background: transparent !important; color: #a9ef81 !important; display: inline; font-size: .7rem !important; min-height: 0 !important; padding: 0 .15rem !important; width: auto !important; }.export-text { background: #061b10; border: 1px solid #5d9b74; border-radius: .55rem; color: #e6ffeb; font: .72rem ui-monospace, monospace; height: 7rem; margin-top: .6rem; padding: .5rem; resize: vertical; width: 100%; }
.profile-row { grid-template-columns: minmax(0, 1fr) 2.65rem 5.15rem; }.profile-row .profile { min-height: 2.65rem; padding: .38rem .6rem; }.profile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-edit { min-height: 2.65rem; }.board-toggle { min-height: 2.65rem; white-space: nowrap; }
.profile-row { grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem; }.profile-row .profile { min-width: 0; padding: .5rem .7rem; }.profile-copy { padding-right: 0; }.profile-edit, .board-toggle { min-height: 2.15rem; width: 1.8rem; }

/* Mobile-first safety: comfortable touch targets, no iOS input zoom, and scrollable dialogs. */
@media (max-width: 47.99rem) {
  body { background-attachment: scroll; }
  .app-shell { padding: max(1.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  header { margin-bottom: 1.75rem; }
  .comparison-dashboard, .settings { margin-top: 1.25rem; padding: 1rem; }
  .comparison-dashboard { min-height: 12rem; }
  .profile-editor, .workout-video, .player-required { margin: auto; max-height: calc(100dvh - 1rem); overflow-x: hidden; overflow-y: auto; width: calc(100vw - 1rem); }
  .profile-editor { padding: 1rem; }
  .profile-editor video { max-height: 42dvh; }
  .workout-video video { max-height: 62dvh; }
  .profile-editor .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .profile-editor .actions .primary:first-child { grid-column: 1 / -1; }
  .shot-meta { grid-template-columns: 1fr; }
  .shot-meta label:last-child { grid-column: auto; }
  .frame-controls { gap: .4rem; }
  .frame-controls button { flex: 1 1 7rem; }
  .step-table { font-size: .68rem; }
  .step-table th, .step-table td { padding: .2rem .06rem; }
  .step-table button { min-height: 2.35rem; }
}

@media (max-width: 23rem) {
  .profile-row { gap: .35rem; grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem; }
  .profile-edit, .board-toggle { min-height: 2.5rem; width: 2.25rem; }
  .steps span { height: 2.1rem; width: 2.1rem; }
  .steps i { width: .45rem; }
}

@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .board-toggle, .profile-edit { min-height: 2.5rem; }
}

.account-bar { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; margin-top: .7rem; }
.account-bar .account-action { font-size: .78rem; min-height: 2.2rem; overflow: hidden; padding: .35rem .65rem; text-overflow: ellipsis; white-space: nowrap; }
.auth-dialog { background: #0b291a; border: 1px solid #5d9b74; border-radius: 1rem; color: #f3fff5; max-width: 26rem; padding: 1.25rem; width: calc(100vw - 2rem); }.auth-dialog::backdrop { background: rgb(0 0 0 / .72); }.auth-dialog h2 { color: #f3fff5; font-size: 1.3rem; }.auth-dialog label { grid-template-columns: 1fr; }.auth-dialog input { background: #061b10; border: 1px solid #5d9b74; border-radius: .55rem; color: #f3fff5; font: inherit; min-height: 2.7rem; padding: .5rem .65rem; }.auth-dialog .primary { margin-top: 1rem; width: 100%; }.dialog-close { background: transparent; color: #bfe5c9; float: right; font-size: 1.5rem; min-height: 1.75rem; padding: 0; width: 1.75rem; }.google-sign-in { background: #e7f7e8; border-radius: .65rem; color: #153824; display: block; font-weight: 800; margin-top: .7rem; padding: .7rem; text-align: center; text-decoration: none; }.auth-links { display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; }.auth-links .text-button { font-size: .76rem; }