:root {
    --admin-accent: #7950a1;
    --admin-solid: #704494;
    --admin-strong: color-mix(in srgb, var(--admin-solid) 84%, #1c1225);
    --admin-tint: color-mix(in srgb, var(--admin-accent) 7%, #fff);
    --admin-soft: color-mix(in srgb, var(--admin-accent) 13%, #fff);
    --admin-border: color-mix(in srgb, var(--admin-accent) 19%, #fff);
    --admin-halo: color-mix(in srgb, var(--admin-accent) 24%, transparent);
    --admin-nav: color-mix(in srgb, var(--admin-accent) 28%, #251b2e);
    --admin-nav-dark: color-mix(in srgb, var(--admin-accent) 10%, #1f1828);
    --bg-primary: var(--admin-tint);
    --bg-sidebar: var(--admin-nav);
    --bg-input: color-mix(in srgb, var(--admin-accent) 4%, #fff);
    --border-dim: var(--admin-border);
    --neon-blue: var(--admin-solid);
    --neon-purple: var(--admin-accent);
    --text-title: #261e30;
    --text-bright: #3d3449;
    --text-muted: #686071;
}

@supports (color: oklch(from #fff l c h)) {
    :root {
        /* Keep white labels readable even when the chosen color is pale. */
        --admin-solid: oklch(from var(--admin-accent) clamp(.33, l, .51) min(c, .16) h);
    }
}

.admin-wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    letter-spacing: 0;
    white-space: nowrap;
}

.admin-wordmark-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.admin-wordmark-domain {
    margin-inline-start: .24em;
    font-weight: 650;
    color: var(--admin-solid);
}

.sidebar {
    background: linear-gradient(170deg, var(--admin-nav), var(--admin-nav-dark) 75%);
}

.sidebar-brand {
    padding: 16px 17px;
    text-align: start;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.sidebar-brand .admin-wordmark { font-size: 17px; }
.sidebar-brand .admin-wordmark-domain { color: #f0defc; }

.sidebar-menu .menu-header {
    color: rgba(255, 255, 255, .70) !important;
    letter-spacing: .035em;
}

.sidebar-menu li a {
    margin: 2px 10px;
    padding: 10px 10px;
    border-radius: 8px;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: rgba(255, 255, 255, .14);
    border-left-color: #efdfff;
}

.sidebar-menu li a.active::before { display: none; }
.sidebar a:focus-visible { outline: 2px solid #efdfff; outline-offset: -2px; }

.top-bar {
    margin: 0;
    padding: 15px 24px;
    border: 0;
    border-bottom: 1px solid var(--admin-border);
    border-radius: 0;
    box-shadow: none;
}

.admin-top-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.admin-account-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

#admin-appearance-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    min-height: 36px;
}

.stat-card {
    border: 1px solid var(--admin-border);
    border-top: 3px solid var(--admin-accent);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgb(46 29 60 / 5%);
}

.card { border-color: var(--admin-border); box-shadow: 0 3px 12px rgb(46 29 60 / 5%); }
.card:hover { border-color: var(--admin-border); box-shadow: 0 5px 16px rgb(46 29 60 / 8%); }
.card-header, .card-footer { background-color: var(--admin-tint); border-color: var(--admin-border); }

.btn-primary, .login-card .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--admin-solid);
    --bs-btn-border-color: var(--admin-solid);
    --bs-btn-hover-bg: var(--admin-strong);
    --bs-btn-hover-border-color: var(--admin-strong);
    --bs-btn-active-bg: var(--admin-strong);
    --bs-btn-active-border-color: var(--admin-strong);
    --bs-btn-disabled-bg: var(--admin-solid);
    --bs-btn-disabled-border-color: var(--admin-solid);
    background: var(--admin-solid);
}

.btn-primary:hover, .login-card .btn-primary:hover {
    background: var(--admin-strong);
    box-shadow: 0 4px 12px var(--admin-halo);
}

.btn-outline-primary {
    --bs-btn-color: var(--admin-solid);
    --bs-btn-border-color: var(--admin-border);
    --bs-btn-hover-color: var(--admin-strong);
    --bs-btn-hover-bg: var(--admin-soft);
    --bs-btn-hover-border-color: var(--admin-solid);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--admin-solid);
    --bs-btn-active-border-color: var(--admin-solid);
    border-color: var(--admin-border);
}

.btn-outline-primary:hover, .dropdown-item:hover { background: var(--admin-soft); }

.btn-primary:focus-visible, .btn-outline-primary:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.login-card .form-control:focus {
    border-color: var(--admin-solid);
    box-shadow: 0 0 0 3px var(--admin-halo);
}

.bg-primary {
    background-color: color-mix(in srgb, var(--admin-solid) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;
}

.badge.bg-primary {
    background: var(--admin-soft) !important;
    color: var(--admin-strong);
    border-color: var(--admin-border);
}

.page-link { color: var(--admin-solid); }
.active > .page-link, .page-link.active { background: var(--admin-solid); border-color: var(--admin-solid); }
a:hover { color: var(--admin-strong); }

.login-container {
    min-height: 100vh;
    min-height: 100svh;
    padding: 32px;
    background:
        radial-gradient(ellipse at 14% 10%, var(--admin-soft), transparent 48%),
        radial-gradient(ellipse at 90% 85%, #f7eaf2, transparent 45%),
        var(--admin-tint);
}

.login-container::before, .login-container::after { content: none; }

.admin-login-panel {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(330px, 1fr);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    background: #fff;
    box-shadow: 0 24px 70px rgb(58 36 77 / 12%);
}

.admin-login-visual {
    display: flex;
    align-items: center;
    background: #e1c9ea;
    overflow: hidden;
}

/* Display the upper illustration from the supplied two-panel reference. */
.admin-login-art {
    position: relative;
    width: 100%;
    aspect-ratio: 796 / 592;
    overflow: hidden;
}

.admin-login-art img {
    position: absolute;
    display: block;
    width: 181.91%;
    max-width: none;
    height: auto;
    left: -40.96%;
    top: -2.2%;
}

.admin-login-panel .login-card {
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 5vw, 58px);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-login-panel .admin-wordmark { font-size: clamp(20px, 2.8vw, 27px); }
.admin-login-panel .admin-wordmark-icon { width: 48px; height: 48px; }
.admin-login-panel h1 { margin: 28px 0 22px; font-size: 1.48rem; font-weight: 700; }
.admin-login-panel .form-control { min-height: 44px; }
.admin-login-panel .btn-primary { margin-top: 4px; min-height: 44px; }

.admin-accent-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.admin-accent-preset {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    text-align: start;
    background: #fff;
    border: 1px solid var(--admin-border);
    color: var(--text-bright);
    border-radius: 9px;
}
.admin-accent-preset[aria-pressed="true"] {
    border-color: var(--admin-solid);
    background: var(--admin-tint);
    box-shadow: inset 0 0 0 1px var(--admin-solid);
}
.admin-accent-dot { width: 19px; height: 19px; border-radius: 50%; background: var(--swatch); }
.admin-accent-row { display: flex; align-items: center; gap: 11px; }
#admin-appearance-status { min-height: 1.5em; color: var(--text-muted); }

@media (max-width: 760px) {
    .top-bar { margin: 0; padding: 12px 16px; }
    .admin-top-actions { gap: 8px; }
    .login-container { padding: 18px; }
    .admin-login-panel { max-width: 450px; grid-template-columns: minmax(0, 1fr); border-radius: 17px; }
    .admin-login-visual { max-height: 220px; align-items: flex-start; }
    .admin-login-panel .login-card { padding: 24px; }
    .admin-login-panel .admin-wordmark-icon { width: 38px; height: 38px; }
    .admin-login-panel h1 { margin: 20px 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-menu li a, .login-card .btn { transition: none; }
}