/* AZ=R Radio — mod kereta (sentiasa gelap). Satu skrin penuh: pemain + butang pantas kegemaran; senarai stesen dalam menu tepi. */
:root{
  --bg:#0a0a0c; --surface:#141417; --surface2:#1c1c20; --surface3:#27272c; --line:#2a2a30;
  --text:#f4f4f5; --muted:#9a9aa3; --faint:#62626b;
  --accent:#ff5b3a; --accent2:#ffb03a; --ok:#35c46a; --bad:#ef4b4b;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --pad:clamp(10px,2vmin,22px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
svg{width:22px;height:22px;fill:currentColor;flex:none}

.app{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--pad);padding:var(--pad);padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}

.ib{display:inline-grid;place-items:center;width:clamp(46px,8vmin,64px);height:clamp(46px,8vmin,64px);border-radius:50%;border:1px solid var(--line);background:var(--surface);transition:background .15s,transform .1s;padding:0}
.ib:active{transform:scale(.92);background:var(--surface3)}
.ib svg{width:42%;height:42%}
.ib.big{width:clamp(70px,14vmin,104px);height:clamp(70px,14vmin,104px);background:var(--text);color:var(--bg);border-color:var(--text)}
.ib.big svg{width:44%;height:44%}
.ib.sm{width:40px;height:40px;border:0;background:transparent}
.ib.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);font-weight:600;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn svg{width:18px;height:18px}

/* Bar atas */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.top-r{display:flex;gap:10px}
.clock{font-size:clamp(18px,3.4vmin,28px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:.02em}

/* Pemain */
.player{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:clamp(16px,3vmin,28px);background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,3vmin,30px);padding:clamp(14px,3.4vmin,36px)}
#viz{position:absolute;left:0;right:0;bottom:0;width:100%;height:55%;opacity:.3;pointer-events:none}
.p-main{position:relative;display:flex;gap:clamp(14px,3vmin,30px);align-items:center;min-width:0}
.p-logo{width:clamp(80px,22vmin,190px);aspect-ratio:1;border-radius:clamp(14px,3vmin,26px);background:var(--surface2);display:grid;place-items:center;overflow:hidden;flex:none;border:1px solid var(--line);font-size:clamp(32px,8vmin,70px)}
.p-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.p-logo .ini{font-weight:800;color:#fff}
.p-info{min-width:0;flex:1}
.p-status{display:flex;align-items:center;gap:8px;font-size:clamp(12px,2vmin,16px);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.p-status.live{color:var(--accent)} .p-status.live .dot{background:var(--accent);animation:pulse 1.4s infinite}
.p-status.load .dot{background:var(--accent2);animation:pulse .7s infinite}
.p-status.err{color:var(--bad)} .p-status.err .dot{background:var(--bad)}
@keyframes pulse{50%{opacity:.25}}
h1{margin:.15em 0 .05em;font-size:clamp(26px,7.5vmin,64px);line-height:1.08;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-meta{color:var(--muted);font-size:clamp(13px,2.4vmin,19px)}
.p-now{margin-top:clamp(6px,1.6vmin,14px);display:flex;align-items:center;gap:10px;min-width:0}
.p-now .lbl{flex:none;font-size:clamp(10px,1.8vmin,13px);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);padding:3px 9px;border-radius:999px}
#p-lagu{font-weight:600;font-size:clamp(14px,2.8vmin,22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-ctl{position:relative;display:flex;align-items:center;gap:clamp(10px,2.4vmin,22px);flex-wrap:wrap}
.vol{display:flex;align-items:center;gap:4px;margin-left:auto}
.vol input{width:clamp(110px,20vw,220px);accent-color:var(--accent);height:30px}
.sleep{position:relative;display:flex;align-items:center;gap:6px}
.sleep-left{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;min-width:200px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}
.menu-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 12px}
.menu button{border:0;background:none;text-align:left;padding:12px;border-radius:9px}
.menu button:active{background:var(--surface3)}
.menu button.off{color:var(--bad)}
.autobox{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:var(--surface2)}
.autobox div{flex:1;min-width:140px}
.autobox b{display:block}
.autobox small{color:var(--muted);font-variant-numeric:tabular-nums}

/* Butang pantas kegemaran */
.presets{flex:none;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(6px,1.4vmin,12px)}
.pr{display:flex;align-items:center;gap:8px;min-width:0;height:clamp(50px,9vmin,72px);padding:0 10px 0 6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left}
.pr:active{transform:scale(.97)}
.pr.cur{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.pr .no{flex:none;width:clamp(22px,4vmin,28px);text-align:center;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
.pr.cur .no{color:var(--accent)}
.pr .lg{width:clamp(34px,6.5vmin,50px);aspect-ratio:1;border-radius:10px;overflow:hidden;flex:none;display:grid;place-items:center}
.pr .lg img{width:100%;height:100%;object-fit:contain;background:#fff}
.pr .lg .ini{font-weight:800;color:#fff;font-size:14px}
.pr .nm{font-weight:650;font-size:clamp(12px,2.2vmin,16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.presets .hint{grid-column:1/-1;text-align:center;color:var(--muted);padding:14px;border:1px dashed var(--line);border-radius:14px}

/* Menu tepi */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.drawer{position:fixed;top:0;bottom:0;width:min(440px,92vw);z-index:31;background:var(--surface);display:flex;flex-direction:column;gap:10px;padding:14px;box-shadow:var(--shadow);transition:transform .25s ease,visibility .25s;visibility:hidden}
.drawer.kiri{left:0;border-right:1px solid var(--line);transform:translateX(-102%)}
.drawer.kanan{right:0;border-left:1px solid var(--line);transform:translateX(102%)}
.drawer.buka{transform:none;visibility:visible}
.d-head{display:flex;align-items:center;justify-content:space-between}
.d-head b{font-size:20px}
.d-head .ib{width:46px;height:46px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none}
.tabs button{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:9px 14px;font-weight:600;white-space:nowrap}
.tabs button.act{background:var(--text);color:var(--bg);border-color:var(--text)}
.tabs em{font-style:normal;opacity:.6;font-weight:500;margin-left:2px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface2);border-radius:12px;padding:0 12px;color:var(--muted);flex:none}
.search input{flex:1;border:0;background:none;color:var(--text);font:inherit;height:46px;outline:none;min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none}
.chips button{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}
.chips button.act{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;margin:0 -4px;padding:0 4px}
.st{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;border:1px solid var(--line);background:var(--surface2);border-radius:14px;padding:8px 6px 8px 8px;min-width:0;text-align:left;width:100%;flex:none}
.st:active{background:var(--surface3)}
.st.cur{border-color:var(--accent)}
.st.mati{opacity:.45}
.st .lg{width:46px;height:46px;border-radius:11px;flex:none;overflow:hidden;display:grid;place-items:center}
.st .lg img{width:100%;height:100%;object-fit:contain;background:#fff}
.st .ini{font-weight:800;color:#fff;font-size:16px}
.st .tx{min-width:0;flex:1}
.st .nm{display:flex;align-items:center;gap:7px;font-weight:650;overflow:hidden;white-space:nowrap}
.st .nm span{overflow:hidden;text-overflow:ellipsis}
.st .sb{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st .np{display:block;font-size:12.5px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st .bd{width:8px;height:8px;border-radius:50%;flex:none}
.st .bd.ok{background:var(--ok)} .st .bd.no{background:var(--bad)} .st .bd.chk{background:var(--accent2);animation:pulse .7s infinite}
.st .star{flex:none;width:48px;height:48px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--faint)}
.st .star svg{width:26px;height:26px}
.st .star.on{color:var(--accent2)}
.st .star:active{background:var(--surface3)}
.st .no{flex:none;font-size:11px;font-weight:800;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 15%,transparent);border-radius:6px;padding:1px 6px}
.empty{text-align:center;color:var(--muted);padding:30px 10px;border:1px dashed var(--line);border-radius:14px}
.d-foot{flex:none;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.scan-row{display:flex;gap:8px}
.scan-row .btn{flex:1}
.scan-info{color:var(--muted);font-size:12.5px}
.bar{height:6px;border-radius:9px;background:var(--surface3);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:var(--shadow);z-index:50;max-width:calc(100% - 32px);text-align:center}

/* Skrin menegak (telefon): susun ke bawah */
@media (orientation:portrait){
  .p-main{flex-direction:column;text-align:center}
  .p-logo{width:clamp(110px,38vw,220px)}
  .p-info{width:100%}
  .p-status,.p-now{justify-content:center}
  h1{font-size:clamp(26px,8vw,48px)}
  .p-ctl{justify-content:center}
  .vol{margin-left:0;width:100%;justify-content:center;order:9}
  .vol input{flex:1;max-width:320px}
  .presets{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .presets .pr:nth-child(n+7){display:none}
}
/* Skrin kereta rendah */
@media (orientation:landscape) and (max-height:520px){
  .app{gap:8px;padding:8px}
  .top .ib{width:44px;height:44px}
  .player{padding:12px 18px;gap:10px}
}
/* Menu tepi pada skrin rendah: lebih ruang untuk senarai */
@media (max-height:640px){
  .drawer{gap:7px;padding:10px 12px}
  .d-head b{font-size:17px}
  .d-head .ib{width:40px;height:40px}
  .tabs button{padding:7px 12px}
  .search input{height:40px}
  .st{min-height:56px;padding:5px 4px 5px 6px}
  .st .lg{width:40px;height:40px}
  .d-foot{padding-top:7px;gap:6px}
  .btn{min-height:42px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}