:root {
  --bg: #fbfcfc; --surface: #eef3f3; --line: #d9e2e2; --fg: #141a1a; --muted: #5d6b6b;
  --accent: #007d70; --accent-fg: #ffffff; --error: #b4322a;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1414; --surface: #182121; --line: #273333; --fg: #e8eeee; --muted: #98a8a8;
    --accent: #00d1b2; --accent-fg: #062320; --error: #f08077; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); }
button, input, label { font: inherit; }

.step {
  max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
  padding: calc(48px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 0; }
.sub { color: var(--muted); margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
input[type=password], input[type=number] {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); font-size: 1rem;
}
.primary, .secondary, .link {
  display: block; text-align: center; padding: 15px 18px; border-radius: 14px; border: 0;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
}
.primary { background: var(--accent); color: var(--accent-fg); }
.secondary { background: var(--surface); color: var(--fg); }
.link { background: none; color: var(--accent); font-weight: 500; padding: 8px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
button:focus-visible, .file-btn:focus-within, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.error { color: var(--error); margin: 0; }

.guide { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 12px; line-height: 1.45; }
.guide b { font-weight: 600; }

.progress { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
#build-bar { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Viewer */
.viewer { position: fixed; inset: 0; }
#scene { width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; left: 0; right: 0; display: flex; gap: 8px; align-items: center;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.hud.top { top: 0; padding-top: calc(12px + env(safe-area-inset-top)); justify-content: space-between; }
.hud.bottom { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: center; flex-wrap: wrap; }
.pill, .tool {
  border: 0; border-radius: 999px; padding: 10px 14px; font-size: .92rem; font-weight: 600;
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.tool[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); }
.stats { font-weight: 500; font-variant-numeric: tabular-nums; font-size: .82rem; text-align: right; }
.hint { position: absolute; left: 50%; transform: translateX(-50%); top: calc(68px + env(safe-area-inset-top));
  margin: 0; padding: 8px 14px; border-radius: 10px; font-size: .9rem; max-width: 90vw; text-align: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); }
dialog { border: 0; border-radius: 16px; padding: 20px; background: var(--bg); color: var(--fg); width: min(340px, 90vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog p { margin: 0 0 4px; font-weight: 600; }