/* ============================================================
           Design "Kontor": Papierweiß, Haarlinien statt Karten-Schatten,
           strenges Raster, eine Farbe für Bedienung. Rot/Amber/Grün sind
           für Zustände reserviert, nicht für Dekoration.
           ============================================================ */
        :root {
            color-scheme: light;
            /* Aurora: helle, luftige Oberfläche mit leichtem Lavendel-Stich,
               kräftiger Violett-Akzent, weiche Karten mit dezentem Schatten.
               Der Grund liegt leicht unter den Flächen, damit Karten abheben. */
            --bg: #eef0f8;
            --surface: #ffffff;
            --surface-alt: #f4f5fb;
            --border: #e6e7f2;
            --border-strong: #d3d5e8;
            --text: #171a2b;
            /* Die gedaempften und die Zustandsfarben sind so gewaehlt, dass sie
               als Text auf ihrer jeweiligen hellen Flaeche WCAG AA (4.5:1)
               erreichen - sie stehen oft in kleinen Kennzeichen und Hinweisen.
               Weisse Schrift auf der Vollflaeche (z.B. Schaltflaeche "Loeschen")
               bleibt dabei ebenfalls ueber 4.5:1. */
            --text-muted: #656a7d;
            --primary: #5b4be0;
            --primary-hover: #4a3cd0;
            --primary-soft: #eeecfe;
            --primary-soft-text: #4a3cd0;
            --sidebar-bg: #ffffff;
            --sidebar-text: #4a4f63;
            --sidebar-active-bg: #eeecfe;
            --sidebar-active-text: #4a3cd0;
            --success: #0c7b54;
            --success-soft: #e4f6ee;
            --warning: #a15e00;
            --warning-soft: #fdf1de;
            --danger: #c33640;
            --danger-soft: #fdecec;
            /* Schriftfarbe AUF den Vollflaechen (Schaltflaechen, Zaehler-Punkte).
               Im hellen Modus sind Akzent und Gefahr dunkel genug fuer Weiss; im
               dunklen Modus sind beide hell, dort braucht es dunkle Schrift -
               sonst steht Weiss auf Helllila bei nur 2,4:1. */
            --on-primary: #ffffff;
            --on-danger: #ffffff;
            --radius: 10px;
            --shadow: 0 1px 2px rgba(24, 20, 60, 0.04), 0 10px 26px -16px rgba(40, 28, 90, 0.28);
        }
        /* Dunkle Fassung haengt am Attribut, NICHT an der Medienabfrage: das
           Skript im Kopf setzt data-theme immer auf "hell" oder "dunkel" - aus
           der Auswahl des Nutzers, sonst aus der Systemeinstellung. So gibt es
           die Palette nur einmal (keine zwei Fassungen, die auseinanderlaufen
           koennen) und "hell erzwingen" funktioniert auch auf einem System, das
           dunkel eingestellt ist. Ohne JavaScript bleibt es hell - nutzbar,
           nur eben ohne dunkle Fassung. */
        :root[data-theme="dark"] {
            color-scheme: dark;
            /* Aurora dunkel: tiefer, leicht violett getönter Grund, heller
               Lavendel-Akzent, damit er auf dunklem Grund gut trägt. */
            --bg: #0e0f16;
            --surface: #181a26;
            --surface-alt: #212336;
            --border: #2a2d40;
            --border-strong: #3a3e57;
            --text: #e7e8f0;
            --text-muted: #a2a7bd;
            --primary: #a99cff;
            --primary-hover: #c3b8ff;
            --primary-soft: #241f3a;
            --primary-soft-text: #c3b8ff;
            --sidebar-bg: #14151f;
            --sidebar-text: #b0b5c9;
            --sidebar-active-bg: #241f3a;
            --sidebar-active-text: #c3b8ff;
            --success: #46c78d;
            --success-soft: #10261d;
            --warning: #e6b06a;
            --warning-soft: #2c2108;
            --danger: #ef7c7d;
            --danger-soft: #2e1417;
            --on-primary: #141527;
            --on-danger: #2b1113;
        }
        /* Marke: je Helligkeit das passende Logo. Die Anmeldeansichten liefern
           beide Bilder aus und lassen hier eines davon ausblenden. */
        .login-logo { display: none; }
        :root[data-theme="light"] .login-logo.light { display: block; }
        :root[data-theme="dark"] .login-logo.dark { display: block; }
        /* Helligkeits-Umschalter (Baustein partials/theme-picker.php). */
        .theme-picker { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; }
        .theme-picker button {
            display: flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px;
            background: transparent; color: var(--text-muted); cursor: pointer;
        }
        .theme-picker button:hover { color: var(--text); }
        .theme-picker button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(24, 20, 60, 0.08); }
        .theme-picker .ti { width: 16px; height: 16px; }
        /* Freistehend auf den Anmelde-Ansichten (dort gibt es keine Kopfzeile). */
        .theme-picker-loose { display: flex; justify-content: flex-end; padding: 0.7rem 0.9rem 0; }
        .theme-picker-loose .theme-picker { margin-left: 0; }
        * { box-sizing: border-box; }
        /* Bildschirm-Passung: fast alle Groessen sind in rem, haengen also an der
           Wurzel-Schriftgroesse. Diese skaliert sanft mit der Fensterbreite, damit
           die Oberflaeche auf kleinen Laptops kompakter und auf grossen Monitoren
           etwas grosszuegiger sitzt. Der Helfer unten (JS) verfeinert das noch um
           die Fensterhoehe; faellt JS aus, greift diese Grenze weiter. */
        html { font-size: clamp(14.5px, 0.4vw + 11px, 16.5px); }
        body {
            font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
            margin: 0; background: var(--bg); color: var(--text);
            font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased;
        }
        a { color: var(--primary); }
        :focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

        /* Farbige Flaechen hinter Sidebar/Kopfleiste, damit deren Glas-Optik
           (backdrop-filter: blur) etwas zum Durchscheinen hat - ohne das waere
           die Transparenz nur eine flache Tönung, kein "Glas". Fest im Viewport
           (nicht im Dokumentfluss), rollt also nicht mit. */
        .bg-blobs {
            position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
            background:
                radial-gradient(640px circle at 12% 15%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%),
                radial-gradient(520px circle at 88% 8%, color-mix(in srgb, var(--success) 22%, transparent), transparent 60%),
                radial-gradient(680px circle at 70% 95%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
                var(--bg);
        }

        /* --- Gerüst --- */
        .app { display: flex; min-height: 100vh; }
        .sidebar {
            width: 232px; flex-shrink: 0; border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
            display: flex; flex-direction: column; padding: 14px 0;
            /* Selbsttragend: die Leiste bleibt im Bild und rollt bei vielen
               Menuepunkten in sich (nav hat flex:1 und overflow-y:auto). Sonst
               wuerde sie die ganze Seite in die Laenge ziehen und der Fuss waere
               nur nach dem Rollen sichtbar. */
            position: sticky; top: 0; align-self: flex-start; height: 100vh;
            /* Liquid-Glass: transluzente Flaeche mit Weichzeichner statt
               deckender Fuellfarbe. @supports-Fallback deckend darunter, falls
               backdrop-filter fehlt (aeltere Browser). */
            background: var(--sidebar-bg);
        }
        @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
            .sidebar {
                background: color-mix(in srgb, var(--sidebar-bg) 62%, transparent);
                backdrop-filter: blur(22px) saturate(160%);
                -webkit-backdrop-filter: blur(22px) saturate(160%);
            }
        }
        .sidebar .brand {
            display: flex; align-items: center; justify-content: center; gap: 0.55rem;
            color: var(--text); font-weight: 600; font-size: 0.95rem; text-decoration: none;
            padding: 0 16px 10px; min-height: 62px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
        }
        .sidebar .brand img { max-width: 100%; max-height: 52px; object-fit: contain; }
        /* Pin-Schalter: automatisch (bei Hover ausklappen) oder fest
           ausgeklappt. Zustand nur
           lokal (localStorage), kein Server-Rundgang. Auf dem Handy ohne
           Wirkung (dort ist die Leiste ohnehin eine volle Schublade), daher
           dort ausgeblendet (siehe Responsive-Media-Query unten). */
        .sidebar-pin {
            display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
            margin: 6px auto 2px; border: 1px solid var(--border); background: var(--surface-alt);
            color: var(--text-muted); border-radius: 8px; cursor: pointer; font-size: 0.85rem; flex: none;
        }
        .sidebar-pin:hover { color: var(--text); border-color: var(--border-strong); }
        .sidebar-pin[data-mode="open"] {
            background: var(--primary-soft); color: var(--primary-soft-text); border-color: var(--primary);
        }
        /* Zwei Logo-Fassungen: das dunkle Navy im Original ist auf dunklem Grund nicht lesbar. */
        .sidebar .brand .brand-logo.dark { display: none; }
        :root[data-theme="dark"] .sidebar .brand .brand-logo.light { display: none; }
        :root[data-theme="dark"] .sidebar .brand .brand-logo.dark { display: block; }
        .sidebar .brand .mark {
            width: 30px; height: 30px; flex: none; border-radius: var(--radius);
            background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center;
            font-size: 0.85rem; font-weight: 700;
        }
        .sidebar nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; overflow-x: hidden; }
        /* Gruppentitel als ruhige Zwischenzeile statt gesperrter Versalien: neben
           den Icon-Kacheln unten waeren zwei laute Elemente uebereinander. */
        .sidebar nav .grp {
            padding: 0 16px 3px; margin-top: 9px;
            font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
            color: var(--text-muted);
        }
        .sidebar nav .grp:first-child { margin-top: 2px; }
        /* Kompakte Zeilen (Variante A): so gestaucht, dass die ~15 Punkte samt
           Gruppen und Fuss auf ueblichen Laptops ganz ohne Scrollen ins Bild
           passen. Reicht die Hoehe doch nicht (kleines Fenster, starker Zoom),
           rollt nav weiterhin - als Rueckfall, nicht als Dauerzustand. */
        .sidebar nav a {
            color: var(--sidebar-text); text-decoration: none; margin: 1px 10px; padding: 0.34rem 12px;
            font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem;
            border-radius: 9px;
        }
        /* Strichzeichnung der Icons: als geerbte CSS-Eigenschaften, damit sie in der
           <use>-Instanz ankommen. Präsentationsattribute am Original täten das nicht. */
        .ni { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
        /* Icon-Kachel: das Symbol sitzt auf einer eigenen kleinen Flaeche. Das
           gibt der langen Leiste eine Spalte, an der das Auge entlanglaeuft, und
           macht den aktiven Punkt auf einen Blick auffindbar. Padding am SVG
           funktioniert, weil es ein ersetztes Element ist - die Zeichnung bleibt
           18px, die Flaeche wird 26px. */
        .sidebar nav a .ni {
            width: 23px; height: 23px; padding: 3px; box-sizing: border-box; flex: none;
            color: var(--text-muted); border-radius: 7px;
            background: color-mix(in srgb, var(--surface-alt) 80%, transparent);
        }
        .sidebar nav a:hover .ni { background: var(--surface-alt); color: var(--text); }
        .sidebar nav a span { min-width: 0; }
        .sidebar nav a:hover { background: var(--surface-alt); color: var(--text); }
        .sidebar nav a.active {
            background: var(--sidebar-active-bg); color: var(--sidebar-active-text);
            font-weight: 600;
        }
        /* Aktiver Punkt: die Kachel kippt auf die Akzentfarbe - deutlichste,
           aber ruhige Ortsmarke. */
        .sidebar nav a.active .ni,
        .sidebar nav a.active:hover .ni {
            background: var(--primary); color: var(--on-primary);
        }
        /* Untermenue-Punkt: eingerueckt und dezenter, haengt direkt am Eintrag
           darueber (kein eigener Gruppentitel, z.B. Pakete & Preise unter Einstellungen). */
        .sidebar nav a.sub { margin-top: -1px; padding-left: 40px; font-size: 0.85rem; }
        .sidebar nav a.sub .ni { width: 22px; height: 22px; padding: 3px; }
        /* Zähler in der Navigation: kräftige Pille, damit offene Vorgänge auffallen. */
        .sidebar nav a .count {
            margin-left: auto; background: var(--danger); color: var(--on-danger); border-radius: 999px;
            font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.42rem; line-height: 1.6;
            min-width: 1.25rem; text-align: center;
            font-variant-numeric: tabular-nums;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
        }
        /* Reine Warnungen (kein echter Fehler) sollen nicht wie ein Alarm aussehen -
           sattes, eindeutiges Gelb statt Rot, gleiche Form. Bewusst eine eigene
           Farbe statt var(--warning): das ist die gedeckte Farbe fuer Warntext auf
           hellem Grund (.warning-Box, .badge.warning) und waere hier zu dunkel/roetlich. */
        .sidebar nav a .count.warn {
            background: #f2c318; color: #3a2a00;
            box-shadow: 0 0 0 3px rgba(242, 195, 24, 0.22);
        }
        /* Nicht gebuchte Funktion ab hoeherem Paket: bleibt in der Navigation an
           ihrem gewohnten Platz sichtbar (statt spurlos zu verschwinden), aber
           gedaempft mit Schloss und Tarif-Hinweis - das ist das Angebot, kein
           kaputter Menuepunkt. Klick fuehrt zu einer freundlichen Hinweisseite
           statt eines nackten Fehlers (siehe PricingPlans::requireAtLeast()). */
        .sidebar nav a.locked { color: var(--text-muted); }
        .sidebar nav a.locked .ni:first-child { opacity: 0.55; }
        .sidebar nav a.locked:hover { background: var(--primary-soft); color: var(--primary-soft-text); }
        .sidebar nav a .tier-badge {
            margin-left: auto; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
            color: var(--primary-soft-text); background: var(--primary-soft); border-radius: 999px;
            padding: 0.08rem 0.5rem; white-space: nowrap;
        }
        .sidebar nav a .lock { width: 13px; height: 13px; flex: none; opacity: 0.55; }
        /* Werbe-Kachel fuer nicht gebuchte Zusatzmodule: getoente Flaeche mit
           Akzent-Kante, damit sie als Angebot liest und nicht als kaputter Menuepunkt. */
        .nav-upsell {
            margin: 4px 10px 12px; padding: 0.75rem 0.8rem 0.7rem;
            border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
            border-radius: 12px;
            background: linear-gradient(160deg, var(--primary-soft), var(--surface));
            box-shadow: var(--shadow);
        }
        .nav-upsell-head {
            display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
            font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--primary-soft-text);
        }
        .nav-upsell-item {
            display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem;
            margin-bottom: 0.25rem; border-radius: 8px;
            background: color-mix(in srgb, var(--surface) 75%, transparent);
            font-size: 0.83rem; font-weight: 600; color: var(--text);
            min-width: 0;
        }
        .nav-upsell-item .ni { width: 16px; height: 16px; flex: none; color: var(--primary); }
        .nav-upsell-item .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        .nav-upsell-item .tx .lb { overflow-wrap: anywhere; }
        .nav-upsell-item .pr { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
        /* Schloss als Sprite-Symbol, nicht als Emoji: Farb-Emoji sehen je Gerät
           anders aus und wuerden neben den Strich-Icons als Fremdkoerper wirken. */
        .nav-upsell-item .lock { margin-left: auto; width: 13px; height: 13px; flex: none; opacity: 0.5; }
        .nav-upsell-cta {
            display: block; margin-top: 0.55rem; padding: 0.42rem 0.5rem; border-radius: 8px;
            background: var(--primary); color: var(--on-primary); text-align: center; text-decoration: none;
            font-size: 0.73rem; font-weight: 700; line-height: 1.3;
        }
        .nav-upsell-cta:hover { background: var(--primary-hover); }
        .nav-upsell-dismiss {
            border: none; background: none; cursor: pointer; color: var(--primary-soft-text);
            opacity: 0.6; font-size: 0.75rem; line-height: 1; padding: 0.1rem 0.2rem; border-radius: 4px;
        }
        .nav-upsell-dismiss:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 12%, transparent); }
        .nav-upsell-mail { display: block; margin-top: 0.35rem; font-size: 0.67rem; color: var(--text-muted); text-align: center; }

        /* Fuss der Seitenleiste: Produktmarke und Urheberzeile, sitzt unter der
           Navigation (die hat flex:1, dadurch bleibt der Block immer unten). */
        .sidebar-foot { margin: 5px 10px 0; padding-top: 0.45rem; border-top: 1px solid var(--border); }
        .sidebar-foot .foot-logo { display: block; max-width: 52px; height: auto; margin: 0 auto 0.3rem; }
        .sidebar-foot .foot-logo.dark { display: none; }
        :root[data-theme="dark"] .sidebar-foot .foot-logo.light { display: none; }
        :root[data-theme="dark"] .sidebar-foot .foot-logo.dark { display: block; }
        .sidebar-credit {
            display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 12px 0.2rem;
            border-top: 1px solid var(--border);
            color: var(--text-muted); font-size: 0.72rem; text-decoration: none;
        }
        .sidebar-credit:hover { color: var(--text); }
        .sidebar-credit img { width: 16px; height: 16px; flex: none; }
        .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .topbar {
            display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
            padding: 0.5rem 1.4rem; background: var(--surface); border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 5;
        }
        @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
            .topbar {
                background: color-mix(in srgb, var(--surface) 58%, transparent);
                backdrop-filter: blur(18px) saturate(160%);
                -webkit-backdrop-filter: blur(18px) saturate(160%);
                border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
            }
        }
        /* --- Farbauswahl (Akzentfarbe) --- */
        /* Sitzt oben rechts direkt vor dem Nutzerblock (die Kopfzeile ist rechts ausgerichtet). */
        .accent-picker { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; padding-right: 0.5rem; }
        .accent-picker .sw {
            width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
            border: 2px solid var(--border-strong); background: var(--tone);
            transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
        }
        .accent-picker .sw:hover { transform: scale(1.14); }
        .accent-picker .sw[aria-pressed="true"] {
            border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 30%, transparent);
        }
        .accent-picker .sw[data-accent="violett"] { --tone: #5b4be0; }
        .accent-picker .sw[data-accent="blau"]    { --tone: #2563eb; }
        .accent-picker .sw[data-accent="gruen"]   { --tone: #0f9d6b; }
        .accent-picker .sw[data-accent="rot"]     { --tone: #e2626b; }
        .accent-picker .sw[data-accent="grau"]    { --tone: #64748b; }

        /* Akzentfarben: ueberschreiben nur die Bedien-/Markierungsfarbe. Rot/Amber/
           Grün fuer Zustaende bleiben unberuehrt, damit Warnungen erkennbar bleiben. */
        :root[data-accent="blau"] {
            --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #e7effe; --primary-soft-text: #1d4ed8;
            --sidebar-active-bg: #e7effe; --sidebar-active-text: #1d4ed8;
        }
        :root[data-accent="gruen"] {
            --primary: #0f9d6b; --primary-hover: #0b8259; --primary-soft: #e3f6ee; --primary-soft-text: #0b6a4a;
            --sidebar-active-bg: #e3f6ee; --sidebar-active-text: #0b6a4a;
        }
        :root[data-accent="rot"] {
            --primary: #d9535f; --primary-hover: #c34350; --primary-soft: #fdeced; --primary-soft-text: #b23540;
            --sidebar-active-bg: #fdeced; --sidebar-active-text: #b23540;
        }
        :root[data-accent="grau"] {
            --primary: #52607a; --primary-hover: #414d63; --primary-soft: #eceff4; --primary-soft-text: #3d485d;
            --sidebar-active-bg: #eceff4; --sidebar-active-text: #3d485d;
        }
        @media (prefers-color-scheme: dark) {
            :root[data-accent="blau"] {
                --primary: #8ab4ff; --primary-hover: #aecbff; --primary-soft: #16233c; --primary-soft-text: #aecbff;
                --sidebar-active-bg: #16233c; --sidebar-active-text: #aecbff;
            }
            :root[data-accent="gruen"] {
                --primary: #55d3a0; --primary-hover: #7ee0b8; --primary-soft: #10271f; --primary-soft-text: #7ee0b8;
                --sidebar-active-bg: #10271f; --sidebar-active-text: #7ee0b8;
            }
            :root[data-accent="rot"] {
                --primary: #f08f97; --primary-hover: #f6b0b6; --primary-soft: #2e181b; --primary-soft-text: #f6b0b6;
                --sidebar-active-bg: #2e181b; --sidebar-active-text: #f6b0b6;
            }
            :root[data-accent="grau"] {
                --primary: #a7b3c8; --primary-hover: #c2cbdb; --primary-soft: #1d2230; --primary-soft-text: #c2cbdb;
                --sidebar-active-bg: #1d2230; --sidebar-active-text: #c2cbdb;
            }
        }

        .topbar .who { text-align: right; line-height: 1.25; }
        .topbar .who .name { font-size: 0.8rem; font-weight: 600; }
        .topbar .who .role { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.02em; text-transform: uppercase; }
        .avatar {
            width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-text);
            display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
        }
        .topbar .logout {
            font-size: 0.75rem; color: var(--text-muted); text-decoration: none;
            background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
        }
        .topbar .logout:hover { color: var(--text); }
        main { flex: 1; padding: 1.4rem 1.6rem 2.5rem; max-width: 1320px; }

        /* --- Typografie --- */
        h2 {
            margin: 0 0 1rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em;
            padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-strong);
        }
        /* Steht die Überschrift in einer Kopfzeile mit Buttons, trägt die Zeile die
           Linie - sonst wäre nur die Breite der Überschrift unterstrichen. */
        .flex:has(> h2) { align-items: center; padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-strong); }
        .flex > h2 { margin: 0; padding: 0; border-bottom: 0; }
        h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
        /* Mikro-Label. Labels, die selbst ein Feld umschließen (Checkbox-Zeilen),
           bleiben normaler Text - sonst würden ganze Sätze in Versalien stehen. */
        label {
            display: block; margin-bottom: 0.25rem; font-size: 0.83rem; font-weight: 600; color: var(--text-muted);
        }
        label:not(:has(input)):not(:has(select)) {
            font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
        }
        .muted { color: var(--text-muted); font-size: 0.82rem; }

        /* --- Tabellen: Haarlinien, Zahlen exakt untereinander --- */
        table { border-collapse: collapse; width: 100%; background: var(--surface); }
        th, td {
            padding: 0.45rem 0.6rem; text-align: left; font-size: 0.83rem;
            border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
        }
        thead th {
            background: var(--surface-alt); color: var(--text-muted); font-weight: 600;
            font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
            border-bottom: 1px solid var(--border-strong);
        }
        tbody tr:last-child td { border-bottom: none; }
        tbody tr:hover td { background: var(--surface-alt); }

        /* --- Flächen --- */
        .card {
            background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
            box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1rem;
        }
        .card:has(> table:only-child) { padding: 0; }
        /* Breite Tabellen rollen in ihrer Karte waagerecht, statt die Spalten
           zusammenzuquetschen oder die Seite zu sprengen - auf jedem Bildschirm,
           nicht erst auf dem Handy. */
        .card:has(table) { overflow-x: auto; }
        .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
        .stat-tile { background: var(--surface); padding: 0.7rem 0.85rem; }
        .stat-tile .value { font-size: 1.4rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
        .stat-tile .label { font-size: 0.66rem; color: var(--text-muted); margin-top: 0.1rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

        /* --- Bedienelemente --- */
        .btn {
            display: inline-block; padding: 0.38rem 0.8rem; background: var(--primary); color: var(--on-primary);
            border: 1px solid var(--primary); border-radius: var(--radius); cursor: pointer;
            text-decoration: none; font-size: 0.82rem; font-weight: 600; font-family: inherit;
            transition: background 0.12s ease;
        }
        .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
        .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
        .btn.secondary:hover { background: var(--surface-alt); }
        .btn.danger { background: var(--danger); border-color: var(--danger); }
        .btn.danger:hover { filter: brightness(0.9); }
        input, select, textarea {
            padding: 0.34rem 0.45rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
            font-size: 0.83rem; font-family: inherit; background: var(--surface); color: var(--text);
            font-variant-numeric: tabular-nums;
        }
        input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
        input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
        .field { margin-bottom: 0.7rem; }

        /* --- Anmelde-Ansichten (Login, Passwort vergessen/zurücksetzen) ---
           Bewusst luftigere Felder als im Admin: dort sind die kompakten
           Eingaben für die dichten Tabellen gewollt, hier zählt Lesbarkeit. */
        .login-card input[type="email"],
        .login-card input[type="password"] {
            padding: 0.6rem 0.7rem; font-size: 0.95rem;
            background: #FAF6EC; border-color: #DDD3BE; color: #23201A;
        }
        .login-card input[type="email"]::placeholder,
        .login-card input[type="password"]::placeholder { color: #8C8474; }
        .login-card .field { margin-bottom: 0.9rem; }
        .login-card .btn[type="submit"] { padding-top: 0.62rem; padding-bottom: 0.62rem; font-size: 0.92rem; }
        .login-credit {
            display: flex; align-items: center; justify-content: center; gap: 0.4rem;
            margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--border);
            color: var(--text-muted); font-size: 0.78rem; text-decoration: none;
        }
        .login-credit:hover { color: var(--text); }
        .login-credit img { width: 18px; height: 18px; flex: none; }
        :root[data-theme="dark"] .login-card input[type="email"],
        :root[data-theme="dark"] .login-card input[type="password"] {
            background: #262218; border-color: #4A4232; color: #F0EADC;
        }
        :root[data-theme="dark"] .login-card input[type="email"]::placeholder,
        :root[data-theme="dark"] .login-card input[type="password"]::placeholder { color: #A79E88; }

        /* --- Durchsuchbare Auswahl (Mitarbeiter) ---
           Wertet ein <select data-searchable> zu einem Suchfeld mit
           Vorschlagsliste auf. Ohne JavaScript bleibt das normale Dropdown. */
        .sel-search { position: relative; display: inline-block; }
        .sel-search > input[type="text"] { width: 100%; }
        .sel-search-list {
            position: absolute; z-index: 60; top: 100%; left: 0; min-width: 100%; margin: 0.2rem 0 0;
            padding: 0.25rem; list-style: none; max-height: 264px; overflow-y: auto;
            background: var(--surface); border: 1px solid var(--border-strong);
            border-radius: var(--radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
        }
        .sel-search-list li {
            padding: 0.42rem 0.55rem; border-radius: calc(var(--radius) - 2px);
            font-size: 0.83rem; cursor: pointer; white-space: nowrap;
        }
        .sel-search-list li[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); }
        .sel-search-list li.empty { color: var(--text-muted); cursor: default; background: none; }
        .sel-search-list mark { background: none; color: inherit; font-weight: 700; }
        .flex { display: flex; gap: 0.65rem; align-items: flex-end; flex-wrap: wrap; }

        /* --- Zustände --- */
        .warning { background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning); padding: 0.5rem 0.7rem; border-radius: var(--radius); font-size: 0.82rem; }
        .error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); padding: 0.5rem 0.7rem; border-radius: var(--radius); font-size: 0.82rem; margin-bottom: 0.8rem; }
        .success { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); padding: 0.5rem 0.7rem; border-radius: var(--radius); font-size: 0.82rem; margin-bottom: 0.8rem; }
        /* Badges ("Ballons"): Pille mit Statuspunkt, farbigem Rand und weichem
           Schimmer in der Statusfarbe - dadurch heben sie sich deutlich vom Text
           ab und die Farbe ist auf einen Blick lesbar. Gilt in der ganzen Software.
           Ohne Zustandsklasse bleibt der neutrale Ton (--surface-alt). */
        /* inline-block statt Flexbox: so greift text-overflow, wenn der Platz eng
           wird (z.B. lange Firmennamen in schmalen Tabellenspalten) - die Marke
           bleibt in ihrer Spalte und ueberdeckt nichts. */
        .badge {
            display: inline-block; max-width: 100%; vertical-align: middle;
            /* margin:0 nicht nur Ordnung: die Statusnamen ueberschneiden sich mit
               den .success/.warning/.error-Hinweisboxen (z.B. "Fehler"-Pille traegt
               zufaellig auch die Klasse "success"); ohne das erbt die Pille deren
               margin-bottom und wird sichtbar hoeher als die Nachbar-Pillen. */
            margin: 0; padding: 0.2rem 0.62rem; border-radius: 999px;
            font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.5;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            font-variant-numeric: tabular-nums;
            background: var(--surface-alt); color: var(--text-muted);
            border: 1px solid currentColor;
            border-color: color-mix(in srgb, currentColor 32%, transparent);
            box-shadow: 0 1px 0 rgba(24, 20, 60, 0.03);
        }
        /* Statuspunkt in der Textfarbe - macht die Farbe auch bei kurzem Text sichtbar. */
        .badge::before {
            content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
            background: currentColor; margin-right: 0.36rem; vertical-align: 0.08em;
        }
        /* In engen Spalten darf die Marke umbrechen statt zu kuerzen. */
        .badge.wrap { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
        /* Reine Zähl-/Textmarken ohne Zustand brauchen keinen Punkt. */
        .badge.plain::before { display: none; }
        .badge.success { background: var(--success-soft); color: var(--success); }
        .badge.warning { background: var(--warning-soft); color: var(--warning); }
        .badge.danger  { background: var(--danger-soft);  color: var(--danger); }
        .badge.neutral { background: var(--surface-alt);  color: var(--text-muted); }
        .badge.primary { background: var(--primary-soft); color: var(--primary-soft-text); }
        /* Etwas mehr Nachdruck bei den kritischen Zuständen. */
        .badge.danger, .badge.warning { box-shadow: 0 1px 0 rgba(24, 20, 60, 0.03), 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent); }
        /* Klickbare Filter-Pillen (Systemcheck-Befunde nach Status filtern): Reset
           der Button-Vorgaben plus feste Ausrichtung, damit jede Pille exakt gleich
           hoch ist - ohne das hing die Hoehe vom Standard-Button-Stil ab und konnte
           je nach Textlaenge/Zeilenumbruch minimal abweichen. */
        button.health-filter {
            display: inline-flex; align-items: center; background: none; border: none;
            padding: 0; margin: 0; cursor: pointer; font: inherit;
        }

        /* --- Profil-Header + Tabs (Mitarbeiter-Profilseite) --- */
        .profile-header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-strong); }
        .profile-avatar {
            width: 52px; height: 52px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-text);
            display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; flex-shrink: 0;
        }
        .profile-header h2 { margin: 0; border: 0; padding: 0; }
        .profile-header .subtitle { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.1rem; }
        .tabs { display: flex; gap: 1.3rem; border-bottom: 1px solid var(--border-strong); margin-bottom: 1rem; }
        .tabs button {
            background: none; border: none; padding: 0.5rem 0.1rem; font-size: 0.83rem; font-weight: 600;
            font-family: inherit; color: var(--text-muted); cursor: pointer;
            border-bottom: 2px solid transparent; margin-bottom: -1px;
            letter-spacing: 0.01em;
        }
        .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }
        .info-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
        .info-panel .row { display: flex; padding: 0.42rem 0.9rem; font-size: 0.83rem; border-bottom: 1px solid var(--border); }
        .info-panel .row:last-child { border-bottom: none; }
        .info-panel .row .label { width: 190px; flex-shrink: 0; color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 0.1rem; }
        .info-panel h3 { padding: 0.7rem 0.9rem 0.1rem; margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }

        .menu-toggle {
            display: none; background: none; border: none; cursor: pointer; padding: 0.3rem;
            font-size: 1.2rem; color: var(--text); margin-right: auto; line-height: 1;
        }
        .sidebar-overlay { display: none; }

        /* --- Aufklappende Icon-Spur (Desktop) ------------------------------
           Im Ruhezustand nur Symbole (66px), beim Zeigen faehrt die Leiste ueber
           den Inhalt auf und zeigt Namen, Zaehler und Angebote. So passen alle
           Menuepunkte ohne Rollbalken ins Bild, ohne dass Beschriftung oder die
           Zusatzpaket-Kachel verlorengehen. Der Inhalt verrutscht nicht: die
           Leiste liegt fest (position:fixed) und main-col haelt 66px Rand.
           Nur ab 769px - darunter bleibt das Schubladen-Menue vom Handy. */
        @media (min-width: 769px) {
            .sidebar {
                position: fixed; top: 0; left: 0; height: 100vh; width: 66px; z-index: 40;
                overflow: hidden;
                transition: width 0.56s cubic-bezier(0.4, 0, 0.2, 1),
                            box-shadow 0.56s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: width;
            }
            .sidebar .brand {
                transition: min-height 0.56s cubic-bezier(0.4, 0, 0.2, 1),
                            padding 0.56s cubic-bezier(0.4, 0, 0.2, 1),
                            margin-bottom 0.56s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .sidebar .brand img {
                transition: max-width 0.56s cubic-bezier(0.4, 0, 0.2, 1),
                            max-height 0.56s cubic-bezier(0.4, 0, 0.2, 1);
            }
            @keyframes timexo-sidebar-content-in {
                from { opacity: 0; transform: translateX(-3px); }
                to { opacity: 1; transform: translateX(0); }
            }
            @keyframes timexo-sidebar-content-out {
                from { opacity: 1; transform: translateX(0); }
                to { opacity: 0; transform: translateX(-2px); }
            }
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) nav a > span:not(.count),
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) .grp,
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) .brand .txt,
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) .sidebar-foot,
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) .nav-upsell,
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) nav a .lock,
            .sidebar:not([data-pin="open"]):is(:hover, :focus-within) .tier-badge {
                animation: timexo-sidebar-content-in 0.48s cubic-bezier(0.4, 0, 0.2, 1) both;
            }
            /* Beim Verlassen bleiben die Texte für die kurze Ausblendung noch
               im Layout. Danach entfernt das Navigationsskript die Hilfsklasse
               und die kompakte Icon-Spur übernimmt wieder vollständig. */
            .sidebar.timexo-sidebar-closing nav a > span:not(.count) { display: inline !important; }
            .sidebar.timexo-sidebar-closing .grp,
            .sidebar.timexo-sidebar-closing .brand .txt,
            .sidebar.timexo-sidebar-closing .nav-upsell { display: block !important; }
            .sidebar.timexo-sidebar-closing .sidebar-foot { display: flex !important; }
            .sidebar.timexo-sidebar-closing nav a .lock { display: inline !important; }
            .sidebar.timexo-sidebar-closing .tier-badge { display: inline-flex !important; }
            .sidebar.timexo-sidebar-closing nav a > span:not(.count),
            .sidebar.timexo-sidebar-closing .grp,
            .sidebar.timexo-sidebar-closing .brand .txt,
            .sidebar.timexo-sidebar-closing .sidebar-foot,
            .sidebar.timexo-sidebar-closing .nav-upsell,
            .sidebar.timexo-sidebar-closing nav a .lock,
            .sidebar.timexo-sidebar-closing .tier-badge {
                pointer-events: none;
                animation: timexo-sidebar-content-out 0.48s cubic-bezier(0.4, 0, 0.2, 1) both;
            }
            .main-col { margin-left: 66px; }
            .sidebar:hover, .sidebar:focus-within {
                width: 236px; overflow-y: auto;
                box-shadow: 6px 0 30px color-mix(in srgb, var(--text) 16%, transparent);
            }
            /* Ruhezustand: alles Textliche weg, nur die Icon-Kacheln bleiben. */
            .sidebar:not(:hover):not(:focus-within) nav a span,
            .sidebar:not(:hover):not(:focus-within) .grp,
            .sidebar:not(:hover):not(:focus-within) .brand .txt,
            .sidebar:not(:hover):not(:focus-within) .sidebar-foot,
            .sidebar:not(:hover):not(:focus-within) .nav-upsell,
            .sidebar:not(:hover):not(:focus-within) nav a .lock,
            .sidebar:not(:hover):not(:focus-within) .tier-badge { display: none; }
            .sidebar:not(:hover):not(:focus-within) nav { overflow: hidden; }
            .sidebar:not(:hover):not(:focus-within) nav a { justify-content: center; padding-left: 0; padding-right: 0; margin: 1px 12px; position: relative; }
            .sidebar:not(:hover):not(:focus-within) nav a.sub { padding-left: 0; }
            .sidebar:not(:hover):not(:focus-within) .brand { min-height: 54px; padding: 8px; margin-bottom: 2px; }
            .sidebar:not(:hover):not(:focus-within) .brand img { max-height: 32px; max-width: 46px; }
            /* Zaehler im Ruhezustand als kleiner Punkt an der Kachel - eine offene
               Aufgabe bleibt so auch eingeklappt sichtbar. */
            .sidebar:not(:hover):not(:focus-within) nav a .count {
                display: block; position: absolute; top: 2px; right: 10px; min-width: 0; width: 9px; height: 9px;
                padding: 0; font-size: 0; line-height: 0; box-shadow: 0 0 0 2px var(--sidebar-bg);
            }

            /* Pin "fest ausgeklappt": sieht IMMER wie der Hover-Zustand aus, auch
               ohne Mauskontakt - !important, weil sonst die :not(:hover)-Regeln
               darueber (gleiche Spezifitaet, aber leere Deklaration wuerde nicht
               reichen) weiterhin greifen wuerden, sobald die Maus die Leiste
               wieder verlaesst. main-col ruemt echten Platz frei statt der Leiste
               nur als Overlay Platz zu lassen - dauerhaft sichtbar heisst hier
               auch dauerhaft Raum, nicht mehr nur ein kurzes Ausklappen. */
            .sidebar[data-pin="open"] {
                width: 236px !important; overflow-y: auto !important;
                box-shadow: 6px 0 30px color-mix(in srgb, var(--text) 16%, transparent);
            }
            .sidebar[data-pin="open"] ~ .main-col { margin-left: 236px; }
            .sidebar[data-pin="open"] nav a span,
            .sidebar[data-pin="open"] .grp,
            .sidebar[data-pin="open"] .brand .txt,
            .sidebar[data-pin="open"] .sidebar-foot,
            .sidebar[data-pin="open"] .nav-upsell,
            .sidebar[data-pin="open"] nav a .lock,
            .sidebar[data-pin="open"] .tier-badge { display: revert !important; }
            .sidebar[data-pin="open"] nav { overflow: visible !important; }
            .sidebar[data-pin="open"] nav a { justify-content: flex-start !important; padding-left: 16px !important; padding-right: 16px !important; }
            .sidebar[data-pin="open"] .brand { min-height: 62px !important; padding: 0 16px 10px !important; }
            .sidebar[data-pin="open"] .brand img { max-width: 100% !important; max-height: 52px !important; }
            .sidebar[data-pin="open"] nav a .count {
                position: static !important; width: auto !important; height: auto !important; min-width: 1.25rem;
                padding: 0.05rem 0.42rem !important; font-size: 0.66rem !important; line-height: 1.6 !important;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent) !important;
            }

        }

        /* --- Responsive: Handy/kleine Bildschirme --- */
        @media (max-width: 768px) {
            .app { flex-direction: column; }
            .menu-toggle { display: block; font-size: 1.5rem; padding: 0.4rem 0.5rem; }
            .sidebar {
                position: fixed; top: 0; left: 0; height: 100vh; width: 84vw; max-width: 320px; z-index: 50;
                transform: translateX(-100%); transition: transform 0.18s ease; overflow-y: auto;
            }
            .sidebar.open { transform: translateX(0); }
            .sidebar-overlay.open {
                display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 40;
            }
            /* Pin-Schalter ist ein Desktop-Konzept (Hover-Ausklappen gibt es auf
               dem Handy nicht - dort ist die Leiste ohnehin immer voll sichtbar,
               solange sie offen ist). */
            .sidebar-pin { display: none; }
            /* Größere, fingerfreundliche Reiter im ausgeklappten Menü. */
            .sidebar nav a { padding: 0.85rem 14px; font-size: 1.02rem; margin: 3px 10px; gap: 0.85rem; }
            .sidebar nav a .ni { width: 21px; height: 21px; }
            .sidebar nav .grp { font-size: 0.66rem; padding: 0 20px 6px; margin-top: 20px; }
            .sidebar .brand { min-height: 72px; }
            .topbar { padding: 0.5rem 0.8rem; }
            .topbar .who .role { display: none; }
            /* Farbwaehler braucht auf schmalen Breiten mehr Platz als da ist -
               drueckt sonst das Burger-Menue-Symbol aus dem sichtbaren Bereich
               (topbar ist rechtsbuendig ohne Umbruch). Einstellbar bleibt die
               Akzentfarbe trotzdem, nur eben nicht hier. */
            .accent-picker { display: none; }
            main { padding: 0.9rem; }
            h2 { font-size: 1.15rem; }
            .card { padding: 0.85rem; }
            .card:has(table) table { min-width: 620px; }
            /* Reiter innerhalb der Seiten: horizontal scrollbar statt Umbruch, größere Ziele. */
            .tabs, .zw-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .tabs button, .zw-tabs a { padding: 0.7rem 0.7rem; font-size: 0.82rem; white-space: nowrap; flex: none; }
            .btn { padding: 0.55rem 1rem; font-size: 0.9rem; }
            input, select, textarea { font-size: 16px; }
        }
        @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

        /* Rechtlicher Footer: bewusst dezent, aber ueberall erreichbar (auch
           vor dem Anmelden - siehe Einbindung am Seitenende). */
        .app-footer {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
            padding: 1.2rem 1rem 1.6rem; font-size: 0.78rem; color: var(--text-muted);
        }
        .app-footer a, .app-footer .link-button {
            color: var(--text-muted); text-decoration: none;
        }
        .app-footer a:hover, .app-footer .link-button:hover { color: var(--text); text-decoration: underline; }
        .link-button {
            background: none; border: none; padding: 0; font: inherit; cursor: pointer;
        }
        .cookie-modal-backdrop {
            display: none; position: fixed; inset: 0; background: rgba(15, 15, 25, 0.45);
            align-items: center; justify-content: center; z-index: 200; padding: 1rem;
        }
        .cookie-modal-backdrop.open { display: flex; }
        .cookie-modal {
            background: var(--surface); border-radius: var(--radius, 12px); padding: 1.4rem 1.5rem;
            max-width: 30rem; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        }
        .cookie-modal h3 { margin: 0 0 0.6rem; }
        .cookie-modal p { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
        .cookie-modal-actions { display: flex; justify-content: flex-end; }

    @media (min-width:769px){.sidebar[data-pin="open"]{transition:none!important;overflow:hidden!important;will-change:auto}.sidebar[data-pin="open"] .brand{height:62px!important;min-height:62px!important;margin-bottom:4px!important;flex:none}.sidebar[data-pin="open"] .brand img{display:block;width:100%!important;height:52px!important;max-width:100%!important;max-height:52px!important;object-fit:contain}.sidebar[data-pin="open"] nav{overflow-y:auto!important;overflow-x:hidden!important}.sidebar[data-pin="open"] nav a{margin:1px 10px!important}.sidebar[data-pin="open"] nav a.sub{margin-top:-1px!important}.sidebar[data-pin="open"] .sidebar-foot{flex:none}}html.timexo-nav-loading .main-col>main{cursor:progress}.sidebar nav a{transition:background-color .16s ease,color .16s ease}html{scrollbar-gutter:stable}.app-update-notice{position:fixed;right:1rem;bottom:1rem;z-index:300;display:flex;align-items:center;gap:.8rem;max-width:min(32rem,calc(100vw - 2rem));padding:.8rem .9rem .8rem 1rem;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:0 14px 40px rgba(15,23,42,.24)}.app-update-notice span{font-size:.9rem;font-weight:600}.app-update-notice .btn{white-space:nowrap}.app-update-dismiss{border:0;background:transparent;color:var(--text-muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:.3rem}.birthday-popup{position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(15,23,42,.52);backdrop-filter:blur(3px)}.birthday-dialog{width:min(31rem,100%);max-height:min(38rem,calc(100vh - 2rem));overflow:auto;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(15,23,42,.3);padding:1.35rem}.birthday-head{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:1rem}.birthday-icon{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;border-radius:14px;background:var(--primary-soft);font-size:1.35rem}.birthday-head h2{margin:0;font-size:1.15rem}.birthday-head p{margin:.2rem 0 0;font-size:.82rem;color:var(--text-muted)}.birthday-list{display:grid;gap:.55rem}.birthday-item{display:flex;align-items:center;gap:.8rem;padding:.75rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-alt);color:inherit;text-decoration:none}.birthday-item:hover{border-color:var(--primary)}.birthday-person{flex:1;min-width:0}.birthday-name{display:block;font-weight:700}.birthday-date{display:block;margin-top:.12rem;font-size:.78rem;color:var(--text-muted)}.birthday-age{flex:none;font-size:.78rem;font-weight:700;color:var(--primary-soft-text);background:var(--primary-soft);border-radius:999px;padding:.24rem .55rem}.birthday-actions{display:flex;justify-content:flex-end;margin-top:1rem}@media(max-width:600px){.app-update-notice{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;flex-wrap:wrap}.app-update-notice span{flex:1 1 calc(100% - 2rem)}.app-update-notice .btn{flex:1}.birthday-popup{align-items:flex-end;padding:.65rem}.birthday-dialog{border-radius:18px 18px 12px 12px;padding:1.1rem}.birthday-item{align-items:flex-start}}