:root{--bg:#050a07;--fg:#00ff66;--fg2:#aaffcc;--card:#0a1510;--border:#143d26;--focus:#00ff66;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:#e6ffe6;font-family:Arial,Helvetica,sans-serif;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;}
.hidden{display:none !important;}
.box{margin:auto;text-align:center;max-width:460px;padding:32px;}
.logo{height:110px;border-radius:22px;margin-bottom:22px;box-shadow:0 0 40px rgba(0,255,102,.25);}
h1{color:var(--fg);font-size:38px;margin-bottom:8px;}
h2{color:var(--fg);font-size:28px;margin-bottom:18px;}
p{color:var(--fg2);font-size:16px;margin-bottom:18px;line-height:1.5;}
input[type=text],input[type=search],input[type=password]{width:100%;padding:14px;border-radius:10px;border:1px solid #0a4;background:#020;color:#dff;font-size:16px;margin-bottom:12px;}
input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(0,255,102,.25);}
button{background:var(--fg);color:#000;border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:800;cursor:pointer;transition:filter .15s;}
button:hover,button:focus{filter:brightness(1.1);outline:none;box-shadow:0 0 0 3px rgba(0,255,102,.3);}
button.secondary{background:transparent;color:var(--fg);border:1px solid var(--fg);}
.error{color:#ff8888;font-size:14px;margin-top:6px;min-height:20px;}
.status{color:var(--fg2);font-size:14px;margin-top:10px;min-height:20px;}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.qr{width:240px;height:240px;background:#fff;border-radius:14px;margin:10px auto;display:block;}

.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--card);border-bottom:1px solid var(--border);gap:16px;}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);font-size:22px;font-weight:800;}
.brand img{height:34px;border-radius:8px;}
.demo-pill{margin-left:12px;background:#4a3208;color:#ffd24a;border:1px solid #7a6210;border-radius:99px;padding:4px 12px;font-size:12px;vertical-align:middle;}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.toolbar input{min-width:220px;width:260px;margin:0;}

main{flex:1;overflow:auto;padding:24px;}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.empty{text-align:center;padding:60px;color:var(--fg2);font-size:18px;}
.item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:transform .12s,border-color .12s;}
.item:hover,.item:focus{transform:translateY(-3px);border-color:var(--focus);outline:none;box-shadow:0 0 0 2px rgba(0,255,102,.2);}
.item .name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .singer{font-size:14px;color:var(--fg2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .folder{font-size:12px;color:#6a9;margin-top:8px;}
.item.fav .name::after{content:' ★';color:var(--fg);}
.item.queue{border-color:#4a4a00;background:#0f1205;}
.item.locked{opacity:.45;pointer-events:none;}

#screen-player{background:#000;}
#video{width:100%;height:100%;object-fit:contain;background:#000;}
.osd{position:absolute;left:0;right:0;bottom:0;padding:20px 24px 28px;background:linear-gradient(transparent,rgba(0,0,0,.9));}
.osd-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:10px;}
.osd-bar{height:6px;background:#333;border-radius:99px;overflow:hidden;margin-bottom:14px;}
.osd-progress{height:100%;width:0%;background:var(--fg);}
.osd-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#031;border:1px solid var(--fg);color:var(--fg);padding:12px 24px;border-radius:10px;font-weight:700;z-index:100;}

@media(max-width:760px){
  .topbar{flex-direction:column;align-items:stretch;padding:12px;}
  .toolbar input{width:100%;}
  .results{grid-template-columns:1fr;}
}