.replay-main{max-width:1100px;margin:40px auto;padding:0 20px 80px}.replay-main h1{font-size:clamp(2.2rem,5vw,4rem)}.replay-panel{padding:24px;border:1px solid #d8e2d6;border-radius:24px;background:#fff;margin:24px 0}.replay-main label{display:block;margin:15px 0;font-weight:600}.replay-main input,.replay-main select{display:block;width:100%;min-height:48px;padding:12px;border:1px solid #aabfae;border-radius:12px;background:#fff;font:inherit;box-sizing:border-box}.replay-main button,.recording-inline button{min-height:44px;padding:12px 22px;margin:5px 8px 5px 0;border-radius:28px;border:1px solid #a8bf9f;background:#e5efdc;color:#244a39;font:inherit;font-weight:600;cursor:pointer}.replay-main button:disabled,.recording-inline button:disabled{opacity:.5;cursor:default}.replay-main video{display:block;width:100%;height:min(76svh,760px);background:#143e31;border-radius:16px;object-fit:contain}.replay-main a{display:inline-block}.recording-inline{border:1px solid #d8e2d6;border-radius:18px;padding:16px;margin:16px 0}.recording-inline p{margin:8px 0}.recording-inline select{max-width:100%;padding:10px;font:inherit}.recording-live{color:#a42c22;font-weight:700}.replay-main details{margin:16px 0}.replay-main input[type=checkbox]{display:inline;width:22px;min-height:22px;margin-right:8px}.replay-main .attendance-row{padding:12px 0;border-bottom:1px solid #d8e2d6;overflow-wrap:anywhere}
.recording-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 16px}.replay-main .recording-card-actions>a.button,.replay-main .recording-card-actions>button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;padding:12px 22px;margin:0;border-radius:28px;line-height:1.25;text-align:center;white-space:normal;text-decoration:none}.replay-main .recording-card-actions>a.button{border:1px solid #244a39;background:#244a39;color:#fff}.replay-main .recording-card-actions>button{background:#e5efdc;color:#244a39}@media(max-width:540px){.recording-card-actions{flex-direction:column;align-items:stretch}.replay-main .recording-card-actions>a.button,.replay-main .recording-card-actions>button{width:100%}}.recording-control-preview{background:#f0f4e9;border-color:#b9cbae}.recording-control-preview h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:12px 0}.preview-control-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.preview-control-row button{margin:0;flex:1 1 180px}.preview-control-row .preview-record{background:#7fa78d;color:#143d2d}.preview-control-row .preview-record span{color:#9d352c}.recording-control-preview .preview-control-row button:disabled{opacity:1;color:#355744;cursor:default}.preview-status{font-weight:700;background:#fff;padding:12px 16px;border-radius:12px}.recording-inline[hidden]{display:none!important}
.device-screen{position:relative;background:#173e31;overflow:hidden;border-radius:18px;min-height:360px;height:min(70svh,680px);margin:20px 0}.replay-main .device-screen video{width:100%;height:100%;object-fit:contain;border-radius:0;transform:scaleX(-1)}.device-screen video[hidden]{display:none}.device-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#f5f4e8;text-align:center;padding:24px;box-sizing:border-box}.device-placeholder[hidden]{display:none}.device-placeholder span{font-size:48px;margin-bottom:20px}.device-placeholder p{max-width:260px;color:#d6e3d7}.replay-main .device-fullscreen{position:absolute;bottom:12px;right:12px;margin:0;background:#f3f5e9;z-index:2}.device-screen:not(.is-expanded){height:auto;min-height:0;aspect-ratio:4/3;max-width:1100px;margin-left:auto;margin-right:auto}.device-screen.is-expanded{position:fixed;inset:0;height:100dvh!important;min-height:0;border-radius:0;z-index:10000}.device-screen.is-expanded .device-fullscreen{bottom:calc(16px + env(safe-area-inset-bottom));right:16px}.device-expanded{overflow:hidden}#deviceMeter{display:block;width:100%;height:22px}#deviceStatus{font-weight:600}@media(max-width:480px){.recording-control-preview{padding:16px}.device-screen{margin-left:-8px;margin-right:-8px;min-height:380px}}