/* Nidalumi — прототип. Всё локально: шрифты лежат в web/fonts, внешних запросов нет. */
/* Шрифты лежат в проекте: ни одного запроса наружу (OFL, лицензии рядом в web/fonts). */
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/sofia-cond-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/sofia-cond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jbmono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jbmono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/serif-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/serif-cyrillic-italic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/serif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/serif-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ground: #EFEBE1;
  --surface: #FCFAF5;
  --surface-2: #F5F1E7;
  --surface-3: #FFFFFF;
  --ink: #1C1A16;
  --ink-2: #57503F;
  --ink-3: #645C4A;
  --line: #DED5C4;
  --accent: #B8201A;
  --accent-ink: #FFFFFF;
  --accent-soft: #F7E4E1;
  --red: #B8201A;
  --ok: #20704F;
  --ok-soft: #E1EEE6;
  --warn: #8A5A08;
  --warn-soft: #F6E9D2;
  --bad-soft: #F7E1DF;
  --shadow: 0 1px 2px rgba(40, 32, 18, .07), 0 6px 18px rgba(40, 32, 18, .07);
  --shadow-lg: 0 18px 50px rgba(40, 32, 18, .25);
  --r-xl: 14px;   /* внешняя рамка блока */
  --r-lg: 12px;   /* плитка, карточка */
  --r-md: 8px;    /* кнопка, поле */
  --r-sm: 6px;    /* чип, мелкий элемент */
  --r-xs: 4px;    /* полоска, метка */
  --r: var(--r-lg);
  --r-s: var(--r-sm);
  --f-display: "Sofia Sans Condensed", "Bahnschrift Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --t-xs: 11.5px; --t-sm: 12.5px; --t-base: 14px; --t-md: 15px; --t-lg: 17px; --t-xl: 21px; --t-2xl: 27px; --t-3xl: 34px;
  --ease: cubic-bezier(.2, .6, .3, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #0F1113;
  --surface: #16181B;
  --surface-2: #1D2024;
  --surface-3: #24272C;
  --ink: #EDEFF2;
  --ink-2: #B4BAC2;
  --ink-3: #8B939D;
  --line: #2C3036;
  --accent: #FF5E4D;
  --accent-ink: #121315;
  --accent-soft: #33201E;
  --red: #FF5E4D;
  --ok: #4CC38A;
  --ok-soft: #14291F;
  --warn: #E0A83E;
  --warn-soft: #2E2413;
  --bad-soft: #33201E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.45 var(--f-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
:root:not([data-theme="dark"]) body {
  background-image: repeating-linear-gradient(0deg, rgba(28, 26, 22, .016) 0 1px, transparent 1px 3px);
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.row { display: flex; align-items: center; }
.gap { gap: 12px; } .gap-s { gap: 8px; } .wrap { flex-wrap: wrap; }

/* ---------- иконки, аватары */
.ic { width: 20px; height: 20px; flex: none; }
.ic.tiny { width: 14px; height: 14px; }
.ic.muted { color: var(--ink-3); }
.av {
  --size: 32px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--mc) 24%, var(--surface)); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--mc);
  font-weight: 700; font-size: calc(var(--size) * .44);
  font-family: var(--f-display); letter-spacing: .02em;
}
.av.xs { --size: 20px; } .av.sm { --size: 28px; } .av.lg { --size: 46px; }

/* ---------- кнопки и поля */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-md); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
/* Подпись на акцентной кнопке считается от самого акцента: семья выбирает цвет сама. */
.btn.primary { background: var(--accent); color: var(--accent-ink); }
:root[data-theme="dark"] .btn.danger { color: #17150F; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.ghost { border-color: var(--line); background: var(--surface); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.ghost.is-on { border-color: var(--ink); }
.btn.danger { background: var(--red); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.sm { min-height: 36px; padding: 0 13px; font-size: 13px; border-radius: var(--r-md); }
.btn.xs { min-height: 32px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); gap: 5px; }
.btn.lg { min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--r-md); }
@media (max-width: 760px) { .btn.sm, .btn.xs { min-height: 40px; } }
.btn .ic { width: 16px; height: 16px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; position: relative;
  color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.subtle { width: 30px; height: 30px; color: var(--ink-3); }
.icon-btn.dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--ground); }
.link-btn { color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
.link-btn:hover { color: var(--ink); text-decoration: underline; }
.link-btn.danger { color: var(--red); }

.input, .select {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
textarea.input { height: auto; padding: 9px 12px; resize: vertical; }
.input:focus, .select:focus, .title-input:focus, .inline-input:focus, .big-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.lg { height: 50px; font-size: 17px; }
.select.sm { height: 30px; font-size: 12.5px; padding: 0 8px; width: auto; }
.field { display: grid; gap: 6px; }
.field.two { grid-template-columns: 1fr 1fr; gap: 12px; }
.field.two > div { display: grid; gap: 6px; align-content: start; }
.field-label { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.static { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.checkline { display: flex; align-items: end; padding-bottom: 8px; }
.checkline.stack { flex-direction: column; align-items: start; gap: 10px; justify-content: end; }
.error { color: var(--red); margin: 0; font-weight: 600; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13.5px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { width: 36px; height: 22px; border-radius: 11px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .switch-ui { background: var(--ok); }
.switch input:checked + .switch-ui::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch.disabled { cursor: default; opacity: .7; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 2px; background: var(--surface); }
.seg button { height: 28px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.seg button.on { background: var(--ink); color: var(--surface); }

.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap; background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.pill.st-new { color: var(--ink-2); }
.pill.st-accepted { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.pill.st-review { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pill.st-done, .pill.st-approved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pill.st-declined, .pill.st-overdue, .pill.st-returned { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.pill.st-event { color: var(--ink-3); border-style: dashed; }
.pill.st-cancelled, .pill.st-waiting { color: var(--ink-3); border-style: dashed; }

/* ---------- каркас */
.app { display: grid; grid-template-columns: minmax(0, 1fr); height: 100dvh; }
.side {
  display: none; flex-direction: column; gap: 18px; padding: 18px 14px; overflow-y: auto;
  border-right: 1px solid var(--line); background: var(--surface);
  position: fixed; top: 0; bottom: 0; left: 0; width: 270px; z-index: 26;
  transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
}
.drawer-open .side { transform: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.logo { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .01em; line-height: 1; }
.brand-name.xl { font-size: clamp(56px, 9vw, 96px); letter-spacing: -.01em; }
.brand-fam { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.on { background: var(--ink); color: var(--surface); }
.nav-item .count { margin-left: auto; font-size: 12px; opacity: .7; }
.side-members { display: grid; gap: 1px; padding-top: 14px; border-top: 1px solid var(--line); }
.side-member { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; text-align: left; }
.side-member span:not(.av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-member:hover { background: var(--surface-2); }
.side-member.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.side-member .pts { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--warn); font-weight: 700; }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.side-foot .row { justify-content: space-between; }

.main { overflow-y: auto; min-width: 0; }
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 14px 28px; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px);
}
.top-title { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.view { padding: 6px 28px 60px; max-width: 1100px; }
.narrow-only, .tabs, .scrim { display: none; }

/* ---------- лист отрывного календаря */
.sheet-stack { position: relative; width: 190px; flex: none; }
.sheet-stack::before, .sheet-stack::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 20px;
  background: var(--surface); border-radius: 0 0 12px 12px; box-shadow: var(--shadow); z-index: 0;
}
.sheet-stack::after { left: 12px; right: 12px; bottom: -10px; opacity: .7; z-index: -1; }
.sheet {
  position: relative; z-index: 1; background: var(--surface); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); text-align: center; padding: 0 0 14px;
}
.sheet-binding { height: 24px; background: var(--ink); display: flex; justify-content: space-around; align-items: center; padding: 0 30%; }
.sheet-binding i { width: 9px; height: 9px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.sheet.is-today .sheet-binding { background: var(--red); }
.sheet-month { margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sheet-num {
  font-family: var(--f-display); font-stretch: condensed; font-weight: 700;
  font-size: 104px; line-height: .9; letter-spacing: -.03em; margin: 4px 0 2px; color: var(--ink);
}
.sheet.weekend .sheet-num { color: var(--red); }
.sheet-wd { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sheet-stack.small { width: 118px; }
.sheet-stack.small .sheet-num { font-size: 60px; }
.sheet-stack.small .sheet-binding { height: 16px; }
.sheet-stack.small .sheet-month { font-size: 9.5px; margin-top: 7px; }
.sheet-stack.hero { width: min(300px, 70vw); }
.sheet-stack.hero .sheet-num { font-size: clamp(120px, 20vw, 180px); }
.sheet-stack.hero .sheet-binding { height: 34px; }
.sheet-ghost { position: fixed; z-index: 50; margin: 0; pointer-events: none; transform-origin: 20% 0; }
.tear-next { animation: tear-next .55s cubic-bezier(.5, 0, .75, .2) forwards; }
.tear-prev { animation: tear-prev .45s ease-in forwards; }
@keyframes tear-next {
  0% { transform: none; opacity: 1; }
  30% { transform: rotate(-4deg) translateY(-4px); }
  100% { transform: rotate(-18deg) translate(-70px, 160px); opacity: 0; }
}
@keyframes tear-prev {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(-40px) scale(.96); opacity: 0; }
}
.view-day .sheet-stack .sheet { animation: sheet-in .35s ease-out; }
@keyframes sheet-in { from { transform: translateY(6px); } to { transform: none; } }

/* ---------- день */
.day-head { display: flex; gap: 28px; align-items: stretch; padding: 8px 0 20px; }
.day-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-score { display: flex; align-items: baseline; gap: 10px; }
.score-num { font-family: var(--f-display); font-size: 46px; font-weight: 700; line-height: 1; }
.score-num small { font-size: 26px; color: var(--ink-3); }
.score-label { color: var(--ink-3); font-weight: 600; }
.mbars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 4px 18px; }
.mbar { display: grid; grid-template-columns: auto minmax(0, 7em) 1fr auto; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 8px; text-align: left; }
.mbar:hover, .mbar.on { background: var(--surface); }
.mbar-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mbar-track span { display: block; height: 100%; background: var(--mc); border-radius: 3px; }
.mbar-num { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 14px; scrollbar-width: none; }
@media (max-width: 760px) { .chips { flex-wrap: nowrap; overflow-x: auto; } }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--ink-2); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mc); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media (max-width: 760px) { .chip { min-height: 40px; } }

.tasklist { display: grid; gap: 6px; }
.group-title { font-family: var(--f-display); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.task {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 13px 12px 13px 0; background: var(--surface); border-radius: var(--r-s); box-shadow: none;
  border: 1px solid var(--line); border-left: 3px solid var(--mc);
}
.task:hover { border-color: color-mix(in srgb, var(--mc) 40%, var(--line)); }
.task-open { position: absolute; inset: 0; border-radius: var(--r); z-index: 0; }
.task-open:hover { background: color-mix(in srgb, var(--mc) 5%, transparent); }
.task > :not(.task-open) { position: relative; z-index: 1; pointer-events: none; }
.task .task-actions { pointer-events: auto; }
.task-time { text-align: right; font-family: var(--f-mono); font-weight: 600; font-size: 13px; color: var(--ink-3); }
.task-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.who { display: inline-flex; align-items: center; gap: 6px; }
.pts-inline, .kpts { display: inline-flex; align-items: center; gap: 2px; color: var(--warn); font-weight: 700; }
.reason { color: var(--red); }
.task-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
.task.st-done, .task.st-approved { background: transparent; border-color: var(--line); opacity: .62; }
.task.st-done .task-title, .task.st-approved .task-title { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.task.st-declined { border-left-style: dashed; }
.task.is-event { background: transparent; border-style: dashed; border-left-style: solid; }
.task.st-overdue { border-left-color: var(--red); }
.task.st-overdue .task-time { color: var(--red); }
.now-line { position: relative; height: 14px; display: flex; align-items: center; margin: 2px 0; }
.now-line::before { content: ""; flex: 1; height: 2px; background: var(--red); border-radius: 1px; margin-left: 56px; }
.now-line span { position: absolute; left: 0; width: 50px; text-align: right; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; color: var(--red); }
.empty { text-align: center; padding: 50px 20px; color: var(--ink-3); display: grid; justify-items: center; gap: 14px; }
.empty p { margin: 0; font-size: 15px; }

/* ---------- детский режим */
.kid-hero {
  display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px; margin: 6px 0 18px;
  border-radius: 20px; background: color-mix(in srgb, var(--mc) 14%, var(--surface)); box-shadow: var(--shadow);
}
.kid-hello { font-family: var(--f-display); font-size: 30px; font-weight: 700; }
.kid-points { font-family: var(--f-display); font-size: 64px; font-weight: 700; line-height: 1; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.kid-points .ic { width: 40px; height: 40px; color: var(--warn); fill: var(--warn); }
.kid-next { color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.kid-track { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--mc) 20%, var(--surface)); margin-top: 10px; max-width: 320px; overflow: hidden; }
.kid-track span { display: block; height: 100%; background: var(--mc); border-radius: 5px; }
.kid-nav { margin-bottom: 14px; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.kcard { position: relative; background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.kcard > :not(.task-open) { position: relative; z-index: 1; pointer-events: none; }
.kcard .kcard-btn { pointer-events: auto; }
.kcard-time { font-weight: 700; color: var(--ink-3); }
.kcard-title { font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.1; }
.kcard-foot { display: flex; gap: 8px; align-items: center; }
.btn.kid { width: 100%; height: 52px; font-size: 18px; border-radius: 14px; }
.kcard.st-done, .kcard.st-approved { opacity: .6; box-shadow: none; }

/* ---------- неделя */
.period-nav { display: flex; align-items: center; gap: 6px; margin: 4px 0 16px; flex-wrap: wrap; }
.period-title { font-family: var(--f-display); font-size: 20px; font-weight: 700; padding: 0 6px; min-width: 12ch; }
.wk-chip {
  display: grid; text-align: left; padding: 4px 6px; border-radius: 6px; font-size: 11.5px; line-height: 1.25;
  background: color-mix(in srgb, var(--mc) 13%, var(--surface)); border-left: 3px solid var(--mc); min-width: 0;
}
.wk-chip:hover { background: color-mix(in srgb, var(--mc) 22%, var(--surface)); }
.wk-time { font-weight: 700; color: var(--ink-2); font-size: 10.5px; }
.wk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chip.st-done .wk-title, .wk-chip.st-approved .wk-title { text-decoration: line-through; color: var(--ink-3); }
.wk-chip.st-overdue, .wk-chip.st-declined { box-shadow: inset 0 0 0 1px var(--red); }
.wk-chip.is-event { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- месяц */
.month { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mc-wd { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-align: center; padding-bottom: 2px; text-transform: uppercase; letter-spacing: .06em; }
.mc-wd.weekend { color: var(--red); }
.mc { aspect-ratio: 1 / 1; max-width: 100%; background: var(--surface); border-radius: 10px; padding: 6px 7px; display: flex; flex-direction: column; text-align: left; box-shadow: var(--shadow); min-width: 0; }
.mc:hover { box-shadow: 0 0 0 2px var(--ink-3); }
.mc.out { background: transparent; box-shadow: none; opacity: .45; }
.mc.today { box-shadow: 0 0 0 2px var(--red); }
.mc-num { font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1; }
.mc.weekend .mc-num { color: var(--red); }
.mc-dots { display: flex; gap: 3px; margin-top: auto; flex-wrap: wrap; }
.mc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--mc); }
.mc-bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden; }
.mc-bar span { display: block; height: 100%; background: var(--ok); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.section-head h2 { font-family: var(--f-display); font-size: 20px; font-weight: 700; }
.goals { display: grid; gap: 10px; }
.goals .section-head { margin-top: 0; }
.goal { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; justify-items: start; }
.goal-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.goal-text { flex: 1; min-width: 0; }
.goal-title { font-weight: 600; }
.goal-num { font-family: var(--f-display); font-size: 26px; font-weight: 700; }
.goal-num small { font-size: 15px; color: var(--ink-3); }
.goal-track { height: 8px; width: 100%; border-radius: 4px; background: var(--line); overflow: hidden; }
.goal-track span { display: block; height: 100%; border-radius: 4px; background: var(--mc); }

/* ---------- семья */
.fam-head { display: grid; gap: 6px; margin: 6px 0 22px; max-width: 480px; }
.big-input { font-family: var(--f-display); font-size: 34px; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 2px 8px; margin-left: -9px; border-radius: 10px; }
.big-input:hover { border-color: var(--line); }
.big-name { font-family: var(--f-display); font-size: 34px; font-weight: 700; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.mcard { background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; border-top: 4px solid var(--mc); }
.mcard.add { border-top: 4px dashed var(--line); box-shadow: none; background: transparent; outline: 1px dashed var(--line); outline-offset: -1px; }
.mcard-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.mcard-id { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mcard-name { font-weight: 700; font-size: 16px; }
.inline-input { font-weight: 700; font-size: 16px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 2px 6px; margin-left: -7px; width: 100%; }
.inline-input:hover { border-color: var(--line); }
.swatches { grid-column: 1 / -1; display: flex; gap: 6px; }
.sw { width: 20px; height: 20px; border-radius: 50%; background: var(--c); }
.sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.mcard-rows { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.mrow.invite span { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tg { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.tg.on { color: var(--ok); }
.mcard .link-btn.danger { justify-self: start; }

/* ---------- награды */
.kids-points { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 22px; }
.kp { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--r); padding: 14px 20px 14px 14px; box-shadow: var(--shadow); }
.kp-name { font-weight: 600; }
.kp-num { font-family: var(--f-display); font-size: 36px; font-weight: 700; line-height: 1; display: flex; align-items: center; gap: 4px; }
.kp-num .ic, .reward-cost .ic { color: var(--warn); fill: var(--warn); width: 22px; height: 22px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.reward { position: relative; background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 10px; justify-items: start; }
.reward-cost { font-family: var(--f-display); font-size: 30px; font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1; }
.reward-title { font-weight: 600; font-size: 15px; }
.reward .icon-btn { position: absolute; top: 10px; right: 10px; }

/* ---------- итоги */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 6px; }
.scard { background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.scard-top { display: flex; align-items: center; gap: 10px; }
.scard-name { font-weight: 700; flex: 1; }
.scard-rate { font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1; }
.scard-rate small { font-size: 18px; color: var(--ink-3); }
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 64px; align-items: end; }
.col { height: 100%; display: flex; align-items: end; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.col span { display: block; width: 100%; background: var(--mc); border-radius: 5px; }
.cols-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--ink-3); margin-top: -4px; }
.sfacts { margin: 0; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.sfacts div { display: flex; justify-content: space-between; gap: 10px; }
.sfacts dt { color: var(--ink-2); font-size: 13px; }
.sfacts dd { margin: 0; font-weight: 700; }
.sfacts dd.bad { color: var(--red); }

/* ---------- бот */
.bot { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface-2);
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 25;
  box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .22s ease; }
.bot-open .bot { transform: none; }
.bot-close, .bot-toggle { display: inline-grid; }
.bot-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bot-id { display: flex; align-items: center; gap: 10px; }
.bot-id .logo { width: 36px; height: 36px; }
.bot-name { font-weight: 700; }
.bot-sub { font-size: 12px; color: var(--ok); }
.bot-chatas { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-people { display: flex; gap: 4px; }
.chat-person { border-radius: 50%; padding: 2px; opacity: .5; transition: opacity .15s; }
.chat-person:hover { opacity: .85; }
.chat-person.on { opacity: 1; box-shadow: 0 0 0 2px var(--mc); }
.chat {
  flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px;
  background-image: radial-gradient(color-mix(in srgb, var(--ink-3) 18%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}
.chat-day { align-self: center; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); padding: 2px 10px; border-radius: 10px; margin: 4px 0; box-shadow: var(--shadow); }
.msg { display: grid; gap: 4px; max-width: 88%; }
.msg.in { justify-self: start; align-self: flex-start; }
.msg.out { align-self: flex-end; }
.bubble { position: relative; padding: 8px 11px 18px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; min-width: 90px; }
.msg.in .bubble { border-bottom-left-radius: 4px; }
.msg.out .bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.bubble time { position: absolute; right: 9px; bottom: 3px; font-size: 10.5px; color: var(--ink-3); }
.msg.out .bubble time { color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }
.kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 4px; }
.kb.two { grid-template-columns: 1fr 1fr; }
.kb-btn { height: 34px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-btn:hover { background: var(--surface); }
.kb-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); padding-left: 4px; }
.chat-hint { text-align: center; font-size: 12px; color: var(--ink-3); margin: 10px 12px 4px; }
.bot-sim { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
.bot-input { display: flex; gap: 6px; padding: 8px 12px 12px; }
.bot-input .input { height: 40px; border-radius: 20px; }
.send { background: var(--ink); color: var(--surface); border-radius: 50%; width: 40px; height: 40px; }
.send:hover { background: var(--accent); color: var(--accent-ink); }
.send .ic { width: 18px; height: 18px; }

/* ---------- карточка задачи и модалки */
.overlay { position: fixed; inset: 0; background: rgba(14, 17, 23, .38); z-index: 30; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 31; background: var(--surface);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; border-top: 5px solid var(--mc); animation: slide .2s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0 20px; }
.drawer-body { overflow-y: auto; padding: 8px 20px 30px; display: grid; gap: 14px; align-content: start; }
.drawer-title { font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.title-input { font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1.1; width: 100%; border: 1px solid transparent; border-radius: 10px; background: transparent; resize: none; padding: 4px 8px; margin-left: -9px; }
.title-input:hover { border-color: var(--line); }
.drawer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer-actions:empty { display: none; }
.fields { display: grid; gap: 14px; }
.meta-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.drawer-save { display: flex; align-items: center; justify-content: space-between; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; }
.log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mc); }
.log time { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.modal {
  position: fixed; z-index: 31; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%); } }
.modal-body { padding: 22px; display: grid; gap: 14px; }
.modal-body h2 { font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.modal-body p { margin: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; }
.choice .btn { height: 46px; }
.who-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.who-opt { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 6px; border-radius: 17px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; font-weight: 600; }
.who-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.who-opt:has(input:checked) { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, var(--surface)); }
.who-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--surface); padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast .2s ease-out; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- онбординг */
.onb { min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 20px 40px; }
.onb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.onb-top:has(> .seg:only-child) { justify-content: flex-end; }
.onb-hero { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 6vw, 90px); flex-wrap: wrap; padding: 30px 0; }
.onb-copy { max-width: 460px; display: grid; gap: 18px; }
.onb-lead { font-size: 18px; color: var(--ink-2); margin: 0; }
.onb-card { width: min(540px, 100%); margin: 6vh auto 0; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 26px; display: grid; gap: 14px; }
.onb-card h1 { font-family: var(--f-display); font-size: 32px; font-weight: 700; line-height: 1.1; }
.onb-card p { margin: 0; }
.onb-step { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.onb-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.onb-dots i { height: 4px; border-radius: 2px; background: var(--line); }
.onb-dots i.on { background: var(--red); }
.onb-list { display: grid; gap: 6px; }
.onb-person { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--mc); }
.onb-person .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.onb-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }

/* ---------- расписание */
.sch-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px;
  border-left: 4px solid var(--mc);
}
.sch-next { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sch-next > .ic { color: var(--mc); width: 24px; height: 24px; }
.sch-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.sch-col { display: grid; gap: 6px; align-content: start; min-height: 120px; padding: 6px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.sch-col.today { background: var(--accent-soft); }
.sch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font-weight: 700; font-size: 13px; padding: 2px 4px 4px; }
.sch-head.weekend { color: var(--red); }
.sch-head em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.slot {
  display: grid; gap: 2px; text-align: left; padding: 8px 9px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow);
  border-left: 4px solid var(--mc); min-width: 0;
}
.slot:hover { box-shadow: 0 0 0 2px var(--mc); }
.slot.is-event { background: color-mix(in srgb, var(--mc) 9%, var(--surface)); }
.slot-time { font-family: var(--f-display); font-size: 18px; font-weight: 700; line-height: 1; }
.slot-title { font-weight: 600; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.slot-rem { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.dayt { position: relative; cursor: pointer; }
.dayt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dayt span { display: inline-grid; place-items: center; min-width: 46px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.dayt.weekend span { color: var(--red); }
.dayt input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dayt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-btn { width: 26px; height: 26px; border-radius: 7px; color: var(--ink-3); }
.copy-btn:hover { background: var(--surface); color: var(--ink); }
.dayt span small { font-size: 10.5px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
.dayt input:checked + span small { color: inherit; opacity: .7; }
.dayt.self span { border-style: dashed; opacity: .45; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pick-list { display: grid; gap: 6px; }
.pick { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--mc); cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; color: transparent; }
.pick input:checked ~ .pick-box { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pick input:focus-visible ~ .pick-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-time { font-weight: 700; font-size: 13px; }
.pick-title { font-weight: 600; }
.modes { gap: 8px; }
.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.radio input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.drawer-save { flex-wrap: wrap; gap: 8px; }
.modal-foot.spread { justify-content: space-between; flex-wrap: wrap; align-items: center; }

/* ---------- подключение Telegram */
.tgbox { display: grid; gap: 8px; justify-items: start; }
.tgbox.on { display: flex; align-items: center; justify-content: space-between; }
.tg-link { display: flex; align-items: center; gap: 10px; max-width: 100%; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; overflow-wrap: anywhere; }
.howto { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 16px; margin: -8px 0 20px; max-width: 720px; }
.howto summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.howto ol { margin: 10px 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.howto p { margin: 0; }
.tg-wait { margin: auto 0; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
.tg-wait-title { font-weight: 700; font-size: 15px; }
.tg-wait ol { text-align: left; margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); font-size: 13px; }
.tg-wait p { margin: 0; }
.is-off { display: none !important; }
.chat-person .av { box-shadow: none; }
.onb-how { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.onb-tg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--mc); }
.onb-tg-text { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.onb-tg-text code { max-width: 100%; }
/* На телефоне кнопка под именем: рядом она закрывала имя и код */
@media (max-width: 480px) {
  .onb-tg { grid-template-columns: auto minmax(0, 1fr); }
  .onb-tg > .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- адаптив */
@media (max-width: 1180px) {
  .month { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .side { display: flex; }
  .drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 24; background: rgba(14, 17, 23, .38); }
  .narrow-only { display: inline-grid; }
  .wide-only { display: none !important; }
  .top { padding: 10px 16px; }
  .view { padding: 4px 16px 90px; }
  .tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tab { display: grid; justify-items: center; gap: 1px; padding: 5px 0; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .tab.on { color: var(--ink); }
  .tab.on .ic { color: var(--red); }
  .bot { width: 100vw; bottom: calc(58px + env(safe-area-inset-bottom)); }
  .sch-grid { grid-template-columns: 1fr; gap: 6px; }
  .sch-col { min-height: 0; padding: 8px; }
  .sch-col .sch-head { padding: 0 2px 2px; align-items: center; }
  .sch-col:not(:has(.slot)) { display: none; }
}
@media (max-width: 600px) {
  .hide-xs { display: none; }
  .top-title { font-size: 22px; }
  .day-head { gap: 16px; padding-top: 4px; }
  .sheet-stack { width: 128px; }
  .sheet-num { font-size: 66px; }
  .sheet-binding { height: 18px; }
  .sheet-month { font-size: 9.5px; letter-spacing: .1em; margin-top: 7px; }
  .sheet-wd { font-size: 12px; }
  .score-num { font-size: 36px; }
  .mbars { grid-template-columns: 1fr; gap: 0; }
  .mbar { grid-template-columns: auto minmax(0, 6em) 1fr auto; height: 26px; }
  .mbars .mbar:nth-child(n+4) { display: none; }
  .task { grid-template-columns: 44px minmax(0, 1fr); padding: 11px 12px 11px 0; gap: 10px; }
  .task-actions { grid-column: 2; justify-content: start; }
  .task-actions:empty { display: none; }
  .kid-hero { padding: 16px; }
  .kid-points { font-size: 50px; }
  .sheet-stack.small { width: 92px; }
  .sheet-stack.small .sheet-num { font-size: 44px; }
  .mc { padding: 4px; border-radius: 8px; }
  .mc-num { font-size: 15px; }
  .mc-dots i { width: 5px; height: 5px; }
  .field.two { grid-template-columns: 1fr; }
  .onb-add { grid-template-columns: 1fr; }
  .onb-person { grid-template-columns: auto 1fr auto; }
  .drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sch-head em { margin-left: 6px; }
.dayt.past span { opacity: .55; }
.msg:has(.kb) { width: 92%; }
.kb-btn { padding: 0 6px; }

/* ---------- день по часам */
.sch-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.sch-add {
  display: grid; place-items: center; height: 34px; border-radius: 10px; color: var(--ink-3);
  border: 1.5px dashed var(--line); transition: color .15s, border-color .15s, background .15s;
}
.sch-add:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface); }
.sch-add .ic { width: 18px; height: 18px; }
.modal:has(.hours-modal) { width: min(620px, calc(100vw - 32px)); overflow: hidden; display: flex; }
.hours-modal { display: flex; flex-direction: column; min-height: 0; width: 100%; max-height: calc(100dvh - 40px); gap: 12px; }
.hours-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.hours { position: relative; overflow-y: auto; min-height: 0; flex: 1; border-top: 1px solid var(--line); margin: 0 -22px; padding: 0 22px; max-height: 62dvh; }
.hour { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line); min-height: 46px; }
.hour-label { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink-3); padding-top: 12px; }
.hour.now .hour-label { color: var(--red); }
.hour-body { display: grid; gap: 6px; align-content: center; padding: 6px 0; }
.hour-slot { text-align: left; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border-left: 4px solid var(--mc); font-size: 13.5px; }
.hour-slot.is-event { background: color-mix(in srgb, var(--mc) 12%, var(--surface)); }
.hour-slot:hover { box-shadow: 0 0 0 2px var(--mc); }
.hour-add {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px;
  color: transparent; text-align: left; font-size: 13px; font-weight: 600;
}
.hour-add .ic { color: var(--ink-3); }
.hour:hover .hour-add, .hour-add:focus-visible { color: var(--ink-2); background: var(--surface-2); }
.hour.open { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.hour-form { display: grid; gap: 8px; padding: 4px 0; }
.hour-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hour-form-btns { display: flex; gap: 6px; margin-left: auto; }
.hours-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (hover: none) { .hour-add { color: var(--ink-3); } }
@media (max-width: 860px) { .sch-col:not(:has(.slot)) { display: grid; } }

/* ---------- ядро: режимы задач, пересечения, тихие часы */
.field.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.field.three > div { display: grid; gap: 6px; align-content: start; }
.seg.wide { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg.wide label { position: relative; }
.seg.wide input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg.wide span { display: block; text-align: center; padding: 6px 4px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.seg.wide input:checked + span { background: var(--ink); color: var(--surface); }
.seg.wide input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
form:has(input[name="mode"][value="one"]:checked) .who-multi,
form:has(input[name="mode"][value="one"]:checked) .mode-hint { display: none; }
form:has(input[name="mode"]:not([value="one"]):checked) .who-single { display: none; }
form:has(input[name="mode"][value="each"]:checked) .mode-hint.first,
form:has(input[name="mode"][value="first"]:checked) .mode-hint.each { display: none; }
.task-time small { display: block; font-weight: 600; font-size: 11px; color: var(--ink-3); }
.who.pool { gap: 2px; }
.badge, .clash { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.clash { background: var(--warn-soft); color: var(--warn); }
.clash-ic { color: var(--warn); }
.wk-chip.has-clash, .slot.has-clash { box-shadow: inset 0 0 0 1px var(--warn); }
.notice { display: flex; gap: 10px; align-items: start; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice .field-label { margin-bottom: 6px; }
.group-list { display: grid; gap: 6px; }
.group-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface); text-align: left; }
.group-row.on { box-shadow: inset 0 0 0 1px var(--ink-3); }
.msg.held .bubble { opacity: .6; }
.held-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); padding-left: 4px; }
.msg.urgent .bubble { box-shadow: 0 0 0 2px var(--red); }
.bot-quick { display: flex; gap: 6px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; }
.quick { flex: none; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.quick:hover { background: var(--accent-soft); color: var(--accent); }
.nav-group + .nav-group { margin-top: 12px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 4px; }
.settings { display: grid; gap: 10px; max-width: 720px; }
.setting { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.setting-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setting p { margin: 0; }
.quiet { flex-wrap: wrap; }
.quiet-times { display: inline-flex; align-items: center; gap: 4px; }
.quiet-times.is-dim { opacity: .5; }
.input.xs { height: 30px; padding: 0 8px; font-size: 12.5px; width: auto; }
.banners { display: grid; gap: 8px; padding: 0 28px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); font-weight: 600; flex-wrap: wrap; }
.sos-banner { background: var(--red); color: #fff; }
.sos-banner .btn.ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.offline-banner { background: var(--warn-soft); color: var(--warn); }
.sos-btn { color: var(--red); }
.sos-btn:hover { background: var(--bad-soft); }

/* ---------- покупки */
.shop-add, .exp-add { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; margin-bottom: 14px; }
.exp-add { grid-template-columns: 150px 1fr auto; } /* сколько · на что (своими словами) · кнопка */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shop-item { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.shop-check { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; color: var(--surface); }
.shop-item.is-done { opacity: .55; }
.shop-item.is-done .shop-check { background: var(--ok); border-color: var(--ok); }
.shop-item.is-done .shop-title { text-decoration: line-through; }
.shop-title { font-weight: 600; }
.shop-qty { color: var(--ink-3); font-size: 12.5px; }

/* ---------- меню */
.menu-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.menu-day { background: var(--surface); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.menu-day.today { box-shadow: 0 0 0 2px var(--red); }
.menu-head { display: flex; align-items: baseline; gap: 6px; }
.menu-head b { font-family: var(--f-display); font-size: 20px; }
.menu-head span { font-size: 12px; color: var(--ink-3); }
.menu-slot { display: grid; gap: 3px; }
.meal-static { font-size: 13px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.rec { position: relative; background: var(--surface); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.rec-name { font-weight: 700; }
.rec-ing { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-ing span, .chip-static { font-size: 11.5px; background: var(--surface-2); border-radius: 8px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; }
.rec .icon-btn { position: absolute; top: 8px; right: 8px; }

/* ---------- деньги */
.bud-top { display: flex; gap: 20px; flex-wrap: wrap; align-items: end; background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.bud-main { flex: 1; min-width: 240px; display: grid; gap: 6px; }
.bud-sum { font-family: var(--f-display); font-size: 40px; font-weight: 700; line-height: 1; }
.bud-track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bud-track span { display: block; height: 100%; background: var(--ok); }
.bud-track.over span { background: var(--red); }
.bud-limit { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.bud-limit .input { width: 160px; }
.bud-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(90px, 9em) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-name { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar-track span { display: block; height: 100%; background: var(--mc); }
.exp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.exp-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 8px; background: var(--surface); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 13px; }
.exp-cat { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--mc) 65%, var(--ink)); }
.exp-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.bill { position: relative; background: var(--surface); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.bill.st-late { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.bill-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bill-sum { font-family: var(--f-display); font-size: 20px; font-weight: 700; }
.bill-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.bill .icon-btn.subtle { position: absolute; top: 6px; right: 6px; }
.bill.add, .rec.add, .note.add, .card-form, .care-form { display: grid; gap: 8px; }
.card-form { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); margin-top: 12px; max-width: 640px; }
.care-form { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.care-form .input, .care-form .select { flex: 1 1 150px; min-width: 130px; }
.care-form .input[type="time"], .care-form .input[type="date"], .care-form .input[type="number"] { flex: 0 1 auto; min-width: 110px; }
.care-form .btn { flex: 0 0 auto; }
.care-form .input.wide { flex: 1 1 180px; min-width: 160px; }
.care-form .who-pick, .care-form .form-hint { flex-basis: 100%; }
.form-hint { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; }
.pocket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.pocket { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; border-top: 4px solid var(--mc); }
.pocket-top { display: flex; align-items: center; gap: 10px; }
.pocket-sum { font-family: var(--f-display); font-size: 30px; font-weight: 700; line-height: 1; display: grid; gap: 2px; }
.pocket-sum .field-label { font-family: var(--f-body); }
.pocket-give { display: flex; gap: 6px; align-items: center; }
.pocket-give .input { width: 90px; }
.rate-set { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.rate-set .input { width: 80px; }
.money-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.money-log li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; background: var(--surface); border-radius: 10px; padding: 8px 10px; }
.money-log b.up { color: var(--ok); } .money-log b.down { color: var(--red); }

/* ---------- дом */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; align-items: start; }
.card { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-top > .ic { color: var(--mc, var(--accent)); width: 26px; height: 26px; }
.card-top .icon-btn { margin-left: auto; }
.card-facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.card-facts .bad { color: var(--red); font-weight: 600; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.care-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.care-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--surface-2); border-radius: 9px; padding: 6px 9px; flex-wrap: wrap; }
.care-list li > span:nth-child(2) { flex: 1; }
.date-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.date-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); border-left: 4px solid var(--mc); }
.date-row.soon { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.date-when { display: grid; justify-items: center; min-width: 40px; }
.date-when b { font-family: var(--f-display); font-size: 22px; line-height: 1; }
.date-when span { font-size: 11px; color: var(--ink-3); }
.date-main { display: grid; gap: 2px; min-width: 0; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; align-items: start; }
.note { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.note.pinned { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.note-top { display: flex; align-items: center; gap: 6px; }
.note-body { font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
.note-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); }
.note-acts { display: flex; gap: 12px; }
.input.file { padding: 6px; height: auto; }
.mc-date { position: absolute; top: 4px; right: 5px; font-size: 11px; }
.mc { position: relative; }

/* ---------- дети */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.badge-card { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; border-top: 4px solid var(--mc); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badges.small { gap: 4px; }
.badge-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.badge-chip.got { background: var(--warn-soft); color: var(--warn); }
.rank { background: var(--surface); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px; display: grid; gap: 10px; }
.rank .section-head { margin: 0; }
.rank-rows { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: auto auto minmax(80px, 8em) 1fr auto; align-items: center; gap: 10px; }
.rank-place { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--ink-3); width: 20px; }
.rank-row.first .rank-place { color: var(--warn); }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rank-track span { display: block; height: 100%; background: var(--mc); }
.rank-prize { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.screen-card, .checkin-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 10px; flex-wrap: wrap; }
.screen-card > .ic, .checkin-card > .ic { color: var(--accent); }
.screen-card.on { background: var(--ok-soft); }
.screen-card button, .checkin-card .row { margin-left: auto; }

/* ---------- лента */
.feed-post { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.feed-list { display: grid; gap: 8px; }
.feed-day { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 2px; }
.feed-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); border-left: 4px solid var(--mc); }
.feed-text { font-size: 14px; }
.feed-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.feed-foot time { font-size: 11.5px; color: var(--ink-3); }
.reacts { display: flex; gap: 4px; margin-left: auto; }
.react { height: 26px; padding: 0 8px; border-radius: 13px; background: var(--surface-2); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.react b { font-size: 11px; font-weight: 700; }
.react.on { background: var(--accent-soft); color: var(--accent); }
.tpl-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }

@media (max-width: 860px) {
  .banners { padding: 0 16px; }
  .field.three { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .shop-add { grid-template-columns: 1fr auto; }
  .shop-add .qty, .shop-add [name="title"] { grid-column: 1 / -1; }
  .exp-add { grid-template-columns: 1fr; } /* на телефоне поля во всю ширину: подсказку «На что» не режем */
  .care-form .input, .care-form .select { flex-basis: 100%; }
  .bar { grid-template-columns: minmax(70px, 7em) 1fr auto; }
  .rank-row { grid-template-columns: auto auto 1fr auto; }
  .rank-track { display: none; }
}
.tg-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.tg-open:hover { text-decoration: underline; }
.tg-wait .btn.primary { text-decoration: none; }
.tg-code { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; }
.tgbox .btn.primary { text-decoration: none; }
.onb-tg .btn { text-decoration: none; }

.pill.st-cancelled { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; }
.task.st-cancelled { opacity: .5; box-shadow: none; }
.task.st-cancelled .task-title { text-decoration: line-through; }
.leftover { background: var(--warn-soft); border-radius: var(--r); padding: 12px 14px; margin: 4px 0 14px; display: grid; gap: 8px; }
.leftover > *, .leftover li { min-width: 0; }
.leftover-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--warn); }
.leftover-head .row { margin-left: auto; flex: 0 0 auto; }
.leftover-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leftover ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.leftover li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.leftover .lo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- табло на кухню: перекидное расписание */
.kiosk { --amber: #A2650A; --ok-b: #10784F; --panel: var(--surface);
  min-height: 100vh; padding: 20px 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  background: var(--ground); font-family: var(--f-mono); }
:root[data-theme="dark"] .kiosk { --amber: #EDA52A; --ok-b: #46C98A; }
.kio-top { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.kio-clock { font-family: var(--f-mono); font-size: clamp(38px, 7vw, 78px); font-weight: 700; line-height: 1; color: var(--amber); letter-spacing: 1px; }
.kio-date { font-family: var(--f-body); font-size: clamp(15px, 2vw, 22px); color: var(--ink-2); }
.kio-exit { margin-left: auto; align-self: center; }
.kio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; align-items: start; }
.kio-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; border-top: 4px solid var(--mc); }
.kio-head { display: flex; align-items: center; gap: 9px; font-family: var(--f-body); font-size: clamp(15px, 1.6vw, 21px); font-weight: 700; margin-bottom: 10px; }
.kio-count { margin-left: auto; font-size: 13px; color: var(--ink-3); font-weight: 400; }
.kio-list { list-style: none; margin: 0; padding: 0; display: grid; }
.kio-item { display: flex; align-items: center; gap: 12px; font-size: clamp(14px, 1.5vw, 19px); padding: 9px 0; border-bottom: 1px solid var(--line); }
.kio-item:last-child { border-bottom: 0; }
.kio-time { font-variant-numeric: tabular-nums; color: var(--ink-3); min-width: 64px; }
.kio-name { flex: 1; font-family: var(--f-body); }
.kio-item.is-done { opacity: .45; }
.kio-item.is-done .kio-name { text-decoration: line-through; }
.kio-item.is-next { box-shadow: inset 3px 0 0 var(--amber); padding-left: 10px; }
.kio-tick { color: var(--ok-b); }
.kio-empty { color: var(--ink-3); font-family: var(--f-body); font-size: 15px; }
.kio-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 12px 14px; font-family: var(--f-body); font-size: clamp(14px, 1.4vw, 18px); }

/* ---------- строка под днём: загрузка и перенос остатка */
.daybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 13px; color: var(--ink-2); }
.daybar-load { display: inline-flex; align-items: center; gap: 6px; }
.daybar .btn { margin-left: auto; }

/* ---------- палец: на телефоне мелкие кнопки подрастают */
@media (max-width: 760px) {
  .side-member, .chat-person { min-height: 42px; }
  .kb-btn { min-height: 40px; }
  .lang button, .link-btn { min-height: 38px; }
  .mbar { height: 40px; }
  .seg button, .seg label, .sw button, .shop-check, .sch-add { min-height: 38px; }
  .shop-check { width: 38px; }
  .quick { min-height: 38px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* ---------- пустой раздел: значок, что это, одно действие */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); display: grid; justify-items: center; gap: 10px; }
.empty-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px dashed var(--line); color: var(--ink-3); }
.empty-ic .ic { width: 24px; height: 24px; }
.empty-title { margin: 0; font-family: var(--f-display); font-size: 19px; letter-spacing: .02em; color: var(--ink-2); }
.empty-hint { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.5; }
.empty .btn { margin-top: 4px; }

/* подпись раздела в шапке */
.top-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 760px) { .top-sub { display: none; } }

/* ---------- шапка издания: название, дата, рубрики */
.mast { position: sticky; top: 0; z-index: 5; padding: 14px 28px 0;
  background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(10px); }
.mast-top { display: flex; align-items: baseline; gap: 14px; padding-bottom: 8px; border-bottom: 3px double var(--ink-2); }
.mast-name { font-family: var(--f-display); font-size: 30px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; color: var(--ink); }
.mast-line { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mast-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; align-self: center; }
.mast-as { display: flex; align-items: center; gap: 6px; }
.mast-as .field-label { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.select.mini { height: 32px; width: auto; max-width: 200px; border-radius: 4px; font-size: 12.5px; }
.rubrics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; padding: 9px 0 0; }
.rub { font-family: var(--f-display); font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); padding: 4px 16px; position: relative; }
.rub + .rub::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: var(--line); }
.rub:first-child { padding-left: 0; }
.rub:hover { color: var(--ink); }
.rub.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.rubrics2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 8px 0 0;
  margin-top: 8px; border-top: 1px solid var(--line); }
.rub2 { font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 3px 0; }
.rub2:hover { color: var(--ink); }
.rub2.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink-3); }
.rub2 sup { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-2); margin-left: 3px; }
.mast-sec { display: flex; align-items: baseline; gap: 12px; padding: 12px 0 8px; }
.colophon { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 34px 28px 40px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

/* ---------- главная: бенто. Углы по шкале, тени нет — плитки держит линия и тон. */
.bento-hub { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s3); }
.bt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); display: grid; gap: var(--s2); align-content: start; text-align: left;
  transition: border-color .16s var(--ease), background .16s var(--ease); }
.bt:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, var(--line)); }
.bt-k { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.bt-day { grid-row: span 2; }
.bt-daytop { display: flex; gap: var(--s4); align-items: flex-start; }
.bt-date { font-family: var(--f-display); font-size: 74px; line-height: .76; font-weight: 700;
  color: var(--accent); letter-spacing: -.035em; }
.bt-daymain { display: grid; gap: 4px; min-width: 0; }
.bt-head { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1.05; }
.bt-lead { font-style: normal; font-family: var(--f-serif); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.bt-rows { display: grid; margin-top: var(--s1); }
.bt-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 4px 8px 0; border-bottom: 1px dotted var(--line); border-radius: var(--r-xs);
  transition: background .16s var(--ease), padding-left .16s var(--ease); }
.bt-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); padding-left: var(--s1); }
.bt-bar { width: 3px; height: 18px; border-radius: 2px; background: var(--mc); flex: none; }
.bt-time { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-sm); color: var(--ink-3); min-width: 5.4em; }
.bt-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); }
.bt-ok { color: var(--ok); display: inline-flex; }
.bt-row.is-done .bt-what { color: var(--ink-3); text-decoration: line-through; }
.bt-more { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: var(--s2);
  font-size: var(--t-sm); color: var(--ink-2); }
.bt:hover .bt-more { color: var(--ink); }
.bt-big { font-family: var(--f-display); font-size: 40px; line-height: 1; font-weight: 700; }
.bt em { font-style: normal; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.35; }
.bt-tomline { font-family: var(--f-serif); font-size: var(--t-md); line-height: 1.35; font-weight: 400; }
.bt-tom { grid-column: 2 / -1; }
.bt-feed { grid-column: 1 / -1; }
.bt-news { display: flex; align-items: center; gap: var(--s2); padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: var(--t-sm); }
.bt-news:last-child { border-bottom: 0; }
.bt-news-t { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-news time { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-xs); color: var(--ink-3); }

.bt-group { margin-top: var(--s6); }
.bt-gk { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.bt-gk::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--s3); }
.bt-sec { min-height: 82px; }
.bt-name { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: var(--t-lg);
  font-weight: 700; letter-spacing: .005em; }
.bt-name .ic { color: var(--ink-3); }
.bt-name b { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-xs); color: var(--ink-2); margin-left: auto; }
.bt-sub { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.4; }
.bt-sec:hover .bt-name { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .view-hub .bento-hub > * { animation: fr-rise .45s var(--ease) backwards; }
  .view-hub .bento-hub > *:nth-child(2) { animation-delay: .05s; }
  .view-hub .bento-hub > *:nth-child(3) { animation-delay: .1s; }
  .view-hub .bento-hub > *:nth-child(4) { animation-delay: .15s; }
}
@keyframes fr-rise { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1100px) {
  .bento-hub { grid-template-columns: 1.4fr 1fr; }
  .bt-tom, .bt-feed { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .bento-hub { grid-template-columns: 1fr; gap: var(--s2); }
  .bt-day { grid-row: auto; }
  .bt-date { font-size: 56px; }
  .bt-head { font-size: var(--t-xl); }
  .bt-time { min-width: 5em; }
  .bt-grid { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .bt-sec { min-height: 0; padding: var(--s3); }
  .bt-name { font-size: var(--t-md); }
  .bt-group { margin-top: var(--s5); }
}

/* ---------- десктоп: шире поля, спокойнее панели */
@media (min-width: 1181px) {
  .view { padding: 18px 40px 40px; max-width: 1060px; }
  .view-hub { max-width: 1340px; }
  .mast { padding: 18px 40px 0; }
  .banners { padding: 0 40px; }
  .colophon { margin: 40px 40px 44px; }
  .mast-name { font-size: 34px; }
  .top-title { font-size: 30px; }
}

/* ---------- панель бота: тише тени, спокойнее кнопки */
.bubble { box-shadow: none; border: 1px solid var(--line); }
.msg.out .bubble { border-color: transparent; }
.chat-day { box-shadow: none; border: 1px solid var(--line); }
.kb-btn { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; }
.kb-btn:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (min-width: 1181px) {
  .bot-head { padding: 14px 16px; }
  .bot-quick { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
  .chat { padding: 14px 14px 6px; }
  .bot-input { padding: 10px 14px 14px; }
  .bot-sim { padding: 10px 14px 0; }
}

.colo-tools { display: flex; align-items: center; gap: 12px; }
.colo-tools .seg { background: transparent; }

/* ---------- день как главная: дела слева, «рядом» справа */
.day-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.day-col { min-width: 0; }
.day-aside { display: grid; gap: var(--s4); align-content: start; }
.ds-block { display: grid; gap: 2px; text-align: left; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.ds-k { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s2); }
.ds-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; width: 100%; text-align: left;
  padding: 8px 4px 8px 0; border-radius: var(--r-xs); transition: background .16s var(--ease), padding-left .16s var(--ease); }
.ds-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); padding-left: var(--s1); }
.ds-name { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; }
.ds-name .ic { color: var(--ink-3); }
.ds-n { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-2); }
.ds-t { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--ink-3); }
.ds-tom b { font-family: var(--f-serif); font-size: var(--t-md); font-weight: 400; line-height: 1.35; }
.ds-tom em { font-style: normal; font-size: var(--t-sm); color: var(--ink-3); }
.ds-tom:hover .ds-k { color: var(--ink-2); }
.day-aside .bt-news { padding: 6px 0; }
@media (min-width: 1100px) {
  .day-wrap { grid-template-columns: minmax(0, 1fr) 280px; }
  .day-aside { border-left: 1px solid var(--line); padding-left: var(--s5); }
}
@media (max-width: 1099px) {
  .day-aside { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s2); }
}

/* ---------- день: шапка компактнее, содержимое выше */
/* На дне заголовок не нужен глазам: рубрика подсвечена, дата стоит в шапке и на листе.
   Для читалок с экрана он остаётся. */
.mast-sec.is-quiet { padding: 0; }
.mast-sec.is-quiet .top-title { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.view-day .day-head { gap: var(--s5); padding: 2px 0 var(--s4); align-items: center; }
.view-day .sheet-stack { width: 132px; }
.view-day .sheet-num { font-size: 68px; }
.view-day .sheet-binding { height: 18px; }
.view-day .sheet-month { font-size: 9.5px; margin-top: 7px; }
.view-day .sheet-wd { font-size: 12px; }
.view-day .day-side { gap: var(--s3); }
.view-day .score-num { font-size: 38px; }
.view-day .score-num small { font-size: 21px; }
.view-day .chips { padding: 0 0 var(--s2); }
.view-day .group-title { margin: var(--s4) 0 var(--s1); }
.view-day .task { padding-top: 9px; padding-bottom: 9px; }
.view-day .tasklist { gap: 2px; }
.view-day .daybar { margin-bottom: var(--s2); }
.view-day .empty { padding: 28px 20px; }
@media (min-width: 1100px) {
  .day-aside { position: sticky; top: calc(var(--s8) + var(--s5)); }
}

/* ---------- меню на телефоне: та же газета, только вертикально */
.side { gap: 0; padding: 0; }
.side-mast { display: grid; gap: 2px; padding: 16px 16px 10px; border-bottom: 2px solid var(--ink); }
.side-name { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.side-line { font-size: 11.5px; color: var(--ink-3); }
.side-people { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.side-face { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 4px 2px; border-radius: var(--r-md);
  font-size: 11px; color: var(--ink-2); }
.side-face.on { background: var(--surface-2); color: var(--ink); }
.side-nav { flex: 1; overflow-y: auto; padding: 4px 16px 10px; }
.side-g + .side-g { margin-top: var(--s4); }
.side-gk { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 10px; margin: var(--s3) 0 2px; }
.side-gk::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.side .nav-item { display: flex; align-items: baseline; gap: 10px; width: 100%; height: auto; padding: 9px 0;
  border-radius: 0; border-bottom: 1px dotted var(--line); background: none; color: var(--ink); font-weight: 400; }
.side .nav-item.on { background: none; color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
.side-i-name { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: .005em; }
.side-i-state { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.side-i-state em { font-style: normal; font-family: var(--f-body); color: var(--ink-3); }
.side-foot { margin-top: 0; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.side-foot .field-label { font-size: 11px; }
.side-foot .select { height: 36px; }
.side-foot .row { justify-content: space-between; }
.side-foot .link-btn { padding: 0; }

/* ---------- телефон: те же два яруса рубрик, что на десктопе */
@media (max-width: 860px) {
  .rubrics, .rubrics2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rubrics::-webkit-scrollbar, .rubrics2::-webkit-scrollbar { display: none; }
  .rubrics { gap: 0 2px; padding: 6px 0 0; }
  .rub { font-size: 15px; padding: 5px 12px; }
  .rub:first-child { padding-left: 0; }
  .rubrics2 { gap: 0 16px; padding: 7px 0 0; margin-top: 7px; }
  .rub2 { font-size: 13.5px; white-space: nowrap; }
  .mast-me { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
  .side { width: min(300px, 86vw); }
  .side-body { padding: 14px 16px; display: grid; gap: 8px; }
  .side-body .side-gk { margin-top: 10px; }
  .side-people { border-bottom: 0; padding: 4px 0; }
  .side-foot { margin-top: auto; }
}

/* шапка на телефоне: название и дата в две строки, инструменты справа */
@media (max-width: 860px) {
  .mast-top { flex-wrap: wrap; align-items: center; row-gap: 2px; gap: 10px; }
  .mast-name { font-size: 22px; }
  .mast-line { order: 3; width: 100%; font-size: 11px; white-space: normal; }
  .mast-tools { margin-left: auto; gap: 4px; }
}

/* шапка телефона должна умещаться в одну строку: имя мельче, кнопка бота не дублирует нижнюю вкладку */
@media (max-width: 860px) {
  .mast { padding: 10px 16px 0; }
  .mast-name { font-size: 18px; letter-spacing: .1em; }
  .mast-tools .bot-toggle { display: none; }
  .mast-tools .icon-btn { width: 36px; height: 36px; }
  .mast-tools .btn.primary { min-height: 36px; padding: 0 12px; }
  .mast-top { padding-bottom: 6px; }
}

/* на телефоне шапка уезжает при прокрутке — экран отдан делам, навигация внизу и по возврату вверх */
@media (max-width: 860px) { .mast { position: static; } }

/* ---------- телефон: всё, до чего дотрагиваются пальцем, не мельче 38 px */
@media (max-width: 760px) {
  .icon-btn.subtle { width: 38px; height: 38px; }
  .view .select, .view select, .view .input, .view input[type="text"], .view input[type="number"],
  .view input[type="time"], .view input[type="date"] { min-height: 38px; }
  .switch { min-height: 38px; }
  .switch-ui { width: 42px; height: 24px; border-radius: 12px; }
  .switch-ui::after { width: 18px; height: 18px; }
  .switch input:checked + .switch-ui::after { transform: translateX(18px); }
  .react { min-height: 34px; padding: 0 10px; border-radius: 17px; }
  .sw { width: 36px; height: 36px; }
  .mrow .icon-btn, .care-list .icon-btn { width: 38px; height: 38px; }
}

/* ---------- месяц: сетка занимала только две трети колонки — вторая была пустой */
.month { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .mc { aspect-ratio: 5 / 4; } }

/* ---------- поиск: поле должно быть видно как поле, а не как заголовок */
.search-form { background: none; box-shadow: none; padding: 0; max-width: none; }
.search-line { display: flex; align-items: flex-end; gap: var(--s3); }
.search-line .big-input { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 4px 2px; margin-left: 0; height: auto; }
.search-line .big-input:hover { border-bottom-color: var(--accent); }
.search-line .big-input:focus { box-shadow: none; border-bottom-color: var(--accent); }
@media (max-width: 760px) {
  .search-line { flex-direction: column; align-items: stretch; }
  .search-line .big-input { font-size: 24px; }
  .search-line .btn { width: 100%; }
}

/* ---------- табло на узком экране: часы, дата и кнопка не должны распирать страницу */
@media (max-width: 760px) {
  .kiosk { padding: 16px 14px; }
  .kio-top { flex-wrap: wrap; gap: 8px 12px; }
  .kio-date { width: 100%; order: 3; }
  .kio-grid { grid-template-columns: 1fr; align-content: start; }
  .kio-time { min-width: 52px; }
}


/* ---------- 9+15 · уровни поверхностей: фон → карточка → приподнятый слой */
.drawer, .modal, .toast { background: var(--surface-3); }
/* Подсказка стала светлой — значит и текст в ней должен быть тёмным.
   Базовое правило оставляло color: var(--surface): светлое по светлому. */
.toast { color: var(--ink); }
.bot { background: var(--surface-2); }
.side { background: var(--surface-3); }
.bt, .card, .task, .scard, .b-tile { background: var(--surface); }
.day-aside .ds-block { background: transparent; }
.mast { background: color-mix(in srgb, var(--ground) 92%, transparent); }

/* ---------- 1+8 · цифры одной ширины, крупное число посажено оптически */
body { font-variant-numeric: tabular-nums lining-nums; }
.bt-time, .fr-time, .ds-n, .bt-name b, .rub2 sup, .kio-time, .side-i-state,
.task time, .wk-time, .mc-num, .score-num, .bt-big, .sheet-num, .bt-date {
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
.sheet-num, .bt-date, .fr-num { margin-left: -.035em; }   /* левый вынос цифры к краю набора */

/* ---------- 24+25 · наведение только у кликабельного, нажатие сдвигом */
@media (hover: hover) {
  .bt:hover, .task:hover, .ca-row:hover, .fr-brief:hover, .scard:hover {
    transform: translateY(-1px); transition: transform .12s var(--ease), border-color .12s var(--ease);
  }
}
.bt:active, .task:active, .ca-row:active, .fr-brief:active { transform: translateY(1px); }
.bt, .task, .ca-row, .fr-brief, .scard { transition: transform .12s var(--ease), border-color .16s var(--ease), background .16s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .bt:hover, .task:hover, .ca-row:hover, .fr-brief:hover, .scard:hover,
  .bt:active, .task:active, .ca-row:active, .fr-brief:active { transform: none; }
}

/* значки Phosphor нарисованы заливкой — задаём им один оптический размер */
.ic { width: 20px; height: 20px; flex: none; }
.ic.tiny { width: 15px; height: 15px; }
.btn .ic { width: 17px; height: 17px; }

/* ---------- дорогие мелочи: второй тон, водяной знак, зерно, полоса прокрутки */

/* второй тон в одной строке: главное чернилами, остальное шёпотом */
.mast-line b { font-weight: 600; color: var(--ink-2); }
.mast-free { color: var(--ink-3); }
@media (max-width: 760px) { .mast-date { display: none; } }

/* зерно и в тёмной теме: плоский цвет выглядит дешевле, чем цвет с фактурой */
:root[data-theme="dark"] body {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
}

/* полоса прокрутки в тон интерфейсу */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-3) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-3) 40%, transparent); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-3) 70%, transparent); background-clip: content-box; }

/* воздух между блоками на широком экране — дорогие интерфейсы не жмутся */
@media (min-width: 1100px) {
  .view-day .day-head { padding-bottom: var(--s5); }
  .day-wrap { gap: var(--s7); }
  .day-aside { gap: var(--s5); }
}

/* ======== Отклик: появление, переходы, нажатие =========================== */
@media (prefers-reduced-motion: no-preference) {
  /* 2 · приложение проявляется один раз — при запуске, не на каждый клик */
  /* Заливка backwards, а не both: both оставляет transform на #app навсегда,
     а transform отменяет backdrop-filter у всех слоёв внутри — стекло переставало мутить. */
  #app.boot { animation: app-in .38s var(--ease) backwards; }
  @keyframes app-in { from { opacity: 0; transform: translateY(8px); } }

  /* 3 · смена раздела: подмена, а не рывок */
  .view.swap { animation: view-in .24s var(--ease) both; }
  @keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

  /* 26 · при смене дня строки проявляются лесенкой */
  .view.rows .tasklist .task { animation: row-in .32s var(--ease) both; }
  .view.rows .tasklist .task:nth-child(1) { animation-delay: .02s; }
  .view.rows .tasklist .task:nth-child(2) { animation-delay: .05s; }
  .view.rows .tasklist .task:nth-child(3) { animation-delay: .08s; }
  .view.rows .tasklist .task:nth-child(4) { animation-delay: .11s; }
  .view.rows .tasklist .task:nth-child(5) { animation-delay: .14s; }
  .view.rows .tasklist .task:nth-child(n+6) { animation-delay: .17s; }
  @keyframes row-in { from { opacity: 0; transform: translateY(7px); } }

  /* 27 · «готово»: галочка рисуется, строка гаснет */
  .task.just-done { animation: task-settle .6s var(--ease) both; }
  @keyframes task-settle {
    0% { opacity: 1; background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-color: var(--ok); }
    100% { opacity: .62; background: transparent; border-color: var(--line); }
  }
  .done-mark path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: mark-draw .42s var(--ease) .04s forwards, mark-out .3s var(--ease) .74s forwards; }
  @keyframes mark-draw { to { stroke-dashoffset: 0; } }
  @keyframes mark-out { to { opacity: 0; } }
}
.done-mark {
  position: absolute; z-index: 2; right: 10px; top: 50%; margin-top: -13px;
  width: 26px; height: 26px; color: var(--ok); pointer-events: none;
}
.done-mark svg { width: 100%; height: 100%; }

/* 25 · нажатие с пружинкой */
.btn { transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .13s cubic-bezier(.34, 1.4, .64, 1); }
.btn:active { transform: scale(.972); }
.icon-btn { transition: background .15s var(--ease), color .15s var(--ease), transform .13s cubic-bezier(.34, 1.4, .64, 1); }
.icon-btn:active { transform: scale(.92); }
.chip { transition: background .15s var(--ease), border-color .15s var(--ease), transform .13s cubic-bezier(.34, 1.4, .64, 1); }
.chip:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .chip:active { transform: none; }
}

/* 17 · у главной кнопки в темноте есть свой свет */
:root[data-theme="dark"] .btn.primary { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
:root[data-theme="dark"] .btn.primary:hover { box-shadow: 0 9px 24px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
:root[data-theme="dark"] .btn.primary:active { box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--accent) 70%, transparent); }

/* 20 · сегодняшний день подчёркнут полосой во всю ширину колонки */
.day-head { position: relative; }
.day-head:has(.sheet.is-today)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent) 92%);
}

/* 9 · подпись раздела в два тона: суть ярче, пояснение тише */
.top-sub b { color: var(--ink-2); font-weight: 600; }

/* 13 · в заголовках цифры пропорциональные, в списках — табличные */
.top-title, .mast-name, .side-name, .sheet-num, .score-num, .drawer-title, .bt-head {
  font-variant-numeric: proportional-nums lining-nums; font-feature-settings: "pnum" 1, "lnum" 1;
}

/* 7 · в пустых разделах рисунок линией, а не значок в кружке */
.empty-art { width: 116px; height: 87px; color: var(--ink-3); opacity: .5; }
.empty-art .a { stroke: var(--accent); opacity: .85; }
:root[data-theme="dark"] .empty-art { opacity: .42; }
@media (prefers-reduced-motion: no-preference) {
  .empty-art { animation: art-in .5s var(--ease) both; }
  @keyframes art-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
}
@media (max-width: 760px) { .empty-art { width: 96px; height: 72px; } }

/* 4 · отрыв листа: лист подхватывает тень, чуть уходит в перспективу и падает */
.view-day .sheet-stack .sheet { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .view.rows .sheet-stack .sheet { animation: sheet-land .42s var(--ease) both; }
  @keyframes sheet-land {
    0% { transform: translateY(-10px) rotate(.6deg); opacity: .4; }
    60% { transform: translateY(2px) rotate(0deg); opacity: 1; }
    100% { transform: none; }
  }
}
.sheet-ghost { transform-origin: 18% 0; will-change: transform, opacity; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
.tear-next { animation: tear-next .62s cubic-bezier(.45, .05, .7, .25) forwards; }
@keyframes tear-next {
  0% { transform: perspective(700px) none; opacity: 1; }
  18% { transform: perspective(700px) rotate(-3deg) rotateX(8deg) translateY(-6px); }
  45% { transform: perspective(700px) rotate(-9deg) rotateX(4deg) translate(-18px, 34px); opacity: .95; }
  100% { transform: perspective(700px) rotate(-22deg) rotateX(-6deg) translate(-88px, 210px) scale(.94); opacity: 0; }
}
@keyframes tear-prev {
  0% { transform: none; opacity: 1; }
  35% { transform: translateY(-14px) scale(.99); opacity: .8; }
  100% { transform: translateY(-54px) scale(.95); opacity: 0; }
}

/* 5 · пока грузятся данные семьи — разметка будущего экрана, а не пустой лист */
.sk {
  display: block; border-radius: var(--r-sm); min-height: 14px;
  background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--ink) 9%, var(--surface-2)) 50%, var(--surface-2) 100%);
  background-size: 300% 100%;
}
@media (prefers-reduced-motion: no-preference) { .sk { animation: sk-shine 1.4s ease-in-out infinite; } }
@keyframes sk-shine { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
.is-loading .mast-top { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 0 var(--s3); }
.sk-name { width: 108px; height: 24px; }
.sk-line { width: min(320px, 42vw); height: 13px; }
.sk-rubrics { display: flex; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.sk-rubrics .sk { width: 92px; height: 16px; }
.sk-day { display: flex; gap: var(--s5); padding: var(--s5) 0; flex-wrap: wrap; }
.sk-sheet { width: 132px; height: 168px; border-radius: var(--r-lg); flex: none; }
.sk-list { flex: 1 1 260px; display: grid; gap: var(--s2); align-content: start; }
.sk-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sk-time { width: 42px; flex: none; }
.sk-row .sk:last-child { height: 15px; }
.is-loading { opacity: .9; }
@media (max-width: 760px) {
  .sk-sheet { width: 96px; height: 124px; }
  .sk-rubrics .sk { width: 72px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1 · первый экран: один лист, одна фраза, одна кнопка */
.onb-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s5); }
.onb-demo { font-size: var(--t-sm); color: var(--ink-3); }
.onb-demo:hover { color: var(--ink); }
@media (max-width: 760px) { .onb-cta { align-items: stretch; } .onb-cta .btn { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .onb-hero .sheet-stack { animation: onb-sheet .6s var(--ease) both; }
  .onb-copy > * { animation: onb-rise .5s var(--ease) both; }
  .onb-copy > :nth-child(1) { animation-delay: .16s; }
  .onb-copy > :nth-child(2) { animation-delay: .26s; }
  .onb-copy > :nth-child(3) { animation-delay: .36s; }
  @keyframes onb-sheet { from { opacity: 0; transform: translateY(-16px) rotate(-1.5deg); } }
  @keyframes onb-rise { from { opacity: 0; transform: translateY(10px); } }
}

/* 28 · дело можно перетащить на другой день */
.wk-chip[draggable="true"] { cursor: grab; }
.wk-chip.dragging { opacity: .4; cursor: grabbing; }

/* Закрытая панель бота уезжает вправо — она не должна тянуть полосу прокрутки */
html, body { overflow-x: clip; }

/* палец: лицо в шапке телефона — такая же цель, как и соседние кнопки */
@media (max-width: 860px) {
  .mast-me { width: 38px; height: 38px; }
  .mast-name { display: inline-flex; align-items: center; min-height: 38px; }
}

/* ======== Раздел показывает содержимое, а не форму ввода ================= */
.add-open {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 42px; padding: 0 var(--s4); width: 100%;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--ink-3); font-weight: 600; font-size: var(--t-base);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.add-open:hover { color: var(--ink); border-color: var(--ink-3); border-style: solid; background: var(--surface); }
.add-open .ic { width: 16px; height: 16px; }
.add-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s3); }
.add-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.add-head b { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: .01em; }
@media (prefers-reduced-motion: no-preference) {
  .add-panel { animation: add-in .22s var(--ease) both; }
  @keyframes add-in { from { opacity: 0; transform: translateY(-4px); } }
}

/* ======== Тревога один раз ============================================== */
/* Статус — тихий текст. Цветом отмечаем только то, что требует действия. */
.pill {
  height: auto; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--ink-3); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0;
}
.pill.st-new, .pill.st-event, .pill.st-cancelled, .pill.st-waiting, .pill.st-accepted { color: var(--ink-3); border: 0; }
.pill.st-done, .pill.st-approved { color: var(--ok); border: 0; }
.pill.st-review { color: var(--ink-2); border: 0; }
.pill.st-declined, .pill.st-returned { color: var(--ink-2); border: 0; }
.pill.st-overdue { color: var(--red); font-weight: 600; border: 0; }
.pill.st-cancelled { box-shadow: none; text-decoration: line-through; }
/* Пересечение — не жёлтая плашка, а тихая пометка */
.clash { background: transparent; color: var(--ink-3); padding: 0; font-weight: 500; font-size: var(--t-xs); }
.clash-ic, .clash .ic { color: var(--warn); }
.badge { background: transparent; color: var(--ink-3); padding: 0; font-weight: 500; font-size: var(--t-xs); }
.pts-inline { color: var(--ink-3); font-weight: 600; }
.pts-inline .ic { color: var(--warn); }

/* Тревога один раз: просроченный счёт помечен полосой у края, а не рамкой вокруг */
.bill.st-late { box-shadow: var(--shadow); border-left: 3px solid var(--red); }
.bill .pill.st-overdue { color: var(--red); }
.bill-sum { font-variant-numeric: proportional-nums lining-nums; }

/* Категории — не радуга: длина полосы уже говорит о величине, цвет ей не нужен */
.bar.cat .bar-track span { background: var(--ink-3); }
.bar.cat:first-child .bar-track span { background: var(--ink-2); }
.exp-cat { color: var(--ink-3); font-weight: 500; font-size: var(--t-xs); }

/* ======== День: список, а не пятнадцать одинаковых коробок ============== */
.tasklist { gap: 0; }
.task {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: var(--s3) var(--s2) var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.task::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px; background: var(--mc);
}
.task:hover { border-color: var(--line); border-bottom-color: var(--line); background: color-mix(in srgb, var(--mc) 4%, transparent); }
.task.is-event { background: transparent; border-style: none none solid none; }
.task.st-done, .task.st-approved { background: transparent; border-color: var(--line); }
.task.st-done::before, .task.st-approved::before { opacity: .35; }
.task.st-overdue::before { background: var(--red); height: 26px; }
.tasklist .task:last-child { border-bottom: 0; }

/* Ближайшее дело — единственное, что выделено весом */
.task.is-next {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4) var(--s3) var(--s4) var(--s5); margin: var(--s3) 0;
  box-shadow: var(--shadow);
}
.task.is-next::before { left: var(--s2); height: 60%; width: 3px; }
.task.is-next .task-title { font-size: var(--t-lg); font-family: var(--f-display); letter-spacing: .01em; }
.task.is-next .task-time { font-size: var(--t-md); color: var(--ink); font-weight: 700; }

/* Прошедшее свёрнуто в одну строку */
.past-line {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  min-height: 38px; padding: 0 var(--s2); margin: var(--s2) 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; text-align: left;
  transition: color .15s var(--ease);
}
.past-line:hover { color: var(--ink); }
.past-line .ic { width: 14px; height: 14px; }
.tasklist.is-past { opacity: .72; }
.tasklist.is-past .task { padding-top: var(--s2); padding-bottom: var(--s2); }

/* Хвост со вчера: сообщение, а не тревожная плашка во весь экран */
.leftover {
  background: transparent; border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}
.leftover-head { color: var(--ink); font-size: var(--t-base); }
.leftover-head .ic { color: var(--warn); }
.leftover-head .link-btn { color: var(--ink-3); }
.leftover-head .link-btn:hover { color: var(--ink); }

/* Боковая колонка держится в поле зрения — правая половина не пустеет */
@media (min-width: 1000px) {
  .day-aside { position: sticky; top: var(--s5); }
  .day-wrap { align-items: start; }
}

/* Телефон: до списка дел не должно быть полэкрана служебного */
@media (max-width: 760px) {
  .leftover { padding: var(--s3); }
  .leftover-head { gap: var(--s2); font-size: var(--t-base); }
  .leftover-head .row { margin-left: auto; width: auto; }
  .leftover li { font-size: var(--t-sm); gap: var(--s2); }
  /* Кто сколько сделал — одной строкой, а не тремя полосами */
  .mbars { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--s2); scrollbar-width: none; }
  .mbars::-webkit-scrollbar { display: none; }
  .mbar { grid-template-columns: auto auto; height: 30px; padding: 0 var(--s2); gap: var(--s1); flex: none; }
  .mbar-name, .mbar-track { display: none; }
  .mbar-num { font-size: var(--t-sm); }
  .mbars .mbar:nth-child(n+4) { display: grid; }
}
@media (max-width: 760px) {
  /* свободное время уже стоит над списком дня — в строке издания оно лишнее */
  .mast-free { display: none; }
  .mast-line b { color: var(--ink-2); }
  /* длинный хвост со вчера сворачиваем: первые два дела и счётчик остального */
  .leftover li:nth-child(n+3) { display: none; }
}

/* ======== Витрина на входе: человек видит продукт до регистрации ========= */
.show {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s5);
  max-width: 980px; margin: var(--s7) auto 0; width: 100%;
}
.show-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.show-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.show-head b { font-family: var(--f-display); font-size: var(--t-base); letter-spacing: .02em; }
.show-head span { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.show-row {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--s1) var(--s3); padding: var(--s3) var(--s4) var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.show-rows .show-row:last-child { border-bottom: 0; }
.show-row::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: var(--mc); }
.show-time { font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); text-align: right; }
.show-title { font-weight: 600; font-size: var(--t-md); }
.show-meta { grid-column: 2; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.show-meta i, .show-meta u { font-style: normal; text-decoration: none; }
.show-meta u { color: var(--ink-3); font-weight: 600; }
.show-row.is-done .show-title { color: var(--ink-3); text-decoration: line-through; }
.show-row.is-done::before { opacity: .35; }
.show-row.is-event .show-time { color: var(--ink-3); }
.show-bot { background: var(--surface-2); }
.show-msg { margin: var(--s4); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); border-top-left-radius: var(--r-xs); }
.show-msg p { margin: 0; font-size: var(--t-base); }
.show-msg.mine { background: var(--accent-soft); border-color: transparent; margin-left: var(--s7); border-radius: var(--r-lg); border-top-right-radius: var(--r-xs); }
.show-kb { display: flex; gap: var(--s2); margin-top: var(--s3); }
.show-kb span { flex: 1; text-align: center; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .show-pane { animation: onb-rise .6s var(--ease) both; }
  .show-pane:nth-child(1) { animation-delay: .46s; }
  .show-pane:nth-child(2) { animation-delay: .56s; }
}
@media (max-width: 860px) {
  .show { grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s6); }
  .show-bot { display: none; }
}

/* Вход — одна композиция: лист, имя, кнопка и сразу под ними сам продукт */
.onb-front { min-height: 0; padding-bottom: var(--s7); }
.onb-front .onb-hero {
  flex: none; padding: clamp(24px, 5vh, 56px) 0 0; justify-content: flex-start;
  max-width: 980px; width: 100%; margin: 0 auto; align-items: center;
}
.onb-front .onb-copy { max-width: 470px; flex: 1 1 380px; }
.onb-front .brand-name.xl { font-size: clamp(48px, 6.4vw, 78px); }
.show { margin-top: clamp(28px, 5vh, 52px); }
.show-msg.mine { background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 860px) {
  .onb-front .onb-hero { padding-top: var(--s5); gap: var(--s5); }
  .onb-front .sheet-stack.hero { width: min(200px, 46vw); }
}

/* ======== Что внутри: все разделы одним разворотом ====================== */
.feat { max-width: 980px; width: 100%; margin: clamp(48px, 9vh, 96px) auto 0; }
.feat-title {
  margin: 0 0 var(--s5); font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-2xl); letter-spacing: .01em;
}
.feat-title::after { content: ""; display: block; width: 44px; height: 2px; background: var(--accent); margin-top: var(--s3); border-radius: 2px; }
.feat-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.feat-col h3 {
  margin: 0 0 var(--s3); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.feat-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.feat-col li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); align-items: start; }
.feat-col li b { font-size: var(--t-md); font-weight: 600; align-self: center; }
.feat-col li span:last-child { grid-column: 2; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; }
.feat-ic { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.feat-ic .ic { width: 16px; height: 16px; }
.feat-bot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  margin-top: var(--s6); padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
}
.feat-bot b { display: block; font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: .01em; }
.feat-bot span:last-child { font-size: var(--t-sm); color: var(--ink-3); }
.feat-ic.big { width: 44px; height: 44px; background: var(--accent-soft); color: var(--accent); }
.feat-ic.big .ic { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .feat-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .feat-bot { grid-template-columns: auto minmax(0, 1fr); text-align: left; }
  .feat-bot .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ======== Живой старт: первый день не должен быть пустым ================= */
.starter { margin: var(--s5) 0; }
.starter-head { display: grid; gap: 2px; margin-bottom: var(--s4); }
.starter-head b { font-family: var(--f-display); font-size: var(--t-xl); letter-spacing: .01em; }
.starter-head span { font-size: var(--t-sm); color: var(--ink-3); }
.starter-list { display: grid; gap: 0; }
.starter-item {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 2px var(--s3); align-items: center; text-align: left;
  padding: var(--s3) var(--s2) var(--s3) var(--s4);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  transition: background .15s var(--ease);
}
.starter-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: var(--mc); opacity: .5; }
.starter-item:hover { background: color-mix(in srgb, var(--mc) 5%, transparent); }
.starter-item:hover::before { opacity: 1; }
.starter-time { grid-row: span 2; font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); text-align: right; }
.starter-title { font-weight: 600; font-size: var(--t-md); }
.starter-who { grid-column: 2; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.starter-plus { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--line); color: var(--ink-3); }
.starter-item:hover .starter-plus { border-style: solid; border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) { .link-btn { min-width: 26px; } }


/* ======== Неделя: колонки-дни вместо таблицы =========================== */
.wk-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); align-items: start; }
.wk-col {
  min-width: 0; display: grid; gap: var(--s2); padding: var(--s2);
  border-radius: var(--r-lg); border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.wk-col.weekend { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.wk-col.today { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.wk-head { display: grid; gap: 0; justify-items: start; background: transparent; border: 0; padding: var(--s1) var(--s2); width: 100%; text-align: left; }
.wk-wd { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wk-num { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.05; }
.wk-col.today .wk-num { color: var(--accent); }
.wk-col.weekend .wk-wd { color: var(--red); }
.wk-score { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.wk-load { display: block; height: 3px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.wk-load i { position: absolute; inset: 0 auto 0 0; width: 100%; display: block; background: color-mix(in srgb, var(--ink-3) 70%, transparent); transform-origin: left; }
.wk-list { display: grid; gap: 2px; }
.wk-chip {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  align-items: start; text-align: left; padding: var(--s2) var(--s2) var(--s2) var(--s3);
  background: transparent; border: 0; border-radius: var(--r-sm); min-height: 34px;
  transition: background .14s var(--ease);
}
.wk-chip::before { content: ""; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--mc); }
.wk-chip:hover { background: color-mix(in srgb, var(--mc) 10%, transparent); }
.wk-chip .wk-time { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chip .wk-title {
  /* Переносим по словам: anywhere рвал «Проект» на «Проек/т». Длинное слово — с дефисом. */
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wk-chip.st-done, .wk-chip.st-approved { opacity: .5; }
.wk-chip.st-done .wk-title, .wk-chip.st-approved .wk-title { text-decoration: line-through; }
.wk-chip.st-overdue::before { background: var(--red); }
.wk-chip.is-event .wk-title { font-weight: 500; }
.wk-none { font-size: var(--t-xs); color: var(--ink-3); padding: var(--s2) var(--s3); }
.wk-col.drop-on { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
@media (max-width: 1000px) {
  .wk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}
@media (max-width: 620px) {
  .wk-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .wk-col { padding: var(--s2) 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .wk-head { grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--s2); }
  .wk-num { order: -1; }
  .wk-score { margin-left: auto; }
}

/* ======== Месяц: в клетке дела, а не безымянные точки ================== */
.mc {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--s1);
  padding: var(--s2); min-height: 108px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.mc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); opacity: calc(var(--heat, 0) * .055);
}
.mc.out { opacity: .45; }
.mc.today { border-color: var(--accent); }
.mc-day { display: flex; align-items: baseline; gap: var(--s2); width: 100%; background: transparent; border: 0; padding: 0; text-align: left; }
.mc-num { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; line-height: 1; }
.mc.today .mc-num { color: var(--accent); }
.mc.weekend .mc-num { color: var(--red); }
.mc-score { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.mc-list { display: grid; gap: 1px; align-content: start; min-width: 0; }
.mc-item {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 2px var(--s1) 2px var(--s3); background: transparent; border: 0; border-radius: var(--r-xs);
  font-size: var(--t-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-item::before { content: ""; position: absolute; left: 1px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--mc); }
.mc-item span { font-family: var(--f-mono); color: var(--ink-3); margin-right: 4px; }
.mc-item:hover { background: color-mix(in srgb, var(--mc) 12%, transparent); color: var(--ink); }
.mc-item.st-done, .mc-item.st-approved { opacity: .5; text-decoration: line-through; }
.mc-more { display: block; width: 100%; text-align: left; padding: 2px var(--s3); background: transparent; border: 0; font-size: var(--t-xs); color: var(--ink-3); }
.mc-more:hover { color: var(--ink); }
.mc.drop-on { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (min-width: 1100px) { .mc { aspect-ratio: auto; min-height: 124px; } }
@media (max-width: 760px) {
  .mc { min-height: 74px; padding: var(--s1); }
  .mc-item, .mc-more { display: none; }
  .mc-list::after {
    content: ""; display: block; height: 3px; border-radius: 2px; margin-top: 2px;
    background: color-mix(in srgb, var(--ink-3) 70%, transparent);
    width: calc(var(--heat, 0) * 100%);
  }
}

/* ======== Итоги: два числа крупно вместо таблицы ======================== */
.sbig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.sbig div { display: grid; gap: 0; }
.sbig b { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1; font-variant-numeric: proportional-nums; }
.sbig b small { font-size: var(--t-md); color: var(--ink-3); font-weight: 600; }
.sbig span { font-size: var(--t-xs); color: var(--ink-3); }
.sline { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.sline .bad { color: var(--red); font-weight: 600; }
.cols .col > span { background: color-mix(in srgb, var(--mc) 65%, transparent); }
.cols .col > span.none { background: var(--line); }
.rank-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.rank-rows .rank-row:last-child { border-bottom: 0; }
.rank-place { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-3); width: 1.2em; }
.rank-score { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; color: var(--ink-3); }
.rank-row.first .rank-score { color: var(--accent); }
.rank-row.first .rank-name { font-weight: 700; }

/* ======== Карточка дела: сначала дело, поля — по «Изменить» ============= */
.facts { display: grid; gap: 0; margin: var(--s4) 0 0; }
.fact { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.facts .fact:last-child { border-bottom: 0; }
.fact dt { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fact dd { margin: 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-base); color: var(--ink); }
.fact-time { font-family: var(--f-mono); font-weight: 700; }
.drawer-title { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1.12; letter-spacing: .01em; margin: 0; }


/* Пересечение и просрочка в неделе: метка, а не рамка вокруг каждой плашки */
.wk-chip.has-clash, .wk-chip.st-overdue, .wk-chip.st-declined { box-shadow: none; }
.wk-chip.has-clash::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--warn);
}
.wk-chip.st-overdue .wk-time { color: var(--red); }
.slot.has-clash { box-shadow: inset 0 0 0 1px var(--warn); }


/* ======== 9+10+11 · свет сверху, тень в два слоя, волосяной кант ======== */
:root {
  --lift: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 55%, transparent) 0%, transparent 42%);
  --edge: inset 0 1px 0 color-mix(in srgb, #FFFFFF 60%, transparent);
  --shadow: 0 1px 2px rgba(28, 26, 22, .06), 0 10px 28px -12px rgba(28, 26, 22, .18);
  --shadow-lg: 0 2px 6px rgba(28, 26, 22, .08), 0 28px 64px -24px rgba(28, 26, 22, .28);
}
:root[data-theme="dark"] {
  --lift: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 5%, transparent) 0%, transparent 46%);
  --edge: inset 0 1px 0 color-mix(in srgb, #FFFFFF 7%, transparent);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -14px rgba(0, 0, 0, .65);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .55), 0 32px 72px -26px rgba(0, 0, 0, .8);
}
.card, .bt, .scard, .b-tile, .bill, .add-panel, .show-pane, .feat-bot, .mc,
.task.is-next, .modal, .drawer, .toast, .sheet, .notice {
  background-image: var(--lift); box-shadow: var(--shadow), var(--edge);
}
.modal, .drawer { box-shadow: var(--shadow-lg), var(--edge); }
.mc { box-shadow: none; background-image: none; }
.mc.today { box-shadow: var(--shadow), var(--edge); }

/* ---------- 12 · фон слегка темнеет к краям */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 7%, transparent) 100%);
}
.app, .onb { position: relative; z-index: 1; }

/* ---------- 13 · листок календаря из бумаги, с загнутым углом */
.sheet {
  background-image:
    var(--lift),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 2%, transparent) 0 1px, transparent 1px 3px);
}
.sheet::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--ink) 9%, var(--surface)) 50%);
  border-bottom-right-radius: var(--r-lg);
}
.sheet-stack.hero .sheet::after { width: 34px; height: 34px; }

/* ---------- 14 · цветная полоса строки уходит в прозрачность */
.task::before, .starter-item::before, .show-row::before, .wk-chip::before, .mc-item::before {
  background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 25%, transparent));
}

/* ======== 15+16 · крупный момент и заголовок с указателем =============== */
.big-num {
  display: block; font-family: var(--f-display); font-weight: 700; line-height: .92;
  font-size: clamp(44px, 6vw, 72px); letter-spacing: -.02em;
  font-variant-numeric: proportional-nums lining-nums;
}
.big-num small { font-size: .38em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.big-line { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); }
.mast-sec { position: relative; }
.mast-sec:not(.is-quiet) .top-title::before {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 28px; height: 2px;
  background: var(--accent); border-radius: 2px;
}

/* ---------- 17 · короткие пояснения — засечками, курсивом */
.top-sub, .starter-head span, .feat-col li span:last-child, .show-head span,
.empty-hint, .sline, .chat-hint {
  font-family: var(--f-serif); font-style: italic; font-size: var(--t-base); letter-spacing: 0;
}
.top-sub b { font-family: var(--f-body); font-style: normal; }
.feat-col li span:last-child { font-size: var(--t-sm); }

/* ---------- 18 · разрядка заглавными только у рубрик */
.rub, .feat-col h3, .show-head span, .fact dt, .group-title, .field-label, .side-gk, .wk-wd {
  letter-spacing: .12em;
}
.ds-head, .bt-head { letter-spacing: .1em; }

/* ======== 26+28 · второй тон и тёплая темнота ========================== */
:root {
  --calm: #2A5F7D;
  --calm-soft: color-mix(in srgb, #2A5F7D 12%, transparent);
}
:root[data-theme="dark"] {
  --ground: #131211;
  --surface: #1A1917;
  --surface-2: #211F1D;
  --surface-3: #292724;
  --line: #322F2B;
  --calm: #6FB3D2;
  --calm-soft: color-mix(in srgb, #6FB3D2 14%, transparent);
}
.pill.st-review, .pill.st-accepted { color: var(--calm); }
.wk-load i { background: color-mix(in srgb, var(--calm) 70%, transparent); }
.now-line { color: var(--accent); }

/* ======== 30 · перфорация листка как подпись продукта =================== */
.perf, .section-head::after, .colophon::before {
  content: ""; display: block; height: 6px;
  background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--ink) 16%, transparent) 2px, transparent 2px);
  background-size: 12px 6px; background-repeat: repeat-x;
}
.colophon { position: relative; }
.colophon::before { position: absolute; top: 0; left: 0; right: 0; }
.feat-title::after { background: var(--accent); }
.empty::before {
  content: ""; display: block; width: 120px; height: 6px; margin-bottom: var(--s3);
  background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--ink) 14%, transparent) 2px, transparent 2px);
  background-size: 12px 6px;
}

/* ======== 8 · бот как настоящая переписка ============================== */
.chat .msg { max-width: 100%; }
.chat .bubble { max-width: 84%; width: fit-content; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.chat .msg.in .bubble { border-top-left-radius: var(--r-xs); background: var(--surface); }
.chat .msg.out .bubble { margin-left: auto; border-top-right-radius: var(--r-xs); background: var(--calm-soft); color: var(--ink); }
.chat .msg.out .bubble time { color: var(--ink-3); }
.chat .msg .kb { max-width: 84%; }
.chat .msg.urgent .bubble { box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }
.bot-sim .quick { scrollbar-width: none; }
.bot-sim .quick::-webkit-scrollbar { display: none; }


/* ======== 19 · призрак листка в перелёте =============================== */
.fly-sheet {
  position: fixed; z-index: 60; pointer-events: none; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); transform-origin: top left;
}

/* ======== 20 · карточка выезжает с пружиной, фон под ней размыт ========= */
@media (prefers-reduced-motion: no-preference) {
  .drawer { animation: drawer-in .38s cubic-bezier(.22, 1.1, .36, 1) both; }
  @keyframes drawer-in { from { transform: translateX(28px); opacity: .4; } }
  .modal { animation: modal-in .32s cubic-bezier(.22, 1.1, .36, 1) both; }
  @keyframes modal-in { from { transform: translateY(14px) scale(.985); opacity: 0; } }
  .overlay { animation: fade-in .24s var(--ease) both; }
  @keyframes fade-in { from { opacity: 0; } }
}
.overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ======== 23 · полосы и столбики отрисовываются при появлении экрана ==== */
@media (prefers-reduced-motion: no-preference) {
  .view.swap .bar-track span, .view.swap .mbar-track span, .view.swap .rank-track span,
  .view.swap .prog span, .view.swap .mc-bar span {
    animation: draw-x .55s var(--ease) both; transform-origin: left;
  }
  @keyframes draw-x { from { transform: scaleX(0); } }
  .view.swap .wk-load i { animation: draw-y .5s var(--ease) both; transform-origin: bottom; }
  .view.swap .cols .col > span { animation: draw-y .5s var(--ease) both; transform-origin: bottom; }
  @keyframes draw-y { from { transform: scaleY(0); } }
  .view.swap .wk-col { animation: row-in .34s var(--ease) both; }
  .view.swap .wk-col:nth-child(2) { animation-delay: .03s; }
  .view.swap .wk-col:nth-child(3) { animation-delay: .06s; }
  .view.swap .wk-col:nth-child(4) { animation-delay: .09s; }
  .view.swap .wk-col:nth-child(5) { animation-delay: .12s; }
  .view.swap .wk-col:nth-child(6) { animation-delay: .15s; }
  .view.swap .wk-col:nth-child(7) { animation-delay: .18s; }
}

/* ======== 25 · тот же человек подсвечен везде на экране ================= */
[data-m] { transition: background .16s var(--ease), box-shadow .16s var(--ease); }
.task.is-hl, .wk-chip.is-hl { background: color-mix(in srgb, var(--mc) 9%, transparent); }
.mbar.is-hl, .chip.is-hl { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 55%, transparent); }
.task.is-hl::before, .wk-chip.is-hl::before { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc) 25%, transparent); }

/* Цифра, которая докручивается, не должна дёргать раскладку */
.score-num i, .scard-rate i { font-style: normal; font-variant-numeric: tabular-nums; }


/* ---------- 27 · монограмма в огранке вместо кружка с буквой */
.av {
  border-radius: 34%;
  background: color-mix(in srgb, var(--mc) 18%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 65%, transparent), var(--edge);
  color: color-mix(in srgb, var(--mc) 55%, var(--ink));
  font-size: calc(var(--size) * .4); letter-spacing: .01em;
}
.av.lg { border-radius: 28%; }
.av.is-hl { box-shadow: inset 0 0 0 1.5px var(--mc), 0 0 0 3px color-mix(in srgb, var(--mc) 22%, transparent); }

/* ---------- 29 · выбор цвета семьи */
.accents { display: flex; gap: var(--s2); }
.accent-dot {
  width: 26px; height: 26px; border-radius: 34%; border: 1px solid var(--line);
  background: var(--ac); padding: 0; transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.accent-dot:hover { transform: translateY(-1px); }
.accent-dot.on { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ac); }
@media (max-width: 760px) {
  /* в месяце на телефоне нажимается вся клетка, а не строка с числом */
  .mc-day { position: absolute; inset: 0; align-items: flex-start; padding: var(--s1); z-index: 1; }
  .mc-list { position: relative; z-index: 0; align-self: end; }
}

/* Перфорация после заголовка раздела: подпись продукта, а не просто линия */
.section-head { align-items: center; gap: var(--s3); }
.section-head::after { flex: 1; min-width: 40px; align-self: center; }
/* Просроченный счёт помечен полосой — текст рядом может быть спокойным */
.bill .pill.st-overdue { color: var(--ink-2); font-weight: 500; }


/* ======================================================================
   Масштаб: дорого выглядит то, у чего есть иерархия размеров
   ====================================================================== */
:root {
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 16px;
  --t-lg: 19px; --t-xl: 24px; --t-2xl: 32px; --t-3xl: 44px;
  --r-xl: 20px; --r-lg: 16px; --r-md: 11px; --r-sm: 8px; --r-xs: 5px;
}
body { font-size: var(--t-base); }

/* 1+2 · строки дня крупнее и просторнее */
.task { padding: var(--s3) var(--s2) var(--s3) var(--s5); min-height: 56px; align-items: center; }
.task-title { font-size: var(--t-md); }
.task-meta { font-size: var(--t-sm); margin-top: var(--s1); gap: var(--s1) var(--s3); }
.task-time { font-size: var(--t-base); }
.task-time small { font-size: var(--t-xs); }
.task::before { height: 24px; width: 4px; left: var(--s1); }

/* 3 · колонка дня не растягивается на всю ширину экрана */
@media (min-width: 1000px) {
  .day-wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); }
  .day-col { max-width: 760px; }
}
@media (min-width: 1500px) { .app { --pad: var(--s8); } }

/* ======================================================================
   6+7+8 · цвет человека работает в полную силу
   ====================================================================== */
.av {
  /* Цвет человека в полную силу, но чуть глубже: белая буква на нём должна читаться. */
  background: color-mix(in srgb, var(--mc) 76%, #000000); color: #FFFFFF;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 35%, transparent), 0 1px 2px rgba(0, 0, 0, .25);
  font-weight: 700;
}
.task .task-time { color: color-mix(in srgb, var(--mc) 72%, var(--ink)); font-weight: 700; }
.task.st-done .task-time, .task.st-approved .task-time { color: var(--ink-3); }
.task:hover { background: color-mix(in srgb, var(--mc) 6%, transparent); }
.tasklist .task { background: color-mix(in srgb, var(--mc) 2.5%, transparent); }
.tasklist.is-past .task { background: transparent; }

/* 9 · «сегодня» — плашка, а не текст */
.btn.ghost.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost.is-on:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* ======================================================================
   11+15 · герой дня
   ====================================================================== */
.hero {
  position: relative; display: grid; gap: var(--s3); margin: var(--s5) 0 var(--s4);
  padding: var(--s5); border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mc) 16%, transparent), transparent 62%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--mc) 26%, var(--line));
  box-shadow: var(--shadow), var(--edge);
}
.hero-k {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mc) 65%, var(--ink-3));
}
.hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); align-items: center; }
.hero-time {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: .95;
  letter-spacing: -.02em; color: var(--ink); display: grid;
}
.hero-time small { font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.hero-body { display: grid; gap: var(--s2); min-width: 0; }
.hero-title {
  background: transparent; border: 0; padding: 0; text-align: left;
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.15;
  letter-spacing: .01em; color: var(--ink);
}
.hero-title:hover { color: color-mix(in srgb, var(--mc) 55%, var(--ink)); }
.hero-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.hero-meta .av { --size: 34px; }
.hero-act .btn { min-height: 46px; padding: 0 var(--s5); font-size: var(--t-md); border-radius: var(--r-md); }
/* 15 · всё, что после героя, — тише */
.tasklist.is-rest { opacity: .92; }
.tasklist.is-rest .task-title { font-weight: 600; }
@media (max-width: 760px) {
  .hero { padding: var(--s4); margin: var(--s4) 0 var(--s3); }
  .hero-main { grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
  .hero-time { font-size: var(--t-2xl); }
  .hero-title { font-size: var(--t-lg); }
  .hero-act { grid-column: 1 / -1; }
  .hero-act .btn { width: 100%; }
}

/* ======================================================================
   12 · кольцо прогресса
   ====================================================================== */
.day-head { align-items: center; }
.ring { position: relative; width: 78px; height: 78px; flex: none; margin-left: auto; display: grid; place-items: center; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring-bg { stroke: var(--line); }
.ring-on { stroke: var(--accent); transition: stroke-dashoffset .6s var(--ease); }
.ring-num {
  position: absolute; font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  display: flex; align-items: baseline; gap: 1px;
}
.ring-num small { font-size: var(--t-xs); color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .view.swap .ring-on { animation: ring-draw .8s var(--ease) both; }
  @keyframes ring-draw { from { stroke-dashoffset: 163; } }
}

/* 5 · дата словами крупно, 14 · сводка одной фразой */
.day-date { margin: 0; font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1.02; letter-spacing: .005em; }
.day-date span {
  display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: var(--t-md); color: var(--ink-3); letter-spacing: .01em; margin-top: 4px;
}
.day-sum { margin: var(--s2) 0 0; font-family: var(--f-serif); font-style: italic; font-size: var(--t-md); color: var(--ink-2); }

/* ======================================================================
   13 · день как лента времени: ось слева с точками
   ====================================================================== */
.tasklist.axis { position: relative; padding-left: var(--s6); }
.tasklist.axis::before {
  content: ""; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.tasklist.axis .task::after {
  content: ""; position: absolute; left: -28px; top: 50%; margin-top: -4px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--mc);
}
.tasklist.axis .task.st-done::after, .tasklist.axis .task.st-approved::after { background: var(--mc); box-shadow: none; opacity: .5; }
.tasklist.axis .task::before { display: none; }
@media (max-width: 620px) { .tasklist.axis { padding-left: var(--s5); } .tasklist.axis::before { left: 9px; } .tasklist.axis .task::after { left: -24px; } }

/* ======================================================================
   16+17+18 · поверхности: карточки вместо строк
   ====================================================================== */
.card, .bt, .scard, .b-tile, .bill, .add-panel, .show-pane, .feat-bot, .modal, .drawer, .toast { border-radius: var(--r-xl); }
.day-aside { gap: var(--s3); }
.ds-block {
  border-bottom: 0; padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
}
.ds-k { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
.ds-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.day-aside, .day-aside > *, .ds-block > *, .ds-tiles > *, .ds-tile > *,
.card > *, .cards > *,
.sch-col, .sch-col > *, .menu-day, .menu-day > *, .menu-slot > *, .mc-list > *,
.pocket, .pocket > * { min-width: 0; }
.sch-head, .menu-head { flex-wrap: wrap; }
.sch-head > *, .menu-head > * { min-width: 0; }
.ds-tile .ds-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ds-tile {
  display: grid; gap: 1px; padding: var(--s3); text-align: left;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-md);
  transition: border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.ds-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); }
.ds-ic { color: var(--ink-3); }
.ds-tile .ds-n { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.05; }
.ds-tile .ds-name { font-size: var(--t-sm); font-weight: 600; }
.ds-tile .ds-t { font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tom b { font-size: var(--t-md); }

/* 19 · хвост со вчера — полоса, а не блок */
.leftover { border-radius: var(--r-md); padding: var(--s2) var(--s4); }
.leftover-head { font-size: var(--t-sm); }
.leftover ul { font-size: var(--t-sm); }

/* 20 · панель бота — плавающая карточка */
@media (min-width: 900px) {
  .bot { border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); }
}

/* ======================================================================
   4 · рубрики в один ряд
   ====================================================================== */
.rubrics {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2);
}
.rubrics::-webkit-scrollbar { display: none; }
.rub-group { display: flex; gap: var(--s2); flex: none; }
.rub-sep { width: 1px; height: 18px; background: var(--line); flex: none; }
.rub-list { display: flex; gap: var(--s3); flex: none; }
.rubrics2 { display: none; }
.rub { font-size: var(--t-xs); }
.rub2 { font-size: var(--t-sm); }

/* ======================================================================
   21+22 · волна при появлении, шапка сжимается при прокрутке
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .view.swap > *, .view.swap > .day-wrap > .day-col > * { animation: wave-in .42s var(--ease) both; }
  .view.swap > .day-wrap > .day-col > :nth-child(1) { animation-delay: .02s; }
  .view.swap > .day-wrap > .day-col > :nth-child(2) { animation-delay: .06s; }
  .view.swap > .day-wrap > .day-col > :nth-child(3) { animation-delay: .1s; }
  .view.swap > .day-wrap > .day-col > :nth-child(4) { animation-delay: .14s; }
  .view.swap > .day-wrap > .day-col > :nth-child(n+5) { animation-delay: .18s; }
  @keyframes wave-in { from { opacity: 0; transform: translateY(12px); } }
}
.is-scrolled .sheet-stack { width: 84px; transition: width .28s var(--ease); }
.is-scrolled .day-date { font-size: var(--t-xl); transition: font-size .28s var(--ease); }
.is-scrolled .day-date span, .is-scrolled .ring { display: none; }
.sheet-stack, .day-date { transition: width .28s var(--ease), font-size .28s var(--ease); }

/* 23 · наведение поднимает строку */
@media (hover: hover) {
  .task:hover { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); border-radius: var(--r-md); }
}

/* 25 · смена дня — сдвиг всего списка */
@media (prefers-reduced-motion: no-preference) {
  .view.rows.to-next .tasklist, .view.rows.to-next .hero { animation: slide-next .34s var(--ease) both; }
  .view.rows.to-prev .tasklist, .view.rows.to-prev .hero { animation: slide-prev .34s var(--ease) both; }
  @keyframes slide-next { from { opacity: 0; transform: translateX(26px); } }
  @keyframes slide-prev { from { opacity: 0; transform: translateX(-26px); } }
}

/* ======================================================================
   27 · командная строка
   ====================================================================== */
.palette {
  position: fixed; z-index: 70; left: 50%; top: 12vh; transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px)); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--edge); overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .palette { animation: pal-in .26s cubic-bezier(.22, 1.1, .36, 1) both; }
  @keyframes pal-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.98); } }
}
.pal-input { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.pal-input .ic { color: var(--ink-3); }
.pal-input .input { border: 0; background: transparent; font-size: var(--t-lg); padding: 0; flex: 1; min-height: 32px; }
.pal-input .input:focus { outline: none; box-shadow: none; }
.pal-input kbd {
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 2px 6px;
}
.pal-rows { max-height: min(56vh, 460px); overflow: auto; padding: var(--s2); }
.pal-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s3);
  width: 100%; text-align: left; padding: var(--s3); border: 0; border-radius: var(--r-md);
  background: transparent; transition: background .12s var(--ease);
}
.pal-row:hover, .pal-row:focus-visible { background: var(--surface-2); }
.pal-row b { font-size: var(--t-md); font-weight: 600; }
.pal-row span:last-child { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-ic { color: var(--ink-3); display: flex; }
.pal-none { padding: var(--s5); text-align: center; color: var(--ink-3); margin: 0; }

/* ======================================================================
   28+29+30 · свет по краю, свои подсказки, колонтитул
   ====================================================================== */
:root[data-theme="dark"] body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 100% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.colo-no { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: var(--t-xs); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .14s var(--ease), transform .14s var(--ease); box-shadow: var(--shadow); z-index: 30;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 24 · «готово»: заливка пробегает по строке слева направо */
.done-wash {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 26%, transparent), color-mix(in srgb, var(--ok) 6%, transparent));
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .done-wash { animation: wash .7s var(--ease) both; }
  @keyframes wash {
    0% { transform: scaleX(0); opacity: 1; }
    55% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }
}


/* 26 · сцена пустого дня крупнее обычного рисунка */
.empty-art { width: 150px; height: 112px; }
@media (max-width: 760px) { .empty-art { width: 116px; height: 87px; } }

/* Телефон: шапка дня собирается в три ряда, а не давит колонки друг на друга */
@media (max-width: 760px) {
  .day-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nav nav nav" "sheet date ring";
    gap: var(--s2) var(--s3); align-items: center; padding-bottom: var(--s3);
  }
  .day-side { display: contents; }
  .day-nav { grid-area: nav; justify-content: flex-start; }
  .day-head .sheet-stack { grid-area: sheet; width: 88px; }
  .day-date { grid-area: date; font-size: var(--t-lg); }
  .day-date span { font-size: var(--t-sm); }
  .ring { grid-area: ring; width: 56px; height: 56px; margin: 0; }
  .ring circle { stroke-width: 5; }
  .ring-num { font-size: var(--t-base); }

}

/* На телефоне рубрики остаются наверху: разделы должны быть видны,
   а не найдены. Два яруса — группы и разделы открытой группы. */
@media (max-width: 760px) {
  .mast-sec { padding-top: var(--s2); }
  .rubrics { padding-bottom: 0; }
  .rub { font-size: 13px; letter-spacing: .08em; padding: 4px 0; min-height: 28px; display: inline-flex; align-items: center; }
  .rub2 { font-size: 13.5px; padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; }
  .rub-list { gap: var(--s4); }
}

/* Один ряд рубрик помещается только на широком экране.
   На планшете возвращаем два яруса: группы сверху, разделы под ними. */
@media (max-width: 900px) {
  .rubrics { flex-wrap: wrap; overflow: visible; gap: var(--s2) var(--s3); }
  .rub-group { width: 100%; }
  .rub-sep { display: none; }
  .rub-list {
    width: 100%; overflow-x: auto; scrollbar-width: none;
    padding-bottom: var(--s1);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .rub-list::-webkit-scrollbar { display: none; }
}
/* На широком экране край ряда тоже должен таять, а не обрываться */
@media (min-width: 901px) {
  .rubrics {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
}

/* Без строки загрузки кнопка «перенести остаток» не должна прижиматься к правому краю */
.daybar { justify-content: flex-start; }
.daybar .btn { margin-left: 0; }
.daybar:has(.daybar-load) .btn { margin-left: auto; }
/* Заголовок героя — полноценная цель для пальца */
.hero-title { min-height: 34px; display: flex; align-items: center; width: 100%; }

/* Время и подпись героя цветом человека: в светлой теме цвет должен быть глубже, иначе не читается */
.task .task-time { color: color-mix(in srgb, var(--mc) 52%, var(--ink)); }
.hero-k { color: color-mix(in srgb, var(--mc) 45%, var(--ink-2)); }
:root[data-theme="dark"] .task .task-time { color: color-mix(in srgb, var(--mc) 72%, var(--ink)); }
:root[data-theme="dark"] .hero-k { color: color-mix(in srgb, var(--mc) 65%, var(--ink-3)); }


/* ======================================================================
   B7 · цветное поле в верхней трети экрана
   ====================================================================== */
.app { --sec: var(--accent); position: relative; }
.canvas {
  position: fixed; top: 0; left: 0; right: 0; height: 340px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--sec) 26%, transparent), transparent 62%),
    radial-gradient(70% 100% at 88% 0%, color-mix(in srgb, var(--sec) 14%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 9%, transparent), transparent 84%);
  transition: background .4s var(--ease);
}
:root[data-theme="dark"] .canvas {
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--sec) 20%, transparent), transparent 60%),
    radial-gradient(70% 100% at 88% 0%, color-mix(in srgb, var(--sec) 11%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 7%, transparent), transparent 82%);
}
/* Холст лежит под содержимым. Позиционирование боковой панели и бота не трогаем:
   у них своё (fixed), и подмена на relative роняла раскладку телефона. */
.main { position: relative; z-index: 1; }
.mast { background: transparent; backdrop-filter: blur(6px); }
:root[data-theme="dark"] body::after { display: none; }

/* B8 · кнопка с градиентом и мягким свечением */
.btn.primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 18%, var(--accent)), var(--accent));
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn.primary:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 26px -10px color-mix(in srgb, var(--accent) 95%, transparent); }
.btn.primary:active { box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/* B9+10 · раздел красит свою шапку и плитки */
.mast-sec:not(.is-quiet) .top-title::before { background: var(--sec); }
.rub2.on { color: color-mix(in srgb, var(--sec) 55%, var(--ink)); border-bottom-color: var(--sec); }
.ds-tile { --sec: var(--accent); background: color-mix(in srgb, var(--sec) 10%, var(--surface)); }
.ds-tile:hover { background: color-mix(in srgb, var(--sec) 17%, var(--surface)); border-color: color-mix(in srgb, var(--sec) 45%, transparent); }
.ds-tile .ds-ic { color: color-mix(in srgb, var(--sec) 60%, var(--ink-2)); }
.ds-tile .ds-n { color: color-mix(in srgb, var(--sec) 45%, var(--ink)); }
.ring-on { stroke: var(--sec); }

/* B12 · аватары крупнее, с ореолом */
.av.lg { --size: 56px; }
.av { box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 30%, transparent), 0 0 0 3px color-mix(in srgb, var(--mc) 18%, transparent); }
.face { width: 84%; height: 84%; color: #FFFFFF; }
:root[data-theme="light"] .face, :root:not([data-theme="dark"]) .face { color: #FFFFFF; }
.av.xs .face { width: 92%; height: 92%; }

/* ======================================================================
   D19 · режим фокуса
   ====================================================================== */
.focus {
  position: fixed; inset: 0; z-index: 80; display: grid; align-content: center; justify-items: center;
  gap: var(--s6); padding: var(--s6);
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--mc) 22%, transparent), transparent 70%),
    var(--ground);
}
@media (prefers-reduced-motion: no-preference) {
  .focus { animation: focus-in .3s var(--ease) both; }
  @keyframes focus-in { from { opacity: 0; transform: scale(.985); } }
}
.focus-x { position: absolute; top: var(--s5); right: var(--s5); }
.focus-card { display: grid; justify-items: center; gap: var(--s3); text-align: center; max-width: 640px; }
.focus-k { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.focus-time {
  font-family: var(--f-display); font-size: clamp(56px, 12vw, 108px); font-weight: 700; line-height: .9;
  letter-spacing: -.03em; color: color-mix(in srgb, var(--mc) 55%, var(--ink));
}
.focus-title { margin: 0; font-family: var(--f-display); font-size: clamp(26px, 5vw, 42px); font-weight: 700; line-height: 1.1; }
.focus-who { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-md); color: var(--ink-2); }
.focus-note { margin: 0; font-family: var(--f-serif); font-style: italic; color: var(--ink-3); max-width: 46ch; }
.focus-act { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s3); }
.focus-act .btn { min-height: 52px; padding: 0 var(--s6); font-size: var(--t-md); border-radius: var(--r-lg); }
.focus-nav { display: flex; align-items: center; gap: var(--s4); }
.focus-dots { display: flex; gap: 6px; }
.focus-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.focus-dots i.on { background: var(--mc); width: 18px; border-radius: 3px; }
.focus-btn { margin-left: var(--s2); }

/* ======================================================================
   D22 · раздел поверх экрана
   ====================================================================== */
.sheet-over {
  position: fixed; z-index: 62; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(880px, 100vw); max-height: 88vh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg), var(--edge);
}
@media (prefers-reduced-motion: no-preference) {
  .sheet-over { animation: so-in .34s cubic-bezier(.22, 1.1, .36, 1) both; }
  @keyframes so-in { from { transform: translateX(-50%) translateY(36px); opacity: 0; } }
}
.so-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec, var(--accent)) 14%, transparent), transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.so-head h2 { margin: 0; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; }
.so-head p { margin: 2px 0 0; font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-3); }
.so-body { overflow: auto; padding: var(--s5); }
@media (max-width: 760px) { .sheet-over { max-height: 92vh; } .so-body { padding: var(--s4); } }

/* D24 · «ещё» под списком */
.more-line {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 40px;
  margin-top: var(--s2); padding: 0 var(--s2); background: transparent; border: 0;
  color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; text-align: left;
}
.more-line:hover { color: var(--ink); }

/* ======================================================================
   D20 · неделя лентой карточек
   ====================================================================== */
.wk-cols {
  display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4); scrollbar-width: thin;
}
.wk-col {
  flex: 0 0 clamp(210px, 22vw, 260px); scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
  padding: var(--s4); gap: var(--s3);
}
.wk-col.today { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%), var(--lift); }
.wk-col.weekend { background-color: color-mix(in srgb, var(--ink) 2%, var(--surface)); }
.wk-num { font-size: var(--t-2xl); }
.wk-list { gap: var(--s1); }
@media (max-width: 620px) {
  .wk-cols { gap: var(--s2); }
  .wk-col { flex: 0 0 86vw; border-radius: var(--r-lg); padding: var(--s3); }
}

/* D21 · месяц тепловой картой с крупными числами */
.mc { min-height: 92px; }
.mc::before { opacity: calc(var(--heat, 0) * .5); background: var(--sec, var(--accent)); }
.mc-num { font-size: var(--t-xl); }
.mc-item { font-size: 11px; }
@media (min-width: 1100px) { .mc { min-height: 112px; } .mc-num { font-size: var(--t-2xl); } }

/* ======================================================================
   E29 · микроанимации у элементов управления
   ====================================================================== */
.switch-ui, .switch-ui::after { transition: background .18s var(--ease), transform .24s cubic-bezier(.34, 1.4, .64, 1); }
.input, .select, textarea.input {
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.input:focus, .select:focus, textarea.input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec, var(--accent)) 18%, transparent);
}
.chip, .rub, .rub2, .tab { transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); }
.rub2 { position: relative; }
.rub2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px;
  background: var(--sec, var(--accent)); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.rub2.on::after { transform: scaleX(1); }
.shop-check, .chk { transition: transform .16s cubic-bezier(.34, 1.4, .64, 1), border-color .16s var(--ease); }
.shop-check:active, .chk:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .rub2::after { transition: none; }
  .shop-check:active, .chk:active { transform: none; }
}
/* Подпись героя в тёмной теме на цветной подложке — чуть светлее, чтобы читалась */
:root[data-theme="dark"] .hero-k { color: color-mix(in srgb, var(--mc) 45%, var(--ink-2)); }


/* ======================================================================
   Знак и бумага: файлы лежат в web/media, наружу не ходим
   ====================================================================== */
.mark { display: inline-block; vertical-align: -10px; margin-right: var(--s2); width: 40px; height: 40px; }
.mark.lg { width: 96px; height: 96px; vertical-align: -18px; margin-right: var(--s3); }
.mast-name { display: inline-flex; align-items: center; gap: var(--s2); }
.mast-name .mark { vertical-align: 0; margin-right: 0; }
.brand-name.xl { display: flex; align-items: center; gap: var(--s3); }
.brand-name.xl .mark { vertical-align: 0; margin-right: 0; }
@media (max-width: 760px) { .mark { width: 32px; height: 32px; } .mark.lg { width: 64px; height: 64px; } }

/* Фактура бумаги: она должна читаться как материал, а не красить экран.
   Поэтому поверх неё лежит прослойка цвета фона — сквозь неё видно только зерно.
   Первый слой в списке рисуется сверху. */
body::before {
  background-image:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 7%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--ground) 90%, transparent), color-mix(in srgb, var(--ground) 90%, transparent)),
    url("media/paper-a.jpg");
  background-size: auto, auto, 340px 340px;
  background-repeat: no-repeat, repeat, repeat;
  mix-blend-mode: normal;
  opacity: 1;
}
:root[data-paper="b"] body::before {
  background-image:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 7%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--ground) 90%, transparent), color-mix(in srgb, var(--ground) 90%, transparent)),
    url("media/paper-b.jpg");
}
:root[data-paper="off"] body::before {
  background-image: radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 7%, transparent) 100%);
}
/* В тёмной теме зерна нужно ещё меньше: иначе уголь сереет. */
:root[data-theme="dark"] body::before,
:root[data-theme="dark"][data-paper="b"] body::before {
  background-image:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 7%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--ground) 96%, transparent), color-mix(in srgb, var(--ground) 96%, transparent)),
    url("media/paper-a.jpg");
}


/* ======================================================================
   Первый экран: живой отрыв листа. Файл лежит рядом, наружу не ходим.
   ====================================================================== */
.hero-film {
  position: relative; width: min(440px, 100%); flex: 0 1 440px; aspect-ratio: 16 / 9;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-lg), var(--edge);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Вспышки в ролике ярче нашей палитры — чуть приглушаем, чтобы не спорил с интерфейсом */
  filter: saturate(.88) contrast(1.02);
}
.hero-film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ground) 55%, transparent));
}
@media (max-width: 860px) { .hero-film { width: 100%; flex: 1 1 auto; } }
/* Кому движение мешает — показываем кадр-заставку */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }


/* Одна плитка не должна занимать половину блока и оставлять дыру рядом */
.ds-tiles:has(.ds-tile:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Цветное поле сверху было в треть экрана и читалось как бурая полоса.
   Делаем его ниже и мягче: цвет должен чувствоваться, а не красить страницу. */
.canvas {
  height: 220px;
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--sec) 15%, transparent), transparent 62%),
    radial-gradient(70% 100% at 88% 0%, color-mix(in srgb, var(--sec) 8%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 5%, transparent), transparent 88%);
}
:root[data-theme="dark"] .canvas {
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--sec) 12%, transparent), transparent 60%),
    radial-gradient(70% 100% at 88% 0%, color-mix(in srgb, var(--sec) 7%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 4%, transparent), transparent 86%);
}


/* ======================================================================
   Расписание: тот же язык, что у дня и недели
   ====================================================================== */
.sch-hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  margin: var(--s4) 0; padding: var(--s5); border-radius: var(--r-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc) 14%, transparent), transparent 62%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--mc) 24%, var(--line));
  box-shadow: var(--shadow), var(--edge);
}
.sch-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s5); align-items: center; }
.sch-hero .hero-k { grid-column: 1 / -1; }
.sch-hero-time {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: .95;
  letter-spacing: -.02em; color: color-mix(in srgb, var(--mc) 52%, var(--ink));
}
:root[data-theme="dark"] .sch-hero-time { color: color-mix(in srgb, var(--mc) 72%, var(--ink)); }
.sch-hero-body { display: grid; gap: 2px; min-width: 0; }
.sch-hero-body b { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.15; }
.sch-hero-body span { font-size: var(--t-sm); color: var(--ink-3); }
.sch-hero-body.none { grid-column: 1 / -1; }
.sch-hero-side { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.sch-count { display: grid; justify-items: center; }
.sch-count b { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1; }
.sch-count small { font-size: var(--t-xs); color: var(--ink-3); }
.sch-bar-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.sch-grid { gap: var(--s3); }
.sch-col {
  gap: var(--s2); min-height: 132px; padding: var(--s3); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
}
.sch-col.today {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%), var(--lift);
}
.sch-head { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0 0 var(--s2); }
.sch-head em { color: var(--accent); }
.sch-n {
  font-style: normal; margin-left: var(--s2); font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--ink-3); letter-spacing: 0;
}
.slot {
  position: relative; display: grid; gap: 1px; text-align: left;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  background: transparent; border: 0; border-radius: var(--r-sm); box-shadow: none;
  transition: background .14s var(--ease);
}
.slot::before {
  content: ""; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 25%, transparent));
}
.slot:hover { background: color-mix(in srgb, var(--mc) 10%, transparent); box-shadow: none; }
.slot.is-event { background: transparent; }
.slot.is-event::before { background: color-mix(in srgb, var(--mc) 45%, transparent); }
.slot-time { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ink-3); }
.slot-time small { font-family: var(--f-mono); }
.slot-title { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.slot-rem { font-size: 10.5px; }
.slot.has-clash { box-shadow: none; }
.slot.has-clash::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--warn);
}
.sch-add { border-radius: var(--r-sm); }

@media (max-width: 1000px) {
  .sch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sch-grid { grid-template-columns: minmax(0, 1fr); }
  .sch-hero { padding: var(--s4); gap: var(--s3); }
  .sch-hero-main { grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); }
  .sch-hero-time { font-size: var(--t-2xl); }
  .sch-hero-body b { font-size: var(--t-lg); }
  .sch-hero-side { width: 100%; justify-content: space-between; }
}


/* ======================================================================
   Герой раздела: одна главная цифра и то, к чему она относится.
   Общий блок — им пользуются «Дом», «Запасы», «Школа», «Награды».
   ====================================================================== */
.sec-hero {
  display: grid; gap: var(--s2); margin: var(--s4) 0; padding: var(--s5);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc) 14%, transparent), transparent 62%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--mc) 24%, var(--line));
  box-shadow: var(--shadow), var(--edge);
}
.sec-hero-main { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.sec-hero-num {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: .95;
  letter-spacing: -.02em; color: color-mix(in srgb, var(--mc) 52%, var(--ink));
  display: inline-flex; align-items: baseline; gap: var(--s2);
}
:root[data-theme="dark"] .sec-hero-num { color: color-mix(in srgb, var(--mc) 72%, var(--ink)); }
.sec-hero-num small { font-family: var(--f-body); font-size: var(--t-md); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.sec-hero-body { display: grid; gap: 2px; min-width: 0; }
.sec-hero-body b { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.15; }
.sec-hero-body span { font-size: var(--t-sm); color: var(--ink-3); }
.sec-hero .btn { justify-self: start; }
@media (max-width: 620px) {
  .sec-hero { padding: var(--s4); }
  .sec-hero-num { font-size: var(--t-2xl); }
  .sec-hero-body b { font-size: var(--t-lg); }
}

/* Строки дат: плотнее и с тем же языком, что строки дня */
.date-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--s3); padding: var(--s3) var(--s2) var(--s3) var(--s4);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  position: relative;
}
.date-list .date-row:last-child { border-bottom: 0; }
.date-row::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 25%, transparent));
}
.date-when { display: grid; justify-items: center; min-width: 40px; }
.date-when b { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; line-height: 1; }
.date-when span { font-size: var(--t-xs); color: var(--ink-3); }
.date-main b { font-size: var(--t-md); }


/* ======================================================================
   1 · Боковое меню. Разделы живут слева, верх освобождается под содержимое.
   ====================================================================== */
.rail { display: none; }
@media (min-width: 1000px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
  /* Прокручивается только основная часть: без своей высоты #main рос вместе с содержимым,
     листался весь документ и меню уезжало вверх. */
  .app > .main { height: 100dvh; }
  .rail {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s4);
    position: sticky; top: 0; height: 100dvh; padding: var(--s5) var(--s4);
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter: blur(8px);
    z-index: 2;
  }
  /* Верхние полосы рубрик больше не нужны: всё в рельсе */
  .rubrics { display: none; }
  .mast-name, .mast-line { display: none; }
  /* «Вы вошли как» теперь в рельсе — в шапке это был бы второй такой же список */
  .mast-as { display: none; }
  .mast { padding-top: var(--s5); }
  .mast-top { justify-content: flex-end; }
  .side, .scrim { display: none; }
}
.rail-mark {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  background: transparent; border: 0; padding: 0; text-align: left;
}
.rail-mark .mark { margin: 0; }
.rail-mark b { display: block; font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: .06em; }
.rail-mark i { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
.rail-nav { display: grid; gap: var(--s4); align-content: start; overflow-y: auto; scrollbar-width: thin; }
.rail-group { display: grid; gap: 1px; }
.rail-k {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 var(--s2) var(--s2);
}
.rail-item {
  --sec: var(--accent);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  width: 100%; text-align: left; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); font-size: var(--t-base); font-weight: 600;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.rail-item:hover { background: color-mix(in srgb, var(--sec) 10%, transparent); color: var(--ink); }
.rail-item.on { background: color-mix(in srgb, var(--sec) 16%, transparent); color: var(--ink); }
.rail-ic { display: flex; color: color-mix(in srgb, var(--sec) 55%, var(--ink-3)); }
.rail-item.on .rail-ic { color: color-mix(in srgb, var(--sec) 75%, var(--ink)); }
.rail-n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.rail-foot { display: grid; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.rail-as { display: grid; gap: 2px; }
.rail-as .select { width: 100%; }

/* ======================================================================
   2 · Полоса крупных чисел: четыре главные цифры семьи
   ====================================================================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.kpi {
  --sec: var(--accent);
  position: relative; display: grid; gap: 2px; align-content: start; text-align: left;
  padding: var(--s4) var(--s4) var(--s5); border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sec) 45%, var(--line)); }
.kpi-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kpi-num {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: color-mix(in srgb, var(--sec) 45%, var(--ink));
}
:root[data-theme="dark"] .kpi-num { color: color-mix(in srgb, var(--sec) 70%, var(--ink)); }
.kpi-num small, .ds-n small { font-size: .42em; font-weight: 600; margin-left: .18em; color: var(--ink-3); letter-spacing: 0; }
.kpi-sub { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; color: var(--sec); opacity: .75; }
.kpi:has(.spark) { padding-bottom: 38px; }
.kpi:has(.spark) .kpi-sub { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .view.swap .spark polyline { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw-line .9s var(--ease) .1s forwards; }
  @keyframes draw-line { to { stroke-dashoffset: 0; } }
}
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kpi { padding: var(--s3) var(--s3) var(--s4); }
  .kpi:has(.spark) { padding-bottom: 34px; }
}

/* 10 · Скелет повторяет новую раскладку: рельс, полоса чисел, строки */
.is-loading .rail { display: grid; gap: var(--s5); align-content: start; }
.sk-rail-mark { display: flex; align-items: center; gap: var(--s3); }
.sk-rail-mark .sk-name { width: 92px; height: 16px; }
.sk-rail-nav { display: grid; gap: var(--s3); }
.sk-rail-nav .sk { height: 14px; }
.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.sk-kpi { height: 104px; border-radius: var(--r-xl); }

/* 5 · Лента идёт по оси: видно, что это поток, а не три строки */
.ds-block .axis-row { position: relative; padding-left: var(--s5); }
.ds-block:has(.axis-row) { position: relative; }
.ds-block .axis-row::before {
  content: ""; position: absolute; left: 7px; top: -6px; bottom: -6px; width: 1px;
  background: var(--line);
}
.ds-block .axis-row:first-of-type::before { top: 50%; }
.ds-block .axis-row:last-of-type::before { bottom: 50%; }
.ds-block .axis-row::after {
  content: ""; position: absolute; left: 4px; top: 50%; margin-top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mc);
  box-shadow: 0 0 0 2px var(--surface);
}

/* 7 · Зачёркивание рисуется, а не появляется */
.task .task-title { position: relative; }
.task.st-done .task-title, .task.st-approved .task-title { text-decoration: none; }
.task.st-done .task-title::after, .task.st-approved .task-title::after {
  content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px;
  background: currentColor; border-radius: 2px; transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .task.just-done .task-title::after { animation: strike .34s var(--ease) .12s both; }
  @keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ======================================================================
   3 · Площадной график недели и 6 · карточка человека
   ====================================================================== */
.chart-card {
  margin: var(--s4) 0; padding: var(--s5) var(--s5) var(--s3); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
}
.chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.chart-num { display: block; font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1; margin-top: 2px; }
.chart-num small { font-size: var(--t-md); color: var(--ink-3); font-weight: 600; }
.chart-legend { display: flex; gap: var(--s4); font-size: var(--t-xs); color: var(--ink-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.chart-legend span::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--line); }
.chart-legend .lg-done::before { background: var(--accent); }
.chart-legend .lg-all::before { background: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.chart { display: block; width: 100%; height: 132px; margin-top: var(--s3); }
.ch-fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.ch-all { stroke: color-mix(in srgb, var(--ink-3) 70%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ch-done { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart-x { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); padding: var(--s2) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .view.swap .ch-done, .view.swap .ch-all { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw-line .9s var(--ease) .15s forwards; }
  .view.swap .ch-fill { animation: fade-in .7s var(--ease) .3s both; }
}
.scard-top { align-items: center; gap: var(--s3); }
.scard-who { display: grid; gap: 1px; min-width: 0; }
.scard-state { font-size: var(--t-xs); color: var(--ink-3); }
.scard-state.is-bad { color: var(--red); }
.scard-state.is-ok { color: var(--ok); }

/* 4 · Плитка недели под днём */
.wstrip {
  margin: var(--s5) 0 var(--s4); padding: var(--s4); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--edge); background-image: var(--lift);
}
.wstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.wstrip-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.wstrip-day {
  display: grid; justify-items: center; gap: 2px; padding: var(--s2) 0 var(--s3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.wstrip-day:hover { background: var(--surface-2); }
.wstrip-day.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ws-wd { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ws-num { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; line-height: 1; }
.wstrip-day.today .ws-num { color: var(--accent); }
.ws-bar { display: flex; align-items: flex-end; width: 100%; max-width: 26px; height: 26px; }
.ws-bar i { display: block; width: 100%; border-radius: 3px; background: color-mix(in srgb, var(--calm) 60%, transparent); min-height: 2px; }
.wstrip-day.today .ws-bar i { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ws-n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 620px) { .wstrip { padding: var(--s3); } .ws-bar { height: 18px; } }

/* 8 · Месяц-планер: две страницы рядом на широком экране */
.month-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.month-k { margin: 0 0 var(--s3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.month-next { display: none; }
@media (min-width: 1240px) {
  .month-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .month-next { display: block; }
  .month-next .mc { min-height: 92px; }
  .month-next .mc-num { font-size: var(--t-lg); }
}

/* 9 · Новая задача окошком у кнопки, а не окном во весь экран */
@media (min-width: 1000px) {
  .modal.is-pop {
    left: auto; right: var(--s5); top: 76px; transform: none;
    width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg), var(--edge);
  }
  .modal.is-pop::before {
    content: ""; position: absolute; top: -7px; right: 42px; width: 12px; height: 12px;
    background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(45deg); border-radius: 2px 0 0 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .modal.is-pop { animation: pop-side .22s cubic-bezier(.22, 1.1, .36, 1) both; }
    @keyframes pop-side { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
  }
  .modal.is-pop .modal-body { padding: var(--s4); gap: var(--s3); }
  .modal.is-pop .modal-body h2 { font-size: var(--t-lg); }
}
/* На телефоне крупное число не должно ломаться на две строки */
.kpi-num { white-space: nowrap; }
@media (max-width: 620px) { .kpi-num { font-size: var(--t-xl); } }
@media (max-width: 380px) { .kpi-num { font-size: var(--t-lg); } }


/* ======================================================================
   Кольца активности: по кольцу на человека
   ====================================================================== */
.ring.rings { width: 86px; height: 86px; }
.ring.rings circle { stroke-width: 5; }
.ring.rings .ring-bg { stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
.ring.rings .ring-num { font-size: var(--t-base); }
@media (prefers-reduced-motion: no-preference) {
  .view.swap .ring.rings .ring-on { animation: ring-spin .9s var(--ease) both; }
  @keyframes ring-spin { from { stroke-dashoffset: 200; opacity: .3; } }
}
@media (max-width: 760px) { .ring.rings { width: 64px; height: 64px; } .ring.rings circle { stroke-width: 4.5; } }

/* ======================================================================
   Блеск на главной кнопке: свет пробегает при наведении
   ====================================================================== */
.btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #FFFFFF 45%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn.primary:hover::after { animation: shine .7s var(--ease) forwards; }
  @keyframes shine { to { transform: translateX(120%); } }
}

/* ======================================================================
   Переключатель со скользящим бегунком
   ====================================================================== */
.seg { position: relative; isolation: isolate; }
.seg::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: var(--seg-w, 0); transform: translateX(var(--seg-x, 0));
  background: var(--surface); border-radius: var(--r-sm);
  box-shadow: var(--shadow), var(--edge);
  transition: transform .26s cubic-bezier(.22, 1.1, .36, 1), width .26s var(--ease);
  opacity: var(--seg-on, 0);
}
.seg label span, .seg button { position: relative; z-index: 1; }
.seg input:checked + span { background: transparent; }
@media (prefers-reduced-motion: reduce) { .seg::before { transition: none; } }

/* ======================================================================
   Плавающая подпись у поля
   ====================================================================== */
.field.float { position: relative; }
.field.float .input, .field.float textarea.input {
  padding-top: 18px; padding-bottom: 6px;
}
.field.float .field-label {
  position: absolute; left: 13px; top: 13px; margin: 0; pointer-events: none;
  font-size: var(--t-base); color: var(--ink-3); letter-spacing: 0; text-transform: none;
  transition: transform .16s var(--ease), font-size .16s var(--ease), color .16s var(--ease);
  transform-origin: left top;
}
.field.float .input:focus + .field-label,
.field.float .input:not(:placeholder-shown) + .field-label {
  transform: translateY(-9px) scale(.78); color: color-mix(in srgb, var(--sec, var(--accent)) 55%, var(--ink-3));
}

/* ======================================================================
   Тосты стопкой, со значком состояния
   ====================================================================== */
.toast {
  display: flex; align-items: center; gap: var(--s3);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), var(--edge);
}
.toast .ic { flex: none; color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .3s cubic-bezier(.22, 1.1, .36, 1) both; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
}

/* ======================================================================
   Группа аватаров: перекрываются, при наведении выходит вперёд с подписью
   ====================================================================== */
.ava-group { display: flex; align-items: center; }
.ava-group .av { margin-left: -10px; box-shadow: 0 0 0 2px var(--ground), inset 0 1px 0 color-mix(in srgb, #FFFFFF 30%, transparent); }
.ava-group .av:first-child { margin-left: 0; }
.ava-group .ava-one { position: relative; display: flex; transition: transform .16s var(--ease); }
.ava-group .ava-one:hover { transform: translateY(-3px); z-index: 2; }
.ava-group .ava-one::after {
  content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 3px 7px; font-size: var(--t-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s var(--ease), transform .14s var(--ease);
  box-shadow: var(--shadow); z-index: 3;
}
.ava-group .ava-one:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Сводка и лица семьи в одной строке */
.day-line { grid-area: sum; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.day-line .day-sum { margin: 0; }
@media (max-width: 760px) { .day-line { gap: var(--s2); } .ava-group .av { --size: 24px; } }
/* Счётчик в рельсе на подсвеченной строке давал 4,4 — делаем его темнее */
.rail-n { color: var(--ink-2); }
.rail-item.on .rail-n { color: color-mix(in srgb, var(--sec) 45%, var(--ink)); }


/* ======================================================================
   Аврора: поле сверху медленно дышит. Только CSS — без WebGL и библиотек.
   ====================================================================== */
.canvas::before, .canvas::after {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 150%;
  background: radial-gradient(45% 55% at 30% 30%, color-mix(in srgb, var(--sec) 22%, transparent), transparent 70%);
  filter: blur(26px);
}
.canvas::after {
  background: radial-gradient(40% 50% at 70% 20%, color-mix(in srgb, var(--calm) 18%, transparent), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .canvas::before { animation: aur-a 22s ease-in-out infinite alternate; }
  .canvas::after { animation: aur-b 28s ease-in-out infinite alternate; }
  @keyframes aur-a {
    0% { transform: translate3d(-4%, -2%, 0) scale(1); }
    50% { transform: translate3d(6%, 3%, 0) scale(1.12); }
    100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
  }
  @keyframes aur-b {
    0% { transform: translate3d(3%, 2%, 0) scale(1.06); }
    50% { transform: translate3d(-5%, -3%, 0) scale(1); }
    100% { transform: translate3d(2%, -1%, 0) scale(1.1); }
  }
}
:root[data-theme="dark"] .canvas::before { background: radial-gradient(45% 55% at 30% 30%, color-mix(in srgb, var(--sec) 16%, transparent), transparent 70%); }
:root[data-theme="dark"] .canvas::after { background: radial-gradient(40% 50% at 70% 20%, color-mix(in srgb, var(--calm) 13%, transparent), transparent 72%); }

/* ======================================================================
   Плавающий док на телефоне вместо полосы вкладок
   ====================================================================== */
@media (max-width: 999px) {
  .tabs {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: calc(100% - 24px); max-width: 520px;
    padding: 6px; border-radius: 22px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg), var(--edge);
    isolation: isolate;
  }
  .tabs::before {
    content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px;
    width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0)); opacity: var(--tab-on, 0);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 16px;
    transition: transform .28s cubic-bezier(.22, 1.1, .36, 1), width .28s var(--ease);
  }
  .tab { border-radius: 16px; }
  .tab.on { color: var(--accent); }
  .main { padding-bottom: 86px; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) { .tabs::before { transition: none; } }

/* Конфетти: день закрыт */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i {
  position: absolute; left: 50%; top: 42%; display: block;
  width: var(--w, 7px); height: calc(var(--w, 7px) * 1.6); border-radius: 2px;
  animation: conf var(--d, 1s) cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes conf {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x, 0), 62vh) rotate(var(--r, 180deg)); opacity: 0; }
}


/* ======================================================================
   Уведомления, перестановка, быстрые действия
   ====================================================================== */

/* Колокольчик и его список: что пришло, видно без открытия чата */
.bell-wrap { position: relative; display: inline-flex; }
.bell-btn { position: relative; }
.bell-n {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--red) 75%, #000000); color: #FFFFFF; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; font-style: normal; line-height: 1;
  border: 2px solid var(--surface);
}
.bellbox {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(340px, calc(100vw - 32px));
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--edge); overflow: hidden;
  animation: bell-in .18s var(--ease) both;
}
@keyframes bell-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.bell-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.bell-head b { font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.bell-head .link-btn { font-size: var(--t-sm); }
.bell-rows { max-height: min(60vh, 420px); overflow: auto; padding: var(--s1); }
.bell-row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  width: 100%; text-align: left; padding: var(--s3); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); font-size: var(--t-sm);
  transition: background .12s var(--ease);
}
.bell-row:hover, .bell-row:focus-visible { background: var(--surface-2); color: var(--ink); }
.bell-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.bell-row.is-new .bell-dot { background: var(--accent); }
.bell-row.is-new { color: var(--ink); font-weight: 600; }
.bell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-row time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.bell-none { padding: var(--s5); text-align: center; color: var(--ink-3); margin: 0; font-size: var(--t-sm); }

/* Ручка перестановки занимает место точки: у дел без времени она всё равно пустая */
.is-sortable .task .task-time { visibility: hidden; }
.is-sortable .task > .grip {
  position: absolute; left: var(--s2); top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: auto; border: 0; background: transparent; border-radius: var(--r-md);
  color: var(--ink-3); opacity: .4; cursor: grab; touch-action: none;
  transition: opacity .15s var(--ease), background .15s var(--ease);
}
.grip:hover, .grip:focus-visible, .task:hover > .grip { opacity: 1; background: var(--surface-2); }
.grip:active { cursor: grabbing; }
.task.lifting {
  background: var(--surface-3); border-radius: var(--r-md); border-bottom-color: transparent;
  box-shadow: var(--shadow-lg); transform: scale(1.01); position: relative; z-index: 3;
}
.task.lifting .grip { opacity: 1; }
@media (hover: none) { .is-sortable .task > .grip { opacity: .55; } }

/* Плюс на телефоне: три коротких пути вместо одного окна */
.fab-wrap { position: relative; display: inline-flex; }
.fabbox {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 210px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--edge); padding: var(--s1); overflow: hidden;
  animation: bell-in .18s var(--ease) both;
}
.fab-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px;
  padding: 0 var(--s3); border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--ink); font-size: var(--t-md); font-weight: 600; text-align: left;
  transition: background .12s var(--ease);
}
.fab-item .ic { color: var(--ink-3); }
.fab-item:hover, .fab-item:focus-visible { background: var(--surface-2); }
.fab-item:hover .ic, .fab-item:focus-visible .ic { color: var(--accent); }

/* Первая фраза набирается по словам, а не появляется плашкой */
.words span { display: inline-block; animation: word-in .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  .bellbox, .fabbox, .words span { animation: none; }
  .task.lifting { transform: none; }
}


/* ======================================================================
   Отмена, быстрые сроки, меню строки
   ====================================================================== */

/* Быстрые сроки: четыре частых ответа на вопрос «когда» */
.quick-dates { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.chip-d {
  min-height: 28px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2); font-size: var(--t-xs); font-weight: 600;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
}
.chip-d:hover, .chip-d:focus-visible { border-color: var(--accent); color: var(--ink); }
.chip-d.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Меню строки встаёт там, где палец, и не вылезает за край окна */
.rowmenu {
  position: fixed; z-index: 70; min-width: 200px; padding: var(--s1);
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--edge);
  animation: row-menu-in .16s var(--ease) both;
}
@keyframes row-menu-in { from { opacity: 0; transform: scale(.94); } }
.row-head {
  display: block; padding: var(--s2) var(--s3) var(--s1); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.row-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 40px;
  padding: 0 var(--s3); border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--ink); font-size: var(--t-sm); font-weight: 600; text-align: left;
  transition: background .12s var(--ease);
}
.row-item .ic { color: var(--ink-3); }
.row-item:hover, .row-item:focus-visible { background: var(--surface-2); }
.row-item.bad { color: var(--red); }
.row-item.bad .ic { color: var(--red); }

/* Кнопка «Вернуть» в уведомлении — самое заметное в нём */
.toast .link-btn { color: var(--accent); font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .rowmenu { animation: none; } }


/* ======================================================================
   Год одним взглядом, первые шаги, рельса ленты
   ====================================================================== */

/* Год: 53 недели по семь дней. На телефоне лента едет вбок. */
.year-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s5); box-shadow: var(--shadow), var(--edge); margin-bottom: var(--s5);
}
.year-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--s2); margin-top: var(--s4); }
.year-months {
  display: grid; grid-template-columns: repeat(var(--cols, 53), minmax(13px, 1fr)); gap: 0 3px;
  font-size: 10px; color: var(--ink-3); height: 14px;
  max-width: calc(var(--cols, 53) * 24px);
}
.year-months span { white-space: nowrap; }
.year-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 53), minmax(13px, 1fr)); gap: 3px;
  max-width: calc(var(--cols, 53) * 24px);
}
.year-col { display: grid; grid-template-rows: repeat(7, auto); gap: 3px; }
.yd { display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.year-legend .yd { width: 13px; }
.yd.none { background: transparent; }
.yd.l0 { background: color-mix(in srgb, var(--ink) 7%, var(--surface-2)); }
.yd.l1 { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.yd.l2 { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.yd.l3 { background: color-mix(in srgb, var(--accent) 70%, var(--surface-2)); }
.yd.l4 { background: var(--accent); }
.year-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-3);
}
.year-legend span { margin: 0 var(--s1); }
.streak {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 4px var(--s3);
  border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: color-mix(in srgb, var(--warn) 72%, var(--ink)); font-size: var(--t-sm); font-weight: 700;
}
.streak .ic { color: var(--warn); }

/* Первые шаги: полоса и пять строк, которые гаснут по мере готовности */
.steps {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s4) var(--s5) var(--s5); box-shadow: var(--shadow), var(--edge); margin: var(--s5) 0;
}
.steps-head { display: flex; align-items: center; gap: var(--s3); }
.steps-head b { font-family: var(--f-display); font-size: var(--t-lg); }
.steps-n { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-3); margin-left: auto; }
.steps-bar { height: 4px; border-radius: 2px; background: var(--surface-2); margin: var(--s3) 0 var(--s4); overflow: hidden; }
.steps-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s var(--ease); }
.steps-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.step {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px;
  padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: var(--t-sm); font-weight: 600;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.step:hover:not(.ok), .step:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.step-box {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3);
  display: grid; place-items: center; color: var(--accent-ink); flex: none;
}
.step.ok { color: var(--ink-3); border-color: transparent; background: var(--surface-2); }
.step.ok .step-box { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }

/* Лента: рельса по дням вместо пяти одинаковых коробок */
.feed-list { display: block; }
.feed-day {
  margin: var(--s5) 0 var(--s2); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.feed-list .feed-day:first-child { margin-top: 0; }
.feed-item {
  position: relative; background: transparent; box-shadow: none; border-left: 0;
  border-radius: 0; padding: var(--s3) 0 var(--s3) 0; gap: var(--s3);
}
/* Рельса идёт через аватары и обрывается на первой и последней строке дня. */
.feed-item::before {
  content: ""; position: absolute; left: 13.5px; top: 0; bottom: 0; width: 1px;
  background: var(--line); z-index: 0;
}
.feed-item:last-child::before { bottom: auto; height: 50%; }
.feed-day + .feed-item::before { top: 50%; }
.feed-item > .av { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--ground); }
.feed-item:hover .feed-text { color: var(--ink); }
.feed-text { color: var(--ink-2); }

@media (max-width: 760px) {
  .year-card, .steps { padding: var(--s4); }
}


/* ======================================================================
   Месяц на телефоне: клетка вместо пустого столбца
   ====================================================================== */
/* Точки людей нужны только там, где не помещаются названия. */
.mc-dots { display: none; }
@media (max-width: 760px) {
  /* Позднее общее правило перебивало прежнее: клетка была 92 px и пустой. */
  .mc { min-height: 54px; padding: 4px; }
  .mc-day { padding: 4px 5px; }
  .mc-num { font-size: var(--t-md); }
  .mc-score, .mc-list { display: none; }
  .mc-dots {
    display: flex; position: absolute; left: 5px; right: 5px; bottom: 4px;
    z-index: 2; pointer-events: none; gap: 3px; margin: 0; padding: 0; overflow: hidden;
  }
  .mc-dots i { width: 6px; height: 6px; }
}


/* ======================================================================
   Свёрнутое меню: семнадцать разделов не обязаны быть видны всё время
   ====================================================================== */
.rail-toggle {
  display: none; align-items: center; gap: var(--s2); width: 100%;
  min-height: 34px; padding: 0 var(--s2); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600;
  text-align: left; transition: background .12s var(--ease), color .12s var(--ease);
}
.rail-toggle:hover, .rail-toggle:focus-visible { background: var(--surface-2); color: var(--ink); }

@media (min-width: 1000px) {
  .rail-toggle { display: flex; }
  .rail { transition: width .18s var(--ease); }

  .app.rail-mini { grid-template-columns: 72px minmax(0, 1fr); }
  .app.rail-mini .rail { width: 72px; padding-left: var(--s2); padding-right: var(--s2); overflow: visible; }
  /* Раскрытие по наведению ложится поверх содержимого, а не двигает его. */
  .app.rail-mini .rail:hover, .app.rail-mini .rail:focus-within {
    width: 248px; padding-left: var(--s4); padding-right: var(--s4);
    background: var(--surface); box-shadow: var(--shadow-lg);
  }
  .app.rail-mini .rail-name,
  .app.rail-mini .rail-n,
  .app.rail-mini .rail-k,
  .app.rail-mini .rail-mark span,
  .app.rail-mini .rail-as,
  .app.rail-mini .rail-foot .row,
  .app.rail-mini .rail-toggle span { display: none; }
  .app.rail-mini .rail-item { grid-template-columns: auto; justify-items: center; padding: var(--s2); }
  .app.rail-mini .rail-toggle { justify-content: center; padding: 0; }
  /* Свёрнуто группы не подписаны — разделяем их чертой, чтобы не слиплись. */
  .app.rail-mini .rail-group + .rail-group { border-top: 1px solid var(--line); padding-top: var(--s2); }

  /* Наведение возвращает подписи. */
  .app.rail-mini .rail:hover .rail-name,
  .app.rail-mini .rail:focus-within .rail-name,
  .app.rail-mini .rail:hover .rail-n,
  .app.rail-mini .rail:focus-within .rail-n,
  .app.rail-mini .rail:hover .rail-mark span,
  .app.rail-mini .rail:focus-within .rail-mark span,
  .app.rail-mini .rail:hover .rail-toggle span,
  .app.rail-mini .rail:focus-within .rail-toggle span { display: block; }
  .app.rail-mini .rail:hover .rail-k,
  .app.rail-mini .rail:focus-within .rail-k { display: block; }
  .app.rail-mini .rail:hover .rail-as,
  .app.rail-mini .rail:focus-within .rail-as,
  .app.rail-mini .rail:hover .rail-foot .row,
  .app.rail-mini .rail:focus-within .rail-foot .row { display: grid; }
  .app.rail-mini .rail:hover .rail-foot .row,
  .app.rail-mini .rail:focus-within .rail-foot .row { display: flex; }
  .app.rail-mini .rail:hover .rail-item,
  .app.rail-mini .rail:focus-within .rail-item { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: stretch; padding: var(--s2) var(--s3); }
  .app.rail-mini .rail:hover .rail-toggle,
  .app.rail-mini .rail:focus-within .rail-toggle { justify-content: flex-start; padding: 0 var(--s2); }
  .app.rail-mini .rail:hover .rail-group + .rail-group,
  .app.rail-mini .rail:focus-within .rail-group + .rail-group { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }


/* ======================================================================
   Удаление не висит в каждой строке
   ====================================================================== */
/* С мышью крестик появляется, когда указатель на строке; место под него
   остаётся занятым, чтобы строка не дёргалась. */
@media (hover: hover) {
  .icon-btn.subtle[data-act$="Del"], .icon-btn.subtle[data-act^="del"] {
    opacity: 0; transition: opacity .12s var(--ease);
  }
  *:hover > .icon-btn.subtle[data-act$="Del"],
  *:hover > .icon-btn.subtle[data-act^="del"],
  *:focus-within > .icon-btn.subtle[data-act$="Del"],
  *:focus-within > .icon-btn.subtle[data-act^="del"],
  .icon-btn.subtle[data-act$="Del"]:focus-visible,
  .icon-btn.subtle[data-act^="del"]:focus-visible { opacity: 1; }
}
/* На телефоне их нет вовсе: они живут в меню по долгому нажатию. */
@media (hover: none) {
  .icon-btn.subtle[data-act$="Del"], .icon-btn.subtle[data-act^="del"] { display: none; }
}


/* ======================================================================
   Первый экран: обещание слева, сам продукт справа
   ====================================================================== */
.onb-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 72px);
  max-width: 1180px; width: 100%; margin: 0 auto; padding: clamp(24px, 6vh, 64px) 0;
}
.onb-copy { max-width: 540px; display: grid; gap: var(--s4); align-content: center; }
.onb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.onb-eyebrow .mark { margin: 0; border-radius: 8px; }
.onb-claim {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.015em;
  text-wrap: balance;
}
.onb-lead { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); margin: 0; max-width: 46ch; }
.onb-cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* Витрина в первом экране: две карточки стопкой, нижняя с уступом. */
.onb-stage .show { margin: 0; max-width: 460px; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.onb-stage .show-bot { margin-left: clamp(16px, 5vw, 56px); }

/* Три довода вместо витрины разделов в главной роли */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--s4); max-width: 980px; width: 100%; margin: clamp(40px, 8vh, 80px) auto 0;
}
.proof-card {
  display: grid; gap: var(--s2); align-content: start; padding: var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow), var(--edge);
}
.proof-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s2);
}
.proof-card b { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; }
.proof-card p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-3); }

/* Ролик ушёл в концовку: там бумага и рука читаются как подпись, а не как обещание. */
.feat-bot { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.feat-film {
  position: relative; display: block; width: 104px; height: 68px; flex: none;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-2);
}
.feat-film video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .onb-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-top: var(--s4); }
  .onb-copy { max-width: none; }
  .onb-stage .show { max-width: none; }
}
@media (max-width: 860px) {
  .feat-bot { grid-template-columns: auto minmax(0, 1fr); }
  .feat-film { display: none; }
}


/* ======================================================================
   Семья: сначала люди, потом поля
   ====================================================================== */
.mcard-top { align-items: center; grid-template-columns: auto minmax(0, 1fr) auto; }
.mcard-facts {
  width: 100%; font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcard-more { margin-left: auto; flex: none; white-space: nowrap; }
/* Раскрытая карточка на телефоне шире экрана: дети сетки не ужимались. */
.mcard, .mcard > *, .mcard-rows > *, .mrow > * { min-width: 0; }
.mcard-rows, .mrow { flex-wrap: wrap; }
.mcard:not(.is-open) { padding-bottom: var(--s4); }
.mcard.is-open { border-color: color-mix(in srgb, var(--mc) 45%, var(--line)); }
.mcard.is-open .mcard-rows { animation: mcard-in .18s var(--ease) both; }
@keyframes mcard-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mcard.is-open .mcard-rows { animation: none; } }


/* ======================================================================
   Неделя: неделя должна помещаться в экран
   ====================================================================== */
@media (min-width: 1100px) {
  /* Лента карточек оставалась лентой и на большом экране: было видно четыре дня из семи. */
  .wk-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .wk-col { flex: initial; padding: var(--s3); }
  .wk-num { font-size: var(--t-xl); }
}
.wk-more {
  width: 100%; min-height: 30px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; text-align: left;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.wk-more:hover, .wk-more:focus-visible { color: var(--ink); background: var(--surface-2); }


/* ======================================================================
   Короткая страница: подпись внизу, а не посреди экрана
   ====================================================================== */
/* У разделов с малым числом записей колонтитул повисал сразу под содержимым,
   а под ним оставалась треть пустого экрана. Даём содержимому нижнюю границу
   высоты — подпись уезжает к низу, а прокручиваемая область остаётся прежней. */
.main > .view { min-height: calc(100dvh - 250px); }
@media (max-width: 760px) { .main > .view { min-height: calc(100dvh - 300px); } }


/* ======================================================================
   Волна 1 · бумага и свет
   ====================================================================== */

/* Лист рвётся: маска по нижнему краю, тень — по силуэту, а не по прямоугольнику. */
.sheet {
  box-shadow: none;
  -webkit-mask-image: var(--tear); mask-image: var(--tear);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  padding-bottom: 28px;
}
.sheet-stack { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18)) drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); }
:root[data-theme="dark"] .sheet-stack { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.sheet-stack::before, .sheet-stack::after { box-shadow: none; }

/* Перфорация под пружиной — ряд «дырок» цветом страницы. */
.sheet-perf {
  display: block; height: 7px; margin-top: 0;
  background-image: radial-gradient(circle 3.5px at 7px 0, color-mix(in srgb, var(--ink) 20%, var(--surface)) 92%, transparent 100%);
  background-size: 14px 7px; background-repeat: repeat-x;
}
.sheet-stack.small .sheet-perf { height: 5px; background-size: 10px 5px;
  background-image: radial-gradient(circle 2.5px at 5px 0, color-mix(in srgb, var(--ink) 20%, var(--surface)) 92%, transparent 100%); }

/* Скрепка на карточке «Сейчас»: предмет, а не ещё одна плашка. */
.hero { position: relative; }
.clip {
  position: absolute; top: -14px; right: 28px; width: 20px; height: 46px; z-index: 2;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  transform: rotate(9deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); pointer-events: none;
}

/* Печать «Готово» вместо галочки */
.done-stamp {
  position: absolute; z-index: 3; right: 12px; top: 50%; pointer-events: none;
  padding: 3px 10px; border: 2px solid var(--ok); border-radius: 5px;
  color: var(--ok); font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .92;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent);
  transform: translateY(-50%) rotate(var(--tilt, -6deg));
}
@media (prefers-reduced-motion: no-preference) {
  .done-stamp { animation: stamp-hit .28s cubic-bezier(.2, 1.5, .4, 1) both, stamp-out .32s var(--ease) 1.02s forwards; }
  @keyframes stamp-hit {
    0% { opacity: 0; transform: translateY(-50%) rotate(var(--tilt, -6deg)) scale(2.1); }
    100% { opacity: .92; transform: translateY(-50%) rotate(var(--tilt, -6deg)) scale(1); }
  }
  @keyframes stamp-out { to { opacity: 0; } }
}

/* Водяной знак на пустых экранах */
.empty { position: relative; overflow: hidden; }
.empty::after {
  content: ""; position: absolute; right: -18px; bottom: -22px; width: 150px; height: 150px;
  background: url("media/logo-192.webp") center / contain no-repeat;
  opacity: .05; pointer-events: none;
}

/* Тиснение служебных подписей */
.group-title, .hero-k, .ds-k, .feat-title, .field-label {
  text-shadow: 0 1px 0 color-mix(in srgb, #FFFFFF 55%, transparent);
}
:root[data-theme="dark"] .group-title,
:root[data-theme="dark"] .hero-k,
:root[data-theme="dark"] .ds-k,
:root[data-theme="dark"] .feat-title,
:root[data-theme="dark"] .field-label {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

/* Цвет раздела разливается по странице и перетекает при переходе. */
.canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--sec, var(--accent)) 12%, transparent), transparent 62%);
  transition: background 700ms var(--ease);
}

/* Свет по верхней кромке карточек — в тоне раздела, а не серый. */
.card, .kpi, .scard, .chart-card, .year-card, .steps, .proof-card, .mcard, .wk-col, .show-pane {
  border-top-color: color-mix(in srgb, var(--sec, var(--accent)) 16%, var(--line));
}

/* Шов между днями недели — как в сшитом блокноте. */
@media (min-width: 1100px) {
  .wk-cols > .wk-col + .wk-col { border-left: 1px dashed color-mix(in srgb, var(--line) 75%, transparent); }
}


/* ======================================================================
   Волна 2 · типографика и вход
   ====================================================================== */

/* 9. Разница размеров должна быть резкой: главное — крупно, служебное — мелко. */
.day-date { font-size: clamp(26px, 3.4vw, 40px); }
.hero-time { font-size: clamp(34px, 4.6vw, 54px); }
.sec-num, .chart-num, .kpi-num { letter-spacing: -.03em; }
.hero-k, .ds-k, .kpi-k, .group-title { font-size: 11px; letter-spacing: .16em; }

/* 10. Крупные числа везде набраны акцидентным шрифтом, включая деньги. */
.money-big, .bud-num, .pocket-sum, .sbig b, .ds-n, .wk-num, .mc-num, .ring-num, .sheet-num {
  font-family: var(--f-display); font-weight: 700;
}

/* 12. Цифры в списках стоят разряд под разрядом. */
.tasklist, .shop-list, .exp-list, .bill-grid, .sgrid, .year-card, .chart-card, .stats-table {
  font-variant-numeric: tabular-nums;
}

/* 21. Появление по очереди: блоки экрана встают друг за другом, а не все разом. */
@media (prefers-reduced-motion: no-preference) {
  .view.swap > * { animation: block-in .42s var(--ease) both; }
  .view.swap > :nth-child(1) { animation-delay: .02s; }
  .view.swap > :nth-child(2) { animation-delay: .07s; }
  .view.swap > :nth-child(3) { animation-delay: .12s; }
  .view.swap > :nth-child(4) { animation-delay: .17s; }
  .view.swap > :nth-child(5) { animation-delay: .22s; }
  .view.swap > :nth-child(n+6) { animation-delay: .26s; }
  @keyframes block-in { from { opacity: 0; transform: translateY(10px); } }
}

/* 22. Лист, прилетевший из клетки месяца, не должен ловить события. */
.fly-ghost { pointer-events: none; }

/* 25. Шапка дня сжимается непрерывно вместе с прокруткой. */
.day-head .sheet-stack {
  width: calc(190px - 58px * var(--shrink, 0));
  transition: none;
}
.day-head .day-date { transform: scale(calc(1 - .12 * var(--shrink, 0))); transform-origin: left center; }
.day-head .ring { opacity: calc(1 - var(--shrink, 0)); }
@media (prefers-reduced-motion: reduce) {
  .day-head .sheet-stack { width: 190px; }
  .day-head .day-date { transform: none; }
  .day-head .ring { opacity: 1; }
}


/* ======================================================================
   Волна 3 · данные как картина
   ====================================================================== */

/* Лента дня: сутки одной полосой */
.ribbon { margin: var(--s3) 0 var(--s4); }
.rb-track {
  position: relative; height: 12px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: var(--edge);
}
.rb-b {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--mc) 78%, transparent);
}
.rb-b.is-done { background: color-mix(in srgb, var(--mc) 32%, transparent); }
.rb-now { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ground) 70%, transparent); }
.rb-scale { position: relative; height: 14px; margin-top: 3px; }
.rb-scale span {
  position: absolute; transform: translateX(-50%); font-family: var(--f-mono);
  font-size: 10px; color: var(--ink-3);
}
.rb-scale span:first-child { transform: none; }
.rb-scale span:last-child { transform: translateX(-100%); }

/* Неделя одной линией */
.wstrip-chart { position: relative; }
.ws-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 46px; pointer-events: none; }
.ws-fill { fill: color-mix(in srgb, var(--sec, var(--accent)) 14%, transparent); }
.ws-stroke { stroke: color-mix(in srgb, var(--sec, var(--accent)) 70%, var(--ink-3)); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wstrip-days { position: relative; z-index: 1; padding-top: 40px; }
.ws-dot { display: block; width: 6px; height: 6px; margin: 4px auto 0; border-radius: 50%; background: color-mix(in srgb, var(--sec, var(--accent)) 60%, transparent); }
.ws-dot.is-full { background: var(--ok); }
.ws-dot.is-none { background: color-mix(in srgb, var(--ink) 14%, transparent); }


/* ======================================================================
   Волна 4 · момент, который показывают
   ====================================================================== */
.cheer-screen {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(14px);
  animation: cheer-in .24s var(--ease) both;
}
@keyframes cheer-in { from { opacity: 0; } }
.cheer-card {
  display: grid; justify-items: center; gap: var(--s3); text-align: center;
  padding: var(--s7) var(--s6); max-width: min(420px, calc(100vw - 32px));
}
.cheer-card b { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1.05; }
.cheer-card span { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--ink-2); }
.cheer-card .btn { margin-top: var(--s3); }
.cheer-card .sheet-stack { margin-bottom: var(--s3); animation: cheer-sheet .5s var(--ease) both; }
@keyframes cheer-sheet { from { opacity: 0; transform: translateY(-18px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .cheer-screen, .cheer-card .sheet-stack { animation: none; }
}


/* ======================================================================
   Волна 5 · мелочи
   ====================================================================== */
/* Печать: день выходит на бумагу как настоящий лист календаря. */
@media print {
  .rail, .side, .scrim, .tabs, .bot, .mast-tools, .rubrics, .colophon,
  .canvas, .toast, .rowmenu, .bellbox, .fabbox, .ribbon, .wstrip,
  .day-nav, .chips, .task-actions, .add-open, .more-line { display: none !important; }
  :root { --ground: #FFFFFF; --surface: #FFFFFF; --ink: #111111; --ink-2: #333333; --ink-3: #666666; --line: #CCCCCC; }
  body, .app, .main { background: #FFFFFF !important; color: #111111; display: block !important; }
  .app, .app > .main { height: auto !important; overflow: visible !important; }
  .view { min-height: 0 !important; }
  .task { break-inside: avoid; border-bottom: 1px solid #DDDDDD; }
  .sheet-stack { filter: none; }
  .day-head { break-after: avoid; }
}


/* ======================================================================
   Волна 6–7 · деньги слоями, часы, автограф, детский режим
   ====================================================================== */

/* Деньги месяца одним слоёным отрезком */
.stack-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; box-shadow: var(--edge); }
.sb-part { display: block; height: 100%; }
.sb-0 { background: var(--accent); }
.sb-1 { background: color-mix(in srgb, var(--accent) 62%, var(--ink-3)); }
.sb-2 { background: var(--calm, #4B7FA8); }
.sb-3 { background: color-mix(in srgb, var(--ok) 72%, var(--ink-3)); }
.sb-4 { background: var(--warn); }
.sb-5 { background: color-mix(in srgb, var(--warn) 55%, var(--ink-3)); }
.sb-6 { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.stack-keys { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.sb-key { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-3); }
.sb-key b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sb-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Когда семья занята */
.hours-map {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s5); box-shadow: var(--shadow), var(--edge); margin-bottom: var(--s5);
}
.hm-grid { display: grid; grid-template-columns: auto repeat(6, minmax(0, 1fr)); gap: 4px; align-items: center; margin-top: var(--s4); }
.hm-h { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
.hm-wd { font-size: var(--t-xs); color: var(--ink-3); padding-right: var(--s2); }
.hm-c {
  display: block; height: 22px; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--sec, var(--accent)) calc(var(--k) * 78%), color-mix(in srgb, var(--ink) 6%, transparent));
}

/* Автограф на выполненном деле */
.sign {
  position: absolute; right: 10px; bottom: 6px; z-index: 1; pointer-events: none;
  font-family: var(--f-serif); font-style: italic; font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--mc) 26%, var(--ink-3)); opacity: 1;
}
.task.st-done, .task.st-approved { position: relative; }

/* Кто сейчас свободен */
.who-free { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.wf { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }

/* Детский режим: крупнее и теплее */
.app.is-kid { --t-base: 17px; --t-md: 18px; --t-lg: 21px; --t-sm: 15px; }
.app.is-kid .task { min-height: 64px; }
.app.is-kid .task-title { font-size: var(--t-lg); }


/* ======================================================================
   Волна 6 · материал и движение
   ====================================================================== */

/* 2. Три уровня зерна: чем выше слой, тем мельче и тише крупа. */
:root { --grain-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); --grain-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); }
.card, .kpi, .scard, .chart-card, .year-card, .hours-map, .steps, .proof-card,
.mcard, .wk-col, .show-pane, .hero, .sheet {
  background-image: var(--lift), var(--grain-a);
}
.bellbox, .fabbox, .rowmenu, .palbox, .modal-body, .drawer {
  background-image: var(--grain-b);
}

/* 3. Бумага чуть ведёт под курсором — на 2 пикселя, не больше. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card, .kpi, .scard, .chart-card, .year-card, .hours-map, .proof-card {
    background-position: 0 0, 0 0;
    transition: background-position .5s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
  }
  .card:hover, .kpi:hover, .scard:hover, .chart-card:hover, .year-card:hover, .hours-map:hover, .proof-card:hover {
    background-position: 0 0, 2px -2px;
  }
}

/* 8. Матовое стекло там, где слой лежит поверх содержимого. */
.bellbox, .fabbox, .rowmenu, .palbox {
  background-color: color-mix(in srgb, var(--surface-3) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* 24. Выполненное дело выцветает, как чернила, а не гаснет целиком. */
.task.st-done .task-title, .task.st-approved .task-title {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.task.st-done .task-meta, .task.st-approved .task-meta { opacity: .8; }

/* 28. Одна пружина на весь продукт. */
.switch-ui, .chk, .shop-check, .sw, .step-box, .accent-dot {
  transition: transform .18s cubic-bezier(.34, 1.45, .64, 1), background .16s var(--ease), border-color .16s var(--ease);
}
.switch input:checked + .switch-ui { transform: scale(1.04); }

/* 47. Пока тянут — курсор держит лист. */
.wk-chip.dragging, .task.lifting { cursor: grabbing; }
body:has(.wk-chip.dragging), body:has(.task.lifting) { cursor: grabbing; }


/* ======================================================================
   Волна 7 · открытки
   ====================================================================== */
.year-open {
  display: grid; justify-items: center; gap: var(--s4); text-align: center;
  padding: var(--s7) var(--s6); width: min(620px, calc(100vw - 32px));
}
.year-open h2 { margin: 0; font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; }
.yc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s5); width: 100%; }
.yc-cell { display: grid; gap: 2px; }
.yc-cell b { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1; color: var(--accent); }
.yc-cell span { font-size: var(--t-sm); color: var(--ink-3); }
.year-sp { flex: 1; }
.year-legend { justify-content: flex-start; }

/* 49. Под рисунком пустого экрана — подпись от руки. */
.empty::before {
  content: attr(data-sign); position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-3); opacity: .6;
}

/* 36. Цвет семьи достаёт и до тени, и до дымки. */
.app { --shadow-tint: color-mix(in srgb, var(--accent) 14%, transparent); }
.hero, .kpi.on, .card.is-accent { box-shadow: var(--shadow), 0 10px 30px -18px var(--shadow-tint); }


/* ======================================================================
   Сцена первого входа: лист отрывается и открывает первый день
   ====================================================================== */
.first-scene {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; gap: var(--s5);
  align-content: center; background: var(--ground); pointer-events: none;
  animation: fs-out .6s var(--ease) 1.5s both;
}
.fs-leaf { animation: fs-tear 1.15s cubic-bezier(.4, .05, .7, .3) .45s both; transform-origin: 18% 0; }
.fs-word {
  margin: 0; font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; text-align: center;
  animation: fs-word .5s var(--ease) .15s both;
}
@keyframes fs-tear {
  0% { transform: none; opacity: 1; }
  22% { transform: rotate(-3deg) translateY(-8px); }
  100% { transform: rotate(-24deg) translate(-120px, 260px) scale(.92); opacity: 0; }
}
@keyframes fs-word { from { opacity: 0; transform: translateY(10px); } }
@keyframes fs-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .first-scene { animation: fs-out .3s linear .5s both; }
  .fs-leaf, .fs-word { animation: none; }
}


/* ======================================================================
   Герб семьи и предметы разделов
   ====================================================================== */
.crest { display: block; color: var(--ink); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
.crest text { font-family: var(--f-display); letter-spacing: .04em; }
.crest-bands { opacity: .95; }
.sec-art { display: block; color: color-mix(in srgb, var(--sec, var(--accent)) 62%, var(--ink-3)); transform: rotate(4deg); }


/* ======================================================================
   ★7 · разворот раздела: слева титул, справа содержимое
   ====================================================================== */
.plate { display: none; }
@media (min-width: 1240px) {
  .view.is-spread { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .plate {
    display: grid; gap: var(--s3); position: sticky; top: var(--s6);
    padding-right: var(--s5); border-right: 1px solid var(--line); min-height: 320px;
    align-content: start;
  }
  .plate-rule { display: block; width: 44px; height: 2px; border-radius: 2px; background: var(--sec, var(--accent)); }
  .plate-title {
    margin: 0; font-family: var(--f-display); font-weight: 700; line-height: .96;
    font-size: clamp(30px, 2.6vw, 42px); letter-spacing: -.02em; text-wrap: balance;
  }
  .plate-sub { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-3); }
  .plate .sec-art { margin-top: var(--s4); opacity: .85; }
  .plate-mark { margin-top: auto; opacity: .75; }
  .plate-mark .crest { width: 46px; height: 46px; }
  /* Название уже стоит на полосе — в шапке его повторять незачем. */
  .mast-sec.has-plate { display: none; }
}

/* ★14 · одна цифра крупнее всего на экране */
.sec-hero-num.big {
  font-size: clamp(56px, 8vw, 132px); line-height: .88; letter-spacing: -.04em;
}
.sec-hero-num.big small { font-size: .22em; letter-spacing: 0; }
@media (max-width: 620px) { .sec-hero-num.big { font-size: clamp(46px, 14vw, 72px); } }


/* ★14 · главное число раздела крупнее всего остального */
.bud-sum, .kid-points, .score-num {
  font-size: clamp(52px, 6.4vw, 96px); line-height: .9; letter-spacing: -.035em;
}
@media (max-width: 620px) { .bud-sum, .kid-points, .score-num { font-size: clamp(42px, 12vw, 64px); } }


/* ======================================================================
   ★1 · свет по часам: утро тёплое, день чистый, вечер синий, ночь тихая
   ====================================================================== */
/* Меняем только свет над страницей и дымку — цвета текста остаются прежними. */
.canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transition: background 1200ms var(--ease), opacity 1200ms var(--ease);
  background: linear-gradient(180deg, var(--sun-a, transparent), transparent 46%);
}
:root[data-sun="dawn"] { --sun-a: color-mix(in srgb, #F0A868 26%, transparent); }
:root[data-sun="day"] { --sun-a: color-mix(in srgb, #FFFFFF 16%, transparent); }
:root[data-sun="dusk"] { --sun-a: color-mix(in srgb, #5B6FA8 24%, transparent); }
:root[data-sun="night"] { --sun-a: color-mix(in srgb, #1B2440 34%, transparent); }
:root[data-theme="dark"][data-sun="day"] { --sun-a: color-mix(in srgb, #8FA6C4 12%, transparent); }
:root[data-theme="dark"][data-sun="dawn"] { --sun-a: color-mix(in srgb, #C97A3C 18%, transparent); }
/* Тень листа идёт за солнцем: утром длинная вправо, вечером влево. */
:root[data-sun="dawn"] .sheet-stack { filter: drop-shadow(8px 12px 20px rgba(0, 0, 0, .2)); }
:root[data-sun="dusk"] .sheet-stack { filter: drop-shadow(-8px 12px 20px rgba(0, 0, 0, .22)); }
:root[data-sun="night"] .sheet-stack { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); }

/* ★26 · день перелистывается целиком */
.page-ghost { z-index: 40; pointer-events: none; overflow: hidden; transform-origin: 20% 0; }

/* ★33 · обложка раздела: один раз в день */
.cover {
  position: fixed; inset: 0; z-index: 88; display: grid; place-items: center;
  background: var(--ground); animation: cover-out .45s var(--ease) .62s forwards;
}
.cover-in { display: grid; justify-items: center; gap: var(--s3); text-align: center; animation: cover-in .4s var(--ease) both; }
.cover-in h2 { margin: 0; font-family: var(--f-display); font-size: clamp(38px, 6vw, 72px); font-weight: 700; letter-spacing: -.02em; }
.cover-in span { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--ink-3); }
.cover-in .sec-art { width: 96px; height: 96px; }
.cover-in .crest { margin-top: var(--s4); opacity: .6; }
@keyframes cover-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes cover-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .cover { animation: cover-out .2s linear .3s forwards; }
  .cover-in { animation: none; }
}


/* В узкой колонке разворота форма выдачи не помещалась в строку. */
.pocket-give { flex-wrap: wrap; }
.pocket-give .input { min-width: 0; flex: 1 1 88px; }


/* День недели, отметка «сегодня» и счётчик переносятся, а не вылезают из колонки. */
.sch-head > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; }


/* ======================================================================
   ★1 · свет в комнате: сам цвет страницы идёт за временем суток
   ====================================================================== */
/* Градиент над фоном остаётся за содержимым и почти не виден — поэтому
   смещаем саму бумагу. Сдвиг маленький: интерфейс должен теплеть, а не желтеть. */
:root[data-sun="dawn"] { --ground: #F2EAE0; }
:root[data-sun="day"] { --ground: #EFEBE1; }
:root[data-sun="dusk"] { --ground: #E9E7E4; }
:root[data-sun="night"] { --ground: #E5E4E3; }
:root:not([data-theme="dark"])[data-sun="dusk"] { --ink-3: #635B4A; }
:root:not([data-theme="dark"])[data-sun="night"] { --ink-3: #5C5546; }
:root:not([data-theme="dark"])[data-sun="dusk"] { --calm: #2B6383; }
:root:not([data-theme="dark"])[data-sun="night"] { --calm: #275B79; }
:root[data-theme="dark"][data-sun="dawn"] { --ground: #17130F; --surface: #1E1A16; --ink-3: #9BA0A6; }
:root[data-theme="dark"][data-sun="day"] { --ground: #131211; --surface: #1A1917; }
:root[data-theme="dark"][data-sun="dusk"] { --ground: #101214; --surface: #171A1D; }
:root[data-theme="dark"][data-sun="night"] { --ground: #0C0D0F; --surface: #141517; }
:root { transition: background-color 900ms var(--ease); }


/* ======================================================================
   Сезон, суточная дуга, знак на листе, ожидание
   ====================================================================== */
/* 3 · сезон показываем знаком на листе, а не цветом бумаги:
   временем суток тот же --ground уже занят, и два механизма на один токен ломали его. */

/* 5 · снаружи кольца — сколько дня прошло */
.ring-clock-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: 2; }
.ring-clock {
  fill: none; stroke: color-mix(in srgb, var(--ink-3) 55%, transparent); stroke-width: 2;
  stroke-linecap: round; transform: rotate(-90deg); transform-origin: 34px 34px;
  transition: stroke-dashoffset 600ms var(--ease);
}

/* 21 · знак сезона в углу листа */
.sheet-season {
  position: absolute; right: 10px; top: 30px; width: 15px; height: 15px; z-index: 2;
  color: color-mix(in srgb, var(--ink-3) 70%, transparent); pointer-events: none;
}
.sheet-season svg { width: 100%; height: 100%; }
.sheet-stack.small .sheet-season { display: none; }

/* 36 · ожидание: лист, который ещё не оторвали */
.app.is-loading { display: grid; place-items: center; min-height: 100dvh; }
.load-leaf { display: grid; justify-items: center; gap: var(--s5); }
.load-word { font-family: var(--f-serif); font-style: italic; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .load-leaf .sheet-stack { animation: load-sway 2.4s ease-in-out infinite; transform-origin: 50% 0; }
  @keyframes load-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
}


/* ======================================================================
   Композиция и набор
   ====================================================================== */
/* 9 · на обложке число выходит за край — знак, а не подпись */
.cover-num {
  position: absolute; left: -2vw; bottom: -4vh; z-index: 0; pointer-events: none;
  font-family: var(--f-display); font-weight: 700; line-height: .8;
  font-size: clamp(180px, 34vw, 460px); letter-spacing: -.05em;
  color: color-mix(in srgb, var(--sec, var(--accent)) 10%, transparent);
}
.cover { position: fixed; overflow: hidden; }
.cover-in { position: relative; z-index: 1; }

/* 10 · правая колонка — поля тетради, а не набор виджетов */
@media (min-width: 1000px) {
  .day-aside {
    border-left: 1px solid var(--line); padding-left: var(--s5);
    background-image: linear-gradient(var(--line), var(--line));
    background-size: 1px 100%; background-position: 14px 0; background-repeat: no-repeat;
  }
  .day-aside .ds-k { padding-left: var(--s4); }
}

/* 13 + 16 · перенос по смыслу и ровный набор */
h1, h2, h3, .plate-title, .onb-claim, .cover-in h2, .sec-hero-body b, .empty-title {
  text-wrap: balance;
}
p, .empty-hint, .plate-sub, .proof-card p, .cheer-card span { text-wrap: pretty; }
.tasklist, .shop-list, .care-list, .exp-list { font-variant-numeric: tabular-nums; }

/* 47 · выделение текста в фирменном цвете */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }


/* ======================================================================
   Физика и переходы
   ====================================================================== */
/* 28 · карточка приподнимается с перспективой под курсором */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kpi, .proof-card, .scard, .ds-tile, .wk-col {
    transform-style: preserve-3d;
    transition: transform .18s var(--ease), border-color .15s var(--ease), box-shadow .18s var(--ease);
  }
  .kpi:hover, .proof-card:hover, .ds-tile:hover {
    transform: perspective(700px) translateY(-2px) rotateX(2.2deg);
    box-shadow: var(--shadow-lg), var(--edge);
  }
}

/* 29 · то, что тянут, наклоняется и отбрасывает тень */
.wk-chip.dragging, .task.lifting {
  transform: rotate(-1.6deg) scale(1.015);
  box-shadow: var(--shadow-lg);
}

/* 34 + 35 · раздел приходит с той стороны, в какую идёшь по меню */
@media (prefers-reduced-motion: no-preference) {
  .view.swap.to-left > * { animation: slide-left .4s var(--ease) both; }
  .view.swap.to-right > * { animation: slide-right .4s var(--ease) both; }
  @keyframes slide-left { from { opacity: 0; transform: translateX(26px); } }
  @keyframes slide-right { from { opacity: 0; transform: translateX(-26px); } }
}

/* 37 · смена темы — смена света, а не щелчок */
:root, body, .app { transition: background-color 420ms var(--ease), color 420ms var(--ease); }
.card, .kpi, .task, .mcard, .wk-col, .sheet, .rail, .tabs {
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease), color 420ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  :root, body, .app, .card, .kpi, .task, .mcard, .wk-col, .sheet, .rail, .tabs { transition: none; }
}


/* ======================================================================
   Полка семьи и год целиком
   ====================================================================== */
.shelf {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s5); box-shadow: var(--shadow), var(--edge); margin-bottom: var(--s5);
}
.shelf-row { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s4); }
.sticker {
  display: grid; justify-items: center; gap: 2px; width: 118px; text-align: center;
  padding: var(--s3); border-radius: var(--r-lg); transform: rotate(var(--tilt, 0deg));
  filter: grayscale(1); opacity: .45; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.sticker.got { filter: none; opacity: 1; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sticker.got:hover { transform: rotate(0deg) scale(1.04); }
.sticker b { font-size: var(--t-xs); font-weight: 700; line-height: 1.15; }
.sticker small { font-size: 11px; color: var(--ink-3); }

.year-strip {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s5); box-shadow: var(--shadow), var(--edge); margin-bottom: var(--s5);
}
.ys-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.ys-leaf {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 0 0 var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  overflow: hidden; min-height: 76px; transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.ys-leaf:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ys-leaf.now { border-color: var(--accent); }
.ys-top { display: block; height: 7px; width: 100%; background: var(--red); }
.ys-leaf b { font-family: var(--f-display); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s2); }
.ys-fill {
  display: block; width: 62%; height: 26px; border-radius: var(--r-xs); margin-top: 2px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--accent) calc(var(--k) * 80%), transparent) calc(var(--k) * 100%),
    color-mix(in srgb, var(--ink) 6%, transparent) calc(var(--k) * 100%));
}
.ys-leaf small { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); }
@media (max-width: 760px) {
  .ys-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sticker { width: 96px; }
}


/* 40 · три мира вместо палитры пятен */
.worlds { display: flex; gap: var(--s3); flex-wrap: wrap; }
.world {
  display: grid; justify-items: center; gap: var(--s2); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: transparent;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.world-swatch { width: 34px; height: 20px; border-radius: 6px; background: var(--ac); box-shadow: var(--edge); }
.world b { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.world:hover { border-color: color-mix(in srgb, var(--ac) 50%, var(--line)); }
.world.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, transparent); }
.world.on b { color: var(--ink); }


/* ======================================================================
   Знак семьи выбирают, а не получают
   ====================================================================== */
.crest-pick { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.crest-now { display: block; flex: none; }
.crest-forms { display: flex; gap: var(--s2); }
.crest-form {
  width: 36px; height: 36px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--ink-3);
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}
.crest-form svg { width: 100%; height: 100%; display: block; }
.crest-form:hover { color: var(--ink-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.crest-form.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.crest-letters { display: grid; gap: 2px; }
.crest-letters .input { width: 72px; text-transform: uppercase; letter-spacing: .1em; }
.file-btn { cursor: pointer; }

/* Фото человека вместо рисованного лица */
.av.has-photo { overflow: hidden; background: var(--surface-2); }
.av.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ======================================================================
   Телефон: меню разделов и шапка дня
   ====================================================================== */
/* Меню в выдвижной панели: все разделы, сгруппированные так же, как в рельсе */
.side-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s4); align-content: start; }
.side-g { display: grid; gap: 1px; }
.side .nav-item {
  --sec: var(--accent);
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px;
  padding: var(--s2) var(--s3); border-radius: var(--r-md); background: transparent; border: 0;
  color: var(--ink-2); text-align: left; cursor: pointer;
}
.side .nav-item.on { background: var(--surface-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--sec); }
.side-i-ic { display: inline-flex; width: 20px; height: 20px; color: var(--sec); flex: none; }
.side-i-ic svg { width: 100%; height: 100%; }
.side .side-i-name { font-family: var(--f-body); font-size: var(--t-base); font-weight: 600; letter-spacing: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .side-i-state {
  margin-left: auto; flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sec) 14%, transparent); color: var(--ink-2);
  font-family: var(--f-mono); font-size: 11px;
}
/* Имя человека в ленте лиц не должно вылезать за свою кнопку */
.side-face span:not(.av) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Док на шесть кнопок: четыре раздела, бот и вход в меню */
@media (max-width: 860px) {
  .tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .tab { min-width: 0; padding: 6px 1px; }
  .tab .ic { flex: none; }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(9.5px, 2.55vw, 11px); letter-spacing: -.035em; }
}

/* Шапка дня на телефоне: лист сжимается в своих пределах,
   иначе заголовку остаётся нулевая ширина и он ложится на кольцо. */
@media (max-width: 760px) {
  .day-head {
    grid-template-areas: "nav nav nav" "sheet date ring" "free free free";
    row-gap: var(--s3);
  }
  .day-head .sheet-stack { width: calc(112px - 22px * var(--shrink, 0)); }
  .day-head .day-date { transform: none; font-size: var(--t-md); line-height: 1.15; }
  .day-head .day-date span { display: block; font-size: var(--t-sm); }
  .who-free { grid-area: free; margin: 0; }
}

/* Сводка дня на телефоне — лента с прилипанием, а не два экрана плиток */
@media (max-width: 760px) {
  .kpis {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; padding-bottom: 2px;
  }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi { scroll-snap-align: start; }
}

/* Наклонённая наклейка не должна задевать край полки */
.shelf-row { padding: 3px 4px; }

/* Знак сезона на маленьком листе уезжает вниз: вверху он ложился на месяц */
@media (max-width: 760px) {
  .sheet-season { top: auto; bottom: 7px; right: 7px; width: 13px; height: 13px; }
}

/* Автограф — штамп в углу, а не колонка строки.
   Общее правило .task > :not(.task-open) весомее одиночного .sign и делало его relative. */
.task > .sign { position: absolute; }

/* Колокол и меню «+» живут внутри шапки, а у шапки своё размытие.
   Вложенное backdrop-filter не мутит — панель оставалась прозрачной,
   и сквозь неё читался экран. Такие слои делаем плотными. */
.bellbox, .fabbox {
  background-color: var(--surface-3);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* На телефоне шапка не липкая, а размытие всё равно делало её отдельным слоем —
   панель колокола запиралась внутри и уходила под карточки. Размывать нечего: снимаем. */
@media (max-width: 860px) {
  .mast { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Цвет раздела поверх его же подложки был слишком светлым (4.1–4.2).
   Подмешиваем чернила: в тёмной теме это, наоборот, осветляет. */
.rub2.on { color: color-mix(in srgb, var(--sec) 34%, var(--ink)); }
.react.on { color: color-mix(in srgb, var(--accent) 68%, var(--ink)); }
.sch-head em { color: color-mix(in srgb, var(--accent) 68%, var(--ink)); }

/* Подпись открытой вкладки в доке: чистый акцент по бумаге давал 4.21.
   Значок остаётся акцентным — он крупный и не текст. */
@media (max-width: 860px) {
  .tab.on { color: color-mix(in srgb, var(--accent) 30%, var(--ink)); }
}

/* В тёмной теме выбранный семьёй акцент может быть тёмным сам по себе,
   и ссылка на нём падала до 2.97. Подмешиваем светлые чернила. */
:root[data-theme="dark"] .link-btn,
:root[data-theme="dark"] .toast .link-btn {
  color: color-mix(in srgb, var(--accent) 52%, var(--ink));
}

/* Цели меньше 24 px: образец цвета и число в клетке месяца.
   На тач-экране они уже крупнее, правим мышиный размер. */
.sw { min-width: 24px; min-height: 24px; width: 24px; height: 24px; }
.mc-day { min-height: 24px; }

/* Строки дел в клетке месяца были 20 px — для мыши это мало.
   Добавляем по два пикселя сверху и снизу: сетка от этого не рассыпается. */
.mc-item, .mc-day { min-height: 24px; }
.mc-item { padding-top: 3px; padding-bottom: 3px; }

/* ======================================================================
   Продающая страница. Предмет тот же, что и в сервисе, — отрывной календарь:
   разделы это листы, у листа перфорация и дата на просвет.
   ====================================================================== */
.ld {
  --ld-max: 1180px;
  --ld-pad: clamp(20px, 5vw, 64px);
  display: block;
  background: var(--ground);
  overflow-x: clip;
}
.ld-top { position: absolute; top: var(--s4); right: var(--ld-pad); z-index: 5; }

/* ---------- первый экран */
.ld-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px); align-items: center;
  max-width: var(--ld-max); margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) var(--ld-pad) clamp(40px, 8vh, 96px);
}
.ld-hero-copy { display: grid; gap: var(--s4); align-content: start; }
.ld-brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.ld-brand .mark { border-radius: 9px; }
.ld-claim {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 82px); line-height: .98; letter-spacing: -.035em;
  text-wrap: balance; margin: 0;
}
.ld-lead {
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2);
  max-width: 34ch; text-wrap: pretty; margin: 0;
}
.ld-cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2); }
.ld-go { padding: 0 clamp(20px, 3vw, 34px); height: 56px; font-size: var(--t-md); border-radius: 999px; }
.ld-note { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .02em; }
.ld-demo { justify-self: start; font-size: var(--t-base); }

.ld-hero-stage { display: grid; gap: var(--s4); justify-items: stretch; }
.ld-sheet {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--edge);
  padding: 30px var(--s5) var(--s5); overflow: hidden;
  transform: rotate(-.5deg);
}
.ld-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--red); }
.ld-sheet::after {
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 12px;
  background: radial-gradient(circle 3.5px at 14px 0, color-mix(in srgb, var(--ink) 22%, transparent) 98%, transparent 100%) repeat-x;
  background-size: 28px 12px;
}
.ld-sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.ld-sheet-head b { font-family: var(--f-display); font-size: var(--t-base); }
.ld-sheet-head span { font-family: var(--f-serif); font-style: italic; color: var(--ink-3); font-size: var(--t-sm); }
.ld-rows { display: grid; }
.ld-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.ld-row:last-child { border-bottom: 0; }
.ld-time { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--calm); }
.ld-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-meta { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.ld-meta i { font-style: normal; }
.ld-meta u { text-decoration: none; color: var(--warn); font-weight: 700; }
.ld-row.is-done .ld-title { text-decoration: line-through; color: var(--ink-3); }
.ld-row.is-mark { box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--s3); }
.ld-row.is-mark .ld-title { color: var(--accent); }

.ld-chat {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); display: grid; gap: var(--s3); box-shadow: var(--shadow);
  transform: rotate(.4deg);
}
.ld-chat-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.ld-chat-head i { font-style: normal; margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 400; }
.ld-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--calm); }
.ld-bubble {
  background: var(--surface); border-radius: 14px 14px 14px 4px; padding: var(--s3) var(--s4);
  max-width: 88%; font-size: var(--t-sm); box-shadow: var(--shadow);
}
.ld-bubble p { margin: 0; }
.ld-bubble.mine { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--calm-soft); color: var(--ink); }
.ld-kb { display: flex; gap: var(--s2); margin-top: var(--s3); }
.ld-kb span {
  flex: 1; text-align: center; padding: 7px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600;
}

/* ---------- лист раздела */
.ld-leaf {
  position: relative; max-width: var(--ld-max); margin: 0 auto var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--edge);
  padding: clamp(40px, 6vw, 76px) var(--ld-pad) clamp(32px, 5vw, 64px);
  overflow: hidden;
}
.ld-perf {
  position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 / 100% 8px no-repeat,
    radial-gradient(circle 3.5px at 14px 15px, color-mix(in srgb, var(--ink) 20%, transparent) 98%, transparent 100%) repeat-x;
  background-size: 100% 8px, 28px 22px;
}
.ld-leaf::after {
  content: attr(data-leaf);
  position: absolute; right: -2vw; bottom: -6vh; z-index: 0; pointer-events: none;
  font-family: var(--f-display); font-weight: 700; line-height: .8;
  font-size: clamp(150px, 26vw, 360px); letter-spacing: -.05em;
  color: color-mix(in srgb, var(--ink) 4%, transparent);
}
.ld-in { position: relative; z-index: 1; display: grid; gap: var(--s4); }
.ld-k {
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.ld-h {
  font-family: var(--f-display); font-weight: 700; margin: 0;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.02em;
  text-wrap: balance; max-width: 22ch;
}
.ld-p { color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 46ch; text-wrap: pretty; }
.ld-wide { max-width: 62ch; }

/* ---------- боль: единственный тёмный акт */
.ld-leaf.is-night { background: #131211; border-color: #2A2724; color: #EDEFF2; }
.ld-leaf.is-night .ld-h, .ld-leaf.is-night .ld-kicker { color: #EDEFF2; }
.ld-leaf.is-night .ld-p { color: #BCB6AD; }
.ld-leaf.is-night .ld-k { color: #FF9A85; }
.ld-leaf.is-night::after { color: rgba(255, 255, 255, .045); }
.ld-head-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ld-head-list li {
  position: relative; padding-left: 26px; color: #CFC9BF;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.35;
}
.ld-head-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 1px; background: #7A736A; }
.ld-kicker {
  font-family: var(--f-serif); font-style: italic; font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.35; margin: var(--s3) 0 0; max-width: 40ch; text-wrap: pretty;
}

/* ---------- доказательство */
.ld-proof-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ld-proof-copy { display: grid; gap: var(--s4); align-content: start; }
.ld-proof-copy .btn { justify-self: start; }
.ld-proof-bot { display: grid; gap: var(--s3); }
.ld-proof-bot h3 { font-family: var(--f-display); font-size: var(--t-lg); margin: 0; }

/* ---------- три шага: маркер — день недели, а не выдуманный номер */
.ld-steps {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s5);
}
.ld-steps li { display: grid; gap: 6px; align-content: start; padding-top: var(--s4); border-top: 2px solid var(--ink); }
.ld-steps b { font-size: var(--t-lg); font-family: var(--f-display); }

/* ---------- что внутри */
.ld-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 3vw, 44px); margin-top: var(--s3);
}
.ld-group-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 2px solid var(--ink);
}
.ld-group-top b { font-family: var(--f-display); font-size: var(--t-base); letter-spacing: .14em; text-transform: uppercase; }
.ld-group-top i { font-family: var(--f-mono); font-style: normal; color: var(--ink-3); font-size: var(--t-sm); }
.ld-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ld-list li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.ld-list li b { grid-column: 2; font-size: var(--t-base); }
.ld-list li span:not(.ld-ic) {
  grid-column: 2; font-family: var(--f-serif); font-style: italic;
  font-size: var(--t-sm); color: var(--ink-3);
}
.ld-ic { grid-row: 1 / span 2; display: flex; align-items: center; color: var(--ink-3); }
.ld-ic svg { width: 18px; height: 18px; }
.ld-groups:not(.is-open) .ld-list { max-height: 172px; overflow: hidden; position: relative; }
.ld-groups:not(.is-open) .ld-list::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(transparent, var(--surface));
}
.ld-more { justify-self: start; margin-top: var(--s4); }

/* ---------- возражения */
.ld-qa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 32px); margin-top: var(--s3);
}
.ld-qa-item {
  display: grid; gap: var(--s2); padding: var(--s5);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ld-qa-item b {
  font-family: var(--f-serif); font-style: italic; font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.3; color: var(--ink);
}
.ld-qa-item p { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: var(--t-sm); }

/* ---------- цена */
.ld-price {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--s4); margin-top: var(--s4);
}
.ld-rival {
  display: grid; gap: 4px; padding: var(--s5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2); align-content: start;
}
.ld-rival span { font-size: var(--t-sm); color: var(--ink-3); }
.ld-rival b { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em; }
.ld-rival i { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
.ld-rival.is-us {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: var(--shadow);
}
.ld-rival.is-us b { color: var(--accent); }
.ld-rival.is-us i { color: var(--ink-2); }

/* ---------- последний лист */
.ld-leaf.is-end { text-align: center; margin-bottom: clamp(40px, 8vh, 96px); }
.ld-end-in { justify-items: center; gap: var(--s4); }
.ld-end {
  font-family: var(--f-display); font-weight: 700; margin: 0;
  font-size: clamp(30px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance; max-width: 18ch;
}
.ld-leaf.is-end .ld-p { max-width: 34ch; }

/* ---------- телефон */
@media (max-width: 860px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); padding-top: clamp(72px, 14vh, 120px); }
  .ld-proof-in { grid-template-columns: minmax(0, 1fr); }
  .ld-sheet, .ld-chat { transform: none; }
  .ld-top { top: var(--s3); right: var(--s4); }
}

/* ---------- движение: листы встают на место, но только если человек не против */
@media (prefers-reduced-motion: no-preference) {
  .ld-leaf, .ld-hero-copy > *, .ld-hero-stage > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .ld-leaf.in, .ld-hero-copy > .in, .ld-hero-stage > .in { opacity: 1; transform: none; }
  .ld-hero-copy > *:nth-child(2) { transition-delay: .06s; }
  .ld-hero-copy > *:nth-child(3) { transition-delay: .12s; }
  .ld-hero-copy > *:nth-child(4) { transition-delay: .18s; }
  .ld-hero-copy > *:nth-child(5) { transition-delay: .24s; }
  .ld-hero-stage > *:nth-child(2) { transition-delay: .14s; }
}

/* ---------- цена: триал, три строки, сравнение */
.ld-trial {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  margin-top: var(--s3);
}
.ld-trial b {
  font-family: var(--f-display); font-size: clamp(24px, 3vw, 36px);
  line-height: 1; letter-spacing: -.02em;
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}
.ld-trial span { color: var(--ink-2); font-size: var(--t-base); }
.ld-plan {
  display: grid; gap: 4px; padding: var(--s5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2); align-content: start;
}
.ld-plan span { font-size: var(--t-sm); color: var(--ink-3); }
.ld-plan b {
  font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1; letter-spacing: -.03em;
}
.ld-plan i { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
.ld-plan.is-best {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: var(--shadow);
}
.ld-plan.is-best b { color: var(--accent); }
.ld-plan.is-best i { color: var(--ink-2); }
.ld-price-sub { margin-top: var(--s2); }
.ld-price-in { font-size: var(--t-sm); color: var(--ink-3); }
.ld-install {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line); max-width: 62ch;
}

/* Вход для тех, у кого уже есть учётная запись */
.ld-signin { margin-right: var(--s4); font-size: var(--t-sm); }
.ld-have { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.ld-have .link-btn { font-size: var(--t-sm); }

/* Вход и регистрация: та же карточка, что у онбординга, только уже — полей всего два. */
.auth-card { width: min(430px, 100%); }
.auth-card .fields { gap: 16px; }
.auth-card .input { width: 100%; }
.auth-swap {
  margin-top: 2px; text-align: center;
  font-size: var(--t-sm); color: var(--ink-3);
}
.auth-swap .link-btn { font-size: inherit; }
.auth-code { font-family: var(--f-mono, monospace); font-size: 24px; letter-spacing: .3em; text-align: center; }
.auth-code-again { margin: 0; }
.auth-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink); font-size: var(--t-sm); line-height: 1.45;
}
.auth-note .ic { flex: none; margin-top: 2px; color: var(--accent); }
.auth-code-again .link-btn { font-size: inherit; min-height: 36px; }
.auth-forgot { justify-self: end; min-height: 36px; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 520px) {
  .auth-card { margin-top: 3vh; padding: 22px 18px; }
  .auth-card h1 { font-size: 26px; }
}

/* Список болей остался без цифры справа — на широком экране читается в две колонки. */
.ld-pain-in .ld-head-list { margin-top: var(--s3); }
@media (min-width: 760px) {
  .ld-pain-in .ld-head-list {
    grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 56px);
  }
}

/* Шесть сцен: заголовок сцены и одна строка объяснения. Двумя-тремя колонками, как позволит ширина. */
.ld-does {
  margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s5) clamp(20px, 4vw, 56px);
}
.ld-does-it { display: grid; gap: 6px; align-content: start; padding-top: var(--s3); border-top: 1px solid var(--line); }
.ld-does dt { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.ld-does dd { margin: 0; font-size: var(--t-base); color: var(--ink-2); line-height: 1.5; }

/* ================= бумажный слой лендинга =================
   Включается классом .paper на <html> из web/features/paper.js.
   Отрыв листа, бумага, свет, живые часы, переписка, разбор фразы. */

/* 1. бумага: у соседних листов разный лист бумаги, чтобы не повторялась */
.paper .ld-leaf {
  background-image:
    linear-gradient(color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)),
    url(media/paper-a.jpg);
  background-size: auto, 360px;
}
.paper .ld-leaf:nth-of-type(even) {
  background-image:
    linear-gradient(color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)),
    url(media/paper-b.jpg);
}

.paper .ld-leaf.is-night { background-image: none; }

/* 2. нижний край листа оторван, а не отрезан по линейке */
.paper .ld-leaf::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; z-index: 2;
  background: var(--ground); pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='12'%3E%3Cpath%20d='M0%204%20L6%207%20L12%203%20L19%208%20L26%204%20L33%209%20L40%205%20L47%208%20L54%204%20L60%207%20L64%205%20L64%2012%20L0%2012%20Z'%20fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='12'%3E%3Cpath%20d='M0%204%20L6%207%20L12%203%20L19%208%20L26%204%20L33%209%20L40%205%20L47%208%20L54%204%20L60%207%20L64%205%20L64%2012%20L0%2012%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 64px 12px; mask-size: 64px 12px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* 3. листы складываются в стопку: каждый следующий прижимает предыдущий.
   Степень прижатия считает paper.js и кладёт в --q. */
.paper .ld-leaf { transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  /* класс pp-stick ставит paper.js только тем листам, что помещаются на экране */
  .paper .ld-leaf.pp-stick { position: sticky; top: clamp(12px, 3vh, 40px); }
  .paper .ld-leaf.is-end { position: static; }
  /* Прижатый лист только уменьшается и слегка заваливается. Гасить его прозрачностью
     нельзя: под ним лежит предыдущий, и он просвечивал бы сквозь текст. */
  .paper .ld-leaf.in.pp-stick {
    transform: scale(calc(1 - var(--q, 0) * 0.06)) rotate(calc(var(--q, 0) * -0.35deg));
  }
  /* Высокий лист не гасим: под ним лежит прижатый предыдущий, и он просвечивал бы насквозь. */
  .paper .ld-leaf.in:not(.pp-stick) {
    transform: translateY(calc(var(--tear, 0) * -14px)) rotate(calc(var(--tear, 0) * -0.4deg));
  }
}

/* 4. тёплый свет сверху-слева — один на всю страницу, как лампа в кадре */
.ld-on::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 80% at 10% -12%, rgba(255, 214, 150, .07), transparent 62%);
}

/* 5. живые часы в листе дня и пометка у ближайшей строки */
.paper .pp-clock { font-family: var(--f-mono); font-style: normal; font-size: var(--t-xs); color: var(--accent); letter-spacing: .04em; }
.paper .ld-row.is-now { box-shadow: inset 2px 0 0 var(--accent); }

/* 6. заголовок собирается по словам. Один раз за сеанс */
.paper .pp-w { display: inline-block; opacity: 0; animation: pp-word .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes pp-word { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .paper .pp-w { opacity: 1; animation: none; } }

/* 7. переписка оживает: «Готово» нажимается, ответ приходит */
.paper .ld-chat[data-u10] .ld-bubble.mine,
.paper .ld-chat[data-u10] .ld-bubble:last-child {
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.paper .ld-chat.is-done .ld-bubble.mine,
.paper .ld-chat.is-done .ld-bubble:last-child,
.paper .ld-chat.is-later .ld-bubble.mine { opacity: 1; transform: none; }
.paper .ld-chat[data-u10] .ld-kb span { cursor: pointer; transition: background-color .15s var(--ease); }
.paper .ld-chat.is-done .ld-kb, .paper .ld-chat.is-later .ld-kb { opacity: .45; pointer-events: none; }

/* 8. поле разбора: печатаешь фразу — видно, что поняли */
.pp-try { margin-top: var(--s4); display: grid; gap: 8px; }
.pp-try-in { width: 100%; }
.pp-out { margin: 0; display: grid; gap: 6px; }
.pp-out > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pp-out dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.pp-out dd { margin: 0; font-weight: 600; color: var(--ink); }

/* 9. кнопка снизу на телефоне — только после первого экрана и не поверх ввода */
.pp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.pp-dock .btn { width: 100%; }
@media (max-width: 760px) {
  .paper.pp-dock-on:not(.pp-typing) .pp-dock { display: block; }
  .paper.pp-dock-on .ld-leaf.is-end { padding-bottom: 96px; }
}

/* 10. фокус с клавиатуры виден всегда и по форме листа */
.paper :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* 11. плёнка на первом экране — тот же отрыв, только снятый по-настоящему.
   Устроено как на TrollShield: зацикленное видео на весь герой, поверх вуаль, текст сверху. */
.paper .ld-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); }
.pp-film {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: 62% 50%; pointer-events: none;
  opacity: 0; transition: opacity 1s var(--ease);
  filter: saturate(1.05) contrast(1.02);

}
.ld-hero.pp-film-on .pp-film { opacity: .8; }
/* вуаль: слева и сверху почти глухо, справа и снизу плёнка проступает */
.paper .ld-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* вуаль держит только читаемость текста слева — плёнку прятать больше не от чего */
    linear-gradient(90deg,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 84%, transparent) 36%,
      color-mix(in srgb, var(--ground) 30%, transparent) 60%,
      transparent 84%),
    linear-gradient(
      color-mix(in srgb, var(--ground) 52%, transparent) 0%,
      transparent 55%,
      color-mix(in srgb, var(--ground) 44%, transparent) 100%);
}
.paper .ld-hero-copy, .paper .ld-hero-stage { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .ld-hero.pp-film-on .pp-film { opacity: .75; }
  .paper .ld-hero::after {
    background: linear-gradient(
      color-mix(in srgb, var(--ground) 88%, transparent) 0%,
      color-mix(in srgb, var(--ground) 78%, transparent) 30%,
      color-mix(in srgb, var(--ground) 34%, transparent) 58%,
      color-mix(in srgb, var(--ground) 76%, transparent) 100%);
  }
}
/* видео больше не прячется при «уменьшить движение»: у него есть кнопка паузы */

/* ================= приёмы каталога, переложенные на наши токены =================
   Зерно, полоса прочитанного, значок с точкой, подъём карточек, раскрытие возражений,
   бегущая рамка у лучшего тарифа, блик на кнопке, ступенчатое появление списков. */

/* зерно: снимает цифровую гладкость, держит бумажный характер */
.ld-on::before {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E");
  opacity: .03; /* без режима наложения: он заставлял перерисовывать весь экран каждый кадр */
}

/* полоса прочитанного */
.pp-bar {
  position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 50;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* значок с живой точкой над заголовком */
.ld-badge {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: var(--t-xs); color: var(--ink-2); letter-spacing: .01em;
}
.ld-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: pp-pulse 2.4s var(--ease) infinite;
}
@keyframes pp-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .ld-badge-dot { animation: none; } }

/* пятно света под курсором на первом экране */
.paper .ld-hero { --gx: 70%; --gy: 30%; }
.paper .ld-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 40% at var(--gx) var(--gy),
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.paper .ld-hero.pp-glow-on::before { opacity: 1; }

/* карточки приподнимаются под курсором — как в бенто-сетках каталога */
.paper .ld-does-it, .paper .ld-list li, .paper .ld-plan {
  transition: transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
@media (hover: hover) {
  .paper .ld-does-it:hover { transform: translateY(-3px); border-top-color: var(--accent); }
  .paper .ld-list li:hover { transform: translateY(-2px); }
  .paper .ld-plan:hover { transform: translateY(-3px); }
}

/* возражения раскрываются по одному */
.ld-qa-item { cursor: pointer; }
.ld-qa-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  list-style: none; cursor: pointer;
}
.ld-qa-item > summary::-webkit-details-marker { display: none; }
.ld-qa-sign {
  flex: none; width: 18px; height: 18px; margin-top: 3px; position: relative;
  transition: transform .25s var(--ease);
}
.ld-qa-sign::before, .ld-qa-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  transform: translate(-50%, -50%); border-radius: 1px;
}
.ld-qa-sign::before { width: 14px; height: 2px; }
.ld-qa-sign::after { width: 2px; height: 14px; transition: transform .25s var(--ease); }
.ld-qa-item[open] .ld-qa-sign::after { transform: translate(-50%, -50%) scaleY(0); }
.ld-qa-item > p { margin-top: var(--s3); }
@media (prefers-reduced-motion: no-preference) {
  .ld-qa-item[open] > p { animation: pp-open .35s var(--ease); }
}
@keyframes pp-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* у годового тарифа рамка едет по кругу — тихо, без мигания */
.paper .ld-plan.is-best { position: relative; }
.paper .ld-plan.is-best::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: conic-gradient(from var(--turn, 0deg),
    transparent 0deg, var(--accent) 40deg, transparent 120deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pp-turn 6s linear infinite;
}
@property --turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pp-turn { to { --turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .paper .ld-plan.is-best::after { animation: none; } }

/* блик по главной кнопке — один раз при наведении */
.paper .ld .btn.primary { position: relative; overflow: hidden; }
.paper .ld .btn.primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  transform: translateX(-120%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .paper .ld .btn.primary:hover::after { transition: transform .7s var(--ease); transform: translateX(120%); }
}

/* списки появляются по очереди */
@media (prefers-reduced-motion: no-preference) {
  .paper .ld-leaf .ld-head-list li,
  .paper .ld-leaf .ld-does-it,
  .paper .ld-leaf .ld-list li,
  .paper .ld-leaf .ld-steps li,
  .paper .ld-leaf .ld-plan { opacity: 0; transform: translateY(10px); }
  .paper .ld-leaf.in .ld-head-list li,
  .paper .ld-leaf.in .ld-does-it,
  .paper .ld-leaf.in .ld-list li,
  .paper .ld-leaf.in .ld-steps li,
  .paper .ld-leaf.in .ld-plan {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
}

/* бегущая лента разделов: имена идут без конца, края растворяются */
.pp-ribbon {
  margin-top: var(--s5); overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pp-ribbon-track {
  display: flex; align-items: center; gap: 14px; width: max-content;
  animation: pp-run 38s linear infinite;
}
.pp-ribbon span {
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.pp-ribbon i { color: var(--accent); font-style: normal; }
@keyframes pp-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pp-ribbon-track { animation: none; } }

/* подсветка под курсором внутри карточки */
.paper .ld-does-it, .paper .ld-plan, .paper .ld-qa-item { position: relative; isolation: isolate; }
.paper .ld-does-it::after, .paper .ld-plan::before, .paper .ld-qa-item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(180px 140px at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
@media (hover: hover) {
  .paper .ld-does-it:hover::after,
  .paper .ld-plan:hover::before,
  .paper .ld-qa-item:hover::after { opacity: 1; }
}

/* точечная сетка на тёмном листе — глубина без картинки */
.paper .ld-leaf.is-night::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 20%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 30% 20%, #000, transparent 75%);
  height: auto; inset: 0; bottom: 0; z-index: 0;
}

/* световая нить между тремя шагами */
.paper .ld-steps { position: relative; }
.paper .ld-steps li { position: relative; }
.paper .ld-steps li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transform: scaleX(.2); transform-origin: 0 50%;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.paper .ld-leaf.in .ld-steps li::before { opacity: 1; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .paper .ld-steps li::before { transition: none; } }

/* магнитная кнопка не должна дёргаться при возврате */
.paper .ld-go { transition: transform .25s var(--ease), background-color .2s var(--ease); }

/* ================= крупные приёмы каталога: то, что видно с первого взгляда ================= */

/* ---------- навигация-пилюля сверху */
.ld-nav {
  position: fixed; z-index: 45; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1120px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.paper.pp-scrolled .ld-nav {
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.ld-nav-brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: var(--t-sm);
}
.ld-nav-brand .mark { border-radius: 7px; }
.ld-nav-links { display: flex; gap: 4px; }
.ld-nav-links a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: var(--t-sm); transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ld-nav-links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ld-nav-end { display: flex; align-items: center; gap: 8px; }
.ld-nav-end .seg { transform: scale(.88); transform-origin: 100% 50%; }
.ld-nav-cta { border-radius: 999px; padding-inline: 16px; }
@media (max-width: 900px) { .ld-nav-links { display: none; } }
@media (max-width: 520px) {
  .ld-nav { top: 10px; padding-left: 12px; gap: 6px; }
  .ld-nav-brand span { display: none; }
  .ld-nav .ld-signin { display: none; }
}
/* первый экран не прячется под навигацией */
.paper .ld-hero { margin-top: 64px; }

/* ---------- лучи и сетка на фоне всей страницы */
.pp-beams {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; color: var(--accent);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 80%);
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 80%);
}
.pp-beams svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-beam-base { fill: none; stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 1; }
.pp-beam {
  fill: none; stroke: url(#ppBeam); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 140 1600; stroke-dashoffset: 1740;
  animation: pp-beam 7s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes pp-beam { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-beam { animation: none; opacity: 0; } }
.paper .onb.ld { position: relative; z-index: 1; }

/* ---------- слово в первом экране меняется само */
.ld-rot {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.1vw, 28px); color: var(--ink-2);
}
.ld-rot-w { position: relative; display: inline-grid; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.ld-rot-w b {
  grid-area: 1 / 1; white-space: nowrap; font-weight: 700;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #ffd08a));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(110%); opacity: 0;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s var(--ease);
}
.ld-rot-w b.is-on { transform: none; opacity: 1; }
.ld-rot-w b.is-out { transform: translateY(-110%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ld-rot-w b { transition: none; } }

/* ---------- главная кнопка: свет бежит по краю, вокруг мягкое свечение */
.paper .ld-go { position: relative; isolation: isolate; box-shadow: 0 0 0 0 transparent; }
.paper .ld-go::before {
  /* кольцо внутри кнопки: снаружи его срезал бы overflow, нужный для блика */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 70%, #ffd6a8 82%, #fff 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pp-spin 3.2s linear infinite;
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pp-spin { to { --spin: 360deg; } }
.paper .ld-hero .ld-go, .paper .ld-end-in .ld-go { animation: pp-halo 3.2s var(--ease) infinite; }
@keyframes pp-halo {
  0%, 100% { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow: 0 14px 48px -6px color-mix(in srgb, var(--accent) 85%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .paper .ld-go::before, .paper .ld-go { animation: none; } }

/* ---------- бенто: шесть сцен разного размера, у каждой свой мини-экран */
.ld-does.is-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ld-does.is-bento .ld-does-it {
  padding: 18px; border-radius: 18px; gap: 8px;
  background: color-mix(in srgb, var(--surface) 60%, var(--ground));
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.ld-does.is-bento .ld-does-it[data-n="1"],
.ld-does.is-bento .ld-does-it[data-n="4"],
.ld-does.is-bento .ld-does-it[data-n="5"] { grid-column: span 2; }
@media (max-width: 860px) {
  .ld-does.is-bento { grid-template-columns: minmax(0, 1fr); }
  .ld-does.is-bento .ld-does-it { grid-column: auto !important; }
}
.ld-viz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 64px;
  padding: 12px 14px; margin-bottom: 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--ground) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  font-size: var(--t-sm); color: var(--ink-2);
}
.viz-person { display: inline-flex; align-items: center; gap: 6px; opacity: .55; position: relative; }
.viz-person.is-on { opacity: 1; }
.viz-person.is-on .av { box-shadow: 0 0 0 2px var(--mc), 0 0 16px var(--mc); }
.viz-person i { font-style: normal; }
.viz-person b {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink, #fff);
}
.ld-viz em { font-style: normal; color: var(--ink-3); }
.viz-lo s { display: block; width: 100%; color: var(--ink-3); }
.viz-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.viz-btns u {
  text-decoration: none; padding: 5px 10px; border-radius: 8px; font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink);
}
.viz-btns u:first-child { background: var(--accent); border-color: transparent; color: var(--accent-ink, #fff); }
.viz-ic {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.viz-ic svg { width: 18px; height: 18px; }
.viz-chip { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.viz-track { flex: 1; min-width: 90px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.viz-track i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ffc78a); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.ld-leaf.in .viz-track i { width: var(--w); }
.viz-bar b, .viz-quiet b { color: var(--ink); font-weight: 600; }
.viz-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--accent); position: relative; flex: none; }
.viz-switch i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* ---------- фраза проявляется по мере прокрутки */
.pp-rv { opacity: .16; transition: opacity .35s var(--ease); }
.pp-rv.is-lit { opacity: 1; }

/* ---------- огромная надпись в подвале */
.ld-giant {
  margin-top: clamp(28px, 6vw, 72px); width: 100%; text-align: center; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-weight: 700; line-height: .78; letter-spacing: -.04em;
  font-size: clamp(72px, 19vw, 300px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 34%, transparent), transparent 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ================= первый экран объясняет продукт =================
   Значок называет категорию, подзаголовок — механику, цепочка — путь в три шага. */
.ld-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ld-flow li {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: var(--t-sm); color: var(--ink); white-space: nowrap;
}
.ld-flow li:not(:first-child) { margin-left: 22px; }
.ld-flow li:not(:first-child)::before {
  content: "→"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); color: var(--ink-3);
}
.ld-flow-ic {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
}
.ld-flow-ic svg { width: 13px; height: 13px; }
/* значок-категория читается как подпись, а не как уведомление */
.ld-badge { font-size: var(--t-sm); color: var(--ink); font-weight: 600; }
/* на телефоне продукт должен попасть в первый экран: убираем пустоту сверху */
@media (max-width: 860px) {
  .paper .ld-hero { margin-top: 58px; padding-top: 18px; }
  .ld-hero-copy { gap: 14px; }
}
@media (max-width: 520px) {
  /* цепочка плотнее: первые два шага встают в одну строку */
  .ld-flow li { padding: 4px 10px 4px 4px; font-size: 13px; gap: 6px; }
  .ld-flow li:not(:first-child) { margin-left: 18px; }
  .ld-flow li:not(:first-child)::before { left: -14px; }
  .ld-flow-ic { width: 20px; height: 20px; }
}
@media (max-width: 520px) {
  /* первый экран на телефоне — во всю ширину: текстовая колонка шире, строк меньше */
  .paper .ld-hero { margin-inline: -20px; padding-inline: 18px; border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .ld-claim { font-size: 34px; }
  /* три шага столбиком: так они не переносятся по одному и занимают меньше места */
  .ld-flow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ld-flow li { background: none; border: 0; padding: 0; }
  .ld-flow li:not(:first-child) { margin-left: 0; }
  .ld-flow li:not(:first-child)::before { content: none; }
}
/* на компьютере объяснение и кнопка тоже должны влезть в первый экран:
   заголовок на строку-две короче, пустоты над ним меньше */
@media (min-width: 861px) {
  .paper .ld-hero { padding-top: 28px; }
  .paper .ld-claim { font-size: clamp(44px, 4.3vw, 64px); }
  .paper .ld-hero-copy { gap: 14px; }
}

/* согласие с условиями под формой регистрации */
.auth-agree { margin: 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.auth-agree a { color: var(--ink-2); text-underline-offset: 2px; }

/* подсказка под полем «Что купить»: на всю ширину формы */
.shop-add .shop-hint { grid-column: 1 / -1; margin: -2px 0 0; }
/* «Ждут решения» в «Наградах»: текст просьбы во всю строку, кнопки под ним. */
.asks-wait .care-list li { padding: 10px 12px; gap: 10px; }
.asks-wait .care-list li > span:nth-child(2) { flex: 1 1 200px; font-size: 14px; font-weight: 600; }
.asks-wait .care-list li > .row { flex: 1 1 100%; }
/* Поле покупок — на несколько строк: строка = позиция. */
.shop-add textarea[name="title"] { grid-column: 1 / -1; min-height: 84px; resize: vertical; line-height: 1.45; }

/* ---------- приложение на телефоне: подсказка установки, уведомления, вход на сайт для семьи */
.dv-help { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: var(--t-sm); line-height: 1.5; }
.dv-help b { display: block; margin-bottom: 6px; }
.dv-help ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dv-help p { margin: 0; }

/* Кнопка установки: значок + подпись */
.dv-install { display: inline-flex; align-items: center; gap: 8px; }
.dv-install .ic { width: 18px; height: 18px; flex: none; }
.side-install { justify-self: start; }

/* Верхняя панель витрины: «Приложение»; на телефоне только значок */
.ld-nav-app {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px;
  background: none; color: var(--ink-2); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ld-nav-app:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ld-nav-app .ic { width: 18px; height: 18px; flex: none; }
@media (max-width: 520px) {
  .ld-nav-app { width: 40px; padding: 0; justify-content: center; }
  .ld-nav-app span { display: none; }
}

/* Как поставить вручную (Safari, Firefox): карточка внизу экрана поверх всего */
.dv-sheet {
  position: fixed; z-index: 1000; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  padding: 16px 48px 16px 18px; border-radius: 16px;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  animation: dv-up .25s var(--ease) both;
}
.dv-sheet .dv-help { margin: 0; padding: 0; background: none; border-radius: 0; }
.dv-sheet-x { position: absolute; top: 8px; right: 8px; }
@keyframes dv-up { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .dv-sheet { animation: none; } }
.dv-row .setting-main { min-width: 0; }
.web-invite { flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.web-invite .input { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.web-invite p { flex-basis: 100%; margin: 0; }

/* «кто я» подписью, когда вход свой */
.as-static { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); padding: 4px 0; }

/* Закрытые выдвижные панели (меню на телефоне, чат бота) уезжают за край экрана.
   Этого мало: их кнопки оставались доступны с клавиатуры и для экранного диктора —
   человек «проваливался» в невидимое меню. Закрытая панель теперь скрыта полностью,
   а видимость выключается после того, как панель доехала, — движение не ломается. */
.app:not(.drawer-open) .side { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.app.drawer-open .side { visibility: visible; transition: transform .22s ease; }
.app:not(.bot-open) .bot { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.app.bot-open .bot { visibility: visible; transition: transform .22s ease; }

/* ---------- доступ семьи: экран оплаты, полоска «осталось N дней», окна (features/billing.js) */
.bl-card { width: min(520px, 100%); display: grid; gap: 14px; }
.bl-card h1 { margin: 0; }
.bl-card p { margin: 0; }
.bl-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-plan { display: grid; gap: 2px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.bl-plan b { font-family: var(--f-display, inherit); font-size: 24px; letter-spacing: -.01em; }
.bl-plan span { font-size: var(--t-sm); color: var(--ink-3); }
.bl-plan.is-best { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.bl-manual { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.bl-write { justify-self: start; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.bl-ask { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.bl-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
.bl-foot .link-btn { min-height: 36px; }
.bl-banner { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 500; }
.bl-banner > span { flex: 1; min-width: 200px; }
.bl-banner .ic { color: var(--accent); }
.setting-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bl-sheet { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.bl-dialog { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 14px; padding: 20px; border-radius: 16px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.bl-dialog h2 { margin: 0; font-size: 20px; }
.bl-dialog p { margin: 0; }
.bl-dialog form { display: grid; gap: 14px; }
.bl-dialog .btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 420px) { .bl-plans { grid-template-columns: 1fr; } }
.bl-bye { position: fixed; z-index: 1000; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); max-width: calc(100vw - 32px); }

/* ---------- знакомство (features/guide.js): карточка на листе дня, экскурсия, подсказки разделов */
.guide-card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%, var(--surface) 60%);
}
.guide-card h2 { margin: 0 0 4px; font-family: var(--f-display); font-size: 21px; line-height: 1.15; letter-spacing: -.005em; }
.guide-card p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.guide-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* маленький отрывной листок с «1» — тот же знак, что лист дня */
.guide-sheet {
  position: relative; display: grid; place-items: center; width: 58px; height: 66px; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  border-top: 14px solid var(--accent);
}
.guide-sheet b { font-family: var(--f-display); font-size: 34px; line-height: 1; margin-top: 2px; }
.guide-sheet i { position: absolute; top: -10px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); }
.guide-sheet i:first-child { left: 14px; }
.guide-sheet i:nth-child(2) { right: 14px; }
@media (max-width: 480px) {
  .guide-card { grid-template-columns: 1fr; gap: 12px; }
  .guide-sheet { display: none; }
}

.guide-tip { background: var(--surface); border: 1px solid var(--line); font-weight: 400; align-items: center; }
.guide-tip-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); flex: none; }
.guide-tip-t { flex: 1; min-width: 200px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.guide-link { display: inline-flex; align-items: center; gap: 8px; }
.guide-link .ic { width: 16px; height: 16px; flex: none; }

.tour { position: fixed; inset: 0; z-index: 900; }
.tour-veil { position: absolute; inset: 0; }
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 max(200vw, 200vh) rgba(10, 9, 8, .62), 0 0 0 2px var(--accent), 0 0 24px 4px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: top .38s var(--ease), left .38s var(--ease), width .38s var(--ease), height .38s var(--ease), opacity .2s;
}
.tour-card {
  position: fixed; width: min(360px, calc(100vw - 32px)); padding: 22px 18px 14px; border-radius: 14px;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  transition: top .38s var(--ease), left .38s var(--ease);
}
/* дырочки сверху — как у отрывного календаря */
.tour-holes { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; }
.tour-holes::before, .tour-holes::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.tour-card::after {
  content: ''; position: absolute; left: calc(var(--arrow-x, 50%) - 7px); width: 14px; height: 14px;
  background: var(--surface-3); border: 1px solid var(--line); transform: rotate(45deg);
}
.tour-card[data-side="below"]::after { top: -8px; border-right: 0; border-bottom: 0; }
.tour-card[data-side="above"]::after { bottom: -8px; border-left: 0; border-top: 0; }
.tour-card[data-side="mid"]::after { display: none; }
.tour-x { position: absolute; top: 6px; right: 6px; }
.tour-k { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.tour-dots { display: flex; gap: 4px; }
.tour-dots i { width: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.tour-dots i.on { background: var(--accent); }
.tour-h { margin: 0 0 6px; font-family: var(--f-display); font-size: 22px; line-height: 1.15; padding-right: 28px; }
.tour-t { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.tour-foot .link-btn { min-height: 36px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }
.bill-nums > .field { flex: 1; min-width: 0; }
.bill-hint { margin: 0; }

/* ======================================================================
   Выпуск · вёрстка перед первыми людьми (телефон 375 и компьютер 1280)
   ====================================================================== */

/* «Меню» на телефоне — ряд дней вбок, как «Неделя»: семь карточек столбиком были пятью экранами.
   При открытии ряд встаёт на сегодняшний день (app.js, keepRowsInView). */
@media (max-width: 620px) {
  .menu-grid {
    display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 2px 2px var(--s2); overscroll-behavior-x: contain;
  }
  .menu-grid::-webkit-scrollbar { display: none; }
  .menu-day { flex: 0 0 86%; scroll-snap-align: start; }
}

/* Цели для пальца не меньше 40 px: рубрики, разделы, кнопки шапки, быстрые даты, «Ещё N» */
@media (max-width: 760px) {
  .rub, .rub2 { min-height: 40px; }
  .rubrics { row-gap: 0; }
}
.mast-tools .icon-btn { width: 40px; height: 40px; }
.mast-tools .btn, .mast-tools .btn.primary { min-height: 40px; }
@media (max-width: 860px) {
  .mast-tools { gap: 2px; }
  .mast-me { width: 40px; height: 40px; }
  .mast-name { min-height: 40px; }
}
.chip-d { min-height: 40px; }
.wk-more { min-height: 40px; }
.howto summary { min-height: 40px; }
/* У значков «SOS» и «Вставить текст» на широком экране — видимая подпись */
.tb-label { display: none; }
@media (min-width: 1000px) {
  .mast-tools .icon-btn:has(.tb-label) {
    width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px;
    font-size: var(--t-sm); font-weight: 600;
  }
  .mast-tools .tb-label { display: inline; white-space: nowrap; }
}

/* Прокручивается #main, и титул раздела прилипает внутри него — ниже шапки, а не под ней */
@media (min-width: 1240px) { .plate { top: 96px; } }

/* «Неделя»: время у дела в одну строку */
.wk-chip .wk-time { white-space: nowrap; }

/* Суммы не рвутся на две строки */
.pocket-sum, .bud-sum, .sb-key b, .bar > b, .exp-list b, .stock-item .shop-qty { white-space: nowrap; }

/* «Запасы»: название и остаток, ниже место, ниже кнопки — у каждой своя цель для пальца */
.stock-item { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); }
.stock-meta { grid-column: 1; }
.stock-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.stock-acts .link-btn { min-width: 44px; min-height: 40px; justify-content: center; padding: 0 var(--s2); }
.stock-acts .link-btn:first-child { margin-left: calc(var(--s2) * -1); }
.stock-acts .icon-btn { margin-left: auto; width: 40px; height: 40px; }
@media (min-width: 761px) {
  .stock-item { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .stock-meta { grid-column: auto; }
  .stock-acts { grid-column: auto; flex-wrap: nowrap; }
}

/* «Когда-нибудь»: кто и что — в строку, действия под ними одним рядом */
.sd-item { grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s3); }
.sd-acts { grid-column: 2; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sd-acts .link-btn { min-height: 40px; }
.sd-acts .icon-btn { margin-left: auto; }
@media (min-width: 761px) {
  .sd-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sd-acts { grid-column: 3; flex-wrap: nowrap; }
}

/* «Документы»: аватар и имя рядом, а не столбиком */
.doc-list li > span { display: inline-flex; align-items: center; gap: 6px; }
.doc-list li > span:first-child { flex: 1 1 auto; min-width: 0; }
.doc-list li > span:nth-child(2) { flex: 0 0 auto; white-space: nowrap; }
.doc-list li > .pill { margin-left: auto; }
@media (max-width: 620px) { .doc-list li > span:first-child { flex-basis: 100%; } }

/* «Подписки»: название и сумма сверху, срок и «Отключить» под ними — всегда на тех же местах */
.sub-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px var(--s3); }
.sub-list li > span:nth-child(1) { grid-row: 1; grid-column: 1; min-width: 0; }
.sub-list li > span:nth-child(2) { grid-row: 1; grid-column: 2 / -1; justify-self: end; white-space: nowrap; font-weight: 700; }
.sub-list li > .muted { grid-row: 2; grid-column: 1; }
.sub-list li > .link-btn { grid-row: 2; grid-column: 2; justify-self: end; }
.sub-list li > .icon-btn { grid-row: 2; grid-column: 3; }
.sub-list li > .pill { grid-row: 3; grid-column: 1; justify-self: start; }

/* «Конверты»: полоса во всю ширину, а не 20 px между словами */
.env-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--s3); }
.env-list li > span:first-child { grid-row: 1; grid-column: 1; }
.env-list li > .muted { grid-row: 1; grid-column: 2; text-align: right; }
.env-list li > .bar-track { grid-row: 2; grid-column: 1 / -1; width: 100%; }
.env-list li > .pill { grid-column: 1 / -1; justify-self: start; }

/* «Копилка»: главная кнопка во всю ширину, две остальные — парой, без одинокой «Карточки» */
.row.pocket-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.pocket-acts:has(> :nth-child(3)) > .primary { grid-column: 1 / -1; }

/* Подписи в карточке человека переносятся, а не режутся многоточием */
.mcard-facts { white-space: normal; overflow: visible; text-overflow: clip; }
/* Карточка рядом с формой добавления не тянется на всю высоту формы */
.mgrid { align-items: start; }

/* Пустой экран: без водяного знака поверх рисунка и без подписи, налезавшей на тень кнопки */
.empty::before, .empty::after { content: none; }
/* Пустой день: одна строка-приглашение и кнопка — рисунок уже сказан листом дня */
.view-day .empty .empty-art, .view-day .empty .sec-art, .view-day .empty .empty-hint { display: none; }
.view-day .empty { gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s5); }

/* Один облик полей, кнопок и карточек */
.search-line .big-input {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 4px 14px; margin-left: 0;
}
.search-line .big-input:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.search-line .big-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn.xs { border-radius: var(--r-md); }
.ds-tom b { font-family: var(--f-body); font-weight: 600; }
.card .card-form { background: transparent; box-shadow: none; border: 0; padding: 0; margin-top: var(--s3); }

/* Один знак и одно написание «Nidalumi» везде */
.mast-name, .side-name, .onb-eyebrow, .ld-brand, .rail-mark b { text-transform: none; letter-spacing: .01em; }
.mark { border-radius: 9px; }
.mark.logo { width: 34px; height: 34px; margin: 0; vertical-align: middle; }

/* ======================================================================
   Часовой пояс и валюта семьи: первый заход, вопрос приглашённому, настройки
   (web/features/setup.js)
   ====================================================================== */
.modal:has(.setup) { width: min(460px, calc(100vw - 24px)); }
.setup { gap: 18px; padding: 24px 22px 20px; }
.setup-head { display: grid; gap: 6px; }
.setup-head h2 { font-size: var(--t-2xl); line-height: 1.1; }
.setup-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.setup-sec { display: grid; gap: 8px; }
/* В окне из настроек заголовок уже назвал, что выбираем, — подпись над блоком лишняя */
.setup:not(.is-first) .setup-sec > .field-label:first-child { display: none; }
.setup-now {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); text-align: left;
  transition: border-color .15s;
}
.setup-now:hover { border-color: var(--ink-3); }
.setup-now[tabindex="-1"] { cursor: default; border-color: var(--line); }
.setup-clock { font-family: var(--f-display); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.setup-now-text { display: grid; gap: 2px; min-width: 0; }
.setup-now-text b { font-size: var(--t-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-change { color: var(--accent); font-weight: 600; font-size: 13px; display: inline-flex; }
.setup-find { display: grid; gap: 8px; }
.setup-near { margin-top: 2px; }
.setup-list {
  display: grid; gap: 2px; max-height: min(260px, 34dvh); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.setup-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 6px 10px; border-radius: var(--r-sm); text-align: left; }
.setup-opt:hover { background: var(--surface-2); }
.setup-opt.on { background: var(--accent-soft); }
.setup-opt-main { display: grid; flex: 1; min-width: 0; }
.setup-opt-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-opt-time { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.setup-sym { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.setup-none { margin: 6px 8px; }
.setup-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cur-chip {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 8px 4px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .15s, background .15s;
}
.cur-chip:hover { border-color: var(--ink-3); }
.cur-chip b { font-size: 21px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-chip span { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.cur-chip.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cur-chip.on span { color: var(--accent); }
.setup-other { justify-self: start; min-height: 36px; }
.setup-sample { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.setup-sample b { font-size: var(--t-md); }
.setup-go { width: 100%; }
.setup-later { margin: -8px 0 0; text-align: center; }
.setup-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.setup-zone { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.setup-zone b { font-size: var(--t-lg); line-height: 1.2; overflow-wrap: anywhere; }
.setup-zone.on { border-color: var(--accent); background: var(--accent-soft); }
.setup-acts { display: grid; gap: 8px; }
.place-set { gap: 0; padding: 4px 14px 12px; }
.place-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  min-height: 50px; text-align: left; color: var(--ink);
}
.place-row + .place-row { border-top: 1px solid var(--line); }
.place-row:hover .place-v { color: var(--ink); }
.place-ic { color: var(--ink-3); display: inline-flex; }
.place-k { font-weight: 600; }
.place-v { justify-self: end; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-set p { margin-top: 6px; }
@media (max-width: 480px) {
  .setup { padding: 20px 16px 16px; gap: 16px; }
  .setup-head h2 { font-size: 24px; }
  .setup-clock { font-size: 26px; }
  .place-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .place-row .place-k { grid-column: 2; }
  .place-row .place-v { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -8px; padding-bottom: 8px; }
  .place-row > .ic:last-child { grid-column: 3; grid-row: 1 / 3; }
  .place-row .place-ic { grid-row: 1 / 3; }
}

/* ---------- Раздел «Настройки»: группы с подписями, опасное — отдельно и тише остального */
.set-group { margin-bottom: 22px; }
.set-group .settings { max-width: 720px; }
.set-group .card { margin: 0; }
.set-mine .mrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-tg .tgbox { padding: 0; }
.set-danger .setting { border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); box-shadow: none; }
.set-danger .section-head h2 { color: var(--red); }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; }
/* Ссылка из «Семьи» в «Настройки» — заметная строка, а не мелкий текст */
.set-link { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 720px; margin-top: 18px; padding: 14px;
  background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.set-link > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.set-link:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }

/* «Что показывать семье»: название слева, переключатель ровной колонкой справа; нажимается вся строка. */
.sec-list li { padding: 0; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 44px; padding: 6px var(--s3); cursor: pointer; }
.sec-row b { font-weight: 600; }