:root { color-scheme: light dark; --bg:#f4f7f6; --surface:#fff; --input:#fff; --ink:#17211f; --muted:#64716e; --line:#dce5e2; --brand:#0f766e; --brand-dark:#0b5e58; --danger:#b42318; --table-head:#f9fbfa; --badge:#f0f4f3; --pre:#f4f7f6; --shadow:0 10px 30px rgba(21,48,43,.08); }
:root[data-theme="dark"] { color-scheme:dark; --bg:#091412; --surface:#11211e; --input:#172b27; --ink:#e4f0ed; --muted:#9aada8; --line:#2b4540; --brand:#2dd4bf; --brand-dark:#5eead4; --danger:#fb7185; --table-head:#162925; --badge:#1b312c; --pre:#0b1815; --shadow:0 10px 30px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:20; background:var(--ink); color:white; padding:10px; }
.skip-link:focus { top:12px; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); transition:grid-template-columns .2s ease; }
.sidebar { position:sticky; top:0; min-height:100vh; padding:24px 18px; background:#102c29; color:#e8f4f1; display:flex; flex-direction:column; }
.sidebar-toggle { display:none; }
.brand { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; font-size:18px; font-weight:750; padding:0 4px 22px; text-align:center; }
.brand img { display:block; width:80%; max-width:190px; height:auto; }
.brand small { display:block; color:#a8c6c0; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:3px; }
.sidebar nav p { margin:18px 10px 5px; color:#8db2aa; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.sidebar nav a { display:grid; grid-template-columns:1.5em minmax(0,1fr); align-items:center; gap:8px; border-radius:8px; padding:9px 11px; color:#d7e7e3; text-decoration:none; }
.nav-icon { width:1.5em; text-align:center; }
.sidebar nav a:hover,.sidebar nav a[aria-current] { background:#1b4944; color:white; }
.sidebar-footer { margin-top:auto; }
.sidebar-footer .button { display:flex; align-items:center; justify-content:center; gap:7px; }
main { min-width:0; padding:34px clamp(20px,4vw,58px) 60px; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.theme-toggle { white-space:nowrap; }
.eyebrow { margin:0 0 3px; color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:4px; font-size:clamp(26px,3vw,36px); letter-spacing:-.035em; }
.muted,.generated { color:var(--muted); }
.button { min-height:40px; border:1px solid var(--brand); border-radius:8px; background:var(--brand); color:white; cursor:pointer; font:inherit; font-weight:700; padding:8px 15px; }
.button:hover { background:var(--brand-dark); }
.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #6ee7d2; outline-offset:2px; }
.button.secondary { background:transparent; color:inherit; border-color:currentColor; }
.button.danger { background:var(--danger); border-color:var(--danger); margin-top:16px; }
.button:disabled { opacity:.45; cursor:not-allowed; }
:root[data-theme="dark"] #refresh,
:root[data-theme="dark"] #filters .button,
:root[data-theme="dark"] #metric-period-filter .button,
:root[data-theme="dark"] #health-filters .button { color:#000; }
:root[data-theme="dark"] .button { color:#000; }
:root[data-theme="dark"] .button.secondary { color:inherit; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); align-items:start; gap:15px; }
.metric,.state-card,.table-card,.detail-card,.filters,.notice { border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.metric { padding:20px; text-decoration:none; transition:transform .15s,border-color .15s; }
.metric:hover { border-color:var(--brand); transform:translateY(-2px); }
.metric span,.metric small { display:block; color:var(--muted); }
.metric strong { display:block; margin:10px 0; font-size:31px; }
.metric-card-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.metric-card-link:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.metric-value { position:relative; z-index:2; display:inline-block; color:inherit; text-decoration:none; }
.metric-value:hover { color:var(--brand-dark); text-decoration:underline; }
.metric-trend-card { position:relative; min-width:0; }
.metric-trend-chart { display:block; width:100%; height:auto; max-height:240px; aspect-ratio:1000/240; border-bottom:1px solid var(--line); background:var(--surface); }
.metric-trend-chart.compact { height:58px; margin:8px 0; border-bottom:0; background:none; }
.metric-trend-chart polyline { fill:none; }
.chart-grid-line { stroke:var(--line); stroke-dasharray:3 3; opacity:0.6; }
.chart-axis-line { stroke:var(--line); stroke-width:1; }
.chart-axis-text { fill:var(--muted); font-size:11px; font-weight:500; font-family:inherit; }
.chart-value-label { font-size:10px; font-weight:700; font-family:inherit; text-anchor:middle; }
.chart-end-label { font-size:11px; font-weight:700; font-family:inherit; }
.chart-marker { transition:r 0.15s ease, stroke-width 0.15s ease; cursor:pointer; }
.chart-marker:hover,.chart-marker:focus { r:5.5px; stroke:var(--surface); stroke-width:2px; }
.metric-value-container { position:relative; z-index:2; min-height:42px; display:flex; align-items:center; }
.metric-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; position:relative; z-index:2; }
.metric-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; padding:3px 9px; background:var(--badge); color:var(--ink); font-size:12px; font-weight:700; text-decoration:none; transition:all 0.15s ease; cursor:pointer; }
.metric-chip:hover { border-color:var(--brand); background:var(--surface); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.chip-user,.chip-free,.badge.chip-user,.badge.chip-free,.badge-role-user,.badge-plan-free { border-color:#93c5fd; background:#eff6ff; color:#1e40af; }
.chip-user:hover,.chip-free:hover { border-color:#3b82f6; background:#dbeafe; }
.chip-admin,.badge.chip-admin,.badge-role-admin { border-color:#fcd34d; background:#fffbeb; color:#92400e; }
.chip-admin:hover { border-color:#f59e0b; background:#fef3c7; }
.chip-superadmin,.badge.chip-superadmin,.badge-role-superadmin { border-color:#fbcfe8; background:#fdf2f8; color:#9d174d; }
.chip-superadmin:hover { border-color:#ec4899; background:#fce7f3; }
.chip-premium,.badge.chip-premium,.badge-plan-premium { border-color:#ddd6fe; background:#f5f3ff; color:#5b21b6; }
.chip-premium:hover { border-color:#8b5cf6; background:#ede9fe; }
:root[data-theme="dark"] .chip-user,:root[data-theme="dark"] .chip-free,:root[data-theme="dark"] .badge.chip-user,:root[data-theme="dark"] .badge.chip-free,:root[data-theme="dark"] .badge-role-user,:root[data-theme="dark"] .badge-plan-free { border-color:rgba(59,130,246,0.5); background:rgba(59,130,246,0.2); color:#93c5fd; }
:root[data-theme="dark"] .chip-user:hover,:root[data-theme="dark"] .chip-free:hover { border-color:#60a5fa; background:rgba(59,130,246,0.35); }
:root[data-theme="dark"] .chip-admin,:root[data-theme="dark"] .badge.chip-admin,:root[data-theme="dark"] .badge-role-admin { border-color:rgba(245,158,11,0.5); background:rgba(245,158,11,0.2); color:#fcd34d; }
:root[data-theme="dark"] .chip-admin:hover { border-color:#fbbf24; background:rgba(245,158,11,0.35); }
:root[data-theme="dark"] .chip-superadmin,:root[data-theme="dark"] .badge.chip-superadmin,:root[data-theme="dark"] .badge-role-superadmin { border-color:rgba(236,72,153,0.5); background:rgba(236,72,153,0.2); color:#fbcfe8; }
:root[data-theme="dark"] .chip-superadmin:hover { border-color:#f472b6; background:rgba(236,72,153,0.35); }
:root[data-theme="dark"] .chip-premium,:root[data-theme="dark"] .badge.chip-premium,:root[data-theme="dark"] .badge-plan-premium { border-color:rgba(139,92,246,0.5); background:rgba(139,92,246,0.2); color:#c4b5fd; }
:root[data-theme="dark"] .chip-premium:hover { border-color:#a78bfa; background:rgba(139,92,246,0.35); }
.metric-chip strong { display:inline; margin:0; font-size:12px; }
.metric-change,.metric-period { font-size:12px; }
.metric-change { margin-top:8px; color:var(--ink) !important; font-weight:750; }
.metric-period { margin-bottom:9px; }
.metric-trend-empty { min-height:58px; display:grid; place-items:center; margin:8px 0; border:1px dashed var(--line); border-radius:6px; color:var(--muted); font-size:12px; }
.content-tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.content-tabs a { margin-bottom:-1px; border:1px solid transparent; border-radius:8px 8px 0 0; color:var(--muted); font-weight:750; padding:10px 14px; text-decoration:none; }
.content-tabs a:hover { color:var(--brand-dark); }
.content-tabs a[aria-current="page"] { border-color:var(--line); border-bottom-color:var(--surface); background:var(--surface); color:var(--brand-dark); }
.compatibility-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin-bottom:24px; }
.summary-card { border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); padding:20px; }
.summary-card span,.summary-card small { display:block; color:var(--muted); }
.summary-card strong { display:block; margin:10px 0; font-size:24px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.section-heading p { margin:4px 0 0; }
.state-card { padding:34px; text-align:center; }
.state-card.error { color:var(--danger); }
.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; margin-bottom:16px; padding:15px; }
.filters label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
.filters .auto-filter-toggle { display:flex; min-height:40px; align-items:center; align-self:end; gap:8px; color:var(--ink); cursor:pointer; font-size:14px; }
.filters .auto-filter-toggle input { width:18px; min-height:18px; accent-color:var(--brand); }
input,select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:8px; background:var(--input); color:var(--ink); font:inherit; padding:8px 10px; }
textarea { width:100%; min-height:130px; resize:vertical; border:1px solid var(--line); border-radius:8px; background:var(--input); color:var(--ink); font:13px/1.5 ui-monospace,SFMono-Regular,monospace; padding:10px; }
.table-card { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { border-bottom:1px solid var(--line); padding:13px 14px; text-align:left; vertical-align:top; white-space:nowrap; }
th { background:var(--table-head); color:var(--muted); font-size:12px; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.empty { padding:40px; color:var(--muted); text-align:center; }
.badge { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px 9px; background:var(--badge); font-size:12px; font-weight:750; }
.plan-indicator { display:inline-block; min-width:1.4em; text-align:center; vertical-align:baseline; }
.authentication-provider { display:inline-flex; align-items:center; margin-left:6px; border:1px solid var(--line); border-radius:999px; background:var(--badge); color:var(--muted); font-size:11px; font-weight:750; line-height:1.4; padding:2px 7px; vertical-align:middle; }
.status-active,.status-online,.status-healthy { border-color:#a7dacd; background:#e8f8f3; color:#08614f; }
.status-degraded { border-color:#f2c78f; background:#fff6e9; color:#8a4b08; }
.status-unavailable { border-color:#f2b8b5; background:#fff0ef; color:#9f2018; }
.status-compatible { border-color:#a7dacd; background:#e8f8f3; color:#08614f; }
.status-unknown { border-color:#d4d9d8; background:#f2f4f3; color:#59625f; }
.status-database_outdated,.status-backend_outdated { border-color:#f2c78f; background:#fff6e9; color:#8a4b08; }
.status-revoked,.status-suspended,.status-expired { border-color:#f2b8b5; background:#fff0ef; color:#9f2018; }
.text-link,.back { color:var(--brand-dark); font-weight:700; }
.text-button { border:0; background:transparent; color:var(--brand-dark); cursor:pointer; font:inherit; font-weight:700; text-decoration:underline; }
.text-button.danger-text { color:var(--danger); }
.row-actions { display:flex; align-items:center; gap:12px; }
.confirmation-dialog { width:min(460px,calc(100% - 32px)); border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.3); padding:24px; }
.confirmation-dialog::backdrop { background:rgba(4,15,13,.68); }
.confirmation-dialog h2 { margin-bottom:10px; }
.confirmation-dialog p { margin-bottom:8px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.dialog-actions .button.danger { margin-top:0; }
.dialog-error { color:var(--danger); font-weight:700; }
.processing-message { color:var(--brand-dark); font-weight:700; }
.bulk-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:12px 15px; }
.bulk-actions p { margin:0; color:var(--muted); }
.bulk-actions .button.danger { margin-top:0; }
.selection-cell { width:44px; text-align:center; }
.selection-cell input { width:18px; min-height:18px; accent-color:var(--brand); }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:16px; }
.detail-card { margin-top:15px; padding:20px; }
.detail-card dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; margin:0; }
.detail-card dl div { min-width:0; border-bottom:1px solid var(--line); padding:13px; }
.detail-card dt { color:var(--muted); font-size:12px; font-weight:750; text-transform:capitalize; }
.detail-card dd { margin:5px 0 0; overflow-wrap:anywhere; }
pre { max-height:300px; overflow:auto; border-radius:8px; background:var(--pre); padding:10px; white-space:pre-wrap; }
.notice { margin-bottom:18px; border-color:#97d8ca; padding:12px 15px; color:#075c4d; }
.notice.warning { border-color:#e4b76d; background:#fff7e8; color:#7a4305; }
:root[data-theme="dark"] .notice.warning { background:#2d2415; color:#f7cf8a; }
.editor-card { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; align-items:end; margin:16px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); padding:20px; }
.editor-card h2 { grid-column:1/-1; margin:0; }
.editor-card > p { grid-column:1/-1; margin:0; }
.editor-card label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
.editor-card .wide-field { grid-column:span 2; }
.editor-card .check-label { display:flex; align-items:center; gap:8px; min-height:40px; }
.editor-card .check-label input { width:auto; min-height:auto; }
.permission-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 14px; }
.health-metric { grid-column:span 2; }
.health-metric strong { margin-bottom:2px; }
.health-metric > b { display:block; font-size:22px; }
.health-period { margin-top:8px; font-size:12px; }
.health-inference { margin-top:5px; color:#b45309 !important; font-size:12px; font-weight:750; }
.health-facts { display:flex !important; justify-content:space-between; gap:12px; margin:5px 0 9px; font-size:12px; }
.uptime-timeline { display:flex; width:100%; min-width:0; height:14px; gap:2px; margin:12px 0 5px; overflow:hidden; border-radius:4px; }
.uptime-segment { min-width:2px; flex:1 1 0; border-radius:2px; }
.uptime-healthy { background:#16a085; }
.uptime-degraded { background:#e09f3e; }
.uptime-unavailable { background:#d64545; }
.uptime-unknown { background:#98a3a0; }
.health-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px; }
.health-summary .summary-card strong { font-size:20px; }
.latency-chart { display:block; width:100%; height:auto; max-height:240px; aspect-ratio:1000/240; border-bottom:1px solid var(--line); background:linear-gradient(to bottom,transparent 24%,var(--line) 25%,transparent 26%,transparent 49%,var(--line) 50%,transparent 51%,transparent 74%,var(--line) 75%,transparent 76%); }
.latency-chart polyline { stroke:var(--brand); stroke-width:2; }
.health-legend { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:14px 0 4px; color:var(--muted); font-size:12px; }
.health-legend span { display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:3px; }
.system-metric-availability { border-color:rgba(16,185,129,0.35); }
.system-metric-availability:hover { border-color:#10b981; }
.system-metric-availability .metric-value { color:#059669; }
.system-metric-latency { border-color:rgba(245,158,11,0.35); }
.system-metric-latency:hover { border-color:#f59e0b; }
.system-metric-latency .metric-value { color:#d97706; }
.system-metric-incidents { border-color:rgba(239,68,68,0.35); }
.system-metric-incidents:hover { border-color:#ef4444; }
.system-metric-incidents .metric-value { color:#dc2626; }
.system-metric-versions { border-color:rgba(59,130,246,0.35); }
.system-metric-versions:hover { border-color:#3b82f6; }
.system-metric-versions .metric-value { color:#2563eb; }
.system-metric-nodata { border-color:rgba(154,173,168,0.35); }
:root[data-theme="dark"] .system-metric-availability .metric-value { color:#34d399; }
:root[data-theme="dark"] .system-metric-latency .metric-value { color:#fbbf24; }
:root[data-theme="dark"] .system-metric-incidents .metric-value { color:#f87171; }
:root[data-theme="dark"] .system-metric-versions .metric-value { color:#60a5fa; }
@media (min-width:851px) {
  .sidebar-toggle { position:absolute; z-index:2; top:22px; right:-15px; display:grid; width:30px; height:30px; place-items:center; border:1px solid #5b827b; border-radius:50%; background:#163d38; color:#e8f4f1; cursor:pointer; font:700 13px/1 system-ui; box-shadow:0 4px 12px rgba(0,0,0,.25); }
  .sidebar-toggle:hover { background:#1b4944; }
  .sidebar-toggle:focus-visible { outline:3px solid #6ee7d2; outline-offset:2px; }
  :root[data-sidebar="collapsed"] .admin-shell { grid-template-columns:78px minmax(0,1fr); }
  :root[data-sidebar="collapsed"] .sidebar { padding-inline:10px; }
  :root[data-sidebar="collapsed"] .brand { justify-content:center; padding-inline:0; }
  :root[data-sidebar="collapsed"] .brand img { width:58px; }
  :root[data-sidebar="collapsed"] .sidebar nav p,
  :root[data-sidebar="collapsed"] .sidebar nav a > span:not(.nav-icon),
  :root[data-sidebar="collapsed"] .logout-label { display:none; }
  :root[data-sidebar="collapsed"] .brand small { font-size:7px; letter-spacing:.02em; }
  :root[data-sidebar="collapsed"] .sidebar nav a { grid-template-columns:1fr; justify-items:center; gap:0; padding-inline:8px; }
  :root[data-sidebar="collapsed"] .sidebar-footer .button { width:100%; padding-inline:8px; }
}
@media (max-width:850px) { .admin-shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; }.sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.sidebar nav p { grid-column:1/-1; }.sidebar-footer { margin-top:18px; } main { padding:24px 15px 50px; }.filters { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .sidebar nav,.filters { grid-template-columns:1fr; }.page-header { align-items:flex-start; flex-direction:column; }.pagination { align-items:stretch; flex-direction:column; text-align:center; }.content-tabs { align-items:stretch; flex-direction:column; border-bottom:0; }.content-tabs a,.content-tabs a[aria-current="page"] { margin:0; border:1px solid var(--line); border-radius:8px; }.health-metric { grid-column:span 1; }.health-facts { flex-direction:column; gap:2px; }.latency-chart,.metric-trend-chart { height:150px; }.metric-trend-chart.compact { height:58px; } }

@media (prefers-reduced-motion:reduce) {
  .metric { transition:none; }
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
a.commit-link { color: var(--brand-dark); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.commit-link:hover, a.commit-link:focus-visible { text-decoration: underline; color: var(--brand); }
:root[data-theme="dark"] a.commit-link { color: #60a5fa; }
:root[data-theme="dark"] a.commit-link:hover, :root[data-theme="dark"] a.commit-link:focus-visible { color: #93c5fd; }