:root {
  color-scheme: dark;
  --bg: #080e18;
  --surface: #0d1624;
  --surface-2: #121e2f;
  --surface-3: #18263a;
  --border: rgba(148, 163, 184, .16);
  --muted: #8ea1b7;
  --text: #e8f0f7;
  --cyan: #5eead4;
  --blue: #60a5fa;
  --amber: #fbbf24;
  --danger: #fb7185;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: linear-gradient(110deg, rgba(12, 25, 40, .72), rgba(9, 16, 28, .52)); border-bottom: 1px solid rgba(184, 224, 232, .16); box-shadow: 0 8px 26px rgba(0, 0, 0, .16); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); position: relative; z-index: 5; }
.brand, .topbar-actions, .rail-heading, .right-heading, .map-topbar, .map-actions, .utility-row, .card-title, .card-title > *, .overview-card-head, .editor-actions, .table-toolbar, .assistant-label, .assistant-input, .snap-row, .io-actions, .time-label { display: flex; align-items: center; }
.brand { gap: 11px; }
.brand-logo-button { width: 96px; height: 42px; display: block; flex: 0 0 auto; padding: 0; border: 0; border-radius: 8px; background: transparent; line-height: 0; cursor: pointer; }
.brand-logo-button:hover { transform: scale(1.06); }
.brand-mark { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: contain; }
.brand-name { font-size: 15px; font-weight: 750; letter-spacing: .01em; }
.brand-name span { color: var(--cyan); font-weight: 500; }
.brand-meta, .hint, .brand-meta { color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.status-dot, .live-indicator { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--cyan); box-shadow: 0 0 0 3px rgba(94, 234, 212, .10); }
.topbar-actions { gap: 8px; }
.divider { width: 1px; height: 22px; background: var(--border); margin: 0 8px; }
.button, .icon-button, .map-action, .map-controls button, .tool-btn, .export-grid button { border: 1px solid transparent; background: transparent; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.button { min-height: 32px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 650; }
.button-primary { color: #06151a; background: var(--cyan); }
.button-primary:hover { background: #99f6e4; }
.save-project-icon { display: none; }
.button-secondary { background: var(--surface-3); border-color: var(--border); }
.button-secondary:hover, .button-quiet:hover, .icon-button:hover { background: var(--surface-3); border-color: rgba(148, 163, 184, .3); }
.button-quiet { color: var(--muted); border-color: var(--border); }
.button-danger { color: #fecdd3; border-color: rgba(251, 113, 133, .24); background: rgba(159, 18, 55, .22); }
.button-danger:hover { background: rgba(159, 18, 55, .4); }
.save-project-button { color: #a9c0cc; border-color: rgba(184, 224, 232, .18); background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 5px 16px rgba(0,0,0,.12); backdrop-filter: blur(12px) saturate(125%); -webkit-backdrop-filter: blur(12px) saturate(125%); }
.save-project-button:hover { color: var(--text); border-color: rgba(184, 224, 232, .34); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); }
.save-project-button.has-unsaved-changes { color: #06151a; border-color: rgba(94,234,212,.82); background: linear-gradient(135deg, #8af4e2, #5eead4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 18px rgba(94,234,212,.2); }
.save-project-button.has-unsaved-changes:hover { color: #06151a; border-color: #b7fff2; background: linear-gradient(135deg, #b7fff2, #76f0dd); }
.full-width { width: 100%; }
.icon-button { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); font-size: 18px; }

.app-shell { height: calc(100vh - 64px); min-height: 450px; display: grid; grid-template-columns: 266px minmax(0, 1fr) 318px; }
.left-rail, .right-panel { background: var(--surface); overflow: auto; scrollbar-width: thin; scrollbar-color: #29405a transparent; z-index: 2; }
.left-rail { border-right: 1px solid var(--border); position: relative; display: flex; flex-direction: column; transition: width .28s ease, transform .28s ease; }
.left-rail.collapsed { width: 58px; }
.rail-heading, .right-heading { justify-content: space-between; padding: 19px 16px 15px; }
.rail-heading h1, .right-heading h2 { margin: 3px 0 0; font-size: 14px; letter-spacing: -.01em; }
.eyebrow { color: #64819c; font-size: 9px; font-weight: 750; letter-spacing: .13em; margin: 0; }
.panel-section { border-top: 1px solid var(--border); }
.section-heading { width: 100%; padding: 13px 15px; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; text-align: left; }
.section-heading:hover { color: var(--text); background: rgba(255,255,255,.02); }
.section-icon { color: #7492ac; width: 18px; text-align: center; font-size: 16px; }
.section-count, .badge { margin-left: auto; padding: 2px 6px; border-radius: 10px; color: #91a7bc; background: var(--surface-3); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.chevron { color: #66809a; font-size: 16px; transform: rotate(0deg); }
.panel-section.open .chevron { transform: rotate(90deg); }
.section-content { max-height: 0; overflow: hidden; padding: 0 15px; transition: max-height .25s ease, padding .25s ease; }
.panel-section.open .section-content { max-height: 480px; padding-bottom: 14px; }
.layer-list { display: grid; gap: 2px; }
.layer-row { display: flex; align-items: center; gap: 8px; min-height: 33px; padding: 0 6px; border-radius: 5px; }
.layer-row:hover, .layer-row.active { background: rgba(94, 234, 212, .07); }
.layer-color { width: 7px; height: 19px; border-radius: 2px; background: var(--layer-color); }
.layer-name { flex: 1; padding: 0; overflow: hidden; border: 0; background: transparent; color: #c6d3df; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.layer-name small { color: #70869b; font-size: 9px; margin-left: 3px; }
.visibility-toggle { color: #658097; font-size: 12px; cursor: pointer; }
.visibility-toggle input { position: absolute; opacity: 0; }
.visibility-toggle input:checked + span { color: var(--cyan); }
.text-button { padding: 9px 5px 2px; border: 0; background: transparent; color: var(--cyan); font-size: 11px; }
.tool-grid { display: grid; gap: 5px; }
.compact-tools { grid-template-columns: repeat(3, 1fr); }
.analysis-tools { grid-template-columns: repeat(3, 1fr); }
.tool-btn { min-height: 57px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-color: var(--border); border-radius: 6px; color: #96adbf; background: rgba(255,255,255,.025); }
.tool-btn:hover { color: var(--text); border-color: rgba(94, 234, 212, .36); background: rgba(94, 234, 212, .07); transform: translateY(-1px); }
.tool-btn.active { color: #07151b; border-color: var(--cyan); background: var(--cyan); }
.tool-btn span { font-size: 18px; line-height: 1; }
.tool-btn small { font-size: 9px; letter-spacing: .01em; }
.snap-row { justify-content: space-between; gap: 8px; margin-top: 11px; }
.switch-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.switch-label input { position: absolute; opacity: 0; }
.switch { width: 26px; height: 15px; padding: 2px; border-radius: 20px; background: #2a3b4d; transition: background .2s; }
.switch::after { content: ""; display: block; width: 11px; height: 11px; border-radius: 50%; background: #8499aa; transition: transform .2s, background .2s; }
.switch-label input:checked + .switch { background: #087f75; }
.switch-label input:checked + .switch::after { transform: translateX(11px); background: var(--cyan); }
.snap-row select { width: 65px; }
.input { width: 100%; min-height: 31px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--surface-3); font-size: 11px; }
textarea.input { min-height: 75px; resize: vertical; }
.field-label { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.field-label .input, .field-label input { margin-top: 4px; }
.io-actions { gap: 6px; }
.io-actions .button { flex: 1; }
.hint { line-height: 1.45; margin: 8px 0 0; }
.rail-footer { margin-top: auto; padding: 14px 15px 16px; border-top: 1px solid var(--border); }
.active-tool-card { display: flex; align-items: center; gap: 8px; padding: 9px; background: rgba(94,234,212,.07); border: 1px solid rgba(94,234,212,.15); border-radius: 6px; }
.active-tool-card > div { display: grid; gap: 2px; flex: 1; }
.active-tool-card small { color: #6e8c9e; font-size: 8px; letter-spacing: .12em; }
.active-tool-card strong { color: var(--cyan); font-size: 11px; }
.active-tool-card button { border: 0; background: transparent; color: #7f9aab; }
#tool-instructions { color: #7890a4; font-size: 10px; line-height: 1.45; margin: 9px 2px 0; }

.map-stage { position: relative; min-width: 0; overflow: hidden; background: #101b28; }
#map { width: 100%; height: 100%; }
.map-topbar { position: absolute; top: 15px; left: 16px; right: 16px; justify-content: space-between; gap: 12px; z-index: 4; pointer-events: none; }
.location-search { width: min(420px, 55vw); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(148,163,184,.24); border-radius: 7px; color: #94a9ba; background: rgba(10, 21, 34, .92); box-shadow: 0 8px 30px rgba(0,0,0,.18); pointer-events: auto; }
.location-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.location-search kbd { padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px; color: #71879a; font-size: 9px; }
.map-actions { gap: 5px; pointer-events: auto; }
.mobile-only { display: none; }
.map-action { min-width: 36px; height: 36px; border-color: rgba(148,163,184,.24); border-radius: 6px; background: rgba(10,21,34,.9); color: #bfd0dc; font-size: 12px; }
.map-action:hover, .map-action.active { color: var(--cyan); border-color: rgba(94,234,212,.55); background: rgba(10,34,40,.95); }
.map-toast { position: absolute; top: 67px; left: 50%; z-index: 3; max-width: calc(100% - 40px); padding: 9px 13px; border: 1px solid rgba(94,234,212,.25); border-radius: 6px; background: rgba(8,20,30,.94); color: #c8e9e5; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; }
.map-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.map-toast[data-tone="error"] { color: #fecdd3; border-color: rgba(251,113,133,.4); }
.map-legend { position: absolute; left: 15px; bottom: 43px; display: flex; gap: 10px; padding: 7px 9px; border: 1px solid rgba(148,163,184,.18); border-radius: 5px; color: #a9bbc8; background: rgba(8,18,29,.82); font-size: 9px; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend-swatch.boundary { background: var(--cyan); }.legend-swatch.analysis { background: var(--amber); }.legend-swatch.parcel { background: #a78bfa; }
.coordinate-readout { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(148,163,184,.18); border-radius: 5px; background: rgba(8,18,29,.86); color: #c4d3dc; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.coord-crs { padding-left: 7px; border-left: 1px solid var(--border); color: #7d97a8; font-family: inherit; font-size: 9px; }
.map-controls { position: absolute; right: 14px; top: 70px; display: grid; gap: 4px; }
.map-controls button { width: 30px; height: 30px; border-color: rgba(148,163,184,.2); border-radius: 5px; background: rgba(8,18,29,.86); color: #b8cbd6; font-size: 15px; }
.map-controls button:hover { color: var(--cyan); background: #13293a; }
.time-dock { position: absolute; left: 50%; bottom: 15px; width: min(520px, calc(100% - 40px)); display: flex; align-items: center; gap: 13px; padding: 9px 11px; border: 1px solid rgba(148,163,184,.25); border-radius: 7px; background: rgba(8,18,29,.94); transform: translateX(-50%); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.time-dock[hidden] { display: none; }
.time-toggle { display: none; }
.time-dock-content { min-width: 0; flex: 1; display: flex; align-items: center; gap: 13px; }
.time-label { min-width: 88px; display: grid; gap: 2px; }.time-label span { color: #71899d; font-size: 8px; letter-spacing: .12em; }.time-label strong { color: var(--cyan); font-size: 10px; }
.time-dock input { flex: 1; accent-color: var(--cyan); }
.mobile-bottom-nav { display: none; }

.right-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; transition: width .28s ease; }
.right-panel.collapsed { width: 58px; }
.left-rail.collapsed .rail-heading h1, .left-rail.collapsed .rail-heading .eyebrow, .left-rail.collapsed .section-heading span:not(.section-icon):not(.chevron), .left-rail.collapsed .section-content, .left-rail.collapsed .rail-footer { display: none; }
.left-rail.collapsed .rail-heading, .left-rail.collapsed .section-heading { justify-content: center; padding-left: 0; padding-right: 0; }
.right-panel.collapsed .right-heading h2, .right-panel.collapsed .right-heading .eyebrow, .right-panel.collapsed .inspector-tabs, .right-panel.collapsed .right-content, .right-panel.collapsed .assistant-bar { display: none; }
.right-panel.collapsed .right-heading { justify-content: center; }
.right-panel.collapsed > *:not(.right-heading) { display: none; }
.right-heading { min-height: 69px; }
.inspector-tabs { display: flex; padding: 0 14px; border-bottom: 1px solid var(--border); gap: 2px; }
.tab { padding: 10px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #7990a2; font-size: 10px; }
.tab.active { border-bottom-color: var(--cyan); color: #d8e8ef; }
.tab span { color: #89a3b4; margin-left: 3px; }
.right-content { flex: 1; min-height: 0; overflow: auto; }
.tab-panel { display: none; padding: 14px; }.tab-panel.active { display: block; }
.overview-card, .utility-card { padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); }
.overview-card-head { gap: 9px; }.card-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--cyan); background: rgba(94,234,212,.1); font-size: 17px; }.overview-card-head strong, .overview-card-head small { display: block; }.overview-card-head strong { font-size: 12px; }.overview-card-head small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border); }.metric-grid div { display: grid; gap: 3px; }.metric-grid small { color: #70879b; font-size: 8px; letter-spacing: .1em; }.metric-grid strong { color: #c8d7df; font-size: 10px; font-weight: 550; }.text-green { color: var(--cyan) !important; }
.card-title { justify-content: space-between; color: #cbd8e0; font-size: 11px; font-weight: 700; margin-bottom: 9px; }.card-title .badge { margin-left: 8px; }
.coordinate-convert-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }.coordinate-convert-mini .button { grid-column: 1 / -1; }.output { display: block; margin-top: 7px; padding: 7px; border-radius: 4px; color: #8ee6d9; background: rgba(94,234,212,.06); font-size: 9px; }
.utility-row { justify-content: space-between; gap: 8px; margin-top: 9px; }.offline-status { color: #7993a5; font-size: 9px; }
.empty-state { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; color: #7690a2; text-align: center; }.empty-state span { color: #4b6a7f; font-size: 23px; }.empty-state strong { color: #b9cbd5; font-size: 11px; }.empty-state small { max-width: 220px; line-height: 1.4; font-size: 9px; }
.feature-editor { display: grid; gap: 2px; }.editor-actions { gap: 6px; margin-top: 11px; }.editor-actions .button { flex: 1; }
.table-toolbar { justify-content: space-between; margin-bottom: 12px; }.table-toolbar strong, .table-toolbar small { display: block; }.table-toolbar strong { font-size: 12px; }.table-toolbar small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.attribute-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }.attribute-table { width: 100%; border-collapse: collapse; font-size: 10px; }.attribute-table th { padding: 8px; color: #70879a; background: rgba(255,255,255,.025); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.attribute-table td { max-width: 100px; overflow: hidden; padding: 9px 8px; border-top: 1px solid var(--border); color: #b9cbd5; text-overflow: ellipsis; white-space: nowrap; }.attribute-table tr { cursor: pointer; }.attribute-table tr:hover, .attribute-table tr.selected { background: rgba(94,234,212,.08); }.type-pill { color: #91dcd2; }
.table-empty { color: var(--muted) !important; text-align: center; padding: 22px !important; }
.result-item { padding: 10px; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.025); }.result-item > div { display: flex; justify-content: space-between; gap: 8px; }.result-item strong { font-size: 10px; }.result-item time { color: #71899b; font-size: 8px; }.result-item p { margin: 6px 0 3px; color: #cbd9e1; font-size: 10px; line-height: 1.35; }.result-item small { color: #7891a2; font-size: 9px; line-height: 1.35; }.result-item.error { border-color: rgba(251,113,133,.32); }
.assistant-bar { padding: 12px 14px; border-top: 1px solid var(--border); }.assistant-label { gap: 5px; color: #a9bcc7; font-size: 10px; font-weight: 700; }.assistant-spark { color: var(--cyan); }.assistant-label .badge { margin-left: 2px; color: #6f94a7; }.assistant-input { gap: 5px; margin-top: 8px; padding: 3px 4px 3px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-3); }.assistant-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 10px; }.assistant-input button { width: 25px; height: 25px; border: 0; border-radius: 4px; color: #062019; background: var(--cyan); }.suggestions { display: flex; gap: 4px; overflow: auto; margin-top: 6px; }.ai-suggestion { padding: 3px 6px; border: 1px solid var(--border); border-radius: 10px; color: #71899b; background: transparent; font-size: 8px; white-space: nowrap; }.ai-suggestion:hover { color: var(--text); }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(1, 5, 10, .72); backdrop-filter: blur(5px); }.modal.hidden { display: none; }.modal-card { width: min(420px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 19px; border: 1px solid rgba(148,163,184,.23); border-radius: 10px; background: #0d1827; box-shadow: 0 22px 80px rgba(0,0,0,.45); }.modal-card.narrow { width: min(370px, 100%); }.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }.modal-head h2 { margin: 4px 0 0; font-size: 16px; }.modal-copy { margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.45; }.modal-card form { display: grid; gap: 10px; }.modal-card label { display: grid; gap: 5px; color: #9db1bf; font-size: 10px; }.modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.export-grid button { display: grid; gap: 4px; padding: 12px; border-color: var(--border); border-radius: 6px; background: rgba(255,255,255,.025); color: #c8d8e0; font-size: 11px; text-align: left; }.export-grid button:hover { border-color: var(--cyan); background: rgba(94,234,212,.08); }.export-grid small { color: #71899b; font-size: 9px; }
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { z-index: 1; }.mapboxgl-ctrl-attrib { opacity: .72; }.mapboxgl-popup-content { padding: 0 !important; border: 1px solid rgba(148,163,184,.25); border-radius: 7px; overflow: hidden; color: var(--text); background: #101d2c; box-shadow: 0 12px 30px rgba(0,0,0,.34); }.mapboxgl-popup-close-button { color: #a9bfca; font-size: 17px; }.mapboxgl-popup-tip { border-top-color: #101d2c; }.map-popup { min-width: 170px; padding: 12px; }.map-popup strong { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 11px; }.map-popup div { display: flex; justify-content: space-between; gap: 13px; padding-top: 4px; color: #d0dce2; font-size: 9px; }.map-popup div span { color: #7891a3; }
.feature-popup { min-width: 170px; padding: 12px; color: #d0dce2; font-size: 10px; }.feature-popup h4 { margin: 0 0 7px; color: var(--cyan); font-size: 11px; }.feature-popup .text-sm { color: #a9bbc7; line-height: 1.4; }
.example-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }.example-actions .button { min-width: 0; padding-inline: 5px; font-size: 8px; }
.example-summary { display: grid; gap: 8px; padding: 13px; border: 1px solid rgba(34,211,238,.25); border-radius: 8px; background: linear-gradient(145deg, rgba(14,53,65,.8), rgba(14,24,39,.9)); }.example-summary-kicker { color: #72c7d3; font-size: 8px; font-weight: 750; letter-spacing: .12em; }.example-summary h4 { margin: 0; color: #effffc; font-size: 14px; }.example-summary p { margin: 0; color: #a5bdc6; font-size: 10px; line-height: 1.45; }.example-counts { display: flex; flex-wrap: wrap; gap: 5px; }.example-counts span { display: grid; gap: 2px; min-width: 50px; padding: 6px; border-radius: 5px; color: #7e9da8; background: rgba(255,255,255,.05); font-size: 7px; text-transform: uppercase; }.example-counts b { color: #67e8f9; font: 700 13px monospace; }.example-objectives { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(148,163,184,.15); color: #91abb3; font-size: 8px; }.example-objectives strong { color: #f5d77a; font-size: 7px; letter-spacing: .1em; }
.example-popup { max-height: min(58vh, 500px); overflow: auto; padding: 14px; color: #d5e4e7; background: linear-gradient(155deg, #102a37, #0c1726 74%); }.example-popup-kicker { color: #72c7d3; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }.example-popup h4 { margin: 4px 0 6px; color: #effffc; font-size: 15px; }.example-popup-meta { display: flex; flex-wrap: wrap; gap: 5px; }.example-popup-meta span { padding: 3px 5px; border-radius: 10px; color: #8aaeb7; background: rgba(94,234,212,.08); font-size: 8px; }.example-popup-coordinates { display: grid; gap: 3px; margin: 10px 0; padding: 8px; border-left: 2px solid #fbbf24; background: rgba(251,191,36,.06); }.example-popup-coordinates small { color: #a9945f; font-size: 7px; letter-spacing: .1em; }.example-popup-coordinates b { color: #f5d77a; font: 600 10px monospace; }.example-popup-schema { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(148,163,184,.16); border-radius: 5px; }.example-popup-schema div { display: grid; grid-template-columns: minmax(90px, .85fr) minmax(0, 1.2fr); gap: 8px; padding: 7px 8px; background: rgba(255,255,255,.025); }.example-popup-schema div:nth-child(even) { background: rgba(34,211,238,.045); }.example-popup-schema span { color: #7893a0; font-size: 8px; line-height: 1.35; }.example-popup-schema b { overflow-wrap: anywhere; color: #d6e5e8; font-size: 9px; font-weight: 500; line-height: 1.35; }
.example-workbench-card { width: min(560px, calc(100% - 28px)); }.example-workbench-form { display: grid; gap: 12px; }.example-workbench-hero { display: grid; gap: 6px; padding: 13px; border: 1px solid rgba(34,211,238,.2); border-radius: 7px; background: linear-gradient(145deg, rgba(14,53,65,.8), rgba(14,24,39,.9)); }.example-workbench-hero h3 { margin: 0; color: #effffc; font-size: 19px; }.example-workbench-hero p { margin: 0; color: #9eb7bf; font-size: 10px; line-height: 1.45; }.example-workbench-note { padding: 9px; color: #8ca7b0; border-left: 2px solid #fbbf24; background: rgba(251,191,36,.05); font: 9px/1.5 monospace; }.check-label { display: flex; gap: 7px; align-items: center; color: #b8cbd0; font-size: 10px; }.check-label input { accent-color: var(--cyan); }
.community-popup { width: min(330px, calc(100vw - 44px)); max-height: min(62vh, 480px); overflow: auto; padding: 13px; color: #d5e4e7; background: linear-gradient(155deg, #102a37, #0c1726 72%); }
.community-popup-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(148,163,184,.18); }
.community-popup-head img { width: 34px; height: 24px; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.community-popup-head span { display: block; margin-bottom: 3px; color: #72bdb7; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.community-popup-head h4 { margin: 0; color: #effffc; font-size: 14px; line-height: 1.2; }
.community-popup > p { margin: 10px 0; color: #9cb4bd; font-size: 10px; line-height: 1.45; }
.community-popup-schema { display: grid; gap: 1px; margin-top: 9px; overflow: hidden; border: 1px solid rgba(148,163,184,.16); border-radius: 5px; }
.community-popup-field { display: grid; grid-template-columns: minmax(95px, .95fr) minmax(0, 1.2fr); gap: 8px; padding: 7px 8px; background: rgba(255,255,255,.025); }
.community-popup-field:nth-child(even) { background: rgba(94,234,212,.045); }
.community-popup-field span { color: #7893a0; font-size: 8px; line-height: 1.35; }
.community-popup-field b { overflow-wrap: anywhere; color: #d6e5e8; font-size: 9px; font-weight: 500; line-height: 1.35; }
.community-popup-empty { padding-top: 10px; color: #7893a0; font-size: 9px; }
.about-card { text-align: center; }
.about-card .modal-head { text-align: left; }
.about-logo { width: min(240px, 80%); max-height: 128px; display: block; margin: 2px auto 18px; object-fit: contain; }
.install-app-button svg, .profile-button svg, .locate-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.install-app-button, .profile-button { flex: 0 0 auto; }.profile-button { color: #a7bfca; }.profile-button:hover { color: var(--cyan); }
.location-search { position: relative; z-index: 2; }.location-suggestions { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: min(460px, 80vw); overflow: hidden; border: 1px solid rgba(148,163,184,.22); border-radius: 7px; background: rgba(10,21,34,.98); box-shadow: 0 14px 35px rgba(0,0,0,.35); }.location-suggestions[hidden] { display: none; }.location-suggestions button { width: 100%; display: grid; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid rgba(148,163,184,.1); color: #d5e3e7; background: transparent; text-align: left; touch-action: manipulation; }.location-suggestions button:last-child { border-bottom: 0; }.location-suggestions button:hover, .location-suggestions button[aria-selected="true"] { background: rgba(94,234,212,.1); }.location-suggestions strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.location-suggestions small { overflow: hidden; color: #7891a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.auth-card { text-align: center; }.auth-card .modal-head { text-align: left; }.lsu-logo-link { display: block; margin: 0 auto 14px; }.lsu-logo-link img { width: min(215px, 82%); max-height: 92px; object-fit: contain; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); }.auth-tab { min-height: 34px; border: 0; border-radius: 5px; color: #7891a2; background: transparent; font-size: 10px; }.auth-tab.active { color: #06151a; background: var(--cyan); }.auth-card #auth-signin-panel, .auth-card #auth-signup-panel { text-align: left; }.auth-external-link { display: block; text-align: center; text-decoration: none; }.auth-status { margin-top: 10px; padding: 8px; border-radius: 5px; color: #83a9ad; background: rgba(94,234,212,.06); font-size: 9px; line-height: 1.4; }.auth-card form.hidden, .auth-card #auth-signin-panel.hidden { display: none; }

/* Survey Earth in a Day */
.section-badge { margin-left: auto; padding: 2px 5px; border: 1px solid rgba(94,234,212,.18); border-radius: 9px; color: var(--cyan); background: rgba(94,234,212,.07); font-size: 8px; letter-spacing: .08em; }
.seiad-section .section-heading { color: #c9e8e1; }
.seiad-section .section-icon { color: var(--cyan); }
.seiad-loading, .seiad-local-note { color: #7891a2; font-size: 9px; line-height: 1.4; }
.seiad-next-card { display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(94,234,212,.2); border-radius: 7px; background: linear-gradient(135deg, rgba(16,62,65,.46), rgba(94,234,212,.05)); }
.seiad-kicker, .seiad-overline { color: #71bdb2; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.seiad-next-card strong { color: #e5fbf6; font-size: 12px; }
.seiad-countdown { color: var(--cyan); font: 700 13px/1.1 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.seiad-next-card small { color: #8baead; font-size: 9px; }
.seiad-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 8px 0; }
.seiad-season { min-width: 0; display: grid; gap: 2px; padding: 6px 2px; border: 1px solid var(--border); border-radius: 5px; color: #8ba1b1; background: rgba(255,255,255,.02); text-align: center; }
.seiad-season:hover, .seiad-season.selected { border-color: rgba(94,234,212,.45); background: rgba(94,234,212,.08); }
.seiad-season b { font-size: 10px; }.seiad-season span { min-height: 20px; white-space: pre-line; font-size: 7px; line-height: 1.1; }.seiad-season i { color: #7891a2; font-size: 6px; font-style: normal; letter-spacing: .04em; }.seiad-season.active b, .seiad-season.upcoming b { color: var(--cyan); }.seiad-season.completed b { color: #728899; }
.seiad-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 7px 0; }.seiad-stats-grid div { display: grid; gap: 2px; padding: 6px 3px; border-radius: 5px; background: rgba(255,255,255,.025); text-align: center; }.seiad-stats-grid b { color: #dcebe9; font-size: 12px; }.seiad-stats-grid small { color: #71889a; font-size: 7px; line-height: 1.15; }
.seiad-recovery { display: grid; gap: 5px; margin: 8px 0; padding: 8px; border: 1px solid rgba(251,191,36,.3); border-radius: 6px; background: rgba(120,72,8,.14); }.seiad-recovery strong { color: #f9d777; font-size: 10px; }.seiad-recovery small { color: #bba16d; font-size: 8px; }.seiad-recovery .button { font-size: 9px; }
.seiad-modal .modal-card { width: min(820px, 100%); }.seiad-modal-card { padding: 22px; }.seiad-hero { padding: 20px; border: 1px solid rgba(94,234,212,.2); border-radius: 9px; background: radial-gradient(circle at 85% 20%, rgba(251,191,36,.15), transparent 35%), linear-gradient(135deg, #0f2d32, #0d1827 65%); }.seiad-hero h3 { margin: 8px 0; color: #effffc; font-size: clamp(27px, 5vw, 42px); line-height: .98; letter-spacing: -.04em; }.seiad-hero p { max-width: 540px; margin: 0 0 16px; color: #9eb8ba; font-size: 12px; line-height: 1.5; }.seiad-hero-event { display: grid; gap: 3px; margin-bottom: 18px; padding-left: 10px; border-left: 2px solid var(--amber); }.seiad-hero-event small, .seiad-event-strip small, .seiad-time-callout small, .seiad-point-chip small, .seiad-telemetry small, .seiad-live-position small, .seiad-review-grid small { color: #7493a0; font-size: 8px; font-weight: 750; letter-spacing: .1em; }.seiad-hero-event strong { color: #f5df9c; font-size: 15px; }.seiad-hero-event b { color: var(--cyan); font: 700 20px monospace; }.seiad-hero-event span { color: #91a7ac; font-size: 9px; }
.seiad-modal-section { margin-top: 18px; }.seiad-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 8px; }.seiad-section-heading strong { color: #d8e8e7; font-size: 12px; }.seiad-section-heading small { color: #7891a2; font-size: 9px; }.seiad-large-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.seiad-large-timeline > div { display: grid; gap: 3px; padding: 12px; border-top: 2px solid #466373; border-radius: 5px; background: rgba(255,255,255,.025); }.seiad-large-timeline b { color: #a7c2c6; font-size: 18px; }.seiad-large-timeline span { white-space: pre-line; color: #b3c5ca; font-size: 10px; }.seiad-large-timeline i { color: #7891a2; font-size: 8px; font-style: normal; }.seiad-large-timeline .upcoming { border-top-color: var(--cyan); }.seiad-large-timeline .upcoming b, .seiad-large-timeline .active b { color: var(--cyan); }.seiad-large-timeline .completed { opacity: .65; }.seiad-large-timeline .solstice { border-top-color: var(--amber); }
.seiad-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }.seiad-step { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }.seiad-step > span { color: var(--cyan); font: 700 12px monospace; }.seiad-step strong, .seiad-step small { display: block; }.seiad-step strong { color: #e3f3f1; font-size: 13px; }.seiad-step small { margin-top: 3px; color: #7891a2; font-size: 9px; }.seiad-form { display: grid; gap: 11px; }.seiad-form select, .seiad-form input, .seiad-form textarea { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--surface-3); font-size: 11px; }.seiad-form input, .seiad-form select { min-height: 36px; }.seiad-form textarea { resize: vertical; }.seiad-field { display: grid; gap: 5px; color: #9db1bf; font-size: 9px; }.seiad-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.full-span { grid-column: 1 / -1; }.seiad-subheading { padding-top: 8px; border-top: 1px solid var(--border); color: #a9c4c4; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.seiad-guardrail { margin: 3px 0; padding: 9px; border-left: 2px solid var(--amber); color: #ae9a70; background: rgba(251,191,36,.06); font-size: 9px; line-height: 1.45; }.seiad-guardrail b { color: #f3d47d; }.seiad-event-strip { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.025); }.seiad-event-strip div { display: grid; gap: 4px; }.seiad-event-strip strong { color: #d9e8e6; font-size: 11px; }.seiad-time-callout { display: grid; gap: 5px; margin-bottom: 14px; padding: 13px; border: 1px solid rgba(94,234,212,.25); border-radius: 7px; background: rgba(94,234,212,.06); }.seiad-time-callout strong { color: var(--cyan); font-size: 17px; }.seiad-time-callout span, .seiad-time-callout small:last-child { color: #94b3b3; font-size: 9px; }.seiad-checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.seiad-checklist > div { display: flex; gap: 7px; align-items: flex-start; padding: 9px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.02); }.seiad-checklist > div b { color: var(--cyan); font-size: 14px; }.seiad-checklist > div.warning { border-color: rgba(251,191,36,.3); }.seiad-checklist > div.warning b { color: var(--amber); }.seiad-checklist span { display: grid; gap: 3px; color: #becfd1; font-size: 9px; }.seiad-checklist small { color: #718b99; font-size: 7px; letter-spacing: .1em; }
.seiad-cook { padding: 2px 0; }.seiad-cook-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }.seiad-cook-header h3 { margin: 5px 0 0; font-size: 18px; }.seiad-observing-pill { color: #f9d777; font-size: 9px; font-weight: 750; letter-spacing: .1em; }.seiad-point-chip { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 9px; }.seiad-point-chip strong { color: #eafffa; font: 700 20px monospace; }.seiad-point-chip span { color: #819ea0; font-size: 9px; }.seiad-timer { display: grid; justify-items: center; gap: 1px; padding: 22px 10px; border: 1px solid rgba(251,191,36,.28); border-radius: 9px; background: radial-gradient(circle, rgba(251,191,36,.13), rgba(255,255,255,.015) 62%); }.seiad-timer strong { color: #ffe8a7; font: 700 clamp(38px, 8vw, 66px)/1 monospace; letter-spacing: .04em; }.seiad-timer span { color: #cba746; font-size: 9px; font-weight: 750; letter-spacing: .25em; }.seiad-telemetry, .seiad-live-position, .seiad-review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; }.seiad-telemetry > div, .seiad-live-position > div, .seiad-review-grid > div { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.025); }.seiad-telemetry b, .seiad-live-position b, .seiad-review-grid b { color: #d9e9e7; font: 600 12px monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.seiad-telemetry b { color: var(--cyan); }.seiad-position-plot { position: relative; height: 130px; margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #0a141f; }.seiad-plot-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.1) 1px, transparent 1px); background-size: 25% 25%; }.seiad-plot-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--amber); box-shadow: 0 0 0 6px rgba(251,191,36,.15), 0 0 20px var(--amber); }.seiad-position-plot small { position: absolute; bottom: 6px; left: 8px; color: #627b8b; font-size: 8px; }.seiad-provider-note { color: #7891a2; font-size: 9px; line-height: 1.4; }.seiad-error { margin-top: 8px; padding: 8px; border: 1px solid rgba(251,113,133,.3); color: #fecdd3; font-size: 9px; }.seiad-complete-banner { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(94,234,212,.25); border-radius: 7px; background: rgba(94,234,212,.07); }.seiad-complete-banner > span { color: var(--cyan); font-size: 23px; }.seiad-complete-banner div { display: grid; gap: 3px; flex: 1; }.seiad-complete-banner strong { color: #dffbf6; font-size: 12px; }.seiad-complete-banner small, .seiad-complete-banner b { color: #82b5af; font-size: 9px; }.seiad-review-grid { grid-template-columns: repeat(3, 1fr); }.seiad-comparison { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }.seiad-delta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.seiad-delta b, .seiad-delta span { text-align: center; }.seiad-delta b { color: var(--cyan); font: 600 13px monospace; }.seiad-delta span { color: #718b99; font-size: 8px; }.seiad-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }.seiad-flags strong { width: 100%; color: #c4d3d1; font-size: 10px; }.seiad-flags span { padding: 4px 6px; border: 1px solid rgba(251,191,36,.3); border-radius: 10px; color: #e1bd60; font-size: 8px; }.seiad-clean { margin-top: 12px; color: #82b5af; font-size: 9px; }.seiad-history-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--border); color: #c9d8d7; background: transparent; text-align: left; }.seiad-history-row:hover { background: rgba(94,234,212,.06); }.seiad-history-row > span { color: var(--amber); font-size: 12px; }.seiad-history-row > span.synced { color: var(--cyan); }.seiad-history-row div { display: grid; gap: 3px; flex: 1; }.seiad-history-row strong { font-size: 10px; }.seiad-history-row small { color: #7891a2; font-size: 8px; }.seiad-history-row > b { color: #7891a2; font-size: 8px; }.seiad-empty { padding: 25px 5px; color: #7891a2; font-size: 10px; text-align: center; }

@media (max-width: 600px) {
  .seiad-modal { padding: 8px; place-items: end center; }
  .seiad-modal-card { width: 100% !important; max-height: calc(100dvh - 16px); padding: 15px; border-radius: 10px 10px 0 0; }
  .seiad-form-grid, .seiad-checklist { grid-template-columns: 1fr 1fr; }.seiad-form-grid .full-span { grid-column: 1 / -1; }.seiad-event-strip { display: grid; }.seiad-large-timeline { gap: 4px; }.seiad-large-timeline > div { padding: 8px 6px; }.seiad-large-timeline b { font-size: 14px; }.seiad-large-timeline span { font-size: 8px; }.seiad-telemetry, .seiad-live-position { grid-template-columns: repeat(2, 1fr); }.seiad-review-grid { grid-template-columns: repeat(2, 1fr); }.seiad-delta { grid-template-columns: repeat(2, 1fr); gap: 10px; }.seiad-modal-actions .button { flex: 1; min-width: 125px; }.seiad-cook-header h3 { font-size: 15px; }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 230px minmax(0, 1fr) 290px; }
  .topbar { padding: 0 13px; }
  .brand-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Mobile-first foundation: phones get the map and drawers by default. */
html, body { min-height: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
.topbar {
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
}
.app-shell {
  height: calc(100vh - 56px - env(safe-area-inset-top));
  height: calc(100dvh - 56px - env(safe-area-inset-top));
  min-height: 0;
  grid-template-columns: 1fr;
  position: relative;
}
.map-stage { min-height: 0; height: 100%; }
.left-rail, .right-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(340px, 100vw);
  max-width: 100%;
  box-shadow: 10px 0 35px rgba(0,0,0,.34);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 12;
}
.left-rail { left: 0; transform: translateX(-102%); }
.right-panel { right: 0; transform: translateX(102%); }
.left-rail.mobile-open, .right-panel.mobile-open { transform: translateX(0); }
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 11;
  border: 0;
  background: rgba(1, 7, 14, .58);
  backdrop-filter: blur(2px);
}
.drawer-scrim[hidden] { display: none; }
.mobile-only { display: block; }
.topbar-actions { gap: 3px; }
.topbar-actions .button-quiet, .topbar-actions .divider { display: none; }
.install-app-button[hidden] { display: none; }
.button, .icon-button, .map-action, .map-controls button, .tool-btn,
.export-grid button, .section-heading, .tab, .text-button, .ai-suggestion,
.active-tool-card button, .visibility-toggle {
  min-height: 44px;
  touch-action: manipulation;
}
.button { padding-inline: 14px; }
.icon-button { min-width: 44px; height: 44px; }
.section-heading { padding-block: 8px; }
.tool-btn { min-height: 64px; }
.input { min-height: 44px; font-size: 16px; }
.field-label, .modal-card label { font-size: 12px; }
.visibility-toggle { min-width: 44px; display: grid; place-items: center; }
.text-button { padding-block: 5px; }
.map-topbar {
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  gap: 8px;
}
.location-search { width: auto; flex: 1; height: 44px; min-width: 0; }
.location-search kbd { display: none; }
.location-suggestions { width: min(340px, calc(100vw - 20px)); }
.location-suggestions button { min-height: 44px; padding-block: 10px; }
.map-actions { gap: 6px; }
.map-actions { flex-shrink: 0; }
  .map-actions #basemap-btn, .map-actions #birds-eye-view { display: none; }
.map-action { min-width: 44px; height: 44px; }
.map-controls { top: 68px; right: 10px; gap: 6px; }
.map-controls button { width: 44px; height: 44px; }
.map-legend { bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; max-width: calc(100% - 20px); overflow: auto; }
.coordinate-readout { bottom: calc(8px + env(safe-area-inset-bottom)); right: 10px; max-width: calc(100% - 20px); }
.time-dock { bottom: calc(48px + env(safe-area-inset-bottom)); width: calc(100% - 20px); gap: 8px; }
.time-dock-content { gap: 8px; }
.time-label { min-width: 72px; }
.time-toggle { min-width: 44px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 5px; color: var(--cyan); background: rgba(94,234,212,.08); font-size: 10px; font-weight: 700; }
.time-toggle:hover { background: rgba(94,234,212,.15); }
.time-dock.is-collapsed { left: auto; right: 10px; width: auto; transform: none; padding: 5px; }
.time-dock.is-collapsed .time-dock-content { display: none; }
.mobile-bottom-nav { height: calc(56px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px 8px env(safe-area-inset-bottom); border-top: 1px solid rgba(184, 224, 232, .16); background: linear-gradient(110deg, rgba(12, 25, 40, .72), rgba(9, 16, 28, .56)); box-shadow: 0 -8px 26px rgba(0, 0, 0, .16); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.mobile-nav-item { min-width: 0; min-height: 0; height: 46px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 3px 8px; border: 1px solid transparent; border-radius: 6px; color: #8ea1b7; background: transparent; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.mobile-nav-item:hover, .mobile-nav-item:focus-visible { color: var(--text); background: rgba(255,255,255,.05); }
.mobile-nav-item-primary { color: var(--cyan); background: rgba(94,234,212,.08); border-color: rgba(94,234,212,.18); }
.mobile-nav-icon { font-size: 16px; line-height: 1; }
.app-shell { height: calc(100vh - 56px - env(safe-area-inset-top) - 56px - env(safe-area-inset-bottom)); height: calc(100dvh - 56px - env(safe-area-inset-top) - 56px - env(safe-area-inset-bottom)); }
.right-content { overscroll-behavior: contain; }
.tab-panel { padding: 12px; }
.assistant-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 16px; }
.attribute-table td, .attribute-table th { padding-block: 12px; }
#map { touch-action: pan-x pan-y; }

@media (min-width: 801px) {
  .topbar { height: 64px; padding: 0 20px; }
  .app-shell {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    grid-template-columns: 230px minmax(0, 1fr) 290px;
  }
  .left-rail, .right-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
    z-index: 2;
    overscroll-behavior: auto;
  }
  .mobile-only, .drawer-scrim { display: none !important; }
  .topbar-actions { gap: 8px; }
  .topbar-actions .button-quiet, .topbar-actions .divider { display: initial; }
  .button, .icon-button, .map-action, .map-controls button, .tool-btn,
  .export-grid button, .section-heading, .tab, .text-button, .ai-suggestion,
  .active-tool-card button, .visibility-toggle { min-height: initial; }
  .button { min-height: 32px; padding-inline: 12px; }
  .icon-button { min-width: 30px; height: 30px; }
  .section-heading { padding-block: 13px; }
  .tool-btn { min-height: 57px; }
  .input { min-height: 31px; font-size: 11px; }
  .field-label, .modal-card label { font-size: 10px; }
  .map-topbar { top: 15px; left: 16px; right: 16px; }
  .location-search { width: min(420px, 55vw); height: 38px; flex: initial; }
  .location-search kbd { display: block; }
  .map-action { min-width: 36px; height: 36px; }
  .map-controls { top: 70px; right: 14px; gap: 4px; }
  .map-controls button { width: 30px; height: 30px; }
  .map-legend { bottom: 43px; left: 15px; }
  .coordinate-readout { bottom: 14px; right: 14px; }
  .time-dock { bottom: 15px; width: min(520px, calc(100% - 40px)); }
  .assistant-bar { padding-bottom: 12px; }
}

@media (min-width: 1101px) {
  .app-shell { grid-template-columns: 266px minmax(0, 1fr) 318px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 13px; }
  .brand-logo-button { width: 76px; height: 38px; }
  .topbar-actions .icon-button { min-width: 40px; }
  .map-actions #terrain-btn { display: none; }
  .map-legend { font-size: 8px; gap: 7px; }
  .coordinate-readout { font-size: 9px; }
}

@media (max-width: 800px) {
  .save-project-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: grid;
    place-items: center;
  }
  .save-project-label { display: none; }
  .save-project-icon { width: 19px; height: 19px; display: block; fill: currentColor; }
}

@media (pointer: coarse) {
  .mapboxgl-ctrl-group button { width: 44px; height: 44px; }
  .mapboxgl-ctrl-bottom-right { margin-right: 8px; margin-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* Survey Earth global event additions */
.seiad-secondary-time { color: #718a9a !important; font-size: 8px !important; }
.seiad-your-survey { display: grid; gap: 4px; margin: 8px 0; padding: 9px; border: 1px solid rgba(94,234,212,.18); border-radius: 6px; background: rgba(94,234,212,.04); }
.seiad-your-survey span, .seiad-your-survey small { color: #7891a2; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.seiad-your-survey strong { color: #dffbf6; font-size: 11px; }
.seiad-your-survey b { color: var(--cyan); font-size: 9px; letter-spacing: .08em; }
.seiad-sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.seiad-sidebar-actions .button { padding-inline: 5px; font-size: 9px; }
.seiad-time-policy { display: grid; gap: 4px; margin-top: 13px; padding: 11px 12px; border-left: 2px solid var(--amber); background: rgba(251,191,36,.06); }
.seiad-time-policy strong { color: #f5d77a; font-size: 10px; }
.seiad-time-policy span { color: #ac9b73; font-size: 9px; line-height: 1.4; }
.seiad-progress { display: grid; gap: 7px; margin-bottom: 16px; }
.seiad-modal.seiad-onboarding-open { place-items: stretch; padding: 0; }
.seiad-modal.seiad-onboarding-open .seiad-modal-card { width: 100%; min-height: 100dvh; max-height: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.seiad-modal.seiad-onboarding-open .seiad-modal-card > #seiad-modal-body { width: min(720px, 100%); margin: 0 auto; }
.seiad-progress span { color: #89aea8; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.seiad-progress > div { height: 3px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.1); }
.seiad-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--amber)); transition: width .2s ease; }
.seiad-onboarding-card { min-height: 340px; display: grid; align-content: center; gap: 9px; padding: 28px 20px; border: 1px solid rgba(94,234,212,.2); border-radius: 10px; background: radial-gradient(circle at 80% 20%, rgba(94,234,212,.1), transparent 38%), linear-gradient(145deg, #102d34, #0d1827 70%); }
.seiad-onboarding-card h3 { margin: 0; color: #effffc; font-size: clamp(22px, 5vw, 30px); line-height: 1.05; }
.seiad-onboarding-card p { max-width: 560px; margin: 0; color: #bfd0d0; font-size: 12px; line-height: 1.55; }
.seiad-onboarding-detail { max-width: 560px; padding: 11px 12px; border-radius: 6px; color: #8db2b0; background: rgba(0,0,0,.15); font-size: 10px; line-height: 1.5; }
.seiad-onboarding-icon { color: var(--amber); font-size: 34px; }
.seiad-onboarding-schedule { display: grid; gap: 3px; }
.seiad-onboarding-schedule b { color: #f3dda0; }.seiad-onboarding-schedule strong { color: var(--cyan); font-size: 17px; }.seiad-onboarding-schedule small { color: #7891a2; }
.seiad-warning-text { color: #f3d47d; }
.seiad-mock-telemetry { display: grid; gap: 4px; color: var(--cyan); font: 700 11px monospace; }
.seiad-mock-telemetry span { color: #a7c2c6; font-size: 9px; font-weight: 400; }
.seiad-offline-callout { display: grid; gap: 4px; padding: 13px; border: 1px solid rgba(251,191,36,.3); border-radius: 6px; background: rgba(251,191,36,.08); }.seiad-offline-callout strong { color: #ffe19a; font-size: 14px; }.seiad-offline-callout span { color: #baaa82; font-size: 9px; letter-spacing: .1em; }
.seiad-registration-intro h3 { margin: 5px 0; color: #effffc; font-size: 22px; }.seiad-registration-intro p { margin: 0 0 5px; color: #91a9ae; font-size: 10px; line-height: 1.45; }
.seiad-registration-event { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 10px; border: 1px solid rgba(94,234,212,.18); border-radius: 7px; background: rgba(94,234,212,.05); }
.seiad-registration-event div { display: grid; gap: 3px; }.seiad-registration-event small { color: #7891a2; font-size: 7px; letter-spacing: .1em; }.seiad-registration-event strong { color: #dffbf6; font-size: 10px; }
.seiad-check-field { display: flex; align-items: flex-start; gap: 8px; color: #b5c8c8; font-size: 10px; line-height: 1.4; }.seiad-check-field input { width: 15px; height: 15px; margin-top: 0; accent-color: var(--cyan); }
.seiad-confirmation { display: grid; justify-items: start; gap: 7px; }.seiad-confirmation-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; color: #0b221f; background: var(--cyan); font-size: 23px; }.seiad-confirmation h3 { margin: 0; color: #effffc; font-size: 27px; }.seiad-confirmation > strong { color: #f3dda0; font-size: 13px; }
.seiad-confirmation-grid { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 11px 0; }.seiad-confirmation-grid span { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--border); border-radius: 5px; color: #7891a2; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }.seiad-confirmation-grid b { color: #dcebea; font-size: 11px; letter-spacing: 0; text-transform: none; }
.seiad-location-picker { display: grid; gap: 12px; }.seiad-zone-results { display: grid; max-height: 420px; overflow: auto; border-top: 1px solid var(--border); }.seiad-zone-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--border); color: #cfe1df; background: transparent; text-align: left; }.seiad-zone-row:hover { background: rgba(94,234,212,.07); }.seiad-zone-row span { display: grid; gap: 3px; }.seiad-zone-row strong { font-size: 11px; }.seiad-zone-row small { color: #7891a2; font-size: 8px; }.seiad-zone-row b { color: var(--cyan); font: 600 10px monospace; white-space: nowrap; }
.seiad-zone-group > strong { display: block; padding: 9px 4px 3px; color: #6f9a9c; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.seiad-global-hero { display: grid; gap: 6px; padding: 15px; border: 1px solid rgba(94,234,212,.18); border-radius: 8px; background: linear-gradient(135deg, #102e34, #101b29); }.seiad-global-hero h3 { margin: 0; color: #effffc; font-size: 21px; }.seiad-global-hero p { margin: 0; color: #91abad; font-size: 10px; line-height: 1.45; }.seiad-wave { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #718c9b; font-size: 7px; }.seiad-wave i { position: relative; display: block; height: 6px; flex: 1; border-radius: 9px; background: linear-gradient(90deg, #64748b, #3b82f6, #4ade80, #b08d35); }.seiad-wave i::after { content: ''; position: absolute; top: 50%; right: 0; width: 10px; height: 10px; transform: translate(50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }.seiad-wave b { color: #d9ebe9; font-size: 8px; white-space: nowrap; }.seiad-wave em { color: #b08d35; font-style: normal; }
.seiad-global-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }.seiad-global-card { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-top: 2px solid #64748b; border-radius: 5px; background: rgba(255,255,255,.025); }.seiad-global-card.upcoming { border-top-color: #64748b; }.seiad-global-card.active { border-top-color: #4ade80; background: rgba(74,222,128,.07); }.seiad-global-card.complete { border-top-color: #b08d35; opacity: .78; }.seiad-global-card small { color: #d5e4e1; font-size: 9px; font-weight: 750; text-transform: uppercase; }.seiad-global-card strong { color: var(--cyan); font: 700 13px monospace; }.seiad-global-card span, .seiad-global-card b { color: #7891a2; font-size: 8px; }.seiad-global-card i { color: #8ba6a8; font-size: 7px; font-style: normal; letter-spacing: .08em; }
.seiad-my-events { display: grid; gap: 8px; }.seiad-my-event-row { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.02); }.seiad-my-event-row > div { display: grid; gap: 3px; flex: 1; }.seiad-my-event-row strong { color: #dcebea; font-size: 10px; }.seiad-my-event-row small { color: #7891a2; font-size: 8px; }.seiad-four-seasons { display: grid; gap: 4px; margin-top: 8px; padding: 11px; border: 1px solid rgba(251,191,36,.25); border-radius: 6px; background: rgba(251,191,36,.05); }.seiad-four-seasons strong { color: #f5d77a; font-size: 11px; }.seiad-four-seasons span, .seiad-four-seasons b { color: #ae9b6b; font-size: 8px; }.seiad-four-seasons b { color: var(--cyan); }
.seiad-record-list { display: grid; gap: 7px; }.seiad-record-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.02); }.seiad-record-row div { display: grid; gap: 3px; }.seiad-record-row strong { color: #dcebea; font-size: 10px; }.seiad-record-row small { color: #7891a2; font-size: 8px; }.seiad-record-row > span { align-self: start; color: var(--cyan); font-size: 8px; letter-spacing: .08em; }

@media (max-width: 600px) {
  .seiad-global-grid { grid-template-columns: repeat(2, 1fr); }
  .seiad-confirmation-grid, .seiad-registration-event { grid-template-columns: 1fr 1fr; }
  .seiad-onboarding-card { min-height: 330px; padding: 22px 15px; }
}