:root{--sc-bg: #111318;--sc-panel: #1b1f27;--sc-ink: #f2f4f8;--sc-muted: #9aa3b2;--sc-accent: #ffd54a;--sc-accent-ink: #1a1405;--sc-danger: #ff6b6b}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--sc-bg);color:var(--sc-ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}#root{height:100dvh;display:flex;flex-direction:column}.sc-screen{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}.sc-header{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--sc-panel);z-index:5}.sc-header h1{font-size:17px;margin:0;font-weight:650;letter-spacing:.2px}.sc-header .sc-sub{font-size:12px;color:var(--sc-muted);margin-top:2px}.sc-viewfinder{flex:1;position:relative;background:#000;overflow:hidden;min-height:0}.sc-viewfinder video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.sc-viewfinder .sc-frame{position:absolute;top:7%;right:6%;bottom:7%;left:6%;border:2px dashed rgba(255,213,74,.75);border-radius:12px;pointer-events:none}.sc-viewfinder .sc-frame:after{content:"Fit the staff inside the frame";position:absolute;top:-30px;left:0;right:0;text-align:center;font-size:13px;color:var(--sc-accent);text-shadow:0 1px 4px #000}.sc-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 16px calc(20px + env(safe-area-inset-bottom));background:var(--sc-panel)}.sc-shutter{width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:var(--sc-accent);cursor:pointer;box-shadow:0 2px 12px #00000080}.sc-shutter:active{transform:scale(.94)}.sc-shutter:disabled{opacity:.5}.sc-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #3a4150;background:#262c38;color:var(--sc-ink);border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;cursor:pointer}.sc-btn:active{transform:scale(.97)}.sc-btn.primary{background:var(--sc-accent);border-color:var(--sc-accent);color:var(--sc-accent-ink)}.sc-btn.ghost{background:transparent}.sc-btn:disabled{opacity:.5}.sc-notice{margin:12px 16px;padding:14px;border-radius:12px;background:#2a1f1f;border:1px solid #5a3636;font-size:14px;line-height:1.5}.sc-notice.warn{background:#2a2517;border-color:#5a4f26}.sc-scan-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}.sc-scan-stage img{max-width:78%;max-height:46dvh;border-radius:10px;box-shadow:0 4px 24px #0009}.sc-spinner{width:44px;height:44px;border-radius:50%;border:4px solid #3a4150;border-top-color:var(--sc-accent);animation:sc-spin .9s linear infinite}@keyframes sc-spin{to{transform:rotate(360deg)}}.sc-stage{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:12px 12px 4px;background:#0b0d11}.sc-sheet-wrap{position:relative;width:100%;max-width:860px;line-height:0}.sc-sheet-wrap img{width:100%;height:auto;display:block;border-radius:8px;user-select:none;-webkit-user-select:none}.sc-note-box{position:absolute;border:2px solid rgba(255,213,74,.28);border-radius:3px;background:#ffd54a1a;transition:background 90ms linear,border-color 90ms linear,box-shadow 90ms linear;pointer-events:none}.sc-note-box.active{background:#ffd54a8c;border-color:var(--sc-accent);box-shadow:0 0 10px #ffd54ae6;z-index:2}.sc-transport{width:100%;max-width:860px;background:var(--sc-panel);border-radius:14px;margin:12px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}.sc-transport-row{display:flex;align-items:center;gap:10px}.sc-play{width:56px;height:56px;border-radius:50%;border:none;background:var(--sc-accent);color:var(--sc-accent-ink);font-size:22px;font-weight:800;cursor:pointer;flex:none}.sc-play:disabled{opacity:.45}.sc-time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--sc-muted);white-space:nowrap}.sc-seek{flex:1;accent-color:var(--sc-accent);height:32px}.sc-warnings{font-size:12.5px;color:var(--sc-muted);line-height:1.5}.sc-status{font-size:13px;color:var(--sc-muted);text-align:center;padding:4px 0}.sc-error{color:var(--sc-danger)}