:root {
    --bg-primary: #F0F5F8;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --card-bg: #FFFFFF;
    --modal-bg: #FFFFFF;
    --bg-tertiary: #E4EEE8;
    --bg-gradient: linear-gradient(135deg, #DFF0EA 0%, #D8EBF4 100%);
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(90, 140, 118, 0.12);

    --text-primary: #0D1A14;
    --text-secondary: #2E4A3E;
    --text-muted: #5A7A6E;
    --text-on-gradient: #FFFFFF;

    --gradient-primary: linear-gradient(135deg, #4A8272 0%, #6AA898 100%);
    --gradient-secondary: linear-gradient(135deg, #6AA898 0%, #7AB8D0 100%);
    --gradient-accent: linear-gradient(135deg, #4A8272 0%, #7AB8D0 100%);
    --gradient-success: linear-gradient(135deg, #4A9068 0%, #2E7050 100%);
    --gradient-warning: linear-gradient(135deg, #C8A458 0%, #A8843A 100%);
    --gradient-danger: linear-gradient(135deg, #C45A6A 0%, #A83A4A 100%);

    --color-primary: #4A8272;
    --color-primary-light: #6AA898;
    --color-primary-dark: #336056;
    --color-secondary: #7AB8D0;
    --color-accent: #6AA898;

    --color-primary-alpha-10: rgba(74, 130, 114, 0.10);
    --color-primary-alpha-15: rgba(74, 130, 114, 0.15);
    --color-primary-alpha-20: rgba(74, 130, 114, 0.20);
    --color-primary-alpha-50: rgba(74, 130, 114, 0.50);

    --gradient-primary-hover: linear-gradient(135deg, #336056 0%, #4A8272 100%);

    --skeleton-light: #DFF0EA;
    --skeleton-dark: #C8E0DA;

    --print-bg: white;

    --border-color: #C8DDD8;
    --border-color-light: #DFF0EA;
    --border-color-focus: #6AA898;

    --shadow-xs: 0 1px 2px rgba(40, 80, 70, 0.05);
    --shadow-sm: 0 1px 3px rgba(40, 80, 70, 0.07), 0 1px 2px rgba(40, 80, 70, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(40, 80, 70, 0.08), 0 2px 4px -1px rgba(40, 80, 70, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(40, 80, 70, 0.09), 0 4px 6px -2px rgba(40, 80, 70, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(40, 80, 70, 0.09), 0 10px 10px -5px rgba(40, 80, 70, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(40, 80, 70, 0.16);
    --shadow-colored: 0 10px 30px rgba(74, 130, 114, 0.18);

    --badge-patient-bg: rgba(74, 130, 114, 0.09);
    --badge-patient-color: #336056;
    --badge-patient-border: rgba(74, 130, 114, 0.18);

    --badge-psychologist-bg: rgba(106, 168, 152, 0.09);
    --badge-psychologist-color: #4A8272;
    --badge-psychologist-border: rgba(106, 168, 152, 0.18);

    --color-request: #EA580C;
    --color-request-alpha-09: rgba(234, 88, 12, 0.09);
    --color-request-alpha-12: rgba(234, 88, 12, 0.12);
    --color-request-alpha-05: rgba(234, 88, 12, 0.05);
    --color-request-alpha-08: rgba(234, 88, 12, 0.08);
    --color-request-alpha-14: rgba(234, 88, 12, 0.14);
    --color-request-alpha-35: rgba(234, 88, 12, 0.35);
    --color-request-alpha-38: rgba(234, 88, 12, 0.38);

    --badge-admin-bg: rgba(122, 184, 208, 0.09);
    --badge-admin-color: #2A7090;
    --badge-admin-border: rgba(122, 184, 208, 0.18);

    --color-success: #2E7050;
    --color-success-light: #4A9068;
    --color-success-bg: #EEFAF4;
    --color-warning: #A8843A;
    --color-warning-light: #C8A458;
    --color-warning-bg: #FBF6E8;
    --color-danger: #A83A4A;
    --color-danger-light: #C45A6A;
    --color-danger-bg: #FDF2F4;
    --color-danger-alpha-07: rgba(168, 58, 74, 0.07);
    --color-danger-alpha-08: rgba(168, 58, 74, 0.08);
    --color-danger-alpha-10: rgba(168, 58, 74, 0.10);
    --color-danger-alpha-18: rgba(168, 58, 74, 0.18);
    --color-danger-alpha-22: rgba(168, 58, 74, 0.22);
    --color-info: #2A7090;
    --color-info-light: #7AB8D0;
    --color-info-bg: #EAF4FA;

    --text-dark: #0D1A14;
    --text-medium: #2E4A3E;
    --text-light-gray: #5A7A6E;
    --bg-light-gray: #F0F5F8;
    --bg-medium-gray: #E4EEE8;

    --body-bg: linear-gradient(140deg,
        #A8D8C8 0%,
        #B8D4F0 20%,
        #D4EAE0 40%,
        #B8CEE8 60%,
        #C4E4D8 80%,
        #A8D0E8 100%);

    --aurora-stop-1: rgba(74, 130, 114, 0.24);
    --aurora-stop-2: rgba(106, 168, 152, 0.20);
    --aurora-stop-3: rgba(122, 184, 208, 0.22);
    --aurora-stop-4: rgba(74, 130, 114, 0.24);
    --aurora-stop-5: rgba(51, 96, 86, 0.18);
    --aurora-stop-6: rgba(106, 168, 152, 0.20);
    --aurora-beam: rgba(106, 168, 152, 0.16);

    --aurora-orb-a: rgba(122, 184, 208, 0.38);
    --aurora-orb-a-outer: rgba(74, 130, 114, 0.16);
    --aurora-orb-b: rgba(74, 130, 114, 0.32);
    --aurora-orb-b-outer: rgba(51, 96, 86, 0.14);
    --main-bg: transparent;

    --blob-1: rgba(74, 130, 114, 0.34);
    --blob-2: rgba(122, 184, 208, 0.32);
    --blob-3: rgba(106, 168, 152, 0.26);
    --blob-4: rgba(51, 96, 86, 0.28);

    --container-orb-1: rgba(74, 130, 114, 0.22);
    --container-orb-2: rgba(122, 184, 208, 0.20);
    --container-orb-3: rgba(106, 168, 152, 0.18);
    --container-orb-4: rgba(74, 130, 114, 0.16);
    --container-orb-after: rgba(74, 130, 114, 0.14);

    --glass-card-bg: rgba(255, 255, 255, 0.65);
    --glass-card-border-color: rgba(74, 130, 114, 0.16);
    --glass-card-shadow:
        0 4px 24px rgba(40, 80, 70, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(74, 130, 114, 0.07);
    --glass-card-reflect-top: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    --glass-card-glint: linear-gradient(108deg, transparent 0%, rgba(255, 255, 255, 0.10) 38%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.10) 62%, transparent 100%);

    --tip-banner-border-color: rgba(106, 168, 152, 0.32);
    --tip-banner-bg: linear-gradient(120deg,
        rgba(12, 38, 32, 0.88) 0%,
        rgba(8, 28, 24, 0.92) 40%,
        rgba(10, 34, 28, 0.88) 70%,
        rgba(15, 44, 36, 0.86) 100%);
    --tip-orb-1: rgba(74, 130, 114, 0.58);
    --tip-orb-2: rgba(122, 184, 208, 0.48);
    --tip-orb-3: rgba(106, 168, 152, 0.38);

    --sidebar-bg: linear-gradient(175deg, #0F2620 0%, #183B30 30%, #1E4838 60%, #183B30 85%, #0F2620 100%);
    --sidebar-box-shadow: 4px 0 30px rgba(20, 60, 48, 0.28);
    --sidebar-border: rgba(74, 130, 114, 0.22);
    --sidebar-orb-a: rgba(106, 168, 152, 0.22);
    --sidebar-orb-a-outer: rgba(74, 130, 114, 0.08);
    --sidebar-orb-b: rgba(74, 130, 114, 0.18);
    --sidebar-orb-b-outer: rgba(51, 96, 86, 0.06);
    --sidebar-accent-line: linear-gradient(180deg, transparent 0%, rgba(106, 168, 152, 0.45) 30%, rgba(74, 130, 114, 0.55) 50%, rgba(106, 168, 152, 0.45) 70%, transparent 100%);

    --gradient-journal-face: linear-gradient(150deg, #1E5248 0%, #2E7A62 45%, #4A8272 100%);
    --journal-spine-gradient: linear-gradient(to right, #0d3028, #1E5248);

    --panel-divider-color: linear-gradient(90deg, transparent, rgba(74, 130, 114, 0.16), transparent);

    --icon-bg-primary: rgba(74, 130, 114, 0.14);

    --tip-shimmer: rgba(106, 168, 152, 0.65);
    --tip-title-gradient: linear-gradient(120deg, #DCFCE7 0%, #A8D8C8 40%, #7AB8D0 70%, #A8D8C8 100%);
    --tip-bar-fill: linear-gradient(90deg, #4A8272, #6AA898, #7AB8D0);
    --tip-text-desc: rgba(255, 255, 255, 0.88);
    --tip-icon-bg: rgba(106, 168, 152, 0.20);
    --tip-icon-border: rgba(106, 168, 152, 0.35);
    --tip-icon-color: rgba(220, 252, 231, 0.92);
    --tip-label-color: rgba(106, 168, 152, 0.85);
    --tip-counter-color: #FFFFFF;
    --tip-counter-sub: rgba(106, 168, 152, 0.70);
    --tip-nav-bg: rgba(106, 168, 152, 0.12);
    --tip-nav-border: rgba(106, 168, 152, 0.28);
    --tip-nav-color: rgba(200, 232, 220, 0.85);
    --tip-nav-hover-bg: rgba(106, 168, 152, 0.28);
    --tip-nav-hover-border: rgba(106, 168, 152, 0.55);
    --tip-nav-hover-color: #DCFCE7;
}

[data-theme="dark"] {
    --bg-primary: #0B0E14;
    --bg-secondary: #151921;
    --bg-card: rgba(21, 25, 33, 0.85);
    --card-bg: rgba(21, 25, 33, 0.85);
    --modal-bg: #151921;
    --bg-tertiary: #1E2330;
    --bg-gradient: linear-gradient(135deg, #151921 0%, #1E1040 100%);
    --glass-bg: rgba(21, 25, 33, 0.6);
    --glass-border: rgba(199, 125, 255, 0.12);

    --text-primary: #FFFFFF;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-on-gradient: #FFFFFF;

    --gradient-primary: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 100%);
    --gradient-secondary: linear-gradient(135deg, #9D4EDD 0%, #C77DFF 100%);
    --gradient-accent: linear-gradient(135deg, #7B2CBF 0%, #C77DFF 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);

    --color-primary: #C77DFF;
    --color-primary-light: #E0AAFF;
    --color-primary-dark: #9D4EDD;
    --color-secondary: #9D4EDD;
    --color-accent: #C77DFF;

    --color-primary-alpha-10: rgba(199, 125, 255, 0.1);
    --color-primary-alpha-15: rgba(199, 125, 255, 0.15);
    --color-primary-alpha-20: rgba(199, 125, 255, 0.2);
    --color-primary-alpha-50: rgba(199, 125, 255, 0.5);

    --gradient-primary-hover: linear-gradient(135deg, #5A189A 0%, #7B2CBF 100%);

    --skeleton-light: #151921;
    --skeleton-dark: #1E2330;

    --print-bg: #0B0E14;

    --border-color: rgba(199, 125, 255, 0.12);
    --border-color-light: rgba(199, 125, 255, 0.06);
    --border-color-focus: #C77DFF;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-colored: 0 10px 30px rgba(123, 44, 191, 0.35);

    --badge-patient-bg: rgba(199, 125, 255, 0.12);
    --badge-patient-color: #E0AAFF;
    --badge-patient-border: rgba(199, 125, 255, 0.25);

    --badge-psychologist-bg: rgba(157, 78, 221, 0.12);
    --badge-psychologist-color: #C77DFF;
    --badge-psychologist-border: rgba(157, 78, 221, 0.25);

    --badge-admin-bg: rgba(251, 113, 133, 0.12);
    --badge-admin-color: #fda4af;
    --badge-admin-border: rgba(251, 113, 133, 0.25);

    --color-request: #B04A08;
    --color-request-alpha-09: rgba(176, 74, 8, 0.09);
    --color-request-alpha-12: rgba(176, 74, 8, 0.12);
    --color-request-alpha-05: rgba(176, 74, 8, 0.05);
    --color-request-alpha-08: rgba(176, 74, 8, 0.08);
    --color-request-alpha-14: rgba(176, 74, 8, 0.14);
    --color-request-alpha-35: rgba(176, 74, 8, 0.35);
    --color-request-alpha-38: rgba(176, 74, 8, 0.38);

    --color-success: #34d399;
    --color-success-light: #6ee7b7;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-warning: #fbbf24;
    --color-warning-light: #fcd34d;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-danger: #f87171;
    --color-danger-light: #fca5a5;
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-danger-alpha-07: rgba(248, 113, 113, 0.07);
    --color-danger-alpha-08: rgba(248, 113, 113, 0.08);
    --color-danger-alpha-10: rgba(248, 113, 113, 0.10);
    --color-danger-alpha-18: rgba(248, 113, 113, 0.18);
    --color-danger-alpha-22: rgba(248, 113, 113, 0.22);
    --color-info: #60a5fa;
    --color-info-light: #93c5fd;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    --text-dark: #FFFFFF;
    --text-medium: #CBD5E1;
    --text-light-gray: #94A3B8;
    --bg-light-gray: #151921;
    --bg-medium-gray: #1E2330;

    --body-bg: var(--bg-primary);
    --aurora-stop-1: rgba(123, 44, 191, 0.14);
    --aurora-stop-2: rgba(199, 125, 255, 0.11);
    --aurora-stop-3: rgba(59, 130, 246, 0.09);
    --aurora-stop-4: rgba(157, 78, 221, 0.13);
    --aurora-stop-5: rgba(90, 24, 154, 0.11);
    --aurora-stop-6: rgba(199, 125, 255, 0.10);
    --aurora-beam: rgba(199, 125, 255, 0.08);
    --aurora-orb-a: rgba(139, 92, 246, 0.22);
    --aurora-orb-a-outer: rgba(123, 44, 191, 0.10);
    --aurora-orb-b: rgba(123, 44, 191, 0.18);
    --aurora-orb-b-outer: rgba(90, 24, 154, 0.08);
    --main-bg:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139, 92, 246, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(123, 44, 191, 0.13) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(90, 24, 154, 0.08) 0%, transparent 70%),
        transparent;
    --blob-1: rgba(123, 44, 191, 0.20);
    --blob-2: rgba(199, 125, 255, 0.17);
    --blob-3: rgba(59, 130, 246, 0.12);
    --blob-4: rgba(157, 78, 221, 0.15);
    --container-orb-1: rgba(123, 44, 191, 0.18);
    --container-orb-2: rgba(199, 125, 255, 0.14);
    --container-orb-3: rgba(157, 78, 221, 0.11);
    --container-orb-4: rgba(59, 130, 246, 0.08);
    --container-orb-after: rgba(123, 44, 191, 0.04);
    --glass-card-bg: rgba(11, 7, 28, 0.52);
    --glass-card-border-color: rgba(255, 255, 255, 0.11);
    --glass-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 80px rgba(123, 44, 191, 0.03);
    --glass-card-reflect-top: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, transparent 100%);
    --glass-card-glint: linear-gradient(108deg, transparent 0%, rgba(255, 255, 255, 0.018) 38%, rgba(255, 255, 255, 0.040) 50%, rgba(255, 255, 255, 0.018) 62%, transparent 100%);
    --tip-banner-border-color: rgba(199, 125, 255, 0.22);
    --tip-banner-bg: linear-gradient(120deg,
        rgba(30, 10, 70, 0.82) 0%,
        rgba(15, 5, 40, 0.88) 40%,
        rgba(25, 8, 60, 0.84) 70%,
        rgba(40, 12, 80, 0.82) 100%);
    --tip-orb-1: rgba(123, 44, 191, 0.55);
    --tip-orb-2: rgba(199, 125, 255, 0.40);
    --tip-orb-3: rgba(59, 130, 246, 0.28);
    --sidebar-bg: linear-gradient(175deg, #110825 0%, #1e0f3d 30%, #2a1752 60%, #1e0f3d 85%, #110825 100%);
    --sidebar-box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35);
    --sidebar-border: rgba(139, 92, 246, 0.12);
    --sidebar-orb-a: rgba(139, 92, 246, 0.20);
    --sidebar-orb-a-outer: rgba(168, 85, 247, 0.08);
    --sidebar-orb-b: rgba(124, 58, 237, 0.18);
    --sidebar-orb-b-outer: rgba(67, 56, 202, 0.06);
    --sidebar-accent-line: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.45) 30%, rgba(168, 85, 247, 0.55) 50%, rgba(139, 92, 246, 0.45) 70%, transparent 100%);

    --gradient-journal-face: linear-gradient(150deg, #3c1377 0%, #6b21a8 45%, #9d4edd 100%);
    --journal-spine-gradient: linear-gradient(to right, #1e0545, #3c1377);

    --panel-divider-color: linear-gradient(90deg, transparent, rgba(123, 44, 191, 0.14), transparent);

    --icon-bg-primary: rgba(123, 44, 191, 0.14);

    --tip-shimmer: rgba(199, 125, 255, 0.62);
    --tip-title-gradient: linear-gradient(120deg, #f3e8ff 0%, #c77dff 40%, #9d4edd 70%, #7b2cbf 100%);
    --tip-bar-fill: linear-gradient(90deg, #c77dff, #7b2cbf, #9d4edd);
    --tip-text-desc: rgba(209, 196, 233, 0.85);
    --tip-icon-bg: rgba(199, 125, 255, 0.16);
    --tip-icon-border: rgba(199, 125, 255, 0.28);
    --tip-icon-color: #e9d5ff;
    --tip-label-color: rgba(199, 125, 255, 0.72);
    --tip-counter-color: #e9d5ff;
    --tip-counter-sub: rgba(199, 125, 255, 0.58);
    --tip-nav-bg: rgba(199, 125, 255, 0.08);
    --tip-nav-border: rgba(199, 125, 255, 0.24);
    --tip-nav-color: rgba(209, 196, 233, 0.82);
    --tip-nav-hover-bg: rgba(199, 125, 255, 0.22);
    --tip-nav-hover-border: rgba(199, 125, 255, 0.48);
    --tip-nav-hover-color: #e9d5ff;
}

body {
    background: var(--body-bg);
    color: var(--text-primary);
    transition: background 0.5s ease, color 0.3s ease;
    font-family: 'Inter', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    overflow-x: hidden;
}



.card-themed {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.card-themed:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-card {
    background-color: var(--bg-card) !important;
}

.border-themed {
    border-color: var(--border-color) !important;
}

.gradient-bg {
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
}

.shadow-themed-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-themed-md {
    box-shadow: var(--shadow-md);
}

.shadow-themed-lg {
    box-shadow: var(--shadow-lg);
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.role-badge.patient {
    background: var(--badge-patient-bg);
    color: var(--badge-patient-color);
    border: 1px solid var(--badge-patient-border);
}

.role-badge.psychologist {
    background: var(--badge-psychologist-bg);
    color: var(--badge-psychologist-color);
    border: 1px solid var(--badge-psychologist-border);
}

.role-badge.admin {
    background: var(--badge-admin-bg);
    color: var(--badge-admin-color);
    border: 1px solid var(--badge-admin-border);
}

.btn-primary-themed {
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.btn-primary-themed:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.input-themed {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.input-themed:focus {
    outline: none;
    border-color: var(--border-color-focus);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}

.input-themed::placeholder {
    color: var(--text-muted);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--color-primary-alpha-15);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

*:focus-visible {
    outline: 3px solid var(--color-primary-alpha-50);
    outline-offset: 2px;
}

::selection {
    background: var(--color-primary-alpha-20);
    color: var(--text-primary);
}

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

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 8px;
    border: 2px solid var(--bg-tertiary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-secondary);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@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;
    }
}