:root { --canvas:#08101D; --sidebar:#080E18; --surface:#0B1422; --raised:#0F1A2B; --interactive:#122239; --border:#19273A; --border-strong:#26364E; --text:#F1F6FC; --secondary:#A5B4C7; --muted:#65768E; --primary:#2563EB; --primary-hover:#3B82F6; --teal:#14B8A6; --success:#22C55E; --warning:#F59E0B; --danger:#EF4444; --unknown:#64748B; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); background:var(--canvas); font:500 13px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 88% 0%, rgb(37 99 235 / 14%), transparent 34%); }
.app-shell { min-height:100vh; display:grid; grid-template-columns:216px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:20px 12px 16px; background:var(--sidebar); border-right:1px solid var(--border); }
.brand { padding:0 10px 22px; color:var(--text); font-size:15px; font-weight:750; text-decoration:none; letter-spacing:-.02em; }.brand span { color:var(--teal); }
.nav-list { display:grid; gap:4px; }.nav-link { min-height:38px; display:flex; align-items:center; padding:0 10px; color:var(--secondary); border-radius:5px; text-decoration:none; }.nav-link.active { color:var(--text); background:var(--interactive); border-left:2px solid var(--primary); padding-left:8px; }.nav-link.muted { color:var(--muted); }
.session-indicator { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin-top:auto; padding:12px 10px; color:var(--secondary); font-size:11px; border-top:1px solid var(--border); }.session-indicator form { grid-column:1 / -1; }.session-indicator button { padding:0; color:var(--secondary); border:0; background:transparent; cursor:pointer; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--unknown); }.status-dot.online { background:var(--success); }
#main-content { min-width:0; padding:28px 30px; background:var(--surface); }.page-header { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:24px; }.eyebrow { margin:0 0 5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.secondary { margin:0; color:var(--secondary); font-size:12px; }h1 { margin:0; font-size:26px; line-height:1.15; letter-spacing:-.03em; } h2 { margin:0; font-size:15px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.kpi,.work-surface { border:1px solid var(--border); background:var(--raised); border-radius:6px; }.kpi { padding:16px; }.kpi span { display:block; color:var(--secondary); font-size:11px; }.kpi strong { display:block; margin-top:5px; font-size:26px; line-height:1; }.work-surface { overflow:hidden; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border-bottom:1px solid var(--border); }.matrix-scroll { overflow:auto; }table { width:100%; min-width:640px; border-collapse:collapse; }th,td { height:46px; padding:8px 16px; text-align:left; border-bottom:1px solid var(--border); }th { font-weight:650; }th:first-child { min-width:280px; }code { display:block; margin-top:2px; color:var(--muted); font:10px ui-monospace, SFMono-Regular, Menlo, monospace; }.badge { display:inline-block; padding:3px 6px; border:1px solid var(--border-strong); border-radius:4px; color:var(--secondary); font-size:10px; }.badge.unknown { color:var(--unknown); }.empty-state { color:var(--muted); }
.login-page { display:grid; min-height:100vh; place-items:center; padding:20px; }.login-panel { width:min(100%,380px); padding:24px; border:1px solid var(--border-strong); border-radius:6px; background:var(--raised); }.login-panel h1 { margin-bottom:4px; }.login-panel form { display:grid; gap:8px; margin-top:22px; }.login-panel label { color:var(--secondary); font-size:12px; }input { min-height:38px; padding:8px 10px; color:var(--text); border:1px solid var(--border-strong); border-radius:5px; outline:0; background:var(--canvas); }input:focus { border-color:var(--primary-hover); box-shadow:0 0 0 2px rgb(59 130 246 / 25%); }.primary-button { min-height:38px; margin-top:8px; color:var(--text); border:0; border-radius:5px; background:var(--primary); font-weight:650; cursor:pointer; }.primary-button:hover { background:var(--primary-hover); }.form-error { margin:18px 0 -6px; padding:8px 10px; color:var(--text); border:1px solid var(--danger); border-radius:5px; background:var(--raised); font-size:12px; }
.nav-link:not(.active):not(.muted):hover,.row-link:hover { background:var(--interactive); color:var(--text); }.padded { padding:16px; }.two-column,.detail-grid { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr); gap:16px; }.stack-form,.filters { display:grid; gap:10px; }.stack-form label,.filters label { display:grid; gap:4px; color:var(--secondary); font-size:11px; }.search-form { display:flex; gap:8px; align-items:end; margin-bottom:8px; }.search-form label { display:grid; gap:4px; color:var(--secondary); font-size:11px; }.secondary-button,.text-button { min-height:34px; padding:7px 10px; color:var(--text); border:1px solid var(--border-strong); border-radius:5px; background:var(--interactive); font-weight:650; cursor:pointer; }.text-button { min-height:auto; padding:4px 0; color:var(--secondary); border:0; background:transparent; }.row-link { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:11px 0; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }.row-link form { margin:0; }.row-link code { display:inline; }.badge.online { color:var(--success); }.badge.stale,.badge.not_activated { color:var(--warning); }.badge.offline,.badge.revoked,.badge.danger { color:var(--danger); }.feature-card { display:grid; grid-template-columns:minmax(180px,1fr) minmax(280px,2fr) auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }.feature-card form { margin:0; }.state-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }.state-grid dt { color:var(--muted); font-size:10px; }.state-grid dd { margin:2px 0 0; color:var(--text); }.form-notice,.warning,.activation-code { margin:0 0 12px; padding:10px; border:1px solid var(--border-strong); border-radius:5px; background:var(--interactive); }.warning { color:#FCD34D; border-color:#805B13; }.activation-code code { margin:8px 0; padding:8px; color:var(--text); background:var(--canvas); border-radius:4px; font-size:16px; letter-spacing:.08em; }.filters { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:16px; }.attention-list { margin-top:16px; padding:0 16px; }.empty-state { padding:16px; }.matrix-scroll a { color:var(--text); }
@media (max-width:800px) { .app-shell { grid-template-columns:68px 1fr; }.sidebar { padding-inline:8px; }.brand { padding-inline:4px; font-size:0; }.brand span { font-size:15px; }.nav-link { justify-content:center; padding:0; font-size:0; }.nav-link.active { border-left-width:2px; padding-left:0; }.session-indicator { grid-template-columns:1fr; justify-items:center; font-size:0; }.session-indicator form { display:block; grid-column:auto; }.logout-button { width:32px; height:32px; color:var(--secondary); border:1px solid var(--border-strong); border-radius:5px; font-size:0; }.logout-button::before { content:"↪"; font-size:16px; }#main-content { padding:20px 16px; }.kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.page-header { align-items:start; flex-direction:column; } }

/* Operations workspace polish */
button,
input {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 2px;
}

#main-content {
  position: relative;
}

#main-content > section + section {
  margin-top: 16px;
}

.sidebar {
  box-shadow: 12px 0 36px rgb(0 0 0 / 14%);
}

.nav-link {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.kpi,
.work-surface {
  box-shadow: 0 1px 0 rgb(255 255 255 / 2%), 0 12px 34px rgb(0 0 0 / 10%);
}

.kpi {
  min-height: 92px;
  border-top-color: var(--border-strong);
}

.work-surface > h2,
.padded > h2 {
  margin-bottom: 14px;
}

.section-heading {
  min-height: 66px;
  background: linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent);
}

.section-heading .secondary {
  max-width: 660px;
  margin-top: 4px;
}

.poll-hint {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 11px;
}

.feature-settings {
  border-color: var(--border-strong);
}

.feature-card {
  grid-template-columns: minmax(190px, 1fr) minmax(320px, 1.65fr) minmax(176px, auto);
  padding: 16px;
  transition: background-color 140ms ease;
}

.feature-card:last-child {
  border-bottom: 0;
}

.feature-card:hover {
  background: rgb(18 34 57 / 38%);
}

.feature-card .form-notice {
  grid-column: 1 / -1;
  margin: 0;
}

.feature-identity strong {
  font-size: 13px;
}

.feature-switch {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-width: 176px;
  padding: 7px 9px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--interactive);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.feature-switch:hover {
  border-color: #3b4f6b;
  background: #152944;
}

.switch-track {
  position: relative;
  width: 34px;
  height: 19px;
  border: 1px solid #42516a;
  border-radius: 10px;
  background: #26344a;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #a5b4c7;
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transition: transform 140ms ease, background-color 140ms ease;
}

.feature-switch[aria-checked="true"] {
  border-color: rgb(20 184 166 / 48%);
  background: rgb(20 184 166 / 8%);
}

.feature-switch[aria-checked="true"] .switch-track {
  border-color: var(--teal);
  background: var(--teal);
}

.feature-switch[aria-checked="true"] .switch-thumb {
  transform: translateX(15px);
  background: white;
}

.switch-copy {
  display: grid;
  line-height: 1.2;
}

.switch-copy > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.switch-copy strong {
  margin-top: 2px;
  font-size: 11px;
}

.is-pending .feature-switch,
.is-pending button {
  pointer-events: none;
  opacity: .55;
}

.confirm-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--raised);
  box-shadow: 0 26px 80px rgb(0 0 0 / 58%);
}

.confirm-dialog::backdrop {
  background: rgb(3 7 14 / 72%);
  backdrop-filter: blur(3px);
}

.confirm-dialog-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  padding: 20px;
}

.confirm-dialog-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fcd34d;
  border: 1px solid #805b13;
  border-radius: 6px;
  background: rgb(245 158 11 / 10%);
  font-weight: 800;
}

.confirm-dialog-card h2 {
  margin-bottom: 5px;
}

.confirm-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 7px;
}

.confirm-dialog-actions .primary-button,
.confirm-dialog-actions .secondary-button {
  min-width: 108px;
  margin: 0;
}

.toast-region {
  position: fixed;
  z-index: 50;
  top: 18px;
  right: 18px;
  display: grid;
  width: min(360px, calc(100vw - 36px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 11px 13px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: 6px;
  background: #101b2c;
  box-shadow: 0 16px 38px rgb(0 0 0 / 35%);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.danger { border-left-color: var(--danger); }

@media (max-width: 1080px) {
  .feature-card {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.5fr);
  }

  .feature-card form {
    grid-column: 1 / -1;
    width: min(100%, 240px);
  }
}

@media (max-width: 800px) {
  .two-column,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .feature-card {
    grid-template-columns: 1fr;
  }

  .feature-card form {
    grid-column: auto;
    width: 100%;
  }

  .state-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .poll-hint {
    margin-top: -5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}