:root {
    --ui-bg: #f4f6f5;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8faf9;
    --ui-ink: #241723;
    --ui-muted: #746b73;
    --ui-line: #e7e2e6;
    --ui-brand: #52154e;
    --ui-brand-strong: #3d103a;
    --ui-brand-soft: #f4eaf2;
    --ui-accent: #f47b0b;
    --ui-success: #17755b;
    --ui-shadow-sm: 0 2px 10px rgba(36, 23, 35, .05);
    --ui-shadow-md: 0 16px 42px rgba(36, 23, 35, .09);
}

body {
    background: var(--ui-bg);
    color: var(--ui-ink);
}

.app-shell {
    grid-template-columns: 272px minmax(0, 1fr);
}

.sidebar {
    width: 272px;
    padding: 18px 14px;
    background: var(--ui-brand-strong);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.sidebar .brand-utb {
    min-height: 92px;
    border-radius: 8px;
    margin: 0 0 12px;
    box-shadow: 0 10px 28px rgba(21, 6, 20, .18);
}

.sidebar .brand-utb img { width: 154px; }
.sidebar-menu { padding: 0 3px 16px; }
.nav-section {
    padding: 18px 12px 7px;
    color: #d6a5ce;
    font-size: 10px;
    letter-spacing: .12em;
}

.side-link {
    min-height: 44px;
    margin: 3px 0;
    padding: 9px 11px;
    border-radius: 7px;
    color: #e8dce6;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.side-link:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transform: translateX(2px);
}

.side-link.active {
    background: #fff;
    color: var(--ui-brand-strong);
    box-shadow: var(--ui-shadow-sm);
}

.nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    font-size: 10px;
    font-weight: 800;
}

.side-link.active .nav-icon {
    background: var(--ui-brand-soft);
    color: var(--ui-brand);
}

.sidebar-user {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.main { grid-column: 2; }
.topbar {
    height: 74px;
    padding: 0 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 0 var(--ui-line);
    border: 0;
}

.global-search input,
.search {
    min-height: 44px;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-line) !important;
    border-radius: 7px !important;
}

.top-action,
.btn,
.icon-btn {
    border-radius: 7px !important;
}

.top-action-danger,
.btn-dark { background: var(--ui-brand) !important; }
.btn-primary { background: var(--ui-accent) !important; }
.page { padding: 34px 34px 56px; }
.page-title-row { margin-bottom: 28px; }
.page h1 {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: 0;
}

.eyebrow { color: var(--ui-accent); }
.metric-grid { gap: 18px; }
.metric,
.panel,
.form-card,
.modal-card {
    background: var(--ui-surface);
    border-color: var(--ui-line);
    border-radius: 8px;
    box-shadow: var(--ui-shadow-sm);
}

.metric {
    min-height: 132px;
    padding: 20px 22px;
}

.metric-value {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 760;
    letter-spacing: 0;
}

.panel-head { background: var(--ui-surface-soft); }
.data-table th {
    background: var(--ui-surface-soft);
    color: #665c65;
    font-size: 10px;
}

.data-table tbody tr { transition: background-color .15s ease; }
.data-table tbody tr:hover { background: #fcfafb; }
.field input,
.field select,
.field textarea,
.filter-box {
    background: #fff;
    border-color: #ded8dd;
    border-radius: 7px;
}

.field input,
.field select { min-height: 46px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 3px rgba(82, 21, 78, .1);
}

.modal { background: rgba(28, 18, 27, .58); backdrop-filter: blur(5px); }
.modal-head { background: var(--ui-surface-soft); }
.status { border-radius: 999px; }

.auth-page {
    background: var(--ui-bg);
    grid-template-columns: minmax(420px, 1.08fr) minmax(440px, .92fr);
}

.auth-art {
    min-height: 100vh;
    padding: clamp(44px, 5vw, 76px);
    background: var(--ui-brand-strong);
    border-right: 6px solid var(--ui-accent);
}

.auth-art:before {
    content: "UTB";
    position: absolute;
    right: 5%;
    bottom: 5%;
    color: rgba(255, 255, 255, .035);
    font-size: clamp(130px, 22vw, 340px);
    line-height: .8;
    font-weight: 900;
    letter-spacing: 0;
}

.auth-art:after { display: none; }
.auth-art > * { position: relative; z-index: 1; }
.auth-art h1 {
    max-width: 650px;
    margin: 18px 0 24px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(42px, 4.2vw, 68px);
    line-height: 1.02;
    font-weight: 760;
    letter-spacing: 0;
}

.auth-art p { font-size: 17px; }
.auth-form-wrap {
    padding: clamp(28px, 5vw, 72px);
    background: var(--ui-surface);
}

.auth-form {
    width: min(460px, 100%);
    padding: 0;
}

.auth-form h2 {
    margin: 12px 0 8px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 38px;
    font-weight: 760;
    letter-spacing: 0;
}

.auth-form > p { margin-bottom: 34px; }
.auth-form .field { margin-bottom: 20px; }
.auth-form .field label { font-size: 13px; }
.auth-form .field input {
    min-height: 54px;
    padding: 0 15px;
    background: #fff;
    border-color: #d9d3d8;
}

.auth-form .btn {
    min-height: 54px;
    margin-top: 16px;
    box-shadow: 0 14px 28px rgba(244, 123, 11, .2);
}

.password-toggle {
    color: var(--ui-brand) !important;
}

@media (max-width: 900px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .auth-form-wrap { min-height: 100vh; }
}

@media (max-width: 780px) {
    .app-shell { display: block; }
    .sidebar { width: 272px; }
    .main { grid-column: auto; }
    .page { padding: 24px 16px 42px; }
}