:root {
    color-scheme: dark;

    --bg: #0c1117;
    --bg-2: #101822;
    --bg-3: #141e2a;

    --surface: #192130;
    --surface-solid: #192130;
    --surface-2: #1e2a3e;
    --surface-3: #253348;
    --surface-muted: #2c3d58;
    --surface-soft: #364a6e;
    --surface-hover: #3e567c;

    --sidebar: #07101a;
    --sidebar-2: #0a1320;
    --sidebar-3: #0d1827;
    --sidebar-text: #edf3fb;
    --sidebar-text-muted: #8aa0ba;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --border: rgba(140, 165, 200, 0.18);
    --border-soft: rgba(140, 165, 200, 0.10);
    --border-strong: rgba(140, 165, 200, 0.30);

    --text-1: #edf3fb;
    --text-2: #c4d2e5;
    --text-3: #7e96b2;
    --text-4: #58728a;

    --accent: #4f68e8;
    --accent-strong: #7d93f4;
    --accent-soft: rgba(79, 104, 232, 0.16);
    --accent-soft-2: rgba(79, 104, 232, 0.26);

    --success: #1cb870;
    --success-soft: rgba(28, 184, 112, 0.14);
    --warning: #d4952e;
    --warning-soft: rgba(212, 149, 46, 0.14);
    --danger: #e04e64;
    --danger-soft: rgba(224, 78, 100, 0.14);
    --info: #4a88e2;
    --info-soft: rgba(74, 136, 226, 0.14);

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.36);

    --r-xs: 6px;
    --r-sm: 10px;
    --r: 14px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 30px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    --content-max: 1440px;
}

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

html, body {
    height: 100%;
    height: 100dvh;
}

html {
    background: var(--bg);
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(79, 104, 232, 0.10), transparent 28%),
        radial-gradient(circle at top right, rgba(74, 136, 226, 0.07), transparent 22%),
        radial-gradient(circle at bottom center, rgba(28, 184, 112, 0.04), transparent 26%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 48%, var(--bg-3) 100%);
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

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

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 12px;
    z-index: 500;
    background: var(--accent);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    transition: top 0.14s ease;
}
.skip-link:focus {
    top: 0;
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(127, 143, 255, 0.85);
    outline-offset: 2px;
}