:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#16202a; background:#eef2f5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
.topbar { min-height:78px; padding:15px 22px; background:#101820; color:white; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { font-size:23px; font-weight:900; letter-spacing:.08em; }
.brand span { color:#ffb000; }
.subtitle { opacity:.76; font-size:13px; margin-top:3px; }
.badge { border:1px solid #69747e; border-radius:999px; padding:8px 12px; font-size:12px; }
.badge.ok { background:#153f2c; border-color:#3fc27f; }
.badge.bad { background:#4f2020; border-color:#e66b6b; }
.simple-layout { min-height:calc(100vh - 78px); padding:22px; display:grid; place-items:start center; }
.capture-card { width:min(760px,100%); background:white; border-radius:18px; box-shadow:0 10px 35px rgba(20,30,40,.10); padding:26px; }
h1 { margin:0 0 8px; font-size:30px; }
.lead { color:#52606d; line-height:1.55; margin:0 0 24px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.capture-button { min-height:190px; border:2px solid #d8e0e6; border-radius:16px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; cursor:pointer; padding:18px; transition:.16s ease; }
.capture-button:hover { transform:translateY(-2px); border-color:#ffb000; box-shadow:0 8px 20px rgba(20,30,40,.09); }
.capture-button.camera { background:#fff7e4; }
.capture-button.gallery { background:#f2f7fa; }
.capture-button input { display:none; }
.icon { font-size:48px; margin-bottom:10px; }
.capture-button strong { font-size:19px; }
.capture-button small { margin-top:6px; color:#65717c; }
button { border:0; border-radius:10px; padding:12px 15px; font-weight:800; cursor:pointer; }
.secondary { background:#dde5ea; color:#16202a; }
.primary { background:#d48b00; color:white; }
.demo-button { width:100%; margin-top:13px; }
.progress { margin-top:20px; display:flex; gap:12px; align-items:center; background:#eff6fb; padding:16px; border-radius:12px; }
.spinner { width:25px; height:25px; border:3px solid #bdd0dc; border-top-color:#1b7895; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }
.error { margin-top:18px; padding:15px; background:#fff0f0; border:1px solid #e5a4a4; border-radius:11px; color:#722; line-height:1.45; }
.result-card { margin-top:20px; }
.result-card img { display:block; width:100%; max-height:520px; object-fit:contain; background:#172027; border-radius:13px; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:13px; }
.result-grid div { border:1px solid #dce3e8; border-radius:10px; padding:11px; }
.result-grid span { display:block; font-size:12px; color:#697580; }
.result-grid strong { display:block; margin-top:5px; font-size:20px; }
.warning { margin:13px 0; padding:12px; background:#fff5d8; border:1px solid #edcf74; border-radius:10px; font-size:13px; }
.result-card button { width:100%; }
@media(max-width:620px) {
  .topbar { padding:12px 14px; }
  .simple-layout { padding:10px; }
  .capture-card { padding:18px; border-radius:13px; }
  h1 { font-size:25px; }
  .choice-grid { grid-template-columns:1fr; }
  .capture-button { min-height:145px; }
  .result-grid { grid-template-columns:1fr 1fr; }
}

.reference-note{margin-top:14px;padding:12px;border-radius:10px;background:#edf7ef;border:1px solid #a9d5b3;color:#274b31;line-height:1.45;}


/* Dovia Design customer branding */
.dovia-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.dovia-brand img {
  display:block;
  width:min(330px, 56vw);
  height:auto;
  max-height:92px;
  object-fit:contain;
  object-position:left center;
  border-radius:4px;
}
.dovia-brand .subtitle {
  color:rgba(255,255,255,.82);
  font-size:13px;
  margin-top:0;
}
@media(max-width:620px) {
  .topbar {
    align-items:center;
  }
  .dovia-brand img {
    width:min(245px, 58vw);
    max-height:76px;
  }
  .dovia-brand .subtitle {
    font-size:11px;
  }
  .badge {
    font-size:11px;
    padding:7px 10px;
  }
}