/* ============================================================================
   PLODDO — Design System "Fresh Fuel"  ·  v2.2 Brand
   Light, appetizing, friendly-professional: Cream, Grün, EIN Citrus-Moment.
   Logo: "The Pod". Fonts: Bricolage Grotesque / Instrument Sans / IBM Plex Mono.
   White-Label: --accent-primary ist der pro Kunde überschreibbare Marken-Hook.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2"),
         url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+2000-206F, U+20AC;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/static/fonts/instrument-sans-latin.woff2") format("woff2"),
         url("/static/fonts/instrument-sans-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+2000-206F, U+20AC;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/static/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
   TOKENS
   ========================================================================== */
:root {
    /* Fresh-Fuel-Palette — Cream, Grün, Citrus */
    --paper:            #FAF6ED;
    --bg-base:          #FAF6ED;
    --bg-muted:         #F3EDDE;
    --bg-surface:       #FFFFFF;
    --bg-elevated:      #FFFFFF;
    --card-bg:          var(--bg-surface);

    --ink:              #22301F;
    --text-primary:     #22301F;
    --text-secondary:   #4A503F;
    --text-muted:       #7D7663;
    --text-faint:       #A39A82;
    --text-inverse:     #FAF6ED;

    --border-muted:     #EFE8D7;
    --border-default:   #E8E0CF;
    --border-color:     #E8E0CF;
    --border-emphasis:  #D6CCB4;

    /* Signal — Ploddo-Grün (tenant-overridable White-Label-Hook) */
    --accent-primary:        #2F5D3A;
    --primary:               #2F5D3A;
    --accent-primary-hover:  #4C8A5C;
    --accent-primary-muted:  #E7EFE4;
    --accent-ink:            #22301F;

    /* Citrus — EIN Moment pro View */
    --accent-citrus:         #E4B33C;
    --accent-citrus-soft:    #FBEECF;

    /* Semantik */
    --pine:            #2F5D3A;
    --success:         #2F5D3A;
    --success-muted:   #E7EFE4;
    --warning:         #9A7414;
    --warning-muted:   #FBEECF;
    --danger:          #C94F35;
    --danger-muted:    #F7E3DD;
    --info:            #33566A;
    --info-muted:      #DCE5EA;

    /* Makro-Chart */
    --macro-protein:   #2F5D3A;
    --macro-carbs:     #E4B33C;
    --macro-fat:       #A9805B;

    /* Radii — freundlich, rund; Buttons/Chips sind Pills */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Elevation — weich und warm */
    --shadow-sm: 0 1px 2px rgba(34, 48, 31, 0.05);
    --shadow-md: 0 1px 2px rgba(34, 48, 31, 0.05), 0 4px 12px rgba(34, 48, 31, 0.06);
    --shadow-lg: 0 4px 8px rgba(34, 48, 31, 0.08), 0 16px 32px rgba(34, 48, 31, 0.12);
    --shadow-offset: 0 1px 2px rgba(34, 48, 31, 0.05), 0 4px 12px rgba(34, 48, 31, 0.06);
    --shadow-offset-accent: 0 4px 8px rgba(34, 48, 31, 0.08), 0 16px 32px rgba(34, 48, 31, 0.12);

    /* Type */
    --font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --text-xs: 0.71875rem;   /* 11.5 label */
    --text-sm: 0.8125rem;    /* 13 */
    --text-base: 0.9375rem;  /* 15 */
    --text-lg: 1.1875rem;    /* 19 h3 */
    --text-xl: 1.1875rem;
    --text-2xl: 1.625rem;    /* 26 h2 */
    --text-3xl: 2.25rem;     /* 36 h1 */
    --text-4xl: 3.5rem;      /* 56 hero */

    /* Spacing */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4.5rem;

    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;

    --navbar-height: 64px;
    --navbar-bg: rgba(250, 246, 237, 0.88);
    --bottom-nav-height: 62px;

    --glass-bg: rgba(250, 246, 237, 0.75);

    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));

    color-scheme: light;
}

:root[data-theme="dark"], [data-theme="dark"] {
    --paper:            #1A2317;
    --bg-base:          #1A2317;
    --bg-muted:         #202B1D;
    --bg-surface:       #22301F;
    --bg-elevated:      #2A3826;
    --card-bg:          var(--bg-surface);

    --ink:              #F2EFE3;
    --text-primary:     #F2EFE3;
    --text-secondary:   #C9CDBB;
    --text-muted:       #9AA38C;
    --text-faint:       #78816C;
    --text-inverse:     #22301F;

    --border-muted:     #2A3626;
    --border-default:   #35442F;
    --border-color:     #35442F;
    --border-emphasis:  #45573C;

    --accent-primary:        #6FAF7E;
    --primary:               #6FAF7E;
    --accent-primary-hover:  #8BC79A;
    --accent-primary-muted:  #2B3E29;
    --accent-ink:            #DFF0E2;

    --accent-citrus:         #E4B33C;
    --accent-citrus-soft:    #3D351A;

    --pine:            #6FAF7E;
    --success:         #6FAF7E;
    --success-muted:   #28402B;
    --warning:         #E4B33C;
    --warning-muted:   #3D351A;
    --danger:          #E0705A;
    --danger-muted:    #40251E;
    --info:            #7FA9BE;
    --info-muted:      #22303A;

    --macro-protein:   #6FAF7E;
    --macro-carbs:     #E4B33C;
    --macro-fat:       #C09A76;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
    --shadow-offset: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-offset-accent: 0 14px 40px rgba(0, 0, 0, 0.55);

    --navbar-bg: rgba(34, 48, 31, 0.88);
    --glass-bg: rgba(34, 48, 31, 0.78);
    color-scheme: dark;
}

/* ============================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    min-height: 100vh;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-primary-hover); }

::selection { background: var(--accent-primary); color: var(--text-inverse); }

:focus-visible { outline: 2.5px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-optical-sizing: auto;
}
h1 { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; }
h2 { font-size: var(--text-2xl); line-height: 1.15; }
h3 { font-size: var(--text-lg); line-height: 1.3; }
h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
p { margin-bottom: var(--space-3); }
strong, b { font-weight: 650; }
small { font-size: var(--text-sm); }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.86em; }

.eyebrow, .kicker, .overline {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--accent-primary);
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.mono-nums, .tabular { font-variant-numeric: tabular-nums; }

/* ============================================================================
   LAYOUT
   ========================================================================== */
.container, .page, .content-container, main.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
}
.container--narrow, .card--narrow { max-width: 640px; }

@media (max-width: 768px) {
    body.has-bottom-nav main.container { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-6)); }
}

/* Editorial page header — the signature */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1.5px solid var(--ink);
}
.page-header .header-left { min-width: 0; }
.page-header h1 { margin: 0; }
.page-header .header-actions, .header-actions, .action-group {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.page-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    color: var(--accent-primary);
}

.page-section, .lp-section { margin-bottom: var(--space-8); }
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    display: flex; align-items: baseline; gap: var(--space-3);
}
.section-title::before {
    content: "";
    width: 1.6rem; height: 2px; background: var(--accent-primary);
    display: inline-block; transform: translateY(-0.35em);
}

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--text-muted);
    margin-bottom: var(--space-4);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent-primary); }
.breadcrumb__separator { color: var(--border-emphasis); }

/* ============================================================================
   NAVBAR / SHELL
   ========================================================================== */
.navbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: var(--space-4);
    height: var(--navbar-height);
    padding: 0 var(--space-5);
    background: var(--navbar-bg);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border-default);
}
.navbar .logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.navbar .logo .tenant-logo { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.nav-links > a[role="menuitem"], .nav-links > a.nav-admin {
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-links > a[role="menuitem"]:hover { color: var(--accent-primary); background: var(--accent-primary-muted); }
.nav-links > a.active { color: var(--accent-primary); background: var(--accent-primary-muted); }
.nav-admin { color: var(--accent-primary) !important; }

.user-menu { display: flex; align-items: center; gap: var(--space-2); }
.user-name { font-weight: 600; font-size: var(--text-sm); }
.role-badge, .user-role {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full);
    border: 1px solid var(--border-emphasis); color: var(--text-muted);
}
.theme-toggle, .notification-bell__btn {
    background: none; border: 1px solid transparent; cursor: pointer;
    width: 38px; height: 38px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: 1.1rem;
}
.theme-toggle:hover, .notification-bell__btn:hover { background: var(--accent-primary-muted); color: var(--accent-primary); }
/* Theme toggle: inline SVG pair statt Emoji — CSS blendet das passende Icon ein */
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

.lang-switcher { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-full); overflow: hidden; }
.lang-btn { padding: 4px 10px; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.lang-btn.active { background: var(--accent-primary); color: #fff; }

.notification-bell { position: relative; }
.notification-bell__badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--accent-primary); color: #fff;
    font-size: 0.6rem; font-weight: 800; min-width: 16px; height: 16px;
    border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notification-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: 90vw;
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.notification-dropdown__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
.notification-dropdown__body { max-height: 380px; overflow-y: auto; }
.notification-dropdown__footer { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-default); text-align: center; font-size: var(--text-sm); }
.notification-dropdown-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-muted); }
.notification-dropdown-item--unread { background: var(--accent-primary-muted); }

/* Mobile bottom nav — heller Blur, aktiver Tab grün (wie Klienten-App-Tab-Bar) */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    display: none; justify-content: space-around; align-items: stretch;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--navbar-bg); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-default);
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 0.6875rem; font-weight: 600;
    color: var(--text-faint);
    transition: color var(--transition-fast);
}
.bottom-nav a.active, .bottom-nav a.bottom-nav__item--active { color: var(--accent-primary); font-weight: 700; }
.bottom-nav a.bottom-nav__item--primary { font-weight: 700; }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
    font-family: var(--font-body);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-size: var(--text-base); font-weight: 600; line-height: 1;
    padding: 0.78em 1.55em;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.btn-primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: #fff; }
.btn-secondary { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); }
.btn-secondary:hover { background: transparent; color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-emphasis); }
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-muted); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm, .btn-small { padding: 0.5em 0.85em; font-size: var(--text-sm); }
.btn-lg { padding: 0.95em 1.7em; font-size: var(--text-lg); }
.btn-block { width: 100%; }
.btn-citrus {
    background: var(--accent-citrus); color: #22301F; font-weight: 700;
    border-color: transparent;
}
.btn-citrus:hover { background: #EFC45C; color: #22301F; }

.btn:disabled, .btn.btn-loading { opacity: 0.55; cursor: not-allowed; }

/* ============================================================================
   CARDS
   ========================================================================== */
.card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.card--flush { padding: 0; overflow: hidden; }
.card-hover, a.card { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.card-hover:hover, a.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); border-color: var(--ink); }
.card__title, .card-title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* Stat cards — ledger tiles */
.stats-grid, .stat-grid, .card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.stat-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
}
.stat-card::after { content: ""; position: absolute; top: var(--space-5); right: var(--space-5); width: 8px; height: 8px; background: var(--accent-primary); border-radius: 2px; }
.stat-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.stat-label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }

.admin-nav-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--bg-surface); border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-5);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.admin-nav-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); border-color: var(--ink); }
.admin-header { margin-bottom: var(--space-5); }

/* ============================================================================
   FORMS
   ========================================================================== */
.form-group { margin-bottom: var(--space-4); }
.form-group label, .form-label, .frow label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--text-primary); }
.form-input, .form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="url"], input[type="tel"],
textarea, select {
    width: 100%; font-family: var(--font-body); font-size: var(--text-base);
    color: var(--text-primary); background: var(--bg-elevated);
    padding: 0.7em 0.85em;
    border: 1.5px solid var(--border-emphasis); border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-control:focus, input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-muted);
}
textarea { min-height: 120px; resize: vertical; }
.form-hint, .form-help { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.form-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-1); }
.checkbox-row, .form-check { display: flex; align-items: center; gap: var(--space-2); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent-primary); }

/* ============================================================================
   BADGES / CHIPS / PILLS
   ========================================================================== */
.chip, .tag, .badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: var(--text-xs); font-weight: 650; line-height: 1;
    padding: 0.35em 0.65em; border-radius: var(--radius-sm);
    border: 1px solid var(--border-emphasis); background: var(--bg-surface); color: var(--text-secondary);
}
.chip.active, .chip--active { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); }
.status-badge, .badge-status,
[class^="status-badge--"], [class*=" status-badge--"] {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--text-xs); font-weight: 700; padding: 0.35em 0.7em;
    border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid transparent;
}
.status-badge--success, .badge-success { background: var(--success-muted); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.status-badge--warning, .badge-warning { background: var(--warning-muted); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.status-badge--danger, .badge-danger { background: var(--danger-muted); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.status-badge--muted, .badge-muted, .badge-info { background: var(--bg-muted); color: var(--text-muted); border-color: var(--border-default); }
.badge-info { background: var(--info-muted); color: var(--info); }

/* ============================================================================
   TABLES — ledger
   ========================================================================== */
.table-responsive, .table-container { overflow-x: auto; border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); }
table, .table, .data-table, .admin-table, .card-table {
    width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.table th, .data-table th, .admin-table th, table th, .card-table th {
    text-align: left; font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs);
    color: var(--text-muted); padding: var(--space-3) var(--space-4);
    border-bottom: 1.5px solid var(--ink); background: var(--bg-muted);
    white-space: nowrap;
}
.table td, .data-table td, .admin-table td, table td, .card-table td {
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-muted); color: var(--text-primary);
}
.table tbody tr:hover, .data-table tbody tr:hover, table tbody tr:hover { background: var(--bg-muted); }
.table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }

/* ============================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state, .empty-state--large {
    text-align: center; padding: var(--space-8) var(--space-5);
    border: 1.5px dashed var(--border-emphasis); border-radius: var(--radius-lg);
    background: var(--bg-surface); color: var(--text-muted);
}
.empty-state-icon { color: var(--border-emphasis); margin-bottom: var(--space-3); display: inline-flex; }
.empty-state-icon svg { width: 44px; height: 44px; }
.empty-state-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-2); }
.empty-state-text { color: var(--text-secondary); margin-bottom: var(--space-4); }

/* ============================================================================
   STEPS / WIZARD
   ========================================================================== */
.steps, .wizard-steps { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.step { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.step-number {
    width: 2rem; height: 2rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-emphasis);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
}
.step.active .step-number, .step--active .step-number { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.step.done .step-number { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); }
.step-label { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.step.active .step-label { color: var(--text-primary); }

/* ============================================================================
   PROGRESS
   ========================================================================== */
.progress-bar-wrap { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.progress-bar { flex: 1; height: 10px; background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill, .progress-bar__fill { height: 100%; background: var(--accent-primary); transition: width var(--transition-base); }
.progress-text { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ============================================================================
   FLASH / ALERTS
   ========================================================================== */
.flash, .alert {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default); border-left-width: 4px;
    margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 500;
    background: var(--bg-surface);
}
.flash-success, .alert-success { border-left-color: var(--success); background: var(--success-muted); color: var(--success); }
.flash-error, .flash-danger, .alert-error, .alert-danger { border-left-color: var(--danger); background: var(--danger-muted); color: var(--danger); }
.flash-warning, .alert-warning { border-left-color: var(--warning); background: var(--warning-muted); color: var(--warning); }
.flash-info, .alert-info { border-left-color: var(--info); background: var(--info-muted); color: var(--info); }

/* ============================================================================
   TOASTS
   ========================================================================== */
#toast-container { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 1300; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.toast {
    display: flex; align-items: center; gap: 0.6em;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--ink); color: var(--text-inverse);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm); font-weight: 600;
    max-width: min(420px, 90vw);
    animation: toast-in 150ms ease-out;
}
/* Status-Punkt statt Kontor-Akzentkante — hell genug auf der Ink-Fläche */
.toast::before {
    content: ""; flex-shrink: 0;
    width: 8px; height: 8px; border-radius: var(--radius-full);
    background: var(--accent-primary-hover);
}
.toast-success::before { background: var(--accent-primary-hover); }
.toast-error::before { background: var(--danger); }
/* app.js wartet auf animationend — daher Keyframes, keine Transition */
.toast-out { animation: toast-out 200ms ease-out forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ============================================================================
   MODALS / BOTTOM SHEET
   ========================================================================== */
.modal-overlay, .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(34, 48, 31, 0.45); z-index: 200; backdrop-filter: blur(2px); }
.modal, .bottom-sheet { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 210; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4); }
.bottom-sheet__handle { width: 40px; height: 4px; background: var(--border-emphasis); border-radius: var(--radius-full); margin: 0 auto var(--space-3); }

/* ============================================================================
   COOKIE BANNER (fixed overlay — never covers content flow)
   ========================================================================== */
/* Green-deep-Fläche (light: --ink = green-deep) mit Cream-Text und grünem
   Akzent-Border-Top. Beide Farben flippen im Dark-Theme gemeinsam
   (helle Fläche, dunkler Text) — Lesbarkeit bleibt in beiden Themes. */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
    background: var(--ink); color: var(--text-inverse);
    padding: var(--space-4) var(--space-5);
    border-top: 3px solid var(--accent-primary);
    box-shadow: 0 -8px 24px rgba(34, 48, 31, 0.18);
}
/* Links erben die Flächen-Textfarbe — Grün auf Green-deep wäre unleserlich */
.cookie-banner a {
    color: var(--text-inverse);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner a:hover { color: var(--text-inverse); opacity: 0.8; }
/* Sekundär-Button muss auf der geflippten Fläche in beiden Themes sichtbar sein */
.cookie-banner .btn-secondary {
    background: transparent;
    color: var(--text-inverse);
    border-color: color-mix(in srgb, var(--text-inverse) 55%, transparent);
}
.cookie-banner .btn-secondary:hover {
    background: color-mix(in srgb, var(--text-inverse) 14%, transparent);
    color: var(--text-inverse);
    border-color: var(--text-inverse);
}


/* ============================================================================
   SHELL FIXTURES — back-to-top, impersonation, PWA-banner, footer, PTR
   (von base.html genutzt; beim Kontor-Neuschrieb verloren gegangen)
   ========================================================================== */
.back-to-top {
    position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 950;
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--accent-primary); color: #fff; border: none;
    box-shadow: var(--shadow-lg);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease, background 120ms ease-out;
}
.back-to-top:hover { background: var(--accent-primary-hover); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 768px) {
    .back-to-top { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4)); }
}

.impersonation-banner {
    position: sticky; top: 0; z-index: 1100;
    background: var(--danger); color: #fff;
    padding: var(--space-2) var(--space-4);
    text-align: center; font-size: var(--text-sm); font-weight: 600;
}

.banner--warning {
    background: var(--warning-muted); color: var(--text-primary);
    border-bottom: 1.5px solid var(--warning);
    padding: var(--space-2) var(--space-4);
    text-align: center; font-size: var(--text-sm); font-weight: 600;
}

.site-footer {
    max-width: 1140px; margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
    border-top: 1px solid var(--border-default);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-muted);
}
.footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text-primary); }
.footer-copy { margin: 0; }

.pwa-install-banner {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 1150; width: min(520px, calc(100vw - 2 * var(--space-4)));
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-4);
}
.pwa-install-banner__content { display: flex; align-items: center; gap: var(--space-3); }
.pwa-install-banner__icon { border-radius: var(--radius-sm); }
.pwa-install-banner__text { display: flex; flex-direction: column; }
.pwa-install-banner__text small { color: var(--text-muted); }
.pwa-install-banner__actions { display: flex; gap: var(--space-2); margin-left: auto; }

.pull-to-refresh {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
    height: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-muted); transition: height 150ms ease;
}
.pull-to-refresh__spinner {
    width: 22px; height: 22px; opacity: 0;
    border: 2.5px solid var(--border-default); border-top-color: var(--accent-primary);
    border-radius: 50%; animation: ptr-spin 800ms linear infinite;
}
.pull-to-refresh--active .pull-to-refresh__spinner { opacity: 1; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.notification-dropdown__loading {
    padding: var(--space-4); text-align: center;
    color: var(--text-muted); font-size: var(--text-sm);
}

/* ============================================================================
   MISC UTILITIES
   ========================================================================== */
.divider, hr { border: none; border-top: 1px solid var(--border-default); margin: var(--space-5) 0; }
.hairline { border-top: 1.5px solid var(--ink); margin: var(--space-4) 0; }
.hidden { display: none !important; }
.inline-form { display: inline; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }
.badge-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-primary); display: inline-block; }

/* Nutrition block (recipe detail) */
.recipe-nutrition-block { border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--bg-muted); margin: var(--space-4) 0; }
.recipe-nutrition-title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.kcal-badge { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.macro-badge { display: inline-flex; gap: 0.3em; font-size: var(--text-sm); color: var(--text-secondary); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-emphasis); border-radius: var(--radius-full); border: 2px solid var(--bg-base); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    :root { --text-3xl: 2.1rem; --text-4xl: 2.6rem; }
    .container, main.container { padding: var(--space-5) var(--space-4) var(--space-6); }
    .nav-links > a[role="menuitem"] { display: none; }
    .bottom-nav { display: flex; }
    .page-header { align-items: flex-start; }
}

/* ============================================================================
   LANDING / MARKETING  (lp-*)
   All landing styles live in the "Fresh Fuel" public partial further down
   (search for: PLODDO — Public / Marketing surface).
   ========================================================================== */

/* Print (PDF exports keep a clean neutral look) */
@media print { body { background: #fff; } .navbar, .bottom-nav, .cookie-banner { display: none; } }

/* ============================================================================
   PAGE-SPECIFIC COMPONENTS — merged from css/parts/ (Kontor rollout)
   ========================================================================== */

/* ---- recipes ---- */
/* ============================================================================
   PLODDO — „Fresh Fuel"  ·  RECIPES partial
   Surface: recipe list, detail, add-wizard, edit, publish, marketplace.
   Reuses core tokens + component classes. No hardcoded colours:
   accent is ALWAYS var(--accent-primary) (white-label hook).
   Pills, soft shadows, round cards — one citrus moment per view.
   ========================================================================== */

/* ============================================================================
   RECIPE LIST — header, search / filter toolbar
   ========================================================================== */
.recipes-header { border-bottom: none; padding-bottom: 0; }
.recipes-count {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
    background: var(--accent-primary-muted);
    border-radius: var(--radius-full);
    padding: 0.3em 0.85em;
    margin-left: var(--space-3);
    vertical-align: middle;
    letter-spacing: 0;
}
.recipes-subline {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Outline pill in accent colour (Import-Button) */
.btn-outline-accent {
    background: transparent;
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.btn-outline-accent:hover {
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.recipes-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.search-form {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    flex: 1 1 300px;
    min-width: 240px;
}
.search-input {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-full);
    padding: 0.7em 1.2em;
}

/* meal-type filter row — pills, active = green fill */
.filter-chips,
.marketplace-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.filter-chips .chip,
.marketplace-categories .chip {
    border-radius: var(--radius-full);
    padding: 0.55em 1.1em;
    font-size: var(--text-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.filter-chips .chip:hover,
.marketplace-categories .chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.filter-chips .chip.active,
.marketplace-categories .chip.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

/* "Mehr Filter" collapsible tag drawer */
.tag-filter-collapse {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.tag-filter-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.tag-filter-summary::-webkit-details-marker { display: none; }
.tag-filter-summary::before {
    content: "+";
    font-family: var(--font-display);
    font-size: 1.1em;
    line-height: 1;
    color: var(--accent-primary);
}
.tag-filter-collapse[open] .tag-filter-summary::before { content: "\2013"; }
.tag-filter-collapse[open] .tag-filter-summary {
    border-bottom: 1px solid var(--border-default);
}
.tag-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.5em 0.9em;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tag-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.tag-chip.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}
.tag-chip-clear {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 650;
    padding: 0.5em 0.9em;
    border-radius: var(--radius-full);
    color: var(--accent-primary);
}
.tag-chip-clear:hover { color: var(--accent-primary-hover); background: var(--accent-primary-muted); }

/* Card / Table segmented toggle — pill */
.view-toggle {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-surface);
    padding: 3px;
    gap: 2px;
}
.view-btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.45em 1em;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.view-btn:hover { color: var(--text-primary); }
.view-btn.active { background: var(--accent-primary); color: var(--text-inverse); }

/* ============================================================================
   RECIPE CARD GRID — appetising photo cards, up to 4 columns
   ========================================================================== */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-4);
}

.recipe-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.recipe-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* Fresh-Fuel photo card: flush 4:3 photo, body below */
.recipe-card--photo { padding: 0; gap: 0; overflow: hidden; }

.recipe-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-muted);
    overflow: hidden;
}
.recipe-card-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.recipe-card:hover .recipe-card-photo > img { transform: scale(1.03); }

/* warm placeholder: cream-2 with the small mark (tenant logo wins) */
.recipe-card-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipe-card-photo-placeholder img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: 0.4;
    transition: none;
    transform: none;
}
.recipe-card:hover .recipe-card-photo-placeholder img { transform: none; }

/* overlay tag pill, top left */
.recipe-card-photo-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: color-mix(in srgb, var(--bg-base) 92%, transparent);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1;
    padding: 0.45em 0.9em;
    border-radius: var(--radius-full);
}

/* favorite star, top right — the one citrus moment on this view */
.recipe-card-fav {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--accent-citrus);
    font-size: 1.1rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(34, 48, 31, 0.25);
}

.recipe-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    flex: 1;
}
.recipe-card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text-primary);
}
.recipe-card-macros {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.recipe-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.recipe-card-meta { min-width: 0; }
.recipe-card-uses {
    color: var(--accent-primary);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.recipe-card-uses.is-zero { color: var(--text-faint); font-weight: 500; }

/* legacy card internals (marketplace / publish preview) */
.recipe-card-image {
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
    border-bottom: 1px solid var(--border-default);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    background: var(--bg-muted);
    aspect-ratio: 4 / 3;
}
.recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.recipe-card:hover .recipe-card-image img { transform: scale(1.03); }

.recipe-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}
.recipe-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.15;
    margin: 0;
    color: var(--text-primary);
}
.favorite-star {
    color: var(--accent-citrus);
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

/* meta row: meal type + portions + cooked/planned */
.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* kcal preview — number in mono, label muted */
.recipe-kcal-preview {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    color: var(--text-secondary);
}
.recipe-kcal-preview .kcal-badge {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1;
}

/* macro preview — quiet mono, tabular figures */
.recipe-macro-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.macro-badge-sm {
    display: inline-flex;
    gap: 0.3em;
    font-variant-numeric: tabular-nums;
}

/* tags — small pills */
.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: auto;
}
.recipe-tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.4em 0.75em;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-base);
    color: var(--text-muted);
}

/* first-3 ingredients preview */
.recipe-preview {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
    border-top: 1px solid var(--border-muted);
    padding-top: var(--space-2);
}

/* meal-type badge inside cards */
.recipe-meta .badge.breakfast,
.recipe-meta .badge.lunch,
.recipe-meta .badge.dinner,
.recipe-meta .badge.both {
    border-color: var(--border-default);
}
.badge.muted { color: var(--text-muted); background: var(--bg-muted); }

/* ============================================================================
   RECIPE TABLE VIEW — ledger sort headers
   ========================================================================== */
#recipes-table th.sortable { cursor: pointer; user-select: none; }
#recipes-table th.sortable::after {
    content: "\2195";
    margin-left: 0.4em;
    opacity: 0.35;
    font-size: 0.85em;
}
#recipes-table th.sortable.asc::after { content: "\2191"; opacity: 1; color: var(--accent-primary); }
#recipes-table th.sortable.desc::after { content: "\2193"; opacity: 1; color: var(--accent-primary); }
#recipes-table tbody tr { cursor: pointer; }
.recipe-link {
    font-weight: 600;
    color: var(--text-primary);
}
.recipe-link:hover { color: var(--accent-primary); }

/* admin import/export bar */
.import-export-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.import-form { display: inline; }

/* ============================================================================
   RECIPE DETAIL
   ========================================================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.back-link:hover { color: var(--accent-primary); }

.recipe-hero-image {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
    max-height: 420px;
    background: var(--bg-muted);
    box-shadow: var(--shadow-md);
}
.recipe-hero-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
}

.recipe-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-5);
}
.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.45em 0.9em;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
}
.info-badge.breakfast,
.info-badge.lunch,
.info-badge.dinner,
.info-badge.both {
    background: var(--accent-primary-muted);
    border-color: transparent;
    color: var(--accent-primary);
}
.info-badge.breakfast::before,
.info-badge.lunch::before,
.info-badge.dinner::before,
.info-badge.both::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
}

/* nutrition block (core defines the shell) — make the row read intentional */
.recipe-macro-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3) var(--space-5);
}
.recipe-nutrition-block .kcal-badge {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
    line-height: 1;
    padding-right: var(--space-4);
    border-right: 1px solid var(--border-default);
}
.recipe-macro-bar .macro-badge {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Big-8 minors (sat fat, sugar, fiber, salt) — quieter, still mono */
.recipe-macro-bar .macro-badge--minor {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* tag links under the nutrition block */
.recipe-tags-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.recipe-tag-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.45em 0.9em;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.recipe-tag-link:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: var(--space-4);
}
.source-link svg { width: 1em; height: 1em; }

/* two-column body: ingredients / instructions */
.recipe-sections {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
    margin-top: var(--space-5);
}
.recipe-sections .section h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
}

.ingredients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}
.ingredients-header h2 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* portion stepper — pill */
.portion-calculator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    padding: 3px;
    background: var(--bg-surface);
}
.portion-calculator.modified { border-color: var(--accent-primary); }
.portion-btn {
    width: 1.9rem; height: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1;
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
}
.portion-btn:hover { background: var(--bg-muted); }
.portion-display {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0 var(--space-1);
}
.portion-display #current-portions { font-family: var(--font-display); font-size: var(--text-base); }

.ingredients-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ingredients-list li {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-muted);
}
.ingredients-list li:last-child { border-bottom: none; }
.ing-amount {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 2ch;
}
.ing-unit { color: var(--text-secondary); font-size: var(--text-sm); }
.ing-name { color: var(--text-primary); }

.instructions-text {
    white-space: pre-line;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ============================================================================
   REVIEWS
   ========================================================================== */
.review-section {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-default);
}
.review-section > h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.review-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.review-stars-display { color: var(--accent-primary); font-size: 1.2rem; letter-spacing: 0.05em; }
.review-avg { font-family: var(--font-display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.review-count { color: var(--text-muted); font-size: var(--text-sm); }

.review-form {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.review-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.review-form-row .review-input { flex: 1; min-width: 200px; }

.reviewer-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
}
.reviewer-btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.45em 0.9em;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.reviewer-btn:hover { color: var(--text-primary); }
.reviewer-btn.active { background: var(--accent-primary); color: var(--text-inverse); }

.star-rating { display: inline-flex; gap: 0.1em; }
.star {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--border-emphasis);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.star:hover { transform: scale(1.12); }
.star.active { color: var(--accent-primary); }
.star.hover { color: var(--accent-primary-hover); }

.review-list { display: flex; flex-direction: column; gap: var(--space-3); }
.review-item {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
}
.review-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.review-header strong { font-weight: 650; }
.review-item-stars { color: var(--accent-primary); letter-spacing: 0.03em; }
.review-date { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.review-delete {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25em;
}
.review-delete:hover { color: var(--danger); }
.review-comment { color: var(--text-secondary); margin: 0; }

/* ============================================================================
   ADD-RECIPE WIZARD  (.rw-*)
   ========================================================================== */
.rw { max-width: 820px; margin: 0 auto; }

/* step indicator */
.rw-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
}
.rw-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
}
.rw-step-num {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
}
.rw-step-label { font-size: var(--text-sm); font-weight: 650; }
.rw-step.active { color: var(--text-primary); }
.rw-step.active .rw-step-num { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); }
.rw-step.done .rw-step-num { background: var(--accent-primary-muted); color: var(--accent-primary); border-color: transparent; }
.rw-step-line { flex: 1; height: 1px; background: var(--border-default); }

.rw-panel { animation: rw-fade 200ms ease; }
@keyframes rw-fade { from { opacity: 0; } to { opacity: 1; } }
.rw-slide-in-right { animation: rw-slide-r 220ms ease; }
.rw-slide-in-left { animation: rw-slide-l 220ms ease; }
@keyframes rw-slide-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes rw-slide-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.rw-hero { margin-bottom: var(--space-5); }
.rw-hero h1 { margin-bottom: var(--space-1); }
.rw-hero p { color: var(--text-secondary); margin: 0; }

/* smart universal input */
.rw-smart-box {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-4);
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-4);
    transition: border-color var(--transition-fast);
}
.rw-smart-box:focus-within { border-color: var(--accent-primary); }
.rw-smart-box.loading { opacity: 0.7; }
.rw-smart-field { flex: 1; min-width: 0; }
.rw-smart-field textarea { min-height: 0; }
.rw-input-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.rw-smart-actions { display: flex; align-items: flex-start; }

.rw-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 650;
    padding: 0.35em 0.8em;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.rw-badge.url { background: var(--info-muted); color: var(--info); }
.rw-badge.text { background: var(--success-muted); color: var(--success); }
.rw-badge.name { background: var(--accent-primary-muted); color: var(--accent-ink); }

/* secondary import options */
.rw-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.rw-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.6em 1.1em;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.rw-option-btn:hover { border-color: var(--accent-primary); background: var(--accent-primary-muted); color: var(--accent-primary); }
.rw-option-btn svg { width: 1.05em; height: 1.05em; color: var(--accent-primary); }

/* AI assist panel */
.rw-ai {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-muted);
    margin-bottom: var(--space-5);
}
.rw-ai-box { margin-bottom: var(--space-3); }
.rw-ai-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: 650;
    margin-bottom: var(--space-3);
}
.rw-ai-top > span { display: inline-flex; align-items: center; gap: 0.4em; }
.rw-ai-top svg { width: 1.05em; height: 1.05em; color: var(--accent-primary); }
.rw-ai-btns { display: inline-flex; gap: var(--space-2); }
.rw-ai-details summary,
.rw-ai-divider {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--space-2);
}
.rw-ai-divider { margin: var(--space-3) 0 var(--space-2); cursor: default; }

/* shared prompt <pre> */
.rw-ai-details pre,
.prompt-details pre {
    white-space: pre-wrap;
    font-size: var(--text-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-top: var(--space-2);
    max-height: 240px;
    overflow-y: auto;
}

/* loading skeleton */
.rw-loading { padding: var(--space-4) 0; }
.rw-skeleton { display: flex; flex-direction: column; gap: var(--space-2); }
.rw-skel-bar {
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border-muted) 37%, var(--bg-muted) 63%);
    background-size: 400% 100%;
    animation: rw-shimmer 1.4s ease infinite;
}
.rw-skel-bar.title { height: 20px; width: 55%; }
.rw-skel-bar.short { width: 40%; }
.rw-skel-bar.medium { width: 70%; }
@keyframes rw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.rw-loading-msg { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

/* error banner */
.rw-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--radius-lg);
    background: var(--danger-muted);
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-top: var(--space-3);
}
.rw-error-icon { display: inline-flex; }
.rw-error-icon svg { width: 1.1em; height: 1.1em; }
.rw-error-text { flex: 1; }
.rw-error button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; }

/* step-2 title */
.rw-title-wrap { margin-bottom: var(--space-5); }
.rw-title-input {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 640;
    padding: 0.2em 0;
    border: none;
    border-bottom: 1.5px solid var(--border-emphasis);
    border-radius: 0;
    background: transparent;
}
.rw-title-input:focus { border-bottom-color: var(--accent-primary); box-shadow: none; }
.rw-source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
    margin-top: var(--space-2);
}
.rw-source-link svg { width: 1em; height: 1em; }

/* settings row */
.rw-settings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.rw-setting label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.rw-portions {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.rw-portions input {
    width: 100%;
    text-align: center;
    border: none;
    border-radius: 0;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.rw-portions input::-webkit-outer-spin-button,
.rw-portions input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rw-pbtn {
    width: 2.4rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    background: var(--bg-muted);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
}
.rw-pbtn:hover { background: var(--border-muted); }

/* generic wizard section */
.rw-section {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
    margin-bottom: var(--space-5);
}
.rw-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.rw-section-head h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
}
.rw-badge-optional {
    font-size: var(--text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.2em 0.5em;
}
.rw-badge-optional.rw-badge-filled { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-muted); }

/* image drop */
.rw-image-drop {
    position: relative;
    border: 1.5px dashed var(--border-emphasis);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-6);
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.rw-image-drop.dragover { border-color: var(--accent-primary); background: var(--accent-primary-muted); }
.rw-image-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.rw-image-drop-icon { color: var(--border-emphasis); }
.rw-image-drop-icon svg { width: 40px; height: 40px; }
.rw-image-browse { color: var(--accent-primary); font-weight: 650; cursor: pointer; text-decoration: underline; }
.rw-image-drop-hint { color: var(--text-muted); font-size: var(--text-xs); }
.rw-image-preview { position: relative; display: inline-block; }
.rw-image-preview img { max-height: 260px; border-radius: var(--radius-md); }
.rw-image-preview-remove {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-emphasis);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    line-height: 1;
}

/* ingredient rows */
.rw-ing-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.rw-ing-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.rw-ing-row.rw-ing-dragging { opacity: 0.5; }
.rw-ing-row.rw-ing-drag-over { border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-primary-muted); }
.rw-ing-row.rw-ing-removing { opacity: 0; transform: translateX(12px); }
.rw-ing-handle { cursor: grab; color: var(--text-muted); letter-spacing: -3px; padding: 0 0.2em; user-select: none; }
.rw-ing-amt { max-width: 4.5rem; text-align: center; }
.rw-ing-unit { max-width: 6rem; }
.rw-ing-amt, .rw-ing-unit, .rw-ing-name { border-color: var(--border-muted); }
.rw-ing-name { flex: 1; }
.rw-ing-del {
    width: 2rem; height: 2rem;
    flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.9rem; line-height: 1;
    border-radius: var(--radius-sm);
}
.rw-ing-del:hover { color: var(--danger); background: var(--danger-muted); }

.rw-ing-add { display: flex; gap: var(--space-2); }
.rw-ing-add input { flex: 1; }
.rw-ing-add-btn {
    width: 2.7rem; flex-shrink: 0;
    font-family: var(--font-display); font-size: 1.3rem;
    background: var(--accent-primary); color: var(--text-inverse);
    border: none; border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.rw-ing-add-btn:hover { background: var(--accent-primary-hover); }

.rw-bulk { margin-top: var(--space-3); }
.rw-bulk-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* collapsible sections */
.rw-collapsible > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}
.rw-collapsible > summary::-webkit-details-marker { display: none; }
.rw-collapsible > summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--accent-primary);
    line-height: 1;
}
.rw-collapsible[open] > summary::after { content: "\2013"; }
.rw-collapsible > summary h2 { margin: 0; }
.rw-tag-count { font-size: var(--text-sm); color: var(--accent-primary); font-weight: 650; }

/* tag grid (add + edit) */
.tag-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.tag-group { display: flex; flex-direction: column; gap: var(--space-2); }
.tag-group-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.tag-group-items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-checkbox { position: relative; cursor: pointer; }
.tag-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.tag-checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.45em 0.9em;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.tag-checkbox:hover .tag-checkbox-label { border-color: var(--accent-primary); color: var(--accent-primary); }
.tag-checkbox input:checked + .tag-checkbox-label {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}
.tag-checkbox input:focus-visible + .tag-checkbox-label { outline: 2.5px solid var(--accent-primary); outline-offset: 2px; }

/* nutrition grid (add step 2) */
.rw-nutrition-hint { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.rw-nutrition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.rw-nutrition-row label,
.rw-macro-row label,
.rw-kcal-field label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

/* wizard nav */
.rw-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

/* step 3 review */
.rw-review-header { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.rw-review-header h1 { margin-bottom: var(--space-2); }
.rw-review-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rw-review-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.rw-review-body { display: flex; flex-direction: column; gap: var(--space-5); }
.rw-review-section h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.rw-review-ings { list-style: none; margin: 0; padding: 0; }
.rw-review-ings li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-muted); }
.rw-review-instr { white-space: pre-line; color: var(--text-secondary); line-height: 1.7; }

/* nutrition calculator (step 3) + gemini box (shared with edit) */
.rw-kcal-section {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-5);
}
.rw-kcal-section h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-1); }
.rw-kcal-hint, .rw-macro-section h4 { color: var(--text-muted); font-size: var(--text-sm); }
.rw-macro-section h4 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin: var(--space-4) 0 var(--space-2); }

.gemini-box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}
.gemini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.gemini-title { font-weight: 650; font-size: var(--text-sm); }
.gemini-btns { display: inline-flex; gap: var(--space-2); }
.prompt-details summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }

.rw-kcal-paste { margin-top: var(--space-3); }
.rw-kcal-paste label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }
.rw-kcal-inputs { margin-top: var(--space-3); }
.rw-kcal-field { max-width: 220px; }
.rw-macro-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

/* save button spinner + shake */
.rw-spinner {
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    display: inline-block;
    animation: rw-spin 0.7s linear infinite;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }
.rw-shake { animation: rw-shake 0.4s; }
@keyframes rw-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ============================================================================
   EDIT FORM  (.recipe-form)
   ========================================================================== */
.recipe-form { max-width: 780px; }
.form-section { margin-bottom: var(--space-5); }
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}
.macro-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.ingredients-editor { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.ingredient-row { display: flex; gap: var(--space-2); align-items: center; }
.ingredient-row input[name="ingredient_amount[]"] { max-width: 5rem; }
.ingredient-row input[name="ingredient_unit[]"] { max-width: 6.5rem; }
.ingredient-row input[name="ingredient_name[]"] { flex: 1; }
.btn-remove {
    width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.btn-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-muted); }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

/* edit image manager */
.edit-image-manager { display: flex; flex-direction: column; gap: var(--space-3); }
.edit-image-current img {
    max-height: 220px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.edit-image-options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.edit-image-radio { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.edit-image-hint { font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================================================
   MARKETPLACE
   ========================================================================== */
.marketplace-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.marketplace-category-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 650;
    padding: 0.35em 0.65em;
    border-radius: var(--radius-sm);
    background: var(--accent-primary-muted);
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.marketplace-import-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.recipe-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
.marketplace-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 62ch;
    margin-bottom: var(--space-4);
}
.imported-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35em 0.7em;
    border-radius: var(--radius-sm);
    background: var(--success-muted);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    margin-top: auto;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.pagination-info {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   PUBLISH TO MARKETPLACE
   ========================================================================== */
.marketplace-publish-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
}
.marketplace-publish-form { display: flex; flex-direction: column; gap: var(--space-4); }
.info-card {
    border: 1.5px solid var(--border-default);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: var(--space-4);
}
.info-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.info-card ul { margin: 0; padding-left: 1.1em; color: var(--text-secondary); font-size: var(--text-sm); }
.info-card li { margin-bottom: var(--space-1); }
.marketplace-publish-preview h2 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .recipe-sections { grid-template-columns: 1fr; gap: var(--space-5); }
    .rw-settings { grid-template-columns: 1fr; }
    .rw-nutrition-grid, .macro-form-grid, .rw-macro-inputs { grid-template-columns: 1fr; }
    .marketplace-publish-layout { grid-template-columns: 1fr; }
    .rw-smart-box { flex-direction: column; }
    .recipes-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 460px) {
    .recipes-grid { grid-template-columns: 1fr; }
    .view-toggle { align-self: stretch; }
    .view-btn { flex: 1; }
}

/* ---- planning ---- */
/* ============================================================================
   PLODDO — „Kontor" partial · PLANNING SURFACE
   Meal plans (list/detail/edit), wizard (3 steps), calendar.
   Owner: planning surface. All colors are core tokens from static/style.css.
   NO new tokens introduced — everything maps to existing --* variables.

   State color language (meal actions), sourced from core tokens:
     cook     -> --pine / --success   (deep pine green)
     leftover -> --warning            (amber "Reste")
     skip/Frei-> --text-muted         (quiet, no signal)
   The white-label signal (--accent-primary) is reserved for selection,
   "today", active steps and focus — never hardcoded.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shared: meal-time eyebrow label (replaces ☕/☀/🌙 emoji)
   --------------------------------------------------------------------------- */
.meal-eyebrow {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================================================
   PLAN LIST  (templates/plans/list.html)
   ========================================================================== */
.plans-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.plans-controls .sort-controls { margin-left: auto; }
.plans-controls .client-filter,
.plans-controls .sort-controls { min-width: 160px; }
.sort-dropdown { width: auto; min-width: 160px; }

.cycles-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.cycle-card-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.cycle-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}
/* status hairline accent on the left edge */
.cycle-card-enhanced::before {
    content: "";
    position: absolute;
    left: 0; top: var(--space-5); bottom: var(--space-5);
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--border-emphasis);
}
.cycle-card-enhanced.draft::before { background: var(--warning); }
.cycle-card-enhanced.completed::before { background: var(--pine); }

.cycle-card-header { display: flex; flex-direction: column; gap: var(--space-2); }
.cycle-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cycle-name-link {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.1;
}
.cycle-name-link:hover { color: var(--accent-primary); }

.cycle-client-badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: var(--text-xs); font-weight: 650;
    padding: 0.3em 0.75em;
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    background: var(--bg-muted);
}
.cycle-client-badge svg { width: 12px; height: 12px; }

.cycle-status-badge {
    margin-left: auto;
    display: inline-flex; align-items: center;
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.32em 0.75em; border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.cycle-status-badge.draft { background: var(--warning-muted); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.cycle-status-badge.completed { background: var(--success-muted); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }

.cycle-meta {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cycle-meta .cycle-dates { font-family: var(--font-mono); font-size: var(--text-xs); }
.cycle-meta .cycle-duration { font-weight: 650; color: var(--text-secondary); }

/* Meal breakdown — soft progress bar on green-soft track */
.cycle-breakdown { display: flex; flex-direction: column; gap: var(--space-2); }
.breakdown-bar {
    display: flex; height: 8px; width: 100%;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--accent-primary-muted);
}
.bar-segment { height: 100%; }
.bar-segment.cook { background: var(--pine); }
.bar-segment.leftover { background: var(--warning); }
.bar-segment.skip { background: var(--border-emphasis); }

.breakdown-legend {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--text-xs); color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.legend-item { display: inline-flex; align-items: center; gap: 0.4em; }
.legend-item .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dot.cook { background: var(--pine); }
.dot.leftover { background: var(--warning); }
.dot.skip { background: var(--border-emphasis); }

.cycle-preview {
    font-size: var(--text-sm); color: var(--text-secondary);
    display: flex; gap: 0.4em; flex-wrap: wrap;
}
.preview-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); color: var(--text-muted); }
.preview-recipes { color: var(--text-secondary); }

.cycle-shopping { font-size: var(--text-sm); }
.shopping-link {
    display: inline-flex; align-items: center; gap: 0.5em;
    color: var(--text-secondary); font-weight: 600;
}
.shopping-link:hover { color: var(--accent-primary); }
.shopping-link svg { width: 14px; height: 14px; }

.cycle-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-muted);
}
.created-date {
    font-size: var(--text-xs); color: var(--text-muted);
    letter-spacing: 0.02em; font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.cycle-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Empty state features */
.empty-features {
    display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap;
    margin: var(--space-4) 0 var(--space-5);
}
.empty-features .feature {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600;
}
.empty-features .feature svg { width: 16px; height: 16px; color: var(--accent-primary); }

/* ============================================================================
   PLAN DETAIL  (templates/plans/detail.html) — ledger of days
   ========================================================================== */
.plan-detail { max-width: 900px; }
.back-link {
    display: inline-block; margin-bottom: var(--space-3);
    font-size: var(--text-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.back-link:hover { color: var(--accent-primary); }

.pd-header {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-default);
}
.pd-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.pd-title-row h1 { margin: 0; }
.pd-dates {
    display: block; margin-top: var(--space-1);
    font-size: var(--text-sm); color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em; font-weight: 400;
}
.pd-client-badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    margin-top: var(--space-2);
    font-size: var(--text-xs); font-weight: 650;
    padding: 0.32em 0.75em;
    border: 1px solid var(--border-emphasis); border-radius: var(--radius-full);
    color: var(--text-secondary); background: var(--bg-muted);
}
.pd-client-badge svg { width: 12px; height: 12px; }
.pd-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.pd-days { display: flex; flex-direction: column; gap: var(--space-5); }

.pd-day {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.pd-day-header {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-default);
}
.pd-weekday { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.pd-date { font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Meal row — ledger line with a left state color-bar */
.pd-meal {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-muted);
    border-left: 3px solid var(--border-emphasis);
    position: relative;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pd-meal:last-child { border-bottom: none; }
.pd-meal.pd-cook { border-left-color: var(--pine); }
.pd-meal.pd-leftover { border-left-color: var(--warning); }
.pd-meal.pd-skip { border-left-color: var(--border-emphasis); }
.pd-meal[draggable="true"] { cursor: grab; }
.pd-meal[draggable="true"]:hover { background: var(--bg-muted); }

.pd-meal-indicator {
    font-family: var(--font-body);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
}
.pd-meal-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-recipe { font-weight: 600; color: var(--text-primary); }
.pd-recipe a { color: var(--text-primary); }
.pd-recipe a:hover { color: var(--accent-primary); }
.pd-leftover-recipe {
    display: inline-flex; align-items: center; gap: 0.45em;
    color: var(--text-secondary); font-weight: 600; font-style: normal;
}
.pd-leftover-recipe::before {
    content: "Reste";
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warning);
    background: var(--warning-muted);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    padding: 0.2em 0.6em; border-radius: var(--radius-full);
}
.pd-who { font-size: var(--text-xs); color: var(--text-muted); }
/* "Frei"/skip rows recede — the inactive / done pattern */
.pd-meal.pd-skip { background: var(--bg-muted); }
.pd-skip-body { grid-column: 2 / -1; }
.pd-skip-label {
    font-size: var(--text-sm); font-style: italic; color: var(--text-muted);
}

.pd-kcal { text-align: right; }
.kcal-tag {
    font-family: var(--font-mono); font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm); color: var(--text-secondary);
    white-space: nowrap;
}
.pd-macros {
    grid-column: 2 / -1;
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    margin-top: 2px;
}
.macro-tag { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Summary blocks */
.pd-summary {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
}
.pd-summary h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.pd-summary-row {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    border-bottom: 1px dotted var(--border-default);
}
.pd-summary-row:last-child { border-bottom: none; }
.pd-summary-row strong { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-macro-summary { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-2); }
.pd-macro-summary-item { display: flex; flex-direction: column; }
.pd-macro-summary-item span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.pd-macro-summary-item strong { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* Drag & drop states (shared by detail + calendar) */
.pd-meal.dragging, .dm.dragging { opacity: 0.5; }
.pd-meal.drag-over { background: var(--accent-primary-muted); border-left-color: var(--accent-primary); }
.pd-meal.swapping, .dm.swapping { opacity: 0.6; }

/* ============================================================================
   PLAN EDIT  (templates/plans/edit.html)
   ========================================================================== */
.edit-info-box {
    background: var(--accent-primary-muted);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
    color: var(--text-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}
.edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.edit-day-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.edit-day-header {
    background: var(--bg-muted);
    padding: var(--space-3) var(--space-4);
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--border-default);
}
.edit-day-header .weekday { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.edit-day-header .date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.edit-meal-row {
    padding: var(--space-3) var(--space-4);
    display: flex; align-items: center; gap: var(--space-3);
    border-bottom: 1px solid var(--border-muted);
}
.edit-meal-row:last-child { border-bottom: none; }
.meal-label {
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    min-width: 3.6rem;
    color: var(--text-faint);
}
/* meal-type tint kept subtle; no hardcoded hex */
.meal-label.breakfast { color: var(--accent-primary); }
.meal-label.lunch { color: var(--warning); }
.meal-label.dinner { color: var(--text-secondary); }

.recipe-select { flex: 1; }

.meal-leftover { flex: 1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.leftover-badge {
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.35em 0.9em; border-radius: var(--radius-full);
    background: var(--warning-muted); color: var(--warning);
}
.leftover-source { font-size: var(--text-sm); color: var(--text-secondary); }
.leftover-who { margin-left: auto; display: flex; gap: var(--space-3); font-size: var(--text-xs); }
.leftover-who label { display: flex; align-items: center; gap: 0.3em; cursor: pointer; margin: 0; font-weight: 500; }
.leftover-who input[type="checkbox"] { margin: 0; }

.edit-actions {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

/* ============================================================================
   WIZARD — shared shell (step1/2/3)
   ========================================================================== */
.wizard-container { max-width: 860px; margin: 0 auto; }
.wizard-container:has(.wiz-builder-layout) { max-width: 1180px; }
.wizard-header { margin-bottom: var(--space-6); }
.wizard-header h1 { margin-bottom: var(--space-1); }
.wizard-subtitle { color: var(--text-secondary); font-size: var(--text-base); margin: 0; }

/* Step indicator (core .step/.step-number exist; add connector + spacing) */
.wizard-steps { margin-bottom: var(--space-6); }
.step-connector {
    flex: 1; height: 2px; min-width: 1.5rem;
    background: var(--border-default);
    border-radius: var(--radius-full);
}
.step-connector-done { background: var(--accent-primary); }

.wizard-actions {
    display: flex; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

/* ---------------------------------------------------------------------------
   STEP 1 — scope
   --------------------------------------------------------------------------- */
.scope-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.scope-card {
    position: relative;
    display: block; cursor: pointer;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.scope-card:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-md); }
.scope-card input { position: absolute; opacity: 0; pointer-events: none; }
.scope-card:has(input:checked) {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 0.5px var(--accent-primary), 0 4px 12px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.scope-content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.scope-days { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.scope-icon { display: inline-flex; color: var(--accent-primary); margin-bottom: var(--space-1); }
.scope-icon svg { width: 26px; height: 26px; }
.scope-label { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.scope-desc { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.scope-badge {
    position: absolute; top: -10px; right: var(--space-3);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--accent-citrus); color: #22301F;
    padding: 0.35em 0.9em; border-radius: var(--radius-full);
}
.scope-card.featured { border-color: var(--border-emphasis); }

/* Snack toggle (step 1) */
.snack-option-section { margin: var(--space-5) 0; }
.wiz-snack-toggle {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    cursor: pointer;
    font-size: var(--text-sm); color: var(--text-secondary);
    transition: border-color var(--transition-fast);
}
.wiz-snack-toggle:hover { border-color: var(--accent-primary); }
.wiz-snack-toggle input { margin-top: 0.2em; flex-shrink: 0; }
.wiz-snack-toggle strong { color: var(--text-primary); }

.custom-dates { display: none; margin-bottom: var(--space-4); }
.custom-dates.show { display: block; }
.date-inputs { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.date-field { flex: 1; min-width: 160px; }
.date-field label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); }

.client-select-section { margin: var(--space-6) 0; }
.client-select-section h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }

/* ---------------------------------------------------------------------------
   STEP 2 — plan builder (Fresh Fuel)
   --------------------------------------------------------------------------- */

/* Top bar — white, rounded: client identity + kcal target + the citrus roll */
.wiz-topbar {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.wiz-topbar-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wiz-avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-primary); color: var(--text-inverse);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
}
.wiz-topbar-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wiz-topbar-name {
    font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.25; margin: 0;
}
.wiz-topbar-sub { font-size: var(--text-xs); color: var(--text-muted); }
.wiz-topbar-kcal { font-family: var(--font-mono); font-weight: 500; color: var(--accent-primary); font-variant-numeric: tabular-nums; }
.wiz-topbar-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wiz-topbar-chip {
    display: inline-flex; align-items: center;
    font-size: var(--text-xs); font-weight: 600; line-height: 1.3;
    padding: 0.35em 0.9em; border-radius: var(--radius-full);
    background: var(--bg-muted); color: var(--text-secondary);
}
.wiz-topbar-chip-allergy { background: var(--danger-muted); color: var(--danger); }
.wiz-topbar .btn-citrus { margin-left: auto; }

/* Two-column builder: day grid left, rail right (stacks on narrow screens) */
.wiz-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-5);
    align-items: start;
}
.wiz-builder-main { min-width: 0; }

/* Compact client strip (step 3) */
.wiz-client-bar {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.wiz-client-bar-name { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; }
.wiz-client-bar-name svg { width: 13px; height: 13px; }
.wiz-client-bar-target { font-family: var(--font-mono); font-weight: 500; color: var(--accent-primary); font-variant-numeric: tabular-nums; }
.wiz-client-bar-diet, .wiz-client-bar-allergy { color: var(--text-secondary); }
.wiz-client-bar-allergy { color: var(--danger); }

/* Day switcher — segmented pill */
.wiz-day-dots {
    display: inline-flex; gap: 4px; flex-wrap: wrap;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    padding: 4px;
    margin-bottom: var(--space-5);
}
.wiz-dot {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.45em 1em;
    border: none; border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer; color: var(--text-muted);
    font-family: var(--font-body);
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.wiz-dot:hover { color: var(--text-primary); }
.wiz-dot-label { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.wiz-dot-check { font-size: 0.65rem; color: var(--accent-primary); display: none; }
.wiz-dot.configured .wiz-dot-check { display: inline; }
.wiz-dot.active {
    background: var(--bg-surface); color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Day panel */
.wiz-day-panel { display: none; }
.wiz-day-panel.active { display: block; }
@keyframes wiz-slide-in-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wiz-slide-in-left  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wiz-day-panel.wiz-slide-right { animation: wiz-slide-in-right var(--transition-base); }
.wiz-day-panel.wiz-slide-left  { animation: wiz-slide-in-left var(--transition-base); }
@media (prefers-reduced-motion: reduce) {
    .wiz-day-panel.wiz-slide-right, .wiz-day-panel.wiz-slide-left { animation: none; }
}
.wiz-day-title {
    display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
    padding-bottom: var(--space-3); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
.wiz-day-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.wiz-day-date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wiz-client-day-counter {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums;
    padding: 0.4em 1em; border-radius: var(--radius-full);
    background: var(--bg-muted); color: var(--text-secondary);
}
.wiz-client-day-counter.under { color: var(--info); background: var(--info-muted); }
.wiz-client-day-counter.near { color: var(--success); background: var(--success-muted); }
.wiz-client-day-counter.over { color: var(--danger); background: var(--danger-muted); }

/* Slot — white rounded recipe card container */
.wiz-slot {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.wiz-slot-label {
    display: flex; align-items: center; gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: var(--space-3);
}

/* Action cards: skip / cook / leftover */
.wiz-action-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.wiz-action-card {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.wiz-action-card input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-ac-content {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--space-3) var(--space-2);
}
.wiz-ac-icon { font-size: var(--text-lg); line-height: 1; color: var(--text-faint); }
.wiz-ac-icon svg { width: 20px; height: 20px; }
.wiz-ac-label { font-size: var(--text-xs); font-weight: 600; }
.wiz-action-card:hover { border-color: var(--accent-primary); }
.wiz-ac-cook:has(input:checked)    { border-color: var(--accent-primary); background: var(--accent-primary-muted); }
.wiz-ac-cook:has(input:checked) .wiz-ac-icon,
.wiz-ac-cook:has(input:checked) .wiz-ac-label { color: var(--accent-primary); font-weight: 700; }
.wiz-ac-leftover:has(input:checked){ border-color: color-mix(in srgb, var(--warning) 55%, transparent); background: var(--warning-muted); }
.wiz-ac-leftover:has(input:checked) .wiz-ac-icon,
.wiz-ac-leftover:has(input:checked) .wiz-ac-label { color: var(--warning); font-weight: 700; }
.wiz-ac-skip:has(input:checked)    { border-color: var(--border-emphasis); background: var(--bg-muted); }
.wiz-ac-skip:has(input:checked) .wiz-ac-label { color: var(--text-primary); font-weight: 700; }

/* Cook / leftover panels */
.wiz-cook-panel, .wiz-leftover-panel { display: none; margin-top: var(--space-4); }
.wiz-cook-panel.show, .wiz-leftover-panel.show { display: block; }

/* Suggestion cards — white, rounded, mono kcal */
.wiz-suggestions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.wiz-suggestion {
    text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 5px;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-body);
    color: var(--text-primary);
}
.wiz-suggestion:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-md); }
.wiz-suggestion.selected {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 0.5px var(--accent-primary), 0 4px 12px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.wiz-suggestion.wiz-incompat { opacity: 0.62; }
.wiz-reason { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.wiz-sug-title { font-weight: 600; font-size: var(--text-sm); line-height: 1.25; }
.wiz-kcal-info { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wiz-sug-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.wiz-tag-pill {
    font-size: 0.6rem; font-weight: 600;
    padding: 0.25em 0.8em; border-radius: var(--radius-full);
    color: var(--text-muted); background: var(--bg-muted);
}
.wiz-incompat-badge {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.25em 0.8em; border-radius: var(--radius-full);
    background: var(--danger-muted); color: var(--danger);
    align-self: flex-start;
}
.wiz-sug-check {
    position: absolute; top: var(--space-2); right: var(--space-2);
    color: var(--accent-primary); font-weight: 800;
}
/* Zufall card reads like an empty slot: dashed field, greens on hover */
.wiz-sug-random {
    border: 1.5px dashed var(--border-emphasis);
    background: transparent; box-shadow: none;
    color: var(--text-muted);
    justify-content: center;
}
.wiz-sug-random:hover { border-color: var(--accent-primary); background: var(--accent-primary-muted); color: var(--accent-primary); box-shadow: none; }
.wiz-sug-random.selected {
    border: 1.5px dashed var(--accent-primary);
    background: var(--accent-primary-muted); color: var(--accent-primary);
    box-shadow: none;
}

.wiz-all-recipes { margin-bottom: var(--space-3); }
.wiz-all-recipes summary {
    cursor: pointer; font-size: var(--text-sm); font-weight: 600;
    color: var(--text-secondary); padding: var(--space-2) 0;
    list-style: none;
}
.wiz-all-recipes summary::-webkit-details-marker { display: none; }
.wiz-all-recipes summary::before { content: "+ "; color: var(--accent-primary); font-weight: 800; }
.wiz-all-recipes[open] summary::before { content: "\2013 "; }
.wiz-recipe-search { margin: var(--space-2) 0; }
.wiz-recipe-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2);
    max-height: 260px; overflow-y: auto;
    padding: 2px;
}
.wiz-recipe-item {
    text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-primary);
    font-family: var(--font-body); font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wiz-recipe-item:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
.wiz-recipe-item.selected { border-color: var(--accent-primary); box-shadow: inset 0 0 0 0.5px var(--accent-primary); }
.wiz-recipe-item.wiz-incompat { opacity: 0.62; }

/* Participants */
.wiz-participants { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); align-items: center; }
.wiz-pill {
    cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
    padding: 0.45em 0.95em;
    border: 1px solid var(--border-emphasis); border-radius: var(--radius-full);
    background: var(--bg-surface); color: var(--text-secondary);
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.wiz-pill:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.wiz-pill.active { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); }
.wiz-pill-guest { border-style: dashed; }
.wiz-guest-count { width: 4rem; }

.wiz-leftover-auto {
    display: inline-flex; align-items: center;
    font-size: var(--text-sm); color: var(--warning);
    font-weight: 600;
}
.wiz-source-cards { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.wiz-source-hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-1); }
.wiz-source-empty { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin: 0; }
.wiz-source-card {
    text-align: left; cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-primary);
    font-family: var(--font-body); font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}
.wiz-source-card:hover { border-color: var(--accent-primary); }
.wiz-source-card.selected { border-color: color-mix(in srgb, var(--warning) 60%, transparent); background: var(--warning-muted); }

/* Day nav */
.wiz-day-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin: var(--space-5) 0;
}
.wiz-day-counter { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Right rail — day macros (big mono number + 3 macro bars) + recipe DB */
.wiz-rail {
    display: flex; flex-direction: column; gap: var(--space-4);
    position: sticky; top: calc(var(--navbar-height) + var(--space-4));
    min-width: 0;
}
.wiz-rail-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.wiz-rail-label {
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-faint);
}
.wiz-rail-kcal { display: flex; align-items: baseline; gap: var(--space-2); }
.wiz-rail-kcal-value {
    font-family: var(--font-mono); font-size: 2.1rem; font-weight: 500;
    line-height: 1; letter-spacing: -0.02em;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.wiz-rail-kcal-target { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wiz-macro-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.wiz-macro-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); }
.wiz-macro-head span:first-child { font-weight: 600; color: var(--text-secondary); }
.wiz-macro-val { font-family: var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wiz-macro-bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.wiz-macro-fill { display: block; height: 100%; width: 0; border-radius: var(--radius-full); transition: width var(--transition-base); }
.wiz-macro-fill-protein { background: var(--macro-protein); }
.wiz-macro-fill-carbs   { background: var(--macro-carbs); }
.wiz-macro-fill-fat     { background: var(--macro-fat); }

.wiz-rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.wiz-rail-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-primary); font-variant-numeric: tabular-nums; }
.wiz-rail-search { background: var(--bg-base); }
.wiz-rail-results { display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.wiz-rail-item {
    display: flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    padding: var(--space-2);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.wiz-rail-item:hover { border-color: var(--accent-primary); background: var(--bg-base); }
.wiz-rail-item.wiz-incompat { opacity: 0.55; }
.wiz-rail-thumb { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--bg-muted); }
.wiz-rail-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wiz-rail-item-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-rail-item-kcal { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wiz-rail-empty { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin: 0; }

@media (max-width: 980px) {
    .wiz-builder-layout { grid-template-columns: minmax(0, 1fr); }
    .wiz-rail { position: static; }
}

/* ---------------------------------------------------------------------------
   STEP 3 — result
   --------------------------------------------------------------------------- */
.result-page { max-width: 940px; margin: 0 auto; }
.result-header {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.result-header h1 { margin: 0; }
.result-header p { margin: 0; color: var(--text-secondary); }
.success-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-primary-muted); color: var(--accent-primary);
    font-weight: 800; font-size: var(--text-lg);
}
.result-header > div { display: flex; flex-direction: column; gap: 2px; }

.gemini-box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.gemini-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gemini-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.gemini-btns { display: flex; gap: var(--space-2); }
.prompt-details { margin-top: var(--space-3); }
.prompt-details summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.prompt-details pre {
    margin-top: var(--space-2); padding: var(--space-3);
    background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: var(--text-xs);
}

.result-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.result-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }

/* Nutrition comparison — mono numerals, macro-coded columns */
.nutrition-table-wrap { overflow-x: auto; }
.nutrition-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.nutrition-table th {
    text-align: left; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    font-size: var(--text-xs); color: var(--text-faint);
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-emphasis);
    background: transparent; white-space: nowrap;
}
.nutrition-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-muted); }
.nutrition-table tfoot td { border-top: 1px solid var(--border-emphasis); border-bottom: none; background: var(--bg-muted); }
.nt-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: var(--radius-full); margin-right: 0.45em;
}
.nt-dot-protein { background: var(--macro-protein); }
.nt-dot-carbs   { background: var(--macro-carbs); }
.nt-dot-fat     { background: var(--macro-fat); }
.nt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nt-delta { font-family: var(--font-mono); font-size: var(--text-xs); margin-left: 0.3em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.nt-delta.delta-ok   { color: var(--success); }
.nt-delta.delta-warn { color: var(--warning); }
.nt-delta.delta-over { color: var(--danger); }

.plan-list { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-muted); }
.plan-row:last-child { border-bottom: none; }
.plan-day { font-family: var(--font-display); font-weight: 700; min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.plan-meals-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pm {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
    font-size: var(--text-xs); font-weight: 600;
    padding: 0.4em 0.9em; border-radius: var(--radius-md);
    background: var(--bg-muted); color: var(--text-secondary);
    border: 1px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pm.cook { background: var(--accent-primary-muted); color: var(--text-primary); }
.pm.leftover { background: var(--warning-muted); }
a.pm.cook:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.shop-list { display: flex; flex-direction: column; gap: var(--space-4); }
.shop-cat { border-bottom: 1px solid var(--border-muted); padding-bottom: var(--space-3); }
.shop-cat:last-child { border-bottom: none; }
.dish-headline {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    font-size: var(--text-base); margin-bottom: var(--space-1);
}
.portion-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums;
    padding: 0.25em 0.8em; border-radius: var(--radius-full);
    background: var(--bg-muted); color: var(--text-secondary);
    white-space: nowrap;
}
.portion-breakdown { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; }
.shop-item { display: flex; gap: var(--space-3); padding: 2px 0; font-size: var(--text-sm); }
.si-amt { font-family: var(--font-mono); min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.si-name { color: var(--text-primary); }

.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-btns { display: flex; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-muted); }

.result-actions {
    display: flex; gap: var(--space-2); flex-wrap: wrap;
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

/* ============================================================================
   CALENDAR  (templates/calendar.html)
   ========================================================================== */
.cal-page { max-width: 1000px; margin: 0 auto; }
.cal-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    padding-bottom: var(--space-4); margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-default);
}
.cal-nav { display: flex; align-items: center; gap: var(--space-3); }
.cal-nav h1 { margin: 0; font-size: var(--text-2xl); }
.nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--border-emphasis); border-radius: var(--radius-full);
    color: var(--text-primary); font-size: var(--text-lg);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.nav-btn:hover { border-color: var(--accent-primary); background: var(--accent-primary-muted); color: var(--accent-primary); }
.cal-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Segmented control uses the shared Fresh-Fuel pill (.view-toggle/.view-btn);
   only neutralise its right-push so it sits inline in the calendar action row. */
.cal-actions .view-toggle { margin-left: 0; }

/* Month grid — rounded day tiles on a white sheet */
.cal-grid {
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md); background: var(--bg-surface);
    padding: var(--space-3);
}
.cal-weekdays {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    background: transparent;
    margin-bottom: var(--space-2);
}
.cal-weekdays span {
    padding: var(--space-1) var(--space-2); text-align: center;
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.cal-day {
    min-width: 0;
    min-height: 96px;
    padding: var(--space-2);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    display: flex; flex-direction: column; gap: 4px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cal-day.empty { background: transparent; border-color: transparent; }
/* Today = green-soft active day */
.cal-day.today { background: var(--accent-primary-muted); border-color: var(--accent-primary); }
.cal-day.today .day-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem;
    background: var(--accent-primary); color: var(--text-inverse);
    border-radius: var(--radius-full); font-weight: 800;
}
.cal-day.drag-over { background: var(--success-muted); border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.day-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.day-meals { display: flex; flex-direction: column; gap: 3px; }

/* Meal chip inside a calendar cell */
.dm {
    display: flex; align-items: center; gap: 0.3em;
    min-width: 0;
    font-size: 0.68rem; line-height: 1.2;
    padding: 0.2em 0.35em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default); border-left-width: 3px;
    background: var(--bg-elevated); color: var(--text-secondary);
    cursor: grab; overflow: hidden;
}
.dm-text { min-width: 0; }
.dm.cook { border-left-color: var(--pine); color: var(--text-primary); }
.dm.leftover { border-left-color: var(--warning); }
.dm-drop-target {
    border-style: dashed; justify-content: center; cursor: default;
    color: var(--text-muted);
}
.dm-icon { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; flex-shrink: 0; }
.dm-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dm-kcal { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); flex-shrink: 0; }
.dm.drag-over { box-shadow: inset 0 0 0 2px var(--accent-primary); }

.cal-legend {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-4);
    font-size: var(--text-sm); color: var(--text-secondary);
}
.cal-legend > span { display: inline-flex; align-items: center; gap: 0.4em; }
.leg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leg-dot.cook { background: var(--pine); }
.leg-dot.leftover { background: var(--warning); }

/* Calendar table view badges — Fresh-Fuel pills */
.badge-breakfast, .badge-lunch, .badge-dinner {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.25em 0.7em; border-radius: var(--radius-full);
    border: 1px solid var(--border-emphasis); background: var(--bg-muted); color: var(--text-secondary);
}
.badge-cook { padding: 0.25em 0.7em; border-radius: var(--radius-full); background: var(--success-muted); color: var(--pine); border: 1px solid color-mix(in srgb, var(--pine) 30%, transparent); }
.badge-leftover { padding: 0.25em 0.7em; border-radius: var(--radius-full); background: var(--warning-muted); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
#calendar-table th.sortable { cursor: pointer; }
#calendar-table th.sortable.asc::after { content: " \2191"; }
#calendar-table th.sortable.desc::after { content: " \2193"; }
#calendar-table tr.today td { background: var(--accent-primary-muted); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .result-cols { grid-template-columns: 1fr; }
    .cal-day { min-height: 76px; }
    .dm-text { font-size: 0.62rem; }
    .pd-meal { grid-template-columns: 4.5rem 1fr; }
    .pd-kcal { grid-column: 2 / -1; text-align: left; }
    .wiz-action-cards { grid-template-columns: repeat(3, 1fr); }
    .plans-controls .sort-controls { margin-left: 0; }
}
@media (max-width: 520px) {
    .cal-day { min-height: 60px; padding: 3px; }
    .dm-text, .dm-kcal { display: none; }
    .dm { justify-content: center; }
    .scope-options { grid-template-columns: repeat(2, 1fr); }
}

/* ---- shopping ---- */
/* ============================================================================
   PLODDO — Kontor · Partial: SHOPPING LISTS
   Surface: Einkaufslisten index cards + list detail (categories, ledger rows).
   Owner-scoped partial. All colors via core tokens (static/style.css).
   No new tokens introduced — reuses --paper/--ink/--accent-primary/etc.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   INDEX — shopping-list cards (tidy stacked list receipts)
   -------------------------------------------------------------------------- */
.card-grid a.card.card-interactive {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.card-grid a.card.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}
.card-grid a.card.card-interactive h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.15;
    margin: 0;
    color: var(--text-primary);
}

/* Meta row: date range as eyebrow + progress count as status badge */
.card-grid .recipe-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.card-grid .recipe-meta .sl-daterange {
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Index progress line: label + slim bar sit together */
.card-grid .sl-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}
.card-grid .sl-progress .progress-bar {
    margin: 0;
    background: var(--accent-primary-muted);
    border-color: color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.card-grid .sl-progress .sl-progress-count {
    font-size: var(--text-xs);
    font-weight: 500;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   DETAIL — printed-list wrapper
   -------------------------------------------------------------------------- */
.shop-detail .page-header h1 {
    font-family: var(--font-display);
}

/* Header action buttons (PDF / Kopieren / Drucken) already use .btn;
   keep the mobile "…" trigger hidden on wide screens. */
.shop-detail .bottom-sheet-trigger { display: none; }

/* Progress: green fill on a green-soft track, tally in mono */
.shop-detail .progress-bar-wrap { margin: var(--space-4) 0 var(--space-5); }
.shop-detail .progress-bar {
    background: var(--accent-primary-muted);
    border-color: color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.shop-detail .progress-text {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Search field sits above the list, understated */
.shop-detail #shopping-search {
    margin-bottom: var(--space-5);
    max-width: 22rem;
}

/* The list itself: one white rounded sheet holding all departments */
.shop-detail .categories {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ---- Category section ---- */
.shop-detail .cat-section {
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-top: 1px solid var(--border-muted);
}
.shop-detail .cat-section:first-child { border-top: none; }

/* Department header = uppercase eyebrow label sitting on a hairline */
.shop-detail .cat-section > h3 {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

/* ---- Item rows: ledger lines ---- */
.shop-detail .items { display: block; }

.shop-detail label.item {
    display: grid;
    grid-template-columns: auto minmax(3.5rem, auto) 1fr;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid var(--border-muted);
    cursor: pointer;
    line-height: 1.35;
    transition: color var(--transition-fast);
}
.shop-detail .items label.item:last-child { border-bottom: none; }
.shop-detail label.item:hover { color: var(--text-primary); }
.shop-detail label.item:hover .name { color: var(--text-primary); }

/* Checkbox — small square tick, accent when checked */
.shop-detail label.item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    align-self: center;
    accent-color: var(--accent-primary);
    border-radius: var(--radius-sm);
    flex: none;
    cursor: pointer;
}

/* Amount column — mono weights, quietly emphasised */
.shop-detail label.item .amt {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

/* Ingredient name — the main text */
.shop-detail label.item .name {
    color: var(--text-primary);
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

/* Checked state: struck through + muted, whole row recedes */
.shop-detail label.item.done { color: var(--text-muted); }
.shop-detail label.item.done .amt { color: var(--text-muted); }
.shop-detail label.item.done .name {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--accent-primary);
    text-decoration-thickness: 1.5px;
}

/* ---- Footer actions ---- */
.shop-detail .bottom-actions {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
}

/* Mobile bottom-sheet action stack */
.bottom-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.bottom-sheet__actions .btn { width: 100%; }

/* Bottom sheet hidden by default; shown via JS classes (pwa.js). Core styles
   the element but ships no closed state, so scope the toggle here (this
   partial only loads on shopping pages). */
.bottom-sheet-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.bottom-sheet-overlay.bottom-sheet-overlay--visible {
    opacity: 1;
    visibility: visible;
}
.bottom-sheet {
    transform: translateY(100%);
    transition: transform var(--transition-base);
}
.bottom-sheet.bottom-sheet--open {
    transform: translateY(0);
}

/* ----------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .shop-detail .header-actions { display: none; }
    .shop-detail .bottom-sheet-trigger {
        display: inline-flex;
        margin-left: auto;
    }
    .shop-detail .cat-section { padding-left: var(--space-4); padding-right: var(--space-4); }
    .shop-detail label.item {
        grid-template-columns: auto minmax(3rem, auto) 1fr;
        gap: var(--space-2);
    }
}

/* ----------------------------------------------------------------------------
   PRINT — the actual printed shopping list (clean, ink-on-paper)
   -------------------------------------------------------------------------- */
@media print {
    .shop-detail .breadcrumb,
    .shop-detail .header-actions,
    .shop-detail .bottom-sheet-trigger,
    .shop-detail #shopping-search,
    .shop-detail .bottom-actions,
    .bottom-sheet,
    .bottom-sheet-overlay { display: none !important; }

    .shop-detail .categories { border: none; }
    .shop-detail .cat-section { break-inside: avoid; }
    .shop-detail label.item { cursor: default; }
}

/* ---- clients ---- */
/* ============================================================================
   PLODDO — „Fresh Fuel" · Surface partial: CLIENTS CRM + ONBOARDING
   Owner: clients/onboarding surface.  Loads after static/style.css.
   Reuses core tokens + components (btn, card, stat-card, page-header, table,
   status-badge, chip, empty-state, steps, form-input). No hardcoded colors —
   every value is a var() from the core system. No new tokens required.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Header count — a soft green pill tally beside the page title
   ---------------------------------------------------------------------------- */
.count-badge {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    vertical-align: 0.35em;
    margin-left: var(--space-2);
    padding: 0.3em 0.8em;
    color: var(--accent-primary);
    background: var(--accent-primary-muted);
    border-radius: var(--radius-full);
}

/* ----------------------------------------------------------------------------
   Invite link result — green-soft note with a copyable row
   ---------------------------------------------------------------------------- */
.invite-result {
    background: var(--accent-primary-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.invite-result > p { margin-bottom: var(--space-2); }
.invite-url-box {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.invite-url-box code {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5em 0.7em;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* ----------------------------------------------------------------------------
   Inline assignment forms (create profile / assign trainer)
   ---------------------------------------------------------------------------- */
.client-create-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.client-create-form label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    flex-basis: 100%;
}
.client-create-form select { flex: 1 1 240px; }
.client-create-form .btn { flex: 0 0 auto; }

/* ----------------------------------------------------------------------------
   Modal dialog (native <dialog>) — rounded pop card, warm soft shadow
   ---------------------------------------------------------------------------- */
.modal-dialog {
    width: min(440px, 92vw);
    padding: 0;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.modal-dialog::backdrop { background: rgba(34, 48, 31, 0.45); backdrop-filter: blur(2px); }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-default);
}
.modal-title { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 0 0.25em;
    border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--accent-primary); }
.modal-body { padding: var(--space-5); }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-default);
}

/* ----------------------------------------------------------------------------
   Empty-state hint (secondary line under the core .empty-state-text)
   ---------------------------------------------------------------------------- */
.empty-state-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

/* ----------------------------------------------------------------------------
   Client detail — profile cards grid + ledger definition lists
   ---------------------------------------------------------------------------- */
.client-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    align-items: start;
}
.client-info-grid .card { margin-bottom: 0; height: 100%; }

.client-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0;
    margin: 0;
}
.client-dl dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-faint);
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--border-muted);
    white-space: nowrap;
}
.client-dl dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-muted);
}
.client-dl dt:last-of-type,
.client-dl dd:last-of-type { border-bottom: none; }
/* chip lists inside a dd sit right-aligned and wrap cleanly */
.client-dl dd .chip-list { justify-content: flex-end; }

/* Chip list container (goals / restrictions / allergies as badges) */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

/* Tagesziele — compact ledger stat tiles inside the profile card */
.client-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
.client-stat {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-muted);
}
.client-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.client-stat-label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   Meal-plan list rows
   ---------------------------------------------------------------------------- */
.client-plans-list .card {
    margin-bottom: var(--space-3);
    padding: var(--space-4) var(--space-5);
}
.client-plans-list .card:last-child { margin-bottom: 0; }
.cycle-name-link { color: var(--text-primary); }
.cycle-name-link:hover { color: var(--accent-primary); }
.cycle-name-link strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.plan-row .plan-dates {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
   Measurement add form — aligned field row
   ---------------------------------------------------------------------------- */
.measurement-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.measurement-form-row .form-group { margin-bottom: 0; }

/* Weight-trend summary above the ledger */
.measurement-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.measurement-summary__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--text-muted);
}
.measurement-summary__delta {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.measurement-summary__delta--down { color: var(--success); }
.measurement-summary__delta--up { color: var(--accent-primary); }

.table-actions { text-align: right; white-space: nowrap; }
.table-actions form { display: inline; }

/* ----------------------------------------------------------------------------
   Trainer notes — soft white cards, mono dates (Screen 4: Notizen)
   ---------------------------------------------------------------------------- */
.note-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-3);
}
.note-card:last-child { margin-bottom: 0; }
.note-card__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.note-card__author { font-weight: 700; color: var(--text-secondary); }
.note-card__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.note-card__body { margin: 0; color: var(--text-primary); }
.note-list { margin-top: var(--space-4); }

/* ----------------------------------------------------------------------------
   Client edit — two-column form grid
   ---------------------------------------------------------------------------- */
.client-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.client-form-grid .form-group { margin-bottom: 0; }

/* ============================================================================
   ONBOARDING WIZARD
   ============================================================================ */
.wizard-container {
    max-width: 680px;
    margin: 0 auto;
}
.wizard-header { margin-bottom: var(--space-6); }
.wizard-header h1 { margin: 0 0 var(--space-2); }
.wizard-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin: 0;
    max-width: 52ch;
}

/* Editorial eyebrow above the wizard title (added in templates) */
.wizard-eyebrow {
    display: block;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--accent-primary);
    margin-bottom: var(--space-2);
}

/* Stepper — horizontal ledger of the four onboarding steps.
   Reuses core .step / .step-number / .step-label; adds the connectors and
   makes the row scroll rather than wrap on narrow screens. */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1.5px solid var(--ink);
    overflow-x: auto;
}
.wizard-steps .step {
    gap: var(--space-2);
    flex: 0 0 auto;
    white-space: nowrap;
}
.wizard-steps .step-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
}
.wizard-steps .step.active .step-label { color: var(--text-primary); }
.wizard-steps .step.done .step-label { color: var(--text-secondary); }
.step-connector {
    flex: 1 1 20px;
    min-width: 16px;
    height: 1.5px;
    background: var(--border-emphasis);
    margin: 0 var(--space-2);
}
.step-connector-done { background: var(--ink); }

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}
.wizard-actions .btn { flex: 0 0 auto; }
/* When there is only a single forward action, push it to the right */
.wizard-actions--single { justify-content: flex-end; }

/* Goal selection — editorial selectable cards (no gradients, hard offset on select) */
.scope-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}
.scope-card {
    position: relative;
    display: block;
    cursor: pointer;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.scope-card:hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); }
.scope-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.scope-card-body { display: flex; flex-direction: column; gap: var(--space-1); }
.scope-card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.scope-card-desc { font-size: var(--text-sm); color: var(--text-secondary); }
.scope-card:has(input:checked) {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-offset-accent);
    transform: translate(-2px, -2px);
}
.scope-card:has(input:checked)::after {
    content: "";
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--accent-primary);
}

/* Step 3 — computed macro preview as a ledger tile row */
.onboarding-macro-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    background: var(--bg-surface);
}
.onboarding-macro-item {
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid var(--border-default);
}
.onboarding-macro-item:last-child { border-right: none; }
.onboarding-macro-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.onboarding-macro-item:first-child .onboarding-macro-value { color: var(--accent-primary); }
.onboarding-macro-label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
}

/* Step 3 — dietary checkbox chips */
.onboarding-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.onboarding-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    padding: 0.5em 0.85em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.onboarding-checkbox:hover { border-color: var(--border-emphasis); color: var(--text-primary); }
.onboarding-checkbox:has(input:checked) {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--text-inverse);
}
.onboarding-checkbox input { margin: 0; }

/* Completion panel */
.wizard-done {
    text-align: center;
    padding: var(--space-7) var(--space-5);
}
.wizard-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-4);
    color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
    border-radius: var(--radius-full);
}
.wizard-done__mark svg { width: 32px; height: 32px; }
.wizard-done p { color: var(--text-secondary); max-width: 46ch; margin: 0 auto var(--space-5); }

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .client-stats-grid { grid-template-columns: 1fr 1fr; }
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; }
    .wizard-actions { flex-direction: column-reverse; align-items: stretch; }
    .wizard-actions .btn { width: 100%; }
}

/* ---- dashboard ---- */
/* ============================================================================
   PLODDO — Kontor · Partial: DASHBOARDS · ACCOUNT · NOTIFICATIONS
   Owner: dashboard.css
   Surfaces: dashboard_trainer.html, index.html (client dash),
             account/*.html, notifications/*.html
   Rules: every color is a core token from style.css. Accent ALWAYS via
          var(--accent-primary) (white-label hook). No new tokens needed.
   ============================================================================ */

/* ============================================================================
   SHARED — greeting + section header
   ========================================================================== */
.dashboard { max-width: 100%; }

.greeting {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
}
.greeting:empty { display: none; }
.greeting-sub { font-size: var(--text-base); color: var(--text-secondary); }

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1.5px solid var(--border-default);
}
.section-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
}
.section-header .modal-close,
.dashboard .modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 0 var(--space-1);
    color: var(--text-muted); align-self: center;
    transition: color var(--transition-fast);
}
.section-header .modal-close:hover { color: var(--text-primary); }

.see-more {
    display: inline-flex; align-items: center; gap: 0.3em;
    font-size: var(--text-sm); font-weight: 650;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent-primary);
    white-space: nowrap;
}
.see-more:hover { color: var(--accent-primary-hover); }

/* ============================================================================
   TRAINER DASHBOARD — quick actions (proper button row)
   ========================================================================== */
.quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
/* Legacy .qnav-btn kept renderable, but retyped as an editorial button.
   Templates now use real .btn classes; this is a safety net for any stragglers. */
.qnav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
    line-height: 1; padding: 0.72em 1.25em;
    border: 1.5px solid var(--border-emphasis); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
    text-decoration: none; white-space: nowrap;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.qnav-btn:hover { border-color: var(--ink); background: var(--bg-muted); }
.qnav-btn.primary {
    background: var(--accent-primary); color: #fff; border-color: var(--accent-primary);
}
.qnav-btn.primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }

/* ============================================================================
   ERSTE SCHRITTE — first-steps ledger checklist
   ========================================================================== */
.first-steps {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
    counter-reset: fstep;
}
.first-step {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-muted);
    counter-increment: fstep;
}
.first-step:last-child { border-bottom: none; }
.first-step__marker {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.first-step__marker::before { content: counter(fstep); }
.first-step--done .first-step__marker::before { content: none; }
.first-step--done .first-step__marker {
    background: var(--pine); border-color: var(--pine); color: #fff;
}
.first-step--done .first-step__marker svg { width: 16px; height: 16px; }
.first-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.first-step__title { font-weight: 650; color: var(--text-primary); }
.first-step--done .first-step__title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-emphasis); }
.first-step__hint { font-size: var(--text-sm); color: var(--text-muted); }
.first-step__action { flex-shrink: 0; }

/* ============================================================================
   TRAINER — client + plan ledger rows
   ========================================================================== */
.trainer-client-list, .trainer-plans-list {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}
.trainer-client-card, .trainer-plan-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-muted);
    transition: background var(--transition-fast);
}
.trainer-client-card:last-child, .trainer-plan-card:last-child { border-bottom: none; }
.trainer-client-card:hover, .trainer-plan-card:hover { background: var(--bg-muted); }
.trainer-client-card.attention {
    border-left: 3px solid var(--accent-primary);
    padding-left: calc(var(--space-5) - 3px);
}
.trainer-client-info, .trainer-plan-info {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.trainer-client-name, .trainer-plan-name {
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
    color: var(--text-primary); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.trainer-client-name:hover { color: var(--accent-primary); }
.trainer-client-info .text-muted, .trainer-plan-info .text-muted { font-size: var(--text-sm); }
.trainer-client-meta, .trainer-plan-meta {
    display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
}
.tag-badge {
    display: inline-flex; align-items: center;
    font-size: var(--text-xs); font-weight: 650;
    padding: 0.3em 0.6em; border-radius: var(--radius-sm);
    border: 1px solid var(--border-emphasis);
    background: var(--bg-muted); color: var(--text-secondary);
}

@media (max-width: 600px) {
    .trainer-client-card, .trainer-plan-card { flex-direction: column; align-items: flex-start; }
    .trainer-client-meta, .trainer-plan-meta { width: 100%; justify-content: flex-start; }
}

/* ============================================================================
   CLIENT DASHBOARD — date nav
   ========================================================================== */
.dash-header { margin-bottom: var(--space-5); }
.date-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
.date-info { text-align: center; min-width: 0; }
.date-info h1 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-2xl); }
.date-nav .nav-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    border: 1.5px solid var(--border-emphasis); border-radius: var(--radius-full);
    background: var(--bg-surface); color: var(--text-primary);
    font-size: 1.15rem; text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.date-nav .nav-arrow:hover { background: var(--accent-primary-muted); border-color: var(--accent-primary); color: var(--accent-primary); }
.today-link {
    display: inline-block; margin-top: var(--space-1);
    font-size: var(--text-sm); font-weight: 600;
    padding: 0.2em 0.9em; border-radius: var(--radius-full);
    background: var(--accent-primary-muted); color: var(--accent-primary);
    transition: color var(--transition-fast);
}
.today-link:hover { color: var(--accent-primary-hover); }

/* ============================================================================
   NUTRITION SUMMARY CARD
   ========================================================================== */
.nutrition-summary { margin-bottom: var(--space-5); }
.nutrition-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.nutrition-card-title {
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: 650;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-primary);
    margin-bottom: var(--space-4);
}
.nutrition-card-values {
    display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.nutrition-stat { display: flex; flex-direction: column; gap: 2px; }
.nutrition-value {
    font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500;
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.nutrition-label {
    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted);
}
.nutrition-yesterday {
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--border-muted);
    font-size: var(--text-sm); color: var(--text-muted);
}
.nutrition-delta { font-weight: 700; margin-left: 0.35em; font-variant-numeric: tabular-nums; }
.nutrition-delta.up { color: var(--warning); }
.nutrition-delta.down { color: var(--success); }

/* ============================================================================
   CLIENT DASHBOARD — meal grid
   ========================================================================== */
.today-meals-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4); margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .today-meals-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .today-meals-grid { grid-template-columns: 1fr; } }

.meal-column { display: flex; flex-direction: column; gap: var(--space-3); }
.meal-column-header {
    display: flex; align-items: center; gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
    font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.meal-column-icon { display: inline-flex; color: var(--accent-primary); }
.meal-column-icon svg { width: 18px; height: 18px; }
.meal-column-title { line-height: 1; }

.meal-card-new {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.meal-card-new:hover { box-shadow: var(--shadow-md); border-color: var(--accent-primary); }

.meal-card-badge { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.badge-cook, .badge-leftover {
    display: inline-flex; align-items: center;
    font-size: var(--text-xs); font-weight: 700;
    padding: 0.3em 0.8em; border-radius: var(--radius-full);
    text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent;
}
.badge-cook { background: var(--accent-primary-muted); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent); }
.badge-leftover { background: var(--success-muted); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge-portions { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.meal-card-title {
    font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
    line-height: 1.2; color: var(--text-primary); text-decoration: none;
}
a.meal-card-title:hover { color: var(--accent-primary); }
.meal-card-who { font-size: var(--text-sm); color: var(--text-secondary); }
.meal-card-kcal {
    padding-top: var(--space-2); border-top: 1px solid var(--border-muted);
    font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.meal-card-macros { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.meal-card-macros span { font-variant-numeric: tabular-nums; }
.meal-card-extra {
    font-size: var(--text-sm); color: var(--text-secondary);
    background: var(--bg-muted); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}
.meal-card-extra strong { color: var(--text-primary); }

.meal-card-ingredients { margin-top: var(--space-1); }
.meal-card-ingredients summary {
    cursor: pointer; font-size: var(--text-sm); font-weight: 600;
    color: var(--text-secondary); padding: var(--space-1) 0;
    list-style-position: inside;
}
.meal-card-ingredients summary:hover { color: var(--accent-primary); }
.meal-card-ingredients ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-sm); }
.meal-card-ingredients li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-muted); color: var(--text-secondary); }
.meal-card-ingredients li:last-child { border-bottom: none; }
.meal-card-ingredients li.more { color: var(--text-muted); font-style: italic; }

.meal-card-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-6) var(--space-4);
    border: 1.5px dashed var(--border-emphasis); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-muted);
}
.empty-dash { font-family: var(--font-display); font-size: 1.5rem; color: var(--border-emphasis); }
.empty-text { font-size: var(--text-sm); }

/* No-meals full-width state (reuses core .empty-state look) */
.no-meals {
    text-align: center; padding: var(--space-8) var(--space-5);
    border: 1.5px dashed var(--border-emphasis); border-radius: var(--radius-lg);
    background: var(--bg-surface); margin-bottom: var(--space-6);
}
.no-meals-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.no-meals-icon { color: var(--border-emphasis); display: inline-flex; }
.no-meals-icon svg { width: 44px; height: 44px; }
.no-meals p { color: var(--text-secondary); margin: 0; }

/* ============================================================================
   CLIENT DASHBOARD — upcoming ledger
   ========================================================================== */
.upcoming { margin-bottom: var(--space-6); }
.upcoming h2 {
    font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em;
    margin-bottom: var(--space-4); padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
}
.upcoming-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    background: var(--bg-surface); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.up-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-muted);
    position: relative; transition: background var(--transition-fast);
}
.up-item:last-child { border-bottom: none; }
.up-item:hover { background: var(--bg-base); }
.up-item-link {
    display: flex; align-items: center; gap: var(--space-3);
    flex: 1; min-width: 0; text-decoration: none; color: var(--text-primary);
}
.up-day { min-width: 52px; font-size: var(--text-sm); font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.up-icon { display: inline-flex; color: var(--accent-primary); }
.up-icon svg { width: 15px; height: 15px; }
.up-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.up-push-btn {
    flex-shrink: 0; margin-left: auto;
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full); color: var(--text-secondary);
    font-size: var(--text-base); font-weight: 700; cursor: pointer; line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.up-push-btn:hover { background: var(--accent-primary-muted); border-color: var(--accent-primary); color: var(--accent-primary); }
.upcoming .see-more { margin-top: var(--space-3); }

/* ============================================================================
   MORNING CHECK-IN — bottom sheet
   ========================================================================== */
.checkin-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(34, 48, 31, 0.5); backdrop-filter: blur(2px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: checkinFade 0.25s ease;
}
/* hidden-Attribut muss gewinnen — sonst poppt das Modal beim Laden auf */
.checkin-overlay[hidden] { display: none; }
.checkin-overlay.closing { animation: checkinFade 0.25s ease reverse forwards; }
@keyframes checkinFade { from { opacity: 0; } to { opacity: 1; } }
.checkin-modal {
    width: 100%; max-width: 500px; max-height: 82vh; overflow-y: auto;
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    animation: checkinSlide 0.28s ease;
}
.checkin-overlay.closing .checkin-modal { animation: checkinSlide 0.28s ease reverse forwards; }
@keyframes checkinSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.checkin-header { padding: var(--space-5) var(--space-5) var(--space-2); }
.checkin-header h2 { margin: 0; font-size: var(--text-xl); }
.checkin-subtitle { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.checkin-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.checkin-meal { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.checkin-meal-info { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.checkin-meal-type { display: inline-flex; color: var(--accent-primary); }
.checkin-meal-type svg { width: 18px; height: 18px; }
.checkin-meal-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.checkin-meal-feedback { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.checkin-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.checkin-toggle { display: flex; gap: var(--space-1); }
.checkin-toggle .toggle-btn {
    padding: 0.4em 1em; border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-full); background: transparent;
    color: var(--text-primary); cursor: pointer; font-family: var(--font-body);
    font-size: var(--text-sm); font-weight: 600;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.checkin-toggle .toggle-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }
.checkin-stars { display: flex; gap: 0.15rem; }
.checkin-stars .star-btn {
    background: transparent; border: none; padding: 0; line-height: 1; cursor: pointer;
    font-size: 1.3rem; color: var(--border-emphasis); transition: color var(--transition-fast);
}
.checkin-stars .star-btn.active { color: var(--accent-primary); }
.checkin-footer { padding: var(--space-2) var(--space-5) var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (min-width: 600px) {
    .checkin-overlay { align-items: center; }
    .checkin-modal { border-radius: var(--radius-xl); }
}

/* ============================================================================
   NOTIFICATIONS
   ========================================================================== */
.notification-page__header {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-4);
    padding-bottom: var(--space-4); margin-bottom: var(--space-6);
    border-bottom: 1.5px solid var(--ink);
}
.notification-page__header > div:first-child { display: flex; align-items: center; gap: var(--space-3); }
.notification-page__header h1 { margin: 0; }
.notification-page__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.notification-page__actions form { margin: 0; }

.notification-list {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
    background: var(--bg-surface); overflow: hidden;
}
.notification-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-muted);
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--bg-muted); }
.notification-item--unread { background: var(--accent-primary-muted); border-left-color: var(--accent-primary); }
.notification-item--unread:hover { background: var(--accent-primary-muted); }
.notification-item__content { display: flex; gap: var(--space-3); flex: 1; min-width: 0; }
.notification-dot {
    flex-shrink: 0; margin-top: 0.4em;
    width: 8px; height: 8px; border-radius: 2px; background: var(--text-muted);
}
.notification-dot--success { background: var(--success); }
.notification-dot--warning { background: var(--warning); }
.notification-dot--danger, .notification-dot--error { background: var(--danger); }
.notification-dot--info { background: var(--info); }
.notification-item__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin-bottom: 2px; }
.notification-item__message { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 2px; }
.notification-item__meta { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.notification-item__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.notification-item__actions form { margin: 0; }

.pagination {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    margin-top: var(--space-5);
}
.pagination__info { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.empty-state-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ============================================================================
   ACCOUNT — profile / export / delete
   ========================================================================== */
.client-form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
/* Left-accent info/status cards (used on export + delete + profile danger zone) */
.card--info { border-left: 4px solid var(--info); }
.card--success { border-left: 4px solid var(--success); }
.card--warning { border-left: 4px solid var(--warning); }
.card--danger { border-left: 4px solid var(--danger); }
.card--info h3, .card--success h3, .card--warning h3, .card--danger h3 {
    font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2);
}
.card ul { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.card ul li { margin-bottom: var(--space-1); }

/* ---- admin ---- */
/* ============================================================================
   PLODDO — „Fresh Fuel"  ·  Partial: Tenant Admin + Billing
   Owner surface: templates/admin/*.html, templates/billing/*.html
   Every colour is a core token from static/style.css. No hardcoded hex except
   neutral rgba tints. Accent is ALWAYS var(--accent-primary) (white-label hook).

   New tokens added: NONE — the core palette covers this surface.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Editorial admin header — same signature as .page-header (eyebrow + Fraunces
   headline + hairline). Templates use <div class="admin-header"> with a title
   cluster on the left and optional actions on the right.
   ---------------------------------------------------------------------------- */
.admin-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1.5px solid var(--ink);
}
.admin-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.admin-header h1 { margin: 0; }
.admin-header .header-sub,
.admin-header > p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.admin-header .page-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}
.admin-header .page-icon svg { width: 100%; height: 100%; }

/* Dashboard header stacks headline + tenant line on the left */
.admin-header .header-left { min-width: 0; }

/* ----------------------------------------------------------------------------
   Dashboard — stat tiles (core) + nav-card grid
   ---------------------------------------------------------------------------- */
.admin-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}
/* Editorial nav card: accent tick top-left, arrow that slides on hover */
.admin-nav-card {
    position: relative;
    justify-content: flex-start;
    padding-top: calc(var(--space-5) + 4px);
    text-decoration: none;
}
.admin-nav-card::before {
    content: "";
    position: absolute;
    top: 0; left: var(--space-5);
    width: 30px; height: 4px;
    background: var(--accent-primary);
    border-radius: 0 0 2px 2px;
}
.admin-nav-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-primary);
}
.admin-nav-card h3::after {
    content: "\2192"; /* → */
    color: var(--accent-primary);
    font-weight: 400;
    transition: transform var(--transition-fast);
}
.admin-nav-card:hover h3::after { transform: translateX(4px); }
.admin-nav-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* ----------------------------------------------------------------------------
   Missing badge / button / card variants used by these templates
   (mapped onto the core editorial look — NOT the old pastel SaaS ones)
   ---------------------------------------------------------------------------- */
.status-badge--primary,
.badge-primary {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--text-xs); font-weight: 700; padding: 0.35em 0.7em;
    border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--accent-primary-muted);
    color: var(--accent-ink);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, transparent);
}
.status-badge--info {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--text-xs); font-weight: 700; padding: 0.35em 0.7em;
    border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--info-muted); color: var(--info);
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
/* invoices.html legacy badge aliases */
.badge-secondary {
    background: var(--bg-muted); color: var(--text-muted);
    border-color: var(--border-default);
}

/* btn-success (branding preview) — pine, matches the support colour */
.btn-success {
    background: var(--pine); color: #fff; border-color: var(--pine);
}
.btn-success:hover {
    background: color-mix(in srgb, var(--pine) 85%, var(--ink));
    border-color: color-mix(in srgb, var(--pine) 85%, var(--ink));
    color: #fff;
}
/* btn-xs — one notch below btn-sm, for tag rows */
.btn-xs {
    padding: 0.32em 0.55em;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-sm);
}

/* Accent / info / success framed cards (token-created, DNS panel) */
.card--success { border-color: var(--pine); border-left-width: 4px; }
.card--info    { border-color: var(--info);  border-left-width: 4px; background: var(--bg-muted); }

/* ----------------------------------------------------------------------------
   Filter bar (analytics, audit-log, billing, invoices)
   ---------------------------------------------------------------------------- */
.filter-bar {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar select,
.filter-bar input { min-width: 160px; }

/* ----------------------------------------------------------------------------
   Branding — the white-label money-shot
   ---------------------------------------------------------------------------- */
.branding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-5);
    align-items: start;
}
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
/* Premium swatch: framed well, big colour chip, hex read-out underneath */
.color-field label { margin-bottom: var(--space-2); }
.color-well {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.color-well input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 46px; height: 46px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.color-well input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-well input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-well input[type="color"]::-moz-color-swatch { border: none; border-radius: 2px; }
.color-well .color-hex {
    font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Live preview panel — a miniature product surface using the picked accent */
.brand-preview-panel {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-4));
    padding: 0;
    overflow: hidden;
}
.brand-preview-panel .preview-eyebrow {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1.5px solid var(--border-default);
    background: var(--bg-muted);
}
.brand-preview-stage { padding: var(--space-5); }
.brand-preview-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-2);
}
.brand-preview-logo img { height: 30px; width: auto; }
.brand-preview-logo .brand-dot {
    width: 12px; height: 12px; border-radius: 3px;
    background: var(--accent-primary);
    display: inline-block;
}
.brand-preview.action-group { gap: var(--space-2); }
.brand-swatch-row {
    display: flex; gap: var(--space-2); margin-top: var(--space-4);
    flex-wrap: wrap;
}
.brand-swatch {
    display: flex; flex-direction: column; gap: 4px; align-items: center;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
}
.brand-swatch i {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--ink);
}

/* ----------------------------------------------------------------------------
   API tokens — mono token in a bordered code block
   ---------------------------------------------------------------------------- */
.token-created-card { background: var(--bg-surface); }
.invite-url-box {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.invite-url-box code {
    flex: 1;
    min-width: 220px;
    font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: var(--text-sm);
    word-break: break-all;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-muted);
    color: var(--text-primary);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-offset);
    line-height: 1.5;
}
.invite-url-box .btn { align-self: flex-start; }
.empty-state-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ----------------------------------------------------------------------------
   Usage / Settings — ledger meter rows
   ---------------------------------------------------------------------------- */
.settings-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
.usage-section {
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}
.usage-item {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-muted);
}
.usage-item:last-child { border-bottom: none; }
.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.usage-label {
    font-weight: 650;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.usage-count {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
/* Ledger progress rail */
.progress-bar-large {
    height: 8px;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar-large .progress-fill {
    height: 100%;
    background: var(--accent-primary);
    transition: width var(--transition-base);
}
.progress-bar-large .progress-fill.progress-warning { background: var(--warning); }
.progress-bar-large .progress-fill.progress-danger  { background: var(--danger); }

/* Mini history bar chart */
.usage-history { margin-top: var(--space-3); }
.usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 68px;
}
.usage-chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}
.usage-chart-bar {
    width: 100%;
    max-width: 26px;
    min-height: 3px;
    background: var(--accent-primary-muted);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    transition: height var(--transition-base);
}
.usage-chart-bar-wrapper:hover .usage-chart-bar { background: var(--accent-primary); }
.usage-chart-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Feature ledger table (settings) */
.features-table-wrapper {
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface);
}
.features-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.features-table th {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1.5px solid var(--ink);
    background: var(--bg-muted);
}
.features-table td {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-muted);
    color: var(--text-primary);
}
.features-table tr:last-child td { border-bottom: none; }
.features-table td:last-child {
    display: flex; align-items: center; gap: var(--space-2);
}
.feature-check { color: var(--pine); font-weight: 800; }
.feature-x { color: var(--text-muted); font-weight: 800; }

/* ----------------------------------------------------------------------------
   Billing — Ploddo One
   ---------------------------------------------------------------------------- */
.billing-formula {
    font-size: var(--text-base);
    color: var(--text-secondary);
}
.billing-formula strong { color: var(--text-primary); }
.price-cap-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--accent-primary);
    background: var(--accent-primary-muted);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    color: var(--accent-ink);
    font-weight: 600;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.form-grid .form-group { margin-bottom: 0; }
.form-group--full { grid-column: 1 / -1; }
.payment-method-group {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.radio-label:has(input:checked) {
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}
.sepa-fields {
    display: none;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}
.sepa-fields.visible { display: block; }

/* ----------------------------------------------------------------------------
   Analytics — chart cards
   ---------------------------------------------------------------------------- */
.analytics-section { margin-bottom: var(--space-8); }
.analytics-charts-row,
.analytics-tables-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.analytics-charts-row > .analytics-chart-card { flex: 1; min-width: 0; }
.analytics-charts-row > .analytics-chart-card--wide { flex: 2; }
.analytics-tables-row > .analytics-chart-card { flex: 1; min-width: 280px; }
.analytics-chart-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.analytics-chart-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-muted);
}
.analytics-chart-card canvas { max-height: 300px; }
.analytics-chart-card .data-table { margin-top: calc(-1 * var(--space-2)); }

/* ----------------------------------------------------------------------------
   Integrations — connection cards
   ---------------------------------------------------------------------------- */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.integration-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}
.integration-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-muted);
}
.integration-card__header > div {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.integration-card__icon { font-size: 1.4rem; line-height: 1; }
.integration-card__meta { display: flex; flex-direction: column; gap: 2px; }
.integration-card__meta small { color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   Domain — DNS instruction ledger
   ---------------------------------------------------------------------------- */
.dns-instruction-box {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
}
.dns-instruction-box h4 {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    margin-bottom: var(--space-3);
}
.table-compact { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-compact td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: top;
}
.table-compact tr:last-child td { border-bottom: none; }
.table-compact code {
    font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    word-break: break-all;
}

/* ----------------------------------------------------------------------------
   Personas — ledger table + editorial explainer
   ---------------------------------------------------------------------------- */
.persona-explainer {
    background: var(--bg-muted);
    border: 1.5px solid var(--border-default);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}
.persona-explainer p { margin: var(--space-1) 0; }
.persona-explainer p:first-child { color: var(--text-primary); }

.table-responsive:has(.persona-table) { margin-bottom: var(--space-6); }
.persona-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    min-width: 720px;
}
.persona-table th {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: var(--space-3);
    border-bottom: 1.5px solid var(--ink);
    white-space: nowrap;
}
.persona-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: middle;
}
.persona-row.persona-inactive { opacity: 0.5; }
.persona-input,
.persona-dietary {
    width: 100%;
    padding: 0.45em 0.6em;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.persona-key-input {
    font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
    max-width: 130px;
}
.persona-num-input { max-width: 84px; font-variant-numeric: tabular-nums; }
.persona-dietary { min-width: 200px; resize: vertical; min-height: 0; }
.persona-check-cell { text-align: center; }
.persona-actions { white-space: nowrap; display: flex; gap: var(--space-1); }

.persona-add-section {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.persona-add-section h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-4);
}
.persona-add-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.persona-add-row .form-group { flex: 1; min-width: 130px; margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Tags — editorial group cards + small-radius chips (NO 999px pills)
   ---------------------------------------------------------------------------- */
.tag-admin-group {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.tag-admin-group.tag-admin-inactive { opacity: 0.5; }
.tag-admin-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-muted);
    border-bottom: 1.5px solid var(--ink);
}
.tag-admin-group-fields {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.tag-admin-group-actions { display: flex; gap: var(--space-1); }
.tag-admin-input,
.tag-admin-select {
    padding: 0.4em 0.6em;
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.tag-admin-group-name { min-width: 150px; }
.tag-admin-tag-name { min-width: 100px; max-width: 160px; }
.tag-admin-active-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--text-secondary);
}
.tag-admin-active-sm { margin: 0; }
.tag-admin-tags {
    padding: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.tag-admin-tag { display: inline-flex; align-items: center; }
.tag-admin-tag.tag-admin-inactive { opacity: 0.4; }
.tag-admin-tag-form,
.tag-admin-add-tag { display: inline-flex; gap: var(--space-1); align-items: center; }
.tag-chip {
    display: inline-block;
    padding: 0.28em 0.6em;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid var(--border-emphasis);
    background: var(--bg-muted);
    color: var(--text-secondary);
}
/* Group colour coding — subtle tinted swatch via accent-relative + support hues.
   Kept editorial (small radius, muted), not the old candy pastels. */
.tag-chip[data-group="protein"]    { border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent); color: var(--accent-ink); background: var(--accent-primary-muted); }
.tag-chip[data-group="ernaehrung"] { border-color: color-mix(in srgb, var(--pine) 40%, transparent); color: var(--pine); background: var(--success-muted); }
.tag-chip[data-group="kategorie"]  { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); background: var(--info-muted); }
.tag-chip[data-group="stil"]       { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); background: var(--warning-muted); }
.tag-chip[data-group="kueche"]     { border-color: var(--border-emphasis); color: var(--text-secondary); background: var(--bg-muted); }

.tag-admin-add-section {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-5);
}
.tag-admin-add-section h3 { font-family: var(--font-display); margin-bottom: var(--space-4); }
.tag-admin-add-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.tag-admin-add-row .form-group { flex: 1; min-width: 150px; margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Pagination (audit log)
   ---------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .branding-grid { grid-template-columns: 1fr; }
    .brand-preview-panel { position: static; }
}
@media (max-width: 768px) {
    .admin-header { align-items: flex-start; }
    .analytics-charts-row .analytics-chart-card,
    .analytics-charts-row .analytics-chart-card--wide { flex: 1 1 100%; }
}

/* ---- platform ---- */
/* ============================================================================
   PLODDO — Design System „Fresh Fuel"  ·  Partial: PLATFORM SUPER-ADMIN
   Surface: platform_admin/** (tenants, leads, billing/MRR, GDPR queues).
   Max' Cockpit — a serious internal ops console: dense ledgers, clear signals.

   Owner: platform surface. Reuses core tokens + components from style.css and
   the shared admin.css (loaded globally). Adds ONLY platform-specific pieces
   that neither of those define.

   New tokens added: NONE. Every colour is an existing core var() token.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. HEADER / COCKPIT BAND
   Editorial eyebrow + Fraunces headline; leading accent tick instead of emoji.
   --------------------------------------------------------------------------- */
.pa-head { margin-bottom: var(--space-6); }
.pa-head .header-left { display: flex; flex-direction: column; gap: var(--space-1); }
.pa-head .eyebrow { color: var(--accent-primary); }
.pa-head__lead { color: var(--text-secondary); font-size: var(--text-base); margin: var(--space-1) 0 0; }

/* Icon slot used on the dashboard nav cards — inline SVG, accent-inked */
.admin-nav-card .page-icon { width: 2rem; height: 2rem; margin-bottom: var(--space-1); }
.admin-nav-card .page-icon svg { width: 100%; height: 100%; }
.admin-nav-card h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.admin-nav-card p { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }
.page-icon svg { width: 100%; height: 100%; }

/* ----------------------------------------------------------------------------
   2. LEDGER TABLES — dense ops rows
   Core .table already sets the ledger look; here we tighten it for scanning
   and give numeric / meta columns their proper ink.
   --------------------------------------------------------------------------- */
.pa-ledger td,
.pa-ledger th { padding: var(--space-2) var(--space-3); }
.pa-ledger td { vertical-align: middle; }
.pa-ledger tbody tr { transition: background var(--transition-fast); }
.pa-ledger td code {
    font-size: 0.82em;
    color: var(--text-secondary);
    background: var(--bg-muted);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-muted);
}
/* right-aligned tabular figures */
.pa-ledger .num,
.pa-ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* muted meta cells (dates, ids) */
.pa-ledger .meta { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-ledger .id-cell { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Row action cluster inside a ledger */
.table-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.table-actions form { margin: 0; }

/* ----------------------------------------------------------------------------
   3. PROVISIONING BADGE
   Template renders: <span class="provision-badge {{ status }}">…</span>
   Base it on the core status-badge shape, then colour by raw status class.
   --------------------------------------------------------------------------- */
.provision-badge {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--text-xs); font-weight: 700; line-height: 1;
    padding: 0.32em 0.6em; border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid var(--border-default);
    background: var(--bg-muted); color: var(--text-muted);
}
.provision-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
    background: currentColor; flex: none;
}
.provision-badge.ready,
.provision-badge.active,
.provision-badge.completed,
.provision-badge.done {
    background: var(--success-muted); color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.provision-badge.pending,
.provision-badge.provisioning,
.provision-badge.queued,
.provision-badge.in_progress {
    background: var(--warning-muted); color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.provision-badge.failed,
.provision-badge.error {
    background: var(--danger-muted); color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ----------------------------------------------------------------------------
   4. ROLE BADGE (in ledgers)
   Template renders: <span class="role-badge role-{{ role }}">.
   Core defines a neutral navbar variant; here we add per-role ink.
   --------------------------------------------------------------------------- */
.pa-ledger .role-badge,
td .role-badge {
    display: inline-flex; align-items: center;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.2em 0.55em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-emphasis); background: var(--bg-surface);
    color: var(--text-secondary);
}
td .role-badge.role-owner,
td .role-badge.role-superadmin,
td .role-badge.role-platform_admin {
    background: var(--accent-primary-muted); color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent-primary) 32%, transparent);
}
td .role-badge.role-admin {
    background: var(--info-muted); color: var(--info);
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
td .role-badge.role-trainer,
td .role-badge.role-coach {
    background: var(--success-muted); color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

/* ----------------------------------------------------------------------------
   5. DATA-CARD — inline note / callout block (tenant detail, lead message)
   Left signal rule, warm surface. Variants map to core semantic tokens.
   --------------------------------------------------------------------------- */
.data-card {
    background: var(--bg-muted);
    border: 1.5px solid var(--border-default);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.data-card p:last-child { margin-bottom: 0; }
.data-card--info    { border-left-color: var(--info); background: var(--info-muted); }
.data-card--warning { border-left-color: var(--warning); background: var(--warning-muted); }
.data-card--danger  { border-left-color: var(--danger); background: var(--danger-muted); }

/* ----------------------------------------------------------------------------
   6. TENANT DETAIL — spec grid + setup link box
   --------------------------------------------------------------------------- */
.tenant-spec {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-muted);
    margin-bottom: var(--space-2);
}
.tenant-spec > div {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: var(--space-3);
    border-left: 2px solid var(--border-default);
}
.tenant-spec .spec-label {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: var(--text-muted);
}
.tenant-spec .spec-value {
    font-family: var(--font-display); font-size: var(--text-lg);
    font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.tenant-spec .spec-value--sm { font-family: var(--font-body); font-size: var(--text-base); }

/* ----------------------------------------------------------------------------
   7. LEAD DETAIL — key/value card + notes timeline
   --------------------------------------------------------------------------- */
.lead-detail-card table.table td { padding: var(--space-2) var(--space-3); }
.lead-detail-card table.table tr:first-child td { border-top: none; }
.text-bold { font-weight: 650; color: var(--text-secondary); }
.lead-detail-card td.text-bold {
    text-transform: uppercase; letter-spacing: 0.04em;
    font-size: var(--text-xs); color: var(--text-muted);
    vertical-align: top;
}

.lead-notes-timeline {
    font-size: var(--text-sm); line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    max-height: 320px; overflow-y: auto;
    white-space: pre-wrap;
}
.lead-notes-timeline hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-3) 0; }

/* Leads pipeline: give the four stat tiles a stage-coloured tick */
.leads-pipeline .stat-card:nth-child(1)::after { background: var(--info); }
.leads-pipeline .stat-card:nth-child(3)::after { background: var(--success); }

/* ----------------------------------------------------------------------------
   8. BILLING — sections, line-items editor, invoice preview, dunning
   --------------------------------------------------------------------------- */
.billing-section { margin-bottom: var(--space-6); }

.line-items-table {
    width: 100%; border-collapse: collapse;
    font-size: var(--text-sm); font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-surface);
}
.line-items-table th {
    text-align: left; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; font-size: var(--text-xs); color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-muted); border-bottom: 1.5px solid var(--ink);
    white-space: nowrap;
}
.line-items-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: middle;
}
.line-items-table tr:last-child td { border-bottom: none; }
.line-items-table input.form-control { padding: 0.45em 0.6em; }
.line-items-table .line-total { font-weight: 650; white-space: nowrap; }
.line-items-table .remove-row {
    padding: 0.2em 0.55em; line-height: 1; font-size: var(--text-base);
}

.invoice-preview {
    max-width: 420px; margin-left: auto;
    background: var(--bg-surface);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-offset);
}
.invoice-preview .total-line {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-4); padding: var(--space-1) 0;
    font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.invoice-preview .total-line span:last-child { font-weight: 650; color: var(--text-primary); }
.invoice-preview .total-line:last-child {
    margin-top: var(--space-2); padding-top: var(--space-3);
    border-top: 1.5px solid var(--ink);
}
.invoice-preview .total-line:last-child span {
    font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary);
}

/* Manual-review escalation — a hard danger callout, offset shadow signature */
.manual-review-alert {
    border: 1.5px solid var(--danger);
    border-radius: var(--radius-lg);
    background: var(--danger-muted);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.manual-review-alert h3 {
    font-family: var(--font-display); color: var(--danger);
    margin-bottom: var(--space-1); font-size: var(--text-lg);
}
.manual-review-alert p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.manual-review-alert .card-table,
.manual-review-alert .table-responsive { background: var(--bg-surface); }

/* Small green "paid" success button variant (billing rows) */
.btn-success {
    background: transparent; color: var(--success); border-color: var(--success);
}
.btn-success:hover { background: var(--success); color: var(--text-inverse); border-color: var(--success); }

/* Revenue chart canvas gets a framed paper panel */
#revenueChart, #funnelChart, #statusChart { max-width: 100%; }

/* ----------------------------------------------------------------------------
   9. FORMS — checkbox rows, seat editor helper
   --------------------------------------------------------------------------- */
.checkbox-label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: 500; cursor: pointer; font-size: var(--text-base);
}
.checkbox-label input { width: auto; }

/* ----------------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .invoice-preview { max-width: none; margin-left: 0; }
    .tenant-spec { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .tenant-spec { grid-template-columns: 1fr; }
}

/* ---- auth ---- */
/* ============================================================================
   PLODDO — „Fresh Fuel" · Partial: AUTH + GATES + ERRORS
   Owner surface: templates/auth/*, site_gate, beta_welcome, errors/*
   Tokens: reuses core (style.css). NO new tokens added.
   Accent always via var(--accent-primary) — white-label hook preserved.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   AUTH CANVAS — weiße, runde Karte mit weichem Schatten auf Cream
   -------------------------------------------------------------------------- */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--navbar-height) - var(--space-8) - var(--space-6));
    padding: var(--space-6) 0;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-7) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-md);
    position: relative;
}
.auth-card--wide { max-width: 520px; }

/* Pill-Chip über dem Titel (ersetzt die Kontor-Uppercase-Eyebrow) */
.auth-chip, .error-chip {
    display: inline-flex;
    align-items: center;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.5em 1em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

/* ---------- Brand lockup ---------- */
.login-branding {
    margin-bottom: var(--space-6);
}
.login-branding .auth-chip {
    margin-bottom: var(--space-4);
}
.login-logo {
    max-height: 52px;
    width: auto;
    margin-bottom: var(--space-3);
}
/* Pod-Lockup in der Auth-Karte (Plattform-Marke; tenant_logo hat Vorrang) */
.login-branding .brand-lockup { margin-bottom: var(--space-2); }
.login-branding .brand-mark { width: 40px; height: 40px; }
.login-branding .brand-wordmark { font-size: 1.75rem; }
.login-title,
.auth-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.login-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: var(--space-2) 0 0;
    max-width: 34ch;
}

/* Group the form fields with a hairline separator above the brand's subtitle */
.auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.auth-card .btn-block {
    margin-top: var(--space-2);
}

/* ---------- Footer link row ---------- */
.auth-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.auth-footer a {
    font-weight: 600;
    color: var(--text-secondary);
}
.auth-footer a:hover {
    color: var(--accent-primary);
}

/* ---------- Register: privacy checkbox ---------- */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.45;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
}
.checkbox-label a {
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   INVITE — result box + copyable link (logic preserved)
   -------------------------------------------------------------------------- */
.invite-result {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
}
.invite-result > p {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.invite-result > p:last-of-type {
    margin-bottom: 0;
}
.invite-result strong {
    color: var(--text-primary);
}

.seat-confirm {
    border-left: 4px solid var(--warning);
}
.seat-confirm form {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

/* Copyable invite link — ledger style */
.invite-url-box {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.invite-url-box code {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 0.6em 0.75em;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-emphasis);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-primary);
    overflow-x: auto;
    white-space: nowrap;
}
.invite-url-box .btn {
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   ERROR PAGES — große Bricolage-Zahl auf Cream, freundlich zentriert
   -------------------------------------------------------------------------- */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - var(--navbar-height) - var(--space-10));
    justify-content: center;
    max-width: 36rem;
    margin: 0 auto;
    padding: var(--space-6) 0;
    gap: var(--space-3);
}
.error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.error-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--space-2) 0 0;
}
.error-message {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 42ch;
    margin: 0;
}
.error-request-id {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}
.error-request-id code {
    background: var(--bg-muted);
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}
.error-page .btn {
    margin-top: var(--space-3);
}

/* ----------------------------------------------------------------------------
   SITE GATE — standalone page (links style.css + this partial)
   -------------------------------------------------------------------------- */
.gate-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.gate-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-md);
}
.gate-card .eyebrow {
    display: block;
    margin-bottom: var(--space-2);
}
.gate-card h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-5);
}
.gate-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.gate-error {
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   BETA WELCOME — standalone editorial briefing (links style.css + this partial)
   -------------------------------------------------------------------------- */
.beta-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-10);
}
.beta-header {
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-6);
}
.beta-header .eyebrow {
    display: block;
    margin-bottom: var(--space-2);
}
.beta-header h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
}
.beta-header .beta-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
    max-width: 54ch;
}

.beta-section {
    margin-bottom: var(--space-7);
}
.beta-section > .section-title {
    margin-bottom: var(--space-4);
}
.beta-section p,
.beta-section li {
    color: var(--text-secondary);
}
.beta-section .card ul,
.beta-section .card ol {
    padding-left: var(--space-5);
    margin: 0;
}
.beta-section .card li {
    margin-bottom: var(--space-2);
}
.beta-section .card li:last-child {
    margin-bottom: 0;
}
.beta-section strong {
    color: var(--text-primary);
}

/* Role cards — two-up ledger grid */
.beta-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 560px) {
    .beta-role-grid { grid-template-columns: 1fr; }
}
.beta-role-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.beta-role-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.beta-role-card h3::before {
    content: "";
    width: 0.9rem;
    height: 2px;
    background: var(--accent-primary);
    display: inline-block;
    transform: translateY(-0.3em);
    flex-shrink: 0;
}
.beta-role-card ul {
    padding-left: var(--space-5);
    margin: 0;
}
.beta-role-card li {
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}

/* Numbered steps — reuse the wizard step-number look */
.beta-steps {
    counter-reset: beta-step;
    list-style: none;
    padding-left: 0;
}
.beta-steps li {
    counter-increment: beta-step;
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: var(--space-3);
    min-height: 2rem;
    display: flex;
    align-items: center;
}
.beta-steps li:last-child { margin-bottom: 0; }
.beta-steps li::before {
    content: counter(beta-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--accent-primary);
    color: #fff;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Test-login table gets an inline password chip */
.beta-pw {
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-size: var(--text-sm);
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    color: var(--accent-ink);
}

/* Feedback callout — reuses flash/alert intent without emoji */
.beta-feedback {
    margin-top: var(--space-5);
}
.beta-feedback a {
    font-weight: 600;
}

.beta-cta {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-start;
}

/* ---- public ---- */
/* ============================================================================
   PLODDO — Public / Marketing surface  ·  "Fresh Fuel" (lp-*)
   Partial owner: public marketing site (index, features, pricing, about,
   contact). Loaded after the core tokens.

   Light/cream only — base_public.html carries no data-theme attribute.
   Dark accent bands (hero demo card, pricing band) are deliberate green-deep
   surfaces built with fixed design values (#22301F et al.) so they read
   identically everywhere. The white-label hook stays var(--accent-primary)
   throughout — never a hardcoded green.
   ========================================================================== */

.lp-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5); }
.lp-container--narrow { max-width: 860px; }

/* ============================================================================
   NAVBAR — sticky, blurred cream, pod lockup, pill CTA
   ========================================================================== */
.lp-navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250, 246, 237, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-default);
}
.lp-navbar__inner {
    display: flex; align-items: center; gap: var(--space-5);
    max-width: 1160px; margin: 0 auto;
    padding: 14px var(--space-5);
}
.lp-navbar__logo { display: inline-flex; align-items: center; gap: 10px; }
.lp-navbar__logo img { width: 30px; height: 30px; }
.lp-navbar__logo .tenant-logo { width: auto; height: 30px; }
.lp-navbar__wordmark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.375rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    text-transform: lowercase;
}
.lp-navbar__links { display: flex; gap: 22px; }
.lp-navbar__links a {
    font-size: 0.90625rem; font-weight: 500;
    color: var(--accent-primary);
}
.lp-navbar__links a:hover { color: var(--accent-primary-hover); }
.lp-navbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.lp-navbar__login { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.lp-navbar__login:hover { color: var(--text-primary); }

/* Green pill CTA (nav + sections) */
.lp-btn-accent {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    background: var(--accent-primary); color: #FAF6ED;
    font-weight: 600; font-size: 0.875rem; line-height: 1;
    padding: 10px 20px;
    border: none; border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
.lp-btn-accent:hover { background: var(--accent-primary-hover); color: #FAF6ED; }
.lp-btn-lg { padding: 14px 28px; font-size: 0.96875rem; }

.lp-navbar__toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    cursor: pointer;
}
.lp-navbar__toggle span {
    display: block; height: 2px; width: 100%;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    transition: transform var(--transition-base), opacity var(--transition-fast);
}
.lp-navbar.open .lp-navbar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-navbar.open .lp-navbar__toggle span:nth-child(2) { opacity: 0; }
.lp-navbar.open .lp-navbar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================================
   HERO — two columns: copy left, dark USP demo card right
   ========================================================================== */
.lp-hero {
    max-width: 1160px; margin: 0 auto;
    padding: 88px var(--space-5) 72px;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 48px; align-items: center;
}
.lp-hero__content { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.lp-hero__badge,
.lp-section__chip {
    display: inline-flex; align-items: center;
    background: var(--accent-primary-muted); color: var(--accent-primary);
    font-weight: 600; font-size: var(--text-sm);
    padding: 6px 14px;
    border-radius: var(--radius-full);
}
.lp-hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 5.5vw, 3.375rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0;
}
.lp-text-accent { color: var(--accent-primary); }
.lp-hero__subtitle {
    font-size: 1.0625rem; line-height: 1.6;
    color: var(--text-secondary);
    max-width: 480px; margin: 0;
}
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-hero__cta-link { font-weight: 600; font-size: 0.96875rem; }

/* Proof points under the hero CTA */
.lp-hero__proof { display: flex; gap: var(--space-3) var(--space-5); margin-top: 10px; flex-wrap: wrap; }
.lp-hero__proof-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.84375rem; color: var(--text-muted);
}
.lp-hero__proof-item strong { color: var(--accent-primary); font-weight: 700; }

/* Compact sub-page hero (features / pricing / about / contact) */
.lp-hero--sm { display: block; padding: var(--space-10) 0 var(--space-4); }
.lp-hero--sm .lp-hero__badge { margin-bottom: var(--space-4); }
.lp-hero--sm .lp-hero__title { margin: 0 auto var(--space-4); }
.lp-hero--sm .lp-hero__subtitle { margin: 0 auto; }

/* ---------------------------------------------------------------------------
   USP demo card — green-deep surface, white-label header, DB counter,
   "Woche würfeln" demo, generated week rows, shopping-list row.
   Fixed dark/cream values by design; accents stay var().
   ------------------------------------------------------------------------- */
.lp-demo {
    background: #22301F;
    border-radius: var(--radius-xl);
    padding: 26px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 4px 8px rgba(34, 48, 31, 0.08), 0 24px 48px rgba(34, 48, 31, 0.18);
}
.lp-demo__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.lp-demo__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lp-demo__brand-badge {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 7px;
    background: var(--accent-citrus); color: #22301F;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 0.75rem;
}
.lp-demo__brand-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: 0.9375rem;
    color: #FAF6ED;
}
.lp-demo__brand-sub { font-family: var(--font-body); font-weight: 400; font-size: 0.71875rem; color: #8F9A84; }
.lp-demo__tag {
    flex-shrink: 0;
    background: rgba(250, 246, 237, 0.1); color: #B9B2A0;
    font-weight: 600; font-size: 0.65625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

/* Cream inner panel: DB counter + roll button + generated week */
.lp-demo__panel {
    background: #FAF6ED;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.lp-demo__counter-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.lp-demo__count {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.625rem;
    letter-spacing: -0.02em; color: #22301F;
    line-height: 1.15;
}
.lp-demo__count small { font-size: 0.8125rem; font-weight: 600; color: #7D7663; letter-spacing: 0; }
.lp-demo__count-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.71875rem; color: #A39A82; letter-spacing: 0; }
.lp-demo__roll { padding: 10px 16px; font-size: 0.8125rem; flex-shrink: 0; }
.lp-demo__divider { height: 1px; background: #E8E0CF; }

.lp-demo__week { display: flex; flex-direction: column; gap: 7px; }
.lp-demo__week-head {
    display: flex; justify-content: space-between; gap: var(--space-3);
    font-size: 0.65625rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #A39A82;
}
.lp-demo__week-target { font-family: var(--font-mono); font-weight: 500; color: var(--accent-primary); letter-spacing: 0; text-transform: none; }

.lp-demo__row {
    display: flex; gap: 8px; align-items: center;
    border: 1px solid #E8E0CF;
    border-radius: 10px;
    padding: 8px 10px;
    background: #FFFFFF;
}
.lp-demo__day { font-family: var(--font-mono); font-size: 0.625rem; color: #A39A82; width: 22px; flex-shrink: 0; }
.lp-demo__meal { font-weight: 600; font-size: 0.78125rem; color: #22301F; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-demo__row-tag {
    background: var(--accent-primary-muted); color: var(--accent-primary);
    font-weight: 600; font-size: 0.625rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.lp-demo__rolled-note { font-size: 0.65625rem; color: var(--accent-primary-hover); flex-shrink: 0; }
.lp-demo__row--rolled {
    border: 1.5px dashed var(--accent-primary);
    background: var(--accent-primary-muted);
    padding: 7.5px 9.5px;
}
.lp-demo__row--rolled .lp-demo__day { color: var(--accent-primary-hover); }
.lp-demo__row--rolled .lp-demo__meal { color: var(--accent-primary); }
.lp-demo__row--rolled .lp-demo__row-tag { display: none; }
.lp-demo__row:not(.lp-demo__row--rolled) .lp-demo__rolled-note { display: none; }

@keyframes lp-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-demo__row.is-rolling { animation: lp-row-in 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .lp-demo__row.is-rolling { animation: none; } }

/* Auto shopping list row */
.lp-demo__list {
    background: rgba(250, 246, 237, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
}
.lp-demo__list svg { color: var(--accent-citrus); flex-shrink: 0; }
.lp-demo__list-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lp-demo__list-title { font-weight: 600; font-size: 0.8125rem; color: #FAF6ED; }
.lp-demo__list-sub { font-size: 0.71875rem; color: #8F9A84; }
.lp-demo__list-metric { color: var(--accent-citrus); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }

/* ============================================================================
   SECTIONS — rhythm + heading system
   ========================================================================== */
.lp-section { margin: 0; padding: 72px 0; }
.lp-section--alt {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.lp-section__header { margin-bottom: 40px; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.lp-section__header--center { max-width: none; align-items: center; text-align: center; }
.lp-section__badge {
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-faint);
}
.lp-section__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, var(--text-3xl));
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}
.lp-section__subtitle {
    font-size: 0.96875rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================================
   FEATURES — 4×2 rounded card grid (index) + compact grid (features page)
   ========================================================================== */
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.lp-feature-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 22px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color var(--transition-fast);
}
.lp-feature-card:hover { border-color: var(--accent-primary); }
.lp-feature-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}
.lp-feature-card__icon svg { width: 20px; height: 20px; }
.lp-feature-card h3 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.03125rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;
}
.lp-feature-card p {
    font-size: 0.84375rem; line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.lp-features-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-feature-card--sm { padding: 18px 20px; gap: 6px; }
.lp-feature-card--sm h3 { font-size: 0.9375rem; }

/* ============================================================================
   FEATURE DETAIL (features page) — text + abstract product mockup
   ========================================================================== */
.lp-feature-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.lp-feature-detail--reverse .lp-feature-detail__text { order: 2; }
.lp-feature-detail__text .lp-section__badge { display: block; margin-bottom: 10px; }
.lp-feature-detail__text h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, var(--text-2xl));
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
}
.lp-feature-detail__text > p {
    color: var(--text-secondary);
    font-size: 0.96875rem; line-height: 1.6;
    margin-bottom: var(--space-4);
}
.lp-feature-detail__list { list-style: none; display: grid; gap: var(--space-2); padding: 0; }
.lp-feature-detail__list li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.45;
}
.lp-feature-detail__list li::before {
    content: "";
    position: absolute; left: 0; top: 0.12em;
    width: 1.2rem; height: 1.2rem;
    border-radius: var(--radius-full);
    background-color: var(--accent-primary-muted);
}
.lp-feature-detail__list li::after {
    content: "";
    position: absolute; left: 0; top: 0.12em;
    width: 1.2rem; height: 1.2rem;
    background: var(--accent-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/0.72rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/0.72rem;
}

/* Abstract product mockup */
.lp-feature-mockup {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.lp-feature-mockup__bar {
    display: flex; gap: 6px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-muted);
}
.lp-feature-mockup__bar span {
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
    background: var(--border-emphasis);
}
.lp-feature-mockup__bar span:first-child { background: var(--accent-primary); }
.lp-feature-mockup__content { padding: var(--space-5); display: grid; gap: var(--space-3); }
.lp-feature-mockup__card { height: 46px; border-radius: var(--radius-md); background: var(--bg-muted); border: 1px solid var(--border-default); }
.lp-feature-mockup__card:first-child { background: var(--accent-primary-muted); border-color: var(--accent-primary); }
.lp-feature-mockup__lines { display: grid; gap: 8px; margin-top: var(--space-2); }
.lp-feature-mockup__lines span { height: 8px; border-radius: var(--radius-full); background: var(--border-default); }
.lp-feature-mockup__lines span:first-child { width: 90%; }
.lp-feature-mockup__content--grid { grid-template-columns: repeat(3, 1fr); }
.lp-feature-mockup__cell { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--bg-muted); border: 1px solid var(--border-default); }
.lp-feature-mockup__cell--accent { background: var(--accent-primary-muted); border: 1.5px dashed var(--accent-primary); }
.lp-feature-mockup__content--profile { justify-items: start; }
.lp-feature-mockup__avatar { width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--accent-primary-muted); border: 1.5px solid var(--accent-primary); }
.lp-feature-mockup__bars { display: grid; gap: 8px; width: 100%; margin-top: var(--space-2); }
.lp-feature-mockup__bars div { height: 10px; border-radius: var(--radius-full); background: var(--accent-primary); opacity: 0.85; }

/* ============================================================================
   HOW IT WORKS — 3 numbered cards (step 3 = the citrus moment)
   ========================================================================== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}
.lp-step {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 26px;
    display: flex; flex-direction: column; gap: 12px;
}
.lp-step__number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: var(--accent-primary); color: #FAF6ED;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1rem;
}
.lp-step:last-child .lp-step__number { background: var(--accent-citrus); color: #22301F; }
.lp-step h3 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0;
}
.lp-step p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; margin: 0; }
.lp-step__arrow { display: none; }

/* ============================================================================
   PRICING — dark band (index) + cream Ploddo One card
   ========================================================================== */
.lp-band-dark { background: #22301F; }
.lp-band-dark .lp-container {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: center;
    padding-top: 72px; padding-bottom: 72px;
}
.lp-band-dark__copy { display: flex; flex-direction: column; gap: 14px; }
.lp-band-dark__copy .lp-section__badge { color: #8F9A84; }
.lp-band-dark__copy .lp-section__title { color: #FAF6ED; }
.lp-band-dark__copy .lp-section__subtitle { color: #B9B2A0; max-width: 420px; }

.lp-price-card {
    background: #FAF6ED;
    border-radius: var(--radius-xl);
    padding: 32px;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}
.lp-price-card__head { display: flex; justify-content: space-between; align-items: center; }
.lp-price-card__name {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.25rem;
    color: #22301F;
}
.lp-price-card__head img { width: 28px; height: 28px; }
.lp-price-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-price-card__amount {
    font-family: var(--font-display);
    font-weight: 800; font-size: 3.25rem;
    letter-spacing: -0.03em; line-height: 1;
    color: #22301F;
    font-variant-numeric: tabular-nums;
}
.lp-price-card__period { font-size: 0.875rem; color: #7D7663; }
.lp-price-card__divider { height: 1px; background: #E8E0CF; }
.lp-price-card__lines { display: flex; flex-direction: column; gap: 10px; font-size: 0.90625rem; color: #4A503F; }
.lp-price-card__lines span { display: flex; gap: 10px; }
.lp-price-card__lines b { color: var(--accent-primary); font-weight: 700; }
.lp-price-card__lines .is-citrus b { color: var(--accent-citrus); }
.lp-price-card__cta { width: 100%; }
.lp-price-card__more { text-align: center; font-weight: 600; font-size: 0.875rem; }

/* Light pricing cards (pricing page) */
.lp-pricing-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    background: var(--bg-surface);
}
.lp-pricing-card--featured { box-shadow: var(--shadow-lg); }
.lp-pricing-card__badge {
    display: inline-flex; align-items: center;
    background: var(--accent-primary-muted); color: var(--accent-primary);
    font-weight: 700; font-size: var(--text-sm);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}
.lp-pricing-card__header h3 {
    font-family: var(--font-display);
    font-weight: 800; font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}
.lp-pricing-card__price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.lp-pricing-card__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 7vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.lp-pricing-card__period { font-size: var(--text-base); color: var(--text-muted); font-weight: 500; }
.lp-pricing-card__header > p { color: var(--text-secondary); margin-top: var(--space-2); }
.lp-pricing-card__features {
    list-style: none;
    margin: var(--space-5) 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    display: grid; gap: var(--space-3);
}
.lp-pricing-card__features li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--text-primary);
}
.lp-pricing-card__features li.included::before {
    content: "";
    position: absolute; left: 0; top: 0.05em;
    width: 1.25rem; height: 1.25rem;
    border-radius: var(--radius-full);
    background-color: var(--accent-primary-muted);
}
.lp-pricing-card__features li.included::after {
    content: "";
    position: absolute; left: 0; top: 0.05em;
    width: 1.25rem; height: 1.25rem;
    background: var(--accent-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/0.75rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/0.75rem;
}
.lp-pricing-card__cta { width: 100%; }

/* Add-on / annual note cards */
.lp-addon-card { padding: var(--space-5); border-radius: var(--radius-lg); }
.lp-addon-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.lp-addon-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.55; }

/* Seat / feature tables */
.lp-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.lp-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}
.lp-comparison-table th {
    text-align: left;
    text-transform: uppercase; letter-spacing: 0.1em;
    font-size: var(--text-xs); font-weight: 700;
    color: var(--text-faint);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-default);
}
.lp-comparison-table th.featured,
.lp-comparison-table td.featured { text-align: right; color: var(--text-primary); }
.lp-comparison-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-muted);
    color: var(--text-primary);
}
.lp-comparison-table td.featured { font-family: var(--font-mono); font-weight: 500; }
.lp-comparison-table tr:last-child td { border-bottom: none; }
.lp-comparison-table tbody tr:hover { background: var(--bg-base); }
.lp-comparison-table td.check { color: var(--accent-primary); font-weight: 700; font-size: var(--text-lg); }

/* ============================================================================
   FAQ — rounded disclosure cards
   ========================================================================== */
.lp-faq { display: flex; flex-direction: column; gap: 12px; }
.lp-faq__item {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0 24px;
    transition: border-color var(--transition-fast);
}
.lp-faq__item:hover { border-color: var(--border-emphasis); }
.lp-faq__item[open] { border-color: var(--accent-primary); }
.lp-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.03125rem;
    color: var(--text-primary);
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
    content: "+";
    font-family: var(--font-body);
    font-size: 1.5rem; font-weight: 400; line-height: 1;
    color: var(--accent-primary);
    transition: transform var(--transition-base);
}
.lp-faq__item[open] summary::after { transform: rotate(45deg); }
.lp-faq__item p {
    margin: 0; padding: 0 0 20px;
    max-width: 66ch;
    font-size: 0.90625rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================================
   ABOUT — mission + value cards
   ========================================================================== */
.lp-about-content { display: grid; gap: var(--space-8); }
.lp-about-block h2 {
    font-family: var(--font-display);
    font-weight: 800; font-size: var(--text-2xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
.lp-about-block p { color: var(--text-secondary); font-size: 0.96875rem; line-height: 1.65; max-width: 68ch; }
.lp-about-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.lp-about-value {
    padding: 26px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.lp-about-value__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: var(--space-4);
    color: var(--accent-primary);
    background: var(--accent-primary-muted);
    border-radius: 10px;
}
.lp-about-value h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.lp-about-value p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; margin: 0; }

/* ============================================================================
   CONTACT — form card + info cards
   ========================================================================== */
.lp-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
}
.lp-contact-form {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}
.lp-form-group { margin-bottom: var(--space-4); }
.lp-form-group label {
    display: block; font-weight: 600; font-size: var(--text-sm);
    margin-bottom: var(--space-2); color: var(--text-primary);
}
.lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lp-checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 400 !important; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.lp-checkbox input { width: auto; margin-top: 0.2em; }
.lp-checkbox a { color: var(--accent-primary); text-decoration: underline; }

/* Honeypot — visually hidden, retrievable by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-contact-info { display: grid; gap: var(--space-4); }
.lp-contact-info__card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-5);
}
.lp-contact-info__card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-4); }
.lp-contact-info__card > p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.lp-contact-info__item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-muted);
}
.lp-contact-info__item:first-of-type { border-top: none; padding-top: 0; }
.lp-contact-info__item svg { color: var(--accent-primary); flex-shrink: 0; margin-top: 2px; }
.lp-contact-info__item strong { display: block; font-size: var(--text-sm); }
.lp-contact-info__item a, .lp-contact-info__item span { font-size: var(--text-sm); color: var(--text-secondary); }

/* ============================================================================
   FINAL CTA — green-soft rounded panel
   ========================================================================== */
.lp-cta-section { padding: 72px 0; }
.lp-cta-section > .lp-container {
    background: var(--accent-primary-muted);
    border-radius: var(--radius-xl);
    padding: 56px var(--space-6);
    max-width: 1112px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center;
}
.lp-cta-section .lp-section__title { max-width: 520px; }
.lp-cta-section .lp-section__subtitle { color: var(--text-secondary); margin: 0; }
.lp-cta-section img { width: 44px; height: 44px; }

/* ============================================================================
   FOOTER — white, brand column + link columns + legal
   ========================================================================== */
.lp-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    margin-top: 0;
    padding: 56px 0 0;
}
.lp-footer__inner {
    max-width: 1160px; margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}
.lp-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.lp-footer__lockup { display: inline-flex; align-items: center; gap: 8px; }
.lp-footer__lockup img { width: 24px; height: 24px; }
.lp-footer__lockup .tenant-logo { width: auto; height: 24px; }
.lp-footer__wordmark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.125rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    text-transform: lowercase;
}
.lp-footer__tagline { font-size: 0.84375rem; color: var(--text-muted); max-width: 260px; margin: 0; }
.lp-footer__col { display: flex; flex-direction: column; gap: 8px; }
.lp-footer__col h4 {
    font-family: var(--font-body);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-size: var(--text-xs); font-weight: 700;
    color: var(--text-faint);
    margin-bottom: var(--space-1);
}
.lp-footer__col a { color: var(--accent-primary); font-size: 0.84375rem; }
.lp-footer__col a:hover { color: var(--accent-primary-hover); }
.lp-footer__bottom {
    max-width: 1160px; margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--border-default);
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    font-size: 0.78125rem; color: var(--text-faint);
}
.lp-footer__bottom p { margin: 0; }

/* ============================================================================
   RESPONSIVE (lp-*)
   ========================================================================== */
@media (max-width: 1020px) {
    .lp-hero { grid-template-columns: 1fr; padding-top: 56px; gap: 40px; }
    .lp-band-dark .lp-container { grid-template-columns: 1fr; gap: 32px; }
    .lp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-features-grid--compact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .lp-feature-detail { grid-template-columns: 1fr; gap: var(--space-6); }
    .lp-feature-detail--reverse .lp-feature-detail__text { order: 0; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .lp-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .lp-navbar__links, .lp-navbar__actions { display: none; }
    .lp-navbar__toggle { display: flex; }
    .lp-navbar.open .lp-navbar__inner { flex-wrap: wrap; }
    .lp-navbar.open .lp-navbar__links,
    .lp-navbar.open .lp-navbar__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border-default);
    }
    .lp-navbar.open .lp-navbar__actions { border-top: none; padding-top: 0; margin-left: 0; }
    .lp-section, .lp-cta-section { padding: 48px 0; }
    .lp-hero { padding: 40px var(--space-5) 48px; }
    .lp-form-row { grid-template-columns: 1fr; }
    .lp-cta-section > .lp-container { padding: 40px var(--space-5); margin: 0 var(--space-4); width: auto; }
}

@media (max-width: 560px) {
    .lp-features-grid, .lp-features-grid--compact { grid-template-columns: 1fr; }
    .lp-footer__inner { grid-template-columns: 1fr; }
    .lp-demo { padding: 18px; }
    .lp-demo__counter-row { flex-wrap: wrap; }
}

/* ============================================================================
   LEGAL — long-form, readable measure (extends app base.html, light paper)
   ========================================================================== */
.legal-page {
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--space-6) 0 var(--space-10);
}
.legal-page > h1 {
    font-family: var(--font-display);
    font-weight: 640;
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1.5px solid var(--ink);
}
.legal-section { margin-bottom: var(--space-7); }
.legal-section h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    padding-top: var(--space-2);
}
.legal-section h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: var(--space-4) 0 var(--space-2);
}
.legal-section p,
.legal-section li {
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 68ch;
}
.legal-section p { margin-bottom: var(--space-3); }
.legal-section ul { padding-left: var(--space-5); margin-bottom: var(--space-3); display: grid; gap: var(--space-2); }
.legal-section li::marker { color: var(--accent-primary); }
.legal-section strong { color: var(--text-primary); font-weight: 650; }
.legal-section a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-section .btn { text-decoration: none; margin-top: var(--space-2); }

/* [TODO] draft markers stay visible — flagged, not decorative */
.legal-page mark {
    background: var(--warning-muted);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.05em 0.4em;
    font-size: 0.92em;
    font-weight: 600;
}

/* ============================================================================
   CLIENT EXCLUSIONS, SNACKS & SWAP — Selbstbedienung mit harten Garantien
   ========================================================================== */
.form-hint { font-size: var(--text-sm); color: var(--text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-4); max-width: 68ch; }
.excluded-tags-matrix { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.excluded-tags-group { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.excluded-tags-group legend { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 0 var(--space-2); }
.excluded-tags-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.excluded-tag-option { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--text-sm); cursor: pointer; }
.excluded-tag-option input { accent-color: var(--danger); }
.excluded-tag-option:has(input:checked) span { color: var(--danger); font-weight: 700; text-decoration: line-through; }

.wiz-snack-toggle { display: flex; align-items: flex-start; gap: 0.6em; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; margin-bottom: var(--space-4); }
.wiz-snack-toggle input { accent-color: var(--accent-primary); margin-top: 0.25em; }
.wiz-snack-toggle:has(input:checked) { border-color: var(--accent-primary); background: var(--accent-primary-muted, rgba(216, 68, 42, 0.07)); }

.pd-swap-btn, .meal-swap-btn { margin-top: var(--space-2); }
.weight-chart-wrap { position: relative; height: 240px; }
.measurement-summary__goal { color: var(--text-muted); font-size: var(--text-sm); }
.macro-badge--minor { opacity: 0.75; font-size: 0.78em; }


/* Fresh Fuel: numerische Werte in Mono */
.kcal-tag, .macro-tag, .kcal-badge, .macro-badge, .progress-text,
.nutrition-table td:not(:first-child), .stats td {
    font-family: var(--font-mono);
    font-size: 0.9em;
}


/* Marken-Lockup "The Pod" */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { display: block; }
.brand-wordmark {
    font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
    letter-spacing: -0.03em; color: var(--text-primary); text-transform: lowercase;
}
[data-theme="dark"] .brand-mark { content: url("/static/brand/logo-mark-on-dark.svg"); }

/* ============================================================================
   TRAINER DASHBOARD — Fresh Fuel (Coach-Dashboard, Mockup Screen 1)
   Owner: dashboard_trainer.html · Abschnitt DASHBOARDS-Partial (angehängt,
   da parallel an der Datei gearbeitet wird — Overrides ersetzen die
   Kontor-Reste desselben Partials weiter oben: weiche Schatten statt
   Offset, Pills statt Ecken, keine Uppercase-Eyebrows außer Stat-Labels).
   Dark-Fläche = feste green-deep-Werte lt. Design (kein Token-Remap).
   Accent IMMER var(--accent-primary) — White-Label-Hook.
   ========================================================================== */

/* --- Kontor-Reste im DASHBOARDS-Partial ersetzen (Cascade-Override) ------ */
.greeting {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--space-1);
}
.section-header { border-bottom: 1px solid var(--border-default); }
.see-more {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.84375rem;
    font-weight: 600;
}
.first-steps { border: 1px solid var(--border-default); box-shadow: var(--shadow-md); }
.first-step__marker { border-radius: var(--radius-full); }
.first-step--done .first-step__marker {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}
.trainer-client-list, .trainer-plans-list {
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}
.qnav-btn { border-radius: var(--radius-full); }

/* --- Kopfzeile: Begrüßung links, Schnellaktionen rechts ------------------ */
.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.dash-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-head__sub { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.dash-head .greeting { margin-bottom: 0; }
.dash-head .quick-nav { margin-bottom: 0; }

/* --- Stat-Karten: weiß, rund, weiche Schatten; letzte Karte green-deep --- */
.stats-grid--dash {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-md);
}
.dash-stat__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.dash-stat__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.375rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.dash-stat__sub { font-size: 0.78125rem; color: var(--text-muted); }

/* Der EINE Citrus-Moment der View: Zahl auf der dunklen Karte */
.dash-stat--deep {
    background: #22301F; /* green-deep, bewusst fest (Dark-Fläche lt. Design) */
    border-color: #22301F;
}
.dash-stat--deep .dash-stat__label,
.dash-stat--deep .dash-stat__sub { color: #B9B2A0; }
.dash-stat--deep .dash-stat__value { color: #FAF6ED; }
.dash-stat__value--citrus { color: #E4B33C; }
[data-theme="dark"] .dash-stat--deep { border-color: rgba(250, 246, 237, 0.14); }

/* --- Zwei Spalten: auslaufende Pläne + Check-in-Feed ---------------------- */
.dash-columns {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-8);
}
.dash-columns--single { grid-template-columns: 1fr; }

.dash-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}
.dash-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.dash-panel__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.dash-panel__empty { color: var(--text-muted); font-size: var(--text-base); margin: 0; }

/* Auslaufende Pläne: Avatar · Name + Woche · Mono-Makros · Pill · CTA */
.expiring-list { display: flex; flex-direction: column; gap: 10px; }
.expiring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.expiring-row:hover { border-color: var(--border-emphasis); background: var(--bg-base); }
.expiring-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.expiring-row__name { font-weight: 600; color: var(--text-primary); font-size: 0.90625rem; }
.expiring-row__macros { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--text-muted); }

.dash-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.dash-avatar--sm { width: 34px; height: 34px; font-size: 0.78125rem; }

.pill-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
.pill-badge--soon { background: var(--warning-muted); color: var(--warning); }
.pill-badge--danger { background: var(--danger-muted); color: var(--danger); }

/* Check-in-Feed */
.checkin-feed { display: flex; flex-direction: column; }
.checkin-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: var(--space-3) 0;
}
.checkin-item:first-child { padding-top: 0; }
.checkin-item:last-child { padding-bottom: 0; }
.checkin-item + .checkin-item { border-top: 1px solid var(--bg-muted); }
.checkin-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.checkin-item__text { font-size: 0.875rem; color: var(--text-primary); }
.checkin-item__text strong { font-weight: 700; }
.checkin-item__meta { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--text-muted); }
.checkin-item__time { font-size: 0.75rem; color: var(--text-faint); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .stats-grid--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dash-columns { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .greeting { font-size: 1.625rem; }
    .expiring-row { flex-wrap: wrap; }
    .expiring-row__body { flex-basis: calc(100% - 52px); }
}
@media (max-width: 480px) {
    .stats-grid--dash { grid-template-columns: 1fr; }
}


/* ============================================================================
   CLIENT-APP — Fresh Fuel (templates/index.html)
   Green-deep Header-Block (Marken-Moment, White-Label-Slot), Stat-Tiles
   (Citrus = Check-in-Serie, der EINE Citrus-Moment der View), "Dein Tag"-
   Zustaende (meal-past/meal-now) und die green-soft Check-in-Prompt-Karte.
   Dark-Flaechen bewusst mit festen Werten — green-deep bleibt in beiden
   Themes identisch (Referenz: Ploddo App Mockups, Screen 5).
   ========================================================================== */
.capp-header {
    /* Dunkle Fläche, aber von der Studio-Marke getönt (White-Label) statt
       hart Ploddo-Grün — jedes Studio bekommt seinen eigenen dunklen Ton. */
    background: color-mix(in srgb, var(--accent-primary) 22%, #141a10);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-4);
    box-shadow: var(--shadow-md);
}
.capp-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.capp-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.capp-brand-logo {
    display: block; max-height: 30px; max-width: 150px;
    background: #FAF6ED; border-radius: var(--radius-sm); padding: 3px 8px;
}
.capp-brand-mark { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.capp-wordmark {
    font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
    letter-spacing: -0.03em; color: #FAF6ED; text-transform: lowercase;
}
.capp-tenant-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    letter-spacing: -0.02em; color: #FAF6ED;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.capp-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgba(250, 246, 237, 0.14); color: #FAF6ED;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.capp-avatar:hover { background: rgba(250, 246, 237, 0.24); }
.capp-greet { display: flex; flex-direction: column; gap: 2px; }
.capp-greeting {
    margin: 0;
    font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
    letter-spacing: -0.02em; color: #FAF6ED; line-height: 1.15;
}
.capp-sub { font-size: var(--text-sm); color: #B9B2A0; }
.capp-stats { display: flex; gap: var(--space-3); }
.capp-stat {
    flex: 1; min-width: 0;
    background: rgba(250, 246, 237, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: flex; flex-direction: column; gap: 2px;
}
.capp-stat-label {
    font-size: 0.65625rem; /* 10.5px */
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #B9B2A0;
}
.capp-stat-value {
    font-family: var(--font-mono); font-size: var(--text-base);
    color: #FAF6ED; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.capp-stat-unit { font-size: var(--text-xs); color: #B9B2A0; }
.capp-stat--citrus { background: var(--accent-citrus); }
.capp-stat--citrus .capp-stat-label { color: #22301F; }
.capp-stat--citrus .capp-stat-value { color: #22301F; font-weight: 500; }
.capp-stat--citrus .capp-stat-unit { color: rgba(34, 48, 31, 0.72); }

/* "Dein Tag" — Abschnittskopf */
.capp-day-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-3); margin: var(--space-5) 0 var(--space-4);
}
.capp-day-title {
    margin: 0;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
    letter-spacing: -0.02em; color: var(--text-primary);
}
.capp-day-link {
    font-size: var(--text-sm); font-weight: 600;
    color: var(--accent-primary); text-decoration: none; white-space: nowrap;
    transition: color var(--transition-fast);
}
.capp-day-link:hover { color: var(--accent-primary-hover); }

/* Mahlzeiten-Zustaende nach Tageszeit (nur visuell, per JS in index.html) */
.meal-card-new.meal-past { opacity: 0.62; }
.meal-card-new.meal-past:hover { opacity: 1; }
.meal-card-new.meal-now {
    border: 1.5px solid var(--accent-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.meal-card-new.meal-now .badge-cook { background: var(--accent-primary); color: var(--text-inverse); }

/* Check-in-Prompt — green-soft Karte, oeffnet das bestehende Modal */
.checkin-prompt {
    background: var(--accent-primary-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.checkin-prompt-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.checkin-prompt-title { font-weight: 700; font-size: var(--text-base); color: var(--accent-primary); }
.checkin-prompt-hint { font-size: var(--text-xs); color: var(--accent-primary-hover); white-space: nowrap; }
.checkin-prompt-text {
    margin: 0; max-width: 60ch;
    font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45;
}
.checkin-prompt-btn { align-self: flex-start; }

@media (max-width: 480px) {
    .capp-header { padding: var(--space-4); border-radius: var(--radius-lg); }
    .capp-stats { gap: var(--space-2); }
    .capp-stat { padding: var(--space-2); }
    .capp-stat-value { font-size: var(--text-sm); }
}


/* ============================================================================
   PLODDO — „Fresh Fuel" · Partial: KLIENTENPROFIL (App-Screen 4)
   Owner: clients surface (templates/clients/detail|list|edit.html).
   Hero mit Avatar-Kreis + Aktiv-Pill, Gewichtskurve mit Start/Aktuell/Ziel/
   Trend in Mono, Aktueller-Plan-Karte mit Adhärenz-Balken, Mono-Messwerte,
   Ausschluss-Tags als Checkbox-Pills (angehakt = tomato-soft, durchgestrichen).
   ============================================================================ */

/* Mono-Werte (kcal, kg, Datumsangaben) */
.mono-num { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   Hero — Avatar-Kreis (Initialen auf green-soft), Name in Bricolage,
   Aktiv-seit-Pill, Meta-Zeile (Ziel · kcal-Ziel · Trainer)
   ---------------------------------------------------------------------------- */
.client-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.client-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.client-hero__id { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-1); }
.client-hero__name-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.client-hero__name { margin: 0; font-size: 1.875rem; }
.client-active-pill {
    display: inline-flex;
    align-items: center;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.45em 1em;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.client-hero__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.client-hero__sep { color: var(--border-emphasis); }
.client-hero .action-group { margin-left: auto; }

/* ----------------------------------------------------------------------------
   Übersicht — Gewichtskurve links (1.7fr), Plan + Tagesziele rechts (1fr)
   ---------------------------------------------------------------------------- */
.client-overview { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-4); align-items: start; }
.client-overview > .card { margin-bottom: 0; }
.client-overview__side { display: flex; flex-direction: column; gap: var(--space-4); }
.client-overview__side .card { margin-bottom: 0; }
@media (max-width: 900px) { .client-overview { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   Gewichtskurve — grüne Linie, gestrichelte Citrus-Ziellinie (im JS),
   darunter Start / Aktuell / Ziel / Trend in Mono
   ---------------------------------------------------------------------------- */
.client-weight-card { box-shadow: var(--shadow-md); }
.client-weight-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.client-weight-card__now { display: flex; align-items: baseline; gap: var(--space-2); }
.client-weight-now {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.client-weight-now__unit { font-size: var(--text-base); font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.client-weight-delta {
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    padding: 0.3em 0.8em;
    border-radius: var(--radius-full);
}
.client-weight-card__empty { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-4) 0; }
.client-weight-facts { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); }
.client-weight-fact { display: flex; flex-direction: column; gap: 2px; }
.client-weight-fact--end { margin-left: auto; }
.client-weight-fact__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.client-weight-fact__value { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.client-weight-fact__value--goal { color: var(--warning); }
.client-weight-fact__value--trend { color: var(--accent-primary); }

/* ----------------------------------------------------------------------------
   Aktueller Plan — Karte mit Adhärenz-Balken (Belegung: Cook/Leftover-Slots)
   ---------------------------------------------------------------------------- */
.client-plan-card { display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--shadow-md); }
.client-plan-card__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.client-plan-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.client-plan-card__name { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); }
.client-plan-card__name:hover { color: var(--accent-primary); }
.client-plan-card__kcal { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.client-adherence-bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.client-adherence-bar__fill { height: 100%; background: var(--accent-primary); border-radius: var(--radius-full); transition: width var(--transition-base); }
.client-plan-card__caption { font-size: var(--text-sm); color: var(--text-muted); }
.client-plan-card__caption strong { color: var(--accent-primary); font-variant-numeric: tabular-nums; }
.client-plan-card__none { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.client-plan-card--empty .btn { align-self: flex-start; }

/* ----------------------------------------------------------------------------
   Messungen-Tabelle — Datum, Gewicht, Körperfett in Mono
   ---------------------------------------------------------------------------- */
.data-table--measurements td:nth-child(1),
.data-table--measurements td:nth-child(2),
.data-table--measurements td:nth-child(3) {
    font-family: var(--font-mono);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   Klientenliste — Avatar + Name in der ersten Spalte
   ---------------------------------------------------------------------------- */
.client-row-ident { display: inline-flex; align-items: center; gap: var(--space-3); }
.client-avatar--sm { width: 34px; height: 34px; font-size: 0.8rem; }
.client-row-ident a { font-weight: 600; color: var(--text-primary); }
.client-row-ident a:hover { color: var(--accent-primary); }

/* ----------------------------------------------------------------------------
   Ausschluss-Tags (edit.html) — Checkbox-Pills: neutral = Outline-Pill,
   angehakt = tomato-soft Hintergrund + durchgestrichen.
   Überschreibt bewusst die Basisregeln der Selfservice-Sektion weiter oben.
   ---------------------------------------------------------------------------- */
.excluded-tags-group { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-4); }
.excluded-tags-options { gap: var(--space-2); }
.excluded-tag-option {
    position: relative;
    padding: 0.45em 1.1em;
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 600;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.excluded-tag-option:hover { border-color: var(--danger); color: var(--danger); }
.excluded-tag-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.excluded-tag-option:has(input:checked) { background: var(--danger-muted); border-color: var(--danger); }
.excluded-tag-option:has(input:checked) span { color: var(--danger); font-weight: 700; text-decoration: line-through; }
.excluded-tag-option:has(input:focus-visible) { outline: 2.5px solid var(--accent-primary); outline-offset: 2px; }

/* ============================================================================
   SHARE-SEITEN & UPSELL — Fresh-Fuel-Komponenten (waren ungestylt)
   ========================================================================== */
.share-page { max-width: 560px; margin: var(--space-7) auto; padding: 0 var(--space-4); }
.share { background: var(--card-bg); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
.share-preview { background: var(--bg-muted); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0;
    font-family: var(--font-mono); font-size: var(--text-sm); white-space: pre-wrap;
    max-height: 340px; overflow-y: auto; color: var(--text-secondary); }
.share-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.share-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.4em;
    border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-base);
    color: #fff; text-decoration: none; transition: filter var(--transition-fast); }
.share-btn:hover { filter: brightness(1.08); color: #fff; }
.share-btn--whatsapp { background: #25D366; }
.share-btn--telegram { background: #2AABEE; }

.upgrade-banner { display: flex; align-items: center; gap: var(--space-3);
    background: var(--accent-citrus-soft); border: 1px solid color-mix(in srgb, var(--accent-citrus) 45%, transparent);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.upgrade-banner-icon { flex: none; color: var(--warning); display: flex; }
.upgrade-banner-text { font-size: var(--text-sm); color: var(--text-secondary); }
.upgrade-banner-text strong { color: var(--text-primary); }
.upgrade-card { background: var(--card-bg); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md);
    text-align: center; max-width: 420px; margin: var(--space-6) auto; }
.upgrade-card-icon { width: 52px; height: 52px; margin: 0 auto var(--space-3);
    display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full);
    background: var(--accent-primary-muted); color: var(--accent-primary); }
.upgrade-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
    color: var(--text-primary); margin-bottom: var(--space-2); }
.upgrade-card-description { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.upgrade-card-cta, .upgrade-card-btn { display: inline-flex; align-items: center; gap: 0.5em;
    background: var(--accent-primary); color: var(--text-inverse); font-weight: 600;
    padding: 0.72em 1.5em; border-radius: var(--radius-full); text-decoration: none;
    border: none; cursor: pointer; transition: background var(--transition-fast); }
.upgrade-card-cta:hover, .upgrade-card-btn:hover { background: var(--accent-primary-hover); color: var(--text-inverse); }