@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root{
  --bg:#050505;
  --text:#FFF9EE;
  --green:#D2FF00;
  --pink:#D3279D;
  --grey:#777777;
  --panel:#0d0d0d;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{
  background:var(--bg);
  color:var(--text);
  min-height:100%;
  font-family:'DM Sans', sans-serif;
}

body{ display:flex; justify-content:center; }

#app{
  width:100%;
  max-width:480px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom));
}

@media (min-width:480px){
  #app{ padding:32px 32px calc(32px + env(safe-area-inset-bottom)); }
}

.wordmark{
  font-family:'DM Sans', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.18em;
  margin-bottom:20px;
}

.step-label{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:24px;
}

.headline{
  font-family:'Permanent Marker', cursive;
  text-transform:uppercase;
  font-size:clamp(28px, 8vw, 36px);
  line-height:1.15;
  margin-bottom:12px;
}

.subline{
  font-size:16px;
  color:var(--grey);
  line-height:1.5;
  margin-bottom:32px;
}

.highlight-line{
  font-family:'Permanent Marker', cursive;
  text-transform:uppercase;
  font-size:clamp(18px, 5vw, 22px);
  color:var(--green);
  line-height:1.3;
  margin-bottom:32px;
}

.coming-soon-tag{
  display:inline-block;
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--green);
  border:1px solid var(--green);
  padding:6px 14px;
}

.spacer{ flex:1; }

button{ font-family:inherit; cursor:pointer; border:none; }

.btn-primary{
  width:100%;
  background:var(--green);
  color:#050505;
  font-weight:700;
  font-size:16px;
  padding:18px 20px;
  text-transform:uppercase;
  transition:transform 0.15s ease, opacity 0.15s ease;
}
.btn-primary:active{ transform:scale(0.98); }
.btn-primary:disabled{ opacity:0.35; pointer-events:none; }

.btn-secondary{
  width:100%;
  background:none;
  color:var(--text);
  border:1px solid rgba(255,249,238,0.25) !important;
  font-weight:600;
  font-size:15px;
  padding:16px 20px;
  text-transform:uppercase;
  margin-top:12px;
}

.btn-text{
  width:100%;
  background:none;
  color:var(--grey);
  font-size:14px;
  padding:14px 0;
  text-align:left;
}
.btn-text:hover{ color:var(--text); }

/* ---------- progress bar (shared by step-1..5) ---------- */
.progress-track{
  display:flex;
  align-items:center;
  margin-bottom:8px;
}
.progress-track .dot{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(255,249,238,0.15);
  flex-shrink:0;
}
.progress-track .dot.done{ background:var(--green); }
.progress-track .line{
  flex:1;
  height:2px;
  background:rgba(255,249,238,0.15);
  margin:0 4px;
}
.progress-track .line.done{ background:var(--green); }

/* ---------- photo capture ---------- */
.photo-well{
  width:100%;
  aspect-ratio:1;
  background:var(--panel);
  border:1px dashed rgba(255,249,238,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:24px;
  position:relative;
}
.photo-well img,
.photo-well video{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-well .placeholder-icon{ font-size:40px; opacity:0.3; }

.camera-error{
  padding:32px 24px;
  text-align:center;
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  line-height:1.7;
  color:var(--grey);
}

.shutter{
  width:64px;
  height:64px;
  border-radius:50%;
  border:3px solid var(--text);
  margin:4px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 0.15s ease;
}
.shutter:active{ transform:scale(0.92); }
.shutter-inner{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--text);
}

input[type="file"]{ display:none; }

.capture-actions{ display:flex; flex-direction:column; gap:12px; }

/* ---------- form fields ---------- */
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:8px;
}
.field .required{ color:var(--green); }

.field input[type="text"],
.field input[type="email"],
.field textarea{
  width:100%;
  background:var(--panel);
  border:1px solid rgba(255,249,238,0.15);
  color:var(--text);
  font-family:'DM Sans', sans-serif;
  font-size:16px;
  padding:14px;
  line-height:1.5;
}
.field input:focus,
.field textarea:focus{ outline:1px solid var(--green); border-color:var(--green); }
.field textarea{ resize:vertical; min-height:80px; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--grey); }

.form-scroll{ flex:1; overflow-y:auto; padding-bottom:8px; }

/* ---------- review (read-only rendering, not inputs) ---------- */
.review-value{
  background:var(--panel);
  border:1px solid rgba(255,249,238,0.15);
  color:var(--text);
  font-size:16px;
  line-height:1.5;
  padding:14px;
  white-space:pre-wrap;
}

/* ---------- saving ---------- */
.saving-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.spinner{
  width:36px; height:36px;
  border:2px solid rgba(255,249,238,0.15);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:24px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.saving-text{ font-family:'DM Mono', monospace; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); }

/* ---------- reveal / record photo + meta ---------- */
.big-photo{
  width:100%;
  aspect-ratio:1;
  background:var(--panel);
  overflow:hidden;
  margin-bottom:24px;
}
.big-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.object-name{
  font-family:'Permanent Marker', cursive;
  text-transform:uppercase;
  font-size:clamp(26px, 7vw, 32px);
  line-height:1.15;
  margin-bottom:6px;
}
.object-meta{ font-family:'DM Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); margin-bottom:18px; }
.object-story{ font-size:16px; line-height:1.6; color:var(--text); margin-bottom:24px; }

.status-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--grey);
  margin-bottom:4px;
}
.status-line .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.status-block{ margin-bottom:28px; }

/* ---------- pricing card (payment.html) ---------- */
.pricing-card{
  background:var(--panel);
  border:1px solid rgba(255,249,238,.12);
  padding:24px;
  margin-bottom:28px;
}
.pricing-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.pricing-label{ font-size:16px; color:var(--text); }
.pricing-price{ font-family:'DM Mono',monospace; font-size:22px; font-weight:700; color:var(--text); }
.pricing-price.free{ color:var(--green); }
.pricing-divider{ height:1px; background:rgba(255,249,238,.12); margin:20px 0; }
.pricing-note{ margin-top:20px; text-align:center; color:var(--grey); font-size:14px; line-height:1.5; }

.error-text{ color:var(--pink); font-size:14px; margin-top:8px; }

/* ---------- LOCK stamp (record.html) ---------- */
.lock-stamp{
  border:1px solid var(--green);
  padding:20px;
  text-align:center;
  margin-bottom:28px;
}
.lock-stamp-word{
  font-family:'Permanent Marker', cursive;
  text-transform:uppercase;
  font-size:22px;
  color:var(--green);
  margin-bottom:6px;
}
.lock-stamp-date{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:16px;
}
.lock-stamp-idlabel{
  font-family:'DM Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:4px;
}
.lock-stamp-id{
  font-family:'DM Mono', monospace;
  font-size:16px;
  letter-spacing:0.06em;
  color:var(--text);
  font-weight:500;
}

/* ---------- history timeline (record.html) ---------- */
/* ---------- object information (record.html) ---------- */
.info-row{
  padding:18px 0;
  border-bottom:1px solid rgba(255,249,238,0.1);
}
.info-row:last-child{ border-bottom:none; }
.info-label{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:6px;
}
.info-value{
  font-size:16px;
  line-height:1.5;
  color:var(--text);
}

.record-actions{
  margin-top:32px;
}
.record-actions-note{
  margin-top:10px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--grey);
}

.record-footer{
  margin-top:32px;
  text-align:center;
  font-family:'DM Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
}

/* ---------- history timeline (record.html) ----------
   Not currently rendered anywhere — the launch-fix ticket's required
   record.html layout doesn't include History, so it was removed from
   that page. Left here (paired with getHistory() in lock.js) because
   the append-only history model is real and this will be needed again
   once UPDATE MODE can append events. */
.history-label{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:16px;
}
.history-item{
  position:relative;
  padding-left:20px;
  padding-bottom:20px;
  border-left:1px solid rgba(255,249,238,0.15);
}
.history-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.history-item::before{
  content:"";
  position:absolute;
  left:-4px; top:2px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green);
}
.history-item-type{
  font-family:'DM Mono', monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:2px;
}
.history-item-date{
  font-family:'DM Mono', monospace;
  font-size:11px;
  color:var(--grey);
}
.history-item-desc{
  font-size:14px;
  color:var(--text);
  margin-top:6px;
  line-height:1.5;
}