:root{--bg:#0f0b1f;--panel:#1b1535;--panel2:#2a2152;--line:#3a2f6b;--text:#f6f3ff;--mut:#a9a0cf;--pink:#ff3d9a;--cyan:#2be3ff;--gold:#ffc83d;--ok:#3ddc97;--bad:#ff5d6c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#0f0b1f;background-image:radial-gradient(900px 500px at 15% -10%,#3b1670 0%,transparent 60%),radial-gradient(700px 400px at 100% 0%,#0b3b57 0%,transparent 55%);background-attachment:fixed;color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{margin:0 0 10px;line-height:1.15}
h1{font-size:26px}h2{font-size:18px}h3{font-size:14px;color:var(--mut);margin-top:16px}
p{margin:6px 0}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 48px}
.card{background:rgba(27,21,53,.93);border:1px solid var(--line);border-radius:18px;padding:16px;margin:0 0 14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.hidden{display:none!important}
.mut{color:var(--mut)}.small{font-size:13px}.ok{color:var(--ok)}.bad{color:var(--bad)}
.err{color:var(--bad);min-height:1.2em}
.msg{min-height:1.2em;font-size:14px;color:var(--mut);margin:8px 0 0}
.msg.ok{color:var(--ok)}.msg.err{color:var(--bad)}

label{display:block;font-size:13px;color:var(--mut);margin:12px 0 0}
input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#120d2a;color:var(--text);font:inherit}
input:focus{outline:2px solid var(--cyan);outline-offset:1px}
label input{margin-top:6px}

.btn{appearance:none;-webkit-appearance:none;border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:700;color:var(--text);background:var(--panel2);cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--pink),#a53dff)}
.btn.danger{background:#5a1b2b;color:#ffd7dd}
.btn.big{display:block;width:100%;margin-top:14px;padding:15px;font-size:17px}
.btn:disabled,.icon:disabled{opacity:.35}
.row{display:flex;flex-wrap:wrap;margin:0 -4px}
.row>*{margin:4px}

.top{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.top small{color:var(--mut);font-weight:400;margin-left:4px}
.dot{width:12px;height:12px;border-radius:50%;background:#777}
.dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}.dot.off{background:var(--bad)}

.banner{border-radius:14px;padding:12px 14px;margin:0 0 14px;background:var(--panel2);border:1px solid var(--line)}
.banner.hot{background:linear-gradient(135deg,#ff3d9a,#a53dff);border:0;font-weight:700}

#stage{text-align:center}
.big{font-size:44px;line-height:1}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
.singer{font-size:30px;font-weight:800;line-height:1.1;word-break:break-word}
.title{color:var(--mut);margin-top:6px}
.score{font-size:64px;font-weight:900;color:var(--gold);line-height:1.1}
.pill{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:99px;background:var(--panel2);font-size:13px}
.stars{display:flex;margin:14px -4px 6px}
.star{flex:1;margin:0 4px;height:62px;border-radius:14px;border:1px solid var(--line);background:#120d2a;color:var(--text);font:800 26px system-ui;cursor:pointer}
.star.sel{background:linear-gradient(135deg,var(--gold),#ff8a3d);color:#2a1500;border-color:transparent}

.duo{margin-top:12px}
.chk{display:flex;align-items:center;margin:0;color:var(--text);font-size:15px}
.chk input{width:22px;height:22px;margin:0 10px 0 0;flex:none}
select{width:100%;margin-top:10px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#120d2a;color:var(--text);font:inherit}
.banner.invite{background:var(--panel2);border:1px solid var(--cyan)}
.banner.invite .row{margin-top:10px}
.banner.invite .btn:not(.primary){background:#3f3478}
#addForm,#searchForm{display:flex}
#addForm input,#searchForm input{flex:1;width:auto;min-width:0}
#addForm .btn,#searchForm .btn{margin-left:8px;white-space:nowrap}
#sayForm{display:flex;margin-top:12px}
#sayForm input{flex:1;width:auto;min-width:0}
#sayForm .btn{margin-left:8px;white-space:nowrap}
.reacts{display:flex;margin:0 -4px}
.react{flex:1;margin:0 4px;height:58px;border-radius:14px;border:1px solid var(--line);background:#120d2a;font-size:28px;cursor:pointer;color:var(--text);padding:0}
.react:active{transform:scale(.92);background:var(--panel2)}
.hist li{align-items:center}
.hist .n2{flex:none;margin-left:8px;color:var(--mut);font-size:12px;white-space:nowrap}
.results{list-style:none;margin:0 0 6px;padding:0}
.results li{display:flex;align-items:center;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.results li:first-child{border-top:0}
.results img{width:96px;height:54px;object-fit:cover;border-radius:8px;flex:none;margin-right:10px;background:#120d2a}
.results .t{white-space:normal;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.list,.rank{list-style:none;margin:0;padding:0}
.list li,.rank li{display:flex;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child,.rank li:first-child{border-top:0}
.list .n{width:26px;color:var(--mut);font-weight:700}
.list .mine .t{color:var(--cyan)}
.grow{flex:1;min-width:0}
.t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s{font-size:13px;color:var(--mut)}
.empty{color:var(--mut);justify-content:center}
.icon{appearance:none;-webkit-appearance:none;border:0;background:var(--panel2);color:var(--text);width:38px;height:38px;border-radius:10px;margin-left:6px;font-size:16px;cursor:pointer}
.icon.bad{color:var(--bad)}

.rank .medal{width:34px;font-size:20px}
.rank .pts{font-weight:800;font-size:18px;color:var(--gold);margin-left:8px}
.rank small{display:block;color:var(--mut);font-size:12px}

.kv{margin:10px 0 0;font-size:14px;color:var(--mut)}
.copyrow{display:flex;margin-top:6px}
.copyrow input{flex:1;width:auto;min-width:0;font-size:13px}
.copyrow .btn{margin-left:8px}
.guests{list-style:none;margin:0;padding:0}
.guests li{display:flex;align-items:center;padding:6px 0}

.two{display:block}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);background:#000d;color:#fff;padding:12px 16px;border-radius:12px;max-width:90vw;opacity:0;transition:.25s;pointer-events:none;z-index:9;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
a{color:var(--cyan)}
.banner .rl{margin:8px 0}
.banner .rl .btn{text-align:left;font-weight:600;font-size:14px;background:rgba(0,0,0,.28);width:100%}
.banner .small{font-size:13px;opacity:.9}
.hist .histmore{justify-content:center;color:var(--cyan);text-align:center}

#ytForm{display:flex}
#ytForm input{flex:1;width:auto;min-width:0}
#ytForm .btn{margin-left:8px;white-space:normal;line-height:1.1}
#pasteBtn{margin-top:0}