/* ============================================================
   GERZOG — screens.css
   Экранные блоки: онбординг, главная-корень, замок-герой,
   листы доступа, состояния (loading/empty/error/offline/soon)
   ============================================================ */

/* ====================== ОНБОРДИНГ ====================== */
.onb {
  position: relative; z-index: 10; flex: 1; min-height: 0;
  display: flex; flex-direction: column; padding: 8px 28px 30px;
  overflow-y: auto; scrollbar-width: none;
}
.onb::-webkit-scrollbar { display: none; }
.onb > * { flex: none; }   /* дети не ужимаются → кнопки сохраняют размер, лишнее скроллится */
.onb__brandmark {
  width: 92px; height: 92px; border-radius: 26px; margin: 18px auto 0;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(120% 120% at 30% 20%, oklch(0.26 0.03 210), oklch(0.15 0.02 224));
  border: 1px solid var(--hair-cyan);
  box-shadow: 0 0 60px -10px color-mix(in oklch, var(--cyan) calc(50% * var(--glow-mult)), transparent),
              0 1px 0 oklch(0.6 0.04 210 / 0.3) inset;
}
.onb__wordmark { font-size: 30px; font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em; margin-top: 22px; text-align: center; }
.onb__sub { text-align: center; color: var(--ink-2); margin-top: 10px; font-size: 14px; line-height: 1.5; }

.field { position: relative; }
.field__label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px 2px; }
.input {
  width: 100%; height: 54px; border-radius: var(--r-md); padding: 0 16px;
  background: color-mix(in oklch, var(--bg-1) 70%, transparent);
  border: 1px solid var(--hair); font-size: 16px; color: var(--ink-0);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--hair-cyan);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--cyan) 12%, transparent); }
.input-row { display: flex; align-items: center; gap: 10px; }

.checkrow { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.checkbox {
  width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-2) 60%, transparent);
  display: grid; place-items: center; color: var(--bg-0); transition: 0.2s;
}
.checkbox.is-on { background: var(--cyan); border-color: var(--cyan); }
.link { color: var(--cyan-soft); text-decoration: none; }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in oklch, var(--bg-1) 60%, transparent);
  border: 1px solid var(--hair); border-radius: 14px; padding: 4px; gap: 4px;
}
.seg__opt { height: 38px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  display: grid; place-items: center; transition: 0.2s; }
.seg__opt.is-on { background: color-mix(in oklch, var(--bg-2) 95%, transparent); color: var(--ink-0);
  box-shadow: 0 1px 0 oklch(0.6 0.03 210 / 0.18) inset, 0 4px 14px -8px oklch(0.05 0.02 224 / 0.7); }

/* install hint */
.install {
  display: flex; gap: 14px; align-items: center; padding: 16px;
  border-radius: var(--r-md); border: 1px dashed var(--hair-cyan);
  background: color-mix(in oklch, var(--cyan) 6%, transparent);
}

/* ====================== ГЛАВНАЯ — КОРЕНЬ ====================== */
.hero-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 8px 4px 2px; }
.hero-head > .iconbtn:last-child { justify-self: end; }
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hero-brand .brand-lock__tag { margin-top: 0; }
/* Главная: верх (плитки + «Быстрый доступ») закреплён, карточки скроллятся */
.home-view { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.home-top { flex: none; padding-bottom: 4px; }
.home-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.home-scroll::-webkit-scrollbar { display: none; }
.home-scroll__pad { padding: 6px 20px 18px; }

/* живой атмосферный фон Главной — мягкие свечения + сетка, медленно «дышит» */
.home-view > .home-top, .home-view > .home-scroll { position: relative; z-index: 1; }
.home-view::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(95% 50% at 50% -6%, color-mix(in oklch, var(--cyan) 13%, transparent), transparent 60%),
    radial-gradient(70% 45% at 92% 24%, color-mix(in oklch, var(--gold) 9%, transparent), transparent 55%),
    radial-gradient(85% 50% at 6% 78%, color-mix(in oklch, var(--cyan) 8%, transparent), transparent 60%);
  animation: auraFloat 16s ease-in-out infinite alternate;
}
.home-view::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(circle at 1px 1px, oklch(0.6 0.02 220 / 0.06) 1px, transparent 0);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(85% 70% at 50% 28%, #000 0%, transparent 82%);
  mask-image: radial-gradient(85% 70% at 50% 28%, #000 0%, transparent 82%);
}
@keyframes auraFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0.85; }
  100% { transform: translateY(-2%) scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .home-view::before { animation: none; } }
.avatar {
  width: 48px; height: 48px; border-radius: 15px; position: relative;
  background: linear-gradient(150deg, oklch(0.3 0.04 200), oklch(0.22 0.05 90));
  border: 1px solid var(--hair); display: grid; place-items: center;
  font-weight: 700; font-size: 17px; color: var(--ink-0);
}
.iconbtn {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--ink-1); position: relative;
  /* единый «красивый» вид как у кнопки назад на лице замка (.sf-hbtn): объём + вдавленная тень */
  background: linear-gradient(180deg, var(--bg-2), var(--bg-0));
  box-shadow: var(--recess);
  transition: transform .13s var(--ease);
}
.iconbtn:active { transform: scale(0.94); }
.iconbtn__badge { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--alarm); box-shadow: 0 0 8px var(--alarm); }

/* root — person + 3 doors radial */
.root {
  position: relative; margin: 22px 0 6px; padding: 8px 0;
}
.root__person {
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto; position: relative;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 40% 25%, oklch(0.28 0.035 205), oklch(0.16 0.02 222));
  border: 1px solid var(--hair-cyan);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--cyan) 5%, transparent),
              0 0 60px -14px color-mix(in oklch, var(--cyan) calc(55% * var(--glow-mult)), transparent);
}
.root__person::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed color-mix(in oklch, var(--cyan) 22%, transparent);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .root__person::before{ animation: none; } }

.doors { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.door {
  position: relative; display: flex; align-items: center; gap: 15px; padding: 16px;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--glass); border: 1px solid var(--hair);
  box-shadow: var(--shadow-card); transition: border-color 0.25s, transform 0.12s var(--ease);
}
.door:active { transform: scale(0.99); }
.door__glyph {
  width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent); border: 1px solid var(--hair);
  position: relative;
}
.door--home { border-color: var(--hair-cyan); }
.door--home .door__glyph { color: var(--cyan); box-shadow: 0 0 26px -8px color-mix(in oklch, var(--cyan) calc(60% * var(--glow-mult)), transparent); }
.door--work { border-color: var(--hair-gold); }
.door--work .door__glyph { color: var(--gold); box-shadow: 0 0 26px -8px color-mix(in oklch, var(--gold) calc(50% * var(--glow-mult)), transparent); }
.door--soon { opacity: 0.72; }
.door--soon .door__glyph { color: var(--ink-3); }
.door__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.door__meta { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.door__edge {
  position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--cyan), transparent);
}
.door--work .door__edge { background: linear-gradient(var(--gold), transparent); }
.door--soon .door__edge { display: none; }

/* четыре плитки-двери в одну строку (Дом / Работа / Досуг / Инвестиции) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 4px 12px; border-radius: 16px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--hair);
  box-shadow: var(--shadow-card); transition: border-color 0.25s, transform 0.12s var(--ease);
}
.tile:active { transform: scale(0.96); }
.tile__glyph {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent); border: 1px solid var(--hair);
}
.tile__title { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.tile__edge { position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.5; }
.tile--home, .tile--leisure { border-color: var(--hair-cyan); }
.tile--home .tile__glyph, .tile--leisure .tile__glyph { color: var(--cyan); box-shadow: 0 0 22px -10px color-mix(in oklch, var(--cyan) calc(60% * var(--glow-mult)), transparent); }
.tile--work, .tile--invest { border-color: var(--hair-gold); }
.tile--work .tile__glyph, .tile--invest .tile__glyph { color: var(--gold); box-shadow: 0 0 22px -10px color-mix(in oklch, var(--gold) calc(50% * var(--glow-mult)), transparent); }
.tile--work .tile__edge, .tile--invest .tile__edge { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* премиум-карточка быстрого доступа (квартира) — 2 в ряд, фото + кругляшок + статус */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qcard { position: relative; display: flex; flex-direction: column; width: 100%; text-align: left;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair-cyan);
  background: var(--glass); box-shadow: var(--shadow-card); transition: transform 0.12s var(--ease); }
.qcard:active { transform: scale(0.98); }
.qcard__edge { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.qcard__photo { position: relative; height: 104px; overflow: hidden; display: flex;
  background-size: cover; background-position: center;
  background-color: color-mix(in oklch, var(--bg-2) 70%, transparent); }
.qcard__ph { margin: auto; color: var(--ink-3); }
.qcard__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, oklch(0.05 0.02 224 / 0.04) 42%, oklch(0.05 0.02 224 / 0.5)); }
.qcard .qlock__ring { z-index: 2; opacity: 0.55; width: 104px; height: 104px; right: -24px; top: -24px;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--cyan) 50%, transparent)); }
.qcard__chip { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; }
.qcard__chip .chip { height: 24px; font-size: 9.5px; padding: 0 9px; max-width: 100%; }
.qcard__body { padding: 11px 13px 13px; }
.qcard__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcard__meta { font-size: 11.5px; color: var(--ink-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* тон статуса красит рамку и бортик карточки */
.qcard--gold { border-color: var(--hair-gold); }
.qcard--gold .qcard__edge { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.qcard--alarm { border-color: color-mix(in oklch, var(--alarm) 36%, transparent); }
.qcard--alarm .qcard__edge { background: linear-gradient(90deg, transparent, var(--alarm), transparent); }
.qcard--ink { border-color: var(--hair); }
.qcard--ink .qcard__edge { background: linear-gradient(90deg, transparent, var(--ink-2), transparent); }
/* выбор цвета статуса в настройках квартиры */
.tone-row { display: flex; gap: 12px; margin-top: 12px; }
.tone-dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--hair); background: var(--glass); transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; }
.tone-dot.is-on { border-color: var(--cyan-soft); box-shadow: 0 0 0 1px var(--hair-cyan); }
.tone-dot:active { transform: scale(0.94); }
.tone-dot__c { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 10px -1px currentColor; }

/* пустое состояние зоны «Быстрый доступ» */
.qa-empty { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r-md);
  border: 1px dashed var(--hair); background: color-mix(in oklch, var(--bg-1) 50%, transparent); }
.qa-empty__ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: var(--cyan); border: 1px solid var(--hair-cyan); background: color-mix(in oklch, var(--cyan) 8%, transparent); }
.qa-empty__text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* карточка объекта в плоском списке двери (квартира/дом) */
.objcard { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 10px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass);
  box-shadow: var(--shadow-card); transition: transform 0.12s var(--ease), border-color 0.2s; }
.objcard:active { transform: scale(0.99); border-color: var(--hair-cyan); }
.objcard__photo { width: 78px; height: 78px; border-radius: 14px; flex: none; overflow: hidden; display: grid; place-items: center;
  background-size: cover; background-position: center; background-color: color-mix(in oklch, var(--bg-2) 70%, transparent);
  color: var(--ink-3); border: 1px solid var(--hair); }
.objcard__body { flex: 1; min-width: 0; }
.objcard__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objcard__meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objcard__dev { font-size: 11px; color: var(--cyan-soft); margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; }

/* quick lock card */
.qlock {
  position: relative; overflow: hidden; padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 90% 0%, color-mix(in oklch, var(--cyan) 14%, transparent), transparent 55%),
    var(--glass);
  border: 1px solid var(--hair-cyan); box-shadow: var(--shadow-card);
}
.qlock__ring { position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; opacity: 0.5; }

/* ====================== ЗАМОК — ГЕРОЙ ====================== */
.lockhero {
  position: relative; padding: 12px 20px 10px; text-align: center;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in oklch, var(--cyan) 16%, transparent), transparent 60%);
}
.lockhero.is-open {
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklch, var(--cyan) 26%, transparent), transparent 62%);
}
.dial { position: relative; width: 232px; height: 232px; margin: 14px auto 6px; }
.dial--btn { cursor: pointer; transition: transform 0.14s var(--ease); }
.dial--btn:active { transform: scale(0.97); }
.dial.is-off { opacity: 0.6; pointer-events: none; }
.dial.is-opening .dial__core { animation: dialPulse 1.1s ease-in-out infinite; }
@keyframes dialPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.dial-hint { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.dial__svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dial__core {
  position: absolute; inset: 34px; border-radius: 50%;
  display: grid; place-items: center; gap: 6px;
  background: radial-gradient(120% 120% at 40% 25%, oklch(0.24 0.03 208), oklch(0.14 0.018 222));
  border: 1px solid var(--hair); transition: box-shadow 0.5s var(--ease), border-color 0.5s;
}
.dial__core.is-open {
  border-color: var(--hair-cyan);
  box-shadow: 0 0 0 1px var(--hair-cyan), 0 0 70px -6px color-mix(in oklch, var(--cyan) calc(60% * var(--glow-mult)), transparent);
}
.dial__lockicon { color: var(--ink-1); transition: color 0.4s; }
.dial__core.is-open .dial__lockicon { color: var(--cyan); }
.dial__state { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.dial__core.is-open .dial__state { color: var(--cyan-soft); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.metric { text-align: center; padding: 12px 6px; border-radius: var(--r-sm);
  background: color-mix(in oklch, var(--bg-1) 50%, transparent); border: 1px solid var(--hair); }
.metric__val { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.metric__lbl { font-size: 10.5px; color: var(--ink-2); margin-top: 3px; letter-spacing: 0.02em; }

/* big open button states */
.openbtn { height: 52px; border-radius: var(--r-lg); font-size: 16px; }
.openbtn.is-loading { background: color-mix(in oklch, var(--bg-2) 80%, transparent); color: var(--ink-1);
  border: 1px solid var(--hair-cyan); }
.openbtn.is-done { background: linear-gradient(180deg, color-mix(in oklch, var(--cyan) 92%, white 8%), var(--cyan-deep)); }
/* «зов» золотой кнопки Bluetooth — тап по медальону, когда сети нет */
.openbtn.is-pulse { animation: btPulse 0.9s var(--ease); }
@keyframes btPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--gold) 55%, transparent); }
  70%  { box-shadow: 0 0 0 15px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklch, var(--cyan) 25%, transparent);
  border-top-color: var(--cyan); animation: spin 0.7s linear infinite; }

/* bluetooth secondary */
.bt-action {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in oklch, var(--bg-1) 55%, transparent); border: 1px solid var(--hair);
}
.bt-action--blocked { border-style: dashed; opacity: 0.85; }

/* segmented tabs inside lock */
.subtabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { flex: none; height: 36px; padding: 0 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: color-mix(in oklch, var(--bg-1) 55%, transparent); border: 1px solid var(--hair); white-space: nowrap; }
.subtab.is-on { color: var(--cyan-soft); border-color: var(--hair-cyan); background: color-mix(in oklch, var(--cyan) 10%, transparent); }

/* journal timeline */
.tl { position: relative; padding-left: 28px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--hair); }
.tl__item { position: relative; padding: 10px 0; }
.tl__dot { position: absolute; left: -24px; top: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-0); border: 2px solid var(--cyan); }
.tl__dot--gold { border-color: var(--gold); }
.tl__dot--alarm { border-color: var(--alarm); }
.tl__dot--ink { border-color: var(--ink-3); }
/* [#119 Г3] дверные тона ленты: открылась/изнутри — красная, закрылась — зелёная (слово Алика с приёмки) */
.tl__dot--dooropen { border-color: var(--alarm); }
.tl__dot--doorclosed { border-color: var(--door-ok); }
.tl__time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
/* [116] пришли по тапу из уведомления — ЭТО событие. Подсветка мягкая: рамка + вспышка, чтобы
   глаз нашёл строку сразу, но лента не выглядела «выбранной навсегда». */
.tl__item--focus { border-radius: var(--r-sm, 10px); padding-left: 10px; padding-right: 10px; margin-left: -10px;
  border: 1px solid var(--hair-cyan); background: color-mix(in oklch, var(--cyan) 9%, transparent);
  animation: tlFocus 1.6s ease-out 1; }
@keyframes tlFocus {
  0% { background: color-mix(in oklch, var(--cyan) 26%, transparent); }
  100% { background: color-mix(in oklch, var(--cyan) 9%, transparent); }
}

/* ====================== BOTTOM SHEET ====================== */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 70; background: oklch(0.05 0.02 224 / 0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fade 0.25s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 71;
  max-height: 86%; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--hair-cyan);
  box-shadow: 0 -20px 60px -20px oklch(0.04 0.02 224 / 0.9);
  animation: sheetUp 0.46s var(--ease) both;
  transition: transform 0.3s var(--ease);   /* плавный возврат после свайпа */
}
@keyframes sheetUp { from { transform: translateY(40px); } }
.sheet__drag { touch-action: none; cursor: grab; }   /* зона перетаскивания (хваталка + шапка) */
.sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--ink-3); margin: 10px auto 4px; flex: none; }
.sheet__head { padding: 8px 22px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet__head .h3 { white-space: nowrap; }
.sheet__body { padding: 4px 22px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; scrollbar-width: none; }
.sheet__body::-webkit-scrollbar { display: none; }

/* fingerprint scan */
.fp-scan { width: 132px; height: 132px; margin: 14px auto; position: relative; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hair-cyan);
  background: radial-gradient(120% 120% at 50% 30%, oklch(0.24 0.03 208), oklch(0.14 0.02 222)); }
.fp-scan__fill { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.fp-scan__wave { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in oklch, var(--cyan) 22%, transparent);
  transition: height 0.5s var(--ease); }
/* ожидание поднесения карты — пульсирующее свечение */
.fp-scan.is-waiting { animation: icWait 1.5s ease-in-out infinite; }
@keyframes icWait {
  0%, 100% { box-shadow: 0 0 0 1px var(--hair-cyan), 0 0 18px -6px color-mix(in oklch, var(--cyan) 40%, transparent); }
  50% { box-shadow: 0 0 0 1px var(--cyan), 0 0 40px 2px color-mix(in oklch, var(--cyan) 55%, transparent); }
}
.fp-prog { height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--bg-2) 80%, transparent); overflow: hidden; }
.fp-prog__bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  box-shadow: 0 0 12px color-mix(in oklch, var(--cyan) 60%, transparent); transition: width 0.5s var(--ease); }

/* ---- живая анимация снятия отпечатка: кольцо касаний + заполняющийся узор ---- */
.fpviz { position: relative; width: 200px; height: 200px; margin: 6px auto 2px; }
.fpviz__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(0deg); }
.fpviz__seg { fill: none; stroke: color-mix(in oklch, var(--ink-0) 13%, transparent); stroke-width: 6; stroke-linecap: round;
  transition: stroke 0.45s var(--ease), filter 0.45s var(--ease); }
.fpviz__seg.is-on { stroke: var(--cyan); filter: drop-shadow(0 0 6px color-mix(in oklch, var(--cyan) 75%, transparent)); }
.fpviz.is-done .fpviz__seg { stroke: var(--cyan); }
.fpviz__core { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 42% 30%, oklch(0.23 0.03 210), oklch(0.13 0.02 224));
  box-shadow: inset 0 0 0 1px var(--hair-cyan), inset 0 2px 16px oklch(0.05 0.02 224 / 0.6); }
.fpviz__fp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.fpviz__fp--bg { color: color-mix(in oklch, var(--cyan) 20%, transparent); }
.fpviz__fp--fg { color: var(--cyan); filter: drop-shadow(0 0 9px color-mix(in oklch, var(--cyan) 65%, transparent));
  transition: clip-path 0.5s var(--ease); }
.fpviz__check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--cyan);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-1) 72%, transparent); box-shadow: 0 0 22px -4px color-mix(in oklch, var(--cyan) 60%, transparent);
  animation: fpPop 0.42s var(--ease); }
.fpviz__pulse { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; pointer-events: none; animation: fpRipple 0.62s var(--ease); }
@keyframes fpRipple { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.84); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes fpPop { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ====================== СОСТОЯНИЯ ====================== */
.state {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 36px; gap: 16px;
}
.state__ico {
  width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--hair); color: var(--ink-2);
}
.state__ico--alarm { border-color: color-mix(in oklch, var(--alarm) 36%, transparent); color: var(--alarm-soft); }
.state__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.state__text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 260px; }

/* skeleton */
.sk { border-radius: var(--r-sm); background: linear-gradient(100deg,
  color-mix(in oklch, var(--bg-2) 50%, transparent) 30%,
  color-mix(in oklch, var(--bg-2) 90%, transparent) 50%,
  color-mix(in oklch, var(--bg-2) 50%, transparent) 70%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){ .sk { animation: none; } }

/* offline banner */
.banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 14px;
  border-radius: var(--r-sm); font-size: 12.5px;
  background: color-mix(in oklch, var(--alarm) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--alarm) 30%, transparent); color: var(--alarm-soft);
}
.banner--soon { background: color-mix(in oklch, var(--gold) 10%, transparent);
  border-color: var(--hair-gold); color: var(--gold-soft); }

/* role / dev switcher (demo) */
.demobar {
  position: absolute; z-index: 60; bottom: 16px; left: 14px;
  display: flex; flex-direction: column-reverse; gap: 7px; align-items: flex-start;
}
.demobtn {
  height: 30px; padding: 0 11px; border-radius: 999px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  background: oklch(0.1 0.01 224 / 0.7); border: 1px solid var(--hair-cyan); color: var(--cyan-soft);
  backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 6px;
}

/* avatar inline list */
.who { display: flex; align-items: center; gap: 12px; }
.who__av { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; border: 1px solid var(--hair); }

/* settings toggle */
.toggle { width: 48px; height: 28px; border-radius: 999px; flex: none; padding: 3px;
  background: color-mix(in oklch, var(--bg-2) 80%, transparent); border: 1px solid var(--hair); transition: 0.25s; }
.toggle__knob { width: 22px; height: 22px; border-radius: 50%; background: var(--ink-1); transition: 0.25s var(--ease); }
.toggle.is-on { background: color-mix(in oklch, var(--cyan) 30%, transparent); border-color: var(--hair-cyan); }
.toggle.is-on .toggle__knob { transform: translateX(20px); background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* code chips */
.pin { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: 0.18em; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { height: 58px; border-radius: var(--r-md); font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  background: color-mix(in oklch, var(--bg-1) 55%, transparent); border: 1px solid var(--hair); }
.key:active { background: color-mix(in oklch, var(--cyan) 14%, transparent); }

/* ============================================================
   БРЕНД — логотип GERZOG
   ============================================================ */
.brand-plate {
  position: relative; background: none; border: none; box-shadow: none; overflow: visible;
}
.brand-plate img {
  display: block; width: 52%; max-width: 206px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 26px color-mix(in oklch, var(--cyan) calc(36% * var(--glow-mult)), transparent));
}
.brand-plate::after { display: none; }
.brand-plate__edge { display: none; }
.mark { display: block; width: auto; flex: none; }   /* эмблема с крыльями — без круга/обрезки */
.mark--glow { filter: drop-shadow(0 0 9px color-mix(in oklch, var(--cyan) calc(55% * var(--glow-mult)), transparent)); }
.brand-lock { display: flex; align-items: center; gap: 11px; }
.brand-lock__wm { font-size: 19px; font-weight: 700; letter-spacing: 0.2em; line-height: 1; }
.brand-lock__tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.22em;
  color: var(--ink-3); margin-top: 4px; }

/* ============================================================
   ЗАМОК — «живое» свечение и анимация открытия
   ============================================================ */
.dial__aura {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--gold) 26%, transparent) 0%, transparent 60%);
  filter: blur(26px); opacity: 0.42; transition: background 0.6s var(--ease);
}
.dial.is-open .dial__aura {
  background: radial-gradient(circle, color-mix(in oklch, var(--cyan) 42%, transparent) 0%, transparent 62%);
}
/* светящаяся точка, идущая по кольцу */
.dial__orbit { position: absolute; inset: 4px; z-index: 1; pointer-events: none; }
.dial__orbit::before {
  content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 12px color-mix(in oklch, var(--gold) 85%, transparent),
              0 0 24px color-mix(in oklch, var(--gold) 50%, transparent);
  transition: background 0.5s, box-shadow 0.5s;
}
.dial.is-open .dial__orbit::before {
  background: var(--cyan);
  box-shadow: 0 0 12px color-mix(in oklch, var(--cyan) 90%, transparent),
              0 0 26px color-mix(in oklch, var(--cyan) 55%, transparent);
}
/* волна при открытии */
.dial__ripple {
  position: absolute; left: 50%; top: 50%; width: 188px; height: 188px;
  transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; z-index: 1;
  border: 2px solid var(--cyan); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .dial__aura { animation: breathe 4.6s ease-in-out infinite; }
  .dial__orbit { animation: spin 9s linear infinite; }
  .dial.is-open .dial__orbit { animation: spin 3.4s linear infinite; }
  .dial.is-open .dial__ripple { animation: ripple 1.15s var(--ease); }
  .dial.is-open .dial__core { animation: coreSurge 1.1s var(--ease); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.62; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes ripple {
  0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.5); }
  70% { opacity: 0.22; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
@keyframes coreSurge {
  0% { box-shadow: 0 0 0 1px var(--hair-cyan), 0 0 0 0 color-mix(in oklch, var(--cyan) 60%, transparent); }
  45% { box-shadow: 0 0 0 1px var(--hair-cyan), 0 0 95px 8px color-mix(in oklch, var(--cyan) calc(75% * var(--glow-mult)), transparent); }
  100% { box-shadow: 0 0 0 1px var(--hair-cyan), 0 0 70px -6px color-mix(in oklch, var(--cyan) calc(60% * var(--glow-mult)), transparent); }
}

/* ============================================================
   ГЕРБ GERZOG в центре диска замка
   ============================================================ */
.dial__crest {
  width: 205px; height: 205px; object-fit: contain; display: block;
  filter: drop-shadow(0 0 14px color-mix(in oklch, var(--gold) calc(45% * var(--glow-mult)), transparent));
  transition: filter 0.5s var(--ease);
}
.dial__core.is-open .dial__crest {
  filter: drop-shadow(0 0 18px color-mix(in oklch, var(--cyan) calc(60% * var(--glow-mult)), transparent));
}

/* ============================================================
   МЕДАЛЬОН ЗАМКА (новый, премиум) — герб + живое кольцо состояния
   Габарит:               248 × 248 px
   Герб (medallion__crest): 196 × 196 px, по центру
   Тёмное ядро:           inset 16px → 216px (radius 108)
   Светящееся кольцо:     radius ~120px (ободок 116–123)
   Состояние:  Заперто = золото (--gold) · Открыто = циан (--cyan)
   Анимации: дыхание свечения, вращение кольца, скан-луч,
             пульс при открытии, расходящиеся кольца (ripple).
   ============================================================ */
.medallion { position: relative; width: clamp(126px, 20vh, 162px); height: clamp(126px, 20vh, 162px); margin: 6px auto 4px;
  cursor: pointer; --mc: var(--gold); transition: transform 0.16s var(--ease); }
.medallion.is-open { --mc: var(--cyan); }
.medallion.is-off { opacity: 0.5; pointer-events: none; filter: grayscale(0.35); }
.medallion.is-dim { opacity: 0.6; filter: grayscale(0.28); }   /* нет сети: приглушён, но кликабелен (тап «зовёт» кнопку Bluetooth) */
.medallion:active { transform: scale(0.965); }

/* дышащее фоновое свечение */
.medallion__glow { position: absolute; left: 50%; top: 50%; width: 131%; height: 131%;
  transform: translate(-50%,-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklch, var(--mc) 32%, transparent) 0%, transparent 60%);
  filter: blur(26px); opacity: 0.5; transition: background 0.6s var(--ease);
  animation: medBreathe 4.6s ease-in-out infinite; }
.medallion.is-open .medallion__glow { opacity: 0.72; }

/* вращающееся светящееся кольцо (conic + кольцевая маска) */
.medallion__ring { position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in oklch, var(--mc) 92%, transparent) 48deg,
    transparent 132deg,
    transparent 216deg,
    color-mix(in oklch, var(--mc) 55%, transparent) 270deg,
    transparent 338deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 93.5%, #000 94.4% 99.2%, transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 0 93.5%, #000 94.4% 99.2%, transparent 100%);
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--mc) 65%, transparent));
  animation: medSpin 7.5s linear infinite; transition: filter 0.5s var(--ease); }
.medallion.is-opening .medallion__ring { animation-duration: 1s; }
.medallion.is-open .medallion__ring { filter: drop-shadow(0 0 11px color-mix(in oklch, var(--cyan) 78%, transparent)); }

/* статичный тонкий контур-ободок (всегда виден) */
.medallion::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 97.6%, #000 98.4% 100%, transparent);
          mask: radial-gradient(circle closest-side, transparent 0 97.6%, #000 98.4% 100%, transparent);
  background: color-mix(in oklch, var(--ink-1) 28%, transparent); }

/* ядро — тёмный диск под гербом */
.medallion__core { position: absolute; inset: 6.45%; border-radius: 50%; z-index: 2; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(125% 125% at 42% 26%, oklch(0.23 0.03 210), oklch(0.11 0.016 224));
  box-shadow: inset 0 2px 16px oklch(0.04 0.02 224 / 0.75),
              inset 0 0 0 1px color-mix(in oklch, var(--mc) 24%, transparent);
  transition: box-shadow 0.55s var(--ease); }
.medallion.is-open .medallion__core {
  box-shadow: inset 0 2px 16px oklch(0.04 0.02 224 / 0.6),
              inset 0 0 0 1px color-mix(in oklch, var(--cyan) 50%, transparent),
              0 0 58px -6px color-mix(in oklch, var(--cyan) 55%, transparent); }

/* блик по ядру */
.medallion__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background: radial-gradient(80% 55% at 38% 18%, color-mix(in oklch, white 16%, transparent), transparent 70%); }

/* сканирующий луч (тонкая дуга бежит по ядру) */
.medallion__scan { position: absolute; inset: 6.45%; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklch, var(--mc) 40%, transparent) 24deg, transparent 60deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 64.8%, #000 66.7% 100%);
          mask: radial-gradient(circle closest-side, transparent 0 64.8%, #000 66.7% 100%); }
.medallion.is-opening .medallion__scan { opacity: 0.9; animation: medSpin 0.9s linear infinite; }

/* герб-медальон */
.medallion__crest { position: relative; width: 84.7%; height: 84.7%; object-fit: contain; display: block; z-index: 4;
  filter: drop-shadow(0 4px 9px oklch(0.04 0.02 224 / 0.7))
          drop-shadow(0 0 13px color-mix(in oklch, var(--mc) 42%, transparent));
  transition: filter 0.55s var(--ease), transform 0.55s var(--ease); }
.medallion.is-open .medallion__crest { transform: scale(1.035); }
.medallion.is-opening .medallion__crest { animation: medPulse 1s ease-in-out infinite; }

/* расходящиеся кольца при открытии */
.medallion__ripple { position: absolute; inset: 6.45%; border-radius: 50%; z-index: 3; pointer-events: none;
  border: 2px solid var(--cyan); opacity: 0; }
.medallion.is-open .medallion__ripple { animation: medRipple 0.95s var(--ease); }
.medallion.is-open .medallion__ripple--2 { animation-delay: 0.2s; }

@keyframes medSpin { to { transform: rotate(360deg); } }
@keyframes medBreathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.46; }
  50%     { transform: translate(-50%,-50%) scale(1.08); opacity: 0.64; } }
@keyframes medPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes medRipple { 0% { opacity: 0.6; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.32); } }

/* индикатор-точка перед текстом состояния */
.lock-state { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; }
.lock-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px color-mix(in oklch, var(--gold) 70%, transparent); transition: background 0.45s, box-shadow 0.45s; }
.lock-state.is-open .lock-state__dot { background: var(--cyan); box-shadow: 0 0 10px color-mix(in oklch, var(--cyan) 75%, transparent); }
.lock-state.is-opening .lock-state__dot { animation: medPulse 0.8s ease-in-out infinite; }
.lock-state.is-off .lock-state__dot { background: var(--ink-3); box-shadow: none; }

/* ============================================================
   КАМЕРА / ЖИВОЙ КАДР
   ============================================================ */
.cam {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--hair); background:
    repeating-linear-gradient(0deg, oklch(0.17 0.012 220) 0 2px, oklch(0.15 0.01 222) 2px 4px),
    radial-gradient(120% 90% at 50% 30%, oklch(0.24 0.02 210), oklch(0.12 0.01 224));
  display: grid; place-items: center;
}
.cam::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background: linear-gradient(var(--cyan-deep), transparent); opacity: 0.06;
  animation: scan 3.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cam::after { animation: none; } }
@keyframes scan { 0% { transform: translateY(-40%); } 100% { transform: translateY(300%); } }
.cam__ph { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cam__live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; background: oklch(0.1 0.01 224 / 0.7); color: var(--alarm-soft); border: 1px solid color-mix(in oklch, var(--alarm) 30%, transparent); }
.cam__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 8px var(--alarm);
  animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.cam__ts { position: absolute; bottom: 10px; right: 12px; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-1); text-shadow: 0 1px 4px #000; }
.cam__corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--hair-cyan); pointer-events: none; }
.cam__corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
.cam__corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
.cam__corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
.cam__corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }
.snap-thumb { width: 38px; height: 38px; border-radius: 8px; flex: none; border: 1px solid var(--hair-cyan);
  background: repeating-linear-gradient(135deg, oklch(0.22 0.02 210) 0 5px, oklch(0.18 0.015 220) 5px 10px); position: relative; }
.snap-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, color-mix(in oklch, var(--cyan) 20%, transparent), transparent 60%); border-radius: inherit; }

/* регистрация лица */
.face-frame { position: relative; width: 200px; aspect-ratio: 3/4; margin: 8px auto 4px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hair-cyan); background: radial-gradient(120% 90% at 50% 30%, oklch(0.22 0.02 210), oklch(0.12 0.01 224)); display: grid; place-items: center; }
.face-frame__oval { width: 116px; height: 150px; border: 2px dashed color-mix(in oklch, var(--cyan) 50%, transparent);
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; display: grid; place-items: center; color: color-mix(in oklch, var(--cyan) 60%, transparent); transition: 0.4s; }
.face-frame.scanning .face-frame__oval { border-style: solid; border-color: var(--cyan); box-shadow: 0 0 24px -4px color-mix(in oklch, var(--cyan) 60%, transparent); }
.face-frame__scan { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: 0; }
.face-frame.scanning .face-frame__scan { opacity: 0.9; animation: faceScan 1.6s ease-in-out infinite; }
@keyframes faceScan { 0%,100% { top: 16%; } 50% { top: 80%; } }

/* ============================================================
   ГРАФИК (столбики)
   ============================================================ */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding: 4px 2px 0; }
.bars__b { flex: 1; border-radius: 3px 3px 0 0; min-height: 4px;
  background: linear-gradient(var(--cyan), var(--cyan-deep)); opacity: 0.85; transition: height 0.5s var(--ease); }
.bars__b.water { background: linear-gradient(oklch(0.8 0.1 220), oklch(0.62 0.12 235)); }
.bars__b.peak { opacity: 1; box-shadow: 0 0 10px -2px color-mix(in oklch, var(--cyan) 60%, transparent); }
.axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }

/* ============================================================
   УСТРОЙСТВА — общий герой/контролы
   ============================================================ */
.dev-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.dev-hero--alarm { border-color: color-mix(in oklch, var(--alarm) 38%, transparent);
  background: radial-gradient(120% 100% at 90% 0%, color-mix(in oklch, var(--alarm) 12%, transparent), transparent 55%), var(--glass); }
.dev-hero__ico { width: 64px; height: 64px; border-radius: 18px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent); border: 1px solid var(--hair); }
.dev-hero__ico.cyan { color: var(--cyan); border-color: var(--hair-cyan); box-shadow: 0 0 24px -8px color-mix(in oklch, var(--cyan) 55%, transparent); }
.dev-hero__ico.gold { color: var(--gold); border-color: var(--hair-gold); box-shadow: 0 0 24px -8px color-mix(in oklch, var(--gold) 50%, transparent); }
.dev-hero__ico.alarm { color: var(--alarm-soft); border-color: color-mix(in oklch, var(--alarm) 38%, transparent); }

.bigval { font-family: var(--font-mono); font-size: 46px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.bigval__u { font-size: 18px; color: var(--ink-2); margin-left: 4px; }

/* степпер (температура) */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-radius: var(--r-md); background: color-mix(in oklch, var(--bg-1) 55%, transparent); border: 1px solid var(--hair); }
.stepper__btn { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--bg-2) 75%, transparent); border: 1px solid var(--hair); color: var(--cyan); }
.stepper__btn:active { background: color-mix(in oklch, var(--cyan) 16%, transparent); }
.stepper__val { font-family: var(--font-mono); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; }

/* большая круглая кнопка питания */
.power-btn { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 60%, transparent); color: var(--ink-2); transition: 0.3s var(--ease); }
.power-btn.on { color: oklch(0.16 0.03 224); background: linear-gradient(180deg, color-mix(in oklch, var(--cyan) 92%, white 6%), var(--cyan-deep));
  border-color: var(--cyan); box-shadow: 0 0 36px -8px color-mix(in oklch, var(--cyan) calc(70% * var(--glow-mult)), transparent); }

/* прогресс (стирка) */
.prog { height: 8px; border-radius: 4px; background: color-mix(in oklch, var(--bg-2) 80%, transparent); overflow: hidden; }
.prog__bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  box-shadow: 0 0 12px color-mix(in oklch, var(--cyan) 55%, transparent); transition: width 0.6s var(--ease); }

/* ============================================================
   RICH HUD — рамки, круговые шкалы, сегменты, автоматы, барабан
   ============================================================ */
.hudf { position: relative; }
.hudf__c { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--hair-cyan); pointer-events: none; z-index: 2; }
.hudf__c.tl { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 6px; }
.hudf__c.tr { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 6px; }
.hudf__c.bl { bottom: -1px; left: -1px; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 6px; }
.hudf__c.br { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 6px; }

/* круговая шкала */
.gauge { position: relative; width: 200px; height: 200px; margin: 8px auto 4px; }
.gauge svg.gauge__ticks { position: absolute; inset: 0; }
.gauge__hub { position: absolute; inset: 40px; border-radius: 50%; display: grid; place-items: center; text-align: center; gap: 2px;
  background: radial-gradient(120% 120% at 40% 25%, oklch(0.22 0.025 210), oklch(0.13 0.018 224));
  box-shadow: inset 0 0 24px -8px #000; }
.gauge.dim .gauge__hub { filter: grayscale(0.55) brightness(0.85); }
.gauge__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-2); text-transform: uppercase; }
.gauge__val { font-family: var(--font-mono); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.gauge__sub { font-size: 11px; color: var(--ink-2); margin-top: 1px; }
.gauge__hex { position: absolute; inset: 48px; border-radius: 50%; opacity: 0.45; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2327d9d9' stroke-width='1' stroke-opacity='0.5'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 16px; -webkit-mask-image: radial-gradient(#000 30%, transparent 70%); mask-image: radial-gradient(#000 30%, transparent 70%); }
.gauge__dot { position: absolute; inset: 2px; z-index: 1; }
.gauge__dot::before { content: ""; position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 22px color-mix(in oklch, var(--cyan) 50%, transparent); }
@media (prefers-reduced-motion: no-preference) { .gauge__dot { animation: spin 7s linear infinite; } }

/* сегментная горизонтальная шкала */
.segbar { display: flex; gap: 3px; height: 18px; align-items: stretch; }
.segbar__s { flex: 1; border-radius: 2px; background: color-mix(in oklch, var(--ink-0) 7%, transparent); transition: 0.4s var(--ease); }
.segbar__s.on { background: var(--cyan); box-shadow: 0 0 7px color-mix(in oklch, var(--cyan) 55%, transparent); }
.segbar__s.on.water { background: oklch(0.78 0.1 225); box-shadow: 0 0 7px color-mix(in oklch, oklch(0.78 0.1 225) 55%, transparent); }
.segbar__s.on.gold { background: var(--gold); }

/* живой тренд */
.trend { display: block; }

/* автоматы (электрощит) */
.brk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.brk { padding: 10px 4px 9px; border-radius: 12px; border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 50%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: 0.25s var(--ease); }
.brk.on { border-color: var(--hair-cyan); }
.brk__led { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: 0.3s; }
.brk.on .brk__led { background: oklch(0.82 0.16 150); box-shadow: 0 0 9px oklch(0.82 0.16 150); }
.brk__sw { width: 22px; height: 38px; border-radius: 7px; background: oklch(0.09 0.008 224); border: 1px solid var(--hair); position: relative; flex: none; }
.brk__knob { position: absolute; left: 3px; right: 3px; height: 15px; border-radius: 5px; background: var(--ink-2); bottom: 3px; transition: 0.25s var(--ease); }
.brk.on .brk__sw { border-color: var(--hair-cyan); }
.brk.on .brk__knob { top: 3px; bottom: auto; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.brk__amp { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.brk__lbl { font-size: 9px; color: var(--ink-2); line-height: 1.05; }
.brk__sch { font-family: var(--font-mono); font-size: 8px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 2px; }

/* барабан стиральной машины */
.drum { width: 132px; height: 132px; border-radius: 50%; margin: 6px auto 2px; position: relative;
  background: radial-gradient(120% 120% at 40% 30%, oklch(0.24 0.022 210), oklch(0.12 0.012 224));
  border: 1px solid var(--hair-cyan); box-shadow: 0 0 44px -14px color-mix(in oklch, var(--cyan) calc(50% * var(--glow-mult)), transparent), inset 0 0 30px -10px #000; }
.drum__win { position: absolute; inset: 15px; border-radius: 50%; overflow: hidden;
  border: 2px solid color-mix(in oklch, var(--cyan) 22%, transparent);
  background: radial-gradient(circle at 50% 65%, color-mix(in oklch, var(--cyan) 14%, transparent), transparent 62%); }
.drum__rot { position: absolute; inset: 0; }
.drum__p { position: absolute; left: 50%; top: 50%; width: 13px; height: 26px; border-radius: 6px;
  background: color-mix(in oklch, var(--ink-0) 12%, transparent); }
.drum__cl { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in oklch, var(--gold) 32%, transparent); }
.drum__glass { position: absolute; inset: 15px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(150deg, oklch(1 0 0 / 0.13), transparent 45%); }
@media (prefers-reduced-motion: no-preference) { .drum.run .drum__rot { animation: spin 2.1s linear infinite; } }

/* режимы (чипы с иконками) */
.modechips { display: flex; gap: 8px; flex-wrap: wrap; }
.modechip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 55%, transparent); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: 0.2s; }
.modechip.on { color: var(--cyan-soft); border-color: var(--hair-cyan); background: color-mix(in oklch, var(--cyan) 10%, transparent); }

/* ============================================================
   МЕХАНИЗМЫ — визуализация + анимация (ворота / шлагбаум)
   Анимации «ждут железа»: визуал полноценный, механизм подвяжем позже.
   ============================================================ */
.mechviz {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 2px;
  background:
    radial-gradient(140% 100% at 50% -20%, color-mix(in oklch, var(--cyan) 9%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 55%, transparent) 0%, color-mix(in oklch, var(--bg-0) 80%, transparent) 100%);
  border: 1px solid var(--hair);
  perspective: 1000px;
  transition: box-shadow 0.6s var(--ease);
}
.mechviz.is-open { box-shadow: inset 0 0 70px -22px color-mix(in oklch, var(--cyan) 50%, transparent); }
.mechviz__label {
  position: absolute; left: 14px; top: 12px; z-index: 6;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-2); text-transform: uppercase;
}
.mechviz__state {
  position: absolute; right: 14px; top: 12px; z-index: 6;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--gold-soft); transition: color 0.5s;
}
.mechviz.is-open .mechviz__state { color: var(--cyan-soft); }
.mechviz__ground {
  position: absolute; left: 7%; right: 7%; bottom: 15%; height: 2px; border-radius: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--cyan) 42%, transparent), transparent);
}
.mechviz__post {
  position: absolute; bottom: 15%; width: 9px; height: 52%; border-radius: 3px; z-index: 4;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink-0) 26%, transparent), color-mix(in oklch, var(--bg-2) 85%, transparent));
  box-shadow: 0 0 0 1px var(--hair), 0 0 14px -4px color-mix(in oklch, var(--cyan) 30%, transparent);
}
.mechviz__post.l { left: 9%; }
.mechviz__post.r { right: 9%; }

/* створка ворот — тёмное стекло с рёбрами */
.gate-leaf {
  position: absolute; bottom: 15%; height: 52%; z-index: 3;
  border: 1px solid var(--hair-cyan); border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklch, var(--bg-2) 90%, transparent) 0 8px,
      color-mix(in oklch, var(--bg-1) 88%, transparent) 8px 16px);
  box-shadow: 0 0 20px -8px color-mix(in oklch, var(--cyan) 45%, transparent);
  transition: transform 1.2s var(--ease), filter 0.7s var(--ease);
  backface-visibility: hidden;
}
/* — распашные (две створки сходятся по центру в закрытом виде) — */
.gate--swing .gate-leaf { width: 41%; }
.gate--swing .gate-leaf.l { left: 9%; transform-origin: left center; }
.gate--swing .gate-leaf.r { right: 9%; transform-origin: right center; }
.gate--swing.is-open .gate-leaf.l { transform: rotateY(-82deg); filter: brightness(1.18); }
.gate--swing.is-open .gate-leaf.r { transform: rotateY(82deg);  filter: brightness(1.18); }
/* шов по центру между створками */
.gate--swing .gate-leaf.l { border-right-color: color-mix(in oklch, var(--cyan) 35%, transparent); }
/* — откатные (одна створка выезжает вбок) — */
.gate--slide .gate-leaf.full { left: 9%; width: 82%; transform-origin: left center; }
.gate--slide.is-open .gate-leaf.full { transform: translateX(-90%) scaleX(0.96); filter: brightness(0.92); }
/* — роллетные (полотно закрывает проём до земли, открываясь — уходит вверх) — */
.gate--roller .gate-leaf.roller {
  left: 9%; width: 82%; top: 12%; bottom: 15%; height: auto; transform-origin: top center;
  background:
    repeating-linear-gradient(180deg,
      color-mix(in oklch, var(--bg-2) 92%, transparent) 0 6px,
      color-mix(in oklch, var(--bg-0) 92%, transparent) 6px 8px);
}
.gate--roller.is-open .gate-leaf.roller { transform: scaleY(0.05); filter: brightness(1.25); }

/* — шлагбаум (стрела поднимается) — */
.barviz__pivot {
  position: absolute; left: 14%; bottom: 15%; width: 22px; height: 30%; border-radius: 6px; z-index: 5;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink-0) 22%, transparent), color-mix(in oklch, var(--bg-2) 88%, transparent));
  box-shadow: 0 0 0 1px var(--hair), 0 0 18px -6px color-mix(in oklch, var(--gold) 50%, transparent);
}
.barviz__pivot::after {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px var(--gold); transition: background 0.5s, box-shadow 0.5s;
}
.barviz.is-open .barviz__pivot::after { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
/* опорная стойка, на которую ложится стрела */
.barviz__rest {
  position: absolute; right: 11%; bottom: 15%; width: 8px; height: 17%; border-radius: 3px; z-index: 3;
  background: linear-gradient(180deg, var(--gold-soft), color-mix(in oklch, var(--bg-2) 80%, transparent));
  box-shadow: 0 0 0 1px var(--hair-gold);
}
.barviz__arm {
  position: absolute; left: calc(14% + 11px); bottom: calc(45% - 6px);
  width: 70%; height: 12px; border-radius: 6px; transform-origin: left center; z-index: 6;
  background: repeating-linear-gradient(90deg, var(--gold) 0 18px, oklch(0.95 0.012 90) 18px 36px);
  box-shadow: 0 0 18px -4px color-mix(in oklch, var(--gold) 60%, transparent);
  transition: transform 1.25s var(--ease), background 0.6s, box-shadow 0.6s;
}
.barviz__arm::after {
  content: ""; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: oklch(0.95 0.012 90);
  box-shadow: 0 0 8px color-mix(in oklch, var(--gold) 60%, transparent);
}
.barviz.is-open .barviz__arm {
  transform: rotate(-72deg);
  background: repeating-linear-gradient(90deg, var(--cyan) 0 18px, oklch(0.95 0.012 200) 18px 36px);
  box-shadow: 0 0 22px -2px color-mix(in oklch, var(--cyan) 70%, transparent);
}

/* ============================================================
   КАМЕРА — кнопка «на весь экран», PTZ-крестовина, fullscreen
   ============================================================ */
.cam__full {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  background: oklch(0.08 0.01 224 / 0.55); border: 1px solid var(--hair); color: var(--ink-0);
}
.ptz {
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px);
  gap: 8px; justify-content: center; margin: 4px auto 2px;
}
.ptz__btn {
  display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 55%, transparent);
  color: var(--ink-1);
}
.ptz__btn.up { grid-column: 2; grid-row: 1; }
.ptz__btn.left { grid-column: 1; grid-row: 2; }
.ptz__btn.center { grid-column: 2; grid-row: 2; color: var(--cyan); border-color: var(--hair-cyan);
  background: color-mix(in oklch, var(--cyan) 10%, transparent); }
.ptz__btn.right { grid-column: 3; grid-row: 2; }
.ptz__btn.down { grid-column: 2; grid-row: 3; }
.cam__full, .ptz__btn {
  transition: transform 0.13s var(--ease), filter 0.13s var(--ease), border-color 0.2s, color 0.2s;
}
.cam__full:active, .ptz__btn:active { transform: scale(0.9); filter: brightness(1.25); border-color: var(--hair-cyan); color: var(--cyan); }

.camfs {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(120% 80% at 50% 0%, oklch(0.16 0.02 220), oklch(0.07 0.012 224));
  display: flex; flex-direction: column; padding: 16px;
  animation: pageIn 0.3s var(--ease) both;
}
.camfs__top { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; }
.camfs__stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.camfs__bottom { padding: 16px 0 6px; }
.cam--fs { width: 100%; }

/* поля форм — подсказка снизу + ошибка (красный контур) */
.field__hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.field__err { font-size: 12px; color: var(--alarm-soft); margin-top: 6px; line-height: 1.4; }
.field__req { color: var(--alarm-soft); margin-left: 2px; }
.input--err { border-color: color-mix(in oklch, var(--alarm) 55%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--alarm) 30%, transparent); }

/* QR-сканер (добавление устройства) */
.qrscan {
  position: relative; width: 210px; aspect-ratio: 1; margin: 6px auto 0;
  border-radius: 18px; display: grid; place-items: center; color: var(--cyan);
  background: color-mix(in oklch, var(--bg-1) 50%, transparent);
  border: 1px solid var(--hair-cyan); overflow: hidden;
  box-shadow: inset 0 0 44px -16px color-mix(in oklch, var(--cyan) 55%, transparent);
}
.qrscan__line {
  position: absolute; left: 8%; right: 8%; height: 2px; top: 12%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
  animation: qrscan 2.1s ease-in-out infinite;
}
@keyframes qrscan { 0% { top: 12%; } 50% { top: 86%; } 100% { top: 12%; } }

/* бейдж камеры на аватаре (загрузка фото профиля) */
.avatar__cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cyan-deep); color: #06202a; border: 2px solid var(--bg-0);
}

/* переключатель объектов в шапке двери (дома / места работы) — яркие кнопки */
.objsw { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.objsw::-webkit-scrollbar { display: none; }
.objsw__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-2) 78%, transparent);
  color: var(--ink-0); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.objsw__btn .objsw__ic { color: var(--ink-2); display: flex; }
.objsw__btn.is-on {
  color: var(--cyan-soft); border-color: var(--hair-cyan);
  background: color-mix(in oklch, var(--cyan) 16%, transparent);
  box-shadow: 0 0 0 1px var(--hair-cyan), 0 8px 24px -10px color-mix(in oklch, var(--cyan) 55%, transparent);
}
.objsw__btn.is-on .objsw__ic { color: var(--cyan); }
.objsw__star { color: var(--cyan); display: flex; }
.objsw__btn:active { transform: scale(0.96); }

/* область загрузки фото (квартира и т.п.) */
.photo-pick {
  width: 100%; height: 152px; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--hair-cyan); background: color-mix(in oklch, var(--bg-1) 55%, transparent);
  color: var(--ink-2); background-size: cover; background-position: center; overflow: hidden;
  transition: transform 0.15s var(--ease), filter 0.15s;
}
.photo-pick span { font-size: 13px; }
.photo-pick:active { transform: scale(0.99); filter: brightness(1.1); }

/* ДРОВЕР — боковое меню (зеркало профиля), стекло */
.drawer-scrim { position: fixed; inset: 0; z-index: 120; background: oklch(0.04 0.02 224 / 0.55); animation: dscrim 0.25s ease both; }
@keyframes dscrim { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 121; width: min(66%, 270px);
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, color-mix(in oklch, var(--bg-1) 94%, transparent), color-mix(in oklch, var(--bg-0) 97%, transparent));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--hair-cyan);
  box-shadow: 24px 0 70px -20px oklch(0.03 0.02 224 / 0.95);
  animation: drawerIn 0.3s var(--ease) both;
}
@keyframes drawerIn { from { transform: translateX(-102%); } }
.drawer__head { padding: 0; border-bottom: 1px solid var(--hair); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: none; }
.drawer__body::-webkit-scrollbar { display: none; }
.drawer__sec { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); padding: 14px 12px 6px; }
.drawer__item {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px; border-radius: 12px; color: var(--ink-1); font-size: 14.5px; font-weight: 500;
  transition: background 0.15s, transform 0.12s, color 0.15s;
}
.drawer__item svg { color: var(--ink-2); flex: none; }
.drawer__item:active { background: color-mix(in oklch, var(--cyan) 12%, transparent); transform: scale(0.99); color: var(--cyan-soft); }
.drawer__item:active svg { color: var(--cyan); }
.drawer__foot { padding: 10px; border-top: 1px solid var(--hair); }

/* фото-герой в дровере: на всю ширину, без рамки/анимации, имя поверх */
.dav { display: block; width: 100%; }
.dav__frame {
  position: relative; width: 100%; height: 264px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 40% 25%, oklch(0.28 0.035 205), oklch(0.16 0.02 222));
  background-size: cover; background-position: center;
}
.dav__init { font-weight: 700; font-size: 56px; color: var(--ink-0); }
.dav__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 42%, oklch(0.04 0.02 224 / 0.88)); }
.dav__name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-0);
  text-shadow: 0 1px 12px oklch(0.03 0.02 224 / 0.85); }

/* верхний бар: лого по центру + градиентное описание под ним */
.topbar { padding: 2px 2px 6px; }
.topbar__row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.topbar__sp { width: 44px; height: 44px; flex: none; }
.topbar__right { display: flex; align-items: center; justify-content: flex-end; }
.topbar .brand-lock__tag { text-transform: uppercase; }

/* закреплённая шапка на внутренних экранах (назад+лого+название+настройки не скроллятся) */
.view:not(.home-view) > .view__pad:first-child:not(:only-child) {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(to bottom, var(--bg-0) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* галерея квартиры — слайдер фото (+ слот видео) */
.gal { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair); }
.gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { flex: 0 0 100%; height: 150px; scroll-snap-align: center; position: relative;
  background-size: cover; background-position: center; background-color: color-mix(in oklch, var(--bg-2) 70%, transparent); }
.gal__slide--vid { display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 30%, oklch(0.24 0.03 210), oklch(0.14 0.02 224)); }
.gal__ph { display: grid; place-items: center; color: var(--ink-3); }

/* менеджер фото в настройках квартиры */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ph-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background-size: cover; background-position: center; background-color: color-mix(in oklch, var(--bg-2) 70%, transparent);
  border: 1px solid var(--hair); }
.ph-thumb--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--hair-cyan); color: var(--cyan-soft); background: color-mix(in oklch, var(--cyan) 6%, transparent); }
.ph-thumb--add span { font-size: 11px; }
.ph-thumb__del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; background: oklch(0.08 0.02 224 / 0.72); color: var(--ink-0); border: 1px solid var(--hair); }
.ph-thumb__cover { position: absolute; bottom: 5px; left: 5px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 6px; background: color-mix(in oklch, var(--cyan) 22%, transparent); color: var(--cyan-soft); }

.gal__hint { text-align: center; font-size: 10.5px; color: var(--ink-3); padding: 7px 8px 8px; }

/* каталог типов устройств (добавление) */
.dt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dt-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px;
  border: 1px solid var(--hair); background: var(--glass); transition: transform 0.12s var(--ease), border-color 0.2s; }
.dt-card:active { transform: scale(0.96); border-color: var(--hair-cyan); }
.dt-card__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--hair-cyan); color: var(--cyan); background: color-mix(in oklch, var(--cyan) 8%, transparent); }
.dt-card__name { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.dt-card.is-on { border-color: var(--cyan); background: color-mix(in oklch, var(--cyan) 10%, transparent); }
.dt-card.is-on .dt-card__ic { background: var(--cyan); color: var(--bg-0); border-color: var(--cyan); }

/* раскрывающийся выбор (тип устройства / модель) */
.pick { display: flex; align-items: center; gap: 11px; width: 100%; height: 54px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 70%, transparent);
  color: var(--ink-0); transition: border-color 0.2s; }
.pick:active { transform: scale(0.99); }
.pick__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--hair-cyan); color: var(--cyan); background: color-mix(in oklch, var(--cyan) 8%, transparent); }
.pick__txt { flex: 1; text-align: left; font-size: 15px; font-weight: 600; }
.pick__chev { color: var(--ink-3); transition: transform 0.28s var(--ease); transform: rotate(90deg); }
.pick__chev.is-open { transform: rotate(-90deg); }
.acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.acc.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; min-height: 0; }

/* карточка выбора модели */
.pickcard { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass); color: var(--ink-0);
  transition: border-color 0.2s, background 0.2s; }
.pickcard:active { transform: scale(0.99); }
.pickcard.is-on { border-color: var(--cyan); background: color-mix(in oklch, var(--cyan) 8%, transparent); }
.pickcard .row__title, .pickcard .row__meta { display: block; }

/* превью клавиш выключателя */
.sw-prev { display: flex; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 14px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 50%, transparent); }
.sw-prev__key { flex: 1; height: 46px; border-radius: 9px;
  border: 1px solid var(--hair-cyan); background: linear-gradient(180deg, color-mix(in oklch, var(--cyan) 12%, transparent), color-mix(in oklch, var(--cyan) 4%, transparent));
  box-shadow: 0 1px 0 oklch(0.7 0.03 210 / 0.2) inset; }

.banner--ok { background: color-mix(in oklch, var(--cyan) 10%, transparent);
  border-color: var(--hair-cyan); color: var(--cyan-soft); }
/* строка устройства с кнопкой удаления (добавленные) */
.dev-line { display: flex; align-items: stretch; gap: 8px; }
.dev-line > .row { flex: 1; }
.dev-del { flex: none; width: 48px; border-radius: var(--r-md); display: grid; place-items: center;
  border: 1px solid color-mix(in oklch, var(--alarm) 30%, transparent); background: color-mix(in oklch, var(--alarm) 8%, transparent); color: var(--alarm-soft); }
.dev-del:active { transform: scale(0.96); }

/* плитки устройств (в карточке объекта) */
.dtile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dtile { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair-cyan);
  background: var(--glass); box-shadow: var(--shadow-card); transition: transform 0.12s var(--ease); }
.dtile:active { transform: scale(0.98); }
.dtile__edge { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.dtile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dtile__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--hair-cyan); color: var(--cyan); background: color-mix(in oklch, var(--cyan) 9%, transparent);
  box-shadow: 0 0 18px -7px color-mix(in oklch, var(--cyan) 65%, transparent); }
.dtile__top .chip { height: 22px; font-size: 9px; padding: 0 8px; flex: none; }
.dtile__title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtile__meta { font-size: 11.5px; color: var(--ink-2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* последнее событие журнала на карточке (07-29): тихая строка — кто·чем и время. Не кричит, но живёт. */
.dtile__evt { display: flex; align-items: center; gap: 4px; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid color-mix(in oklch, var(--hair) 60%, transparent);
  font-size: 10.5px; color: color-mix(in oklch, var(--ink-2) 82%, transparent); min-width: 0; }
.dtile__evt svg { flex: none; opacity: .7; }
.dtile__evt-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dtile__evt-t { margin-left: auto; flex: none; opacity: .8; font-variant-numeric: tabular-nums; }
/* тона плитки */
.dtile--gold { border-color: var(--hair-gold); }
.dtile--gold .dtile__edge { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.dtile--gold .dtile__ic { border-color: var(--hair-gold); color: var(--gold);
  background: color-mix(in oklch, var(--gold) 9%, transparent); box-shadow: 0 0 18px -7px color-mix(in oklch, var(--gold) 65%, transparent); }
.dtile--alarm { border-color: color-mix(in oklch, var(--alarm) 36%, transparent); }
.dtile--alarm .dtile__edge { background: linear-gradient(90deg, transparent, var(--alarm), transparent); }
.dtile--alarm .dtile__ic { border-color: color-mix(in oklch, var(--alarm) 36%, transparent); color: var(--alarm-soft);
  background: color-mix(in oklch, var(--alarm) 10%, transparent); box-shadow: 0 0 18px -7px color-mix(in oklch, var(--alarm) 60%, transparent); }
.dtile--ink { border-color: var(--hair); }
.dtile--ink .dtile__edge { background: linear-gradient(90deg, transparent, var(--ink-2), transparent); }
.dtile--ink .dtile__ic { border-color: var(--hair); color: var(--ink-1);
  background: color-mix(in oklch, var(--ink-0) 6%, transparent); box-shadow: none; }
.dtile__ic--gold { border-color: var(--hair-gold); color: var(--gold);
  background: color-mix(in oklch, var(--gold) 9%, transparent); box-shadow: 0 0 18px -7px color-mix(in oklch, var(--gold) 65%, transparent); }

/* кнопки управления на экране замка (Камера / Bluetooth — с галочкой) */
.lock-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.lock-act { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 12px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass); color: var(--ink-1);
  font-weight: 600; font-size: 14px; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.lock-act:active { transform: scale(0.98); }
.lock-act.is-on { border-color: var(--hair-cyan); color: var(--cyan-soft); background: color-mix(in oklch, var(--cyan) 8%, transparent); }
.lock-act .chk { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--hair); color: var(--bg-0); transition: 0.2s; }
.lock-act .chk.is-on { background: var(--cyan); border-color: var(--cyan); }

/* состояние замка под гербом (Заперто/Открыто/Открываю) — меняет цвет */
.lock-state { text-align: center; margin-top: 12px; font-family: var(--font-mono); font-size: 15px;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold-soft);
  transition: color 0.45s var(--ease), text-shadow 0.45s var(--ease);
  text-shadow: 0 0 14px color-mix(in oklch, var(--gold) 35%, transparent); }
.lock-state.is-open { color: var(--cyan-soft); text-shadow: 0 0 16px color-mix(in oklch, var(--cyan) 45%, transparent); }
.lock-state.is-opening { color: var(--ink-2); text-shadow: none; }
.lock-state.is-off { color: var(--ink-3); text-shadow: none; }

/* кнопки под камерой замка (Микрофон / Звук / История) */
.lock-cam { margin-top: 2px; }
.cam-tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; }
.cam-tool { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--hair); background: var(--glass); color: var(--ink-2); font-size: 11px; font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background 0.2s; }
.cam-tool:active { transform: scale(0.96); }
.cam-tool.is-on { border-color: var(--hair-cyan); color: var(--cyan-soft); background: color-mix(in oklch, var(--cyan) 8%, transparent); }

/* ===== ЗОНА ЗАМКА (лицо): flex-раскладка без скролла, всё в vh/% ===== */

/* пункт 7: кнопка «Добавить код» прибита ко дну экрана (не скроллится со списком, как бордюр) */
.code-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 14px 20px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(180deg, transparent, var(--bg-void) 42%);
  pointer-events: none;
}
.code-dock > * { pointer-events: auto; }

/* экран замка листается прокруткой (журнал внизу — просто скроллишь; когда влезает, скролла нет) */
.view.lockview { display: flex; flex-direction: column; }
.view.lockview::-webkit-scrollbar { display: none; }
.lockview .lockhero { flex: 0 0 auto; }
.lockzone-pad { flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 10px; }

/* заряд под медальоном — HUD-сегменты, цвет через --mc */
.lockbatt { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 55%, transparent); }
.lockbatt__ic { display: grid; place-items: center; }
.lockbatt__cells { display: flex; gap: 2.5px; }
.lockbatt__cell { width: 5px; height: 13px; border-radius: 2px; background: var(--hair);
  transition: background 0.4s, box-shadow 0.4s; }
.lockbatt__cell.on { background: var(--mc, var(--cyan));
  box-shadow: 0 0 6px -1px color-mix(in oklch, var(--mc, var(--cyan)) 70%, transparent); }
.lockbatt__cell.tip { animation: battPulse 1.8s ease-in-out infinite; }
@keyframes battPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lockbatt__pct { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.lockbatt__lbl { font-size: 10px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; }

/* квадратные плитки — коды / отпечаток (размер по высоте экрана → влезают всегда) */
.lzgrid { display: flex; justify-content: center; gap: 12px; flex: none; }
.ltile { position: relative; height: clamp(82px, 13vh, 116px); aspect-ratio: 1 / 1; flex: 0 0 auto;
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: clamp(9px, 1.5vh, 13px); text-align: left; border: 1px solid var(--hair);
  background: radial-gradient(135% 105% at 50% -8%, color-mix(in oklch, var(--cyan) 9%, transparent), transparent 62%),
    color-mix(in oklch, var(--bg-1) 55%, transparent);
  transition: transform 0.14s var(--ease), border-color 0.3s, box-shadow 0.4s; }
.ltile:active { transform: scale(0.975); }
/* HUD-насечки по углам */
.ltile::before, .ltile::after { content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none;
  border: 2px solid var(--hair-cyan); opacity: 0.55; }
.ltile::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.ltile::after { right: 9px; bottom: 9px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.ltile__ic { width: clamp(34px, 5.2vh, 42px); height: clamp(34px, 5.2vh, 42px); border-radius: 11px;
  display: grid; place-items: center; flex: none;
  color: var(--cyan); background: color-mix(in oklch, var(--cyan) 10%, transparent); border: 1px solid var(--hair-cyan); }
.ltile__ic--gold { color: var(--gold); background: color-mix(in oklch, var(--gold) 10%, transparent);
  border-color: color-mix(in oklch, var(--gold) 32%, transparent); }
.ltile__txt { display: flex; flex-direction: column; gap: 1px; }
.ltile__t { font-size: clamp(12px, 1.7vh, 13.5px); font-weight: 650; letter-spacing: -0.01em; }
.ltile__m { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }

/* журнал — во всю ширину, тап открывает историю снизу (лист со скроллом внутри) */
.ljournal { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; flex: none;
  padding: 11px 14px; border-radius: var(--r-lg); border: 1px solid var(--hair);
  background: color-mix(in oklch, var(--bg-1) 50%, transparent);
  transition: transform 0.14s var(--ease), border-color 0.3s; }
.ljournal:active { transform: scale(0.99); }
.ljournal__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  color: var(--cyan); background: color-mix(in oklch, var(--cyan) 9%, transparent); border: 1px solid var(--hair-cyan); }
.ljournal__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ljournal__t { font-size: 14px; font-weight: 650; }
.ljournal__m { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== ЛИЦО ЗАМКА «СЕЙФ-ПЛИТА» (sf-) — брашированный металл, гравировка, HUD ===== */
.sf-face{
  --emboss:0 -1px 1px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
  --recess: inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 1px rgba(255,255,255,.045), 0 1px 0 rgba(255,255,255,.05);
  --sf-pad: clamp(14px, 4vw, 18px);
  --sf-padb: clamp(8px, 1.4vh, 14px);
  --peek: clamp(116px, 20vh, 184px);   /* высота свёрнутого шкафчика-журнала */
  position: relative; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  gap: clamp(7px, 1.2vh, 12px);
  padding: clamp(12px, 2.4vh, 18px) var(--sf-pad) var(--sf-padb);
  color: var(--ink-1);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(130% 55% at 50% -8%, color-mix(in oklch, var(--ink-0) 8%, transparent), transparent 60%),
    radial-gradient(120% 60% at 50% 108%, color-mix(in oklch, var(--bg-void) 90%, transparent), transparent 55%),
    linear-gradient(128deg, transparent 38%, color-mix(in oklch, var(--ink-0) 5%, transparent) 50%, transparent 62%),
    repeating-linear-gradient(113deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(113deg, rgba(0,0,0,.05) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, var(--bg-2), var(--bg-0) 44%, var(--bg-void));
}
html.native .sf-face{ padding-top: calc(env(safe-area-inset-top) + 12px); }
.sf-face::before{ content:""; position:absolute; inset:6px; border-radius:30px; pointer-events:none; z-index:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 2px rgba(0,0,0,.35); }
/* статичная виньетка (бегущий блик-«шторка» убран — грузил экран и рвал анимацию) */
.sf-face::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(140% 100% at 50% 0%, transparent 62%, rgba(0,0,0,.26) 100%); }
.sf-face > *{ position: relative; z-index: 1; }

/* болты по углам */
.sf-bolt{ position:absolute; width:11px; height:11px; border-radius:50%; z-index:6; pointer-events:none;
  background:radial-gradient(closest-side at 38% 34%, #40484e, #171c20 70%, #0b0f12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 2px rgba(0,0,0,.7), 0 1px 1px rgba(0,0,0,.5); }
.sf-bolt.tl{ top:14px; left:14px; } .sf-bolt.tr{ top:14px; right:14px; }
.sf-bolt.bl{ bottom:12px; left:14px; } .sf-bolt.br{ bottom:12px; right:14px; }
html.native .sf-bolt.tl, html.native .sf-bolt.tr{ top: calc(env(safe-area-inset-top) + 10px); }

/* шапка: [назад слева] + логотип СТРОГО по центру ЭКРАНА.
   grid 1fr·auto·1fr → боковые колонки всегда равны, поэтому лого в центре
   не смещается кнопкой «назад» ни на каком экране */
.sf-top{ flex:0 0 auto; align-self:stretch; width:100%; box-sizing:border-box; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; padding:0 2px; }
.sf-hbtn{ width:34px; height:34px; flex:0 0 auto; justify-self:start; border-radius:11px; display:grid; place-items:center; color:var(--ink-1);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-0)); box-shadow:var(--recess); transition:transform .13s var(--ease); }
.sf-hbtn:active{ transform:scale(.94); }
.sf-top__sp{ width:34px; height:1px; flex:0 0 auto; }   /* правый баланс = ширине кнопки «назад» */

/* строка статуса: Wi-Fi(в самый левый край) · НАЗВАНИЕ замка(строго по центру) · заряд %(в самый правый край).
   1fr·auto·1fr + растяжка на всю ширину → Wi-Fi и заряд разнесены по краям, название всегда по центру экрана.
   ВАЖНО: имя класса sf-statusbar (НЕ sf-status — тот занят капсулой ЗАПЕРТО/ОТКРЫТО ниже, была коллизия) */
.sf-statusbar{ flex:0 0 auto; align-self:stretch; width:100%; box-sizing:border-box;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  box-shadow:var(--recess), inset 0 0 0 1px var(--hair-cyan); }
.sf-wifi{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-height:16px; }
.sf-wifi svg{ width:18px; height:15px; }   /* цвет — через currentColor от span: search=циан (класс), live=цвет заряда (инлайн) */
.sf-wifi .sfw{ opacity:.26; }
.sf-wifi .sfw0{ opacity:.95; }
@keyframes sfWave{ 0%,70%,100%{opacity:.26;} 34%{opacity:1;} }
/* НЕТ связи → «поиск»: волны мягко бегут, спокойный циан. НИКОГДА не красный/бордовый. */
.sf-wifi--search{ color:var(--cyan); }
.sf-wifi--search .sfw1{ animation:sfWave 1.8s ease-in-out infinite; }
.sf-wifi--search .sfw2{ animation:sfWave 1.8s ease-in-out .28s infinite; }
.sf-wifi--search .sfw3{ animation:sfWave 1.8s ease-in-out .56s infinite; }
/* СВЯЗЬ есть → замер: анимация выключена, все волны ровно горят, цвет = заряд (gfill инлайн на span) */
.sf-wifi--live .sfw{ opacity:.9; animation:none; }
/* уровень силы сигнала: чем слабее rssi, тем больше внешних дуг гаснет (точка sfw0 горит всегда).
   Неактивные дуги — светлый видимый контур (ближе к белому), как пустые деления шкалы, а не тёмная тень. */
.sf-wifi--b1 .sfw2, .sf-wifi--b1 .sfw3,
.sf-wifi--b2 .sfw3{ color:var(--ink-1); opacity:.6; }
.sf-lockname{ justify-self:center; max-width:52vw; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* золотой градиент-перелив на буквах (как красивые имена в приложении) */
  background:linear-gradient(180deg, color-mix(in oklch, var(--gold) 94%, white 10%), var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* П.2B: цвет ИМЕНИ по нагреву линка. ⚠ ТОЛЬКО background-IMAGE (longhand)! `background:` (шорткат) сбрасывает
   background-clip:text базы → заливка растекается на весь прямоугольник, буквы прозрачные = ЦВЕТНОЙ КВАДРАТ (баг 21.07). */
.sf-lockname--cold{ background-image:linear-gradient(180deg, var(--alarm-soft), var(--alarm)); }
.sf-lockname--warming{ background-image:linear-gradient(180deg, color-mix(in oklch, var(--gold) 94%, white 10%), var(--gold-deep)); }
.sf-lockname--hot{ background-image:linear-gradient(180deg, color-mix(in oklch, var(--cyan) 92%, white 12%), var(--cyan-deep)); }
.sf-lockname--remote{ background-image:linear-gradient(100deg, var(--cyan-deep), var(--cyan) 42%, color-mix(in oklch, var(--cyan) 68%, white 22%) 55%, var(--cyan) 70%, var(--cyan-deep)); background-size:220% 100%; animation:sfNameShift 3.6s linear infinite; }
@keyframes sfNameShift{ to{ background-position:220% 0; } }
.sf-bat{ justify-self:end; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.01em; }
.sf-bat i{ font-size:9px; font-style:normal; opacity:.7; margin-left:1.5px; }  /* [#61] % не прилипает к цифре */
/* Волна 1: контейнер левой ячейки (Wi-Fi + значок BLE-режима) */
.sf-statusL{ justify-self:start; display:inline-flex; align-items:center; gap:6px; }
/* Волна 2: BT рядом с WiFi-палочками = режим BLE (работаем локально у двери). Отдельный значок, не подменяет связь с трубкой. */
/* (C) BT: ярко = работаем по BLE напрямую; тускло = сейчас удалёнка/WiFi (доступен, но не активен) */
.sf-ble{ display:inline-flex; align-items:center; color:var(--cyan); margin-left:5px; transition:opacity .3s var(--ease), color .3s var(--ease); }
.sf-ble.is-on{ color:var(--cyan); opacity:1; }
.sf-ble.is-dim{ color:var(--ink-3); opacity:.5; }
.sf-ble svg{ width:16px; height:16px; }
/* [узел Б 08-01, цвета = слово Алика живьём] постоянный индикатор ДВЕРИ в статусной строке:
   открыта = красный (свечение), закрыта = эталонный циан (--door-ok теперь = --cyan),
   неизвестно = ЗОЛОТОЙ (датчика нет / правда устарела). */
.sf-door{ display:inline-flex; align-items:center; margin-left:5px; transition:color .3s var(--ease), opacity .3s var(--ease); }
.sf-door svg{ width:16px; height:16px; }
.sf-door.is-open{ color:var(--alarm); filter:drop-shadow(0 0 5px color-mix(in oklch, var(--alarm) 60%, transparent)); }
.sf-door.is-closed{ color:var(--door-ok); }
.sf-door.is-unknown{ color:var(--gold); opacity:.75; }
/* Волна 1: заряд + свежесть (когда обновлялся) */
/* (A) процент (сверху) + «когда проверено» (снизу) — независимая колонка СЛЕВА от иконки; иконка (.sf-vbat) стоит последней и право-приколота → не двигается от длины надписи */
.sf-bat__v{ display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.02; }
.sf-bat__age{ font-size:8px; font-weight:600; opacity:.5; letter-spacing:.02em; margin-top:1px; white-space:nowrap; }
/* батарея СТОЯ: контур + заливка по заряду + сегменты-«натечки» */
.sf-vbat{ position:relative; width:10px; height:16px; flex:0 0 auto; border:1.4px solid var(--ink-2); border-radius:2.5px; overflow:hidden;
  background:color-mix(in oklch, var(--bg-void) 70%, transparent); }
.sf-vbat::before{ content:""; position:absolute; top:-3px; left:50%; transform:translateX(-50%); width:5px; height:2.2px; border-radius:1.5px 1.5px 0 0; background:var(--ink-2); }
.sf-vbat::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.4) 3px 3.8px); }
.sf-vbat__fill{ position:absolute; left:1px; right:1px; bottom:1px; z-index:1; min-height:2px; border-radius:1.5px;
  box-shadow:0 0 6px -2px currentColor; transition:height .5s var(--ease), background .4s; }

/* разделитель */
.sf-rule{ flex:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.04); }

/* сцена + медальон */
/* сцена — тянется, центрируя медальон; НЕ сжимается ниже медальона (без наезда) */
.sf-stage{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(4px,1.4vh,14px) 0; }
/* (a) медальон закреплён сверху (margin-top на .sf-med) → баннер открытия появляется в пустоте НИЖЕ и НЕ толкает медальон вверх (был рефлоу-скачок) */
.sf-med{ position:relative; width:clamp(184px, min(64vw, 39vh), 268px); aspect-ratio:1; display:grid; place-items:center;
  margin-top:clamp(8px, 3vh, 30px);   /* (b) чуть ниже от верхнего края — глаз Алика */
  cursor:pointer; isolation:isolate; --mc:var(--gold); transition:transform .16s cubic-bezier(.2,.8,.2,1); }
.sf-med:active{ transform:scale(.97); }   /* (a) лёгкий отклик нажатия: мягкий масштаб ВНИЗ, БЕЗ скачка вверх (press-transform в коде не было — это НОВЫЙ честный отклик) */
.sf-med.is-open{ --mc:var(--cyan); }
.sf-med.is-off{ opacity:.55; filter:grayscale(.35); }
/* [X312, хвост 312] ТРЕТЬЕ СОСТОЯНИЕ МОНЕТЫ — «не знаю, открылась ли дверь».
   Ни циан «открыто», ни золото «заперто»: приглушённый нейтральный тон + медленное дыхание свечения.
   ⚠ Это НЕ `is-door-unknown` (тот — про иконку плитки журнала и индикатор датчика): у медальона
   собственные состояния, и чужой класс сюда клеить нельзя. Насечки встают на ПРОМЕЖУТОЧНУЮ длину —
   ровно между «заперто» (.14) и «открыто» (.6), то есть монета честно не показывает ни того, ни другого.
   ☠ ПРО КАСКАД [нашёл скептик узла 🟡-6, проверено номерами строк]: `.sf-med.is-open .sf-dial__major`
   и `.sf-med.is-off …` объявлены НИЖЕ (в блоке циферблата) и при равной специфичности побеждали бы.
   А классы складываются: дверь была открыта → человек закрывает → обрыв ⇒ на монете разом `is-open`
   и `is-unknown`, и насечки вставали бы в «ОТКРЫТО». Поэтому правило длины насечек для третьего
   состояния перенесено ВНИЗ, к соседям (см. блок циферблата), а здесь остаётся только цвет. */
.sf-med.is-unknown{ --mc:var(--ink-1); }
.sf-med.is-unknown .sf-med__glow{ animation-duration:7.2s; opacity:.75; }
.sf-med.is-unknown .sf-med__scan{ animation-duration:11s; }
.sf-med__well{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side at 44% 38%, var(--bg-2), var(--bg-0) 58%, var(--bg-void));
  box-shadow: inset 0 8px 18px rgba(0,0,0,.72), inset 0 -4px 10px rgba(255,255,255,.03), inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06); }
.sf-med__ticks{ position:absolute; inset:clamp(4px,1.4vh,9px); border-radius:50%; opacity:.55;
  background:repeating-conic-gradient(from -90deg, var(--ink-3) 0 .45deg, transparent .45deg 4.99deg);
  -webkit-mask:radial-gradient(closest-side, transparent 80%, #000 81%, #000 93%, transparent 94%);
          mask:radial-gradient(closest-side, transparent 80%, #000 81%, #000 93%, transparent 94%); }
.sf-med__ticks.major{ opacity:.7;
  background:repeating-conic-gradient(from -90deg, var(--ink-1) 0 1.1deg, transparent 1.1deg 29.99deg);
  -webkit-mask:radial-gradient(closest-side, transparent 77%, #000 78%, #000 94%, transparent 95%);
          mask:radial-gradient(closest-side, transparent 77%, #000 78%, #000 94%, transparent 95%); }
.sf-med__glow{ position:absolute; inset:14%; border-radius:50%; z-index:0;
  background:radial-gradient(closest-side, color-mix(in oklch, var(--mc) 34%, transparent), transparent 72%);
  filter:blur(11px); animation:sfBreath 4.6s ease-in-out infinite; transition:background .5s var(--ease); }
@keyframes sfBreath{ 0%,100%{opacity:.5;} 50%{opacity:.85;} }
.sf-med__bezel{ position:absolute; inset:19%; border-radius:50%; z-index:1;
  background:conic-gradient(from 210deg, #333c43, #12181c 22%, #333c43 46%, #10151a 70%, #333c43 88%, #12181c);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5); }
.sf-med__bezel::after{ content:""; position:absolute; inset:9%; border-radius:50%;
  background:radial-gradient(closest-side, var(--bg-void), var(--bg-0)); box-shadow: inset 0 3px 8px rgba(0,0,0,.7); }
/* просто тонкий крутящийся кружок вокруг циферблата (постоянная ротация) */
.sf-med__scan{ position:absolute; inset:-3px; border-radius:50%; z-index:6;
  background:conic-gradient(from 0deg, transparent 0 66%, color-mix(in oklch, var(--mc) 14%, transparent) 79%, var(--mc) 91%, transparent 97%);
  -webkit-mask:radial-gradient(closest-side, transparent 95.6%, #000 96.7%, #000 99.6%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 95.6%, #000 96.7%, #000 99.6%, transparent 100%);
  filter:drop-shadow(0 0 5px color-mix(in oklch, var(--mc) 65%, transparent)); animation:sfSpin 6.5s linear infinite; }
@keyframes sfSpin{ to{ transform:rotate(360deg); } }
.sf-crest{ position:relative; z-index:3; width:62%; aspect-ratio:1; border-radius:50%; object-fit:cover; display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)) drop-shadow(0 0 13px color-mix(in oklch, var(--mc) 40%, transparent)); transition:filter .5s var(--ease); }
/* SVG-циферблат медальона: насечки + СТАТУС по дуге (как GERZOG) */
.sf-dial{ position:absolute; inset:0; z-index:5; width:100%; height:100%; pointer-events:none; overflow:visible; }
.sf-dial__minor line{ stroke:color-mix(in oklch, white 42%, var(--ink-1)); opacity:.72; }
.sf-med.is-off .sf-dial__minor line{ opacity:.4; }
/* крупные «часовые» насечки: цвет по состоянию (золото/зелёный) + длина через dash */
/* ЗАКРЫТО: длинные, тянутся к центру, СТОЯТ на месте (без постоянной анимации) */
.sf-dial__major{ stroke:var(--mc); stroke-dasharray:1; stroke-dashoffset:.14;
  filter:drop-shadow(0 0 2.5px color-mix(in oklch, var(--mc) 55%, transparent));
  transition:stroke-dashoffset .6s var(--ease), stroke .55s var(--ease); }
/* ОТКРЫТО: красиво убираются от круга медальона (ужимаются к краю) */
.sf-med.is-open .sf-dial__major{ stroke-dashoffset:.6; }
.sf-med.is-off .sf-dial__major{ stroke-dashoffset:.45; }
/* [X312 + скептик 🟡-6] ТРЕТЬЕ СОСТОЯНИЕ — ПОСЛЕДНИМ, чтобы выигрывать каскад у `is-open`/`is-off`:
   «не знаю» сильнее любого прежнего знания о положении. Длина насечек — ровно между «заперто» (.14)
   и «открыто» (.6): монета честно не показывает ни того, ни другого. Заодно снимаем приглушение
   `is-off`, если оно совпало: неизвестность обязана быть ВИДНА, а не притушена до неразличимости. */
.sf-med.is-unknown .sf-dial__major{ stroke-dashoffset:.37; }
.sf-med.is-unknown.is-off{ opacity:.8; filter:none; }
/* статус по дуге: металл-серебро с оттенком состояния */
.sf-dial__txt{ font-family:Georgia,"Times New Roman","PT Serif",serif; font-weight:700; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  fill:color-mix(in oklch, white 60%, var(--mc)); paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:.6;
  filter:drop-shadow(0 0 5px color-mix(in oklch, var(--mc) 45%, transparent)); transition:fill .5s var(--ease); }
.sf-med.is-opening .sf-dial__txt{ animation:sfStatusPulse 1.2s ease-in-out infinite; }
@keyframes sfStatusPulse{ 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* статус */
.sf-status-block{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.sf-status{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 11px; border-radius:999px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft);
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); box-shadow:var(--recess), inset 0 0 0 1px var(--hair-gold); text-shadow:var(--emboss); }
.sf-status.is-open{ color:var(--cyan-soft); box-shadow:var(--recess), inset 0 0 0 1px var(--hair-cyan); }
.sf-status.is-off{ color:var(--ink-3); box-shadow:var(--recess), inset 0 0 0 1px var(--hair); }
.sf-sdot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold);
  animation:sfDot 2s ease-in-out infinite; flex:0 0 auto; }
.sf-status.is-open .sf-sdot{ background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
.sf-status.is-off .sf-sdot{ background:var(--ink-3); box-shadow:none; animation:none; }
@keyframes sfDot{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.82);} }
.sf-hint{ font-size:11px; color:var(--ink-3); letter-spacing:.02em; }

/* транзиентные плашки */
.sf-alerts{ flex:0 0 auto; display:flex; flex-direction:column; gap:8px; }
.sf-alerts .openbtn{ margin:0; }

/* гравированные панели */
.sf-panel{ flex:0 0 auto; border-radius:var(--r-md); background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); box-shadow:var(--recess); }
.sf-battery{ display:flex; align-items:center; gap:13px; padding:11px 14px; }
.sf-bat__ico{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--cyan);
  background:linear-gradient(180deg, var(--bg-0), var(--bg-void)); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-cyan); }
.sf-bat__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; }
.sf-bat__top{ display:flex; align-items:baseline; justify-content:space-between; }
.sf-bat__label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; }
.sf-bat__val{ font-family:var(--font-mono); font-size:18px; font-weight:600; letter-spacing:.02em; }
.sf-bat__val i{ font-size:11px; font-style:normal; color:var(--ink-2); }
.sf-gauge{ position:relative; height:11px; border-radius:6px; overflow:hidden; background:var(--bg-void);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.4); }
.sf-gauge__fill{ position:absolute; inset:0 auto 0 0; border-radius:6px; background:var(--cyan);
  box-shadow:0 0 12px color-mix(in oklch, var(--cyan) 45%, transparent); transition:width .5s var(--ease); }
.sf-gauge__seg{ position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 9px, var(--bg-void) 9px 12px); }

/* действия (гравированные кнопки) */
/* [#119 Г1] ряды ФИКСИРОВАННОЙ высоты: живая начинка плитки «Журнал» (иконка+название события)
   меняется — размер кнопок НЕ скачет (слово Алика 08-01). 54px = высота плитки с 1-строчным
   титулом (ico 32 + padding 9+9 + зазор); двухстрочные титулы клампятся, бейдж — ellipsis. */
.sf-actions{ flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:54px; gap:11px; }
.sf-actions--one{ grid-template-columns:1fr; }
.sf-act{ position:relative; min-width:0; text-align:left; border:0; cursor:pointer; color:var(--ink-1); font-family:var(--font-ui);
  border-radius:var(--r-md); padding:9px 12px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:1px 9px; align-items:center;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); box-shadow:var(--recess); transition:transform .18s ease, box-shadow .18s ease; }
.sf-act:active{ transform:translateY(1px); box-shadow:inset 0 3px 6px rgba(0,0,0,.7); }
.sf-act__ico{ grid-row:1 / span 2; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--bg-0), var(--bg-void)); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.sf-act__title{ align-self:end; min-width:0; max-width:100%; font-size:12px; font-weight:600; line-height:1.12; color:var(--ink-0); text-shadow:var(--emboss);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf-act__badge{ align-self:start; min-width:0; max-width:100%; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-act--gold .sf-act__ico{ color:var(--gold); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-gold); }
.sf-act--gold .sf-act__badge{ color:var(--gold-soft); }
.sf-act--cyan .sf-act__ico{ color:var(--cyan); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-cyan); }
.sf-act--cyan .sf-act__badge{ color:var(--cyan-soft); }
/* плитка «Настройки» — служебная, нейтральная (без золота/циана) */
.sf-act--set .sf-act__ico{ color:var(--ink-1); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair); }
.sf-act--set .sf-act__badge{ color:var(--ink-3); }
/* [#119 Г3] живая иконка плитки «Журнал»: цвет = ПРАВДА двери (узел В) поверх тона плитки.
   Открыта/не закрыта — КРАСНАЯ, закрыта — ЗЕЛЁНАЯ, правда устарела — нейтраль, тревога — алая. */
.sf-act__ico.is-door-open{ color:var(--alarm-soft); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--alarm) 45%, transparent), 0 0 16px -6px color-mix(in oklch, var(--alarm) 65%, transparent); }
.sf-act__ico.is-door-closed{ color:var(--door-ok); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--door-ok) 40%, transparent), 0 0 16px -6px color-mix(in oklch, var(--door-ok) 55%, transparent); }
.sf-act__ico.is-door-unknown{ color:var(--gold); }   /* [узел Б, слово Алика] состояние неизвестно = золотой */
.sf-act__ico.is-tone-alarm{ color:var(--alarm-soft); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--alarm) 38%, transparent); }

/* ============================================================
   AccessCard — единая карточка доступа (код · отпечаток · карта).
   БЕЗ иконки слева (раздел подписан в шапке); ровные строки, чип-статус,
   крупное значение, кнопки изменить/удалить в правом верхнем углу.
   ============================================================ */
.acccard{ position:relative; border-radius:var(--r-md); padding:9px 12px 10px;
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:0 11px; align-items:start;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); box-shadow:var(--recess);
  border:1px solid var(--hair); transition:opacity .2s ease, border-color .3s ease; }
.acccard.st-active{ border-color:var(--hair-ok); }
.acccard.st-pending{ border-color:var(--hair-gold); }
.acccard.st-failed, .acccard.st-expired{ border-color:color-mix(in oklch, var(--alarm) 50%, transparent); }
.acccard.is-dim{ opacity:.62; }
/* иконка-индикатор слева (на всю высоту), цвет = статус */
.acccard__ic{ grid-row:1 / -1; align-self:center; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--ink-3); background:linear-gradient(180deg, var(--bg-0), var(--bg-void));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6); transition:color .3s ease, box-shadow .3s ease; }
.acccard.st-active  .acccard__ic{ color:var(--ok);   box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-ok),   0 0 16px -6px color-mix(in oklch, var(--ok) 60%, transparent); }
.acccard.st-pending .acccard__ic{ color:var(--gold); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-gold); animation:accIcPulse 1.2s ease-in-out infinite; }
.acccard.st-failed  .acccard__ic,
.acccard.st-expired .acccard__ic{ color:var(--alarm-soft); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--alarm) 38%, transparent); }
@keyframes accIcPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
/* строка 1: имя + кнопки */
.acccard__head{ grid-column:2; display:flex; align-items:center; gap:8px; min-height:24px; }
.acccard__title{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--ink-0);
  text-shadow:var(--emboss); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acccard__acts{ flex:0 0 auto; display:flex; align-items:center; gap:2px; margin-right:-5px; }
.acccard__acts .iconbtn{ width:32px; height:32px; color:var(--ink-3); background:none; box-shadow:none; }   /* в карточках — плоские мелкие иконки, без объёма */
.acccard__acts .acccard__edit{ color:var(--ink-2); }
.acccard__busy{ width:32px; text-align:center; align-self:center; color:var(--ink-3); font-size:14px; }
/* строка 2: статус-блок «АКТИВНО» + код(точки, только у кодов) */
.acccard__row{ grid-column:2; display:flex; align-items:center; gap:10px; margin-top:2px; }
/* бейдж НЕ распирает карточку: ужимается (flex:0 1) + самый длинный текст («СНИМАЮ ОТПЕЧАТОК N/5») режется эллипсисом, а не уезжает за угол */
.acccard__status{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:5px; flex:0 1 auto; min-width:0; max-width:100%;
  height:18px; padding:0 8px; border-radius:999px; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.acccard__status .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 auto; box-shadow:0 0 6px currentColor; }
.acccard__status .acccard__st-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* АКТИВНО — зелёный эталон, мягкое дыхание свечения (бегущий пульс остановлен) */
/* «сервер получил» — наш ТАЛОННЫЙ ЦИАН (решение Алика), не системный --ok */
.acccard__status.is-active{ color:var(--cyan-soft); background:color-mix(in oklch, var(--cyan) 15%, transparent); border:1px solid var(--hair-cyan);
  box-shadow:0 0 14px -5px color-mix(in oklch, var(--cyan) 60%, transparent); animation:accGlow 2.8s ease-in-out infinite; }
/* пишется в замок — золото + бегущая полоска shimmer */
.acccard__status.is-pending{ color:var(--gold-soft); background:color-mix(in oklch, var(--gold) 14%, transparent); border:1px solid var(--hair-gold); }
.acccard__status.is-pending::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 25%, color-mix(in oklch, var(--gold) 42%, transparent) 50%, transparent 75%);
  background-size:220% 100%; animation:shimmer 1.25s linear infinite; }
.acccard__status.is-failed, .acccard__status.is-expired{ color:var(--alarm-soft); background:color-mix(in oklch, var(--alarm) 13%, transparent);
  border:1px solid color-mix(in oklch, var(--alarm) 32%, transparent); }
@keyframes accGlow{ 0%,100%{ box-shadow:0 0 14px -5px color-mix(in oklch, var(--cyan) 55%, transparent); } 50%{ box-shadow:0 0 19px -3px color-mix(in oklch, var(--cyan) 78%, transparent); } }
.acccard__code{ margin-left:auto; font-family:var(--font-mono); font-size:17px; font-weight:600; letter-spacing:.15em; color:var(--ink-1);
  cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:color .15s ease; }
.acccard__code.is-shown{ color:var(--ink-0); letter-spacing:.13em; }
.acccard.is-dim .acccard__code{ color:var(--ink-3); }
/* строки 3-4: тип снизу + даты (для временного) */
.acccard__type{ grid-column:2; display:flex; align-items:center; gap:6px; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--ink-1); }
.acccard__type i{ color:var(--ink-3); display:grid; }
.acccard__dates{ grid-column:2; display:flex; align-items:center; gap:5px; margin-top:3px; font-size:10.5px; color:var(--ink-3); min-width:0; }
.acccard__dates span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* [Р2] ПАСПОРТ КЛЮЧА (кому · кто выдал · когда) — обрезать НЕЛЬЗЯ: именно на нём держится
   ответственность (слово Алика 08-08). Даём перенос по строкам вместо многоточия. */
.acccard__pass span{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.45; }
.acccard__pass{ align-items:flex-start; }
.acccard__pass svg{ flex:0 0 auto; margin-top:2px; }
.acccard.st-expired .acccard__dates{ color:var(--alarm-soft); }
/* взвод удаления: удержали карточку → красный контур + красная кнопка-корзина */
.acccard.is-armed{ border-color:var(--alarm) !important; box-shadow:var(--recess), 0 0 0 1px color-mix(in oklch, var(--alarm) 45%, transparent),
  0 0 22px -8px color-mix(in oklch, var(--alarm) 55%, transparent); }
.acccard__del{ color:var(--alarm); box-shadow:inset 0 0 0 1.4px color-mix(in oklch, var(--alarm) 60%, transparent); border-radius:9px; }
.acccard__del:active{ transform:scale(.92); }
.acccard__armhint{ grid-column:2; margin-top:9px; font-size:10.5px; line-height:1.45; color:var(--alarm-soft); }

/* журнал — обычный блок снизу; кнопка-шеврон разворачивает список, экран листается ПРОКРУТКОЙ */
.sf-journal{ flex:0 0 auto; margin:clamp(12px,2.4vh,20px) calc(-1 * var(--sf-pad)) 0; padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1) 46%, var(--bg-0));
  box-shadow:0 -6px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.02); }
.sf-journal::before{ content:""; display:block; width:38px; height:4px; border-radius:99px; margin:0 auto 8px; background:var(--ink-3); opacity:.5; }
.sf-jhead{ display:flex; align-items:center; gap:11px; width:100%; padding:0; border:0;
  background:transparent; cursor:pointer; text-align:left; }
.sf-jhead:active{ opacity:.85; }
.sf-jchev{ flex:0 0 auto; color:var(--ink-3); display:grid; transform:rotate(90deg); transition:transform .3s var(--ease); }
.sf-jchev.is-exp{ transform:rotate(-90deg); }
.sf-jico{ flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--cyan);
  background:linear-gradient(180deg, var(--bg-0), var(--bg-void)); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair-cyan); }
.sf-jmeta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sf-jmeta b{ font-size:13px; font-weight:600; color:var(--ink-0); }
.sf-jmeta i{ font-size:11.5px; font-style:normal; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-jmeta i em{ font-style:normal; color:var(--ink-0); font-weight:500; }
.sf-jempty{ color:var(--ink-3); font-size:12.5px; line-height:1.5; padding:14px 2px; }
.sf-jlist{ display:flex; flex-direction:column; margin-top:10px; padding-top:4px; border-top:1px solid var(--hair); }
.sf-log{ display:flex; align-items:center; gap:11px; padding:8px 2px; }
.sf-log + .sf-log{ border-top:1px solid color-mix(in oklch, var(--ink-0) 5%, transparent); }
.sf-log__av{ flex:0 0 auto; width:29px; height:29px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); box-shadow:inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px var(--hair); }
.sf-log__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.sf-log__txt b{ font-size:12.5px; font-weight:500; color:var(--ink-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-log__txt small{ font-size:10.5px; color:var(--ink-3); }
.sf-log__tag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-2); }
.sf-log.fresh .sf-log__av{ color:var(--cyan); box-shadow:inset 0 0 0 1px var(--hair-cyan), 0 0 10px color-mix(in oklch, var(--cyan) 22%, transparent); }
.sf-log.fresh .sf-log__tag{ color:var(--cyan-soft); }
.sf-log.gold .sf-log__tag{ color:var(--gold-soft); }
.sf-log.alarm .sf-log__tag{ color:var(--alarm-soft); }

/* мастер регистрации квартиры — шаги + autocomplete */
.wiz-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.wiz-step { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding-bottom: 9px; border-bottom: 2px solid var(--hair); transition: 0.25s; }
.wiz-step.is-on { color: var(--ink-0); border-color: var(--cyan); }
.wiz-step.is-done { color: var(--cyan-soft); border-color: var(--hair-cyan); }
.wiz-step__n { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11px; font-family: var(--font-mono); border: 1px solid var(--hair); color: var(--ink-2); }
.wiz-step.is-on .wiz-step__n { background: var(--cyan); border-color: var(--cyan); color: var(--bg-0); }
.wiz-step.is-done .wiz-step__n { background: color-mix(in oklch, var(--cyan) 18%, transparent); border-color: var(--hair-cyan); color: var(--cyan-soft); }

.ac-list { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg-1) 60%, transparent); }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; width: 100%;
  font-size: 14.5px; color: var(--ink-1); border-bottom: 1px solid var(--hair); transition: background 0.15s; }
.ac-item:last-child { border-bottom: none; }
.ac-item:active { background: color-mix(in oklch, var(--cyan) 10%, transparent); }
.ac-item .icon, .ac-item svg { color: var(--cyan); flex: none; }

/* видео-слот в настройках квартиры */
.vid-slot { margin-top: 10px; }
.vid-slot__add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px;
  border: 1px dashed var(--hair-cyan); background: color-mix(in oklch, var(--cyan) 6%, transparent); color: var(--cyan-soft); font-size: 13.5px; font-weight: 600; }
.vid-slot__has { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--glass); }

/* фуллскрин-просмотр галереи (lightbox) */
.lightbox { position: fixed; inset: 0; z-index: 200; background: oklch(0.02 0.01 224 / 0.97); }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 0 6px; }
.lightbox__media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox__close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: oklch(0.1 0.01 224 / 0.7); border: 1px solid var(--hair); color: var(--ink-0);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gal__play { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklch, var(--cyan) 20%, transparent); border: 1px solid var(--hair-cyan); color: var(--cyan);
  box-shadow: 0 0 26px -6px color-mix(in oklch, var(--cyan) 70%, transparent); }
.gal__vidtag { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--cyan-soft); }
.gal__empty { width: 100%; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--hair-cyan); background: color-mix(in oklch, var(--bg-1) 50%, transparent); color: var(--ink-2); }
.gal__empty span { font-size: 13px; }
.gal__dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none; }
.gal__dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklch, var(--ink-0) 35%, transparent); transition: all 0.2s; }
.gal__dot.is-on { width: 18px; border-radius: 3px; background: var(--cyan); }
.gal__add { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; background: oklch(0.1 0.01 224 / 0.62); border: 1px solid var(--hair-cyan); color: var(--cyan-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Пульс «коснитесь замка» (07-17): замок спит и просыпается от касания — экран просит действие,
   а не молчит крутилкой. Золотой = ждём человека (палитра: золото — «нужно действие/замок знает»). */
.touch-pulse { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--gold) 16%, transparent) 0%, transparent 70%);
  box-shadow: inset 0 0 0 1px var(--hair-gold);
  animation: touchPulse 1.6s ease-in-out infinite; }
@keyframes touchPulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px var(--hair-gold), 0 0 0 0 color-mix(in oklch, var(--gold) 30%, transparent); }
  50%      { transform: scale(1.06); box-shadow: inset 0 0 0 1px var(--hair-gold), 0 0 22px 6px color-mix(in oklch, var(--gold) 22%, transparent); }
}

/* Диалог-подтверждение через портал в body (07-17): прилипает к низу ЭКРАНА, а не к низу
   прокручиваемого .view. Внутри портала лист и затемнение — fixed, поверх всего. */
.ask-portal .sheet-scrim { position: fixed; inset: 0; z-index: 9998; }
.ask-portal .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; }

/* Кружок внутри красной кнопки удаления (07-17): работа видна прямо в кнопке, без отдельного блока. */
.spinner--on-red { border-color: oklch(1 0 0 / 0.35); border-top-color: oklch(1 0 0 / 0.95); }

/* ── Сопряжение: анимации (07-17). Смысл цвета — как везде в GERZOG:
   ЗОЛОТО = ждём человека (коснись замка), ЦИАН = связь пошла, работаем. */

/* Три волны под просьбой коснуться — «ищу, слушаю эфир», без единого слова. */
.wave3 { display: flex; gap: 6px; justify-content: center; margin-top: 18px; height: 10px; align-items: center; }
.wave3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  opacity: 0.25; animation: wave3 1.4s ease-in-out infinite; }
.wave3 i:nth-child(2) { animation-delay: 0.18s; }
.wave3 i:nth-child(3) { animation-delay: 0.36s; }
@keyframes wave3 {
  0%, 100% { opacity: 0.25; transform: translateY(0) scale(1); }
  40%      { opacity: 1;    transform: translateY(-5px) scale(1.25); }
}

/* Связь телефон ↔ замок: луч бежит от телефона к замку, оба конца дышат. */
.pair-anim { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pair-anim__dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--cyan); border: 1px solid var(--hair-cyan);
  background: radial-gradient(circle, color-mix(in oklch, var(--cyan) 14%, transparent) 0%, transparent 70%);
  animation: pairBreath 1.8s ease-in-out infinite; }
.pair-anim__dot--lock { animation-delay: 0.9s; }
@keyframes pairBreath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--cyan) 30%, transparent); }
  50%      { box-shadow: 0 0 18px 3px color-mix(in oklch, var(--cyan) 28%, transparent); }
}
.pair-anim__beam { display: flex; gap: 5px; align-items: center; }
.pair-anim__beam i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
  opacity: 0.2; animation: pairBeam 1.2s linear infinite; }
.pair-anim__beam i:nth-child(2) { animation-delay: 0.2s; }
.pair-anim__beam i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pairBeam {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.5); box-shadow: 0 0 8px var(--cyan); }
}

/* Полоска журнала ОЖИВАЕТ, пока телефон спрашивает замок (17.07, слово Алика: «есть тонкая полосочка —
   её можно анимировать; остановилась — значит обновился»). Ни кнопки, ни слов: работа видна самой лентой. */
.tl--pulling::before { background: linear-gradient(180deg,
    var(--hair) 0%, var(--cyan) 35%, var(--cyan) 45%, var(--hair) 80%);
  background-size: 100% 220%; animation: tlPull 1.1s linear infinite;
  box-shadow: 0 0 8px -1px color-mix(in oklch, var(--cyan) 45%, transparent); }
/* движение СВЕРХУ ВНИЗ (слово Алика 17.07) — как читается лента и как приходят события */
@keyframes tlPull { from { background-position: 0 120%; } to { background-position: 0 -120%; } }

/* Заголовок нашей таблички — по центру (слово Алика: «стоит вбок»). Только внутри диалога-подтверждения,
   штатные листы (добавление устройства и т.п.) не трогаем. */
.ask-portal .sheet__head { justify-content: center; text-align: center; }

/* ============ Э3 косметика: ОКНА (наш HUD вместо системных alert/confirm) + ТОСТЫ ============ */
.gz-modal-bg{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px;
  background:color-mix(in oklch, #000 62%, transparent); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:gzFade .16s ease-out; }
.gz-modal{ width:100%; max-width:340px; box-sizing:border-box; background:var(--bg-1); border:1px solid var(--hair-cyan);
  border-radius:18px; padding:22px 20px 16px; text-align:center; box-shadow:0 20px 60px -12px rgba(0,0,0,.6); animation:gzPop .18s cubic-bezier(.2,.9,.3,1.2); }
.gz-modal__ic{ width:46px; height:46px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklch, var(--cyan) 14%, transparent); color:var(--cyan); border:1px solid var(--hair-cyan); }
.gz-modal--error .gz-modal__ic{ background:color-mix(in oklch, var(--alarm) 15%, transparent); color:var(--alarm-soft); border-color:color-mix(in oklch, var(--alarm) 40%, transparent); }
.gz-modal--confirm .gz-modal__ic{ background:color-mix(in oklch, var(--gold) 15%, transparent); color:var(--gold-soft); border-color:color-mix(in oklch, var(--gold) 40%, transparent); }
.gz-modal--error{ border-color:color-mix(in oklch, var(--alarm) 35%, transparent); }
.gz-modal.is-danger{ border-color:color-mix(in oklch, var(--alarm) 45%, transparent); }
.gz-modal__title{ font-size:16px; font-weight:700; color:var(--ink-0); margin-bottom:6px; }
.gz-modal__text{ font-size:13.5px; line-height:1.5; color:var(--ink-2); margin-bottom:16px; overflow-wrap:break-word; }
.gz-modal__acts{ display:flex; gap:10px; }
.gz-modal__btn{ flex:1 1 0; min-width:0; }
.gz-toasts{ position:fixed; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom,0)); z-index:9998; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 20px; }
.gz-toast{ pointer-events:auto; display:inline-flex; align-items:center; gap:8px; max-width:100%; box-sizing:border-box;
  padding:10px 16px; border-radius:999px; font-size:13px; font-weight:600; background:var(--bg-2); color:var(--ink-0);
  border:1px solid var(--hair-cyan); box-shadow:0 8px 24px -8px rgba(0,0,0,.5); animation:gzToastIn .22s ease-out; }
.gz-toast--ok{ color:var(--ok-soft); }
.gz-toast--warn{ color:var(--alarm-soft); border-color:color-mix(in oklch, var(--alarm) 35%, transparent); }
.gz-toast span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes gzFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gzPop{ from{ opacity:0; transform:scale(.94) translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes gzToastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }


/* ═══ ⭐ Б4 — ПИТАНИЕ НАШЕГО ЗАМКА: короткая строка на лице + компактный компонент ═════════════
   Заводские замки не тронуты: у них .sf-bat/.sf-vbat выше. Наша кнопка на лице теперь показывает
   ровно то, что просил владелец: процент и батарейку, заполненную по нему. Ширина у строки
   маленькая специально — из-за длинного описания (Б3) имя замка выталкивалось из центра. */
.sf-obat{ justify-self:end; display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  background:transparent; padding:6px 2px 6px 10px; color:var(--ink-1); font-family:var(--font-ui);
  transition:transform .16s ease, opacity .16s ease; }
.sf-obat:active{ transform:translateY(1px); opacity:.75; }
.sf-obat__pct{ font-family:var(--font-mono); font-size:13px; font-weight:700; line-height:1; white-space:nowrap; }
.sf-obat__pct i{ font-size:9px; font-style:normal; opacity:.7; margin-left:1.5px; }

/* ── компонент питания (Sheet): всё влезает на один экран, прокрутки нет ── */
.ob4-head{ display:flex; align-items:center; gap:14px; padding:2px 0 12px; }
/* компактная шапка листа — по центру и мельче (слово владельца 2026-08-20) */
/* шапка по центру: `.sheet__head` — флекс со `space-between`, и одинокий заголовок в нём
   прижимается влево; одного `text-align` мало (слово владельца 08-20: «сделай в середине») */
.sheet__head--sm{ justify-content:center; text-align:center; padding-bottom:2px; }
.sheet__title--sm{ font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); }
.ob4-icon{ flex:0 0 auto; display:block; }
.ob4-icon rect, .ob4-icon line{ transition:y .35s ease, height .35s ease, fill .35s ease; }
.ob4-headcol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ob4-pct{ font-family:var(--font-mono); font-size:28px; font-weight:700; line-height:1; letter-spacing:-.01em; }
.ob4-pct i{ font-size:14px; font-style:normal; opacity:.65; margin-left:2px; }
.ob4-word{ font-size:13px; color:var(--ink-2); letter-spacing:.01em; }

.ob4-graph{ position:relative; width:100%; height:104px; border-radius:var(--r-md); background:var(--bg-void);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6); overflow:hidden; display:grid; place-items:center; }
.ob4-graph svg{ width:100%; height:100%; display:block; }
.ob4-ax{ font-family:var(--font-mono); font-size:7.5px; fill:var(--ink-3); }
.ob4-ax--bad{ fill:var(--alarm); opacity:.85; }
.ob4-note{ font-size:11.5px; line-height:1.4; color:var(--ink-3); text-align:center; }
.ob4-note--bad{ color:var(--alarm-soft); margin:8px 0 2px; }

.ob4-rows{ display:flex; gap:10px; margin:12px 0 12px; }
.ob4-cell{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; align-items:center;
  padding:10px 8px; border-radius:var(--r-md); background:var(--bg-1); box-shadow:inset 0 0 0 1px var(--hair); }
/* размер цифр в плитках — по слову владельца 2026-08-20 («цифры слишком большие»): подпись и
   значение должны читаться парой, а не спорить за внимание с главным числом наверху */
.ob4-cell b{ font-family:var(--font-mono); font-size:13.5px; font-weight:700; color:var(--ink-0); line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; letter-spacing:-.01em; }
.ob4-cell span{ font-size:10px; color:var(--ink-3); text-align:center; }

.ob4-btn{ width:100%; }
.ob4-check{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); margin:12px 0 2px; cursor:pointer; }
.ob4-check input{ width:17px; height:17px; accent-color:var(--cyan); flex:0 0 auto; }