:root{--bg:#0b0c0e;--fg:#f4f5f7;--muted:#9a9ea6;--accent:#2EE6FF;--card:#15171b;--line:#2a2d31}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100dvh;padding:0 16px env(safe-area-inset-bottom)}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0 8px}
.brand{font-weight:900;font-size:1.25rem;color:var(--fg);text-decoration:none;letter-spacing:-.01em}.brand span{color:var(--accent)}
main{max-width:720px;margin:0 auto;padding-bottom:40px}
h1{font-size:1.5rem;margin:.2em 0}.muted{color:var(--muted)}.tiny{font-size:.75rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.login{margin-top:14vh}
label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
input[type=text],input[type=password],input:not([type]){display:block;width:100%;font:800 1.5rem ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--fg);background:#0b0c0e;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:6px}
button{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:#1d2025;color:var(--fg);padding:12px 18px}
button.primary{background:var(--accent);border-color:var(--accent);color:#06161a;font-weight:800;width:100%;margin-top:18px}
button.big{font-size:1.1rem;padding:16px}
button.ghost{background:transparent}
.error{color:#ff6b6b;margin:10px 0 0}
ul#perfs{list-style:none;padding:0;margin:18px 0}
#perfs li{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer}
#perfs img{width:96px;height:54px;object-fit:cover;border-radius:8px;background:#000}
#perfs .t{font-weight:700}#perfs .m{font-size:.8rem;color:var(--muted)}
.back{color:var(--muted);text-decoration:none;font-size:.9rem}
.stage{position:relative;margin-top:12px;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9}
video#vocal{width:100%;height:100%;display:block;background:#000}
.yt{position:absolute;right:8px;bottom:8px;width:34%;min-width:200px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000}
.yt iframe,#yt{width:100%;height:100%}
.yt-label{position:absolute;left:8px;top:6px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.7;pointer-events:none}
.controls{margin-top:14px}
.mix{display:flex;align-items:center;gap:10px;margin-top:14px;text-transform:none;letter-spacing:0;font-size:.85rem}
.mix input{flex:1;accent-color:var(--accent)}
@media (min-width:720px){.login{margin-top:10vh}}