:root {
    --bg: #f7f7fb;
    --bg-2: #eeeffb;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: #fff;
    --text: #17172a;
    --muted: #6d6f82;
    --line: #e3e4ef;
    --accent: #5a5df5;
    --accent-strong: #2c2e9f;
    --accent-soft: #ececff;
    --accent-2: #ff7a59;
    --accent-2-soft: #fff0eb;
    --danger: #be3b3b;
    --danger-soft: #fde8e8;
    --success: #234f8f;
    --shadow: 0 22px 70px rgba(32, 34, 85, 0.13);
    --shadow-sm: 0 12px 32px rgba(32, 34, 85, 0.10);
    --radius: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(90, 93, 245, .22) 0, transparent 32rem),
        radial-gradient(circle at top right, rgba(255, 122, 89, .18) 0, transparent 30rem),
        linear-gradient(180deg, var(--bg), #fff);
    color: var(--text);
    min-height: 100vh;
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 64px;
}

.hidden { display: none !important; }

.eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
}

.lead, .muted {
    color: var(--muted);
    line-height: 1.6;
}

.lead { font-size: clamp(17px, 2vw, 20px); max-width: 650px; }
.muted { max-width: 760px; }

.auth-layout {
    min-height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .65fr);
    gap: 28px;
    align-items: center;
}

.auth-copy h1 {
    margin: 2px 0 16px;
    font-size: clamp(48px, 8vw, 94px);
    line-height: .9;
    letter-spacing: -.075em;
}

.panel, .notice-card, .score-card, .info-card, .sidebar, .mobile-topbar {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.panel {
    border-radius: var(--radius);
    padding: 24px;
}

.notice-card {
    width: min(480px, 100%);
    border-radius: var(--radius-md);
    padding: 18px;
    display: grid;
    gap: 8px;
    margin-top: 28px;
}
.notice-card strong { font-size: 18px; }
.notice-card span { color: var(--muted); line-height: 1.45; }
.notice-card.subtle { margin-top: 18px; box-shadow: var(--shadow-sm); background: #fff; }

.auth-panel { max-width: 480px; width: 100%; justify-self: end; }
.auth-form h2 { margin: 0 0 6px; letter-spacing: -.04em; }

.tabs {
    display: flex;
    gap: 8px;
    background: #ededf8;
    padding: 7px;
    border-radius: 999px;
    margin-bottom: 20px;
    width: fit-content;
}

.tab, button {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
}

button:hover { transform: translateY(-1px); }
button:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.tab { background: transparent; color: var(--muted); }
.tab.active { background: white; color: var(--text); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: white; box-shadow: 0 12px 28px rgba(90, 93, 245, .26); }
.secondary { background: var(--accent-soft); color: var(--accent-strong); }
.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }
.danger { background: var(--danger-soft); color: var(--danger); }
.full-width { width: 100%; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 760; }
input, select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    background: var(--surface-strong);
    color: var(--text);
    outline: none;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(90, 93, 245, .12); }

.app-layout {
    display: grid;
    grid-template-columns: 282px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 22px;
    min-height: calc(100vh - 56px);
    border-radius: var(--radius);
    padding: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 22px;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
}
.brand-block strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.brand-block span { color: var(--muted); font-size: 13px; }
.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.app-nav { display: grid; gap: 8px; align-content: start; }
.nav-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--muted);
    border-radius: 16px;
    padding: 13px 14px;
}
.nav-item.active, .nav-item:hover {
    background: #fff;
    color: var(--accent-strong);
    box-shadow: var(--shadow-sm);
}
.sidebar-footer {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.sidebar-footer h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.04em; }

.content-shell { min-width: 0; }
.mobile-topbar { display: none; }

.page-stack { min-width: 0; }
.page { display: none; animation: pageIn .18s ease-out; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 4px 0 20px;
}
.page-head h1 {
    margin: 0;
    font-size: clamp(36px, 6vw, 62px);
    letter-spacing: -.065em;
    line-height: .95;
}
.page-head .muted { margin: 10px 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.grid { display: grid; gap: 18px; }
.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dashboard-details { margin-top: 18px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions-row { align-items: end; }
.nutrition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.summary-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.08fr) minmax(300px, .92fr);
    grid-template-areas:
        "daily calories"
        "daily weekly"
        "info info";
    gap: 18px;
    align-items: stretch;
}
.primary-score { grid-area: daily; }
.calorie-score { grid-area: calories; }
.weekly-score { grid-area: weekly; }
.summary-grid .info-card { grid-area: info; grid-column: auto; }

.score-card, .info-card {
    border-radius: var(--radius);
    padding: 24px;
    min-width: 0;
}
.score-card {
    display: flex;
    flex-direction: column;
}
.primary-score { min-height: 374px; }
.calorie-score, .weekly-score { min-height: 178px; }
.primary-score {
    color: white;
    background: linear-gradient(135deg, #5a5df5, #2c2e9f);
}
.weekly-score, .calorie-score {
    background: linear-gradient(135deg, #fff, #f5f3ff);
}
.calorie-score { background: linear-gradient(135deg, #fff, #f7f8ff); }
.score-topline {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}
.score-topline span { color: inherit; opacity: .72; font-weight: 800; min-width: 0; }
.score-topline strong { font-size: clamp(34px, 4.2vw, 54px); line-height: .95; letter-spacing: -.07em; white-space: nowrap; }
.weekly-score .score-topline span, .calorie-score .score-topline span { color: var(--muted); opacity: 1; }
.weekly-score .score-topline strong, .calorie-score .score-topline strong { color: var(--accent-strong); }
.calorie-score .score-topline strong { font-size: clamp(26px, 2.7vw, 40px); letter-spacing: -.055em; }
.progress-track {
    height: 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    overflow: hidden;
    margin: 26px 0 20px;
}
.weekly-score .progress-track, .calorie-score .progress-track { background: #e9e9f6; }
.calorie-score .progress-track, .weekly-score .progress-track { margin: 18px 0 16px; }
.progress-track span {
    display: block;
    height: 100%;
    width: 0%;
    max-width: 100%;
    border-radius: inherit;
    background: rgba(255,255,255,.92);
    transition: width .28s ease;
}
.weekly-score .progress-track span, .calorie-score .progress-track span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.score-bottomline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}
.score-bottomline > div, .score-bottomline p { min-width: 0; }
.score-bottomline small { display: block; color: inherit; opacity: .72; font-weight: 800; }
.score-bottomline b { font-size: clamp(34px, 4.2vw, 52px); line-height: .95; letter-spacing: -.07em; white-space: nowrap; }
.calorie-score .score-bottomline b { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.055em; }
.weekly-score .score-bottomline, .calorie-score .score-bottomline { align-items: flex-start; }
.score-bottomline p { margin: 0; max-width: 260px; color: inherit; opacity: .8; line-height: 1.42; }
.weekly-score .score-bottomline small, .weekly-score .score-bottomline p, .calorie-score .score-bottomline small, .calorie-score .score-bottomline p { color: var(--muted); opacity: 1; }
.weekly-score .score-bottomline b, .calorie-score .score-bottomline b { color: var(--accent-strong); }

.info-card {
    display: grid;
    align-content: start;
    gap: 14px;
}
.summary-grid .info-card {
    grid-template-columns: auto minmax(210px, .35fr) minmax(0, 1fr);
    align-items: start;
}
.summary-grid .info-card .chip { grid-column: 1; }
.summary-grid .info-card h3 { grid-column: 2; }
.summary-grid .info-card p { grid-column: 3; }
.info-card h3 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.info-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    background: var(--accent-2-soft);
    color: #b34425;
    padding: 6px 10px;
    font-weight: 850;
    font-size: 12px;
}

.panel h2, .topbar h2 { margin: 0; letter-spacing: -0.04em; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.panel-head.compact { margin-bottom: 14px; }
.date-picker { min-width: 220px; }

.week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.week-day {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    min-width: 0;
}
.week-day.today { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(90, 93, 245, .10); }
.week-day.over { border-color: rgba(255, 122, 89, .5); background: #fff8f5; }
.week-day span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.week-day strong { display: block; margin-top: 6px; font-size: 20px; letter-spacing: -.04em; }
.week-day small { display: block; margin-top: 3px; color: var(--muted); }
.mini-track { height: 6px; background: #ededf6; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.mini-track i { display: block; height: 100%; width: 0%; max-width: 100%; background: var(--accent); border-radius: inherit; }
.week-day.over .mini-track i { background: var(--accent-2); }

.nutrition-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.nutrition-list div {
    background: #f7f7fc;
    border: 1px solid #eeeef7;
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
}
.nutrition-list.soft div { background: #fff; }
.nutrition-list span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.nutrition-list strong { display: block; margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }

.estimate {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.estimate-main { padding: 18px; display: grid; gap: 12px; }
.estimate-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.estimate-title h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.04em; }
.points-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: white;
    white-space: nowrap;
}
.points-pill strong { font-size: 28px; letter-spacing: -0.05em; }
.assumptions {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.estimate-actions {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    background: #f7f7fc;
    border-top: 1px solid var(--line);
}

.entries { display: grid; gap: 10px; }
.entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px;
}
.entry h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.entry p { margin: 0; color: var(--muted); font-size: 13px; }
.entry-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.entry-meta span { background: #f2f2fb; border-radius: 999px; padding: 4px 8px; font-size: 12px; color: var(--muted); }
.entry-points { text-align: right; display: grid; gap: 8px; justify-items: end; }
.entry-points strong { font-size: 28px; letter-spacing: -.05em; color: var(--accent-strong); }

.formula {
    padding: 4px;
    color: var(--muted);
    line-height: 1.5;
}
.formula h2 { color: var(--text); margin: 14px 0 10px; }
.formula code {
    display: block;
    white-space: normal;
    color: var(--accent-strong);
    font-weight: 850;
    background: var(--accent-soft);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 12px;
}
.formula p { margin: 0; }
.formula-explain {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.55;
    font-weight: 700;
}
.mini-form { display: grid; gap: 12px; }

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    max-width: min(420px, calc(100% - 44px));
    padding: 14px 18px;
    background: var(--text);
    color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    z-index: 40;
}
.toast.error { background: var(--danger); }

@media (max-width: 1180px) and (min-width: 1081px) {
    .score-card, .info-card { padding: 20px; }
    .calorie-score .score-topline strong { font-size: clamp(24px, 2.6vw, 34px); }
    .calorie-score .score-bottomline b { font-size: clamp(26px, 2.8vw, 36px); }
}

@media (max-width: 1080px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        inset: 14px auto 14px 14px;
        width: min(310px, calc(100vw - 28px));
        min-height: auto;
        z-index: 30;
        transform: translateX(calc(-100% - 24px));
        transition: transform .2s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-topbar {
        display: flex;
        position: sticky;
        top: 10px;
        z-index: 25;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        border-radius: var(--radius-md);
        padding: 12px;
        margin-bottom: 18px;
    }
    .mobile-topbar div { display: grid; text-align: right; }
    .mobile-topbar span { color: var(--muted); font-size: 13px; }
    .summary-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "daily calories"
            "daily weekly"
            "info info";
    }
    .summary-grid .info-card { grid-column: auto; }
    .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .app-shell { width: min(100% - 20px, 1280px); padding-top: 14px; }
    .auth-layout { grid-template-columns: 1fr; align-items: start; padding-top: 18px; }
    .auth-panel { justify-self: stretch; max-width: none; }
    .auth-copy h1 { font-size: clamp(46px, 14vw, 72px); }
    .page-head { align-items: stretch; flex-direction: column; }
    .page-actions { justify-content: stretch; }
    .page-actions button { flex: 1 1 auto; }
    .summary-grid, .row, .nutrition-grid, .nutrition-list { grid-template-columns: 1fr; }
    .summary-grid {
        grid-template-areas:
            "daily"
            "calories"
            "weekly"
            "info";
    }
    .primary-score, .calorie-score, .weekly-score { min-height: auto; }
    .summary-grid .info-card { grid-template-columns: 1fr; }
    .summary-grid .info-card .chip,
    .summary-grid .info-card h3,
    .summary-grid .info-card p { grid-column: auto; }
    .score-bottomline, .score-topline, .estimate-title { align-items: stretch; flex-direction: column; }
    .week-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel, .score-card, .info-card { padding: 18px; border-radius: 22px; }
    .date-picker { min-width: 0; }
    .entry { grid-template-columns: 1fr; }
    .entry-points { text-align: left; justify-items: start; }
    .estimate-actions { flex-direction: column; }
    .tabs { width: 100%; }
    .tab { flex: 1; }
}

@media (max-width: 430px) {
    .week-strip { grid-template-columns: 1fr; }
    .tab, button { padding: 11px 14px; }
    .mobile-topbar { align-items: stretch; }
    .mobile-topbar div { text-align: left; }
}

:root {
    --chart-blue: #2477d4;
    --chart-amber: #f3a43b;
}

.analytics-controls {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.analytics-controls label { min-width: 160px; }

.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.metric-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.metric-card span,
.metric-card small {
    display: block;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.35;
}
.metric-card span { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.metric-card strong {
    display: block;
    margin: 8px 0 4px;
    font-size: clamp(28px, 4.5vw, 46px);
    line-height: .95;
    letter-spacing: -.06em;
    color: var(--accent-strong);
}
.metric-card small { font-size: 13px; }

.analytics-grid { align-items: stretch; }
.wide-panel { grid-column: 1 / -1; }
.chart-box,
.donut-wrap,
.bar-list {
    min-height: 260px;
    width: 100%;
}
.small-chart { min-height: 230px; }
.empty-chart {
    min-height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    background: #f7f7fc;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    font-weight: 780;
}
.line-chart {
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, #fff, #fafaff);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.chart-axis { stroke: #d9daea; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.chart-dot.over { fill: var(--accent-2); }
.budget-line { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 7 7; }
.chart-label,
.budget-label { fill: var(--muted); font-size: 12px; font-weight: 800; }
.budget-label { fill: #b34425; }
.chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { display: inline-block; width: 24px; height: 4px; border-radius: 999px; }
.legend-line { background: var(--accent); }
.legend-budget { background: repeating-linear-gradient(90deg, var(--accent-2) 0 7px, transparent 7px 12px); border: 1px solid rgba(255,122,89,.35); }

.donut-wrap {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.donut {
    aspect-ratio: 1;
    border-radius: 999px;
    padding: 20px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), var(--shadow-sm);
}
.donut > div {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 16px;
}
.donut strong { font-size: 26px; letter-spacing: -.05em; }
.donut span { color: var(--muted); font-size: 12px; font-weight: 850; }
.donut-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.donut-legend li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
}
.donut-legend span { color: var(--muted); font-weight: 850; }
.donut-legend strong { color: var(--accent-strong); }
.donut-legend small { color: var(--muted); grid-column: 1 / -1; }

.vertical-bars {
    min-height: 220px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
}
.vbar {
    display: grid;
    gap: 7px;
    justify-items: center;
    min-width: 0;
}
.vbar-track {
    width: min(100%, 46px);
    height: 130px;
    border-radius: 999px;
    background: #ededf8;
    display: flex;
    align-items: end;
    overflow: hidden;
}
.vbar-track i {
    display: block;
    width: 100%;
    min-height: 4px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
.vbar:nth-child(2n) .vbar-track i { background: linear-gradient(180deg, var(--accent-2), #d95532); }
.vbar:nth-child(3n) .vbar-track i { background: linear-gradient(180deg, var(--chart-blue), #1d4f97); }
.vbar strong { font-size: 13px; letter-spacing: -.02em; text-align: center; overflow-wrap: anywhere; }
.vbar span { color: var(--muted); font-weight: 800; font-size: 12px; text-align: center; }

.bar-list {
    display: grid;
    align-content: start;
    gap: 12px;
}
.bar-row {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 7px;
}
.bar-row-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}
.bar-row-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}
.bar-row-head span { color: var(--accent-strong); font-weight: 900; }
.bar-track {
    height: 10px;
    background: #ededf8;
    border-radius: 999px;
    overflow: hidden;
}
.bar-track i {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.bar-row small { color: var(--muted); font-weight: 760; }
.compact-bars { min-height: 220px; }
.compact-bars .bar-row { padding: 10px; }

@media (max-width: 1080px) {
    .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-controls { justify-content: stretch; }
    .analytics-controls label { flex: 1 1 180px; }
}

@media (max-width: 760px) {
    .analytics-kpis { grid-template-columns: 1fr; }
    .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .donut { width: min(260px, 100%); }
    .vertical-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bar-row-head strong { white-space: normal; }
}

@media (max-width: 430px) {
    .vertical-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-controls { display: grid; grid-template-columns: 1fr; }
}

.shortcut-panel {
    display: grid;
    gap: 16px;
}
.shortcut-status {
    background: var(--accent-soft);
    border: 1px solid rgba(90, 93, 245, .16);
    border-radius: var(--radius-md);
    padding: 16px;
    display: grid;
    gap: 6px;
}
.shortcut-status strong {
    font-size: 22px;
    letter-spacing: -.03em;
}
.shortcut-status small {
    color: var(--muted);
    line-height: 1.45;
    font-weight: 760;
}
.copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.copy-row input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}
button.small {
    padding: 10px 14px;
    font-size: 13px;
}
.shortcut-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 760px) {
    .copy-row { grid-template-columns: 1fr; }
    .shortcut-actions { display: grid; grid-template-columns: 1fr; }
}

.mini-meta {
    margin-top: .15rem;
    font-size: .85rem;
}

/* Dashboard layout bugfix v3: fixed 2x2 card grid
   Reihenfolge Desktop: Tagespunkte | Wochenpunkte, Kalorien | Orientierung */
.summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "daily weekly"
        "calories info";
    align-items: stretch;
}
.primary-score { grid-area: daily; min-height: 230px; }
.weekly-score { grid-area: weekly; min-height: 230px; }
.calorie-score { grid-area: calories; min-height: 230px; }
.summary-grid .info-card {
    grid-area: info;
    grid-column: auto;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-content: initial;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}
.summary-grid .info-card .chip,
.summary-grid .info-card h3,
.summary-grid .info-card p {
    grid-column: auto;
}
.summary-grid .info-card h3 {
    font-size: clamp(22px, 2.2vw, 30px);
}
.summary-grid .info-card p {
    max-width: 62ch;
}
.score-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.score-topline strong {
    font-size: clamp(34px, 4vw, 54px);
    white-space: nowrap;
}
.calorie-score .score-topline strong {
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -.06em;
}
.calorie-score .score-bottomline b {
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -.06em;
    white-space: nowrap;
}
.score-bottomline {
    align-items: flex-end;
}
.weekly-score .score-bottomline,
.calorie-score .score-bottomline {
    align-items: flex-start;
}
.score-bottomline p {
    max-width: 280px;
}

@media (max-width: 1080px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "daily weekly"
            "calories info";
    }
    .summary-grid .info-card { grid-column: auto; }
}

@media (max-width: 760px) {
    .summary-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "daily"
            "weekly"
            "calories"
            "info";
    }
    .primary-score,
    .weekly-score,
    .calorie-score,
    .summary-grid .info-card {
        min-height: auto;
    }
    .score-bottomline,
    .score-topline {
        align-items: stretch;
    }
    .summary-grid .info-card p { max-width: none; }
}

/* BissPilot library/favorites */
.library-quick-panel {
    margin-bottom: 22px;
}
.library-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, .35fr) minmax(130px, .25fr);
    gap: 14px;
    align-items: end;
    margin-bottom: 14px;
}
.compact-toolbar {
    grid-template-columns: minmax(220px, 1fr) 160px 130px;
}
.library-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.library-preview-grid h3 {
    margin: 0 0 10px;
    font-size: 16px;
}
.library-grid {
    margin-top: 20px;
}
.library-list {
    display: grid;
    gap: 12px;
}
.library-item {
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,.74);
    display: grid;
    gap: 14px;
    box-shadow: 0 14px 35px rgba(20, 20, 55, .06);
}
.library-item h3 {
    margin: 2px 0 6px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.1;
}
.library-item .muted,
.component-line {
    margin: 0;
    font-size: 14px;
}
.component-line {
    color: var(--muted);
    line-height: 1.45;
}
.library-actions {
    display: grid;
    grid-template-columns: minmax(110px, 160px) auto;
    gap: 10px;
    align-items: end;
}
.library-actions label {
    margin: 0;
}
.library-actions input {
    min-height: 42px;
    padding: 10px 12px;
}
.compact-library-list .library-item {
    padding: 14px;
    border-radius: 18px;
}
.compact-library-list .library-item h3 {
    font-size: 17px;
}
.empty-state {
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 16px;
    color: var(--muted);
    background: rgba(255,255,255,.48);
    line-height: 1.45;
}
.components-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(246, 245, 255, .72);
}
.components-box h4 {
    margin: 0 0 10px;
    font-size: 15px;
}
.component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.component-chip {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
}
.component-chip strong {
    line-height: 1.15;
}
.component-chip span {
    color: var(--muted);
    font-size: 13px;
}
.brand-mark {
    letter-spacing: -.05em;
}

@media (max-width: 900px) {
    .library-toolbar,
    .compact-toolbar,
    .library-preview-grid {
        grid-template-columns: 1fr;
    }
    .library-actions {
        grid-template-columns: 1fr;
    }
    .component-grid {
        grid-template-columns: 1fr;
    }
}

/* Bugfix: ruhigeres Dashboard + Tabellen-Bibliothek + Autocomplete */
.summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "daily weekly"
        "calories info";
}
.primary-score,
.weekly-score,
.calorie-score,
.summary-grid .info-card {
    min-height: 220px;
    background: rgba(255,255,255,.9);
    color: var(--text);
    box-shadow: 0 16px 44px rgba(32, 34, 85, .09);
}
.primary-score {
    border-color: rgba(90, 93, 245, .20);
}
.primary-score .score-topline span,
.primary-score .score-bottomline small,
.primary-score .score-bottomline p {
    color: var(--muted);
    opacity: 1;
}
.primary-score .score-topline strong,
.primary-score .score-bottomline b {
    color: var(--accent-strong);
}
.progress-track,
.weekly-score .progress-track,
.calorie-score .progress-track,
.primary-score .progress-track {
    background: #ececf6;
}
.progress-track span,
.primary-score .progress-track span,
.weekly-score .progress-track span,
.calorie-score .progress-track span,
.bar-track i,
.vbar-track i,
.vbar:nth-child(2n) .vbar-track i,
.vbar:nth-child(3n) .vbar-track i {
    background: var(--accent);
}
.week-day {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}
.week-day:hover,
.week-day:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(90, 93, 245, .10);
    outline: none;
}

.library-quick-panel {
    margin: 22px 0 0;
}
.autocomplete-toolbar {
    position: relative;
    margin-bottom: 8px;
}
.autocomplete-results {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 12px;
}
.autocomplete-option {
    display: grid;
    width: 100%;
    text-align: left;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 0;
    background: #fff;
    color: var(--text);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
}
.autocomplete-option:last-child { border-bottom: 0; }
.autocomplete-option:hover,
.autocomplete-option:focus-visible {
    background: var(--accent-soft);
    outline: none;
}
.autocomplete-option strong { font-size: 15px; }
.autocomplete-option span,
.autocomplete-empty { color: var(--muted); font-weight: 750; font-size: 13px; }
.autocomplete-empty { padding: 14px; }
.quick-selection-card {
    border: 1px solid rgba(90, 93, 245, .20);
    border-radius: 20px;
    background: #fff;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.quick-selection-card h3 { margin: 0 0 4px; }

.library-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
}
.library-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.library-table th,
.library-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.library-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    background: #f8f8fd;
    font-weight: 900;
}
.library-table tr:last-child td { border-bottom: 0; }
.library-row {
    cursor: pointer;
}
.library-row:hover,
.library-row.selected {
    background: #f7f7ff;
}
.library-row:focus-visible {
    outline: 3px solid rgba(90, 93, 245, .20);
    outline-offset: -3px;
}
.library-row td:first-child strong {
    display: block;
    margin-bottom: 3px;
    line-height: 1.2;
}
.library-row td:first-child span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    max-width: 360px;
}
.row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: end;
}
.inline-field {
    display: grid;
    gap: 4px;
    margin: 0;
    min-width: 82px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}
.inline-field input {
    min-height: 38px;
    padding: 8px 10px;
    width: 84px;
}
button.small.danger {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(190, 59, 59, .16);
}

@media (max-width: 980px) {
    .summary-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "daily"
            "weekly"
            "calories"
            "info";
    }
    .primary-score,
    .weekly-score,
    .calorie-score,
    .summary-grid .info-card { min-height: auto; }
    .quick-selection-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .library-table { min-width: 680px; }
    .row-actions { flex-wrap: wrap; }
    .compact-toolbar { grid-template-columns: 1fr; }
}


/* Bugfix v2: Bibliothek einspaltig, Pagination, ruhigeres Dashboard */
.library-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}
.library-stack > .panel {
    min-width: 0;
}
.library-toolbar input#librarySearch {
    border-color: rgba(90, 93, 245, .24);
    background: #fff;
}
.library-table-wrap {
    max-width: 100%;
}
.library-table th:last-child,
.library-table td:last-child {
    width: 260px;
}
.table-pager {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}
.pager-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pager-btn {
    min-width: 38px;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: none;
}
.pager-btn.active {
    color: var(--accent-strong);
    border-color: rgba(90, 93, 245, .38);
    background: var(--accent-soft);
}
.pager-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}
.summary-grid .score-card,
.summary-grid .info-card {
    box-shadow: 0 14px 38px rgba(32, 34, 85, .075);
}
.progress-track span,
.primary-score .progress-track span,
.weekly-score .progress-track span,
.calorie-score .progress-track span {
    background: var(--accent-strong);
}
.primary-score,
.weekly-score,
.calorie-score {
    background: rgba(255,255,255,.94);
}
.primary-score .score-topline strong,
.weekly-score .score-topline strong,
.calorie-score .score-topline strong {
    font-size: clamp(42px, 5vw, 66px);
}
.summary-grid .info-card .chip {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

@media (max-width: 760px) {
    .library-table th:last-child,
    .library-table td:last-child {
        width: auto;
    }
    .table-pager {
        align-items: stretch;
    }
    .pager-buttons {
        width: 100%;
    }
    .pager-btn {
        flex: 1 1 auto;
    }
}

/* Bugfix v3: Autocomplete via GET, Bibliothek einspaltig, ruhigeres/gleichmäßigeres Dashboard */
.library-stack,
section.library-stack {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 22px !important;
    width: 100% !important;
    margin-top: 20px;
}
.library-stack > .panel {
    width: 100% !important;
    max-width: none !important;
}
.library-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
}
.library-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    table-layout: fixed;
}
.library-table th,
.library-table td {
    padding: 12px 12px;
    vertical-align: middle;
}
.library-table th:first-child,
.library-table td:first-child {
    width: 34%;
}
.library-table th:last-child,
.library-table td:last-child {
    width: 300px;
}
.library-table td strong {
    font-size: 15px;
    line-height: 1.2;
}
.library-table td span {
    margin-top: 4px;
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
}
.library-toolbar {
    grid-template-columns: minmax(260px, 1fr) 150px 130px;
}
#librarySearch,
#quickLibrarySearch {
    font-size: 15px;
}

.summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
        "daily weekly"
        "calories info" !important;
    gap: 18px;
}
.primary-score { grid-area: daily !important; }
.weekly-score { grid-area: weekly !important; }
.calorie-score { grid-area: calories !important; }
.summary-grid .info-card { grid-area: info !important; }
.summary-grid .score-card,
.summary-grid .info-card {
    min-height: 205px !important;
    padding: 22px !important;
    border: 1px solid rgba(218, 219, 236, .92);
    box-shadow: 0 12px 34px rgba(24, 25, 64, .06) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--text) !important;
}
.score-topline span,
.weekly-score .score-topline span,
.calorie-score .score-topline span,
.score-bottomline small,
.weekly-score .score-bottomline small,
.calorie-score .score-bottomline small {
    color: var(--muted) !important;
    opacity: 1 !important;
}
.primary-score .score-topline strong,
.weekly-score .score-topline strong,
.calorie-score .score-topline strong,
.score-topline strong {
    color: var(--accent-strong) !important;
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
}
.calorie-score .score-topline strong {
    font-size: clamp(26px, 2.7vw, 38px) !important;
}
.score-bottomline b,
.primary-score .score-bottomline b,
.weekly-score .score-bottomline b,
.calorie-score .score-bottomline b {
    color: var(--accent-strong) !important;
    font-size: clamp(28px, 2.9vw, 40px) !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
}
.calorie-score .score-bottomline b {
    font-size: clamp(24px, 2.4vw, 34px) !important;
}
.score-bottomline p {
    color: var(--muted) !important;
    opacity: 1 !important;
    font-size: 14px;
    line-height: 1.4;
    max-width: 320px;
}
.progress-track {
    height: 10px !important;
    margin: 20px 0 18px !important;
    background: #ececf7 !important;
}
.progress-track span,
.primary-score .progress-track span,
.weekly-score .progress-track span,
.calorie-score .progress-track span {
    background: var(--accent-strong) !important;
}
.summary-grid .info-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.summary-grid .info-card h3 {
    font-size: clamp(22px, 2.3vw, 30px) !important;
    line-height: 1.05;
}
.summary-grid .info-card p {
    max-width: none !important;
    font-size: 15px;
    line-height: 1.48;
}
.week-card.over,
.progress-track span.over {
    background: #ff785d !important;
}
.chart-box svg .chart-gradient-stop,
.bar-fill {
    filter: none;
}

@media (max-width: 1120px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "daily"
            "weekly"
            "calories"
            "info" !important;
    }
    .summary-grid .score-card,
    .summary-grid .info-card { min-height: auto !important; }
}
@media (max-width: 860px) {
    .library-toolbar,
    .compact-toolbar {
        grid-template-columns: 1fr !important;
    }
    .library-table {
        min-width: 760px;
    }
    .library-table th:last-child,
    .library-table td:last-child {
        width: 280px;
    }
}

/* Bugfix v4: Bibliothek hart einspaltig, breite scrollbare Tabellen, ruhigeres Dashboard */
body #appView .page[data-page-view="library"] .library-stack,
body #appView .page[data-page-view="library"] section.library-stack,
main .page[data-page-view="library"] .library-stack {
    display: block !important;
    grid-template-columns: none !important;
    column-count: initial !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
body #appView .page[data-page-view="library"] .library-stack > .panel,
main .page[data-page-view="library"] .library-stack > .panel {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 24px 0 !important;
}
body #appView .page[data-page-view="library"] .library-list {
    display: block !important;
    width: 100% !important;
}
body #appView .page[data-page-view="library"] .library-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
body #appView .page[data-page-view="library"] .library-table {
    width: 1180px !important;
    min-width: 1180px !important;
    table-layout: auto !important;
    border-spacing: 0 !important;
}
body #appView .page[data-page-view="library"] .library-table th,
body #appView .page[data-page-view="library"] .library-table td {
    white-space: nowrap;
}
body #appView .page[data-page-view="library"] .library-table th:first-child,
body #appView .page[data-page-view="library"] .library-table td:first-child {
    width: 430px !important;
    min-width: 430px !important;
    white-space: normal;
}
body #appView .page[data-page-view="library"] .library-table th:last-child,
body #appView .page[data-page-view="library"] .library-table td:last-child {
    width: 380px !important;
    min-width: 380px !important;
}
body #appView .page[data-page-view="library"] .library-table td:first-child span {
    max-width: 400px !important;
}
body #appView .page[data-page-view="library"] .row-actions {
    min-width: 360px;
    justify-content: flex-start;
}
body #appView .page[data-page-view="library"] .table-pager {
    margin: 12px 2px 0;
}

.summary-grid .score-card,
.summary-grid .info-card {
    border-radius: 24px !important;
    box-shadow: 0 16px 38px rgba(22, 24, 70, .055) !important;
}
.primary-score {
    background: linear-gradient(135deg, #4f50e8 0%, #3631b5 100%) !important;
}
.summary-grid .score-topline strong,
.primary-score .score-topline strong,
.weekly-score .score-topline strong,
.calorie-score .score-topline strong {
    font-size: clamp(27px, 2.65vw, 38px) !important;
    letter-spacing: -.045em !important;
}
.calorie-score .score-topline strong {
    font-size: clamp(24px, 2.25vw, 32px) !important;
}
.summary-grid .score-bottomline b,
.primary-score .score-bottomline b,
.weekly-score .score-bottomline b,
.calorie-score .score-bottomline b {
    font-size: clamp(24px, 2.35vw, 34px) !important;
    letter-spacing: -.045em !important;
}
.calorie-score .score-bottomline b {
    font-size: clamp(22px, 2.05vw, 30px) !important;
}
.score-topline span,
.score-bottomline small {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.score-bottomline p {
    font-size: 13.5px !important;
}
.progress-track span,
.primary-score .progress-track span,
.weekly-score .progress-track span,
.calorie-score .progress-track span,
.bar-fill {
    background: var(--accent-strong) !important;
}

@media (max-width: 760px) {
    body #appView .page[data-page-view="library"] .library-table {
        width: 1060px !important;
        min-width: 1060px !important;
    }
    body #appView .page[data-page-view="library"] .library-table th:first-child,
    body #appView .page[data-page-view="library"] .library-table td:first-child {
        width: 360px !important;
        min-width: 360px !important;
    }
}

/* Bugfix v5: Dashboard-Zahlen wieder besser lesbar, ohne Kalorien-Kachel zu sprengen */
.summary-grid .score-topline strong,
.primary-score .score-topline strong,
.weekly-score .score-topline strong {
    font-size: clamp(34px, 3.45vw, 52px) !important;
    letter-spacing: -.055em !important;
}
.calorie-score .score-topline strong {
    font-size: clamp(30px, 3vw, 42px) !important;
    letter-spacing: -.055em !important;
}
.summary-grid .score-bottomline b,
.primary-score .score-bottomline b,
.weekly-score .score-bottomline b {
    font-size: clamp(32px, 3.25vw, 46px) !important;
    letter-spacing: -.055em !important;
}
.calorie-score .score-bottomline b {
    font-size: clamp(28px, 2.8vw, 38px) !important;
    letter-spacing: -.055em !important;
}
.score-topline span,
.score-bottomline small {
    font-size: 14px !important;
}
.score-bottomline p {
    font-size: 14.5px !important;
    line-height: 1.42 !important;
}
@media (max-width: 760px) {
    .summary-grid .score-topline strong,
    .primary-score .score-topline strong,
    .weekly-score .score-topline strong {
        font-size: clamp(36px, 11vw, 52px) !important;
    }
    .calorie-score .score-topline strong {
        font-size: clamp(31px, 9vw, 42px) !important;
    }
}

/* Bugfix v6: Werte in score-topline sind selbst <span>; nicht wie Labels klein machen. */
.score-topline {
    gap: 18px !important;
    align-items: flex-start !important;
}
.score-topline > span {
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.score-topline strong {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: .08em !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}
.score-topline strong span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    font-weight: inherit !important;
    min-width: 0 !important;
    text-transform: none !important;
}
.primary-score .score-topline strong,
.weekly-score .score-topline strong {
    font-size: clamp(42px, 4.35vw, 64px) !important;
    line-height: .92 !important;
}
.calorie-score .score-topline strong {
    font-size: clamp(34px, 3.45vw, 50px) !important;
    line-height: .96 !important;
}
.primary-score .score-bottomline b,
.weekly-score .score-bottomline b {
    font-size: clamp(38px, 3.8vw, 56px) !important;
    line-height: .95 !important;
}
.calorie-score .score-bottomline b {
    font-size: clamp(32px, 3.1vw, 46px) !important;
    line-height: .96 !important;
}
.score-bottomline small {
    font-size: 14px !important;
    line-height: 1.2 !important;
}
.score-bottomline p {
    font-size: 15px !important;
    line-height: 1.45 !important;
}
@media (max-width: 1180px) and (min-width: 761px) {
    .primary-score .score-topline strong,
    .weekly-score .score-topline strong {
        font-size: clamp(38px, 4vw, 56px) !important;
    }
    .calorie-score .score-topline strong {
        font-size: clamp(31px, 3.3vw, 44px) !important;
    }
}
@media (max-width: 760px) {
    .score-topline strong { justify-content: flex-start !important; }
    .primary-score .score-topline strong,
    .weekly-score .score-topline strong {
        font-size: clamp(42px, 13vw, 60px) !important;
    }
    .calorie-score .score-topline strong {
        font-size: clamp(34px, 10vw, 48px) !important;
    }
}