:root{--bg: #191414;--panel: #1f1f1f;--text: #ffffff;--muted: #b7b7b7;--accent: #1db954;--danger: #ef4444;--radius: 16px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(circle at top right,#242424,var(--bg) 52%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--text)}#app{min-height:100vh}.app-shell{width:min(860px,100% - 2rem);margin:0 auto;padding:2.5rem 0}.panel{background:linear-gradient(160deg,#232323,var(--panel));border:1px solid #2f2f2f;border-radius:var(--radius);padding:1.25rem;box-shadow:0 20px 50px #00000040}.panel-header h1{margin:0;font-size:clamp(1.8rem,5vw,2.4rem)}.eyebrow{margin:0 0 .35rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.subtitle{margin:.45rem 0 0;color:var(--muted)}.status,.hint,.error{margin-top:1rem;padding:.75rem .9rem;border-radius:10px;line-height:1.3}.status{background:#171717;border:1px solid #2b2b2b}.hint{background:#1db9541f;border:1px solid rgba(29,185,84,.32)}.error{background:#ef444424;border:1px solid rgba(239,68,68,.4)}.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.btn{border:1px solid #3b3b3b;background:#121212;color:var(--text);padding:.75rem 1rem;border-radius:10px;font-size:.98rem;cursor:pointer;transition:transform .15s ease,border-color .2s ease,opacity .2s ease}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}.btn-ghost{background:transparent}.scanner-frame{position:relative;margin-top:1.1rem;border-radius:14px;overflow:hidden;border:1px solid #2f2f2f;background:#0f0f0f;min-height:220px}.scanner-video{width:100%;max-height:340px;object-fit:cover;background:#0d0d0d}.scan-box{position:absolute;inset:50% auto auto 50%;width:min(230px,60vw);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(29,185,84,.86);border-radius:14px;box-shadow:inset 0 0 0 1px #1db95452;opacity:.6}.scanning .scan-box{animation:pulse 1.3s ease-in-out infinite}.scanner-status{position:absolute;inset:auto 0 0;margin:0;padding:.65rem .8rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));font-size:.92rem}.player-panel{margin-top:1.2rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;background:#171717;border:1px solid #2f2f2f;border-radius:14px;padding:.9rem}.vinyl-wrap{width:74px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#333 0 27%,#121212 28% 59%,#000 60%);border:2px solid #2c2c2c}.vinyl-wrap.spinning{animation:spin 1.2s linear infinite}.vinyl-label{width:22px;height:22px;border-radius:50%;background:var(--accent);margin:24px auto}.track-mask .mask-title{margin:0;font-weight:700}.track-mask p{margin:.35rem 0 0;color:var(--muted)}code{background:#121212;border:1px solid #2f2f2f;border-radius:6px;padding:.08rem .35rem}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.04);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){.app-shell{width:min(860px,100% - 1rem);padding:1rem 0}.player-panel{grid-template-columns:1fr;justify-items:center;text-align:center}}