/* KIRA — Ruhiges, minimales Design
   Prinzip: Kompakt, klar, beruhigend. Keine Ueberladung. */

/* ── Reset + Base ─────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light theme (default)
       Kontrast-Audit v0.12.1:
       - --text-muted #6b6b6b auf --bg #f8f7f4 = 5.1:1 ✓ WCAG AA (normal text)
       - --text-light #8a8a8a = 3.25:1 — nur fuer grosse/dekorative Elemente
       - --error-bg/--error-text fuer Fehler-Bubbles (Login etc.), themefaehig */
    --bg: #f8f7f4;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --text: #2c2c2c;
    --text-muted: #6b6b6b;
    --text-light: #8a8a8a;
    --accent: #5b6abf;
    --accent-soft: #e8eafc;
    --success: #4a9e6e;
    --success-soft: #e3f5eb;
    --warn: #c4873b;
    --warn-soft: #fdf0e0;
    --error-bg: #fbe9e9;
    --error-text: #8a1f1f;
    --border: #e8e6e1;
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
    --radius: 10px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', monospace;

    /* Layout-Breakpoints + Spalten (Sprint 6 Desktop-Redesign)
       Mobile <900px: 1 Spalte, Bottom-Nav
       Tablet 900-1199px: 2 Spalten (Daily | Timeline)
       Desktop >=1200px: 3 Spalten (Sidebar | Daily | Timeline)
       Panel schiebt Timeline weg, Daily bleibt sichtbar. */
    --bp-tablet: 900px;
    --bp-desktop: 1200px;
    --col-sidebar: 240px;
    --col-panel: 420px;
    --col-timeline-min: 320px;
    --max-content: 1400px;

    /* Tatsaechliche Capture-Bar-Hoehe — wird per ResizeObserver aus app.js
       gepflegt. Waechst mit Feedback/Action-Summary. Sidebar-Hoehe auf
       Desktop bindet sich daran, damit der Sidebar-Footer nicht unter den
       Viewport rutscht. Fallback deckt Erstrender vor JS-Init ab. */
    --capture-height: 80px;

    /* Projekt-Palette (v0.19.7) — 8 ADHS-freundliche Hue-Anker fuer den
       Timeline-Block. Werden per color-mix(35%, var(--bg-card)) als weicher
       Block-Hintergrund verwendet, damit das Ergebnis in jedem Theme
       (light/dark) kontextuell harmonisch bleibt. JS-Hash crc32-aehnlich:
       trim+lowercase(project) -> %8 -> Index 1..8. Gleiches Projekt =
       gleiche Farbe. */
    --cat-1: #5b78d4;  /* indigo */
    --cat-2: #4ea876;  /* green */
    --cat-3: #cf8e3b;  /* amber */
    --cat-4: #cf6b94;  /* pink */
    --cat-5: #3fa3b5;  /* teal */
    --cat-6: #9b7dd0;  /* violet */
    --cat-7: #c46c5a;  /* coral */
    --cat-8: #7d9447;  /* olive */
}

/* Dark-Theme-Tokens — angewendet per data-theme="dark" (explizit)
   ODER per prefers-color-scheme, wenn data-theme="system" gesetzt ist.
   Kontrast-Audit v0.12.1:
   - --text-muted #b4b4c6 auf --bg #1a1a2e = 9.8:1 ✓ AA
   - --text-light #8a8a9e = 5.2:1 ✓ AA (normal text) */
:root[data-theme="dark"],
:root[data-theme="system"] {
    color-scheme: light dark;
}
:root[data-theme="dark"] {
    --bg: #1a1a2e;
    --bg-card: #222240;
    --bg-input: #2a2a48;
    --text: #e0ddd5;
    --text-muted: #b4b4c6;
    --text-light: #8a8a9e;
    --accent: #8c9af0;
    --accent-soft: #2d2d55;
    --success: #5eba82;
    --success-soft: #1e3a2a;
    --warn: #e0b070;
    --warn-soft: #3a2e1e;
    --error-bg: #3a1e1e;
    --error-text: #f4b4b4;
    --border: #3d3d5e;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --bg: #1a1a2e;
        --bg-card: #222240;
        --bg-input: #2a2a48;
        --text: #e0ddd5;
        --text-muted: #b4b4c6;
        --text-light: #8a8a9e;
        --accent: #8c9af0;
        --accent-soft: #2d2d55;
        --success: #5eba82;
        --success-soft: #1e3a2a;
        --warn: #e0b070;
        --warn-soft: #3a2e1e;
        --error-bg: #3a1e1e;
        --error-text: #f4b4b4;
        --border: #3d3d5e;
        --shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
}

/* ── Zusaetzliche Farbthemen (v0.16.1) ───────────────────────────
   Jedes Theme setzt alle Farb-Variablen vollstaendig. Semantische
   Farben (success/warn/error) bleiben im Theme-Farbgeist erhalten,
   aber erkennbar als gruen-ish / gelb-ish / rot-ish. Kontraste sind
   auf WCAG AA (≥4.5:1 Normal-Text, ≥3:1 grosse Elemente) geprueft. */

:root[data-theme="solarized-light"],
:root[data-theme="catppuccin-latte"],
:root[data-theme="github-light"] {
    color-scheme: light;
}

:root[data-theme="solarized-dark"],
:root[data-theme="nord"],
:root[data-theme="dracula"],
:root[data-theme="tokyo-night"],
:root[data-theme="catppuccin-mocha"],
:root[data-theme="gruvbox-dark"],
:root[data-theme="one-dark"] {
    color-scheme: dark;
}

/* Solarized Light — Ethan Schoonover */
:root[data-theme="solarized-light"] {
    --bg: #fdf6e3;
    --bg-card: #ffffff;
    --bg-input: #eee8d5;
    --text: #073642;
    --text-muted: #586e75;
    --text-light: #657b83;
    --accent: #268bd2;
    --accent-soft: #d8eaf5;
    --success: #859900;
    --success-soft: #e9ecd5;
    --warn: #b58900;
    --warn-soft: #f4ead0;
    --error-bg: #fadbd8;
    --error-text: #b7291f;
    --border: #eee8d5;
    --shadow: 0 1px 3px rgba(7,54,66,0.08);
}

/* Catppuccin Latte */
:root[data-theme="catppuccin-latte"] {
    --bg: #eff1f5;
    --bg-card: #ffffff;
    --bg-input: #e6e9ef;
    --text: #4c4f69;
    --text-muted: #5c5f77;
    --text-light: #6c6f85;
    --accent: #1e66f5;
    --accent-soft: #dce5fa;
    --success: #40a02b;
    --success-soft: #d8ebd2;
    --warn: #df8e1d;
    --warn-soft: #f5e4c3;
    --error-bg: #f5d7db;
    --error-text: #d20f39;
    --border: #ccd0da;
    --shadow: 0 1px 3px rgba(76,79,105,0.08);
}

/* GitHub Light — Primer */
:root[data-theme="github-light"] {
    --bg: #ffffff;
    --bg-card: #f6f8fa;
    --bg-input: #ffffff;
    --text: #24292f;
    --text-muted: #57606a;
    --text-light: #6e7781;
    --accent: #0969da;
    --accent-soft: #ddf4ff;
    --success: #1a7f37;
    --success-soft: #dafbe1;
    --warn: #9a6700;
    --warn-soft: #fff8c5;
    --error-bg: #ffebe9;
    --error-text: #cf222e;
    --border: #d0d7de;
    --shadow: 0 1px 3px rgba(36,41,47,0.08);
}

/* Solarized Dark — Ethan Schoonover */
:root[data-theme="solarized-dark"] {
    --bg: #002b36;
    --bg-card: #073642;
    --bg-input: #0a4050;
    --text: #eee8d5;
    --text-muted: #93a1a1;
    --text-light: #839496;
    --accent: #268bd2;
    --accent-soft: #073d5e;
    --success: #859900;
    --success-soft: #1f3008;
    --warn: #b58900;
    --warn-soft: #2e2608;
    --error-bg: #3a1214;
    --error-text: #dc322f;
    --border: #114455;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Nord — Arctic, north-bluish */
:root[data-theme="nord"] {
    --bg: #2e3440;
    --bg-card: #3b4252;
    --bg-input: #434c5e;
    --text: #eceff4;
    --text-muted: #d8dee9;
    --text-light: #a3adc2;
    --accent: #88c0d0;
    --accent-soft: #3a4a58;
    --success: #a3be8c;
    --success-soft: #2f3d2e;
    --warn: #ebcb8b;
    --warn-soft: #3d3824;
    --error-bg: #3d2a2a;
    --error-text: #bf616a;
    --border: #4c566a;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dracula */
:root[data-theme="dracula"] {
    --bg: #282a36;
    --bg-card: #343746;
    --bg-input: #44475a;
    --text: #f8f8f2;
    --text-muted: #a8aab5;
    --text-light: #8a8b97;
    --accent: #bd93f9;
    --accent-soft: #3d3355;
    --success: #50fa7b;
    --success-soft: #1e3a2a;
    --warn: #ffb86c;
    --warn-soft: #3a2e1e;
    --error-bg: #3a1e1e;
    --error-text: #ff5555;
    --border: #44475a;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Tokyo Night */
:root[data-theme="tokyo-night"] {
    --bg: #1a1b26;
    --bg-card: #24283b;
    --bg-input: #292e42;
    --text: #c0caf5;
    --text-muted: #a9b1d6;
    --text-light: #8088a9;
    --accent: #7aa2f7;
    --accent-soft: #283150;
    --success: #9ece6a;
    --success-soft: #2a3826;
    --warn: #e0af68;
    --warn-soft: #3a2e1c;
    --error-bg: #3a2028;
    --error-text: #f7768e;
    --border: #3b4261;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Catppuccin Mocha */
:root[data-theme="catppuccin-mocha"] {
    --bg: #1e1e2e;
    --bg-card: #313244;
    --bg-input: #45475a;
    --text: #cdd6f4;
    --text-muted: #bac2de;
    --text-light: #a6adc8;
    --accent: #89b4fa;
    --accent-soft: #2c3550;
    --success: #a6e3a1;
    --success-soft: #2a3b2a;
    --warn: #f9e2af;
    --warn-soft: #3d3625;
    --error-bg: #3a1e28;
    --error-text: #f38ba8;
    --border: #45475a;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Gruvbox Dark — Pavel Pertsev */
:root[data-theme="gruvbox-dark"] {
    --bg: #282828;
    --bg-card: #3c3836;
    --bg-input: #504945;
    --text: #ebdbb2;
    --text-muted: #d5c4a1;
    --text-light: #a89984;
    --accent: #fabd2f;
    --accent-soft: #3d3620;
    --success: #b8bb26;
    --success-soft: #2e3210;
    --warn: #fe8019;
    --warn-soft: #3d2b15;
    --error-bg: #3a1e14;
    --error-text: #fb4934;
    --border: #504945;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* One Dark — Atom-Klassiker */
:root[data-theme="one-dark"] {
    --bg: #282c34;
    --bg-card: #323842;
    --bg-input: #3e4451;
    --text: #abb2bf;
    --text-muted: #9da5b4;
    --text-light: #828997;
    --accent: #61afef;
    --accent-soft: #243448;
    --success: #98c379;
    --success-soft: #2a3a26;
    --warn: #e5c07b;
    --warn-soft: #3a3320;
    --error-bg: #3a2228;
    --error-text: #e06c75;
    --border: #3e4451;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* ── Capture Bar ──────────────────────────── */
#capture-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
}

#capture-form {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

#quick-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px; /* prevents iOS zoom */
    font-family: var(--font);
    background: var(--bg-input);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.2s;
}

#quick-input:focus {
    border-color: var(--accent);
}

#quick-input::placeholder {
    color: var(--text-light);
}

.feedback {
    position: absolute;
    bottom: -28px;
    left: 16px;
    font-size: 13px;
    color: var(--success);
    opacity: 1;
    transition: opacity 0.5s;
}

.feedback.is-error {
    color: var(--warn);
}

.feedback.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Capture-Spinner: dezenter ringed spinner im Input-Feld rechts, solange submit laeuft */
.capture-spinner {
    display: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    pointer-events: none;
}
#capture-form.is-busy .capture-spinner { display: block; }
#capture-form.is-busy #quick-input { padding-right: 40px; opacity: 0.6; }

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Capture-Summary: Action-Summary-Box direkt unter der Eingabeleiste.
   Max-Height + Scroll, damit lange Action-Listen die Ansicht nicht killen. */
.capture-summary {
    max-width: 600px;
    margin: 6px auto 0;
    max-height: 40vh;
    overflow-y: auto;
}
.capture-summary:empty { display: none; }
.capture-summary .chat-actions-summary {
    margin: 0;
}

/* Globaler API-Ladebalken ganz oben: wird per body.is-loading sichtbar */
.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
    overflow: hidden;
}
body.is-loading .global-loader::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 40%;
    background: var(--accent);
    animation: loader-slide 1.1s ease-in-out infinite;
}
@keyframes loader-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* ── Main Content ─────────────────────────── */
#app {
    flex: 1;
    padding: 16px;
    padding-bottom: 80px; /* space for nav */
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* ── Sidebar (Desktop >=1200px) ────────────── */
#sidebar {
    display: none; /* wird in der Desktop-Media-Query aktiviert */
    flex-direction: column;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

#sidebar .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    min-height: 40px;
    min-width: 0;
}

#sidebar .nav-item:hover {
    background: var(--bg);
    color: var(--text);
}

#sidebar .nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}

#sidebar .nav-icon {
    font-size: 16px;
    margin-bottom: 0;
    width: 20px;
    text-align: center;
}

.sidebar-motto {
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.45;
    padding: 12px 12px 4px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.sidebar-motto:empty {
    display: none;
}

.sidebar-version {
    font-size: 11px;
    color: var(--text-light);
    font-family: var(--font-mono);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Update-Button — erscheint neben Version wenn ein neuer Build live ist.
   Dezenter Pulse zieht den Blick hin ohne aufzuschreien. */
.update-available-btn {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s ease, transform 0.15s ease;
    animation: update-btn-pulse 2.2s ease-in-out infinite;
}
.update-available-btn:hover {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.04);
}
.update-available-btn:disabled {
    animation: none;
    opacity: 0.6;
    cursor: default;
}
@keyframes update-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91, 106, 191, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(91, 106, 191, 0.25); }
}

/* ── Navigation ───────────────────────────── */
#nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    padding: 4px 16px;
    min-width: 64px;
    min-height: 44px; /* touch target */
    justify-content: center;
    transition: color 0.2s;
}

.nav-item.active {
    color: var(--accent);
}

.nav-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 2px;
}

/* ── Cards ────────────────────────────────── */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.card-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ── Daily View ───────────────────────────── */
/* Datumzeile oben — nur wenn die "Heute"-Card fehlt (leerer Tag).
   Sonst steckt das Datum im Card-Header neben "Heute". */
.daily-date-line {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 4px 8px;
}

/* Fokus-Card — eigene Box, wenn offen. Zugeklappt wird sie über :has()
   komplett ausgeblendet und der Chip in der Next-Step-Card erscheint
   als Wiedereinblender. So kein vertikaler Platzverlust im Collapsed-Zustand. */
.focus-card {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
}
.focus-card-summary {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.focus-card-summary::-webkit-details-marker { display: none; }
.focus-card-summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 5px;
    transform: rotate(90deg);
    font-size: 9px;
}
.focus-card-text {
    font-size: 14px;
    color: var(--text);
    margin-top: 6px;
    font-style: italic;
    line-height: 1.45;
}

/* Chip rechts oben in der Next-Step-Card — Wiedereinblender wenn Fokus zu. */
.next-step { position: relative; }
.focus-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.focus-chip:hover { background: var(--accent-soft); }
.focus-chip-caret {
    display: inline-block;
    margin-left: 3px;
    font-size: 9px;
}

/* CSS-Only-Flip: wenn Fokus offen → Chip verstecken.
   Wenn Fokus zu → ganze Card verstecken (kein Platzverlust). */
.daily-main:has(.focus-card[open]) .focus-chip { display: none; }
.daily-main:has(.focus-card:not([open])) .focus-card { display: none; }

/* Datum im "Heute"-Card-Header — dezent, nicht konkurrierend. */
.card-header-date {
    color: var(--text-light);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Heute erledigt — aufklappbare Liste */
.daily-done {
    margin: 24px 0 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-alt, rgba(0,0,0,0.03));
    font-size: 14px;
}

.daily-done-summary {
    cursor: pointer;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
    padding: 4px 0;
}

.daily-done-summary::-webkit-details-marker {
    display: none;
}

.daily-done[open] .daily-done-summary {
    margin-bottom: 8px;
}

.daily-done-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.daily-done-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 4px;
    color: var(--text-muted);
    text-decoration: line-through;
    transition: background 0.15s;
}

.daily-done-item:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text);
}

.daily-done-time {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
}

.daily-done-title {
    flex: 1;
}

/* Task-ID-Badge — klein, dezent, monospace, inline vor Titeln */
.task-id-badge {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.05);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: baseline;
    line-height: 1.3;
}

/* Timeline — Pixel-pro-Minute-Tagesspur (Sprint 6 §4).
   Volle 24h rendern (2 px/min = 2880px), eigener Scroll-Container,
   Auto-Scroll beim Mount auf "jetzt". */
.timeline-scroll {
    position: relative;
    border-radius: var(--radius);
    background: var(--bg-card);
    margin: -4px -4px 0;
}

/* Mobile: kein eigener Scroll — Track trägt sich mit der Seite.
   Desktop: Card hat max-height und scrollt intern, damit rechts Spalte
   sticky bleiben kann ohne den Tagesverlauf abzuschneiden.
   overflow-x MUSS in den Desktop-Scope, weil jeder non-visible overflow-x
   per CSS-Spec overflow-y implizit auf auto hebt — das führte dazu, dass
   Mobile trotzdem einen Inner-Scroll hatte (Bug: "Tagesverlauf scrollt
   innerhalb statt die Seite"). */
@media (min-width: 900px) {
    .timeline-scroll {
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.timeline-track {
    position: relative;
    /* height wird inline gesetzt (2880px) */
}

/* Stunden-Gitter */
.tl-hours {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tl-hour {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
}
.tl-hour-label {
    position: absolute;
    left: 4px;
    top: -7px;
    width: 38px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding-right: 2px;
}
.tl-hour-line {
    position: absolute;
    left: 48px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--border);
    opacity: 0.6;
}

/* Block-Bereich (rechts von den Stunden-Labels) */
.timeline-body {
    position: absolute;
    left: 48px;
    right: 4px;
    top: 0;
    bottom: 0;
}

.tl-block {
    position: absolute;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.tl-block-stacked {
    border-left: 2px solid rgba(255,255,255,0.4);
}
.tl-block-time {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.8;
}
.tl-block-label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.tl-block-time {
    position: relative;
    z-index: 2;
}
/* v0.20.6: Pause zwischen zwei Sessions desselben Tasks — diagonaler
   Streifen innerhalb des Blocks, analog Zeitstrom-View. Kein eigener
   Label-Chrome; das Titel-Attribut zeigt den Bereich „HH:MM–HH:MM". */
.tl-block-break {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.22) 4px,
        transparent 4px,
        transparent 10px
    );
    pointer-events: none;
    z-index: 1;
}

/* Fixtermin — kräftig, ganze Breite ihrer Spur.
   border-left-width muss gesetzt sein, damit der Inline-border-left-color
   (pro-Kalender, aus calendars.color) sichtbar wird. */
.tl-block-fixed {
    background: var(--accent);
    color: #fff;
    border-left: 4px solid transparent;
}

/* Task — weich, klickbar, grüner Akzent-Streifen links (Default ohne
   Projekt-Farbe). Wenn der Block ein Projekt hat, ueberschreibt
   `.tl-block-cat-N` background + border-left-color (siehe v0.19.7). */
.tl-block-task,
.tl-block-task-done {
    background: var(--success-soft);
    color: var(--text);
    /* Longhand statt shorthand, damit cat/energy-Klassen einzelne
       Eigenschaften (color/width) ohne Specificity-Krieg ueberschreiben. */
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: var(--success);
    cursor: pointer;
}
.tl-block-task:hover { filter: brightness(0.97); }
.tl-block-task-done {
    opacity: 0.6;
}
.tl-block-task-done .tl-block-label {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Projekt-Farbe (v0.19.7) — color-mix mit --bg-card haelt das Ergebnis
   in jedem Theme weich, der Border zieht den vollen Farbton fuer das
   Wiedererkennungs-Signal links. Hash-Index 1..8 kommt aus timeline.js.
   Doppelte Klassen-Specificity (.tl-block.tl-block-cat-N) damit der Border
   den .tl-block-scheduled-Override (--accent) gewinnt — sonst saehen alle
   geplanten Tasks indigo aus. */
.tl-block.tl-block-cat-1 { background: color-mix(in oklch, var(--cat-1) 35%, var(--bg-card)); border-left-color: var(--cat-1); }
.tl-block.tl-block-cat-2 { background: color-mix(in oklch, var(--cat-2) 35%, var(--bg-card)); border-left-color: var(--cat-2); }
.tl-block.tl-block-cat-3 { background: color-mix(in oklch, var(--cat-3) 35%, var(--bg-card)); border-left-color: var(--cat-3); }
.tl-block.tl-block-cat-4 { background: color-mix(in oklch, var(--cat-4) 35%, var(--bg-card)); border-left-color: var(--cat-4); }
.tl-block.tl-block-cat-5 { background: color-mix(in oklch, var(--cat-5) 35%, var(--bg-card)); border-left-color: var(--cat-5); }
.tl-block.tl-block-cat-6 { background: color-mix(in oklch, var(--cat-6) 35%, var(--bg-card)); border-left-color: var(--cat-6); }
.tl-block.tl-block-cat-7 { background: color-mix(in oklch, var(--cat-7) 35%, var(--bg-card)); border-left-color: var(--cat-7); }
.tl-block.tl-block-cat-8 { background: color-mix(in oklch, var(--cat-8) 35%, var(--bg-card)); border-left-color: var(--cat-8); }

/* Energy-Level (v0.19.7) — sekundaeres Signal als Border-Width links.
   Kommt nur bei Sub-Tasks vor, die per Breakdown ein energy_level haben.
   Ohne Klasse bleibt es bei den 3px aus tl-block-task. */
.tl-block-energy-low    { border-left-width: 2px; }
.tl-block-energy-medium { border-left-width: 3px; }
.tl-block-energy-high   { border-left-width: 5px; }

/* „geplant"-Tag fuer Task-Bloecke mit source='scheduled' — dezent, nur
   Typografie, kein Farb-Rabatz. Zeigt dem Nutzer, dass dieser Slot aus
   scheduled_time kommt (nicht aus der Deadline). */
.tl-block-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.tl-block-scheduled {
    border-left-color: var(--accent);
}

/* Recurring Reminder — dünn, lila, Sprint 8 aktiviert Backend */
.tl-block-reminder {
    background: #9b7fd9;
    color: #fff;
    padding: 1px 8px;
    font-size: 10px;
}

/* "Jetzt"-Marker */
.timeline-now {
    position: absolute;
    left: 44px;
    right: 0;
    height: 2px;
    background: #e04a4a;
    z-index: 5;
    pointer-events: none;
}
.timeline-now::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e04a4a;
}
.timeline-now[hidden] { display: none; }

/* Edge-Indicators: sticky Streifen oben/unten im Scroll-Container.
   Erscheinen nur, wenn Blöcke außerhalb des Viewports liegen. Klick
   scrollt sanft zum nächstgelegenen Off-Screen-Block. Negative margins
   legen sie als Overlay über den Track, damit sie kein Layout schieben. */
.tl-edge {
    position: sticky;
    left: 0;
    right: 0;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    z-index: 20;
    user-select: none;
    transition: opacity 0.15s;
}
.tl-edge:hover { opacity: 0.85; }
.tl-edge-top {
    top: 0;
    margin-bottom: -22px;
    background: linear-gradient(to bottom,
        var(--bg-card) 50%,
        rgba(255,255,255,0) 100%);
}
.tl-edge-bottom {
    bottom: 0;
    margin-top: -22px;
    background: linear-gradient(to top,
        var(--bg-card) 50%,
        rgba(255,255,255,0) 100%);
}

/* Dark-Mode: Gradient-Ende an dunklen Card-Hintergrund anpassen.
   Wirkt bei explizitem Dark-Theme UND System-Theme mit Dark-Praeferenz. */
:root[data-theme="dark"] .tl-edge-top {
    background: linear-gradient(to bottom,
        var(--bg-card) 50%, rgba(34,34,64,0) 100%);
}
:root[data-theme="dark"] .tl-edge-bottom {
    background: linear-gradient(to top,
        var(--bg-card) 50%, rgba(34,34,64,0) 100%);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .tl-edge-top {
        background: linear-gradient(to bottom,
            var(--bg-card) 50%, rgba(34,34,64,0) 100%);
    }
    :root[data-theme="system"] .tl-edge-bottom {
        background: linear-gradient(to top,
            var(--bg-card) 50%, rgba(34,34,64,0) 100%);
    }
}

/* Empty-State: Gitter bleibt sichtbar, dezenter Text mittig im Track */
.timeline-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    background: var(--bg-card);
    padding: 0 8px;
}

/* Next Step */
.next-step {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 12px;
}

.next-step-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: 4px;
}

.next-step-action {
    font-size: 15px;
    font-weight: 500;
}

.next-step-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Daily 2-Spalten-Layout (Sprint 6 §3).
   Unter 900px stackt alles; ab 900px Hauptstack links, Zeit-Spalte rechts. */
.daily-grid {
    display: block;
}

@media (min-width: 900px) {
    .daily-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(var(--col-timeline-min), 1fr);
        gap: 20px;
        align-items: start;
    }

    .daily-side {
        position: sticky;
        top: 80px; /* unter Capture-Bar bleiben */
    }
}

@media (min-width: 1200px) {
    .daily-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 24px;
    }
}

/* Sub-Grid in .daily-main: Reminder + Schaetzungs-Spiegel nebeneinander,
   Gestern-geschafft volle Breite darunter. Unter 900px stackt alles.
   Die einzelnen Cards haben margin-bottom: 12px aus .card {} — im Sub-Grid
   nehmen wir das weg und nutzen gap, damit beide Spalten bündig schliessen. */
.daily-main-sub {
    margin-bottom: 12px;
}
.daily-main-sub > .card {
    margin-bottom: 12px;
}

@media (min-width: 900px) {
    .daily-main-sub {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 16px;
    }
    .daily-main-sub > .card {
        margin-bottom: 0;
    }
    .daily-main-sub .card-wins {
        grid-column: 1 / -1;
    }
}

/* Reminder-Card — erste Card im Daily-Stack (Sprint 6 §6).
   Dünne lila Top-Border signalisiert "Zeit-Pieks" ohne die Card zur
   visuellen Hauptattraktion zu machen. */
.card-reminder {
    border-top: 2px solid #9b7fd9;
    padding-top: 14px;
}

.card-reminder .card-header {
    color: #9b7fd9;
}

.reminder-time {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    margin-right: 4px;
}

/* Upcoming-Chip in der Reminder-Card (Analog zum Fokus-Chip):
   zugeklappt nur ein duenner Zweizeiler, aufgeklappt eine kompakte Liste. */
.reminder-upcoming {
    margin-top: 8px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}
.reminder-upcoming-chip {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    user-select: none;
}
.reminder-upcoming-chip::-webkit-details-marker { display: none; }
.reminder-upcoming-chip:hover { color: var(--text); background: var(--accent-soft); }
.reminder-upcoming[open] .reminder-upcoming-chip .focus-chip-caret {
    transform: rotate(90deg);
}
.reminder-upcoming .focus-chip-caret {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 10px;
}
.reminder-list-upcoming {
    margin-top: 6px;
    opacity: 0.85;
}
.reminder-list-upcoming li { font-size: 13px; }

/* Reminder-Items — Text links, Action-Buttons rechts (Flex-Layout).
   Upcoming-Items (kein isPending) bleiben schlicht. Klick auf Text macht
   nichts mehr — Edit laeuft explizit ueber den Stift-Button. */
.reminder-item {
    border-radius: 4px;
    padding: 2px 4px;
    margin: 0 -4px;
    transition: background 0.12s ease;
}
.reminder-item-pending {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reminder-item-pending .reminder-text { flex: 1; min-width: 0; }
.reminder-body-clickable { cursor: pointer; }
.reminder-body-clickable:hover { color: var(--accent); }
.reminder-item.is-processing { opacity: 0.5; pointer-events: none; }

/* Faelliger Reminder (is_due): dezenter Warn-Akzent, damit er sich aus
   der Liste hebt, falls der Alarm-Overlay mal nicht aufgeht (z.B. weil
   der User ihn schon gesehen und nur die Liste anguckt). */
.reminder-item-due {
    background: var(--warn-soft);
    padding-left: 8px;
    border-left: 3px solid var(--warn);
}

.reminder-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.reminder-btn-done,
.reminder-btn-edit {
    font-family: var(--font);
}
.reminder-btn-done:hover {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-soft);
}
.reminder-btn-edit:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.reminder-repeat {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: help;
}

/* Gesnoozter Reminder — bleibt in der Liste sichtbar, aber dezent abgesetzt
   (der User hat ihn aktiv weggeschoben, nicht geloescht). Das kleine
   "⏸ bis HH:MM"-Badge macht die Snooze-Zeit sofort lesbar. */
.reminder-item-snoozed {
    opacity: 0.58;
}
.reminder-item-snoozed .reminder-text { font-style: italic; }
.reminder-snoozed-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: var(--font);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--accent-soft);
    border-radius: 9px;
    vertical-align: middle;
}

/* "Alle Erinnerungen →" — unauffaelliger Link am Card-Boden. Fuehrt zur
   Uebersichts-Seite mit Vergangenheit + Erledigt. */
.reminder-card-more {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.12s ease;
}
.reminder-card-more:hover { color: var(--accent); }

/* Leerer Zustand: keine offenen Reminder heute. Card bleibt sichtbar, damit
   der User den Weg zur Uebersicht kennt. */
.card-reminder-empty .reminder-empty-hint {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Reminders-Uebersicht (#/reminders) ─────────────────────────────
   Tabs (offen/erledigt/alle) reusen .task-filters + .filter-btn. Items
   reusen .reminder-item / .reminder-actions. Die Gruppenueberschriften
   + Status-Badges sind view-spezifisch. */
.reminders-day-group {
    margin-bottom: 18px;
}
.reminders-day-heading {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.reminders-day-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reminders-day-list .reminder-item {
    padding: 6px 8px;
    margin: 0;
}
.reminder-item-done {
    opacity: 0.55;
    text-decoration: line-through;
}
.reminder-item-done .reminder-status-badge { text-decoration: none; }
.reminder-status-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-family: var(--font);
    font-weight: 500;
    border-radius: 9px;
    vertical-align: middle;
    line-height: 1.4;
}
.reminder-status-badge.status-done {
    color: var(--success);
    background: var(--success-soft);
}
.reminder-status-badge.status-due {
    color: var(--warn);
    background: var(--warn-soft);
}
.reminder-status-badge.status-past {
    color: var(--text-muted);
    background: var(--border);
}
.reminder-btn-delete:hover {
    border-color: var(--danger, #c94442);
    color: var(--danger, #c94442);
}

/* Inline-Edit fuer Reminders wurde in v0.11.0 durch ReminderPanel
   (components/reminder-panel.js) ersetzt — siehe .reminder-panel-*. */

/* Status-Badge-Varianten, die nur im Panel vorkommen (in der Liste lassen
   wir diese Zustaende stumm, damit die Items optisch ruhig bleiben). */
.reminder-status-badge.status-snoozed {
    color: var(--text-muted);
    background: var(--accent-soft);
}
.reminder-status-badge.status-pending {
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
}

/* ── Reminder Alert (Alarm-Overlay fuer faellige Reminders) ───────
   Modal mit Backdrop. Das hier ist die Annaeherung an einen echten
   Push-Notification-Alarm — solange die App im Browser offen ist,
   piekst es bis der Nutzer bewusst "Erledigt" oder "Snooze" klickt. */
.reminder-alert-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.reminder-alert-overlay.is-open {
    display: flex;
    animation: reminderFadeIn 0.18s ease-out;
}
@keyframes reminderFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reminder-alert-modal {
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 440px;
    padding: 28px 24px 24px;
    text-align: center;
    animation: reminderPopIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes reminderPopIn {
    from { transform: scale(0.9) translateY(8px); opacity: 0; }
    to   { transform: scale(1) translateY(0);     opacity: 1; }
}

.reminder-alert-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 6px;
    animation: reminderWiggle 1.2s ease-in-out infinite;
}
@keyframes reminderWiggle {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-10deg); }
    30%      { transform: rotate(10deg); }
    45%      { transform: rotate(-6deg); }
    60%      { transform: rotate(6deg); }
    75%      { transform: rotate(0deg); }
}

.reminder-alert-time {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.reminder-alert-message {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
    word-break: break-word;
}

.reminder-alert-repeat {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.reminder-alert-primary {
    margin-bottom: 18px;
}
.btn-alert-done {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--success);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease;
    font-family: var(--font);
    min-height: 48px;
}
.btn-alert-done:hover:not(:disabled) { filter: brightness(1.08); }
.btn-alert-done:active:not(:disabled) { transform: translateY(1px); }
.btn-alert-done:disabled { opacity: 0.6; cursor: wait; }

.reminder-alert-snooze {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.reminder-alert-snooze-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.reminder-alert-snooze-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-snooze-quick {
    flex: 1 1 0;
    min-width: 70px;
    padding: 10px 8px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    min-height: 40px;
}
.btn-snooze-quick:hover:not(:disabled) {
    border-color: var(--warn);
    background: var(--warn-soft);
    color: var(--warn);
}
.btn-snooze-quick:disabled { opacity: 0.5; cursor: wait; }

.reminder-alert-snooze-more {
    flex: 0 0 auto;
    padding: 10px 8px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    min-height: 40px;
}
.reminder-alert-snooze-more:disabled { opacity: 0.5; cursor: wait; }

.reminder-alert-overlay.is-busy .reminder-alert-modal {
    opacity: 0.75;
    pointer-events: none;
}

/* Wins-Card — dezenter als normale Cards, sie ist der Abschluss des Tages
   ("Ecke rechts unten" im späteren 3-Spalten-Layout). */
.card-wins {
    background: transparent;
    box-shadow: none;
    border: 1px dashed var(--border);
    padding: 12px 16px;
}

.card-wins .card-header-link {
    color: var(--text-muted);
    text-decoration: none;
}

.card-wins .card-header-link:hover {
    color: var(--accent);
}

/* ── Schaetzungs-Spiegel (Plan vs Ist) ────────── */
.card-estimation {
    /* warm-leise, nicht laut — der Spiegel soll einladen, nicht bestrafen. */
    border-left: 3px solid var(--info, var(--accent));
}

.card-estimation-warming {
    opacity: 0.92;
}

.estimation-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 10px;
}

.estimation-factor {
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.estimation-hero-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.estimation-numbers {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
}

.estimation-numbers strong {
    color: var(--accent);
}

.estimation-verdict {
    font-size: 13px;
    color: var(--text);
    font-style: italic;
    margin-bottom: 10px;
}

.estimation-meta {
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.estimation-empty {
    padding: 4px 0;
}

.estimation-progress {
    height: 6px;
    background: var(--bg-muted, rgba(0,0,0,0.06));
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.estimation-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
    min-width: 2px;
}

.estimation-empty-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.estimation-empty-text strong {
    color: var(--text);
}

/* ── Active Tasks (Daily View) ─────────────── */
.card-active {
    border-left: 3px solid var(--success);
}

.active-task-list {
    list-style: none;
}

.active-task-item {
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.active-task-item:last-child {
    border-bottom: none;
}

.active-task-item:hover .active-task-title {
    color: var(--accent);
}

.active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}

.active-task-title {
    flex: 1;
    font-weight: 500;
    transition: color 0.15s;
}

.active-task-project {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* WIP-Chip im Aktiv-Card-Header. Zeigt wie viele Tasks parallel aktiv sind.
   Warme Farbe statt rot, wenn Limit ueberschritten — ADHS-Prinzip
   "verzeihend statt bestrafend". */
.wip-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 10px;
    background: var(--success-soft);
    color: var(--success);
    vertical-align: middle;
}

.wip-chip-exceeded {
    background: var(--warn-soft);
    color: var(--warn);
}

/* Wenn Aktiv-Card die Top-Rolle uebernimmt (Next-Step ersetzt),
   bekommt sie leicht mehr visuelles Gewicht. */
.card-active-top {
    border-left-width: 4px;
}

/* Fokus-Chip separat, wenn Aktiv-Card die Top-Rolle hat (normalerweise
   sitzt der Chip in .next-step). */
.active-focus-chip-row {
    margin-bottom: 10px;
}

/* Priority list */
.priority-list {
    list-style: none;
}

.priority-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.priority-item:last-child {
    border-bottom: none;
}

.priority-item:hover .priority-item-title {
    color: var(--accent);
}

.priority-item-title {
    flex: 1;
    transition: color 0.15s;
}

/* Featured tasks (top 3) */
.priority-item.task-featured .priority-item-title {
    font-weight: 600;
}

.task-due-badge {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.priority-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.priority-badge.must {
    background: var(--warn-soft);
    color: var(--warn);
}

.priority-badge.should {
    background: var(--accent-soft);
    color: var(--accent);
}

.priority-badge.featured {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Open loops, think-about, wins */
.simple-list {
    list-style: none;
}

.simple-list li {
    padding: 5px 0;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.simple-list li::before {
    content: '\2022';
    color: var(--text-light);
    flex-shrink: 0;
}

/* Motto */
.motto {
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 14px;
    padding: 16px 0 8px;
}

.heartbeat-warning {
    text-align: center;
    font-size: 12px;
    color: var(--warn);
    background: var(--warn-soft);
    border-radius: var(--radius);
    padding: 6px 10px;
    margin-top: 12px;
}

/* Heartbeat-Pill — dezente Status-Anzeige oberhalb des Daily-Stacks.
   Zeigt dauerhaft an, wie lange her der letzte Heartbeat war; wird bei
   stale (>15 Min) warm eingefärbt, ersetzt aber nicht die Warnung unten. */
.heartbeat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    margin: 0 0 8px;
    line-height: 1.4;
}
.heartbeat-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6fb36f;
    box-shadow: 0 0 0 2px color-mix(in oklab, #6fb36f 30%, transparent);
}
.heartbeat-pill.heartbeat-pill-stale {
    color: var(--warn);
    border-color: var(--warn-soft);
    background: var(--warn-soft);
}
.heartbeat-pill.heartbeat-pill-stale::before {
    background: var(--warn);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 30%, transparent);
}

/* ── Tasks View ───────────────────────────── */
.task-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.2s;
}

.filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.task-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.task-search {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    font-size: 14px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-input);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}

.task-search:focus {
    border-color: var(--accent);
}

.task-sort {
    padding: 7px 28px 7px 12px;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.task-sort:focus {
    border-color: var(--accent);
}

.task-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: none;
    color: transparent;
    font-size: 12px;
    padding: 0;
}

.task-check:hover {
    border-color: var(--success);
    color: var(--success);
}

.task-body {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-size: 14px;
    line-height: 1.4;
}

.task-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 10px;
}

.task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font);
    min-height: 30px;
    transition: all 0.2s;
}

.btn-small:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.task-item.done {
    opacity: 0.5;
}

.task-item.done .task-title {
    text-decoration: line-through;
}

.task-item.is-active {
    border-left: 3px solid var(--success);
    background: var(--success-soft);
    padding-left: 13px;
}

.btn-nudge {
    font-size: 14px;
    padding: 2px 8px;
    min-height: 30px;
}

/* ── Task Panel (non-modal: keine Backdrop, pointer-events:none um herum) ── */
.task-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: transparent;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.task-panel-overlay.is-open {
    display: flex;
}

.task-panel-overlay .task-panel {
    pointer-events: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}

.task-panel {
    background: var(--bg-card);
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    max-width: 600px;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    max-height: 88dvh;
    overflow-y: auto;
    animation: slideUp 0.22s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.task-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.task-panel-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg, rgba(0,0,0,0.04));
    flex-shrink: 0;
    line-height: 1.2;
}

.task-panel-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    outline: none;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s;
    cursor: text;
}

.task-panel-title:hover {
    background: rgba(0, 0, 0, 0.04);
}

.task-panel-title:focus {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 0 0 2px var(--accent, #5b8def);
}

.task-panel-blocker {
    padding: 8px 12px;
    margin: 0 0 14px;
    border-radius: 6px;
    background: rgba(255, 180, 0, 0.12);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}

.task-panel-blocker .task-ref {
    color: var(--accent, #5b8def);
    cursor: pointer;
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.task-panel-blocker .task-ref:hover {
    text-decoration: underline;
}

.task-panel-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.task-panel-close:hover {
    background: var(--bg);
    color: var(--text);
}

.task-panel-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.task-panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.task-panel-logs-wrap {
    flex-direction: column;
    align-items: stretch;
}

.task-panel-section-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    margin-bottom: 2px;
}

.btn-panel {
    padding: 8px 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font);
    min-height: 38px;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-panel:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Panel-Header: Status-Actions als kompakte Icon-Row neben dem Titel.
   Ersetzt die frueher breite 9er-Button-Grid weiter unten — die war
   ausserhalb des Viewports und visuell dominant. Jetzt: ein Icon pro
   Aktion, gleich gross wie der Close-Button, direkt am Titel. */
.task-panel-status-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.btn-icon:hover {
    background: var(--bg);
    color: var(--text);
}
.btn-icon.btn-complete:hover  { color: var(--success); }
.btn-icon.btn-trash:hover     { color: var(--warn); }
.btn-icon:disabled { opacity: 0.4; cursor: wait; }

/* Snooze-Chips unter dem Due-Date-Feld — thematisch nah an Faelligkeit. */
.task-panel-snooze-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.task-panel-snooze-chips .task-panel-section-label {
    width: auto;
    margin-bottom: 0;
    min-width: 60px;
}
.chip {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    font-family: var(--font);
    min-height: 26px;
}
.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.chip:disabled { opacity: 0.4; cursor: wait; }

/* Auto-Scheduler: Button + Hint unter den Snooze-Chips. */
.task-panel-autoschedule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.task-panel-autoschedule .btn-panel {
    font-size: 13px;
    padding: 6px 12px;
}
.task-panel-autoschedule-hint {
    font-size: 12px;
    color: var(--success, #3a8a3a);
}
.task-panel-autoschedule-hint.is-error {
    color: var(--warn, #b7781e);
}
.task-panel-autoschedule-hint[hidden] { display: none; }

/* v0.18.0 — Zeiterfassung-Section im Task-Panel. */
.task-panel-timetracking {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--panel-accent-bg, rgba(58, 138, 58, 0.05));
    border-radius: 6px;
    margin-bottom: 10px;
}
.task-panel-tt-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.task-panel-timer {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--success, #3a8a3a);
    letter-spacing: 0.02em;
}
.task-panel-timer[hidden] { display: none; }
.task-panel-time-summary {
    font-size: 12px;
    color: var(--text-muted, #666);
}
.task-panel-time-summary[hidden] { display: none; }
.btn-panel-running {
    border-color: var(--warn, #b7781e);
    color: var(--warn, #b7781e);
    animation: pulse-dot 2.5s ease-in-out infinite;
}
.btn-panel-running:hover {
    background: rgba(183, 120, 30, 0.08);
}

/* v0.18.4 — Session-Historie im Task-Panel (Redesign).
   Ziele: Tagesgruppen, Single-Line-Rows ohne Umbruch, dark-theme-taugliche
   Inputs (keine hard-coded Hintergruende), Overlap-Error an der Row. */
.task-panel-sessions[hidden] { display: none; }
.task-panel-sessions {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
}
.task-panel-session-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    max-height: 240px;
    overflow-y: auto;
}
.session-day-group {
    padding: 4px 0;
}
.session-day-group + .session-day-group {
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    padding-top: 8px;
}
.session-day-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.session-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 13px;
    min-height: 30px;
    border: 1px solid transparent;
}
.session-row:hover {
    background: var(--bg-card);
}
.session-row.has-error {
    border-color: var(--warn, #b7781e);
    background: rgba(183, 120, 30, 0.08);
}
.session-row.has-error::after {
    content: '⚠';
    color: var(--warn, #b7781e);
    font-size: 14px;
    margin-left: 4px;
}
.session-row input[type="time"],
.session-row input[type="datetime-local"] {
    font-size: 13px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text);
    color-scheme: light dark; /* native picker folgt dem Theme */
}
.session-row input[type="time"] { width: 62px; }
.session-row input[type="datetime-local"].is-diff-day { width: auto; }
/* Native Picker-Icon ausblenden — verdeckte sonst die Minutenanzeige in der
   schmalen Zelle. Click auf das Feld oeffnet den Picker weiterhin (iOS/Android
   automatisch, Desktop via Pfeiltasten oder F4). */
.session-row input[type="time"]::-webkit-calendar-picker-indicator,
.session-row input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    display: none;
}
.session-row input[type="time"]::-webkit-inner-spin-button,
.session-row input[type="datetime-local"]::-webkit-inner-spin-button {
    display: none;
}
.session-sep {
    color: var(--text-muted);
    font-weight: 500;
}
.session-running-pill {
    font-size: 11px;
    font-weight: 600;
    color: var(--warn, #b7781e);
    background: rgba(183, 120, 30, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.session-dur {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}
.session-row.is-running .session-running-pill { margin-left: auto; }
.session-delete {
    opacity: 0.5;
    font-size: 14px;
    padding: 2px 6px;
    width: 26px;
    height: 26px;
}
.session-delete:hover {
    opacity: 1;
    color: var(--danger, #b73b3b);
}
.session-delete-placeholder {
    width: 26px;
}
.task-panel-session-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
    list-style: none;
}

/* Add-Formular: inline, dark-theme-tauglich, Fehler oben. */
.task-panel-session-add { margin-top: 8px; }
.btn-panel-session-add {
    font-size: 12px;
    padding: 4px 10px;
}
.task-panel-session-add-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 4px;
}
.task-panel-session-add-form[hidden] { display: none; }
.task-panel-session-add-form input[type="datetime-local"] {
    font-size: 13px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    padding: 3px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    color-scheme: light dark;
}
.task-panel-session-add-error {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--warn, #b78a1e);
    background: rgba(183, 138, 30, 0.1);
    padding: 4px 6px;
    border-radius: 4px;
}
.task-panel-session-add-error[hidden] { display: none; }

/* Timeline-Block: pulsierender Dot + Akzent bei laufendem Task. */
.tl-block-running {
    box-shadow: 0 0 0 1px var(--success, #3a8a3a) inset;
}
.tl-block-running-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--success, #3a8a3a);
    animation: pulse-dot 2s ease-in-out infinite;
    vertical-align: middle;
}

/* v0.21.0: Recurrence-Section im Task-Panel (Apple-Kalender-Stil).
   Ruhig integriert zwischen Meta und Projekt, kein eigenes Framing —
   das Panel hat schon genug Chrome. Custom-Panel faltet sich darunter. */
.task-panel-recurrence .task-panel-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.task-panel-recurrence-preset {
    min-width: 200px;
}
.task-panel-recurrence-hint {
    color: var(--text-muted, #666);
    font-size: 12px;
    font-style: italic;
}
.task-panel-recurrence-custom {
    margin-top: 8px;
    padding: 10px 12px;
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-panel-recurrence-row,
.task-panel-recurrence-weekdays,
.task-panel-recurrence-end {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.task-panel-recurrence-interval {
    width: 64px;
}
.task-panel-recurrence-weekdays label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}
.task-panel-recurrence-save {
    align-self: flex-start;
    margin-top: 4px;
}

/* Daily-View: Fokus-Restzeit neben "Aktiv gerade"-Eintraegen.
   Zeigt absteigende Countdown-Zeit (nicht Gesamtzeit) — ADHS-freundlicher.
   Die Gesamtzeit bleibt im Task-Panel sichtbar. */
.active-task-timer {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--success, #3a8a3a);
    background: color-mix(in oklch, var(--success, #3a8a3a) 10%, transparent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.active-task-timer.is-overrun {
    color: var(--warning, #a06a2a);
    background: color-mix(in oklch, var(--warning, #a06a2a) 12%, transparent);
}

/* Generic Modal-Overlay fuer WIP + Over-Run-Dialoge. */
.kira-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.kira-modal {
    background: var(--card-bg, #fff);
    border-radius: 10px;
    padding: 20px 24px;
    width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.kira-modal h3 {
    margin: 0 0 10px 0;
    font-size: 17px;
}
.kira-modal p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.45;
}
.kira-modal-list {
    margin: 0 0 12px 18px;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted, #555);
}
.kira-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    margin: 10px 0;
}
.kira-modal-field input {
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
}
.kira-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}
.kira-modal-actions .btn {
    padding: 7px 14px;
    border: 1px solid var(--border, #ddd);
    background: var(--card-bg, #fff);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.kira-modal-actions .btn-primary {
    border-color: var(--success, #3a8a3a);
    background: var(--success, #3a8a3a);
    color: #fff;
}

/* Trash-View */
.trash-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}
.trash-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.trash-row-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.trash-title {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    flex: 1 1 auto;
}
.trash-title:hover { text-decoration: underline; }
.trash-project {
    font-size: 12px;
    color: var(--text-muted);
}
.trash-row-meta {
    font-size: 12px;
    color: var(--text-muted);
}
.trash-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.btn-danger {
    color: var(--warn);
    border-color: var(--warn);
}
.btn-danger:hover {
    background: var(--warn-soft);
    color: var(--warn);
}

/* Tasks-Filter: Papierkorb-Icon-Link rechts */
.filter-trash-link {
    margin-left: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Reply-Text oben in der Action-Summary (nur wenn mitgegeben) */
.chat-actions-summary-reply {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
    background: transparent;
    border-bottom: 1px solid var(--border);
    line-height: 1.45;
}

/* Back-Link oben in Views (z.B. Trash → zurueck zu Tasks) */
.view-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 8px;
    padding: 4px 0;
}
.view-back:hover { color: var(--accent); }

/* Titel-Edit: Success-Flash nach erfolgreichem Save (fade out nach 1.2s) */
.task-panel-title.is-saved {
    box-shadow: inset 0 0 0 2px var(--success);
    background: var(--success-soft);
    transition: all 0.35s ease-out;
}
.task-panel-title.is-saving {
    opacity: 0.6;
}

/* Chat-Action-Sub: zweite Zeile innerhalb einer Action-Row (initial_note beim Create) */
.chat-action-sub {
    margin-top: 4px;
    padding-left: 0;
    font-size: 13px;
}

/* Sanfte WIP-Warnung als Sub-Zeile in der Chat-Action-Summary.
   Warme Farbe, kein Rot — bleibt freundlich. */
.chat-action-wip {
    color: var(--warn);
    background: var(--warn-soft);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
}

.task-panel-logs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.task-log-entry {
    display: flex;
    gap: 10px;
    font-size: 13px;
    padding: 3px 0;
}

.task-log-status {
    color: var(--text-muted);
    font-style: italic;
}

.task-log-note {
    color: var(--text);
}

.task-log-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-light);
    flex-shrink: 0;
    min-width: 36px;
}

.task-panel-logs-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 0;
}

.task-panel-note-form {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.task-panel-note-input {
    flex: 1;
    padding: 8px 10px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-input);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    resize: none;
    min-height: 52px;
}

.task-panel-note-input:focus {
    border-color: var(--accent);
}

/* ── Ideas View ───────────────────────────── */
.idea-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.5;
}

.idea-tags {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.idea-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Empty States ─────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.empty-state-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.4;
}

/* ── Utilities ────────────────────────────── */
.hidden { display: none !important; }

.view-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ── Animations ───────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .task-item, .idea-item {
    animation: fadeIn 0.25s ease-out;
}

/* ── Chat View ────────────────────────────── */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100dvh - 260px);
    overflow-y: auto;
    padding: 4px 2px;
    margin-bottom: 12px;
}

.chat-msg {
    display: flex;
    max-width: 85%;
    animation: fadeIn 0.2s ease-out;
}

.chat-msg-user {
    align-self: flex-end;
}

.chat-msg-assistant {
    align-self: flex-start;
}

.chat-msg-body {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg-user .chat-msg-body {
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg-assistant .chat-msg-body {
    background: var(--bg-card);
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow);
}

.chat-msg-pending .chat-msg-body {
    opacity: 0.6;
    font-style: italic;
}

.chat-msg-error .chat-msg-body {
    background: var(--warn-soft);
    color: var(--warn);
}

.chat-form {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 80px;
    background: var(--bg);
    padding: 8px 0;
}

#chat-input {
    flex: 1;
    padding: 10px 14px;
    font-size: 16px;
    font-family: var(--font);
    background: var(--bg-input);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
}

#chat-input:focus {
    border-color: var(--accent);
}

#chat-send {
    min-height: 44px;
    padding: 8px 18px;
}

/* Chat: #123-Task-Ref im Message-Body */
.chat-msg-body .task-ref {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    cursor: pointer;
    text-decoration: none;
}
.chat-msg-body .task-ref:hover {
    text-decoration: underline;
}

/* Generischer Undo-Button (wird in Action-Log-View verwendet) */
.btn-undo {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font);
}
.btn-undo:hover { background: var(--border); }
.btn-undo:disabled { opacity: 0.6; cursor: default; }

/* Summary-Box fuer ausgefuehrte Chat-Aktionen.
   30s Timer, gestoppt sobald der Nutzer hovered/klickt — dann nur via X schliessbar.
   Dismiss ist sanft (slide up + fade), Progress-Bar am Fuss zaehlt den Timer ab. */
.chat-actions-summary {
    align-self: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin: 4px 0 12px 0;
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.22s ease-in, opacity 0.22s ease-in,
                margin 0.22s ease-in, max-height 0.22s ease-in;
    max-height: 800px;
}
.chat-actions-summary.is-dismissing {
    transform: translateY(-8px);
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    pointer-events: none;
}
.chat-actions-summary-progress {
    height: 3px;
    background: var(--accent);
    width: 0;
    opacity: 0.5;
    transform-origin: left center;
}
.chat-actions-summary-progress.is-running {
    animation: summary-countdown var(--progress-ms, 30000ms) linear forwards;
}
.chat-actions-summary-progress.is-paused {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
@keyframes summary-countdown {
    from { width: 100%; }
    to   { width: 0%; }
}
.chat-actions-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chat-actions-summary-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.chat-actions-summary-close:hover { color: var(--text); }
.chat-actions-summary-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.chat-action-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}
.chat-action-row + .chat-action-row {
    border-top: 1px dashed var(--border);
}
.chat-action-icon {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: var(--accent);
    font-weight: bold;
}
.chat-action-desc {
    flex: 1 1 auto;
    color: var(--text);
    word-break: break-word;
}
.chat-action-desc .task-ref {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.chat-action-desc .task-ref:hover { text-decoration: underline; }
.chat-action-note {
    color: var(--text-muted);
    font-style: italic;
}
.chat-action-meta {
    color: var(--text-muted);
    font-size: 13px;
}
.chat-action-undo {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font);
}
.chat-action-undo:hover { color: var(--text); background: var(--border); }

/* Daumen hoch/runter auf der Action-Summary — Basis fuer's Training-Set.
   Zwei Zeilen: oben die Buttons, unten (wenn bewertet) das Notiz-Feld. */
.chat-actions-summary-rating {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
.chat-actions-summary-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Standalone-Daumen-Zeile fuer Plain-Chat-Replies (ohne ActionSummary-Box).
   Braucht kein border-top — haengt direkt unter der Assistant-Bubble. */
.chat-rating-row {
    align-self: flex-start;
    max-width: 85%;
    width: 100%;
}
.chat-rating-row .chat-actions-summary-rating {
    border-top: none;
    padding: 4px 12px 4px 4px;
}
.chat-actions-summary-rating-label {
    flex: 0 0 auto;
}
.chat-actions-summary-rating-note {
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.4;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    resize: vertical;
    min-height: 34px;
    width: 100%;
    box-sizing: border-box;
}
.chat-actions-summary-rating-note:focus {
    outline: none;
    border-color: var(--accent);
}
.chat-actions-rate {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.chat-actions-rate:hover:not(:disabled) {
    background: var(--border);
}
.chat-actions-rate:disabled {
    cursor: default;
    opacity: 0.55;
}
.chat-actions-rate.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
}
.chat-actions-summary-rating-ack {
    flex: 1 1 auto;
    text-align: right;
    font-style: italic;
}
.chat-action-undo:disabled { opacity: 0.6; cursor: default; }
.chat-action-row-undone { opacity: 0.5; text-decoration: line-through; }
.chat-action-row-error .chat-action-icon { color: var(--warn); }

/* ── Action-Log View ───────────────────────── */
.action-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.log-row {
    padding: 10px 12px;
    background: var(--bg-card, var(--bg-input));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}
.log-row.is-undone {
    opacity: 0.55;
}
.log-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.log-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    background: var(--bg-muted, #e5e7eb);
    color: var(--text-strong, #111827);
    white-space: nowrap;
}
.log-type--complete   { background: #dcfce7; color: #166534; }
.log-type--create     { background: #dbeafe; color: #1e40af; }
.log-type--set-status { background: #fef3c7; color: #92400e; }
.log-type--snooze     { background: #ede9fe; color: #5b21b6; }
.log-type--delete     { background: #fee2e2; color: #991b1b; }
.log-type--restore    { background: #cffafe; color: #155e75; }
.log-type--reopen     { background: #e0f2fe; color: #075985; }
.log-type--block      { background: #fee2e2; color: #991b1b; }
.log-type--unblock    { background: #dcfce7; color: #166534; }
.log-type--note       { background: #f3f4f6; color: #374151; }
.log-type--nudge      { background: #f3e8ff; color: #6b21a8; }

.view-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.view-hint em { font-style: italic; }
.log-row .task-ref {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    cursor: pointer;
    text-decoration: none;
}
.log-row .task-ref:hover { text-decoration: underline; }
.log-title {
    flex: 1;
    min-width: 0;
}
.log-time {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.log-detail {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.log-row-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}
.log-undone {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Log-Sub-Toggle (Konversationen / Aktionen) ─────────────── */
.log-subtoggle {
    display: flex;
    gap: 6px;
    margin: 0 0 16px 0;
}
.log-subtoggle-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-family: var(--font);
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.log-subtoggle-btn:hover:not(.is-active) {
    color: var(--text);
    border-color: var(--text-muted);
}
.log-subtoggle-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Konversations-Log ──────────────────────────────────────── */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.conv-row {
    background: var(--bg-card, var(--bg-input));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.conv-row--error {
    border-color: var(--warn, #d97706);
}
.conv-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.conv-source {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.conv-source--chat    { background: var(--accent-soft); color: var(--accent); }
.conv-source--capture { background: #fef3c7;           color: #92400e; }
.conv-usecase {
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: 0.7;
}
.conv-error-badge {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}
.conv-fallback-badge {
    background: var(--warn-soft, #fef3c7);
    color: var(--warn, #92400e);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    cursor: help;
}
.conv-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.conv-user {
    border-left: 3px solid var(--border);
    padding: 4px 10px;
    color: var(--text);
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}
.conv-user.is-truncated:not(.is-expanded) {
    color: var(--text-muted);
}
.conv-user-more {
    margin-left: 6px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
}
.conv-user-more:hover { text-decoration: underline; }
.conv-row-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Die ActionSummary-Box kommt mit eigenem Rand; in der Konversations-Row
   wollen wir sie etwas ruhiger — kein Doppel-Border zur conv-row-Card. */
.conv-row-body .chat-actions-summary {
    margin: 0;
}
.conv-reply-plain {
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.conv-error {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--warn, #b45309);
    background: #fef3c7;
    border-radius: 4px;
}
.conv-empty {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.chat-action-undone-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .conv-row {
        padding: 10px 12px;
    }
    .conv-time {
        margin-left: 0;
        width: 100%;
    }
}

/* ── LLM-Calls-Log ─────────────────────────── */
.llm-log-toolbar {
    margin: 0 0 12px 0;
    font-size: 13px;
}
.llm-log-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.llm-log-filter select {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.llm-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.llm-row {
    background: var(--bg-card, var(--bg-input));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.llm-row--error {
    border-color: var(--warn, #d97706);
}
.llm-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.llm-row-head:hover {
    background: var(--bg-input);
}
.llm-usecase {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.llm-model {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    opacity: 0.75;
}
.llm-latency {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    opacity: 0.7;
}
.llm-rating {
    font-size: 13px;
}
.llm-error-badge {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}
.llm-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.llm-row.is-open .llm-row-head {
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}
.llm-row-detail:empty {
    display: none;
}
.llm-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}
.llm-detail-loading {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.llm-detail-error {
    padding: 8px 10px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 4px;
    font-size: 13px;
}
.llm-detail-section > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0;
}
.llm-detail-pre {
    margin: 6px 0 0 0;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow: auto;
    color: var(--text);
}
.llm-detail-rating {
    margin-top: 4px;
}

@media (max-width: 640px) {
    .llm-time {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Settings View ────────────────────────── */

/* Untertab-Navigation (Übersicht / Verbindungen / Profil / App / Konto).
   Optisch analog zu .log-subtoggle, aber eigene Klasse, damit die Views
   nicht semantisch gekoppelt sind. */
.settings-subtoggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px 0;
}
.settings-subtoggle-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-family: var(--font);
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.settings-subtoggle-btn:hover:not(.is-active) {
    color: var(--text);
    border-color: var(--text-muted);
}
.settings-subtoggle-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.settings-tab-panel[hidden] {
    display: none;
}

.settings-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.settings-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.settings-input,
.settings-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-input);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    resize: vertical;
}

.settings-textarea {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    min-height: 160px;
}

.settings-textarea--json {
    white-space: pre;
    overflow-x: auto;
}

.settings-hint--dim {
    color: var(--text-light);
    margin-top: -4px;
    margin-bottom: 8px;
}

.settings-hint--small {
    font-size: 12px;
    font-family: var(--font-mono);
    margin-top: 8px;
    line-height: 1.5;
}

/* Registrierte Push-Geraete im Settings-Erinnerungen-Tab.
   Liste aller Subscriptions eines Users — pro Zeile Label + Meta + Entfernen-Button.
   "Dieses Geraet"-Badge kennzeichnet den aktuellen Browser-Endpoint. */
.push-devices {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.push-devices-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.push-devices-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.push-device {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.push-device-main {
    flex: 1;
    min-width: 0;
}
.push-device-name {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}
.push-device-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.push-device-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--accent);
    color: #fff;
    margin-left: 6px;
    vertical-align: middle;
}
.push-device-error {
    display: block;
    font-size: 12px;
    color: var(--danger, #d33);
    margin-top: 4px;
}
.push-device-delete {
    flex-shrink: 0;
}

.settings-hint code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 4px;
}

.settings-input:focus,
.settings-textarea:focus {
    border-color: var(--accent);
}

.settings-input--narrow {
    width: 100px;
}

.settings-inline-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 10px;
    font-size: 14px;
    color: var(--text);
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

/* Theme-Switcher — Card-Grid mit Farb-Vorschau pro Theme (v0.16.1) */
.theme-group {
    margin-top: 14px;
}

.theme-group:first-of-type {
    margin-top: 6px;
}

.theme-group-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 640px) {
    .theme-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .theme-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.theme-option:hover {
    border-color: var(--accent);
}

.theme-option:active {
    transform: scale(0.98);
}

.theme-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-option[aria-checked="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.theme-option-swatch {
    flex-shrink: 0;
    display: inline-flex;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.theme-option-swatch > span {
    display: block;
    width: 14px;
    height: 28px;
}

.theme-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rotate-invite-output {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-input);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
}

.rotate-invite-token {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    word-break: break-all;
    user-select: all;
}

/* Wrapper erlaubt horizontales Scrollen, damit die 6-Spalten-Tabelle auf
   iPhone-Portrait (ca. 343px Card-Inhalt) nicht aus der Card raussticht. */
#user-list-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.user-list-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 14px;
}

.user-list-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}

.user-list-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.user-list-table tbody tr:last-child td {
    border-bottom: none;
}

.user-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.user-status.is-active {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.user-status.is-inactive {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-dim);
}

.user-role-admin {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
}

.user-role-user {
    font-size: 12px;
    color: var(--text-dim);
}

.user-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.settings-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.settings-status {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-status.is-success {
    color: var(--success);
}

.settings-status.is-error {
    color: var(--warn);
}

/* Codex-Verbindung: farblicher Border je nach Status */
#codex-card {
    border-left: 4px solid var(--border);
}
#codex-card[data-codex-state="connected"] {
    border-left-color: var(--success);
}
#codex-card[data-codex-state="disconnected"],
#codex-card[data-codex-state="error"] {
    border-left-color: var(--warn);
}
#codex-card[data-codex-state="loading"],
#codex-card[data-codex-state="unknown"] {
    border-left-color: var(--text-light);
}

/* Apple-Verbindung: gleiche Struktur wie Codex */
#apple-card {
    border-left: 4px solid var(--border);
}
#apple-card[data-apple-state="connected"] {
    border-left-color: var(--success);
}
#apple-card[data-apple-state="disconnected"],
#apple-card[data-apple-state="error"] {
    border-left-color: var(--warn);
}
#apple-card[data-apple-state="loading"] {
    border-left-color: var(--text-light);
}
.apple-connect-form .settings-input {
    margin-top: 8px;
}
.apple-calendar-list {
    list-style: none;
    margin: 12px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.apple-calendar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg);
    border-radius: 6px;
    gap: 12px;
}
.apple-calendar-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}
.apple-calendar-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.apple-calendar-radio.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.apple-badge-ro {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 10px;
    color: var(--text-muted);
    background: transparent;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Version-Zeile ganz unten in Settings */
.settings-version {
    margin-top: 32px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 11px;
    color: var(--text-light);
    font-family: var(--font-mono);
}
.settings-version a {
    color: inherit;
    text-decoration: none;
}
.settings-version a:hover { color: var(--accent); }

/* ── Card-Header als Link (z.B. "Gestern geschafft →" in Daily) ── */
.card-header-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card-header-link:hover { color: var(--accent); }

/* ── Wins View ────────────────────────────── */
.wins-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input, var(--bg));
    border-radius: 10px;
    vertical-align: middle;
}

.wins-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wins-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.wins-item:last-child { border-bottom: none; }

.wins-time {
    color: var(--text-light);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.wins-content {
    color: var(--text);
    word-break: break-word;
}

.wins-refs { margin-left: 4px; }
.wins-refs .task-ref {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    margin-right: 3px;
}
.wins-refs .task-ref:hover { text-decoration: underline; }

.wins-project {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--accent-soft);
    border-radius: 8px;
}

.wins-source {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    background: var(--bg-input, var(--bg));
}
.wins-source--chat { color: var(--accent); background: var(--accent-soft); }

/* ── Settings-Links (Mehr-Hub) ────────────── */
.settings-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.settings-links li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.settings-links li:last-child { border-bottom: none; }
.settings-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    display: block;
}
.settings-links a:hover { color: var(--accent); }

@keyframes task-row-pulse-kf {
    0%   { background-color: transparent; }
    20%  { background-color: rgba(91, 106, 191, 0.18); }
    100% { background-color: transparent; }
}
.task-row-pulse {
    animation: task-row-pulse-kf 1.2s ease-out;
    border-radius: 8px;
}

/* Completion-Puls (v0.19.5) — dopaminerges Feedback beim Task-Abschluss.
   Kurzer Glow in --success, keine Bewegung. Siehe PRD §6 (Dopaminerge
   Feedback-Schicht). */
@keyframes task-complete-pulse-kf {
    0%   { background-color: transparent; box-shadow: none; }
    25%  { background-color: var(--success-soft); box-shadow: 0 0 0 2px var(--success); }
    100% { background-color: transparent; box-shadow: none; }
}
.task-complete-pulse {
    animation: task-complete-pulse-kf 600ms ease-out;
    border-radius: 8px;
}

/* Celebration-Chip (v0.19.6) — kurzer Glueckwunsch-Text neben der Row beim
   Abschluss. Floatet 1.6s auf, dann weg. Text kommt aus SMALL_WINS-Pool
   (window.KiraPulse). Fixed-positioning via getBoundingClientRect, damit
   overflow:hidden an der Row-Umgebung keinen Clip verursacht. */
@keyframes celebration-float-kf {
    0%   { opacity: 0; transform: translateY(0); }
    15%  { opacity: 1; transform: translateY(-4px); }
    80%  { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-18px); }
}
.task-celebration {
    position: fixed;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    pointer-events: none;
    z-index: 9999;
    animation: celebration-float-kf 1600ms ease-out forwards;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Keyboard-Fokus fuer j/k-Navigation (Sprint 6 §7). Dezenter Akzent-Balken
   am linken Rand — non-layout-shifting via box-shadow inset. */
.is-kbd-focused {
    box-shadow: inset 3px 0 0 var(--accent);
    border-radius: 6px;
}

/* ── Task-Search-Wrap mit eigenem Clear-X ─── */
.task-search-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}
.task-search-wrap .task-search {
    width: 100%;
    padding-right: 34px;
}
.task-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    line-height: 1;
}
.task-search-clear:hover {
    background: var(--accent);
    color: white;
}
.task-search-clear[hidden] { display: none; }

/* ── Drag-Handle + Drop-Targets ───────────── */
.task-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-height: 32px;
    color: var(--text-light);
    cursor: grab;
    user-select: none;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    flex-shrink: 0;
}
.task-handle:hover { color: var(--text-muted); }
.task-handle:active { cursor: grabbing; }

.task-item.is-dragging {
    opacity: 0.4;
}
.task-item.drop-above {
    box-shadow: 0 -2px 0 0 var(--accent), var(--shadow);
}
.task-item.drop-below {
    box-shadow: 0 2px 0 0 var(--accent), var(--shadow);
}

/* ── Priority-Label-Badge in Task-Liste ───── */
.task-prio {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
    vertical-align: middle;
}
.task-prio-low      { background: var(--border); color: var(--text-muted); }
.task-prio-medium   { background: var(--accent-soft); color: var(--accent); }
.task-prio-high     { background: var(--warn-soft); color: var(--warn); }
.task-prio-critical { background: var(--warn); color: white; }

/* ── Task-Panel: Priority-Buttons ─────────── */
.task-panel-priority .btn-prio.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.task-panel-priority .btn-prio.is-active:hover {
    background: var(--accent);
    color: white;
}

/* ── Task-Panel: Meta-Section (Due + Estimate) */
.task-panel-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.task-panel-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.task-panel-field .task-panel-section-label {
    width: auto;
    margin-bottom: 0;
    min-width: 60px;
}
.task-panel-due,
.task-panel-due-time {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font);
}
.task-panel-due { flex: 1; min-width: 140px; }
.task-panel-due-time { flex: 0 0 auto; width: 100px; }
.task-panel-due:focus,
.task-panel-due-time:focus { outline: none; border-color: var(--accent); }

.task-panel-clear-due {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.task-panel-clear-due:hover { background: var(--border); color: var(--text); }

/* „Geplant fuer" — geplanter Arbeits-Slot (nicht Deadline). Gleiches
   Input-Styling wie die due-Felder, aber visuell dezent abgesetzt via
   dünnerer Trennlinie oben. */
.task-panel-scheduled {
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.task-panel-scheduled-date,
.task-panel-scheduled-time {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font);
}
.task-panel-scheduled-date { flex: 1; min-width: 140px; }
.task-panel-scheduled-time { flex: 0 0 auto; width: 100px; }
.task-panel-scheduled-date:focus,
.task-panel-scheduled-time:focus { outline: none; border-color: var(--accent); }
.task-panel-clear-scheduled {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.task-panel-clear-scheduled:hover { background: var(--border); color: var(--text); }

/* „Deadline verstrichen" — warmer Hinweis, ADHS-freundlich (kein Rot).
   ADHS-Prinzip: „Kein Overdue-Friedhof" — der Badge informiert, bestraft
   nicht. Warme Amber-Variable --warn (#c4873b) aus der Palette. */
.task-panel-deadline-past {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.task-panel-deadline-past[hidden] { display: none; }

.task-panel-estimate-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.task-panel-estimate-wrap .task-panel-section-label {
    width: auto;
    margin-bottom: 0;
    min-width: 60px;
}
.estimate-preset {
    min-width: 46px;
    padding: 6px 10px;
    font-size: 13px;
}
.estimate-preset.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.estimate-preset.is-active:hover {
    background: var(--accent);
    color: white;
}
.task-panel-estimate {
    width: 70px;
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font);
    text-align: right;
}
.task-panel-estimate:focus { outline: none; border-color: var(--accent); }

/* ── Task-Panel: Projekt-Feld ─────────────── */
.task-panel-project-input {
    flex: 1;
    min-width: 160px;
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font);
}
.task-panel-project-input:focus { outline: none; border-color: var(--accent); }

/* ── Reminder-Panel (v0.11.0) ──────────────
   Erbt die komplette Shell (overlay, slide, header) aus .task-panel-*,
   hier nur Reminder-spezifische Felder. */
.reminder-panel-when .reminder-panel-date,
.reminder-panel-when .reminder-panel-time {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text);
}
.reminder-panel-when .reminder-panel-date { flex: 1; min-width: 140px; }
.reminder-panel-when .reminder-panel-time { flex: 0 0 auto; width: 110px; }
.reminder-panel-when .reminder-panel-date:focus,
.reminder-panel-when .reminder-panel-time:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.reminder-panel-repeat .btn-repeat.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.reminder-panel-repeat .btn-repeat.is-active:hover {
    background: var(--accent);
    color: white;
}
.reminder-panel-info {
    gap: 10px;
}
.reminder-panel-created {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

/* Task-Panel als Side-Panel auf Desktop (Sprint 6 §5).
   Ab 1200px sitzt das Panel fix in der rechten 420px-Spalte (wo sonst die
   Timeline liegt). Daily-Main bleibt voll nutzbar, Edits am Panel schlagen
   live in der Liste durch. Mobile/Tablet bleibt Bottom-Sheet. */
@media (min-width: 1200px) {
    .task-panel-overlay {
        /* Position matcht die daily-side-Spalte:
           top  80 = Capture-Bar (56) + #app padding-top (24)
           right 32 = #app padding-right
           bottom 40 = #app padding-bottom */
        top: 80px;
        right: 32px;
        bottom: 40px;
        left: auto;
        width: var(--col-panel);
    }

    .task-panel-overlay .task-panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
        animation: slideInRight 0.22s ease-out;
    }

    @keyframes slideInRight {
        from { transform: translateX(16px); opacity: 0; }
        to   { transform: translateX(0);    opacity: 1; }
    }

    /* Timeline weicht dem Panel — visibility statt display, damit das
       daily-grid seine Spaltenbreite behält und daily-main nicht springt. */
    body:has(.task-panel-overlay.is-open) .daily-side {
        visibility: hidden;
    }
}

/* ── Responsive ───────────────────────────── */
@media (min-width: 768px) {
    #app {
        max-width: 640px;
    }

    #nav-bar {
        max-width: 640px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* Tablet: Daily + Timeline nebeneinander; Sidebar noch nicht.
   Grid-Füllung passiert in Sprint-6-Schritt 3/4 (Daily-Reordering + Timeline-Neubau).
   Hier nur Vorbereitung: #app darf volle Breite nehmen, Capture-Bar bleibt gleich. */
@media (min-width: 900px) {
    #app {
        max-width: var(--max-content);
        padding: 20px 24px 100px;
    }
}

/* Desktop: Body wird Grid mit Sidebar links, Capture-Bar spannt beide Spalten.
   Bottom-Nav entfällt — Navigation läuft über die Sidebar. */
@media (min-width: 1200px) {
    body {
        display: grid;
        grid-template-columns: var(--col-sidebar) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "capture capture"
            "sidebar main";
        min-height: 100dvh;
    }

    #capture-bar { grid-area: capture; }

    #sidebar {
        grid-area: sidebar;
        display: flex;
        position: sticky;
        /* Unter der Capture-Bar kleben, nicht am Viewport-Top — sonst scrollt
           die Sidebar erst um die Capture-Hoehe mit, bevor sticky greift. */
        top: var(--capture-height);
        align-self: start;
        /* Hoehe folgt dynamisch der Capture-Bar — wenn Summary-Box erscheint,
           wird Capture hoeher und die Sidebar schrumpft entsprechend, damit
           ihr Footer (Version) nicht unter den Viewport rutscht. */
        height: calc(100dvh - var(--capture-height));
        overflow-y: auto;
    }

    #app {
        grid-area: main;
        padding: 24px 32px 40px;
        max-width: none;
    }

    #nav-bar {
        display: none;
    }

    /* Inline-Motto versteckt — Sidebar zeigt es stattdessen. */
    .motto-inline {
        display: none;
    }

    /* Bottom-Nav ist auf Desktop in die Sidebar gewandert — die 80px-
       Clearance fuer die mobile Nav-Leiste darf die Eingabezeile hier
       nicht mehr nach oben druecken. */
    .chat-form {
        bottom: 0;
    }
}

/* ─── Week-View (Sprint 10) ─────────────────────────────────────
   Liste aus 7 Tagesgruppen. Pro Event ein Farb-Balken links in der
   Kalender-Farbe (Inline-Style aus dem Renderer). Rein lesend. */
.week-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 100px;
}
.week-day {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.week-day.is-today {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.week-day-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.week-day-date {
    font-weight: 600;
    font-size: 15px;
}
.week-day-weekday {
    color: var(--text-muted);
}
.week-day-today {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.week-day-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 2px;
}

.week-allday-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.week-allday {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 10px;
    background: var(--accent-soft);
    border-radius: 6px;
    border-left: 4px solid var(--accent);
    font-size: 13px;
}
.week-allday-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.week-allday-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.week-event {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 8px 6px 10px;
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    background: transparent;
    font-size: 14px;
}
.week-event:hover {
    background: var(--accent-soft);
}
.week-event-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 82px;
}
.week-event-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    min-width: 0;
}
.week-event-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.week-event-cal,
.week-event-loc {
    font-size: 11px;
    color: var(--text-muted);
}
.week-event-cal {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
}

/* v0.18.3 — Kalender-Sync-Button (Daily Tagesverlauf + Week Header). */
.btn-calendar-sync {
    width: 26px;
    height: 26px;
    font-size: 14px;
    margin-left: auto;
    color: var(--text-muted);
}
.btn-calendar-sync.is-syncing {
    animation: spin 0.9s linear infinite;
    color: var(--success, #3a8a3a);
}
.btn-calendar-sync.is-synced {
    color: var(--success, #3a8a3a);
}
.btn-calendar-sync.is-sync-error {
    color: var(--danger, #b73b3b);
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.card-header:has(.btn-calendar-sync),
.view-title:has(.btn-calendar-sync) {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Task-Zerlegung (v0.19.0) ───────────────────────────────────────── */

.task-panel-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-panel-breakdown-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.btn-breakdown-toggle {
    white-space: nowrap;
}

.task-panel-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.task-panel-breakdown-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.task-panel-breakdown-error {
    color: var(--danger, #b73b3b);
    font-size: 13px;
    margin-top: 6px;
}

/* Split-Button: "Neuer Versuch" + Chevron-Dropdown mit Detailgrad */
.btn-split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.btn-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.btn-split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 4px 6px;
    font-size: 12px;
}
.btn-split-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    background: var(--bg-elev, var(--bg));
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 4px;
}
.btn-split-menu-item {
    text-align: left;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    border-radius: 3px;
    font: inherit;
}
.btn-split-menu-item:hover {
    background: var(--accent-soft);
}

/* Undo-Toast nach Sub-Task-Delete — 6s sichtbar, unten-mittig.
   Parallel zum breakdown-feedback-toast (rechts-unten), bewusst andere
   Position damit beide sich nicht ueberlappen wenn sie gleichzeitig
   auftauchen. */
.subtask-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-elev, #333);
    color: var(--text, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    font-size: 14px;
    animation: subtaskUndoSlideIn 0.18s ease-out;
    max-width: calc(100vw - 32px);
}
@keyframes subtaskUndoSlideIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.subtask-undo-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subtask-undo-btn {
    padding: 4px 10px;
    font-weight: 500;
}
.subtask-undo-close {
    font-size: 16px;
    padding: 2px 6px;
    opacity: 0.6;
}
.subtask-undo-close:hover { opacity: 1; }
.task-panel-breakdown-budget {
    width: 110px;
    padding: 4px 6px;
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
}

/* Spice-Slider: 3-State Button-Group */
.spice-slider {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.spice-option {
    padding: 4px 10px;
    border: 0;
    border-right: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted, #777);
    font: inherit;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.spice-option:last-child { border-right: 0; }
.spice-option:hover { background: var(--accent-soft); }
.spice-option.is-active {
    background: var(--accent, #4a7db8);
    color: #fff;
}

/* Preview-Liste (vorgeschlagene Sub-Tasks vor Uebernahme) */
.task-panel-breakdown-summary {
    font-size: 13px;
    color: var(--text-muted, #666);
    margin: 6px 0 4px;
    font-style: italic;
}
.task-panel-breakdown-preview-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.breakdown-preview-item {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elev, var(--bg));
}
.breakdown-preview-item.is-first {
    border-left: 3px solid var(--accent, #4a7db8);
}
.breakdown-preview-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.breakdown-preview-index {
    color: var(--text-muted, #777);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
}
.breakdown-preview-title {
    flex: 1;
    font-weight: 500;
    min-width: 150px;
}
.breakdown-preview-min {
    font-size: 12px;
    color: var(--text-muted, #777);
    font-variant-numeric: tabular-nums;
}
.breakdown-preview-rationale {
    font-size: 12px;
    color: var(--text-muted, #888);
    margin-top: 4px;
    padding-left: 28px;
    font-style: italic;
}

/* Energy-Pills — low/medium/high */
.energy-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    text-transform: lowercase;
    border: 1px solid transparent;
}
.energy-pill.energy-low {
    background: #eaf5ff;
    color: #2a6db0;
    border-color: #cfe3f7;
}
.energy-pill.energy-medium {
    background: #fff5e5;
    color: #a05d00;
    border-color: #f4dbb0;
}
.energy-pill.energy-high {
    background: #ffe5e5;
    color: #a43030;
    border-color: #f4b0b0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .energy-pill.energy-low {
        background: rgba(74, 125, 184, 0.2);
        color: #9ec7ee;
        border-color: rgba(74, 125, 184, 0.35);
    }
    .energy-pill.energy-medium {
        background: rgba(160, 93, 0, 0.25);
        color: #f0c080;
        border-color: rgba(160, 93, 0, 0.45);
    }
    .energy-pill.energy-high {
        background: rgba(164, 48, 48, 0.25);
        color: #f0a0a0;
        border-color: rgba(164, 48, 48, 0.45);
    }
}

/* Children-Liste (persistierte Sub-Tasks im Panel) */
.task-panel-breakdown-children {
    margin-top: 6px;
}
.task-panel-breakdown-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.task-panel-breakdown-progress-label {
    font-size: 12px;
    color: var(--text-muted, #777);
    min-width: 110px;
}
.task-panel-breakdown-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.task-panel-breakdown-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent, #4a7db8);
    transition: width 0.3s ease;
}
.task-panel-breakdown-children-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.subtask-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
}
.subtask-row:hover {
    background: var(--accent-soft);
}
.subtask-row.is-done .subtask-title-edit {
    text-decoration: line-through;
    color: var(--text-muted, #888);
}
.subtask-check {
    font-size: 14px;
    line-height: 1;
}
.subtask-index {
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.subtask-index:hover { color: var(--accent, #4a7db8); }
.subtask-title-edit {
    flex: 1;
    min-width: 100px;
    color: var(--text);
    cursor: text;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid transparent;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}
.subtask-title-edit:hover {
    border-color: var(--border);
}
.subtask-title-edit:focus {
    background: var(--bg-elev, var(--bg));
    border-color: var(--accent, #4a7db8);
}
.subtask-min {
    font-size: 12px;
    color: var(--text-muted, #777);
    font-variant-numeric: tabular-nums;
}
.subtask-delete-btn {
    opacity: 0.35;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-muted, #888);
    transition: opacity 0.15s, color 0.15s;
}
.subtask-row:hover .subtask-delete-btn,
.subtask-delete-btn:focus { opacity: 1; }
.subtask-delete-btn:hover { opacity: 1; color: var(--danger, #c25); }
.subtask-reestimate-btn {
    opacity: 0.35;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-muted, #888);
    transition: opacity 0.15s, color 0.15s, transform 0.4s ease;
}
.subtask-row:hover .subtask-reestimate-btn,
.subtask-reestimate-btn:focus { opacity: 1; }
.subtask-reestimate-btn:hover { opacity: 1; color: var(--accent, #4a7db8); }
.subtask-reestimate-btn.is-busy {
    opacity: 1;
    color: var(--accent, #4a7db8);
    animation: subtask-reestimate-spin 0.9s linear infinite;
}
@keyframes subtask-reestimate-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.subtask-row.is-reestimated .subtask-min,
.subtask-row.is-reestimated .energy-pill {
    transition: background-color 0.6s ease;
    background-color: color-mix(in oklch, var(--accent, #4a7db8) 22%, transparent);
}
.subtask-add-row {
    padding: 4px 0 2px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
}
.subtask-add-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    font: inherit;
    color: var(--text-muted, #888);
    cursor: pointer;
    border-radius: 3px;
}
.subtask-add-btn:hover {
    background: var(--accent-soft);
    color: var(--text);
}
.subtask-add-form {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
}
.subtask-add-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.subtask-add-input:focus {
    outline: none;
    border-color: var(--accent, #4a7db8);
}

/* Daily-View: eingerueckte Sub-Task-Liste unter Parent */
.priority-item.has-children { padding-bottom: 4px; }
.subtask-progress {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent-soft, rgba(74,125,184,0.12));
    color: var(--accent, #4a7db8);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* v0.19.8 — Σ-Summe der Sub-Task-Schaetzungen in der Heute-Liste.
   Setzt neben dem Done/Total-Progress-Badge, dezent damit es nicht
   als zweiter Counter konkurriert: kein Hintergrund, nur gemuttete
   Typografie. */
.subtask-total-min {
    display: inline-block;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    margin-left: 2px;
}
.priority-subtask-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}
.priority-subtask-list {
    list-style: none;
    padding: 0 0 6px 28px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid var(--border);
    margin-left: 12px;
}
.priority-subtask {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    font-size: 13px;
    color: var(--text-muted, #555);
    cursor: pointer;
    border-radius: 3px;
}
.priority-subtask:hover { background: var(--accent-soft); color: var(--text); }
.priority-subtask.is-done .subtask-title { text-decoration: line-through; color: var(--text-muted, #aaa); }
.subtask-bullet {
    color: var(--text-muted, #888);
    font-size: 11px;
    min-width: 14px;
}
.subtask-title { flex: 1; min-width: 100px; }

/* Feedback-Toast */
.breakdown-feedback-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-elev, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    z-index: 999;
    max-width: 360px;
    animation: toastSlideIn 0.25s ease-out;
}
@keyframes toastSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.feedback-toast-title {
    font-weight: 500;
    margin-bottom: 8px;
}
.feedback-toast-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.feedback-toast-close {
    margin-left: auto;
}

/* Focus Timer (v0.20.0) — floating bar bottom-center, persistent ueber Routes */
.next-step-focus-btn {
    margin-top: 12px;
    background: var(--accent);
    color: var(--bg-card);
    border: none;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s;
    line-height: 1.2;
}
.next-step-focus-btn:hover { filter: brightness(1.08); }
.next-step-focus-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* v0.22.0: FocusTimer-Floating-Bar entfernt. Die Block-Rest-Zeit wird an
   zwei ruhigen Orten gespiegelt: .active-task-timer (Aktiv-Card, Cockpit)
   und .zs-block.is-running (Zeitstrom). Beide lesen aus ActiveBlock-Modul. */

/* ── Zeitstrom-View (v0.20.2) ─────────────────────────────────────
   Tiimo-inspirierte vertikale Tagesansicht. PIXEL_PER_MIN = 4 in
   zeitstrom.js — falls hier Werte angepasst werden, dort spiegeln. */

.daily-view-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.daily-view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 2px;
    gap: 0;
}
.daily-view-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.daily-view-btn:hover {
    color: var(--text-primary);
}
.daily-view-btn.is-active {
    background: var(--accent);
    color: white;
}

/* ─────────────────────────────────────────────────────────────
   Zeitstrom (v0.22.2) — Tiimo-Klon:
   Mobile: Tag-Ansicht mit ← / → Navigation.
   Desktop: 7-Spalten-Wochen-Ansicht.
   Karten proportional zur Dauer, aber auto-fit auf Viewport.
   Leerzeiten-Chips nur per Toggle, keine globale Zeitachse.
   ───────────────────────────────────────────────────────────── */
.zs-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.zs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.zs-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.zs-title {
    font-size: 18px;
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}
.zs-date {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.zs-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.zs-header-right > * { flex-shrink: 0; }
/* Auf schmalen Desktop/Tablet-Viewports springt die Reihe als Block in eine
   eigene Zeile — so bleibt der Cockpit-Toggle garantiert sichtbar, auch wenn
   Range-Switcher + Toggle + Lücken zusammen nicht in eine Zeile passen. */
@media (max-width: 1100px) {
    .zs-header {
        flex-direction: column;
        align-items: stretch;
    }
    .zs-header-left { flex-direction: row; align-items: center; gap: 12px; }
    .zs-header-right { width: 100%; justify-content: flex-start; }
}
.zs-loading,
.zs-error {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.zs-error-inline,
.zs-loading-inline {
    padding: 14px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

/* Tag/Woche-Navigation */
.zs-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.zs-nav-btn,
.zs-nav-today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 120ms, color 120ms, border-color 120ms;
    font-variant-numeric: tabular-nums;
}
.zs-nav-btn:hover,
.zs-nav-today:hover {
    background: color-mix(in oklch, var(--accent) 10%, var(--bg-card));
    border-color: color-mix(in oklch, var(--accent) 35%, var(--border-soft));
    color: var(--accent);
}
.zs-nav-today {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
}
.zs-nav-today.is-on-today {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--accent);
    border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

/* Lücken-Toggle */
.zs-gaps-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
    font-variant-numeric: tabular-nums;
}
.zs-gaps-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border);
}
.zs-gaps-toggle.is-on {
    background: color-mix(in oklch, var(--accent) 14%, transparent);
    color: var(--accent);
    border-color: color-mix(in oklch, var(--accent) 35%, transparent);
}
.zs-gaps-toggle-icon { font-size: 13px; line-height: 1; }

/* Range-Switcher (Ansicht umschalten: 1 Tag / 3 / 5 / Woche) */
.zs-range {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.zs-range-btn {
    appearance: none;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    white-space: nowrap;
}
.zs-range-btn:hover {
    color: var(--text-primary);
    background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.zs-range-btn.is-active {
    background: var(--accent);
    color: #fff;
}

/* Grid-Layout — variable Spaltenzahl */
.zs-grid {
    flex: 1 1 auto;
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}
.zs-grid-1 { grid-template-columns: minmax(0, 1fr); }
.zs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zs-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zs-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Spalte pro Tag */
.zs-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    background: var(--bg);
    border-radius: 10px;
    padding: 6px 4px 8px;
    border: 1px solid transparent;
}
.zs-grid-1 .zs-col { padding: 4px 2px 16px; background: transparent; }
.zs-col.is-today {
    background: color-mix(in oklch, var(--accent) 6%, var(--bg));
    border-color: color-mix(in oklch, var(--accent) 25%, transparent);
}
.zs-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 120ms, color 120ms;
}
.zs-col-head:hover {
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    color: var(--accent);
}
.zs-col.is-today .zs-col-head { color: var(--accent); }
.zs-col-weekday {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.zs-col-daynum {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.1;
}
.zs-col.is-today .zs-col-daynum { color: var(--accent); }
.zs-col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.zs-grid-1 .zs-col-body { overflow-y: auto; }

.zs-stream {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 2px;
}
.zs-grid-1 .zs-stream { gap: 6px; }
.zs-empty-stream { min-height: 80px; }
.zs-empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-card);
    border: 1px dashed var(--border-soft);
    border-radius: 10px;
}

/* Cockpit-Toggle prominent (direkt rechts vom Range-Switcher sichtbar) */
.zs-header-right .daily-view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.zs-header-right .daily-view-btn {
    appearance: none;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    white-space: nowrap;
}
.zs-header-right .daily-view-btn:hover {
    color: var(--text-primary);
    background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.zs-header-right .daily-view-btn.is-active {
    background: var(--accent);
    color: #fff;
}

/* ── Karten-Basis ─────────────────────────────────────────── */
.zs-card {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: stretch;
    height: var(--block-height, 72px);
    padding: 6px 10px 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.zs-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.zs-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.zs-card.is-compact { padding: 4px 8px 4px 6px; gap: 8px; border-radius: 8px; }
.zs-card.is-tiny    { padding: 3px 6px 3px 4px; gap: 6px; }

/* Icon-Kreis links */
.zs-card-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    background: color-mix(in oklch, var(--accent) 14%, var(--bg));
    align-self: flex-start;
    user-select: none;
}
.zs-card.is-compact .zs-card-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
.zs-card.is-tiny    .zs-card-icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 10px; }

/* Body */
.zs-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 2;
}
.zs-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.zs-card-time { font-weight: 500; color: var(--text-muted); }
.zs-card-dur {
    color: var(--text-light, var(--text-muted));
    font-size: 11px;
    opacity: 0.85;
}
.zs-card-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.zs-card.is-compact .zs-card-title { font-size: 12px; -webkit-line-clamp: 1; }
.zs-card.is-tiny    .zs-card-title { font-size: 11px; -webkit-line-clamp: 1; font-weight: 600; }
.zs-card.is-compact .zs-card-head  { font-size: 10px; gap: 4px 8px; }
.zs-card.is-tiny    .zs-card-head  { font-size: 9px;  gap: 3px 6px; }
.zs-card.is-compact .zs-card-meta,
.zs-card.is-tiny    .zs-card-meta,
.zs-card.is-tiny    .zs-card-dur { display: none; }

.zs-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zs-card-project { font-weight: 500; }

/* Kleine Pillen im Head */
.zs-card-sub,
.zs-card-rest,
.zs-card-check {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.zs-card-sub {
    background: color-mix(in oklch, var(--text-muted) 14%, transparent);
    color: var(--text-primary);
}
.zs-card-rest {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--success, #3a8a3a);
    background: color-mix(in oklch, var(--success, #3a8a3a) 12%, transparent);
    margin-left: auto;
}
.zs-card-rest.is-overtime {
    color: var(--warning, #a06a2a);
    background: color-mix(in oklch, var(--warning, #a06a2a) 14%, transparent);
}
.zs-card-check {
    color: var(--success, #3a8a3a);
    background: color-mix(in oklch, var(--success, #3a8a3a) 14%, transparent);
    padding: 0 6px;
    font-size: 11px;
}

/* Running-Dot */
.zs-running-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #4ea876);
    box-shadow: 0 0 0 0 rgba(78,168,118,0.55);
    animation: zs-pulse 1600ms ease-out infinite;
}
@keyframes zs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(78,168,118,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(78,168,118,0); }
    100% { box-shadow: 0 0 0 0 rgba(78,168,118,0); }
}

/* „Jetzt starten"-Button — erscheint bei Hover/Focus */
.zs-card-start {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in oklch, var(--accent) 22%, transparent);
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transition: opacity 150ms, background-color 150ms, transform 150ms;
    z-index: 3;
}
.zs-card:hover .zs-card-start,
.zs-card:focus-within .zs-card-start { opacity: 1; }
.zs-card-start:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.06);
}

/* Projekt-Farbe: linker Border + dezenter Fond hinter dem Body */
.zs-card.zs-card-cat-1 { border-left-color: var(--cat-1); }
.zs-card.zs-card-cat-2 { border-left-color: var(--cat-2); }
.zs-card.zs-card-cat-3 { border-left-color: var(--cat-3); }
.zs-card.zs-card-cat-4 { border-left-color: var(--cat-4); }
.zs-card.zs-card-cat-5 { border-left-color: var(--cat-5); }
.zs-card.zs-card-cat-6 { border-left-color: var(--cat-6); }
.zs-card.zs-card-cat-7 { border-left-color: var(--cat-7); }
.zs-card.zs-card-cat-8 { border-left-color: var(--cat-8); }

.zs-card.zs-card-cat-1 { background: color-mix(in oklch, var(--cat-1) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-2 { background: color-mix(in oklch, var(--cat-2) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-3 { background: color-mix(in oklch, var(--cat-3) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-4 { background: color-mix(in oklch, var(--cat-4) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-5 { background: color-mix(in oklch, var(--cat-5) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-6 { background: color-mix(in oklch, var(--cat-6) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-7 { background: color-mix(in oklch, var(--cat-7) 10%, var(--bg-card)); }
.zs-card.zs-card-cat-8 { background: color-mix(in oklch, var(--cat-8) 10%, var(--bg-card)); }

.zs-card.zs-card-cat-1 .zs-card-icon { background: color-mix(in oklch, var(--cat-1) 28%, var(--bg)); }
.zs-card.zs-card-cat-2 .zs-card-icon { background: color-mix(in oklch, var(--cat-2) 28%, var(--bg)); }
.zs-card.zs-card-cat-3 .zs-card-icon { background: color-mix(in oklch, var(--cat-3) 28%, var(--bg)); }
.zs-card.zs-card-cat-4 .zs-card-icon { background: color-mix(in oklch, var(--cat-4) 28%, var(--bg)); }
.zs-card.zs-card-cat-5 .zs-card-icon { background: color-mix(in oklch, var(--cat-5) 28%, var(--bg)); }
.zs-card.zs-card-cat-6 .zs-card-icon { background: color-mix(in oklch, var(--cat-6) 28%, var(--bg)); }
.zs-card.zs-card-cat-7 .zs-card-icon { background: color-mix(in oklch, var(--cat-7) 28%, var(--bg)); }
.zs-card.zs-card-cat-8 .zs-card-icon { background: color-mix(in oklch, var(--cat-8) 28%, var(--bg)); }

/* Energy-Level via linker Border-Breite */
.zs-card-energy-low    { border-left-width: 3px; }
.zs-card-energy-medium { border-left-width: 4px; }
.zs-card-energy-high   { border-left-width: 6px; }

/* Plan-Block (scheduled, nicht laufend): gestrichelt, entsättigt */
.zs-card.is-plan {
    background: var(--bg-card);
    border-style: dashed;
    border-left-style: dashed;
}
.zs-card.is-plan .zs-card-title { color: var(--text-muted); font-weight: 500; }

/* Laufender Block: grüner Ring + sanfter Progress-Fill von oben */
.zs-card.is-running {
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--success, #4ea876) 55%, transparent),
                0 2px 10px rgba(0,0,0,0.06);
    border-color: color-mix(in oklch, var(--success, #4ea876) 40%, var(--border-soft));
}
.zs-card.is-now::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--now-fill, 0%);
    background: linear-gradient(
        to bottom,
        color-mix(in oklch, var(--success, #4ea876) 12%, transparent),
        color-mix(in oklch, var(--success, #4ea876) 20%, transparent)
    );
    border-bottom: 1px solid color-mix(in oklch, var(--success, #4ea876) 45%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: height 400ms ease-out;
}

/* Erledigt */
.zs-card.is-done {
    opacity: 0.55;
}
.zs-card.is-done .zs-card-title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Inline-Pause innerhalb eines Blocks — diagonale Streifen */
.zs-card-break {
    position: absolute;
    left: 48px;   /* überdeckt nicht den Icon-Kreis */
    right: 8px;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.35) 4px,
        transparent 4px,
        transparent 10px
    );
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}

/* Calendar-Event */
.zs-card-event {
    background: color-mix(in oklch, var(--accent-soft, var(--accent)) 10%, var(--bg-card));
    border-left-color: var(--event-color, var(--accent));
}
.zs-card-event .zs-card-icon {
    background: color-mix(in oklch, var(--event-color, var(--accent)) 22%, var(--bg));
}

/* ── Lücken-Chip ─────────────────────────────────────────── */
.zs-gap-chip {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 4px;
    color: var(--text-light, var(--text-muted));
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.zs-stream[data-show-gaps="true"] .zs-gap-chip {
    display: flex;
}
.zs-gap-dots {
    color: var(--border);
    letter-spacing: 2px;
    font-size: 10px;
}
.zs-gap-text {
    padding: 2px 10px;
    background: color-mix(in oklch, var(--text-muted) 8%, transparent);
    border-radius: 999px;
}

/* ── Now-Divider ─────────────────────────────────────────── */
.zs-now-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin: 2px 0;
}
.zs-now-divider::before,
.zs-now-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: color-mix(in oklch, var(--danger, #c46c5a) 55%, transparent);
    border-radius: 2px;
}
.zs-now-label {
    margin: 0 10px;
    padding: 2px 10px;
    background: var(--danger, #c46c5a);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(196,108,90,0.25);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .zs-card { padding: 8px 10px 8px 8px; gap: 10px; }
    .zs-card-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
    .zs-card-title { font-size: 13px; }
    .zs-card-head { font-size: 10px; }
    .zs-card-start { top: 6px; right: 6px; width: 26px; height: 26px; font-size: 11px; }
}

/* ── Dark-Mode Feinschliff ──────────────────────────────── */
:root[data-theme="dark"] .zs-card-break {
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.12) 4px,
        transparent 4px,
        transparent 10px
    );
}
:root[data-theme="dark"] .zs-gap-text {
    background: color-mix(in oklch, var(--text-muted) 18%, transparent);
}


/* ═══════════════════════════════════════════════════════════════
   v0.23 — Tiimo-Integration: Task-Farbe + Task-Icon, Mood, Routines,
   Focus-Fullscreen, Color-/Icon-Picker. Liegt am Ende, damit alles
   Vorherige (cat-Hashes etc.) als Fallback greift.
   ═══════════════════════════════════════════════════════════════ */

/* Custom-Color-Task: Block-Hintergrund via color-mix (analog den cat-
   Klassen), aber aus tasks.color statt Projekt-Hash. --block-color wird
   inline im Style-Attribut gesetzt. Kommt NACH den .zs-card-cat-* Regeln,
   damit .zs-card-custom gewinnt. */
.zs-card.zs-card-custom {
    background: color-mix(in oklch, var(--block-color) 35%, var(--bg-card));
    border-left: 4px solid var(--block-color);
}
.zs-card.zs-card-custom.is-done {
    background: color-mix(in oklch, var(--block-color) 15%, var(--bg-card));
}

/* ── Mood-Check-in Card (Daily-View, 1× pro Tag) ──────────── */
.mood-checkin-card {
    background: var(--accent-soft);
    border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.mood-checkin-card h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 600;
}
.mood-checkin-card .mood-prompt {
    font-size: 15px;
    margin-bottom: 12px;
    color: var(--text);
}
.mood-faces {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.mood-face-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.mood-face-btn:hover { transform: scale(1.1); }
.mood-face-btn.is-selected {
    border-color: var(--accent);
    background: var(--bg-card);
    transform: scale(1.12);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 25%, transparent);
}
.mood-checkin-footer {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.mood-checkin-footer button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
}
.mood-checkin-footer button:hover { color: var(--accent); }

.mood-history {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 60px;
    padding: 4px 0;
}
.mood-history .bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.mood-history .bar .fill {
    width: 100%;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}
.mood-history .bar .lbl {
    font-size: 9px;
    color: var(--text-muted);
}
.mood-history .bar.v1 .fill { background: color-mix(in oklch, #c4645a 70%, var(--bg)); }
.mood-history .bar.v2 .fill { background: color-mix(in oklch, #cf8e3b 60%, var(--bg)); }
.mood-history .bar.v3 .fill { background: color-mix(in oklch, var(--text-muted) 60%, var(--bg)); }
.mood-history .bar.v4 .fill { background: color-mix(in oklch, var(--success) 60%, var(--bg)); }
.mood-history .bar.v5 .fill { background: var(--success); }

/* ── Icon + Color-Picker (Task-Panel + Routinen) ───────────── */
.kira-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0;
}
.kira-color-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s;
}
.kira-color-dot:hover { transform: scale(1.12); }
.kira-color-dot.is-selected {
    border-color: var(--text);
    transform: scale(1.1);
}
.kira-color-dot.is-reset {
    background: var(--bg);
    border: 2px dashed var(--border);
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kira-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    padding: 6px 0;
}
.kira-icon-btn {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--bg);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.kira-icon-btn:hover { background: var(--accent-soft); }
.kira-icon-btn.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.kira-icon-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 16px;
    text-align: center;
}

/* ── Focus-Vollbild (neue Route #/focus/{id}) ──────────────── */
.focus-fullscreen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 900;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.focus-fullscreen.theme-tinted {
    background: color-mix(in oklch, var(--focus-color, var(--accent)) 8%, var(--bg));
}
.focus-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    flex-shrink: 0;
}
.focus-topbar .focus-close,
.focus-topbar .focus-more {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}
.focus-topbar .focus-title-meta {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
}
.focus-task-heading {
    text-align: center;
    padding: 0 24px 16px;
}
.focus-task-heading .project {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.focus-task-heading .title {
    font-size: 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text);
}
.focus-task-heading .title .icon {
    font-size: 26px;
}

.ring-timer {
    width: 260px;
    height: 260px;
    margin: 24px auto;
    position: relative;
}
.ring-timer svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.ring-timer .ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 12;
}
.ring-timer .ring-fg {
    fill: none;
    stroke: var(--focus-color, var(--accent));
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.ring-timer .ring-center {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ring-timer .time-big {
    font-size: 46px;
    font-weight: 300;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ring-timer .time-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.focus-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px;
}
.focus-ctrl {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.focus-ctrl.primary {
    background: var(--focus-color, var(--accent));
    color: white;
    border-color: transparent;
    width: 68px; height: 68px;
    font-size: 26px;
}
.focus-ctrl:hover {
    transform: scale(1.05);
}

.focus-subtasks {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 18px 20px;
    margin-top: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
}
.focus-subtasks h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.focus-subtask {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.focus-subtask:last-child { border-bottom: none; }
.focus-subtask input[type=checkbox] {
    width: 20px; height: 20px;
    accent-color: var(--focus-color, var(--accent));
    cursor: pointer;
}
.focus-subtask.is-done label {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* ── Routinen-View ─────────────────────────────────────────── */
.routines-view {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.routine-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}
.routine-card .icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: color-mix(in oklch, var(--block-color, var(--accent)) 25%, var(--bg-card));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.routine-card .body { flex: 1; min-width: 0; }
.routine-card .name { font-weight: 500; color: var(--text); }
.routine-card .meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.routine-card .run-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.routine-editor {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.routine-item-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.routine-item-row:last-child { border-bottom: none; }
.routine-item-row input[type="text"],
.routine-item-row input[type="number"],
.routine-item-row input[type="time"] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
}
.routine-item-row .offset-input { width: 60px; }
.routine-item-row .dur-input { width: 50px; }
.routine-item-row .title-input { flex: 1; min-width: 0; }
.routine-item-row .remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}
.weekday-pill-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.weekday-pill {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.weekday-pill.is-on {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}