@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/PlayfairDisplay.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }

:root {
  --gold: #C5A067; --gold-2: #E6D183; --gold-3: #F1D9A6; --gold-d: #8C6A3F;
  --black: #0E0E0E; --dark: #1A1A1A; --card: #161616; --card-2: #1D1C1A;
  --line: rgba(244, 239, 230, 0.07); --line-2: rgba(197, 160, 103, 0.22);
  --text: #F4EFE6; --muted: #9C968B; --dim: #6E6A63;
  --ok: #86B596; --warn: #E3A84E; --bad: #E5765F; --heat: #EC874A;
  --r: 24px; --serif: 'Playfair Display', Georgia, serif;
  --goldgrad: linear-gradient(135deg, #ab8646 0%, #dbc173 45%, #e6d183 55%, #ab8646 100%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--black); color: var(--text); font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif; }
body { min-height: 100vh; background:
  radial-gradient(900px 520px at 85% -8%, rgba(197,160,103,.13), transparent 60%),
  radial-gradient(700px 500px at -10% 30%, rgba(197,160,103,.05), transparent 60%), var(--black); background-attachment: fixed; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
.i { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* splash */
.splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; }
.splash-icon { width: 120px; border-radius: 28px; box-shadow: 0 20px 60px rgba(197,160,103,.18); animation: breathe 2.4s ease-in-out infinite; }
.splash-msg { color: var(--muted); letter-spacing: .5px; font-size: 14px; text-align: center; max-width: 320px; }
.connect { display: grid; gap: 10px; width: min(320px, calc(100vw - 48px)); }
.connect label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.connect input { background: var(--card); border: 1px solid #2c2a26; border-radius: 14px; color: var(--text); font: inherit; font-size: 15px; padding: 14px 16px; }
.connect input:focus { outline: none; border-color: var(--gold); }
.connect button { background: var(--goldgrad); color: #1a1408; border: 0; border-radius: 14px; font: inherit; font-weight: 600; font-size: 15px; padding: 14px; cursor: pointer; }
.connect p { color: var(--dim); font-size: 12px; text-align: center; margin: 4px 0 0; }
@keyframes breathe { 50% { transform: scale(.96); opacity: .7; } }

/* layout */
.app { max-width: 1180px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 10px; }
.logo { height: 34px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(26,26,26,.8); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(10px); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.pill[data-state="uwaga"] .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.pill[data-state="alarm"] .dot { background: var(--bad); box-shadow: 0 0 12px var(--bad); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.view { display: none; }
.view.active { display: block; animation: rise .38s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sec { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 12px; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.link { color: var(--gold); font-size: 12px; letter-spacing: .4px; text-transform: none; font-weight: 600; }
.eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }

.card { background: linear-gradient(180deg, rgba(31,30,28,.92), rgba(20,20,20,.92)); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; position: relative; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0; letter-spacing: .2px; }
.hint { color: var(--muted); font-size: 12px; }

/* hero */
.hero { padding: 12px 2px 4px; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.date { color: var(--muted); font-size: 13px; letter-spacing: .3px; }
.date::first-letter { text-transform: uppercase; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 6vw, 48px); margin: 4px 0 0; line-height: 1.05; }
.weather { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(26,26,26,.7); border: 1px solid var(--line); text-align: left; }
.weather .i { width: 30px; height: 30px; color: var(--gold-3); }
.weather b { font-size: 20px; font-weight: 600; display: block; }
.weather small { color: var(--muted); font-size: 11px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 16px 2px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-s { display: flex; align-items: center; gap: 8px; flex: none; padding: 9px 13px; border-radius: 14px; background: rgba(26,26,26,.75); border: 1px solid var(--line); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip-s .i { width: 17px; height: 17px; color: var(--gold); }
.chip-s.bad { border-color: rgba(229,118,95,.6); background: rgba(229,118,95,.14); }
.chip-s.bad .i { color: var(--bad); }
.alarm { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(229,118,95,.16); border: 1px solid rgba(229,118,95,.55); color: #FFD9CF; font-weight: 600; display: flex; gap: 10px; align-items: center; animation: blink 1.6s infinite; }

/* scenes */
.scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.scene { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 14px; border-radius: 20px; background: var(--dark); border: 1px solid var(--line); text-align: left; overflow: hidden; transition: transform .12s, border-color .3s; }
.scene::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(197,160,103,.18), transparent 70%); }
.scene .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(197,160,103,.13); color: var(--gold-3); }
.scene .nm { font-weight: 600; font-size: 14px; }
.scene .sub { font-size: 11px; color: var(--muted); margin-top: -14px; min-height: 13px; }
.scene:active { transform: scale(.97); }
.scene.last { border-color: var(--line-2); }
.scene.flash { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 30px rgba(197,160,103,.25); }

/* plan */
.plan-card { padding: 14px; }
.plan { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0b0b0b; }
.plan img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan .glow { mix-blend-mode: screen; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.plan .glow.on { opacity: 1; }
.plan .blind { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.plan .blind.on { opacity: 1; }
.roomhit { position: absolute; border-radius: 10px; transition: background .25s; }
.roomhit:hover { background: rgba(197,160,103,.06); }
.hot { position: absolute; transform: translate(-50%, -50%); width: clamp(30px, 4.6vw, 46px); height: clamp(30px, 4.6vw, 46px); border-radius: 50%;
  background: rgba(14,14,14,.62); border: 1px solid rgba(197,160,103,.5); backdrop-filter: blur(4px); display: grid; place-items: center; transition: transform .15s, background .3s, box-shadow .3s; z-index: 2; }
.hot .i { width: 52%; height: 52%; color: #BDBDBD; transition: color .3s; }
.hot.on { background: rgba(197,160,103,.28); box-shadow: 0 0 24px rgba(255,214,150,.6); }
.hot.on .i { color: #FFE2B0; }
.hot.wet { background: rgba(229,118,95,.9); }
.hot.wet .i { color: #fff; }
.hot:active { transform: translate(-50%, -50%) scale(.9); }
.tag { position: absolute; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 12px; background: rgba(14,14,14,.7); font-size: clamp(10px, 1.2vw, 13px); font-weight: 600; white-space: nowrap; z-index: 2; pointer-events: none; }

/* light tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { position: relative; overflow: hidden; border-radius: 22px; padding: 14px; min-height: 124px; background: var(--dark); border: 1px solid var(--line);
  display: flex; flex-direction: column; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; transition: border-color .3s, transform .12s; }
.tile .fill { position: absolute; inset: 0 auto 0 0; width: var(--b, 0%); background: linear-gradient(90deg, rgba(197,160,103,.34), rgba(230,209,131,.22)); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.tile.dragging .fill { transition: none; }
.tile > *:not(.fill) { position: relative; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ti { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #262626; color: #9a958c; transition: background .3s, color .3s, box-shadow .3s; }
.tile.on { border-color: var(--line-2); }
.tile.on .ti { background: var(--goldgrad); color: #1a1408; box-shadow: 0 0 22px rgba(230,209,131,.45); }
.more { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.more .i { width: 18px; height: 18px; }
.tile-nm { margin-top: auto; font-weight: 600; font-size: 14px; }
.tile-st { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tile.on .tile-st { color: var(--gold-3); }
.tile:active { transform: scale(.985); }

/* rooms */
.rooms-nav { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rooms-nav::-webkit-scrollbar { display: none; }
.rpill { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--dark); border: 1px solid var(--line); text-align: left; transition: background .3s, color .3s; }
.rpill .ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #262626; color: var(--gold); }
.rpill .nm { font-weight: 600; font-size: 14px; display: block; }
.rpill .t { font-size: 11px; color: var(--muted); }
.rpill.active { background: var(--goldgrad); color: #1a1408; border-color: transparent; }
.rpill.active .ic { background: rgba(0,0,0,.14); color: #1a1408; }
.rpill.active .t { color: rgba(26,20,8,.7); }
.room-hero { margin-top: 12px; overflow: hidden; }
.rh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rh-name { font-family: var(--serif); font-size: 34px; font-weight: 600; margin: 4px 0 2px; }
.rh-meta { color: var(--muted); font-size: 13px; }
.rh-temp { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--gold-2); }
.rh-temp small { font-size: 18px; color: var(--muted); font-family: 'Montserrat', sans-serif; display: block; text-align: right; margin-top: 4px; }
.spark { width: 100%; height: 64px; display: block; margin-top: 12px; }
.spark-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 4px; }
.rh-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 16px; background: var(--goldgrad); color: #15110a; font-weight: 700; font-size: 14px; }
.btn.ghost { background: transparent; border: 1px solid rgba(197,160,103,.55); color: var(--gold-3); font-weight: 600; }
.btn.sm { padding: 9px 14px; font-size: 12.5px; border-radius: 12px; }
.btn.wide { width: 100%; }
.btn.danger { background: var(--bad); color: #fff; }
.btn .i { width: 18px; height: 18px; }
.rb { width: 48px; height: 48px; border-radius: 16px; background: #242424; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); transition: background .2s, transform .1s; }
.rb:active { background: #333; transform: scale(.94); }
.rb .i { width: 22px; height: 22px; }
.chip { padding: 9px 14px; border-radius: 12px; background: #242424; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.chip.on { border-color: var(--gold); color: var(--gold-3); }

/* dial */
.dial-card { display: flex; flex-direction: column; align-items: center; }
.dial-card .card-head { align-self: stretch; }
.dial { position: relative; width: min(100%, 270px); aspect-ratio: 1; touch-action: none; }
.dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial .trk { fill: none; stroke: #2a2a2a; stroke-width: 18; stroke-linecap: round; }
.dial .tick { stroke: #3a3a3a; stroke-width: 2; stroke-linecap: round; }
.dial .val { fill: none; stroke: url(#dg-gold); stroke-width: 18; stroke-linecap: round; transition: d .25s; filter: drop-shadow(0 0 8px rgba(197,160,103,.35)); }
.dial.heating .val { stroke: url(#dg-heat); filter: drop-shadow(0 0 12px rgba(236,135,74,.55)); }
.dial.off .val { stroke: #3a3a3a; filter: none; }
.dial .knob { fill: #F4EFE6; stroke: #111; stroke-width: 4; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.dial-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-st { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.dial-st .i { width: 16px; height: 16px; }
.dial.heating .dial-st { color: var(--heat); }
.dial.heating .dial-st .i { animation: flick 1.2s ease-in-out infinite; }
@keyframes flick { 50% { transform: scale(1.18) translateY(-1px); opacity: .7; } }
.dial.off .dial-st { color: var(--muted); }
.dial-t { font-family: var(--serif); font-size: 58px; line-height: 1.05; margin: 4px 0; }
.dial.off .dial-t { color: var(--dim); }
.dial-cur { font-size: 12.5px; color: var(--muted); }
.dial-ctrls { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.mode { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: #242424; border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.mode .i { width: 18px; height: 18px; }
.mode.on { border-color: rgba(236,135,74,.5); color: #FFC9A6; }

/* cover */
.cover-body { display: flex; align-items: center; justify-content: center; gap: 22px; }
.window { position: relative; width: 150px; height: 210px; border-radius: 16px; overflow: hidden; border: 3px solid #3a3a3a; touch-action: none; cursor: ns-resize; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0f1a33, #2b3a5c 70%, #4a4060); }
.sky.day { background: linear-gradient(180deg, #6fa3d8, #b7d3ea 70%, #f3e2c4); }
.sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 55%, #fff, transparent), radial-gradient(1px 1px at 80% 65%, #fff, transparent); opacity: .7; }
.sky.day::after { opacity: 0; }
.win-x { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 1.5px), #3a3a3a calc(50% - 1.5px), #3a3a3a calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.slats { position: absolute; left: 0; right: 0; top: 0; height: var(--closed, 0%); background: repeating-linear-gradient(180deg, #4a4540 0 10px, #36322e 10px 13px); box-shadow: 0 4px 10px rgba(0,0,0,.5); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.window.dragging .slats { transition: none; }
.slats::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #5b544c; }
.cover-btns { display: flex; flex-direction: column; gap: 10px; }
.cover-pos { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* climate list / forecast */
.trow { display: grid; grid-template-columns: 1fr 120px 70px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.trow:first-child { border-top: 0; }
.trow .nm { font-weight: 600; font-size: 14px; }
.trow .sub { font-size: 11.5px; color: var(--muted); }
.trow .v { font-family: var(--serif); font-size: 24px; text-align: right; color: var(--gold-2); }
.trow .spark { height: 36px; margin: 0; }
.forecast { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fday { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; background: #1f1f1f; border: 1px solid var(--line); }
.fday:first-child { border-color: var(--line-2); background: rgba(197,160,103,.08); }
.fday .d { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.fday .i { width: 28px; height: 28px; color: var(--gold-3); }
.fday .hi { font-weight: 600; }
.fday .lo { font-size: 12px; color: var(--muted); }
.dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }

/* energy */
.power { position: relative; width: min(100%, 230px); aspect-ratio: 1; margin: 0 auto; }
.power svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pr-bg { fill: none; stroke: #262626; stroke-width: 14; }
.pr { fill: none; stroke: url(#dg-gold); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 534; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 8px rgba(197,160,103,.4)); }
.power-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pw { font-family: var(--serif); font-size: 52px; line-height: 1; }
.pw small { font-size: 18px; color: var(--muted); font-family: 'Montserrat', sans-serif; }
.pw-l { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(197,160,103,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(197,160,103,0); } 100% { box-shadow: 0 0 0 0 rgba(197,160,103,0); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat { padding: 14px; border-radius: 16px; background: #1f1f1f; border: 1px solid var(--line); }
.sv { font-family: var(--serif); font-size: 30px; }
.sv small { font-size: 13px; color: var(--muted); font-family: 'Montserrat', sans-serif; }
.sl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bars { width: 100%; height: auto; display: block; }
.bars .bv { font-size: 10px; fill: var(--muted); font-family: 'Montserrat', sans-serif; }
.bars .bl { font-size: 10.5px; fill: var(--dim); font-family: 'Montserrat', sans-serif; }

/* security */
.lock-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lock-card .card-head { align-self: stretch; }
.lockbtn { position: relative; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; margin: 4px 0 10px; }
.lockbtn > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lr-bg { fill: rgba(26,26,26,.9); stroke: #2a2a2a; stroke-width: 8; }
.lr { fill: none; stroke: url(#dg-gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset .25s; }
.lockbtn.holding .lr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
.lock-ic { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--goldgrad); color: #1a1408; box-shadow: 0 0 40px rgba(197,160,103,.3); transition: background .3s, transform .2s; }
.lock-ic .i { width: 40px; height: 40px; }
.lockbtn.unlocked .lock-ic { background: linear-gradient(135deg, #b4503c, #e5765f); color: #fff; box-shadow: 0 0 40px rgba(229,118,95,.35); }
.lockbtn:active .lock-ic { transform: scale(.95); }
.lock-st { font-family: var(--serif); font-size: 24px; }
.lock-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.srow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.srow:first-child { border-top: 0; }
.sic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #242424; color: var(--gold); flex: none; }
.sic.bad { background: rgba(229,118,95,.18); color: var(--bad); }
.sic.ok { color: var(--ok); }
.srow .nm { font-weight: 600; font-size: 14px; }
.srow .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.srow .sub.bad { color: var(--bad); font-weight: 600; }
.srow .grow { flex: 1; min-width: 0; }
.batt { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.batt span { display: block; width: 34px; height: 8px; border-radius: 4px; background: #2a2a2a; overflow: hidden; }
.batt span i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.batt.low span i { background: var(--bad); }

.care-card { margin-top: 14px; overflow: hidden; }
.care-card::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(134,181,150,.12), transparent 70%); pointer-events: none; }
.care-card[data-state="uwaga"]::before { background: radial-gradient(circle, rgba(227,168,78,.14), transparent 70%); }
.care-card[data-state="alarm"]::before { background: radial-gradient(circle, rgba(229,118,95,.2), transparent 70%); }
.care-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.care-badge { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: rgba(134,181,150,.14); color: var(--ok); flex: none; }
.care-card[data-state="uwaga"] .care-badge { background: rgba(227,168,78,.16); color: var(--warn); }
.care-card[data-state="alarm"] .care-badge { background: rgba(229,118,95,.2); color: var(--bad); }
.care-badge .i { width: 28px; height: 28px; }
.care-title { font-family: var(--serif); font-size: 22px; }
.care-desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.switch { width: 52px; height: 32px; border-radius: 999px; background: #333; position: relative; flex: none; transition: background .3s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #CFCFCF; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s; }
.switch.on { background: var(--goldgrad); }
.switch.on span { transform: translateX(20px); background: #fff; }
.care-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }

/* tab bar */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 20px)); z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px; border-radius: 26px; background: rgba(22,22,22,.78); border: 1px solid rgba(244,239,230,.08); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 19px; color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; transition: color .25s, background .25s; }
.tab .i { width: 23px; height: 23px; }
.tab.active { color: var(--gold-3); background: rgba(197,160,103,.12); }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, #1d1c1a, #141414); border: 1px solid var(--line); border-bottom: 0; border-radius: 30px 30px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); animation: up .32s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translate(-50%, 100%); } }
.grab { width: 44px; height: 5px; border-radius: 3px; background: #3a3a3a; margin: 0 auto 14px; cursor: pointer; }
.sh-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sh-head h2 { font-family: var(--serif); font-size: 26px; margin: 2px 0 0; font-weight: 600; }
.pwr { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: #262626; color: var(--muted); transition: background .3s, color .3s; }
.pwr.on { background: var(--goldgrad); color: #1a1408; box-shadow: 0 0 24px rgba(230,209,131,.4); }
.ls-body { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; }
.vslider { position: relative; width: 120px; height: 290px; border-radius: 36px; background: #262626; overflow: hidden; touch-action: none; cursor: ns-resize; box-shadow: inset 0 2px 10px rgba(0,0,0,.5); }
.vfill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 0%); background: linear-gradient(0deg, #a88350, #F1D9A6); transition: height .3s; }
.vslider.dragging .vfill { transition: none; }
.vval { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-weight: 700; font-size: 18px; mix-blend-mode: difference; color: #ddd; }
.vslider .i { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 30px; height: 30px; color: rgba(0,0,0,.45); }
.lbl { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.ct { position: relative; height: 48px; border-radius: 24px; background: linear-gradient(90deg, #ff9f43, #ffd29a 30%, #fff3e0 55%, #e8f0ff 80%, #b9d3ff); touch-action: none; cursor: ew-resize; }
.ct .thumb { position: absolute; top: 5px; left: var(--k, 30%); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.5); background: transparent; transition: left .3s; }
.ct.dragging .thumb { transition: none; }
.ct-lbl { font-size: 13px; color: var(--text); margin: 10px 0 16px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm-txt { color: var(--muted); line-height: 1.55; font-size: 14.5px; margin: 0 0 18px; }
.confirm-txt li { margin: 4px 0; }
.sh-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.foot { margin-top: 34px; text-align: center; color: #5e5a54; font-size: 11.5px; }
.foot a { color: #7a756d; }
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #262626; border: 1px solid rgba(197,160,103,.5); padding: 12px 18px; border-radius: 16px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 50; animation: rise .3s; max-width: calc(100% - 32px); }

/* desktop */
@media (min-width: 980px) {
  .dom-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
  .dom-grid .plan-card { position: sticky; top: 14px; margin-top: 26px; }
  .room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}
@media (max-width: 720px) {
  .scenes { grid-template-columns: repeat(2, 1fr); }
  .tag { display: none; }
  .logo { height: 28px; }
  .trow { grid-template-columns: 1fr 90px 60px; }
  .rh-temp { font-size: 46px; }
}
@media (max-width: 380px) {
  .ls-body { grid-template-columns: 96px 1fr; gap: 14px; }
  .vslider { width: 96px; height: 250px; }
}