body {
            margin: 0;
            color: #0f172a;
            font-family: 'Space Grotesk', system-ui, sans-serif;
            background:
                radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 34%),
                radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 32%),
                linear-gradient(180deg, #f8fafc 0%, #e2e8f0 52%, #f1f5f9 100%);
        }

        * {
            box-sizing: border-box;
        }

        #root {
            min-height: 100vh;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #e2e8f0;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #94a3b8, #cbd5e1);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #64748b, #94a3b8);
        }

        .light-ui .text-white {
            color: #0f172a !important;
        }

        /* Keep white text on intentionally dark surfaces (buttons, dark sections) */
        .light-ui .bg-slate-900.text-white,
        .light-ui .bg-slate-800.text-white,
        .light-ui .bg-ink.text-white,
        .light-ui .bg-zinc-900.text-white,
        .light-ui .bg-black.text-white,
        .light-ui .bg-slate-900 .text-white,
        .light-ui .bg-slate-800 .text-white,
        .light-ui .bg-ink .text-white,
        .light-ui .bg-zinc-900 .text-white,
        .light-ui .bg-black .text-white {
            color: #ffffff !important;
        }

        .light-ui .text-slate-200 {
            color: #334155 !important;
        }

        .light-ui .text-slate-300 {
            color: #475569 !important;
        }

        .light-ui .text-zinc-200 {
            color: #334155 !important;
        }

        .light-ui .text-zinc-300 {
            color: #475569 !important;
        }

        .light-ui .text-emerald-100 {
            color: #065f46 !important;
        }

        .light-ui .text-cyan-100 {
            color: #0e7490 !important;
        }

        .light-ui .hover\:text-white:hover {
            color: #0f172a !important;
        }

        .light-ui .bg-black\/20,
        .light-ui .bg-black\/30,
        .light-ui .bg-black\/40,
        .light-ui .bg-black\/50 {
            background-color: rgba(148, 163, 184, 0.12) !important;
        }

        .light-ui .bg-zinc-900,
        .light-ui .bg-zinc-900\/30,
        .light-ui .bg-zinc-900\/50,
        .light-ui .bg-zinc-900\/80,
        .light-ui .bg-zinc-950,
        .light-ui .bg-zinc-950\/60 {
            background-color: rgba(255, 255, 255, 0.92) !important;
        }

        .light-ui .border-white\/5,
        .light-ui .border-white\/10,
        .light-ui .hover\:border-white\/20:hover {
            border-color: rgba(148, 163, 184, 0.35) !important;
        }

        /* Surface remaps for legacy dark utilities used by rows / DetailPanel */
        .light-ui .bg-white\/5,
        .light-ui .bg-white\/10,
        .light-ui .hover\:bg-white\/5:hover,
        .light-ui .hover\:bg-white\/10:hover {
            background-color: rgba(248, 250, 252, 0.9) !important;
        }

        .light-ui .text-zinc-100,
        .light-ui .text-zinc-200 {
            color: #1f2937 !important;
        }

        .light-ui .text-zinc-300 {
            color: #475569 !important;
        }

        .light-ui .text-zinc-400,
        .light-ui .text-zinc-500,
        .light-ui .text-zinc-600 {
            color: #64748b !important;
        }

        /* Subtle row hover */
        .light-ui .group:hover {
            background-color: rgba(241, 245, 249, 0.7);
        }

        /* Soften emerald / rose tinted backgrounds used as info chips */
        .light-ui .bg-emerald-500\/10,
        .light-ui .bg-emerald-500\/15,
        .light-ui .bg-emerald-500\/20 {
            background-color: rgba(16, 185, 129, 0.12) !important;
        }
        .light-ui .border-emerald-500\/20,
        .light-ui .border-emerald-500\/30,
        .light-ui .border-emerald-400\/30,
        .light-ui .border-emerald-400\/40 {
            border-color: rgba(16, 185, 129, 0.32) !important;
        }
        .light-ui .text-emerald-100,
        .light-ui .text-emerald-200,
        .light-ui .text-emerald-300,
        .light-ui .text-emerald-400 {
            color: #047857 !important;
        }
        .light-ui .text-emerald-500 {
            color: #059669 !important;
        }

        .light-ui .bg-rose-500\/15,
        .light-ui .bg-rose-500\/20 {
            background-color: rgba(244, 63, 94, 0.10) !important;
        }
        .light-ui .border-rose-500\/30 {
            border-color: rgba(244, 63, 94, 0.30) !important;
        }
        .light-ui .text-rose-300,
        .light-ui .text-rose-400 {
            color: #be123c !important;
        }
        .light-ui .text-red-400 {
            color: #dc2626 !important;
        }

        .light-ui .bg-orange-500\/15,
        .light-ui .bg-orange-500\/20 {
            background-color: rgba(249, 115, 22, 0.12) !important;
        }
        .light-ui .border-orange-500\/30 {
            border-color: rgba(249, 115, 22, 0.32) !important;
        }
        .light-ui .text-orange-300 {
            color: #c2410c !important;
        }

        .light-ui .bg-amber-500\/20 {
            background-color: rgba(245, 158, 11, 0.15) !important;
        }
        .light-ui .text-amber-300,
        .light-ui .text-amber-400 {
            color: #b45309 !important;
        }

        .light-ui .bg-fuchsia-500\/12,
        .light-ui .bg-fuchsia-500\/15 {
            background-color: rgba(217, 70, 239, 0.10) !important;
        }
        .light-ui .border-fuchsia-400\/40 {
            border-color: rgba(217, 70, 239, 0.32) !important;
        }
        .light-ui .text-fuchsia-100 {
            color: #86198f !important;
        }

        .light-ui .bg-sky-500\/12 {
            background-color: rgba(14, 165, 233, 0.10) !important;
        }
        .light-ui .border-sky-400\/40 {
            border-color: rgba(14, 165, 233, 0.32) !important;
        }
        .light-ui .text-sky-100 {
            color: #0369a1 !important;
        }

        /* Heavy dark shadows → soft */
        .light-ui [class*="shadow-[0_30px_100px_rgba(2,6,23"],
        .light-ui [class*="shadow-[0_0_0_1px_rgba"] {
            box-shadow: 0 10px 30px -12px rgba(2, 23, 41, 0.15) !important;
        }