:root {
  color-scheme: dark;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  background: #101412;
  color: #eef5ef;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #183025, #101412 55%); }
.page { max-width: 1240px; margin: 0 auto; padding: 32px 20px 80px; }
.hero, .panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; }
.hero { padding: 28px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 8px; color: #8fd8aa; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
h1, h2 { margin: 0 0 12px; }
.lead, .muted, .status, .notes, .steps { color: #c9d6cb; }
.summary { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.chip { padding: 10px 14px; border-radius: 999px; background: rgba(143,216,170,.12); border: 1px solid rgba(143,216,170,.2); }
.panel { padding: 22px; margin-bottom: 18px; }
.dual { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.workspace { display: grid; gap: 18px; grid-template-columns: 1.1fr .9fr; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.references { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.reference-card { background: rgba(255,255,255,.03); border-radius: 18px; padding: 10px; border: 1px solid rgba(255,255,255,.08); }
.reference-card p { margin: 8px 0 0; font-size: 13px; color: #c9d6cb; }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; overflow: hidden; }
.card img, .selected-image, .result-image { width: 100%; display: block; border-radius: 18px; }
.card-body { padding: 14px; }
.meta { font-size: 14px; color: #b9c7bc; margin: 6px 0 10px; }
.reason { font-size: 13px; color: #8fd8aa; min-height: 36px; }
.reason.blocked { color: #ffb39e; }
button, .upload span {
  border: 0; border-radius: 999px; padding: 12px 18px; background: #1f8cff; color: white; font: inherit; cursor: pointer;
}
button[disabled] { opacity: .45; cursor: not-allowed; }
.card button.blocked { background: #47514b; }
.upload { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0; }
.upload input { display: none; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.status { min-height: 24px; }
#result-canvas { max-width: 100%; border-radius: 18px; }
.steps { padding-left: 20px; }
.notes { margin: 14px 0 0; padding-left: 18px; }
@media (max-width: 960px) {
  .dual,
  .workspace { grid-template-columns: 1fr; }
}