:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #182039; background: #f3f5fb; font-synthesis: none; --indigo-950:#11152d; --indigo-900:#191e3a; --indigo-600:#4f5fd5; --line:#dfe4f0; --muted:#65708b; --surface:#fff; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input, select { font: inherit; } button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #93a3ff; outline-offset: 2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.primary-button, .secondary { border: 0; border-radius: 9px; padding: .72rem 1rem; font-weight: 750; }.primary-button { color:#fff; background:linear-gradient(135deg,var(--indigo-600),#5969e8); box-shadow:0 7px 18px #4f5fd52b; }.primary-button:hover { background:#4353c5; }.secondary { color:#394363; background:#eef1f8; }.compact { padding:.55rem .78rem; font-size:.8rem; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at 12% 8%,#6576ec30,transparent 30%),radial-gradient(circle at 90% 88%,#22b8cf1c,transparent 27%),#0f1329; }.auth-card { position:relative; width:min(100%,420px); padding:2.55rem; overflow:hidden; background:#fff; border:1px solid #ffffff35; border-radius:18px; box-shadow:0 35px 90px #05071370; }.auth-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#5062da,#21b6cc); }.auth-mark { float:right; display:grid; place-items:center; width:45px; height:45px; color:#fff; background:linear-gradient(145deg,#4455c7,#6879ed); border-radius:12px; font-size:1.35rem; font-weight:900; box-shadow:0 10px 25px #5363d63c; }
.brand,.logo { font-size:1.55rem; font-weight:900; letter-spacing:-.06em; }.brand span,.logo span { color:#5263dc; }.brand small,.logo small { display:block; margin-top:.18rem; color:#8790a8; font-size:.56rem; letter-spacing:.16em; } h1 { margin:.2rem 0; font-size:1.9rem; letter-spacing:-.04em; } h2 { margin:0; }.eyebrow { margin:1.65rem 0 .4rem; color:#5967c8; font-size:.67rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }.muted { color:var(--muted); line-height:1.6; }
form { display:grid; gap:1rem; margin-top:1.5rem; }.field,label { display:grid; gap:.42rem; font-size:.8rem; font-weight:750; } input,select { width:100%; border:1px solid #d7ddeb; border-radius:9px; padding:.72rem .78rem; color:#252d48; background:#f8f9fc; } input:focus,select:focus { border-color:#6979e4; background:#fff; }.field-hint,.security-note { color:#7a849d; font-size:.72rem; line-height:1.5; }.security-note { margin:1.15rem 0 0; text-align:center; }.alert { margin-top:1rem; padding:.75rem .9rem; color:#9a343c; background:#fff0f1; border:1px solid #ffd8db; border-radius:9px; }.link-button { width:100%; margin-top:.65rem; padding:.65rem; border:0; color:#4d5dcc; background:transparent; font-weight:750; }
.workspace { min-height:100vh; display:grid; grid-template-columns:224px minmax(0,1fr); }.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:1.15rem .8rem; color:#d9def0; background:linear-gradient(180deg,var(--indigo-950),var(--indigo-900)); border-right:1px solid #2d3453; }.logo-row { display:flex; align-items:center; gap:.65rem; padding:.35rem .55rem 1rem; }.logo-mark { display:grid; place-items:center; width:34px; height:34px; color:#fff; background:#5263dc; border-radius:9px; font-weight:900; }.sidebar .logo { color:#fff; font-size:1.18rem; }.sidebar .logo small { color:#717b9c; }.nav-search { margin:.2rem .35rem .8rem; }.nav-search input { padding:.62rem .7rem; color:#e8ebf8; background:#252b49; border-color:#343b5d; }.nav-search input::placeholder { color:#7f89aa; }.sidebar nav { flex:1; overflow:auto; }.nav-group { margin:.9rem 0; }.nav-group h2 { margin:0 .65rem .35rem; color:#737d9e; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }.nav-group a { display:flex; align-items:center; gap:.7rem; margin:.14rem 0; padding:.62rem .7rem; color:#adb6d3; border-radius:8px; text-decoration:none; font-size:.8rem; font-weight:650; }.nav-group a i { display:grid; place-items:center; width:20px; height:20px; font-style:normal; color:#828daf; background:#262d4d; border-radius:6px; }.nav-group a:hover,.nav-group a[aria-current="page"] { color:#fff; background:#5363d6; box-shadow:0 8px 18px #080b1c42; }.nav-group a[aria-current="page"] i { color:#fff; background:#ffffff22; }.nav-empty { padding:.8rem; color:#818bac; font-size:.75rem; }.sidebar-foot { padding:.8rem .55rem .2rem; color:#7f89a9; font-size:.68rem; }.online-dot { display:inline-block; width:7px; height:7px; margin-right:.4rem; background:#35cf91; border-radius:50%; box-shadow:0 0 0 4px #35cf9118; }
.content { min-width:0; padding:1.55rem 2rem 3rem; }.content>header { display:flex; align-items:center; justify-content:space-between; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }.content>header .eyebrow { margin:0; }.account { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 .7rem; text-align:right; }.account small { grid-column:1; color:var(--muted); font-size:.66rem; }.account button { grid-column:2; grid-row:1/3; }
.welcome,.panel,.state,.data-panel { margin-top:1.25rem; padding:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:0 8px 26px #29315b0a; }.welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; background:linear-gradient(120deg,#fff,#f5f6ff); }.welcome .eyebrow,.panel .eyebrow,.panel-heading .eyebrow { margin:0 0 .35rem; }.welcome p { max-width:600px; color:var(--muted); }.cards { display:grid; grid-template-columns:repeat(2,minmax(135px,1fr)); gap:.7rem; }.cards article { padding:1rem; background:#f1f3fb; border-radius:10px; }.cards article span,.cards article strong,.cards article small { display:block; }.cards article span,.cards article small { color:var(--muted); font-size:.7rem; }.cards article strong { margin:.15rem 0; color:#3f4fc3; font-size:1.7rem; }.panel { display:flex; align-items:center; justify-content:space-between; }.state { max-width:640px; margin:4rem auto; text-align:center; }.state .eyebrow { margin:.25rem; }.state-code { color:#5565d8; font-size:4rem; font-weight:900; }
.metrics-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1.25rem; }.metric-card { position:relative; overflow:hidden; padding:1rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:12px; }.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#5969df; }.metric-card span,.metric-card small,.metric-card strong { display:block; }.metric-card span,.metric-card small { color:var(--muted); font-size:.7rem; }.metric-card strong { margin:.32rem 0; color:#26304e; font-size:1.35rem; }.metric-cyan::before { background:#13a7bd; }.metric-amber::before { background:#e5a72f; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.filter-bar { display:grid; grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) auto auto; align-items:end; gap:.7rem; margin:1.2rem 0; padding:1rem; background:#f7f8fc; border:1px solid #e8ebf3; border-radius:10px; }.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }.table-scroll table { width:100%; min-width:650px; border-collapse:collapse; }.table-scroll th { padding:.72rem .85rem; color:#68728c; background:#f6f7fb; font-size:.7rem; text-align:left; }.table-scroll td { padding:.85rem; border-top:1px solid var(--line); }.empty-state { display:grid; place-items:center; padding:1.6rem; color:var(--muted); text-align:center; }.empty-state>span { display:grid; place-items:center; width:38px; height:38px; color:#6675d9; background:#edf0ff; border-radius:50%; font-size:1.25rem; }.empty-state strong { margin-top:.55rem; color:#3a435d; }.empty-state p { margin:.2rem; font-size:.76rem; }.badge-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }.status-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .55rem; color:#606a81; background:#f0f2f6; border-radius:999px; font-size:.68rem; font-weight:750; }.status-badge i { width:6px; height:6px; background:#8f98ac; border-radius:50%; }.status-success { color:#16734e; background:#e7f8f0; }.status-success i { background:#23ad75; }.status-warning { color:#8e6513; background:#fff6db; }.status-warning i { background:#dfa72b; }.status-danger { color:#9a3b44; background:#ffedef; }.status-danger i { background:#dc5b66; }.inline-error { display:flex; align-items:center; gap:.8rem; margin-top:1rem; padding:.75rem .9rem; color:#8a3942; background:#fff4f5; border:1px solid #ffdfe2; border-radius:9px; font-size:.74rem; }.inline-error span { flex:1; color:#805f63; }.confirm-dialog { width:min(92vw,440px); padding:0; border:0; border-radius:14px; box-shadow:0 28px 90px #11152d66; }.confirm-dialog::backdrop { background:#11152db0; }.confirm-dialog form { margin:0; padding:1.5rem; text-align:center; }.dialog-icon { display:grid; place-items:center; width:42px; height:42px; margin:auto; color:#fff; background:#5969df; border-radius:50%; font-weight:900; }.confirm-dialog p { color:var(--muted); line-height:1.6; }.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem; }
@media (max-width:820px) { .workspace { grid-template-columns:1fr; }.sidebar { position:static; height:auto; padding:.7rem; }.logo-row { padding:.2rem .4rem .6rem; }.nav-search { max-width:340px; }.sidebar nav { display:flex; gap:.7rem; overflow-x:auto; }.nav-group { flex:0 0 auto; margin:.2rem 0; }.nav-group h2 { margin:.2rem .5rem; }.nav-group a { white-space:nowrap; }.sidebar-foot { display:none; }.content { padding:1.1rem; }.welcome { align-items:stretch; flex-direction:column; }.metrics-row { grid-template-columns:1fr; }.filter-bar { grid-template-columns:1fr 1fr; }.inline-error { align-items:flex-start; flex-wrap:wrap; } }
@media (max-width:520px) { .auth-card { padding:2rem 1.35rem; }.content>header { align-items:flex-start; }.account span,.account small { display:none; }.cards,.filter-bar { grid-template-columns:1fr; }.panel,.panel-heading { align-items:stretch; flex-direction:column; }.table-scroll { margin-inline:-.2rem; }.dialog-actions { display:grid; grid-template-columns:1fr 1fr; } }