/* ============================================================
   BJI AR Library — stylesheet tunggal
   ============================================================ */

:root {
  --ink: #111214;
  --ink-soft: #4a4d52;
  --muted: #74787e;
  --line: #e3e4e7;
  --line-strong: #cfd1d5;
  --bg: #f4f5f6;
  --panel: #ffffff;
  --ok: #10693c;
  --ok-bg: #e6f4ec;
  --warn: #8a5b00;
  --warn-bg: #fdf3e0;
  --danger: #b02020;
  --danger-bg: #fdecec;
  --info-bg: #eef2f8;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(17, 18, 20, .06), 0 1px 3px rgba(17, 18, 20, .04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; }
h1 { font-size: 24px; letter-spacing: -.01em; }
h2 { font-size: 17px; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: rgba(17,18,20,.06); padding: 1px 5px; border-radius: 4px; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- layout ---------- */

.topbar { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.topbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.brand-text { font-weight: 700; letter-spacing: -.01em; }

.topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav > a {
  padding: 7px 11px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px;
}
.topnav > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.topnav > a.is-active { color: #fff; background: rgba(255,255,255,.16); }
.topnav .btn { background: #fff; color: var(--ink); }
.topnav .btn:hover { background: rgba(255,255,255,.88); }

/* 1440px, dinaikkan dari 1180px saat pustaka diubah jadi lima kolom.
   Pada 1180px tiap kartu hanya kebagian ~215px — thumbnail mengecil dan
   tiga tombol di dalam kartu tidak muat sebaris. Pada 1440px tiap kartu
   dapat ~267px. Topbar dan footer ikut dilebarkan supaya tetap sejajar. */
.wrap { max-width: 1440px; margin: 0 auto; padding: 26px 20px 56px; }

.sitefoot {
  max-width: 1440px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--muted); font-size: 12.5px;
}

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head .lead { color: var(--muted); margin-top: 5px; font-size: 14px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- panel ---------- */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.panel > h2 { margin-bottom: 12px; }
.panel-muted { background: #fafbfc; }
.panel-danger { border-color: #f0cfcf; }
.panel-danger > h2 { color: var(--danger); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 650; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover { background: #2a2c30; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-xs { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(17,18,20,.05); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #8f1a1a; }

.link-button {
  border: 0; background: none; padding: 7px 11px;
  color: rgba(255,255,255,.78); font: inherit; font-size: 14px; cursor: pointer;
  border-radius: var(--radius-sm);
}
.link-button:hover { color: #fff; background: rgba(255,255,255,.1); }

.icon-button {
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.icon-button:hover { color: var(--ink); }

.inline-form { display: inline; }
.inline-form.gap { display: inline-flex; gap: 6px; align-items: center; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* ---------- forms ---------- */

label > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
label > span em { font-style: normal; color: var(--danger); font-weight: 600; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"],
input[type="file"], select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
input[type="file"] { padding: 8px; background: #fafbfc; }
textarea { resize: vertical; min-height: 68px; }

.fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fieldset legend { font-size: 13px; font-weight: 700; padding: 0 6px; }
.legend-note { font-weight: 400; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.checkbox { display: flex; align-items: center; gap: 8px; }
/* Checkbox native hanya ~13px — terlalu kecil untuk disentuh di ponsel. */
.checkbox input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ink); }
.checkbox span { margin: 0; font-weight: 500; color: var(--ink); }

.hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.break-all { overflow-wrap: anywhere; }
.muted { color: var(--muted); }

/* ---------- filter bar ---------- */

.filters {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filters-row > label { min-width: 150px; }
.filter-grow { flex: 1 1 260px; }
.filters-actions { display: flex; gap: 8px; margin-left: auto; }
.result-count { color: var(--muted); font-size: 13px; margin: 16px 0 12px; }

/* ---------- alerts ---------- */

.alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px;
  margin-bottom: 14px; border: 1px solid transparent;
}
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: #c6e4d3; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #f2cccc; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4; }
.alert-info { background: var(--info-bg); color: var(--ink-soft); border-color: #d6deea; }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.stat-value { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.stat-label { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.stat-warn { border-color: #f0dcb4; background: var(--warn-bg); }
.stat-warn .stat-value { color: var(--warn); }

/* ---------- chips & badges ---------- */

.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(17,18,20,.06); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
}
.chip-code { background: var(--ink); color: #fff; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-muted { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }

.badge {
  position: absolute; top: 9px; left: 9px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(17,18,20,.82); color: #fff;
}
.badge-old { background: rgba(138,91,0,.92); }

/* ---------- kartu model ---------- */

/* Lima kolom di layar lebar — angka tetap, bukan auto-fill. auto-fill
   menyesuaikan jumlah kolom dengan lebar yang tersedia, jadi hasilnya tidak
   pernah pasti lima. Penurunannya ditulis di sini, bukan di blok responsif
   di bawah, supaya seluruh perilaku grid terbaca dalam satu tempat. */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

/* minmax(0, 1fr), bukan 1fr: tanpa batas bawah nol, judul model yang panjang
   tanpa spasi bisa memaksa kolomnya melebar dan merusak barisnya. */
/* Ambangnya dihitung, bukan dikira: tiap turunan dipasang tepat sebelum
   kartu menyempit di bawah ~230px, lebar minimum agar thumbnail dan tiga
   tombol di dalam kartu masih nyaman. */
@media (max-width: 1260px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 440px)  { .grid { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow .14s ease, transform .14s ease;
}
.card:hover { box-shadow: 0 4px 16px rgba(17,18,20,.1); transform: translateY(-1px); }

.card-thumb {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: #eceef0; overflow: hidden;
}
/* z-index perlu: placeholder di belakangnya ber-position:absolute, yang tanpa
   ini akan menimpa gambar meski berada lebih awal di DOM. */
.card-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.card-thumb img[hidden] { display: none; }

.thumb-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #a8adb3; font-size: 20px; font-weight: 800; letter-spacing: .1em;
  background: repeating-linear-gradient(45deg, #eceef0 0 10px, #e6e8ea 10px 20px);
}
.thumb-tiny { position: static; width: 46px; height: 34px; border-radius: 5px; font-size: 10px; letter-spacing: .06em; }

.card-body { padding: 13px 14px 4px; flex: 1; }
.card-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; min-height: 23px; }
/* Tinggi kartu diseragamkan supaya barisnya rata.
   Grid sudah menyamakan tinggi kartu dalam satu baris, tapi tingginya
   ditentukan kartu terpanjang — sehingga kartu lain menyisakan ruang kosong
   dan tiap baris berbeda tinggi. Sumbernya tiga: jumlah chip, panjang judul,
   dan metadata yang sebagian bersifat opsional. Ketiganya dipatok. */
.card-title {
  font-size: 15px; margin-bottom: 9px; overflow-wrap: anywhere;
  /* Dipotong dua baris. Tanpa ini judul panjang membuat kartunya menjulang
     dan menarik seluruh baris ikut tinggi. */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }

.card-meta { margin: 0; font-size: 12.5px; min-height: 66px; }
.card-meta > div { display: flex; gap: 6px; padding: 2px 0; }
.card-meta dt { color: var(--muted); min-width: 74px; flex-shrink: 0; }
.card-meta dd { margin: 0; overflow-wrap: anywhere; }

.card-actions { display: flex; gap: 7px; padding: 12px 14px 14px; flex-wrap: wrap; }

/* ---------- tabel ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.table th { background: #fafbfc; font-size: 12px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }
.cell-thumb { width: 58px; }
.cell-thumb img { width: 46px; height: 34px; object-fit: cover; border-radius: 5px; }
.cell-actions { display: flex; gap: 6px; }

/* ---------- daftar ---------- */

.file-list, .revision-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.file-list li, .revision-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.file-list li:last-child, .revision-list li:last-child { border-bottom: 0; }
.file-list span, .revision-list span:not(.chip) { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.revision-list .chip { margin-left: 0; }
.revision-list .is-current-view { font-weight: 650; }

.steps { margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; color: var(--ink-soft); }
.steps li { margin-bottom: 6px; }

.info-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; }
.info-grid > div { min-width: 0; }
.info-grid dt { color: var(--muted); font-size: 12px; }
.info-grid dd { margin: 1px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.info-grid-tight { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- empty state ---------- */

.empty-state {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px 24px; text-align: center; box-shadow: var(--shadow);
}
.empty-state h1, .empty-state h2 { margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 460px; margin: 0 auto 18px; }

/* ---------- login ---------- */

.centered-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card {
  width: 100%; max-width: 370px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 6px 28px rgba(17,18,20,.08);
}
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head .brand-mark { background: var(--ink); color: #fff; margin: 0 auto 12px; width: 38px; height: 38px; font-size: 14px; }
.auth-head h1 { font-size: 20px; }
.auth-head p { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- pratinjau admin ---------- */

.preview-viewer {
  display: block; width: 100%; height: 340px;
  background: #f7f8f9; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.thumb-preview { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.thumb-preview img { width: 128px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.thumb-preview span { color: var(--muted); font-size: 12.5px; }
.qr-thumb { width: 100%; max-width: 220px; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---------- halaman viewer AR ---------- */

.viewer-page { margin: 0; height: 100%; overflow: hidden; background: #fff; }
/* MindAR menyisipkan elemen <video> dan <canvas> berposisi absolut ke dalam
   wadah ini, jadi wadahnya harus jadi acuan posisi dan memenuhi layar. */
/* Pemindai AR: video kamera sebagai lapisan bawah, kanvas three.js
   transparan menumpuk persis di atasnya. Keduanya harus sama persis
   ukurannya, kalau tidak model akan meleset dari kertasnya. */
.scan-page { background: #000; overflow: hidden; }
.scan-stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
/* `contain`, bukan `cover`. Cover memotong tepi video, sementara proyeksi
   kamera 3D menghitung frame utuh — modelnya akan meleset dari kertas.
   Lebih baik ada bilah hitam di tepi daripada model yang salah tempat. */
.scan-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.scan-canvas { position: absolute; pointer-events: none; }
.scan-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.scan-marker { display: flex; align-items: center; gap: 6px; }
.scan-marker input {
  width: 72px; padding: 3px 6px; font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
}

.track-page { background: #000; overflow: hidden; }
.track-stage {
  position: relative;
  width: 100vw; height: 100dvh;
  overflow: hidden;
}
.track-stage video,
.track-stage canvas { display: block; }

.viewer-page model-viewer {
  width: 100vw; height: 100dvh; background: #fff;
  --poster-color: #ffffff;
}

.pill {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(17,18,20,.12);
  backdrop-filter: blur(6px);
}
.pill-button { border: 0; cursor: pointer; font-family: inherit; text-decoration: none; }
.pill-code { background: rgba(17,18,20,.86); color: #fff; }
.pill-warn { background: rgba(138,91,0,.92); color: #fff; }

.viewer-top {
  position: fixed; z-index: 10;
  top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}

.viewer-bottom {
  position: fixed; z-index: 10;
  left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: min(92vw, 460px);
}
.btn-ar { padding: 14px 26px; font-size: 15px; box-shadow: 0 4px 18px rgba(17,18,20,.24); }
/* Radius 16px, bukan pil penuh: pesan diagnosa bisa dua sampai tiga baris,
   dan bentuk pil terlihat aneh begitu teksnya membungkus. */
.viewer-status {
  padding: 8px 14px; border-radius: 16px; text-align: center;
  background: rgba(255,255,255,.94); color: var(--ink-soft);
  font-size: 12px; line-height: 1.45;
  box-shadow: 0 2px 10px rgba(17,18,20,.1);
}
.status-action {
  display: inline-block; margin-top: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.status-action:hover { background: #000; }
.status-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.info-sheet {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow-y: auto;
  padding: 18px 20px calc(26px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(17,18,20,.16);
}
.info-sheet[hidden] { display: none; }
.info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.info-head h1 { font-size: 18px; overflow-wrap: anywhere; }
.info-block { margin-top: 20px; }
.info-block h2 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.info-notes { margin-top: 16px; padding: 11px 13px; background: #fafbfc; border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13.5px; color: var(--ink-soft); }
.info-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.info-share { margin-top: 14px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

@media (min-width: 720px) {
  .info-sheet { left: auto; right: 16px; bottom: 16px; width: 400px; border-radius: 16px; border: 1px solid var(--line); }
}

/* ---------- kartu QR ---------- */

.qr-page { background: var(--bg); padding: 24px 20px 48px; }
.qr-toolbar { max-width: 720px; margin: 0 auto 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.qr-card {
  max-width: 720px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.qr-image { width: 240px; height: 240px; flex-shrink: 0; }
.qr-details { flex: 1 1 240px; min-width: 0; }
.qr-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qr-code { font-size: 40px; letter-spacing: -.02em; margin: 4px 0 2px; }
.qr-slug { font-size: 14px; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.qr-meta { margin: 18px 0 0; font-size: 13px; }
.qr-meta > div { display: flex; gap: 8px; padding: 3px 0; }
.qr-meta dt { color: var(--muted); min-width: 84px; flex-shrink: 0; }
.qr-meta dd { margin: 0; }
.qr-url { margin-top: 16px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.qr-hint { max-width: 720px; margin: 16px auto 0; color: var(--muted); font-size: 12.5px; }

@media print {
  .qr-page { background: #fff; padding: 0; }
  .no-print { display: none !important; }
  .qr-card { border: 1px solid #999; box-shadow: none; max-width: 100%; page-break-inside: avoid; }
}

/* ---------- responsif ---------- */

@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .wrap { padding: 20px 14px 44px; }
  h1 { font-size: 21px; }
  .filters-actions { margin-left: 0; width: 100%; }
  .qr-card { padding: 18px; gap: 18px; }
  .qr-image { width: 100%; height: auto; max-width: 280px; margin: 0 auto; }
  .qr-code { font-size: 32px; }
}

/* ---------- pemilihan & ekspor ---------- */

/* Kotak centang mengambang di atas thumbnail, bukan menambah baris baru:
   tinggi kartu baru saja diseragamkan dan tidak boleh berubah lagi. */
.card-pick { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 4px; cursor: pointer; }
.card-pick input { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }
.card { position: relative; }

.pick-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: sticky; top: 62px; z-index: 5;
  margin-bottom: 12px; padding: 9px 13px;
  background: var(--ink); color: #fff;
  border-radius: 999px; box-shadow: 0 4px 16px rgba(17,18,20,.22);
  font-size: 13px; font-weight: 600;
}
.pick-bar[hidden] { display: none; }
.pick-bar .btn { border-color: rgba(255,255,255,.35); }
.pick-bar .btn-ghost { color: #fff; }
.pick-bar .btn-ghost:hover { background: rgba(255,255,255,.14); }