/* Unified workbench design system. Shared shell and components are intentionally page-agnostic. */
:root {
  color-scheme: dark;
  --wb-bg: #080d12;
  --wb-shell: #0b1117;
  --wb-surface-1: #10171e;
  --wb-surface-2: #151e26;
  --wb-surface-3: #1b2630;
  --wb-border: #27333d;
  --wb-border-strong: #3a4a56;
  --wb-text: #f0f5f7;
  --wb-muted: #9aabb4;
  --wb-subtle: #6e808a;
  --wb-accent: #45d8c2;
  --wb-accent-hover: #66e7d4;
  --wb-accent-ink: #052c26;
  --wb-blue: #35a7ff;
  --wb-green: #31d37c;
  --wb-yellow: #ffd84d;
  --wb-red: #ff5c78;
  --wb-purple: #c58aff;
  --wb-orange: #ff9f43;
  --wb-focus: #79e4ef;
  --wb-radius: 6px;
  --wb-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  --shell-height: 64px;
  --project-journey-height: 44px;
  --page-toolbar-height: 66px;
  font-family: "Segoe UI Variable", "Segoe UI", "Yu Gothic UI", "Microsoft YaHei UI", Arial, sans-serif;
}

.app-workbench, .app-workbench * { box-sizing: border-box; letter-spacing: 0; }
.app-workbench { min-width: 320px; margin: 0; background: var(--wb-bg); color: var(--wb-text); font-family: inherit; scrollbar-color: #455763 #10171e; }
.app-workbench a { color: #8ee9df; }
.app-workbench h1, .app-workbench h2, .app-workbench h3, .app-workbench p { margin-top: 0; }
.app-workbench h1, .app-workbench h2, .app-workbench h3 { color: var(--wb-text); font-weight: 700; }
.app-workbench small, .app-workbench .help { color: var(--wb-muted); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-heading-icon .ui-icon, .section-icon .ui-icon { width: 20px; height: 20px; }

/* Shared application shell */
#appShell { flex: 0 0 auto; position: relative; z-index: 100; }
.global-shell { position: sticky; top: 0; z-index: 100; height: var(--shell-height); display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--wb-border); background: var(--wb-shell); box-shadow: 0 5px 18px rgba(0, 0, 0, .18); }
.shell-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--wb-text) !important; text-decoration: none; }
.shell-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #2d7168; border-radius: 6px; background: #102b29; color: var(--wb-accent); }
.shell-brand-mark .ui-icon { width: 22px; height: 22px; }
.shell-brand-copy { min-width: 0; }
.shell-brand-copy strong, .shell-brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-brand-copy strong { font-size: 14px; line-height: 18px; }
.shell-brand-copy small { margin-top: 1px; color: var(--wb-subtle); font-size: 10px; line-height: 14px; text-transform: uppercase; }
.shell-nav { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.shell-nav-item { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px solid transparent; border-radius: 5px; color: #91a4ad !important; text-decoration: none; font-size: 12px; font-weight: 650; white-space: nowrap; }
.shell-nav-item:hover { border-color: #263741; background: #141e25; color: #f4f7f8 !important; }
.shell-nav-item.active { border-color: #31554f; background: #152925; color: var(--wb-accent-hover) !important; }
.shell-nav-item.active::after { content: ""; position: absolute; right: 10px; bottom: -9px; left: 10px; height: 2px; background: var(--wb-accent); }
.shell-nav-item .ui-icon { width: 17px; height: 17px; }
.shell-utilities { display: flex; align-items: center; gap: 8px; }
.shell-reset { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--wb-border); border-radius: 5px; background: #101a20; color: var(--wb-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.shell-reset:hover { border-color: var(--wb-accent); color: var(--wb-text); background: #13252a; }
.shell-reset .ui-icon { width: 13px; height: 13px; }
.connection-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid #285344; border-radius: 15px; background: #11241d; color: #8ce3b2; font-size: 11px; }
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-green); box-shadow: 0 0 0 3px rgba(49, 211, 124, .12); }
.connection-pill.offline { border-color: #695a31; background: #2a2415; color: #f2ca69; }
.connection-pill.offline i { background: var(--wb-yellow); }
.shell-language { display: flex; align-items: center; gap: 5px; height: 34px; margin: 0; padding: 0 5px 0 9px; border: 1px solid var(--wb-border); border-radius: 5px; background: var(--wb-surface-1); color: var(--wb-muted); }
.shell-language select { width: 48px !important; min-height: 28px !important; margin: 0 !important; padding: 3px !important; border: 0 !important; background: transparent !important; font-size: 11px; }
.project-journey { height: var(--project-journey-height); display: grid; grid-template-columns: 238px minmax(0, 1fr); align-items: stretch; gap: 8px; padding: 4px 12px; border-bottom: 1px solid var(--wb-border); background: #0a1116; }
.project-journey[hidden] { display: none; }
.journey-project { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 8px; padding: 0 6px; }
.journey-project small, .journey-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-project small { grid-column: 1 / -1; color: #607782; font-size: 8px; font-style: normal; font-weight: 800; }
.journey-project strong { color: #cdd8dc; font-size: 11px; }
.journey-project em { min-width: 30px; padding: 2px 5px; border: 1px solid #36515a; border-radius: 10px; color: #9eb1b8; font-size: 9px; font-style: normal; text-align: center; }
.journey-stages { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(104px, 1fr)); gap: 3px; }
.journey-stage { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 3px 7px; border: 1px solid transparent; border-radius: 4px; color: #8fa1a9 !important; text-decoration: none; }
.journey-stage:hover { border-color: #33454f; background: #131d23; color: #eef4f6 !important; }
.journey-stage.current { border-color: #345d56; background: #142621; }
.journey-stage[data-state="complete"] { color: #b9cac8 !important; }
.journey-icon { position: relative; display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid #3e5059; border-radius: 4px; background: #121c22; color: #7d929b; }
.journey-stage[data-state="complete"] .journey-icon { border-color: #2f6556; color: #62d9b5; }
.journey-stage[data-state="missing"] .journey-icon { border-color: #665631; color: #e2bd5d; }
.journey-icon .ui-icon { width: 14px; height: 14px; }
.journey-icon i { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #0a1116; border-radius: 50%; background: #2b6958; color: white; font-size: 8px; font-style: normal; font-weight: 900; }
.journey-stage[data-state="missing"] .journey-icon i { background: #9b7421; }
.journey-stage b, .journey-stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-stage b { font-size: 10px; }
.journey-stage small { margin-top: 1px; color: #627780; font-size: 8px; }

/* Shared page context */
.page-toolbar { min-height: var(--page-toolbar-height); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--wb-border); background: #0e151b; }
.page-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-heading > span:nth-child(2) { display: block; min-width: 0; }
.page-heading > span:nth-child(2) > small, .page-heading > span:nth-child(2) > strong, .page-heading > span:nth-child(2) > span { display: block; }
.page-heading > span:nth-child(2) > small { color: #5f7782; font-size: 9px; font-weight: 800; line-height: 13px; }
.page-heading > span:nth-child(2) > strong { overflow: hidden; color: var(--wb-text); font-size: 15px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.page-heading > span:nth-child(2) > span { overflow: hidden; color: var(--wb-muted); font-size: 10px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.page-heading-icon, .section-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #28544e; border-radius: 6px; background: #102522; color: var(--wb-accent); }
.status-tag { display: inline-flex !important; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid #37515b; border-radius: 12px; background: #17232a; color: #b8c8ce; font-size: 10px !important; font-weight: 700; white-space: nowrap; }
.status-tag::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--wb-accent); }
.section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.section-title h1, .section-title h2 { margin: 0; font-size: 16px; }
.section-title .section-icon { width: 34px; height: 34px; }
.eyebrow { display: block; margin-bottom: 2px; color: #607983; font-size: 9px; font-weight: 800; line-height: 12px; text-transform: uppercase; }

/* Shared controls */
.app-workbench button, .app-workbench input, .app-workbench select, .app-workbench textarea { font: inherit; color: var(--wb-text); }
.app-workbench button, .button-link { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--wb-border-strong); border-radius: 5px; background: var(--wb-surface-2); color: #dce6e9; box-shadow: none; font-size: 12px; font-weight: 650; text-decoration: none; cursor: pointer; }
.app-workbench button:hover, .button-link:hover { border-color: #58707c; background: var(--wb-surface-3); color: #fff; }
.app-workbench button:active { background: #22313a; }
.app-workbench button.primary, .app-workbench .primary { border-color: #5be4d0; background: var(--wb-accent); color: var(--wb-accent-ink); font-weight: 800; }
.app-workbench button.primary:hover, .app-workbench .primary:hover { border-color: #8af0e0; background: var(--wb-accent-hover); }
.app-workbench button:disabled { cursor: not-allowed; opacity: .42; }
.app-workbench button:focus-visible, .app-workbench input:focus-visible, .app-workbench select:focus-visible, .app-workbench textarea:focus-visible, .app-workbench a:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
.app-workbench .with-icon .ui-icon { width: 15px; height: 15px; }
.app-workbench .icon-only { width: 34px; min-width: 34px; padding: 0; }
.app-workbench .icon-only .ui-icon { width: 17px; height: 17px; }
.app-workbench input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .app-workbench select, .app-workbench textarea { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--wb-border-strong); border-radius: 5px; background: #0b1217; color: var(--wb-text); box-shadow: none; }
.app-workbench input:hover, .app-workbench select:hover, .app-workbench textarea:hover { border-color: #5b727e; }
.app-workbench input:focus, .app-workbench select:focus, .app-workbench textarea:focus { border-color: var(--wb-accent); outline: 2px solid rgba(69, 216, 194, .16); outline-offset: 0; }
.app-workbench label { color: #c9d4d8; }
.app-workbench label > span:first-child { color: #aebdc3; font-size: 11px; }
.toolbar-cluster { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.plan-label { display: flex !important; align-items: center; gap: 7px; min-width: 220px; margin: 0 !important; }
.plan-label select { min-width: 150px; }
.plan-count { padding: 4px 7px; border-radius: 3px; background: #13241f; color: #79ddc0; font-size: 10px; white-space: nowrap; }
.full-action { width: 100%; margin-top: 10px; }
.inline-notice { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 9px 10px; border: 1px solid #2d4652; border-left: 3px solid var(--wb-blue); border-radius: 4px; background: #111d24; color: #b7c6cc; }
.inline-notice.subtle { border-left-color: #59717b; }
.inline-notice p { margin: 0; font-size: 11px; line-height: 1.5; }
.inline-notice .ui-icon { width: 16px; height: 16px; margin-top: 1px; color: #7ec8f5; }
.advanced-settings { margin: 10px 0; border-top: 1px solid var(--wb-border); border-bottom: 1px solid var(--wb-border); }
.advanced-settings > summary, .saved-heatmaps > summary { display: flex; align-items: center; gap: 7px; padding: 9px 1px; color: #b6c5ca; font-size: 11px; font-weight: 700; cursor: pointer; }
.advanced-settings[open] > summary { margin-bottom: 7px; color: var(--wb-text); }
.advanced-settings .ui-icon, .saved-heatmaps .ui-icon { width: 15px; height: 15px; }
.canvas-shell { position: relative; overflow: hidden; border: 1px solid var(--wb-border-strong); border-radius: 5px; background: #1c272e; }
.form-submit-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; padding: 0; list-style: none; border: 1px solid var(--wb-border); border-radius: 5px; overflow: hidden; background: var(--wb-border); }
.workflow-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; background: #111a21; }
.workflow-steps li.active { background: #142822; }
.workflow-steps b { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid #3d5660; border-radius: 50%; color: #8fa2aa; font-size: 10px; }
.workflow-steps li.active b { border-color: #4bcfbb; color: var(--wb-accent); }
.workflow-steps span, .workflow-steps small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-steps span { font-size: 11px; font-weight: 700; }
.workflow-steps small { margin-top: 2px; color: var(--wb-subtle); font-size: 9px; font-weight: 500; }

/* Map management */
.app-map, .app-simulation { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app-map .map-page-toolbar { flex: 0 0 auto; }
.app-map .mode { margin-left: 2px; }
.app-map .mode-toolbar { min-height: 48px; flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-bottom: 1px solid var(--wb-border); background: #0c1319; }
.app-map .mode-toolbar .mode-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: #71848d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.app-map .mode-toolbar button { border-color: transparent; background: transparent; color: #99aab2; }
.app-map .mode-toolbar button:hover { border-color: var(--wb-border); background: #162129; }
.app-map .mode-toolbar button.active { border-color: #37635b; background: #172c28; color: var(--wb-accent-hover); }
.app-map .mode-help { margin-left: auto; max-width: 460px; color: #8ea0a8; font-size: 10px; line-height: 1.4; }
.app-map main { flex: 1 1 auto; min-height: 0; height: auto; display: grid; grid-template-columns: 248px minmax(420px, 1fr) 380px; background: var(--wb-bg); }
.app-map aside { overflow: auto; padding: 12px; border-color: var(--wb-border); background: var(--wb-surface-1); }
.app-map .details { border-left: 1px solid var(--wb-border); }
.app-map aside section { margin: 0 0 12px; padding: 0 0 12px; border-color: var(--wb-border); }
.app-map .workflow-card { padding: 10px; border: 1px solid var(--wb-border); border-radius: 5px; background: #131e25; }
.app-map .workflow-card h2 { color: #dce5e8; font-size: 12px; }
.app-map .workflow-card p { color: #91a4ad; font-size: 11px; }
.app-map #mapWrap { border-right: 1px solid var(--wb-border); border-left: 1px solid var(--wb-border); background: #1c272e; }
.app-map #mapTip { border-color: #4d5f69; border-radius: 5px; background: rgba(10, 16, 21, .94); color: #e5edef; box-shadow: var(--wb-shadow); }
.app-map .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--wb-border); border-radius: 5px; background: #0b1217; }
.app-map .tabs button { min-width: 0; min-height: 34px; padding: 5px 6px; border: 0; background: transparent; color: #8498a1; font-size: 10px; }
.app-map .tabs button.active { background: var(--wb-surface-3); color: var(--wb-text); }
.app-map footer { flex: 0 0 28px; }

/* Projects */
.app-projects main { width: 100%; max-width: 1760px; min-height: calc(100vh - var(--shell-height) - var(--project-journey-height) - var(--page-toolbar-height) - 28px); margin: 0 auto; display: grid; grid-template-columns: 330px minmax(560px, 1fr); gap: 10px; padding: 10px; }
.app-projects section { border: 1px solid var(--wb-border); border-radius: var(--wb-radius); background: var(--wb-surface-1); box-shadow: none; }
.app-projects .project-list { align-self: stretch; }
.app-projects .project-row { padding: 11px 0; border-color: var(--wb-border); }
.app-projects .active-badge { padding: 3px 6px; border: 1px solid #32655c; border-radius: 10px; background: #142a25; color: #82e0cf; }
.app-projects .form-span { grid-column: 1 / -1; }
.app-projects #calibrationMap { width: 100%; height: min(60vh, 700px); border: 0; background: #1c272e; }

/* Analysis */
.app-analysis main { width: 100%; max-width: 1760px; min-height: calc(100vh - var(--shell-height) - var(--project-journey-height) - var(--page-toolbar-height) - 28px); margin: 0 auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "intro intro" "heatmap result" "route result" "obstacles obstacles"; gap: 10px; padding: 10px; align-items: start; }
.app-analysis section { border: 1px solid var(--wb-border); border-radius: var(--wb-radius); background: var(--wb-surface-1); }
.app-analysis .analysis-intro { grid-area: intro; }
.app-analysis .heatmap-settings { grid-area: heatmap; }
.app-analysis .route-settings { grid-area: route; }
.app-analysis .result { grid-area: result; min-height: 650px; }
.app-analysis .obstacle-settings { grid-area: obstacles; }
.workflow-banner { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 14px !important; background: #0d151b !important; }
.workflow-stage { display: flex; align-items: center; gap: 8px; min-width: 0; color: #8ea1a9; }
.workflow-stage > b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #40515b; border-radius: 50%; font-size: 9px; }
.workflow-stage > .ui-icon { width: 17px; height: 17px; }
.workflow-stage span, .workflow-stage small { display: block; white-space: nowrap; }
.workflow-stage span { font-size: 11px; font-weight: 700; }
.workflow-stage small { margin-top: 2px; color: #667a83; font-size: 9px; font-weight: 500; }
.workflow-stage.active { color: var(--wb-accent); }
.workflow-stage.active > b { border-color: #47cdb9; }
.workflow-arrow { width: 14px; height: 14px; color: #455963; }
.app-analysis .visualization-panel { padding: 12px; overflow: hidden; }
.app-analysis .result-title { padding-bottom: 9px; border-bottom: 1px solid var(--wb-border); }
.app-analysis .result-title .status-tag { margin-left: auto; }
.visualization-stage { min-height: 520px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--wb-border); border-radius: 5px; background: #0b1116; }
.app-analysis .visualization-stage img { width: 100%; max-height: calc(100vh - 235px); margin: 0; border: 0; object-fit: contain; background: #edf1f2; }
.empty-state { max-width: 360px; margin: auto; padding: 30px; color: var(--wb-muted); text-align: center; line-height: 1.6; }
.app-analysis .control-panel { padding: 13px; }
.app-analysis .control-grid { gap: 7px; }
.app-analysis #obstacleMap { width: 100%; height: 460px; border: 0; background: #1c272e; }
.app-analysis .obstacle-settings details > summary { display: flex; align-items: center; gap: 8px; color: var(--wb-text); }
.app-analysis .summary-note { margin-left: auto; color: var(--wb-subtle); font-size: 10px; font-weight: 500; }

/* Field measurement shares the same system, with stronger touch targets. */
.app-field { background: var(--wb-bg); color: var(--wb-text); }
.app-field .field-page-toolbar { position: relative; z-index: 6; }
.app-field .field-page-toolbar .page-heading { flex: 1; }
.app-field #offlineReady[data-ready="true"] { border-color: #2b6c54; color: #88e5b3; }
.app-field #offlineReady[data-ready="false"] { border-color: #6b5a2f; color: #f1c965; }
.app-field .mobile-nav { position: sticky; top: var(--shell-height); z-index: 8; display: flex; justify-content: center; gap: 3px; padding: 4px; border-bottom: 1px solid var(--wb-border); background: #0d151b; }
.app-field .mobile-nav button { min-width: 138px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8ea0a8; }
.app-field .mobile-nav button.active { border-color: #315c54; background: #162923; color: var(--wb-accent); }
.app-field main { max-width: 1540px; }
.app-field section, .app-field .utilities { border-color: var(--wb-border); background: var(--wb-surface-1); color: var(--wb-text); box-shadow: none; }
.app-field h1, .app-field h2, .app-field h3 { color: var(--wb-text); }
.app-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .app-field select, .app-field textarea { border-color: var(--wb-border-strong); background: #0b1217; color: var(--wb-text); }
.app-field button { border-color: var(--wb-border-strong); background: var(--wb-surface-2); color: var(--wb-text); }
.app-field button:hover { background: var(--wb-surface-3); }
.app-field button.primary { border-color: #5be4d0; background: var(--wb-accent); color: var(--wb-accent-ink); }
.app-field .campaign-card { border-top: 3px solid var(--wb-accent); }
.app-field .map-card { border-color: #3a4c57; background: var(--wb-surface-1); box-shadow: var(--wb-shadow); }
.app-field .map-tools, .app-field .map-card > p, .app-field .map-legend { border-color: var(--wb-border); background: #111a21; color: #9fb0b7; }
.app-field .quick-mode-bar { border-color: var(--wb-border); background: #12221f; }
.app-field .switch-control small, .app-field .field-condition, .app-field .form-heading p, .app-field .plan-notice, .app-field .keyboard-hint, .app-field .campaign-card #progressText, .app-field .session-row span { color: var(--wb-muted); }
.app-field .switch-track { border-color: #4e626d; background: #293740; }
.app-field .switch-control input:checked + .switch-track { border-color: #49d7c2; background: #239f8e; }
.app-field #quickModeState { border-color: #37655b; background: #132923; color: #78dfcc; }
.app-field .plan-stats { border-color: var(--wb-border); }
.app-field .plan-stats div { border-color: var(--wb-border); }
.app-field .plan-stats span { color: var(--wb-muted); }
.app-field .progress { background: #26343c; }
.app-field .progress div { background: var(--wb-green); }
.app-field .point-card { border-left-color: var(--wb-yellow); }
.app-field .point-heading #fieldId { color: var(--wb-yellow); }
.app-field .measurement-card { border-top-color: var(--wb-blue); }
.app-field .condition-chip { border-color: #345b67; background: #12252c; color: #8bdced; }
.app-field .primary-input #valueDba { border-color: #3b819c; background: #081318; }
.app-field .record, .app-field .more-fields { border-color: var(--wb-border); }
.app-field .quick-sheet { border-color: var(--wb-border-strong); background: var(--wb-surface-1); color: var(--wb-text); }
.app-field .quick-sheet h2 { color: var(--wb-text); }
.app-field .quick-close-icon { background: var(--wb-surface-3); }
.app-field .quick-history { border-left-color: var(--wb-green); background: #10251b; color: #a9dfbd; }
.app-field .quick-history.empty { border-left-color: #60727b; background: #151f25; color: #a7b6bc; }
.app-field .quick-input-row input { border-color: var(--wb-accent); background: #081317; }

/* Simulation page-level integration. Detailed layout remains in simulation.css. */
.app-simulation .sim-header { flex: 0 0 auto; height: auto; min-height: var(--page-toolbar-height); padding: 9px 16px; }
.app-simulation .sim-layout { flex: 1 1 auto; min-height: 0; max-width: none; }
.app-simulation .sim-sidebar, .app-simulation .map-area, .app-simulation .results-panel { border-color: var(--wb-border); background: var(--wb-surface-1); }
.app-simulation footer { flex: 0 0 27px; }

footer { min-height: 27px; padding: 6px 10px; border-top: 1px solid var(--wb-border); background: #080e13; color: #9eafb6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

@media (max-width: 1280px) {
  .global-shell { grid-template-columns: 205px minmax(0, 1fr) auto; padding-inline: 10px; }
  .shell-brand-copy small { display: none; }
  .shell-nav-item { gap: 5px; padding-inline: 8px; }
  .app-map main { grid-template-columns: 215px minmax(360px, 1fr) 350px; }
  .toolbar-actions { flex-wrap: wrap; }
}

@media (max-width: 980px) {
  .global-shell { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .shell-brand-copy { display: none; }
  .shell-nav-item span { display: none; }
  .shell-nav-item { width: 44px; justify-content: center; padding: 8px; }
  .shell-nav-item.active::after { right: 8px; left: 8px; }
  .project-journey { grid-template-columns: 180px minmax(0, 1fr); padding-inline: 8px; }
  .journey-stage { padding-inline: 5px; }
  .journey-stage small { display: none; }
  .app-projects main, .app-analysis main { grid-template-columns: 1fr; }
  .app-analysis main { grid-template-areas: "intro" "heatmap" "result" "route" "obstacles"; }
  .workflow-banner { justify-content: flex-start; overflow-x: auto; }
  .app-map main { grid-template-columns: 190px minmax(320px, 1fr); }
  .app-map .details { position: absolute; top: calc(var(--shell-height) + var(--page-toolbar-height) + 48px); right: 0; bottom: 27px; width: min(380px, 90vw); z-index: 30; box-shadow: -10px 0 30px rgba(0, 0, 0, .35); }
}

@media (max-width: 760px) {
  :root { --shell-height: 54px; --project-journey-height: 46px; --page-toolbar-height: 58px; }
  .app-workbench { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .app-map, .app-simulation { height: auto; min-height: 100vh; overflow: visible; }
  .global-shell { height: var(--shell-height); grid-template-columns: 1fr auto; padding: 7px 9px; }
  .shell-brand-mark { width: 34px; height: 34px; }
  .shell-brand-copy { display: block; }
  .shell-brand-copy small { display: none; }
  .shell-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 150; height: calc(60px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(var(--shell-nav-count, 5), minmax(0, 1fr)); gap: 0; padding: 4px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--wb-border-strong); background: rgba(10, 16, 21, .98); box-shadow: 0 -8px 26px rgba(0, 0, 0, .28); }
  .shell-nav-item { width: auto; min-width: 0; height: 52px; flex-direction: column; gap: 2px; padding: 5px 2px; border: 0; border-radius: 4px; font-size: 9px; }
  .shell-nav-item span { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .shell-nav-item .ui-icon { width: 20px; height: 20px; }
  .shell-nav-item.active::after { top: -4px; right: 18px; bottom: auto; left: 18px; height: 2px; }
  .connection-pill { display: none; }
  .shell-reset { width: 30px; padding: 4px; }
  .shell-reset span { display: none; }
  .project-journey { grid-template-columns: 1fr; padding: 4px 6px; overflow-x: auto; }
  .journey-project { display: none; }
  .journey-stages { min-width: 570px; }
  .journey-stage { justify-content: flex-start; }
  .page-toolbar { min-height: var(--page-toolbar-height); padding: 7px 9px; }
  .page-heading-icon { width: 34px; height: 34px; }
  .page-heading > span:nth-child(2) > span { display: none; }
  .toolbar-actions { justify-content: flex-start; padding-top: 7px; border-top: 1px solid var(--wb-border); }
  .map-page-toolbar { align-items: flex-start; flex-direction: column; }
  .plan-label { flex: 1 1 100%; width: 100%; }
  .plan-label select { flex: 1; }
  .plan-count { display: none; }
  .app-map .mode-toolbar { overflow-x: auto; padding-inline: 7px; }
  .app-map .mode-toolbar .mode-label, .app-map .mode-help { display: none; }
  .app-map .mode-toolbar button { flex: 0 0 auto; }
  .app-map main { min-height: calc(100vh - 220px); grid-template-columns: 1fr; grid-template-rows: minmax(430px, 62vh) auto; }
  .app-map .layers { display: none; }
  .app-map .details { position: static; width: 100%; max-height: none; border-top: 1px solid var(--wb-border); border-left: 0; box-shadow: none; }
  .app-map footer, .app-simulation footer { margin-bottom: 0; }
  .app-projects main, .app-analysis main { padding: 7px; }
  .app-projects section, .app-analysis section { padding: 11px; }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
  .workflow-stage small, .workflow-arrow { display: none; }
  .visualization-stage { min-height: 330px; }
  .app-analysis .result { min-height: 390px; }
  .app-analysis .visualization-stage img { max-height: none; }
  .app-field .mobile-nav { top: calc(var(--shell-height) + var(--project-journey-height)); }
  .app-field .mobile-nav button { min-width: 0; flex: 1; padding-inline: 5px; }
  .app-field .field-page-toolbar .status-tag { display: none !important; }
  .app-field main { padding: 8px; }
}

@media (max-width: 500px) {
  .shell-brand-copy strong { font-size: 12px; }
  .shell-language { padding-left: 6px; }
  .page-heading > span:nth-child(2) > strong { max-width: 220px; font-size: 13px; }
  .app-map .toolbar-actions button:not(.primary) { min-width: 34px; }
  .app-field .mobile-nav button { flex-direction: column; gap: 1px; min-height: 48px; font-size: 9px; }
  .app-field .mobile-nav .ui-icon { width: 17px; height: 17px; }
  .app-field .map-card canvas { min-height: 290px; height: 43vh; }
  .workflow-banner { gap: 8px; }
  .workflow-stage { min-width: 155px; }
}

/* Simulation fills the shared application viewport; the legacy standalone header offset is no longer used. */
.app-simulation .sim-layout {
  height: auto;
  min-height: 0;
}