/* ==========================================================================
   Orbitra – Design-System
   Basis: Bootstrap 5.3 (Farbmodi hell/dunkel), eigene Tokens darüber.
   Schrift: Manrope (Google Fonts), Zahlen mit tabular-nums.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --o-bg: #f4f5fa;
    --o-surface: #ffffff;
    --o-surface-2: #eef0f7;
    --o-ink: #151a30;
    --o-ink-soft: #5d6483;
    --o-hairline: #e1e4ef;
    --o-primary: #4f46e5;
    --o-primary-soft: #e8e7fd;
    --o-accent: #f97316;
    --o-on-primary: #ffffff;

    /* Makro-Farben (überall gleich verwendet). Mit dem Palette-Validator
       auf Farbsehschwäche und Kontrast geprüft - nicht nach Gefühl ändern. */
    --o-kcal: #f97316;
    --o-protein: #4f46e5;
    --o-carbs: #0d9488;
    --o-fat: #ca8a04;

    --o-radius: 16px;
    --o-shadow: 0 1px 2px rgba(21, 26, 48, .04), 0 4px 16px rgba(21, 26, 48, .06);

    --bs-body-bg: var(--o-bg);
    --bs-body-color: var(--o-ink);
    --bs-secondary-color: var(--o-ink-soft);
    --bs-border-color: var(--o-hairline);
    --bs-primary: var(--o-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--o-primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #3f37c9;
    --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
    --o-bg: #0f1222;
    --o-surface: #181c33;
    --o-surface-2: #21264a;
    --o-ink: #eceefa;
    --o-ink-soft: #9aa0c3;
    --o-hairline: #2a3056;
    --o-primary: #8b85ff;
    --o-primary-soft: #2a2a5c;
    --o-on-primary: #0f1222;

    --o-protein: #7c74f2;
    --o-carbs: #0d9488;
    --o-fat: #b8860b;

    --o-shadow: 0 1px 2px rgba(0, 0, 0, .3);

    --bs-body-bg: var(--o-bg);
    --bs-body-color: var(--o-ink);
    --bs-secondary-color: var(--o-ink-soft);
    --bs-border-color: var(--o-hairline);
    --bs-primary-rgb: 139, 133, 255;
    --bs-link-color: var(--o-primary);
    --bs-link-color-rgb: 139, 133, 255;
    --bs-link-hover-color: #a9a4ff;
    --bs-tertiary-bg: var(--o-surface-2);
}

body {
    background: var(--o-bg);
    color: var(--o-ink);
    -webkit-font-smoothing: antialiased;
}

.num { font-variant-numeric: tabular-nums; }
.text-soft { color: var(--o-ink-soft) !important; }
.fw-800 { font-weight: 800; }

/* --- Navigation -------------------------------------------------------- */

.o-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--o-bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--o-hairline);
    padding-top: env(safe-area-inset-top);
}

.o-topbar .container { min-height: 56px; }

.o-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: var(--o-ink);
    text-decoration: none;
}
.o-brand img { width: 28px; height: 28px; }

.o-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    color: var(--o-ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}
.o-nav-link:hover { color: var(--o-ink); background: var(--o-surface-2); }
.o-nav-link.active { color: var(--o-primary); background: var(--o-primary-soft); }

.o-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--o-ink-soft);
    font-size: 1.15rem;
}
.o-icon-btn:hover { background: var(--o-surface-2); color: var(--o-ink); }

/* Untere Tab-Leiste nur auf dem Handy */
.o-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    background: color-mix(in srgb, var(--o-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--o-hairline);
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
}
.o-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .3rem 0;
    font-size: .7rem;
    font-weight: 600;
    color: var(--o-ink-soft);
    text-decoration: none;
    border-radius: 12px;
}
.o-tabbar a i { font-size: 1.3rem; }
.o-tabbar a.active { color: var(--o-primary); }

/* Abstand oben/unten selbst setzen (keine Bootstrap-py-Klassen: die haben
   !important und würden den Platz für die Tab-Leiste überschreiben) */
main.o-main { padding-top: 1rem; padding-bottom: 1.5rem; }
@media (min-width: 992px) {
    main.o-main { padding-top: 1.5rem; padding-bottom: 2rem; }
}
@media (max-width: 991.98px) {
    /* Platz für die fixierte Tab-Leiste unten inkl. iPhone-Home-Indikator */
    main.o-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* --- Karten & Bausteine -------------------------------------------------- */

.o-card {
    background: var(--o-surface);
    border: 1px solid var(--o-hairline);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow);
    padding: 1.1rem 1.15rem;
}
.o-card + .o-card { margin-top: .9rem; }
a.o-card { display: block; color: inherit; text-decoration: none; transition: transform .12s ease, border-color .12s ease; }
a.o-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--o-primary) 40%, var(--o-hairline)); }

.o-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.o-page-head h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

.o-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--o-ink-soft);
}

.o-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.o-stat-unit { font-size: .85rem; font-weight: 600; color: var(--o-ink-soft); margin-left: .15rem; }

.o-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--o-primary-soft);
    color: var(--o-primary);
    flex-shrink: 0;
}
.o-app-icon.is-orange { background: color-mix(in srgb, var(--o-accent) 16%, transparent); color: var(--o-accent); }

/* Segment-Navigation innerhalb einer App (Tagebuch / Statistik / ...) */
.o-segments {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--o-surface-2);
    border-radius: 999px;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.o-segments a {
    flex: 1;
    white-space: nowrap;
    text-align: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--o-ink-soft);
    text-decoration: none;
}
.o-segments a.active { background: var(--o-surface); color: var(--o-ink); box-shadow: var(--o-shadow); }

/* Buttons */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary {
    --bs-btn-color: var(--o-on-primary);
    --bs-btn-hover-color: var(--o-on-primary);
    --bs-btn-active-color: var(--o-on-primary);
    --bs-btn-bg: var(--o-primary);
    --bs-btn-border-color: var(--o-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--o-primary) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--o-primary) 88%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--o-primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--o-primary) 80%, black);
}
.btn-soft {
    background: var(--o-primary-soft);
    color: var(--o-primary);
    border: 0;
}
.btn-soft.active { background: var(--o-primary); color: var(--o-on-primary); }
.btn-soft:hover, .btn-soft:focus { background: color-mix(in srgb, var(--o-primary) 22%, transparent); color: var(--o-primary); }

.form-control, .form-select {
    border-radius: 12px;
    padding: .6rem .8rem;
    background-color: var(--o-surface);
    border-color: var(--o-hairline);
}
.form-control:focus, .form-select:focus {
    border-color: var(--o-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--o-primary) 20%, transparent);
}
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }

/* Chips (z.B. Mahlzeit-Auswahl) */
.o-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.o-chips input { position: absolute; opacity: 0; pointer-events: none; }
.o-chips label {
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--o-hairline);
    background: var(--o-surface);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    user-select: none;
}
.o-chips input:checked + label { background: var(--o-primary); border-color: var(--o-primary); color: var(--o-on-primary); }
.o-chips input:focus-visible + label { outline: 2px solid var(--o-primary); outline-offset: 2px; }

/* Meldungen */
.o-toast {
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    background: var(--o-surface);
    border: 1px solid var(--o-hairline);
    border-left: 4px solid var(--o-primary);
    box-shadow: var(--o-shadow);
    font-weight: 600;
    font-size: .92rem;
}
.o-toast.is-error { border-left-color: #dc2626; }

/* --- Ernährung ----------------------------------------------------------- */

.o-daynav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}
.o-daynav .o-day-title { text-align: center; line-height: 1.15; }
.o-daynav .o-day-title strong { display: block; font-size: 1.15rem; font-weight: 800; }

.o-macro-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--o-surface-2);
}
.o-macro-bar span { display: block; height: 100%; }

.o-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: middle;
}
.bg-kcal { background: var(--o-kcal); }
.bg-protein { background: var(--o-protein); }
.bg-carbs { background: var(--o-carbs); }
.bg-fat { background: var(--o-fat); }

.o-macros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .9rem;
}
.o-macros.is-4 { grid-template-columns: repeat(4, 1fr); }
.o-macros > div { font-size: .8rem; color: var(--o-ink-soft); font-weight: 600; }
.o-macros strong { display: block; font-size: 1.05rem; color: var(--o-ink); font-variant-numeric: tabular-nums; }

.o-meal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.o-meal-head h2 { font-size: 1.02rem; font-weight: 800; margin: 0; }

.o-entry {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-top: 1px solid var(--o-hairline);
    color: inherit;
    text-decoration: none;
}
.o-entry:first-of-type { margin-top: .65rem; }
.o-entry:hover .o-entry-name { color: var(--o-primary); }
.o-entry-name { font-weight: 600; line-height: 1.25; }
.o-entry-meta { font-size: .8rem; color: var(--o-ink-soft); font-variant-numeric: tabular-nums; }
.o-entry-kcal { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mini-Wochenbalken */
.o-week { display: flex; align-items: flex-end; gap: .4rem; height: 72px; }
.o-week a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: .25rem;
    text-decoration: none;
    color: var(--o-ink-soft);
    font-size: .68rem;
    font-weight: 700;
}
.o-week .bar {
    width: 100%;
    max-width: 28px;
    border-radius: 6px 6px 3px 3px;
    background: color-mix(in srgb, var(--o-kcal) 35%, var(--o-surface-2));
    min-height: 3px;
}
.o-week a.is-current { color: var(--o-ink); }
.o-week a.is-current .bar { background: var(--o-kcal); }

/* Lebensmittel-Auswahl im Eintragsformular */
.o-food-list {
    position: relative;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--o-hairline);
    border-radius: 12px;
    background: var(--o-surface);
}
.o-food-option { display: block; margin: 0; cursor: pointer; }
.o-food-option input { position: absolute; opacity: 0; pointer-events: none; }
.o-food-option .o-food-body {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--o-hairline);
}
.o-food-option:last-child .o-food-body { border-bottom: 0; }
.o-food-option input:checked + .o-food-body {
    background: var(--o-primary-soft);
    box-shadow: inset 3px 0 0 var(--o-primary);
}
.o-food-option input:focus-visible + .o-food-body { outline: 2px solid var(--o-primary); outline-offset: -2px; }
.o-food-option .o-food-name { font-weight: 600; }
.o-food-option .o-food-meta { font-size: .78rem; color: var(--o-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Treffer aus Open Food Facts (Buttons statt Radio) */
.o-off-hit { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.o-off-hit:hover .o-food-body, .o-off-hit:focus-visible .o-food-body { background: var(--o-primary-soft); }
.o-off-hit .o-food-meta { white-space: normal; text-align: right; }

/* Strichcode-Scanner */
.o-scan {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 12, 24, .72);
}
.o-scan-box {
    width: 100%;
    max-width: 440px;
    padding: 1rem;
    border-radius: var(--o-radius);
    background: var(--o-surface);
    box-shadow: var(--o-shadow);
}
.o-scan-reader { overflow: hidden; border-radius: 12px; background: #000; min-height: 200px; }
.o-scan-reader video { display: block; width: 100% !important; height: auto !important; }

.o-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    text-align: center;
    padding: .75rem;
    border-radius: 12px;
    background: var(--o-surface-2);
}
.o-preview strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.o-preview small { font-size: .72rem; color: var(--o-ink-soft); font-weight: 600; }

/* Sticky Speichern-Leiste auf dem Handy */
@media (max-width: 991.98px) {
    .o-form-actions {
        position: sticky;
        bottom: calc(76px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--o-bg) 92%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: .75rem 0;
        margin-top: 1rem;
        z-index: 5;
    }
}

/* Tabellen */
.o-table { width: 100%; font-size: .92rem; }
.o-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--o-ink-soft);
    font-weight: 700;
    padding: .5rem .5rem;
    border-bottom: 1px solid var(--o-hairline);
}
.o-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--o-hairline); vertical-align: middle; }
.o-table tr:last-child td { border-bottom: 0; }
.o-table a { color: inherit; text-decoration: none; font-weight: 600; }
.o-table a:hover { color: var(--o-primary); }

/* Login */
.o-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(60rem 40rem at 110% -10%, color-mix(in srgb, var(--o-primary) 22%, transparent), transparent 60%),
        radial-gradient(40rem 30rem at -20% 110%, color-mix(in srgb, var(--o-accent) 14%, transparent), transparent 60%),
        var(--o-bg);
}
.o-login .o-card { width: 100%; max-width: 380px; padding: 2rem 1.75rem; }

/* --- Suchfeld mit Vorschlägen (static/js/autocomplete.js) ----------------- */

.o-ac { position: relative; }
.o-ac-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 320px;
    overflow-y: auto;
    background: var(--o-surface);
    border: 1px solid var(--o-hairline);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    padding: .25rem;
}
.o-ac-menu.show { display: block; }
.o-ac-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--o-ink);
    padding: .5rem .6rem;
    border-radius: 8px;
}
.o-ac-item:hover, .o-ac-item.active { background: var(--o-surface-2); }
.o-ac-item img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; flex-shrink: 0; }
.o-ac-item strong { display: block; font-weight: 600; font-size: .92rem; }
.o-ac-item small { display: block; color: var(--o-ink-soft); font-size: .76rem; }
.o-ac-empty { padding: .6rem; color: var(--o-ink-soft); font-size: .88rem; }
.o-ac.is-invalid .form-control { border-color: #dc2626; }

/* --- Flüge ---------------------------------------------------------------- */

/* Logos sind PNGs auf weissem Grund - im Dark Mode auf heller Kachel zeigen */
.o-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
    border: 1px solid var(--o-hairline);
}
.o-logo-lg {
    width: 150px;
    height: 100px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    padding: 8px;
    border: 1px solid var(--o-hairline);
}
.o-route { font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.o-route .bi { font-size: .8em; color: var(--o-ink-soft); margin: 0 .2rem; }

#flight-map {
    height: clamp(320px, 60vh, 640px);
    border-radius: var(--o-radius);
    border: 1px solid var(--o-hairline);
    z-index: 0;
}
#flight-map.leaflet-container { font-family: inherit; background: var(--o-surface-2); }
.leaflet-tooltip { font-family: inherit; font-size: .82rem; }

.o-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.o-filter .form-select { width: auto; min-width: 0; flex: 1 1 140px; }

.o-rank { list-style: none; padding: 0; margin: 0; }
.o-rank li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-top: 1px solid var(--o-hairline);
    font-size: .92rem;
}
.o-rank li:first-child { border-top: 0; }
.o-rank .o-rank-n { margin-left: auto; font-weight: 700; color: var(--o-ink-soft); font-variant-numeric: tabular-nums; }
.o-rank .o-rank-pos { width: 1.2rem; color: var(--o-ink-soft); font-weight: 700; font-size: .8rem; }

.o-airline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.o-airline-tile { text-align: center; padding: .9rem; }
.o-airline-tile .name { font-weight: 700; font-size: .9rem; margin-top: .5rem; line-height: 1.2; }

.min-w-0 { min-width: 0; }
.o-airline-grid .o-card + .o-card { margin-top: 0; }
.o-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--o-primary-soft);
    color: var(--o-primary);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .02em;
}
.o-logo-lg.o-logo-text { font-size: 2rem; }
.o-airline-tile .o-logo-lg { width: 100%; height: 70px; }
.o-map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }

/* Aktive Filter */
.o-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .55rem .3rem .8rem;
    border-radius: 999px;
    background: var(--o-primary-soft);
    color: var(--o-primary);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
}
.o-chip:hover { background: color-mix(in srgb, var(--o-primary) 22%, transparent); color: var(--o-primary); }

/* Klickbare Top-Listen */
.o-rank a.o-rank-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.o-rank a.o-rank-link:hover .o-rank-label { color: var(--o-primary); }
.o-rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-rank details > summary { list-style: none; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--o-primary); padding-top: .5rem; }
.o-rank details > summary::-webkit-details-marker { display: none; }
.o-more > summary { list-style: none; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--o-primary); padding-top: .5rem; }
.o-more > summary::-webkit-details-marker { display: none; }
.o-more[open] > summary .when-closed, .o-more:not([open]) > summary .when-open { display: none; }

/* Distanzklassen (geordnet: hell -> dunkel, eine Farbe) */
.o-band-1 { background: color-mix(in srgb, var(--o-primary) 35%, var(--o-surface)); }
.o-band-2 { background: color-mix(in srgb, var(--o-primary) 65%, var(--o-surface)); }
.o-band-3 { background: var(--o-primary); }
.o-flag { font-size: 1.15rem; line-height: 1; }
.o-focus-icon { width: 64px; height: 64px; font-size: 1.9rem; border-radius: 18px; }

.o-map-legend { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.o-map-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.o-map-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--o-primary); }
.o-map-error {
    position: absolute; inset: auto 12px 12px 12px; z-index: 500;
    background: var(--o-surface); border: 1px solid var(--o-hairline); border-radius: 10px;
    padding: .5rem .75rem; font-size: .85rem;
}

/* --- Japanisch -------------------------------------------------------------- */

/* Zweite Diagrammfarbe neben --o-primary (Paar auf Farbsehschwäche geprüft) */
:root { --o-series-2: #ea580c; }

/* SRS-Stufen: geordnet, eine Farbe von hell (Apprentice) bis kräftig (Burned) */
.srs-apprentice { --srs: color-mix(in srgb, var(--o-primary) 22%, var(--o-surface)); }
.srs-guru { --srs: color-mix(in srgb, var(--o-primary) 42%, var(--o-surface)); }
.srs-master { --srs: color-mix(in srgb, var(--o-primary) 62%, var(--o-surface)); }
.srs-enlightened { --srs: color-mix(in srgb, var(--o-primary) 82%, var(--o-surface)); }
.srs-burned { --srs: var(--o-primary); }
.srs-lesson, .srs-locked { --srs: var(--o-surface-2); }
.srs-bg { background: var(--srs); }

.o-srs-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--o-surface-2); }
.o-srs-bar span { display: block; height: 100%; background: var(--srs); }

.o-kanji-level { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--o-hairline); }
.o-kanji-level:first-child { border-top: 0; }
.o-kanji-level > .lv { width: 2rem; flex-shrink: 0; font-weight: 800; color: var(--o-ink-soft); font-size: .85rem; padding-top: .3rem; }
.o-kanji-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.o-kanji {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    background: var(--srs);
    color: var(--o-ink);
}
.o-kanji.srs-enlightened, .o-kanji.srs-burned { color: var(--o-on-primary); }
.o-kanji.srs-locked { color: var(--o-ink-soft); opacity: .55; }
.o-kanji:hover { outline: 2px solid var(--o-primary); outline-offset: 1px; }

.o-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--o-ink-soft); }
.o-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.o-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--srs); display: inline-block; border: 1px solid var(--o-hairline); }

.o-progress { height: 10px; border-radius: 999px; background: var(--o-surface-2); overflow: hidden; }
.o-progress > span { display: block; height: 100%; background: var(--o-primary); border-radius: 999px; }

.o-minutes { display: flex; flex-wrap: wrap; gap: .35rem; }
.o-minutes button { min-width: 3.2rem; }

.o-genki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.o-genki-lesson {
    width: 100%;
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    padding: .6rem .75rem;
    border-radius: 12px;
    border: 1px solid var(--o-hairline);
    background: var(--o-surface);
    color: var(--o-ink);
    text-align: left;
}
.o-genki-lesson .num { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.o-genki-lesson .state { font-size: .78rem; font-weight: 600; color: var(--o-ink-soft); }
.o-genki-lesson.is-active { border-color: var(--o-primary); box-shadow: inset 0 0 0 1px var(--o-primary); }
.o-genki-lesson.is-active .state { color: var(--o-primary); }
.o-genki-lesson.is-done { background: var(--o-primary); border-color: var(--o-primary); color: var(--o-on-primary); }
.o-genki-lesson.is-done .state { color: var(--o-on-primary); }

.o-week-study .bar { background: var(--o-surface-2); }
.o-week-study .bar.has-value { background: var(--o-primary); }
@media (max-width: 575.98px) {
    .o-segments a { padding: .45rem .55rem; font-size: .84rem; }
}

/* Popover mit Kanji-Details (static/js/wk-popover.js) */
.o-popover {
    --bs-popover-max-width: 320px;
    --bs-popover-bg: var(--o-surface);
    --bs-popover-border-color: var(--o-hairline);
    --bs-popover-body-padding-x: .9rem;
    --bs-popover-body-padding-y: .8rem;
    --bs-popover-body-color: var(--o-ink);
    --bs-popover-border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-size: .88rem;
}
.o-pop-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .6rem; }
.o-pop-char {
    white-space: nowrap;
    min-width: 52px; height: 52px; padding: 0 .4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--srs); font-size: 1.7rem;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
.o-pop-char.srs-enlightened, .o-pop-char.srs-burned { color: var(--o-on-primary); }
.o-pop-row { display: flex; gap: .6rem; padding: .25rem 0; border-top: 1px solid var(--o-hairline); }
.o-pop-row > span:first-child { width: 4.2rem; flex-shrink: 0; color: var(--o-ink-soft); }
.o-pop-block { padding-top: .45rem; border-top: 1px solid var(--o-hairline); margin-top: .1rem; }
.o-pop-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 .3rem; margin: 0 .2rem .2rem 0;
    border-radius: 7px; background: var(--srs);
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
.o-pop-chip.srs-enlightened, .o-pop-chip.srs-burned { color: var(--o-on-primary); }
.o-pop-link { display: inline-block; margin-top: .5rem; font-weight: 700; font-size: .85rem; }
[data-subject] { cursor: pointer; }

/* Problem-Items */
.o-leech-char {
    white-space: nowrap;
    min-width: 44px; height: 44px; padding: 0 .4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--o-surface-2); font-size: 1.2rem;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
    flex-shrink: 0;
}

/* Wiedereinstiegs-Ampel (Statusfarben nur hier, immer mit Symbol + Text) */
:root { --o-good: #15803d; --o-warn: #b45309; --o-bad: #b91c1c; }
[data-bs-theme="dark"] { --o-good: #4ade80; --o-warn: #fbbf24; --o-bad: #f87171; }
.o-pacing { border-left: 4px solid var(--o-status); }
.o-pacing.is-green { --o-status: var(--o-good); }
.o-pacing.is-yellow { --o-status: var(--o-warn); }
.o-pacing.is-red { --o-status: var(--o-bad); }
.o-pacing-icon { font-size: 1.6rem; color: var(--o-status); line-height: 1; }
.o-pacing-bar { position: relative; overflow: visible; }
.o-pacing-bar > span { background: var(--o-status); }
.o-pacing-bar > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--o-ink-soft); border-radius: 1px; }

/* Verwechslungspaare */
.o-confusion { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.o-confusion-card {
    flex: 1 1 120px; max-width: 180px;
    border: 1px solid var(--o-hairline); border-radius: 12px; padding: .6rem; text-align: center;
    background: var(--o-surface);
}
.o-confusion-card.is-main { border-color: var(--o-bad); box-shadow: inset 0 0 0 1px var(--o-bad); }
.o-confusion-card .o-kanji { width: 52px; height: 52px; font-size: 1.8rem; margin-bottom: .3rem; }
.o-confusion-card .m { font-weight: 700; font-size: .85rem; line-height: 1.2; }
.o-confusion-card .r { font-size: .85rem; color: var(--o-ink-soft); }
.o-confusion-card .a { font-size: .75rem; color: var(--o-ink-soft); margin-top: .2rem; }

/* Beispielsätze im Popover */
.o-pop-sentence { margin-bottom: .35rem; }
.o-pop-sentence .ja { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }
.o-pop-sentence .en { font-size: .8rem; color: var(--o-ink-soft); }

/* Fortschritt zu Ernährungszielen */
.o-goal { --goal: var(--o-primary); }
.o-goal.is-good { --goal: var(--o-good); }
.o-goal.is-warn { --goal: var(--o-warn); }
.o-goal .o-progress > span { background: var(--goal); }
.o-goal-text { font-weight: 600; color: var(--o-ink-soft); white-space: nowrap; }
.o-goal.is-good .o-goal-text, .o-goal.is-warn .o-goal-text { color: var(--goal); }

/* Unter-Navigation im WaniKani-Bereich */
.o-subnav { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: -.25rem 0 1rem; }
.o-subnav a {
    white-space: nowrap; padding: .35rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    color: var(--o-ink-soft); text-decoration: none; border: 1px solid var(--o-hairline); background: var(--o-surface);
}
.o-subnav a.active { color: var(--o-primary); border-color: var(--o-primary); background: var(--o-primary-soft); }

/* Text-Check */
.o-tc-text { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-size: 1.25rem; line-height: 2.1; word-break: break-all; }
.o-tc { background: var(--srs); border-radius: 5px; padding: .05em .12em; margin: 0 .03em; }
.o-tc.srs-enlightened, .o-tc.srs-burned { color: var(--o-on-primary); }
.o-tc.is-not-wk, .o-kanji.is-not-wk { background: transparent; outline: 1px dashed var(--o-ink-soft); outline-offset: -1px; }
.tc-not-wk-legend i { background: transparent !important; border: 1px dashed var(--o-ink-soft) !important; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.o-leech-char.srs-bg { background: var(--srs); }
.o-leech-char.srs-enlightened, .o-leech-char.srs-burned { color: var(--o-on-primary); }

/* --- Finanzen --------------------------------------------------------------- */
.o-fin-plus { color: var(--o-good); }
.o-fin-cat { padding: .45rem 0; border-top: 1px solid var(--o-hairline); }
.o-fin-cat:first-of-type { border-top: 0; }
.o-fin-subs { list-style: none; padding: .4rem 0 0 .75rem; margin: 0; font-size: .85rem; }
.o-fin-subs li { display: flex; justify-content: space-between; padding: .15rem 0; color: var(--o-ink-soft); }
.o-fin-rate { background: var(--o-surface-2); border-radius: 12px; padding: .6rem .75rem; }
.o-fin-tree { padding: .6rem 0; border-top: 1px solid var(--o-hairline); }
.o-meal-head + .o-fin-tree { border-top: 0; margin-top: .5rem; }
.o-fin-tree.is-inactive { opacity: .55; }
/* Kategorie × Monat: Hintergrund je nach Betrag (eine Farbe, hell -> kräftig) */
.o-heat td[style*="--shade"] { background: color-mix(in srgb, var(--o-primary) calc(var(--shade) * 55%), transparent); }
.o-heat th, .o-heat td { white-space: nowrap; font-size: .82rem; padding: .45rem .4rem; }
.o-heat tbody td:first-child { position: sticky; left: 0; background: var(--o-surface); z-index: 1; }
.o-heat a { color: inherit; text-decoration: none; display: block; }
.o-heat td a:hover, .o-heat th a:hover { text-decoration: underline; }
.o-heat .is-sel { outline: 2px solid var(--o-accent); outline-offset: -2px; border-radius: 4px; }
.o-heat th a.is-sel { color: var(--o-accent); }
#buchungen { scroll-margin-top: 70px; }

/* Mini-Verlauf pro Kategorie (Statistik) */
.o-spark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.o-spark-card { border: 1px solid var(--o-hairline); border-radius: 12px; padding: .6rem .7rem; min-width: 0; }
.o-spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: .45rem 0 .25rem; }
.o-spark a { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
.o-spark a:hover { background: var(--o-surface-2); }
.o-spark a span { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--o-primary); }
.o-spark a.is-out span { background: var(--o-series-2); }
.o-spark a.is-empty span { background: var(--o-hairline); }
.o-spark-legend { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--o-series-2); vertical-align: -1px; }
.o-fin-home { position: relative; overflow: visible; }
.o-fin-home > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--o-ink-soft); border-radius: 1px; }

/* Habits */
.o-habit-list { padding: .35rem; }
.o-habit {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .65rem .6rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    text-align: left;
    font: inherit;
}
.o-habit:hover { background: var(--o-surface-2); }
.o-habit:focus-visible { outline: 2px solid var(--o-primary); outline-offset: -2px; }
.o-habit-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--o-surface-2);
    color: var(--o-ink-soft);
}
.o-habit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.o-habit-name { font-weight: 700; }
.o-habit-goal { font-weight: 500; font-size: .78rem; color: var(--o-ink-soft); }
.o-habit-meta { font-size: .8rem; color: var(--o-ink-soft); }
.o-habit-check {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid var(--o-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 1.1rem;
    transition: background .15s, border-color .15s;
}
.o-habit.is-done .o-habit-check { background: var(--o-primary); border-color: var(--o-primary); color: var(--o-on-primary); }
.o-habit.is-done .o-habit-icon { background: var(--o-primary-soft); color: var(--o-primary); }
.o-habit-streak { font-weight: 800; white-space: nowrap; color: var(--o-accent); }

.o-hgrid {
    display: grid;
    grid-template-columns: 1.6rem repeat(var(--weeks), minmax(0, 1fr));
    gap: 4px;
    align-items: center;
}
.o-hgrid-head, .o-hgrid-day, .o-hgrid-foot { font-size: .68rem; color: var(--o-ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.o-hgrid-day { text-align: left; }
.o-hgrid-foot.is-met { color: var(--o-primary); font-weight: 800; }
.o-hcell {
    display: block;
    width: 100%;
    max-width: 1.6rem;
    justify-self: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--o-surface-2);
}
.o-hcell.is-done { background: var(--o-primary); }
.o-hcell.is-day { box-shadow: 0 0 0 2px var(--o-ink-soft); }
.o-hcell.is-future { background: none; border: 1px dashed var(--o-hairline); }
button.o-hcell:focus-visible { outline: 2px solid var(--o-primary); outline-offset: 1px; }

.o-icon-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
.o-icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.o-icon-pick label {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid var(--o-hairline);
    background: var(--o-surface);
    cursor: pointer;
}
.o-icon-pick input:checked + label { background: var(--o-primary); border-color: var(--o-primary); color: var(--o-on-primary); }
.o-icon-pick input:focus-visible + label { outline: 2px solid var(--o-primary); outline-offset: 2px; }