* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", "Be Vietnam Pro", system-ui, sans-serif; background: #0c141e; color: #e8f1fa; }
#map {
  position: absolute; inset: 52px 0 0 0; z-index: 1;
  background: #d7dee6;
}
#map .leaflet-container,
#map.leaflet-container {
  width: 100%;
  height: 100%;
  background: #d7dee6;
}

.fm-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 12px; min-height: 52px;
  background: rgba(12, 20, 32, 0.96);
  border-bottom: 1px solid rgba(61, 156, 240, 0.35);
}
.fm-brand { font-weight: 700; margin-right: 8px; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fm-menu { position: relative; }
.fm-menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 190px; display: flex; flex-direction: column; gap: 4px;
  padding: 6px; background: rgba(12, 20, 32, 0.98);
  border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.fm-menu-panel[hidden] { display: none !important; }
.fm-menu-panel button, .fm-menu-panel a { width: 100%; text-align: left; box-sizing: border-box; }
.fm-actions button, .fm-actions a, .fm-progress-actions button {
  border: 1px solid rgba(61, 156, 240, 0.5);
  border-radius: 8px; padding: 6px 10px;
  background: rgba(18, 24, 32, 0.95); color: #e8f1fa;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: normal;
  cursor: pointer;
}
.fm-actions a { text-decoration: none; }
#flood3dRunBtn { background: #2f7fc4; border: none; color: #fff; }
.fm-actions button:disabled { opacity: 0.5; cursor: wait; }
.fm-time { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.fm-time input { flex: 1; }
#flood3dTimeLabel {
  white-space: nowrap; font-family: inherit; font-size: 13px;
  font-weight: 600; line-height: normal; color: #c5d0dc;
}

.fm-side {
  position: absolute; z-index: 15; right: 12px; bottom: 12px;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  background: rgba(12, 20, 32, 0.94);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 10px;
}
.fm-stats { font-size: 12px; line-height: 1.45; color: #c5d0dc; margin-bottom: 8px; }
.fm-note { margin: 10px 0 0; font-size: 11px; color: #8ea0b3; word-break: break-all; }

.flood3d-legend { margin-top: 6px; }
.flood3d-legend-title { font-weight: 650; font-size: 12px; margin-bottom: 6px; }
.flood3d-legend-rows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.flood3d-legend-row { display: flex; align-items: center; gap: 8px; }
.flood3d-legend-swatch {
  width: 16px; height: 12px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.4); flex-shrink: 0;
}

#flood3dProgressModal {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center;
  background: rgba(6, 10, 16, 0.78); padding: 16px;
}
#flood3dProgressModal[hidden] { display: none !important; }
.fm-progress-card {
  width: min(560px, 100%); background: #151c26;
  border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 12px;
  padding: 14px 16px 12px;
}
.fm-progress-card h1 { margin: 0; font-size: 16px; }
.fm-progress-status { margin: 8px 0 4px; font-weight: 650; }
.fm-progress-status.is-running { color: #7dd3fc; }
.fm-progress-status.is-ok { color: #6ee7b7; }
.fm-progress-status.is-error { color: #ffb4b4; }
.fm-progress-meta { margin: 0 0 8px; font-size: 12px; color: #aeb9c6; }
.flood3d-progress-bar { height: 6px; background: rgba(120,150,180,0.22); border-radius: 99px; overflow: hidden; margin: 0 0 8px; }
.flood3d-progress-bar > span { display: block; height: 100%; width: 0; background: #3d9cf0; }
.fm-progress-log {
  max-height: 220px; overflow: auto; margin: 0;
  padding: 8px; background: #101820; border-radius: 8px;
  font: 12px/1.45 Consolas, monospace; white-space: pre-wrap;
}
.fm-progress-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
#flood3dProgressClose { background: #2f7fc4; border: none; color: #fff; }
#flood3dProgressClose:disabled { opacity: 0.5; }

.fm-sep {
  display: inline-block; width: 1px; align-self: stretch; min-height: 22px;
  background: rgba(120, 150, 180, 0.35); margin: 0 4px;
}
#hydroRrRunBtn, #hydroNamRunBtn, #hydro1dRunBtn, #flowRunBtn {
  border: 1px solid rgba(61, 156, 240, 0.55);
  background: rgba(18, 24, 32, 0.95);
}
#flowRunBtn.is-active {
  border-color: #38bdf8;
  background: rgba(29, 78, 216, 0.45);
}
#flowRunBtn:disabled { opacity: 0.55; cursor: wait; }

#svManningModal, #svReservoirModal, #rrParamsModal, #namParamsModal, #rrInputModal, #svInputModal, #svEvalModal, #boundaryStationsModal, #hdParamsModal, #riverNetworkModal, #constructionsModal, #boundaryBrowseModal, #hydro1dProgressModal {
  position: fixed; inset: 0; z-index: 10070;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 16, 0.78); padding: 16px; box-sizing: border-box;
}
#hydro1dProgressModal { z-index: 10080; }
#rrInputModal, #svInputModal, #boundaryStationsModal, #constructionsModal { z-index: 10076; }
#riverNetworkModal { z-index: 10077; }
#boundaryBrowseModal { z-index: 10078; }
#svEvalModal { z-index: 10077; }
#svReservoirModal { z-index: 10079; }
#svManningModal[hidden], #svReservoirModal[hidden], #rrParamsModal[hidden], #namParamsModal[hidden], #rrInputModal[hidden], #svInputModal[hidden], #svEvalModal[hidden], #boundaryStationsModal[hidden], #hdParamsModal[hidden], #riverNetworkModal[hidden], #constructionsModal[hidden], #boundaryBrowseModal[hidden], #hydro1dProgressModal[hidden] {
  display: none !important;
}

.sv-manning-card {
  width: min(420px, 100%); max-height: min(88vh, 720px);
  display: flex; flex-direction: column;
  background: #151c26; border: 1px solid rgba(61, 156, 240, 0.45);
  border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); box-sizing: border-box;
  color: #e8f1fa;
}
.sv-manning-card h1 { margin: 0; font-size: 16px; font-weight: 650; }
.sv-manning-hint { margin: 4px 0 10px; font-size: 12px; opacity: 0.8; }
.sv-solver-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
}
.sv-solver-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sv-solver-row input[type="radio"] { accent-color: #3d9cf0; }
.sv-manning-fill {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 12px;
}
.sv-manning-fill label { display: inline-flex; align-items: center; gap: 4px; }
.sv-manning-fill input {
  width: 64px; border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 6px;
  padding: 4px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
#svXsSpacing { width: 88px; }
#svDtHours, #svCfl, #svDtHydro, #svTheta, #svPicard,
#svConvective, #svManningBlend, #svQRelax { width: 68px; }
#svMikeParams[hidden] { display: none !important; }
.hd-params-card { width: min(560px, 96vw); }
.hd-params-card h2 { margin: 12px 0 6px; font-size: 13px; font-weight: 650; color: #9ec4e8; }
.hd-params-grid input {
  width: 100%; border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 6px;
  padding: 6px 8px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
.hd-params-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 4px;
}
.hd-params-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #c5d7ea; }
#hdMikeParams[hidden] { display: none !important; }
.sv-manning-fill button, .sv-manning-actions button {
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
#svManningFillBtn {
  border: 1px solid rgba(61, 156, 240, 0.45);
  background: rgba(18, 24, 32, 0.92); color: #e8f1fa;
}
.sv-manning-table-wrap {
  flex: 1; min-height: 180px; overflow: auto;
  border: 1px solid rgba(120, 150, 180, 0.28); border-radius: 8px;
}
.sv-manning-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-manning-table th, .sv-manning-table td {
  padding: 5px 8px; text-align: left; border-bottom: 1px solid rgba(120, 150, 180, 0.18);
}
.sv-manning-table th { position: sticky; top: 0; background: #1c2532; font-weight: 650; }
.sv-manning-table input {
  width: 72px; border: 1px solid rgba(61, 156, 240, 0.4); border-radius: 6px;
  padding: 3px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
.sv-manning-error { margin-top: 8px; color: #ffb4b4; font-size: 12px; }
.sv-calibrate-panel {
  margin-top: 12px; padding: 10px 12px 12px;
  border: 1px solid rgba(61, 156, 240, 0.28); border-radius: 10px;
  background: rgba(10, 16, 26, 0.55);
}
.sv-calibrate-mode {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: #d7e4f2;
}
.sv-calibrate-mode > span {
  font-weight: 650; color: #9ec8ea; margin-right: 4px;
}
.sv-calibrate-mode label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(120, 150, 180, 0.28);
  background: rgba(18, 24, 32, 0.45); color: #c5d4e4;
}
.sv-calibrate-mode label:has(input:checked) {
  border-color: rgba(94, 176, 255, 0.75);
  background: rgba(47, 127, 196, 0.32); color: #fff;
}
.sv-calibrate-mode input { margin: 0; accent-color: #5eb0ff; }
.sv-structure-types {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.sv-structure-types[hidden] { display: none !important; }
.sv-structure-caption {
  font-size: 11px; font-weight: 650; color: #8eb4d4;
}
.sv-structure-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-structure-types label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(120, 150, 180, 0.22);
  background: rgba(18, 24, 32, 0.55);
  font-size: 12.5px; color: #c5d4e4; cursor: pointer;
}
.sv-structure-types label:has(input:checked) {
  border-color: rgba(94, 176, 255, 0.7);
  background: rgba(43, 134, 240, 0.22); color: #fff;
}
.sv-structure-types input { margin: 0; accent-color: #5eb0ff; }
#svReservoirOpenBtn[hidden] { display: none !important; }
#svManningModal .sv-manning-actions #svReservoirOpenBtn {
  border: 1px solid rgba(140, 196, 255, 0.4);
  background: #2f7fc4; color: #fff; font-weight: 650;
}
#svReservoirOpenBtn:hover { filter: brightness(1.08); }
.sv-reservoir-card { width: min(880px, 96vw); max-height: min(90vh, 860px); }
.sv-reservoir-card h2 {
  margin: 14px 0 8px; font-size: 13px; font-weight: 650; color: #9ec8ea;
}
.sv-reservoir-scroll { overflow: auto; min-height: 0; padding-right: 4px; }
.sv-reservoir-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px;
}
.sv-reservoir-grid .span-2 { grid-column: span 2; }
.sv-reservoir-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #9ec8ea; }
.sv-reservoir-grid input,
.sv-reservoir-grid select {
  width: 100%; box-sizing: border-box;
  border: 1px solid rgba(61, 156, 240, 0.4); border-radius: 6px;
  padding: 4px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
.sv-reservoir-grid input[readonly] { opacity: 0.75; }
.sv-reservoir-sheet { margin-top: 8px; }
.sv-reservoir-sheet-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: 12px;
}
.sv-reservoir-sheet-head button,
.sv-reservoir-sheet button {
  border: 1px solid rgba(61, 156, 240, 0.4); border-radius: 6px;
  background: transparent; color: #e8f1fa; cursor: pointer; padding: 2px 8px;
}
.sv-reservoir-sheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-reservoir-sheet th, .sv-reservoir-sheet td {
  border-bottom: 1px solid rgba(61, 156, 240, 0.2); padding: 4px 6px; text-align: left;
}
.sv-reservoir-sheet input, .sv-reservoir-sheet select {
  width: 100%; box-sizing: border-box;
  border: 1px solid rgba(61, 156, 240, 0.35); border-radius: 4px;
  padding: 3px 4px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
.sv-reservoir-schedule { display: flex; gap: 16px; font-size: 13px; }
.sv-reservoir-schedule label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sv-reservoir-hours { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sv-reservoir-hours button {
  width: 36px; border: 1px solid rgba(61, 156, 240, 0.35); border-radius: 4px;
  background: transparent; color: #d7e4f2; cursor: pointer; padding: 3px 0;
}
.sv-reservoir-hours button.is-on { background: rgba(43, 134, 240, 0.45); color: #fff; }
.sv-reservoir-hours button:disabled { opacity: 0.7; cursor: default; }
@media (max-width: 720px) {
  .sv-reservoir-grid { grid-template-columns: 1fr; }
  .sv-reservoir-grid .span-2 { grid-column: auto; }
}
.sv-manning-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
#svManningModal .sv-manning-card { width: min(920px, 96vw); }
.sv-manning-table td[data-xy],
.sv-manning-table td[data-reach-id] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-manning-table td[data-reach-id] { color: #9ec4e8; font-size: 11px; }
#svManningReach {
  width: 168px; border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 6px;
  padding: 4px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
#svManningModal .sv-manning-actions { flex-wrap: wrap; }
#svManningModal .sv-manning-actions button { flex-shrink: 0; white-space: nowrap; }
#svManningModal .sv-manning-fill-range {
  flex-wrap: nowrap;
  white-space: nowrap;
}
#svManningModal .sv-manning-fill-range label,
#svManningModal .sv-manning-fill-range button { flex-shrink: 0; }
#svManningCancel {
  background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35);
}
#svManningInput, #svManningSave, #svManningEval {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#svManningCalibrate { border: none; background: #2f7fc4; color: #fff; font-weight: 600; }
#svManningSave:disabled, #svManningCalibrate:disabled, #svManningEval:disabled { opacity: 0.55; cursor: wait; }

.sv-eval-card { width: min(980px, 96vw); max-height: min(90vh, 820px); min-height: min(52vh, 480px); }
.sv-eval-toolbar {
  flex-wrap: nowrap; white-space: nowrap; align-items: center;
  gap: 8px 10px; overflow-x: auto;
}
.sv-eval-toolbar > label,
.sv-eval-toolbar > button,
.sv-eval-toolbar > span { flex-shrink: 0; }
.sv-eval-toolbar > label { gap: 6px; }
#svEvalXs, #svEvalReach, #svEvalObsCol {
  width: 140px; border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 6px;
  padding: 4px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
#svEvalReach { width: 168px; }
#svEvalObsCol { width: 132px; }
#svEvalObsColWrap { display: inline-flex; align-items: center; gap: 6px; }
#svEvalObsColWrap[hidden] { display: none !important; }
.sv-eval-kind { display: inline-flex; align-items: center; gap: 8px; }
.sv-eval-kind label { display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.sv-eval-kind input[type="radio"] { margin: 0 1px 0 0; padding: 0; accent-color: #3d9cf0; }
.sv-eval-chart-wrap { flex: 1; min-height: 300px; }
#svEvalChart { display: block; width: 100%; height: 100%; cursor: crosshair; }
#svEvalLoad {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#svEvalLoad:disabled { opacity: 0.55; cursor: wait; }
.sv-eval-head { margin: 0 0 8px; }
#svEvalClose {
  background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35);
}

.rr-params-card { width: min(1100px, 96vw); max-height: min(90vh, 860px); min-height: min(72vh, 640px); }
.rr-params-layout { display: flex; gap: 14px; flex: 1; min-height: 0; }
.rr-params-body {
  flex: 0 0 min(360px, 42%); width: min(360px, 42%); min-height: 180px; overflow: auto;
  display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.rr-hydro-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rr-hydro-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; font-weight: 650; color: #9ec7ef;
}
.rr-hydro-nse {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums; background: rgba(120, 150, 180, 0.18); color: #e8f1fa;
}
.rr-hydro-nse.is-good { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; }
.rr-hydro-nse.is-ok { background: rgba(232, 197, 71, 0.2); color: #e8c547; }
.rr-hydro-nse.is-poor { background: rgba(248, 113, 113, 0.2); color: #ffb4b4; }
.rr-hydro-legend { display: inline-flex; gap: 12px; font-weight: 500; color: #c5d3e0; }
.rr-hydro-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rr-hydro-swatch { width: 16px; height: 0; border-top: 2px solid #e8c547; display: inline-block; }
.rr-hydro-swatch.is-sim { border-top-color: #3d9cf0; }
.rr-hydro-swatch.is-obs { border-top-color: #e8c547; border-top-style: dashed; }
.rr-hydro-swatch.is-rain {
  width: 12px; height: 8px; border: none;
  background: rgba(74, 144, 217, 0.7);
}
.rr-hydro-canvas-wrap {
  flex: 1; min-height: 280px; border: 1px solid rgba(120, 150, 180, 0.28);
  border-radius: 8px; overflow: hidden; background: #101820;
}
#rrHydroChart, #namHydroChart { display: block; width: 100%; height: 100%; cursor: crosshair; }
.rr-hydro-meta { margin: 0; font-size: 11px; color: #aeb9c6; min-height: 16px; }
@media (max-width: 840px) {
  .rr-params-layout { flex-direction: column; }
  .rr-params-body { flex: none; width: 100%; max-height: 36vh; }
  .rr-hydro-canvas-wrap { min-height: 220px; }
}
.rr-params-group {
  margin: 0; border: 1px solid rgba(120, 150, 180, 0.28); border-radius: 8px; padding: 6px 10px 10px;
}
.rr-params-group legend { padding: 0 6px; font-size: 12px; font-weight: 650; color: #9ec7ef; }
.rr-params-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.rr-params-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #c5d3e0; }
.rr-params-fields input {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(61, 156, 240, 0.4);
  border-radius: 6px; padding: 4px 6px; background: rgba(18, 24, 32, 0.92); color: #e8f1fa; font: inherit;
}
#rrParamsCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
#rrParamsInput, #rrParamsSave {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#rrParamsCalibrate { border: none; background: #2f7fc4; color: #fff; font-weight: 600; }
#rrParamsSave:disabled, #rrParamsCalibrate:disabled { opacity: 0.55; cursor: wait; }
#namParamsCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
#namParamsInput, #namParamsSave {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#namParamsCalibrate { border: none; background: #2f7fc4; color: #fff; font-weight: 600; }
#namParamsSave:disabled, #namParamsCalibrate:disabled { opacity: 0.55; cursor: wait; }

.rr-input-card { width: min(920px, 96vw); max-height: min(90vh, 820px); min-height: min(56vh, 480px); }
.rr-input-table-wrap { min-height: 280px; }
.rr-input-card .sv-manning-table input[data-k="hour"] { width: 64px; }
.rr-input-card .sv-manning-table input[data-k="timeseries"] { width: 138px; }
.rr-input-card .sv-manning-table input[data-k="rainfall_mm"],
.rr-input-card .sv-manning-table input[data-k="pet_mm"],
.rr-input-card .sv-manning-table input[data-k="q_m3s"] { width: 88px; }
.rr-input-del {
  border: 1px solid rgba(248, 113, 113, 0.45); background: transparent;
  color: #fca5a5; border-radius: 6px; padding: 2px 8px; cursor: pointer; font: inherit;
}
#rrInputCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
#rrInputSave, #rrInputFillBtn, #rrInputAddBtn {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#rrInputSave { background: #2f7fc4; border: none; color: #fff; }
#rrInputSave:disabled { opacity: 0.55; cursor: wait; }

.sv-input-card { width: min(980px, 96vw); }
.sv-input-card .sv-manning-table input[data-k="q_m3s"],
.sv-input-card .sv-manning-table input[data-k="h_down_m"],
.sv-input-card .sv-manning-table input[data-k="h_na1_m"] { width: 96px; }
#svInputFillQ, #svInputFillH, #svInputFillHna1 { width: 72px; }
#svInputCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
#svInputSave, #svInputFillBtn, #svInputAddBtn {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#svInputSave { background: #2f7fc4; border: none; color: #fff; }
#svInputSave:disabled { opacity: 0.55; cursor: wait; }

.boundary-stations-card { width: min(1240px, 98vw); }
.boundary-stations-toolbar label { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.boundary-stations-card .sv-manning-table input[data-k="id"] { width: 72px; }
.boundary-stations-card .sv-manning-table input[data-k="name"] { width: 150px; }
.boundary-stations-card .sv-manning-table select[data-k="kind"] { width: 64px; }
.boundary-stations-card .sv-manning-table select[data-k="reach"] { width: 148px; }
#boundaryStationsReachFilter, #boundaryStationsReach { min-width: 140px; }
.boundary-stations-card .sv-manning-table input[data-k="lon"],
.boundary-stations-card .sv-manning-table input[data-k="lat"] { width: 92px; }
.boundary-stations-card .sv-manning-table input[data-k="station_km"] { width: 56px; }
.boundary-stations-card .sv-manning-table input[data-k="file"] { width: 220px; }
.boundary-file-cell { display: flex; align-items: center; gap: 4px; min-width: 280px; }
.boundary-file-browse {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(120, 150, 180, 0.45);
  background: rgba(47, 127, 196, 0.18);
  color: #d7e7f7;
  cursor: pointer;
}
.boundary-browse-card { width: min(560px, 94vw); z-index: 10080; }
.boundary-browse-path {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  color: #c9d7e6;
}
#boundaryBrowseUp {
  min-width: 36px;
  padding: 4px 8px;
}
.boundary-browse-list {
  max-height: min(52vh, 420px);
  overflow: auto;
  border: 1px solid rgba(120, 150, 180, 0.28);
  border-radius: 8px;
  background: rgba(8, 16, 28, 0.55);
}
.boundary-browse-item {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(120, 150, 180, 0.12);
  background: transparent;
  color: #e8eef5;
  cursor: pointer;
  font-size: 13px;
}
.boundary-browse-item:hover { background: rgba(47, 127, 196, 0.22); }
.boundary-browse-item.is-dir { color: #9fd0ff; font-weight: 600; }
.boundary-browse-item.is-file { color: #d7e7f7; }
.boundary-browse-item.is-selected {
  background: rgba(47, 127, 196, 0.35);
  outline: 1px solid rgba(110, 180, 255, 0.55);
}
.boundary-browse-columns-wrap {
  margin-top: 10px;
  border: 1px solid rgba(120, 150, 180, 0.28);
  border-radius: 8px;
  background: rgba(8, 16, 28, 0.55);
  padding: 8px;
}
.boundary-browse-columns-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: #9fd0ff;
}
.boundary-browse-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}
.boundary-browse-col {
  border: 1px solid rgba(120, 150, 180, 0.4);
  background: rgba(47, 127, 196, 0.16);
  color: #e8eef5;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
}
.boundary-browse-col:hover {
  background: rgba(47, 127, 196, 0.35);
}
.boundary-browse-empty { padding: 16px; color: #93a4b8; font-size: 13px; }
#boundaryBrowseCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
.boundary-stations-card .sv-manning-table input[data-k="value_col"] { width: 88px; }
.boundary-stations-card .sv-manning-table input[data-k="unit"] { width: 52px; }
.boundary-file-ok { color: #6ee7b7; font-weight: 650; }
.boundary-file-miss { color: #ffb4b4; font-weight: 650; }
#boundaryStationsCancel { background: transparent; color: #aeb9c6; border: 1px solid rgba(120, 150, 180, 0.35); }
#boundaryStationsSave, #boundaryStationsAddBtn, #boundaryStationsResetBtn {
  border: 1px solid rgba(61, 156, 240, 0.55); background: rgba(18, 24, 32, 0.92);
  color: #e8f1fa; font-weight: 600;
}
#boundaryStationsSave { background: #2f7fc4; border: none; color: #fff; }
#boundaryStationsSave:disabled, #boundaryStationsResetBtn:disabled { opacity: 0.55; cursor: wait; }
.river-net-card {
  width: min(1280px, 98vw);
  height: min(860px, 94vh);
  max-height: 94vh;
  overflow: hidden;
}
.river-net-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.river-net-head h1 { margin: 0; }
.river-net-head .flow3d-close-btn { flex: 0 0 auto; }
.river-net-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0;
}
.river-net-toolbar button {
  background: #243140; color: #d7e4f2; border: 1px solid rgba(120, 160, 200, 0.35);
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.river-net-toolbar button.is-active { background: #2f7fc4; border-color: #2f7fc4; color: #fff; }
#riverNetBuild { background: #1f6feb; border-color: #1f6feb; color: #fff; }
#riverNetBuild:disabled { opacity: 0.55; cursor: wait; }
.river-net-xs {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #c5d7ea;
}
.river-net-xs input {
  width: 88px; background: #0e1620; color: #e8f1fa;
  border: 1px solid rgba(120, 160, 200, 0.45); border-radius: 6px; padding: 4px 8px;
}
.river-net-xs input:disabled { opacity: 0.55; }
.river-net-status { margin-left: auto; font-size: 12px; color: #9ec4e8; }
.river-net-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px; min-height: 0; flex: 1 1 auto;
}
.river-net-toolbar .fm-menu-panel { min-width: 210px; z-index: 6; }
.river-net-toolbar .fm-menu-panel button { width: 100%; text-align: left; }
.river-net-toolbar .fm-menu-panel button.is-active { background: #2f7fc4; border-color: #2f7fc4; color: #fff; }
.river-net-map-wrap {
  position: relative; min-height: 420px; background: #0e1620;
  border: 1px solid rgba(90, 130, 170, 0.35); border-radius: 8px; overflow: hidden;
}
#riverNetCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
#riverNetCanvas.is-drag { cursor: grabbing; }
#riverNetCanvas.is-draw { cursor: crosshair; }
.river-net-legend {
  position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px;
  background: rgba(14, 22, 32, 0.82); border-radius: 6px; padding: 6px 8px;
  font-size: 11px; color: #d7e4f2;
}
.river-net-legend i {
  display: inline-block; width: 14px; height: 3px; margin-right: 4px; vertical-align: middle;
}
.river-net-legend i.is-main { background: #38bdf8; }
.river-net-legend i.is-trib { background: #fb923c; }
.river-net-legend i.is-xs { background: #e2e8f0; height: 10px; width: 2px; }
.river-net-legend i.is-q { background: #34d399; height: 10px; width: 10px; }
.river-net-legend i.is-h {
  width: 0; height: 0; background: transparent;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #60a5fa;
}
.river-net-legend i.is-p { background: #c4b5fd; height: 10px; width: 10px; border-radius: 50%; }
.river-net-legend i.is-pet { background: #fbbf24; height: 10px; width: 10px; border-radius: 50%; }
.river-net-legend i.is-st {
  width: 8px; height: 8px; background: #f43f5e; transform: rotate(45deg); margin: 0 6px 0 2px;
}
.river-net-osm {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  background: rgba(255, 255, 255, 0.88); color: #1f2937;
  font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 4px;
  text-decoration: none;
}
.river-net-osm:hover { text-decoration: underline; }
.river-net-side {
  min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px;
}
.river-net-side h2 { margin: 0; font-size: 14px; }
#riverNetProfile {
  width: 100%; height: 220px; background: #101820;
  border: 1px solid rgba(90, 130, 170, 0.28); border-radius: 6px;
}
.river-net-xs-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.river-net-xs-edit-head, .river-net-add-xs {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px;
}
.river-net-xs-edit-head label, .river-net-add-xs label {
  display: flex; align-items: center; gap: 6px; margin: 0;
}
.river-net-xs-edit input {
  width: 88px; background: #0f1722; color: #e8f1fa;
  border: 1px solid rgba(120, 150, 180, 0.4); border-radius: 4px; padding: 3px 6px;
}
.river-net-xs-scroll { max-height: 168px; overflow: auto; border: 1px solid rgba(90, 130, 170, 0.28); border-radius: 6px; }
#riverNetXsTable { width: 100%; border-collapse: collapse; font-size: 12px; }
#riverNetXsTable th, #riverNetXsTable td { padding: 3px 4px; text-align: left; }
#riverNetXsTable th { position: sticky; top: 0; background: #152232; color: #c5d0dc; }
#riverNetXsTable input { width: 100%; box-sizing: border-box; }
.river-net-xs-del {
  background: transparent; color: #ffb4b4; border: none; cursor: pointer; padding: 0 4px;
}
#riverNetXsAddPt, #riverNetXsAdd {
  margin-top: 0; background: transparent; color: #dbe7f3;
  border: 1px solid rgba(120, 160, 200, 0.45); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
#riverNetXsSave {
  margin-top: 0; background: #2f7fc4; color: #fff; border: none;
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
.river-net-n, .river-net-bc label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-top: 8px;
}
.river-net-n input, .river-net-bc input, .river-net-bc select {
  background: #0f1722; color: #e8f1fa; border: 1px solid rgba(120, 150, 180, 0.4);
  border-radius: 4px; padding: 4px 6px;
}
.river-net-bc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.river-net-bc .river-net-file { grid-column: 1 / -1; }
#riverNetSaveN, #riverNetSaveBc, #riverNetSaveSt, #riverNetDrawSave {
  margin-top: 10px; background: #2f7fc4; color: #fff; border: none;
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
#riverNetDrawUndo, #riverNetDrawClear, #riverNetDrawDelete,
#riverNetDeleteBc, #riverNetDeleteSt {
  margin-top: 10px; background: transparent; color: #ffb4b4;
  border: 1px solid rgba(255, 140, 140, 0.45); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
.river-net-bc-actions { display: flex; gap: 8px; }
#riverNetSaveN:disabled, #riverNetSaveBc:disabled, #riverNetSaveSt:disabled,
#riverNetDrawDelete:disabled, #riverNetDeleteSt:disabled { opacity: 0.55; cursor: wait; }
#riverNetStForm .construction-item { margin-top: 8px; }
#riverNetStForm .construction-grid { grid-template-columns: 1fr 1fr; }
#riverNetStForm .construction-item-head { flex-wrap: wrap; }
#riverNetStForm .construction-item-head .cf-id,
#riverNetStForm .construction-item-head .cf-name,
#riverNetStForm .construction-item-head .cf-type,
#riverNetStForm .construction-item-head .cf-reach,
#riverNetStForm .construction-item-head .cf-km { width: auto; flex: 1 1 45%; }
#riverNetStForm .construction-item-head .rr-input-del { display: none; }
#riverNetStForm .res-layout,
#riverNetStForm .res-card-gates { grid-template-columns: 1fr; }
#riverNetStForm .res-card-gates h3,
#riverNetStForm .res-card-gates .cf-gates { grid-column: 1; }
#riverNetStForm .outlet-gate-widths { max-width: none; }
#riverNetStForm .construction-grid .cf-file,
#riverNetStForm .construction-grid .cf-col { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .river-net-body { grid-template-columns: 1fr; }
  .river-net-map-wrap { min-height: 280px; }
}

.constructions-card {
  width: min(720px, 96vw);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
}
.constructions-card .sv-manning-hint {
  opacity: 1;
  color: #b8c9da;
}
.constructions-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  color: #e8f1fa;
}
.constructions-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 8px;
}
.constructions-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 0;
  font-size: 12px;
  color: #d7e4f2;
  font-weight: 600;
}
#constructionsTypeFilter,
#constructionsReach,
.constructions-toolbar select {
  min-width: 120px;
  max-width: 180px;
  border: 1px solid rgba(90, 170, 235, 0.55);
  border-radius: 6px;
  padding: 5px 8px;
  background: #101820;
  color: #f2f7fc;
  font: inherit;
}
#constructionsAddBtn,
#constructionsResetBtn,
#constructionsLoadCsvBtn {
  border: 1px solid rgba(90, 170, 235, 0.55);
  background: #1a2736;
  color: #f2f7fc;
  font-weight: 600;
}
.constructions-list {
  flex: 1;
  min-height: 160px;
  max-height: min(58vh, 520px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 8px;
}
.constructions-empty {
  margin: 12px 4px;
  padding: 14px 12px;
  border: 1px dashed rgba(120, 160, 200, 0.45);
  border-radius: 8px;
  color: #b8c9da;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(8, 14, 22, 0.35);
}
.construction-item {
  border: 1px solid rgba(90, 170, 235, 0.42);
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: #1a2433;
}
.construction-item[hidden] { display: none !important; }
.construction-item-head {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(140, 175, 210, 0.28);
}
.construction-item-head .cf-id { width: 72px; flex: 0 0 72px; }
.construction-item-head .cf-name { flex: 1 1 auto; min-width: 0; }
.construction-item-head .cf-type,
.construction-item-head .cf-reach { width: 118px; flex: 0 0 118px; }
.construction-item-head .cf-km { width: 72px; flex: 0 0 72px; }
.construction-item-head .rr-input-del {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-bottom: 1px;
  border-radius: 6px;
  border: 1px solid rgba(255, 150, 150, 0.45);
  background: #2a1c22;
  color: #ffc9c9;
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
}
.construction-item-head .rr-input-del:hover {
  background: #3a242c;
  color: #ffe0e0;
}
.construction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
.construction-grid .cf-span-2 { grid-column: span 2; }
.construction-grid .cf-gates { grid-column: 1 / -1; }
.res-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 10px;
  margin-top: 10px;
}
.res-layout[hidden] { display: none !important; }
.res-card {
  border: 1px solid rgba(90, 170, 235, 0.28);
  border-radius: 8px;
  padding: 8px 10px 10px;
  background: rgba(8, 16, 26, 0.4);
}
.res-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #9ec8ea;
}
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.res-card-gates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  column-gap: 12px;
  align-items: start;
}
.res-card-gates h3 { grid-column: 1 / -1; }
.res-card .cf-count { max-width: 140px; }
.outlet-gate-widths {
  max-width: 220px;
}
.outlet-gate-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(90, 170, 235, 0.45);
  border-radius: 6px;
  overflow: hidden;
}
.outlet-gate-table th {
  padding: 6px 8px;
  background: #152232;
  color: #c5d6e8;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid rgba(90, 170, 235, 0.35);
}
.outlet-gate-table th:first-child,
.outlet-gate-table td.outlet-gate-no { width: 64px; }
.outlet-gate-table td {
  border-bottom: 1px solid rgba(90, 170, 235, 0.22);
}
.outlet-gate-table tbody tr:last-child td { border-bottom: 0; }
.outlet-gate-table td.outlet-gate-no {
  padding: 0 8px;
  color: #c5d6e8;
  font-size: 12px;
  font-weight: 600;
  background: #121c28;
}
.construction-field .outlet-gate-table input,
.construction-field .outlet-gate-table select {
  border: 0;
  border-radius: 0;
  background: #0e1620;
  box-shadow: none;
}
.construction-field .outlet-gate-table input:focus,
.construction-field .outlet-gate-table select:focus {
  box-shadow: inset 0 0 0 2px rgba(94, 180, 245, 0.85);
}
.construction-field .outlet-gate-table input:disabled {
  color: #6f8296;
  cursor: not-allowed;
}
.outlet-gate-table:not(.show-gate-modes) .outlet-gate-extra { display: none; }
.res-card-gates:has(.show-gate-modes) { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.res-card-gates:has(.show-gate-modes) .cf-gates { grid-column: 1; }
.outlet-gate-widths:has(.show-gate-modes) { max-width: 460px; }
.outlet-gate-empty {
  font-size: 12px;
  color: #9eb4c9;
  font-weight: 500;
  padding: 6px 0;
}
.construction-grid .cf-file { grid-column: 1 / -2; }
.construction-grid .cf-col { grid-column: -2 / -1; }
.construction-field[hidden] { display: none !important; }
.construction-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: #e8f1fa;
}
.construction-field > span {
  font-size: 11px;
  line-height: 1.2;
  color: #c5d6e8;
  font-weight: 600;
}
.construction-field input,
.construction-field select {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  font-size: 13px;
  border: 1px solid rgba(90, 170, 235, 0.55);
  border-radius: 6px;
  padding: 6px 8px;
  background: #0e1620;
  color: #f2f7fc;
  font-family: inherit;
}
.construction-field input[readonly] {
  background: #182230;
  color: #d5e6f5;
}
.construction-field input:focus,
.construction-field select:focus,
#constructionsTypeFilter:focus,
#constructionsReach:focus {
  outline: none;
  border-color: #5eb4f5;
  box-shadow: 0 0 0 2px rgba(61, 156, 240, 0.28);
}
.construction-field select option {
  background: #151c26;
  color: #f2f7fc;
}
.construction-field .boundary-file-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.construction-field .boundary-file-cell input { flex: 1 1 auto; }
.construction-field .boundary-file-browse {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(90, 170, 235, 0.55);
  background: #1e3145;
  color: #e8f4ff;
  cursor: pointer;
}
.construction-field .boundary-file-browse:hover {
  background: #27405a;
}
@media (max-width: 640px) {
  .construction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-layout,
  .res-card-gates { grid-template-columns: 1fr; }
  .res-card-gates h3,
  .res-card-gates .cf-gates { grid-column: 1; }
  .construction-grid .cf-gates { grid-column: 1 / -1; }
  .construction-grid .cf-file { grid-column: 1 / -1; }
  .construction-grid .cf-col { grid-column: 1 / -1; }
  .construction-item-head { flex-wrap: wrap; }
  .construction-item-head .cf-type,
  .construction-item-head .cf-reach { flex: 1 1 45%; width: auto; }
}
#constructionsCancel {
  background: #1a2736;
  color: #e8f1fa;
  border: 1px solid rgba(90, 170, 235, 0.45);
  font-weight: 600;
}
#constructionsSave, #constructionsAddBtn, #constructionsResetBtn, #constructionsLoadCsvBtn {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
#constructionsSave { background: #2f7fc4; border: none; color: #fff; font-weight: 650; }
#constructionsSave:disabled, #constructionsResetBtn:disabled, #constructionsLoadCsvBtn:disabled { opacity: 0.55; cursor: wait; }

.hydro1d-progress-card {
  width: min(560px, 100%); max-height: min(88vh, 640px);
  display: flex; flex-direction: column; background: #151c26;
  border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 12px;
  padding: 14px 16px 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  box-sizing: border-box; color: #e8f1fa;
}
.hydro1d-progress-card h1 { margin: 0; font-size: 16px; font-weight: 650; }
.hydro1d-progress-status { margin: 8px 0 2px; font-size: 13px; font-weight: 650; }
.hydro1d-progress-status.is-running { color: #7ec8ff; }
.hydro1d-progress-status.is-ok { color: #7ddea0; }
.hydro1d-progress-status.is-error { color: #ffb4b4; }
.hydro1d-progress-meta { margin: 0 0 8px; font-size: 12px; opacity: 0.8; }
.hydro1d-progress-log {
  flex: 1; min-height: 180px; max-height: 360px; margin: 0; overflow: auto;
  border: 1px solid rgba(120, 150, 180, 0.28); border-radius: 8px;
  padding: 8px 10px; background: rgba(8, 12, 18, 0.9); color: #d5e4f2;
  font: 12px/1.45 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap; word-break: break-word;
}
#hydro1dProgressClose { background: #2f7fc4; color: #fff; border: none; font-weight: 600; }
#hydro1dProgressClose:disabled { opacity: 0.5; cursor: wait; }

#view3d {
  position: absolute; inset: 52px 0 0 0; z-index: 2;
  background: #0b1a2b;
}
#view3d canvas { display: block; width: 100%; height: 100%; }
body:not(.mode-3d) #view3d { display: none !important; }
body.mode-3d #map { display: none !important; }
.fm-actions button.is-active { background: #2f7fc4; border-color: #2f7fc4; color: #fff; }
#view2dBtn { border-color: rgba(110, 231, 183, 0.55); color: #bbf7d0; }

.dem3d-legend {
  position: absolute; z-index: 16; left: 12px; top: 64px;
  padding: 10px 12px; background: rgba(12, 28, 48, 0.88); color: #f2f6fb;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  font-size: 12px; line-height: 1.3; pointer-events: none; min-width: 72px;
}
.dem3d-legend-title { font-weight: 600; margin-bottom: 8px; }
.dem3d-legend-body { display: flex; align-items: stretch; gap: 8px; }
.dem3d-legend-bar {
  width: 18px; height: 140px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(to top, rgb(13,51,217) 0%, rgb(13,191,217) 20%, rgb(38,217,64) 40%, rgb(242,230,38) 60%, rgb(242,115,20) 80%, rgb(230,26,26) 100%);
}
.dem3d-legend-labels {
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 3.5em; font-variant-numeric: tabular-nums; font-size: 11px;
}
.dem3d-legend-hint { margin-top: 6px; opacity: 0.75; font-size: 10px; }

.dem3d-exag-label { display: block; font-weight: 500; font-size: 12px; }
.dem3d-exag-label input[type="range"] { width: 100%; margin-top: 4px; }
.dem3d-layer-toggle {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-weight: 500; font-size: 12px; cursor: pointer; user-select: none;
}
.dem3d-hint { margin-top: 8px; font-size: 12px; line-height: 1.35; color: #c5d0dc; }
.dem3d-attrib { margin-top: 8px; font-size: 10px; opacity: 0.75; }
.dem3d-attrib a { color: inherit; }

.fm-side .flood3d-legend {
  position: static; left: auto; bottom: auto; margin-top: 8px;
  padding: 0; background: transparent; box-shadow: none;
}

.flow3d-panel {
  position: absolute; z-index: 18; right: 12px; bottom: 12px;
  width: min(560px, calc(100vw - 24px)); padding: 10px 12px 8px;
  background: rgba(12, 18, 26, 0.92); color: #e8f1fa;
  border: 1px solid rgba(61, 156, 240, 0.4); border-radius: 10px;
}
body:not(.mode-3d) #flow3dPanel { display: none !important; }
.flow3d-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13px; font-weight: 650; margin-bottom: 6px;
}
.flow3d-close-btn {
  width: 26px; height: 26px; margin: 0; padding: 0;
  border: 1px solid rgba(61, 156, 240, 0.4); border-radius: 6px;
  background: transparent; color: #dbe7f3; font-size: 18px; cursor: pointer;
}
#flow3dChart { display: block; width: 100%; height: 210px; border-radius: 6px; background: #101820; }
#flow3dQChart { display: block; width: 100%; height: 150px; margin-top: 8px; border-radius: 6px; background: #101820; }
#flow3dQChart[hidden] { display: none !important; }
.flow3d-time-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.flow3d-time-row button {
  border: 1px solid rgba(61, 156, 240, 0.45); border-radius: 7px; padding: 4px 10px;
  background: rgba(18, 24, 32, 0.95); color: #e8f1fa; cursor: pointer; font-weight: 600;
}
.flow3d-time-row input[type="range"] { flex: 1; }
#flow3dTimeLabel, #flow3dRainLabel { white-space: nowrap; color: #c5d0dc; }

.flow-run-panel {
  position: absolute;
  z-index: 19;
  left: 14px;
  right: auto;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 10px 12px 12px;
  background: rgba(12, 20, 32, 0.94);
  color: #e8f1fa;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.flow-run-panel[hidden] { display: none !important; }
#flowRunPanel .flow3d-panel-head {
  width: 100%;
  gap: 8px;
}
#flowRunPanel .flow3d-panel-head span { white-space: nowrap; }
#flowRunPanel .flow3d-time-row {
  width: 100%;
  min-width: 220px;
  margin-top: 8px;
  flex-wrap: nowrap;
}
#flowRunPanel .flow3d-time-row input[type="range"] {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: none;
  width: auto;
}
body:not(.mode-3d) #flowRunPanel { display: none !important; }
.flow-run-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#flowRunTimeLabel, #flowRunRainLabel, #flowRunHLabel {
  white-space: nowrap;
  color: #c5d0dc;
}
#flowRunRainLabel { color: #9fd4ff; }
#flowRunHLabel { color: #7dd3fc; }
.flow-run-toggles {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: #d5e4f5;
}
.flow-run-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.flow-run-toggles input { margin: 0; accent-color: #38bdf8; }

.coord-pick-card {
  position: absolute; z-index: 17; left: 12px; bottom: 12px;
  width: min(340px, calc(100vw - 24px));
  padding: 10px 12px 10px;
  background: rgba(12, 20, 32, 0.94);
  border: 1px solid rgba(61, 156, 240, 0.4);
  border-radius: 10px;
  color: #e8f1fa;
}
.coord-pick-card[hidden] { display: none !important; }
.coord-pick-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13px; font-weight: 650; margin-bottom: 8px;
}
.coord-pick-dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.coord-pick-dl > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; }
.coord-pick-dl dt { margin: 0; font-size: 12px; color: #9eb0c2; font-weight: 600; }
.coord-pick-dl dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; word-break: break-word; }
.coord-pick-place { grid-template-columns: 72px 1fr; }
.coord-pick-copy {
  margin-top: 10px; width: 100%;
  border: 1px solid rgba(61, 156, 240, 0.45);
  border-radius: 8px; padding: 6px 10px;
  background: rgba(18, 24, 32, 0.95); color: #e8f1fa;
  font: 600 12px inherit; cursor: pointer;
}
.coord-pick-copy:hover { background: #2f7fc4; border-color: #2f7fc4; }

.measure-length-card { min-width: 260px; }
.measure-length-card .coord-pick-dl > div { grid-template-columns: 108px 1fr; }
.measure-length-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.measure-length-actions .coord-pick-copy { flex: 1; }
.measure-length-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: #9eb0c2;
  line-height: 1.35;
}

.structure-info-card {
  left: auto; right: 12px; bottom: 12px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  display: flex; flex-direction: column;
}
.structure-info-card[hidden] { display: none !important; }
.structure-info-dl {
  overflow: auto; max-height: min(58vh, 440px);
  padding-right: 2px;
}
.structure-info-dl > div { grid-template-columns: 130px 1fr; }