*{box-sizing:border-box}

body{
margin:0;
background:#0b1020;
color:#e8edf7;
font-family:Inter,system-ui,sans-serif;
transition:.5s;
}

body.batteryMode{
background:
radial-gradient(circle at top,#14361c,#08110c 60%);
animation:pulseBg 2s infinite;
}

@keyframes pulseBg{
0%{filter:brightness(1)}
50%{filter:brightness(1.12)}
100%{filter:brightness(1)}
}

.wrap{
max-width:1280px;
margin:0 auto;
padding:28px;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:28px;
border-radius:30px;
background:linear-gradient(135deg,#1d2b52,#101729);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.heroRight{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}

.eyebrow{
color:#7eb4ff;
font-weight:700;
letter-spacing:.12em;
font-size:12px;
text-transform:uppercase;
}

h1{
font-size:42px;
margin:8px 0;
}

p{
color:#aab6d3;
margin:0;
}

.pill{
padding:14px 20px;
border-radius:999px;
font-weight:900;
font-size:15px;
}

.pill.ok{
background:#123522;
color:#7dffbd;
}

.pill.battery{
background:#1f4722;
color:#8eff99;
animation:pulse 1s infinite;
}

@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.06)}
100%{transform:scale(1)}
}

.pill.bad{
background:#4d1b24;
color:#ff98a8;
}

.batteryWrap{
display:flex;
align-items:center;
gap:20px;
}

.batteryRing{
position:relative;
width:140px;
height:140px;
}

.batteryRing svg{
transform:rotate(-90deg);
width:140px;
height:140px;
}

.ringBg{
fill:none;
stroke:#25314f;
stroke-width:10;
}

.ringProgress{
fill:none;
stroke:#76ff9f;
stroke-width:10;
stroke-linecap:round;
transition:.5s;
}

.batteryCenter{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

#batteryPercent{
font-size:28px;
font-weight:900;
}

.runtimeBox{
display:flex;
flex-direction:column;
gap:6px;
}

.runtimeBox strong{
font-size:30px;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.cards{
margin:22px 0;
}

.card,.panel{
border-radius:24px;
padding:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.card strong{
display:block;
font-size:34px;
margin:10px 0;
}

.card small,
.card span{
color:#9db0cf;
}

.panel{
margin-top:22px;
}

.panelHead{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
flex-wrap:wrap;
}

.filters{
display:flex;
gap:10px;
flex-wrap:wrap;
}

button{
background:#24314f;
color:white;
border:none;
padding:10px 16px;
border-radius:14px;
font-weight:700;
cursor:pointer;
}

button.active{
background:#79a8ff;
color:#071126;
}

.charts{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:18px;
}

.chartBox{
background:rgba(0,0,0,.2);
padding:16px;
border-radius:18px;
}

canvas{
width:100%;
height:220px;
}

pre{
background:#060b15;
padding:16px;
border-radius:18px;
overflow:auto;
max-height:380px;
}

footer{
display:flex;
justify-content:space-between;
margin:20px 4px;
color:#8292b1;
}

@media(max-width:980px){
.grid,.charts{
grid-template-columns:1fr;
}
.hero{
flex-direction:column;
}
}


.muted{
color:#95a3bf;
font-size:14px;
max-width:720px;
}

.sineGrid{
display:grid;
grid-template-columns:2fr 1fr;
gap:18px;
align-items:stretch;
margin-top:14px;
}

.sineBox canvas{
height:260px;
}

.sineInfo{
display:grid;
gap:14px;
}

.sineInfo div{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px;
}

.sineInfo span{
display:block;
color:#9db0cf;
font-size:14px;
margin-bottom:8px;
}

.sineInfo strong{
font-size:28px;
}

.runtimeBox small{
color:#9db0cf;
}

@media(max-width:980px){
.sineGrid{
grid-template-columns:1fr;
}
}


.quickNav{
margin:18px 0 4px;
display:flex;
justify-content:flex-end;
}

.quickNav a{
color:#dbeafe;
background:rgba(121,168,255,.13);
border:1px solid rgba(121,168,255,.35);
padding:12px 16px;
border-radius:16px;
text-decoration:none;
font-weight:800;
}

.quickNav a:hover{
background:rgba(121,168,255,.24);
}

.sineInfo strong{
display:flex;
align-items:baseline;
gap:8px;
font-size:28px;
}

.sineInfo strong span{
font-size:28px;
}

.sineInfo strong::first-letter{
font-size:inherit;
}

.sineInfo strong{
line-height:1;
}

.sineInfo strong > span + text,
.sineInfo strong{
white-space:nowrap;
}

.techHero{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:24px;
align-items:start;
}

.techPhotos{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.techPhotos figure{
margin:0;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
overflow:hidden;
}

.techPhotos img{
width:100%;
display:block;
aspect-ratio:4/3;
object-fit:cover;
background:#101729;
}

.techPhotos figcaption{
padding:12px 14px;
color:#9db0cf;
font-weight:700;
}

.statsGrid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:18px;
}

.statBig{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:18px;
}

.statBig span{
display:block;
color:#9db0cf;
font-size:14px;
margin-bottom:8px;
}

.statBig strong{
font-size:30px;
}

.techTable{
width:100%;
border-collapse:collapse;
margin-top:12px;
}

.techTable td{
padding:12px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.techTable td:first-child{
color:#9db0cf;
width:260px;
}

.actionRow{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:16px;
}

.actionRow a{
background:#24314f;
color:white;
text-decoration:none;
padding:12px 16px;
border-radius:14px;
font-weight:800;
}

@media(max-width:980px){
.techHero,.techPhotos,.statsGrid{
grid-template-columns:1fr;
}
}

.topActions{display:flex;align-items:center;gap:12px}
.miniBtn{padding:10px 14px;border-radius:999px;background:#25314f;border:1px solid rgba(255,255,255,.12)}
.historyTools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.historyTools label{display:flex;align-items:center;gap:8px;color:#aebbd3;font-weight:700}
.historyTools input{background:#0e172c;color:#e8edf7;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 10px}
.checkLine{background:rgba(121,168,255,.08);padding:8px 12px;border-radius:12px}
.reportBox{padding:16px;border-radius:18px;background:rgba(118,255,159,.07);border:1px solid rgba(118,255,159,.18);color:#dbeafe;margin-bottom:16px;line-height:1.5}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.modal.hidden{display:none}
.modalBox{width:min(1100px,95vw);max-height:90vh;overflow:auto;background:#11182b;border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.modalChart canvas{height:420px}.batteryWrap{cursor:pointer}
body.lightMode{background:#eef3fb;color:#142033}
body.lightMode .card,body.lightMode .panel,body.lightMode .chartBox,body.lightMode .statBig,body.lightMode .sineInfo div{background:#fff;border-color:#dbe4f0;color:#142033}
body.lightMode .hero{background:linear-gradient(135deg,#dfeaff,#fff);border-color:#dbe4f0}
body.lightMode p,body.lightMode .muted,body.lightMode .card small,body.lightMode .card span,body.lightMode .sineInfo span,body.lightMode footer{color:#53657f}
body.lightMode pre{background:#eef3fb;color:#142033}
body.lightMode .historyTools input{background:#fff;color:#142033;border-color:#cbd6e6}
.techPhotos img{object-fit:contain!important;background:#101729}
.cameraBox{margin-top:18px;display:grid;grid-template-columns:1fr;gap:12px}
.cameraPreview{height:260px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,#0a1020,#18243f);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:pointer}
.cameraPreview strong{font-size:28px;display:block;margin-bottom:8px}
.versionList li{margin:12px 0;line-height:1.45}

/* v3.5 readability and live-control fixes */

body.lightMode .quickNav a,
body.lightMode button,
body.lightMode .actionRow a,
body.lightMode .miniBtn{
background:#dbeafe;
color:#0f172a !important;
border-color:#93c5fd;
}

body.lightMode .reportBox{
background:#ecfdf5;
border-color:#86efac;
color:#0f172a;
}

body.lightMode .reportBox strong{
color:#052e16;
}

body.lightMode .pill.ok{
background:#dcfce7;
color:#14532d;
}

body.lightMode .pill.battery{
background:#fef3c7;
color:#78350f;
}

body.lightMode .pill.bad{
background:#fee2e2;
color:#7f1d1d;
}

body.lightMode .modalBox{
background:#ffffff;
color:#142033;
}

body.lightMode .historyTools{
background:#f8fafc;
border-color:#dbe4f0;
}

body.lightMode .checkLine{
background:#e0ecff;
color:#0f172a;
}

.liveHint{
margin-top:4px;
font-size:13px;
}

canvas{
touch-action:pan-y;
}

.chartBox canvas{
cursor:crosshair;
}


.chartTitle{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.chartTitle h3{
margin:0;
}

.expandChart{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
padding:0;
border-radius:12px;
opacity:.85;
}

.expandChart:hover{
opacity:1;
transform:scale(1.04);
}

.modalActions{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}

.wideModal{
width:min(1500px,96vw);
}

.wideModal .modalChart canvas{
height:62vh;
min-height:520px;
}

body.lightMode .expandChart,
body.lightMode .modalActions button{
background:#dbeafe;
color:#0f172a !important;
border-color:#93c5fd;
}

.chartBox canvas{
cursor:grab;
}

.chartBox canvas:active{
cursor:grabbing;
}


.timeDialRow{
display:flex;
align-items:center;
gap:20px;
margin:16px 0 18px;
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}

.timeDial{
position:relative;
width:72px;
height:72px;
flex:0 0 auto;
}

.timeDial svg{
width:72px;
height:72px;
transform:rotate(-90deg);
overflow:visible;
}

.timeDial text{
font-size:11px;
fill:#9db0cf;
font-weight:800;
transform:rotate(90deg);
transform-origin:center;
}

.dialFace{
fill:rgba(255,255,255,.03);
stroke:rgba(255,255,255,.12);
stroke-width:2;
}

.dialTrack{
fill:none;
stroke:rgba(255,255,255,.10);
stroke-width:12;
}

.dialProgress{
fill:none;
stroke:#76ff9f;
stroke-width:12;
stroke-linecap:round;
transition:stroke-dashoffset .25s ease;
transform-origin:center;
}

.dialHand{
stroke:rgba(255,255,255,.42);
stroke-width:3;
stroke-linecap:round;
}

.dialCenter{
fill:#76ff9f;
}

.dialLabel{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
pointer-events:none;
}

.dialLabel strong{
font-size:16px;
line-height:1;
}

.dialLabel span{
font-size:9px;
color:#9db0cf;
font-weight:800;
}

.timeDialInfo{
display:flex;
flex-direction:column;
gap:8px;
}

.timeDialInfo strong{
font-size:22px;
}

.timeDialInfo span{
color:#9db0cf;
line-height:1.35;
}

body.lightMode .timeDialRow{
background:#f8fafc;
border-color:#dbe4f0;
}

body.lightMode .dialFace{
fill:#ffffff;
stroke:#dbe4f0;
}

body.lightMode .dialTrack{
stroke:#dbe4f0;
}

body.lightMode .dialHand{
stroke:#64748b;
}

body.lightMode .timeDial text,
body.lightMode .dialLabel span,
body.lightMode .timeDialInfo span{
color:#53657f;
fill:#53657f;
}

@media(max-width:720px){
.timeDialRow{
flex-direction:column;
align-items:flex-start;
}
}


.heroLogoWrap{
display:flex;
justify-content:flex-start;
align-items:center;
margin-bottom:18px;
}

.heroLogo{
max-width:260px;
width:100%;
height:auto;
object-fit:contain;
filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));
transition:transform .25s ease;
}

.heroLogo:hover{
transform:scale(1.02);
}

body.lightMode .heroLogo{
filter:drop-shadow(0 6px 16px rgba(15,23,42,.12));
}

@media(max-width:768px){
.heroLogo{
max-width:180px;
}
}


.timeDialRow{
padding:10px 14px !important;
margin:10px 0 14px !important;
gap:12px !important;
align-items:center !important;
}

.timeDialInfo strong{
font-size:14px !important;
}

.timeDialInfo span{
font-size:12px !important;
max-width:340px;
}

.heroLogo{
max-width:340px !important;
width:auto !important;
display:block;
}

.heroLogoWrap{
margin-bottom:10px !important;
}

@media(max-width:768px){
.heroLogo{
max-width:220px !important;
}
}


/* v3.11 logo hard-fix */
.heroLogoWrap{
display:flex !important;
justify-content:flex-start !important;
align-items:center !important;
margin:0 0 18px 0 !important;
min-height:46px;
}

.heroLogo{
display:block !important;
width:auto !important;
max-width:360px !important;
max-height:82px !important;
height:auto !important;
object-fit:contain !important;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.16));
}

body.lightMode .heroLogo{
filter:drop-shadow(0 6px 14px rgba(15,23,42,.12));
}

@media(max-width:768px){
.heroLogo{
max-width:240px !important;
max-height:64px !important;
}
}


/* v3.12 proper compact logo */
.heroLogoWrap{
margin-bottom:12px !important;
}

.heroLogo{
max-width:150px !important;
max-height:58px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}

@media(max-width:768px){
.heroLogo{
max-width:110px !important;
max-height:46px !important;
}
}


/* v3.14 shared theme on subpages */
body.lightMode .heroRight .miniBtn,
body.lightMode #themeToggle{
background:#dbeafe;
color:#0f172a !important;
border-color:#93c5fd;
}

body.lightMode .techTable td{
border-bottom-color:#dbe4f0;
}

body.lightMode .techTable td:first-child{
color:#475569;
}

body.lightMode .versionList li{
color:#142033;
}


/* v3.16 safe animated waveform */
.waveModeSwitch{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:12px 0 0;
}

.waveModeSwitch button{
border-radius:999px;
padding:10px 14px;
font-weight:900;
background:#24314f;
color:#e8edf7;
border:1px solid rgba(255,255,255,.12);
}

.waveModeSwitch button.active{
background:#dcfce7;
color:#14532d;
border-color:#86efac;
}

.waveModeSwitch #waveBatteryBtn.active{
background:#fee2e2;
color:#7f1d1d;
border-color:#fca5a5;
}

.chartBox.batteryWave{
box-shadow:0 0 0 1px rgba(239,68,68,.25), 0 0 40px rgba(239,68,68,.08) inset;
}

.chartBox.gridWave{
box-shadow:0 0 0 1px rgba(34,197,94,.18), 0 0 40px rgba(34,197,94,.06) inset;
}

body.lightMode .waveModeSwitch button{
background:#dbeafe;
color:#0f172a;
border-color:#93c5fd;
}

body.lightMode .waveModeSwitch button.active{
background:#dcfce7;
color:#14532d;
border-color:#86efac;
}

body.lightMode .waveModeSwitch #waveBatteryBtn.active{
background:#fee2e2;
color:#7f1d1d;
border-color:#fca5a5;
}


/* v3.17 waveform auto mode */
.waveModeSwitch #waveAutoBtn.active{
background:#dbeafe;
color:#1e3a8a;
border-color:#93c5fd;
}

body.lightMode .waveModeSwitch #waveAutoBtn.active{
background:#bfdbfe;
color:#1e3a8a;
border-color:#60a5fa;
}


/* v3.18 smooth live charts */
.chartBox canvas{
transition:filter .2s ease;
}

.chartBox:hover canvas{
filter:brightness(1.03);
}

.liveBadge{
animation:livePulse 1s infinite;
}

@keyframes livePulse{
0%{opacity:.55}
50%{opacity:1}
100%{opacity:.55}
}


/* v3.19 fixes */
body.lightMode .techPhotos figure,
body.lightMode .techPhotos img{
background:#ffffff !important;
}

body.lightMode .techPhotos figcaption{
background:#ffffff !important;
color:#334155 !important;
}

body.lightMode .sineInfo strong,
body.lightMode .sineInfo span,
body.lightMode .sineInfo div{
color:#0f172a;
}

body.lightMode .waveModeSwitch button{
color:#0f172a !important;
}

.chartBox canvas{
image-rendering:auto;
}


/* v3.20 input/output/delta energy quality charts */
.stabilityCard{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.stabilityBox{
display:grid;
gap:14px;
padding:12px 0 4px;
}
.stabilityBox div{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:16px;
}
.stabilityBox span{
display:block;
color:#9db0cf;
font-size:14px;
font-weight:800;
margin-bottom:8px;
}
.stabilityBox strong{
font-size:30px;
}
body.lightMode .stabilityBox div{
background:#ffffff;
border-color:#dbe4f0;
}
body.lightMode .stabilityBox span{
color:#53657f;
}
body.lightMode .techPhotos figure,
body.lightMode .techPhotos img{
background:#ffffff !important;
}
@media(max-width:1200px){
.chartGrid{grid-template-columns:1fr !important;}
}


/* v3.21 Fibaro HC2 integration */
.hc2Panel{
border-color:rgba(59,130,246,.28);
}

.hc2Status{
display:inline-flex;
align-items:center;
padding:10px 14px;
border-radius:999px;
background:rgba(148,163,184,.12);
border:1px solid rgba(148,163,184,.22);
font-weight:900;
color:#cbd5e1;
white-space:nowrap;
}

.hc2Status.ok{
background:rgba(34,197,94,.15);
border-color:rgba(34,197,94,.35);
color:#bbf7d0;
}

.hc2Status.warn{
background:rgba(245,158,11,.15);
border-color:rgba(245,158,11,.35);
color:#fde68a;
}

.hc2Status.bad{
background:rgba(239,68,68,.15);
border-color:rgba(239,68,68,.35);
color:#fecaca;
}

.hc2Config{
display:grid;
grid-template-columns:repeat(3,minmax(160px,1fr)) auto auto auto;
gap:12px;
align-items:end;
margin:18px 0;
}

.hc2Config label{
display:grid;
gap:7px;
font-weight:800;
color:#9db0cf;
}

.hc2Config input{
width:100%;
}

.hc2Cards{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.hc2Card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:18px;
}

.hc2Card span{
display:block;
color:#9db0cf;
font-weight:800;
margin-bottom:8px;
}

.hc2Card strong{
font-size:32px;
display:block;
}

.hc2Card small{
color:#9db0cf;
font-weight:700;
}

.hc2RawBox{
margin-top:14px;
}

.hc2RawBox pre{
max-height:360px;
overflow:auto;
font-size:12px;
}

body.lightMode .hc2Status{
background:#f1f5f9;
border-color:#cbd5e1;
color:#334155;
}

body.lightMode .hc2Status.ok{
background:#dcfce7;
border-color:#86efac;
color:#14532d;
}

body.lightMode .hc2Status.warn{
background:#fef3c7;
border-color:#fcd34d;
color:#78350f;
}

body.lightMode .hc2Status.bad{
background:#fee2e2;
border-color:#fca5a5;
color:#7f1d1d;
}

body.lightMode .hc2Config label,
body.lightMode .hc2Card span,
body.lightMode .hc2Card small{
color:#53657f;
}

body.lightMode .hc2Card{
background:#ffffff;
border-color:#dbe4f0;
}

@media(max-width:1200px){
.hc2Config{
grid-template-columns:1fr 1fr;
}
.hc2Cards{
grid-template-columns:1fr 1fr;
}
}

@media(max-width:760px){
.hc2Config,
.hc2Cards{
grid-template-columns:1fr;
}
}


/* v3.23 FORCE PANEL compact dashboard for RPi5 screen */
.forceBtn.active{
background:#facc15 !important;
color:#111827 !important;
border-color:#f59e0b !important;
}

.forcePanel{
font-size:13px;
overflow-x:hidden;
}

.forcePanel .wrap{
max-width:none;
width:100%;
padding:8px;
}

.forcePanel .hero{
padding:10px 12px;
border-radius:18px;
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;
margin-bottom:8px;
}

.forcePanel .hero h1{
font-size:20px;
margin:0;
}

.forcePanel .eyebrow,
.forcePanel .heroSmall{
font-size:11px;
letter-spacing:.06em;
margin-bottom:3px;
}

.forcePanel .hero p{
display:none;
}

.forcePanel .heroLogoWrap{
margin-bottom:4px !important;
min-height:0;
}

.forcePanel .heroLogo{
max-width:92px !important;
max-height:38px !important;
}

.forcePanel .quickNav{
display:none;
}

.forcePanel .panel{
padding:10px;
border-radius:18px;
margin-bottom:8px;
}

.forcePanel .panelHead{
display:flex;
gap:8px;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
}

.forcePanel .panelHead h2{
font-size:15px;
margin:0;
}

.forcePanel .muted,
.forcePanel .forcePanelHint{
font-size:11px;
margin:2px 0;
}

.forcePanel .cards,
.forcePanel .grid.cards{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
}

.forcePanel .card{
padding:10px;
border-radius:16px;
min-height:84px;
}

.forcePanel .card span{
font-size:11px;
}

.forcePanel .card strong{
font-size:21px;
line-height:1.05;
}

.forcePanel .card small{
font-size:10px;
}

.forcePanel .batteryWrap{
transform:scale(.82);
transform-origin:center;
}

.forcePanel .historyTools{
display:grid;
grid-template-columns:repeat(8,minmax(0,1fr));
gap:6px;
padding:8px;
margin:8px 0;
}

.forcePanel .historyTools label{
font-size:10px;
gap:3px;
}

.forcePanel .historyTools input{
padding:6px;
font-size:11px;
min-width:0;
width:100%;
}

.forcePanel .historyTools button,
.forcePanel .filters button,
.forcePanel button{
padding:7px 9px;
font-size:11px;
border-radius:10px;
}

.forcePanel .filters{
gap:6px;
}

.forcePanel .reportBox{
font-size:11px;
padding:8px 10px;
margin-bottom:8px;
border-radius:14px;
}

.forcePanel .chartGrid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}

.forcePanel .chartBox{
padding:8px;
border-radius:16px;
min-height:190px;
}

.forcePanel .chartBox h3,
.forcePanel .chartTitle h3{
font-size:12px;
margin:0;
}

.forcePanel .chartTitle{
margin-bottom:4px;
}

.forcePanel .expandChart{
width:28px;
height:28px;
font-size:13px;
border-radius:9px;
}

.forcePanel .chartBox canvas{
height:150px !important;
min-height:150px !important;
max-height:150px !important;
}

.forcePanel .sineGrid{
display:grid;
grid-template-columns:2fr 1fr;
gap:8px;
}

.forcePanel .sineBox canvas{
height:150px !important;
}

.forcePanel .sineInfo{
gap:8px;
}

.forcePanel .sineInfo div{
padding:10px;
border-radius:14px;
}

.forcePanel .sineInfo span{
font-size:11px;
}

.forcePanel .sineInfo strong{
font-size:20px;
}

.forcePanel .waveModeSwitch{
gap:6px;
margin-top:6px;
}

.forcePanel .waveModeSwitch button{
font-size:10px;
padding:7px 9px;
}

.forcePanel .hc2Panel{
display:block;
}

.forcePanel .hc2Config{
display:grid;
grid-template-columns:1.2fr .9fr .9fr auto auto auto;
gap:6px;
margin:8px 0;
}

.forcePanel .hc2Config label{
font-size:10px;
gap:3px;
}

.forcePanel .hc2Config input{
padding:6px;
font-size:11px;
min-width:0;
}

.forcePanel .hc2Cards{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}

.forcePanel .hc2Card{
padding:10px;
border-radius:16px;
}

.forcePanel .hc2Card span,
.forcePanel .hc2Card small{
font-size:10px;
}

.forcePanel .hc2Card strong{
font-size:20px;
}

.forcePanel .hc2RawBox{
display:none;
}

.forcePanel footer{
font-size:10px;
padding:8px 0;
}

.forcePanel .modalBox{
width:98vw;
max-height:96vh;
padding:14px;
}

.forcePanel .modalChart canvas,
.forcePanel .wideModal .modalChart canvas{
height:62vh !important;
min-height:360px !important;
}

@media(max-width:980px){
.forcePanel .cards,
.forcePanel .grid.cards{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.forcePanel .chartGrid{
grid-template-columns:1fr !important;
}
.forcePanel .historyTools,
.forcePanel .hc2Config{
grid-template-columns:1fr 1fr;
}
.forcePanel .hc2Cards{
grid-template-columns:1fr 1fr;
}
}

/* v3.24 HC2 collapsed by default */
.hc2HeadActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hc2HeadActions button{padding:10px 14px;border-radius:999px;font-weight:900}
.hc2Content.hidden{display:none!important}
.hc2Panel{padding-top:12px;padding-bottom:12px}
.hc2Panel .panelHead{margin-bottom:0}
.hc2Panel .panelHead h2{margin-bottom:4px}
body.forcePanel .hc2Content.hidden{display:none!important}
body.forcePanel .hc2Panel .muted{display:none}


/* v3.25 clearer active range buttons */
.filters .filterBtn,
.forcePanel .filters .filterBtn{
position:relative;
border:2px solid transparent !important;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.filters .filterBtn.active,
.forcePanel .filters .filterBtn.active{
background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
color:#ffffff !important;
border-color:#93c5fd !important;
box-shadow:0 0 0 3px rgba(37,99,235,.22), 0 8px 18px rgba(37,99,235,.28) !important;
transform:translateY(-1px);
}

body.lightMode .filters .filterBtn,
body.lightMode.forcePanel .filters .filterBtn{
background:#dbeafe !important;
color:#0f172a !important;
border-color:#bfdbfe !important;
}

body.lightMode .filters .filterBtn.active,
body.lightMode.forcePanel .filters .filterBtn.active{
background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
color:#ffffff !important;
border-color:#1d4ed8 !important;
box-shadow:0 0 0 3px rgba(37,99,235,.22), 0 8px 18px rgba(37,99,235,.24) !important;
}

.filters .filterBtn.active::after{
content:"";
position:absolute;
left:50%;
bottom:-8px;
transform:translateX(-50%);
width:34px;
height:4px;
border-radius:999px;
background:#22c55e;
}

/* v3.26 active range visibility */
.filters .filterBtn.active{
outline:3px solid rgba(34,197,94,.55) !important;
}


/* v3.27 mobile chart layout repair */
@media(max-width:980px){
  .charts{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .chartBox{
    min-width:0 !important;
    overflow:hidden;
  }

  .chartBox canvas{
    display:block;
    width:100% !important;
    height:240px !important;
    min-height:240px !important;
  }
}

@media(max-width:520px){
  .wrap{
    padding:14px !important;
  }

  .panel{
    padding:14px !important;
  }

  .charts{
    gap:12px !important;
  }

  .chartBox{
    padding:10px !important;
    border-radius:14px !important;
  }

  .chartBox canvas{
    height:220px !important;
    min-height:220px !important;
  }

  .chartTitle{
    gap:8px !important;
  }

  .chartTitle h3{
    font-size:15px !important;
    line-height:1.2 !important;
  }
}

body.forcePanel .charts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

body.forcePanel .charts .chartBox{
  padding:8px;
  border-radius:16px;
  min-height:190px;
}

body.forcePanel .charts .chartBox canvas{
  height:150px !important;
  min-height:150px !important;
  max-height:150px !important;
}

@media(max-width:980px){
  body.forcePanel .charts{
    grid-template-columns:1fr !important;
  }
}