/* Шрифты лежат на сайте: одинаково на любом устройстве и без внешних запросов.
   Inter — интерфейс, Literata — текст сна, как книжный шрифт в Apple Books. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; 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: 100 900; 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: Literata; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/literata-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/literata-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: Literata; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/literata-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/literata-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; }

/* Дополнительные шрифты со страницы «Внешний вид»; браузер качает файл, только если шрифт выбран. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/golos-text-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: "IBM Plex Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/ibm-plex-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/ibm-plex-sans-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-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: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-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: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-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; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-latin-400-normal.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: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-serif-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-serif-latin-700-normal.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: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-cyrillic-400-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-latin-400-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 {
  color-scheme: dark;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  /* Палитра «Ночь». Все цвета сайта берутся из этих переменных: тема — это
     просто другой набор значений (см. themes.css). */
  --bg: #0b0d10;
  --surface-sunk: #0e1217;
  --surface: #151a21;
  --surface-2: #1c242e;
  --surface-3: #232a34;
  --surface-4: #2b3039;
  --border: #262d37;
  --border-strong: #3a4553;
  --faint: #5f6b78;
  --muted: #8d98a5;
  --text-soft: #aab4bf;
  --text-body: #d5dee7;
  --text: #e7eef5;
  --text-max: #ffffff;
  --accent-deep: #1e3e5f;
  --accent-line: #37566f;
  --accent-strong: #3b82cc;
  --accent: #72a7d8;
  --accent-ink: #dcebfa;
  --danger-deep: #6d3d42;
  --danger: #e38b8b;
  --danger-ink: #e4b4b4;
  --ok-deep: #2d3d2a;
  --ok: #6fcf97;
  --ok-ink: #e2f0dc;
  --warn-deep: #2a2418;
  --warn-line: #6a5a32;
  --warn: #e8c56a;
  --warn-ink: #e7d7a8;
  --violet-deep: #2c2440;
  --violet: #a98af0;
  --violet-ink: #d9ccf7;
  --rose-deep: #3d2230;
  --rose: #f2789a;
  --rose-ink: #f6c6d4;
  --teal-deep: #1f3a3a;
  --teal: #5fd3c8;
  --teal-ink: #c8f0ec;
  --sidebar: #11141a;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); }
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 226px) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 100vh;
  padding: 14px 14px 14px 0;
}
html.sidebar-ready .app-shell { transition: grid-template-columns .2s ease; }
html.sidebar-resizing .app-shell { transition: none; }
html.sidebar-resizing, html.sidebar-resizing * { cursor: col-resize; user-select: none; }
html.sidebar-collapsed .app-shell { grid-template-columns: 55px minmax(0, 1fr); }
.sidebar-resize {
  position: absolute; top: 12px; right: -7px; bottom: 12px; z-index: 25;
  width: 14px; cursor: col-resize; touch-action: none;
}
.sidebar-resize::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
  border-radius: 2px; background: transparent;
}
.sidebar-resize:hover::before,
html.sidebar-resizing .sidebar-resize::before { background: var(--accent); }
html.sidebar-collapsed .sidebar-resize { display: none; }
html.theme-light .sidebar-resize:hover::before,
html.theme-light.sidebar-resizing .sidebar-resize::before { background: var(--accent); }
.sidebar {
  position: sticky; top: 14px; z-index: 10;
  display: flex; flex-direction: column;
  width: auto; height: calc(100vh - 28px); min-height: 520px; padding: 12px;
  background: linear-gradient(160deg, var(--surface), var(--surface-sunk)); border: 1px solid var(--border); border-radius: 0 18px 18px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
  overflow: visible;
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; }
.side-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.side-tool {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; color: var(--text-soft); border-radius: 11px; text-decoration: none;
}
.side-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-tool:hover, .side-tool:focus-visible { color: var(--text-max); background: var(--surface-3); outline: none; }
.side-tool.is-active { color: var(--text); background: var(--border); }
.side-tool::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.side-tool:hover::after, .side-tool:focus-visible::after { opacity: 1; }
.menu-toggle {
  position: relative; display: grid; place-items: center; flex: 0 0 42px;
  width: 42px; height: 42px; padding: 0;
  color: var(--text); background: var(--surface-4); border: 0; border-radius: 13px;
  cursor: pointer;
}
.menu-toggle:hover { color: var(--text-max); background: var(--border-strong); }
.menu-toggle svg { width: 28px; height: 28px; }
.menu-moon { display: block; }
.menu-moon path { fill: var(--text); }
.menu-toggle::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.menu-toggle:hover::after, .menu-toggle:focus-visible::after { opacity: 1; }
.side-tools .menu-toggle {
  flex: 0 0 36px; width: 36px; height: 36px;
  color: var(--text-soft); background: transparent; border-radius: 11px;
}
.side-tools .menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-tools .menu-toggle:hover, .side-tools .menu-toggle:focus-visible { color: var(--text-max); background: var(--surface-3); }
html.sidebar-collapsed .side-tools .menu-toggle { width: 43px; height: 43px; flex-basis: 43px; }
.side-brand { min-width: 0; color: var(--text); font-size: 16px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.side-brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.new-dream-button {
  /* Same icon box, gap and padding as .nav-item so the labels share one baseline. */
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; margin: auto 0 0; padding: 10px 12px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--accent-deep); border-radius: 13px;
  font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.new-dream-button:hover { background: var(--surface-3); border-color: var(--accent-line); }
.new-dream-button svg {
  width: 24px; height: 24px; flex: 0 0 auto;
  fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round;
}
.sidebar-nav { display: grid; gap: 4px; margin-top: 14px; }
.nav-with-add { position: relative; }
.nav-add {
  position: absolute; top: 50%; right: 4px; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 38px;
  color: var(--text-soft); border-radius: 10px; text-decoration: none;
  transform: translateY(-50%);
}
.nav-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-add:hover, .nav-add:focus-visible, .nav-add.is-active { color: var(--text-max); background: var(--surface-3); outline: none; }
.nav-add::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.nav-add:hover::after, .nav-add:focus-visible::after { opacity: 1; }
/* Корзина живёт в строке «Сны» рядом с плюсом; в свёрнутом меню —
   отдельной строкой, иначе два бейджа налезают друг на друга. */
.nav-with-add .nav-item { padding-right: 80px; }
html.sidebar-collapsed .nav-with-add .nav-item { padding-right: 0; }
html.sidebar-collapsed .nav-add {
  top: 2px; right: 4px; width: 16px; height: 16px;
  color: var(--text-body); background: var(--surface-2); border-radius: 6px;
  transform: none;
}
html.sidebar-collapsed .nav-add svg { width: 11px; height: 11px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 46px; padding: 10px 12px;
  color: var(--muted); border: 0; border-radius: 13px;
  font-size: 14px; line-height: 1.4; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-item:hover { color: var(--text-body); background: var(--surface-2); }
.nav-item.is-active { color: var(--text); background: var(--border); }
.nav-item svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-sub { min-height: 38px; margin: -2px 0 2px 22px; padding: 6px 10px; font-size: 13px; }
.nav-sub svg { width: 18px; height: 18px; }
html.sidebar-collapsed .nav-sub { margin: 0; min-height: 46px; padding: 10px 12px; }
.queue-count { margin: 0; color: var(--muted); font-size: 18px; }
.queue-count b { color: var(--text); font-size: 28px; }
.queue-list { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.queue-list li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); }
.queue-list time { color: var(--muted); font-size: 13px; }
.queue-list a { color: var(--text); font-weight: 680; text-decoration: none; }
.queue-list a:hover { color: var(--accent); }
html.sidebar-collapsed .sidebar { padding: 6px 5px; border-radius: 0 15px 15px 0; }
html.sidebar-collapsed .side-head { flex-direction: column; justify-content: flex-start; gap: 5px; }
html.sidebar-collapsed .side-tools { flex-direction: column; margin-left: 0; }
html.sidebar-collapsed .side-tool { width: 43px; height: 43px; }
html.sidebar-collapsed .nav-item span { display: none; }
/* Set by shell.js only while the shell width animates back open. */
html.sidebar-ready .nav-item span,
html.sidebar-ready .side-account-name,
html.sidebar-ready .logout-button span { transition: opacity .16s ease; }
html.sidebar-expanding .nav-item span,
html.sidebar-expanding .side-account-name,
html.sidebar-expanding .logout-button span { opacity: 0; }
html.sidebar-collapsed .sidebar-nav { width: 100%; gap: 5px; }
html.sidebar-collapsed .nav-item {
  display: grid; place-content: center;
  width: 43px; min-width: 43px; height: 43px; min-height: 43px;
  margin: 0 auto; padding: 0; border-radius: 11px;
}
.menu-mark { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; }
.moon-switch {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  color: inherit; background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.moon-switch:hover { background: var(--surface-3); }
.moon-switch::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.moon-switch:hover::after, .moon-switch:focus-visible::after { opacity: 1; }
.menu-edge {
  position: absolute; top: 50%; right: -10px; z-index: 20;
  display: grid; place-items: center;
  width: 22px; height: 38px; padding: 0;
  color: var(--muted); background: transparent; border: 0;
  box-shadow: none; opacity: .85;
  transform: translateY(-50%); cursor: pointer;
}
.menu-edge.menu-toggle { width: 22px; height: 38px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.menu-edge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu-edge:hover, .menu-edge:focus-visible { color: var(--text-body); background: transparent; opacity: 1; }
html.sidebar-collapsed .menu-edge svg { transform: rotate(180deg); }
.side-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover;
  border-radius: 50%; background: var(--accent-deep);
}
.avatar-preview {
  width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border-radius: 16px; background: var(--accent-deep);
}
.avatar-preview { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; }
.avatar-empty {
  display: grid; place-items: center; color: var(--text-body); font-size: 22px; font-weight: 750;
}
.avatar-row { display: flex; align-items: end; gap: 12px; }
.side-account { position: relative; display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.profile-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.profile-bar form { margin: 0; }
.profile-chip {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
  min-height: 44px; padding: 4px 8px;
  color: inherit; background: transparent; border: 0; border-radius: 12px;
  text-align: left; cursor: pointer;
}
.profile-chip:hover, .profile-chip[aria-expanded="true"] { background: var(--surface-3); }
.side-account-name {
  display: block; flex: 1 1 auto; min-width: 0;
  color: var(--text); font-size: 15px; font-weight: 720;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-avatar-letter {
  display: grid; place-items: center; color: var(--text-body); font-size: 16px; font-weight: 750;
}
.logout-icon {
  position: relative; display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; padding: 0;
  color: var(--text-body); background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.logout-icon svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.logout-icon:hover, .logout-icon:focus-visible { color: var(--text-max); background: var(--surface-3); outline: none; }
.logout-icon::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.logout-icon:hover::after, .logout-icon:focus-visible::after { opacity: 1; }
.profile-menu {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% - 4px); z-index: 40;
  display: grid; gap: 2px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
}
.profile-menu form { margin: 0; }
.profile-menu a, .profile-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 6px 8px; color: var(--text); background: transparent;
  border: 0; border-radius: 10px; font: inherit; font-weight: 650;
  text-align: left; text-decoration: none; cursor: pointer;
}
.profile-menu svg {
  width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.profile-menu em {
  margin-left: auto; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 650;
}
.profile-menu a:hover, .profile-menu button:hover { background: var(--surface-4); }
.side-gear {
  position: relative; display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; color: var(--text-body); border-radius: 12px; text-decoration: none;
}
.side-gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.side-gear:hover, .side-gear.is-active { color: var(--text); background: var(--surface-3); }
.side-gear::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.side-gear:hover::after, .side-gear:focus-visible::after { opacity: 1; }
.logout-button {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 40px; padding: 8px 12px;
  color: var(--text-soft); background: transparent; border: 1px solid var(--surface-4);
  border-radius: 11px; font-weight: 700; text-align: left; cursor: pointer;
}
.logout-button svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.logout-button:hover { color: var(--danger-ink); background: var(--surface); }
html.sidebar-collapsed .profile-bar { flex-direction: column; align-items: center; }
html.sidebar-collapsed .profile-chip { flex: none; width: 43px; min-height: 43px; padding: 0; justify-content: center; }
html.sidebar-collapsed .side-account-name { display: none; }
html.sidebar-collapsed .side-avatar { width: 32px; height: 32px; flex-basis: 32px; }
html.sidebar-collapsed .logout-icon { width: 43px; height: 36px; flex-basis: 43px; }
html.sidebar-collapsed .profile-menu { left: calc(100% + 8px); right: auto; width: 210px; bottom: 0; }
html.sidebar-collapsed .logout-button::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translateY(-50%);
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
html.sidebar-collapsed .logout-button:hover::after,
html.sidebar-collapsed .logout-button:focus-visible::after { opacity: 1; }
body.auth-screen { background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 68%); }
body.auth-screen .app-shell { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
body.auth-screen .sidebar { display: none; }
body.auth-screen .main-content { width: min(380px, 100%); max-width: 380px; min-height: 0; margin: 0; padding: 0; }
body.auth-screen .flash {
  margin: 0 0 14px; padding: 12px 18px; border-radius: 12px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--text-body);
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22); text-wrap: balance;
  animation: auth-flash-in .25s ease-out;
}
body.auth-screen .flash.success { border-color: color-mix(in srgb, var(--ok-deep) 70%, var(--border-strong)); }
body.auth-screen .flash.error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border-strong)); }
@keyframes auth-flash-in { from { opacity: 0; transform: translateY(-6px); } }
.auth-card {
  padding: 36px 28px 26px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.auth-moon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; color: var(--accent); }
.auth-moon svg { width: 40px; height: 40px; fill: currentColor; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
.auth-card h1 { margin: 0; color: var(--text); font-size: 23px; font-weight: 720; letter-spacing: -.03em; text-align: center; }
.auth-lead { margin: 8px 0 28px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-field { display: grid; gap: 6px; margin: 0 0 16px; }
.auth-field > span:first-child { color: var(--text-body); font-size: 13px; font-weight: 620; }
.auth-control { position: relative; display: block; }
.auth-control > svg {
  position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; transform: translateY(-50%);
  fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.auth-control input {
  width: 100%; height: 42px; padding: 0 40px 0 36px; color: var(--text); background: var(--surface-sunk);
  border: 1px solid var(--surface-4); border-radius: 9px; font-size: 14px;
}
.auth-control input::placeholder { color: var(--faint); }
.auth-control input:focus { outline: none; border-color: var(--accent-line); }
.auth-eye {
  position: absolute; top: 50%; right: 4px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; transform: translateY(-50%);
  color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.auth-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-eye .eye-shut { display: none; }
.auth-eye.is-visible .eye-open { display: none; }
.auth-eye.is-visible .eye-shut { display: block; }
.auth-eye:hover { color: var(--text-body); }
.auth-submit {
  width: 100%; height: 44px; margin-top: 8px; padding: 0; color: var(--text-max); background: var(--accent-strong);
  border: 0; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.auth-submit:hover { background: var(--accent-strong); }
.auth-note {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--surface-4);
  color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center;
}
.main-content {
  width: min(1024px, 100%); max-width: 1024px; min-width: 0; min-height: calc(100vh - 28px);
  justify-self: center; padding: 20px 0 64px;
}
/* Узкая колонка по центру — единый стандарт сайта: 720 px.
   Настройки, список снов, входящие и страница сна без правой панели. */
.main-content.is-settings { width: min(720px, 100%); max-width: 720px; }
.main-content.is-reading { width: min(720px, 100%); max-width: 720px; }
.main-content.is-dashboard { width: min(900px, 100%); max-width: 900px; }
h1 { margin: 0 0 24px; font-size: 1.75rem; letter-spacing: -.025em; }
h2 { letter-spacing: -.015em; }
a { color: var(--accent); }
article, .note, details { margin: 1rem 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
label { display: block; margin: 1rem 0; }
input, select, textarea, button { padding: .6rem; color: var(--text-max); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; font: inherit; }
textarea { display: block; width: 100%; min-height: 18rem; }
.dream-text, pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dream-text { font-size: 1.08rem; line-height: 1.65; }
.meta { color: var(--muted); }
.excerpt { line-height: 1.5; }
.related { margin: 1rem 0; padding: 1rem; background: var(--surface); border: 1px solid var(--accent-deep); border-left: 3px solid var(--accent); border-radius: 5px; }
.technical { margin-top: 2rem; color: var(--text-body); }
.technical > summary { cursor: pointer; font-weight: 600; }
.actions { display: flex; gap: 1.25rem; align-items: center; margin: 1.25rem 0; }
.danger-link { color: var(--danger); }
.danger { background: var(--danger-deep); border-color: var(--danger-deep); }
.flash { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 6px; }
.flash.success { background: var(--surface-2); border-color: var(--ok-deep); }
.notice { padding: 1rem; background: var(--surface-2); }
.calendar { width: 100%; border-collapse: collapse; }
.calendar td, .calendar th { height: 5rem; padding: .5rem; vertical-align: top; border: 1px solid var(--border-strong); }
mark { color: var(--text-max); background: var(--warn-line); }

/* Calendar */
.calendar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 2px 20px; }
.calendar-head h1 { margin: 3px 0 0; font-size: 28px; line-height: 1.15; }
.calendar-head h1 span { color: var(--muted); font-weight: 500; }
.calendar-controls { display: flex; align-items: center; gap: 5px; }
.calendar-controls a { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-weight: 700; text-decoration: none; }
.calendar-controls a:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.calendar-controls .calendar-today { min-width: 72px; font-size: 11px; }
.calendar-legend { display: flex; align-items: center; gap: 22px; min-height: 22px; margin: 0 2px 12px; color: var(--text-soft); font-size: 13px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.month-summary { margin-left: auto; color: var(--text-body); font-size: 14px; font-weight: 750; }
.dream-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--faint) 12%, transparent); }
.dream-dot.ordinary { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.dream-dot.lucid { background: var(--violet); box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 12%, transparent); }
.dream-dot.fragment { background: var(--muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 12%, transparent); }
.dream-calendar { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: var(--surface); border-bottom: 1px solid var(--border); }
.calendar-weekdays span { padding: 9px 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-align: right; text-transform: uppercase; }
.calendar-day { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 104px; padding: 9px 11px; color: inherit; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-decoration: none; transition: background-color .15s ease; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover { background: var(--surface-2); }
.calendar-day.is-empty { background: var(--surface-sunk); }
.calendar-day.is-empty:hover { background: var(--surface-sunk); }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--accent-strong); }
.calendar-day.is-today .day-number { color: var(--text); background: var(--accent-deep); }
.day-number { display: grid; place-items: center; align-self: flex-end; width: 26px; height: 26px; flex: 0 0 auto; color: var(--text-soft); border-radius: 8px; font-size: 15px; font-weight: 750; }
.day-entries { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 0 1px 3px; min-width: 0; }
.day-entry { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.day-entry .dream-dot { flex: 0 0 auto; margin-top: 4px; width: 7px; height: 7px; box-shadow: none; }
.day-entry b {
  min-width: 0; color: var(--text-body); font-size: 12px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.calendar-day:hover .day-entry b { color: var(--text); }
.day-more { color: var(--muted); font-size: 11px; font-weight: 650; }
.calendar-day.has-dreams { background: var(--surface); }
.calendar-day.has-dreams:hover { background: var(--surface-2); }
/* Вещий сон: тёплая подсветка дня плюс звезда у самой записи. */
.calendar-day.is-prophetic { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--warn-line); }
.calendar-day.is-prophetic:hover { background: var(--surface-4); }
/* Сегодняшний вещий день оставляет оба кольца: синее внутри, золотое снаружи. */
.calendar-day.is-today.is-prophetic { box-shadow: inset 0 0 0 1px var(--accent-strong), inset 0 0 0 3px color-mix(in srgb, var(--warn-line) 70%, transparent); }
.day-entry .entry-star { flex: 0 0 auto; margin-top: 1px; color: var(--warn-ink); font-size: 11px; font-style: normal; line-height: 1.2; }

/* Analytics */
.analytics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 2px 20px; }
.analytics-head h1 { margin: 3px 0 0; font-size: 28px; }
.analytics-head > p { max-width: 360px; margin: 0 0 3px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: right; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.stat-card { display: grid; gap: 5px; min-width: 0; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.stat-card > span { color: var(--text-soft); font-size: 13px; }
.stat-card > b { color: var(--text); font-size: 28px; line-height: 1; }
.stat-card > small { color: var(--muted); font-size: 13px; }
.stat-card.lucid-stat { border-color: var(--violet-deep); background: var(--surface); }
.stat-card.lucid-stat > b { color: var(--violet); }
.analytics-card { min-width: 0; padding: 16px; background: linear-gradient(145deg,var(--surface-2),var(--surface)); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.analytics-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.analytics-section-head h2 { margin: 4px 0 0; font-size: 17px; }
.year-summary { margin: 6px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.chart-head-side { display: grid; justify-items: end; gap: 10px; }
.year-switcher { display: grid; grid-template-columns: 30px 64px 30px; align-items: center; gap: 4px; }
.year-switcher a, .year-switcher > span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--surface-4); border-radius: 8px; text-decoration: none; }
.year-switcher > span { color: var(--faint); }
.year-switcher b { color: var(--text); font-size: 16px; text-align: center; }
.mini-legend { display: flex; gap: 16px; color: var(--muted); font-size: 14px; }
.mini-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mini-legend i { width: 9px; height: 9px; background: var(--accent); border-radius: 2px; }
.mini-legend i.lucid { background: var(--violet); }
.month-chart { display: grid; grid-template-columns: repeat(12,minmax(34px,1fr)); gap: 8px; height: 250px; padding-top: 8px; }
.month-column { display: grid; grid-template-rows: 18px minmax(0,1fr) 22px; min-width: 0; gap: 5px; }
.month-value { color: var(--text-soft); font-size: 12px; font-weight: 750; text-align: center; }
.month-bar-track { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-bottom: 1px solid var(--surface-4); }
.month-bar { position: relative; width: min(28px,70%); min-height: 4px; overflow: hidden; background: var(--accent-line); border-radius: 5px 5px 2px 2px; }
.month-bar i { position: absolute; inset: auto 0 0; display: block; background: var(--violet); }
.bar-level-1 { height: 18px; }.bar-level-2 { height: 36px; }.bar-level-3 { height: 54px; }.bar-level-4 { height: 72px; }.bar-level-5 { height: 90px; }
.bar-level-6 { height: 108px; }.bar-level-7 { height: 126px; }.bar-level-8 { height: 144px; }.bar-level-9 { height: 162px; }.bar-level-10 { height: 180px; }
.lucid-level-0 { height: 0; }.lucid-level-1 { height: 10%; }.lucid-level-2 { height: 20%; }.lucid-level-3 { height: 30%; }.lucid-level-4 { height: 40%; }.lucid-level-5 { height: 50%; }
.lucid-level-6 { height: 60%; }.lucid-level-7 { height: 70%; }.lucid-level-8 { height: 80%; }.lucid-level-9 { height: 90%; }.lucid-level-10 { height: 100%; }
.month-label { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.month-column.is-future { opacity: .32; }
.analytics-two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.rank-list { display: grid; gap: 7px; }
.rank-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 10px; }
.rank-list span { color: var(--text-soft); font-size: 11px; }
.rank-list b { color: var(--accent); font-size: 11px; }
.analytics-empty { min-height: 84px; display: grid; align-content: center; gap: 5px; padding: 12px; background: var(--surface); border: 1px dashed var(--surface-4); border-radius: 12px; color: var(--muted); }
.analytics-empty b { color: var(--text-soft); font-size: 13px; }
.analytics-empty p { margin: 0; font-size: 12px; line-height: 1.45; }

/* Dashboard */
.dashboard-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 0 0 22px; padding: 3px 2px 0;
}
.dashboard-head h1 { margin: 2px 0 4px; font-size: 28px; line-height: 1.12; }
.eyebrow, .section-kicker { margin: 0; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-date { margin: 0; color: var(--muted); font-size: 14px; }
.context-strip { display: flex; align-items: stretch; gap: 10px; }
.context-item {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
}
.context-item > span:last-child { display: grid; gap: 2px; }
.context-item b { color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; }
.context-item small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.context-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-3); color: var(--accent-ink); overflow: hidden; line-height: 1; }

.moon-icon { background: radial-gradient(circle at 30% 25%, var(--surface-4), var(--surface-2)); overflow: visible; }
.moon-svg { width: 26px; height: 26px; overflow: visible; }
.moon-disc { fill: var(--surface-4); }
.moon-lit { fill: var(--text); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-ink) 35%, transparent)); }

.weather-icon { color: var(--accent); font-size: 16px; font-weight: 800; line-height: 42px; }
.dashboard-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--accent-deep); border-radius: 13px;
}
.dashboard-notice > div { display: flex; align-items: center; gap: 10px; }
.dashboard-notice > div > span:last-child { display: grid; gap: 2px; }
.dashboard-notice b { font-size: 12px; }
.dashboard-notice small { color: var(--muted); font-size: 10px; }
.dashboard-notice-actions { display: flex; align-items: center; gap: 8px; }
.dashboard-notice-actions form { margin: 0; }
.dashboard-notice-actions a,
.dashboard-notice-actions button {
  min-height: 28px; padding: 6px 9px; color: var(--accent-ink); background: var(--border);
  border: 0; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
}
.dashboard-notice-actions button { color: var(--danger-ink); background: var(--border); }
.dashboard-notice-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 12px; align-items: start; }
.dashboard-card {
  min-width: 0; padding: 16px; background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.dashboard-card-primary { grid-row: span 2; min-height: 420px; }
.dashboard-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dashboard-card-head h2 { margin: 4px 0 0; color: var(--text); font-size: 17px; line-height: 1.2; }
.quiet-link { color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.quiet-link:hover { color: var(--text-body); }
.featured-dream { display: flex; flex-direction: column; min-height: 330px; color: inherit; text-decoration: none; }
.dream-date-line { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 11px; }
.dream-date-line i { padding: 4px 7px; color: var(--accent); background: var(--surface-3); border-radius: 999px; font-style: normal; }
.featured-dream > strong { margin-top: 22px; max-width: 650px; color: var(--text); font-size: 27px; line-height: 1.16; letter-spacing: -.025em; }
.featured-dream > p { max-width: 690px; margin: 16px 0 26px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }
.read-more { margin-top: auto; color: var(--accent); font-size: 12px; font-weight: 700; }
.read-more b { margin-left: 4px; font-size: 15px; }
.insight-card { position: relative; overflow: hidden; }
.insight-card::after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 120px; height: 120px; border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 50%; }
.insight-question { position: relative; z-index: 1; margin: 0 0 18px; color: var(--text-body); font-size: 15px; line-height: 1.45; }
.insight-dream { position: relative; z-index: 1; display: grid; gap: 3px; padding-top: 12px; color: inherit; border-top: 1px solid var(--border); text-decoration: none; }
.insight-dream span { color: var(--muted); font-size: 10px; }
.insight-dream b { color: var(--accent-ink); font-size: 12px; }
.memory-empty { display: flex; align-items: center; gap: 10px; color: var(--faint); }
.memory-empty > span { display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface-2); border-radius: 10px; }
.memory-empty p, .empty-copy { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-card-primary { grid-row: auto; min-height: 0; }
  .featured-dream { min-height: 280px; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: var(--sidebar-width, 226px) minmax(0, 1fr); }
  html.sidebar-collapsed .app-shell { grid-template-columns: 55px minmax(0, 1fr); }
  .main-content { padding: 20px 10px 48px; }
}

/* Type chips */
.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.kind-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-weight: 650; text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.kind-chip:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.kind-chip b { color: var(--muted); font-size: 13px; font-weight: 700; }
.kind-chip.is-active { color: var(--text); background: var(--surface-3); border-color: var(--accent-line); }
.kind-chip.is-active b { color: var(--accent); }
.kind-chip.is-empty { opacity: .55; }

/* Dream list */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.filters input, .filters button { min-height: 36px; }
.sort-switch { display: flex; gap: 6px; margin-left: auto; }
.sort-switch a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 650; text-decoration: none;
}
.sort-switch a:hover { color: var(--text); border-color: var(--border-strong); }
.sort-switch a.is-active { color: var(--text); background: var(--surface-3); border-color: var(--accent-line); }
.dream-span { margin: 2px 2px 14px; color: var(--muted); font-size: 13px; font-weight: 650; }
.list-layout { display: flex; justify-content: flex-end; gap: 6px; margin: -6px 2px 10px; }
.list-layout button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.list-layout button svg { width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 1.6; }
.list-layout button:hover { border-color: var(--border-strong); }
.list-layout button:hover svg { stroke: var(--text); }
.list-layout button[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent-line); }
.list-layout button[aria-pressed="true"] svg { stroke: var(--text); }
.dream-list { display: grid; gap: 8px; }
.dream-card {
  position: relative; display: grid; gap: 6px;
  margin: 0; padding: 12px 14px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.dream-card:hover, .dream-card:focus-within { background: var(--surface-2); border-color: var(--accent-line); }
.dream-card-top, .dream-card-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dream-card-top { justify-content: space-between; }
.dream-card time { color: var(--muted); font-size: 12px; font-weight: 650; }
.dream-card-side { position: relative; flex: 0 0 auto; }
.dream-badge {
  padding: 2px 8px; color: var(--text-soft); background: var(--surface-3);
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 11px; font-weight: 750; letter-spacing: .02em;
}
.dream-badge.lucid { color: var(--violet-ink); background: var(--surface-2); border-color: var(--violet-deep); }
.dream-badge.fragment { color: var(--warn); background: var(--surface-2); border-color: var(--border-strong); }
.dream-badge.prophetic { color: var(--warn-ink); background: var(--surface-2); border-color: var(--warn-line); }
.dream-badge.analysis-failed { color: var(--danger-ink); background: var(--surface); border-color: var(--danger-deep); }
.analysis-card { margin: 16px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.analysis-model { margin: -4px 0 10px; color: var(--muted); font-size: 12px; }
.interpretation-list { display: grid; gap: 0; margin: 0; }
.interpretation-list article {
  margin: 0; padding: 18px 0; background: none; border: 0; border-top: 1px solid var(--surface-4);
  border-radius: 0; box-shadow: none;
}
.interpretation-list article:first-child { border-top: 0; padding-top: 18px; }
.interpretation-list h3 { margin: 0 0 8px; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.interpretation-list p { margin: 0; color: var(--text); font-size: 1.12rem; line-height: 1.75; }
.interpretation-list blockquote {
  margin: 12px 0 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--accent-line); color: var(--muted);
  font-size: .98rem; line-height: 1.6;
}
html.theme-light .interpretation-list p { color: var(--text-body); }
html.theme-light .interpretation-list blockquote { color: var(--muted); }
html.theme-light .interpretation-list article { border-top-color: var(--surface-4); border-bottom-color: var(--surface-4); }
html.theme-light .analysis-head h2,
html.theme-light .interpretation-fold > summary h2,
html.theme-light .interpretation-list h3 { color: var(--text); }
html.theme-light .interpretation-card > .hint { color: var(--text-soft); }
html.theme-light .interpretation-list blockquote { border-left-color: var(--warn-line); }
.interpretation-card details.technical {
  margin: 16px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.interpretation-card details.technical p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.interpretation-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.interpretation-context { justify-content: flex-end; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.interpretation-form .btn-secondary { min-height: 32px; padding: 0 12px; }
.analysis-fold { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.analysis-fold > summary { cursor: pointer; list-style: none; }
.analysis-fold > summary::-webkit-details-marker { display: none; }
.analysis-fold:not([open]) > summary { margin-bottom: 0; }
.analysis-head-side { display: flex; align-items: center; gap: 10px; }
.fold-arrow {
  width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.analysis-fold[open] > summary .fold-arrow { margin-top: 4px; transform: rotate(225deg); }
.analysis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.analysis-head h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.interpretation-fold { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.interpretation-fold > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
}
.interpretation-fold > summary::-webkit-details-marker { display: none; }
.interpretation-fold > summary .analysis-head-side { margin-left: auto; }
.interpretation-fold[open] > summary .fold-arrow { margin-top: 4px; transform: rotate(225deg); }
.interpretation-fold > summary h2 {
  margin: 0; color: var(--text); font-size: 16px; font-weight: 650;
  letter-spacing: -.015em; line-height: 1.35;
}
.interpretation-note {
  padding: 2px 8px; color: var(--muted); background: var(--surface);
  border: 1px solid var(--surface-4); border-radius: 999px;
  font-size: 12px; font-weight: 650; line-height: 1.4;
}
html.theme-light .interpretation-note { color: var(--muted); background: var(--bg); border-color: var(--surface-4); }
.analysis-head form { margin: 0; }
.analysis-head .btn-secondary { min-height: 32px; padding: 0 12px; }
.analysis-card .hint { margin: 0 0 8px; }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.start-row h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.start-side { display: flex; align-items: center; gap: 12px; }
.start-side .check-row { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.start-row .btn-secondary { flex: 0 0 auto; min-height: 32px; padding: 0 12px; }
html.theme-light .start-row h2 { color: var(--text); }
html.theme-light .start-hint { color: var(--text-soft); }
.analysis-error { margin: 0 0 6px; color: var(--danger-ink); }
.analysis-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; }
.analysis-row > span { color: var(--muted); font-size: 13px; }
.analysis-row form { display: flex; gap: 6px; margin: 0; }
.analysis-row .btn-primary, .analysis-row .btn-secondary { min-height: 32px; padding: 0 10px; }
.analysis-items { display: flex; flex-wrap: wrap; gap: 6px; }
.analysis-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.analysis-item form { display: inline-flex; gap: 4px; margin: 0; }
.analysis-item button { min-height: 24px; padding: 0 6px; color: var(--text-body); background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.check-row input { width: auto; }
.field-label-title { color: var(--text); font-size: 22px; font-weight: 750; line-height: 1; }
.ai-wand {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  color: var(--warn-ink); background: var(--surface-4); border: 1px solid var(--warn-line); border-radius: 8px;
  cursor: pointer;
}
.ai-wand svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ai-wand.is-busy svg, .ai-proof-btn.is-busy svg { display: none; }
.ai-wand.is-busy::after, .ai-proof-btn.is-busy::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ai-spin .7s linear infinite;
}
.ai-spin {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  border: 2px solid var(--warn-ink); border-right-color: transparent;
  animation: ai-spin .7s linear infinite;
}
.busy-line { display: flex; align-items: center; gap: 8px; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.editor-toolbar .ai-mode { display: flex; margin: 0; }
.editor-toolbar .ai-mode select {
  width: auto; max-width: 190px; height: 28px; margin: 0; padding: 0 8px;
  color: var(--text-body); background: var(--surface); border: 1px solid var(--surface-4); border-radius: 6px;
  font-size: 12px;
}
.editor-toolbar .ai-proof-btn { color: var(--warn-ink); background: var(--surface-4); border-color: var(--warn-line); }
.editor-toolbar .ai-proof-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.editor-toolbar .ai-proof-btn:hover { color: var(--warn-ink); background: var(--warn-deep); border-color: var(--warn); }
html.theme-light .editor-toolbar .ai-proof-btn { color: var(--warn-ink); background: var(--warn-deep); border-color: var(--warn-line); }
html.theme-light .editor-toolbar .ai-proof-btn:hover { color: var(--warn-ink); background: var(--warn-deep); }
.ai-wand:hover, .ai-wand:focus-visible { color: var(--warn-ink); background: var(--warn-deep); border-color: var(--warn); outline: none; }
.ai-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.ai-proof {
  display: grid; gap: 8px; margin: 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-top: 0;
}
.ai-compare-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.ai-proof textarea { min-height: 0; overflow: hidden; resize: none; white-space: pre-wrap; }
.ai-proof-actions { display: flex; justify-content: space-between; gap: 8px; }
.editor-toolbar:has(+ .ai-proof:not([hidden])) { border-radius: 8px 8px 0 0; }
.editor-toolbar:has(+ .ai-proof:not([hidden])) + .ai-proof + textarea,
#dream-body, .dream-rich { border-radius: 0 0 8px 8px; }
/* Видимый слой поля сна: значения те же, что у textarea, чтобы текст не прыгал при переключении. */
.dream-rich {
  min-height: 320px; padding: .6rem; color: var(--text-max); background: var(--surface);
  border: 1px solid var(--border-strong); border-top: 0; font: inherit;
  line-height: 1.7; overflow-wrap: anywhere;
}
.dream-rich:focus { outline: none; border-color: var(--accent); }
.dream-rich:empty::before { content: attr(data-placeholder); color: var(--muted); }
.dream-rich.is-empty-warn { border-color: var(--danger); }
.dream-rich u { text-underline-offset: 2px; }
.spoiler {
  padding: 0 2px; color: transparent; background: var(--border-strong); border-radius: 4px;
  cursor: pointer; transition: color .15s ease;
}
.spoiler:hover, .dream-rich .spoiler { color: inherit; background: color-mix(in srgb, var(--accent) 16%, transparent); }
html.theme-light .dream-rich { color: var(--text-body); background: var(--surface); border-color: var(--surface-4); }
html.theme-light .spoiler { background: var(--surface-4); }
html.theme-light .spoiler:hover, html.theme-light .dream-rich .spoiler { background: color-mix(in srgb, var(--accent) 14%, transparent); }
html.theme-light .ai-wand { color: var(--warn-ink); background: var(--warn-deep); border-color: var(--warn-line); }
html.theme-light .ai-wand:hover { color: var(--warn-ink); background: var(--warn-deep); }
html.theme-light .ai-proof { background: var(--surface); border-color: var(--border); }
html.theme-light .editor-toolbar .ai-mode select { color: var(--text-body); background: var(--surface); border-color: var(--surface-4); }
.dream-read-tools form { margin: 0; }
.dream-read-tools .dream-tool.is-on { color: var(--warn-ink); border-color: var(--warn-line); background: var(--surface-2); }
.dream-open { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.dream-open:hover h2 { color: var(--text-max); }
.dream-card h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 760; line-height: 1.3; }
.dream-excerpt {
  display: -webkit-box; margin: 0; overflow: hidden;
  color: var(--muted); font-size: 13.5px; line-height: 1.45;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.dream-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dream-meta-row span {
  padding: 2px 7px; color: var(--muted); background: var(--surface-sunk);
  border: 1px solid var(--surface-4); border-radius: 999px; font-size: 12px;
}
.dream-actions {
  position: absolute; right: calc(100% + 8px); top: 50%; z-index: 2;
  display: flex; gap: 4px; opacity: 0; pointer-events: none;
  transform: translateY(-50%); white-space: nowrap;
}
.dream-card:hover .dream-actions, .dream-card:focus-within .dream-actions { opacity: 1; pointer-events: auto; }
.dream-actions a {
  padding: 3px 8px; color: var(--text-body); background: var(--surface-sunk);
  border: 1px solid var(--border-strong); border-radius: 7px;
  font-size: 12px; font-weight: 650; text-decoration: none;
}
.dream-actions a:hover { color: var(--text-max); border-color: var(--accent-strong); }
.dream-actions .danger-link { color: var(--danger-ink); }
.empty-list { margin: 8px 0; color: var(--muted); }
.trash-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.trash-actions form { margin: 0; }
.danger-link { color: var(--danger); font-size: 14px; font-weight: 680; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
/* Выбор группы: строка-плитка целиком кликабельна, радио — обычный кружок,
   а не квадрат от общего правила для input. */
.telegram-chats { display: grid; gap: 6px; margin: 2px 0 4px; }
.telegram-chats .check-row {
  gap: 10px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; color: var(--text-body); font-size: 14px; cursor: pointer;
}
.telegram-chats .check-row:hover { border-color: var(--border-strong); background: var(--surface); }
.telegram-chats .check-row:has(input:checked) { border-color: var(--accent-strong); background: var(--surface-2); }
.telegram-chats input[type="radio"] {
  flex: none; width: 16px; height: 16px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 50%; accent-color: var(--accent);
}
/* Редактор шаблона: слева блоки сообщения, справа запас. */
.tg-editor { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.tg-blocks .chip-label { margin: 0 0 6px; }
.tg-block-list { display: grid; gap: 6px; align-content: start; min-height: 44px; }
.tg-block {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
}
.tg-block.is-dragging { opacity: .45; }
.tg-block[draggable="true"] { cursor: grab; }
.tg-grip { color: var(--faint); font-size: 15px; line-height: 1; }
.tg-block-text { display: grid; gap: 1px; min-width: 0; }
.tg-block-text b { color: var(--text-body); font-size: 13.5px; font-weight: 680; }
.tg-block-text small { color: var(--muted); font-size: 11.5px; }
.tg-looks { display: flex; gap: 3px; margin-left: auto; }
.tg-look {
  min-width: 24px; min-height: 24px; padding: 0; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; font-size: 12px; line-height: 1;
}
.tg-look:hover { color: var(--text); border-color: var(--border); }
.tg-look.is-on { color: var(--text-body); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent-strong); }
.tg-block-tools { display: flex; gap: 4px; margin-left: 8px; }
.tg-block-tools button {
  min-width: 26px; min-height: 26px; padding: 0; color: var(--text-soft);
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.tg-block-tools button:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.tg-layout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tg-thread.is-busy { opacity: .55; }
@media (max-width: 860px) {
  .tg-editor { grid-template-columns: minmax(0, 1fr); }
}
/* Превью сообщения. Разметку собирает telegram_out.html_chunks, здесь только вид пузыря. */
.tg-preview-card { gap: 10px; }
.tg-thread { display: grid; gap: 8px; max-width: 560px; }
.tg-bubble {
  padding: 10px 13px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 14px 14px 14px 4px; font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tg-bubble b { color: var(--text); font-weight: 700; }
.tg-bubble i { color: var(--muted); font-style: normal; font-size: 13px; }
.tg-bubble blockquote {
  margin: 8px 0; padding: 2px 0 2px 10px;
  border-left: 3px solid var(--accent-strong); color: var(--text-body); font-size: 14px;
}
.danger-link:hover { color: var(--danger-ink); }
@media (hover: none) {
  .dream-actions { position: static; transform: none; opacity: 1; pointer-events: auto; }
}

/* Страница сна. Без правой панели — колонка 720, как все узкие страницы; с панелью: текст 680 + панель, всего 1024. */
.dream-page { width: min(720px, 100%); margin-inline: auto; }
.dream-page:not(.has-side) .dream-sheet { max-width: none; }
.dream-page.has-side {
  width: min(1024px, 100%);
  display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 1fr);
  column-gap: 24px; row-gap: 18px; align-items: start;
}
.dream-page.has-side .back-link,
.dream-page.has-side .dream-toolbar,
.dream-page.has-side .dream-read-head,
.dream-page.has-side .technical { grid-column: 1 / -1; }
.dream-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.back-link { display: inline-flex; margin: 0; color: var(--muted); font-size: 13px; font-weight: 680; text-decoration: none; }
.back-link:hover { color: var(--text); }
.dream-read-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.dream-read-head h1 { margin: 0 0 30px; }
.dream-read-meta { display: flex; align-items: center; gap: 8px; margin: 0; }
.dream-read-meta time { color: var(--muted); font-size: 13px; font-weight: 650; }
.dream-read-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dream-tool {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px;
  color: var(--text-body); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
  font-size: 14px; font-weight: 680; text-decoration: none;
}
.dream-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dream-tool:hover { color: var(--text-max); border-color: var(--accent-strong); }
.dream-tool-delete { color: var(--danger); border-color: var(--danger-deep); }
.dream-tool-delete:hover { color: var(--danger-ink); background: var(--surface); border-color: var(--danger-deep); }
.dream-sheet {
  max-width: 680px; padding: 22px 26px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 16px;
}
/* Текст сна 17px — стандарт основного текста у Apple; при ширине карточки ~70 знаков в строке. */
.dream-page .dream-text { max-width: none; color: var(--text-body); font-family: var(--font-read); font-size: 17px; line-height: 1.7; font-optical-sizing: auto; }
/* Переклички: где ещё встречается та же сущность, место или тег. */
/* Тип находки — тонкой подкраской плашки, без лишних слов.
   «unknown» и обычный человек выглядят как раньше: это большинство. */
.analysis-item.type-animal { border-color: var(--ok-deep); }
.analysis-item.type-other, .analysis-item.type-creature { border-color: var(--violet-deep); }
.analysis-item.type-object { border-color: var(--warn-line); }
.analysis-item.type-organization { border-color: var(--accent-deep); }
.analysis-item.type-dream { border-color: var(--violet-deep); }
.analysis-item.type-real { border-color: var(--border-strong); }
.analysis-item.is-accepted { display: inline-flex; align-items: center; gap: 3px; }
.item-drop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.item-drop svg { width: 10px; height: 10px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.item-drop:hover { background: var(--danger-deep); }
.item-drop:hover svg { stroke: var(--danger-ink); }
/* Признаки сна — то, по чему можно было догадаться, что это сон. */
.analysis-row.is-sign-row > span { color: var(--teal); }
.analysis-row.is-sign-row .analysis-item { border-color: var(--ok-deep); }
/* Плотные наборы плашек: подписи короткие, расшифровка в подсказке. */
/* Заголовок только для чтения с экрана: на экране его заменяет имя карточки. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.chip-set-tight { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-set-tight .chip { flex: 0 0 auto; }
.chip-wide { display: inline-flex; margin: 8px 0 2px; }
.item-add { display: inline-flex; align-items: center; gap: 4px; }
.item-add-open, .item-add-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--surface-4); border-radius: 999px; cursor: pointer;
}
.item-add-open svg, .item-add-ok svg {
  width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
}
.item-add-open:hover, .item-add-ok:hover { border-color: var(--faint); }
.item-add-open:hover svg, .item-add-ok:hover svg { stroke: var(--text); }
.item-add-ok svg { stroke: var(--teal); }
.item-add-field { display: inline-flex; align-items: center; gap: 4px; }
.item-add-field input {
  width: 128px; min-height: 22px; padding: 1px 7px;
  background: var(--surface-sunk); border: 1px solid var(--surface-4); border-radius: 999px;
  color: var(--text); font-size: 12px;
}
.dream-related { margin-top: 28px; }
.dream-related h2 { margin: 0 0 12px; font-size: 15px; color: var(--text-body); }
.related-group {
  margin-bottom: 10px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px;
}
.related-label { font-size: 14px; font-weight: 720; color: var(--text); }
.related-label.related-place { color: var(--teal); }
.related-label.related-tag { color: var(--violet-ink); }
.related-count {
  margin-left: 8px; padding: 1px 7px;
  background: var(--surface-4); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 640;
}
.related-group ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.related-group li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.related-group li a { font-size: 14px; font-weight: 560; text-decoration: none; }
.related-group li a:hover { text-decoration: underline; }
.related-group li time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.related-more { display: inline-block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.dream-neighbors { display: flex; justify-content: space-between; gap: 18px; margin-top: 28px; }
.dream-neighbors a { display: grid; gap: 3px; max-width: 46%; color: var(--text-body); font-size: 14px; font-weight: 720; text-decoration: none; }
.dream-neighbors a span { color: var(--muted); font-size: 12px; font-weight: 550; line-height: 1.35; }
.dream-neighbors .is-next { justify-self: end; text-align: right; }
.dream-side { display: grid; gap: 12px; align-self: start; align-content: start; }
.dream-side .analysis-card {
  margin: 0; padding: 14px 14px 12px;
  background: var(--surface); border: 1px solid var(--surface-4); border-radius: 14px; box-shadow: none;
}
.dream-side .analysis-head { margin-bottom: 10px; }
.dream-side .start-row h2, .dream-side .analysis-head h2 {
  margin: 0; color: var(--text-body); font-size: 16px; font-weight: 740; letter-spacing: 0;
}
.dream-side .analysis-row { grid-template-columns: 1fr; gap: 6px; }
.dream-side .analysis-row form { justify-content: flex-start; flex-wrap: wrap; }
.dream-side .analysis-items { gap: 6px; }
.dream-side .analysis-row > span { color: var(--muted); font-size: 12px; }
.dream-side .analysis-item { padding: 3px 8px; color: var(--text-body); background: var(--border); border-color: var(--border-strong); font-size: 12px; }
.dream-side .analysis-item button { color: var(--text-soft); }
.dream-side .analysis-item button:hover { color: var(--text); }
.dream-side .analysis-row b { color: var(--text); font-weight: 680; }
.side-card { margin: 0; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 14px; box-shadow: none; }
.side-card h2 { margin: 0 0 10px; color: var(--text-body); font-size: 16px; font-weight: 740; }
.fact-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-top: 1px solid var(--surface-3); font-size: 13.5px; }
.fact-row span { color: var(--muted); }
.fact-row b { color: var(--text); font-weight: 680; text-align: right; }
.chip-label { margin: 10px 0 6px; color: var(--muted); font-size: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Плашки внутри боковых карточек приподняты над фоном карточки, а не утоплены в него. */
.chip-row span { padding: 3px 8px; color: var(--text-body); background: var(--border); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; }
.factor-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin: 0 0 8px; color: var(--text-body); font-size: 13px; }
.factor-line b { color: var(--text); font-weight: 680; }
.meter { display: block; grid-column: 1 / -1; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter-5-0 { width: 0; } .meter-5-1 { width: 20%; } .meter-5-2 { width: 40%; }
.meter-5-3 { width: 60%; } .meter-5-4 { width: 80%; } .meter-5-5 { width: 100%; }
.side-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 980px) {
  .dream-page.has-side { grid-template-columns: 1fr; }
  .dream-read-head, .dream-toolbar { flex-wrap: wrap; }
  .dream-sheet { padding: 18px 16px; }
}

/* Home month block */
.month-block { margin: 18px 0; }
.month-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 2px 12px; }
.month-block-head h2 { margin: 2px 0 0; font-size: 22px; }
.month-block-head h2 span { color: var(--muted); font-weight: 500; }
.month-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 14px 2px 0; color: var(--muted); font-size: 14px; }
.month-stats span { display: inline-flex; align-items: baseline; gap: 7px; }
.month-stats b { color: var(--text); font-size: 20px; font-weight: 750; }
.month-stats .streak-stat b { color: var(--accent); }

/* Search */
.search-head { margin: 0 2px 16px; }
.search-head h1 { margin: 4px 0 0; }
.search-form { margin: 0 0 20px; }
.search-field {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s ease;
}
.search-field:focus-within { border-color: var(--accent-line); }
.search-icon { display: grid; place-items: center; flex: 0 0 20px; color: var(--muted); }
.search-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.search-field input[name="q"] {
  flex: 1; min-width: 0; padding: 10px 0;
  background: transparent; border: 0; color: var(--text); font-size: 15px;
}
.search-field input[name="q"]:focus { outline: none; }
.search-field input[name="q"]::placeholder { color: var(--faint); }
.search-field button {
  flex: 0 0 auto; padding: 10px 20px;
  color: var(--text); background: var(--surface-3); border: 1px solid var(--accent-line); border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.search-field button:hover { background: var(--surface-4); }
.search-toggle { display: inline-flex; align-items: center; gap: 9px; margin: 12px 2px 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.search-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.search-count { margin: 0 2px 14px; color: var(--muted); font-size: 14px; }
.search-result { margin: 0 0 12px; }
.search-result h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 17px; }
.search-result h2 a { text-decoration: none; }
.search-result h2 a:hover { text-decoration: underline; }
.result-tag { padding: 3px 9px; color: var(--muted); background: var(--surface-2); border-radius: 999px; font-size: 11px; font-weight: 700; }
.search-snippet { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.search-snippet mark { padding: 0 2px; color: var(--text-max); background: var(--accent-line); border-radius: 3px; }
.search-empty { padding: 34px 20px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.search-empty b { display: block; margin-bottom: 8px; color: var(--text-body); font-size: 16px; }
.search-empty p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Geomagnetic widget */
.geo-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.geo-icon.geo-calm { color: var(--ok); background: var(--surface-2); }
.geo-icon.geo-unsettled { color: var(--warn); background: var(--surface-2); }
.geo-icon.geo-storm { color: var(--danger); background: var(--surface-2); }
.geo-icon.geo-severe { color: var(--danger); background: var(--surface-2); }

/* Entry form: wide text column on the left, compact parameter cards on the right */
.entry-form { display: block; }
.entry-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin: 0 0 18px;
}
.entry-head h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.entry-sub { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.entry-actions { display: flex; align-items: center; gap: 9px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; color: var(--text-max); background: var(--accent-strong);
  border: 1px solid var(--accent-strong); border-radius: 9px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-secondary {
  display: inline-flex; align-items: center; min-height: 39px; padding: 9px 14px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 9px; font-size: 14px; font-weight: 650; text-decoration: none;
}
.btn-secondary:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.preview-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.preview-actions form { margin: 0; }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
.entry-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.entry-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.entry-card {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: none;
}
.entry-main > .entry-card { min-height: 0; }
.card-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  color: var(--text-body); font-size: 14px; font-weight: 700;
}
.card-title svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.field { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.field-grow { flex: 1 1 auto; }
.field-grow textarea { flex: 0 0 auto; height: 22rem; min-height: 22rem; padding: 14px 15px; font-size: 15px; line-height: 1.7; }
.field-grow textarea.is-fitted { height: auto; min-height: 0; overflow: hidden; resize: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field-inline input[type="number"] { width: 84px; text-align: center; }
.field-inline select { max-width: 60%; }
.field-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.entry-card input, .entry-card select, .entry-card textarea {
  width: 100%; padding: 9px 11px; color: var(--text); background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px;
}
.entry-card textarea { min-height: 0; line-height: 1.6; resize: vertical; }
.entry-card input:focus, .entry-card select:focus, .entry-card textarea:focus {
  border-color: var(--accent-strong); outline: none;
}
.entry-card input::placeholder, .entry-card textarea::placeholder { color: var(--faint); }

.editor-toolbar {
  display: flex; align-items: center; gap: 4px; min-height: 39px; padding: 5px 6px;
  background: var(--surface-sunk); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.editor-toolbar + textarea { border-radius: 0 0 8px 8px; }
.editor-toolbar button {
  display: grid; place-items: center; width: 29px; height: 28px; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.editor-toolbar button:hover { color: var(--text); background: var(--surface-2); border-color: var(--surface-4); }
.editor-toolbar button:focus-visible { color: var(--text-max); border-color: var(--accent); outline: none; }
.editor-toolbar svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.toolbar-spacer { flex: 1 1 auto; }
.emoji-picker { position: relative; }
.emoji-toggle { font-size: 18px !important; }
.emoji-panel {
  /* Opens downward over the textarea: the toolbar sits near the page top,
     so an upward panel of this size gets clipped by the viewport. */
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: 344px; max-height: 330px; padding: 10px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.emoji-section + .emoji-section { margin-top: 10px; }
.emoji-section h3 {
  margin: 0 0 4px 4px; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-panel .emoji-grid button {
  width: 100%; height: 38px; border-radius: 9px;
  font-size: 24px; line-height: 1;
  transition: background-color .12s ease, transform .12s ease;
}
.emoji-panel .emoji-grid button:hover { background: var(--surface-4); transform: scale(1.14); }
.emoji-panel .emoji-grid button:active { transform: scale(.96); }
/* Own emoji carry a remove control, so the tile needs a positioned wrapper. */
.emoji-slot { position: relative; display: block; }
.emoji-remove {
  position: absolute; top: -2px; right: -2px;
  width: 17px !important; height: 17px !important;
  color: var(--text) !important; background: var(--border-strong) !important;
  border: 1px solid var(--faint) !important; border-radius: 50% !important;
  font-size: 12px !important; line-height: 1; opacity: 0; cursor: pointer;
}
.emoji-slot:hover .emoji-remove, .emoji-remove:focus-visible { opacity: 1; }
.emoji-remove:hover { background: var(--danger-deep) !important; }
.emoji-more, .emoji-back, .emoji-own button {
  min-height: 34px; padding: 7px 12px; color: var(--text-soft);
  background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 9px;
  font-size: 13px; font-weight: 650; cursor: pointer;
}
.emoji-more { width: 100%; margin-top: 10px; }
.emoji-more:hover, .emoji-back:hover, .emoji-own button:hover { color: var(--text); background: var(--surface-4); }
.emoji-catalog-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.emoji-catalog-head span { color: var(--muted); font-size: 12px; }
.emoji-back { width: 32px; padding: 0; }
.emoji-own { display: flex; gap: 6px; margin-bottom: 10px; }
.emoji-own input { flex: 1 1 auto; min-width: 0; min-height: 34px; margin: 0; font-size: 15px; }
.emoji-own button {
  display: grid; place-items: center;
  flex: 0 0 34px; width: 34px; padding: 0; font-size: 19px; line-height: 1;
}
@media (max-width: 560px) {
  .emoji-panel { width: min(300px, calc(100vw - 48px)); }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
  .emoji-panel .emoji-grid button { height: 38px; font-size: 24px; }
}

.dream-markdown { white-space: normal; }
.dream-markdown > :first-child { margin-top: 0; }
.dream-markdown > :last-child { margin-bottom: 0; }
.dream-markdown p, .dream-markdown ul, .dream-markdown blockquote { margin: 0 0 1em; }
.dream-markdown ul { padding-left: 1.5em; }
.dream-markdown blockquote {
  padding: .15em 0 .15em 1em; color: var(--text-soft);
  border-left: 3px solid var(--accent-line);
}
.dream-markdown hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--border-strong); }

/* Compact disclosure cards keep scientific fields available without turning
   the right column into one very long wall of controls. */
.entry-details { padding: 0; gap: 0; overflow: visible; }
.entry-details > summary {
  position: relative; min-height: 48px; padding: 14px 42px 14px 16px;
  list-style: none; cursor: pointer; user-select: none;
}
.entry-details > summary::-webkit-details-marker { display: none; }
.entry-details > summary::after {
  content: ""; position: absolute; top: 50%; right: 18px;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease, margin-top .15s ease;
}
.entry-details[open] > summary::after { margin-top: -1px; transform: rotate(225deg); }
.entry-details > summary:hover { background: color-mix(in srgb, var(--text-max) 2%, transparent); }
.entry-details[open] > summary { border-bottom: 1px solid var(--surface-3); }
.entry-details-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; }
.entry-details .tip { margin-left: 1px; }
.quick-lucid-scale { display: flex; align-items: end; min-width: 0; }
.quick-lucid-scale .metric-row { width: 100%; align-items: flex-end; }

/* Metric rows: name left, segmented picker right */
.metric-rows { display: flex; flex-direction: column; gap: 10px; }
/* Строка метрики: значок, название, ползунок, значение. Ползунки одной длины,
   поэтому колонки выстраиваются в ровную сетку. */
.metric-row {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr 52px 20px;
  align-items: center; gap: 9px;
}
.metric-slider { position: relative; display: block; }
.metric-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; cursor: pointer;
}
/* Заливка — градиент, обрезанный по ширине до текущего значения (--at). */
.metric-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background-color: var(--surface-4); background-image: var(--fill);
  background-repeat: no-repeat; background-size: var(--at, 0%) 100%;
}
.metric-slider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background-color: var(--surface-4); background-image: var(--fill);
  background-repeat: no-repeat; background-size: var(--at, 0%) 100%;
}
.metric-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -4.5px;
  background: var(--text-max); border: 0; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.metric-slider input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; background: var(--text-max); border: 0; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
/* Пока значение не выбрано, дорожка серая: видно, что метрика пустая. */
.metric-slider.is-unset { --fill: linear-gradient(90deg, #39424d, #39424d); }
.metric-slider.is-unset input[type=range]::-webkit-slider-thumb { background: var(--faint); }
.metric-slider.is-unset input[type=range]::-moz-range-thumb { background: var(--faint); }

.slider-blue { --fill: linear-gradient(90deg, #2f6fb3, #5fa8f5); }
.slider-violet { --fill: linear-gradient(90deg, #6a54b0, #a98af0); }
.slider-rose { --fill: linear-gradient(90deg, #b34a6a, #f2789a); }
.slider-amber { --fill: linear-gradient(90deg, #b08a2e, #f0d264); }
.slider-diverging { --fill: linear-gradient(90deg, #d4574f, #8d98a5 50%, #55b37a); }

.slider-ticks { display: flex; justify-content: space-between; margin-top: 1px; padding: 0 7.5px; }
/* Нулевая ширина: цифра центрируется ровно под положением бегунка */
.slider-ticks i {
  display: flex; justify-content: center; width: 0;
  color: var(--faint); font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums;
  transition: color .12s ease;
}
.slider-ticks i.is-on { color: var(--text); font-weight: 700; }

.metric-readout { color: var(--text); font-size: 13px; text-align: right; white-space: nowrap; }
.metric-readout b { font-weight: 760; font-variant-numeric: tabular-nums; }
.metric-readout i { color: var(--muted); font-size: 11px; font-style: normal; }
.metric-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.metric-clear svg { width: 10px; height: 10px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.metric-clear:hover svg { stroke: var(--danger-ink); }
.metric-row-number { grid-template-columns: minmax(96px, auto) 1fr; }
.metric-row-number .metric-input { justify-self: end; }

/* Нижняя часть «Характеристик»: длительность и момент сна под разделителем. */
.metric-extra {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 12px;
}
.section-icon { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Степпер: три сегмента одним контролом, без нативного number input. */
.stepper-wrap { display: inline-flex; align-items: center; gap: 8px; }
.stepper {
  display: inline-flex; height: 32px;
  background: var(--surface-sunk); border: 1px solid var(--surface-4); border-radius: 8px; overflow: hidden;
}
.stepper:focus-within { border-color: var(--accent-strong); }
.stepper-btn {
  width: 32px; padding: 0; background: none; border: 0;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.stepper-btn:first-child { border-right: 1px solid var(--surface-4); }
.stepper-btn:last-child { border-left: 1px solid var(--surface-4); }
.stepper-btn:hover { color: var(--text); background: var(--surface); }
.stepper-btn:disabled { color: var(--border-strong); cursor: default; background: none; }
.stepper input {
  width: 52px; height: 100%; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; outline: none; box-shadow: none;
  color: var(--text); font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}

/* Момент сна: ровная сетка pill-кнопок, пустого значения нет. */
.metric-moment { display: flex; flex-direction: column; gap: 10px; }
.moment-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.moment-option { margin: 0; }
.moment-option input { position: absolute; opacity: 0; pointer-events: none; }
.moment-option span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 6px;
  background: var(--surface-sunk); border: 1px solid var(--surface-3); border-radius: 999px;
  color: var(--muted); font-size: 12.5px; font-weight: 520; white-space: nowrap; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .08s ease;
}
/* Невыбранные приглушены, чтобы выбранный вариант заметно «загорался». */
.moment-option span:active { transform: scale(.97); }
.moment-option svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.moment-option span:hover { color: var(--text); background: var(--surface); border-color: var(--accent-line); }
.moment-option input:checked + span { color: var(--text); background: var(--accent-deep); border-color: var(--accent-strong); }
.moment-option input:checked + span svg { stroke: var(--accent); }
.moment-option input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
@media (max-width: 460px) {
  .moment-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.metric-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-name { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.metric-input { display: inline-flex; align-items: center; gap: 7px; }
.metric-input input { width: 78px; text-align: center; }
.unit { color: var(--faint); font-size: 11px; }
.segmented { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.metric-row:has(.segmented-wide) { flex-wrap: wrap; }
/* Ползунки «Характеристик»: одна колонка под название — полоски одной длины */
.metric-rows > .metric-row:not(.metric-row-number) {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 14px;
  align-items: start; gap: 10px;
}
.metric-rows .metric-name,
.metric-rows .metric-clear { height: 18px; line-height: 18px; }
.metric-rows { gap: 8px; }
.metric-rows .metric-clear { width: 14px; }
.segmented-wide {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%; margin-left: 0;
}
.segmented-wide .segment > span { min-width: 0; padding: 0 2px; }
.segment { position: relative; margin: 0; cursor: pointer; }
.segment input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segment > span {
  display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px;
  color: var(--muted); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 6px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.segment:hover > span { color: var(--text-body); border-color: var(--border-strong); }
.segment input:checked + span { color: var(--text); background: var(--accent-strong); border-color: var(--accent-strong); font-weight: 700; }
.segment input:focus-visible + span { border-color: var(--accent); }
.segment-clear > span { min-width: 22px; color: var(--faint); }

/* Chips */
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.chip-set legend { width: 100%; padding: 0 0 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.chip { margin: 0; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip > span {
  display: inline-block; padding: 6px 11px;
  color: var(--muted); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 7px;
  font-size: 12.5px; line-height: 1.3;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.chip:hover > span { color: var(--text-body); border-color: var(--border-strong); }
.chip input:checked + span { color: var(--text); background: var(--accent-deep); border-color: var(--accent-strong); }
.chip input:focus-visible + span { border-color: var(--accent); }

.auto-note {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 15px;
  color: var(--muted); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
}
.auto-note svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; }
.hint { color: var(--faint); font-size: 12px; font-weight: 400; }
.metric-list { margin: 0 0 18px; padding-left: 20px; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.preview-meta { color: var(--text-soft); font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Inline help bubble: hover or keyboard focus, no JS */
.tip {
  position: relative; display: inline-grid; place-items: center;
  width: 15px; height: 15px; flex: 0 0 auto;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 50%; font-size: 10px; font-weight: 700; cursor: help;
}
.tip:hover, .tip:focus-visible { color: var(--text); border-color: var(--border-strong); outline: none; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20;
  width: max-content; max-width: var(--tip-max, min(360px, calc(100vw - 32px))); padding: 10px 13px;
  transform: translateX(calc(-50% + var(--tip-dx, 0px))) translateY(3px);
  color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
  white-space: pre-line; opacity: 0; pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translateX(calc(-50% + var(--tip-dx, 0px))) translateY(0); }
/* Подсказка на самом слове, без кружка «?» */
.tip.tip-text {
  display: inline; width: auto; height: auto;
  color: inherit; background: none; border: 0; border-radius: 0;
  font-size: inherit; font-weight: inherit;
  text-decoration: underline dotted color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 3px;
}
.tip.tip-text::after { left: 0; transform: translateX(var(--tip-dx, 0px)) translateY(3px); }
.tip.tip-text:hover::after, .tip.tip-text:focus-visible::after { transform: translateX(var(--tip-dx, 0px)) translateY(0); }
html.theme-light .tip.tip-text { color: inherit; background: none; }

@media (max-width: 1080px) {
  .entry-layout { grid-template-columns: minmax(0, 1fr); }
  .entry-main > .entry-card { min-height: 0; }
  .field-grow textarea { min-height: 240px; }
}
@media (min-width: 1081px) and (max-width: 1250px) {
  .entry-layout { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
  .segment > span { min-width: 23px; padding: 0 4px; }
}

/* Plans */
.plan-card {
  margin: 0 0 14px; padding: 16px 16px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: none;
}
.plan-card h2 { margin: 0 0 12px; font-size: 17px; }
.plan-body { margin: 0 0 14px; color: var(--text); font-size: 16px; line-height: 1.45; }
.plan-add { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.plan-add input[type="text"], .plan-add input:not([type]) {
  flex: 1; min-width: 0; min-height: 38px; margin: 0;
}
.plan-marks { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 10px; }
.plan-marks fieldset { margin: 0; padding: 0; border: 0; }
.plan-marks legend { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.plan-marks label { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 0 0; color: var(--text-body); }
.plan-marks input { width: auto; margin: 0; accent-color: var(--accent); }
.plan-row { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-4); }
.plan-row p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.45; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-actions form, .plan-row > form { margin: 0; }
.plan-quiet {
  min-height: 36px; padding: 7px 10px; color: var(--muted); background: transparent;
  border: 0; font-size: 13px; font-weight: 650; cursor: pointer;
}
.plan-quiet:hover { color: var(--danger-ink); }
.plan-history { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--surface-4); }
.plan-history p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.account-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: stretch;
}
.account-grid > .plan-card { margin: 0; }
.account-wide { grid-column: 1 / -1; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form h2 { margin: 0; font-size: 17px; }
.account-form label { display: grid; gap: 6px; margin: 0; color: var(--text-body); font-size: 13px; }
.account-form input { width: 100%; min-height: 38px; margin: 0; }
.account-form .hint { margin: 0; }
/* Actions sit on the card floor so paired cards share one button baseline. */
.account-form > button { align-self: start; margin-top: auto; }
.ai-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.ai-card-copy { min-width: 0; }
.ai-card-copy h2 { margin-bottom: 4px; }
.account-form .switch {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  color: var(--text-body); font-size: 13px; font-weight: 680; cursor: pointer;
}
.account-form .switch input {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0;
}
.switch-track {
  position: relative; width: 46px; height: 28px; flex: 0 0 46px;
  background: var(--surface-4); border: 1px solid var(--border-strong); border-radius: 99px;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--text-body);
  transition: transform .16s ease, background-color .16s ease;
}
.switch input:checked + .switch-track { background: var(--accent-strong); border-color: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--text-max); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
html.theme-light .account-form .switch { color: var(--text-body); }
html.theme-light .switch-track { background: var(--surface-4); border-color: var(--border-strong); }
html.theme-light .switch-track::after { background: var(--surface); }
html.theme-light .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.profile-place, .settings-place, .password-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-danger .danger-field { max-width: 320px; }
.people-list { display: grid; gap: 8px; margin-bottom: 14px; }
.person-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 12px;
}
.person-mark {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
  color: var(--text-body); background: var(--accent-deep); border-radius: 10px; font-size: 14px; font-weight: 750;
}
.person-row span:nth-child(2) { display: grid; min-width: 0; }
.person-row b { color: var(--text); font-size: 14px; }
.person-row small { color: var(--muted); font-size: 12px; }
.person-row em {
  margin-left: auto; padding: 2px 8px; color: var(--text-body); background: var(--accent-deep);
  border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 750;
}
.person-create {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; align-items: end;
}
.person-create label { display: grid; gap: 6px; margin: 0; color: var(--text-body); font-size: 12px; }
.person-create input { width: 100%; min-height: 38px; margin: 0; }
.person-create button { min-height: 38px; white-space: nowrap; }
.account-danger { border-color: var(--danger-deep); }
.danger-button {
  justify-self: start; min-height: 38px; padding: 8px 14px; color: var(--danger-ink);
  background: transparent; border: 1px solid var(--danger-deep); border-radius: 10px; font-weight: 700; cursor: pointer;
}
.danger-button:hover { background: var(--surface); }
@media (max-width: 980px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .profile-place, .settings-place, .password-pair, .person-create { grid-template-columns: 1fr; }
}
.guest-banner {
  margin: 0 0 14px; padding: 10px 12px; color: var(--text-body);
  background: var(--surface-2); border: 1px solid var(--accent-deep); border-radius: 12px; font-size: 13px;
}
.guest-list { display: grid; gap: 8px; margin-top: 18px; }
.guest-list h2 { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
.guest-card {
  display: grid; gap: 12px; margin: 0; padding: 12px;
  background: var(--surface); border: 1px solid var(--surface-4); border-radius: 16px;
}
.guest-card-head { display: flex; align-items: center; gap: 10px; }
.guest-card img, .guest-letter {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; background: var(--accent-deep);
}
.guest-letter { display: grid; place-items: center; color: var(--text-body); font-size: 18px; font-weight: 750; }
.guest-card b { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 16px; }
.guest-card button {
  min-height: 34px; padding: 0 12px; color: var(--text); background: transparent;
  border: 1px solid var(--accent-line); border-radius: 8px; font-weight: 700; cursor: pointer;
}
.guest-card button:hover { background: var(--surface-3); }
.guest-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.guest-card dl div {
  display: grid; gap: 2px; min-width: 0; padding: 8px;
  background: var(--surface-sunk); border-radius: 10px;
}
.guest-card dt { color: var(--muted); font-size: 11px; font-weight: 650; }
.guest-card dd { margin: 0; color: var(--text); font-size: 16px; font-weight: 740; }

.theme-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-option {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; color: var(--text-body); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 14px; font-weight: 720; cursor: pointer;
}
.theme-option.is-selected { color: var(--text); border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.theme-swatch { width: 28px; height: 18px; border-radius: 6px; border: 1px solid var(--border-strong); }
.theme-swatch.is-dark { background: linear-gradient(135deg, var(--surface), var(--bg)); }
.theme-swatch.is-light { background: linear-gradient(135deg, #ffffff, var(--text)); }

/* ===== Дневная тема =====
   Тёплая бумага. Палитра держится на пяти ступенях текста и трёх поверхностях,
   чтобы контраст был предсказуемым: заголовок — #2c2823, основной — #3e3a33,
   второстепенный — #5c554a, приглушённый — #6f675c, самый тихий — #857c6d. */
html.theme-light {
  color-scheme: light;
  color: var(--text-body);
  background: var(--bg);
  /* Палитра «Бумага» — светлая. */
  --bg: #f4f1ec;
  --surface-sunk: #f2ece0;
  --surface: #ffffff;
  --surface-2: #fbf8f1;
  --surface-3: #efebe4;
  --surface-4: #e8dfcb;
  --border: #e8e4dc;
  --border-strong: #d4c9b6;
  --faint: #a89e8c;
  --muted: #6f675c;
  --text-soft: #5c554a;
  --text-body: #403c35;
  --text: #2c2823;
  --text-max: #1a1814;
  --accent-ink: #1f4d6e;
  --accent: #2f6389;
  --accent-strong: #7aa8c8;
  --accent-line: #b7d0e3;
  --accent-deep: #dfecf6;
  --danger-ink: #9c4038;
  --danger: #c0564d;
  --danger-deep: #f5e5df;
  --ok-ink: #35552b;
  --ok: #4f8a5a;
  --ok-deep: #e4efdc;
  --warn-ink: #6a5424;
  --warn: #b08a2e;
  --warn-line: #d8b558;
  --warn-deep: #f6e7bd;
  --violet-ink: #4c3d68;
  --violet: #7a5fc0;
  --violet-deep: #ece6f7;
  --rose-ink: #7a2f48;
  --rose: #c0506f;
  --rose-deep: #f7e1e8;
  --teal-ink: #1f5550;
  --teal: #2a8a8a;
  --teal-deep: #dcf0ee;
  --sidebar: #fdfbf7;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- Каркас и меню --- */
html.theme-light body.auth-screen { background: radial-gradient(ellipse at center, var(--surface-2) 0%, var(--bg) 72%); }
html.theme-light .sidebar {
  background: var(--surface-2);
  border-color: var(--surface-3);
  box-shadow: none;
}
html.theme-light .menu-moon path { fill: var(--text-body); }
html.theme-light .moon-switch { background: transparent; border: 0; }
html.theme-light .moon-switch:hover { background: var(--surface-3); }
html.theme-light .side-brand { color: var(--text); }
html.theme-light .side-brand small { color: var(--muted); }
html.theme-light .side-tool,
html.theme-light .nav-item,
html.theme-light .nav-add,
html.theme-light .side-tools .menu-toggle,
html.theme-light .side-gear { color: var(--text-soft); background: transparent; }
html.theme-light .side-tool:hover,
html.theme-light .side-tool.is-active,
html.theme-light .nav-item:hover,
html.theme-light .nav-item.is-active,
html.theme-light .side-gear:hover,
html.theme-light .side-gear.is-active,
html.theme-light .nav-add:hover,
html.theme-light .nav-add.is-active,
html.theme-light .side-tools .menu-toggle:hover { color: var(--text-max); background: var(--surface-3); }
html.theme-light.sidebar-collapsed .nav-add,
html.sidebar-collapsed.theme-light .nav-add { color: var(--text-body); background: var(--surface); }
html.theme-light .side-account-name { color: var(--text); }
html.theme-light .profile-chip:hover,
html.theme-light .profile-chip[aria-expanded="true"],
html.theme-light .logout-icon:hover { color: var(--text-max); background: var(--surface-3); }
html.theme-light .profile-menu { background: var(--surface); border-color: var(--border); box-shadow: 0 16px 36px color-mix(in srgb, var(--warn-ink) 12%, transparent); }
html.theme-light .profile-menu a,
html.theme-light .profile-menu button { color: var(--text); }
html.theme-light .profile-menu a:hover,
html.theme-light .profile-menu button:hover { background: var(--surface-3); }
html.theme-light .profile-menu em { color: var(--muted); }
html.theme-light .side-avatar,
html.theme-light .avatar-preview,
html.theme-light .guest-card img,
html.theme-light .guest-letter { background: var(--border-strong); }
html.theme-light .avatar-empty,
html.theme-light .guest-letter { color: var(--text-body); }
html.theme-light .menu-edge,
html.theme-light .menu-edge.menu-toggle { color: var(--muted); background: transparent; border: 0; box-shadow: none; opacity: .9; }
html.theme-light .menu-edge:hover,
html.theme-light .menu-edge:focus-visible { color: var(--text); background: transparent; opacity: 1; }
html.theme-light .side-tool::after,
html.theme-light .menu-toggle::after,
html.theme-light .side-gear::after,
html.theme-light .moon-switch::after,
html.theme-light .logout-button::after {
  color: var(--text); background: var(--surface-2); border-color: var(--border-strong);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--warn-ink) 16%, transparent);
}
html.theme-light .logout-button { color: var(--danger-ink); border-color: var(--border-strong); }
html.theme-light .logout-button:hover { color: var(--danger-ink); background: var(--border); }
html.theme-light .new-dream-button { color: var(--accent-ink); background: var(--bg); border-color: var(--border); }
html.theme-light .new-dream-button:hover { background: var(--border); border-color: var(--accent-line); }
html.theme-light .guest-banner { color: var(--text); background: var(--surface-sunk); border-color: var(--surface-4); }

/* --- Поверхности --- */
html.theme-light .auth-card,
html.theme-light .plan-card,
html.theme-light .dashboard-card,
html.theme-light .entry-card,
html.theme-light .dream-card,
html.theme-light .dream-sheet,
html.theme-light .side-card,
html.theme-light .dream-side .analysis-card,
html.theme-light .stat-card,
html.theme-light .analytics-card,
html.theme-light .search-empty,
html.theme-light .dream-calendar,
html.theme-light .guest-card,
html.theme-light .context-item,
html.theme-light .related {
  color: var(--text-body); background: var(--surface); border-color: var(--border);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--warn-ink) 5%, transparent);
}
html.theme-light .related { border-color: var(--border); background: var(--surface-2); }
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light .card-title,
html.theme-light .context-item b,
html.theme-light .auth-card h1,
html.theme-light .dashboard-card-head h2,
html.theme-light .guest-card b,
html.theme-light .guest-card dd,
html.theme-light .featured-dream > strong,
html.theme-light .memory-dream b,
html.theme-light .fact-row b,
html.theme-light .factor-line b,
html.theme-light .month-stats b,
html.theme-light .analytics-empty b,
html.theme-light .year-switcher b { color: var(--text); }
html.theme-light .technical,
html.theme-light .insight-question,
html.theme-light .factor-line,
html.theme-light .plan-marks label,
html.theme-light .plan-row p,
html.theme-light .plan-body,
html.theme-light .dream-page .dream-text,
html.theme-light .dream-neighbors a,
html.theme-light .metric-list,
html.theme-light .preview-meta,
html.theme-light .search-snippet,
html.theme-light .featured-dream > p,
html.theme-light .dream-markdown blockquote { color: var(--text-body); }
html.theme-light .person-create label,
html.theme-light .field-label,
html.theme-light .metric-name,
html.theme-light .month-value,
html.theme-light .year-summary,
html.theme-light .dream-excerpt { color: var(--text-soft); }
html.theme-light .context-item small,
html.theme-light .guest-card dt,
html.theme-light .auth-field > span:first-child,
html.theme-light .auth-lead,
html.theme-light .auth-note,
html.theme-light .hint,
html.theme-light .meta,
html.theme-light .empty-list,
html.theme-light .empty-copy,
html.theme-light .guest-list h2,
html.theme-light .guest-list small,
html.theme-light .dashboard-date,
html.theme-light .entry-sub,
html.theme-light .calendar-legend,
html.theme-light .mini-legend,
html.theme-light .month-label,
html.theme-light .month-stats,
html.theme-light .memory-tonight,
html.theme-light .memory-empty,
html.theme-light .memory-empty p,
html.theme-light .dream-span,
html.theme-light .dream-read-meta time,
html.theme-light .back-link,
html.theme-light .chip-label,
html.theme-light .side-note,
html.theme-light .search-count,
html.theme-light .search-toggle,
html.theme-light .search-icon,
html.theme-light .emoji-catalog-head span,
html.theme-light .plan-marks legend,
html.theme-light .plan-history p,
html.theme-light .chip-set legend,
html.theme-light .auth-eye,
html.theme-light .day-more,
html.theme-light .insight-dream span,
html.theme-light .memory-dream small,
html.theme-light .dream-meta-row span,
html.theme-light .calendar-head h1 span,
html.theme-light .month-block-head h2 span,
html.theme-light .analytics-head > p { color: var(--muted); }
/* Дочерние элементы держат собственный цвет, поэтому их нужно перекрывать точечно. */
html.theme-light .calendar-weekdays span,
html.theme-light .dream-card time,
html.theme-light .kind-chip b,
html.theme-light .account-form label,
html.theme-light .person-row small,
html.theme-light .fact-row span,
html.theme-light .dream-neighbors a span { color: var(--muted); }
html.theme-light .unit,
html.theme-light .segment-clear > span,
html.theme-light .year-switcher > span { color: var(--muted); }
html.theme-light .back-link:hover,
html.theme-light .auth-eye:hover,
html.theme-light .dream-open:hover h2,
html.theme-light .quiet-link:hover { color: var(--text); }
html.theme-light .month-summary,
html.theme-light .quiet-link { color: var(--text-body); }
html.theme-light .eyebrow,
html.theme-light .section-kicker,
html.theme-light .read-more,
html.theme-light .insight-dream b,
html.theme-light .auth-moon,
html.theme-light .weather-icon,
html.theme-light .month-stats .streak-stat b { color: var(--accent); }
html.theme-light .dashboard-notice-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
html.theme-light .insight-card::after { border-color: color-mix(in srgb, var(--accent) 16%, transparent); }
html.theme-light .entry-details > summary:hover { background: color-mix(in srgb, var(--warn-ink) 4%, transparent); }

/* --- Вложенные плашки --- */
html.theme-light .chip-row span,
html.theme-light .person-row,
html.theme-light .rank-list > div,
html.theme-light .context-icon,
html.theme-light .memory-day,
html.theme-light .dream-date-line i,
html.theme-light .dashboard-notice,
html.theme-light .dashboard-notice-actions a,
html.theme-light .result-tag,
html.theme-light .memory-empty > span,
html.theme-light .guest-card dl div,
html.theme-light .dream-meta-row span,
html.theme-light .auto-note { color: var(--text-body); background: var(--surface-sunk); border-color: var(--surface-4); }
html.theme-light .auto-note svg { stroke: var(--accent); }
html.theme-light .person-mark,
html.theme-light .person-row em { color: var(--text); background: var(--surface-4); }
html.theme-light .person-row b { color: var(--text); }
html.theme-light .meter { background: var(--border-strong); }
html.theme-light .meter i { background: var(--accent); }
html.theme-light .tip { color: var(--muted); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .tip:hover,
html.theme-light .tip:focus-visible { color: var(--text); border-color: var(--warn-line); }
html.theme-light .tip::after {
  color: var(--text); background: var(--surface-2); border-color: var(--border-strong);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--warn-ink) 20%, transparent);
}

/* --- Поля и кнопки --- */
html.theme-light input,
html.theme-light select,
html.theme-light textarea,
html.theme-light button { color: var(--text); background: var(--surface-2); }
html.theme-light .auth-control input,
html.theme-light .entry-card input,
html.theme-light .entry-card select,
html.theme-light .entry-card textarea,
html.theme-light .account-form input,
html.theme-light .search-field input { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
html.theme-light .entry-card input::placeholder,
html.theme-light .entry-card textarea::placeholder { color: var(--faint); }
html.theme-light .auth-submit,
html.theme-light .btn-primary,
html.theme-light .segment input:checked + span { color: var(--bg); background: var(--accent); border-color: var(--accent); }
html.theme-light .btn-primary:hover,
html.theme-light .auth-submit:hover { background: var(--accent-ink); }
html.theme-light .btn-secondary,
html.theme-light .dream-tool,
html.theme-light .calendar-controls a,
html.theme-light .kind-chip,
html.theme-light .sort-switch a,
html.theme-light .year-switcher a,
html.theme-light .dream-actions a,
html.theme-light .theme-option { color: var(--text-body); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .btn-secondary:hover,
html.theme-light .kind-chip:hover,
html.theme-light .kind-chip.is-active,
html.theme-light .sort-switch a.is-active,
html.theme-light .year-switcher a:hover,
html.theme-light .dream-actions a:hover,
html.theme-light .dream-card:hover { color: var(--text); background: var(--surface-4); border-color: var(--warn-line); }
html.theme-light .theme-option.is-selected { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
html.theme-light .theme-swatch { border-color: var(--border-strong); }
html.theme-light .plan-quiet { color: var(--muted); background: transparent; }
html.theme-light .plan-quiet:hover,
html.theme-light .danger-link,
html.theme-light .dream-actions .danger-link { color: var(--danger-ink); }
html.theme-light .danger-button,
html.theme-light .dream-tool-delete { color: var(--danger-ink); border-color: var(--border-strong); }
html.theme-light .danger-button:hover,
html.theme-light .dream-tool-delete:hover { color: var(--danger-ink); background: var(--surface-3); border-color: var(--danger-deep); }
html.theme-light .account-danger { border-color: var(--border-strong); }

/* --- Календарь --- */
html.theme-light .calendar-day,
html.theme-light .calendar-weekdays { background: var(--surface-2); color: var(--text-body); border-color: var(--surface-4); }
html.theme-light .calendar-weekdays { color: var(--muted); }
html.theme-light .calendar-day.is-empty { background: var(--surface-sunk); }
html.theme-light .calendar-day:hover,
html.theme-light .calendar-day.has-dreams:hover { background: var(--border); }
html.theme-light .calendar-day.has-dreams { background: var(--surface-sunk); }
html.theme-light .day-number { color: var(--text-soft); }
html.theme-light .day-entry b { color: var(--text-body); }
html.theme-light .calendar-day:hover .day-entry b { color: var(--text); }
html.theme-light .calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
html.theme-light .calendar-day.is-today .day-number { color: var(--bg); background: var(--accent); }
html.theme-light .calendar-day.is-prophetic { background: var(--warn-deep); box-shadow: inset 0 0 0 1px var(--warn); }
html.theme-light .calendar-day.is-prophetic:hover { background: var(--warn-deep); }
html.theme-light .calendar-day.is-today.is-prophetic { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 3px color-mix(in srgb, var(--warn) 75%, transparent); }
html.theme-light .day-entry .entry-star { color: var(--warn-ink); }

/* --- Типы снов --- */
html.theme-light .dream-dot { background: var(--muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 14%, transparent); }
html.theme-light .dream-dot.ordinary,
html.theme-light .mini-legend i { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
html.theme-light .dream-dot.lucid,
html.theme-light .mini-legend i.lucid { background: var(--violet); box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 14%, transparent); }
html.theme-light .dream-dot.fragment { background: var(--muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 14%, transparent); }
html.theme-light .day-entry .dream-dot { box-shadow: none; }
html.theme-light .dream-badge { color: var(--text-body); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .dream-badge.lucid { color: var(--violet-ink); background: var(--surface-3); border-color: var(--violet-deep); }
html.theme-light .dream-badge.fragment { color: var(--warn-ink); background: var(--surface-sunk); border-color: var(--warn-line); }
html.theme-light .dream-badge.prophetic,
html.theme-light .dream-read-tools .dream-tool.is-on { color: var(--warn-ink); background: var(--warn-deep); border-color: var(--warn-line); }
html.theme-light .dream-badge.analysis-failed { color: var(--danger-ink); background: var(--border); border-color: var(--border-strong); }
html.theme-light .analysis-error { color: var(--danger-ink); }
html.theme-light .tg-block { color: var(--text-body); background: var(--surface); border-color: var(--border); }
html.theme-light .tg-block-text b { color: var(--text); }
html.theme-light .tg-grip { color: var(--faint); }
html.theme-light .tg-look { color: var(--faint); }
html.theme-light .tg-look:hover { color: var(--text); border-color: var(--border); }
html.theme-light .tg-look.is-on { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .tg-block-tools button { color: var(--muted); border-color: var(--border); }
html.theme-light .tg-block-tools button:hover { color: var(--text); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .telegram-chats .check-row { color: var(--text-body); background: var(--surface); border-color: var(--border); }
html.theme-light .telegram-chats .check-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
html.theme-light .telegram-chats .check-row:has(input:checked) { background: var(--bg); border-color: var(--accent-strong); }
html.theme-light .tg-bubble { color: var(--text-body); background: var(--surface-2); border-color: var(--border); }
html.theme-light .tg-bubble b { color: var(--text); }
html.theme-light .tg-bubble i { color: var(--muted); }
html.theme-light .tg-bubble blockquote { color: var(--text-body); border-left-color: var(--accent-strong); }
html.theme-light .analysis-item { background: var(--surface-3); color: var(--text); }
html.theme-light .analysis-item button { color: var(--text); }
/* В боковой колонке теги разбора носят тот же вид, что чипы «Характеристик» и «Ночи». */
html.theme-light .dream-side .analysis-item { color: var(--violet-ink); background: var(--surface-3); border-color: var(--violet-deep); }
html.theme-light .dream-side .analysis-item button { color: var(--violet-ink); }
html.theme-light .dream-side .analysis-row > span { color: var(--muted); }
html.theme-light .dream-side .analysis-row b { color: var(--text-body); }

/* --- Шкалы оценок и чипы --- */
html.theme-light .chip > span { color: var(--text-soft); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .chip:hover > span { color: var(--text); background: var(--surface-4); border-color: var(--warn-line); }
html.theme-light .chip input:checked + span { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .segment > span { color: var(--muted); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .segment:hover > span { color: var(--text); background: var(--surface-4); border-color: var(--warn-line); }
html.theme-light .segment-clear > span { color: var(--muted); }

/* --- Поиск --- */
html.theme-light .search-field { background: var(--surface-2); border-color: var(--border-strong); }
html.theme-light .search-field:focus-within { border-color: var(--accent); }
html.theme-light .search-field input[name="q"]::placeholder { color: var(--faint); }
html.theme-light .search-field button { color: var(--bg); background: var(--accent); border-color: var(--accent); }
html.theme-light .search-field button:hover { background: var(--accent-ink); }

/* --- Аналитика --- */
html.theme-light .stat-card > span { color: var(--muted); }
html.theme-light .stat-card > b { color: var(--text); }
html.theme-light .stat-card > small { color: var(--muted); }
html.theme-light .stat-card.lucid-stat { background: var(--bg); border-color: var(--violet-deep); }
html.theme-light .stat-card.lucid-stat > b { color: var(--violet-ink); }
html.theme-light .month-bar { background: var(--accent); }
html.theme-light .month-bar i { background: var(--violet); }
html.theme-light .analytics-empty { color: var(--muted); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .search-snippet mark { color: var(--warn-ink); background: var(--warn-deep); }

/* --- Луна и погода --- */
/* Луна остаётся ночным токеном: на светлом фоне фаза читается только так —
   бледный серп на бледном небе сливается. */
html.theme-light .moon-icon { background: radial-gradient(circle at 32% 28%, var(--accent-ink), var(--accent-ink)); }
html.theme-light .moon-disc { fill: var(--accent-ink); }
html.theme-light .moon-lit { fill: var(--warn-deep); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--warn-deep) 50%, transparent)); }
html.theme-light .geo-icon.geo-calm { color: var(--ok-ink); background: var(--border); }
html.theme-light .geo-icon.geo-unsettled { color: var(--warn-ink); background: var(--warn-deep); }
html.theme-light .geo-icon.geo-storm { color: var(--danger-ink); background: var(--border); }
html.theme-light .geo-icon.geo-severe { color: var(--danger-ink); background: var(--border); }

/* --- Редактор --- */
html.theme-light .editor-toolbar,
html.theme-light .emoji-panel { background: var(--surface-2); border-color: var(--border-strong); }
html.theme-light .editor-toolbar button { color: var(--text-soft); }
html.theme-light .emoji-section h3 { color: var(--muted); }
html.theme-light .emoji-more,
html.theme-light .emoji-back,
html.theme-light .emoji-own button { color: var(--text-soft); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .emoji-more:hover,
html.theme-light .emoji-back:hover,
html.theme-light .emoji-own button:hover { color: var(--text); background: var(--surface-4); }
html.theme-light .emoji-remove { color: var(--text) !important; background: var(--surface-4) !important; border-color: var(--border-strong) !important; }
html.theme-light .emoji-panel .emoji-grid button:hover,
html.theme-light .editor-toolbar button:hover { color: var(--text); background: var(--surface-4); }

/* --- Сообщения --- */
html.theme-light .flash.error { color: var(--danger-ink); background: var(--surface-3); border-color: var(--border-strong); }
html.theme-light .flash.success { color: var(--ok-ink); background: var(--surface-3); border-color: var(--ok-deep); }

/* --- Экспорт --- */
.export-head { margin: 0 2px 22px; }
.export-head h1 { margin: 0 0 10px; }
.export-lead { max-width: 52ch; margin: 0 0 14px; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.export-counts { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.export-counts b { color: var(--text-body); font-weight: 800; }
.export-dot { margin: 0 4px; color: var(--faint); }
.export-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.export-card {
  display: flex; flex-direction: column; min-width: 0; padding: 20px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}
.export-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  color: var(--accent-ink); background: var(--surface-3); border-radius: 12px;
}
.export-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.export-card h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; }
.export-card p { margin: 0 0 12px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.export-card code { font-size: 12px; word-break: break-all; }
.export-sub { color: var(--muted) !important; font-size: 12px !important; }
.export-card .export-sub:last-of-type { margin-bottom: 18px; }
.export-button {
  margin-top: auto; padding: 11px 16px; color: var(--surface-sunk); background: var(--accent);
  border-radius: 11px; font-size: 13px; font-weight: 750; text-align: center;
  text-decoration: none; transition: background-color .15s ease;
}
.export-button:hover { background: var(--accent-ink); }
@media (max-width: 900px) { .export-grid { grid-template-columns: 1fr; } }

html.theme-light .export-lead,
html.theme-light .export-card p { color: var(--text-soft); }
html.theme-light .export-counts { color: var(--muted); }
html.theme-light .export-counts b { color: var(--text); }
html.theme-light .export-dot { color: var(--faint); }
html.theme-light .export-sub { color: var(--muted) !important; }
html.theme-light .export-card { background: var(--surface-2); border-color: var(--surface-4); box-shadow: 0 10px 26px color-mix(in srgb, var(--warn-ink) 8%, transparent); }
html.theme-light .export-icon { color: var(--accent); background: var(--surface-4); }
html.theme-light .export-button { color: var(--surface-2); background: var(--accent); }
html.theme-light .export-button:hover { background: var(--accent-ink); }

/* Delete confirmation dialog */
.confirm-dialog {
  border: 1px solid var(--border-strong); border-radius: 18px; padding: 26px 30px 22px;
  background: var(--surface); color: var(--text); text-align: center; min-width: 240px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.confirm-dialog[open] { animation: confirm-in .16s ease-out; }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); }
@keyframes confirm-in { from { opacity: 0; transform: scale(.95); } }
.confirm-dialog svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.confirm-icon { width: 30px !important; height: 30px !important; color: var(--danger); }
.confirm-title { margin: 10px 0 2px; font-size: 17px; font-weight: 680; }
.confirm-hint { margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.confirm-buttons { display: flex; justify-content: center; gap: 18px; }
.confirm-buttons button {
  width: 50px; height: 50px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
  transition: transform .12s, background .12s, color .12s;
}
.confirm-buttons button:hover { transform: scale(1.07); color: var(--text); }
.confirm-buttons .confirm-yes { background: var(--danger-deep); border-color: var(--danger-deep); color: var(--text); }
.confirm-buttons .confirm-yes:hover { background: var(--danger-deep); color: var(--text-max); }
.dream-actions form { margin: 0; }
.dream-actions button {
  padding: 3px 8px; color: var(--text-body); background: var(--surface-sunk);
  border: 1px solid var(--border-strong); border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.dream-actions button:hover { color: var(--text-max); border-color: var(--accent-strong); }
.dream-actions button.danger-link { color: var(--danger-ink); }
.dream-card .trash-actions { position: relative; z-index: 1; }
.kind-chip-todo { margin-left: 8px; }
/* На странице сна действия — только иконки; подпись всплывает при наведении. */
.dream-read-tools .dream-tool { position: relative; justify-content: center; width: 38px; height: 38px; min-height: 0; padding: 0; }
.dream-read-tools .dream-tool svg { width: 18px; height: 18px; }
.dream-read-tools button.dream-tool { cursor: pointer; font: inherit; }
.dream-read-tools .dream-tool::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.dream-read-tools .dream-tool:hover::after, .dream-read-tools .dream-tool:focus-visible::after { opacity: 1; }
/* Иконки висят над правым краем окна сна, не сдвигая его вниз. */
.dream-read-main { position: relative; }
.dream-read-main > .dream-read-tools { position: absolute; right: 0; bottom: calc(100% + 13px); margin: 0; }
.dream-read-main > .dream-read-tools { gap: 18px; }
.dream-tool-group { display: flex; align-items: center; gap: 8px; }
.dream-tool-group form { margin: 0; }
.dream-read-tools .dream-tool.is-disabled { opacity: .35; }
.dream-read-tools .dream-tool.is-disabled::after { display: none; }
.reader-actions { display: none; }
.reader-more { position: relative; }
.reader-more > .dream-tool { font-size: 23px; line-height: 1; padding-bottom: 7px; cursor: pointer; }
.reader-more-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; width: 218px;
  display: grid; padding: 6px; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.reader-more-pop[hidden] { display: none; }
.reader-more-pop button, .reader-more-pop a {
  display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px;
  color: var(--text-body); background: transparent; font: inherit; font-size: 13px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.reader-more-pop button:hover, .reader-more-pop a:hover { color: var(--text); background: var(--surface-3); }
.reader-more-pop .is-danger { color: var(--danger-ink); }

/* YouTube по клику на ссылку в тексте: без загрузки плеера до открытия окна. */
.youtube-dialog {
  width: min(860px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; overflow: hidden; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}
.youtube-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); }
.youtube-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; font-size: 14px; font-weight: 700; }
.youtube-dialog-head button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.youtube-dialog-head button:hover { color: var(--text); background: var(--surface-3); }
.youtube-dialog-frame { aspect-ratio: 16 / 9; background: #000; }
.youtube-dialog-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-dialog-link { display: block; width: fit-content; margin: 12px auto 15px; color: var(--accent); font-size: 13px; font-weight: 650; text-decoration: none; }
.youtube-dialog-link:hover { text-decoration: underline; }
@media (max-height: 500px) {
  .youtube-dialog-frame { height: calc(100vh - 145px); aspect-ratio: auto; }
}
/* «Ночь» в шапке сна: луна по настоящей фазе и геомагнитка, без рамки. */
.night-strip { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; padding-top: 4px; }
.night-item { display: flex; align-items: center; gap: 9px; }
.night-item div { display: grid; line-height: 1.25; }
.night-item b { color: var(--text-body); font-size: 13px; font-weight: 700; }
.night-item span { color: var(--muted); font-size: 12px; }
.moon-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.night-moon-dark { fill: var(--border); stroke: var(--border-strong); stroke-width: .8; }
.night-moon-lit { fill: var(--warn-ink); }
.geo-icon { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; }
.geo-storm .geo-icon { stroke: var(--warn); }
.geo-severe .geo-icon { stroke: var(--danger); }
@media (max-width: 860px) { .night-strip { flex-basis: 100%; } }
html.theme-light .night-moon-dark { fill: var(--border); stroke: var(--border-strong); }
html.theme-light .night-moon-lit { fill: var(--warn-deep); }
html.theme-light .night-item b { color: var(--text-body); }
html.theme-light .night-item span { color: var(--muted); }
/* Главная: луна, погода и геомагнитка — просто данные, без плашек, как на странице сна. */
.context-strip { align-items: center; gap: 24px; }
.context-item, html.theme-light .context-item {
  gap: 9px; min-height: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.context-item b { font-size: 13px; }
.context-item small { font-size: 12px; }
.context-icon, html.theme-light .context-icon { flex-basis: 30px; width: 30px; height: 30px; background: none; border-radius: 0; }
.moon-icon { background: none; }
.moon-svg { width: 30px; height: 30px; }
.weather-icon { font-size: 15px; line-height: 30px; }
.geo-svg { width: 26px; height: 26px; }
.nav-count { margin-left: auto; padding: 1px 7px; color: var(--text-body); background: var(--surface-4); border-radius: 9px; font-size: 11px; font-weight: 750; }
html.sidebar-collapsed .nav-count { position: absolute; top: 4px; right: 4px; padding: 0 5px; font-size: 10px; }
html.theme-light .nav-count { color: var(--text-body); background: var(--surface-3); }
/* «Сны» раскрываются: черновики, входящие, корзина. Стрелка стоит слева от плюса. */
.nav-group-toggle { right: 40px; border: 0; background: none; cursor: pointer; font: inherit; }
.nav-group-toggle svg { transition: transform .15s ease; }
.nav-with-add.is-open .nav-group-toggle svg { transform: rotate(180deg); }
.nav-group { display: none; }
.nav-group.is-open { display: grid; gap: 2px; }
.nav-group-toggle.nav-group-toggle-solo { right: 4px; }
html.sidebar-collapsed .nav-group-toggle { display: none; }
html.sidebar-collapsed .nav-group { display: grid; gap: 4px; }
button.nav-add { color: var(--text-soft); }
/* Страница AI: одна карточка-список, строка = подпись слева, управление справа. */
.settings-panel {
  margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 0; padding: 16px 18px;
}
.setting-row + .setting-row { border-top: 1px solid var(--surface-4); }
.setting-row.is-muted .setting-copy { opacity: .55; }
.setting-copy { min-width: 0; max-width: 620px; }
.setting-copy h2 { margin: 0 0 3px; font-size: 15px; font-weight: 720; }
.setting-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.setting-control { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.setting-control select { width: 280px; min-height: 36px; margin: 0; }
.setting-row .switch { display: flex; flex: 0 0 auto; cursor: pointer; }
.setting-row .switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.icon-button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: var(--text-soft); background: var(--surface-sunk); border: 1px solid var(--border-strong); border-radius: 9px; cursor: pointer;
}
.icon-button:hover { color: var(--text-max); border-color: var(--accent-strong); }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.theme-light .settings-panel { background: var(--surface); border-color: var(--border); }
html.theme-light .setting-row + .setting-row { border-top-color: var(--surface-3); }
html.theme-light .setting-copy p { color: var(--muted); }
html.theme-light .icon-button { color: var(--text-body); background: var(--surface); border-color: var(--surface-4); }
@media (max-width: 640px) {
  .setting-row { flex-wrap: wrap; gap: 12px; }
  .setting-copy { max-width: none; }
  .setting-control, .setting-control select { width: 100%; }
  .setting-control select { flex: 1; }
}
.setting-busy { color: var(--muted); font-size: 12px; white-space: nowrap; }
.icon-button.is-busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Настройки: одна колонка той же ширины, что страница AI, а не на весь экран. */
.account-grid.settings-narrow { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .account-grid.settings-narrow { grid-template-columns: minmax(0, 1fr); } }
.settings-narrow .person-create { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
@media (max-width: 860px) { .settings-narrow .person-create { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .settings-narrow .person-create button { grid-column: 1 / -1; justify-self: start; } }
.settings-narrow .account-form > button { align-self: start; }
.ai-card > select { flex: 0 0 180px; width: 180px; min-height: 36px; margin: 0; }
/* Шапка разбора в одну строку: «Разбор», модель мелко, ↻ вместо кнопки «Повторить». */
.analysis-head .analysis-model { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; min-width: 0; }
.analysis-head-side { min-width: 0; }
.analysis-head-side { gap: 8px; }
.analysis-redo {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.analysis-redo:hover { color: var(--text-max); border-color: var(--border-strong); background: var(--surface-2); }
.analysis-redo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.theme-light .analysis-redo { color: var(--muted); }
html.theme-light .analysis-redo:hover { color: var(--text-body); border-color: var(--surface-4); background: var(--bg); }
/* Шаг 2: метки разбора компактнее; «убрать» — кружок в углу, виден при наведении и не занимает места. */
.analysis-items, .dream-side .analysis-items { gap: 4px; }
.analysis-item, .dream-side .analysis-item { padding: 1px 8px; font-size: 12px; line-height: 20px; }
.analysis-item.is-accepted { position: relative; gap: 0; }
.analysis-item.is-accepted form {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.analysis-item.is-accepted:hover form,
.analysis-item.is-accepted:focus-within form { opacity: 1; pointer-events: auto; }
.analysis-item.is-accepted .item-drop {
  width: 16px; height: 16px; min-height: 0;
  background: var(--danger-deep); border: 1px solid var(--danger-deep);
}
.analysis-item.is-accepted .item-drop svg { width: 8px; height: 8px; stroke: var(--danger-ink); }
@media (hover: none) {
  .analysis-item.is-accepted form { opacity: 1; pointer-events: auto; }
}
html.theme-light .analysis-item.is-accepted .item-drop { background: var(--surface-3); border-color: var(--border-strong); }
html.theme-light .analysis-item.is-accepted .item-drop svg { stroke: var(--danger-ink); }
/* Строки разбора как в «Характеристиках сна»: подпись слева, метки прижаты вправо, линия между строками. */
.dream-side .analysis-row {
  grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  margin: 0; padding: 4px 0; border-top: 1px solid var(--surface-3);
}
.dream-side .analysis-row > span { color: var(--muted); font-size: 13.5px; line-height: 22px; white-space: nowrap; }
.dream-side .analysis-row .analysis-items { justify-content: flex-end; }
html.theme-light .dream-side .analysis-row { border-top-color: var(--surface-3); }
/* Плюс у названия категории, а не в конце меток: не уходит на отдельную строку. Строки плотнее. */
.analysis-row .item-add-open { display: none; }
.row-label { display: inline-flex; align-items: center; gap: 4px; }
.row-add {
  display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.row-add:hover { color: var(--text-max); border-color: var(--border-strong); background: var(--surface-2); }
.row-add svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.analysis-row { margin-top: 6px; }
html.theme-light .row-add { color: var(--faint); }
html.theme-light .row-add:hover { color: var(--text-body); border-color: var(--surface-4); background: var(--bg); }
/* Плюс появляется только при наведении на строку и места не занимает: висит справа от названия. */
.row-label { position: relative; }
.row-add {
  position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.analysis-row:hover .row-add, .row-add:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: none) { .row-add { opacity: 1; pointer-events: auto; } }
/* Плюс чуть выше, как надстрочный знак справа от названия. */
.row-add { top: -5px; left: calc(100% + 1px); transform: none; width: 16px; height: 16px; }
.row-add svg { width: 11px; height: 11px; }
/* Шаг 3: предложения разбора — пунктирная метка с ✓ и ✕ вместо слов. */
.analysis-item.is-proposed { gap: 2px; padding-right: 3px; border-style: dashed; }
.analysis-item.is-proposed form { gap: 1px; }
.item-yes, .item-no,
.analysis-item .item-yes, .analysis-item .item-no {
  display: inline-grid; place-items: center; width: 18px; min-height: 18px; height: 18px; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.item-yes svg, .item-no svg { width: 12px; height: 12px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.item-yes svg { stroke: var(--ok); }
.item-no svg { stroke: var(--muted); }
.item-yes:hover { background: var(--ok-deep); }
.item-no:hover { background: var(--danger-deep); }
.item-no:hover svg { stroke: var(--danger-ink); }
.analysis-row.is-title-row > form .item-yes, .analysis-row.is-title-row > form .item-no { width: 26px; height: 26px; }
.analysis-row > form { display: flex; gap: 2px; justify-content: flex-end; }
html.theme-light .item-yes svg { stroke: var(--ok); }
html.theme-light .item-yes:hover { background: var(--surface-3); }
html.theme-light .item-no:hover { background: var(--surface-3); }
/* Иконки ✓ ✕ не переносятся внутри метки; строка названия — подпись, название, кнопки в один ряд. */
.dream-side .analysis-item form { flex-wrap: nowrap; justify-content: flex-start; }
.dream-side .analysis-row.is-title-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.dream-side .analysis-row.is-title-row b { text-align: right; font-size: 13px; line-height: 1.3; }
.dream-side .analysis-row.is-title-row > form { flex-wrap: nowrap; gap: 0; }
/* Метки не теснятся справа от подписи: подпись слева на первой строке, остальные метки
   переносятся на всю ширину карточки и прижаты вправо. */
.dream-side .analysis-row:not(.is-title-row) {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 4px; row-gap: 4px;
}
.dream-side .analysis-row:not(.is-title-row) > .row-label { margin-right: auto; padding-right: 8px; }
.dream-side .analysis-row:not(.is-title-row) > .analysis-items { display: contents; }
.dream-side .analysis-item { max-width: 100%; }
.analysis-item.is-proposed form, .dream-side .analysis-item.is-proposed form { gap: 0; }
/* Подсветка слов метки в тексте сна при наведении. */
mark.text-hit { color: inherit; background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
html.theme-light mark.text-hit { background: var(--warn-deep); box-shadow: 0 0 0 2px var(--warn-deep); }
/* Плашка над выделенным текстом сна. */
.select-bar {
  position: absolute; z-index: 60; transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.select-bar[hidden] { display: none; }
.select-bar > button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--text-body); background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.select-bar > button:hover { color: var(--text-max); background: var(--surface-4); }
.select-bar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.select-bar form { display: flex; align-items: center; gap: 4px; margin: 0; }
.select-bar .select-kind { padding: 0 4px 0 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.select-bar input[name="label"] { width: 200px; min-height: 30px; margin: 0; padding: 4px 8px; font-size: 13px; }
.select-bar .item-yes, .select-bar .item-no { width: 28px; height: 28px; }
.select-bar .item-yes svg, .select-bar .item-no svg { width: 14px; height: 14px; }
html.theme-light .select-bar { background: var(--surface); border-color: var(--surface-4); box-shadow: 0 8px 22px color-mix(in srgb, var(--warn-ink) 15%, transparent); }
html.theme-light .select-bar > button { color: var(--text-body); }
html.theme-light .select-bar > button:hover { background: var(--bg); }
.analysis-head .analysis-run { min-height: 28px; padding: 0 10px; font-size: 13px; }
.setting-copy .model-now { margin-bottom: 2px; color: var(--text-body); }
.setting-copy .model-now b { color: var(--text); font-weight: 700; }
html.theme-light .setting-copy .model-now { color: var(--text-soft); }
html.theme-light .setting-copy .model-now b { color: var(--text-body); }
html.theme-light .slider-ticks i { color: var(--faint); }
html.theme-light .slider-ticks i.is-on { color: var(--text); }


/* ── Заметки-стикеры ───────────────────────────────────────────────
   Мысли о сне, дополнения и «сбылось». Цвет стикера — вид заметки:
   мысль — янтарь, дополнение — небо, сбылось — мята. */
.sticker {
  --st-bg: #2a2416; --st-edge: #4a3e1f; --st-ink: #f1e6c8; --st-kind: #e8c56a; --st-tape: rgba(240, 210, 120, .22);
  position: relative;
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 20px 18px 14px;
  color: var(--st-ink);
  background: linear-gradient(170deg, color-mix(in srgb, var(--st-bg) 88%, #fff 12%), var(--st-bg) 60%);
  border: 1px solid var(--st-edge);
  border-radius: 4px 4px 14px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 24px rgba(0, 0, 0, .28);
  transform: rotate(var(--st-tilt, -.6deg));
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker::before {
  content: "";
  position: absolute; top: -9px; left: 50%;
  width: 64px; height: 18px;
  background: var(--st-tape);
  border-radius: 2px;
  transform: translateX(-50%) rotate(-2deg);
  backdrop-filter: blur(1px);
}
.sticker:nth-child(3n+2) { --st-tilt: .7deg; }
.sticker:nth-child(3n) { --st-tilt: -.2deg; }
.sticker:hover, .sticker:focus-within { transform: rotate(0) translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .34); }
.sticker-addition { --st-bg: #172333; --st-edge: #2c4462; --st-ink: #dce8f6; --st-kind: #7fb2ea; --st-tape: rgba(140, 190, 240, .2); }
.sticker-outcome_followup { --st-bg: #16271f; --st-edge: #2b4a3a; --st-ink: #d9efe2; --st-kind: #6fcf97; --st-tape: rgba(120, 210, 160, .2); }

.sticker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sticker-kind { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-kind); }
.sticker-head time { font-size: .78rem; opacity: .65; }
.sticker-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: .97rem; }
.sticker-dream {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  margin-top: 12px; padding: 4px 10px 4px 8px;
  font-size: .82rem; color: var(--st-ink); text-decoration: none;
  background: rgba(0, 0, 0, .18); border-radius: 999px;
}
.sticker-dream span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-dream svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
a.sticker-dream:hover { background: rgba(0, 0, 0, .3); color: var(--text-max); }
.sticker-dream.is-free { opacity: .6; }

.sticker-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.sticker:hover .sticker-tools, .sticker:focus-within .sticker-tools, .sticker-tools:has(details[open]) { opacity: 1; }
.sticker:has(.sticker-tools) .sticker-head { padding-right: 58px; }
@media (hover: none) { .sticker-tools { opacity: .75; } }
.sticker-tools form { margin: 0; }
.sticker-tools summary, .sticker-delete button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  list-style: none; cursor: pointer; color: var(--st-ink);
  background: rgba(0, 0, 0, .2); border: 0; border-radius: 7px;
}
.sticker-tools summary::-webkit-details-marker { display: none; }
.sticker-tools summary:hover, .sticker-delete button:hover { background: rgba(0, 0, 0, .38); }
.sticker-delete button:hover { color: var(--danger); }
.sticker-tools svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sticker-edit { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
/* Правка раскрывается на весь стикер вместо текста. */
.sticker:has(.sticker-edit[open]) { transform: none; }
.sticker:has(.sticker-edit[open]) .sticker-body,
.sticker:has(.sticker-edit[open]) .sticker-dream { display: none; }
.sticker-edit[open] .sticker-form {
  position: relative; margin-top: 4px;
}
.sticker:has(.sticker-edit[open]) .sticker-tools { position: static; display: block; opacity: 1; }
.sticker:has(.sticker-edit[open]) .sticker-delete,
.sticker:has(.sticker-edit[open]) .sticker-edit > summary { display: none; }

.sticker-form { display: grid; gap: 10px; }
.sticker-form textarea {
  width: 100%; min-height: 84px; padding: 10px 12px; resize: vertical;
  font: inherit; line-height: 1.5; color: var(--text);
  background: rgba(0, 0, 0, .22); border: 1px solid var(--border); border-radius: 10px;
}
.sticker .sticker-form textarea { color: var(--st-ink); border-color: var(--st-edge); }
.sticker-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sticker-form .btn-primary { justify-self: start; }
.sticker-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.sticker-type input { position: absolute; opacity: 0; pointer-events: none; }
.sticker-type span {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  font-size: .82rem; cursor: pointer; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
}
.sticker-type span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.sticker-type-addition span::before { background: var(--accent); }
.sticker-type-outcome_followup span::before { background: var(--ok); }
.sticker-type input:checked + span { color: var(--text); border-color: var(--border-strong); background: var(--accent-soft); }
.sticker-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Стена */
.sticker-wall { columns: 250px; column-gap: 20px; padding-top: 10px; }
.sticker-new { --st-bg: transparent; --st-edge: var(--border-strong); --st-ink: var(--text); --st-tape: transparent;
  background: none; border-style: dashed; box-shadow: none; transform: none; }
.sticker-new:hover { transform: none; box-shadow: none; }
.sticker-new > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 68px;
  list-style: none; cursor: pointer; color: var(--muted);
}
.sticker-new > summary::-webkit-details-marker { display: none; }
.sticker-new > summary:hover { color: var(--text); }
.sticker-new > summary svg, .note-add > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sticker-new[open] > summary { min-height: 0; justify-content: flex-start; margin-bottom: 12px; color: var(--text); }
.sticker-empty { color: var(--muted); }
/* «+» у заголовка «Заметки» */
.notes-title { display: flex; align-items: center; gap: 12px; }
.notes-add-btn {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: none; color: var(--muted); border: 1px solid var(--border-strong); cursor: pointer;
  transition: color .15s, background .15s, transform .2s;
}
.notes-add-btn:hover, .notes-add-btn[aria-expanded="true"] { color: var(--text); background: var(--accent-soft); }
.notes-add-btn[aria-expanded="true"] { transform: rotate(45deg); }
.notes-add-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notes-add-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.notes-new-body { margin: -8px 0 18px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.notes-new-body[hidden] { display: none; }
.sticker-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sticker-filter a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px;
}
.sticker-filter a b { font-weight: 600; font-size: .8rem; opacity: .7; }
.sticker-filter a:hover { color: var(--text); border-color: var(--border-strong); }
.sticker-filter a.is-active { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.sticker-filter-thought.is-active { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.sticker-filter-addition.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sticker-filter-outcome_followup.is-active { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }

/* На странице сна */
.dream-notes { margin: 28px 0 8px; }
.dream-notes h2 { margin: 0 0 18px; font-size: 1.05rem; }
.sticker-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; align-items: start; margin-bottom: 16px; }
.sticker-row .sticker { margin: 0; }
.note-add { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.note-add > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  list-style: none; cursor: pointer; color: var(--muted);
  border: 1px dashed var(--border-strong); border-radius: 12px;
}
.note-add > summary::-webkit-details-marker { display: none; }
.note-add > summary:hover { color: var(--text); border-color: var(--accent); }
.note-add[open] > summary { margin-bottom: 12px; color: var(--text); }
.note-add .sticker-form { max-width: 560px; }

@media (prefers-reduced-motion: reduce) {
  .sticker, .sticker:hover { transform: none; transition: none; }
}

/* Светлая тема: настоящие бумажные стикеры. */
html.theme-light .sticker { --st-bg: #fff3b8; --st-edge: #eedb86; --st-ink: #4a4020; --st-kind: #9a7412; --st-tape: rgba(255, 255, 255, .7);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 10px 22px color-mix(in srgb, var(--warn-ink) 14%, transparent); }
html.theme-light .sticker-addition { --st-bg: #ddeeff; --st-edge: #b5d3f2; --st-ink: #22384f; --st-kind: #2f6389; }
html.theme-light .sticker-outcome_followup { --st-bg: #daf3e2; --st-edge: #aedcbd; --st-ink: #1f3d2b; --st-kind: #2d7a4c; }
html.theme-light .sticker-new { --st-ink: var(--text); background: none; box-shadow: none; }
html.theme-light .sticker-dream { background: rgba(0, 0, 0, .06); }
html.theme-light a.sticker-dream:hover { background: rgba(0, 0, 0, .12); color: inherit; }
html.theme-light .sticker-tools summary, html.theme-light .sticker-delete button { background: rgba(0, 0, 0, .06); }
html.theme-light .sticker-tools summary:hover, html.theme-light .sticker-delete button:hover { background: rgba(0, 0, 0, .12); }
html.theme-light .sticker-delete button:hover { color: var(--danger-ink); }
html.theme-light .sticker-form textarea { background: color-mix(in srgb, var(--surface) 70%, transparent); }
html.theme-light .sticker-type span::before { background: var(--warn-line); }
html.theme-light .sticker-type-addition span::before { background: var(--accent-strong); }
html.theme-light .sticker-type-outcome_followup span::before { background: var(--ok); }

/* ── Редактура прямо в тексте ─────────────────────────────────────
   Удалённое зачёркнуто красным, добавленное подчёркнуто зелёным.
   Принятая правка остаётся тихой зелёной чертой, отклонённая — исходным текстом. */
.ai-proof.is-review { position: relative; padding: 0; gap: 0; background: transparent; border: 0; }
.proof-review { position: relative; }
.proof-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 10px;
  background: var(--surface); border: 1px solid var(--border-strong); border-top: 0;
}
.proof-modes button {
  height: 28px; padding: 0 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px;
}
.proof-modes button:hover { color: var(--text); border-color: var(--border-strong); }
.proof-modes { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 9px; }
.proof-modes button { height: 24px; border: 0; border-radius: 7px; }
.proof-modes button.is-on { color: var(--text); background: var(--accent-soft); }
.proof-spacer { flex: 1; }
.proof-act {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 9px;
}
.proof-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proof-cancel { color: var(--muted); }
.proof-cancel:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.proof-apply { color: var(--bg); background: var(--ok); border-color: var(--ok); }
.proof-apply:hover { background: var(--ok); border-color: var(--ok); }

.proof-text {
  min-height: 320px; padding: .6rem;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9;
  color: var(--text-max); background: var(--surface);
  border: 1px solid var(--border-strong); border-top: 0; border-radius: 0 0 8px 8px;
}
.proof-hunk { border-radius: 4px; cursor: pointer; transition: background .12s; }
.proof-hunk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.proof-hunk del {
  color: var(--danger-ink); background: color-mix(in srgb, var(--danger) 16%, transparent);
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 90%, transparent); text-decoration-thickness: 1.5px;
  border-radius: 3px;
}
.proof-hunk ins {
  color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 16%, transparent); text-decoration: none;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ok) 75%, transparent); border-radius: 3px;
}
.proof-hunk:hover del, .proof-hunk:hover ins, .proof-hunk.is-current del, .proof-hunk.is-current ins { filter: brightness(1.18); }
.proof-hunk.is-current { outline: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
/* Разобранные */
.proof-hunk[data-state="accepted"] del { display: none; }
.proof-hunk[data-state="accepted"] ins { color: inherit; background: none; box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--ok) 45%, transparent); }
.proof-hunk[data-state="rejected"] ins { display: none; }
.proof-hunk[data-state="rejected"] del { color: inherit; background: none; text-decoration: none; box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--muted) 35%, transparent); }
/* Оригинал: исходный текст как был, без пометок. */
.is-original .proof-hunk { cursor: default; outline: none; }
.is-original .proof-hunk ins { display: none; }
.is-original .proof-hunk del { display: inline; color: inherit; background: none; text-decoration: none; box-shadow: none; filter: none; }

.proof-pop {
  position: absolute; z-index: 4; display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.proof-pop button {
  width: 34px; height: 30px; font-size: 15px; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px;
}
.proof-yes { color: var(--ok); }
.proof-no { color: var(--danger); }
.proof-yes:hover { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.proof-no:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }


html.theme-light .proof-bar { background: var(--surface-2); border-color: var(--surface-4); }
html.theme-light .proof-text { color: var(--text-body); background: var(--surface); border-color: var(--surface-4); }
html.theme-light .proof-hunk del { color: var(--danger-ink); background: color-mix(in srgb, var(--danger) 10%, transparent); text-decoration-color: color-mix(in srgb, var(--danger-ink) 80%, transparent); }
html.theme-light .proof-hunk ins { color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ok) 60%, transparent); }
html.theme-light .proof-hunk[data-state="accepted"] ins { color: inherit; background: none; box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--ok) 35%, transparent); }
html.theme-light .proof-hunk[data-state="rejected"] del { color: inherit; background: none; box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--muted) 30%, transparent); }
html.theme-light .proof-apply { color: var(--surface); background: var(--ok); border-color: var(--ok); }
html.theme-light .proof-apply:hover { background: var(--ok); border-color: var(--ok); }
html.theme-light .proof-cancel:hover { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-ink) 40%, transparent); background: color-mix(in srgb, var(--danger-ink) 8%, transparent); }
html.theme-light .proof-pop { background: var(--surface); border-color: var(--surface-4); box-shadow: 0 10px 24px color-mix(in srgb, var(--warn-ink) 16%, transparent); }
html.theme-light .proof-yes { color: var(--ok); }
html.theme-light .proof-no { color: var(--danger-ink); }

/* ── История версий: шторка справа ─────────────────────────────── */
.history-tool { position: relative; cursor: pointer; font: inherit; }
.history-tool:disabled { cursor: default; }
.history-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--bg);
  background: var(--accent); border-radius: 999px; box-shadow: 0 0 0 2px var(--bg);
}
html.history-lock { overflow: hidden; }
.history-shade {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 50%, transparent); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease;
}
.history-shade.is-open { opacity: 1; }
.history-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(620px, 100vw);
  display: grid; grid-template-rows: auto auto 1fr auto;
  margin: 0; padding: 0;
  background: var(--sidebar); border: 0; border-left: 1px solid var(--border-strong); border-radius: 0;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .4);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.history-drawer.is-open { transform: none; }
.history-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px 22px; }
.history-head h2 { margin: 0; font-size: 1.05rem; }
.history-head h2 span { color: var(--muted); font-weight: 500; }
.history-close {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px;
}
.history-close:hover { color: var(--text); border-color: var(--border); }
.history-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* Лента: вертикальная линия с точками, как у таймлайна. */
.history-list, .history-series-list { list-style: none; margin: 0; padding: 0; }
.history-list {
  max-height: 36vh; overflow-y: auto; padding: 2px 12px 12px 12px;
  border-bottom: 1px solid var(--border);
}
.history-item, .history-series { position: relative; margin: 0; }
.history-list > li::before, .history-series-list > li::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 1.5px; background: var(--border);
}
.history-list > li:first-child::before { top: 20px; }
.history-list > li:last-child::before { bottom: calc(100% - 20px); }
.history-pick, .history-series-toggle {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; row-gap: 1px; align-items: baseline;
  padding: 8px 10px 8px 6px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 10px;
}
.history-pick:hover, .history-series-toggle:hover { background: color-mix(in srgb, var(--text-max) 4%, transparent); }
.history-pick.is-on { background: var(--accent-soft); }
.history-dot {
  grid-row: span 2; align-self: start; justify-self: center; position: relative; z-index: 1;
  width: 10px; height: 10px; margin-top: 5px;
  border: 2px solid var(--border-strong); border-radius: 50%; background: var(--sidebar);
}
.history-pick.is-on .history-dot { border-color: var(--accent); background: var(--accent); }
.history-list > .history-item:first-child .history-dot { border-color: var(--accent); }
.history-row-top { display: flex; justify-content: space-between; gap: 12px; }
.history-row-top b { font-size: 14px; font-weight: 650; }
.history-row-top time, .history-series-toggle time { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-row-sub { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.history-series-toggle { grid-template-columns: 22px 1fr auto; }
.history-series-toggle b { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.history-series-toggle .history-dot { grid-row: auto; border-style: dashed; }
.history-series-toggle b::after { content: " ▸"; font-size: 11px; opacity: .7; }
.history-series.is-open > .history-series-toggle b::after { content: " ▾"; }
.history-series-list { display: none; padding-left: 14px; }
.history-series.is-open > .history-series-list { display: block; }
.history-series-list > li::before { left: 17px; }

.history-body { position: relative; overflow-y: auto; padding: 14px 22px 18px; }
.history-compare { display: inline-flex; padding: 2px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 9px; }
.history-compare[hidden] { display: none; }
.history-compare button {
  height: 26px; padding: 0 11px; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--muted); background: transparent; border: 0; border-radius: 7px;
}
.history-compare button.is-on { color: var(--text); background: var(--accent-soft); }
.history-compare button:disabled { opacity: .4; cursor: default; }
.history-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.history-title { margin: 0 0 12px; font-weight: 650; }
.history-title > span { color: var(--muted); font-weight: 500; }
.history-doc { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.history-drawer .proof-hunk { cursor: text; }
.history-fold {
  display: block; width: 100%; margin: 10px 0; padding: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted);
  background: color-mix(in srgb, var(--text-max) 3%, transparent); border: 1px dashed var(--border); border-radius: 8px;
}
.history-fold:hover { color: var(--text); border-color: var(--border-strong); }
.history-wait { color: var(--muted); }

.history-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  min-height: 60px; padding: 12px 18px; border-top: 1px solid var(--border);
}
.history-note { color: var(--muted); font-size: 13px; margin-right: auto; }
.history-ask { flex: 1 1 220px; font-size: 13.5px; }
.history-confirm { display: flex; gap: 8px; margin: 0; }

@media (max-width: 640px) {
  .history-drawer { width: 100vw; border-left: 0; }
  .history-list { max-height: 30vh; }
  .history-body { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .history-drawer, .history-shade { transition: none; }
}

html.theme-light .history-shade { background: color-mix(in srgb, var(--warn-ink) 22%, transparent); }
html.theme-light .history-drawer { box-shadow: -20px 0 50px color-mix(in srgb, var(--warn-ink) 16%, transparent); }
html.theme-light .history-pick:hover, html.theme-light .history-series-toggle:hover { background: rgba(0, 0, 0, .035); }
html.theme-light .history-fold { background: rgba(0, 0, 0, .025); }
html.theme-light .history-count { color: var(--surface); }
.history-drawer[hidden], .history-shade[hidden] { display: none; }
/* Отменённые откатом версии: тише, но доступны. */
.history-item.is-undone .history-pick:not(.is-on) { opacity: .55; }
.history-item.is-undone .history-dot { border-style: dashed; }
.history-item.is-undone .history-pick:hover { opacity: 1; }

/* Фильтры «в этот день» и по луне */
.extra-chips { margin-top: -4px; }
.moon-chip i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
.moon-new i { background: transparent; }
.moon-full i { background: currentColor; }
.moon-waxing i { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
.moon-waning i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.lday-form { display: inline-flex; }
.lday-form select { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font: inherit; font-size: 14px; font-weight: 650; }
.lday-form select.is-active { color: var(--text); border-color: var(--border-strong); background: var(--accent-soft); }
html.theme-light .lday-form select { background: transparent; }
.moon-card { margin-top: 8px; }
.moon-table { display: grid; gap: 2px; overflow-x: auto; }
.moon-row { display: grid; grid-template-columns: minmax(130px,1.4fr) .6fr 1.1fr 1.3fr .9fr .9fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; min-width: 560px; }
a.moon-row:hover { background: var(--accent-soft); }
.moon-row-head { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.moon-row small { color: var(--muted); }
.moon-row .moon-chip { display: inline-flex; align-items: center; gap: 8px; }
.moon-verdict.is-notable { color: var(--accent); font-weight: 650; }
.moon-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.lit-chart { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; align-items: end; }
.lit-col { display: grid; gap: 4px; text-align: center; font-size: 12px; }
.lit-col small { color: var(--muted); font-size: 11px; }
.lit-val { font-weight: 650; }
.lit-col.is-small .lit-val { color: var(--muted); font-weight: 400; }
.lit-bar-wrap { height: 140px; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--faint) 6%, transparent); border-radius: 8px; }
.lit-bar { width: 100%; height: 0; background: var(--border-strong); border-radius: 8px; }
.lit-bar.is-up { background: var(--accent); }
.lit-bar.is-down { background: var(--faint); }
.lit-label { color: var(--muted); }
.moon-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; }
.moon-marks h3 { margin: 0 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.moon-marks h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.moon-marks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moon-marks li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.moon-marks li small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .lit-col small { display: none; } .lit-chart { gap: 3px; } }
.lit-h-0 { height: 0%; }
.lit-h-1 { height: 5%; }
.lit-h-2 { height: 10%; }
.lit-h-3 { height: 15%; }
.lit-h-4 { height: 20%; }
.lit-h-5 { height: 25%; }
.lit-h-6 { height: 30%; }
.lit-h-7 { height: 35%; }
.lit-h-8 { height: 40%; }
.lit-h-9 { height: 45%; }
.lit-h-10 { height: 50%; }
.lit-h-11 { height: 55%; }
.lit-h-12 { height: 60%; }
.lit-h-13 { height: 65%; }
.lit-h-14 { height: 70%; }
.lit-h-15 { height: 75%; }
.lit-h-16 { height: 80%; }
.lit-h-17 { height: 85%; }
.lit-h-18 { height: 90%; }
.lit-h-19 { height: 95%; }
.lit-h-20 { height: 100%; }
.moon-ai-text p { margin: 0 0 10px; line-height: 1.55; }
.moon-ai-form { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.moon-comment { margin: 0 0 14px; line-height: 1.55; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.moon-row.moon-row-light { grid-template-columns: 1.4fr .6fr .6fr 2fr; min-width: 420px; }
.moon-row.moon-row-year { grid-template-columns: .6fr 1.2fr 1.2fr 1fr; min-width: 420px; }
.light-pct { display: flex; align-items: center; gap: 10px; }
.light-bar { display: block; height: 8px; border-radius: 4px; background: var(--accent); width: 0; }
.moon-sub { margin: 18px 0 6px; font-size: 15px; }
.lit-w-0 { width: 0%; }
.lit-w-1 { width: 5%; }
.lit-w-2 { width: 10%; }
.lit-w-3 { width: 15%; }
.lit-w-4 { width: 20%; }
.lit-w-5 { width: 25%; }
.lit-w-6 { width: 30%; }
.lit-w-7 { width: 35%; }
.lit-w-8 { width: 40%; }
.lit-w-9 { width: 45%; }
.lit-w-10 { width: 50%; }
.lit-w-11 { width: 55%; }
.lit-w-12 { width: 60%; }
.lit-w-13 { width: 65%; }
.lit-w-14 { width: 70%; }
.lit-w-15 { width: 75%; }
.lit-w-16 { width: 80%; }
.lit-w-17 { width: 85%; }
.lit-w-18 { width: 90%; }
.lit-w-19 { width: 95%; }
.lit-w-20 { width: 100%; }
.moon-explain { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.moon-explain p { margin: 0 0 6px; }
.moon-when { margin-top: 10px !important; font-weight: 650; }
.moon-when.is-dark { color: var(--accent); }
.moon-row.moon-row-forecast { grid-template-columns: 1.4fr 1fr 2fr; min-width: 420px; }
.moon-row-forecast.is-now { background: color-mix(in srgb, var(--faint) 8%, transparent); font-weight: 650; }
.moon-row-forecast.is-dark .light-bar { background: var(--accent); }
.moon-row-forecast:not(.is-dark) .light-bar { background: var(--border-strong); }
.light-pct small { color: var(--muted); }
.moon-tabs { margin-bottom: 14px; }
.lore-mine { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--faint) 7%, transparent); line-height: 1.7; }
.lore-mine small { color: var(--muted); }
.lore-mine .moon-verdict { margin-left: 6px; font-size: 13px; color: var(--muted); }
.lore-mine .moon-verdict.is-notable { color: var(--accent); }
.lore-list { margin: 0; display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 10px 16px; }
.lore-list dt { font-weight: 650; }
.lore-list dd { margin: 0; line-height: 1.55; color: var(--text); }
@media (max-width: 640px) { .lore-list { grid-template-columns: 1fr; gap: 2px; } .lore-list dd { margin-bottom: 10px; } }
.cycle { margin: 4px 0 10px; }
.cycle-strip { position: relative; display: grid; grid-template-columns: 1fr 2fr 1fr; height: 30px; border-radius: 15px; overflow: visible; }
.cycle-seg { display: grid; place-items: center; font-size: 12px; font-weight: 650; }
.cycle-seg.seg-dark { background: var(--surface-2); color: var(--muted); }
.cycle-seg.seg-bright { background: var(--warn-ink); color: var(--warn-line); }
.cycle-strip .cycle-seg:first-child { border-radius: 15px 0 0 15px; }
.cycle-strip .cycle-seg:nth-child(3) { border-radius: 0 15px 15px 0; }
.cycle-now { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 0 2px var(--bg, var(--surface-sunk)); }
.cycle-marks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
.cycle-marks span { flex: 1; text-align: center; }
.cycle-marks span:first-child { text-align: left; } .cycle-marks span:last-child { text-align: right; }
.cycle-dir { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: center; }
.cycle-how { margin: 10px 0 0; padding-left: 18px; line-height: 1.55; font-size: 14px; }
.cycle-how li { margin-bottom: 6px; }
.cycle-pos-0 { left: 0%; }
.cycle-pos-1 { left: 5%; }
.cycle-pos-2 { left: 10%; }
.cycle-pos-3 { left: 15%; }
.cycle-pos-4 { left: 20%; }
.cycle-pos-5 { left: 25%; }
.cycle-pos-6 { left: 30%; }
.cycle-pos-7 { left: 35%; }
.cycle-pos-8 { left: 40%; }
.cycle-pos-9 { left: 45%; }
.cycle-pos-10 { left: 50%; }
.cycle-pos-11 { left: 55%; }
.cycle-pos-12 { left: 60%; }
.cycle-pos-13 { left: 65%; }
.cycle-pos-14 { left: 70%; }
.cycle-pos-15 { left: 75%; }
.cycle-pos-16 { left: 80%; }
.cycle-pos-17 { left: 85%; }
.cycle-pos-18 { left: 90%; }
.cycle-pos-19 { left: 95%; }
.cycle-pos-20 { left: 100%; }
.moon-tip { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.moon-tip-q { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--muted); font-size: 11px; font-weight: 650; }
.moon-tip-box { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-body); border: 1px solid var(--border-strong); font-size: 13px; font-weight: 400; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.moon-tip:hover .moon-tip-box, a:focus-visible .moon-tip-box { display: block; }
.moon-table { overflow: visible; }

/* --- На грани сна: три плитки вместо чипов --- */
.threshold-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; }
.threshold-tile { position: relative; margin: 0; cursor: pointer; }
.threshold-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.threshold-tile-face {
  display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%;
  padding: 12px 8px 10px; text-align: center;
  color: var(--muted); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 10px;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.threshold-tile-face svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.threshold-tile-face b { font-size: 13px; font-weight: 600; }
.threshold-tile-face small { color: var(--faint); font-size: 11px; line-height: 1.3; }
.threshold-tile:hover .threshold-tile-face { color: var(--text-body); border-color: var(--border-strong); }
.threshold-tile input:checked + .threshold-tile-face {
  color: var(--text); background: var(--accent-deep); border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong) inset;
}
.threshold-tile input:checked + .threshold-tile-face svg { color: var(--accent); opacity: 1; }
.threshold-tile input:checked + .threshold-tile-face small { color: var(--accent); }
.threshold-tile input:focus-visible + .threshold-tile-face { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Поле для подробностей — только когда есть что описывать. */
.threshold-note { display: none; margin-top: 10px; }
.entry-details-body:has(.threshold-tiles input:checked) .threshold-note,
.threshold-note:has(textarea:not(:placeholder-shown)) { display: block; }
@media (max-width: 560px) {
  .threshold-tile-face small { display: none; }
  .threshold-tile-face { padding: 10px 4px 9px; }
}
html.theme-light .threshold-tile-face { color: var(--text-soft); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .threshold-tile-face small { color: var(--muted); }
html.theme-light .threshold-tile:hover .threshold-tile-face { color: var(--text); background: var(--surface-4); border-color: var(--warn-line); }
html.theme-light .threshold-tile input:checked + .threshold-tile-face { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
html.theme-light .threshold-tile input:checked + .threshold-tile-face small { color: var(--accent); }

/* --- Метод ОС: строка переворачивается в сетку плиток --- */
.flip-pick { flex-wrap: wrap; perspective: 700px; }
.flip-pick.is-open .field-label { width: 100%; }
/* Подпись держит высоту кнопки, чтобы при повороте не прыгала вверх. */
.flip-pick .field-label { display: flex; align-items: center; min-height: 32px; }
.method-face {
  display: inline-flex; align-items: center; gap: 8px; max-width: 60%; min-width: 0;
  padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 7px;
  animation: method-flip .22s ease;
}
.method-face > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.method-face svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; }
.method-face.is-empty { color: var(--muted); }
.method-face:hover { border-color: var(--border-strong); }
.method-face:focus-visible { border-color: var(--accent); outline: none; }
.method-board { width: 100%; transform-origin: top center; animation: method-flip .22s ease; }
@keyframes method-flip { from { opacity: 0; transform: rotateX(-80deg); } to { opacity: 1; transform: none; } }
.method-tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.method-tile { position: relative; margin: 0; cursor: pointer; }
.method-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.method-tile span {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 34px;
  padding: 5px 4px; text-align: center; font-size: 12px; line-height: 1.2;
  color: var(--muted); background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 8px;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.method-tile:hover span { color: var(--text-body); border-color: var(--border-strong); }
.method-tile input:checked + span { color: var(--text); background: var(--accent-deep); border-color: var(--accent-strong); }
.method-tile input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.method-tile-solo input:checked + span { background: var(--ok-deep); border-color: var(--ok); color: var(--text); }
.method-done {
  display: block; margin: 8px 0 0 auto; padding: 6px 16px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--accent-deep); border: 1px solid var(--accent-strong); border-radius: 7px;
}
.method-done:hover { background: var(--accent-deep); }
@media (max-width: 420px) { .method-tiles { grid-template-columns: repeat(3, 1fr); } }
html.theme-light .method-face { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
html.theme-light .method-face.is-empty { color: var(--muted); }
html.theme-light .method-tile span { color: var(--text-soft); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .method-tile:hover span { color: var(--text); background: var(--surface-4); border-color: var(--warn-line); }
html.theme-light .method-tile input:checked + span { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .method-tile-solo input:checked + span { color: var(--ok-ink); background: var(--surface-sunk); border-color: var(--ok); }
html.theme-light .method-done { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }

/* Переключатель да/нет в строке формы */
.switch:not(:has(.switch-track)) { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span:not(.switch-track) { position: absolute; inset: 0; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 999px; transition: background-color .15s ease, border-color .15s ease; pointer-events: none; }
.switch span:not(.switch-track)::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--muted); border-radius: 50%; transition: transform .15s ease, background-color .15s ease; }
.switch input:checked + span:not(.switch-track) { background: var(--accent-deep); border-color: var(--accent-strong); }
.switch input:checked + span:not(.switch-track)::after { transform: translateX(16px); background: var(--text); }
.switch input:focus-visible + span:not(.switch-track) { outline: 2px solid var(--accent); outline-offset: 2px; }
html.theme-light .switch span:not(.switch-track) { background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .switch span:not(.switch-track)::after { background: var(--faint); }
html.theme-light .switch input:checked + span:not(.switch-track) { background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .switch input:checked + span:not(.switch-track)::after { background: var(--accent); }


/* Кнопки «Метод» и «Телесные ощущения» одного размера со степперами соседних строк. */
.entry-side .method-face {
  flex: 0 0 auto; box-sizing: border-box; width: 118px; max-width: none; height: 32px;
  justify-content: space-between; padding: 0 10px; border-color: var(--surface-4); border-radius: 8px;
}

/* Заметка в форме нового сна: под редактором, как на странице сна. */
.entry-notes { margin: 14px 0 0; }
.entry-notes .tip.tip-text { text-decoration: none; }


/* Шкалы осознанности внутри «Характеристик»: вложенный список без лишнего отступа. */
.metric-rows > .lucid-scales { margin: 0; }
.slider-teal { --fill: linear-gradient(90deg, #2a8a8a, #5fd3c8); }
.slider-green { --fill: linear-gradient(90deg, #3f8a4a, #7fd08a); }

/* Шкалы на странице сна: название, цифра, тонкая полоска цвета как в форме. */
.scale-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin: 0; padding: 7px 0 8px; border-top: 1px solid var(--surface-3); font-size: 13.5px; }
.side-card h2 + .scale-line { border-top: 0; padding-top: 2px; }
.scale-line > span:first-child { color: var(--muted); }
.scale-line b { color: var(--text); font-weight: 680; font-variant-numeric: tabular-nums; }
.scale-bar { grid-column: 1 / -1; display: block; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
/* Градиент лежит на всей дорожке, а непройденную часть справа закрывает <i>. */
.scale-bar { background-image: var(--fill); }
.scale-bar i { display: block; float: right; height: 100%; background: var(--border); }
.scale-bar .rest-0 { width: 0%; } .scale-bar .rest-5 { width: 5%; } .scale-bar .rest-10 { width: 10%; } .scale-bar .rest-15 { width: 15%; } .scale-bar .rest-20 { width: 20%; } .scale-bar .rest-25 { width: 25%; } .scale-bar .rest-30 { width: 30%; } .scale-bar .rest-35 { width: 35%; } .scale-bar .rest-40 { width: 40%; } .scale-bar .rest-45 { width: 45%; } .scale-bar .rest-50 { width: 50%; } .scale-bar .rest-55 { width: 55%; } .scale-bar .rest-60 { width: 60%; } .scale-bar .rest-65 { width: 65%; } .scale-bar .rest-70 { width: 70%; } .scale-bar .rest-75 { width: 75%; } .scale-bar .rest-80 { width: 80%; } .scale-bar .rest-85 { width: 85%; } .scale-bar .rest-90 { width: 90%; } .scale-bar .rest-95 { width: 95%; } .scale-bar .rest-100 { width: 100%; }
html.theme-light .scale-line { border-top-color: var(--surface-4); }
html.theme-light .scale-line > span:first-child { color: var(--muted); }
html.theme-light .scale-line b { color: var(--text); }
html.theme-light .scale-bar i { background: var(--surface-4); }

/* Кнопки в шапке формы — одной высоты, со значком и без. */
.entry-actions .btn-primary, .entry-actions .btn-secondary { box-sizing: border-box; height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 1; }

/* Заголовки карточек справа тише названия сна: это подписи разделов. */
.dream-side .analysis-head h2 { color: var(--text-body); }
html.theme-light .side-card h2 { color: var(--muted); }

/* В боковой карточке у названия есть отступ справа — плюс считаем от конца слова, а не от отступа. */
.dream-side .analysis-row:not(.is-title-row) > .row-label .row-add { left: calc(100% - 7px); }

/* --- Список снов: шапка в стиле Apple — один переключатель, остальное в «Фильтрах» --- */
.list-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.list-head h1 { margin: 0; }
.list-head .dream-span { margin: 0; }
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.list-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.list-tools .list-layout { margin: 0; }

.segmented-kind { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.segmented-kind a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  color: var(--muted); border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.segmented-kind a b { color: var(--faint); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.segmented-kind a:hover { color: var(--text); }
.segmented-kind a.is-active { color: var(--text); background: var(--surface-4); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.segmented-kind a.is-active b { color: var(--accent); }
.segmented-kind a.is-empty { opacity: .45; }

.tool-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; box-sizing: border-box;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tool-btn:hover { color: var(--text); border-color: var(--border-strong); }
.tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn.is-on { color: var(--text); border-color: var(--accent-line); background: var(--surface-2); }
.tool-btn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; color: var(--surface-sunk); background: var(--accent); border-radius: 99px; font-size: 11px; }

.filter-pop { position: relative; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.filter-pop > summary { list-style: none; }
.filter-pop > summary::-webkit-details-marker { display: none; }
.filter-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 400px; max-width: calc(100vw - 32px);
  padding: 12px 14px 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.filter-title { margin: 12px 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.filter-title:first-child { margin-top: 2px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--surface-4); border-radius: 99px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.filter-chips a:hover { color: var(--text); border-color: var(--border-strong); }
.filter-chips a.is-active { color: var(--text); background: var(--surface-3); border-color: var(--accent-strong); }
.filter-chips a b { color: var(--faint); font-weight: 600; }
.filter-line { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.filter-line select, .filter-line input { flex: 1 1 0; min-width: 0; height: 32px; }
.filter-dash { color: var(--faint); }

.filter-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 14px; }
.filter-tokens a {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px;
  color: var(--text-body); background: var(--surface-2); border: 1px solid var(--accent-deep); border-radius: 99px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.filter-tokens a span { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--accent); border-radius: 99px; font-size: 13px; line-height: 1; }
.filter-tokens a:hover span { color: var(--text-max); background: var(--accent-deep); }
.filter-tokens .filter-reset { padding: 4px 8px; color: var(--muted); background: none; border-color: transparent; }
.filter-tokens .filter-reset:hover { color: var(--text); }

/* Карточки: «Обычный» не подписываем — таких большинство; правка и удаление — при наведении. */
.dream-card .dream-badge.ordinary { display: none; }
@media (hover: hover) {
  .dream-card .dream-actions { opacity: 0; transition: opacity .15s ease; }
  .dream-card:hover .dream-actions, .dream-card:focus-within .dream-actions { opacity: 1; }
}
@media (max-width: 760px) {
  .list-tools { margin-left: 0; width: 100%; }
  .segmented-kind { width: 100%; }
  .segmented-kind a { flex: 1 1 0; justify-content: center; padding: 6px 6px; }
}

html.theme-light .segmented-kind, html.theme-light .tool-btn, html.theme-light .filter-chips a { background: var(--surface-sunk); border-color: var(--border-strong); color: var(--text-soft); }
html.theme-light .segmented-kind a { color: var(--muted); }
html.theme-light .segmented-kind a.is-active { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--warn-ink) 18%, transparent); }
html.theme-light .tool-btn.is-on, html.theme-light .filter-chips a.is-active { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .filter-panel { background: var(--surface-2); border-color: var(--border-strong); box-shadow: 0 18px 40px color-mix(in srgb, var(--warn-ink) 20%, transparent); }
html.theme-light .filter-tokens a { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-line); }

/* --- Вид текста сна («Aa»): шрифт и размер, выбор помнит браузер --- */
.reader-group { position: relative; }
.reader-tool { justify-content: center; min-width: 38px; font-family: Literata, Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; }
.reader-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px;
  padding: 12px 14px 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.reader-label { margin: 10px 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.reader-label:first-child { margin-top: 0; }
.reader-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reader-fonts button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--surface-4); border-radius: 10px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.reader-fonts button:hover { color: var(--text); border-color: var(--border-strong); }
.reader-fonts button[aria-checked="true"] { color: var(--text); background: var(--surface-3); border-color: var(--accent-strong); }
.reader-sample { font-size: 22px; line-height: 1.2; color: var(--text); }
.reader-sample.font-literata { font-family: Literata, serif; }
.reader-sample.font-ptserif { font-family: "PT Serif", serif; }
.reader-sample.font-lora { font-family: Lora, serif; }
.reader-sample.font-sans { font-family: var(--font-ui); }
.reader-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reader-size button {
  display: grid; place-items: center; width: 38px; height: 34px;
  color: var(--text-body); background: var(--surface); border: 1px solid var(--surface-4); border-radius: 9px; cursor: pointer;
}
.reader-size button:hover:not(:disabled) { border-color: var(--border-strong); }
.reader-size button:disabled { opacity: .35; cursor: default; }
.reader-size .is-small { font-size: 12px; font-weight: 700; }
.reader-size .is-big { font-size: 19px; font-weight: 700; }
.reader-dots { display: flex; gap: 7px; }
.reader-dots i { width: 7px; height: 7px; background: var(--border-strong); border-radius: 99px; transition: background-color .15s ease; }
.reader-dots i.is-on { background: var(--accent); }

html.font-read-sans .dream-page .dream-text { line-height: 1.62; /* как превью в карточке списка */ }
/* Середина — 17px, как у Apple; по 1px в каждую сторону, крайняя крупная — 20px. */
html[data-reader-size="1"] .dream-page .dream-text { font-size: 15px; }
html[data-reader-size="2"] .dream-page .dream-text { font-size: 16px; }
html[data-reader-size="3"] .dream-page .dream-text { font-size: 17px; }
html[data-reader-size="4"] .dream-page .dream-text { font-size: 18px; }
html[data-reader-size="5"] .dream-page .dream-text { font-size: 20px; }

html.theme-light .reader-pop { background: var(--surface-2); border-color: var(--border-strong); box-shadow: 0 18px 40px color-mix(in srgb, var(--warn-ink) 20%, transparent); }
html.theme-light .reader-fonts button, html.theme-light .reader-size button { color: var(--text-soft); background: var(--surface-sunk); border-color: var(--border-strong); }
html.theme-light .reader-fonts button[aria-checked="true"] { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }
html.theme-light .reader-sample { color: var(--text); }
html.theme-light .reader-dots i { background: var(--border-strong); }

/* Отправка в Телеграм — в фирменном голубом, чтобы не путать с соседними кнопками. */
.dream-tool-telegram { color: var(--accent); border-color: var(--accent-line); }
.dream-tool-telegram svg { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.dream-tool-telegram:hover { color: var(--accent); background: var(--accent-deep); border-color: var(--accent); }
html.theme-light .dream-tool-telegram { color: var(--accent-strong); border-color: var(--accent-line); }
html.theme-light .dream-tool-telegram:hover { color: var(--accent); background: var(--bg); border-color: var(--accent-strong); }

/* --- Режим чтения на странице сна. Левое меню не трогаем: кнопка справа
   прячет только сведения о сне, текст встаёт по центру (как боковая панель у Apple). --- */
.side-toggle { cursor: pointer; }
.side-toggle .side-toggle-fill { fill: currentColor; stroke: none; opacity: .35; transition: opacity .2s ease; }
.side-toggle[aria-pressed="true"] { color: var(--text); background: var(--surface-3); border-color: var(--accent-line); }
.side-toggle[aria-pressed="true"] .side-toggle-fill { opacity: .9; }
html.is-reading .dream-side,
html.is-reading .night-strip,
html.is-reading .dream-read-main > :not(.dream-sheet):not(.related):not(.dream-read-tools),
html.is-reading .dream-page > .technical,
html.is-reading .dream-read-tools > .dream-tool-group:not(:first-child):not(.reader-group):not(.reader-actions) { display: none; }
html.is-reading .reader-actions { display: flex; }
html.is-reading .dream-page.has-side { display: block; width: min(680px, 100%); }
/* Лист для чтения, как страница в Apple Books: мягкий градиент, широкие поля,
   тонкая светлая кромка сверху и глубокая размытая тень. */
html.is-reading .dream-sheet {
  position: relative; top: 6px; max-width: none; margin-bottom: 6px; padding: 40px 48px 44px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 60%, var(--surface-2) 100%);
  border: 1px solid color-mix(in srgb, var(--text-max) 6%, transparent); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
}
html.is-reading .dream-read-head { padding-inline: 4px; }
html.is-reading .dream-page.has-side { width: min(760px, 100%); }
html.theme-light.is-reading .dream-sheet {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: color-mix(in srgb, var(--warn-ink) 8%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px -18px color-mix(in srgb, var(--warn-ink) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--warn-ink) 8%, transparent);
}
@media (max-width: 760px) { html.is-reading .dream-sheet { padding: 24px 20px 28px; border-radius: 18px; } }
/* Сведения выезжают справа мягко, как инспектор в приложениях Apple. */
@keyframes side-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html.side-anim:not(.is-reading) .dream-side { animation: side-in .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes page-in { from { opacity: .4; } to { opacity: 1; } }
html.side-anim .dream-sheet { animation: page-in .28s ease; }
@media (prefers-reduced-motion: reduce) {
  html.side-anim .dream-side, html.side-anim .dream-sheet { animation: none; }
}
html.theme-light .side-toggle[aria-pressed="true"] { color: var(--accent-ink); background: var(--surface-3); border-color: var(--accent-strong); }

/* Левое меню в режиме настроек. */
.settings-nav .nav-heading {
  margin: 16px 12px 4px; color: var(--faint); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.settings-nav .settings-back { color: var(--text-soft); margin-bottom: 4px; }
.settings-nav .settings-back kbd {
  margin-left: auto; padding: 1px 6px; color: var(--faint); font: 600 10px/1.5 inherit;
  border: 1px solid var(--border); border-radius: 5px;
}
html.sidebar-collapsed .settings-nav .nav-heading, html.sidebar-collapsed .settings-nav kbd { display: none; }

/* Шрифты: стандарт — Inter и Literata; остальное включает prefs.js классом на <html>. */
:root {
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-read: Literata, "PT Serif", Georgia, serif;
}
html.font-ui-golos { --font-ui: "Golos Text", Inter, system-ui, sans-serif; }
html.font-ui-plex { --font-ui: "IBM Plex Sans", Inter, system-ui, sans-serif; }
html.font-ui-manrope { --font-ui: Manrope, Inter, system-ui, sans-serif; }
html.font-read-ptserif { --font-read: "PT Serif", Georgia, serif; }
html.font-read-lora { --font-read: Lora, Georgia, serif; }
html.font-read-sans { --font-read: var(--font-ui); }

/* «Настройки» внизу меню, над профилем, отделены тонкой линией. */
.side-settings { position: relative; margin-top: 4px; }
.side-settings::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -7px;
  border-top: 1px solid var(--border);
}
a.profile-chip { color: inherit; text-decoration: none; }
.nav-item svg[viewBox="0 0 24 24"] { stroke-width: 2.1; } /* та же толщина линий, что у иконок 20×20 */


/* Telegram login: waiting dialog over the login page */
.tg-wait {
  position: relative; width: min(420px, calc(100vw - 32px)); padding: 40px 36px 28px;
  border: 1px solid var(--border-strong); border-radius: 22px;
  background: var(--surface); color: var(--text); text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, #2aabee 8%, transparent);
}
.tg-wait[open] { animation: tg-wait-in .22s cubic-bezier(.2, .9, .3, 1.2); }
.tg-wait::backdrop { background: rgba(6, 8, 14, .6); backdrop-filter: blur(6px); }
@keyframes tg-wait-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.tg-wait-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.tg-wait-close:hover { background: var(--surface-4); color: var(--text); }
.tg-wait-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tg-wait-badge {
  position: relative; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #37bbfe, #1e96d4); box-shadow: 0 10px 28px rgba(42, 171, 238, .35);
}
.tg-wait-badge svg { position: relative; width: 36px; height: 36px; margin-left: -3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-wait-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2aabee; opacity: 0;
  animation: tg-ring 2.4s ease-out infinite;
}
.tg-wait-ring + .tg-wait-ring { animation-delay: 1.2s; }
@keyframes tg-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.tg-wait.done .tg-wait-ring { animation: none; }
.tg-wait.done .tg-wait-badge { background: var(--surface-4); color: var(--muted); box-shadow: none; }
.tg-wait-title { margin: 0 0 8px; font-size: 21px; font-weight: 720; letter-spacing: -.01em; }
.tg-wait-lead { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tg-wait-steps {
  margin: 0 0 20px; padding: 6px 0; list-style: none; counter-reset: tg-step; text-align: left;
  background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 14px;
}
.tg-wait-steps li {
  counter-increment: tg-step; display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; font-size: 14px; color: var(--text-body);
}
.tg-wait-steps li + li { border-top: 1px solid var(--border); }
.tg-wait-steps li::before {
  content: counter(tg-step); flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #2aabee; background: color-mix(in srgb, #2aabee 14%, transparent);
}
.tg-wait-steps b { color: var(--text); }
.tg-wait-status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.tg-wait-dot { width: 8px; height: 8px; border-radius: 50%; background: #2aabee; animation: tg-dot 1.2s ease-in-out infinite; }
@keyframes tg-dot { 50% { opacity: .25; transform: scale(.7); } }
.tg-wait.done .tg-wait-dot { animation: none; background: var(--danger); }
.tg-wait-open { text-decoration: none; min-height: 48px; font-size: 15px; }
.tg-wait-open[hidden] { display: none; }
.tg-wait-foot { margin: 16px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
@media (max-width: 480px) { .tg-wait { padding: 34px 22px 22px; } .tg-wait-title { font-size: 19px; } }

.soon-badge {
  flex: none; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 650; color: var(--muted);
  background: var(--surface-sunk); border: 1px solid var(--border-strong);
}

.person-row form { margin: 0 0 0 auto; }
.person-action {
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.person-action:hover { color: var(--text); border-color: var(--accent-strong); }
.person-action.danger:hover { color: var(--danger-ink); border-color: var(--danger); }
.person-row.is-deleted .person-mark, .person-row.is-deleted b { opacity: .5; }
.person-row.is-deleted small { color: var(--danger-ink); }

/* Удалённый дневник: одно окно с восстановлением */
.gone-card { text-align: center; padding: 40px 30px 24px; }
.gone-icon {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  background: var(--surface-sunk); border: 1px solid var(--border-strong);
}
.gone-icon svg { width: 34px; height: 34px; fill: currentColor; opacity: .7; }
.gone-lead { margin: 10px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; text-wrap: balance; }
.gone-timer {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 16px; text-align: left;
  background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 14px;
}
.gone-timer b { flex: none; min-width: 44px; color: var(--danger-ink); font-size: 30px; font-weight: 760; line-height: 1; text-align: center; }
.gone-timer span { display: grid; gap: 3px; color: var(--text-body); font-size: 14px; font-weight: 600; }
.gone-timer small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.gone-restore { height: 48px; margin-top: 0; }
.gone-logout { margin: 14px 0 0; }
.gone-logout button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.gone-logout button:hover { color: var(--text); text-decoration: underline; }
.people-panel .people-gone {
  margin: 0; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.people-panel .people-gone > summary { padding: 14px 0; }
.people-panel .people-gone > summary em { color: var(--muted); visibility: visible; }
.people-gone > .hint { margin: 0; padding: 0 0 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.people-gone > .people-list { padding: 0 0 6px; }
.people-panel .people-gone .person-row:last-child { border-bottom: 0; }
.people-gone .person-row form { flex: none; }

/* Аналитика: выбор месяца нажатием на столбик */
/* Отступ сверху и снизу у всех столбиков одинаковый — подсветка не прилипает к числу. */
.month-chart .month-column { padding: 10px 0 4px; }
a.month-column { color: inherit; text-decoration: none; border-radius: 10px; cursor: pointer; transition: background .15s, opacity .15s; }
a.month-column:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
a.month-column:hover .month-bar { filter: brightness(1.15); }
a.month-column.is-dim { opacity: .45; }
a.month-column.is-dim:hover { opacity: .8; }
a.month-column.is-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
a.month-column.is-selected .month-label, a.month-column.is-selected .month-value { color: var(--text); }
.month-hint { margin: 14px 0 0; color: var(--faint); font-size: 12px; text-align: center; }
.month-focus {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 12px 10px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: var(--muted);
}
.month-focus b { color: var(--text); }
.month-focus-open { margin-left: auto; color: var(--accent); font-weight: 650; text-decoration: none; white-space: nowrap; }
.month-focus-open:hover { text-decoration: underline; }
.month-focus-clear {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  color: var(--muted); text-decoration: none; font-size: 18px; line-height: 1;
}
.month-focus-clear:hover { color: var(--text); background: var(--surface-4); }
.stat-card.is-focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Аналитика: облако мотивов и «Зачастило» */
.motif-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.motif-cloud a {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 999px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--surface-4);
  text-decoration: none; line-height: 1.2; transition: border-color .12s, color .12s, transform .12s;
}
.motif-cloud a:hover { color: var(--text); border-color: var(--accent-strong); transform: translateY(-1px); }
.motif-cloud small { color: var(--faint); font-size: 11px; font-weight: 650; }
.motif-size-1 { font-size: 12.5px; }
.motif-size-2 { font-size: 14px; }
.motif-size-3 { font-size: 16px; font-weight: 600; }
.motif-size-4 { font-size: 18.5px; font-weight: 650; color: var(--text) !important; border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-4)) !important; }
.motif-rising { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.motif-rising h3, .rhythm-label { margin: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.motif-rising a {
  display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--surface-4); border-left: 3px solid var(--violet);
}
.motif-rising a:hover { border-color: var(--accent-strong); border-left-color: var(--violet); }
.motif-rising b { color: var(--text); font-size: 14px; }
.motif-rising span { color: var(--muted); font-size: 12px; }

/* Аналитика: ритм — серии, дни недели, сезоны */
.rhythm-streaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.rhythm-streaks > div {
  display: grid; gap: 4px; padding: 12px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 12px;
}
.rhythm-streaks b { color: var(--text); font-size: 26px; line-height: 1; font-weight: 760; }
.rhythm-streaks > div:nth-child(3) b { color: var(--violet); }
.rhythm-streaks span { display: grid; gap: 2px; color: var(--text-soft); font-size: 12px; font-weight: 600; }
.rhythm-streaks small { color: var(--faint); font-size: 11px; font-weight: 500; }
.rhythm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 130px; margin: 8px 0 20px; }
.rhythm-day { display: grid; grid-template-rows: 16px minmax(0, 1fr) 18px; gap: 4px; min-width: 0; text-align: center; }
.rhythm-val { color: var(--faint); font-size: 11px; font-weight: 700; }
.rhythm-track { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--surface-4); }
.rhythm-track i { display: block; width: min(24px, 70%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--violet) 45%, transparent); }
.rhythm-day.is-top .rhythm-track i { background: var(--violet); }
.rhythm-day.is-top .rhythm-val, .rhythm-day.is-top .rhythm-day-name { color: var(--text); }
.rhythm-day-name { color: var(--muted); font-size: 12px; font-weight: 650; }
.rh-level-0 { height: 3px; }.rh-level-1 { height: 9px; }.rh-level-2 { height: 17px; }.rh-level-3 { height: 26px; }.rh-level-4 { height: 34px; }
.rh-level-5 { height: 43px; }.rh-level-6 { height: 51px; }.rh-level-7 { height: 60px; }.rh-level-8 { height: 68px; }.rh-level-9 { height: 77px; }.rh-level-10 { height: 85px; }
.rhythm-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rhythm-seasons > div {
  display: grid; gap: 3px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 12px;
}
.rhythm-seasons span { color: var(--muted); font-size: 12px; font-weight: 600; }
.rhythm-seasons b { color: var(--text-soft); font-size: 18px; font-weight: 720; }
.rhythm-seasons .is-top { border-color: color-mix(in srgb, var(--violet) 55%, var(--surface-4)); }
.rhythm-seasons .is-top b { color: var(--violet); }
@media (max-width: 640px) {
  .month-focus { flex-wrap: wrap; }
  .rhythm-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Переворачивающаяся карточка: «?» в углу показывает описание на обороте (без JS, через чекбокс). */
.flip-card { position: relative; min-width: 0; perspective: 1400px; }
.flip-toggle { position: absolute; opacity: 0; pointer-events: none; }
.flip-inner { display: grid; height: 100%; transition: transform .55s cubic-bezier(.3, .8, .3, 1); transform-style: preserve-3d; }
.flip-front, .flip-back { grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 10px; }
.flip-toggle:checked + .flip-inner { transform: rotateY(180deg); }
.flip-help {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--muted); background: var(--surface); border: 1px solid var(--surface-4);
  font-size: 13px; font-weight: 750; cursor: pointer; user-select: none;
  transition: color .12s, border-color .12s, background .12s;
}
.flip-help:hover { color: var(--text); border-color: var(--accent-strong); }
.flip-close { font-size: 17px; font-weight: 500; }
.flip-toggle:focus-visible + .flip-inner .flip-front .flip-help { outline: 2px solid var(--accent); outline-offset: 2px; }
.flip-back h2 { margin: 0 0 4px; font-size: 17px; }
.flip-back p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.flip-back p b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
/* Кружок в углу живёт в своём слое, и backface-visibility родителя его не прячет:
   прячем кружок нужной стороны сами — на середине поворота, когда карточка ребром. */
.flip-help { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: color .12s, border-color .12s, background .12s, visibility 0s .27s; }
.flip-toggle:checked + .flip-inner .flip-front .flip-help,
.flip-toggle:not(:checked) + .flip-inner .flip-back .flip-help { visibility: hidden; }

/* ── Влияние луны: общие детали обоих вариантов ── */
.moonx-card { margin-bottom: 12px; }
.moonx-card h2 { margin: 4px 0 16px; font-size: 17px; }
.flip-card > .flip-inner > .moonx-card { margin-bottom: 0; }
.flip-card { margin-bottom: 12px; }
.moonx-foot { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.moonx-empty { margin: 0; color: var(--muted); font-size: 13px; }
.moonx-headline { margin: 6px 0 10px !important; font-size: 24px !important; font-weight: 740; letter-spacing: -.02em; }

/* Значок фазы: кружок с тенью, как луна на небе. */
.moonx-icon { display: inline-grid; place-items: center; flex: none; }
.moonx-icon i {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #f3e6b5 70%, var(--border-strong)); box-sizing: border-box;
}
.moonx-icon.is-small i { width: 14px; height: 14px; border-width: 1px; }
.moonx-icon.is-big i { width: 42px; height: 42px; border-width: 2px; }
.moonx-icon.moon-new i { background: color-mix(in srgb, var(--surface-sunk) 80%, #000); }
.moonx-icon.moon-full i { background: radial-gradient(circle at 35% 35%, #fff6d8, #e9d79a 70%); box-shadow: 0 0 18px rgba(243, 230, 181, .35); border-color: #f3e6b5; }
.moonx-icon.moon-waxing i { background: linear-gradient(90deg, transparent 50%, #efe0a8 50%); }
.moonx-icon.moon-waning i { background: linear-gradient(90deg, #efe0a8 50%, transparent 50%); }

/* Фазы — четыре карточки. */
.moonx-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.moonx-phase {
  display: grid; gap: 6px; justify-items: start; padding: 14px; min-width: 0;
  color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 14px;
  transition: border-color .12s, transform .12s;
}
.moonx-phase:hover { border-color: var(--accent-strong); transform: translateY(-2px); }
.moonx-phase.is-notable { border-color: color-mix(in srgb, var(--violet) 55%, var(--surface-4)); }
.moonx-phase-name { color: var(--text-soft); font-size: 13px; font-weight: 650; }
.moonx-phase-pct { color: var(--text); font-size: 28px; font-weight: 760; line-height: 1; }
.moonx-phase-pct small { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.moonx-phase-meta { color: var(--muted); font-size: 12px; }
.moonx-phase-meta small { color: var(--faint); }
.moonx-verdict { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; color: var(--muted); background: var(--surface-sunk); }
.moonx-verdict.is-notable { color: var(--text); background: color-mix(in srgb, var(--violet) 25%, transparent); }

/* График освещённости без подписей под столбиками — они ушли в подсказку. */
.moonx-lit .lit-bar-wrap { height: 120px; }
.moonx-lit .lit-val { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.moonx-lit .lit-label { color: var(--faint); font-size: 10.5px; }

/* По годам — пары столбиков. */
.moonx-years { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 6px; }
.moonx-year { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) 16px; gap: 4px; height: 100%; min-width: 0; text-align: center; }
.moonx-year.is-small { opacity: .4; }
.moonx-year-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--surface-4); }
.moonx-year-bars i { display: block; width: min(14px, 40%); min-height: 2px; border-radius: 4px 4px 1px 1px; }
.moonx-year span { color: var(--muted); font-size: 11px; font-weight: 650; }
i.is-dark { background: var(--violet); }
i.is-bright { background: #e9d79a; }
.moonx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.moonx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.moonx-legend i { width: 9px; height: 9px; border-radius: 2px; }
.moonx-legend-note { color: var(--faint); }
.moonx-more { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.moonx-more summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 650; list-style: none; }
.moonx-more summary::-webkit-details-marker { display: none; }
.moonx-more summary::after { content: " ↓"; }
.moonx-more[open] summary::after { content: " ↑"; }
.moonx-more[open] summary { margin-bottom: 12px; }

/* Прогноз — лента плашек. */
.moonx-forecast { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.moonx-fc {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--surface-4);
}
.moonx-fc.is-dark { background: color-mix(in srgb, var(--violet) 9%, var(--surface)); }
.moonx-fc.is-now { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.moonx-fc-when { color: var(--text); font-size: 13px; font-weight: 700; }
.moonx-fc-label { color: var(--muted); font-size: 12px; }
.moonx-fc b { color: var(--text); font-size: 22px; font-weight: 760; }
.moonx-fc.is-dark b { color: var(--violet); }
.moonx-fc-dates { color: var(--faint); font-size: 11px; }

/* Темы по фазам — чипы. */
.moonx-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.moonx-marks-col h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--text-soft); font-size: 13px; }
.moonx-mark-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.moonx-mark-chips span {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--surface-4); font-size: 12.5px;
}
.moonx-mark-chips b { color: var(--violet); font-size: 11px; }

/* ── Шапка «Главное» ── */
.moonx-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 24px; align-items: center; }
.moonx-hero-text p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.moonx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.moonx-tiles > div {
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--surface-4);
}
.moonx-tiles b { color: var(--text); font-size: 24px; font-weight: 760; line-height: 1; }
.moonx-tiles .is-dark b { color: var(--violet); }
.moonx-tiles span { color: var(--muted); font-size: 11.5px; }
.moonx-nowline {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  color: var(--text-soft); font-size: 13px; background: var(--surface); border: 1px solid var(--border);
}
.moonx-nowline b { color: var(--text); }

@media (max-width: 900px) { .moonx-hero { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .moonx-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Освещённость и «по годам» — две карточки рядом, одной высоты. */
.moonx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.moonx-pair .flip-card { margin: 0; }
.moonx-pair .flip-card, .moonx-pair .flip-inner, .moonx-pair .flip-front, .moonx-pair .flip-back { height: 100%; }
@media (max-width: 900px) { .moonx-pair { grid-template-columns: 1fr; } }
/* «Что чаще снится»: четыре колонки-фазы в стиле карточек фаз. */
.moonx-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.moonx-theme {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px;
  background: var(--surface); border: 1px solid var(--surface-4); border-radius: 14px;
}
.moonx-theme-head { display: flex; align-items: center; gap: 10px; }
.moonx-theme-head b { display: block; color: var(--text); font-size: 14px; }
.moonx-theme-head small { color: var(--faint); font-size: 11.5px; }
.moonx-theme ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.moonx-theme li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 9px; background: var(--surface-sunk);
}
.moonx-theme li span { overflow: hidden; color: var(--text-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.moonx-theme li b {
  flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent);
}
.moonx-theme.is-empty { background: transparent; border-style: dashed; }
.moonx-theme.is-empty .moonx-theme-head { opacity: .6; }
.moonx-theme.is-empty p { margin: auto 0; color: var(--faint); font-size: 12.5px; text-align: center; padding: 8px 0; }
@media (max-width: 900px) { .moonx-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Главная: виджет луны — фаза, место в цикле и шанс ОС. */
.moon-widget {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main chance" "cycle cycle";
  gap: 14px 20px; margin: 0 0 14px; padding: 16px 20px;
  color: inherit; text-decoration: none;
  background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: border-color .15s, transform .15s;
}
.moon-widget:hover { border-color: var(--accent-strong); transform: translateY(-1px); }
.moon-widget.is-dark { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 10%, var(--surface-2)), var(--surface)); }
.moon-widget-main { grid-area: main; display: flex; align-items: center; gap: 14px; min-width: 0; }
.moon-widget-disc { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 0 10px rgba(243, 230, 181, .25)); }
.moon-widget-text { display: grid; gap: 3px; min-width: 0; }
.moon-widget-text b { color: var(--text); font-size: 17px; font-weight: 720; }
.moon-widget-text span { color: var(--muted); font-size: 12.5px; }
.moon-widget-chance { grid-area: chance; display: grid; justify-items: end; align-content: center; gap: 2px; }
.moon-widget-chance b { color: var(--text); font-size: 30px; font-weight: 780; line-height: 1; }
.moon-widget.is-dark .moon-widget-chance b { color: var(--violet); }
.moon-widget-chance span { color: var(--muted); font-size: 11.5px; }
.moon-widget-cycle { grid-area: cycle; display: grid; gap: 7px; }
.moon-widget-strip { height: 8px; border-radius: 4px; }
.moon-widget-strip .cycle-seg:first-child { border-radius: 4px 0 0 4px; }
.moon-widget-strip .cycle-seg:nth-child(3) { border-radius: 0 4px 4px 0; }
.moon-widget-strip .cycle-now { top: -4px; bottom: -4px; width: 4px; border-radius: 2px; }
.moon-widget-next { color: var(--muted); font-size: 12px; }

/* Главная: «Зачастило» — темы, которые снятся чаще обычного. */
.rising-widget {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin: 14px 0;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.rising-widget-head { display: grid; gap: 2px; }
.rising-widget-head small { color: var(--faint); font-size: 11.5px; }
.rising-widget-list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.rising-widget-list a {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: 999px;
  text-decoration: none; background: var(--surface-2); border: 1px solid var(--surface-4);
  border-left: 3px solid var(--violet); transition: border-color .12s, transform .12s;
}
.rising-widget-list a:hover { border-color: var(--accent-strong); border-left-color: var(--violet); transform: translateY(-1px); }
.rising-widget-list b { color: var(--text); font-size: 14px; font-weight: 650; }
.rising-widget-list span { color: var(--violet); font-size: 12px; font-weight: 700; }
.rising-widget .quiet-link { margin-left: auto; white-space: nowrap; }

/* Две временные компоновки главной: 1 — классика, 2 — обзор. */
.dashboard-layout-switch { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: -9px 2px 13px; }
.dashboard-layout-switch > span { margin-right: 6px; color: var(--faint); font-size: 11.5px; }
.dashboard-layout-switch button {
  display: grid; place-items: center; width: 29px; height: 27px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
}
.dashboard-layout-switch button:hover { color: var(--text); border-color: var(--accent-line); }
.dashboard-layout-switch button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-deep); }
.dashboard-layout-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "moon" "calendar" "rising"; align-items: start; }
.dashboard-layout .moon-widget { grid-area: moon; min-width: 0; margin: 0; box-shadow: none; }
.dashboard-layout .month-block { grid-area: calendar; min-width: 0; margin: 17px 0 0; }
.dashboard-layout .rising-widget { grid-area: rising; min-width: 0; margin: 14px 0 0; box-shadow: none; }
.moon-widget-top { display: none; }
.widget-arrow { color: var(--faint); font-size: 19px; line-height: 1; transition: color .15s, transform .15s; }
.moon-widget:hover .widget-arrow { color: var(--accent); transform: translate(2px, -2px); }
.dashboard-layout .moon-widget-chance b { font-variant-numeric: tabular-nums; }
.dashboard-layout .moon-widget-next { color: var(--muted); font-size: 11.5px; }
.dashboard-layout .moon-widget-strip .seg-dark { background: var(--surface-4); }
.moon-widget-destination { display: none; color: var(--accent); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.dashboard-layout .rising-widget-head small { color: var(--faint); font-size: 11.5px; }
.dashboard-layout .rising-widget-head h2, .dashboard-layout .widget-period, .dashboard-layout .rising-count-long, .dashboard-layout .rising-widget-foot > span { display: none; }
.rising-widget-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.dashboard-layout .rising-widget .quiet-link { margin: 0; font-size: 12.5px; }
.rising-widget-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* 1: исходный ритм — компактная Луна, календарь, затем полоса мотивов. */
.dashboard-layout[data-layout="1"] .moon-widget {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main chance" "cycle cycle";
  align-items: center; gap: 12px 22px; padding: 16px 20px;
}
.dashboard-layout[data-layout="1"] .moon-widget-main { gap: 14px; }
.dashboard-layout[data-layout="1"] .moon-widget-disc { width: 46px; height: 46px; }
.dashboard-layout[data-layout="1"] .moon-widget-chance { justify-items: end; }
.dashboard-layout[data-layout="1"] .moon-widget-chance b { font-size: 29px; }
.dashboard-layout[data-layout="1"] .moon-widget-cycle { gap: 7px; }
.dashboard-layout[data-layout="1"] .moon-widget-cycle { grid-template-columns: minmax(0, 1fr) auto; }
.dashboard-layout[data-layout="1"] .moon-widget-strip { grid-column: 1 / -1; }
.dashboard-layout[data-layout="1"] .moon-widget-destination { display: block; grid-column: 2; grid-row: 2; }
.dashboard-layout[data-layout="1"] .rising-widget-head { display: grid; gap: 2px; }
.dashboard-layout[data-layout="1"] .rising-widget { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 13px 18px; }
.dashboard-layout[data-layout="1"] .rising-widget-list { flex: 1; }

/* 2: те же данные в двух компактных обзорных карточках. */
.dashboard-layout[data-layout="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px;
}
.dashboard-layout[data-layout="2"] { grid-template-areas: "moon rising" "calendar calendar"; }
.dashboard-layout[data-layout="2"] .moon-widget,
.dashboard-layout[data-layout="2"] .rising-widget { min-height: 188px; margin: 0; padding: 16px 18px; }
.dashboard-layout[data-layout="2"] .moon-widget {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "main chance" "cycle cycle";
  align-content: space-between; gap: 11px 12px;
  border-color: color-mix(in srgb, var(--violet) 24%, var(--border));
  background: radial-gradient(circle at 12% 42%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 42%), var(--surface);
}
.dashboard-layout[data-layout="2"] .moon-widget-top { grid-area: top; display: flex; justify-content: space-between; }
.dashboard-layout[data-layout="2"] .moon-widget-main { gap: 10px; }
.dashboard-layout[data-layout="2"] .moon-widget-disc { width: 43px; height: 43px; }
.dashboard-layout[data-layout="2"] .moon-widget-text b { font-size: 16px; }
.dashboard-layout[data-layout="2"] .moon-widget-text span { font-size: 11.5px; line-height: 1.4; }
.dashboard-layout[data-layout="2"] .moon-widget-chance { max-width: 94px; justify-items: end; text-align: right; }
.dashboard-layout[data-layout="2"] .moon-widget-chance b { font-size: 25px; }
.dashboard-layout[data-layout="2"] .moon-widget-chance span { font-size: 10.5px; line-height: 1.25; }
.dashboard-layout[data-layout="2"] .moon-widget-cycle { gap: 7px; }
.dashboard-layout[data-layout="2"] .moon-widget-strip { height: 6px; }
.dashboard-layout[data-layout="2"] .rising-widget { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.dashboard-layout[data-layout="2"] .rising-widget-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dashboard-layout[data-layout="2"] .rising-widget-head small, .dashboard-layout[data-layout="2"] .rising-count-short { display: none; }
.dashboard-layout[data-layout="2"] .rising-widget-head h2 { display: block; margin: 3px 0 0; color: var(--text); font-size: 15px; line-height: 1.25; }
.dashboard-layout[data-layout="2"] .widget-period { display: block; color: var(--faint); font-size: 11px; white-space: nowrap; }
.dashboard-layout[data-layout="2"] .rising-widget-list { display: grid; flex: 1; align-content: center; gap: 0; padding: 7px 0 5px; }
.dashboard-layout[data-layout="2"] .rising-widget-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0;
  border: 0; border-bottom: 1px solid var(--surface-4); border-radius: 0; background: none; transform: none;
}
.dashboard-layout[data-layout="2"] .rising-widget-list a:hover { border-bottom-color: var(--accent-line); }
.dashboard-layout[data-layout="2"] .rising-widget-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-layout[data-layout="2"] .rising-count-long { display: inline; flex: none; font-size: 11.5px; white-space: nowrap; }
.dashboard-layout[data-layout="2"] .rising-widget-foot { margin-top: auto; padding-top: 7px; }
.dashboard-layout[data-layout="2"] .month-block { margin-top: 24px; }
@media (max-width: 850px) {
  .dashboard-layout[data-layout="2"] { grid-template-columns: minmax(0, 1fr); }
  .dashboard-layout[data-layout="2"] { grid-template-areas: "moon" "rising" "calendar"; gap: 10px; }
  .dashboard-layout[data-layout="2"] .month-block { margin: 12px 0 0; }
}
@media (max-width: 560px) {
  .dashboard-layout[data-layout="1"] .moon-widget { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "chance" "cycle"; }
  .dashboard-layout[data-layout="1"] .moon-widget-chance { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; }
  .dashboard-layout[data-layout="2"] .moon-widget-main { flex-wrap: wrap; }
}

/* ── Список снов: воздух и удобство чтения ──
   Больше расстояние между карточками и внутри них, текст крупнее и контрастнее,
   строка не длиннее ~70 знаков (дальше глаз теряет строку), заголовки месяцев. */
.dream-list { gap: 14px; }
.dream-card {
  gap: 10px; padding: 18px 22px 16px; border-radius: 16px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dream-card:hover, .dream-card:focus-within { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.dream-card.is-lucid { border-left: 3px solid var(--violet); padding-left: 20px; }
.dream-card time { font-size: 12.5px; letter-spacing: .01em; }
.dream-card h2 { font-size: 17.5px; line-height: 1.35; letter-spacing: -.005em; }
.dream-open { gap: 8px; }
.dream-excerpt {
  color: var(--text-soft); font-size: 15px; line-height: 1.62;
}
.dream-meta-row { gap: 6px 8px; margin-top: 2px; }
.dream-meta-row span { padding: 3px 9px; font-size: 12.5px; }
.dream-month {
  grid-column: 1 / -1; margin: 18px 0 -2px; padding: 0 4px;
  color: var(--text-soft); font-size: 15px; font-weight: 720; letter-spacing: .01em;
}
.dream-month span { color: var(--faint); font-weight: 600; }
.dream-month:first-child { margin-top: 4px; }
@media (max-width: 640px) {
  .dream-card { padding: 16px 16px 14px; }
  .dream-card.is-lucid { padding-left: 14px; }
  .dream-excerpt { font-size: 14.5px; }
}

/* ── Карточка сна: дата листком слева, луна, значки вместо плашек ── */
.dream-card.dc2 { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.dc2-date {
  display: grid; justify-items: center; gap: 1px; padding: 8px 0 9px;
  background: var(--surface-sunk); border: 1px solid var(--surface-4); border-radius: 12px;
}
.dc2-date b { color: var(--text); font-size: 22px; font-weight: 760; line-height: 1.05; }
.dc2-date small { color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: lowercase; }
.dc2-date .moonx-icon { margin-top: 6px; }
.dream-card.dc2.is-lucid .dc2-date { background: color-mix(in srgb, var(--violet) 14%, var(--surface-sunk)); border-color: color-mix(in srgb, var(--violet) 40%, var(--surface-4)); }
.dream-card.dc2.is-lucid .dc2-date b { color: var(--violet); }
.dc2-body { display: grid; gap: 8px; min-width: 0; }
.dc2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dc2-head h2 { min-height: 0 !important; }
.dc2-link { color: inherit; text-decoration: none; }
.dc2-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dream-card.dc2:hover .dc2-link { color: var(--text-max); }
.dc2-badges { display: flex; align-items: center; gap: 6px; flex: none; margin-top: 2px; }
.dc2-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 760; letter-spacing: .03em; }
.dc2-badge.is-lucid { color: var(--violet-ink); background: color-mix(in srgb, var(--violet) 18%, transparent); }
.dc2-badge.is-prophetic { color: #e9c46a; background: rgba(233, 196, 106, .14); }
.dc2-dot { width: 8px; height: 8px; border-radius: 50%; }
.dc2-dot.is-marks { background: var(--accent); }
.dc2-dot.is-wait { background: var(--faint); }
.dc2-dot.is-error { background: var(--danger); }
.dc2-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 2px; }
.dc2-fact { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.dc2-tag, .dc2-more { position: relative; z-index: 1; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.dc2-tag:hover { color: var(--accent); }
.dc2-more { color: var(--faint); }
/* Полоска ОС не нужна — её роль играет фиолетовая дата. */
.dream-card.dc2.is-lucid { border-left-width: 1px; border-left-color: var(--border); padding-left: 22px; }
@media (max-width: 640px) {
  .dream-card.dc2 { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .dc2-date b { font-size: 19px; }
  .dream-card.dc2.is-lucid { padding-left: 16px; }
}

/* Плашка «показаны сны до …», когда перешли по ленте времени далеко вниз. */
.at-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px;
  padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px;
}
.at-banner a { color: var(--accent); font-weight: 650; text-decoration: none; white-space: nowrap; }
.dream-month { scroll-margin-top: 16px; }

/* ── Лента времени справа: годы и месяцы, как в Google Фото ── */
.timeline {
  position: fixed; top: 50%; right: 18px; z-index: 20; transform: translateY(-50%);
  display: grid; gap: 10px; width: 78px; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 8px; scrollbar-width: none;
}
.timeline::-webkit-scrollbar { display: none; }
.timeline-year { display: grid; gap: 1px; }
.timeline-year-label { padding: 0 0 3px; color: var(--muted); font-size: 11px; font-weight: 760; text-align: right; letter-spacing: .02em; }
.timeline-month {
  position: relative; display: flex; align-items: center; justify-content: flex-end; height: 7px;
  text-decoration: none;
}
.timeline-month span {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.timeline-month:hover span, .timeline-month.is-active span { opacity: 1; }
.timeline-dot { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); transition: background .12s, height .12s; }
.tl-tone-1 .timeline-dot { background: color-mix(in srgb, var(--violet) 35%, var(--border-strong)); }
.tl-tone-2 .timeline-dot { background: var(--violet); }
.timeline-month:hover .timeline-dot { background: var(--text-soft); height: 4px; }
.timeline-month.is-active .timeline-dot { background: var(--accent); height: 5px; }
.tl-size-0 { width: 8px; } .tl-size-1 { width: 14px; } .tl-size-2 { width: 20px; } .tl-size-3 { width: 26px; } .tl-size-4 { width: 32px; }
/* Лента справа только там, где ей есть место рядом с колонкой. */
@media (max-width: 1180px) { .timeline { display: none; } }

/* Действия в карточке черновика и корзины — над ссылкой-подложкой, справа внизу. */
.dc2-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dc2-actions form { margin: 0; }
.dc2-action {
  padding: 4px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-soft); font: inherit; font-size: 12.5px; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.dc2-action:hover { color: var(--text); border-color: var(--accent-strong); }
.dc2-action.is-danger { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 35%, var(--border-strong)); }
.dc2-action.is-danger:hover { border-color: var(--danger); }
.dream-read-tools form { margin: 0; }
.dream-tool { font: inherit; font-size: 14px; font-weight: 680; cursor: pointer; }
.trash-note { color: var(--danger-ink); font-size: 12.5px; font-weight: 600; }

/* Экспорт в колонке 720: карточки строками — иконка, описание, кнопка справа. */
.export-grid { grid-template-columns: 1fr; gap: 12px; }
.export-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 18px; align-items: start;
  padding: 20px 22px;
}
.export-icon { grid-row: 1 / span 3; margin: 0; }
.export-card h2, .export-card p { grid-column: 2; }
.export-card h2 { margin-bottom: 6px; }
.export-card p { font-size: 14px; }
.export-card .export-sub:last-of-type { margin-bottom: 0; }
.export-button { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .export-card { grid-template-columns: 40px minmax(0, 1fr); }
  .export-button { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
}
/* Иконки-действия в карточке (корзина): квадрат, подпись всплывает над кнопкой. */
.dc2-action.is-icon { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.dc2-action.is-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dc2-action.is-icon::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30;
  padding: 5px 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 680; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.dc2-action.is-icon:hover::after, .dc2-action.is-icon:focus-visible::after { opacity: 1; }