/* ---------- сценарии ---------- */
.scenarios { background: linear-gradient(180deg, transparent, var(--bg-2) 20%, var(--bg-2) 80%, transparent); }
.sc-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  position: relative; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 11px 18px 13px 12px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; text-align: left; overflow: hidden;
  transition: border-color .25s, color .25s, background .25s;
}
.sc-tab:hover { border-color: var(--line-2); color: var(--text); }
.sc-tab .tab-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .04); }
.sc-tab .tab-ic .ic { width: 19px; height: 19px; }
.sc-tab b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.sc-tab small { display: block; font-size: 12px; color: var(--dim); }
.sc-tab[aria-selected="true"] { border-color: rgba(255, 181, 71, .45); color: var(--text); background: linear-gradient(180deg, rgba(255, 181, 71, .09), rgba(255, 181, 71, .02)); }
.sc-tab[aria-selected="true"] .tab-ic { background: var(--accent); color: var(--accent-ink); }
.sc-tab .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s ease; }

.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.stage-wrap { position: sticky; top: 88px; }
.stage {
  position: relative; aspect-ratio: 12 / 7; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: #070a14;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9);
}
.house { width: 100%; height: 100%; transition: opacity .28s ease; }
.stage.cut .house { opacity: 0; }

.hud-clock {
  position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; line-height: 1.15;
  padding: 9px 14px 10px; border-radius: 14px; background: rgba(8, 11, 18, .58);
  border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hud-time { font: 600 22px var(--head); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hud-day { font-size: 12px; color: #c6cdd8; }

.toasts { position: absolute; top: 14px; right: 14px; width: min(300px, 38%); display: grid; gap: 8px; z-index: 3; pointer-events: none; }
.toast {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 16px; background: rgba(246, 247, 250, .94); color: #12161d;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55); backdrop-filter: blur(10px);
  animation: toastIn .55s cubic-bezier(.2, .9, .2, 1) both;
}
.toast.out { animation: toastOut .4s ease forwards; }
.toast .t-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.toast .t-ic .ic { width: 18px; height: 18px; }
.toast.alert .t-ic { background: var(--danger); color: #fff; }
.toast .t-app { display: flex; justify-content: space-between; font-size: 11px; color: #6b7380; line-height: 1.3; }
.toast b { display: block; font-size: 13.5px; line-height: 1.3; margin-top: 1px; }
.toast p { font-size: 12.5px; line-height: 1.35; color: #2b313b; margin-top: 1px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

.hud-status { position: absolute; left: 14px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(8, 11, 18, .66); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(8px);
  font-size: 12.5px; color: #d6dce5; transition: border-color .4s, color .4s;
}
.chip .ic { width: 15px; height: 15px; }
.chip b { font-weight: 600; }
.chip.on { border-color: rgba(255, 181, 71, .5); }
.chip.on .ic { color: var(--accent); }
.chip.alarm { border-color: rgba(255, 93, 93, .6); }
.chip.alarm .ic { color: var(--danger); }
.chip.good .ic { color: var(--ok); }

.sc-panel { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.sc-head { display: flex; gap: 14px; align-items: flex-start; }
.sc-icon { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sc-icon .ic { width: 22px; height: 22px; }
.sc-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.trigger { border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .03); border: 1px dashed var(--line-2); }
.trigger-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.trigger-label .ic { width: 14px; height: 14px; }
.trigger p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 7px 8px; border-radius: 12px; color: var(--dim); transition: background .35s, color .35s; }
.step .st-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: all .35s; }
.step .st-ic .ic { width: 15px; height: 15px; }
.step .st-txt { font-size: 14.5px; line-height: 1.4; padding-top: 4px; }
.step .st-sub { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; color: var(--muted); transition: max-height .4s, opacity .4s, margin .4s; }
.step.active { background: var(--accent-soft); color: var(--text); }
.step.active .st-ic { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 181, 71, .14); }
.step.active .st-sub { max-height: 60px; opacity: 1; margin-top: 3px; }
.step.done { color: #c3cad4; }
.step.done .st-ic { background: rgba(79, 209, 139, .12); border-color: rgba(79, 209, 139, .35); color: var(--ok); }
.sc-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--muted); padding: 4px; }
.switch-track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .25s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s; }
.switch[aria-pressed="true"] .switch-track { background: var(--accent); }
.switch[aria-pressed="true"] .switch-knob { transform: translateX(16px); }
.sc-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 15px; }
.sc-cta .ic { width: 18px; height: 18px; transition: transform .2s; }
.sc-cta:hover .ic { transform: translateX(3px); }
.sc-note { margin-top: 22px; color: var(--dim); font-size: 14.5px; max-width: 760px; }

/* ---------- SVG дома: состояния ---------- */
.house .sky, .house .tint, .house .stars, .house .moon { transition: opacity 2.2s ease; }
.house .sun { transform: translate(1080px, 84px); transition: transform 2.6s cubic-bezier(.45, 0, .2, 1); }
.house .glass { transition: fill 2.2s ease; }
.house .shade { fill: #060a1c; opacity: 0; transition: opacity var(--fade, 1.1s) ease; }
.house .glow { opacity: 0; transition: opacity var(--fade, 1.1s) ease; }
.house .bulb { fill: #6f747d; transition: fill .5s; }
.house .bulb.on { fill: #fff3c4; }
.house .blind { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.05); transition: transform 1.9s cubic-bezier(.6, 0, .25, 1); }
.house .cloud-a { animation: drift 28s ease-in-out infinite alternate; }
.house .cloud-b { animation: drift 36s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.house .stars circle:nth-child(3n) { animation: twinkle 3.2s ease-in-out infinite; }
.house .stars circle:nth-child(3n+1) { animation: twinkle 4.1s ease-in-out .8s infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.house .cable-flow { animation: flow 1.4s linear infinite; opacity: .7; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.house .soil-label { fill: #8b7d70; font: 500 11px var(--body); letter-spacing: .04em; }

.house .car, .house .carbeam { transform: translate(52px, 600px); transition: transform 2.6s cubic-bezier(.5, 0, .25, 1), opacity .5s; }
.house .wheel { transform-box: fill-box; transform-origin: center; }
.house.car-moving .wheel { animation: spin .55s linear infinite; }
.house.car-moving.car-rev .wheel { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.house .carbeam { opacity: 0; }
.house.headlights .carbeam { opacity: 1; }

.house .person { transform: translate(402px, 588px); transition: transform var(--walk, 1.4s) linear, opacity .45s ease; }
.house .leg { transform-box: fill-box; transform-origin: 50% 6%; }
.house .person.walking .leg-l { animation: legSwing .4s ease-in-out infinite alternate; }
.house .person.walking .leg-r { animation: legSwing .4s ease-in-out infinite alternate-reverse; }
.house .person.walking .torso { animation: bob .4s ease-in-out infinite alternate; }
@keyframes legSwing { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes bob { to { transform: translateY(-2px); } }
.house .sleeper, .house .sitter, .house .zzz { opacity: 0; transition: opacity .6s; }
.house.p-bed .sleeper, .house.p-bed .zzz, .house.p-sofa .sitter { opacity: 1; }
.house .zzz text { fill: #fff; font: 600 13px var(--body); animation: zzz 2.6s ease-in-out infinite; }
.house .zzz .z2 { font-size: 15px; animation-delay: .5s; }
.house .zzz .z3 { font-size: 17px; animation-delay: 1s; }
@keyframes zzz { 0%, 100% { opacity: .15; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-3px); } }

.house .door-open { opacity: 0; transition: opacity .35s; }
.house .door-closed { transition: opacity .35s; }
.house.door .door-open { opacity: 1; }
.house.door .door-closed { opacity: 0; }

.house .lockbody { fill: var(--ok); transition: fill .3s; }
.house .shackle { transform: translateY(-3.5px); transition: transform .35s cubic-bezier(.5, 0, .2, 1.4); }
.house.locked .lockbody { fill: var(--danger); }
.house.locked .shackle { transform: none; }

.house .sec-led { fill: var(--ok); }
.house.armed .sec-led { fill: var(--danger); animation: blink 1.2s steps(2) infinite; }
.house.armed-night .sec-led { fill: var(--accent); }
.house .sec-line { stroke: var(--danger); stroke-dasharray: 12 10; opacity: 0; transition: opacity .8s; }
.house.armed .sec-line { opacity: .85; animation: march 1.1s linear infinite; }
.house.armed-night .sec-line { stroke: var(--accent); opacity: .7; }
@keyframes march { to { stroke-dashoffset: -22; } }
.house .cam-led { fill: #5c6573; }
.house.armed .cam-led { fill: #ff3b3b; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.house #thermoText { fill: var(--accent); font: 700 13px var(--body); }
.house .heat-dot { fill: #5c6573; transition: fill .4s; }
.house.heating .heat-dot { fill: #ff8a4c; }
.house .heat { opacity: 0; transition: opacity 1.2s; }
.house.heating .heat { opacity: 1; }
.house .hw { animation: rise 2.4s ease-in-out infinite; }
@keyframes rise { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }

.house .tvfx { opacity: 0; transition: opacity .6s; }
.house.tv .tvfx { opacity: 1; }

.house .spk-led { fill: #3b4250; transition: fill .4s; }
.house.music .spk-led { fill: var(--info); }
.house .notes { opacity: 0; transition: opacity .5s; }
.house.music .notes { opacity: 1; }
.house .note { fill: var(--accent); font: 16px system-ui, sans-serif; animation: noteFloat 2.4s ease-out infinite; }
.house .note.n2 { animation-delay: .8s; font-size: 13px; }
.house .note.n3 { animation-delay: 1.6s; }
@keyframes noteFloat { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

.house .steam { opacity: 0; transition: opacity .6s; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.house.coffee .steam-coffee, .house.kettle .steam-kettle { opacity: .8; }
.house .steam path { animation: steam 2s ease-out infinite; }
.house .steam path + path { animation-delay: .7s; }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.house .coffee-led, .house .kettle-led, .house .washer-led { fill: #4a515d; transition: fill .4s; }
.house.coffee .coffee-led, .house.kettle .kettle-led, .house.washer .washer-led { fill: var(--ok); }

.house .fhfx { opacity: 0; transition: opacity 1.6s; }
.house.floorheat .fhfx { opacity: 1; }
.house .fh-wave { animation: rise 2.6s ease-in-out infinite; }

.house .valve-handle { transform-box: view-box; transform-origin: 666px 255px; transition: transform .9s cubic-bezier(.5, 0, .2, 1.3); }
.house.valve-closed .valve-handle { transform: rotate(90deg); }
.house .valve-led { fill: var(--ok); transition: fill .3s; }
.house.valve-closed .valve-led { fill: var(--danger); }

.house .puddle { transform-box: fill-box; transform-origin: 70% 50%; transform: scaleX(0); transition: transform 2.8s ease-out; }
.house.leak .puddle { transform: scaleX(1); }
.house .ripples { opacity: 0; transition: opacity .5s; }
.house.leak:not(.valve-closed) .ripples { opacity: 1; }
.house .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 1.6s ease-out infinite; }
.house .ripple.r2 { animation-delay: .8s; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.house .leak-led { fill: var(--ok); }
.house.sensor .leak-led { fill: #ff3b3b; animation: blink .5s steps(2) infinite; }
.house .alarmfx { opacity: 0; transition: opacity .4s; }
.house.sensor .alarmfx { opacity: 1; animation: blink 1s ease-in-out infinite; }
.house .drum { transform-box: fill-box; transform-origin: center; }
.house.washer .drum { animation: spin .9s linear infinite; }

.house .vac-led { fill: var(--ok); }
.house.vacuum-run .vacuum { animation: vac 11s ease-in-out infinite; }
.house.vacuum-run .vac-led { fill: var(--info); animation: blink 1s steps(2) infinite; }
@keyframes vac { 0% { transform: translateX(0); } 40% { transform: translateX(240px); } 50% { transform: translateX(240px); } 90% { transform: translateX(8px); } 100% { transform: translateX(0); } }

.house .outfx { opacity: 0; transition: opacity 1.2s; }
.house.outdoor .outfx { opacity: 1; }
.house .out-bulb { fill: #4a515d; transition: fill .6s; }
.house.outdoor .out-bulb { fill: #ffe8b0; }

.house .nl, .house .strip { opacity: 0; transition: opacity 1.4s ease; }

.house .tags rect { fill: rgba(9, 12, 20, .55); }
.house .tags text { fill: #f1f4f8; font: 500 10.5px var(--body); text-anchor: middle; }

.house.instant, .house.instant * { transition: none !important; }