@import "https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap";:root{--bg:#121417;--surface:#1b1e23;--surface-raised:#23272e;--border:#2d323a;--text:#f2f3ee;--text-muted:#868c96;--accent:#d7ff3d;--accent-contrast:#12140f;--danger:#ff5c5c;--font-display:"Anton", "Arial Narrow", sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0}button{font-family:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.login-screen{background:repeating-linear-gradient(-45deg, #ffffff04 0px, #ffffff04 2px, transparent 2px, transparent 14px), var(--bg);justify-content:center;align-items:center;min-height:100%;padding:24px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:380px;padding:32px 28px 28px}.login-brand{font-family:var(--font-display);letter-spacing:.5px;flex-wrap:wrap;gap:6px;font-size:28px;line-height:1;display:flex}.login-brand__mark{color:var(--text)}.login-brand__mark--accent{color:var(--accent)}.login-subtitle{color:var(--text-muted);margin:8px 0 28px;font-size:14px}.login-form{flex-direction:column;display:flex}.login-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px;font-size:12px}.login-input{background:var(--surface-raised);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;margin-bottom:20px;padding:12px 14px;font-size:16px}.login-input:focus{border-color:var(--accent)}.pin-display{gap:12px;margin-bottom:8px;display:flex}.pin-dot{border:1.5px solid var(--border);background:0 0;border-radius:50%;width:14px;height:14px;transition:background .15s,border-color .15s}.pin-dot--filled{background:var(--accent);border-color:var(--accent)}.login-error{color:var(--danger);margin:10px 0 0;font-size:13px}.keypad{grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 24px;display:grid}.keypad__key{border:1px solid var(--border);background:var(--surface-raised);height:56px;color:var(--text);cursor:pointer;border-radius:10px;font-size:20px;font-weight:600;transition:background .12s,transform 80ms}.keypad__key:hover{background:#2a2f37}.keypad__key:active{transform:scale(.96)}.keypad__key--utility{color:var(--text-muted);font-size:13px}.login-submit{background:var(--accent);height:52px;color:var(--accent-contrast);cursor:pointer;border:none;border-radius:10px;font-size:16px;font-weight:700;transition:opacity .12s}.login-submit:disabled{opacity:.4;cursor:not-allowed}.login-submit:not(:disabled):hover{opacity:.92}.reel-form-screen{max-width:640px;min-height:100%;margin:0 auto;padding:24px 16px 64px}.reel-form-header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.reel-form-eyebrow{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 2px;font-size:12px}.reel-form-name{font-family:var(--font-display);color:var(--accent);margin:0;font-size:26px}.reel-form-logout{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:8px;padding:8px 14px;font-size:13px}.reel-form-logout:hover{border-color:var(--accent)}.reel-form{flex-direction:column;gap:28px;display:flex}.reel-section{flex-direction:column;gap:12px;display:flex}.reel-section__title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0;font-size:12px}.pill-row{flex-wrap:wrap;gap:8px;display:flex}.pill{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.pill:hover:not(:disabled){border-color:var(--accent)}.pill:disabled{opacity:.35;cursor:not-allowed}.pill--active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.reel-input{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;padding:12px 14px;font-size:15px}.reel-input:focus{border-color:var(--accent)}.track-list{flex-direction:column;gap:8px;display:flex}.track-row{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;padding:12px 14px;transition:border-color .12s,background .12s;display:flex}.track-row:hover{border-color:var(--accent)}.track-row--active{border-color:var(--accent);background:var(--surface-raised)}.track-row__label{font-size:14px;font-weight:500}.track-row__play{border:1px solid var(--border);width:32px;height:32px;color:var(--text);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:flex}.track-row__play:hover{border-color:var(--accent);color:var(--accent)}.clip-slots{flex-direction:column;gap:8px;display:flex}.clip-slot{border:1px dashed var(--border);background:var(--surface);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:14px;display:flex;position:relative}.clip-slot:hover{border-color:var(--accent)}.clip-slot__number{background:var(--surface-raised);width:24px;height:24px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.clip-slot__text{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.clip-slot__input{opacity:0;cursor:pointer;position:absolute;inset:0}.reel-submit{background:var(--accent);height:52px;color:var(--accent-contrast);cursor:pointer;border:none;border-radius:10px;font-size:16px;font-weight:700}.reel-submit:disabled{opacity:.4;cursor:not-allowed}.reel-status{text-align:center;margin:-12px 0 0;font-size:13px}.reel-status--ok{color:var(--accent)}.reel-status--error{color:var(--danger)}