.clickable-row { cursor: pointer; }
.clickable-row:focus-visible { position: relative; z-index: 1; box-shadow: inset var(--focus-ring); }
.check-control { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.82rem; font-weight: 650; cursor: pointer; }
.check-control input { width: 17px; height: 17px; accent-color: var(--brand-primary); }
.danger-text { color: var(--danger); }
.table-subtext { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.72rem; }
.row-actions, .chip-list { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.chip-list { justify-content: flex-start; }

.wallet-sheet-intro, .receive-summary {
  display: flex;
  align-items: center;
  gap: 13px;
}

.wallet-sheet-intro > div, .receive-summary > .asset-cell { flex: 1; }
.wallet-sheet-intro p { color: var(--text-secondary); }
.asset-icon-lg { width: 48px; height: 48px; flex-basis: 48px; }

.qr-box {
  width: min(100%, 250px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  overflow: hidden;
  padding: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
}

.qr-box svg { width: 100%; height: 100%; }
.qr-box-large { width: min(100%, 300px); }
.qr-unavailable { color: #111827; font-size: 4rem; }

.address-box {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-inset);
}

.address-box span { color: var(--text-muted); font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.address-box code { overflow-wrap: anywhere; color: var(--text-primary); font: 0.82rem/1.5 var(--font-mono); }

.treasury-funding-detail { display: grid; gap: 18px; }
.treasury-funding-detail .notice { margin: 0; }
.treasury-funding-detail .receive-layout { grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); width: 100%; max-width: none; padding: 0; align-items: center; }
.treasury-funding-detail .receive-copy { display: grid; gap: 12px; min-width: 0; }
.treasury-funding-detail .receive-copy h3 { margin: 0; }
.treasury-funding-detail .receive-copy p { margin: 0; color: var(--text-secondary); }
.treasury-token-note, .treasury-confirmation-note { display: flex; gap: 9px; align-items: flex-start; margin: 0; color: var(--text-secondary); font-size: 0.83rem; line-height: 1.55; }
.treasury-token-note i, .treasury-confirmation-note i { flex: 0 0 auto; margin-top: 3px; color: var(--brand-primary); }

@media (max-width: 620px) {
  .treasury-funding-detail .receive-layout { grid-template-columns: 1fr; }
  .treasury-funding-detail .qr-box { width: min(100%, 220px); }
}

.operation-grid { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(380px, 1.28fr); gap: 18px; align-items: start; }
.receive-card { min-height: 520px; }
.receive-layout { width: min(100%, 500px); display: grid; gap: 18px; margin-inline: auto; padding: 28px; }
.receive-summary { justify-content: space-between; }

.operation-lock h3 { margin-bottom: 3px; color: var(--text-primary); }
.operation-layout { display: grid; grid-template-columns: minmax(390px, 0.9fr) minmax(380px, 1.1fr); gap: 18px; align-items: start; }
.operation-form-card, .swap-card, .operation-review { min-height: 480px; }
.operation-form, .security-form, .profile-form, .dialog-form { display: grid; gap: 18px; }
.operation-review { position: sticky; top: calc(var(--topbar-height) + 20px); }
.empty-review { min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px; text-align: center; }
.empty-review p { max-width: 390px; color: var(--text-secondary); }

.amount-input { position: relative; display: flex; align-items: center; }
.amount-input .input { padding-right: 126px; }
.amount-input button { position: absolute; right: 62px; padding: 5px 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-primary); font-size: 0.7rem; font-weight: 800; cursor: pointer; }
.amount-input strong { position: absolute; right: 13px; color: var(--text-secondary); font-size: 0.78rem; }

.quote-panel { display: grid; gap: 18px; padding: 22px; }
.quote-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.quote-heading > div { display: grid; gap: 4px; }
.quote-rows { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--border-subtle); }
.quote-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 14px; background: var(--bg-surface); }
.quote-row > span { color: var(--text-secondary); }
.quote-row > span small { display: block; max-width: 310px; margin-top: 2px; color: var(--text-muted); font-size: 0.68rem; }
.quote-row strong { text-align: right; }
.quote-total { background: var(--brand-soft); }
.quote-total > span, .quote-total strong { color: var(--text-primary); font-size: 1rem; }

.swap-form { position: relative; gap: 10px; padding: 22px; }
.swap-box { position: relative; display: grid; gap: 15px; padding: 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface-2); }
.swap-box:focus-within { border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.swap-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 0.78rem; font-weight: 650; }
.swap-input-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, auto); gap: 10px; align-items: center; }
.swap-amount { min-width: 0; border: 0; background: transparent; color: var(--text-primary); font-size: clamp(1.6rem, 3.3vw, 2.35rem); font-weight: 760; letter-spacing: -0.04em; outline: 0; }
.swap-output-placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-select select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--bg-elevated); color: var(--text-primary); font-weight: 750; cursor: pointer; }
.asset-select option { background: var(--bg-elevated); color: var(--text-primary); }
.text-button { justify-self: start; padding: 4px 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-primary); font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.swap-reverse { position: relative; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; margin: -19px auto; border: 5px solid var(--bg-surface); border-radius: 50%; background: var(--brand-primary); color: #fff; cursor: pointer; }
.slippage-field { margin-top: 12px; }
.swap-output { display: grid; gap: 5px; padding: 17px; border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border-subtle)); border-radius: var(--radius-md); background: var(--brand-soft); }
.swap-output span, .swap-output small { color: var(--text-secondary); }
.swap-output strong { font-size: 1.55rem; }

.conversion-layout { align-items: stretch; }
.conversion-card { min-width: 0; }
.conversion-network-notice { margin: 0 0 14px; }
.conversion-form { min-height: 480px; padding: 22px; }
.conversion-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid var(--border-subtle); border-radius: 13px; background: var(--bg-surface-2); }
.conversion-mode-button { min-width: 0; min-height: 43px; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .82rem; font-weight: 760; cursor: pointer; }
.conversion-mode-button:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-elevated); }
.conversion-mode-button.is-selected { border-color: var(--brand-primary); background: var(--brand-soft); color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.conversion-mode-button:disabled { cursor: not-allowed; opacity: .48; }
.conversion-mode-button:focus-visible { box-shadow: var(--focus-ring); }
.conversion-selection-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.conversion-selected { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface-2); }
.conversion-selected > div { min-width: 0; display: grid; gap: 3px; }
.conversion-selected strong, .conversion-selected small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversion-selected small { color: var(--text-secondary); }
.conversion-selected .asset-icon { flex: 0 0 auto; }
.conversion-history-list { display: grid; }
.conversion-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 66px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.conversion-history-row:last-child { border-bottom: 0; }
.conversion-history-row > div { min-width: 0; display: grid; gap: 3px; }
.conversion-history-row > div:last-child { justify-items: end; text-align: right; }
.conversion-history-row strong, .conversion-history-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversion-history-row small { color: var(--text-muted); font-size: .76rem; }
.conversion-page { max-width: 1220px; }
.conversion-flow-card { overflow: hidden; }
.conversion-flow-head { align-items: flex-start; background: linear-gradient(120deg, color-mix(in srgb, var(--brand-primary) 10%, var(--bg-surface)), var(--bg-surface) 62%); }
.conversion-flow-head .badge { margin-top: 2px; }
.conversion-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.conversion-flow-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface-2); }
.conversion-flow-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 50%; right: -13px; width: 13px; height: 1px; background: var(--border-strong); }
.conversion-flow-index { position: absolute; z-index: 1; top: -9px; right: 10px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); font-size: .67rem; font-weight: 800; }
.conversion-flow-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-primary); font-size: 1.05rem; }
.conversion-flow-copy { min-width: 0; display: grid; align-content: start; gap: 4px; }
.conversion-flow-copy strong { color: var(--text-primary); font-size: .86rem; line-height: 1.25; }
.conversion-flow-copy small { color: var(--text-secondary); font-size: .75rem; line-height: 1.45; }
.conversion-core-boundary { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border-subtle)); border-radius: 10px; background: color-mix(in srgb, var(--info-soft) 68%, transparent); color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
.conversion-core-boundary i { flex: 0 0 auto; margin-top: 2px; color: var(--info); }
.conversion-readiness-body { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(240px, .82fr); gap: 18px; align-items: start; }
.conversion-safety-note { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border-subtle)); border-radius: var(--radius-md); background: var(--warning-soft); }
.conversion-safety-note > i { flex: 0 0 auto; margin-top: 2px; color: var(--warning); font-size: 1.1rem; }
.conversion-safety-note > div { display: grid; gap: 4px; }
.conversion-safety-note strong { color: var(--text-primary); font-size: .86rem; }
.conversion-safety-note p { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
.conversion-market-table td { min-width: 136px; }
.conversion-market-table td:last-child { min-width: 250px; }

.transaction-toolbar { flex-wrap: wrap; }
.transaction-tabs { max-width: 100%; overflow-x: auto; }
.transaction-tabs .segment { display: inline-flex; align-items: center; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.transaction-tabs .segment[aria-current="page"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.transaction-filter-body { padding-block: 14px; border-top: 1px solid var(--border-subtle); }
.transaction-filters { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(140px, .7fr)) repeat(2, minmax(135px, .65fr)) auto; align-items: end; gap: 10px; }
.transaction-filters .search-field, .transaction-filters .select, .transaction-filters .input { width: 100%; }
.compact-field { gap: 5px; }
.compact-field > span { font-size: .68rem; }

.detail-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--border-subtle); }
.detail-list > div { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr); gap: 16px; padding: 12px 14px; background: var(--bg-surface); }
.detail-list dt { color: var(--text-muted); font-size: 0.78rem; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.transaction-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(210px, .6fr); gap: 18px; align-items: start; }
.transaction-timeline { padding: 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.transaction-timeline h3 { margin-bottom: 15px; font-size: .94rem; }
.transaction-timeline ol { display: grid; margin: 0; padding: 0; list-style: none; }
.transaction-timeline li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; min-height: 58px; }
.transaction-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 13px; bottom: -2px; left: 5px; width: 2px; background: var(--border-strong); }
.timeline-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 3px; border: 3px solid var(--brand-soft); border-radius: 50%; background: var(--brand-primary); }
.transaction-timeline li > div { display: grid; align-content: start; gap: 3px; }
.transaction-timeline small { color: var(--text-muted); }

.secret-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
.scope-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.scope-field legend { margin-bottom: 8px; color: var(--text-secondary); font-size: 0.82rem; font-weight: 700; }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-card { cursor: pointer; }
.check-card input { position: absolute; opacity: 0; pointer-events: none; }
.check-card span { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-surface); color: var(--text-secondary); }
.check-card i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 5px; color: transparent; }
.check-card input:checked + span { border-color: var(--brand-primary); background: var(--brand-soft); color: var(--text-primary); }
.check-card input:checked + span i { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.check-card input:focus-visible + span { box-shadow: var(--focus-ring); }
.delivery-list { display: grid; gap: 8px; }
.delivery-list article { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--border-subtle); border-radius: 10px; }
.delivery-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.delivery-list p { color: var(--text-muted); font-size: 0.75rem; }

.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.session-list { display: grid; }
.session-row { min-height: 76px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); }
.session-row:last-child { border-bottom: 0; }
.session-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-surface-2); color: var(--text-secondary); font-size: 1.2rem; }
.session-row p { color: var(--text-muted); font-size: 0.75rem; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recovery-codes code { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-inset); text-align: center; }

.profile-layout { display: grid; grid-template-columns: minmax(280px, 0.65fr) minmax(420px, 1.35fr); gap: 18px; align-items: start; }
.profile-banner { display: flex; align-items: center; gap: 16px; padding: 26px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(145deg, var(--brand-soft), transparent); }
.cell-subtitle { display: block; margin-top: 3px; color: var(--text-muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--text-secondary); }
.button.is-disabled { pointer-events: none; opacity: 0.48; }
.admin-tabs { width: fit-content; max-width: 100%; overflow-x: auto; }
.admin-tabs .segment { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.admin-tabs .segment[aria-current="page"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reconciliation-list, .control-list { display: grid; gap: 8px; }
.reconciliation-row, .control-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.reconciliation-row:last-child, .control-row:last-child { border-bottom: 0; }
.reconciliation-row > span:first-child, .control-row > span:first-child, .control-row > span:nth-child(3) { display: grid; gap: 3px; }
.reconciliation-row small, .control-row small { color: var(--text-muted); }
.finance-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-user-detail { display: grid; gap: 18px; }
.admin-user-detail .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-banner p { color: var(--text-secondary); }
.profile-avatar { width: 62px; height: 62px; border-radius: 18px; font-size: 1.05rem; }
.profile-meta { margin: 20px; }
.account-dialog { display: flex; align-items: center; gap: 14px; }
.avatar-large { width: 48px; height: 48px; border-radius: 14px; }

@media (max-width: 1180px) {
  .security-grid { grid-template-columns: 1fr 1fr; }
  .security-grid > :last-child { grid-column: 1 / -1; }
  .transaction-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .transaction-filters .search-field { grid-column: span 2; }
}

@media (max-width: 900px) {
  .operation-layout, .operation-grid, .profile-layout { grid-template-columns: 1fr; }
  .operation-review { position: static; min-height: 0; }
  .security-grid { grid-template-columns: 1fr; }
  .security-grid > :last-child { grid-column: auto; }
  .transaction-detail-grid { grid-template-columns: 1fr; }
  .conversion-readiness-body { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .admin-user-detail .stat-grid { grid-template-columns: 1fr 1fr; }
  .wallet-toolbar { align-items: stretch; }
  .wallet-toolbar .toolbar { width: 100%; }
  .wallet-toolbar .toolbar-group { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .wallet-toolbar .search-field { grid-column: 1 / -1; }
  .wallet-toolbar .select { width: 100%; }
  .asset-table tr { padding-right: 14px !important; }
  .row-actions { justify-content: flex-start; }
  .scope-grid { grid-template-columns: 1fr; }
  .transaction-filters { grid-template-columns: 1fr 1fr; }
  .transaction-filters .search-field { grid-column: 1 / -1; }
  .quote-row { align-items: flex-start; }
  .quote-row strong { max-width: 48%; }
  .conversion-selection-grid { grid-template-columns: 1fr; }
  .conversion-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversion-flow-step::after { display: none; }
  .session-row { grid-template-columns: 40px minmax(0, 1fr); }
  .session-row > :last-child { grid-column: 2; justify-self: start; }
}

@media (max-width: 430px) {
  .transaction-filters { grid-template-columns: 1fr; }
  .transaction-filters .search-field { grid-column: auto; }
  .receive-layout { padding: 20px; }
  .swap-input-row { grid-template-columns: minmax(0, 1fr) 130px; }
  .swap-amount { font-size: 1.45rem; }
  .conversion-form { min-height: 0; padding: 16px; }
  .conversion-mode { grid-template-columns: 1fr; }
  .conversion-history-row { grid-template-columns: 1fr; gap: 7px; }
  .conversion-history-row > div:last-child { justify-items: start; text-align: left; }
  .conversion-flow { grid-template-columns: 1fr; }
  .conversion-flow-head { display: grid; }
  .quote-heading { display: grid; }
  .quote-row { display: grid; gap: 7px; }
  .quote-row strong { max-width: 100%; text-align: left; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .detail-list dd { text-align: left; }
  .recovery-codes { grid-template-columns: 1fr; }
}

.pagocards-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pagocards-form { display: grid; gap: 16px; }
.pagocards-holder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pagocards-holder-email { grid-column: 1 / -1; }
.pagocards-amounts { display: grid; gap: 0; margin: 0; }
.pagocards-amounts > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.pagocards-amounts > div:last-child { border-bottom: 0; }
.pagocards-amounts dt { color: var(--text-secondary); }
.pagocards-amounts dd { margin: 0; font-weight: 650; text-align: right; }
.pagocards-terms-check { align-items: flex-start; }
.pagocards-terms-check input { margin-top: 3px; }
.pagocards-payment { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; }
.pagocards-payment .qr-box { display: grid; place-items: center; min-height: 210px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 14px; background: #fff; }
.pagocards-payment .qr-box svg { width: 100%; height: auto; }
.pagocards-payment .field { margin-top: 16px; }
.pagocards-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pagocards-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pagocards-card .table-wrap { margin-top: 14px; }
.pagocards-current:empty { display: none; }
@media (max-width: 900px) { .pagocards-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pagocards-holder { grid-template-columns: 1fr; } .pagocards-holder-email { grid-column: auto; } .pagocards-payment { grid-template-columns: 1fr; } .pagocards-payment .qr-box { max-width: 240px; } }

.pagocards-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr)); gap: 20px; }
.pagocards-card .card-body { display: grid; gap: 18px; padding: 20px; }
.pagocards-visual {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: min(100%, 470px); min-height: 236px; aspect-ratio: 1.58; overflow: hidden;
  padding: 26px; border-radius: 22px; color: #fff;
  background: radial-gradient(circle at 95% 8%, rgba(104, 133, 255, .44), transparent 36%),
    linear-gradient(135deg, #071329 4%, #142456 54%, #294baf 100%);
  box-shadow: 0 18px 34px rgba(10, 26, 76, .22), inset 0 1px 0 rgba(255,255,255,.2);
}
.pagocards-visual::after { content: ''; position: absolute; width: 270px; height: 270px; right: -94px; bottom: -165px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 72px rgba(255,255,255,.025); pointer-events: none; }
.pagocards-visual-top, .pagocards-visual-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.pagocards-visual-top > strong { font-size: 26px; font-style: italic; letter-spacing: -.07em; }
.pagocards-visual-brand { display: grid; font-weight: 800; letter-spacing: .09em; line-height: 1; }
.pagocards-visual-brand small { margin-top: 4px; font-size: 9px; letter-spacing: .34em; }
.pagocards-visual-chip { position: relative; z-index: 1; display: block; width: 43px; height: 32px; border: 1px solid #f1d9a6; border-radius: 7px; background: linear-gradient(135deg, #f5e1b2, #be9e5d); box-shadow: inset 0 0 0 5px rgba(255,255,255,.16); }
.pagocards-visual-chip::before, .pagocards-visual-chip::after { content: ''; position: absolute; background: rgba(107, 79, 31, .42); }
.pagocards-visual-chip::before { width: 1px; height: 100%; left: 50%; top: 0; }
.pagocards-visual-chip::after { height: 1px; width: 100%; left: 0; top: 50%; }
.pagocards-visual-number { position: relative; z-index: 1; font-size: clamp(18px, 3vw, 26px); letter-spacing: .12em; font-weight: 600; white-space: nowrap; }
.pagocards-visual-bottom { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #d3ddff; }
.pagocards-visual-bottom strong { color: #fff; margin-left: 5px; }
.pagocards-card-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pagocards-card-summary > span:first-child { display: grid; gap: 3px; }
.pagocards-card-summary small { color: var(--text-secondary); }
.pagocards-card-summary strong { font-size: 22px; }
.pagocards-card-actions { margin: 0; }
.pagocards-card-actions .button { min-height: 42px; }
.pagocards-history { border-top: 1px solid var(--border-subtle); padding-top: 18px; }
.pagocards-history h4 { margin: 0 0 12px; }
.pagocards-transactions { display: grid; }
.pagocards-transaction { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.pagocards-transaction:last-child { border-bottom: 0; }
.pagocards-transaction-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: #3859d8; background: #e9eeff; border-radius: 10px; }
.pagocards-transaction-main, .pagocards-transaction-side { display: grid; gap: 4px; min-width: 0; }
.pagocards-transaction-main { flex: 1; }
.pagocards-transaction-main strong { overflow-wrap: anywhere; }
.pagocards-transaction-main small { color: var(--text-secondary); }
.pagocards-transaction-side { text-align: right; justify-items: end; }
.pagocards-history > .button { margin-top: 12px; }
.pagocards-reveal { display: grid; gap: 14px; }
.pagocards-reveal-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; align-items: center; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 13px; }
.pagocards-reveal-field > span { grid-column: 1 / -1; color: var(--text-secondary); font-size: 13px; }
.pagocards-reveal-field > strong { overflow-wrap: anywhere; font-size: 17px; }
.pagocards-reveal-field > .button { min-height: 34px; }
.pagocards-reveal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) {
  .pagocards-card .card-body { padding: 14px; }
  .pagocards-visual { min-height: 198px; padding: 20px; border-radius: 18px; }
  .pagocards-visual-number { font-size: clamp(16px, 4.5vw, 21px); letter-spacing: .05em; }
  .pagocards-card-actions .button { flex: 1 1 44%; }
  .pagocards-reveal-pair { grid-template-columns: 1fr; }
  .pagocards-transaction { align-items: flex-start; }
}