:root {
  color-scheme: light;
  --ink: var(--lv-navy);
  --muted: var(--lv-muted);
  --line: var(--lv-line);
  --panel: var(--lv-paper);
  --accent: #e51f29;
  --accent-soft: #fff0f1;
  --new: #138b62;
  --new-soft: #e9f7f2;
  --blue: var(--lv-link);
  --sidebar-width: 292px;
  --topbar-height: 70px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--lv-workspace); color: var(--ink); }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.is-hidden { display: none !important; }
.app-shell { width: 100%; height: 100%; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }

.sidebar { position: relative; z-index: 30; min-width: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); box-shadow: 12px 0 40px rgba(18,24,28,.05); }
.brand { min-height: var(--topbar-height); padding: 14px 17px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 40px; height: 40px; border-radius: 11px; display: grid; align-content: center; gap: 4px; padding: 10px 8px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand-mark span { height: 2px; border-radius: 2px; background: #fff; }
.brand-mark span:nth-child(1) { width: 22px; }
.brand-mark span:nth-child(2) { width: 17px; background: #ef3a41; }
.brand-mark span:nth-child(3) { width: 12px; background: #69d4b1; }
.eyebrow { font-size: .625rem; letter-spacing: .14em; font-weight: 800; color: var(--lv-muted); }
.brand-title { margin-top: 1px; font-size: 1.18rem; line-height: 1.05; font-weight: 780; letter-spacing: -.025em; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 11px; display: grid; place-items: center; background: transparent; color: #272d32; cursor: pointer; }
.icon-button:hover { background: var(--lv-paper); }
.icon-button svg, .peek-button svg, .fit-button svg, .primary-button svg, .install-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-close { display: none; margin-left: auto; }

.nav-content { padding: 10px 11px 18px; overflow: auto; overscroll-behavior: contain; }
.nav-section { padding: 9px 0 13px; }
.nav-section > h2, .section-heading h2 { margin: 0 7px 8px; font-size: .69rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.local-chip, .confidence-chip { margin: -3px 6px 5px 0; padding: 4px 7px; border-radius: 999px; color: #5f696f; background: #eef1f2; font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.confidence-chip { color: #157653; background: #e8f6f0; }
.project-card { min-height: 56px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 10px; background: var(--lv-paper); }
.project-card > span:last-child { min-width: 0; }
.project-card strong, .project-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card strong { font-size: .84rem; }
.project-card small { margin-top: 3px; color: var(--lv-muted); font-size: .69rem; }
.project-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--ink); font-size: .67rem; font-weight: 850; letter-spacing: .04em; }
.primary-button, .secondary-button { width: 100%; min-height: 40px; margin-top: 7px; border: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-size: .77rem; font-weight: 750; }
.primary-button { color: #fff; background: var(--ink); }
.primary-button:hover { background: #292e32; }
.secondary-button { border: 1px solid var(--line); color: #333b40; background: #fff; }
#updateAppButton[hidden] { display: none; }

.state-switch, .sheet-list { display: grid; gap: 4px; }
.state-option, .sheet-option { width: 100%; min-height: 56px; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; text-align: left; color: #252a2e; background: transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.state-option:hover, .sheet-option:hover { background: var(--lv-paper); }
.state-option.is-active { background: var(--lv-paper); border-color: var(--lv-line); }
.state-option strong, .sheet-option strong { display: block; font-size: .78rem; line-height: 1.25; }
.state-option small, .sheet-option small { display: block; margin-top: 2px; color: var(--lv-muted); font-size: .67rem; line-height: 1.25; }
.state-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 4px currentColor; }
.state-dot.demolition { color: rgba(229,31,41,.13); background: var(--accent); }
.state-dot.new { color: rgba(19,139,98,.13); background: var(--new); }
.overlay-glyph { width: 17px; height: 17px; position: relative; border: 2px solid var(--accent); border-radius: 4px; }
.overlay-glyph::after { content: ""; position: absolute; inset: 3px -5px -5px 3px; border: 2px solid var(--new); border-radius: 4px; background: rgba(19,139,98,.08); }
.sheet-option { min-height: 51px; }
.sheet-option.is-active { color: #fff; background: var(--ink); }
.sheet-option.is-active small { color: #bdc3c7; }
.sheet-index { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; color: #4a5156; background: #ebedef; font-size: .69rem; font-weight: 850; }
.sheet-option.is-active .sheet-index { color: #fff; background: rgba(255,255,255,.12); }

.alignment-card { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--lv-paper); }
.alignment-status { display: flex; align-items: center; gap: 10px; }
.alignment-status > span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--new); box-shadow: 0 0 0 4px rgba(19,139,98,.12); }
.alignment-status strong, .alignment-status small { display: block; }
.alignment-status strong { font-size: .75rem; }
.alignment-status small { margin-top: 2px; color: var(--lv-muted); font-size: .65rem; line-height: 1.25; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.compact-button { min-height: 34px; border: 1px solid var(--lv-line); border-radius: 9px; color: #343b40; background: #fff; cursor: pointer; font-size: .7rem; font-weight: 750; }
.compact-button:hover { border-color: #b9c0c4; background: var(--lv-paper); }
.sidebar-footer { margin-top: auto; padding: 12px 11px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.privacy-note { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; background: #f3f8f6; }
.privacy-note svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--new); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note strong, .privacy-note small { display: block; }
.privacy-note strong { font-size: .68rem; }
.privacy-note small { margin-top: 2px; color: var(--lv-muted); font-size: .61rem; }

.workspace { min-width: 0; display: grid; grid-template-rows: var(--topbar-height) 1fr; }
.topbar { z-index: 10; display: flex; align-items: center; gap: 11px; padding: 0 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.menu-button { display: none; }
.title-block { min-width: 0; }
.topbar-title, .topbar-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title { font-size: .91rem; font-weight: 780; letter-spacing: -.012em; }
.topbar-subtitle { margin-top: 3px; color: var(--lv-muted); font-size: .7rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.peek-button, .install-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--lv-line); border-radius: 10px; display: flex; align-items: center; gap: 8px; color: #30363a; background: #fff; font-size: .73rem; font-weight: 700; cursor: pointer; }
.peek-button:hover, .peek-button.is-peeking { color: #fff; border-color: var(--ink); background: var(--ink); }
.install-button { color: #fff; border-color: var(--new); background: var(--new); }

.viewer { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: grab; background-color: var(--lv-line); background-image: radial-gradient(circle at 1px 1px, rgba(50,59,64,.12) 1px, transparent 0); background-size: 22px 22px; }
.viewer.is-dragging { cursor: grabbing; }
.canvas-stack, .plan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-canvas { opacity: 0; pointer-events: none; will-change: opacity; transition: opacity .11s ease; }
.plan-canvas.is-visible { opacity: 1; }
.loading-card { position: absolute; inset: 50% auto auto 50%; z-index: 12; transform: translate(-50%,-50%); min-width: 270px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.95); box-shadow: 0 18px 50px rgba(32,39,43,.16); backdrop-filter: blur(14px); transition: opacity .2s, visibility .2s; }
.loading-card.is-hidden { opacity: 0; visibility: hidden; }
.loading-card strong, .loading-card small { display: block; }
.loading-card strong { font-size: .78rem; }
.loading-card small { margin-top: 3px; color: var(--lv-muted); font-size: .67rem; }
.spinner { width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--lv-line); border-top-color: var(--accent); animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-badge { position: absolute; top: 14px; left: 14px; z-index: 7; padding: 9px 11px; border: 1px solid rgba(255,255,255,.82); border-radius: 10px; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.91); box-shadow: 0 8px 22px rgba(22,28,31,.11); backdrop-filter: blur(12px); font-size: .65rem; letter-spacing: .07em; font-weight: 850; }
.state-badge .state-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px currentColor; }
.quality-pill { position: absolute; top: 14px; right: 14px; z-index: 7; padding: 7px 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; display: flex; align-items: center; gap: 7px; color: var(--lv-muted); background: rgba(255,255,255,.87); box-shadow: 0 7px 18px rgba(22,28,31,.08); backdrop-filter: blur(10px); font-size: .62rem; }
.quality-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--new); }
.quality-pill.is-rendering span { background: #e8a52a; animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; } }
.overlay-control { position: absolute; z-index: 9; left: 50%; top: 14px; transform: translateX(-50%); min-width: 290px; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 11px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(22,28,31,.13); backdrop-filter: blur(14px); font-size: .66rem; font-weight: 750; }
.overlay-control input { flex: 1; accent-color: var(--new); }
.zoom-toolbar { position: absolute; z-index: 9; left: 50%; bottom: calc(15px + env(safe-area-inset-bottom)); transform: translateX(-50%); height: 46px; padding: 4px; border: 1px solid rgba(255,255,255,.85); border-radius: 13px; display: flex; align-items: center; background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(22,28,31,.17); backdrop-filter: blur(14px); }
.zoom-toolbar button { height: 36px; min-width: 38px; padding: 0 10px; border: 0; border-radius: 9px; color: #242a2e; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.zoom-toolbar button:hover { background: var(--lv-paper); }
.zoom-toolbar .zoom-label { min-width: 68px; font-size: .7rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.toolbar-divider { width: 1px; height: 24px; margin: 0 3px; background: var(--lv-line); }
.zoom-toolbar .fit-button { padding: 0; display: grid; place-items: center; }
.fit-button svg { width: 18px; height: 18px; }
.scrim { display: none; }

.modal { width: min(720px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: transparent; box-shadow: 0 28px 90px rgba(10,15,18,.3); }
.modal::backdrop { background: rgba(12,16,18,.58); backdrop-filter: blur(5px); }
.modal-card { margin: 0; padding: 22px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; overflow: auto; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-header h2 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: -.035em; }
.modal-kicker { color: var(--lv-muted); font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.modal-lead { margin: 13px 0 18px; color: var(--lv-muted); font-size: .86rem; line-height: 1.5; }
.upload-grid, .page-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upload-card { position: relative; min-height: 90px; padding: 15px; border: 1px dashed #cfd5d8; border-radius: 13px; display: flex; align-items: center; gap: 12px; background: var(--lv-paper); cursor: pointer; }
.upload-card:hover { border-color: #9ca6ac; }
.upload-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-number { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--accent); font-size: .75rem; font-weight: 850; }
.upload-card .upload-number { background: var(--ink); }
.password-field { position: relative; width: 100%; }
.password-field input { width: 100%; padding-right: 54px !important; box-sizing: border-box; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.password-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed=true] .eye-slash { display: block; }
.password-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.layer-stack { z-index: 3; pointer-events: none; }
.plan-canvas[hidden] { display: none !important; }
.sheet-option.has-layer-controls { grid-template-columns: auto 1fr auto; }
.layer-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.layer-controls input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--ink); cursor: pointer; }
.layer-controls input[type=range] { width: 58px; accent-color: var(--ink); }
.upload-card strong, .upload-card small { display: block; }
.upload-card strong { font-size: .8rem; }
.upload-card small { max-width: 190px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lv-muted); font-size: .68rem; }
.page-select-grid { margin-top: 12px; }
.page-select-grid label, .project-name-field { display: grid; gap: 6px; color: var(--lv-muted); font-size: .7rem; font-weight: 700; }
.page-select-grid select, .project-name-field input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--lv-line); border-radius: 10px; color: var(--ink); background: #fff; font-size: .78rem; }
.project-name-field { margin-top: 12px; }
.modal-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.modal-footer > span { color: var(--lv-muted); font-size: .68rem; line-height: 1.35; }
.primary-action { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; color: #fff; background: var(--ink); cursor: pointer; font-size: .76rem; font-weight: 780; }
.primary-action:disabled { cursor: not-allowed; opacity: .4; }

.calibration-modal { width: min(1100px, calc(100vw - 24px)); }
.calibration-card { height: min(820px, calc(100dvh - 24px)); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; }
.calibration-instruction { margin: 14px 0 12px; padding: 11px 13px; border-radius: 10px; color: #344047; background: #edf3f7; font-size: .78rem; }
.calibration-instruction b { margin-right: 7px; color: var(--blue); }
.calibration-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calibration-grid section { min-width: 0; min-height: 0; display: grid; grid-template-rows: 39px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--lv-workspace); }
.calibration-grid header { padding: 0 13px; display: flex; align-items: center; gap: 9px; background: #fff; font-size: .72rem; font-weight: 750; }
.calibration-grid header .state-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px currentColor; }
.calibration-canvas-wrap { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: auto; }
.calibration-canvas-wrap canvas { max-width: 100%; max-height: 100%; background: #fff; cursor: crosshair; box-shadow: 0 8px 25px rgba(20,26,29,.12); }
.calibration-footer { padding-top: 12px; display: flex; align-items: center; gap: 14px; color: var(--lv-muted); font-size: .68rem; }
.calibration-footer .secondary-button { width: auto; min-width: 110px; margin: 0; padding: 0 12px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); max-width: min(460px, calc(100vw - 30px)); padding: 11px 14px; border-radius: 11px; color: #fff; background: rgba(21,25,29,.94); box-shadow: 0 14px 38px rgba(10,15,18,.28); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; font-size: .75rem; line-height: 1.35; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }

@media (max-width: 820px) {
  :root { --topbar-height: 62px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(88vw, 320px); transform: translateX(-105%); transition: transform .23s cubic-bezier(.2,.8,.2,1); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close, .menu-button { display: grid; }
  .scrim { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; border: 0; display: block; background: rgba(16,20,22,.46); opacity: 0; visibility: hidden; transition: opacity .23s, visibility .23s; }
  body.sidebar-open .scrim { opacity: 1; visibility: visible; }
  .workspace { height: 100%; }
  .topbar { padding: 0 10px 0 7px; gap: 7px; }
  .topbar-title { font-size: .8rem; }
  .topbar-subtitle { font-size: .65rem; }
  .peek-button span, .install-button span { display: none; }
  .peek-button, .install-button { width: 40px; padding: 0; justify-content: center; }
  .state-badge, .quality-pill { top: 10px; }
  .state-badge { left: 10px; }
  .quality-pill { right: 10px; }
  .overlay-control { top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); min-width: min(320px, calc(100vw - 24px)); }
  .zoom-toolbar { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .calibration-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .calibration-card { padding: 16px; }
}

@media (max-width: 560px) {
  .modal { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); }
  .modal-card { padding: 17px; }
  .upload-grid, .page-select-grid { grid-template-columns: 1fr; }
  .upload-card { min-height: 73px; }
  .modal-footer { align-items: stretch; flex-direction: column; }
  .primary-action { width: 100%; }
  .quality-pill { display: none; }
  .zoom-toolbar { left: auto; right: 10px; transform: none; }
  .zoom-toolbar .zoom-label { min-width: 56px; }
  .calibration-footer span { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Readable controls for use on site, including native safe areas. */
:root { --sidebar-width: 308px; }
.app-shell { height: 100dvh; }
.workspace { grid-template-rows: calc(var(--topbar-height) + env(safe-area-inset-top)) minmax(0, 1fr); }
.topbar { padding-top: env(safe-area-inset-top); padding-right: max(12px, env(safe-area-inset-right)); }
.brand { min-height: calc(var(--topbar-height) + env(safe-area-inset-top)); padding-top: calc(14px + env(safe-area-inset-top)); }
.eyebrow, .local-chip, .confidence-chip, .privacy-note small, .footer-links, .quality-pill { font-size: .75rem; }
.nav-section > h2, .section-heading h2, .project-card small, .state-option small, .sheet-option small, .alignment-status small, .topbar-subtitle, .modal-footer > span, .modal-kicker, .calibration-footer { font-size: .8125rem; }
.project-card strong, .state-option strong, .sheet-option strong, .alignment-status strong, .primary-button, .secondary-button, .compact-button, .privacy-note strong, .peek-button, .install-button, .state-badge, .overlay-control, .zoom-toolbar .zoom-label, .page-select-grid label, .project-name-field, .page-select-grid select, .project-name-field input, .primary-action, .upload-card strong, .upload-card small, .calibration-instruction, .calibration-grid header, .toast { font-size: .875rem; }
.primary-button, .secondary-button, .compact-button, .icon-button, .peek-button, .install-button, .primary-action { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--lv-link); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: wait; }
.storage-status { margin: 8px 5px 0; font-size: .8125rem; color: var(--lv-muted); line-height: 1.35; }
.storage-status[data-state="error"] { color: #b31822; }
.footer-links { margin: 9px 5px 0; display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--lv-muted); }
.footer-links a { color: var(--lv-link); }
.mobile-state-switch { display: none; }
.calibration-grid section { position: relative; grid-template-rows: 42px minmax(0, 1fr) 44px; }
.calibration-canvas-wrap { position: relative; display: block; overflow: hidden; touch-action: none; }
.calibration-canvas-wrap canvas { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; }
.calibration-tools { display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff; border-top: 1px solid var(--line); }
.calibration-tools button { min-height: 40px; min-width: 48px; border: 0; background: #fff; border-radius: 8px; font-size: 14px; }
@media (max-width: 820px) {
  .topbar-title { font-size: .875rem; }
  .topbar-subtitle { font-size: .8125rem; }
  .peek-button, .install-button { width: 44px; }
  .mobile-state-switch { position: absolute; left: 10px; top: 10px; z-index: 10; display: flex; padding: 4px; gap: 3px; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 5px 20px #15191d20; }
  .mobile-state-switch button { border: 0; min-height: 42px; padding: 0 11px; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 700; }
  .mobile-state-switch button.is-active { background: #15191d; color: #fff; }
  .state-badge { display: none; }
  .quality-pill { top: 72px; }
  .zoom-toolbar { height: 52px; }
  .zoom-toolbar button { min-height: 44px; min-width: 44px; }
  .overlay-control { bottom: calc(73px + env(safe-area-inset-bottom)); }
  .sidebar { width: min(92vw, 340px); padding-left: env(safe-area-inset-left); }
  .calibration-instruction { margin: 8px 0; line-height: 1.35; }
  .calibration-card { grid-template-rows: auto auto minmax(0, 1fr) auto; }
}
@media (max-width: 560px) {
  .calibration-footer span { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar { gap: 4px; }
  .topbar-title { max-width: 43vw; }
  .modal-card { max-height: calc(100dvh - 18px); }
  .calibration-card { height: calc(100dvh - 18px); padding: 12px; }
  .calibration-grid header { font-size: 14px; }
  .calibration-tools button { min-height: 40px; }
}

/* Precision workflow: one full-height plan, explicit point confirmation. */
.calibration-modal { width: min(1280px, calc(100vw - 24px)); max-height: none; }
.calibration-card { height: min(960px, calc(100dvh - 24px)); max-height: none; padding: 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 8px; }
.precision-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.precision-header h2 { margin: 0; font-size: 20px; }
#calibrationInstruction { margin-top: 5px; font-size: 14px; font-weight: 700; color: var(--lv-link); }
.precision-help { font-size: 14px; line-height: 1.35; color: var(--lv-muted); }
.precision-stage { min-width: 0; min-height: 0; position: relative; overflow: hidden; touch-action: none; background: var(--lv-workspace); border: 1px solid var(--lv-line); border-radius: 10px; cursor: grab; }
.precision-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.precision-crosshair { position: absolute; z-index: 4; width: 48px; height: 48px; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white); }
.precision-crosshair i, .precision-crosshair b { position: absolute; display: block; background: var(--lv-link); }
.precision-crosshair i { width: 48px; height: 1px; left: 0; top: 23.5px; }
.precision-crosshair b { height: 48px; width: 1px; top: 0; left: 23.5px; }
.precision-quality { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 5px 8px; color: var(--lv-muted); background: #ffffffed; border-radius: 6px; pointer-events: none; }
.precision-toolbar { display: flex; align-items: center; gap: 4px; }
.precision-toolbar button { min-width: 44px; min-height: 44px; border: 1px solid var(--lv-line); border-radius: 8px; background: #fff; font-size: 16px; }
#precisionFit { font-size: 14px; padding: 0 10px; }
#precisionZoom { margin: 0 5px; font-size: 13px; font-variant-numeric: tabular-nums; }
.precision-nudge { margin-left: auto; display: flex; gap: 3px; }
.precision-footer { display: grid; grid-template-columns: auto auto minmax(130px, 1fr); gap: 7px; }
.precision-footer .secondary-button { margin: 0; width: auto; padding: 0 10px; }
.precision-footer .primary-action { width: 100%; font-size: 15px; }
@media (max-width: 820px) {
  .calibration-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; inset: 0; border-radius: 0; }
  .calibration-card { height: 100dvh; width: 100%; max-height: none; border-radius: 0; padding: calc(env(safe-area-inset-top) + 10px) max(10px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 10px) max(10px, env(safe-area-inset-left)); gap: 7px; }
  .precision-toolbar { flex-wrap: wrap; }
  .precision-nudge button { min-width: 38px; min-height: 44px; }
  .precision-header h2 { font-size: 19px; }
  .precision-footer { grid-template-columns: auto auto minmax(120px, 1fr); }
}
@media (max-height: 480px) and (max-width: 820px) {
  .precision-header h2 { font-size: 16px; }
  .precision-help { display: none; }
  .calibration-card { grid-template-rows: auto minmax(0, 1fr) auto auto; }
}

/* Named comparisons remain within the existing phone-first plan workspace. */
.plan-picker { display: block; max-width: 100%; width: min(48vw, 480px); min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-weight: 750; font-size: 16px; text-overflow: ellipsis; padding: 3px 22px 3px 0; }
.sheet-option > span:last-child { min-width: 0; }
.sheet-option strong, .sheet-option small { overflow-wrap: anywhere; }
#addPlanButton { width: 100%; min-height: 44px; margin-top: 10px; }
.overlay-control > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#calibrationInstruction { overflow-wrap: anywhere; }
@media (max-width: 820px) { .plan-picker { width: 43vw; font-size: 14px; } .overlay-control > span { max-width: 85px; } }

/* Release identity and accessible controls. */

.brand-logo { width:46px; height:46px; border-radius:12px; flex:none; }



.state-option strong,.sheet-option strong { font-size:14px; }
.state-option small,.sheet-option small { font-size:13px; }
.nav-section > h2,.section-heading h2 { font-size:12px; }
.primary-button,.secondary-button { font-size:14px; }
.footer-links { font-size:13px; }
#guideButton { border:1px solid var(--lv-line); font-weight:750; flex:none; }
.guide-card { max-width:620px; }
.guide-tip,.account-note { padding:20px; border-radius:10px; background:#edf5fa; color:#254962; font-size:15px; line-height:1.55; }
.account-note { margin:20px 0; }.account-note p { margin:8px 0 0; }
.guide-full { display:block; margin-top:22px; color:var(--lv-link); font-size:14px; }
.data-actions { display:grid; gap:8px; }.data-actions button { margin:0; }
.data-note { font-size:14px; }.danger-button { color:#aa2535; }
@media(max-width:560px){.topbar-title{max-width:35vw}.plan-picker{width:35vw}.guide-card .modal-lead{font-size:16px}.modal{max-height:calc(100dvh - 24px)}#dataDialog .modal-card{padding-top:24px}.sidebar-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}

.cloud-card{max-width:680px}.cloud-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.cloud-controls button{width:auto;margin:0}.cloud-list{display:grid;gap:10px;max-height:45dvh;overflow:auto}.cloud-project{display:grid;grid-template-columns:1fr auto;gap:10px;padding:15px;border:1px solid var(--line);border-radius:10px}.cloud-project strong{font-size:16px;overflow-wrap:anywhere}.cloud-project small{display:block;color:var(--lv-muted);font-size:13px}.cloud-project-actions{display:flex;align-items:center;gap:6px}.cloud-project-actions button{min-height:44px;padding:7px 12px}#cloudStatus[data-state="conflict"],#cloudStatus[data-state="offline"],#cloudStatus[data-state="limit"]{color:#9b5424}#cloudStatus[data-state="saved"]{color:#17735e}@media(max-width:560px){.cloud-project{grid-template-columns:1fr}.cloud-project-actions{justify-content:flex-end}}

/* LayerVista: navy actions with white labels, light neutral surfaces. */
:root{--brand:var(--lv-primary);--brand-soft:var(--lv-primary-soft)}
.brand{background:var(--lv-white);color:var(--ink);gap:12px;border-bottom:3px solid var(--brand)}
.brand-logo{border-radius:12px}.brand-title{font-size:1.3rem;letter-spacing:-.035em}
.brand .eyebrow{color:var(--muted);font-size:.75rem;letter-spacing:.1em}.brand .icon-button{color:var(--ink)}
.nav-content{background:var(--lv-white)}.nav-section{padding-top:12px;padding-bottom:16px}
.nav-section > h2,.section-heading h2{font-size:.8125rem;color:var(--muted);letter-spacing:.075em}
.project-card,.alignment-card{background:var(--panel);border-radius:var(--lv-radius)}
.project-icon{border-radius:9px;background:var(--brand);color:var(--lv-white)}
.primary-button,.primary-action,.install-button{background:var(--brand);color:var(--lv-white);border-color:var(--brand);border-radius:var(--lv-radius)}
.primary-button:hover:not(:disabled),.primary-action:hover:not(:disabled),.install-button:hover:not(:disabled){background:var(--lv-primary-hover);border-color:var(--lv-primary-hover);color:var(--lv-white)}
.secondary-button,.compact-button,.peek-button,.precision-toolbar button{border-radius:var(--lv-radius);color:var(--ink);border-color:var(--line)}
.secondary-button:hover:not(:disabled),.compact-button:hover:not(:disabled),.precision-toolbar button:hover:not(:disabled),.icon-button:hover{background:var(--brand-soft);border-color:var(--brand)}
.secondary-button.danger-button,.danger-button{color:#aa2535}
.state-option,.sheet-option{border-radius:var(--lv-radius);color:var(--ink)}
.state-option:hover,.sheet-option:hover{background:var(--panel)}
.state-option.is-active{background:var(--brand-soft);border-color:var(--brand)}
.sheet-option.is-active{background:var(--ink);color:var(--lv-white)}
.sheet-option.is-active small{color:var(--lv-on-navy)}
.sheet-option.is-active .sheet-index{background:var(--brand);color:var(--lv-white)}
.state-option small,.sheet-option small{font-size:.8125rem}.state-option small,.alignment-status small,.project-card small{color:var(--muted)}
.sheet-option.is-active small{color:var(--lv-on-navy)}
.sidebar-footer{background:var(--panel)}.privacy-note{background:var(--brand-soft);border-radius:var(--lv-radius)}
.privacy-note svg{stroke:var(--ink)}.privacy-note small{color:var(--muted)}
.topbar{background:var(--lv-white)}.peek-button:hover,.peek-button.is-peeking{background:var(--ink);border-color:var(--ink);color:var(--lv-white)}
.plan-picker{border-radius:9px}.viewer{background-color:var(--lv-workspace);background-image:radial-gradient(circle at 1px 1px,rgba(7,31,65,.09) 1px,transparent 0)}
.spinner{border-color:var(--lv-line);border-top-color:var(--lv-focus)}
.guide-tip,.account-note,.calibration-instruction{background:var(--brand-soft);color:var(--ink)}
.guide-full,.footer-links a{color:var(--lv-link);text-underline-offset:3px}.modal-lead{font-size:1rem}.modal-kicker{color:var(--muted)}
.overlay-control input{accent-color:var(--lv-focus)}.loading-card strong{font-size:.875rem}.loading-card small{font-size:.8125rem}.storage-status{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--lv-focus)}
.mobile-state-switch button{color:var(--ink)}.mobile-state-switch button.is-active{background:var(--brand);color:var(--lv-white)}
#calibrationInstruction{color:var(--ink)}.precision-crosshair i,.precision-crosshair b{background:var(--ink)}
.precision-stage{background:var(--lv-workspace);border-color:var(--line)}
.calibration-tools button{color:var(--ink)}.calibration-tools button:hover{background:var(--brand-soft)}
.toast{background:var(--ink);color:var(--lv-white)}
@media(max-width:820px){.brand-title{font-size:1.3rem}.icon-button,.primary-button,.secondary-button,.compact-button,.primary-action{min-height:48px}.topbar .icon-button{min-height:44px}.precision-footer .secondary-button,.precision-footer .primary-action{min-height:44px}}

/* The entire sidebar scrolls, including the footer, at every viewport height. */
.app-shell { grid-template-rows: minmax(0, 1fr); }
.sidebar { min-height: 0; height: 100%; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.sidebar > * { flex-shrink: 0; }
.sidebar .nav-content { flex: 0 0 auto; overflow: visible; }
.workspace { min-height: 0; }
.sidebar { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid white; border-radius: 8px; }

/* Single plan list; the drawing fills the whole workspace. */
.workspace { grid-template-rows: minmax(0, 1fr); }
.sidebar-utilities { display: grid; gap: 6px; margin: 10px 0; }
.sidebar-utilities .secondary-button { margin: 0; }
.project-section h2 { overflow-wrap: anywhere; }
.viewer > .menu-button { position: absolute; z-index: 15; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); width: 44px; height: 44px; border: 1px solid var(--line); background: white; border-radius: 12px; box-shadow: 0 4px 16px #071f411a; touch-action: manipulation; }
@media(max-width:900px){.quality-pill{top:calc(10px + env(safe-area-inset-top))}}

/* Project/account controls live behind the brand menu, leaving room for plans. */
.brand { gap: 8px; padding-left: 12px; padding-right: 12px; }
.brand .brand-logo { width: 38px; height: 38px; }
.brand-title { white-space: nowrap; }
.app-menu-button { margin-left: auto; flex: none; }
.brand .sidebar-close { margin-left: 0; flex: none; }
.app-menu { width: min(420px, calc(100vw - 28px)); }
.app-menu-actions { display: grid; gap: 10px; }
.app-menu-actions button { width: 100%; justify-content: flex-start; text-align: left; min-height: 44px; }
.app-menu-actions [hidden] { display: none; }
.menu-project-name { font-weight: 650; overflow-wrap: anywhere; }
.menu-more { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.menu-more summary { cursor: pointer; padding: 8px 0; }
.menu-more .app-menu-actions { margin-top: 12px; }

/* Keep the selected plan visible beside the mobile menu. */
.state-badge { max-width: calc(100% - 28px); pointer-events: none; }
.state-badge .state-dot { flex: none; }
#stateBadgeLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) {
  .state-badge { display: flex; top: calc(10px + env(safe-area-inset-top)); left: calc(64px + env(safe-area-inset-left)); min-height: 44px; max-width: calc(100% - 74px - env(safe-area-inset-left) - env(safe-area-inset-right)); box-sizing: border-box; font-size: .75rem; }
}

.zoom-toolbar .plan-step { display: none; }
@media (pointer: coarse), (max-width: 1024px) {
  .zoom-toolbar .plan-step { display: grid; place-items: center; }
  .zoom-toolbar { left: calc(10px + env(safe-area-inset-left)); right: auto; transform: none; }
  .zoom-toolbar button { min-width: 40px; padding-left: 7px; padding-right: 7px; }
  .zoom-toolbar .zoom-label { min-width: 52px; }
}