/* HomeHub — домашняя книга учёта.
   Раскладка: липкая шапка, прокручиваемый лист, нижняя панель разделов.
   Один столбец до 720px, на планшете/десктопе — та же колонка по центру. */
:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface2: #e9ecf3;
  --fg: #15171e;
  --muted: #6b7280;
  --faint: #a0a7b4;
  --line: #e1e4eb;
  --accent: #2f5bea;
  --indigo: #5b5fc7;
  --orange: #e8842a;
  --purple: #8b4fc2;
  --blue: #1f7ae0;
  --pink: #d6457f;
  --ok: #1f9d55;
  --warn: #d97706;
  --bad: #d13c3c;
  --gray: #8a919e;
  --radius: 16px;
  --display: "Manrope", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --body: "Golos Text", "SF Pro Text", -apple-system, system-ui, sans-serif;
  /* Шкала Money Lab: один размер для каждой роли текста во всех разделах. */
  --text-caption: 11.5px;
  --text-label: 12.5px;
  --text-small: 13px;
  --text-switch: 13.5px;
  --text-control: 14px;
  --text-body: 15px;
  --text-input: 16px;
  --text-section: 17px;
  --text-kpi: 19px;
  --text-title: 26px;
  --text-value: 32px;
  --text-tab: 10.5px;
  --tabbar-h: 58px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1116; --surface: #181b22; --surface2: #232731; --fg: #eceef3; --muted: #9aa3b2;
    --faint: #6b7380; --line: #2a2f3a; --accent: #6b8cff; --indigo: #8285e0; --orange: #f09a4a;
    --purple: #ad7ae0; --blue: #4d9cf5; --pink: #ec6a9c; --ok: #3fbf74; --warn: #f0a030; --bad: #ef5c5c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1116; --surface: #181b22; --surface2: #232731; --fg: #eceef3; --muted: #9aa3b2;
  --faint: #6b7380; --line: #2a2f3a; --accent: #6b8cff; --indigo: #8285e0; --orange: #f09a4a;
  --purple: #ad7ae0; --blue: #4d9cf5; --pink: #ec6a9c; --ok: #3fbf74; --warn: #f0a030; --bad: #ef5c5c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  --fg: var(--ink); --muted: var(--ink-soft); --faint: var(--ink-faint); --gray: var(--ink-faint);
  margin: 0; background: var(--paper, #f1e9d6); color: var(--fg);
  font: var(--text-body)/1.45 var(--body); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--ink); }
h3 { font-size: var(--text-input); font-weight: 700; }
h4 { font-size: var(--text-control); font-weight: 700; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── оболочка ─────────────────────────────────────────── */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar-in {
  max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 52px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.title { font-size: var(--text-title); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; gap: 6px; }
.iconbtn {
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.iconbtn:active { background: var(--surface2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .dot { position: absolute; margin: -16px 0 0 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.view {
  flex: 1; max-width: 720px; width: 100%; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 8px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
}
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px));
}
.tabbar-in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); }
.tab {
  border: 0; background: transparent; color: var(--faint); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; font-size: var(--text-tab); font-weight: 500;
}
.tab svg { width: 24px; height: 24px; }
.tab span { max-width: 100%; overflow-wrap: anywhere; }
.tab[aria-current="page"] { color: var(--accent); }

/* ── общие элементы ───────────────────────────────────── */
.h-big { font-size: var(--text-value); font-weight: 800; margin: 8px 0 12px; }
.sub { color: var(--muted); font-size: var(--text-small); margin: -8px 0 14px; }
.section { margin-top: 18px; }
.section-title {
  font-size: var(--text-section); font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ink);
  margin: 0 4px 8px; display: flex; align-items: center; gap: 8px;
}
.section-title .n { margin-left: auto; font-family: var(--body); font-size: var(--text-switch); font-weight: 600; letter-spacing: inherit; text-transform: none; font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--fg); border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row:active { background: var(--surface2); }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .name { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.row .meta { font-size: var(--text-label); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta.wrap { white-space: normal; }
.row .warn { font-size: var(--text-label); color: var(--bad); }
.row .aside { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.row .aside b { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.row .aside small { font-size: var(--text-caption); color: var(--muted); }
.row .chev { flex: none; color: var(--faint); width: 16px; height: 16px; }
.ava {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center;
  justify-content: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: var(--text-control); background: var(--indigo);
}
.ava.ring { background: transparent; border: 2px solid var(--blue); color: var(--blue); }   /* инициалы в Контактах */
.ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.ava.sq { border-radius: 10px; }
.ava.lg { width: 56px; height: 56px; }
.ava svg { width: 22px; height: 22px; }
.thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--text-caption); font-weight: 600; background: var(--surface2); color: var(--muted); }
.pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.pill.blue { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Единая панель переключателей, как в Money Lab. Длинные списки прокручиваются внутри неё. */
.chips { display: flex; gap: 2px; overflow-x: auto; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scrollbar-width: none; margin: 0 0 12px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 9px; border: 0;
  background: transparent; color: var(--muted); font-size: var(--text-switch); font-weight: 500; white-space: nowrap;
}
.chip .n { color: inherit; font-weight: inherit; }
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.chip svg { width: 15px; height: 15px; }
.search { position: relative; margin: 2px 0 12px; }
.search input {
  width: 100%; padding: 11px 14px 11px 40px; border: 0; border-radius: 12px; background: var(--surface); color: var(--fg); font-size: var(--text-input);
}
.search input::placeholder { color: var(--faint); }
.search svg { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; color: var(--faint); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.empty h3 { font-size: 18px; margin-bottom: 6px; color: var(--fg); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: var(--text-caption); padding: 4px 10px; border-radius: 8px; background: var(--surface2); color: var(--fg); }

/* ── плитки главной ───────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile {
  background: var(--surface); border-radius: var(--radius); padding: 16px; min-height: 134px; text-align: left; border: 0; color: var(--fg);
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.tile:active { background: var(--surface2); }
a.tile, a.tab, a.item { text-decoration: none; }
.tile .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.tile .ic svg { width: 24px; height: 24px; }
.tile h3 { font-size: var(--text-input); font-weight: 700; margin-top: auto; }
.tile p { margin: 0; font-size: var(--text-small); color: var(--muted); }
.tile .badge { position: absolute; top: 16px; right: 16px; }
.today { display: flex; flex-direction: column; gap: 8px; }
.today .item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: var(--text-control); }
.today .item .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.today .item .ic svg { width: 16px; height: 16px; }
.today .item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today .item small { color: var(--muted); flex: none; }

/* ── карточка (детали) ────────────────────────────────── */
.hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px 0 18px; }
.hero .ava { width: 132px; height: 132px; font-size: 44px; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.hero .ava.sq { border-radius: 24px; }
.hero .photo { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; background: var(--surface2); }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .label { width: min(60%, 220px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface2); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.photo-tools { margin-top: 12px; }
.hero .label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero h2 { font-size: var(--text-title); font-weight: 800; margin-top: 6px; line-height: 1.15; letter-spacing: -.02em; }
.hero .role { color: var(--muted); font-size: var(--text-small); }
.hero .big { font-family: var(--display); font-size: var(--text-value); font-weight: 800; letter-spacing: -.02em; }
.hero .price-pending { font: var(--text-small)/1.45 var(--body); color: var(--ink-soft); }
.hero .plate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-body); padding: 4px 10px; border-radius: 6px; background: var(--surface2); letter-spacing: .04em; }
.hero .line { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--text-small); flex-wrap: wrap; justify-content: center; }
.kv { display: flex; flex-direction: column; }
.kv .r { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: var(--text-body); }
.kv .r:first-child { border-top: 0; }
.kv .r .k { color: var(--fg); flex: none; display: inline-flex; align-items: center; gap: 8px; }
.kv .r .k svg { width: 18px; height: 18px; color: var(--muted); }
.kv .r .v { color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv .r.col { flex-direction: column; gap: 3px; }
.kv .r.col .k { font-size: var(--text-label); color: var(--faint); }
.kv .r.col .v { text-align: left; color: var(--fg); font-size: var(--text-body); white-space: pre-wrap; }
.kv .r .v.ok { color: var(--ok); } .kv .r .v.warn { color: var(--warn); } .kv .r .v.bad { color: var(--bad); } .kv .r .v.pink { color: var(--pink); }
.kv .r a.v { color: var(--accent); }
.kv .r .copy { flex: none; border: 0; background: transparent; color: var(--faint); padding: 0 0 0 6px; }
.kv .r .copy svg { width: 16px; height: 16px; }
.kv .r .copy.ok { color: var(--ok); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: auto; background: var(--surface2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; border-radius: 9px; background: transparent; padding: 8px 6px; font-size: var(--text-switch); font-weight: 500; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
@media (max-width: 360px) {
  .chip, .seg button { padding: 8px 3px; font-size: var(--text-label); }
}
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn {
  border: 0; border-radius: 12px; padding: 13px 14px; font-weight: 600; font-size: var(--text-body); display: flex; align-items: center;
  justify-content: center; gap: 8px; background: var(--surface2); color: var(--fg); width: 100%;
}
.btn svg { width: 20px; height: 20px; }
.btn.tint-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.btn.tint-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.btn.tint-purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); }
.btn.tint-blue { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.btn.danger { background: transparent; color: var(--bad); }
.btn:disabled { opacity: .45; }
.note { font-size: var(--text-label); color: var(--muted); text-align: center; margin: 6px 4px 0; }

/* ── дашборд склада ───────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi { background: var(--surface); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi .k { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.kpi .k svg { width: 15px; height: 15px; }
.kpi .v { font-family: var(--display); font-size: var(--text-kpi); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi small { font-size: var(--text-caption); color: var(--warn); }
.bars { background: var(--surface); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.bars h3 { font-size: var(--text-input); font-weight: 700; margin-bottom: 2px; }
.bar { display: grid; grid-template-columns: 120px 1fr 44px; gap: 8px; align-items: center; font-size: var(--text-label); }
.bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .t { height: 10px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.bar .t i { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ── лист (модальная форма) ───────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet-body {
  position: relative; width: 100%; max-width: 720px; max-height: 92%; background: var(--bg); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; overflow: hidden; animation: up .22s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes up { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sheet-body { animation: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sheet-head b { font-family: var(--display); font-size: var(--text-input); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding: 0 8px; }
.link { border: 0; background: transparent; color: var(--accent); font-size: var(--text-body); padding: 4px 2px; flex: none; }
.link.strong { font-weight: 700; }
.link:disabled { color: var(--faint); }
.sheet-form {
  overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.fs-group { display: flex; flex-direction: column; gap: 6px; }
.fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.sheet-form > *, .fs > * { flex-shrink: 0; }   /* длинная форма прокручивается, а не сжимает поля */
.fs-title { font-size: var(--text-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 4px; }
.field { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 46px; border-top: 1px solid var(--line); }
.field:first-child { border-top: 0; }
.field label { flex: none; width: 120px; font-size: var(--text-label); font-weight: 500; }
.field input, .field select, .field textarea {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; font-size: var(--text-input); font-weight: 500; text-align: right;
}
/* Выпадающие списки: без системной рамки и подсветки iOS, значение справа с многоточием и своей стрелкой. */
.field select {
  -webkit-appearance: none; appearance: none; border-radius: 0; outline: none; box-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align-last: right;
  padding-right: 16px; -webkit-tap-highlight-color: transparent;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3' fill='none' stroke='%238a919e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 10px 14px;
}
.field select:focus, .field select:focus-visible { outline: none; box-shadow: none; }
.field label { min-width: 0; }
.field:has(input[type="checkbox"]) label { font-size: var(--text-body); font-weight: 400; }
.field textarea { text-align: left; resize: vertical; min-height: 70px; line-height: 1.4; }
.field.col { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 6px; }
.field.col label { width: auto; padding-top: 10px; font-size: var(--text-label); color: var(--muted); }
.field.col input { text-align: left; padding: 6px 0 8px; }
.field input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin-left: auto; }
.field .stepper { margin-left: auto; display: flex; align-items: center; gap: 0; background: var(--surface2); border-radius: 9px; }
.field .stepper button { border: 0; background: transparent; width: 40px; height: 34px; font-size: 20px; color: var(--accent); }
.field .stepper output { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.field .stars { margin-left: auto; display: flex; gap: 4px; }
.field .stars button { border: 0; background: transparent; font-size: 22px; color: var(--faint); padding: 0 2px; }
.field .stars button[aria-pressed="true"] { color: var(--warn); }
.hint { font-size: var(--text-label); color: var(--muted); margin: 0 4px; }
.confirm { background: var(--surface); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: center; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: var(--text-control); z-index: 50; max-width: 90vw;
}
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox button { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }

@media (min-width: 600px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .sheet { align-items: center; }
  .sheet-body { border-radius: 20px; max-height: 86%; max-width: 560px; }
}

/* ── внешний сайт внутри ───────────────────────────────── */
/* Safari на iOS растягивает iframe под ширину вложенной страницы и обрезает его —
   поэтому обёртка режет лишнее, а рамке задаём «1px + min-width:100%», чтобы она
   занимала ровно ширину экрана и на узком, и на развёрнутом (Duo) экране. */
/* В margin порядок «верх право низ лево»: справа отступ правого выреза, слева — левого (на Duo они разные). */
.embed-wrap { margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); overflow: hidden; -webkit-overflow-scrolling: touch; }
.embed { display: block; width: 1px; min-width: 100%; max-width: 100%; border: 0; background: var(--surface);
  height: calc(100dvh - 52px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.embed-note { padding: 10px 16px 0; }

/* ── экран входа ───────────────────────────────────────── */
.lock { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.lock-box { width: 100%; max-width: 380px; background: var(--surface); border-radius: 18px; padding: 28px 22px; text-align: center; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.lock-mark { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.lock-mark svg { width: 24px; height: 24px; }
.lock-box h1 { font-size: 22px; font-weight: 800; color: var(--ink); }
.lock-box p { margin: 0; color: var(--ink-soft); font-size: var(--text-control); }
.lock-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lock-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: var(--text-input); text-align: center; letter-spacing: normal; font-family: var(--body); }
.lock-btn { background: var(--accent); color: #fff; }
.lock-btn:disabled { opacity: .6; }
.lock-msg { min-height: 20px; font-size: var(--text-small); color: var(--bad); }
.lock-note { font-size: var(--text-label); color: var(--ink-faint); }
.offline { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-size: 12px; padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; text-align: center; }

/* ── фон главной: небо и поле, как на «умном доме» ───────── */
:root {
  --wall-sky: linear-gradient(180deg, #6f9bd0 0%, #a9c4e2 34%, #e4dcc6 52%, #dcb86c 64%, #c58c3c 100%);
  --wall-blob-1: rgba(255,255,255,.55);
  --wall-blob-2: rgba(255,214,130,.55);
  --wall-ray: rgba(255,250,235,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall-sky: linear-gradient(180deg, #1d2a40 0%, #2b3b58 36%, #3a3446 55%, #4a3722 70%, #2a1f14 100%);
    --wall-blob-1: rgba(120,150,210,.28);
    --wall-blob-2: rgba(230,160,70,.22);
    --wall-ray: rgba(255,240,210,.16);
  }
}
:root[data-theme="dark"] {
  --wall-sky: linear-gradient(180deg, #1d2a40 0%, #2b3b58 36%, #3a3446 55%, #4a3722 70%, #2a1f14 100%);
  --wall-blob-1: rgba(120,150,210,.28);
  --wall-blob-2: rgba(230,160,70,.22);
  --wall-ray: rgba(255,240,210,.16);
}
.wallpaper {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--wall-sky);
}
.wallpaper::before, .wallpaper::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); }
.wallpaper::before {   /* свет в небе */
  width: 120vmax; height: 60vmax; left: -20vmax; top: -22vmax; background: radial-gradient(closest-side, var(--wall-blob-1), transparent);
}
.wallpaper::after {    /* тёплый блик над полем */
  width: 90vmax; height: 50vmax; right: -30vmax; bottom: -10vmax; background: radial-gradient(closest-side, var(--wall-blob-2), transparent);
}
.wallpaper i { position: absolute; display: block; }
.wallpaper i.ray {     /* тонкий светящийся луч, как на референсе */
  left: 58%; bottom: -10%; width: 26px; height: 130%; transform: rotate(14deg); transform-origin: bottom;
  background: linear-gradient(180deg, transparent, var(--wall-ray) 60%, transparent); filter: blur(10px);
}
.wallpaper i.grain { inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 3px); opacity: .5; }

/* ── приветствие при входе ─────────────────────────────── */
/* ── приветствие: бумага, чернила, сцена по времени суток и погоде ── */
.splash {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 24px max(24px, env(safe-area-inset-left, 0px)) max(16vh, calc(10vh + env(safe-area-inset-bottom, 0px))); overflow: hidden;
  align-items: flex-end;   /* сцена сверху, слова внизу — не перекрывают друг друга */
  background: var(--paper); color: var(--ink); transition: opacity .18s ease, visibility .18s;
  --sky-top: #efe6d0; --sky-bot: #f1e9d6; --sun: #d9a441; --cloud: rgba(255,252,246,.9); --line: rgba(90,70,40,.35);
}
.splash.p-morning { --sky-top: #f3e2c2; --sky-bot: #f1e9d6; --sun: #e0a94a; }
.splash.p-day     { --sky-top: #e9e4cf; --sky-bot: #f1e9d6; --sun: #d99b2f; }
.splash.p-evening { --sky-top: #e3c7ad; --sky-bot: #f0e4cf; --sun: #c9793b; }
.splash.p-night   { --sky-top: #c9c2b0; --sky-bot: #e4dcc8; --cloud: rgba(240,234,220,.85); --line: rgba(60,48,30,.45); }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash .scene { position: absolute; inset: 0; pointer-events: none; }
.splash .scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top), var(--sky-bot) 62%); }
.splash .scene::after { content: ""; position: absolute; inset: 0; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.splash .scene i { position: absolute; display: block; }
/* линия горизонта — тонкий чернильный штрих */
.splash .horizon { left: 8%; right: 8%; top: 46%; height: 1px; background: var(--line); opacity: 0; animation: spFade 1.2s ease .3s forwards; }
/* солнце: всходит из-за горизонта, лучи медленно вращаются */
.splash .sun { left: 50%; top: 46%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: var(--sun); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 30px -8px var(--sun);
  transform: translateY(70px) scale(.85); opacity: 0; animation: sunRise 2.2s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.splash.p-day .sun { animation-name: sunHigh; }
.splash.p-evening .sun { animation-name: sunSet; }
.splash .sun b { position: absolute; inset: -22px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--sun) 0 4deg, transparent 4deg 22.5deg); opacity: .35;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%);
  animation: spin 40s linear infinite; }
@keyframes sunRise { to { transform: translateY(-40px) scale(1); opacity: 1; } }
@keyframes sunHigh { to { transform: translateY(-100px) scale(1.05); opacity: 1; } }
@keyframes sunSet { from { transform: translateY(-30px); opacity: 1; } to { transform: translateY(22px) scale(.95); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* луна и звёзды */
.splash .moon { left: 58%; top: 18%; width: 72px; height: 72px; border-radius: 50%; background: #f6efdd;
  box-shadow: inset -14px -8px 0 0 var(--sky-top), 0 8px 26px -10px rgba(60,48,30,.5); opacity: 0; transform: translateY(16px);
  animation: spRiseIn 1.6s ease .3s forwards; }
.splash .star { width: 4px; height: 4px; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 6px 1px rgba(255,248,232,.8);
  left: calc(6% + var(--i) * 6.4%); top: calc(8% + (var(--r) * 1 + 1) * 18%); opacity: 0;
  animation: twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .19s); }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
/* облака — мягкие бумажные формы, плывут */
.splash .cloud { width: 150px; height: 46px; border-radius: 30px; background: var(--cloud); box-shadow: 0 1px 0 var(--line) inset, 0 8px 22px -12px rgba(60,48,30,.35);
  top: 30%; left: -160px; opacity: 0; animation: drift 9s linear infinite, spFade 1s ease forwards; }
.splash .cloud::before, .splash .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.splash .cloud::before { width: 54px; height: 54px; left: 26px; top: -26px; }
.splash .cloud::after { width: 72px; height: 72px; left: 62px; top: -38px; }
.splash .cloud.c0 { top: 20%; animation-delay: -2s, 0s; transform: scale(.9); }
.splash .cloud.c1 { top: 33%; animation-delay: -6s, .2s; transform: scale(1.1); }
.splash .cloud.c2 { top: 9%; animation-delay: -4s, .4s; transform: scale(.7); }
@keyframes drift { to { left: calc(100% + 40px); } }
/* дождь — чернильные штрихи */
.splash .drop { width: 2px; height: 16px; border-radius: 2px; background: var(--line); opacity: .8; top: -20px;
  left: calc(var(--i) * 3.85%); animation: fall 1.1s linear infinite; animation-delay: calc(var(--r) * -1.1s); }
@keyframes fall { to { transform: translateY(110vh); } }
/* снег — точки, покачиваются */
.splash .flake { width: 6px; height: 6px; border-radius: 50%; background: #fffdf7; box-shadow: 0 0 0 1px rgba(90,70,40,.15); top: -10px;
  left: calc(var(--i) * 3.6%); animation: snowfall 5.5s linear infinite; animation-delay: calc(var(--r) * -5.5s); }
@keyframes snowfall { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, 55vh); } 100% { transform: translate(-8px, 110vh); } }
/* Туман: одна мягкая дымка без горизонтальных светлых полос. */
.splash .fog { inset: 10% -10% 43%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,252,246,.22), rgba(255,252,246,.08) 42%, transparent 72%);
  animation: fogBreathe 7s ease-in-out infinite alternate; }
@keyframes fogBreathe { from { opacity: .45; } to { opacity: .8; } }
/* гроза — редкая вспышка */
.splash .flash { inset: 0; background: #fff8e8; opacity: 0; animation: flash 3.2s ease-in-out infinite; }
@keyframes flash { 0%, 88%, 100% { opacity: 0; } 90% { opacity: .5; } 93% { opacity: 0; } 95% { opacity: .3; } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spRiseIn { to { opacity: 1; transform: none; } }
/* текст */
.splash-line { position: relative; margin: 0; font-family: var(--display); font-size: clamp(28px, 8vw, 40px); font-weight: 800; text-align: center; letter-spacing: -.02em; text-wrap: balance; color: var(--ink); }
.splash-line .w { display: inline-block; opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px);
  animation: wordIn .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 120ms + 350ms); }
.splash-line .w.name { color: var(--select); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
.splash-line .sub { display: block; margin-top: 12px; font-family: var(--body); font-size: var(--text-body); font-weight: 500; color: var(--ink-soft); opacity: 0; animation: fadeIn .8s ease forwards; animation-delay: 1.1s; }
.splash-line .sub .wx { display: block; margin-top: 6px; font-size: var(--text-section); color: var(--ink); }
.splash-line .sub .temp { font-family: var(--display); font-weight: 800; font-size: 22px; }
@keyframes fadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash-line .w, .splash-line .sub { animation: none; opacity: 1; transform: none; filter: none; } .splash .scene i { animation: none !important; opacity: 1; transform: none; } }

/* строка приветствия на главной */
.greet { margin: 4px 4px 14px; font-family: var(--display); font-size: var(--text-title); font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.greet small { display: block; margin-top: 2px; font-family: var(--body); font-size: var(--text-control); font-weight: 500; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.2); }
:root[data-dark] .greet { color: var(--fg); text-shadow: none; }

/* ── главная: прозрачные шапка и панель, тёмное стекло для блоков ── */
body.home-wall, body.home-wall #app { background: transparent; }
body.home-wall .topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
body.home-wall .title { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
body.home-wall .iconbtn { background: rgba(20,24,34,.38); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
body.home-wall .tabbar { background: rgba(16,20,30,.42); border-top: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
body.home-wall .tab { color: rgba(255,255,255,.6); }
body.home-wall .tab[aria-current="page"] { color: #fff; }
body.home-wall .tile, body.home-wall .card {
  background: rgba(22,26,36,.5); color: #fff; border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
body.home-wall .tile:active, body.home-wall .row:active { background: rgba(255,255,255,.12); }
body.home-wall .tile h3 { color: #fff;  }
body.home-wall .tile p, body.home-wall .row .meta, body.home-wall .section-title { color: rgba(255,255,255,.72); }

body.home-wall .row { color: #fff; border-top-color: rgba(255,255,255,.12); }
body.home-wall .row .name { color: #fff; }
body.home-wall .row .warn { color: #ff9b8f; }
body.home-wall .row .chev { color: rgba(255,255,255,.5); }
body.home-wall .badge { background: rgba(255,80,70,.9); }
body.home-wall .card.today .row { background: transparent; }
body.home-wall .note { color: rgba(255,255,255,.7); }
body.home-wall .greet { color: #fff; }
body.home-wall .greet small { color: rgba(255,255,255,.8); }
html:has(body.home-wall) { background: #8db0d8; }

/* ── стеклянная тема на всех экранах (обои, тёмные блоки) ─── */
body.home-wall .chip, body.home-wall .search input, body.home-wall .seg, body.home-wall .kpi, body.home-wall .bars,
body.home-wall .kv .r, body.home-wall .card, body.home-wall .fs, body.home-wall .confirm, body.home-wall .empty,
body.home-wall .sheet-body, body.home-wall .sheet-head, body.home-wall .field {
  color: #fff;
}
body.home-wall .chips { background: rgba(22,26,36,.5); border: 1px solid rgba(255,255,255,.12); }
body.home-wall .chip[aria-pressed="true"] { background: var(--accent); }
body.home-wall .search input { background: rgba(22,26,36,.5); color: #fff; border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.home-wall .search input::placeholder { color: rgba(255,255,255,.5); }
body.home-wall .search svg { color: rgba(255,255,255,.6); z-index: 1; }
body.home-wall .row .aside b { color: #fff; }
body.home-wall .row .aside small { color: rgba(255,255,255,.6); }
body.home-wall .seg { background: rgba(22,26,36,.5); border: 1px solid rgba(255,255,255,.12); }
body.home-wall .seg button { color: rgba(255,255,255,.7); }
body.home-wall .seg button[aria-pressed="true"] { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
body.home-wall .kpi, body.home-wall .bars { background: rgba(22,26,36,.5); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
body.home-wall .bar .l, body.home-wall .bar .n { color: rgba(255,255,255,.85); }
body.home-wall .bar .t { background: rgba(255,255,255,.14); }
body.home-wall .kpi small { color: #ffb36b; }
body.home-wall .card, body.home-wall .kv .r, body.home-wall .row { border-color: rgba(255,255,255,.12); }
/* Закреплённая шапка карточки: фото и имя стоят, пока список под ними листается. */
.hero.pin { position: sticky; top: 0; z-index: 19;   /* под прозрачной верхней панелью, поэтому с отступом под неё */
  margin: calc(-8px - 52px - env(safe-area-inset-top, 0px)) calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: calc(52px + env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.home-wall .hero.pin { background: transparent; box-shadow: none;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
body.home-wall .btn { background: rgba(22,26,36,.5); color: #fff; border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.home-wall .btn.danger { color: #ff8a80; }
body.home-wall .empty { color: rgba(255,255,255,.7); }
body.home-wall .empty h3 { color: #fff; }
body.home-wall .tag { background: rgba(255,255,255,.14); color: #fff; }
body.home-wall .pill { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
body.home-wall .hero .plate { background: rgba(255,255,255,.14); color: #fff; }
body.home-wall .hero .line, body.home-wall .hero .role, body.home-wall .hero .big { color: #fff; }
body.home-wall .hero .role, body.home-wall .hero .line { color: rgba(255,255,255,.75); }
body.home-wall .ava { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
body.home-wall .ava.ring { box-shadow: none; border-color: #6fb3ff; color: #fff; }
.ava.ring.off { border-color: var(--gray); color: var(--gray); opacity: .7; }
body.home-wall .thumb { background: rgba(255,255,255,.12); }
body.home-wall .toast { background: rgba(20,24,34,.9); color: #fff; }
body.home-wall .offline { background: rgba(255,170,80,.18); color: #ffd49a; }
body.home-wall .link { color: #9fc0ff; }
body.home-wall .sheet .scrim { background: rgba(5,8,14,.5); }
body.home-wall .sheet-body { background: rgba(18,22,32,.82); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
body.home-wall .sheet-head { background: transparent; border-bottom: 1px solid rgba(255,255,255,.1); }
body.home-wall .sheet-head b { color: #fff; }
body.home-wall .fs { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
body.home-wall .fs-title { color: rgba(255,255,255,.6); }
body.home-wall .field { border-top-color: rgba(255,255,255,.1); }
body.home-wall .field label { color: rgba(255,255,255,.9); }
body.home-wall .field.col label { color: rgba(255,255,255,.6); }
body.home-wall .field input, body.home-wall .field select, body.home-wall .field textarea { color: #fff; color-scheme: dark; }
body.home-wall .field input::placeholder, body.home-wall .field textarea::placeholder { color: rgba(255,255,255,.4); }
body.home-wall .field .stepper { background: rgba(255,255,255,.12); }
body.home-wall .field .stepper button { color: #9fc0ff; }
body.home-wall .field .stars button { color: rgba(255,255,255,.3); }
body.home-wall .field .stars button[aria-pressed="true"] { color: #ffc35c; }
body.home-wall .confirm { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
body.home-wall .hint, body.home-wall .note { color: rgba(255,255,255,.6); }
body.home-wall .sub { color: rgba(255,255,255,.7); }
body.home-wall .h-big, body.home-wall h1, body.home-wall h2, body.home-wall h3 { color: #fff; }
body.home-wall .section-title .n { color: rgba(255,255,255,.6); }
body.home-wall .title { color: #fff; }
body.home-wall .tab { color: rgba(255,255,255,.6); }
body.home-wall .tab[aria-current="page"] { color: #fff; }

/* ── как в оригинале «Дом»: крупные стеклянные плитки, плавающая панель ── */
body.home-wall .greet { font-size: var(--text-value); margin: 2px 4px 18px; }
body.home-wall .tiles { gap: 12px; }
body.home-wall .tile {
  border-radius: 28px; padding: 16px 16px 18px; min-height: 150px; gap: 0;
  background: rgba(40,46,60,.52); border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
body.home-wall .tile .ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--c); }
body.home-wall .tile .ic svg { width: 21px; height: 21px; }
body.home-wall .tile h3 {   margin-top: auto; padding-top: 22px; }
body.home-wall .tile p { font-size: var(--text-small); color: rgba(255,255,255,.62); margin-top: 3px; }
body.home-wall .tile .badge { top: 18px; right: 18px; background: rgba(255,90,80,.95); }
body.home-wall .today { gap: 0; }
body.home-wall .today .item { border-radius: 0; background: transparent; }
body.home-wall .today .item .ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--c); }
body.home-wall .card.today { border-radius: 26px; }
/* плавающая стеклянная панель навигации */
body.home-wall .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: rgba(24,28,38,.5);
  box-shadow: 0 12px 30px rgba(0,0,0,.25); }
body.home-wall .tabbar-in { height: 62px; }
body.home-wall .tab { position: relative;  color: rgba(255,255,255,.6); }
body.home-wall .tab[aria-current="page"] { color: #fff; }
body.home-wall .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 7px 8px; border-radius: 22px; background: rgba(255,255,255,.14); z-index: -1; }
body.home-wall .tab { z-index: 0; }
/* заголовок экрана крупнее, как «Работа» */
body.home-wall .topbar-in { min-height: 60px; }

body.home-wall .section-title {   color: #fff;   margin: 22px 6px 10px; }
body.home-wall .view { padding-bottom: calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom, 0px)); }
body.home-wall .tile .ic, body.home-wall .today .item .ic { filter: brightness(1.6) saturate(1.3); }
body.home-wall .tile .ic { background: rgba(255,255,255,.16); }

/* ── панель навигации: компактная, по центру, у нижнего края ── */
body.home-wall .tabbar { left: 50%; right: auto; transform: translateX(-50%);
  width: min(calc(100% - 48px), 330px); bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 0; border-radius: 30px; }
body.home-wall .tabbar-in { height: 58px; max-width: none; }
body.home-wall .tab {  gap: 2px; }
body.home-wall .tab svg { width: 22px; height: 22px; }
body.home-wall .view { padding-bottom: calc(var(--tabbar-h) - 18px + 36px + env(safe-area-inset-bottom, 0px)); }

/* ── заголовок: крупный слева, при прокрутке плавно в центр; шапка размыта ── */
.topbar-in { position: relative; min-height: 60px; }
.title { position: absolute; left: 16px; right: 110px; top: 50%; transform: translateY(-50%); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: left .42s cubic-bezier(.2,.7,.2,1), right .42s cubic-bezier(.2,.7,.2,1), font-size .42s cubic-bezier(.2,.7,.2,1), text-align .42s, opacity .3s; }
.topbar.scrolled .title { left: 64px; right: 64px; text-align: center; font-size: var(--text-section); font-weight: 700; }
#back[hidden] ~ .title { left: 16px; }
#back:not([hidden]) ~ .title { left: 62px; }   /* не прятать заголовок под кнопкой «назад» */
/* правило с #back сильнее классов — повторяем центровку для экранов без кнопки «назад» */
.topbar.scrolled #back[hidden] ~ .title { left: 64px; right: 64px; }
.topbar.scrolled:has(.pillbtn) #back[hidden] ~ .title { left: 150px; right: 150px; }
.topbar { transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease; }
.topbar .actions { position: relative; z-index: 1; margin-left: auto; }
.topbar .iconbtn { position: relative; z-index: 1; }
#back { position: relative; z-index: 1; }
body.home-wall .topbar.scrolled { background: rgba(26,31,44,.42); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08); }
body.home-wall .topbar.scrolled .title { color: #fff; text-shadow: none; }
body.home-wall .topbar.scrolled .iconbtn { background: rgba(255,255,255,.12); }
/* иконки плиток и списков — светлые */
body.home-wall .tile .ic, body.home-wall .today .item .ic { color: #fff; filter: none; background: rgba(255,255,255,.18); }

/* панель ниже: отступ от низа — лишь часть зоны «домашней полоски» */
body.home-wall .tabbar { bottom: calc(env(safe-area-inset-bottom, 0px) * .4 + 2px); }

/* ── кнопка «кто вошёл» с именем ───────────────────────── */
.iconbtn.pillbtn { width: auto; padding: 0 14px 0 11px; border-radius: 19px; gap: 7px; font-size: var(--text-control); font-weight: 600; white-space: nowrap; }
.iconbtn.pillbtn svg { width: 18px; height: 18px; }
.topbar:has(.pillbtn) .title { right: 170px; }
.topbar.scrolled:has(.pillbtn) .title { left: 150px; right: 150px; }

/* ── панель шире, подсветка активной вкладки вмещает подпись ── */
body.home-wall .tabbar { width: min(calc(100% - 20px), 400px); }
body.home-wall .tab[aria-current="page"]::before { inset: 5px 2px; border-radius: 24px; }

/* ── шапка при прокрутке: размытие цветом неба, плавный нижний край ── */
body.home-wall .topbar.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.home-wall .topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(116,157,210,.9) 0%, rgba(132,170,217,.72) 60%, rgba(150,184,224,0) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent);
  opacity: 0; transition: opacity .4s ease;
}
body.home-wall .topbar.scrolled::before { opacity: 1; }
body.home-wall .topbar.scrolled .iconbtn { background: rgba(255,255,255,.22); }

/* ── обои: бумага цвета слоновой кости (23.10.2026) ─────────────────────
   Плитки, панели и карточки остаются тёмным стеклом; всё, что лежит прямо
   на бумаге (заголовки, шапка карточки, подсказки), — тёмными «чернилами». */
:root { --paper: #f1e9d6; --ink: #2b241c; --ink-soft: rgba(43,36,28,.62); --ink-faint: rgba(43,36,28,.42); }
html:has(body.home-wall) { background: var(--paper); }
.wallpaper { background: var(--paper); }
.wallpaper::before { background: radial-gradient(closest-side, rgba(255,255,255,.75), transparent); }        /* светлое пятно, как засвет листа */
.wallpaper::after  { background: radial-gradient(closest-side, rgba(214,186,130,.45), transparent); }        /* тёплое затемнение к краю */
.wallpaper i.ray { display: none; }
.wallpaper i.grain {   /* волокна бумаги: мелкий шум + редкие горизонтальные прожилки */
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body.home-wall .title, body.home-wall .topbar.scrolled .title { color: var(--ink); text-shadow: none; }
body.home-wall .section-title { color: var(--ink); }
body.home-wall .section-title .n { color: var(--ink-faint); }
body.home-wall .hint, body.home-wall .note { color: var(--ink-soft); }
body.home-wall .empty { color: var(--ink-soft); }
body.home-wall .empty h3 { color: var(--ink); }
body.home-wall .hero h2, body.home-wall .hero .big, body.home-wall .hero .line { color: var(--ink); }
body.home-wall .hero .role, body.home-wall .hero .line { color: var(--ink-soft); }
body.home-wall .hero .pill, body.home-wall .hero .plate { background: rgba(43,36,28,.08); color: var(--ink); }
body.home-wall .hero .pill.ok { color: var(--ok); } body.home-wall .hero .pill.bad { color: var(--bad); } body.home-wall .hero .pill.blue { color: var(--blue); }
body.home-wall .hero .ava.ring { color: var(--ink); border-color: var(--blue); }
body.home-wall .ava.ring.off { color: var(--ink-faint); }
body.home-wall .topbar::before { background: linear-gradient(180deg, rgba(241,233,214,.96) 0%, rgba(241,233,214,.8) 60%, rgba(241,233,214,0) 100%); }
body.home-wall .topbar.scrolled .iconbtn { background: rgba(43,36,28,.1); color: var(--ink); }
body.home-wall .iconbtn.pillbtn .pilltext { color: inherit; }

/* ── блоки под бумагу: кремовый картон, сепия, чернильные акценты (23.10.2026) ──
   Идея — канцелярия: карточки как плотный картон на листе, разделы помечены
   «сургучными» печатями своего цвета, панель навигации — тёмный корешок. */
body.home-wall {
  --indigo: #4a5a9c; --orange: #b8622f; --purple: #7d2f4e; --blue: #3f6e8c; --ok: #3f7d4e; --bad: #a93a2a; --warn: #b7772a; --accent: #2f4d8f; --pink: #b04a6e;
  --card: rgba(252,248,238,.82); --card-2: rgba(255,252,246,.95); --sepia: rgba(90,70,40,.18); --sepia-2: rgba(90,70,40,.3);
  --card-shadow: 0 10px 26px -12px rgba(70,50,20,.28), 0 1px 0 rgba(255,255,255,.7) inset;
}
/* плитки и карточки — картон */
body.home-wall .tile, body.home-wall .card, body.home-wall .kpi, body.home-wall .bars, body.home-wall .fs, body.home-wall .confirm {
  background: var(--card); color: var(--ink); border: 1px solid var(--sepia);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--card-shadow);
}
body.home-wall .tile { box-shadow: var(--card-shadow); }
body.home-wall .tile:active, body.home-wall .row:active { background: rgba(90,70,40,.07); }
body.home-wall .tile h3, body.home-wall h1, body.home-wall h2, body.home-wall h3, body.home-wall .h-big { color: var(--ink); }
body.home-wall .tile p, body.home-wall .row .meta, body.home-wall .sub { color: var(--ink-soft); }
/* печать раздела: круг своего цвета, светлый знак */
body.home-wall .tile .ic, body.home-wall .today .item .ic { background: var(--c); color: #fbf6ea; filter: none;
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 0 2px rgba(255,255,255,.35); }
body.home-wall .tile .badge, body.home-wall .badge { background: var(--bad); color: #fbf6ea; box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); }
/* списки */
body.home-wall .row { color: var(--ink); border-top-color: var(--sepia); }
body.home-wall .card, body.home-wall .kv .r { border-color: var(--sepia); }
body.home-wall .row .name { color: var(--ink); }
body.home-wall .row .warn { color: var(--bad); }
body.home-wall .row .chev { color: var(--ink-faint); }
body.home-wall .row .aside b { color: var(--ink); }
body.home-wall .row .aside small { color: var(--ink-faint); }
body.home-wall .ava { box-shadow: 0 4px 12px -4px rgba(70,50,20,.4); }
body.home-wall .ava.ring { color: var(--ink); border-color: var(--sepia-2); background: rgba(255,255,255,.35); }
body.home-wall .hero .ava.ring { border-color: var(--blue); }
body.home-wall .thumb { background: rgba(90,70,40,.08); }
body.home-wall .card.today .row { background: transparent; }
/* ключ–значение */
body.home-wall .link { color: var(--accent); }
/* фильтры, поиск, переключатели, кнопки */
body.home-wall .chips, body.home-wall .search input, body.home-wall .seg, body.home-wall .btn {
  background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
body.home-wall .chip { color: var(--ink-soft); }
body.home-wall .chip[aria-pressed="true"] { background: var(--ink); color: #fbf6ea; }
body.home-wall .search input::placeholder { color: var(--ink-faint); }
body.home-wall .search svg { color: var(--ink-faint); }
body.home-wall .seg button { color: var(--ink-soft); }
body.home-wall .seg button[aria-pressed="true"] { background: var(--ink); color: #fbf6ea; }
body.home-wall .btn.danger { color: var(--bad); }
body.home-wall .btn.tint-ok { color: var(--ok); } body.home-wall .btn.tint-warn { color: var(--warn); } body.home-wall .btn.tint-blue { color: var(--blue); }
body.home-wall .tag, body.home-wall .pill { background: rgba(90,70,40,.09); color: var(--ink); }
body.home-wall .pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
body.home-wall .pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
body.home-wall .pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
body.home-wall .pill.blue { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
body.home-wall .hero .plate { background: rgba(90,70,40,.09); color: var(--ink); }
body.home-wall .bar .l, body.home-wall .bar .n { color: var(--ink); }
body.home-wall .bar .t { background: rgba(90,70,40,.12); }
body.home-wall .kpi small { color: var(--orange); }
body.home-wall .empty { color: var(--ink-soft); }
body.home-wall .offline { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
/* шапка и кнопки в ней */
body.home-wall .iconbtn { background: var(--card-2); color: var(--ink); border: 1px solid var(--sepia); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home-wall .topbar.scrolled .iconbtn { background: var(--card-2); color: var(--ink); }
/* панель навигации — тот же картон, активная вкладка как чернильная печать */
body.home-wall .tabbar { background: rgba(252,248,238,.9); border: 1px solid var(--sepia); box-shadow: var(--card-shadow), 0 14px 30px -12px rgba(70,50,20,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.home-wall .tab { color: var(--ink-soft); }
body.home-wall .tab[aria-current="page"] { color: #fbf6ea; }
body.home-wall .tab[aria-current="page"]::before { background: var(--ink); }
/* листы (формы) — лист кремовой бумаги */
body.home-wall .sheet .scrim { background: rgba(40,30,18,.45); }
body.home-wall .sheet-body { background: #f7f1e3; color: var(--ink); border: 1px solid var(--sepia); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home-wall .sheet-head { background: transparent; border-bottom: 1px solid var(--sepia); }
body.home-wall .sheet-head b, body.home-wall .confirm, body.home-wall .field, body.home-wall .fs { color: var(--ink); }
body.home-wall .fs { background: var(--card-2); border: 1px solid var(--sepia); box-shadow: none; }
body.home-wall .fs-title { color: var(--ink-faint); }
body.home-wall .field { border-top-color: var(--sepia); }
body.home-wall .field label { color: var(--ink-faint); }
body.home-wall .field:has(input[type="checkbox"]) label { color: var(--ink); }
body.home-wall .field.col label { color: var(--ink-faint); }
body.home-wall .field input, body.home-wall .field select, body.home-wall .field textarea { color: var(--ink); color-scheme: light; }
body.home-wall .field input::placeholder, body.home-wall .field textarea::placeholder { color: var(--ink-faint); }
body.home-wall .field .stepper { background: rgba(90,70,40,.09); }
body.home-wall .field .stepper button { color: var(--accent); }
body.home-wall .field .stars button { color: rgba(90,70,40,.25); }
body.home-wall .field .stars button[aria-pressed="true"] { color: var(--warn); }
body.home-wall .confirm { background: var(--card-2); border: 1px solid var(--sepia); }
body.home-wall .toast { background: rgba(52,40,28,.95); color: #fbf6ea; }

/* ── вход, выделение и панель — согласованы с бумагой (23.10.2026) ── */
/* выделение: тёплая сепия вместо чёрных чернил */
body.home-wall { --select: #8a5a34; --select-fg: #fbf6ea; }
body.home-wall .chip[aria-pressed="true"] { background: var(--select); color: var(--select-fg); }
body.home-wall .seg button[aria-pressed="true"] { background: var(--select); color: var(--select-fg); }
body.home-wall .tab[aria-current="page"] { color: var(--select); }
body.home-wall .tab[aria-current="page"]::before { background: color-mix(in srgb, var(--select) 14%, transparent); }
body.home-wall .tab[aria-current="page"] svg { color: var(--select); }
/* панель навигации — блок, как плитки: прямые поля, тот же радиус */
/* ширина панели = ширине блоков страницы: те же боковые поля 16px и тот же предел 720px */
body.home-wall .tabbar { left: 50%; right: auto; transform: translateX(-50%); border-radius: 22px;
  width: min(calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))), 688px);
  bottom: calc(env(safe-area-inset-bottom, 0px) * .4 + 8px); }
body.home-wall .tabbar-in { height: 60px; }
body.home-wall .tab[aria-current="page"]::before { inset: 6px 4px; border-radius: 16px; }
/* экран входа — тот же лист бумаги и картон */
.lock { background: var(--paper); position: relative; transition: background-color 2s ease; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
.lock::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lock-box { position: relative; background: var(--card, rgba(252,248,238,.9)); border: 1px solid rgba(90,70,40,.18); border-radius: 22px; color: var(--ink);
  box-shadow: 0 10px 26px -12px rgba(70,50,20,.28), 0 1px 0 rgba(255,255,255,.7) inset; }
.lock-box h1 { color: var(--ink); }
.lock-box p { color: var(--ink-soft); }
.lock-mark { background: var(--select, #8a5a34); color: #fbf6ea; box-shadow: 0 3px 8px -2px rgba(138,90,52,.6), inset 0 0 0 2px rgba(255,255,255,.35); }
.lock-form input { background: rgba(255,252,246,.95); border: 1px solid rgba(90,70,40,.18); color: var(--ink); font-size: var(--text-input); font-family: var(--body); letter-spacing: normal; }
.lock-form input::placeholder { color: var(--ink-faint); }
.lock-btn, body.home-wall .lock-btn { background: var(--select, #8a5a34); color: #fbf6ea; border: 0; }
.lock-msg { color: var(--bad); }
.lock-note { color: var(--ink-faint); }
html:has(#lock:not([hidden])) { background: var(--paper); }

/* ── смены: календарь ─────────────────────────────────── */
.sh-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.sh-head h2 { font-size: var(--text-section); font-weight: 700; color: var(--ink); }
.sh-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 10px 8px 8px; }
.sh-w { text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-soft); padding-bottom: 4px; }
.sh-day { border: 0; background: transparent; border-radius: 12px; padding: 5px 2px 6px; min-height: 46px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink); }
.sh-day b { font-size: var(--text-input); font-weight: 500; line-height: 1; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.sh-day.is-today b { box-shadow: inset 0 0 0 1.5px var(--select); }
.sh-day.sel b { background: var(--select); color: var(--select-fg); box-shadow: none; }
.sh-day.mine { background: color-mix(in srgb, var(--select) 9%, transparent); }
.sh-day:active { background: rgba(90,70,40,.08); }
.sh-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 34px; min-height: 7px; }
.sh-pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 1.5px var(--p) inset; flex: none; }
.sh-pip.night { background: transparent; }
.sh-pip.half { background: linear-gradient(90deg, var(--p) 50%, transparent 50%); }
.sh-pip.lg { width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--p) inset; margin-right: 2px; }
.sh-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sh-person { border: 1px solid var(--sepia); background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 5px 11px 5px 8px; font-size: var(--text-switch); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.sh-person i { width: 10px; height: 10px; border-radius: 50%; background: var(--p); }
.sh-person.on { background: var(--p); border-color: var(--p); color: #fbf6ea; font-weight: 600; }
.sh-person.on i { background: #fbf6ea; }
.sh-pick { display: flex; gap: 6px; margin: 0 0 10px; }
.sh-person .n { color: inherit; font-weight: inherit; }
.sh-person svg { width: 16px; height: 16px; }

/* ── освещение по времени суток (24.10.2026): меняем только бумагу, картон и акцент ── */
body.home-wall, .wallpaper, body.home-wall .tile, body.home-wall .card, body.home-wall .tabbar, body.home-wall .btn, body.home-wall .iconbtn { transition: border-color .2s ease; }
.wallpaper::before, .wallpaper::after { transition: opacity 2s ease; }
body.light-morning { --paper: #f3eee0; --select: #8a7a3a; --card: rgba(253,251,244,.84); --card-2: rgba(255,254,249,.96); }
body.light-evening { --paper: #efe2cc; --select: #a4522c; --card: rgba(252,245,232,.84); --card-2: rgba(255,250,240,.96); }
body.light-night   { --paper: #c3b69b; --select: #5a3d22; --ink: #261f17; --ink-soft: rgba(38,31,23,.7); --ink-faint: rgba(38,31,23,.5);
  --card: rgba(228,219,198,.88); --card-2: rgba(238,230,212,.97); --sepia: rgba(60,44,24,.24); --sepia-2: rgba(60,44,24,.38); }
body.home-wall.light-morning .wallpaper::after { opacity: .5; }
body.home-wall.light-evening .wallpaper::after { opacity: 1.3; }
body.home-wall.light-night .wallpaper::before { opacity: .4; }
body.home-wall.light-night .wallpaper::after { opacity: .9; }
html:has(body.light-morning) { background: #f3eee0; }
html:has(body.light-evening) { background: #efe2cc; }
html:has(body.light-night) { background: #c3b69b; }
body.home-wall.light-night .tabbar { background: rgba(232,223,203,.94); }
body.home-wall.light-night .topbar::before { background: linear-gradient(180deg, rgba(195,182,155,.96) 0%, rgba(195,182,155,.8) 60%, rgba(195,182,155,0) 100%); }
body.home-wall.light-night .wallpaper::before { opacity: .25; }
body.home-wall.light-night .wallpaper::after { opacity: 1.2; }
/* синий кружок — у кого день рождения в ближайшие 5 дней */
.ava.ring.bday { border-color: var(--blue); color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
body.home-wall .ava.ring.bday { border-color: var(--blue); color: var(--blue); }
body.home-wall.light-evening .topbar::before { background: linear-gradient(180deg, rgba(239,226,204,.96) 0%, rgba(239,226,204,.8) 60%, rgba(239,226,204,0) 100%); }
body.home-wall.light-morning .topbar::before { background: linear-gradient(180deg, rgba(243,238,224,.96) 0%, rgba(243,238,224,.8) 60%, rgba(243,238,224,0) 100%); }
.tile .note-line { font-size: var(--text-label); color: var(--blue); margin-top: 4px; font-weight: 600; }
/* фото с прозрачным фоном (PNG) — без подложки и обрезки, персонаж стоит прямо на бумаге */
.hero .ava:has(img) { background: transparent; box-shadow: none; }
.hero .ava img[src*=".png"] { object-fit: contain; object-position: 50% 50%; }
.ava:has(img[src*=".png"]) { background: transparent; }
/* пока заставка видна, фон страницы (он же — полоски у краёв на iOS) совпадает с её небом;
   сама заставка не короче самого большого экрана, какой iOS может сообщить */
.splash { min-height: 100lvh; }
/* цвета — как низ заставки вместе с зерном бумаги (замерено по скриншоту), чтобы край не отличался */
html:has(.splash:not([hidden])), html:has(.splash:not([hidden])) body { background: #e9e1ce; }
html:has(.splash:not([hidden]).p-morning), html:has(.splash:not([hidden]).p-morning) body { background: #e9e1ce; }
html:has(.splash:not([hidden]).p-evening), html:has(.splash:not([hidden]).p-evening) body { background: #e8dcc7; }
html:has(.splash:not([hidden]).p-night), html:has(.splash:not([hidden]).p-night) body { background: #dad3c1; }
body.splashing #app { visibility: hidden; }
/* Не создаём fixed-слой панели в промежуточном viewport заставки. */
body.splashing .tabbar { display: none; }
html:has(.splash:not([hidden]).out), html:has(.splash:not([hidden]).out) body { background: var(--paper); }

/* ── Винотека (карта FLAVORBUILD) ─────────────────────── */
.vn-view { margin-bottom: 12px; }
.vn-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: var(--text-label); color: var(--muted); margin: 2px 0 4px; }
.vn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vn-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gray); }
.vn-dot.ready { background: var(--ok); } .vn-dot.open { background: var(--blue); } .vn-dot.hold { background: var(--purple); }
.vn-dot.caution { background: var(--warn); } .vn-dot.spirit { background: var(--pink); border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }
.pill.purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); }
.pill.vn-spirit { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); }
.vn-reset { margin-left: auto; font-size: var(--text-label); text-transform: none; letter-spacing: 0; color: var(--accent); background: none; border: 0; padding: 0; }
.vn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
.vn-tile { position: relative; background: var(--surface); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.vn-ph { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 5; border: 0; padding: 0; background: var(--surface2); overflow: hidden; }
.vn-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-wait { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); }
.vn-wait svg { width: 22px; height: 22px; }
.vn-wait small { font-size: var(--text-caption); }
.vn-body { flex: 1; border: 0; background: none; text-align: left; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
.vn-num { font-size: var(--text-caption); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.vn-name { font-family: var(--body); font-weight: 500; font-size: var(--text-body); line-height: 1.3; overflow-wrap: anywhere; }
.vn-place { font-size: var(--text-label); color: var(--muted); margin-bottom: 1px; }
.vn-price { margin-top: auto; padding-top: 2px; font-family: var(--display); font-weight: 700; font-size: var(--text-control); font-variant-numeric: tabular-nums; }
.vn-price.none { font-family: var(--body); font-weight: 400; font-size: var(--text-label); color: var(--muted); }
.vn-sig { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.vn-more { width: 100%; margin-top: 14px; }
.vn-no { flex: none; width: 34px; font-size: var(--text-caption); color: var(--ink-faint); font-variant-numeric: tabular-nums; align-self: flex-start; padding-top: 2px; }
.vn-mline { display: inline-flex !important; align-items: center; gap: 6px; }
.vn-changes { margin: 0 0 12px; font-size: var(--text-small); }
.vn-changes summary { padding: 12px 14px; cursor: pointer; }
.vn-chlist { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.vn-hero .vn-label { width: min(64%, 260px); aspect-ratio: 3 / 4; max-width: 100%; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--surface2); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.vn-hero .vn-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-hero h2 { max-width: 30ch; }
.vn-origin { font-size: var(--text-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.vn-facts { justify-content: center; }
.vn-mband { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-left: 4px solid var(--gray); font-size: var(--text-body); }
.vn-mband.ready { border-left-color: var(--ok); } .vn-mband.open { border-left-color: var(--blue); }
.vn-mband.hold { border-left-color: var(--purple); } .vn-mband.caution { border-left-color: var(--warn); }
@media (min-width: 720px) { .vn-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; } }
.vn-tile .pill { font-size: var(--text-caption); padding: 1px 7px; }
/* Вид «Список»: строка с маленькой этикеткой слева. */
.vn-lrow { align-items: center; }
.vn-thumb { flex: none; width: 40px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--surface2); display: grid; place-items: center; color: var(--faint); }
.vn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-thumb svg { width: 18px; height: 18px; }
/* интерфейс вписан в экран: без щипка и двойного тапа для масштаба; поля ввода не меньше 16px,
   иначе iOS сама увеличивает страницу при фокусе */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
button, a, .row, .tile, .tab, .chip { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1em); }
/* отпуск в календаре смен — штриховка клетки */
.sh-day.away { background-image: repeating-linear-gradient(135deg, rgba(90,70,40,.08) 0 3px, transparent 3px 8px); }

/* ── карточка контакта в один экран (28.10.2026): шапка, одна карточка «Связь», анкета строками на бумаге ── */
.hero.compact { padding: 4px 0 2px; gap: 4px; }
.hero.compact .ava { width: 84px; height: 84px; font-size: 28px; margin-bottom: 6px; }
.hero.compact h2 { font-size: var(--text-title); margin-top: 0; }
.hero.compact .pill { margin-top: 4px; }
.kv.contact { margin-top: 14px; }
.kv.contact .r { align-items: center; gap: 12px; justify-content: flex-start; }
.kv.contact .r > svg { width: 20px; height: 20px; flex: none; color: var(--ink-faint); }
.kv.contact .r .k { width: 88px; flex: none; font-size: var(--text-label); color: var(--ink-faint); }
.kv.contact .r .v { flex: 1; text-align: left; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
body.home-wall .kv.contact .r a.v, body.home-wall .kv.contact .r .v { color: var(--ink); }
.kv.contact .r .copy { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: -6px; }
.dossier { display: flex; flex-direction: column; margin: 18px 4px 0; }
.dossier .d { display: flex; gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--sepia); background: transparent; align-items: baseline; width: 100%; text-align: left; color: var(--ink); font: inherit; }
.dossier .d:first-child { border-top: 0; padding-top: 0; }
.dossier .d .k { width: 108px; flex: none; font-size: var(--text-label); color: var(--ink-faint); }
.dossier .d .v { flex: 1; min-width: 0; font-size: var(--text-body); line-height: 1.45; overflow-wrap: anywhere; }
.dossier .d .v small { font-size: var(--text-small); color: var(--ink-soft); }
.dossier .d .v .soon { color: var(--blue); font-weight: 600; }
.dossier .d .v .on { color: var(--ok); font-weight: 600; }
.dossier .d .v.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dossier .d .chev { width: 16px; height: 16px; color: var(--ink-faint); align-self: center; flex: none; }
.rings { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.rings i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sepia-2); background: var(--card-2); margin-left: -7px; font-style: normal; font-size: 9px; font-weight: 700; font-family: var(--display); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.rings i:first-child { margin-left: 0; }
/* короткая страница: обои и оболочка не короче экрана, иначе на iPhone под панелью видна полоса фона */
#app { min-height: 100dvh; }
/* Запас fixed-слоя нужен при изменении viewport после звонка или поворота.
   У нижней safe area текстура и блики плавно сходят к цвету html: iOS
   может рисовать край окна только этим цветом, без fixed-слоёв. */
.wallpaper {
  --wallpaper-bottom-bleed: 40vh;
  top: -20vh; bottom: calc(-1 * var(--wallpaper-bottom-bleed)); height: auto;
  --paper-edge-mask: linear-gradient(to bottom,
    #000 calc(100% - var(--wallpaper-bottom-bleed) - env(safe-area-inset-bottom, 0px) - 96px),
    transparent calc(100% - var(--wallpaper-bottom-bleed) - env(safe-area-inset-bottom, 0px) - 8px));
  -webkit-mask-image: var(--paper-edge-mask);
  mask-image: var(--paper-edge-mask);
}
.wallpaper::after { bottom: 40vh; }   /* блик остаётся у нижнего края видимой части */
/* Документ остаётся прокручиваемым: iOS должен восстановить viewport после клавиатуры. */

/* Сегодня: ежедневная сводка в существующей бумажной теме. */
.today-page { padding-bottom: 12px; }
.today-intro { padding: 8px 6px 6px; }
.today-intro p { margin: 0 0 8px; color: var(--ink-soft); font-size: var(--text-small); }
.today-intro h1 { margin: 0 0 6px; font-family: var(--display); font-size: var(--text-title); letter-spacing: -.02em; line-height: 1.15; }
.today-intro > div { font-size: var(--text-body); color: var(--ink-soft); }
.today-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 24px 6px 10px; }
.today-section-head h2 { font-size: var(--text-section); margin: 0; letter-spacing: -.01em; font-weight: 700; }
.today-section-head > span { font-size: var(--text-label); color: var(--ink-soft); }
.today-page .row { min-height: 66px; padding: 14px; }
.today-symbol { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px; color: var(--ink); background: rgba(100,80,50,.08); }
.today-symbol svg { width: 20px; height: 20px; }
.today-symbol.critical { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.today-symbol.upcoming { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.today-label { font-size: var(--text-caption); font-weight: 700; color: var(--ink-faint); }
.today-label.critical { color: var(--bad); }
.today-page .row .meta.wrap { line-height: 1.5; }
.today-arrow { margin-left: auto; flex: none; font-size: 24px; color: var(--ink-faint); }
.today-duty-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.today-duty h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 16px 14px 10px; font-size: var(--text-input); }
.today-duty h3 span { font-weight: 400; font-size: var(--text-label); color: var(--ink-soft); }
.today-empty, .today-note { padding: 18px 16px; color: var(--ink-soft); font-size: var(--text-small); line-height: 1.45; }
.today-note { margin: 0; }
.today-empty { font-size: var(--text-body); }
.today-more summary { cursor: pointer; padding: 16px; min-height: 48px; font-size: var(--text-control); font-weight: 600; color: var(--ink); }
.today-more summary:focus-visible, .today-page button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 8px; }
.today-secondary { margin-top: 20px; border-top: 1px solid var(--sepia); }
@media (min-width: 600px) { .today-duty-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .today-page .row { gap: 9px; padding: 12px; } }
/* Не размываем соседние заголовки при отрисовке сводки в WebKit. */
body.home-wall .today-page .card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Семь вкладок владельца помещаются и на узком экране. */
body.home-wall .tab { min-width: 0; padding-inline: 0; }

/* Панель участвует в раскладке страницы: не зависит от отдельного fixed-слоя iOS. */
body.home-wall .tabbar {
  position: sticky;
  left: auto; right: auto; transform: none;
  flex-shrink: 0;
  margin: 0 auto calc(env(safe-area-inset-bottom, 0px) * .4 + 8px);
}
/* Высоту панели теперь резервирует сама раскладка, второй отступ не нужен. */
body.home-wall .view { padding-bottom: 20px; }

/* В установленном приложении нет панелей Safari. На холодном старте iOS
   100dvh бывает меньше полного окна и растёт лишь после первого свайпа.
   Задаём полную высоту всей цепочке документа, включая экран входа.
   Вкладки браузера продолжают использовать динамическую высоту выше. */
@media (display-mode: standalone) {
  html, body { height: auto; min-height: 100vh; min-height: 100lvh; }
  #app, .lock { min-height: 100vh; min-height: 100lvh; }
}

/* Более спокойная сводка и читаемые подписи; геометрию оболочки v113 сохраняем. */
.today-profile { margin: 4px 0 20px; border: 1px solid var(--sepia); border-radius: 22px; background: linear-gradient(120deg, rgba(255,250,240,.94), rgba(247,235,214,.82)); box-shadow: var(--card-shadow); color: var(--ink); overflow: hidden; }
.today-profile-button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 0; background: transparent; text-align: left; }
.today-profile-button:active { background: rgba(90,70,40,.06); }
.today-profile-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 20px; }
.today-profile-avatar { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #955a36; color: #fff8ec; font-family: var(--display); font-size: 22px; font-weight: 700; box-shadow: 0 0 0 4px rgba(149,90,54,.1); }
.today-profile-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.today-profile-greeting { color: var(--ink-soft); font-size: var(--text-small); }
.today-profile-name { font-family: var(--display); font-weight: 800; font-size: clamp(23px, 6vw, 28px); line-height: 1.15; overflow-wrap: anywhere; }
.today-profile-role { margin-top: 3px; color: #795033; font-size: var(--text-small); font-weight: 600; }
.today-profile-chevron { flex: none; color: #795033; font-size: 25px; }
.today-profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--sepia); min-height: 52px; }
.today-profile-date { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; color: var(--ink-soft); font-size: var(--text-small); }
.today-profile-date svg { flex: none; width: 16px; height: 16px; }
.profile-weather { flex: 0 0 auto; max-width: 48%; }
.profile-weather-now { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.weather-icon { width: 22px; height: 24px; flex: none; overflow: visible; filter: grayscale(1); stroke-width: 2.6; }
.weather-icon [stroke]:not([stroke="none"]) { stroke: currentColor; }
.profile-weather-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.profile-weather-text b { font-family: inherit; font-size: var(--text-small); font-weight: 400; color: var(--ink-soft); }
.profile-weather-text small { font-size: 10px; color: var(--ink-soft); max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.weather-note { display: block; max-width: 115px; font-size: 11px; color: var(--ink-soft); }
.wx-sun { transform-origin: 23px 23px; animation: wx-turn 24s linear infinite; }
.wx-moon { animation: wx-glow 4s ease-in-out infinite; }
.wx-cloud { animation: wx-drift 5s ease-in-out infinite; }
.wx-rain { animation: wx-rainfall 1.2s linear infinite; }
.wx-snow { animation: wx-snowfall 3s ease-in-out infinite; }
.wx-lightning { animation: wx-glow 2.4s ease-in-out infinite; }
.wx-fog { animation: wx-drift 6s ease-in-out infinite; }
@keyframes wx-turn { to { transform: rotate(360deg); } }
@keyframes wx-drift { 50% { transform: translateX(2px); } }
@keyframes wx-glow { 50% { opacity: .5; } }
@keyframes wx-rainfall { from { transform: translateY(-2px); opacity: .2; } to { transform: translate(-1px, 3px); opacity: 1; } }
@keyframes wx-snowfall { 50% { transform: translate(2px, 3px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .weather-icon * { animation: none !important; } }
@media (max-width: 360px) { .today-profile-button { padding: 16px 14px; gap: 11px; } .today-profile-avatar { width: 48px; height: 48px; font-size: 19px; } }
.today-calm { display: flex; align-items: center; gap: 9px; margin: 8px 6px 22px; color: var(--ink-soft); font-size: var(--text-body); }
.today-calm svg { width: 20px; height: 20px; color: var(--ok); }
body.home-wall { --card-shadow: 0 7px 20px -13px rgba(70,50,20,.24), 0 1px 0 rgba(255,255,255,.65) inset; }
.data-freshness { margin: 2px 6px 12px; color: var(--ink-soft); font-size: var(--text-label); line-height: 1.45; }
.access-tabs { margin: 0 0 12px; }
.access-code { font-family: var(--display); font-size: var(--text-title); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stock-summary { margin: 20px 0 8px; padding: 0 14px; }
.stock-summary > summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: var(--text-input); font-family: var(--display); }
.stock-summary[open] { padding-bottom: 14px; }
.stock-totals { margin: 12px 2px; }
.action-menu { position: relative; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-items { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 6px; border: 1px solid var(--sepia); border-radius: 16px; background: var(--card-2, #fffaf0); box-shadow: 0 10px 30px rgba(45,35,20,.2); z-index: 30; }
.action-menu-items button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; border: 0; background: transparent; border-radius: 10px; padding: 10px 12px; text-align: left; font-size: var(--text-body); }
.action-menu-items button:hover, .action-menu-items button:focus-visible { background: rgba(90,70,40,.08); }
.action-menu-items svg { width: 20px; height: 20px; flex: none; }
.sheet-discard { flex: none; padding: 14px 16px; background: #fff3dc; color: #483421; border-bottom: 1px solid var(--sepia); }
.sheet-discard p { margin: 6px 0 12px; font-size: var(--text-control); }
.save-error { padding: 12px; border: 1px solid var(--bad); border-radius: 12px; color: var(--bad); background: #fff7f2; margin: 0; }


/* Device notification preference, with connection health stated separately. */
.push-toggle { justify-content: space-between; }
.push-switch { width: 42px; height: 26px; flex: none; border-radius: 16px; background: var(--sepia); padding: 3px; transition: background .15s; }
.push-switch::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px #0003; transition: transform .15s; }
.push-toggle[aria-checked="true"] .push-switch { background: var(--accent); }
.push-toggle[aria-checked="true"] .push-switch::after { transform: translateX(16px); }
.push-toggle[data-status="retry"] + .hint, .push-toggle[data-status="blocked"] + .hint { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .push-switch, .push-switch::after { transition: none; } }

/* Ненавязчивое предложение обновить портал на главной. */
.today-update { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; border:1px solid var(--sepia-2); }
.today-update-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.today-update-copy b { font-size:var(--text-body); }
.today-update-copy span { color:var(--ink-soft); font-size:var(--text-small); line-height:1.4; }
.today-update .btn { flex:none; width:auto; margin:0; padding:10px 14px; color:var(--select); }
@media (max-width:360px) { .today-update { align-items:flex-start; flex-direction:column; } }

/* Цветовые схемы: образец фона и акцента, выбранный вариант отмечен галочкой. */
.palette-picker { min-width:0; margin:4px 0; padding:0; border:0; }
.palette-picker legend { margin-bottom:10px; padding:0; font-size:var(--text-body); font-weight:700; }
.palette-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.palette-option { display:flex; align-items:center; gap:9px; min-height:52px; padding:10px; border:1px solid var(--sepia); border-radius:14px; background:var(--card); color:var(--ink); text-align:left; font-size:var(--text-small); }
.palette-option[aria-pressed="true"] { border-color:var(--select); box-shadow:inset 0 0 0 1px var(--select); }
.palette-option:focus-visible { outline:2px solid var(--select); outline-offset:2px; }
.palette-option small { display:block; margin-top:2px; color:var(--ink-soft); font-size:var(--text-label); }
.palette-swatch { width:27px; height:27px; flex:none; border-radius:50%; border:1px solid rgba(70,50,20,.22); background:linear-gradient(135deg,var(--palette-paper) 60%,var(--palette-accent) 60%); }
.palette-check { visibility:hidden; margin-left:auto; color:var(--select); font-weight:700; }
.palette-option[aria-pressed="true"] .palette-check { visibility:visible; }
.palette-picker .hint { margin:8px 4px 0; }

/* Цветная бумага: оттенок освещения сохраняется внутри выбранной гаммы. */
body[data-palette="tiffany"],
body.home-wall[data-palette="tiffany"] {
  --paper:var(--scheme-paper); --select:var(--scheme-accent); --select-fg:#fff;
  --ink:var(--scheme-ink); --ink-soft:color-mix(in srgb,var(--ink) 72%,transparent); --ink-faint:color-mix(in srgb,var(--ink) 58%,transparent);
  --card:color-mix(in srgb,var(--paper) 24%,white); --card-2:color-mix(in srgb,var(--paper) 12%,white);
  --sepia:color-mix(in srgb,var(--ink) 16%,transparent); --sepia-2:color-mix(in srgb,var(--ink) 30%,transparent);
  --card-shadow:0 10px 26px -12px color-mix(in srgb,var(--ink) 25%,transparent),0 1px 0 rgba(255,255,255,.7) inset;
  --fg:var(--ink); --muted:var(--ink-soft); --faint:var(--ink-faint); --surface:var(--card); --surface2:var(--card-2);
}
body.home-wall[data-palette="tiffany"] .wallpaper::after { background:radial-gradient(closest-side,color-mix(in srgb,var(--select) 18%,transparent),transparent); }
body.home-wall[data-palette="tiffany"] .topbar::before { background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 80%,transparent) 60%,transparent); }
body.home-wall[data-palette="tiffany"] .tabbar { background:var(--card); }
body.home-wall[data-palette="tiffany"] .sheet-body { background:color-mix(in srgb,var(--paper) 45%,white); }
body.home-wall[data-palette="tiffany"] .today-profile { background:linear-gradient(120deg,var(--card-2),var(--card)); }
body.home-wall[data-palette="tiffany"] .today-profile-avatar { background:var(--select); color:white; box-shadow:0 0 0 4px color-mix(in srgb,var(--select) 12%,transparent); }
body.home-wall[data-palette="tiffany"] .btn:not(.danger):not(.primary),
body.home-wall[data-palette="tiffany"] .iconbtn,
body.home-wall[data-palette="tiffany"] .search input,
body.home-wall[data-palette="tiffany"] .field,
body.home-wall[data-palette="tiffany"] .fs { background:var(--card-2); }
body.home-wall[data-palette="tiffany"] .splash { --sky-top:var(--paper); --sky-bot:var(--paper); }

body.home-wall[data-palette="tiffany"] .today-profile-role,
body.home-wall[data-palette="tiffany"] .today-profile-chevron { color:var(--select); }
body[data-palette="tiffany"] .lock-box { background:var(--card); border-color:var(--sepia); box-shadow:var(--card-shadow); }
body[data-palette="tiffany"] .lock-form input { background:var(--card-2); color:var(--ink); border-color:var(--sepia); }

/* Личное фото меняет только фон: геометрия приложения и нижней панели прежняя. */
body.custom-wallpaper .wallpaper {
  top: 0; bottom: 0; height: 100lvh;
  -webkit-mask-image: none; mask-image: none;
  background-image: var(--personal-wallpaper);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
body.custom-wallpaper .wallpaper::before,
body.custom-wallpaper .wallpaper::after,
body.custom-wallpaper .wallpaper i { display: none; }
.wallpaper-picker { min-width: 0; margin: 8px 0; padding: 0; border: 0; display: grid; gap: 8px; }
.wallpaper-picker legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.wallpaper-picker .hint { margin: 0 4px; }
.wallpaper-preview { position: relative; height: 140px; overflow: hidden; border-radius: 14px; background: var(--paper); }
.wallpaper-preview img { width: 100%; height: 100%; object-fit: cover; }
.wallpaper-preview span { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 8px; background: rgba(10,20,30,.65); color: #fff; font-size: var(--text-small); }
/* У тиффани основной цвет задан inline; иначе он закрывает фотографию с z-index:-1. */
body.home-wall.custom-wallpaper { background-color: transparent !important; }

/* Исходные цвета фото сохраняем; контраст добавляем только элементам интерфейса. */
body.home-wall.custom-wallpaper { --card: rgba(252,248,238,.95); }
body.home-wall.custom-wallpaper[data-palette="tiffany"] { --card: color-mix(in srgb,var(--scheme-paper) 45%,white); }
body.home-wall.custom-wallpaper .title,
body.home-wall.custom-wallpaper .topbar.scrolled .title,
body.home-wall.custom-wallpaper .today-section-head h2,
body.home-wall.custom-wallpaper .today-section-head > span,
body.home-wall.custom-wallpaper .section-title,
body.home-wall.custom-wallpaper .section-title .n,
body.home-wall.custom-wallpaper .today-calm,
body.home-wall.custom-wallpaper .view > :is(.note,.hint,.data-freshness),
body.home-wall.custom-wallpaper .view .section > :is(.note,.hint,.today-note) {
  color: var(--wall-text,#fff); text-shadow: var(--wall-shadow,0 1px 3px rgba(0,0,0,.95));
}
body.home-wall.custom-wallpaper .today-calm svg { color: #a8e6b5; }
body.home-wall.custom-wallpaper .topbar::before { background: linear-gradient(180deg,rgba(10,20,30,.8),rgba(10,20,30,.55) 60%,transparent); }
body.home-wall.custom-wallpaper .hero.pin { background: var(--card); border-radius: 22px; }

/* Матовые полупрозрачные поверхности поверх личных обоев. */
body.home-wall.custom-wallpaper { --wallpaper-glass: rgba(252,248,238,.34); --wallpaper-bar: rgba(252,248,238,.37); }
body.home-wall.custom-wallpaper[data-palette="tiffany"] { --wallpaper-glass: rgba(230,249,246,.34); --wallpaper-bar: rgba(230,249,246,.37); }
body.home-wall.custom-wallpaper .view :is(.card,.tile,.kpi,.bars,.hero.pin),
body.home-wall.custom-wallpaper .today-profile,
body.home-wall.custom-wallpaper .tabbar {
  background: var(--wallpaper-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.35);
  --ink: #14201e; --ink-soft: #1c2927; --ink-faint: #24312f;
  --blue: #193e59; --select: #563721;
}
body.home-wall.custom-wallpaper .tabbar { background: var(--wallpaper-bar); }

body.home-wall.custom-wallpaper[data-palette="tiffany"] .view :is(.card,.tile,.kpi,.bars,.hero.pin),
body.home-wall.custom-wallpaper[data-palette="tiffany"] .today-profile,
body.home-wall.custom-wallpaper[data-palette="tiffany"] .tabbar { --select: #124c49; }
body.home-wall.custom-wallpaper .today-profile-role,
body.home-wall.custom-wallpaper .today-profile-chevron { color: var(--select); }

/* Цвет подписи выбирается по участку изображения под ней, с учётом стекла. */
body.home-wall.custom-wallpaper .today-calm svg { color: var(--wall-text,#a8e6b5); }
body.home-wall.custom-wallpaper .topbar.scrolled .title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
body.home-wall.custom-wallpaper .today-profile-avatar { background: var(--scheme-accent); color: #fff; }
body.home-wall.custom-wallpaper [data-wallpaper-ink="light"] :is(.today-profile-info,.today-profile-footer,.name,.meta,.aside,.tab,.tile h3,.tile p),
body.home-wall.custom-wallpaper .today-duty[data-wallpaper-ink="light"] > h3 { text-shadow: 0 1px 2px rgba(0,0,0,.45); }