:root {
    --belinsky-navy: #0b2d7a;
    --belinsky-blue: #1748b8;
    --belinsky-bright: #5488ff;
    --belinsky-sky: #dce7ff;
    --belinsky-mist: #eef3ff;
    --belinsky-paper: #f8faff;
    --belinsky-line: #d7e1f7;
    --belinsky-ink: #13234b;
    --belinsky-muted: #667499;

    --bg: var(--belinsky-paper);
    --background: var(--belinsky-paper);
    --page-bg: var(--belinsky-paper);
    --surface: #ffffff;
    --surface-soft: var(--belinsky-mist);
    --panel: #ffffff;
    --card: #ffffff;
    --line: var(--belinsky-line);
    --border: var(--belinsky-line);
    --ink: var(--belinsky-ink);
    --text: var(--belinsky-ink);
    --muted: var(--belinsky-muted);
    --primary: var(--belinsky-blue);
    --accent: var(--belinsky-bright);
    --brand: var(--belinsky-blue);
}

html {
    background: var(--belinsky-paper);
}

body {
    color: var(--belinsky-ink);
    background:
        radial-gradient(circle at 92% 2%, rgba(84, 136, 255, 0.18), transparent 27rem),
        radial-gradient(circle at 4% 96%, rgba(23, 72, 184, 0.08), transparent 30rem),
        linear-gradient(145deg, #fbfcff 0%, #f2f6ff 50%, #f8faff 100%);
}

::selection {
    color: #ffffff;
    background: var(--belinsky-blue);
}

a {
    text-decoration-color: rgba(23, 72, 184, 0.35);
}

a:hover {
    text-decoration-color: var(--belinsky-blue);
}

.app-shell,
.main-shell,
.page-shell,
.content-shell {
    background: transparent;
}

.sidebar,
.auth-side {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 255, 0.96));
    border-color: var(--belinsky-line);
}

.sidebar::before,
.auth-side::before {
    background: linear-gradient(90deg, var(--belinsky-navy), var(--belinsky-bright));
}

.brand,
.auth-brand {
    color: var(--belinsky-navy);
}

.brand-mark,
.auth-brand-mark {
    filter: drop-shadow(0 7px 14px rgba(11, 45, 122, 0.16));
}

.nav-label,
.eyebrow,
.section-label,
.card-label,
.metric-label,
.field-hint,
.brand-subtitle {
    color: var(--belinsky-muted);
}

.nav-item,
.nav-subitem,
.sidebar-collapse-button,
.icon-button,
.avatar-button,
.search-bar {
    border-color: var(--belinsky-line);
}

.nav-item:hover,
.nav-subitem:hover,
.sidebar-collapse-button:hover,
.icon-button:hover {
    color: var(--belinsky-navy);
    background: var(--belinsky-mist);
    border-color: #bdcdf2;
}

.nav-item.active,
.nav-item.is-active,
.nav-subitem.active,
.nav-subitem.is-active,
.nav-item[aria-current="page"],
.nav-subitem[aria-current="page"] {
    color: var(--belinsky-navy);
    background: linear-gradient(135deg, #ffffff, #e8efff);
    border-color: #b9caf1;
    box-shadow: 0 12px 28px rgba(23, 72, 184, 0.11);
}

.nav-item.active .nav-icon,
.nav-item.is-active .nav-icon,
.nav-subitem.active,
.nav-subitem.is-active {
    color: var(--belinsky-blue);
}

.card,
.panel,
.page-card,
.metric-card,
.summary-card,
.editor-card,
.list-card,
.table-card,
.table-shell,
.side-card,
.action-card,
.filter-card,
.toolbar-card,
.auth-card,
.auth-panel,
.modal-card {
    border-color: var(--belinsky-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(20, 54, 125, 0.08);
}

.page-title,
.section-title,
.card-title,
.metric-value,
.summary-value,
h1,
h2,
h3 {
    color: var(--belinsky-ink);
}

.page-subtitle,
.section-description,
.card-description,
.metric-description,
.summary-description,
.helper-text,
.empty-state p {
    color: var(--belinsky-muted);
}

.button-primary,
.btn-primary,
.primary-button,
.button.primary,
.button.dark,
a.primary-action {
    color: #ffffff;
    background: linear-gradient(135deg, var(--belinsky-navy), var(--belinsky-blue));
    border-color: var(--belinsky-navy);
    box-shadow: 0 12px 25px rgba(23, 72, 184, 0.2);
}

.button-primary:hover,
.btn-primary:hover,
.primary-button:hover,
.button.primary:hover,
.button.dark:hover,
a.primary-action:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--belinsky-blue), var(--belinsky-bright));
    border-color: var(--belinsky-blue);
}

input,
select,
textarea {
    color: var(--belinsky-ink);
    border-color: var(--belinsky-line);
    background-color: #ffffff;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #b5c7ef;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--belinsky-bright);
    outline-color: rgba(84, 136, 255, 0.28);
    box-shadow: 0 0 0 4px rgba(84, 136, 255, 0.12);
}

table th,
.table th {
    color: #53658f;
    background: #f2f6ff;
    border-color: var(--belinsky-line);
}

table td,
.table td,
.list-row {
    border-color: var(--belinsky-line);
}

table tbody tr:hover,
.table tbody tr:hover,
.list-row:hover {
    background: #f5f8ff;
}

.badge:not(.success):not(.danger):not(.warning),
.pill:not(.success):not(.danger):not(.warning),
.chip:not(.success):not(.danger):not(.warning) {
    color: var(--belinsky-navy);
    background: var(--belinsky-mist);
    border-color: #c6d5f5;
}

.pagination .active,
.pagination [aria-current="page"] {
    color: #ffffff;
    background: var(--belinsky-blue);
    border-color: var(--belinsky-blue);
}

.modal-backdrop {
    background: rgba(8, 25, 65, 0.52);
}

@media (max-width: 760px) {
    body {
        background:
            radial-gradient(circle at 100% 0%, rgba(84, 136, 255, 0.14), transparent 20rem),
            var(--belinsky-paper);
    }
}