@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper: #EFEDE6;
  --paper-raised: #F7F5F0;
  --ink: #1B1B18;
  --ink-dim: #5B5850;
  --line: #D7D2C4;
  --lens: #26415E;
  --lens-dim: rgba(38,65,94,0.08);
  --brass: #B08D57;
  --brass-dim: rgba(176,141,87,0.14);
  --viewfinder: #14161A;
  --paper-on-dark: #EDEAE0;
  --danger: #9A3B2C;
  --radius: 3px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--viewfinder);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

button{ font-family:inherit; }
a{ color:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------- App shell / viewfinder ---------- */

#app{
  position:fixed; inset:0;
  background:var(--viewfinder);
  overflow:hidden;
}

#video, #freezeCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:var(--viewfinder);
}
#freezeCanvas{ display:none; }

#gridCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

#overlayLayer{
  position:absolute; inset:0;
  overflow:hidden;
  touch-action:none;
}
/* A slim strip along the left edge that deliberately keeps default touch
   handling, so iOS Safari's edge-swipe-back gesture still has room to be
   recognized even though the rest of the viewfinder captures pinch/drag. */
#edgeBack{
  position:absolute; left:0; top:0; bottom:0;
  width:18px;
  z-index:15;
  touch-action:pan-x;
}
#overlayImg{
  position:absolute;
  top:0; left:0;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* ---------- Start screen ---------- */

#startScreen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  padding:40px 28px;
  background: var(--paper);
  text-align:center;
  z-index:50;
}
#startScreen.hidden{ display:none; }

.mark{
  width:64px; height:64px;
}
.mark svg{ width:100%; height:100%; }

.wordmark{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:42px;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.tagline{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-dim);
  max-width:340px;
  margin:0;
}

.btn{
  appearance:none;
  border:1px solid var(--lens);
  background:var(--lens);
  color:var(--paper-on-dark);
  font-size:14.5px;
  font-weight:500;
  padding:13px 26px;
  border-radius:var(--radius);
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover{ background:#1f3550; }
.btn:active{ transform: scale(0.98); }

.btn-ghost{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:13.5px;
  font-weight:500;
  padding:11px 20px;
  border-radius:var(--radius);
  cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--ink-dim); }

.btn-brass{
  appearance:none;
  border:1px solid var(--brass);
  background:var(--brass);
  color:#20180C;
  font-size:14.5px;
  font-weight:600;
  padding:13px 26px;
  border-radius:var(--radius);
  cursor:pointer;
}
.btn-brass:hover{ background:#9c7a49; }

.err{
  color:var(--danger);
  font-size:13px;
  min-height:18px;
}

/* ---------- Top status ---------- */

#topLabel{
  position:absolute; top:0; left:0; right:0;
  z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(237,234,224,0.72);
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);
}
#topLabel b{ color:var(--paper-on-dark); font-weight:600; }
.trial-pill{
  pointer-events:auto;
  background:rgba(176,141,87,0.85);
  color:#20180C;
  font-weight:600;
  padding:5px 10px;
  border-radius:20px;
  font-size:10.5px;
  letter-spacing:.03em;
  cursor:pointer;
  border:none;
}

/* ---------- Dock / controls ---------- */

#dock{
  position:absolute; left:0; right:0; bottom:0;
  z-index:30;
  padding: 14px 12px max(14px, env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}

#dockRow{
  display:flex;
  justify-content:center;
  gap:10px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
#dockRow::-webkit-scrollbar{ display:none; }

.dwrap{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:0 0 auto;
}
.dbtn{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(237,234,224,0.35);
  background:rgba(20,22,26,0.55);
  color:var(--paper-on-dark);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.dbtn svg{ width:20px; height:20px; }
.dbtn.on{ background:var(--brass); border-color:var(--brass); color:#20180C; }
.dbtn.freeze.active{ background:var(--danger); border-color:var(--danger); color:#fff; }
.dlabel{
  font-size:10px;
  color:rgba(237,234,224,0.7);
  letter-spacing:.02em;
}

/* ---------- Adjust panel ---------- */

#panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(320px, 86vw);
  background: rgba(247,245,240,0.86);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition: transform .22s ease;
  z-index:40;
  display:flex; flex-direction:column;
  padding: max(20px, env(safe-area-inset-top)) 20px 20px;
  overflow-y:auto;
}
#panel.open{ transform:translateX(0); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #panel{ background: var(--paper-raised); }
}

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.panel-head h2{
  font-family:var(--font-display);
  font-size:20px; font-weight:500;
  margin:0;
}
.iconbtn{
  border:none; background:none; cursor:pointer;
  color:var(--ink-dim);
  padding:4px;
}

.section-title{
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:.04em;
  margin: 18px 0 10px;
}
.section-title:first-of-type{ margin-top:2px; }

.row{ margin-bottom:16px; }
.row:last-child{ margin-bottom:0; }
.row-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; margin-bottom:7px;
}
.row-head .val{ color:var(--ink-dim); font-variant-numeric:tabular-nums; }

input[type="range"]{
  -webkit-appearance:none; width:100%; height:26px; background:transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:2px; background:var(--line); border-radius:2px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--lens); margin-top:-8px; border:2px solid var(--paper-raised);
  box-shadow: 0 0 0 1px var(--lens);
}
input[type="range"]::-moz-range-track{
  height:2px; background:var(--line); border-radius:2px;
}
input[type="range"]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:2px solid var(--paper-raised);
  background:var(--lens); box-shadow: 0 0 0 1px var(--lens);
}

.toggles{ display:flex; gap:9px; }
.toggle{
  flex:1; padding:10px 0; text-align:center; font-size:12.5px;
  border-radius:var(--radius); background:var(--paper); color:var(--ink-dim);
  cursor:pointer; border:1px solid var(--line);
}
.toggle.on{ background:var(--lens-dim); color:var(--lens); border-color:var(--lens); }

.textbtn{
  width:100%; padding:11px 0; text-align:center; font-size:13px;
  border-radius:var(--radius); background:var(--paper); color:var(--ink);
  cursor:pointer; border:1px solid var(--line); font:inherit;
}
.textbtn:hover{ border-color:var(--ink-dim); }

/* ---------- Gate / unlock nameplate ---------- */

.overlay-backdrop{
  position:absolute; inset:0;
  z-index:60;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(15,16,18,0.72);
  padding:24px;
}
.overlay-backdrop.open{ display:flex; }

.nameplate{
  width:min(380px, 100%);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px 24px;
  position:relative;
}
.nameplate::before{
  content:"";
  position:absolute; left:26px; right:26px; top:0;
  height:2px;
  background:var(--brass);
}
.nameplate h3{
  font-family:var(--font-display);
  font-size:22px; font-weight:500;
  margin:0 0 8px;
}
.nameplate p{
  font-size:13.5px; line-height:1.6; color:var(--ink-dim);
  margin:0 0 20px;
}
.plate-price{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--ink);
  margin-bottom:18px;
}
.plate-price b{ font-size:28px; font-weight:500; }
.plate-actions{ display:flex; flex-direction:column; gap:10px; }
.plate-actions-spaced{ margin-top:14px; }
.plate-foot{
  margin-top:16px;
  font-size:11.5px;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:6px;
}

.textinput{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--font-ui);
  font-size:15px;
  letter-spacing:.03em;
  background:var(--paper);
  color:var(--ink);
}
.textinput:focus{ border-color:var(--lens); }

.link-btn{
  background:none; border:none; color:var(--lens); font-size:13px;
  cursor:pointer; text-decoration:underline; padding:2px;
}

/* ---------- Toast ---------- */

#toast{
  position:absolute; left:50%; bottom:130px;
  transform:translateX(-50%) translateY(8px);
  background:rgba(20,22,26,0.85);
  color:var(--paper-on-dark);
  font-size:12.5px;
  padding:9px 16px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  z-index:35;
  white-space:nowrap;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (min-width: 720px){
  .wordmark{ font-size:52px; }
  .tagline{ max-width:420px; font-size:16px; }
}

/* ---------- Success / cancel pages ---------- */

body.static-page{ background:var(--paper); }
.static-wrap{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
}
.static-card{
  width:min(420px, 100%);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px 28px;
  position:relative;
}
.static-card.centered{ text-align:center; background:none; border:none; padding:0; }
.static-card::before{
  content:"";
  position:absolute; left:28px; right:28px; top:0;
  height:2px; background:var(--brass);
}
.static-card.centered::before{ display:none; }
.static-card h1{
  font-family:var(--font-display); font-weight:500; font-size:24px;
  margin:0 0 10px;
}
.static-card p{ font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 18px; }
.keybox{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:.04em;
  text-align:center;
  padding:16px 12px;
  border:1px dashed var(--brass);
  background:var(--brass-dim);
  border-radius:var(--radius);
  margin-bottom:16px;
  word-break:break-all;
}
.static-row{ display:flex; gap:10px; }
.static-row a.btn{
  text-decoration:none; text-align:center; flex:1;
  display:flex; align-items:center; justify-content:center;
}
.muted{ font-size:12px; color:var(--ink-dim); margin-top:14px; }
#state-loading, #state-error{ text-align:center; padding:20px 0; color:var(--ink-dim); font-size:14px; }
#state-error{ display:none; color:var(--danger); }
#state-ready{ display:none; }

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