:root { color:#111827; background:#f4f6f8; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; letter-spacing:0; --ink:#111827; --muted:#667085; --line:#dfe3e8; --surface:#fff; --green:#147a55; --green-soft:#e8f5ef; --red:#b42318; --red-soft:#feeceb; --amber:#946200; --amber-soft:#fff5d8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#f4f6f8; }
a { color:inherit; }
button,input,select { font:inherit; letter-spacing:0; }
.hidden { display:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:224px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 18px; background:#151a22; color:#fff; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:750; }
.brand-mark { width:32px; height:32px; flex:0 0 32px; border-radius:6px; display:block; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.nav-list { display:grid; gap:4px; margin-top:42px; }
.nav-item { padding:10px 12px; border-radius:6px; color:#b9c0ca; text-decoration:none; font-size:14px; }
.nav-item:hover,.nav-item.active { color:#fff; background:#252c36; }
.cabinet-link { margin-top:auto; color:#b9c0ca; font-size:13px; text-decoration:none; }
.cabinet-link:hover { color:#fff; }
.main-content { width:min(1320px,100%); min-width:0; padding:32px 44px 64px; }
.topbar { min-height:68px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.topbar-actions,.section-actions,.filters { display:flex; align-items:center; gap:10px; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:27px; }
h2 { margin-bottom:0; font-size:20px; }
.updated { color:var(--muted); font-size:13px; }
.section-block { padding:30px 0; border-top:1px solid var(--line); scroll-margin-top:12px; }
.section-heading { margin-bottom:20px; }
.split-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric-card { min-height:120px; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--surface); display:flex; flex-direction:column; }
.metric-card span,.metric-card small { color:var(--muted); font-size:13px; }
.metric-card strong { margin-top:12px; font-size:23px; overflow-wrap:anywhere; }
.metric-card small { margin-top:auto; }
.primary-button,.secondary-button { min-height:40px; border-radius:6px; padding:9px 14px; cursor:pointer; font-weight:700; font-size:14px; }
.primary-button { border:0; background:var(--ink); color:#fff; }
.secondary-button { border:1px solid #cfd5dc; background:#fff; color:var(--ink); }
button:disabled { cursor:wait; opacity:.6; }
.health-summary { color:var(--muted); font-size:13px; }
.table-wrap { width:100%; overflow-x:auto; border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
th,td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; overflow-wrap:anywhere; }
th { color:var(--muted); font-size:12px; font-weight:750; }
td { font-size:14px; }
th:first-child,td:first-child { padding-left:0; }
th:last-child,td:last-child { padding-right:0; }
.node-name,.user-name { display:grid; gap:3px; }
.node-name small,.user-name small { color:var(--muted); }
.status { display:inline-flex; min-width:76px; justify-content:center; padding:5px 8px; border-radius:999px; font-size:12px; font-weight:750; }
.status.up,.status.active { color:var(--green); background:var(--green-soft); }
.status.down,.status.disabled { color:var(--red); background:var(--red-soft); }
.status.unknown,.status.grace,.status.expiring { color:var(--amber); background:var(--amber-soft); }
.status.dormant,.status.archived { color:#475467; background:#eef1f4; }
.status.none { color:#475467; background:#eef1f4; }
.status.fulfilled,.status.paid { color:var(--green); background:var(--green-soft); }
.status.failed,.status.cancelled { color:var(--red); background:var(--red-soft); }
.status.pending,.status.fulfilling { color:var(--amber); background:var(--amber-soft); }
.filters input,.filters select { min-height:40px; border:1px solid #cfd5dc; border-radius:6px; background:#fff; color:var(--ink); padding:8px 10px; }
.filters input { width:min(280px,38vw); }
.table-note { margin:12px 0 0; color:var(--muted); font-size:13px; }
.customer-filters { flex-wrap:wrap; margin-bottom:16px; }
.customer-table { min-width:1080px; }
.customer-table th:nth-child(1) { width:17%; }
.customer-table th:nth-child(2) { width:11%; }
.customer-table th:nth-child(3) { width:12%; }
.customer-table th:nth-child(4) { width:10%; }
.customer-table th:nth-child(5) { width:14%; }
.customer-table th:nth-child(6) { width:10%; }
.customer-table th:nth-child(7) { width:14%; }
.customer-table th:nth-child(8) { width:12%; }
.view-switch { display:inline-flex; padding:3px; border:1px solid #cfd5dc; border-radius:7px; background:#e9edf1; }
.view-switch-button { min-height:34px; padding:7px 12px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }
.view-switch-button.active { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.08); }
.row-action { min-height:34px; padding:7px 10px; border:1px solid #cfd5dc; border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; font-size:13px; font-weight:700; }
.row-action:hover,.page-button:hover:not(:disabled) { border-color:#98a2b3; background:#f7f8fa; }
.empty-cell { height:92px; color:var(--muted); text-align:center; }
.pagination { min-height:46px; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:13px; }
.pagination-controls { display:flex; align-items:center; gap:5px; }
.page-button { min-width:34px; min-height:34px; padding:6px 9px; border:1px solid #cfd5dc; border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; font-size:13px; }
.page-button.current { border-color:var(--ink); background:var(--ink); color:#fff; }
.page-button:disabled { cursor:default; opacity:.45; }
.summary-list { margin:0; border-top:1px solid var(--line); }
.summary-list div { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.summary-list dt { color:var(--muted); }
.summary-list dd { margin:0; font-weight:750; }
.payment-heading { margin-top:30px; }
.diagnostic { display:grid; gap:3px; color:var(--muted); font-size:12px; }
.error-banner { margin-bottom:20px; padding:12px 14px; border:1px solid #f3c7c3; border-radius:6px; color:var(--red); background:var(--red-soft); }
.loading-state { padding:36px 0; color:var(--muted); border-top:1px solid var(--line); }
.user-dialog { width:min(920px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); padding:0; border:1px solid #cfd5dc; border-radius:8px; background:#fff; color:var(--ink); box-shadow:0 20px 50px rgba(16,24,40,.24); }
.user-dialog::backdrop { background:rgba(17,24,39,.5); }
.dialog-header { position:sticky; top:0; z-index:1; min-height:76px; padding:18px 22px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-close { width:38px; height:38px; padding:0; border:1px solid #cfd5dc; border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; font-size:25px; line-height:1; }
.dialog-loading { min-height:180px; padding:48px 22px; color:var(--muted); }
.user-summary { margin:0; padding:18px 22px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.user-summary div { min-width:0; }
.user-summary dt { margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:700; }
.user-summary dd { margin:0; overflow-wrap:anywhere; font-size:14px; font-weight:700; }
.dialog-section { padding:22px; }
.dialog-section + .dialog-section { border-top:1px solid var(--line); }
.dialog-section h3 { margin:0 0 14px; font-size:16px; }
.dialog-section table { min-width:680px; }
@media (max-width:980px) { .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));} table{min-width:820px;} }
@media (max-width:760px) { .admin-shell{display:block;} .sidebar{position:static;width:100%;height:auto;padding:16px 18px;flex-direction:row;align-items:center;} .nav-list,.cabinet-link{display:none;} .main-content{padding:24px 18px 48px;} .topbar,.split-heading{align-items:flex-start;} .split-heading{flex-direction:column;} .section-actions,.filters{width:100%;} .filters{align-items:stretch;flex-direction:column;} .filters input{width:100%;} .view-switch{width:100%;} .view-switch-button{flex:1;} .pagination{align-items:flex-start;flex-direction:column;} .pagination-controls{width:100%;overflow-x:auto;padding-bottom:4px;} .user-summary{grid-template-columns:1fr;} .dialog-header,.user-summary,.dialog-section{padding-left:16px;padding-right:16px;} }
@media (max-width:520px) { .metric-grid{grid-template-columns:1fr;} .topbar{display:block;padding-bottom:18px;} .topbar-actions{display:block;width:auto;margin-top:28px;} #refresh-button{display:none;} .section-actions{align-items:stretch;flex-direction:column;} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} }