:root{--radioOffset:26px;--bg:#05070a;--panel:#05070a;--panel2:#05070a;--panel3:#0a0d12;--accent:#1e88e5;--accent2:#1565c0;--green:#2e7d32;--red:#c62828;--purple:#6a1b9a;--gray:#4b5563;--text:#fff;--dim:#b9c2cc;--amber:#ffcc66}
*{box-sizing:border-box;cursor:none !important}
html,html *,body,body *,button,a,input,select,textarea,div,span,.homeOverlay,.homeOverlay *,#home,#home *{cursor:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="),none !important}
body.kiosk, body.kiosk *{cursor:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="),none !important}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden;width:100vw;height:100vh;padding-top:var(--radioOffset)}
.header{height:48px;background:var(--panel2);border:1px solid #05070a;margin:3px;display:flex;align-items:center;padding:0 12px}
.title{font-weight:900;font-size:18px;white-space:nowrap}
.stationHead{font-weight:900;font-size:18px;flex:1;display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stationHead.noInternet{font-size:22px;color:#ff4444}
.gear{font-size:24px;background:transparent;border:0;color:white;padding:8px 12px}
.main{height:372px;margin:0 3px 3px 3px;display:flex;gap:4px}
.left{flex:1;display:flex;flex-direction:column;gap:4px}
.stations{flex:1;background:var(--panel);border:1px solid #05070a;padding:8px;min-height:0;display:flex;flex-direction:column}
#stationList{flex:1;min-height:0;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-right:4px}
.section{font-size:11px;color:#8ea1b5;font-weight:bold;margin-bottom:4px}
.stationBtn{width:100%;height:39px;margin:3px 0;background:var(--panel3);color:white;border:0;text-align:left;padding:0 12px;font-size:14px;font-weight:bold;border-radius:2px}
.stationBtn.sel{background:var(--accent)}
.setBtn.sel{background:var(--accent);border-color:var(--accent)}
.favHeart{display:inline-block;width:18px;margin-right:5px;text-align:center;vertical-align:baseline}.favHeart::before{content:"\2665";font-size:16px;line-height:1}
\n.nav{height:42px;background:var(--panel2);border:1px solid #05070a;display:flex;align-items:center;gap:6px;padding:4px}
.right{width:285px;background:var(--panel);border:1px solid #05070a;padding:10px;text-align:center}
.now{height:62px;text-align:left;color:var(--amber);font-weight:bold;font-size:13px;overflow:hidden}
button{cursor:none !important}
.btn{background:var(--gray);color:white;border:0;border-radius:2px;font-size:14px;font-weight:bold;padding:7px 12px}
.btn.active{background:var(--accent)!important;box-shadow:inset 0 0 0 2px #8bc5ff}
.btnWide{width:210px;margin:3px 0}
.green{background:var(--green)}.red{background:var(--red)}.blue{background:var(--accent2)}.purple{background:var(--purple)}
.volume{color:var(--amber);font-weight:bold;margin:5px 0 4px 0}
.volumeBar{display:flex;gap:4px;margin:6px auto;width:210px;align-items:center;justify-content:center}
.volSide{flex:0 0 48px;height:36px;font-size:22px;padding:0}
.volCentre{flex:0 0 110px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #05070a;background:#000;border-radius:2px;font-size:13px}
.usbLayout{position:absolute;left:18px;right:18px;top:58px;bottom:82px;display:grid;grid-template-columns:390px 1fr;gap:10px;min-height:0}
.usbListColumn{min-height:0;display:flex;flex-direction:column}
.usbListNew{background:var(--panel);border:1px solid #05070a;padding:8px;flex:1;min-height:0;margin-top:0;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.usbTrack{width:100%;min-height:38px;margin:3px 0;background:var(--panel3);color:white;border:0;text-align:left;padding:6px 10px;font-size:12px;font-weight:bold;border-radius:2px;overflow:hidden}
.usbTrack.sel{background:var(--accent)}
.scanProgress{background:#0c1117;border:1px solid #05070a;margin:0 0 8px 0;padding:8px;color:var(--amber);font-size:12px;font-weight:900;line-height:1.35;word-break:break-word}
.scanProgress .dimLine{color:#9fb0c0;font-size:11px;font-weight:700}
.usbRight{background:var(--panel);border:1px solid #05070a;padding:10px;text-align:center;min-width:0;display:flex;flex-direction:column;min-height:0}
.coverBox{width:150px;height:150px;margin:0 auto 8px auto;background:#000;border:1px solid #05070a;display:flex;align-items:center;justify-content:center;color:#5f7080;font-size:14px;font-weight:900;text-align:center;padding:4px}
.coverBox img{width:100%;height:100%;object-fit:cover;display:block}
.usbNow{height:86px;color:var(--amber);font-size:14px;font-weight:900;overflow:hidden;text-align:left;line-height:1.25;margin-top:8px}
.usbControls{position:absolute;left:18px;right:18px;bottom:12px;display:grid;grid-template-columns:72px 72px 92px 92px 92px 1fr auto;gap:6px;height:56px;z-index:20;background:var(--bg);align-items:center}
.usbControls .btn{height:56px;font-size:13px;padding:4px 6px}
.usbVolUnderCover{display:grid;grid-template-columns:48px 1fr 48px;gap:6px;margin:10px 0 0 0;height:40px}
.usbVolUnderCover .btn{height:40px;font-size:18px;padding:2px 6px}
.usbVolCentre{height:40px;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #05070a;border-radius:2px;color:var(--amber);font-size:12px;font-weight:900;text-align:center}
.usbReturn{width:118px!important;height:38px!important;font-size:11px!important;padding:2px 6px!important;align-self:center;white-space:normal;line-height:1.05}

.homeOverlay{position:fixed;inset:0;background:var(--bg);z-index:8;display:block;padding:14px 18px;color:white}
.homeHeader{height:54px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.homeSplash{display:flex;align-items:center;gap:10px;min-width:170px}
.homeSplashLogo{width:138px;max-height:52px;height:auto;display:block;object-fit:contain}
.homeSplashMark{display:none}
.homeBrand{display:none}
.homeSub{display:none}
.homeGear{width:58px;height:48px;background:transparent;color:#fff;border:0;font-size:34px;font-weight:900}
.homeMain{height:292px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,88px);gap:12px;max-width:740px;margin:8px auto 0 auto}
.homeBtn{background:#05070a;border:2px solid var(--accent);color:#fff;font-size:26px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;border-radius:3px;box-shadow:inset 0 0 0 1px #0d2236}
.homeBtn:active,.homeBtn.sel,.homeBtn.pressed{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 18px rgba(30,136,229,.42), inset 0 0 0 2px #8bc5ff}
.homeBtn.activeListen{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 16px rgba(30,136,229,.65), inset 0 0 0 2px #8bc5ff}
.homeFooter{position:absolute;left:18px;right:18px;bottom:14px;height:64px;display:flex;align-items:flex-end;justify-content:space-between;color:#7f8c99;font-size:13px;font-weight:900;letter-spacing:.5px}
.homePower{width:64px;height:64px;background:#05070a;color:#fff;border:0;border-radius:50%;font-size:0;font-weight:900;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:none}
.homePower::before{content:"";position:absolute;width:23px;height:23px;border:5px solid #fff;border-top-color:transparent;border-radius:50%;top:20px;left:18px}
.homePower::after{content:"";position:absolute;width:5px;height:25px;background:#fff;border-radius:4px;top:10px;left:32px;box-shadow:0 0 0 3px #05070a}
.homePower:active{background:#fff;border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.24)}
.homePower:active::before{border-color:#05070a;border-top-color:transparent}.homePower:active::after{background:#05070a;box-shadow:0 0 0 3px #fff}
.homeLogoBars{display:none}
.homeLogoBars span{display:none}
.mainMenuFixed{position:absolute;right:14px;bottom:12px;width:132px;height:40px;font-size:13px;font-weight:900;z-index:40}
.radioMainMenuFixed{position:absolute;right:14px;bottom:12px;width:132px;height:40px;font-size:13px;font-weight:900;z-index:6}


.overlay{position:fixed;inset:0;background:radial-gradient(circle at top,#0b1420 0,#05070a 54%,#030406 100%);z-index:10;display:none;padding:12px 16px;box-sizing:border-box}
.overlay h1{font-size:25px;text-align:center;margin:2px 0 12px;line-height:1.05;letter-spacing:1.5px;color:#eef6ff;text-shadow:0 0 12px rgba(30,136,229,.28)}
.settingsGrid{height:356px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:62px;gap:8px;max-width:760px;margin:0 auto}.settingsInfo{position:absolute;left:18px;right:18px;bottom:8px;text-align:center;color:#8ea1b5;font-size:12px;font-weight:900;line-height:1.3;background:rgba(12,17,23,.88);border:1px solid #13293d;border-radius:10px;padding:5px;box-shadow:0 0 14px rgba(0,0,0,.28)}
.appVersion{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#7f8c99;font-size:13px;font-weight:900;letter-spacing:.5px}
.setBtn{display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:6px 10px;font-size:19px;font-weight:900;background:linear-gradient(180deg,#121b27 0%,#080c12 100%);color:#fff;border:1px solid #203447;border-radius:12px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 6px 14px rgba(0,0,0,.22);line-height:1.05}.setBtn:active{transform:translateY(1px);filter:brightness(1.28);box-shadow:0 0 18px rgba(30,136,229,.32), inset 0 0 0 2px rgba(255,255,255,.08)}.setBtn.blue{background:linear-gradient(180deg,#1976d2 0%,#0d47a1 100%);border-color:#3fa2ff}.setBtn.green{background:linear-gradient(180deg,#2e7d32 0%,#164d1a 100%);border-color:#57b85c}.setBtn.red{background:linear-gradient(180deg,#c62828 0%,#7d1515 100%);border-color:#e45a5a}.setBtn.purple{background:linear-gradient(180deg,#7b1fa2 0%,#4a1264 100%);border-color:#b45ce0}
.optionGrid{height:392px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:66px;gap:10px;max-width:690px;margin:0 auto}
.eqPanel{height:368px;max-width:790px;margin:0 auto;display:grid;grid-template-rows:62px 236px 62px;gap:8px}.eqTop{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.eqSliders{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#05070a;border:1px solid #0d2236;padding:8px}.eqBand{display:grid;grid-template-rows:34px 32px 1fr 32px;gap:4px;min-width:0;border:2px solid transparent;border-radius:6px;padding:3px}.eqBand.sel{border-color:var(--amber);background:#10151d;box-shadow:0 0 12px rgba(255,204,102,.25)}.eqBandName{display:flex;align-items:center;justify-content:center;background:#0c1117;color:#d7e6ff;font-size:14px;font-weight:900}.eqBand.sel .eqBandName{background:var(--amber);color:#000}.eqSliderBox{position:relative;background:#000;border:1px solid #2b4056;border-radius:5px;overflow:hidden}.eqZero{position:absolute;left:0;right:0;top:50%;height:3px;background:#6b7c8d;z-index:2}.eqFill{position:absolute;left:12%;right:12%;bottom:50%;height:0;background:var(--accent);z-index:1;box-shadow:0 0 12px rgba(38,166,255,.45)}.eqFill.neg{bottom:auto;top:50%;background:#d44d62;box-shadow:0 0 12px rgba(212,77,98,.45)}.eqKnob{position:absolute;left:6%;right:6%;top:50%;height:14px;margin-top:-7px;background:var(--amber);border-radius:8px;z-index:3;box-shadow:0 0 14px rgba(255,204,102,.65)}.eqValue{display:flex;align-items:center;justify-content:center;background:#000;color:var(--amber);font-size:15px;font-weight:900}.eqSmallBtn{height:32px;font-size:20px;font-weight:900;background:var(--panel3);color:#fff;border:0;border-radius:4px}.eqSmallBtn:active{background:var(--amber);color:#000}.eqBottom{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.eqStatus{display:flex;align-items:center;justify-content:center;background:#0c1117;color:var(--amber);font-size:14px;font-weight:900;text-align:center;padding:4px}.eqOn{background:var(--accent)!important}.eqOff{background:#3a2020!important}.eqPresetActive{outline:3px solid var(--amber)!important;box-shadow:0 0 16px rgba(255,204,102,.45)!important}
.visualOverlay{display:none;position:absolute;inset:0;background:#000;z-index:120;color:#e8dac0;padding:0;box-sizing:border-box;overflow:hidden}
.visualTitle{display:none}
.visualHint{display:none}
.vuCanvasWrap{position:absolute;left:0;right:0;top:0;bottom:24px;background:#000;border:0;overflow:hidden}
#vintageVuCanvas{width:100%;height:100%;display:block;background:#000}
.visualFooter{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:#555;font-size:12px;font-weight:bold;letter-spacing:.5px}

.maintGrid{height:392px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:74px;gap:10px;max-width:690px;margin:0 auto}

.pcSetupPanel{max-width:730px;margin:0 auto;color:white;font-weight:900;background:rgba(12,17,23,.72);border:1px solid #13293d;border-radius:14px;padding:12px;box-shadow:0 8px 20px rgba(0,0,0,.28)}.pcSetupGrid{display:grid;grid-template-columns:180px 1fr;gap:8px;align-items:center}.pcSetupGrid input{font-size:19px;padding:8px;background:#05070a;color:white;border:1px solid #2b6ea5;border-radius:8px;font-weight:800}.pcSetupStatus{color:var(--amber);font-size:14px;margin-top:8px;min-height:40px;line-height:1.25}.pcSetupBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px;height:62px}
.listBox{background:rgba(5,7,10,.78);border:1px solid #13293d;border-radius:12px;padding:8px;height:365px;overflow:auto}.listItem{display:block;width:100%;box-sizing:border-box;height:39px;margin:3px 0;background:var(--panel3);color:white;border:0;text-align:left;padding:0 12px;font-size:14px;font-weight:bold;border-radius:2px}.listItem:active{background:var(--accent)}
.wifiBtn{display:block;width:100%;padding:12px;margin:5px 0;text-align:left;background:var(--panel3);color:#fff;border:0;font-size:16px;font-weight:bold}
.pwd{display:block;width:70%;margin:5px auto 8px auto;padding:12px;background:var(--panel3);border:1px solid #05070a;color:#fff;font-size:20px;font-weight:bold;text-align:left}
.krow{text-align:center;margin:4px 0}.key{width:56px;height:38px;margin:2px;background:var(--panel3);color:white;border:0;font-size:16px;font-weight:bold}.key.wide{width:150px}

/* V78.1: phone portrait remote fit.
   Keeps DSI kiosk and desktop browser unchanged.
   On phones in portrait, the normal 800x480 interface is rotated and scaled
   inside the real visible viewport with a safety margin to prevent clipping. */
@media (max-width: 900px) and (orientation: portrait) {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        background: var(--bg) !important;
    }

    body.phone-fit-active {
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
        touch-action: none;
    }

    #phoneFitStage {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: var(--bg);
    }

    #phoneFitCanvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 800px;
        height: 480px;
        transform-origin: 0 0;
        overflow: hidden;
        background: var(--bg);
    }
}


/* V81.39: hide pointer only on the local DSI kiosk browser.
   Remote web browsers keep their normal mouse pointer. */



/* V81.39b: PC/web browser cursor must be a normal arrow, not a dot. */
body:not(.localKiosk), body:not(.localKiosk) *{cursor:default !important;}
body:not(.localKiosk) button,
body:not(.localKiosk) .btn,
body:not(.localKiosk) .setBtn,
body:not(.localKiosk) .station,
body:not(.localKiosk) .usbTrack,
body:not(.localKiosk) [onclick]{cursor:pointer !important;}
body.localKiosk, body.localKiosk *{cursor:none !important;}


/* V81.39c: main menu also gets proper PC/web cursor. */
body:not(.localKiosk) .mainMenu,
body:not(.localKiosk) .mainMenu *,
body:not(.localKiosk) #home,
body:not(.localKiosk) #home *{cursor:default !important;}
body:not(.localKiosk) .mainMenu button,
body:not(.localKiosk) .mainMenu .btn,
body:not(.localKiosk) .mainMenu .setBtn,
body:not(.localKiosk) .mainMenu [onclick],
body:not(.localKiosk) #home button,
body:not(.localKiosk) #home .btn,
body:not(.localKiosk) #home .setBtn,
body:not(.localKiosk) #home [onclick]{cursor:pointer !important;}
body.localKiosk, body.localKiosk *{cursor:none !important;}



/* V81.97: Bluetooth setup redesigned for 800x480 DSI. */
.btPanelV8194{width:760px;max-width:760px;margin:0 auto;color:#fff;font-weight:bold;display:flex;flex-direction:column;height:410px;overflow:hidden;}
.statusPanel{max-width:700px;margin:0 auto;background:#0c1117;border:1px solid #0d2236;border-radius:12px;padding:18px;color:#d7e6ff;font-size:22px;line-height:1.35}.statusLine{display:grid;grid-template-columns:230px 1fr;gap:14px;border-bottom:1px solid #1a2b3d;padding:8px 0}.statusLine b{color:var(--amber)}.statusDetail{margin-top:12px;color:#9fb3c8;font-size:18px;text-align:center;min-height:26px}
#bluetoothSetup{padding:8px 12px 66px 12px;}
#bluetoothSetup h1{font-size:24px;margin:2px 0 6px;}
.btStatusV8194{border:1px solid #1e88e5;background:#0a1018;border-radius:10px;padding:8px 12px;margin:0 0 8px 0;font-size:17px;line-height:1.22;min-height:82px;max-height:92px;overflow:hidden;color:#d7e6ff;}
.btGridV8194{display:grid;grid-template-columns:1fr 1.65fr 1.25fr 1fr .85fr;gap:8px;margin:0 0 8px 0;}
.btGridV8194 .setBtn{height:62px;font-size:14px;line-height:1.08;padding:4px 6px;white-space:normal;}
.btGridV8194 .btConnectBtn{font-size:15px;}
.btListV8197{height:204px;margin-top:0;font-size:16px;overflow-y:auto;padding:6px;border-radius:10px;border:1px solid #10263b;background:#070b10;}
.btNoteV8194{font-size:13px;color:#9fb3c8;text-align:center;margin-top:0;transform:translateY(-8px);line-height:1.2;height:32px;overflow:hidden;}
.btDeviceRowV8197{display:grid;grid-template-columns:minmax(0,1fr) 116px 108px;gap:8px;margin:6px 0;align-items:center;}
.btDeviceRowV8197 .wifiBtn{height:46px;font-size:15px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;}
.btDeviceRowV8197 .btn{height:46px;font-size:14px;padding:0 4px;}
.maintPanelV8197c{width:720px;max-width:720px;margin:0 auto;display:grid;grid-template-rows:92px 1fr 56px;gap:12px;height:356px;}
.maintTempCardV8197c{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#111b27 0%,#080c12 100%);border:1px solid #203447;border-radius:14px;color:var(--amber);font-size:25px;font-weight:900;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.24);}
.maintActionsV8197c{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:82px;gap:12px;}
.maintActionsV8197c .setBtn{font-size:18px;border-radius:14px;}
.maintFooterV8197c{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.maintFooterV8197c .setBtn{height:56px;font-size:17px;}

/* V81.97f7: working idle splash plus Settings on/off option. */
.logoIdleOverlay{position:fixed;inset:0;background:#030406;z-index:10000;display:none;align-items:center;justify-content:center;flex-direction:column;color:#d7e6ff;}
.logoIdleOverlay.show{display:flex;}
.logoIdleOverlay img{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:cover;filter:none;}
.logoIdleHint{margin-top:28px;color:#6f8498;font-size:14px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;}

/* BUILD003.012 HOME PLUS LAYOUT */
.homeBtn[data-mode="local"]{grid-column:2;grid-row:1}
.homeBtn[data-mode="usb"]{grid-column:1;grid-row:2}
.homeBtn[data-mode="radio"]{grid-column:2;grid-row:2}
.homeBtn[data-mode="pc"]{grid-column:3;grid-row:2}
.homeBtn[data-mode="nas"]{grid-column:2;grid-row:3}
.homeBtn[data-mode="bluetooth_receiver"]{grid-column:3;grid-row:3}


/* BUILD003.013 MUSIC SERVER STABILISATION */
.musicKeyboardOpen{min-width:112px}
.musicSearchKeyboard h1{text-align:center;margin:4px 0 8px}
.musicSearchKeyboardValue{min-height:46px;padding:8px 12px;margin:0 auto 8px;max-width:720px;box-sizing:border-box;border:2px solid #244c70;border-radius:10px;background:#04070b;color:#fff;font-size:24px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#musicSearchKeys{max-width:760px;margin:0 auto}
.musicSearchKeyRow{display:flex;justify-content:center;gap:6px;margin:6px 0}
.musicSearchKey{height:48px;min-width:54px;padding:0 8px;border:1px solid #315777;border-radius:8px;background:#0d1a26;color:#fff;font-size:21px;font-weight:800}
.musicSearchKey:active{background:#164f86}
.musicSearchKeyboardControls{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:760px;margin:10px auto 0}
.musicSearchKeyboardControls .btn{height:48px;margin:0;padding:0 5px;font-size:16px}
@media (max-width:700px){
  .musicKeyboardOpen{min-width:86px;font-size:14px;padding-left:5px;padding-right:5px}
  .musicSearchKey{height:44px;min-width:8.4vw;padding:0 2px;font-size:18px}
  .musicSearchKeyRow{gap:3px;margin:5px 0}
  .musicSearchKeyboardControls{grid-template-columns:repeat(3,1fr)}
}

# ASKNIK compact touch control framework
.controlGrid{
    display:grid;
    gap:6px;
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    margin-top:12px;
    box-sizing:border-box;
}

.controlGrid.four{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.controlGrid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.controlBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    box-sizing:border-box;
    height:44px;
    padding:4px 6px;
    font-size:16px;
    font-weight:900;
    border-radius:8px;
    background:linear-gradient(180deg,#121b27 0%,#080c12 100%);
    color:#fff;
    border:1px solid #203447;
    text-align:center;
    line-height:1.05;
}

.controlBtn:active{
    transform:translateY(1px);
    filter:brightness(1.25);
}

.controlBtn.green{
    background:linear-gradient(180deg,#2e7d32 0%,#164d1a 100%);
    border-color:#57b85c;
}

.controlBtn.red{
    background:linear-gradient(180deg,#c62828 0%,#7d1515 100%);
    border-color:#e45a5a;
}

.controlBtn.blue{
    background:linear-gradient(180deg,#1976d2 0%,#0d47a1 100%);
    border-color:#3fa2ff;
}

.controlBtn.utility{
    height:40px;
    font-size:15px;
}


.nowPlayingControls{
    width:100%;
    max-width:700px;
    margin:12px auto 0 auto;
    box-sizing:border-box;
}


/* BUILD003.023.003 - Music Server Now Playing control sizing */
#musicServerNowPlaying .nowPlayingControls{
    display:block;
    width:100%;
    max-width:760px;
    margin:12px auto 0 auto;
    box-sizing:border-box;
}

#musicServerNowPlaying .controlGrid.four{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
}

#musicServerNowPlaying .controlGrid.three{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
}

.radioSearchPanel{height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px;padding:8px 12px;box-sizing:border-box;min-height:0}
.radioSearchLeft{display:flex;flex-direction:column;min-width:0;min-height:0}
.radioSearchInputs{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:center}
.radioSearchInputs .musicSearchInput{min-width:0;height:44px}
.radioSearchResults{flex:1;overflow-y:auto;min-height:0;border:1px solid #294766;border-radius:8px;padding:4px;background:rgba(5,7,10,.78);box-sizing:border-box}
.radioSearchResult{display:grid;grid-template-columns:30px minmax(0,1fr) 62px;gap:4px;align-items:center;min-height:30px;margin:2px 0;padding:2px 3px;border:1px solid #345676;border-radius:6px;background:#10273d;box-sizing:border-box}
.radioSearchResult:active{background:#1a3b58}
.radioSearchName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:28px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:#fff;font-size:14px;line-height:28px;text-align:left;cursor:pointer}
.radioSearchName:hover{background:#17304b}
.radioSearchAction{height:28px;margin:0;padding:0 6px;font-size:13px}
.radioSearchFavourite{width:28px;height:28px;border:0;border-radius:5px;background:#253b50;color:#cfd8e3;font-size:17px;line-height:26px;padding:0;cursor:pointer}
.radioSearchFavourite:hover{background:#30485f}
.radioSearchFavourite.active{color:#ff4f78;background:#3b2431}
.radioGenreColumn{min-width:0;min-height:0;overflow-y:auto}
.radioGenreButtons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.radioGenreButtons button{height:38px;border:1px solid #45617e;border-radius:7px;background:#17304b;color:#fff;font-size:15px;font-weight:bold;cursor:pointer}
.radioGenreButtons button:active{background:#1a3b58}
.radioSearchFooter{padding-top:6px;text-align:center}
#radioSearchStatus{min-height:24px}


/* BUILD004.011 - Boombox Music Server Random control */
#musicServerNowPlaying .musicServerUtilityGrid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
#musicServerNowPlaying .shuffleBtn.active{
    background:#d88900;
    border-color:#ffbd3b;
    color:#111;
    box-shadow:0 0 0 2px rgba(255,189,59,.25) inset;
}

/* BUILD004.012: first-class whole-library playback action. */
.musicServerPlayMusicBtn{font-size:24px;font-weight:800;letter-spacing:.5px;}

/* BUILD004.013 - Music Server artwork loading */
#musicServerNowArtwork{position:relative;overflow:hidden;transition:opacity .2s ease;}
#musicServerNowArtwork.loading{opacity:.55;}
#musicServerNowArtwork.loading::after{content:"LOADING COVER...";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:var(--amber);font-size:14px;font-weight:bold;}
#musicServerNowArtwork img{display:block;width:100%;height:100%;object-fit:cover;animation:musicServerCoverFade .25s ease;}
@keyframes musicServerCoverFade{from{opacity:0}to{opacity:1}}
.musicServerVolumeLevel{text-align:center;margin-top:8px;font-size:20px;font-weight:800;color:var(--amber)}
.musicServerSearchActions{display:flex;gap:6px;align-items:stretch;margin-bottom:6px}
.musicServerSearchActions .listItem{flex:1;margin:0}
.musicServerMiniBtn{min-width:86px;font-size:14px;padding:8px 6px}
.queueRow{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;margin-bottom:6px}
.queueRow.current{outline:2px solid var(--amber)}

/* BUILD004.017 - reserve the fixed Main Menu corner and shift actions left. */
#musicServerSearch .musicServerSearchActions{padding-right:150px;box-sizing:border-box;}
#musicServerQueue .queueRow{padding-right:150px;box-sizing:border-box;}
#musicServerQueueList,#musicServerGlobalResults{padding-bottom:54px;box-sizing:border-box;}


/* BUILD004.020: navigation and footer polish. */
.settingsInfo.settingsInfoPlain{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;}
.overlayHeader{display:flex;align-items:center;gap:12px;margin:2px 0 10px;}
.overlayHeader h1{flex:1;margin:0;text-align:left;}
.overlayBackBtn{min-width:120px;height:48px;margin:0;}

/* BUILD004.021 Music Server UI polish */
#musicServer .musicServerHomeHeader{position:relative;min-height:54px;margin-bottom:2px;}
#musicServer .musicServerHomeHeader h1{margin:5px 105px 2px;text-align:center;}
.musicServerHomeStatus{text-align:center;color:#8ea1b5;font-size:14px;font-weight:800;line-height:1.2;margin:0 auto 10px;min-height:18px;border:0;background:transparent;box-shadow:none;}
.musicServerHomeStatus.offline{color:#ff6b6b;}
.musicServerHomeGrid{height:344px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:76px;gap:9px;max-width:620px;margin:0 auto;}
.musicServerHomeGrid .setBtn{height:76px;}
.statusPanelScrollable{max-height:395px;overflow-y:auto;padding-right:8px;}
.statusSectionTitle{margin:10px 0 6px;padding-bottom:4px;border-bottom:1px solid #27435e;color:var(--amber);font-size:17px;font-weight:900;letter-spacing:.5px;}
.musicServerStatusDetails .statusLine span{max-width:68%;overflow-wrap:anywhere;text-align:right;}

/* BUILD006.002 - Hi-Fi source-selector operating model */
.sourceSelectorOverlay{padding:10px 14px 12px;box-sizing:border-box}.sourceSelectorOverlay h1{text-align:center;margin:4px 0 10px}.sourceSelectorGrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:92px;gap:8px;height:calc(100% - 58px)}.sourceSelectorGrid .setBtn{height:auto;margin:0;font-size:18px}.sourceSelectorGrid .setBtn:last-child{grid-column:3}.sourceGear{position:absolute;top:8px;right:10px}.hifiBottomBar{position:absolute;left:12px;right:12px;bottom:10px;height:38px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;z-index:31}.hifiBottomBar .btn{height:38px;margin:0;padding:0 4px;font-size:13px}.radioHifiBar{left:auto;width:61%;right:12px}.radioMainMenuFixed{display:none!important}#bluetoothReceiver .btPanelV8194{padding-bottom:50px}#sourceSelector .mainMenuFixed{display:none!important}

/* BUILD006.002 UI refinement */
.hifiBottomBar{display:flex;justify-content:center;align-items:center;gap:14px}
.hifiBottomBar .btn{min-width:132px}
.sourceSelectorOverlay .sourceGear{display:none!important}
.sourceSelectorOverlay .hifiBottomBar,.sourceSelectorOverlay .usbControls,.sourceSelectorOverlay .radioHifiBar{display:none!important}

/* BUILD006.035: right-aligned listening controls and isolated source selector. */
.radioHifiBar,.hifiBottomBar{display:flex;justify-content:flex-end;align-items:center;gap:8px;grid-template-columns:none}
.radioHifiBar{left:12px;right:12px;width:auto}
.radioHifiBar .btn:first-child,.hifiBottomBar .btn:first-child{width:90px;flex:0 0 90px}
.radioHifiBar .btn:last-child,.hifiBottomBar .btn:last-child{width:150px;flex:0 0 150px}
body.sourceSelectorActive .hifiBottomBar,
body.sourceSelectorActive .usbControls,
body.sourceSelectorActive .gear,
body.sourceSelectorActive .homeGear{display:none!important}
#sourceSelector{z-index:1000}
#sourceSelector .sourceSelectorGrid{display:grid!important}

/* BUILD006.035: compact EQ, unified radio control row, full-size source back arrow. */
.radioLeftControls{height:38px;display:flex;align-items:center;gap:6px;padding:0 4px;background:var(--panel2);border:1px solid #05070a}
.radioLeftControls .btn{height:34px;min-width:48px;margin:0;padding:0 9px;font-size:16px;display:flex;align-items:center;justify-content:center}
.radioLeftControls .radioControlSpacer{flex:1 1 auto}
.radioLeftControls .compactEqBtn{width:58px;min-width:58px;flex:0 0 58px;font-size:12px;padding:0 4px}
.radioLeftControls .selectSourceBtn{width:132px;min-width:132px;flex:0 0 132px;font-size:12px;padding:0 7px}
.hifiBottomBar .btn:first-child{width:64px;min-width:64px;flex:0 0 64px;font-size:12px}
.hifiBottomBar .btn:last-child{width:132px;min-width:132px;flex:0 0 132px;font-size:12px}
.sourceSelectorGrid .sourceBackArrow{grid-column:3;font-size:36px;line-height:1;font-family:Arial,Helvetica,sans-serif}

/* BUILD006.040 - Internet Radio bottom-row alignment only */
.main.radioVisualMode{position:relative;padding-bottom:42px}
.main.radioVisualMode .left{padding-bottom:0}
.main.radioVisualMode .radioLeftControls{margin:2px 0 0}
.main.radioVisualMode .radioLeftControls .btn{height:34px;min-width:0;flex:1 1 0}
.main.radioVisualMode .nav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 58px 132px;
  gap:4px;
  align-items:stretch;
  padding:2px 4px;
  z-index:35;
}
.main.radioVisualMode .nav .btn{
  width:auto;
  min-width:0;
  height:34px;
  margin:0;
  padding:0 4px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
}
.main.radioVisualMode .nav .radioNavEqBtn{font-size:11px}
.main.radioVisualMode .nav .radioNavSourceBtn{font-size:11px}

/* BUILD006.040 - keep all Internet Radio navigation controls on one row. */
.main.radioVisualMode .nav{
  grid-template-columns:minmax(82px,1fr) repeat(3,minmax(92px,1fr)) 58px 132px;
  grid-auto-flow:column;
  grid-auto-columns:auto;
  overflow:hidden;
}
.main.radioVisualMode .nav #pageText{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
}
.main.radioVisualMode .nav .radioNavEqBtn{grid-column:5}
.main.radioVisualMode .nav .radioNavSourceBtn{grid-column:6}


/* BUILD006.040 - source-specific UI cleanup and radio sizing. */
/* Radio-only controls must remain behind every overlay screen. */
.main.radioVisualMode .nav{z-index:5;}

/* Radio navigation buttons size to their labels while the right-hand controls remain fixed. */
.main.radioVisualMode .nav{
  display:flex;
  align-items:stretch;
  gap:4px;
}
.main.radioVisualMode .nav #pageText{flex:1 1 auto;min-width:0;display:flex;align-items:center;}
.main.radioVisualMode .nav #favViewBtn{flex:0 0 auto;width:auto;min-width:88px;padding-left:10px;padding-right:10px;}
.main.radioVisualMode .nav #allViewBtn{flex:0 0 auto;width:auto;min-width:96px;padding-left:10px;padding-right:10px;}
.main.radioVisualMode .nav #radioSearchBtn{flex:0 0 auto;width:auto;min-width:64px;padding-left:10px;padding-right:10px;}
.main.radioVisualMode .nav .radioNavEqBtn{flex:0 0 66px;width:66px;min-width:66px;font-size:12px;}
.main.radioVisualMode .nav .radioNavSourceBtn{flex:0 0 132px;width:132px;min-width:132px;font-size:11px;}

/* Local, PC and USB all share this one music control bar and therefore match exactly. */
#usb .usbControls .btn{height:56px;align-self:stretch;display:flex;align-items:center;justify-content:center;}
#usb .usbControls .usbUnifiedEq{font-size:13px!important;}
#usb .usbControls .usbReturn{height:56px!important;font-size:12px!important;align-self:stretch!important;}

/* BUILD006.040 - final shared control sizing polish. */
/* Internet Radio: make text controls fit their labels and enlarge EQ slightly. */
.main.radioVisualMode .nav #favViewBtn{
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  padding-left:8px;
  padding-right:8px;
}
.main.radioVisualMode .nav #allViewBtn{
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  padding-left:8px;
  padding-right:8px;
}
.main.radioVisualMode .nav #radioSearchBtn{
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  padding-left:8px;
  padding-right:8px;
}
.main.radioVisualMode .nav .radioNavEqBtn{
  flex:0 0 74px;
  width:74px;
  min-width:74px;
  font-size:13px;
}

/* Every non-radio listening screen uses the Radio-page Select Source dimensions. */
.hifiBottomBar .btn:last-child,
#usb .usbControls .usbReturn,
#musicServerNowPlaying .usbControls .usbReturn{
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  width:132px!important;
  min-width:132px!important;
  flex:0 0 132px!important;
  padding:0 4px!important;
  font-size:11px!important;
  line-height:1!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Match EQ sizing across non-radio source screens to the revised Radio EQ. */
.hifiBottomBar .btn:first-child,
#usb .usbControls .usbUnifiedEq,
#musicServerNowPlaying .usbControls .usbUnifiedEq{
  width:74px!important;
  min-width:74px!important;
  flex:0 0 74px!important;
  font-size:13px!important;
}

/* BUILD006.040 - balanced radio control proportions after BUILD006.039 overcorrection. */
.main.radioVisualMode .nav #favViewBtn{
  flex:0 0 108px;
  width:108px;
  min-width:108px;
  padding-left:12px;
  padding-right:12px;
}
.main.radioVisualMode .nav #allViewBtn{
  flex:0 0 116px;
  width:116px;
  min-width:116px;
  padding-left:12px;
  padding-right:12px;
}
.main.radioVisualMode .nav #radioSearchBtn{
  flex:0 0 84px;
  width:84px;
  min-width:84px;
  padding-left:12px;
  padding-right:12px;
}
.main.radioVisualMode .nav .radioNavEqBtn{
  flex:0 0 88px;
  width:88px;
  min-width:88px;
  font-size:14px;
}
.hifiBottomBar .btn:first-child,
#usb .usbControls .usbUnifiedEq,
#musicServerNowPlaying .usbControls .usbUnifiedEq{
  width:88px!important;
  min-width:88px!important;
  flex:0 0 88px!important;
  font-size:14px!important;
}


/* BUILD007.046 - balanced Internet Radio bottom navigation. */
.main.radioVisualMode .nav{display:grid!important;grid-template-columns:1.22fr 1.34fr .92fr .68fr 1.34fr!important;gap:5px!important;align-items:stretch!important;overflow:visible!important;}
.main.radioVisualMode .nav #pageText{display:none!important;}
.main.radioVisualMode .nav #favViewBtn,.main.radioVisualMode .nav #allViewBtn,.main.radioVisualMode .nav #radioSearchBtn,.main.radioVisualMode .nav .radioNavEqBtn,.main.radioVisualMode .nav .radioNavSourceBtn{grid-column:auto!important;width:100%!important;min-width:0!important;max-width:none!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0 7px!important;align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;}
.main.radioVisualMode .nav #favViewBtn,.main.radioVisualMode .nav #allViewBtn,.main.radioVisualMode .nav #radioSearchBtn{font-size:12px!important;}
.main.radioVisualMode .nav .radioNavEqBtn{font-size:14px!important;font-weight:900!important;}
.main.radioVisualMode .nav .radioNavSourceBtn{font-size:11px!important;}


/* BUILD007.046 - unified graphic Back control */
.backArrowBtn,
.sourceBackArrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.backArrowGlyph{
  position:relative;
  display:inline-block;
  width:34px;
  height:24px;
  flex:0 0 34px;
}
.backArrowGlyph::before{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  width:25px;
  height:4px;
  border-radius:3px;
  background:currentColor;
}
.backArrowGlyph::after{
  content:"";
  position:absolute;
  left:5px;
  top:4px;
  width:13px;
  height:13px;
  border-left:4px solid currentColor;
  border-bottom:4px solid currentColor;
  border-radius:2px;
  transform:rotate(45deg);
  transform-origin:center;
}
.sourceSelectorGrid .sourceBackArrow{
  font-size:inherit!important;
  line-height:normal!important;
  font-family:inherit!important;
}


/* BUILD007.046 - DSI startup splash. Audio/source initialisation continues underneath. */
.startupSplashOverlay{
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
  align-items:center;
  justify-content:center;
  background:#030406;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.startupSplashOverlay.show{display:flex;}
.startupSplashContent{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;gap:18px;}
.startupSplashOverlay img{width:100vw;height:calc(100vh - 70px);max-width:none;max-height:none;object-fit:contain;pointer-events:none;}
.startupSplashLoading{color:#d6e2ec;font-size:24px;font-weight:700;letter-spacing:1px;text-align:center;margin-top:-10px;}

/* BUILD007.007 - first-run touchscreen setup wizard */
.setupWizardOverlay{position:fixed;inset:0;z-index:100000;background:#05090d;display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;color:#eef5fa}
.setupWizardOverlay.show{display:flex}
.setupWizardCard{width:min(760px,96vw);max-height:94vh;overflow:auto;background:#101923;border:2px solid #2b4256;border-radius:16px;padding:20px;box-sizing:border-box;box-shadow:0 12px 45px rgba(0,0,0,.65)}
.setupWizardBrand{text-align:center;font-size:26px;font-weight:800;letter-spacing:1px}
.setupWizardStep{text-align:center;color:#86a6bd;font-size:14px;margin:4px 0 12px}
.setupWizardPage{display:none}
.setupWizardPage.active{display:block}
.setupWizardPage h1{text-align:center;margin:8px 0 12px;font-size:28px}
.setupWizardPage p{text-align:center;font-size:17px;line-height:1.35}
.setupWizardLabel{display:block;margin:16px 0 6px;font-weight:bold}
.setupWizardInput{display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid #3b5266;border-radius:8px;background:#0a1118;color:#fff;font-size:18px;margin:8px 0}
.setupWizardButtons,.setupNetworkMode,.setupWizardNetworkActions,.setupToggleRow{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.setupWizardButtons .btn{min-width:110px}
.setupNetworkMode .btn{flex:1;min-width:210px}
.setupWizardNetworkActions .btn{flex:1;min-width:170px}
.setupToggleRow .btn{min-width:130px}
.setupWizardStatus{text-align:center;min-height:24px;margin:10px 0;color:#f2c36b;font-weight:bold}
.setupWizardError{text-align:center;color:#ff8b8b;font-weight:bold;min-height:24px;margin-top:8px}
.setupWifiList{max-height:190px;overflow:auto;margin-top:8px}
.setupWifiList button{width:100%;margin:3px 0}
.setupMusicSources{text-align:center;font-size:18px;font-weight:bold;margin:18px 0;color:#8dc7ff}

/* BUILD007.007 setup wizard: fixed 800x480 appliance layout */
.setupWizardOverlay{padding:8px;overflow:hidden}
.setupWizardCard{width:780px;max-width:calc(100vw - 16px);height:464px;max-height:calc(100vh - 16px);overflow:hidden;padding:10px 14px;border-radius:12px}
.setupWizardBrand{font-size:22px}.setupWizardStep{font-size:12px;margin:2px 0 5px}.setupWizardPage h1{margin:3px 0 6px;font-size:24px}.setupWizardPage p{font-size:15px;line-height:1.2;margin:6px 0}.setupWizardLabel{margin:8px 0 4px}
.setupWizardInput.setupCompactInput{padding:8px;font-size:16px;margin:4px 0;height:38px}.setupNetworkMode{margin-top:6px;gap:8px}.setupNetworkMode .btn{min-width:0;padding:9px 12px;height:40px}.setupNetworkPanel{margin-top:5px}
.setupDhcpTop{display:flex;gap:8px;align-items:center;height:34px}.setupDhcpTop .setupWizardStatus{flex:1;text-align:left;margin:0;min-height:0;font-size:13px}.setupScanBtn{height:34px;padding:6px 12px;min-width:110px}
.setupWifiList{height:50px;max-height:50px;overflow:hidden;display:flex;gap:5px;margin:4px 0}.setupWifiList .wifiSetupChoice{flex:1;min-width:0;height:42px;padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setupCompactActions{margin:4px 0;gap:8px}.setupCompactActions .btn{height:38px;padding:7px 14px}.setupNetworkResult{min-height:74px;border:1px solid #355066;border-radius:7px;background:#0a1118;padding:6px 10px;box-sizing:border-box;margin-top:4px}.setupNetworkResultTitle{font-weight:800;text-align:center;font-size:14px;margin-bottom:3px}.setupNetworkResultLine{text-align:center;font-size:12px;line-height:1.25}.setupNetworkResultGrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;font-size:12px}.setupNetworkResultGrid span{color:#9db5c5}.setupNetworkResultGrid b{text-align:right}
.setupNetworkError{min-height:18px;margin:3px 0;font-size:12px}.setupNetworkFooter{margin-top:4px}.setupNetworkFooter .btn{height:38px}.setupStaticGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}.setupStaticValidateBtn{display:block;margin:6px auto 4px;height:38px;padding:7px 18px}.setupWizardError{min-height:18px;margin-top:2px;font-size:13px}.setupWizardNext{display:block;margin:18px auto 0;min-width:180px}
@media (max-height:500px){.setupWizardCard{height:calc(100vh - 12px);max-height:none}}

.setupConnectionChoices{display:flex;gap:18px;justify-content:center;margin:26px 0 18px}.setupConnectionChoice{width:330px;height:150px;border:2px solid #38576b;border-radius:12px;background:#0b151d;color:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;cursor:pointer}.setupConnectionChoice strong{font-size:22px}.setupConnectionChoice span{font-size:14px;opacity:.85}.setupConnectionChoice.selected{border-color:#38d27b;box-shadow:0 0 0 2px rgba(56,210,123,.2)}.setupTestButton{display:block;margin:10px auto 8px;height:40px;min-width:190px}.setupWifiListLarge{height:145px;max-height:145px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.setupWifiListLarge .wifiSetupChoice{height:42px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.factoryResetPanel{text-align:center;max-width:720px;margin:20px auto}
.factoryResetChoiceTitle{font-size:22px;font-weight:bold;margin:28px 0 12px}
.factoryResetChoices,.factoryResetActions{display:flex;gap:14px;justify-content:center;margin:12px 0}
.factoryResetChoices .setBtn,.factoryResetActions .setBtn{min-width:210px;height:58px}

/* BUILD007.011 - compact Factory Reset layout for 800x480 */
#factoryReset{padding:8px 14px !important;box-sizing:border-box}
#factoryReset h1{font-size:24px !important;margin:4px 0 6px !important}
#factoryReset .factoryResetPanel{max-width:760px !important;margin:4px auto !important;padding:8px 12px !important}
#factoryReset .factoryResetPanel .statusDetail{font-size:13px !important;line-height:1.15 !important;margin:3px 0 !important}
#factoryReset .factoryResetChoiceTitle{font-size:14px !important;margin:7px 0 3px !important}
#factoryReset .factoryResetChoices{display:flex !important;gap:8px !important;margin:2px 0 !important}
#factoryReset .factoryResetChoices .setBtn{min-width:0 !important;flex:1 1 0 !important;height:36px !important;padding:4px 8px !important;font-size:12px !important}
#factoryReset .factoryResetActions{gap:10px !important;margin:8px 0 2px !important}
#factoryReset .factoryResetActions .setBtn{min-width:150px !important;height:38px !important;font-size:13px !important}

/* BUILD007.013 - Now Playing technical details */
.musicServerSpecsHeading{font-size:11px;font-weight:900;letter-spacing:.6px;color:var(--amber);margin-top:7px;margin-bottom:2px}
.musicServerAudioSpecs{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12px;margin-top:2px;line-height:1.15}
.musicServerAudioSpecs b{color:var(--amber)}

/* BUILD007.086 R14 - MAIN STATION UP ANOTHER 10MM
   Main Internet Radio page only.
   Search controls intentionally untouched. */
.stationHead{
    justify-content:flex-end;
    text-align:right;
    max-width:55%;
    margin-left:auto;
    margin-right:20px;
}
.main.radioVisualMode .stations{
    padding-top:0 !important;
    margin-top:-76px !important;
}
.main.radioVisualMode .radioStationVisualRow{
    gap:3px;
    margin-bottom:2px !important;
}
.main.radioVisualMode .radioStationHeart{
    flex:0 0 28px;
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
    font-size:17px;
    line-height:28px;
    padding:0;
}
.main.radioVisualMode .radioStationVisualRow .stationBtn{
    height:28px;
    min-height:28px;
    padding:0 7px;
    line-height:28px;
    font-size:13px;
    margin-bottom:0;
}
/* BUILD007.113: fix oversized volume row on Bluetooth Audio page and its
   overlap with the note text below it. Scoped to #bluetoothReceiver only. */
#bluetoothReceiverVolumeRow{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;margin:6px 0 10px 0}
#bluetoothReceiverVolumeRow .btn{width:34px;height:30px;flex:0 0 34px;font-size:16px;padding:0}
#bluetoothReceiverVolumeRow #bluetoothReceiverVolume{height:30px;width:70px;flex:0 0 70px;font-size:12px}
#bluetoothReceiver .btListV8197{height:160px}
#bluetoothReceiver .btNoteV8194{transform:none;margin-top:4px}

/* BUILD007.121: 10-band EQ layout - 5 columns (2 rows of 5), custom preset
   chip row, and a small forget button on each chip. */
.eqSliders{grid-template-columns:repeat(5,1fr)!important}
.eqCustomPresetsRow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px 0}
.eqPresetChip{display:flex;align-items:stretch;border-radius:8px;overflow:hidden}
.eqPresetChip .eqPresetBtn{margin:0;border-radius:0}
.eqPresetForget{background:#3a1218;color:#ffb3b3;border:0;padding:0 10px;font-weight:900;cursor:pointer}
#eqSaveAsBtn:disabled{opacity:.5;cursor:not-allowed}

/* BUILD007.122: fix EQ panel layout after adding the custom-presets row.
   .eqPanel was a rigid 3-row grid (62px/236px/62px) built for exactly 3
   children in a fixed order - the new eqCustomPresets div became an
   unplanned 4th child, got auto-placed into the sliders' row, squeezed the
   actual 10 sliders into 62px, and pushed everything else into an overflow
   row at the bottom. Switching to a flexible column layout that sizes
   itself to content instead, with a scroll safety net, so it adapts
   correctly regardless of how many rows the sliders wrap into or whether
   the presets row is empty. */
.eqPanel{
    height:auto!important;
    max-height:100%;
    display:flex!important;
    flex-direction:column;
    gap:6px;
    overflow-y:auto;
}
.eqTop{flex:0 0 auto}
.eqCustomPresetsRow{flex:0 0 auto;min-height:0}
.eqSliders{flex:1 1 auto;min-height:0}
.eqBottom{flex:0 0 auto}
.eqBand{grid-template-rows:24px 26px 1fr 26px!important;gap:3px!important}

/* BUILD007.123: single row of all 10 EQ bands instead of 2 rows of 5.
   Narrower columns (~72px each at panel width 790px) need tighter gap and
   smaller label/value text to stay legible and avoid wrapping. */
.eqSliders{grid-template-columns:repeat(10,1fr)!important;gap:3px!important;padding:6px!important}
.eqBandName{font-size:10px!important}
.eqValue{font-size:11px!important}
.eqSmallBtn{font-size:13px!important;padding:0!important}

/* BUILD007.125: taller EQ panel for more slider travel room, per request.
   overflow-y:auto stays as a safety net in case this is too tall for the
   screen - it'll scroll rather than clip/break the layout if so. */
.eqPanel{height:430px!important;max-height:430px!important}

/* BUILD007.126: RESET removed (identical behaviour to FLAT) - eqTop now
   has 3 buttons, eqBottom now has 3 items instead of 4. */
.eqTop{grid-template-columns:repeat(3,1fr)!important}
.eqBottom{grid-template-columns:repeat(3,1fr)!important}





/* BUILD007.168: Recordings page - list, player bar, drag-seek */
.recordingsList{overflow-y:auto;max-height:calc(100vh - 220px);margin-bottom:8px}
.recordingItem{display:flex;align-items:center;gap:8px;background:var(--panel3);border-radius:6px;padding:8px 10px;margin-bottom:6px}
.recordingInfo{flex:1;min-width:0}
.recordingStation{font-weight:bold;font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recordingMeta{font-size:11px;color:#9fb4c7}
.recordingItem .btn{height:36px;min-width:44px;font-size:14px;padding:0 8px}
.recordingsPlayerBar{position:sticky;bottom:0;background:#0d1620;border:1px solid #24384c;border-radius:8px;padding:10px;margin-top:6px}
.recordingsNowLabel{font-size:13px;font-weight:bold;color:#d6e2ec;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recordingsSeekTrack{position:relative;height:20px;background:#101923;border-radius:10px;border:1px solid #24384c;touch-action:none;cursor:pointer}
.recordingsSeekFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);border-radius:10px 0 0 10px}
.recordingsSeekHandle{position:absolute;top:50%;left:0%;width:18px;height:18px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,0.5)}
.recordingsTimeRow{display:flex;justify-content:space-between;font-size:11px;color:#9fb4c7;margin-top:4px}
.recordingsPlayerBtns{display:flex;gap:8px;margin-top:8px}
.recordingsPlayerBtns .btn{flex:1;height:38px}


/* BUILD007.171: Recordings page redesign - fixed bottom bar, single-line
   tap-to-play rows, flashing record indicator */
#recordings{display:flex;flex-direction:column}
#recordings .recordingsList{flex:1;overflow-y:auto;margin-bottom:8px}
.recordingsBottomFixed{position:sticky;bottom:0;background:#0b131b;padding-top:6px}
.recordingItem{display:flex;align-items:center;gap:10px;background:var(--panel3);border-radius:4px;padding:10px 12px;margin-bottom:5px;cursor:pointer;white-space:nowrap;overflow:hidden}
.recordingItem .recordingStation{font-weight:bold;font-size:14px;color:#fff;flex-shrink:0}
.recordingItem .recordingMeta{font-size:12px;color:#9fb4c7;flex-shrink:0}
.recordingItem .recordingDelete{margin-left:auto;flex-shrink:0;background:none;border:0;color:#ff6b6b;font-size:18px;padding:4px 8px;cursor:pointer}

#recordBtn.recordingLive{animation:recordFlash 1s step-start infinite}
@keyframes recordFlash{
  0%,49%{opacity:1}
  50%,100%{opacity:0.25}
}


/* BUILD007.172: one-row permanent player bar, storage info, back arrow below */
.recordingsStorageInfo{font-size:12px;color:#9fb4c7;margin-bottom:6px;text-align:center}
.recordingsPlayerBar{display:flex;align-items:center;gap:8px;background:var(--panel3);border-radius:4px;padding:8px 10px;margin-bottom:6px}
.recordingsNowLabel{font-size:12px;color:#d6e2ec;flex:0 0 auto;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recordingsSeekTrack{flex:1;position:relative;height:18px;background:#101923;border-radius:9px;border:1px solid #24384c;touch-action:none;cursor:pointer;min-width:0}
.recordingsTimeCombined{font-size:11px;color:#9fb4c7;flex:0 0 auto;white-space:nowrap}
.recordingsPlayerBar .btn{flex:0 0 auto;height:32px;min-width:50px;font-size:12px;padding:0 8px}


/* BUILD007.209: meter style dropdown */
.meterStyleSelect{grid-column:1/-1;width:100%;height:52px;font-size:18px;font-weight:bold;background:#1a2733;color:#d6e2ec;border:2px solid #24384c;border-radius:8px;padding:0 12px;-webkit-appearance:none;appearance:none;text-align:center}
.meterStyleSelect:focus{outline:none;border-color:var(--accent)}