/* ════ DESIGN SYSTEM — CSS VARIABLEN ════ */
    :root {
      --red:        #8B0000;
      --red-dark:   #6a0000;
      --red-soft:   #fff0ee;
      --red-border: #f0d0cb;
      --bg:         #fff8f6;
      --surface:    #ffffff;
      --text:       #1a1210;
      --text-2:     #5c4a46;
      --text-3:     #7a6460;
      --border:     #e8e8ed;
      --border-2:   #f5eeec;
      --shadow-sm:  0 1px 4px rgba(139,0,0,0.05), 0 2px 12px rgba(0,0,0,0.05);
      --shadow-md:  0 4px 20px rgba(139,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
      --r-sm:  8px;
      --r-md:  12px;
      --r-lg:  16px;
      --r-xl:  20px;
      /* ── Status-Farben (2026-07-25) ─────────────────────────────────────
         Vorher standen Grün/Rot/Orange fest im JS (z. B. #1b5e20). Auf den
         dunklen Themes war dunkelgrün auf dunkler Fläche kaum lesbar. Diese
         Tokens hellen je Theme auf, die *-soft/-border-Varianten sind die
         passenden Flächen/Rahmen dazu. IMMER diese statt fester Hex-Werte. */
      --ok:            #1b5e20;
      --ok-soft:       #e8f5e9;
      --ok-border:     #a5d6a7;
      --warn:          #8a6d00;
      --warn-soft:     #fff8e1;
      --warn-border:   #ffd54f;
      --danger:        #93000a;
      --danger-soft:   #ffdad6;
      --danger-border: #f5c2c2;
      --info:          #0d47a1;
      --info-soft:     #e3f2fd;
      --info-border:   #90caf9;
    }

    /* ════ THEME: DARK RED ════ */
    html[data-theme="dark-red"] {
      --red:        #ff4444;
      --red-dark:   #dd2222;
      --red-soft:   #2d0808;
      --red-border: #5a1010;
      --bg:         #110808;
      --surface:    #1e0c0c;
      --text:       #ffe8e8;
      --text-2:     #c89090;
      --text-3:     #b09090;
      --border:     #3a1818;
      --border-2:   #2e1010;
      --shadow-sm:  0 1px 4px rgba(139,0,0,.3), 0 2px 12px rgba(0,0,0,.3);
      --shadow-md:  0 4px 20px rgba(139,0,0,.4), 0 2px 8px rgba(0,0,0,.4);
      /* Dark Red: Status waermer abgestimmt, damit nichts ins Braun kippt */
      --ok:            #86e08f;
      --ok-soft:       #122a15;
      --ok-border:     #2f6b3c;
      --warn:          #ffcf5c;
      --warn-soft:     #33240d;
      --warn-border:   #6b5320;
      --danger:        #ff9a90;
      --danger-soft:   #3d1212;
      --danger-border: #7a2626;
      --info:          #8ec0ff;
      --info-soft:     #14203a;
      --info-border:   #2e4a7a;
    }
    /* ═══ Glass: UNIVERSELLER TAB-FIX — alle Elemente, alle Farben ═══ */

    /* Alle hellen Hintergründe → glass surface (JEDES Element: div, td, th, tr, span, label{
      background: rgba(255,255,255,0.06) !important;
      border-color: rgba(255,255,255,0.1) !important;
    }#ffebee"],#fff8e1"],#e8f5e9"] {
      background: rgba(255,255,255,0.05) !important;
      backdrop-filter: blur(12px) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    /* ── Glass: #ffebee, #fff3e0, #e8f5e9, #f3e5f5, #efebe9, #e3f2fd{
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.1) !important;
    }
    html[data-theme="dark-red"] body {
      background-color: var(--bg) !important;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,100,100,0.03) 1px, transparent 0) !important;
      color: var(--text) !important;
    }
    html[data-theme="dark-red"] #app-header {
      background: var(--surface) !important;
      border-bottom-color: var(--border) !important;
    }
    html[data-theme="dark-red"] .header-logo-text { color: var(--red) !important; }
    html[data-theme="dark-red"] .header-logo-sub { color: var(--text-3) !important; }
    html[data-theme="dark-red"] .header-bell-btn { color: var(--red) !important; }
    html[data-theme="dark-red"] .header-bell-btn:hover { background: var(--red-soft) !important; }
    html[data-theme="dark-red"] #staff-tab-bar {
      background: var(--surface) !important;
      border-bottom-color: var(--border) !important;
    }
    html[data-theme="dark-red"] #staff-tab-bar .tab-btn { color: var(--text-2) !important; }
    html[data-theme="dark-red"] #staff-tab-bar .tab-btn:hover { color: var(--red) !important; background: var(--red-soft) !important; }
    html[data-theme="dark-red"] #staff-tab-bar .tab-btn.tab-active { color: var(--red) !important; border-bottom-color: var(--red) !important; }
    html[data-theme="dark-red"] .nav-grp-dd { background: var(--surface) !important; border-color: var(--border) !important; }
    html[data-theme="dark-red"] .dd-item { color: var(--text-2) !important; }
    html[data-theme="dark-red"] .dd-item:hover { background: var(--red-soft) !important; color: var(--red) !important; }
    html[data-theme="dark-red"] #tablet-sidebar { background: var(--surface) !important; border-right-color: var(--border) !important; }
    html[data-theme="dark-red"] .ts-direct-btn,html[data-theme="dark-red"] .ts-grp-btn { color: var(--text-2) !important; }
    html[data-theme="dark-red"] .ts-direct-btn:hover,html[data-theme="dark-red"] .ts-grp-btn:hover { color: var(--red) !important; background: var(--red-soft) !important; }
    html[data-theme="dark-red"] .ts-sub-item { color: var(--text-2) !important; background: transparent !important; }
    html[data-theme="dark-red"] .ts-sub-item:hover { color: var(--red) !important; background: var(--red-soft) !important; }
    html[data-theme="dark-red"] .ts-sub-item.tab-active { color: var(--red) !important; background: var(--red-soft) !important; }
    html[data-theme="dark-red"] .ws-card,html[data-theme="dark-red"] .stat-card,html[data-theme="dark-red"] .stitch-card,html[data-theme="dark-red"] .bento-hero {
      background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important;
    }
    html[data-theme="dark-red"] .stat-num { color: var(--text) !important; }
    html[data-theme="dark-red"] .stat-label,html[data-theme="dark-red"] .stat-sub { color: var(--text-3) !important; }
    html[data-theme="dark-red"] .ws-table thead tr { background: rgba(255,255,255,.04) !important; }
    html[data-theme="dark-red"] .ws-table thead th { color: var(--text-3) !important; border-bottom-color: var(--border) !important; }
    html[data-theme="dark-red"] .ws-table tbody tr { border-bottom-color: var(--border-2) !important; }
    html[data-theme="dark-red"] .ws-table tbody tr:hover { background: rgba(255,255,255,.04) !important; }
    html[data-theme="dark-red"] .ws-table tbody td { color: var(--text) !important; }
    html[data-theme="dark-red"] .ws-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }
    html[data-theme="dark-red"] [id^="panel-"] { background: var(--bg) !important; color: var(--text) !important; }
    html[data-theme="dark-red"] #app-main { background: var(--bg) !important; }
    html[data-theme="dark-red"] .notif-panel { background: var(--surface) !important; border-color: var(--border) !important; }
    html[data-theme="dark-red"] .notif-panel-header { color: var(--text) !important; border-bottom-color: var(--border) !important; }
    html[data-theme="dark-red"] .notif-item { border-bottom-color: var(--border-2) !important; }
    html[data-theme="dark-red"] .notif-item:hover { background: var(--red-soft) !important; }
    html[data-theme="dark-red"] #mobile-bottom-nav { background: var(--surface) !important; border-top-color: var(--border) !important; }
    html[data-theme="dark-red"] .mob-nav-btn { color: var(--text-3) !important; }
    html[data-theme="dark-red"] .mob-nav-btn.mob-active { color: var(--red) !important; }
    html[data-theme="dark-red"] #app-footer { background: var(--surface) !important; border-top-color: var(--border) !important; color: var(--text-3) !important; }
    /* Login stays light always (intentional) */

    /* ════ DARK THEMES — DEEP OVERRIDES (inputs, cards,
    html[data-theme="dark-red"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    html[data-theme="dark-red"] select,
    html[data-theme="dark-red"] textarea {
      background: var(--surface) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
      color-scheme: dark;
    }
    html[data-theme="dark-red"] input::placeholder,
    html[data-theme="dark-red"] textarea::placeholder { color: var(--text-3) !important; }
    html[data-theme="dark-red"] select option {
      background: var(--surface);
      color: var(--text);
    }
    html[data-theme="dark-red"] [id^="panel-"] h1,
    html[data-theme="dark-red"] [id^="panel-"] h2,
    html[data-theme="dark-red"] [id^="panel-"] h3,
    html[data-theme="dark-red"] [id^="panel-"] h4 { color: var(--text) !important; }

    /* ── White / very-light inline backgrounds in panels ── */
    /* Matches: #fff, #ffffff, #fff0ee, #fff8f6, #fff3e0,
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#fff"],
    html[data-theme="dark-red"] [id^="panel-"] button[style*="background:#fff"],
    html[data-theme="dark-red"] [id^="panel-"] a[style*="background:#fff"],
    html[data-theme="dark-red"] [id^="panel-"] td[style*="background:#fff"],
    html[data-theme="dark-red"] [id^="panel-"] label[style*="background:#fff"] {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    /* Same for #fafafa, #f8f8fa, #f0f0f5, #f9fafb, #e9ecef,
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#faf"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#f8f"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#f0f"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#f9f"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#e9e"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#e5e"] {
      background: var(--surface) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#261816"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#1a1210"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#1e1e2e"] { color: var(--text) !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#5a403c"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#5c4a46"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#6b7280"] { color: var(--text-2) !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#8d6562"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#7a6460"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#6b4844"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#5a6472"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#6b6b6b"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#777"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#888"] { color: var(--text-3) !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#374151"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#4b5563"] { color: var(--text-2) !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#610000"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#8B0000"] { color: #ff8a80 !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#386a20"] { color: #81c784 !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#ba1a1a"] { color: #ef9a9a !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#c8860a"] { color: #ffcc80 !important; }
    html[data-theme="dark-red"] [id^="panel-"] tr[style*="background:#fff"] { background: var(--surface) !important; }
    html[data-theme="dark-red"] .product-row-name span,
    html[data-theme="dark-red"] .product-row-price .qty,
    html[data-theme="dark-red"] .floating-bar-total span,
    html[data-theme="dark-red"] .notif-group-label { color: var(--text-3) !important; }#ffebee"],
    html[data-theme="dark-red"] #panel-lager div[style*="linear-gradient(135deg,#ffebee"] {
      background: rgba(198,40,40,.15) !important;
      border-color: rgba(198,40,40,.4) !important;
    }#fff8e1"],
    html[data-theme="dark-red"] #panel-lager div[style*="linear-gradient(135deg,#fff8e1"] {
      background: rgba(245,127,23,.15) !important;
      border-color: rgba(245,127,23,.4) !important;
    }#e8f5e9"],
    html[data-theme="dark-red"] #panel-lager div[style*="linear-gradient(135deg,#e8f5e9"] {
      background: rgba(46,125,50,.15) !important;
      border-color: rgba(46,125,50,.4) !important;
    }
    html[data-theme="dark-red"] #panel-angebote button[style*="background:#fff"] {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] #panel-angebote button[style*="background:#fff"] div[style*="padding:7px"] {
      background: var(--surface) !important;
    }
    html[data-theme="dark-red"] #panel-dashboard .stat-card,
    html[data-theme="dark-red"] #panel-business .stat-card {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] #_toast { background: var(--surface) !important; color: var(--text) !important; }

    /* ── Modals opened via JS (settings,
    html[data-theme="dark-red"] #settings-modal > div {
      background: var(--surface) !important;
      color: var(--text) !important;
    }
    html[data-theme="dark-red"] #_confirm-box {
      background: var(--surface) !important;
      color: var(--text) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fafafa"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f8f8f8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f8f8fa"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f8f4f4"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f5f0ee"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f0ece8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f0f0f5"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#ede0de"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fef9c3"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fefce8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fdf5e8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f8dcd8"] {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#c0eda6"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f0fdf4"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e8fdf0"] {
      background: rgba(46,125,50,0.15) !important;
      border-color: rgba(46,125,50,0.3) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fde8e8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fff5f5"] {
      background: rgba(198,40,40,0.12) !important;
      border-color: rgba(198,40,40,0.25) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#1565c0"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#0d47a1"] { color: #93c5fd !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#0c2000"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#2e7d32"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#1b5e20"] { color: #86efac !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#f57c00"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#f9a825"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#e53935"] { color: #fbbf24 !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#3d1c11"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#1a0404"] { color: var(--text) !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#8c6b5e"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#c9b8b4"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#a89490"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#9e6b62"] { color: var(--text-3) !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#b52619"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#93000a"] { color: #ef9a9a !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#16a34a"] { color: #4ade80 !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border:1px solid #e3beb8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border:1px solid #f0e8e6"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border:1px solid #e8e8ed"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border:2px solid #e3beb8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-bottom:2px solid #e3beb8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-bottom:1px solid #f5f0ee"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-bottom:1px solid #f0e8e6"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-bottom:1px solid #e3beb8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-top:1px solid #f0ece8"] {
      border-color: var(--border) !important;
    }

    /* ════ SCHRITT 6a (2026-06-12): DARK + DARK-RED — Parität mit Glass ════ */

    /* Neutrale helle Hintergründe → Surface (alle Elemente,
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fff"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e0e0e0"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#eeeeee"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f5f5f5"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f0e8e6"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f3ebe9"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#faf5f4"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#efebe9"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f5ddd8"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e3beb8"] {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e8f5e9"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f1f8e9"] {
      background: rgba(46,125,50,0.15) !important;
      border-color: rgba(46,125,50,0.3) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e3f2fd"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#e1f5fe"] {
      background: rgba(25,118,210,0.15) !important;
      border-color: rgba(25,118,210,0.3) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#f3e5f5"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#ede7f6"] {
      background: rgba(123,31,162,0.18) !important;
      border-color: rgba(123,31,162,0.32) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#ffebee"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="background:#fce4ec"] {
      background: rgba(198,40,40,0.12) !important;
      border-color: rgba(198,40,40,0.25) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#333"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#444"] { color: var(--text) !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#555"] { color: var(--text-2) !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#999"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#9e9e9e"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#aaa"] { color: var(--text-3) !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#1a237e"] { color: #93c5fd !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#c62828"] { color: #ef9a9a !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#c9a227"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#D4AF37"] { color: #fcd34d !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#e65100"],
    html[data-theme="dark-red"] [id^="panel-"] *[style*="color:#f57f17"] { color: #fbbf24 !important; }
    html[data-theme="dark-red"] [id^="panel-"] *[style*="border-color:#e3beb8"] { border-color: var(--border) !important; }

    /* ════ GLOBALE A11Y-PFLICHT-FIXES ════ */

    /* Focus-Ring — alle interaktiven Elemente, alle Themes */
    :focus-visible {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
      border-radius: 4px;
    }
    html[data-theme="classic"] :focus-visible { outline-color: #8B0000; }
    html[data-theme="dark-red"] :focus-visible { outline-color: #ff6b6b; }

    /* ── Scrollbars pro Theme (erbt auf alle Scroll-Container; Safari behält Overlay) ── */
    html { scrollbar-width: thin; scrollbar-color: #d8c4c0 transparent; }
    html[data-theme="dark-red"] { scrollbar-color: #5a2020 transparent; }

    /* ── Sanfter Theme-Wechsel — nur App-Gerüst, nicht jedes Element (Performance) ── */
    body, #app-header, #staff-tab-bar, #tablet-sidebar, #mobile-bottom-nav, #app-footer,
    #app-main, [id^="panel-"], .ws-card, .stat-card, .stitch-card {
      transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    }

    /* ── Reduzierte Bewegung respektieren (Barrierefreiheit) ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; }
    }
    button:focus:not(:focus-visible), a:focus:not(:focus-visible),
    input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

    /* Disabled States */
    button:disabled, input:disabled, select:disabled, textarea:disabled,
    [aria-disabled="true"] { opacity: 0.45; cursor: not-allowed !important; pointer-events: none; }

    /* Input Placeholders */
    input::placeholder, textarea::placeholder { color: #9a8a86; }
    html[data-theme="dark-red"] input::placeholder,
    html[data-theme="dark-red"] textarea::placeholder { color: var(--text-3); }

    /* ws-label + ws-section-title — Classic */
    .ws-label { color: #5a4a46; }
    .ws-section-title { color: #1a1210; }

    /* Buttons min-height + Transitions */
    button, [role="button"], .ws-btn, .tab-btn, .mob-nav-btn, .dd-item {
      min-height: 36px;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                  box-shadow 0.15s ease, opacity 0.15s ease;
    }

    html[data-theme="dark-red"] #settings-modal > div{
      box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    }
    html[data-theme="dark-red"] .ws-table tbody tr:nth-child(even) td {
      background: rgba(255,255,255,0.025) !important;
    }
    html[data-theme="dark-red"] .ws-table thead tr { background: rgba(255,255,255,0.04) !important; }
    html[data-theme="dark-red"] .ws-table thead th { color: #96a0bc !important; border-bottom-color: var(--border) !important; }
    html[data-theme="dark-red"] .ws-btn-ghost { color: var(--text-2) !important; border-color: var(--border) !important; }
    html[data-theme="dark-red"] .ws-btn-ghost:hover { background: var(--border-2) !important; color: var(--text) !important; }

    /* Farbe allein nie als einziger Informationsträger — kritische Badges immer mit Icon */
    .ws-badge { font-weight: 600; }

    /* ════ RESET & BASE ════ */
    *, *::before, *::after { box-sizing: border-box; }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      vertical-align: middle; user-select: none;
    }
    .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    body {
      font-family: 'Inter', sans-serif;
      background-color: #fff8f6;
      color: #1e1e2e;
      font-size: 15px;
      line-height: 1.6;
      min-height: 100vh;
    }
    h1, h2, h3, h4, .font-headline { font-family: 'Plus Jakarta Sans', sans-serif; }

    /* ════ RESPONSIVE MOBILE HEADER ════ */
    @media screen and (max-width: 640px) {
      #app-header .header-inner {
        padding: 0 12px;
        height: 72px;
        gap: 8px;
      }
      .header-logo { gap: 10px; }
      .header-logo-sc { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
      .header-logo-sc span { font-size: 18px !important; }
      .header-logo-text { font-size: 20px; letter-spacing: 0.1em; }
      .header-logo-sub { font-size: 10px; letter-spacing: 0.1em; }

      /* Rechte Seite komprimieren */
      .header-right { gap: 6px !important; }

      /* Server-Status: nur Punkt, kein Text */
      #server-status-badge #srv-label { display: none !important; }
      #server-status-badge { padding: 5px 7px !important; }

      /* Einkauf-Button: nur Icon */
      #einkauf-log-btn span[data-i18n] { display: none !important; }
      #einkauf-log-btn { padding: 8px 10px !important; }

      /* Logout-Button: nur Icon */
      #logout-btn span[data-i18n] { display: none !important; }
      #logout-btn { padding: 8px 10px !important; }

      /* Role-Badge kleiner */
      #role-badge { padding: 5px 10px !important; font-size: 12px !important; }
    }

    /* ════ RESPONSIVE DESKTOP SKALIERUNG ════ */
    /* Skaliert die gesamte App automatisch für größere Bildschirme */
    @media screen and (min-width: 1280px) {
      body { font-size: 15.5px; }
      #app-main { zoom: 1.05; }
    }
    @media screen and (min-width: 1440px) {
      body { font-size: 16px; }
      #app-main { zoom: 1.1; }
      #app-header .text-sm, #app-header .text-xs { font-size: 13px; }
    }
    @media screen and (min-width: 1600px) {
      body { font-size: 16.5px; }
      #app-main { zoom: 1.15; }
    }
    @media screen and (min-width: 1920px) {
      body { font-size: 17px; }
      #app-main { zoom: 1.22; }
    }
    @media screen and (min-width: 2560px) {
      body { font-size: 18px; }
      #app-main { zoom: 1.4; }
    }

    /* ════════════════════════════════════════════════════════════════════
       GERÄTE-RESPONSIVE FEINTUNING (2026-06-29)
       Ziel: jedes Gerät passend — Handy, Tablet, Laptop, PC.
       Prinzipien (design-skills-ideen.md): klare Touch-Ziele, ruhige Dichte,
       komfortable Lesebreite, keine ausufernden Zeilen.
       ════════════════════════════════════════════════════════════════════ */

    /* — TOUCH-GERÄTE (Handy/Tablet): komfortable Mindest-Tap-Größen — */
    @media (pointer: coarse) {
      .ws-btn, .ws-btn-sm, button.dd-item, .ts-sub-item, [data-drawer-nav] {
        min-height: 42px;
      }
      /* iOS: 16px Eingabe-Schrift verhindert das Auto-Zoom beim Fokus */
      input[type="text"], input[type="number"], input[type="search"],
      input[type="email"], input[type="password"], input[type="tel"],
      select, textarea {
        font-size: 16px !important;
        min-height: 42px;
      }
    }

    /* — HANDY (≤640): app-weite Dichte — Seiten-Header + Karten kompakter,
         gilt auf JEDEM Tab (page-hdr/ws-card sind globale Klassen) — */
    @media (max-width: 640px) {
      .page-hdr { padding: 12px 14px; gap: 10px; margin-bottom: 14px; border-radius: 14px; }
      .page-hdr-icon { width: 38px; height: 38px; }
      .page-hdr-icon .material-symbols-outlined { font-size: 19px; }
      .page-hdr-title { font-size: 17px; }
      .page-hdr-sub { font-size: 11px; }
      .ws-card { padding: 14px; border-radius: 14px; }
      .ws-card-sm { padding: 12px; }
      /* Tabellen in allen Panels: dichter → weniger horizontales Scrollen */
      [id^="panel-"] table { font-size: 12px; }
      [id^="panel-"] table th, [id^="panel-"] table td { padding: 6px 8px !important; }
      /* Dialoge/Modals nie höher als der Schirm (scrollbar statt abgeschnitten) */
      [id$="-modal"] > div, .ws-modal > div { max-height: 90vh; overflow-y: auto; }
      /* GROSSE Display-Zahlen (inline gesetzt) app-weit verkleinern — trifft
         alle 37 Tabs (Dashboard, Statistik, Lager, Produkte, Umsatz, Gewinn …) */
      [id^="panel-"] [style*="font-size:40px"] { font-size: 29px !important; }
      [id^="panel-"] [style*="font-size:38px"] { font-size: 28px !important; }
      [id^="panel-"] [style*="font-size:36px"] { font-size: 27px !important; }
      [id^="panel-"] [style*="font-size:34px"] { font-size: 26px !important; }
      [id^="panel-"] [style*="font-size:32px"] { font-size: 25px !important; }
      [id^="panel-"] [style*="font-size:30px"] { font-size: 23px !important; }
      [id^="panel-"] [style*="font-size:28px"] { font-size: 22px !important; }
      [id^="panel-"] [style*="font-size: 40px"] { font-size: 29px !important; }
      [id^="panel-"] [style*="font-size: 32px"] { font-size: 25px !important; }
      [id^="panel-"] [style*="font-size: 30px"] { font-size: 23px !important; }
      [id^="panel-"] [style*="font-size: 28px"] { font-size: 22px !important; }
      /* Große vertikale Abstände am Handy verdichten (nur Spacing → bricht nichts) */
      [id^="panel-"] [style*="margin-bottom:28px"] { margin-bottom: 18px !important; }
      [id^="panel-"] [style*="margin-bottom:24px"] { margin-bottom: 16px !important; }
      [id^="panel-"] [style*="margin-bottom: 28px"] { margin-bottom: 18px !important; }
      [id^="panel-"] [style*="margin-bottom: 24px"] { margin-bottom: 16px !important; }
      [id^="panel-"] [style*="margin-bottom:20px"] { margin-bottom: 14px !important; }
      /* Mittelgroße Schriften am Handy leicht zurücknehmen */
      [id^="panel-"] [style*="font-size:26px"] { font-size: 21px !important; }
      [id^="panel-"] [style*="font-size:24px"] { font-size: 20px !important; }
      [id^="panel-"] [style*="font-size: 26px"] { font-size: 21px !important; }
      [id^="panel-"] [style*="font-size: 24px"] { font-size: 20px !important; }
      /* Große Abstände (gap) am Handy verdichten — nur Spacing, bricht nichts */
      [id^="panel-"] [style*="gap:20px"] { gap: 12px !important; }
      [id^="panel-"] [style*="gap:16px"] { gap: 10px !important; }
      [id^="panel-"] [style*="gap: 20px"] { gap: 12px !important; }
      [id^="panel-"] [style*="gap: 16px"] { gap: 10px !important; }
    }

    /* — GROSSES HANDY (481–767): etwas mehr Luft als am Mini-Handy — */
    @media (min-width: 481px) and (max-width: 767px) {
      #app-main { padding-left: 16px !important; padding-right: 16px !important; }
    }

    /* — TABLET-Bereich (641–1024): sehr große Display-Zahlen sanft zurücknehmen
         (app-weit, alle 37 Tabs). Gering gehalten → kein „zu klein", kein Bruch. */
    @media (min-width: 641px) and (max-width: 1024px) {
      [id^="panel-"] [style*="font-size:40px"], [id^="panel-"] [style*="font-size: 40px"] { font-size: 33px !important; }
      [id^="panel-"] [style*="font-size:38px"], [id^="panel-"] [style*="font-size: 38px"] { font-size: 32px !important; }
      [id^="panel-"] [style*="font-size:36px"], [id^="panel-"] [style*="font-size: 36px"] { font-size: 31px !important; }
      [id^="panel-"] [style*="font-size:34px"], [id^="panel-"] [style*="font-size: 34px"] { font-size: 30px !important; }
    }

    /* — TABLET (768–1024): zentrierte, komfortable Breite statt voll gestreckt — */
    @media (min-width: 768px) and (max-width: 1024px) {
      #app-main {
        max-width: 940px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
      }
      /* Karten-Grids dürfen am Tablet ruhig 2–3-spaltig bleiben (Inline-minmax greift) */
    }

    /* — Laptops (≤1439) bleiben bewusst voll-breit (keine Regression). —
       Erst ab sehr breiten Monitoren (≥1440) zentrierte Lese-Spalte, damit
       Zeilen/Tabellen nicht ausufern (Design-Prinzip, design-skills-ideen.md). */
    @media (min-width: 1440px) and (max-width: 1679px) {
      #app-main { max-width: 1360px; margin-left: auto; margin-right: auto; }
    }
    @media (min-width: 1680px) {
      #app-main { max-width: 1480px; margin-left: auto; margin-right: auto; }
    }
    @media (min-width: 2200px) {
      #app-main { max-width: 1680px; }
    }

    /* — Querformat-Handy (niedrige Höhe): Bottom-Nav + Header schlanker — */
    @media (max-height: 480px) and (orientation: landscape) {
      #app-header .header-inner { height: 56px !important; }
      #app-main { padding-top: 8px !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       GERÄTE-FEINSCHLIFF v2 (2026-07-02)
       Ergänzt den Block oben: pro Gerät Buttons, Nav & Dichte gezielt anpassen
       (design-skills-ideen.md: klare Touch-Ziele, ruhige Dichte, Maus-Feedback).
       Rein additiv — fixe Inline-Größen werden bewusst NICHT übersteuert.
       ════════════════════════════════════════════════════════════════════ */

    /* — TABLET (768–1024): großzügigere Nav- & Button-Ziele für Finger — */
    @media (min-width: 768px) and (max-width: 1024px) {
      button.dd-item, .ts-sub-item, [data-drawer-nav] { min-height: 46px; }
      .ws-btn, .ws-btn-sm { min-height: 44px; }
      #tablet-sidebar .ts-sub-item { font-size: 14px; }
      /* Panel-Buttons ohne fixe Größe komfortabel tappbar */
      [id^="panel-"] button:not([style*="width:"]):not([style*="height:"]) { min-height: 42px; }
    }

    /* — LAPTOP (1025–1439): mehr Seitenluft, Zeilen nicht randlos bis zum Rand — */
    @media (min-width: 1025px) and (max-width: 1439px) {
      #app-main { padding-left: 32px !important; padding-right: 32px !important; }
    }

    /* — MAUS-GERÄTE (Laptop/PC): dezentes Hover-Feedback, nur bei feinem Zeiger — */
    @media (pointer: fine) and (min-width: 1025px) {
      .ws-card { transition: box-shadow .15s ease; }
      .ws-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
      .ws-btn, .ws-btn-sm, button.dd-item, .ts-sub-item { transition: filter .12s ease; }
      .ws-btn:hover, .ws-btn-sm:hover, button.dd-item:hover, .ts-sub-item:hover { filter: brightness(0.96); }
    }

    /* — HANDY (≤480): kleine Panel-Buttons sicher tappbar (fixe Größen bleiben) — */
    @media (max-width: 480px) {
      [id^="panel-"] button:not([style*="width:"]):not([style*="height:"]) { min-height: 40px; }
    }

    /* — HANDY (≤560): sehr breite Grids (4–6 Spalten) passen nie aufs Handy →
         auf 2 Spalten brechen. 2–3-spaltige bleiben (passen). Kein Überlauf. — */
    @media (max-width: 560px) {
      [id^="panel-"] [style*="repeat(4,1fr)"], [id^="panel-"] [style*="repeat(4, 1fr)"],
      [id^="panel-"] [style*="repeat(5,1fr)"], [id^="panel-"] [style*="repeat(5, 1fr)"],
      [id^="panel-"] [style*="repeat(6,1fr)"], [id^="panel-"] [style*="repeat(6, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      #app-main { overflow-x: hidden; }
    }

    /* ════ ANIMATIONS ════ */
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
    .pa-pulse-row { animation: pulse 1.5s infinite; }
    .spinner { width:40px; height:40px; border:3px solid #ddd; border-top-color:#8B0000; border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 16px; }
    .spinner-sm { width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; }
    .progress-fill { transition: width .3s ease; }
    .tab-indicator { position:absolute; bottom:0; left:0; right:0; height:3px; background:#8B0000; border-radius:3px 3px 0 0; }
    .add-btn.added { background:#dfe0ff !important; color:#0d2ccc !important; border-color:#c7c9f9 !important; cursor:default; }
    .add-btn.adding { opacity:.6; cursor:not-allowed !important; }
    .hide-scrollbar::-webkit-scrollbar { display:none; }
    .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

    /* ════ WEBSITE CARDS ════ */
    .ws-card {
      background: var(--surface);
      border-radius: var(--r-lg);
      border: 1px solid var(--border-2);
      box-shadow: var(--shadow-sm);
      padding: 24px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .ws-card:hover { box-shadow: var(--shadow-md); }
    .ws-card-sm { padding: 18px; border-radius: var(--r-md); }

    /* ════ STAT CARDS ════ */
    .stat-card {
      background: var(--surface);
      border-radius: var(--r-lg);
      border: 1px solid var(--border-2);
      box-shadow: var(--shadow-sm);
      padding: 22px 24px;
      display: flex; align-items: center; gap: 18px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .stat-icon {
      width: 56px; height: 56px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; flex-shrink: 0;
    }
    .stat-icon-red { background: #fff0ee; color: #8B0000; }
    .stat-icon-green { background: #e8f5e9; color: #2e7d32; }
    .stat-icon-amber { background: #fff8e1; color: #f57f17; }
    .stat-icon-blue { background: #e3f2fd; color: #1565c0; }
    .stat-num { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 32px; font-weight: 800; line-height: 1; color: #1a1210; }
    .stat-label { font-size: 13px; color: #5a5060; font-weight: 500; margin-top: 3px; }
    .stat-sub { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; display: inline-block; margin-top: 4px; }
    .stat-sub-red { background: #ffdad6; color: #93000a; }
    .stat-sub-green { background: #e8f5e9; color: #1b5e20; }
    .stat-sub-amber { background: #fff8e1; color: #e65100; }

    /* ════ WEBSITE TABLES ════ */
    .ws-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .ws-table thead tr { background: #f3eeec; }
    .ws-table thead th {
      padding: 14px 20px; text-align: left;
      font-size: 12px; font-weight: 700; color: #4a3c3a;
      text-transform: uppercase; letter-spacing: 0.05em;
      border-bottom: 2px solid #e0d0cc;
    }
    .ws-table tbody tr { border-bottom: 1px solid #f0ebe8; transition: background .1s; }
    .ws-table tbody tr:hover { background: #fdf8f6; }
    .ws-table tbody tr:nth-child(even) td { background: #faf5f3; }
    .ws-table tbody tr:last-child { border-bottom: none; }
    .ws-table tbody td { padding: 14px 20px; color: #1a1210; height: 52px; vertical-align: middle; }
    .ws-table tbody tr:nth-child(even) td { background: #fafafa; }

    /* ════ WEBSITE BUTTONS ════ */
    .ws-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 24px; border-radius: var(--r-md); border: none;
      font-size: 14px; font-weight: 700; font-family: inherit;
      cursor: pointer; transition: all 0.18s; white-space: nowrap;
    }
    .ws-btn .material-symbols-outlined { font-size: 18px; }
    .ws-btn-primary { background: var(--red); color: #fff; }
    .ws-btn-primary:hover { background: var(--red-dark); box-shadow: 0 4px 12px rgba(139,0,0,0.3); }
    .ws-btn-secondary { background: var(--surface); color: var(--red); border: 1.5px solid var(--red-border); }
    .ws-btn-secondary:hover { background: var(--red-soft); border-color: var(--red); }
    .ws-btn-ghost { background: transparent; color: var(--text-3); border: 1.5px solid var(--border); }
    .ws-btn-ghost:hover { background: var(--border-2); color: var(--text); }
    .ws-btn-sm { padding: 7px 16px; font-size: 13px; }
    .ws-btn-sm .material-symbols-outlined { font-size: 15px; }

    /* ════ SECTION HEADERS ════ */
    .ws-section-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
    }
    .ws-section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px; font-weight: 800; color: #1e1e2e;
      display: flex; align-items: center; gap: 10px;
    }
    .ws-section-title .material-symbols-outlined { font-size: 22px; color: #8B0000; }
    .ws-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
    }
    .ws-badge-red { background: #ffdad6; color: #93000a; }
    .ws-badge-green { background: #e8f5e9; color: #1b5e20; }
    .ws-badge-amber { background: #fff8e1; color: #c66900; }

    /* ════ INPUT / FORM ════ */
    .ws-input {
      width: 100%; padding: 11px 14px;
      border-radius: var(--r-md); border: 1.5px solid var(--border);
      font-size: 14px; font-family: inherit; color: var(--text);
      background: var(--bg); outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .ws-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(139,0,0,0.08); }
    .ws-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }

    /* ════ HEADER ════ */
    #app-header {
      background: #610000;
      border-bottom: none;
      position: sticky; top: 0; z-index: 50;
      box-shadow: 0 2px 12px rgba(97,0,0,0.25);
      transition: background .3s, box-shadow .3s;
      color: #fff;
    }
    #app-header .header-inner {
      max-width: 100%; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 40px; height: 82px; gap: 20px;
    }
    /* Das SC-Zeichen ist die Identitaet der App und wird NIE gequetscht
       (flex-shrink:0). Nur der Schriftzug daneben darf nachgeben/kuerzen.
       Bug 2026-07-31: mit flex-shrink:1 auf dem ganzen Logo nahm sich die
       rechte Seite allen Platz und schob das SC-Zeichen aus dem Bild. */
    .header-logo { display:flex; align-items:center; gap:14px; flex-shrink:0; min-width:0; }
    .header-logo > div { min-width: 0; }
    .header-logo-text, .header-logo-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Letzte Sicherung: die Kopfzeile darf den Bildschirm nie seitlich sprengen. */
    #app-header, #app-header .header-inner { max-width: 100vw; overflow-x: hidden; }
    .header-logo-icon { font-size:34px; line-height:1; }
    .header-logo-text {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300; font-size: 22px; color: #f5eeea;
      letter-spacing: 0.15em; line-height: 1.1; text-transform: uppercase;
    }
    .header-logo-sub {
      font-family: 'Inter', sans-serif;
      font-size: 11px; color: rgba(201,168,76,0.80); font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase;
    }
    .header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .header-bell-btn {
      border: none; background: transparent; cursor: pointer;
      width: 42px; height: 42px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s; color: rgba(255,255,255,0.85);
    }
    .header-bell-btn:hover { background: rgba(255,255,255,0.12); }
    .header-bell-btn { position: relative; }

    /* === Notification Center === */
    .notif-panel {
      position: fixed; top: 82px; right: 8px; width: 360px; max-width: calc(100vw - 16px);
      max-height: 70vh; background: #fff; border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,.18); z-index: 9999;
      display: none; flex-direction: column; overflow: hidden;
      border: 1px solid #ecdad6;
    }
    .notif-panel.open { display: flex; }
    .notif-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid #f0e0dc;
      font-weight: 700; font-size: 15px; color: #261816;
    }
    .notif-panel-header button {
      background: none; border: none; color: #8B0000; font-size: 12px;
      font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px;
    }
    .notif-panel-header button:hover { background: #fff0ee; }
    .notif-panel-body { overflow-y: auto; flex: 1; padding: 4px 0; }
    .notif-item {
      display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
      cursor: pointer; transition: background .15s; border-bottom: 1px solid #f8eeec;
    }
    .notif-item:hover { background: #fff8f6; }
    .notif-item.unread { background: #fef3f0; }
    .notif-item.unread:hover { background: #fde8e3; }
    .notif-icon {
      width: 36px; height: 36px; border-radius: 10px; display: flex;
      align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
    }
    .notif-icon.critical { background: #ffdad6; color: #93000a; }
    .notif-icon.warning { background: #fff3e0; color: #b45309; }
    .notif-icon.info { background: #e3f2fd; color: #1565c0; }
    .notif-icon.success { background: #e8f5e9; color: #2e7d32; }
    .notif-content { flex: 1; min-width: 0; }
    .notif-title { font-size: 13px; font-weight: 600; color: #261816; margin-bottom: 2px; }
    .notif-body { font-size: 12px; color: #6d5550; line-height: 1.4; }
    .notif-time { font-size: 11px; color: #b09a96; margin-top: 4px; }
    .notif-empty {
      padding: 40px 16px; text-align: center; color: #b09a96; font-size: 14px;
    }
    .notif-badge {
      position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
      border-radius: 9px; background: #d32f2f; color: white; font-size: 10px;
      font-weight: 700; display: flex; align-items: center; justify-content: center;
      padding: 0 4px; border: 2px solid white;
    }
    .notif-badge:empty, .notif-badge[data-count="0"] { display: none; }
    .sync-ok { color: #2e7d32; }
    .sync-connecting { color: #f57f17; }
    .sync-offline { color: #c62828; }
    .notif-group-label {
      padding: 8px 16px 4px; font-size: 11px; font-weight: 700;
      color: #7a6460; text-transform: uppercase; letter-spacing: .03em;
    }
    #biz-header-btn {
      display: flex; align-items: center; gap: 8px;
      background: #1a1a2e; color: #D4AF37;
      border: 1.5px solid #2d2d4a; border-radius: 10px;
      padding: 10px 20px; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: all .2s; white-space: nowrap;
    }
    #biz-header-btn:hover { background: #252540; border-color: #D4AF37; }
    #biz-header-btn.active { background: #D4AF37; color: #1a1a2e; border-color: #D4AF37; }
    #biz-header-btn .material-symbols-outlined { font-size: 18px; }

    /* ════ STAFF TAB BAR ════ */
    #staff-tab-bar {
      background: #fff;
      border-bottom: 2px solid #e8e8ed;
      position: sticky; top: 82px; z-index: 40;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    #staff-tab-bar .tabs-inner {
      max-width: 100%; margin: 0 auto;
      display: flex; padding: 0 40px;
      overflow: visible; gap: 4px; align-items: flex-end;
    }
    #staff-tab-bar .tab-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 14px 24px; height: 56px;
      border: none; border-bottom: 3px solid transparent;
      background: none; cursor: pointer;
      font-size: 15px; font-weight: 500; font-family: inherit;
      color: #6b7280; white-space: nowrap;
      transition: color .15s, border-color .15s;
      position: relative; margin-bottom: -2px;
    }
    #staff-tab-bar .tab-btn:hover { color: #8B0000; background: #fff5f5; border-radius: 8px 8px 0 0; }
    #staff-tab-bar .tab-btn.tab-active {
      color: #8B0000; font-weight: 700;
      border-bottom: 3px solid #C9A84C;
      background: #fff0ee; border-radius: 8px 8px 0 0;
    }
    #staff-tab-bar .tab-btn .material-symbols-outlined { font-size: 20px; }

    /* ════ STATS BAR ════ */
    #stats-dashboard {
      background: transparent;
      padding: 28px 0 8px;
    }
    #stats-dashboard.hidden { display: none; }

    /* ════ MOBILE BOTTOM NAV ════ */
    #mobile-bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
      background: #610000;
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 -4px 24px rgba(97,0,0,0.4);
      padding: 4px 4px env(safe-area-inset-bottom, 8px);
      display: flex; align-items: center; justify-content: space-around;
      min-height: 62px;
    }
    .mob-nav-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 3px; padding: 8px 2px 6px; min-width: 48px; max-width: 76px;
      border: none; background: none; cursor: pointer;
      font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6) !important;
      font-family: 'Inter',sans-serif; letter-spacing: 0.02em;
      transition: all .15s; border-radius: 12px;
      position: relative;
    }
    .mob-nav-btn .material-symbols-outlined { font-size: 26px !important; color: rgba(255,255,255,0.6) !important; transition: all .15s; }
    .mob-nav-btn .mob-nav-label { color: rgba(255,255,255,0.6) !important; font-size: 11px; }
    /* Aktiver Tab: weiß + Indikator-Linie oben */
    .mob-nav-btn.mob-active {
      color: #fff !important; font-weight: 700;
      background: rgba(255,255,255,0.13);
    }
    .mob-nav-btn.mob-active .material-symbols-outlined { color: #fff !important; }
    .mob-nav-btn.mob-active .mob-nav-label { color: #fff !important; }
    .mob-nav-btn.mob-active::before {
      content: ''; position: absolute; top: 0; left: 20%; right: 20%;
      height: 3px; background: #fff; border-radius: 0 0 3px 3px;
    }
    .mob-nav-dot {
      position: absolute; top: 4px; right: 8px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--red); border: 1.5px solid var(--surface);
    }
    #mob-biz-btn {
      flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
      gap: 2px; padding: 6px 10px;
      border: 1.5px solid #2d2d4a; background: #1a1a2e;
      border-radius: 12px; cursor: pointer;
      font-size: 9px; font-weight: 700; color: #D4AF37;
      font-family: inherit; transition: all .15s;
    }
    #mob-biz-btn .material-symbols-outlined { font-size: 18px; color: #D4AF37; }
    #mob-biz-btn.mob-biz-active { background: #D4AF37 !important; border-color: #D4AF37 !important; color: #1a1a2e !important; }
    #mob-biz-btn.mob-biz-active .material-symbols-outlined { color: #1a1a2e !important; }

    /* ════ MEHR DRAWER ════ */
    #mehr-drawer-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 48;
      backdrop-filter: blur(2px);
    }
    #mehr-drawer {
      position: fixed;
      bottom: 78px; left: 0; right: 0;
      background: #fff;
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
      z-index: 49;
      padding: 8px 16px 24px;
      transform: translateY(110%);
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    #mehr-drawer.drawer-open { transform: translateY(0); }
    .drawer-handle { width: 40px; height: 4px; background: #e2e2e8; border-radius: 2px; margin: 8px auto 16px; }
    .drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .drawer-item {
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; padding: 14px 4px 12px;
      border: 1.5px solid #e8e8ed; border-radius: 14px;
      background: #fff; cursor: pointer;
      font-size: 11px; font-weight: 600; color: #6b7280;
      font-family: inherit; transition: all .15s;
    }
    .drawer-item.mob-active { background: #fff0ee; border-color: #e3beb8; color: #8B0000; }
    .drawer-item .material-symbols-outlined { font-size: 24px; }

    /* FM mobile badge */
    .mob-nav-btn { position: relative; }

    /* Responsive FM cards */
    @media (min-width: 640px) {
      .fm-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
    }

    /* ════ FOOTER ════ */
    #app-footer {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
      background: #fff;
      border-top: 1px solid #e8e8ed;
      padding: 10px 40px;
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; color: #5a6472; flex-wrap: wrap; gap: 8px;
    }
    /* Abstand damit Inhalt nicht hinter Footer verschwindet */
    #app-main { padding-bottom: 48px; }
    #app-footer strong { color: #6b7280; }
    body.biz-mode #app-footer { display: none; }

    /* ════ BUSINESS DARK MODE ════ */
    body.biz-mode { background: #0d0d1a !important; color: #e0e0f0 !important; }
    body.biz-mode #app-header { background: #12122a; border-bottom-color: #2d2d4a; box-shadow: 0 1px 12px rgba(0,0,0,.4); }
    body.biz-mode #app-header .header-logo-text { color: #D4AF37; }
    body.biz-mode #app-header .header-logo-sub { color: #8888aa; }
    body.biz-mode #staff-tab-bar { display: none !important; }
    body.biz-mode #stats-dashboard { display: none !important; }
    body.biz-mode #mobile-bottom-nav { background: rgba(18,18,42,.95); border-top-color: rgba(45,45,74,.6); }
    body.biz-mode #panel-business { background: #0d0d1a; min-height: 60vh; }
    body.biz-mode [id^="panel-"] { background: #0d0d1a !important; color: #e0e0f0 !important; }
    body.biz-mode [id^="panel-"] h1,
    body.biz-mode [id^="panel-"] h2,
    body.biz-mode [id^="panel-"] h3,
    body.biz-mode [id^="panel-"] h4 { color: #e8e0ff !important; }
    /* Business Mode — fix dark inline text on dark background */
    body.biz-mode [id^="panel-"] div[style*="background:#fff"],
    body.biz-mode [id^="panel-"] button[style*="background:#fff"],
    body.biz-mode [id^="panel-"] td[style*="background:#fff"],
    body.biz-mode [id^="panel-"] label[style*="background:#fff"] { background: #1a1a2e !important; border-color: #2d2d4a !important; }
    body.biz-mode [id^="panel-"] div[style*="background:#faf"],
    body.biz-mode [id^="panel-"] div[style*="background:#f8f"],
    body.biz-mode [id^="panel-"] div[style*="background:#f0f"],
    body.biz-mode [id^="panel-"] div[style*="background:#f9f"],
    body.biz-mode [id^="panel-"] div[style*="background:#e9e"],
    body.biz-mode [id^="panel-"] div[style*="background:#e5e"] { background: #1a1a2e !important; }
    body.biz-mode [id^="panel-"] [style*="color:#261816"],
    body.biz-mode [id^="panel-"] [style*="color:#1a1210"],
    body.biz-mode [id^="panel-"] [style*="color:#1e1e2e"] { color: #e8e0ff !important; }
    body.biz-mode [id^="panel-"] [style*="color:#5a403c"],
    body.biz-mode [id^="panel-"] [style*="color:#5c4a46"],
    body.biz-mode [id^="panel-"] [style*="color:#6b7280"],
    body.biz-mode [id^="panel-"] [style*="color:#374151"],
    body.biz-mode [id^="panel-"] [style*="color:#4b5563"] { color: #b0b8d0 !important; }
    body.biz-mode [id^="panel-"] [style*="color:#8d6562"],
    body.biz-mode [id^="panel-"] [style*="color:#7a6460"],
    body.biz-mode [id^="panel-"] [style*="color:#6b4844"],
    body.biz-mode [id^="panel-"] [style*="color:#5a6472"],
    body.biz-mode [id^="panel-"] [style*="color:#6b6b6b"],
    body.biz-mode [id^="panel-"] [style*="color:#777"],
    body.biz-mode [id^="panel-"] [style*="color:#888"] { color: #8899bb !important; }
    /* Business Mode — dark accent colors (pizza table profit/margin) */
    body.biz-mode [id^="panel-"] [style*="color:#610000"],
    body.biz-mode [id^="panel-"] [style*="color:#8B0000"] { color: #ff8a80 !important; }
    body.biz-mode [id^="panel-"] [style*="color:#386a20"] { color: #81c784 !important; }
    body.biz-mode [id^="panel-"] [style*="color:#ba1a1a"] { color: #ef9a9a !important; }
    body.biz-mode [id^="panel-"] [style*="color:#c8860a"] { color: #ffcc80 !important; }
    body.biz-mode [id^="panel-"] tr[style*="background:#fff"] { background: #1a1a2e !important; }
    body:not(.biz-mode) #staff-tab-bar { display: block; }

    /* ════ RESPONSIVE ════ */
    @media (max-width: 1024px) {
      #app-header .header-inner { padding: 0 24px; }
      #staff-tab-bar .tabs-inner { padding: 0 24px; }
      #app-main { padding-left: 24px !important; padding-right: 24px !important; }
      #app-footer { padding: 14px 24px; }
    }
    /* ════ MOBILE & IPHONE (≤767px) ════ */
    @media (max-width: 767px) {
      body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }

      /* ── Inhalt: volle Breite ── */
      #app-main {
        padding: 10px 12px 110px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }
      [id^="panel-"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
      }
      [id^="panel-"] > div,
      [id^="panel-"] > section {
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* ── Header: Safe Area für iPhone Statusleiste ── */
      #app-header {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-top: env(safe-area-inset-top) !important;
        height: calc(60px + env(safe-area-inset-top)) !important;
      }
      #app-header .header-inner {
        height: 60px !important;
        padding: 0 12px !important;
        gap: 6px !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
      }

      /* Logo */
      .header-logo { gap: 8px !important; flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; }
      .header-logo-icon { font-size: 20px !important; }
      .header-logo-text { font-size: 16px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
      .header-logo-sub { display: none !important; }
      .header-right { flex-shrink: 0 !important; }

      /* Right-Side-Icons: enger */
      .header-right { gap: 3px !important; flex-shrink: 0; }

      /* Role Badge: kompakt */
      #role-badge { padding: 3px 7px !important; font-size: 11px !important; border-radius: 14px !important; }

      /* Abmelden: nur Icon, kein Text */
      #logout-btn {
        padding: 5px !important;
        border: none !important;
        background: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        min-width: 0 !important;
      }
      #logout-btn .material-symbols-outlined { font-size: 20px !important; color: #5a403c !important; }

      /* Settings Icon */
      #settings-btn { padding: 5px !important; }
      #settings-btn .material-symbols-outlined { font-size: 20px !important; }

      /* Bell */
      .header-bell-btn { padding: 5px !important; }
      .header-bell-btn .material-symbols-outlined { font-size: 20px !important; }

      /* Einkauf: nur Icon, kein Text */
      #einkauf-log-btn {
        padding: 6px 8px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        gap: 0 !important;
      }
      #einkauf-log-btn .material-symbols-outlined { font-size: 20px !important; }

      /* Lagerwarnung: nur Icon + Zahl */
      #header-badge { padding: 3px 7px !important; font-size: 0 !important; gap: 3px !important; }
      #header-badge .material-symbols-outlined { font-size: 14px !important; }
      #header-badge-text { display: none !important; }

      /* Server-Status: nur Dot */
      #server-status-badge { padding: 3px 5px !important; gap: 0 !important; border-radius: 50% !important; width: 22px !important; height: 22px !important; justify-content: center !important; }
      #srv-label { display: none !important; }

      /* Verstecken auf Mobile */
      #sync-status { display: none !important; }
      #biz-header-btn { display: none !important; }

      /* ── Inputs: kein Auto-Zoom auf iPhone ── */
      input, select, textarea { font-size: 16px !important; }
      button { touch-action: manipulation; }

      /* ── Tabellen scrollbar ── */
      table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* ── Bottom Nav: iPhone Notch ── */
      #mobile-bottom-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
      .mob-nav-btn .material-symbols-outlined { font-size: 24px !important; }

      /* ── Footer & Desktop-Nav: ausblenden ── */
      #app-footer { display: none !important; }

      /* ── Mehr-Drawer ── */
      #mehr-drawer { border-radius: 28px 28px 0 0 !important; }
      .drawer-item { padding: 16px 4px 14px !important; }
      .drawer-item .material-symbols-outlined { font-size: 26px !important; }
    }

    /* ════ KLEINE PHONES (≤390px / iPhone SE) ════ */
    /* Kopfzeile am Handy: der lange Schriftzug „Pizzeria San Carino" passt neben
       Versions-Pille, Rolle und den Aktions-Knoepfen nicht mehr. Die Regel galt
       frueher erst ab 390px — auf einem 402px-iPhone blieb der Text stehen, die
       Zeile lief ueber und das SC-Logo wurde links abgeschnitten (2026-07-31).
       Ab 560px abwaerts bleibt daher nur das SC-Zeichen: eindeutig und kompakt. */
    @media (max-width: 560px) {
      .header-logo-text, .header-logo-sub { display: none !important; }
    }
    /* Nachgerechnet fuer ein 402px-iPhone: verfuegbar sind 378px, die volle
       Kopfzeile braucht aber 460px — 82px zu viel. Deshalb entfallen am Handy
       die beiden Elemente ohne Nutzen auf dem kleinen Schirm:
         • Rollen-Abzeichen („Admin") — die Rolle steht in den Einstellungen
         • DB-Browser — ein Admin-Werkzeug, das man am Handy nicht bedient
       Damit bleiben 324px: alles Wichtige passt mit Reserve, das SC-Zeichen
       wird nicht mehr abgeschnitten. (Die Regel galt vorher erst ab 390px.) */
    @media (max-width: 480px) {
      #role-badge { display: none !important; }
      #db-browser-btn { display: none !important; }
    }
    @media (max-width: 390px) {
      #app-header .header-inner { gap: 4px !important; }
    }

    /* ════ TABLET-HEADER (768px–1199px) ════
       Ohne diese Regeln ist die .header-right zu breit (~790px) und
       sprengt das Tablet-Layout (horizontaler Überlauf, Sidebar
       überdeckt Inhalt). Buttons werden hier auf Icon-Only verschlankt. */
    @media (min-width: 768px) and (max-width: 1199px) {
      #app-header .header-inner { padding: 0 20px !important; gap: 10px !important; }
      .header-logo-sub { display: none !important; }
      .header-logo-text { font-size: 16px !important; letter-spacing: 0.08em !important; }
      .header-right { gap: 6px !important; }

      #role-badge { padding: 4px 9px !important; font-size: 12px !important; }

      #logout-btn {
        padding: 7px !important; border: none !important; background: none !important;
        font-size: 0 !important; line-height: 0 !important; min-width: 0 !important;
      }
      #logout-btn .material-symbols-outlined { font-size: 22px !important; color: #f5eeea !important; }

      #einkauf-log-btn {
        padding: 7px 9px !important; font-size: 0 !important;
        line-height: 0 !important; gap: 0 !important;
      }
      #einkauf-log-btn .material-symbols-outlined { font-size: 22px !important; }

      #server-status-badge {
        padding: 4px !important; gap: 0 !important; border-radius: 50% !important;
        width: 26px !important; height: 26px !important; justify-content: center !important;
      }
      #srv-label { display: none !important; }

      #sync-status { display: none !important; }

      #biz-header-btn {
        padding: 7px 9px !important; gap: 0 !important;
        font-size: 0 !important; line-height: 0 !important;
      }
      #biz-header-btn .material-symbols-outlined { font-size: 20px !important; }
    }

    /* ════ STITCH DESIGN ════ */
    .stitch-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(139,0,0,0.05);
      border: none;
    }
    .bento-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 14px;
      margin-bottom: 24px;
    }
    @media (max-width: 640px) {
      .bento-grid { grid-template-columns: 1fr !important; }
    }
    @media (max-width: 640px) {
      .dashboard-grid { grid-template-columns: 1fr !important; }
    }
    .bento-hero {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(139,0,0,0.05);
      padding: 20px;
      border: 1px solid #f0e8e6;
    }
    .bento-side {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bento-small {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(139,0,0,0.05);
      padding: 16px 18px;
      flex: 1;
      border: 1px solid #f0e8e6;
      cursor: pointer;
      transition: box-shadow .15s;
    }
    .bento-small:hover { box-shadow: 0 4px 20px rgba(139,0,0,0.10); }
    .bento-small-yellow { border-left: 4px solid #f59e0b; }
    .bento-small-red { border-left: 4px solid #dc2626; }
    .shop-header-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #fafafa;
      border-bottom: 1px solid #f0e8e6;
    }
    .shop-icon-circle {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 800; color: #fff;
      flex-shrink: 0;
    }
    .shop-item-badge {
      margin-left: auto;
      background: #fff0ee;
      color: #8B0000;
      border-radius: 20px;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: 700;
    }
    .product-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      border-bottom: 1px solid #faf5f4;
      min-height: 52px;
    }
    .product-row:last-child { border-bottom: none; }
    .product-row-check {
      width: 20px; height: 20px;
      border: 2px solid #e3beb8;
      border-radius: 6px;
      flex-shrink: 0;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
      background: #fff;
    }
    .product-row-check:hover { border-color: #8B0000; background: #fff0ee; }
    .product-row-check.checked { background: #8B0000; border-color: #8B0000; }
    .product-row-check.checked::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
    .product-row-name { flex: 1; min-width: 0; }
    .product-row-name strong { display: block; font-size: 13px; font-weight: 600; color: #261816; }
    .product-row-name span { font-size: 11px; color: #6b4844; }
    .product-row-price { text-align: right; flex-shrink: 0; }
    .product-row-price .qty { font-size: 11px; color: #6b4844; display: block; }
    .product-row-price .total { font-size: 14px; font-weight: 700; color: #261816; }
    /* Platz für die Floating-Bar — deterministisch (body.fb-active) + :has()-Fallback */
    body.fb-active,
    body:has(.floating-bar:not(.bar-hidden)) { padding-bottom: 110px; }
    @media (max-width: 767px) {
      body.fb-active:not(.biz-mode),
      body:has(.floating-bar:not(.bar-hidden)):not(.biz-mode) { padding-bottom: 180px; }
    }
    /* Floating-Bar hat Vorrang vor Footer (verhindert Überlagerung).
       body.fb-active wird per JS gesetzt — funktioniert auch ohne :has()-Support. */
    body.fb-active #app-footer,
    body.fb-active > footer,
    body:has(.floating-bar:not(.bar-hidden)) > footer { display: none !important; }
    .floating-bar {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(20px);
      border-top: 1px solid #f0e8e6;
      box-shadow: 0 -4px 24px rgba(139,0,0,0.10);
      padding: 12px 20px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      transition: transform 0.3s ease;
    }
    .floating-bar.bar-hidden { transform: translateY(100%); }
    @media (max-width: 767px) {
      body:not(.biz-mode) .floating-bar { bottom: 72px; border-radius: 16px 16px 0 0; }
      /* Versteckte Leiste muss auch den 72px-Abstand zur Bottom-Nav überwinden,
         sonst bleibt ein Streifen sichtbar und überdeckt die Navigation */
      body:not(.biz-mode) .floating-bar.bar-hidden { transform: translateY(calc(100% + 80px)); }
    }
    .floating-bar-total strong { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 22px; font-weight: 800; color: #610000; }
    .floating-bar-total span { font-size: 12px; color: #6b4844; display: block; }
    .btn-checkout {
      background: linear-gradient(135deg, #610000, #8B0000);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      transition: opacity .15s, box-shadow .15s;
      box-shadow: 0 4px 14px rgba(97,0,0,0.25);
    }
    .btn-checkout:hover { opacity: 0.92; box-shadow: 0 6px 20px rgba(97,0,0,0.35); }
    .empfohlen-badge {
      position: absolute;
      top: 14px; right: 14px;
      background: #8B0000;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      padding: 4px 10px;
      border-radius: 20px;
    }
    .alt-combo-card {
      border-radius: 14px;
      border: 1px solid #f0e8e6;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 1px 8px rgba(139,0,0,0.04);
    }
    .suche-sticky-header {
      position: sticky;
      top: 82px;
      z-index: 35;
      background: #fff8f6;
      padding: 16px 0 12px;
      margin: -20px 0 16px;
    }
    @media (min-width: 768px) {
      .suche-sticky-header { top: 126px; }
    }
    .filter-chip-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
      margin-bottom: 16px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .filter-chip-row::-webkit-scrollbar { display: none; }
    .filter-chip {
      background: #fff;
      border: 1.5px solid #e3beb8;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #5a403c;
      white-space: nowrap;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
    }
    .filter-chip:hover, .filter-chip.active {
      background: #8B0000;
      border-color: #8B0000;
      color: #fff;
    }
    .deals-scroll-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 20px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .deals-scroll-row::-webkit-scrollbar { display: none; }
    .deal-scroll-card {
      background: #fff;
      border-radius: 14px;
      border: 1px solid #f0e8e6;
      padding: 14px 16px;
      min-width: 160px;
      max-width: 160px;
      box-shadow: 0 1px 8px rgba(139,0,0,0.04);
      flex-shrink: 0;
    }
    .result-card-new {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #eee2df;
      box-shadow: 0 1px 4px rgba(139,0,0,0.04);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .result-card-new:hover { box-shadow: 0 3px 12px rgba(139,0,0,0.10); border-color: #e3beb8; }
    .result-card-top {
      display: flex;
      gap: 10px;
      padding: 11px 12px;
      flex: 1;
    }
    .result-card-img {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: linear-gradient(135deg, #fff0ee, #ffe9e6);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    .result-shop-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 14px;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 5px;
    }

    /* ══ Professionelle Inventur (2026-07-23) ══════════════════════════════ */
    .stk-overlay{position:fixed;inset:0;z-index:9990;background:#fbf6f5;display:flex;flex-direction:column;overflow:hidden;}
    .stk-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#610000;color:#fff;flex-shrink:0;}
    .stk-title{font-size:16px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .stk-save{font-size:12px;color:#ffd7d0;min-width:80px;text-align:right;}
    .stk-bodywrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;max-width:1100px;width:100%;margin:0 auto;box-sizing:border-box;}
    .stk-card{background:#fff;border:1px solid #eee2df;border-radius:14px;padding:20px;margin-bottom:14px;}
    .stk-h2{font-size:17px;font-weight:800;color:#261816;margin-bottom:14px;}
    .stk-label{display:block;font-size:12px;font-weight:700;color:#7a6460;margin:12px 0 4px;}
    .stk-input{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid #e3beb8;border-radius:10px;font-size:16px;font-family:inherit;color:#261816;background:#fff;box-sizing:border-box;}
    .stk-input:focus{outline:none;border-color:#610000;box-shadow:0 0 0 3px rgba(97,0,0,.1);}
    .stk-zahl{min-height:56px;font-size:22px;font-weight:700;text-align:right;font-family:'Plus Jakarta Sans',sans-serif;}
    .stk-zahl-klein{min-height:40px;width:82px;padding:6px 8px;font-size:15px;text-align:right;}
    .stk-check{display:flex;align-items:center;gap:8px;font-size:14px;color:#261816;margin:8px 0;cursor:pointer;}
    .stk-check input{width:20px;height:20px;}
    .stk-btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
    .stk-btn{min-height:48px;padding:12px 18px;border-radius:12px;border:1.5px solid transparent;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
    .stk-btn:disabled{opacity:.4;cursor:default;}
    .stk-btn-primary{background:#610000;color:#fff;flex:1;}
    .stk-btn-primary:hover{background:#7a0000;}
    .stk-btn-ghost{background:#fff;border-color:#e3beb8;color:#5a403c;}
    .stk-btn-warn{background:#fff;border-color:#e0a0a0;color:#93000a;}
    .stk-btn-null{background:#fff3cd;border-color:#ffc107;color:#8a6d00;}
    .stk-btn-gross{width:100%;min-height:54px;font-size:16px;}
    .stk-btn-klein{min-height:36px;padding:5px 9px;font-size:13px;border-radius:8px;}
    .stk-hinweis{background:#fff;border:1px dashed #e3beb8;border-radius:12px;padding:16px;font-size:14px;color:#7a6460;text-align:center;margin:12px 0;}
    .stk-hinweis-blau{background:#e8f0fe;border:1px solid #b3ccf5;color:#174a8b;text-align:left;}
    .stk-sessioncard{background:#fff;border:1px solid #eee2df;border-radius:12px;padding:14px 16px;margin-bottom:10px;}
    .stk-klickbar{cursor:pointer;transition:box-shadow .15s,border-color .15s;}
    .stk-klickbar:hover{box-shadow:0 3px 12px rgba(97,0,0,.1);border-color:#e3beb8;}
    .stk-sess-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:15px;color:#261816;}
    .stk-sess-info{font-size:12px;color:#8d6562;margin-top:2px;}
    .stk-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:14px;white-space:nowrap;}
    .stk-badge-zaehlung{background:#e3f2fd;color:#1565c0;}
    .stk-badge-pruefung{background:#fff3cd;color:#8a6d00;}
    .stk-badge-abgeschlossen{background:#e8f5e9;color:#1b5e20;}
    .stk-badge-abgebrochen{background:#f3ebe9;color:#8d6562;}
    .stk-progress{font-size:14px;font-weight:700;color:#261816;margin-bottom:10px;}
    .stk-filterrow{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
    .stk-chip{min-height:36px;padding:6px 14px;border-radius:20px;border:1.5px solid #e3beb8;background:#fff;font-size:13px;font-weight:600;color:#5a403c;cursor:pointer;font-family:inherit;}
    .stk-chip.aktiv{background:#610000;color:#fff;border-color:#610000;}
    .stk-fokuskarte{background:#fff;border:1px solid #eee2df;border-radius:16px;padding:18px;box-shadow:0 2px 12px rgba(97,0,0,.06);}
    .stk-fokus-nav{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#8d6562;font-weight:700;margin-bottom:10px;}
    .stk-fokus-nav .stk-btn{min-height:40px;padding:6px 16px;}
    .stk-fokus-name{font-size:18px;font-weight:800;color:#261816;line-height:1.3;}
    .stk-fokus-meta{font-size:12px;color:#8d6562;margin:4px 0 6px;}
    .stk-gezaehlt-info{font-size:15px;color:#261816;padding:10px 0;border-top:1px dashed #e3beb8;margin-top:12px;}
    .stk-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;}
    .stk-punkt-ok{background:#2e7d32;}
    .stk-punkt-offen{background:#c9b8b4;}
    .stk-punkt-skip{background:#e0a800;}
    .stk-punkt-konflikt{background:#d32f2f;}
    .stk-tabelle-wrap{overflow-x:auto;border:1px solid #eee2df;border-radius:12px;background:#fff;}
    .stk-tabelle{width:100%;border-collapse:collapse;font-size:13px;}
    .stk-tabelle th{text-align:left;padding:10px 12px;font-size:11px;font-weight:700;color:#7a6460;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #f0e4e1;background:#faf5f4;white-space:nowrap;}
    .stk-tabelle td{padding:9px 12px;border-bottom:1px solid #f6ecea;color:#261816;vertical-align:middle;}
    .stk-tabelle tr:last-child td{border-bottom:none;}
    .stk-zeile-counted{background:#f6fbf6;}
    .stk-zeile-conflict{background:#fdecea;}
    .stk-zeile-gross{background:#fff8e1;}
    .stk-aktionen{white-space:nowrap;display:flex;gap:4px;}
    .stk-mini{font-size:11px;color:#8d6562;margin-top:2px;}
    .stk-rot{color:#93000a;font-weight:700;}
    .stk-summe{text-align:right;font-size:15px;color:#261816;padding:12px 4px;}
    .stk-fussleiste{position:sticky;bottom:0;background:#fbf6f5;padding:12px 0;border-top:1px solid #eee2df;margin-top:16px;}
    @media (max-width:640px){
      .stk-bodywrap{padding:12px;}
      .stk-fussleiste .stk-btn{flex:1 1 100%;}
    }


    /* ── Login Screen ── */
    #login-screen{position:fixed;inset:0;background:linear-gradient(145deg,#1a0404 0%,#2c0808 40%,#1a0606 70%,#0d0202 100%);z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
    #login-screen.hide{display:none;}
    /* Scroll-Fix: margin:auto zentriert die Karte wenn sie passt, erlaubt aber
       Scrollen (ohne oben/unten abzuschneiden) wenn sie hoeher als der Schirm ist. */
    #login-screen > .login-card{margin:auto;}
    #login-screen::before{content:'';position:absolute;top:-40%;left:-30%;width:80%;height:80%;background:radial-gradient(ellipse,rgba(139,0,0,.22) 0%,transparent 65%);pointer-events:none;}
    #login-screen::after{content:'';position:absolute;bottom:-30%;right:-20%;width:70%;height:70%;background:radial-gradient(ellipse,rgba(97,0,0,.18) 0%,transparent 65%);pointer-events:none;}
    .login-card{background:rgba(255,255,255,.97);border-radius:28px;box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);padding:36px 28px;width:100%;max-width:400px;position:relative;z-index:1;box-sizing:border-box;}
    /* Desktop-Overflow vor Login: solange der Login sichtbar ist, kein Seiten-Scroll
       (der Body dahinter kann sonst horizontal/vertikal ueberlaufen -> Scrollbalken). */
    body:has(#login-screen:not(.hide)){overflow:hidden;}
    /* Rollen-Buttons (Schritt 1) */
    .login-role-btn{padding:14px 16px;border-radius:16px;border:2px solid #f0e4e1;background:#fff8f6;font-size:13px;font-weight:700;color:#261816;font-family:inherit;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
    .login-role-btn:active{transform:scale(.97);background:#fff0ee;border-color:#d4a0a0;}
    .login-role-btn:hover{background:#fff0ee;border-color:#d4a0a0;transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,0,0,.1);}
    .login-role-btn .role-icon{font-size:26px;flex-shrink:0;width:36px;text-align:center;}
    .login-role-btn .role-desc{font-size:11px;font-weight:500;color:#8d6562;margin-top:1px;}
    #login-code-input:focus{border-color:#8B0000;box-shadow:0 0 0 3px rgba(139,0,0,.12);}
    #login-code-input::placeholder{color:#c9a0a0;font-weight:500;}
    /* PIN Numpad */
    .pin-key{padding:0;min-height:56px;height:68px;aspect-ratio:1;border-radius:16px;border:1.5px solid #ede0de;background:#fff;font-size:22px;font-weight:600;color:#261816;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .1s,box-shadow .1s;box-shadow:0 2px 6px rgba(0,0,0,.06);}
    .pin-key:active{transform:scale(.94);background:#fee9e6;box-shadow:none;}
    .pin-key:hover{background:#fff8f6;border-color:#d4a0a0;}
    .pin-key-del{background:#fff0ee;border-color:#f5c2c2;color:#8B0000;}
    .pin-key-ok{background:#610000;border-color:#610000;color:#fff;box-shadow:0 4px 14px rgba(139,0,0,.35);}
    .pin-key-ok:hover{background:#750000;}
    /* Kassa Schnell-Buttons */
    .kassa-schnell-btn{padding:8px 16px;border-radius:10px;border:1.5px solid #e3beb8;background:#fff8f6;font-size:14px;font-weight:700;color:#610000;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .1s,transform .1s;}
    .kassa-schnell-btn:active{transform:scale(.94);background:#fff0ee;}
    /* ── Lager-Tab vereinfacht (2026-06-28): grosse Mengen-Buttons + „⋯"-Menüs ── */
    .lag-qty-btn{width:44px;height:44px;min-width:44px;border-radius:10px;font-size:22px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s;}
    .lag-qty-btn:active{transform:scale(.92);}
    .lag-qty-minus{border:1.5px solid #ef9a9a;background:#ffebee;color:#c62828;}
    .lag-qty-plus{border:1.5px solid #a5d6a7;background:#e8f5e9;color:#2e7d32;}
    .lag-cart-btn{width:44px;height:44px;min-width:44px;border-radius:10px;border:1.5px solid #bbdefb;background:#e3f2fd;color:#1565c0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation;}
    .lag-more-btn{width:40px;height:40px;min-width:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;}
    .lag-row-more,.lag-hdr-more{position:relative;display:inline-block;}
    .lag-dd-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);z-index:400;min-width:190px;max-width:calc(100vw - 24px);padding:6px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
    /* Handy: Menü an der linken Kante des "Mehr"-Knopfs verankern und nach rechts
       aufklappen — der Knopf sitzt auf schmalen Screens links, so bleibt das ganze
       Menü (auch der längste Eintrag) sichtbar statt links aus dem Bild zu ragen. */
    @media (max-width:680px){ .lag-dd-menu{left:0;right:auto;min-width:0;width:max-content;max-width:calc(100vw - 24px);} }
    .lag-dd-item .material-symbols-outlined{flex:0 0 auto;}
    .lag-dd-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:11px 12px;border:none;background:none;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;border-radius:9px;min-height:44px;box-sizing:border-box;}
    .lag-dd-item:hover{background:var(--red-soft);}
    .lag-dd-item.lag-dd-danger{color:#c62828;}
    @media (pointer:coarse),(max-width:767px){ .lag-more-btn{width:44px;height:44px;min-width:44px;} }
    /* Sehr schmale Handys: Lager-Aktionsbuttons etwas kompakter, damit die Zeile passt */
    @media (max-width:480px){
      .lag-qty-btn{width:38px;height:38px;min-width:38px;font-size:19px;}
      .lag-cart-btn{width:38px;height:38px;min-width:38px;}
      .lag-more-btn{width:38px;height:38px;min-width:38px;font-size:18px;}
    }
    .kassa-schnell-btn:hover{background:#fff0ee;}

    /* ── Dropdown "Mehr" ── */
    #mehr-dd-menu {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: #fff;
      border: 1.5px solid #e3beb8;
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.13);
      z-index: 200;
      min-width: 200px;
      padding: 6px;
    }
    #mehr-dd-menu.open { display: block; }
    #mehr-dd-menu .dd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 14px;
      border: none;
      background: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #5a403c;
      font-family: inherit;
      text-align: left;
      transition: background .12s, color .12s;
    }
    #mehr-dd-menu .dd-item:hover { background: #fff5f5; color: #8B0000; }
    #mehr-dd-menu .dd-item.tab-active { background: #fff0ee; color: #8B0000; font-weight: 700; }
    #mehr-dd-menu .dd-item .material-symbols-outlined { font-size: 20px; }
    #mehr-dd-btn.tab-active,
    #mehr-dd-btn.dd-child-active {
      color: #8B0000 !important;
      font-weight: 700 !important;
      border-bottom: 3px solid #8B0000 !important;
      background: #fff0ee !important;
      border-radius: 8px 8px 0 0 !important;
    }
    /* badge flex helper */
    .tab-badge {
      display: none;
      background: #8B0000;
      color: #fff;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 10px;
      font-weight: 700;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE NAV — 3 LAYOUTS
       Mobile <768px | Tablet 768-1199px | Desktop ≥1200px
    ═══════════════════════════════════════════════════════ */

    /* Override Tailwind — control all nav visibility here */
    #staff-tab-bar         { display:none !important }
    #tablet-sidebar        { display:none }
    @media (min-width:1200px) {
      #staff-tab-bar       { display:block !important }
      #mobile-bottom-nav   { display:none !important }
      #mehr-drawer         { display:none !important }
      #mehr-drawer-overlay { display:none !important }
    }
    @media (min-width:768px) and (max-width:1199px) {
      #tablet-sidebar      { display:flex }
      #mobile-bottom-nav   { display:none !important }
      #mehr-drawer         { display:none !important }
      #mehr-drawer-overlay { display:none !important }
      /* Auf Touch-Tablets kein Hover → Sidebar immer aufgeklappt */
      #tablet-sidebar { width:190px !important; }
      #tablet-sidebar .ts-label { opacity:1 !important; transition:none !important; }
      #tablet-sidebar:hover { width:190px !important; }
      #app-main, #app-footer, #stats-dashboard {
        padding-left:206px !important;
        margin-left:0 !important; margin-right:0 !important; max-width:none !important;
      }
    }

    /* ── Desktop grouped nav ── */
    .nav-group { position:relative; align-self:stretch; display:flex; align-items:flex-end }
    .nav-grp-dd {
      display:none; position:absolute; top:100%; left:0;
      background:#fff; border:1.5px solid #e3beb8; border-radius:14px;
      box-shadow:0 8px 32px rgba(0,0,0,.13); z-index:200;
      min-width:190px; padding:6px;
    }
    .nav-group:hover .nav-grp-dd { display:block }
    .nav-group:hover > .tab-btn  { color:#8B0000; background:#fff5f5; border-radius:8px 8px 0 0 }
    .nav-group.grp-active > .tab-btn { color:#8B0000; font-weight:700; border-bottom:3px solid #C9A84C; background:#fff0ee; border-radius:8px 8px 0 0 }
    .nav-grp-dd .dd-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border:none; background:none; border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; color:#5a403c; font-family:inherit; text-align:left; transition:background .12s,color .12s; white-space:nowrap }
    .nav-grp-dd .dd-item:hover,.nav-grp-dd .dd-item.tab-active { background:#fff0ee; color:#8B0000 }
    .nav-grp-dd-sep { height:1px; background:#f0e4e1; margin:4px 6px }

    /* ── Tablet sidebar ── */
    #tablet-sidebar {
      position:fixed; left:0; top:82px; bottom:0; z-index:45;
      width:64px; flex-direction:column; overflow:hidden; overflow-y:auto;
      background:#fff; border-right:1px solid #e8e8ed;
      box-shadow:2px 0 12px rgba(0,0,0,.06);
      transition:width .25s cubic-bezier(.4,0,.2,1);
    }
    #tablet-sidebar:hover,#tablet-sidebar.ts-expanded { width:220px }
    .ts-logo { display:flex; align-items:center; justify-content:center; padding:14px 0 10px; border-bottom:1px solid #f0e4e1; font-size:22px; flex-shrink:0; min-height:52px }
    .ts-direct-btn,.ts-grp-btn {
      display:flex; align-items:center; gap:12px; width:100%;
      padding:11px 20px; border:none; background:none; cursor:pointer;
      font-size:13px; font-weight:600; color:#6b7280; font-family:inherit;
      text-align:left; white-space:nowrap; min-height:46px; flex-shrink:0;
      border-left:3px solid transparent; transition:all .15s;
    }
    .ts-direct-btn:hover,.ts-grp-btn:hover { color:#8B0000; background:#fff5f5 }
    .ts-direct-btn.tab-active { color:#8B0000; background:#fff0ee; border-color:#8B0000; font-weight:700 }
    .ts-grp-btn.grp-active    { color:#8B0000; background:#fff0ee; border-color:#8B0000; font-weight:700 }
    .ts-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center }
    .ts-label { opacity:0; transition:opacity .15s .1s; white-space:nowrap; font-size:13px }
    #tablet-sidebar:hover .ts-label,#tablet-sidebar.ts-expanded .ts-label { opacity:1 }
    .ts-sub { overflow:hidden; max-height:0; transition:max-height .22s ease }
    .ts-group.ts-open .ts-sub { max-height:500px }
    .ts-sub-item {
      display:flex; align-items:center; gap:9px;
      padding:8px 12px 8px 30px; border:none; background:none;
      cursor:pointer; font-size:12px; font-weight:600; color:#5a6472;
      font-family:inherit; text-align:left; width:100%; white-space:nowrap;
      transition:all .15s; flex-shrink:0;
    }
    .ts-sub-item:hover { color:#8B0000; background:#fff5f5 }
    .ts-sub-item.tab-active { color:#8B0000; background:#fff0ee; font-weight:700 }
    .ts-sub-icon { font-size:14px; flex-shrink:0; width:18px; text-align:center }
    .ts-biz-btn {
      margin-top:auto; display:flex; align-items:center; gap:12px;
      padding:13px 20px; border:none; background:#1a1a2e; color:#D4AF37;
      cursor:pointer; font-size:13px; font-weight:700; font-family:inherit;
      text-align:left; white-space:nowrap; flex-shrink:0; width:100%;
    }

    /* Mobile-Bottom-Nav wird oben (~Zeile 1217) definiert — dunkelroter
       Hintergrund mit weißem Text. Frühere weiße Dublette hier entfernt,
       da sie den Text unsichtbar machte (weiß auf weiß). */

    /* ── Bottom Sheet ── */
    #mehr-drawer {
      position:fixed; bottom:76px; left:0; right:0;
      background:#fff; border-radius:24px 24px 0 0;
      box-shadow:0 -8px 40px rgba(0,0,0,.18); z-index:49;
      padding:6px 16px 32px; max-height:78vh; overflow-y:auto;
      transform:translateY(110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    }
    #mehr-drawer.drawer-open { transform:translateY(0) }
    .bs-section { margin-bottom:14px }
    .bs-title { font-size:10px; font-weight:800; color:#5a6472; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; padding:0 2px }
    .bs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
    .bs-btn {
      display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:10px 4px; border:1.5px solid #e8e8ed; border-radius:12px;
      background:#fff; cursor:pointer; font-size:10px; font-weight:600;
      color:#6b7280; font-family:inherit; transition:all .15s; position:relative;
    }
    .bs-btn:hover,.bs-btn.mob-active { background:#fff0ee; border-color:#e3beb8; color:#8B0000 }
    .bs-btn .bs-icon { font-size:18px; line-height:1 }
    .bs-dot { position:absolute; top:5px; right:5px; width:8px; height:8px; background:#e53935; border-radius:50%; display:none }
    #lag-einheit, #lag-kat {
      appearance: none !important;
      -webkit-appearance: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235a403c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px;
      padding-right: 28px !important;
      width: 100% !important;
      box-sizing: border-box;
    }

    /* ════ PAGE HEADER PATTERN ════ */
    .page-hdr {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 22px;
      border-radius: 16px;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #fff0ee, #ffe4e0);
      border: 1.5px solid #f0d5d0;
    }
    .page-hdr-icon {
      width: 44px; height: 44px; border-radius: var(--r-md);
      background: #8B0000; color: #fff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .page-hdr-icon .material-symbols-outlined { font-size: 22px; }
    .page-hdr-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px; font-weight: 800; color: #3d1c11; line-height: 1.2;
    }
    .page-hdr-sub { font-size: 12px; color: #8c6b5e; margin-top: 2px; font-weight: 500; }
    .page-hdr-right { margin-left: auto; flex-shrink: 0; }
    html[data-theme="dark-red"] .page-hdr {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] .page-hdr-title { color: var(--text) !important; }
    html[data-theme="dark-red"] .page-hdr-sub { color: var(--text-3) !important; }
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#fff0ee"] {
      background: var(--surface) !important; border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#ffdad6"] {
      background: rgba(186,26,26,0.2) !important; border-color: rgba(186,26,26,0.35) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#f0fdf4"] {
      background: rgba(46,125,50,0.15) !important; border-color: rgba(46,125,50,0.3) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#e8f4fd"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#fdf5e8"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#fde8e8"],
    html[data-theme="dark-red"] [id^="panel-"] div[style*="background:#e8fdf0"] {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#261816"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#3d1c11"] { color: var(--text) !important; }
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#5a403c"],
    html[data-theme="dark-red"] [id^="panel-"] [style*="color:#8c6b5e"] { color: var(--text-3) !important; }

    /* ════ ALERT BOX ════ */
    .alert-box {
      border-radius: var(--r-md); padding: 13px 16px;
      display: flex; align-items: flex-start; gap: 10px;
      margin-bottom: 14px; border: 1.5px solid;
    }
    .alert-box .material-symbols-outlined { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
    .alert-box-title { font-size: 13px; font-weight: 700; }
    .alert-box-sub { font-size: 12px; margin-top: 2px; opacity: .85; }
    .alert-box-red   { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
    .alert-box-amber { background: #fff8e1; border-color: #ffe082; color: #e65100; }
    .alert-box-green { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
    .alert-box-blue  { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }

    /* ════ GEWINN-DASHBOARD ════ */
    .gewinn-hero {
      background: linear-gradient(135deg, #0d3b0d, #1b5e20);
      border-radius: 20px; padding: 28px; color: #fff;
      margin-bottom: 20px; position: relative; overflow: hidden;
    }
    .gewinn-hero.negative {
      background: linear-gradient(135deg, #4a0000, #8B0000);
    }
    .gewinn-big-num {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 48px; font-weight: 800; line-height: 1.1;
    }
    @media (max-width: 480px) {
      .gewinn-big-num { font-size: 36px; }
      .gewinn-hero { padding: 20px; }
    }
    .gewinn-compare-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    }
    .gewinn-compare-up   { background: rgba(105,240,174,0.2); color: #a5f7a0; }
    .gewinn-compare-down { background: rgba(255,154,154,0.2); color: #ff9a9a; }
    .gewinn-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px; margin-bottom: 20px;
    }
    .gewinn-bar-chart {
      display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 0 4px;
    }
    .gewinn-bar-group {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .gewinn-bar {
      width: 100%; border-radius: 6px 6px 0 0; min-height: 4px;
      transition: height 0.4s ease;
    }
    .gewinn-bar-green { background: linear-gradient(180deg, #4caf50, #2e7d32); }
    .gewinn-bar-red   { background: linear-gradient(180deg, #ef5350, #c62828); }
    .gewinn-bar-label { font-size: 10px; color: #5a403c; font-weight: 600; }
    .gewinn-breakeven-bar {
      height: 20px; background: #e3beb8; border-radius: 10px; overflow: hidden;
    }
    .gewinn-breakeven-fill {
      height: 100%; border-radius: 10px; transition: width 0.5s ease;
    }
    .gewinn-killer-row {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px; border-bottom: 1px solid #f0e4e1;
    }
    .gewinn-killer-row:last-child { border-bottom: none; }
    .gewinn-trend-line {
      stroke: #FFD700; stroke-width: 2.5; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── Toast Notifications ── */
    @keyframes toastIn  { from { opacity:0; transform:translateX(-50%) translateY(16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
    @keyframes toastOut { from { opacity:1; } to { opacity:0; } }
    ._toast-popup {
      position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
      padding:10px 20px; border-radius:12px; font-size:13px; font-weight:600;
      z-index:99999; pointer-events:none; display:flex; align-items:center;
      /* Kein nowrap: lange Fehlermeldungen wurden sonst mitten im Wort
         abgeschnitten („…with status c") — genau die Info, die man braucht. */
      gap:8px; white-space:normal; overflow-wrap:anywhere; max-width:90vw; color:#fff;
      /* Notbremse: eine sehr lange Meldung darf den Bildschirm nicht zudecken. */
      max-height:38vh; overflow:hidden; text-align:left;
      animation: toastIn .22s ease forwards;
      box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    }
    ._toast-popup.toast-success { background:#1b5e20; border-left:4px solid #4caf50; }
    ._toast-popup.toast-error   { background:#93000a; border-left:4px solid #ef5350; }
    ._toast-popup.toast-warning { background:#e65100; border-left:4px solid #ffcc02; }
    ._toast-popup.toast-info    { background:#1a237e; border-left:4px solid #64b5f6; }
    ._toast-popup.toast-fade-out { animation: toastOut .2s ease forwards; }
    /* Am Handy (≤767px) ist unten die 62px-Menuleiste (#mobile-bottom-nav) sichtbar.
       Die Meldung saesse sonst DARAUF (verdeckt Menue + Inhalt, siehe 2026-07-31).
       Darum hier ueber die Leiste heben — plus iPhone-Home-Indikator (safe-area). */
    @media (max-width: 767px) {
      ._toast-popup { bottom: calc(74px + env(safe-area-inset-bottom, 8px)); }
    }

    /* Dienstplan am Handy: Namensspalte bleibt beim seitlichen Scrollen stehen,
       damit man beim Tippen auf Sa/So-Zellen weiss, wessen Zeile es ist (2026-07-31).
       Reines CSS (position:sticky) — keine Logik-Aenderung. Hintergruende sind an den
       Zellen schon gesetzt (th: var(--bg), td: #fafafa), Voraussetzung fuer sticky. */
    @media (max-width: 767px) {
      .dp-grid-scroll table th:first-child,
      .dp-grid-scroll table td:first-child {
        position: sticky; left: 0; z-index: 3;
        box-shadow: 2px 0 5px rgba(0,0,0,0.06);
      }
    }

    /* ── Feld-Validierung ── */
    .field-error {
      border-color:#ef4444 !important;
      box-shadow:0 0 0 3px rgba(239,68,68,0.18) !important;
    }
    .field-error-msg {
      color:#ef4444; font-size:11px; font-weight:600;
      margin-top:3px; display:block;
    }

    /* ── Bestätigungs-Dialog ── */
    #_confirm-overlay {
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45);
      z-index:999999; align-items:center; justify-content:center;
    }
    #_confirm-overlay.active { display:flex; }
    #_confirm-box {
      background:#fff; border-radius:18px; padding:28px 28px 20px;
      max-width:340px; width:90%; box-shadow:0 8px 40px rgba(0,0,0,0.22);
      text-align:center; animation: toastIn .2s ease;
    }
    #_confirm-icon { font-size:36px; margin-bottom:10px; }
    #_confirm-msg  { font-size:15px; font-weight:600; color:#1a1a1a; margin-bottom:20px; line-height:1.45; }
    #_confirm-btns { display:flex; gap:10px; justify-content:center; }
    #_confirm-btns button {
      flex:1; padding:11px 0; border-radius:10px; border:none;
      font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
    }
    #_confirm-cancel { background:#f1f5f9; color:#64748b; }
    #_confirm-ok     { background:#8B0000; color:#fff; }
    #_confirm-cancel:hover { background:#e2e8f0; }
    #_confirm-ok:hover     { background:#6b0000; }

    /* ════ PANEL RESPONSIVE LAYOUTS ════ */
    /* Universelles 2-Spalten-Grid: Liste links, Formular rechts */
    .psc-2col {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 20px;
      align-items: start;
    }
    .psc-sticky { position: sticky; top: 20px; }

    /* Tablet (≤1100px oder Zoom ≥130%): Formular unter Liste */
    @media (max-width: 1100px) {
      .psc-2col {
        grid-template-columns: 1fr !important;
      }
      .psc-sticky {
        position: static !important;
        top: auto !important;
      }
    }

    /* Filter-Reihe — auf kleinen Screens umbrechen */
    .psc-filter-row {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      align-items: center;
    }
    @media (max-width: 700px) {
      .psc-filter-row select  { flex: 1 1 45%; min-width: 130px; }
      .psc-grp-btns           { margin-left: 0 !important; width: 100%; display: flex; justify-content: flex-start; }
    }

    /* Action-Buttons im Header — kompakter auf kleinen Screens */
    .psc-hdr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    @media (max-width: 700px) {
      .psc-hdr-actions button .btn-label { display: none; }
      .psc-hdr-actions button { padding: 8px 10px !important; }
    }

    /* Einkaufsliste Quick-Add: Felder umbrechen */
    .psc-el-form {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .psc-el-form input, .psc-el-form select {
      min-width: 80px;
      box-sizing: border-box;
    }
    @media (max-width: 640px) {
      .psc-el-form input[id="el-name"] { flex: 1 1 100% !important; }
      .psc-el-form button              { flex: 1 1 100% !important; justify-content: center; }
    }

    /* ════ RESPONSIVE LAYOUT — PC / Tablet / Mobile ════ */

    /* Desktop groß (1600px+) */
    @media (min-width: 1600px) {
      #app-main { padding-left: 80px !important; padding-right: 80px !important; }
      #app-header .header-inner { max-width: 100% !important; padding-left: 80px !important; padding-right: 80px !important; }
      #staff-tab-bar .tabs-inner { max-width: 100% !important; padding-left: 80px !important; padding-right: 80px !important; }
    }
    /* Desktop normal (1200px–1600px) */
    @media (min-width: 1200px) and (max-width: 1599px) {
      #app-main { padding-left: 48px !important; padding-right: 48px !important; }
      #app-header .header-inner { max-width: 100% !important; padding-left: 48px !important; padding-right: 48px !important; }
      #staff-tab-bar .tabs-inner { max-width: 100% !important; padding-left: 48px !important; padding-right: 48px !important; }
    }
    /* Tablet (768px–1200px) */
    @media (max-width: 1199px) {
      #app-main { padding-left: 24px !important; padding-right: 24px !important; }
      #app-header .header-inner { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; }
    }
    /* Mobile (<768px) */
    @media (max-width: 767px) {
      #app-main { padding-left: 12px !important; padding-right: 12px !important; }
    }

    /* ════ TABLET OPTIMIERUNG (768px–1100px) ════ */
    @media (min-width: 768px) and (max-width: 1100px) {
      #app-main { padding: 16px 20px 30px !important; }
      .psc-2col { gap: 0; }
      .psc-2col > div:last-child {
        margin-top: 20px;
        border-top: 1.5px solid #e3beb8;
        padding-top: 20px;
      }
    }

    /* ════ TABLET: Sidebar-Freiraum (MUSS nach allen padding-Overrides
       stehen, sonst läuft der Inhalt unter die fixe 190px-Sidebar) ════ */
    @media (min-width: 768px) and (max-width: 1199px) {
      #app-main, #app-footer, #stats-dashboard {
        padding-left: 206px !important;
        margin-left: 0 !important; margin-right: 0 !important;
        max-width: none !important;
      }
      #app-header .header-inner { padding-left: 24px !important; }
    }

    /* ════ SCHRITT 6b (2026-06-12): GERÄTE-ANPASSUNG ════ */

    /* ── Touch-Ziele min. 44px (Apple HIG) — auf Touch-Geräten und Mobile.
       Breite bewusst nicht erzwungen (würde enge Flex-Zeilen sprengen). ── */
    @media (pointer: coarse), (max-width: 767px) {
      /* !important nötig: viele Buttons tragen inline min-height:36px */
      button, [role="button"], .ws-btn, .tab-btn, .mob-nav-btn, .dd-item,
      .ts-sub-item, .drawer-item,
      select,
      input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
        min-height: 44px !important;
      }
      [id^="panel-"] input[type=checkbox],
      [id^="panel-"] input[type=radio] { min-width: 20px; min-height: 20px; }
    }

    /* ── Seitenkopf-Buttonzeile darf umbrechen (Lager ragte am Tablet 125px raus) ── */
    @media (max-width: 1199px) {
      .page-hdr { flex-wrap: wrap; }
      .page-hdr-right {
        flex-shrink: 1;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }

    /* ── Tabellen am Tablet scrollbar (gleiches Muster wie Mobile ≤767px) ── */
    @media (min-width: 768px) and (max-width: 1199px) {
      [id^="panel-"] table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
      }
    }

    /* ── Mobile-Feinschliff nach iPhone-Screenshots (2026-06-12) ── */

    /* Lager: Artikelname war auf ~45px gequetscht ("F..") — Zeile darf umbrechen,
       Name bekommt min. 200px, Button-Gruppe rückt rechts in die zweite Zeile */
    @media (max-width: 600px) {
      #panel-lager [style*="border-bottom:1px solid #f5efed"] {
        flex-wrap: wrap;
        row-gap: 8px;
      }
      #panel-lager [style*="border-bottom:1px solid #f5efed"] > div[style*="flex:1;min-width:0"] {
        flex: 1 1 200px !important;
      }
      #panel-lager [style*="border-bottom:1px solid #f5efed"] > div:last-child {
        margin-left: auto;
      }
    }

    /* Schichtcheck: zwei Checklisten-Spalten am Handy untereinander statt nebeneinander */
    @media (max-width: 767px) {
      #panel-schichtcheck div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }

    /* Dienstplan: "KW 24 — …" brach senkrecht zwischen den Wochen-Buttons um —
       Label bekommt die ganze erste Zeile, Buttons rücken darunter */
    @media (max-width: 600px) {
      #panel-dienstplan span[style*="flex:1;text-align:center"] {
        flex: 1 1 100% !important;
        order: -1;
        white-space: nowrap;
      }
    }

    /* Header: abgeschnittener Logo-Text ("P…") bringt nichts — auf Phones ausblenden,
       das SC-Monogramm + Rollen-Badge reichen */
    @media (max-width: 560px) {
      .header-logo-text { display: none !important; }
    }

    /* ============================================================
       BUSINESS-TAB LESBARKEIT (2026-06-26)
       Der Business-/Finanz-Tab nutzt viele hartkodierte Hell-Theme-Farben
       (Text #5a403c/#261816/#8d6562 auf hellen Boxen #fff*). In den dunklen
       Themes wurde das teils unleserlich. Hier gezielt fuer #panel-business
       gemappt: Text -> hell,
    html[data-theme="dark-red"] #panel-business [style*="color:#5a403c"] { color: var(--text-2) !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#261816"] { color: var(--text) !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#8d6562"] { color: var(--text-3) !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#8B0000"],
    html[data-theme="dark-red"] #panel-business [style*="color:#610000"]{ color: #ff8a80 !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#c62828"],
    html[data-theme="dark-red"] #panel-business [style*="color:#ba1a1a"] { color: #ef9a9a !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#e65100"]{ color: #fbbf24 !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#1565c0"]{ color: #93c5fd !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#2e7d32"]{ color: #86efac !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#7b1fa2"]{ color: #ce93d8 !important; }
    html[data-theme="dark-red"] #panel-business [style*="color:#c8860a"],
    html[data-theme="dark-red"] #panel-business [style*="color:#c9a227"]{ color: #fcd34d !important; }
    html[data-theme="dark-red"] #panel-business [style*="background:#fff"] { background: var(--surface) !important; }
    html[data-theme="dark-red"] #panel-business [style*="background:#ffeaea"],
    html[data-theme="dark-red"] #panel-business [style*="background:#ffdad6"] { background: rgba(198,40,40,0.15) !important; }
    html[data-theme="dark-red"] #panel-business [style*="background:#e8f5e9"]{ background: rgba(46,125,50,0.15) !important; }
    html[data-theme="dark-red"] #panel-business [style*="background:#e3beb8"] { background: var(--surface) !important; }

    /* Lager & Artikel: klare, touch-freundliche Bedienung (2026-07-24) */
    .inventory-summary {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .inventory-toolbar,
    .product-toolbar {
      display:flex;
      gap:8px;
      margin-bottom:18px;
      flex-wrap:wrap;
      align-items:center;
    }
    .inventory-result-count,
    .product-result-count {
      color:#6b4844;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
    }
    .inventory-uncounted,
    .product-status {
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      font-size:10px;
      font-weight:800;
      padding:3px 7px;
      white-space:nowrap;
    }
    .inventory-uncounted,
    .product-status-open {
      color:#4b5563;
      background:#e5e7eb;
    }
    .inventory-book-button,
    .product-book-button {
      min-height:44px;
      border:1.5px solid #b88b84;
      border-radius:10px;
      background:#fff;
      color:#610000;
      font-family:inherit;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      padding:8px 13px;
    }
    .inventory-book-button { width:100%; }
    .product-book-button { width:100%; margin-top:12px; }
    .inventory-book-button:hover,
    .product-book-button:hover { background:#fff0ee; }
    .product-search {
      flex:1;
      min-width:240px;
      position:relative;
    }
    .product-search .material-symbols-outlined {
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      color:#8d6562;
      pointer-events:none;
      font-size:19px;
    }
    .product-search input {
      width:100%;
      min-height:48px;
      box-sizing:border-box;
      border:1.5px solid #e3beb8;
      border-radius:12px;
      background:#fff;
      color:#261816;
      padding:11px 14px 11px 40px;
      font:inherit;
    }
    .product-reset {
      min-height:44px;
      border:1.5px solid #e3beb8;
      border-radius:10px;
      background:#fff0ee;
      color:#610000;
      font:700 12px inherit;
      cursor:pointer;
      padding:8px 12px;
    }
    .mobile-action-sheet-overlay {
      position:fixed;
      inset:0;
      z-index:10020;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      padding:0;
      background:rgba(0,0,0,.55);
    }
    .mobile-action-sheet {
      width:100%;
      max-width:520px;
      max-height:min(90vh,720px);
      overflow:auto;
      box-sizing:border-box;
      border-radius:22px 22px 0 0;
      background:#fff;
      color:#261816;
      box-shadow:0 -8px 40px rgba(0,0,0,.22);
      padding:14px 20px max(24px,env(safe-area-inset-bottom));
    }
    .sheet-handle {
      width:42px;
      height:5px;
      margin:0 auto 16px;
      border-radius:4px;
      background:#d1d5db;
    }
    .mobile-action-sheet h3 { margin:0 0 5px; color:#610000; font-size:20px; }
    .mobile-action-sheet p { margin:0 0 18px; color:#6b4844; }
    .mobile-action-sheet label {
      display:block;
      margin:13px 0 5px;
      color:#5a403c;
      font-size:12px;
      font-weight:800;
    }
    .mobile-action-sheet input,
    .mobile-action-sheet select {
      width:100%;
      min-height:52px;
      box-sizing:border-box;
      border:1.5px solid #d4aaa4;
      border-radius:12px;
      background:#fff;
      color:#261816;
      padding:12px 14px;
      font:700 17px inherit;
    }
    .sheet-preview {
      margin-top:14px;
      border-radius:10px;
      background:#edf7ed;
      color:#256029;
      padding:11px 13px;
      font-size:14px;
      font-weight:800;
    }
    .sheet-preview-error { background:#ffebee; color:#b91c1c; }
    .sheet-actions {
      position:sticky;
      bottom:-24px;
      display:flex;
      gap:10px;
      margin-top:18px;
      padding:12px 0 0;
      background:#fff;
    }
    .sheet-actions button {
      min-height:50px;
      border:0;
      border-radius:12px;
      font:800 14px inherit;
      cursor:pointer;
      padding:12px 16px;
    }
    .sheet-secondary { flex:1; background:#f3ebe9; color:#5a403c; }
    .sheet-primary { flex:2; background:#610000; color:#fff; }
    @media (max-width:767px) {
      .inventory-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .inventory-toolbar > div:first-of-type,
      .product-search { flex:1 1 100%; min-width:0; }
      .inventory-result-count,
      .product-result-count { margin-right:auto; }
      .product-toolbar { margin-bottom:12px; }
      .mobile-action-sheet { max-width:none; }
    }
    html[data-theme="dark-red"] .mobile-action-sheet,
    html[data-theme="dark-red"] .sheet-actions{
      background:var(--surface);
      color:var(--text);
    }