*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #09090e;
  --surf:     #111118;
  --surf2:    #18181f;
  --border:   #1d1d2b;
  --accent:   #00d4ff;
  --ok:       #22c55e;
  --warn:     #f59e0b;
  --error:    #ef4444;
  --text:     #e2e8f0;
  --muted:    #4a5568;
  --muted2:   #718096;
}

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── Loader ──────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center; justify-content: center;
  gap: 1.75rem;
  transition: opacity 0.55s ease;
}
#loader.fade { opacity: 0; pointer-events: none; }

#loader-ring {
  width: 52px; height: 52px; flex-shrink: 0;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#loader-text h2 {
  font-size: 1.9rem; font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#loader-msg { font-size: 0.82rem; color: var(--muted2); margin-top: 0.3rem; }

/* ── App shell ───────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; }

/* ── Header ──────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surf);
  flex-shrink: 0;
}

#brand { display: flex; align-items: baseline; gap: 0.25rem; }
.b3   { font-size: 1.25rem; font-weight: 900; color: var(--accent); }
.bd   { font-size: 1.25rem; font-weight: 700; }

#mode-pill {
  display: flex; align-items: center; gap: 0.38rem;
  padding: 0.26rem 0.75rem;
  border-radius: 999px; border: 1.5px solid;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em;
  transition: color 0.25s, border-color 0.25s;
}
.mode-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#mode-pill.grab { color: var(--accent); border-color: var(--accent); }
#mode-pill.draw { color: var(--ok);    border-color: var(--ok); }

#status-bar {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.76rem; color: var(--muted2);
  margin-left: auto;
}
#status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); transition: background 0.3s, box-shadow 0.3s;
}
#status-dot.ok    { background: var(--ok);    box-shadow: 0 0 7px var(--ok); }
#status-dot.warn  { background: var(--warn);  box-shadow: 0 0 7px var(--warn); }
#status-dot.error { background: var(--error); box-shadow: 0 0 7px var(--error); }

#guide-btn, #settings-btn {
  background: var(--surf2); border: 1px solid var(--border);
  color: var(--muted2); width: 27px; height: 27px;
  border-radius: 50%; cursor: pointer;
  font-size: 0.75rem; font-weight: 700;
  transition: color 0.2s, border-color 0.2s;
}
#guide-btn:hover, #guide-btn.active,
#settings-btn:hover, #settings-btn.active { color: var(--accent); border-color: var(--accent); }

/* ── Main / scene ────────────────────────────────────── */
main {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}

#scene-wrapper {
  position: relative;
  width: 100%; max-width: 980px;
}

#scene {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: #000;
  transform: scaleX(-1);
  box-shadow: 0 0 60px rgba(0,212,255,0.04), 0 20px 60px rgba(0,0,0,0.5);
}

video { width: 100%; height: 100%; display: block; object-fit: cover; }

#canvas-2d {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

#canvas-3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 14px; pointer-events: none; z-index: 4;
}

/* ── Badge ───────────────────────────────────────────── */
#pinch-badge {
  position: absolute; top: 0.85rem; left: 50%;
  transform: translateX(-50%) scale(0.82);
  padding: 0.36rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  box-shadow: 0 0 18px rgba(255,107,53,0.5);
  color: #fff; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.1s, transform 0.1s;
  z-index: 10;
}
#pinch-badge.active { opacity: 1; transform: translateX(-50%) scale(1); }
#pinch-badge.snap   { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 0 22px rgba(168,85,247,.65); }
#pinch-badge.draw   { background: linear-gradient(135deg,#166534,#22c55e); box-shadow:0 0 22px rgba(34,197,94,.5); }
#pinch-badge.undo   { background: linear-gradient(135deg,#1a3a5c,#00d4ff); box-shadow:0 0 22px rgba(0,212,255,.5); }

/* ── Stroke counter ──────────────────────────────────── */
#stroke-counter {
  position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 10;
  background: rgba(9,9,14,0.72); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.22rem 0.55rem; font-size: 0.66rem; color: var(--muted2);
  transition: color 0.2s;
}

/* ── Delete zone ─────────────────────────────────────── */
#trash-zone {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10;
  background: rgba(9,9,14,0.72); backdrop-filter: blur(8px);
  border: 1px dashed var(--muted); border-radius: 8px;
  padding: 0.32rem 0.7rem; font-size: 0.66rem; color: var(--muted2);
  pointer-events: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#trash-zone.hover {
  background: rgba(239,68,68,0.15); border-color: var(--error);
  color: var(--error); border-style: solid;
  box-shadow: 0 0 14px rgba(239,68,68,0.35);
}

/* ── Guide + Settings panels ─────────────────────────── */
#guide-panel, #settings-panel {
  position: fixed; top: 56px; right: 1rem; z-index: 50;
  background: rgba(17,17,24,0.96); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.1rem; min-width: 290px;
  transform: translateY(0); opacity: 1;
  transition: opacity 0.2s, transform 0.2s;
}
#guide-panel.hidden, #settings-panel.hidden {
  opacity: 0; pointer-events: none; transform: translateY(-6px);
}
#guide-panel h3, #settings-panel h3 {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 0.7rem;
}
#guide-panel table, #settings-panel table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
#guide-panel tr, #settings-panel tr { border-bottom: 1px solid var(--border); }
#guide-panel tr:last-child, #settings-panel tr:last-child { border-bottom: none; }
#guide-panel td, #settings-panel td { padding: 0.38rem 0; }
#guide-panel td:first-child { color: var(--accent); font-weight: 600; padding-right: 1rem; white-space: nowrap; }
#settings-panel td:first-child { color: var(--muted2); padding-right: 0.8rem; white-space: nowrap; }
#settings-panel select {
  background: var(--surf2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px;
  padding: 0.2rem 0.4rem; font-size: 0.74rem; cursor: pointer;
  outline: none; width: 100%;
}
#settings-panel select:focus { border-color: var(--accent); }
#settings-reset {
  margin-top: 0.8rem; width: 100%;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted2); border-radius: 6px;
  padding: 0.3rem; font-size: 0.72rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
#settings-reset:hover { color: var(--warn); border-color: var(--warn); }
.key { font-family: monospace; font-size: 0.82rem; }

/* ── Confirm modal ───────────────────────────────────── */
#confirm-modal {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
#confirm-modal.hidden { display: none; }

#confirm-box {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem 2.4rem 1.6rem;
  min-width: 300px; max-width: 360px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  animation: popIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { opacity:0; transform:scale(0.88); }
  to   { opacity:1; transform:scale(1); }
}

#confirm-close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted2); width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; font-size: 0.7rem; line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#confirm-close:hover { color: var(--error); border-color: var(--error); background: rgba(239,68,68,0.08); }

#confirm-msg {
  font-size: 1.2rem; font-weight: 800;
  margin-bottom: 0.55rem; letter-spacing: -0.02em;
}

.confirm-hint {
  font-size: 0.78rem; color: var(--muted2); margin-bottom: 1.1rem; line-height: 1.5;
}
.confirm-hint span { color: var(--ok); font-weight: 600; }

#confirm-progress-wrap {
  background: var(--border); border-radius: 999px;
  height: 6px; overflow: hidden; margin-bottom: 0.8rem;
}
#confirm-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ok), var(--accent));
  border-radius: 999px;
  transition: width 0.04s linear;
}

.confirm-sub {
  font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem;
}
.confirm-sub strong { color: var(--muted2); }

/* ── Footer ──────────────────────────────────────────── */
footer {
  flex-shrink: 0; padding: 0.55rem 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 0.7rem; color: var(--muted);
}
footer strong { color: var(--accent); }