html, body {
    min-height: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--site-bg);
}

body {
    font-family: var(--font-family);
    background:
        radial-gradient(circle at top left, rgba(68, 110, 255, 0.20), transparent 28%),
        radial-gradient(circle at top right, rgba(32, 140, 255, 0.12), transparent 22%),
        linear-gradient(135deg, var(--site-bg) 0%, var(--site-surface-alt) 100%);
    color: var(--site-text);
    margin: 0;
    border: 0;
    outline: 0;
    transition: background .25s ease, color .25s ease;
    overflow-x: hidden;
}

body.theme-dark,
html[data-mode="dark"] body {
    border: 0 !important;
    outline: 0 !important;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.glass-panel {
    background: color-mix(in srgb, var(--site-surface) 92%, transparent);
    border: none;
    box-shadow: var(--site-shadow);
    backdrop-filter: blur(18px);
}

.glass-soft {
    background: color-mix(in srgb, var(--site-box) 88%, transparent);
    border: none;
}

.btn-brand {
    border: none;
    background: linear-gradient(135deg, var(--site-primary), color-mix(in srgb, var(--site-primary) 76%, white));
    color: var(--site-primary-text);
    border-radius: 12px;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--site-primary) 25%, transparent);
}

.btn-brand:hover {
    color: var(--site-primary-text);
    transform: translateY(-1px);
}

.card-ui {
    background: var(--site-card);
    border: none;
    border-radius: 28px;
    box-shadow: var(--site-shadow);
}

.badge-ui {
    background: color-mix(in srgb, var(--site-primary) 16%, transparent);
    color: var(--site-primary);
    padding: .5rem .8rem;
    border-radius: 999px;
    font-weight: 600;
}

.text-body-secondary {
    color: var(--site-muted) !important;
}

.page-shell {
    width: min(1400px, calc(100% - 32px));
    margin: 0 auto;
}

.content-panel {
    background: var(--site-surface);
    border: none;
    border-radius: 32px;
    box-shadow: var(--site-shadow);
}
