:root {
  --ink: #07111d;
  --muted: #536170;
  --line: rgba(117, 151, 190, .34);
  --line-strong: rgba(75, 168, 255, .55);
  --bg: #ffffff;
  --bg-deep: #f3f8ff;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f6faff;
  --accent: #4ba8ff;
  --accent-strong: #7bc8ff;
  --accent-2: #21dd8c;
  --amber: #ffb66b;
  --red: #ff6b7a;
  --blue: #4ba8ff;
  --green: #21dd8c;
  --diagram-ink: #162029;
  --diagram-muted: #536170;
  --diagram-bg: #fbfcfd;
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

html {
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
}

button, input, select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr) 320px;
  min-height: 100vh;
}

.sidebar, .inspector {
  background: #f7f9fb;
  border-right: 1px solid var(--line);
  padding: 14px;
}

@media (min-width: 1051px) {
  .sidebar, .inspector {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
  }
}

.inspector {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #e6ebef;
  border-radius: 8px;
  background: #fff;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: white;
  background: var(--accent);
  border-radius: 6px;
  font-weight: 800;
}

h1, h2, p {
  margin: 0;
}

h1 { font-size: 18px; }
h2 { font-size: 14px; }
p, .brand p, .legend, .muted { color: var(--muted); }

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.workflow-nav {
  display: grid;
  gap: 12px;
}

.project-menu {
  position: relative;
  z-index: 8;
}

.project-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #d6dde4;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f7f9fb);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.project-menu summary::-webkit-details-marker {
  display: none;
}

.project-menu summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.project-menu summary::after {
  content: "v";
  color: var(--muted);
  font-size: 12px;
}

.project-menu[open] summary {
  border-color: var(--accent);
  background: #eef8f6;
  color: var(--accent-strong);
}

.project-menu[open] summary::after {
  content: "^";
}

.project-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 20;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #cfd8df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(22, 32, 41, .18);
}

.base-menu .project-menu-panel {
  position: static;
  margin-top: 5px;
  box-shadow: 0 8px 20px rgba(22, 32, 41, .10);
}

.workflow-section,
.tool-group {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e6ebef;
  border-radius: 8px;
  background: #fff;
}

.tool-group {
  margin-bottom: 22px;
}

.workflow-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid #edf0f3;
}

.workflow-heading span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.inline-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.exchange-setting {
  margin: 8px 0 10px;
}

.button-grid,
.palette-grid,
.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

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

.compact-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.icon-button {
  min-width: 0;
}

.wide-button {
  width: 100%;
}

.tool-group.compact label, .workflow-section.compact label, .field, .case-picker {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.tool-button, .primary-button, .danger-button, .file-button, .tabs button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  font-weight: 700;
}

.tool-button:hover, .tabs button:hover { border-color: #aeb8c2; }
.primary-button:hover { background: var(--accent-strong); }

.primary-button.held {
  border-color: rgba(192, 121, 19, .45);
  background: #fff7ed;
  color: var(--amber);
}

.primary-button.held:hover {
  background: #ffedd5;
}

.danger-button {
  border-color: #f1c7c3;
  color: var(--red);
}

.danger-button:hover {
  border-color: var(--red);
  background: #fff5f4;
}

.file-button {
  display: grid;
  place-items: center;
}

.file-button input { display: none; }

.attachment-status {
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3f7f8;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

input, select {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 8px;
  background: white;
}

.workspace {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 6px 14px;
  background: white;
  border-bottom: 1px solid var(--line);
}

.case-title-block {
  flex: 0 0 auto;
  min-width: 220px;
}

.case-title-line {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.case-title-line strong {
  overflow: hidden;
  max-width: 360px;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-bar {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.command-button {
  min-height: 28px;
  padding: 0 9px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 260px;
  padding: 0 10px;
  border: 1px solid #dbe3e8;
  border-radius: 999px;
  background: #f8fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill.status-solved {
  border-color: rgba(22, 130, 58, .28);
  background: #f0fdf4;
  color: var(--green);
}

.status-pill.status-unsolved,
.status-pill.status-held {
  border-color: rgba(192, 121, 19, .32);
  background: #fffbeb;
  color: var(--amber);
}

.status-pill.status-failed {
  border-color: rgba(180, 35, 24, .32);
  background: #fff5f4;
  color: var(--red);
}

.voltage-legend-bar {
  padding: 4px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8ee;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.legend {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px 10px;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.legend span {
  flex: 0 0 auto;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
}

.slack { background: var(--blue); }
.pv { background: var(--green); }
.pq { background: var(--muted); }
.alert { background: var(--red); }

.canvas-wrap {
  position: relative;
  height: var(--diagram-panel-height, 420px);
  min-height: 300px;
  padding: 14px 14px 28px;
}

#diagram {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}

.diagram-frame-tools {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 16px rgba(22, 32, 41, .08);
}

.diagram-height-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.diagram-height-control input {
  width: 118px;
  min-height: 18px;
  padding: 0;
}

.diagram-height-control output {
  min-width: 46px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.diagram-resize-handle {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 7px;
  height: 14px;
  z-index: 4;
  border-radius: 999px;
  cursor: ns-resize;
  touch-action: none;
}

.diagram-resize-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #cbd5df;
}

.diagram-resize-handle:hover::before,
.diagram-resize-handle:focus-visible::before {
  background: var(--accent);
}

#diagram.panning { cursor: grabbing; }

.diagram-pan-surface {
  fill: transparent;
  cursor: grab;
}

.diagram-status {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 42px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 12px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}

.diagram-footer {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}

.diagram-footer span {
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(216, 222, 229, .85);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
}

.diagram-status strong {
  color: var(--ink);
  font-size: 13px;
}

.diagram-status.solved {
  border-color: rgba(22, 130, 58, .3);
  background: #f0fdf4;
}

.diagram-status.solved strong { color: var(--green); }

.diagram-status.unsolved {
  border-color: rgba(192, 121, 19, .35);
  background: #fffbeb;
}

.diagram-status.unsolved strong { color: var(--amber); }

.diagram-status.held {
  border-color: rgba(192, 121, 19, .35);
  background: #fff7ed;
}

.diagram-status.held strong { color: var(--amber); }

.diagram-status.failed {
  border-color: rgba(180, 35, 24, .35);
  background: #fff5f4;
}

.diagram-status.failed strong { color: var(--red); }

.grid-line { stroke: #e8edf1; stroke-width: 1; pointer-events: none; }
.branch, .transformer-link { stroke-width: 4; fill: none; }
.branch { cursor: grab; }
.branch:active { cursor: grabbing; }
.branch.selected {
  filter: drop-shadow(0 0 5px rgba(15, 118, 110, .55));
}
.branch.hot, .transformer-link.hot {
  filter: drop-shadow(0 0 6px rgba(180, 35, 24, .85));
}
.equipment-lead {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.voltage-mismatch {
  filter: drop-shadow(0 0 7px rgba(245, 158, 11, .95));
}
.branch-label { font-size: 12px; fill: var(--muted); }
.transformer-data-label {
  font-size: 10.8px;
  fill: #334155;
  paint-order: stroke;
  stroke: #fbfcfd;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.branch-flow-label {
  font-size: 10.5px;
  fill: #334155;
  paint-order: stroke;
  stroke: #fbfcfd;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.transformer-symbol {
  fill: #fbfcfd;
  stroke-width: 3;
  cursor: pointer;
}
.transformer-symbol.selected {
  filter: drop-shadow(0 0 5px rgba(15, 118, 110, .55));
}
.busbar { stroke-width: 7; stroke-linecap: round; cursor: grab; }
.busbar.selected { filter: drop-shadow(0 0 5px rgba(15, 118, 110, .55)); }
.bus-resize-handle {
  fill: #ffffff;
  stroke: var(--accent);
  stroke-width: 2;
}
.bus-resize-handle.horizontal { cursor: ew-resize; }
.bus-resize-handle.vertical { cursor: ns-resize; }
.bus-resize-handle:hover { fill: #e8f7f4; }
.bus-label {
  font-size: 17px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: #fbfcfd;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.generator-symbol-text {
  font-size: 14px;
  font-weight: 700;
  fill: var(--ink);
  pointer-events: none;
  user-select: none;
}
.result-label { font-size: 12px; fill: var(--muted); }
.bus-readout { font-size: 11.5px; fill: #334155; }
.equipment-label {
  font-size: 11.5px;
  paint-order: stroke;
  stroke: #fbfcfd;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.draggable-label {
  cursor: move;
  user-select: none;
}
.draggable-label:hover {
  filter: drop-shadow(0 0 3px rgba(15, 118, 110, .35));
}
.load-symbol, .gen-symbol { fill: white; stroke-width: 2; cursor: pointer; }
.load-symbol.selected,
.gen-symbol.selected {
  filter: drop-shadow(0 0 5px rgba(15, 118, 110, .55));
}
.utility-source-symbol {
  fill: white;
  stroke-width: 2.4;
  cursor: grab;
}
.utility-source-symbol.selected {
  filter: drop-shadow(0 0 5px rgba(37, 99, 235, .5));
}
.utility-source-wave,
.utility-source-ground {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.source-data-label {
  font-size: 11.5px;
  fill: #334155;
  paint-order: stroke;
  stroke: #fbfcfd;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.capacitor-symbol {
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
}
.capacitor-symbol.selected {
  filter: drop-shadow(0 0 5px rgba(37, 99, 235, .5));
}
.cap-on { fill: var(--blue); }
.cap-off { fill: var(--muted); }
.out-of-service {
  opacity: .52;
}
.out-of-service .branch,
.out-of-service.transformer-link,
.out-of-service .equipment-lead,
.out-of-service .transformer-symbol,
.out-of-service .load-symbol,
.out-of-service .gen-symbol,
.out-of-service .capacitor-symbol {
  stroke: #7d8794 !important;
  stroke-dasharray: 8 5;
  filter: none;
}
.out-of-service .equipment-label,
.out-of-service .branch-label,
.out-of-service .transformer-data-label {
  fill: #7d8794;
}

.bottom-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 0 14px 14px;
}

.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(22, 32, 41, .05);
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.compact-heading {
  margin-bottom: 10px;
}

.panel-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tabs button {
  min-height: 30px;
  padding: 0 10px;
}

.tabs .active {
  color: white;
  background: var(--ink);
  border-color: var(--ink);
}

.table-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fbfcfd;
}

.table-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.table-focus-toggle {
  align-self: stretch;
  padding: 7px 8px;
  border: 1px solid #e5ebf0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink) !important;
  font-weight: 700;
}

.table-wrap {
  overflow: auto;
  max-height: 320px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: #fff;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8fafb;
  box-shadow: 0 1px 0 var(--line), 0 3px 8px rgba(22, 32, 41, .08);
}

th, td {
  border-bottom: 1px solid #edf0f3;
  padding: 8px 7px;
  text-align: left;
  white-space: nowrap;
}

tbody tr:hover td {
  background: #f8fbfb;
}

tr.selected-row td {
  background: #e9f7f5;
}

td input, td select {
  min-height: 28px;
  min-width: 76px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inspector-study-panel {
  margin-top: 12px;
  padding: 9px;
}

.inspector .summary-grid {
  grid-template-columns: 1fr;
  gap: 5px;
}

.inspector-study-panel .panel-heading {
  margin-bottom: 7px;
}

.inspector-study-panel .metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  min-width: 0;
  gap: 1px 5px;
  padding: 5px 7px;
}

.inspector-study-panel .metric span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.inspector-study-panel .metric span:first-child {
  font-size: 11px;
}

.inspector-study-panel .metric span:last-child {
  display: block;
  grid-column: 1 / -1;
  font-size: 10px;
  white-space: normal;
}

.inspector-study-panel .metric strong {
  display: block;
  justify-self: end;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.15;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.metric {
  border: 1px solid #edf0f3;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

.metric strong {
  display: block;
  font-size: 18px;
}

.inspector h2 {
  margin: 0;
}

.inspector-rail-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #e6ebef;
  border-radius: 8px;
  background: #fff;
}

.inspector-summary {
  display: grid;
  gap: 12px;
}

.inspector-selected-kind {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(15, 118, 110, .22);
  border-radius: 999px;
  background: #eef8f6;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.inspector-summary h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.inspector-summary p {
  font-size: 12px;
}

.inspector-summary-list {
  display: grid;
  gap: 8px;
}

.inspector-summary-list div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #ffffff;
}

.inspector-summary-list span {
  color: var(--muted);
  font-size: 11px;
}

.inspector-summary-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.inspector-form, .inspector-field-grid {
  display: grid;
  gap: 10px;
}

.inspector-dialog {
  position: fixed;
  inset: 0;
  z-index: 21;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(22, 32, 41, .38);
}

.inspector-card {
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(22, 32, 41, .22);
  overflow: hidden;
}

.inspector-dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.inspector-dialog-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.inspector-dialog-body {
  overflow: auto;
  padding: 14px 16px 16px;
  background: #f8fafb;
}

.inspector-category-list {
  display: grid;
  gap: 12px;
}

.inspector-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.inspector-category summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.inspector-category summary strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.inspector-field-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  padding: 12px;
  border-top: 1px solid #edf0f3;
}

.inspector-field-grid .hint {
  grid-column: 1 / -1;
  margin-top: 0;
}

.dyr-parameter-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.dyr-parameter-note {
  color: var(--muted);
  font-size: 12px;
}

.dyr-parameter-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fbfcfd;
}

.dyr-parameter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 12px;
}

.dyr-parameter-heading span {
  color: var(--muted);
  font-weight: 600;
}

.dyr-param-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 8px;
}

.dyr-param-grid.dense {
  max-height: 340px;
  overflow: auto;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  padding-right: 2px;
}

.dyr-param-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.dyr-param-field input {
  grid-column: 1 / -1;
  min-height: 30px;
  font-family: Consolas, "Courier New", monospace;
}

.dyr-param-index {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.dyr-param-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hint {
  margin-top: 12px;
  padding: 10px;
  border-left: 3px solid var(--accent);
  background: #eef8f6;
  color: #315b56;
  font-size: 12px;
  line-height: 1.45;
}

.export-dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(22, 32, 41, .42);
}

.export-card {
  width: min(820px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(22, 32, 41, .22);
  overflow: auto;
}

.export-header, .export-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.export-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

#exportContent {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.export-actions {
  justify-content: flex-end;
}

.study-dialog {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(22, 32, 41, .34);
}

.study-card {
  width: min(980px, 100%);
  max-height: none;
  display: grid;
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(22, 32, 41, .22);
  overflow: visible;
}

.study-dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.study-dialog-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.short-circuit-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.checkbox-field {
  align-content: center;
  grid-template-columns: auto 1fr;
  gap: 8px;
  min-height: 34px;
}

.checkbox-field input {
  width: auto;
  min-height: 0;
}

.short-circuit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.short-circuit-results {
  max-height: none;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.short-circuit-results .selected-row td {
  background: #fff7ed;
}

.short-circuit-duty {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.short-circuit-duty-pass {
  color: #166534;
  background: #dcfce7;
}

.short-circuit-duty-over {
  color: #9f1239;
  background: #ffe4e6;
}

.short-circuit-duty-missing {
  color: #475569;
  background: #eef2f7;
}

.sequence-quality {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.sequence-quality-manufacturer,
.sequence-quality-calculated {
  color: #166534;
  background: #dcfce7;
}

.sequence-quality-estimated {
  color: #854d0e;
  background: #fef3c7;
}

.sequence-quality-missing {
  color: #9f1239;
  background: #ffe4e6;
}

.psse-readiness-card {
  width: min(1120px, 100%);
  grid-template-rows: auto;
  grid-auto-rows: auto;
}

.psse-readiness-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.submission-contract {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.submission-contract:empty {
  display: none;
}

.submission-contract-heading,
.submission-contract-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.submission-contract-heading > div {
  justify-content: flex-start;
}

.submission-contract-heading span,
.submission-contract-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.submission-contract-heading code {
  color: var(--muted);
  font-size: 11px;
}

.submission-ready {
  color: #08784c;
}

.submission-verification {
  color: #9b5c00;
}

.submission-blocked {
  color: #b42336;
}

.submission-contract-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.submission-contract-metrics > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
  border-left: 1px solid var(--line);
}

.submission-contract-metrics > div:first-child {
  border-left: 0;
}

.submission-contract-metrics strong {
  font-size: 13px;
}

.submission-contract-metrics em,
.submission-contract-checks em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.submission-contract-checks {
  display: grid;
}

.submission-contract-checks > div {
  display: grid;
  grid-template-columns: 58px minmax(150px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.submission-contract-checks > div:last-child {
  border-bottom: 0;
}

.submission-contract-checks > div > span {
  font-size: 10px;
  font-weight: 800;
}

.submission-contract-checks .pass > span {
  color: #08784c;
}

.submission-contract-checks .verification > span {
  color: #9b5c00;
}

.submission-contract-checks .blocker > span {
  color: #b42336;
}

.submission-contract-checks strong {
  font-size: 12px;
}

.submission-contract-issues {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 10px;
  color: #7a3e00;
  font-size: 11px;
}
.psse-readiness-fixes {
  display: grid;
  gap: 10px;
}

.psse-readiness-fix-heading,
.psse-readiness-fix-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fbfcfd;
}

.psse-readiness-fix-heading h3 {
  margin: 0;
  font-size: 14px;
}

.psse-readiness-fix-heading span,
.psse-readiness-fix-empty span {
  color: var(--muted);
  font-size: 12px;
}

.psse-readiness-fix-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.psse-readiness-fix-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fff;
}

.psse-readiness-fix-label {
  display: grid;
  gap: 4px;
  align-content: start;
}

.psse-readiness-fix-label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.psse-readiness-fix-label strong {
  font-size: 13px;
}

.psse-readiness-fix-label em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.psse-readiness-fix-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 8px;
}

.psse-readiness-results {
  max-height: 440px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.psse-readiness-row td {
  vertical-align: top;
}

.psse-readiness-row.psse-blocker td {
  background: #fff1f2;
}

.psse-readiness-row.psse-warning td {
  background: #fffbeb;
}

.psse-readiness-row.psse-pass td {
  background: #f0fdf4;
}

.psse-readiness-badge,
.psse-status-blocked,
.psse-status-warning,
.psse-status-ready {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.psse-blocker,
.psse-status-blocked {
  color: #9f1239;
  background: #ffe4e6;
}

.psse-warning,
.psse-status-warning {
  color: #92400e;
  background: #fef3c7;
}

.psse-note {
  color: #475569;
  background: #eef2f7;
}

.psse-pass,
.psse-status-ready {
  color: #166534;
  background: #dcfce7;
}

.psse-readiness-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.psse-readiness-category {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.psse-readiness-category span {
  color: var(--muted);
}

.validation-bench-details,
.validation-detail-section {
  display: grid;
  gap: 12px;
}

.validation-bench-comparison:empty {
  display: none;
}

.validation-bench-comparison,
.validation-tolerances {
  padding: 10px 12px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fbfcfd;
}

.validation-bench-comparison h3,
.validation-tolerances h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.validation-comparison-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.validation-comparison-summary div,
.validation-tolerance-grid div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #edf0f3;
  border-radius: 5px;
  background: #fff;
}

.validation-comparison-summary span,
.validation-tolerance-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.validation-tolerance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.validation-detail-section h3 {
  margin: 0;
  font-size: 14px;
}

.validation-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.validation-case-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fff;
}

.validation-case-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.validation-check-list {
  display: grid;
  gap: 6px;
}

.validation-check-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.validation-check-row span {
  font-weight: 800;
}

.validation-check-row em {
  grid-column: 2;
  color: var(--muted);
  font-style: normal;
}

.dynamic-card {
  width: min(1120px, 100%);
  grid-template-rows: auto;
  grid-auto-rows: auto;
}

.dynamic-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.dynamic-controls .needs-run {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}

.dynamic-plot-picker {
  grid-column: span 2;
  min-width: 0;
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid #d7dde3;
  border-radius: 6px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  align-self: stretch;
}

.dynamic-plot-picker legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.dynamic-plot-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
  white-space: normal;
}

.dynamic-plot-picker input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}

.dynamic-dirty-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
}

.dynamic-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
}

.dynamic-validation-popup {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .28);
}

.dynamic-validation-popup.hidden {
  display: none;
}

.dynamic-validation-card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.dynamic-validation-card h2 {
  margin: 0;
  color: #991b1b;
  font-size: 18px;
}

.dynamic-validation-card p {
  margin: 0;
  color: #374151;
}

.dynamic-event-panel {
  border: 1px solid #edf0f3;
  border-radius: 6px;
  padding: 10px;
  background: #fbfcfd;
}

.dynamic-event-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dynamic-event-heading h3 {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}

.dynamic-event-table-wrap {
  max-height: 190px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.dynamic-event-table input,
.dynamic-event-table select {
  min-width: 96px;
}

.dynamic-event-table input:disabled {
  color: #9aa3ad;
  background: #eef2f5;
}

.dynamic-latched-cell {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: #64748b;
  font-size: 12px;
}

.mini-button {
  padding: 6px 8px;
  min-height: 30px;
  font-size: 12px;
}

.dynamic-init-report {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fff;
}

.dynamic-channel-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fff;
}

.dynamic-channel-list:empty {
  display: none;
}

.dynamic-channel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dynamic-channel-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.dynamic-channel-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dynamic-channel-list .table-wrap {
  max-height: 150px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.dynamic-channel-list table {
  min-width: 760px;
}

.dynamic-channel-list th,
.dynamic-channel-list td {
  font-size: 11px;
  white-space: nowrap;
}

.dynamic-init-report:empty {
  display: none;
}

.dynamic-init-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dynamic-init-report h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.dynamic-init-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dynamic-init-warnings {
  margin: 0;
  padding: 8px 10px 8px 24px;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
}

.dynamic-init-report .table-wrap {
  max-height: 175px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.dynamic-init-report table {
  min-width: 900px;
}

.dynamic-init-report th,
.dynamic-init-report td {
  font-size: 11px;
  white-space: nowrap;
}

.init-status-ok {
  color: #166534;
  font-weight: 800;
}

.init-status-warn {
  color: #92400e;
  font-weight: 800;
}

.init-status-off {
  color: #64748b;
  font-weight: 800;
}

.dynamic-chart-wrap {
  height: 360px;
  min-height: 360px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
  background: #fbfcfd;
  overflow: hidden;
}

#dynamicChart {
  display: block;
  width: 100%;
  height: 360px;
  min-height: 360px;
}

.dynamic-axis {
  stroke: #83909b;
  stroke-width: 1;
}

.dynamic-grid {
  stroke: #e6ebef;
  stroke-width: 1;
}

.dynamic-plot {
  fill: none;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.dynamic-series-label {
  font-size: 11px;
  font-weight: 800;
}

.dynamic-scale-swatch {
  stroke-width: 2.6;
  stroke-linecap: round;
}

.dynamic-event-band {
  fill: #fee2e2;
  opacity: .72;
}

.dynamic-event-band.switch-off,
.dynamic-event-band.switch-on {
  fill: #dbeafe;
}

.dynamic-event-band.swing {
  fill: #fef3c7;
}

.dynamic-point-label {
  font-size: 11px;
  fill: var(--muted);
}

.dynamic-results {
  max-height: 150px;
  border: 1px solid #edf0f3;
  border-radius: 6px;
}

.dynamic-event-list {
  margin: 8px 12px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Carisbrooke UI theme. Voltage color assignments are handled in app.js/index.html and remain unchanged. */
.app-shell {
  background: linear-gradient(180deg, rgba(8, 18, 31, .98), rgba(3, 9, 21, .98));
}

.sidebar,
.inspector {
  background: linear-gradient(180deg, rgba(7, 17, 29, .98), rgba(4, 10, 18, .98));
  border-color: var(--line);
}

.brand,
.workflow-section,
.tool-group,
.project-menu-panel,
.panel,
.inspector-rail-heading,
.metric,
.inspector-summary-list div,
.inspector-category,
.dyr-parameter-block,
.export-card,
.study-card,
.psse-readiness-fix-heading,
.psse-readiness-fix-empty,
.psse-readiness-fix-row,
.psse-readiness-category,
.validation-case-card,
.dynamic-plot-picker,
.dynamic-event-panel,
.dynamic-init-report,
.dynamic-channel-list {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

.brand {
  background: linear-gradient(135deg, rgba(8, 18, 31, .98), rgba(18, 34, 54, .84));
}

.brand-mark {
  background: linear-gradient(135deg, #6457ff 0%, var(--accent) 48%, var(--accent-2) 100%);
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(75, 168, 255, .11);
}

.project-menu summary {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(18, 34, 54, .88), rgba(8, 18, 31, .92));
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}

.project-menu[open] summary {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(75, 168, 255, .18), rgba(33, 221, 140, .08));
  color: var(--accent-strong);
}

.workflow-heading {
  border-bottom-color: var(--line);
}

.tool-button,
.file-button,
.tabs button,
.table-focus-toggle,
.mini-button {
  border-color: var(--line);
  background: rgba(18, 34, 54, .74);
  color: var(--ink);
}

.tool-button:hover,
.tabs button:hover,
.file-button:hover,
.table-focus-toggle:hover {
  border-color: var(--accent-strong);
  background: rgba(75, 168, 255, .14);
}

.primary-button {
  border-color: rgba(123, 200, 255, .65);
  background: linear-gradient(135deg, var(--accent), #6457ff);
  color: #ffffff;
}

.primary-button:hover {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
}

.primary-button.held {
  border-color: rgba(255, 182, 107, .55);
  background: rgba(255, 182, 107, .14);
  color: var(--amber);
}

.primary-button.held:hover {
  background: rgba(255, 182, 107, .22);
}

.danger-button {
  border-color: rgba(255, 107, 122, .42);
  background: rgba(255, 107, 122, .08);
  color: #ff9aa6;
}

.danger-button:hover {
  border-color: var(--red);
  background: rgba(255, 107, 122, .16);
}

input,
select,
textarea {
  border-color: var(--line);
  background: rgba(3, 9, 21, .72);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(123, 200, 255, .72);
  outline-offset: 2px;
}

::placeholder {
  color: rgba(175, 192, 213, .68);
}

.attachment-status,
.table-toolbar,
.inspector-dialog-body,
.dyr-param-index,
.short-circuit-results,
.psse-readiness-results,
.dynamic-results,
.dynamic-chart-wrap,
.dynamic-event-table input:disabled {
  border-color: var(--line);
  background: rgba(18, 34, 54, .54);
  color: var(--muted);
}

.topbar,
.voltage-legend-bar {
  background: rgba(4, 10, 18, .92);
  border-color: var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

.version-badge,
.status-pill,
.diagram-footer span {
  border-color: var(--line);
  background: rgba(18, 34, 54, .76);
  color: var(--accent-strong);
}

.tabs .active {
  border-color: var(--accent);
  background: rgba(75, 168, 255, .18);
  color: var(--accent-strong);
}

.status-pill.status-solved,
.diagram-status.solved {
  border-color: rgba(33, 221, 140, .36);
  background: rgba(33, 221, 140, .12);
  color: var(--green);
}

.status-pill.status-unsolved,
.status-pill.status-held,
.diagram-status.unsolved,
.diagram-status.held {
  border-color: rgba(255, 182, 107, .38);
  background: rgba(255, 182, 107, .13);
  color: var(--amber);
}

.status-pill.status-failed,
.diagram-status.failed {
  border-color: rgba(255, 107, 122, .42);
  background: rgba(255, 107, 122, .12);
  color: var(--red);
}

.canvas-wrap {
  background: linear-gradient(180deg, rgba(8, 18, 31, .78), rgba(3, 9, 21, .9));
}

#diagram,
.dynamic-chart-wrap {
  background: var(--diagram-bg);
  border-color: rgba(117, 151, 190, .42);
}

.diagram-frame-tools,
.diagram-status {
  border-color: rgba(117, 151, 190, .42);
  background: rgba(248, 250, 252, .94);
  color: var(--diagram-muted);
  box-shadow: 0 10px 26px rgba(3, 9, 21, .16);
}

.diagram-status strong,
.diagram-height-control output {
  color: var(--diagram-ink);
}

.diagram-footer {
  color: var(--diagram-muted);
}

.diagram-footer span {
  background: rgba(248, 250, 252, .92);
  color: var(--diagram-muted);
}

.diagram-resize-handle::before {
  background: rgba(123, 200, 255, .55);
}

.grid-line {
  stroke: #e8edf1;
}

.branch-label,
.result-label,
.dynamic-point-label {
  fill: var(--diagram-muted);
}

.bus-label,
.generator-symbol-text,
.bus-readout,
.source-data-label,
.branch-flow-label,
.transformer-data-label {
  fill: var(--diagram-ink);
  stroke: var(--diagram-bg);
}

.equipment-label {
  stroke: var(--diagram-bg);
}

.transformer-symbol,
.load-symbol,
.gen-symbol,
.utility-source-symbol {
  fill: var(--diagram-bg);
}

.bus-resize-handle {
  fill: var(--diagram-bg);
  stroke: var(--accent);
}

.bus-resize-handle:hover {
  fill: #e8f7f4;
}

.branch.selected,
.transformer-symbol.selected,
.busbar.selected,
.draggable-label:hover,
.load-symbol.selected,
.gen-symbol.selected {
  filter: drop-shadow(0 0 6px rgba(123, 200, 255, .72));
}

.utility-source-symbol.selected,
.capacitor-symbol.selected {
  filter: drop-shadow(0 0 6px rgba(33, 221, 140, .6));
}

.bottom-panels {
  background: rgba(3, 9, 21, .9);
}

table {
  background: rgba(8, 18, 31, .82);
  color: var(--ink);
}

thead th {
  background: rgba(18, 34, 54, .98);
  color: var(--accent-strong);
  box-shadow: 0 1px 0 var(--line), 0 5px 12px rgba(0, 0, 0, .16);
}

th,
td {
  border-bottom-color: var(--line);
}

tbody tr:hover td {
  background: rgba(75, 168, 255, .08);
}

tr.selected-row td {
  background: rgba(33, 221, 140, .12);
}

.table-wrap,
.short-circuit-results,
.psse-readiness-results,
.dynamic-results,
.dynamic-event-table-wrap,
.dynamic-channel-list .table-wrap,
.dynamic-init-report .table-wrap {
  border-color: var(--line);
  background: rgba(8, 18, 31, .74);
}

.inspector-selected-kind,
.hint {
  border-color: rgba(33, 221, 140, .34);
  background: rgba(33, 221, 140, .10);
  color: #a9f5d2;
}

.inspector-dialog,
.export-dialog,
.study-dialog,
.dynamic-validation-popup {
  background: rgba(3, 9, 21, .72);
}

.inspector-dialog-header,
.inspector-category summary {
  background: rgba(8, 18, 31, .96);
  color: var(--ink);
}

.inspector-field-grid,
.inspector-category summary,
.inspector-dialog-header {
  border-color: var(--line);
}

.dynamic-validation-card {
  border-color: rgba(255, 107, 122, .44);
  background: var(--panel-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.dynamic-validation-card h2 {
  color: #ff9aa6;
}

.dynamic-validation-card p {
  color: var(--muted);
}

.dynamic-dirty-note,
.dynamic-init-warnings {
  border-color: rgba(255, 182, 107, .42);
  background: rgba(255, 182, 107, .12);
  color: var(--amber);
}

.dynamic-error {
  border-color: rgba(255, 107, 122, .42);
  background: rgba(255, 107, 122, .12);
  color: #ff9aa6;
}

.short-circuit-duty-pass,
.sequence-quality-manufacturer,
.sequence-quality-calculated,
.psse-pass,
.psse-status-ready {
  color: #a9f5d2;
  background: rgba(33, 221, 140, .16);
}

.short-circuit-duty-over,
.sequence-quality-missing,
.psse-blocker,
.psse-status-blocked {
  color: #ffb1ba;
  background: rgba(255, 107, 122, .16);
}

.short-circuit-duty-missing,
.psse-note {
  color: var(--muted);
  background: rgba(175, 192, 213, .13);
}

.sequence-quality-estimated,
.psse-warning,
.psse-status-warning {
  color: var(--amber);
  background: rgba(255, 182, 107, .16);
}

.short-circuit-results .selected-row td {
  background: rgba(255, 182, 107, .10);
}

.psse-readiness-row.psse-blocker td {
  background: rgba(255, 107, 122, .09);
}

.psse-readiness-row.psse-warning td {
  background: rgba(255, 182, 107, .09);
}

.psse-readiness-row.psse-pass td {
  background: rgba(33, 221, 140, .08);
}

.dynamic-event-band {
  fill: rgba(255, 107, 122, .24);
}

.dynamic-event-band.switch-off,
.dynamic-event-band.switch-on {
  fill: rgba(75, 168, 255, .22);
}

.dynamic-event-band.swing {
  fill: rgba(255, 182, 107, .26);
}

.dynamic-axis {
  stroke: #536170;
}

.dynamic-grid {
  stroke: #dce5ee;
}

.sidebar {
  padding: 10px;
}

.sidebar .brand {
  gap: 9px;
  margin-bottom: 10px;
  padding: 7px;
}

.sidebar .brand-mark {
  width: 38px;
  height: 38px;
}

.sidebar .workflow-nav {
  gap: 8px;
}

.sidebar .workflow-section,
.sidebar .tool-group {
  gap: 6px;
  padding: 8px;
}

.sidebar .workflow-heading {
  padding-bottom: 4px;
}

.sidebar .button-grid,
.sidebar .palette-grid,
.sidebar .export-grid,
.sidebar .inline-tools {
  gap: 5px;
}

.sidebar .tool-button,
.sidebar .primary-button,
.sidebar .danger-button,
.sidebar .file-button {
  min-height: 31px;
  padding: 4px 8px;
}

.sidebar .compact-buttons .tool-button {
  padding-inline: 5px;
}

.sidebar .project-menu summary {
  min-height: 32px;
  padding: 0 9px;
}

.sidebar .project-menu-panel {
  gap: 6px;
  padding: 8px;
}

.sidebar .attachment-status {
  min-height: 28px;
  padding: 5px 7px;
}

/* Light Carisbrooke workspace: keep brand accents, use white surfaces. */
.app-shell,
.sidebar,
.inspector,
.topbar,
.voltage-legend-bar,
.bottom-panels,
.canvas-wrap {
  background: #ffffff;
}

.sidebar,
.inspector,
.topbar,
.voltage-legend-bar {
  border-color: var(--line);
}

.brand,
.workflow-section,
.tool-group,
.project-menu-panel,
.panel,
.inspector-rail-heading,
.metric,
.inspector-summary-list div,
.inspector-category,
.dyr-parameter-block,
.export-card,
.study-card,
.psse-readiness-fix-heading,
.psse-readiness-fix-empty,
.psse-readiness-fix-row,
.psse-readiness-category,
.validation-case-card,
.dynamic-plot-picker,
.dynamic-event-panel,
.dynamic-init-report,
.dynamic-channel-list,
.dynamic-validation-card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(7, 17, 29, .08);
}

.brand {
  background: linear-gradient(135deg, #ffffff, #f4f9ff);
}

.project-menu summary,
.tool-button,
.file-button,
.tabs button,
.table-focus-toggle,
.mini-button {
  background: #f8fbff;
  color: var(--ink);
  border-color: var(--line);
}

.project-menu[open] summary,
.tabs .active {
  background: linear-gradient(180deg, rgba(75, 168, 255, .16), rgba(33, 221, 140, .08));
  color: #105f94;
  border-color: var(--line-strong);
}

.tool-button:hover,
.tabs button:hover,
.file-button:hover,
.table-focus-toggle:hover {
  background: #eef7ff;
  border-color: var(--accent);
}

input,
select,
textarea {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

::placeholder {
  color: #738296;
}

.attachment-status,
.table-toolbar,
.inspector-dialog-body,
.dyr-param-index,
.short-circuit-results,
.psse-readiness-results,
.dynamic-results,
.dynamic-event-table input:disabled,
.table-wrap,
.dynamic-event-table-wrap,
.dynamic-channel-list .table-wrap,
.dynamic-init-report .table-wrap {
  background: #f8fbff;
  color: var(--muted);
  border-color: var(--line);
}

.version-badge,
.status-pill {
  background: #eef7ff;
  color: #105f94;
  border-color: var(--line);
}

.diagram-footer span,
.diagram-frame-tools,
.diagram-status {
  background: rgba(255, 255, 255, .94);
  color: var(--diagram-muted);
  border-color: rgba(117, 151, 190, .42);
}

#diagram,
.dynamic-chart-wrap {
  background: var(--diagram-bg);
}

table {
  background: #ffffff;
  color: var(--ink);
}

thead th {
  background: #eef7ff;
  color: #105f94;
  box-shadow: 0 1px 0 var(--line), 0 3px 8px rgba(7, 17, 29, .08);
}

tbody tr:hover td {
  background: #f4fbff;
}

tr.selected-row td {
  background: rgba(33, 221, 140, .14);
}

.inspector-selected-kind,
.hint {
  background: rgba(33, 221, 140, .10);
  color: #0f5f41;
  border-color: rgba(33, 221, 140, .36);
}

.inspector-dialog,
.export-dialog,
.study-dialog,
.dynamic-validation-popup {
  background: rgba(7, 17, 29, .34);
}

.inspector-dialog-header,
.inspector-category summary {
  background: #ffffff;
  color: var(--ink);
}

.dynamic-validation-card h2 {
  color: #b42318;
}

.dynamic-validation-card p {
  color: var(--muted);
}

.dynamic-dirty-note,
.dynamic-init-warnings,
.sequence-quality-estimated,
.psse-warning,
.psse-status-warning {
  background: #fff7ed;
  color: #9a5b16;
}

.dynamic-error,
.short-circuit-duty-over,
.sequence-quality-missing,
.psse-blocker,
.psse-status-blocked {
  background: #fff1f2;
  color: #a0182b;
}

.short-circuit-duty-pass,
.sequence-quality-manufacturer,
.sequence-quality-calculated,
.psse-pass,
.psse-status-ready {
  background: #e9fbf3;
  color: #0f5f41;
}

.short-circuit-duty-missing,
.psse-note {
  background: #eef2f7;
  color: #475569;
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .bottom-panels { grid-template-columns: 1fr; }
  .inspector-field-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .psse-readiness-fix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .submission-contract-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .command-bar { justify-content: flex-start; }
  .table-toolbar { grid-template-columns: minmax(180px, 1fr) 140px; }
  .table-focus-toggle { grid-column: 1 / -1; }
  .short-circuit-controls, .short-circuit-summary, .dynamic-controls, .psse-readiness-details, .validation-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .topbar, .legend, .panel-heading, .command-bar { align-items: flex-start; flex-direction: column; }
  .case-title-line { align-items: flex-start; flex-direction: column; gap: 6px; }
  .command-button, .status-pill { width: 100%; justify-content: center; }
  .table-toolbar { grid-template-columns: 1fr; }
  .table-focus-toggle { grid-column: auto; }
  .study-dialog, .inspector-dialog { padding: 10px; }
  .inspector-card { max-height: calc(100vh - 20px); }
  .inspector-dialog-header { align-items: flex-start; flex-direction: column; }
  .inspector-field-grid { grid-template-columns: 1fr; }
  .psse-readiness-fix-heading,
  .psse-readiness-fix-empty,
  .psse-readiness-fix-row { grid-template-columns: 1fr; }
  .psse-readiness-fix-heading,
  .psse-readiness-fix-empty { align-items: flex-start; flex-direction: column; }
  .psse-readiness-fix-grid { grid-template-columns: 1fr; }
  .psse-readiness-actions { flex-wrap: wrap; justify-content: flex-start; }
  .submission-contract-heading { align-items: flex-start; flex-direction: column; }
  .submission-contract-metrics { grid-template-columns: 1fr; }
  .submission-contract-metrics > div { border-left: 0; border-top: 1px solid var(--line); }
  .submission-contract-checks > div, .submission-contract-issues { grid-template-columns: 1fr; }
  .short-circuit-controls, .short-circuit-summary, .dynamic-controls, .psse-readiness-details, .validation-case-grid { grid-template-columns: 1fr; }
}

/* Study dialogs keep every control and result reachable at all viewport sizes. */
.workspace,
.workspace > *,
.bottom-panels {
  min-width: 0;
  max-width: 100%;
}

.bottom-panels {
  width: 100%;
}

.study-dialog {
  overscroll-behavior: contain;
}

.study-card {
  width: min(1120px, calc(100vw - 48px));
  max-width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  min-width: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.study-card > *,
.dynamic-card > * {
  min-width: 0;
  max-width: 100%;
}

.study-dialog-header > div {
  min-width: 0;
}

.study-dialog-header p {
  overflow-wrap: anywhere;
}

.dynamic-event-table-wrap,
.dynamic-results,
.dynamic-channel-list .table-wrap,
.dynamic-init-report .table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.dynamic-event-table {
  min-width: 980px;
}

.dynamic-results table {
  min-width: 720px;
}

@media (max-width: 760px) {
  .study-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 760px) {
  .validation-comparison-summary,
  .validation-tolerance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.validation-independent-solver {
  margin-top: 12px;
}

.validation-oracle-empty,
.validation-oracle-running {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.validation-oracle-empty span,
.validation-oracle-running span,
.validation-oracle-heading span {
  color: var(--muted);
  font-size: 12px;
}

.validation-oracle-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.validation-oracle-heading h3 {
  margin: 0 0 2px;
}

.validation-oracle-heading > strong {
  font-size: 12px;
  text-transform: uppercase;
}

.validation-oracle-section .validation-comparison-summary {
  margin-bottom: 10px;
}

/* N-1 contingency study */
.contingency-card {
  width: min(1240px, calc(100vw - 48px));
  grid-template-rows: auto;
  grid-auto-rows: auto;
}

.contingency-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(120px, .7fr)) minmax(125px, .7fr);
  gap: 10px;
  align-items: end;
}

.contingency-device-picker {
  min-width: 0;
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  align-self: stretch;
}

.contingency-device-picker legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.contingency-device-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.contingency-device-picker input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  min-height: 0;
  accent-color: var(--blue);
}

.contingency-filter {
  align-self: end;
}

.contingency-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contingency-results {
  min-height: 260px;
  max-height: min(54vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.contingency-results table {
  min-width: 1180px;
}

.contingency-results th,
.contingency-results td {
  font-size: 11px;
  vertical-align: top;
}

.contingency-results td {
  white-space: nowrap;
}

.contingency-results td:last-child {
  min-width: 220px;
  white-space: normal;
}

.contingency-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}

.contingency-item-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #105f94;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.contingency-item-link:hover {
  color: var(--accent);
}

@media (max-width: 1050px) {
  .contingency-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contingency-device-picker {
    grid-column: 1 / -1;
  }

  .contingency-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .contingency-card {
    width: calc(100vw - 20px);
  }

  .contingency-controls,
  .contingency-summary,
  .contingency-device-picker {
    grid-template-columns: 1fr;
  }

  .contingency-device-picker {
    grid-column: auto;
  }
}
/* Utility-grade contingency manager */
.contingency-card {
  max-height: calc(100vh - 32px);
  overflow: auto;
  align-content: start;
}

.contingency-set-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.3fr) repeat(3, auto);
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
}

.contingency-controls {
  grid-template-columns: repeat(4, minmax(145px, 1fr));
}

.contingency-device-picker {
  grid-column: span 2;
}

.contingency-control-picker {
  background: #f8fbfd;
}

.contingency-equipment-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.contingency-equipment-panel > summary {
  padding: 9px 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contingency-equipment-panel > .hint {
  margin: 0;
  padding: 0 11px 8px;
}

.contingency-equipment-list {
  max-height: 190px;
  overflow: auto;
  border-width: 1px 0 0;
  border-radius: 0;
}

.contingency-equipment-list table {
  min-width: 720px;
}

.contingency-equipment-list th,
.contingency-equipment-list td {
  padding: 5px 8px;
  font-size: 11px;
  vertical-align: middle;
}

.contingency-equipment-list input[type="text"] {
  min-height: 28px;
  padding: 4px 7px;
}

.contingency-equipment-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 0;
  accent-color: var(--blue);
}

.contingency-results {
  min-height: 240px;
  max-height: min(46vh, 520px);
}

.contingency-results table {
  min-width: 1320px;
}

.contingency-control-note {
  color: #27576f;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .contingency-set-bar,
  .contingency-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contingency-set-bar .tool-button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .contingency-set-bar,
  .contingency-controls {
    grid-template-columns: 1fr;
  }

  .contingency-device-picker {
    grid-column: auto;
  }
}
/* Voltage stability study */
.voltage-stability-card {
  width: min(1240px, calc(100vw - 48px));
  max-height: calc(100dvh - 32px);
  grid-template-rows: auto;
  grid-auto-rows: auto;
  align-content: start;
  overflow: auto;
}

.voltage-stability-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 9px;
  align-items: end;
}

.study-mode-picker {
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.study-mode-picker legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.study-mode-picker label {
  position: relative;
  min-width: 0;
}

.study-mode-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.study-mode-picker span {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.study-mode-picker input:checked + span {
  border-color: var(--blue);
  background: #e8f3f8;
  color: #154f68;
  box-shadow: inset 0 0 0 1px var(--blue);
}

.study-mode-picker input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.voltage-stability-sweep-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
}

.voltage-stability-sweep-controls.hidden {
  display: none;
}

.voltage-stability-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voltage-stability-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voltage-stability-chart-wrap {
  height: 410px;
  min-height: 410px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

#voltageStabilityChart {
  display: block;
  width: 100%;
  height: 410px;
  min-height: 410px;
}

.voltage-stability-results {
  min-height: 180px;
  max-height: min(42vh, 480px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.voltage-stability-results > table {
  min-width: 1100px;
}

.voltage-stability-results th,
.voltage-stability-results td {
  padding: 6px 8px;
  font-size: 11px;
  vertical-align: top;
  white-space: nowrap;
}

.voltage-stability-results td:last-child {
  min-width: 210px;
  white-space: normal;
}

.voltage-stability-point-panel {
  min-width: 1100px;
  border-top: 1px solid var(--line);
}

.voltage-stability-point-panel > summary {
  padding: 8px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.voltage-stability-point-panel .table-wrap {
  max-height: 260px;
  overflow: auto;
}

.voltage-stability-point-panel table {
  min-width: 940px;
}

@media (max-width: 1050px) {
  .voltage-stability-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voltage-stability-sweep-controls,
  .voltage-stability-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .voltage-stability-card {
    width: calc(100vw - 20px);
  }

  .voltage-stability-controls,
  .voltage-stability-sweep-controls,
  .voltage-stability-summary {
    grid-template-columns: 1fr;
  }

  .voltage-stability-actions {
    flex-wrap: wrap;
  }
}
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #ffffff;
}

.access-gate-panel {
  display: grid;
  justify-items: center;
  width: min(420px, 100%);
  gap: 14px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(7, 17, 29, .12);
  text-align: center;
}

.access-gate-panel .brand-mark {
  width: 48px;
  height: 48px;
}

.access-gate-panel p {
  max-width: 340px;
  line-height: 1.5;
}

.access-gate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  text-decoration: none;
}

.runtime-access-blocked .app-shell {
  display: none;
}

.account-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 190px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status[href]:hover {
  border-color: var(--accent);
  color: #176aa8;
}

@media (max-width: 760px) {
  .account-status {
    max-width: 140px;
  }
}
.access-gate-auth {
  display: grid;
  width: 100%;
  gap: 10px;
  text-align: left;
}

.access-gate-auth label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.access-gate-auth input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
}

.access-gate-auth input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(35, 125, 184, .16);
  outline-offset: 1px;
}

.access-gate-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.access-gate-buttons button,
.access-gate-action {
  min-height: 38px;
}

.access-gate-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.access-gate-status[data-state="error"] {
  color: var(--danger);
}

.access-gate-status[data-state="success"] {
  color: var(--success);
}

.account-sign-out {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.account-sign-out:hover {
  border-color: var(--accent);
  color: var(--ink);
}

@media (max-width: 480px) {
  .access-gate-panel {
    padding: 22px 18px;
  }

  .access-gate-buttons {
    grid-template-columns: 1fr;
  }
}
/* Hosted signup, engineering disclaimer, and subscription consent */
.access-gate-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.access-gate-panel > p {
  max-width: 480px;
}

.access-signup-consent,
.access-subscription-consent {
  display: grid;
  width: 100%;
  gap: 9px;
  text-align: left;
}

.access-disclaimer {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
}

.access-disclaimer summary {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.access-disclaimer > div {
  display: grid;
  gap: 8px;
  max-height: 205px;
  overflow-y: auto;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}

.access-disclaimer p,
.access-subscription-consent p {
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.access-disclaimer p:first-child {
  margin-top: 10px;
}

.access-disclaimer a,
.access-subscription-consent a {
  color: #176aa8;
  font-size: 11px;
  font-weight: 700;
}

.access-consent-row {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  cursor: pointer;
}

.access-consent-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.access-subscription-consent {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
}

.access-subscription-consent > strong {
  font-size: 12px;
}

.legal-body {
  min-height: 100vh;
  margin: 0;
  background: #f4f7f9;
  color: var(--ink);
}

.legal-page {
  width: min(860px, calc(100% - 32px));
  margin: 32px auto;
  padding: 32px 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(7, 17, 29, .08);
}

.legal-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--accent);
}

.legal-header p,
.legal-header h1,
.legal-header span {
  margin: 0;
}

.legal-header p {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.legal-header h1 {
  margin-top: 3px;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
}

.legal-header span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.legal-page section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.legal-page h2 {
  margin: 0 0 9px;
  font-size: 16px;
  letter-spacing: 0;
}

.legal-page p,
.legal-page li {
  color: #364b5d;
  font-size: 13px;
  line-height: 1.65;
}

.legal-page p {
  margin: 8px 0 0;
}

.legal-page ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.legal-page footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
}

.legal-page footer p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.legal-page footer a {
  flex: 0 0 auto;
  color: #176aa8;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 620px) {
  .access-gate {
    padding: 10px;
  }

  .access-gate-panel {
    max-height: calc(100vh - 20px);
  }

  .legal-page {
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 22px 18px;
  }

  .legal-header {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .legal-header h1 {
    font-size: 20px;
  }

  .legal-page footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Hosted subscriber profile */
.access-signup-profile {
  display: grid;
  gap: 7px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}

.access-signup-profile > strong {
  color: var(--ink);
  font-size: 12px;
}

.access-signup-profile > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.access-signup-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.access-signup-profile small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

@media (max-width: 620px) {
  .access-signup-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}