:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
.narrow { max-width: 520px; }

.topbar { border-bottom: 1px solid #e5e5e5; background: #fff; position: sticky; top: 0; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-weight: 700; letter-spacing: .2px; }
.nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 8px; }
.nav a:hover { background: #f3f3f3; }

h1 { margin: 0 0 10px; font-size: 28px; }
h2 { margin: 0 0 10px; font-size: 20px; }
h3 { margin: 0 0 10px; font-size: 16px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card { border: 1px solid #e5e5e5; border-radius: 14px; padding: 14px; background: #fff; }
.muted { color: #666; }
.big { font-size: 40px; font-weight: 750; margin: 8px 0 10px; }

input, select, button { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid #d8d8d8; }
button { cursor: pointer; border: 1px solid #111; background: #111; color: #fff; }
button:hover { opacity: .92; }

.btn { display: inline-block; padding: 10px 12px; border-radius: 10px; border: 1px solid #111; background: #111; color: #fff; text-decoration: none; }
.btn:hover { opacity: .92; }

.linklike { border: none; background: transparent; padding: 0; color: #111; text-decoration: underline; cursor: pointer; }
.inline { display: inline-flex; gap: 10px; align-items: center; }
.stack { display: grid; gap: 10px; margin-top: 10px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #555; }

.alert { padding: 12px; border-radius: 12px; border: 1px solid #ffb5b5; background: #fff3f3; margin: 10px 0; }

.footer { color: #777; padding-top: 22px; padding-bottom: 32px; }
hr { border: 0; border-top: 1px solid #eee; margin: 16px 0; }

details summary { cursor: pointer; }

/* Keep header/menu above camera overlays, canvases, etc. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Scanner containment */
.scan-page .scanner-frame{
  width:100%;
  max-width:520px;
  height:320px;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#000;
  border:1px solid rgba(255,255,255,0.12);
  z-index: 1;
}

.scan-page #scanner { position: relative; z-index: 1; }

.scan-page #scanner video,
.scan-page #scanner canvas{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  z-index: 1;
}

.scan-page .scan-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
}

.scan-page .scan-box{
  width:78%;
  height:42%;
  border:2px solid rgba(255,255,255,0.55);
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.35);
}

body.scanning { overflow:hidden; }