/* ─────────────────────────────────────────────────────────────
   Atelier — premium glassmorphic UI
   ───────────────────────────────────────────────────────────── */

:root {
    /* surfaces */
    --bg-0:        #07061a;
    --bg-1:        #110a2c;
    --bg-2:        #1f1340;
    --bg-haze-1:   rgba(167, 139, 250, 0.10);
    --bg-haze-2:   rgba(232, 170, 122, 0.12);
    --bg-haze-3:   rgba(112, 90, 200, 0.12);

    --surface:     rgba(255, 255, 255, 0.038);
    --surface-2:   rgba(255, 255, 255, 0.06);
    --surface-3:   rgba(255, 255, 255, 0.10);
    --border:      rgba(255, 255, 255, 0.08);
    --border-2:    rgba(255, 255, 255, 0.14);
    --border-3:    rgba(255, 255, 255, 0.22);
    --border-glow: rgba(196, 168, 122, 0.42);

    /* text */
    --text:        #ece9f5;
    --text-2:      rgba(236, 233, 245, 0.66);
    /* Muted tiers raised toward WCAG AA: --text-3 styles real informational
       text (date/weekday meta, pulse sub-labels, card hints) and --text-4 is
       the input placeholder — both were below the 4.5:1 / 3:1 thresholds. */
    --text-3:      rgba(236, 233, 245, 0.62);
    --text-4:      rgba(236, 233, 245, 0.48);
    /* "Muted" tier used by editor labels/hints, the pulse gear, radar-axis
       controls, etc. Referenced ~14× but never defined, so those elements
       fell back to full --text brightness and flattened the hierarchy. */
    --text-muted:  rgba(236, 233, 245, 0.55);

    /* accents */
    --accent:      #c4a87a;
    --accent-2:    #a78bfa;
    --accent-3:    #f3d6a4;
    --accent-rose: #e8a4b3;
    --success:     #7ee2b8;
    --danger:      #f3a3a3;
    /* Mood line chart (stats). Theme-driven so the light beige theme gets a
       readable green instead of the dark-theme mint that washes out on it. */
    --mood-line:      #7ee2b8;
    --mood-line-area: rgba(126, 226, 184, 0.10);

    /* radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;

    /* shadows */
    --shadow-soft: 0 30px 80px -40px rgba(0, 0, 0, 0.6),
                   0 8px 30px -15px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 20px 60px -32px rgba(0, 0, 0, 0.7);
    --shadow-pop:  0 16px 40px -16px rgba(0, 0, 0, 0.6),
                   0 0 0 1px var(--border-2);
    --inset-line:  inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* fonts */
    --font-sans:   'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-serif:  'Fraunces', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* timings */
    --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-med:  280ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* layout */
    --topbar-h: 0px;
    --sidebar-w: 300px;
    --main-block-gap: 32px;
    --main-block-gap-mobile: 28px;
}

/* ─── Light theme override (тональность hero-morning: cream → rose → lavender) ─── */
:root[data-theme="light"] {
    --bg-0:        #f5e6dd;
    --bg-1:        #efe1ea;
    --bg-2:        #e9dceb;
    --bg-haze-1:   rgba(252, 232, 210, 0.65);
    --bg-haze-2:   rgba(244, 225, 232, 0.60);
    --bg-haze-3:   rgba(216, 182, 224, 0.35);

    --surface:     rgba(255, 247, 240, 0.50);
    --surface-2:   rgba(255, 247, 240, 0.68);
    --surface-3:   rgba(255, 247, 240, 0.84);
    --border:      rgba(43, 31, 77, 0.11);
    --border-2:    rgba(43, 31, 77, 0.17);
    --border-3:    rgba(43, 31, 77, 0.26);
    --border-glow: rgba(168, 122, 58, 0.42);

    --text:        #2b1f4d;
    --text-2:      rgba(43, 31, 77, 0.72);
    /* Raised toward AA on the cream surface (was 0.50 ~2.95:1 / 0.32 ~1.9:1).
       Higher alpha = darker = more contrast against the light background. */
    --text-3:      rgba(43, 31, 77, 0.72);
    --text-4:      rgba(43, 31, 77, 0.54);
    --text-muted:  rgba(43, 31, 77, 0.58);

    --accent:      #a87a3a;
    --accent-2:    #6c4fd0;
    --accent-3:    #c89a4a;
    /* Light-theme variants of the status/accent colors. Without these the page
       kept the dark-theme pastels (#a78bfa/#e8a4b3/#7ee2b8/#f3a3a3), which are
       near-invisible on the cream surface — pricing checkmarks, the trial
       badge, subscription status, and error text all under-contrasted. */
    --accent-rose: #b85c74;
    --success:     #2e9e6f;
    --danger:      #c0494f;
    --mood-line:      #2e9e6f;
    --mood-line-area: rgba(46, 158, 111, 0.13);

    --shadow-soft: 0 24px 60px -32px rgba(43, 31, 77, 0.20),
                   0 6px 20px -10px rgba(43, 31, 77, 0.10);
    --shadow-card: 0 18px 48px -28px rgba(43, 31, 77, 0.22);
    --shadow-pop:  0 16px 36px -16px rgba(43, 31, 77, 0.20),
                   0 0 0 1px var(--border-2);
    --inset-line:  inset 0 1px 0 rgba(255, 247, 240, 0.65);
}

/* Hardcoded colors that don't go through variables */
:root[data-theme="light"] .bg-orbs { display: none; }
:root[data-theme="light"] body::after { opacity: 0.035; }

/* ─── Reset / base ─── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { min-height: 100%; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 19.3px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-0);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-top: var(--topbar-h);
}

/* ─── Global UI scale ──────────────────────────────────────────
   The hand-tuned px type/spacing reads too large ("zoomed in") on
   desktop. A body-level zoom uniformly scales the whole UI down
   like a browser zoom-out — and unlike a root zoom it leaves the
   media-query viewport (window.innerWidth) untouched, so every
   responsive breakpoint stays put. Reset to 1 on the narrow
   (off-canvas sidebar) layout so phones/tablets keep their
   touch-tuned sizing. Tune the single number below to taste. */
body { zoom: 0.85; }
@media (max-width: 980px) { body { zoom: 1; } }

/* ─── Background ─── */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 18% 12%, var(--bg-haze-1), transparent 45%),
        radial-gradient(circle at 88% 8%,  var(--bg-haze-2), transparent 38%),
        radial-gradient(circle at 50% 100%, var(--bg-haze-3), transparent 55%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 80%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.045;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* Animated decorative orbs */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform;
}
.orb-1 {
    width: 420px; height: 420px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, #6d4dd0 0%, transparent 60%);
    animation: float1 22s ease-in-out infinite;
}
.orb-2 {
    width: 360px; height: 360px;
    top: 30%; right: -120px;
    background: radial-gradient(circle, #d4a070 0%, transparent 60%);
    animation: float2 28s ease-in-out infinite;
}
.orb-3 {
    width: 480px; height: 480px;
    bottom: -200px; left: 30%;
    background: radial-gradient(circle, #8b6ed8 0%, transparent 60%);
    animation: float3 32s ease-in-out infinite;
}
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 80px) scale(1.1); }
}
@keyframes float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-80px, 60px) scale(1.15); }
}
@keyframes float3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -60px) scale(1.05); }
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

input, textarea {
    font: inherit;
    color: inherit;
}

::-webkit-scrollbar           { width: 10px; height: 10px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: rgba(255,255,255,0.06); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

::selection { background: rgba(196, 168, 122, 0.35); color: var(--text); }

kbd {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    padding: 2px 5px;
    font-family: var(--font-mono);
    font-size: 12.9px;
    line-height: 1;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* generic icon button */
.icon-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--text-2);
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn.ghost { background: var(--surface); border-color: var(--border); }
.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-2);
}
.icon-btn.small { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn svg  { width: 18px; height: 18px; }
.icon-btn.small svg { width: 14px; height: 14px; }

/* ─── App layout ─── */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: calc(100vh - var(--topbar-h));
    min-width: 0;
    width: 100%;
}

/* ─── Sidebar ─── */

.sidebar {
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    padding: 24px 22px;
    border-right: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)),
        rgba(7, 6, 26, 0.45);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    /* Flex column: the nav (.sidebar-inner) scrolls, the footer stays pinned at
       the bottom (always visible, no scroll needed to reach the profile button). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 5;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* Scrollable nav region — takes the space left above the pinned footer. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.date-nav {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
}

.date-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all var(--t-fast);
}
.date-pill:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
}
.date-pill-day {
    font-family: var(--font-serif);
    font-size: 24.5px;
    font-weight: 500;
    line-height: 1;
}
.date-pill-meta {
    font-size: 13.6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-3);
    margin-top: 4px;
}

.today-btn {
    padding: 10px;
    width: 100%;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(196, 168, 122, 0.10));
    color: var(--text);
    font-size: 16.1px;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all var(--t-fast);
}
.today-btn:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(196, 168, 122, 0.18));
    border-color: var(--border-glow);
}

.hidden-date { position: absolute; opacity: 0; pointer-events: none; }

/* mini calendar */
.mini-cal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    box-shadow: var(--inset-line);
}
.mini-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.mini-cal-title {
    font-family: var(--font-serif);
    font-size: 20.6px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}
.mini-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 12.2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-4);
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-day {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 8px;
    font-size: 15.4px;
    font-weight: 400;
    color: var(--text-2);
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.cal-day:hover { background: var(--surface-2); color: var(--text); }
.cal-day.muted { color: var(--text-4); }
.cal-day.today {
    color: var(--accent-3);
    font-weight: 600;
    border-color: rgba(196, 168, 122, 0.35);
}
.cal-day.selected {
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    color: #2b1e0a;
    font-weight: 600;
    border-color: transparent;
}
/* Two distinct markers on calendar cells.
   has-pulse → purple dot on the LEFT (entries in "Как ты сейчас?" — pulse scales)
   has-today → green dot on the RIGHT (entries in "Что было сегодня" — reflection cards) */
.cal-day.has-pulse::before,
.cal-day.has-today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
.cal-day.has-pulse::before {
    left: calc(50% - 6px);
    background: #a78bfa;
}
.cal-day.has-today::after {
    left: calc(50% + 2px);
    background: #65d6a3;
}
/* When only one marker is present, center it. */
.cal-day.has-pulse:not(.has-today)::before,
.cal-day.has-today:not(.has-pulse)::after {
    left: 50%;
    transform: translateX(-50%);
}
/* Selected (gold) day uses dark dots for contrast. */
.cal-day.selected.has-pulse::before { background: #2b1e0a; }
.cal-day.selected.has-today::after  { background: #2b1e0a; }

/* stats */
.stats { display: flex; flex-direction: column; gap: 10px; }
.stat-card {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: var(--inset-line);
}
.stat-label {
    font-size: 14.1px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-3);
}
.stat-value {
    font-family: var(--font-serif);
    font-size: 30.9px;
    font-weight: 500;
    color: var(--text);
}
.muted { color: var(--text-3); font-weight: 400; }

/* keyboard hints */
.kbd-hints {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 14.8px;
    color: var(--text-3);
}
.kbd-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kbd-row span { margin-left: auto; }

/* sidebar foot */
.sidebar-foot {
    /* Pinned (non-scrolling) flex item at the bottom of the sidebar — always
       visible, no scrolling required to reach the profile button. The nav above
       (.sidebar-inner) scrolls independently, so nothing overlaps the footer. */
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
/* Profile button on top, «Все сохранено» below it. */
.sidebar-foot .save-indicator { order: 1; }
.save-indicator {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.8px;
    color: var(--text-3);
}
.save-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 12px rgba(126, 226, 184, 0.55);
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
.save-indicator.saving .save-dot {
    background: var(--accent-3);
    box-shadow: 0 0 12px rgba(243, 214, 164, 0.6);
    animation: pulse 1.2s ease-in-out infinite;
}
.save-indicator.error .save-dot {
    background: var(--danger);
    box-shadow: 0 0 12px rgba(243, 163, 163, 0.6);
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* ─── Main ─── */

.main {
    /* Reduced top padding now that the floating theme FAB is gone — the first
       block (hero) no longer needs to clear it, so it sits higher. */
    padding: 36px clamp(18px, 2.6vw, 44px) 80px;
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    position: relative;
}

/* Когда нет ни одной открытой зоны — прячем кнопку «наверх»:
   скроллить некуда, и она выглядит лишней. */
.main:not(:has(.is-collapsible.is-active)) .closing-back-top {
    display: none;
}

/* ─── Pulse panel (quick scales) ─── */

.pulse {
    margin: var(--main-block-gap) 4px var(--main-block-gap);
    padding: 22px 26px 24px;
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.10), rgba(167, 139, 250, 0.07)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(196, 168, 122, 0.20);
    border-radius: var(--r-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card), var(--inset-line);
    position: relative;
    z-index: 1;
}

.pulse-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.pulse-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.9px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--accent-3);
}
.pulse-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 12px rgba(243, 214, 164, 0.45);
}
.pulse-title {
    margin: 6px 0 0;
    font-family: var(--font-serif);
    font-size: 33.5px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
}
.pulse-sub {
    margin: 0;
    color: var(--text-3);
    font-size: 16.1px;
    font-style: italic;
    text-align: right;
    max-width: 260px;
}

.pulse-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.pulse-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 12.4px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    position: relative;
}
.pulse-tab:hover {
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04);
}
.pulse-tab.is-active {
    color: var(--accent-3);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(243, 214, 164, 0.18);
}
.pulse-tab-glyph {
    font-size: 14px;
    line-height: 1;
}
.pulse-tab-name { line-height: 1; }

.pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 22px;
}

.scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--border);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.scale[hidden] { display: none; }
.scale.is-conditional-hidden { display: none !important; }
.scale:hover {
    border-color: var(--border-2);
    background: rgba(255, 255, 255, 0.04);
}
.scale.scale-filled {
    border-color: rgba(196, 168, 122, 0.32);
    background: rgba(196, 168, 122, 0.06);
}

.scale-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16.8px;
    letter-spacing: 0.1px;
    color: var(--text-3);
}
.scale-icon {
    font-size: 18.1px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(196, 168, 122, 0.25));
}
.scale-name {
    font-weight: 500;
    color: var(--text-2);
}

/* Readout chip (N / 10) + clear (×), right-aligned in the meta row. */
.scale-readout {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: var(--accent-3);
    min-width: 40px;
    text-align: right;
}
.scale-clear {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-3);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
/* The class's `display` would otherwise override the [hidden] attribute
   (equal specificity, later in source), leaving × visible on empty scales. */
.scale-clear[hidden] { display: none; }
.scale-clear:hover,
.scale-clear:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-2);
}

/* ─── Slider scale control (1..10) ─── */
.scale-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    outline: none;
    touch-action: none;
}
.scale-slider:focus-visible {
    outline: 2px solid rgba(196, 168, 122, 0.9);
    outline-offset: 4px;
}
.scale-slider-end {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    opacity: 0.5;
    filter: grayscale(0.5);
    user-select: none;
}
.scale-slider-end.is-best { opacity: 0.7; filter: grayscale(0.2); }
.scale-slider-track {
    position: relative;
    flex: 1 1 0;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.scale-slider-rail {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
}
.scale-slider-fill {
    position: absolute;
    left: 0;
    width: 0%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.5), rgba(196, 168, 122, 0.85));
    transition: width var(--t-fast), opacity var(--t-fast);
}
.scale-slider-ticks {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    /* 11 ticks at the 0,10,…,100% boundaries (space-between): value v sits on
       tick v (v*10%), so 5 lands on the centre tick and the row is symmetric. */
    justify-content: space-between;
    padding: 0;
    pointer-events: none;
}
.scale-slider-ticks i {
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: var(--text-4);
    opacity: 0.5;
}
.scale-slider-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    background: linear-gradient(135deg, rgba(196, 168, 122, 0.9), rgba(167, 139, 250, 0.7));
    border: 1px solid rgba(243, 214, 164, 0.8);
    box-shadow: 0 6px 20px -6px rgba(196, 168, 122, 0.7);
    transition: left var(--t-fast), opacity var(--t-fast);
    pointer-events: none;
}
.scale-slider.is-empty .scale-slider-thumb,
.scale-slider.is-empty .scale-slider-fill { opacity: 0; }

/* ─── Zones (today / tomorrow) ─── */

.zone {
    margin: 0 0 var(--main-block-gap);
    position: relative;
    z-index: 1;
}
.zone:last-of-type {
    margin-bottom: 0;
}

.zone-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 4px 18px;
    padding-top: 6px;
}
.zone-kicker,
.goals-horizon-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.9px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--accent-3);
}
.zone-kicker::before,
.goals-horizon-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 12px rgba(243, 214, 164, 0.45);
}
.zone-kicker-tomorrow {
    color: var(--accent-2);
}
.zone-kicker-tomorrow::before {
    background: var(--accent-2);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.45);
}
.zone-title,
.goals-horizon-title {
    margin: 6px 0 0;
    font-family: var(--font-serif);
    font-size: 39.9px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
}
.zone-sub,
.goals-horizon-sub {
    max-width: 300px;
    margin: 0;
    color: var(--text-3);
    font-size: 16.1px;
    font-style: italic;
    text-align: right;
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}
.zone-full {
    grid-column: 1 / -1;
}
/* Три карточки зоны «завтра» в один ряд */
.zone-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Sidebar zones nav (accordion) ─── */
.zones-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 4px;
}
.zone-tab-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zone-tab-submenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 4px 6px 14px;
    border-left: 1px dashed var(--border);
    margin-left: 14px;
}
.zone-tab-submenu[hidden] {
    display: none;
}
.zone-tab-sub {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm, 10px);
    padding: 7px 12px;
    text-align: left;
    cursor: pointer;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.zone-tab-sub:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}
.zone-tab-sub.is-active {
    background: rgba(196, 168, 122, 0.14);
    border-color: rgba(196, 168, 122, 0.32);
    color: var(--text);
}

.zone-tab {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: var(--inset-line);
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.zone-tab .zone-kicker,
.zone-tab .goals-horizon-kicker {
    font-size: 12.2px;
    letter-spacing: 1.4px;
}
.zone-tab-title {
    font-family: var(--font-serif);
    font-size: 21.8px;
    line-height: 1.15;
    color: var(--text);
}
.zone-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-2);
}
.zone-tab:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: 3px;
}
.zone-tab.is-active {
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.18), rgba(167, 139, 250, 0.10)),
        rgba(255, 255, 255, 0.05);
    border-color: rgba(196, 168, 122, 0.4);
    box-shadow: 0 14px 38px -18px rgba(196, 168, 122, 0.45), var(--inset-line);
}

/* Old inline zone-head buttons hidden — sidebar nav is the source of truth */
.is-collapsible .zone-head,
.is-collapsible .goals-horizon-head {
    display: none;
}

/* Only show the active zone's body */
.is-collapsible {
    display: none;
}
.is-collapsible.is-active {
    display: block;
}
.is-collapsible.is-active .zone-body,
.is-collapsible.is-active .goals-horizon-body {
    display: block;
}

.primary-card {
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.16), rgba(167, 139, 250, 0.07)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(196, 168, 122, 0.26);
}
.primary-card .card-title {
    font-size: 30.9px;
}

.card {
    padding: 24px 26px 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card), var(--inset-line);
    position: relative;
    transition: border-color var(--t-med), background var(--t-med), transform var(--t-med);
    animation: cardIn 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card.flash, section.flash {
    animation: sectionFlash 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sectionFlash {
    0%   { box-shadow: 0 0 0 0 rgba(196, 168, 122, 0); }
    35%  { box-shadow: 0 0 0 6px rgba(196, 168, 122, 0.32); }
    100% { box-shadow: 0 0 0 0 rgba(196, 168, 122, 0); }
}

.card:nth-child(1)  { animation-delay: 40ms; }
.card:nth-child(2)  { animation-delay: 90ms; }
.card:nth-child(3)  { animation-delay: 140ms; }
.card:nth-child(4)  { animation-delay: 190ms; }
.card:nth-child(5)  { animation-delay: 230ms; }
.card:nth-child(6)  { animation-delay: 270ms; }
.card:nth-child(7)  { animation-delay: 310ms; }
.card:nth-child(8)  { animation-delay: 350ms; }
.card:nth-child(9)  { animation-delay: 380ms; }
.card:nth-child(10) { animation-delay: 410ms; }
.card:nth-child(11) { animation-delay: 440ms; }
.card:nth-child(12) { animation-delay: 470ms; }
.card:nth-child(13) { animation-delay: 500ms; }

.card:hover {
    border-color: var(--border-2);
    background: rgba(255, 255, 255, 0.05);
}

.card:focus-within {
    border-color: var(--border-glow);
    box-shadow: var(--shadow-card),
                var(--inset-line),
                0 0 0 4px rgba(196, 168, 122, 0.06);
}

.highlight-card {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.06), rgba(255, 255, 255, 0.03));
    border-color: rgba(167, 139, 250, 0.18);
}
.highlight-card:hover { border-color: rgba(167, 139, 250, 0.35); }

.focus-card,
.summary-card {
    background: linear-gradient(135deg, rgba(196, 168, 122, 0.08), rgba(255, 255, 255, 0.03));
    border-color: rgba(196, 168, 122, 0.22);
}
.summary-card { background: linear-gradient(135deg, rgba(196, 168, 122, 0.12), rgba(167, 139, 250, 0.06)); }

.card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.card-num {
    flex-shrink: 0;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 13.6px;
    font-weight: 400;
    color: var(--text-4);
    letter-spacing: 0.5px;
    width: 22px;
}

.card-icon {
    font-size: 24.5px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    filter: drop-shadow(0 4px 12px rgba(196, 168, 122, 0.25));
}

.card-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 28.3px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1px;
}

.card-hint {
    margin: 4px 0 0;
    font-size: 16.1px;
    color: var(--text-3);
    font-style: italic;
}

.scope-pill {
    margin-left: auto;
    align-self: center;
    padding: 4px 12px;
    font-size: 14.1px;
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-transform: uppercase;
}

/* ─── Lists / tasks / goals ─── */

.bullet-list, .task-list, .goal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}

.bullet-row, .task-row, .goal-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    position: relative;
}
.bullet-row:hover, .task-row:hover, .goal-row:hover {
    background: var(--surface-2);
}

.bullet-marker {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 11px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(196, 168, 122, 0.4);
}

.row-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    padding: 4px 0;
    min-height: 28px;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    font-size: 18.6px;
    line-height: 1.55;
    word-break: break-word;
}
.row-input::placeholder { color: var(--text-4); }
/* Mouse/touch focus stays clean, but keyboard focus MUST be visible — the row
   textarea is the most-used control in the app and a bare `outline:none` left
   tab navigation with no focus indicator at all (WCAG 2.4.7). :focus-visible
   only fires for keyboard focus, so clicks don't show the ring. */
.row-input:focus { outline: none; }
.row-input:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-radius: 4px;
}

.checkbox {
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin-top: 4px;
    border-radius: 7px;
    border: 1.5px solid var(--border-2);
    display: grid; place-items: center;
    cursor: pointer;
    background: rgba(255,255,255,0.02);
    transition: all var(--t-spring);
    position: relative;
}
.checkbox:hover { border-color: var(--accent); }
.checkbox svg {
    width: 14px; height: 14px;
    stroke: #2b1e0a;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--t-spring);
}
.checkbox[aria-checked="true"] {
    background: linear-gradient(135deg, var(--accent-3), var(--accent));
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(196, 168, 122, 0.6);
}
.checkbox[aria-checked="true"] svg {
    opacity: 1;
    transform: scale(1);
}

.task-row.completed .row-input,
.goal-row.completed .row-input {
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-color: var(--text-4);
}

.row-delete {
    width: 24px; height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
    border-radius: 6px;
    display: grid; place-items: center;
    color: var(--text-4);
    opacity: 0;
    transition: all var(--t-fast);
}
.bullet-row:hover .row-delete,
.task-row:hover .row-delete,
.goal-row:hover .row-delete,
.row-delete:focus { opacity: 1; }
.row-delete:hover { background: rgba(243, 163, 163, 0.12); color: var(--danger); }
.row-delete svg { width: 14px; height: 14px; }

.add-row {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    color: var(--text-3);
    font-size: 16.8px;
    border: 1px dashed transparent;
    transition: all var(--t-fast);
}
.add-row:hover {
    color: var(--accent-3);
    background: rgba(196, 168, 122, 0.06);
    border-color: rgba(196, 168, 122, 0.22);
}
.add-plus {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    font-size: 20.6px;
    font-weight: 300;
    line-height: 1;
    transition: all var(--t-fast);
}
.add-row:hover .add-plus {
    background: linear-gradient(135deg, var(--accent-3), var(--accent));
    color: #2b1e0a;
}

/* ─── Text card ─── */

.arrow-text {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 4px 6px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    cursor: text;
}
.arrow-text:focus-within { background: var(--surface-2); }
/* Honor the HTML `hidden` attribute for the toggled empty-state pattern
   where a text-card swaps between "+ добавить…" button and the input. */
.arrow-text[hidden],
.text-add-row[hidden] { display: none; }

/* Pure text cards: let the input region fill the card so the whole body —
   not just the small textarea — is a click target. Cards stretch to match
   their grid-row neighbour's height (.zone-grid align-items: stretch), and
   without this the stretched-empty area below the textarea is a dead zone. */
.text-card {
    display: flex;
    flex-direction: column;
}
.text-card .arrow-text {
    flex: 1 1 auto;
}

/* Same treatment for list/task cards: lay out as a flex column so the empty
   area below the add-row pill is still part of the card body. A delegated
   JS handler turns clicks on that area into "add new item", giving every
   card the same input metaphor — click anywhere in the body to start. */
.list-card,
.task-card {
    display: flex;
    flex-direction: column;
}
.arrow {
    color: var(--accent);
    font-size: 23.2px;
    font-weight: 300;
    margin-top: 6px;
    line-height: 1;
    flex-shrink: 0;
}
.text-area {
    flex: 1;
    width: 100%;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    padding: 6px 0;
    resize: none;
    font-family: inherit;
    font-size: 19.3px;
    line-height: 1.65;
    overflow: hidden;
}
.text-area::placeholder { color: var(--text-4); }
.focus-area { font-family: var(--font-serif); font-size: 28.3px; font-weight: 400; }
.summary-card .text-area { font-family: var(--font-serif); font-style: italic; font-size: 24.5px; }

/* ─── Long-horizon goals ─── */

.goals-horizon {
    position: relative;
    margin: 0 0 var(--main-block-gap);
    padding-top: 0;
    border-top: 0;
}
.goals-horizon::before {
    display: none;
    content: '';
    position: absolute;
    top: -1px;
    left: 4px;
    width: 144px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-3), rgba(126, 226, 184, 0.6), transparent);
}
.goals-horizon-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 4px 18px;
}
.goals-horizon-kicker {
    color: var(--success);
}
.goals-horizon-kicker::before {
    background: var(--success);
    box-shadow: 0 0 12px rgba(126, 226, 184, 0.45);
}
.goals-horizon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.horizon-card {
    padding: 20px;
    border-radius: var(--r-md);
    background:
        linear-gradient(135deg, rgba(126, 226, 184, 0.07), rgba(167, 139, 250, 0.05)),
        rgba(255, 255, 255, 0.03);
    border-color: rgba(126, 226, 184, 0.18);
}
.horizon-card:hover,
.horizon-card:focus-within {
    border-color: rgba(126, 226, 184, 0.34);
}
.horizon-card .card-head {
    gap: 10px;
    margin-bottom: 12px;
}
.horizon-card .card-title {
    font-size: 25.8px;
}
.horizon-card .card-hint {
    font-size: 15.4px;
}
.horizon-card .scope-pill {
    padding: 3px 10px;
    font-size: 12.9px;
}
.horizon-marker {
    flex-shrink: 0;
    min-width: 44px;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 12.2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--success);
}
.horizon-card .goal-row {
    padding-inline: 0;
}
.horizon-card .goal-row:hover {
    background: rgba(126, 226, 184, 0.06);
}
.horizon-card .add-row {
    margin-top: 6px;
}

/* ─── Closing ─── */

.closing {
    margin-top: 60px;
    text-align: center;
    padding: 40px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.closing-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 24.5px;
    color: var(--text-3);
    margin: 0;
    letter-spacing: 0.5px;
}
.closing-back-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 16.1px;
    transition: all var(--t-fast);
}
.closing-back-top:hover {
    background: var(--surface-2);
    color: var(--accent-3);
    border-color: var(--border-glow);
}
.closing-back-top svg { width: 14px; height: 14px; }

/* ─── Toasts ─── */

.toasts {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(15, 11, 35, 0.94);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    font-size: 16.8px;
    color: var(--text);
    box-shadow: var(--shadow-soft);
    pointer-events: auto;
    animation: toastIn var(--t-spring) forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast.leaving { animation: toastOut var(--t-med) forwards; }
@keyframes toastOut {
    to { opacity: 0; transform: translateY(8px); }
}

/* ─── Sidebar toggle (mobile) ─── */

.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 30;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
    place-items: center;
}
.sidebar-toggle svg { width: 20px; height: 20px; }

/* Dimming backdrop behind the mobile slide-in sidebar. Desktop keeps the
   sidebar static, so the scrim only ever shows under the ≤980px overlay. */
.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 24; /* under the sidebar (25), over the main content */
    background: rgba(10, 8, 20, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: none;
}

/* ─── Responsive ─── */

@media (max-width: 820px) {
    .zone-grid {
        grid-template-columns: 1fr;
    }
    .pulse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pulse-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    :root { --sidebar-w: 280px; }
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: var(--topbar-h); left: 0;
        width: 320px;
        max-width: 86vw;
        transform: translateX(-100%);
        transition: none;
        height: calc(100vh - var(--topbar-h));
        /* dvh tracks the *visible* viewport, so the sidebar foot (save dot,
           "Тариф"/"Выйти") isn't pushed under the mobile browser URL bar. */
        height: calc(100dvh - var(--topbar-h));
        z-index: 25;
    }
    .sidebar-toggle { display: grid; }
    body.sidebar-open .sidebar-scrim {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .main { padding: 24px 20px 100px; }
    .zone,
    .goals-horizon {
        margin-bottom: var(--main-block-gap-mobile);
    }
    .hero { margin-bottom: 32px; }
    .hero-frame {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 26px 22px;
    }
    .hero-frame::after { left: 22px; right: 22px; }
    .hero-frame::before { inset: 8px; }
    .hero-aside {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        justify-self: start;
        flex-wrap: wrap;
    }
    .pulse-head,
    .zone-head,
    .goals-horizon-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .pulse-sub,
    .zone-sub,
    .goals-horizon-sub {
        max-width: none;
        text-align: left;
    }
    .goals-horizon-grid {
        grid-template-columns: 1fr;
    }
    .pulse {
        margin: var(--main-block-gap-mobile) 0 var(--main-block-gap-mobile);
        padding: 18px 18px 20px;
    }
    .streak-chip { padding: 6px 12px; }
    .streak-label { display: none; }
    .brand-text { display: none; }
}

.sidebar.open,
#sidebar.open {
    transform: translateX(0) !important;
    transition: none !important;
}

@media (max-width: 560px) {
    .hero-title { font-size: 72.1px; gap: 16px; }
    .hero-month { font-size: 0.55em; }
    .hero-cta { padding: 11px 18px; font-size: 16.8px; }
    .hero-ghost { padding: 11px 16px; font-size: 16.1px; }
    .card { padding: 20px 18px; border-radius: var(--r-md); }
    .card-title { font-size: 24.5px; }
    .primary-card .card-title { font-size: 28.3px; }
    .zone-title,
    .pulse-title,
    .goals-horizon-title { font-size: 34.7px; }
    .horizon-card { padding: 18px; }
    .horizon-card .card-head {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px 12px;
    }
    .horizon-card .horizon-marker {
        grid-column: 1 / -1;
        min-width: 0;
        margin: 0;
    }
    .horizon-card .scope-pill {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 0;
    }
    .scale-slider-track { height: 34px; }
    .scale-slider-thumb { width: 30px; height: 30px; font-size: 16px; }
    .scale-slider-end { font-size: 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .card, .orb, .hero-orb, .streak-flame, .kicker-dot, .save-indicator.saving .save-dot {
        animation: none;
    }
    .card { opacity: 1; transform: none; }
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* ─── Quick note panel (быстрая заметка из hero) ───
   Встроенный блок в общем потоке: раскрывается между hero и
   остальными секциями, мягко раздвигая контент вниз. Не floating-
   оверлей и не сворачивает соседние блоки. Визуально — из той же
   семьи, что карточка «пульса»: тот же радиус, тень и градиент. */
.quick-note {
    margin: var(--main-block-gap) 4px var(--main-block-gap);
    padding: 20px 24px 18px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.10), rgba(167, 139, 250, 0.06)),
        var(--surface-2);
    border: 1px solid var(--border-2);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-card), var(--inset-line);
    position: relative;
    z-index: 1;
    transform-origin: top center;
    animation: quickNoteIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-note:not([hidden]) + .pulse {
    margin-top: 0;
}
@keyframes quickNoteIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Tighter spacing on small screens (matches the .pulse mobile treatment).
   Placed after the base rule so it wins on equal specificity. */
@media (max-width: 980px) {
    .quick-note {
        margin: var(--main-block-gap-mobile) 0 var(--main-block-gap-mobile);
        padding: 18px 18px 16px;
    }
    .quick-note:not([hidden]) + .pulse {
        margin-top: 0;
    }
}
.quick-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.quick-note-icon {
    color: var(--accent-3);
    font-size: 23.2px;
    flex-shrink: 0;
}
.quick-note-title {
    flex: 1;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 21.8px;
    color: var(--text);
    letter-spacing: -0.2px;
}
.quick-note-close {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.quick-note-close svg { width: 16px; height: 16px; }
.quick-note-close:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}
.quick-note-area {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 19.3px;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.quick-note-area:focus {
    border-color: var(--border-glow);
    background: var(--surface-3);
}
.quick-note-area::placeholder {
    color: var(--text-4);
    font-style: italic;
}
.quick-note-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.quick-note-hint {
    margin: 0 4px;
    font-family: var(--font-mono);
    font-size: 14.1px;
    letter-spacing: 0.6px;
    color: var(--text-4);
}
.quick-note-done {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-glow);
    background: var(--accent-soft, var(--surface-3));
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.quick-note-done:hover {
    background: var(--surface-3);
    border-color: var(--border-glow);
    transform: translateY(-1px);
}
.quick-note-done:active { transform: translateY(0); }

/* ─── Pulse section toggle ─── */
.pulse.is-hidden { display: none; }

/* Тема переключается только в меню профиля (.theme-seg) — плавающей кнопки
   .theme-fab больше нет. */

/* Unified keyboard focus ring — matches .zone-tab/.scale-slider so these
   controls get the same visible outline instead of only the browser default. */
.sidebar-toggle:focus-visible,
.zone-tab-sub:focus-visible,
.add-row:focus-visible,
.tag-edit-btn:focus-visible,
.auth-tab:focus-visible,
.auth-link:focus-visible,
.plan-cancel:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: 3px;
}

/* ─── Stats zone (картина года) ─── */

:root {
    --mood-5: #65d6a3;
    --mood-4: #84cc16;
    --mood-3: #5aa3e0;
    --mood-2: #e69b53;
    --mood-1: #d65a5a;
    --mood-empty: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] {
    --mood-empty: rgba(43, 31, 77, 0.10);
}

.zone-kicker-stats { color: var(--mood-5); }
.zone-kicker-stats::before {
    background: var(--mood-5);
    box-shadow: 0 0 12px rgba(101, 214, 163, 0.55);
}

.zone-kicker-notes { color: var(--accent-3); }
.zone-kicker-notes::before {
    background: var(--accent-3);
    box-shadow: 0 0 12px rgba(243, 214, 164, 0.55);
}

.stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 18px;
}
.stats-year-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 23.2px;
    letter-spacing: 0.4px;
    min-width: 84px;
    justify-content: center;
    box-shadow: var(--inset-line);
}

.stats-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

.stats-card {
    padding: 26px 28px 24px;
}

.stats-radar-card {
    justify-self: center;
    width: min(100%, 1320px);
}

.stats-radar-card .card-head {
    position: relative;
}

.stats-radar-card .stats-month-nav {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    margin-left: 0;
}

@media (max-width: 900px) {
    .stats-radar-card .card-head {
        flex-wrap: wrap;
    }

    .stats-radar-card .stats-month-nav {
        position: static;
        order: 3;
        width: 100%;
        justify-content: center;
        transform: none;
        margin-left: 0;
    }
}

/* ── Month stats card ── */
.stats-month-card .card-head {
    align-items: center;
}
.stats-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.stats-month-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 18px;
    letter-spacing: 0.3px;
    min-width: 110px;
    justify-content: center;
    box-shadow: var(--inset-line);
}
.stats-month-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 14px;
}
.stats-month-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}
.stats-month-num {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1;
    color: var(--text);
}
.stats-month-face {
    font-size: 30px;
    line-height: 1;
}
.stats-month-cap {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-2);
}
/* «↑ 0.4» comparison with the previous week/month, injected by
   renderStatsDeltaChip next to the average. Polarity-aware coloring. */
.stats-delta-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: help;
}
.stats-delta-chip.is-good { color: var(--success); background: rgba(126, 226, 184, 0.12); }
.stats-delta-chip.is-bad  { color: var(--danger);  background: rgba(243, 163, 163, 0.12); }
.stats-month-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.stats-month-mood {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}
.stats-month-mood-face {
    font-size: 20px;
    line-height: 1;
}
.stats-month-mood-count {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-2);
}
.stats-month-mood[data-mood="5"] { border-color: rgba(101, 214, 163, 0.35); }
.stats-month-mood[data-mood="4"] { border-color: rgba(132, 204, 22, 0.30); }
.stats-month-mood[data-mood="3"] { border-color: rgba(90, 163, 224, 0.30); }
.stats-month-mood[data-mood="2"] { border-color: rgba(230, 155, 83, 0.30); }
.stats-month-mood[data-mood="1"] { border-color: rgba(214, 90, 90, 0.30); }
.stats-month-empty {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-2);
    text-align: center;
}

.zone-stats[data-stats-view="week"]  [data-stats-group="month"],
.zone-stats[data-stats-view="week"]  [data-stats-group="year"],
.zone-stats[data-stats-view="month"] [data-stats-group="week"],
.zone-stats[data-stats-view="month"] [data-stats-group="year"],
.zone-stats[data-stats-view="year"]  [data-stats-group="week"],
.zone-stats[data-stats-view="year"]  [data-stats-group="month"] {
    display: none !important;
}

/* Hide each scale on the periods it doesn't belong to. renderPulseGrid tags
   every block with a `scale--on-<period>` class for each period it's shown in;
   a block lacking the active period's class is hidden. Works for any subset —
   morning-only (seeded `sleep`), day+evening, all three, etc. */
.pulse-grid[data-period="morning"] .scale:not(.scale--on-morning),
.pulse-grid[data-period="day"] .scale:not(.scale--on-day),
.pulse-grid[data-period="evening"] .scale:not(.scale--on-evening) {
    display: none;
}

/* ── Pulse settings (gear in the section header → editor modal) ────── */
.pulse-head-aside {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pulse-settings-btn {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
}
.pulse-settings-btn:hover,
.pulse-settings-btn:focus-visible {
    color: var(--text);
}
.pulse-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* Pulse editor modal — list + per-scale form. Reuses the notes-overlay
   shell; everything specific is scoped under .pulse-editor-*. */
.pulse-editor-modal {
    max-width: 720px;
    width: min(100%, 720px);
}
.pulse-editor-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}
.pulse-editor-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--gold, #d6b87a);
    background: color-mix(in srgb, var(--gold, #d6b87a) 12%, transparent);
}
.pulse-editor-hint p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    flex: 1;
}
.pulse-editor-hint-dismiss {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    font-size: 18px;
    transition: color var(--t-fast);
}
.pulse-editor-hint-dismiss:hover,
.pulse-editor-hint-dismiss:focus-visible {
    color: var(--text);
}
.pulse-editor-tabs {
    display: inline-flex;
    gap: 6px;
    align-self: flex-start;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-2, rgba(255,255,255,0.04));
}
.pulse-editor-tab {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 6px 14px;
    font: inherit;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.pulse-editor-tab.is-active {
    background: var(--surface-3, rgba(255,255,255,0.08));
    color: var(--text);
}
.pulse-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pulse-editor-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}
.pulse-editor-row {
    display: grid;
    grid-template-columns: 22px 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.pulse-editor-row:hover {
    background: var(--surface-3, rgba(255,255,255,0.06));
}
.pulse-editor-row[draggable="true"] {
    cursor: grab;
}
.pulse-editor-row:focus-visible {
    outline: 2px solid var(--gold, #d6b87a);
    outline-offset: 2px;
    background: var(--surface-3, rgba(255,255,255,0.06));
}
.pulse-editor-row.is-dragging {
    opacity: 0.45;
}
.pulse-editor-row.is-drop-target {
    border-color: var(--gold, #d6b87a);
}
.pulse-editor-row-handle {
    color: var(--text-muted);
    text-align: center;
    user-select: none;
    line-height: 1;
}
.pulse-editor-row-emoji {
    font-size: 20px;
    text-align: center;
}
.pulse-editor-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pulse-editor-row-name {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-editor-row-meta {
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    gap: 6px;
}
.pulse-editor-row-actions {
    display: inline-flex;
    gap: 4px;
}
.pulse-editor-row-actions .icon-btn {
    width: 28px;
    height: 28px;
}
.pulse-editor-row-actions .icon-btn svg {
    width: 14px;
    height: 14px;
}
.pulse-editor-row-actions .icon-btn.is-on {
    color: var(--gold, #d6b87a);
}
.pulse-editor-row-actions .pulse-editor-link-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.pulse-editor-row-actions .pulse-editor-link-btn.is-on {
    background: color-mix(in srgb, var(--gold, #d6b87a) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold, #d6b87a) 30%, transparent);
}

.pulse-editor-row-link {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    min-width: 0;
}
.pulse-editor-row-link-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pulse-editor-link-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 150px;
    overflow: auto;
    padding-right: 4px;
}
.pulse-editor-link-choice {
    appearance: none;
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 10px;
    min-height: 34px;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pulse-editor-link-choice:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: var(--border-2);
}
.pulse-editor-link-choice.is-on {
    color: var(--ink, #15121f);
    background: var(--accent-3, #e1c27d);
    border-color: var(--accent-3, #e1c27d);
}
.pulse-editor-link-choice-icon {
    flex: 0 0 auto;
    line-height: 1;
}
.pulse-editor-link-choice-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-editor-link-empty {
    padding: 8px 0;
    text-align: left;
}

/* Inline scope-confirm shown when hiding a scale: replaces the row and spans
   all of its columns, offering "drop just this period" vs "archive everywhere". */
.pulse-editor-row-confirm {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.pulse-editor-row-confirm-label {
    color: var(--text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-editor-row-confirm-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.pulse-editor-confirm-btn {
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    background: var(--surface-2, rgba(255,255,255,0.04));
    color: var(--text);
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pulse-editor-confirm-btn:hover {
    background: var(--surface-3, rgba(255,255,255,0.08));
}
.pulse-editor-confirm-btn.is-primary {
    border-color: var(--gold, #d6b87a);
    color: var(--gold, #d6b87a);
}
.pulse-editor-confirm-btn.is-primary:hover {
    background: rgba(214, 184, 122, 0.12);
}
.pulse-editor-confirm-btn.is-danger {
    border-color: var(--danger, #f3a3a3);
    color: var(--danger, #f3a3a3);
}
.pulse-editor-confirm-btn.is-danger:hover {
    background: rgba(243, 163, 163, 0.12);
}
.pulse-editor-confirm-btn.is-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}
.pulse-editor-confirm-btn.is-ghost:hover {
    color: var(--text);
    background: var(--surface-2, rgba(255,255,255,0.04));
}

/* Radar toggle: larger SVG target than the text buttons because it carries
   meaning the user has to read on sight. Off-state dims the icon and adds
   a diagonal strikethrough so the "hidden from the chart" state is obvious.
   Selectors are scoped under .pulse-editor-row-actions so they match the
   text-button rule's specificity and the wider size sticks. */
.pulse-editor-row-actions .pulse-editor-radar-btn {
    width: 36px;
    height: 36px;
    position: relative;
    border-radius: 10px;
}
.pulse-editor-row-actions .pulse-editor-radar-btn svg {
    width: 22px;
    height: 22px;
}
.pulse-editor-row-actions .pulse-editor-radar-btn.is-on {
    color: var(--gold, #d6b87a);
    background: color-mix(in srgb, var(--gold, #d6b87a) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold, #d6b87a) 30%, transparent);
}
.pulse-editor-row-actions .pulse-editor-radar-btn:not(.is-on) {
    color: rgba(236, 233, 245, 0.40);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(236, 233, 245, 0.15);
}
.pulse-editor-row-actions .pulse-editor-radar-btn:not(.is-on)::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    height: 1.6px;
    background: currentColor;
    transform: rotate(-30deg);
    pointer-events: none;
    opacity: 0.9;
}

/* ── Radar axis controls inline on each stats card ───────────── */
/* The gear sits at the far right of the card head (flex pushes it via
   margin-left:auto). The chip panel slides in above the radar SVG. */
/* Standalone selector (no .icon-btn) so framework button rules can't
   constrain the size. Bigger by default — 40px — because the panel is
   the main affordance and we want the gear to read as a chunky control,
   not a decorative icon. */
.radar-axes-trigger {
    margin-left: auto;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: color 140ms, outline-color 140ms;
}
.radar-axes-trigger:hover,
.radar-axes-trigger:focus-visible {
    color: var(--gold, #d6b87a);
}
.radar-axes-trigger svg {
    width: 22px;
    height: 22px;
}

.radar-axes-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 0 0 0;
    padding: 0;
    transition: max-height var(--t-norm, 220ms),
                opacity var(--t-norm, 220ms),
                margin var(--t-norm, 220ms),
                padding var(--t-norm, 220ms);
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.025);
}
.radar-axes-panel.is-open {
    max-height: 280px;
    opacity: 1;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-color: rgba(214, 184, 122, 0.30);
}
.radar-axes-title {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-family: var(--font-mono, inherit);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.radar-axes-hint {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.75;
}
.radar-axes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.radar-axes-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color var(--t-fast),
                background var(--t-fast),
                border-color var(--t-fast),
                transform var(--t-fast);
}
.radar-axes-chip:hover {
    transform: translateY(-1px);
}
.radar-axes-chip-emoji {
    font-size: 15px;
    line-height: 1;
}
.radar-axes-chip.is-on {
    color: var(--gold, #d6b87a);
    border-color: color-mix(in srgb, var(--gold, #d6b87a) 50%, transparent);
    background: color-mix(in srgb, var(--gold, #d6b87a) 14%, transparent);
}
.radar-axes-chip:not(.is-on) .radar-axes-chip-name {
    text-decoration: line-through;
    text-decoration-color: rgba(236, 233, 245, 0.35);
}

/* "+ Добавить шкалу" — dashed-border variant so it reads as the additive
   action, not just another existing scale. Gold on hover invites the click. */
.radar-axes-chip-add {
    border-style: dashed;
    border-color: rgba(214, 184, 122, 0.40);
    color: var(--gold, #d6b87a);
    background: transparent;
}
.radar-axes-chip-add .radar-axes-chip-name {
    text-decoration: none;
}
.radar-axes-chip-add .radar-axes-chip-emoji {
    font-weight: 600;
}
.radar-axes-chip-add:hover {
    background: color-mix(in srgb, var(--gold, #d6b87a) 14%, transparent);
    border-color: color-mix(in srgb, var(--gold, #d6b87a) 60%, transparent);
}
.pulse-editor-add {
    align-self: flex-start;
    margin-top: 4px;
}
.pulse-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.pulse-editor-restore {
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 6px 8px;
    border-radius: 8px;
    transition: color var(--t-fast), background var(--t-fast);
}
.pulse-editor-restore:hover {
    color: var(--text);
    background: var(--surface-2, rgba(255,255,255,0.04));
}

/* Edit form (#U5) */
.pulse-editor-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pulse-editor-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pulse-editor-form-row label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pulse-editor-form-row input[type="text"],
.pulse-editor-form-row input:not([type]) {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text);
    font: inherit;
}
.pulse-editor-form-row input:focus-visible {
    outline: 2px solid var(--gold, #d6b87a);
    outline-offset: 2px;
}
.pulse-editor-form-inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pulse-editor-form-inline > .pulse-editor-form-row {
    flex: 1 1 200px;
}
.pulse-editor-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pulse-editor-chip {
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    transition: all var(--t-fast);
}
.pulse-editor-chip.is-on {
    background: var(--gold, #d6b87a);
    border-color: var(--gold, #d6b87a);
    color: var(--bg, #0d0d18);
}
.pulse-editor-emoji-row {
    padding: 10px 12px 12px;
    border: 1px solid rgba(214, 184, 122, 0.18);
    border-radius: 12px;
    background: rgba(214, 184, 122, 0.045);
}
.pulse-editor-emoji-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -2px;
}
.pulse-editor-emoji-target {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gold, #d6b87a);
    font-family: var(--font-mono);
    font-size: 12px;
}
.pulse-editor-emoji-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 7px;
    max-height: 146px;
    overflow-y: auto;
    padding-right: 3px;
}
.pulse-editor-emoji-option {
    width: 36px;
    height: 34px;
    justify-self: center;
    display: grid;
    place-items: center;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.pulse-editor-emoji-option:hover,
.pulse-editor-emoji-option:focus-visible {
    border-color: var(--gold, #d6b87a);
    background: rgba(214, 184, 122, 0.16);
    outline: none;
    transform: translateY(-1px);
}
.pulse-editor-levels {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pulse-editor-level-row {
    display: grid;
    grid-template-columns: 24px 72px minmax(220px, 1fr) 112px;
    gap: 8px;
    align-items: center;
}
.pulse-editor-level-row > .pulse-editor-level-rank {
    color: var(--text-muted);
    text-align: center;
}
.pulse-editor-form-error {
    color: #e07b6a;
    font-size: 13px;
    min-height: 1.2em;
}
.pulse-editor-radar-hint {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -2px 0 2px;
    padding: 9px 12px;
    border: 1px solid rgba(214, 184, 122, 0.18);
    border-radius: 10px;
    background: rgba(214, 184, 122, 0.045);
    font-size: 12.5px;
    line-height: 1.45;
}
.pulse-editor-radar-hint-line {
    color: var(--text-2);
    font-family: var(--font-mono);
}
.pulse-editor-radar-hint.is-warn {
    border-color: rgba(224, 123, 106, 0.5);
    background: rgba(224, 123, 106, 0.08);
}
.pulse-editor-radar-hint-warn {
    color: #e07b6a;
}
.pulse-editor-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

/* Tighter layout on small screens. */
@media (max-width: 640px) {
    .pulse-editor-row {
        grid-template-columns: 22px 28px 1fr auto;
        gap: 8px;
    }
    .pulse-editor-level-row {
        grid-template-columns: 24px 58px minmax(150px, 1fr);
    }
    .pulse-editor-level-row select { grid-column: 2 / -1; }
}

/* ── Scale picker chips ── */
.stats-scale-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Each half of the scales sits on its own centred row, so the picker reads
   as two balanced lines instead of one lopsided wrap. */
.stats-scale-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* When the picker is embedded as the top section of a stats card,
   give it a divider below so it visually belongs to the card without
   feeling fused with the data underneath. */
.stats-card > .stats-scale-picker {
    margin: -6px -4px 18px;
    padding: 0 4px 16px;
    border-bottom: 1px solid var(--border);
}
.stats-scale-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.stats-scale-chip:hover {
    background: var(--surface-2);
    color: var(--text);
    transform: translateY(-1px);
}
.stats-scale-chip.is-active {
    background: rgba(126, 226, 184, 0.14);
    border-color: rgba(126, 226, 184, 0.45);
    color: var(--text);
}
.stats-scale-chip-icon {
    font-size: 15px;
    line-height: 1;
}
.stats-scale-chip-label {
    line-height: 1;
}

.stats-section-heading {
    grid-column: 1 / -1;
    margin: 14px 0 4px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 12px;
}
.stats-section-heading::before,
.stats-section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border) 40%, var(--border) 60%, transparent);
}

/* ── Radar chart (aspects overview) ── */

.stats-radar-wrap {
    position: relative; /* anchors the click/tap .radar-tip */
    margin: 4px auto 6px;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 800 / 600;
}
.stats-radar {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.stats-radar .radar-grid {
    fill: none;
    stroke: var(--border);
    stroke-width: 1.15;
    opacity: 0.35;
}
.stats-radar .radar-grid-outer {
    stroke-width: 1.65;
    opacity: 0.8;
}
.stats-radar .radar-axis {
    stroke: var(--border);
    stroke-width: 1.15;
    opacity: 0.5;
}
.stats-radar .radar-label {
    fill: var(--text-2);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}
.stats-radar .radar-label.is-active {
    fill: var(--text);
    font-weight: 700;
}
.stats-radar .radar-shape {
    fill: rgba(126, 226, 184, 0.32);
    stroke: #7ee2b8;
    stroke-width: 2.6;
    stroke-linejoin: round;
}
.stats-radar .radar-point {
    fill: #fff;
    stroke: #7ee2b8;
    stroke-width: 2.6;
}
/* Inverted (negative-polarity) axes: a warm tint flags that the axis is
   read upside-down — outward still means "good", but the metric itself is a
   bad thing (anxiety, stress…). */
.stats-radar .radar-label-neg {
    fill: var(--accent-3);
}
.stats-radar .radar-point-neg {
    stroke: var(--accent-3);
}
/* Result tint: the label tells the verdict at a glance — green = this axis is
   in good shape, red = weak spot. Quality is polarity-aware (low irritability
   → green «Раздражительность ↓»). Listed after -neg so the verdict color wins
   over the gold inversion tint; the ↓ suffix still flags the inverted axis. */
.stats-radar .radar-label.radar-label-good,
.stats-radar .radar-label.radar-tone-good {
    fill: var(--mood-5);
}
.stats-radar .radar-label.radar-label-bad,
.stats-radar .radar-label.radar-tone-bad {
    fill: var(--mood-1);
}
.stats-radar .radar-label.radar-tone-mid {
    fill: var(--accent-3);
}
/* Weak spot: the shape is pulled toward the centre here (low mood, high
   anxiety…). Render it as a flagged signal, not a quiet dip. Listed after
   -neg so it wins when an inverted axis is also weak. */
.stats-radar .radar-point-weak {
    fill: var(--danger);
    stroke: var(--danger);
}
.stats-radar .radar-point.radar-tone-good {
    fill: #fff;
    stroke: var(--mood-5);
}
.stats-radar .radar-point.radar-tone-mid {
    fill: #fff;
    stroke: var(--accent-3);
}
.stats-radar .radar-point.radar-tone-bad {
    fill: var(--mood-1);
    stroke: var(--mood-1);
}
.stats-radar .radar-empty {
    fill: var(--text-3);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.4px;
}
/* Axes with no samples this period: dimmed label, no vertex/value drawn. */
.stats-radar .radar-label-nodata {
    opacity: 0.45;
}
/* The data shape is split into a stroke-less fill plus per-edge lines, so an
   edge that crosses a missing axis can be dashed instead of silently bridged. */
.stats-radar .radar-shape-fill {
    stroke: none;
}
.stats-radar .radar-edge {
    stroke: #7ee2b8;
    stroke-width: 2.6;
    stroke-linecap: round;
}
.stats-radar .radar-edge-gap {
    stroke-dasharray: 3 6;
    opacity: 0.6;
}
/* Previous period's outline — context, not data: faint and dashed. */
.stats-radar .radar-ghost {
    fill: var(--text-3);
    fill-opacity: 0.07;
    stroke: var(--text-3);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    stroke-linejoin: round;
    opacity: 0.7;
}
.stats-radar .radar-tappable { cursor: pointer; }
/* Click/tap tooltip (SVG <title> is hover-only, useless on touch). */
.radar-tip {
    position: absolute;
    z-index: 5;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}
/* Opt-in toggle for the previous-period ghost outline — keeps the radar
   uncluttered by default. */
.radar-compare-toggle {
    display: block;
    margin: 6px auto 4px;
    padding: 7px 16px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.radar-compare-toggle:hover {
    color: var(--text-2);
    border-color: var(--text-3);
}
.radar-compare-toggle.is-active {
    color: var(--text);
    border-style: solid;
    border-color: var(--text-3);
}

.stats-radar-card .radar-compare-toggle {
    margin-top: 4px;
    margin-bottom: 0;
}

/* Legend under the radar: decodes point colors / dashed lines. Rows render
   only when the matching visual is on the chart (see renderRadarLegend). */
.radar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin: 4px auto 10px;
    max-width: 900px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
}
.radar-legend .rl-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.radar-legend .rl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #7ee2b8;
}
.radar-legend .rl-dot--weak {
    background: var(--danger);
    border-color: var(--danger);
}
.radar-legend .rl-dot--neg {
    border-color: var(--accent-3);
}
.radar-legend .rl-line {
    width: 18px;
    height: 0;
    border-top: 2px dashed var(--text-3);
}
.radar-legend .rl-line--gap {
    border-color: #7ee2b8;
    opacity: 0.7;
}

/* ───────────────────────────────────────────────────────────
   Самоанализ (self-analysis) cards — rendered per period (week/month/year)
   into a .sa-block by renderSelfAnalysisBlock()
   ─────────────────────────────────────────────────────────── */
.sa-block {
    display: flex;
    flex-direction: column;
    gap: 18px;                 /* match .stats-grid gap */
}
.sa-block:empty { display: none; }

/* Consistency tiles */
.sa-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 6px;
}
.sa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}
.sa-tile-value {
    /* --font-display was never defined, so these big self-analysis numbers
       silently fell back to the browser's default serif. Use the app's
       display serif (Fraunces) like every other headline number. */
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.05;
}
.sa-tile-label {
    font-size: 11.5px;
    color: var(--text-3);
    letter-spacing: 0.2px;
}

/* Daily rhythm — scale cards in a two-column grid, one bar per time of day */
.sa-rhythm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 720px) {
    .sa-rhythm { grid-template-columns: minmax(0, 1fr); }
}
.sa-rhythm-row {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.sa-rhythm-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sa-rhythm-emoji { font-size: 17px; }
.sa-rhythm-name {
    font-weight: 600;
    color: var(--text);
    margin-right: auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-rhythm-peak {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--accent);
    white-space: nowrap;
}
.sa-rhythm-peak.is-best { color: var(--success); }
.sa-rhythm-peak.is-worst { color: var(--danger); }
.sa-rhythm-bars { display: flex; flex-direction: column; gap: 7px; }
.sa-rhythm-line {
    display: grid;
    grid-template-columns: 52px 1fr 38px;
    align-items: center;
    gap: 12px;
}
.sa-rhythm-period {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sa-rhythm-track {
    height: 9px;
    border-radius: 5px;
    background: var(--surface-3);
    overflow: hidden;
}
.sa-rhythm-bar {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent-2), rgba(167, 139, 250, 0.55));
    transition: width 0.4s ease;
}
.sa-rhythm-line.is-best .sa-rhythm-bar {
    background: linear-gradient(90deg, var(--success), rgba(126, 226, 184, 0.55));
}
.sa-rhythm-line.is-worst .sa-rhythm-bar {
    background: linear-gradient(90deg, var(--danger), rgba(243, 163, 163, 0.55));
}
.sa-rhythm-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-align: right;
}
.sa-rhythm-line.is-best .sa-rhythm-period,
.sa-rhythm-line.is-best .sa-rhythm-val { color: var(--success); }
.sa-rhythm-line.is-worst .sa-rhythm-period,
.sa-rhythm-line.is-worst .sa-rhythm-val { color: var(--danger); }

/* Header toggle (e.g. «скрыть пустые» on the momentum card). Sits at the right
   end of the card header. */
.sa-hide-toggle {
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sa-hide-toggle:hover { color: var(--text-2); border-color: var(--text-3); }
.sa-hide-toggle.is-active {
    color: var(--text);
    border-style: solid;
    border-color: var(--text-3);
}

/* Momentum + stability — two-column grid of cards. Each card stacks: a header
   line (name + delta + stability) over a full-width level bar, so names and
   bars stay legible at half width. Collapses to one roomy single-line row
   per card below 860px. */
.sa-momentum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.sa-mom-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 96px 126px;
    grid-template-areas:
        "emoji name  name  name"
        "emoji level delta stab";
    align-items: center;
    column-gap: 9px;
    row-gap: 9px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.sa-mom-emoji { grid-area: emoji; }
.sa-mom-name  { grid-area: name; }
.sa-mom-level { grid-area: level; }
.sa-mom-delta { grid-area: delta; }
.sa-mom-stab  { grid-area: stab; }
@media (max-width: 860px) {
    .sa-momentum { grid-template-columns: minmax(0, 1fr); }
    .sa-mom-row {
        grid-template-columns: 22px minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto;
        grid-template-areas: "emoji name level delta stab";
        column-gap: 12px;
    }
}
.sa-mom-emoji { font-size: 16px; text-align: center; }
.sa-mom-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-mom-level { display: flex; align-items: center; gap: 8px; }
.sa-mom-level-bar {
    position: relative;
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--surface-3);
    overflow: hidden;
}
.sa-mom-level-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent-3), var(--accent));
}
.sa-mom-level-val {
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: var(--text-2);
    min-width: 36px;
    text-align: right;
}
.sa-mom-delta, .sa-mom-stab {
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;
}
/* Fixed chip widths keep the delta/stab columns identical on every row, so the
   flexible name + level columns split the same leftover space and all bars
   begin (and end) at the same x. */
.sa-mom-delta { width: 96px; }
.sa-mom-stab  { width: 126px; }
.sa-mom-delta.is-good { color: var(--success); background: rgba(126, 226, 184, 0.12); }
.sa-mom-delta.is-bad  { color: var(--danger);  background: rgba(243, 163, 163, 0.12); }
.sa-mom-delta.is-flat { color: var(--text-2);  background: var(--surface-2); }
.sa-mom-delta.is-muted { color: var(--text-3); background: transparent; }
.sa-mom-stab { color: var(--text-2); border: 1px solid var(--border); }
.sa-mom-stab.is-steady   { color: var(--success); border-color: rgba(126, 226, 184, 0.3); }
.sa-mom-stab.is-volatile { color: var(--accent-rose); border-color: rgba(232, 164, 179, 0.3); }

/* Correlations */
.sa-corr { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sa-corr-row {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.sa-corr-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-corr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
}
.sa-corr-link { font-size: 16px; font-weight: 700; }
.sa-corr-link.is-pos { color: var(--success); }
.sa-corr-link.is-neg { color: var(--accent-rose); }
.sa-corr-meter {
    margin: 9px 0 7px;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
}
.sa-corr-meter > span { display: block; height: 100%; border-radius: 3px; }
.sa-corr-meter > span.is-pos { background: linear-gradient(90deg, rgba(126, 226, 184, 0.5), var(--success)); }
.sa-corr-meter > span.is-neg { background: linear-gradient(90deg, rgba(232, 164, 179, 0.5), var(--accent-rose)); }
.sa-corr-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
/* "Связь — не причина" footnote under the correlation list. */
.sa-corr-note {
    margin: 12px 2px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-3);
}

/* Alcohol next-day impact */
.sa-alcohol { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sa-alc-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.sa-alc-emoji { font-size: 16px; }
.sa-alc-name { font-weight: 600; color: var(--text); }
.sa-alc-vals { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.sa-alc-arrow { margin: 0 6px; color: var(--text-3); }
.sa-alc-delta {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.sa-alc-delta.is-good { color: var(--success); background: rgba(126, 226, 184, 0.12); }
.sa-alc-delta.is-bad  { color: var(--danger);  background: rgba(243, 163, 163, 0.12); }

/* Tag impact («Что влияет на состояние»): days with a tag vs days without.
   Row anatomy mirrors the alcohol card; groups sit under a tag-chip header. */
.sa-tags { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.sa-tag-group { display: flex; flex-direction: column; gap: 8px; }
.sa-tag-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sa-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.sa-tag-n {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.sa-tag-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.sa-tag-emoji { font-size: 16px; }
.sa-tag-name { font-weight: 600; color: var(--text); }
.sa-tag-vals { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.sa-tag-arrow { margin: 0 6px; color: var(--text-3); }
.sa-tag-delta {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.sa-tag-delta.is-good { color: var(--success); background: rgba(126, 226, 184, 0.12); }
.sa-tag-delta.is-bad  { color: var(--danger);  background: rgba(243, 163, 163, 0.12); }

/* Best / worst day highlights with a click-through to the diary */
.sa-days { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sa-day-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.sa-day-row.is-best  { border-color: rgba(126, 226, 184, 0.45); }
.sa-day-row.is-worst { border-color: rgba(243, 163, 163, 0.45); }
.sa-day-icon { font-size: 20px; }
.sa-day-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-day-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.sa-day-date { font-weight: 600; color: var(--text); }
.sa-day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text-2);
}
.sa-day-open {
    padding: 7px 14px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sa-day-open:hover { color: var(--text); border-color: var(--text-3); }

/* Depressive-episode occurrence log — one row per day an episode was felt,
   newest first: date + weekday on the left, period/intensity chips in the
   middle (the strongest period flagged red), «Открыть день» on the right.
   Reuses .sa-day-open for the button (incl. its mobile stacking rule). */
.sa-episodes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sa-ep-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.sa-ep-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-ep-date { font-weight: 600; color: var(--text); white-space: nowrap; }
.sa-ep-dow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sa-ep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-ep-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--text-2);
}
.sa-ep-chip.is-peak {
    border-color: rgba(243, 163, 163, 0.5);
    background: rgba(243, 163, 163, 0.08);
    color: var(--danger);
}
.sa-ep-period { color: var(--text-3); }
.sa-ep-chip.is-peak .sa-ep-period { color: var(--danger); }
.sa-ep-val { font-family: var(--font-mono); font-weight: 600; }
.sa-ep-summary { margin: 12px 2px 2px; font-size: 12.5px; color: var(--text-3); }
.sa-ep-trunc { color: var(--text-3); }

/* Inline empty hints inside self-analysis cards */
.sa-empty {
    margin: 8px 2px 2px;
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .sa-tiles { grid-template-columns: repeat(2, 1fr); }
    .sa-tile-value { font-size: 26px; }
    .sa-rhythm-line { grid-template-columns: 42px 1fr 30px; gap: 9px; }
    /* Stack the momentum row: emoji + name on the first line, the level bar
       full-width below, then the delta/stability chips wrap underneath. */
    .sa-mom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
    .sa-mom-name { flex: 1 1 auto; }
    .sa-mom-level { flex: 1 1 100%; order: 3; }
    .sa-mom-delta, .sa-mom-stab { order: 4; }
    /* Best/worst day + episode log: the «Открыть день» button drops to its
       own line (both rows reuse .sa-day-open, styled above). */
    .sa-day-row, .sa-ep-row { grid-template-columns: auto 1fr; }
    .sa-day-open { grid-column: 1 / -1; justify-self: start; }
}

.stats-mood-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 20px 0 8px;
}
.stats-mood {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 6px 4px;
    color: inherit;
    border-radius: var(--r-md);
    transition: background var(--t-fast), transform var(--t-fast);
}
/* Only the interactive year row (rendered as <button>) gets the click cues;
   the static week/month distribution rows must not look clickable. */
button.stats-mood {
    cursor: pointer;
}
button.stats-mood:hover {
    background: var(--surface);
    transform: translateY(-1px);
}
button.stats-mood:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: 3px;
}
.stats-mood.is-active {
    background: var(--surface-2);
}
.stats-mood-circle {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 25.8px;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4);
}
.stats-mood[data-mood="5"] .stats-mood-circle { background: var(--mood-5); }
.stats-mood[data-mood="4"] .stats-mood-circle { background: var(--mood-4); }
.stats-mood[data-mood="3"] .stats-mood-circle { background: var(--mood-3); }
.stats-mood[data-mood="2"] .stats-mood-circle { background: var(--mood-2); }
.stats-mood[data-mood="1"] .stats-mood-circle { background: var(--mood-1); }
.stats-mood-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-1);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14.1px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-2);
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3);
}
:root[data-theme="light"] .stats-mood-badge {
    background: rgba(255, 247, 240, 0.92);
}
.stats-mood-label {
    font-family: var(--font-mono);
    font-size: 12.9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--text-3);
}
.stats-mood-hint {
    margin: 4px 0 0;
    text-align: center;
    color: var(--text-3);
    font-size: 15.4px;
    font-style: italic;
}

.stats-insight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background:
        linear-gradient(135deg, rgba(101, 214, 163, 0.10), rgba(167, 139, 250, 0.06)),
        var(--surface);
    border: 1px solid rgba(101, 214, 163, 0.20);
}
.stats-insight-icon {
    font-size: 23.2px;
    line-height: 1.4;
    flex-shrink: 0;
}
.stats-insight-text {
    margin: 0;
    color: var(--text);
    font-size: 18.1px;
    line-height: 1.5;
}
.stats-insight-range {
    color: var(--text-3);
    font-size: 16.8px;
}
.stats-insight-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Second, softer insight line (the «трудный отрезок» streak). */
.stats-insight-soft {
    color: var(--text-2);
    font-size: 15.4px;
}

/* ── Line chart ── */

.stats-line-wrap {
    position: relative;
    margin: 18px 0 8px;
    padding-left: 28px;
}
.stats-line-faces {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 20.6px;
    line-height: 1;
    color: var(--text-3);
}
.stats-line {
    width: 100%;
    height: 220px;
    display: block;
    overflow: visible;
}
.stats-line .grid-row {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 2 7;
    vector-effect: non-scaling-stroke;
}
.stats-line .grid-row.is-mid {
    stroke: rgba(126, 226, 184, 0.28);
    stroke-dasharray: 5 6;
}
/* Faint minor ticks between the emoji anchors — reference resolution only. */
.stats-line .grid-row.is-minor {
    stroke: var(--border);
    stroke-opacity: 0.4;
    stroke-dasharray: 1 9;
}
/* Vertical day-group separators (week view: один столбец = один день). */
.stats-line .grid-col {
    stroke: var(--border);
    stroke-width: 1;
    stroke-opacity: 0.45;
    stroke-dasharray: 2 7;
    vector-effect: non-scaling-stroke;
}
/* Even-weight stroke + soft glow despite the stretched (non-uniform) viewBox. */
.stats-line-stroke {
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 5px rgba(126, 226, 184, 0.45));
}
.stats-line-fill { stroke: none; }
/* Mood line + area pull their color from the theme (CSS beats the SVG's inline
   stroke/fill), so the light beige theme gets a readable green instead of the
   dark-theme mint that was hardcoded as #7ee2b8 / rgba(126,226,184,.10). */
#stats-week-line-path,
#stats-month-line-path,
#stats-line-path { stroke: var(--mood-line); }
#stats-week-line-area,
#stats-month-line-area,
#stats-line-area { fill: var(--mood-line-area); }
/* Dashed centered moving-average overlay (month: window 7, year: window 3). */
.stats-line-trend {
    stroke: var(--text-3);
    stroke-width: 1.6;
    stroke-dasharray: 5 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.6;
}
/* Data points sit in an HTML overlay so they stay perfectly round (SVG circles
   would shear into ovals under preserveAspectRatio="none"). */
.stats-line-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.stats-line-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg-1);
    border: 2px solid #7ee2b8;
    box-shadow: 0 0 0 3px rgba(126, 226, 184, 0.12), 0 0 8px rgba(126, 226, 184, 0.45);
    transform: translate(-50%, -50%);
}
.stats-line-dot.is-latest {
    width: 12px;
    height: 12px;
    background: #7ee2b8;
    box-shadow: 0 0 0 4px rgba(126, 226, 184, 0.18), 0 0 16px rgba(126, 226, 184, 0.85);
}
/* Dots carry hover (title) + tap (attachChartTip) tooltips — re-enable
   pointer events that the overlay container switches off. */
.stats-line-dot.is-tappable {
    pointer-events: auto;
    cursor: pointer;
}
.stats-line-months {
    margin: 6px 0 0 28px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    font-family: var(--font-mono);
    font-size: 14.1px;
    color: var(--text-3);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Dots grid (year-in-dots) ── */

.stats-dots-wrap {
    margin: 16px 0 6px;
    overflow-x: auto;
}
.stats-dots-cols {
    display: grid;
    grid-template-columns: 28px repeat(12, 1fr);
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 14.1px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 8px;
    min-width: 520px;
}
.stats-dots-corner { display: block; }
.stats-dots-grid {
    display: grid;
    grid-template-columns: 28px repeat(12, 1fr);
    grid-template-rows: repeat(31, auto);
    grid-auto-flow: column;
    gap: 6px;
    min-width: 520px;
}
.stats-day-label {
    font-family: var(--font-mono);
    font-size: 12.9px;
    color: var(--text-4);
    text-align: right;
    padding-right: 6px;
    line-height: 16px;
}
.stats-dot {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 18px;
    border-radius: 50%;
    background: var(--mood-empty);
    justify-self: center;
    transition: transform var(--t-fast), filter var(--t-fast);
    cursor: default;
    /* Populated cells are <button>s (renderStatsDots) — neutralize UA styles
       so they render identically to the span cells. */
    padding: 0;
    border: 0;
    font: inherit;
}
.stats-dot[data-mood="5"] { background: var(--mood-5); }
.stats-dot[data-mood="4"] { background: var(--mood-4); }
.stats-dot[data-mood="3"] { background: var(--mood-3); }
.stats-dot[data-mood="2"] { background: var(--mood-2); }
.stats-dot[data-mood="1"] { background: var(--mood-1); }
.stats-dot.is-placeholder {
    visibility: hidden;
}
button.stats-dot { cursor: pointer; }
.stats-dot[data-mood]:hover {
    transform: scale(1.35);
    filter: brightness(1.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.stats-dot:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: 2px;
    transform: scale(1.35);
}
.stats-dots-grid.has-focus .stats-dot:not(.is-focus) {
    opacity: 0.18;
}
/* Keyboard focus must stay visible even on filter-dimmed dots. */
.stats-dots-grid.has-focus .stats-dot:not(.is-focus):focus-visible {
    opacity: 1;
}

.stats-mood-legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.stats-mood-legend .stats-mood-circle {
    width: 36px; height: 36px;
    font-size: 20.6px;
}
.stats-mood-legend-count {
    font-family: var(--font-serif);
    font-size: 28.3px;
    color: var(--text);
    margin-top: -4px;
}

/* ── Bar chart (weekday avg) ── */

.stats-bars-wrap {
    position: relative;
    margin: 18px 0 6px;
    padding-left: 28px;
}
.stats-bars-faces {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 20.6px;
    line-height: 1;
    color: var(--text-3);
}
.stats-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: stretch;
    gap: 12px;
    height: 180px;
}
/* Each bar is a faint full-height track; the fill grows inside it. */
.stats-bar {
    position: relative;
    width: 100%;
    align-self: stretch;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
}
.stats-bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #8ef0c6 0%, #5fcaa1 58%, rgba(95, 202, 161, 0.5) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px rgba(126, 226, 184, 0.28);
    transition: height 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-bar.is-best .stats-bar-fill {
    background: linear-gradient(180deg, #b6f8da 0%, #74e2b6 52%, rgba(116, 226, 182, 0.55) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 20px rgba(126, 226, 184, 0.55);
}
.stats-bar.is-best .stats-bar-fill::after {
    content: '⭐';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.stats-bar.is-empty .stats-bar-fill { display: none; }
.stats-bars-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin: 8px 0 0 28px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14.1px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Empty state ── */

.stats-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
}
.stats-empty[hidden],
.stats-insight[hidden] {
    display: none;
}

/* ── Error state (fetch failed — shares the empty-state shell) ── */

.stats-error { border-color: rgba(243, 163, 163, 0.5); }
.stats-retry {
    margin-top: 8px;
    padding: 8px 20px;
    font: inherit;
    font-size: 13px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.stats-retry:hover { color: var(--text); border-color: var(--text-3); }

/* Grid-wide failure with nothing cached: hide the cards/headings and leave
   only #stats-error on screen (toggled by renderStats). */
.stats-grid.has-error > .stats-card,
.stats-grid.has-error > .stats-section-heading,
.stats-grid.has-error > .sa-block { display: none; }

/* ── Cold-load skeleton ── */

/* Shimmer the cards while the FIRST payload is in flight. Refetches keep the
   previous data painted (renderStatsPending only engages when statsState.data
   is null), so a per-save refresh never flashes the zone. */
.stats-grid.is-loading .stats-card {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}
.stats-grid.is-loading .stats-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, var(--surface-2) 50%, transparent 75%);
    background-size: 250% 100%;
    opacity: 0.65;
    animation: stats-skeleton-shimmer 1.3s linear infinite;
}
@keyframes stats-skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -50% 0; }
}

/* ─── Tags card (чем ты занимался?) ─── */

/* Pulse-inline variant: tags live inside the pulse section, below the scales */
.pulse-tags {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--border);
}
.pulse-tags-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}
/* Только текстовый блок (заголовок+подзаголовок) растягивается и отжимает
   «шестерёнку» вправо. Без :first-child правило цепляло и .pulse-tags-head-aside
   (это тоже <div>), оба делили строку 50/50 и шестерёнка вставала по центру. */
.pulse-tags-head > div:first-child { flex: 1; min-width: 0; }
.pulse-tags-title {
    margin: 4px 0 2px;
    font-family: var(--font-serif);
    font-size: 28.3px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text);
}
.pulse-tags-sub {
    margin: 0;
    color: var(--text-3);
    font-size: 16.1px;
    font-style: italic;
}
.pulse-tags-count {
    font-family: var(--font-mono);
    font-size: 14.1px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 28px;
    text-align: center;
    align-self: flex-end;
}
.pulse-tags-count.is-on {
    color: var(--mood-5);
    background: rgba(101, 214, 163, 0.10);
    border-color: rgba(101, 214, 163, 0.30);
}

.tags-card .card-head {
    align-items: center;
}
.tags-add-cat {
    margin-left: auto;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--accent-3);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tags-add-cat:hover {
    background: rgba(101, 214, 163, 0.14);
    color: var(--mood-5);
    border-color: rgba(101, 214, 163, 0.40);
    transform: translateY(-1px);
}
.tags-add-cat svg { width: 16px; height: 16px; }

/* ─── «Чем ты занимался?» — НЕПРЕРЫВНЫЙ ПОТОК ТЕГОВ ────────────────────────────
   Все теги текут как текст в один общий ряд и переносятся ПОШТУЧНО (а не целым блоком);
   теги других блоков продолжают заполнять ту же строку. Имя блока — НЕ в строке с
   тегами, а в отдельной полосе НАД ними: метка-шапка имеет нулевую ширину (не толкает
   теги) и поднята в зарезервированную сверху полосу (см. margin-top у пилюль). Когда
   теги блока перенеслись на новую строку, имя повторяется над началом продолжения
   (reflowTagFlow() в app.js вставляет .tag-cat-head.is-repeat — тоже нулевой ширины,
   поэтому вставка НЕ меняет переносы).
   Технически: на блоках и их сетках стоит display:contents — коробки .tag-cat и
   .tag-cat-grid исчезают, а их содержимое (метка + пилюли) встаёт прямо в общий
   flex-поток контейнера. Элементы остаются в DOM, поэтому свёртывание, перетаскивание,
   счётчики и переименование работают по-прежнему. */
.tags-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* col-gap — между тегами; row-gap добавляется к полосе имени (margin-top пилюль). */
    gap: 14px 12px;
    margin-top: 8px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.025);
    /* Якорь для абсолютных меток-имён (см. .tag-cat-head). */
    position: relative;
}
:root[data-theme="light"] .tags-categories { background: rgba(43, 31, 77, 0.03); }

/* Блоки и их сетки «растворяются» — содержимое течёт в общий ряд контейнера. */
.tags-categories > .tag-cat,
.tags-categories > .tag-cat > .tag-cat-grid {
    display: contents;
}
/* Каждая пилюля резервирует полосу СВЕРХУ под имя блока (имя поднимается в неё). */
.tags-categories .tag-pill {
    margin-top: 30px;
}
/* Доп. зазор перед ПЕРВОЙ пилюлей каждого блока (кроме закреплённого «Шкалы дня»):
   отделяет блок от хвоста предыдущего и разводит подписи-имена, чтобы у коротких
   блоков с длинными именами метки не наезжали друг на друга. */
.tags-categories > .tag-cat:not(.tags-scales-pinned) > .tag-cat-grid > .tag-pill:first-child {
    margin-left: 22px;
}
/* Имя блока компактнее базового 21.8px, чтобы метка не доминировала над пилюлями
   (mono-заголовок «Шкалы дня» задаётся отдельно ниже). */
.tags-categories > .tag-cat:not(.tags-scales-pinned) .tag-cat-name {
    font-size: 18.5px;
}
.tags-categories .tag-cat-count {
    font-size: 11.5px;
    padding: 2px 6px;
    min-width: 18px;
}
.tags-categories .tag-cat-action {
    width: 24px;
    height: 24px;
}
/* Drop-target highlight: the block a tag would land in when dragged across blocks.
   Сам .tag-cat — display:contents (без коробки), поэтому подсвечиваем его метку-шапку:
   обводкой имени блока, к которому прилетит тег. */
.tag-cat.is-drop-target > .tag-cat-head .tag-cat-name {
    background: rgba(101, 214, 163, 0.14);
    box-shadow: 0 0 0 1.5px rgba(101, 214, 163, 0.55);
    border-radius: 6px;
}
/* Empty (just-created) custom block: a dashed drop zone with a hint, so a tag can
   be dragged in or added via «+ добавить тег». The hint vanishes once it has pills.
   Specificity raised above the display:contents rule above so an EMPTY grid stays a
   real box (the dashed hint), instead of dissolving into the flow. */
.tags-categories > .tag-cat > .tag-cat-grid:empty {
    min-height: 70px;
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
}
.tag-cat-grid:empty::after {
    content: 'перетащите сюда тег или нажмите «+ добавить тег»';
    padding: 8px 12px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    font-style: italic;
}

/* «+ добавить тег» / «+ добавить блок» sit side by side under the blocks. */
.tags-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.tags-add-row .tag-cat-add {
    flex: 1 1 200px;
    margin-top: 0;
}

/* «Шкалы дня» — the alcohol/stress level pickers. Looks like a .tag-cat block but
   is quieter (gold-tinted), always open, and has no chevron/edit/delete: these are
   whole-day 1–5 sliders, not toggleable tags. It now flows inline as the first
   block, on the same row level as the category blocks. */
/* Блоки прозрачные — единая заливка на контейнере (см. .tags-categories). «Шкалы
   дня» больше не подкрашиваются золотым фоном (различает только золотой заголовок). */
.tags-scales-pinned .tag-cat-name {
    font-size: 17px;
    color: var(--accent-3);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.tag-cat {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: transparent;
    padding: 10px 12px 10px;
    transition: border-color var(--t-fast);
}

/* Метка-имя блока позиционируется АБСОЛЮТНО (координаты считает reflowTagFlow в app.js)
   над первой пилюлей блока — на каждой его строке. Вне потока: НЕ толкает теги вбок и НЕ
   «отрывается» при переносе (координаты берём от самих пилюль, метка едет за ними). Полосу
   сверху под метку резервирует margin-top:30px у пилюль. */
.tag-cat-head {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 2;
}
.tag-cat-head > * { flex: 0 0 auto; }
/* Свёрнутый блок: пилюль нет — показываем шапку обычным inline-чипом в потоке (имя +
   шеврон), чтобы блок было видно и можно было развернуть. */
.tags-categories > .tag-cat.is-collapsed > .tag-cat-head {
    position: static;
    align-self: flex-start;
    margin-top: 30px;
}
/* Повтор имени блока над началом строки-продолжения: только имя, приглушённое, со
   стрелкой ↳ (без счётчика/шеврона/кнопок). Тоже нулевой ширины — не двигает теги. */
.tag-cat-head.is-repeat {
    opacity: 0.62;
}
.tag-cat-head.is-repeat .tag-cat-name {
    padding: 0;
    font-style: italic;
}
.tag-cat-head.is-repeat .tag-cat-name::before {
    content: '↳ ';
    font-style: normal;
    opacity: 0.7;
}

/* Grip handle to drag a whole block and reorder it. Faint by default, brighter on
   block hover, so the affordance is discoverable without cluttering the header. */
.tag-cat-drag {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 24px;
    margin-left: -4px;
    color: var(--text-3);
    cursor: grab;
    border-radius: 6px;
    opacity: 0.35;
    transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.tag-cat:hover .tag-cat-drag { opacity: 0.7; }
.tag-cat-drag:hover { opacity: 1; color: var(--text); background: var(--surface); }
.tag-cat-drag:active { cursor: grabbing; }
.tag-cat-drag svg { width: 15px; height: 15px; }
/* The block being dragged, and the insertion side on a hovered target. Блоки —
   display:contents, поэтому индикаторы вешаем на их видимую шапку-метку. */
.tag-cat.is-dragging-block > .tag-cat-head { opacity: 0.45; }
.tag-cat.is-drop-before > .tag-cat-head { box-shadow: -7px 0 0 -5px rgba(101, 214, 163, 0.9); }
.tag-cat.is-drop-after > .tag-cat-head { box-shadow: 7px 0 0 -5px rgba(101, 214, 163, 0.9); }

/* ── Режим редактирования (общая «шестерёнка» #tags-settings-btn) ──────────────
   По умолчанию у блоков не показываем кнопки переименовать/удалить, ручку
   перетаскивания и строку «+ добавить» — вид чистый, только отмечаем теги. Клик по
   шестерёнке включает .is-editing на #sec-tags и открывает все эти элементы. */
#sec-tags:not(.is-editing) .tag-cat-rename,
#sec-tags:not(.is-editing) .tag-cat-delete,
#sec-tags:not(.is-editing) .tag-cat-drag,
#sec-tags:not(.is-editing) .tags-add-row {
    display: none;
}
.pulse-tags-head-aside {
    display: flex;
    align-items: center;
    gap: 8px;
}
#tags-settings-btn.is-active {
    color: var(--accent-3);
    background: var(--surface);
    border-color: var(--border-2);
}
.tag-cat-name {
    font-family: var(--font-serif);
    font-size: 21.8px;
    color: var(--text);
    letter-spacing: 0.1px;
    flex: 0 0 auto;
    margin: 0;
    border: none;
    background: transparent;
    padding: 2px 4px;
    border-radius: 6px;
    /* Название НЕ переносится: одна строка. Блок подгоняется под него по ширине
       (sizeTagBlocks учитывает ширину шапки), поэтому имя всегда влезает целиком. */
    white-space: nowrap;
    line-height: 1.15;
    transition: background var(--t-fast);
    outline: none;
}
.tag-cat-name:focus {
    background: var(--surface);
}
.tag-cat-count {
    font-family: var(--font-mono);
    font-size: 12.9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 22px;
    text-align: center;
    /* Имя теперь по своей ширине (не flex:1), поэтому отжимаем счётчик и кнопки
       вправо, к краю шапки. */
    margin-left: auto;
}
.tag-cat-count.is-on {
    color: var(--mood-5);
    background: rgba(101, 214, 163, 0.10);
    border-color: rgba(101, 214, 163, 0.30);
}

.tag-cat-action {
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.tag-cat-action:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}
.tag-cat-action.is-danger:hover {
    color: var(--danger);
    border-color: rgba(243, 163, 163, 0.35);
}
.tag-cat-action svg { width: 14px; height: 14px; }

.tag-cat.is-collapsed .tag-cat-grid,
.tag-cat.is-collapsed .tag-cat-add {
    display: none;
}
.tag-cat.is-collapsed .tag-cat-toggle svg { transform: rotate(180deg); }
.tag-cat-toggle svg { transition: transform var(--t-fast); }

/* Базовое оформление сетки осталось для не-потоковых контекстов (пустой блок —
   см. правило :empty выше); в самом потоке сетка — display:contents, и эти свойства
   не применяются (пилюли становятся прямыми элементами .tags-categories). */
.tag-cat-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 8px;
}

.tag-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Фикс. ширина: в строке пилюли не сжимаются, подписи переносятся под кружком.
       В сетке (≤1100px / мобайл) flex-basis игнорируется — ячейку задаёт grid. */
    flex: 0 0 88px;
    gap: 6px;
    padding: 6px 4px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    color: var(--text-2);
    position: relative;
}
.tag-pill:hover { background: var(--surface); }
/* Reorder affordance: grab cursor on the draggable pills, and a faded,
   lifted look on the pill being dragged. */
.tag-pill[draggable="true"] { cursor: grab; }
.tag-pill.is-dragging {
    cursor: grabbing;
    opacity: 0.45;
    transform: scale(0.96);
}

.tag-pill-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 32px;
    border: 1.5px solid rgba(101, 214, 163, 0.55);
    color: var(--mood-5);
    background: rgba(101, 214, 163, 0.06);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.tag-pill:hover .tag-pill-circle {
    border-color: rgba(101, 214, 163, 0.85);
    transform: translateY(-1px);
}
.tag-pill.is-on .tag-pill-circle {
    background: var(--mood-5);
    border-color: var(--mood-5);
    color: #0e2e21;
    box-shadow: 0 8px 22px -10px rgba(101, 214, 163, 0.6);
}
:root[data-theme="light"] .tag-pill.is-on .tag-pill-circle {
    color: #ffffff;
}

.tag-pill-name {
    font-size: 14.8px;
    line-height: 1.25;
    color: var(--text-2);
    text-align: center;
    word-break: break-word;
    max-width: 80px;
}
.tag-pill.is-on .tag-pill-name {
    color: var(--text);
}

/* Period dots (утро/день/вечер) on tags with track_by_period — informational:
   filled where the tag is marked, with the active period ringed. */
.tag-pill-periods {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    pointer-events: none;
}
.tag-pill-period-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border-2);
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tag-pill-period-dot.is-marked {
    background: var(--mood-5);
    border-color: var(--mood-5);
}
.tag-pill-period-dot.is-current {
    transform: scale(1.34);
    box-shadow: 0 0 0 1.5px var(--bg-1);
}

/* Edit pencil — visible only when tag has is-custom flag */
.tag-pill-edit {
    position: absolute;
    top: 0;
    right: 4px;
    width: 18px; height: 18px;
    display: none;
    place-items: center;
    border-radius: 999px;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.9px;
    line-height: 1;
    padding: 0;
    transition: color var(--t-fast), background var(--t-fast);
}
.tag-pill:hover .tag-pill-edit {
    display: grid;
}
.tag-pill-edit:hover { color: var(--text); }
.tag-pill-edit svg { width: 10px; height: 10px; }

.tag-cat-add {
    margin-top: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: transparent;
    border: 1px dashed var(--border-2);
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 14.1px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tag-cat-add:hover {
    color: var(--mood-5);
    border-color: rgba(101, 214, 163, 0.42);
    background: rgba(101, 214, 163, 0.06);
}

/* ── Level-picker pills — live in the tags grid, look like .tag-pill but
       open a level modal on click instead of toggling. Dashed border on
       the circle (when no value is set) signals "this is a picker, not a
       boolean tag"; once a level is chosen the .is-on state mirrors a
       regular tag pill. ───────────────────────────────────────────────── */
.alcohol-pill .tag-pill-circle,
.stress-pill .tag-pill-circle {
    border-style: dashed;
}
.alcohol-pill.is-on .tag-pill-circle,
.stress-pill.is-on .tag-pill-circle {
    border-style: solid;
}

/* ── Level-picker modal (shared by alcohol, stress, future pickers) ─── */
.picker-hint {
    color: var(--text-3);
    font-size: 13px;
    margin: 0 0 14px;
}
.picker-levels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.picker-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.picker-level:hover {
    border-color: var(--border-3);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.picker-level:focus-visible {
    outline: 2px solid var(--mood-5, #65d6a3);
    outline-offset: 2px;
}
.picker-level-face {
    font-size: 28px;
    line-height: 1;
}
.picker-level-label {
    font-size: 13px;
    text-align: center;
    color: var(--text-2);
    font-weight: 500;
}
.picker-level-hint {
    font-size: 11px;
    text-align: center;
    color: var(--text-3);
    font-family: var(--font-mono);
    letter-spacing: 0.4px;
}
.picker-level.is-selected {
    border-color: var(--mood-5, #65d6a3);
    background: rgba(101, 214, 163, 0.1);
}
.picker-level.is-selected .picker-level-label {
    color: var(--text);
}
.picker-level.is-selected .picker-level-hint {
    color: var(--mood-5, #65d6a3);
}
.picker-actions {
    margin-top: 0;
}
#tag-scale-overlay {
    z-index: 320;
}
#tag-scale-overlay .picker-modal {
    position: relative;
    z-index: 1;
    background: var(--bg-2);
    border-color: var(--border-2);
}

/* ── Reference info block at the bottom of a picker modal (e.g. WHO AUDIT
       for the alcohol picker). Each picker can decide whether to include one. */
.picker-info {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-2);
}
.picker-info-title {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}
.picker-info-text {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.45;
}
.picker-info-text strong {
    color: var(--text);
    font-weight: 600;
}
.picker-info-text-muted {
    color: var(--text-3);
    margin-top: 12px;
}
.picker-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}
.picker-info-table th,
.picker-info-table td {
    padding: 8px 4px;
    text-align: left;
    border-bottom: 1px solid var(--border-2);
    color: var(--text-2);
}
.picker-info-table th {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
}
.picker-info-table th:last-child,
.picker-info-table td:last-child {
    text-align: right;
    font-family: var(--font-mono);
}
.picker-info-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 480px) {
    .picker-levels { gap: 4px; }
    .picker-level { padding: 10px 4px; }
    .picker-level-face { font-size: 24px; }
    .picker-level-label { font-size: 12px; }
    .picker-level-hint { font-size: 10px; }
    .picker-info { padding: 12px 14px; }
}

.tag-cat-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 640px) {
    .tags-card { padding: 18px 16px; }
    /* На телефоне — один столбец связных блоков (стопкой), под общей рамкой. */
    .tags-categories { flex-direction: column; }
    .tags-categories > .tag-cat { min-width: 0; }
    .tag-cat { padding: 12px 12px 14px; }
    /* На телефоне блок занимает всю ширину; теги переносятся на следующую строку
       (flex-wrap из базового правила). Меньше кружки и зазор, чтобы в строку влезало
       больше. */
    .tag-cat-grid { gap: 12px 8px; }
    .tag-pill-circle { width: 54px; height: 54px; font-size: 26px; }
    .tag-pill-name { font-size: 13.6px; }
    .pulse-tags { margin-top: 16px; padding-top: 16px; }
    .pulse-tags-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .pulse-tags-title { font-size: 25.8px; }
    .pulse-tags-count { align-self: flex-end; }
}
.stats-empty-icon {
    font-size: 30.9px;
    color: var(--accent-3);
}
.stats-empty-title {
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 25.8px;
}
.stats-empty-sub {
    margin: 0;
    font-size: 16.8px;
    max-width: 360px;
}

@media (max-width: 640px) {
    .stats-card { padding: 18px 16px; }
    .stats-mood-row { gap: 6px; }
    .stats-mood-circle { width: 38px; height: 38px; font-size: 23.2px; }
    .stats-mood-badge { min-width: 18px; height: 18px; font-size: 12.9px; }
    .stats-mood-label { font-size: 11.6px; letter-spacing: 1px; }
    .stats-line { height: 180px; }
    .stats-bars { height: 140px; }
    .stats-mood-legend .stats-mood-circle { width: 30px; height: 30px; font-size: 18.1px; }
    .stats-mood-legend-count { font-size: 23.2px; }
}

/* ─── Card-level collapsible (отдельные карточки можно сворачивать) ─── */

.is-card-collapsible .card-head {
    align-items: center;
}
.card-collapse-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    transition: transform var(--t-med), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.card-collapse-btn svg {
    width: 14px;
    height: 14px;
}
.card-collapse-btn:hover {
    background: rgba(196, 168, 122, 0.16);
    border-color: rgba(196, 168, 122, 0.4);
    color: var(--text);
}
.card-collapse-btn:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: 2px;
}
.is-card-collapsible:not(.is-collapsed) .card-collapse-btn {
    transform: rotate(180deg);
}
/* Reflection list cards (07/08) have no scope-pill before the chevron, so let
   the title block grow and push the collapse toggle to the far right. */
.list-card.is-card-collapsible:not(.horizon-card) .card-head > div {
    flex: 1;
    min-width: 0;
}

.card-collapse-body {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    transition: grid-template-rows var(--t-med) ease, opacity var(--t-fast) ease;
}
.card-collapse-body > .card-collapse-inner,
.card-collapse-body > * {
    min-height: 0;
}
.is-card-collapsible.is-collapsed .card-collapse-body {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}
.is-card-collapsible.is-collapsed .card-head {
    margin-bottom: 0;
}

/* ─── Week schedule (7 collapsible day cards) ─── */

.week-schedule-card .card-head {
    align-items: center;
}
.week-schedule-all {
    margin-left: auto;
    align-self: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 12.2px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.week-schedule-all:hover {
    background: rgba(196, 168, 122, 0.12);
    border-color: rgba(196, 168, 122, 0.4);
    color: var(--text);
}

.week-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.week-day {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.025);
    transition: border-color var(--t-fast), background var(--t-fast);
    overflow: hidden;
}
.week-day:hover {
    border-color: rgba(126, 226, 184, 0.3);
    background: rgba(126, 226, 184, 0.04);
}
.week-day.is-today {
    border-color: rgba(196, 168, 122, 0.4);
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.10), rgba(167, 139, 250, 0.05)),
        rgba(255, 255, 255, 0.03);
}
.week-day.is-today:hover {
    border-color: rgba(196, 168, 122, 0.55);
}
.week-day.is-weekend {
    background: rgba(167, 139, 250, 0.04);
}

.week-day-head {
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.week-day-head:focus-visible {
    outline: 2px solid var(--border-glow);
    outline-offset: -2px;
    border-radius: var(--r-md);
}

.week-day-dow {
    font-family: var(--font-mono);
    font-size: 12.6px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-3);
}
.week-day.is-today .week-day-dow {
    color: var(--accent-3, #c4a87a);
}
.week-day.is-weekend .week-day-dow {
    color: rgba(167, 139, 250, 0.85);
}

.week-day-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 18.5px;
    line-height: 1.2;
    color: var(--text);
}
.week-day-title .week-day-num {
    font-weight: 600;
    margin-right: 6px;
}
.week-day-title .week-day-month {
    color: var(--text-3);
    font-style: italic;
    font-size: 15.4px;
}

.week-day-badge {
    font-family: var(--font-mono);
    font-size: 11.4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-3, #c4a87a);
    padding: 2px 8px;
    border: 1px solid rgba(196, 168, 122, 0.3);
    border-radius: 999px;
}

/* Per-day task counter shown in the header (done/total), visible even when the
   day is collapsed so the week reads at a glance. */
.week-day-count {
    font-family: var(--font-mono);
    font-size: 11.6px;
    letter-spacing: 0.6px;
    color: var(--text-3);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
    white-space: nowrap;
    line-height: 1.3;
}
.week-day-count[hidden] {
    display: none;
}
.week-day-count.is-all-done {
    color: var(--accent, #7ee2b8);
    border-color: rgba(126, 226, 184, 0.35);
    background: rgba(126, 226, 184, 0.08);
}

.week-day-chevron {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-3);
    transition: transform var(--t-med), background var(--t-fast), color var(--t-fast);
}
.week-day-chevron svg {
    width: 12px;
    height: 12px;
}
.week-day-head:hover .week-day-chevron {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}
.week-day:not(.is-collapsed) .week-day-chevron {
    transform: rotate(180deg);
}

.week-day-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--t-med) ease;
}
.week-day.is-collapsed .week-day-body {
    grid-template-rows: 0fr;
}
.week-day-body-inner {
    overflow: hidden;
    min-height: 0;
}
.week-day-body-content {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.week-day-note {
    width: 100%;
    min-height: 56px;
    resize: none;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15.2px;
    line-height: 1.45;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.week-day-note::placeholder {
    color: var(--text-4);
    font-style: italic;
}
.week-day-note:focus {
    outline: none;
    border-color: rgba(126, 226, 184, 0.45);
    background: var(--surface-2);
}

.week-day-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.week-day-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12.4px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.week-day-jump:hover {
    background: rgba(196, 168, 122, 0.14);
    border-color: rgba(196, 168, 122, 0.45);
    color: var(--text);
}

.week-day-todos-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.week-day-todos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.week-day-todo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 6px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    position: relative;
}
.week-day-todo:hover {
    background: rgba(255, 255, 255, 0.035);
}
.week-day-todo .checkbox {
    width: 18px;
    height: 18px;
    margin-top: 6px;
    border-radius: 6px;
}
.week-day-todo .checkbox svg {
    width: 12px;
    height: 12px;
}
.week-day-todo .row-input {
    font-size: 15.4px;
    line-height: 1.45;
    min-height: 24px;
    padding: 3px 0;
}
.week-day-todo.completed .row-input {
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-color: var(--text-4);
}
.week-day-todo .row-delete {
    margin-top: 5px;
}

/* "Move to another date" control — a calendar button hiding a native date
   input. Only meaningful for unfinished tasks, so it's hidden once the row is
   completed. */
.week-day-move {
    position: relative;
    display: inline-flex;
    margin-top: 5px;
}
.week-day-todo.completed .week-day-move {
    display: none;
}
.week-day-move-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-3);
    cursor: pointer;
    opacity: 1;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.week-day-move-btn svg {
    width: 15px;
    height: 15px;
}
.week-day-move-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
}
/* Themed date-picker popover (replaces the unstyleable native date popup). */
.date-pop {
    position: fixed;
    z-index: 1200;
    width: 252px;
    padding: 12px 12px 13px;
    background:
        linear-gradient(180deg, var(--surface-2), transparent),
        var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top left;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.date-pop.open {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.date-pop.leaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
}

.date-pop-head {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    margin-bottom: 10px;
}
.date-pop-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text);
    text-transform: capitalize;
}
.date-pop-nav {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-3);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.date-pop-nav svg { width: 15px; height: 15px; }
.date-pop-nav:hover {
    background: rgba(196, 168, 122, 0.14);
    border-color: var(--border-glow);
    color: var(--text);
}

.date-pop-dows {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.date-pop-dows span {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-4);
    padding: 2px 0;
}

.date-pop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.date-pop-day {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: 13.5px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.date-pop-day:hover {
    background: rgba(196, 168, 122, 0.16);
    color: var(--text);
}
.date-pop-day.muted {
    color: var(--text-4);
}
.date-pop-day.today {
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--border-glow);
}
.date-pop-day.selected,
.date-pop-day.selected:hover {
    background: var(--accent);
    color: var(--bg-0);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(196, 168, 122, 0.35);
}

.week-day-add-todo {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    margin-top: 2px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 14.4px;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.week-day-add-todo:hover {
    color: var(--accent-3, #c4a87a);
    background: rgba(196, 168, 122, 0.06);
    border-color: rgba(196, 168, 122, 0.22);
}
.week-day-add-todo-plus {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}
.week-day-add-todo:hover .week-day-add-todo-plus {
    background: rgba(196, 168, 122, 0.14);
    color: var(--accent-3, #c4a87a);
}

@media (max-width: 640px) {
    .week-day-head {
        grid-template-columns: 44px 1fr auto auto;
        gap: 8px;
        padding: 8px 10px;
    }
    .week-day-badge { display: none; }
    .week-day-count {
        font-size: 10.8px;
        padding: 2px 6px;
    }
    .week-day-title { font-size: 16.4px; }
    .week-day-title .week-day-month { font-size: 13.6px; }
    .week-day-body-content { padding: 2px 10px 12px; }
}

/* ─── Year-months calendar ───────────────────────────────────
   12-month overview where each month carries its own goal-list.
   Lives inside .year-months-card; rows mirror .horizon-card .goal-row. */
.year-months-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.year-months-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.025);
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.year-months-item:hover {
    border-color: rgba(126, 226, 184, 0.3);
    background: rgba(126, 226, 184, 0.04);
}
.year-months-item.is-current {
    border-color: rgba(196, 168, 122, 0.45);
    background:
        linear-gradient(135deg, rgba(196, 168, 122, 0.10), rgba(167, 139, 250, 0.05)),
        rgba(255, 255, 255, 0.03);
}
.year-months-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.year-months-item-name {
    font-family: var(--font-serif, serif);
    font-size: 18px;
    color: var(--text);
    letter-spacing: 0.2px;
}
.year-months-goals { margin: 0; padding: 0; list-style: none; }
.year-months-card .add-row { margin-top: 2px; }
.year-months-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.year-months-card.is-card-collapsible.is-collapsed [data-year-months-nav] {
    display: none;
}

.year-months-embed {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.year-months-embed .card-head { margin-bottom: 10px; }
.year-months-embed h3.card-title { font-size: 19.5px; margin: 0; }
.year-months-embed .card-hint { font-size: 14px; }
.year-months-embed.is-card-collapsible.is-collapsed .card-head { margin-bottom: 0; }

/* Вся шапка календаря — кликабельный переключатель «раскрыть все месяцы». */
.year-months-embed-head { cursor: pointer; border-radius: var(--r-sm); }
.year-months-embed-head:hover h3.card-title { color: var(--accent, #c4a87a); }
.year-months-embed-head .year-months-nav,
.year-months-embed-head [data-card-collapse-toggle] { cursor: pointer; }
.year-months-embed .card-collapse-btn { width: 36px; height: 36px; }

@media (max-width: 760px) {
    .year-months-list { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Notes modal ─── */
.notes-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: rgba(11, 9, 26, 0.62);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    animation: notesOverlayIn 220ms ease-out;
}
.notes-overlay[hidden] { display: none; }

/* Lock body scroll whenever any modal overlay is open. Centralizes what used to
   be ad-hoc JS (only the notes modal + pulse editor toggled body.overflow). Every
   overlay shares the .notes-overlay base class and the `hidden` attribute, so one
   :has() rule covers them all — notes, tag editor, confirm, the level pickers,
   the pulse editor, load-error — with no risk of a missed unlock. */
/* #notes-overlay is excluded: it's a non-modal floating panel, so the page
   behind it must stay scrollable. The real modals (tag editor, confirm, pickers,
   pulse editor, load-error) still lock body scroll. */
body:has(.notes-overlay:not([hidden]):not(#notes-overlay)) { overflow: hidden; }

/* Notes is a free-floating, draggable, NON-modal panel — not a popup. The
   overlay layer keeps `position: fixed; inset: 0` from the base class but lets
   pointer events fall straight through (pointer-events: none), so clicking or
   scrolling anywhere on the page behind it works normally and never closes the
   panel; only the panel itself re-captures input. The panel floats as a rounded
   card, is dragged by its header, and remembers its last position (app.js).
   Scoped to #notes-overlay only — the shared .notes-overlay / .notes-modal
   classes stay centered + modal for the tag editor, confirm dialog, level
   pickers, pulse editor and load-error modal. */
#notes-overlay {
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
    pointer-events: none;
}
#notes-overlay .notes-modal {
    pointer-events: auto;
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: min(480px, calc(100vw - 32px));
    height: clamp(440px, 82vh, 820px);
    max-height: none;
    /* Frosted-glass panel. DARK theme (this base rule): tuned to blend with the
       regular cards instead of standing out. Cards use a faint --surface fill +
       plain blur (no saturate); the notes panel previously used the lighter, more
       saturated --bg-2 plus saturate(150%), which boosted the colorful orbs
       behind it and made it read as a brighter purple block. Now it uses the
       app's darkest base --bg-1 (less saturated, closer to the page tone), plain
       blur with NO saturate, and the subtle --border like the cards. The lighter,
       accent-nudged LIGHT treatment is in the override just below. */
    background: color-mix(in srgb, var(--bg-1) 70%, transparent);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    /* Layered depth: inset top sheen + a tight contact shadow + a soft long
       shadow + a hairline ring. */
    box-shadow: var(--inset-line),
                0 8px 24px -12px rgba(0, 0, 0, 0.5),
                0 32px 80px -32px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--border);
    transform-origin: bottom left;
    /* Entrance is one-shot via #notes-overlay.is-opening (Notes redesign block
       below) so the RESTING panel carries no `animation` — that's what lets the
       mobile sheet-drag own the inline translateY without the keyframe replaying.
       `none` here also overrides the shared `.notes-modal { animation: notesModalIn }`
       (less specific) which would otherwise leak a fade onto this panel. */
    animation: none;
}
/* LIGHT theme keeps the lavender panel nudged toward the violet accent, with the
   slightly stronger border + saturate that suited it. */
:root[data-theme="light"] #notes-overlay .notes-modal {
    background: color-mix(in srgb,
        color-mix(in srgb, var(--bg-2) 90%, var(--accent-2)) 80%, transparent);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-color: var(--border-2);
}
/* Fixed-height panel, so its list scrolls inside the body instead of growing the
   modal. Scoped to #notes-overlay — .notes-modal-body is reused by overlays that
   size to their content. */
#notes-overlay .notes-modal-body { flex: 1 1 auto; min-height: 0; }
/* The header doubles as the drag handle. */
#notes-overlay .notes-modal-head {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#notes-overlay.is-dragging .notes-modal-head { cursor: grabbing; }
/* While dragging, drop ONLY the backdrop blur — it has to re-sample the whole
   area behind the panel on every move, which is the sole cause of the drag jank
   (the plain shadow was always smooth). Everything else (background, shadow,
   animation, will-change) is left untouched on purpose: changing them on release
   used to re-trigger the entrance animation and resize the shadow, which made the
   panel "jump"/settle abruptly. Now releasing only fades the blur back in. */
#notes-overlay.is-dragging .notes-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Notes uses an SVG glyph (others keep their emoji), so size it like the other
   header icons and let it inherit the accent color via currentColor. */
#notes-overlay .notes-modal-icon { display: inline-flex; }
#notes-overlay .notes-modal-icon svg { width: 22px; height: 22px; display: block; }
/* Notes redesign keyframes. */
@keyframes notesPanelIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.965); filter: blur(5px); }
    55%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes notesPanelOut { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes notesFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spineDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes notesItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes notesSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes notesSheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes notesScrimIn { from { opacity: 0; } to { opacity: 1; } }

.load-error-modal {
    width: min(420px, 100%);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.load-error-icon { font-size: 40px; line-height: 1; }
.load-error-text { margin: 0; opacity: 0.78; font-size: 14px; }
.load-error-modal #load-error-retry { margin-top: 6px; }
@keyframes notesOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.notes-modal {
    width: min(640px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), var(--inset-line);
    overflow: hidden;
    animation: notesModalIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes notesModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.notes-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.notes-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.notes-modal-icon {
    color: var(--accent-3);
    font-size: 23.2px;
}
.notes-modal-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 23px;
    color: var(--text);
    letter-spacing: -0.2px;
    margin: 0;
}
/* "New note" button — lives in the notes-modal header, left of the close button.
   Accent-tinted so it reads as the primary action, unlike the muted close. */
.notes-modal-add {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.notes-modal-add svg { width: 16px; height: 16px; }
.notes-modal-add:hover {
    color: var(--text);
    border-color: var(--accent-3);
}
.notes-modal-close {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.notes-modal-close svg { width: 16px; height: 16px; }
.notes-modal-close:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}
.notes-modal-body {
    padding: 12px 22px 22px;
    overflow-y: auto;
}
.notes-modal-empty {
    margin: 32px 0;
    text-align: center;
    color: var(--text-4);
    font-style: italic;
}
.notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notes-list-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--t-fast), background var(--t-fast), opacity 220ms ease, transform 220ms ease;
    cursor: pointer;
    outline: none;
}
.notes-list-item:hover,
.notes-list-item:focus-visible {
    border-color: var(--border-glow);
    background: var(--surface-3);
}
.notes-list-item.is-editing {
    cursor: default;
    border-color: var(--border-glow);
    background: var(--surface-3);
    box-shadow: 0 0 0 1px var(--border-glow) inset;
}
.notes-list-item.is-leaving {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}
.notes-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.notes-list-date {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12.4px;
    letter-spacing: 0.6px;
    color: var(--accent-3);
    text-transform: uppercase;
}
.notes-list-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.notes-list-time {
    font-family: var(--font-mono);
    font-size: 12.4px;
    letter-spacing: 0.4px;
    color: var(--text-3);
}
.notes-list-edit-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.8px;
    color: var(--text-4);
    opacity: 0;
    transition: opacity var(--t-fast), color var(--t-fast);
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.notes-list-edit-hint svg { width: 13px; height: 13px; }
.notes-list-item:hover .notes-list-edit-hint,
.notes-list-item:focus-visible .notes-list-edit-hint {
    opacity: 0.85;
    color: var(--text-3);
}
.notes-list-text {
    margin: 0;
    color: var(--text);
    font-size: 16.4px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.notes-list-go {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--accent-3);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--t-fast);
}
.notes-list-go:hover { opacity: 1; }
/* In-place editor: the textarea is styled to be visually identical to the read
   text (.notes-list-text) — same font/size/line-height, flush position, no box —
   so tapping a note doesn't morph the card. You just get a blinking caret where
   you tapped plus the actions footer; the «editing» cue is the row's .is-editing
   surface, not a heavy field. Height is driven by autoresize(). */
.notes-list-textarea {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 16.4px;
    line-height: 1.55;
    resize: none;
    overflow: hidden;
}
.notes-list-textarea:focus {
    outline: none;
}
.notes-list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.notes-list-status {
    flex: 1;
    min-width: 120px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 11.8px;
    letter-spacing: 0.3px;
    color: var(--text-4);
    cursor: default;
    transition: color var(--t-fast);
}
.notes-list-status.is-saving { color: var(--text-3); }
.notes-list-status.is-saved { color: var(--accent-3); }
.notes-list-status.is-error { color: var(--danger); cursor: pointer; text-decoration: underline; }
.notes-list-changed {
    font-size: 11.4px;
    letter-spacing: 0.4px;
    color: var(--accent-3);
    opacity: 0.85;
    margin-left: 2px;
    margin-right: auto;
}
.notes-list-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.notes-list-btn:hover { border-color: var(--border-glow); background: var(--surface); }
.notes-list-btn:disabled { opacity: 0.6; cursor: progress; }
.notes-list-btn-primary {
    background: var(--accent-3);
    color: #1a1830;
    border-color: transparent;
    font-weight: 600;
}
.notes-list-btn-primary:hover { background: var(--accent-3); filter: brightness(1.08); border-color: transparent; }
.notes-list-btn-ghost { color: var(--text-3); }
.notes-list-revert[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Notes archive: search, tag filter, grouping, pinning ── */
.notes-modal-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 22px 10px;
}
.notes-search-wrap {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
}
.notes-search {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.notes-search:focus {
    outline: none;
    border-color: var(--border-glow);
    background: var(--surface);
}
.notes-search::placeholder { color: var(--text-4); }
.notes-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.notes-search-clear svg { width: 12px; height: 12px; }
.notes-search-clear:hover { color: var(--text); background: var(--surface-3); }
/* Author display beats the UA's [hidden] { display: none } — without this the
   JS `el.hidden = …` toggles do nothing (same pitfall as .scale-clear). */
.notes-search-clear[hidden],
.notes-filter-pill[hidden] { display: none; }
.notes-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-glow);
    background: var(--surface-3);
    color: var(--accent-3);
    font: inherit;
    font-size: 12.4px;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.notes-filter-pill:hover { background: var(--surface); }
.notes-filter-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-filter-pill-x { color: var(--text-3); font-size: 14px; line-height: 1; }
.notes-month-sep {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-1) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-mono);
    font-size: 11.6px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-3);
}
.notes-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.notes-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-3);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.notes-tag-chip:hover { border-color: var(--border-glow); color: var(--text); }
.notes-tag-chip.is-active {
    border-color: var(--border-glow);
    background: var(--surface-3);
    color: var(--accent-3);
}
.notes-list-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.notes-list-pin svg { width: 14px; height: 14px; display: block; }
.notes-list-item:hover .notes-list-pin,
.notes-list-item:focus-visible .notes-list-pin,
.notes-list-pin.is-pinned { opacity: 1; }
.notes-list-pin:hover { color: var(--text); background: var(--surface-3); }
.notes-list-pin.is-pinned { color: var(--accent-3); }
.notes-list-pin.is-pinned svg path:first-child { fill: currentColor; }
.notes-list-count {
    font-family: var(--font-mono);
    font-size: 11.6px;
    letter-spacing: 0.4px;
    color: #e8b35a;
}
.notes-list-count.is-limit { color: #ff8a8a; }
.notes-list-text mark.notes-mark {
    background: color-mix(in srgb, var(--accent-3) 30%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
/* View-mode «Перейти ко дню»: icon-only square like the pin (the full text
   label fits only in the roomier editor head), revealed on row hover/focus. */
.notes-list-go-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity var(--t-fast), background var(--t-fast);
}
.notes-list-item:hover .notes-list-go-icon,
.notes-list-item:focus-visible .notes-list-go-icon,
.notes-list-go-icon:focus-visible { opacity: 1; }
.notes-list-go-icon:hover { background: var(--surface-3); }
/* Keyboard parity: the pin/go buttons must not stay invisible while focused. */
.notes-list-pin:focus-visible { opacity: 1; }
/* Let the decorative hover hint shrink (its text clips) before the date or
   the icon buttons get squeezed on narrow rows. */
.notes-list-edit-hint { min-width: 0; }
.notes-list-edit-hint span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Clamp long notes to 4 lines in the read view; «развернуть» (added by JS
   only when the clamp actually hides text) lifts it via .is-expanded. */
.notes-list-item:not(.is-expanded) .notes-list-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notes-list-expand {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--t-fast);
}
.notes-list-expand:hover { color: var(--accent-3); }
/* Markdown-lite bits in the read view (renderNoteMarkdown). */
.notes-list-text a {
    color: var(--accent-3);
    text-decoration: none;
    word-break: break-all;
}
.notes-list-text a:hover { text-decoration: underline; }
.notes-list-text ul {
    margin: 2px 0;
    padding-left: 20px;
}
.notes-list-text li { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   Notes archive — redesign. One-shot entrance + gold bloom, glass
   sheen, an editorial timeline spine, a frosted command bar, chapter-
   rule separators, an editorial empty state, and the mobile bottom-
   sheet. Source-ordered AFTER the base notes rules so equal-specificity
   overrides win. Scoped to #notes-overlay / notes-only classes so the
   shared overlay chrome (tag editor, pickers, pulse editor) is untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Layered glass: a top sheen + a gold corner bloom (clipped by the panel's
   overflow:hidden). The bloom rests at full strength and fades IN on open. */
#notes-overlay .notes-modal::before,
#notes-overlay .notes-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}
#notes-overlay .notes-modal::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 120px);
}
#notes-overlay .notes-modal::after {
    opacity: 1;
    background: radial-gradient(120% 80% at 18% 0%,
        color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
}
/* Keep real content above the decorative pseudos. */
#notes-overlay .notes-modal > * { position: relative; z-index: 1; }

/* One-shot entrance (desktop): spring slide + scale + de-blur; bloom fades in
   slower so the glow "arrives" after the card settles. */
#notes-overlay.is-opening .notes-modal { animation: notesPanelIn var(--t-spring); }
#notes-overlay.is-opening .notes-modal::after { animation: notesFade var(--t-slow) ease-out; }
#notes-overlay.is-closing .notes-modal { animation: notesPanelOut 180ms ease-in forwards; }

/* Sheet grab handle — only on the mobile bottom-sheet. */
.notes-sheet-handle {
    display: none;
    width: 36px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: var(--border-2);
    flex: 0 0 auto;
    touch-action: none;
}

/* Header masthead: warm icon, count stamp, title glow, gold underline. */
#notes-overlay .notes-modal-head { position: relative; border-bottom-color: transparent; }
#notes-overlay .notes-modal-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
    pointer-events: none;
}
#notes-overlay .notes-modal-icon { color: var(--accent); }
:root[data-theme="dark"] #notes-overlay .notes-modal-title {
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent-3) 20%, transparent);
}
.notes-head-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-left: 2px;
}
.notes-head-count:empty { display: none; }
#notes-overlay .notes-modal-add:hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-3) 14%, transparent);
}

/* Command bar: a frosted strip holding search + count + filter pill. It already
   sits above the scroll body (flex layout), so no sticky is needed. */
.notes-modal-tools {
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--bg-1) 82%, transparent);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--border);
}
.notes-search-wrap::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background: var(--text-4);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    transition: background var(--t-fast);
}
.notes-search { padding: 8px 30px 8px 34px; }
.notes-search-wrap:focus-within::before { background: var(--accent); }
.notes-search:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.notes-count-chip {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.4px;
    color: var(--text-3);
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* Body: thin gold scrollbar + a soft bottom fade so the last row dissolves. */
#notes-overlay .notes-modal-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
#notes-overlay .notes-modal-body::-webkit-scrollbar { width: 7px; }
#notes-overlay .notes-modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 99px;
}

/* The card cascade is gated behind .is-fresh so it plays once (on open), not on
   every keystroke. The decorative timeline spine + dated-node dots were removed
   (they read as clutter); cards now run full-width with no left gutter. */
.notes-list { gap: 8px; }
.notes-list-item {
    position: relative;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    box-shadow: var(--inset-line);
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast), opacity 220ms ease, transform 220ms ease;
}
.notes-list.is-fresh .notes-list-item {
    animation: notesItemIn var(--t-slow) both;
    animation-delay: var(--stagger, 0ms);
}
/* :not(.is-editing) — the open inline editor keeps its dedicated surface
   (.is-editing, defined earlier) and must not lift/recolor on hover. */
.notes-list-item:not(.is-editing):hover,
.notes-list-item:not(.is-editing):focus-visible {
    transform: translateY(-1px);
    border-color: var(--border-glow);
    background: var(--surface-2);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5);
}
.notes-list-item:not(.is-editing):active { transform: translateY(0.5px); }

/* Date line: warm mono stamp · serif weekday · middot time. */
.notes-list-date { color: var(--accent); letter-spacing: 0.8px; font-size: 11.6px; }
.notes-list-weekday {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11.8px;
    color: var(--text-4);
}
.notes-list-time::before { content: '·'; margin-right: 7px; color: var(--text-4); }
.notes-list-text { line-height: 1.55; }
.notes-list-text strong { color: var(--accent-3); }
.notes-list-text em { font-family: var(--font-serif); font-style: italic; }
/* Touch devices have no hover — keep the row controls visible. */
@media (hover: none) {
    .notes-list-pin, .notes-list-go-icon { opacity: 0.9; }
}

/* Chapter-rule separators: serif-italic label · gold hairline · mono count. */
.notes-month-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
    padding: 4px 4px 4px 0;
    background: color-mix(in srgb, var(--bg-1) 90%, transparent);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
    border-radius: 6px;
}
.notes-month-sep .sep-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 32%, transparent), transparent 92%);
}
.notes-month-sep .sep-count {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    color: var(--accent);
}
.notes-month-sep .sep-pin { display: inline-flex; color: var(--accent-3); }
.notes-month-sep .sep-pin svg { width: 13px; height: 13px; }
.notes-month-sep.is-pinned .sep-rule { background: var(--border-glow); opacity: 0.55; }

/* Editorial empty-state vignette. */
.notes-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 18px 4px;
    padding: 44px 24px;
    text-align: center;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
}
.notes-empty:not([hidden]) { display: flex; }
.notes-empty-glyph { width: 40px; height: 40px; color: var(--text-4); opacity: 0.45; }
.notes-empty-title { font-family: var(--font-serif); font-size: 18px; color: var(--text-2); margin: 0; }
.notes-empty-sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.3px; color: var(--text-4); margin: 0; }

/* Seamless in-place editor (see the base .notes-list-textarea rule): no box on
   the field itself. The actions row keeps a separator so «Готово / Вернуть
   исходный» read as a distinct footer. At-a-glance save dot lives on the
   status element below. */
.notes-list-actions { border-top: 1px solid var(--border); padding-top: 10px; }
.notes-list-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--text-4);
    vertical-align: middle;
}
.notes-list-status.is-saving::before { background: var(--accent-3); }
.notes-list-status.is-saved::before { background: var(--success); }
.notes-list-status.is-error::before { background: var(--danger); }
.notes-list-btn-primary {
    background: linear-gradient(180deg, var(--accent-3), var(--accent));
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ── Mobile bottom-sheet (≤600px) ───────────────────────────── */
@media (max-width: 600px) {
    #notes-overlay {
        pointer-events: auto;
        background: rgba(7, 6, 26, 0.52);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        animation: notesScrimIn 220ms ease-out;
    }
    :root[data-theme="light"] #notes-overlay { background: rgba(43, 31, 77, 0.32); }
    #notes-overlay .notes-modal {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 88vh;
        height: 88svh;
        max-height: 88svh;
        border-radius: 24px 24px 0 0;
        transform-origin: bottom center;
        box-shadow: 0 -20px 60px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
    }
    #notes-overlay .notes-modal::after {
        background: radial-gradient(120% 50% at 50% 0%,
            color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%);
    }
    #notes-overlay.is-opening .notes-modal { animation: notesSheetUp 420ms cubic-bezier(0.16, 1, 0.3, 1); }
    #notes-overlay.is-closing .notes-modal { animation: notesSheetDown 260ms ease-in forwards; }
    /* While swiping / springing, JS owns the transform — kill animations so the
       entrance keyframe can't fight the inline translateY. */
    #notes-overlay.is-sheet-dragging .notes-modal { animation: none; transition: none; }
    #notes-overlay .notes-modal.is-snapping {
        animation: none;
        transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .notes-sheet-handle { display: block; }
    #notes-overlay .notes-modal-head { cursor: default; padding: 6px 16px 12px; }
    #notes-overlay .notes-modal-body { padding: 10px 16px 20px; }
    #notes-overlay .notes-modal-title { font-size: 19px; }
    /* Lock the page behind the sheet (the base lock rule excludes #notes-overlay). */
    body:has(#notes-overlay:not([hidden])) { overflow: hidden; }
}

/* ── Reduced motion: land every entrance at its end state ───── */
@media (prefers-reduced-motion: reduce) {
    #notes-overlay,
    #notes-overlay .notes-modal,
    #notes-overlay .notes-modal::after,
    .notes-list .notes-list-item { animation: none !important; }
    #notes-overlay .notes-modal { filter: none; }
    #notes-overlay .notes-modal::after { opacity: 1; }
    .notes-list-item:hover, .notes-list-item:focus-visible { transform: none; }
}

/* ── Tag editor modal ─────────────────────────────────────── */
.tag-edit-modal { width: min(520px, 100%); }
.tag-edit-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.tag-edit-body > * {
    flex-shrink: 0;
}
.tag-edit-label {
    font-size: 12.8px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
}
.tag-edit-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tag-edit-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
}
.tag-edit-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239b93b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
}
.tag-edit-select option { color: var(--text); background: var(--bg-2); }
.tag-edit-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    min-height: 132px;
    max-height: min(320px, 34vh);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.tag-edit-emoji-cat {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 4px 2px;
}
.tag-edit-emoji-cat:first-child { padding-top: 0; }
.tag-edit-emoji-btn {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tag-edit-emoji-btn:hover { background: var(--surface-2); }
.tag-edit-emoji-btn.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05);
}
/* ── Tag editor: 5-point scale block ─────────────────────── */
/* «Когда отмечать» — сегментированный выбор из двух взаимоисключающих опций
   (Весь день / Утро · День · Вечер). Под капотом — radio-инпуты, поэтому single-
   select, клавиатура и доступность работают «из коробки». Активный сегмент
   подсвечивается зелёным (--mood-5) — тем же цветом, что и точки-периоды на
   плашке тега, чтобы выбор «Утро · День · Вечер» визуально предсказывал их. */
.tag-edit-period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 4px 0 2px;
}
.tag-edit-period-opt {
    position: relative;
    display: flex;
    margin: 0;
    cursor: pointer;
}
.tag-edit-period-opt > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tag-edit-period-face {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tag-edit-period-opt:hover .tag-edit-period-face {
    border-color: var(--border-2);
}
.tag-edit-period-opt > input:checked + .tag-edit-period-face {
    border-color: rgba(101, 214, 163, 0.55);
    background: rgba(101, 214, 163, 0.10);
    box-shadow: inset 0 0 0 1px rgba(101, 214, 163, 0.35);
}
.tag-edit-period-opt > input:focus-visible + .tag-edit-period-face {
    border-color: var(--accent-3);
    box-shadow: 0 0 0 3px rgba(243, 214, 164, 0.25);
}
.tag-edit-period-opt-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.tag-edit-period-opt-sub {
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--text-3);
}

.tag-edit-scale-block {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tag-edit-scale-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.tag-edit-scale-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.tag-edit-scale-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tag-edit-scale-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.tag-edit-scale-sub {
    font-size: 12.5px;
    color: var(--text-3);
}
.tag-edit-scale-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}
.tag-edit-scale-labels[hidden] { display: none; }
.tag-edit-scale-hint {
    margin: 4px 0 2px;
    font-size: 12.5px;
    color: var(--text-3);
}
.tag-edit-scale-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tag-edit-scale-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tag-edit-scale-row-num {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
}
.tag-edit-scale-row-emoji {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.tag-edit-scale-row-emoji:hover {
    border-color: var(--accent);
    background: var(--bg-2);
}
.tag-edit-scale-row-emoji.is-empty {
    color: var(--text-4);
    font-size: 16px;
    opacity: 0.7;
}
.tag-edit-scale-row input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tag-edit-scale-row input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
}
.tag-edit-scale-reset {
    align-self: flex-start;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 12.5px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tag-edit-scale-reset:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* ── Per-level emoji picker popover ──────────────────────── */
.level-emoji-pop {
    position: fixed;
    z-index: 1200;
    width: 280px;
    max-width: calc(100vw - 16px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    animation: notesModalIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.level-emoji-pop[hidden] { display: none; }
.level-emoji-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.level-emoji-pop-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.level-emoji-pop-clear {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.level-emoji-pop-clear:hover {
    background: var(--surface-2);
    color: var(--text);
}
.level-emoji-pop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-1);
}
/* Reuse the icon-grid button styling for the popover's emoji buttons. */
.level-emoji-pop-grid .tag-edit-emoji-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
}

.tag-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.tag-edit-actions-spacer { flex: 1; }
.tag-edit-btn {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
    transition: all var(--t-fast);
}
.tag-edit-btn:hover { background: var(--surface-2); }
.tag-edit-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    border-color: transparent;
    color: #2b1e0a;
    font-weight: 600;
}
.tag-edit-btn-primary:hover { filter: brightness(1.05); }
.tag-edit-btn-ghost { background: transparent; }
.tag-edit-btn-danger {
    color: #e57373;
    border-color: rgba(229, 115, 115, 0.35);
}
.tag-edit-btn-danger:hover {
    background: rgba(229, 115, 115, 0.12);
    border-color: rgba(229, 115, 115, 0.6);
}

/* ───────── Confirm dialog (styled window.confirm replacement) ───────── */
.confirm-overlay {
    /* Sits above the tag editor (notes-overlay = 200) so it can stack on top. */
    z-index: 300;
}
.confirm-modal {
    width: min(380px, 100%);
    max-height: none;
    padding: 28px 26px 22px;
    text-align: center;
    align-items: center;
    gap: 14px;
}
.confirm-icon {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
}
.confirm-icon svg { width: 26px; height: 26px; }
.confirm-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 21px;
    color: var(--text);
    letter-spacing: -0.2px;
    margin: 0;
}
.confirm-message {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-2);
}
.confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}
.confirm-actions .tag-edit-btn { min-width: 110px; }
/* Confirm button reuses the subtle outlined danger style (.tag-edit-btn-danger)
   — soft red text, no loud fill — so the dialog reads as calm, not alarming. */

/* ───────── Auth (login / first-run setup) ───────── */

.auth-body {
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px 20px;
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 408px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    padding: 40px 38px 36px;
    text-align: center;
    animation: auth-rise var(--t-slow) both;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-mark {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 60%, #8a6f44 100%);
    box-shadow: var(--shadow-pop);
}

.auth-kicker {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-title {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    color: var(--text);
}

.auth-sub {
    margin: 0 auto 26px;
    max-width: 32ch;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-2);
}

.auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
}

.auth-tab {
    flex: 1;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-3);
    background: transparent;
    border: none;
    border-radius: calc(var(--r-md) - 5px);
    padding: 10px 12px;
    transition: color var(--t-fast), background var(--t-fast);
}

.auth-tab:hover { color: var(--text-2); }

.auth-tab.is-active {
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 70%);
}

.auth-form {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.auth-link {
    display: block;
    margin: 16px auto 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--text-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
}
.auth-link:hover { color: var(--accent-3); }
:root[data-theme="light"] .auth-link:hover { color: var(--accent); }

/* Prominent secondary button (e.g. "Тарифы" on the login screen) */
.auth-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 14px 18px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-3);
    background: var(--surface-2);
    border: 1px solid var(--border-glow);
    border-radius: var(--r-md);
    transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.auth-cta:hover { background: var(--surface-3); transform: translateY(-1px); }
:root[data-theme="light"] .auth-cta { color: var(--accent); }

.billing-card { max-width: 440px; }

.plan-trial-badge {
    display: inline-block;
    margin: 0 auto 20px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--success);
    background: rgba(126, 226, 184, 0.12);
    border: 1px solid rgba(126, 226, 184, 0.30);
    border-radius: 999px;
}

.pricing-foot {
    margin-top: 8px;
    text-align: center;
}
.pricing-foot .auth-link { color: var(--text-3); }

.auth-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-2);
    margin-bottom: 7px;
}

.auth-input {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 16px;
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.auth-input::placeholder { color: var(--text-4); }

.auth-input:focus {
    border-color: var(--border-glow);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(196, 168, 122, 0.16);
}

.auth-hint {
    margin: -4px 0 14px;
    font-size: 12.5px;
    color: var(--text-3);
}

.auth-error {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--danger);
    background: rgba(243, 163, 163, 0.10);
    border: 1px solid rgba(243, 163, 163, 0.30);
    border-radius: var(--r-sm);
    padding: 10px 13px;
}

.auth-submit {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 62%, #8a6f44 100%);
    border-radius: var(--r-md);
    padding: 15px 20px;
    margin-top: 4px;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}

.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }

.auth-foot {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--text-4);
}

@media (max-width: 480px) {
    .auth-card { padding: 32px 24px 28px; }
    .auth-title { font-size: 28px; }
}

/* ───────── Account / profile menu (bottom-left dropdown) ───────── */

.account-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 70%);
}

.account-avatar-lg { width: 38px; height: 38px; font-size: 16px; }

.account-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anchor for the upward-opening popover. */
.account {
    position: relative;
}

.account-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    padding: 9px 11px;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.account-trigger:hover {
    background: var(--surface-2);
    border-color: var(--border-glow);
}

.account-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.account-status {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-4);
    transition: transform var(--t-med), color var(--t-fast);
}

.account-trigger[aria-expanded="true"] { border-color: var(--border-glow); }
.account-trigger[aria-expanded="true"] .account-chevron {
    transform: rotate(180deg);
    color: var(--text-2);
}

/* The popover itself — floats above the trigger. */
.account-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    /* Never taller than the visible sidebar — on a very short viewport the
       upward popover would otherwise be clipped by the sidebar's overflow with
       no way to scroll to it (trigger is bottom-pinned). */
    max-height: calc(100vh - var(--topbar-h) - 96px);
    overflow-y: auto;
    padding: 8px;
    /* Must be fully OPAQUE — in dark theme --surface-3 is only ~10% white, so a
       translucent fill let the sidebar text bleed through. Solid base color +
       the surface tint painted on top keeps the elevated look while covering
       whatever is behind. Works in both themes (both vars are theme-defined). */
    background-color: var(--bg-1);
    background-image: linear-gradient(var(--surface-3), var(--surface-3));
    border: 1px solid var(--border-3);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), var(--shadow-pop);
    transform-origin: bottom center;
    animation: account-menu-in var(--t-fast);
}

.account-menu[hidden] { display: none; }

@keyframes account-menu-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.account-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px 12px;
    min-width: 0;
}

.account-menu-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.account-menu-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subscription/plan badge — colour keys off data-status set by app.js. */
.account-menu-plan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    padding: 2px 9px;
}

.account-menu-plan::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.account-menu-plan[data-status="active"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, transparent); }
.account-menu-plan[data-status="trialing"] { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }
.account-menu-plan[data-status="expired"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.account-menu-plan[data-status="open"] { color: var(--accent-3); border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); }
:root[data-theme="light"] .account-menu-plan[data-status="open"] { color: var(--accent); }

.account-menu-section { padding: 4px 8px 8px; }

.account-menu-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-4);
    margin-bottom: 7px;
}

/* Segmented theme switch. */
.theme-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.theme-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    background: transparent;
    border: none;
    border-radius: calc(var(--r-sm) - 4px);
    padding: 8px 6px;
    transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.theme-seg-btn svg { width: 16px; height: 16px; flex: none; }
.theme-seg-btn:hover { color: var(--text-2); }

.theme-seg-btn[aria-checked="true"] {
    color: var(--text);
    background: var(--surface-3);
    box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--border-2);
}

.account-menu-divider {
    height: 1px;
    margin: 4px 4px;
    background: var(--border);
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    padding: 10px 10px;
    transition: color var(--t-fast), background var(--t-fast);
}

.account-menu-item:hover { color: var(--text); background: var(--surface); }
.account-menu-item svg { width: 17px; height: 17px; flex: none; }
.account-menu-item span:first-of-type { flex: 1; }

.account-menu-chip {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    padding: 2px 8px;
}
.account-menu-chip[hidden] { display: none; }

.account-menu-item-danger:hover { color: var(--danger); }

.billing-modal { max-width: 460px; }

.plan-card {
    margin: 4px 0 0;
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 26px 24px;
    text-align: center;
}

.plan-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-3);
    margin-bottom: 12px;
}
:root[data-theme="light"] .plan-badge { color: var(--accent); }

.plan-name {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 26px;
    color: var(--text);
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 22px;
}

.plan-price-amount {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.plan-price-period { font-size: 15px; color: var(--text-3); }

.plan-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--text-2);
}

.plan-features li::before {
    content: '✓';
    color: var(--success);
    font-weight: 700;
    flex: none;
    margin-top: 1px;
}

.plan-cta {
    width: 100%;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 62%, #8a6f44 100%);
    border-radius: var(--r-md);
    padding: 15px 20px;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}

.plan-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.plan-cta:disabled { opacity: 0.6; cursor: default; transform: none; filter: none; }

.plan-status {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--text-3);
    text-align: center;
}

.plan-status.is-active { color: var(--success); }

.plan-cancel {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-3);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.plan-cancel:hover { color: var(--danger); }
.plan-note {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-4);
    text-align: center;
}

/* ───────────────────────────────────────────────────────────
   ИИ-психолог (раздел чата)
   ─────────────────────────────────────────────────────────── */
.zone-kicker-ai { color: var(--accent-2); }
.zone-kicker-ai::before {
    background: var(--accent-2);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.55);
}

.ai-chat { display: flex; flex-direction: column; }
.ai-chat-head { align-items: center; }
.ai-chat-head-text { flex: 1; min-width: 0; }
.ai-new-chat { margin-left: auto; flex-shrink: 0; }

.ai-convos { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.ai-convo {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
    max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-3);
    cursor: pointer; transition: background var(--t-fast), color var(--t-fast),
        border-color var(--t-fast);
}
.ai-convo:hover { background: var(--surface-2); color: var(--text); }
.ai-convo.is-active {
    background: linear-gradient(135deg, rgba(196, 168, 122, 0.20), rgba(167, 139, 250, 0.12));
    border-color: var(--border-glow); color: var(--text);
}

.ai-messages {
    display: flex; flex-direction: column; gap: 16px;
    min-height: 220px; max-height: 52vh; overflow-y: auto;
    padding: 6px 2px 10px;
}
.ai-msg { display: flex; max-width: 100%; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-ai { justify-content: flex-start; }
.ai-bubble {
    max-width: 80%; padding: 12px 16px; border-radius: var(--r-md);
    line-height: 1.62; font-size: 16px; box-shadow: var(--inset-line);
    word-wrap: break-word; overflow-wrap: anywhere;
}
.ai-msg-ai .ai-bubble {
    background: var(--surface-2); border: 1px solid var(--border);
    border-top-left-radius: 6px;
    font-family: var(--font-serif); font-size: 17.5px; color: var(--text);
}
.ai-msg-user .ai-bubble {
    background: linear-gradient(135deg, rgba(196, 168, 122, 0.22), rgba(167, 139, 250, 0.13));
    border: 1px solid rgba(196, 168, 122, 0.30);
    border-top-right-radius: 6px; color: var(--text);
}
.ai-bubble p { margin: 0 0 0.6em; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble strong { color: var(--accent-3); font-weight: 600; }
.ai-bubble em { color: var(--text-3); font-style: italic; }

.ai-dots { display: inline-flex; gap: 5px; padding: 3px 2px; }
.ai-dots span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2);
    animation: aiBreathe 1.3s ease-in-out infinite;
}
.ai-dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiBreathe {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

.ai-empty {
    margin: auto; text-align: center; max-width: 380px; padding: 24px 0;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: var(--text-3); font-size: 15px; line-height: 1.6;
}
.ai-empty p { margin: 0; }
.ai-empty-orb {
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(167, 139, 250, 0.65), rgba(196, 168, 122, 0.35));
    box-shadow: 0 14px 44px -10px rgba(167, 139, 250, 0.5);
    animation: aiFloat 5s ease-in-out infinite;
}
@keyframes aiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ai-composer {
    display: flex; align-items: flex-end; gap: 10px; margin-top: 14px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--r-lg); padding: 8px 8px 8px 16px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ai-composer:focus-within {
    border-color: var(--border-glow);
    box-shadow: 0 0 0 3px rgba(196, 168, 122, 0.12);
}
.ai-input {
    flex: 1; border: none; background: transparent; resize: none;
    color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
    max-height: 160px; padding: 6px 0;
}
.ai-input:focus { outline: none; }
.ai-input::placeholder { color: var(--text-4); }
.ai-send {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #1a1330;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.ai-send svg { width: 18px; height: 18px; }
.ai-send:not(:disabled):hover { transform: scale(1.06); }
.ai-send:disabled { opacity: 0.4; cursor: default; }
.ai-hint {
    margin: 8px 2px 0; text-align: center;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-4);
}

.ai-crisis {
    background: rgba(232, 164, 179, 0.08); border: 1px solid rgba(232, 164, 179, 0.32);
    border-radius: var(--r-md); padding: 16px 18px; margin: 4px 0;
    box-shadow: var(--shadow-card);
}
.ai-crisis-title { font-weight: 700; color: var(--accent-rose); margin-bottom: 6px; font-size: 16px; }
.ai-crisis-intro, .ai-crisis-outro { color: var(--text-2); font-size: 14px; margin: 0 0 12px; line-height: 1.55; }
.ai-crisis-outro { margin: 12px 0 0; }
.ai-crisis-lines { display: flex; flex-direction: column; gap: 10px; }
.ai-crisis-line { display: flex; flex-direction: column; gap: 2px; }
.ai-crisis-name { font-weight: 600; font-size: 14px; color: var(--text); }
.ai-crisis-phone { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--accent-rose); }
.ai-crisis-note { font-size: 12.5px; color: var(--text-3); }

@media (max-width: 600px) {
    .ai-bubble { max-width: 90%; }
    .ai-messages { max-height: 60vh; }
    .ai-convo { max-width: 150px; }
    .ai-chip { font-size: 12.5px; }
}

/* ── Апгрейд: подсказки, управление диалогами, копирование, стриминг ── */
.ai-head-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* Быстрые подсказки в пустом чате */
.ai-chips {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px;
}
.ai-chip {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--text-2); background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 999px;
    padding: 7px 14px; cursor: pointer; transition: all var(--t-fast);
}
.ai-chip:hover {
    color: var(--text); border-color: var(--border-glow);
    background: var(--surface-2); transform: translateY(-1px);
}

/* Список диалогов: заголовок + действия (переименовать/удалить) */
.ai-convo {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 4px 6px 4px 12px; max-width: 240px;
}
.ai-convo-title {
    flex: 1; min-width: 0; border: none; background: transparent; cursor: pointer;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
    color: inherit; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-convo-act {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-4); font-size: 11px; line-height: 1; padding: 3px 4px;
    border-radius: 6px; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ai-convo:hover .ai-convo-act, .ai-convo.is-active .ai-convo-act { opacity: 0.8; }
.ai-convo-act:hover { color: var(--text); background: var(--surface-3); opacity: 1; }
.ai-convo-del:hover { color: var(--danger); }

/* Кнопка копирования у ответа собеседника */
.ai-msg-ai { position: relative; flex-direction: column; align-items: flex-start; }
.ai-copy {
    align-self: flex-start; margin-top: 4px; margin-left: 2px;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-4); padding: 3px 6px; border-radius: 7px;
    display: inline-flex; align-items: center;
    opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ai-msg-ai:hover .ai-copy { opacity: 0.7; }
.ai-copy:hover { opacity: 1; color: var(--text); background: var(--surface-2); }

/* Мигающий курсор во время стриминга */
.ai-bubble.is-streaming p:last-child::after {
    content: '▍'; color: var(--accent); margin-left: 1px;
    animation: aiCaret 1s steps(1) infinite;
}
@keyframes aiCaret { 50% { opacity: 0; } }

/* Кнопка «сохранить в дневник» */
.ai-save-diary:not(:disabled):hover { color: var(--success); }
.ai-save-diary:disabled { opacity: 0.35; cursor: default; }

/* ════════════════════════════════════════════════════════════
   ИИ-ПСИХОЛОГ — иммерсивный режим («сворачиваем всё кроме него»)
   и премиальная «нейро-консоль». Когда зона ИИ открыта, body
   получает класс .ai-focus: остальные блоки прячутся, а собеседник
   разворачивается на весь экран как полноценное приложение.
   ════════════════════════════════════════════════════════════ */

/* Фокус-режим: гасим всё в main, кроме зоны ИИ-психолога. */
body.ai-focus .main > *:not(.zone-ai) { display: none !important; }
body.ai-focus .main { padding-top: clamp(20px, 4vw, 48px); padding-bottom: 28px; }
/* Подсветим выбранную вкладку в сайдбаре как «активный мозг» */
body.ai-focus .zone-tab[data-zone-tab="ai"] {
    box-shadow: 0 14px 44px -16px rgba(167, 139, 250, 0.6),
        0 0 0 1px rgba(167, 139, 250, 0.35), var(--inset-line);
}

/* ── Рабочее пространство ──────────────────────────────────── */
.ai-workspace {
    position: relative;
    border-radius: var(--r-xl);
    background:
        radial-gradient(720px 380px at 88% -8%, rgba(167, 139, 250, 0.14), transparent 60%),
        radial-gradient(620px 360px at 4% 108%, rgba(196, 168, 122, 0.12), transparent 62%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft), var(--inset-line);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    overflow: hidden;
    isolation: isolate;
}
.ai-workspace::before {
    /* тонкая «световая кромка» сверху — premium-блик */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%);
    mix-blend-mode: screen;
}
body.ai-focus .ai-workspace {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 110px);
}

/* ── Шапка сцены ───────────────────────────────────────────── */
.ai-stage-head {
    display: flex; align-items: center; gap: 18px;
    padding: 20px clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
    position: relative; z-index: 1;
}
.ai-exit {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 8px 14px 8px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ai-exit svg { width: 17px; height: 17px; }
.ai-exit:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-3); transform: translateX(-2px); }
.ai-exit:focus-visible { outline: 2px solid var(--border-glow); outline-offset: 3px; }

.ai-identity { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.ai-identity-text { min-width: 0; }
.ai-eyebrow {
    display: block; font-family: var(--font-mono); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 2.2px; color: var(--accent-2);
}
.ai-stage-title {
    margin: 3px 0 2px; font-family: var(--font-serif); font-weight: 500;
    font-size: clamp(26px, 3.4vw, 38px); line-height: 1.04; letter-spacing: 0;
    background: linear-gradient(96deg, var(--accent-3) 6%, #ffffff 38%, var(--accent-2) 88%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--accent-3);
}
/* В светлой теме белый средний стоп выцветает на бежевом фоне — берём тёмные
   акценты, чтобы заголовок оставался читаемым. */
[data-theme="light"] .ai-stage-title {
    background: linear-gradient(96deg, var(--accent) 4%, var(--accent-2) 52%, var(--accent) 96%);
}
.ai-stage-sub { margin: 0; color: var(--text-3); font-size: 13.5px; }
.ai-stage-sub-lead { color: var(--text-2); }
#ai-provider-label { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px; }

.ai-status {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    padding: 6px 12px; border-radius: 999px; align-self: center;
    background: rgba(126, 226, 184, 0.10); border: 1px solid rgba(126, 226, 184, 0.28);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--success);
}
.ai-status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 10px var(--success); animation: aiStatusPulse 2s ease-in-out infinite;
}
@keyframes aiStatusPulse { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

/* ── Нейро-сфера («мозг») ──────────────────────────────────── */
.ai-brain { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.ai-brain-glow {
    position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.55), transparent 66%);
    filter: blur(7px); animation: aiBrainPulse 3.4s ease-in-out infinite;
}
.ai-brain-core {
    position: absolute; inset: 15px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #f6e2bd 4%, #c4a87a 34%, #8b6fe0 78%, #6d57c2 100%);
    box-shadow: 0 0 26px rgba(167, 139, 250, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.45);
    animation: aiBrainPulse 3.4s ease-in-out infinite;
}
.ai-brain-ring {
    position: absolute; inset: 3px; border-radius: 50%;
    border: 1.5px solid rgba(196, 168, 122, 0.22); border-top-color: rgba(243, 214, 164, 0.92);
    animation: aiSpin 6s linear infinite;
}
.ai-brain-ring-2 {
    inset: 9px; border: 1.5px solid rgba(167, 139, 250, 0.2);
    border-bottom-color: rgba(167, 139, 250, 0.85); animation: aiSpin 4.2s linear infinite reverse;
}
.ai-brain-orbit { position: absolute; inset: 0; animation: aiSpin 5.2s linear infinite; }
.ai-brain-orbit i {
    position: absolute; top: -2px; left: 50%; margin-left: -3px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3);
    box-shadow: 0 0 9px var(--accent-3);
}
.ai-brain-orbit-2 { animation: aiSpin 7.6s linear infinite reverse; }
.ai-brain-orbit-2 i { top: auto; bottom: -2px; background: var(--accent-2); box-shadow: 0 0 9px var(--accent-2); }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiBrainPulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } }

/* ── Тело сцены: боковая колонка + чат ─────────────────────── */
.ai-stage-body {
    display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 18px; padding: clamp(16px, 2.2vw, 26px);
}
body.ai-focus .ai-stage-body { flex: 1; min-height: 0; }

.ai-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Панель осознанности — «что я вижу» */
.ai-awareness {
    border-radius: var(--r-lg); padding: 16px 16px 14px;
    background:
        linear-gradient(150deg, rgba(167, 139, 250, 0.10), rgba(196, 168, 122, 0.05)),
        var(--surface);
    border: 1px solid var(--border-2); box-shadow: var(--inset-line);
    position: relative; overflow: hidden;
}
.ai-awareness-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.ai-awareness-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center; color: var(--accent-2);
    background: rgba(167, 139, 250, 0.14); border: 1px solid rgba(167, 139, 250, 0.28);
}
.ai-awareness-icon svg { width: 19px; height: 19px; }
.ai-awareness-title { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--text); }
.ai-awareness-sub { margin: 1px 0 0; font-size: 12px; color: var(--text-3); }
.ai-awareness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-awareness-note {
    margin: 12px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--text-4);
    display: flex; gap: 6px;
}
.ai-awareness-note::before { content: '🔒'; font-size: 11px; opacity: 0.8; }

/* Чип данных */
.ai-aw-chip {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--border);
    /* easing задаём литералом: --t-slow это пара «длительность+кривая» для
       transition; в shorthand animation её 520ms попали бы в delay. */
    animation: aiChipIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.ai-aw-chip-wide { grid-column: 1 / -1; }
.ai-aw-chip-label {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-4);
}
.ai-aw-chip-value {
    font-family: var(--font-serif); font-size: 16.5px; line-height: 1.15; color: var(--text);
}
.ai-aw-chip-meta { font-size: 11px; color: var(--text-3); }
.ai-aw-chip[data-dir="better"] { border-color: rgba(126, 226, 184, 0.34); }
.ai-aw-chip[data-dir="better"] .ai-aw-chip-value { color: var(--success); }
.ai-aw-chip[data-dir="worse"]  { border-color: rgba(232, 164, 179, 0.34); }
.ai-aw-chip[data-dir="worse"]  .ai-aw-chip-value { color: var(--accent-rose); }
@keyframes aiChipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-awareness-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); line-height: 1.5; padding: 4px 2px; }

/* Список разговоров в боковой колонке */
.ai-rail {
    border-radius: var(--r-lg); padding: 14px 14px 12px;
    background: var(--surface); border: 1px solid var(--border);
    display: flex; flex-direction: column; min-height: 0; flex: 1;
}
.ai-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ai-rail-title { margin: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-4); }
.ai-rail .ai-convos { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0; overflow-y: auto; max-height: 280px; }
.ai-rail .ai-convo { max-width: none; width: 100%; }
.ai-rail .ai-convo-title { font-size: 12px; }

/* Чат в иммерсивном режиме растягивается на всю высоту */
body.ai-focus .ai-chat { min-height: 0; }
body.ai-focus .ai-messages { flex: 1; max-height: none; min-height: 0; }
.ai-stage-body .ai-chat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 18px clamp(14px, 1.8vw, 22px);
}

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ai-stage-body { grid-template-columns: 1fr; }
    .ai-aside { order: 2; }
    .ai-stage-body .ai-chat { order: 1; }
    .ai-rail .ai-convos { max-height: 200px; }
    body.ai-focus .ai-messages { flex: none; max-height: 56vh; }
    body.ai-focus .ai-workspace { min-height: 0; }
}
@media (max-width: 640px) {
    .ai-stage-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .ai-identity { order: 3; width: 100%; }
    .ai-status .ai-status-text { display: none; }
    .ai-status { padding: 6px; }
    .ai-stage-title { font-size: 25px; }
    .ai-awareness-grid { grid-template-columns: 1fr 1fr; }
    .ai-exit span { display: none; }
    .ai-exit { padding: 8px; }
}

/* ── Уважение к prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ai-brain-glow, .ai-brain-core, .ai-brain-ring, .ai-brain-ring-2,
    .ai-brain-orbit, .ai-brain-orbit-2, .ai-status-dot, .ai-aw-chip { animation: none; }
}