:root {
  --color-primary: #1769f5;
  --color-primary-hover: #0f55d3;
  --color-secondary: #092653;
  --color-accent: #3f8c35;
  --color-background: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #dce5f2;
  --color-text-primary: #112044;
  --color-text-secondary: #637291;
  --color-text-muted: #7a88a3;
  --color-success: #16824f;
  --color-warning: #d97706;
  --color-error: #c43d4f;
  --color-info: #1769f5;
  --font-family-primary: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-h1: 32px;
  --font-h2: 22px;
  --font-h3: 18px;
  --font-body: 16px;
  --font-small: 14px;
  --font-xs: 12px;
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgba(18, 38, 73, .06);
  --shadow-md: 0 12px 32px rgba(18, 38, 73, .1);
  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --navy: #092653;
  --navy-2: #12396e;
  --blue: #1769f5;
  --blue-soft: #eaf2ff;
  --ink: #112044;
  --muted: #637291;
  --line: #dce5f2;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --green: #16824f;
  --orange: #d97706;
  --red: #c43d4f;
  --control-height: 48px;
  font-family: var(--font-family-primary);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; }
button, select, label[for] { cursor: pointer; }
[hidden] { display: none !important; }

.survey-shell { min-height: 100vh; }
body[data-survey-state="login"] { background: #f4f7fb; }
body[data-survey-state="login"] .survey-header { display: none; }
.survey-header {
  position: sticky; top: 0; z-index: 1000; height: 72px; padding: 10px clamp(16px, 3vw, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--ink); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
}
.survey-brand { min-height: 44px; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.survey-brand img { width: 164px; height: 48px; object-fit: contain; object-position: right center; }
.survey-header-controls { min-width: 0; display: flex; align-items: center; gap: 10px; }
.city-picker { display: grid; grid-template-columns: auto minmax(120px, 210px); align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.city-picker select { width: 100%; height: var(--control-height); padding: 10px 32px 10px 12px; color: var(--ink); background: #f7f9fc; border: 1px solid #cbd8e9; border-radius: 8px; }
.survey-language-control select { width: 58px; height: var(--control-height); padding: 8px; color: var(--ink); background: #f7f9fc; border: 1px solid #cbd8e9; border-radius: 8px; font-size: 13px; font-weight: 800; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.survey-main { width: min(1440px, 100%); margin: 0 auto; padding: 22px clamp(14px, 2vw, 26px) 96px; }
.field-gate { min-height: calc(100vh - 44px); display: grid; place-items: center; }
body[data-survey-state="login"] .survey-main { width: 100%; padding: 22px 16px; }
.gate-logo { width: min(238px, 74%); height: auto; display: block; margin: 2px auto 16px; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.field-login-card { width: min(430px, 100%); padding: 20px 28px 22px; background: var(--surface); border: 1px solid #d8e2f0; border-radius: 24px; box-shadow: 0 16px 40px rgba(17,32,68,.09); }
.field-user-form { display: grid; gap: 6px; }
.field-login-toolbar { min-height: 38px; display: flex; justify-content: flex-start; }
.field-login-language { display: flex; grid-template-columns: auto auto; align-items: center; gap: 8px; font-size: 12px; }
.field-login-language select { width: auto; min-width: 112px; min-height: 40px; padding-block: 0; border-radius: 10px; font-size: 13px; }
.field-login-heading { text-align: center; }
.field-login-heading h1 { margin: 0; color: var(--navy); font-size: 28px; line-height: 1.2; letter-spacing: 0; }
.field-login-heading p { margin: 6px 0 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.field-user-form > label { margin-top: 4px; }
.field-user-form input, .field-user-form select { border-radius: 14px; }
.field-user-form .primary-button { min-height: 48px; margin-top: 10px; border-radius: 14px; }
.field-login-error { margin-bottom: 8px; padding: 11px 13px; border: 1px solid #f5c5c0; border-radius: 12px; color: #9f2f2a; background: #fff1f1; font-size: 13px; line-height: 1.45; }
.field-login-note { margin: 8px 8px 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.admin-login-link { min-height: 58px; margin-top: 10px; padding: 8px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 12px; color: var(--ink); background: #f2f7ff; border: 1px solid #cfe0f8; border-radius: 14px; text-decoration: none; }
.admin-login-link:hover { border-color: var(--blue); background: #eaf2ff; }
.admin-login-icon { width: 36px; height: 36px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 10px; }
.admin-login-icon svg, .admin-login-arrow { width: 21px; height: 21px; }
.admin-login-link strong, .admin-login-link small { display: block; }
.admin-login-link strong { font-size: 14px; }
.admin-login-link small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.admin-login-arrow { color: #58769f; }
label { display: grid; gap: 7px; color: var(--muted); font-size: var(--font-small); font-weight: 700; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); background: white; border: 1px solid #cfdbea; border-radius: var(--radius-md); outline: none; font-size: var(--font-body); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,245,.12); }
.manual-choice { margin-top: 8px; }
.primary-button, .secondary-button { min-height: 48px; padding: 11px 18px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 15px; font-weight: 800; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.primary-button { color: white; background: var(--blue); }
.primary-button:hover { background: var(--color-primary-hover); }
.secondary-button { color: var(--ink); background: white; border-color: #cbd8e9; }
.compact { min-height: 44px; padding: 9px 14px; font-size: 14px; }

.workspace-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.workspace-heading h1 { font-size: 32px; margin-bottom: 0; }

html[dir="ltr"] .survey-brand img { object-position: left center; }
html[dir="ltr"] .field-login-error { border-right: 0; border-left: 3px solid #c2413b; }
html[dir="ltr"] .back-button svg { transform: scaleX(-1); }
html[dir="ltr"] .field-login-toolbar { justify-content: flex-end; }
html[dir="ltr"] .admin-login-arrow { transform: scaleX(-1); }
.workspace-actions { display: flex; align-items: center; gap: 10px; }
.local-mode { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #3d5474; background: #edf2f8; border-radius: 999px; font-size: 12px; font-weight: 800; }
.local-mode i { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.text-button { min-height: 44px; padding: 8px 10px; color: var(--blue); background: transparent; border: 0; font-size: 14px; font-weight: 800; }
.survey-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
#panel-map { display: grid; grid-template-columns: minmax(0, 1fr) 336px; grid-template-rows: auto auto 1fr; grid-template-areas: "stage controls" "stage metrics" "stage empty"; align-items: start; overflow: visible; background: transparent; border: 0; border-radius: 0; }
.drafts-heading { min-height: 68px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.drafts-heading p { margin: 0; color: var(--muted); font-size: var(--font-small); }
.operations-toolbar { grid-area: controls; padding: 18px; display: grid; gap: 16px; background: #fbfcfe; border: 1px solid var(--line); border-bottom: 0; border-radius: 0 8px 0 0; }
.operations-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.operations-title > div { display: grid; gap: 4px; }
.operations-title strong { font-size: var(--font-h2); }
.operations-title span { color: var(--muted); font-size: var(--font-small); }
.map-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.detected-address { padding: 8px 10px; border: 1px solid #b9d4c6; border-radius: 6px; color: #116440; background: #edf8f2; font-size: 11px; line-height: 1.35; }
.detected-address strong { font-weight: 800; }
.detected-address span { display: block; margin-top: 2px; color: #597068; font-size: 9px; }
.map-address-search { min-height: 48px; padding: 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 10px; color: var(--ink); background: white; border: 1px solid #cbd8e9; border-radius: 7px; }
.map-address-search input { min-height: 46px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.map-address-search input:focus { border: 0; box-shadow: none; }
.map-address-search svg { width: 20px; height: 20px; color: var(--blue); }
.icon-action { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); background: white; border: 1px solid #cbd8e9; border-radius: 7px; }
.icon-action svg { width: 21px; height: 21px; }
.operations-subbar { display: grid; gap: 10px; }
.status-filters, .view-toggle { min-height: 52px; width: 100%; padding: 4px; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: #edf2f8; border-radius: var(--radius-md); }
.status-filters button, .view-toggle button { min-height: 44px; padding: 8px 13px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: var(--font-small); font-weight: 800; }
.status-filters button.active, .view-toggle button.active { color: var(--ink); background: white; box-shadow: var(--shadow-sm); }
.survey-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; border: 1px solid var(--line); border-top: 0; }
.survey-metric { min-height: 66px; padding: 11px 14px; display: grid; align-content: center; gap: 3px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.survey-metric:nth-child(2n) { border-left: 0; }
.survey-metric:nth-child(n+3) { border-bottom: 0; }
.survey-metric strong { font-size: 21px; line-height: 1; }
.survey-metric span { color: var(--muted); font-size: 13px; }
.map-stage { grid-area: stage; position: sticky; top: 88px; height: calc(100vh - 190px); min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px 0 0 8px; background: #dce7d4; }
.field-map { position: absolute !important; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: inherit; }
.map-legend { position: absolute; z-index: 500; top: 14px; right: 14px; padding: 9px 11px; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 7px; font-size: 12px; backdrop-filter: blur(8px); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.pending { background: var(--orange); }
.legend-dot.reviewed { background: var(--green); }
.legend-dot.current { background: var(--blue); }
.field-popup { min-width: 180px; display: grid; gap: 4px; direction: rtl; }
.field-popup strong { font-size: 14px; }
.field-popup span { color: var(--muted); font-size: 12px; }
.address-list { position: absolute; z-index: 650; inset: 0; overflow-y: auto; padding-bottom: 92px; background: #f7f9fc; border: 0; border-radius: inherit; }
.address-list-summary { position: sticky; z-index: 5; top: 0; min-height: 82px; padding: 13px 16px; display: grid; grid-template-columns: 44px minmax(220px, 1fr) auto; align-items: center; gap: 12px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.address-list-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--muted); background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; }
.address-list-close:hover { color: var(--ink); border-color: #b9c9dd; }
.address-list-copy { min-width: 0; display: grid; gap: 3px; }
.address-list-copy strong { font-size: 18px; }
.address-list-copy span { color: var(--muted); font-size: 12px; }
.address-list-totals { display: flex; align-items: center; gap: 8px; }
.address-list-totals span { min-width: 72px; padding: 7px 9px; display: grid; gap: 2px; color: var(--muted); background: #f4f7fb; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; text-align: center; }
.address-list-totals b { color: var(--ink); font-size: 15px; }
.street-address-group { background: white; border-bottom: 8px solid #f0f4f9; }
.street-summary-row { min-height: 72px; padding: 12px 16px; display: grid; grid-template-columns: 10px minmax(0, 1fr) 58px 58px auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.street-state-dot { width: 10px; height: 10px; background: #94a3b8; border-radius: 50%; }
.street-address-group.complete .street-state-dot { background: var(--green); }
.street-address-group.in-progress .street-state-dot { background: var(--orange); }
.street-summary-main { min-width: 0; display: grid; gap: 3px; }
.street-summary-main strong { font-size: 17px; }
.street-summary-main small { color: var(--muted); font-size: 12px; }
.street-address-group.complete .street-summary-main small { color: #08623a; }
.street-address-group.in-progress .street-summary-main small { color: #8a4b00; }
.street-summary-count { display: grid; gap: 2px; text-align: center; }
.street-summary-count strong { font-size: 16px; }
.street-summary-count small, .street-summary-detail { color: var(--muted); font-size: 11px; }
.street-address-empty { margin: 0; padding: 14px 37px 16px; color: var(--muted); background: #fbfcfe; font-size: 13px; }
.address-row { width: 100%; min-height: 72px; padding: 11px 16px 11px 37px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; color: var(--ink); background: white; border: 0; border-bottom: 1px solid #e8edf4; text-align: right; }
.address-row:hover, .address-row:focus-visible { background: #f7faff; outline: 2px solid var(--blue); outline-offset: -2px; }
.address-row-main { min-width: 0; display: grid; gap: 5px; }
.address-row-main strong { font-size: 16px; }
.address-row-main small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.address-row-side { display: flex; align-items: center; gap: 12px; }
.address-status { min-width: 76px; padding: 6px 9px; border-radius: var(--radius-full); text-align: center; font-size: 12px; font-weight: 800; }
.address-status.pending { color: #8a4b00; background: #fff0d8; }
.address-status.reviewed { color: #08623a; background: #e4f6ec; }
.address-arrow { color: var(--blue); font-size: 24px; }
.list-empty { padding: 68px 20px; color: var(--muted); text-align: center; font-size: var(--font-body); }

.map-address-sheet { position: absolute; z-index: 600; right: 0; bottom: 0; left: 0; max-height: min(540px, calc(100% - 80px)); padding: 0 16px 14px; overflow-y: auto; color: var(--ink); background: rgba(255,255,255,.98); border: 1px solid #cad7e8; border-width: 1px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 28px rgba(18,38,73,.16); backdrop-filter: blur(10px); transition: max-height var(--motion-medium) var(--ease-standard); }
.map-address-sheet[data-mode="hidden"] { display: none; }
.address-sheet-handle { display: none; }
.address-sheet-heading { min-height: 62px; display: flex; align-items: center; gap: 8px; direction: ltr; }
.sheet-heading-action { min-width: 0; min-height: 54px; padding: 6px 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); background: transparent; border: 0; text-align: right; }
.sheet-heading-action { direction: rtl; }
.sheet-heading-action > span:first-child { min-width: 0; }
.address-sheet-heading h2 { margin: 0; font-size: 18px; }
.address-sheet-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.sheet-close { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
.sheet-close:hover { background: #edf2f8; }
.sheet-close svg { width: 20px; height: 20px; }
.street-progress { flex: 0 0 auto; padding: 6px 9px; color: #08623a; background: #e4f6ec; border-radius: 999px; font-size: 12px; font-weight: 800; }
.map-address-fields { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 10px; }
.map-address-fields label { min-width: 0; }
.map-address-fields input { min-width: 0; }
.house-status-key { padding: 10px 0 7px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.house-status-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-house-grid { display: grid; grid-template-columns: repeat(6, minmax(74px, 1fr)); gap: 8px; }
.map-house-button { min-height: 58px; padding: 8px; display: grid; place-items: center; gap: 4px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 7px; }
.map-house-button:hover, .map-house-button:focus-visible { border-color: var(--blue); outline: 3px solid rgba(23,105,245,.12); }
.map-house-button strong { font-size: 16px; }
.map-house-button span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.map-house-button i { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.map-house-button.pending i { background: var(--orange); }
.map-house-button.not-surveyed i { background: #aeb9c8; }
.map-house-button.not-surveyed { background: #fbfcfe; }
.address-sheet-empty { grid-column: 1 / -1; margin: 0; padding: 13px 0 2px; color: var(--muted); font-size: 13px; }
.street-search-results { margin-top: 10px; display: grid; }
.street-result { min-height: 54px; padding: 9px 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; color: var(--ink); background: white; border: 0; border-top: 1px solid var(--line); text-align: right; }
.street-result:hover, .street-result:focus-visible { background: #f3f7fd; outline: 2px solid var(--blue); outline-offset: -2px; }
.street-result strong, .street-result small { display: block; }
.street-result strong { font-size: 14px; }
.street-result small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.street-result-progress { color: #087b4b; background: #e4f6ec; border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 800; }
.street-result.in-progress .street-result-progress { color: #8a4b00; background: #fff0d8; }
.street-result.not-started .street-result-progress { color: #66758c; background: #eef1f5; }
.add-street-result { margin-top: 6px; padding-inline: 10px; border: 1px dashed #f0a52b; border-radius: 7px; background: #fff8e9; }
.add-street-result .street-result-progress { color: #9a5b00; background: #ffedc5; }
.street-result svg { width: 18px; height: 18px; color: var(--muted); }
.collapsed-address-preview { width: 100%; min-height: 52px; padding: 8px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--line); text-align: right; }
.collapsed-address-preview > span { display: flex; align-items: center; gap: 7px; }
.collapsed-address-preview small { color: var(--muted); font-size: 11px; }
.collapsed-address-preview svg { width: 18px; height: 18px; color: var(--muted); }
.map-address-sheet[data-mode="collapsed"] { max-height: 165px; }
.map-address-sheet[data-mode="collapsed"] .sheet-close,
.map-address-sheet[data-mode="collapsed"] .map-address-fields,
.map-address-sheet[data-mode="collapsed"] .street-search-results,
.map-address-sheet[data-mode="collapsed"] .house-status-key { display: none; }
.map-address-sheet[data-mode="street"] .map-address-fields,
.map-address-sheet[data-mode="street"] .map-house-grid,
.map-address-sheet[data-mode="houses"] .street-search-results { display: none; }
.house-map-label { width: 22px; height: 22px; margin: 0 !important; display: grid; place-items: center; color: white; background: transparent; border: 0; box-shadow: none; font-size: 9px; font-weight: 900; }
.leaflet-tooltip.house-map-label::before { display: none; }
.selected-street-line { filter: drop-shadow(0 2px 3px rgba(23,105,245,.28)); }

#survey-form { display: grid; }
.survey-flow-header { min-height: 76px; padding: 12px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; background: #fbfcfe; border-bottom: 1px solid var(--line); }
.survey-flow-header > div { min-width: 0; display: grid; gap: 3px; }
.survey-flow-header > div span { color: var(--blue); font-size: 13px; font-weight: 800; }
.survey-flow-header > div strong { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.back-button { min-height: 44px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; font-weight: 800; }
.back-button svg { width: 18px; height: 18px; }
.flow-save-state { padding: 7px 10px; color: #52637f; background: #edf2f8; border-radius: 999px; font-size: 12px; font-weight: 800; }
.form-section { padding: 20px; display: grid; gap: 16px; border-bottom: 1px solid var(--line); }
.street-section { background: linear-gradient(90deg, rgba(23,105,245,.06), transparent 55%); }
.address-grid input[list] { width: 100%; }
.section-heading { display: flex; align-items: center; gap: 11px; }
.section-heading h2, .drafts-heading h2 { margin: 0; font-size: 18px; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.step-number { width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 50%; font-size: 12px; font-weight: 900; }
.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.field-grid .wide { grid-column: span 2; }
.location-row { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.location-row .captured { color: var(--green); font-weight: 800; }
.bin-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bin-counter { min-height: 76px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 7px; }
.bin-counter > span { display: grid; gap: 4px; }
.bin-counter small { color: var(--muted); }
.bin-counter > div { display: grid; grid-template-columns: 44px 32px 44px; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.bin-counter button { width: 44px; height: 44px; display: grid; place-items: center; justify-self: center; padding: 0; color: var(--blue); background: var(--blue-soft); border: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
.bin-counter output { font-weight: 900; }
.damage-check { padding: 13px; display: flex; align-items: center; gap: 11px; color: var(--ink); background: #fff8f0; border: 1px solid #f1d3b1; border-radius: 7px; }
.damage-check input { width: 20px; min-height: 20px; accent-color: var(--red); }
.damage-check span { display: grid; gap: 2px; }
.damage-check small { color: #80654d; font-weight: 500; }
.prior-record { padding: 13px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; color: #294263; background: #fff8e8; border-bottom: 1px solid #efd69b; }
.prior-record strong, .prior-record span { display: block; }
.prior-record strong { color: var(--ink); font-size: 16px; }
.prior-record span { margin-top: 4px; font-size: 13px; }
.prior-record-content { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 11px; }
.prior-record-icon { width: 36px; height: 36px; margin: 0 !important; display: grid !important; place-items: center; color: #9a5b00; background: #ffe8b7; border-radius: 50%; }
.prior-record-icon svg { width: 19px; height: 19px; }
.prior-record button { min-height: 40px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; align-self: center; color: var(--ink); background: white; border: 1px solid #e1c783; border-radius: 6px; }
.prior-record button svg { width: 16px; height: 16px; }
.prior-record button span { margin: 0; }
.qr-fields { display: grid; gap: 10px; }
.qr-field { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: end; gap: 10px; }
.qr-field > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 50%; font-weight: 900; }
.qr-field > span:last-child { min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 700; }
.capture-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.photo-capture-stage { min-height: 260px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; color: white; background: linear-gradient(145deg, #28415f, #607b94); border: 1px solid #526c86; border-radius: 8px; text-align: center; cursor: pointer; }
.photo-capture-stage:hover { background: linear-gradient(145deg, #233a56, #56738d); }
.photo-capture-stage:focus-within { outline: 3px solid rgba(23,105,245,.2); outline-offset: 3px; }
.photo-capture-stage > svg { width: 34px; height: 34px; flex: 0 0 auto; }
.photo-capture-stage > span { display: grid; gap: 4px; }
.photo-capture-stage strong { font-size: 17px; }
.photo-capture-stage small { color: #d7e2ed; font-size: 12px; font-weight: 500; }
.camera-action, .gallery-action { min-height: 82px; padding: 14px; display: flex; align-items: center; gap: 12px; border-radius: 8px; text-align: right; }
.camera-action { color: #422006; background: #fff2d3; border: 1px solid #e6b34d; }
.gallery-action { color: var(--ink); background: #f7faff; border: 1px solid #c9d9ef; }
.camera-action svg, .gallery-action svg { width: 26px; height: 26px; flex: 0 0 auto; }
.camera-action span, .gallery-action span { display: grid; gap: 3px; }
.camera-action strong, .gallery-action strong { font-size: 16px; }
.camera-action small, .gallery-action small { color: #6c604a; font-size: 13px; font-weight: 500; }
.gallery-action small { color: var(--muted); }
.scan-qr-action { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.scan-qr-action svg { width: 20px; height: 20px; }
.photo-row { min-height: 126px; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.photo-card, .photo-add-card { position: relative; flex: 0 0 92px; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #e3eaf1; scroll-snap-align: start; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-card button { position: absolute; top: 5px; left: 5px; width: 25px; height: 25px; color: white; background: rgba(9,38,83,.78); border: 0; border-radius: 50%; }
.photo-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 6px 6px; overflow: hidden; color: white; background: linear-gradient(transparent, rgba(9,38,83,.78)); font-size: 11px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.photo-add-card { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); background: #fbfcfe; border-style: dashed; border-color: #b9c8da; cursor: pointer; }
.photo-add-card:hover { color: var(--blue); background: #f3f7ff; border-color: var(--blue); }
.photo-add-card svg { width: 22px; height: 22px; }
.photo-add-card span { font-size: 12px; font-weight: 800; }
.form-actions { position: sticky; bottom: 74px; z-index: 20; padding: 14px 20px; display: flex; justify-content: flex-end; gap: 10px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
.form-actions button { min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.form-actions button svg { width: 18px; height: 18px; }
.survey-complete { min-height: 560px; padding: 54px 24px; display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.complete-mark { width: 64px; height: 64px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; }
.complete-mark svg { width: 30px; height: 30px; }
.survey-complete > span { margin-top: 8px; color: var(--green); font-size: 14px; font-weight: 900; }
.survey-complete h2 { margin: 0; font-size: 28px; }
.survey-complete p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.next-actions { width: min(520px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.next-actions .primary-button { grid-column: 1 / -1; }
.next-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.next-actions svg { width: 19px; height: 19px; }

.drafts-heading h2 { margin-bottom: 4px; }
.draft-list { display: grid; }
.draft-item { padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.draft-item:last-child { border-bottom: 0; }
.draft-item strong, .draft-item small { display: block; }
.draft-item small { margin-top: 4px; color: var(--muted); }
.draft-status { color: var(--orange); font-size: 13px; font-weight: 800; }
.draft-actions { display: flex; gap: 7px; }
.draft-actions button { min-height: 44px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); background: white; }
.draft-item.locked { background: #f8fafc; }
.draft-item.locked .draft-status { color: var(--green); }
.draft-locked { min-height: 40px; padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; color: #315e4b; background: #eaf6ef; border: 1px solid #c9e7d5; border-radius: 6px; font-size: 13px; font-weight: 800; }
.draft-locked svg { width: 16px; height: 16px; }
.empty-drafts { padding: 70px 20px; text-align: center; color: var(--muted); }

.survey-nav { position: fixed; z-index: 1100; right: 50%; bottom: 0; transform: translateX(50%); width: min(520px, 100%); height: calc(68px + env(safe-area-inset-bottom)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--navy); border: 1px solid #254979; border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -8px 28px rgba(9,38,83,.2); }
.survey-nav button { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #b8c9e1; background: transparent; border: 0; border-radius: 6px; font-size: 15px; font-weight: 800; }
.survey-nav button.active { color: white; background: var(--blue); }
.survey-nav button > svg { width: 20px; height: 20px; }
.survey-nav b { min-width: 20px; height: 20px; display: grid; place-items: center; color: var(--navy); background: white; border-radius: 10px; font-size: 12px; }
.qr-dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 8px; overflow: hidden; color: white; background: #06152f; }
.qr-dialog::backdrop { background: rgba(3,12,27,.76); }
.dialog-heading { height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.dialog-heading button { width: 34px; height: 34px; color: white; background: transparent; border: 1px solid #52647e; border-radius: 50%; font-size: 24px; }
.qr-dialog video { width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover; background: black; }
.qr-dialog p { margin: 0; padding: 12px 16px 16px; color: #c4d1e3; text-align: center; }
.survey-toast { position: fixed; z-index: 2000; left: 50%; bottom: 92px; transform: translate(-50%, 20px); max-width: calc(100% - 30px); padding: 11px 16px; color: white; background: #102445; border-radius: 7px; opacity: 0; pointer-events: none; transition: .2s ease; }
.survey-toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  body[data-panel="map"] { height: 100dvh; overflow: hidden; }
  .survey-header { height: 64px; padding: 8px 12px; }
  .survey-brand img { width: 132px; height: 42px; }
  .city-picker { grid-template-columns: minmax(105px, 145px); }
  .city-picker > span { display: none; }
  .survey-main { padding: 12px 8px 98px; }
  body[data-panel="map"] .survey-main { height: calc(100dvh - 64px); padding-bottom: 0; overflow: hidden; }
  body[data-panel="map"] .survey-workspace { height: 100%; }
  body[data-survey-state="login"] .survey-main { padding: 12px; }
  .field-gate { min-height: calc(100dvh - 24px); }
  .gate-logo { width: min(224px, 72%); margin: 2px auto 14px; }
  .field-login-card { padding: 18px 20px 22px; }
  .field-login-heading h1 { font-size: 26px; }
  .workspace-heading { display: none; }
  .workspace-actions { gap: 2px; }
  .eyebrow { font-size: 13px; }
  .local-mode { padding: 8px 10px; font-size: 13px; }
  #panel-map { position: relative; display: block; min-height: calc(100dvh - 162px); overflow: hidden; background: #dce7d4; border: 1px solid var(--line); border-radius: 8px; }
  body[data-panel="map"] #panel-map { height: calc(100% - 12px); min-height: 0; }
  .operations-toolbar { position: absolute; z-index: 700; top: 8px; right: 8px; left: 8px; padding: 7px; gap: 6px; background: rgba(255,255,255,.96); border: 1px solid rgba(191,208,230,.95); border-radius: 8px; box-shadow: 0 7px 22px rgba(18,38,73,.14); backdrop-filter: blur(8px); }
  .operations-title { display: none; }
  .map-search-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; }
  .map-address-search { min-height: var(--control-height); padding-inline: 10px; }
  .map-address-search input { min-height: 46px; font-size: 16px; }
  .icon-action { width: var(--control-height); height: var(--control-height); }
  .operations-subbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: hidden; }
  .status-filters { min-width: 0; width: auto; padding: 0; display: flex; gap: 3px; overflow-x: auto; background: transparent; border-radius: 0; scrollbar-width: none; }
  .status-filters::-webkit-scrollbar { display: none; }
  .view-toggle { width: 106px; flex: 0 0 106px; }
  .status-filters, .view-toggle { min-height: var(--control-height); }
  .status-filters button { min-width: 54px; min-height: var(--control-height); padding: 7px 10px; border-radius: 24px; font-size: 12px; }
  .view-toggle button { min-height: var(--control-height); padding-inline: 6px; font-size: 12px; }
  .status-filters button.active { color: white; background: var(--navy); box-shadow: none; }
  .status-filters button:nth-child(4) { display: none; }
  .survey-metrics { display: none; }
  .map-stage { position: relative; top: auto; height: calc(100dvh - 162px); min-height: 570px; border: 0; border-radius: 0; }
  body[data-panel="map"] .map-stage { height: 100%; min-height: 0; }
  .field-map { position: absolute !important; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .field-map .leaflet-control-zoom { margin-top: 110px; margin-left: 10px; overflow: hidden; border: 1px solid #c4d1e1; border-radius: 6px; box-shadow: 0 5px 16px rgba(18,38,73,.16); }
  .field-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 42px; color: var(--navy); background: rgba(255,255,255,.97); border-color: #d7e0ec; font-size: 23px; font-weight: 700; }
  .field-map .leaflet-control-zoom a:hover,
  .field-map .leaflet-control-zoom a:focus-visible { color: var(--blue); background: #f4f7fb; }
  .map-legend { top: 102px; right: 9px; left: auto; padding: 6px 8px; gap: 8px; font-size: 10px; }
  .map-legend span:nth-child(3) { display: none; }
  .address-list { position: absolute; inset: 0; height: auto; min-height: 0; padding-top: 126px; padding-bottom: 92px; border: 0; border-radius: 0; }
  .address-list-summary { top: 0; min-height: 82px; padding: 10px 12px; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; }
  .address-list-summary .address-list-totals { grid-column: 1 / -1; }
  .address-list-copy strong { font-size: 17px; }
  .address-list-copy span { font-size: 12px; line-height: 1.4; }
  .address-list-totals { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .address-list-totals span { min-width: 0; padding: 6px 4px; }
  .street-summary-row { min-height: 76px; padding: 11px 12px; grid-template-columns: 10px minmax(0, 1fr) 48px 48px; gap: 8px; }
  .street-summary-detail { grid-column: 2 / -1; }
  .street-summary-main strong { font-size: 17px; }
  .address-row { min-height: 76px; padding: 12px 12px 12px 20px; }
  .address-row-main small { white-space: normal; line-height: 1.35; }
  .address-row-side { gap: 7px; }
  .address-status { min-width: 66px; }
  .form-section { padding: 16px 13px; }
  .survey-flow-header { min-height: 70px; padding: 10px 12px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
  .back-button { width: 44px; padding: 0; justify-content: center; }
  .back-button span { display: none; }
  .flow-save-state { padding: 6px 8px; font-size: 12px; }
  .survey-flow-header > div strong { font-size: 17px; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid .wide { grid-column: 1 / -1; }
  .bin-counters { grid-template-columns: 1fr; }
  .bin-counter { min-height: 66px; }
  .bin-counter button { width: 44px; height: 44px; }
  .prior-record { padding: 12px 13px; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; }
  .prior-record button { width: 40px; padding: 0; justify-content: center; }
  .prior-record button span { display: none; }
  .form-actions { bottom: 72px; padding: 12px; }
  .form-actions button { min-width: 0; flex: 1; padding-inline: 8px; }
  .camera-action, .gallery-action { min-height: 76px; }
  .photo-capture-stage { min-height: 0; aspect-ratio: 16 / 9; padding: 18px; }
  .photo-capture-stage > svg { width: 30px; height: 30px; }
  .photo-capture-stage strong { font-size: 15px; }
  .photo-capture-stage small { display: none; }
  .photo-row { min-height: 116px; gap: 8px; }
  .photo-card, .photo-add-card { flex-basis: 82px; }
  .scan-qr-action { width: 100%; justify-content: center; }
  .survey-complete { min-height: calc(100dvh - 190px); padding: 36px 18px; }
  .next-actions { grid-template-columns: 1fr; }
  .next-actions .primary-button { grid-column: auto; }
  .draft-item { grid-template-columns: 1fr; }
  .draft-actions { justify-content: flex-start; }
  body[data-panel="map"] .survey-main { height: calc(100dvh - 64px - 72px - env(safe-area-inset-bottom)); padding-bottom: 0; }
  .survey-nav { right: 0; bottom: 0; transform: none; width: 100%; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; }
  .survey-nav button { min-height: 58px; font-size: 15px; }
  .map-address-sheet { position: fixed; z-index: 690; top: var(--address-sheet-top, 196px); right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; max-height: none; overscroll-behavior: contain; padding: 0 12px 12px; border-width: 0 1px 1px; border-radius: 0 0 12px 12px; box-shadow: 0 14px 30px rgba(18,38,73,.18); }
  .map-address-sheet[data-mode="collapsed"] { display: none; }
  .address-sheet-handle { width: 100%; height: 44px; margin: 0; padding: 0; place-items: center; background: transparent; border: 0; cursor: pointer; touch-action: manipulation; }
  .address-sheet-handle { display: grid; }
  .address-sheet-handle span { width: 42px; height: 4px; background: #c7d1dd; border-radius: 3px; transition: width var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
  .address-sheet-handle:hover span,
  .address-sheet-handle:focus-visible span { width: 52px; background: #8fa0b4; }
  .address-sheet-handle:focus-visible { outline: 3px solid rgba(23,105,245,.22); outline-offset: -3px; }
  .address-sheet-heading { min-height: 48px; gap: 8px; }
  .address-sheet-heading h2 { font-size: 17px; }
  .address-sheet-heading p { font-size: 11px; }
  .street-progress { padding: 5px 8px; font-size: 11px; }
  .map-address-fields { grid-template-columns: minmax(0, 1.45fr) minmax(90px, .65fr); gap: 8px; }
  .map-address-fields label { font-size: 12px; }
  .map-address-fields input { min-height: var(--control-height); padding: 9px 10px; font-size: 15px; }
  .house-status-key { padding: 9px 0 6px; font-size: 11px; }
  .map-house-grid { grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 7px; }
  .map-house-button { min-height: 55px; padding: 6px; }
  .map-house-button strong { font-size: 15px; }
  .map-house-button span { font-size: 10px; }
  .street-result { min-height: 52px; }
  body[data-panel="add"] #survey-form { padding-bottom: 86px; }
  body[data-panel="add"] .form-actions { position: static; }
  .sheet-close, .dialog-heading button { width: 44px; height: 44px; }
  .photo-card button { top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(9,38,83,.82) 0 14px, transparent 15px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}