/* ===== Dark theme (black & graphite) ===== */
        .dark { color-scheme: dark; }
        .dark body { background-color: #0d0d0d; color: #f5f5f5; }

        /* Surfaces */
        .dark [class~="bg-white"] { background-color: #1a1a1a; }
        .dark [class~="bg-gray-50"] { background-color: #242424; }
        .dark [class~="bg-gray-50/50"] { background-color: #242424; }
        .dark [class~="bg-gray-50/30"] { background-color: #242424; }
        .dark [class~="bg-gray-100"] { background-color: #2a2a2a; }
        .dark [class~="bg-gray-200"] { background-color: #2a2a2a; }
        .dark [class~="bg-[#f4f6f8]"] { background-color: #0d0d0d; }
        .dark [class~="bg-[#f4f6f8]/80"] { background-color: rgba(13,13,13,0.8); }
        .dark [class~="bg-[#fafafa]"] { background-color: #242424; }
        .dark [class~="bg-[#faf6f0]"] { background-color: #242424; }
        .dark [class~="focus:bg-white"]:focus { background-color: #1a1a1a; }

        /* Charcoal used as background: badge visible, backdrop black */
        .dark [class~="bg-charcoal"] { background-color: #3a3a3a; }
        .dark [class~="bg-charcoal/40"] { background-color: rgba(0,0,0,0.6); }

        /* Text */
        .dark [class~="text-charcoal"] { color: #f5f5f5; }
        .dark [class~="text-gray-800"] { color: #f0f0f0; }
        .dark [class~="text-gray-600"] { color: #c4c4c4; }
        .dark [class~="text-gray-500"] { color: #9a9a9a; }
        .dark [class~="text-gray-400"] { color: #8a8a8a; }
        .dark [class~="text-gray-300"] { color: #6a6a6a; }
        .dark [class~="text-muted"] { color: #9a9a9a; }

        /* Borders */
        .dark [class~="border-gray-100"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-100/50"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-100/80"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-100/30"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-100/20"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-200"] { border-color: #3a3a3a; }
        .dark [class~="border-gray-200/80"] { border-color: #3a3a3a; }
        .dark [class~="border-gray-50"] { border-color: #2a2a2a; }
        .dark [class~="border-gray-300"] { border-color: #3a3a3a; }

        /* Divide */
        .dark [class~="divide-gray-50"] > * + * { border-color: #2a2a2a; }

        /* Accent tints bumped for visibility on dark */
        .dark [class~="bg-accent/5"] { background-color: color-mix(in srgb, var(--accent) 7.84%, transparent); }
        .dark [class~="bg-accent/10"] { background-color: color-mix(in srgb, var(--accent) 14.9%, transparent); }
        .dark [class~="bg-accent/20"] { background-color: color-mix(in srgb, var(--accent) 20%, transparent); }

        /* Accent full and text-on-accent: ensure the Tailwind CDN
           shorthand (rgb(... / var(--tw-bg-opacity, 1))) resolves to
           the configured accent color in dark mode too. */
        .dark [class~="bg-accent"] { background-color: var(--accent); }
        .dark [class~="text-onAccent"] { color: var(--on-accent, #fff); }
        .dark [class~="hover:brightness-90"]:hover { filter: brightness(0.95); }
        .dark [class~="border-accent/30"] { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
        .dark [class~="text-accent"] { color: var(--accent); }

        /* Footer action bar: flat, no card, just background color. */
        .footer-action-bar { background-color: #ffffff; }
        .footer-action-card { background-color: transparent; border: none; box-shadow: none; }
        .dark .footer-action-bar { background-color: #0d0d0d; }
        .dark .footer-action-card { background-color: transparent; border: none; box-shadow: none; }

        /* Hover/focus state variants */
        .dark [class~="hover:bg-gray-50"]:hover { background-color: #242424; }
        .dark [class~="hover:bg-gray-100"]:hover { background-color: #2a2a2a; }
        .dark [class~="hover:bg-gray-200"]:hover { background-color: #2a2a2a; }
        .dark [class~="hover:bg-gray-50/50"]:hover { background-color: #242424; }
        .dark [class~="hover:border-gray-200/80"]:hover { border-color: #3a3a3a; }
        .dark [class~="hover:text-gray-500"]:hover { color: #9a9a9a; }
        .dark [class~="hover:text-charcoal"]:hover { color: #f5f5f5; }

        /* Native widgets */
        .dark input, .dark textarea, .dark select { color-scheme: dark; }

        /* Nav (admin) */
        .dark .nav-btn { color: #9a9a9a; }
        .dark .nav-btn .icon-wrapper { color: #9a9a9a; }
        .dark .nav-active { color: #f5f5f5 !important; }
        .dark .nav-active span { color: #f5f5f5 !important; }

        /* Nav (public cardápio) */
        .dark .pub-nav-btn { color: #9a9a9a; }
        .dark .pub-nav-btn .icon-wrapper { color: #9a9a9a; }
        .dark .pub-nav-active { color: #f5f5f5 !important; }
        .dark .pub-nav-active span { color: #f5f5f5 !important; }

        /* Theme toggle icon swap */
        .theme-toggle .icon-moon { display: block; }
        .theme-toggle .icon-sun { display: none; }
        .dark .theme-toggle .icon-moon { display: none; }
        .dark .theme-toggle .icon-sun { display: block; }

        html.theme-next body.app-shell { --accent: #c96442; --on-accent: #fff; --cg-brand: 201 100 66; --cg-brand-text: 176 87 48; }
        html.dark.theme-next body.app-shell { --accent: #d97757; --on-accent: #fff; --cg-brand: 217 119 87; --cg-brand-text: 238 168 140; }
        html.theme-violet body.app-shell { --accent: #7033ff; --on-accent: #fff; --cg-brand: 112 51 255; --cg-brand-text: 80 30 200; }
        html.dark.theme-violet body.app-shell { --accent: #8c5cff; --on-accent: #fff; --cg-brand: 140 92 255; --cg-brand-text: 180 140 255; }
        html.theme-emerald body.app-shell { --accent: #2f9d68; --on-accent: #062015; --cg-brand: 47 157 104; --cg-brand-text: 70 170 115; }
        html.dark.theme-emerald body.app-shell { --accent: #4ade80; --on-accent: #062015; --cg-brand: 0 98 57; --cg-brand-text: 74 222 128; }
        html.theme-ocean body.app-shell { --accent: #1e9df1; --on-accent: #fff; --cg-brand: 30 157 241; --cg-brand-text: 29 161 242; }
        html.dark.theme-ocean body.app-shell { --accent: #50befa; --on-accent: #062033; --cg-brand: 28 156 240; --cg-brand-text: 80 190 250; }
        html.theme-softpop body.app-shell { --accent: #4f46e5; --on-accent: #fff; --cg-brand: 79 70 229; --cg-brand-text: 55 48 163; }
        html.dark.theme-softpop body.app-shell { --accent: #818cf8; --on-accent: #111; --cg-brand: 129 140 248; --cg-brand-text: 180 185 255; }
        html.theme-cyberpunk body.app-shell { --accent: #ff00c8; --on-accent: #fff; --cg-brand: 255 0 200; --cg-brand-text: 200 0 160; }
        html.dark.theme-cyberpunk body.app-shell { --accent: #ff00c8; --on-accent: #fff; --cg-brand: 255 0 200; --cg-brand-text: 255 140 230; }
        html.theme-darkmatter body.app-shell { --accent: #d87943; --on-accent: #fff; --cg-brand: 216 121 67; --cg-brand-text: 170 90 45; }
        html.dark.theme-darkmatter body.app-shell { --accent: #e78a53; --on-accent: #1a0e08; --cg-brand: 231 138 83; --cg-brand-text: 251 185 145; }

        body.app-shell > .admin-theme-popover,
        body.app-shell .admin-theme-popover {
            position: fixed !important;
            top: auto;
            right: auto;
            left: 266px;
            bottom: 16px;
            z-index: 80;
            width: min(228px, calc(100vw - 24px));
            max-height: min(72vh, 26rem);
            margin: 0 !important;
            padding: 0.65rem 0.5rem 0.5rem;
            overflow: auto;
            overscroll-behavior: contain;
            border: 1px solid var(--admin-border, #e8e6df);
            border-radius: 14px;
            background: var(--admin-surface, #fff);
            box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
            box-sizing: border-box;
        }
        body.app-shell .admin-theme-popover[hidden] { display: none !important; }
        body.app-shell .admin-theme-popover > strong {
            display: block;
            margin: 0 0.35rem 0.45rem;
            color: var(--admin-muted, #7e7e7e);
            font-size: 0.75rem;
            font-weight: 600;
        }
        body.app-shell .admin-theme-options {
            display: grid;
            gap: 0.12rem;
        }
        body.app-shell button.admin-theme-option,
        body.app-shell .admin-theme-option {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            width: 100%;
            min-height: 0 !important;
            height: auto;
            padding: 0.35rem 0.45rem;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--admin-text, #1a1a1a);
            cursor: pointer;
            font: inherit;
            font-size: 0.8125rem;
            line-height: 1.2;
            text-align: left;
        }
        body.app-shell .admin-theme-option:hover { background: rgba(0, 0, 0, 0.05); }
        body.app-shell .admin-theme-option.is-active {
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            color: var(--accent);
        }
        body.app-shell .admin-theme-swatch {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
            flex: 0 0 12px;
        }
        body.app-shell .admin-theme-swatch.is-auto {
            background: linear-gradient(90deg, #f4f6f8 50%, #1c1c1c 50%);
        }
        body.app-shell .settings-preference-row.is-theme { grid-template-columns: 42px minmax(0, 1fr); }
        body.app-shell .settings-theme-panel { padding: 0 0.75rem 0.85rem; }
        .dark body.app-shell .admin-theme-popover {
            background: #1c1f23;
            border-color: #2c3035;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        }
        .dark body.app-shell .admin-theme-option { color: #f1f1ee; }
        .dark body.app-shell .admin-theme-option:hover { background: rgba(255, 255, 255, 0.06); }

        @media (max-width: 1023.98px) {
            body.app-shell .admin-theme-popover { display: none !important; }
        }