:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bg: #0e0e10;
  --surface: #17171a;
  --surface-2: #202024;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #3b82f6;
  --radius: 12px;
  --tap: 48px;
  --gap: 12px;
  --compact: 8px;
  --lens: 176px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, system-ui, "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  min-height: var(--tap);
  padding: 0 16px;
  transition: transform 120ms var(--ease-out);
}
button:active { transform: scale(0.97); }

.screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.title { font-size: 20px; margin: 4px 0; }
.hint { color: var(--muted); margin: 0; line-height: 1.5; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid button { min-height: 64px; font-size: 17px; }

.file {
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  color: var(--text);
}

.canvas-box { background: #000; border-radius: var(--radius); overflow: hidden; }
.photo-canvas { display: block; width: 100%; touch-action: none; }
.toolbar, .corner-selectors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--compact); }
.corner-selectors button[aria-pressed="true"] { outline: 2px solid #e4596b; outline-offset: -2px; }
.calibration-status { margin: 0; color: #f8ca6b; line-height: 1.5; }
.precision-panel { display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: var(--gap); background: var(--surface); }
.precision-lens { width: var(--lens); height: var(--lens); flex: none; touch-action: none; border: 1px solid var(--muted); border-radius: var(--compact); }
.precision-controls { min-width: 0; display: flex; flex-direction: column; gap: var(--compact); }
.precision-controls .hint { font-size: 12px; white-space: pre-line; }
.nudge-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--compact); }
.nudge-grid button { padding: 0 var(--compact); }
.direction-label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--compact); }
select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--muted); border-radius: var(--compact); min-height: var(--tap); padding: var(--compact); max-width: 100%; }
.confirm-label { display: flex; align-items: flex-start; gap: var(--compact); line-height: 1.5; padding: var(--compact) 0; cursor: pointer; }
.confirm-label input { flex: none; margin-top: 5px; width: 20px; height: 20px; accent-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button:focus-visible,select:focus-visible,input:focus-visible { outline: 2px solid #f8ca6b; outline-offset: 2px; }
@media(max-width:380px) { .precision-panel { flex-direction: column; } .precision-controls { width:100%; } }

.bar { display: flex; gap: 10px; }
.bar button { flex: 1; min-width: 0; }
.bar .primary { background: var(--accent); color: #fff; }

.results { display: flex; flex-direction: column; gap: 8px; }
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  padding: 14px 16px;
  border-radius: var(--radius);
  min-width: 0;
  white-space: nowrap;
}
.result-row strong { font-size: 18px; }

@media (hover: hover) and (pointer: fine) {
  button:hover { filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.size-setup, .size-review { display:flex; flex-direction:column; gap:var(--gap); }
.size-setup label, .size-field label { display:flex; flex-direction:column; gap:var(--compact); min-width:0; }
.size-setup input, .size-field input, .size-review textarea { font:inherit; color:var(--text); background:var(--surface-2); border:1px solid var(--muted); border-radius:var(--compact); min-height:var(--tap); padding:var(--compact); width:100%; }
.size-card { background:var(--surface); border-radius:var(--radius); padding:16px; }
.size-card h3 { margin:0 0 var(--gap); }
.size-field { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--compact); margin-bottom:var(--gap); }
.size-field small { grid-column:1/-1; }
.size-warning { border-left:3px solid #f8ca6b; padding:var(--gap); background:var(--surface); margin-bottom:var(--gap); }
.size-warning p { margin:0 0 var(--compact); }

.camera-panel { display:flex; flex-direction:column; gap:var(--gap); }
.camera-stage { position:relative; width:100%; aspect-ratio:3/4; max-height:68vh; min-height:300px; background:#07090c; border:4px solid #727982; border-radius:20px; overflow:hidden; }
.camera-stage.is-level { border-color:#48e597; box-shadow:0 0 0 2px #48e59740; }
.camera-video, .camera-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.camera-overlay { pointer-events:none; }
.camera-chips { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:10px; align-items:start; }
.camera-chips label { background:#10131ce8; border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:3px; font-size:11px; color:#b7c2d2; min-width:0; }
.camera-chips label:first-child { flex:1; }
.camera-chips select { background-color:transparent; color:#fff; border:0; min-height:36px; padding:0 22px 0 0; font-size:16px; width:100%; }
.camera-chips option { background:#17171a; }
.camera-empty { position:absolute; top:48%; left:12%; right:12%; text-align:center; color:#a1a1aa; line-height:1.6; }
.camera-empty[hidden] { display:none; }
.level-reticle { position:absolute; bottom:54px; left:calc(50% - 33px); width:66px; height:66px; border:1px solid #ffffff70; border-radius:50%; background:#07090c80; }
.level-reticle::before, .level-reticle::after { content:''; position:absolute; background:#ffffff50; }
.level-reticle::before { left:32px; top:6px; height:52px; width:1px; }
.level-reticle::after { left:6px; top:32px; width:52px; height:1px; }
.level-bubble { position:absolute; left:24px; top:24px; width:16px; height:16px; border:2px solid #fff; border-radius:50%; background:#8f99a9; opacity:.3; }
.has-sensor .level-bubble { opacity:1; background:#ffd26a; }
.is-level .level-bubble { background:#48e597; }
.camera-level-text { position:absolute; bottom:12px; left:12px; right:12px; padding:7px; border-radius:8px; text-align:center; background:#07090cd9; font-size:13px; line-height:1.4; }
.is-level .camera-level-text { color:#6ff1ad; }
.camera-statuses { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; }
.camera-statuses span { padding:8px 10px; border-radius:8px; background:var(--surface-2); color:var(--muted); }
.camera-statuses .detected { color:#f0f5ff; }
.camera-shutter { background:#f1f4f8; color:#0c1119; font-weight:700; min-height:54px; }
.camera-help { font-size:12px; }
@media(min-width:700px) { .camera-stage { aspect-ratio:4/3; } }
.quick-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.quick-values label { min-width:0; font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.quick-values input { width:100%; min-height:48px; font:700 20px system-ui; color:var(--text); background:var(--surface); border:1px solid var(--muted); border-radius:8px; padding:8px; }
.quick-groups { display:flex; flex-wrap:wrap; gap:8px; }
.quick-groups button[aria-pressed=true] { outline:2px solid #f8ca6b; outline-offset:-2px; }
.precision-panel[hidden] { display:none; }
.quick-edit { padding:12px; background:var(--surface); border-radius:12px; }
.quick-edit summary { cursor:pointer; min-height:32px; line-height:32px; }
.quick-edit[open] > div { margin-top:10px; }
.quick-values label { justify-content:flex-end; }