:root { --page-bg:#f8fafc; --surface:#ffffff; --surface-alt:#f1f5f9; --theme-ink:#0f172a; --theme-muted:#64748b; --theme-line:#e2e8f0; --theme-accent:#0865b5; }
body, body.lab-body, body.hess-page { background-color:var(--page-bg)!important; color:var(--theme-ink)!important; }
.header.is-scrolled, .dropdown-menu, .lab-card, .panel, .panel-raised, .stat-clean, .chart-clean, .modal-box, .theme-panel { background:var(--surface)!important; color:var(--theme-ink)!important; border-color:var(--theme-line)!important; }
.header.is-scrolled .brand, .header.is-scrolled nav, .header.is-scrolled summary { color:var(--theme-ink); }
.site-footer, .landing-footer, .footer, footer, .public-footer, .panel-header-row, .about-card { background-color:var(--surface-alt)!important; color:var(--theme-muted); border-color:var(--theme-line)!important; }
.card, .team-card, .news-card, .research-card { background-color:var(--surface)!important; border-color:var(--theme-line)!important; }
input, select { background:var(--surface)!important; color:var(--theme-ink)!important; border-color:var(--theme-line)!important; color-scheme:inherit; }
.dropdown-menu a:hover, .theme-options button:hover { background:var(--surface-alt)!important; }
.desktop-nav .dropdown-menu { width:285px; }
.dropdown-menu a { padding:10px 14px!important; }
.dropdown-menu a:last-child { border-top:1px solid var(--theme-line); border-radius:0 0 8px 8px; margin-top:5px; padding-top:14px!important; }
.theme-picker { position:relative; margin-left:14px; flex-shrink:0; }
.theme-picker>summary { list-style:none; cursor:pointer; border:1px solid var(--theme-line); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--theme-ink); }
.theme-picker>summary::-webkit-details-marker { display:none; }
.theme-panel { position:absolute; right:0; top:48px; width:276px; border:1px solid var(--theme-line); border-radius:14px; padding:16px; box-shadow:0 12px 36px #0002; z-index:100; }
.theme-panel h2 { margin:0 0 12px; font-size:15px; }
.theme-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.theme-options button { border:1px solid var(--theme-line); border-radius:8px; padding:10px; background:var(--surface); color:var(--theme-ink); cursor:pointer; font:inherit; font-size:13px; }
.theme-options button[aria-pressed=true] { border-color:var(--theme-accent); box-shadow:inset 0 0 0 1px var(--theme-accent); }
.theme-custom { border-top:1px solid var(--theme-line); margin-top:14px; padding-top:12px; }
.theme-custom label { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin:8px 0; }
.theme-custom input { width:42px; height:28px; padding:2px; border:1px solid var(--theme-line); cursor:pointer; }
html[data-theme=dark] { color-scheme:dark; }
html[data-theme=light], html[data-theme=sunset] { color-scheme:light; }
html[data-theme=dark] .text-primary, html[data-theme=custom] .text-primary { color:var(--theme-ink)!important; }
@media(max-width:700px) { .theme-picker { margin-left:8px; } .theme-panel { width:260px; } }.header.is-scrolled .dropdown summary { background:var(--surface-alt); color:var(--theme-ink); border-color:var(--theme-line); }
.research-about, .research-story__image, .lab-avatar { background:var(--surface-alt)!important; }
.research-topics a { color:var(--theme-ink); }
.research-topics a[aria-current] { color:var(--surface); }
.theme-picker>summary { width:68px; height:34px; border-radius:999px; gap:6px; background:var(--surface-alt); padding:3px; }
.theme-sun,.theme-moon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; }
.theme-sun { background:var(--surface); color:var(--theme-accent); box-shadow:0 1px 4px #0001; }
.theme-moon { color:var(--theme-muted); }
html[data-theme=dark] .theme-sun { background:none; color:var(--theme-muted); box-shadow:none; }
html[data-theme=dark] .theme-moon { background:var(--surface); color:var(--theme-accent); box-shadow:0 1px 4px #0002; }
.dt-theme-control .theme-picker { margin-left:0; }
.page-theme-control { position:absolute; top:98px; right:40px; z-index:30; }
.page-theme-control.is-placed { position:relative; top:auto; right:auto; z-index:30; }
.page-theme-control .theme-picker { margin-left:0; }
.page-heading-actions { display:flex; align-items:center; gap:18px; }
.has-theme-control { position:relative; padding-right:92px; }
.has-theme-control>.page-theme-control { position:absolute; right:0; top:0; }
body:has(.hero)>.page-theme-control { top:98px; }
@media(max-width:600px) { .page-theme-control { top:86px; right:20px; } .page-heading-actions { gap:10px; } }
.theme-switch { display:inline-flex; align-items:center; gap:3px; padding:4px; border:1px solid var(--theme-line); border-radius:999px; background:var(--surface-alt); }
.theme-switch>button, .theme-switch>.theme-picker>summary { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--theme-muted); cursor:pointer; }
.theme-switch svg { width:18px; height:18px; }
.theme-switch>button:hover, .theme-switch>.theme-picker>summary:hover { background:var(--surface); color:var(--theme-ink); }
.theme-switch>button[aria-pressed=true], html[data-theme=custom] .theme-switch>.theme-picker>summary { color:var(--theme-accent); background:var(--surface); box-shadow:0 1px 5px #0001; }
.theme-switch>.theme-picker { margin:0 0 0 3px; padding-left:5px; border-left:1px solid var(--theme-line); }
.theme-switch .theme-custom { border:0; padding:0; margin:0; }
.has-theme-control { padding-right:180px; }
@media(max-width:600px) { .page-heading-actions { flex-wrap:wrap; justify-content:flex-end; } .theme-switch>button, .theme-switch>.theme-picker>summary { width:29px; height:29px; } }
.theme-switch { width:42px; box-sizing:border-box; overflow:hidden; transition:width .22s ease; position:relative; }
.theme-switch>button { flex-shrink:0; }
.theme-switch>.theme-picker { flex-shrink:0; }
.theme-switch:not(:hover):not(:focus-within):not(.is-expanded)>button:not([aria-pressed=true]), .theme-switch:not(:hover):not(:focus-within):not(.is-expanded)>.theme-picker { display:none; }
html[data-theme=custom] .theme-switch:not(:hover):not(:focus-within):not(.is-expanded)>.theme-picker { display:block; border:0; padding:0; margin:0; }
.theme-switch:hover, .theme-switch:focus-within, .theme-switch.is-expanded { width:154px; overflow:visible; }
.header.is-scrolled .desktop-nav .dropdown>summary, .header.is-scrolled .mobile-nav>summary { background:var(--surface-alt)!important; color:var(--theme-ink)!important; border-color:var(--theme-line)!important; }
.header.is-scrolled .dropdown>summary svg { color:var(--theme-ink); }
@media(max-width:600px) { .theme-switch { width:39px; } .theme-switch:hover, .theme-switch:focus-within, .theme-switch.is-expanded { width:142px; } }
@media(prefers-reduced-motion:reduce) { .theme-switch { transition:none; } }
:root { --status-online:#168350; --status-offline:#dc2626; }
html[data-theme="dark"] { --status-online:#4ade80; --status-offline:#f87171; }
.lab-connection .online,.badge-status.online,.hess-component-status.online,[data-connection-state="online"] { color:var(--status-online)!important; }
.lab-connection .offline,.badge-status.offline,.hess-component-status:not(.online),[data-connection-state="offline"] { color:var(--status-offline)!important; }
.lab-connection #connection::before,.hess-component-status::before,[data-source-state]::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; background:currentColor; vertical-align:2px; }
.lab-connection .online::before,.badge-status.online .dot,.hess-component-status.online::before,[data-connection-state="online"]:not(#mqtt-status):not(#battery-system-status):not([data-source-state]),[data-source-state][data-connection-state="online"]::before { animation:ces-online-pulse 1.8s ease-in-out infinite!important; }
[id^="dot-tab-"][data-connection-state],#mqtt-indicator[data-connection-state] { background:currentColor!important; box-shadow:none!important; }

#session-status,.status-dot-ping { animation:none; }
#mqtt-indicator[data-connection-state="offline"]::after { display:none!important; }
@keyframes ces-online-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media(prefers-reduced-motion:reduce) { .lab-connection .online::before,.badge-status.online .dot,.hess-component-status.online::before,[data-connection-state="online"],[data-source-state][data-connection-state="online"]::before { animation:none!important; } }
#battery-system-status { background:var(--surface-alt)!important; border-color:var(--line)!important; }
#battery-system-status .status-dot-ping { display:none; }
#battery-system-status .status-dot-core { background:currentColor!important; }
#battery-system-status[data-connection-state="online"] .status-dot-core { animation:ces-online-pulse 1.8s ease-in-out infinite; }
#battery-system-status[data-connection-state="offline"] .status-dot-core { animation:none; }

#battery-system-status{animation:none!important}@media(prefers-reduced-motion:reduce){#battery-system-status .status-dot-core{animation:none!important}}
[data-connection-state="offline"],[data-connection-state="offline"]::before,[data-connection-state="offline"]::after,
.badge-status.offline .dot,.lab-connection .offline::before,.hess-component-status:not(.online)::before { animation:none!important; }
#mqtt-indicator:not([data-connection-state="online"])::after { display:none!important; animation:none!important; }
#mqtt-indicator[data-connection-state="waiting"],#mqtt-status[data-connection-state="waiting"] { color:var(--waiting-text, #b45309)!important; }
html[data-theme="dark"] #mqtt-indicator[data-connection-state="waiting"],html[data-theme="dark"] #mqtt-status[data-connection-state="waiting"] { color:#fbbf24!important; }
.digital-twin-page .dt-system-tabs [id^="dot-tab-"][data-connection-state] { color:inherit!important; background:currentColor!important; box-shadow:none!important; animation:ces-online-pulse 1.8s ease-in-out infinite!important; }
.lab-connection #connection::before,.badge-status .dot,.hess-component-status::before,[data-source-state]::before,#battery-system-status .status-dot-core,#mqtt-indicator[data-connection-state] { animation:ces-online-pulse 1.8s ease-in-out infinite!important; }
#mqtt-indicator[data-connection-state]::after { display:none!important; animation:none!important; }
@media(prefers-reduced-motion:reduce) {
    .digital-twin-page .dt-system-tabs [id^="dot-tab-"][data-connection-state],.lab-connection #connection::before,.badge-status .dot,.hess-component-status::before,[data-source-state]::before,#battery-system-status .status-dot-core,#mqtt-indicator[data-connection-state] { animation:none!important; }
}
.badge-status.offline .dot,.hess-component-status:not(.online)::before,#battery-system-status[data-connection-state="offline"] .status-dot-core { animation:ces-online-pulse 1.8s ease-in-out infinite!important; }
@media(prefers-reduced-motion:reduce) { .badge-status.offline .dot,.hess-component-status:not(.online)::before,#battery-system-status[data-connection-state="offline"] .status-dot-core { animation:none!important; } }

.theme-panel-floating{position:fixed!important;top:90px!important;right:24px!important;left:auto!important;bottom:auto!important;z-index:2147483000!important;width:min(440px,calc(100vw - 32px))!important;max-height:calc(100dvh - 112px);overflow-y:auto;display:block!important;background:var(--surface)!important;color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 18px 50px #0003}
.theme-palette-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.theme-palette-heading h2{margin:0!important;font-size:18px!important}.theme-palette-heading button{display:block!important;width:34px!important;height:34px!important;border-radius:50%;border:1px solid var(--line);background:var(--surface-alt);color:var(--blue);font-size:24px;cursor:pointer}
.theme-palette-hint{font-size:12px;color:var(--muted)}.theme-palette-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.theme-palette-list .theme-palette{display:flex!important;flex-direction:column;gap:10px;width:100%!important;height:auto!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;color:var(--ink)!important;cursor:pointer;text-align:left;transition:border-color .25s ease,background .25s ease}.theme-palette strong{font-size:12px}.theme-palette:first-child{grid-column:1/-1}.theme-palette-swatches{display:flex;width:100%;gap:5px}.theme-palette-swatches i{display:block;flex:1;height:24px;border:1px solid #80808030;border-radius:6px}.theme-palette[aria-pressed=true],.theme-palette:hover{outline:2px solid var(--blue);outline-offset:-2px}
body a:not(.hero-link):hover{color:color-mix(in srgb,var(--blue,#0865b5) 65%,var(--ink,#0f172a))!important}body a{transition:color .3s ease}
.research-story:not(.research-story--featured){align-items:center!important}.research-story:not(.research-story--featured) .research-story__image{align-self:center!important;margin:0!important;min-height:0!important;height:136px!important;max-height:136px!important}.research-story:not(.research-story--featured) .research-story__image>span{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

.footer-version{font-size:11px;color:var(--muted);margin-left:4px;white-space:nowrap}.footer-version .footer-admin{font-size:inherit;color:var(--muted);text-decoration:none}.footer-version .footer-admin:hover{color:var(--blue)!important}@media(max-width:700px){.footer-version{margin-left:0}}

.theme-palette-list .theme-palette strong{color:var(--palette-accent,var(--blue))!important}

body:has(>.header){background-image:radial-gradient(ellipse at 0% 10%,color-mix(in srgb,var(--blue) 4%,transparent),transparent 65%),radial-gradient(ellipse at 100% 90%,color-mix(in srgb,var(--blue) 2%,transparent),transparent 70%)!important;background-attachment:fixed;background-color:var(--page-bg)!important}
body:has(.hero) main>.pale{background:transparent!important}
#tentang{background:transparent!important;border:0!important;border-radius:0!important}
.team-page .team-supervisor,.home-team .home-team-lead,.team-page .team-card{background:var(--surface)!important;background-image:none!important}