:root{--bg:#0f0f13;--surface:#1a1a24;--surface2:#22222f;--accent:#6c63ff;--accent2:#ff6584;--green:#1db954;--red:#ff0000;--text:#e8e8f0;--muted:#9898b2;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:16px;min-height:100vh;display:flex;flex-direction:column;align-items:center;}
header{width:100%;padding:16px 32px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative;}
.logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.logo img{width:36px;height:36px;object-fit:contain;}
header h1{font-size:26px;font-weight:800;font-family:'Montserrat',sans-serif;letter-spacing:-0.5px;}
header h1 a{color:inherit;text-decoration:none;}
header h1 a:hover{opacity:0.85;}
header h1 span.play-mark{color:var(--accent);}
header .right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.player-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;flex-shrink:0;padding-left:20px;border-left:1px solid rgba(255,255,255,0.07);} .player-clock .pc-time{font-size:26px;font-weight:700;color:var(--text);letter-spacing:2px;line-height:1;} .player-clock .pc-day{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:1.2px;} .player-clock .pc-date{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.gear-btn{background:none;border:none;cursor:pointer;opacity:0.45;transition:opacity .2s,transform .2s;padding:4px;display:flex;align-items:center;justify-content:center;}
.gear-btn:hover{opacity:1;}
.gear-btn svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.gear-btn.active{opacity:1;}

/* Admin session pill (v headeru) */
#adminSessionBar{flex:1;display:flex;justify-content:center;align-items:center;}
#adminSessionBar .asb-pill{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:6px 14px 6px 11px;font-size:13px;user-select:none;transition:background .3s,border-color .3s;white-space:nowrap;}
#adminSessionBar .asb-pill.locked{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);cursor:pointer;}
#adminSessionBar .asb-pill.locked:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);}
#adminSessionBar .asb-pill.locked svg{opacity:.5;}
#adminSessionBar .asb-pill.unlocked{background:rgba(108,99,255,.13);border:1px solid rgba(108,99,255,.28);color:rgba(255,255,255,.75);}
#adminSessionBar .asb-pill svg{flex-shrink:0;}
#adminSessionBar .asb-timer{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;letter-spacing:.3px;margin-left:5px;}
#adminSessionBar .asb-pill.expiring{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08);}
#adminSessionBar .asb-pill.expiring .asb-timer{color:#fbbf24;}
#adminSessionBar{gap:10px;}
#alarmHeaderBadge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:6px 13px 6px 10px;font-size:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.32);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
#alarmHeaderBadge:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);}
#alarmHeaderBadge.alarm-active{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3);color:rgba(255,255,255,.82);}
#alarmHeaderBadge.alarm-active svg{stroke:#fbbf24;}
#alarmHeaderBadge.alarm-ringing{animation:alarm-pulse .7s ease-in-out infinite;color:#fbbf24;border-color:rgba(251,191,36,.5);}
#alarmHeaderBadge.alarm-ringing svg{stroke:#fbbf24;}
#ahbTimer{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.3px;}
/* Tabs */
.tabs{display:flex;gap:8px;padding:24px 24px 16px;width:min(900px,100%);align-items:center;}
.tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;line-height:1;}
.tab svg{flex-shrink:0;}
.tab:hover:not(.active){background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);}
.tab.tab-radio.active{background:rgba(108,99,255,.14);border-color:rgba(108,99,255,.4);color:var(--accent);}
.tab.tab-spotify.active{background:rgba(29,185,84,.13);border-color:rgba(29,185,84,.35);color:#1db954;}
.tab.tab-youtube.active{background:rgba(255,68,68,.13);border-color:rgba(255,68,68,.35);color:#ff4444;}
.tab.tab-weather.active{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.35);color:#38bdf8;}
.tab.tab-info.active{background:rgba(251,191,36,.11);border-color:rgba(251,191,36,.32);color:#fbbf24;}
.tab-gap{flex:1;}

/* ─── Info panel ─── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:22px;}
.info-card{background:var(--surface2);border-radius:12px;padding:14px 16px 16px;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:0;}
.info-card-label{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.1px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07);}
.info-card-value{font-size:26px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:6px;}
.info-card.warn .info-card-value{color:#fb923c;}
.info-card.hot .info-card-value{color:#f87171;}
.info-bar-wrap{margin-bottom:8px;}
.info-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.info-bar-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .5s ease;}
.info-bar-fill.warn{background:#fb923c;}
.info-bar-fill.crit{background:#f87171;}
.info-rows{display:flex;flex-direction:column;gap:5px;}
.info-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-left:8px;}
.info-row-name{font-size:11px;color:var(--muted);flex-shrink:0;}
.info-row-val{font-size:12px;color:var(--text);font-weight:500;text-align:right;}
.info-section-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.info-section-title span{flex:1;}
.info-refresh-btn{background:none;border:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:11px;padding:3px 10px;border-radius:6px;cursor:pointer;transition:all .2s;}
.info-refresh-btn:hover{border-color:rgba(255,255,255,.2);color:var(--text);}
.speedtest-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:12px;color:#fbbf24;font-size:15px;font-weight:600;cursor:pointer;transition:all .25s;margin-bottom:18px;}
.speedtest-btn:hover:not(:disabled){background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.4);}
.speedtest-btn:disabled{opacity:.5;cursor:not-allowed;}
.speedtest-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.st-metric{background:var(--surface2);border-radius:12px;padding:14px 12px;text-align:center;border:1px solid rgba(255,255,255,.05);}
.st-metric-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;margin-bottom:6px;}
.st-metric-value{font-size:24px;font-weight:800;color:var(--text);line-height:1;}
.st-metric-unit{font-size:11px;color:var(--muted);margin-top:3px;}
.st-metric.active .st-metric-value{color:#fbbf24;}
.st-history-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;margin-bottom:10px;}
.st-history-row{display:grid;grid-template-columns:1fr 90px 90px 70px;gap:8px;align-items:center;padding:8px 12px;background:var(--surface2);border-radius:8px;margin-bottom:6px;font-size:12px;border:1px solid rgba(255,255,255,.04);}
.st-history-row .st-h-time{color:var(--muted);}
.st-history-row .st-h-val{font-weight:600;color:var(--text);text-align:right;}
.st-history-row .st-h-ping{color:var(--muted);text-align:right;font-size:11px;}

.main{width:min(900px,100%);padding:0 24px 32px;display:flex;flex-direction:column;gap:24px;min-height:calc(100vh - 130px);}

/* Player card */
.player-card{background:var(--surface);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;gap:18px;margin-top:0;}
.now-playing{display:flex;align-items:center;gap:20px;}
.station-art{width:72px;height:72px;border-radius:14px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;border:1px solid rgba(255,255,255,0.06);overflow:hidden;}
.station-art img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.station-info{flex:1;min-width:0;}
.station-info .label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);font-weight:600;margin-bottom:4px;}
.station-info h2{font-size:22px;font-weight:700;font-family:'Montserrat',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.station-info .meta{font-size:15px;font-family:'Montserrat',sans-serif;font-weight:600;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;flex-shrink:0;}
.badge-live{background:rgba(255,101,132,0.15);color:var(--accent2);border:1px solid rgba(255,101,132,0.25);}
.badge-spotify{background:rgba(29,185,84,0.15);color:var(--green);border:1px solid rgba(29,185,84,0.25);}
.badge-youtube{background:rgba(255,0,0,0.12);color:#ff4444;border:1px solid rgba(255,0,0,0.2);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.visualizer-wrap{display:flex;flex-direction:column;gap:8px;}
.visualizer{width:100%;height:64px;display:block;border-radius:8px;}
.viz-picker{display:flex;gap:6px;align-items:center;}
.viz-btn{background:var(--surface2);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px;color:var(--muted);transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.viz-btn:hover{border-color:rgba(108,99,255,.4);color:var(--text);}
.viz-btn.active{background:rgba(108,99,255,.15);border-color:var(--accent);color:var(--accent);}
.viz-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-right:2px;}
.controls{display:flex;align-items:center;gap:16px;}
.btn-play{width:52px;height:52px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;flex-shrink:0;box-shadow:0 4px 20px rgba(108,99,255,.4);}
.btn-play:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(108,99,255,.5);}
.btn-play svg{fill:white;width:20px;height:20px;}
.btn-play.spotify-mode{background:var(--green);box-shadow:0 4px 20px rgba(29,185,84,.4);}
.btn-play.youtube-mode{background:#ff4444;box-shadow:0 4px 20px rgba(255,68,68,.4);}
.volume-wrap{display:flex;align-items:center;gap:10px;flex:1;}
.vol-icon-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--muted);display:flex;align-items:center;flex-shrink:0;transition:color .15s,opacity .15s;opacity:.75;}
.vol-icon-btn:hover{opacity:1;color:var(--text);}
input[type=range]{-webkit-appearance:none;flex:1;height:4px;border-radius:4px;background:var(--surface2);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px rgba(108,99,255,.25);}
.vol-value{font-size:12px;color:var(--muted);width:42px;text-align:right;flex-shrink:0;cursor:pointer;border-radius:4px;padding:1px 3px;}
.vol-value:hover{background:var(--surface2);color:var(--fg);}
#volInput{width:46px;font-size:12px;background:var(--surface2);border:1px solid var(--accent);color:var(--fg);border-radius:4px;padding:1px 4px;text-align:right;outline:none;flex-shrink:0;}
.vol-reset-btn{background:none;border:none;color:var(--muted);cursor:pointer;flex-shrink:0;padding:2px 3px;line-height:1;display:flex;align-items:center;opacity:.7;transition:color .15s,opacity .15s;}
.vol-reset-btn:hover{color:var(--text);opacity:1;}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--surface2);border:1px solid rgba(255,255,255,.1);color:var(--text);font-size:13px;padding:10px 18px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;white-space:nowrap;z-index:9999;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.status-bar{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding-top:2px;}
.alarm-btn{background:none;border:none;padding:0 0 0 6px;cursor:pointer;color:var(--muted);opacity:.75;transition:opacity .15s,color .15s;line-height:1;display:inline-flex;align-items:center;}
.alarm-btn:hover{opacity:1;color:var(--text);}
.alarm-btn.active{color:#facc15;opacity:1;}
/* Alarm modal — redesign */
.am-header{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:22px;}
.am-header-icon{width:48px;height:48px;border-radius:14px;background:rgba(108,99,255,.14);border:1px solid rgba(108,99,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.am-header-icon svg{stroke:var(--accent);}
.am-header-body h3{font-size:18px;font-weight:700;margin:0 0 3px;padding-right:0;}
.am-header-body p{font-size:13px;color:var(--muted);margin:0;}
.am-section{margin-bottom:20px;}
.am-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px;}
.am-time-card{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px 16px 16px;}
.am-time-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
.am-unit{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.am-colon{font-size:44px;font-weight:700;color:rgba(255,255,255,.22);margin-bottom:24px;line-height:1;user-select:none;}
.alarm-time-input{width:100px;text-align:center;font-size:46px;font-weight:700;font-family:'Montserrat',sans-serif;background:var(--surface2);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;color:var(--text);padding:14px 4px;outline:none;-moz-appearance:textfield;transition:border-color .15s,box-shadow .15s;}
.alarm-time-input::-webkit-inner-spin-button,.alarm-time-input::-webkit-outer-spin-button{-webkit-appearance:none;}
.alarm-time-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.14);}
.am-divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:0 0 20px;}
.am-tone-grid{display:flex;flex-direction:column;gap:8px;}
.am-tone-btn{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:13px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);cursor:pointer;transition:background .15s,border-color .15s;text-align:left;width:100%;}
.am-tone-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.am-tone-btn.active{border-color:var(--accent);background:rgba(108,99,255,.1);}
.am-tone-ico{font-size:24px;flex-shrink:0;width:30px;text-align:center;line-height:1;}
.am-tone-info{flex:1;min-width:0;}
.am-tone-info strong{display:block;font-size:14px;font-weight:700;color:var(--text);}
.am-tone-info span{font-size:12px;color:var(--muted);margin-top:2px;display:block;}
.am-tone-btn.active .am-tone-info span{color:rgba(108,99,255,.85);}
.am-check{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.am-tone-btn.active .am-check{background:var(--accent);border-color:var(--accent);}
.am-check svg{display:none;stroke:white;stroke-width:2.5;fill:none;}
.am-tone-btn.active .am-check svg{display:block;}
.am-mode-list{display:flex;flex-direction:column;gap:8px;}
.am-mode-btn{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);cursor:pointer;transition:background .15s,border-color .15s;text-align:left;width:100%;}
.am-mode-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.am-mode-btn.active{border-color:var(--accent);background:rgba(108,99,255,.1);}
.am-radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.22);flex-shrink:0;position:relative;transition:border-color .15s;}
.am-mode-btn.active .am-radio{border-color:var(--accent);}
.am-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.am-mode-btn.active .am-radio::after{transform:translate(-50%,-50%) scale(1);}
.am-mode-ico{font-size:22px;flex-shrink:0;width:30px;text-align:center;line-height:1;}
.am-mode-info{flex:1;}
.am-mode-info strong{display:block;font-size:14px;font-weight:700;color:var(--text);}
.am-mode-info span{font-size:12px;color:var(--muted);margin-top:2px;display:block;}
.am-countdown-card{background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.16);border-radius:16px;padding:28px 20px;text-align:center;margin-bottom:20px;}
.am-countdown-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:10px;}
.alarm-countdown{font-size:58px;font-weight:700;font-family:'Montserrat',sans-serif;letter-spacing:4px;color:var(--text);line-height:1;}
.am-countdown-sub{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;}
.am-ringing-card{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);border-radius:16px;padding:32px 20px;text-align:center;margin-bottom:20px;}
.am-ringing-pulse{font-size:60px;line-height:1;margin-bottom:14px;display:inline-block;animation:am-ring-bounce .55s ease-in-out infinite alternate;}
@keyframes am-ring-bounce{from{transform:rotate(-10deg) scale(1);}to{transform:rotate(10deg) scale(1.08);}}
.am-ringing-title{font-size:22px;font-weight:800;font-family:'Montserrat',sans-serif;color:#fbbf24;margin-bottom:6px;}
.am-ringing-sub{font-size:13px;color:var(--muted);}
.am-stop-btn{width:100%;font-size:16px;font-weight:700;padding:16px;background:linear-gradient(135deg,#f59e0b,#f97316);border:none;border-radius:13px;color:#fff;cursor:pointer;transition:opacity .15s,transform .1s;letter-spacing:.3px;margin-top:4px;}
.am-stop-btn:hover{opacity:.9;}
.am-stop-btn:active{transform:scale(.98);}
@keyframes alarm-pulse{0%,100%{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3);}50%{background:rgba(251,191,36,.28);border-color:rgba(251,191,36,.75);}}
.add-station-pill{margin-left:auto;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.35);border-radius:9px;padding:5px 13px;cursor:pointer;color:rgba(108,99,255,.95);font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;}
.add-station-pill:hover{background:rgba(108,99,255,.2);border-color:var(--accent);color:var(--accent);}
.status-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .2s;}
.status-bar.playing .dot{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5);animation:pulse 2s infinite;}
.status-bar.error .dot{background:var(--accent2);}
.status-bar.loading .dot{background:#facc15;animation:pulse 1s infinite;}

/* Tab panels */
.panel{display:none;flex-direction:column;gap:20px;min-height:340px;}
.panel.active{display:flex;animation:panelIn .1s ease;will-change:opacity;}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Terminal modal */
#modalTerminal .modal{max-width:860px;width:calc(100vw - 32px);padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 40px);}
#terminalHeader{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;}
#terminalHeader span{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
#terminalHeader span svg{opacity:.6;}
#terminalContainer{flex:1;min-height:0;background:#0c0c0c;padding:8px;}
#terminalContainer .xterm{height:100%;}
.term-close-btn{background:rgba(255,255,255,.07);border:none;border-radius:8px;color:var(--muted);width:30px;height:30px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.term-close-btn:hover{background:rgba(255,255,255,.14);color:var(--text);}
.cli-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--muted);font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;margin-left:auto;}
.cli-btn:hover{background:rgba(255,255,255,.11);color:var(--text);border-color:rgba(255,255,255,.2);}
#panel-spotify,#panel-youtube{min-height:480px;}
/* Context bar */
.ptitle{font-size:15px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--text);letter-spacing:-.1px;padding-right:14px;border-right:1px solid rgba(255,255,255,.09);flex-shrink:0;}
/* Desktop layout */
@media(min-width:960px){
  .station-grid{grid-template-columns:repeat(3,1fr);}
  .player-card{padding:28px 32px;}
  .main{padding:0 32px 40px;gap:20px;}
  .tabs{padding:28px 32px 16px;}
  .section-title{font-size:12px;}
}
/* Weather */
.wx-wrap{display:flex;flex-direction:column;gap:16px;}
.wx-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wx-city-name{font-size:18px;font-weight:700;font-family:'Montserrat',sans-serif;}
.wx-city-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;}
.wx-city-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}
.wx-search-row{display:flex;gap:8px;}
.wx-search-input{flex:1;background:var(--surface2);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;color:var(--text);font-size:15px;outline:none;transition:border-color .15s;}
.wx-search-input:focus{border-color:rgba(56,189,248,.45);}
.wx-search-results{background:var(--surface2);border-radius:11px;overflow:hidden;margin-top:4px;}
.wx-search-result{padding:12px 16px;cursor:pointer;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05);}
.wx-search-result:last-child{border-bottom:none;}
.wx-search-result:hover{background:rgba(255,255,255,.06);}
.wx-card{background:var(--surface);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.05);}
.wx-current{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.wx-icon-lg{font-size:80px;line-height:1;flex-shrink:0;}
.wx-main{display:flex;flex-direction:column;gap:6px;}
.wx-temp{font-size:58px;font-weight:700;font-family:'Montserrat',sans-serif;line-height:1;}
.wx-desc{font-size:18px;color:var(--muted);margin-top:4px;}
.wx-feels{font-size:15px;color:var(--muted);margin-top:2px;}
.wx-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.wx-stat{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);background:var(--surface2);border-radius:9px;padding:8px 14px;}
.wx-stat strong{color:var(--text);font-weight:600;}
.wx-city-inline{font-size:36px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--muted);line-height:1;}
.wx-section{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:6px 0 10px;}
.wx-hourly{display:flex;flex-direction:column;gap:6px;}
.wx-h{display:flex;flex-direction:row;align-items:center;gap:14px;background:var(--surface2);border-radius:12px;padding:12px 18px;}
.wx-h .wh-time{color:var(--muted);font-size:14px;font-weight:600;width:48px;flex-shrink:0;}
.wx-h .wh-icon{font-size:24px;width:32px;text-align:center;flex-shrink:0;}
.wx-h .wh-temp{font-weight:700;font-size:16px;flex:1;}
.wx-h .wh-rain{color:#38bdf8;font-size:14px;text-align:right;min-width:40px;}
.wx-h .wh-wind{font-size:13px;color:var(--muted);text-align:right;min-width:80px;}
.wx-h.wh-now{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);}
.wx-daily{display:flex;flex-direction:column;gap:8px;}
.wx-day{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:16px;}
.wx-day .wd-icon{width:48px;height:48px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.wx-day .wd-info{flex:1;min-width:0;}
.wx-day .wd-name{font-size:16px;font-weight:600;}
.wx-day .wd-desc{font-size:14px;color:var(--muted);margin-top:3px;}
.wx-day .wd-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.wx-day .wd-temps{display:flex;gap:6px;align-items:center;font-size:17px;}
.wx-day .wd-max{font-weight:700;}
.wx-day .wd-min{color:var(--muted);}
.wx-day .wd-rain{font-size:13px;color:#38bdf8;}
.wx-day .wd-wind{font-size:13px;color:var(--muted);}
.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);margin-bottom:10px;opacity:.9;}

/* Station grid */
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.station-item{background:var(--surface);border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;}
.station-item:hover{background:var(--surface2);transform:translateY(-1px);}
.station-item.active{border-color:var(--accent);background:rgba(108,99,255,.08);}
.station-item .art{width:44px;height:44px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.station-item .info{flex:1;min-width:0;}
.station-item .info .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.station-item .info .genre{font-size:12px;color:var(--muted);margin-top:2px;}
.station-item .play-btn{width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;flex-shrink:0;}
.station-item:hover .play-btn,.station-item.active .play-btn{background:var(--accent);border-color:var(--accent);}
.station-item .play-btn svg{fill:white;width:12px;height:12px;}
.add-btn{background:transparent;border:1px dashed rgba(255,255,255,.15);border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--muted);font-size:14px;transition:border-color .15s,color .15s;width:100%;}
.add-btn:hover{border-color:var(--accent);color:var(--accent);}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.section-header .section-title{margin-bottom:0;}
.edit-mode-btn{background:none;border:none;cursor:pointer;padding:3px;opacity:.35;transition:opacity .2s;display:flex;align-items:center;}
.edit-mode-btn:hover{opacity:.8;}
.edit-mode-btn.active{opacity:1;}
.edit-mode-btn svg{width:15px;height:15px;stroke:var(--text);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.station-item.dragging{opacity:.4;transform:scale(.97);}
.station-item.drag-over{border-color:var(--accent);background:rgba(108,99,255,.12);}
.drag-handle{color:var(--muted);font-size:16px;cursor:grab;flex-shrink:0;user-select:none;line-height:1;padding:0 2px;}
.drag-handle:active{cursor:grabbing;}
.edit-actions{display:flex;gap:4px;flex-shrink:0;margin-left:auto;}
.edit-act-btn{width:28px;height:28px;border-radius:8px;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.edit-act-btn svg{width:13px;height:13px;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor;}
.edit-act-btn.edit:hover{background:var(--accent);color:#fff;}
.edit-act-btn.del:hover{background:var(--accent2);color:#fff;}
.edit-act-btn.fav:hover{background:#f59e0b;color:#fff;}
.station-item.edit-mode{cursor:default;}
.station-item.edit-mode:hover{transform:none;}
.station-item.edit-mode .art{display:none;}
.expand-btn{width:100%;margin-top:8px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;color:var(--muted);font-size:12px;cursor:pointer;transition:background .15s,color .15s;}
.expand-btn:hover{background:var(--surface2);color:var(--fg);}

/* Spotify panel */
.connect-card{background:var(--surface);border-radius:16px;padding:32px;border:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.connect-card .icon{font-size:48px;}
.connect-card h3{font-size:18px;font-weight:700;}
.connect-card p{font-size:14px;color:var(--muted);max-width:400px;line-height:1.6;}
.btn-connect-spotify{background:var(--green);color:white;border:none;padding:12px 28px;border-radius:24px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;}
.btn-connect-spotify:hover{opacity:.85;}
.btn-connect-youtube{background:#ff4444;color:white;border:none;padding:12px 28px;border-radius:24px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;}
.btn-connect-youtube:hover{opacity:.85;}

/* Spotify search & results */
.search-bar{display:flex;gap:10px;}
.search-bar input{flex:1;background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 16px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s;}
.search-bar input:focus{border-color:var(--accent);}
.search-bar button{background:var(--accent);color:white;border:none;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s;flex-shrink:0;}
.search-bar button:hover{opacity:.85;}
.search-bar button.yt{background:#ff4444;}

.results-list{display:flex;flex-direction:column;gap:8px;}
.result-item{background:var(--surface);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .15s,border-color .15s;}
.result-item:hover{background:var(--surface2);border-color:rgba(255,255,255,.1);}
.result-item .thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface2);}
.result-item .thumb-placeholder{width:48px;height:48px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.result-item .rinfo{flex:1;min-width:0;}
.result-item .rinfo .rtitle{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.result-item .rinfo .rsub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.result-item .rplay{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.result-item:hover .rplay{background:var(--accent);border-color:var(--accent);}
.result-item .rplay svg{fill:white;width:14px;height:14px;}

#yt-player-wrap{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;display:none;}
#yt-player-wrap.active{display:block;}

/* Modals */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:32px;width:100%;max-width:480px;margin:20px;position:relative;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;}
.modal h3{font-size:20px;font-weight:700;margin-bottom:8px;padding-right:38px;}
.modal .subtitle{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.6;}
.modal label{display:block;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.modal input{width:100%;background:var(--surface2);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:13px 16px;color:var(--text);font-size:15px;outline:none;margin-bottom:18px;transition:border-color .15s;font-family:monospace;}
.modal input:focus{border-color:var(--accent);}
.modal input.normal{font-family:inherit;}
.modal-actions{display:flex;gap:12px;margin-top:8px;}
.modal-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border:none;background:rgba(255,255,255,.07);border-radius:9px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;transition:background .15s,color .15s;}
.modal-close:hover{background:rgba(255,255,255,.14);color:var(--text);}
.warning-box{background:rgba(255,68,68,.08);border:1px solid rgba(255,68,68,.3);border-radius:12px;padding:14px 16px;font-size:12px;color:#ff9999;line-height:1.6;margin-bottom:0;}
.warning-box strong{color:#ff6666;display:block;margin-bottom:4px;font-size:13px;}
.settings-danger{border-color:rgba(255,68,68,.2)!important;}
.btn{flex:1;padding:12px;border-radius:11px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.btn:hover{opacity:.85;}
.btn-primary{background:var(--accent);color:white;}
.btn-green{background:var(--green);color:white;}
.btn-red{background:#ff4444;color:white;}
.btn-secondary{background:var(--surface2);color:var(--text);}
.info-box{background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.2);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
.info-box code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;font-family:monospace;color:var(--text);}

/* Settings panel */
.settings-section{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:18px;}
.settings-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:2px;display:flex;align-items:center;gap:8px;}
.settings-field{display:flex;flex-direction:column;gap:6px;}
.settings-field label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px;}
.settings-input{width:100%;background:var(--surface2);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s;}
.settings-input:focus{border-color:var(--accent);}
.settings-input.mono{font-family:monospace;}
.settings-field-row{display:flex;gap:10px;align-items:center;}
.settings-field-row .settings-input{flex:1;margin:0;}
.settings-hint{font-size:11px;color:var(--muted);line-height:1.5;}
.settings-status{font-size:12px;min-height:16px;line-height:1.5;}
.btn-save{padding:10px 18px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;white-space:nowrap;flex-shrink:0;}
.btn-save:hover{opacity:.85;}

.connect-phone-card{background:var(--surface2);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;transition:border-color .2s;}
.connect-phone-card:hover{border-color:rgba(29,185,84,.4);}
.connect-phone-card.connected{border-color:rgba(29,185,84,.5);background:rgba(29,185,84,.06);}
.cp-left{display:flex;align-items:center;gap:14px;}
.cp-icon{font-size:28px;flex-shrink:0;}
.cp-info{display:flex;flex-direction:column;gap:3px;}
.cp-title{font-size:14px;font-weight:600;}
.cp-sub{font-size:12px;color:var(--muted);}
.cp-status{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.cp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cp-dot.waiting{background:var(--muted);}
.cp-dot.ready{background:#facc15;animation:pulse 2s infinite;}
.cp-dot.connected{background:var(--green);box-shadow:0 0 8px rgba(29,185,84,.6);animation:pulse 2s infinite;}
#cpStatusText{font-size:13px;font-weight:600;color:var(--muted);}
.cp-dot.ready ~ #cpStatusText,.cp-dot.ready+span{color:#facc15;}
.status-ready #cpStatusText{color:#facc15;}
.status-connected #cpStatusText{color:var(--green);}
.cp-instructions{background:rgba(29,185,84,.05);border:1px solid rgba(29,185,84,.15);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.cp-step{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);}
.cp-step strong{color:var(--text);}
.cp-num{width:22px;height:22px;border-radius:50%;background:rgba(29,185,84,.2);color:var(--green);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
audio{display:none;}
/* Audio output panel */
.audio-output-item{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:border-color .2s,background .2s;}
.audio-output-item.active-output{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.04);}
.audio-output-item.active-browser{border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.06);}
.audio-output-item.unavailable{opacity:.38;cursor:default;}
.audio-output-item .bt-name{font-size:15px;font-weight:700;}
.audio-section-sep{border:none;border-top:1px solid rgba(255,255,255,.06);margin:4px 0;}
/* Elegantní audio toggle */
.audio-toggle{position:relative;width:48px;height:26px;flex-shrink:0;margin-left:auto;}
.audio-toggle input{opacity:0;width:0;height:0;position:absolute;}
.audio-toggle-track{position:absolute;inset:0;border-radius:26px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .28s cubic-bezier(.4,0,.2,1),border-color .28s,box-shadow .28s;}
.audio-toggle-track::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.4,0,.2,1),background .28s;}
.audio-toggle input:checked~.audio-toggle-track{background:var(--accent);border-color:transparent;box-shadow:0 0 12px rgba(108,99,255,.45);}
.audio-toggle input:checked~.audio-toggle-track::before{transform:translateX(22px);background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.25);}
.audio-toggle.green input:checked~.audio-toggle-track{background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.4);}
.audio-toggle input:disabled~.audio-toggle-track{cursor:not-allowed;opacity:.4;}
/* Bluetooth + WiFi shared panel styles */
.bt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bt-status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);}
.bt-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .3s;}
.bt-dot.on{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5);animation:pulse 2s infinite;}
.bt-dot.scanning{background:#facc15;box-shadow:0 0 6px rgba(250,204,21,.5);animation:pulse .8s infinite;}
.bt-device-list{display:flex;flex-direction:column;gap:8px;}
.bt-device{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:border-color .2s,background .2s;}
.bt-device.connected{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.04);}
.bt-device .bt-icon{width:42px;height:42px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.bt-device .bt-info{flex:1;min-width:0;}
.bt-device .bt-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bt-device .bt-mac{font-size:11px;color:var(--muted);margin-top:2px;}
.bt-device .bt-actions{display:flex;gap:6px;flex-shrink:0;}
.bt-btn{padding:6px 14px;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.bt-btn:hover{opacity:.8;}
.bt-btn.connect{background:var(--accent);color:#fff;}
.bt-btn.disconnect{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.3);}
.bt-btn.remove{background:rgba(255,68,68,.1);color:#ff4444;border:1px solid rgba(255,68,68,.2);}
.bt-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px;}
/* WiFi signal bar */
.wifi-signal{display:flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0;}
.wifi-signal span{width:4px;border-radius:2px;background:rgba(255,255,255,.15);}
.wifi-signal span.lit{background:var(--accent);}
.wifi-signal span:nth-child(1){height:5px;}
.wifi-signal span:nth-child(2){height:9px;}
.wifi-signal span:nth-child(3){height:13px;}
.wifi-signal span:nth-child(4){height:16px;}
/* WiFi password row (inline) */
.wifi-pass-row{display:none;margin-top:10px;gap:8px;}
.wifi-pass-row.open{display:flex;}
.wifi-pass-row input{flex:1;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--surface2);color:var(--text);font-size:13px;}
/* BT media control buttons */
.bt-media-btns{display:flex;gap:4px;align-items:center;flex-shrink:0;}
.bt-media-btn{width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0;flex-shrink:0;}
.bt-media-btn:hover{background:rgba(255,255,255,.16);}
.bt-media-btn:active{background:rgba(108,99,255,.35);transform:scale(.92);}
.bt-media-btn svg{pointer-events:none;}
.bt-media-sep{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 2px;flex-shrink:0;}
/* WiFi current connection card */
.wifi-current{background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.25);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;margin-bottom:8px;}
.wifi-current-top{display:flex;align-items:center;gap:14px;}
.wifi-current .wc-info{flex:1;min-width:0;}
.wifi-current .wc-ssid{font-size:15px;font-weight:700;}
.wifi-current .wc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#4ade80;margin-top:3px;}
.wifi-current .wc-badge::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 5px rgba(74,222,128,.6);animation:pulse 2s infinite;}
.wifi-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px;}
.wc-detail{display:flex;flex-direction:column;gap:1px;}
.wc-detail-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600;}
.wc-detail-value{font-size:12px;color:var(--text);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-detail-value.normal{font-family:inherit;}
.wifi-current-actions{display:flex;gap:8px;flex-shrink:0;}
/* WiFi edit modal */
.wifi-edit-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;align-items:center;justify-content:center;}
.wifi-edit-modal.open{display:flex;}
.wifi-edit-box{background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px;width:min(480px,92vw);display:flex;flex-direction:column;gap:16px;max-height:90vh;overflow-y:auto;}
.wifi-edit-box h3{font-size:16px;font-weight:700;margin:0;}
.wifi-edit-box .subtitle{font-size:12px;color:var(--muted);margin-top:-10px;}
.wifi-radio-group{display:flex;gap:10px;}
.wifi-radio-group label{flex:1;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);cursor:pointer;font-size:13px;transition:border-color .15s,background .15s;}
.wifi-radio-group input[type=radio]{accent-color:var(--accent);}
.wifi-radio-group label:has(input:checked){border-color:var(--accent);background:rgba(108,99,255,.08);}
.wifi-static-fields{display:none;flex-direction:column;gap:10px;}
.wifi-static-fields.show{display:flex;}
.wifi-static-fields label{font-size:12px;color:var(--muted);margin-bottom:-6px;}
.wifi-static-fields input{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--surface2);color:var(--text);font-size:13px;}
.wifi-fallback-section{border-top:1px solid rgba(255,255,255,.06);padding-top:14px;display:flex;flex-direction:column;gap:12px;}
.wifi-fallback-section h4{font-size:13px;font-weight:600;margin:0;}
.wifi-fallback-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.wifi-fallback-row select,.wifi-fallback-row input[type=number]{padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--surface2);color:var(--text);font-size:13px;}
.wifi-fallback-row select{flex:1;}
.wifi-fallback-row input[type=number]{width:70px;}
.wifi-toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.wifi-toggle input{opacity:0;width:0;height:0;}
.wifi-toggle-slider{position:absolute;inset:0;border-radius:20px;background:rgba(255,255,255,.15);cursor:pointer;transition:background .2s;}
.wifi-toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .2s;}
.wifi-toggle input:checked+.wifi-toggle-slider{background:var(--accent);}
.wifi-toggle input:checked+.wifi-toggle-slider::before{transform:translateX(16px);}
/* ── Tablet (601–768px) ── */
@media(min-width:601px) and (max-width:768px){
  .main{padding:0 22px 32px;gap:22px;}
  .tabs{padding:16px 22px 14px;gap:7px;}
  .player-card{padding:20px 22px;gap:16px;}
  .station-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .modal{padding:28px;}
  .bt-toolbar{gap:12px;}
  .bt-device{padding:16px 18px;}
  .station-item{padding:16px 18px;}
}

/* ── Phones ≤600px ── */
@media(max-width:600px){
  body{padding-bottom:env(safe-area-inset-bottom);}

  /* Header */
  header{padding:11px 16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));gap:6px;}
  .logo{width:26px;height:26px;}
  .logo img{width:26px;height:26px;}
  header h1{font-size:17px;letter-spacing:-.3px;}
  header .right{gap:5px;}
  .gear-btn{padding:3px;}
  .gear-btn svg{width:17px;height:17px;}
  #adminSessionBar{gap:5px;}
  #ahbLabel{display:none;}
  #asbText{display:none;}
  .asb-timer{display:none;}
  #alarmHeaderBadge{padding:7px 9px;}
  .asb-pill{padding:7px 9px;}
  .player-clock .pc-day,.player-clock .pc-date{display:none;}
  .player-clock .pc-time{font-size:18px;letter-spacing:1px;}
  .player-clock{padding-left:12px;}

  /* Tabs — horizontally scrollable, no gap spacer */
  .tabs{padding:12px 16px 14px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab-gap{display:none;}
  .tab{padding:9px 15px;font-size:13px;gap:6px;border-radius:10px;flex-shrink:0;}

  /* Main layout */
  .main{padding:0 16px 28px;gap:20px;min-height:calc(100vh - 100px);}

  /* Player card */
  .player-card{padding:18px 18px;gap:16px;}
  .now-playing{gap:14px;}
  .station-art{width:58px;height:58px;font-size:24px;border-radius:12px;}
  .station-info h2{font-size:17px;}
  .station-info .meta{font-size:13px;}
  .controls{gap:12px;}
  .btn-play{width:48px;height:48px;}
  .volume-wrap{gap:9px;}
  .vol-value{width:36px;font-size:11px;}
  .visualizer{height:48px;}
  .viz-picker{gap:6px;flex-wrap:wrap;margin-top:2px;}
  .viz-btn{padding:6px 10px;font-size:12px;}

  /* Station list */
  .station-grid{grid-template-columns:1fr;gap:10px;}
  .station-item{padding:16px 16px;gap:14px;}
  .section-header{margin-bottom:12px;}

  /* Panels */
  .panel{gap:16px;}

  /* BT / WiFi toolbars */
  .bt-toolbar{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:4px;}
  .ptitle{border-right:none;padding-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;width:100%;}
  .bt-device{padding:16px 16px;gap:14px;}
  .bt-device-list{gap:10px;}
  .bt-empty{padding:48px 20px;}
  .wifi-current{padding:18px 16px;gap:14px;}
  .wifi-current-top{flex-wrap:wrap;gap:12px;}
  .wifi-current-actions{flex-direction:column;gap:8px;align-items:stretch;width:100%;margin-top:4px;}
  .wifi-current-actions .bt-btn{text-align:center;display:block;padding:10px 14px;}
  .bt-media-btns{flex-wrap:wrap;gap:6px;}

  /* Audio output items */
  .audio-output-item{padding:16px 16px;gap:14px;}

  /* Result items (Spotify/YouTube) */
  .result-item{padding:14px 16px;gap:14px;}
  .results-list{gap:10px;}

  /* Connect cards */
  .connect-card{padding:28px 20px;gap:14px;}

  /* Modals */
  .modal{padding:20px;margin:10px;border-radius:18px;max-height:calc(100dvh - 20px);}
  .modal-overlay{align-items:flex-start;padding-top:10px;padding-top:max(10px,env(safe-area-inset-top));}
  .modal h3{font-size:17px;}
  .modal .subtitle{margin-bottom:18px;}
  .modal-close{width:32px;height:32px;top:16px;right:16px;font-size:14px;}
  .modal-actions{gap:10px;margin-top:12px;}
  .btn{padding:13px;}

  /* Alarm modal */
  .alarm-time-input{width:86px;font-size:40px;padding:12px 4px;}
  .am-colon{font-size:36px;}
  .am-tone-btn{padding:12px 14px;}
  .am-mode-btn{padding:12px 14px;}
  .alarm-countdown{font-size:50px;letter-spacing:3px;}
  .am-ringing-card{padding:24px 16px;}
  .am-ringing-pulse{font-size:52px;}
  .am-ringing-title{font-size:20px;}
  .am-stop-btn{font-size:15px;padding:15px;}

  /* Settings */
  .settings-field-row{flex-direction:column;align-items:stretch;gap:10px;}
  .btn-save{width:100%;}
  .settings-section{padding:18px;gap:20px;}
  .settings-field{gap:8px;}

  /* Weather */
  .wx-wrap{gap:14px;}
  .wx-card{padding:18px;}
  .wx-icon-lg{font-size:64px;}
  .wx-temp{font-size:48px;}
  .wx-city-inline{font-size:28px;}
  .wx-desc{font-size:16px;}
  .wx-feels{font-size:14px;}
  .wx-current{gap:16px;}
  .wx-stats{gap:8px;margin-top:14px;}
  .wx-stat{padding:7px 12px;font-size:13px;gap:6px;}
  .wx-daily{gap:8px;}
  .wx-day{padding:14px 14px;gap:12px;}
  .wx-day .wd-icon{width:42px;height:42px;font-size:22px;}
  .wx-day .wd-name{font-size:15px;}
  .wx-day .wd-desc{font-size:13px;}
  .wx-day .wd-temps{font-size:16px;}
  .wx-hourly{gap:6px;}
  .wx-h{padding:11px 14px;gap:12px;}
  .wx-h .wh-time{font-size:13px;}
  .wx-h .wh-temp{font-size:15px;}
  .wx-h .wh-rain{font-size:13px;}
  .wx-h .wh-wind{font-size:12px;}
  .wx-section{padding:6px 0 10px;}

  /* Search bars (Spotify / YouTube) */
  .search-bar{flex-direction:column;gap:10px;}
  .search-bar button{width:100%;border-radius:10px;padding:13px;}
  .search-bar input{border-radius:10px;}
}

/* ── Very small phones ≤400px ── */
@media(max-width:400px){
  header{gap:4px;padding:10px 10px;}
  header h1{font-size:15px;}
  .logo{width:22px;height:22px;}
  .logo img{width:22px;height:22px;}
  .gear-btn{padding:2px;}
  .gear-btn svg{width:16px;height:16px;}
  header .right{gap:3px;}
  #alarmHeaderBadge{padding:6px 7px;}
  .asb-pill{padding:6px 7px;}
  .tabs{padding:10px 12px 12px;}
  .tab{padding:8px 11px;font-size:12px;}
  .tab svg{width:13px;height:13px;}
  .main{padding:0 12px 24px;}
  .station-info h2{font-size:15px;}
  .alarm-time-input{width:76px;font-size:34px;}
  .am-colon{font-size:30px;}
  .player-card{padding:16px 14px;}
}

/* ── Touch device UX (coarse pointer = finger) ── */
@media(pointer:coarse){
  input[type=range]{height:6px;}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;}
  input[type=range]::-moz-range-thumb{width:24px;height:24px;border:none;background:var(--accent);border-radius:50%;}
  .gear-btn{min-width:40px;min-height:40px;}
  .bt-btn{min-height:40px;padding:8px 16px;}
  .vol-icon-btn{min-width:38px;min-height:38px;}
  .bt-media-btn{width:38px;height:38px;}
  .tab{min-height:42px;}
  .station-item{padding:16px;}
  .result-item{padding:14px 16px;}
  .wx-search-result{padding:14px 16px;}
}