:root {
    color-scheme: light;
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #f7f9fb;
    --surface-3: #edf1f5;
    --text: #111827;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #d4dae2;
    --line-strong: #aeb8c5;
    --accent: #1268c4;
    --accent-strong: #0b56a4;
    --accent-soft: #e7f1fc;
    --success: #087a55;
    --success-soft: #e5f6ef;
    --warning: #a15c00;
    --warning-soft: #fff4df;
    --danger: #bd2734;
    --danger-soft: #fdebed;
    --info: #175cd3;
    --info-soft: #eaf2ff;
    --chart-grid: #dce2e9;
    --nav-height: 49px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --radius: 4px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #090d12;
    --surface: #121820;
    --surface-2: #0e141c;
    --surface-3: #1d2631;
    --text: #f7f9fc;
    --muted: #a5afbd;
    --muted-2: #748092;
    --line: #293340;
    --line-strong: #455163;
    --accent: #62a8f5;
    --accent-strong: #8fc2fa;
    --accent-soft: #172d47;
    --success: #57d3a4;
    --success-soft: #113529;
    --warning: #f5bd62;
    --warning-soft: #382811;
    --danger: #ff8d97;
    --danger-soft: #421b22;
    --info: #8bbcff;
    --info-soft: #172a44;
    --chart-grid: #2d3744;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg: #090d12;
        --surface: #121820;
        --surface-2: #0e141c;
        --surface-3: #1d2631;
        --text: #f7f9fc;
        --muted: #a5afbd;
        --muted-2: #748092;
        --line: #293340;
        --line-strong: #455163;
        --accent: #62a8f5;
        --accent-strong: #8fc2fa;
        --accent-soft: #172d47;
        --success: #57d3a4;
        --success-soft: #113529;
        --warning: #f5bd62;
        --warning-soft: #382811;
        --danger: #ff8d97;
        --danger-soft: #421b22;
        --info: #8bbcff;
        --info-soft: #172a44;
        --chart-grid: #2d3744;
    }
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.3;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
svg.icon, .icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 19px; line-height: 1.08; letter-spacing: -.02em; }
h2 { margin-bottom: 0; font-size: 14px; line-height: 1.2; }
h3 { margin-bottom: 0; font-size: 13px; }
small { font-size: 10px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.skip-link {
    position: fixed;
    z-index: 3000;
    top: 3px;
    left: 3px;
    padding: 5px 8px;
    transform: translateY(-160%);
    border-radius: var(--radius);
    background: var(--text);
    color: var(--surface);
}
.skip-link:focus { transform: none; }
.app-frame { min-height: 100vh; min-height: 100dvh; }
.page-content {
    width: min(100%, 900px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(6px + var(--safe-top)) 8px calc(var(--nav-height) + var(--safe-bottom) + 6px);
}
.is-guest .page-content { width: 100%; padding: 0; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.muted { color: var(--muted); }
.break-text { overflow-wrap: anywhere; }
.eyebrow { display: none; }
.narrow-page, .settings-page, .import-page, .import-preview-page, .import-result-page { width: min(100%, 760px); margin: 0 auto; }

.bottom-nav {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding: 2px max(8px, calc((100% - 720px) / 2)) var(--safe-bottom);
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.bottom-nav__item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}
.bottom-nav__item.is-active { color: var(--accent); }
.bottom-nav__icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.offline-banner {
    position: fixed;
    z-index: 1700;
    top: var(--safe-top);
    left: 50%;
    display: flex;
    min-height: 27px;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    transform: translateX(-50%);
    border: 1px solid var(--warning);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 10px;
    font-weight: 750;
}

.app-header, .compact-page-header {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
}
.app-header { justify-content: space-between; }
.compact-page-header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header__title { min-width: 0; }
.app-header__title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header__title > span { display: block; margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.section-header { justify-content: flex-start; }
.header-back, .compact-back {
    display: inline-flex;
    width: 29px;
    min-width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.page-heading { margin: 0 0 7px; }
.page-heading h1 { margin-bottom: 2px; }
.page-heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 10px; }
.back-link { display: inline-flex; min-height: 27px; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.section-heading { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.section-heading > h2, .section-heading h2, .section-heading p { margin-bottom: 0; }
.section-heading--compact { min-height: 19px; margin-bottom: 3px; }
.section-heading--compact > span { color: var(--muted); font-size: 9px; }
.section-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.section-block { margin-top: 8px; }

.button {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 720;
    line-height: 1;
    cursor: pointer;
}
.button:hover { border-color: var(--accent); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: default; opacity: .55; }
.button--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button--primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
.button--ghost { background: transparent; }
.button--danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.button--small { min-height: 27px; padding: 4px 7px; font-size: 10px; }
.button--large { min-height: 34px; padding: 6px 11px; }
.button--full { width: 100%; }
.icon-button {
    display: inline-flex;
    width: 27px;
    min-width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.icon-button:hover { background: var(--surface-3); color: var(--text); }
.icon-button--danger { color: var(--danger); }
.inline-actions, .dialog-actions, .page-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.page-actions { justify-content: center; margin: 8px 0; }
.text-link { color: var(--accent); font-size: 10px; font-weight: 700; }

.field { display: grid; min-width: 0; gap: 2px; }
.field__label { color: var(--muted); font-size: 9px; font-weight: 700; }
.field__label small { font-weight: 500; }
.field input, .field select, .field textarea, .range-toolbar select, .range-toolbar input, .import-toolbar select, .paste-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: 0;
    background: var(--surface);
    color: var(--text);
}
.field input, .field select, .range-toolbar select, .range-toolbar input, .import-toolbar select { height: 31px; padding: 4px 7px; }
.field textarea, .paste-field textarea { min-height: 62px; padding: 6px 7px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .range-toolbar select:focus, .range-toolbar input:focus, .paste-field textarea:focus:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.field--medium { max-width: 320px; }
.field--compact input, .field--compact select { height: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.form-grid__wide { grid-column: 1 / -1; }
.form-grid--settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--import { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack-form { display: grid; gap: 6px; }
.form-hint { margin: 0; color: var(--muted); font-size: 9px; }
.form-error { margin: 5px 0 0; color: var(--danger); font-size: 10px; font-weight: 700; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 34px; }
.password-toggle { position: absolute; top: 2px; right: 2px; }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 5px 0;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--info-soft);
    color: var(--info);
    font-size: 10px;
    font-weight: 650;
}
.alert--success { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.alert--warning { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.alert--error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.data-badge, .status-badge {
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
}
.data-badge--muted { opacity: .7; }
.status-badge--valid, .status-badge--imported, .status-badge--completed, .status-badge--ok, .status-badge--imported_warning { background: var(--success-soft); color: var(--success); }
.status-badge--warning, .status-badge--processing { background: var(--warning-soft); color: var(--warning); }
.status-badge--error { background: var(--danger-soft); color: var(--danger); }
.status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--muted-2); }
.status-dot--completed, .status-dot--imported, .status-dot--valid, .status-dot--ok { background: var(--success); }
.status-dot--warning, .status-dot--processing, .status-dot--imported_warning { background: var(--warning); }
.status-dot--error { background: var(--danger); }

/* Login and offline */
.auth-page { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 12px; }
.auth-card { width: min(100%, 310px); padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.brand-lockup { display: flex; align-items: center; gap: 7px; }
.brand-lockup--center { justify-content: center; margin-bottom: 10px; }
.brand-lockup img { width: 34px; height: 34px; }
.brand-name { font-size: 17px; font-weight: 800; }
.brand-tagline { color: var(--muted); font-size: 9px; }
.auth-copy { margin: 10px 0 7px; text-align: center; }
.offline-page { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 12px; }
.offline-state { display: grid; justify-items: center; gap: 8px; }
.offline-state img { width: 44px; height: 44px; }
.offline-state h1 { margin: 0; }

/* Entry */
.entry-page { display: grid; width: min(100%, 430px); margin: 0 auto; align-content: start; gap: 5px; overflow: hidden; }
.entry-hero { position: relative; display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 5px; }
.entry-title { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
.entry-title h1 { font-size: 18px; }
.child-line { display: flex; min-width: 0; align-items: baseline; gap: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.child-line strong { color: var(--text); font-size: 10px; }
.reference-time { position: relative; }
.time-chip { display: inline-flex; min-height: 27px; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 9px; font-weight: 700; }
.time-chip .icon { width: 14px; height: 14px; color: var(--accent); }
.reference-popover { position: absolute; z-index: 50; top: 31px; right: 0; width: min(235px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 22px rgba(15, 23, 42, .16); }
.quick-grid { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 82px; gap: 6px; align-content: start; justify-content: center; }
.quick-card {
    --tone: var(--accent);
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 2px solid var(--tone);
    border-radius: 3px;
    background: var(--surface);
}
.quick-card:active { border-color: var(--tone); }
.quick-card__main { display: flex; width: 100%; height: 100%; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 7px 5px 5px; background: transparent; color: var(--text); cursor: pointer; }
.quick-card__main:active { background: var(--surface-3); }
.quick-card__icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--tone); }
.quick-card__icon .icon { width: 30px; height: 30px; stroke-width: 1.9; }
.quick-card__copy { display: flex; max-width: 100%; min-width: 0; align-items: center; flex-direction: column; gap: 0; }
.quick-card__copy strong { display: block; max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 760; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.quick-card__copy small { display: block; max-width: 100%; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.quick-card .option-button { position: absolute; z-index: 2; top: 2px; right: 2px; display: inline-flex; width: 22px; min-width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 2px; background: transparent; color: var(--muted-2); cursor: pointer; }
.quick-card .option-button:hover { background: var(--surface-3); color: var(--text); }
.quick-card .option-button .icon { width: 14px; height: 14px; }
.tone-green { --tone: #07845f; }
.tone-blue { --tone: #1474d4; }
.tone-peach { --tone: #df5427; }
.tone-lavender { --tone: #7357d7; }
.tone-sand { --tone: #8b4ec4; }
.tone-ochre { --tone: #d63255; }
.tone-mint { --tone: #008aa3; }
.tone-rose { --tone: #d02f83; }
.import-cta { display: grid; min-height: 29px; grid-template-columns: 17px 1fr 14px; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 9.5px; }
.import-cta__icon { width: 16px; height: 16px; }
.import-cta > .icon:last-child { width: 13px; height: 13px; }
.last-entry { min-height: 47px; padding: 3px 5px; overflow: hidden; }
.last-entry .section-heading { min-height: 16px; margin: 0; }
.last-entry .section-heading h2 { font-size: 9px; color: var(--muted); }
.last-entry .section-heading .button { min-height: 19px; padding: 1px 4px; font-size: 8px; }
.last-entry .section-heading .button .icon { width: 12px; height: 12px; }
.last-entry__row { display: grid; min-height: 27px; grid-template-columns: 23px minmax(0, 1fr) 25px; align-items: center; gap: 4px; }
.last-entry__row > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 5px; }
.last-entry__row > div small { grid-column: 1 / -1; color: var(--muted); font-size: 7.5px; line-height: 1; }
.last-entry__row strong { overflow: hidden; font-size: 9px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.last-entry__row time { color: var(--muted); font-size: 8px; white-space: nowrap; }
.last-entry__row .icon-button { width: 24px; min-width: 24px; height: 24px; }
.last-entry__row .icon-button .icon { width: 14px; height: 14px; }
.last-entry > .muted { margin: 7px 0 0; font-size: 9px; }
.event-icon { display: grid; width: 23px; min-width: 23px; height: 23px; place-items: center; border-radius: 3px; background: var(--surface-3); color: var(--accent); }
.event-icon .icon { width: 18px; height: 18px; }

/* Overview */
.overview-page { width: min(100%, 720px); margin: 0 auto; }
.overview-header { margin-bottom: 4px; }
.overview-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.overview-menu > a { display: grid; min-width: 0; min-height: 57px; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.overview-menu > a:hover { border-color: var(--accent); }
.overview-menu__icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--tone, var(--accent)); }
.overview-menu__icon .icon { width: 28px; height: 28px; stroke-width: 1.85; }
.overview-menu > a > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.overview-menu > a > span:nth-child(2) strong, .overview-menu > a > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-menu > a > span:nth-child(2) strong { font-size: 11px; }
.overview-menu > a > span:nth-child(2) small { color: var(--muted); font-size: 8.5px; }
.overview-menu__time { color: var(--muted); font-size: 8px; white-space: nowrap; }
.overview-menu__arrow { width: 14px; height: 14px; color: var(--muted); }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.dashboard-metrics > div { display: grid; min-width: 0; min-height: 37px; align-content: center; padding: 3px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); text-align: center; }
.dashboard-metrics small { color: var(--muted); font-size: 8px; }
.dashboard-metrics strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.overview-subnav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 4px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.overview-subnav a { display: flex; min-width: 0; min-height: 37px; align-items: center; justify-content: center; flex-direction: column; gap: 0; border-right: 1px solid var(--line); color: var(--muted); font-size: 7px; font-weight: 700; }
.overview-subnav a:last-child { border-right: 0; }
.overview-subnav a .icon { width: 17px; height: 17px; }
.overview-subnav a.is-active { background: var(--accent-soft); color: var(--accent); }
.range-toolbar { display: flex; min-height: 31px; align-items: center; gap: 4px; margin-bottom: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.range-toolbar > select { width: auto; min-width: 78px; height: 25px; padding: 2px 5px; font-size: 9px; }
.custom-range { display: none; min-width: 0; flex: 1; gap: 3px; }
.custom-range.is-visible { display: flex; }
.custom-range input { min-width: 0; height: 25px; padding: 2px 4px; font-size: 8.5px; }
.range-toolbar .button { min-height: 25px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 4px; }
.metric-card { display: grid; min-width: 0; min-height: 46px; align-content: center; padding: 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); text-align: center; }
.metric-card small { overflow: hidden; color: var(--muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.metric-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric-card span { overflow: hidden; color: var(--muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-section { margin-top: 5px; }
.sleep-switch { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sleep-switch a { min-height: 28px; padding: 6px 8px; border-right: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 700; text-align: center; }
.sleep-switch a:last-child { border-right: 0; }
.sleep-switch a.is-active { background: var(--accent); color: #fff; }
.sleep-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 4px; }
.sleep-metrics > div { display: grid; min-width: 0; min-height: 38px; align-content: center; padding: 3px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); text-align: center; }
.sleep-metrics small { color: var(--muted); font-size: 7.5px; }
.sleep-metrics strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.insight-list { display: grid; gap: 4px; }
.insight-card { padding: 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.insight-card time { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; }
.insight-card h2 { margin-bottom: 3px; font-size: 12px; }
.insight-card p { margin: 0; color: var(--muted); font-size: 10px; }
.insight-card p + p { margin-top: 4px; }
.insight-tip { padding-left: 6px; border-left: 2px solid var(--accent); color: var(--text) !important; }
.empty-state { display: grid; min-height: 70px; place-items: center; padding: 12px; color: var(--muted); text-align: center; }
.empty-state p { margin: 0; }
.empty-state__icon { width: 28px; height: 28px; }

/* Charts */
.chart-panel { overflow: hidden; padding: 5px; }
.chart-head { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.weight-current { display: flex; align-items: baseline; gap: 5px; }
.weight-current small { color: var(--muted); font-size: 8px; }
.weight-current strong { font-size: 13px; }
.chart-controls { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.chart-controls button { min-width: 29px; height: 27px; padding: 0 7px; border-right: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 750; cursor: pointer; }
.chart-controls button:last-child { border-right: 0; }
.chart-controls button:nth-child(2) { min-width: 45px; font-size: 8px; }
.chart-controls button:hover { background: var(--surface-3); }
.chart-canvas { position: relative; width: 100%; min-height: 184px; overflow: hidden; background: var(--surface); touch-action: none; }
.chart-canvas svg { width: 100%; height: auto; }
.chart-canvas--sleep { min-height: 260px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; }
.chart-canvas--sleep svg { min-width: 100%; width: auto; max-width: none; height: 270px; }
.chart-canvas--sleep.is-day-view { min-height: 224px; overflow: visible; touch-action: manipulation; }
.chart-canvas--sleep.is-day-view svg { display: block; width: 100%; min-width: 0; height: auto; }
.sleep-day-track { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.sleep-day-grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sleep-day-range-label { fill: var(--text); font-family: var(--font); font-size: 8.5px; font-weight: 750; }
.sleep-day-tick { fill: var(--muted); font-family: var(--font); font-size: 7px; }
.sleep-day-event { cursor: pointer; outline: none; }
.sleep-day-block { stroke: rgba(0, 0, 0, .18); stroke-width: .7; vector-effect: non-scaling-stroke; }
.sleep-day-block--sleep { fill: #327fd2; }
.sleep-day-block--wake { fill: #efb13c; }
.sleep-day-block-label { fill: #fff; font-family: var(--font); font-size: 7.5px; font-weight: 750; pointer-events: none; }
.sleep-day-block-label--wake { fill: #2d2410; }
.sleep-day-event:hover .sleep-day-block, .sleep-day-event:focus .sleep-day-block, .sleep-day-event.is-selected .sleep-day-block { stroke: var(--text); stroke-width: 2; }
.sleep-day-event.is-selected .sleep-day-block { filter: brightness(1.08); }
.sleep-day-detail { min-height: 28px; margin: 3px 2px 0; padding: 6px 8px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 2px; background: var(--surface-2); color: var(--text); font-size: 9px; font-weight: 700; }
.sleep-day-empty { display: grid; min-height: 42px; place-items: center; margin-top: -55px; padding: 8px; color: var(--muted); font-size: 9px; text-align: center; }
html[data-theme="dark"] .sleep-day-block { stroke: rgba(255, 255, 255, .16); }
.chart-loading { display: grid; min-height: 184px; place-items: center; color: var(--muted); font-size: 10px; }
.chart-legend, .sleep-legend { display: flex; min-height: 21px; align-items: center; gap: 10px; color: var(--muted); font-size: 8px; }
.chart-legend { justify-content: flex-end; }
.sleep-legend { justify-content: center; margin-bottom: 1px; }
.chart-legend span, .sleep-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot--lex { border: 1px solid #fff; background: #0b6fd3; box-shadow: 0 0 0 1px #075aa9; }
.legend-line { width: 16px; height: 0; border-top: 2px solid #7ba7d8; }
.legend-swatch { width: 11px; height: 7px; border-radius: 1px; }
.legend-swatch--sleep { background: #327fd2; }
.legend-swatch--unknown { background: repeating-linear-gradient(45deg, #8190a3 0 2px, transparent 2px 4px); border: 1px solid #8190a3; }
.legend-swatch--wake { background: #f0b23c; }
.chart-background { fill: var(--surface); }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-grid--vertical { opacity: .65; }
.chart-axis-label, .sleep-day-label, .chart-empty-label { fill: var(--muted); font-family: var(--font); font-size: 9px; }
.who-band { stroke: none; }
.who-band--outer { fill: #dceafd; opacity: .65; }
.who-band--inner { fill: #c4dcf8; opacity: .72; }
.who-line { fill: none; stroke: #7ca8d5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.who-line--p3, .who-line--p97 { opacity: .7; }
.who-line--p15, .who-line--p85 { opacity: .8; }
.who-line--p50 { stroke: #4d83bc; stroke-width: 1.5; }
.personal-trend { fill: none; stroke: #0084e8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.weight-point { cursor: pointer; }
.weight-point__hit { fill: transparent; stroke: none; pointer-events: all; }
.weight-point__dot { fill: #0b6fd3; stroke: #ffffff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.weight-point:focus .weight-point__dot, .weight-point:hover .weight-point__dot { fill: #ffdd57; stroke: #073b70; }
.chart-tooltip { position: absolute; z-index: 5; width: max-content; max-width: 170px; padding: 5px 7px; transform: translate(-50%, -100%); border: 1px solid var(--line-strong); border-radius: 3px; background: var(--text); color: var(--surface); font-size: 9px; line-height: 1.35; pointer-events: none; }
.sleep-day { fill: var(--surface); }
.sleep-day--alternate { fill: var(--surface-2); }
.sleep-segment { stroke: rgba(0, 0, 0, .15); stroke-width: .6; }
.sleep-segment--sleep { fill: #327fd2; }
.sleep-segment--wake { fill: #efb13c; }
.sleep-unknown-pattern-bg { fill: #e8edf3; }
.sleep-unknown-pattern-line { stroke: #8190a3; stroke-width: 3; }
html[data-theme="dark"] .who-band--outer, html[data-theme="dark"] .who-band--inner { fill: #183b61; }
html[data-theme="dark"] .who-line { stroke: #5f91c8; }
html[data-theme="dark"] .who-line--p50 { stroke: #85b6eb; }
html[data-theme="dark"] .personal-trend { stroke: #4eb2ff; }
html[data-theme="dark"] .weight-point__dot { fill: #66b8ff; stroke: #07111e; }
html[data-theme="dark"] .weight-point:focus .weight-point__dot, html[data-theme="dark"] .weight-point:hover .weight-point__dot { fill: #ffdd57; stroke: #9fd0ff; }
html[data-theme="dark"] .legend-dot--lex { border-color: #07111e; background: #66b8ff; box-shadow: 0 0 0 1px #5bb1ff; }
html[data-theme="dark"] .sleep-unknown-pattern-bg { fill: #1d2631; }

/* Timeline */
.timeline { display: grid; gap: 2px; }
.timeline-date { min-height: 20px; padding: 3px 2px 1px; color: var(--muted); font-size: 8.5px; font-weight: 700; }
.timeline-event { display: grid; min-width: 0; min-height: 42px; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.timeline-event__content { min-width: 0; }
.timeline-event__top { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; }
.timeline-event__top strong { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-event__top time { color: var(--muted); font-size: 8px; white-space: nowrap; }
.timeline-event__meta { display: flex; min-width: 0; align-items: baseline; gap: 3px; overflow: hidden; color: var(--muted); font-size: 7.5px; white-space: nowrap; }
.timeline-event__meta time, .timeline-event__meta span { flex: 0 0 auto; }
.entry-time-meta { display: inline-flex; min-width: 0; align-items: baseline; justify-content: flex-end; gap: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-event__content p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.event-actions { display: flex; gap: 0; }
.event-actions .icon-button { width: 24px; min-width: 24px; height: 24px; }
.event-actions .icon { width: 14px; height: 14px; }
.pagination { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 9px; }
.deleted-box { margin-top: 5px; }
.deleted-box summary { display: flex; min-height: 31px; align-items: center; justify-content: space-between; padding: 5px 7px; cursor: pointer; font-weight: 700; }
.deleted-list { display: grid; gap: 2px; padding: 0 5px 5px; }
.deleted-row { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--line); }
.deleted-row div { min-width: 0; }
.deleted-row strong, .deleted-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deleted-row small { color: var(--muted); font-size: 8px; }

/* Event dialog */
.event-dialog { width: min(calc(100% - 12px), 500px); max-height: calc(100dvh - 12px); margin: auto auto 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--surface); color: var(--text); }
.event-dialog::backdrop { background: rgba(8, 14, 22, .55); }
.event-form { display: grid; max-height: calc(100dvh - 12px); gap: 6px; padding: 6px 8px calc(8px + var(--safe-bottom)); overflow-y: auto; }
.dialog-handle { width: 28px; height: 3px; margin: 0 auto; border-radius: 2px; background: var(--line-strong); }
.dialog-header { display: flex; min-height: 27px; align-items: center; justify-content: space-between; }
.dialog-header h2 { font-size: 15px; }
.dialog-actions { justify-content: flex-end; }

/* Import */
.import-page, .import-preview-page, .import-result-page { display: grid; gap: 5px; }
.import-upload-panel { padding: 7px; }
.upload-form { display: grid; gap: 6px; }
.import-mode-tabs { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.import-mode-tabs button { min-height: 29px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.import-mode-tabs button + button { border-left: 1px solid var(--line); }
.import-mode-tabs button.is-active { background: var(--accent); color: #fff; }
.import-mode-panel { min-width: 0; }
.file-drop { display: grid; min-height: 82px; place-items: center; align-content: center; gap: 3px; padding: 9px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); text-align: center; cursor: pointer; }
.file-drop:hover, .file-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.file-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.file-drop__icon { color: var(--accent); }
.file-drop__icon .icon { width: 25px; height: 25px; }
.file-drop strong { font-size: 11px; }
.file-drop__selection { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.paste-field { display: grid; gap: 3px; }
.paste-field__head { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.paste-field textarea { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.35; }
.paste-counter { margin-top: 2px; color: var(--muted); font-size: 8px; text-align: right; }
.compact-details { overflow: hidden; }
.compact-details > summary { display: grid; min-height: 34px; grid-template-columns: 18px minmax(0, 1fr) auto 15px; align-items: center; gap: 5px; padding: 5px 7px; cursor: pointer; font-size: 10px; font-weight: 700; list-style: none; }
.compact-details > summary::-webkit-details-marker { display: none; }
.compact-details > summary > .icon:first-child { color: var(--accent); }
.compact-details > summary > .icon:last-child { color: var(--muted); transition: transform .15s ease; }
.compact-details[open] > summary > .icon:last-child { transform: rotate(180deg); }
.compact-details > summary b { min-width: 18px; color: var(--muted); font-size: 8px; text-align: right; }
.compact-details[open] > summary { border-bottom: 1px solid var(--line); }
.details-body { padding: 6px; }
.details-action { display: flex; justify-content: flex-end; margin-bottom: 5px; }
.download-chip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 6px; }
.download-chip { display: flex; min-width: 0; min-height: 28px; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); font-size: 9px; font-weight: 650; }
.download-chip .icon { width: 14px; height: 14px; color: var(--accent); }
.import-history { display: grid; gap: 2px; }
.history-row { display: grid; min-width: 0; min-height: 35px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px 4px; border-top: 1px solid var(--line); }
.history-row:first-child { border-top: 0; }
.history-row > div { min-width: 0; }
.history-row strong, .history-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row strong { font-size: 9.5px; }
.history-row small { color: var(--muted); font-size: 8px; }
.import-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.import-summary-grid article { display: grid; min-width: 0; min-height: 39px; align-content: center; padding: 3px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); text-align: center; }
.import-summary-grid small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.import-summary-grid strong { font-size: 11px; }
.summary-valid { border-color: var(--success) !important; }
.summary-warning { border-color: var(--warning) !important; }
.summary-error { border-color: var(--danger) !important; }
.file-analysis { padding: 5px 6px; }
.file-analysis__list { display: grid; gap: 2px; }
.file-analysis__list > div { display: grid; min-width: 0; min-height: 30px; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 5px; border-top: 1px solid var(--line); }
.file-analysis__list > div:first-child { border-top: 0; }
.file-analysis__list > div > span { color: var(--accent); }
.file-analysis__list strong, .file-analysis__list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-analysis__list strong { font-size: 9px; }
.file-analysis__list small { color: var(--muted); font-size: 8px; }
.import-commit-form { display: grid; gap: 5px; }
.import-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 6px; padding: 5px; }
.import-toolbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.import-toolbar select { width: auto; min-height: 27px; padding: 3px 5px; font-size: 9px; }
.check-label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }
.check-label input { width: 14px; height: 14px; }
.import-row-list { display: grid; gap: 3px; }
.import-row { overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 3px; background: var(--surface); }
.import-row--valid { border-left-color: var(--success); }
.import-row--warning { border-left-color: var(--warning); }
.import-row--error { border-left-color: var(--danger); }
.import-row--duplicate { border-left-color: var(--muted-2); }
.import-row__header { display: grid; min-height: 37px; grid-template-columns: 23px minmax(0, 1fr) auto 25px; align-items: center; gap: 4px; padding: 3px 4px; }
.row-select { display: grid; width: 22px; height: 22px; place-items: center; }
.row-select input { width: 14px; height: 14px; }
.import-row__identity { min-width: 0; }
.import-row__identity strong, .import-row__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-row__identity strong { font-size: 9px; }
.import-row__identity small { color: var(--muted); font-size: 8px; }
.import-row__messages { display: grid; gap: 2px; padding: 0 5px 4px 31px; color: var(--warning); font-size: 8px; }
.import-row__messages span { display: flex; align-items: center; gap: 3px; }
.import-row__messages .icon { width: 12px; height: 12px; }
.import-row__editor { padding: 6px; border-top: 1px solid var(--line); background: var(--surface-2); }
.sticky-form-action { position: sticky; z-index: 20; bottom: calc(var(--nav-height) + var(--safe-bottom)); display: flex; justify-content: flex-end; gap: 5px; padding: 5px 0; background: linear-gradient(to bottom, transparent, var(--bg) 35%); }
.sticky-form-action--split { justify-content: space-between; }
.result-hero { display: grid; min-height: 45px; grid-template-columns: 29px 1fr; align-items: center; gap: 6px; padding: 6px; }
.result-hero__icon { color: var(--success); }
.result-hero__icon .icon { width: 27px; height: 27px; }
.import-log-list { display: grid; gap: 2px; }
.import-log-row { display: grid; min-height: 34px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px; border-top: 1px solid var(--line); }
.import-log-row:first-child { border-top: 0; }
.import-log-row > div { min-width: 0; }
.import-log-row strong, .import-log-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-log-row strong { font-size: 9px; }
.import-log-row small { color: var(--muted); font-size: 8px; }

/* Settings */
.settings-page { display: grid; gap: 5px; }
.settings-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.settings-nav a { display: grid; min-height: 31px; place-items: center; border-right: 1px solid var(--line); color: var(--muted); font-size: 8.5px; font-weight: 700; text-align: center; }
.settings-nav a:last-child { border-right: 0; }
.settings-nav a.is-active { background: var(--accent); color: #fff; }
.settings-form { display: grid; gap: 5px; }
.settings-section { padding: 6px; }
.settings-inline-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr); gap: 5px; }
.settings-retention .field { max-width: 100px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.choice-card { min-width: 0; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card > span { display: flex; min-height: 31px; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: var(--muted); font-size: 9px; }
.choice-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.choice-card .icon { width: 14px; height: 14px; }
.card-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 5px; }
.card-order-row { display: grid; min-width: 0; min-height: 32px; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 2px; padding: 2px 3px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); }
.toggle-row { display: flex; min-width: 0; align-items: center; gap: 5px; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { position: relative; width: 25px; min-width: 25px; height: 14px; border-radius: 8px; background: var(--line-strong); }
.toggle-control::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.toggle-row input:checked + .toggle-control { background: var(--accent); }
.toggle-row input:checked + .toggle-control::after { transform: translateX(11px); }
.toggle-row strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reorder-actions { display: flex; }
.reorder-actions .icon-button { width: 23px; min-width: 23px; height: 23px; }
.reorder-actions .icon { width: 13px; height: 13px; }
.data-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.data-action-card { display: grid; min-width: 0; min-height: 46px; grid-template-columns: 23px minmax(0, 1fr) 14px; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-action-card:hover { border-color: var(--accent); }
.data-action-card__icon { display: grid; width: 23px; height: 23px; place-items: center; color: var(--accent); }
.data-action-card__icon .icon { width: 22px; height: 22px; }
.data-action-card strong { min-width: 0; overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.data-action-card__arrow { width: 14px; height: 14px; color: var(--muted); }
.range-form { display: flex; align-items: end; gap: 4px; flex-wrap: wrap; }
.range-form .field { flex: 1; min-width: 105px; }
.backup-list { display: grid; gap: 2px; }
.backup-row { display: grid; min-width: 0; min-height: 35px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px; border-top: 1px solid var(--line); }
.backup-row:first-child { border-top: 0; }
.backup-row > .icon { color: var(--accent); }
.backup-row div { min-width: 0; }
.backup-row strong, .backup-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-row strong { font-size: 9px; }
.backup-row small { color: var(--muted); font-size: 8px; }
.file-drop--compact { display: block; min-height: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.file-drop--compact > span { display: flex; min-height: 29px; align-items: center; gap: 5px; padding: 4px 6px; border: 1px dashed var(--line-strong); border-radius: 3px; background: var(--surface-2); }
.file-drop--compact > span .icon { color: var(--accent); }
.file-drop--compact small { display: none; }
.upload-inline-form { display: flex; align-items: center; gap: 5px; }
.upload-inline-form .file-drop--compact { min-width: 0; flex: 1; }
.compact-empty { margin: 3px 0; font-size: 9px; }
.device-list { display: grid; gap: 2px; }
.device-row { display: grid; min-width: 0; min-height: 43px; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px 0; border-top: 1px solid var(--line); }
.device-row:first-child { border-top: 0; }
.device-row.is-revoked { opacity: .55; }
.device-row__icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 3px; background: var(--surface-3); color: var(--accent); }
.device-row__content { min-width: 0; }
.device-row__content > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.device-row__content strong { font-size: 9.5px; }
.device-row__content small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px; border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); font-size: 12px; }
.status-summary { padding: 6px; }
.status-summary__head { display: grid; min-height: 38px; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.status-summary__icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--success); }
.status-summary__icon .icon { width: 24px; height: 24px; }
.status-summary--warning .status-summary__icon { color: var(--warning); }
.status-summary--error .status-summary__icon { color: var(--danger); }
.status-summary__head h2 { font-size: 12px; }
.status-summary__head small { display: block; color: var(--muted); font-size: 8px; }
.diagnostics-list { display: grid; gap: 1px; }
.diagnostics-list--live { margin-top: 3px; }
.diagnostic-row { display: grid; min-width: 0; min-height: 36px; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px 0; border-top: 1px solid var(--line); }
.diagnostic-row:first-child { border-top: 0; }
.diagnostic-icon { color: var(--muted); }
.diagnostic-row--ok .diagnostic-icon { color: var(--success); }
.diagnostic-row--error .diagnostic-icon { color: var(--danger); }
.diagnostic-row > div { min-width: 0; }
.diagnostic-row strong, .diagnostic-row > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-row strong { font-size: 9px; }
.diagnostic-row > div > span { color: var(--muted); font-size: 8px; }
.inline-setting { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.restore-preview-card { display: grid; gap: 7px; padding: 7px; }
.restore-file { display: grid; min-width: 0; min-height: 38px; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 6px; }
.restore-file > .icon { width: 24px; height: 24px; color: var(--accent); }
.restore-file div { min-width: 0; }
.restore-file strong, .restore-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restore-file small { color: var(--muted); }
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0; }
.fact-list > div { display: flex; min-width: 0; min-height: 29px; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); }
.fact-list dt { color: var(--muted); font-size: 8px; }
.fact-list dd { margin: 0; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.snackbar-region { position: fixed; z-index: 2500; right: 8px; bottom: calc(var(--nav-height) + var(--safe-bottom) + 7px); left: 8px; display: grid; justify-items: center; pointer-events: none; }
.snackbar { display: flex; max-width: 520px; min-height: 35px; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--text); color: var(--surface); font-size: 10px; box-shadow: 0 7px 22px rgba(0, 0, 0, .22); pointer-events: auto; }
.snackbar__text { min-width: 0; flex: 1; }
.snackbar button { padding: 3px; background: transparent; color: #7fc0ff; font-size: 10px; font-weight: 750; cursor: pointer; }

@media (min-width: 680px) {
    .page-content { padding-right: 12px; padding-left: 12px; }
    .overview-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-grid { grid-auto-rows: 88px; gap: 7px; }
    .quick-card__icon, .quick-card__icon .icon { width: 32px; height: 32px; }
    .quick-card__copy strong { font-size: 12.5px; }
    .quick-card__copy small { font-size: 9.5px; }
    .event-dialog { margin: auto; border-radius: 6px; }
    .event-form { max-height: 88dvh; }
}

@media (max-width: 560px) {
    .form-grid--import { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .download-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .import-toolbar { align-items: stretch; flex-direction: column; }
    .import-toolbar .field--medium { max-width: none; }
    .import-toolbar__actions { justify-content: space-between; }
    .settings-inline-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-retention { display: flex; align-items: center; justify-content: space-between; }
    .settings-retention .section-heading { margin: 0; }
    .settings-retention .field { max-width: 85px; }
}

@media (max-width: 390px) {
    .page-content { padding-right: 6px; padding-left: 6px; }
    .quick-grid { grid-auto-rows: 78px; gap: 5px; }
    .quick-card__icon, .quick-card__icon .icon { width: 31px; height: 31px; }
    .quick-card__copy strong { font-size: 11.5px; }
    .quick-card__copy small { font-size: 8.5px; }
    .overview-menu > a { min-height: 54px; padding: 4px; }
    .overview-menu__icon { width: 28px; height: 28px; }
    .overview-menu__icon .icon { width: 26px; height: 26px; }
    .overview-menu > a > span:nth-child(2) strong { font-size: 10px; }
    .metric-card { min-height: 43px; }
    .metric-card small { font-size: 7px; }
    .metric-card strong { font-size: 9.5px; }
    .overview-subnav a { font-size: 6.5px; }
    .overview-subnav a .icon { width: 16px; height: 16px; }
    .event-actions .icon-button:nth-child(2) { display: none; }
    .card-order-list { grid-template-columns: minmax(0, 1fr); }
    .form-grid--settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 330px) {
    .entry-title h1 { font-size: 16px; }
    .child-line { display: none; }
    .time-chip { padding-right: 4px; padding-left: 4px; }
    .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 70px; gap: 4px; }
    .quick-card__icon, .quick-card__icon .icon { width: 28px; height: 28px; }
    .quick-card__copy strong { font-size: 10.5px; }
    .quick-card__copy small { font-size: 8px; }
    .overview-menu > a { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .overview-menu__icon, .overview-menu__icon .icon { width: 25px; height: 25px; }
    .overview-menu__time { display: none; }
    .metric-grid, .sleep-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-nav a { font-size: 7.5px; }
    .form-grid--import { grid-template-columns: minmax(0, 1fr); }
}

@media (max-height: 620px) and (max-width: 560px) {
    .page-content { padding-top: calc(4px + var(--safe-top)); }
    .entry-page { gap: 3px; }
    .entry-hero { min-height: 28px; }
    .quick-grid { grid-auto-rows: 68px; gap: 4px; }
    .quick-card__icon, .quick-card__icon .icon { width: 24px; height: 24px; }
    .quick-card__copy strong { font-size: 10px; }
    .quick-card__copy small { font-size: 7.5px; }
    .import-cta { min-height: 27px; }
    .last-entry { min-height: 43px; }
    .bottom-nav__icon { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Mobile entry grid and high-contrast chart points */
@media (max-width: 560px) {
    .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.weight-point__dot { fill: #0b6fd3 !important; stroke: #fff !important; stroke-width: 1.5 !important; }
html[data-theme="dark"] .weight-point__dot { fill: #66b8ff !important; stroke: #07111e !important; }

/* Day navigation and interactive weight selection */
.day-nav { display: grid; min-height: 31px; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.day-nav > a, .day-nav > span { display: grid; width: 100%; height: 29px; place-items: center; color: var(--text); }
.day-nav > a:first-child, .day-nav > span:first-child { border-right: 1px solid var(--line); }
.day-nav > a:last-child, .day-nav > span:last-child { border-left: 1px solid var(--line); }
.day-nav .icon { width: 17px; height: 17px; }
.day-nav strong { overflow: hidden; padding: 0 5px; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.day-nav > a:hover { background: var(--surface-3); color: var(--accent); }
.day-nav .is-disabled { color: var(--line-strong); }
.day-nav--section { margin-top: 0; }
.weight-crosshair { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 4 3; opacity: .92; vector-effect: non-scaling-stroke; pointer-events: none; }
.weight-point.is-selected .weight-point__dot { fill: #ffdd57 !important; stroke: var(--accent) !important; stroke-width: 2 !important; }
html[data-theme="dark"] .weight-crosshair { stroke: #75c2ff; }
html[data-theme="dark"] .weight-point.is-selected .weight-point__dot { fill: #ffdd57 !important; stroke: #75c2ff !important; }

/* Lexta 2.0 daily cockpit */
.care-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}
.care-status {
    display: grid;
    min-width: 0;
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.care-status__icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--accent);
}
.care-status__icon .icon { width: 25px; height: 25px; }
.care-status > div { min-width: 0; }
.care-status small,
.care-status strong,
.care-status span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-status small { color: var(--muted); font-size: 7.5px; }
.care-status strong { font-size: 9px; line-height: 1.1; }
.care-status span { color: var(--muted); font-size: 7.5px; line-height: 1.1; }
.care-status--mama .care-status__icon { color: #7357d7; }

.recent-entry { padding: 3px 5px; overflow: hidden; }
.recent-entry .section-heading { min-height: 18px; margin: 0; }
.recent-entry .section-heading h2 { color: var(--muted); font-size: 9px; }
.recent-entry .section-heading .button { min-height: 19px; padding: 1px 4px; font-size: 8px; }
.recent-entry .section-heading .button .icon { width: 12px; height: 12px; }
.recent-entry__list { display: grid; }
.recent-entry__row {
    display: grid;
    min-width: 0;
    min-height: 30px;
    grid-template-columns: 23px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--line);
}
.recent-entry__row:first-child { border-top: 0; }
.recent-entry__row > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 5px; }
.recent-entry__row strong { overflow: hidden; font-size: 9px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.recent-entry__row small { color: var(--muted); font-size: 7.5px; white-space: nowrap; }
.recent-entry__row .icon-button { width: 27px; min-width: 27px; height: 27px; }
.recent-entry__row .icon-button .icon { width: 14px; height: 14px; }
.recent-entry > .muted { margin: 3px 0; font-size: 9px; }

.date-disclosure {
    margin-top: 4px;
    border-top: 1px solid var(--line);
}
.date-disclosure summary {
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 4px 1px;
    color: var(--muted);
    font-size: 9px;
    cursor: pointer;
    list-style: none;
}
.date-disclosure summary::-webkit-details-marker { display: none; }
.date-disclosure summary b { color: var(--accent); font-size: 9px; }
.date-disclosure[open] .field { margin-bottom: 4px; }
.field--time-primary input[type="time"],
.field--clock input[type="time"] {
    height: 44px;
    padding: 3px 8px;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: .02em;
}

.overview-care {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-top: 4px;
}
.overview-care > div {
    display: grid;
    min-width: 0;
    min-height: 42px;
    align-content: center;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.overview-care small,
.overview-care strong,
.overview-care span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-care small { color: var(--muted); font-size: 7.5px; }
.overview-care strong { font-size: 9px; }
.overview-care span { color: var(--muted); font-size: 7.5px; }
.inline-tips { display: grid; gap: 3px; margin: 4px 0; }
.inline-tip {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    padding: 5px 6px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
}
.inline-tip > .icon { width: 20px; height: 20px; color: var(--accent); }
.inline-tip > div { min-width: 0; }
.inline-tip strong { display: block; font-size: 10px; }
.inline-tip span,
.inline-tip p { display: block; margin: 1px 0 0; color: var(--muted); font-size: 8.5px; line-height: 1.25; }
.timeline-event__top strong { font-size: 10px; }
.timeline-event__top time { font-size: 9px; }
.day-nav { touch-action: pan-y; }

@media (max-width: 390px) {
    .care-status { min-height: 45px; grid-template-columns: 25px minmax(0, 1fr); padding: 3px 4px; }
    .care-status__icon, .care-status__icon .icon { width: 24px; height: 24px; }
    .care-status small, .care-status span { font-size: 7px; }
    .care-status strong { font-size: 8.5px; }
    .recent-entry__row { min-height: 28px; }
}

@media (max-width: 330px) {
    .care-status { grid-template-columns: 22px minmax(0, 1fr); }
    .care-status__icon, .care-status__icon .icon { width: 21px; height: 21px; }
    .care-status small { display: none; }
    .care-status strong { font-size: 8px; }
    .care-status span { font-size: 6.8px; }
    .recent-entry__row { min-height: 27px; }
}

@media (max-height: 620px) and (max-width: 560px) {
    .care-status { min-height: 40px; }
    .care-status__icon, .care-status__icon .icon { width: 21px; height: 21px; }
    .care-status small { display: none; }
    .recent-entry__row { min-height: 25px; }
    .recent-entry__row .event-icon { width: 21px; min-width: 21px; height: 21px; }
    .recent-entry__row .event-icon .icon { width: 16px; height: 16px; }
    .recent-entry__row .icon-button { width: 24px; min-width: 24px; height: 24px; }
}

/* Larger symbols without adding page height */
.overview-subnav a { min-height: 43px; font-size: 8.5px; }
.overview-subnav a .icon { width: 23px; height: 23px; }
.day-nav { min-height: 35px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
.day-nav > a, .day-nav > span { height: 33px; }
.day-nav .icon { width: 20px; height: 20px; }
.quick-card .option-button { width: 28px; min-width: 28px; height: 28px; }
.quick-card .option-button .icon { width: 16px; height: 16px; }

@media (max-width: 390px) {
    .overview-subnav a { min-height: 41px; font-size: 7.5px; }
    .overview-subnav a .icon { width: 22px; height: 22px; }
}

/* Lexta 2.0.3 parent-facing insight cards */
.inline-tip {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}
.inline-tip--current { background: var(--accent-soft); }
.inline-tip--general {
    border-left-color: var(--line-strong);
    background: var(--surface);
}
.inline-tip--general > .icon { color: var(--muted); }
.inline-tip__label {
    display: inline-block;
    margin: 0 0 1px;
    color: var(--accent);
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.inline-tip--general .inline-tip__label,
.insight-card--general .inline-tip__label { color: var(--muted); }
.inline-tip span { color: var(--text); }
.inline-tip p { color: var(--muted); }
.insight-card--current { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.insight-card--general { border-left: 3px solid var(--line-strong); }
.insight-card .inline-tip__label { margin-bottom: 2px; }

@media (min-width: 620px) {
    .inline-tips--paired { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lexta 2.1 reminders and full weight history */
.bottom-nav { grid-template-columns: repeat(4, 1fr); }
.bottom-nav__item { position: relative; font-size: 8px; }
.bottom-nav__icon-wrap { position: relative; display: grid; place-items: center; }
.bottom-nav__icon-wrap > b {
    position: absolute;
    top: -5px;
    right: -9px;
    display: grid;
    min-width: 15px;
    height: 15px;
    place-items: center;
    padding: 0 3px;
    border: 2px solid var(--surface);
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    line-height: 1;
}

.entry-reminders { display: grid; gap: 3px; }
.entry-reminder {
    display: grid;
    min-height: 38px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid var(--warning);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--warning-soft);
}
.entry-reminder__icon { display: grid; width: 27px; height: 27px; place-items: center; color: var(--warning); }
.entry-reminder__icon .icon { width: 22px; height: 22px; }
.entry-reminder > div { min-width: 0; }
.entry-reminder strong, .entry-reminder small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-reminder strong { font-size: 10px; }
.entry-reminder small { color: var(--muted); font-size: 8px; }
.entry-reminder .button { min-height: 28px; padding: 4px 7px; font-size: 9px; }

.reminders-page { width: min(100%, 680px); margin: 0 auto; }
.reminder-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}
.reminder-summary > div {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.reminder-summary small { color: var(--muted); font-size: 9px; }
.reminder-summary strong { font-size: 17px; }
.reminder-create { margin-bottom: 7px; padding: 7px; }
.reminder-form-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 5px; }
.reminder-field--title { min-width: 0; }
.reminder-section { margin-top: 4px; }
.reminder-list { display: grid; gap: 4px; }
.reminder-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 3px;
    background: var(--surface);
}
.reminder-card--due { border-left-color: var(--warning); background: var(--warning-soft); }
.reminder-card--done { border-left-color: var(--success); }
.reminder-card__icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--muted); }
.reminder-card--due .reminder-card__icon { color: var(--warning); }
.reminder-card--done .reminder-card__icon { color: var(--success); }
.reminder-card__icon .icon { width: 25px; height: 25px; }
.reminder-card__body { min-width: 0; }
.reminder-card__title { display: flex; min-width: 0; align-items: center; gap: 5px; }
.reminder-card__title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.reminder-card__title em {
    flex: 0 0 auto;
    padding: 1px 4px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--muted);
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}
.reminder-card__body > span, .reminder-card__body > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-card__body > span { color: var(--muted); font-size: 8px; }
.reminder-card__body > small { margin-top: 1px; font-size: 9px; }
.reminder-card__actions .button { min-width: 62px; }
.reminder-edit { grid-column: 2 / -1; border-top: 1px solid var(--line); }
.reminder-edit summary {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.reminder-edit summary::-webkit-details-marker { display: none; }
.reminder-edit summary .icon { width: 14px; height: 14px; }
.reminder-edit form { padding: 3px 0 1px; }
.inline-actions--spread { justify-content: space-between; }
.reminder-history { margin-top: 8px; padding: 6px; }
.reminder-history__list { display: grid; }
.reminder-history__row {
    display: grid;
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    border-top: 1px solid var(--line);
}
.reminder-history__row:first-child { border-top: 0; }
.reminder-history__row > span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--success); }
.reminder-history__row > span .icon { width: 18px; height: 18px; }
.reminder-history__row strong, .reminder-history__row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-history__row strong { font-size: 9.5px; }
.reminder-history__row small { color: var(--muted); font-size: 8px; }
.period-bar {
    display: grid;
    min-height: 35px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.period-bar .icon { width: 19px; height: 19px; color: var(--accent); }
.period-bar strong { font-size: 10px; }
.period-bar span { color: var(--muted); font-size: 9px; }
.weight-point__dot { stroke-width: 1.5 !important; }
.weight-point.is-selected .weight-point__dot { stroke-width: 2 !important; }

@media (max-width: 560px) {
    .reminder-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reminder-field--title { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
    .bottom-nav__item { font-size: 7.2px; }
    .entry-reminder { grid-template-columns: 24px minmax(0, 1fr) auto; }
    .entry-reminder__icon, .entry-reminder__icon .icon { width: 22px; height: 22px; }
    .reminder-card { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 5px; }
    .reminder-card__icon, .reminder-card__icon .icon { width: 28px; height: 28px; }
    .reminder-card__actions .button { min-width: 54px; padding-right: 5px; padding-left: 5px; }
}

/* Lexta 3.0 visual system */
:root {
    --bg: #f4f4fb;
    --surface: #ffffff;
    --surface-2: #f8f8fc;
    --surface-3: #efeff7;
    --text: #171827;
    --muted: #6f7485;
    --muted-2: #9a9eac;
    --line: #e1e2eb;
    --line-strong: #c8cad7;
    --accent: #6756d8;
    --accent-strong: #5141bd;
    --accent-soft: #efedff;
    --success: #318b67;
    --success-soft: #e9f7f0;
    --warning: #b97118;
    --warning-soft: #fff5e7;
    --danger: #d54f67;
    --danger-soft: #fff0f3;
    --info: #278ea4;
    --info-soft: #e8f7fa;
    --chart-grid: #e7e7ef;
    --purple: #6756d8;
    --purple-soft: #efedff;
    --pink: #e66e8c;
    --pink-soft: #fff0f4;
    --teal: #2e97a9;
    --teal-soft: #e9f7f9;
    --green: #3d9972;
    --green-soft: #eaf7f1;
    --amber: #df8a28;
    --amber-soft: #fff4e5;
    --nav-height: 58px;
    --radius: 10px;
    --radius-small: 7px;
    --shadow: 0 10px 30px rgba(31, 30, 66, .08);
    --shadow-soft: 0 4px 14px rgba(31, 30, 66, .06);
}

html[data-theme="dark"] {
    --bg: #0d0e15;
    --surface: #181923;
    --surface-2: #14151e;
    --surface-3: #222430;
    --text: #f6f5fb;
    --muted: #aaadbb;
    --muted-2: #777b8d;
    --line: #2c2e3b;
    --line-strong: #444757;
    --accent: #9c91ff;
    --accent-strong: #b2a9ff;
    --accent-soft: #292641;
    --success: #6bd4a7;
    --success-soft: #19352b;
    --warning: #f1b963;
    --warning-soft: #382b18;
    --danger: #ff91a3;
    --danger-soft: #402129;
    --info: #72c8d9;
    --info-soft: #18343a;
    --chart-grid: #30323e;
    --purple: #9c91ff;
    --purple-soft: #292641;
    --pink: #ff8ba6;
    --pink-soft: #3b222c;
    --teal: #72c8d9;
    --teal-soft: #18343a;
    --green: #6bd4a7;
    --green-soft: #19352b;
    --amber: #f1b963;
    --amber-soft: #382b18;
    --shadow: 0 12px 34px rgba(0, 0, 0, .28);
    --shadow-soft: 0 5px 16px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #0d0e15;
        --surface: #181923;
        --surface-2: #14151e;
        --surface-3: #222430;
        --text: #f6f5fb;
        --muted: #aaadbb;
        --muted-2: #777b8d;
        --line: #2c2e3b;
        --line-strong: #444757;
        --accent: #9c91ff;
        --accent-strong: #b2a9ff;
        --accent-soft: #292641;
        --success: #6bd4a7;
        --success-soft: #19352b;
        --warning: #f1b963;
        --warning-soft: #382b18;
        --danger: #ff91a3;
        --danger-soft: #402129;
        --info: #72c8d9;
        --info-soft: #18343a;
        --chart-grid: #30323e;
        --purple: #9c91ff;
        --purple-soft: #292641;
        --pink: #ff8ba6;
        --pink-soft: #3b222c;
        --teal: #72c8d9;
        --teal-soft: #18343a;
        --green: #6bd4a7;
        --green-soft: #19352b;
        --amber: #f1b963;
        --amber-soft: #382b18;
        --shadow: 0 12px 34px rgba(0, 0, 0, .28);
        --shadow-soft: 0 5px 16px rgba(0, 0, 0, .22);
    }
}

html { background: var(--bg); }
body {
    background:
        radial-gradient(circle at 8% -8%, rgba(103, 86, 216, .11), transparent 32rem),
        radial-gradient(circle at 104% 18%, rgba(46, 151, 169, .09), transparent 28rem),
        var(--bg);
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: -.005em;
}

h1 { font-size: 23px; font-weight: 790; letter-spacing: -.035em; }
h2 { font-size: 15px; font-weight: 760; letter-spacing: -.02em; }
h3 { font-size: 13px; font-weight: 740; }
small { font-size: 10.5px; }

.page-content {
    width: min(100%, 780px);
    padding: calc(10px + var(--safe-top)) 10px calc(var(--nav-height) + var(--safe-bottom) + 20px);
}
.panel {
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.button {
    min-height: 35px;
    padding: 7px 11px;
    border-color: var(--line);
    border-radius: var(--radius-small);
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(31, 30, 66, .03);
    font-weight: 740;
}
.button:hover { border-color: var(--accent); background: var(--accent-soft); }
.button--primary { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(103, 86, 216, .22); }
.button--primary:hover { background: var(--accent-strong); color: #fff; }
.button--small { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
}
.icon-button:hover { background: var(--accent-soft); color: var(--accent); }

.field__label { font-size: 10px; }
.field input, .field select, .range-toolbar select, .range-toolbar input, .import-toolbar select {
    height: 36px;
    border-radius: 8px;
    background: var(--surface-2);
}
.field textarea, .paste-field textarea { border-radius: 8px; background: var(--surface-2); }

.app-header, .compact-page-header { min-height: 43px; margin-bottom: 8px; }
.app-header__title > span { margin-top: 2px; font-size: 10px; }
.app-kicker {
    display: block;
    margin: 0 0 2px !important;
    color: var(--accent) !important;
    font-size: 8px !important;
    font-weight: 850;
    letter-spacing: .18em;
}
.header-back, .compact-back {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: var(--shadow-soft);
}

.bottom-nav {
    right: auto;
    bottom: max(7px, var(--safe-bottom));
    left: 50%;
    width: min(calc(100% - 16px), 720px);
    height: 58px;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 6px;
    transform: translateX(-50%);
    border: 1px solid rgba(213, 214, 226, .9);
    border-radius: 15px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 12px 34px rgba(27, 26, 58, .16);
    backdrop-filter: blur(16px);
}
html[data-theme="dark"] .bottom-nav { border-color: rgba(70, 72, 88, .9); background: rgba(24, 25, 35, .93); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .bottom-nav { border-color: rgba(70, 72, 88, .9); background: rgba(24, 25, 35, .93); }
}
.bottom-nav__item {
    gap: 2px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 730;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.bottom-nav__item.is-active { background: var(--accent-soft); color: var(--accent); }
.bottom-nav__item:active { transform: scale(.97); }
.bottom-nav__icon { width: 22px; height: 22px; }
.bottom-nav__icon-wrap > b { border-color: var(--surface); }

/* Entry */
.entry-page { width: min(100%, 570px); margin: 0 auto; }
.entry-hero { min-height: 46px; margin-bottom: 8px; }
.entry-title h1 { font-size: 24px; }
.child-line { margin-top: 3px; color: var(--muted); font-size: 10px; }
.child-line strong { color: var(--text); }
.time-chip {
    min-height: 35px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    color: var(--accent);
    font-weight: 760;
}
.reference-popover { border-radius: 10px; box-shadow: var(--shadow); }

.entry-reminders { gap: 5px; margin-bottom: 7px; }
.entry-reminder {
    min-height: 44px;
    border-color: rgba(223, 138, 40, .55);
    border-left-width: 4px;
    border-radius: 9px;
    box-shadow: var(--shadow-soft);
}
.entry-reminder strong { font-size: 11px; }
.entry-reminder small { font-size: 9px; }

.care-strip { gap: 7px; margin-bottom: 8px; }
.care-status {
    min-height: 57px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.care-status--baby { background: linear-gradient(135deg, var(--surface), var(--purple-soft)); }
.care-status--mama { background: linear-gradient(135deg, var(--surface), var(--teal-soft)); }
.care-status__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
}
.care-status--mama .care-status__icon { background: var(--teal-soft); color: var(--teal); }
.care-status__icon .icon { width: 25px; height: 25px; }
.care-status small { color: var(--muted); font-size: 8.5px; font-weight: 700; }
.care-status strong { font-size: 10.5px; }
.care-status span { font-size: 8.5px; }

.quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 82px;
    gap: 7px;
}
.quick-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.quick-card:active { transform: scale(.98); border-color: var(--tone); box-shadow: none; }
.quick-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--tone);
    content: "";
}
.quick-card__main { gap: 4px; padding: 9px 5px 6px; }
.quick-card__icon {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tone) 12%, var(--surface));
}
.quick-card__icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.quick-card__copy strong { font-size: 11.5px; font-weight: 780; }
.quick-card__copy small { font-size: 8.8px; }
.quick-card .option-button {
    top: 4px;
    right: 4px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 7px;
}

.import-cta {
    min-height: 42px;
    margin: 8px 0;
    padding: 7px 10px;
    border: 1px solid rgba(103, 86, 216, .24);
    border-radius: 10px;
    background: linear-gradient(120deg, var(--accent-soft), var(--surface));
    box-shadow: var(--shadow-soft);
    color: var(--accent);
}
.import-cta__icon { width: 23px; height: 23px; }
.import-cta strong { color: var(--text); font-size: 10.5px; }

.recent-entry {
    padding: 7px 8px 0;
    border-radius: 11px;
}
.recent-entry .section-heading { min-height: 26px; }
.recent-entry .section-heading h2 { color: var(--text); font-size: 11.5px; }
.recent-entry__list { gap: 0; }
.recent-entry__row {
    min-height: 42px;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 7px;
    padding: 5px 0;
    border-top-color: var(--line);
}
.recent-entry__row > div,
.recent-entry__copy {
    display: block;
    min-width: 0;
}
.recent-entry__row strong { display: block; font-size: 10.5px; line-height: 1.2; }
.recent-entry__row small { display: flex; gap: 3px; margin-top: 1px; font-size: 8.5px; }
.recent-entry__note {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-entry__more {
    display: grid;
    min-height: 37px;
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 6px;
    margin: 2px -8px 0;
    padding: 5px 10px;
    border-top: 1px solid var(--line);
    color: var(--accent);
    font-size: 10px;
    font-weight: 760;
}
.recent-entry__more .icon { width: 17px; height: 17px; }

/* Overview */
.overview-page { width: min(100%, 760px); margin: 0 auto; }
.overview-header { min-height: 52px; margin-bottom: 7px; }
.overview-header h1 { font-size: 25px; }
.overview-subnav {
    gap: 3px;
    margin-bottom: 7px;
    padding: 3px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.overview-subnav a {
    min-height: 47px;
    gap: 2px;
    border: 0;
    border-radius: 8px;
    font-size: 8px;
    transition: background .15s ease, color .15s ease;
}
.overview-subnav a.is-active { background: var(--accent-soft); color: var(--accent); }
.overview-subnav__icon { display: grid; width: 26px; height: 24px; place-items: center; }
.overview-subnav a .icon { width: 22px; height: 22px; }

.day-nav,
.period-bar {
    min-height: 38px;
    margin-bottom: 7px;
    overflow: hidden;
    border-color: var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.day-nav { grid-template-columns: 42px minmax(0, 1fr) 42px; }
.day-nav > a, .day-nav > span { height: 36px; border-color: var(--line) !important; }
.day-nav > a:hover { background: var(--accent-soft); }
.day-nav strong { font-size: 11px; }
.period-bar { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 5px 9px; }
.period-bar strong { font-size: 11px; }
.period-bar span { font-size: 9.5px; }

.overview-export {
    display: grid;
    min-height: 45px;
    grid-template-columns: auto minmax(104px, 150px) auto auto;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.overview-export__lead { display: flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; }
.overview-export__lead .icon { width: 18px; height: 18px; }
.overview-export label { display: flex; min-width: 0; align-items: center; gap: 5px; }
.overview-export label > span { color: var(--muted); font-size: 8.5px; font-weight: 700; }
.overview-export select {
    min-width: 0;
    height: 31px;
    padding: 3px 25px 3px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-2);
    font-size: 10px;
}
.overview-export__notes { white-space: nowrap; }
.overview-export__notes input { accent-color: var(--accent); }
.overview-export__actions { display: flex; gap: 4px; }
.export-button {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-2);
    font-size: 9px;
    font-weight: 780;
    cursor: pointer;
}
.export-button .icon { width: 16px; height: 16px; }
.export-button--csv { color: var(--green); }
.export-button--pdf { color: var(--danger); }
.export-button:hover { border-color: currentColor; background: var(--surface); }

.today-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.today-card {
    display: grid;
    min-width: 0;
    min-height: 67px;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.today-card > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}
.today-card > span .icon { width: 21px; height: 21px; }
.today-card > div { min-width: 0; }
.today-card small, .today-card strong, .today-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-card small { color: var(--muted); font-size: 8px; font-weight: 720; }
.today-card strong { margin-top: 1px; font-size: 12px; font-style: normal; font-weight: 800; }
.today-card em { color: var(--muted); font-size: 7.5px; font-style: normal; }
.today-card--feeding > span, .today-card--sides > span { background: var(--green-soft); color: var(--green); }
.today-card--bottle > span { background: var(--pink-soft); color: var(--pink); }
.today-card--diaper > span, .today-card--wet > span { background: var(--teal-soft); color: var(--teal); }
.today-card--dirty > span, .today-card--both > span { background: var(--amber-soft); color: var(--amber); }
.today-card--sleep > span { background: var(--purple-soft); color: var(--purple); }
.today-card--pumping > span { background: var(--accent-soft); color: var(--accent); }

.week-panel {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.week-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.week-panel__head span { display: block; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.week-panel__head h2 { margin-top: 2px; font-size: 12.5px; }
.week-panel__head-icon { width: 25px; height: 25px; color: var(--accent); }
.week-kpis { display: grid; gap: 5px; }
.week-kpis--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.week-kpis--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.week-kpis > div {
    min-width: 0;
    padding: 7px;
    border-radius: 8px;
    background: var(--surface-2);
}
.week-kpis small, .week-kpis strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-kpis small { color: var(--muted); font-size: 8px; }
.week-kpis strong { margin-top: 2px; font-size: 12.5px; }
.week-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.week-visuals > div { min-width: 0; padding: 7px 7px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.week-visuals > div > small { color: var(--muted); font-size: 8px; font-weight: 700; }
.week-bars { display: flex; height: 56px; align-items: flex-end; gap: 5px; margin-top: 4px; }
.week-bars__item { display: flex; height: 100%; min-width: 0; flex: 1 1 0; align-items: center; justify-content: flex-end; flex-direction: column; gap: 3px; }
.week-bars__item i { display: block; width: min(14px, 72%); min-height: 4px; border-radius: 3px 3px 1px 1px; background: var(--accent); opacity: .86; }
.week-bars__item b { color: var(--muted); font-size: 7px; font-weight: 700; }
.week-bars--bottle .week-bars__item i { background: var(--pink); }
.week-bars--wet .week-bars__item i { background: var(--teal); }
.week-bars--dirty .week-bars__item i { background: var(--amber); }
.stat-assessment {
    margin: 8px 0 0;
    padding: 8px 9px;
    border-left: 3px solid var(--accent);
    border-radius: 0 7px 7px 0;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 10px;
    line-height: 1.45;
}
.stat-assessment--weight { margin-bottom: 8px; }

.overview-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.overview-care__item {
    display: grid;
    min-height: 57px;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.overview-care__item--baby { background: linear-gradient(135deg, var(--surface), var(--green-soft)); }
.overview-care__item--mama { background: linear-gradient(135deg, var(--surface), var(--teal-soft)); }
.overview-care__icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.overview-care__item--mama .overview-care__icon { background: var(--teal-soft); color: var(--teal); }
.overview-care__icon .icon { width: 25px; height: 25px; }
.overview-care__item small, .overview-care__item strong, .overview-care__item div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-care__item small { color: var(--muted); font-size: 8px; }
.overview-care__item strong { font-size: 10px; }
.overview-care__item div > span { color: var(--muted); font-size: 8px; }

.weight-hero {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) 1.4fr minmax(150px, .9fr);
    align-items: stretch;
    gap: 7px;
    margin-bottom: 8px;
}
.weight-hero__main,
.weight-hero__stats,
.weight-hero__spark {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.weight-hero__main { display: flex; min-height: 78px; justify-content: center; flex-direction: column; padding: 10px; background: linear-gradient(135deg, var(--accent), #806fea); color: #fff; }
.weight-hero__main small { font-size: 8px; opacity: .78; }
.weight-hero__main strong { margin: 2px 0; font-size: 22px; letter-spacing: -.03em; }
.weight-hero__main span { font-size: 8px; opacity: .82; }
.weight-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; }
.weight-hero__stats > div { display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 5px 7px; border-left: 1px solid var(--line); }
.weight-hero__stats > div:first-child { border-left: 0; }
.weight-hero__stats small, .weight-hero__stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weight-hero__stats small { color: var(--muted); font-size: 7.5px; }
.weight-hero__stats strong { margin-top: 2px; font-size: 11px; }
.weight-hero__spark { display: grid; min-width: 0; place-items: center; padding: 7px; }
.stat-spark { width: 100%; height: 64px; overflow: visible; }
.stat-spark__area { fill: var(--accent-soft); }
.stat-spark__line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stat-spark__dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }

.chart-panel { padding: 8px; border-radius: 11px; }
.chart-head { min-height: 38px; margin-bottom: 3px; }
.chart-head small { display: block; color: var(--muted); font-size: 8px; }
.chart-head strong { font-size: 11px; }
.chart-controls { gap: 3px; }
.chart-controls button { min-width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 760; }
.chart-controls button:hover { border-color: var(--accent); color: var(--accent); }
.chart-canvas { border-radius: 8px; background: var(--surface-2); }
.chart-legend { padding-top: 5px; color: var(--muted); font-size: 8px; }
.personal-trend { stroke: var(--accent) !important; stroke-width: 2.4 !important; }
.weight-point__dot { fill: var(--surface) !important; stroke: var(--accent) !important; stroke-width: 1.6 !important; }
.weight-point.is-selected .weight-point__dot { fill: var(--accent) !important; stroke: #fff !important; }
.weight-crosshair { stroke: var(--accent) !important; stroke-dasharray: 3 3; opacity: .68; }
.who-band--outer { fill: rgba(103, 86, 216, .055) !important; }
.who-band--inner { fill: rgba(103, 86, 216, .08) !important; }
.who-line { stroke: rgba(103, 86, 216, .28) !important; }
.who-line--p50 { stroke: rgba(103, 86, 216, .58) !important; }

.sleep-switch {
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}
.sleep-switch a { min-height: 31px; border: 0; border-radius: 7px; font-size: 9.5px; }
.sleep-switch a.is-active { background: var(--accent); color: #fff; }
.chart-panel--sleep { margin-bottom: 8px; }
.sleep-legend { font-size: 8px; }

.analysis-intro {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--accent-soft), var(--surface));
    box-shadow: var(--shadow-soft);
}
.analysis-intro > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--accent); color: #fff; }
.analysis-intro > span .icon { width: 25px; height: 25px; }
.analysis-intro small { color: var(--muted); font-size: 8px; }
.analysis-intro h2 { font-size: 17px; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.analysis-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.analysis-card header { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.analysis-card header > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.analysis-card header .icon { width: 24px; height: 24px; }
.analysis-card header small, .analysis-card header strong { display: block; }
.analysis-card header small { color: var(--muted); font-size: 8px; }
.analysis-card header strong { font-size: 12px; }
.analysis-card dl { margin: 0; }
.analysis-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.analysis-card dt { color: var(--muted); font-size: 8.5px; }
.analysis-card dd { margin: 0; font-size: 9.5px; font-weight: 760; }
.analysis-card > p { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.45; }
.analysis-card--feeding header > span { background: var(--green-soft); color: var(--green); }
.analysis-card--diapers header > span { background: var(--teal-soft); color: var(--teal); }
.analysis-card--weight header > span { background: var(--amber-soft); color: var(--amber); }
.analysis-card--sleep header > span { background: var(--purple-soft); color: var(--purple); }

/* Timeline and notes */
.timeline-section { margin-top: 8px; }
.timeline-section .section-heading { min-height: 28px; margin-bottom: 4px; }
.timeline-section .section-heading h2 { font-size: 12px; }
.timeline { gap: 5px; }
.timeline-date { margin: 7px 0 2px; }
.timeline-date span {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 8px;
    font-weight: 750;
}
.timeline-event {
    min-height: 50px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 6px 7px;
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}
.event-icon {
    display: grid;
    width: 31px;
    min-width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}
.event-icon .icon { width: 21px; height: 21px; }
.timeline-event--breastfeeding .event-icon { background: var(--green-soft); color: var(--green); }
.timeline-event--bottle .event-icon { background: var(--pink-soft); color: var(--pink); }
.timeline-event--pumping .event-icon { background: var(--accent-soft); color: var(--accent); }
.timeline-event--diaper .event-icon { background: var(--teal-soft); color: var(--teal); }
.timeline-event--weight .event-icon, .timeline-event--height .event-icon { background: var(--amber-soft); color: var(--amber); }
.timeline-event--sleep .event-icon { background: var(--purple-soft); color: var(--purple); }
.timeline-event__top strong { font-size: 10.5px; font-weight: 760; }
.timeline-event__meta { margin-top: 1px; font-size: 8px; }
.timeline-event__content .event-note,
.timeline-event__content p.event-note {
    margin: 4px 0 0;
    overflow: visible;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}
.event-actions { gap: 1px; }
.event-actions .icon-button { width: 29px; min-width: 29px; height: 29px; }
.event-actions .icon-button .icon { width: 15px; height: 15px; }
.pagination { margin-top: 8px; }

/* Existing pages use the same visual language */
.settings-page .panel,
.import-page .panel,
.import-preview-page .panel,
.import-result-page .panel,
.reminders-page .panel,
.settings-card,
.settings-menu a,
.reminder-card,
.reminder-summary > div,
.reminder-create,
.reminder-history {
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}
.settings-menu a, .settings-card { border-color: var(--line); background: var(--surface); }
.reminder-card { border-radius: 10px; }
.reminder-summary > div { border-radius: 10px; }
.reminder-card__icon { border-radius: 9px; background: var(--surface-3); }
.snackbar { border-radius: 10px; box-shadow: var(--shadow); }
.dialog-card { border-radius: 13px; box-shadow: 0 24px 70px rgba(20, 18, 55, .28); }

@media (max-width: 620px) {
    .page-content { padding-right: 8px; padding-left: 8px; }
    .weight-hero { grid-template-columns: 1fr 1.55fr; }
    .weight-hero__spark { display: none; }
    .analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
    .overview-export { grid-template-columns: auto minmax(0, 1fr) auto; }
    .overview-export__lead b { display: none; }
    .overview-export__notes { grid-column: 1 / 3; }
    .overview-export__actions { grid-column: 3; grid-row: 1 / 3; align-self: stretch; }
    .export-button { min-width: 46px; justify-content: center; flex-direction: column; gap: 0; padding: 2px 5px; }
    .export-button span { font-size: 7.5px; }
    .today-card { grid-template-columns: 27px minmax(0, 1fr); gap: 4px; padding: 5px; }
    .today-card > span { width: 27px; height: 27px; }
    .today-card > span .icon { width: 19px; height: 19px; }
    .today-card strong { font-size: 10.5px; }
    .week-kpis > div { padding: 6px 5px; }
    .week-kpis small { font-size: 7px; }
    .week-kpis strong { font-size: 10.5px; }
    .weight-hero { grid-template-columns: 1fr; }
    .weight-hero__main { min-height: 70px; }
    .weight-hero__stats { min-height: 58px; }
    .weight-hero__stats > div { padding: 4px 6px; }
}

@media (max-width: 390px) {
    h1 { font-size: 22px; }
    .bottom-nav { width: calc(100% - 10px); bottom: max(4px, var(--safe-bottom)); }
    .overview-subnav { gap: 1px; padding: 2px; }
    .overview-subnav a { min-height: 44px; font-size: 7px; }
    .overview-subnav a .icon { width: 20px; height: 20px; }
    .today-overview { gap: 4px; }
    .today-card { min-height: 61px; }
    .week-panel { padding: 8px; }
    .week-visuals { gap: 4px; }
    .overview-care__item { grid-template-columns: 30px minmax(0, 1fr); gap: 5px; padding: 6px; }
    .overview-care__icon { width: 30px; height: 30px; }
    .overview-care__icon .icon { width: 21px; height: 21px; }
    .quick-grid { grid-auto-rows: 78px; gap: 6px; }
    .quick-card__icon { width: 32px; height: 32px; }
    .quick-card__icon .icon { width: 24px; height: 24px; }
    .quick-card__copy strong { font-size: 11px; }
    .timeline-event { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 5px; padding: 5px; }
    .event-actions .icon-button { width: 27px; min-width: 27px; height: 27px; }
}

@media (max-width: 340px) {
    .page-content { padding-right: 6px; padding-left: 6px; }
    .overview-subnav a span:last-child { font-size: 6.4px; }
    .today-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .today-card > span { display: none; }
    .today-card small { font-size: 7px; }
    .today-card strong { font-size: 10px; }
    .today-card em { font-size: 6.8px; }
    .week-kpis small { font-size: 6.5px; }
    .week-kpis strong { font-size: 9.5px; }
    .overview-care { grid-template-columns: 1fr; }
    .care-status small { display: block; }
    .event-actions .icon-button[data-duplicate-event] { display: none; }
}

/* Lexta 3.0 finishing touches */
.quick-card__icon {
    background: var(--surface-2);
    background: color-mix(in srgb, var(--tone) 12%, var(--surface));
}

.auth-page,
.offline-page {
    background:
        radial-gradient(circle at 15% 5%, rgba(103, 86, 216, .17), transparent 24rem),
        radial-gradient(circle at 92% 92%, rgba(46, 151, 169, .12), transparent 22rem),
        var(--bg);
}
.auth-card {
    position: relative;
    width: min(calc(100% - 24px), 340px);
    overflow: hidden;
    padding: 22px;
    border-color: var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(31, 30, 66, .15);
}
.auth-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    content: "";
}
html[data-theme="dark"] .auth-card { background: rgba(24, 25, 35, .97); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .auth-card { background: rgba(24, 25, 35, .97); }
}
.brand-lockup--center { flex-direction: column; gap: 8px; margin-bottom: 18px; }
.brand-lockup img { width: 52px; height: 52px; filter: drop-shadow(0 9px 15px rgba(81, 65, 189, .22)); }
.brand-name { font-size: 24px; letter-spacing: -.04em; }
.auth-card .stack-form { gap: 10px; }
.auth-card .field__label { margin-bottom: 4px; font-size: 10px; }
.auth-card .field input { height: 42px; background: var(--surface-2); }
.auth-card .button--primary { min-height: 42px; margin-top: 2px; }
.auth-card .password-toggle { top: 6px; right: 5px; }

.offline-state {
    width: min(calc(100% - 24px), 350px);
    gap: 8px;
    padding: 25px 22px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}
.offline-state img { width: 56px; height: 56px; margin-bottom: 2px; filter: drop-shadow(0 10px 16px rgba(81, 65, 189, .2)); }
.offline-state h1 { font-size: 23px; letter-spacing: -.035em; }
.offline-state p { max-width: 260px; margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.overview-subnav a.is-active {
    box-shadow: inset 0 0 0 1px rgba(103, 86, 216, .12);
}
.today-card,
.week-panel,
.analysis-card,
.overview-care__item,
.weight-hero__main,
.weight-hero__stats,
.weight-hero__spark,
.timeline-event,
.recent-entry,
.care-status,
.quick-card {
    isolation: isolate;
}
.today-card::after,
.analysis-card::after {
    position: absolute;
    z-index: 0;
    top: -24px;
    right: -26px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--accent-soft);
    opacity: .38;
    content: "";
}
.today-card,
.analysis-card { position: relative; overflow: hidden; }
.today-card > *, .analysis-card > * { position: relative; z-index: 1; }
.today-card--feeding::after, .today-card--sides::after, .analysis-card--feeding::after { background: var(--green-soft); }
.today-card--bottle::after { background: var(--pink-soft); }
.today-card--diaper::after, .today-card--wet::after, .analysis-card--diapers::after { background: var(--teal-soft); }
.today-card--dirty::after, .today-card--both::after, .analysis-card--weight::after { background: var(--amber-soft); }
.today-card--sleep::after, .analysis-card--sleep::after { background: var(--purple-soft); }

.export-button:active,
.overview-subnav a:active,
.today-card:active,
.settings-menu a:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Lexta 3.1: compact native visual system
   Flat surfaces, separators instead of card stacks, no gradients/glass/shadows. */
:root {
    --bg: #f5f6f7;
    --surface: #ffffff;
    --surface-2: #f7f8f9;
    --surface-3: #eceff2;
    --text: #111418;
    --muted: #68717b;
    --muted-2: #929aa3;
    --line: #d9dee3;
    --line-strong: #b8c0c8;
    --accent: #0d6fbd;
    --accent-strong: #085a9d;
    --accent-soft: #eaf3fa;
    --success: #147c59;
    --success-soft: #e9f4ef;
    --warning: #a96508;
    --warning-soft: #fff4df;
    --danger: #c63f52;
    --danger-soft: #fbecef;
    --info: #1a6ca8;
    --info-soft: #eaf3fa;
    --chart-grid: #e1e5e9;
    --purple: #655f9f;
    --purple-soft: #efeff7;
    --pink: #c94b6b;
    --pink-soft: #faedf1;
    --teal: #087b83;
    --teal-soft: #e7f3f3;
    --green: #177d5b;
    --green-soft: #e8f3ee;
    --amber: #aa670d;
    --amber-soft: #faf0e2;
    --nav-height: 50px;
    --radius: 4px;
    --radius-small: 3px;
    --shadow: none;
    --shadow-soft: none;
}

html[data-theme="dark"] {
    --bg: #0e1012;
    --surface: #15181b;
    --surface-2: #111417;
    --surface-3: #20252a;
    --text: #f3f5f6;
    --muted: #a4acb4;
    --muted-2: #747d86;
    --line: #2a3035;
    --line-strong: #48515a;
    --accent: #69afe2;
    --accent-strong: #8dc6ed;
    --accent-soft: #172a38;
    --success: #69c59f;
    --success-soft: #173127;
    --warning: #e5b260;
    --warning-soft: #342813;
    --danger: #f08091;
    --danger-soft: #382027;
    --info: #78b9e5;
    --info-soft: #172a38;
    --chart-grid: #2c3338;
    --purple: #aaa6d8;
    --purple-soft: #26253a;
    --pink: #ed8da5;
    --pink-soft: #352229;
    --teal: #6dc4c8;
    --teal-soft: #163033;
    --green: #6bc49f;
    --green-soft: #173127;
    --amber: #e5b260;
    --amber-soft: #342813;
    --shadow: none;
    --shadow-soft: none;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #0e1012;
        --surface: #15181b;
        --surface-2: #111417;
        --surface-3: #20252a;
        --text: #f3f5f6;
        --muted: #a4acb4;
        --muted-2: #747d86;
        --line: #2a3035;
        --line-strong: #48515a;
        --accent: #69afe2;
        --accent-strong: #8dc6ed;
        --accent-soft: #172a38;
        --success: #69c59f;
        --success-soft: #173127;
        --warning: #e5b260;
        --warning-soft: #342813;
        --danger: #f08091;
        --danger-soft: #382027;
        --info: #78b9e5;
        --info-soft: #172a38;
        --chart-grid: #2c3338;
        --purple: #aaa6d8;
        --purple-soft: #26253a;
        --pink: #ed8da5;
        --pink-soft: #352229;
        --teal: #6dc4c8;
        --teal-soft: #163033;
        --green: #6bc49f;
        --green-soft: #173127;
        --amber: #e5b260;
        --amber-soft: #342813;
        --shadow: none;
        --shadow-soft: none;
    }
}

html, body { background: var(--bg); }
body {
    background: var(--bg) !important;
    font-size: 12.5px;
    line-height: 1.28;
    letter-spacing: 0;
}
.auth-page, .offline-page { background: var(--bg) !important; }
h1 { font-size: 20px; font-weight: 760; letter-spacing: -.025em; }
h2 { font-size: 13px; font-weight: 740; letter-spacing: -.01em; }
h3 { font-size: 12px; font-weight: 720; }
small { font-size: 9.5px; }
.app-kicker { display: none !important; }

.page-content {
    width: min(100%, 780px);
    padding: calc(5px + var(--safe-top)) 7px calc(var(--nav-height) + var(--safe-bottom) + 5px);
}
.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none !important;
}

/* Bottom navigation is a real fixed tab bar, not a floating glass pill. */
.bottom-nav {
    position: fixed !important;
    z-index: 1500;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(var(--nav-height) + var(--safe-bottom)) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 max(7px, calc((100% - 720px) / 2)) var(--safe-bottom) !important;
    transform: none !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.bottom-nav__item {
    position: relative;
    min-height: var(--nav-height);
    gap: 0;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted);
    font-size: 8px;
    font-weight: 650;
    transition: color .12s ease;
}
.bottom-nav__item::before {
    position: absolute;
    top: 0;
    left: 28%;
    width: 44%;
    height: 2px;
    background: transparent;
    content: "";
}
.bottom-nav__item.is-active { color: var(--accent); }
.bottom-nav__item.is-active::before { background: var(--accent); }
.bottom-nav__item:active { transform: none !important; background: var(--surface-3) !important; }
.bottom-nav__icon { width: 23px; height: 23px; }
.bottom-nav__icon-wrap { line-height: 0; }
.bottom-nav__icon-wrap > b { top: -4px; right: -8px; border-width: 1px; }

/* Headers */
.app-header, .compact-page-header {
    min-height: 31px;
    margin-bottom: 3px;
}
.overview-header { min-height: 31px; margin-bottom: 2px; }
.overview-header h1 { font-size: 20px; }
.app-header__title > span { margin-top: 0; font-size: 8.5px; }
.header-back, .compact-back {
    width: 29px;
    min-width: 29px;
    height: 29px;
    border-radius: 3px;
    box-shadow: none !important;
}
.page-heading { margin-bottom: 4px; }
.section-heading { min-height: 20px; margin-bottom: 3px; }
.section-block { margin-top: 5px; }

/* Controls: visible chrome is compact; parent/tab cells remain generous touch targets. */
.button {
    min-height: 30px;
    padding: 5px 8px;
    border-color: var(--line-strong);
    border-radius: 3px;
    background: var(--surface);
    box-shadow: none !important;
    font-weight: 700;
}
.button:hover { background: var(--surface-3); }
.button--primary { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none !important; }
.button--small { min-height: 26px; padding: 3px 6px; font-size: 9px; }
.icon-button {
    width: 27px;
    min-width: 27px;
    height: 27px;
    border-radius: 2px;
    background: transparent;
}
.icon-button .icon { width: 19px; height: 19px; }
.field input, .field select, .range-toolbar select, .range-toolbar input, .import-toolbar select {
    height: 31px;
    border-radius: 3px;
    background: var(--surface);
}
.field textarea, .paste-field textarea { border-radius: 3px; background: var(--surface); }
.field__label { font-size: 9px; }
.alert { margin: 3px 0; padding: 5px 6px; border-radius: 3px; }

/* Entry: dense 3x3 action surface */
.entry-page { width: min(100%, 540px); gap: 3px; }
.entry-hero { min-height: 34px; margin: 0; }
.entry-title { align-items: baseline; gap: 4px; }
.entry-title h1 { font-size: 20px; }
.child-line { margin-top: 0; font-size: 8px; }
.child-line strong { font-size: 9px; }
.time-chip {
    min-height: 28px;
    padding: 3px 6px;
    border-radius: 3px;
    box-shadow: none !important;
    color: var(--text);
    font-size: 8.5px;
}
.time-chip .icon { width: 15px; height: 15px; color: var(--accent); }
.reference-popover { top: 30px; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.16) !important; }

.entry-reminders { gap: 2px; margin-bottom: 2px; }
.entry-reminder {
    min-height: 34px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 3px 4px;
    border-width: 1px;
    border-left-width: 3px;
    border-radius: 2px;
    box-shadow: none !important;
}
.entry-reminder__icon { width: 22px; height: 22px; }
.entry-reminder__icon .icon { width: 21px; height: 21px; }
.entry-reminder strong { font-size: 9.5px; }
.entry-reminder small { font-size: 7.5px; }
.entry-reminder .button { min-height: 25px; padding: 3px 6px; font-size: 8.5px; }

.care-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 3px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.care-status {
    min-height: 43px;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 4px;
    padding: 4px 5px;
    border: 0;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.care-status + .care-status { border-left: 1px solid var(--line); }
.care-status__icon {
    width: 27px;
    height: 27px;
    border-radius: 0;
    background: transparent !important;
    color: var(--green);
}
.care-status--mama .care-status__icon { background: transparent !important; color: var(--teal); }
.care-status__icon .icon { width: 25px; height: 25px; }
.care-status small { font-size: 7.3px; font-weight: 650; }
.care-status strong { font-size: 9px; }
.care-status span { font-size: 7.4px; }

.quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 63px;
    gap: 4px;
}
.quick-card {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    box-shadow: none !important;
    transition: border-color .1s ease, background .1s ease;
}
.quick-card::before { display: none !important; }
.quick-card::after { display: none !important; }
.quick-card:active { transform: none !important; border-color: var(--tone); background: var(--surface-3); }
.quick-card__main { gap: 1px; padding: 4px 3px 3px; }
.quick-card__icon {
    width: 31px;
    height: 31px;
    border-radius: 0;
    background: transparent !important;
    color: var(--tone);
}
.quick-card__icon .icon { width: 31px; height: 31px; }
.quick-card__copy strong { font-size: 10.5px; font-weight: 740; }
.quick-card__copy small { font-size: 8px; }
.quick-card .option-button {
    top: 0;
    right: 0;
    width: 23px;
    min-width: 23px;
    height: 23px;
    border-radius: 0;
}
.quick-card .option-button .icon { width: 17px; height: 17px; }

.import-cta {
    min-height: 30px;
    margin: 3px 0;
    grid-template-columns: 20px 1fr 14px;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--surface) !important;
    box-shadow: none !important;
    color: var(--text);
}
.import-cta__icon { width: 20px; height: 20px; color: var(--accent); }
.import-cta strong { font-size: 9.5px; color: var(--text); }
.import-cta > .icon:last-child { color: var(--muted); }

.recent-entry {
    padding: 3px 5px 0;
    border-radius: 3px;
    box-shadow: none !important;
}
.recent-entry .section-heading { min-height: 20px; }
.recent-entry .section-heading h2 { font-size: 10px; }
.recent-entry__row {
    min-height: 33px;
    grid-template-columns: 23px minmax(0, 1fr) 25px;
    gap: 4px;
    padding: 3px 0;
}
.recent-entry__row .event-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent !important;
}
.recent-entry__row .event-icon .icon { width: 21px; height: 21px; }
.recent-entry__row strong { font-size: 9.4px; }
.recent-entry__row small { margin-top: 0; font-size: 7.4px; }
.recent-entry__note { margin-top: 1px; font-size: 8.2px; line-height: 1.15; }
.recent-entry__more {
    min-height: 27px;
    margin: 1px -5px 0;
    padding: 3px 6px;
    border-radius: 0;
    font-size: 9px;
}
.recent-entry__more .icon { width: 15px; height: 15px; }

/* Overview navigation: flat tab strip with underline */
.overview-subnav {
    gap: 0;
    margin-bottom: 3px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none !important;
}
.overview-subnav a {
    position: relative;
    min-height: 37px;
    gap: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 7.2px;
    font-weight: 650;
}
.overview-subnav a::after {
    position: absolute;
    right: 20%;
    bottom: 0;
    left: 20%;
    height: 2px;
    background: transparent;
    content: "";
}
.overview-subnav a.is-active { color: var(--accent); }
.overview-subnav a.is-active::after { background: var(--accent); }
.overview-subnav__icon { width: 22px; height: 20px; }
.overview-subnav a .icon { width: 19px; height: 19px; }

.day-nav, .period-bar {
    min-height: 30px;
    margin-bottom: 3px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.day-nav { grid-template-columns: 33px minmax(0, 1fr) 33px; }
.day-nav > a, .day-nav > span { height: 29px; border: 0 !important; }
.day-nav > a:hover { background: var(--surface-3); }
.day-nav strong { font-size: 10px; }
.day-nav .icon { width: 18px; height: 18px; }
.period-bar { min-height: 30px; grid-template-columns: 21px minmax(0, 1fr) auto; padding: 3px 2px; }
.period-bar .icon { width: 18px; height: 18px; }
.period-bar strong { font-size: 9.5px; }
.period-bar span { font-size: 8px; }

.overview-export {
    min-height: 34px;
    grid-template-columns: 20px minmax(90px, 1fr) auto auto;
    gap: 4px;
    margin-bottom: 3px;
    padding: 2px 0 3px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.overview-export__lead { gap: 0; }
.overview-export__lead b { display: none; }
.overview-export__lead .icon { width: 18px; height: 18px; }
.overview-export label { gap: 3px; }
.overview-export label > span { font-size: 7.5px; }
.overview-export select { height: 27px; padding: 2px 20px 2px 5px; border-radius: 2px; background: var(--surface); font-size: 8.5px; }
.overview-export__actions { gap: 2px; }
.export-button {
    min-height: 27px;
    gap: 2px;
    padding: 2px 5px;
    border-color: var(--line-strong);
    border-radius: 2px;
    background: var(--surface);
    font-size: 8px;
}
.export-button .icon { width: 17px; height: 17px; }

/* Today's values are one compact instrument strip, not four floating cards. */
.today-overview {
    gap: 0;
    margin-bottom: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.today-card {
    min-height: 48px;
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 3px;
    padding: 4px 5px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
.today-card:last-child { border-right: 0; }
.today-card::after { display: none !important; }
.today-card > span {
    width: 21px;
    height: 21px;
    border-radius: 0;
    background: transparent !important;
}
.today-card > span .icon { width: 20px; height: 20px; }
.today-card small { font-size: 7.2px; font-weight: 650; }
.today-card strong { margin-top: 0; font-size: 10.5px; font-weight: 760; }
.today-card em { font-size: 7px; }

.week-panel {
    margin-bottom: 4px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    box-shadow: none !important;
}
.week-panel__head { margin-bottom: 4px; }
.week-panel__head span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; }
.week-panel__head h2 { margin-top: 0; font-size: 10.5px; }
.week-panel__head-icon { width: 20px; height: 20px; }
.week-kpis { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; }
.week-kpis > div {
    padding: 4px 5px;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.week-kpis > div:last-child { border-right: 0; }
.week-kpis small { font-size: 7px; }
.week-kpis strong { margin-top: 0; font-size: 10.5px; }
.week-visuals { gap: 4px; margin-top: 4px; }
.week-visuals > div { padding: 4px 5px 2px; border-radius: 2px; background: transparent; }
.week-visuals > div > small { font-size: 7px; }
.week-bars { height: 39px; gap: 3px; margin-top: 2px; }
.week-bars__item { gap: 1px; }
.week-bars__item i { width: min(12px, 72%); border-radius: 1px 1px 0 0; }
.week-bars__item b { font-size: 6.4px; }
.stat-assessment {
    margin: 4px 0 0;
    padding: 5px 6px;
    border-left-width: 2px;
    border-radius: 0;
    background: var(--surface-2);
    font-size: 8.8px;
    line-height: 1.35;
}
.stat-assessment--weight { margin-bottom: 4px; }

.overview-care {
    gap: 0;
    margin-bottom: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
}
.overview-care__item {
    min-height: 43px;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 4px;
    padding: 4px 5px;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.overview-care__item + .overview-care__item { border-left: 1px solid var(--line); }
.overview-care__icon {
    width: 27px;
    height: 27px;
    border-radius: 0;
    background: transparent !important;
}
.overview-care__icon .icon { width: 25px; height: 25px; }
.overview-care__item small { font-size: 7.3px; }
.overview-care__item strong { font-size: 9px; }
.overview-care__item div > span { font-size: 7.4px; }

/* Weight: no gradient hero, just strong data hierarchy. */
.weight-hero {
    grid-template-columns: minmax(112px, .72fr) 1.45fr minmax(120px, .8fr);
    gap: 3px;
    margin-bottom: 4px;
}
.weight-hero__main, .weight-hero__stats, .weight-hero__spark {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.weight-hero__main {
    min-height: 58px;
    padding: 6px 7px;
    color: var(--text);
    border-left: 3px solid var(--accent);
}
.weight-hero__main small { font-size: 7px; color: var(--muted); opacity: 1; }
.weight-hero__main strong { margin: 0; font-size: 18px; }
.weight-hero__main span { font-size: 7px; color: var(--muted); opacity: 1; }
.weight-hero__stats { padding: 3px; }
.weight-hero__stats > div { padding: 3px 5px; }
.weight-hero__stats small { font-size: 6.8px; }
.weight-hero__stats strong { margin-top: 0; font-size: 9.5px; }
.weight-hero__spark { padding: 4px; }
.stat-spark { height: 48px; }
.stat-spark__area { fill: transparent; }
.stat-spark__line { stroke-width: 1.8; }

.chart-panel { padding: 5px; border-radius: 3px; box-shadow: none !important; }
.chart-head { min-height: 28px; margin-bottom: 1px; }
.chart-head small { font-size: 7px; }
.chart-head strong { font-size: 9.5px; }
.chart-controls { gap: 1px; border: 0; }
.chart-controls button {
    min-width: 28px;
    height: 27px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: var(--surface);
}
.chart-canvas { min-height: 170px; border-radius: 0; background: var(--surface); }
.chart-legend { padding-top: 2px; }
.weight-point__dot { stroke-width: 1.2 !important; }
.weight-point.is-selected .weight-point__dot { stroke-width: 1.8 !important; }

.sleep-switch {
    gap: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none !important;
    border: 0;
    border-bottom: 1px solid var(--line);
}
.sleep-switch a { min-height: 29px; padding: 5px 8px; border-radius: 0; background: transparent; }
.sleep-switch a.is-active { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.chart-panel--sleep { margin-bottom: 4px; }

/* Timeline: list rows with separators, not stacked rounded cards. */
.timeline-section { margin-top: 4px; }
.timeline-section .section-heading { min-height: 22px; margin-bottom: 1px; }
.timeline-section .section-heading h2 { font-size: 10.5px; }
.timeline { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.timeline-date { margin: 0; min-height: 19px; padding: 3px 5px; border-top: 1px solid var(--line); background: var(--surface-2); }
.timeline-date:first-child { border-top: 0; }
.timeline-date span { padding: 0; border-radius: 0; background: transparent; font-size: 7px; }
.timeline-event {
    min-height: 41px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px 5px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 !important;
    background: var(--surface);
    box-shadow: none !important;
}
.timeline-date + .timeline-event { border-top: 0; }
.event-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent !important;
}
.event-icon .icon { width: 23px; height: 23px; }
.timeline-event__top strong { font-size: 9.5px; }
.timeline-event__top time { font-size: 7.6px; }
.timeline-event__meta { margin-top: 0; font-size: 7.2px; }
.timeline-event__content .event-note, .timeline-event__content p.event-note { margin-top: 2px; font-size: 8.3px; line-height: 1.2; }
.event-actions .icon-button { width: 25px; min-width: 25px; height: 25px; }
.event-actions .icon-button .icon { width: 18px; height: 18px; }
.pagination { min-height: 30px; margin-top: 3px; }

/* Analysis: editorial sections, not a dashboard card wall. */
.analysis-intro {
    gap: 6px;
    margin-bottom: 3px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.analysis-intro > span { width: 26px; height: 26px; border-radius: 0; background: transparent; color: var(--accent); }
.analysis-intro > span .icon { width: 24px; height: 24px; }
.analysis-intro h2 { font-size: 14px; }
.analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.analysis-card {
    padding: 6px;
    border-radius: 3px;
    box-shadow: none !important;
}
.analysis-card::after { display: none !important; }
.analysis-card header { grid-template-columns: 26px minmax(0, 1fr); gap: 5px; margin-bottom: 4px; }
.analysis-card header > span { width: 26px; height: 26px; border-radius: 0; background: transparent !important; }
.analysis-card header .icon { width: 24px; height: 24px; }
.analysis-card header small { font-size: 7px; }
.analysis-card header strong { font-size: 10px; }
.analysis-card dl > div { padding: 3px 0; }
.analysis-card dt { font-size: 7.5px; }
.analysis-card dd { font-size: 8.5px; }
.analysis-card > p { margin-top: 4px; padding-top: 4px; font-size: 8px; line-height: 1.3; }

/* Reminders */
.reminders-page .app-header { min-height: 33px; }
.reminder-summary { gap: 0; margin-bottom: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.reminder-summary > div {
    min-height: 36px;
    justify-content: flex-start;
    gap: 5px;
    padding: 4px 6px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
.reminder-summary > div:last-child { border-right: 0; }
.reminder-summary__icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--muted); }
.reminder-summary__icon .icon { width: 19px; height: 19px; }
.reminder-summary > div:first-child .reminder-summary__icon { color: var(--warning); }
.reminder-summary > div:last-child .reminder-summary__icon { color: var(--success); }
.reminder-summary small { font-size: 7.5px; }
.reminder-summary strong { margin-left: auto; font-size: 14px; }
.reminder-list { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.reminder-card {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px 5px;
    border: 0;
    border-top: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.reminder-card:first-child { border-top: 0; }
.reminder-card--due { border-left-color: var(--warning); background: var(--warning-soft) !important; }
.reminder-card--done { border-left-color: var(--success); }
.reminder-card__icon { width: 27px; height: 27px; border-radius: 0 !important; background: transparent !important; }
.reminder-card__icon .icon { width: 25px; height: 25px; }
.reminder-card__title strong { font-size: 10px; }
.reminder-card__body > span { font-size: 7.4px; }
.reminder-card__body > small { font-size: 8.3px; }
.reminder-history { margin-top: 4px; padding: 5px; border-radius: 3px !important; box-shadow: none !important; }

/* Settings and data */
.settings-page { gap: 3px; }
.settings-nav {
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
}
.settings-nav a {
    min-height: 36px;
    align-content: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: 7.3px;
}
.settings-nav a.is-active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.settings-nav .icon { width: 20px; height: 20px; margin-bottom: 0; }
.settings-section { padding: 5px; }
.settings-form { gap: 3px; }
.settings-inline-grid { gap: 3px; }
.settings-page .panel,
.import-page .panel,
.import-preview-page .panel,
.import-result-page .panel,
.reminders-page .panel,
.settings-card,
.settings-menu a,
.reminder-create,
.reminder-history {
    border-radius: 3px !important;
    box-shadow: none !important;
}
.data-action-grid { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.data-action-card {
    min-height: 40px;
    grid-template-columns: 25px minmax(0, 1fr) 13px;
    gap: 4px;
    padding: 3px 5px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
}
.data-action-card:last-child { border-right: 0; }
.data-action-card__icon { width: 25px; height: 25px; }
.data-action-card__icon .icon { width: 24px; height: 24px; }
.data-action-card strong { font-size: 8.7px; }
.compact-details > summary { min-height: 31px; padding: 4px 6px; }
.card-order-list { gap: 2px; padding: 4px; }
.card-order-row { min-height: 29px; border-radius: 2px; }
.choice-card > span { min-height: 29px; border-radius: 2px; }
.sticky-form-action { bottom: calc(var(--nav-height) + var(--safe-bottom)); padding: 3px 0; background: var(--bg); }

/* Auth is intentionally plain and recognisable, not a glass/gradient landing card. */
.auth-card {
    width: min(calc(100% - 24px), 330px);
    padding: 16px;
    border-radius: 4px;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.auth-card::before { display: none; }
.brand-lockup--center { gap: 5px; margin-bottom: 12px; }
.brand-lockup img { width: 42px; height: 42px; filter: none; }
.brand-name { font-size: 21px; }
.auth-card .field input { height: 38px; }
.auth-card .button--primary { min-height: 37px; }
.offline-state { border-radius: 4px; box-shadow: none !important; }

.snackbar { border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.18) !important; }
.dialog-card { border-radius: 5px; box-shadow: 0 14px 38px rgba(0,0,0,.28) !important; }

/* Small phone density. */
@media (max-width: 620px) {
    .page-content { padding-right: 5px; padding-left: 5px; }
    .analysis-grid { grid-template-columns: 1fr; }
    .weight-hero { grid-template-columns: .8fr 1.35fr; }
    .weight-hero__spark { display: none; }
}

@media (max-width: 470px) {
    .overview-export {
        grid-template-columns: 18px minmax(78px, 1fr) auto auto;
        gap: 3px;
    }
    .overview-export__lead b { display: none; }
    .overview-export__notes { grid-column: auto; }
    .overview-export__actions { grid-column: auto; grid-row: auto; align-self: center; }
    .overview-export label > span { display: none; }
    .overview-export__notes span { display: inline; font-size: 7px; }
    .export-button { min-width: 39px; flex-direction: row; padding: 2px 4px; }
    .export-button span { font-size: 7px; }
    .today-card { grid-template-columns: 19px minmax(0, 1fr); padding: 3px 4px; }
    .today-card > span { width: 19px; height: 19px; }
    .today-card > span .icon { width: 18px; height: 18px; }
    .today-card strong { font-size: 9.7px; }
    .week-panel { padding: 4px 5px; }
    .week-kpis > div { padding: 3px 4px; }
    .week-kpis small { font-size: 6.5px; }
    .week-kpis strong { font-size: 9.8px; }
    .weight-hero { grid-template-columns: 1fr; }
    .weight-hero__main { min-height: 52px; }
    .weight-hero__stats { min-height: 47px; }
    .weight-hero__stats > div { padding: 3px 5px; }
    .settings-inline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    h1 { font-size: 19px; }
    .bottom-nav { width: 100% !important; bottom: 0 !important; }
    .overview-subnav a { min-height: 35px; font-size: 6.7px; }
    .overview-subnav a .icon { width: 18px; height: 18px; }
    .quick-grid { grid-auto-rows: 60px; gap: 3px; }
    .quick-card__icon, .quick-card__icon .icon { width: 30px; height: 30px; }
    .quick-card__copy strong { font-size: 10px; }
    .care-status { padding-right: 3px; padding-left: 3px; }
    .timeline-event { grid-template-columns: 24px minmax(0, 1fr) auto; padding-right: 3px; padding-left: 3px; }
}

/* On short displays keep the primary screen self-contained by showing fewer recents. */
@media (max-width: 600px) and (max-height: 700px) {
    .entry-page { gap: 2px; }
    .entry-hero { min-height: 31px; }
    .quick-grid { grid-auto-rows: 57px; gap: 3px; }
    .quick-card__main { padding-top: 2px; padding-bottom: 2px; }
    .quick-card__icon, .quick-card__icon .icon { width: 28px; height: 28px; }
    .care-status { min-height: 39px; }
    .import-cta { min-height: 27px; margin: 2px 0; }
    .recent-entry__row { min-height: 30px; }
    .recent-entry__row:nth-child(n+4) { display: none; }
    .recent-entry__more { min-height: 25px; }
}

@media (max-width: 600px) and (max-height: 590px) {
    .quick-grid { grid-auto-rows: 54px; }
    .quick-card__copy small { display: none; }
    .care-status { min-height: 37px; }
    .recent-entry__row:nth-child(n+3) { display: none; }
}
.day-nav strong { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; }
.day-nav strong .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.day-nav strong span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-icon { width: 18px; height: 18px; color: var(--muted); }

/* Lexta 3.2: compact age comparisons + refined icon language */
.reference-compare {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 5px;
    margin-top: 4px;
    padding: 5px 1px 0;
    border-top: 1px solid var(--line);
}
.reference-compare__icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--accent);
}
.reference-compare__icon .icon { width: 22px; height: 22px; }
.reference-compare--good .reference-compare__icon { color: var(--success); }
.reference-compare--high .reference-compare__icon { color: var(--amber); }
.reference-compare--low .reference-compare__icon { color: var(--danger); }
.reference-compare__body { min-width: 0; }
.reference-compare__head {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
}
.reference-compare__head small {
    overflow: hidden;
    color: var(--muted);
    font-size: 7px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reference-compare__head b {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 8px;
    font-weight: 780;
}
.reference-compare__numbers {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
    margin-top: 1px;
}
.reference-compare__numbers strong { font-size: 10.5px; font-weight: 790; }
.reference-compare__numbers span {
    overflow: hidden;
    color: var(--muted);
    font-size: 7.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reference-compare p {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 7.5px;
    line-height: 1.28;
}
.reference-compact-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}
.reference-compact {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 3px;
    padding: 0 7px;
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: 7.3px;
    font-style: normal;
    line-height: 17px;
}
.reference-compact:first-child { padding-left: 0; }
.reference-compact:last-child { border-right: 0; }
.reference-compact .icon { width: 15px; height: 15px; color: var(--accent); }
.reference-compact--good .icon { color: var(--success); }
.reference-compact--high .icon { color: var(--amber); }
.reference-compact--low .icon { color: var(--danger); }
.reference-compact b { color: var(--text); font-size: 7.3px; font-weight: 760; }
.reference-compact em {
    overflow: hidden;
    font-size: 7.3px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analysis-card > .reference-compact {
    display: flex;
    width: 100%;
    margin: -1px 0 3px;
    padding: 2px 0 3px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

/* Icons are the visual anchor; keep their chrome minimal. */
.quick-card__icon .icon { width: 33px; height: 33px; }
.overview-subnav a .icon { width: 20px; height: 20px; }
.event-icon .icon { width: 24px; height: 24px; }
.recent-entry__more > .icon:first-child { width: 18px; height: 18px; }

@media (max-width: 470px) {
    .reference-compare__head { display: grid; gap: 0; }
    .reference-compare__head b { font-size: 7.8px; }
    .reference-compare__numbers { gap: 4px; }
    .reference-compare__numbers span { font-size: 7.2px; }
    .reference-compact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reference-compact {
        justify-content: center;
        gap: 2px;
        padding: 0 3px;
        font-size: 6.8px;
    }
    .reference-compact .icon { width: 13px; height: 13px; }
    .reference-compact b { display: none; }
    .reference-compact em { font-size: 6.8px; }
}
.section-heading h2 { display: inline-flex; align-items: center; gap: 4px; }
.section-heading__icon { width: 16px; height: 16px; color: var(--accent); }
.recent-entry .section-heading__icon { width: 15px; height: 15px; }

/* Lexta 3.3: cohesive compact app UI
   One visual hierarchy, deliberate spacing, flat surfaces, no gradients/glass. */
:root {
    --bg: #f4f5f6;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-3: #eceff2;
    --text: #171a1f;
    --muted: #66707a;
    --muted-2: #8c959f;
    --line: #d8dde2;
    --line-strong: #b8c0c8;
    --accent: #0b6fb8;
    --accent-strong: #08598f;
    --accent-soft: #e8f2f9;
    --success: #177a58;
    --success-soft: #eaf4ef;
    --warning: #9a650f;
    --warning-soft: #fff4df;
    --danger: #bf4053;
    --danger-soft: #fbecef;
    --info: #196da7;
    --info-soft: #eaf3fa;
    --chart-grid: #dfe4e8;
    --purple: #655ca1;
    --pink: #bd4f72;
    --teal: #167d84;
    --green: #2a805f;
    --amber: #a86d17;
    --nav-height: 54px;
    --radius: 6px;
    --radius-small: 4px;
}

html[data-theme="dark"] {
    --bg: #101214;
    --surface: #181b1f;
    --surface-2: #14171a;
    --surface-3: #22272c;
    --text: #f3f5f7;
    --muted: #a4adb7;
    --muted-2: #77818c;
    --line: #30363d;
    --line-strong: #4a535d;
    --accent: #69b5ec;
    --accent-strong: #8ac7f0;
    --accent-soft: #172b39;
    --success: #72c9a7;
    --success-soft: #183329;
    --warning: #e2b45f;
    --warning-soft: #352a16;
    --danger: #ef8394;
    --danger-soft: #3b2229;
    --info: #79bbe6;
    --info-soft: #172b39;
    --chart-grid: #30363d;
    --purple: #aaa1df;
    --pink: #ee8eaa;
    --teal: #75c8cd;
    --green: #79c9a8;
    --amber: #e2b45f;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #101214;
        --surface: #181b1f;
        --surface-2: #14171a;
        --surface-3: #22272c;
        --text: #f3f5f7;
        --muted: #a4adb7;
        --muted-2: #77818c;
        --line: #30363d;
        --line-strong: #4a535d;
        --accent: #69b5ec;
        --accent-strong: #8ac7f0;
        --accent-soft: #172b39;
        --success: #72c9a7;
        --success-soft: #183329;
        --warning: #e2b45f;
        --warning-soft: #352a16;
        --danger: #ef8394;
        --danger-soft: #3b2229;
        --info: #79bbe6;
        --info-soft: #172b39;
        --chart-grid: #30363d;
        --purple: #aaa1df;
        --pink: #ee8eaa;
        --teal: #75c8cd;
        --green: #79c9a8;
        --amber: #e2b45f;
    }
}

body {
    font-size: 13px;
    line-height: 1.28;
    font-weight: 400;
}
h1 { font-size: 21px; line-height: 1.08; font-weight: 750; letter-spacing: -.025em; }
h2 { font-size: 13.5px; line-height: 1.18; font-weight: 720; }
h3 { font-size: 12.5px; font-weight: 700; }
small { font-size: 10px; }

.page-content {
    width: min(100%, 820px);
    padding: calc(6px + var(--safe-top)) 8px calc(var(--nav-height) + var(--safe-bottom) + 8px);
}
.panel { border-radius: var(--radius); }

/* Persistent bottom navigation with a calm active state. */
.bottom-nav {
    height: calc(var(--nav-height) + var(--safe-bottom)) !important;
    padding: 0 max(8px, calc((100% - 760px) / 2)) var(--safe-bottom) !important;
    border-top: 1px solid var(--line) !important;
    background: var(--surface) !important;
}
.bottom-nav__item {
    min-height: var(--nav-height);
    gap: 1px;
    font-size: 9px;
    font-weight: 650;
}
.bottom-nav__item::before { left: 31%; width: 38%; height: 2px; }
.bottom-nav__icon { width: 23px; height: 23px; stroke-width: 1.85; }

/* Page headers stay compact but readable. */
.app-header, .compact-page-header { min-height: 34px; margin-bottom: 4px; }
.overview-header { min-height: 35px; margin-bottom: 3px; }
.app-header__title > span { margin-top: 1px; font-size: 9.5px; }
.entry-title { gap: 5px; }
.entry-title h1 { font-size: 21px; }
.child-line { font-size: 9px; }
.child-line strong { font-size: 9.5px; }
.section-heading { min-height: 24px; margin-bottom: 2px; }
.section-heading--compact { min-height: 22px; }
.section-heading h2 { gap: 5px; font-size: 12px; }
.section-heading__icon { width: 16px; height: 16px; }

/* Buttons and fields use the same geometry everywhere. */
.button {
    min-height: 32px;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 680;
}
.button--small { min-height: 28px; padding: 4px 7px; font-size: 9.5px; }
.icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 4px;
}
.icon-button .icon { width: 18px; height: 18px; }
.field input, .field select, .range-toolbar select, .range-toolbar input, .import-toolbar select { height: 33px; }
.field__label { font-size: 9.5px; }

/* Entry screen */
.entry-page { width: min(100%, 560px); gap: 4px; overflow: visible; }
.entry-hero { min-height: 36px; }
.time-chip { min-height: 30px; padding: 4px 7px; font-size: 9.5px; }
.time-chip .icon { width: 16px; height: 16px; }

.care-strip {
    margin-bottom: 0;
    border-radius: 5px;
}
.care-status {
    min-height: 52px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
    align-items: center;
}
.care-status__icon { width: 28px; height: 28px; }
.care-status__icon .icon { width: 27px; height: 27px; }
.care-status > div, .care-status__copy { display: block; min-width: 0; }
.care-status small { display: block; margin-bottom: 1px; font-size: 8.5px; font-weight: 650; line-height: 1.1; }
.care-status strong { display: block; font-size: 10.5px; font-weight: 720; line-height: 1.15; }
.care-status > div > span:not(.care-status__hint) { display: inline; }
.care-status [data-care-baby-time], .care-status__hint {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.care-status__sides {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}
.care-side {
    display: grid !important;
    min-width: 0;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px;
    line-height: 1.13;
}
.care-side b { color: var(--text); font-size: 9px; font-weight: 760; }
.care-side > span {
    display: inline !important;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 9px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-grid { grid-auto-rows: 66px; gap: 4px; }
.quick-card { border-radius: 5px; }
.quick-card__main { gap: 1px; padding: 4px 4px 3px; }
.quick-card__icon, .quick-card__icon .icon { width: 29px; height: 29px; }
.quick-card__copy strong { font-size: 11px; font-weight: 720; line-height: 1.08; }
.quick-card__copy small { margin-top: 1px; font-size: 8.5px; line-height: 1; }
.quick-card .option-button { width: 25px; min-width: 25px; height: 25px; }
.quick-card .option-button .icon { width: 15px; height: 15px; }
.import-cta {
    min-height: 34px;
    grid-template-columns: 20px 1fr 16px;
    gap: 6px;
    padding: 4px 8px;
    border-color: var(--line-strong);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-size: 10px;
}
.import-cta__icon { width: 18px; height: 18px; color: var(--accent); }
.import-cta > .icon:last-child { color: var(--muted); }

.recent-entry { padding: 4px 7px 0; border-radius: 5px; }
.recent-entry .section-heading { min-height: 26px; }
.recent-entry .section-heading h2 { color: var(--text); font-size: 11px; }
.recent-entry .section-heading .button { min-height: 26px; padding: 3px 6px; font-size: 9px; }
.recent-entry__row {
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr) 28px;
    gap: 6px;
    padding: 4px 0;
}
.recent-entry__row + .recent-entry__row { border-top: 1px solid var(--line); }
.recent-entry__row .event-icon { width: 23px; min-width: 23px; height: 23px; }
.recent-entry__row .event-icon .icon { width: 22px; height: 22px; }
.recent-entry__row > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 1px; }
.recent-entry__row strong { font-size: 10px; font-weight: 710; }
.recent-entry__row small { font-size: 8px; }
.recent-entry__note {
    grid-column: 1 / -1;
    margin: 0 !important;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-entry__more {
    min-height: 32px;
    margin: 2px -7px 0;
    padding: 4px 8px;
    font-size: 9.5px;
}

/* Overview navigation and toolbars */
.overview-page { width: min(100%, 800px); }
.overview-subnav { margin-bottom: 4px; }
.overview-subnav a { min-height: 44px; gap: 1px; font-size: 8.5px; }
.overview-subnav a::after { right: 24%; left: 24%; }
.overview-subnav__icon { width: 22px; height: 21px; }
.overview-subnav a .icon { width: 20px; height: 20px; }

.day-nav, .period-bar { min-height: 34px; margin-bottom: 3px; }
.day-nav { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.day-nav > a, .day-nav > span { height: 33px; }
.day-nav strong { font-size: 10.5px; }
.period-bar { grid-template-columns: 23px minmax(0, 1fr) auto; padding: 4px 3px; }
.period-bar strong { font-size: 10px; }
.period-bar span { font-size: 8.5px; }

.overview-export {
    min-height: 36px;
    grid-template-columns: 21px minmax(82px, 1fr) auto auto;
    gap: 5px;
    padding: 3px 1px 4px;
}
.overview-export__lead .icon { width: 19px; height: 19px; }
.overview-export label > span { font-size: 8px; }
.overview-export select { height: 29px; font-size: 9px; }
.export-button { min-height: 29px; padding: 3px 6px; font-size: 8.5px; }
.export-button .icon { width: 17px; height: 17px; }

/* Daily metrics: one dense strip with strong values. */
.today-overview { margin-bottom: 5px; border-radius: 5px; }
.today-card {
    min-height: 55px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 5px;
    padding: 5px 7px;
}
.today-card > span { width: 24px; height: 24px; }
.today-card > span .icon { width: 23px; height: 23px; }
.today-card small { font-size: 8.5px; font-weight: 650; }
.today-card strong { font-size: 12.5px; font-weight: 750; line-height: 1.05; }
.today-card em { margin-top: 1px; font-size: 8px; line-height: 1.05; }

/* Seven-day summaries: one heading, one date range, then data. */
.week-panel {
    margin-bottom: 5px;
    padding: 6px 7px;
    border-radius: 5px;
}
.week-panel__head {
    display: grid;
    min-height: 25px;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.week-panel__head > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.week-panel__head h2 { margin: 0; font-size: 12px; font-weight: 730; }
.week-panel__head span {
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 560;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.week-panel__head-icon { width: 20px; height: 20px; color: var(--muted); }
.week-kpis { border-radius: 4px; }
.week-kpis > div { min-height: 44px; padding: 5px 6px; }
.week-kpis small { color: var(--muted); font-size: 8px; line-height: 1.05; }
.week-kpis strong { margin-top: 2px; font-size: 12.5px; line-height: 1.05; }
.week-visuals { gap: 6px; margin-top: 5px; }
.week-visuals > div { padding: 4px 5px 2px; }
.week-visuals > div > small { font-size: 8px; }
.week-bars { height: 46px; gap: 4px; }
.week-bars__item b { font-size: 7.5px; }

.reference-compact-row { margin-top: 5px; padding-top: 5px; }
.reference-compact {
    gap: 4px;
    min-height: 21px;
    padding: 0 9px;
    font-size: 8.5px;
    line-height: 21px;
}
.reference-compact .icon { width: 15px; height: 15px; }
.reference-compact b, .reference-compact em { font-size: 8.5px; }
.reference-compare {
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 7px;
    margin-top: 6px;
    padding-top: 6px;
}
.reference-compare__icon, .reference-compare__icon .icon { width: 23px; height: 23px; }
.reference-compare__head small { font-size: 8px; }
.reference-compare__head b { font-size: 9px; }
.reference-compare__numbers strong { font-size: 11.5px; }
.reference-compare__numbers span { font-size: 8.5px; }
.reference-compare p { margin-top: 2px; font-size: 8.5px; }
.stat-assessment { margin-top: 5px; padding: 5px 7px; font-size: 9px; line-height: 1.3; }

/* Current care on overview mirrors the entry screen. */
.overview-care { margin-bottom: 5px; border-radius: 5px; }
.overview-care__item {
    min-height: 50px;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
    align-items: center;
}
.overview-care__icon { width: 28px; height: 28px; }
.overview-care__icon .icon { width: 27px; height: 27px; }
.overview-care__item > div, .overview-care__copy { min-width: 0; }
.overview-care__item small { display: block; margin-bottom: 1px; font-size: 8.5px; }
.overview-care__item strong { display: block; font-size: 10px; line-height: 1.15; }
.overview-care__item div > span:not(.care-status__hint) { display: inline; }
.overview-care__item [data-care-baby-time], .overview-care__item .care-status__hint {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-care__item .care-status__sides { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5px; }
.overview-care__item .care-side { grid-template-columns: 11px minmax(0, 1fr); }
.overview-care__item .care-side > span { font-size: 8.5px; }

/* Timeline: note uses the free space beside the title instead of forcing a third row. */
.timeline-section { margin-top: 5px; }
.timeline-section .section-heading { min-height: 26px; margin-bottom: 2px; }
.timeline-section .section-heading h2 { font-size: 12px; }
.timeline { border-radius: 5px; }
.timeline-date { min-height: 22px; padding: 4px 7px; }
.timeline-date span { font-size: 8px; }
.timeline-event {
    min-height: 47px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 5px 7px;
    align-items: center;
}
.event-icon { width: 26px; min-width: 26px; height: 26px; }
.event-icon .icon { width: 25px; height: 25px; }
.timeline-event__content { display: grid; min-width: 0; gap: 2px; }
.timeline-event__top {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
}
.timeline-event__top strong {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.15;
}
.event-note-inline {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-event__meta { margin-top: 0; font-size: 8px; line-height: 1.1; }
.event-actions { gap: 1px; }
.event-actions .icon-button { width: 29px; min-width: 29px; height: 29px; }
.event-actions .icon-button .icon { width: 18px; height: 18px; }

/* Weight, sleep and analysis get the same spacing rhythm. */
.weight-hero { gap: 4px; margin-bottom: 5px; }
.weight-hero__main, .weight-hero__stats, .weight-hero__spark, .chart-panel, .analysis-card { border-radius: 5px; }
.weight-hero__main { min-height: 64px; padding: 7px 8px; }
.weight-hero__main strong { font-size: 20px; }
.weight-hero__main small, .weight-hero__main span { font-size: 8px; }
.weight-hero__stats > div { padding: 4px 6px; }
.weight-hero__stats small { font-size: 7.5px; }
.weight-hero__stats strong { font-size: 10px; }
.chart-panel { padding: 7px; }
.chart-head { min-height: 30px; }
.chart-head small { font-size: 8px; }
.chart-head strong { font-size: 10px; }
.sleep-switch a { min-height: 33px; font-size: 9.5px; }
.analysis-grid { gap: 5px; }
.analysis-card { padding: 7px; }
.analysis-card header { margin-bottom: 5px; }
.analysis-card header small { font-size: 8px; }
.analysis-card header strong { font-size: 11px; }
.analysis-card dt { font-size: 8.5px; }
.analysis-card dd { font-size: 9.5px; }
.analysis-card > p { font-size: 9px; }

/* Mobile-specific balancing. */
@media (max-width: 600px) {
    .page-content { padding-right: 6px; padding-left: 6px; }
    .overview-care__item .care-status__sides { grid-template-columns: 1fr; gap: 0; }
    .timeline-event__top strong { max-width: 56%; }
}

@media (max-width: 430px) {
    h1 { font-size: 20px; }
    .overview-subnav a { min-height: 42px; font-size: 8px; }
    .overview-subnav a .icon { width: 19px; height: 19px; }
    .overview-export { grid-template-columns: 20px minmax(70px, 1fr) auto auto; gap: 3px; }
    .overview-export label > span { display: none; }
    .overview-export__notes span { display: inline; }
    .today-card { min-height: 52px; padding: 4px 5px; }
    .today-card small { font-size: 8px; }
    .today-card strong { font-size: 11.5px; }
    .today-card em { font-size: 7.5px; }
    .week-panel { padding: 5px 6px; }
    .week-kpis > div { min-height: 42px; padding: 4px; }
    .week-kpis small { font-size: 7.5px; }
    .week-kpis strong { font-size: 11.5px; }
    .reference-compact { padding: 0 5px; font-size: 8px; }
    .reference-compact b, .reference-compact em { font-size: 8px; }
    .care-status { min-height: 50px; padding: 4px 5px; }
    .care-status small { font-size: 8px; }
    .care-side > span { font-size: 8.5px; }
    .quick-grid { grid-auto-rows: 63px; }
    .quick-card__icon, .quick-card__icon .icon { width: 28px; height: 28px; }
    .timeline-event { padding-right: 5px; padding-left: 5px; }
    .event-actions .icon-button { width: 27px; min-width: 27px; height: 27px; }
}

@media (max-width: 350px) {
    .child-line span:last-child { display: none; }
    .overview-subnav a { font-size: 7.5px; }
    .overview-subnav a .icon { width: 18px; height: 18px; }
    .today-card { grid-template-columns: 21px minmax(0, 1fr); gap: 3px; }
    .today-card > span, .today-card > span .icon { width: 20px; height: 20px; }
    .week-panel__head span { font-size: 7.7px; }
    .reference-compact b { display: none; }
    .timeline-event__top strong { max-width: 52%; }
}

@media (max-width: 600px) and (max-height: 700px) {
    .entry-page { gap: 3px; }
    .quick-grid { grid-auto-rows: 58px; gap: 3px; }
    .quick-card__icon, .quick-card__icon .icon { width: 26px; height: 26px; }
    .care-status { min-height: 46px; }
    .import-cta { min-height: 31px; }
    .recent-entry__row { min-height: 34px; }
    .recent-entry__row:nth-child(n+4) { display: none; }
}

@media (max-width: 600px) and (max-height: 590px) {
    .quick-grid { grid-auto-rows: 54px; }
    .quick-card__copy small { display: none; }
    .care-status { min-height: 43px; }
    .recent-entry__row:nth-child(n+3) { display: none; }
}

/* Lexta 4.0: warm baby-journal visual system.
   Dense native-app layout, custom pictograms, no startup gradients or oversized whitespace. */
:root {
    --bg: #f2eee7;
    --surface: #fffdf8;
    --surface-2: #f8f4ed;
    --surface-3: #eee8de;
    --text: #2c2722;
    --muted: #6f675e;
    --muted-2: #978d82;
    --line: #d9d0c4;
    --line-strong: #bfb2a4;
    --accent: #4f806b;
    --accent-strong: #3d6957;
    --accent-soft: #e5eee8;
    --success: #4f806b;
    --success-soft: #e5eee8;
    --warning: #a77532;
    --warning-soft: #f7edda;
    --danger: #ad5f5f;
    --danger-soft: #f6e7e4;
    --info: #5c8295;
    --info-soft: #e5eef1;
    --chart-grid: #ded6cc;
    --purple: #758c80;
    --pink: #c77d70;
    --teal: #699c8a;
    --green: #6e9c78;
    --amber: #b58b46;
    --nav-height: 54px;
    --radius: 7px;
    --radius-small: 5px;
    --baby-blue: #8eb7cf;
    --baby-mint: #8fbda0;
    --baby-peach: #d98a6e;
    --baby-yellow: #d9ad55;
    --baby-cream: #f8f1e5;
}

html[data-theme="dark"] {
    --bg: #171411;
    --surface: #211d19;
    --surface-2: #1c1916;
    --surface-3: #2d2823;
    --text: #f8f2e8;
    --muted: #b8aea3;
    --muted-2: #887f76;
    --line: #3e3730;
    --line-strong: #5b5045;
    --accent: #8fc3a7;
    --accent-strong: #acd2bb;
    --accent-soft: #23352d;
    --success: #8fc3a7;
    --success-soft: #22372d;
    --warning: #d4ab64;
    --warning-soft: #3a2e1c;
    --danger: #dd8a86;
    --danger-soft: #3f2826;
    --info: #8fb9cc;
    --info-soft: #24333a;
    --chart-grid: #3d3731;
    --purple: #9eb5a7;
    --pink: #dda092;
    --teal: #8fc5b0;
    --green: #8fc3a7;
    --amber: #d4ab64;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #171411;
        --surface: #211d19;
        --surface-2: #1c1916;
        --surface-3: #2d2823;
        --text: #f8f2e8;
        --muted: #b8aea3;
        --muted-2: #887f76;
        --line: #3e3730;
        --line-strong: #5b5045;
        --accent: #8fc3a7;
        --accent-strong: #acd2bb;
        --accent-soft: #23352d;
        --success: #8fc3a7;
        --success-soft: #22372d;
        --warning: #d4ab64;
        --warning-soft: #3a2e1c;
        --danger: #dd8a86;
        --danger-soft: #3f2826;
        --info: #8fb9cc;
        --info-soft: #24333a;
        --chart-grid: #3d3731;
        --purple: #9eb5a7;
        --pink: #dda092;
        --teal: #8fc5b0;
        --green: #8fc3a7;
        --amber: #d4ab64;
    }
}

html, body { background: var(--bg); }
body { background: var(--bg) !important; color: var(--text); }
.auth-page, .offline-page { background: var(--bg) !important; }

/* The new full-colour pictograms are artwork, while micro-actions stay system SVGs. */
.icon-asset {
    display: block;
    object-fit: contain;
    object-position: center;
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}
svg.icon { color: currentColor; }

/* Bottom navigation remains compact, but uses the new pictograms as anchors. */
.bottom-nav {
    border-top-color: var(--line) !important;
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
}
.bottom-nav__item {
    color: var(--muted);
    font-weight: 680;
}
.bottom-nav__item::before { background: transparent; }
.bottom-nav__item.is-active { color: var(--text); }
.bottom-nav__item.is-active::before { background: var(--accent); }
.bottom-nav__icon.icon-asset,
.bottom-nav__icon-wrap .icon-asset {
    width: 27px;
    height: 27px;
}
.bottom-nav__item:not(.is-active) .icon-asset { opacity: .78; }
.bottom-nav__item.is-active .icon-asset { opacity: 1; }

/* Header and small controls: warm neutral surfaces, no glossy treatment. */
.app-header, .compact-page-header, .entry-hero { color: var(--text); }
.app-kicker { color: var(--accent); }
.time-chip, .header-back, .compact-back, .icon-button, .button {
    border-color: var(--line);
    background: var(--surface);
}
.button--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button--primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }

/* Entry: keep the high information density while giving each action its own baby-app pictogram. */
.entry-page { width: min(100%, 560px); }
.care-strip, .overview-care, .today-overview, .week-panel, .recent-entry, .timeline, .chart-panel, .analysis-card {
    border-color: var(--line);
    background: var(--surface);
}
.care-status--baby, .care-status--mama,
.overview-care__item--baby, .overview-care__item--mama,
.weight-hero__main, .analysis-card, .auth-card {
    background-image: none !important;
}
.care-status--baby, .overview-care__item--baby { background: color-mix(in srgb, var(--baby-mint) 10%, var(--surface)); }
.care-status--mama, .overview-care__item--mama { background: color-mix(in srgb, var(--baby-blue) 9%, var(--surface)); }
.care-status__icon, .overview-care__icon {
    background: transparent;
}
.care-status__icon .icon-asset, .overview-care__icon .icon-asset { width: 29px; height: 29px; }

.quick-grid { gap: 4px; grid-auto-rows: 66px; }
.quick-card {
    border: 1px solid var(--line);
    border-top-width: 1px;
    border-radius: 7px;
    background: var(--surface);
}
.quick-card:active { border-color: var(--tone); background: var(--surface-2); }
.quick-card__main { gap: 1px; padding: 3px 4px 3px; }
.quick-card__icon {
    position: relative;
    display: grid;
    width: 46px !important;
    height: 29px !important;
    place-items: center;
    color: var(--tone);
}
.quick-card__icon .icon,
.quick-card__icon .icon-asset {
    position: relative;
    z-index: 1;
    width: 25px !important;
    height: 25px !important;
}
.quick-card__copy strong { color: var(--text); font-size: 10.8px; font-weight: 730; }
.quick-card__copy small { color: var(--muted); font-size: 8.4px; }
.quick-card .option-button { color: var(--muted-2); }

.tone-green { --tone: #6c9f7c; }
.tone-blue { --tone: #7faec3; }
.tone-peach { --tone: #d8896b; }
.tone-lavender { --tone: #789b8b; }
.tone-sand { --tone: #b89852; }
.tone-ochre { --tone: #b8795d; }
.tone-mint { --tone: #71a48c; }
.tone-rose { --tone: #c77f72; }

.import-cta {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--text);
}
.import-cta__icon.icon-asset { width: 21px; height: 21px; }

/* Overview: pictograms replace sterile system glyphs without making the screen larger. */
.overview-subnav {
    border-color: var(--line);
    background: var(--surface);
}
.overview-subnav a { color: var(--muted); }
.overview-subnav a.is-active { background: var(--accent-soft); color: var(--text); }
.overview-subnav a.is-active::after { background: var(--accent); }
.overview-subnav__icon { width: 24px; height: 24px; }
.overview-subnav a .icon-asset { width: 24px; height: 24px; }

.today-card { background: var(--surface); }
.today-card > span { background: transparent; }
.today-card > span .icon-asset { width: 26px; height: 26px; }
.today-card strong { color: var(--text); }
.today-card em, .today-card small { color: var(--muted); }

.event-icon {
    background: transparent;
    color: var(--accent);
}
.event-icon .icon-asset { width: 27px; height: 27px; }
.recent-entry__row .event-icon .icon-asset { width: 24px; height: 24px; }
.timeline-event .event-icon .icon-asset { width: 28px; height: 28px; }

/* Data visuals use the same warm neutrals. */
.week-panel, .chart-panel, .weight-hero__main, .weight-hero__stats, .weight-hero__spark { box-shadow: none !important; }
.weight-hero__main { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line); }
.chart-panel canvas { border-radius: 4px; }
.reference-compact, .reference-compare { border-color: var(--line); }

/* Dialogs and forms stay functional, compact and native-looking. */
.dialog, .modal, .reference-popover, .auth-card {
    border-color: var(--line);
    background: var(--surface);
}
.field input, .field select, .field textarea, select, input, textarea {
    border-color: var(--line);
    background-color: var(--surface);
}

/* Keep the dense one-screen entry layout on small phones. */
@media (max-width: 430px) {
    .quick-grid { grid-auto-rows: 62px; gap: 3px; }
    .quick-card__icon { width: 43px !important; height: 26.58px !important; }
    .quick-card__icon .icon, .quick-card__icon .icon-asset { width: 23px !important; height: 23px !important; }
    .quick-card__copy strong { font-size: 10.3px; }
    .quick-card__copy small { font-size: 8px; }
    .bottom-nav__icon.icon-asset, .bottom-nav__icon-wrap .icon-asset { width: 25px; height: 25px; }
}

@media (max-width: 600px) and (max-height: 700px) {
    .quick-grid { grid-auto-rows: 57px; }
    .quick-card__icon { width: 40px !important; height: 24.72px !important; }
    .quick-card__icon .icon, .quick-card__icon .icon-asset { width: 21px !important; height: 21px !important; }
}

@media (max-width: 600px) and (max-height: 590px) {
    .quick-grid { grid-auto-rows: 53px; }
    .quick-card__copy small { display: none; }
}

/* The dashboard's weight tile always keeps the latest measured value visible. */
.quick-card[data-card="weight"] .quick-card__copy small { display: block !important; }

/* Lexta 4.0 colour completion. */
:root {
    --purple-soft: #e9eee9;
    --pink-soft: #f4e8e3;
    --teal-soft: #e5efeb;
    --green-soft: #e8efe9;
    --amber-soft: #f3ecdd;
    --shadow: none;
    --shadow-soft: none;
}
html[data-theme="dark"] {
    --purple-soft: #28342e;
    --pink-soft: #392823;
    --teal-soft: #24352f;
    --green-soft: #26362d;
    --amber-soft: #382f20;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --purple-soft: #28342e;
        --pink-soft: #392823;
        --teal-soft: #24352f;
        --green-soft: #26362d;
        --amber-soft: #382f20;
    }
}
.sticky-form-action { background: var(--bg) !important; }

/* Lexta 4.0.1: cleaner action tiles, larger artwork, denser first screen. */
.quick-grid {
    grid-auto-rows: 63px !important;
    gap: 3px !important;
}
.quick-card__icon {
    width: 35px !important;
    height: 35px !important;
}
.quick-card__icon::before,
.quick-card__icon::after {
    display: none !important;
    content: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: none !important;
}
.quick-card__icon .icon,
.quick-card__icon .icon-asset {
    width: 33px !important;
    height: 33px !important;
    max-width: 33px !important;
    max-height: 33px !important;
}
.quick-card__main {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
@media (max-width: 430px) {
    .quick-grid {
        grid-auto-rows: 59px !important;
        gap: 2px !important;
    }
    .quick-card__icon {
        width: 33px !important;
        height: 33px !important;
    }
    .quick-card__icon .icon,
    .quick-card__icon .icon-asset {
        width: 31px !important;
        height: 31px !important;
        max-width: 31px !important;
        max-height: 31px !important;
    }
}
@media (max-width: 600px) and (max-height: 700px) {
    .quick-grid { grid-auto-rows: 55px !important; }
    .quick-card__icon { width: 30px !important; height: 30px !important; }
    .quick-card__icon .icon,
    .quick-card__icon .icon-asset {
        width: 29px !important;
        height: 29px !important;
        max-width: 29px !important;
        max-height: 29px !important;
    }
}

/* Lexta 4.0.2: reliable touch interactions for quick-entry cards. */
.quick-card__main,
.quick-card .option-button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.quick-card__main .icon,
.quick-card__main .icon-asset,
.quick-card .option-button .icon,
.quick-card .option-button .icon-asset {
    pointer-events: none;
}
.quick-card .option-button {
    z-index: 5;
    top: 0;
    right: 0;
    width: 29px;
    min-width: 29px;
    height: 29px;
    pointer-events: auto;
}