/* =======================
KAMV THEME: SKYNIGHT 
========================== */

:root[data-theme="skynight"],
body[data-theme="skynight"] {

    /* ================================================================
    1. BACKGROUNDS — escala neutra pura
    body → app → sections → cards → elevated → overlay
    ================================================================ */

    --n3d-clr-bg-bd: #000000;
    --n3d-clr-bg-p: #050505;
    --n3d-clr-bg-sec: #080808;
    --n3d-clr-bg-ter: #0c0c0c;
    --n3d-clr-bg-qua: #101010;
    --n3d-clr-bg-qui: #141414;
    --n3d-clr-bg-sex: #181818;
    --n3d-clr-bg-sep: #1c1c1c;
    --n3d-clr-bg-oct: #202020;
    --n3d-clr-bg-non: #252525;
    --n3d-clr-bg-dec: #2a2a2a;
    --n3d-clr-bg-und: #2f2f2f;
    --n3d-clr-bg-duo: #343434;
    --n3d-clr-bg-inv: #fafafa;

    /* ================================================================
    2. SURFACES — para cards, panels, inputs, modals
    Separado de bg porque un card vive SOBRE un bg
    Tinteo mínimo de indigo (2-4%) para que no sea gris muerto
    ================================================================ */

    --n3d-clr-surf-1: color-mix(in srgb, var(--indigokamv) 2%, #0a0a0a);
    --n3d-clr-surf-2: color-mix(in srgb, var(--indigokamv) 2%, #0f0f0f);
    --n3d-clr-surf-3: color-mix(in srgb, var(--indigokamv) 2.5%, #131313);
    --n3d-clr-surf-4: color-mix(in srgb, var(--indigokamv) 3%, #181818);
    --n3d-clr-surf-5: color-mix(in srgb, var(--indigokamv) 3%, #1d1d1d);
    --n3d-clr-surf-6: color-mix(in srgb, var(--indigokamv) 3.5%, #222222);
    --n3d-clr-surf-7: color-mix(in srgb, var(--indigokamv) 4%, #262626);
    --n3d-clr-surf-8: color-mix(in srgb, var(--indigokamv) 4%, #2b2b2b);

    /* ================================================================
    3. TEXT — blanco descendente
    p-ter: contenido legible / qua-qui: secundario / sex: ghost
    ================================================================ */

    --n3d-clr-txt-p: #f5f5f5;
    --n3d-clr-txt-sec: #e0e0e0;
    --n3d-clr-txt-ter: #c0c0c0;
    --n3d-clr-txt-qua: #9a9a9a;
    --n3d-clr-txt-qui: #6e6e6e;
    --n3d-clr-txt-sex: #484848;
    --n3d-clr-txt-inv: #050505;

    /* ================================================================
    4. BORDERS — neutros con micro-tinte frío
    Solo lo justo para que no se vean amarillentos
    ================================================================ */

    --n3d-brdr-surf-p: color-mix(in srgb, var(--indigokamv) 4%, #1a1a1a);
    --n3d-brdr-surf-sec: color-mix(in srgb, var(--indigokamv) 4%, #232323);
    --n3d-brdr-surf-ter: color-mix(in srgb, var(--indigokamv) 5%, #2d2d2d);
    --n3d-brdr-surf-qua: color-mix(in srgb, var(--indigokamv) 5%, #383838);
    --n3d-brdr-surf-qui: color-mix(in srgb, var(--indigokamv) 6%, #444444);
    --n3d-brdr-surf-sex: color-mix(in srgb, var(--indigokamv) 6%, #525252);

    /* ================================================================
    4b. BORDERS — neutros sin micro-tinte
    Blanco - Negro
    ================================================================ */

    --n3d-brdr-clr-p: #1a1a1a;
    --n3d-brdr-clr-sec: #232323;
    --n3d-brdr-clr-ter: #2d2d2d;
    --n3d-brdr-clr-qua: #383838;
    --n3d-brdr-clr-qui: #444444;
    --n3d-brdr-clr-sex: #525252;

    /* ================================================================
    5. INTERACTIVE — purple primario, lime secundario
    ================================================================ */

    /* UI Colors */
    --n3d-clr-ui-def: var(--purplekamv);
    --n3d-clr-ui-hov: var(--purplekamv-soft);
    --n3d-clr-ui-foc: var(--purplekamv-stark);
    --n3d-clr-ui-act: var(--limekamv);
    --n3d-clr-ui-sel: var(--purplekamv-deep);
    --n3d-clr-ui-dis: var(--n3d-clr-txt-qui);

    /* UI Borders */
    --n3d-brdr-clr-def: var(--purplekamv-stark);
    --n3d-brdr-clr-hov: var(--purplekamv);
    --n3d-brdr-clr-foc: var(--limekamv);
    --n3d-brdr-clr-act: var(--limekamv-stark);
    --n3d-brdr-clr-sel: var(--purplekamv-deep);
    --n3d-brdr-clr-dis: var(--n3d-brdr-clr-ter);

    /* UI Backgrounds */
    --n3d-clr-bg-def: color-mix(in srgb, var(--purplekamv) 8%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-hov: color-mix(in srgb, var(--purplekamv) 12%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-foc: color-mix(in srgb, var(--purplekamv) 15%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-act: color-mix(in srgb, var(--limekamv) 10%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-sel: color-mix(in srgb, var(--purplekamv) 10%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-dis: var(--n3d-clr-surf-1);

    /* UI Text */
    --n3d-clr-txt-link: var(--purplekamv-baby);
    --n3d-clr-txt-hov: var(--limekamv);
    --n3d-clr-txt-act: var(--purplekamv);
    --n3d-clr-txt-vis: var(--limekamv-muted);
    --n3d-clr-txt-sel: var(--purplekamv-soft);
    --n3d-clr-txt-dis: var(--n3d-clr-txt-qui);

    /* ================================================================
    6. SEMANTIC — indigo=info, jade=success
    ================================================================ */

    /* Semantic Colors */
    --n3d-clr-ui-succ: var(--jadekamv);
    --n3d-clr-ui-inf: var(--indigokamv-soft);
    --n3d-clr-ui-warn: color-mix(in srgb, var(--limekamv) 60%, var(--orangekamv));
    --n3d-clr-ui-err: color-mix(in srgb, var(--purplekamv) 25%, #ff3355);
    --n3d-clr-ui-highlight: var(--limekamv);
    --n3d-clr-ui-neutral: var(--n3d-clr-txt-qua);

    /* Semantic Borders */
    --n3d-brdr-clr-succ: var(--jadekamv-stark);
    --n3d-brdr-clr-inf: var(--indigokamv-stark);
    --n3d-brdr-clr-warn: color-mix(in srgb, var(--limekamv-stark) 60%, var(--orangekamv));
    --n3d-brdr-clr-err: color-mix(in srgb, var(--purplekamv) 25%, #cc2244);
    --n3d-brdr-clr-highlight: var(--limekamv-stark);
    --n3d-brdr-clr-neutral: var(--n3d-brdr-clr-ter);

    /* Semantic Backgrounds */
    --n3d-clr-bg-succ: color-mix(in srgb, var(--jadekamv) 8%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-inf: color-mix(in srgb, var(--indigokamv) 8%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-warn: color-mix(in srgb, var(--limekamv) 6%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-err: color-mix(in srgb, #ff3355 6%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-highlight: color-mix(in srgb, var(--limekamv) 8%, var(--n3d-clr-surf-2));
    --n3d-clr-bg-neutral: var(--n3d-clr-surf-3);

    /* Semantic Text */
    --n3d-clr-txt-succ: var(--jadekamv-baby);
    --n3d-clr-txt-inf: var(--indigokamv-baby);
    --n3d-clr-txt-warn: color-mix(in srgb, var(--limekamv) 60%, var(--orangekamv));
    --n3d-clr-txt-err: color-mix(in srgb, var(--purplekamv) 15%, #ff6680);
    --n3d-clr-txt-highlight: var(--limekamv);
    --n3d-clr-txt-neutral: var(--n3d-clr-txt-ter);

    /* ================================================================
    7. GLASS & ALPHA — overlays, backdrops, frosted panels
    ================================================================ */

    --n3d-glass-purple: color-mix(in srgb, var(--purplekamv) 6%, transparent);
    --n3d-glass-indigo: color-mix(in srgb, var(--indigokamv) 6%, transparent);
    --n3d-glass-jade: color-mix(in srgb, var(--jadekamv) 6%, transparent);
    --n3d-glass-lime: color-mix(in srgb, var(--limekamv) 6%, transparent);

    --n3d-overlay-light: rgba(255, 255, 255, 0.04);
    --n3d-overlay-medium: rgba(255, 255, 255, 0.08);
    --n3d-overlay-heavy: rgba(255, 255, 255, 0.14);
    --n3d-overlay-dark: rgba(0, 0, 0, 0.5);
    --n3d-overlay-darker: rgba(0, 0, 0, 0.75);
    --n3d-overlay-blackout: rgba(0, 0, 0, 0.9);

    /* ================================================================
    8. ACCENT TOKENS — para tags, badges, chips, highlights
    Cuando necesitas decir "esto es jade" o "esto es lime"
    ================================================================ */

    --n3d-accent-purple: var(--purplekamv);
    --n3d-accent-indigo: var(--indigokamv);
    --n3d-accent-jade: var(--jadekamv);
    --n3d-accent-lime: var(--limekamv);

    --n3d-accent-purple-subtle: color-mix(in srgb, var(--purplekamv) 12%, var(--n3d-clr-surf-3));
    --n3d-accent-indigo-subtle: color-mix(in srgb, var(--indigokamv) 12%, var(--n3d-clr-surf-3));
    --n3d-accent-jade-subtle: color-mix(in srgb, var(--jadekamv) 10%, var(--n3d-clr-surf-3));
    --n3d-accent-lime-subtle: color-mix(in srgb, var(--limekamv) 10%, var(--n3d-clr-surf-3));

    /* === STATUS COLOR & GRADIENTS */

    /* Gradient Ring */
    --kg-status-on: repeating-linear-gradient(120deg, #d8f22b 2%, #00ffc8 28%, #28ff00 50%, #eaf12f 77%, #d8f22b 98%);
    --kg-status-away: repeating-linear-gradient(120deg, #fb380d 2%, #ffc400 28%, #ffc300 50%, #e76156 77%, #fb380d 98%);
    --kg-status-off: repeating-linear-gradient(120deg, #3d357c 2%, #576a83 28%, #444a50 50%, #5c426f 77%, #3d357c 98%);

    /* Status Single Color*/
    --n3d-clr-on: var(--limekamv);
    --n3d-clr-away: #fbde0c;
    --n3d-clr-off: var(--blk-dark-charcoal);

    /* Reactions Colors */
    --n3d-clr-like: #0055ff;
    --n3d-clr-heart: #fb0c8f;
    --n3d-clr-star: #ffc800;

    /* == BACKDROPS & GRADIENTS === */
    --n3d-clr-bg-auth: #121212;
    --n3d-clr-bg-auth-safe: var(--n3d-clr-bg-auth);          /* top safe area + Safari tint */
    --n3d-clr-bg-auth-safe-btm: var(--n3d-clr-bg-auth); /* bottom strip color */

    /* == Alphas for Blur */
    --n3d-alphablur-bg: rgba(0, 0, 0, 0.855);
    --n3d-alphapills: rgb(0 0 0 / 33%);

    /* == GridLines w FadeStops */
    --n3d-grdFdStps-bg: #050505;
    --n3d-grdFdStps-ln: #101010;

    /* ================================================================
    BG UI GRADIENT — neutral (3 stops)
    ================================================================ */

    --n3d-grdnt-ui-p: linear-gradient(135deg, 
        rgba(10, 10, 12, 1) 0%, 
        rgba(13, 13, 15, 0.98) 50%, 
        rgba(15, 15, 18, 1) 100%);

    /* ================================================================
    GLASS SHADOWS — TYPE 1 
    ================================================================ */

    /* Neutral */
    --n3d-inner-glass-typ-1: 
        0 0 2px 1px rgba(255, 255, 255, 0.05) inset,
        0 0 10px 4px rgba(255, 255, 255, 0.03) inset,
        0px 4px 16px rgba(0, 0, 0, 0.5),
        0px 8px 24px rgba(0, 0, 0, 0.4),
        0px 16px 56px rgba(0, 0, 0, 0.3),
        0px 4px 16px rgba(255, 255, 255, 0.04) inset,
        0px 8px 24px rgba(255, 255, 255, 0.03) inset,
        0px 16px 56px rgba(255, 255, 255, 0.02) inset;

    /* Purple */
    --n3d-inner-glass-typ-1-ppk: 
        0 0 2px 1px rgba(255, 255, 255, 0.05) inset,
        0 0 10px 4px rgba(255, 255, 255, 0.03) inset,
        0px 4px 16px rgba(0, 0, 0, 0.5),
        0px 8px 24px rgba(0, 0, 0, 0.4),
        0px 16px 56px rgba(0, 0, 0, 0.3),
        0px 4px 16px rgba(66, 0, 255, 0.08) inset,
        0px 8px 24px rgba(66, 0, 255, 0.06) inset,
        0px 16px 56px rgba(66, 0, 255, 0.04) inset;

    /* Lime */
    --n3d-inner-glass-typ-1-lmk: 
        0 0 2px 1px rgba(255, 255, 255, 0.05) inset,
        0 0 10px 4px rgba(255, 255, 255, 0.03) inset,
        0px 4px 16px rgba(0, 0, 0, 0.5),
        0px 8px 24px rgba(0, 0, 0, 0.4),
        0px 16px 56px rgba(0, 0, 0, 0.3),
        0px 4px 16px rgba(144, 255, 0, 0.08) inset,
        0px 8px 24px rgba(144, 255, 0, 0.06) inset,
        0px 16px 56px rgba(144, 255, 0, 0.04) inset;

    /* Indigo */
    --n3d-inner-glass-typ-1-idk: 
        0 0 2px 1px rgba(255, 255, 255, 0.05) inset,
        0 0 10px 4px rgba(255, 255, 255, 0.03) inset,
        0px 4px 16px rgba(0, 0, 0, 0.5),
        0px 8px 24px rgba(0, 0, 0, 0.4),
        0px 16px 56px rgba(0, 0, 0, 0.3),
        0px 4px 16px rgba(75, 51, 255, 0.08) inset,
        0px 8px 24px rgba(75, 51, 255, 0.06) inset,
        0px 16px 56px rgba(75, 51, 255, 0.04) inset;

    /* Jade */
    --n3d-inner-glass-typ-1-jdk: 
        0 0 2px 1px rgba(255, 255, 255, 0.05) inset,
        0 0 10px 4px rgba(255, 255, 255, 0.03) inset,
        0px 4px 16px rgba(0, 0, 0, 0.5),
        0px 8px 24px rgba(0, 0, 0, 0.4),
        0px 16px 56px rgba(0, 0, 0, 0.3),
        0px 4px 16px rgba(0, 189, 138, 0.08) inset,
        0px 8px 24px rgba(0, 189, 138, 0.06) inset,
        0px 16px 56px rgba(0, 189, 138, 0.04) inset;

    /* ================================================================
    GLASS SHADOWS — TYPE 2 
    ================================================================ */

    /* Neutral */
    --n3d-inner-glass-typ-2: 
        0 8px 32px rgba(120, 120, 130, 0.21), 
        inset 0 1px 0 rgb(255 255 255 / 5%), 
        inset 0 1px 4px rgba(255, 255, 255, 0.05), 
        inset 0 1px 4px rgba(255, 255, 255, 0.03), 
        inset 0 -1px 0 rgb(160 155 175 / 7%), 
        inset 2px 0 0 rgba(255, 255, 255, 0.03), 
        inset -2px 0 0 rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(255, 255, 255, 0.06), 
        inset 0 0 2px 1px rgba(255, 255, 255, 0.02), 
        inset 0 0 10px 4px rgba(255, 255, 255, 0.01), 
        0px 4px 16px rgba(0, 0, 0, 0.4), 
        0px 8px 24px rgba(120, 120, 130, 0.18), 
        0px 16px 56px rgba(0, 0, 0, 0.2), 
        inset 0px 4px 16px rgba(255, 255, 255, 0.04), 
        inset 0px 8px 24px rgba(255, 255, 255, 0.03), 
        inset 0px 16px 56px rgba(255, 255, 255, 0.02);

    /* Purple */
    --n3d-inner-glass-typ-2-ppk: 
        0 8px 32px rgb(64 43 130 / 21%), 
        inset 0 1px 0 rgb(255 255 255 / 5%), 
        inset 0 1px 4px rgba(255, 255, 255, 0.05), 
        inset 0 1px 4px rgba(255, 255, 255, 0.03), 
        inset 0 -1px 0 rgb(142 127 189 / 7%), 
        inset 2px 0 0 rgba(255, 255, 255, 0.03), 
        inset -2px 0 0 rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(66, 0, 255, 0.15), 
        inset 0 0 2px 1px rgba(255, 255, 255, 0.02), 
        inset 0 0 10px 4px rgba(255, 255, 255, 0.01), 
        0px 4px 16px rgba(0, 0, 0, 0.4), 
        0px 8px 24px rgb(97 84 150 / 18%), 
        0px 16px 56px rgba(0, 0, 0, 0.2), 
        inset 0px 4px 16px rgba(66, 0, 255, 0.1), 
        inset 0px 8px 24px rgba(66, 0, 255, 0.08), 
        inset 0px 16px 56px rgba(66, 0, 255, 0.06);

    /* Lime */
    --n3d-inner-glass-typ-2-lmk: 
        0 8px 32px rgb(80 110 43 / 21%), 
        inset 0 1px 0 rgb(255 255 255 / 5%), 
        inset 0 1px 4px rgba(255, 255, 255, 0.05), 
        inset 0 1px 4px rgba(255, 255, 255, 0.03), 
        inset 0 -1px 0 rgb(155 185 127 / 7%), 
        inset 2px 0 0 rgba(255, 255, 255, 0.03), 
        inset -2px 0 0 rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(144, 255, 0, 0.15), 
        inset 0 0 2px 1px rgba(255, 255, 255, 0.02), 
        inset 0 0 10px 4px rgba(255, 255, 255, 0.01), 
        0px 4px 16px rgba(0, 0, 0, 0.4), 
        0px 8px 24px rgb(100 130 70 / 18%), 
        0px 16px 56px rgba(0, 0, 0, 0.2), 
        inset 0px 4px 16px rgba(144, 255, 0, 0.1), 
        inset 0px 8px 24px rgba(144, 255, 0, 0.08), 
        inset 0px 16px 56px rgba(144, 255, 0, 0.06);

    /* Indigo */
    --n3d-inner-glass-typ-2-idk: 
        0 8px 32px rgb(55 40 130 / 21%), 
        inset 0 1px 0 rgb(255 255 255 / 5%), 
        inset 0 1px 4px rgba(255, 255, 255, 0.05), 
        inset 0 1px 4px rgba(255, 255, 255, 0.03), 
        inset 0 -1px 0 rgb(135 125 195 / 7%), 
        inset 2px 0 0 rgba(255, 255, 255, 0.03), 
        inset -2px 0 0 rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(75, 51, 255, 0.15), 
        inset 0 0 2px 1px rgba(255, 255, 255, 0.02), 
        inset 0 0 10px 4px rgba(255, 255, 255, 0.01), 
        0px 4px 16px rgba(0, 0, 0, 0.4), 
        0px 8px 24px rgb(85 75 150 / 18%), 
        0px 16px 56px rgba(0, 0, 0, 0.2), 
        inset 0px 4px 16px rgba(75, 51, 255, 0.1), 
        inset 0px 8px 24px rgba(75, 51, 255, 0.08), 
        inset 0px 16px 56px rgba(75, 51, 255, 0.06);

    /* Jade */
    --n3d-inner-glass-typ-2-jdk: 
        0 8px 32px rgb(30 95 75 / 21%), 
        inset 0 1px 0 rgb(255 255 255 / 5%), 
        inset 0 1px 4px rgba(255, 255, 255, 0.05), 
        inset 0 1px 4px rgba(255, 255, 255, 0.03), 
        inset 0 -1px 0 rgb(120 185 165 / 7%), 
        inset 2px 0 0 rgba(255, 255, 255, 0.03), 
        inset -2px 0 0 rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(0, 189, 138, 0.15), 
        inset 0 0 2px 1px rgba(255, 255, 255, 0.02), 
        inset 0 0 10px 4px rgba(255, 255, 255, 0.01), 
        0px 4px 16px rgba(0, 0, 0, 0.4), 
        0px 8px 24px rgb(60 120 100 / 18%), 
        0px 16px 56px rgba(0, 0, 0, 0.2), 
        inset 0px 4px 16px rgba(0, 189, 138, 0.1), 
        inset 0px 8px 24px rgba(0, 189, 138, 0.08), 
        inset 0px 16px 56px rgba(0, 189, 138, 0.06);

    /* ================================================================
    GLASS SHADOWS — TYPE 3 
    ================================================================ */

    /* Neutral */
    --n3d-inner-glass-typ-3: 
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 -1px 0 rgb(0 0 0 / 25%) inset,
        1px 0 0 rgb(255 255 255 / 4%) inset,
        -1px 0 0 rgb(255 255 255 / 4%) inset,
        0 2px 8px rgb(160 155 175 / 12%) inset,
        0 -2px 8px rgb(0 0 0 / 20%) inset,
        0 0 24px rgb(255 255 255 / 4%) inset,
        0 0 2px 1px rgb(255 255 255 / 3%) inset,
        2px 4px 12px rgb(0 0 0 / 45%),
        -2px 2px 8px rgb(120 115 140 / 15%),
        0 8px 32px rgb(0 0 0 / 35%),
        0 2px 4px rgb(160 155 175 / 10%),
        0 16px 48px rgb(30 28 40 / 25%);

    /* Purple */
    --n3d-inner-glass-typ-3-ppk: 
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 -1px 0 rgb(0 0 0 / 25%) inset,
        1px 0 0 rgb(255 255 255 / 4%) inset,
        -1px 0 0 rgb(255 255 255 / 4%) inset,
        0 2px 8px rgb(139 105 238 / 12%) inset,
        0 -2px 8px rgb(0 0 0 / 20%) inset,
        0 0 24px rgb(66 0 255 / 10%) inset,
        0 0 2px 1px rgb(255 255 255 / 3%) inset,
        2px 4px 12px rgb(0 0 0 / 45%),
        -2px 2px 8px rgb(88 60 180 / 15%),
        0 8px 32px rgb(0 0 0 / 35%),
        0 2px 4px rgb(139 105 238 / 10%),
        0 16px 48px rgb(30 20 60 / 25%);

    /* Lime */
    --n3d-inner-glass-typ-3-lmk: 
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 -1px 0 rgb(0 0 0 / 25%) inset,
        1px 0 0 rgb(255 255 255 / 4%) inset,
        -1px 0 0 rgb(255 255 255 / 4%) inset,
        0 2px 8px rgb(160 230 80 / 12%) inset,
        0 -2px 8px rgb(0 0 0 / 20%) inset,
        0 0 24px rgb(144 255 0 / 10%) inset,
        0 0 2px 1px rgb(255 255 255 / 3%) inset,
        2px 4px 12px rgb(0 0 0 / 45%),
        -2px 2px 8px rgb(100 155 40 / 15%),
        0 8px 32px rgb(0 0 0 / 35%),
        0 2px 4px rgb(160 230 80 / 10%),
        0 16px 48px rgb(35 50 15 / 25%);

    /* Indigo */
    --n3d-inner-glass-typ-3-idk: 
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 -1px 0 rgb(0 0 0 / 25%) inset,
        1px 0 0 rgb(255 255 255 / 4%) inset,
        -1px 0 0 rgb(255 255 255 / 4%) inset,
        0 2px 8px rgb(130 110 238 / 12%) inset,
        0 -2px 8px rgb(0 0 0 / 20%) inset,
        0 0 24px rgb(75 51 255 / 10%) inset,
        0 0 2px 1px rgb(255 255 255 / 3%) inset,
        2px 4px 12px rgb(0 0 0 / 45%),
        -2px 2px 8px rgb(80 55 180 / 15%),
        0 8px 32px rgb(0 0 0 / 35%),
        0 2px 4px rgb(130 110 238 / 10%),
        0 16px 48px rgb(28 20 60 / 25%);

    /* Jade */
    --n3d-inner-glass-typ-3-jdk: 
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 -1px 0 rgb(0 0 0 / 25%) inset,
        1px 0 0 rgb(255 255 255 / 4%) inset,
        -1px 0 0 rgb(255 255 255 / 4%) inset,
        0 2px 8px rgb(70 200 165 / 12%) inset,
        0 -2px 8px rgb(0 0 0 / 20%) inset,
        0 0 24px rgb(0 189 138 / 10%) inset,
        0 0 2px 1px rgb(255 255 255 / 3%) inset,
        2px 4px 12px rgb(0 0 0 / 45%),
        -2px 2px 8px rgb(30 120 90 / 15%),
        0 8px 32px rgb(0 0 0 / 35%),
        0 2px 4px rgb(70 200 165 / 10%),
        0 16px 48px rgb(10 40 30 / 25%);

    /* ================================================================
    ELEVATION SHADOWS 
    ================================================================ */

    /* — Neutral — */
    --n3d-shadow-xs: 2px 2px 4px rgba(100, 100, 110, 0.08), -1px -1px 2px rgb(120 115 130 / 6%);
    --n3d-shadow-sm: 4px 4px 8px rgba(100, 100, 110, 0.10), -1px -1px 2px rgb(120 115 130 / 8%);
    --n3d-shadow-md: 8px 8px 14px rgba(100, 100, 110, 0.12), -1px -1px 3px rgb(120 115 130 / 10%);
    --n3d-shadow-lg: 12px 12px 20px rgba(100, 100, 110, 0.13), -2px -2px 3px rgb(120 115 130 / 12%);
    --n3d-shadow-xl: 16px 16px 25px rgba(100, 100, 110, 0.14), -2px -2px 4px rgb(120 115 130 / 13%);
    --n3d-shadow-2xl: 20px 20px 30px rgba(100, 100, 110, 0.15), -2px -2px 4px rgb(120 115 130 / 14%);

    /* — Purple — */
    --n3d-shadow-xs-ppk: 2px 2px 4px rgba(124, 98, 208, 0.08), -1px -1px 2px rgb(139 105 238 / 6%);
    --n3d-shadow-sm-ppk: 4px 4px 8px rgba(124, 98, 208, 0.10), -1px -1px 2px rgb(139 105 238 / 8%);
    --n3d-shadow-md-ppk: 8px 8px 14px rgba(124, 98, 208, 0.12), -1px -1px 3px rgb(139 105 238 / 10%);
    --n3d-shadow-lg-ppk: 12px 12px 20px rgba(124, 98, 208, 0.13), -2px -2px 3px rgb(139 105 238 / 12%);
    --n3d-shadow-xl-ppk: 16px 16px 25px rgba(124, 98, 208, 0.14), -2px -2px 4px rgb(139 105 238 / 13%);
    --n3d-shadow-2xl-ppk: 20px 20px 30px rgba(124, 98, 208, 0.15), -2px -2px 4px rgb(139 105 238 / 14%);

    /* — Lime — */
    --n3d-shadow-xs-lmk: 2px 2px 4px rgba(140, 200, 75, 0.08), -1px -1px 2px rgb(160 230 80 / 6%);
    --n3d-shadow-sm-lmk: 4px 4px 8px rgba(140, 200, 75, 0.10), -1px -1px 2px rgb(160 230 80 / 8%);
    --n3d-shadow-md-lmk: 8px 8px 14px rgba(140, 200, 75, 0.12), -1px -1px 3px rgb(160 230 80 / 10%);
    --n3d-shadow-lg-lmk: 12px 12px 20px rgba(140, 200, 75, 0.13), -2px -2px 3px rgb(160 230 80 / 12%);
    --n3d-shadow-xl-lmk: 16px 16px 25px rgba(140, 200, 75, 0.14), -2px -2px 4px rgb(160 230 80 / 13%);
    --n3d-shadow-2xl-lmk: 20px 20px 30px rgba(140, 200, 75, 0.15), -2px -2px 4px rgb(160 230 80 / 14%);

    /* — Indigo — */
    --n3d-shadow-xs-idk: 2px 2px 4px rgba(115, 95, 210, 0.08), -1px -1px 2px rgb(130 110 238 / 6%);
    --n3d-shadow-sm-idk: 4px 4px 8px rgba(115, 95, 210, 0.10), -1px -1px 2px rgb(130 110 238 / 8%);
    --n3d-shadow-md-idk: 8px 8px 14px rgba(115, 95, 210, 0.12), -1px -1px 3px rgb(130 110 238 / 10%);
    --n3d-shadow-lg-idk: 12px 12px 20px rgba(115, 95, 210, 0.13), -2px -2px 3px rgb(130 110 238 / 12%);
    --n3d-shadow-xl-idk: 16px 16px 25px rgba(115, 95, 210, 0.14), -2px -2px 4px rgb(130 110 238 / 13%);
    --n3d-shadow-2xl-idk: 20px 20px 30px rgba(115, 95, 210, 0.15), -2px -2px 4px rgb(130 110 238 / 14%);

    /* — Jade — */
    --n3d-shadow-xs-jdk: 2px 2px 4px rgba(60, 175, 140, 0.08), -1px -1px 2px rgb(70 200 165 / 6%);
    --n3d-shadow-sm-jdk: 4px 4px 8px rgba(60, 175, 140, 0.10), -1px -1px 2px rgb(70 200 165 / 8%);
    --n3d-shadow-md-jdk: 8px 8px 14px rgba(60, 175, 140, 0.12), -1px -1px 3px rgb(70 200 165 / 10%);
    --n3d-shadow-lg-jdk: 12px 12px 20px rgba(60, 175, 140, 0.13), -2px -2px 3px rgb(70 200 165 / 12%);
    --n3d-shadow-xl-jdk: 16px 16px 25px rgba(60, 175, 140, 0.14), -2px -2px 4px rgb(70 200 165 / 13%);
    --n3d-shadow-2xl-jdk: 20px 20px 30px rgba(60, 175, 140, 0.15), -2px -2px 4px rgb(70 200 165 / 14%);

    /* ================================================================
    TINTED SHADOWS 
    ================================================================ */

    /* — Purple — */
    --n3d-shadow-tint-xs-ppk: 0 0 2px rgb(108 57 255 / 30%), 0 1px 1px rgb(230 197 255 / 6%);
    --n3d-shadow-tint-sm-ppk: 0 0 4px rgb(108 57 255 / 38%), 0 1px 2px rgb(230 197 255 / 9%);
    --n3d-shadow-tint-md-ppk: 0 0 8px rgb(108 57 255 / 45%), 0 2px 4px rgb(230 197 255 / 12%);
    --n3d-shadow-tint-lg-ppk: 0 0 14px rgb(108 57 255 / 52%), 0 3px 6px rgb(230 197 255 / 15%);
    --n3d-shadow-tint-xl-ppk: 0 0 20px rgb(108 57 255 / 58%), 0 4px 8px rgb(230 197 255 / 18%);
    --n3d-shadow-tint-2xl-ppk: 0 0 28px rgb(108 57 255 / 65%), 0 5px 10px rgb(230 197 255 / 21%);

    /* — Lime — */
    --n3d-shadow-tint-xs-lmk: 0 0 2px rgb(144 255 0 / 30%), 0 1px 1px rgb(215 255 170 / 6%);
    --n3d-shadow-tint-sm-lmk: 0 0 4px rgb(144 255 0 / 38%), 0 1px 2px rgb(215 255 170 / 9%);
    --n3d-shadow-tint-md-lmk: 0 0 8px rgb(144 255 0 / 45%), 0 2px 4px rgb(215 255 170 / 12%);
    --n3d-shadow-tint-lg-lmk: 0 0 14px rgb(144 255 0 / 52%), 0 3px 6px rgb(215 255 170 / 15%);
    --n3d-shadow-tint-xl-lmk: 0 0 20px rgb(144 255 0 / 58%), 0 4px 8px rgb(215 255 170 / 18%);
    --n3d-shadow-tint-2xl-lmk: 0 0 28px rgb(144 255 0 / 65%), 0 5px 10px rgb(215 255 170 / 21%);

    /* — Indigo — */
    --n3d-shadow-tint-xs-idk: 0 0 2px rgb(75 51 255 / 30%), 0 1px 1px rgb(210 200 255 / 6%);
    --n3d-shadow-tint-sm-idk: 0 0 4px rgb(75 51 255 / 38%), 0 1px 2px rgb(210 200 255 / 9%);
    --n3d-shadow-tint-md-idk: 0 0 8px rgb(75 51 255 / 45%), 0 2px 4px rgb(210 200 255 / 12%);
    --n3d-shadow-tint-lg-idk: 0 0 14px rgb(75 51 255 / 52%), 0 3px 6px rgb(210 200 255 / 15%);
    --n3d-shadow-tint-xl-idk: 0 0 20px rgb(75 51 255 / 58%), 0 4px 8px rgb(210 200 255 / 18%);
    --n3d-shadow-tint-2xl-idk: 0 0 28px rgb(75 51 255 / 65%), 0 5px 10px rgb(210 200 255 / 21%);

    /* — Jade — */
    --n3d-shadow-tint-xs-jdk: 0 0 2px rgb(0 189 138 / 30%), 0 1px 1px rgb(170 240 218 / 6%);
    --n3d-shadow-tint-sm-jdk: 0 0 4px rgb(0 189 138 / 38%), 0 1px 2px rgb(170 240 218 / 9%);
    --n3d-shadow-tint-md-jdk: 0 0 8px rgb(0 189 138 / 45%), 0 2px 4px rgb(170 240 218 / 12%);
    --n3d-shadow-tint-lg-jdk: 0 0 14px rgb(0 189 138 / 52%), 0 3px 6px rgb(170 240 218 / 15%);
    --n3d-shadow-tint-xl-jdk: 0 0 20px rgb(0 189 138 / 58%), 0 4px 8px rgb(170 240 218 / 18%);
    --n3d-shadow-tint-2xl-jdk: 0 0 28px rgb(0 189 138 / 65%), 0 5px 10px rgb(170 240 218 / 21%);

    /* ================================================================
    STACKED SHADOWS
    ================================================================ */

    /* — Purple — */
    --n3d-shadow-stack-xs-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.25),
        2px 2px 0 rgba(139, 105, 238, 0.18);

    --n3d-shadow-stack-sm-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.30),
        2px 2px 0 rgba(139, 105, 238, 0.22),
        3px 3px 0 rgba(139, 105, 238, 0.15);

    --n3d-shadow-stack-md-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.35),
        2px 2px 0 rgba(139, 105, 238, 0.28),
        4px 4px 0 rgba(139, 105, 238, 0.20),
        6px 6px 0 rgba(139, 105, 238, 0.12);

    --n3d-shadow-stack-lg-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.40),
        3px 3px 0 rgba(139, 105, 238, 0.30),
        6px 6px 0 rgba(139, 105, 238, 0.20),
        9px 9px 0 rgba(139, 105, 238, 0.10);

    --n3d-shadow-stack-xl-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.45),
        3px 3px 0 rgba(139, 105, 238, 0.35),
        6px 6px 0 rgba(139, 105, 238, 0.25),
        10px 10px 0 rgba(139, 105, 238, 0.15),
        14px 14px 0 rgba(139, 105, 238, 0.08);

    --n3d-shadow-stack-2xl-ppk: 
        1px 1px 0 rgba(139, 105, 238, 0.50),
        4px 4px 0 rgba(139, 105, 238, 0.38),
        8px 8px 0 rgba(139, 105, 238, 0.26),
        12px 12px 0 rgba(139, 105, 238, 0.16),
        16px 16px 0 rgba(139, 105, 238, 0.08);

    /* — Lime — */
    --n3d-shadow-stack-xs-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.25),
        2px 2px 0 rgba(160, 230, 80, 0.18);

    --n3d-shadow-stack-sm-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.30),
        2px 2px 0 rgba(160, 230, 80, 0.22),
        3px 3px 0 rgba(160, 230, 80, 0.15);

    --n3d-shadow-stack-md-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.35),
        2px 2px 0 rgba(160, 230, 80, 0.28),
        4px 4px 0 rgba(160, 230, 80, 0.20),
        6px 6px 0 rgba(160, 230, 80, 0.12);

    --n3d-shadow-stack-lg-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.40),
        3px 3px 0 rgba(160, 230, 80, 0.30),
        6px 6px 0 rgba(160, 230, 80, 0.20),
        9px 9px 0 rgba(160, 230, 80, 0.10);

    --n3d-shadow-stack-xl-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.45),
        3px 3px 0 rgba(160, 230, 80, 0.35),
        6px 6px 0 rgba(160, 230, 80, 0.25),
        10px 10px 0 rgba(160, 230, 80, 0.15),
        14px 14px 0 rgba(160, 230, 80, 0.08);

    --n3d-shadow-stack-2xl-lmk: 
        1px 1px 0 rgba(160, 230, 80, 0.50),
        4px 4px 0 rgba(160, 230, 80, 0.38),
        8px 8px 0 rgba(160, 230, 80, 0.26),
        12px 12px 0 rgba(160, 230, 80, 0.16),
        16px 16px 0 rgba(160, 230, 80, 0.08);

    /* — Indigo — */
    --n3d-shadow-stack-xs-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.25),
        2px 2px 0 rgba(130, 110, 238, 0.18);

    --n3d-shadow-stack-sm-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.30),
        2px 2px 0 rgba(130, 110, 238, 0.22),
        3px 3px 0 rgba(130, 110, 238, 0.15);

    --n3d-shadow-stack-md-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.35),
        2px 2px 0 rgba(130, 110, 238, 0.28),
        4px 4px 0 rgba(130, 110, 238, 0.20),
        6px 6px 0 rgba(130, 110, 238, 0.12);

    --n3d-shadow-stack-lg-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.40),
        3px 3px 0 rgba(130, 110, 238, 0.30),
        6px 6px 0 rgba(130, 110, 238, 0.20),
        9px 9px 0 rgba(130, 110, 238, 0.10);

    --n3d-shadow-stack-xl-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.45),
        3px 3px 0 rgba(130, 110, 238, 0.35),
        6px 6px 0 rgba(130, 110, 238, 0.25),
        10px 10px 0 rgba(130, 110, 238, 0.15),
        14px 14px 0 rgba(130, 110, 238, 0.08);

    --n3d-shadow-stack-2xl-idk: 
        1px 1px 0 rgba(130, 110, 238, 0.50),
        4px 4px 0 rgba(130, 110, 238, 0.38),
        8px 8px 0 rgba(130, 110, 238, 0.26),
        12px 12px 0 rgba(130, 110, 238, 0.16),
        16px 16px 0 rgba(130, 110, 238, 0.08);

    /* — Jade — */
    --n3d-shadow-stack-xs-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.25),
        2px 2px 0 rgba(70, 200, 165, 0.18);

    --n3d-shadow-stack-sm-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.30),
        2px 2px 0 rgba(70, 200, 165, 0.22),
        3px 3px 0 rgba(70, 200, 165, 0.15);

    --n3d-shadow-stack-md-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.35),
        2px 2px 0 rgba(70, 200, 165, 0.28),
        4px 4px 0 rgba(70, 200, 165, 0.20),
        6px 6px 0 rgba(70, 200, 165, 0.12);

    --n3d-shadow-stack-lg-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.40),
        3px 3px 0 rgba(70, 200, 165, 0.30),
        6px 6px 0 rgba(70, 200, 165, 0.20),
        9px 9px 0 rgba(70, 200, 165, 0.10);

    --n3d-shadow-stack-xl-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.45),
        3px 3px 0 rgba(70, 200, 165, 0.35),
        6px 6px 0 rgba(70, 200, 165, 0.25),
        10px 10px 0 rgba(70, 200, 165, 0.15),
        14px 14px 0 rgba(70, 200, 165, 0.08);

    --n3d-shadow-stack-2xl-jdk: 
        1px 1px 0 rgba(70, 200, 165, 0.50),
        4px 4px 0 rgba(70, 200, 165, 0.38),
        8px 8px 0 rgba(70, 200, 165, 0.26),
        12px 12px 0 rgba(70, 200, 165, 0.16),
        16px 16px 0 rgba(70, 200, 165, 0.08);

    /* ================================================================
    INNER DIMENSION SHADOWS
    ================================================================ */

    /* — Neutral — */
    --n3d-shadow-inner-xs: 
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(120, 115, 130, 0.08),
        inset 2px 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(120, 115, 130, 0.12);

    --n3d-shadow-inner-sm: 
        3px 3px 6px rgba(0, 0, 0, 0.45),
        -1px -1px 3px rgba(120, 115, 130, 0.10),
        inset 3px 3px 6px rgba(0, 0, 0, 0.50),
        inset -2px -2px 4px rgba(120, 115, 130, 0.15);

    --n3d-shadow-inner-md: 
        5px 5px 10px rgba(0, 0, 0, 0.50),
        -2px -2px 4px rgba(120, 115, 130, 0.12),
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -3px -3px 5px rgba(120, 115, 130, 0.20);

    --n3d-shadow-inner-lg: 
        8px 8px 16px rgba(0, 0, 0, 0.55),
        -3px -3px 6px rgba(120, 115, 130, 0.15),
        inset 5px 5px 10px rgba(0, 0, 0, 0.60),
        inset -4px -4px 6px rgba(120, 115, 130, 0.25);

    --n3d-shadow-inner-xl: 
        12px 12px 22px rgba(0, 0, 0, 0.60),
        -4px -4px 8px rgba(120, 115, 130, 0.18),
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -5px -5px 8px rgba(120, 115, 130, 0.30);

    --n3d-shadow-inner-2xl: 
        16px 16px 30px rgba(0, 0, 0, 0.65),
        -5px -5px 10px rgba(120, 115, 130, 0.22),
        inset 8px 8px 16px rgba(0, 0, 0, 0.70),
        inset -6px -6px 10px rgba(120, 115, 130, 0.38);

    /* — Purple — */
    --n3d-shadow-inner-xs-ppk: 
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(139, 105, 238, 0.08),
        inset 2px 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(139, 105, 238, 0.12);

    --n3d-shadow-inner-sm-ppk: 
        3px 3px 6px rgba(0, 0, 0, 0.45),
        -1px -1px 3px rgba(139, 105, 238, 0.10),
        inset 3px 3px 6px rgba(0, 0, 0, 0.50),
        inset -2px -2px 4px rgba(139, 105, 238, 0.15);

    --n3d-shadow-inner-md-ppk: 
        5px 5px 10px rgba(0, 0, 0, 0.50),
        -2px -2px 4px rgba(139, 105, 238, 0.12),
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -3px -3px 5px rgba(139, 105, 238, 0.20);

    --n3d-shadow-inner-lg-ppk: 
        8px 8px 16px rgba(0, 0, 0, 0.55),
        -3px -3px 6px rgba(139, 105, 238, 0.15),
        inset 5px 5px 10px rgba(0, 0, 0, 0.60),
        inset -4px -4px 6px rgba(139, 105, 238, 0.25);

    --n3d-shadow-inner-xl-ppk: 
        12px 12px 22px rgba(0, 0, 0, 0.60),
        -4px -4px 8px rgba(139, 105, 238, 0.18),
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -5px -5px 8px rgba(139, 105, 238, 0.30);

    --n3d-shadow-inner-2xl-ppk: 
        16px 16px 30px rgba(0, 0, 0, 0.65),
        -5px -5px 10px rgba(139, 105, 238, 0.22),
        inset 8px 8px 16px rgba(0, 0, 0, 0.70),
        inset -6px -6px 10px rgba(139, 105, 238, 0.38);

    /* — Lime — */
    --n3d-shadow-inner-xs-lmk: 
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(160, 230, 80, 0.08),
        inset 2px 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(160, 230, 80, 0.12);

    --n3d-shadow-inner-sm-lmk: 
        3px 3px 6px rgba(0, 0, 0, 0.45),
        -1px -1px 3px rgba(160, 230, 80, 0.10),
        inset 3px 3px 6px rgba(0, 0, 0, 0.50),
        inset -2px -2px 4px rgba(160, 230, 80, 0.15);

    --n3d-shadow-inner-md-lmk: 
        5px 5px 10px rgba(0, 0, 0, 0.50),
        -2px -2px 4px rgba(160, 230, 80, 0.12),
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -3px -3px 5px rgba(160, 230, 80, 0.20);

    --n3d-shadow-inner-lg-lmk: 
        8px 8px 16px rgba(0, 0, 0, 0.55),
        -3px -3px 6px rgba(160, 230, 80, 0.15),
        inset 5px 5px 10px rgba(0, 0, 0, 0.60),
        inset -4px -4px 6px rgba(160, 230, 80, 0.25);

    --n3d-shadow-inner-xl-lmk: 
        12px 12px 22px rgba(0, 0, 0, 0.60),
        -4px -4px 8px rgba(160, 230, 80, 0.18),
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -5px -5px 8px rgba(160, 230, 80, 0.30);

    --n3d-shadow-inner-2xl-lmk: 
        16px 16px 30px rgba(0, 0, 0, 0.65),
        -5px -5px 10px rgba(160, 230, 80, 0.22),
        inset 8px 8px 16px rgba(0, 0, 0, 0.70),
        inset -6px -6px 10px rgba(160, 230, 80, 0.38);

    /* — Indigo — */
    --n3d-shadow-inner-xs-idk: 
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(130, 110, 238, 0.08),
        inset 2px 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(130, 110, 238, 0.12);

    --n3d-shadow-inner-sm-idk: 
        3px 3px 6px rgba(0, 0, 0, 0.45),
        -1px -1px 3px rgba(130, 110, 238, 0.10),
        inset 3px 3px 6px rgba(0, 0, 0, 0.50),
        inset -2px -2px 4px rgba(130, 110, 238, 0.15);

    --n3d-shadow-inner-md-idk: 
        5px 5px 10px rgba(0, 0, 0, 0.50),
        -2px -2px 4px rgba(130, 110, 238, 0.12),
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -3px -3px 5px rgba(130, 110, 238, 0.20);

    --n3d-shadow-inner-lg-idk: 
        8px 8px 16px rgba(0, 0, 0, 0.55),
        -3px -3px 6px rgba(130, 110, 238, 0.15),
        inset 5px 5px 10px rgba(0, 0, 0, 0.60),
        inset -4px -4px 6px rgba(130, 110, 238, 0.25);

    --n3d-shadow-inner-xl-idk: 
        12px 12px 22px rgba(0, 0, 0, 0.60),
        -4px -4px 8px rgba(130, 110, 238, 0.18),
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -5px -5px 8px rgba(130, 110, 238, 0.30);

    --n3d-shadow-inner-2xl-idk: 
        16px 16px 30px rgba(0, 0, 0, 0.65),
        -5px -5px 10px rgba(130, 110, 238, 0.22),
        inset 8px 8px 16px rgba(0, 0, 0, 0.70),
        inset -6px -6px 10px rgba(130, 110, 238, 0.38);

    /* — Jade — */
    --n3d-shadow-inner-xs-jdk: 
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(70, 200, 165, 0.08),
        inset 2px 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(70, 200, 165, 0.12);

    --n3d-shadow-inner-sm-jdk: 
        3px 3px 6px rgba(0, 0, 0, 0.45),
        -1px -1px 3px rgba(70, 200, 165, 0.10),
        inset 3px 3px 6px rgba(0, 0, 0, 0.50),
        inset -2px -2px 4px rgba(70, 200, 165, 0.15);

    --n3d-shadow-inner-md-jdk: 
        5px 5px 10px rgba(0, 0, 0, 0.50),
        -2px -2px 4px rgba(70, 200, 165, 0.12),
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -3px -3px 5px rgba(70, 200, 165, 0.20);

    --n3d-shadow-inner-lg-jdk: 
        8px 8px 16px rgba(0, 0, 0, 0.55),
        -3px -3px 6px rgba(70, 200, 165, 0.15),
        inset 5px 5px 10px rgba(0, 0, 0, 0.60),
        inset -4px -4px 6px rgba(70, 200, 165, 0.25);

    --n3d-shadow-inner-xl-jdk: 
        12px 12px 22px rgba(0, 0, 0, 0.60),
        -4px -4px 8px rgba(70, 200, 165, 0.18),
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -5px -5px 8px rgba(70, 200, 165, 0.30);

    --n3d-shadow-inner-2xl-jdk: 
        16px 16px 30px rgba(0, 0, 0, 0.65),
        -5px -5px 10px rgba(70, 200, 165, 0.22),
        inset 8px 8px 16px rgba(0, 0, 0, 0.70),
        inset -6px -6px 10px rgba(70, 200, 165, 0.38);

    /* ═══════════════════════════════════
	   BACKGROUND ORBS — per bulb state
	   wall = SVG background layer
	   wgl  = WebGL mesh gradient layer
	═══════════════════════════════════ */

	/* ── State 0: OFF (default) ── */
	--n3d-wall-orb-a-off: #353535;
	--n3d-wall-orb-b-off: #424242;
	--n3d-wgl-orb-a-off:  #2f2f2f;
	--n3d-wgl-orb-b-off:  #212121;

	/* ── State 1: WARM ── */
	--n3d-wall-orb-a-wrm: #34280b;
	--n3d-wall-orb-b-wrm: #fb6b1d;
	--n3d-wgl-orb-a-wrm:  #e2a600;
	--n3d-wgl-orb-b-wrm:  #3d1c0c;

	/* ── State 2: COOL ── */
	--n3d-wall-orb-a-cld: #213057;
	--n3d-wall-orb-b-cld: #00ccff;
	--n3d-wgl-orb-a-cld:  #1b52de;
	--n3d-wgl-orb-b-cld:  #182a41;

	/* ── State 3: NEON ── */
	--n3d-wall-orb-a-neo: #811bff;
	--n3d-wall-orb-b-neo: #33ed00;
	--n3d-wgl-orb-a-neo:  #00ff77;
	--n3d-wgl-orb-b-neo:  #4d23e3;

	/* ── Active orbs (JS sets these) ── */
	--n3d-bg-wall-a: var(--n3d-wall-orb-a-off);
	--n3d-bg-wall-b: var(--n3d-wall-orb-b-off);
	--n3d-bg-wgl-a:  var(--n3d-wgl-orb-a-off);
	--n3d-bg-wgl-b:  var(--n3d-wgl-orb-b-off);

    /* ═══════════════════════════════════
    UI PALETTE — 11 colors per bulb state
    Use anywhere: borders, text, gradients, bg
    ═══════════════════════════════════ */

	/* ── State 0: OFF ── */
	--n3d-ui-a-off: #4200ff;
	--n3d-ui-b-off: #90ff00;
	--n3d-ui-c-off: #4b33ff;
	--n3d-ui-d-off: #00bd8a;
	--n3d-ui-e-off: #9a9a9a;
	--n3d-ui-f-off: #5ce1e6;
	--n3d-ui-g-off: #73cc00;
	--n3d-ui-h-off: #3400cc;
	--n3d-ui-i-off: #00e5a0;
	--n3d-ui-j-off: #b8ff3c;
	--n3d-ui-k-off: #6341ff;
	--n3d-ui-glow-off: rgba(66,0,255,0.12);

	/* ── State 1: WARM ── */
	--n3d-ui-a-wrm: #e2a600;
	--n3d-ui-b-wrm: #fb6b1d;
	--n3d-ui-c-wrm: #cc7a00;
	--n3d-ui-d-wrm: #ff9e40;
	--n3d-ui-e-wrm: #8b5e1a;
	--n3d-ui-f-wrm: #f0a030;
	--n3d-ui-g-wrm: #dfa71a;
	--n3d-ui-h-wrm: #a05800;
	--n3d-ui-i-wrm: #ffb848;
	--n3d-ui-j-wrm: #ffd060;
	--n3d-ui-k-wrm: #704010;
	--n3d-ui-glow-wrm: rgba(223,167,26,0.18);

	/* ── State 2: COOL ── */
	--n3d-ui-a-cld: #1658ff;
	--n3d-ui-b-cld: #00ccff;
	--n3d-ui-c-cld: #0040b0;
	--n3d-ui-d-cld: #60b8ff;
	--n3d-ui-e-cld: #1a3a6a;
	--n3d-ui-f-cld: #4a9eff;
	--n3d-ui-g-cld: #0052af;
	--n3d-ui-h-cld: #003080;
	--n3d-ui-i-cld: #80d0ff;
	--n3d-ui-j-cld: #2080e0;
	--n3d-ui-k-cld: #102850;
	--n3d-ui-glow-cld: rgba(22,88,255,0.18);

	/* ── State 3: NEON ── */
	--n3d-ui-a-neo: #4200ff;
	--n3d-ui-b-neo: #90ff00;
	--n3d-ui-c-neo: #4b33ff;
	--n3d-ui-d-neo: #00bd8a;
	--n3d-ui-e-neo: #9a9a9a;
	--n3d-ui-f-neo: #5ce1e6;
	--n3d-ui-g-neo: #73cc00;
	--n3d-ui-h-neo: #3400cc;
	--n3d-ui-i-neo: #00e5a0;
	--n3d-ui-j-neo: #b8ff3c;
	--n3d-ui-k-neo: #6341ff;
	--n3d-ui-glow-neo: rgba(66,0,255,0.15);

	/* ── Active (JS sets these) ── */
	--n3d-ui-a: var(--n3d-ui-a-off);
	--n3d-ui-b: var(--n3d-ui-b-off);
	--n3d-ui-c: var(--n3d-ui-c-off);
	--n3d-ui-d: var(--n3d-ui-d-off);
	--n3d-ui-e: var(--n3d-ui-e-off);
	--n3d-ui-f: var(--n3d-ui-f-off);
	--n3d-ui-g: var(--n3d-ui-g-off);
	--n3d-ui-h: var(--n3d-ui-h-off);
	--n3d-ui-i: var(--n3d-ui-i-off);
	--n3d-ui-j: var(--n3d-ui-j-off);
	--n3d-ui-k: var(--n3d-ui-k-off);
	--n3d-ui-glow: var(--n3d-ui-glow-off);

    /* ================================================================
    OVERLAYS — neutral + tinted variants
    ================================================================ */

    /* Neutral */
    --n3d-overlay-light: rgb(180 180 190 / 32%);
    --n3d-overlay-medium: rgb(50 48 55 / 65%);
    --n3d-overlay-dark: rgb(20 18 25 / 82%);
    --n3d-overlay-darker: rgb(10 8 15 / 77%);
    --n3d-overlay-blur: rgb(0 0 0 / 14%);
    --n3d-overlay-scrim: linear-gradient(to top, rgb(60 58 70 / 83%) 0%, rgb(140 138 150 / 15%) 100%);

    /* Purple */
    --n3d-overlay-light-ppk: rgb(166 141 255 / 32%);
    --n3d-overlay-medium-ppk: rgb(47 35 95 / 65%);
    --n3d-overlay-dark-ppk: rgb(24 16 59 / 82%);
    --n3d-overlay-darker-ppk: rgb(12 4 35 / 77%);
    --n3d-overlay-blur-ppk: rgb(88 22 255 / 14%);
    --n3d-overlay-scrim-ppk: linear-gradient(to top, rgb(65 45 128 / 83%) 0%, rgb(119 83 255 / 15%) 100%);

    /* Lime */
    --n3d-overlay-light-lmk: rgb(180 245 120 / 32%);
    --n3d-overlay-medium-lmk: rgb(55 85 25 / 65%);
    --n3d-overlay-dark-lmk: rgb(25 50 10 / 82%);
    --n3d-overlay-darker-lmk: rgb(15 35 4 / 77%);
    --n3d-overlay-blur-lmk: rgb(144 255 0 / 14%);
    --n3d-overlay-scrim-lmk: linear-gradient(to top, rgb(70 110 30 / 83%) 0%, rgb(144 255 0 / 15%) 100%);

    /* Indigo */
    --n3d-overlay-light-idk: rgb(155 140 255 / 32%);
    --n3d-overlay-medium-idk: rgb(42 35 95 / 65%);
    --n3d-overlay-dark-idk: rgb(22 16 59 / 82%);
    --n3d-overlay-darker-idk: rgb(10 6 35 / 77%);
    --n3d-overlay-blur-idk: rgb(75 51 255 / 14%);
    --n3d-overlay-scrim-idk: linear-gradient(to top, rgb(55 42 128 / 83%) 0%, rgb(100 80 255 / 15%) 100%);

    /* Jade */
    --n3d-overlay-light-jdk: rgb(100 220 185 / 32%);
    --n3d-overlay-medium-jdk: rgb(20 75 58 / 65%);
    --n3d-overlay-dark-jdk: rgb(8 45 35 / 82%);
    --n3d-overlay-darker-jdk: rgb(4 28 20 / 77%);
    --n3d-overlay-blur-jdk: rgb(0 189 138 / 14%);
    --n3d-overlay-scrim-jdk: linear-gradient(to top, rgb(20 95 72 / 83%) 0%, rgb(0 189 138 / 15%) 100%);

}