/* Primitive tokens */
:root {
  --tnr-white: #ffffff;
  --tnr-slate-25: #f8fafc;
  --tnr-slate-50: #f1f5f9;
  --tnr-slate-100: #e2e8f0;
  --tnr-slate-200: #cbd5e1;
  --tnr-slate-400: #64748b;
  --tnr-slate-500: #475569;
  --tnr-slate-700: #334155;
  --tnr-slate-800: #1e293b;
  --tnr-slate-900: #0f172a;
  --tnr-blue-50: #eff6ff;
  --tnr-blue-200: #bfdbfe;
  --tnr-blue-600: #2563eb;
  --tnr-blue-700: #1d4ed8;
  --tnr-green-50: #ecfdf5;
  --tnr-green-200: #a7f3d0;
  --tnr-green-700: #047857;
  --tnr-amber-50: #fffbeb;
  --tnr-amber-200: #fde68a;
  --tnr-amber-800: #92400e;
  --tnr-red-50: #fef2f2;
  --tnr-red-200: #fecaca;
  --tnr-red-700: #b91c1c;
  --tnr-space-1: .25rem;
  --tnr-space-2: .5rem;
  --tnr-space-3: .75rem;
  --tnr-space-4: 1rem;
  --tnr-space-5: 1.25rem;
  --tnr-space-6: 1.5rem;
  --tnr-space-8: 2rem;
  --tnr-radius-sm: .25rem;
  --tnr-radius-md: .5rem;
  --tnr-radius-lg: .75rem;
  --tnr-shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --tnr-shadow-md: 0 8px 24px rgb(15 23 42 / .08);
  --tnr-duration-fast: 150ms;
}

/* Semantic tokens */
:root {
  --color-page: var(--tnr-slate-25);
  --color-surface: var(--tnr-white);
  --color-surface-muted: var(--tnr-slate-50);
  --color-text: var(--tnr-slate-900);
  --color-text-muted: var(--tnr-slate-500);
  --color-border: var(--tnr-slate-100);
  --color-primary: var(--tnr-blue-600);
  --color-primary-hover: var(--tnr-blue-700);
  --color-focus: var(--tnr-blue-600);
  --color-danger: var(--tnr-red-700);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* Component tokens */
:root {
  --button-height: 2.75rem;
  --button-radius: var(--tnr-radius-md);
  --input-height: 2.75rem;
  --input-border: var(--color-border);
  --panel-radius: var(--tnr-radius-lg);
  --panel-padding: var(--tnr-space-5);
  --badge-radius: 999px;
  --sidebar-width: 16rem;
}

* { box-sizing: border-box; }
html { min-width: 20rem; background: var(--color-page); color: var(--color-text); font-family: var(--font-sans); line-height: 1.5; }
body { margin: 0; min-height: 100dvh; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.svg-sprite { position: absolute; overflow: hidden; }
.icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-sm { width: .875rem; height: .875rem; }
.skip-link { position: fixed; left: var(--tnr-space-3); top: var(--tnr-space-3); z-index: 1000; transform: translateY(-200%); background: var(--color-text); color: var(--tnr-white); padding: var(--tnr-space-2) var(--tnr-space-3); border-radius: var(--tnr-radius-sm); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: var(--tnr-space-5) var(--tnr-space-3); background: var(--tnr-slate-900); color: var(--tnr-slate-100); }
.brand { display: flex; align-items: center; gap: var(--tnr-space-3); padding: 0 var(--tnr-space-2) var(--tnr-space-5); }
.brand span:last-child { display: grid; }
.brand small, .user-summary small { color: var(--tnr-slate-200); font-size: .75rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--tnr-radius-md); background: var(--tnr-blue-600); color: var(--tnr-white); font-weight: 800; letter-spacing: -.04em; }
.brand-mark-large { width: 2.75rem; height: 2.75rem; }
.nav-list { display: grid; gap: var(--tnr-space-1); }
.nav-link { min-height: 2.75rem; display: flex; align-items: center; gap: var(--tnr-space-3); padding: var(--tnr-space-2) var(--tnr-space-3); border-radius: var(--tnr-radius-md); color: var(--tnr-slate-200); text-decoration: none; transition: background-color var(--tnr-duration-fast), color var(--tnr-duration-fast); }
.nav-link:hover:not(.is-disabled), .nav-link.is-active { background: rgb(255 255 255 / .1); color: var(--tnr-white); }
.nav-link .badge { margin-left: auto; }
.nav-link.is-disabled { opacity: .58; cursor: not-allowed; }
.nav-group { min-width: 0; }
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-summary::after { content: "›"; margin-left: auto; font-size: 1.15rem; line-height: 1; transition: transform var(--tnr-duration-fast); }
.nav-group[open] .nav-group-summary::after { transform: rotate(90deg); }
.nav-submenu { display: grid; gap: var(--tnr-space-1); margin: var(--tnr-space-1) 0 var(--tnr-space-2) 1.45rem; padding-left: var(--tnr-space-4); border-left: 1px solid rgb(255 255 255 / .14); }
.nav-sublink { min-height: 2.25rem; display: flex; align-items: center; padding: var(--tnr-space-2) var(--tnr-space-3); border-radius: var(--tnr-radius-md); color: var(--tnr-slate-200); font-size: .875rem; text-decoration: none; }
.nav-sublink:hover, .nav-sublink.is-active { background: rgb(255 255 255 / .1); color: var(--tnr-white); }
.sidebar-footer { margin-top: auto; display: grid; gap: var(--tnr-space-3); padding: var(--tnr-space-4) var(--tnr-space-2) 0; border-top: 1px solid rgb(255 255 255 / .1); }
.user-summary { display: grid; }
.main-content { min-width: 0; min-height: 100dvh; padding: var(--tnr-space-8); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tnr-space-4); margin-bottom: var(--tnr-space-6); }
.page-header h1, .auth-card h1, .error-card h1 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.page-header p { margin: var(--tnr-space-1) 0 0; }
.eyebrow { margin: 0 0 var(--tnr-space-1); color: var(--tnr-blue-700); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.muted { color: var(--color-text-muted); }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tnr-space-4); margin-bottom: var(--tnr-space-5); }
.metric-card, .panel, .auth-card, .error-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--panel-radius); box-shadow: var(--tnr-shadow-sm); }
.metric-card { display: grid; gap: var(--tnr-space-1); padding: var(--tnr-space-4); }
.metric-label, .metric-meta { color: var(--color-text-muted); font-size: .75rem; }
.metric-value { font-size: 1.15rem; overflow-wrap: anywhere; }
.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.panel { margin-bottom: var(--tnr-space-5); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--panel-padding); border-bottom: 1px solid var(--color-border); }
.panel-header h2 { margin: 0; font-size: 1rem; }
.panel-header p { margin: var(--tnr-space-1) 0 0; font-size: .875rem; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist > div { display: flex; align-items: flex-start; gap: var(--tnr-space-3); padding: var(--tnr-space-4) var(--tnr-space-5); border-bottom: 1px solid var(--color-border); }
.checklist > div:nth-child(odd) { border-right: 1px solid var(--color-border); }
.checklist span { display: grid; }
.checklist small { color: var(--color-text-muted); }
.status-success { color: var(--tnr-green-700); margin-top: .2rem; }

.badge { display: inline-flex; align-items: center; gap: var(--tnr-space-1); width: fit-content; padding: .2rem .55rem; border: 1px solid transparent; border-radius: var(--badge-radius); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.badge-neutral { background: var(--tnr-slate-50); border-color: var(--tnr-slate-100); color: var(--tnr-slate-700); }
.sidebar .badge-neutral { background: rgb(255 255 255 / .1); border-color: transparent; color: var(--tnr-slate-200); }
.badge-success { background: var(--tnr-green-50); border-color: var(--tnr-green-200); color: var(--tnr-green-700); }
.badge-warning { background: var(--tnr-amber-50); border-color: var(--tnr-amber-200); color: var(--tnr-amber-800); }
.badge-danger { background: var(--tnr-red-50); border-color: var(--tnr-red-200); color: var(--tnr-red-700); }
.alert { display: flex; align-items: flex-start; gap: var(--tnr-space-3); padding: var(--tnr-space-4); border: 1px solid; border-radius: var(--tnr-radius-md); }
.alert p { margin: .15rem 0 0; font-size: .875rem; }
.alert-info { background: var(--tnr-blue-50); border-color: var(--tnr-blue-200); color: var(--tnr-slate-800); }
.alert-success { background: var(--tnr-green-50); border-color: var(--tnr-green-200); color: var(--tnr-green-700); }
.alert-danger { background: var(--tnr-red-50); border-color: var(--tnr-red-200); color: var(--tnr-red-700); }
.page-alert { margin-bottom: var(--tnr-space-5); }

.button { min-height: var(--button-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--tnr-space-2); padding: 0 var(--tnr-space-4); border: 1px solid transparent; border-radius: var(--button-radius); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--tnr-duration-fast), border-color var(--tnr-duration-fast), color var(--tnr-duration-fast); }
.button-primary { background: var(--color-primary); color: var(--tnr-white); }
.button-primary:hover { background: var(--color-primary-hover); }
.button-secondary { background: var(--tnr-slate-50); border-color: var(--color-border); color: var(--color-text); }
.button-secondary:hover { background: var(--tnr-slate-100); }
.button-danger { background: var(--color-danger); color: var(--tnr-white); }
.button-danger:hover { background: var(--tnr-red-700); }
.button-ghost { background: transparent; color: inherit; }
.button-ghost:hover { background: rgb(255 255 255 / .08); }
.button-full { width: 100%; }
.button-compact { min-height: 2.25rem; padding-inline: var(--tnr-space-3); font-size: .8125rem; }

.auth-shell { display: grid; place-items: center; padding: var(--tnr-space-4); background: linear-gradient(145deg, var(--tnr-slate-25), var(--tnr-blue-50)); }
.auth-shell .main-content { width: min(100%, 27rem); min-height: auto; padding: 0; }
.auth-card { padding: var(--tnr-space-6); box-shadow: var(--tnr-shadow-md); }
.auth-heading { display: flex; align-items: center; gap: var(--tnr-space-3); }
.auth-card > .muted { margin: var(--tnr-space-3) 0 var(--tnr-space-5); }
.auth-card .alert { margin-bottom: var(--tnr-space-4); }
.form-stack { display: grid; gap: var(--tnr-space-4); }
.content-narrow { max-width: 42rem; }
.panel-body { display: grid; gap: var(--tnr-space-4); padding: var(--panel-padding); }
.panel-body > .alert { margin-bottom: 0; }
.field { display: grid; gap: var(--tnr-space-2); }
.field label { font-size: .875rem; font-weight: 700; }
.field input, .field select, .field textarea, .inline-form select { width: 100%; min-height: var(--input-height); padding: 0 var(--tnr-space-3); border: 1px solid var(--input-border); border-radius: var(--tnr-radius-md); background: var(--tnr-white); color: var(--color-text); }
.field textarea { min-height: auto; padding-block: var(--tnr-space-2); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover, .inline-form select:hover { border-color: var(--tnr-slate-200); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .inline-form select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.field-help { color: var(--color-text-muted); font-size: .75rem; }
.form-actions { display: flex; justify-content: flex-start; padding-top: var(--tnr-space-1); }
.login-method-actions { display: flex; flex-wrap: wrap; gap: var(--tnr-space-2); align-items: flex-end; }
.header-actions { display: flex; align-items: center; gap: var(--tnr-space-3); flex-wrap: wrap; }
.readonly-control { display: flex; align-items: center; min-height: var(--input-height); padding: 0 var(--tnr-space-3); border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); background: var(--color-surface-muted); }
.confirmation-list { border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); overflow: hidden; }
.readonly-setting { display: grid; gap: var(--tnr-space-1); }
.readonly-setting strong { font-size: 1.1rem; }
.filter-bar { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto; align-items: end; gap: var(--tnr-space-4); padding: var(--panel-padding); }
.filter-bar-compact { grid-template-columns: minmax(12rem, 24rem) auto; justify-content: start; }
.compact-field { gap: var(--tnr-space-1); }
.filter-actions { display: flex; gap: var(--tnr-space-2); }
.table-link { text-decoration-color: var(--tnr-slate-200); text-underline-offset: .18em; }
.table-link:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }
.break-value { overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tnr-space-5); }
.detail-panel { min-width: 0; }
.detail-list { display: grid; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr); gap: var(--tnr-space-4); padding: var(--tnr-space-3) var(--panel-padding); border-bottom: 1px solid var(--color-border); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--color-text-muted); font-size: .8125rem; font-weight: 700; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.detail-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-list-wide > div { grid-template-columns: minmax(8rem, .75fr) minmax(0, 1.25fr); }
.settings-list { display: grid; }
.settings-item { border-bottom: 1px solid var(--color-border); }
.settings-item:last-child { border-bottom: 0; }
.settings-item summary { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--tnr-space-4); padding: var(--tnr-space-3) var(--panel-padding); cursor: pointer; }
.settings-item summary:hover { background: var(--tnr-slate-25); }
.settings-item summary > span:first-child { display: grid; }
.settings-item summary small { color: var(--color-text-muted); }
.settings-form { display: grid; gap: var(--tnr-space-4); padding: var(--tnr-space-5); background: var(--color-surface-muted); border-top: 1px solid var(--color-border); }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tnr-space-4); }
.form-grid.phrase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.database-connection-form .field { min-width: 0; align-content: start; }
.database-backend-field { width: 100%; max-width: 24rem; }
.database-connection-section { min-width: 0; margin: 0; padding: var(--tnr-space-4) 0 0; border: 0; border-top: 1px solid var(--color-border); }
.database-connection-section legend { padding: 0 var(--tnr-space-3) 0 0; color: var(--color-text-muted); font-size: .8125rem; font-weight: 700; }
.database-connection-form:has(#database_backend option[value="sqlite"]:checked) .database-network-settings,
.database-connection-form:has(#database_backend option:checked:not([value="sqlite"])) .database-sqlite-settings,
.database-connection-form:has(#database_backend option:checked:not([value="mongodb"])) .database-mongodb-settings { display: none; }
.database-connection-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tnr-space-3); padding-top: var(--tnr-space-4); border-top: 1px solid var(--color-border); }
.database-connection-footer .form-actions { flex-wrap: wrap; gap: var(--tnr-space-2); margin-left: auto; padding-top: 0; }
.database-connection-footer .check-field { font-size: .875rem; font-weight: 400; }
.check-field { display: inline-flex; align-items: center; gap: var(--tnr-space-2); width: fit-content; min-height: 2.75rem; font-weight: 700; }
.check-field input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); }
.route-selector { display: grid; gap: var(--tnr-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.route-selector legend { margin-bottom: var(--tnr-space-2); font-size: .875rem; font-weight: 800; }
.route-option { display: flex; align-items: flex-start; gap: var(--tnr-space-3); min-height: 3.5rem; padding: var(--tnr-space-3); border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); cursor: pointer; transition: background-color var(--tnr-duration-fast), border-color var(--tnr-duration-fast); }
.route-option:hover { background: var(--tnr-blue-50); border-color: var(--tnr-blue-200); }
.route-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.route-option input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--color-primary); }
.route-option span { display: grid; min-width: 0; }
.route-option small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.route-option.is-disabled { cursor: not-allowed; opacity: .58; }
.route-option.is-disabled:hover { background: transparent; border-color: var(--color-border); }
.publication-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tnr-space-4); padding: var(--panel-padding); }
.publication-preview { min-width: 0; padding: var(--tnr-space-4); border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); background: var(--color-surface-muted); }
.publication-preview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tnr-space-3); }
.publication-preview > header > div { display: grid; min-width: 0; }
.publication-preview > header small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.publication-preview pre { max-height: 24rem; margin: var(--tnr-space-4) 0; padding: var(--tnr-space-4); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); background: var(--tnr-white); color: var(--color-text); font: inherit; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-list-compact { border: 1px solid var(--color-border); border-radius: var(--tnr-radius-md); }
.inline-form { min-width: 11rem; }
.security-note { margin: var(--tnr-space-5) 0 0; color: var(--color-text-muted); font-size: .75rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: var(--tnr-space-3) var(--tnr-space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
th { background: var(--color-surface-muted); color: var(--color-text-muted); font-size: .75rem; font-weight: 800; letter-spacing: .025em; }
tbody tr:hover { background: var(--tnr-slate-25); }
.table-subtext { display: block; color: var(--color-text-muted); }
.digest-cell { max-width: 18rem; overflow-wrap: anywhere; font-size: .75rem; }
.message-preview { max-width: 42rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.empty-state { display: grid; place-items: center; gap: var(--tnr-space-1); min-height: 10rem; color: var(--color-text-muted); text-align: center; }
.error-card { max-width: 34rem; margin: 10vh auto; padding: var(--tnr-space-8); text-align: center; }
.error-icon { width: 2rem; height: 2rem; color: var(--color-danger); }
.error-card .button { margin-top: var(--tnr-space-4); }
.page-footer { padding-top: var(--tnr-space-8); color: var(--color-text-muted); font-size: .75rem; text-align: center; }
.auth-shell .page-footer { padding-top: var(--tnr-space-4); }

@media (max-width: 64rem) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid, .form-grid.phrase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publication-preview-list { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: var(--tnr-space-3); }
  .brand { padding-bottom: var(--tnr-space-3); }
  .nav-list { display: flex; overflow-x: auto; padding-bottom: var(--tnr-space-1); }
  .nav-link { flex: 0 0 auto; }
  .nav-group { flex: 0 0 auto; }
  .nav-link.is-disabled, .sidebar-footer { display: none; }
  .main-content { min-height: auto; padding: var(--tnr-space-5) var(--tnr-space-4); }
  .checklist { grid-template-columns: 1fr; }
  .checklist > div:nth-child(odd) { border-right: 0; }
  .detail-grid, .detail-list-wide { grid-template-columns: 1fr; }
  .filter-bar, .form-grid, .form-grid.phrase-grid, .form-grid.two-columns { grid-template-columns: 1fr; }
  .filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
  .metrics { grid-template-columns: 1fr; }
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header > .badge { align-self: flex-start; }
  .auth-card { padding: var(--tnr-space-5); }
  .detail-list > div { grid-template-columns: 1fr; gap: var(--tnr-space-1); }
  .filter-actions { flex-direction: column; }
  .database-connection-footer .form-actions { width: 100%; margin-left: 0; }
  .database-connection-footer .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnr-space-2);
  justify-content: flex-end;
}

.panel-section-divider {
  border-top: 1px solid var(--color-border);
}

.inline-panel-header {
  padding: 0;
  margin-bottom: var(--tnr-space-4);
}

.qr-login {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: var(--tnr-space-6);
  align-items: center;
  margin-bottom: var(--tnr-space-4);
}

.qr-image-frame {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: var(--tnr-space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--tnr-radius-md);
}

.qr-image {
  display: block;
  width: min(100%, 340px);
  height: auto;
  image-rendering: pixelated;
}

.qr-instructions {
  display: grid;
  gap: var(--tnr-space-3);
  align-content: center;
}

@media (max-width: 720px) {
  .badge-row {
    justify-content: flex-start;
  }

  .qr-login {
    grid-template-columns: 1fr;
  }
}