:root{--bg:#0b0e11;--surface:#12171c;--surface-2:#171d23;--line:#29323a;--text:#eef2f4;--muted:#8c99a4;--accent:#e3a72f;--pv:#e3a72f;--load:#d96b5f;--grid:#6396c8;--battery:#65a67b;--ok:#65a67b;--bad:#d96b5f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}.topbar{height:76px;max-width:1240px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--text);font-size:19px;font-weight:700;letter-spacing:.01em;text-decoration:none}.caption{color:var(--muted);font-size:13px;margin:2px 0 0}.layout,.settings-layout{max-width:1240px;margin:0 auto;padding:24px;display:grid;gap:16px}.settings-layout{max-width:980px}.panel,.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:8px}.panel{padding:22px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-card{padding:18px;border-top:3px solid var(--line)}.metric-card.pv{border-top-color:var(--pv)}.metric-card.load{border-top-color:var(--load)}.metric-card.grid{border-top-color:var(--grid)}.metric-card.battery{border-top-color:var(--battery)}.metric-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.metric-card strong{display:inline-block;margin-top:7px;font-size:30px;font-variant-numeric:tabular-nums}.metric-card small{margin-left:5px;color:var(--muted)}.metric-card em{display:block;color:var(--muted);font-size:12px;font-style:normal}.section-head,.editor-head,.editor-actions,.form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-head{margin-bottom:20px}.section-head h1,.section-head h2,.note h2{font-size:17px;margin:0}.section-head p,.note p{color:var(--muted);font-size:13px;margin:2px 0 0}.status{padding:4px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line)}.status.online{color:var(--ok);border-color:#315d40}.status.offline{color:var(--bad);border-color:#673934}.status.neutral{color:var(--muted)}.energy-flow{display:grid;grid-template-columns:1fr auto 1fr 1fr 1fr;gap:10px;align-items:stretch}.flow-item{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:14px}.flow-item span{display:block;color:var(--muted);font-size:12px}.flow-item strong{font-size:18px;font-variant-numeric:tabular-nums}.flow-arrow{align-self:center;color:var(--muted)}.legend{display:flex;gap:14px;color:var(--muted);font-size:12px}.legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.pv-key:before{background:var(--pv)}.load-key:before{background:var(--load)}.grid-key:before{background:var(--grid)}.power-chart{width:100%;height:260px;background:linear-gradient(var(--surface-2),var(--surface));border-bottom:1px solid var(--line)}.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.device-card{border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--surface-2)}.device-card header{display:flex;justify-content:space-between;gap:10px}.device-card h3{font-size:14px;margin:0}.device-card dl{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin:14px 0 0;font-size:12px}.device-card dt{color:var(--muted)}.device-card dd{margin:0;font-variant-numeric:tabular-nums}.empty{color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:right;padding:10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}th:first-child,td:first-child{text-align:left}th{color:var(--muted);font-weight:500}.button{appearance:none;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);color:var(--text);padding:8px 13px;font:inherit;font-size:13px;text-decoration:none;cursor:pointer}.button:hover{border-color:#53616d}.button.primary{background:#d69b27;border-color:#d69b27;color:#15110a;font-weight:700}.button:disabled{opacity:.55;cursor:wait}.device-editor{border-top:1px solid var(--line);padding:20px 0}.device-editor:first-child{border-top:0;padding-top:0}.editor-head{margin-bottom:14px}.text-button{border:0;background:none;color:var(--muted);cursor:pointer}.text-button.danger:hover{color:var(--bad)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid.compact{margin-bottom:14px}.form-grid label{color:var(--muted);font-size:12px}.form-grid input,.form-grid select{display:block;width:100%;margin-top:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text);padding:9px 10px;font:inherit}.form-grid input:focus,.form-grid select:focus{outline:2px solid #614d28;border-color:var(--accent)}.editor-actions{justify-content:flex-start;margin-top:14px}.form-actions{justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px}.test-result{color:var(--muted);font-size:12px}.test-result.ok{color:var(--ok)}.test-result.bad{color:var(--bad)}.scan-results{display:grid;gap:8px}.scan-item{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px;font-size:13px}code{background:var(--surface-2);padding:2px 5px;border-radius:3px}.hidden{display:none!important}
@media(max-width:800px){.metrics{grid-template-columns:1fr 1fr}.device-grid{grid-template-columns:1fr 1fr}.energy-flow{grid-template-columns:1fr 1fr}.flow-arrow{display:none}}@media(max-width:560px){.topbar{padding:0 16px}.layout,.settings-layout{padding:16px}.metrics,.device-grid,.form-grid{grid-template-columns:1fr}.panel{padding:17px}.section-head{align-items:flex-start}.energy-flow{grid-template-columns:1fr 1fr}.daily-panel{padding:17px 0}.daily-panel .section-head{padding:0 17px}}
.nav-actions{display:flex;align-items:center;gap:8px}.nav-actions form{margin:0}.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px}.auth-card h1{font-size:22px;margin:24px 0 2px}.stack{display:grid;gap:14px;margin-top:22px}.stack label,.auth-card label{color:var(--muted);font-size:12px}.stack input,.stack textarea,.auth-card input{display:block;width:100%;margin-top:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text);padding:10px;font:inherit}.stack textarea{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px}.alert{background:#38201f;border:1px solid #673934;color:#efaaa3;padding:10px 12px;border-radius:5px;font-size:13px}.alert.ok{background:#182a1e;border-color:#315d40;color:#9bd1aa}.tunnel-list{display:grid;gap:10px;margin-bottom:22px}.tunnel-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}

/* Dashboard */
body{background:radial-gradient(circle at 50% -20%,#182028 0,#0b0e11 38%,#080a0d 100%);min-height:100vh}.topbar{position:sticky;top:0;z-index:20;max-width:none;padding-left:max(24px,calc((100vw - 1240px)/2 + 24px));padding-right:max(24px,calc((100vw - 1240px)/2 + 24px));background:rgba(9,12,15,.82);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.07)}.panel,.metric-card{border-color:rgba(255,255,255,.08);box-shadow:0 12px 34px rgba(0,0,0,.16)}.metric-card{position:relative;overflow:hidden;padding:20px 20px 18px;border-top:1px solid rgba(255,255,255,.08);transition:transform .2s,border-color .2s}.metric-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16)}.metric-card:after{content:"";position:absolute;width:100px;height:100px;right:-42px;top:-52px;border-radius:50%;background:currentColor;opacity:.06}.metric-card.pv{color:var(--pv)}.metric-card.load{color:var(--load)}.metric-card.grid{color:var(--grid)}.metric-card.battery{color:var(--battery)}.metric-card span,.metric-card em,.metric-card small{color:var(--muted)}.metric-card strong{color:var(--text);font-size:34px;letter-spacing:-.04em}.metric-icon{float:right;width:34px;height:34px;display:grid;place-items:center;border:1px solid currentColor;border-radius:10px;background:rgba(255,255,255,.03);font-size:16px}.soc-track{height:3px;background:rgba(255,255,255,.08);margin-top:13px;border-radius:4px;overflow:hidden}.soc-track i{display:block;height:100%;width:0;background:var(--battery);transition:width .6s ease}.insights{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}.insights article{background:var(--surface);padding:14px 18px}.insights span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.insights strong{font-size:20px;font-variant-numeric:tabular-nums}.insights small{color:var(--muted);margin-left:4px}.energy-map{display:grid;grid-template-columns:1fr minmax(28px,.45fr) 1.2fr minmax(28px,.45fr) 1fr;grid-template-areas:"pv pvline home gridline grid" ". . batteryline . ." ". . battery . .";gap:12px;align-items:center}.energy-node{background:linear-gradient(145deg,var(--surface-2),#11161b);border:1px solid var(--line);border-radius:10px;padding:17px;text-align:center}.energy-node i{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 7px;border-radius:50%;background:rgba(255,255,255,.05);font-style:normal}.energy-node span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.energy-node strong{font-size:17px}.pv-node{grid-area:pv}.home-node{grid-area:home;border-color:#3d464e}.grid-node{grid-area:grid}.battery-node{grid-area:battery}.energy-line{height:2px;background:var(--line);position:relative;overflow:hidden}.energy-line b{position:absolute;width:28%;height:100%;background:var(--pv);animation:flow 1.4s linear infinite}.pv-line{grid-area:pvline}.grid-line{grid-area:gridline}.grid-line b{background:var(--grid)}.battery-line{grid-area:batteryline;width:2px;height:34px;justify-self:center}.battery-line b{width:100%;height:28%;background:var(--battery);animation:flowY 1.4s linear infinite}.exporting .grid-line b{animation-direction:reverse}.charging .battery-line b{animation-direction:reverse}@keyframes flow{from{left:-30%}to{left:105%}}@keyframes flowY{from{top:-30%}to{top:105%}}.chart-controls{display:flex;align-items:center;gap:20px}.range-switch{display:flex;padding:3px;background:var(--surface-2);border-radius:7px}.range-switch button{border:0;background:transparent;color:var(--muted);padding:5px 9px;border-radius:5px;cursor:pointer;font:inherit;font-size:11px}.range-switch button.active{background:#303840;color:var(--text)}.chart-wrap{position:relative}.power-chart{height:300px;border:0;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}.grid-guide{stroke:rgba(255,255,255,.06);stroke-width:1}.chart-line{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}.pv-stroke{stroke:var(--pv)}.load-stroke{stroke:var(--load)}.grid-stroke{stroke:var(--grid)}.chart-hit{pointer-events:all}.chart-tooltip{position:absolute;top:12px;z-index:2;width:142px;display:grid;gap:3px;padding:9px 11px;background:rgba(8,11,14,.94);border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 30px #0008;font-size:11px;pointer-events:none}.chart-tooltip b{margin-bottom:3px}.chart-tooltip span{color:var(--muted)}.device-card{border-radius:9px;padding:16px;transition:border-color .2s}.device-card.connected{border-color:#2e4938}.device-type{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 2px}.device-card h3{font-size:15px}.device-error{font-size:11px;color:var(--bad);margin:10px 0 0}.update-pill{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:20px;background:rgba(18,23,28,.9);border:1px solid var(--line);color:var(--muted);font-size:11px;backdrop-filter:blur(10px)}.update-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok)}.update-pill.pulse i{box-shadow:0 0 0 7px rgba(101,166,123,0);animation:pulse .5s}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(101,166,123,.45)}100%{box-shadow:0 0 0 8px rgba(101,166,123,0)}}
@media(max-width:900px){.insights{grid-template-columns:repeat(3,1fr)}.energy-map{grid-template-columns:1fr 30px 1fr;grid-template-areas:"pv pvline home" "grid gridline home" "battery batteryline home"}.battery-line{width:auto;height:2px}.battery-line b{height:100%;width:28%;animation:flow 1.4s linear infinite}.chart-controls{align-items:flex-end;flex-direction:column;gap:8px}}
@media(max-width:620px){.topbar{height:auto;min-height:72px;gap:12px}.nav-actions .secondary,.nav-actions form{display:none}.metrics{grid-template-columns:1fr 1fr}.metric-card strong{font-size:27px}.insights{grid-template-columns:1fr 1fr}.insights article:last-child{grid-column:1/-1}.energy-map{grid-template-columns:1fr;grid-template-areas:"pv" "pvline" "home" "gridline" "grid" "batteryline" "battery"}.energy-line,.battery-line{width:2px;height:22px;justify-self:center}.energy-line b,.battery-line b{width:100%;height:35%;animation:flowY 1.4s linear infinite}.section-head{flex-direction:column}.chart-controls{width:100%;align-items:flex-start}.legend{flex-wrap:wrap}.power-chart{height:235px}}

.chart-marker{stroke:#fff;stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #000)}.chart-hit{touch-action:pan-y}.chart-scrubber{padding:8px 0 3px}.chart-scrubber input{width:100%;height:24px;margin:0;accent-color:var(--accent);cursor:ew-resize}.chart-readout{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:1px;margin-top:8px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--line)}.chart-readout>strong,.chart-readout>span{padding:9px 11px;background:var(--surface-2);font-size:12px}.chart-readout>span{color:var(--muted)}.chart-readout b{display:block;color:var(--text);font-size:14px}.chart-readout i{font-style:normal}@media(max-width:620px){.chart-readout{grid-template-columns:repeat(2,1fr)}.chart-readout>strong{grid-column:1/-1}.chart-scrubber{padding-inline:4px}}

.chart-scrubber{width:100%;padding-inline:0}.chart-scrubber input{appearance:none;display:block;width:100%;height:28px;background:transparent}.chart-scrubber input::-webkit-slider-runnable-track{width:100%;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--accent),#39434c)}.chart-scrubber input::-moz-range-track{width:100%;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--accent),#39434c)}.chart-scrubber input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-8px;border:2px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 2px 8px #0008}.chart-scrubber input::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 2px 8px #0008}

.legend .import-key:before{background:#6396c8}.legend .export-key:before{background:#9c79d1}.legend .battery-key:before{background:var(--battery)}.import-stroke{stroke:#6396c8}.export-stroke{stroke:#9c79d1}.battery-charge-stroke{stroke:#52c985;stroke-dasharray:5 4}.battery-discharge-stroke{stroke:#a8d36f;stroke-dasharray:2 4}

/* Home-Assistant-inspirierte Energieverteilung */
.insights{grid-template-columns:repeat(7,1fr)}
.energy-map{--solar-share:0%;--battery-share:0%;grid-template-columns:1fr 86px 1.15fr 86px 1fr;grid-template-rows:auto 58px auto 58px auto;grid-template-areas:". . pv . ." ". . pvline . ." "grid gridline home . ." ". . batteryline . ." ". . battery . .";gap:0;max-width:820px;margin:8px auto 0}
.energy-node{background:transparent;border:0;padding:3px}.energy-node>i,.home-ring{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 9px;border:3px solid currentColor;border-radius:50%;background:var(--surface-2);box-shadow:0 10px 30px #0005;font-style:normal;font-size:25px}.energy-node span{letter-spacing:.06em}.energy-node strong{display:block;font-size:18px;margin-top:2px}.energy-node small{display:block;min-height:16px;color:var(--muted);font-size:10px;margin-top:3px}.pv-node{color:var(--pv)}.grid-node{color:var(--grid)}.home-node{color:var(--load)}.battery-node{color:var(--battery)}.home-ring{padding:5px;border:0;background:conic-gradient(var(--pv) 0 var(--solar-share),var(--battery) var(--solar-share) var(--battery-share),var(--grid) var(--battery-share) 100%);position:relative}.home-ring:after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface-2)}.home-ring i{position:relative;z-index:1;font-style:normal}.energy-line{background:var(--line);position:relative;overflow:hidden}.energy-line b{position:absolute;background:currentColor}.pv-line{width:3px;height:100%;justify-self:center;color:var(--pv)}.grid-line{width:100%;height:3px;color:var(--grid)}.battery-line{width:3px;height:100%;justify-self:center;color:var(--battery)}.pv-line b,.battery-line b{width:100%;height:24%;animation:flowY 1.4s linear infinite}.grid-line b{width:24%;height:100%;animation:flow 1.4s linear infinite}.device-note{font-size:11px;color:var(--muted);margin:10px 0 0}.mobile-nav{display:none}
@media(max-width:900px){.insights{grid-template-columns:repeat(4,1fr)}.energy-map{grid-template-columns:1fr 64px 1fr 20px;max-width:650px}}
@media(max-width:620px){body{padding-bottom:68px}.insights{grid-template-columns:1fr 1fr}.insights article:last-child{grid-column:auto}.energy-map{grid-template-columns:1fr 42px 1fr;grid-template-rows:auto 44px auto 44px auto;grid-template-areas:". pv ." ". pvline ." "grid gridline home" ". batteryline ." ". battery ."}.energy-node>i,.home-ring{width:64px;height:64px}.energy-node strong{font-size:15px}.energy-node small{font-size:9px}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);z-index:40;left:10px;right:10px;bottom:10px;padding:5px;background:rgba(16,21,26,.94);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(14px);box-shadow:0 8px 28px #0008}.mobile-nav a,.mobile-nav button{padding:8px 4px;text-align:center;color:var(--muted);font:inherit;font-size:11px;border:0;border-radius:8px;background:transparent;text-decoration:none}.mobile-nav form{margin:0}.mobile-nav button{width:100%;cursor:pointer}.mobile-nav a.active{background:#2a323a;color:var(--text)}}
.legend .soc-key:before{background:var(--battery)}.soc-stroke{stroke:var(--battery);stroke-dasharray:7 5}.range-switch{flex-wrap:wrap}
.energy-node>i,.home-ring{align-items:center;justify-items:center;line-height:1}.energy-node>i{padding:0;text-align:center}.home-ring i{display:block;width:auto;height:auto;margin:0;padding:0;background:none;line-height:1;text-align:center}.pv-node>i{font-size:27px}.grid-node>i{font-size:25px}.battery-node>i{font-size:24px}.home-ring i{font-size:27px;transform:translateY(-1px)}.energy-line b{opacity:0;animation-play-state:paused;transition:opacity .25s}.pv-active .pv-line b,.grid-active .grid-line b,.battery-active .battery-line b{opacity:1;animation-play-state:running}.discharging .battery-line b{animation-direction:reverse}@media(prefers-reduced-motion:reduce){.energy-line b{animation:none!important}}

/* Precise energy-flow stage: fixed geometry keeps every node centered on all viewports. */
.energy-map{position:relative;display:block;width:min(100%,660px);aspect-ratio:1/1;margin:0 auto;overflow:visible}
.energy-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.energy-track{fill:none;stroke:rgba(132,151,168,.24);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.energy-track.pv-track{stroke:color-mix(in srgb,var(--pv) 26%,transparent)}
.energy-track.grid-track{stroke:color-mix(in srgb,var(--grid) 26%,transparent)}
.energy-track.battery-track{stroke:color-mix(in srgb,var(--battery) 26%,transparent)}
.energy-particle{opacity:0;transition:opacity .25s;filter:drop-shadow(0 0 6px currentColor)}
.pv-particle{fill:var(--pv);color:var(--pv)}.grid-particle{fill:var(--grid);color:var(--grid)}.battery-particle{fill:var(--battery);color:var(--battery)}
.pv-active .pv-particle,.grid-active .grid-particle,.battery-active .battery-particle{opacity:1}
.energy-junction{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#34414b;box-shadow:0 0 0 5px rgba(52,65,75,.22)}
.energy-node{position:absolute;width:150px;padding:0;transform:translate(-50%,-50%);background:transparent;border:0;text-align:center;z-index:2}
.pv-node{left:50%;top:15%}.grid-node{left:15%;top:50%}.home-node{left:85%;top:50%}.battery-node{left:50%;top:85%}
.energy-node>i,.home-ring{display:grid;width:82px;height:82px;margin:0 auto 10px;place-items:center;border:3px solid currentColor;border-radius:50%;background:#151b21;box-shadow:0 12px 28px rgba(0,0,0,.4)}
.flow-icon svg{display:block;width:34px;height:34px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pv-node .flow-icon svg circle{fill:currentColor;stroke:none}.energy-node span{font-size:11px;letter-spacing:.1em}.energy-node strong{display:block;margin-top:3px;font-size:18px}.energy-node small{display:block;max-width:150px;min-height:16px;margin:3px auto 0;color:var(--muted);font-size:10px;line-height:1.35}
.home-ring{padding:6px}.home-ring:after{inset:7px}.home-ring .flow-icon{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;transform:none}
@media(max-width:620px){.flow-panel{padding-inline:14px}.energy-map{width:min(100%,430px);min-height:430px}.energy-node{width:126px}.energy-node>i,.home-ring{width:68px;height:68px;margin-bottom:8px}.flow-icon svg{width:29px;height:29px}.energy-node strong{font-size:15px}.energy-node small{max-width:126px;font-size:9px}.energy-track{stroke-width:4}.energy-particle{r:5px}.energy-junction{width:8px;height:8px}}
@media(prefers-reduced-motion:reduce){.energy-particle{display:none}}

/* Mobile app shell: use the complete display without fighting notches or browser chrome. */
@media(max-width:620px){
  html{min-height:100%;background:#080a0d}
  body{min-height:100vh;min-height:100dvh;padding-bottom:calc(66px + env(safe-area-inset-bottom));overflow-x:hidden}
  .topbar{position:relative;min-height:calc(58px + env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));background:transparent;border:0;backdrop-filter:none}
  .topbar .brand{font-size:17px}.topbar .caption{font-size:11px}.install-button{padding:7px 10px;font-size:11px}
  .layout{width:100%;padding:4px max(10px,env(safe-area-inset-right)) 16px max(10px,env(safe-area-inset-left));gap:10px}
  .metrics{gap:8px}.metric-card{min-width:0;padding:13px 13px 11px;border-radius:11px}.metric-card strong{font-size:25px}.metric-card em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-icon{width:29px;height:29px}
  .insights{border-radius:11px}.insights article{min-width:0;padding:11px 12px}.insights strong{font-size:17px}.insights small{font-size:10px;margin-left:2px}
  .panel{padding:14px;border-radius:12px}.section-head{margin-bottom:12px;gap:6px}.section-head p{font-size:11px}.flow-panel .section-head{display:grid;grid-template-columns:1fr auto;align-items:start}.flow-panel .section-head>div{min-width:0}.flow-panel .status{white-space:nowrap}
  .energy-map{width:min(100%,360px);min-height:0;aspect-ratio:1/1;margin:-2px auto 0}
  .energy-node{width:112px}.energy-node>i,.home-ring{width:58px;height:58px;margin-bottom:5px;border-width:2px}.flow-icon svg{width:25px;height:25px}.energy-node span{font-size:9px}.energy-node strong{font-size:14px;line-height:1.25}.energy-node small{max-width:112px;min-height:13px;font-size:8px;line-height:1.2}.energy-track{stroke-width:3}.energy-particle{r:4px}.energy-junction{width:7px;height:7px}
  .chart-panel .section-head{gap:10px}.chart-controls{gap:7px}.range-switch{width:100%;display:grid;grid-template-columns:repeat(5,1fr)}.range-switch button{padding:6px 2px}.legend{gap:9px;font-size:10px}.power-chart{height:210px}
  .mobile-nav{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));padding:4px;border-radius:14px}.mobile-nav a,.mobile-nav button{padding:9px 4px}
  .update-pill{right:max(12px,env(safe-area-inset-right));bottom:calc(62px + env(safe-area-inset-bottom));padding:4px 8px}
}

.chart-kpis{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-8px 0 13px;color:var(--muted);font-size:11px}.chart-kpis strong{color:var(--text);margin-left:4px;font-variant-numeric:tabular-nums}.chart-axis{padding-left:58px;padding-right:18px}.chart-axis span{text-align:center}.chart-axis span:first-child{text-align:left}.chart-axis span:last-child{text-align:right}.chart-axis-label{fill:var(--muted);font-size:11px}.chart-axis-title{fill:var(--muted);font-size:10px;letter-spacing:.06em}.summary-panel .section-head{align-items:flex-start}.summary-switch{flex-shrink:0}.summary-kpis{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:8px;margin-bottom:22px}.summary-kpis article{padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.summary-kpis span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.summary-kpis strong{font-size:19px;font-variant-numeric:tabular-nums}.summary-kpis small{color:var(--muted);margin-left:3px}.table-title{margin:20px 0 7px;font-size:13px}.summary-panel tbody tr:first-child{background:rgba(240,184,75,.045)}.summary-panel td,.summary-panel th{white-space:nowrap}.summary-panel td:first-child{font-weight:600}

@media(max-width:620px){.summary-switch{width:100%;display:grid;grid-template-columns:repeat(5,1fr)}.summary-switch button{padding-inline:2px}.summary-kpis{grid-template-columns:1fr 1fr}.chart-kpis{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}.chart-axis{padding-left:42px;padding-right:8px}.chart-axis span:nth-child(even){display:none}}
.manager-site-options{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}.manager-site-options label{padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}.manager-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.manager-site{padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.manager-site.connected{border-color:#2e4938}.manager-site header,.manager-live,.manager-day{display:flex;justify-content:space-between;gap:12px}.manager-site header span,.manager-live span,.manager-day span{color:var(--muted);font-size:11px}.manager-live{display:grid;grid-template-columns:1fr 1fr;margin:18px 0}.manager-live span{padding:10px;border:1px solid var(--line);border-radius:7px}.manager-live strong{display:block;color:var(--text);font-size:16px;margin-top:3px}.manager-day{flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:12px}.manager-site form{margin-top:15px}@media(max-width:760px){.manager-grid{grid-template-columns:1fr}.manager-totals{grid-template-columns:1fr 1fr}}
.role-form{display:flex;align-items:center;gap:8px}.role-form select{min-width:140px}.role-form .button{padding:9px 12px}@media(max-width:620px){.role-form{align-items:stretch;flex-direction:column}.role-form select{min-width:0}}
@media(max-width:380px){
  .energy-map{width:min(100%,330px)}.energy-node{width:100px}.energy-node small{max-width:100px}.metric-card strong{font-size:22px}.insights article{padding-inline:10px}
}
@media(max-height:500px) and (orientation:landscape){
  body{padding-bottom:0}.topbar{position:absolute;top:0;left:0;right:0;min-height:48px;padding-top:max(6px,env(safe-area-inset-top));pointer-events:none}.topbar .caption,.topbar .nav-actions{display:none}.layout{grid-template-columns:minmax(300px,.9fr) minmax(430px,1.1fr);padding-top:max(50px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.metrics{grid-column:1;grid-template-columns:1fr 1fr}.insights{grid-column:1;grid-template-columns:repeat(2,1fr)}.flow-panel{grid-column:2;grid-row:1/span 2}.flow-panel .section-head{margin-bottom:0}.energy-map{width:min(100%,calc(100dvh - 82px));max-height:calc(100dvh - 82px)}.chart-panel,.device-grid,.daily-panel,.layout>section:nth-last-child(-n+2){grid-column:1/-1}.mobile-nav{left:auto;width:290px}.update-pill{display:none}
}

/* Mobile containment: no component may widen the document viewport. */
.economics-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.economics-head h2{margin:0;font-size:17px}.economics-head span{padding:4px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:10px;white-space:nowrap}.economics-hero{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px;margin-bottom:8px;border:1px solid #346948;border-radius:10px;background:linear-gradient(135deg,rgba(62,165,103,.18),var(--surface-2))}.economics-hero span{color:#77d49a;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.economics-hero strong{color:#77d49a;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.economics-today{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.economics-today article,.savings-grid article{min-width:0;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}.economics-today span,.savings-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.economics-today strong,.savings-grid strong{display:block;margin-top:3px;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}.savings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.savings-grid small{display:none}.economics-coverage{display:grid;grid-template-columns:auto minmax(70px,1fr) auto auto;align-items:center;gap:8px;margin-top:11px;color:var(--muted);font-size:10px}.economics-coverage>div{height:4px;overflow:hidden;border-radius:999px;background:var(--line)}.economics-coverage i{display:block;height:100%;border-radius:inherit;background:var(--ok)}.economics-coverage strong{color:var(--text);font-size:11px}.economics-coverage small{font-size:10px}.saving-breakdown{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.saving-breakdown strong{color:var(--text);margin-left:3px}
html,body{max-width:100%;overflow-x:clip}
.account-switcher{max-width:980px;margin:14px auto 0;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#12191f;border:1px solid var(--line);border-radius:8px}.account-switcher.impersonating{background:#30230f;border-color:#8b6422}.account-switcher strong,.account-switcher span{display:block}.account-switcher span{color:var(--muted);font-size:12px}.account-switch-actions,.account-switch-actions form{display:flex;align-items:center;gap:8px}.account-switch-actions select{max-width:240px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text);padding:8px 10px;font:inherit;font-size:13px}
.layout,.settings-layout,.panel,.metric-card,.device-card,.device-editor,.form-grid>*{min-width:0}
.database-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.database-kpis article{padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.database-kpis span,.database-kpis small{display:block;color:var(--muted);font-size:11px}.database-kpis span{text-transform:uppercase;letter-spacing:.05em}.database-kpis strong{display:block;margin:4px 0;font-size:22px;font-variant-numeric:tabular-nums}.database-meta dl{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0}.database-meta dt{color:var(--muted)}.database-meta dd{margin:0;overflow-wrap:anywhere}.database-layout td,.database-layout th{white-space:nowrap}@media(max-width:700px){.database-kpis{grid-template-columns:1fr 1fr}.database-meta dl{grid-template-columns:1fr;gap:2px}.database-meta dd{margin-bottom:10px}}
.form-grid input,.form-grid select,.stack input,.stack textarea,.auth-card input{min-width:0;max-width:100%}
.section-head>*,.editor-head>*,.editor-actions>*,.tunnel-row>*{min-width:0}
.caption,.alert,.test-result,.device-note,.scan-item span,.tunnel-row p{overflow-wrap:anywhere}
@media(max-width:620px){
  .account-switcher{margin:4px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));align-items:flex-start;flex-direction:column}.account-switch-actions{width:100%;flex-wrap:wrap}.account-switch-actions form:first-child{flex:1 1 100%}.account-switch-actions select{min-width:0;flex:1}.account-switch-actions .button{white-space:nowrap}
  .economics-today,.savings-grid{grid-template-columns:repeat(3,1fr);gap:6px}.economics-today article,.savings-grid article{padding:9px 8px}.economics-today strong,.savings-grid strong{font-size:16px}.saving-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
  .settings-layout{width:100%;max-width:100%;padding:4px max(10px,env(safe-area-inset-right)) 16px max(10px,env(safe-area-inset-left));gap:10px}
  .settings-layout .panel{width:100%;max-width:100%;overflow:hidden}
  .settings-layout .section-head,.editor-head,.editor-actions,.form-actions,.tunnel-row,.scan-item{flex-wrap:wrap}
  .settings-layout .section-head .button,.editor-actions .button,.form-actions .button{max-width:100%}
  .scan-item{gap:8px}.scan-item span{flex:1 1 180px}.scan-item .button{flex:0 0 auto}
  .tunnel-row{align-items:flex-start}.tunnel-row>.nav-actions{width:100%;justify-content:flex-start;display:flex}
  .stack textarea{white-space:pre-wrap;overflow-wrap:anywhere}
  .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .energy-node{width:96px}.grid-node{left:17%}.home-node{left:83%}.energy-node small{max-width:96px}
}

/* Compact period cards replace wide analytics tables. */
.summary-list{display:grid;gap:9px}.period-card{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);overflow:hidden}.period-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--line)}.period-card header strong{font-size:13px}.period-card header span{color:var(--ok);font-size:12px;font-weight:700}.period-values{display:grid;grid-template-columns:repeat(4,1fr)}.period-values>div{min-width:0;padding:10px 13px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.period-values>div:nth-child(4n){border-right:0}.period-values>div:nth-last-child(-n+4){border-bottom:0}.period-values span,.period-values small{display:block;color:var(--muted);font-size:9px;line-height:1.25}.period-values span{text-transform:uppercase;letter-spacing:.05em}.period-values strong{display:block;overflow:hidden;margin-top:2px;font-size:14px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.period-values small{margin-top:1px}
.summary-navigation{display:flex;align-items:flex-end;gap:7px;margin:0 0 10px}.summary-navigation label{display:grid;gap:3px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.summary-navigation input{height:34px;min-width:145px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12px;color-scheme:dark}.summary-navigation>.button{height:34px;padding:5px 10px}.summary-navigation nav{display:flex;align-items:center;gap:3px;margin-left:auto}.summary-navigation nav button{width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:11px;cursor:pointer}.summary-navigation nav button.active{border-color:var(--accent);background:#39301e;color:var(--text)}.summary-navigation nav button:disabled{opacity:.35;cursor:default}.summary-navigation nav span{padding:0 2px;color:var(--muted)}

@media(max-width:620px){
  .layout{padding-inline:max(8px,env(safe-area-inset-left));gap:8px}.panel{padding:12px;border-radius:10px}.section-head{margin-bottom:11px}.section-head p{font-size:11px;line-height:1.35}
  .metrics{gap:6px}.metric-card{padding:10px 11px 9px}.metric-card span{font-size:9px}.metric-card strong{margin-top:3px;font-size:23px}.metric-card em{font-size:9px}.metric-icon{width:25px;height:25px;font-size:13px}
  .insights{grid-template-columns:repeat(3,1fr)}.insights article{padding:9px 8px}.insights span{font-size:8px;letter-spacing:.03em}.insights strong{font-size:16px}.insights small{display:block;margin:0;font-size:8px}
  .economics-head{margin-bottom:9px}.economics-hero{padding:12px 13px}.economics-hero strong{font-size:27px}.economics-today span,.savings-grid span{font-size:8px}.saving-breakdown{grid-template-columns:1fr 1fr;margin-top:9px;font-size:9px}
  .flow-panel{padding-inline:8px}.energy-map{width:min(100%,330px)}
  .chart-panel{padding-inline:8px}.chart-kpis{margin-bottom:7px;font-size:9px}.power-chart{height:185px}.chart-axis{font-size:9px}.legend{font-size:9px}
  .summary-panel{padding:12px 8px}.summary-panel .section-head{padding:0 4px}.summary-kpis{gap:5px;margin-bottom:10px}.summary-kpis article{padding:8px}.summary-kpis span{font-size:8px}.summary-kpis strong{font-size:15px}.summary-kpis small{font-size:9px}.summary-list{gap:7px}.period-card header{padding:8px 10px}.period-values{grid-template-columns:1fr 1fr}.period-values>div{padding:8px 10px}.period-values>div:nth-child(odd){border-right:1px solid var(--line)}.period-values>div:nth-child(even){border-right:0}.period-values>div:nth-last-child(-n+4){border-bottom:1px solid var(--line)}.period-values>div:nth-last-child(-n+2){border-bottom:0}.period-values strong{font-size:13px}
  .summary-navigation{display:grid;grid-template-columns:1fr auto;margin-inline:4px}.summary-navigation label{min-width:0}.summary-navigation input{width:100%;min-width:0}.summary-navigation nav{grid-column:1/-1;justify-self:center;margin:0}
  .device-grid{gap:7px}.device-card{padding:11px}.device-card dl{margin-top:8px}
}

.chart-series-toggle label{display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}.chart-series-toggle label:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.chart-series-toggle input{width:13px;height:13px;margin:0;accent-color:var(--accent)}.chart-series-toggle label:has(input:not(:checked)){opacity:.38}.chart-series-toggle .pv-key{color:var(--pv)}.chart-series-toggle .load-key{color:var(--load)}.chart-series-toggle .import-key{color:var(--grid)}.chart-series-toggle .export-key{color:#b785d6}.chart-series-toggle .battery-key{color:var(--battery)}.chart-series-toggle .soc-key{color:#76c7c0}

.header-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}.main-menu{position:relative}.main-menu summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--text);font-size:13px;cursor:pointer;user-select:none}.main-menu summary::-webkit-details-marker{display:none}.main-menu[open] summary{border-color:#53616d}.main-menu-panel{position:absolute;z-index:80;right:0;top:calc(100% + 8px);display:grid;min-width:190px;padding:6px;background:rgba(16,21,26,.98);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 38px #000b}.main-menu-panel a,.main-menu-panel button{display:block;width:100%;padding:10px 11px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-align:left;text-decoration:none;cursor:pointer}.main-menu-panel a:hover,.main-menu-panel button:hover,.main-menu-panel a.active{background:#2a323a;color:var(--text)}.main-menu-panel form{margin:0;border-top:1px solid var(--line);padding-top:5px;margin-top:5px}@media(max-width:620px){body{padding-bottom:max(10px,env(safe-area-inset-bottom))}.main-menu summary{min-height:42px;padding:9px 12px}.main-menu-panel{position:fixed;top:calc(62px + env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));min-width:0}.mobile-nav{display:none!important}}

.base-load-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.base-load-grid article{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.base-load-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.base-load-grid strong{display:inline-block;margin-top:4px;font-size:22px;font-variant-numeric:tabular-nums}.base-load-grid small{margin-left:4px;color:var(--muted);font-size:11px}.base-load-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:12px 14px;border:1px solid rgba(217,107,95,.48);border-radius:8px;background:rgba(217,107,95,.10)}.base-load-alert strong{font-size:13px;color:#efa098}.base-load-alert span{color:var(--muted);font-size:11px;text-align:right}.base-load-note{margin:9px 2px 0;color:var(--muted);font-size:10px}@media(max-width:620px){.base-load-grid{grid-template-columns:1fr 1fr;gap:6px}.base-load-grid article{padding:10px}.base-load-grid strong{font-size:18px}.base-load-alert{display:grid;gap:4px}.base-load-alert span{text-align:left}}

.battery-forecast-hero{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px;padding:15px 17px;border:1px solid rgba(101,166,123,.38);border-radius:10px;background:linear-gradient(135deg,rgba(101,166,123,.15),var(--surface-2))}.battery-forecast-hero span,.battery-forecast-hero small{display:block;color:var(--muted);font-size:10px}.battery-forecast-hero strong{display:block;margin:3px 0;font-size:23px}.battery-forecast-hero i{min-width:66px;color:#77d49a;font-size:25px;font-weight:750;font-style:normal;text-align:right}.battery-forecast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.battery-forecast-grid article{padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.battery-forecast-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.battery-forecast-grid strong{font-size:19px;font-variant-numeric:tabular-nums}.battery-forecast-grid small{margin-left:3px;color:var(--muted);font-size:10px}.battery-forecast-lines{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.battery-forecast-lines p{margin:0;padding:10px 12px;border-left:2px solid var(--battery);background:rgba(101,166,123,.06);color:var(--text);font-size:11px}.battery-forecast-note{margin:8px 2px 0;color:var(--muted);font-size:10px}@media(max-width:620px){.battery-forecast-grid{grid-template-columns:1fr 1fr;gap:6px}.battery-forecast-hero strong{font-size:19px}.battery-forecast-lines{grid-template-columns:1fr}}

.device-card.clickable{cursor:pointer;transition:transform .2s,border-color .2s}.device-card.clickable:hover,.device-card.clickable:focus{transform:translateY(-2px);border-color:var(--accent);outline:none}.device-details-link{display:block;margin-top:12px;color:var(--accent);font-size:12px;font-weight:700}
.device-last-data{margin:12px 0 0;padding-top:9px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.device-head-actions{display:flex;align-items:center;gap:10px}.device-card.ordering{position:relative;padding-top:55px;border-color:var(--accent)}.device-order-controls{position:absolute;top:10px;left:10px;right:10px;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px}.device-order-controls span{text-align:center;color:var(--muted);font-size:11px}.device-order-controls button{height:34px;border:1px solid var(--line);border-radius:7px;background:#252c33;color:var(--text);font-size:18px;cursor:pointer}.device-order-controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.device-order-controls button:disabled{opacity:.3;cursor:default}@media(max-width:620px){.device-head-actions{align-items:flex-end;flex-direction:column;gap:5px}.device-head-actions .button{padding:6px 9px;font-size:11px}}
.awtrix-layout{max-width:1080px}.awtrix-editor .editor-head>div{display:flex;align-items:center;gap:10px}.awtrix-options{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-top:15px}.awtrix-options fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;padding:13px;border:1px solid var(--line);border-radius:8px}.awtrix-options legend{padding:0 6px;color:var(--muted);font-size:11px;text-transform:uppercase}.awtrix-options label,.toggle-row{display:flex;align-items:center;gap:7px;font-size:12px}.toggle-row{margin-top:13px}.awtrix-options input[type=checkbox],.toggle-row input{accent-color:var(--accent)}.awtrix-options .inline-limit{color:var(--muted)}.awtrix-options .inline-limit input{width:76px;margin:0;padding:5px 7px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text)}@media(max-width:700px){.awtrix-options{grid-template-columns:1fr}.awtrix-options fieldset{grid-template-columns:1fr}.awtrix-editor .editor-actions{display:grid;grid-template-columns:1fr 1fr}.awtrix-editor .editor-actions .test-result{grid-column:1/-1}}
.awtrix-demo-panel select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text)}.awtrix-device-shell{position:relative;width:min(100%,960px);margin:12px auto 0;padding:30px 38px 38px;border:1px solid #303740;border-radius:24px;background:linear-gradient(145deg,#171b20,#080a0d);box-shadow:0 22px 50px #0009,inset 0 1px #ffffff12}.awtrix-device-shell canvas{display:block;width:100%;min-width:256px;aspect-ratio:4/1;border:7px solid #050607;border-radius:7px;background:#020304;image-rendering:pixelated;box-shadow:0 0 25px #f0b84b18}.awtrix-buttons{position:absolute;right:12%;bottom:11px;display:flex;gap:22px}.awtrix-buttons i{width:25px;height:6px;border-radius:2px;background:#30363d;box-shadow:inset 0 1px #ffffff18}.awtrix-demo-meta{display:flex;justify-content:space-between;width:min(100%,960px);margin:8px auto 0;color:var(--muted);font-size:11px}.pixel-art-section{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.12)}.pixel-art-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.pixel-art-head small{display:block;color:var(--muted);font-size:10px}.pixel-art-head .toggle-row{margin:0}.pixel-art-workspace{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:13px;align-items:start}.pixel-grid{display:grid;grid-template-columns:repeat(32,1fr);gap:2px;padding:7px;border:1px solid #272e35;border-radius:8px;background:#050607;touch-action:none;user-select:none}.pixel{aspect-ratio:1;padding:0;border:0;border-radius:1px;background:#090b0d;cursor:crosshair}.pixel.lit{background:var(--pixel);box-shadow:0 0 4px color-mix(in srgb,var(--pixel) 75%,transparent)}.pixel-tools{display:grid;gap:8px}.pixel-tools>input[type=color]{width:100%;height:36px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}.pixel-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pixel-palette button{height:30px;border:1px solid var(--line);border-radius:5px;background:var(--swatch);cursor:pointer}.pixel-palette .eraser{background:var(--surface-2);color:var(--text);font-size:17px}@media(max-width:700px){.awtrix-device-shell{padding:14px 16px 23px;border-radius:12px;overflow:hidden}.awtrix-device-shell canvas{min-width:0;border-width:4px}.pixel-art-workspace{grid-template-columns:1fr}.pixel-grid{gap:1px;padding:4px}.pixel-tools{grid-template-columns:70px 1fr 1fr}.pixel-palette{grid-column:1/-1;grid-row:2}.pixel-tools .button{padding:7px 6px;font-size:10px}.pixel-art-head{align-items:flex-start;flex-direction:column}}
.icon-gallery-section{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:9px;background:rgba(102,163,210,.04)}.icon-gallery-section a{color:var(--accent)}.icon-assignments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.icon-assignments label{display:grid;grid-template-columns:1fr 38px;gap:4px 7px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}.icon-assignments span{grid-column:1/-1;color:var(--muted);font-size:9px;text-transform:uppercase}.icon-assignments input{min-width:0;width:100%;padding:7px;border:1px solid var(--line);border-radius:5px;background:#0d1115;color:var(--text)}.icon-assignments img{display:none;width:32px;height:32px;object-fit:contain;image-rendering:pixelated;border-radius:4px;background:#050607}.icon-assignments img.visible{display:block}.icon-upload-row{display:grid;grid-template-columns:1fr 180px auto;gap:9px;align-items:end;margin-top:11px}.icon-upload-row label{display:grid;gap:4px;color:var(--muted);font-size:10px}.icon-upload-row input,.icon-upload-row select{min-width:0;width:100%;padding:7px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);color:var(--text)}@media(max-width:700px){.icon-assignments{grid-template-columns:1fr 1fr}.icon-upload-row{grid-template-columns:1fr}.icon-upload-row .button{width:100%}}@media(max-width:430px){.icon-assignments{grid-template-columns:1fr}}