* { 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; }

.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; }
.fm-actions button, .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: 600 13px inherit; cursor: pointer;
}
#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-size: 13px; 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, #rrParamsModal, #namParamsModal, #rrInputModal, #svInputModal, #svEvalModal, #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 { z-index: 10076; }
#svEvalModal { z-index: 10077; }
#svManningModal[hidden], #rrParamsModal[hidden], #namParamsModal[hidden], #rrInputModal[hidden], #svInputModal[hidden], #svEvalModal[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; }
.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-manning-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
#svManningModal .sv-manning-card { width: min(780px, 96vw); }
#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, #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;
}
#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; }

.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; }