/* ==========================================================================
   СервисДом · дизайн-система
   Нейтральное ядро + тема Izburg (палитра брендбука). White-label через токены.
   Шрифт: PF Square Sans Pro
   ========================================================================== */

@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-MedItalic.ttf") format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Thin.ttf") format("truetype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-XBlack.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-LightItalic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"PF Square Sans"; src:url("fonts/PFSquareSansPro-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }

/* ---------- Токены ---------- */
:root{
  /* Бренд — переопределяется темой (white-label) */
  --brand:#294C59;          /* тёмно-синий брендбука */
  --brand-700:#1F3B46;
  --brand-600:#244653;
  --brand-ink:#16323D;
  --brand-soft:#E3EEF2;     /* светлая заливка из голубого */
  --brand-softer:#F0F6F8;
  --on-brand:#ffffff;

  --accent-warm:#E8C7AF;    /* бежевый */
  --accent-warm-soft:#F7EDE3;
  --brown:#877363;          /* светло-коричневый */

  /* Нейтрали — тёплый строгий грей */
  --ink:#2A2E33;            /* близко к тёмно-серому 32363B */
  --ink-2:#565C64;
  --muted:#878D96;
  --faint:#A8AEB6;
  --paper:#F1F2EF;
  --surface:#ffffff;
  --surface-2:#F7F8F5;
  --surface-3:#EFF1EC;
  --border:#E4E6E0;
  --border-2:#D7DAD2;
  --border-strong:#C7CBC2;

  /* Функциональные — приглушённые, «строгие» */
  --ok:#2E7B58;   --ok-soft:#E5F0EA;
  --warn:#BC842A; --warn-soft:#F7EEDC;
  --bad:#B0463C;  --bad-soft:#F6E5E2;
  --info:#3A6A7E; --info-soft:#E3EEF2;

  /* Геометрия / плотность (переопределяется Tweaks) */
  --r:14px;
  --r-sm:9px;
  --r-pill:999px;
  --pad:22px;        /* плотность контента */
  --gap:24px;
  --row:14px;

  --shadow-1:0 1px 2px rgba(20,30,36,.05), 0 2px 6px rgba(20,30,36,.04);
  --shadow-2:0 6px 22px rgba(20,30,36,.10);
  --shadow-pop:0 18px 50px rgba(16,28,34,.22);

  --sidebar-w:248px;
  --topbar-h:62px;
  --maxw:1320px;
  --font-sans:"PF Square Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Компактная плотность */
:root[data-density="compact"]{ --pad:16px; --gap:16px; --row:11px; --sidebar-w:226px; --topbar-h:56px; }
/* Строгие углы */
:root[data-corners="sharp"]{ --r:7px; --r-sm:5px; }

/* ========== Чистый стиль (data-look="clean") — спокойный, профессиональный ==========
   Холодные нейтрали, нейтрализация бежевых плашек, приглушённые статусы, строже геометрия. */
html[data-look="clean"]{
  --paper:#F4F5F7; --surface-2:#F8F9FB; --surface-3:#EFF1F4;
  --border:#E6E8EC; --border-2:#DADDE2; --border-strong:#C8CCD3;
  --ink:#22262B; --ink-2:#535A62; --muted:#858C95; --faint:#A7ADB6;
  --accent-warm:#CBD3DA; --accent-warm-soft:#EDF0F3; --brown:#546069;
  --ok:#2F7A57; --ok-soft:#EAF1ED;
  --warn:#A3782F; --warn-soft:#F4EEE2;
  --bad:#A94A41; --bad-soft:#F5EAE8;
  --info:#41697E; --info-soft:#E9EFF3;
  --r:11px; --r-sm:7px;
  --shadow-1:0 1px 2px rgba(23,28,34,.04);
  --shadow-2:0 4px 16px rgba(23,28,34,.07);
  --shadow-pop:0 16px 44px rgba(18,24,30,.18);
}
html[data-look="clean"] .eyebrow{ color:var(--muted); letter-spacing:.12em; }
html[data-look="clean"] .pill{ font-weight:500; }
html[data-look="clean"] .cd{ background:transparent; }
html[data-look="clean"] .cd:hover{ background:var(--surface-2); }
html[data-look="clean"] .ring::after{ inset:7px; }
html[data-look="clean"] .stat .lbl .ic{ display:none; }
html[data-look="clean"] .state-pill:hover{ transform:none; }
html[data-look="clean"] .ach:hover{ transform:none; }
/* монохромные иконки систем (перебиваем inline-цвета из данных) */
html[data-look="clean"] .sys-ic{ background:var(--surface-3) !important; color:var(--ink-2) !important; }
html[data-look="clean"] .d-ic{ background:var(--surface-3) !important; color:var(--ink-2) !important; }
html[data-look="clean"] .ring{ --rc:var(--brand) !important; }
html[data-look="clean"] .syscard{ --sc:var(--border-strong) !important; }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font-sans);
  background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  letter-spacing:.002em;
}
.ic{ flex:none; vertical-align:middle; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brand-soft); }

/* ---------- App shell ---------- */
.app{ min-height:100vh; }
.topbar{
  height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:18px; padding:0 22px; position:sticky; top:0; z-index:40;
}
.brand{ display:flex; align-items:center; gap:11px; min-width:var(--sidebar-w); padding-right:18px; }
.brand .logo-img{ height:22px; width:auto; display:block; }
.brand .logo-mark{ width:30px; height:30px; border-radius:8px; background:var(--brand); color:var(--on-brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none; }
.brand .logo-word{ font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.brand .logo-word b{ color:var(--brand); font-weight:700; }
.brand .sep{ width:1px; height:24px; background:var(--border-2); }

.house-pick{ display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:var(--r-sm);
  cursor:pointer; transition:.15s; max-width:280px; }
.house-pick:hover{ background:var(--surface-2); }
.house-pick .h-ava{ width:30px; height:30px; border-radius:8px; background:var(--accent-warm-soft); color:var(--brown);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.house-pick > div{ min-width:0; }
.house-pick .h-name{ font-weight:500; font-size:13.5px; line-height:1.25; white-space:nowrap; }
.house-pick .h-addr{ font-size:11.5px; color:var(--muted); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.house-pick .ic{ color:var(--faint); }

.topbar .spacer{ flex:1; }
.roleswitch{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; }
.roleswitch button{ border:none; background:transparent; padding:6px 14px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; color:var(--muted); display:flex; align-items:center; gap:6px; transition:.15s; }
.roleswitch button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); font-weight:600; }
.icon-btn{ width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); display:flex; align-items:center; justify-content:center; position:relative; transition:.15s; }
.icon-btn:hover{ border-color:var(--border-strong); color:var(--ink); }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--bad); border:2px solid var(--surface); }
.me{ width:38px; height:38px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }

/* ---------- Layout ---------- */
.layout{ display:flex; align-items:flex-start; }
.sidebar{ width:var(--sidebar-w); flex:none; padding:16px 14px; position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h)); overflow-y:auto; border-right:1px solid var(--border); background:var(--surface); }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:13.5px; font-weight:500; cursor:pointer; margin-bottom:2px; transition:.13s; position:relative; }
.nav-item:hover{ background:var(--surface-2); color:var(--ink); }
.nav-item.on{ background:var(--brand-soft); color:var(--brand-ink); font-weight:600; }
.nav-item.on .ic{ color:var(--brand); }
.nav-item .ic{ color:var(--faint); }
.nav-item.on .ic, .nav-item:hover .ic{ color:var(--brand); }
.nav-item .soon{ margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
  border:1px solid var(--border-2); border-radius:var(--r-pill); padding:2px 6px; font-weight:600; }
.nav-sect{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; padding:16px 12px 6px; }
.nav-foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

.main{ flex:1; min-width:0; padding:var(--pad) calc(var(--pad) + 6px); }
.wrap{ max-width:var(--maxw); margin:0 auto; }

/* ---------- Page header ---------- */
.page-head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:var(--gap); }
.page-head .pt{ flex:1; min-width:0; }
.eyebrow{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--brand); font-weight:600; margin-bottom:5px; }
h1.page{ font-size:22px; font-weight:700; letter-spacing:-.018em; margin:0 0 5px; }
.page-sub{ color:var(--muted); font-size:14px; max-width:60ch; }
.page-head .acts{ display:flex; gap:9px; align-items:center; flex:none; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--r-sm);
  border:1px solid transparent; font-weight:600; font-size:13.5px; transition:.14s; white-space:nowrap; }
.btn .ic{ margin:-2px 0; }
.btn.primary{ background:var(--brand); color:var(--on-brand); }
.btn.primary:hover{ background:var(--brand-600); }
.btn.ghost{ background:var(--surface); color:var(--ink); border-color:var(--border-2); }
.btn.ghost:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.btn.subtle{ background:var(--surface-2); color:var(--ink-2); }
.btn.subtle:hover{ background:var(--surface-3); color:var(--ink); }
.btn.sm{ padding:6px 11px; font-size:12.5px; }

/* ---------- Cards & primitives ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-1); }
.card.pad{ padding:var(--pad); }
.grid{ display:grid; gap:var(--gap); }
.c2{ grid-template-columns:repeat(2,1fr); }
.c3{ grid-template-columns:repeat(3,1fr); }
.c4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1180px){ .c4{ grid-template-columns:repeat(2,1fr); } .c3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .c2,.c3,.c4{ grid-template-columns:1fr; } }

.sec-title{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; letter-spacing:-.01em; margin:6px 0 12px; }
.sec-title .count{ font-size:12.5px; color:var(--muted); font-weight:500; }
.sec-title .line{ flex:1; height:1px; background:var(--border); }
.muted{ color:var(--muted); }

/* Pills / badges */
.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11.5px; border-radius:var(--r-pill); font-weight:600; }
.pill .ic{ margin:-1px 0; }
.pill.ok{ background:var(--ok-soft); color:var(--ok); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); }
.pill.bad{ background:var(--bad-soft); color:var(--bad); }
.pill.info{ background:var(--info-soft); color:var(--info); }
.pill.brand{ background:var(--brand-soft); color:var(--brand-ink); }
.pill.gray{ background:var(--surface-3); color:var(--ink-2); }
.dot-s{ width:7px; height:7px; border-radius:50%; flex:none; }

/* Stat tiles */
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow-1); }
.stat .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.stat .lbl .ic{ color:var(--faint); }
.stat .num{ font-size:25px; font-weight:700; letter-spacing:-.02em; margin-top:7px; line-height:1; }
.stat .num small{ font-size:14px; color:var(--muted); font-weight:500; letter-spacing:0; }
.stat .sub{ font-size:12.5px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:5px; }

/* Progress */
.bar{ height:6px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--ok); border-radius:var(--r-pill); transition:width .5s ease; }
.bar > i.warn{ background:var(--warn); }
.bar > i.bad{ background:var(--bad); }
.bar > i.brand{ background:var(--brand); }

/* Health ring */
.ring{ --val:0; --rc:var(--ok); width:118px; height:118px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(var(--rc) calc(var(--val)*1%), var(--surface-3) 0); }
.ring::after{ content:""; position:absolute; inset:11px; background:var(--surface); border-radius:50%; }
.ring .rv{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.ring .rv b{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.ring .rv span{ font-size:11px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- System cards ---------- */
.sys-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:1180px){ .sys-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .sys-grid{ grid-template-columns:1fr; } }
.syscard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--pad);
  cursor:pointer; transition:.16s; box-shadow:var(--shadow-1); position:relative; }
.syscard:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateY(-2px); }
.syscard .top{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.sys-ic{ width:42px; height:42px; border-radius:11px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none; }
.syscard .nm{ font-weight:600; font-size:15px; letter-spacing:-.01em; }
.syscard .eqn{ font-size:12px; color:var(--muted); }
.syscard .sum{ font-size:12.5px; color:var(--ink-2); line-height:1.45; min-height:36px; margin-bottom:13px; }
.syscard .pf{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.syscard .pf b{ color:var(--ink); font-weight:600; }
.syscard.flag::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px; background:var(--warn); }

/* ---------- Equipment list ---------- */
.eq{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px;
  display:flex; gap:14px; align-items:flex-start; cursor:pointer; transition:.15s; }
.eq:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-1); }
.eq .eq-ic{ width:40px; height:40px; border-radius:10px; background:var(--surface-3); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; flex:none; }
.eq.flag .eq-ic{ background:var(--warn-soft); color:var(--warn); }
.eq .eq-main{ flex:1; min-width:0; }
.eq .eq-nm{ font-weight:600; font-size:14px; }
.eq .eq-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.eq .eq-attrs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.attr{ font-size:11.5px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px 9px; color:var(--ink-2); }
.attr b{ color:var(--ink); font-weight:600; }
.eq .eq-right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.eq .eq-pct{ font-size:12px; font-weight:600; color:var(--ink-2); }

/* ---------- Passport ---------- */
.passport-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:var(--gap); align-items:start; }
@media (max-width:980px){ .passport-grid{ grid-template-columns:1fr; } }
.spec-list .row{ display:grid; grid-template-columns:168px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; align-items:baseline; }
.spec-list .row:last-child{ border-bottom:none; }
.spec-list .k{ color:var(--muted); }
.spec-list .v{ color:var(--ink); font-weight:500; }
.spec-list .v.empty{ color:var(--faint); font-weight:400; font-style:italic; }
.acc{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-1); }
.acc + .acc{ margin-top:12px; }
.acc-head{ display:flex; align-items:center; gap:13px; padding:15px var(--pad); cursor:pointer; }
.acc-head:hover{ background:var(--surface-2); }
.acc-head .ah-ic{ width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none; }
.acc-head .ah-t{ flex:1; }
.acc-head .ah-t b{ font-size:15px; font-weight:600; }
.acc-head .ah-t span{ display:block; font-size:12px; color:var(--muted); }
.acc-head .chev{ color:var(--faint); transition:.2s; }
.acc.open .acc-head .chev{ transform:rotate(180deg); }
.acc-body{ display:none; padding:4px var(--pad) 16px; }
.acc.open .acc-body{ display:block; }

/* Passport summary / completeness sidebar */
.fill-card .frow{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.fill-card .frow + .frow{ border-top:1px solid var(--border); }
.fill-card .frow .fn{ flex:1; font-size:13px; }
.fill-card .frow .fp{ font-size:12px; font-weight:600; width:38px; text-align:right; color:var(--ink-2); }
.fill-card .frow .bar{ width:84px; }

/* Photo strip */
.photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo{ aspect-ratio:4/3; border-radius:var(--r-sm); background:var(--surface-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--faint); position:relative; overflow:hidden; }
.photo.add{ border-style:dashed; cursor:pointer; }
.photo.add:hover{ color:var(--brand); border-color:var(--brand); }
.photo .cap{ position:absolute; bottom:0; left:0; right:0; padding:6px 8px; font-size:10.5px; color:#fff;
  background:linear-gradient(transparent,rgba(20,30,36,.6)); }
.ph-tex{ position:absolute; inset:0; }

/* Quests */
.quest{ display:flex; gap:13px; align-items:center; padding:13px 15px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); }
.quest + .quest{ margin-top:8px; }
.quest .q-ic{ width:36px; height:36px; border-radius:9px; background:var(--accent-warm-soft); color:var(--brown);
  display:flex; align-items:center; justify-content:center; flex:none; }
.quest.done{ opacity:.62; }
.quest.done .q-ic{ background:var(--ok-soft); color:var(--ok); }
.quest .q-b{ flex:1; min-width:0; }
.quest .q-t{ font-weight:600; font-size:13.5px; }
.quest .q-d{ font-size:12px; color:var(--muted); }
.quest .q-r{ font-size:11.5px; color:var(--ok); font-weight:600; margin-top:3px; }

/* Task rows */
.task{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.task:last-child{ border-bottom:none; }
.task .t-b{ flex:1; min-width:0; }
.task .t-t{ font-weight:500; font-size:13.5px; }
.task .t-m{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:2px; }

/* Map / hero on passport */
.house-hero{ position:relative; border-radius:var(--r); overflow:hidden; min-height:188px; color:#fff;
  background:linear-gradient(135deg,var(--brand-ink),var(--brand) 70%); display:flex; flex-direction:column; justify-content:flex-end; padding:var(--pad); }
.house-hero .htex{ position:absolute; inset:0; opacity:.5; }
.house-hero .hc{ position:relative; z-index:1; }
.house-hero .ha{ font-size:12px; opacity:.85; display:flex; align-items:center; gap:6px; }
.house-hero h2{ margin:5px 0 0; font-size:21px; font-weight:700; letter-spacing:-.01em; }
.house-hero .chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.house-hero .hchip{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill);
  padding:4px 11px; font-size:12px; font-weight:500; backdrop-filter:blur(4px); }

/* ---------- Drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(18,28,33,.42); z-index:90; opacity:0; pointer-events:none; transition:.22s; }
.scrim.on{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:560px; max-width:94vw; background:var(--surface); z-index:91;
  box-shadow:var(--shadow-pop); transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.1,1); overflow-y:auto; }
.drawer.on{ transform:none; }
.dwh{ padding:18px var(--pad); border-bottom:1px solid var(--border); display:flex; gap:14px; align-items:flex-start;
  position:sticky; top:0; background:var(--surface); z-index:2; }
.dwh .d-ic{ width:46px; height:46px; border-radius:12px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none; }
.dwh .d-t{ flex:1; }
.dwh .crumb{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.dwh h3{ margin:3px 0 0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.dwtabs{ display:flex; gap:4px; padding:0 var(--pad); border-bottom:1px solid var(--border); position:sticky; top:83px; background:var(--surface); z-index:2; }
.dwtabs button{ border:none; background:transparent; padding:11px 12px; font-size:13px; color:var(--muted); font-weight:500;
  border-bottom:2px solid transparent; }
.dwtabs button.on{ color:var(--ink); border-bottom-color:var(--brand); font-weight:600; }
.dwbody{ padding:var(--pad); }
.kv{ display:grid; grid-template-columns:150px 1fr; gap:10px 14px; font-size:13.5px; }
.kv .k{ color:var(--muted); }
.kv .v{ font-weight:500; }
.files{ display:flex; flex-direction:column; gap:7px; }
.fchip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; color:var(--ink); text-decoration:none; transition:.14s; }
.fchip:hover{ border-color:var(--brand); background:var(--brand-softer); }
.fchip .ic{ color:var(--brand); flex:none; }
.fchip .fx{ margin-left:auto; color:var(--faint); }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:80px 20px; max-width:440px; margin:40px auto; }
.empty .e-ic{ width:64px; height:64px; border-radius:18px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.empty h2{ font-size:20px; margin:0 0 8px; }
.empty p{ color:var(--muted); margin:0 0 18px; }

/* segmented */
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; }
.seg button{ border:none; background:transparent; padding:6px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500; color:var(--muted); }
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); font-weight:600; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff;
  padding:11px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:500; z-index:120; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow-pop); }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* PWA frame */
.pwa-stage{ display:none; }

/* без анимации входа — стабильный рендер и чистый экспорт */
[data-screen]{ }

/* ========================================================================
   DASHBOARD
   ======================================================================== */
.dash-head{ display:flex; align-items:baseline; gap:18px; }
.dash-head .page{ font-size:15px; font-weight:600; }
.dash-row1{ display:grid; grid-template-columns:2.6fr 1.1fr 1.3fr; gap:var(--gap); margin-bottom:var(--gap); align-items:stretch; }
@media (max-width:1100px){ .dash-row1{ grid-template-columns:1fr 1fr; } .state-card{ grid-column:1/-1; } }
@media (max-width:720px){ .dash-row1{ grid-template-columns:1fr; } }

/* Ряд 1 — компактная высота */
.dash-row1 > .card.pad{ padding:13px 16px; }

/* Состояние дома */
.state-card{ display:flex; gap:18px; align-items:center; }
.state-card .ring{ width:76px; height:76px; }
.state-card .ring .rv b{ font-size:20px; }
.sc-body{ flex:1; min-width:0; }
.sc-h{ font-size:15px; font-weight:600; margin:0 0 3px; letter-spacing:-.01em; }
.sc-body .muted{ margin-bottom:9px !important; }
.state-pills{ display:flex; flex-wrap:wrap; gap:7px; }
.state-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:600; cursor:pointer; transition:.14s; border:1px solid transparent; }
.state-pill.bad{ background:var(--bad-soft); color:var(--bad); } .state-pill.warn{ background:var(--warn-soft); color:var(--warn); }
.state-pill.ok{ background:var(--ok-soft); color:var(--ok); } .state-pill.brand{ background:var(--brand-soft); color:var(--brand-ink); }
.state-pill:hover{ filter:brightness(.97); transform:translateY(-1px); }

/* Температура */
.temp-card{ display:flex; flex-direction:column; }
.tc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.tc-label{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-2); }
.tc-label .ic{ color:var(--brown); }
.temp-row{ display:flex; align-items:baseline; justify-content:space-between; padding:1px 0; }
.temp-row .lab{ font-size:12.5px; color:var(--muted); }
.temp-row .val{ font-size:23px; font-weight:700; letter-spacing:-.02em; }
.temp-row .val.warm{ color:#C2772C; } .temp-row .val.cold{ color:#3A6A88; }
.tc-tip{ font-size:11.5px; color:var(--muted); line-height:1.3; margin:6px 0 7px; padding-top:6px; border-top:1px solid var(--border); }
.tc-status{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-2); margin-top:auto; }

/* Расходы */
.spend-card{ cursor:pointer; transition:.16s; display:flex; flex-direction:column; }
.spend-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); }
.sp-label{ font-size:12px; color:var(--muted); font-weight:500; }
.sp-month{ font-size:11.5px; color:var(--faint); margin-bottom:8px; }
.sp-amount{ font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.sp-compare{ font-size:12px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:7px; }
.sp-alert{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); margin-top:auto; padding-top:11px; }
.sp-alert .ic{ color:var(--faint); }

/* Календарь */
.cal-block{ padding:var(--pad); margin-bottom:var(--gap); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cal-title{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.cal-today-inline{ font-size:14px; font-weight:600; color:var(--muted); }
.cal-title .ic{ color:var(--brand); }
.cal-actions{ display:flex; align-items:center; gap:10px; }
.cal-nav{ display:flex; gap:5px; }
.cal-nav button{ width:34px; height:34px; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); color:var(--ink-2); font-size:17px; display:flex; align-items:center; justify-content:center; transition:.14s; }
.cal-nav button:hover{ border-color:var(--brand); color:var(--brand); }
.cal-grid{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.25fr); gap:26px; }
@media (max-width:900px){ .cal-grid{ grid-template-columns:1fr; gap:18px; } }
.cal-left, .cal-right{ min-width:0; }
.cal-left{ align-self:start; }
.cal-right{ border-left:1px solid var(--border); padding-left:26px; }
@media (max-width:900px){ .cal-right{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:18px; } }

.cal-today{ display:flex; align-items:baseline; gap:12px; padding:0 4px 12px; }
.ct-dow{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.ct-num{ font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.cal-mini{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-rows:42px; align-content:start; gap:5px; }
.cdh{ font-size:10.5px; text-transform:uppercase; color:var(--faint); text-align:center; padding:3px 0; font-weight:600; min-width:0; }
.cd{ height:42px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:10px; font-size:13px; color:var(--ink); cursor:pointer; transition:.12s; font-weight:500; background:transparent; border:1px solid var(--border); }
.cd:not(.empty):hover{ background:var(--surface-2); border-color:var(--border-strong); }
.cd.empty{ cursor:default; background:transparent; border-color:transparent; }
/* Дни с событиями — выделены рамкой и мягким фоном (обычные дни остаются «чистыми») */
html .cd.evt{ background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 42%, transparent); color:var(--brand-ink); font-weight:600; }
html .cd.over{ background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 50%, transparent); color:var(--bad); font-weight:600; }
/* Сегодня — всегда заметная заливка бренда, поверх любой темы */
html .cd.today{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
html .cd.today.evt{ background:var(--brand); color:var(--on-brand); }
.cd .cdc{ position:absolute; bottom:3px; right:3px; min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:var(--ok); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.cd.over .cdc{ background:var(--bad); }
.cd.today .cdc{ background:#fff; color:var(--brand); }
.cd.sel{ box-shadow:inset 0 0 0 2px var(--brand); }

/* События */
.cal-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ev-seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; }
.ev-seg button{ border:none; background:transparent; padding:6px 16px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500; color:var(--muted); }
.ev-seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); font-weight:600; }
.ev-list{ max-height:330px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:4px; }
.ev-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; transition:.14s; }
.ev-row:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.ev-bar{ width:4px; align-self:stretch; min-height:36px; border-radius:3px; flex:none; }
.ev-bar.bad{ background:var(--bad); } .ev-bar.warn{ background:var(--warn); } .ev-bar.ok{ background:var(--ok); }
.ev-b{ flex:1; min-width:0; }
.ev-t{ font-size:13.5px; font-weight:600; line-height:1.3; }
.ev-m{ display:flex; flex-wrap:wrap; gap:7px; font-size:11.5px; color:var(--muted); margin-top:2px; }
.ev-time{ font-weight:600; color:var(--ink-2); }
.ev-rec{ font-size:10.5px; color:var(--ink-2); background:var(--surface-3); border-radius:var(--r-pill); padding:3px 9px; font-weight:600; flex:none; }
.ev-empty{ text-align:center; padding:34px 20px; color:var(--muted); font-size:13px; }

/* Ряд 3 */
.dash-row3{ display:grid; grid-template-columns:3fr 1fr; gap:var(--gap); align-items:stretch; }
@media (max-width:900px){ .dash-row3{ grid-template-columns:1fr; } }
.reco-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.reco-ai{ width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.reco-title{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.rec{ display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--border); align-items:center; }
.rec-ic{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.rec.urgent .rec-ic{ background:var(--bad-soft); color:var(--bad); }
.rec.action .rec-ic{ background:var(--brand-soft); color:var(--brand); }
.rec.tip .rec-ic{ background:var(--warn-soft); color:var(--warn); }
.rec.smart .rec-ic{ background:var(--accent-warm-soft); color:var(--brown); }
.rec-b{ flex:1; min-width:0; }
.rec-t{ font-size:14px; font-weight:600; }
.rec-d{ font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:3px; }
.rec-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:none; margin-left:auto; }
@media (max-width:680px){ .rec{ flex-wrap:wrap; } .rec-acts{ margin-left:49px; justify-content:flex-start; } }

/* Вызвать мастера */
.master-card{ padding:var(--pad); display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; transition:.16s;
  background:linear-gradient(160deg, var(--brand-ink), var(--brand)); color:#fff; border:none; }
.master-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.mc-ic{ width:50px; height:50px; border-radius:13px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.mc-t{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.mc-s{ font-size:12.5px; opacity:.85; line-height:1.45; margin-top:5px; }
.mc-cta{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin-top:18px; }

/* геймификация off → скрыть только компактный виджет «Индекс дома» на Главной;
   раздел «Квесты» — это MVP и доступен всегда */