:root,
.mdui-theme-light {
    --page-max: 1160px;
    --card-gap: 1.5rem;
    --chart-grid: rgba(28, 43, 51, .10);
    --chart-text: rgba(28, 43, 51, .72);
    --chart-tooltip-bg: #f7f9ff;
    --chart-tooltip-text: #19232a;
    --chart-tooltip-muted: #3f484f;
    --chart-tooltip-border: rgba(63, 72, 79, .24);
    --chart-hover-line: rgba(0, 85, 126, .34);
    --chart-point-border: #ffffff;
    --chart-empty: #5e6a72;
    --series-wakeup: #006d77;
    --series-night: #76558f;
    --series-average: #9a5a00;
    --series-minimum: #00639b;
    --series-danger: #ba1a1a;
    --series-avg-7: #9a5a00;
    --series-min-7: #006d77;
    --series-avg-14: #a33a00;
    --series-min-14: #00639b;
    --series-avg-30: #ba1a1a;
    --series-min-30: #5f5b9f;
    color-scheme: light;
}

.mdui-theme-dark {
    --chart-grid: rgba(221, 228, 234, .10);
    --chart-text: rgba(221, 228, 234, .72);
    --chart-tooltip-bg: #202a31;
    --chart-tooltip-text: #eef4f8;
    --chart-tooltip-muted: #c2cbd1;
    --chart-tooltip-border: rgba(221, 228, 234, .18);
    --chart-hover-line: rgba(137, 205, 255, .42);
    --chart-point-border: #101418;
    --chart-empty: #aeb8bf;
    --series-wakeup: #63d8de;
    --series-night: #dfb8fa;
    --series-average: #ffb95f;
    --series-minimum: #89ceff;
    --series-danger: #ffb4ab;
    --series-avg-7: #ffb95f;
    --series-min-7: #63d8de;
    --series-avg-14: #ffb68c;
    --series-min-14: #89ceff;
    --series-avg-30: #ffb4ab;
    --series-min-30: #c9c3ff;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    .mdui-theme-auto {
        --chart-grid: rgba(221, 228, 234, .10);
        --chart-text: rgba(221, 228, 234, .72);
        --chart-tooltip-bg: #202a31;
        --chart-tooltip-text: #eef4f8;
        --chart-tooltip-muted: #c2cbd1;
        --chart-tooltip-border: rgba(221, 228, 234, .18);
        --chart-hover-line: rgba(137, 205, 255, .42);
        --chart-point-border: #101418;
        --chart-empty: #aeb8bf;
        --series-wakeup: #63d8de;
        --series-night: #dfb8fa;
        --series-average: #ffb95f;
        --series-minimum: #89ceff;
        --series-danger: #ffb4ab;
        --series-avg-7: #ffb95f;
        --series-min-7: #63d8de;
        --series-avg-14: #ffb68c;
        --series-min-14: #89ceff;
        --series-avg-30: #ffb4ab;
        --series-min-30: #c9c3ff;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: rgb(var(--mdui-color-on-surface));
    background:
        radial-gradient(circle at 85% -8rem, rgba(var(--mdui-color-primary), .14), transparent 34rem),
        radial-gradient(circle at -8rem 45%, rgba(var(--mdui-color-tertiary), .08), transparent 28rem),
        rgb(var(--mdui-color-surface));
    font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
    transition: color var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-standard),
        background-color var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-standard);
}
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: rgb(var(--mdui-color-on-surface)); text-wrap: balance; }
button, input, select, textarea { font: inherit; }
mdui-card { display: block; }
mdui-text-field { width: 100%; }
mdui-select { min-width: 160px; }

/* 为键盘用户提供统一且清晰的焦点反馈。 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(var(--mdui-color-primary), .55);
    outline-offset: 3px;
}

.desktop-app-bar {
    align-items: center;
}
.desktop-app-bar mdui-top-app-bar-title { margin-left: .5rem; }
/* small TopAppBar 的标题恢复为 Material 3 title-large 排版层级。 */
.desktop-app-bar mdui-top-app-bar-title::part(label) {
    font-size: var(--mdui-typescale-title-large-size);
    font-weight: var(--mdui-typescale-title-large-weight);
    letter-spacing: var(--mdui-typescale-title-large-tracking);
    line-height: var(--mdui-typescale-title-large-line-height);
}
.desktop-nav { display: flex; gap: .25rem; margin-left: 1rem; }
.app-bar-spacer { flex: 1; }
.desktop-app-bar form { display: flex; align-items: center; margin-right: .5rem; }
.app-bar-action-tooltip { width: 48px; height: 48px; display: inline-grid; place-items: center; line-height: 0; }
.app-bar-action { width: 48px; height: 48px; display: inline-grid; place-items: center; }
.app-bar-action .material-symbols-rounded { display: block; line-height: 1; }
.mobile-navigation { display: none; }
.navigation-icon { font-size: 1.25rem; }
.navigation-icon-active { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.theme-tooltip {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    align-self: center;
    line-height: 0;
}
.theme-toggle {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    vertical-align: middle;
}
/* 消除图标字体基线留白，确保主题图标在触控区域内几何居中。 */
.theme-toggle .material-symbols-rounded { display: block; line-height: 1; }
.auth-theme-control { position: fixed; z-index: 10; top: 1rem; right: 1rem; }

.workspace {
    width: min(var(--page-max), calc(100% - 2rem));
    margin: clamp(1.25rem, 3vw, 2.5rem) auto 5rem;
}
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: .55rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; }
.eyebrow { margin-bottom: .45rem; color: rgb(var(--mdui-color-primary)); font-size: .76rem; font-weight: 600; letter-spacing: .16em; }
.supporting-text { max-width: 720px; margin-bottom: 0; color: rgb(var(--mdui-color-on-surface-variant)); line-height: 1.7; }
.data-coverage { display: block; max-width: 820px; margin-top: .45rem; color: rgb(var(--mdui-color-on-surface-variant)); line-height: 1.6; }
.summary-card { min-width: 220px; padding: 1.15rem 1.25rem; border-radius: var(--mdui-shape-corner-extra-large); }
.summary-card strong { display: block; color: rgb(var(--mdui-color-primary)); font-size: 2.6rem; line-height: 1; }
.summary-card span, .summary-card small { display: block; color: rgb(var(--mdui-color-on-surface-variant)); }
.summary-card small { margin-top: .65rem; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: var(--card-gap); }
.upload-grid { grid-template-columns: minmax(0, 1fr); }
.panel-card {
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid rgba(var(--mdui-color-outline-variant), .72);
    border-radius: var(--mdui-shape-corner-extra-large);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2 { margin-bottom: 0; }
.drop-zone {
    padding: 2.5rem 1rem;
    text-align: center;
    border: 1px dashed rgba(var(--mdui-color-primary), .55);
    border-radius: 18px;
    background: rgba(var(--mdui-color-primary), .045);
    transition: background var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),
        border-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),
        transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);
}
.drop-zone.dragging { border-color: rgb(var(--mdui-color-primary)); background: rgba(var(--mdui-color-primary), .12); transform: scale(1.005); }
.drop-zone p { color: rgb(var(--mdui-color-on-surface-variant)); }
.upload-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 18px;
    color: rgb(var(--mdui-color-on-primary-container));
    background: rgb(var(--mdui-color-primary-container));
    font-size: 1.8rem;
}
.selected-file { min-height: 1.3em; margin: .8rem 0 0 !important; }
.ocr-options { margin-bottom: 1rem; }
.field-label { display: block; margin-bottom: .55rem; color: rgb(var(--mdui-color-on-surface-variant)); font-size: .82rem; font-weight: 700; }
.privacy-note { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 16px; }
.privacy-note span { color: rgb(var(--mdui-color-on-surface-variant)); font-size: .86rem; line-height: 1.5; }
.block-button { margin-top: 1rem; }
.status-label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    padding: 0 .75rem;
    border: 1px solid rgb(var(--mdui-color-outline-variant));
    border-radius: var(--mdui-shape-corner-small);
    color: rgb(var(--mdui-color-on-surface-variant));
    background: rgb(var(--mdui-color-surface-container-low));
    font-size: var(--mdui-typescale-label-large-size);
    font-weight: var(--mdui-typescale-label-large-weight);
}
.ocr-progress { margin-top: 1rem; padding: .85rem 1rem; border-radius: 14px; background: rgb(var(--mdui-color-surface-container)); }
.ocr-progress-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: rgb(var(--mdui-color-on-surface-variant)); font-size: .86rem; }
.ocr-progress-heading strong { color: rgb(var(--mdui-color-primary)); }
.preview-card, .records-card { margin-top: 1.25rem; }
.records-heading { align-items: end; }
.search-field { max-width: 330px; }
.records-tools { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; width: min(100%, 520px); }
.records-tools .search-field { flex: 1; }

.table-scroll { overflow-x: auto; border: 1px solid rgb(var(--mdui-color-outline-variant)); border-radius: var(--mdui-shape-corner-large); overscroll-behavior-inline: contain; }
.data-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.records-card .data-table { min-width: 900px; }
.data-table th, .data-table td { padding: .8rem .9rem; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); text-align: left; }
.data-table th { position: sticky; top: 0; z-index: 1; color: rgb(var(--mdui-color-on-surface-variant)); background: rgb(var(--mdui-color-surface-container)); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color var(--mdui-motion-duration-short3) linear; }
.data-table tbody tr:hover { background: rgba(var(--mdui-color-primary), var(--mdui-state-layer-hover)); }
.preview-table mdui-text-field { min-width: 115px; }
.confidence { color: rgb(var(--mdui-color-primary)); font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: .35rem; white-space: nowrap; }
.delta-up { color: rgb(var(--mdui-color-error)); }
.delta-down { color: rgb(var(--mdui-color-primary)); }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .85rem; color: rgb(var(--mdui-color-on-surface-variant)); }
.empty-row { padding: 2rem !important; text-align: center !important; color: rgb(var(--mdui-color-on-surface-variant)); }
.status { margin-top: .8rem; padding: .75rem .9rem; border-radius: 12px; color: rgb(var(--mdui-color-on-surface-variant)); background: rgb(var(--mdui-color-surface-container-low)); }
.status:empty { display: none; }
.status.error { color: rgb(var(--mdui-color-on-error-container)); background: rgb(var(--mdui-color-error-container)); }
.status.success { color: rgb(var(--mdui-color-on-primary-container)); background: rgb(var(--mdui-color-primary-container)); }
.dialog-fields { display: grid; gap: .9rem; min-width: min(420px, 70vw); padding-top: .35rem; }
.dialog-record { padding: 1rem; border-radius: 14px; background: rgb(var(--mdui-color-surface-container)); font-weight: 700; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 4.5rem 1.5rem 1.5rem; }
.auth-card { width: min(450px, 100%); padding: 2.25rem; border: 1px solid rgb(var(--mdui-color-outline-variant)); border-radius: var(--mdui-shape-corner-extra-large); }
.auth-card .muted { color: rgb(var(--mdui-color-on-surface-variant)); line-height: 1.65; }
.stack-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.notice { margin: 1rem 0; padding: .85rem 1rem; }
.notice.error { color: rgb(var(--mdui-color-on-error-container)); background: rgb(var(--mdui-color-error-container)); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: var(--card-gap); }
.metric-card { min-height: 142px; padding: 1.2rem; border-radius: var(--mdui-shape-corner-extra-large); }
.metric-card span, .metric-card small { display: block; color: rgb(var(--mdui-color-on-surface-variant)); }
.metric-card strong { display: block; margin: .75rem 0 .35rem; color: rgb(var(--mdui-color-primary)); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -.04em; }
.metric-unit { color: rgb(var(--mdui-color-on-surface-variant)); font-size: 1.2rem; font-weight: 400; }
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.inline-icon { display: inline-block !important; font-size: 1.1em; line-height: 1; vertical-align: -.15em; }
.analysis-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); }
.chart-panel, .insight-panel { min-height: 430px; }
.chart-surface { height: 300px; width: 100%; border-radius: 0; background: transparent; overflow: hidden; }
.chart-surface canvas { width: 100%; height: 100%; display: block; }
.chart-legend { display: flex; gap: 1.25rem; margin-top: .8rem; color: rgb(var(--mdui-color-on-surface-variant)); font-size: .84rem; }
.legend-dot { display: inline-block; width: 9px; height: 9px; margin-right: .4rem; border-radius: 50%; }
.legend-dot.primary { background: rgb(var(--mdui-color-primary)); }
.legend-dot.secondary { background: rgb(var(--mdui-color-secondary)); }
.insight-list { display: grid; gap: .8rem; }
.insight-item { padding: 1rem; border-radius: 16px; }
.insight-icon { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgb(var(--mdui-color-outline-variant)); border-radius: var(--mdui-shape-corner-medium); background: rgb(var(--mdui-color-surface-container)); }
.insight-symbol { font-size: 1.2rem; }
.insight-title { margin: 0 0 .25rem; font-size: .95rem; font-weight: 700; }
.insight-text { margin: 0; color: rgb(var(--mdui-color-on-surface-variant)); font-size: .84rem; line-height: 1.45; }
.chart-error { height: 100%; padding: 1.5rem; overflow-y: auto; color: rgb(var(--mdui-color-on-error-container)); background: rgb(var(--mdui-color-error-container)); font-family: monospace; font-size: .8rem; white-space: pre-wrap; box-sizing: border-box; }
/* outlined 图表继承卡片表面色并使用直角，不再保留 elevated 的抬升底色与圆角。 */
.chart-surface { position: relative; height: 300px; width: 100%; border-radius: 0; background: transparent; overflow: hidden; }
.chart-surface canvas { width: 100%; height: 100%; display: block; }

/* 预测图允许纵向滚动页面，同时保留横向滑动选择日期的交互。 */
.predictor-analysis .chart-surface canvas { touch-action: pan-y; }

.predictor-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: var(--card-gap); margin-bottom: var(--card-gap); }
.predictor-inputs { display: grid; gap: 1rem; }
.predictor-inputs h2 { margin-bottom: .2rem; }
.predictor-method-select { width: 100%; margin-top: .4rem; }
.method-select-helper { display: grid; gap: .25rem; color: rgb(var(--mdui-color-on-surface-variant)); line-height: 1.35; }
.select-end-icon { display: block; font-size: 24px; color: rgb(var(--mdui-color-on-surface-variant)); }
.prediction-summary { padding: 1.2rem; text-align: center; border: 1px solid rgb(var(--mdui-color-outline-variant)); border-radius: var(--mdui-shape-corner-large); background: linear-gradient(135deg, rgba(var(--mdui-color-primary-container), .55), rgba(var(--mdui-color-secondary-container), .45)); }
.prediction-summary-label { color: rgb(var(--mdui-color-on-surface-variant)); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.prediction-weight { display: block; margin: .25rem 0; color: rgb(var(--mdui-color-primary)); font-size: 3.2rem; line-height: 1.2; letter-spacing: -.05em; }
.prediction-unit { margin-left: 2px; font-size: 1.2rem; font-weight: 400; }
.prediction-delta { color: rgb(var(--mdui-color-tertiary)); font-size: .85rem; font-weight: 700; }
.forecast-result { display: flex; flex-direction: column; justify-content: center; min-height: 390px; padding: 2rem; border-radius: 28px; background: linear-gradient(145deg, rgb(var(--mdui-color-primary-container)), rgb(var(--mdui-color-secondary-container))); }
.forecast-result > strong { display: block; margin: .45rem 0; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -.07em; }
.forecast-result > span { color: rgb(var(--mdui-color-on-surface-variant)); }
.forecast-result mdui-divider { margin: 1.5rem 0; }
.forecast-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.forecast-ranges small, .forecast-ranges b { display: block; }
.forecast-ranges small { margin-bottom: .35rem; color: rgb(var(--mdui-color-on-surface-variant)); }
.predictor-analysis { margin-bottom: var(--card-gap); }
.model-facts { display: grid; gap: .8rem; margin: 1rem 0; }
.model-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); }
.model-facts span { color: rgb(var(--mdui-color-on-surface-variant)); }
.supporting-text.compact { font-size: .88rem; }

/* 模板共用的布局工具类，替代易遗漏主题适配的内联样式。 */
.panel-heading-compact { margin-bottom: .5rem; }
.chart-heading-copy { min-width: 0; flex: 1 1 auto; }
.chart-heading-copy h2 { white-space: nowrap; }
.chart-scope-select { width: 240px; min-width: 240px; flex: 0 0 240px; }
/* Tabs 与卡片共用表面色，避免出现割裂的整条白色底板。 */
.chart-tabs { width: 100%; background: transparent; }
.chart-tabs::part(container) {
    background: transparent;
    border-bottom: 1px solid rgb(var(--mdui-color-outline-variant));
}
.chart-tabs mdui-tab { min-height: 48px; }
/* Tab 图标使用组件的 icon slot，由 MDUI 负责图标与标签的标准间距。 */
.chart-tabs .tab-icon {
    width: 20px;
    height: 20px;
    display: block;
    font-size: 20px;
    line-height: 1;
}
.tab-panel-content { margin-top: 1rem; }
.trend-controls-start { justify-content: flex-start; gap: .8rem; margin-top: .8rem; }
.predictor-analysis-layout { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); }
.widget-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: .8rem; }
.widget-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.trend-controls-end { justify-content: flex-end; gap: .6rem; margin-bottom: 0; }
.chart-surface-spaced { margin-top: 1rem; }
.date-predictor-card { margin-top: 0; }
.date-predictor-title { margin-bottom: 1rem; }
.date-predictor-layout { display: flex; flex-direction: column; gap: 1rem; }
.date-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-top: .5rem; }
.date-result-card { padding: .9rem; border-radius: var(--mdui-shape-corner-large); }
.date-result-label { display: block; margin-bottom: .4rem; color: rgb(var(--mdui-color-on-surface-variant)); font-size: .8rem; font-weight: 600; }
.date-result-line { margin-bottom: .4rem; font-size: .9rem; }
.date-result-line:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
    :root { --card-gap: 1rem; }
    .desktop-nav { display: none; }
    .mobile-navigation { display: flex; }
    .workspace { margin-top: 1.2rem; margin-bottom: 6rem; }
    .hero, .content-grid, .analysis-grid { grid-template-columns: 1fr; }
    .predictor-grid { display: flex; flex-direction: column; gap: 1rem; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .summary-card { min-width: 0; }
    .panel-heading, .records-heading { align-items: stretch; flex-direction: column; }
    .chart-heading-copy h2 { white-space: normal; }
    .chart-scope-select { width: 100%; min-width: 0; flex-basis: auto; }
    .search-field { max-width: none; }
    .records-tools { align-items: stretch; flex-direction: column; width: 100%; }
    .mobile-navigation { padding-bottom: env(safe-area-inset-bottom); }
    /* Snackbar 必须显示在固定底栏和设备安全区上方。 */
    mdui-snackbar.app-snackbar {
        bottom: calc(80px + env(safe-area-inset-bottom) + .75rem) !important;
    }
}

@media (max-width: 480px) {
    .workspace { width: min(100% - 1rem, var(--page-max)); }
    .panel-card, .auth-card { padding: 1rem; border-radius: 20px; }
    .hero h1 { font-size: 2rem; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    /* 移动端四张指标卡紧凑排列为 2×2，减少首屏纵向占用。 */
    .metric-card { min-height: 118px; padding: .85rem; border-radius: 17px; }
    .metric-card > span { min-height: 2.5em; font-size: .82rem; line-height: 1.25; }
    .metric-card strong { margin: .35rem 0 .25rem; font-size: clamp(1.55rem, 8vw, 2.1rem); }
    .metric-card small { font-size: .7rem; line-height: 1.25; }
    .ocr-options, .forecast-ranges, .intervals-grid { grid-template-columns: 1fr; }
    .chart-surface { height: 250px; }
}

/* 可复用的曲线筛选胶囊按钮。 */
.trend-controls {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.pill-checkbox {
    cursor: pointer;
    display: inline-block;
}
.pill-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 12px;
    border-radius: var(--mdui-shape-corner-full);
    border: 1px solid rgb(var(--mdui-color-outline-variant));
    background: rgb(var(--mdui-color-surface-container-low));
    font-size: 12px;
    color: rgb(var(--mdui-color-on-surface-variant));
    transition: background-color var(--mdui-motion-duration-short3) linear,
        border-color var(--mdui-motion-duration-short3) linear,
        color var(--mdui-motion-duration-short3) linear;
    user-select: none;
}
.pill-checkbox input:checked + .pill-btn {
    background: rgb(var(--mdui-color-secondary-container));
    border-color: transparent;
    color: rgb(var(--mdui-color-on-secondary-container));
}
.pill-checkbox input:focus-visible + .pill-btn { outline: 3px solid rgba(var(--mdui-color-primary), .55); outline-offset: 2px; }
.color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.series-wakeup { background: var(--series-wakeup); }
.series-night { background: var(--series-night); }
.series-average { background: var(--series-average); }
.series-minimum { background: var(--series-minimum); }
.series-avg-7 { background: var(--series-avg-7); }
.series-min-7 { background: var(--series-min-7); }
.series-avg-14 { background: var(--series-avg-14); }
.series-min-14 { background: var(--series-min-14); }
.series-avg-30 { background: var(--series-avg-30); }
.series-min-30 { background: var(--series-min-30); }
.text-avg-7 { color: var(--series-avg-7); }
.text-min-7 { color: var(--series-min-7); }
.text-avg-14 { color: var(--series-avg-14); }
.text-min-14 { color: var(--series-min-14); }
.text-avg-30 { color: var(--series-avg-30); }
.text-min-30 { color: var(--series-min-30); }

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