:root{
  --bg:#0f1720;
  --card:#121a24;
  --muted:#9db0c2;
  --text:#e7eef6;
  --accent:#8e2424;
  --accent-600:#a43030;
  --border:#1e2b3a;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 50% -200px, #1b2531 0%, var(--bg) 55%);
  color:var(--text);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.topbar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, var(--accent), var(--accent-600));
  color:#fff; padding:10px 18px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow)
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo{width:22px; height:22px; border-radius:6px}
.nav .btn{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(0,0,0,.2)}

.container{max-width:1100px; margin:40px auto; padding:0 16px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:18px
}

.tip{background:#0f1b28; border:1px dashed #243244; color:var(--muted); padding:10px 12px; border-radius:10px}
.tip em{color:#d7e7f9; font-style:normal}

.actions{margin:14px 0 10px; display:flex; gap:10px; flex-wrap:wrap}

.btn{
  --b:1px;
  background:#1a2431; color:#e9f3ff;
  border:var(--b) solid #233246;
  padding:8px 12px; border-radius:10px;
  cursor:pointer; transition:.15s ease;
}

.btn:hover{background:#223043; transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:#2a3a50; color:#c8d7e8}
.btn-primary{background:var(--accent); border-color:transparent}
.btn-primary:hover{background:#b63a3a}
.btn-secondary{background:#2b3a4f}
.btn-xs{padding:6px 8px; font-size:.85rem; border-radius:8px}
.i{margin-right:6px}
.topbar .nav .btn,
.topbar .nav .btn:link,
.topbar .nav .btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;     /* same as other buttons */
  font-size: 14px;       /* same text size */
  line-height: 1.2;
  text-decoration: none; /* remove underline on the Analytics <a> */
}

.topbar .nav .btn:hover,
.topbar .nav .btn:focus {
  text-decoration: none; /* keep underline off on hover/focus */
}

.dropzone{
  position:relative;
  border:1px dashed #284058;
  background:linear-gradient(180deg, #0f1720 0%, #0d141c 100%);
  border-radius:14px;
  min-height:340px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

.drop-label{
  position:absolute; inset:auto 0 14px 0; text-align:center; color:#a7bacf; pointer-events:none;
  font-size:.95rem;
}

#cameraVideo, #previewImg{
  width:100%; height:auto; max-height:62vh; display:none; object-fit:contain;
}

/* Camera overlay toolbar — always above the video */
.camera-controls{
  position:absolute;
  right:14px;
  top:14px;
  display:flex;
  gap:8px;
  background:rgba(15,23,32,.72);
  backdrop-filter:blur(6px);
  padding:8px;
  border-radius:12px;
  border:1px solid var(--border);
  z-index:40; /* keep above video */
}
.hidden{display:none !important}

.foot-note{color:#a9bdd2; margin:12px 2px 0}
.site-footer{color:#90a7bf; text-align:center; padding:28px 16px}

/* Allergy panel */
.allergy-panel{margin:14px 0; border:1px dashed #2a3a4f; border-radius:10px; padding:10px 12px}
.allergy-panel>summary{cursor:pointer; color:#cfe1f5; margin:4px 0}
.allergy-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px 12px; margin:10px 0 6px;
}
.allergy-actions{display:flex; gap:8px; margin-bottom:6px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips .chip{
  background:#1b2837; border:1px solid #2b3a4f; border-radius:999px; padding:4px 8px; font-size:.85rem; color:#cfe1f5
}

/* Modal for QR */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
}
.modal-card{
  width:min(94vw, 420px);
  background:#0f1720; border:1px solid #233246; border-radius:12px; padding:18px;
  box-shadow:var(--shadow);
}
.modal-card h3{margin:0 0 8px}
.modal-card .muted{color:#a7bacf}
.modal-actions{display:flex; justify-content:flex-end; margin-top:12px}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:#1a2431; border:1px solid #243244; color:#e7eef6; padding:8px 12px; border-radius:10px;
  z-index:210; box-shadow:var(--shadow)
}
/* Make anchor buttons look like real buttons, no underline */
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:active {
  text-decoration: none;
}