/* Ultra Red Technologies — quote page: viewer, dropzone, HUD */

.quote-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:start; }
@media (max-width:959px){ .quote-layout{ grid-template-columns:1fr; } }

.viewer-panel{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface);
}
.viewer-stage{
  position:relative; aspect-ratio:1/1; max-height:60vh;
  background:radial-gradient(circle at 50% 40%, var(--surface2), var(--void));
}
@media (max-width:560px){ .viewer-stage{ aspect-ratio:4/3; max-height:50vh; } }

.vs-state{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-4); padding:var(--sp-6); text-align:center; cursor:pointer;
}
/* Author display:flex above otherwise beats the UA [hidden]{display:none} rule — restore it explicitly. */
.vs-state[hidden]{ display:none; }
.vs-state.dropzone{ transition:background var(--dur-base) var(--ease-out); }
.vs-state.dropzone.drag-over{ background:rgba(84,224,236,.06); }
.vs-state .dz-icon{ width:44px; height:44px; color:var(--ash-dim); }
.vs-state h4{ font-family:var(--font-sans); font-size:var(--fs-500); font-weight:500; color:var(--bone); }
.vs-state p{ font-size:var(--fs-300); max-width:38ch; }
.vs-state .formats{ font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ash-dim); text-transform:uppercase; letter-spacing:.05em; }

[data-state="rendered"]{ position:absolute; inset:0; pointer-events:none; }
[data-viewer-slot]{ position:absolute; inset:0; }
[data-viewer-slot] canvas{ pointer-events:auto; touch-action:none; }

.hud{
  position:absolute; left:var(--sp-4); bottom:var(--sp-4); right:var(--sp-4);
  display:flex; flex-wrap:wrap; gap:var(--sp-2); pointer-events:none;
}
.hud-chip{
  background:rgba(9,6,10,.72); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:6px 10px; font-family:var(--font-mono); font-size:10px;
  color:var(--bone); letter-spacing:.02em;
}
.hud-chip b{ color:var(--accent); font-weight:500; }

.viewer-footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line-soft); }
.viewer-footer .fname{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--ash); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-footer button.link{ font-family:var(--font-mono); font-size:var(--fs-100); color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }

.price-card{
  margin-top:var(--sp-5); padding:var(--sp-6); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(200,56,46,.08), transparent);
}
.price-card .label{ font-family:var(--font-mono); font-size:var(--fs-100); text-transform:uppercase; letter-spacing:.08em; color:var(--ash-dim); }
.price-card output{ display:block; font-family:var(--font-mono); font-size:var(--fs-700); color:var(--bone); margin-top:var(--sp-2); }
.price-card .caveat{ font-size:var(--fs-100); color:var(--ash-dim); margin-top:var(--sp-2); }

.form-result{ margin-top:var(--sp-5); padding:var(--sp-6); border-radius:var(--radius-lg); border:1px solid var(--line); }
.form-result.ok{ border-color:rgba(62,207,110,.35); background:rgba(62,207,110,.05); }
.form-result.error{ border-color:rgba(240,64,46,.35); background:rgba(240,64,46,.05); }
.form-result p{ color:var(--bone); font-size:var(--fs-300); margin-bottom:var(--sp-4); }