:root { font-family: Inter, system-ui, sans-serif; color:#172033; background:#f3f6fa; --navy:#102a43; --blue:#1677d2; --line:#e1e8f0; }
* { box-sizing:border-box; } body { margin:0; } button,input,select { font:inherit; }.app-shell { min-height:100vh; display:flex; }.sidebar { width:245px; flex:none; display:flex; flex-direction:column; padding:22px 14px; color:#d9ebf8; background:#102a43; }.side-brand { display:flex; align-items:center; gap:10px; padding:0 10px 28px; }.side-brand img { width:38px; height:44px; object-fit:contain; }.side-brand strong,.side-brand span { display:block; }.side-brand strong { color:#fff; font-size:1rem; }.side-brand span { color:#8bc9ee; font-size:.78rem; }.nav { display:flex; flex-direction:column; gap:4px; }.nav-item { width:100%; border:0; border-radius:7px; padding:11px 13px; color:#b9d0df; background:transparent; cursor:pointer; text-align:left; }.nav-item:hover,.nav-item.active { color:#fff; background:#1e5278; }.nav-item em { float:right; color:#7fc0df; font-size:.63rem; font-style:normal; }.nav-label { margin:24px 13px 6px; color:#7192a9; font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.side-footer { margin-top:auto; padding:18px 10px 0; border-top:1px solid #ffffff20; }.side-footer img { width:95px; max-height:35px; object-fit:contain; }.side-footer small { display:block; margin-top:8px; color:#7192a9; font-size:.65rem; }.main-content { min-width:0; flex:1; padding:28px 34px; }.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.eyebrow { color:#2384c4; font-size:.66rem; font-weight:800; letter-spacing:.14em; }.topbar h1 { margin:6px 0 0; font-size:1.8rem; letter-spacing:-.03em; }.top-actions { display:flex; align-items:center; gap:10px; }.global-search { display:flex; align-items:center; gap:7px; width:260px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#8292a3; }.global-search input { width:100%; border:0; outline:0; background:transparent; font-size:.8rem; }.user-label { color:#506174; font-size:.82rem; }.icon-btn,.secondary-btn,.primary-btn { border:0; border-radius:7px; padding:9px 13px; cursor:pointer; }.icon-btn,.secondary-btn { color:#31516b; background:#fff; border:1px solid var(--line); }.primary-btn { color:#fff; background:#1677d2; }.view { display:none; }.active-view { display:block; }.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.card,.panel,.toolbar { border:1px solid var(--line); border-radius:10px; background:#fff; }.card { padding:18px; }.card .label { display:block; color:#748397; font-size:.73rem; font-weight:700; text-transform:uppercase; }.card strong { display:block; margin-top:7px; font-size:1.85rem; }.up strong,.status.up { color:#168254; }.down strong,.status.down { color:#c53636; }.unknown strong,.status.unknown { color:#ae7517; }.toolbar { display:flex; justify-content:space-between; align-items:center; margin:18px 0 28px; padding:15px 18px; }.toolbar strong,.toolbar span { display:block; }.toolbar span { margin-top:4px; font-size:.78rem; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:22px 0 12px; }.section-heading h2 { margin:0; font-size:1.15rem; }.section-heading p { margin:4px 0 0; color:#748397; font-size:.8rem; }.connection { color:#168254; font-size:.78rem; }.panel { overflow:auto; }.table-wrap table { width:100%; min-width:680px; border-collapse:collapse; }.table-wrap th,.table-wrap td { padding:12px 14px; border-bottom:1px solid #edf1f5; text-align:left; white-space:nowrap; font-size:.8rem; }.table-wrap th { color:#778699; background:#fafbfd; font-size:.68rem; letter-spacing:.04em; }.status { font-weight:800; font-size:.7rem; }.filters { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; }.filters input,.filters select { border:1px solid var(--line); border-radius:7px; padding:10px 12px; outline:0; background:#fff; }.empty,.muted { color:#7b8998; }.placeholder,.empty-panel,.setting-card { padding:40px; text-align:center; }.placeholder-icon { margin:auto; width:55px; padding:12px 5px; border-radius:10px; color:#1677d2; background:#e5f2fc; font-weight:800; }.setting-card { text-align:left; }.setting-card h3 { margin-top:0; }.setting-card p { color:#748397; }.setting-card button:disabled { cursor:not-allowed; opacity:.55; }.password-form { max-width:420px; display:grid; gap:10px; }.password-form input { border:1px solid var(--line); border-radius:7px; padding:11px 12px; }.message { min-height:18px; color:#c53636; font-size:.8rem; }
@media(max-width:850px){.sidebar{width:205px}.main-content{padding:22px 18px}.cards{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.global-search{flex:1}}
@media(max-width:560px){.sidebar{width:65px;padding:16px 8px}.side-brand{justify-content:center;padding:0 0 25px}.side-brand div,.side-footer,.nav-label,.nav-item em{display:none}.nav-item{height:42px;padding:11px;text-align:center;font-size:0}.nav-item::first-letter{font-size:1rem}.main-content{padding:18px 12px}.top-actions{flex-wrap:wrap}.user-label{display:none}.cards{gap:8px}.card{padding:13px}.card strong{font-size:1.4rem}}