[hidden] { display: none !important; }
.camera-stage { position: relative; width: 100%; aspect-ratio: 4/3; max-height: min(32vh, 300px); margin-top: 18px; background: #101914; border-radius: 15px; overflow: hidden; }
.camera-stage video, .camera-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.camera-stage canvas, .camera-badge { pointer-events: none; }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 35px; text-align: center; color: #c7d2c8; font-size: 13px; }
.camera-badge { position: absolute; top: 12px; left: 12px; padding: 7px 10px; border-radius: 6px; color: #d5f5a2; background: #17221fe6; font-size: 10px; font-weight: 700; letter-spacing: .7px; }
.camera-dialog .counter-display { margin: 15px 0 5px; }
.camera-dialog .counter-display strong { font-size: 44px; }
.camera-dialog #rep-count { display: inline-block; transform-origin: 50% 70%; }
.rep-total { position: relative; min-width: 100px; }
.next-rep { position: absolute; inset: 0; }
.rep-total:has(.next-rep:not([hidden])) > #rep-count { opacity: 0; }
.rep-total:has(.next-rep:not([hidden])) > small { visibility: hidden; }
.camera-dialog .counter-display .next-rep strong { font-size: 44px; letter-spacing: -1px; background: linear-gradient(to top, #c5f36b var(--rep-fill, 0%), #41503b var(--rep-fill, 0%)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1px #b4c9a5; }
.counter-display .next-rep small { font-size: 9px; letter-spacing: .5px; }
.workout-record-option { border: 1px solid #405438; border-radius: 12px; padding: 0 13px 4px; margin-top: 14px; }
.workout-record-option .sound-option { margin-bottom: 5px; }
.is-test .workout-record-option { display: none; }
.camera-dialog.is-running .camera-stage { max-height: min(52vh, 440px); }
.camera-dialog.is-running .camera-selector, .camera-dialog.is-running .sound-option { display: none; }
.workout-result { background: #17221f; color: #eef4e7; border-color: #405438; }
.workout-result .close-button { background: #31412e; color: #c5d8b4; }
.workout-result .modal-text, .workout-result .field-hint { color: #b0c0a4; }
.score-card { text-align: center; padding: 25px 15px; border: 1px solid #496137; border-radius: 20px; background: radial-gradient(ellipse at top, #354c27, #1c2b20 80%); animation: score-reveal .45s ease-out; }
.score-eyebrow { font-size: 10px; letter-spacing: 2px; color: #c1d5aa; }
.score-card .result-number { color: #c5f36b; font-size: 100px; font-weight: 800; line-height: 1; margin: 15px 0 10px; }
.score-card .result-caption { color: #c0d1b1; }
.workout-video-result video { width: 100%; max-height: 44vh; background: #101914; border-radius: 12px; margin-top: 15px; }
.video-save-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.video-save-actions .btn { flex: 1; justify-content: center; }
.workout-result .btn-outline { color: #deebd4; border-color: #62774f; }
.workout-result .btn-outline:hover { background: #34472c; }
@keyframes score-reveal { from { transform: scale(.88); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@media(prefers-reduced-motion: reduce) { .score-card { animation: none; } }
.camera-dialog .workout-instruction { min-height: 40px; margin: 10px 0; }
.camera-diagnostics { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 11px; color: #9fb294; margin: 12px 0; }
.camera-dialog select, #camera-test input { padding: 10px; border: 1px solid #4b5d3e; border-radius: 8px; background: #23322a; width: 100%; font: inherit; color: #eef4e7; }
.camera-dialog select { min-height: 44px; }
.camera-dialog select:disabled { opacity: .5; }
.camera-selector { display: flex; align-items: flex-end; gap: 10px; }
.camera-selector > div { flex: 1; min-width: 0; }
.camera-selector select, .camera-selector button { min-height: 44px; }
.camera-selector button { flex-shrink: 0; padding: 12px; }
.camera-selector :disabled { opacity: .5; cursor: default; }
.camera-tuning, .simulator-option { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 15px; font-size: 12px; }
.camera-tuning summary, .simulator-option summary { cursor: pointer; line-height: 1.6; }
.sound-option { display: flex; gap: 9px; align-items: center; margin: 16px 0 12px; font-size: 12px; }
.sound-option input { accent-color: #5e822e; width: 17px; height: 17px; }
.camera-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 0 2px; background: var(--dark); position: sticky; bottom: -1px; }
.camera-actions button { flex: 1; justify-content: center; }
.camera-dialog.is-running > .modal-text, .camera-dialog.is-running > .field-hint, .camera-dialog.is-running .simulator-option { display: none; }
.camera-dialog.is-running .rep-total strong { font-size: 64px; }
.test-entry { margin-bottom: 16px; }
.test-launch { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; margin-bottom: 24px; border: 1px solid #cfdfa9; border-radius: 18px; background: #edf4dd; }
.test-launch h2 { margin: 0 0 6px; font-size: 17px; }
.test-launch p { margin: 0; font-size: 12px; line-height: 1.6; color: #52624a; }
.test-launch .btn { min-height: 44px; }
.is-running .test-entry { display: none; }
.is-test > .modal-text:not(.test-only), .is-test > .field-hint, .is-test .sound-option, .is-test #camera-start { display: none; }
.is-test.has-replay #camera-overlay { display: none; }
#camera-test { margin: 14px 0; }
#test-status { font-size: 12px; color: #c5f36b; line-height: 1.6; }
.test-marks-actions { display: flex; gap: 8px; margin: 12px 0; }
.test-marks-actions button { flex: 1; justify-content: center; min-height: 46px; padding: 12px 8px; }
#test-marks { padding-left: 24px; max-height: 130px; overflow-y: auto; font-size: 12px; line-height: 1.8; }
#camera-test .text-button { font-size: 11px; text-align: left; }
#camera-test .field-label { line-height: 1.6; }
#test-seek { accent-color: #c5f36b; }
.is-test .camera-stage { max-height: min(38vh, 320px); }
@media(max-width: 600px) {
  .test-launch { padding: 18px; }
  .test-launch .btn { width: 100%; justify-content: center; }
  .camera-dialog .counter-display strong { font-size: 36px; }
  .camera-dialog .counter-display .next-rep strong { font-size: 36px; }
  .camera-dialog.is-running .rep-total strong { font-size: 56px; }
  .camera-actions button { font-size: 12px; padding: 12px 9px; }
}