:root { --bg:#f6f6f4; --text:#111; --muted:#666; --line:#ddd; --card:#fff; --accent:#111; --danger:#b42318; --danger-bg:#fff2f0; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color:#111; }
.topbar { min-height:64px; display:flex; align-items:center; gap:24px; padding:0 24px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { font-weight:800; text-decoration:none; letter-spacing:.01em; }
nav { display:flex; gap:16px; flex:1; }
nav a { text-decoration:none; color:#333; }
.logout { margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--muted); }
.container { max-width:1180px; margin:32px auto; padding:0 24px; }
h1 { margin:0 0 8px; font-size:32px; }
h2 { margin-top:0; }
.muted { color:var(--muted); }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; }
.button, button { border:1px solid #bbb; background:#fff; color:#111; padding:10px 14px; border-radius:10px; text-decoration:none; cursor:pointer; display:inline-block; font-weight:600; }
.primary { background:#111; color:#fff; border-color:#111; }
.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.alert { padding:12px 14px; border-radius:10px; background:#fee; color:#8a1111; border:1px solid #f1b5b5; margin:16px 0; }
.login-card, .panel { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; max-width:440px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.login-card { margin:64px auto; }
.wide-panel { max-width:none; width:100%; margin-bottom:24px; }
form label { display:flex; flex-direction:column; gap:6px; font-weight:600; margin-bottom:14px; }
label small { color:var(--muted); font-weight:400; line-height:1.35; }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid #bbb; border-radius:10px; font:inherit; background:#fff; }
textarea { min-height:88px; }
.grid-form { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px 18px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; }
.grid-form label { margin-bottom:0; }
.full { grid-column:1 / -1; }
.checkbox { flex-direction:row; align-items:center; gap:10px; }
.checkbox input { width:auto; }
.advanced-checkbox { display:grid; grid-template-columns:auto 1fr; align-items:start; }
.advanced-checkbox small { grid-column:2; }
.actions { display:flex; align-items:flex-end; }
.stats { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin:20px 0; }
.stat { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.stat strong { display:block; font-size:28px; }
.stat span { color:var(--muted); }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
th, td { padding:12px 14px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle; }
th { background:#fafafa; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:#555; }
.pill { display:inline-block; padding:5px 9px; border-radius:999px; background:#eee; font-size:12px; font-weight:700; }
.download-row { display:flex; gap:10px; }
.meta-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; margin:16px 0 24px; }
.meta-grid div { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.meta-grid strong, .meta-grid span { display:block; }
.meta-grid span { color:#555; margin-top:4px; }
.qr-sample img { display:block; }
.qr-thumb { width:96px; height:96px; object-fit:contain; border-radius:8px; background:#111; padding:6px; }
.user-inline-form { display:grid; grid-template-columns:minmax(190px,1.2fr) minmax(180px,1.1fr) minmax(180px,1.1fr) minmax(220px,1.2fr) minmax(160px,1fr); gap:16px; align-items:end; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; }
.user-inline-form label { margin-bottom:0; }
.user-create-action { grid-column:1 / -1; align-self:end; justify-content:flex-start; }
.user-create-action button { white-space:nowrap; }
.danger-zone { margin-top:32px; background:var(--danger-bg); border:1px solid #f1b5b5; border-radius:18px; padding:24px; }
.purge-form { display:grid; grid-template-columns:minmax(240px,420px) auto; gap:16px; align-items:end; }
.purge-form label { margin-bottom:0; }
pre { background:#111; color:#f6f6f4; padding:16px; border-radius:12px; overflow:auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
@media (max-width: 1100px) { .user-inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .meta-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-form, .stats, .meta-grid, .user-inline-form, .purge-form { grid-template-columns:1fr; } .page-head { flex-direction:column; } .topbar { height:auto; flex-wrap:wrap; padding:14px; } }

/* v0.1.2 refinements */
.api-reference-page .wide-panel { max-width:none; width:100%; }
.api-reference-page pre { max-width:100%; }

/* v0.1.3 search and logs */
.compact-panel { padding:18px; }
.search-form { display:grid; grid-template-columns:minmax(260px, 1fr) auto; gap:16px; align-items:end; }
.search-form label { margin-bottom:0; }
.search-form .actions { gap:10px; }
.log-details { max-width:420px; overflow:auto; white-space:nowrap; }
.api-reference .panel, .api-reference table, .api-reference pre { width:100%; }
@media (max-width: 1100px) { .search-form { grid-template-columns:1fr; } }


/* v0.1.4 pagination and login spacing */
.login-form label { margin-bottom:16px; }
.login-actions { margin-top:18px; display:flex; justify-content:flex-start; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:18px 0 28px; color:var(--muted); flex-wrap:wrap; }
.pagination-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.button.disabled { opacity:.45; cursor:not-allowed; background:#f7f7f7; color:#777; }
.page-indicator { padding:0 8px; color:#333; font-weight:600; }
.search-form { grid-template-columns:minmax(260px, 1fr) minmax(140px, 180px) auto; }
@media (max-width: 1100px) { .search-form { grid-template-columns:1fr; } }


/* v0.1.5 search alignment and audit log polish */
.search-form {
  align-items: end;
}
.search-form label {
  margin-bottom: 0;
}
.search-actions,
.search-form .actions {
  align-self: end;
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 48px;
}
.search-form button,
.search-form .button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.section-head h2 {
  margin-bottom: 4px;
}
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.table-scroll table {
  border: 0;
  border-radius: 0;
}
.audit-table {
  table-layout: fixed;
  min-width: 1100px;
}
.audit-table th:nth-child(1), .audit-time { width: 190px; }
.audit-table th:nth-child(2), .audit-user { width: 210px; }
.audit-table th:nth-child(3), .audit-action { width: 170px; }
.audit-table th:nth-child(4), .audit-entity { width: 190px; }
.audit-table th:nth-child(5), .audit-ip { width: 150px; }
.audit-table th:nth-child(6), .audit-details { width: auto; }
.audit-time code,
.audit-ip code,
.audit-entity code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.audit-entity span,
.audit-entity code {
  display: block;
}
.audit-details details {
  max-width: 100%;
}
.audit-details summary {
  cursor: pointer;
  font-weight: 700;
  color: #333;
}
.audit-details pre {
  margin: 10px 0 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
}
.audit-panel .pagination {
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .section-head { flex-direction: column; }
  .search-form .actions { min-height: auto; }
}


/* v0.2.1 user management and batch naming polish */
.table-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.table-actions form { margin:0; }
.form-actions-row { gap:10px; justify-content:flex-start; align-items:center; }


/* v0.2.2 production polish */
.loading-panel {
  background: #fff8e1;
  border: 1px solid #efd27b;
  border-radius: 14px;
  padding: 14px 16px;
  color: #4d3b00;
}
.loading-panel strong,
.loading-panel span {
  display: block;
}
.loading-panel span {
  margin-top: 4px;
  color: #5f510f;
}
button:disabled,
button.is-loading {
  opacity: .72;
  cursor: wait;
}
.app-footer {
  max-width: 1180px;
  margin: 32px auto 24px;
  padding: 0 24px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .app-footer { flex-direction: column; }
}


/* v0.2.3 operational statuses and changelog */
.notice {
  padding: 12px 14px;
  border-radius: 10px;
  background: #eefaf0;
  color: #14532d;
  border: 1px solid #b7e4c7;
  margin: 16px 0;
}
.status-panel,
.bulk-status-panel {
  margin-bottom: 18px;
}
.status-form {
  display: grid;
  grid-template-columns: minmax(240px, 360px) auto;
  gap: 16px;
  align-items: end;
}
.status-form label {
  margin-bottom: 0;
}
.select-col {
  width: 44px;
  text-align: center;
}
.select-col input {
  width: auto;
}
.changelog-list {
  display: grid;
  gap: 16px;
}
.changelog-entry ul {
  margin: 0;
  padding-left: 22px;
}
.changelog-entry li {
  margin: 8px 0;
}
.changelog-head h2 {
  margin-bottom: 4px;
}
.app-footer {
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .status-form { grid-template-columns: 1fr; }
}


/* v0.2.4 operational status UI */
.action-strip {
  display:flex;
  align-items:end;
  gap:16px;
  justify-content:space-between;
  flex-wrap:wrap;
}

.action-strip__text {
  min-width:260px;
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.selected-count {
  display:inline-flex;
  width:max-content;
  margin-top:4px;
  padding:4px 8px;
  border-radius:999px;
  background:#eee;
  color:#444;
  font-size:12px;
  font-weight:700;
}

.inline-label {
  flex:0 1 280px;
  margin-bottom:0;
}

.action-strip button {
  white-space:nowrap;
}

button:disabled,
.button.disabled {
  opacity:.45;
  cursor:not-allowed;
}

.select-col {
  width:44px;
  text-align:center;
}

.select-col input {
  width:auto;
}

@media (max-width: 760px) {
  .action-strip {
    align-items:stretch;
  }
  .inline-label,
  .action-strip button {
    width:100%;
  }
}


/* v0.2.5 selection and alignment polish */
.action-strip {
  align-items: end;
}

.action-strip .inline-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.action-strip select,
.action-strip button {
  min-height: 52px;
}

.action-strip button {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-strip .inline-label select {
  margin-top: 0;
}

.select-col input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

@media (max-width: 760px) {
  .action-strip {
    align-items: stretch;
  }

  .action-strip button,
  .action-strip .inline-label {
    width: 100%;
  }
}


/* v0.2.6 footer vendor credit */
.app-footer {
  justify-content: space-between;
  align-items: center;
}

.vendor-credit a {
  color: var(--muted);
  text-decoration: none;
}

.vendor-credit a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .app-footer {
    align-items: flex-start;
  }
}


/* v0.2.7 footer placement and shorter credit polish */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  flex: 1 0 auto;
}

.app-footer {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 28px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  flex-shrink: 0;
}

.vendor-credit a {
  color: var(--muted);
  text-decoration: none;
}

.vendor-credit a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* v0.2.8 global lookup */
.lookup-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.lookup-form label {
  margin-bottom: 0;
}

.lookup-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.lookup-section {
  margin: 26px 0;
}

.lookup-section h2 {
  margin-bottom: 12px;
}

.lookup-table {
  min-width: 980px;
}

.lookup-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lookup-help-grid div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.lookup-help-grid strong,
.lookup-help-grid span {
  display: block;
}

.lookup-help-grid span {
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 760px) {
  .lookup-form,
  .lookup-help-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.2.9 lookup/search alignment and QR preview modal */
.search-form .actions,
.lookup-form .actions {
  align-self: end;
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 52px;
}

.search-form input,
.search-form select,
.search-form button,
.search-form .button,
.lookup-form input,
.lookup-form button,
.lookup-form .button {
  min-height: 52px;
}

.search-form button,
.search-form .button,
.lookup-form button,
.lookup-form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.lookup-form {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
}

.lookup-form label {
  margin-bottom: 0;
}

.lookup-form .actions {
  margin-bottom: 0;
}

.table-actions button.button {
  font: inherit;
}

.qr-modal {
  border: 0;
  padding: 0;
  background: transparent;
}

.qr-modal::backdrop {
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(4px);
}

.qr-modal__box {
  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}

.qr-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.qr-modal__head h2 {
  margin: 0;
}

.qr-modal__body {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-radius: 18px;
  background: #f6f6f4;
  border: 1px solid var(--line);
}

.qr-modal__body img {
  display: block;
  width: min(320px, 70vw);
  height: min(320px, 70vw);
  object-fit: contain;
  border-radius: 12px;
  background: #111;
  padding: 10px;
}

.qr-modal__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .search-form .actions,
  .lookup-form .actions {
    min-height: auto;
  }

  .lookup-form,
  .search-form {
    grid-template-columns: 1fr;
  }

  .lookup-form .actions,
  .search-form .actions {
    width: 100%;
  }

  .lookup-form button,
  .lookup-form .button,
  .search-form button,
  .search-form .button {
    flex: 1 1 auto;
  }
}


/* v0.2.10 lookup table polish */
.lookup-results-wrap {
  overflow-x: auto;
}

.lookup-table {
  min-width: 1160px;
  table-layout: auto;
}

.lookup-table th,
.lookup-table td {
  vertical-align: middle;
}

.lookup-table th {
  white-space: nowrap;
}

.lookup-table .lookup-col-public-id,
.lookup-table .lookup-col-status,
.lookup-table .lookup-col-batch,
.lookup-table .lookup-col-created,
.lookup-table .lookup-col-actions {
  white-space: nowrap;
}

.lookup-table .lookup-col-public-id {
  min-width: 96px;
}

.lookup-table .lookup-col-url {
  min-width: 260px;
  max-width: 460px;
}

.lookup-table .lookup-col-url a {
  display: inline-block;
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.lookup-table .lookup-col-batch {
  min-width: 170px;
}

.lookup-table .lookup-col-created {
  min-width: 150px;
}

.lookup-table .lookup-col-actions {
  min-width: 250px;
}

.lookup-table .lookup-col-actions.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.lookup-table .lookup-col-actions .button,
.lookup-table .lookup-col-actions button.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.lookup-batches-table {
  min-width: 980px;
}

.lookup-batches-table .lookup-col-actions {
  min-width: 130px;
}


/* v0.2.11 lookup table compact column polish */
.lookup-table {
  min-width: 1040px;
}

.lookup-table th,
.lookup-table td {
  padding-left: 12px;
  padding-right: 12px;
}

.lookup-table .lookup-col-public-id {
  min-width: 82px;
}

.lookup-table .lookup-col-url {
  min-width: 220px;
  max-width: 340px;
}

.lookup-table .lookup-col-url a {
  max-width: 340px;
}

.lookup-table .lookup-col-status {
  min-width: 130px;
}

.lookup-table .lookup-col-batch {
  min-width: 152px;
}

.lookup-table .lookup-col-created {
  min-width: 138px;
}

.lookup-table .lookup-col-actions {
  min-width: 132px;
}

.lookup-table .lookup-col-actions.table-actions {
  gap: 8px;
}

.lookup-table .compact-action-button,
.lookup-table button.compact-action-button {
  min-width: 58px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.lookup-batches-table {
  min-width: 900px;
}

.lookup-batches-table .lookup-col-actions {
  min-width: 82px;
}


/* v0.2.12 changelog search and individual QR downloads */
.qr-preview-button {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.qr-preview-button:hover .qr-thumb {
  box-shadow: 0 0 0 2px #111;
}

.download-cell {
  white-space: nowrap;
}

.download-cell.table-actions {
  flex-wrap: nowrap;
}

.download-cell .compact-action-button {
  min-width: 58px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qr-modal__actions {
  flex-wrap: wrap;
}

.changelog-entry ul {
  margin-bottom: 0;
}


/* v0.2.13 QR download UI polish */
.qr-modal__actions [data-qr-download-svg].primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.qr-modal__actions [data-qr-download-png] {
  background: #fff;
  color: #111;
  border-color: #bbb;
}

.download-cell.table-actions {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
}

.download-cell.table-actions .compact-action-button {
  margin-right: 8px;
}

.download-cell.table-actions .compact-action-button:last-child {
  margin-right: 0;
}

.qr-sample,
.download-cell {
  vertical-align: middle;
}

.qr-sample {
  border-bottom: 1px solid #eee;
}


/* v0.2.14 button system standardization */
:root {
  --btn-height: 48px;
  --btn-height-large: 52px;
  --btn-height-table: 44px;
  --btn-pad-x: 18px;
  --btn-pad-x-large: 22px;
  --btn-font-size: 15px;
  --btn-font-size-large: 16px;
  --btn-radius: 10px;
}

.button,
button {
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  vertical-align: middle;
}

.primary {
  font-weight: 800;
}

/* Search and form submit buttons */
.search-form button,
.search-form .button,
.lookup-form button,
.lookup-form .button,
.grid-form .actions button,
.user-create-action button,
.login-actions button {
  min-height: var(--btn-height-large);
  padding-left: var(--btn-pad-x-large);
  padding-right: var(--btn-pad-x-large);
  font-size: var(--btn-font-size-large);
}

.search-form .actions,
.lookup-form .actions {
  align-items: stretch;
}

/* Bulk status action bars */
.action-strip {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) auto;
}

.action-strip button {
  min-height: var(--btn-height-large);
  padding-left: var(--btn-pad-x-large);
  padding-right: var(--btn-pad-x-large);
  font-size: var(--btn-font-size-large);
  min-width: 180px;
}

.action-strip .inline-label {
  flex: 0 1 300px;
}

/* Table action buttons: Edit / Toggle / downloads / compact actions */
.table-actions .button,
.table-actions button,
.download-row .button,
.pagination-actions .button {
  min-height: var(--btn-height-table);
  padding-left: 14px;
  padding-right: 14px;
  font-size: 15px;
  font-weight: 700;
}

.table-actions form,
.table-actions form button {
  display: inline-flex;
  align-items: center;
}

.table-actions form button {
  margin: 0;
}

.table-actions .compact-action-button,
.table-actions button.compact-action-button,
.download-cell .compact-action-button,
.lookup-table .compact-action-button,
.lookup-table button.compact-action-button {
  min-height: 42px;
  min-width: 56px;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 15px;
}

/* Keep intentionally icon/image-like QR preview buttons compact */
.qr-preview-button {
  min-height: 0;
  min-width: 0;
  padding: 0;
  font-size: inherit;
  line-height: normal;
}

/* Logout stays visually compact in topbar */
.logout button {
  min-height: 42px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 15px;
}

@media (max-width: 760px) {
  .search-form button,
  .search-form .button,
  .lookup-form button,
  .lookup-form .button,
  .grid-form .actions button,
  .user-create-action button,
  .action-strip button {
    width: 100%;
  }

  .action-strip .inline-label {
    flex: 1 1 auto;
  }
}


/* v0.2.15 capacity and user stats */
.dashboard-stats {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(330px, 1fr);
  align-items: stretch;
}

.user-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capacity-stat {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.capacity-head strong {
  font-size: 16px;
  line-height: 1.2;
}

.capacity-head span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.capacity-mini-table {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.capacity-mini-table th,
.capacity-mini-table td {
  border: 0;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.capacity-mini-table th {
  background: transparent;
  color: var(--muted);
  letter-spacing: .04em;
  font-size: 10px;
}

.capacity-mini-table th:nth-child(2),
.capacity-mini-table th:nth-child(3),
.capacity-mini-table td:nth-child(2),
.capacity-mini-table td:nth-child(3) {
  text-align: right;
}

.capacity-mini-table .capacity-total td {
  border-top: 1px solid #eee;
  padding-top: 5px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .dashboard-stats,
  .user-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-stats,
  .user-stats {
    grid-template-columns: 1fr;
  }
}


/* v0.2.16 capacity tile readability polish */
.capacity-stat {
  justify-content: center;
}

.capacity-stat .capacity-mini-table th,
.capacity-stat .capacity-mini-table td {
  font-size: 15px;
  line-height: 1.22;
  padding-top: 2px;
  padding-bottom: 2px;
}

.capacity-stat .capacity-mini-table th {
  font-size: 13px;
}

.capacity-stat .capacity-mini-table .capacity-total td {
  padding-top: 5px;
}


/* v0.2.17 QR preview clarity + mobile table polish */
/* QR previews must show the real generated QR geometry.
   The UI container may be neutral, but the image itself must not add
   artificial dark padding that can be mistaken for quiet zone. */
.batch-links-table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease;
}

.batch-links-table tbody tr:hover {
  background: #fafafa;
  box-shadow: inset 0 0 0 1px #eeeeee;
}

.qr-preview-button {
  background: #f7f7f5;
  border: 1px solid #dededb;
  padding: 8px;
  border-radius: 12px;
  min-height: 0;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.qr-preview-button:hover {
  background: #f2f2f0;
  border-color: #cfcfcb;
  box-shadow: 0 0 0 2px #ececea;
}

.qr-preview-button:focus-visible {
  outline: 3px solid rgba(0, 96, 220, .28);
  outline-offset: 3px;
}

.qr-preview-button:hover .qr-thumb {
  box-shadow: none;
}

.qr-thumb {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: block;
}

/* Modal: neutral preview container; image has no fake quiet-zone padding. */
.qr-modal__body {
  background: #f7f7f5;
  border: 1px solid #dededb;
  padding: 18px;
}

.qr-modal__body img {
  display: block;
  width: min(320px, 70vw);
  height: min(320px, 70vw);
  object-fit: contain;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* Keep download cell visually aligned with the row, without a separate internal divider. */
.batch-links-table .download-cell.table-actions {
  border-bottom: inherit;
  vertical-align: middle;
}

/* Batch list table: IDs are identifiers, so they should not wrap into broken pieces.
   Use horizontal scroll on narrow screens instead. */
.batches-table {
  min-width: 900px;
}

.batches-table .batch-id-col,
.batches-table th.batch-id-col,
.batches-table td.batch-id-col,
.batches-table .batch-id-col a {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.batches-table th.batch-id-col {
  min-width: 170px;
}

.batches-table td.batch-id-col {
  min-width: 170px;
}

@media (max-width: 760px) {
  .batches-table {
    min-width: 920px;
  }
}


/* v0.2.18 follow-up: activate actual table classes + fully square QR image */
.batch-links-table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease;
}

.batch-links-table tbody tr:hover {
  background: #fafafa !important;
  box-shadow: inset 0 0 0 1px #eeeeee;
}

.batch-links-table tbody tr:hover td {
  background: transparent;
}

.batch-links-table .qr-thumb,
.qr-thumb {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.qr-modal__body img {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.batches-table {
  min-width: 920px;
  table-layout: auto;
}

.batches-table th.batch-id-col,
.batches-table td.batch-id-col {
  min-width: 190px;
}

.batches-table th.batch-id-col,
.batches-table td.batch-id-col,
.batches-table th.batch-id-col a,
.batches-table td.batch-id-col a {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: manual !important;
}

.batches-table .batch-id-col a {
  display: inline-block;
}


/* v0.2.19 responsive navigation + table row states */
.mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  width: 48px;
  min-height: 48px;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.menu-icon {
  width: 20px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.menu-icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: #111;
}

.mobile-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  padding: 12px;
  z-index: 30;
}

.mobile-nav {
  display: grid;
  gap: 4px;
}

.mobile-nav a {
  text-decoration: none;
  color: #111;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
}

.mobile-nav a:hover {
  background: #f5f5f3;
}

.mobile-logout {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  display: grid;
  gap: 10px;
}

.mobile-logout span {
  color: var(--muted);
  font-size: 14px;
  padding: 0 4px;
}

.mobile-logout button {
  width: 100%;
}

/* Make table navigation clearer everywhere without changing the data layout. */
table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease;
}

table tbody tr:hover {
  background: #fafafa;
}

.table-scroll table tbody tr:hover {
  box-shadow: inset 0 0 0 1px #eeeeee;
}

table tbody tr.is-selected,
.table-scroll table tbody tr.is-selected {
  background: #f3f3f1;
  box-shadow: inset 0 0 0 1px #ddddda;
}

.capacity-mini-table tbody tr:hover {
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  .topbar {
    min-height: 72px;
    gap: 12px;
    justify-content: space-between;
    padding: 0 18px;
  }

  .desktop-nav,
  .desktop-logout {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}