@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap');

:root {
  --bg: #080a0c;
  --bg2: #11161d;
  --card: rgba(17, 22, 29, 0.82);
  --cyan: #00f2ff;
  --cyan-l: #66f7ff;
  --cyan-d: #00b3bd;
  --accent: #ffbe00;
  --txt: #d6fbff;
  --muted: #6f9fb0;
  --line: rgba(0, 242, 255, 0.22);
  --line-soft: rgba(0, 242, 255, 0.12);
  --glow: rgba(0, 242, 255, 0.10);
  --err: #ff3b3b;
  --ok: #2ee6a0;
  --warn: #ffbe00;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--txt); min-height: 100vh; font-family: Inter, system-ui, sans-serif; }

/* CRT scanlines + бегущая scan-полоса (перенос card-mod-root) */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(to bottom,
    rgba(0,242,255,0.025) 0px, rgba(0,242,255,0.025) 1px, transparent 1px, transparent 3px);
}
body::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 140px;
  pointer-events: none; z-index: 9999;
  background: linear-gradient(to bottom, transparent, rgba(0,242,255,0.07), transparent);
  animation: scandrift 9s linear infinite;
}
@keyframes scandrift { 0% { transform: translateY(-140px); } 100% { transform: translateY(100vh); } }

/* ── Topbar ── */
#topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 22px; position: fixed; left: 0; right: 0; z-index: 1000;
  /* в Telegram fullscreen опускаем ВСЮ шапку под чёлку+плавающие кнопки (--tg-top из JS), иначе env() */
  top: var(--tg-top, env(safe-area-inset-top, 0px));
  background: rgba(5, 7, 10, 0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
body { padding-top: calc(60px + var(--tg-top, env(safe-area-inset-top, 0px))); }
.brand {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 18px;
  letter-spacing: 4px; color: var(--txt); text-shadow: 0 0 10px var(--glow);
  animation: gsub 7s infinite;
}
.brand span { color: var(--cyan); text-shadow: 0 0 14px rgba(0,242,255,0.6); }
.sysline {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px;
  color: var(--cyan); text-shadow: 0 0 8px rgba(0,242,255,0.6); opacity: .85; margin-left: 6px;
}
#home-tabs { display: flex; gap: 10px; margin-left: auto; }
.home-tab {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1.5px;
  padding: 9px 18px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-left: 2px solid transparent; transition: all .2s;
}
.home-tab .ic { width: 18px; height: 18px; filter: drop-shadow(0 0 3px rgba(0,242,255,0.4)); }
.home-tab:hover { border-color: var(--line); color: var(--txt); }
.home-tab.active {
  background: linear-gradient(180deg, rgba(0,242,255,.12), rgba(0,242,255,.03));
  border-color: var(--line); border-left-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 18px var(--glow), inset 0 0 14px rgba(0,242,255,0.05);
}
.conn { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; color: var(--muted); min-width: 86px; text-align: right; }
.conn.ok { color: var(--ok); } .conn.err { color: var(--err); } .conn.warn { color: var(--warn); }

/* ── Grid ── */
#grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; padding: 22px; align-content: start; transition: opacity .15s ease;
}
#grid.fade { opacity: 0; }

/* ── Card base (перенос card-mod-card) ── */
.card {
  background: var(--card); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 8px;
  padding: 16px; box-shadow: 0 0 15px var(--glow), inset 0 0 15px rgba(0,242,255,0.04);
}
.card .ic { color: var(--cyan); filter: drop-shadow(0 0 3px rgba(0,242,255,0.5)); }
.card.section {
  grid-column: 1 / -1; background: none; border: none; box-shadow: none; padding: 8px 2px 0;
}
.sec-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px;
  color: var(--txt); text-shadow: 0 0 8px rgba(0,242,255,0.4);
  display: flex; align-items: center; gap: 7px;
}
.sec-title::before { content: '\25e2'; color: var(--cyan); }
.placeholder { color: var(--muted); font-size: 14px; font-family: 'JetBrains Mono', monospace; }

/* h1/заголовки glitch */
@keyframes gsub {
  0%,93%,100% { text-shadow: 0 0 10px rgba(0,242,255,0.5); transform: none; }
  94% { text-shadow: -2px 0 var(--err), 2px 0 var(--cyan); transform: translateX(1px); }
  96% { text-shadow: 2px 0 var(--err), -2px 0 var(--cyan); transform: translateX(-1px); }
  97% { transform: none; }
}

/* ── TV ── */
.tv { text-align: center; position: relative; transition: border-color .25s, box-shadow .25s; }
.tv.on { box-shadow: 0 0 24px rgba(0,242,255,0.25), inset 0 0 16px rgba(0,242,255,0.06); }
.tv .ic-tv { width: 38px; height: 38px; opacity: .45; margin: 4px 0 10px; }
.tv.on .ic-tv { opacity: 1; }
.tv-name { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; }
.tv-state { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 5px; }
.tv.on .tv-state { color: var(--cyan); text-shadow: 0 0 6px rgba(0,242,255,0.5); }
.tv-power {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.tv-power .ic { width: 18px; height: 18px; }
.tv-power:hover { color: var(--cyan); box-shadow: 0 0 12px var(--glow); }

/* ── Camera ── */
.camera { grid-column: span 2; }
.cam-head {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px; color: var(--txt);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.cam-head .ic { width: 18px; height: 18px; }
.live { color: var(--err); font-family: 'JetBrains Mono', monospace; font-size: 11px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.cam-view { border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16/9; border: 1px solid var(--line-soft); }
.cam-view img, .cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cam-view video[hidden] { display: none; }
.cam-offline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--muted); background: rgba(5,7,10,.6); }
.ptz { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.ptz-row { display: flex; gap: 6px; }
.ptz button {
  width: 42px; height: 38px; border-radius: 6px; border: 1px solid var(--line);
  background: rgba(0,242,255,.05); color: var(--cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ptz button .ic { width: 20px; height: 20px; }
.ptz button:active { background: rgba(0,242,255,.2); box-shadow: 0 0 12px var(--glow); }

/* ── Camera full (PTZ-сетка + Tapo-контролы + движение) ── */
.cam-motion { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--err); opacity: 0; transition: opacity .2s; }
.cam-motion.active { opacity: 1; animation: pulse 1s infinite; }
.cam-view { position: relative; }
.cam-snap { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(5,7,10,.7); color: var(--cyan); cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.cam-snap .ic { width: 16px; height: 16px; }
.cam-snap:active { background: rgba(0,242,255,.25); }
.ptz-grid { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 40px); gap: 6px; justify-content: center; margin-top: 12px; }
.ptz-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cam-vbtns.side { position: static; flex-direction: column; gap: 12px; margin-top: 12px; }
.ptz-btn { border-radius: 6px; border: 1px solid var(--line); background: rgba(0,242,255,.05); color: var(--cyan); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ptz-btn .ic { width: 20px; height: 20px; }
.ptz-btn:active { background: rgba(0,242,255,.22); box-shadow: 0 0 12px var(--glow); }
.cam-ctls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cam-ctl { flex: 1 1 0; min-width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(0,242,255,.04); color: var(--muted); cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .5px; }
.cam-ctl .ic { width: 17px; height: 17px; }
.cam-ctl.on { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--glow); }
.cam-ctl.danger { color: var(--warn, #ffbe00); }
.cam-ctl.danger:active { background: rgba(255,59,59,.15); }
.cam-ctl:active { background: rgba(0,242,255,.18); }

/* ── Washer ── */
.washer .w-head {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.washer .w-head .ic { width: 20px; height: 20px; }
.w-status { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--cyan); letter-spacing: 1px; text-shadow: 0 0 6px rgba(0,242,255,0.4); }
.w-delay { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--warn); margin-top: 4px; }
.w-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.w-op {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px;
  padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line);
  background: rgba(0,242,255,.05); color: var(--cyan-l); cursor: pointer; transition: all .2s;
}
.w-op:hover { color: var(--cyan); box-shadow: 0 0 10px var(--glow); }

/* ── Sensor ── */
.sensor .s-name { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.sensor .s-name .ic { width: 16px; height: 16px; }
.sensor .s-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; color: var(--cyan); margin-top: 6px; text-shadow: 0 0 8px rgba(0,242,255,0.4); }

@media (max-width: 600px) {
  .camera { grid-column: 1 / -1; }
  #topbar { gap: 12px; padding: 12px 14px; }
  .sysline { display: none; }
  #home-tabs { gap: 6px; }
  .home-tab { padding: 8px 12px; font-size: 14px; }
}

/* ── View tabs (вкладки внутри дома) ── */
#view-tabs {
  display: flex; gap: 4px; padding: 10px 22px 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(5,7,10,0.85);
  position: fixed; top: 60px; left: 0; right: 0; z-index: 999;
  backdrop-filter: blur(10px);
  overflow-x: auto;
}
#grid { padding-top: 56px; }
.sv-root { margin-top: 0; }
.view-tab {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; transition: all .2s;
}
.view-tab .ic { width: 16px; height: 16px; filter: drop-shadow(0 0 3px rgba(0,242,255,0.35)); }
.view-tab:hover { color: var(--txt); }
.view-tab.active {
  color: var(--cyan); border-bottom-color: var(--cyan);
  text-shadow: 0 0 8px rgba(0,242,255,0.5);
}

/* ── Buttons card (СТАРТ/СТОП) ── */
.buttons .b-row { display: flex; gap: 10px; }
.act-btn {
  flex: 1; padding: 14px 10px; border-radius: 6px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px;
  background: rgba(0,242,255,.06); border: 1px solid var(--line); color: var(--cyan);
  transition: all .15s;
}
.act-btn.ok { border-color: rgba(46,230,160,.4); color: var(--ok); }
.act-btn.err { border-color: rgba(255,59,59,.4); color: var(--err); }
.act-btn:hover { box-shadow: 0 0 14px var(--glow); }
.act-btn.pressed { transform: scale(.96); background: rgba(0,242,255,.18); }

/* ── Toggle card ── */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t-name { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px; }
.t-switch {
  width: 52px; height: 28px; border-radius: 14px; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(0,0,0,.4); position: relative; transition: all .25s;
}
.t-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: all .25s;
}
.toggle.on .t-switch { background: rgba(0,242,255,.2); border-color: var(--cyan); box-shadow: 0 0 12px var(--glow); }
.toggle.on .t-knob { left: 27px; background: var(--cyan); box-shadow: 0 0 8px rgba(0,242,255,.6); }

/* ── Number card (+/−) ── */
.number .n-name { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.n-row { display: flex; align-items: center; gap: 12px; }
.n-row button {
  width: 38px; height: 38px; border-radius: 6px; cursor: pointer; font-size: 20px;
  background: rgba(0,242,255,.06); border: 1px solid var(--line); color: var(--cyan);
}
.n-row button:hover { box-shadow: 0 0 10px var(--glow); }
.n-val { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; color: var(--cyan); text-shadow: 0 0 8px rgba(0,242,255,0.4); }

/* ── Climate card ── */
.climate-card { grid-column: span 2; }
.cl-head { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cl-temps { display: flex; align-items: center; justify-content: space-around; margin-bottom: 14px; }
.cl-cur { text-align: center; }
.cl-cur span { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 38px; color: var(--txt); }
.climate-card.on .cl-cur span { color: var(--cyan); text-shadow: 0 0 12px rgba(0,242,255,0.5); }
.cl-cur label { display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-top: 2px; }
.cl-target { display: flex; align-items: center; gap: 14px; }
.cl-target span { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; color: var(--accent); }
.cl-target button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px;
  background: rgba(0,242,255,.06); border: 1px solid var(--line); color: var(--cyan);
}
.cl-target button:hover { box-shadow: 0 0 12px var(--glow); }
.cl-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-mode {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  background: rgba(0,242,255,.04); border: 1px solid var(--line-soft); color: var(--muted);
}
.cl-mode.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--glow); }

@media (max-width: 600px) { .climate-card { grid-column: 1 / -1; } }

/* ── Mobile overflow fix (online-дрейф) ── */
html, body { overflow-x: hidden; max-width: 100vw; }
#topbar { flex-wrap: nowrap; }
@media (max-width: 700px) {
  #topbar { gap: 10px; padding: 10px 12px; }
  .brand { font-size: 14px; letter-spacing: 2px; }
  .conn { min-width: 0; font-size: 10px; }
  #home-tabs { margin-left: 0; flex: 1; justify-content: flex-end; }
  .home-tab { padding: 7px 10px; font-size: 13px; gap: 5px; }
  #grid { padding: 14px 10px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #view-tabs { top: auto; position: static; padding: 8px 10px 0; }
}

/* ── Reactor card (видео-луп + значение) ── */
.reactor { text-align: center; }
.r-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.r-wrap video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(0,242,255,0.35));
}
.r-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 34px; color: #eaffff;
  text-shadow: 0 0 16px rgba(0,242,255,0.8);
}
.r-val span { font-size: 16px; opacity: .7; margin-left: 2px; }
.r-lbl {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--cyan-dim, #8fb8c8);
}
.r-lbl .ic { width: 16px; height: 16px; }

/* ── Ring card (png-кольцо + conic прогресс) ── */
.ring-card { text-align: center; }
.rg-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.rg-halo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.rg-prog {
  position: absolute; inset: 14px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.rg-val {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.rg-val b { font-size: 28px; font-weight: 700; }
.rg-val span { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rg-sub { font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-top: 4px; }

/* ── Weather card ── */
.weather .wx-head {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; color: var(--cyan);
}
.weather .wx-head .ic { width: 16px; height: 16px; }
.wx-state { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; color: var(--txt); margin-top: 6px; }
.wx-det { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Climate power button ── */
.cl-head { position: relative; }
.cl-power {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.climate-card.on .cl-power { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--glow); }
.cl-power:hover { color: var(--cyan); }

/* ── Jarvis voice button ── */
#jarvis-btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 17px;
  background: radial-gradient(circle at 35% 30%, rgba(0,242,255,.25), rgba(0,40,60,.4));
  border: 1px solid var(--cyan); color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,242,255,.8);
  box-shadow: 0 0 14px var(--glow), inset 0 0 10px rgba(0,242,255,.1);
  transition: all .25s;
}
#jarvis-btn:hover { box-shadow: 0 0 22px rgba(0,242,255,.4); }
#jarvis-btn.listening { animation: jpulse .9s ease-in-out infinite; border-color: var(--err); color: var(--err); }
#jarvis-btn.thinking { animation: jspin 1.2s linear infinite; }
#jarvis-btn.speaking { animation: jpulse 1.4s ease-in-out infinite; }
@keyframes jpulse { 0%,100% { box-shadow: 0 0 10px var(--glow); } 50% { box-shadow: 0 0 26px rgba(0,242,255,.6); } }
@keyframes jspin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ── Music card ── */
.music-card .m-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px;
}
.music-card .m-head .ic { width: 18px; height: 18px; }
.m-state { color: var(--cyan); margin-left: auto; font-size: 13px; }
.m-track {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--cyan-dim, #8fb8c8);
  margin: 8px 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-card.on .m-track { color: var(--cyan); }
.m-controls { display: flex; align-items: center; gap: 8px; }
.m-controls button {
  width: 38px; height: 34px; border-radius: 6px; cursor: pointer;
  background: rgba(0,242,255,.05); border: 1px solid var(--line); color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
}
.m-controls .m-play { width: 46px; }
.m-controls button:hover { box-shadow: 0 0 10px var(--glow); }
.m-vol { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.m-vol span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); min-width: 36px; text-align: center; }
.m-vol button { width: 30px; height: 30px; font-size: 16px; }

/* ── Native svodka (оригинал 1:1) ── */
#grid.native { display: block; padding: 0; position: relative; }
.sv-root {
  columns: 340px; column-gap: 8px;
  padding: 14px; min-height: 100vh;
  background-attachment: fixed !important;
  background-size: cover !important; background-position: center !important;
}
.sv-root, .nd-root { padding-top: 64px !important; }
/* резиновый фон-слой на весь вьюпорт под контентом */
#grid.native::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(rgba(2,6,12,0.5), rgba(2,6,12,0.82)), url('./assets/jarvis_bg.png') center/cover no-repeat;
  background-size: cover;
}
.sv-root { background: none !important; }
/* центрирующий контейнер контента */
.sv-root { max-width: 1400px; margin: 0 auto; }
.sv-stack { display: flex; flex-direction: column; gap: 8px; break-inside: avoid; margin-bottom: 8px; max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
.sv-md { padding: 4px 12px; }
.sv-md h2 { margin: 4px 0; }
.sv-bc { position: relative; }
@media (max-width: 700px) { .sv-root { grid-template-columns: 1fr; } }

/* ── Mobile: реакторы без фона/блюра, J-кнопка = реактор ── */
@media (max-width: 767px) {
  .sv-bc:has(.lr) {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .sv-bc:has(.lr)::before { display: none !important; }
  /* их floating-кнопку прячем — её роль играет topbar J */
  .sv-bc:has(.vr) { display: none !important; }
  #topbar { padding: 8px 6px 8px 10px; gap: 8px; flex-wrap: nowrap; }
  #brand-switch { font-size: 13px; letter-spacing: 1px; padding: 2px; min-width: 0; flex-shrink: 1; overflow: hidden; }
  #brand-switch::after { display: none; }
  #jarvis-btn {
    background: url("../assets/gallery/reactor_btn.webp") center/cover no-repeat;
    border: none; box-shadow: 0 0 18px rgba(0,242,255,.45);
    color: transparent; font-size: 0;
    width: 56px; height: 56px; flex-shrink: 0;
  }
  .conn { font-size: 9px; min-width: 0; flex-shrink: 0; }
  #jarvis-btn.listening, #jarvis-btn.speaking { box-shadow: 0 0 26px rgba(0,242,255,.7); }
  /* мобильный: таб-нав под топбаром, убираем здоровую дыру до первого блока (была 64px) */
  .sv-root, .nd-root { padding-top: 14px !important; }
  /* блоки без фона на телефоне. id-специфичность (#grid.native .sv-bc = 1,2,0)
     чтобы перебить рантайм-инъекции card_mod (.sv-bc.bcN !important, грузятся в head ПОСЛЕ style.css) */
  /* .sv-bc (button-card) + .sv-md (markdown: заголовки, таблица «за сегодня», статус) */
  #grid.native .sv-bc,
  #grid.native .sv-md {
    background: transparent !important; background-image: none !important;
    backdrop-filter: none !important; box-shadow: none !important;
  }
  /* card_mod рисует тиловую рамку через ::before (градиент + mask-composite:exclude).
     iOS WebKit маску рендерит иначе → градиент заливает всю карточку (на Chrome — тонкая рамка).
     Убиваем псевдо-слой целиком, чтобы фон не лез ни на одном движке. */
  #grid.native .sv-bc::before, #grid.native .sv-bc::after,
  #grid.native .sv-md::before, #grid.native .sv-md::after {
    background: none !important; background-image: none !important;
    -webkit-mask: none !important; mask: none !important;
    box-shadow: none !important; border: none !important; content: none !important;
  }
  /* НО кликабельные карточки (СТАРТ/СТОП и пр.) должны выглядеть кнопками, не текстом */
  #grid.native .sv-bc.clickable {
    background: rgba(0,242,255,.06) !important;
    border: 1px solid var(--cyan) !important; border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0,242,255,.25) !important;
  }
  #grid.native .sv-bc.clickable.pressed { background: rgba(0,242,255,.22) !important; }
  #grid.native .ha-card {
    background: rgba(6,16,28,0.18) !important; background-image: none !important;
    backdrop-filter: none !important; box-shadow: none !important;
  }
}

/* ── Home slider (Квартира ⇄ Дача) ── */
#home-slider {
  position: relative; display: flex; margin-left: auto;
  background: rgba(0,242,255,.04); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; overflow: hidden;
}
.hs-knob {
  position: absolute; top: 3px; left: 3px; bottom: 3px; width: calc(50% - 3px);
  background: linear-gradient(180deg, rgba(0,242,255,.18), rgba(0,242,255,.05));
  border: 1px solid var(--cyan); border-radius: 8px;
  box-shadow: 0 0 16px var(--glow), inset 0 0 10px rgba(0,242,255,.08);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#home-slider.right .hs-knob { transform: translateX(100%); }
.hs-opt {
  position: relative; z-index: 1; cursor: pointer; background: none; border: none;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px;
  padding: 8px 22px; color: var(--muted); transition: color .25s; white-space: nowrap;
}
.hs-opt.active { color: var(--cyan); text-shadow: 0 0 10px rgba(0,242,255,.6); }
#brand-suffix { transition: opacity .2s; }
@media (max-width: 700px) {
  .hs-opt { padding: 7px 14px; font-size: 13px; letter-spacing: 1px; }
}

/* ── Brand как переключатель дома ── */
#brand-switch {
  margin-right: auto;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .2s; -webkit-tap-highlight-color: transparent;
}
#brand-switch:hover { filter: drop-shadow(0 0 8px rgba(0,242,255,.5)); }
#brand-switch:active { transform: scale(.98); }
#brand-suffix {
  display: inline-block; transition: opacity .15s, transform .15s;
}
#brand-suffix.flip { opacity: 0; transform: translateY(-4px); }
/* подсказка-стрелки что это свитч */
#brand-switch::after {
  content: '⇄'; font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--muted); margin-left: 4px; opacity: .6;
}

/* ── Кнопка Джарвиса: состояния голоса ── */
#jarvis-btn.listening { animation: jlisten .8s ease-in-out infinite; box-shadow: 0 0 26px rgba(255,59,59,.8) !important; filter: hue-rotate(140deg) saturate(1.6); }
#jarvis-btn.thinking { animation: jthink 1.1s linear infinite; }
#jarvis-btn.speaking { animation: jspeak 1s ease-in-out infinite; box-shadow: 0 0 30px rgba(0,242,255,.8) !important; }
@keyframes jlisten { 0%,100% { box-shadow: 0 0 18px rgba(255,59,59,.6); } 50% { box-shadow: 0 0 34px rgba(255,59,59,.95); } }
@keyframes jthink { 0% { filter: brightness(1); } 50% { filter: brightness(1.4); } 100% { filter: brightness(1); } }
@keyframes jspeak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ── Native containers ── */
.hstack-v { display: flex; flex-direction: column; gap: 8px; }
.hstack-h { display: flex; gap: 8px; }
.hstack-h > * { flex: 1 1 0; min-width: 0; }
.hgrid { display: grid; gap: 8px; }
.nd-root .sv-stack { max-width: none; }

/* ── HA-like cards (native) ── */
.ha-card {
  background: rgba(6,16,28,0.55); border: 1px solid var(--line); border-left: 2px solid var(--cyan);
  border-radius: 8px; padding: 12px; backdrop-filter: blur(8px);
  box-shadow: 0 0 12px var(--glow);
}
.he-title, .apex-title { font-family: 'Rajdhani',sans-serif; font-weight: 700; font-size: 14px; color: var(--cyan); letter-spacing: 1px; margin-bottom: 8px; text-shadow: 0 0 8px rgba(0,242,255,.4); }
.he-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.he-row:last-child { border-bottom: none; }
.he-name { font-family: 'Rajdhani',sans-serif; font-size: 14px; color: var(--txt); }
.he-val { font-family: 'JetBrains Mono',monospace; font-size: 13px; color: var(--cyan); }
.he-toggle { width: 44px; height: 24px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.4); position: relative; cursor: pointer; }
.he-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: .25s; }
.he-toggle.on { background: rgba(0,242,255,.2); border-color: var(--cyan); }
.he-toggle.on::after { left: 23px; background: var(--cyan); }
.tile { text-align: left; }
.tile-name { font-family: 'Rajdhani',sans-serif; font-size: 13px; color: var(--muted); }
.tile-val { font-family: 'JetBrains Mono',monospace; font-size: 22px; color: var(--cyan); margin-top: 4px; text-shadow: 0 0 8px rgba(0,242,255,.4); }
.gauge-card { text-align: center; }
.g-arc { position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; }
.g-fill { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(transparent 58%, #000 60%); mask: radial-gradient(transparent 58%, #000 60%); }
.g-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono',monospace; font-size: 24px; font-weight: 700; color: var(--cyan); }
.g-name { font-family: 'Rajdhani',sans-serif; font-size: 13px; color: var(--muted); margin-top: 8px; }
.thermo { text-align: center; }
.th-cur { font-family: 'JetBrains Mono',monospace; font-size: 38px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 12px rgba(0,242,255,.5); }
.th-ctl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.th-ctl span { font-family: 'JetBrains Mono',monospace; font-size: 24px; color: var(--accent); }
.th-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,242,255,.06); color: var(--cyan); font-size: 20px; cursor: pointer; }
.cl-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-mode { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 12px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line-soft); background: rgba(0,242,255,.04); color: var(--muted); cursor: pointer; }
.cl-mode.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--glow); }
.apex { min-height: 200px; }
.apex-body { width: 100%; }
/* разделитель «ТЕМПЕРАТУРА И ПОГОДА» — нужен только на телефоне; на десктопе masonry его раскидывает, прячем */
@media (min-width: 761px) { .sv-stack:has(.clim-divider) { display: none; } }

/* ── Климат: 3 колонки (слева управа | центр термостат+реактор | справа погода) ── */
.sv-root.cols-layout { columns: auto; column-gap: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 14px; }
.sv-root.cols-layout > .sv-stack { width: 100%; max-width: 1200px; margin: 0; }
.sv-root.cols-layout .hstack-h { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
.sv-root.cols-layout .hstack-h > .hstack-v { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-root.cols-layout .hstack-h > .hstack-v:nth-child(2) { align-items: center; }   /* центр — термостат по центру */
@media (max-width: 760px) {
  .sv-root.cols-layout { padding: 6px; }
  .sv-root.cols-layout .hstack-h { flex-direction: column; align-items: stretch; }
  .sv-root.cols-layout .hstack-h > .hstack-v:nth-child(2) { order: -1; }            /* на телефоне термостат сверху */
}
/* ── energy-distribution (Аннин дашборд) ── */
.ha-card.energy-iframe { padding: 0; overflow: hidden; aspect-ratio: 1 / 1; background: #04080d; border-left-color: var(--cyan); }
.ha-card.energy-iframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── СОЛНЦЕ hero-раскладка: заголовок по центру, реакторы 3+3 по бокам, графики снизу во всю ширину ── */
.sv-root.hero-layout { columns: auto; column-gap: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 14px; }
.sv-root.hero-layout > .sv-stack { width: 100%; max-width: 1080px; margin: 0; }
.sv-root.hero-layout > .sv-stack:first-child { max-width: 560px; }
.sv-root.hero-layout > .sv-stack:first-child .sv-md { text-align: center; }
/* солнечный hero как сетка: десктоп 3 колонки (реакторы | энергоблок | реакторы) */
.solar-hero { display: grid; gap: 12px; align-items: stretch; grid-template-columns: 200px minmax(0,1fr) 200px;
  grid-template-areas: "r1 energy r4" "r2 energy r5" "r3 energy r6"; }
.solar-hero > :nth-child(1) { grid-area: r1; } .solar-hero > :nth-child(2) { grid-area: r2; } .solar-hero > :nth-child(3) { grid-area: r3; }
.solar-hero > :nth-child(4) { grid-area: energy; align-self: center; }
.solar-hero > :nth-child(5) { grid-area: r4; } .solar-hero > :nth-child(6) { grid-area: r5; } .solar-hero > :nth-child(7) { grid-area: r6; }
.solar-hero > .ha-card.energy-iframe { aspect-ratio: 1 / 1; max-width: none; width: 100%; align-self: center; }
@media (max-width: 760px) {
  .sv-root.hero-layout { padding: 6px; }
  .sv-root.hero-layout > .sv-stack:first-child { max-width: none; }
  .sv-root.hero-layout > .sv-stack:first-child .sv-md h1 { font-size: 5.4vw !important; white-space: nowrap; letter-spacing: 2px; }
  .sv-root.hero-layout > .sv-stack:first-child .sv-md h2, .sv-root.hero-layout > .sv-stack:first-child .sv-md h3 { font-size: 12px !important; }
  /* энергоблок во всю ширину, реакторы 2 в ряд */
  .solar-hero { grid-template-columns: 1fr 1fr; gap: 8px; grid-template-areas: "energy energy" "r1 r2" "r3 r4" "r5 r6"; }
}
/* зарядка hero: центр (реактор+статус+кнопки) + 4 реактора по бокам 2+2 */
.evse-hero { display: grid; gap: 12px; align-items: stretch; grid-template-columns: 200px minmax(0,1fr) 200px;
  grid-template-areas: "r1 center r3" "r2 center r4"; }
.evse-hero > :nth-child(1) { grid-area: r1; } .evse-hero > :nth-child(2) { grid-area: r2; }
.evse-hero > :nth-child(3) { grid-area: center; align-self: center; }
.evse-hero > :nth-child(4) { grid-area: r3; } .evse-hero > :nth-child(5) { grid-area: r4; }
@media (max-width: 760px) {
  .evse-hero { grid-template-columns: 1fr 1fr; gap: 8px; grid-template-areas: "center center" "r1 r2" "r3 r4"; }
}
/* ── энергопанель (период солнце/АКБ) ── */
.energy-panel .ep-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.energy-panel .ep-title { font-family: 'Rajdhani',sans-serif; font-weight: 700; font-size: 14px; color: var(--cyan); letter-spacing: 1px; text-shadow: 0 0 8px rgba(0,242,255,.4); }
.energy-panel .ep-title .mdi { margin-right: 4px; }
.ep-periods { display: flex; gap: 4px; }
.ep-per { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line-soft); background: rgba(0,242,255,.04); color: var(--muted); cursor: pointer; }
.ep-per.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--glow); }
.ep-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 10px; }
.ep-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,242,255,.05); color: var(--cyan); font-size: 18px; cursor: pointer; line-height: 1; }
.ep-nav button:disabled { opacity: .3; cursor: default; }
.ep-range { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 14px; color: var(--txt); min-width: 150px; text-align: center; }
.ep-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ep-tot { flex: 1 1 0; min-width: 90px; text-align: center; padding: 8px 6px; border-radius: 8px; background: rgba(6,16,28,.4); border: 1px solid var(--line-soft); }
.ep-tn { font-family: 'Rajdhani',sans-serif; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.ep-tv { font-family: 'JetBrains Mono',monospace; font-weight: 700; font-size: 19px; margin-top: 3px; }
.ep-tv span { font-size: 10px; opacity: .6; font-weight: 400; }
.ha-card.unknown { color: var(--muted); font-size: 11px; opacity: .4; padding: 4px; border: 1px dashed var(--line-soft); background: none; box-shadow: none; }
.sv-md table { width: 100%; border-collapse: collapse; }
.sv-md td { padding: 4px 8px; text-align: center; font-family: 'JetBrains Mono',monospace; font-size: 13px; color: var(--txt); border: 1px solid var(--line-soft); }
.sv-md b { color: var(--cyan); }
.bc-name { font-family: 'Orbitron',sans-serif; }

/* ── mdi иконки в нативных подписях ── */
.sv-bc .mdi { color: var(--cyan); font-size: 16px; filter: drop-shadow(0 0 4px rgba(0,242,255,.5)); }
.rlbl, .sv-field .rlbl { font-family: 'Rajdhani',sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--cyan-dim, #8fb8c8); }
.ricon { color: var(--cyan); }
.llbl, .sv-field span { vertical-align: middle; }

/* ── Энергоаналитика: иконки в flows + стиль карточек ── */
.fl .i .mdi, .eg .mdi { font-size: 22px; color: var(--cyan); }
.he .mdi, .glance .mdi, .ha-card .mdi { font-size: 18px; color: var(--cyan); filter: drop-shadow(0 0 5px rgba(0,242,255,.5)); }
/* glance в стиле дашборда */
.ha-card.he { background: rgba(6,16,28,0.55); }
/* gauge неон */
.gauge-card .g-val { text-shadow: 0 0 10px rgba(0,242,255,.5); }

/* ── Активные кнопки (call-service) ── */
.sv-bc.clickable { transition: transform .15s, box-shadow .15s; }
.sv-bc.clickable:hover { box-shadow: 0 0 18px var(--glow); }
.sv-bc.clickable.pressed { transform: scale(.96); }
/* ── Tile с features ── */
.tile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tile-feat { margin-top: 8px; background: none; border: none; box-shadow: none; padding: 0; }
.cl-dropdown {
  width: 100%; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  background: rgba(0,242,255,.05); border: 1px solid var(--line); color: var(--cyan);
  font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 13px;
}
.cl-dropdown option { background: #0a0e14; color: var(--txt); }
/* ── Слайдеры (input_number) ── */
.he-slider-row .he-val { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.he-slider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(0,242,255,.2); outline: none; flex: 1; cursor: pointer; }
.he-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--glow); cursor: pointer; }
.he-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); border: none; box-shadow: 0 0 8px var(--glow); }
.he-out { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--accent); min-width: 48px; text-align: right; }
.he-name .mdi { color: var(--cyan); margin-right: 4px; }

/* ── Круглый термостат ── */
.ha-card.thermo.round { text-align: center; padding: 4px 0 0; background: none; border: none; box-shadow: none; backdrop-filter: none; }
.th-name { font-family: 'Rajdhani',sans-serif; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.th-dial { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1; }
/* анимированный реактор-фон за термостатом (видео-луп, лёгкий webm) */
.th-dial .th-reactor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 0; opacity: .85; pointer-events: none; }
.th-svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.th-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; z-index: 2; }
.th-mode { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 14px; color: var(--muted); letter-spacing: 1px; }
.th-target { font-family: 'JetBrains Mono',monospace; font-weight: 700; font-size: 46px; color: var(--cyan); text-shadow: 0 0 14px rgba(0,242,255,.5); line-height: 1; }
.th-target span { font-size: 18px; opacity: .6; }
.th-cur { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--muted); margin-top: 4px; }
/* +/- поверх реактора снизу, чуть налегают на дугу */
.th-btns { position: absolute; left: 0; right: 0; bottom: 9%; display: flex; justify-content: center; gap: 86px; margin: 0; z-index: 3; }
.th-btns button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--cyan); background: rgba(5,12,20,.72); backdrop-filter: blur(3px); color: var(--cyan); font-size: 22px; cursor: pointer; box-shadow: 0 0 10px rgba(0,242,255,.35); }
.th-btns button:hover { box-shadow: 0 0 12px var(--glow); }
/* hvac режимы-иконки */
.cl-mode .mdi { font-size: 18px; }
.cl-modes { gap: 4px; }
.cl-mode { padding: 8px 10px; }
.cl-mode.active .mdi { filter: drop-shadow(0 0 6px var(--cyan)); }

/* ── Режимы кнопками с иконкой+подписью: всё в один ряд, без переноса ── */
.cl-iconbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 8px 2px; }
.cl-iconbtn .mdi { font-size: 19px; }
.cl-iconbtn .cl-lbl { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 9px; letter-spacing: 0; white-space: nowrap; line-height: 1.1; }
.cl-modes { flex-wrap: nowrap; justify-content: stretch; gap: 4px; }

/* ── Голос: анимированный реактор внизу (фикс, на всех вкладках) ── */
.vk { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom,0px)); z-index: 2000;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; font-family: 'Rajdhani',sans-serif; }
.vk-status { font-size: 12px; letter-spacing: .5px; color: var(--txt); text-align: center; max-width: 82vw;
  background: rgba(5,8,12,.72); border: 1px solid var(--line-soft); padding: 4px 12px; border-radius: 12px; }
.vk-reactor { width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; pointer-events: auto; flex: none;
  background: url("../assets/gallery/reactor_btn.webp") center/cover no-repeat;
  box-shadow: 0 0 20px rgba(0,242,255,.42); transition: box-shadow .25s; }
.vk.idle .vk-reactor { animation: jbreath 3s ease-in-out infinite; }
.vk.listening .vk-reactor { animation: jpulse 1s ease-in-out infinite; box-shadow: 0 0 30px rgba(0,242,255,.78); }
.vk.listening .vk-status { color: var(--cyan); }
.vk.armed .vk-reactor { animation: jpulse .62s ease-in-out infinite; box-shadow: 0 0 38px rgba(70,232,160,.9); }
.vk.armed .vk-status { color: #46e8a0; }
.vk.thinking .vk-reactor { animation: jspin 1.1s linear infinite; box-shadow: 0 0 30px rgba(255,190,0,.7); }
.vk.speaking .vk-reactor { animation: jpulse .8s ease-in-out infinite; box-shadow: 0 0 32px rgba(70,232,160,.82); }
.vk.err .vk-status { color: var(--err); }
@keyframes jbreath { 0%,100%{transform:scale(1);opacity:.92} 50%{transform:scale(1.06);opacity:1} }



/* ── ПЛАНШЕТ горизонтально (тач, 10″): десктопный лейаут как есть, просто УМЕНЬШЕН целиком ── */
/* единый zoom — пропорции 1:1 с десктопом, всё пропорционально мельче, больше влезает */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 760px) {
  body { zoom: 0.72; }
}

/* PTZ-кнопка: визуальный отклик на нажатие */
.ptz-btn.pressed { background: rgba(0,242,255,.3) !important; box-shadow: 0 0 16px var(--cyan) !important; }

/* ── Камера: кнопки звук/говорить/fullscreen/кадр + video-stream ── */
.cam-vbtns { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 10px; z-index: 4; }
.cam-vbtn { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(5,8,12,.72); color: var(--cyan); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 21px; backdrop-filter: blur(4px); padding: 0; }
.cam-vbtn .ic { width: 20px; height: 20px; }
.cam-vbtn.on { background: rgba(0,242,255,.3); box-shadow: 0 0 12px var(--glow); color: #fff; }
.cam-vbtn:active { background: rgba(0,242,255,.25); }
.cam-vs { width: 100%; height: 100%; display: block; background: #000; }
.cam-vs video { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════════════════════════════
   НАТИВНАЯ ПАНЕЛЬ (планшет, ?native=1 → html.jh-native)
   Вкладки разделов переезжают в пустую правую зону шапки «JARVIS HOME»,
   отдельная полоса вкладок и её мёртвый зазор (sv-root padding-top:64) убраны,
   карточки/стеки поджаты → дашборд влезает во весь экран по высоте
   (планшет 1280×800; фикс «блок МОЩНОСТЬ выпирал вниз»). Серёга 12.06.2026.
   Браузер/десктоп НЕ затрагивается (правила только под html.jh-native).
   ════════════════════════════════════════════════════════════════════════ */
html.jh-native #view-tabs {
  position: fixed; top: 0; height: 60px;
  left: 300px; right: 120px;              /* строго в зазоре бренд↔online → центрируем там, без наездов */
  width: auto; border: none; background: transparent; backdrop-filter: none;
  padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  overflow: visible; z-index: 1001;
  pointer-events: none;                   /* пустые зоны прозрачны для кликов — бренд/online кликабельны */
}
html.jh-native .view-tab { padding: 7px 12px; font-size: 18px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; pointer-events: auto; }
html.jh-native .view-tab .ic { width: 21px; height: 21px; }
html.jh-native #grid { padding: 6px 18px 2px; }
html.jh-native .sv-root, html.jh-native .nd-root { padding-top: 4px !important; min-height: 0; }
html.jh-native .sv-stack { gap: 5px; margin-bottom: 5px; }
html.jh-native .ha-card { padding: 7px; }
html.jh-native .sv-md { padding: 1px 12px; }
html.jh-native .sv-md h2 { margin: 1px 0; }
html.jh-native .g-name, html.jh-native .he-title { margin-bottom: 4px; }
/* убрать мега-шапки под-вкладок (только h1: «СОЛНЕЧНАЯ СТАНЦИЯ» / «ЗАРЯДНАЯ СТАНЦИЯ») —
   на планшете освобождают место, контент поднимается. Серёга 12.06. Сводка (h2) не затронута. */
html.jh-native .sv-md:has(h1) { display: none !important; }

/* ── Canvas-виджеты (Аня): akb/autonomy в слотах сводки вместо видео-реакторов ── */
.jhw-block { position: relative; text-align: center; }
.jhw-frame { width: 100%; border: 0; display: block; background: transparent; color-scheme: dark;
  /* размытие границ: края рамки мягко тают в фон дашборда (прозрачный фон у виджета внутри) */
  -webkit-mask: radial-gradient(74% 88% at 50% 47%, #000 54%, transparent 100%);
  mask: radial-gradient(74% 88% at 50% 47%, #000 54%, transparent 100%); }
.jhw-akb .jhw-frame, .jhw-autonomy .jhw-frame { aspect-ratio: 1280 / 696; width: 100%; }
.jhw-lbl { margin-top: 4px; }

/* ── Часы Украины (Киев) под «Сеть и Авто» ── */
.jhw-clock { text-align: center; padding: 14px 8px 16px; position: relative; }
.jhw-clock .clk-time { font-family: 'Orbitron','JetBrains Mono',monospace; font-weight: 700;
  font-size: clamp(34px, 6vw, 52px); line-height: 1; color: var(--cyan); letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(0,242,255,.6), 0 0 40px rgba(0,242,255,.25); font-variant-numeric: tabular-nums; }
.jhw-clock .clk-sec { font-size: .5em; color: var(--cyan-l); opacity: .8; margin-left: 2px; }
.jhw-clock .clk-date { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 1.5px; color: var(--txt); text-transform: capitalize; margin-top: 6px; opacity: .9; }
.jhw-clock .clk-lbl { font-family: 'Rajdhani',sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 2px; color: var(--muted); margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.jhw-clock .clk-lbl .mdi { color: var(--cyan); font-size: 13px; }