@layer modes {

    /* ── Demo (cyan) — default; explicit for clarity ─── */
    .mode-demo {
        --accent:       186 100% 50%;
        --accent-hover: 186 100% 60%;
    }

    /* ── Sandbox (coral) ──────────────────────────────── */
    .mode-sandbox {
        --accent:       12  90% 60%;
        --accent-hover: 12  90% 70%;
    }

    /* ── Premium (gold) ───────────────────────────────── */
    .mode-premium {
        --accent:       45 100% 60%;
        --accent-hover: 45 100% 70%;
    }

    /* ── 2-panel grid — sandbox + premium (no Guide) ──── */
    .mode-sandbox .demo-panels,
    .mode-premium .demo-panels {
        grid-template-columns: 1fr 1.4fr;
    }
    .mode-sandbox .guide-panel,
    .mode-premium .guide-panel { display: none; }

    /* ── Header bar — tabs align with canvas column ──── */
    /* Grid mirrors demo-panels so tabs sit above canvas */
    .mode-sandbox .demo-header-bar,
    .mode-premium .demo-header-bar {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        padding: 0;
        gap: 0;
    }
    .mode-sandbox .demo-header-left,
    .mode-premium .demo-header-left {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-right: 1px solid hsl(var(--line));
    }
    .mode-sandbox .demo-header-right,
    .mode-premium .demo-header-right {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        overflow-x: auto;
    }

    /* ── Authenticated header — no marketing nav ──────── */
    .mode-sandbox .header-nav,
    .mode-premium .header-nav { display: none; }

    /* ── No demo tagline in authenticated modes ───────── */
    .mode-sandbox .demo-panel-title,
    .mode-premium .demo-panel-title { display: none; }

    /* ── Brand name plain text in single-brand modes (no switcher) ─── */
    .mode-sandbox .brand-dropdown,
    .mode-premium .brand-dropdown { display: block; }
    .mode-sandbox .brand-caret,
    .mode-premium .brand-caret { display: none; }
    .mode-sandbox .brand-btn,
    .mode-premium .brand-btn { cursor: default; pointer-events: none; }
    .mode-sandbox .brand-dropdown-menu,
    .mode-premium .brand-dropdown-menu { display: none; }

    /* ── Avatar popover action slot — mode-specific ──── */
    /* "Start free" = demo only; Account = sandbox/premium */
    .mode-sandbox .avatar-popover__start-free,
    .mode-premium .avatar-popover__start-free { display: none; }

    /* ── Pricing section — hidden all modes (SOT PNL8) ─── */
    .pricing-section { display: none; }

}