:root {
    --space-blue: #111744;
    --electric-blue: #1d5bee;
    --mint: #00c98b;
    --page-bg: #f4f6fb;
    --sidebar-width: 272px;
    --sidebar-collapsed-width: 84px;
    --sidebar-start: #111744;
    --sidebar-end: #0e1235;
    --sidebar-text: #ffffff;
    --sidebar-active: #1d5bee;
    --topbar-bg: #ffffff;
    --text: #172033;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--page-bg); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1030; display: flex; flex-direction: column; color: var(--sidebar-text); background: linear-gradient(180deg, var(--sidebar-start) 0%, var(--sidebar-end) 100%); box-shadow: 12px 0 35px rgba(17, 23, 68, .12); transition: width .22s ease; }
.sidebar-brand { min-height:100px; display:flex; align-items:center; gap:.85rem; color:var(--sidebar-text); text-decoration:none; padding:1.25rem 1.35rem; overflow:hidden; }
.sidebar-brand.has-custom-logo { justify-content:center; }
.sidebar-brand strong { display: block; font-size: 1.05rem; }
.sidebar-brand small { display: block; color: rgba(255,255,255,.6); font-size: .72rem; }
.brand-mark { width: 48px; height: 48px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(145deg, var(--electric-blue), #4f7fff); box-shadow: 0 10px 24px rgba(29, 91, 238, .35); }
.brand-logo { display:block; object-fit:contain; object-position:center; flex:0 0 auto; }
.brand-logo-expanded { width:auto; max-width:210px; height:58px; }
.brand-logo-compact { display:none; width:48px; height:48px; }
.sidebar-collapse { position:absolute; right:-15px; top:30px; width:30px; height:30px; border:1px solid #dce1eb; border-radius:50%; color:var(--space-blue); background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.sidebar-nav { padding: .5rem .8rem; flex: 1; }
.nav-item { display: flex; align-items: center; gap: .8rem; color: color-mix(in srgb, var(--sidebar-text) 72%, transparent); padding: .82rem 1rem; margin: .24rem 0; border-radius: 12px; text-decoration: none; transition: .18s ease; }
.nav-item i { width: 22px; font-size: 1.08rem; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { color: #fff; background: var(--sidebar-active); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.sidebar-footer { padding: 1.2rem 1.3rem 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer a { color: #8fb0ff; font-size: .82rem; }
.main-area { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left .22s ease; }
body.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-area { margin-left:var(--sidebar-collapsed-width); }
body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .sidebar-footer { display:none; }
body.sidebar-collapsed .sidebar-brand { justify-content:center; padding-inline:.6rem; }
body.sidebar-collapsed .brand-logo-expanded { display:none!important; }
body.sidebar-collapsed .brand-logo-compact { display:flex!important; }
body.sidebar-collapsed .sidebar-nav { padding-inline:.55rem; }
body.sidebar-collapsed .nav-item { justify-content:center; padding-inline:.7rem; }
body.sidebar-collapsed .nav-item i { width:auto; font-size:1.25rem; }
body.sidebar-collapsed .sidebar-collapse i::before { transform:rotate(180deg); }
.topbar { height: 92px; padding: 1.15rem 2rem; background: color-mix(in srgb, var(--topbar-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid #e7eaf2; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.35rem; margin: 0; font-weight: 750; color: var(--space-blue); }
.topbar p { margin: .15rem 0 0; color: #7b8498; font-size: .82rem; }
.status-pill { margin-left: auto; background: #e7faf4; color: #087a58; border: 1px solid #c7f1e4; border-radius: 99px; padding: .45rem .75rem; font-size: .78rem; font-weight: 700; }
.status-pill span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-right: .35rem; box-shadow: 0 0 0 4px rgba(0,201,139,.13); }
.content-wrap { padding: 1.6rem 2rem 3rem; }
.card { border-color: #e7eaf2; border-radius: 16px; }
.card-header { border-bottom-color: #edf0f6; background: #fff; border-radius: 16px 16px 0 0 !important; padding: 1rem 1.2rem; }
.metric-card { overflow: hidden; position: relative; }
.metric-card .card-body { padding: 1.3rem; }
.metric-label { color: #778096; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.metric-value { color: var(--space-blue); font-size: 2rem; font-weight: 800; margin: .35rem 0 0; }
.metric-icon { width: 45px; height: 45px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: var(--electric-blue); background: #edf2ff; font-size: 1.2rem; }
.btn-primary { --bs-btn-bg: var(--electric-blue); --bs-btn-border-color: var(--electric-blue); --bs-btn-hover-bg: #174ed1; --bs-btn-hover-border-color: #174ed1; }
.table { --bs-table-bg: transparent; }
.table thead th { color: #727c91; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }
.badge-soft-success { background: #e4f8f1; color: #087a58; }
.badge-soft-danger { background: #ffeaee; color: #b4233c; }
.badge-soft-primary { background: #eaf0ff; color: #174ed1; }
.code-box { color: #dfe6ff; background: #101633; border-radius: 12px; padding: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; }
.token-display { word-break: break-all; color: #caffe9; background: #0f1830; border: 1px solid #2b3d62; border-radius: 12px; padding: 1rem; font-family: ui-monospace, monospace; }
.auth-body { min-height: 100vh; position:relative; isolation:isolate; overflow-x:hidden; background:var(--login-overlay-color,#0d1239); }
.auth-body::before { content:""; position:fixed; z-index:-2; inset:-30px; background-image:var(--login-bg-image,radial-gradient(circle at 10% 20%,rgba(29,91,238,.35),transparent 28%),linear-gradient(145deg,#0d1239,#182363)); background-size:cover; background-position:center; filter:blur(calc(var(--login-bg-blur,0) * 1px)) brightness(calc(var(--login-bg-brightness,100) * 1%)) grayscale(calc(var(--login-bg-grayscale,0) * 1%)); transform:scale(1.04); }
.auth-body::after { content:""; position:fixed; z-index:-1; inset:0; background:var(--login-overlay-color,#0d1239); opacity:calc(var(--login-overlay-opacity,62) / 100); }
.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.auth-card { max-width:520px; width:100%; background:rgba(255,255,255,calc(var(--login-card-opacity,92) / 100)); backdrop-filter:blur(calc(var(--login-card-blur,14) * 1px)); -webkit-backdrop-filter:blur(calc(var(--login-card-blur,14) * 1px)); }
.captcha-row { display:grid; grid-template-columns:minmax(150px,220px) 48px 1fr; gap:.5rem; align-items:center; }
.captcha-row img { width:100%; height:58px; border:1px solid #dce1eb; border-radius:10px; }
.form-control, .form-select { border-color: #dce1eb; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #82a5ff; box-shadow: 0 0 0 .2rem rgba(29,91,238,.12); }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-105%); transition: transform .2s ease; }
    .sidebar.show { transform: translateX(0); }
    .main-area { margin-left: 0; }
    .content-wrap { padding: 1.2rem; }
    .topbar { padding: 1rem 1.2rem; }
    .status-pill { display: none; }
    .sidebar-collapse { display:none; }
    body.sidebar-collapsed .main-area { margin-left:0; }
}
@media(max-width:575px){.captcha-row{grid-template-columns:1fr 48px}.captcha-row input{grid-column:1/-1}}

.theme-dark { --text:#e8ecf7; --page-bg:#111522; color-scheme:dark; }
.theme-dark .card,.theme-dark .card-header,.theme-dark .topbar { background-color:#1b2030; color:#e8ecf7; border-color:#30374a; }
.theme-dark .topbar h1,.theme-dark .metric-value { color:#f1f4ff; }
.theme-dark .text-secondary,.theme-dark .topbar p { color:#aab2c5!important; }
.theme-dark .form-control,.theme-dark .form-select,.theme-dark .input-group-text { color:#e8ecf7; background-color:#141927; border-color:#394156; }
.theme-dark .table { --bs-table-color:#e8ecf7; --bs-table-border-color:#30374a; }
.appearance-preview { min-height:300px; border-radius:16px; overflow:hidden; display:grid; grid-template-columns:92px 1fr; border:1px solid #dce1eb; background:var(--preview-page,#f4f6fb); }
.appearance-preview-sidebar { background:linear-gradient(180deg,var(--preview-start,#111744),var(--preview-end,#0e1235)); padding:1rem .7rem; color:var(--preview-text,#fff); }
.appearance-preview-nav { height:34px; border-radius:9px; margin:.55rem 0; background:color-mix(in srgb,var(--preview-text,#fff) 15%,transparent); }
.appearance-preview-nav.active { background:var(--preview-active,#1d5bee); }
.appearance-preview-main { padding:1rem; }
.appearance-preview-top { height:52px; margin:-1rem -1rem 1rem; background:var(--preview-top,#fff); border-bottom:1px solid #e5e8ef; }