:root {
  --ink: #121820;
  --muted: #66717d;
  --paper: #f4f1eb;
  --panel: #ffffff;
  --line: #d9dde1;
  --accent: #d7ff4f;
  --accent-strong: #b9e62b;
  --cyan: #54dcf3;
  --navy: #182532;
  --danger: #d94b4b;
  --shadow: 0 18px 50px rgba(20, 30, 38, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; min-width: 320px; background: var(--paper); }
body.auth-locked { overflow: hidden; }
body.auth-locked > .topbar, body.auth-locked > .app-shell { visibility: hidden; }
body.modal-open { overflow: hidden; }
.read-only-pill { padding: 6px 8px; border-radius: 999px; color: #5c4917; background: #fff0b8; font-size: 8px; font-weight: 950; letter-spacing: .06em; }
.viewer-mode #newProjectButton, .viewer-mode label[for="importBackupInput"], .viewer-mode .project-remove { display: none !important; }
.viewer-mode #remoteModeView input, .viewer-mode #remoteModeView select, .viewer-mode #remoteModeView textarea,
.viewer-mode #fieldModeView input, .viewer-mode #fieldModeView select, .viewer-mode #fieldModeView textarea { pointer-events: none; opacity: .72; }
.viewer-mode #remoteModeView button, .viewer-mode #fieldModeView button, .viewer-mode .upload-card { pointer-events: none; opacity: .5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); min-height: 100vh; background: #f4f1eb; }
.auth-visual { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px,6vw,84px); color: #fff; background: radial-gradient(circle at 78% 22%,rgba(84,220,243,.2),transparent 27%), radial-gradient(circle at 18% 82%,rgba(215,255,79,.16),transparent 31%), #182532; }
.auth-brand, .auth-mobile-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand > span, .auth-mobile-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #182532; background: #d7ff4f; font-weight: 950; transform: rotate(-4deg); }
.auth-brand strong { font-size: 21px; }
.auth-kicker { color: #d7ff4f; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.auth-visual h1 { max-width: 760px; margin: 13px 0 18px; font-size: clamp(34px,4vw,62px); line-height: 1.02; letter-spacing: -.055em; }
.auth-visual p { max-width: 620px; margin: 0; color: #b8c4cc; font-size: 16px; line-height: 1.65; }
.auth-features { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-features span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #c4ced5; background: rgba(255,255,255,.05); font-size: 10px; font-weight: 800; }
.auth-card { width: min(420px,calc(100% - 48px)); align-self: center; justify-self: center; padding: 40px; border: 1px solid #ddd9d1; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(18,25,31,.12); }
.auth-mobile-brand { display: none; }
.auth-card h2 { margin: 8px 0 7px; font-size: 28px; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 26px; color: #69747c; font-size: 12px; line-height: 1.5; }
.auth-card .field { margin-bottom: 14px; }
.auth-card input { padding: 13px; }
.auth-card .button { margin-top: 5px; padding: 13px 16px; }
.auth-card > small { display: block; margin-top: 15px; color: #8a9399; font-size: 9px; line-height: 1.5; text-align: center; }
.auth-error { margin: 4px 0 10px; padding: 10px 12px; border-left: 3px solid #d94b4b; border-radius: 7px; color: #833838; background: #fff0f0; font-size: 10px; }

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  color: #fff;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--navy); background: var(--accent); border-radius: 11px;
  font-weight: 900; transform: rotate(-4deg);
}
.brand strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.brand span { display: block; color: #aeb9c4; font-size: 11px; margin-top: 1px; }
.mode-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.06); }
.mode-switch button { border: 0; border-radius: 8px; padding: 8px 11px; color: #b9c3cb; background: transparent; font-size: 11px; font-weight: 800; }
.mode-switch button span { margin-right: 4px; }
.mode-switch button:hover, .mode-switch button.active { color: var(--navy); background: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.account-button { display: flex; align-items: center; gap: 7px; max-width: 130px; border: 0; padding: 4px 8px 4px 4px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); }
.account-button:hover { background: rgba(255,255,255,.14); }
.account-button span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #182532; background: #d7ff4f; font-size: 9px; font-weight: 950; }
.account-button b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.offline-pill { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; color: #b9c6ce; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 800; }
.offline-pill i { width: 7px; height: 7px; border-radius: 50%; background: #50cf8c; }
.offline-pill.offline { color: #fff0bf; background: rgba(232,173,62,.14); }
.offline-pill.offline i { background: #e8ad3e; }
.install-button { padding: 8px 11px; font-size: 10px; }
.status-pill {
  display: flex; align-items: center; gap: 7px; margin-right: 10px;
  color: #bcc6ce; font-size: 12px;
}
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(215,255,79,.12); }
.status-pill[data-state="pending"] i { background: #f2bc48; box-shadow: 0 0 0 4px rgba(242,188,72,.12); }
.status-pill[data-state="error"] i { background: #ef6666; box-shadow: 0 0 0 4px rgba(239,102,102,.12); }

.button {
  border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 750;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--accent); color: var(--navy); }
.button.primary:hover { background: var(--accent-strong); }
.button.ghost { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.button.dark { color: #fff; background: var(--navy); }
.button.subtle { color: #41505a; background: rgba(255,255,255,.55); border: 1px solid #d5d2cb; }
.button.subtle:hover { background: #fff; }
.button.full { width: 100%; }
.file-button { display: block; text-align: center; cursor: pointer; }
.file-button input { display: none; }

.app-shell { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 260px 1fr; }
.sidebar { padding: 30px 20px; border-right: 1px solid #ddd9d1; background: #eeebe5; }
.sidebar-intro h1 { font-size: 22px; margin: 7px 0 6px; letter-spacing: -.035em; }
.sidebar-intro p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 22px; }
.eyebrow { color: #7c868f; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.project-list { display: grid; gap: 8px; margin-top: 18px; }
.project-list-empty { margin: 0; padding: 12px 8px; color: #7a848b; font-size: 11px; line-height: 1.5; }
.project-row { display: grid; grid-template-columns: minmax(0,1fr) 28px; gap: 4px; align-items: center; }
.project-row .project-item { min-width: 0; }
.project-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: #899198; background: transparent; font-size: 17px; }
.project-remove:hover { color: #fff; background: var(--danger); }
.sidebar-tools { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #d7d3cc; }
.project-item {
  width: 100%; border: 1px solid transparent; border-radius: 12px; padding: 13px;
  display: flex; gap: 10px; align-items: center; text-align: left; background: transparent;
}
.project-item:hover, .project-item.active { background: #fff; border-color: #d7d4ce; box-shadow: 0 6px 20px rgba(20,30,38,.05); }
.project-item .project-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex: 0 0 auto; }
.project-item strong { display: block; max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.project-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.workspace { padding: 30px; min-width: 0; }
.project-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.project-head h2 { margin: 5px 0 4px; font-size: 28px; letter-spacing: -.04em; }
.project-head p { margin: 0; color: var(--muted); font-size: 13px; }
.head-badge { padding: 8px 11px; border-radius: 6px; color: #5b6900; background: #eaff9f; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.field-badge { color: #075d68; background: #c9f6fc; }
.workflow-strip { display: flex; align-items: center; gap: 10px; margin: -3px 0 20px; padding: 12px 16px; border: 1px solid #d9ddd8; border-radius: 13px; background: rgba(255,255,255,.65); }
.workflow-strip > i { flex: 1; height: 1px; background: #cfd5d7; }
.workflow-step { display: flex; align-items: center; gap: 8px; color: #879097; font-size: 11px; font-weight: 800; white-space: nowrap; }
.workflow-step b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e4e7e8; color: #727c83; font-size: 10px; }
.workflow-step.active { color: var(--ink); }
.workflow-step.active b { color: var(--navy); background: var(--accent); }
.workflow-step.done b { color: #fff; background: #3c9b6d; }
.content-grid { display: grid; grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.panel { background: var(--panel); border: 1px solid #dedede; border-radius: 17px; box-shadow: var(--shadow); }
.form-panel { padding: 20px; }
.editor-panel { overflow: hidden; }
.panel-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.panel-heading h3 { margin: 0 0 3px; font-size: 16px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.step { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #eff2f4; color: #52616c; font-weight: 900; font-size: 11px; }
.editor-heading { padding: 20px 20px 0; }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span { color: #4d5861; font-size: 11px; font-weight: 800; }
.field input, .field textarea, .field select, .measure-name input {
  width: 100%; border: 1px solid #d8dce0; border-radius: 9px; padding: 10px 11px;
  color: var(--ink); background: #fbfbfa; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus, .measure-name input:focus { border-color: #8c9a45; box-shadow: 0 0 0 3px rgba(215,255,79,.23); }
.field textarea { resize: vertical; }
.field-row { display: grid; gap: 10px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.measure-source-row { grid-template-columns: 1fr 1.25fr; }
.suffix-input { display: flex; align-items: stretch; }
.suffix-input input { border-radius: 9px 0 0 9px; }
.suffix-input em { display: grid; place-items: center; min-width: 38px; color: #59636c; background: #eef0f1; border: 1px solid #d8dce0; border-left: 0; border-radius: 0 9px 9px 0; font-size: 12px; font-style: normal; font-weight: 800; }
.precision-card { margin: 0 0 14px; padding: 11px 12px; border: 1px solid #dfe3da; border-radius: 11px; background: #f8faf4; }
.precision-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.precision-card span { color: #73806c; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.precision-card strong { color: #5f7600; font-size: 12px; }
.precision-card small { display: block; margin-top: 6px; color: #6d777c; font-size: 9px; line-height: 1.35; }
.precision-meter { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #e1e5de; }
.precision-meter i { display: block; width: 62%; height: 100%; border-radius: inherit; background: #b9df35; transition: width .2s ease, background .2s ease; }
.address-actions { display: flex; justify-content: space-between; margin: -7px 0 15px; }
.text-button { border: 0; padding: 0; color: #587004; background: transparent; font-size: 10px; font-weight: 800; }
.text-button:hover { text-decoration: underline; }
.danger-text { color: #a64444; }
.map-capture-card { margin: 0 0 14px; padding: 13px; border: 1px solid #dfe4d6; border-radius: 12px; background: linear-gradient(145deg,#f9fbf5,#f2f5ee); }
.map-capture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.map-capture-head strong, .map-capture-head small { display: block; }
.map-capture-head strong { color: #303c43; font-size: 11px; }
.map-capture-head small { margin-top: 3px; color: #748078; font-size: 9px; line-height: 1.4; }
.map-capture-head > span { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; color: #68736a; background: #e5e9e1; font-size: 8px; font-weight: 850; }
.map-capture-head > span.ready { color: #166148; background: #d8f3e5; }
.map-capture-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; margin-top: 11px; }
.map-capture-actions .button { min-height: 36px; padding: 8px 9px; font-size: 9px; }
.capture-help { margin: 9px 0 0; color: #78827c; font-size: 8px; line-height: 1.45; }
.map-workspace { margin-top: 11px; overflow: hidden; border: 1px solid #d7ddd2; border-radius: 10px; background: #fff; }
.map-message { min-height: 105px; display: grid; place-items: center; align-content: center; padding: 18px; text-align: center; }
.map-message strong, .map-message span { display: block; }
.map-message strong { font-size: 11px; }.map-message span { max-width: 285px; margin-top: 5px; color: #748078; font-size: 9px; line-height: 1.45; }
.map-canvas-grid { display: grid; grid-template-columns: 1fr 1fr; height: 285px; }
.map-canvas-grid > div { min-width: 0; min-height: 0; }.map-canvas-grid > div + div { border-left: 1px solid #d7ddd2; }
.map-workspace-actions { display: flex; gap: 7px; padding: 9px; border-top: 1px solid #dfe3db; }.map-workspace-actions .button { flex: 1; font-size: 9px; }
.upload-card {
  min-height: 112px; margin: 3px 0 14px; border: 1.5px dashed #bac1c5; border-radius: 12px;
  display: grid; place-items: center; align-content: center; gap: 3px; color: #46525c; background: #f8f8f6;
}
.upload-card:hover { border-color: #8ea927; background: #fbfff0; }
.upload-card input { display: none; }
.upload-card strong { font-size: 12px; }
.upload-card small { color: #7c868f; font-size: 10px; }
.upload-icon { font-size: 24px; line-height: 1; color: #657400; }
.reference-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: -3px 0 14px; }
.reference-thumb { position: relative; min-width: 0; overflow: hidden; border: 2px solid transparent; border-radius: 9px; padding: 0; color: #fff; background: #26333b; aspect-ratio: 1.18; text-align: left; }
.reference-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .72; }
.reference-thumb span { position: absolute; inset: auto 5px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 850; text-shadow: 0 1px 3px #000; }
.reference-thumb.active { border-color: #a9cb2d; box-shadow: 0 0 0 2px rgba(215,255,79,.28); }.reference-thumb.active img { opacity: 1; }
.active-reference-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px 20px 13px; padding: 9px 11px; border: 1px solid #dde2d8; border-radius: 9px; background: #f7f9f3; }
.active-reference-bar span, .active-reference-bar strong { display: block; }.active-reference-bar span { color: #849080; font-size: 7px; font-weight: 900; letter-spacing: .08em; }.active-reference-bar strong { margin-top: 2px; font-size: 10px; }

.toolbar { display: flex; gap: 7px; align-items: center; padding: 0 20px 15px; flex-wrap: wrap; }
.tool { border: 1px solid #d5dade; border-radius: 8px; padding: 8px 10px; color: #44515b; background: #fff; font-size: 11px; font-weight: 800; }
.tool:hover:not(:disabled), .tool.active { color: var(--navy); background: var(--accent); border-color: #bddf42; }
.tool:disabled { opacity: .4; cursor: not-allowed; }
.tool.icon-only { margin-left: auto; width: 34px; height: 34px; padding: 0; font-size: 18px; }
.tool.icon-only + .tool.icon-only { margin-left: 0; }
.tool.danger:hover { color: #fff; border-color: var(--danger); background: var(--danger); }
.measure-name { display: flex; align-items: center; gap: 6px; margin-left: 2px; }
.measure-name span { color: var(--muted); font-size: 10px; font-weight: 800; }
.measure-name input { width: 115px; padding: 8px 9px; font-size: 11px; }
.preset-row { display: flex; align-items: center; gap: 6px; padding: 0 20px 13px; overflow-x: auto; }
.preset-row > span { flex: 0 0 auto; color: #7b858c; font-size: 9px; font-weight: 850; }
.preset-row button { flex: 0 0 auto; border: 1px solid #d9dcde; border-radius: 999px; padding: 5px 8px; color: #59646c; background: #f8f9f8; font-size: 9px; font-weight: 750; }
.preset-row button:hover { color: var(--navy); border-color: #b6d43f; background: #f4ffd2; }

.stage-wrap { position: relative; min-height: 430px; background: #d9dcdd; border-top: 1px solid #d9dddf; border-bottom: 1px solid #d9dddf; overflow: auto; }
.empty-state { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; color: #59646d; padding: 40px; }
.empty-state strong { font-size: 14px; }
.empty-state p { max-width: 360px; margin: 6px 0 0; color: #7a858e; font-size: 11px; line-height: 1.5; }
.empty-graphic { width: 120px; height: 70px; margin-bottom: 18px; position: relative; border: 2px solid #9ca5ab; border-radius: 8px; }
.empty-graphic::before, .empty-graphic::after { content: ""; position: absolute; bottom: 12px; width: 32px; height: 32px; border-left: 2px solid #9ca5ab; border-top: 2px solid #9ca5ab; transform: rotate(45deg); }
.empty-graphic::before { left: 22px; }.empty-graphic::after { right: 19px; width: 22px; height: 22px; }
.empty-graphic span { display: none; }
.image-stage { position: relative; width: 100%; line-height: 0; background: #1d242a; cursor: crosshair; }
.image-stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.image-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.legend { display: flex; gap: 18px; padding: 12px 20px; color: #68727a; font-size: 10px; font-weight: 750; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend .confirmed { background: var(--accent); }.legend .calculated { background: var(--cyan); }.legend .pending { background: #b9bec2; }

.measurement-summary { margin-top: 18px; padding: 20px; }
.compact-heading { margin-bottom: 13px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.summary-empty { grid-column: 1 / -1; padding: 22px; color: #7a848d; background: #f6f7f7; border-radius: 10px; text-align: center; font-size: 12px; }
.reference-consistency { margin-top: 12px; padding: 12px 13px; border: 1px solid #dbe2d4; border-radius: 10px; color: #51605a; background: #f7faf4; font-size: 10px; line-height: 1.5; }
.reference-consistency strong { display: block; margin-bottom: 3px; color: #2f3c3a; font-size: 11px; }.reference-consistency.warning { color: #7a4a1d; border-color: #eed0a2; background: #fff7e9; }.reference-consistency.warning strong { color: #8d451f; }
.measurement-card { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid #e0e3e5; border-radius: 11px; }
.measure-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #2d3b44; background: #eaf8fa; font-size: 10px; font-weight: 900; }
.measurement-card strong, .measurement-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.measurement-card strong { font-size: 11px; }.measurement-card small { color: #7a858e; font-size: 9px; margin-top: 2px; }
.measure-value { font-size: 15px; white-space: nowrap; }
.measure-actions { display: flex; gap: 3px; }
.measure-actions button { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #65717a; background: #f0f2f2; font-weight: 900; }
.measure-actions button:hover { color: #fff; background: var(--navy); }
.measure-actions .measure-delete:hover { background: var(--danger); }
.measurement-card.adjusted { border-color: #c4d776; background: #fbfff1; }
.measurement-card.adjusted .measure-index { color: #405700; background: #e9ff9f; }
.measurement-editor-modal { width: min(760px,calc(100vw - 32px)); max-height: min(760px,calc(100vh - 32px)); overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 24px 80px rgba(12,21,28,.28); }
.measurement-editor-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #e1e4e5; }
.measurement-editor-modal > header h2 { margin: 4px 0 0; font-size: 22px; }
.measurement-editor-modal > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #5c676e; background: #eef0f1; font-size: 22px; }
.measurement-editor-modal form { padding: 20px 22px 22px; }
.measurement-adjust-preview { margin: 2px 0 16px; padding: 12px 14px; border: 1px solid #cddd8f; border-radius: 10px; color: #405700; background: #f6ffda; font-size: 11px; font-weight: 800; line-height: 1.5; }
.measurement-editor-actions { display: flex; gap: 8px; justify-content: flex-end; }

.technical-note { display: flex; gap: 12px; margin-top: 13px; padding: 11px 13px; border-left: 3px solid #e0a92e; color: #685723; background: #fff9e9; font-size: 10px; }
.field-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.field-main { min-width: 0; display: grid; gap: 18px; }
.field-section { min-width: 0; padding: 20px; }
.photo-checklist { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.photo-task { position: relative; min-height: 145px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 12px; border: 1.5px dashed #bcc4c8; border-radius: 12px; color: #46525c; background: #f7f8f6; cursor: pointer; }
.photo-task:hover { border-color: #91ab2d; background: #fbfff0; }
.photo-task input { display: none; }
.photo-task .photo-number { position: absolute; top: 10px; left: 10px; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #40505a; background: rgba(255,255,255,.9); font-size: 9px; font-weight: 900; }
.photo-task strong, .photo-task small { position: relative; z-index: 2; }
.photo-task strong { font-size: 11px; }
.photo-task small { color: #7b858c; font-size: 9px; }
.photo-task img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.photo-task.done { border-style: solid; border-color: #3c9b6d; color: #fff; }
.photo-task.done::after { content: "FOTO REGISTRADA ✓"; position: absolute; inset: auto 0 0; z-index: 2; padding: 30px 10px 8px; background: linear-gradient(transparent,rgba(12,25,31,.88)); font-size: 8px; font-weight: 900; text-align: right; letter-spacing: .05em; }
.photo-task.done img { opacity: 1; }
.photo-task.done strong, .photo-task.done small { opacity: 0; }
.photo-task.marker-task { border-color: #8fb3bb; background: #f1fbfd; }
.photo-calibration-controls { display: grid; grid-template-columns: minmax(145px,1fr) minmax(180px,1.15fr) minmax(130px,.75fr) minmax(150px,1fr); gap: 10px; align-items: end; }
.known-calibration-fields, .manual-photo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; grid-column: span 2; }
.known-calibration-fields .field, .manual-photo-fields .field { margin-bottom: 0; }
.calibration-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.photo-measure-hint { margin: 4px 0 10px; padding: 10px 12px; border-radius: 9px; color: #5b6670; background: #f0f2f2; font-size: 10px; font-weight: 750; }
.photo-measure-hint.active { color: #405700; background: #efffc2; }
.photo-measure-stage { position: relative; overflow: hidden; border-radius: 12px; line-height: 0; background: #1c252c; cursor: crosshair; }
.photo-measure-stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.photo-measure-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plane-warning { margin-top: 9px; padding-left: 10px; border-left: 3px solid #e0a92e; color: #6d5a29; font-size: 9px; line-height: 1.45; }
.total-measures { margin-bottom: 3px; }
.measure-quick-add { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 6px; margin: 2px 0 14px; overflow-x: auto; }
.measure-quick-add span { flex: 0 0 auto; color: #6f7a81; font-size: 10px; font-weight: 850; }
.measure-quick-add button { flex: 0 0 auto; border: 1px solid #d6dbdd; border-radius: 999px; padding: 6px 9px; color: #55616a; background: #fff; font-size: 9px; font-weight: 800; }
.measure-quick-add button:hover { color: var(--navy); border-color: #b6d43f; background: #f4ffd2; }
.field-measure-table { margin-bottom: 12px; border: 1px solid #dde1e3; border-radius: 11px; overflow: hidden; }
.field-measure-head, .field-measure-row { display: grid; grid-template-columns: minmax(150px,1.5fr) 105px 100px 100px 78px 34px; gap: 8px; align-items: center; padding: 8px 10px; }
.field-measure-head { color: #7c868d; background: #f0f2f2; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.field-measure-row { border-top: 1px solid #e5e8e9; }
.field-measure-row input, .field-measure-row select { width: 100%; min-width: 0; border: 1px solid #d9dddf; border-radius: 7px; padding: 8px; background: #fff; font-size: 10px; }
.field-measure-row.suspect { background: #fff5e7; }
.field-measure-row.suspect input { border-color: #e1a340; }
.field-measure-remove { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #879097; background: #f0f2f2; font-weight: 900; }
.field-measure-remove:hover { color: #fff; background: var(--danger); }
.measure-entry-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.measure-evidence { position: relative; min-height: 32px; overflow: hidden; display: grid; place-items: center; border: 1px dashed #bcc4c8; border-radius: 7px; color: #65717a; background: #f7f8f8; font-size: 8px; font-weight: 850; cursor: pointer; }
.measure-evidence input { display: none; }
.measure-evidence img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.measure-evidence.has-photo img { display: block; }
.measure-evidence.has-photo::after { content: "FOTO ✓"; position: absolute; inset: auto 0 0; padding: 12px 3px 3px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.8)); text-align: center; }
.field-review { position: sticky; top: 18px; }
.review-card { padding: 20px; }
.review-card h3 { margin: 14px 0 4px; font-size: 17px; }
.review-card > p { margin: 0 0 15px; color: #6f7980; font-size: 10px; line-height: 1.5; }
.review-card .button + .button { margin-top: 8px; }
.review-score { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 11px; background: #f1f3f3; }
.review-score b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #87929a; font-size: 16px; }
.review-score span { color: #59656d; font-size: 11px; font-weight: 850; }
.review-score.good b { background: #3c9b6d; }
.review-score.warning b { background: #db9d2f; }
.review-score.danger b { background: #d94b4b; }
.field-alerts { display: grid; gap: 7px; margin-bottom: 14px; }
.review-empty { padding: 14px; border-radius: 9px; color: #7c858b; background: #f6f7f7; font-size: 10px; text-align: center; line-height: 1.45; }
.field-alert { padding: 10px 11px; border-left: 3px solid #e0a134; border-radius: 7px; color: #6d5624; background: #fff7e8; font-size: 9px; line-height: 1.45; }
.field-alert strong { display: block; margin-bottom: 2px; font-size: 10px; }
.field-alert.good { border-color: #3c9b6d; color: #2e684b; background: #edf9f2; }
.field-alert.danger { border-color: #d94b4b; color: #7d3232; background: #fff0f0; }
.field-report { margin-top: 18px; padding: 22px; }
.report-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid #dfe2e3; }
.report-header h3 { margin: 5px 0 3px; font-size: 23px; }
.report-header p { margin: 0; color: #6d777e; font-size: 11px; }
.report-status { padding: 7px 9px; border-radius: 6px; color: #6d5624; background: #fff0bf; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.report-status.good { color: #236146; background: #d8f5e5; }
.report-status.danger { color: #843333; background: #ffe0e0; }
.report-photo-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.report-photo { aspect-ratio: 4/3; overflow: hidden; position: relative; border-radius: 8px; background: #edf0f1; }
.report-photo img { width: 100%; height: 100%; object-fit: cover; }
.report-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.report-photo span { position: absolute; inset: auto 0 0; padding: 16px 7px 6px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.75)); font-size: 8px; font-weight: 800; }
.report-measures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.report-measure { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #e0e3e5; border-radius: 9px; }
.report-measure div strong, .report-measure div small { display: block; }
.report-measure div strong { font-size: 10px; }
.report-measure div small { margin-top: 2px; color: #7a858c; font-size: 8px; }
.report-measure > b { white-space: nowrap; font-size: 14px; }
.report-measure.suspect { border-color: #e5aa45; background: #fff8ec; }
.report-measure.suspect::before { content: "!"; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #db9d2f; font-size: 10px; font-weight: 900; }
.report-measure-thumb { width: 38px; height: 38px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; }
.report-alerts { display: grid; gap: 7px; margin-top: 12px; }
.kit-grid { display: grid; grid-template-columns: minmax(360px,.95fr) minmax(0,1.05fr); gap: 18px; align-items: start; }
.marker-panel { padding: 20px; }
.marker-config { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.marker-preview { max-width: 460px; margin: 6px auto 14px; padding: 10px; background: #e7e8e8; border-radius: 14px; }
.marker-preview svg { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 10px 30px rgba(18,24,32,.12); }
.marker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.marker-download-note { margin: 9px 2px 14px; color: #738087; font-size: 8px; line-height: 1.45; text-align: center; }
.kit-guide { display: grid; gap: 18px; }
.procedure-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: procedure; }
.procedure-list li { position: relative; padding: 11px 12px 11px 44px; border: 1px solid #e0e3e4; border-radius: 10px; counter-increment: procedure; }
.procedure-list li::before { content: counter(procedure); position: absolute; left: 11px; top: 10px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--accent); font-size: 9px; font-weight: 900; }
.procedure-list b, .procedure-list span { display: block; }
.procedure-list b { font-size: 11px; }.procedure-list span { margin-top: 2px; color: #6c777f; font-size: 9px; line-height: 1.45; }
.exit-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exit-checklist label { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #dfe2e3; border-radius: 9px; color: #56626a; font-size: 10px; font-weight: 750; }
.exit-checklist input { accent-color: #8db32b; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 330px; padding: 12px 15px; border-radius: 10px; color: #fff; background: #17232d; box-shadow: 0 16px 40px rgba(18,25,31,.22); font-size: 12px; font-weight: 750; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(10,18,24,.72); backdrop-filter: blur(7px); }
.account-modal { width: min(1080px,100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 18px; background: #f7f5f0; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.account-modal > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; border-bottom: 1px solid #dde0dc; background: rgba(247,245,240,.96); backdrop-filter: blur(10px); }
.account-modal > header h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.035em; }
.account-modal > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #58636b; background: #e7e8e5; font-size: 22px; }
.account-summary { display: flex; align-items: center; gap: 12px; margin: 22px 26px 0; padding: 16px; border-radius: 13px; color: #fff; background: #182532; }
.account-avatar { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #182532; background: #d7ff4f; font-size: 12px; font-weight: 950; }
.account-summary > div:nth-child(2) { min-width: 0; flex: 1; }
.account-summary strong, .account-summary span { display: block; }
.account-summary strong { font-size: 13px; }.account-summary span { margin-top: 3px; color: #b8c3ca; font-size: 10px; }
.account-summary .plan-badge { flex: 0 0 auto; margin: 0; padding: 7px 9px; border-radius: 999px; color: #233019; background: #d7ff4f; font-size: 9px; font-weight: 900; }
.forced-password { display: flex; align-items: center; gap: 10px; margin: 14px 26px 0; padding: 12px 14px; border-left: 4px solid #e2a139; border-radius: 8px; color: #6c5525; background: #fff4dc; }
.forced-password strong, .forced-password span { display: block; }.forced-password strong { font-size: 11px; }.forced-password span { font-size: 10px; }
.account-section { margin: 16px 26px 0; padding: 19px; border: 1px solid #dddfdc; border-radius: 13px; background: #fff; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.section-title h3 { margin: 0; font-size: 15px; }.section-title p { margin: 3px 0 0; color: #758087; font-size: 10px; }
.admin-grid { display: grid; gap: 10px; }.admin-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.account-section > .button { margin-top: 10px; }
.form-feedback { min-height: 15px; margin-top: 8px; color: #6f7a81; font-size: 10px; }
.form-feedback[data-state="error"] { color: #b13e3e; }.form-feedback[data-state="success"] { color: #2f7b56; }
.admin-table { overflow: hidden; margin-bottom: 14px; border: 1px solid #e0e3e1; border-radius: 10px; }
.admin-row { display: grid; grid-template-columns: minmax(0,1fr) 130px 70px 58px; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid #eaebe9; }
.admin-row:first-child { border-top: 0; }
.admin-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
.admin-person > i { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #34434c; background: #eef1ec; font-size: 8px; font-style: normal; font-weight: 950; }
.admin-person span { min-width: 0; }.admin-person strong, .admin-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-person strong { font-size: 10px; }.admin-person small { margin-top: 2px; color: #7c868c; font-size: 8px; }
.admin-row > b { color: #56636b; font-size: 9px; }.admin-row > em { justify-self: end; padding: 4px 6px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; }.admin-row > em.active { color: #286847; background: #e3f6eb; }.admin-row > em.inactive { color: #893b3b; background: #ffe9e9; }
.edit-user-button { border: 1px solid #d9ddda; border-radius: 7px; padding: 6px 7px; color: #43515a; background: #f6f7f5; font-size: 8px; font-weight: 900; }
.edit-user-button:hover:not(:disabled) { color: #182532; border-color: #b6d43f; background: #efffc2; }.edit-user-button:disabled { opacity: .4; cursor: not-allowed; }
.admin-empty { padding: 17px; color: #7b858b; font-size: 10px; text-align: center; }.admin-empty.error { color: #a73f3f; }
.user-editor { margin: 0 0 16px; padding: 16px; border: 1px solid #bed46a; border-radius: 12px; background: #fbfff0; box-shadow: 0 10px 28px rgba(36,55,42,.07); }
.user-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.user-editor-head h4 { margin: 4px 0 0; font-size: 16px; }.user-editor-head > button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: #5d686f; background: #e9ede2; font-size: 18px; }
.user-edit-grid { grid-template-columns: 1fr 1.15fr 150px minmax(180px,.8fr); align-items: end; }
.active-switch { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #d8ddd3; border-radius: 9px; background: #fff; cursor: pointer; }
.active-switch input { width: 17px; height: 17px; accent-color: #6f8d00; }.active-switch b, .active-switch small { display: block; }.active-switch b { font-size: 10px; }.active-switch small { margin-top: 2px; color: #78827f; font-size: 8px; line-height: 1.35; }
.user-editor-actions { display: flex; gap: 8px; margin-top: 12px; }
.password-reset-box { display: grid; grid-template-columns: minmax(220px,1fr) minmax(190px,.7fr) auto; gap: 12px; align-items: end; margin-top: 15px; padding-top: 14px; border-top: 1px solid #dfe5d6; }
.password-reset-box > div strong, .password-reset-box > div span { display: block; }.password-reset-box > div strong { font-size: 11px; }.password-reset-box > div span { margin-top: 3px; color: #738078; font-size: 9px; line-height: 1.4; }.password-reset-box .field { margin: 0; }
.inline-create { display: grid; grid-template-columns: 1fr 1.15fr 140px 1fr auto; gap: 9px; align-items: end; padding-top: 14px; border-top: 1px solid #e4e6e3; }
.inline-create .field { margin: 0; }.inline-create .button { min-height: 37px; }
.company-create { grid-template-columns: 1.2fr 1fr 120px 1fr 1.15fr 1fr; }.company-create .button { grid-column: -2 / -1; }
.company-edit-grid { grid-template-columns: 1.3fr 1fr 150px 150px; align-items: end; }
.company-row { grid-template-columns: minmax(0,1fr) 120px 75px 58px; }
.audit-row { display: grid; grid-template-columns: minmax(170px,.9fr) minmax(220px,1.4fr) 150px; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid #eaebe9; }
.audit-row:first-child { border-top: 0; }.audit-row strong,.audit-row span,.audit-row time { font-size: 9px; }.audit-row span { color: #66727a; }.audit-row time { color: #879097; text-align: right; }
.account-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 26px 24px; color: #788289; font-size: 9px; }

.help-modal { width: min(1040px,100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 18px; background: #f7f5f0; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.help-modal > header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; border-bottom: 1px solid #dde0dc; background: rgba(247,245,240,.96); backdrop-filter: blur(10px); }
.help-modal > header h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.035em; }
.help-modal > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #58636b; background: #e7e8e5; font-size: 22px; }
.help-search { padding: 18px 26px 8px; }
.help-search input { width: 100%; min-height: 46px; border: 1px solid #d8dcda; border-radius: 12px; padding: 0 15px; color: #182532; background: #fff; font: inherit; font-size: 12px; box-shadow: 0 7px 24px rgba(30,42,52,.04); }
.help-search input:focus { outline: 2px solid rgba(160,196,37,.35); border-color: #8fac27; }
.help-tabs { display: flex; gap: 7px; padding: 10px 26px 0; overflow-x: auto; }
.help-tabs button { flex: 0 0 auto; border: 1px solid #d8ddda; border-radius: 999px; padding: 8px 12px; color: #56636b; background: #fff; font-size: 9px; font-weight: 900; }
.help-tabs button.active { color: #182532; border-color: #b3d442; background: #efffc2; }
.help-tabs button span { display: inline-grid; min-width: 17px; height: 17px; place-items: center; margin-left: 4px; border-radius: 50%; color: #fff; background: #182532; font-size: 7px; }
.help-content { padding: 18px 26px 26px; }
.help-pane { min-height: 340px; }
.help-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border-radius: 15px; color: #fff; background: #182532; }
.help-intro span { color: #d7ff4f; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.help-intro h3 { margin: 6px 0 4px; font-size: 20px; letter-spacing: -.03em; }.help-intro p { margin: 0; color: #bac5cc; font-size: 10px; }
.help-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.help-guide-grid details { border: 1px solid #dde1de; border-radius: 12px; padding: 0 14px; background: #fff; }
.help-guide-grid summary { padding: 14px 20px 14px 0; color: #263640; font-size: 11px; font-weight: 900; cursor: pointer; }
.help-guide-grid p { margin: -2px 0 14px; color: #68747b; font-size: 10px; line-height: 1.55; }
.help-no-results { padding: 22px; color: #7c878d; text-align: center; font-size: 10px; }
.help-production-badge { padding: 6px 8px; border-radius: 999px; color: #516614; background: #efffc2; font-size: 8px; font-weight: 950; }
.video-lesson-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.video-lesson-grid article { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 14px; border: 1px solid #dfe2df; border-radius: 12px; background: #fff; }
.video-lesson-grid article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #182532; background: #d7ff4f; font-size: 9px; font-weight: 950; }
.video-lesson-grid strong,.video-lesson-grid small { display: block; }.video-lesson-grid strong { font-size: 11px; }.video-lesson-grid small { margin-top: 3px; color: #778288; font-size: 9px; }.video-lesson-grid em { color: #839096; font-size: 8px; font-style: normal; font-weight: 850; }
.help-pane .technical-note { margin-top: 14px; }
.support-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 20px; align-items: start; }
.support-layout h3 { margin: 7px 0; font-size: 22px; letter-spacing: -.03em; }.support-layout > div > p { margin: 0; color: #6f7b82; font-size: 10px; line-height: 1.55; }
.support-layout form { padding: 18px; border: 1px solid #dde1de; border-radius: 14px; background: #fff; }
.support-expectation { margin-top: 16px; padding: 13px; border-left: 4px solid #d7ff4f; border-radius: 8px; background: #edf1e9; }.support-expectation strong,.support-expectation span { display: block; }.support-expectation strong { font-size: 10px; }.support-expectation span { margin-top: 3px; color: #68756d; font-size: 9px; line-height: 1.45; }
.consent-line { display: flex; align-items: center; gap: 8px; color: #66737a; font-size: 9px; }.consent-line input { accent-color: #7f9e17; }
.support-ticket-list { display: grid; gap: 10px; }
.support-ticket { padding: 15px; border: 1px solid #dde1de; border-radius: 12px; background: #fff; }
.support-ticket.urgent { border-color: #e3a3a3; }.support-ticket.high { border-color: #e6cc8a; }
.support-ticket > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.support-ticket h4 { margin: 4px 0 0; font-size: 12px; }.support-ticket time { color: #879197; font-size: 8px; }
.support-ticket-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.support-ticket-meta span { padding: 4px 6px; border-radius: 999px; color: #54616a; background: #edf0ee; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.support-ticket p { margin: 10px 0 0; color: #606d74; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.support-ticket .support-ticket-context { padding: 8px 10px; border-radius: 7px; color: #78838a; background: #f3f5f4; font-size: 8px; word-break: break-word; }
.support-ticket-response { margin-top: 12px; padding: 11px; border-left: 3px solid #86a817; border-radius: 7px; background: #f1f8dd; }.support-ticket-response strong,.support-ticket-response span { display: block; }.support-ticket-response strong { font-size: 9px; }.support-ticket-response span { margin-top: 3px; color: #5e6b56; font-size: 9px; line-height: 1.45; white-space: pre-wrap; }
.support-admin-controls { display: grid; grid-template-columns: 180px 1fr auto; gap: 8px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eaedea; }.support-admin-controls .field { margin: 0; }.support-admin-controls textarea { min-height: 58px; }

@media (max-width: 1050px) {
  .auth-gate { grid-template-columns: 1fr 430px; }
  .auth-visual { padding: 42px; }
  .inline-create, .company-create { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .user-edit-grid, .company-edit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.password-reset-box { grid-template-columns: 1fr 1fr; }.password-reset-box > div { grid-column: 1 / -1; }
  .inline-create .button, .company-create .button { grid-column: auto; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content-grid { grid-template-columns: 1fr; }
  .form-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .form-panel .panel-heading, .form-panel .upload-card, .form-panel .button.full, .form-panel > .field:last-of-type, .address-actions, .map-capture-card, .reference-gallery { grid-column: 1 / -1; }
  .precision-card { align-self: end; }
  .field-layout { grid-template-columns: 1fr; }
  .field-review { position: static; }
  .kit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .auth-gate { display: grid; grid-template-columns: 1fr; overflow: auto; }
  .auth-visual { display: none; }
  .auth-card { width: calc(100% - 28px); margin: 28px 0; padding: 28px 22px; }
  .auth-mobile-brand { display: flex; margin-bottom: 30px; }
  .topbar { height: auto; min-height: 68px; padding: 14px 16px; }
  .brand span, .status-pill, .button.ghost, .offline-pill { display: none; }
  .topbar { flex-wrap: wrap; }
  .mode-switch { order: 3; width: 100%; }
  .mode-switch button { flex: 1; font-size: 9px; }
  .account-button b { display: none; }.account-button { padding-right: 4px; }
  .top-actions .button { padding: 9px 11px; font-size: 11px; }
  .workspace { padding: 18px 12px; }
  .project-head { align-items: flex-start; gap: 12px; }
  .head-badge { display: none; }
  .project-head h2 { font-size: 23px; }
  .form-panel { display: block; }
  .map-capture-actions, .map-canvas-grid { grid-template-columns: 1fr; }
  .map-canvas-grid { height: 460px; }.map-canvas-grid > div + div { border-left: 0; border-top: 1px solid #d7ddd2; }
  .reference-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .field-row.two, .field-row.three, .measure-source-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .stage-wrap, .empty-state { min-height: 300px; }
  .measure-name { order: 3; width: 100%; }
  .measure-name input { flex: 1; }
  .workflow-strip { gap: 6px; padding: 10px; }
  .workflow-strip > i { display: none; }
  .workflow-step { flex: 1; gap: 5px; white-space: normal; font-size: 9px; }
  .measurement-card { grid-template-columns: 28px minmax(0,1fr) auto; }
  .measure-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .photo-checklist { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-calibration-controls { grid-template-columns: 1fr; }
  .known-calibration-fields, .manual-photo-fields { grid-column: 1; grid-template-columns: 1fr; }
  .measurement-adjust-grid { grid-template-columns: 1fr; }
  .measurement-editor-actions { flex-direction: column; }
  .calibration-actions { grid-column: 1; }
  .field-measure-head { display: none; }
  .field-measure-row { grid-template-columns: 1fr 90px; }
  .field-measure-row input:first-child { grid-column: 1 / -1; }
  .field-measure-row .field-measure-remove { grid-column: 2; justify-self: end; }
  .measure-evidence { min-height: 38px; }
  .report-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-measures { grid-template-columns: 1fr; }
  #fieldModeView > .workflow-strip { overflow-x: auto; }
  .marker-config, .marker-actions, .exit-checklist { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; align-items: stretch; }
  .account-modal { max-height: 100vh; border-radius: 0; }
  .help-modal { max-height: 100vh; border-radius: 0; }
  .help-modal > header { padding: 18px 16px; }
  .help-search,.help-tabs,.help-content { padding-left: 14px; padding-right: 14px; }
  .help-guide-grid,.video-lesson-grid,.support-layout { grid-template-columns: 1fr; }
  .help-intro { align-items: flex-start; flex-direction: column; }
  .support-admin-controls { grid-template-columns: 1fr; }
  .button.ghost.help-button { display: inline-flex; }
  .account-modal > header, .account-summary, .account-section, .forced-password { margin-left: 14px; margin-right: 14px; }
  .account-modal > header { margin: 0; padding: 18px 16px; }
  .admin-grid.three, .inline-create, .company-create, .company-edit-grid { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: minmax(0,1fr) auto; }.admin-row > em { grid-column: 2; }.admin-row > b { grid-column: 2; grid-row: 1; align-self: start; }.edit-user-button { grid-column: 2; }
  .audit-row { grid-template-columns: 1fr; }.audit-row time { text-align: left; }
  .user-edit-grid, .password-reset-box { grid-template-columns: 1fr; }.password-reset-box > div { grid-column: auto; }
}

@media print {
  :root { background: #fff; }
  body { background: #fff; }
  .no-print, .topbar, .sidebar { display: none !important; }
  .app-shell { display: block; }
  .workspace { padding: 0; }
  .project-head { padding-bottom: 10px; border-bottom: 1px solid #bbb; }
  .head-badge { display: block; }
  .content-grid { display: block; }
  .editor-panel, .measurement-summary { border: 0; box-shadow: none; }
  .stage-wrap { min-height: 0; overflow: visible; border: 0; }
  .image-stage { background: #fff; }
  .legend { padding-left: 0; }
  .measurement-summary { margin-top: 10px; padding: 0; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .field-layout { display: block; }
  .field-review, #fieldModeView > .workflow-strip { display: none !important; }
  #kitModeView .kit-guide { display: none; }
  .marker-actions { display: none; }
  .field-report { margin: 0; padding: 0; border: 0; box-shadow: none; }
  .report-photo-grid { grid-template-columns: repeat(3,1fr); }
  @page { size: A4 landscape; margin: 12mm; }
}


.lead-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -3px 0 12px; color: #68757d; }
.lead-summary span { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.lead-summary b { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; color: #0d2633; background: #d9f43b; font-size: 11px; }
.lead-summary small { font-size: 9px; }
.leads-table { overflow: visible; border: 0; display: grid; gap: 10px; }
.lead-row { overflow: hidden; border: 1px solid #dfe3df; border-left: 4px solid #99a3a8; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(13,38,51,.045); }
.lead-row.lead-new { border-left-color: #d9f43b; }
.lead-row.lead-contacted { border-left-color: #3d8fa8; }
.lead-row.lead-won { border-left-color: #35a66f; }
.lead-row.lead-lost { border-left-color: #c6c9ca; opacity: .76; }
.lead-row > header { display: flex; justify-content: space-between; gap: 14px; align-items: start; padding: 12px 14px 7px; }
.lead-row > header div { display: grid; gap: 2px; }
.lead-row > header strong { color: #102b39; font-size: 11px; }
.lead-row > header span,.lead-row > header time { color: #77838a; font-size: 8px; }
.lead-contact { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 0 14px 8px; }
.lead-contact b,.lead-contact a { color: #4f6069; font-size: 9px; }
.lead-contact a:hover { color: #0d2633; }
.lead-row > p { margin: 0 14px 10px; padding: 9px 11px; border-radius: 8px; color: #526169; background: #f5f7f4; font-size: 9px; line-height: 1.5; }
.lead-row > footer { display: flex; align-items: end; justify-content: flex-end; gap: 8px; padding: 9px 14px; border-top: 1px solid #edf0ed; background: #fafbf9; }
.lead-row > footer label { display: grid; gap: 4px; }
.lead-row > footer label span { color: #6f7b82; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.lead-row > footer select { min-width: 135px; height: 31px; padding: 0 26px 0 9px; border: 1px solid #d9dedb; border-radius: 8px; color: #213944; background: #fff; font: inherit; font-size: 9px; }
.lead-row > footer .button { height: 31px; margin: 0; padding: 0 11px; font-size: 8px; }
@media (max-width: 620px) {
  .lead-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .lead-row > header { flex-direction: column; gap: 5px; }
  .lead-row > footer { align-items: stretch; flex-direction: column; }
  .lead-row > footer select,.lead-row > footer .button { width: 100%; }
}