/* ═══════════════════════════════════════════════════
   COLATS Liquid Glass v4
   Premium dark glassmorphism design system.
   Black / White / Purple primary identity.
   Built on color-mix() multi-layer shadows,
   SVG displacement filter, and :has() theme switcher.
   Font: DM Sans.
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap');

/* ─── Theme Variables ─── */

/* Dark (deep black + purple) */
:root,
[data-theme="dark"] {
    /* Core surfaces */
    --c-bg: #09090b;
    --c-surface: #111114;
    --c-surface-2: #17171c;
    --c-glass: #c9c3d6;
    --c-light: #ffffff;
    --c-dark: #000000;
    --c-content: #f5f3ff;
    --c-content-muted: #b6b0c8;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.15);
    --c-input-bg: rgba(255, 255, 255, 0.04);
    --c-surface-text: #ffffff;

    /* Brand */
    --c-action: #8b5cf6;
    --c-action-2: #a78bfa;
    --c-accent: #8b5cf6;
    --c-accent-rgb: 139, 92, 246;

    /* Semantic */
    --c-success: #22c55e;
    --c-success-rgb: 34, 197, 94;
    --c-error: #ef4444;
    --c-error-rgb: 239, 68, 68;
    --c-warning: #eab308;
    --c-warning-rgb: 234, 179, 8;

    /* Glass system */
    --glass-reflex-dark: 1.8;
    --glass-reflex-light: 0.65;
    --saturation: 165%;

    /* Decorative */
    --c-orb-1: rgba(59, 130, 246, 0.12);
    --c-orb-2: rgba(236, 72, 153, 0.10);
    --c-shimmer: rgba(255, 255, 255, 0.12);

    /* Legacy aliases (--lg-* used in blade templates) */
    --lg-bg: #09090b;
    --lg-bg-elevated: #111114;
    --lg-text: #f5f3ff;
    --lg-text-secondary: #b6b0c8;
    --lg-text-muted: #6b6580;
    --lg-accent: #8b5cf6;
    --lg-accent-rgb: 139, 92, 246;
    --lg-accent-glow: rgba(139, 92, 246, 0.3);
    --lg-accent-soft: rgba(139, 92, 246, 0.08);
    --lg-success: #22c55e;
    --lg-error: #ef4444;
    --lg-warning: #eab308;
    --lg-glass-bg: rgba(255, 255, 255, 0.03);
    --lg-glass-border: rgba(255, 255, 255, 0.06);
    --lg-overlay: rgba(0, 0, 0, 0.65);
    --lg-gradient-hero: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    --lg-gradient-accent: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.03));
}

/* Light (clean white + purple accent) */
body:has(input[value="light"]:checked),
[data-theme="light"] {
    /* Core surfaces */
    --c-bg: #f8f7fc;
    --c-surface: #ffffff;
    --c-surface-2: #f0eef5;
    --c-glass: #d8d4e2;
    --c-light: #ffffff;
    --c-dark: #2a2540;
    --c-content: #1a1625;
    --c-content-muted: #6b617a;
    --c-border: rgba(0, 0, 0, 0.10);
    --c-border-strong: rgba(0, 0, 0, 0.18);
    --c-input-bg: rgba(0, 0, 0, 0.03);
    --c-surface-text: #1a1625;

    /* Brand */
    --c-action: #7c3aed;
    --c-action-2: #6d28d9;
    --c-accent: #7c3aed;
    --c-accent-rgb: 124, 58, 237;

    /* Semantic */
    --c-success: #16a34a;
    --c-success-rgb: 22, 163, 74;
    --c-error: #dc2626;
    --c-error-rgb: 220, 38, 38;
    --c-warning: #ca8a04;
    --c-warning-rgb: 202, 138, 4;

    /* Glass system — light mode uses darker glass for visibility */
    --glass-reflex-dark: 0.8;
    --glass-reflex-light: 0.4;
    --saturation: 130%;

    /* Decorative */
    --c-orb-1: rgba(124, 58, 237, 0.08);
    --c-orb-2: rgba(167, 139, 250, 0.06);
    --c-shimmer: rgba(0, 0, 0, 0.06);

    /* Legacy aliases */
    --lg-bg: #f8f7fc;
    --lg-bg-elevated: #ffffff;
    --lg-text: #1a1625;
    --lg-text-secondary: #6b617a;
    --lg-text-muted: #9890a8;
    --lg-accent: #7c3aed;
    --lg-accent-rgb: 124, 58, 237;
    --lg-accent-glow: rgba(124, 58, 237, 0.2);
    --lg-accent-soft: rgba(124, 58, 237, 0.08);
    --lg-success: #16a34a;
    --lg-error: #dc2626;
    --lg-warning: #ca8a04;
    --lg-glass-bg: rgba(0, 0, 0, 0.03);
    --lg-glass-border: rgba(0, 0, 0, 0.10);
    --lg-overlay: rgba(0, 0, 0, 0.35);
    --lg-gradient-hero: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
    --lg-gradient-accent: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.03));
}

/* Soft (smoky charcoal + lavender purple) */
body:has(input[value="soft"]:checked),
[data-theme="soft"] {
    /* Core surfaces */
    --c-bg: #121218;
    --c-surface: #1a1a22;
    --c-surface-2: #22222e;
    --c-glass: #c0bcd0;
    --c-light: #ffffff;
    --c-dark: #000000;
    --c-content: #ede9f8;
    --c-content-muted: #a09ab4;
    --c-border: rgba(255, 255, 255, 0.07);
    --c-border-strong: rgba(255, 255, 255, 0.14);
    --c-input-bg: rgba(255, 255, 255, 0.04);
    --c-surface-text: #ffffff;

    /* Brand */
    --c-action: #a78bfa;
    --c-action-2: #c4b5fd;
    --c-accent: #a78bfa;
    --c-accent-rgb: 167, 139, 250;

    /* Semantic */
    --c-success: #22c55e;
    --c-success-rgb: 34, 197, 94;
    --c-error: #ef4444;
    --c-error-rgb: 239, 68, 68;
    --c-warning: #eab308;
    --c-warning-rgb: 234, 179, 8;

    /* Glass system */
    --glass-reflex-dark: 1.5;
    --glass-reflex-light: 0.8;
    --saturation: 180%;

    /* Decorative */
    --c-orb-1: rgba(167, 139, 250, 0.10);
    --c-orb-2: rgba(196, 181, 253, 0.08);
    --c-shimmer: rgba(255, 255, 255, 0.10);

    /* Legacy aliases */
    --lg-bg: #121218;
    --lg-bg-elevated: #1a1a22;
    --lg-text: #ede9f8;
    --lg-text-secondary: #a09ab4;
    --lg-text-muted: #6b6580;
    --lg-accent: #a78bfa;
    --lg-accent-rgb: 167, 139, 250;
    --lg-accent-glow: rgba(167, 139, 250, 0.3);
    --lg-accent-soft: rgba(167, 139, 250, 0.08);
    --lg-success: #22c55e;
    --lg-error: #ef4444;
    --lg-warning: #eab308;
    --lg-glass-bg: rgba(255, 255, 255, 0.04);
    --lg-glass-border: rgba(255, 255, 255, 0.07);
    --lg-overlay: rgba(0, 0, 0, 0.6);
    --lg-gradient-hero: linear-gradient(180deg, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    --lg-gradient-accent: linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0.04));
}

/* Auto: system light → light theme (FOUC prevention when JS disabled) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]), :root[data-theme="auto"] {
        --c-bg: #f8f7fc;
        --c-surface: #ffffff;
        --c-surface-2: #f0eef5;
        --c-glass: #d8d4e2;
        --c-light: #ffffff;
        --c-dark: #2a2540;
        --c-content: #1a1625;
        --c-content-muted: #6b617a;
        --c-border: rgba(0, 0, 0, 0.10);
        --c-border-strong: rgba(0, 0, 0, 0.18);
        --c-input-bg: rgba(0, 0, 0, 0.03);
        --c-surface-text: #1a1625;
        --c-action: #7c3aed;
        --c-action-2: #6d28d9;
        --c-accent: #7c3aed;
        --c-accent-rgb: 124, 58, 237;
        --c-success: #16a34a;
        --c-success-rgb: 22, 163, 74;
        --c-error: #dc2626;
        --c-error-rgb: 220, 38, 38;
        --c-warning: #ca8a04;
        --c-warning-rgb: 202, 138, 4;
        --glass-reflex-dark: 0.8;
        --glass-reflex-light: 0.4;
        --saturation: 130%;
        --c-orb-1: rgba(124, 58, 237, 0.08);
        --c-orb-2: rgba(167, 139, 250, 0.06);
        --c-shimmer: rgba(0, 0, 0, 0.06);
        --lg-bg: #f8f7fc;
        --lg-bg-elevated: #ffffff;
        --lg-text: #1a1625;
        --lg-text-secondary: #6b617a;
        --lg-text-muted: #9890a8;
        --lg-accent: #7c3aed;
        --lg-accent-rgb: 124, 58, 237;
        --lg-accent-glow: rgba(124, 58, 237, 0.2);
        --lg-accent-soft: rgba(124, 58, 237, 0.08);
        --lg-success: #16a34a;
        --lg-error: #dc2626;
        --lg-warning: #ca8a04;
        --lg-glass-bg: rgba(0, 0, 0, 0.03);
        --lg-glass-border: rgba(0, 0, 0, 0.10);
        --lg-overlay: rgba(0, 0, 0, 0.35);
        --lg-gradient-hero: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
        --lg-gradient-accent: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.03));
    }
}

/* ─── Direct body backgrounds per theme ─── */
:root body, [data-theme="dark"] body { background: #09090b; color: #f5f3ff; }
[data-theme="light"] body { background: #f8f7fc; color: #1a1625; }
[data-theme="soft"] body { background: #121218; color: #ede9f8; }

/* ─── Transition Vars ─── */
:root {
    --ease-glass: cubic-bezier(1, 0.0, 0.4, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --dur: 400ms;
    --dur-fast: 200ms;
    --dur-spring: 500ms;
    --rad-sm: 12px;
    --rad-md: 16px;
    --rad-lg: 22px;
    --rad-xl: 28px;
    --rad-pill: 99em;
}

/* ─── Spacing Tokens ─── */
:root {
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1);
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    background: var(--c-bg);
    color: var(--c-content);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), color 400ms cubic-bezier(1, 0.0, 0.4, 1);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   GLASS SHADOW MIXINS
   This is the core liquid glass technique.
   Multi-layer color-mix() inset shadows create
   realistic light refraction on frosted surfaces.
   ═══════════════════════════════════════════════════ */

.glass,
.lg-glass {
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass);
}

/* Elevated glass — stronger refraction */
.glass-elevated {
    background-color: color-mix(in srgb, var(--c-glass) 18%, transparent);
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 12%), transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 95%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 85%), transparent),
        inset -4px -10px 1px -7px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 65%), transparent),
        inset -0.3px -1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent),
        inset -2px 3px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 22%), transparent),
        inset 0px 4px 5px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 22%), transparent),
        inset 2px -8px 1px -5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 2px 8px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 8px 24px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass);
}

/* Glass pill (toggle thumb, active nav) */
.glass-pill {
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass),
        translate var(--dur) var(--ease-glass);
}

/* Subtle glass (inputs, small elements) */
.glass-subtle {
    background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
    backdrop-filter: blur(6px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%), transparent),
        inset 1px 2px 0px -1.5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
        inset -1px -5px 1px -4px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
        inset -0.2px -0.5px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        inset -1px 2px 0px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        inset 0px 2px 3px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        0px 1px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);
    transition:
        background-color var(--dur-fast) var(--ease-glass),
        box-shadow var(--dur-fast) var(--ease-glass),
        border-color var(--dur-fast) var(--ease-glass);
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */

.lg-header {
    position: sticky;
    top: 0;
    z-index: 50;
    isolation: isolate;
    padding: 8px 24px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 6%), transparent);
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent);
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 6%), transparent),
        inset 1px 2px 0px -1.5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
        inset -1px -5px 1px -4px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
        inset -0.2px -0.5px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        inset -1px 2px 0px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        inset 0px 2px 3px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        0px 1px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);
    transition: background-color var(--dur) var(--ease-glass), box-shadow var(--dur) var(--ease-glass);
}

.lg-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 54px;
}

.lg-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--c-content);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.lg-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--rad-sm);
    background: linear-gradient(145deg, var(--c-action), color-mix(in srgb, var(--c-action) 55%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-surface-text);
    font-weight: 900;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--c-action) 30%, transparent);
}

.lg-logo-mark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface-text) 20%, transparent), transparent);
    border-radius: inherit;
}

/* Nav Capsule */
.lg-nav-capsule {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--rad-pill);
    height: 44px;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.lg-nav-link {
    position: relative;
    padding: 0 16px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: var(--rad-pill);
    color: color-mix(in srgb, var(--c-content) 60%, transparent);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color var(--dur-fast);
    z-index: 1;
}

.lg-nav-link:hover {
    color: var(--c-content);
}

.lg-nav-link.active {
    color: var(--c-content);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    font-weight: 600;
}

.lg-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════
   THEME SWITCHER (Sliding Pill)
   ═══════════════════════════════════════════════════ */

.lg-theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 120px;
    height: 44px;
    padding: 4px 4px 6px;
    border-radius: var(--rad-pill);
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* Sliding pill */
.lg-theme-switcher::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    display: block;
    width: 36px;
    height: calc(100% - 10px);
    border-radius: var(--rad-pill);
    z-index: 0;
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass),
        translate var(--dur) var(--ease-glass);
    animation: lg-scale-swap 440ms ease;
}

/* Pill positions */
.lg-theme-switcher[data-active="dark"]::after {
    translate: 0 0;
    transform-origin: right;
}

.lg-theme-switcher[data-active="light"]::after {
    translate: 40px 0;
    transform-origin: left;
}

.lg-theme-switcher[data-active="soft"]::after {
    translate: 80px 0;
    transform-origin: left;
}

@keyframes lg-scale-swap {
    0% { scale: 1 1; }
    50% { scale: 1.15 1; }
    100% { scale: 1 1; }
}

.lg-theme-btn {
    position: relative;
    width: 40px;
    height: 100%;
    border-radius: var(--rad-pill);
    border: none;
    background: transparent;
    color: var(--c-content-muted) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast), scale var(--dur-fast);
    z-index: 1;
}

.lg-theme-btn:hover {
    color: var(--c-action) !important;
    scale: 1.15;
}

.lg-theme-btn.active {
    color: var(--c-action) !important;
    cursor: default;
}

.lg-theme-btn.active:hover {
    scale: 1;
}

.lg-theme-btn svg {
    width: 18px;
    height: 18px;
}

/* Larger variant for dropdowns */
.lg-theme-switcher-lg {
    width: 160px;
    height: 52px;
    padding: 5px 5px 7px;
}
.lg-theme-switcher-lg::after {
    width: 48px;
    height: calc(100% - 12px);
}
.lg-theme-switcher-lg[data-active="light"]::after {
    translate: 52px 0;
}
.lg-theme-switcher-lg[data-active="soft"]::after {
    translate: 104px 0;
}
.lg-theme-switcher-lg .lg-theme-btn {
    width: 52px;
}
.lg-theme-switcher-lg .lg-theme-btn svg {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */

.lg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--rad-pill);
    border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%), transparent);
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-glass),
        box-shadow var(--dur-fast) var(--ease-glass),
        transform var(--dur-fast) var(--ease-glass),
        color var(--dur-fast);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    color: var(--c-content);
}

/* Primary — accent gradient */
.lg-btn-primary {
    background: linear-gradient(150deg, var(--c-action), color-mix(in srgb, var(--c-action) 60%, transparent));
    color: var(--c-surface-text);
    border-color: color-mix(in srgb, var(--c-action) 25%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--c-surface-text) 20%, transparent),
        0 4px 16px color-mix(in srgb, var(--c-action) 25%, transparent);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--c-dark) 20%, transparent);
}

.lg-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--c-surface-text) 30%, transparent),
        0 8px 28px color-mix(in srgb, var(--c-action) 35%, transparent);
}

.lg-btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Secondary — glass */
.lg-btn-secondary {
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.lg-btn-secondary:hover {
    transform: translateY(-2px);
    background-color: color-mix(in srgb, var(--c-glass) 18%, transparent);
}

.lg-btn-secondary:active {
    transform: translateY(0);
}

/* Ghost */
.lg-btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: color-mix(in srgb, var(--c-content) 60%, transparent);
}

.lg-btn-ghost:hover {
    color: var(--c-content);
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent);
}

/* Sizes */
.lg-btn-sm { padding: 6px 14px; font-size: 13px; height: 34px; }
.lg-btn-lg { padding: 14px 32px; font-size: 15px; height: 50px; }

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */

.lg-card {
    position: relative;
    border-radius: var(--rad-lg);
    padding: 24px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass),
        transform var(--dur) var(--ease-glass);
}

.lg-card-hover { cursor: pointer; }

.lg-card-hover:hover {
    transform: translateY(-4px);
    background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 14%), transparent),
        inset 2px 4px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 95%), transparent),
        inset -2px -3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 85%), transparent),
        inset -4px -10px 1px -7px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 65%), transparent),
        inset -0.3px -1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent),
        inset -2px 3px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 24%), transparent),
        inset 0px 4px 5px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 24%), transparent),
        inset 2px -8px 1px -5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 2px 8px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 12px 32px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent);
}

.lg-card-hover:active {
    transform: translateY(-1px);
}

/* Featured accent card */
.lg-card-featured {
    border: 1px solid color-mix(in srgb, var(--c-action) 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent),
        0 0 40px color-mix(in srgb, var(--c-action) 15%, transparent);
}

/* ═══════════════════════════════════════════════════
   SEGMENTED CONTROL
   ═══════════════════════════════════════════════════ */

.lg-segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--rad-pill);
    height: 48px;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.lg-segment-item {
    position: relative;
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: var(--rad-pill);
    color: color-mix(in srgb, var(--c-content) 55%, transparent);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--dur-fast), background-color 0.3s ease, box-shadow 0.3s ease, font-weight 0.15s ease;
    z-index: 1;
    border: none;
    background: transparent;
    white-space: nowrap;
    font-family: "DM Sans", sans-serif;
}

.lg-segment-item:hover {
    color: var(--c-content);
}

.lg-segment-item.active {
    color: var(--c-content);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   ICON BOX
   ═══════════════════════════════════════════════════ */

.lg-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--rad-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--c-action) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-action) 12%, transparent);
    transition: all var(--dur-fast);
}

.lg-icon-box svg {
    width: 22px;
    height: 22px;
    color: var(--c-action);
}

.lg-card-hover:hover .lg-icon-box {
    transform: scale(1.1);
    box-shadow: 0 0 16px color-mix(in srgb, var(--c-action) 25%, transparent);
    background: color-mix(in srgb, var(--c-action) 18%, transparent);
}

/* ═══════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════ */

.lg-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--rad-sm);
    color: var(--c-content);
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    outline: none;
    background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
    backdrop-filter: blur(6px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
    border: 1px solid var(--c-border);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%), transparent),
        inset 1px 2px 0px -1.5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
        inset -1px -5px 1px -4px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
        inset -0.2px -0.5px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        inset -1px 2px 0px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        inset 0px 2px 3px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        0px 1px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);
    transition: background-color var(--dur-fast) var(--ease-glass), box-shadow var(--dur-fast) var(--ease-glass), border-color var(--dur-fast) var(--ease-glass);
}

.lg-input:focus {
    border-color: color-mix(in srgb, var(--c-action) 40%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%), transparent),
        inset 1px 2px 0px -1.5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
        inset -1px -5px 1px -4px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
        inset -0.2px -0.5px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        inset -1px 2px 0px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        inset 0px 2px 3px -1.5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent),
        0px 0px 0px 3px color-mix(in srgb, var(--c-action) 15%, transparent),
        0px 0px 20px color-mix(in srgb, var(--c-action) 15%, transparent),
        0px 1px 3px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent);
}

.lg-input::placeholder {
    color: color-mix(in srgb, var(--c-content) 35%, transparent);
}

/* ═══════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════ */

.lg-sidebar {
    width: 260px;
    min-height: 100vh;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 6%), transparent);
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent);
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
}

.lg-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--rad-sm);
    color: color-mix(in srgb, var(--c-content) 55%, transparent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--dur-fast), background var(--dur-fast);
    border: 1px solid transparent;
}

.lg-sidebar-item:hover {
    color: var(--c-content);
    background: color-mix(in srgb, var(--c-glass) 8%, transparent);
}

.lg-sidebar-item.active {
    color: var(--c-content);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    font-weight: 600;
}

.lg-sidebar-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   SETTINGS ROW & TOGGLE
   ═══════════════════════════════════════════════════ */

.lg-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--rad-md);
    transition: background var(--dur-fast);
}

.lg-settings-row:hover {
    background-color: color-mix(in srgb, var(--c-glass) 10%, transparent);
}

.lg-settings-label { font-size: 14px; font-weight: 500; color: var(--c-content); }
.lg-settings-desc { font-size: 13px; color: color-mix(in srgb, var(--c-content) 50%, transparent); margin-top: 2px; }

/* Toggle */
.lg-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: var(--rad-pill);
    cursor: pointer;
    transition: all var(--dur) var(--ease-glass);
}

.lg-toggle .lg-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-content) 40%, transparent);
    transition: all var(--dur-spring) var(--ease-spring);
}

.lg-toggle.active {
    background: color-mix(in srgb, var(--c-action) 20%, transparent);
    border-color: color-mix(in srgb, var(--c-action) 25%, transparent);
}

.lg-toggle.active .lg-toggle-thumb {
    left: 23px;
    background: var(--c-action);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c-action) 35%, transparent);
}

/* ═══════════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════════ */

.lg-price-card {
    position: relative;
    border-radius: var(--rad-xl);
    padding: 32px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition:
        background-color var(--dur) var(--ease-glass),
        box-shadow var(--dur) var(--ease-glass),
        transform var(--dur) var(--ease-glass);
}

.lg-price-card:hover {
    transform: translateY(-6px) scale(1.01);
}

.lg-price-card-featured {
    border: 1px solid color-mix(in srgb, var(--c-action) 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent),
        0 0 50px color-mix(in srgb, var(--c-action) 12%, transparent);
}

.lg-price-amount {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--c-content);
    line-height: 1;
}

.lg-price-period {
    font-size: 14px;
    color: color-mix(in srgb, var(--c-content) 45%, transparent);
}

.lg-price-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: color-mix(in srgb, var(--c-content) 70%, transparent);
    font-size: 14px;
}

.lg-price-feature svg {
    width: 18px;
    height: 18px;
    color: var(--c-action);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */

.lg-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--rad-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lg-badge-accent {
    background: color-mix(in srgb, var(--c-action) 12%, transparent);
    color: var(--c-action);
    border: 1px solid color-mix(in srgb, var(--c-action) 15%, transparent);
}

.lg-badge-success {
    background: color-mix(in srgb, var(--c-success) 10%, transparent);
    color: var(--c-success);
    border: 1px solid color-mix(in srgb, var(--c-success) 15%, transparent);
}

/* ═══════════════════════════════════════════════════
   CHIPS
   ═══════════════════════════════════════════════════ */

.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--rad-pill);
    color: color-mix(in srgb, var(--c-content) 55%, transparent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--dur-fast), background var(--dur-fast);
}

.lg-chip:hover {
    color: var(--c-content);
    background: color-mix(in srgb, var(--c-glass) 10%, transparent);
}

.lg-chip.active {
    color: var(--c-content);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */

.lg-modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--c-dark) 60%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur);
}

.lg-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.lg-modal {
    width: 100%;
    max-width: 440px;
    border-radius: var(--rad-xl);
    padding: 32px;
    transform: translateY(24px) scale(0.92);
    transition: transform var(--dur-spring) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.lg-modal-overlay.active .lg-modal {
    transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */

.lg-footer {
    padding: 48px 24px 24px;
    border-top: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 6%), transparent);
    background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
}

.lg-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.lg-footer a {
    color: color-mix(in srgb, var(--c-content) 45%, transparent);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--dur-fast);
}

.lg-footer a:hover {
    color: var(--c-content);
}

/* ═══════════════════════════════════════════════════
   GRAIN / NOISE OVERLAY
   Adds subtle film grain texture for depth.
   ═══════════════════════════════════════════════════ */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px;
    mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════
   CURSOR GLOW
   Soft light that follows the mouse pointer.
   ═══════════════════════════════════════════════════ */

.lg-cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--c-action) 8%, transparent) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
    will-change: transform;
}

.lg-cursor-glow.active {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   FLOATING ORBS
   Ambient gradient blobs for hero sections.
   ═══════════════════════════════════════════════════ */

.lg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.4;
    will-change: transform;
}

.lg-orb-purple {
    background: color-mix(in srgb, var(--c-action) 30%, transparent);
}

.lg-orb-blue {
    background: var(--c-orb-1);
}

.lg-orb-pink {
    background: var(--c-orb-2);
}

@keyframes lg-orb-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes lg-orb-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.08); }
    66% { transform: translate(25px, -25px) scale(0.92); }
}

@keyframes lg-orb-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, 50px) scale(0.97); }
    66% { transform: translate(-35px, -15px) scale(1.03); }
}

.lg-orb-animate-1 { animation: lg-orb-float-1 12s ease-in-out infinite; }
.lg-orb-animate-2 { animation: lg-orb-float-2 15s ease-in-out infinite; }
.lg-orb-animate-3 { animation: lg-orb-float-3 18s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════
   ANIMATED GRADIENT BORDER
   Rotating gradient border for featured elements.
   ═══════════════════════════════════════════════════ */

@property --lg-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.lg-gradient-border {
    position: relative;
    isolation: isolate;
}

.lg-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--lg-border-angle),
        transparent 25%,
        var(--c-action) 35%,
        var(--c-action-2) 50%,
        var(--c-action) 65%,
        transparent 75%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: lg-border-spin 6s linear infinite;
    z-index: -1;
    opacity: 0.5;
    transition: opacity var(--dur);
}

.lg-gradient-border:hover::before {
    opacity: 1;
}

@keyframes lg-border-spin {
    to { --lg-border-angle: 360deg; }
}

/* Fallback for browsers that don't support @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .lg-gradient-border::before {
        background: linear-gradient(135deg, var(--c-action), var(--c-action-2));
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════
   TEXT SHIMMER
   Animated gradient text effect for hero headings.
   ═══════════════════════════════════════════════════ */

.lg-text-shimmer {
    background: linear-gradient(
        120deg,
        var(--c-content) 0%,
        var(--c-content) 35%,
        var(--c-action) 50%,
        var(--c-content) 65%,
        var(--c-content) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lg-shimmer 5s ease-in-out infinite;
}

@keyframes lg-shimmer {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════
   MAGNETIC TILT
   3D perspective tilt on hover (applied via JS).
   ═══════════════════════════════════════════════════ */

.lg-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform var(--dur-fast) var(--ease-glass);
}

.lg-tilt-inner {
    transform: translateZ(20px);
}

/* ═══════════════════════════════════════════════════
   ENHANCED HOVER GLOWS
   ═══════════════════════════════════════════════════ */

.lg-glow-hover {
    transition: box-shadow var(--dur) var(--ease-glass), transform var(--dur) var(--ease-glass);
}

.lg-glow-hover:hover {
    box-shadow:
        0 0 20px color-mix(in srgb, var(--c-action) 15%, transparent),
        0 0 60px color-mix(in srgb, var(--c-action) 8%, transparent),
        0 8px 32px color-mix(in srgb, var(--c-dark) 20%, transparent);
}

/* Button glow sweep */
.lg-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 30%, var(--c-shimmer) 50%, transparent 70%);
    background-size: 250% 100%;
    background-position: 200% 0;
    transition: background-position 0.6s ease;
}

.lg-btn-primary:hover::before {
    background-position: -50% 0;
}

/* ═══════════════════════════════════════════════════
   SMOOTH SCROLL & PAGE REVEAL
   ═══════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
}

/* Page load fade-in */
@keyframes lg-page-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    animation: lg-page-enter 0.6s var(--ease-glass) both;
}

/* ═══════════════════════════════════════════════════
   SELECTION STYLE
   ═══════════════════════════════════════════════════ */

::selection {
    background: color-mix(in srgb, var(--c-action) 30%, transparent);
    color: var(--c-content);
}

/* ═══════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
    background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c-glass) 25%, transparent);
    border-radius: var(--rad-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c-glass) 40%, transparent);
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════ */

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-glass), transform 0.7s var(--ease-glass);
}

.lg-animate-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger delay variants */
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate-delay="4"] { transition-delay: 0.4s; }

/* Slide from left */
[data-animate="left"] {
    opacity: 0;
    transform: translateX(-30px);
}
[data-animate="left"].lg-animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
[data-animate="right"] {
    opacity: 0;
    transform: translateX(30px);
}
[data-animate="right"].lg-animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
[data-animate="scale"] {
    opacity: 0;
    transform: scale(0.9);
}
[data-animate="scale"].lg-animate-visible {
    opacity: 1;
    transform: scale(1);
}

@keyframes lg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes lg-glow-pulse {
    0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--c-action) 25%, transparent); }
    50% { box-shadow: 0 0 50px color-mix(in srgb, var(--c-action) 35%, transparent); }
}

.lg-animate-float { animation: lg-float 7s ease-in-out infinite; }
.lg-animate-glow { animation: lg-glow-pulse 4s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — FLUID TYPOGRAPHY
   ═══════════════════════════════════════════════════ */

h1, .lg-hero-title {
    font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h2, .lg-section-title {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — HEADER & NAV
   ═══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .lg-header-inner {
        gap: 12px;
    }
    .lg-nav-link {
        padding: 0 12px;
        font-size: 13px;
    }
    .lg-theme-switcher {
        width: 104px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .lg-header {
        padding: 8px 16px;
    }
    .lg-header-inner {
        height: 48px;
    }
    .lg-nav-capsule {
        display: none !important;
    }
    .lg-theme-switcher {
        width: auto;
        height: 38px;
        padding: 3px;
    }
    .lg-theme-btn {
        width: 32px;
    }
    .lg-theme-switcher::after {
        width: 30px;
    }
    .lg-theme-switcher[data-active="light"]::after {
        translate: 33px 0;
    }
    .lg-theme-switcher[data-active="soft"]::after {
        translate: 66px 0;
    }
    .lg-theme-btn svg {
        width: 15px;
        height: 15px;
    }
    .lg-header-actions {
        gap: 6px;
    }
    .lg-logo-mark {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .lg-logo {
        font-size: 16px;
    }

    /* Sidebar */
    .lg-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 90;
        transition: left var(--dur) var(--ease-glass);
        width: 280px;
    }
    .lg-sidebar.open { left: 0; }
}

/* Small mobile */
@media (max-width: 480px) {
    .lg-header {
        padding: 6px 12px;
    }
    .lg-header-inner {
        height: 44px;
        gap: 8px;
    }
    .lg-logo {
        font-size: 15px;
        gap: 8px;
    }
    .lg-logo-mark {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .lg-theme-switcher {
        width: fit-content;
        height: 34px;
        padding: 2px;
    }
    .lg-theme-btn {
        width: 28px;
    }
    .lg-theme-switcher::after {
        width: 26px;
        height: 26px;
    }
    .lg-theme-switcher[data-active="light"]::after {
        translate: 28px 0;
    }
    .lg-theme-switcher[data-active="soft"]::after {
        translate: 56px 0;
    }
    .lg-theme-btn svg {
        width: 13px;
        height: 13px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — LAYOUT & SPACING
   ═══════════════════════════════════════════════════ */

/* Section padding */
.lg-section {
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
}

/* Container */
.lg-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — CARDS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lg-card {
        padding: 20px;
        border-radius: var(--rad-md);
    }
    .lg-card-hover:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 480px) {
    .lg-card {
        padding: 16px;
        border-radius: var(--rad-sm);
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — PRICING
   ═══════════════════════════════════════════════════ */

.lg-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 3vw, 24px);
    align-items: start;
}

@media (max-width: 768px) {
    .lg-price-card {
        padding: 24px;
        border-radius: var(--rad-lg);
    }
    .lg-price-card:hover {
        transform: translateY(-3px) scale(1);
    }
    .lg-price-amount {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .lg-price-card {
        padding: 20px;
    }
    .lg-price-amount {
        font-size: 32px;
    }
    .lg-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — BUTTONS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lg-btn {
        padding: 9px 20px;
        font-size: 13.5px;
        min-height: 40px;
    }
    .lg-btn-lg {
        padding: 12px 28px;
        font-size: 14px;
        min-height: 46px;
    }
    .lg-btn-sm {
        padding: 6px 12px;
        font-size: 12.5px;
        min-height: 34px;
    }
}

@media (max-width: 480px) {
    .lg-btn {
        padding: 10px 18px;
        font-size: 13px;
        min-height: 42px;
        width: 100%;
        justify-content: center;
    }
    .lg-btn-lg {
        padding: 14px 24px;
        font-size: 14px;
        min-height: 48px;
    }
    .lg-btn-sm {
        padding: 7px 14px;
        font-size: 12px;
        min-height: 36px;
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — GRID HELPERS
   ═══════════════════════════════════════════════════ */

.lg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 3vw, 24px);
}

.lg-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 3vw, 24px);
}

.lg-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 3vw, 24px);
}

@media (max-width: 1024px) {
    .lg-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .lg-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .lg-grid-4 { grid-template-columns: 1fr; }
    .lg-grid-3 { grid-template-columns: 1fr; }
    .lg-grid-2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — FOOTER
   ═══════════════════════════════════════════════════ */

.lg-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: clamp(24px, 4vw, 48px);
}

@media (max-width: 1024px) {
    .lg-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .lg-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .lg-footer {
        padding: 32px 16px 16px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — INPUTS & FORMS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lg-input {
        padding: 11px 14px;
        font-size: 16px; /* prevent iOS zoom */
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — SIDEBAR (Dashboard)
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .lg-sidebar {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .lg-sidebar {
        width: 280px;
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 90;
        transition: left var(--dur) var(--ease-glass);
    }
    .lg-sidebar.open { left: 0; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MODAL
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lg-modal-overlay {
        padding: 16px;
        align-items: flex-end;
    }
    .lg-modal {
        padding: 24px;
        border-radius: var(--rad-lg) var(--rad-lg) 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }
    .lg-modal-overlay.active .lg-modal {
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLES
   ═══════════════════════════════════════════════════ */

.lg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--rad-md);
}

.lg-table-wrap table {
    min-width: 600px;
    width: 100%;
}

@media (max-width: 768px) {
    .lg-table-wrap {
        margin: 0 -16px;
        border-radius: 0;
        padding: 0 16px;
    }
    .lg-table-wrap table {
        min-width: 500px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — HERO SECTIONS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lg-hero {
        padding-top: clamp(2rem, 6vw, 3rem);
        padding-bottom: clamp(2rem, 6vw, 3rem);
    }
    .lg-hero-orbs {
        opacity: 0.3;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — ADMIN CONTENT
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .admin-content, .account-content, .agent-content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .admin-content, .account-content, .agent-content {
        padding: 12px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — BADGES & CHIPS
   ═══════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .lg-badge {
        font-size: 11px;
        padding: 3px 10px;
    }
    .lg-chip {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TOUCH TARGETS
   Minimum 44px tap targets for mobile.
   ═══════════════════════════════════════════════════ */

@media (pointer: coarse) {
    .lg-nav-link {
        min-height: 44px;
        padding: 0 16px;
    }
    .lg-sidebar-item {
        min-height: 44px;
        padding: 10px 14px;
    }
    .lg-chip {
        min-height: 40px;
        padding: 8px 16px;
    }
    .lg-theme-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   Respect user's motion preferences.
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .lg-orb { display: none; }
    .lg-cursor-glow { display: none; }
    body::before { display: none; }
    html { scroll-behavior: auto; }
}

/* ─── Utilities ─── */
.lg-text-accent { color: var(--c-action); }
.lg-text-muted { color: color-mix(in srgb, var(--c-content) 40%, transparent); }
.lg-text-secondary { color: color-mix(in srgb, var(--c-content) 60%, transparent); }
.lg-bg-gradient-hero {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-action) 6%, var(--c-bg)) 0%, var(--c-bg) 60%);
}
.lg-border-glass { border-color: color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%, transparent)); }

/* Links */
a {
    color: var(--c-action);
    text-decoration-thickness: 0.05em;
    text-underline-position: under;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
    transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}

a:hover {
    color: color-mix(in srgb, var(--c-action), var(--c-content) 40%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}

/* ═══════════════════════════════════════════════════
   RTL Support (Arabic)
   ═══════════════════════════════════════════════════ */

[dir="rtl"] {
    font-family: 'Noto Sans Arabic', 'DM Sans', 'Tahoma', sans-serif;
}

/* Sidebar: move to right side */
[dir="rtl"] .lg-sidebar {
    left: auto;
    right: 0;
}

[dir="rtl"] .lg-sidebar.-translate-x-full {
    transform: translateX(100%);
}

[dir="rtl"] .lg-sidebar.translate-x-0 {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    [dir="rtl"] .lg-sidebar {
        transform: none !important;
    }
    [dir="rtl"] .lg\:pl-64 {
        padding-left: 0;
        padding-right: 16rem;
    }
}

/* Fix sidebar item active indicator */
[dir="rtl"] .lg-sidebar-item.active {
    border-left: none;
    border-right: 3px solid var(--c-action);
}

/* Fix dropdown menus */
[dir="rtl"] .absolute.right-0 {
    right: auto;
    left: 0;
}

/* Fix flex space-x layouts */
[dir="rtl"] .space-x-4 > :not(:last-child) {
    margin-left: 1rem;
    margin-right: 0;
}

[dir="rtl"] .space-x-3 > :not(:last-child) {
    margin-left: 0.75rem;
    margin-right: 0;
}

[dir="rtl"] .space-x-2 > :not(:last-child) {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Fix text alignment for Arabic */
[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

/* Fix table headers for RTL */
[dir="rtl"] th.text-left {
    text-align: right;
}

/* Fix form inputs for RTL */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
    text-align: left;
    direction: ltr;
}

/* Fix margins/paddings for RTL */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .ml-4 {
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .mr-4 {
    margin-right: 0;
    margin-left: 1rem;
}

[dir="rtl"] .ml-3 {
    margin-left: 0;
    margin-right: 0.75rem;
}

[dir="rtl"] .mr-3 {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .ml-1 {
    margin-left: 0;
    margin-right: 0.25rem;
}

[dir="rtl"] .pl-6 {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .pr-6 {
    padding-right: 0;
    padding-left: 1.5rem;
}

[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .pr-2 {
    padding-right: 0;
    padding-left: 0.5rem;
}

/* Fix border radius for RTL cards */
[dir="rtl"] .rounded-l-lg {
    border-radius: 0 0.5rem 0.5rem 0;
}

[dir="rtl"] .rounded-r-lg {
    border-radius: 0.5rem 0 0 0.5rem;
}

/* Fix list style for Arabic */
[dir="rtl"] ul, [dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Fix scrollbar for RTL */
[dir="rtl"] ::-webkit-scrollbar {
    direction: rtl;
}

/* Preserve LTR for codes, URLs, numbers */
[dir="rtl"] .font-mono,
[dir="rtl"] code,
[dir="rtl"] pre {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .ltr {
    direction: ltr;
    text-align: left;
}

/* Ensure sidebar toggle is clickable in Chrome (backdrop-filter bug) */
.lg-sidebar-toggle {
    position: relative;
    z-index: 1;
}

/* Fix sidebar collapse toggle for RTL */
[dir="rtl"] .lg-sidebar-toggle svg {
    transform: scaleX(-1);
}

/* Fix theme switcher slider for RTL */
[dir="rtl"] .lg-theme-switcher {
    direction: ltr;
}

/* Fix notification badges */
[dir="rtl"] .relative .absolute.-top-1 {
    right: auto;
    left: -0.25rem;
}

/* Fix breadcrumb arrows */
[dir="rtl"] .breadcrumb-arrow svg {
    transform: scaleX(-1);
}

/* Fix pagination */
[dir="rtl"] .pagination {
    direction: ltr;
}

/* Smooth transitions for RTL layout changes */
[dir="rtl"] .lg-sidebar,
[dir="rtl"] .lg-sidebar-item,
[dir="rtl"] main {
    transition: all 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   PRICE TOGGLE — ZOOM BURST + SHIMMER
   ═══════════════════════════════════════════════════ */

.price-switch {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

.price-switch .lg-price-amount {
    display: inline-block;
}

/* LEAVE — old price collapses inward */
.price-flip-leave {
    transition: all 0.3s cubic-bezier(0.55, 0, 1, 0.45);
}
.price-flip-leave-start {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}
.price-flip-leave-end {
    opacity: 0;
    transform: scale(0.4);
    filter: blur(8px);
}

/* ENTER — new price bursts in with elastic overshoot + glow */
.price-flip-enter {
    transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: price-container-glow 0.6s ease-out both;
}
.price-flip-enter-start {
    opacity: 0;
    transform: scale(0.2);
    filter: blur(10px);
}
.price-flip-enter-end {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* Shimmer streak across the price after it lands */
@keyframes price-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.price-flip-enter-end .lg-price-amount {
    background: linear-gradient(
        90deg,
        var(--c-action) 0%,
        color-mix(in srgb, var(--c-action) 100%, white 40%) 40%,
        var(--c-action) 80%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: price-shimmer 0.7s ease-out 0.15s both;
}

/* Glow ring on the price-switch container */
@keyframes price-container-glow {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-action) 0%, transparent); }
    35%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-action) 15%, transparent),
                       0 0 20px color-mix(in srgb, var(--c-action) 8%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-action) 0%, transparent); }
}

/* Subtle glow pulse on the card when price changes */
@keyframes price-card-pulse {
    0%   { box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--c-action) 0%, transparent); }
    30%  { box-shadow: inset 0 0 30px 0 color-mix(in srgb, var(--c-action) 6%, transparent); }
    100% { box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--c-action) 0%, transparent); }
}

.lg-price-card:has(.price-flip-enter) {
    animation: price-card-pulse 0.6s ease-out both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .price-flip-enter { transition: opacity 0.15s ease; animation: none; }
    .price-flip-enter-start { opacity: 0; transform: none; filter: none; }
    .price-flip-enter-end   { opacity: 1; transform: none; filter: none; }
    .price-flip-leave       { transition: opacity 0.1s ease; }
    .price-flip-leave-start { opacity: 1; transform: none; filter: none; }
    .price-flip-leave-end   { opacity: 0; transform: none; filter: none; }
    .price-flip-enter-end .lg-price-amount { animation: none; -webkit-text-fill-color: var(--c-action); }
}

/* ═══════════════════════════════════════════════════
   TAILWIND COLOR OVERRIDES PER THEME
   These override Tailwind CDN-generated classes so
   bg-dark-*, text-dark-*, border-dark-* respond to
   theme switching automatically.
   ═══════════════════════════════════════════════════ */

/* --- Dark theme (default — already matches Tailwind dark palette) --- */

/* --- Light theme --- */
[data-theme="light"] .text-white { color: #1a1625; }
[data-theme="light"] .bg-white { background-color: #ffffff; }
[data-theme="light"] .bg-black { background-color: #f8f7fc; }
[data-theme="light"] .bg-dark-950,
[data-theme="light"] .bg-dark-900 { background-color: #f8f7fc; }
[data-theme="light"] .bg-dark-800 { background-color: #ffffff; }
[data-theme="light"] .bg-dark-700 { background-color: #f0eef5; }
[data-theme="light"] .bg-dark-600 { background-color: #e8e5f0; }
[data-theme="light"] .bg-dark-500 { background-color: #d8d4e2; }
[data-theme="light"] .border-dark-900,
[data-theme="light"] .border-dark-800 { border-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .border-dark-700 { border-color: rgba(0, 0, 0, 0.18); }
[data-theme="light"] .text-dark-50,
[data-theme="light"] .text-dark-100 { color: #1a1625; }
[data-theme="light"] .text-dark-200 { color: #2a2540; }
[data-theme="light"] .text-dark-300 { color: #6b617a; }
[data-theme="light"] .text-dark-400 { color: #9890a8; }
[data-theme="light"] .text-dark-500 { color: #9890a8; }
[data-theme="light"] .text-green-400,
[data-theme="light"] .text-green-500 { color: #16a34a; }
[data-theme="light"] .text-red-400,
[data-theme="light"] .text-red-500 { color: #dc2626; }
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-yellow-500 { color: #ca8a04; }
[data-theme="light"] .bg-green-600\/20,
[data-theme="light"] .bg-green-500\/20 { background-color: rgba(22, 163, 74, 0.15); }
[data-theme="light"] .bg-red-600\/20,
[data-theme="light"] .bg-red-500\/20 { background-color: rgba(220, 38, 38, 0.15); }
[data-theme="light"] .bg-amber-600\/20,
[data-theme="light"] .bg-amber-500\/20 { background-color: rgba(202, 138, 4, 0.15); }
[data-theme="light"] .bg-green-500\/10,
[data-theme="light"] .bg-green-600\/10 { background-color: rgba(22, 163, 74, 0.08); }
[data-theme="light"] .bg-red-500\/10,
[data-theme="light"] .bg-red-600\/10 { background-color: rgba(220, 38, 38, 0.08); }
[data-theme="light"] .bg-amber-500\/10,
[data-theme="light"] .bg-amber-600\/10 { background-color: rgba(202, 138, 4, 0.08); }
[data-theme="light"] .bg-purple-600\/20,
[data-theme="light"] .bg-purple-500\/20 { background-color: rgba(124, 58, 237, 0.15); }
[data-theme="light"] .bg-purple-600\/10 { background-color: rgba(124, 58, 237, 0.08); }
[data-theme="light"] .text-purple-400,
[data-theme="light"] .text-purple-500 { color: #7c3aed; }
[data-theme="light"] .hover\:bg-dark-800:hover { background-color: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .hover\:bg-dark-700:hover { background-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .hover\:bg-dark-600:hover { background-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .hover\:bg-dark-800\/50:hover { background-color: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .hover\:text-dark-100:hover { color: #1a1625; }
[data-theme="light"] .hover\:text-white:hover { color: #1a1625; }
[data-theme="light"] .divide-dark-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .ring-dark-800 { --tw-ring-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .from-dark-950 { --tw-gradient-from: #f8f7fc; }
[data-theme="light"] .to-dark-900 { --tw-gradient-to: #ffffff; }
[data-theme="light"] .via-dark-800 { --tw-gradient-via: #f0eef5; }

/* --- Soft theme --- */
[data-theme="soft"] .text-white { color: #ede9f8; }
[data-theme="soft"] .bg-white { background-color: #1e1e28; }
[data-theme="soft"] .bg-black { background-color: #0e0e14; }
[data-theme="soft"] .bg-dark-950 { background-color: #0e0e14; }
[data-theme="soft"] .bg-dark-900 { background-color: #16161e; }
[data-theme="soft"] .bg-dark-800 { background-color: #1e1e28; }
[data-theme="soft"] .bg-dark-700 { background-color: #262632; }
[data-theme="soft"] .bg-dark-600 { background-color: #2e2e3c; }
[data-theme="soft"] .bg-dark-500 { background-color: #3a3a4c; }
[data-theme="soft"] .border-dark-900,
[data-theme="soft"] .border-dark-800 { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="soft"] .border-dark-700 { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="soft"] .text-dark-50,
[data-theme="soft"] .text-dark-100 { color: #ede9f8; }
[data-theme="soft"] .text-dark-200 { color: #d4d0e0; }
[data-theme="soft"] .text-dark-300 { color: #a09ab4; }
[data-theme="soft"] .text-dark-400 { color: #8880a0; }
[data-theme="soft"] .text-dark-500 { color: #6b6580; }
[data-theme="soft"] .text-green-400,
[data-theme="soft"] .text-green-500 { color: #4ade80; }
[data-theme="soft"] .text-red-400,
[data-theme="soft"] .text-red-500 { color: #f87171; }
[data-theme="soft"] .text-amber-400,
[data-theme="soft"] .text-yellow-400,
[data-theme="soft"] .text-yellow-500 { color: #facc15; }
[data-theme="soft"] .bg-green-600\/20,
[data-theme="soft"] .bg-green-500\/20 { background-color: rgba(74, 222, 128, 0.15); }
[data-theme="soft"] .bg-red-600\/20,
[data-theme="soft"] .bg-red-500\/20 { background-color: rgba(248, 113, 113, 0.15); }
[data-theme="soft"] .bg-amber-600\/20,
[data-theme="soft"] .bg-amber-500\/20 { background-color: rgba(250, 204, 21, 0.15); }
[data-theme="soft"] .bg-green-500\/10,
[data-theme="soft"] .bg-green-600\/10 { background-color: rgba(74, 222, 128, 0.08); }
[data-theme="soft"] .bg-red-500\/10,
[data-theme="soft"] .bg-red-600\/10 { background-color: rgba(248, 113, 113, 0.08); }
[data-theme="soft"] .bg-amber-500\/10,
[data-theme="soft"] .bg-amber-600\/10 { background-color: rgba(250, 204, 21, 0.08); }
[data-theme="soft"] .bg-purple-600\/20,
[data-theme="soft"] .bg-purple-500\/20 { background-color: rgba(167, 139, 250, 0.15); }
[data-theme="soft"] .bg-purple-600\/10 { background-color: rgba(167, 139, 250, 0.08); }
[data-theme="soft"] .text-purple-400,
[data-theme="soft"] .text-purple-500 { color: #a78bfa; }
[data-theme="soft"] .hover\:bg-dark-800:hover { background-color: #222230; }
[data-theme="soft"] .hover\:bg-dark-700:hover { background-color: #2a2a3a; }
[data-theme="soft"] .hover\:bg-dark-600:hover { background-color: #323244; }
[data-theme="soft"] .hover\:bg-dark-800\/50:hover { background-color: rgba(34, 34, 48, 0.5); }
[data-theme="soft"] .hover\:text-dark-100:hover { color: #ede9f8; }
[data-theme="soft"] .hover\:text-white:hover { color: #ede9f8; }
[data-theme="soft"] .divide-dark-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="soft"] .ring-dark-800 { --tw-ring-color: rgba(255, 255, 255, 0.08); }
[data-theme="soft"] .from-dark-950 { --tw-gradient-from: #0e0e14; }
[data-theme="soft"] .to-dark-900 { --tw-gradient-to: #16161e; }
[data-theme="soft"] .via-dark-800 { --tw-gradient-via: #1e1e28; }

/* ═══════════════════════════════════════════════════
   THEME-AWARE UTILITY CLASSES
   Use these in new code instead of Tailwind static colors.
   ═══════════════════════════════════════════════════ */

/* Surfaces */
.t-bg-surface { background-color: var(--c-surface); }
.t-bg-surface-2 { background-color: var(--c-surface-2); }
.t-bg-elevated { background-color: var(--lg-bg-elevated); }

/* Borders */
.t-border { border-color: var(--c-border); }
.t-border-strong { border-color: var(--c-border-strong); }

/* Text */
.t-text { color: var(--lg-text); }
.t-text-secondary { color: var(--lg-text-secondary); }
.t-text-muted { color: var(--lg-text-muted); }

/* Semantic colors */
.t-text-success { color: var(--lg-success); }
.t-text-error { color: var(--lg-error); }
.t-text-warning { color: var(--lg-warning); }
.t-text-accent { color: var(--lg-accent); }

/* Semantic backgrounds (with opacity) */
.t-bg-success { background-color: color-mix(in srgb, var(--lg-success) 20%, transparent); }
.t-bg-error { background-color: color-mix(in srgb, var(--lg-error) 20%, transparent); }
.t-bg-warning { background-color: color-mix(in srgb, var(--lg-warning) 20%, transparent); }
.t-bg-accent { background-color: color-mix(in srgb, var(--lg-accent) 20%, transparent); }
.t-bg-success-soft { background-color: color-mix(in srgb, var(--lg-success) 10%, transparent); }
.t-bg-error-soft { background-color: color-mix(in srgb, var(--lg-error) 10%, transparent); }
.t-bg-warning-soft { background-color: color-mix(in srgb, var(--lg-warning) 10%, transparent); }
.t-bg-accent-soft { background-color: var(--lg-accent-soft); }

/* Semantic borders */
.t-border-success { border-color: color-mix(in srgb, var(--lg-success) 30%, transparent); }
.t-border-error { border-color: color-mix(in srgb, var(--lg-error) 30%, transparent); }
.t-border-warning { border-color: color-mix(in srgb, var(--lg-warning) 30%, transparent); }
.t-border-accent { border-color: color-mix(in srgb, var(--lg-accent) 30%, transparent); }