:root{--bg:#060d20;--panel:#0d1a3b;--panel2:#132654;--line:#284b92;--text:#f2f6ff;--muted:#97abdb;--blue:#33b7ff;--violet:#995dff;--pink:#ff4db2;--yellow:#ffca42;--green:#32dc88;--shadow:0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:14px;background:radial-gradient(circle at 20% 0%, #142862 0, #081430 45%, #030913 100%);font-family:Inter,system-ui,sans-serif;color:var(--text)}
.phone-shell{width:min(420px,100%);border-radius:44px;border:1px solid rgba(127,169,255,.35);background:#020611;padding:16px;box-shadow:0 25px 80px rgba(0,0,0,.65)}
.device-top{height:26px;width:140px;margin:0 auto 8px;border-radius:0 0 18px 18px;background:#020611;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.app{background:linear-gradient(180deg,#081430,#040b18);border-radius:32px;overflow:hidden;position:relative;min-height:860px;padding:18px 18px 94px}
.card{background:linear-gradient(180deg,rgba(16,30,70,.95),rgba(11,21,48,.96));border:1px solid rgba(94,153,255,.28);border-radius:24px;box-shadow:var(--shadow)}
.top-head,.simple-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.simple-head h2{margin:0;font-size:28px}.simple-head p{margin:2px 0 0;color:var(--muted);font-size:13px}.no-back{justify-content:space-between}.menu,.notif,.gear,.back{width:40px;height:40px;border-radius:14px;border:1px solid rgba(94,153,255,.3);background:rgba(255,255,255,.03);color:#fff;display:grid;place-items:center}.brand{font-weight:900;letter-spacing:.08em}.brand span{display:block;color:var(--blue);font-size:14px;margin-top:2px}.hero{display:flex;justify-content:space-between;align-items:center;padding:18px 18px;margin-bottom:14px;background:radial-gradient(circle at 80% 20%, rgba(177,76,255,.28), transparent 30%),linear-gradient(180deg,rgba(16,30,70,.98),rgba(11,21,48,.98))}.place{font-size:18px;font-weight:900}.conn{margin-top:8px;display:inline-flex;gap:8px;align-items:center;color:#b8ffe0;font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(15,100,61,.34);border:1px solid rgba(51,222,139,.28)}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.mic-glow{font-size:72px;filter:drop-shadow(0 0 18px rgba(177,76,255,.7))}
.search{display:flex;gap:10px;align-items:center;padding:14px 16px;margin-bottom:14px}.search input{background:transparent;border:0;outline:0;color:var(--text);font-size:15px;width:100%}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.mode{padding:14px 8px;border-radius:20px;border:1px solid rgba(94,153,255,.25);background:linear-gradient(180deg,#0d1b3e,#09132e);color:#cad6f7;font-weight:800;display:flex;flex-direction:column;gap:8px;align-items:center}.mode.on.blue{border-color:rgba(51,183,255,.9);box-shadow:0 0 0 1px rgba(51,183,255,.6) inset,0 0 24px rgba(51,183,255,.22)}.mode.violet{color:#d9ccff}.mode.pink{color:#ffc1ea}.mode.yellow{color:#ffe39a}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 10px;font-size:14px;font-weight:800}.section-title a{color:var(--blue);text-decoration:none}
.song-list,.queue-list,.menu-list{display:grid;gap:10px}.song,.queue-item,.profile,.qr-card,.menu-row{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit}.cover,.thumb{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#4c99ff,#132755)}.cover.peach,.thumb.peach{background:linear-gradient(135deg,#ffb16e,#8b2a5f)}.cover.sunset,.thumb.sunset{background:linear-gradient(135deg,#ff9259,#4323a8)}.cover.gold{background:linear-gradient(135deg,#ffd26e,#93631b)}.cover.coral,.thumb.coral{background:linear-gradient(135deg,#ff6049,#305dff)}.meta{display:grid;gap:4px;flex:1}.meta b{font-size:14px}.meta small{color:var(--muted);font-size:12px}.pick{padding:12px 14px;border-radius:14px;border:0;background:linear-gradient(180deg,#329bff,#2a67ea);color:#fff;font-weight:900}
.screen{display:none}.screen.active{display:block}
.bottom-nav{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;border-radius:22px;background:rgba(8,16,38,.92);border:1px solid rgba(94,153,255,.24);backdrop-filter:blur(10px)}.nav-item{background:transparent;border:0;color:#c4d0f2;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:5px}.nav-item.center{margin-top:-26px;background:linear-gradient(180deg,#b558ff,#6844ff);border-radius:999px;padding:12px 8px;box-shadow:0 10px 28px rgba(125,60,255,.45)}.nav-item.active{color:#fff}.nav-item.active:not(.center){color:var(--blue)}
.seg-tabs{display:grid;grid-template-columns:1fr 1fr;padding:6px;gap:8px;margin-bottom:14px}.seg-tabs button{padding:12px 8px;border-radius:16px;border:0;background:transparent;color:#cad6f7;font-weight:800}.seg-tabs .active{background:rgba(53,183,255,.16);color:var(--blue)}.rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0d2048;color:#fff;font-weight:900}.state{padding:8px 10px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}.state.waiting{color:#ffd36c;background:rgba(255,202,66,.14)}.state.ready{color:#7dffbf;background:rgba(51,222,139,.14)}.state.confirm{color:#7dc4ff;background:rgba(51,183,255,.14)}
.ready-box{padding:18px;margin:16px 0;text-align:center;background:radial-gradient(circle at 50% 0%, rgba(177,76,255,.36), transparent 35%),linear-gradient(180deg,rgba(16,30,70,.95),rgba(11,21,48,.96))}.ready-box .title{font-size:13px;font-weight:900;letter-spacing:.08em;color:#d7c9ff}.big-ready{margin-top:12px;width:100%;padding:18px;border-radius:18px;border:0;background:linear-gradient(90deg,#38b8ff,#b058ff);color:#fff;font-size:26px;font-weight:900}.ready-box p{font-size:12px;color:var(--muted)}
.mini-list{padding:10px 14px}.mini-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.mini-row:last-child{border-bottom:0}.mini-row span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#10224c}.mini-row b{font-size:14px}.mini-row small{color:var(--muted)}
.profile .avatar{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 35%, #ffcfb7, #e26d78 40%, #5c2bb1 75%);box-shadow:0 0 0 3px rgba(56,184,255,.55)}.pmeta{display:grid;gap:5px;flex:1}.pmeta b{font-size:28px}.pmeta small{color:#d1dcfb}.arrow{font-size:34px;color:#b9c7ee}.qr-card{padding:16px}.qr{width:106px;height:106px;border-radius:12px;background:linear-gradient(135deg,#fff,#d9e7ff);position:relative}.qr:before,.qr:after{content:"";position:absolute;background:#0a0a0d}.qr:before{inset:14px;background:repeating-linear-gradient(90deg,#000 0 8px,#fff 8px 16px),repeating-linear-gradient(#000 0 8px,#fff 8px 16px);mix-blend-mode:multiply;opacity:.86}.qmeta{display:grid;gap:8px;flex:1}.qmeta b{font-size:22px}.qmeta small{color:var(--muted);line-height:1.3}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.stat{padding:16px 10px;text-align:center}.stat b{display:block;font-size:28px}.stat small{color:#d5e0ff}.stat.violet{box-shadow:inset 0 0 0 1px rgba(177,76,255,.45)}.stat.green{box-shadow:inset 0 0 0 1px rgba(51,222,139,.45)}.stat.yellow{box-shadow:inset 0 0 0 1px rgba(255,202,66,.45)}
.menu-list{margin-top:10px}.menu-row{justify-content:space-between}.logout{margin-top:8px;padding:16px;border-radius:18px;border:1px solid rgba(255,89,110,.45);background:rgba(255,89,110,.12);color:#ff7d92;font-weight:900}
@media (max-width:420px){.app{min-height:820px;padding:16px 16px 90px}.modes{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:1fr}.pmeta b{font-size:24px}}