:root {
  --bg: #071018;
  --surface: #0d1823;
  --surface-2: #111f2c;
  --surface-3: #172838;
  --border: #223748;
  --border-soft: #182b3a;
  --text: #f1f7fb;
  --muted: #8da4b5;
  --muted-2: #748d9e;
  --accent: #39c6a3;
  --accent-strong: #5ee8c4;
  --blue: #58a8ff;
  --warning: #f4bd57;
  --danger: #ff6e72;
  --critical: #ff4d64;
  --success: #50d890;
  --radius: 16px;
  --shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.ring-design-form textarea,
.ring-template-form textarea {
  width: 100%;
  min-height: 16rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
}

.ring-template-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ring-template-form .full-span,
.ring-template-form button {
  grid-column: 1 / -1;
}

.artifact-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0;
}

@media (max-width: 900px) {
  .ring-template-form { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scrollbar-gutter: stable; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 85% 0%, rgba(41, 122, 144, .16), transparent 28%), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 100; padding: 9px 13px; color: #041411; background: var(--accent-strong); border-radius: 9px; font-weight: 900; transform: translateY(-150%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 18px; background: rgba(9, 19, 28, .96); border-right: 1px solid var(--border-soft); backdrop-filter: blur(18px); z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 22px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #03120f; background: linear-gradient(135deg, var(--accent-strong), var(--blue)); font-weight: 900; letter-spacing: -.5px; box-shadow: 0 8px 30px rgba(57, 198, 163, .25); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { color: var(--muted); margin-top: 2px; }
.nav-list { min-height: 0; display: grid; align-content: start; gap: 17px; overflow-y: auto; padding: 0 4px 8px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nav-group { display: grid; gap: 3px; }
.nav-group-label { margin: 0 0 3px; padding: 0 11px; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: 1.25px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; color: var(--muted); border: 1px solid transparent; border-radius: 10px; transition: .16s ease; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(57, 198, 163, .17), rgba(88, 168, 255, .08)); border-color: rgba(57, 198, 163, .24); }
.nav-icon { width: 20px; flex: 0 0 20px; text-align: center; font-size: 16px; }
.nav-icon-text { font-size: 9px; font-weight: 950; letter-spacing: -.2px; }
.sidebar-section { max-height: 145px; margin-top: 18px; padding: 12px 7px 0; overflow: auto; border-top: 1px solid var(--border-soft); }
.sidebar-label { margin: 0 0 9px; color: var(--muted-2); text-transform: uppercase; font-weight: 800; font-size: 10px; letter-spacing: 1.2px; }
.site-shortcut { display: flex; align-items: center; gap: 9px; padding: 7px 3px; color: var(--muted); font-size: 12px; }
.site-shortcut:hover { color: var(--text); }
.sidebar-foot { margin-top: auto; padding: 16px 8px 3px; border-top: 1px solid var(--border-soft); color: var(--muted); }
.mode-chip { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; color: var(--text); }
.assurance-mode-chip:hover { color: var(--accent-strong); }
.sidebar-foot small { display: block; font-size: 11px; line-height: 1.45; }

.main-content { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; height: 70px; display: flex; align-items: center; gap: 14px; padding: 0 28px; border-bottom: 1px solid var(--border-soft); background: rgba(7, 16, 24, .84); backdrop-filter: blur(18px); }
.global-search { flex: 1; max-width: 720px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 13px; height: 42px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); }
.global-search:focus-within { border-color: rgba(57, 198, 163, .7); box-shadow: 0 0 0 3px rgba(57, 198, 163, .08); }
.global-search input { flex: 1; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; }
.global-search input::placeholder { color: var(--muted-2); }
kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted-2); background: var(--surface-2); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-alarm-badge { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-width: 62px; padding: 6px 9px; color: var(--muted); border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.topbar-alarm-badge > span { grid-row: 1 / 3; color: var(--warning); }
.topbar-alarm-badge strong { font-size: 11px; line-height: 1; }
.topbar-alarm-badge small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
.topbar-alarm-badge.critical { color: #ff9b9e; border-color: rgba(255,110,114,.3); background: rgba(255,110,114,.06); }
.topbar-alarm-badge.freshness-warning { box-shadow: inset 0 -2px 0 rgba(244,189,87,.75); }
.read-only-badge { padding: 5px 9px; border: 1px solid rgba(57, 198, 163, .28); background: rgba(57, 198, 163, .08); color: var(--accent-strong); border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border); font-weight: 800; }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--text); font-size: 20px; }
.page-content { max-width: 1700px; margin: 0 auto; padding: 28px; }
.demo-banner { margin-bottom: 20px; padding: 11px 14px; color: #ffe6a6; background: rgba(244, 189, 87, .09); border: 1px solid rgba(244, 189, 87, .25); border-radius: 11px; font-size: 12px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 7px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -1.4px; }
.page-heading p { max-width: 760px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.eyebrow { color: var(--accent-strong) !important; text-transform: uppercase; letter-spacing: 1.4px; font-size: 10px !important; font-weight: 900; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.heading-status { display: flex; align-items: center; gap: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-size: 11px; font-weight: 800; }
.page-context { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.page-context span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(17,31,44,.55); font-size: 9px; font-weight: 800; }
.quick-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.quick-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; min-height: 74px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg,rgba(17,31,44,.86),rgba(10,22,31,.86)); transition: .15s ease; }
.quick-action:hover { transform: translateY(-1px); border-color: rgba(57,198,163,.4); background: var(--surface-2); }
.quick-action strong { font-size: 12px; }
.quick-action small { grid-column: 1; color: var(--muted); font-size: 9px; line-height: 1.35; }
.quick-action > span { grid-row: 1 / 3; grid-column: 2; color: var(--accent-strong); font-size: 18px; }
.role-briefing { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(320px,1.4fr) auto; gap: 18px; align-items: center; margin-bottom: 18px; padding: 17px 19px; border: 1px solid rgba(88,168,255,.24); border-radius: 14px; background: linear-gradient(120deg,rgba(88,168,255,.08),rgba(57,198,163,.04)); }
.role-briefing h2 { margin: 7px 0 5px; font-size: 17px; }
.role-briefing p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.role-capability-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 15px; }
.role-capability-list span { color: #c9e4ef; font-size: 10px; line-height: 1.4; }
.workflow-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--border); }
.workflow-rail > div { min-width: 0; display: flex; gap: 10px; align-items: center; padding: 12px 13px; background: rgba(13,24,35,.97); }
.workflow-rail b { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.3); border-radius: 8px; background: rgba(57,198,163,.07); font-size: 10px; }
.workflow-rail span, .workflow-rail strong, .workflow-rail small { min-width: 0; display: block; }
.workflow-rail strong { font-size: 10px; }
.workflow-rail small { margin-top: 2px; color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.breadcrumb { display: flex; gap: 8px; color: var(--muted); margin-bottom: 15px; font-size: 12px; }
.breadcrumb a:hover { color: var(--accent-strong); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 800; font-size: 12px; transition: .15s ease; }
.button.primary { color: #041411; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); box-shadow: 0 8px 24px rgba(57, 198, 163, .16); }
.button.primary:hover { transform: translateY(-1px); }
.button.secondary { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.button.secondary:hover, .button.ghost:hover { border-color: var(--accent); }
.button.ghost { color: var(--muted); background: transparent; border-color: var(--border); }
.button:disabled { cursor: not-allowed; opacity: .45; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; min-height: 132px; padding: 20px; background: linear-gradient(150deg, rgba(17, 31, 44, .98), rgba(11, 23, 33, .98)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card::after { content: ""; position: absolute; z-index: 0; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(57, 198, 163, .11), transparent 68%); pointer-events: none; }
.metric-card > * { position: relative; z-index: 1; width: 100%; }
.metric-card.danger-accent::after { background: radial-gradient(circle, rgba(255, 110, 114, .15), transparent 68%); }
.metric-card.warning-accent::after { background: radial-gradient(circle, rgba(244, 189, 87, .15), transparent 68%); }
.metric-label { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-size: 10px; font-weight: 900; }
.metric-value { display: block; margin: 9px 0 6px; font-size: 34px; font-weight: 850; line-height: 1.05; letter-spacing: -1.5px; }
.metric-value.small-value { font-size: 25px; margin-top: 13px; }
.metric-note { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }

.content-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.content-grid > * { min-width: 0; }

.disabled-action-explanation {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 18rem;
}

.disabled-action-explanation small {
  color: var(--muted);
  line-height: 1.35;
  text-align: right;
}

.disabled-action-explanation.compact {
  align-items: flex-start;
  max-width: 9rem;
}

.disabled-action-explanation.compact small { text-align: left; }
.content-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.panel { margin-bottom: 18px; padding: 20px; background: rgba(13, 24, 35, .91); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.panel-heading h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.3px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.text-link { color: var(--accent-strong); font-size: 12px; font-weight: 800; white-space: nowrap; }

.site-card-list { display: grid; gap: 10px; }
.site-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border-soft); background: rgba(17, 31, 44, .54); border-radius: 13px; transition: .15s ease; }
.site-card:hover { transform: translateY(-1px); border-color: rgba(57, 198, 163, .38); background: var(--surface-2); }
.site-health-ring { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 4px solid var(--success); background: var(--surface); }
.site-health-ring.risk-warning { border-color: var(--warning); }
.site-health-ring.risk-critical { border-color: var(--danger); }
.site-health-ring span { font-weight: 900; font-size: 16px; line-height: 1; }
.site-health-ring small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.site-card-main { min-width: 0; flex: 1; }
.site-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.site-card-main p { margin: 3px 0 8px; color: var(--muted); font-size: 12px; }
.site-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted-2); font-size: 10px; }
.arrow { color: var(--muted-2); font-size: 18px; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(141, 164, 181, .08); }
.status-dot.status-healthy, .status-dot.status-passed, .status-dot.status-completed, .status-dot.status-ok { background: var(--success); box-shadow: 0 0 0 4px rgba(80, 216, 144, .09); }
.status-dot.status-enabled { background: var(--blue); box-shadow: 0 0 0 4px rgba(88, 168, 255, .09); }
.status-dot.status-warning { background: var(--warning); box-shadow: 0 0 0 4px rgba(244, 189, 87, .09); }
.status-dot.status-critical, .status-dot.status-failed { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 110, 114, .09); }
.pill { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; white-space: nowrap; }
.status-pill-healthy, .status-pill-passed, .status-pill-completed, .status-pill-matched, .status-pill-ok, .status-pill-verified { color: #86efbb; border-color: rgba(80,216,144,.3); background: rgba(80,216,144,.08); }
.status-pill-enabled { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.status-pill-warning, .status-pill-exception, .status-pill-missing, .status-pill-partial, .status-pill-running, .status-pill-one-sided { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
.status-pill-external { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.status-pill-implemented { color: #86efbb; border-color: rgba(80,216,144,.3); background: rgba(80,216,144,.08); }
.status-pill-partial, .status-pill-planned { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
.status-pill-transition { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.status-pill-owner { color: #ffc4a1; border-color: rgba(255,151,92,.35); background: rgba(255,151,92,.09); }
.status-pill-neighbor { color: #b8d8ff; border-color: rgba(88,168,255,.35); background: rgba(88,168,255,.09); }
.status-pill-legacy-exempt { color: #bdc9d2; border-color: rgba(143,162,176,.3); background: rgba(143,162,176,.08); }
.design-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.migration-label { color: var(--muted); font-size: 10px; }
.status-pill-critical, .status-pill-failed, .status-pill-unexpected { color: #ff9b9e; border-color: rgba(255,110,114,.3); background: rgba(255,110,114,.08); }
.severity-pill-critical { color: #ff8190; border-color: rgba(255,77,100,.35); background: rgba(255,77,100,.1); }
.severity-pill-high { color: #ff9b9e; border-color: rgba(255,110,114,.32); background: rgba(255,110,114,.08); }
.severity-pill-medium { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
.severity-pill-low { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.status-pill-cleared { color: #86efbb; border-color: rgba(80,216,144,.3); background: rgba(80,216,144,.08); }
.status-pill-acknowledged { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }

.live-nav-icon { color: var(--accent-strong); font-size: 12px; text-shadow: 0 0 12px rgba(94,232,196,.7); }
.ops-heading { align-items: center; }
.live-status { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 8px 13px; color: #86efbb; border: 1px solid rgba(80,216,144,.3); background: rgba(80,216,144,.07); border-radius: 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; }
.live-status.degraded { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.07); }
.live-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(80,216,144,.45); animation: live-pulse 2s infinite; }
.degraded .live-pulse { background: var(--warning); animation: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(80,216,144,.45); } 70% { box-shadow: 0 0 0 8px rgba(80,216,144,0); } 100% { box-shadow: 0 0 0 0 rgba(80,216,144,0); } }

.ops-command-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.ops-command-strip a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg,rgba(17,31,44,.82),rgba(10,22,31,.82)); transition: .15s ease; }
.ops-command-strip a:hover { transform: translateY(-1px); border-color: rgba(57,198,163,.36); }
.ops-command-strip span { color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 900; letter-spacing: .6px; }
.ops-command-strip strong { grid-row: 1 / 3; grid-column: 2; font-size: 25px; }
.ops-command-strip small { color: var(--muted-2); font-size: 9px; }
.ops-workspace { margin-top: 18px; }
.ops-workspace-tabs { position: sticky; top: 72px; z-index: 8; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; padding: 7px; border: 1px solid var(--border); border-radius: 13px; background: rgba(10,21,30,.94); box-shadow: 0 12px 30px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
.ops-workspace-tab { min-width: 0; display: grid; gap: 3px; padding: 10px 11px; color: var(--muted); border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.ops-workspace-tab span { overflow: hidden; color: inherit; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ops-workspace-tab small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-workspace-tab:hover { color: var(--text); background: rgba(57,198,163,.05); }
.ops-workspace-tab.active { color: var(--accent-strong); border-color: rgba(57,198,163,.28); background: rgba(57,198,163,.09); box-shadow: inset 0 -2px 0 rgba(57,198,163,.55); }
.ops-workspace-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.device-workspace-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
.ops-workspace-panel[hidden] { display: none; }
.ops-workspace-panel > .panel:last-child, .ops-workspace-panel > .content-grid:last-child { margin-bottom: 0; }
.ops-live-table { max-height: min(52vh, 520px); overflow: auto; overflow-anchor: none; contain: layout paint; }
.ops-live-table thead { position: sticky; top: 0; z-index: 2; }
.ops-live-table th { box-shadow: 0 1px 0 var(--border); }

.health-score { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(80,216,144,.28); border-radius: 50%; color: #86efbb; background: rgba(80,216,144,.08); font-size: 11px; font-weight: 900; }
.health-score.health-warning { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
.health-score.health-failed { color: #ff9b9e; border-color: rgba(255,110,114,.3); background: rgba(255,110,114,.08); }
.traffic-trend { height: 190px; display: flex; align-items: end; gap: 2px; padding: 12px 4px 2px; overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,transparent,rgba(57,198,163,.025)); }
.traffic-trend > span { flex: 1 1 0; min-width: 2px; height: var(--height); border-radius: 3px 3px 0 0; background: linear-gradient(180deg,var(--accent-strong),rgba(57,198,163,.28)); transition: opacity .15s ease; }
.traffic-trend > span:hover { opacity: .72; }
.trend-legend { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; color: var(--muted-2); font-size: 9px; }
.trend-legend strong { color: var(--muted); }
.source-health-list { display: grid; gap: 8px; }
.source-health-list > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.45); }
.source-health-list strong, .source-health-list small { display: block; }
.source-health-list small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.source-health-list b { color: var(--accent-strong); font-size: 10px; }
.rank-row > span { display: grid; gap: 2px; }
.rank-row small { color: var(--muted-2); font-size: 8px; }
.compact-grid { margin-bottom: 0; }
.boundary-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.boundary-chips span { padding: 5px 8px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(17,31,44,.55); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; }
.gnmi-sensor-list { display: grid; gap: 7px; }
.gnmi-sensor-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }
.gnmi-sensor-list strong { font-size: 10px; }
.gnmi-sensor-list span { color: var(--accent-strong); font-size: 9px; white-space: nowrap; }
.bounded-detail-table { max-height: min(62vh, 660px); overflow: auto; }
.bounded-detail-table thead { position: sticky; top: 0; z-index: 2; }
.bounded-detail-table th { box-shadow: 0 1px 0 var(--border); }
.sensor-stack.expanded { max-height: min(62vh, 660px); }

.health-score-card .score-track { width: 100%; height: 5px; margin: 7px 0 9px; overflow: hidden; border-radius: 999px; background: rgba(103,128,145,.18); }
.score-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--accent-strong)); }
.event-trend { height: 190px; display: grid; grid-template-columns: repeat(24,minmax(0,1fr)); gap: 5px; align-items: end; padding: 9px 2px 0; }
.trend-column { min-width: 0; height: 100%; display: grid; grid-template-rows: 18px minmax(0,1fr) 18px; align-items: end; text-align: center; }
.trend-value { min-height: 16px; color: var(--muted); font-size: 8px; }
.trend-bar { position: relative; height: 100%; display: flex; align-items: flex-end; overflow: hidden; border-radius: 5px 5px 2px 2px; background: rgba(103,128,145,.08); }
.trend-bar span { width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,var(--accent-strong),rgba(57,198,163,.34)); }
.trend-bar span.warning { background: linear-gradient(180deg,var(--warning),rgba(244,189,87,.3)); }
.trend-bar span.critical { background: linear-gradient(180deg,var(--critical),rgba(255,77,100,.32)); }
.trend-column small { overflow: visible; color: var(--muted-2); font-size: 7px; white-space: nowrap; transform: rotate(-35deg); transform-origin: center; }
.rank-list { display: grid; gap: 8px; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.48); }
.rank-row span { color: var(--muted); font-size: 11px; }
.rank-row strong { color: var(--accent-strong); }

.filter-panel { padding: 0; overflow: hidden; }
.alarm-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: rgba(9,19,28,.45); }
.alarm-tab { min-width: 130px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; color: var(--muted); border-right: 1px solid var(--border-soft); border-bottom: 2px solid transparent; font-size: 11px; font-weight: 800; }
.alarm-tab:hover { color: var(--text); background: rgba(17,31,44,.65); }
.alarm-tab.active { color: var(--text); border-bottom-color: var(--accent); background: rgba(57,198,163,.07); }
.alarm-tab strong { display: grid; min-width: 25px; height: 22px; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 10px; }
.alarm-filter-form { display: grid; grid-template-columns: minmax(220px,1.5fr) minmax(150px,.7fr) minmax(180px,.8fr) auto auto; gap: 12px; align-items: end; padding: 17px; }
.alarm-filter-form label { display: grid; gap: 6px; }
.alarm-filter-form label > span { color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; font-size: 9px; font-weight: 900; }
.alarm-filter-form input, .alarm-filter-form select, .alarm-ack-form input { width: 100%; min-height: 39px; padding: 8px 11px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; outline: none; background: var(--surface-2); }
.alarm-filter-form input:focus, .alarm-filter-form select:focus, .alarm-ack-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,198,163,.08); }

.alarm-case-list { display: grid; gap: 9px; }
.alarm-case { position: relative; display: grid; grid-template-columns: 4px minmax(260px,1fr) minmax(145px,auto) minmax(230px,.55fr); gap: 14px; align-items: center; padding: 14px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; background: linear-gradient(145deg,rgba(17,31,44,.64),rgba(10,22,31,.68)); }
.alarm-case:hover { border-color: var(--border); }
.alarm-case-accent { align-self: stretch; min-height: 60px; border-radius: 4px; background: var(--blue); }
.alarm-case.severity-critical .alarm-case-accent { background: var(--critical); box-shadow: 0 0 18px rgba(255,77,100,.25); }
.alarm-case.severity-warning .alarm-case-accent { background: var(--warning); }
.alarm-case.state-cleared { opacity: .7; }
.alarm-case.state-cleared .alarm-case-accent { background: var(--success); }
.alarm-case-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.alarm-case-title strong { font-size: 13px; }
.alarm-case-title a:hover { color: var(--accent-strong); }
.alarm-case-main p { margin: 7px 0; color: #c3d3dd; font-size: 11px; line-height: 1.5; }
.alarm-case-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted-2); font-size: 9px; }
.alarm-case-meta a { color: var(--accent-strong); font-weight: 800; }
.alarm-case-time { display: grid; gap: 3px; text-align: right; }
.alarm-case-time strong { font-size: 10px; }
.alarm-case-time small { color: var(--muted-2); font-size: 8px; }
.alarm-ack-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.alarm-ack-form input { min-height: 35px; font-size: 10px; }
.alarm-note { padding: 9px 11px; color: var(--muted); border-left: 2px solid var(--warning); background: rgba(244,189,87,.05); font-size: 10px; }
.alarm-list-panel { position: relative; }
.alarm-loading-state { position: absolute; z-index: 6; inset: 0; display: none; place-content: center; justify-items: center; gap: 7px; min-height: 260px; color: var(--text); border-radius: inherit; background: rgba(7,17,25,.88); backdrop-filter: blur(3px); }
.alarm-list-panel.is-loading .alarm-loading-state { display: grid; }
.alarm-loading-state small { color: var(--muted); }
.loading-spinner { width: 28px; height: 28px; border: 3px solid rgba(103,128,145,.25); border-top-color: var(--accent); border-radius: 50%; animation: loading-spin .75s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pagination > span:not(.button) { display: grid; gap: 3px; min-width: 150px; color: var(--muted); text-align: center; font-size: 10px; }
.pagination > span strong { color: var(--text); }
.pagination > span small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.button.disabled { opacity: .45; pointer-events: none; }

.connection-matrix { display: grid; grid-template-columns: repeat(auto-fill,minmax(135px,1fr)); gap: 8px; }
.connection-tile { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.5); }
.connection-tile:hover { border-color: rgba(57,198,163,.38); }
.connection-tile > span { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(255,110,114,.08); }
.connection-tile.connected > span { background: var(--success); box-shadow: 0 0 0 4px rgba(80,216,144,.08); }
.connection-tile strong { overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.connection-tile small { color: var(--muted-2); font-size: 7px; }

.compact-alarm-list { display: grid; gap: 8px; }
.compact-alarm { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.48); }
.compact-alarm div { min-width: 0; display: grid; gap: 3px; }
.compact-alarm strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.compact-alarm small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.sensor-stack { display: grid; gap: 7px; max-height: 420px; overflow: auto; }
.sensor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.48); }
.sensor-row div { display: grid; gap: 2px; }
.sensor-row strong { font-size: 10px; }
.sensor-row small { color: var(--muted); font-size: 8px; }
.sensor-value { color: var(--accent-strong); font-size: 15px; font-weight: 900; }
.empty-state.compact, .warning-callout.compact { padding: 10px 12px; }

.finding-list { display: grid; gap: 8px; }
.finding-row { position: relative; display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 10px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.45); }
.finding-row:hover { border-color: var(--border); }
.severity-bar { align-self: stretch; width: 4px; min-height: 32px; border-radius: 4px; background: var(--blue); }
.severity-bar.severity-critical { background: var(--critical); }
.severity-bar.severity-high { background: var(--danger); }
.severity-bar.severity-medium { background: var(--warning); }
.finding-title { font-weight: 800; font-size: 12px; }
.finding-subtitle { margin-top: 3px; color: var(--muted); font-size: 10px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th { padding: 11px 13px; text-align: left; color: var(--muted-2); background: rgba(17,31,44,.7); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .65px; font-size: 9px; }
td { padding: 12px 13px; border-bottom: 1px solid var(--border-soft); color: #dce8ef; font-size: 11px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(23,40,56,.42); }
td small { color: var(--muted); }
td code { color: #bce9de; }
.table-link { color: var(--accent-strong); font-weight: 800; }

.integration-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.integration-card { display: flex; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.integration-card span { color: var(--accent-strong); font-size: 11px; }
.integration-card.disabled { opacity: .55; }
.integration-card.disabled span { color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-line { width: 20px; height: 3px; display: inline-block; border-radius: 2px; background: var(--success); }
.legend-line.missing { background: var(--warning); }
.legend-line.unexpected { background: var(--danger); }
.legend-line.verified { background: var(--success); }
.legend-line.one-sided { background: var(--warning); }
.legend-line.external { background: #58a8ff; }
.topology-canvas { overflow-x: auto; min-height: 190px; padding: 24px 12px 18px; background: linear-gradient(180deg, rgba(17,31,44,.48), rgba(9,19,28,.38)); border: 1px solid var(--border-soft); border-radius: 14px; }
.ring-role-summary { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.ring-role-item { min-width: 210px; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); font-size: 10px; }
.ring-role-item span { color: var(--muted); font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.ring-role-item.role-owner { border-color: rgba(255,151,92,.28); }
.ring-role-item.role-neighbor { border-color: rgba(88,168,255,.28); }
.topology-track { min-width: max-content; display: flex; align-items: center; }
.topology-node { width: 124px; flex: 0 0 124px; min-height: 92px; display: grid; place-items: center; align-content: center; padding: 10px; border: 1px solid rgba(80,216,144,.3); background: linear-gradient(150deg, rgba(20,45,51,.96), rgba(13,31,39,.96)); border-radius: 13px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.topology-node.node-warning { border-color: rgba(244,189,87,.46); }
.topology-node.node-critical { border-color: rgba(255,110,114,.5); }
.topology-node.pop-node { border-color: rgba(88,168,255,.36); background: linear-gradient(150deg, rgba(22,42,64,.96), rgba(13,29,46,.96)); }
.node-icon { width: 34px; height: 26px; display: grid; place-items: center; margin-bottom: 6px; color: var(--accent-strong); background: rgba(57,198,163,.08); border: 1px solid rgba(57,198,163,.2); border-radius: 7px; font-size: 9px; font-weight: 900; }
.pop-node .node-icon { color: #9ccaff; border-color: rgba(88,168,255,.2); background: rgba(88,168,255,.08); }
.topology-node strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.topology-node small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.topology-edge { width: 118px; flex: 0 0 118px; display: grid; place-items: center; gap: 6px; color: var(--muted-2); text-align: center; }
.edge-line { width: 100%; height: 3px; background: var(--success); box-shadow: 0 0 14px rgba(80,216,144,.25); }
.edge-missing .edge-line { height: 2px; background: repeating-linear-gradient(90deg, var(--warning) 0 7px, transparent 7px 13px); box-shadow: none; }
.topology-edge small { max-width: 105px; font-size: 8px; }
.drift-lane { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border); }
.drift-label { color: var(--muted); text-transform: uppercase; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.drift-link { padding: 7px 9px; border-radius: 8px; color: var(--muted); background: rgba(255,110,114,.06); border: 1px solid rgba(255,110,114,.22); font-size: 9px; }
.drift-link span { margin-left: 6px; color: #ff9b9e; text-transform: uppercase; font-weight: 900; }
.topology-findings { display: grid; gap: 8px; margin-top: 12px; }
.topology-finding { display: grid; grid-template-columns: auto minmax(220px, auto) 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--muted); font-size: 11px; }
.topology-finding strong { color: var(--text); }
.evidence-meta { margin: 10px 2px 0; color: var(--muted); font-size: 10px; }
.lldp-device-strip { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.lldp-device { min-width: 130px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.55); }
.lldp-device.has-evidence { border-color: rgba(80,216,144,.28); }
.lldp-device .node-icon { grid-row: 1 / 3; margin: 0; }
.lldp-device strong { font-size: 9px; }
.lldp-device small { color: var(--muted); font-size: 8px; }
.node-role { width: max-content; padding: 3px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(143,162,176,.07); text-transform: uppercase; font-size: 7px; font-weight: 900; letter-spacing: .35px; }
.node-role.role-owner { color: #ffc4a1; border-color: rgba(255,151,92,.3); background: rgba(255,151,92,.08); }
.node-role.role-neighbor { color: #b8d8ff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.lldp-link-section { margin-top: 16px; }
.lldp-link-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 7px; padding: 0 2px; }
.lldp-link-section-heading div { display: grid; gap: 3px; }
.lldp-link-section-heading strong { font-size: 12px; }
.lldp-link-section-heading small { color: var(--muted); font-size: 10px; }
.lldp-link-section-heading > span { flex: 0 0 auto; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.lldp-link-list { display: grid; border: 1px solid var(--border-soft); border-radius: 11px; overflow-x: auto; background: rgba(9,19,28,.38); }
.lldp-link-table-head, .lldp-link-row { min-width: 580px; display: grid; grid-template-columns: minmax(210px,1fr) 94px minmax(210px,1fr); align-items: center; gap: 12px; }
.lldp-link-table-head { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); color: var(--muted-2); background: rgba(20,36,50,.58); text-transform: uppercase; font-size: 9px; font-weight: 900; letter-spacing: .45px; }
.lldp-link-table-head span:nth-child(2) { text-align: center; }
.lldp-link-row { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
.lldp-link-row:last-child { border-bottom: 0; }
.lldp-link-row:hover { background: rgba(23,40,56,.36); }
.lldp-link-row.state-one-sided { box-shadow: inset 3px 0 0 var(--warning); }
.lldp-link-row.state-external { box-shadow: inset 3px 0 0 #58a8ff; }
.lldp-link-endpoint { min-width: 0; display: flex; align-items: center; gap: 8px; }
.lldp-link-endpoint.target { justify-content: flex-start; }
.endpoint-identity { min-width: 0; display: flex; align-items: center; gap: 7px; }
.lldp-link-endpoint strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.lldp-link-endpoint code { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; color: #bce9de; background: rgba(80,216,144,.07); font-size: 10px; }
.lldp-link-endpoint small { margin-left: auto; color: var(--muted); white-space: nowrap; font-size: 9px; }
.lldp-link-endpoint .node-role { flex: 0 0 auto; margin-left: auto; }
.lldp-link-endpoint.target .node-role { margin-left: 0; }
.lldp-link-connector { display: grid; place-items: center; color: var(--success); }
.lldp-link-connector strong { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 76px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; background: rgba(11,24,34,.96); font-size: 11px; }
.lldp-link-connector strong span { color: var(--muted); text-transform: uppercase; font-size: 8px; font-weight: 900; letter-spacing: .35px; }
.state-one-sided .lldp-link-connector { color: var(--warning); }
.state-external .lldp-link-connector { color: #58a8ff; }

/* v2.49 physical-assurance workspace */
.topology-canvas { overflow: hidden; padding: 0; background: radial-gradient(circle at 15% 0, rgba(61,209,177,.08), transparent 35%), linear-gradient(180deg, rgba(15,29,41,.94), rgba(8,18,27,.96)); }
.topology-workspace { min-width: 0; }
.topology-workspace-header { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border-soft); }
.topology-workspace-header h3 { margin: 4px 0; font-size: 17px; }
.topology-workspace-header p { margin: 0; color: var(--muted); font-size: 10px; }
.topology-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.topology-summary > span { display: grid; gap: 2px; min-width: 92px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; color: var(--muted); background: rgba(12,25,36,.62); font-size: 9px; text-transform: uppercase; letter-spacing: .35px; }
.topology-summary strong { color: var(--text); font-size: 15px; letter-spacing: 0; }
.topology-view-tabs { display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; border-bottom: 1px solid var(--border-soft); scrollbar-width: thin; }
.topology-view-tabs button { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid transparent; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.topology-view-tabs button:hover { color: var(--text); }
.topology-view-tabs button[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); background: linear-gradient(180deg, transparent, rgba(61,209,177,.06)); }
.topology-view-tabs button span { min-width: 18px; padding: 2px 5px; border-radius: 999px; color: var(--muted-2); background: rgba(143,162,176,.1); font-size: 9px; }
.topology-view-panel { min-width: 0; padding: 18px; overflow-x: auto; }
.topology-view-panel[hidden] { display: none; }
.topology-map-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,290px); gap: 14px; min-width: 740px; }
.topology-map-interactive { align-items: stretch; min-width: 0; }
.topology-graph-shell { --topology-graph-frame-height: clamp(540px, 64vh, 760px); --topology-toolbar-strip: 60px; position: relative; grid-column: 1; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--topology-toolbar-strip) auto; min-width: 0; min-height: var(--topology-graph-frame-height); overflow: hidden; border: 1px solid rgba(88,168,255,.2); border-radius: 13px; background: radial-gradient(circle at 50% 48%, rgba(39,103,120,.14), transparent 48%), #07131d; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 42px rgba(0,0,0,.2); }
.topology-graph-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(95,143,166,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(95,143,166,.055) 1px, transparent 1px), linear-gradient(rgba(95,143,166,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(95,143,166,.025) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; }
.topology-graph-toolbar { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: center; justify-self: end; width: fit-content; margin-right: 12px; display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,20,29,.92); box-shadow: 0 8px 22px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.topology-graph-toolbar button { appearance: none; min-width: 32px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border-soft); border-radius: 7px; color: var(--text); background: var(--surface-2); font-size: 11px; font-weight: 900; cursor: pointer; }
.topology-graph-toolbar button:hover { border-color: rgba(61,209,177,.48); color: var(--accent-strong); }
.topology-graph-toolbar output { min-width: 42px; padding: 0 4px; color: var(--muted); font: 9px var(--mono); text-align: center; }
.topology-graph-legend { position: relative; }
.topology-graph-legend summary { min-height: 30px; display: grid; place-items: center; padding: 5px 9px; border: 1px solid var(--border-soft); border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: 10px; font-weight: 900; cursor: pointer; list-style: none; }
.topology-graph-legend summary::-webkit-details-marker { display: none; }
.topology-graph-legend[open] summary, .topology-graph-legend summary:hover { border-color: rgba(61,209,177,.48); color: var(--accent-strong); }
.topology-graph-legend > div { position: absolute; z-index: 4; top: calc(100% + 9px); right: 0; width: 150px; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(8,20,29,.98); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.topology-graph-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; }
.topology-graph-legend i { width: 20px; height: 3px; display: inline-block; border-radius: 999px; background: var(--accent-strong); box-shadow: 0 0 4px rgba(94,232,196,.4); }
.topology-graph-legend i.is-external { background: var(--blue); }
.topology-graph-legend i.is-attention { background: var(--warning); }
.topology-graph-legend i.is-selected { height: 5px; background: #fff; box-shadow: 0 0 7px rgba(255,255,255,.65); }
.topology-graph-svg { position: relative; z-index: 1; grid-column: 1; grid-row: 2; display: block; width: 100%; min-height: 0; height: calc(var(--topology-graph-frame-height) - var(--topology-toolbar-strip) - 2px); cursor: grab; touch-action: none; user-select: none; }
.topology-graph-svg.is-panning { cursor: grabbing; }
.topology-graph-guidance { position: absolute; z-index: 2; inset: auto 12px 10px; width: fit-content; max-width: calc(100% - 24px); margin: 0; padding: 6px 9px; border: 1px solid rgba(34,55,72,.72); border-radius: 7px; color: var(--muted); background: rgba(7,19,29,.86); font-size: 9px; backdrop-filter: blur(8px); }
.topology-graph-fallback { display: none; }
.topology-graph-node, .topology-graph-link { cursor: pointer; }
.topology-graph-node-body { fill: #102330; stroke: #365467; stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .15s ease, stroke .15s ease, filter .15s ease; }
.topology-graph-node:hover .topology-graph-node-body { fill: #16303d; stroke: #55bda7; }
.topology-graph-node.is-selected .topology-graph-node-body, .topology-graph-node:focus-visible .topology-graph-node-body { fill: #163d3c; stroke: var(--accent-strong); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(94,232,196,.5)); }
.topology-graph-node.is-external .topology-graph-node-body { fill: #112739; stroke: var(--blue); stroke-dasharray: 7 4; }
.topology-graph-node.is-external.is-design-only .topology-graph-node-body { fill: #2a2418; stroke: var(--warning); stroke-dasharray: 4 7; }
.topology-graph-node.is-external.is-design-only .topology-graph-node-status { fill: var(--warning); filter: none; }
.topology-graph-node.is-external.is-design-only .topology-graph-node-kicker { fill: #ffd481; }
.topology-graph-node.node-warning .topology-graph-node-body { stroke: var(--warning); }
.topology-graph-node.node-critical .topology-graph-node-body { stroke: var(--danger); }
.topology-graph-node-status { fill: var(--success); filter: drop-shadow(0 0 5px rgba(80,216,144,.8)); }
.topology-graph-node.node-warning .topology-graph-node-status { fill: var(--warning); }
.topology-graph-node.node-critical .topology-graph-node-status { fill: var(--danger); }
.topology-graph-node-kicker { fill: var(--accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .75px; }
.topology-graph-node.is-external .topology-graph-node-kicker { fill: #9dccff; }
.topology-graph-node-name { fill: var(--text); font-size: 13px; font-weight: 900; }
.topology-graph-node-meta { fill: #95b0c2; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.topology-graph-node-links { fill: #7894a6; font-size: 7px; font-weight: 900; letter-spacing: .45px; }
.topology-graph-svg[data-dense-mode="true"] .topology-graph-node-kicker { font-size: 10px; }
.topology-graph-svg[data-dense-mode="true"] .topology-graph-node-name { font-size: 15px; }
.topology-graph-svg[data-dense-mode="true"] .topology-graph-node-meta { font-size: 9px; }
.topology-graph-svg[data-dense-mode="true"] .topology-graph-node-links { font-size: 8px; }
.topology-graph-node-schematic rect { fill: #253c49; stroke: #678497; }
.topology-graph-node-schematic path { fill: none; stroke: #7fa0b3; }
.topology-graph-node-schematic circle { fill: var(--success); }
.topology-graph-link-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.topology-graph-link-line { fill: none; stroke: #55cda9; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(85,205,169,.3)); transition: stroke-width .15s ease, opacity .15s ease, filter .15s ease; }
.topology-graph-link.state-matched .topology-graph-link-line { stroke: var(--success); }
.topology-graph-link.state-verified .topology-graph-link-line { stroke: var(--accent-strong); }
.topology-graph-link.state-external .topology-graph-link-line { stroke: var(--blue); }
.topology-graph-link.state-one-sided .topology-graph-link-line { stroke: var(--warning); stroke-dasharray: 10 7; }
.topology-graph-link.state-missing .topology-graph-link-line { stroke: var(--warning); stroke-dasharray: 4 9; opacity: .68; }
.topology-graph-link.state-unexpected .topology-graph-link-line { stroke: var(--danger); stroke-dasharray: 14 5 3 5; }
.topology-graph-link.ports-unresolved .topology-graph-link-line { opacity: .72; }
.topology-graph-link.is-bundled-member .topology-graph-link-line { opacity: 0; }
.topology-graph-link.is-bundled-member:hover .topology-graph-link-line, .topology-graph-link.is-bundled-member:focus-visible .topology-graph-link-line, .topology-graph-link.is-bundled-member.is-selected .topology-graph-link-line, .topology-graph-link.is-bundled-member.is-member-revealed .topology-graph-link-line { opacity: 1; }
.topology-graph-link:hover .topology-graph-link-line, .topology-graph-link.is-related .topology-graph-link-line { stroke-width: 5; filter: drop-shadow(0 0 6px currentColor); }
.topology-graph-link.is-selected .topology-graph-link-line, .topology-graph-link:focus-visible .topology-graph-link-line { stroke-width: 5.5; filter: drop-shadow(0 0 7px rgba(255,255,255,.5)); }
.topology-graph-link-bundle-trunk { pointer-events: none; transition: opacity .12s ease; }
.topology-graph-link-bundle-trunk-line { fill: none; stroke: var(--accent-strong); stroke-width: 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(94,232,196,.38)); }
.topology-graph-link-bundle-trunk.state-matched .topology-graph-link-bundle-trunk-line { stroke: var(--success); }
.topology-graph-link-bundle-trunk.state-one-sided .topology-graph-link-bundle-trunk-line, .topology-graph-link-bundle-trunk.state-missing .topology-graph-link-bundle-trunk-line { stroke: var(--warning); stroke-dasharray: 10 7; }
.topology-graph-link-bundle-trunk.state-unexpected .topology-graph-link-bundle-trunk-line { stroke: var(--danger); stroke-dasharray: 14 5 3 5; }
.topology-graph-link-bundle-trunk.is-selected .topology-graph-link-bundle-trunk-line { stroke-width: 6; filter: drop-shadow(0 0 7px rgba(94,232,196,.6)); }
.topology-graph-link-bundle-trunk.is-member-active, .topology-graph-link-bundle-trunk.is-member-selected { opacity: 0; }
.topology-graph-label-layer { pointer-events: none; }
.topology-graph-label-leader { fill: none; stroke: rgba(133,180,196,.72); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; transition: opacity .12s ease; }
.topology-graph-label-leader.is-contextual:not(.is-selected):not(.is-revealed) { opacity: 0; }
.topology-graph-link-label { pointer-events: none; opacity: 1; transition: opacity .12s ease; }
.topology-graph-link-label.is-contextual:not(.is-selected):not(.is-revealed) { opacity: 0; }
.topology-graph-link-label rect { fill: rgba(7,19,29,.97); stroke: #38586a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.topology-graph-link-label.ports-unresolved rect { stroke: rgba(244,189,87,.65); }
.topology-graph-link-ports { fill: #e7f3f8; font: 13px var(--mono); font-weight: 850; }
.topology-graph-link-state { fill: #91adbd; font-size: 9px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.topology-graph-link-label.state-missing .topology-graph-link-state, .topology-graph-link-label.state-one-sided .topology-graph-link-state { fill: #ffd481; }
.topology-graph-link-label.state-unexpected .topology-graph-link-state { fill: #ff9da1; }
.topology-graph-link-label.state-external .topology-graph-link-state { fill: #9dccff; }
.topology-graph-link-bundle-label { opacity: 1; pointer-events: all; cursor: pointer; transition: opacity .12s ease; }
.topology-graph-link-bundle-label.is-member-active, .topology-graph-link-bundle-label.is-member-selected { opacity: 0; pointer-events: none; }
.topology-graph-link-bundle-label rect { fill: rgba(10,29,40,.97); stroke: rgba(94,232,196,.72); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.topology-graph-link-bundle-label text { fill: #c9f8ec; font-size: 10px; font-weight: 900; letter-spacing: .45px; text-transform: uppercase; }
.topology-graph-svg[data-dense-mode="true"] .topology-graph-link-bundle-label text { font-size: 12px; }
.topology-graph-link-bundle-label:hover rect, .topology-graph-link-bundle-label:focus-visible rect, .topology-graph-link-bundle-label.is-selected rect { fill: rgba(18,58,64,.99); stroke: var(--accent-strong); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(94,232,196,.45)); }
.topology-device-grid, .topology-track-modern, .topology-connection-lane, .drift-lane { grid-column: 1; }
.topology-inspector { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-width: 0; max-height: clamp(540px,64vh,760px); display: grid; align-content: start; gap: 16px; min-height: 220px; overflow: auto; padding: 16px; border: 1px solid rgba(61,209,177,.2); border-radius: 12px; background: linear-gradient(155deg, rgba(22,43,52,.92), rgba(12,27,38,.94)); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.topology-inspector > div { display: grid; gap: 4px; }
.topology-inspector > div > strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.topology-inspector > div > small { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.topology-inspector dl { display: grid; gap: 0; margin: 0; }
.topology-inspector dl > div { display: grid; grid-template-columns: minmax(78px,auto) minmax(0,1fr); align-items: start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.topology-inspector dt { color: var(--muted); font-size: 10px; }
.topology-inspector dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 11px; font-weight: 800; text-align: right; }
.topology-inspector .button { justify-self: start; margin-top: auto; }
.topology-inspector-endpoints { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 8px !important; }
.topology-inspector-endpoints > div { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 9px; border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(7,18,27,.42); }
.topology-inspector-endpoints > div > span, .topology-inspector-connections > span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.topology-inspector-endpoints strong { min-width: 0; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; font-size: 10px; }
.topology-inspector-endpoints code { width: auto; max-width: none; overflow: visible; overflow-wrap: anywhere; white-space: normal; padding: 2px 5px; border-radius: 5px; color: #c6f1e7; background: rgba(61,209,177,.09); font-size: 9px; text-overflow: clip; }
.topology-inspector-endpoints small { min-width: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; color: var(--muted); font-size: 8px; }
.topology-inspector-connections { display: grid !important; gap: 6px !important; }
.topology-inspector-connections button { appearance: none; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 3px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 8px; color: var(--text); background: rgba(9,21,31,.58); text-align: left; cursor: pointer; }
.topology-inspector-connections button:hover, .topology-inspector-connections button:focus-visible { border-color: rgba(61,209,177,.5); background: rgba(61,209,177,.07); }
.topology-inspector-connections button span { min-width: 0; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; font-size: 9px; font-weight: 900; }
.topology-inspector-connections button strong { min-width: 0; overflow-wrap: anywhere; white-space: normal; font: 8px var(--mono); }
.topology-inspector-connections button small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.topology-inspector-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.topology-inspector-actions { display: flex !important; flex-wrap: wrap; gap: 7px !important; }
.topology-device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px,1fr)); gap: 10px; padding: 0; border: 0; }
.topology-device-node { appearance: none; min-width: 0; display: grid; gap: 9px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text); background: rgba(13,27,38,.78); box-shadow: 0 8px 22px rgba(0,0,0,.13); text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.topology-device-node:hover { transform: translateY(-2px); border-color: rgba(61,209,177,.36); }
.topology-device-node:focus-visible, .topology-device-node.is-selected { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(61,209,177,.12), 0 12px 28px rgba(0,0,0,.2); }
.topology-device-node.node-warning { border-left: 3px solid var(--warning); }
.topology-device-node.node-critical { border-left: 3px solid var(--danger); }
.topology-device-identity { display: grid; gap: 2px; min-width: 0; }
.topology-device-identity strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.topology-device-identity small { color: var(--muted); font: 10px var(--mono); }
.topology-device-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; }
.topology-track-modern { min-width: max-content; align-self: start; padding: 3px; overflow: visible; }
.topology-track-modern .topology-device-node { width: 205px; flex: 0 0 205px; }
.topology-track-modern .topology-edge { width: 96px; flex-basis: 96px; }
.topology-track-modern .topology-node { width: 92px; flex-basis: 92px; }
.topology-connection-lane { display: grid; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.topology-connection { display: grid; grid-template-columns: minmax(140px,1fr) minmax(110px,.7fr) minmax(140px,1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(10,22,32,.48); }
.topology-connection > span:first-child, .topology-connection > span:last-child { min-width: 0; display: flex; align-items: center; gap: 7px; }
.topology-connection > span:last-child { justify-content: flex-end; }
.topology-connection strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.topology-connection code { padding: 2px 4px; color: #bce9de; background: rgba(61,209,177,.07); border-radius: 4px; font-size: 9px; }
.topology-connection > span > small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.topology-connection-path { display: grid; place-items: center; gap: 4px; color: var(--success); }
.topology-connection-path i { width: 100%; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 9px currentColor; opacity: .76; }
.topology-connection-path small { color: var(--muted); font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .3px; }
.topology-connection.state-missing .topology-connection-path, .topology-connection.state-one-sided .topology-connection-path { color: var(--warning); }
.topology-connection.state-unexpected .topology-connection-path { color: var(--danger); }
.topology-empty-lane { padding: 22px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; }

.olt-chassis { overflow: hidden; display: grid; border: 1px solid rgba(136,160,178,.35); border-radius: 10px; background: linear-gradient(145deg, #253441, #111e29 62%, #0d1720); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.25); }
.olt-chassis.chassis-e9 { border-color: rgba(88,168,255,.36); }
.olt-chassis.chassis-e7 { border-color: rgba(61,209,177,.34); }
.chassis-hardware-reference { min-width: 0; display: grid; gap: 5px; margin: 0; padding: 10px 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 50% 45%,rgba(132,105,161,.13),transparent 67%),rgba(4,11,17,.5); }
.chassis-hardware-reference[hidden] { display: none; }
.chassis-hardware-reference img { display: block; width: 100%; height: clamp(108px,15vw,190px); object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.28)); }
.chassis-hardware-reference figcaption { color: var(--muted); font-size: 9px; line-height: 1.35; text-align: center; }
.chassis-bezel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(255,255,255,.04), transparent); }
.chassis-bezel > span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.chassis-bezel > strong { grid-row: 1 / 3; grid-column: 2; color: #dce9f2; font-size: 12px; }
.chassis-bezel > small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.chassis-bays { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px,1fr)); gap: 4px; min-height: 92px; padding: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 18px); }
.chassis-e9 .chassis-bays { min-height: 128px; grid-template-columns: repeat(auto-fit, minmax(62px,1fr)); }
.chassis-card { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 8px; min-height: 74px; padding: 7px 6px; border: 1px solid rgba(135,165,184,.32); border-radius: 4px; background: linear-gradient(180deg, rgba(40,62,74,.98), rgba(20,37,48,.98)); }
.chassis-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #8299aa; }
.chassis-card.card-role-pon::before { background: var(--accent); }
.chassis-card.card-role-uplink::before { background: #58a8ff; }
.chassis-card.card-role-control::before { background: #c69cff; }
.chassis-card > span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .45px; }
.chassis-card > strong { overflow-wrap: anywhere; color: #e1edf4; font-size: 9px; line-height: 1.25; }
.chassis-card > i { width: 5px; height: 5px; justify-self: end; border-radius: 50%; background: var(--success); box-shadow: 0 0 7px var(--success); }
.chassis-inventory-pending { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; min-height: 82px; border: 1px dashed rgba(143,162,176,.24); border-radius: 6px; color: var(--muted); text-align: center; }
.chassis-inventory-pending span { font-size: 10px; font-weight: 800; }
.chassis-inventory-pending small { margin-top: 3px; font-size: 8px; }
.chassis-footer { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; border-top: 1px solid rgba(255,255,255,.06); color: var(--muted-2); background: rgba(5,13,19,.32); font-size: 8px; text-transform: uppercase; letter-spacing: .3px; }
.chassis-compact .chassis-bezel { padding: 5px 7px; }
.chassis-compact .chassis-hardware-reference { padding: 5px; }
.chassis-compact .chassis-hardware-reference img { height: 64px; }
.chassis-compact .chassis-hardware-reference figcaption { font-size: 7px; }
.chassis-compact .chassis-bezel > strong { font-size: 9px; }
.chassis-compact .chassis-bays { grid-template-columns: repeat(auto-fit, minmax(35px,1fr)); min-height: 54px; padding: 5px; }
.chassis-compact .chassis-card { min-height: 42px; padding: 4px; gap: 3px; }
.chassis-compact .chassis-card > strong { max-height: 20px; overflow: hidden; font-size: 7px; }
.chassis-compact .chassis-card > span { font-size: 7px; }
.chassis-compact .chassis-inventory-pending { min-height: 46px; }
.chassis-compact .chassis-footer { padding: 4px 6px; font-size: 7px; }
.topology-hardware-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px,1fr)); gap: 14px; }
.topology-hardware-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 13px; background: rgba(11,24,34,.62); }
.topology-hardware-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.topology-hardware-card > header > div { display: grid; gap: 3px; }
.topology-hardware-card > header span { color: var(--accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.topology-hardware-card > header strong { font-size: 13px; }
.topology-hardware-card > footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.topology-hardware-card > footer > span { display: grid; gap: 3px; padding: 8px; border-radius: 8px; background: rgba(23,40,56,.52); }
.topology-hardware-card > footer small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.topology-hardware-card > footer strong { font-size: 10px; text-transform: capitalize; }
.lldp-link-context { min-width: 0; display: grid; gap: 2px; margin-left: auto; text-align: right; }
.lldp-link-connector > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.endpoint-port-identity { min-width: 0; display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; gap: 1px 5px; }
.endpoint-port-identity code { grid-row: 1 / span 3; align-self: start; }
.endpoint-port-identity small, .lldp-link-endpoint .endpoint-port-identity small { min-width: 0; margin-left: 0; overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; line-height: 1.25; }
.endpoint-port-identity .port-evidence-label { color: #c0d3de; font-weight: 800; text-transform: uppercase; letter-spacing: .25px; }
.endpoint-port-identity .port-card-context { color: #9dc8e8; }
.endpoint-port-identity .port-slot-unresolved { color: var(--warning); }
.topology-inspector .endpoint-port-identity { grid-template-columns: minmax(0,1fr); }
.topology-inspector .endpoint-port-identity code { grid-row: auto; width: auto; max-width: none; overflow: visible; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.topology-inspector .endpoint-port-identity small { min-width: 0; margin-left: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.topology-connection .endpoint-port-identity { flex: 0 1 auto; }
.topology-connection .endpoint-port-identity small { color: var(--muted-2); font-size: 7px; text-transform: none; }
.lldp-port-cell { display: inline-grid; gap: 2px; }
.lldp-port-cell small { color: var(--muted-2); font-size: 9px; }

@media (max-width: 900px) {
  .topology-workspace-header { align-items: start; flex-direction: column; }
  .topology-summary { justify-content: flex-start; }
  .topology-map-layout { min-width: 0; grid-template-columns: 1fr; }
  .topology-graph-shell { --topology-graph-frame-height: 560px; }
  .topology-inspector { grid-column: 1; grid-row: auto; min-height: 0; max-height: none; overflow: visible; }
  .topology-device-grid { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
  .topology-hardware-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topology-workspace-header, .topology-view-panel { padding: 14px; }
  .topology-summary > span { min-width: 72px; }
  .topology-graph-shell { --topology-graph-frame-height: 470px; }
  .topology-graph-toolbar { margin-right: 8px; }
  .topology-graph-guidance { font-size: 8px; }
  .topology-graph-fallback { position: relative; z-index: 2; display: block; margin: -2px 10px 44px; border: 1px solid var(--border); border-radius: 9px; background: rgba(8,20,29,.92); }
  .topology-graph-fallback summary { padding: 10px; color: var(--muted); font-size: 10px; font-weight: 900; cursor: pointer; }
  .topology-graph-fallback > div { display: grid; gap: 12px; max-height: 330px; padding: 0 9px 9px; overflow: auto; }
  .topology-graph-fallback section { display: grid; gap: 5px; }
  .topology-graph-fallback section > strong { color: var(--muted-2); font-size: 8px; letter-spacing: .5px; text-transform: uppercase; }
  .topology-graph-fallback-item { appearance: none; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 7px; color: var(--text); background: var(--surface-2); text-align: left; }
  .topology-graph-fallback-item span { font-size: 10px; font-weight: 900; }
  .topology-graph-fallback-item small { color: var(--muted); font-size: 8px; }
  .topology-graph-fallback-item.is-selected, .topology-graph-fallback-item:focus-visible { border-color: var(--accent); background: rgba(61,209,177,.09); }
  .topology-inspector-endpoints { grid-template-columns: 1fr; }
  .topology-device-grid { grid-template-columns: 1fr; }
  .topology-connection { grid-template-columns: 1fr; }
  .topology-connection > span:last-child { justify-content: flex-start; }
  .topology-connection-path { grid-template-columns: 1fr auto; }
  .topology-hardware-card { min-width: 285px; }
  .topology-hardware-card > footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .topology-graph-node-body, .topology-graph-link-line, .topology-graph-link-label, .topology-graph-link-bundle-label { transition: none; }
}
.success-callout, .error-callout { padding: 12px; border-radius: 10px; color: #9ff0c5; background: rgba(80,216,144,.07); border: 1px solid rgba(80,216,144,.22); }
.error-callout { color: #ffadb0; background: rgba(255,110,114,.07); border-color: rgba(255,110,114,.25); }
.collection-queued { margin-bottom: 14px; }
.account-link { display: flex; align-items: center; gap: 8px; color: var(--text); }
.account-link > span:last-child { display: grid; font-size: 10px; font-weight: 800; }
.account-link small { color: var(--muted); text-transform: uppercase; font-size: 8px; }
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #122b37, #071119 62%); }
.auth-card { width: min(430px, 100%); display: grid; gap: 24px; padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.auth-brand { position: static; padding: 0; border: 0; }
.auth-card h1 { margin: 4px 0 8px; }
.auth-card p { color: var(--muted); line-height: 1.55; }
.auth-form, .stacked-form { display: grid; gap: 14px; }
.auth-form label, .stacked-form label, .admin-user-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
input { min-width: 0; height: 38px; padding: 0 10px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); outline: 0; }
textarea { width: 100%; min-width: 0; padding: 10px; resize: vertical; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); outline: 0; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: rgba(57,198,163,.65); box-shadow: 0 0 0 3px rgba(57,198,163,.08); }
.narrow-panel { max-width: 560px; }
.admin-user-form { display: grid; grid-template-columns: 1fr 1fr 180px 1fr auto; gap: 10px; align-items: end; }
.user-account-list { display: grid; gap: 9px; }
.user-account-row { display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(280px,auto); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.user-account-row p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.user-account-row form { display: flex; gap: 8px; align-items: center; }
.admin-feedback { margin-bottom: 18px; }
.account-state { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.role-pill.role-admin { color: #ffc4a1; border-color: rgba(255,151,92,.34); background: rgba(255,151,92,.08); }
.role-pill.role-engineer { color: #86efbb; border-color: rgba(80,216,144,.3); background: rgba(80,216,144,.08); }
.role-pill.role-noc { color: #79e5ee; border-color: rgba(71,204,216,.32); background: rgba(71,204,216,.08); }
.role-pill.role-technician { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.role-pill.role-viewer { color: #c0ced7; border-color: rgba(141,164,181,.3); background: rgba(141,164,181,.08); }
.role-matrix { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.role-matrix article { min-width: 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.58); }
.role-matrix article > div p { min-height: 48px; margin: 9px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.role-matrix ul { margin: 0; padding-left: 17px; color: #c9dce6; font-size: 9px; line-height: 1.55; }
.checkbox-label { display: flex !important; grid-auto-flow: column; align-items: center; gap: 5px !important; white-space: nowrap; }
.checkbox-label input { width: 15px; height: 15px; }

.detail-list { margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; text-align: right; font-weight: 800; }
.note-box { margin-top: 14px; padding: 12px; color: var(--muted); border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.55; }
.design-note { color: #c8e9e1; border-color: rgba(57,198,163,.22); background: rgba(57,198,163,.06); }
.finding-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.finding-card { padding: 15px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(17,31,44,.52); }
.finding-card.finding-failed { border-color: rgba(255,110,114,.2); }
.finding-card.finding-exception { border-color: rgba(244,189,87,.2); }
.finding-card-top { display: flex; justify-content: space-between; gap: 8px; }
.finding-card h3 { margin: 13px 0 4px; font-size: 14px; }
.finding-device { margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.expected-actual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.expected-actual div { min-width: 0; padding: 9px; border: 1px solid var(--border-soft); background: var(--surface); border-radius: 8px; }
.expected-actual small, .before-after small { display: block; margin-bottom: 5px; color: var(--muted-2); text-transform: uppercase; font-size: 8px; font-weight: 900; }
.expected-actual code { display: block; overflow: hidden; text-overflow: ellipsis; color: #c8e9e1; font-size: 10px; }
.exception-note, .correction-note { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.exception-note { color: #e8ca82; }
.timeline-list { display: grid; }
.timeline-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 5px; border-bottom: 1px solid var(--border-soft); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.timeline-dot.status-completed, .timeline-dot.status-passed { background: var(--success); }
.timeline-dot.status-warning { background: var(--warning); }
.timeline-dot.status-failed, .timeline-dot.status-critical { background: var(--danger); }

.filter-panel { padding: 14px 18px; }
.manual-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.manual-collection-form { display: flex; align-items: end; gap: 10px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.manual-collection-form label { flex: 1; display: grid; gap: 6px; color: var(--muted); text-transform: uppercase; font-size: 9px; font-weight: 900; letter-spacing: .5px; }
.button.compact { min-height: 30px; padding: 6px 9px; font-size: 9px; }
.status-pill-manual { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.status-pill-scheduled { color: #bdc9d2; border-color: rgba(143,162,176,.3); background: rgba(143,162,176,.08); }
.status-pill-available { color: #9ff0c5; border-color: rgba(80,216,144,.3); background: rgba(80,216,144,.08); }
.status-pill-awaiting-evidence { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
.status-pill-blocked { color: #ffadb0; border-color: rgba(255,110,114,.3); background: rgba(255,110,114,.08); }
.status-pill-in-use { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.muted { color: var(--muted); }
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filter-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
select { min-width: 155px; height: 38px; padding: 0 10px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); outline: 0; }
.result-count { margin-left: auto; align-self: center; color: var(--muted); }
.exception-text { color: #e8ca82; }

.maintenance-layout { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 18px; }
.maintenance-list-panel, .maintenance-detail-panel { margin-bottom: 0; }
.maintenance-list { display: grid; gap: 7px; }
.maintenance-list-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.4); }
.maintenance-list-item:hover, .maintenance-list-item.selected { border-color: rgba(57,198,163,.35); background: var(--surface-2); }
.maintenance-list-item p { margin: 4px 0 7px; color: var(--muted); font-size: 10px; }
.compact-empty { padding: 28px 12px; border: 1px dashed var(--border); border-radius: 11px; }
.compact-empty p { margin: 6px 0 0; }
.mini-checks { display: flex; gap: 7px; font-size: 8px; text-transform: uppercase; font-weight: 900; }
.mini-checks .passed { color: var(--success); }.mini-checks .warning { color: var(--warning); }.mini-checks .failed { color: var(--danger); }
.maintenance-summary { margin-bottom: 15px; padding: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; line-height: 1.55; }
.maintenance-create-form { max-width: 820px; }
.form-grid { display: grid; gap: 12px; }
.two-column-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.maintenance-session-heading h2 { margin: 5px 0; }
.maintenance-workflow { display: grid; grid-template-columns: auto minmax(28px,1fr) auto minmax(28px,1fr) auto; align-items: center; gap: 10px; margin: 0 0 15px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.42); }
.workflow-step { display: flex; align-items: center; gap: 9px; min-width: 0; opacity: .52; }
.workflow-step > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font-size: 10px; font-weight: 900; }
.workflow-step div { display: grid; gap: 2px; }
.workflow-step strong { font-size: 10px; }
.workflow-step small { color: var(--muted); font-size: 8px; }
.workflow-step.active, .workflow-step.complete { opacity: 1; }
.workflow-step.active > span { color: #041411; border-color: transparent; background: var(--accent); }
.workflow-step.complete > span { color: #06150f; border-color: transparent; background: var(--success); }
.workflow-connector { height: 2px; background: var(--border); }
.maintenance-action-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 15px; padding: 14px; color: var(--muted); border: 1px solid rgba(57,198,163,.25); border-radius: 11px; background: rgba(57,198,163,.055); }
.maintenance-action-card strong { color: var(--text); }
.maintenance-action-card p { max-width: 760px; margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
.maintenance-action-buttons { display: flex; flex: 0 0 auto; gap: 8px; }
.maintenance-result { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 13px; color: var(--muted); border: 1px solid rgba(80,216,144,.25); border-radius: 11px; background: rgba(80,216,144,.055); }
.maintenance-result > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--success); border-radius: 9px; background: rgba(80,216,144,.1); font-weight: 900; }
.maintenance-result strong { color: var(--text); }
.maintenance-result p { margin: 3px 0 0; font-size: 10px; }
.maintenance-result.status-failed { border-color: rgba(255,110,114,.25); background: rgba(255,110,114,.055); }
.maintenance-result.status-failed > span { color: var(--danger); background: rgba(255,110,114,.1); }
.comparison-list { display: grid; gap: 9px; }
.comparison-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.4); }
.comparison-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #9ff0c5; background: rgba(80,216,144,.08); font-weight: 900; }
.comparison-warning .comparison-icon { color: #f8d785; background: rgba(244,189,87,.08); }
.comparison-failed .comparison-icon { color: #ff9b9e; background: rgba(255,110,114,.08); }
.comparison-pending .comparison-icon { color: #9ccaff; background: rgba(88,168,255,.08); }
.comparison-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comparison-main p { margin: 4px 0 10px; color: var(--muted); font-size: 10px; }
.expected-change-form { margin-top: 10px; }
.status-pill-in-progress, .status-pill-pending { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.timeline-dot.status-planned, .timeline-dot.status-in-progress { background: var(--blue); }
.operations-overall { display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 8px 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-transform: uppercase; font-size: 10px; font-weight: 900; letter-spacing: .6px; }
.operations-overall.status-healthy { color: #9ff0c5; border-color: rgba(80,216,144,.28); }
.operations-overall.status-enabled { color: #b8d8ff; border-color: rgba(88,168,255,.28); }
.operations-overall.status-warning { color: #f8d785; border-color: rgba(244,189,87,.28); }
.operations-overall.status-critical { color: #ffadb0; border-color: rgba(255,110,114,.28); }
.operations-alerts { display: grid; gap: 9px; }
.operations-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.42); }
.operations-alert.severity-warning { border-color: rgba(244,189,87,.25); }
.operations-alert.severity-critical { border-color: rgba(255,110,114,.28); }
.alert-marker { width: 28px; height: 28px; display: grid; place-items: center; color: var(--warning); border-radius: 9px; background: rgba(244,189,87,.09); font-weight: 900; }
.severity-critical .alert-marker { color: var(--danger); background: rgba(255,110,114,.09); }
.operations-alert p { margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.operations-alert small { color: #b9d8d0; font-size: 9px; }
.operations-clear { min-height: 160px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); text-align: left; }
.operations-clear > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--success); border: 1px solid rgba(80,216,144,.28); border-radius: 13px; background: rgba(80,216,144,.07); font-size: 20px; }
.operations-clear p { margin: 4px 0 0; font-size: 10px; }
.service-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.service-health-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); }
.service-health-card.status-critical { border-color: rgba(255,110,114,.28); }
.service-health-card div { min-width: 0; display: grid; gap: 3px; }
.service-health-card strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.service-health-card small { color: var(--muted); text-transform: uppercase; font-size: 8px; }
.history-row { color: inherit; }
.history-row:hover { border-color: rgba(57,198,163,.35); background: var(--surface-2); }
.history-layout .maintenance-list-panel { max-height: calc(100vh - 170px); overflow-y: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.compact-stats { margin-bottom: 16px; }
.stat-card { min-width: 0; padding: 13px 14px; background: rgba(13, 24, 35, .91); border: 1px solid var(--border); border-radius: 11px; }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card span { margin-bottom: 5px; font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.stat-card strong { display: block; margin-bottom: 3px; font-size: 23px; line-height: 1; }
.stat-card small { overflow: hidden; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; }
.status-pill-stale { background: rgba(148, 163, 184, .16); color: var(--muted); }
.status-pill-unavailable, .status-pill-needs-verification { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }

.activity-filter-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.activity-filter-form label { display: grid; gap: 6px; }
.activity-filter-form label > span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.activity-filter-form .button { min-height: 42px; }
.activity-summary-grid, .user-rollout-grid { margin-bottom: 18px; }
.launch-readiness-panel .boundary-list span:last-child { border-color: rgba(88,168,255,.25); color: #b8d8ff; }

@media (max-width: 760px) {
  .activity-filter-form { grid-template-columns: 1fr; }
  .activity-filter-form button, .activity-filter-form .button { width: 100%; }
}

.operation-readiness-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.operation-catalog-table td:first-child {
  min-width: 18rem;
}

.operation-catalog-table td:first-child strong,
.operation-catalog-table td:first-child small,
.operation-catalog-table td:nth-child(3) code,
.operation-catalog-table td:nth-child(3) small {
  display: block;
}

.operation-catalog-table td:first-child small,
.operation-catalog-table td:nth-child(3) small {
  margin-top: .28rem;
}

.operation-catalog-table td:nth-child(4) {
  min-width: 14rem;
}

.operation-catalog-table code {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
}

.rollback-callout {
  background: rgba(82, 214, 181, .06);
  border: 1px solid rgba(82, 214, 181, .22);
  border-radius: .75rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
}

.rollback-callout p {
  margin: .25rem 0 0;
}

.governed-request-form {
  align-items: end;
  border-top: 1px solid var(--border);
  display: grid;
  gap: .8rem;
  grid-template-columns: 1.1fr 1fr 1.4fr auto;
  margin-top: 1rem;
  padding-top: 1rem;
}

.governed-request-form h4,
.governed-request-form p {
  margin: 0;
}

.governed-request-form p {
  color: var(--muted);
  font-size: .78rem;
  margin-top: .25rem;
}

.governed-request-form textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.change-request-facts {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0;
}

.change-request-facts > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: .7rem;
  display: grid;
  gap: .25rem;
  padding: .75rem;
}

.change-request-facts span {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
}

.approval-actions {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}

.request-event-list {
  border-top: 1px solid var(--border);
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

.request-event-list > div {
  display: grid;
  gap: .2rem;
  grid-template-columns: 11rem 12rem 1fr;
}

.request-event-list time,
.request-event-list span,
.request-event-list p {
  color: var(--muted);
  font-size: .76rem;
  margin: 0;
}

.request-event-list p {
  grid-column: 2 / -1;
}

@media (max-width: 1100px) {
  .operation-readiness-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .governed-request-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .operation-readiness-grid,
  .change-request-facts,
  .governed-request-form {
    grid-template-columns: 1fr;
  }

  .request-event-list > div {
    grid-template-columns: 1fr;
  }

  .request-event-list p {
    grid-column: auto;
  }
}
.live-sync-state { min-width: 84px; padding: 5px 9px; color: #9ff0c5; border: 1px solid rgba(80,216,144,.24); border-radius: 999px; background: rgba(80,216,144,.065); text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .35px; text-transform: uppercase; }
.live-sync-state.is-updating { color: #9ccaff; border-color: rgba(88,168,255,.3); background: rgba(88,168,255,.08); }
.live-sync-state.is-delayed { color: #f8d785; border-color: rgba(244,189,87,.3); background: rgba(244,189,87,.08); }
[data-live-region] { transition: opacity .14s ease, border-color .14s ease; }
[data-live-region].live-region-updated { animation: live-region-pulse .38s ease-out; }
@keyframes live-region-pulse { from { opacity: .76; } to { opacity: 1; } }
.evidence-clock-panel { padding: 16px 18px; }
.evidence-clock-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.evidence-clock { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.52); }
.evidence-clock.status-healthy { border-color: rgba(80,216,144,.22); }
.evidence-clock.status-warning { border-color: rgba(244,189,87,.28); }
.evidence-clock.status-critical { border-color: rgba(255,110,114,.3); }
.evidence-clock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evidence-clock strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.evidence-clock p { min-height: 30px; margin: 7px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.evidence-clock-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.evidence-clock-meta b { color: var(--text); font-size: 9px; }
.button[aria-busy="true"] { cursor: progress; }
.live-refresh-form { margin-top: 1rem; align-items: center; gap: .75rem; }
.refresh-state.is-refreshing { border-color: rgba(244,189,87,.35); }
.pon-action-state.status-dry-run-ok { border-color: rgba(80,216,144,.35); }
.pon-action-state.status-blocked, .pon-action-state.status-failed { border-color: rgba(255,110,114,.35); }
.pon-action-facts, .pon-action-target { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 14px 0 0; }
.pon-action-facts div, .pon-action-target div { min-width: 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); }
.pon-action-facts dt, .pon-action-target dt { margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .45px; text-transform: uppercase; }
.pon-action-facts dd, .pon-action-target dd { margin: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 800; }
.planned-command-block { margin-top: 12px; }
.planned-command-block > strong { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; letter-spacing: .4px; text-transform: uppercase; }
.planned-command-block pre { margin: 0; padding: 12px; overflow-x: auto; color: #c6e5dd; border: 1px solid var(--border-soft); border-radius: 9px; background: #07121a; font-size: 10px; line-height: 1.55; }
.pon-action-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; color: var(--text); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 28px 90px rgba(0,0,0,.62); }
.pon-action-dialog::backdrop { background: rgba(2,8,13,.76); backdrop-filter: blur(3px); }
.pon-action-dialog form { padding: 22px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.dialog-heading h2 { margin: 3px 0 0; }
.dialog-close { width: 32px; height: 32px; padding: 0; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; font-size: 20px; }
.pon-action-target { grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; }
.dialog-help { margin-top: -7px; color: var(--muted); line-height: 1.45; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.diff-view { min-height: 420px; max-height: 70vh; margin: 0; padding: 16px; overflow: auto; color: #c6e5dd; background: #07121a; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 10px; line-height: 1.55; white-space: pre; }
.warning-callout { margin-bottom: 12px; padding: 11px 13px; color: #f8d785; background: rgba(244,189,87,.07); border: 1px solid rgba(244,189,87,.24); border-radius: 10px; }
.info-callout { margin-bottom: 12px; padding: 11px 13px; color: var(--accent-strong); background: rgba(57,198,163,.06); border: 1px solid rgba(57,198,163,.22); border-radius: 10px; }

/* SMx sanitized northbound context */
.source-authority-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.source-authority-grid article { min-height: 176px; padding: 17px; border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.82),rgba(9,20,29,.72)); }
.source-authority-grid h3 { margin: 9px 0 7px; font-size: 15px; }
.source-authority-grid p { min-height: 62px; margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.source-kicker { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.source-kicker.live { color: var(--accent-strong); border: 1px solid rgba(57,198,163,.25); background: rgba(57,198,163,.07); }
.source-kicker.context { color: #a7d0ff; border: 1px solid rgba(88,168,255,.25); background: rgba(88,168,255,.07); }
.source-kicker.evidence { color: #f8d785; border: 1px solid rgba(244,189,87,.25); background: rgba(244,189,87,.07); }
.capability-list { display: grid; gap: 8px; }
.capability-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.48); }
.smx-lookup-panel { scroll-margin-top: 84px; }
.smx-lookup-form { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(250px,1.15fr) minmax(230px,1fr) auto; gap: 12px; align-items: end; }
.smx-lookup-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.smx-lookup-form label small { color: var(--muted-2); font-size: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.smx-lookup-form input, .smx-lookup-form select { width: 100%; }
.smx-lookup-boundary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.smx-lookup-boundary span { padding: 5px 8px; color: #9bc9be; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(57,198,163,.045); font-size: 8px; font-weight: 800; letter-spacing: .2px; }
.smx-lookup-error { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(244,189,87,.36); border-radius: 12px; background: rgba(244,189,87,.08); color: var(--text); }
.smx-lookup-error strong { color: var(--warning); }
.smx-lookup-result { display: grid; gap: 13px; margin-top: 17px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.78),rgba(8,19,27,.82)); }
.smx-lookup-result.status-ok { border-color: rgba(80,216,144,.3); }
.smx-lookup-result.status-failed { border-color: rgba(255,102,120,.35); }
.smx-lookup-result-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.smx-lookup-result-heading h3 { margin: 3px 0 2px; }
.smx-lookup-result-heading p { margin: 0; color: var(--muted); }
.smx-lookup-records { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 10px; }
.smx-lookup-records > article { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(7,18,26,.58); }
.smx-lookup-records > article > div { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(0,1fr); gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--border-soft); }
.smx-lookup-records > article > div:last-child { border-bottom: 0; }
.smx-lookup-records span { color: var(--muted); font-size: 9px; }
.smx-lookup-records strong { overflow-wrap: anywhere; font-size: 10px; }
.smx-lookup-result-foot { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--muted-2); font-size: 8px; }
.capability-row strong { font-size: 11px; }
.capability-row p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.smx-boundary-facts { margin-bottom: 13px; }
.smx-inventory-table { max-height: 660px; }
.smx-inventory-table thead { position: sticky; top: 0; z-index: 1; }
.smx-severity-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-bottom: 13px; }
.smx-severity-grid article { padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.52); }
.smx-severity-grid span { display: block; margin-bottom: 6px; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .55px; text-transform: uppercase; }
.smx-severity-grid strong { font-size: 18px; }
.profile-stack { display: grid; gap: 7px; }
.profile-stack > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.48); }
.profile-stack span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.profile-stack strong { font-size: 10px; }
.subsection-title { margin: 14px 0 8px; color: var(--muted-2); font-size: 9px; letter-spacing: .55px; text-transform: uppercase; }
.subsection-title:first-of-type { margin-top: 0; }
.device-context-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.device-context-grid .detail-list { margin: 0; }
.device-smx-context { border-color: rgba(88,168,255,.22); }
.region-chip-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.region-chip-grid > span { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 9px 11px; color: var(--text); border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.52); font-size: 10px; font-weight: 800; }
.region-chip-grid small { margin-top: 3px; color: var(--muted-2); font-size: 8px; font-weight: 600; }
.excluded-device-list { display: grid; gap: 8px; }
.excluded-device-list article { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3px 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.48); }
.excluded-device-list strong, .excluded-device-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.excluded-device-list span { color: var(--muted); }
.excluded-device-list small { grid-column: 1 / -1; color: var(--muted-2); font-size: 8px; }
.inline-form { display: flex; }
.error-list { display: grid; gap: 9px; }
.before-after { display: flex; align-items: center; gap: 12px; }
.before-after span:not(.change-arrow) { min-width: 130px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface); }
.before-after code { color: #c8e9e1; font-size: 10px; }
.change-arrow { color: var(--muted-2); }

.search-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.search-hero > span { color: var(--accent-strong); font-size: 22px; }
.search-hero input { flex: 1; min-width: 0; height: 42px; color: var(--text); border: 0; background: transparent; outline: 0; font-size: 16px; }
.search-summary { margin: 0 0 14px; color: var(--muted); }
.search-section { margin-bottom: 14px; }
.result-cards { display: grid; gap: 8px; }
.result-card { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; }
.result-card:hover { border-color: var(--border); background: var(--surface-2); }
.result-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.result-icon { width: 34px; height: 28px; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.25); background: rgba(57,198,163,.07); border-radius: 8px; font-size: 9px; font-weight: 900; }
.config-results { display: grid; gap: 10px; }
.config-result { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.config-result-head { display: flex; justify-content: space-between; padding: 9px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.config-result-head span { color: var(--muted); font-size: 10px; }
.config-result pre { margin: 0; padding: 12px; overflow-x: auto; white-space: pre-wrap; color: #b9d8d0; background: #08131c; font-size: 10px; line-height: 1.55; }
.query-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 17px; }
.query-chips a { padding: 6px 9px; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.25); border-radius: 999px; background: rgba(57,198,163,.06); font-size: 10px; }

.guide-current-role { grid-template-columns: minmax(220px,.8fr) minmax(360px,1.4fr); }
.guide-source-grid article { min-height: 190px; }
.operator-playbooks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.operator-playbooks article { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(17,31,44,.54); }
.operator-playbooks b { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.3); border-radius: 9px; background: rgba(57,198,163,.07); }
.operator-playbooks h3 { margin: 1px 0 5px; font-size: 13px; }
.operator-playbooks p { margin: 0 0 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.operator-playbooks a { color: var(--accent-strong); font-size: 10px; font-weight: 800; }
.response-steps { display: grid; gap: 12px; margin: 0; padding-left: 22px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.response-steps strong { color: var(--text); }
.boundary-list { display: grid; gap: 9px; }
.boundary-list span { padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); font-size: 10px; font-weight: 800; }
.boundary-list .allowed { color: #86efbb; }
.boundary-list .blocked { color: #c7d2d9; }
.error-workspace { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; }
.error-workspace .error-code { color: var(--muted-2); font-size: 54px; font-weight: 900; letter-spacing: -3px; }
.error-workspace h1 { margin: 4px 0 9px; font-size: 30px; }
.error-workspace > p:not(.eyebrow) { max-width: 620px; margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.error-workspace > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }

/* SMx assurance evolution and controlled engineering changes */
.workspace-jumpbar { position: sticky; top: 64px; z-index: 8; display: flex; gap: 6px; margin: 0 0 14px; padding: 8px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: rgba(10,22,31,.94); backdrop-filter: blur(10px); }
.workspace-jumpbar a { flex: 0 0 auto; padding: 7px 10px; color: var(--muted); border-radius: 8px; font-size: 9px; font-weight: 850; }
.workspace-jumpbar a:hover { color: var(--text); background: var(--surface-3); }
#smx-overview,
#smx-trends,
#smx-correlation,
#exact-lookup,
#smx-inventory,
#smx-diagnostics { scroll-margin-top: 132px; }
.smx-trend-layout { display: grid; grid-template-columns: minmax(360px,1.5fr) minmax(300px,1fr); gap: 18px; align-items: stretch; }
.smx-trend-bars { height: 178px; display: flex; align-items: end; gap: 3px; padding: 12px 8px 0; border-bottom: 1px solid var(--border); background: linear-gradient(to top,rgba(57,198,163,.03),transparent); }
.smx-trend-bars span { flex: 1; min-width: 3px; height: max(3px,var(--height)); border-radius: 3px 3px 0 0; background: linear-gradient(to top,#238f79,var(--accent)); opacity: .82; }
.smx-trend-bars span:hover { opacity: 1; }
.smx-delta-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.smx-delta-grid article { display: grid; align-content: center; min-height: 78px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.5); }
.smx-delta-grid span, .smx-delta-grid small { color: var(--muted-2); font-size: 8px; }
.smx-delta-grid strong { margin: 3px 0; font-size: 17px; }
.delta-up { color: var(--warning); }
.delta-down { color: var(--success); }
.comparison-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.comparison-summary span { padding: 8px 10px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); font-size: 9px; }
.comparison-summary b { color: var(--text); font-size: 11px; }
.bounded-correlation-table { max-height: 440px; }
.smx-lookup-records article footer { padding: 9px 11px; border-top: 1px solid var(--border-soft); }
.change-authority-banner { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.change-authority-banner > div { padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.74),rgba(8,19,27,.72)); }
.change-authority-banner strong { display: block; margin: 8px 0 5px; font-size: 14px; }
.change-authority-banner p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.change-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.change-catalog-card { display: flex; flex-direction: column; min-height: 260px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(17,31,44,.5); }
.change-catalog-card.state-live { border-color: rgba(80,216,144,.28); }
.change-card-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.change-catalog-card h3 { margin: 12px 0 7px; font-size: 13px; }
.change-catalog-card > p { min-height: 51px; margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.change-catalog-card dl { display: grid; gap: 6px; margin: 0 0 13px; }
.change-catalog-card dl div { display: flex; justify-content: space-between; gap: 9px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.change-catalog-card dt { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.change-catalog-card dd { margin: 0; text-align: right; font-size: 8px; }
.change-catalog-card > a { margin-top: auto; }

/* Central syslog posture and controlled remediation */
.syslog-posture-card { display: grid; grid-template-columns: minmax(260px,1fr) minmax(230px,auto) auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.78),rgba(10,22,31,.8)); box-shadow: var(--shadow); }
.syslog-posture-card h2 { margin: 2px 0 4px; font-size: 16px; }
.syslog-posture-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; }
.approved-command { display: block; max-width: 100%; padding: 9px 11px; overflow-wrap: anywhere; color: var(--accent-strong); border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(6,14,20,.64); font-size: 11px; white-space: normal; }
.fleet-attention-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -4px 0 18px; padding: 12px 15px; border: 1px solid rgba(244,189,87,.25); border-radius: 12px; background: rgba(244,189,87,.055); }
.fleet-attention-banner > div { display: flex; align-items: center; gap: 11px; }
.fleet-attention-banner strong { display: block; font-size: 11px; }
.fleet-attention-banner p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.policy-command-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 15px 17px; border: 1px solid rgba(57,198,163,.25); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.8),rgba(8,19,27,.82)); }
.policy-command-panel > div { min-width: 0; }
.policy-command-panel code { display: block; margin-top: 7px; overflow-wrap: anywhere; color: var(--accent-strong); font-size: 17px; font-weight: 850; white-space: normal; }
.syslog-filter-form { grid-template-columns: minmax(180px,.65fr) minmax(270px,1.5fr) auto auto minmax(100px,auto); }
.bounded-syslog-table { max-height: min(56vh,620px); overflow: auto; }
.bounded-syslog-table table { min-width: 900px; }
.bounded-syslog-table thead { position: sticky; top: 0; z-index: 2; }
.bounded-syslog-table th { box-shadow: 0 1px 0 var(--border); }
.table-code { overflow-wrap: anywhere; white-space: normal; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pagination > span { color: var(--muted); font-size: 10px; }
.pagination > div { display: flex; gap: 8px; }
.compact-evidence-panel { padding-bottom: 16px; }
.validation-path { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.validation-path span { min-height: 48px; display: flex; align-items: center; padding: 9px 10px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(8,18,26,.46); font-size: 9px; font-weight: 800; line-height: 1.35; }
.validation-path span.complete { color: #bcebdd; border-color: rgba(57,198,163,.22); background: rgba(57,198,163,.055); }

.report-catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.report-catalog-card { display: flex; flex-direction: column; min-height: 330px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(150deg,rgba(17,31,44,.96),rgba(11,23,33,.96)); box-shadow: var(--shadow); }
.report-catalog-card.report-placeholder { border-style: dashed; opacity: .82; }
.report-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.28); border-radius: 12px; background: rgba(57,198,163,.08); font-size: 11px; font-weight: 900; letter-spacing: .5px; }
.report-catalog-card h2 { margin: 19px 0 7px; font-size: 19px; }
.report-catalog-card > p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.report-catalog-card dl { display: grid; gap: 7px; margin: 0 0 18px; }
.report-catalog-card dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.report-catalog-card dt { color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.report-catalog-card dd { margin: 0; text-align: right; font-size: 10px; }
.report-catalog-card > .button { margin-top: auto; }
.report-metric-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.inventory-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.inventory-summary-panel { margin-bottom: 0; }
.compact-breakdown-list { display: grid; gap: 0; }
.compact-breakdown-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.compact-breakdown-list span { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.compact-breakdown-list small { color: var(--muted-2); font-size: 9px; }
.compact-breakdown-list strong { min-width: 32px; text-align: right; font-size: 16px; }
.disabled-control { cursor: default; opacity: .55; }
.report-filter-form { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(145px,.75fr)) auto auto; gap: 10px; align-items: end; }
.report-filter-form label { display: grid; gap: 6px; }
.report-filter-form label > span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.report-filter-form input, .report-filter-form select { width: 100%; min-height: 39px; padding: 8px 11px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; outline: none; background: var(--surface-2); }
.report-filter-form input:focus, .report-filter-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,198,163,.08); }
.site-report-section .panel-heading h2 { font-size: 20px; }
.inventory-report-table td { vertical-align: top; }
.inventory-report-table { width: 100%; min-width: 980px; table-layout: auto; }
.inventory-report-table th, .inventory-report-table td { white-space: normal; overflow-wrap: anywhere; }
.inventory-report-table td:nth-child(1) { min-width: 175px; }
.inventory-report-table td:nth-child(2) { min-width: 150px; }
.inventory-report-table td:nth-child(3) { min-width: 260px; }
.card-inventory { display: flex; flex-wrap: wrap; gap: 7px; }
.card-inventory-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(17,31,44,.72); }
.card-inventory-item small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.card-inventory-item strong { font-size: 10px; }
.inventory-card-total { display: block; margin-top: 8px; color: var(--muted-2); }
.controlled-change-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; align-items: end; }
.controlled-change-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.controlled-change-form label small { color: var(--muted-2); font-size: 8px; font-weight: 500; line-height: 1.35; text-transform: none; }
.controlled-change-form input, .controlled-change-form select { width: 100%; }
.controlled-change-form > button { grid-column: 1 / -1; justify-self: start; }
.transaction-preview { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid rgba(244,189,87,.3); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.72),rgba(8,19,27,.8)); }
.transaction-preview-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.transaction-preview h3 { margin: 6px 0 3px; }
.transaction-preview p { margin: 0; color: var(--muted); }
.transaction-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.transaction-columns > div { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(7,18,26,.48); }
.transaction-columns h4 { margin: 0 0 9px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; }
.transaction-columns ol { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 9px; line-height: 1.45; }
.boundary-list.expanded { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ring-workflow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 18px; }
.ring-workflow-card { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 116px; padding: 17px; border: 1px solid var(--border-soft); border-radius: 14px; color: var(--text); background: linear-gradient(145deg,rgba(17,31,44,.8),rgba(8,19,27,.84)); text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.ring-workflow-card:hover, .ring-workflow-card.active { border-color: rgba(73,222,184,.5); transform: translateY(-1px); }
.ring-workflow-card h2 { margin: 0 0 5px; font-size: 15px; }
.ring-workflow-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.workflow-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(73,222,184,.1); color: var(--accent); font-size: 11px; font-weight: 900; }
.ring-setup-form { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 12px; align-items: end; max-width: 760px; }
.ring-setup-form label, .ring-form-grid label, .ring-full-field { display: grid; gap: 6px; }
.ring-setup-form label > span, .ring-form-grid label > span, .ring-full-field > span { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .55px; text-transform: uppercase; }
.ring-form-grid { display: grid; gap: 12px; margin: 14px 0; }
.ring-form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ring-form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ring-form-grid .span-two { grid-column: span 2; }
.ring-form-grid small, .ring-full-field small { color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.ring-device-stack, .ring-edge-stack { display: grid; gap: 13px; }
.ring-device-card, .ring-edge-card { padding: 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(9,21,30,.62); }
.ring-device-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ring-device-heading span:first-child { color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.ring-device-heading h3, .ring-edge-card h3 { margin: 4px 0 8px; font-size: 14px; }
.ring-member-grid { display: grid; grid-template-columns: 52px minmax(130px,1fr) minmax(130px,1fr) minmax(150px,.9fr) minmax(120px,.7fr); gap: 8px; align-items: center; margin-top: 8px; }
.ring-member-grid.header { color: var(--muted-2); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.ring-member-grid strong { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-size: 9px; }
.ring-submit-bar { position: sticky; bottom: 12px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 18px 0; padding: 15px 17px; border: 1px solid rgba(73,222,184,.35); border-radius: 13px; background: rgba(8,19,27,.96); box-shadow: 0 16px 42px rgba(0,0,0,.35); }
.ring-submit-bar div { display: grid; gap: 3px; }
.ring-submit-bar span { color: var(--muted); font-size: 9px; }
.ring-site-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.ring-site-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; color: var(--text); background: rgba(10,22,31,.66); text-decoration: none; }
.ring-site-card:hover { border-color: rgba(73,222,184,.4); }
.ring-site-card > div { display: grid; gap: 3px; }
.ring-site-card > div span, .ring-site-card > small { color: var(--muted-2); font-size: 9px; }
.ring-site-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0; }
.ring-site-card dl div { padding: 8px; border-radius: 8px; background: rgba(17,31,44,.68); }
.ring-site-card dt { color: var(--muted-2); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.ring-site-card dd { margin: 3px 0 0; font-size: 14px; font-weight: 850; }
.evidence-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.evidence-summary span { padding: 6px 9px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--muted); font-size: 8px; }

/* Production launch control */
.launch-verdict { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; margin-bottom: 14px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg,rgba(20,43,54,.9),rgba(8,20,29,.94)); }
.launch-verdict-ready { border-color: rgba(80,216,144,.38); box-shadow: inset 4px 0 0 var(--success); }
.launch-verdict-ready-with-warnings { border-color: rgba(244,189,87,.38); box-shadow: inset 4px 0 0 var(--warning); }
.launch-verdict-blocked { border-color: rgba(248,113,113,.42); box-shadow: inset 4px 0 0 var(--danger); }
.launch-verdict h2 { margin: 7px 0 5px; font-size: 20px; }
.launch-verdict p { max-width: 780px; margin: 0; color: var(--muted); line-height: 1.5; }
.launch-score { min-width: 150px; padding: 13px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(7,18,26,.58); text-align: right; }
.launch-score strong { display: block; font-size: 28px; }
.launch-score span { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.launch-check-list { display: grid; gap: 8px; }
.launch-check { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(17,31,44,.5); }
.launch-check-pass { border-left: 3px solid var(--success); }
.launch-check-warning { border-left: 3px solid var(--warning); }
.launch-check-fail { border-left: 3px solid var(--danger); }
.launch-check-information { border-left: 3px solid var(--muted-2); }
.launch-check-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text); font-weight: 900; }
.launch-check strong { display: block; margin: 2px 0 3px; font-size: 11px; }
.launch-check p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.launch-remediation { display: inline-block; margin-top: 6px; font-size: 9px; font-weight: 850; }
.rollout-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.rollout-role-grid article { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); }
.rollout-role-grid span, .rollout-role-grid small { display: block; color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.rollout-role-grid strong { display: block; margin: 4px 0; font-size: 19px; }
.launch-sequence { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: launch-step; }
.launch-sequence li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--border-soft); counter-increment: launch-step; }
.launch-sequence li::before { content: counter(launch-step); position: absolute; left: 0; top: 8px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(73,222,184,.3); border-radius: 50%; color: var(--accent); font-size: 8px; font-weight: 900; }
.launch-sequence strong, .launch-sequence span { display: block; }
.launch-sequence strong { font-size: 10px; }
.launch-sequence span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.boundary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

.empty-state { padding: 24px; color: var(--muted); text-align: center; }
.empty-state.large { min-height: 360px; display: grid; place-content: center; justify-items: center; }
.empty-state h1, .empty-state h2 { color: var(--text); margin: 0 0 8px; }
.empty-state p { max-width: 540px; margin: 0 0 15px; line-height: 1.55; }
.empty-state .empty-state-note { margin-bottom: 0; color: var(--text-soft); font-size: 10px; }

/* Governed OLT onboarding */
.onboarding-create-form { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 12px; align-items: end; }
.onboarding-create-form label { display: grid; gap: 6px; }
.onboarding-create-form label > span, .host-key-grid span { color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; font-size: 9px; font-weight: 900; }
.onboarding-create-form input, .onboarding-create-form select, .host-key-confirm-form input, .onboarding-exact-confirmation-form input { width: 100%; min-height: 39px; padding: 8px 11px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; outline: none; background: var(--surface-2); }
.onboarding-create-form input:focus, .onboarding-create-form select:focus, .host-key-confirm-form input:focus, .onboarding-exact-confirmation-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,198,163,.08); }
.onboarding-list { display: grid; gap: 14px; }
.onboarding-card { display: grid; gap: 14px; padding: 17px; border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.72),rgba(10,22,31,.72)); }
.onboarding-card.status-activated-quarantined { border-color: rgba(244,189,87,.32); }
.onboarding-card.status-active { border-color: rgba(57,198,163,.28); }
.onboarding-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.onboarding-card-heading h3 { margin: 4px 0; font-size: 17px; }
.onboarding-card-heading code { color: var(--muted); }
.onboarding-stage-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.onboarding-stage-list span { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 9px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(8,18,26,.45); font-size: 9px; font-weight: 800; }
.onboarding-stage-list i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--muted-2); }
.onboarding-stage-list .stage-pass { color: #bcebdd; border-color: rgba(57,198,163,.22); }
.onboarding-stage-list .stage-pass i { background: var(--success); }
.onboarding-detail { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.host-key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.host-key-grid > div { min-width: 0; display: grid; gap: 5px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(8,18,26,.5); }
.host-key-grid code, .known-hosts-preview code { display: block; overflow-wrap: anywhere; color: var(--accent-strong); font-size: 10px; }
.host-key-grid small { color: var(--muted-2); font-size: 9px; }
.known-hosts-preview { padding: 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(8,18,26,.5); }
.known-hosts-preview summary { cursor: pointer; color: var(--text-soft); font-size: 10px; font-weight: 850; }
.known-hosts-preview p { margin: 8px 0; color: var(--muted); font-size: 10px; }
.onboarding-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; }
.host-key-confirm-form { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.onboarding-exact-confirmation-form { width: min(100%,760px); display: grid; grid-template-columns: minmax(280px,1fr) auto; gap: 9px; align-items: end; }
.onboarding-exact-confirmation-form label { display: grid; gap: 5px; }
.onboarding-exact-confirmation-form label > span { color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; font-size: 9px; font-weight: 900; }
.onboarding-exact-confirmation-form small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.onboarding-exact-confirmation-form code { color: var(--accent-strong); }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric-grid, .report-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-grid.two-one { grid-template-columns: minmax(0,1fr); }
  .integration-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .finding-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .maintenance-layout { grid-template-columns: 330px minmax(0,1fr); }
  .alarm-case { grid-template-columns: 4px minmax(250px,1fr) minmax(135px,auto); }
  .alarm-ack-form, .alarm-note { grid-column: 2 / 4; }
  .alarm-filter-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ops-command-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .evidence-clock-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smx-lookup-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smx-lookup-form button { justify-self: start; }
  .role-briefing { grid-template-columns: 1fr; }
  .role-matrix { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .change-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .controlled-change-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .controlled-change-form button { justify-self: start; }
  .onboarding-create-form { grid-template-columns: 1fr 1fr; }
  .ring-workflow-grid, .ring-site-grid { grid-template-columns: 1fr; }
  .ring-form-grid.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .onboarding-stage-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .host-key-confirm-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: fixed; left: -280px; width: 258px; visibility: hidden; pointer-events: none; transition: left .2s ease, visibility 0s linear .2s; box-shadow: 20px 0 50px rgba(0,0,0,.45); }
  .sidebar-open { overflow: hidden; }
  .sidebar-open .sidebar { left: 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .sidebar-open::after { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(1,7,11,.68); backdrop-filter: blur(2px); }
  .mobile-menu { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; }
  .page-content { padding: 20px 16px; }
  .topbar { padding: 0 16px; }
  .read-only-badge { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .maintenance-layout { grid-template-columns: 1fr; }
  .maintenance-action-card { align-items: stretch; flex-direction: column; }
  .maintenance-action-buttons { flex-wrap: wrap; }
  .service-health-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .finding-grid { grid-template-columns: 1fr; }
  .manual-collection-grid { grid-template-columns: 1fr; }
  .manual-collection-form { align-items: stretch; flex-direction: column; }
  .pon-action-facts, .pon-action-target { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .alarm-case { grid-template-columns: 4px minmax(0,1fr); }
  .alarm-case-time, .alarm-ack-form, .alarm-note { grid-column: 2; text-align: left; }
  .alarm-filter-form { grid-template-columns: 1fr 1fr; }
  .alarm-filter-form label:first-of-type { grid-column: 1 / 3; }
  .event-trend { gap: 3px; }
  .ops-workspace-tabs { top: 62px; display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .ops-workspace-tab { flex: 0 0 150px; scroll-snap-align: start; }
  .lldp-link-section-heading { align-items: start; flex-direction: column; gap: 5px; }
  .smx-lookup-form { grid-template-columns: 1fr; }
  .smx-lookup-result-heading { align-items: flex-start; flex-direction: column; }
  .smx-trend-layout, .transaction-columns { grid-template-columns: 1fr; }
  .change-authority-banner { grid-template-columns: 1fr; }
  .syslog-posture-card { grid-template-columns: 1fr auto; }
  .syslog-posture-card .approved-command { grid-column: 1 / 3; grid-row: 2; }
  .validation-path { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .launch-verdict { grid-template-columns: 1fr; }
  .launch-score { text-align: left; }
  .host-key-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .role-capability-list, .role-matrix, .operator-playbooks, .change-catalog-grid, .report-catalog-grid, .inventory-summary-grid, .controlled-change-form, .boundary-list.expanded, .rollout-role-grid { grid-template-columns: 1fr; }
  .syslog-posture-card { grid-template-columns: 1fr; align-items: stretch; }
  .syslog-posture-card .approved-command { grid-column: auto; grid-row: auto; }
  .fleet-attention-banner, .policy-command-panel, .pagination { align-items: flex-start; flex-direction: column; }
  .syslog-filter-form, .validation-path { grid-template-columns: 1fr; }
  .report-filter-form { grid-template-columns: 1fr; }
  .launch-check { grid-template-columns: 28px minmax(0,1fr); }
  .launch-check > .pill { grid-column: 2; justify-self: start; }
  .onboarding-create-form, .host-key-confirm-form, .onboarding-exact-confirmation-form { grid-template-columns: 1fr; }
  .ring-form-grid.three, .ring-form-grid.two, .ring-setup-form { grid-template-columns: 1fr; }
  .ring-form-grid .span-two { grid-column: auto; }
  .ring-member-grid { grid-template-columns: 36px 1fr 1fr; }
  .ring-member-grid > :nth-child(4), .ring-member-grid > :nth-child(5) { grid-column: span 1; }
  .ring-member-grid.header { display: none; }
  .ring-submit-bar { position: static; align-items: stretch; flex-direction: column; }
  .onboarding-stage-list { grid-template-columns: 1fr 1fr; }
  .onboarding-card-heading { flex-direction: column; }
  .admin-user-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-user-form .button { justify-self: start; }
  .user-account-row { grid-template-columns: minmax(0,1fr); }
  .user-account-row form { min-width: 0; flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 580px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-grid { grid-template-columns: 1fr; }
  .integration-grid { grid-template-columns: 1fr; }
  .global-search kbd { display: none; }
  .avatar { display: none; }
  .account-link .avatar { display: grid; }
  .account-link > span:last-child { display: none; }
  .topbar-actions { gap: 7px; }
  .topbar-alarm-badge { min-width: 52px; }
  .pon-action-facts, .pon-action-target { grid-template-columns: 1fr; }
  .topology-finding { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: auto 1fr; }
  .comparison-row > .pill { grid-column: 2; justify-self: start; }
  .before-after { flex-wrap: wrap; }
  .change-arrow { display: none; }
  .two-column-form { grid-template-columns: 1fr; }
  .maintenance-workflow { grid-template-columns: 1fr; }
  .workflow-connector { width: 2px; height: 16px; margin-left: 14px; }
  .service-health-grid { grid-template-columns: 1fr; }
  .ops-command-strip { grid-template-columns: 1fr; }
  .alarm-filter-form { grid-template-columns: 1fr; }
  .alarm-filter-form label:first-of-type { grid-column: 1; }
  .alarm-ack-form { grid-template-columns: 1fr; }
  .connection-matrix { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-trend { gap: 2px; }
  .trend-value { display: none; }
  .evidence-clock-grid { grid-template-columns: 1fr; }
  .ops-workspace-tab { flex-basis: 138px; }
  .quick-actions { grid-template-columns: 1fr; }
  .workflow-rail { grid-template-columns: 1fr; }
  .source-authority-grid, .region-chip-grid, .device-context-grid, .smx-severity-grid { grid-template-columns: 1fr; }
  .admin-user-form { grid-template-columns: minmax(0,1fr); }
  .admin-user-form .button { width: 100%; }
  .user-account-row form { align-items: stretch; flex-direction: column; }
  .user-account-row form > * { width: 100%; min-width: 0; }
  .pill { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
}

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

/* v2.49 operator platform: consolidated command center and fleet explorer */
.sidebar-density-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: -11px 0 14px; padding: 5px 8px; color: var(--muted-2); border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .65px; cursor: pointer; }
.sidebar-density-toggle:hover { color: var(--text); border-color: var(--border-soft); background: rgba(17,31,44,.55); }
.nav-group-label { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; text-align: left; cursor: pointer; }
.nav-group-label:hover { color: var(--muted); }
.nav-group.is-collapsed .nav-item { display: none; }
.nav-group.is-collapsed .nav-group-label { margin-bottom: 0; }
.app-shell, .sidebar, .brand, .nav-item { transition: width .18s ease, grid-template-columns .18s ease, padding .18s ease, gap .18s ease; }
body.sidebar-compact .app-shell { grid-template-columns: 78px minmax(0,1fr); }
body.sidebar-compact .sidebar { width: 78px; padding-inline: 10px; }
body.sidebar-compact .brand { justify-content: center; padding-inline: 0; }
body.sidebar-compact .brand > span:last-child, body.sidebar-compact .sidebar-density-toggle > span:last-child, body.sidebar-compact .nav-group-label, body.sidebar-compact .nav-item > span:not(.nav-icon), body.sidebar-compact .sidebar-section, body.sidebar-compact .sidebar-foot { display: none; }
body.sidebar-compact .sidebar-density-toggle { margin-top: -8px; }
body.sidebar-compact .sidebar-density-toggle > span:first-child { transform: rotate(180deg); }
body.sidebar-compact .nav-list { gap: 8px; padding-right: 0; overflow: visible; }
body.sidebar-compact .nav-item { justify-content: center; padding-inline: 8px; }
body.sidebar-compact .nav-icon { flex-basis: 22px; width: 22px; }

.global-search { position: relative; }
.command-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; max-height: min(480px,70vh); padding: 7px; overflow-y: auto; border: 1px solid var(--border); border-radius: 13px; background: rgba(9,19,28,.98); box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.command-search-result { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; }
.command-search-result:hover, .command-search-result.active { border-color: rgba(57,198,163,.28); background: var(--surface-2); }
.command-search-result > b { display: grid; place-items: center; min-height: 27px; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.2); border-radius: 7px; background: rgba(57,198,163,.06); font-size: 10px; text-transform: uppercase; }
.command-search-result span { min-width: 0; }
.command-search-result strong, .command-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-search-result strong { font-size: 13px; }
.command-search-result small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.command-search-result > small { color: var(--muted-2); font-size: 10px; text-transform: uppercase; }
.command-search-empty { padding: 14px; color: var(--muted); text-align: center; font-size: 11px; }

.operator-briefing-bar { display: grid; grid-template-columns: minmax(250px,1.25fr) minmax(300px,1.4fr) auto; gap: 18px; align-items: center; margin-bottom: 14px; padding: 13px 15px; border: 1px solid rgba(88,168,255,.2); border-radius: 13px; background: linear-gradient(110deg,rgba(88,168,255,.07),rgba(57,198,163,.035)); }
.operator-briefing-bar > div:first-child strong { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; }
.operator-briefing-capabilities { display: flex; flex-wrap: wrap; gap: 5px 13px; color: #b8d6df; font-size: 9px; }
.outcome-launcher { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.outcome-launcher > a { display: grid; grid-template-columns: 37px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg,rgba(17,31,44,.82),rgba(9,20,29,.82)); }
.outcome-launcher > a:hover { transform: translateY(-1px); border-color: rgba(57,198,163,.38); }
.outcome-launcher strong, .outcome-launcher small { display: block; }
.outcome-launcher strong { font-size: 11px; }
.outcome-launcher small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.outcome-launcher > a > span:last-child { color: var(--accent-strong); }
.outcome-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: 8px; font-weight: 950; }
.outcome-icon.critical { color: #ff9b9e; border-color: rgba(255,110,114,.3); background: rgba(255,110,114,.07); font-size: 16px; }
.outcome-icon.live { color: var(--accent-strong); border-color: rgba(57,198,163,.28); }
.outcome-icon.guarded { color: #ffda88; border-color: rgba(244,189,87,.3); }
.outcome-icon.context { color: #98c8ff; border-color: rgba(88,168,255,.3); }
.command-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(165px,1fr)); gap: 8px; margin-bottom: 14px; }
.command-metric { position: relative; min-width: 0; padding: 13px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: rgba(14,27,38,.86); }
.command-metric::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 76px; height: 76px; border-radius: 50%; background: rgba(57,198,163,.07); filter: blur(14px); }
.command-metric:hover { border-color: rgba(57,198,163,.36); }
.command-metric > span, .command-metric > strong, .command-metric > small { position: relative; z-index: 1; display: block; }
.command-metric > span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .55px; }
.command-metric > strong { margin: 6px 0 4px; font-size: 27px; line-height: 1; letter-spacing: -1.1px; }
.command-metric > small { color: var(--muted-2); font-size: 10px; line-height: 1.35; }
.command-center-grid { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(310px,.8fr); gap: 14px; margin-bottom: 14px; }
.work-queue-heading { align-items: flex-start; }
.work-queue-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.work-queue-filters button { padding: 5px 8px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 999px; background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }
.work-queue-filters button.active { color: var(--accent-strong); border-color: rgba(57,198,163,.35); background: rgba(57,198,163,.08); }
.work-queue-filters strong { margin-left: 3px; }
.work-queue { display: grid; gap: 5px; }
.work-item { display: grid; grid-template-columns: 4px minmax(0,1fr) minmax(110px,auto) 16px; gap: 11px; align-items: center; min-height: 64px; padding: 8px 10px 8px 7px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(10,22,31,.42); }
.work-item:hover { border-color: var(--border); background: var(--surface-2); }
.work-priority-marker { align-self: stretch; border-radius: 999px; background: var(--muted-2); }
.priority-critical .work-priority-marker { background: var(--critical); box-shadow: 0 0 14px rgba(255,77,100,.35); }
.priority-high .work-priority-marker { background: var(--warning); }
.priority-medium .work-priority-marker { background: var(--blue); }
.work-item-main { min-width: 0; }
.work-item-kicker { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted-2); font-size: 7px; text-transform: uppercase; letter-spacing: .55px; }
.work-item-kicker strong { color: var(--muted); }
.work-item-title { display: block; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.work-item-main > small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.work-item-context { min-width: 0; text-align: right; }
.work-item-context strong, .work-item-context small { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-item-context strong { font-size: 9px; }
.work-item-context small { margin-top: 3px; color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
.work-item-arrow { color: var(--accent-strong); }
.source-posture-list { display: grid; gap: 6px; }
.source-posture-item { display: grid; grid-template-columns: 9px minmax(90px,.7fr) minmax(120px,1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(10,22,31,.45); }
.source-posture-item:hover { border-color: var(--border); background: var(--surface-2); }
.source-posture-list strong, .source-posture-list small { display: block; }
.source-posture-list strong { font-size: 11px; }
.source-posture-list small { margin-top: 3px; color: var(--muted-2); font-size: 9px; line-height: 1.3; }
.source-posture-item > span:last-child { text-align: right; }
.source-posture-item > span:last-child strong { color: var(--muted); text-transform: uppercase; }
.source-boundary-note { display: grid; gap: 5px; margin-top: 10px; padding: 11px; color: #bfe7dc; border: 1px solid rgba(57,198,163,.2); border-radius: 10px; background: rgba(57,198,163,.045); }
.source-boundary-note strong { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.source-boundary-note span { color: var(--muted); font-size: 8px; line-height: 1.45; }
.compact-site-list .site-card { min-height: 66px; }
.activity-compact-list { display: grid; gap: 5px; }
.activity-compact-list > div { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--border-soft); }
.activity-compact-list strong, .activity-compact-list small { display: block; }
.activity-compact-list strong { font-size: 9px; }
.activity-compact-list small, .activity-compact-list time { margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.maintenance-shortcut { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.2); border-radius: 9px; background: rgba(57,198,163,.045); }
.maintenance-shortcut strong, .maintenance-shortcut small { display: block; }
.maintenance-shortcut strong { font-size: 9px; }
.maintenance-shortcut small { margin-top: 2px; color: var(--muted); font-size: 7px; }

.explorer-search { position: sticky; top: 82px; z-index: 10; }
.explorer-search-help { margin: -10px 4px 16px; color: var(--muted); font-size: 10px; }
.explorer-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(9,19,28,.92); }
.explorer-toolbar > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: baseline; }
.explorer-toolbar > div strong { color: var(--accent-strong); font-size: 17px; }
.explorer-toolbar > div span { font-size: 10px; }
.explorer-toolbar > div small { grid-column: 1 / -1; color: var(--muted-2); font-size: 8px; }
.explorer-toolbar nav { display: flex; justify-content: flex-end; gap: 5px; overflow-x: auto; }
.explorer-toolbar nav a { flex: 0 0 auto; padding: 5px 8px; color: var(--muted); border: 1px solid transparent; border-radius: 999px; font-size: 8px; font-weight: 800; }
.explorer-toolbar nav a.active { color: var(--accent-strong); border-color: rgba(57,198,163,.3); background: rgba(57,198,163,.07); }
.explorer-toolbar nav strong { margin-left: 3px; }
.explorer-results .search-section { scroll-margin-top: 150px; }
.explorer-empty { display: grid; grid-template-columns: minmax(320px,1fr) minmax(420px,1.1fr); gap: 24px; align-items: center; min-height: 420px; padding: 32px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg,rgba(17,31,44,.8),rgba(9,20,29,.84)); }
.explorer-empty h2 { margin: 6px 0 9px; font-size: 25px; }
.explorer-empty p { max-width: 650px; color: var(--muted); line-height: 1.55; }
.explorer-empty .query-chips { justify-content: flex-start; }
.explorer-source-map { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.explorer-source-map article { min-height: 105px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(10,22,31,.55); }
.explorer-source-map strong, .explorer-source-map small { display: block; }
.explorer-source-map strong { margin: 9px 0 5px; font-size: 11px; }
.explorer-source-map small { color: var(--muted); font-size: 8px; line-height: 1.4; }

@media (max-width: 1280px) {
  .command-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .command-center-grid { grid-template-columns: 1fr; }
  .source-posture-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1060px) {
  .operator-briefing-bar { grid-template-columns: 1fr auto; }
  .operator-briefing-capabilities { grid-column: 1 / -1; }
  .outcome-launcher { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .explorer-toolbar { grid-template-columns: 1fr; }
  .explorer-toolbar nav { justify-content: flex-start; }
  .explorer-empty { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.sidebar-compact .app-shell { grid-template-columns: minmax(0,1fr); }
  body.sidebar-compact .sidebar { width: 258px; padding: 22px 18px; }
  body.sidebar-compact .brand > span:last-child, body.sidebar-compact .sidebar-density-toggle > span:last-child, body.sidebar-compact .nav-group-label, body.sidebar-compact .nav-item > span:not(.nav-icon), body.sidebar-compact .sidebar-section, body.sidebar-compact .sidebar-foot { display: initial; }
  body.sidebar-compact .nav-group-label { display: flex; }
  body.sidebar-compact .nav-item { justify-content: flex-start; }
  .sidebar-density-toggle { display: none; }
  .explorer-search { top: 78px; }
}
@media (max-width: 680px) {
  .operator-briefing-bar, .command-metrics, .source-posture-list { grid-template-columns: 1fr; }
  .operator-briefing-bar > a { justify-self: start; }
  .outcome-launcher { grid-template-columns: 1fr; }
  .work-queue-heading { align-items: flex-start; flex-direction: column; }
  .work-item { grid-template-columns: 4px minmax(0,1fr) 16px; }
  .work-item-context { grid-column: 2; grid-row: 2; text-align: left; }
  .work-item-arrow { grid-column: 3; grid-row: 1 / 3; }
  .explorer-source-map { grid-template-columns: 1fr; }
  .explorer-empty { min-height: auto; padding: 20px; }
}
.integration-control-plane, .connector-registry-panel { margin-bottom: 14px; }
.integration-control-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.integration-control-metrics article { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(10,22,31,.48); }
.integration-control-metrics span, .integration-control-metrics strong, .integration-control-metrics small { display: block; }
.integration-control-metrics span { color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .5px; }
.integration-control-metrics strong { margin: 5px 0 3px; font-size: 22px; }
.integration-control-metrics small { color: var(--muted-2); font-size: 8px; }
.integration-api-contract { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(380px,1.25fr); gap: 16px; align-items: center; margin-top: 9px; padding: 12px; border: 1px solid rgba(57,198,163,.18); border-radius: 10px; background: rgba(57,198,163,.035); }
.integration-api-contract strong, .integration-api-contract small { display: block; }
.integration-api-contract strong { margin: 6px 0 4px; font-size: 10px; }
.integration-api-contract small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.api-route-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.api-route-list code { padding: 6px 8px; color: var(--accent-strong); border: 1px solid var(--border-soft); border-radius: 7px; background: #07131b; font-size: 8px; }
.connector-registry-panel td { vertical-align: top; }
.connector-registry-panel td:first-child { min-width: 210px; }
.connector-registry-panel td:first-child small { display: block; max-width: 340px; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.connector-capability-list { display: grid; gap: 4px; min-width: 230px; }
.connector-capability-list > span { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 6px; align-items: center; font-size: 8px; }
.connector-capability-list small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
@media (max-width: 900px) {
  .integration-control-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-api-contract { grid-template-columns: 1fr; }
  .api-route-list { justify-content: flex-start; }
}
@media (max-width: 580px) {
  .integration-control-metrics { grid-template-columns: 1fr; }
}

/* v2.44 PostgreSQL operations and presentation refinement */
.database-runtime-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.database-runtime-grid article { min-width:0; padding:15px; border:1px solid var(--border-soft); border-radius:12px; background:linear-gradient(145deg,rgba(17,31,44,.72),rgba(8,19,27,.72)); }
.database-runtime-grid article.attention { border-color:rgba(244,189,87,.38); box-shadow:inset 3px 0 0 var(--warning); }
.database-runtime-grid span,.database-runtime-grid small { display:block; color:var(--muted-2); font-size:9px; }
.database-runtime-grid span { font-weight:900; letter-spacing:.55px; text-transform:uppercase; }
.database-runtime-grid strong { display:block; overflow:hidden; margin:7px 0 5px; font-size:20px; text-overflow:ellipsis; white-space:nowrap; }
.run-chart { min-height:210px; display:grid; grid-template-columns:repeat(8,minmax(36px,1fr)); gap:10px; align-items:end; padding:20px 12px 8px; border:1px solid var(--border-soft); border-radius:12px; background:linear-gradient(180deg,rgba(88,168,255,.035),rgba(7,18,26,.44)); }
.run-chart-column { min-width:0; display:grid; grid-template-rows:18px 150px 14px; gap:5px; align-items:end; text-align:center; outline:none; }
.run-chart-column:focus-visible .run-chart-track { outline:2px solid var(--accent); outline-offset:3px; }
.run-chart-value { color:var(--muted); font-size:8px; font-weight:900; }
.run-chart-track { height:150px; display:flex; align-items:end; overflow:hidden; border-radius:7px; background:rgba(141,164,181,.08); }
.run-chart-bar { width:100%; min-height:4px; display:block; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--accent-strong),var(--success)); box-shadow:0 0 18px rgba(57,198,163,.16); }
.run-chart-bar.warning { background:linear-gradient(180deg,#f8d785,var(--warning)); }
.run-chart-column small { color:var(--muted-2); font-size:8px; }
.sortable-heading { padding:0!important; user-select:none; }
.sortable-heading-button { width:100%; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; color:inherit; border:0; background:transparent; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
.sortable-heading-button::after { content:'↕'; flex:0 0 auto; color:var(--muted-2); font-size:9px; }
.sortable-heading[aria-sort='ascending'] .sortable-heading-button::after { content:'↑'; color:var(--accent-strong); }
.sortable-heading[aria-sort='descending'] .sortable-heading-button::after { content:'↓'; color:var(--accent-strong); }
.sortable-heading-button:hover { color:var(--text); background:rgba(57,198,163,.05); }
.sortable-heading-button:focus-visible { outline-offset:-3px; }
.table-wrap { scrollbar-color:var(--border) transparent; scrollbar-width:thin; }
.table-wrap table { font-variant-numeric:tabular-nums; }
.table-wrap[tabindex="0"]:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (max-width:860px) { .database-runtime-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .run-chart { gap:6px; overflow-x:auto; } }
@media (max-width:580px) { .database-runtime-grid { grid-template-columns:1fr; } .run-chart { grid-template-columns:repeat(8,minmax(42px,1fr)); } }

/* v2.47 access-integration workspace and exact-lookup presentation */
.integration-page { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.integration-page > *,
.integration-page .panel,
.integration-page .content-grid > *,
.integration-page .source-authority-grid > * { min-width: 0; max-width: 100%; }
.integration-header-meta { margin-top: 12px !important; color: #b6c9d5 !important; font-size: 12px !important; font-weight: 650; line-height: 1.5 !important; }
.integration-page .text-link { display: inline; white-space: normal; overflow-wrap: anywhere; }
.integration-page code { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.integration-page .table-wrap { max-width: 100%; overflow-x: auto; }
.integration-page .table-wrap th { font-size: 12px; }
.integration-page .table-wrap td { font-size: 13px; }
.integration-page .table-wrap td small { font-size: 12px; line-height: 1.45; }
.integration-page .panel-heading p { font-size: 13px; }
.integration-page .metric-label,
.integration-page .metric-note { font-size: 12px; }
.integration-page .pill { padding: 4px 8px; font-size: 12px; }
.integration-page .capability-row strong { font-size: 13px; }
.integration-page .capability-row p { font-size: 12px; }
.integration-page .source-authority-grid p { min-height: 0; font-size: 12px; }
.integration-page .source-kicker { font-size: 10px; }
.status-dot.status-muted { background: var(--muted-2); box-shadow: 0 0 0 4px rgba(116,141,158,.09); }
.table-link-disabled { color: var(--text); font-weight: 800; }
.provider-operation-accounting { margin: -2px 0 15px; padding: 9px 11px; color: var(--muted); border-left: 3px solid rgba(88,168,255,.7); border-radius: 0 8px 8px 0; background: rgba(88,168,255,.055); font-size: 11px; line-height: 1.5; }
.provider-operation-accounting strong { color: #cfe3ef; }
.provider-text-review-note { margin: 0 0 12px; padding: 9px 11px; color: var(--muted); border: 1px solid rgba(244,189,87,.2); border-radius: 8px; background: rgba(244,189,87,.045); font-size: 10px; line-height: 1.5; }
.provider-text-review-note strong { color: #f2d38a; }

.integration-subnav { display: grid; grid-template-columns: minmax(170px,.45fr) minmax(0,1.55fr); gap: 16px; align-items: center; margin: 0 0 18px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg,rgba(17,31,44,.82),rgba(9,20,29,.76)); box-shadow: 0 12px 34px rgba(0,0,0,.16); }
.integration-subnav-label { min-width: 0; display: grid; gap: 4px; padding: 2px 5px; }
.integration-subnav-label .eyebrow { margin: 0; font-size: 10px !important; }
.integration-subnav-label strong { font-size: 13px; }
.integration-subnav-links { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 9px; }
.integration-subnav-link { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 11px; align-items: center; padding: 10px 12px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(8,19,27,.62); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.integration-subnav-link:hover { color: var(--text); border-color: rgba(57,198,163,.38); background: var(--surface-2); transform: translateY(-1px); }
.integration-subnav-link.active { color: var(--text); border-color: rgba(57,198,163,.42); background: linear-gradient(135deg,rgba(57,198,163,.13),rgba(88,168,255,.07)); box-shadow: inset 0 -2px 0 rgba(57,198,163,.5); }
.integration-provider-mark { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.28); border-radius: 10px; background: rgba(57,198,163,.08); font-size: 11px; font-weight: 950; letter-spacing: .2px; }
.integration-subnav-link > span:last-child,
.integration-subnav-link strong,
.integration-subnav-link small { min-width: 0; display: block; }
.integration-subnav-link strong { font-size: 13px; }
.integration-subnav-link small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; white-space: normal; }

.provider-overview-nav .integration-subnav-links { grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.integration-provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.provider-card { min-width: 0; display: flex; flex-direction: column; gap: 15px; padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg,rgba(17,31,44,.88),rgba(8,19,27,.9)); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.provider-card-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.provider-card-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.3px; }
.provider-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.provider-card > .button { align-self: flex-start; margin-top: auto; }
.provider-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; }
.provider-facts > div { min-width: 0; padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(7,18,26,.46); }
.provider-facts dt { color: var(--muted); font-size: 12px; line-height: 1.35; }
.provider-facts dd { min-width: 0; margin: 5px 0 0; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.provider-restriction { margin-top: auto; color: var(--muted); font-size: 12px; line-height: 1.5; }
.integration-rollout-panel { margin-bottom: 18px; }
.integration-rollout-panel table { min-width: 760px; }
.integration-rollout-panel td { vertical-align: top; line-height: 1.5; }

.integration-lookup-panel { scroll-margin-top: 84px; padding: 24px; border-color: rgba(57,198,163,.24); background: linear-gradient(145deg,rgba(13,27,38,.96),rgba(9,20,29,.94)); }
.integration-lookup-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; align-items: start; margin-bottom: 18px; }
.integration-lookup-heading .eyebrow { margin: 0 0 5px; }
.integration-lookup-heading h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.35px; }
.integration-lookup-heading p:not(.eyebrow) { max-width: 780px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.integration-availability,
.integration-result-status { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 7px 10px; color: #d7e5ec; border: 1px solid var(--border); border-radius: 9px; background: rgba(7,18,26,.58); font-size: 12px; font-weight: 800; white-space: nowrap; }

.integration-lookup-form { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 15px; align-items: start; padding: 18px; border: 1px solid var(--border-soft); border-radius: 13px; background: rgba(7,18,26,.56); }
.integration-lookup-form .integration-field { min-width: 0; display: grid; gap: 7px; color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.integration-lookup-form [data-smx-lookup-device-field][hidden] { display: none; }
.integration-field-label { color: #dce9f0; font-size: 12px; font-weight: 800; line-height: 1.35; }
.integration-lookup-form .integration-field small { min-height: 32px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.integration-lookup-form input,
.integration-lookup-form select { width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.integration-lookup-form .integration-field-type { grid-column: span 4; }
.integration-lookup-form .integration-field-identifier { grid-column: span 8; }
.smx-lookup-form.requires-device .integration-field-type { grid-column: span 3; }
.smx-lookup-form.requires-device .integration-field-identifier { grid-column: span 5; }
.smx-lookup-form.requires-device .integration-field-device { grid-column: span 4; }
.cloud-lookup-form .integration-field { grid-column: span 4; }
.integration-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.integration-primary-action { min-width: 168px; min-height: 44px; padding: 10px 18px; font-size: 13px; }
.integration-safety-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.integration-safety-note > span:first-child { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--success); border: 1px solid rgba(80,216,144,.25); border-radius: 7px; background: rgba(80,216,144,.07); font-size: 12px; font-weight: 900; }
.integration-safety-note strong { color: #d9e8ee; }
.integration-disclosure { margin-top: 11px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(17,31,44,.38); }
.integration-disclosure summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #c6d8e2; font-size: 12px; font-weight: 750; }
.integration-disclosure summary::marker { color: var(--accent); }
.integration-boundary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0 0 12px; }
.integration-boundary-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(7,18,26,.46); }
.integration-boundary-grid dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.integration-boundary-grid dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.integration-form-error { margin-bottom: 14px; font-size: 13px; }

.integration-result,
.integration-result-panel { min-width: 0; border-color: var(--border); background: linear-gradient(145deg,rgba(17,31,44,.84),rgba(8,19,27,.88)); }
.integration-result.status-ok,
.integration-result-panel.status-ok { border-color: rgba(80,216,144,.3); }
.integration-result-heading { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start; margin-bottom: 16px; }
.integration-result-heading > div { min-width: 0; }
.integration-result-heading h2,
.integration-result-heading h3 { margin: 3px 0 5px; font-size: 20px; letter-spacing: -.3px; }
.integration-result-heading p:not(.integration-result-source) { max-width: 920px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.integration-result-source { margin: 0; color: #a7d0ff; font-size: 12px; font-weight: 850; letter-spacing: .45px; text-transform: uppercase; }
.integration-record-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px; }
.integration-record-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.58); }
.integration-record-card dl { margin: 0; }
.integration-record-card dl > div { min-width: 0; display: grid; grid-template-columns: minmax(120px,.72fr) minmax(0,1fr); gap: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.integration-record-card dl > div:last-child { border-bottom: 0; }
.integration-record-card dt { color: var(--muted); font-size: 12px; }
.integration-record-card dd { min-width: 0; margin: 0; color: var(--text); font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.integration-record-card footer { padding: 11px 12px; border-top: 1px solid var(--border-soft); }
.integration-result-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.integration-result-meta > div { min-width: 0; padding: 9px 10px; border-radius: 9px; background: rgba(17,31,44,.48); }
.integration-result-meta dt { color: var(--muted); font-size: 12px; }
.integration-result-meta dd { margin: 4px 0 0; color: var(--text); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.integration-pending-result { font-size: 13px; }
.integration-result-metrics { margin-top: 4px; }
.integration-result-section { min-width: 0; margin: 16px 0 0; padding: 17px; border-color: var(--border-soft); background: rgba(7,18,26,.4); box-shadow: none; }
.integration-result-section:last-child { margin-bottom: 0; }
.integration-result-section h3 { margin: 0 0 4px; font-size: 16px; }
.integration-empty-copy { color: var(--muted); font-size: 13px; }
.integration-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.detail-card { min-width: 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.46); }
.detail-card h3,
.detail-card h4 { margin: 0 0 12px; font-size: 16px; }
.detail-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-card dl { margin: 0; }
.detail-card dl > div { min-width: 0; display: grid; grid-template-columns: minmax(120px,.7fr) minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.detail-card dl > div:last-child { border-bottom: 0; }
.detail-card dt { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.detail-card dd { min-width: 0; margin: 0; color: var(--text); font-size: 13px; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.integration-client-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.integration-client-metrics .metric-card { min-height: 108px; }
.integration-capability-panel { margin-top: 18px; }
.provider-binding-form .provider-binding-device-field { grid-column: span 4; }
.provider-binding-form .provider-binding-instance-field { grid-column: span 3; }
.provider-binding-form .provider-binding-external-field { grid-column: span 5; }
.provider-inventory-empty-note { margin: 12px 2px 0; color: var(--muted); font-size: 12px; }
.provider-binding-list { display: grid; gap: 14px; }
.provider-binding-card { min-width: 0; padding: 18px; border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg,rgba(12,26,36,.86),rgba(7,18,26,.76)); }
.provider-binding-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.provider-binding-heading h3 { margin: 5px 0 4px; font-size: 19px; }
.provider-binding-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.provider-binding-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 15px 0 0; }
.provider-binding-facts > div { min-width: 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(7,18,26,.48); }
.provider-binding-facts dt { color: var(--muted); font-size: 11px; }
.provider-binding-facts dd { min-width: 0; margin: 5px 0 0; color: var(--text); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.provider-binding-verify-form { display: grid; grid-template-columns: minmax(260px,1fr) minmax(300px,1.2fr) auto; gap: 12px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.provider-binding-verify-form > label:first-of-type { display: grid; gap: 7px; }
.provider-binding-verify-form > label:first-of-type > span { color: #dce9f0; font-size: 12px; font-weight: 800; }
.provider-binding-verify-form input[type="text"],
.provider-binding-verify-form input[name="confirmed_external_device_id"] { width: 100%; min-width: 0; height: 42px; padding: 0 12px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.provider-binding-confirmation { display: flex; gap: 9px; align-items: flex-start; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.provider-binding-confirmation input { flex: 0 0 auto; margin-top: 2px; }
.provider-binding-correction-panel { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(420px,1.2fr); gap: 18px; align-items: center; margin-top: 13px; padding: 13px; border: 1px solid rgba(243,186,70,.2); border-radius: 10px; background: rgba(243,186,70,.035); }
.provider-binding-correction-panel strong,
.provider-binding-correction-panel p { display: block; }
.provider-binding-correction-panel strong { margin: 5px 0 3px; font-size: 13px; }
.provider-binding-correction-panel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.provider-binding-correction-form { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.provider-binding-correction-form .provider-binding-confirmation { flex: 1 1 auto; }
.provider-binding-correction-form .button { flex: 0 0 auto; }

@media (max-width: 1180px) {
  .integration-subnav { grid-template-columns: 1fr; }
  .integration-subnav-label { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .integration-lookup-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-lookup-form .integration-field,
  .integration-lookup-form .integration-field-type,
  .integration-lookup-form .integration-field-identifier,
  .smx-lookup-form.requires-device .integration-field-type,
  .smx-lookup-form.requires-device .integration-field-identifier,
  .smx-lookup-form.requires-device .integration-field-device,
  .cloud-lookup-form .integration-field { grid-column: auto; }
  .provider-binding-form .provider-binding-device-field,
  .provider-binding-form .provider-binding-instance-field,
  .provider-binding-form .provider-binding-external-field { grid-column: auto; }
  .integration-form-actions { grid-column: 1 / -1; }
  .integration-boundary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .provider-binding-verify-form { grid-template-columns: 1fr 1fr; }
  .provider-binding-verify-form .button { grid-column: 1 / -1; justify-self: end; }
  .provider-binding-correction-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .provider-overview-nav .integration-subnav-links { grid-template-columns: 1fr; }
  .integration-provider-grid { grid-template-columns: 1fr; }
  .integration-subnav-links { grid-template-columns: 1fr 1fr; }
  .integration-lookup-heading,
  .integration-result-heading { grid-template-columns: 1fr; }
  .integration-availability,
  .integration-result-status { justify-self: start; white-space: normal; }
  .integration-lookup-form { grid-template-columns: 1fr; padding: 15px; }
  .integration-form-actions { grid-column: auto; justify-content: stretch; }
  .integration-primary-action { width: 100%; }
  .integration-result-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-detail-grid { grid-template-columns: 1fr; }
  .provider-binding-heading { display: grid; }
  .provider-binding-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .provider-binding-verify-form { grid-template-columns: 1fr; }
  .provider-binding-verify-form .button { grid-column: auto; justify-self: stretch; }
  .provider-binding-correction-form { align-items: stretch; flex-direction: column; }
  .provider-binding-correction-form .button { width: 100%; }
}

@media (max-width: 580px) {
  .integration-lookup-panel { padding: 17px; }
  .integration-subnav { padding: 10px; }
  .integration-subnav-label { grid-template-columns: 1fr; }
  .provider-binding-facts { grid-template-columns: 1fr; }
  .integration-subnav-links { grid-template-columns: 1fr; }
  .integration-record-grid { grid-template-columns: 1fr; }
  .integration-record-card dl > div,
  .detail-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .detail-card dd { text-align: left; }
  .integration-result-meta,
  .integration-boundary-grid,
  .integration-client-metrics { grid-template-columns: 1fr; }
  .provider-facts { grid-template-columns: 1fr; }
  .integration-page .capability-row { grid-template-columns: auto minmax(0,1fr); align-items: start; }
  .integration-page .capability-row > .pill { grid-column: 2; justify-self: start; white-space: normal; }
}

/* Customer Care workspace */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.csr-nav-section { display: grid; gap: 3px; }
.csr-nav-label { min-height: 24px; display: flex; align-items: center; }
.care-mode-chip { color: #c9fff0; }
.role-csr .sidebar-density-toggle { display: none; }
.csr-topbar-context { min-width: 0; display: flex; align-items: center; gap: 11px; }
.csr-topbar-context > span:last-child { min-width: 0; display: grid; gap: 2px; }
.csr-topbar-context strong { font-size: 13px; }
.csr-topbar-context small { color: var(--muted); font-size: 10px; }
.care-privacy-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; color: var(--accent-strong); border: 1px solid rgba(57,198,163,.28); border-radius: 999px; background: rgba(57,198,163,.07); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .45px; white-space: nowrap; }
.role-csr { background: radial-gradient(circle at 85% 0%,rgba(39,143,128,.16),transparent 30%),radial-gradient(circle at 42% 38%,rgba(88,168,255,.05),transparent 33%),var(--bg); }
.role-csr .page-content { max-width: 1480px; }
.customer-care-page { --care-good: #50d890; --care-warn: #f4bd57; --care-bad: #ff6e72; --care-info: #58a8ff; }
.customer-care-heading { align-items: center; }
.customer-care-heading h1 { max-width: 860px; }
.customer-care-heading > div:first-child > p:last-child { max-width: 850px; }
.care-heading-assurance { flex: 0 0 auto; display: grid; gap: 8px; min-width: 215px; padding: 13px 15px; border: 1px solid rgba(57,198,163,.22); border-radius: 13px; background: linear-gradient(145deg,rgba(17,31,44,.82),rgba(7,18,26,.78)); }
.care-heading-assurance span { display: flex; align-items: center; gap: 9px; color: #cbdde5; font-size: 10px; font-weight: 750; }
.care-heading-assurance i { flex: 0 0 auto; }
.care-identity-gate { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; margin-bottom: 18px; padding: 15px 17px; border: 1px solid rgba(88,168,255,.24); border-radius: 14px; background: linear-gradient(105deg,rgba(88,168,255,.09),rgba(57,198,163,.05)); }
.care-identity-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #06221b; border-radius: 10px; background: linear-gradient(135deg,var(--accent-strong),var(--accent)); font-size: 15px; font-weight: 950; }
.care-identity-gate h2 { margin: 0 0 4px; font-size: 14px; }
.care-identity-gate p { max-width: 1000px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-lookup-panel { padding: 22px; border-color: rgba(57,198,163,.23); background: linear-gradient(150deg,rgba(14,28,39,.96),rgba(8,20,28,.94)); }
.care-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.care-section-heading h2 { margin: 3px 0 5px; font-size: 20px; letter-spacing: -.4px; }
.care-section-heading p:not(.eyebrow) { max-width: 800px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.care-form-error { margin-bottom: 15px; }
.care-lookup-form { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: rgba(5,15,22,.48); }
.care-identity-confirmation { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--border); background: rgba(88,168,255,.055); cursor: pointer; }
.care-identity-confirmation input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.care-identity-confirmation > span { min-width: 0; display: grid; gap: 3px; }
.care-identity-confirmation strong { color: #dceaf0; font-size: 11px; }
.care-identity-confirmation small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.care-lookup-fields { min-width: 0; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 15px; margin: 0; padding: 18px; border: 0; }
.care-field { min-width: 0; display: grid; align-content: start; gap: 7px; color: #dce9f0; font-size: 12px; font-weight: 800; }
.care-field > span { line-height: 1.35; }
.care-field small { min-height: 32px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.care-field input,
.care-field select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.care-field input:focus,
.care-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,198,163,.08); outline: 0; }
.care-field-type { grid-column: span 3; }
.care-field-identifier { grid-column: span 5; }
.care-field-zone { grid-column: span 4; }
.care-field-device { grid-column: span 4; }
.care-field-impact { grid-column: span 4; }
.care-unified-lookup-form .care-field-identifier { grid-column: span 6; }
.care-unified-lookup-form .care-field-impact,
.care-unified-lookup-form .care-field-zone { grid-column: span 3; }
.care-lookup-form [data-care-device-field][hidden],
.care-lookup-form [data-care-zone-field][hidden] { display: none; }
.care-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--border); background: rgba(17,31,44,.52); }
.care-form-actions > span { max-width: 770px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.care-form-actions > span strong { color: #dce9ef; }
.care-form-actions .button { min-width: 200px; min-height: 44px; }
.care-result-panel { padding: 22px; border-color: rgba(88,168,255,.25); background: linear-gradient(150deg,rgba(15,29,41,.98),rgba(7,19,27,.96)); }
.care-result-panel.status-ok,
.care-result-panel.status-healthy,
.care-result-panel.status-clear { border-color: rgba(80,216,144,.34); }
.care-result-panel.status-attention,
.care-result-panel.status-partial,
.care-result-panel.status-conflict,
.care-result-panel.status-conflicting,
.care-result-panel.status-incomplete { border-color: rgba(244,189,87,.34); }
.care-result-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 18px; margin-bottom: 17px; }
.care-result-hero h2 { margin: 3px 0 6px; font-size: clamp(21px,2.4vw,28px); letter-spacing: -.65px; }
.care-result-hero p:not(.eyebrow) { max-width: 900px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.care-result-state { display: inline-flex; align-items: center; gap: 9px; min-height: 37px; padding: 7px 11px; color: #dbe8ee; border: 1px solid var(--border); border-radius: 10px; background: rgba(7,18,26,.62); font-size: 11px; font-weight: 850; white-space: nowrap; }
.care-pending-copy { margin-bottom: 15px; }
.care-signal-summary { margin-bottom: 14px; }
.care-signal-summary ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 19px; }
.care-outcome-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.care-outcome-card { position: relative; min-width: 0; min-height: 118px; display: flex; flex-direction: column; padding: 15px 16px 14px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(12,27,37,.72); }
.care-outcome-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--muted-2); }
.care-outcome-card.state-ok::before,
.care-outcome-card.state-healthy::before,
.care-outcome-card.state-clear::before,
.care-outcome-card.state-connected::before { background: var(--care-good); }
.care-outcome-card.state-attention::before,
.care-outcome-card.state-warning::before,
.care-outcome-card.state-partial::before,
.care-outcome-card.state-conflict::before { background: var(--care-warn); }
.care-outcome-card.state-critical::before,
.care-outcome-card.state-failed::before,
.care-outcome-card.state-down::before,
.care-outcome-card.state-disconnected::before { background: var(--care-bad); }
.care-outcome-card > span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.care-outcome-card > strong { margin: 10px 0 7px; color: #f3f8fb; font-size: 18px; letter-spacing: -.4px; overflow-wrap: anywhere; }
.care-outcome-card > small { margin-top: auto; color: var(--muted); font-size: 10px; line-height: 1.45; }
.care-source-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 10px; margin-bottom: 14px; }
.care-source-card { min-width: 0; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.5); }
.care-source-card > div:first-child { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.care-source-card > div:first-child > div { min-width: 0; display: grid; gap: 2px; }
.care-source-card > div:first-child strong { font-size: 12px; }
.care-source-card > div:first-child small { color: var(--muted); font-size: 9px; }
.care-source-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0; }
.care-source-card dl > div { min-width: 0; padding: 8px; border-radius: 8px; background: rgba(17,31,44,.48); }
.care-source-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .5px; }
.care-source-card dd { margin: 4px 0 0; font-size: 10px; font-weight: 800; overflow-wrap: anywhere; }
.care-investigation { margin: 18px 0 16px; padding: 17px; border: 1px solid rgba(88,168,255,.22); border-radius: 14px; background: linear-gradient(145deg,rgba(10,25,35,.84),rgba(7,18,26,.64)); }
.care-investigation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.care-investigation-heading h3 { margin: 3px 0 5px; font-size: 17px; letter-spacing: -.3px; }
.care-investigation-heading p:not(.eyebrow) { max-width: 820px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-stage-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.care-stage-legend span,
.care-stage-status { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(17,31,44,.6); color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .45px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.care-stage-legend .state-completed,
.care-investigation-stage.state-completed .care-stage-status { color: #87f2bc; border-color: rgba(80,216,144,.34); background: rgba(80,216,144,.08); }
.care-stage-legend .state-current,
.care-investigation-stage.state-current .care-stage-status { color: #9ecbff; border-color: rgba(88,168,255,.38); background: rgba(88,168,255,.1); }
.care-stage-legend .state-pending,
.care-investigation-stage.state-pending .care-stage-status { color: #ffd98a; border-color: rgba(244,189,87,.34); background: rgba(244,189,87,.08); }
.care-investigation-stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.care-investigation-stage { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 0 0 14px; }
.care-investigation-stage:last-child { padding-bottom: 0; }
.care-investigation-stage:not(:last-child)::before { content: ""; position: absolute; top: 29px; bottom: 0; left: 14px; width: 1px; background: var(--border); }
.care-stage-number { z-index: 1; width: 29px; height: 29px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border); border-radius: 9px; background: #0b1821; font-size: 9px; font-weight: 950; }
.care-investigation-stage.state-completed .care-stage-number { color: #87f2bc; border-color: rgba(80,216,144,.38); background: rgba(80,216,144,.09); }
.care-investigation-stage.state-current .care-stage-number { color: #9ecbff; border-color: rgba(88,168,255,.4); background: rgba(88,168,255,.1); box-shadow: 0 0 0 3px rgba(88,168,255,.05); }
.care-investigation-stage.state-pending .care-stage-number { color: #ffd98a; border-color: rgba(244,189,87,.36); background: rgba(244,189,87,.08); }
.care-stage-content { min-width: 0; padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.52); }
.care-stage-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.care-stage-title h4 { margin: 0; color: #edf6fa; font-size: 12px; }
.care-stage-content > p { margin: 6px 0 0; color: #aec2cc; font-size: 10px; line-height: 1.5; }
.care-stage-content details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.care-stage-content summary { width: max-content; max-width: 100%; color: var(--accent-strong); cursor: pointer; font-size: 9px; font-weight: 850; }
.care-stage-content details p { max-width: 980px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.care-investigation-boundary { display: grid; gap: 4px; margin-top: 15px; padding: 11px 13px; border-left: 3px solid var(--care-info); border-radius: 0 9px 9px 0; background: rgba(88,168,255,.06); }
.care-investigation-boundary strong { color: #cfe5ff; font-size: 10px; }
.care-investigation-boundary span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.care-evidence-disclosure { margin-top: 10px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(7,18,26,.42); }
.care-evidence-disclosure summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; cursor: pointer; list-style: none; }
.care-evidence-disclosure summary::-webkit-details-marker { display: none; }
.care-evidence-disclosure summary > span:first-child { min-width: 0; display: grid; gap: 3px; }
.care-evidence-disclosure summary strong { font-size: 12px; }
.care-evidence-disclosure summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.care-evidence-disclosure summary > span:last-child { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-strong); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); transition: transform .15s ease; }
.care-evidence-disclosure[open] summary > span:last-child { transform: rotate(45deg); }
.care-evidence-body { padding: 15px; border-top: 1px solid var(--border-soft); }
.care-record-grid,
.care-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.care-record-card,
.care-detail-card { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(13,27,38,.7); }
.care-record-card dl,
.care-detail-card dl { margin: 0; }
.care-record-card dl > div,
.care-detail-card dl > div { min-width: 0; display: grid; grid-template-columns: minmax(120px,.75fr) minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.care-record-card dl > div:last-child,
.care-detail-card dl > div:last-child { border-bottom: 0; }
.care-record-card dt,
.care-detail-card dt { color: var(--muted); font-size: 10px; }
.care-record-card dd,
.care-detail-card dd { min-width: 0; margin: 0; text-align: right; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.care-detail-card h3 { margin: 0 0 8px; font-size: 14px; }
.care-detail-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-device-list { display: grid; gap: 8px; }
.care-device-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(7,18,26,.54); }
.care-device-list strong { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.care-device-list span { color: var(--accent-strong); font-size: 10px; font-weight: 800; }
.care-device-list small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.care-issue-list { display: grid; gap: 10px; }
.care-issue-list > article { padding: 14px; border: 1px solid rgba(244,189,87,.22); border-radius: 11px; background: rgba(244,189,87,.04); }
.care-issue-list article > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.care-issue-list article > div:first-child strong { font-size: 12px; }
.care-issue-list p { margin: 10px 0 0; color: #cbdbe3; font-size: 11px; line-height: 1.5; }
.care-recommendation { display: grid; gap: 4px; margin-top: 10px; padding: 10px 11px; border-left: 3px solid var(--care-info); border-radius: 0 8px 8px 0; background: rgba(88,168,255,.07); }
.care-recommendation strong { color: #acd3ff; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.care-recommendation span { color: #d8e4ea; font-size: 11px; line-height: 1.5; }
.care-mini-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.care-mini-metrics > span { min-width: 0; display: grid; gap: 4px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.48); }
.care-mini-metrics strong { font-size: 17px; }
.care-mini-metrics small { color: var(--muted); font-size: 9px; }
.care-client-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 9px; }
.care-client-grid article { min-width: 0; padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(13,27,38,.68); }
.care-client-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.care-client-grid article > div strong { font-size: 11px; }
.care-client-grid article p { margin: 7px 0; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.care-client-grid dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 0; }
.care-client-grid dl > div { min-width: 0; display: flex; justify-content: space-between; gap: 7px; padding: 6px; border-radius: 7px; background: rgba(7,18,26,.54); }
.care-client-grid dt { color: var(--muted); font-size: 8px; }
.care-client-grid dd { margin: 0; font-size: 9px; font-weight: 800; overflow-wrap: anywhere; }
.care-next-step { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 14px; padding: 16px; border: 1px solid rgba(57,198,163,.23); border-radius: 12px; background: linear-gradient(110deg,rgba(57,198,163,.08),rgba(88,168,255,.04)); }
.care-next-step h3 { margin: 3px 0 5px; font-size: 16px; }
.care-next-step p:not(.eyebrow) { max-width: 900px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-handoff { min-width: 150px; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(7,18,26,.5); }
.care-handoff small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.care-handoff strong { color: var(--accent-strong); font-size: 11px; }
.care-escalation-panel { padding: 22px; }
.care-summary-field { display: grid; gap: 8px; color: #dce9ef; font-size: 11px; font-weight: 800; }
.care-summary-field textarea { width: 100%; min-height: 220px; resize: vertical; padding: 14px; color: #dce9ef; border: 1px solid var(--border); border-radius: 11px; background: #08131b; font-family: "SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size: 11px; line-height: 1.55; }
.care-summary-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 11px; }
.care-copy-status { color: var(--accent-strong); font-size: 10px; font-weight: 750; }
.care-summary-build-form { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.5); }
.care-summary-build-form p { max-width: 850px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-summary-build-form p strong { color: var(--text); }
.care-summary-build-form .button { flex: 0 0 auto; }
.care-summary-boundary { display: flex; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.care-summary-boundary strong { flex: 0 0 auto; color: #c9dce5; }
.care-cases-panel { padding: 22px; }
.empty-state > strong,
.empty-state > span { display: block; }
.empty-state > span { margin-top: 5px; line-height: 1.5; }
.care-case-create-form { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1fr) auto; margin-top: 12px; }
.care-case-create-form .care-identity-confirmation { margin: 0; }
.service-case-page { display: grid; gap: 18px; }
.service-case-page > .page-heading,
.service-case-page > .success-callout,
.service-case-page > .error-callout { margin-bottom: 0; }
.service-case-page td > small { display: block; margin-top: 4px; line-height: 1.4; }
.service-case-metrics { margin-bottom: 0; }
.service-case-definition-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.service-case-definition-grid > div { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(7,18,26,.52); }
.service-case-definition-grid dt { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.service-case-definition-grid dd { min-width: 0; margin: 6px 0 0; color: #edf6fa; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.service-case-definition-grid dd > small { display: block; margin-top: 5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
#engineering-evidence-downloads .service-case-definition-grid dd > code { display: block; margin-top: 8px; }
#engineering-evidence-downloads .service-case-definition-grid .button { width: 100%; margin-top: 10px; }
.service-case-checksum { display: inline-block; max-width: 190px; overflow: hidden; color: #a9c3d0; font-size: 9px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.service-case-checksum:focus,
.service-case-checksum:hover { max-width: none; overflow-wrap: anywhere; white-space: normal; }
.service-case-hash-summary { display: grid; grid-template-columns: minmax(0,2fr) minmax(220px,1fr); gap: 10px; margin: 14px 0 0; }
.service-case-hash-summary > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.43); }
.service-case-hash-summary dt { color: var(--muted); font-size: 8px; letter-spacing: .5px; text-transform: uppercase; }
.service-case-hash-summary dd { margin: 5px 0 0; font-size: 10px; overflow-wrap: anywhere; }
.service-case-action-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(7,18,26,.52); }
.service-case-action-form label { min-width: 220px; flex: 1 1 260px; display: grid; gap: 7px; color: #dce9ef; font-size: 10px; font-weight: 850; }
.service-case-action-form select { width: 100%; min-height: 42px; padding: 9px 35px 9px 11px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.service-case-action-form .button { min-height: 42px; }
.care-boundary-footer { display: grid; grid-template-columns: minmax(0,1fr) minmax(480px,.9fr); gap: 24px; align-items: center; padding: 20px 22px; border: 1px solid var(--border-soft); border-radius: 15px; background: rgba(8,19,27,.72); }
.care-boundary-footer h2 { margin: 3px 0 5px; font-size: 17px; }
.care-boundary-footer p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.care-boundary-footer dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.care-boundary-footer dl > div { padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(17,31,44,.43); }
.care-boundary-footer dt { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .55px; }
.care-boundary-footer dd { margin: 4px 0 0; font-size: 10px; font-weight: 800; }

@media (max-width: 1180px) {
  .care-case-create-form { grid-template-columns: 1fr; align-items: stretch; }
  .care-case-create-form .button { width: 100%; }
  .service-case-definition-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .care-lookup-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .care-field,
  .care-field-type,
  .care-field-identifier,
  .care-field-zone,
  .care-field-device,
  .care-field-impact,
  .care-unified-lookup-form .care-field-identifier,
  .care-unified-lookup-form .care-field-impact,
  .care-unified-lookup-form .care-field-zone { grid-column: auto; }
  .care-unified-lookup-form .care-field-identifier { grid-column: 1 / -1; }
  .care-outcome-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .care-boundary-footer { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .customer-care-heading,
  .care-section-heading,
  .care-result-hero { display: grid; grid-template-columns: 1fr; align-items: start; }
  .care-heading-assurance { width: 100%; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .care-identity-gate { grid-template-columns: auto minmax(0,1fr); }
  .care-identity-gate > .pill { grid-column: 2; justify-self: start; }
  .care-lookup-fields,
  .care-record-grid,
  .care-detail-grid { grid-template-columns: 1fr; }
  .care-form-actions,
  .care-summary-build-form { align-items: stretch; flex-direction: column; }
  .care-form-actions .button,
  .care-summary-build-form .button { width: 100%; }
  .care-result-state { justify-self: start; white-space: normal; }
  .care-investigation-heading { display: grid; grid-template-columns: 1fr; }
  .care-stage-legend { justify-content: flex-start; }
  .care-next-step { grid-template-columns: 1fr; }
  .care-mini-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-case-hash-summary { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .role-csr .page-content { padding: 18px 14px; }
  .care-heading-assurance { grid-template-columns: 1fr; }
  .care-identity-gate { grid-template-columns: 1fr; }
  .care-identity-gate > .pill { grid-column: auto; }
  .care-lookup-panel,
  .care-result-panel,
  .care-escalation-panel { padding: 16px; }
  .care-lookup-fields { padding: 14px; }
  .care-form-actions { padding: 13px 14px; }
  .care-outcome-grid,
  .care-source-card dl,
  .care-mini-metrics,
  .care-boundary-footer dl { grid-template-columns: 1fr; }
  .care-record-card dl > div,
  .care-detail-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .care-record-card dd,
  .care-detail-card dd { text-align: left; }
  .service-case-definition-grid { grid-template-columns: 1fr; }
  .service-case-action-form { align-items: stretch; flex-direction: column; }
  .service-case-action-form label,
  .service-case-action-form .button { width: 100%; min-width: 0; }
  .care-summary-boundary { display: grid; }
  .care-privacy-badge { display: none; }
}

@media (max-width: 430px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .topbar-actions { flex: 0 0 auto; gap: 5px; }
  .topbar-alarm-badge { display: none; }
  .topbar-actions .button.compact { padding-inline: 8px; }
  .csr-topbar-context { flex: 1 1 auto; gap: 7px; overflow: hidden; }
  .csr-topbar-context strong,
  .csr-topbar-context small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 360px) {
  .csr-topbar-context small { display: none; }
  .csr-topbar-context strong { font-size: 11px; }
  .account-link .avatar { width: 30px; height: 30px; }
}

/* Component borders and shadows remain useful secondary cues, but never
   suppress the explicit keyboard-focus outline. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.care-field input:focus-visible,
.care-field select:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}