:root {
    --cs-black: #111111;
    --cs-gray-900: #1A1A1A;
    --cs-gray-800: #2A2A2A;
    --cs-gray-700: #3D3D3D;
    --cs-gray-600: #5C5C5C;
    --cs-gray-500: #7A7A7A;
    --cs-gray-300: #C8C8C8;
    --cs-gray-200: #E4E4E4;
    --cs-gray-100: #F4F4F4;
    --cs-primary: #C8102E;
    --cs-primary-hover: #A50D26;
    --cs-primary-active: #8B0B20;
    --cs-accent: var(--cs-primary);
    --cs-bg: #F4F4F4;
    --cs-bg-elevated: #FAFAFA;
    --cs-surface: #ffffff;
    --cs-surface-elevated: #ffffff;
    --cs-surface-muted: #F4F4F4;
    --cs-surface-secondary: #F4F4F4;
    --cs-surface-glass: color-mix(in srgb, #ffffff 88%, transparent);
    --cs-glass: var(--cs-surface-elevated);
    --cs-text: #111111;
    --cs-text-secondary: #3D3D3D;
    --cs-text-muted: #5C5C5C;
    --cs-text-tertiary: var(--cs-text-muted);
    --cs-border: #E4E4E4;
    --cs-border-strong: #C8C8C8;
    --cs-highlight: color-mix(in srgb, #ffffff 70%, transparent);
    --cs-success: #1f7a4d;
    --cs-warning: #b7791f;
    --cs-danger: #8B1E1E;
    --cs-info: #3D3D3D;
    --cs-radius-sm: 8px;
    --cs-radius-md: 12px;
    --cs-radius-lg: 18px;
    --cs-radius-xl: 24px;
    --cs-shadow-sm: 0 1px 2px rgba(17, 17, 17, .06);
    --cs-shadow-md: 0 8px 24px rgba(17, 17, 17, .08);
    --cs-shadow-lg: 0 18px 48px rgba(17, 17, 17, .12);
    --cs-ease: cubic-bezier(.22, 1, .36, 1);
    --cs-duration: 180ms;
    --cs-duration-fast: 140ms;
    --cs-sidebar-width: 248px;
    --cs-sidebar-collapsed: 72px;
    --cs-topbar-height: 56px;
    --cs-control-h: 38px;
    --cs-nav-row: 40px;
    --cs-card-pad: 18px;
    --cs-space-1: 4px;
    --cs-space-2: 8px;
    --cs-space-3: 12px;
    --cs-space-4: 16px;
    --cs-space-5: 20px;
    --cs-fs-page: 1.35rem;
    --cs-fs-title: 1.05rem;
    --cs-fs-body: .9rem;
    --cs-fs-small: .78rem;
    --cs-z-content: 1;
    --cs-z-sticky: 10;
    --cs-z-sidebar: 20;
    --cs-z-topbar: 30;
    --cs-z-bottom-nav: 36;
    --cs-z-fab: 38;
    --cs-z-backdrop: 40;
    --cs-z-dropdown: 50;
    --cs-z-more: 55;
    --cs-z-chat: 60;
    --cs-z-inspector: 70;
    --cs-z-tooltip: 80;
    --cs-z-sheet: 85;
    --cs-z-modal: 90;
    --cs-z-toast: 100;
    --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Armenian", sans-serif;
    --cs-glass-blur: 16px;
    --cs-glass-sat: 140%;
}

[data-theme="dark"] {
    --cs-bg: #111111;
    --cs-bg-elevated: #1A1A1A;
    --cs-surface: #2A2A2A;
    --cs-surface-elevated: #2A2A2A;
    --cs-surface-muted: #1A1A1A;
    --cs-surface-secondary: #1A1A1A;
    --cs-surface-glass: color-mix(in srgb, #1A1A1A 82%, transparent);
    --cs-glass: var(--cs-surface);
    --cs-text: #F4F4F4;
    --cs-text-secondary: #C8C8C8;
    --cs-text-muted: #7A7A7A;
    --cs-text-tertiary: var(--cs-text-muted);
    --cs-border: color-mix(in srgb, #ffffff 12%, transparent);
    --cs-border-strong: color-mix(in srgb, #ffffff 18%, transparent);
    --cs-highlight: color-mix(in srgb, #ffffff 10%, transparent);
    --cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --cs-shadow-md: 0 8px 24px rgba(0, 0, 0, .28);
    --cs-shadow-lg: 0 18px 48px rgba(0, 0, 0, .4);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; }

button,
[type="button"],
[type="submit"],
[type="reset"] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    margin: 0;
}

body {
    margin: 0;
    color: var(--cs-text);
    font-family: var(--cs-font);
    background: var(--cs-bg);
    -webkit-font-smoothing: antialiased;
}

body.app-body {
    min-height: 100vh;
    background: var(--cs-bg);
}

a { color: var(--cs-primary); text-decoration: none; }
a:hover { text-decoration: none; color: var(--cs-primary-hover); }

.cs-glass {
    background: var(--cs-surface-glass);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-sm), inset 0 1px 0 var(--cs-highlight);
    backdrop-filter: blur(var(--cs-glass-blur)) saturate(var(--cs-glass-sat));
    -webkit-backdrop-filter: blur(var(--cs-glass-blur)) saturate(var(--cs-glass-sat));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cs-glass,
    .cs-topbar,
    .cs-popover,
    .cs-command,
    .cs-modal-panel,
    .cs-toast,
    .auth-card {
        background: rgba(255, 255, 255, .94);
    }
}

.cs-icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cs-fade-in { animation: csFadeIn var(--cs-duration) var(--cs-ease) both; }
.cs-slide-up { animation: csSlideUp .28s var(--cs-ease) both; }
.cs-scale-in { animation: csScaleIn .22s var(--cs-ease) both; }
.cs-stagger-item { animation: csSlideUp .28s var(--cs-ease) both; }
.cs-stagger-item:nth-child(1) { animation-delay: 20ms; }
.cs-stagger-item:nth-child(2) { animation-delay: 60ms; }
.cs-stagger-item:nth-child(3) { animation-delay: 100ms; }
.cs-stagger-item:nth-child(4) { animation-delay: 140ms; }
.cs-stagger-item:nth-child(5) { animation-delay: 180ms; }
.cs-stagger-item:nth-child(6) { animation-delay: 220ms; }

.cs-content-enter {
    animation: csSlideUp .22s var(--cs-ease) both;
}

@keyframes csFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes csSlideUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes csScaleIn {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes csPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --cs-border: #6b7c8d;
        --cs-text-secondary: #334155;
        --cs-text-tertiary: #3f4b59;
        --cs-surface-glass: #ffffff;
    }
}