/* ============================================================
   LUXBOX PULT · Unified Design System v1
   Shared visual foundation for every app screen.
   Palette: soft graphite / cool slate; status colors stay semantic.
   This layer is intentionally loaded after legacy screen styles.
   ============================================================ */

/* ============================================================
   CANONICAL TOKENS (v4.46) — единственный источник токенов пульта.
   Не добавляйте :root в другие файлы — все токены живут здесь.
   Палитра: графит/серебро (Obsidian Silver), статусы: зелёный/янтарь/красный.
   ============================================================ */
:root{
  color-scheme:dark;
  --bg:#111214;
  --bg2:#17191d;
  --bg3:#1d1f24;
  --bg4:#25272d;
  --surface:#202227;
  --surface-raised:#25272d;
  --surface-soft:#1a1c20;
  --line:rgba(210,220,228,.085);
  --line2:rgba(210,220,228,.15);
  --stroke-soft:rgba(210,220,228,.085);
  --stroke-strong:rgba(210,220,228,.16);
  --ink:#E6E9EC;
  --ink2:#B8C0C8;
  --muted:#96A0AA;
  --text-primary:#E6E9EC;
  --text-secondary:#B8C0C8;
  --text-tertiary:#96A0AA;
  --accent:#91A9B7;
  --accent2:#B8C9D2;
  --accent-dim:rgba(145,169,183,.12);
  --accent-glow:rgba(145,169,183,.16);
  --gold:#D0AD79;
  --gold-dim:rgba(208,173,121,.13);
  --metal:#91A9B7;
  --metal-soft:rgba(145,169,183,.12);
  --green:#91b49f;
  --green2:#b0cbbb;
  --red:#d27e7e;
  --orange:#D0AD79;
  --blue:#91a8c0;
  --cyan:#8fb8bd;
  --brand:var(--accent);
  --brand2:var(--accent2);
  --brand-dim:var(--accent-dim);
  --r:12px;
  --r-s:9px;
  --r-xs:6px;
  --r-full:999px;
  --sh1:0 1px 2px rgba(0,0,0,.14);
  --sh2:0 8px 24px rgba(0,0,0,.22);
  --sh3:0 18px 48px rgba(0,0,0,.28);
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:300ms;
  --font:"Manrope",system-ui,sans-serif,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji";
  --mono:"Roboto Mono","SF Mono",monospace;
  --display:"Unbounded","Manrope",sans-serif;
  --sidebar-w:224px;
  --header-h:64px;
}

html,body{background:var(--bg);color:var(--ink)}
body{
  background:radial-gradient(ellipse at 78% -24%,rgba(145,169,183,.045),transparent 43%),var(--bg);
  font-family:var(--font);
  color:var(--ink);
}
header{
  background:rgba(20,21,24,.94);
  border-color:var(--line);
}
main{max-width:1320px}
.screen::before{
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(22px,2.8vw,28px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.18;
  margin:4px 2px 15px;
}

/* One material language across dashboard, forms and specialist panels. */
.hero,.card,.chart-card,
#screen-journal .jr-item,#screen-journal .journal-entry,
#screen-automation .sim-panel,
#screen-engineering .eng-canvas,
#screen-engineering .eng-readout,
#screen-engineering .eng-unit,
#screen-automation .sim-device,
#screen-automation .sim-rule,
.studio-panel{
  background:linear-gradient(145deg,#24252a,#1b1c20);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 8px 26px rgba(0,0,0,.14);
}
.hero{padding:clamp(14px,2vw,22px)}
.card,.chart-card{padding:clamp(14px,1.8vw,19px)}
#screen-devices .card,#screen-settings .card,#screen-water .card,
#screen-safety .card,#screen-climate .card,#screen-journal .card,
#screen-home .card{
  background:linear-gradient(145deg,#24252a,#1b1c20);
  border-color:var(--line);
}
#screen-automation .sim-panel{overflow:hidden}
#screen-engineering .eng-canvas{background:linear-gradient(145deg,#202227,#17191d)}
#screen-engineering .eng-readout,
#screen-engineering .eng-unit{background:rgba(255,255,255,.018)}
#screen-automation .sim-device{background:#1b1d21}
#screen-automation .sim-rule{background:rgba(255,255,255,.018)}

/* Shared hierarchy: quiet labels, clear values, consistent section rhythm. */
.sec-label,.sub-title{
  color:#929DA7;
  font:700 10px/1.4 var(--mono);
  letter-spacing:.09em;
  margin:24px 2px 11px;
}
.home-section-head,.home-3d-head,.engineering-head,.sim-pagehead{
  color:var(--ink);
}
.home-eyebrow,.engineering-kicker,.sim-kicker{
  color:#A9BAC4;
}
.hero-title{color:var(--text-secondary)}
.metric,.kpi-strip{
  border-color:var(--line);
  background:rgba(255,255,255,.025);
}
.metric{border-radius:10px}
.metric .k{color:var(--muted)}
.metric .v,.sim-reading strong{color:var(--ink)}
.kpi{color:var(--accent2);text-shadow:none}
.row{border-color:var(--line)}
.hint,.sim-pagehead p,.engineering-sub{color:var(--muted)}

/* Unified controls and touch targets. */
button{
  min-height:40px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:linear-gradient(180deg,#292D33,#22262B);
  color:#e2ded5;
  box-shadow:none;
  font-family:var(--font);
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
button.primary{
  background:linear-gradient(135deg,#AFC1CB,#91A9B7);
  border-color:#9FB5C1;
  color:#171B1F;
}
button.kill{background:rgba(210,126,126,.1);border-color:rgba(210,126,126,.48);color:#e3a0a0}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(145,169,183,.68);
  outline-offset:2px;
}
.chip{
  min-height:34px;
  border-radius:999px;
  border-color:var(--line);
  background:#292D33;
  color:var(--text-secondary);
}
.chip.active{
  color:var(--accent2);
  border-color:rgba(145,169,183,.42);
  background:var(--accent-dim);
  box-shadow:none;
}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=time],select,textarea{
  background:#191D22;
  border-color:var(--line2);
  border-radius:8px;
  color:var(--ink);
}
input::placeholder,textarea::placeholder{color:#7F8992}
input[type=range]{accent-color:var(--accent)}
.seg{border-color:var(--line);background:#191D22}
.seg button{background:transparent;box-shadow:none}
.seg button.active{background:var(--accent-dim);border-color:rgba(145,169,183,.3);color:var(--accent2)}

/* Navigation is the same product chrome on every screen. */
#tabbar{
  background:rgba(23,24,28,.96);
  border-color:var(--line);
}
nav#tabbar button{color:#929DA7}
nav#tabbar button.active{
  color:var(--accent2);
  background:rgba(145,169,183,.095);
}
nav#tabbar button.active::before{background:var(--accent)}
@media(min-width:601px){
  nav#tabbar{background:#191D22;border-color:var(--line)}
}
@media(max-width:760px){
  main{padding-left:14px;padding-right:14px}
  .screen::before{font-size:24px;margin-bottom:13px}
  .card,.chart-card{padding:14px}
}

/* Distinct technical data remains legible without introducing another brand palette. */
#screen-automation .sim-kicker,
#screen-engineering .engineering-kicker{color:#A9BAC4}
#screen-automation .sim-state{color:var(--accent2);border-color:rgba(145,169,183,.25);background:var(--accent-dim)}
#screen-automation .sim-chart .trace{stroke:var(--accent)}
#screen-automation .sim-device-icon{color:#B7C5CD;border-color:var(--line2);background:#292a2f}
#screen-engineering .eng-svg .pipe{stroke:#9AABB9}
#screen-engineering .eng-svg .water-fill{fill:#73959b}
#screen-engineering .eng-svg .air-path{stroke:#91A9B7}
#screen-engineering .eng-svg .light-beam{fill:rgba(145,169,183,.07);stroke:rgba(145,169,183,.16)}
#screen-engineering .eng-unit .capacity{color:var(--text-secondary)}
#screen-engineering .eng-note{border-left-color:var(--accent);background:var(--accent-dim)}
#screen-home .home-live-mark:not(.is-live){border-color:var(--line2)}
#screen-home .home-3d-preview{border-color:var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}

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

/* Home is one continuous dashboard: the hero, tank/system panels and lower sections
   share the same material and spacing instead of switching visual language on scroll. */
#screen-home .hero{
  background:linear-gradient(145deg,#24252a,#1b1c20);
  border-color:var(--line);
}
#screen-home .home-systems{
  margin-top:16px;
  padding:clamp(13px,2vw,20px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(145deg,#22262B,#1a1b1f);
  box-shadow:0 8px 26px rgba(0,0,0,.12);
}
#screen-home .home-tank-card,
#screen-home .home-system-card{
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:rgba(255,255,255,.022);
}
#screen-home .home-tank-card{min-height:124px}
#screen-home .home-system-icon{
  border:1px solid rgba(145,169,183,.14);
  background:var(--accent-dim);
  color:var(--accent2);
}
#screen-home .home-3d-preview{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(145deg,#22262B,#191a1e);
}
#screen-home .home-3d-head h2{color:var(--ink)}
#screen-home .home-action-row button{
  border-color:rgba(145,169,183,.2);
  border-radius:var(--r-s);
  background:rgba(145,169,183,.055);
}
#screen-home .home-action-row button b{color:var(--accent2)}
@media(max-width:680px){
  #screen-home .home-systems{padding:12px;border-radius:var(--r-s)}
  #screen-home .home-3d-preview{border-radius:var(--r-s)}
}


/* HOME FINAL PASS — remove legacy warm accents and keep one calm dashboard surface. */
#screen-home > .hero{
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 82% 8%,rgba(145,169,183,.065),transparent 42%),
    linear-gradient(145deg,#24272c 0%,#1b1e23 72%,#171a1e);
}
#screen-home .hero-title{
  color:var(--text-secondary);
  letter-spacing:.035em;
  text-transform:none;
}
#screen-home .home-hero-kicker,
#screen-home .home-eyebrow{
  color:#9EADB7;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.11em;
}
#screen-home .hero-top{border-color:var(--line)}
#screen-home .hero-top .big{color:var(--ink);text-shadow:none}
#screen-home .hero-sub .unit{color:var(--accent)}
#screen-home .hero-sub .dim{color:var(--muted)}
#screen-home .kpi-strip{
  border-color:var(--line);
  background:rgba(145,169,183,.045);
}
#screen-home .kpi-strip .kpi{color:var(--accent2)}
#screen-home .kpi-strip .kpi-label{color:var(--text-secondary)}
#screen-home .hero .metric{
  border-color:var(--line);
  background:rgba(255,255,255,.022);
}
#screen-home .home-systems{
  border-color:var(--line);
  background:linear-gradient(145deg,#22252a,#1a1d21);
}
#screen-home .home-section-head h2,
#screen-home .home-3d-head h2{color:var(--ink)}
#screen-home .home-live-mark{
  color:var(--text-secondary);
  border-color:var(--line2);
  background:rgba(255,255,255,.025);
}
#screen-home .home-tank-card,
#screen-home .home-system-card{
  border-color:var(--line);
  background:rgba(255,255,255,.022);
}
#screen-home .home-system-icon{
  color:var(--accent2);
  border-color:var(--line2);
  background:var(--accent-dim);
}
#screen-home .home-action-row button{
  border-color:var(--line2);
  background:rgba(145,169,183,.055);
  color:var(--text-secondary);
}
#screen-home .home-action-row button b{color:var(--accent2)}
#screen-home .home-action-row button:active{background:var(--accent-dim)}
#screen-home .home-3d-preview{
  border-color:var(--line);
  background:linear-gradient(145deg,#22252a,#1a1d21);
}
#screen-home .home-3d-head .v3d-open{
  border-color:var(--line2);
  background:rgba(145,169,183,.07);
  color:var(--accent2);
}
#screen-home .home-3d-preview .box-scene{
  border-color:var(--line);
  background:
    radial-gradient(ellipse at 50% 72%,rgba(145,169,183,.055),transparent 54%),
    linear-gradient(180deg,rgba(7,9,12,.12),rgba(7,9,12,.38));
}
#screen-home .home-scene-chip,
#screen-home .home-scene-capacity{
  border-color:var(--line2);
  background:rgba(17,19,22,.78);
  color:var(--text-secondary);
}
#screen-home .home-scene-chip b{color:var(--ink)}
#screen-home .home-scene-chip small{color:var(--muted)}
#screen-home .home-scene-actions button{
  border-color:var(--line2);
  background:rgba(17,19,22,.82);
  color:var(--text-secondary);
}
#screen-home .home-scene-actions button span{color:var(--accent2)}
#screen-home .box-hint{color:var(--muted)}
#screen-home #cycle-line .cycle-line{
  border-color:var(--line);
  background:rgba(255,255,255,.018);
}
#screen-home #tasks-list .task,
#screen-home #alerts .alert{
  border-color:var(--line);
  background:rgba(255,255,255,.02);
}
#screen-home .sec-label{
  color:#9EADB7;
}
#screen-home .banner.warn{
  border-color:rgba(145,169,183,.24);
  background:rgba(145,169,183,.07);
  color:#B8C9D2;
}
#screen-home .banner.bad{
  border-color:rgba(210,126,126,.3);
  background:rgba(210,126,126,.075);
  color:#E0A0A0;
}
#screen-home .banner.ok{
  border-color:rgba(145,180,159,.2);
  background:rgba(145,180,159,.055);
}


/* CLIMATE + DEVICES — instrument screens use the same neutral housing as Home. */
#screen-climate > .hero,
#screen-devices .card{
  border-color:var(--line);
  background:linear-gradient(145deg,#24272c,#1b1e23);
}
#screen-climate .hero-title{
  color:var(--text-secondary);
}
#screen-climate .metric{
  border-color:var(--line);
  background:rgba(145,169,183,.045);
}
#screen-climate .metric .v{color:var(--ink)}
#screen-climate #chart-seg{
  border-color:var(--line);
  background:rgba(0,0,0,.18);
}
#screen-climate #chart-seg button.active{
  border-color:rgba(145,169,183,.3);
  background:var(--accent-dim);
  color:var(--accent2);
}
#screen-climate .chart-card{
  border-color:var(--line);
  background:linear-gradient(145deg,#22252a,#1a1d21);
}
#screen-devices .card{
  border-color:var(--line);
}
#screen-devices .big.num{color:var(--ink)}
#screen-devices input[type=range]{accent-color:var(--accent)}
#screen-devices .row{border-color:var(--line)}
#screen-devices .chip.active{
  border-color:rgba(145,169,183,.3);
  background:var(--accent-dim);
  color:var(--accent2);
}
#screen-devices .tl{
  border:1px solid var(--line);
  background:rgba(255,255,255,.018);
}
#screen-climate .sec-label,
#screen-devices .sec-label{
  color:#9EADB7;
}


/* SAFETY / WATER / JOURNAL / SETTINGS — final screen-family harmonization. */
#screen-safety .health,
#screen-devices .health{gap:9px}
#screen-safety .health .chip-health,
#screen-devices .health .chip-health{
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:rgba(255,255,255,.022);
}
#screen-safety .banner,#screen-home > .banner{border-radius:var(--r-s)}
#screen-safety .card .hint,#screen-water .hint,#screen-journal .hint,#screen-settings .hint{color:var(--muted)}
#screen-safety #event-log .event,#screen-safety #event-log .log-item{
  border-color:var(--line);background:rgba(255,255,255,.018);border-radius:var(--r-s);
}
#screen-safety .chip.sim{background:#24282e;border-color:var(--line2);color:var(--text-secondary)}
#screen-safety .chip.sim.active{border-color:rgba(145,169,183,.34);background:var(--accent-dim);color:var(--accent2)}

/* Water tools: inputs, dose tables and saved mixes share neutral surfaces. */
#screen-water .sub-title{color:var(--text-secondary);font-family:var(--mono);letter-spacing:.12em}
#screen-water .field label,#screen-settings .field label,#screen-journal .field label{color:var(--text-secondary)}
#screen-water .link-card{border-color:var(--line2);background:rgba(145,169,183,.055);color:var(--accent2);border-radius:var(--r-s)}
#screen-water .chip.active,#screen-water #nu-fert .chip.active,#screen-water #mix-chips .chip.active{
  border-color:rgba(145,169,183,.38);background:var(--accent-dim);color:var(--accent2);
}
#screen-water .card [class*="dose"],#screen-water .card [class*="mix"],
#screen-water .card [class*="schedule"],#screen-water .card [class*="fert"]{border-color:var(--line)}
#screen-water .card table,#screen-water .card th,#screen-water .card td{border-color:var(--line)}
#screen-water .card th{color:var(--text-secondary)}
#screen-water .card td{color:var(--ink)}

/* Journal: entries and composer share the same material. */
#screen-journal .jr-item,#screen-journal .journal-entry,#screen-journal .jr-entry,
#screen-journal #jr-list > div{
  border:1px solid var(--line);border-radius:var(--r-s);
  background:linear-gradient(145deg,#24272c,#1b1e23);
}
#screen-journal .jr-item + .jr-item,#screen-journal .journal-entry + .journal-entry{margin-top:9px}
#screen-journal textarea,#screen-journal input:not([type="file"]){background:#191d22;border-color:var(--line2);color:var(--ink)}
#screen-journal .chip.active{border-color:rgba(145,169,183,.38);background:var(--accent-dim);color:var(--accent2)}

/* Settings: configuration forms use the shared field rhythm and contrast. */
#screen-settings .field{gap:6px}
#screen-settings .field label{color:var(--text-secondary);font-size:10px}
#screen-settings .check{color:var(--text-secondary)}
#screen-settings .check input{accent-color:var(--accent)}
#screen-settings .card .sub-title{color:var(--accent2)}
#screen-settings .card button:not(.primary):not(.kill){
  background:linear-gradient(180deg,#292d33,#22262b);border-color:var(--line2);color:var(--text-secondary);
}
#screen-settings .card button.primary{background:linear-gradient(135deg,#AFC1CB,#91A9B7);border-color:#9FB5C1;color:#171b1f}

/* Engineering + automation: replace legacy warm-metal highlights, retain semantic states. */
#screen-engineering .eng-svg .light-beam{fill:rgba(145,169,183,.07);stroke:rgba(145,169,183,.16)}
#screen-engineering .eng-meter i{background:linear-gradient(90deg,#718b9e,#91A9B7)}
#screen-automation .sim-state{border-color:rgba(145,169,183,.25);background:var(--accent-dim);color:var(--accent2)}
#screen-automation .sim-footnote strong{color:var(--text-secondary)}

/* Global control text uses cool neutral gray; semantic warning/alarm colors stay intact. */
button:not(.primary):not(.kill){color:var(--text-secondary)}

/* ============================================================
   COMPONENT PASS 01 · shared buttons and card surfaces
   Normalize interaction states without changing control behavior.
   ============================================================ */
:root{
  --control-bg:#292D33;
  --control-bg-hover:#31363D;
  --control-bg-pressed:#20252B;
  --control-border:rgba(210,220,228,.16);
  --control-border-hover:rgba(184,201,210,.34);
  --control-disabled:rgba(135,145,155,.42);
  --card-top:rgba(255,255,255,.025);
  --card-bottom:rgba(255,255,255,.012);
  --card-shadow:0 8px 26px rgba(0,0,0,.14);
}

/* Base action: same height, type and neutral graphite material everywhere. */
button{
  min-height:40px;
  border:1px solid var(--control-border);
  border-radius:8px;
  background:linear-gradient(180deg,var(--control-bg),#22262B);
  color:var(--text-secondary);
  box-shadow:none;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  -webkit-tap-highlight-color:transparent;
}
button:hover:not(:disabled):not([aria-disabled="true"]){
  border-color:var(--control-border-hover);
  background:linear-gradient(180deg,var(--control-bg-hover),#262B31);
  color:var(--ink);
}
button:active:not(:disabled):not([aria-disabled="true"]){
  background:var(--control-bg-pressed);
  border-color:rgba(145,169,183,.42);
  transform:translateY(1px);
}
button:disabled,
button[aria-disabled="true"]{
  opacity:.48;
  cursor:not-allowed;
  filter:saturate(.55);
  box-shadow:none;
  transform:none;
}

/* Primary = one clear action; destructive = semantic red, never brand accent. */
button.primary{
  background:linear-gradient(135deg,#AFC1CB,#91A9B7);
  border-color:#9FB5C1;
  color:#171B1F;
  font-weight:700;
}
button.primary:hover:not(:disabled):not([aria-disabled="true"]){
  background:linear-gradient(135deg,#C0CFD7,#AFC1CB);
  border-color:#C0CFD7;
  color:#171B1F;
  box-shadow:0 3px 14px rgba(145,169,183,.13);
}
button.primary:active:not(:disabled):not([aria-disabled="true"]){
  background:#91A9B7;
  color:#171B1F;
}
button.kill{
  background:rgba(210,126,126,.1);
  border-color:rgba(210,126,126,.48);
  color:#E3A0A0;
}
button.kill:hover:not(:disabled):not([aria-disabled="true"]){
  background:rgba(210,126,126,.17);
  border-color:rgba(210,126,126,.72);
  color:#F0B1B1;
}
button.ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text-secondary);
  box-shadow:none;
}
button.ghost:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--accent-dim);
  border-color:rgba(145,169,183,.18);
  color:var(--accent2);
}

/* Compact controls retain their intended geometry while sharing the same states. */
.chip{
  color:var(--text-secondary);
  border-color:var(--line);
  background:#292D33;
}
.chip:hover:not(:disabled):not([aria-disabled="true"]){
  color:var(--ink);
  border-color:var(--control-border-hover);
}
.chip.active{
  color:var(--accent2);
  border-color:rgba(145,169,183,.42);
  background:var(--accent-dim);
}
.seg button.active,
.v3d-row button.active,
.v3d-mini.active{
  color:var(--accent2);
  border-color:rgba(145,169,183,.42);
  background:var(--accent-dim);
}

/* One shared card material; specialized cards keep their own internal layout. */
.card,.chart-card,.hero,
#screen-automation .sim-panel,
#screen-automation .sim-device,
#screen-automation .sim-rule,
#screen-engineering .eng-canvas,
#screen-engineering .eng-readout,
#screen-engineering .eng-unit,
.studio-panel{
  border-color:var(--line);
  box-shadow:var(--card-shadow);
}
.card,.chart-card{
  background:linear-gradient(145deg,#24272C 0%,#1B1E23 100%);
}
.metric,.kpi-strip,
#screen-home .home-tank-card,
#screen-home .home-system-card,
#screen-safety .health .chip-health,
#screen-devices .health .chip-health{
  border-color:var(--line);
  background:var(--card-top);
  box-shadow:none;
}
#screen-automation .sim-device,
#screen-automation .sim-rule,
#screen-engineering .eng-readout,
#screen-engineering .eng-unit{
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
  box-shadow:none;
}

/* Keep high-contrast focus visible on keyboard and switch navigation. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(145,169,183,.72);
  outline-offset:2px;
}

/* ============================================================
   COMPONENT PASS 02 · fields, selectors, chips and switches
   Shared form language; semantic device/status colors preserved.
   ============================================================ */
:root{
  --field-bg:#191D22;
  --field-bg-focus:#1D2228;
  --field-border:rgba(184,192,200,.18);
  --field-border-focus:rgba(145,169,183,.62);
  --field-placeholder:#7F8992;
}

/* Text, numeric, date/time, select and multiline fields. */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  color:var(--ink);
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  font-family:var(--font);
  font-size:13px;
  line-height:1.4;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover{
  border-color:rgba(184,201,210,.3);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--field-border-focus);
  background:var(--field-bg-focus);
  box-shadow:0 0 0 3px rgba(145,169,183,.09);
}
input::placeholder,
textarea::placeholder{
  color:var(--field-placeholder);
  opacity:1;
}
select{
  color-scheme:dark;
}
select option{
  color:var(--ink);
  background:#20242A;
}
input:disabled,
select:disabled,
textarea:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Labels and field grouping: readable but visually secondary. */
.field label,
.sim-control label,
#screen-settings .field label,
#screen-water .field label,
#screen-journal .field label{
  color:var(--text-secondary);
}
.field{min-width:0}
.field input,
.field select,
.field textarea{max-width:100%}

/* Native checkbox/radio keep native semantics and keyboard operation. */
input[type="checkbox"],
input[type="radio"]{
  accent-color:#AFC1CB;
  width:17px;
  height:17px;
  cursor:pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{cursor:not-allowed;opacity:.5}
label.check{
  color:var(--text-secondary);
  line-height:1.45;
}
label.check input{flex:none}

/* Range controls: consistent track and thumb; blue water/device overrides remain meaningful. */
input[type="range"]{
  accent-color:var(--accent);
  height:5px;
  border-radius:99px;
  background:#3A4149;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  width:18px;height:18px;
  border:2px solid #20242A;
  border-radius:50%;
  background:#AFC1CB;
  box-shadow:0 0 0 3px rgba(145,169,183,.10);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;
  border:2px solid #20242A;
  border-radius:50%;
  background:#AFC1CB;
  box-shadow:0 0 0 3px rgba(145,169,183,.10);
}

/* Filter chips and segmented selectors share a restrained selected state. */
.chip,
.seg button{
  border-color:var(--control-border);
  background:#252A30;
  color:var(--text-secondary);
  box-shadow:none;
}
.chip.active,
.seg button.active{
  border-color:rgba(145,169,183,.46);
  background:rgba(145,169,183,.12);
  color:var(--accent2);
  box-shadow:inset 0 0 0 1px rgba(145,169,183,.035);
}
.chip.sim.active,
#screen-safety .chip.sim.active{
  border-color:rgba(210,126,126,.42);
  background:rgba(210,126,126,.11);
  color:#E3A0A0;
}

/* Toggle control used by the isolated Automation Lab simulator. */
.sim-toggle{
  min-height:0;
  width:38px;
  height:22px;
  padding:3px;
  border:1px solid var(--control-border);
  border-radius:99px;
  background:#292E34;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  transition:background .16s ease,border-color .16s ease;
}
.sim-toggle::after{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#89939D;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .16s ease,background .16s ease;
}
.sim-toggle[aria-pressed="true"]{
  background:rgba(145,169,183,.28);
  border-color:rgba(145,169,183,.55);
}
.sim-toggle[aria-pressed="true"]::after{
  transform:translateX(15px);
  background:#C2D0D8;
}

/* Instrument readouts remain distinct from editable fields. */
.chip-health{
  border-color:var(--line);
  background:linear-gradient(145deg,#24282E,#1D2126);
}
.chip-health b{color:var(--muted)}
.chip-health.ok span{color:var(--green)}
.chip-health.bad span{color:var(--red)}

@media (max-width:600px){
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,textarea{font-size:14px}
  .chip{min-height:36px}
  .field label{font-size:10px}
}

/* ============================================================
   COMPONENT PASS 03 · typography hierarchy and live reservoirs
   CSS-only motion: telemetry still controls fill height.
   ============================================================ */
:root{
  --type-display:clamp(27px,3vw,36px);
  --type-section:clamp(18px,2vw,22px);
  --type-card:14px;
  --type-caption:11px;
  --type-micro:9px;
}

/* Shared heading rhythm across application screens. */
.screen-title,
.screen-head h1,
.page-title{
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--type-display);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.045em;
}
.sec-label,
.section-title,
.home-section-head h2{
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--type-section);
  font-weight:620;
  line-height:1.25;
  letter-spacing:-.035em;
}
.card-title,
.panel-title,
.widget-title{
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:var(--type-card);
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.015em;
}
.kpi,.metric .v,.num,.tank-unit-value,.tank-unit-volume,
.tank-visual-head b,.tank-visual-foot b,.home-tank-top b,
.home-tank-bottom strong,.home-tank-value,.home-tank-bottom span,
#screen-devices #d-light-val{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
}
.kpi,.metric .v{letter-spacing:-.045em}
.kpi-label,.metric .k,.home-eyebrow,.tank-unit-name,
.tank-unit-state,.tank-pair-total span{
  font-family:var(--mono);
  letter-spacing:.105em;
  line-height:1.45;
}
.caption,.hint,.muted,.freshness,
.home-tank-bottom span,.tank-unit-state{
  color:var(--muted);
}
@media(max-width:600px){
  .screen-title,.screen-head h1,.page-title{font-size:26px}
  .sec-label,.section-title,.home-section-head h2{font-size:18px}
}

/* A reservoir should feel like water, not a flat colored rectangle.
   Slow surface travel + soft moving caustics; no JavaScript or fake readings. */
.tank-liquid,
.home-tank-liquid{
  overflow:hidden;
  background-image:
    linear-gradient(105deg,rgba(255,255,255,.11),transparent 26%,rgba(255,255,255,.08) 48%,transparent 72%),
    linear-gradient(180deg,rgba(142,190,198,.24),rgba(62,112,129,.08) 42%,rgba(31,75,91,.12));
  background-size:190% 100%,100% 100%;
  background-position:0 0,0 0;
  animation:tank-water-caustics 8s linear infinite;
  will-change:background-position;
}
.tank-liquid::before,
.home-tank-liquid::before{
  content:"";
  position:absolute;
  z-index:1;
  left:-12%;
  top:-3px;
  width:124%;
  height:7px;
  border:0;
  border-radius:48% 52% 0 0 / 65% 65% 0 0;
  background:
    radial-gradient(ellipse at 18% 100%,rgba(222,247,244,.85) 0 16%,transparent 17%),
    radial-gradient(ellipse at 62% 0%,rgba(197,231,229,.78) 0 20%,transparent 21%),
    linear-gradient(180deg,rgba(198,232,230,.72),rgba(130,188,194,.2));
  background-size:58px 9px,72px 9px,100% 100%;
  animation:tank-water-ripple 4.8s ease-in-out infinite alternate;
  box-shadow:0 0 9px rgba(143,204,207,.22);
}
.tank-liquid::after,
.home-tank-liquid::after{
  content:"";
  position:absolute;
  inset:5px -35% 0;
  z-index:1;
  pointer-events:none;
  opacity:.42;
  background:repeating-linear-gradient(168deg,
    transparent 0 13px,
    rgba(214,242,238,.12) 14px,
    transparent 16px 27px);
  animation:tank-water-drift 11s linear infinite;
}
.tank-vessel,
.home-tank-visual{isolation:isolate}
.tank-gloss{z-index:3}
.tank-mark{z-index:4}
.home-tank-value{z-index:4}
.tank-unit.is-pending .tank-liquid,
.home-tank-card.no-reading .home-tank-liquid{
  animation:none;
  background:none;
  border:0;
}
@keyframes tank-water-caustics{
  0%{background-position:0% 0,0 0}
  100%{background-position:190% 0,0 0}
}
@keyframes tank-water-ripple{
  0%{transform:translateX(-3%) translateY(1px) scaleY(.82)}
  50%{transform:translateX(2%) translateY(-1px) scaleY(1.08)}
  100%{transform:translateX(5%) translateY(1px) scaleY(.9)}
}
@keyframes tank-water-drift{
  0%{transform:translate3d(-3%,0,0)}
  100%{transform:translate3d(3%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .tank-liquid,.home-tank-liquid,
  .tank-liquid::before,.home-tank-liquid::before,
  .tank-liquid::after,.home-tank-liquid::after{
    animation:none!important;
    transition:none!important;
    will-change:auto;
  }
}


/* ---------- Canvas «Живой день»: световой таймлайн (v4.31) ---------- */
.sun-timeline{position:relative;margin:2px 0 10px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line)}
.sun-timeline canvas{display:block;width:100%;height:128px}
@media(max-width:360px){.sun-timeline canvas{height:112px}}

/* ---------- Canvas «VPD-кольцо» на Главной (v4.35) ---------- */
.vpd-gauge{position:relative;width:150px;height:150px;flex:none}
.vpd-gauge canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vpd-gauge-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}
.vpd-gauge-val .big{font-size:30px;line-height:1.05;letter-spacing:-.02em}
.vpd-gauge-val .unit{font-size:10px;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.hero-sub{padding-top:0;justify-content:center}
@media(max-width:360px){.vpd-gauge{width:128px;height:128px}.vpd-gauge-val .big{font-size:25px}}

/* ===== Управление: объединённая вкладка (Автоматизация / Устройства / Схема) ===== */
#control-head{position:sticky;top:var(--header-h);z-index:6;background:var(--bg);padding:2px 0 8px;margin:0 0 6px}
#control-head::before{
  content:"Управление";display:block;margin:4px 2px 13px;
  color:var(--ink);font:700 clamp(22px,2.8vw,28px)/1.18 var(--font);letter-spacing:-.045em;
}
#control-seg{margin-bottom:0}
#control-seg button{
  flex:1;min-height:44px;padding:10px 8px;font-size:11px;font-weight:600;letter-spacing:.03em;
  border-radius:8px;background:transparent;border-color:transparent;color:var(--text-secondary);
}
#control-seg button.active{background:var(--accent-dim);border-color:rgba(145,169,183,.3);color:var(--accent2)}
#screen-automation::before,#screen-devices::before,#screen-engineering::before{display:none}
@media(max-width:600px){#control-seg button{font-size:10.5px;padding:10px 6px}}

/* ===== UI-пачка 2: контраст хинтов, шкала заголовков, статистика Главной, бейдж таймлайна ===== */
#screen-settings .field label{color:var(--accent2)}
#screen-settings .hint{color:var(--text-secondary);font-size:11px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.home-section-head h2,.home-3d-head h2,.card>h2,.sim-pagehead h1,.screen h2{
  font-size:clamp(17px,2.2vw,21px);font-weight:650;letter-spacing:-.03em;line-height:1.25;
}
#screen-home .kpi-strip{
  border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(255,255,255,.022);padding:14px 16px;
}
#screen-home .kpi-strip .kpi{font:500 23px/1.15 var(--mono);letter-spacing:-.02em}
#screen-home .kpi-strip .kpi-label{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.sun-timeline{position:relative}
.sun-timeline::after{
  content:"СЕГОДНЯ";position:absolute;top:10px;right:12px;z-index:2;
  padding:5px 9px;border:1px solid var(--line2);border-radius:6px;
  background:rgba(17,18,20,.62);color:var(--text-secondary);
  font:700 9px var(--mono);letter-spacing:.12em;pointer-events:none;
}
/* HUD данных «Живого дня»: чипы фотопериода/отсчёта/лампы/стадии (v4.87) */
.sun-hud{
  position:absolute;left:9px;right:9px;bottom:8px;z-index:2;
  display:flex;gap:4px;overflow:hidden;pointer-events:none
}
.sun-chip{
  flex:none;max-width:112px;overflow:hidden;text-overflow:ellipsis;
  padding:2px 6px;border:1px solid rgba(255,255,255,.09);border-radius:6px;
  background:rgba(16,20,30,.52);color:rgba(202,212,224,.8);
  font:600 8px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
@media(max-width:340px){.sun-hud .sun-chip:nth-child(4){display:none}}
.sun-chip.is-warn{color:#e0a94a;border-color:rgba(224,169,74,.4);background:rgba(42,31,12,.5)}

/* ===== Ярус B, пачка 1: точка росы + тепловая карта стабильности ===== */
.dew-scale{height:4px;border-radius:2px;background:rgba(255,255,255,.06);margin:8px 0 6px;overflow:hidden}
.dew-scale i{display:block;height:100%;width:0;border-radius:2px;background:var(--green);transition:width .4s var(--ease)}
.dew-scale i.warn{background:var(--gold)}
.dew-scale i.bad{background:var(--red)}
.dew-hint{font:600 10px var(--mono);letter-spacing:.05em;color:var(--muted)}
.heatmap-card .hm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.heatmap-card .hm-head b{font-size:13px}
.hm-sub{font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted)}
#hm-seg{margin-bottom:10px}
#hm-canvas{width:100%;display:block}
.hm-legend{display:flex;gap:14px;margin-top:10px;font:600 9px var(--mono);letter-spacing:.08em;color:var(--muted)}
.hm-legend span{display:inline-flex;align-items:center;gap:6px}
.hm-legend i{width:10px;height:10px;border-radius:3px}
.hm-legend i.ok{background:rgba(145,180,159,.65)}
.hm-legend i.warn{background:rgba(208,173,121,.7)}
.hm-legend i.bad{background:rgba(210,126,126,.8)}

/* ===== v4.63 · Компактные «всё хорошо»-состояния: меньше пустых баннеров на планшете ===== */
#status-banner.banner.ok{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 13px; margin-top:6px;
  border-radius:var(--r-full); font-size:11px;
}
#status-banner.banner.ok::before{display:none}
#status-banner.banner.ok .ic{font-size:12px}
#ev-open.link-card, .link-card[data-open-events]{
  padding:8px 12px; margin-top:8px;
  font-size:11.5px; text-align:right;
}

/* ===== v4.62 · Планшеты и альбом: таб-бар всегда снизу, без левого «дерева» ===== */
body{flex-direction:column}
@media (min-width:601px){
  /* шапка — снова на всю ширину сверху (sticky), без сдвига под сайдбар */
  header{
    position:sticky; top:0; left:0; right:0;
    height:var(--header-h); min-height:var(--header-h);
    padding:0 20px; z-index:30;
  }
  main{
    margin:0 auto;
    padding:22px 28px calc(100px + 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 8px calc(7px + env(safe-area-inset-bottom));
    border:0; border-top:1px solid var(--line);
  }
  nav#tabbar::before, nav#tabbar::after{display:none}
  nav#tabbar button{
    width:auto; max-width:150px; min-width:0; flex:1 1 0;
    height:56px; min-height:56px;
    flex-direction:column; justify-content:center; gap:4px;
    padding:4px 6px;
    border:1px solid transparent; border-radius:10px;
    font-size:11px; font-weight:700; letter-spacing:.015em; text-transform:none;
  }
  nav#tabbar button .ic{width:auto; font-size:18px}
  nav#tabbar button:hover{transform:none}
  nav#tabbar button.active::before{
    top:-7px; bottom:auto; left:50%; width:24px; height:2px;
    transform:translateX(-50%); border-radius:2px;
  }
}
@media (min-width:1200px){
  main{padding-left:56px; padding-right:56px}
}
/* широкие экраны: контент не растягивается в нитку — сетки в 2 колонки */
@media (min-width:1100px){
  .health{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:601px) and (max-width:1099px){
  .health{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== v4.64 · Box-display: без шапки, без дублей заголовков, узкие кнопки таб-бара ===== */
header{display:none}
.screen::before{display:none}
.home-status-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px}
.home-status-row .banner{margin-top:0}
.home-status-row .freshness{margin-left:auto}
@media (min-width:601px){
  nav#tabbar{justify-content:center; gap:10px}
  nav#tabbar button{flex:0 0 96px; width:96px; max-width:96px}
}

/* ===== v4.65 · Box-display: таб-бар — узкий плавающий док; «Управление» без дубля-тайтла, панель подвкладок прижата к верху ===== */
#control-head{top:0}
#control-head::before{display:none}
@media (min-width:601px){
  nav#tabbar{
    left:50%; right:auto; transform:translateX(-50%);
    width:max-content; max-width:calc(100% - 24px);
    height:60px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    padding:0 12px;
    border:1px solid var(--line); border-radius:16px;
    box-shadow:0 14px 36px rgba(0,0,0,.38);
  }
  nav#tabbar button{height:46px; min-height:46px}
  nav#tabbar button.active::before{top:-6px}
}

/* ===== v4.66 · Box-display: верх — просто кнопки подвкладок без панели/пустоты; низ — компактный док (меньше высота и шрифт) ===== */
#control-head{background:var(--bg); padding:0; margin:0 0 2px}
#control-seg{gap:2px; margin-bottom:4px; background:transparent; border:0; padding:0}
#control-seg button{
  min-height:30px; padding:5px 6px; font-size:10px; font-weight:600;
  border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent; white-space:nowrap;
}
#control-seg button.active{
  background:transparent; border:0; border-bottom:2px solid var(--accent); color:var(--accent2)
}
@media (max-width:600px){
  nav#tabbar{
    height:50px; padding:0 6px calc(2px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  nav#tabbar button{height:42px; min-height:42px; gap:2px; font-size:9px; max-width:72px}
  nav#tabbar button .ic{height:16px}
  nav#tabbar button .ic svg{width:16px; height:16px}
}

/* ===== v4.67 · Box-display: верх «приклеен» (fixed), док снизу тоньше, мелкий шрифт ===== */
#control-head{
  position:fixed; top:0; left:0; right:0; z-index:25;
  background:var(--bg); padding:2px 24px 0; margin:0;
}
#control-seg{max-width:1320px; margin:0 auto 4px}
body.ctl-tabs main{padding-top:42px}
@media (min-width:601px){
  nav#tabbar{
    height:44px; min-height:44px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    padding:0 10px;
  }
  nav#tabbar button{
    height:32px; min-height:32px; flex:0 0 84px; width:84px; max-width:84px;
    font-size:9px; gap:1px;
  }
  nav#tabbar button .ic{height:15px}
  nav#tabbar button .ic svg{width:15px; height:15px}
  main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  #control-head{padding:2px 12px 0}
  #control-seg{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  #control-seg::-webkit-scrollbar{display:none}
  #control-seg button{flex:1 0 auto}
  nav#tabbar{
    height:46px; min-height:46px;
    padding:0 6px calc(2px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  nav#tabbar button{height:38px; min-height:38px; gap:2px; font-size:9px; max-width:72px}
  nav#tabbar button .ic{height:15px}
  nav#tabbar button .ic svg{width:15px; height:15px}
  main{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* ===== v4.68 · Главная: убраны «Демо», «Все события →» и ok-чип «Активных аварий не обнаружено» (warn/bad остаются — аварии видны) ===== */
#screen-home #conn{display:none}
#screen-home #ev-open{display:none}
#screen-home #status-banner.ok{display:none}

/* ===== v4.82 · Графит-минимализм: HMI-дисциплина «цвет = аномалия» (f2 #8–10) =====
   Правило: тихий экран = всё в норме. Нейтраль — норма/данные/подключение;
   цвет — только отклонение (warn — янтарь, bad — красный) и интерактивный
   выбор (акцент). Штрих/пунктир = неизвестно (unknown ≠ off). */
body{font-variant-numeric:tabular-nums}
.num,.v,.big,.kpi,.badge,.chip,.pill,.w-badge,.w-target,.freshness{font-variant-numeric:tabular-nums}

/* тихие «норма»-состояния */
.badge.ok{background:rgba(203,211,220,.07); color:var(--ink2)}
.hero .badge{background:rgba(203,211,220,.07); color:var(--ink2); border-color:var(--line)}
#status-banner.banner.ok{background:rgba(203,211,220,.05); border:1px solid var(--line); color:var(--ink2)}
.chip-health.ok span{color:var(--ink2)}
.w-target{background:rgba(203,211,220,.06); color:var(--muted)}
.w-badge.live{background:rgba(203,211,220,.07); color:var(--muted)}
.w-badge.demo{background:transparent; color:var(--muted); border:1px dashed var(--line2)}
.pill.demo,.pill.live{background:rgba(203,211,220,.07); color:var(--muted); border-color:var(--line)}
.pill.demo .dot,.pill.live .dot{background:var(--muted); box-shadow:none}
.hm-legend i.ok{background:rgba(203,211,220,.18)}

/* unknown — третье состояние (не «выкл» и не «норма»): пунктир, без цвета */
.badge.unknown{background:transparent; color:var(--muted); border:1px dashed var(--line2)}
.pill.attn{background:var(--gold-dim); color:var(--gold); border-color:transparent}
.pill.attn.bad{background:rgba(212,126,126,.12); color:var(--red)}

/* ============================================================
   Каталог виджетов (Этап 4 «персонализация», v4.85)
   Галерея с живыми превью (ha-simui / home-assistant-react) +
   блок «Мои виджеты» на Главной (Glasshopper: реестр шаблонов).
   ============================================================ */
.home-widgets.is-empty{display:none}
.wc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px}
.wc-card{background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-s);
  padding:12px; min-width:0; overflow:hidden; display:flex; flex-direction:column; gap:3px}
.wc-card.wc-wide{grid-column:1 / -1}
.wc-card .metric{background:transparent; border:none; padding:0}
.wc-head{display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:2px}
.wc-head b{font-size:10px; letter-spacing:.09em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wc-spark{width:100%; height:34px; display:block; margin-top:6px; opacity:.92}
.wc-ring{width:112px; height:112px; display:block; margin:6px auto 2px}
.wc-ring-sm{width:64px; height:64px; flex:none; display:block}
.wc-sun{width:100%; height:56px; display:block; margin-top:6px; border-radius:var(--r-s)}
.wc-center{text-align:center}
.wc-text{font-size:14px !important; line-height:1.35; letter-spacing:0}
.wc-cycle{display:flex; align-items:center; gap:10px}
.wc-sensors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:4px}
.wc-quick{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.wc-quick .chip{flex:1 1 44%; justify-content:center}
@media(max-width:360px){.wc-sensors{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* галерея каталога (Настройки) */
.wc-cat-head{font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:14px 0 6px}
.wc-item{border:1px solid var(--line); border-radius:var(--r-s); padding:12px;
  margin-top:8px; background:var(--bg2)}
.wc-prev{opacity:.92; pointer-events:none}
.wc-meta{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:8px}
.wc-meta b{font-size:12.5px}
.wc-meta span{font-size:11px; color:var(--muted); line-height:1.5}

/* режим правки виджета (v4.86): двойной тап по карточке на Главной */
.wc-card.wc-editing{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-dim)}
.wc-edit{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; padding:8px;
  background:var(--accent-dim); border:1px dashed var(--line2); border-radius:var(--r-s)}
.wc-edit .chip{flex:1 1 44%; justify-content:center; font-size:11px; padding:6px 8px}
.wc-edit .chip.active{background:var(--accent); color:var(--bg); border-color:var(--accent)}
.wc-edit-hint{margin-left:auto; font-size:11px; color:var(--muted); opacity:.55; cursor:pointer}
.wc-card.wc-editing .wc-head b{color:var(--accent)}