* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #f5f7fa;
    --color-bg-secondary: #ebf0f5;
    --color-bg-sidebar: rgba(244, 247, 250, 0.92);
    --color-border: #d7e0e8;
    --color-border-soft: rgba(148, 163, 184, 0.22);
    --color-text: #10243d;
    --color-text-secondary: #526379;
    --color-text-tertiary: #7f8da0;
    --color-primary: #1457d4;
    --color-primary-light: #3d81ff;
    --color-primary-bg: #e8f0ff;
    --color-success: #0f9b6f;
    --color-warning: #f59e0b;
    --color-accent-green: #10b981;
    --color-accent-blue: #2563eb;
    --color-accent-purple: #7c3aed;
    --color-accent-orange: #f59e0b;
    --color-surface-elevated: rgba(255, 255, 255, 0.82);
    --color-scrollbar: rgba(82, 99, 121, 0.35);
    --shadow-sm: 0 8px 20px rgba(16, 36, 61, 0.06);
    --shadow-md: 0 14px 36px rgba(16, 36, 61, 0.12);
    --shadow-lg: 0 26px 64px rgba(16, 36, 61, 0.16);
    --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.08);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

body.dark-mode {
    --color-bg: #07111d;
    --color-bg-secondary: #0f1c2b;
    --color-bg-sidebar: rgba(9, 19, 32, 0.92);
    --color-border: #193047;
    --color-border-soft: rgba(71, 104, 139, 0.28);
    --color-text: #eef4ff;
    --color-text-secondary: #9eb0c5;
    --color-text-tertiary: #70849b;
    --color-primary-bg: #132947;
    --color-surface-elevated: rgba(11, 22, 36, 0.84);
    --color-scrollbar: rgba(158, 176, 197, 0.28);
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 20px 54px rgba(0, 0, 0, 0.28);
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    min-height: 100vh;
}

body.app-active {
    overflow: hidden;
    height: 100vh;
}

button,
input,
select,
textarea {
    font: inherit;
}

.container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}