/* ═══════════════════════════════════════════════════════
       BEKI ASSIST – Design System (aus beki-grade.html)
       Farben: #1e3d73 (Primär-Dunkelblau), #3a8c68 (Grün/Akzent)
                #f0f4f8 (Hintergrund), #dde3ec (Border)
                #6b7a8d (Subtext), #dce6f5 (Aktiv-Hellblau)
                #1a2740 / #1e293b (Dunkeltext)
    ═══════════════════════════════════════════════════════ */

    *{box-sizing:border-box;margin:0;padding:0}

    body {
        font-family: 'Segoe UI', system-ui, sans-serif;
        background: #f0f4f8;
        color: #1a2740;
        height: 100vh;
        overflow: hidden;
        display: flex;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f0f4f8; }
    ::-webkit-scrollbar-thumb { background: #c8d0dc; border-radius: 3px; }

    /* ── Animations ── */
    @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    @keyframes spin { to { transform:rotate(360deg); } }
    @keyframes pulse-green { 0%,100% { box-shadow:0 0 0 0 rgba(58,140,104,0.7); } 70% { box-shadow:0 0 0 10px rgba(58,140,104,0); } }
    @keyframes ampelPulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow:0 0 0 12px rgba(239,68,68,0); } }
    @keyframes tourFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    @keyframes tourPulse { 0%,100%{box-shadow:0 0 0 9999px rgba(15,23,42,0.75)} 50%{box-shadow:0 0 0 9999px rgba(15,23,42,0.7),0 0 0 4px rgba(56,189,248,0.5)} }

    .fade-in { animation: fadeIn 0.3s ease forwards; }
    .animate-fade-in { animation: fadeIn 0.3s ease forwards; }
    .spin { animation: spin 1s linear infinite; }
    .pulse-green { animation: pulse-green 2s infinite; }
    .ampel-pulse { animation: ampelPulse 2s infinite; }

    /* ── Loader ── */
    .loader {
        border: 3px solid #dde3ec;
        border-radius: 50%;
        border-top: 3px solid #3a8c68;
        width: 20px; height: 20px;
        animation: spin 1s linear infinite;
    }

    /* ── Hidden / Visibility ── */
    .hidden, .hidden-section { display: none !important; }

    /* ── Layout ── */
    .h-screen { height: 100vh; }
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-1 { flex: 1; }
    .flex-shrink-0 { flex-shrink: 0; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .items-end { align-items: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-end { justify-content: flex-end; }
    .justify-start { justify-content: flex-start; }
    .overflow-hidden { overflow: hidden; }
    .overflow-y-auto { overflow-y: auto; }
    .overflow-x-auto { overflow-x: auto; }
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .inset-0 { inset: 0; }
    .inset-y-0 { top: 0; bottom: 0; }
    .left-0 { left: 0; }
    .right-0 { right: 0; }
    .top-0 { top: 0; }
    .bottom-0 { bottom: 0; }
    .top-3 { top: 0.75rem; }
    .top-4 { top: 1rem; }
    .top-12 { top: 3rem; }
    .top-20 { top: 5rem; }
    .right-4 { right: 1rem; }
    .right-6 { right: 1.5rem; }
    .left-3 { left: 0.75rem; }
    .bottom-6 { bottom: 1.5rem; }
    .z-10 { z-index: 10; }
    .z-30 { z-index: 30; }
    .z-40 { z-index: 40; }
    .z-50 { z-index: 50; }
    .sticky { position: sticky; }
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    .min-h-0 { min-height: 0; }
    .min-w-0 { min-width: 0; }
    .max-w-md { max-width: 28rem; }
    .max-w-sm { max-width: 24rem; }
    .max-w-lg { max-width: 32rem; }
    .max-w-xl { max-width: 36rem; }
    .max-w-2xl { max-width: 42rem; }
    .max-w-5xl { max-width: 64rem; }
    .max-h-32 { max-height: 8rem; }
    .max-h-48 { max-height: 12rem; }
    .max-h-72 { max-height: 18rem; }
    .max-h-80 { max-height: 20rem; }
    .w-1\/3 { width: 33.333%; }
    .w-2\/3 { width: 66.667%; }

    /* ── Grid ── */
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
    .col-span-2 { grid-column: span 2; }

    /* ── Spacing ── */
    .p-1 { padding: 0.25rem; }
    .p-2 { padding: 0.5rem; }
    .p-2\.5 { padding: 0.625rem; }
    .p-3 { padding: 0.75rem; }
    .p-4 { padding: 1rem; }
    .p-5 { padding: 1.25rem; }
    .p-6 { padding: 1.5rem; }
    .p-8 { padding: 2rem; }
    .p-10 { padding: 2.5rem; }
    .p-12 { padding: 3rem; }
    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
    .px-8 { padding-left: 2rem; padding-right: 2rem; }
    .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .pl-3 { padding-left: 0.75rem; }
    .pl-4 { padding-left: 1rem; }
    .pl-8 { padding-left: 2rem; }
    .pl-10 { padding-left: 2.5rem; }
    .pr-2 { padding-right: 0.5rem; }
    .pr-4 { padding-right: 1rem; }
    .pt-2 { padding-top: 0.5rem; }
    .pt-3 { padding-top: 0.75rem; }
    .pt-4 { padding-top: 1rem; }
    .pb-2 { padding-bottom: 0.5rem; }
    .pb-4 { padding-bottom: 1rem; }
    .mt-1 { margin-top: 0.25rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; }
    .mt-4 { margin-top: 1rem; }
    .mt-5 { margin-top: 1.25rem; }
    .mt-6 { margin-top: 1.5rem; }
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-5 { margin-bottom: 1.25rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mr-1 { margin-right: 0.25rem; }
    .mr-2 { margin-right: 0.5rem; }
    .mr-4 { margin-right: 1rem; }
    .ml-1 { margin-left: 0.25rem; }
    .ml-2 { margin-left: 0.5rem; }
    .ml-3 { margin-left: 0.75rem; }
    .ml-4 { margin-left: 1rem; }
    .ml-auto { margin-left: auto; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .my-1\.5 { margin-top: 0.375rem; margin-bottom: 0.375rem; }
    .gap-1 { gap: 0.25rem; }
    .gap-1\.5 { gap: 0.375rem; }
    .gap-2 { gap: 0.5rem; }
    .gap-2\.5 { gap: 0.625rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }
    .gap-5 { gap: 1.25rem; }
    .gap-6 { gap: 1.5rem; }
    .gap-8 { gap: 2rem; }
    .space-y-1 > * + * { margin-top: 0.25rem; }
    .space-y-2 > * + * { margin-top: 0.5rem; }
    .space-y-3 > * + * { margin-top: 0.75rem; }
    .space-y-4 > * + * { margin-top: 1rem; }
    .space-y-5 > * + * { margin-top: 1.25rem; }
    .space-y-6 > * + * { margin-top: 1.5rem; }
    .space-x-2 > * + * { margin-left: 0.5rem; }
    .space-y-0\.5 > * + * { margin-top: 0.125rem; }

    /* ── Typography ── */
    .text-xs { font-size: 0.75rem; }
    .text-sm { font-size: 0.875rem; }
    .text-base { font-size: 1rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; }
    .font-normal { font-weight: 400; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .font-black { font-weight: 900; }
    .font-mono { font-family: 'Courier New', monospace; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .uppercase { text-transform: uppercase; }
    .tracking-tight { letter-spacing: -0.025em; }
    .tracking-wide { letter-spacing: 0.025em; }
    .tracking-wider { letter-spacing: 0.05em; }
    .leading-relaxed { line-height: 1.625; }
    .leading-tight { line-height: 1.25; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .whitespace-nowrap { white-space: nowrap; }
    .whitespace-pre-wrap { white-space: pre-wrap; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .select-none { user-select: none; }
    .italic { font-style: italic; }

    /* ── Text Colors ── (adapted to beki-grade palette) */
    .text-white { color: #fff; }
    .text-slate-300 { color: #a8b4c4; }
    .text-slate-400 { color: #6b7a8d; }
    .text-slate-500 { color: #6b7a8d; }
    .text-slate-600 { color: #4b5a6e; }
    .text-slate-700 { color: #334155; }
    .text-slate-800 { color: #1a2740; }
    .text-slate-900 { color: #0f172a; }
    .text-red-400 { color: #f87171; }
    .text-red-500 { color: #ef4444; }
    .text-red-600 { color: #dc2626; }
    .text-red-700 { color: #b91c1c; }
    .text-red-800 { color: #991b1b; }
    .text-red-900 { color: #7f1d1d; }
    .text-amber-500 { color: #f59e0b; }
    .text-amber-600 { color: #d97706; }
    .text-amber-700 { color: #b45309; }
    .text-amber-800 { color: #92400e; }
    .text-orange-600 { color: #ea580c; }
    .text-orange-700 { color: #c2410c; }
    .text-orange-800 { color: #9a3412; }
    .text-yellow-400 { color: #facc15; }
    .text-green-600 { color: #16a34a; }
    .text-green-700 { color: #15803d; }
    .text-emerald-400 { color: #34d399; }
    .text-emerald-500 { color: #3a8c68; }
    .text-emerald-600 { color: #3a8c68; }
    .text-emerald-700 { color: #2d7055; }
    .text-emerald-800 { color: #1a5c3a; }
    .text-teal-500 { color: #3a8c68; }
    .text-teal-600 { color: #3a8c68; }
    .text-teal-700 { color: #2d7055; }
    .text-sky-400 { color: #38bdf8; }
    .text-sky-500 { color: #0ea5e9; }
    .text-sky-600 { color: #0284c7; }
    .text-sky-700 { color: #0369a1; }
    .text-blue-200 { color: #bfdbfe; }
    .text-blue-500 { color: #3b82f6; }
    .text-blue-600 { color: #1e3d73; }
    .text-blue-700 { color: #1e3d73; }
    .text-indigo-500 { color: #6366f1; }
    .text-indigo-600 { color: #4f46e5; }
    .text-purple-400 { color: #c084fc; }
    .text-purple-600 { color: #9333ea; }
    .text-purple-700 { color: #7e22ce; }
    .text-purple-800 { color: #6b21a8; }
    .text-purple-900 { color: #581c87; }
    .text-violet-400 { color: #a78bfa; }
    .text-violet-700 { color: #6d28d9; }
    .text-pink-500 { color: #ec4899; }
    .text-pink-700 { color: #be185d; }
    .text-cyan-500 { color: #06b6d4; }
    .text-cyan-700 { color: #0e7490; }

    /* ── Background Colors ── */
    .bg-white { background: #fff; }
    .bg-transparent { background: transparent; }
    .bg-slate-50 { background: #f8fafc; }
    .bg-slate-100 { background: #f0f4f8; }
    .bg-slate-200 { background: #dde3ec; }
    .bg-slate-700 { background: #334155; }
    .bg-slate-800 { background: #1e293b; }
    .bg-slate-900 { background: #0f172a; }
    .bg-red-50 { background: #fef2f2; }
    .bg-red-100 { background: #fee2e2; }
    .bg-red-500 { background: #ef4444; }
    .bg-red-600 { background: #dc2626; }
    .bg-red-700 { background: #b91c1c; }
    .bg-amber-50 { background: #fffbeb; }
    .bg-amber-100 { background: #fef3c7; }
    .bg-amber-400 { background: #fbbf24; }
    .bg-amber-500 { background: #f59e0b; }
    .bg-orange-50 { background: #fff7ed; }
    .bg-orange-100 { background: #ffedd5; }
    .bg-green-50 { background: #f0fdf4; }
    .bg-green-100 { background: #dcfce7; }
    .bg-emerald-50 { background: #ecfdf5; }
    .bg-emerald-100 { background: #d1fae5; }
    .bg-emerald-500 { background: #3a8c68; }
    .bg-emerald-600 { background: #3a8c68; }
    .bg-emerald-700 { background: #2d7055; }
    .bg-teal-50 { background: #f0fdf4; }
    .bg-teal-100 { background: #ccfbf1; }
    .bg-teal-600 { background: #3a8c68; }
    .bg-teal-700 { background: #2d7055; }
    .bg-sky-50 { background: #f0f9ff; }
    .bg-sky-100 { background: #dce6f5; }
    .bg-sky-200 { background: #bae6fd; }
    .bg-sky-500 { background: #0ea5e9; }
    .bg-sky-600 { background: #0284c7; }
    .bg-sky-700 { background: #0369a1; }
    .bg-blue-50 { background: #eff6ff; }
    .bg-blue-100 { background: #dce6f5; }
    .bg-blue-500 { background: #3b82f6; }
    .bg-blue-600 { background: #1e3d73; }
    .bg-blue-700 { background: #1e3d73; }
    .bg-indigo-50 { background: #eef2ff; }
    .bg-indigo-100 { background: #e0e7ff; }
    .bg-indigo-600 { background: #4f46e5; }
    .bg-indigo-700 { background: #4338ca; }
    .bg-purple-50 { background: #faf5ff; }
    .bg-purple-100 { background: #f3e8ff; }
    .bg-pink-50 { background: #fdf2f8; }
    .bg-pink-100 { background: #fce7f3; }
    .bg-pink-500 { background: #ec4899; }
    .bg-pink-600 { background: #db2777; }
    .bg-pink-700 { background: #be185d; }
    .bg-cyan-50 { background: #ecfeff; }
    .bg-cyan-100 { background: #cffafe; }
    .bg-cyan-600 { background: #0891b2; }

    /* ── Gradient backgrounds ── */
    .bg-gradient-to-r { background: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
    .bg-gradient-to-br { background: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
    .from-blue-600 { --tw-gradient-from: #1e3d73; }
    .from-sky-500 { --tw-gradient-from: #0ea5e9; }
    .from-sky-600 { --tw-gradient-from: #0284c7; }
    .from-blue-500 { --tw-gradient-from: #3b82f6; }
    .from-red-500 { --tw-gradient-from: #ef4444; }
    .from-red-600 { --tw-gradient-from: #dc2626; }
    .from-amber-500 { --tw-gradient-from: #f59e0b; }
    .from-orange-500 { --tw-gradient-from: #f97316; }
    .from-green-500 { --tw-gradient-from: #22c55e; }
    .from-emerald-500 { --tw-gradient-from: #3a8c68; }
    .from-teal-500 { --tw-gradient-from: #3a8c68; }
    .from-teal-600 { --tw-gradient-from: #3a8c68; }
    .from-indigo-50 { --tw-gradient-from: #eef2ff; }
    .from-slate-600 { --tw-gradient-from: #475569; }
    .from-slate-700 { --tw-gradient-from: #334155; }
    .to-indigo-600 { --tw-gradient-to: #4f46e5; }
    .to-indigo-700 { --tw-gradient-to: #4338ca; }
    .to-sky-500 { --tw-gradient-to: #0ea5e9; }
    .to-sky-600 { --tw-gradient-to: #0284c7; }
    .to-blue-600 { --tw-gradient-to: #1e3d73; }
    .to-blue-50 { --tw-gradient-to: #eff6ff; }
    .to-red-600 { --tw-gradient-to: #dc2626; }
    .to-red-800 { --tw-gradient-to: #991b1b; }
    .to-rose-600 { --tw-gradient-to: #e11d48; }
    .to-orange-500 { --tw-gradient-to: #f97316; }
    .to-amber-600 { --tw-gradient-to: #d97706; }
    .to-emerald-600 { --tw-gradient-to: #3a8c68; }
    .to-teal-500 { --tw-gradient-to: #3a8c68; }
    .to-teal-600 { --tw-gradient-to: #3a8c68; }
    .to-green-500 { --tw-gradient-to: #22c55e; }
    .to-slate-800 { --tw-gradient-to: #1e293b; }
    .to-white { --tw-gradient-to: #fff; }
    .from-slate-500 { --tw-gradient-from: #64748b; }
    .from-slate-800 { --tw-gradient-from: #1e293b; }
    .from-pink-500 { --tw-gradient-from: #ec4899; }
    .from-violet-500 { --tw-gradient-from: #8b5cf6; }
    .to-violet-600 { --tw-gradient-to: #7c3aed; }
    .to-purple-700 { --tw-gradient-to: #7e22ce; }
    .to-pink-600 { --tw-gradient-to: #db2777; }

    /* ── Border ── */
    .border { border: 1px solid #dde3ec; }
    .border-0 { border-width: 0; }
    .border-t { border-top: 1px solid #dde3ec; }
    .border-b { border-bottom: 1px solid #dde3ec; }
    .border-l { border-left: 1px solid #dde3ec; }
    .border-r { border-right: 1px solid #dde3ec; }
    .border-2 { border-width: 2px; }
    .border-slate-50 { border-color: #f8fafc; }
    .border-slate-100 { border-color: #f0f4f8; }
    .border-slate-200 { border-color: #dde3ec; }
    .border-slate-300 { border-color: #cbd5e1; }
    .border-slate-400 { border-color: #94a3b8; }
    .border-slate-700 { border-color: #334155; }
    .border-red-100 { border-color: #fee2e2; }
    .border-red-200 { border-color: #fecaca; }
    .border-red-300 { border-color: #fca5a5; }
    .border-amber-100 { border-color: #fef3c7; }
    .border-amber-200 { border-color: #fde68a; }
    .border-amber-300 { border-color: #fcd34d; }
    .border-green-100 { border-color: #dcfce7; }
    .border-green-200 { border-color: #bbf7d0; }
    .border-emerald-100 { border-color: #d1fae5; }
    .border-emerald-200 { border-color: #a7f3d0; }
    .border-sky-100 { border-color: #e0f2fe; }
    .border-sky-200 { border-color: #dce6f5; }
    .border-sky-300 { border-color: #7dd3fc; }
    .border-sky-400 { border-color: #38bdf8; }
    .border-blue-100 { border-color: #dbeafe; }
    .border-blue-200 { border-color: #bfdbfe; }
    .border-blue-300 { border-color: #93c5fd; }
    .border-indigo-100 { border-color: #e0e7ff; }
    .border-indigo-200 { border-color: #c7d2fe; }
    .border-orange-200 { border-color: #fed7aa; }
    .border-purple-100 { border-color: #f3e8ff; }
    .border-purple-200 { border-color: #e9d5ff; }
    .border-violet-100 { border-color: #ede9fe; }
    .border-pink-100 { border-color: #fce7f3; }
    .border-pink-200 { border-color: #fbcfe8; }
    .border-teal-100 { border-color: #ccfbf1; }
    .border-cyan-100 { border-color: #cffafe; }
    .border-none { border: none; }
    .divide-y > * + * { border-top: 1px solid #dde3ec; }
    .divide-slate-50 > * + * { border-top-color: #f8fafc; }
    .divide-slate-100 > * + * { border-top-color: #f0f4f8; }

    /* ── Border Radius ── */
    .rounded { border-radius: 0.25rem; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-xl { border-radius: 0.75rem; }
    .rounded-2xl { border-radius: 1rem; }
    .rounded-3xl { border-radius: 1.5rem; }
    .rounded-full { border-radius: 9999px; }

    /* ── Shadow ── */
    .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); }
    .shadow-sm { box-shadow: 0 1px 3px rgba(30,61,115,0.08); }
    .shadow-lg { box-shadow: 0 8px 24px rgba(30,61,115,0.12); }
    .shadow-xl { box-shadow: 0 16px 40px rgba(30,61,115,0.15); }
    .shadow-2xl { box-shadow: 0 24px 60px rgba(30,61,115,0.18); }
    .shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); }

    /* ── Width/Height helpers ── */
    .w-3 { width: 0.75rem; }
    .w-4 { width: 1rem; }
    .w-5 { width: 1.25rem; }
    .w-6 { width: 1.5rem; }
    .w-7 { width: 1.75rem; }
    .w-8 { width: 2rem; }
    .w-9 { width: 2.25rem; }
    .w-10 { width: 2.5rem; }
    .w-12 { width: 3rem; }
    .w-14 { width: 3.5rem; }
    .w-16 { width: 4rem; }
    .w-20 { width: 5rem; }
    .w-24 { width: 6rem; }
    .w-28 { width: 7rem; }
    .w-32 { width: 8rem; }
    .w-40 { width: 10rem; }
    .w-72 { width: 18rem; }
    .h-1\.5 { height: 0.375rem; }
    .h-2 { height: 0.5rem; }
    .h-2\.5 { height: 0.625rem; }
    .h-3 { height: 0.75rem; }
    .h-4 { height: 1rem; }
    .h-5 { height: 1.25rem; }
    .h-6 { height: 1.5rem; }
    .h-7 { height: 1.75rem; }
    .h-8 { height: 2rem; }
    .h-9 { height: 2.25rem; }
    .h-10 { height: 2.5rem; }
    .h-12 { height: 3rem; }
    .h-16 { height: 4rem; }
    .h-20 { height: 5rem; }
    .h-48 { height: 12rem; }
    .h-screen { height: 100vh; }
    .min-h-\[300px\] { min-height: 300px; }
    .min-h-\[60px\] { min-height: 60px; }

    /* ── Cursor / Pointer ── */
    .cursor-pointer { cursor: pointer; }
    .cursor-grab { cursor: grab; }
    .cursor-not-allowed { cursor: not-allowed; }
    .cursor-grabbing:active { cursor: grabbing; }
    .pointer-events-none { pointer-events: none; }

    /* ── Opacity / Visibility ── */
    .opacity-0 { opacity: 0; }
    .opacity-50 { opacity: 0.5; }
    .opacity-75 { opacity: 0.75; }
    .invisible { visibility: hidden; }

    /* ── Transitions ── */
    .transition { transition: all 0.15s ease; }
    .transition-all { transition: all 0.2s ease; }
    .transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
    .transition-transform { transition: transform 0.2s ease; }
    .duration-200 { transition-duration: 200ms; }
    .duration-300 { transition-duration: 300ms; }
    .ease-in-out { transition-timing-function: ease-in-out; }

    /* ── Transform ── */
    .scale-\[1\.02\] { transform: scale(1.02); }
    .scale-\[1\.05\] { transform: scale(1.05); }
    .scale-95 { transform: scale(0.95); }
    .scale-98 { transform: scale(0.98); }
    .rotate-90 { transform: rotate(90deg); }
    .-translate-x-full { transform: translateX(-100%); }
    .translate-x-0 { transform: translateX(0); }
    .-translate-y-full { transform: translateY(-100%); }
    .translate-y-0 { transform: translateY(0); }
    .-translate-y-1\/2 { transform: translateY(-50%); }

    /* ── Hover helpers ── */
    .hover\:bg-slate-50:hover { background: #f8fafc; }
    .hover\:bg-slate-100:hover { background: #f0f4f8; }
    .hover\:bg-slate-200:hover { background: #dde3ec; }
    .hover\:bg-slate-300:hover { background: #cbd5e1; }
    .hover\:bg-blue-50:hover { background: #eff6ff; }
    .hover\:bg-sky-50:hover { background: #f0f9ff; }
    .hover\:bg-sky-100:hover { background: #dce6f5; }
    .hover\:bg-red-50:hover { background: #fef2f2; }
    .hover\:bg-red-100:hover { background: #fee2e2; }
    .hover\:bg-amber-50:hover { background: #fffbeb; }
    .hover\:bg-amber-100:hover { background: #fef3c7; }
    .hover\:bg-emerald-50:hover { background: #ecfdf5; }
    .hover\:bg-emerald-100:hover { background: #d1fae5; }
    .hover\:bg-teal-50:hover { background: #f0fdf4; }
    .hover\:bg-teal-100:hover { background: #ccfbf1; }
    .hover\:bg-teal-700:hover { background: #2d7055; }
    .hover\:bg-indigo-50:hover { background: #eef2ff; }
    .hover\:bg-indigo-100:hover { background: #e0e7ff; }
    .hover\:bg-orange-50:hover { background: #fff7ed; }
    .hover\:bg-orange-100:hover { background: #ffedd5; }
    .hover\:bg-pink-50:hover { background: #fdf2f8; }
    .hover\:bg-purple-50:hover { background: #faf5ff; }
    .hover\:bg-white:hover { background: #fff; }
    .hover\:border-sky-200:hover { border-color: #dce6f5; }
    .hover\:border-blue-300:hover { border-color: #93c5fd; }
    .hover\:border-amber-200:hover { border-color: #fde68a; }
    .hover\:border-orange-300:hover { border-color: #fdba74; }
    .hover\:border-slate-300:hover { border-color: #cbd5e1; }
    .hover\:text-slate-600:hover { color: #4b5a6e; }
    .hover\:text-slate-700:hover { color: #334155; }
    .hover\:text-slate-900:hover { color: #0f172a; }
    .hover\:text-sky-700:hover { color: #0369a1; }
    .hover\:text-red-500:hover { color: #ef4444; }
    .hover\:text-red-600:hover { color: #dc2626; }
    .hover\:text-blue-600:hover { color: #1e3d73; }
    .hover\:text-blue-800:hover { color: #1e3d73; }
    .hover\:text-emerald-800:hover { color: #1a5c3a; }
    .hover\:text-amber-700:hover { color: #b45309; }
    .hover\:text-white:hover { color: #fff; }
    .hover\:text-indigo-800:hover { color: #3730a3; }
    .hover\:text-teal-700:hover { color: #2d7055; }
    .hover\:text-orange-700:hover { color: #c2410c; }
    .hover\:text-pink-700:hover { color: #be185d; }
    .hover\:text-purple-700:hover { color: #7e22ce; }
    .hover\:shadow-sm:hover { box-shadow: 0 1px 3px rgba(30,61,115,0.08); }
    .hover\:shadow-md:hover { box-shadow: 0 4px 12px rgba(30,61,115,0.1); }
    .hover\:shadow-lg:hover { box-shadow: 0 8px 24px rgba(30,61,115,0.12); }
    .hover\:shadow-xl:hover { box-shadow: 0 16px 40px rgba(30,61,115,0.15); }
    .hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
    .hover\:scale-105:hover { transform: scale(1.05); }
    .hover\:-translate-y-1:hover { transform: translateY(-1px); }
    .hover\:opacity-70:hover { opacity: 0.7; }
    .hover\:opacity-80:hover { opacity: 0.8; }
    .hover\:opacity-100:hover { opacity: 1; }
    .hover\:underline:hover { text-decoration: underline; }
    .group:hover .group-hover\:opacity-100 { opacity: 1; }
    .group:hover .group-hover\:text-sky-500 { color: #0ea5e9; }
    .group:hover .group-hover\:text-amber-500 { color: #f59e0b; }
    .group:hover .group-hover\:text-red-500 { color: #ef4444; }
    .group:hover .group-hover\:bg-green-600 { background: #16a34a; }
    .group:hover .group-hover\:bg-red-600 { background: #dc2626; }
    .group:hover .group-hover\:bg-blue-600 { background: #1e3d73; }
    .group:hover .group-hover\:bg-amber-600 { background: #d97706; }
    .group:hover .group-hover\:bg-emerald-600 { background: #3a8c68; }
    .group:hover .group-hover\:text-white { color: #fff; }
    .group:hover .group-hover\:text-amber-700 { color: #b45309; }
    .group:hover .group-hover\:text-sky-700 { color: #0369a1; }

    /* ── Focus ── */
    .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(30,61,115,0.3); }
    .focus\:ring-sky-500:focus { box-shadow: 0 0 0 2px rgba(14,165,233,0.4); }
    .focus\:ring-red-500:focus { box-shadow: 0 0 0 2px rgba(239,68,68,0.4); }
    .focus\:ring-teal-300:focus { box-shadow: 0 0 0 2px rgba(58,140,104,0.4); }
    .focus\:ring-indigo-500:focus { box-shadow: 0 0 0 2px rgba(79,70,229,0.4); }
    .focus\:bg-white:focus { background: #fff; }
    .outline-none { outline: none; }
    .appearance-none { appearance: none; }
    .resize-none { resize: none; }

    /* ── Overflow ── */
    .overflow-visible { overflow: visible; }

    /* ── Active ── */
    .active\:scale-95:active { transform: scale(0.95); }

    /* ── Display helpers ── */
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline-flex { display: inline-flex; }
    .table { display: table; }
    .hidden { display: none !important; }
    .flex-wrap { flex-wrap: wrap; }

    /* ── Backdrop ── */
    .backdrop-blur-sm { backdrop-filter: blur(4px); }
    .backdrop-blur-md { backdrop-filter: blur(8px); }
    .backdrop-blur-2xl { backdrop-filter: blur(24px); }

    /* ══════════════════════════════════════════════════════
       BEKI ASSIST – Eigene Komponenten
    ══════════════════════════════════════════════════════ */

    /* ── Sidebar ── */
    aside#sidebar {
        width: 18rem;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-right: 1px solid #dde3ec;
        box-shadow: 2px 0 10px rgba(30,61,115,0.06);
        z-index: 50;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    aside#sidebar .sidebar-logo-wrap {
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid #dde3ec;
    }
    aside#sidebar nav {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem;
    }
    aside#sidebar nav button {
        width: 100%;
        text-align: left;
        padding: 0.625rem 1rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: #4b5a6e;
        background: none;
        border: none;
        cursor: pointer;
        transition: background 0.13s, color 0.13s;
        font-family: inherit;
    }
    aside#sidebar nav button:hover {
        background: #f0f4f8;
        color: #1e3d73;
    }
    aside#sidebar nav button.active-nav,
    button.active-nav {
        background: #dce6f5;
        border-left: 3px solid #1e3d73;
        color: #1e3d73;
        font-weight: 700;
        padding-left: calc(1rem - 3px);
    }
    aside#sidebar nav button.pl-8 {
        padding-left: 2rem;
    }
    aside#sidebar nav button.pl-8.active-nav {
        padding-left: calc(2rem - 3px);
    }

    /* ── Header ── */
    header {
        background: #fff;
        border-bottom: 2px solid #1e3d73;
        box-shadow: 0 2px 8px rgba(30,61,115,0.08);
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 30;
    }

    /* ── Main / Content ── */
    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background: #f0f4f8;
        position: relative;
    }
    .main-content {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem 2rem;
        position: relative;
        z-index: 10;
    }

    /* ── Cards ── */
    .card {
        background: #fff;
        border: 1px solid #dde3ec;
        border-radius: 0.75rem;
        box-shadow: 0 1px 4px rgba(30,61,115,0.06);
    }
    .card-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f0f4f8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8fafc;
    }

    /* ── Buttons ── */
    button, .btn {
        font-family: inherit;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
    }
    .btn-primary {
        background: #1e3d73;
        color: #fff;
        padding: 0.625rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.875rem;
    }
    .btn-primary:hover { background: #2a4f8f; }
    .btn-success {
        background: #3a8c68;
        color: #fff;
        padding: 0.625rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 700;
    }
    .btn-success:hover { background: #2d7055; }
    .btn-danger {
        background: #dc2626;
        color: #fff;
        padding: 0.625rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 700;
    }

    /* ── Inputs / Forms ── */
    input, select, textarea {
        font-family: inherit;
        font-size: 0.875rem;
        color: #1a2740;
        background: #f8fafc;
        border: 1.5px solid #dde3ec;
        border-radius: 0.5rem;
        padding: 0.625rem 0.875rem;
        transition: border-color 0.15s;
        outline: none;
        width: 100%;
        box-sizing: border-box;
    }
    input:focus, select:focus, textarea:focus {
        border-color: #3a8c68;
        background: #fff;
    }
    input::placeholder, textarea::placeholder {
        color: #6b7a8d;
    }

    /* ── Tables ── */
    table { width: 100%; border-collapse: collapse; }
    th {
        background: #f8fafc;
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.7rem;
        font-weight: 700;
        color: #6b7a8d;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 2px solid #dde3ec;
    }
    td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f0f4f8;
        font-size: 0.875rem;
        color: #1a2740;
        vertical-align: middle;
    }
    tr:hover { background: #f8fafc; }

    /* ── Badges ── */
    .badge {
        display: inline-block;
        padding: 0.125rem 0.625rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .badge-blue { background: #dce6f5; color: #1e3d73; }
    .badge-green { background: #dcfce7; color: #15803d; }
    .badge-red { background: #fee2e2; color: #991b1b; }
    .badge-amber { background: #fef3c7; color: #92400e; }
    .badge-gray { background: #f0f4f8; color: #4b5a6e; }

    /* ── Kanban / Drag & Drop ── */
    .kanban-col {
        min-height: 300px;
        transition: background-color 0.2s;
        background: #f8fafc;
        border-radius: 0.75rem;
        border: 1px solid #dde3ec;
        padding: 1rem;
    }
    .kanban-col.drag-over {
        background: #dce6f5;
        border: 2px dashed #1e3d73;
    }
    .task-card {
        cursor: grab;
        transition: all 0.2s;
        background: #fff;
        border: 1px solid #dde3ec;
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .task-card:active { cursor: grabbing; transform: scale(0.98); }
    .task-card:hover { box-shadow: 0 4px 12px rgba(30,61,115,0.1); border-color: #b0c0d4; }

    /* ── Nav Group Toggle ── */
    .nav-group-header {
        padding: 0.375rem 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: #6b7a8d;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        margin-top: 0.5rem;
    }
    .nav-group-header:hover { color: #1e3d73; }
    [id^="grp-"] { transition: max-height 0.2s ease, opacity 0.2s ease; }

    /* ── Login Overlay ── */
    #login-overlay {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #0f1c33 0%, #1e3d73 100%);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ── Overlays / Modals ── */
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(10,20,45,0.72);
        backdrop-filter: blur(4px);
        z-index: 60;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 10vh;
    }
    .modal-box {
        background: #fff;
        border-radius: 1rem;
        box-shadow: 0 24px 60px rgba(0,0,0,0.25);
        overflow: hidden;
        width: 100%;
        animation: fadeIn 0.25s ease;
    }
    .modal-header {
        background: #1e3d73;
        color: #fff;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
    }
    .modal-header-green { background: linear-gradient(to right, #3a8c68, #2d7055); }
    .modal-header-sky { background: linear-gradient(to right, #0284c7, #0ea5e9); }
    .modal-header-amber { background: linear-gradient(to right, #f59e0b, #f97316); }
    .modal-header-teal { background: linear-gradient(to right, #3a8c68, #2d7055); }

    /* ── Section Icon Boxes ── */
    .section-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #fff;
        flex-shrink: 0;
    }
    .section-icon-blue { background: linear-gradient(135deg, #1e3d73, #2a4f8f); box-shadow: 0 4px 12px rgba(30,61,115,0.25); }
    .section-icon-red { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 4px 12px rgba(220,38,38,0.25); }
    .section-icon-sky { background: linear-gradient(135deg, #0284c7, #0ea5e9); box-shadow: 0 4px 12px rgba(14,165,233,0.25); }
    .section-icon-amber { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 4px 12px rgba(245,158,11,0.25); }
    .section-icon-emerald { background: linear-gradient(135deg, #3a8c68, #2d7055); box-shadow: 0 4px 12px rgba(58,140,104,0.25); }
    .section-icon-purple { background: linear-gradient(135deg, #7c3aed, #9333ea); box-shadow: 0 4px 12px rgba(124,58,237,0.25); }
    .section-icon-pink { background: linear-gradient(135deg, #db2777, #ec4899); box-shadow: 0 4px 12px rgba(219,39,119,0.25); }
    .section-icon-cyan { background: linear-gradient(135deg, #0891b2, #06b6d4); box-shadow: 0 4px 12px rgba(6,182,212,0.25); }
    .section-icon-slate { background: linear-gradient(135deg, #334155, #64748b); box-shadow: 0 4px 12px rgba(51,65,85,0.25); }
    .section-icon-teal { background: linear-gradient(135deg, #3a8c68, #2d7055); box-shadow: 0 4px 12px rgba(58,140,104,0.25); }
    .section-icon-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 4px 12px rgba(79,70,229,0.25); }
    .section-icon-orange { background: linear-gradient(135deg, #ea580c, #f97316); box-shadow: 0 4px 12px rgba(234,88,12,0.25); }

    /* ── Dividers ── */
    .divider { border-top: 1px solid #dde3ec; margin: 0.375rem 1rem; }

    /* ── Connection Status ── */
    .connection-dot {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .dot-red { width: 0.5rem; height: 0.5rem; background: #ef4444; border-radius: 50%; }
    .dot-green { width: 0.5rem; height: 0.5rem; background: #3a8c68; border-radius: 50%; }

    /* ── Digital Clock ── */
    .digital-clock { font-variant-numeric: tabular-nums; letter-spacing: -1px; }

    /* ── Ping animation ── */
    @keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }
    .animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

    /* ── Pulse animation ── */
    @keyframes pulse-anim { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
    .animate-pulse { animation: pulse-anim 2s cubic-bezier(0.4,0,0.6,1) infinite; }

    /* ── Bounce animation ── */
    @keyframes bounce-anim { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
    .animate-bounce { animation: bounce-anim 1s infinite; }

    /* ── Progress bar ── */
    .progress-bar-inner { background: linear-gradient(90deg, #1e3d73, #3a8c68); height: 4px; transition: width 0.4s ease; }

    /* ── Print ── */
    @media print {
        aside, header, .no-print, #login-overlay, nav, #toast-container, #mobile-menu-overlay { display: none !important; }
        main { margin: 0; padding: 0; overflow: visible; }
        #protocol { display: block !important; }
        #proto-output { border: none; font-size: 12pt; width: 100%; height: auto; resize: none; white-space: pre-wrap; }
        .print-header { display: block !important; text-align: center; margin-bottom: 20px; }
    }

    /* ── Dark Mode ── */
    .dark { color-scheme: dark; }
    .dark body, .dark main { background: #0f172a !important; }
    .dark aside { background: #1e293b !important; border-color: #334155 !important; }
    .dark header { background: rgba(30,41,59,0.95) !important; border-color: #334155 !important; }
    .dark .bg-white { background: #1e293b !important; }
    .dark .bg-slate-50 { background: #334155 !important; }
    .dark .bg-slate-100 { background: #334155 !important; }
    .dark .text-slate-800, .dark .text-slate-700, .dark .text-slate-600 { color: #e2e8f0 !important; }
    .dark .text-slate-500, .dark .text-slate-400, .dark .text-slate-300 { color: #94a3b8 !important; }
    .dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }
    .dark input, .dark select, .dark textarea { background: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; }
    .dark .kanban-col { background: #1e293b !important; border-color: #334155 !important; }
    .dark .task-card { background: #334155 !important; border-color: #475569 !important; }
    .dark tr:hover { background: #334155 !important; }

    /* ── Mobile ── */
    @media (max-width: 768px) {
        aside#sidebar {
            position: fixed;
            inset-y: 0;
            left: 0;
            transform: translateX(-100%);
        }
        aside#sidebar.open {
            transform: translateX(0);
        }
        .md\:hidden { display: none; }
        .main-content { padding: 1rem; }

        /* Header compact on mobile */
        header { padding: 8px 12px !important; }
        header img { height: 56px !important; }
        #header-search-wrapper { display: none !important; }
        #header-title-block { display: none !important; }
        #header-title-sep { display: none !important; }
        #mobile-search-btn { display: inline-flex !important; }

        /* Breadcrumb bar on mobile */
        #breadcrumb-bar { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
        #breadcrumb-subnav { gap: 4px; flex-wrap: wrap; }
        .bc-subnav-btn { font-size: 0.72rem; padding: 4px 10px; }

        /* Nav tiles single column already via grid-cols-1 */
        .nav-tile { padding: 1.1rem 1rem; }

        /* Tables scroll horizontally */
        .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        /* Modal full-width on mobile */
        .modal-content, [id$="-modal"] > div, [id$="Modal"] > div {
            width: 96vw !important;
            max-width: 96vw !important;
            margin: 1rem auto !important;
        }

        /* sm: breakpoint helpers */
        .sm\:grid-cols-2 { grid-template-columns: 1fr; }
        .sm\:p-8 { padding: 1rem; }
    }
    @media (min-width: 641px) {
        .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .sm\:p-8 { padding: 2rem; }
        #header-search-wrapper { display: flex !important; }
        header img { height: 80px; }
    }
    @media (min-width: 769px) {
        aside#sidebar { transform: translateX(0) !important; position: relative; }
        .md\:hidden-on-desktop { display: none; }
        .md\:flex { display: flex; }
        .md\:block { display: block; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
        .md\:col-span-2 { grid-column: span 2; }
        .md\:w-1\/3 { width: 33.333%; }
        .md\:w-2\/3 { width: 66.667%; }
        .md\:w-72 { width: 18rem; }
        .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
        .md\:p-8 { padding: 2rem; }
        .md\:flex-row { flex-direction: row; }
        .md\:items-center { align-items: center; }
        .md\:text-2xl { font-size: 1.5rem; }
    }
    @media (min-width: 1024px) {
        .lg\:col-span-2 { grid-column: span 2; }
        .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
        .lg\:flex-row { flex-direction: row; }
    }

    /* ── Misc inline-style helpers ── */
    .space-x-3 > * + * { margin-left: 0.75rem; }
    .flex-none { flex: none; }
    .shrink-0 { flex-shrink: 0; }
    .grow { flex-grow: 1; }
    .w-px { width: 1px; }
    .h-px { height: 1px; }
    .border-b-2 { border-bottom-width: 2px; }
    .border-t-2 { border-top-width: 2px; }
    .border-l-3 { border-left-width: 3px; }
    .line-through { text-decoration: line-through; }
    .underline { text-decoration: underline; }
    .no-underline { text-decoration: none; }
    .text-\[9px\] { font-size: 9px; }
    .text-\[10px\] { font-size: 10px; }
    .text-\[11px\] { font-size: 11px; }
    .text-\[12px\] { font-size: 12px; }
    .text-\[13px\] { font-size: 13px; }
    .text-\[14px\] { font-size: 14px; }
    .text-\[18px\] { font-size: 18px; }
    .align-super { vertical-align: super; }
    .align-middle { vertical-align: middle; }
    .object-contain { object-fit: contain; }
    .object-cover { object-fit: cover; }
    .border-dashed { border-style: dashed; }
    .aspect-square { aspect-ratio: 1; }
    .self-end { align-self: flex-end; }
    .self-start { align-self: flex-start; }
    .self-center { align-self: center; }
    .col-span-3 { grid-column: span 3; }
    .break-all { word-break: break-all; }
    .pt-\[10vh\] { padding-top: 10vh; }
    .pt-\[5vh\] { padding-top: 5vh; }
    .pt-\[15vh\] { padding-top: 15vh; }
    .max-h-\[50vh\] { max-height: 50vh; }
    .max-h-\[60vh\] { max-height: 60vh; }
    .max-h-\[70vh\] { max-height: 70vh; }
    .max-h-\[80vh\] { max-height: 80vh; }
    .max-h-\[600px\] { max-height: 600px; }
    .min-h-\[44px\] { min-height: 44px; }
    .min-h-\[440px\] { min-height: 440px; }
    .resize-vertical { resize: vertical; }
    .resize { resize: both; }
    .h-16 { height: 4rem; }
    .w-80 { width: 20rem; }
    .max-w-\[280px\] { max-width: 280px; }
    .w-\[32px\] { width: 32px; }
    .h-\[32px\] { height: 32px; }
    .max-h-40 { max-height: 10rem; }
    .max-w-3xl { max-width: 48rem; }
    .rotate-90 { transform: rotate(90deg); }
    .group { }
    .group-open\:rotate-90 { }
    .open .group-icon { transform: rotate(90deg); }
    [class*="font-mono"].mvg-para { cursor: pointer; }
    .h-\[4px\] { height: 4px; }
    .h-\[16px\] { height: 16px; }
    .h-\[2px\] { height: 2px; }
    .w-\[2px\] { width: 2px; }
    .bg-\[\#1e3d73\] { background: #1e3d73; }
    .text-\[\#1e3d73\] { color: #1e3d73; }
    .bg-white\/20 { background: rgba(255,255,255,0.2); }
    .bg-white\/40 { background: rgba(255,255,255,0.4); }
    .bg-white\/60 { background: rgba(255,255,255,0.6); }
    .bg-white\/80 { background: rgba(255,255,255,0.8); }
    .bg-slate-900\/60 { background: rgba(15,23,42,0.6); }
    .bg-slate-900\/70 { background: rgba(15,23,42,0.7); }
    .bg-slate-900\/95 { background: rgba(15,23,42,0.95); }
    .bg-blue-900\/50 { background: rgba(30,61,115,0.5); }
    .text-white\/50 { color: rgba(255,255,255,0.5); }
    .text-white\/60 { color: rgba(255,255,255,0.6); }
    .text-white\/70 { color: rgba(255,255,255,0.7); }
    .border-white\/20 { border-color: rgba(255,255,255,0.2); }
    .bg-red-800 { background: #991b1b; }
    .bg-red-900 { background: #7f1d1d; }
    .bg-emerald-900 { background: #064e3b; }
    .bg-sky-700 { background: #0369a1; }
    .bg-sky-600 { background: #0284c7; }
    .bg-amber-700 { background: #b45309; }
    .bg-amber-600 { background: #d97706; }
    .bg-green-700 { background: #15803d; }
    .bg-violet-50 { background: #f5f3ff; }
    .border-violet-100 { border-color: #ede9fe; }
    .text-violet-700 { color: #6d28d9; }
    .text-emerald-300 { color: #6ee7b7; }
    .text-red-300 { color: #fca5a5; }
    .text-sky-200 { color: #bae6fd; }
    .shadow-sky-200 { box-shadow: 0 4px 12px rgba(14,165,233,0.2); }
    .shadow-sky-200\/50 { box-shadow: 0 4px 12px rgba(14,165,233,0.1); }
    .shadow-sky-300\/50 { box-shadow: 0 6px 16px rgba(14,165,233,0.15); }
    .shadow-blue-200 { box-shadow: 0 4px 12px rgba(30,61,115,0.15); }
    .shadow-blue-200\/50 { box-shadow: 0 4px 12px rgba(30,61,115,0.1); }
    .shadow-red-200 { box-shadow: 0 4px 12px rgba(220,38,38,0.15); }
    .shadow-sky-500\/20 { box-shadow: 0 0 0 1px rgba(14,165,233,0.2); }
    .shadow-teal-200 { box-shadow: 0 4px 12px rgba(58,140,104,0.15); }
    .shadow-emerald-200 { box-shadow: 0 4px 12px rgba(58,140,104,0.15); }
    .shadow-amber-200 { box-shadow: 0 4px 12px rgba(245,158,11,0.15); }
    .ring-2 { box-shadow: 0 0 0 2px; }
    .ring-blue-500 { box-shadow: 0 0 0 2px #1e3d73; }
    .text-blue-100 { color: #dbeafe; }
    .text-teal-600 { color: #3a8c68; }
    .bg-teal-50 { background: #f0fdf4; }
    .accent-green-600 { accent-color: #16a34a; }
    .accent-red-600 { accent-color: #dc2626; }
    .accent-amber-600 { accent-color: #d97706; }
    .from-blue-600 { --tw-gradient-from: #1e3d73; }
    .to-indigo-700 { --tw-gradient-to: #4338ca; }
    .from-sky-50 { --tw-gradient-from: #f0f9ff; }
    .to-blue-50 { --tw-gradient-to: #eff6ff; }
    .bg-gradient-to-r.from-blue-600 { background: linear-gradient(to right, #1e3d73, #2a4f8f); }
    .bg-gradient-to-r.from-blue-600.to-indigo-700 { background: linear-gradient(to right, #1e3d73, #4338ca); }
    .to-indigo-600 { --tw-gradient-to: #4f46e5; }
    .bg-gradient-to-br.from-blue-600 { background: linear-gradient(to bottom right, #1e3d73, #2a4f8f); }
    .bg-gradient-to-br.from-blue-600.to-indigo-700 { background: linear-gradient(to bottom right, #1e3d73, #4338ca); }

    /* ── has-[:checked] polyfill via JS approach - handled via CSS ── */
    label:has(input[type="radio"]:checked) { background: #dce6f5; border-color: #1e3d73; }
    label:has(input[type="checkbox"]:checked) { background: #dce6f5; border-color: #1e3d73; }

    /* ── Custom scroll class ── */
    .custom-scroll { scrollbar-width: thin; scrollbar-color: #c8d0dc #f0f4f8; }
    .custom-scroll::-webkit-scrollbar { width: 6px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #c8d0dc; border-radius: 3px; }

    /* ── Inline flex/grid shortcuts ── */
    .flex-row { flex-direction: row; }
    .flex-col { flex-direction: column; }

    /* ── Additional bg w/ opacity ── */
    .bg-red-900 { background: #7f1d1d; }
    .bg-blue-900 { background: #1e3a5f; }
    .text-blue-300 { color: #93c5fd; }
    .border-blue-700 { border-color: #1e3d73; }
    .text-sky-300 { color: #7dd3fc; }
    .bg-sky-900 { background: #0c4a6e; }
    .text-amber-300 { color: #fcd34d; }
    .from-emerald-500 { --tw-gradient-from: #3a8c68; }
    .to-teal-500 { --tw-gradient-to: #3a8c68; }

    /* for inline gradient in Tailwind-style markup: force correct value */
    [class*="bg-gradient-to-r"] { background: linear-gradient(to right, var(--tw-gradient-from, #1e3d73), var(--tw-gradient-to, #3a8c68)); }
    [class*="bg-gradient-to-br"] { background: linear-gradient(to bottom right, var(--tw-gradient-from, #1e3d73), var(--tw-gradient-to, #3a8c68)); }

    /* Fix: sections need display:block when not hidden */
    section:not(.hidden-section) { display: block; }
    section.hidden-section { display: none !important; }

    /* ── Opacity-modified hover backgrounds (Tailwind /70 syntax) ── */
    .hover\:bg-blue-50\/70:hover { background: rgba(239,246,255,0.7); }
    .hover\:bg-sky-50\/70:hover { background: rgba(240,249,255,0.7); }
    .hover\:bg-amber-50\/70:hover { background: rgba(255,251,235,0.7); }
    .hover\:bg-red-50\/70:hover { background: rgba(254,242,242,0.7); }
    .hover\:bg-emerald-50\/70:hover { background: rgba(236,253,245,0.7); }
    .hover\:bg-teal-50\/70:hover { background: rgba(240,253,244,0.7); }
    .hover\:bg-purple-50\/70:hover { background: rgba(250,245,255,0.7); }
    .hover\:bg-pink-50\/70:hover { background: rgba(253,242,248,0.7); }
    .hover\:bg-cyan-50\/70:hover { background: rgba(236,254,255,0.7); }
    .hover\:bg-slate-50\/70:hover { background: rgba(248,250,252,0.7); }
    .hover\:bg-slate-100\/60:hover { background: rgba(240,244,248,0.6); }
    .bg-red-500\/20 { background: rgba(239,68,68,0.2); }
    .border-slate-200\/50 { border-color: rgba(221,227,236,0.5); }
    .hover\:bg-blue-700:hover { color: #1e3d73; }
    .hover\:text-blue-700:hover { color: #1e3d73; }
    .hover\:text-sky-700:hover { color: #0369a1; }
    .hover\:text-amber-700:hover { color: #b45309; }
    .hover\:text-red-700:hover { color: #b91c1c; }
    .hover\:text-emerald-700:hover { color: #2d7055; }
    .hover\:text-teal-700:hover { color: #2d7055; }
    .hover\:text-purple-700:hover { color: #7e22ce; }
    .hover\:text-pink-700:hover { color: #be185d; }
    .hover\:text-cyan-700:hover { color: #0e7490; }
    .hover\:text-slate-700:hover { color: #334155; }

        /* ── Top Navigation (hidden – replaced by tile home) ── */
        #top-nav { display: none !important; }

        /* ── Nav Tiles ── */
        .nav-tile {
            background: #fff;
            border-radius: 16px;
            padding: 22px 20px;
            cursor: pointer;
            box-shadow: 0 2px 14px rgba(30,61,115,.08);
            border: 1px solid #eef1f5;
            transition: all .25s;
            text-align: left;
            width: 100%;
            font-family: inherit;
            border-top-width: 4px;
            border-top-style: solid;
        }
        .nav-tile:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(30,61,115,.14);
            border-bottom-color: #eef1f5;
        }
        .nav-tile-chip {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
        }

        /* ── Breadcrumb bar ── */
        #breadcrumb-bar { display: none; background: #fff; border-bottom: 1px solid #eef1f5; padding: 6px 24px; flex-shrink: 0; z-index: 20; align-items: center; gap: 6px; flex-wrap: wrap; }
        #breadcrumb-bar.visible { display: flex; }
        .bc-home-btn { display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:8px;background:none;border:none;color:#6b7a8d;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
        .bc-home-btn:hover { background:#f4f7fb; color:#1e3d73; }
        .bc-subnav-btn { padding:4px 10px;border-radius:7px;border:1.5px solid transparent;background:none;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:#4b5a6e;transition:all .15s;display:inline-flex;align-items:center;gap:4px; }
        .bc-subnav-btn:hover { background:#eef2fa; color:#1e3d73; }
        .bc-subnav-btn.bc-active { font-weight:700; }

        /* ── Top Navigation ── */
        .tnav-btn{display:flex;align-items:center;gap:5px;padding:7px 11px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:600;color:#4b5a6e;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;font-family:inherit;height:100%}
        .tnav-btn:hover{color:#1e3d73;background:#e8eef8;border-radius:6px 6px 0 0}
        .tnav-btn.active-nav{color:#1e3d73;border-bottom-color:#1e3d73;background:#e8eef8;border-radius:6px 6px 0 0}
        .tnav-ic{font-size:12px}
        .tnav-sep{width:1px;background:#dde3ec;margin:6px 4px;align-self:stretch;flex-shrink:0}
        .tnav-dd-wrap{position:relative;display:flex;align-items:stretch}
        .tnav-dd{position:absolute;top:100%;left:0;background:#fff;border:1px solid #dde3ec;border-radius:10px;box-shadow:0 8px 24px rgba(30,61,115,.14);min-width:190px;padding:4px;z-index:200;animation:fadeIn .15s ease}
        .tnav-dd-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 11px;border:none;background:none;cursor:pointer;font-size:13px;color:#334155;border-radius:7px;transition:background .12s;font-family:inherit;white-space:nowrap}
        .tnav-dd-item:hover,.tnav-dd-item.active-nav{background:#eff6ff;color:#1e3d73;font-weight:600}
    


        .tour-overlay { position:fixed;inset:0;z-index:9998;pointer-events:none; }
        .tour-spotlight { position:absolute;border-radius:16px;box-shadow:0 0 0 9999px rgba(15,23,42,0.75);z-index:9998;pointer-events:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
        .tour-tooltip { position:absolute;z-index:9999;background:white;border-radius:16px;padding:20px 24px;max-width:380px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);pointer-events:auto;animation:tourFadeIn 0.3s ease; }
        .tour-tooltip::before { content:'';position:absolute;width:12px;height:12px;background:white;transform:rotate(45deg); }
        .tour-tooltip.arrow-top::before { top:-6px;left:32px; }
        .tour-tooltip.arrow-bottom::before { bottom:-6px;left:32px; }
        .tour-tooltip.arrow-left::before { left:-6px;top:24px; }
        @keyframes tourFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        .tour-pulse { animation: tourPulse 2s infinite; }
        @keyframes tourPulse { 0%,100%{box-shadow:0 0 0 9999px rgba(15,23,42,0.75)} 50%{box-shadow:0 0 0 9999px rgba(15,23,42,0.7),0 0 0 4px rgba(56,189,248,0.5)} }