:root{
  --bg:#0a0e11;
  --panel:#161c21;
  --panel2:#1e262c;
  --holo:#33b5e5;
  --holo-dim:#1c6c8f;
  --text:#e8f2f7;
  --muted:#7c9aa8;
  --green:#39d353;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Bricolage Grotesque',sans-serif;
  background:
    radial-gradient(circle at 20% 0%, #14313d 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, #1a1030 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:24px;
}

/* Status bar */
#statusbar{
  width:100%; background:#05090b; color:#9fb6c1;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 12px; letter-spacing:0.5px;
  border-bottom:1px solid #1c2a30;
}
.os-label{font-weight:700;color:var(--holo);}
.status-icons{display:flex; gap:10px; align-items:center;}
.signal{color:var(--holo); letter-spacing:-2px;}

.screen{width:100%; display:flex; justify-content:center; padding:18px 14px;}
.hidden{display:none !important;}

/* Install card */
.install-card{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid #26333b; border-radius:22px;
  padding:30px 26px; max-width:380px; width:100%;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:pop .4s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.app-icon{
  font-size:64px; width:104px; height:104px; margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--holo),#1a5f7a);
  border-radius:26px; box-shadow:0 8px 24px rgba(51,181,229,.4);
}
.app-title{font-size:34px; font-weight:800; letter-spacing:-1px;}
.app-version{color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:13px; margin-top:2px;}
.working-badge{
  background:var(--green); color:#062a10; font-weight:700;
  padding:1px 6px; border-radius:5px; font-size:10px; margin-left:4px;
}
.app-dev{color:var(--muted); font-size:12px; margin-top:6px;}

.permissions{
  text-align:left; margin:18px 0; background:#0e1418;
  border:1px solid #202b31; border-radius:12px; padding:12px 14px;
}
.perm-title{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;}
.permissions ul{list-style:none;}
.permissions li{font-size:13px; padding:3px 0; color:#cddde4;}
.permissions li::before{content:"›"; color:var(--holo); margin-right:8px; font-weight:700;}

#install-btn{
  width:100%; padding:15px; border:none; border-radius:12px;
  background:var(--green); color:#052710; font-size:17px; font-weight:800;
  letter-spacing:1px; cursor:pointer; transition:transform .1s, filter .2s;
}
#install-btn:active{transform:scale(.97);}
#install-btn:hover{filter:brightness(1.1);}

#install-progress-wrap{margin-top:16px;}
.progress-track{height:8px; background:#0c1216; border-radius:6px; overflow:hidden;}
#install-bar{height:100%; width:0; background:linear-gradient(90deg,var(--holo),var(--green)); transition:width .1s linear;}
#install-status{font-size:12px; color:var(--holo); margin-top:8px; font-family:'JetBrains Mono',monospace;}
.skip-install{display:block; margin-top:14px; font-size:11px; color:var(--muted); cursor:pointer;}
.skip-install input{vertical-align:middle;}

/* Player card */
.player-card{
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  border:1px solid #26333b; border-radius:22px;
  padding:20px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:pop .4s ease;
}
#canvas{
  width:100%; aspect-ratio:1/1; max-width:340px; margin:0 auto 4px;
  display:block; border-radius:18px; background:#04070a;
  border:1px solid #1c2a30;
}
.track-meta{text-align:center; margin:10px 0 4px;}
#track-title{font-size:20px; font-weight:800; letter-spacing:-.5px;}
#track-artist{font-size:13px; color:var(--muted);}

.seek-row{display:flex; align-items:center; gap:10px; margin:14px 2px 8px;}
.seek-row span{font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace; min-width:34px;}
.seek-track{flex:1; height:6px; background:#0c1216; border-radius:6px; position:relative; cursor:pointer;}
#seek-fill{height:100%; width:0; background:var(--holo); border-radius:6px;}
#seek-knob{position:absolute; top:50%; left:0; width:14px; height:14px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 8px var(--holo);}

#controls{display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 14px;}
.ctrl{
  background:#0e1418; border:1px solid #24313a; color:var(--text);
  width:52px; height:52px; border-radius:50%; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s, background .2s;
}
.ctrl:active{transform:scale(.9);}
.ctrl.main{
  width:70px; height:70px; font-size:26px;
  background:linear-gradient(135deg,var(--holo),#1a6c8f); border:none; color:#04141b;
}
.ctrl.toggle{width:44px; height:44px; font-size:16px;}
.ctrl.toggle.active{background:var(--holo-dim); border-color:var(--holo); color:#fff;}

.volume-row{display:flex; align-items:center; gap:10px; margin:6px 0 12px;}
.vol-icon{font-size:16px;}
#volume{flex:1; accent-color:var(--holo); cursor:pointer;}
#load-btn{
  background:#0e1418; border:1px solid #24313a; color:var(--holo);
  padding:8px 12px; border-radius:10px; font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
#load-btn:active{transform:scale(.96);}

.playlist{max-height:200px; overflow-y:auto; border-top:1px solid #1c2a30; padding-top:8px;}
.pl-row{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px;
  cursor:pointer; transition:background .15s;
}
.pl-row:hover{background:#0e1418;}
.pl-row.active{background:linear-gradient(90deg,#0e2a36,#0e1418); border:1px solid var(--holo-dim);}
.pl-icon{font-size:16px; width:20px; text-align:center;}
.pl-info{display:flex; flex-direction:column; overflow:hidden;}
.pl-info b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pl-info small{font-size:11px; color:var(--muted);}

.footer{margin-top:16px; text-align:center; font-size:11px; color:var(--muted); border-top:1px solid #1c2a30; padding-top:12px;}
.footer a{color:var(--holo); text-decoration:none; font-weight:700;}
.footer a:hover{text-decoration:underline;}
.footer .joke{display:block; margin-top:5px; font-style:italic; opacity:.7;}

#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--green); color:#052710; padding:12px 22px; border-radius:30px;
  font-weight:800; font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0; transition:opacity .3s, transform .3s; z-index:100;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:440px){
  .app-title{font-size:28px;}
  .ctrl{width:46px;height:46px;font-size:18px;}
  .ctrl.main{width:62px;height:62px;font-size:24px;}
}