:root { --brand:#4f46e5; --ink:#172033; --muted:#667085; --surface:#fff; --canvas:#f4f6fa; }
html, body { min-height:100%; }
body { margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:260px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; background:#111827; color:#fff; z-index:10; overflow:hidden; transition:width .25s cubic-bezier(.4,0,.2,1); }
.main-column { min-width:0; flex:1; margin-left:260px; transition:margin-left .25s cubic-bezier(.4,0,.2,1); }
.topbar { height:72px; display:flex; align-items:center; padding:0 2rem; background:rgba(255,255,255,.9); border-bottom:1px solid #e6e9ef; position:sticky; top:0; z-index:9; backdrop-filter:blur(10px); }
.content-area { padding:2rem; max-width:1500px; margin:auto; }
.brand { display:flex; align-items:center; gap:.75rem; min-height:82px; padding:1.35rem 1.5rem; white-space:nowrap; }
.sidebar-brand-logo { display:block; width:74px; height:52px; flex:none; object-fit:contain; border-radius:9px; background:#fff; padding:4px; transition:width .25s ease,height .25s ease,padding .25s ease; }
.brand-copy { min-width:0; color:#fff; font-size:clamp(1rem,1.05vw,1.18rem); font-weight:500; line-height:1.08; letter-spacing:-.015em; white-space:nowrap; }.brand-copy span { display:block; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-weight:800; box-shadow:0 8px 20px rgba(99,102,241,.3); }
.brand strong,.brand small { display:block; }.brand small { color:#98a2b3; font-size:.72rem; }
.sidebar .nav-link,.offcanvas .nav-link { display:flex; align-items:center; gap:.35rem; min-height:46px; color:#aeb7c8; padding:.75rem 1rem; border-radius:10px; white-space:nowrap; overflow:hidden; }
.sidebar .nav-link:hover,.sidebar .nav-link.active { color:#fff; background:rgba(99,102,241,.2); }
.nav-icon { display:inline-grid; place-items:center; width:26px; min-width:26px; font-size:1.15rem; }
.nav-label,.brand-copy { opacity:1; transition:opacity .14s ease; }
.sidebar-toggle { margin:auto 1rem 1rem; display:flex; align-items:center; gap:.8rem; min-height:44px; padding:.65rem .9rem; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.04); color:#aeb7c8; white-space:nowrap; overflow:hidden; transition:background .15s,color .15s; }
.sidebar-toggle:hover { background:rgba(99,102,241,.18); color:#fff; }.sidebar-toggle-icon { width:22px; min-width:22px; font-size:1.55rem; line-height:1; transition:transform .25s ease; }
.sidebar-collapsed .sidebar { width:84px; }.sidebar-collapsed .main-column { margin-left:84px; }
.sidebar-collapsed .sidebar .brand { padding-inline:16px; }.sidebar-collapsed .sidebar .sidebar-brand-logo { width:52px; height:46px; padding:3px; }.sidebar-collapsed .sidebar .brand-copy,.sidebar-collapsed .sidebar .nav-label { opacity:0; pointer-events:none; }
.sidebar-collapsed .sidebar nav { padding-inline:14px!important; }.sidebar-collapsed .sidebar .nav-link { justify-content:center; padding-inline:.75rem; }.sidebar-collapsed .sidebar .nav-icon { font-size:1.25rem; }
.sidebar-collapsed .sidebar-toggle { justify-content:center; margin-inline:14px; padding-inline:.65rem; }.sidebar-collapsed .sidebar-toggle-icon { transform:rotate(180deg); }
.desktop-menu-button { align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:#667085; }.desktop-menu-button:hover { background:#eef2ff; color:var(--brand); }
.page-heading { margin-bottom:1.75rem; }.page-heading h1 { font-size:1.8rem; margin:.2rem 0; }.page-heading p { color:var(--muted); margin:0; }
.eyebrow { color:var(--brand); font-weight:700; font-size:.72rem; letter-spacing:.12em; }
.panel,.auth-card { background:var(--surface); border:1px solid #e8ebf0; border-radius:16px; box-shadow:0 4px 20px rgba(16,24,40,.04); }
.hero-panel { background:linear-gradient(135deg,#fff 55%,#eef2ff); }
.stat-icon { width:48px; height:48px; display:grid; place-items:center; background:#dcfce7; color:#15803d; border-radius:14px; font-weight:bold; }
.panel-toolbar { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid #eef0f4; }
.search-box { max-width:360px; }.search-box .input-group-text { background:#fff; border-right:0; }.search-box input { border-left:0; }
.table th { padding:1rem 1.25rem; color:#667085; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; background:#fafbfc; border-bottom-color:#eaecf0; }
.table th button.sort-header { all:unset!important; box-sizing:border-box!important; display:inline-flex!important; align-items:center!important; gap:.35rem!important; color:#667085!important; font:inherit!important; text-transform:inherit!important; letter-spacing:inherit!important; white-space:nowrap!important; cursor:pointer!important; transition:color .15s ease!important; }.table th button.sort-header:hover { color:#4338ca!important; }.table th button.sort-header:focus-visible { outline:2px solid #818cf8!important; outline-offset:4px!important; border-radius:2px!important; }.sort-indicator { width:12px; height:14px; display:inline-grid; place-items:center; color:#98a2b3; font-size:.65rem; line-height:1; transition:color .15s ease; }.sort-indicator::before { content:"⇅"; opacity:.35; }.sort-header:hover .sort-indicator::before { opacity:.8; }.table th button.sort-header.is-sorted { color:#4f46e5!important; }.sort-header.is-sorted .sort-indicator { color:#4f46e5; background:transparent; box-shadow:none; }.sort-header.is-sorted .sort-indicator::before { opacity:1; }.sort-header.ascending .sort-indicator::before { content:"▲"; }.sort-header.descending .sort-indicator::before { content:"▼"; }
.table td { padding:1rem 1.25rem; border-bottom-color:#f0f1f3; }.table td small { display:block; color:#98a2b3; margin-top:.2rem; }
.scope-pill,.status-pill { display:inline-block; border-radius:999px; font-size:.76rem; padding:.3rem .65rem; background:#eef2ff; color:#4338ca; }
.status-pill.active { background:#dcfce7; color:#15803d; }.status-pill.inactive { background:#f2f4f7; color:#667085; }
.btn-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:#4338ca; --bs-btn-hover-border-color:#4338ca; }
.form-control,.form-select { border-color:#d9dee7; border-radius:9px; }.form-control:focus { border-color:#818cf8; box-shadow:0 0 0 .2rem rgba(99,102,241,.13); }
.readonly-field,.readonly-field:focus { background:#f8fafc; color:#344054; border-color:#e4e7ec; box-shadow:none; cursor:not-allowed; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.04em; }
.auth-wrapper { min-height:calc(100vh - 136px); display:grid; place-items:center; padding:1rem; }
.auth-card { width:100%; max-width:460px; padding:2rem; }.mfa-card { max-width:520px; }
.auth-layout { position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#f8faff,#eef2ff); }
.auth-layout .auth-wrapper { position:relative; z-index:1; width:100%; min-height:0; height:100%; padding:clamp(.75rem,2vh,1.5rem); }
.auth-layout .auth-card { padding:clamp(1.25rem,3.2vh,2rem); max-height:calc(100dvh - 1.5rem); }
.auth-backdrop { position:absolute; border-radius:999px; filter:blur(2px); opacity:.65; }
.auth-backdrop-one { width:36vw; height:36vw; min-width:260px; min-height:260px; top:-18vw; right:-8vw; background:rgba(99,102,241,.18); }
.auth-backdrop-two { width:28vw; height:28vw; min-width:220px; min-height:220px; bottom:-14vw; left:-6vw; background:rgba(139,92,246,.14); }
.auth-login .brand { padding:0; }
.login-brand { display:flex; flex-direction:column; align-items:center; gap:.45rem; }.login-brand-logo { display:block; width:min(190px,65vw); height:auto; max-height:125px; object-fit:contain; }.login-brand small { color:#667085; font-size:.72rem; letter-spacing:.04em; text-align:center; }
.code-input { letter-spacing:.3em; font-weight:700; text-align:center; }
.mfa-code-group { display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; }
.mfa-code-box { width:100%; min-width:0; aspect-ratio:1; border:1px solid #d9dee7; border-radius:10px; background:#fff; color:var(--ink); font-size:1.35rem; font-weight:700; text-align:center; outline:0; transition:border-color .15s,box-shadow .15s,transform .15s; }
.mfa-code-box:focus { border-color:#6366f1; box-shadow:0 0 0 .2rem rgba(99,102,241,.13); transform:translateY(-1px); }
.qr-frame { width:216px; height:216px; padding:8px; border:1px solid #e4e7ec; border-radius:14px; }.qr-frame img { width:100%; height:100%; }
.secret-box { padding:1rem; background:#f8fafc; border-radius:10px; text-align:center; }.secret-box small,.secret-box code { display:block; }.secret-box code { margin-top:.35rem; word-break:break-all; }
.empty-state { min-height:60vh; display:grid; place-content:center; text-align:center; }
.menu-button { font-size:1.35rem; }
.pagination-bar { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eef0f4; }
.pagination .page-link { color:var(--brand); border-radius:7px; margin:0 .12rem; }.pagination .active>.page-link { background:var(--brand); border-color:var(--brand); color:#fff; }
.method-pill { display:inline-block; min-width:52px; padding:.25rem .5rem; border-radius:6px; text-align:center; font-size:.7rem; font-weight:800; background:#eef2ff; color:#4338ca; }.method-post { background:#dcfce7; color:#15803d; }.method-delete { background:#fee2e2; color:#b91c1c; }.method-put,.method-patch { background:#fef3c7; color:#a16207; }
.status-pill.warning { background:#fef3c7; color:#a16207; }.status-pill.error { background:#fee2e2; color:#b91c1c; }
.correlation-id { display:inline-block; max-width:160px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.audit-detail-backdrop { position:fixed; inset:0; z-index:1050; background:rgba(15,23,42,.42); display:flex; justify-content:flex-end; backdrop-filter:blur(2px); }
.audit-detail { width:min(680px,95vw); height:100%; background:#fff; box-shadow:-15px 0 40px rgba(15,23,42,.18); animation:slide-in .2s ease-out; }
.audit-detail-content { height:calc(100% - 86px); overflow:auto; }.audit-section-title { margin-top:1.4rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#667085; }
.audit-code { max-height:280px; padding:1rem; overflow:auto; white-space:pre-wrap; word-break:break-word; border-radius:10px; background:#111827; color:#d1fae5; font-size:.75rem; }
@keyframes slide-in { from { transform:translateX(30px); opacity:.5; } to { transform:translateX(0); opacity:1; } }
.period-summary { min-width:210px; padding:.65rem 1rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 3px 12px rgba(15,23,42,.03); }.period-summary small,.period-summary strong { display:block; }.period-summary small { color:#98a2b3; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }.period-summary strong { margin-top:.15rem; font-size:.88rem; }
.dashboard-filter .form-control { min-width:170px; }.period-tabs .btn { min-width:92px; }
.metric-card { height:100%; min-height:132px; display:flex; align-items:center; gap:1rem; padding:1.25rem; border:1px solid #e8ebf0; border-radius:16px; background:#fff; box-shadow:0 4px 20px rgba(16,24,40,.04); overflow:hidden; position:relative; }.metric-card::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-36px; top:-40px; opacity:.12; background:currentColor; }
.metric-card .metric-icon { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px; font-size:1.25rem; font-weight:800; background:currentColor; }.metric-card .metric-icon::first-line { color:#fff; }.metric-card>div:last-child { min-width:0; }.metric-card small,.metric-card strong,.metric-card span { display:block; }.metric-card small { color:#667085; font-weight:600; }.metric-card strong { margin:.15rem 0; color:#172033; font-size:1.75rem; line-height:1.15; }.metric-card span { color:#98a2b3; font-size:.72rem; }
.metric-traffic { color:#4f46e5; }.metric-request { color:#0284c7; }.metric-success { color:#16a34a; }.metric-failed { color:#dc2626; }.metric-card .metric-icon { color:#fff; }.metric-traffic .metric-icon { background:#4f46e5; }.metric-request .metric-icon { background:#0284c7; }.metric-success .metric-icon { background:#16a34a; }.metric-failed .metric-icon { background:#dc2626; }
.chart-panel { padding:1.25rem; }.chart-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.25rem .25rem 1rem; }.chart-heading h2 { margin:0; font-size:1rem; }.chart-heading p { margin:.2rem 0 0; color:#98a2b3; font-size:.78rem; }.chart-container { position:relative; width:100%; }.chart-main { height:330px; }.chart-doughnut { height:330px; }.chart-endpoints { height:320px; }.average-badge { padding:.35rem .7rem; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:.72rem; font-weight:700; white-space:nowrap; }
.dashboard-loading { min-height:360px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; color:#667085; }
@media (max-width:991.98px) { .sidebar { display:none; }.main-column,.sidebar-collapsed .main-column { margin-left:0; }.content-area { padding:1.25rem; }.topbar { padding:0 1.25rem; }.offcanvas { width:min(320px,88vw)!important; }.offcanvas .brand { min-height:94px; background:#111827; color:#fff; }.offcanvas .sidebar-brand-logo { width:76px; height:54px; }.offcanvas .nav-link { color:#475467; margin-inline:.5rem; }.offcanvas .nav-link.active { color:#4338ca; background:#eef2ff; }.mobile-nav nav { margin-top:1rem!important; } }
@media (max-width:575.98px) { .auth-card { padding:1.4rem; }.panel-toolbar { align-items:stretch; flex-direction:column; }.search-box { max-width:none; width:100%; }.table td,.table th { padding:.8rem; }.mfa-code-group { gap:.3rem; }.mfa-code-box { font-size:1.05rem; border-radius:8px; }.pagination-bar { align-items:flex-start; flex-direction:column; gap:.75rem; }.period-summary { width:100%; }.dashboard-filter .d-flex { align-items:stretch!important; flex-direction:column; }.dashboard-filter .form-control { width:100%; }.period-tabs { display:grid; grid-template-columns:repeat(3,1fr); }.period-tabs .btn { min-width:0; padding-inline:.45rem; font-size:.82rem; }.metric-card { min-height:118px; padding:1rem; gap:.7rem; }.metric-card .metric-icon { width:38px; height:38px; }.metric-card strong { font-size:1.4rem; }.metric-card span { font-size:.65rem; }.chart-main,.chart-doughnut { height:280px; }.chart-endpoints { height:300px; } }
@media (max-height:680px) { .auth-login .login-brand { margin-bottom:.45rem!important; }.auth-login .login-brand-logo { max-height:78px; width:120px; }.auth-login h1 { margin-bottom:.2rem; }.auth-login p { margin-bottom:.8rem!important; }.auth-login .mb-3 { margin-bottom:.6rem!important; }.auth-login .mb-4 { margin-bottom:.8rem!important; }.auth-login .form-control-lg { min-height:42px; padding:.4rem .75rem; font-size:1rem; }.auth-login .mfa-code-box { max-height:46px; }.auth-login .btn-lg { padding:.5rem 1rem; font-size:1rem; } }