:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --accent: #ff9800;
    --safe: #4caf50;
    --warning: #ffeb3b;
    --danger: #f44336;
    --border: #2c2c2c;
    /* Typografie-Tokens (Issue #18, reizarm): große Zeilenabstände, minimaler
       Buchstabenabstand, Basis-Schriftgewicht (500 nur im Minimal-Kontrast-Theme) */
    --line-height-base: 1.6;
    --letter-spacing: 0.02em;
    --font-weight-base: 400;
    --font-weight-strong: 600;
}

/* =========================================================
   KURATIERTE THEMES (Issue #18, Pro) – Token-Umschaltung.
   Jedes Theme setzt nur die Farb-Tokens neu; Struktur, Formcodierung
   (#25-Graustufen-Robustheit) und Layout bleiben identisch.
   Die Hex-Werte stammen aus der Designer-Freigabe (siehe Issue #18).
   ========================================================= */

/* Dark Mode (Salbei) – verhindert Einbrenneffekt, warmes Dunkelgrau */
body.theme-dark-salbei {
    --bg-color: #1C1E1B;
    --card-bg: #23261F;
    --text-color: #A2B79D;
    --text-muted: #7E8F7A;
    --accent: #A2B79D;
    --safe: #A2B79D;
    --warning: #C9D1B8;
    --danger: #8F9B8C;
    --border: #2F332C;
}

/* Light Mode (Sepia) – kein Blaulicht, wie Papier eines alten Buchs (Halation) */
body.theme-light-sepia {
    --bg-color: #EFEAD8;
    --card-bg: #E6DFC9;
    --text-color: #3D2E27;
    --text-muted: #6B5A4E;
    --accent: #8A6D4F;
    --safe: #6B7A4F;
    --warning: #A38A3D;
    --danger: #9C4A3A;
    --border: #D8CFB8;
}

/* Nacht-Modus (Schieferblau/Lavendel) – Ruhe-Signal, pulssenkend */
body.theme-night-lavendel {
    --bg-color: #1A2129;
    --card-bg: #212A35;
    --text-color: #ABA6BA;
    --text-muted: #7E7A90;
    --accent: #ABA6BA;
    --safe: #8F97A8;
    --warning: #B5B0A8;
    --danger: #968E9E;
    --border: #2A3440;
}

/* Minimal-Kontrast (Nebelgrau/Schiefergrau) – extrem niedriger
   Luminanzkontrast; wegen geringer Helligkeitsdifferenz gilt die
   Font-Weight-500-Regel (Designer-Vorgabe Issue #18) */
body.theme-minimal-kontrast {
    --bg-color: #7A7D80;
    --card-bg: #82858A;
    --text-color: #2C2E30;
    --text-muted: #464A4D;
    --accent: #3A3E42;
    --safe: #3D4247;
    --warning: #33383D;
    --danger: #2A2C2F;
    --border: #8B8E93;
    --font-weight-base: 500;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent;
    line-height: var(--line-height-base, 1.6);
    letter-spacing: var(--letter-spacing, 0.02em);
    font-weight: var(--font-weight-base, 400);
}

html {
    touch-action: manipulation;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 80px;
}

h1, h2, h3 {
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
h2 { font-size: 1.1rem; margin-top: 8px; }

/* Unauffälliger Versionstempel unter der Überschrift (z. B. "v3 · 20261028.0953") */
.version-stamp {
    font-size: 0.7rem;
    color: #6a6a6a;
    margin: -8px 0 12px 0;
}

/* Tageszeit-Auswahl (Morgen/Mittag/Abend) */
.slot-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
}

/* Optionalle Vitalwerte (Ruhepuls/HRV) */
/* v61 (Owner-Spec: Tabelle, 5 Spalten, 30/5/30/5/30):
   Vitalwerte sitzen IMMER in den Inhalts-Spalten 1, 3, 5 - nie in den
   Luecken-Spalten. Auch bei 2 Werten bleibt dia in Spalte 3 (Raster haelt),
   linksbuendig wie in der ASCII-Zeichnung. */
.vitals-row {
    display: grid;
    grid-template-columns: 30% 5% 30% 5% 30%;
    margin-top: 4px;
}

/* v54: Alt-Regel v44 entfernt (stand spaeter in Datei, uebertoente per Kaskade die
   Umbruch-Regeln -> 'Puls (manuelle Messung)' wurde abgeschnitten). */
/* v52 (Owner-Anweisung): ALLE Vitalwerte-Felder EINE einheitliche Breite,
   Referenz = "(manuelle Messung)" (~24 Zeichen, laengstes Label de/en).
   Kein Landluicken-Schema, keine Ausnahmen. */
.vitals-field {
    min-width: 0;        /* erlaubt Grid-Verteilung; Inhalt skaliert mit Spalte */
}

/* v52 (Owner-Anweisung): Labels IMMER 2-zeilig ausgegeben - einheitliches
   Erscheinungsbild, kein Abschneiden, bis auf explizite Widerrufung */
.vitals-field label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    /* v61 (Owner): Worttrennung unterbinden - Bindestriche/Umbruch mitten
       im Wort sind unleserlich; Umbrechen nur an Natuerlichen Grenzen */
    hyphens: none;
    -webkit-hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: normal;      /* Zeilenumbruch zwischen Woertern erlaubt */
}

.vitals-input {
    width: 100%;              /* v61: fuellt seine 30%-Spalte */
    max-width: 84px;           /* 3-stellige Werte brauchen nicht mehr */
    padding: 10px 12px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
}

/* Nacht-Modus Wach-Taps (Issue #15): zwei grosse Buttons, Sofort-Speichern,
   kein Rating (Bewertung bleibt am Morgen). Statisch, reizarm. */
.night-tap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.night-tap-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.night-tap-btn svg {
    width: 46px;
    height: 46px;
    color: var(--accent);
}

#night-counter {
    margin-top: 10px;
    text-align: center;
}

#btn-night-end {
    display: block;
    margin: 14px auto 0;
}

/* Nebenerscheinungen-Auswahl (Issue #13, Pro): Chip-Grid mit Designer-Icons.
   Reizarm: statisch, keine Animation; Auswahl nur per Rahmen/Akzentfarbe. */
.symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.symptom-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: center;
}

.symptom-chip svg {
    width: 44px;
    height: 44px;
    color: var(--text-muted);
}

/* Akzent-Teile der Symptom-Icons: CSS-Klassen statt var()-Attribute
   (var() in SVG-Attributen wird von Browsern nicht aufgeloest) */
.symptom-chip svg .acc-fill, .icon-inline.acc-svg .acc-fill, svg .acc-fill {
    fill: var(--accent);
}

.symptom-chip svg .acc-stroke, .icon-inline.acc-svg .acc-stroke, svg .acc-stroke {
    stroke: var(--accent);
}

/* Grau-Teile der Designer-Icons (Inline-Varianten, z. B. Slider-Labels) */
svg .icon-stroke {
    stroke: currentColor;
}

svg .icon-fill {
    fill: currentColor;
}

.pem-icon {
    width: 26px;
    height: 26px;
    vertical-align: -6px;
    margin-right: 4px;
}

.symptom-chip.selected {
    border-color: var(--accent);
    color: var(--accent);
    border-style: solid;
    border-width: 2px;
    font-weight: 600;
}

.symptom-chip.selected svg {
    color: var(--accent);
}

/* Zusammenfassung nach dem Speichern (Issue #24): Werte-Liste + Aktions-Buttons */
.done-summary {
    margin: 8px 0 4px;
}

.done-row {
    padding: 6px 10px;
    margin-bottom: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
}

.done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

#fg-note-edit,
#fg-edit-older {
    margin-top: 8px;
}

#fg-edit-older label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

/* Optionales Notizfeld nach dem Speichern (Issue #12) – reizarm, mehrzeilig */
.note-input {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

/* =========================================================
 * Import-Assistent (import.html) – reizarm, ein Schritt pro Bildschirm
 * ========================================================= */
.wizard-body {
    padding-bottom: 24px;
}

.wiz-screen {
    display: none;
}

.wiz-screen.active {
    display: block;
}

.wiz-vendor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.wiz-vendor {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
    cursor: pointer;
}

.wiz-vendor svg {
    width: 34px;
    height: 34px;
    color: var(--accent);
}

.wiz-steps {
    margin: 12px 0 20px 0;
}

.wiz-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.wiz-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-strong, 600);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.wiz-step-text {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.4;
}

.wiz-main-btn {
    margin-bottom: 8px;
}

.wiz-back {
    margin-top: 0;
}

.wiz-share-note {
    margin-bottom: 12px;
}

.wiz-progress {
    margin-top: 16px;
}

.wiz-result-preview {
    margin: 12px 0;
    padding: 12px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--safe);
}

.hidden {
    display: none;
}

/* Heatmap-Tagesklassen (Designer-Vorlage) */
.day-safe { background: rgba(76, 175, 80, 0.25); color: var(--safe); border: 1px solid rgba(76, 175, 80, 0.4); }
.day-warning { background: rgba(255, 235, 59, 0.2); color: var(--warning); border: 1px solid rgba(255, 235, 59, 0.3); }
.day-danger { background: rgba(244, 67, 54, 0.25); color: var(--danger); border: 1px solid rgba(244, 67, 54, 0.4); }

/* Graustufen-Redundanz (Issue #25, Android Bedtime-Modus):
   Der Graufilter des Smartphones nutzt relative Luminanz – Safe-Gruen und
   Danger-Rot liegen dort fast identisch (Kontrast 1.32:1). Zusätzlich zur Farbe
   bekommt jede Risikostufe eine unterscheidbare RAHMEN-Form:
   LOW = duenner Rahmen, MEDIUM = gestrichelt, HIGH = doppelt. */
.day-safe { border-width: 1px; border-style: solid; }
.day-warning { border-style: dashed; }
.day-danger { border-style: double; border-width: 3px; }

.risk-LOW { border-left: 3px solid var(--safe); }
.risk-MEDIUM { border-left: 3px dashed var(--warning); }
.risk-HIGH { border-left: 4px double var(--danger); }

/* Icons in Labels und Tab-Bar (Designer-SVGs, inline verwendet) */
.icon-inline {
    vertical-align: middle;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.logo-header {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Tab-Buttons mit Icon + Text */
.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 4px;
    width: auto;
    font-weight: normal;
    cursor: pointer;
    flex: 1;
}

.tab-btn svg {
    width: 22px;
    height: 22px;
}

/* PEM-Checkbox mit Erklärung */
.pem-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 4px;
}

.pem-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--danger);
    cursor: pointer;
}

/* PEM-Verlauf in der Auswertung */
.pem-list {
    margin-top: 8px;
    font-size: 0.85rem;
}

.pem-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
}

.hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--border);
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.slider-val {
    font-size: 1rem;
    font-weight: var(--font-weight-strong, 600);
    min-width: 28px;
    text-align: right;
    color: var(--accent);
}

.risk-indicator {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: var(--font-weight-strong, 600);
    font-size: 0.9rem;
    margin-top: 4px;
}

.risk-LOW { background: rgba(76, 175, 80, 0.2); color: var(--safe); }
.risk-MEDIUM { background: rgba(255, 235, 59, 0.2); color: var(--warning); }
.risk-HIGH { background: rgba(244, 67, 54, 0.2); color: var(--danger); }

.risk-description {
    font-size: 0.85rem;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.3;
}

button {
    background: var(--accent);
    color: #000000;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: var(--font-weight-strong, 600);
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s;
}

button:active { opacity: 0.8; }

.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border);
    margin-top: 8px;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.heatmap-day {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 100;
}

.tab-btn.active {
    color: var(--accent);
    font-weight: var(--font-weight-strong, 600);
}

.view { display: none; }
.view.active { display: block; }

.log-list {
    margin-top: 12px;
    font-size: 0.85rem;
}

.log-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
}

.log-item span:last-child {
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
}
/* Einstellungen: Tagesrhythmus (Pro-User, 2-spaltig Label/Feld) */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 10px 12px;
    align-items: center;
    margin-bottom: 12px;
}

.settings-grid label {
    margin-bottom: 0;
}

/* Vitalwerte-Karte (Pro): Datum braucht mehr Platz als Zeit-Inputs (Issue #7) */
.settings-grid.wide-inputs {
    grid-template-columns: 1fr 150px;
}

/* ==================================================}

 * Sanfte Inline-Rückmeldung (Toast) statt blockierender Dialoge
 * Reizarm: weiche opacity-Transition, keine Bewegung, dezenter Akzentrand
 * ========================================================= */
.toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    max-width: min(92vw, 540px);
    padding: 12px 16px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border);
    border-left: 3px solid var(--safe);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 50;
}

.toast-visible {
    opacity: 1;
    visibility: visible;
}

.toast-error {
    border-left-color: var(--danger);
}
.wiz-vendor-note {
    color: #9e9e9e;
    font-style: italic;
}

.wiz-store-link {
    display: inline-block;
    margin-bottom: 12px;
    text-decoration: none;
}

.wiz-other-os {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: #9e9e9e;
    font-size: 0.85rem;
    text-decoration: underline;
}

/* =========================================================
   PWA-VARIANTE BASIC / PRO (Test-Phase)
   Pro-Elemente: Klasse 'pro-only' (nur in Variante 'pro' sichtbar)
   Basic-Elemente: Klasse 'basic-only' (nur in Variante 'basic' sichtbar)
   Die Body-Klasse 'variant-pro' wird per JS gesetzt (applyVariant).
   ========================================================= */
body.variant-pro .basic-only,
body:not(.variant-pro) .pro-only {
    display: none;
}

/* Pro-Gate (Dummy-Phase): gleiche Optik wie Assistent-Elemente */
.pro-gate {
    margin-top: 1rem;
    text-align: center;
}

/* Theme-Auswahl-Karte (Issue #18, Pro): Swatches zeigen die jeweilige
   Grundstimmung; Auswahl-Markierung wie Symptom-Chips (Rahmen + Gewicht). */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.85rem;
    text-align: left;
}

.theme-option.selected {
    border-color: var(--accent);
    border-width: 2px;
    font-weight: var(--font-weight-strong, 600);
}

.theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.theme-swatch-default { background: #121212; box-shadow: inset -8px -8px 0 #ff9800; }
.theme-swatch-dark { background: #1C1E1B; box-shadow: inset -8px -8px 0 #A2B79D; }
.theme-swatch-sepia { background: #EFEAD8; box-shadow: inset -8px -8px 0 #3D2E27; }
.theme-swatch-night { background: #1A2129; box-shadow: inset -8px -8px 0 #ABA6BA; }
.theme-swatch-minimal { background: #7A7D80; box-shadow: inset -8px -8px 0 #2C2E30; }

/* PEM-Quick-Button (Redesign): dezenter Icon-Button rechts neben der Check-Ueberschrift */
.pem-quick-btn {
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
    color: var(--text-color);
    cursor: pointer;
}

.pem-quick-btn svg {
    width: 30px;
    height: 30px;
    color: var(--accent);
}

.pem-quick-btn .icon-stroke {
    color: var(--text-muted);
}

/* Crash-Fokus (Redesign): Hinweis + grosse Optionen, reizarm */
.pem-crash-grid {
    margin-top: 12px;
}

/* Trend-Dummy (Redesign): Kurvensymbol + coming soon */
.trend-dummy {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-muted);
}

.trend-dummy-chart {
    width: 180px;
    height: 90px;
    color: var(--accent);
    opacity: 0.7;
}

/* (a) Quick-Button rechtsbuendig: Header-Zeile als Flex */
#view-check h1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* (b) Crash-Modal: Overlay mit Blur-Hintergrund, zentrierte Karte */
.crash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 20px;
}

.crash-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px double var(--danger);
    border-radius: 12px;
    padding: 22px 20px;
    max-width: 420px;
    width: 100%;
}

.crash-modal h2 {
    margin-bottom: 6px;
}

/* (d) Alternative Reiterleiste in den Einstellungen: Check-links = zurueck */
.settings-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: var(--bg-color);
    border-top: 1px solid var(--border);
    z-index: 40;
}

body {
    padding-bottom: 72px;
}


/* (c) v33: Ungespeicherte Rhythmus-Aenderungen hervorheben - Save-Button
   in Akzentfarbe, bis gespeichert wurde (reizarm: nur Farbe, kein Blinken) */
#btn-cfg-save.cfg-dirty {
    background: var(--accent);
    color: #121212;
    border-color: var(--accent);
    font-weight: 600;
}


/* #50: Danger Zone - unverschluesselte Exporte + destruktive Aktionen.
   Formcodierung (doppelter Rahmen) statt nur Farbe - graustufensicher (#25). */
.danger-zone {
    margin-top: 18px;
    padding: 12px;
    border: 3px double var(--danger);
    border-radius: 8px;
}

.danger-zone h3 {
    color: var(--danger);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* Setup (v41): Pro-Feature-Tag in Akzentfarbe (Marketing: Basic sieht das Angebot) */
.pro-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--accent);
    color: #121212;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.setup-option {
    margin-top: 14px;
}

.setup-option .hint {
    margin-left: 26px;
    margin-top: 4px;
}

/* Menüband slidend, falls die Buttons nicht ins sichtbare Feld passen (Owner-Vorgabe) */
.settings-tabbar {
    overflow-x: auto;
    scrollbar-width: thin;
}

.settings-tabbar .tab-btn {
    flex: 0 0 auto;
    min-width: 72px;
}


/* v42: Danger-Zone-Toggle - Warnrahmen schon am Button (Formcodierung: doppelter Rahmen) */
.danger-zone-toggle {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 10px 12px;
    background: transparent;
    color: var(--danger);
    border: 3px double var(--danger);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}



/* v49: Blutdruck-Zeile - eigener Container, sys+dia teilen equally (je 50%),
   dezente Trennlinie zur Zeile darueber (keine Wrap/Padding-Akrobatik mehr) */
#vitals-bp-row {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}