/* ============================================================
   LuxBox · Пульт v3.0 — design system «Obsidian Silver»
   Перенесён визуал LuxBox Dashboard v2 (Industrial × Laboratory):
   графит / чёрный металл, электрический зелёный, табличные цифры,
   тонкие линии, сдержанные glow, адаптив: портрет — таб-бар снизу,
   альбом/широкий экран — боковое меню (как в дашборде).
   ============================================================ */

/* --- 1. Design tokens --- */
/* :root слит в design-system.css (v4.46) */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  background:radial-gradient(ellipse at 72% -18%,#242a32 0,transparent 42%),var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; color:inherit}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dim{color:var(--muted); font-weight:500}

/* --- 2. Topbar (шапка) --- */
header{
  position:sticky; top:0; z-index:30;
  height:var(--header-h); min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--sp-l,24px);
  background:var(--bg2); border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:10px; line-height:1.1}
.logo img{height:30px; width:auto; border-radius:10px; border:1px solid var(--line2); background:linear-gradient(145deg,#29313a,#15191e); padding:3px; box-shadow:inset 0 1px #ffffff18}
.head-right{display:flex; align-items:center; gap:12px; min-width:0}
.freshness{font-family:var(--mono); font-size:10px; letter-spacing:.02em; text-transform:none; color:var(--muted); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:5px 13px;
  border-radius:var(--r-full); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:var(--bg3); border:1px solid var(--line); cursor:pointer;
  white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.demo{color:var(--gold)} .pill.demo .dot{background:var(--gold)}
.pill.stale{background:rgba(145,169,183,.12); color:var(--orange); border-color:transparent}
.pill.stale .dot{background:var(--orange)}
.pill.live{background:var(--accent-dim); color:var(--accent); border-color:transparent}
.pill.live .dot{background:var(--accent); box-shadow:0 0 6px var(--accent)}
.pill.err{background:rgba(212,126,126,.12); color:var(--red); border-color:transparent}
.pill.err .dot{background:var(--red)}

/* --- 3. Layout: content --- */
main{
  flex:1; width:100%; max-width:1120px; margin:0 auto;
  padding:18px 24px 108px;
}
.screen{display:none; animation:fade .22s var(--ease)}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.sec-label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:22px 2px 10px;
}
.sub-title{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:14px 0 6px}

/* --- 4. Banner / status --- */
.banner{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--r);
  font-size:13px; margin-top:8px; border:1px solid var(--line); background:var(--bg2);
  position:relative; overflow:hidden;
}
.banner::before{content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
.banner.ok{border-color:rgba(157,184,168,.18); background:var(--accent-dim)}
.banner.warn{border-color:rgba(145,169,183,.2); background:rgba(145,169,183,.08)}
.banner.bad{border-color:rgba(212,126,126,.22); background:rgba(212,126,126,.1)}
.banner b{letter-spacing:.04em}

/* --- 5. Hero (главный экран) --- */
.hero{
  background:linear-gradient(155deg,#11151a,var(--bg2) 62%);
  border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-top:10px;
  position:relative; overflow:hidden;
}
.hero::before{content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
.hero-title{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hero-top{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:6px}
.hero .big{font-size:58px; line-height:1; font-weight:700; letter-spacing:-.03em; font-family:var(--mono); font-variant-numeric:tabular-nums}
.hero-sub{display:flex; flex-direction:column; gap:2px; padding-top:6px}
.hero .unit{color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.hero .dim{font-size:11px}
.hero .badge{margin-left:auto; padding:5px 11px; border-radius:var(--r-full); font-size:10px; font-weight:700; letter-spacing:.06em; white-space:nowrap}
.badge.ok{background:var(--accent-dim); color:var(--accent)}
.badge.warn{background:var(--gold-dim); color:var(--gold)}
.badge.bad{background:rgba(212,126,126,.16); color:var(--red)}
.kpi-strip{
  display:flex; align-items:baseline; gap:12px; margin:12px 0 4px;
  padding:11px 14px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-s);
}
.kpi{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:28px; color:var(--accent); text-shadow:0 0 14px var(--accent-glow)}
.kpi small{font-family:var(--font); font-size:11px; color:var(--muted); margin-left:2px}
.kpi-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px}
.metric{
  background:var(--bg3); border:1px solid var(--line); padding:13px 12px;
  border-radius:var(--r-s); min-width:0; overflow:hidden;
  display:flex; flex-direction:column; gap:3px;
}
.metric .k{font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600}
.metric .v{font-family:var(--mono); font-size:24px; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums}
.metric .v small{font-family:var(--font); font-size:12px; color:var(--text-secondary); display:inline; margin-left:4px; font-weight:500; letter-spacing:0}
.spark{width:100%; height:22px; display:block; margin-top:6px; opacity:.92}

/* --- 6. 3D-бокс (единая модель viewer3d: инлайн canvas в герое) --- */
.box-scene{
  position:relative; height:300px; margin:6px 0 2px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 30%, #10151b 0%, var(--bg) 72%);
  border-radius:var(--r-s);
}
.box-scene #luxbox3d-stage{
  width:100%; height:100%; display:block;
  touch-action:none; cursor:grab; border-radius:var(--r-s);
}
/* заглушка, пока three.js грузится и строит сцену */
.box-scene::after{
  content:"ЗАГРУЗКА 3D…"; position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font:600 10px/1 var(--mono); letter-spacing:.22em; color:var(--muted);
  background:linear-gradient(100deg,#0d1218 30%,#141b23 50%,#0d1218 70%);
  background-size:220% 100%; border-radius:var(--r-s);
  animation:sb3d-shimmer 1.4s linear infinite;
  pointer-events:none; transition:opacity .35s var(--ease);
}
.box-scene.scene-ready::after{opacity:0; visibility:hidden}
@keyframes sb3d-shimmer{0%{background-position:110% 0}100%{background-position:-110% 0}}
.box-scene #luxbox3d-stage:active{cursor:grabbing}
.box-hint{position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}

/* --- 7. Cards / rows / hints --- */
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 19px; margin-top:10px; position:relative; overflow:hidden;
}
.card::before{content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid rgba(28,35,44,.7); font-size:13px}
.row:last-child{border-bottom:none}
.row .k{color:var(--muted)}
.row .v{font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums}
.row .v small{font-family:var(--font); font-size:10px; color:var(--muted); margin-left:4px}
.row-cur{background:var(--accent-dim); border-radius:var(--r-s); padding-left:8px; padding-right:8px}
.hint{font-size:11.5px; color:var(--muted); margin-top:10px; max-width:62ch; line-height:1.55}

/* --- 8. Alerts / events --- */
.alert{display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-s); background:var(--bg2); border:1px solid var(--line); margin-top:5px; font-size:13px}
.alert .ic{font-size:15px; line-height:1.3}
.alert.warn{border-left:3px solid var(--gold)}
.alert.bad{border-left:3px solid var(--red)}
.alert.ok{border-left:3px solid var(--accent)}
.alert b{display:block; font-size:12.5px}
.alert span{color:var(--muted); font-size:11.5px}

/* --- 9. Chips / buttons / seg --- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; font-size:12px; font-weight:500; letter-spacing:.02em;
  border-radius:var(--r-full); border:1px solid var(--line); background:var(--bg3);
  color:var(--ink2); cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--line2); color:var(--ink)}
.chip .dim{font-size:10px; margin-left:3px}
.chip.active{background:var(--accent-dim); color:var(--accent); border-color:var(--accent)}
.chip.sim{flex:1; min-width:110px; justify-content:center; font-weight:600}
.chip.sim.active{background:rgba(212,126,126,.16); color:var(--red); border-color:var(--red)}

button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-s);
  font:600 13px var(--font); letter-spacing:.02em;
  border:1px solid var(--line2); background:var(--bg3); color:var(--ink2);
  transition:all var(--dur) var(--ease);
}
button:hover{border-color:var(--muted); color:var(--ink)}
button.primary{background:var(--accent); color:#04120a; border-color:var(--accent); font-weight:700}
button.primary:hover{background:var(--accent2); box-shadow:0 2px 16px var(--accent-glow); color:#04120a}
button.block{width:100%}
button.del{padding:6px 9px; font-size:10px; color:var(--muted)}
.seg{display:flex; gap:8px; margin-bottom:12px}
.seg button{flex:1; padding:9px 8px; font-size:11px; font-weight:600; letter-spacing:.04em}
.seg button.active{border-color:var(--accent); color:var(--accent); background:var(--accent-dim)}

/* --- 10. Health grid / states --- */
.health{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.chip-health{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-s);
  padding:11px 12px; min-width:0; overflow:hidden;
}
.chip-health b{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.chip-health span{font-family:var(--mono); font-size:12px; font-weight:600}
.chip-health.ok span{color:var(--accent)}
.chip-health.bad span{color:var(--red)}
.state{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.state.on{color:var(--accent)}

/* --- 11. Light timeline --- */
.tl{display:flex; gap:3px; height:64px; margin:4px 0 10px}
.tl-block{
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  border-radius:var(--r-xs); padding:6px 2px; min-width:0; overflow:hidden;
}
.tl-dawn{background:linear-gradient(180deg,rgba(145,169,183,.42),rgba(145,169,183,.16))}
.tl-day{background:linear-gradient(180deg,rgba(145,169,183,.72),rgba(145,169,183,.38))}
.tl-dusk{background:linear-gradient(180deg,rgba(145,169,183,.32),rgba(145,169,183,.1))}
.tl-night{background:#0c1012}
.tl-name{font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; white-space:nowrap}
.tl-lvl{font-family:var(--mono); font-size:12px}
.tl-time{font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.5); white-space:nowrap}

/* --- 12. Chart --- */
.chart-card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-top:10px; position:relative; overflow:hidden}
.chart-card::before{content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}
.chart-card canvas{width:100%; height:200px; display:block}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:10px; color:var(--muted)}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px}

/* --- 13. Fields / inputs / slider --- */
.field{margin-top:13px}
.field label{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:7px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%; background:var(--bg3); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-s); padding:12px 13px; font:500 14px var(--font);
  transition:border-color var(--dur) var(--ease);
}
input:focus,select:focus,textarea:focus{outline:1px solid var(--accent-dim); border-color:var(--line2)}
textarea{resize:vertical}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; margin-top:12px;
  background:var(--bg4); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:2px solid var(--bg2);
  box-shadow:var(--sh1); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:2px solid var(--bg2); cursor:pointer;
}
label.check{display:flex; align-items:center; gap:9px; margin-top:14px; font-size:11.5px; color:var(--muted); cursor:pointer}
label.check input{width:17px; height:17px; accent-color:var(--accent)}

/* --- 14. Kill switch --- */
.kill{
  background:rgba(212,126,126,.12); border:1px solid var(--red);
  color:#fff; font-size:13px; letter-spacing:.05em; font-weight:700; padding:16px 14px; cursor:pointer;
  box-shadow:0 0 18px rgba(212,126,126,.18);
  transition:all var(--dur) var(--ease);
}
.kill:hover{background:rgba(212,126,126,.2); border-color:var(--red); color:#fff}
.kill:active{filter:brightness(1.25)}
.kill.active{background:var(--red); box-shadow:0 0 26px rgba(212,126,126,.35); color:#fff}

/* --- 15. Цикл / задачи / дневник --- */
.cycle-line{margin-top:10px; padding:11px 13px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-s); display:flex; align-items:center; gap:13px}
.cycle-line b{font-size:12.5px; letter-spacing:.03em; display:block}
.cycle-line .dim{font-size:11px; display:block; margin-top:2px}
.cycle-info{flex:1; min-width:0}
.cycle-ring{width:74px; height:74px; flex:none; display:block}
.pbar{height:6px; background:var(--bg4); border-radius:var(--r-full); overflow:hidden; margin-top:8px}
.pbar i{display:block; height:100%; background:var(--accent); border-radius:var(--r-full); box-shadow:0 0 8px var(--accent-glow)}
.task-add{display:flex; gap:7px; margin-top:9px}
.task-add input[type=text]{flex:1; min-width:0}
.task-add input[type=number]{width:62px}
.task-add button{padding:10px 14px}
.link-card{display:block; margin-top:12px; padding:12px 15px; border-radius:var(--r-s); background:var(--bg3); border:1px solid var(--line); color:var(--accent); font-size:12.5px; font-weight:600; text-decoration:none; text-align:left}
.link-card:hover{filter:brightness(1.15)}
.task{display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-s); margin-top:5px; font-size:12.5px}
.task .when{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}
.task.due .when{color:var(--accent)}
.task button{padding:7px 11px; font-size:10px}
.jr-photos{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; align-items:center}
.jr-body{flex:1; min-width:0}
.jr-thumb{width:74px; height:74px; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--line2); background:var(--bg3); cursor:zoom-in; display:block}
.thumb-wrap{position:relative; display:inline-flex}
.thumb-wrap .del{position:absolute; top:-7px; right:-7px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-full); padding:2px 7px; font-size:10px; color:var(--muted); cursor:pointer}
.lightbox{position:fixed; inset:0; z-index:80; background:rgba(8,10,13,.94); display:flex; align-items:center; justify-content:center; padding:16px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:86vh; border-radius:var(--r); border:1px solid var(--line2)}

/* --- 15.5 3D-оверлей (viewer3d) --- */
.v3d-open{
  margin-left:10px; padding:3px 11px; border-radius:var(--r-full);
  font:700 10px var(--font); letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line2); background:var(--bg3); color:var(--accent);
  vertical-align:middle;
}
.v3d-open:hover{border-color:var(--accent); background:var(--accent-dim)}
.viewer3d{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:radial-gradient(circle at 50% 38%,#1a2429 0,#0d1215 42%,#070a0c 100%);
}
.viewer3d[hidden]{display:none}
.v3d-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line); background:rgba(10,14,17,.7);
}
.v3d-live{font-size:10px; line-height:1.55; letter-spacing:.06em; color:var(--accent); min-width:0}
.v3d-close{
  width:38px; height:38px; padding:0; border-radius:var(--r-s);
  border:1px solid var(--line2); background:var(--bg2); color:var(--ink2); font-size:15px; flex:none;
}
.v3d-close:hover{color:var(--ink); border-color:var(--muted)}
.v3d-mini{
  padding:6px 10px; border-radius:var(--r-s); font-size:10px; font-weight:700;
  letter-spacing:.08em; border:1px solid var(--line2); background:var(--bg2);
  color:var(--muted); flex:none;
}
.v3d-mini:hover{color:var(--ink)}
.v3d-mini.active{background:var(--accent-dim); color:var(--accent); border-color:var(--accent)}
.v3d-acts{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.v3d-acts button{
  padding:5px 10px; border-radius:var(--r-full); font-size:10px; font-weight:700;
  letter-spacing:.06em; border:1px solid var(--line2); background:var(--bg3); color:var(--muted); min-height:0;
}
.v3d-acts button:hover{color:var(--ink); border-color:var(--muted)}
#v3d-stage{flex:1; width:100%; min-height:0; display:block; touch-action:none}
.v3d-hint{
  position:absolute; left:14px; top:64px; padding:7px 11px;
  border:1px solid var(--line2); border-radius:var(--r-s);
  background:rgba(7,10,12,.66); font-size:10px; letter-spacing:.06em; color:var(--muted);
  pointer-events:none;
}
.v3d-info{
  position:absolute; right:12px; top:64px; width:min(250px,calc(100% - 24px));
  padding:12px 14px; border:1px solid var(--line2); border-radius:var(--r);
  background:rgba(9,13,15,.82); backdrop-filter:blur(10px);
}
.v3d-info b{display:block; font-size:12px; letter-spacing:.06em; margin-bottom:4px}
.v3d-info p{font-size:11px; line-height:1.45; color:var(--ink2); margin:0}
.v3d-controls{
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:rgba(10,14,17,.88);
}
.v3d-row{display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.v3d-row + .v3d-row{margin-top:8px}
.v3d-row button{
  padding:9px 12px; border-radius:var(--r-s); font-size:11px; font-weight:600;
  border:1px solid var(--line2); background:var(--bg2); color:var(--ink2); min-height:40px;
}
.v3d-row button:hover{color:var(--ink); border-color:var(--muted)}
.v3d-row button.active{background:var(--accent-dim); color:var(--accent); border-color:var(--accent)}
@media (max-height:520px){ .v3d-info{display:none} .v3d-hint{top:56px} }

/* ============================================================
   16. НАВИГАЦИЯ
   Портрет (телефон вертикально) → таб-бар снизу.
   Альбом / планшет / десктоп (≥601px) → боковое меню слева,
   как в LuxBox Dashboard v2.
   ============================================================ */
nav#tabbar{
  position:fixed; bottom:0; left:0; right:0;
  height:64px;
  display:flex; align-items:center; justify-content:space-around;
  background:rgba(14,17,22,.94); border-top:1px solid var(--line);
  padding:0 8px calc(0px + env(safe-area-inset-bottom));
  z-index:40;
}
nav#tabbar button{
  background:none; border:none; border-radius:var(--r-s);
  flex:1 1 0; min-width:0; max-width:64px; height:52px; padding:0 1px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-weight:600; font-size:10px; letter-spacing:0;
  text-transform:none; white-space:nowrap; overflow:hidden;
  position:relative; transition:all var(--dur) var(--ease);
}
nav#tabbar button .ic{display:grid; place-items:center; height:20px}
nav#tabbar button .ic svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
nav#tabbar button:hover{color:var(--ink2); background:var(--bg3)}
nav#tabbar button.active{color:var(--accent); background:var(--accent-dim)}
nav#tabbar button.active .ic{filter:drop-shadow(0 0 6px var(--accent-glow))}
nav#tabbar button.active::before{
  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:20px; height:3px; border-radius:2px; background:var(--accent);
}

/* --- 17. Адаптив: альбомная ориентация / широкий экран --- */
@media (min-width:601px){
  body{flex-direction:row}
  header{
    position:fixed; top:0; left:var(--sidebar-w); right:0;
    padding:0 24px;
  }
  nav#tabbar{
    top:0; bottom:0; right:auto;
    width:var(--sidebar-w); height:auto;
    flex-direction:column; justify-content:flex-start;
    gap:2px; padding:18px 0 14px;
    border-top:none; border-right:1px solid var(--line);
    background:var(--bg2);
  }
  nav#tabbar button{width:56px; height:56px; flex:0 0 56px; max-width:56px}
  nav#tabbar button.active::before{
    bottom:auto; top:50%; left:-14px; transform:translateY(-50%);
    width:3px; height:24px;
  }
  main{
    margin-left:var(--sidebar-w);
    padding:calc(var(--header-h) + 18px) 28px 40px;
  }
  /* герой: бокс слева, метрики колонкой справа — как в Dashboard v2 */
  .hero{
    display:grid;
    grid-template-columns:minmax(300px,1.15fr) 1fr;
    column-gap:22px; row-gap:0; align-items:start;
  }
  .hero-title{grid-column:1 / -1}
  .box-scene{grid-row:2 / 6; height:340px; margin:0}
  .hero-top{margin-top:10px}
  .metrics{grid-template-columns:1fr 1fr}
  .health{grid-template-columns:repeat(6,1fr)}
  .hint{max-width:72ch}
  .card, .chart-card{padding:22px 24px}
}

/* --- 18. Ландшафт телефона: компактная высота --- */
@media (max-height:520px) and (min-width:601px){
  .box-scene{height:225px; transform:scale(.8)}
  .hero .big{font-size:44px}
  .metric .v{font-size:20px}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .hero-top{margin-top:2px}
  .kpi-strip{margin:8px 0 4px; padding:8px 12px}
  .kpi{font-size:24px}
  main{padding-top:calc(var(--header-h) + 10px)}
}

@media (max-width:400px){
  header{padding:0 12px}
  .logo img{height:30px}
  .head-right{gap:8px}
  .freshness{max-width:none; font-size:10px; letter-spacing:.04em}
  .pill{padding:4px 10px; font-size:10px}
}

/* --- 19. Узкие экраны --- */
@media (max-width:360px){
  .health{grid-template-columns:1fr 1fr}
  .chip-health b{font-size:10px}
  .metrics{grid-template-columns:1fr 1fr}
  .hero .big{font-size:48px}
  nav#tabbar button{font-size:10px}
}

/* --- 20. Печать --- */
@media print{
  nav#tabbar, header .head-right{display:none}
  header{position:static}
  main{margin:0; padding:10px}
}


/* ============================================================
   LuxBox App · Site-inspired visual layer
   Brand language aligned with the LuxBox public site:
   graphite / warm ivory / muted brass / architectural edges.
   Functional selectors and component structure remain intact.
   ============================================================ */
/* :root слит в design-system.css (v4.46) */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 50% -20%,rgba(145,169,183,.055),transparent 52%),
    var(--bg);
  color:var(--ink); font-size:14px; letter-spacing:.005em;
}
header{
  background:rgba(23,24,27,.96); border-bottom:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.logo img{height:36px;filter:brightness(1.02)}
.freshness{font-family:var(--mono);font-size:10px;letter-spacing:.02em;text-transform:none}
.pill{border-radius:2px;letter-spacing:.12em;font-size:10px;padding:6px 10px}
.pill.demo{color:var(--accent);background:rgba(145,169,183,.09);border-color:rgba(145,169,183,.2)}
.pill.live{color:var(--green);background:rgba(159,181,139,.1);border-color:rgba(159,181,139,.25)}
main{max-width:1280px;padding:28px 34px 112px}
.sec-label,.sub-title{
  color:var(--text-secondary); font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; margin:30px 2px 11px;
}
.sub-title{margin:18px 0 8px;color:var(--muted)}
.hero,.card,.chart-card{
  background:linear-gradient(145deg,rgba(39,41,46,.98),rgba(29,31,35,.98));
  border:1px solid #393b40;border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.13);
}
.hero{padding:22px 24px;margin-top:12px}
.hero::before,.card::before,.chart-card::before{
  left:24px;right:24px;background:linear-gradient(90deg,transparent,rgba(145,169,183,.28),transparent)
}
.hero-title{
  color:var(--text-secondary);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;line-height:1.7;
}
.hero .big{font-size:clamp(48px,7vw,72px);font-weight:600;letter-spacing:-.06em;color:#E6E9EC}
.hero .unit{color:var(--accent);font-family:var(--mono);font-size:10px}
.hero .dim{color:var(--muted)}
.hero .badge{border-radius:2px;letter-spacing:.12em;text-transform:uppercase}
.badge.ok{background:rgba(159,181,139,.12);color:var(--green)}
.badge.warn{background:var(--gold-dim);color:var(--gold)}
.badge.bad{background:rgba(227,109,104,.13);color:var(--red)}
.kpi-strip{background:rgba(12,13,15,.24);border:1px solid #3b3d42;border-radius:3px}
.kpi{color:var(--accent);text-shadow:0 0 18px rgba(145,169,183,.16)}
.kpi-label,.metric .k{font-family:var(--mono);letter-spacing:.12em;color:var(--muted)}
.metrics{gap:10px}
.metric{
  background:rgba(15,16,18,.24);border:1px solid #3b3d42;border-radius:3px;
  padding:14px 13px;transition:border-color var(--dur),transform var(--dur),background var(--dur);
}
.metric:hover{border-color:rgba(145,169,183,.42);background:rgba(145,169,183,.045);transform:translateY(-2px)}
.metric .k{font-size:10px}
.metric .v{font-size:25px;color:#E6E9EC;font-weight:600}
.box-scene{
  height:clamp(270px,38vw,440px);margin:12px 0 10px;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(145,169,183,.10),transparent 57%),
    linear-gradient(145deg,#0d0f12,#17191c 70%);
  border:1px solid rgba(145,169,183,.12);border-radius:3px;
}
.box-scene::after{background:linear-gradient(100deg,#1c1e22 30%,#14171c 50%,#1c1e22 70%);border-radius:3px}
.box-hint{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--muted)}
.card{padding:20px 21px;margin-top:10px}
.row{border-bottom-color:rgba(255,255,255,.07);padding:13px 2px}
.row .k{color:var(--text-secondary)}
.row .v{color:#E6E9EC}
.row-cur{background:rgba(145,169,183,.09)}
.hint{color:var(--muted);font-size:11px;line-height:1.65}
.banner{border-radius:3px;background:#222429;border-color:#3a3c41}
.banner.ok{background:rgba(159,181,139,.08);border-color:rgba(159,181,139,.22)}
.banner.warn{background:rgba(145,169,183,.08);border-color:rgba(145,169,183,.24)}
.banner.bad{background:rgba(227,109,104,.08);border-color:rgba(227,109,104,.25)}
.chip{
  border-radius:2px;background:#14171c;border-color:#41434a;color:var(--text-secondary);
  font-size:11px;padding:9px 13px;letter-spacing:.015em;
}
.chip.active{background:rgba(145,169,183,.13);color:#B8C9D2;border-color:#91A9B7}
.chip.sim.active{background:rgba(227,109,104,.12);color:var(--red);border-color:var(--red)}
button{
  border-radius:3px;background:#14171c;border-color:#484a50;color:var(--text-secondary);
  font-size:12px;letter-spacing:.015em;min-height:38px;
}
button:hover{border-color:#91A9B7;color:#E6E9EC;background:#303238}
button.primary{
  background:#B8C9D2;border-color:#B8C9D2;color:#191a1d;
}
button.primary:hover{background:#B8C9D2;border-color:#B8C9D2;color:#17181b;box-shadow:0 5px 18px rgba(145,169,183,.16)}
.seg button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.health{gap:9px}
.chip-health{background:#222429;border-color:#3a3c42;border-radius:3px;padding:13px}
.chip-health b{color:var(--text-secondary);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.chip-health span{font-size:12px}
.chip-health.ok span,.state.on{color:var(--green)}
.tl{height:70px;gap:4px}
.tl-dawn{background:linear-gradient(180deg,rgba(145,169,183,.36),rgba(145,169,183,.12))}
.tl-day{background:linear-gradient(180deg,rgba(145,169,183,.62),rgba(145,169,183,.28))}
.tl-dusk{background:linear-gradient(180deg,rgba(145,169,183,.28),rgba(145,169,183,.08))}
.tl-night{background:#17191d}
.chart-card{padding:19px}
.legend{color:var(--text-secondary)}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  background:#0d0f12;border-color:#41434a;border-radius:3px;color:#E6E9EC;
}
input:focus,select:focus,textarea:focus{outline:1px solid rgba(145,169,183,.24);border-color:#91A9B7}
input[type=range]{background:#41434a}
input[type=range]::-webkit-slider-thumb{background:#B8C9D2;border-color:#14171c}
input[type=range]::-moz-range-thumb{background:#B8C9D2;border-color:#14171c}
label.check input{accent-color:#B8C9D2}
.pbar{background:#41434a}
.pbar i{background:var(--accent);box-shadow:0 0 9px rgba(145,169,183,.18)}
.link-card{background:#25272c;border-color:#41434a;color:#B8C9D2;border-radius:3px}
.task{background:#25272c;border-color:#3c3e44;border-radius:3px}
.kill{background:rgba(227,109,104,.09);border-color:rgba(227,109,104,.65);box-shadow:none}
.kill:hover{background:rgba(227,109,104,.16)}
.v3d-open{border-radius:2px;color:var(--accent);border-color:#55504a;background:#26282d}
.v3d-open:hover{border-color:var(--accent);background:var(--accent-dim)}
.viewer3d{background:radial-gradient(circle at 50% 38%,#33302a 0,#1b1c1f 44%,#111214 100%)}
.v3d-bar,.v3d-controls{background:rgba(25,26,29,.96);border-color:#414148}
.v3d-info{background:rgba(27,28,31,.94);border-color:#4a4842;border-radius:3px}
.v3d-row button.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.lightbox{background:rgba(15,16,18,.96)}
nav#tabbar{background:rgba(20,23,28,.97);border-color:var(--line2)}
nav#tabbar button{color:var(--muted)}
nav#tabbar button.active{color:var(--accent);background:var(--accent-dim)}
nav#tabbar button.active .ic{filter:drop-shadow(0 0 6px var(--accent-glow))}
nav#tabbar button.active::before{background:var(--accent);height:2px;border-radius:2px}
@media(min-width:601px){
  header{background:rgba(25,26,29,.97);border-color:#3c3e43}
  nav#tabbar{background:#1d1f23;border-right:1px solid #3c3e43}
  nav#tabbar button{border-radius:2px}
  nav#tabbar button.active{background:rgba(145,169,183,.1)}
  main{padding-top:34px}
}
@media(max-width:760px){
  main{padding:16px 14px calc(88px + env(safe-area-inset-bottom))}
  .hero{padding:17px 15px}
  .card{padding:16px 15px}
  .sec-label{margin-top:25px}
  .box-scene{height:285px}
  .metrics{gap:7px}
  .metric{padding:11px 9px}
  .metric .v{font-size:21px}
  nav#tabbar{height:68px;padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:380px){
  main{padding-left:10px;padding-right:10px}
  .hero .big{font-size:48px}
  .metric .v{font-size:18px}
  nav#tabbar button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   LUXBOX PULT · PREMIUM INTERFACE
   Direction: dark titanium / warm ceramic / champagne brass.
   Functional markup and application logic remain untouched.
   ============================================================ */
/* :root слит в design-system.css (v4.46) */
html{background:var(--bg);scroll-behavior:smooth}
body{
  color:var(--ink);
  background:
    radial-gradient(ellipse at 72% -12%,rgba(145,169,183,.075),transparent 38%),
    radial-gradient(ellipse at 0% 45%,rgba(117,137,130,.045),transparent 34%),
    var(--bg);
  font-size:14px;
  letter-spacing:.005em;
}
::selection{background:rgba(145,169,183,.28);color:#fff}
button{font-weight:600}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent)!important;outline-offset:3px
}

/* Header — discreet hardware-console chrome */
header{
  height:var(--header-h);min-height:var(--header-h);
  padding:0 28px;
  background:rgba(25,26,29,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.logo img{height:35px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.freshness{font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}
.pill{padding:7px 12px;border-radius:7px;font-size:10px;letter-spacing:.09em;background:#25272b;border-color:var(--line2)}
.pill.demo{color:var(--accent);background:var(--accent-dim);border-color:rgba(145,169,183,.18)}
.pill.live{color:var(--green);background:rgba(139,198,160,.12);border-color:rgba(139,198,160,.2)}
.pill.err{color:var(--red);background:rgba(237,119,116,.12)}

/* Main canvas and section rhythm */
main{max-width:1480px;padding:28px 34px 110px}
.screen{animation:lux-enter .38s var(--ease)}
@keyframes lux-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sec-label{
  margin:30px 2px 12px;color:var(--text-secondary);font-size:10px;
  letter-spacing:.24em;font-weight:700
}
.sub-title{color:var(--accent);font-size:10px;letter-spacing:.1em}

/* Status banner */
.banner{
  min-height:48px;padding:13px 17px;margin:0 0 14px;
  border-radius:var(--r-s);background:rgba(139,198,160,.075);
  border-color:rgba(139,198,160,.18);font-size:12px;
}
.banner.ok{background:linear-gradient(100deg,rgba(139,198,160,.11),rgba(139,198,160,.035));border-color:rgba(139,198,160,.2)}
.banner.warn{background:rgba(145,169,183,.09);border-color:rgba(145,169,183,.2)}
.banner.bad{background:rgba(237,119,116,.09);border-color:rgba(237,119,116,.22)}
.banner::before{display:none}
.banner .ic{font-size:15px}

/* Main dashboard hero — editorial split layout */
.hero{
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(203,211,220,.14);
  background:
    radial-gradient(ellipse at 20% 0%,rgba(145,169,183,.10),transparent 44%),
    linear-gradient(135deg,#242529 0%,#1b1c20 58%,#18191c 100%);
  box-shadow:var(--sh2);
}
.hero::before{left:24px;right:24px;background:linear-gradient(90deg,transparent,rgba(145,169,183,.22),transparent)}
.hero-title{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.hero-top{gap:14px;margin-top:14px;align-items:center}
.hero .big{font-size:clamp(54px,6vw,76px);font-weight:600;letter-spacing:-.075em;color:#E6E9EC}
.hero .unit{font-size:10px;letter-spacing:.1em;color:var(--accent)}
.hero .dim{font-size:10px;color:var(--text-secondary)}
.hero .badge{border:1px solid rgba(139,198,160,.2);background:rgba(139,198,160,.1);color:var(--green);border-radius:7px;padding:7px 11px}
.hero .badge.warn{color:var(--orange);background:rgba(145,169,183,.1);border-color:rgba(145,169,183,.2)}
.hero .badge.bad{color:var(--red);background:rgba(237,119,116,.1);border-color:rgba(237,119,116,.2)}
.box-scene{
  height:350px;margin:14px 0 8px;
  border:1px solid rgba(203,211,220,.07);
  border-radius:15px;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(145,169,183,.105),transparent 53%),
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.12));
}
.box-scene::after{background:linear-gradient(100deg,#1c1d20 30%,#292a2d 50%,#1c1d20 70%)}
.box-hint{bottom:10px;padding:6px 10px;border-radius:5px;background:rgba(17,18,20,.65);font-size:10px;letter-spacing:.09em}
.v3d-open{border-radius:6px;border-color:rgba(145,169,183,.3);background:var(--accent-dim);color:var(--accent);padding:6px 11px}

/* Performance strip and live metrics */
.kpi-strip{
  margin:16px 0 8px;padding:13px 15px;
  border-radius:10px;border-color:rgba(145,169,183,.15);
  background:linear-gradient(100deg,rgba(145,169,183,.10),rgba(145,169,183,.025));
}
.kpi{font-size:29px;color:var(--accent2);text-shadow:0 0 18px rgba(145,169,183,.18)}
.kpi-label{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.metrics{gap:10px;margin-top:13px}
.metric{
  padding:15px 15px 14px;border-radius:11px;
  border:1px solid var(--line);background:linear-gradient(145deg,#292a2e,#222327);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)
}
.metric:hover{transform:translateY(-2px);border-color:rgba(145,169,183,.25);background:linear-gradient(145deg,#303034,#242529)}
.metric .k{font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}
.metric .v{font-size:25px;color:#E6E9EC}
.metric .v small{color:var(--muted)}

/* Premium surfaces */
.card,.chart-card{
  border-radius:15px;padding:20px 21px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(38,39,43,.96),rgba(29,30,34,.98));
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.card::before,.chart-card::before{left:22px;right:22px;background:linear-gradient(90deg,transparent,rgba(145,169,183,.14),transparent)}
.row{border-bottom-color:rgba(203,211,220,.075);padding:13px 3px}
.row .k{color:var(--muted)}
.row .v{color:#E6E9EC}
.hint{color:var(--muted);font-size:10.5px;line-height:1.65}
.cycle-line,.task,.link-card{
  border-radius:9px;border-color:var(--line);background:rgba(12,13,15,.28)
}
.cycle-line{padding:13px 14px}
.pbar{height:5px;background:#393a3e}
.pbar i{background:linear-gradient(90deg,#91A9B7,#B8C9D2);box-shadow:0 0 12px rgba(145,169,183,.22)}
.link-card{color:var(--accent);padding:14px 15px}
.task{padding:12px 13px}
.task.due .when{color:var(--accent)}

/* Navigation controls and buttons */
.chips{gap:7px}
.chip{
  border-radius:7px;padding:9px 13px;font-size:11px;
  border-color:var(--line);background:#292a2e;color:var(--text-secondary);
}
.chip:hover{border-color:rgba(145,169,183,.34);color:#E6E9EC}
.chip.active{color:var(--accent2);background:rgba(145,169,183,.12);border-color:rgba(145,169,183,.45)}
.chip.sim.active{color:var(--red);background:rgba(237,119,116,.12);border-color:rgba(237,119,116,.35)}
button{
  border-radius:8px;border-color:var(--line2);
  background:linear-gradient(180deg,#303136,#28292d);
  color:#d7d0c5;min-height:39px;
}
button:hover{border-color:rgba(145,169,183,.38);color:#fff;transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.primary{
  background:linear-gradient(135deg,#B8C9D2,#B8C9D2);
  color:#211d16;border-color:#B8C9D2;
  box-shadow:0 5px 18px rgba(145,169,183,.13)
}
button.primary:hover{background:linear-gradient(135deg,#E6E9EC,#B8C9D2);color:#211d16}
button.block{min-height:46px}
.seg button{border-radius:7px}
.seg button.active{background:var(--accent-dim);border-color:rgba(145,169,183,.45);color:var(--accent2)}

/* Device health and status */
.health{gap:9px}
.chip-health{border-radius:10px;padding:13px;background:linear-gradient(145deg,#28292d,#202125);border-color:var(--line)}
.chip-health b{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.chip-health span{font-size:11px}
.chip-health.ok span,.state.on{color:var(--green)}
.state{font-size:10px;letter-spacing:.09em}
.alert{border-radius:10px;background:#222327;border-color:var(--line);padding:13px 15px}
.alert.ok{border-left-color:var(--green)}
.alert.warn{border-left-color:var(--orange)}
.alert.bad{border-left-color:var(--red)}
.alert b{color:#E6E9EC}
.alert span{color:var(--muted)}

/* Lighting timeline — warm glass */
.tl{height:72px;gap:4px}
.tl-block{border:1px solid rgba(203,211,220,.08);border-radius:7px;padding:7px 3px}
.tl-dawn{background:linear-gradient(180deg,rgba(145,169,183,.35),rgba(145,169,183,.09))}
.tl-day{background:linear-gradient(180deg,rgba(145,169,183,.42),rgba(145,169,183,.17))}
.tl-dusk{background:linear-gradient(180deg,rgba(145,169,183,.22),rgba(145,169,183,.06))}
.tl-night{background:linear-gradient(180deg,#17191d,#111214)}
.tl-name{font-size:10px;color:#E6E9EC}
.tl-time{color:var(--muted)}

/* Charts and inputs */
.chart-card canvas{height:220px}
.legend{color:var(--text-secondary);font-size:10px}
.field label{font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  border-radius:8px;background:#1b1c20;border-color:var(--line2);
  color:var(--ink);padding:12px 13px;font-size:13px
}
input:focus,select:focus,textarea:focus{outline:1px solid rgba(145,169,183,.28);border-color:rgba(145,169,183,.55)}
input[type=range]{background:#4a4741}
input[type=range]::-webkit-slider-thumb{background:var(--accent2);border:2px solid #292a2e;box-shadow:0 0 0 4px rgba(145,169,183,.12)}
input[type=range]::-moz-range-thumb{background:var(--accent2);border:2px solid #292a2e;box-shadow:0 0 0 4px rgba(145,169,183,.12)}
label.check{color:var(--text-secondary)}
label.check input{accent-color:var(--accent)}

/* Safety is visually distinct; never soften emergency control */
.kill{
  border-radius:9px;background:rgba(237,119,116,.12);
  border-color:rgba(237,119,116,.48);color:#ffb0a9;
  box-shadow:0 0 22px rgba(237,119,116,.08)
}
.kill:hover{background:rgba(237,119,116,.2);border-color:var(--red);color:#fff}
.kill.active{background:#b84e4c;color:#fff}

/* 3D viewer overlay */
.viewer3d{background:radial-gradient(ellipse at 50% 35%,#34302a 0,#191a1d 48%,#101113 100%)}
.v3d-bar,.v3d-controls{background:rgba(24,25,28,.92);border-color:var(--line2)}
.v3d-live{color:var(--accent)}
.v3d-close,.v3d-row button{border-radius:8px;background:#292a2e;border-color:var(--line2);color:#d7d0c5}
.v3d-row button.active{background:var(--accent-dim);color:var(--accent2);border-color:rgba(145,169,183,.5)}
.v3d-info{background:rgba(25,26,29,.9);border-color:var(--line2);border-radius:12px}
.v3d-info p{color:var(--text-secondary)}

/* Desktop: persistent navigation rail and wide work area */
@media(min-width:601px){
  body{background:
    radial-gradient(ellipse at 70% -10%,rgba(145,169,183,.06),transparent 36%),
    #111214}
  header{
    left:var(--sidebar-w);padding:0 34px;
    background:rgba(25,26,29,.86);border-color:var(--line);
  }
  nav#tabbar{
    width:var(--sidebar-w);background:#191a1d;border-right:1px solid var(--line);
    padding:22px 13px;gap:8px;align-items:stretch;
  }
  nav#tabbar button{
    width:100%;max-width:none;height:62px;flex:0 0 62px;
    border-radius:10px;font-size:10px;letter-spacing:.08em;
    color:var(--muted);gap:5px;
  }
  nav#tabbar button .ic{font-size:20px}
  nav#tabbar button.active{background:linear-gradient(135deg,rgba(145,169,183,.16),rgba(145,169,183,.055));color:var(--accent2);border:1px solid rgba(145,169,183,.16)}
  nav#tabbar button.active::before{left:-13px;width:3px;height:26px;background:var(--accent);border-radius:0 3px 3px 0}
  main{margin-left:var(--sidebar-w);padding:calc(var(--header-h) + 26px) 36px 48px;max-width:none}
  .hero{
    display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
    grid-template-rows:auto auto auto auto auto;column-gap:28px;row-gap:0;align-items:start
  }
  .hero-title{grid-column:1/-1;margin-bottom:8px}
  .box-scene{grid-column:1;grid-row:2/7;height:410px;margin:0}
  .hero-top{grid-column:2;grid-row:2;margin:12px 0 0;align-items:center}
  .kpi-strip{grid-column:2;grid-row:3;margin:18px 0 0}
  .metrics{grid-column:2;grid-row:4;grid-template-columns:1fr 1fr;align-self:start}
  .hero .big{font-size:clamp(58px,5vw,82px)}
  .health{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card,.chart-card{padding:22px 24px}
  .sec-label{margin-top:32px}
}
@media(min-width:1200px){
  main{padding-left:clamp(36px,4vw,72px);padding-right:clamp(36px,4vw,72px)}
  .hero{padding:30px;column-gap:38px}
  .box-scene{height:460px}
  .metric{padding:17px}
}
@media(max-width:760px){
  header{padding:0 15px}
  main{padding:16px 14px calc(94px + env(safe-area-inset-bottom))}
  .hero{padding:17px 15px;border-radius:16px}
  .hero .big{font-size:56px}
  .box-scene{height:300px}
  .card,.chart-card{padding:16px 15px;border-radius:13px}
  .sec-label{margin-top:25px}
  .metrics{gap:7px}
  .metric{padding:12px 10px}
  .metric .v{font-size:21px}
  nav#tabbar{height:70px;background:rgba(25,26,29,.96);border-color:var(--line2);backdrop-filter:blur(18px)}
  nav#tabbar button{max-width:70px;border-radius:8px;font-size:10px}
  nav#tabbar button.active{background:rgba(145,169,183,.12)}
}
@media(max-width:390px){
  .head-right{gap:6px}.freshness{max-width:120px;font-size:10px}
  .pill{padding:6px 8px;font-size:10px}
  main{padding-left:10px;padding-right:10px}
  .hero .big{font-size:49px}
  .box-scene{height:260px}
  .metric .v{font-size:18px}
  nav#tabbar button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   LUXBOX SITE DESIGN SYSTEM — unified final layer
   ============================================================ */
/* LuxBox App — full visual redesign
   Visual language aligned with the LuxBox public site.
   This layer intentionally changes presentation only; app behavior and IDs stay intact.
*/
/* :root слит в design-system.css (v4.46) */
html{background:var(--bg);scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 520px at 88% 0%,rgba(157,184,168,.075),transparent 68%),
    radial-gradient(700px 520px at 0% 72%,rgba(142,164,189,.10),transparent 70%),
    var(--bg);
  color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.65;
  letter-spacing:-.01em;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(203,211,220,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(203,211,220,.025) 1px,transparent 1px);
  background-size:44px 44px;
}
::selection{background:var(--accent);color:#0d0f12}
button,input,select,textarea{font-family:var(--font)}
button{border-radius:var(--r-s);font-weight:650;letter-spacing:.015em}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.num,.hero .big,.kpi,.metric .v,.row .v{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Brand header */
header{
  height:var(--header-h);min-height:var(--header-h);padding:0 34px;
  background:rgba(32,34,38,.9);border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.logo img{height:38px;width:auto;border-radius:0;filter:sepia(.12)}
.head-right{gap:16px}
.freshness{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.pill{padding:7px 13px;background:rgba(203,211,220,.055);border:1px solid var(--line);border-radius:100px;font-size:10px;letter-spacing:.09em}
.pill.demo{color:var(--gold)}
.pill.live{background:rgba(127,161,138,.12);color:#a7c2ad;border-color:rgba(127,161,138,.2)}
.pill.err{background:rgba(216,121,112,.12);color:var(--red)}

/* Main canvas */
main{max-width:1480px;padding:30px 42px 70px}
.screen{animation:luxFade .42s var(--ease)}
@keyframes luxFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sec-label,.sub-title{
  margin:34px 3px 13px;color:var(--accent);font-size:10px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;
}
.sub-title{margin:22px 0 9px;color:var(--muted)}
.banner{
  min-height:48px;padding:12px 18px;margin:0 0 18px;border-radius:var(--r);
  background:rgba(127,161,138,.09);border:1px solid rgba(127,161,138,.2);
  color:#b7cbb8;font-size:12px;letter-spacing:.015em;
}
.banner::before{display:none}
.banner.warn{background:rgba(145,169,183,.09);border-color:rgba(145,169,183,.24);color:#B8C9D2}
.banner.bad{background:rgba(216,121,112,.1);border-color:rgba(216,121,112,.26);color:#e6a19a}

/* Feature hero — editorial, architectural, warm metal */
.hero{
  margin-top:0;padding:26px 28px 24px;border-radius:10px;
  border:1px solid rgba(203,211,220,.16);
  background:
    radial-gradient(700px 300px at 14% 8%,rgba(157,184,168,.1),transparent 70%),
    linear-gradient(145deg,#303238 0%,#27292e 58%,#24262a 100%);
  box-shadow:var(--sh2);
}
.hero::before{left:28px;right:28px;background:linear-gradient(90deg,transparent,rgba(203,211,220,.18),transparent)}
.hero-title{
  color:var(--accent2);font-size:10px;letter-spacing:.22em;font-weight:800;
  text-transform:uppercase;line-height:1.8;
}
.hero-title::before{content:"";display:inline-block;width:24px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px}
.hero .big{font-size:clamp(48px,5vw,72px);font-weight:500;letter-spacing:-.075em;color:var(--ink);line-height:1}
.hero-top{align-items:center;gap:16px;margin-top:22px}
.hero-sub{padding-top:0;gap:5px}
.hero .unit{color:var(--accent2);font-size:10px;letter-spacing:.1em;font-weight:800}
.hero .dim{font-size:11px;color:var(--muted)}
.hero .badge{margin-left:auto;border:1px solid rgba(127,161,138,.22);padding:7px 13px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.badge.ok{background:rgba(127,161,138,.12);color:#b4c9b4}
.badge.warn{background:var(--gold-dim);color:#B8C9D2}
.badge.bad{background:rgba(216,121,112,.14);color:#e6a19a}
.box-scene{
  min-height:300px;margin:18px 0 8px;border-radius:8px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(157,184,168,.1),transparent 62%),
    linear-gradient(rgba(203,211,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(203,211,220,.045) 1px,transparent 1px),#24262a;
  background-size:auto,28px 28px,28px 28px,auto;
  border:1px solid rgba(203,211,220,.1);
}
.box-scene::after{background:linear-gradient(100deg,#25272b 30%,#35373c 50%,#25272b 70%);background-size:220% 100%;color:var(--muted)}
.box-hint{color:var(--muted);font-size:10px;letter-spacing:.1em}
.kpi-strip{
  display:flex;align-items:center;gap:18px;margin:18px 0 8px;padding:14px 17px;
  background:rgba(157,184,168,.09);border:1px solid rgba(157,184,168,.16);border-radius:6px;
}
.kpi{font-size:32px;color:var(--accent2);text-shadow:0 0 22px rgba(157,184,168,.16)}
.kpi-label{color:var(--ink2);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.metrics{gap:10px;margin-top:12px}
.metric{
  padding:15px 16px;gap:5px;background:rgba(18,19,21,.26);
  border:1px solid rgba(203,211,220,.1);border-radius:6px;
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.metric:hover{transform:translateY(-3px);border-color:rgba(157,184,168,.32);background:rgba(157,184,168,.055)}
.metric .k{color:var(--muted);font-size:10px;letter-spacing:.1em;font-weight:800}
.metric .v{font-size:26px;color:var(--ink);font-weight:500;letter-spacing:-.05em}
.metric .v small{color:var(--text-secondary);font-size:12px}

/* живой индикатор статуса в пилюле */
@keyframes pillPulse{0%,100%{opacity:1}50%{opacity:.32}}
.pill .dot{animation:pillPulse 2.6s var(--ease) infinite}

/* Cards and content surfaces */
.card,.chart-card{
  padding:22px 24px;margin-top:12px;border-radius:8px;
  background:linear-gradient(145deg,rgba(52,54,60,.94),rgba(40,42,47,.96));
  border:1px solid rgba(203,211,220,.10);box-shadow:var(--sh1);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card::before,.chart-card::before{left:22px;right:22px;background:linear-gradient(90deg,transparent,rgba(203,211,220,.1),transparent)}
.card:hover,.chart-card:hover{border-color:rgba(157,184,168,.23);box-shadow:var(--sh2)}
.row{border-bottom:1px solid rgba(203,211,220,.09);padding:14px 3px;font-size:12px}
.row .k{color:var(--muted)}
.row .v{font-size:17px;color:var(--ink)}
.row-cur{background:rgba(157,184,168,.1)}
.hint{color:var(--muted);font-size:11px;line-height:1.7}
.chips{gap:8px}
.chip{
  padding:9px 15px;background:rgba(20,21,23,.25);border:1px solid rgba(203,211,220,.14);
  color:var(--ink2);font-size:11px;letter-spacing:.015em;border-radius:100px;
}
.chip:hover{border-color:rgba(157,184,168,.5);color:var(--ink);background:rgba(157,184,168,.07)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#242529;box-shadow:0 4px 14px rgba(157,184,168,.13)}
.chip .dim{color:inherit;opacity:.66}
.link-card{
  padding:13px 16px;background:rgba(157,184,168,.08);border:1px solid rgba(157,184,168,.18);
  border-radius:6px;color:var(--accent2);font-size:11px;letter-spacing:.025em;
}
.task{background:rgba(18,19,21,.24);border-color:rgba(203,211,220,.1);border-radius:6px;padding:13px}
.cycle-line{background:rgba(18,19,21,.24);border-color:rgba(203,211,220,.1);border-radius:6px;padding:14px}
.pbar{background:rgba(203,211,220,.10)}
.pbar i{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.alert{background:rgba(18,19,21,.24);border-color:rgba(203,211,220,.1);border-radius:6px;padding:14px}
.alert.ok{border-left-color:var(--green)}
.alert.warn{border-left-color:var(--orange)}
.alert.bad{border-left-color:var(--red)}
.health{gap:9px}
.chip-health{padding:13px 14px;border-radius:6px;background:rgba(18,19,21,.24);border-color:rgba(203,211,220,.1)}
.chip-health b{font-size:10px;letter-spacing:.1em}
.chip-health.ok span,.state.on{color:#a6c0a8}
.chip-health.bad span{color:#e29a92}

/* Controls — crafted hardware feel */
button{
  min-height:40px;padding:10px 16px;border-radius:5px;
  background:rgba(18,19,21,.28);border:1px solid rgba(203,211,220,.17);
  color:var(--ink2);font-size:11px;font-weight:700;letter-spacing:.035em;
  transition:all .25s var(--ease);
}
button:hover{border-color:rgba(157,184,168,.55);background:rgba(157,184,168,.08);color:var(--ink);transform:translateY(-1px)}
button.primary{
  background:var(--accent);border-color:var(--accent);color:#242529;
  box-shadow:0 5px 16px rgba(157,184,168,.13);
}
button.primary:hover{background:var(--accent2);border-color:var(--accent2);color:#242529;box-shadow:0 7px 20px rgba(157,184,168,.2)}
button.block{width:100%}
.seg button.active{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent)}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  background:#24262a;border:1px solid rgba(203,211,220,.14);border-radius:5px;
  padding:12px 14px;color:var(--ink);font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(157,184,168,.1)}
input[type=range]{background:#4b4b4b;accent-color:var(--accent)}
input[type=range]::-webkit-slider-thumb{background:var(--accent);border:2px solid #24262a}
input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #24262a}
label.check{color:var(--ink2);font-size:11px}
label.check input{accent-color:var(--accent)}
.field label{color:var(--accent2);font-size:10px;letter-spacing:.1em}
.kill{background:rgba(216,121,112,.12);border-color:var(--red);color:#f0c3be;box-shadow:none}
.kill:hover{background:rgba(216,121,112,.2);color:#fff}

/* Timelines and charts */
.tl{gap:4px;height:70px}
.tl-block{border:1px solid rgba(203,211,220,.08);border-radius:4px}
.tl-dawn{background:linear-gradient(180deg,rgba(157,184,168,.42),rgba(157,184,168,.13))}
.tl-day{background:linear-gradient(180deg,rgba(145,169,183,.72),rgba(157,184,168,.32))}
.tl-dusk{background:linear-gradient(180deg,rgba(157,184,168,.28),rgba(157,184,168,.08))}
.tl-night{background:#222429}
.chart-card canvas{height:220px}
.legend{color:var(--muted);font-size:10px}
.legend i{border-radius:2px}

/* Journal, thumbnails, overlay */
.task-add{gap:9px}
.jr-thumb{border-radius:5px;border-color:var(--line2)}
.lightbox{background:rgba(19,20,22,.96)}
.lightbox img{border-color:var(--line2);box-shadow:var(--sh3)}
.v3d-open{color:var(--accent2);border-color:rgba(157,184,168,.28);background:rgba(157,184,168,.08)}
.v3d-open:hover{background:var(--accent);color:#242529;border-color:var(--accent)}
.viewer3d{background:radial-gradient(circle at 50% 38%,#414047 0,#25272b 46%,#1d1f23 100%)}
.v3d-bar,.v3d-controls{background:rgba(32,34,38,.9);border-color:var(--line)}
.v3d-live{color:var(--accent2)}
.v3d-close{background:var(--bg3);border-color:var(--line2)}
.v3d-info{background:rgba(32,34,38,.88);border-color:var(--line2)}
.v3d-row button.active{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent)}

/* Navigation — desktop rail becomes a proper product sidebar */
nav#tabbar{
  position:fixed;z-index:40;top:0;bottom:0;left:0;right:auto;width:var(--sidebar-w);height:auto;
  padding:112px 16px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;
  background:rgba(35,37,41,.96);border:0;border-right:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
nav#tabbar::before{
  content:"LUXBOX";position:absolute;top:34px;left:25px;
  color:var(--ink);font:800 12px var(--display);letter-spacing:.1em;
}
nav#tabbar::after{
  content:"SMART ENVIRONMENT";position:absolute;top:57px;left:25px;
  color:var(--accent);font:700 10px var(--font);letter-spacing:.1em;
}
nav#tabbar button{
  position:relative;width:100%;max-width:none;height:48px;min-height:48px;flex:0 0 48px;
  flex-direction:row;justify-content:flex-start;gap:13px;padding:0 14px;
  border:1px solid transparent;border-radius:5px;background:transparent;
  color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
}
nav#tabbar button .ic{width:20px;font-size:15px;line-height:1;filter:grayscale(1);opacity:.72}
nav#tabbar button:hover{background:rgba(203,211,220,.055);color:var(--ink);transform:translateX(2px)}
nav#tabbar button.active{
  color:var(--accent2);background:rgba(157,184,168,.1);
  border-color:rgba(157,184,168,.15);
}
nav#tabbar button.active .ic{filter:none;opacity:1}
nav#tabbar button.active::before{
  content:"";position:absolute;top:9px;bottom:9px;left:-17px;width:2px;height:auto;
  transform:none;border-radius:2px;background:var(--accent);
}
main{margin-left:var(--sidebar-w);padding:calc(var(--header-h) + 26px) 42px 56px}
header{position:fixed;top:0;left:var(--sidebar-w);right:0;z-index:30}

/* Desktop hero composition */
@media (min-width:760px){
  .hero{grid-template-columns:minmax(340px,1.12fr) minmax(300px,.88fr);column-gap:28px;row-gap:0;align-items:start}
  .hero-title{grid-column:1/-1}
  .box-scene{grid-row:2 / 6;height:360px;margin:0}
  .hero-top{margin-top:12px}
  .hero .big{font-size:clamp(52px,4vw,70px)}
  .metrics{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  main{padding-left:56px;padding-right:56px}
  .hero{padding:32px 34px}
  .box-scene{height:410px}
  .hero .big{font-size:76px}
  .metric{padding:18px}
  .metric .v{font-size:29px}
}

/* Tablet and mobile: compact header + bottom navigation */
@media (max-width:759px){
  :root{--header-h:64px}
  header{position:sticky;left:0;right:0;height:var(--header-h);padding:0 16px}
  .logo img{height:32px}
  .head-right{gap:8px}
  .freshness{max-width:120px;font-size:10px}
  main{margin:0;padding:18px 16px calc(92px + env(safe-area-inset-bottom))}
  nav#tabbar{
    top:auto;bottom:0;left:0;right:0;width:100%;height:72px;
    flex-direction:row;align-items:center;justify-content:space-around;gap:2px;
    padding:7px 5px calc(7px + env(safe-area-inset-bottom));
    border:0;border-top:1px solid var(--line);
    background:rgba(35,37,41,.96);
  }
  nav#tabbar::before,nav#tabbar::after{display:none}
  nav#tabbar button{
    width:auto;max-width:none;min-width:0;flex:1 1 0;height:54px;min-height:54px;
    padding:4px 1px;flex-direction:column;justify-content:center;gap:4px;
    border-radius:5px;font-size:10px;letter-spacing:.015em;
  }
  nav#tabbar button .ic{width:auto;font-size:17px}
  nav#tabbar button.active::before{
    top:-7px;bottom:auto;left:50%;width:20px;height:2px;transform:translateX(-50%);
  }
  .hero{display:block;padding:20px 17px}
  .box-scene{height:260px;min-height:240px;margin:14px 0}
  .hero-top{margin-top:12px}
  .hero .big{font-size:54px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{padding:12px}
  .metric .v{font-size:22px}
  .sec-label{margin-top:27px}
  .card,.chart-card{padding:17px}
  .health{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:390px){
  main{padding-left:12px;padding-right:12px}
  header{padding:0 12px}
  .freshness{max-width:120px}
  .pill{padding:5px 9px;font-size:10px}
  .hero .big{font-size:48px}
  .box-scene{height:225px}
  nav#tabbar button{font-size:10px}
  nav#tabbar button .ic{font-size:15px}
  .chip{padding:8px 11px;font-size:10px}
}
@media (max-height:520px) and (min-width:760px){
  .box-scene{height:240px}
  .hero .big{font-size:48px}
}
@media print{
  nav#tabbar,header .head-right{display:none!important}
  header{position:static}
  main{margin:0;padding:10px}
}

/* Status colors are semantic, not brand colors. */
.pill.live .dot,.chip-health.ok span{background:var(--green)}
.pill.err .dot{background:var(--red)}


/* =========================================================
   LUXBOX APP — SCREEN COMPOSITION PASS
   Distinct visual rhythm for each functional area.
   ========================================================= */

/* Section headings become editorial dividers */
.sec-label{
  display:flex;align-items:center;gap:13px;
  margin:38px 2px 14px;padding-bottom:10px;
  border-bottom:1px solid rgba(203,211,220,.09);
}
.sec-label::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(157,184,168,.22),transparent);
}
.sec-label:first-child{margin-top:4px}

/* Home: keep the 3D model as the visual anchor */
#screen-home .hero{
  position:relative;isolation:isolate;overflow:hidden;
}
#screen-home .hero::after{
  content:"LUXBOX / CONTROL SYSTEM";
  position:absolute;right:18px;bottom:14px;top:auto;z-index:-1;
  color:rgba(203,211,220,.05);font:700 clamp(12px,1.8vw,20px) var(--display);
  letter-spacing:.08em;white-space:nowrap;pointer-events:none;
}
#screen-home .box-scene{
  position:relative;box-shadow:inset 0 0 55px rgba(0,0,0,.18);
}
#screen-home .box-hint{
  position:absolute;bottom:12px;left:14px;
  padding:6px 9px;border:1px solid rgba(203,211,220,.13);
  background:rgba(32,34,38,.76);border-radius:4px;
}
#screen-home .hero-top{
  padding:15px 0 13px;border-bottom:1px solid var(--line);
}
#screen-home .kpi-strip{margin-top:14px}
#screen-home .metrics .metric:nth-child(1) .v{color:#B8C9D2}
#screen-home .metrics .metric:nth-child(2) .v{color:#a9c0c9}
#screen-home .metrics .metric:nth-child(3) .v{color:#B8C9D2}
#screen-home .metrics .metric:nth-child(4) .v{color:#b5c4b2}
#screen-home #alerts{display:grid;gap:9px}

/* Climate: analytical canvas */
#screen-climate .hero{
  background:
    radial-gradient(ellipse at 90% 0%,rgba(142,168,183,.11),transparent 55%),
    linear-gradient(145deg,#30343a,#272a2f);
}
#screen-climate .hero-title::before{background:#8ea4bd}
#screen-climate .metrics{gap:9px}
#screen-climate .metric{
  position:relative;min-height:104px;justify-content:space-between;
  background:rgba(15,18,21,.27);
}
#screen-climate .metric .v{font-size:clamp(23px,3vw,32px)}
#screen-climate .metric:nth-child(1) .v{color:#b7cfc0}
#screen-climate .metric:nth-child(2) .v{color:#b7cfc0}
#screen-climate .metric:nth-child(3) .v{color:#8ea4bd}
#screen-climate .chart-card{
  padding:22px 22px 18px;
  background:linear-gradient(155deg,#292d32,#22252a);
}
#screen-climate #chart{
  display:block;width:100%;height:260px;margin:18px 0 8px;
}
#screen-climate .legend{
  display:flex;flex-wrap:wrap;gap:13px 20px;padding:12px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
#screen-climate .legend span{display:inline-flex;align-items:center;gap:7px}
#screen-climate .legend i{width:16px;height:3px;border-radius:3px}
#screen-climate .seg{
  display:inline-flex;gap:4px;padding:4px;
  background:rgba(10,12,14,.3);border:1px solid var(--line);border-radius:6px;
}
#screen-climate .seg button{min-height:34px;padding:7px 13px;border:0;background:transparent}
#screen-climate .seg button.active{background:var(--accent-dim);color:var(--accent2);border:1px solid rgba(157,184,168,.22)}

/* Devices: equipment control surfaces */
#screen-devices .sec-label:first-child{margin-top:4px}
#screen-devices .card{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(53,55,61,.98),rgba(38,40,45,.98));
}
#screen-devices .card::after{
  content:"";position:absolute;right:-38px;top:-52px;width:150px;height:150px;
  border:1px solid rgba(157,184,168,.07);border-radius:50%;
  box-shadow:0 0 0 18px rgba(157,184,168,.025),0 0 0 38px rgba(157,184,168,.018);
  pointer-events:none;
}
#screen-devices .row{position:relative;z-index:1}
#screen-devices .big.num{font-size:42px;color:var(--accent2);letter-spacing:-.06em}
#screen-devices input[type=range]{position:relative;z-index:1;width:100%;height:5px;margin:19px 0 12px}
#screen-devices .chips{position:relative;z-index:1}
#screen-devices #health-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}

/* Safety: clear severity hierarchy, never decorative green overload */
#screen-safety .banner{
  padding:17px 20px;display:flex;align-items:center;gap:11px;
  font-size:13px;letter-spacing:.02em;
}
#screen-safety .banner .ic{font-size:18px}
#screen-safety .card:has(#kill-btn){
  border-color:rgba(216,121,112,.28);
  background:linear-gradient(145deg,rgba(91,48,47,.2),rgba(40,40,44,.98));
}
#screen-safety #kill-btn{
  min-height:54px;font-size:11px;letter-spacing:.1em;
  background:rgba(125,48,47,.24);border-color:rgba(216,121,112,.48);
  color:#efb0a9;
}
#screen-safety #kill-btn:hover{background:rgba(155,55,50,.34);border-color:#e28b83}
#screen-safety #safety-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
#screen-safety .chip-health{
  min-height:78px;display:flex;flex-direction:column;justify-content:center;gap:7px;
}
#screen-safety #event-log{display:grid;gap:8px}

/* Water: calculation workspace with strong input/output hierarchy */
#screen-water .card{
  background:linear-gradient(145deg,#303238,#26282d);
}
#screen-water #nu-out{
  padding:13px 15px;border:1px solid rgba(157,184,168,.2);
  border-radius:6px;background:rgba(157,184,168,.065);
}
#screen-water #nu-out .row .v{color:var(--accent2)}
#screen-water #w-tank,#screen-water #w-mix{
  padding:14px;border-radius:6px;background:rgba(15,17,19,.25);
  border:1px solid var(--line);
}
#screen-water .field{margin:14px 0}
#screen-water select,#screen-water input{width:100%}
#screen-water #nu-fert-detail{display:grid;gap:8px}
#screen-water #nu-sched{overflow-x:auto}

/* Journal: readable timeline entries and photo gallery */
#screen-journal .card:first-of-type{
  background:linear-gradient(145deg,#303238,#26282d);
}
#screen-journal #jr-list{display:grid;gap:11px;margin-top:16px}
#screen-journal #jr-filter{margin:12px 0}
#screen-journal .jr-item,#screen-journal .journal-entry{
  padding:17px 18px;border-radius:7px;
  background:linear-gradient(145deg,#303238,#26282d);
  border:1px solid var(--line);
}
#screen-journal .jr-photos{gap:9px}
#screen-journal .jr-thumb{width:88px;height:88px}

/* Settings: group controls into calmer, utilitarian panels */
#screen-settings .card{max-width:980px}
#screen-settings .field{margin:15px 0}
#screen-settings .field input{width:100%}
#screen-settings .sec-label{margin-top:34px}
#screen-settings #s-version{font-family:var(--display);font-size:13px;color:var(--accent2);letter-spacing:.08em}

/* Consistent motion, reduced-motion respect */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Smaller tablet and mobile composition */
@media(max-width:759px){
  #screen-climate .chart-card{padding:16px}
  #screen-climate #chart{height:220px}
  #screen-devices #health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #screen-safety #safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #screen-home .hero::after{right:12px;bottom:10px;top:auto;font-size:11px}
  #screen-home .hero-top{align-items:flex-end}
  #screen-home .hero .big{font-size:49px}
  #screen-journal .jr-thumb{width:72px;height:72px}
}
@media(max-width:390px){
  #screen-safety #safety-grid{grid-template-columns:1fr 1fr}
  #screen-climate .metric{min-height:88px}
  #screen-climate .seg button{padding:6px 9px;font-size:10px}
}


/* =========================================================
   Product visualization pass — reservoir and hardware status
   ========================================================= */
.tank-visual{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:14px;padding:17px 18px 15px;margin:2px 0 14px;
  border:1px solid rgba(142,168,183,.2);border-radius:7px;overflow:hidden;
  background:
    radial-gradient(ellipse at 10% 50%,rgba(142,168,183,.1),transparent 55%),
    linear-gradient(145deg,rgba(15,19,23,.48),rgba(28,31,35,.72));
}
.tank-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background:linear-gradient(115deg,transparent 20%,rgba(203,211,220,.045) 50%,transparent 72%);
}
.tank-visual-head,.tank-visual-foot{display:flex;flex-direction:column;gap:5px}
.tank-visual-head span,.tank-visual-foot span{
  color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;
}
.tank-visual-head b{font:500 30px var(--mono);letter-spacing:-.06em;color:var(--accent2)}
.tank-visual-foot{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}
.tank-visual-foot b{font:500 13px var(--mono);color:var(--ink)}
.tank-vessel{
  position:relative;grid-column:2;grid-row:1;width:76px;height:112px;
  border:2px solid rgba(190,204,207,.48);border-top:3px solid rgba(215,224,220,.56);
  border-radius:8px 8px 13px 13px;overflow:hidden;
  background:linear-gradient(90deg,rgba(142,168,183,.09),rgba(203,211,220,.045) 48%,rgba(142,168,183,.12));
  box-shadow:inset 7px 0 12px rgba(0,0,0,.16),0 8px 20px rgba(0,0,0,.2);
}
.tank-vessel::before{
  content:"";position:absolute;left:8px;right:8px;top:0;height:5px;
  border-radius:0 0 4px 4px;background:rgba(203,211,220,.18);z-index:3;
}
.tank-liquid{
  position:absolute;left:2px;right:2px;bottom:2px;height:var(--tank-level);
  min-height:2px;border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,rgba(79,129,143,.78),rgba(111,164,172,.68) 45%,rgba(142,168,183,.82));
  box-shadow:0 -5px 18px rgba(111,164,172,.13);
  transition:height .7s cubic-bezier(.2,.7,.3,1);
}
.tank-liquid::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:rgba(195,224,220,.65);box-shadow:0 0 9px rgba(142,190,190,.35);
}
.tank-gloss{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,rgba(255,255,255,.11),transparent 32%,transparent 68%,rgba(255,255,255,.055));pointer-events:none}
.tank-mark{
  position:absolute;right:4px;z-index:4;color:rgba(145,169,183,.72);
  font:500 10px var(--mono);text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.tank-mark-75{top:25%}.tank-mark-50{top:50%}.tank-mark-25{top:75%}
#screen-water #w-tank .row{margin-top:0}
#screen-water #w-mix{
  background:
    radial-gradient(ellipse at 90% 0%,rgba(157,184,168,.08),transparent 58%),
    rgba(15,17,19,.25);
}
#screen-water #w-mix .row:last-child .v{color:var(--accent2)}
#screen-water .alert.ok{
  background:rgba(127,161,138,.09);
  border-color:rgba(127,161,138,.2);
}
#screen-water .alert.ok .ic{font-size:19px}
#screen-water #nu-fert .chip{white-space:normal;line-height:1.5}
#screen-water #nu-fert .chip .dim{display:block;font:500 10px var(--mono);margin-top:2px}
#screen-water #nu-out .row:first-child{
  margin:0 -4px 6px;padding:13px 8px;
  background:rgba(157,184,168,.075);border-radius:5px;
}
#screen-water #nu-out .row:first-child .v{font-size:23px;color:var(--accent2)}
#screen-water #w-plan .row{padding-top:16px;padding-bottom:16px}

/* Hardware timelines: stronger separation between phases */
#screen-devices .tl{
  position:relative;height:76px;padding:5px;gap:3px;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(13,15,17,.28);
}
#screen-devices .tl-block{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-width:0;padding:7px 5px 5px;overflow:hidden;
}
#screen-devices .tl-name{font-size:10px;letter-spacing:.04em}
#screen-devices .tl-lvl{font:500 10px var(--mono);opacity:.8}
#screen-devices .tl-time{font:500 10px var(--mono);opacity:.65}
#screen-devices .tl-block:not(.tl-night)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(145,169,183,.35)
}
#screen-devices #d-light-val{font:500 40px var(--mono);letter-spacing:-.06em;color:var(--accent2)}
#screen-devices #d-light-val small{font:700 10px var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-left:8px}
#screen-devices #d-fan-range{accent-color:var(--blue)}
#screen-devices #d-fan-on{color:var(--blue)}
#screen-devices #d-pump .state.on{color:var(--green2)}
#screen-devices .health .chip-health{min-height:82px}
@media(max-width:759px){
  .tank-visual{padding:14px}
  .tank-vessel{width:66px;height:100px}
  .tank-visual-head b{font-size:26px}
  #screen-devices .tl{height:66px}
  #screen-devices .tl-name{font-size:10px}
  #screen-devices .tl-time{font-size:10px}
}


/* Twin 20 L reservoirs — only the working tank is bound to current telemetry */
.tank-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 12px 14px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(145deg,rgba(15,19,23,.48),rgba(28,31,35,.72))}
.tank-unit{display:flex;align-items:center;flex-direction:column;min-width:0;text-align:center;gap:5px}
.tank-unit .tank-vessel{grid-column:auto;grid-row:auto;width:68px;height:104px;margin-bottom:5px}
.tank-unit .tank-unit-name{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.tank-unit-value{font:500 24px var(--mono);color:var(--accent2);letter-spacing:-.05em}
.tank-unit-volume{font:500 11px var(--mono);color:var(--ink2)}
.tank-unit-state{min-height:24px;max-width:155px;font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.tank-unit.is-pending .tank-vessel{border-style:dashed;border-color:rgba(203,211,220,.22);background:rgba(142,168,183,.025)}
.tank-reserve-outline{position:absolute;inset:2px;border:1px dashed rgba(142,168,183,.22);border-radius:5px}
.tank-unit.is-pending .tank-unit-value{color:var(--muted)}
.tank-pair-total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 2px 2px}
.tank-pair-total span{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted)}
.tank-pair-total b{font:500 16px var(--mono);color:var(--ink)}
@media(max-width:390px){
 .tank-pair{gap:7px;padding:13px 8px}
 .tank-unit .tank-vessel{width:58px;height:92px}
 .tank-unit-state{font-size:10px}
}

/* v3.1: глобальная защита от горизонтального переполнения */
html,body{overflow-x:clip}


/* ============================================================
   LUXBOX · VISUAL FINISH / MOBILE-FIRST PASS
   Presentation only: preserve existing IDs, controls and behavior.
   ============================================================ */
/* :root слит в design-system.css (v4.46) */
html{background:var(--bg);scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  color:var(--ink);
  background:
    radial-gradient(850px 520px at 82% -12%,rgba(145,169,183,.095),transparent 68%),
    radial-gradient(700px 520px at -15% 68%,rgba(113,137,157,.075),transparent 72%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
body::before{
  opacity:.12;
  background-size:52px 52px;
}
header{
  background:rgba(17,19,23,.88);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.logo img{height:36px;max-width:140px;object-fit:contain}
.pill{font-weight:750;letter-spacing:.09em}
main{padding-top:28px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.screen{animation:luxReveal .34s cubic-bezier(.2,.7,.25,1)}
@keyframes luxReveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.hero{
  position:relative;overflow:hidden;
  border:1px solid rgba(145,169,183,.17);
  border-radius:20px;
  background:
    radial-gradient(ellipse at 22% 0%,rgba(145,169,183,.14),transparent 54%),
    linear-gradient(145deg,#25282c 0%,#1b1e22 58%,#171a1e 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.018) 50%,transparent 66%);
}
.hero-title{color:var(--accent2);letter-spacing:.1em}
.hero .big{color:#E6E9EC;text-shadow:0 5px 30px rgba(0,0,0,.28)}
.hero .unit{color:var(--accent2)}
.box-scene{
  border-radius:15px;
  background:radial-gradient(ellipse at 50% 40%,rgba(145,169,183,.10),transparent 68%);
}
.box-hint{color:var(--text-secondary)}
.metric,.kpi-strip{
  border-color:var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border-radius:13px;
}
.metric .k,.row .k{color:#9ca3a9}
.metric .v{color:#f0eee8}
.card,.chart-card{
  background:linear-gradient(145deg,rgba(31,35,40,.94),rgba(21,24,28,.96));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--sh1);
}
.sec-label{
  color:var(--accent2);
  font-size:10px;
  letter-spacing:.1em;
}
.sub-title{color:#B8C9D2}
button{
  min-height:42px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg,#292e34,#20252b);
  color:#e5e3dc;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
button:hover{border-color:rgba(145,169,183,.42);box-shadow:0 5px 18px rgba(0,0,0,.16)}
button.primary{
  color:#718996;
  background:linear-gradient(135deg,#B8C9D2,#B8C9D2);
  border-color:rgba(145,169,183,.58);
  box-shadow:0 8px 24px rgba(145,169,183,.16);
}
.chip{border-radius:999px}
.chip.active,.seg button.active{
  color:var(--accent2);
  background:rgba(145,169,183,.13);
  border-color:rgba(145,169,183,.4);
}
.banner{
  border-radius:13px;
  backdrop-filter:blur(10px);
}
.alert{border-radius:13px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  background:#14181d;border:1px solid var(--line2);border-radius:11px;
}
.viewer3d{
  background:radial-gradient(ellipse at 50% 30%,#292b2e 0,#15181c 58%,#090b0e 100%);
}
.v3d-bar,.v3d-controls{
  background:rgba(18,21,25,.94);
  border-color:var(--line2);
  backdrop-filter:blur(16px);
}
.v3d-mini,.v3d-row button,.v3d-close{
  border-radius:10px;
}
#tabbar{
  scrollbar-width:none;
}
#tabbar::-webkit-scrollbar{display:none}
#tabbar button{font-weight:750;letter-spacing:.035em}
#tabbar button.active{color:var(--accent2)}
#tabbar button.active::after{background:var(--accent)}
/* Desktop navigation remains a fixed rail; mobile becomes a swipeable dock. */
@media(min-width:761px){
  main{padding-top:34px;padding-bottom:56px}
  header{height:76px;min-height:76px}
  .hero{padding:30px 32px}
  .card,.chart-card{padding:22px}
  #tabbar{overflow:visible}
}
@media(max-width:760px){
  header{
    height:62px;min-height:62px;
    padding:0 16px;
  }
  .logo img{height:31px}
  .head-right{gap:9px}
  .freshness{font-size:10px;max-width:92px}
  main{padding:18px 13px calc(96px + env(safe-area-inset-bottom))}
  .hero{padding:18px 15px;border-radius:17px}
  .hero-title{font-size:10px}
  .box-scene{height:290px;min-height:250px}
  .hero .big{font-size:clamp(48px,14vw,62px)}
  .metrics{gap:8px}
  .metric{min-width:0;padding:13px 11px}
  .metric .k{font-size:10px;letter-spacing:.08em}
  .metric .v{font-size:21px}
  .card,.chart-card{padding:16px 14px;border-radius:14px}
  .sec-label{margin-top:26px;margin-bottom:11px}
  #tabbar{
    position:fixed;z-index:100;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto;height:68px;min-height:68px;
    display:flex;align-items:stretch;justify-content:flex-start;gap:5px;
    padding:6px 7px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    border:1px solid rgba(145,169,183,.17);
    border-radius:17px;
    background:rgba(20,23,27,.94);
    box-shadow:0 12px 38px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  #tabbar button{
    position:relative;flex:0 0 66px;width:66px;max-width:none;height:54px;min-height:54px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px 2px;border:1px solid transparent;border-radius:11px;
    background:transparent;color:#8e969d;
    font-size:10px;line-height:1.15;letter-spacing:0;
    scroll-snap-align:center;
  }
  #tabbar button .ic{display:flex;align-items:center;justify-content:center;width:23px;height:23px;font-size:19px}
  #tabbar button .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #tabbar button.active{
    color:var(--accent2);
    border-color:rgba(145,169,183,.18);
    background:linear-gradient(180deg,rgba(145,169,183,.16),rgba(145,169,183,.055));
    box-shadow:inset 0 1px rgba(255,255,255,.035);
  }
  #tabbar button.active::before{display:none}
  #tabbar button.active::after{
    content:"";position:absolute;bottom:2px;left:calc(50% - 9px);width:18px;height:2px;
    border-radius:2px;background:var(--accent2);
  }
  .eng-readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .eng-readout{padding:12px}
  .eng-readout .value{font-size:17px}
  .eng-equipment{grid-template-columns:1fr}
  .eng-canvas{border-radius:14px}
  .eng-scroll-hint{font-size:10px}
}
@media(max-width:390px){
  main{padding-left:10px;padding-right:10px}
  .box-scene{height:258px;min-height:230px}
  .hero{padding:16px 12px}
  .metric{padding:11px 9px}
  .metric .v{font-size:19px}
  #tabbar{left:7px;right:7px;gap:3px;padding:5px}
  #tabbar button{flex-basis:62px;width:62px}
}
@media(prefers-reduced-motion:reduce){
  .screen{animation:none}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* ============================================================
   LUXBOX · 3D STUDIO + ENGINEERING DETAIL PASS
   Visual-only refinement. Existing controls and data bindings stay intact.
   ============================================================ */

/* 3D viewer: turn the full-screen overlay into a calm product studio */
.viewer3d{
  background:
    radial-gradient(ellipse at 50% 36%,rgba(145,169,183,.13),transparent 42%),
    radial-gradient(ellipse at 50% 58%,#25282c 0,#171a1e 48%,#090b0e 100%);
}
.viewer3d::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 78%,transparent);
}
.v3d-bar{position:relative;z-index:2;min-height:66px;padding-left:20px;padding-right:20px}
.v3d-live{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2)}
.v3d-mini{min-height:36px;padding:7px 13px;color:var(--text-secondary)}
.v3d-mini.active{color:#718996;background:linear-gradient(135deg,#B8C9D2,#B8C9D2);border-color:#B8C9D2}
.v3d-close{width:40px;height:40px;border-radius:12px;background:#25292e;color:#e8e4dc}
.v3d-hint{
  z-index:1;top:80px;left:20px;padding:8px 12px;
  border-color:rgba(145,169,183,.16);background:rgba(17,19,22,.7);
  color:var(--text-secondary);font-size:10px;letter-spacing:.09em;
}
.v3d-info{
  z-index:1;top:80px;right:20px;width:min(290px,calc(100% - 40px));
  padding:16px 17px;border-radius:14px;
  border-color:rgba(145,169,183,.17);
  background:rgba(22,24,27,.82);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.v3d-info b{font-size:13px;letter-spacing:.035em;color:#E6E9EC}
.v3d-info p{font-size:10px;color:var(--text-secondary);line-height:1.6}
.v3d-acts button{border-radius:7px;background:#292c30;color:var(--text-secondary)}
.v3d-controls{
  position:relative;z-index:2;padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:rgba(15,17,20,.91);
  border-top:1px solid rgba(145,169,183,.14);
  box-shadow:0 -12px 35px rgba(0,0,0,.18);
}
.v3d-row{justify-content:flex-start;gap:7px;flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v3d-row::-webkit-scrollbar{display:none}
.v3d-row + .v3d-row{margin-top:7px}
.v3d-row button{
  flex:0 0 auto;min-height:37px;padding:8px 12px;border-radius:8px;
  background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09);
  color:var(--text-secondary);font-size:10px;letter-spacing:.035em;white-space:nowrap;
}
.v3d-row button.active{
  color:var(--accent2);background:rgba(145,169,183,.13);
  border-color:rgba(145,169,183,.42);box-shadow:inset 0 1px rgba(255,255,255,.035);
}
#v3d-stage{position:relative;z-index:0}
@media(min-width:761px){
  .v3d-bar{padding-left:30px;padding-right:30px}
  .v3d-controls{padding-left:30px;padding-right:30px}
  .v3d-row{justify-content:center}
}
@media(max-width:760px){
  .v3d-bar{gap:7px;padding-left:12px;padding-right:12px}
  .v3d-live{flex:1;min-width:0;font-size:10px;line-height:1.35}
  .v3d-mini{font-size:10px;padding:6px 9px}
  .v3d-hint{
    top:72px;left:12px;right:12px;width:max-content;max-width:calc(100% - 24px);
    font-size:10px;letter-spacing:.08em;
  }
  .v3d-info{
    top:auto;bottom:calc(178px + env(safe-area-inset-bottom));
    left:12px;right:12px;width:auto;max-height:112px;overflow:auto;
    padding:11px 13px;border-radius:12px;
  }
  .v3d-info b{font-size:11px}
  .v3d-info p{font-size:10px}
  .v3d-acts{margin-top:6px}
  .v3d-acts button{padding:5px 8px;font-size:10px}
  .v3d-controls{padding:8px 10px calc(9px + env(safe-area-inset-bottom))}
  .v3d-row button{min-height:35px;padding:7px 10px;font-size:10px}
}
@media(max-height:680px) and (max-width:760px){
  .v3d-info{display:none}
  .v3d-controls{padding-top:6px}
  .v3d-row + .v3d-row{margin-top:4px}
}

/* Engineering panel: clearer hierarchy and a product-grade telemetry surface */
#engineering-panel{padding-bottom:12px}
.engineering-head{align-items:flex-end;margin:8px 0 18px}
.engineering-kicker{font-size:10px;letter-spacing:.1em;color:var(--accent)}
.engineering-title{font-size:clamp(22px,3vw,30px);font-weight:650;letter-spacing:-.045em}
.engineering-sub{font-size:11px;color:var(--text-secondary);max-width:62ch}
.eng-mode{border-radius:7px;padding:8px 11px;font-size:10px}
.eng-canvas{
  position:relative;padding:14px;
  border:1px solid rgba(145,169,183,.14);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(145,169,183,.075),transparent 55%),
    linear-gradient(145deg,#20242a,#14181d);
  box-shadow:0 18px 44px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
}
.eng-svg{min-width:640px}
.eng-readouts{gap:10px;margin-top:12px}
.eng-readout{
  border-radius:12px;padding:15px 16px;
  border-color:var(--line);background:linear-gradient(145deg,#20252b,#171b20);
}
.eng-readout .label{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.eng-readout .value{font-size:21px;color:#E6E9EC}
.eng-readout .note{font-size:10px;color:#898f94}
.eng-equipment{gap:10px;margin-top:12px}
.eng-unit{
  border-radius:13px;padding:17px;
  border-color:rgba(145,169,183,.13);
  background:linear-gradient(145deg,#242930,#191e23);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.eng-unit h3{font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}
.eng-unit .capacity{font-size:10px;color:var(--accent2);letter-spacing:.08em}
.eng-unit .reading{font-size:28px;letter-spacing:-.05em}
.eng-meter{height:7px;background:rgba(255,255,255,.075)}
.eng-meter i{background:linear-gradient(90deg,#6f8fa0,#b7c9c0);box-shadow:0 0 12px rgba(157,184,168,.16)}
.eng-unit .source{font-size:10px;line-height:1.65;color:#969b9d}
.eng-note{
  border-left-color:var(--accent);border-radius:0 10px 10px 0;
  background:rgba(145,169,183,.065);color:var(--text-secondary);
}
@media(max-width:760px){
  .engineering-head{align-items:flex-start;gap:10px}
  .engineering-title{font-size:22px}
  .engineering-sub{font-size:10px}
  .eng-mode{flex:none;margin-top:3px}
  .eng-canvas{padding:8px}
  .eng-readout .value{font-size:18px}
  .eng-unit{padding:15px}
}


/* ============================================================
   LUXBOX · CLIMATE / HARDWARE / WATER EXPERIENCE
   Consistent premium surfaces; existing controls and IDs preserved.
   ============================================================ */
#screen-climate .hero,
#screen-devices .card,
#screen-water .card{
  position:relative;overflow:hidden;
}
#screen-climate .hero{
  border-color:rgba(142,164,189,.2);
  background:
    radial-gradient(ellipse at 88% 8%,rgba(142,164,189,.13),transparent 46%),
    linear-gradient(145deg,#252a30,#191e24 68%,#15191e);
}
#screen-climate .hero-title{
  display:flex;align-items:center;justify-content:space-between;
  color:#d4dce3;font-size:10px;letter-spacing:.1em;
}
#screen-climate .metrics{gap:9px}
#screen-climate .metric{
  position:relative;overflow:hidden;
  border:1px solid rgba(142,164,189,.13);
  background:linear-gradient(145deg,rgba(142,164,189,.075),rgba(255,255,255,.018));
}
#screen-climate .metric::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(142,164,189,.28),transparent);
}
#screen-climate .metric .v{font-size:clamp(20px,3vw,27px);letter-spacing:-.055em}
#screen-climate .sec-label{color:#b9c8d6}
#screen-climate .chart-card{
  border-color:rgba(142,164,189,.16);
  background:linear-gradient(145deg,#20262d,#171c22);
}
#screen-climate #chart-seg{
  display:inline-flex;gap:4px;padding:4px;
  border:1px solid rgba(142,164,189,.14);border-radius:10px;
  background:rgba(5,8,11,.28);
}
#screen-climate #chart-seg button{
  min-height:32px;padding:6px 11px;border-radius:7px;
  border-color:transparent;background:transparent;font-size:10px;color:#8e9aa5;
}
#screen-climate #chart-seg button.active{
  color:#e2e8ed;border-color:rgba(142,164,189,.2);
  background:rgba(142,164,189,.13);
}
#screen-climate .legend{gap:10px 15px}
#screen-climate .legend span{font-size:10px;color:#aeb6bd}
#screen-climate .legend i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 8px currentColor}
#screen-climate #vd-method .chip{min-height:38px}
#screen-climate #phase-windows{display:grid;gap:0}
#screen-climate #phase-windows > * + *{border-top:1px solid var(--line)}

/* Hardware: each subsystem reads like a dedicated instrument panel */
#screen-devices .sec-label{
  display:flex;align-items:center;gap:10px;
  color:#B8C9D2;
}
#screen-devices .sec-label::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(145,169,183,.22),transparent);
}
#screen-devices .card{
  border-color:rgba(145,169,183,.13);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.055),transparent 45%),
    linear-gradient(145deg,#22262b,#181c21);
}
#screen-devices .row{
  min-height:40px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
}
#screen-devices .row .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
#screen-devices .state{font-size:10px;letter-spacing:.1em}
#screen-devices input[type=range]{
  width:100%;margin:16px 0 9px;accent-color:var(--accent2);
}
#screen-devices .chips{gap:7px}
#screen-devices .chip{font-size:10px;padding:8px 12px}
#screen-devices .health{gap:9px}
#screen-devices .health .chip-health{
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}

/* Water workspace: dosage and tank operations get a clear hierarchy */
#screen-water .sec-label{
  display:flex;align-items:center;gap:10px;color:var(--accent2);
}
#screen-water .sec-label::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(145,169,183,.2),transparent);
}
#screen-water .card{
  border-color:rgba(145,169,183,.13);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.065),transparent 42%),
    linear-gradient(145deg,#22262b,#181c21);
}
#screen-water .field label{
  color:var(--text-secondary);font-size:10px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
}
#screen-water .field input,
#screen-water .field select{
  min-height:43px;border-radius:9px;
  background:rgba(8,11,14,.42);
  border-color:rgba(145,169,183,.13);
}
#screen-water .sub-title{
  margin:20px 0 10px;padding-bottom:8px;
  border-bottom:1px solid rgba(145,169,183,.1);
  color:#B8C9D2;font-size:10px;letter-spacing:.1em;
}
#screen-water .link-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding:13px 14px;border-radius:10px;
  border:1px solid rgba(145,169,183,.18);
  background:rgba(145,169,183,.065);
  color:#B8C9D2;font-size:10px;font-weight:700;
}
#screen-water #nu-out .row,
#screen-water #nu-sched .row,
#screen-water #nu-mix .row,
#screen-water #w-plan .row{
  padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.055);
}
#screen-water #nu-out .row:last-child,
#screen-water #nu-sched .row:last-child,
#screen-water #nu-mix .row:last-child,
#screen-water #w-plan .row:last-child{border-bottom:0}
#screen-water #nu-fert .chip{min-height:39px}
#screen-water #w-tank .tank-pair{margin-bottom:8px}
#screen-water #w-mix{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.025)}
#screen-water #mix-save{border-color:rgba(145,169,183,.24)}
#screen-water #mix-chips .chip{font-size:10px}
@media(max-width:760px){
  #screen-climate .hero{padding:17px 13px}
  #screen-climate .metrics{gap:7px}
  #screen-climate .metric{padding:12px 9px}
  #screen-climate .metric .v{font-size:19px}
  #screen-climate #chart-seg{max-width:100%}
  #screen-climate #chart-seg button{padding:6px 9px;font-size:10px}
  #screen-devices .card,#screen-water .card{padding:15px 13px}
  #screen-water .sub-title{margin-top:17px}
}


/* ============================================================
   LUXBOX HOME / SYSTEM OVERVIEW — premium control-room layer
   ============================================================ */
.home-systems{position:relative;margin:24px 0 30px;padding:clamp(16px,2.4vw,24px);overflow:hidden;border:1px solid rgba(145,169,183,.2);border-radius:24px;background:radial-gradient(ellipse at 8% 0%,rgba(145,169,183,.10),transparent 42%),linear-gradient(145deg,rgba(34,38,44,.98),rgba(17,20,24,.98));box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045)}
.home-systems:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 62%,rgba(255,255,255,.018) 62.2%,transparent 62.5%)}
.home-section-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.home-section-head h2{margin:4px 0 0;font:600 clamp(19px,2.3vw,25px)/1.2 var(--font);letter-spacing:-.045em;color:var(--ink)}
.home-eyebrow{font:500 10px/1.2 "Roboto Mono",monospace;letter-spacing:.1em;color:var(--gold);opacity:.88}
.home-live-mark{flex:none;padding:7px 10px;border:1px solid rgba(145,169,183,.24);border-radius:999px;color:#B8C9D2;background:rgba(145,169,183,.07);font:500 10px "Roboto Mono",monospace;letter-spacing:.08em}
.home-live-mark.is-live{color:#a9d1b8;border-color:rgba(130,190,150,.3);background:rgba(90,150,110,.09)}
.home-tanks{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.home-tank-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:auto 1fr;gap:12px;min-height:132px;padding:15px;border:1px solid rgba(255,255,255,.075);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.home-tank-top{grid-column:1;display:flex;flex-direction:column;gap:5px;align-self:start;color:var(--ink2);font-size:12px}
.home-tank-top b{font:600 21px "Roboto Mono",monospace;color:var(--ink);letter-spacing:-.06em}
.home-tank-top b small{font:500 10px var(--font);color:var(--muted)}
.home-tank-visual{grid-column:2;grid-row:1/3;position:relative;align-self:center;justify-self:end;width:56px;height:86px;overflow:hidden;border:1px solid rgba(154,190,198,.36);border-radius:9px 9px 12px 12px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 45%,rgba(255,255,255,.07));box-shadow:inset 4px 0 8px rgba(255,255,255,.025),0 8px 18px rgba(0,0,0,.2)}
.home-tank-visual:before{content:"";position:absolute;z-index:2;top:6px;left:7px;right:7px;height:2px;border-radius:3px;background:rgba(255,255,255,.2)}
.home-tank-liquid{position:absolute;bottom:0;left:0;right:0;min-height:0;background:linear-gradient(180deg,rgba(124,174,184,.58),rgba(64,111,126,.46));border-top:1px solid rgba(177,220,224,.5);transition:height .5s ease}
.home-tank-value{position:absolute;z-index:3;inset:0;display:grid;place-items:center;color:#f0f4f2;text-shadow:0 1px 7px #101519;font:600 13px "Roboto Mono",monospace}
.home-tank-bottom{grid-column:1;align-self:end;display:flex;flex-direction:column;gap:5px}
.home-tank-bottom strong{font:600 16px "Roboto Mono",monospace;color:var(--ink)}
.home-tank-bottom span{font:500 10px/1.4 "Roboto Mono",monospace;letter-spacing:.06em;color:var(--muted)}
.home-tank-card.no-reading .home-tank-visual{border-style:dashed;border-color:rgba(255,255,255,.17);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 5px,transparent 5px 10px)}
.home-tank-card.no-reading .home-tank-value{color:var(--muted)}
.home-system-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.home-system-card{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border:1px solid rgba(255,255,255,.065);border-radius:14px;background:rgba(255,255,255,.025)}
.home-system-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(145,169,183,.09);color:var(--gold);font-size:19px}
.home-system-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.home-system-copy>span{font-size:10px;color:var(--muted)}
.home-system-copy strong{overflow:hidden;color:var(--ink);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.home-system-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.home-state-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#68717b;box-shadow:0 0 0 4px rgba(104,113,123,.1)}
.home-state-dot.active{background:#a8c9b3;box-shadow:0 0 0 4px rgba(130,190,150,.1),0 0 12px rgba(130,190,150,.3)}
.home-state-dot.unknown{background:#8b929b;box-shadow:0 0 0 4px rgba(139,146,155,.09)}
@media(max-width:560px){
 .home-systems{margin:18px 0 24px;padding:15px;border-radius:19px}
 .home-tanks{gap:8px}
 .home-tank-card{grid-template-columns:minmax(0,1fr) 58px;min-height:124px;padding:11px;gap:7px}
 .home-tank-visual{width:46px;height:76px}
 .home-tank-top{font-size:10px}
 .home-tank-top b{font-size:18px}
 .home-tank-bottom strong{font-size:14px}
 .home-tank-bottom span{font-size:10px}
 .home-system-grid{gap:7px}
 .home-system-card{gap:8px;padding:10px 9px}
 .home-system-icon{width:29px;height:29px;font-size:16px}
 .home-system-copy strong{font-size:11px}
 .home-system-copy small{font-size:10px}
}
@media(max-width:360px){.home-system-grid{grid-template-columns:1fr}.home-tank-card{grid-template-columns:minmax(0,1fr) 48px}.home-tank-visual{width:40px}}


.water-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}

/* ============================================================
   LUXBOX ENGINEERING STUDIO · assembly tree + component inspector
   ============================================================ */
.v3d-brand{display:flex;flex-direction:column;gap:5px;min-width:0}
.v3d-brand>span,.studio-kicker{font:600 10px/1.2 "Roboto Mono",monospace;letter-spacing:.1em;color:#B8C9D2}
.v3d-brand .v3d-live{font-size:10px;color:#E6E9EC;letter-spacing:.09em}
.v3d-bar-actions{display:flex;align-items:center;gap:7px}
.v3d-panel-toggle{display:none;min-height:36px;padding:7px 10px;border:1px solid rgba(145,169,183,.18);border-radius:8px;background:#24282d;color:#B8C9D2;font-size:10px}
.v3d-workspace{position:relative;display:grid;grid-template-columns:246px minmax(0,1fr) 286px;gap:0;flex:1;min-height:0;overflow:hidden}
.studio-panel{position:relative;z-index:2;min-width:0;min-height:0;overflow:auto;background:linear-gradient(180deg,rgba(24,27,31,.98),rgba(15,18,22,.98));scrollbar-width:thin;scrollbar-color:rgba(145,169,183,.25) transparent}
.studio-tree-panel{border-right:1px solid rgba(145,169,183,.13);padding:17px 13px 20px}
.studio-inspector-panel{border-left:1px solid rgba(145,169,183,.13);padding:17px 14px 20px}
/* На десктопе пустой инспектор скрыт: место под 3D-сцену важнее заглушки */
@media(min-width:901px){ .studio-inspector-panel.is-empty{display:none} }
.studio-panel-head{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.studio-panel-head>strong{font-size:14px;font-weight:650;letter-spacing:-.025em;color:#E6E9EC}
.studio-panel-head>strong small{display:inline-grid;place-items:center;min-width:23px;height:20px;margin-left:5px;padding:0 5px;border:1px solid rgba(145,169,183,.2);border-radius:6px;color:#B8C9D2;font:600 10px "Roboto Mono",monospace}
.studio-panel-note{font-size:10px;line-height:1.5;color:#858b91}
.studio-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(0,0,0,.2);color:#B8C9D2}
.studio-search>span{font-size:19px}
.studio-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#E6E9EC;font:400 10px var(--font)}
.studio-search input::placeholder{color:#747b82}
.studio-filters{display:flex;gap:5px;overflow:auto;margin:10px 0 14px;padding-bottom:3px;scrollbar-width:none}
.studio-filters::-webkit-scrollbar{display:none}
.studio-filters button{flex:none;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.025);color:#92989d;font-size:10px}
.studio-filters button.active{border-color:rgba(145,169,183,.4);background:rgba(145,169,183,.1);color:#B8C9D2}
.studio-tree-group{margin:0 0 13px}
.studio-tree-group-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 6px;color:#B8C9D2;font:600 10px "Roboto Mono",monospace;letter-spacing:.1em}
.studio-tree-group-title span{color:#727a80}
.studio-tree-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:43px;padding:7px 8px;border:1px solid transparent;border-radius:7px;background:transparent;text-align:left;color:#c9c7c1}
.studio-tree-item:hover{background:rgba(255,255,255,.035)}
.studio-tree-item.is-selected{border-color:rgba(145,169,183,.27);background:linear-gradient(90deg,rgba(145,169,183,.13),rgba(145,169,183,.035));color:#E6E9EC}
.studio-tree-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.studio-tree-copy strong{overflow:hidden;font-size:10px;font-weight:600;line-height:1.35;text-overflow:ellipsis}
.studio-tree-copy small{color:#747d84;font-size:10px}
.studio-tree-chevron{flex:none;color:var(--muted);font-size:17px}
.studio-empty{padding:14px 10px;border:1px dashed rgba(255,255,255,.1);border-radius:9px;color:#858b91;font-size:10px;line-height:1.65}
.studio-viewport{position:relative;display:flex;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,rgba(145,169,183,.075),transparent 45%)}
.studio-viewport #v3d-stage{flex:1;width:100%;height:100%;min-height:0;display:block;touch-action:none}
.studio-viewport .v3d-hint{top:13px;left:14px;padding:7px 10px;font-size:10px;letter-spacing:.12em}
.studio-viewport-foot{position:absolute;left:15px;right:15px;bottom:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;color:rgba(145,169,183,.42);font:500 10px "Roboto Mono",monospace;letter-spacing:.09em}
.studio-inspector-panel .v3d-info{position:static;width:auto;margin:0 0 14px;padding:13px;border:1px solid rgba(145,169,183,.14);border-radius:10px;background:rgba(255,255,255,.025);box-shadow:none;backdrop-filter:none}
.studio-inspector-panel .v3d-info b{font-size:12px;color:#E6E9EC}
.studio-inspector-panel .v3d-info p{font-size:10px;color:#9ea3a6;line-height:1.6}
.studio-inspector-panel .v3d-acts{gap:5px}
.studio-inspector-panel .v3d-acts button{padding:6px 8px;border-radius:6px;font-size:10px}
.studio-properties{display:flex;flex-direction:column;gap:7px}
.studio-property{padding:10px 11px;border:1px solid rgba(255,255,255,.065);border-radius:8px;background:rgba(255,255,255,.025)}
.studio-property-copy{display:flex;flex-direction:column;gap:4px}
.studio-property-copy>span{color:#858d92;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.studio-property-copy>strong{color:#e3ded4;font:600 11px "Roboto Mono",monospace;overflow-wrap:anywhere}
.studio-property-copy>small{color:#727b81;font-size:10px;line-height:1.45}
.studio-runtime{display:flex;flex-direction:column;gap:7px;margin-top:5px;padding:13px;border:1px solid rgba(145,169,183,.19);border-radius:9px;background:linear-gradient(145deg,rgba(145,169,183,.075),rgba(255,255,255,.018))}
.studio-runtime>strong{color:#E6E9EC;font-size:10px}
.studio-runtime>small{color:#8e969b;font-size:10px;line-height:1.55}
.studio-runtime-value{color:#c5d9cd;font:600 19px "Roboto Mono",monospace;letter-spacing:-.04em}
.studio-runtime-value.is-unknown{color:#969da1;font-size:13px;letter-spacing:.04em}
@media(max-width:900px){
  .v3d-bar{position:relative;z-index:5}
  .v3d-panel-toggle{display:inline-flex;align-items:center;justify-content:center}
  .v3d-workspace{display:block;overflow:hidden}
  .studio-viewport{position:absolute;inset:0}
  .studio-tree-panel,.studio-inspector-panel{position:absolute;top:10px;bottom:10px;width:min(320px,86vw);max-height:none;z-index:3;border:1px solid rgba(145,169,183,.18);border-radius:12px;box-shadow:0 20px 55px rgba(0,0,0,.42);transition:transform .24s ease}
  .studio-tree-panel{left:10px;transform:translateX(calc(-100% - 18px))}
  .studio-inspector-panel{right:10px;transform:translateX(calc(100% + 18px))}
  .studio-tree-panel.is-open,.studio-inspector-panel.is-open{transform:translateX(0)}
  .studio-viewport .v3d-hint{top:12px;left:12px}
  .studio-viewport-foot{bottom:12px}
  .v3d-controls{position:relative;z-index:4}
  .v3d-row{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .v3d-row::-webkit-scrollbar{display:none}
  .v3d-row button{flex:none;white-space:nowrap}
}
@media(max-width:520px){
  .v3d-bar{gap:6px;padding-left:10px;padding-right:10px}
  .v3d-brand>span{font-size:10px}
  .v3d-brand .v3d-live{font-size:10px}
  .v3d-bar-actions{gap:4px}
  .v3d-panel-toggle{min-height:33px;padding:6px 7px;font-size:10px}
  .v3d-mini{min-height:33px;padding:6px 7px;font-size:10px}
  .v3d-close{width:34px;height:34px}
  .studio-tree-panel,.studio-inspector-panel{top:8px;bottom:8px;width:min(310px,88vw);padding:13px 11px}
  .v3d-controls{padding:7px 9px calc(8px + env(safe-area-inset-bottom))}
  .v3d-row button{min-height:34px;padding:7px 9px;font-size:10px}
  .studio-viewport-foot{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .studio-tree-panel,.studio-inspector-panel{transition:none}
}

.studio-tree-copy .studio-tree-id{color:#9c8a6b;font:500 10px "Roboto Mono",monospace;overflow-wrap:anywhere}


/* ============================================================
   LUXBOX · APP-WIDE DESIGN COHESION PASS 4.1
   Applies to every product screen; presentation only.
   Existing IDs, controls, telemetry and interaction logic remain intact.
   ============================================================ */

/* :root слит в design-system.css (v4.46) */

/* A calmer, wider application canvas */
body{
  background:
    radial-gradient(ellipse at 50% -24%,rgba(145,169,183,.075),transparent 48%),
    radial-gradient(ellipse at 100% 45%,rgba(112,132,146,.045),transparent 42%),
    var(--bg);
}
header{
  background:rgba(20,23,28,.88);
  border-bottom-color:rgba(145,169,183,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
main{max-width:1240px;padding-top:22px}
.screen{min-width:0}
.screen > .sec-label:first-child{margin-top:8px}

/* One consistent language for section dividers and surfaces */
.sec-label{
  display:flex;align-items:center;gap:12px;
  margin:27px 2px 11px;
  color:#B8C9D2;font-size:10px;letter-spacing:.1em;
}
.sec-label::after{
  content:"";height:1px;flex:1;min-width:14px;
  background:linear-gradient(90deg,rgba(145,169,183,.24),transparent);
}
.card,.hero,.chart-card{
  border-color:var(--line-soft);
  box-shadow:0 10px 28px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.025);
}
.card{
  border-radius:15px;
  background:linear-gradient(145deg,rgba(31,35,41,.98),rgba(22,25,30,.98));
}
.hero{
  border-radius:19px;
  background:
    radial-gradient(ellipse at 88% 0%,rgba(145,169,183,.075),transparent 40%),
    linear-gradient(145deg,#1b2026,#13171c 72%);
}
.metric,.kpi-strip{
  border-color:rgba(255,255,255,.075);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.metric .k{letter-spacing:.12em}
.metric .v{letter-spacing:-.045em}

/* Controls feel like a coherent piece of hardware */
button{
  min-height:38px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px;
}
input:not([type="range"]),select,textarea{
  border:1px solid rgba(255,255,255,.105);
  border-radius:10px;
  background:rgba(8,10,13,.34);
  color:var(--ink);
}
input:not([type="range"]):focus,select:focus,textarea:focus{
  border-color:rgba(145,169,183,.48);
  box-shadow:0 0 0 3px rgba(145,169,183,.08);
}
input[type="range"]{accent-color:var(--gold)}
.field label{
  display:block;margin-bottom:7px;
  color:var(--text-secondary);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.chip{min-height:35px}
.chip.active{
  border-color:rgba(145,169,183,.48);
  background:linear-gradient(145deg,rgba(145,169,183,.15),rgba(145,169,183,.07));
  color:#E6E9EC;
}
button.primary{
  background:linear-gradient(135deg,#B8C9D2,#B8C9D2);
  border-color:#B8C9D2;color:#171512;
  box-shadow:0 5px 16px rgba(145,169,183,.12);
}
button.primary:hover{background:linear-gradient(135deg,#B8C9D2,#B8C9D2);color:#171512}

/* HOME — strong dashboard hierarchy, restrained status color */
#screen-home .banner{border-radius:13px}
#screen-home .hero-top{align-items:center}
#screen-home .kpi-strip{border-radius:12px}
#screen-home .sec-label{margin-top:29px}
#screen-home #alerts{display:grid;gap:7px}
#screen-home .alert{border-radius:11px;background:rgba(255,255,255,.025)}

/* CLIMATE — instrument panel rather than a stack of generic cards */
#screen-climate .chart-card{
  padding:20px;border:1px solid var(--line-soft);border-radius:16px;
  background:linear-gradient(150deg,#1d2228,#15191e);
}
#screen-climate #chart-seg{
  width:max-content;max-width:100%;padding:4px;gap:3px;
  border:1px solid rgba(255,255,255,.07);border-radius:10px;
  background:rgba(0,0,0,.18);
}
#screen-climate #chart-seg button{border-radius:7px}
#screen-climate #chart-seg button.active{
  background:rgba(145,169,183,.14);border-color:rgba(145,169,183,.32);color:#B8C9D2;
}
#screen-climate .legend{gap:12px 18px;flex-wrap:wrap}
#screen-climate #phase-windows{overflow:hidden}

/* DEVICES — controls grouped as individual equipment consoles */
#screen-devices .card{
  border-radius:15px;
  background:linear-gradient(145deg,#20252b,#171b20);
}
#screen-devices .row{border-bottom-color:rgba(255,255,255,.065)}
#screen-devices input[type="range"]{height:6px}
#screen-devices .tl{border-radius:10px;overflow:hidden}

/* SAFETY — keep emergency actions unmistakably separate */
#screen-safety .banner{border-radius:13px}
#screen-safety .card{border-radius:14px}
#screen-safety .kill{
  min-height:52px;border:1px solid rgba(212,126,126,.42);
  border-radius:11px;background:linear-gradient(135deg,rgba(150,53,53,.30),rgba(82,32,34,.42));
  color:#f0b0ad;font-weight:800;letter-spacing:.035em;
}
#screen-safety .kill:hover{border-color:rgba(232,125,119,.7);background:rgba(150,53,53,.38)}

/* WATER — separate inputs, recipe output and schedule */
#screen-water .card{border-radius:15px}
#screen-water .sub-title{color:#B8C9D2;letter-spacing:.1em}
#screen-water #nu-out{
  border-radius:12px;border-color:rgba(145,169,183,.2);
  background:linear-gradient(145deg,rgba(145,169,183,.085),rgba(255,255,255,.015));
}
#screen-water #nu-sched{border-radius:10px}
#screen-water .link-card{border-radius:11px}

/* JOURNAL — writing surface and entries share a clear timeline language */
#screen-journal textarea{min-height:104px;padding:12px;resize:vertical}
#screen-journal #jr-list{display:grid;gap:10px;margin-top:13px}
#screen-journal .jr-item,#screen-journal .journal-entry{
  border:1px solid var(--line-soft);border-radius:13px;
  background:linear-gradient(145deg,#20252b,#171b20);
}
#screen-journal .jr-photos{display:flex;flex-wrap:wrap}
#screen-journal .jr-thumb{border-radius:9px;overflow:hidden}

/* SETTINGS — readable technical form, consistent with the rest of the app */
#screen-settings .card{
  border-radius:14px;
  background:linear-gradient(145deg,#1e2329,#171b20);
}
#screen-settings .sec-label{margin-top:30px}
#screen-settings .field{max-width:760px}
#screen-settings .hint{max-width:72ch}
#screen-settings .check{display:flex;align-items:flex-start;gap:9px;line-height:1.5}

/* ENGINEERING — match the shared surface and typography system */
#screen-engineering .engineering-head{margin-top:8px}
#screen-engineering .eng-canvas{border-radius:15px}
#screen-engineering .eng-readout,
#screen-engineering .eng-unit{border-radius:12px}
#screen-engineering .eng-readout{background:linear-gradient(145deg,#20252b,#171b20)}

/* Keep touch targets and reading comfort on phones */
@media(max-width:760px){
  main{padding:15px 14px calc(112px + env(safe-area-inset-bottom))}
  .screen > .sec-label:first-child{margin-top:5px}
  .sec-label{margin-top:23px}
  .card{padding:16px 14px}
  #screen-climate .chart-card{padding:15px 12px}
  #screen-climate .legend{gap:9px 12px}
  #screen-safety .kill{min-height:54px}
  #screen-journal textarea{min-height:112px}
}
@media(max-width:390px){
  main{padding-left:11px;padding-right:11px}
  .sec-label{font-size:10px;letter-spacing:.1em}
  .card{padding:14px 12px}
  #screen-climate .chart-card{padding:13px 10px}
  #screen-settings .field{margin:12px 0}
}
@media(prefers-reduced-motion:reduce){
  button{transition:none}
  button:not(:disabled):active{transform:none}
}


/* ============================================================
   LUXBOX · SCREEN DETAIL PASS 4.2
   Home dashboard, climate instruments and device consoles.
   Styling only: no telemetry, control or calculation changes.
   ============================================================ */

/* HOME — product dashboard */
#screen-home > .banner{
  display:flex;align-items:center;gap:10px;
  min-height:43px;padding:10px 14px;
  border:1px solid rgba(155,190,166,.17);
  background:linear-gradient(100deg,rgba(111,151,122,.11),rgba(255,255,255,.018));
  box-shadow:inset 3px 0 rgba(155,190,166,.55);
}
#screen-home > .banner.warn{box-shadow:inset 3px 0 #B8C9D2}
#screen-home > .banner.bad{box-shadow:inset 3px 0 #c77b76}
#screen-home > .hero{
  position:relative;overflow:hidden;
  padding:clamp(16px,2.5vw,25px);
  border-color:rgba(145,169,183,.17);
  background:
    radial-gradient(ellipse at 78% 12%,rgba(145,169,183,.11),transparent 38%),
    radial-gradient(ellipse at 4% 100%,rgba(111,133,151,.08),transparent 44%),
    linear-gradient(145deg,#20252b 0%,#171b20 72%,#14171b);
}
#screen-home > .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;
  background:linear-gradient(115deg,transparent 0 57%,rgba(255,255,255,.035) 57.2%,transparent 57.6%);
}
#screen-home > .hero > *{position:relative}
#screen-home .hero-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#B8C9D2;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
}
#screen-home .v3d-open{
  flex:none;min-height:34px;padding:7px 11px;
  border-color:rgba(145,169,183,.3);border-radius:8px;
  background:rgba(145,169,183,.08);color:#B8C9D2;
  font-size:10px;letter-spacing:.08em;
}
#screen-home .box-scene{
  position:relative;overflow:hidden;isolation:isolate;
  margin:13px -5px 8px;border:1px solid rgba(145,169,183,.12);
  border-radius:14px;
  background:
    radial-gradient(ellipse at 50% 72%,rgba(145,169,183,.10),transparent 54%),
    linear-gradient(180deg,rgba(7,9,12,.12),rgba(7,9,12,.38));
}
#screen-home .box-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,15,.12),transparent 24% 76%,rgba(10,12,15,.22));
}
#screen-home .box-hint{
  z-index:2;padding:6px 9px;border:1px solid rgba(255,255,255,.08);
  border-radius:7px;background:rgba(12,14,17,.68);
  color:var(--text-secondary);font:500 10px "Roboto Mono",monospace;letter-spacing:.07em;
}
#screen-home .hero-top{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;padding:13px 0 15px;border-top:1px solid rgba(255,255,255,.07);
}
#screen-home .hero-top .big{
  color:#E6E9EC;font-size:clamp(38px,6vw,54px);
  line-height:.95;letter-spacing:-.075em;
}
#screen-home .hero-sub .unit{color:#B8C9D2;font-size:10px;letter-spacing:.09em}
#screen-home .hero-sub .dim{font-size:10px;line-height:1.6}
#screen-home .hero-top .badge{
  align-self:center;padding:7px 9px;border-radius:8px;
  font-size:10px;letter-spacing:.04em;
}
#screen-home .kpi-strip{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border:1px solid rgba(145,169,183,.13);
  background:linear-gradient(100deg,rgba(145,169,183,.075),rgba(255,255,255,.018));
}
#screen-home .kpi-strip .kpi{font-size:21px;color:#B8C9D2}
#screen-home .kpi-strip .kpi-label{font-size:10px;line-height:1.45;color:var(--text-secondary)}
#screen-home .hero .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
#screen-home .hero .metric{
  min-width:0;padding:11px 10px;border-radius:11px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.022);
}
#screen-home .hero .metric .k{font-size:10px;letter-spacing:.1em}
#screen-home .hero .metric .v{margin-top:6px;font-size:clamp(15px,2vw,21px)}
#screen-home .home-systems{
  margin-top:20px;border-radius:18px;
  border-color:rgba(145,169,183,.16);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.075),transparent 42%),
    linear-gradient(145deg,#1c2127,#15191e);
}
#screen-home .home-tank-card{
  border-color:rgba(255,255,255,.085);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
#screen-home .home-tank-visual{
  border-color:rgba(139,176,190,.32);
  box-shadow:inset 0 0 14px rgba(139,176,190,.05),0 8px 18px rgba(0,0,0,.24);
}
#screen-home .home-tank-liquid{
  background:linear-gradient(180deg,rgba(142,183,192,.7),rgba(65,112,130,.62));
}
#screen-home .home-system-card{
  min-height:72px;border-color:rgba(255,255,255,.065);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
#screen-home .home-system-icon{border:1px solid rgba(145,169,183,.12)}
#screen-home #stage-chips,#screen-home #mode-chips{gap:7px}
#screen-home #stage-chips .chip{flex:1 1 118px;justify-content:center}
#screen-home #stage-chips .chip .dim{margin-left:4px;font-size:10px}
#screen-home #mode-chips .chip{flex:1 1 90px;justify-content:center}
#screen-home #stage-hint{padding:10px 2px 4px;line-height:1.6}
#screen-home #cycle-line .cycle-line{
  margin-top:8px;border-radius:11px;
  border-color:rgba(145,169,183,.12);
  background:rgba(0,0,0,.13);
}
#screen-home .pbar{height:5px;overflow:hidden;border-radius:99px}
#screen-home .pbar i{border-radius:99px}
#screen-home #tasks-list{display:grid;gap:7px}
#screen-home #tasks-list .task{
  border-radius:10px;background:rgba(255,255,255,.025);
}
#screen-home .task-add{
  display:grid;grid-template-columns:minmax(0,1fr) 72px 42px;
  gap:7px;margin-top:12px;
}
#screen-home .task-add input{min-width:0}
#screen-home .task-add button{min-width:42px;padding:8px}
#screen-home #alerts .alert{
  border-radius:10px;border-color:rgba(255,255,255,.065);
  background:linear-gradient(100deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}

/* CLIMATE — visual hierarchy for the live instrument readings */
#screen-climate > .hero{
  border-color:rgba(142,164,189,.17);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(142,164,189,.12),transparent 44%),
    linear-gradient(145deg,#20262d,#151a20);
}
#screen-climate .hero-title{
  margin-bottom:16px;color:#c0cbd4;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
#screen-climate .metrics{gap:8px}
#screen-climate .metric{
  min-width:0;padding:13px 11px;border-radius:12px;
  border-color:rgba(142,164,189,.12);
  background:linear-gradient(145deg,rgba(142,164,189,.065),rgba(255,255,255,.014));
}
#screen-climate .metric .k{font-size:10px;letter-spacing:.12em}
#screen-climate .metric .v{margin-top:7px;color:#e1e6e9;font-size:clamp(18px,3vw,27px)}
#screen-climate .chart-card{box-shadow:0 14px 34px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025)}
#screen-climate #chart{display:block;width:100%;max-width:100%}
#screen-climate .legend span{display:inline-flex;align-items:center;gap:7px}
#screen-climate .legend i{flex:none}

/* DEVICES — controls read as dedicated hardware modules */
#screen-devices .card{
  position:relative;overflow:hidden;
  border-color:rgba(145,169,183,.12);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.045),transparent 44%),
    linear-gradient(145deg,#20252b,#171b20);
}
#screen-devices .card > .row{
  min-height:38px;padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#screen-devices .row .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
#screen-devices .row .v{font-size:11px}
#screen-devices .big.num{color:#E6E9EC;font-size:clamp(25px,4vw,34px);letter-spacing:-.06em}
#screen-devices input[type="range"]{
  width:100%;margin:17px 0 8px;cursor:pointer;
  accent-color:#B8C9D2;
}
#screen-devices .chips{gap:7px}
#screen-devices .chip{min-height:36px}
#screen-devices .health{gap:8px}
#screen-devices .chip-health{
  border-radius:11px;border-color:rgba(255,255,255,.07);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
#screen-devices .tl{border:1px solid rgba(255,255,255,.07)}

/* Responsive dashboard: no squeezed four-column readouts on narrow phones */
@media(max-width:680px){
  #screen-home .hero .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #screen-home .hero-top{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  #screen-home .hero-top .badge{grid-column:1/-1;justify-self:start}
  #screen-home .home-tanks{grid-template-columns:repeat(2,minmax(0,1fr))}
  #screen-home #stage-chips .chip{flex:1 1 42%}
  #screen-home .home-section-head h2{font-size:19px}
  #screen-climate .metric{padding:11px 9px}
}
@media(max-width:390px){
  #screen-home .hero{padding:14px 11px}
  #screen-home .hero .metrics{gap:6px}
  #screen-home .hero .metric{padding:10px 8px}
  #screen-home .hero-top .big{font-size:39px}
  #screen-home .home-tanks{gap:6px}
  #screen-home .home-tank-card{grid-template-columns:minmax(0,1fr) 42px;padding:9px;gap:5px}
  #screen-home .home-tank-visual{width:37px;height:70px}
  #screen-home .home-tank-bottom span{font-size:10px}
  #screen-home .task-add{grid-template-columns:minmax(0,1fr) 58px 38px}
  #screen-climate .metrics{gap:6px}
  #screen-climate .metric{padding:10px 8px}
}


/* ============================================================
   LUXBOX · SCREEN DETAIL PASS 4.3
   Engineering, safety, water, journal and settings.
   Presentation-only layer. No controls or data logic changed.
   ============================================================ */

/* ENGINEERING — make the embedded engineering workspace feel intentional */
#screen-engineering{
  min-width:0;
  padding-top:2px;
}
#screen-engineering #engineering-panel{
  min-width:0;
  border-radius:18px;
}
#screen-engineering .engineering-head,
#screen-engineering .eng-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
#screen-engineering .eng-readout,
#screen-engineering .eng-unit{
  border:1px solid rgba(145,169,183,.13);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
#screen-engineering button{
  border-radius:9px;
}
#screen-engineering button.active,
#screen-engineering button[aria-pressed="true"]{
  border-color:rgba(145,169,183,.42);
  background:rgba(145,169,183,.11);color:#B8C9D2;
}

/* SAFETY — clear separation of status, response and test controls */
#screen-safety > .banner{
  display:flex;align-items:center;gap:11px;
  min-height:54px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(145,190,157,.2);
  background:linear-gradient(105deg,rgba(94,145,110,.12),rgba(255,255,255,.018));
}
#screen-safety > .banner .ic{font-size:19px}
#screen-safety #safety-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
#screen-safety #safety-grid > *{
  min-width:0;padding:13px;border:1px solid rgba(255,255,255,.075);
  border-radius:12px;background:linear-gradient(145deg,#20252b,#171b20);
}
#screen-safety #kill-btn{
  min-height:56px;padding:13px 15px;
  border:1px solid rgba(212,126,126,.45);border-radius:11px;
  background:linear-gradient(110deg,rgba(140,48,50,.35),rgba(75,31,34,.48));
  box-shadow:inset 3px 0 rgba(212,126,126,.62),0 8px 22px rgba(0,0,0,.14);
  color:#f0b7b2;font-size:11px;letter-spacing:.055em;
}
#screen-safety #cam-btn{
  min-height:46px;border:1px solid rgba(145,169,183,.18);
  border-radius:10px;background:rgba(145,169,183,.055);
}
#screen-safety .chips{gap:8px}
#screen-safety .chip.sim{
  min-height:39px;padding:9px 11px;border-radius:10px;
  border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.025);
}
#screen-safety #event-log{
  display:grid;gap:8px;
}
#screen-safety #event-log > *{
  border:1px solid rgba(255,255,255,.065);border-radius:11px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

/* WATER — recipe builder as a sequence of deliberate steps */
#screen-water .card{
  position:relative;
  border-color:rgba(145,169,183,.12);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.045),transparent 42%),
    linear-gradient(145deg,#20252b,#171b20);
}
#screen-water .field{margin:13px 0 16px}
#screen-water .field label{margin-bottom:8px}
#screen-water #nu-vol{
  max-width:190px;font:600 18px "Roboto Mono",monospace;
}
#screen-water .sub-title{
  display:flex;align-items:center;gap:10px;
  margin:20px 0 11px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.065);
  color:#B8C9D2;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
#screen-water #nu-fert{gap:7px}
#screen-water #nu-fert .chip{
  min-height:39px;border-radius:10px;
  border-color:rgba(145,169,183,.14);
}
#screen-water #nu-fert-detail,
#screen-water #nu-out,
#screen-water #nu-sched,
#screen-water #nu-mix,
#screen-water #w-plan,
#screen-water #w-tank,
#screen-water #w-mix{
  min-width:0;
}
#screen-water #nu-out{
  padding:13px;border:1px solid rgba(145,169,183,.15);
  border-radius:12px;background:linear-gradient(145deg,rgba(145,169,183,.075),rgba(255,255,255,.012));
}
#screen-water #nu-sched{
  overflow-x:auto;border:1px solid rgba(255,255,255,.065);
  border-radius:11px;background:rgba(0,0,0,.12);
}
#screen-water .link-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:46px;margin-top:14px;padding:12px 14px;
  border:1px solid rgba(145,169,183,.17);border-radius:10px;
  background:rgba(145,169,183,.045);color:#B8C9D2;
}
#screen-water #mix-chips{gap:7px}
#screen-water #mix-save,
#screen-water #w-mixnew{min-height:45px;border-radius:10px}
#screen-water #w-tank,
#screen-water #w-mix{padding:11px 0}
#screen-water #w-plan > *{border-color:rgba(255,255,255,.07)}

/* JOURNAL — quiet editorial logbook */
#screen-journal .card{
  border-color:rgba(145,169,183,.13);
  background:
    radial-gradient(ellipse at 100% 0%,rgba(145,169,183,.045),transparent 42%),
    linear-gradient(145deg,#20252b,#171b20);
}
#screen-journal #jr-type,
#screen-journal #jr-filter{gap:7px}
#screen-journal #jr-type .chip,
#screen-journal #jr-filter .chip{
  min-height:36px;border-radius:9px;
}
#screen-journal #jr-text{
  min-height:118px;padding:13px 14px;
  border-color:rgba(255,255,255,.09);border-radius:11px;
  background:rgba(7,9,12,.28);line-height:1.6;
}
#screen-journal #jr-photo-btn{
  min-height:43px;border:1px dashed rgba(145,169,183,.25);
  border-radius:10px;background:rgba(145,169,183,.035);
  color:#B8C9D2;
}
#screen-journal #jr-photo-preview{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
#screen-journal #jr-photo-preview > *{
  overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:9px;
}
#screen-journal #jr-add{min-height:47px;border-radius:10px}
#screen-journal #jr-filter{margin:0 0 13px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
#screen-journal #jr-filter .chip{flex:none}
#screen-journal #jr-list{display:grid;gap:10px}
#screen-journal #jr-list > *{
  min-width:0;padding:14px;border:1px solid rgba(255,255,255,.075);
  border-radius:13px;background:linear-gradient(145deg,#20252b,#171b20);
}
#screen-journal .jr-photos{gap:7px;margin-top:9px}
#screen-journal .jr-thumb{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 5px 14px rgba(0,0,0,.16);
}

/* SETTINGS — technical control room with calm, scannable groups */
#screen-settings .card{
  border-color:rgba(145,169,183,.11);
  background:linear-gradient(145deg,#1e2329,#171b20);
}
#screen-settings .field{
  margin:14px 0 17px;
}
#screen-settings .field label{
  display:block;margin-bottom:8px;
  color:var(--text-secondary);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
#screen-settings input:not([type="checkbox"]),
#screen-settings select{
  min-height:42px;padding:10px 12px;
  font-size:13px;
}
#screen-settings #s-connect{
  min-height:47px;border:1px solid rgba(145,169,183,.22);
  border-radius:10px;background:rgba(145,169,183,.075);color:#B8C9D2;
}
#screen-settings #s-status{
  margin-top:12px;padding:10px 12px;
  border-left:2px solid rgba(145,169,183,.38);
  border-radius:0 8px 8px 0;background:rgba(145,169,183,.035);
}
#screen-settings .sub-title{
  margin:20px 0 12px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.065);
  color:#B8C9D2;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
#screen-settings .check{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 12px;border:1px solid rgba(255,255,255,.065);
  border-radius:10px;background:rgba(255,255,255,.018);
  color:var(--text-secondary);font-size:11px;line-height:1.5;
}
#screen-settings .check input{flex:none;margin-top:2px;accent-color:#B8C9D2}
#screen-settings #s-save{
  min-height:47px;border-radius:10px;
}
#screen-settings #exp-csv,
#screen-settings #exp-jr{
  min-height:44px;border-radius:10px;
  border-color:rgba(145,169,183,.13);
  background:rgba(145,169,183,.035);
}
#screen-settings #s-version{
  color:#B8C9D2;font-size:12px;letter-spacing:.1em;
}

/* Tablet and phone refinements for the remaining screens */
@media(max-width:680px){
  #screen-safety #safety-grid{gap:7px}
  #screen-safety #safety-grid > *{padding:11px}
  #screen-water .sub-title{margin-top:17px}
  #screen-journal #jr-filter{margin-right:-2px}
  #screen-settings .field{margin:12px 0 15px}
}
@media(max-width:390px){
  #screen-safety #safety-grid{grid-template-columns:1fr}
  #screen-safety #kill-btn{font-size:10px;padding:12px 9px}
  #screen-water #nu-vol{max-width:100%}
  #screen-journal #jr-type .chip{padding:8px 9px;font-size:10px}
  #screen-settings input:not([type="checkbox"]),
  #screen-settings select{font-size:12px}
}


/* ============================================================
   LUXBOX · ENGINEERING STUDIO DETAIL PASS 4.4
   Premium viewport, readable inspection panels and mobile controls.
   Presentation only — 3D model and control bindings are untouched.
   ============================================================ */
.viewer3d{
  background:
    radial-gradient(ellipse at 50% 34%,rgba(145,169,183,.105),transparent 42%),
    radial-gradient(ellipse at 82% 70%,rgba(93,119,133,.07),transparent 36%),
    linear-gradient(145deg,#101316,#080a0d 72%);
}
.v3d-bar{
  min-height:66px;padding-left:clamp(12px,2vw,26px);
  padding-right:clamp(12px,2vw,26px);
  border-bottom-color:rgba(145,169,183,.16);
  background:rgba(13,16,19,.86);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.v3d-brand{display:flex;flex-direction:column;gap:4px;min-width:0}
.v3d-brand>span{
  color:#858b8d;font:700 10px/1.3 var(--mono);
  letter-spacing:.1em;
}
.v3d-brand .v3d-live{
  color:#B8C9D2;font-size:10px;letter-spacing:.1em;
  overflow-wrap:anywhere;
}
.v3d-bar-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.v3d-panel-toggle{
  min-height:38px;padding:8px 12px;border:1px solid rgba(145,169,183,.17);
  border-radius:8px;background:rgba(255,255,255,.035);
  color:#B8C9D2;font-size:10px;font-weight:650;
}
.v3d-panel-toggle:hover,.v3d-panel-toggle:focus-visible{
  border-color:rgba(145,169,183,.48);background:rgba(145,169,183,.09);color:#E6E9EC;
}
.v3d-mini{min-height:38px;border-radius:8px}
.v3d-close{
  border-radius:9px;border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);color:var(--text-secondary);
}
.v3d-workspace{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(145,169,183,.045),transparent 48%),
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
}
.studio-panel{
  background:linear-gradient(180deg,rgba(27,30,34,.985),rgba(15,18,21,.985));
  scrollbar-width:thin;
}
.studio-tree-panel{padding:20px 15px 22px}
.studio-inspector-panel{padding:20px 15px 22px}
.studio-panel-head{gap:8px;margin-bottom:17px}
.studio-kicker{
  color:#B8C9D2;font:700 10px/1.4 var(--mono);
  letter-spacing:.1em;
}
.studio-panel-head>strong{font-size:14px;letter-spacing:-.02em}
.studio-panel-note{max-width:34ch;color:#858b90;font-size:10px;line-height:1.65}
.studio-search{
  min-height:42px;border-radius:9px;
  border-color:rgba(145,169,183,.16);background:rgba(0,0,0,.24);
}
.studio-search:focus-within{
  border-color:rgba(145,169,183,.48);
  box-shadow:0 0 0 3px rgba(145,169,183,.08);
}
.studio-search input{font-size:11px}
.studio-filters{gap:6px;margin:12px 0 16px}
.studio-filters button{
  min-height:31px;padding:7px 9px;border-radius:7px;font-size:10px;
}
.studio-tree-group{margin-bottom:17px}
.studio-tree-group-title{
  margin-bottom:8px;color:#B8C9D2;font-size:10px;letter-spacing:.09em;
}
.studio-tree-item{
  min-height:48px;padding:8px 9px;border-radius:9px;
  transition:background .16s ease,border-color .16s ease;
}
.studio-tree-item:focus-visible{
  outline:2px solid rgba(145,169,183,.68);outline-offset:1px;
}
.studio-tree-copy strong{font-size:10px;line-height:1.4}
.studio-tree-copy small{font-size:10px;line-height:1.4}
.studio-tree-copy .studio-tree-id{font-size:10px}
.studio-viewport{
  background:
    radial-gradient(ellipse at 50% 43%,rgba(145,169,183,.10),transparent 48%),
    linear-gradient(145deg,rgba(18,22,25,.25),rgba(7,10,12,.1));
}
.studio-viewport .v3d-hint{
  top:16px;left:16px;padding:8px 11px;
  border-color:rgba(145,169,183,.18);border-radius:8px;
  background:rgba(9,12,14,.72);color:var(--text-secondary);font-size:10px;
}
.studio-viewport-foot{
  bottom:16px;color:rgba(145,169,183,.55);
  font-size:10px;letter-spacing:.1em;
}
.studio-inspector-panel .v3d-info{
  border-color:rgba(145,169,183,.16);border-radius:11px;
  background:linear-gradient(145deg,rgba(145,169,183,.065),rgba(255,255,255,.018));
}
.studio-inspector-panel .v3d-info b{font-size:13px}
.studio-inspector-panel .v3d-info p{font-size:10px}
.studio-property{
  padding:12px;border-radius:9px;
  border-color:rgba(255,255,255,.075);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.studio-property-copy>span{font-size:10px;letter-spacing:.12em}
.studio-property-copy>strong{font-size:11px}
.studio-property-copy>small{font-size:10px;line-height:1.55}
.studio-runtime{border-radius:10px}
.v3d-controls{
  flex:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top-color:rgba(145,169,183,.16);
  background:rgba(12,15,18,.96);
  box-shadow:0 -10px 30px rgba(0,0,0,.2);
}
.v3d-row{gap:7px}
.v3d-row button{
  min-height:38px;padding:9px 12px;border-radius:8px;
  border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.035);
  font-size:10px;letter-spacing:.015em;
}
.v3d-row button.active{
  border-color:rgba(145,169,183,.48);
  background:linear-gradient(145deg,rgba(145,169,183,.16),rgba(145,169,183,.07));
  color:#E6E9EC;box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.v3d-row button:focus-visible,.v3d-mini:focus-visible,.v3d-close:focus-visible{
  outline:2px solid rgba(145,169,183,.72);outline-offset:2px;
}
@media(max-width:900px){
  .v3d-bar{gap:9px;padding-left:12px;padding-right:12px}
  .v3d-bar-actions{gap:5px}
  .v3d-panel-toggle{min-height:38px;padding:8px 10px}
  .v3d-workspace{min-height:180px}
  .studio-tree-panel,.studio-inspector-panel{
    top:9px;bottom:9px;width:min(340px,88vw);
    padding:15px 13px;border-radius:13px;
    background:linear-gradient(180deg,rgba(29,32,36,.985),rgba(13,16,19,.985));
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .v3d-controls{max-height:38vh;overflow-y:auto;overscroll-behavior:contain}
  .v3d-row{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 5px}
  .v3d-row button{flex:none;min-height:40px;padding:9px 12px}
}
@media(max-width:520px){
  .v3d-bar{align-items:flex-start;min-height:0;padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}
  .v3d-brand{flex:1 1 100%;gap:3px}
  .v3d-brand>span{font-size:10px}
  .v3d-brand .v3d-live{font-size:10px}
  .v3d-bar-actions{width:100%;display:flex;justify-content:space-between}
  .v3d-panel-toggle{flex:1;min-width:0;min-height:40px;font-size:10px}
  .v3d-mini{min-height:40px;padding:8px 10px}
  .v3d-close{width:40px;height:40px}
  .v3d-controls{max-height:34vh;padding:7px 9px calc(8px + env(safe-area-inset-bottom))}
  .v3d-row + .v3d-row{margin-top:4px}
  .v3d-row button{min-height:38px;padding:8px 10px;font-size:10px}
  .studio-viewport .v3d-hint{top:10px;left:10px;padding:7px 9px;font-size:10px}
  .studio-viewport-foot{left:10px;right:10px;bottom:9px;font-size:10px}
}
@media(max-height:620px) and (max-width:900px){
  .v3d-bar{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
  .v3d-controls{max-height:31vh}
  .v3d-row button{min-height:34px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){
  .studio-tree-item,.v3d-panel-toggle{transition:none}
}


/* LuxBox · cabinet appearance presets v4.6 */
.v3d-finish-picker{
  position:absolute;z-index:2;top:48px;left:14px;display:flex;align-items:center;gap:6px;
  max-width:calc(100% - 28px);padding:8px 9px;border:1px solid rgba(145,169,183,.16);
  border-radius:9px;background:rgba(19,21,24,.82);backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,.18)
}
.v3d-finish-picker>span{margin:0 5px 0 2px;color:var(--muted);font:600 10px "Roboto Mono",monospace;letter-spacing:.09em;white-space:nowrap}
.v3d-finish-picker button{display:flex;align-items:center;gap:6px;min-height:30px;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.025);color:#aeb0ad;font-size:10px;white-space:nowrap}
.v3d-finish-picker button.active{border-color:rgba(145,169,183,.48);background:rgba(145,169,183,.12);color:#E6E9EC}
.finish-swatch{display:block;width:12px;height:12px;border:1px solid rgba(255,255,255,.2);border-radius:3px}
.swatch-graphite{background:linear-gradient(135deg,#55575b,#202226)}
.swatch-wood{background:repeating-linear-gradient(0deg,#91A9B7 0 2px,#B8C9D2 2px 4px,#91A9B7 4px 5px)}
.swatch-satin{background:linear-gradient(135deg,#dedbd2,#8e8d89)}
.v3d-finish-picker small{margin-left:4px;color:#747b80;font-size:10px;white-space:nowrap}
@media(max-width:680px){
  .v3d-finish-picker{top:42px;left:9px;right:9px;max-width:none;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .v3d-finish-picker::-webkit-scrollbar{display:none}
  .v3d-finish-picker>span{position:sticky;left:0;background:rgba(19,21,24,.92);padding:3px 2px}
  .v3d-finish-picker small{display:none}
}
@media(max-width:390px){.v3d-finish-picker{gap:4px;padding:6px}.v3d-finish-picker button{padding:5px 6px;font-size:10px}}


/* v4.10 · distraction-free LuxBox product presentation */
#viewer3d.is-presentation .v3d-workspace{grid-template-columns:minmax(0,1fr)!important}
#viewer3d.is-presentation .studio-panel,
#viewer3d.is-presentation .v3d-controls,
#viewer3d.is-presentation .v3d-finish-picker,
#viewer3d.is-presentation .v3d-hint,
#viewer3d.is-presentation .v3d-info{display:none!important}
#viewer3d.is-presentation .studio-viewport{min-height:0}
#viewer3d.is-presentation .v3d-bar{background:rgba(10,13,17,.72);backdrop-filter:blur(16px)}
#viewer3d.is-presentation .v3d-brand span{color:var(--accent);letter-spacing:.1em}
#viewer3d.is-presentation #v3d-presentation{border-color:var(--accent);color:var(--accent)}
@media(max-width:700px){
  #viewer3d.is-presentation .v3d-bar{padding:8px 10px}
  #viewer3d.is-presentation .v3d-brand strong{font-size:10px}
  #viewer3d.is-presentation .v3d-bar-actions{gap:5px}
  #viewer3d.is-presentation #v3d-auto,
  #viewer3d.is-presentation #v3d-export{display:none}
}


/* v4.12 · home command-centre hierarchy and truthful telemetry states */
#screen-home>.banner{margin-bottom:14px;border-radius:12px;letter-spacing:.01em}
#screen-home .hero-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#screen-home .home-hero-kicker{display:block;width:100%;margin-bottom:4px;color:#B8C9D2;font:500 10px/1.3 "Roboto Mono",monospace;letter-spacing:.1em}
#screen-home .hero-title>span:nth-child(2){color:#d9d4ca}
#screen-home .home-system-copy>small{line-height:1.45;letter-spacing:.035em}
#screen-home .home-system-card .home-state-dot.unknown{background:#737b84;box-shadow:0 0 0 3px rgba(115,123,132,.1)}
#screen-home .home-tank-card.no-reading .home-tank-bottom strong{color:#a1a7ad;font-size:12px}
#screen-home .home-live-mark:not(.is-live){border-color:rgba(145,169,183,.24)}
#screen-home .badge.unknown{border-color:rgba(145,154,164,.22);background:rgba(145,154,164,.08);color:#aab1b8}
@media(max-width:680px){
  #screen-home .hero-title{align-items:flex-start}
  #screen-home .home-hero-kicker{font-size:10px;letter-spacing:.09em}
  #screen-home .hero-title>span:nth-child(2){max-width:calc(100% - 112px)}
  #screen-home .home-system-copy>small{font-size:10px}
}


/* v4.13 · live system readouts orbit the home 3D model */
#screen-home .box-scene{isolation:isolate;min-height:clamp(270px,38vw,440px);border:1px solid rgba(145,169,183,.12);border-radius:18px;background:radial-gradient(ellipse at 50% 48%,rgba(112,132,143,.12),transparent 57%),linear-gradient(145deg,rgba(8,11,14,.18),rgba(8,11,14,.58))}
#screen-home .box-scene canvas{position:relative;z-index:0}
#screen-home .home-scene-status{position:absolute;z-index:2;top:13px;left:13px;display:grid;gap:7px;max-width:min(190px,44%);pointer-events:none}
#screen-home .home-scene-chip{display:grid;gap:3px;padding:8px 10px;border:1px solid rgba(145,169,183,.16);border-radius:9px;background:rgba(17,20,24,.78);backdrop-filter:blur(12px);box-shadow:0 7px 20px rgba(0,0,0,.15)}
#screen-home .home-scene-chip>span{color:#B8C9D2;font:500 10px/1.2 "Roboto Mono",monospace;letter-spacing:.1em}
#screen-home .home-scene-chip>b{color:#e8e5df;font:600 12px/1.25 "Roboto Mono",monospace;overflow-wrap:anywhere}
#screen-home .home-scene-chip>small{color:#92999f;font:500 10px/1.3 "Roboto Mono",monospace;letter-spacing:.055em}
#screen-home .home-scene-capacity{position:absolute;z-index:2;right:13px;top:13px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(145,169,183,.16);border-radius:999px;background:rgba(17,20,24,.76);color:var(--text-secondary);font:500 10px "Roboto Mono",monospace;letter-spacing:.08em;pointer-events:none}
#screen-home .home-scene-capacity i{width:6px;height:6px;border-radius:50%;background:#B8C9D2;box-shadow:0 0 9px rgba(145,169,183,.5)}
#screen-home .box-hint{z-index:2}
@media(max-width:680px){
 #screen-home .box-scene{min-height:300px}
 #screen-home .home-scene-status{top:9px;left:9px;gap:5px;max-width:138px}
 #screen-home .home-scene-chip{padding:6px 7px}
 #screen-home .home-scene-chip>b{font-size:10px}
 #screen-home .home-scene-chip>small{font-size:10px}
 #screen-home .home-scene-capacity{top:auto;right:9px;bottom:9px;padding:6px 8px;font-size:10px}
 #screen-home .box-hint{bottom:9px;left:9px}
}
@media(max-width:380px){
 #screen-home .box-scene{min-height:270px}
 #screen-home .home-scene-status{max-width:116px}
 #screen-home .home-scene-chip>b{font-size:10px}
 #screen-home .home-scene-capacity{letter-spacing:.035em}
}


/* v4.14 · interactive component shortcuts on the home digital twin */
#screen-home .home-scene-status{pointer-events:none}
#screen-home .home-scene-actions{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:wrap;gap:6px;width:calc(100% - 190px);pointer-events:auto}
#screen-home .home-scene-actions button{display:inline-flex;align-items:center;gap:8px;min-height:31px;padding:7px 10px;border:1px solid rgba(145,169,183,.25);border-radius:7px;background:rgba(17,20,24,.86);color:#E6E9EC;font:500 10px "Roboto Mono",monospace;letter-spacing:.07em;backdrop-filter:blur(10px);transition:background .2s,border-color .2s,transform .2s}
#screen-home .home-scene-actions button span{color:#B8C9D2;font-size:11px}
#screen-home .home-scene-actions button:active{transform:scale(.97);background:rgba(145,169,183,.16)}
#screen-home .home-scene-actions button:focus-visible{outline:2px solid #B8C9D2;outline-offset:2px}
@media(hover:hover){#screen-home .home-scene-actions button:hover{border-color:rgba(145,169,183,.55);background:rgba(43,42,38,.94)}}
@media(max-width:680px){
 #screen-home .home-scene-actions{left:9px;right:9px;bottom:42px;transform:none;width:auto;justify-content:flex-start;gap:5px}
 #screen-home .home-scene-actions button{min-height:29px;padding:6px 8px;font-size:10px}
}
@media(max-width:380px){
 #screen-home .home-scene-actions{bottom:40px}
 #screen-home .home-scene-actions button{font-size:10px;padding:5px 6px}
}


/* v4.15 · provenance state in the Engineering Studio inspector */
.studio-provenance{border-color:rgba(145,169,183,.24);background:linear-gradient(145deg,rgba(145,169,183,.09),rgba(255,255,255,.018))}
.studio-provenance>strong{color:#E6E9EC;font-size:11px}
.studio-provenance>small{overflow-wrap:anywhere}



/* v4.17 · explicit CAD provenance and physical verification states */
.studio-status-line{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 5px}
.studio-status-pill{display:inline-flex;align-items:center;min-height:24px;padding:5px 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;font:600 10px/1.2 var(--mono);letter-spacing:.035em}
.studio-status-pill.is-cad{border-color:rgba(142,164,189,.3);background:rgba(142,164,189,.09);color:#b8c9dc}
.studio-status-pill.is-pending{border-color:rgba(145,169,183,.3);background:rgba(145,169,183,.09);color:#B8C9D2}
.studio-status-pill.is-verified{border-color:rgba(157,184,168,.34);background:rgba(157,184,168,.1);color:#bdd5c5}
.studio-status-pill.is-unmapped{border-color:rgba(145,154,164,.25);background:rgba(145,154,164,.07);color:#aab1b8}
.studio-provenance .studio-status-line+small{margin-top:3px}
@media(max-width:520px){.studio-status-line{gap:5px}.studio-status-pill{font-size:10px;padding:5px 7px}}


/* v4.18 · physical asset identity is separate from catalogue type */
.studio-instance-record{border-color:rgba(142,164,189,.2);background:linear-gradient(145deg,rgba(142,164,189,.065),rgba(255,255,255,.012))}
.studio-instance-record>strong{color:#c5d1df;font-size:11px}
.studio-instance-record>small{overflow-wrap:anywhere}


/* v4.19 · physical asset registry readiness */
.studio-instance-record{border-color:rgba(145,169,183,.22);background:linear-gradient(145deg,rgba(145,169,183,.065),rgba(255,255,255,.012))}
.studio-instance-record>strong{color:#B8C9D2;font-size:11px}
.studio-instance-record>small{overflow-wrap:anywhere}


/* v4.20 · local physical assembly registry */
.lbx-registry{position:absolute;inset:64px 14px 14px;z-index:20;display:flex;flex-direction:column;min-height:0;overflow:hidden;border:1px solid rgba(145,169,183,.24);border-radius:14px;background:linear-gradient(145deg,#1a1e23,#101419 75%);box-shadow:0 24px 80px rgba(0,0,0,.62)}
.lbx-registry[hidden],.lbx-reg-form-layer[hidden]{display:none!important}
.lbx-registry-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid rgba(145,169,183,.12);background:rgba(255,255,255,.018)}
.lbx-registry-head h2{margin:5px 0 3px;color:#E6E9EC;font-size:18px;letter-spacing:-.035em}
.lbx-registry-head p,.lbx-reg-detail-top p{margin:0;color:#858d92;font-size:10px}
.lbx-reg-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#22272c;color:#E6E9EC;font-size:22px}
.lbx-registry-body{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.55fr);gap:0;flex:1;min-height:0;overflow:hidden}
.lbx-reg-col,.lbx-reg-detail{min-width:0;overflow:auto;padding:16px}
.lbx-reg-col{border-right:1px solid rgba(145,169,183,.1);background:rgba(0,0,0,.12)}
.lbx-reg-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.lbx-reg-section-head strong{color:#E6E9EC;font-size:11px}
.lbx-reg-action,.lbx-reg-text{flex:none;padding:8px 10px;border:1px solid rgba(145,169,183,.28);border-radius:7px;background:rgba(145,169,183,.08);color:#B8C9D2;font-size:10px;font-weight:650}
.lbx-reg-text{border:0;background:transparent;color:#a9afb2}
.lbx-reg-list{display:flex;flex-direction:column;gap:7px}
.lbx-reg-list-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);text-align:left}
.lbx-reg-list-item.active{border-color:rgba(145,169,183,.38);background:rgba(145,169,183,.09)}
.lbx-reg-list-item strong{color:#E6E9EC;font-size:11px}
.lbx-reg-list-item span,.lbx-reg-list-item small{color:#899197;font-size:10px}
.lbx-reg-list-item small{font-family:var(--mono)}
.lbx-reg-note{margin:12px 0 0;color:#828b91;font-size:10px;line-height:1.6}
.lbx-reg-detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.lbx-reg-detail-top h3{margin:5px 0;color:#E6E9EC;font-size:17px}
.lbx-reg-id{display:flex;flex-direction:column;gap:6px;padding:11px 12px;border:1px solid rgba(142,164,189,.17);border-radius:8px;background:rgba(142,164,189,.045)}
.lbx-reg-id span,.lbx-reg-meta span{color:#858e95;font:600 10px var(--mono);letter-spacing:.12em}
.lbx-reg-id code{color:#c6d1dc;font-size:10px;overflow-wrap:anywhere}
.lbx-reg-meta{display:grid;grid-template-columns:1fr 1fr 90px;gap:8px;margin:10px 0 18px}
.lbx-reg-meta>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.02)}
.lbx-reg-meta b{color:#d8d3ca;font:600 10px var(--mono);overflow-wrap:anywhere}
.lbx-asset-list{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.lbx-asset{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025)}
.lbx-asset>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.lbx-asset strong{color:#E6E9EC;font-size:10px;overflow-wrap:anywhere}
.lbx-asset small{color:#858e94;font-size:10px;overflow-wrap:anywhere}
.lbx-asset-status{color:#B8C9D2;font-size:10px;text-align:right}
.lbx-reg-remove{width:28px;height:28px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.025);color:#a5aaad;font-size:16px}
.lbx-reg-form{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid rgba(145,169,183,.15);border-radius:10px;background:rgba(145,169,183,.035)}
.lbx-reg-form label{display:flex;flex-direction:column;gap:5px;color:#aeb3b4;font-size:10px}
.lbx-reg-form input,.lbx-reg-form select{width:100%;min-width:0;min-height:38px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#151a1f;color:#E6E9EC;font:400 10px var(--font);color-scheme:dark}
.lbx-reg-form input::placeholder{color:#667078}
.lbx-reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lbx-reg-readonly{display:grid;grid-template-columns:90px 1fr;gap:7px 10px;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:7px}
.lbx-reg-readonly span{color:#828b91;font-size:10px}.lbx-reg-readonly b{color:var(--text-secondary);font:500 10px var(--mono);overflow-wrap:anywhere}
.lbx-reg-primary{min-height:40px;padding:10px 13px;border:1px solid rgba(145,169,183,.4);border-radius:7px;background:linear-gradient(135deg,rgba(145,169,183,.2),rgba(145,169,183,.08));color:#E6E9EC;font-size:10px;font-weight:700}
.lbx-reg-form-layer{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:18px;background:rgba(4,7,9,.76);backdrop-filter:blur(8px)}
.lbx-reg-create-form,.lbx-reg-form[data-reg-create-form]{width:min(480px,100%);max-height:100%;overflow:auto}
.lbx-reg-qr{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px;border:1px solid rgba(142,164,189,.16);border-radius:8px;background:rgba(142,164,189,.04)}
.lbx-reg-qr>div{display:flex;flex-direction:column;gap:5px}.lbx-reg-qr strong{color:#d9e0e6;font-size:10px}.lbx-reg-qr small{color:#89939b;font-size:10px}
.lbx-reg-qr code{padding:8px;border-radius:6px;background:rgba(0,0,0,.2);color:#b7c7d5;font-size:10px;overflow-wrap:anywhere}
@media(max-width:760px){
 .lbx-registry{inset:0;border-radius:0;border:0}
 .lbx-registry-head{padding:calc(12px + env(safe-area-inset-top)) 13px 12px}
 .lbx-registry-head h2{font-size:16px}
 .lbx-registry-body{grid-template-columns:1fr;grid-template-rows:minmax(120px,.42fr) minmax(0,1.58fr)}
 .lbx-reg-col{border-right:0;border-bottom:1px solid rgba(145,169,183,.1);padding:11px 12px}
 .lbx-reg-detail{padding:12px}
 .lbx-reg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .lbx-reg-list-item{padding:9px}
 .lbx-reg-list-item strong{font-size:10px}
 .lbx-reg-meta{grid-template-columns:1fr 1fr 60px}
 .lbx-asset{grid-template-columns:minmax(0,1fr) 28px}
 .lbx-asset-status{grid-column:1;grid-row:2;text-align:left}
 .lbx-asset-actions{grid-column:2;grid-row:1/3}
 .lbx-asset-actions .lbx-reg-action{white-space:normal;max-width:88px}
 .lbx-reg-remove{grid-column:2;grid-row:auto}
 .lbx-reg-detail-top{flex-direction:column}
 .lbx-reg-detail-top h3{font-size:15px}
}

/* v4.21 · physical asset ↔ CAD instance navigation */
.studio-asset-linked{display:flex;flex-direction:column;gap:5px;margin-top:9px;padding:10px;border:1px solid rgba(145,169,183,.17);border-radius:8px;background:rgba(145,169,183,.035)}
.studio-asset-linked b{color:#E6E9EC;font-size:10px;overflow-wrap:anywhere}
.studio-asset-linked small{color:#90989d;font-size:10px;overflow-wrap:anywhere}
.studio-asset-focus{align-self:flex-start;margin-top:7px;padding:7px 10px;border:1px solid rgba(145,169,183,.28);border-radius:6px;background:rgba(145,169,183,.07);color:#B8C9D2;font-size:10px;font-weight:650}


/* ============================================================
   LUXBOX PULT · v4.22 APP-FIRST VISUAL PASS
   Priority: daily controls, readable data, charts and navigation.
   3D remains available but is no longer the visual centrepiece.
   ============================================================ */
/* :root слит в design-system.css (v4.46) */
main{max-width:1180px;padding-top:22px}
header{
  background:rgba(24,25,28,.94);
  border-bottom-color:var(--stroke-soft);
  backdrop-filter:blur(18px);
}
.logo img{border-radius:9px;box-shadow:0 5px 18px rgba(0,0,0,.2)}
.freshness{font-size:10px;color:var(--text-tertiary)}
.screen::before{
  display:block;
  margin:4px 2px 15px;
  color:var(--text-primary);
  font-size:clamp(23px,3vw,29px);
  line-height:1.15;
  font-weight:720;
  letter-spacing:-.045em;
}
#screen-home::before{content:"Обзор системы"}
#screen-climate::before{content:"Климат"}
#screen-engineering::before{content:"Инженерия"}
#screen-devices::before{content:"Устройства"}
#screen-safety::before{content:"Защита системы"}
#screen-water::before{content:"Полив и питание"}
#screen-journal::before{content:"Дневник"}
#screen-settings::before{content:"Настройки"}
#screen-home .banner{margin-top:0}
.sec-label{
  margin-top:25px;
  margin-bottom:11px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
}
.hero,.card,.chart-card{
  border-color:var(--stroke-soft);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.hero{background:linear-gradient(145deg,#1b1c20 0%,#17181b 72%)}
.hero-title{letter-spacing:.1em}
.home-hero-kicker{color:#B8C9D2}
.box-scene{
  height:205px;
  margin:10px 0 8px;
  border:1px solid rgba(220,224,230,.055);
  background:radial-gradient(ellipse at 50% 45%,#24262a 0%,#191a1e 65%,#17181b 100%);
}
.box-scene::after{background:linear-gradient(100deg,#191b1f 30%,#24262a 50%,#191b1f 70%)}
.home-scene-actions button{
  background:rgba(20,21,24,.76);
  border-color:rgba(220,224,230,.12);
  color:var(--text-secondary);
  backdrop-filter:blur(10px);
}
.home-scene-actions button:hover{border-color:rgba(145,169,183,.4);color:#E6E9EC}
.box-hint{font-size:10px;color:#77756f}
.hero-top{align-items:center;margin-top:12px}
.hero .big{font-size:clamp(48px,7vw,64px);letter-spacing:-.055em}
.hero .badge{border:1px solid currentColor;border-color:rgba(145,169,183,.22)}
.kpi-strip{
  min-height:64px;
  background:linear-gradient(110deg,rgba(145,169,183,.09),rgba(255,255,255,.018));
  border-color:rgba(145,169,183,.12);
}
.kpi{color:#B8C9D2;text-shadow:none}
.metrics{gap:9px}
.metric{
  padding:14px;
  background:linear-gradient(150deg,#222429,#1c1d21);
  border-color:var(--stroke-soft);
  border-radius:13px;
}
.metric .k{color:var(--muted);font-size:10px;letter-spacing:.12em}
.metric .v{color:#E6E9EC;font-size:clamp(19px,2.4vw,25px)}
.card,.chart-card{background:linear-gradient(145deg,#1c1d21,#191a1d)}
.card{padding:19px}
.row{border-bottom-color:rgba(220,224,230,.07)}
.row .k{color:var(--muted)}
.hint{color:var(--muted)}
button{
  min-height:40px;
  border-color:var(--stroke-strong);
  background:linear-gradient(180deg,#292b30,#222429);
  color:#ded8cd;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(145,169,183,.62);
  outline-offset:2px;
}
button.primary{
  background:linear-gradient(135deg,#B8C9D2,#B8C9D2);
  border-color:#B8C9D2;
  color:#211d16;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}
button.primary:hover{background:linear-gradient(135deg,#E6E9EC,#B8C9D2);color:#211d16}
.chip{
  min-height:36px;
  padding:8px 14px;
  border-color:var(--stroke-soft);
  background:#24262a;
  color:var(--text-secondary);
}
.chip.active{
  color:#B8C9D2;
  border-color:rgba(145,169,183,.42);
  background:rgba(145,169,183,.12);
  box-shadow:inset 0 0 0 1px rgba(145,169,183,.06);
}
.seg{gap:5px;padding:4px;border:1px solid var(--stroke-soft);border-radius:10px;background:#151619}
.seg button{min-height:34px;border-radius:7px;background:transparent;box-shadow:none}
.seg button.active{background:rgba(145,169,183,.14);border-color:rgba(145,169,183,.28);color:#B8C9D2}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{
  background:#17181b;
  border-color:var(--stroke-strong);
  border-radius:9px;
  color:#E6E9EC;
}
input::placeholder,textarea::placeholder{color:#706f6b}
input[type=range]{
  height:5px;
  background:linear-gradient(90deg,rgba(145,169,183,.55),#34363a);
}
input[type=range]::-webkit-slider-thumb{
  width:20px;height:20px;background:#B8C9D2;border:3px solid #25262a;
  box-shadow:0 0 0 1px rgba(145,169,183,.35),0 3px 9px rgba(0,0,0,.3);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;background:#B8C9D2;border:3px solid #25262a;
  box-shadow:0 0 0 1px rgba(145,169,183,.35);
}
.chart-card{padding:18px}
#chart{height:270px;margin:14px 0 10px}
#screen-climate .seg{width:100%;justify-content:space-between}
#screen-climate .seg button{flex:1}
#screen-climate .legend{
  border-color:var(--stroke-soft);
  color:var(--text-secondary);
  gap:10px 18px;
}
#screen-climate .legend i{height:3px}
#screen-devices .card{
  background:linear-gradient(145deg,#24252a,#1c1d21);
  border-color:var(--stroke-soft);
}
#screen-devices .card::after{border-color:rgba(145,169,183,.055);box-shadow:0 0 0 18px rgba(145,169,183,.018),0 0 0 38px rgba(145,169,183,.012)}
#screen-devices .big.num{color:#B8C9D2}
.tl{height:72px;gap:4px}
.tl-dawn{background:linear-gradient(180deg,rgba(145,169,183,.38),rgba(145,169,183,.12))}
.tl-day{background:linear-gradient(180deg,rgba(145,169,183,.7),rgba(145,169,183,.32))}
.tl-dusk{background:linear-gradient(180deg,rgba(145,169,183,.27),rgba(145,169,183,.08))}
.tl-night{background:linear-gradient(180deg,#17191d,#101114);border:1px solid rgba(255,255,255,.035)}
.health{gap:9px}
.chip-health{background:#202125;border-color:var(--stroke-soft);border-radius:10px}
.chip-health b{color:var(--muted)}
.chip-health.ok span{color:#9ac2a7}
#tabbar{background:rgba(25,26,29,.96);border-color:var(--stroke-soft);backdrop-filter:blur(18px)}
nav#tabbar button{border-radius:11px}
nav#tabbar button.active{color:#B8C9D2;background:rgba(145,169,183,.11)}
nav#tabbar button.active::before{background:#B8C9D2}
nav#tabbar button.active .ic{filter:none}
@media(min-width:601px){
  main{padding-top:88px}
  nav#tabbar{background:#191a1d;border-color:var(--stroke-soft)}
  nav#tabbar button.active{background:rgba(145,169,183,.1)}
}
@media(max-width:760px){
  main{padding:17px 14px calc(94px + env(safe-area-inset-bottom))}
  .screen::before{margin:3px 2px 13px;font-size:25px}
  .hero{padding:15px 13px}
  .box-scene{height:176px}
  .home-scene-status{transform:scale(.9);transform-origin:top right}
  .home-scene-actions{gap:5px}
  .home-scene-actions button{padding:6px 8px;font-size:10px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .metric{padding:12px 11px}
  .metric .v{font-size:22px}
  .card,.chart-card{padding:15px}
  #chart{height:235px}
  #screen-climate .seg button{padding:7px 5px;font-size:10px}
  nav#tabbar{height:72px;padding:0 5px env(safe-area-inset-bottom)}
  nav#tabbar button{height:55px}
}
@media(max-width:380px){
  .box-scene{height:158px}
  .hero .big{font-size:47px}
  .home-scene-status{transform:scale(.82)}
  .home-scene-actions button{font-size:10px;padding:5px 6px}
  #chart{height:210px}
}


/* LUXBOX PULT · v4.23 HOME DASHBOARD */
#screen-home .hero{display:flex;flex-direction:column;gap:0;padding:clamp(16px,2.2vw,24px)}
#screen-home .hero-title{order:0;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:var(--text-secondary);font-size:10px;letter-spacing:.12em}
#screen-home .hero-title>span:last-child{font:600 13px var(--font);letter-spacing:-.015em;color:var(--text-primary);text-transform:none}
#screen-home .hero-top{order:1;align-items:center;gap:14px;margin:0;padding:15px 17px;border:1px solid rgba(145,169,183,.15);border-radius:15px;background:linear-gradient(110deg,rgba(145,169,183,.075),rgba(255,255,255,.018) 62%,rgba(255,255,255,.008))}
#screen-home .hero .big{font-size:clamp(48px,7vw,66px);letter-spacing:-.075em;color:#E6E9EC}
#screen-home .hero-sub{gap:4px;padding-top:0}
#screen-home .hero .unit{color:var(--metal);font-size:10px}
#screen-home .hero .dim{font-size:10px}
#screen-home .hero .badge{margin-left:auto}
#screen-home .kpi-strip{order:2;margin:9px 0 0;padding:10px 13px;background:rgba(255,255,255,.022);border-color:var(--stroke-soft)}
#screen-home .kpi{font-size:23px;color:#B8C9D2;text-shadow:none}
#screen-home .kpi-label{font-size:10px;letter-spacing:.12em}
#screen-home .metrics{order:3;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:9px}
#screen-home .metric{min-height:83px;padding:12px 13px;background:rgba(255,255,255,.025);border-color:var(--stroke-soft)}
#screen-home .metric .k{font-size:10px;letter-spacing:.1em}
#screen-home .metric .v{font-size:clamp(18px,2.3vw,23px)}
#screen-home .home-systems{margin-top:15px}
.home-action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.home-action-row button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:42px;padding:9px 11px;border:1px solid rgba(145,169,183,.17);border-radius:10px;background:rgba(145,169,183,.045);color:var(--text-secondary);font-size:10px;font-weight:600}
.home-action-row button b{color:var(--metal);font:500 14px var(--mono)}
.home-action-row button:active{background:rgba(145,169,183,.12);transform:translateY(1px)}
.home-action-row button:focus-visible{outline:2px solid var(--metal);outline-offset:2px}
.home-3d-preview{margin:17px 0 5px;padding:15px;border:1px solid var(--stroke-soft);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
.home-3d-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.home-3d-head h2{margin:4px 0 0;color:var(--text-primary);font:600 15px var(--font);letter-spacing:-.025em}
.home-3d-head .v3d-open{flex:none;padding:8px 11px;border-color:rgba(145,169,183,.25);color:#B8C9D2;font-size:10px}
.home-3d-preview .box-scene{height:190px;min-height:0;margin:0;border:1px solid rgba(145,169,183,.1);border-radius:12px;overflow:hidden}
.home-3d-preview .home-scene-status{top:9px;left:9px;gap:5px;max-width:130px}
.home-3d-preview .home-scene-chip{padding:6px 8px}
.home-3d-preview .home-scene-capacity{top:9px;right:9px}
.home-3d-preview .home-scene-actions{bottom:9px;width:calc(100% - 18px)}
.home-3d-preview .box-hint{display:none}
#screen-home .banner.warn{border-color:rgba(145,169,183,.23);background:rgba(145,169,183,.075);color:#B8C9D2}
#screen-home .banner.ok{border-color:rgba(157,184,168,.2);background:rgba(157,184,168,.07)}
@media(max-width:680px){
 #screen-home .hero{padding:13px}
 #screen-home .hero-top{gap:10px;padding:13px}
 #screen-home .hero .big{font-size:49px}
 #screen-home .hero .badge{font-size:10px;padding:5px 8px}
 #screen-home .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #screen-home .metric{min-height:72px;padding:10px 11px}
 .home-action-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .home-action-row button{min-height:43px}
 .home-3d-preview{padding:11px}
 .home-3d-preview .box-scene{height:158px}
 .home-3d-head h2{font-size:13px}
}
@media(max-width:360px){
 #screen-home .hero .big{font-size:43px}
 #screen-home .hero .dim{font-size:10px}
 .home-action-row button{padding:8px 9px;font-size:10px}
 .home-3d-preview .box-scene{height:145px}
}

/* ============================================================
   Слой консистентности v4.25 — единые материалы и ритм.
   Чинит: разные оттенки карточек по экранам (Дневник синил),
   три цвета воды в баках, 5 размеров чипов, шкалу крупных чисел.
   ============================================================ */
/* 1. Один материал карточек на всех экранах (нейтральный графит) */
.card, .chart-card,
#screen-journal .card:first-of-type,
#screen-journal .jr-item, #screen-journal .journal-entry,
#screen-settings .card, #screen-devices .card, #screen-safety .card,
#screen-water .card, #screen-home .card, #screen-climate .card{
  background:linear-gradient(145deg,#24252a,#1c1d21);
  border:1px solid var(--stroke-soft);
  border-radius:10px;
}
#screen-journal textarea, #screen-journal input{
  background:#1c1e22; border-color:var(--stroke-strong);
}

/* 2. Один цвет воды во всех баках (бирюзовый = «норма») */
.sim-water, .tank-liquid, .home-tank-liquid{
  background:linear-gradient(90deg,rgba(96,150,158,.8),rgba(124,174,184,.72) 45%,rgba(150,196,204,.85));
  border-top:1px solid rgba(177,220,224,.5);
}

/* ============================================================
   ЖИВАЯ ВОДА — волновая поверхность, покачивание, каустика
   ============================================================ */
.tank-liquid, .home-tank-liquid{
  overflow:hidden;
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 44%, transparent 58%),
    linear-gradient(90deg, rgba(96,150,158,.85), rgba(124,174,184,.72) 45%, rgba(150,196,204,.85));
  background-size:230% 100%, 100% 100%;
  background-position:-60% 0, 0 0;
  animation:water-bob 7s ease-in-out infinite, water-caustic 12s ease-in-out infinite alternate;
}
.home-tank-liquid{animation-duration:6s, 10s}
.tank-liquid::before, .tank-liquid::after,
.home-tank-liquid::before, .home-tank-liquid::after{
  content:"";position:absolute;left:0;top:-6px;width:200%;height:13px;
  background-repeat:repeat-x;background-size:64px 13px;pointer-events:none;
}
.tank-liquid::before, .home-tank-liquid::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 13'%3E%3Cpath d='M0 7 Q8 1 16 7 T32 7 T48 7 T64 7 T80 7 T96 7 T112 7 T128 7 V13 H0 Z' fill='%23b9dcdd' fill-opacity='.9'/%3E%3C/svg%3E");
  animation:water-wave 4.2s linear infinite;
}
.tank-liquid::after, .home-tank-liquid::after{
  top:-3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 13'%3E%3Cpath d='M0 8 Q8 14 16 8 T32 8 T48 8 T64 8 T80 8 T96 8 T112 8 T128 8 V13 H0 Z' fill='%238fc3c8' fill-opacity='.75'/%3E%3C/svg%3E");
  animation:water-wave 6.9s linear infinite reverse;
}
@keyframes water-wave{from{transform:translateX(0)}to{transform:translateX(-64px)}}
@keyframes water-bob{
  0%,100%{transform:translateY(0) skewX(0deg)}
  30%{transform:translateY(1.6px) skewX(.5deg)}
  65%{transform:translateY(-1.1px) skewX(-.45deg)}
}
@keyframes water-caustic{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}
@media (prefers-reduced-motion: reduce){
  .tank-liquid, .home-tank-liquid,
  .tank-liquid::before, .tank-liquid::after,
  .home-tank-liquid::before, .home-tank-liquid::after{animation:none}
}

/* ---- вода v2: пена, пузырьки, глубина ---- */
.tank-liquid::before, .home-tank-liquid::before{
  top:-8px;height:17px;background-size:72px 17px;
  filter:drop-shadow(0 1px 4px rgba(165,225,230,.5));
  animation:water-wave2 4.2s linear infinite;
}
.tank-liquid::after, .home-tank-liquid::after{
  top:-4px;height:15px;background-size:64px 15px;
  animation:water-wave2b 6.9s linear infinite reverse;
}
@keyframes water-wave2{from{transform:translateX(0)}to{transform:translateX(-72px)}}
@keyframes water-wave2b{from{transform:translateX(0)}to{transform:translateX(-64px)}}
.tank-liquid, .home-tank-liquid{
  box-shadow:0 -5px 18px rgba(111,164,172,.13), inset 0 9px 14px -8px rgba(233,252,252,.28);
}

/* пузырьки: два слоя с разной скоростью */
.tank-vessel::after, .home-tank-visual::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 100%, rgba(233,250,250,.9) 1.3px, transparent 1.9px),
    radial-gradient(circle at 46% 100%, rgba(233,250,250,.6) 1px, transparent 1.6px),
    radial-gradient(circle at 71% 100%, rgba(233,250,250,.8) 1.5px, transparent 2.1px),
    radial-gradient(circle at 87% 100%, rgba(233,250,250,.55) 0.9px, transparent 1.5px);
  background-size:100% 230%;background-repeat:no-repeat;
  animation:bubbles-rise 8s linear infinite;
}
.tank-gloss::before, .tank-gloss::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    radial-gradient(circle at 35% 100%, rgba(240,253,253,.75) 1px, transparent 1.6px),
    radial-gradient(circle at 62% 100%, rgba(240,253,253,.5) 1.3px, transparent 1.9px);
  background-size:100% 260%;background-repeat:no-repeat;
  animation:bubbles-rise 11s linear infinite;
}
@keyframes bubbles-rise{
  0%{background-position:22% 112%,46% 118%,71% 110%,87% 115%;opacity:0}
  14%{opacity:.6}
  80%{opacity:.38}
  100%{background-position:20% -12%,44% -6%,73% -14%,85% -8%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .tank-liquid::before, .tank-liquid::after, .home-tank-liquid::before, .home-tank-liquid::after,
  .tank-vessel::after, .home-tank-visual::after, .tank-gloss::before, .tank-gloss::after{animation:none}
}

/* 3. Чипы: два размера — S (справочные) и M (действия) */
.chip{min-height:34px; padding:7px 13px; font-size:10px; border-radius:999px}
#screen-water #nu-fert .chip{min-height:30px; padding:5px 11px; font-size:10px}
#screen-journal #jr-type .chip, #screen-journal #jr-filter .chip,
#screen-water #mix-chips .chip, #stage-chips .chip, #mode-chips .chip{
  min-height:34px; padding:7px 13px; font-size:10px;
}

/* 4. Шкала крупных чисел: hero > карточка > метрика */
.sim-reading strong{font-size:clamp(22px,2.6vw,26px)}
.sim-device-value, .home-tank-value, .tank-value{font-size:22px}
#d-light-val.big{font-size:28px}
.metric .v{font-size:18px}

/* 5. Секционные подписи: один цвет и ритм */
.sec-label{margin:26px 2px 12px; color:#9aa6b2}
#screen-journal .sec-label{color:#9aa6b2}

/* 6. Фазы на «Климате» — кликабельны, как стадии на Главной */
#phase-windows .row{cursor:pointer; transition:background .15s}
#phase-windows .row:active{background:var(--accent-dim)}
#phase-windows .row-cur{cursor:default}

/* --- схема бокса с датчиками (boxmap.js, IDEAS v4) --- */
.boxmap{width:100%; height:220px; display:block}

/* --- связка пульт ↔ сайт (site-bridge.js) --- */
a.linkbtn{display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-s); margin-top:10px;
  font:600 13px var(--font); letter-spacing:.02em; text-decoration:none;
  border:1px solid var(--line2); background:var(--bg3); color:var(--ink2);
  transition:all var(--dur) var(--ease)}
a.linkbtn:hover{border-color:var(--muted); color:var(--ink)}
a.chip{text-decoration:none}

/* очень узкие экраны: время проверки убираем */
@media(max-width:350px){.freshness{display:none}}

/* на узких экранах свежесть данных — без префикса */
@media(max-width:390px){.fresh-pre{display:none}}

/* ============================================================
   v4.51 · «Управление» v2: 6 подвкладок, компактный скролл-сегмент
   ============================================================ */
#control-seg{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
#control-seg::-webkit-scrollbar{display:none}
#control-seg button{flex:0 0 auto; min-height:44px; padding:9px 15px; white-space:nowrap}

/* ============================================================
   v4.52 · Центр событий
   ============================================================ */
.ev-head{display:flex; align-items:center; gap:12px; margin:10px 0 4px}
#screen-events #ev-feed{display:grid; gap:8px}
#screen-events .alert{align-items:flex-start}
#screen-events .ev-meta{display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:2px 0 3px}
#screen-events .alert.chain{margin-left:14px; position:relative}
#screen-events .alert.chain::before{content:''; position:absolute; left:-9px; top:-8px; width:1px; height:14px; background:rgba(255,255,255,.14)}
#screen-events .alert .ev-go{margin-left:auto; align-self:center; flex:0 0 auto; min-height:36px; padding:6px 13px}

/* ============================================================
   v4.53 · Главная 2.0: блок «Требует внимания»
   ============================================================ */
#attn{display:grid; gap:8px}
#attn .alert{align-items:flex-start}
#attn .alert .ev-go{margin-left:auto; align-self:center; flex:0 0 auto; min-height:36px; padding:6px 13px}
#attn .sec-label{margin:14px 2px 2px}

/* ============================================================
   v4.54 · Widget Library v1: бейджи данных и жизненный цикл команд
   ============================================================ */
.dcard-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.w-cmd{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted)}
.w-badge{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap}
.w-badge.demo{background:var(--gold-dim); color:var(--gold)}
.w-badge.live{background:var(--accent-dim); color:var(--accent)}
.w-badge.stale{background:var(--gold-dim); color:var(--gold)}
.w-badge.off{background:rgba(212,126,126,.14); color:var(--red)}

/* --- Widget Library v2 (Этап 1): единые карточки --- */
.w-target{display:inline-flex; align-items:center; gap:4px; margin-top:4px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  padding:2px 7px; border-radius:6px; white-space:nowrap;
  background:var(--accent-dim); color:var(--accent)}
.w-target.hi,.w-target.lo{background:var(--gold-dim); color:var(--gold)}
.w-sub{margin-top:3px; font-family:var(--mono); font-size:10px; color:var(--muted)}
.chip-health .w-src{display:block; margin-top:4px; font-style:normal}
.chip-health .w-badge{font-size:8.5px; padding:1px 6px}
.banner .w-badge{margin-left:auto}
.banner b i{display:block; font-style:normal; font-weight:400; font-size:10.5px; color:var(--muted); letter-spacing:.02em}
.w-panel{margin-top:10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg3)}
.w-panel summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.w-panel summary::-webkit-details-marker{display:none}
.w-panel summary::after{content:'▾'; color:var(--muted); font-size:10px}
.w-panel[open] summary::after{content:'▴'}
.w-panel summary .w-sub{text-transform:none; letter-spacing:.02em; font-weight:400}
.w-panel-body{padding:0 12px 12px; font-size:12px; color:var(--ink2); line-height:1.55}
.w-panel-body .row{padding:8px 2px}
.chart-readout{min-height:15px; margin-top:2px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--muted)}

/* Этап 3 (v4.60): команды и редактор автоматизаций */
.w-ack{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); opacity:.85}
.w-preview{border-left:2px solid var(--gold); padding:6px 0 6px 10px; margin:10px 0; font-size:12px; line-height:1.5}

/* v4.69 · 3D-студия: категории внутри групп дерева сборки (направление 2) */
.studio-tree-cat{margin:4px 2px 3px;color:#727a80;font:600 9px "Roboto Mono",monospace;letter-spacing:.12em;text-transform:uppercase}

/* Mobile engineering studio: compact drawers, no full-screen inspector pop-up */
.studio-panel-head{position:relative;padding-right:34px}
.studio-panel-close{
  position:absolute;top:-3px;right:-2px;display:grid;place-items:center;
  width:30px;height:30px;border:1px solid rgba(174,183,194,.18);border-radius:8px;
  background:rgba(255,255,255,.04);color:#C4CDD6;font-size:20px;line-height:1
}
@media(max-width:700px){
  .v3d-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:9px 10px}
  .v3d-brand{flex:1 1 100%;min-width:0}
  .v3d-brand>span{font-size:9px}
  .v3d-brand .v3d-live{font-size:9px}
  .v3d-bar-actions{width:100%;max-width:none;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:5px;overflow-x:auto;scrollbar-width:none}
  .v3d-bar-actions::-webkit-scrollbar{display:none}
  .v3d-bar-actions #v3d-presentation,.v3d-bar-actions #v3d-auto,.v3d-bar-actions #v3d-export{display:none}
  .v3d-panel-toggle{display:inline-flex;flex:1 0 auto;min-height:34px}
  .v3d-engine-switch{flex:none}
  .v3d-engine-switch button{min-height:32px}
  .v3d-workspace{min-height:0}
  .studio-tree-panel,.studio-inspector-panel{
    top:8px;bottom:auto;left:8px;right:auto;width:min(340px,calc(100vw - 16px));
    max-height:calc(72dvh - 72px);height:auto;z-index:8;overflow:auto;
    padding:13px 11px 16px;border:1px solid rgba(174,183,194,.2);
    border-radius:12px;background:rgba(17,22,28,.98);
  }
  .studio-tree-panel{transform:translateX(calc(-100% - 18px))}
  .studio-inspector-panel{
    top:auto;left:8px;right:8px;bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;max-height:min(42dvh,340px);transform:translateY(calc(100% + 18px));
  }
  .studio-tree-panel.is-open,.studio-inspector-panel.is-open{transform:translate(0,0)}
  .studio-panel-head{margin-bottom:10px}
  .studio-inspector-panel .studio-properties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .studio-property{padding:8px}
  .v3d-controls{max-height:132px;overflow:hidden;padding:6px 8px calc(7px + env(safe-area-inset-bottom))}
  .v3d-row{display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:5px;overflow-x:auto;overflow-y:hidden;padding:1px 0 3px;scrollbar-width:none}
  .v3d-row::-webkit-scrollbar{display:none}
  .v3d-row+.v3d-row{margin-top:4px}
  .v3d-row button{flex:0 0 auto;min-height:34px;padding:7px 9px;font-size:9px;white-space:nowrap}
}
@media(max-width:380px){
  .v3d-panel-toggle{font-size:9px;padding-inline:6px}
  .studio-inspector-panel .studio-properties{grid-template-columns:1fr}
}

/* ============================================================
   v4.81 · Инспектор — «шторка снизу» на ≤700px (направление 7:
   панели не перекрывают сцену; инспектор выезжает снизу,
   дерево остаётся боковой панелью).
   ============================================================ */
@media(max-width:700px){
  .studio-inspector-panel{
    top:auto;left:8px;right:8px;bottom:8px;width:auto;
    max-height:min(72dvh,560px);
    transform:translateY(calc(100% + 20px));
    border-radius:14px 14px 12px 12px;
  }
  .studio-inspector-panel.is-open{transform:translateY(0)}
  .studio-inspector-panel .studio-panel-head::before{
    content:"";display:block;width:38px;height:4px;margin:0 auto 10px;
    border-radius:2px;background:rgba(145,169,183,.28);
  }
}

/* ===== v4.83 · Widget Library: MiniGauge (f2 #10), unknown-трёхсостояние, внимание на объекте ===== */
.w-gauge{margin-top:5px; display:flex; flex-direction:column; gap:3px}
.w-gauge-track{position:relative; height:4px; border-radius:2px; background:rgba(203,211,220,.09)}
.w-gauge-band{position:absolute; top:0; bottom:0; border-radius:2px; background:rgba(203,211,220,.22)}
.w-gauge-tick{position:absolute; top:-2px; width:2px; height:8px; border-radius:1px; background:var(--ink2); transform:translateX(-1px)}
.w-gauge.lo .w-gauge-tick,.w-gauge.hi .w-gauge-tick{background:var(--gold)}
.w-gauge.lo .w-gauge-cap,.w-gauge.hi .w-gauge-cap{color:var(--gold)}
.w-gauge-cap{font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; color:var(--muted)}
.w-gauge.none .w-gauge-track{background:transparent; border:1px dashed var(--line2); height:6px}
.w-gauge.none .w-gauge-cap{color:var(--muted)}
.metric[data-attn]{box-shadow:inset 2px 0 0 var(--gold)}
.chip-health.unknown{border:1px dashed var(--line2); background:transparent}
.chip-health.unknown span{color:var(--muted)}
.hm-legend i.nodata{background:repeating-linear-gradient(45deg, rgba(203,211,220,.14) 0 2px, transparent 2px 5px); border:1px solid var(--line)}

/* ===== v4.84 · Палитра команд (Ctrl/⌘K, f2 #20) + тур по интерфейсу ===== */
.lbx-overlay{position:fixed; inset:0; z-index:60; background:rgba(10,11,13,.62); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center; padding:16px}
.lbx-overlay[hidden]{display:none}
@media (min-width:601px){.lbx-overlay{align-items:center}}
.lbx-sheet{width:100%; max-width:520px; background:var(--bg2); border:1px solid var(--line2);
  border-radius:16px; padding:16px; box-shadow:var(--sh3)}
#palette-input{width:100%; margin-top:8px; padding:10px 12px; font-size:14px;
  background:var(--bg3); border:1px solid var(--line2); border-radius:10px; color:var(--ink)}
#palette-list .pal-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  cursor:pointer; font-size:13px; color:var(--ink2)}
#palette-list .pal-item:hover,#palette-list .pal-item.sel{background:var(--accent-dim); color:var(--accent2)}