:root { --card-logo-size: 40px; --card-code-height: 220px; --barcode-background: #fff; --barcode-foreground: #000; }
#screen-cards { min-height: 0; }
#screen-cards .button { display: flex; align-items: center; justify-content: center; gap: var(--gap-icon); }
#screen-cards .button.secondary { background: transparent; border: 1px solid var(--border); color: var(--accent); }
#screen-cards .topbar h1 { display: flex; align-items: center; gap: var(--gap-icon); flex: 1; min-width: 0; }
.card-heading { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.card-heading .list-title { min-width: 0; }
.cards-shortcut { display: flex; align-items: center; gap: var(--gap-icon); width: 100%; margin: 0 0 var(--gap-plate); padding: var(--pad-row-y) var(--pad-row-x); border-radius: var(--radius-plate); background: var(--surface-1); color: var(--text-1); text-align: start; }
.cards-shortcut span { flex: 1; }
.cards-content { padding: var(--pad-row-y) 0; }
.cards-content .error { padding: var(--pad-row-y) var(--pad-row-x); }
.cards-content input[type=search] { width: 100%; margin-bottom: var(--gap-icon); }
.cards-wallet { padding-bottom: 88px; }
.cards-online-hint { padding-inline: var(--pad-row-x); }
.card-offline { display: inline-flex; color: var(--text-2); }
.card-logo { display: inline-flex; flex: 0 0 var(--card-logo-size); width: var(--card-logo-size); height: var(--card-logo-size); align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-chip); background: var(--surface-2); color: var(--text-1); font-size: var(--fs-title); }
.card-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--barcode-background); }
.card-logo.is-small { --card-logo-size: 36px; border-radius: 11px; }
.store-card-plate > .icon { margin-inline-end: var(--pad-row-x); color: var(--text-2); }
.card-presentation { display: flex; flex-direction: column; align-items: center; gap: var(--gap-icon); padding-inline: var(--pad-row-x); }
.card-code { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: var(--card-code-height); overflow: hidden; padding: var(--pad-row-y); border-radius: var(--radius-plate); background: var(--barcode-background); color: var(--barcode-foreground); text-align: center; }
.card-code[hidden] { display: none; }
button.card-code { border: 1px solid var(--border); cursor: zoom-in; font: inherit; }
button.card-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-code canvas { display: block; image-rendering: pixelated; flex-shrink: 0; }
.card-number { overflow-wrap: anywhere; user-select: text; text-align: center; }
.card-editor { display: flex; flex-direction: column; gap: var(--gap-icon); padding-inline: var(--pad-row-x); }
.card-editor label { display: flex; flex-direction: column; gap: var(--gap-plate); }
.card-editor input,.card-editor textarea,.card-editor select { width: 100%; }
.card-editor input:not([type=file]),.card-editor select { min-height: var(--tap-min); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1); color: var(--text-1); font: inherit; }
.card-logo-editor { display: flex; align-items: center; gap: var(--gap-icon); }
.card-logo-actions { display: flex; flex: 1; min-width: 0; }
.card-logo-actions .link { flex: 1; min-width: 0; padding-inline: 4px; }
.cards-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: var(--pad-row-x); border: 1px solid var(--border); border-radius: var(--radius-dialog); background: var(--surface-1); color: var(--text-1); }
.cards-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.cards-dialog h2 { margin-top: 0; font-size: var(--fs-title); }
.cards-dialog-body { overflow: auto; max-height: 65dvh; }
.cards-dialog-actions { display: flex; justify-content: flex-end; gap: var(--gap-icon); margin-top: var(--pad-row-x); }
.card-recipient { display: flex; align-items: center; gap: var(--gap-icon); padding-block: var(--pad-row-y); }
.card-recipient input { width: auto; accent-color: var(--accent); }
.card-camera { width: 100%; max-height: 50dvh; }
.cards-fullscreen { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
.cards-fullscreen form { height: 100%; display: flex; flex-direction: column; }
.cards-fullscreen .cards-dialog-body { flex: 1; max-height: none; min-height: 0; }
.card-code-expanded { height: 100%; }
@media (orientation: portrait) {
	.cards-fullscreen .card-code-expanded { position: absolute; left: 50%; top: 50%; width: calc(100dvh - 150px); height: calc(100vw - 32px); transform: translate(-50%, -50%) rotate(90deg); }
}