:root {
    --c-bg: #f0f2f5;
    --c-surface: #ffffff;
    --c-surface-alt: #f8f9fb;
    --c-surface-hover: #edf0f4;
    --c-text: #111827;
    --c-text-muted: #6b7280;
    --c-text-faint: #9ca3af;
    --c-text-inv: #ffffff;
    --c-primary: #111827;
    --c-primary-hover: #000000;
    --c-accent: #4f46e5;
    --c-accent-hover: #4338ca;
    --c-accent-bg: #eef2ff;
    --c-accent-border: #a5b4fc;
    --c-success: #059669;
    --c-success-bg: #ecfdf5;
    --c-success-border: #6ee7b7;
    --c-error: #dc2626;
    --c-error-bg: #fef2f2;
    --c-error-border: #fca5a5;
    --c-warning: #d97706;
    --c-warning-bg: #fffbeb;
    --c-warning-border: #fcd34d;
    --c-info: #2563eb;
    --c-info-bg: #eff6ff;
    --c-info-border: #93c5fd;
    --c-border: #e5e7eb;
    --c-border-strong: #d1d5db;
    --c-verified: #1d9bf0;
    --c-online: #22c55e;
}
:root {
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-16: 4rem;
    --gap: var(--sp-4);
    --gap-sm: var(--sp-3);
    --gap-lg: var(--sp-5);
}
:root {
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}
:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.25rem;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-normal: 1.5;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
}
:root {
    --z-dropdown: 100;
    --z-header: 500;
    --z-sticky: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}
:root {
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-smooth);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
:root {
    --container-lg: 1024px;
    --sidebar-w: 256px;
    --sidebar-min: 64px;
    --header-h: 56px;
}
:root {
    --input-sm: 32px;
    --input-md: 40px;
}
@keyframes wl-spin {
    to { transform: rotate(360deg); }
}
@keyframes wl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes wl-scale-in {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: none; }
}
@keyframes wl-shake {
    0%, 100% { transform: translateX(0); }
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}
@keyframes wl-pulse {
    50% { opacity: 0.7; }
}
:root {
    --gradient-success: linear-gradient(135deg, #059669, #047857);
    --gradient-error: linear-gradient(135deg, #dc2626, #b91c1c);
    --gradient-info: linear-gradient(135deg, #2563eb, #1d4ed8);
}
:root {
    --overlay-normal: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-blur: blur(4px);
}
[data-theme="dark"] {
    --c-bg: #131316;
    --c-surface: #1C1B1F;
    --c-surface-alt: #232328;
    --c-surface-hover: #2B2A30;
    --c-text: #E3E3E8;
    --c-text-muted: #C4C4CA;
    --c-text-faint: #8E8E95;
    --c-text-inv: #1C1B1F;
    --c-primary: #E3E3E8;
    --c-primary-hover: #FFFFFF;
    --c-accent: #8AB4F8;
    --c-accent-hover: #AECBFA;
    --c-accent-bg: rgba(138, 180, 248, 0.12);
    --c-accent-border: rgba(138, 180, 248, 0.28);
    --c-success: #81C995;
    --c-success-bg: rgba(129, 201, 149, 0.10);
    --c-success-border: rgba(129, 201, 149, 0.25);
    --c-error: #F28B82;
    --c-error-bg: rgba(242, 139, 130, 0.10);
    --c-error-border: rgba(242, 139, 130, 0.25);
    --c-warning: #FDD663;
    --c-warning-bg: rgba(253, 214, 99, 0.10);
    --c-warning-border: rgba(253, 214, 99, 0.25);
    --c-info: #8AB4F8;
    --c-info-bg: rgba(138, 180, 248, 0.10);
    --c-info-border: rgba(138, 180, 248, 0.25);
    --c-border: #3C3C43;
    --c-border-strong: #545460;
    --c-verified: #8AB4F8;
    --c-online: #81C995;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.55), 0 10px 10px -5px rgba(0, 0, 0, 0.35);
    --gradient-success: linear-gradient(135deg, #81C995, #5BB974);
    --gradient-error: linear-gradient(135deg, #F28B82, #E8756A);
    --gradient-info: linear-gradient(135deg, #8AB4F8, #669DF6);
    --overlay-normal: rgba(0, 0, 0, 0.65);
    --overlay-dark: rgba(0, 0, 0, 0.82);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[hidden] {
    display: none !important;
}
.wl-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}
@media (max-width: 767px) {
    :root {
        --gap: var(--sp-3);
        --gap-sm: var(--sp-2);
        --gap-lg: var(--sp-4);
        --header-h: 52px;
    }
}
@media (max-width: 639px) {
    :root {
        --sidebar-w: 100%;
    }
}