/* Personal card portal. Scoped to avoid changing the separate legacy demo. */
body.live-portal {font-size:17px;line-height:1.55;color:#f7f3e9;background:#171612}
.live-portal .container {width:calc(100% - 64px);max-width:1184px}
.live-portal #cabinet {padding:36px 0 56px;min-height:0}
.live-portal #cabinet .cabinet-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:nowrap}
.live-portal #cabinet .cabinet-heading h1 {font-size:36px;line-height:1.2;letter-spacing:-1.1px;margin:0;min-width:0}
.live-portal .support-link {display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid #79632e;border-radius:24px;background:#332c1b;color:#ffdc75;font-size:15px;font-weight:600;white-space:nowrap;flex-shrink:0}
.live-portal .support-link[aria-disabled=true] {cursor:default}
.live-portal #cabinet .cabinet-grid {display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:28px;align-items:start}
.live-portal #cabinet .card-column,.live-portal #cabinet .details-column {min-width:0}
.live-portal #cabinet .account-card {height:242px;padding:26px;border-radius:22px;position:relative;isolation:isolate;overflow:hidden;color:#30220c;background:linear-gradient(125deg,#ffe391,#ffd15c 65%,#eeb73c);border:1px solid #edc362;box-shadow:0 16px 40px #0002}
.live-portal #cabinet .account-card::before,.live-portal #cabinet .account-card::after {content:'';position:absolute;z-index:-1;width:280px;height:280px;border:1px solid #8b5b2438;border-radius:50%;right:-170px;top:-110px;pointer-events:none}
.live-portal #cabinet .account-card::after {width:360px;height:360px;right:-180px;top:-150px}
.live-portal #cabinet .card-brand {font-size:25px;font-weight:650;line-height:1.25}
.live-portal #cabinet .account-card-type {font-size:14px;opacity:1;color:#5a4118;letter-spacing:0;margin-top:8px}
.live-portal #cabinet .account-pan {font-size:20px;letter-spacing:1px;line-height:1.5;margin-top:auto;font-variant-numeric:tabular-nums}
.live-portal #cabinet .card-bottom {margin-top:20px;gap:16px}
.live-portal #cabinet .card-holder-wrap {min-width:0}
.live-portal #cabinet .card-micro {font-size:12px;letter-spacing:.2px;opacity:1;color:#5a4118;margin-bottom:4px}
.live-portal #cabinet .cardholder {font-size:15px;font-weight:500;line-height:1.4;letter-spacing:.3px;overflow-wrap:anywhere;display:block}
.live-portal #cabinet .visa-logo {width:64px;flex-shrink:0;filter:brightness(0);opacity:.85}
.live-portal #cabinet .card-status-row {display:flex;flex-wrap:wrap;gap:10px;padding:18px 0;font-size:14px}
.live-portal #cabinet .status-pill {font-size:14px;line-height:1.45;color:#d1c9b9}
.live-portal #cabinet .status-pill.is-active {color:#87e3b0}
.live-portal #cabinet .status-pill.is-active::before {content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.live-portal #cabinet .muted {color:#c5bdad}
.live-portal #cabinet .card-actions {gap:12px}
.live-portal #cabinet .btn {min-height:48px;font-size:15px;line-height:1.4;padding:12px 16px;gap:8px;white-space:normal}
.live-portal #cabinet .btn-outline {background:#302b20;border-color:#6c5931;color:#ffe3a0}
.live-portal #cabinet .btn-outline:hover {background:#43371f;border-color:#b28b39}
.live-portal #cabinet .btn:focus-visible,.live-portal .support-link:focus-visible,.live-portal #cabinet .refresh-button:focus-visible {outline:2px solid #ffd363;outline-offset:3px}
.live-portal #cabinet .safety-note {font-size:14px;line-height:1.5;margin:14px 0 0;color:#bdb4a3}
.live-portal #cabinet .balance-panel {padding:24px 26px;border:1px solid #56492c;border-radius:20px;background:linear-gradient(110deg,#332d1e,#25231c);margin:0 0 20px;gap:16px;flex-wrap:wrap}
.live-portal #cabinet .balance-panel .muted {font-size:15px}
.live-portal #cabinet .account-balance {display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;font-size:46px;line-height:1.2;letter-spacing:-1.6px;font-weight:600;margin-top:10px}
.live-portal #cabinet .currency-tag {margin:0;padding:4px 7px;font-size:12px;letter-spacing:.4px;line-height:1.3;color:#d1c4a4;border:1px solid #62553a;border-radius:5px}
.live-portal #cabinet .refresh-button {font-size:14px;padding:10px 13px;min-height:44px;background:#3b3322;border:1px solid #736038;border-radius:10px;color:#ffe6a0}
.live-portal #cabinet .details-panel {background:#24231e;border:1px solid #454135;border-radius:20px;overflow:hidden}
.live-portal #cabinet .card-details-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin:0}
.live-portal #cabinet .card-detail-cell {padding:20px 26px;min-width:0;border-top:1px solid #454135}
.live-portal #cabinet .card-detail-cell:first-child {border-top:0}
.live-portal #cabinet .card-detail-cell:nth-child(3) {border-left:1px solid #454135}
.live-portal #cabinet .card-detail-cell.is-wide {grid-column:1/-1}
.live-portal #cabinet .card-detail-cell dt {font-size:14px;line-height:1.5;color:#c5bdad;margin-bottom:6px}
.live-portal #cabinet .card-detail-cell dd {font-size:19px;line-height:1.5;font-weight:500;margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.live-portal #cabinet .details-hint {font-size:14px;line-height:1.6;color:#c5bdad;margin:0;padding:16px 26px;border-top:1px solid #454135}
.live-portal #cabinet .details-footer {padding:16px 26px;border-top:1px solid #454135}
.live-portal #cabinet .field-error:empty {display:none}
.live-portal #cabinet .transactions-panel {padding:26px 24px 10px;margin-top:32px;border:1px solid #494335;border-radius:20px;background:#24221c}
.live-portal #cabinet .transactions-heading {margin:0 0 20px;display:block}
.live-portal #cabinet .transactions-heading h2 {font-size:24px;line-height:1.3;letter-spacing:-.5px;margin:0 0 8px;font-weight:650}
.live-portal #cabinet .history-hint {font-size:14px;line-height:1.6;color:#c5bdad;margin:0}
.live-portal .tx-column-head,.live-portal .transaction-summary {display:grid;grid-template-columns:minmax(0,1fr) 140px 124px 136px 32px;align-items:center;gap:16px}
.live-portal .tx-column-head {font-size:13px;color:#bdb4a3;padding:0 19px 14px}
.live-portal .tx-column-head>span:nth-child(4) {text-align:right}
.live-portal .transaction-list {display:grid;gap:10px}
.live-portal .transaction-item {border:1px solid #494335;border-radius:14px;background:#2a2821;min-width:0}
.live-portal .transaction-item.is-open {border-color:#a88435}
.live-portal .transaction-summary {width:100%;background:transparent;text-align:left;color:#f5f0e6;padding:18px;border:0;border-radius:13px;min-height:88px;font-size:15px;line-height:1.5;cursor:pointer}
.live-portal .transaction-summary:hover {background:#373020}
.live-portal .transaction-summary:focus-visible {outline:2px solid #ffd363;outline-offset:3px}
.live-portal .is-open .transaction-summary {border-radius:13px 13px 0 0;background:#373020}
.live-portal .tx-title {display:flex;gap:12px;align-items:center;font-weight:550;min-width:0;overflow-wrap:anywhere}
.live-portal .tx-name {min-width:0}
.live-portal .tx-kind {display:block;margin-top:3px;font-size:13px;font-weight:400;color:#c5bdad}
.live-portal .tx-icon {display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:12px;background:#473a1f;color:#ffda7a;font-size:21px}
.live-portal .tx-icon.is-credit {color:#87e3b0;background:#203c32}
.live-portal .tx-date {font-size:14px;color:#c5bdad}
.live-portal .tx-badge {justify-self:start;display:inline-flex;align-items:center;max-width:100%;padding:5px 9px;border:1px solid transparent;border-radius:7px;font-size:13px;line-height:1.4;font-weight:550}
.live-portal .tone-success {color:#98efbd;background:#203d32;border-color:#345b47}
.live-portal .tone-danger {color:#ffb2ae;background:#44282d;border-color:#684047}
.live-portal .tone-pending {color:#f5d793;background:#403722;border-color:#625337}
.live-portal .tx-amount {text-align:right;font-size:16px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.live-portal .tx-amount.is-credit {color:#98efbd}
.live-portal .tx-toggle {display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #806832;border-radius:50%;color:#ffda7a;background:#3e331e}
.live-portal .tx-toggle svg {display:block;width:20px;height:20px}
.live-portal .tx-toggle-vertical {transition:opacity .15s}
.live-portal .is-open .tx-toggle {background:#ffd363;border-color:#ffd363;color:#38290f}
.live-portal .is-open .tx-toggle-vertical {opacity:0}
.live-portal .transaction-detail {padding:0;border-top:1px solid #5d4d2e;background:#201e18;border-radius:0 0 13px 13px}
.live-portal .transaction-detail[hidden] {display:none}
.live-portal .tx-detail-grid {margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 36px;padding:24px}
.live-portal .tx-detail-grid>div {min-width:0}
.live-portal .tx-detail-grid dt {font-size:13px;color:#c5bdad;margin-bottom:5px;line-height:1.5}
.live-portal .tx-detail-grid dd {margin:0;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.live-portal .tx-detail-grid .tx-detail-note {grid-column:1/-1;border-top:1px solid #494335;padding-top:18px}
.live-portal .transaction-detail>.tx-loading,.live-portal .transaction-detail>.field-error {margin:0;padding:20px 24px 0}
.live-portal .tx-loading,.live-portal .history-empty {font-size:15px;color:#c5bdad;line-height:1.6}
.live-portal .text-button {background:transparent;text-decoration:underline;color:#ffda7a;padding:8px;font-size:inherit;min-height:44px}
.live-portal .history-more {display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.live-portal .connection-note {font-size:15px;line-height:1.65}
.live-portal .pp-holder label,.live-portal #topup-form>label {font-size:15px;color:#cfc4ae}
.live-portal input {font-size:16px}
@media(max-width:1000px) {
  .live-portal #cabinet .cabinet-grid {grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:22px}
  .live-portal .tx-column-head,.live-portal .transaction-summary {grid-template-columns:minmax(0,1fr) 112px 108px 112px 32px;gap:10px}
  .live-portal #cabinet .account-pan {font-size:18px;letter-spacing:.5px}
}
@media(max-width:760px) {
  .live-portal .container {width:calc(100% - 32px)}
  .live-portal #cabinet {padding:24px 0 40px}
  .live-portal #cabinet .cabinet-grid {grid-template-columns:minmax(0,1fr);gap:24px}
  .live-portal #cabinet .card-column {width:100%;max-width:440px;margin-inline:auto}
  .live-portal #cabinet .cabinet-heading {margin-bottom:24px;gap:12px}
  .live-portal #cabinet .cabinet-heading h1 {font-size:30px;letter-spacing:-.7px}
  .live-portal .support-link {font-size:14px;padding:10px 13px;min-height:44px}
  .live-portal #cabinet .account-card {height:238px;padding:24px}
  .live-portal #cabinet .account-pan {font-size:20px;letter-spacing:.7px}
  .live-portal #cabinet .balance-panel {padding:22px}
  .live-portal #cabinet .account-balance {font-size:42px}
  .live-portal #cabinet .card-detail-cell {padding:18px 22px}
  .live-portal #cabinet .details-hint,.live-portal #cabinet .details-footer {padding:16px 22px}
  .live-portal #cabinet .transactions-panel {padding:22px 16px 8px;margin-top:26px}
  .live-portal #cabinet .transactions-heading h2 {font-size:22px}
  .live-portal .tx-column-head {display:none}
  .live-portal .transaction-summary {grid-template-columns:minmax(0,1fr) 32px;gap:8px 12px;padding:16px}
  .live-portal .tx-title {grid-column:1;grid-row:1;font-size:16px;gap:0}
  .live-portal .tx-icon {display:none}
  .live-portal .tx-amount {grid-column:1;grid-row:3;max-width:none;text-align:left;font-size:18px}
  .live-portal .tx-toggle {grid-column:2;grid-row:1/3;align-self:start}
  .live-portal .tx-date {grid-column:1;grid-row:2;font-size:13px}
  .live-portal .tx-badge {grid-column:1/-1;grid-row:4;margin-top:2px}
  .live-portal .tx-detail-grid {padding:20px 16px;gap:18px;grid-template-columns:minmax(0,1fr)}
  .live-portal .transaction-detail>.tx-loading,.live-portal .transaction-detail>.field-error {padding:16px 16px 0}
}
@media(max-width:380px) {
  .live-portal .container {width:calc(100% - 24px)}
  .live-portal #cabinet .cabinet-heading h1 {font-size:27px}
  .live-portal .support-link {padding:10px;font-size:13px}
  .live-portal #cabinet .account-card {padding:22px;height:228px}
  .live-portal #cabinet .account-pan {font-size:17px;letter-spacing:.4px}
  .live-portal #cabinet .balance-panel {padding:20px;gap:12px}
  .live-portal #cabinet .account-balance {font-size:38px}
  .live-portal #cabinet .card-detail-cell {padding:18px}
}
@media(prefers-reduced-motion:reduce) {
  .live-portal .tx-toggle-vertical {transition:none}
}
.live-portal .sandbox-banner { margin: 16px auto; padding: 16px 20px; max-width: 1120px; background: #30291b; border: 1px solid #766135; border-radius: 16px; color: #f5dda3; font-size: 15px; line-height: 1.5; }
.live-portal .sandbox-banner strong { display: block; font-size: 18px; }
.live-portal .sandbox-banner nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.live-portal .sandbox-banner button { min-height: 44px; white-space: normal; }
@media (max-width: 600px) { .live-portal .sandbox-banner { margin: 12px; padding: 16px; } .live-portal .sandbox-banner nav { flex-direction: column; } }

/* Explain unavailable actions before the issuance form. */
.live-portal .fulfillment-notice { margin: 20px 0; padding: 18px 20px; border: 1px solid #806832; border-radius: 16px; background: #332c1b; color: #f6e7bf; }
.live-portal .fulfillment-notice h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.4; color: #ffdc75; }
.live-portal .fulfillment-notice p { margin: 0; font-size: 16px; line-height: 1.6; }
.live-portal #fulfillment button:disabled { cursor: not-allowed; white-space: normal; }

/* Keep the purchase handoff readable on wide screens. */
.live-portal .connection-panel {width:100%;max-width:640px;margin:0 auto;padding:32px;text-align:left}
.live-portal .connection-panel .connection-heading {gap:16px;margin-bottom:24px;align-items:center}
.live-portal .connection-panel h1 {font-size:24px;line-height:1.25;margin:0}
.live-portal .connection-panel p {max-width:48ch;line-height:1.6}
@media(max-width:480px) {
  .live-portal .connection-panel {padding:24px}
  .live-portal .connection-panel .connection-heading {align-items:flex-start;flex-direction:column}
  .live-portal .connection-panel h1 {font-size:22px}
}
/* Card dialogs stay outside the polling cabinet so focus and copy remain stable. */
body.dialog-open { overflow: hidden; }
.live-portal #cabinet .card-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.live-portal #cabinet .card-actions .btn { min-width: 0; padding: 12px 8px; font-size: 14px; }
.card-dialog { box-sizing: border-box; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 28px; overflow: auto; border: 1px solid #514832; border-radius: 24px; background: #24221c; color: #fff4da; box-shadow: 0 24px 100px #0008; }
.card-dialog::backdrop { background: #0d0c09b8; backdrop-filter: blur(5px); }
.card-dialog[open] { animation: card-dialog-in .18s ease-out; }
.card-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dialog-eyebrow { font-size: 12px; color: #bcb19a; }
.card-dialog-heading h2 { font-size: 26px; letter-spacing: -.5px; margin: 5px 0 0; }
.dialog-close, .billing-copy { display: grid; place-items: center; border: 0; background: transparent; color: #c7bca6; cursor: pointer; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; }
.dialog-close { background: #332f24; align-self: flex-start; }
.card-dialog svg { width: 19px; height: 19px; }
.dialog-close:hover, .billing-copy:hover { background: #403723; color: #ffda79; }
.card-dialog button:focus-visible { outline: 2px solid #edc457; outline-offset: 3px; }
.billing-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 20px; margin: 0 0 24px; }
.billing-grid > div { min-width: 0; border-bottom: 1px solid #413b2e; padding: 13px 0; }
.billing-grid .billing-wide { grid-column: 1/-1; }
.billing-grid dt { color: #bcb19a; font-size: 12px; }
.billing-grid dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 0; font-size: 15px; line-height: 1.4; min-height: 36px; }
.billing-grid dd span { overflow-wrap: anywhere; }
.billing-copy { width: 30px; height: 32px; }
.billing-copy svg { width: 16px; height: 16px; }
.dialog-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 1px solid #f2c956; border-radius: 12px; background: #f2c956; color: #2b210b; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dialog-primary:hover { background: #ffdb78; }
.billing-note { color: #bcb19a; font-size: 12px; line-height: 1.6; text-align: center; margin: 14px 0 0; }
.dialog-description { margin: 0 0 20px; color: #cbbfa8; font-size: 15px; line-height: 1.6; }
.dialog-feedback { min-height: 16px; margin: 12px 0 -8px; text-align: center; color: #f2c956; font-size: 12px; }
@keyframes card-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media(max-width:480px) { .card-dialog { padding: 24px 20px; border-radius: 20px; } .billing-grid { column-gap: 14px; } }
@media(prefers-reduced-motion:reduce) { .card-dialog[open] { animation: none; } }

.live-portal .card-toolbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notification-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #756031; border-radius: 50%; background: #302b20; color: #ffda79; cursor: pointer; }
.notification-button svg { width: 21px; height: 21px; }
.notification-button:hover { background: #43371f; border-color: #b28b39; }
.notification-button:focus-visible { outline: 2px solid #edc457; outline-offset: 3px; }
.notification-empty { text-align: center; padding: 8px 0 10px; }
.notification-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; color: #e9c873; background: #332f24; border-radius: 18px; }
.notification-empty-icon svg { width: 26px; height: 26px; }
.notification-empty h3 { font-size: 18px; margin: 0 0 12px; }
.notification-empty p { color: #cbbfa8; font-size: 14px; line-height: 1.6; margin: 8px 0; }
.notification-empty .support-link { display: inline-flex; margin-top: 14px; }
.live-portal #cabinet .password-value { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.password-value svg { width: 18px; height: 18px; }
@media(max-width:480px) { .live-portal #cabinet .cabinet-heading { flex-wrap: wrap; gap: 16px; } .live-portal .card-toolbar { gap: 8px; } .notification-button { width: 42px; height: 42px; } }