:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #667085;
  --line: #d9dee8;
  --accent: #1b7f79;
  --accent-strong: #0d5f5a;
  --warning: #b45309;
  --ok: #16734d;
  --danger: #b42318;
  --info: #1d4ed8;
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.shared-project-context {
  padding: 14px 36px 0;
  background: #fff;
}

.shared-project-context .box-project-context {
  max-width: 760px;
  margin: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.1;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 16px;
}

.eyebrow {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 20px;
  padding: 24px 36px 36px;
  max-width: 100%;
  min-width: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.input-panel {
  align-self: start;
  padding: 20px;
}

.result-panel {
  min-height: 620px;
  padding: 24px;
  overflow: hidden;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 15px;
}

.analysis-demand-field {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.box-project-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.box-project-context legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.box-project-context label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.analysis-demand-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.box-fiber-selection-panel {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.box-fiber-selection-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.box-documents-disclosure {
  margin-top: 18px;
}

.box-documents-disclosure > summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.box-documents-disclosure[open] > summary {
  margin-bottom: 2px;
}

#boxFiberSelectionList {
  display: grid;
  gap: 6px;
}

.box-fiber-selection-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.box-fiber-selection-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.box-fiber-selection-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.box-fiber-selection-item strong,
.box-fiber-selection-item span {
  overflow-wrap: anywhere;
}

.box-fiber-selection-item strong {
  color: var(--ink);
  font-size: 12px;
}

.box-fiber-selection-item span {
  color: var(--muted);
  font-size: 11px;
}

.box-fiber-selection-actions {
  display: flex;
  gap: 6px;
}

.box-fiber-selection-focus,
.box-fiber-selection-remove {
  width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 18px;
  border: 1px solid #fecaca;
  background: #fff;
  line-height: 1;
}

.box-fiber-selection-focus {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.box-fiber-selection-focus:hover,
.box-fiber-selection-focus:focus-visible {
  background: #ccfbf1;
  color: #115e59;
}

.box-fiber-selection-remove {
  color: #b91c1c;
}

.box-fiber-selection-remove:hover,
.box-fiber-selection-remove:focus-visible {
  background: #fef2f2;
  color: #991b1b;
}

#boxFiberSelectionConfirm:disabled {
  cursor: not-allowed;
  opacity: .58;
}

input[type="file"] {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  font-size: 12px;
}

.file-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 0 16px;
}

button:hover {
  background: var(--accent-strong);
}

.button-secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.button-secondary:hover {
  background: #f1f5f9;
}

.button-danger {
  border: 1px solid #fecaca;
  background: #fff;
  color: var(--danger);
}

.button-danger:hover {
  background: #fee2e2;
}

.upload-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.document-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.active-stban {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfb;
}

.drop-zone {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px dashed #a7b0c0;
  border-radius: 8px;
  cursor: pointer;
  background: #fbfcfe;
}

.drop-zone span {
  color: var(--muted);
  font-size: 13px;
}

.drop-zone strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.drop-zone input {
  display: none;
}

.document-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.document-empty {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.document-row.inactive {
  background: #f8fafc;
  color: var(--muted);
}

.document-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.document-check input {
  margin-top: 3px;
}

.document-check span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-check strong,
.document-check small {
  overflow-wrap: anywhere;
}

.document-check strong {
  color: var(--ink);
  font-size: 12px;
}

.document-check small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.document-delete {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #fecaca;
  background: #fff;
  color: var(--danger);
  font-size: 12px;
}

.document-delete:hover {
  background: #fee2e2;
  color: #7f1d1d;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf7f6;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.file-summary {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  display: grid;
  place-content: center;
  min-height: 560px;
  gap: 10px;
  text-align: center;
  color: var(--muted);
}

.empty-state h2 {
  color: var(--ink);
}

.box-analysis-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--bg);
}

.box-analysis-status strong {
  color: var(--ink);
}

.box-analysis-content {
  display: grid;
  gap: 24px;
}

.hidden {
  display: none;
}

.results {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.result-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.kpi {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.kpi strong {
  font-size: 22px;
}

.analysis-demand-notice {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.analysis-demand-notice.hidden {
  display: none;
}

.box-analysis-visual {
  display: grid;
  gap: 12px;
}

.box-analysis-visual-wrap {
  position: relative;
  min-height: 72px;
}

.box-analysis-visual-wrap.is-loading .box-analysis-visual {
  opacity: .55;
  pointer-events: none;
}

.box-analysis-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.loading-spinner,
.button-loading-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 3px solid #99f6e4;
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: box-analysis-spin .75s linear infinite;
}

.button-loading-spinner.hidden,
.box-analysis-loading.hidden {
  display: none;
}

#boxAnalyzeButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#boxAnalyzeButton:disabled {
  cursor: progress;
}

@keyframes box-analysis-spin {
  to { transform: rotate(360deg); }
}

.box-analysis-visual-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.box-analysis-visual-head > div:not(.box-analysis-visual-actions) {
  display: grid;
  flex: 1 1 280px;
  min-width: 0;
  gap: 3px;
}

.box-analysis-visual-head > .box-analysis-visual-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.box-analysis-filter-button {
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-filter-button.active {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: var(--accent-strong);
}

.box-analysis-filter-button:not(.active):hover {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--ink);
}

.box-analysis-visual-head strong {
  color: var(--ink);
  font-size: 15px;
}

.box-analysis-visual-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.box-analysis-visual-head em {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e6f4f1;
  color: var(--accent-strong);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.box-analysis-triplet-legend {
  margin-bottom: 0;
}

.box-analysis-triplet-graph {
  width: 100%;
  overflow-x: auto;
  padding: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.box-analysis-triplet-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  min-width: max-content;
  padding: 0 8px 8px;
}

.box-analysis-tree-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  min-width: max-content;
}

.box-analysis-tree-children {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  min-width: max-content;
  margin-left: 48px;
  padding: 0;
}

.box-analysis-tree-branch {
  display: block;
  min-width: max-content;
}

.box-analysis-tree-connectors {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.box-analysis-tree-connectors path {
  fill: none;
  stroke: #64748b;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.box-analysis-tree-cycle .box-analysis-triplet-node {
  border-color: #f59e0b;
}

.box-analysis-triplet-node {
  flex: 0 0 310px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.box-analysis-triplet-target {
  border-color: var(--accent);
}

.box-analysis-triplet-origin {
  align-self: center;
  min-height: 80px;
}

.box-analysis-triplet-node header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.box-analysis-triplet-heading {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.box-analysis-triplet-stban {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.box-analysis-triplet-stban:hover,
.box-analysis-triplet-stban:focus-visible {
  background: #e6f4f1;
  color: var(--accent-strong);
}

.box-analysis-triplet-stban:focus-visible,
.box-stban-review-button:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.box-analysis-triplet-node strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.box-analysis-triplet-node header span,
.box-analysis-triplet-line small {
  color: var(--muted);
  font-size: 12px;
}

.box-analysis-triplet-node header span {
  overflow-wrap: anywhere;
}

.box-analysis-triplet-count {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-triplet-count span + span {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.box-analysis-triplet-fibers-toggle {
  display: inline-grid;
  width: 26px;
  height: 26px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: #fff;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.box-analysis-triplet-fibers-toggle:hover,
.box-analysis-triplet-fibers-toggle:focus-visible {
  background: #e6f4f1;
  color: var(--accent-strong);
}

.box-analysis-triplet-fibers-toggle:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.box-analysis-triplet-dessaturation {
  padding: 6px 12px;
  border-bottom: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-cassette-warnings {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.box-analysis-triplet-lines {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding: 10px;
}

.box-analysis-triplet-lines.is-collapsed {
  display: none;
}

.box-analysis-cassette-group {
  display: grid;
  gap: 6px;
}

.box-analysis-cassette-title {
  padding: 4px 8px;
  border-left: 4px solid #0f766e;
  background: #ccfbf1;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.box-analysis-triplet-line {
  display: grid;
  grid-template-columns: 66px minmax(100px, 1.45fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.box-analysis-triplet-line-warning {
  border-color: #fdba74;
  background: #fff7ed;
}

.box-analysis-triplet-line.is-selected {
  border-color: #0f766e;
  background: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, .2);
}

.box-analysis-triplet-line.is-focus-target {
  animation: box-fiber-focus 1.8s ease-out;
}

.box-analysis-triplet-line small {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-analysis-triplet-line .box-analysis-triplet-pdb-route {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.box-analysis-triplet-line .box-analysis-triplet-loop {
  grid-column: 1 / -1;
  color: #9a3412;
  font-weight: 800;
}

.box-analysis-triplet-route-status {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.box-analysis-triplet-route-status.route-status-local {
  background: #ccfbf1;
  color: #0f766e;
}

.box-analysis-triplet-route-status.route-status-downstream {
  background: #dbeafe;
  color: #1d4ed8;
}

.box-analysis-triplet-route-status.route-status-upstream {
  background: #f3e8ff;
  color: #7e22ce;
}

.box-analysis-triplet-route-focus {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.box-analysis-triplet-route-focus:focus-visible,
.box-analysis-triplet-selection input:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.box-analysis-triplet-selection {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}

.box-analysis-triplet-selection input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #0f766e;
}

@keyframes box-fiber-focus {
  0%, 35% { box-shadow: 0 0 0 4px #f59e0b; }
  100% { box-shadow: none; }
}

.box-analysis-triplet-availability-confirmed,
.box-analysis-triplet-availability-potential {
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.box-analysis-triplet-availability-confirmed {
  background: #dcfce7;
  color: #166534;
}

.box-analysis-triplet-availability-potential {
  background: #fef3c7;
  color: #92400e;
}

.box-analysis-triplet-potential-warning {
  padding: 6px 12px;
  border-bottom: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-triplet-ref,
.box-analysis-triplet-downstream,
.box-analysis-triplet-state {
  min-width: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-triplet-ref {
  color: var(--ink);
}

.box-analysis-triplet-downstream {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.box-analysis-triplet-state {
  padding: 3px 6px;
  border-radius: 999px;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

.box-analysis-triplet-state-confirmed {
  background: #dcfce7;
  color: #166534;
}

.box-analysis-triplet-state-unavailable {
  background: #ffedd5;
  color: #9a3412;
}

.box-analysis-triplet-line .box-analysis-triplet-fiber-metadata {
  display: flex;
  grid-column: 1 / -1;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.box-analysis-triplet-cassette-chip,
.box-analysis-triplet-position-chip {
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.box-analysis-triplet-position-chip {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.box-analysis-visual-empty {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #e6f4f1;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.box-analysis-collapsible > summary {
  cursor: pointer;
  list-style-position: inside;
}

.box-analysis-collapsible > summary::-webkit-details-marker {
  color: var(--accent-strong);
}

.box-analysis-collapsible[open] > summary {
  margin-bottom: 10px;
}

.box-analysis-summary {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid #b7e4cf;
  border-radius: 8px;
  background: #f2fbf7;
}

.box-analysis-summary strong {
  color: var(--ok);
  font-size: 16px;
}

.box-analysis-summary span,
.box-analysis-summary small {
  color: var(--muted);
  line-height: 1.4;
}

.box-analysis-section {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.box-analysis-section.hidden {
  display: none;
}

.box-analysis-section > div:last-child {
  display: grid;
  gap: 10px;
}

.box-analysis-branch {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.box-analysis-branch > header {
  display: grid;
  gap: 3px;
}

.box-analysis-branch > header strong {
  color: var(--accent-strong);
  overflow-wrap: anywhere;
}

.box-analysis-branch > header span,
.box-analysis-branch > p,
.box-analysis-branch > small,
.box-analysis-path {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.box-analysis-source {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.box-analysis-source-pdb {
  border-left: 4px solid var(--ok);
}

.box-analysis-source-estimate {
  border-left: 4px solid var(--warning);
}

.box-analysis-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.box-analysis-source-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.box-analysis-source-head strong {
  overflow-wrap: anywhere;
}

.box-analysis-source-head span,
.box-analysis-source p,
.box-analysis-source small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.box-analysis-confidence {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--ink) !important;
  font-weight: 800;
}

.box-analysis-source-count {
  color: var(--accent-strong);
  font-size: 13px;
}

.box-analysis-source-count strong {
  font-size: 20px;
}

.box-analysis-fibers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.box-analysis-fibers span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e6f4f1;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.box-analysis-complexity {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  background: #fff7ed;
  color: var(--warning);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.box-analysis-empty {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
}

.analysis-demand-notice > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.analysis-demand-notice strong {
  font-size: 15px;
}

.analysis-demand-notice span {
  color: var(--muted);
  font-size: 13px;
}

.analysis-demand-notice-ok {
  border-color: #b7e4cf;
  background: #ecfdf5;
}

.analysis-demand-notice-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.analysis-demand-notice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analysis-demand-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 800;
}

.analysis-demand-chip.ok {
  background: #d1fae5;
  color: #047857;
}

.analysis-demand-chip.warning {
  background: #ffedd5;
  color: #b45309;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.details-grid section {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

dl {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 14px 0 0;
  font-size: 14px;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}

.section-title span {
  color: var(--muted);
  font-size: 13px;
}

.route-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.route-actions button {
  min-width: 34px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.route-actions button:hover {
  border-color: var(--accent);
  background: #edf7f6;
  color: var(--accent-strong);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.table-section {
  min-width: 0;
  max-width: 100%;
}

.route-graph {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  padding: 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.route-hierarchy {
  display: grid;
  gap: 22px;
  min-width: max-content;
  padding: 8px;
}

.route-selection-single {
  min-width: 0;
}

.route-selection-bar {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  min-width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.route-selection-bar strong {
  color: var(--ink);
}

.route-selection-bar.active {
  background: #edf7f6;
  color: var(--accent-strong);
}

.route-selection-bar button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.route-selection-modes {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.route-selection-modes button {
  border: 0;
  background: transparent;
}

.route-selection-modes button.active {
  background: var(--accent);
  color: #fff;
}

.route-branch {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: max-content;
}

.route-children {
  display: grid;
  gap: 22px;
  min-width: max-content;
}

.route-child {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: max-content;
}

.route-repeat-note {
  display: grid;
  place-items: center;
  min-height: 84px;
  max-width: 120px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.route-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot,
.legend-ring,
.legend-continuity {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 55, 0.18);
}

.legend-passage {
  background: #ede9fe;
  border-color: #7c3aed;
}

.legend-stocked {
  background: #dcfce7;
  border-color: #16a34a;
}

.legend-free {
  background: #ccfbf1;
  border-color: #0f766e;
}

.legend-splice {
  background: #ffedd5;
  border-color: #f97316;
}

.legend-waiting {
  background: #fef3c7;
  border-color: #d97706;
}

.legend-missing {
  background: #fee2e2;
  border-color: var(--danger);
}

.legend-ring {
  background: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

.legend-continuity.available {
  background: #16a34a;
  border-color: #15803d;
}

.legend-continuity.reserved {
  background: #f97316;
  border-color: #c2410c;
}

.legend-continuity.blocked {
  background: #111827;
  border-color: #020617;
}

.legend-mark {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  font-size: 12px;
  line-height: 1;
}

.legend-mark.used {
  color: #dc2626;
}

.legend-mark.reserved {
  color: #f97316;
}

.legend-mark.available {
  color: #16a34a;
}

.route-node {
  flex: 0 0 clamp(360px, 70vw, 560px);
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.route-node header {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.route-node header:hover {
  background: #edf7f6;
}

.route-node strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.route-node span {
  color: var(--muted);
  font-size: 12px;
}

.box-ready {
  border-color: var(--ok);
}

.box-warning,
.box-mismatch,
.box-blocked {
  border-color: var(--warning);
}

.box-missing {
  border-color: var(--danger);
  background: #fff5f5;
}

.box-neutral {
  border-color: #c7ceda;
}

.route-node.continuity-target-highlight {
  animation: continuityTargetPulse 1.8s ease-out;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.28), 0 16px 36px rgba(15, 23, 42, 0.16);
}

@keyframes continuityTargetPulse {
  0% {
    box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.42), 0 16px 36px rgba(15, 23, 42, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0), 0 16px 36px rgba(15, 23, 42, 0);
  }
}

.node-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.node-metrics span {
  display: grid;
  gap: 1px;
  align-content: center;
  padding: 8px 6px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.node-metrics strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.05;
}

.node-metrics small,
.node-metrics em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.05;
}

.fiber-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
}

.tube-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tube-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: max-content;
  min-width: 100%;
  padding: 4px 8px;
  border-left: 5px solid var(--tube-border, var(--accent));
  background: var(--tube-soft, #f8fafc);
  color: var(--tube-ink, var(--ink));
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.tube-title:hover {
  outline: 2px solid rgba(20, 184, 166, 0.35);
  outline-offset: 1px;
}

.tube-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.tube-fibers {
  display: grid;
  grid-template-columns: repeat(12, 42px);
  gap: 12px 8px;
  justify-content: start;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fiber-cell,
.cable-fiber-cell {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.fiber-cell {
  width: 42px;
  padding: 4px 3px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 4px 0 var(--tube-border, transparent);
  cursor: pointer;
  outline: none;
}

.fiber-cell:focus-visible,
.fiber-cell.selected {
  box-shadow: inset 0 4px 0 var(--tube-border, transparent), 0 0 0 3px rgba(20, 184, 166, 0.35);
}

.fiber-cell.route-fiber-selected {
  border-color: var(--accent);
  box-shadow: inset 0 4px 0 var(--tube-border, transparent), 0 0 0 4px rgba(20, 184, 166, 0.35);
}

.fiber-cell.route-fiber-not-selectable {
  cursor: help;
}

.cable-fiber-cell {
  padding: 2px;
  border-radius: 5px;
}

.cable-fiber-cell.availability-available {
  background: #dcfce7;
}

.cable-fiber-cell.availability-reserved {
  background: #ffedd5;
}

.cable-fiber-cell.availability-used {
  background: #fee2e2;
}

.fiber-cell.availability-available {
  border-color: #16a34a;
  background: #dcfce7;
}

.fiber-cell.availability-reserved {
  border-color: #f97316;
  background: #ffedd5;
}

.fiber-cell.availability-used {
  border-color: #dc2626;
  background: #fee2e2;
}

.fiber-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  border: 2px solid var(--fiber-border, rgba(31, 41, 55, 0.16));
  border-radius: 50%;
  background: var(--fiber-fill, #fff);
  color: var(--fiber-ink, #111827);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

.fiber-availability {
  display: grid;
  place-items: center;
  width: 24px;
  height: 18px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.fiber-availability.available {
  background: #16a34a;
  color: #fff;
}

.fiber-availability.used {
  background: #dc2626;
  color: #fff;
}

.fiber-availability.reserved {
  background: #f97316;
  color: #fff;
}

.continuity-marker {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.continuity-marker.available {
  background: #16a34a;
}

.continuity-marker.reserved {
  background: #f97316;
}

.continuity-marker.blocked {
  background: #111827;
}

.continuity-marker[role="button"] {
  cursor: pointer;
}

.continuity-marker[role="button"]:hover,
.continuity-marker[role="button"]:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.fiber-reference {
  display: block;
  width: 36px;
  height: 130px;
  overflow: visible;
  color: #111827;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: normal;
  text-align: left;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.read-debug-panel {
  margin-top: 10px;
  border: 1px solid #99f6e4;
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #f0fdfa;
  color: #134e4a;
}

.read-debug-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 0;
}

.read-debug-title strong {
  font-size: 13px;
}

.read-debug-title span {
  color: #0f766e;
  font-size: 12px;
}

.read-debug-panel pre {
  margin: 0;
  padding: 10px 12px 12px;
  overflow-x: auto;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.fiber-free {
  background: #dcfce7;
  color: #166534;
}

.fiber-passage {
  background: #ede9fe;
  color: #5b21b6;
}

.fiber-used {
  background: #111827;
  color: #fff;
}

.fiber-waiting {
  background: #fef3c7;
  color: #92400e;
}

.fiber-splice {
  background: #ffedd5;
  color: #9a3412;
}

.fiber-stocked {
  background: #dcfce7;
  color: #166534;
}

.fiber-unknown {
  background: #eef2f7;
  color: #64748b;
}

.fiber-planned {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fiber-incoherent {
  box-shadow: 0 0 0 3px #f97316;
}

.missing-plan,
.node-note {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.missing-plan.compact {
  min-height: 0;
  place-items: start;
  padding: 8px 12px;
  border-bottom: 1px solid #fecaca;
  background: #fee2e2;
  text-align: left;
}

.node-note {
  color: var(--muted);
}

.route-cable {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  flex: 0 0 clamp(130px, 14vw, 180px);
  min-height: 120px;
  padding: 16px 12px;
  color: var(--muted);
  text-align: center;
}

.route-cable strong {
  max-width: 100%;
  margin-top: 8px;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.route-cable span {
  font-size: 12px;
}

.cable-line {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #334155;
}

.cable-missing .cable-line {
  background: repeating-linear-gradient(90deg, var(--danger), var(--danger) 10px, transparent 10px, transparent 18px);
  border: 1px solid var(--danger);
}

.cable-missing strong,
.cable-missing span {
  color: var(--danger);
}

.cable-fibers {
  display: grid;
  grid-template-columns: repeat(12, 16px);
  justify-content: center;
  gap: 5px 4px;
  width: 100%;
  margin-top: 10px;
}

.cable-fiber {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 14px;
  height: 14px;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--fiber-fill, #eef2f7);
  border: 1px solid var(--fiber-border, transparent);
  color: var(--fiber-ink, #334155);
  font-size: 9px;
  font-weight: 700;
}

.route-fullscreen-active {
  overflow: hidden;
}

.route-fullscreen-active #routeSection {
  position: fixed;
  inset: 12px;
  z-index: 50;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.route-fullscreen-active #routeGraph {
  min-height: 0;
  padding-bottom: 18px;
}

.route-fullscreen-active .route-node {
  flex-basis: clamp(420px, 45vw, 720px);
}

.route-fullscreen-active .route-hierarchy {
  min-height: min-content;
}

.route-compact-active .route-node {
  flex-basis: 260px;
}

.route-compact-active .route-cable {
  flex-basis: 104px;
  padding-left: 8px;
  padding-right: 8px;
}

.route-compact-active .fiber-strip {
  grid-template-columns: minmax(0, 1fr);
  max-height: 170px;
  gap: 7px;
}

.route-compact-active .tube-fibers {
  grid-template-columns: repeat(6, 26px);
  gap: 7px;
}

.route-compact-active .fiber-cell {
  width: 26px;
  padding: 2px;
}

.route-compact-active .fiber-reference {
  display: none;
}

.route-compact-active .fiber-dot {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.route-compact-active .fiber-availability {
  width: 18px;
  height: 14px;
  font-size: 14px;
}

.route-compact-active .continuity-marker {
  width: 14px;
  height: 14px;
}

.cable-fiber.fiber-passage {
  box-shadow: inset 0 -2px 0 #7c3aed;
}

.cable-fiber.fiber-stocked,
.cable-fiber.fiber-free {
  box-shadow: inset 0 -2px 0 #16a34a;
}

.cable-fiber.fiber-splice {
  box-shadow: inset 0 -2px 0 #f97316;
}

.cable-fiber.fiber-waiting {
  box-shadow: inset 0 -2px 0 #d97706;
}

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

.anomaly {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warning);
  border-radius: 6px;
  background: #fffaf2;
  font-size: 14px;
}

.anomaly.ok {
  border-left-color: var(--ok);
  background: #f2fbf7;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.required-box-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.required-box-panel.hidden {
  display: none;
}

.required-box-panel-title {
  display: grid;
  gap: 5px;
}

.required-box-panel-title h3 {
  font-size: 14px;
}

.required-box-panel-title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.required-box-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.required-box-export {
  min-height: 34px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--accent);
  background: #edf7f6;
  color: var(--accent-strong);
}

.required-box-export:hover {
  background: #d8efed;
}

.required-box-export:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.required-box-item {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 36px 0;
  background: #fff;
}

.app-tabs button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.app-tabs button.active {
  border-color: var(--accent);
  background: #e6f4f1;
  color: var(--accent-strong);
}

.required-box-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.required-box-item-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.required-box-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

.required-box-loaded .required-box-status {
  border-color: #b7e4cf;
  background: #ecfdf5;
  color: #047857;
}

.required-box-missing .required-box-status {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}

.required-box-origin {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.required-box-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.required-box-metrics span {
  display: grid;
  gap: 1px;
  padding: 6px 4px;
  background: #f8fafc;
  text-align: center;
}

.required-box-metrics strong {
  font-size: 12px;
  line-height: 1;
}

.required-box-metrics small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.required-box-demand {
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.required-box-demand-ok {
  border: 1px solid #b7e4cf;
  background: #ecfdf5;
  color: #047857;
}

.required-box-demand-short {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #b45309;
}

.required-box-demand-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.required-box-empty {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.rop-project-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.rop-project-title {
  display: grid;
  gap: 5px;
}

.rop-project-title h3 {
  font-size: 14px;
}

.rop-project-title span,
.project-message {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.rop-project-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rop-project-panel input,
.rop-project-panel select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

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

.project-rule-block {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.project-rule-block h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.project-rule-subtitle {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.project-rule-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.project-form-actions,
.project-rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-empty,
.project-rule-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.project-empty {
  color: var(--muted);
  font-size: 12px;
}

.project-rule-item {
  display: grid;
  gap: 6px;
}

.project-rule-item > div:not(.project-rule-actions) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.project-rule-item strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.project-rule-item span,
.project-rule-item p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.project-rule-item .project-warning {
  color: var(--danger);
  font-weight: 700;
}

.project-rule-item p {
  margin: 0;
}

.project-rule-item button,
.project-form-actions button {
  justify-self: start;
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.project-rule-delete {
  border: 1px solid #fecaca;
  background: #fff;
  color: var(--danger);
}

.project-rule-delete:hover {
  background: #fee2e2;
  color: #7f1d1d;
}

.project-rule-edit,
#projectCancelRuleEditButton {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.project-rule-edit:hover,
#projectCancelRuleEditButton:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.rop-project-panel button {
  min-height: 34px;
}

.rop-project-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.project-message.error {
  color: var(--danger);
  font-weight: 700;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  background: #f2f5f9;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .layout,
  .details-grid,
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .app-header,
  .layout,
  .shared-project-context,
  .app-tabs {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dti-panel {
    margin-left: 18px;
    margin-right: 18px;
  }

  .dti-panel .project-grid,
  .dti-upload-grid {
    grid-template-columns: 1fr;
  }

  .app-header,
  .result-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .route-actions {
    justify-content: flex-start;
  }

  .route-node {
    flex-basis: min(88vw, 520px);
  }

  .route-cable {
    flex-basis: 140px;
  }

  .route-compact-active .route-node {
    flex-basis: min(74vw, 300px);
  }
}

@media (max-width: 700px) {
  .box-project-context {
    grid-template-columns: 1fr;
  }

  .shared-project-context {
    padding-top: 12px;
  }
}

.rop-workspace-panel,
.dti-panel {
  display: grid;
  gap: 14px;
  margin: 24px 36px 36px;
  padding: 20px;
  max-width: none;
}

.rop-workspace-panel {
  max-width: 760px;
}

body[data-active-tab="analysis"] .rop-project-panel {
  display: none;
}

body[data-active-tab="rop"] .layout {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: start;
  padding-top: 24px;
}

body[data-active-tab="rop"] .input-panel > :not(.rop-project-panel) {
  display: none;
}

body[data-active-tab="rop"] .rop-project-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.rop-workspace-panel.hidden,
.dti-panel.hidden,
.layout.hidden {
  display: none;
}

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

.dti-tool-block {
  width: 100%;
  max-width: none;
}

.dti-panel .project-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.dti-panel .project-rule-block {
  padding: 16px;
}

.dti-panel .project-rule-block h4 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.dti-workbook-viewer {
  display: grid;
  gap: 10px;
  min-height: calc(100vh - 180px);
}

.dti-sheet-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.dti-sheet-title span {
  color: var(--muted);
  font-size: 12px;
}

.dti-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dti-sheet-actions input {
  flex: 1 1 240px;
  min-height: 32px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.dti-sheet-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.dti-import-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.dti-import-button input {
  display: none;
}

.dti-sheet-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dti-sheet-tabs button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dti-sheet-tabs button.active {
  border-color: var(--accent);
  background: #e6f4f1;
  color: var(--accent-strong);
}

.dti-sheet-page {
  min-height: calc(100vh - 260px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.dti-sheet-table-wrap {
  width: 100%;
  height: calc(100vh - 270px);
  min-height: 560px;
  overflow: auto;
}

.dti-sheet-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.dti-sheet-table th,
.dti-sheet-table td {
  min-width: 96px;
  max-width: 260px;
  padding: 6px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.dti-sheet-table td[contenteditable="true"] {
  cursor: text;
}

.dti-sheet-table td[contenteditable="true"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #ecfeff;
}

.dti-sheet-table td.dti-cell-edited {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

.dti-sheet-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f2f5f9;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.dti-sheet-table tbody th {
  left: 0;
  z-index: 1;
  min-width: 48px;
  background: #f8fafc;
}

.box-stban-review-button {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent-strong);
}

.box-stban-review-button:hover,
.box-stban-review-button:focus-visible {
  background: #e6f4f1;
  color: var(--accent-strong);
}

.stban-review-dialog {
  width: min(1220px, calc(100vw - 32px));
  max-width: none;
  max-height: min(780px, calc(100vh - 48px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgb(15 23 42 / 30%);
}

.stban-review-dialog::backdrop {
  background: rgb(15 23 42 / 52%);
}

.stban-review-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.stban-review-dialog-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.stban-review-dialog-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.stban-review-close {
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.stban-review-table-wrap {
  max-height: min(670px, calc(100vh - 176px));
  overflow: auto;
}

.stban-review-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 12px;
}

.stban-review-table th,
.stban-review-table td {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.stban-review-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  color: var(--ink);
  font-size: 11px;
}

.stban-review-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.web-mode-actions,
.web-project-switcher,
.web-dialog-actions,
.web-dialog-heading,
.web-pagination,
.web-inline-form,
.web-project-file,
.web-admin-row,
.web-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-mode-actions {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.web-identity-label,
.web-project-status,
.web-notice,
.web-error,
.web-admin-role {
  color: var(--muted);
  font-size: 12px;
}

.web-project-switcher {
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.web-business-tabs-unavailable {
  margin: 0;
  padding: 14px 36px;
  border-bottom: 1px solid #f5c2c7;
  background: #fff1f2;
  color: #9f1239;
  font-size: 13px;
  font-weight: 700;
}

.web-project-switcher > div:first-child {
  display: grid;
  gap: 3px;
}

.web-project-switcher label {
  display: grid;
  gap: 4px;
  min-width: min(100%, 300px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.web-project-switcher select,
.web-inline-form select,
.web-admin-reset-password-form select {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.web-project-files {
  display: grid;
  width: 100%;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.web-project-file {
  justify-content: space-between;
  max-width: 620px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.web-project-file button,
.web-inline-form button,
.web-setting-row button,
.web-pagination button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.web-notice {
  width: 100%;
  min-height: 1em;
  color: var(--info);
}

.workspace-conflict,
.stban-version-notice {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f4b860;
  border-radius: 6px;
  background: #fff9ed;
  color: var(--ink);
  font-size: 13px;
}

.stban-version-notice {
  border-color: #a5d8d3;
  background: #effaf8;
}

.workspace-conflict p,
.stban-version-notice p {
  margin: 0;
}

.workspace-conflict-actions,
.stban-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-conflict-actions button,
.stban-version-actions button {
  min-height: 34px;
  font-size: 12px;
}

.web-error {
  min-height: 1em;
  color: var(--danger);
}

.web-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgb(15 23 42 / 30%);
}

.web-dialog::backdrop {
  background: rgb(15 23 42 / 52%);
}

.web-dialog-content {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.web-dialog-content > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.web-dialog-content input,
.web-inline-form input,
.web-setting-row textarea {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
}

.web-dialog-actions {
  justify-content: flex-end;
}

.web-admin-dialog {
  width: min(920px, calc(100vw - 32px));
}

.web-dialog-heading {
  justify-content: space-between;
}

.web-dialog-heading button {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  background: #fff;
  color: var(--muted);
  font-size: 24px;
}

.web-admin-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.web-inline-form {
  flex-wrap: wrap;
}

.web-inline-form input,
.web-inline-form select {
  flex: 1 1 150px;
}

.web-admin-list,
.web-admin-settings {
  display: grid;
  gap: 6px;
}

.web-admin-row {
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  font-size: 13px;
}

.web-admin-row > span:first-of-type {
  margin-right: auto;
}

.web-admin-role {
  color: var(--accent-strong);
  font-weight: 700;
}

.web-setting-row {
  align-items: stretch;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.web-setting-row label {
  flex: 1 1 230px;
  align-self: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.web-setting-row textarea {
  flex: 2 1 240px;
  resize: vertical;
}

.web-pagination {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .web-project-switcher {
    padding: 12px 18px;
  }

  .web-business-tabs-unavailable {
    padding: 12px 18px;
  }

  .web-mode-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .web-project-switcher label,
  .web-project-switcher button {
    width: 100%;
  }
}