/* =========================================================
   Home Control — shared styles (light + dark)
   ========================================================= */
:root{
  --paper:#f4f3ef; --card:#ffffff; --card-2:#f8f7f3; --ink:#22272b; --ink-soft:#687078;
  --line:#e3e0d9; --accent:#2d6a8a; --accent-2:#245770; --accent-ink:#fff;
  --ok:#2f9e44; --warn:#d97706; --bad:#c92a2a; --info:#1c7ed6; --off:#8a929a; --run:#1c7ed6;
  --glow:#f5b83d; --cool:#3a8fd6; --heat:#e8590c;
  --radius:20px; --r-sm:12px;
  --shadow:0 1px 2px rgba(20,24,28,.05),0 4px 14px rgba(20,24,28,.04);
  --tabh:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111417; --card:#1a1f23; --card-2:#20262b; --ink:#e7eaec; --ink-soft:#98a1a9;
    --line:#2b3238; --accent:#5aa7cc; --accent-2:#7dbad8; --accent-ink:#0d1a21;
    --ok:#47b35c; --warn:#f0a030; --bad:#ef5350; --info:#4ea1f0; --off:#6f7880; --run:#4ea1f0;
    --glow:#f7c45a;
    --shadow:none;
    color-scheme:dark;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden}
h1,h2,h3{font-family:'Fredoka','Nunito Sans',sans-serif;font-weight:600;line-height:1.15;letter-spacing:.005em}
a{color:var(--accent)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;background:var(--card-2);padding:.05em .35em;border-radius:6px}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:2000;background:var(--card);padding:.5rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- frame ---------- */
.wrap{width:min(100% - 2rem,1080px);margin-inline:auto;padding:1rem 0 calc(var(--tabh) + 2rem + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:900;background:var(--paper);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
/* note: no backdrop-filter on phones — it would make the fixed tab bar stick to the header */
.topbar-in{width:min(100% - 2rem,1080px);margin-inline:auto;display:flex;align-items:center;gap:.75rem;height:56px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.brand-name{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem}
.iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-soft);
  border:1px solid var(--line);background:var(--card);text-decoration:none;cursor:pointer}
.iconbtn.on,.iconbtn:hover{color:var(--accent);border-color:var(--accent)}
.iconbtn .ic{width:20px;height:20px}

/* tabs: bottom bar on phones, inline in the top bar on wide screens */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:950;display:grid;grid-template-columns:repeat(6,1fr);
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;border-radius:12px;
  color:var(--ink-soft);text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:.01em}
.tab .ic{width:23px;height:23px}
.tab.on{color:var(--accent)}
.tab.on .ic{stroke-width:2.4}
@media (min-width:860px){
  .topbar{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
  .tabs{position:static;display:flex;gap:.25rem;background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .tab{flex-direction:row;gap:.4rem;min-height:38px;padding:0 .8rem;font-size:.88rem}
  .tab .ic{width:18px;height:18px}
  .tab.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .wrap{padding-bottom:3rem}
}
.page-h{margin:.4rem 0 1rem}
.page-h h1{font-size:clamp(1.6rem,6vw,2.1rem)}
.page-h .sub{color:var(--ink-soft);font-size:.92rem}
.offline-bar{background:var(--warn);color:#fff;font-weight:700;font-size:.85rem;text-align:center;padding:.35rem 1rem;display:flex;gap:.5rem;justify-content:center;align-items:center}

/* ---------- sections & cards ---------- */
.section-t{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin:1.6rem 0 .7rem}
.section-t:first-child{margin-top:.25rem}
.grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.1rem;box-shadow:var(--shadow);min-width:0}
.card + .card{margin-top:0}
.card-h{display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem}
.card-h .grow{flex:1;min-width:0}
.card-h h2{font-size:1.15rem}
.card-h .model{font-size:.8rem;color:var(--ink-soft)}
.bubble{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--lv,var(--accent)) 14%,var(--card));color:var(--lv,var(--accent))}
.bubble .ic{width:25px;height:25px}
.lv-run{--lv:var(--run)} .lv-ok,.lv-done{--lv:var(--ok)} .lv-idle{--lv:var(--accent)} .lv-off,.lv-none{--lv:var(--off)}
.lv-pause{--lv:var(--warn)} .lv-warn{--lv:var(--warn)} .lv-error{--lv:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.22rem .7rem;font-size:.8rem;font-weight:800;white-space:nowrap;
  background:color-mix(in srgb,var(--lv,var(--off)) 14%,var(--card));color:var(--lv,var(--off))}
.pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.pill.lv-run::before{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.banner{display:flex;gap:.8rem;align-items:flex-start;border-radius:var(--radius);padding:.95rem 1.05rem;color:#fff;background:var(--lv,var(--off));margin-bottom:.85rem}
.banner .bubble{background:rgba(255,255,255,.2);color:#fff}
.banner b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;display:block}
.banner small{opacity:.92;font-size:.82rem}
.banner.lv-error{animation:pulse 2s ease-in-out infinite}
@media (prefers-color-scheme:dark){.banner{background:color-mix(in srgb,var(--lv,var(--off)) 62%,#000)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 45%,transparent)}50%{box-shadow:0 0 0 10px transparent}}

.kv{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-top:1px dashed var(--line);font-size:.92rem}
.kv span{color:var(--ink-soft)} .kv b{font-weight:700;text-align:right}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:.6rem;margin:.2rem 0 .6rem}
.stat{background:var(--card-2);border-radius:14px;padding:.6rem .75rem;min-width:0}
.stat .k{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;display:flex;gap:.3rem;align-items:center}
.stat .v{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.45rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat .v small{font-size:.8rem;color:var(--ink-soft);font-family:'Nunito Sans',sans-serif;font-weight:700;margin-left:.15rem}
.stat.big .v{font-size:2rem}
.muted{color:var(--ink-soft);font-size:.86rem}
.hint{color:var(--ink-soft);font-size:.84rem;margin:.15rem 0 .6rem}
.door{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:14px;background:var(--card-2);font-weight:700;font-size:.92rem}
.door .ic{width:30px;height:30px}
.door.open{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn)}
.door.closed .ic,.door.locked .ic{color:var(--ok)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row.split > *{flex:1 1 0}
.mt{margin-top:.85rem}

/* ---------- buttons & controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:.6rem 1rem;border-radius:14px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);font:700 .95rem 'Nunito Sans',sans-serif;cursor:pointer;
  text-decoration:none;transition:transform .08s ease,background .15s ease;touch-action:manipulation}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.on{background:color-mix(in srgb,var(--accent) 14%,var(--card));border-color:var(--accent);color:var(--accent)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.sm{min-height:36px;padding:.35rem .75rem;font-size:.84rem;border-radius:11px}
.btn.wide{width:100%}
.btn .ic{width:20px;height:20px}

/* on/off switch */
.switch{position:relative;width:54px;height:32px;border-radius:999px;border:0;background:color-mix(in srgb,var(--off) 40%,var(--card-2));cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"]::after{transform:translateX(22px)}
.switch:disabled{opacity:.5}
.switch.busy::after{animation:spinpulse .8s ease-in-out infinite alternate}
@keyframes spinpulse{to{opacity:.4}}

/* segmented control */
.seg{display:flex;flex-wrap:wrap;gap:.35rem}
.seg button{flex:1 1 auto;min-height:40px;padding:.4rem .7rem;border-radius:11px;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink);font:700 .85rem 'Nunito Sans',sans-serif;cursor:pointer;text-transform:capitalize}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* stepper  − 21 °C + */
.stepper{display:flex;align-items:center;gap:.6rem;justify-content:center}
.stepper button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card-2);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.stepper button .ic{width:22px;height:22px}
.stepper .val{font-family:'Fredoka',sans-serif;font-size:2.4rem;font-weight:600;min-width:5.5ch;text-align:center;line-height:1}
.stepper .val small{font-size:1rem;color:var(--ink-soft)}

/* range */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--glow) var(--p,50%),color-mix(in srgb,var(--off) 30%,var(--card-2)) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--glow) var(--p,50%),color-mix(in srgb,var(--off) 30%,var(--card-2)) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:0;margin-top:-9px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* slide to confirm */
.slide{position:relative;height:60px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--card-2));
  border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.slide + .slide{margin-top:.6rem}
.slide .fill{position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px}
.slide .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 1rem 0 66px;font-weight:800;font-size:.92rem;
  color:var(--accent);text-align:center;line-height:1.2;pointer-events:none}
.slide .lbl .ic{margin-right:.35rem}
.slide .knob{position:absolute;top:4px;left:4px;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;cursor:grab;touch-action:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.slide .knob .ic{width:24px;height:24px}
.slide.drag .knob{cursor:grabbing}
.slide:not(.drag) .knob,.slide:not(.drag) .fill{transition:transform .3s ease,width .3s ease}
.slide.busy{opacity:.85}.slide.busy .knob{animation:spinpulse .7s ease-in-out infinite alternate}
.slide.ok{background:color-mix(in srgb,var(--ok) 16%,var(--card-2));border-color:var(--ok)} .slide.ok .lbl{color:var(--ok)} .slide.ok .knob{background:var(--ok)}
.slide.fail{background:color-mix(in srgb,var(--bad) 12%,var(--card-2));border-color:var(--bad)} .slide.fail .lbl{color:var(--bad)} .slide.fail .knob{background:var(--bad)}
.slide.disabled{opacity:.5;pointer-events:none}
.slide .lbl::after{content:'›››';margin-left:.5rem;letter-spacing:-.1em;opacity:.55;animation:nudge 1.8s ease-in-out infinite}
.slide.busy .lbl::after,.slide.ok .lbl::after,.slide.fail .lbl::after{content:none}
@keyframes nudge{50%{transform:translateX(4px);opacity:.9}}
.slide .lbl::after{display:inline-block}

/* ---------- forms ---------- */
.field{display:grid;gap:.3rem;margin-bottom:.85rem}
.field > span{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.field small{color:var(--ink-soft);font-size:.8rem}
input:not([type=range]):not([type=checkbox]):not([type=file]),select,textarea{font:inherit;font-size:16px;color:var(--ink);width:100%;
  padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.check{display:flex;gap:.55rem;align-items:center;font-size:.92rem;margin:.3rem 0}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.notice{border-radius:14px;padding:.7rem .9rem;font-size:.88rem;margin-bottom:.9rem;border:1px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,var(--card));color:var(--ink)}
.notice.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.notice.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--card))}
.notice .ic{color:var(--warn)}
table.t{width:100%;border-collapse:collapse;font-size:.86rem}
table.t th,table.t td{text-align:left;padding:.45rem .4rem;border-top:1px solid var(--line);vertical-align:top}
table.t th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;word-break:break-all}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- login ---------- */
body.auth{display:grid;place-items:center;padding:1.25rem;padding-top:calc(1.25rem + env(safe-area-inset-top))}
.auth-box{width:min(100%,380px)}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:1.75rem 1.5rem;box-shadow:var(--shadow)}
.auth-mark{width:56px;height:56px;border-radius:18px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:.9rem}
.auth-mark .ic{width:30px;height:30px}
.auth-card h1{font-size:1.6rem}
.auth-card .sub{color:var(--ink-soft);margin:.15rem 0 1.2rem;font-size:.92rem}

/* ---------- overview tiles ---------- */
.tiles{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:.5rem;min-height:132px;padding:.9rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile .bubble{width:40px;height:40px;border-radius:12px}
.tile .bubble .ic{width:22px;height:22px}
.tile .t-name{font-weight:800;font-size:.86rem;color:var(--ink-soft)}
.tile .t-val{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;line-height:1.15;margin-top:auto}
.tile .t-sub{font-size:.8rem;color:var(--ink-soft);line-height:1.3}
.tile.wide{grid-column:span 2}
.tile .dot{position:absolute;top:.9rem;right:.9rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--lv,var(--off))}
.tile.lv-run .dot,.tile.lv-error .dot{animation:blink 1.6s ease-in-out infinite}

/* ---------- climate ---------- */
.zone{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-top:1px dashed var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font:inherit;color:inherit}
.zone:first-of-type{border-top:0}
.zone .zn{flex:1;min-width:0}
.zone .zn b{display:block;font-weight:800}
.zone .zn small{color:var(--ink-soft);font-size:.8rem}
.zone .zt{font-family:'Fredoka',sans-serif;font-size:1.5rem;font-weight:600;text-align:right;line-height:1.1}
.zone .zt small{display:block;font-family:'Nunito Sans',sans-serif;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.therm{width:8px;height:42px;border-radius:99px;flex:none;background:var(--tc,var(--off))}
.zone-src{padding:.2rem 0 .6rem 1.2rem;display:none}
.zone.open + .zone-src{display:block}
.zone-src .kv{font-size:.84rem}

/* ---------- lights ---------- */
.lamp{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-top:1px dashed var(--line)}
.lamp:first-child{border-top:0}
.lamp .lic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--card-2);color:var(--off);border:0;cursor:pointer}
.lamp.on .lic{background:color-mix(in srgb,var(--glow) 25%,var(--card));color:var(--glow);box-shadow:0 0 18px color-mix(in srgb,var(--glow) 35%,transparent)}
.lamp .ln{flex:1;min-width:0}
.lamp .ln b{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lamp .ln small{color:var(--ink-soft);font-size:.78rem}
.lamp .ln input[type=range]{height:26px;margin-top:.1rem}
.lamp.na{opacity:.5}
.lamp .edit{width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--card-2);border-radius:999px;padding:.38rem .75rem;
  font:700 .84rem 'Nunito Sans',sans-serif;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- bottom sheet ---------- */
.sheet{position:fixed;inset:0;z-index:1500;background:rgba(10,14,18,.55);display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet .panel{background:var(--card);width:min(100%,520px);max-height:90vh;max-height:90dvh;overflow:auto;border-radius:24px 24px 0 0;
  padding:1.2rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom))}
@media (min-width:640px){.sheet{align-items:center;padding:1.5rem}.sheet .panel{border-radius:var(--radius)}}
.sheet .sh-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.sheet .sh-h h2{flex:1;font-size:1.3rem}
.sheet .members{max-height:40vh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:.3rem .7rem;margin-bottom:.85rem}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 1.2rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(1rem);
  background:var(--ink);color:var(--paper);padding:.6rem 1.1rem;border-radius:999px;font-weight:700;font-size:.88rem;opacity:0;pointer-events:none;
  transition:.25s;z-index:2000;max-width:calc(100% - 2rem);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.bad{background:var(--bad);color:#fff}
@media (min-width:860px){.toast{bottom:1.5rem}}

/* ---------- energy ---------- */
.gauge{display:flex;align-items:baseline;gap:.4rem;font-family:'Fredoka',sans-serif;font-weight:600}
.gauge .n{font-size:3rem;line-height:1}
.gauge .u{font-size:1.1rem;color:var(--ink-soft)}
.meterbar{height:10px;border-radius:99px;background:var(--card-2);overflow:hidden;margin:.6rem 0 .2rem}
.meterbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--bad));border-radius:99px;transition:width .6s ease}
.tariff{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;font-size:.82rem;padding:.25rem .7rem;border-radius:999px;
  background:var(--card-2)}
.tariff.low{color:var(--ok)} .tariff.normal{color:var(--warn)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}