/* PassPay design layer. SDDS rhythm and iconography, PassPay identity. */
:root {
 --brand:#20CFC9; --ink:#242B31; --muted:#68767F; --canvas:#ECEFF0;
 --surface:#FFF; --surface-soft:#F3F5F6; --surface-raised:#FFF;
 --line:#E6EAEC; --accent-soft:#E1F7F5; --accent-ink:#08746F;
 --negative:#A64238; --negative-soft:#FBEDEB; --ease:cubic-bezier(.22,1,.36,1);
 --radius-card:24px; --radius-control:18px;
 color:var(--ink); background:var(--canvas);
}
html[data-theme="dark"] {
 color-scheme:dark; --ink:#F3F5F6; --muted:#A2ADB4; --canvas:#111518;
 --surface:#171C20; --surface-soft:#22292F; --surface-raised:#262E34;
 --line:#30393F; --accent-soft:#173D3D; --accent-ink:#6AE0D8;
 --negative:#F3AEA3; --negative-soft:#422C2C;
 background:var(--canvas); color:var(--ink);
}
body {min-width:320px}
button,a,input,select { -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid var(--accent-ink);outline-offset:3px}
button:active:not(:disabled) {opacity:1}
.sdds-icon {display:block;flex-shrink:0;width:24px;height:24px;fill:none;stroke:none!important;stroke-width:0}
.sdds-icon * {stroke:none!important;stroke-width:0}
.workspace {padding:32px 20px;min-height:100svh;background:var(--canvas)}
.terminal,html[data-theme="dark"] .terminal {
 width:430px;height:max(790px,calc(100svh - 64px));max-height:940px;min-height:0;
 border:1px solid var(--line);border-radius:36px;background:var(--surface);
 box-shadow:0 30px 90px #131C2410;--qr-edge:314px;
}
.app-header {height:84px;padding:0 28px;gap:10px}
.brand {gap:7px;font-size:24px;letter-spacing:-1.25px;font-weight:800}
.brand-icon {width:31px;height:34px;fill:var(--brand)}
.wordmark-pay {font-weight:500}
.header-mode {margin-left:auto;border:1px solid var(--line);border-radius:10px;padding:5px 9px;font-size:11px;font-weight:750;letter-spacing:.4px;color:var(--muted)}
.header-context,html[data-theme="dark"] .header-context {display:none}
.payment-view {flex:1;min-height:0}
.terminal[data-phase="amount"] .amount-section {padding:37px 18px 24px;flex-shrink:0}
.amount-section h1,html[data-theme="dark"] .amount-section h1 {font-size:15px;font-weight:600;letter-spacing:-.25px;color:var(--muted);margin-bottom:13px}
.money-line {height:91px;gap:10px}
.money-digits {font-size:76px;font-weight:650;letter-spacing:-4px}
.money-digits.empty,html[data-theme="dark"] .money-digits.empty {color:var(--ink)}
.money-digits.compact {font-size:54px;letter-spacing:-2.7px}
.money-digits.extra-compact {font-size:42px;letter-spacing:-2px}
.currency,html[data-theme="dark"] .currency {font-size:37px;font-weight:500;color:var(--muted);transform:translateY(5px)}
.money-caret {height:51px;width:2px;margin-left:-3px;margin-right:-5px;background:var(--brand)}
.amount-caption,html[data-theme="dark"] .amount-caption {font-size:12px;line-height:1.5;margin-top:12px;color:var(--muted)}
.terminal[data-phase="amount"] .stage {min-height:276px;margin:0 25px;flex:1}
.keypad {padding:0;gap:9px;width:100%;height:100%;max-height:328px;align-content:center;grid-template-rows:repeat(4,minmax(48px,1fr))}
.key,html[data-theme="dark"] .key {height:auto;min-height:54px;border-radius:20px;background:var(--surface-soft);color:var(--ink);font-size:30px;font-weight:600;border:1px solid transparent}
.key.delete {background:transparent;color:var(--muted)}
.key svg {width:28px;height:28px}

.key:active,html[data-theme="dark"] .key:active {background:var(--accent-soft);border-color:var(--brand);transform:scale(.95)}
.action-area,.terminal[data-phase="amount"] .action-area {padding:20px 25px 16px;min-height:92px;flex-shrink:0}
.primary-button {height:60px;min-height:60px;border-radius:19px;padding:0 20px 0 22px;background:var(--brand);font-size:15px;font-weight:750;color:#123B3A;box-shadow:none;letter-spacing:-.2px}
.primary-button:disabled,html[data-theme="dark"] .primary-button:disabled {background:var(--surface-soft);color:var(--muted);box-shadow:none}
.primary-button:hover:not(:disabled) {background:#41DBD5}
.primary-button.complete,html[data-theme="dark"] .primary-button.complete {background:var(--ink);color:var(--surface)}
.primary-button.complete .button-icon,html[data-theme="dark"] .primary-button.complete .button-icon {color:var(--surface)}
.primary-button.complete:hover {opacity:.9;background:var(--ink)}
.secondary-button,html[data-theme="dark"] .secondary-button {min-height:44px;font-size:13px;font-weight:650;color:var(--muted)}
.inline-message,html[data-theme="dark"] .inline-message {font-size:12px;color:var(--muted);line-height:1.6}
.bottom-nav,html[data-theme="dark"] .bottom-nav {margin:0 15px;padding:7px 0 calc(10px + env(safe-area-inset-bottom));min-height:81px;border-top:1px solid var(--line);background:var(--surface);gap:4px}
.bottom-nav button,html[data-theme="dark"] .bottom-nav button {gap:6px;font-size:11px;font-weight:650;color:var(--muted);min-height:58px;border-radius:18px}
.bottom-nav [aria-current="page"],html[data-theme="dark"] .bottom-nav [aria-current="page"] {color:var(--ink);background:var(--accent-soft)}
.bottom-nav [aria-current="page"]:before {display:none}
.bottom-nav [aria-current="page"] svg,html[data-theme="dark"] .bottom-nav [aria-current="page"] svg {color:var(--accent-ink)}
.bottom-nav svg {width:24px;height:24px}
.terminal:not([data-phase="amount"]) .amount-section {padding:12px 18px 14px}
.terminal:not([data-phase="amount"]) .money-line {height:75px}
.terminal:not([data-phase="amount"]) .money-digits {font-size:60px;letter-spacing:-3px}
.terminal:not([data-phase="amount"]) .money-digits.compact {font-size:49px}
.terminal:not([data-phase="amount"]) .money-digits.extra-compact {font-size:40px}
.terminal:not([data-phase="amount"]) .currency {font-size:29px}
.terminal:not([data-phase="amount"]) .stage {min-height:calc(var(--qr-edge) + 82px);margin:0 23px}
.terminal:not([data-phase="amount"]) .action-area {padding-bottom:calc(24px + env(safe-area-inset-bottom));min-height:110px}
.qr-panel {gap:22px;justify-content:center}
.qr-frame,html[data-theme="dark"] .qr-frame {width:min(var(--qr-edge),100%);height:auto;aspect-ratio:1;flex-shrink:0;background:#FFF;border:1px solid #E6ECEE;box-shadow:0 14px 35px #1C4D4A08;border-radius:28px;padding:12px}
.qr-frame>i,html[data-theme="dark"] .qr-frame>i {display:none}
#qr-code {width:100%;aspect-ratio:1}
#qr-code svg {width:100%;height:100%;stroke:none;border-radius:0}
.qr-instruction,html[data-theme="dark"] .qr-instruction {font-size:14px;line-height:1.6;color:var(--ink);gap:12px}
.qr-instruction small,html[data-theme="dark"] .qr-instruction small {font-size:12px;color:var(--muted)}
.terminal[data-phase="waiting"] .primary-button.status-only,.terminal[data-phase="creating"] .primary-button.status-only,.terminal[data-phase="processing"] .primary-button.status-only {background:transparent;color:var(--muted);min-height:32px;height:32px;font-weight:600}
.transaction-panel {gap:18px}
.transaction-orb {width:224px;height:224px}
.orbit-track,html[data-theme="dark"] .orbit-track {stroke:var(--line)}
.orb-wash {inset:30px}
.orb.processing .orb-wash,html[data-theme="dark"] .orb.processing .orb-wash {background:var(--accent-soft)}
.orb.processing .glyph-processing,html[data-theme="dark"] .orb.processing .glyph-processing {color:var(--accent-ink)}
.orb.success .orb-wash,html[data-theme="dark"] .orb.success .orb-wash {background:var(--accent-soft);box-shadow:0 0 65px #20CFC914}
.orb.success .orb-glyph,html[data-theme="dark"] .orb.success .orb-glyph {color:var(--accent-ink)}
.orb.success .orbit-progress {stroke:var(--brand)}
.orb.decline .orb-wash,html[data-theme="dark"] .orb.decline .orb-wash {background:var(--negative-soft)}
.orb.decline .glyph-fail,html[data-theme="dark"] .orb.decline .glyph-fail {color:var(--negative)}
.orb.decline .orbit-progress {stroke:var(--negative)}
.orb.connection .orb-wash,html[data-theme="dark"] .orb.connection .orb-wash {background:var(--surface-soft)}
.orb.connection .glyph-clock {color:var(--muted)}
.transaction-copy h2 {font-size:27px;font-weight:750;line-height:1.25;letter-spacing:-1px;margin-bottom:12px}
.transaction-copy p,html[data-theme="dark"] .transaction-copy p {font-size:14px;line-height:1.65;color:var(--muted);max-width:300px}
.app-view {padding:12px 25px 28px;scrollbar-color:var(--line) transparent}
.section-eyebrow {font-size:12px;color:var(--muted);font-weight:600;margin:2px 0 6px}
.view-heading {margin:0 0 25px;gap:8px}
.view-heading h1 {font-size:34px;letter-spacing:-1.5px;font-weight:800}
.heading-actions {gap:4px}
.heading-actions .icon-button {width:44px;height:44px;border-radius:15px;background:var(--surface-soft)}
.heading-actions .icon-button svg {width:22px;height:22px}
.heading-actions #operations-refresh {display:none}
.icon-button,html[data-theme="dark"] .icon-button {color:var(--ink);border:0}
.icon-button:hover,html[data-theme="dark"] .icon-button:hover {background:var(--accent-soft)}
#filter-dot {width:6px;height:6px;top:7px;right:7px}
.operations-summary,html[data-theme="dark"] .operations-summary {position:relative;overflow:hidden;padding:25px 23px;border-radius:26px;margin-bottom:17px;background:var(--accent-soft);border:0;gap:7px}
.operations-summary:after {content:"";position:absolute;width:125px;height:125px;right:-45px;top:-48px;border:22px solid #20CFC91A;border-radius:50%;pointer-events:none}
.operations-summary>span,html[data-theme="dark"] .operations-summary>span {color:var(--accent-ink);font-size:13px;font-weight:650}
.operations-summary>strong,html[data-theme="dark"] .operations-summary>strong {color:var(--ink);font-size:38px;line-height:1.4;letter-spacing:-1.7px;font-weight:750;z-index:1}
.operations-summary small,html[data-theme="dark"] .operations-summary small {color:var(--muted);font-size:12px}
.active-filter-summary {font-size:12px;min-height:44px;padding:6px 2px;color:var(--muted);gap:10px}
.active-filter-summary svg {width:20px;height:20px}
.history-message {color:var(--muted);font-size:13px;line-height:1.6}
.day-heading {padding:23px 0 8px}
.day-heading h2 {font-size:15px;font-weight:750;letter-spacing:-.3px}
.day-heading>span,html[data-theme="dark"] .day-heading>span {font-size:12px;color:var(--muted)}
.operation-row,html[data-theme="dark"] .operation-row {padding:17px 0;gap:12px;border-color:var(--line);border-radius:0}
.operation-row:hover,html[data-theme="dark"] .operation-row:hover {background:var(--surface-soft)}
.operation-symbol,html[data-theme="dark"] .operation-symbol {width:46px;height:46px;border-radius:17px;background:var(--surface-soft);color:var(--muted)}
.operation-symbol svg {width:24px;height:24px}
.operation-symbol.paid,html[data-theme="dark"] .operation-symbol.paid {background:var(--accent-soft);color:var(--accent-ink)}
.operation-symbol.declined,.operation-symbol.error,html[data-theme="dark"] .operation-symbol.declined,html[data-theme="dark"] .operation-symbol.error {background:var(--negative-soft);color:var(--negative)}
.operation-symbol.refunded,html[data-theme="dark"] .operation-symbol.refunded {background:var(--surface-soft);color:var(--muted)}
.operation-copy strong {font-size:13px;font-weight:750}
.operation-value strong {font-size:14px;font-weight:750}
.operation-copy small,.operation-value small {font-size:11px;color:var(--muted);margin-top:5px}
.operation-copy .paid,html[data-theme="dark"] .operation-copy .paid {color:var(--accent-ink)}
.history-empty {padding:45px 8px}
.history-empty-icon,html[data-theme="dark"] .history-empty-icon {background:var(--surface-soft);color:var(--muted);border-radius:22px;width:72px;height:72px}
.history-empty h2 {font-size:19px;font-weight:750;letter-spacing:-.6px}
.history-empty p {font-size:13px;color:var(--muted);line-height:1.7;max-width:285px}
.history-more,html[data-theme="dark"] .history-more {background:var(--surface-soft);color:var(--ink);min-height:48px;font-size:13px;border-radius:16px}
.device-card,html[data-theme="dark"] .device-card {padding:21px 18px;background:var(--surface-soft);border:0;border-radius:24px;margin-bottom:27px;gap:12px}
.device-mark,html[data-theme="dark"] .device-mark {background:var(--surface);color:var(--ink);width:48px;height:52px;border-radius:17px}
.device-card strong {font-size:15px;font-weight:750}
.device-card>div>span {font-size:12px;color:var(--muted);margin-top:6px}
.connection-dot {width:8px;height:8px;box-shadow:0 0 0 5px #20CFC91A}
.group-label {color:var(--muted);font-size:12px;font-weight:600;margin:0 3px 10px}
.theme-control {padding:0 3px;margin-bottom:26px;gap:12px}
.theme-control label {font-size:14px;font-weight:650}
.theme-control select,html[data-theme="dark"] .theme-control select {font:600 12px Manrope,system-ui;color:var(--ink);background:var(--surface-soft);border:1px solid var(--line);border-radius:14px;min-height:46px;padding:10px}
.more-group,html[data-theme="dark"] .more-group {background:var(--surface-soft);border:0;border-radius:24px;margin-bottom:14px}
.more-row,html[data-theme="dark"] .more-row {padding:18px 16px;gap:12px;min-height:78px;background:transparent;border-color:var(--line)}
.more-row:hover,html[data-theme="dark"] .more-row:hover {background:var(--accent-soft)}
.row-icon,html[data-theme="dark"] .row-icon {width:30px;color:var(--ink)}
.row-icon svg {width:24px;height:24px}
.more-row strong {font-size:14px;font-weight:700}
.more-row small,html[data-theme="dark"] .more-row small {font-size:11px;color:var(--muted);line-height:1.5}
.row-chevron {color:var(--muted);width:18px}
.row-chevron svg {width:18px;height:18px}
.more-signature {display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:29px;color:var(--muted);font-size:11px}
.signature-mark {font-size:19px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.more-footnote {font-size:11px;line-height:1.7;color:var(--muted);margin:16px 12px}
.modal-backdrop {background:#10171E73;backdrop-filter:blur(7px);align-items:center;padding:24px 16px}
.bottom-sheet,html[data-theme="dark"] .bottom-sheet {background:var(--surface);color:var(--ink);max-width:440px;max-height:calc(100svh - 48px);border-radius:30px;padding:28px 25px;box-shadow:0 25px 100px #0003;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sheet-grip {display:none}
.close-modal,html[data-theme="dark"] .close-modal {top:21px;right:18px;width:44px;height:44px;border-radius:16px;background:var(--surface-soft);color:var(--muted)}
.close-modal svg {width:22px;height:22px}
.bottom-sheet h2 {font-size:26px;font-weight:750;letter-spacing:-.9px;line-height:1.3;margin:9px 45px 12px 0}
.bottom-sheet p,html[data-theme="dark"] .bottom-sheet p {font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 21px}
.bottom-sheet .primary-button {margin-top:24px}
.filter-field {gap:9px;margin-top:20px;font-size:12px;color:var(--muted);font-weight:650}
.filter-field input,.filter-field select,html[data-theme="dark"] .filter-field input,html[data-theme="dark"] .filter-field select {background:var(--surface-soft);border:1px solid var(--line);color:var(--ink);border-radius:15px;font:500 14px Manrope,system-ui;min-height:52px;padding:13px;min-width:0}
.date-range {gap:10px}
.filter-error,.bottom-sheet .filter-error,html[data-theme="dark"] .bottom-sheet .filter-error {color:var(--negative);font-size:12px;margin-top:12px}
.bottom-sheet .detail-amount {font-size:38px;margin:10px 0 12px;text-align:center}
.detail-method {font-size:12px;color:var(--muted);margin-top:26px}
.bottom-sheet .detail-status {font-size:14px;margin:0 0 24px;text-align:center;color:var(--muted)}
.bottom-sheet .detail-status.paid,html[data-theme="dark"] .bottom-sheet .detail-status.paid {color:var(--accent-ink)}
.operation-details>div,html[data-theme="dark"] .operation-details>div {font-size:12px;padding:15px 0;gap:12px;border-color:var(--line)}
.operation-details dt {color:var(--muted)}
.operation-details dd {max-width:61%;font-weight:650}
.bottom-sheet .operation-note {font-size:12px;margin:14px 0}
.report-turnover,html[data-theme="dark"] .report-turnover {background:var(--accent-soft);padding:23px;border-radius:23px;margin:24px 0}
.report-turnover>span,html[data-theme="dark"] .report-turnover>span {font-size:13px;color:var(--accent-ink)}
.report-turnover strong,html[data-theme="dark"] .report-turnover strong {font-size:35px;color:var(--ink);font-weight:750}
.report-metrics {gap:12px}
.report-metrics strong {font-size:22px}
.report-metrics span {font-size:12px;color:var(--muted)}
.bottom-sheet .report-refunds {font-size:12px;margin:21px 7px}
.report-downloads button,html[data-theme="dark"] .report-downloads button {min-height:50px;border-radius:16px;font-size:13px;background:var(--surface-soft);color:var(--ink)}
.report-downloads button:first-child,html[data-theme="dark"] .report-downloads button:first-child {background:var(--brand);color:#123B3A}
.bottom-sheet .report-note {font-size:11px;margin:22px 7px 0}
.help-steps li {padding-bottom:25px;padding-left:43px}
.help-steps li:before,html[data-theme="dark"] .help-steps li:before {background:var(--accent-soft);color:var(--accent-ink);width:29px;height:29px;border-radius:10px;font-weight:750}
.help-steps strong {font-size:15px}
.help-steps span {font-size:13px;color:var(--muted);line-height:1.7}
.live-test-note {color:var(--negative);font-weight:650}
@media(max-width:700px) {
 .workspace {padding:0;background:var(--surface)}
 .terminal,html[data-theme="dark"] .terminal {width:100%;height:100svh;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none;--qr-edge:clamp(190px,calc(100svh - 380px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),330px)}
 .app-header {height:calc(76px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:25px;padding-right:25px}
 .terminal[data-phase="amount"] .amount-section {padding-top:clamp(18px,4svh,36px);padding-bottom:22px}
 .terminal[data-phase="amount"] .stage {min-height:264px}
 .keypad {max-height:334px}
 .key {min-height:54px}
 .terminal[data-phase="amount"] .action-area {padding-bottom:16px}
 .terminal:not([data-phase="amount"]) .action-area {padding-bottom:calc(18px + env(safe-area-inset-bottom))}
 .bottom-nav,html[data-theme="dark"] .bottom-nav {min-height:78px}
 .modal-backdrop {padding:0;align-items:flex-end}
 .bottom-sheet,html[data-theme="dark"] .bottom-sheet {max-width:100%;border-radius:30px 30px 0 0;max-height:94svh;padding:13px 25px calc(25px + env(safe-area-inset-bottom))}
 .sheet-grip {display:block;background:var(--line);margin-bottom:22px;width:36px;height:4px;border-radius:4px}
 .close-modal,html[data-theme="dark"] .close-modal {top:26px}
}
@media(max-width:700px) and (max-height:720px) {
 .app-header {height:calc(60px + env(safe-area-inset-top))}
 .brand {font-size:22px}.brand-icon {width:27px;height:30px}
 .terminal[data-phase="amount"] .amount-section {padding:13px 16px 14px}
 .money-line {height:72px}.money-digits {font-size:62px}.money-digits.compact {font-size:46px}.money-digits.extra-compact {font-size:37px}
 .amount-section h1 {margin-bottom:5px;font-size:14px}.money-caret {height:42px}.currency {font-size:30px}.amount-caption {margin-top:5px;font-size:11px}
 .terminal[data-phase="amount"] .stage {min-height:208px;margin:0 22px}
 .keypad {gap:6px;max-height:246px;grid-template-rows:repeat(4,minmax(46px,1fr))}
 .key,html[data-theme="dark"] .key {min-height:46px;font-size:27px;border-radius:16px}
 .action-area,.terminal[data-phase="amount"] .action-area {padding:12px 22px;min-height:78px}
 .primary-button {height:54px;min-height:54px;border-radius:17px}
 .bottom-nav,html[data-theme="dark"] .bottom-nav {min-height:68px;padding-top:5px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 .bottom-nav button {min-height:52px;font-size:10px;gap:4px}
 .terminal:not([data-phase="amount"]) .amount-section {padding:6px 16px 8px}
 .terminal:not([data-phase="amount"]) .money-line {height:62px}
 .terminal:not([data-phase="amount"]) .money-digits {font-size:52px}
 .terminal:not([data-phase="amount"]) .money-digits.compact {font-size:43px}
 .terminal:not([data-phase="amount"]) .money-digits.extra-compact {font-size:35px}
 .terminal:not([data-phase="amount"]) .stage {min-height:calc(var(--qr-edge) + 70px)}
 .terminal:not([data-phase="amount"]) .action-area {min-height:98px;padding-top:9px}
 .qr-panel {gap:15px}.qr-instruction {font-size:13px}
 .transaction-orb {width:174px;height:174px}.transaction-panel {gap:10px}
 .transaction-copy {min-height:72px}.transaction-copy h2 {font-size:24px}.transaction-copy p {font-size:12px;max-width:275px}
 .view-heading {margin-bottom:20px}.view-heading h1 {font-size:31px}.app-view {padding-top:9px}
}
@media(max-width:360px) {
 .app-header {padding-left:20px;padding-right:20px}
 .app-view {padding-left:20px;padding-right:20px}
 .money-digits {font-size:59px}.money-digits.compact {font-size:42px}.money-digits.extra-compact {font-size:33px}
 .operation-row {gap:9px}.operation-symbol {width:38px;height:40px;border-radius:14px}
 .operation-copy strong {font-size:12px}.operation-value strong {font-size:13px}
 .theme-control label {font-size:12px}.theme-control select {font-size:11px}
 .bottom-sheet,html[data-theme="dark"] .bottom-sheet {padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce) {
 *,*:before,*:after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .orb.success .glyph-check {stroke-dashoffset:0}.key:active:not(:disabled),.primary-button:active:not(:disabled) {transform:none}
}

/* Recovery navigation stays available while an order is unresolved. */
.payment-back{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:15px;background:var(--surface-soft);color:var(--ink)}
.payment-back svg{width:23px;height:23px}.payment-back:disabled{opacity:.45}
.terminal[data-phase="qr-error"] .transaction-copy p,.terminal[data-phase="cancelling"] .transaction-copy p{font-size:13px;line-height:1.6}
@media(max-width:360px){.app-header:has(.payment-back:not([hidden])){gap:7px;padding-left:16px;padding-right:16px}.app-header:has(.payment-back:not([hidden])) .brand{font-size:21px}}
/* Motion and surface refinement. SDDS Cell/Card hierarchy and local brand assets. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--motion-fast:180ms;--motion-panel:420ms}
.app-header,html[data-theme="dark"] .app-header{background:#171e23;color:#f5f7f8;border-bottom:1px solid #ffffff0c}
.brand{width:162px;height:64px;display:flex;align-items:center}
.brand-wordmark{width:162px;height:54px;object-fit:contain;display:block}
.app-header .header-mode{border-color:#ffffff24;color:#bac8ce;background:#ffffff05;border-radius:50px;letter-spacing:1px;font-size:10px;padding:6px 10px}
.app-header .payment-back,html[data-theme="dark"] .app-header .payment-back{color:#e6edf0;background:#ffffff0b;border-color:#ffffff12}
.money-digits{font-variant-numeric:tabular-nums;font-weight:600}
.digit-face{backface-visibility:hidden}
.stage-panel{transform:translateY(6px);transition:opacity 240ms ease,transform 420ms var(--ease),visibility 0s 420ms}
.stage-panel.active{transform:translateY(0);transition:opacity 360ms 40ms ease,transform 460ms var(--ease),visibility 0s}
.key,.primary-button,.secondary-button,.icon-button,.bottom-nav button{transition:background-color 240ms ease,color 240ms ease,opacity 180ms ease,transform 300ms var(--ease),box-shadow 300ms ease}
.key:active,html[data-theme="dark"] .key:active{transform:scale(.975);border-color:transparent}
.primary-button:active:not(:disabled){transform:scale(.985)}
.qr-frame{transition:opacity 360ms ease,transform 460ms var(--ease),box-shadow 460ms ease}
.qr-frame:before,.qr-frame:after{animation:none}
.transaction-orb{isolation:isolate;transform:none!important;animation:none!important}
.orb .orb-wash{inset:34px;border:1px solid #ffffff33;box-shadow:inset 0 1px 10px #ffffff55,0 12px 35px #143c3b06;transform:scale(1)!important;transition:background-color 600ms ease,box-shadow 600ms ease,opacity 450ms ease}
.orb:before{content:"";position:absolute;inset:15px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 30% 25%,#20cfc91b,transparent 65%);opacity:.8;transform:rotate(-20deg)}
.orb.processing .orbit-progress,.orb.connection .orbit-progress{animation:pay-orbit 3.2s linear infinite!important;stroke-dasharray:82 402;stroke-dashoffset:0;stroke-width:2;transition:opacity 360ms ease;transform-origin:100px 100px}
.orb .orbit-track{stroke-width:1;opacity:.55}
.orb.processing .glyph-processing{animation:none!important;transform:scale(.9)!important}
.orb .orb-glyph{transition:color 420ms ease;animation:none!important;transform:none!important}
.orb .orb-glyph>g,.orb .orb-glyph>.glyph-check{transition:opacity 360ms ease,transform 460ms var(--ease)}
.orb.success .orbit-progress,.orb.decline .orbit-progress{opacity:0;animation:none!important;transition:opacity 360ms ease}
.orb.success .glyph-check{animation:pay-check 620ms 120ms var(--ease) both!important;stroke-width:2.8}
.orb.success .orb-wash{background:var(--accent-soft);box-shadow:inset 0 1px 12px #ffffff55,0 18px 50px #20cfc911}
.orb.connection .glyph-clock{opacity:.8}
.transaction-copy{max-width:320px}
.transaction-copy h2{font-weight:650;letter-spacing:-1px}
.transaction-copy p{max-width:290px;margin-left:auto;margin-right:auto;line-height:1.65}
.modal-backdrop{animation:pay-overlay-in 280ms ease both;background:#11191e66;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bottom-sheet,html[data-theme="dark"] .bottom-sheet{animation:pay-sheet-in 460ms var(--ease) both}
.modal-backdrop.closing{pointer-events:none;animation:pay-overlay-out 220ms ease both}
.modal-backdrop.closing .bottom-sheet{animation:pay-sheet-out 240ms cubic-bezier(.4,0,1,1) both}
@keyframes pay-orbit{to{transform:rotate(360deg)}}
@keyframes pay-check{from{stroke-dasharray:75;stroke-dashoffset:75;opacity:0}to{stroke-dasharray:75;stroke-dashoffset:0;opacity:1}}
@keyframes pay-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes pay-overlay-out{from{opacity:1}to{opacity:0}}
@keyframes pay-sheet-in{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pay-sheet-out{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}
@media(max-width:600px){.app-header,html[data-theme="dark"] .app-header{height:78px;min-height:78px;padding-left:22px;padding-right:22px}.brand{width:150px}.brand-wordmark{width:150px;height:50px}.terminal,html[data-theme="dark"] .terminal{border:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Center the number itself on the keypad axis; currency/caret never bias it. */
.money-line{gap:0}
.money-value{position:relative;flex:0 0 auto;isolation:isolate}
.money-value .money-digits{letter-spacing:0!important;gap:0}
.money-value .digit{width:.61em;min-width:.61em;flex:0 0 .61em;transform-origin:0 0;letter-spacing:0;overflow:visible}
.money-value .digit.space{width:.20em;min-width:.20em;flex-basis:.20em}
.money-value .digit.separator{width:.27em;min-width:.27em;flex-basis:.27em}
.money-value .digit-face{letter-spacing:0;transform-origin:center;backface-visibility:hidden}
.money-value .money-exit{z-index:1;overflow:visible;transform-origin:center}
.money-value .currency,html[data-theme="dark"] .money-value .currency{position:absolute;left:calc(100% + 19px);bottom:.25em;top:auto;line-height:1;transform:none;margin:0}
.money-value .money-caret{position:absolute;left:calc(100% + 5px);top:50%;translate:0 -50%;transform:none;margin:0;animation:money-caret-soft 1.6s ease-in-out infinite}
@keyframes money-caret-soft{0%,100%{opacity:.85}50%{opacity:.18}}
@media(prefers-reduced-motion:reduce){.money-value .money-caret{animation:none!important;opacity:.65}}
@media(max-width:360px){.money-value .currency,html[data-theme="dark"] .money-value .currency{left:calc(100% + 14px);font-size:28px}.money-value .money-caret{left:calc(100% + 4px)}}

/* Stable scan surface. Only the surrounding stage fades; QR pixels never animate. */
.qr-panel,.qr-panel.active,.qr-panel:not(.active){transform:none;transition:opacity 280ms ease,visibility 0s 280ms}
.qr-panel.active{transition:opacity 320ms ease,visibility 0s}
#qr-code,.qr-panel:not(.creating).active #qr-code{animation:none!important;transform:none;filter:none;transition:none;opacity:1}
.creating #qr-code{opacity:0}
.qr-frame{transform:none!important;transition:box-shadow 360ms ease}
.qr-loading{transition:opacity 240ms ease}
.qr-loading span{width:32px;height:32px;border-width:2.5px;animation-duration:1.2s}
.entry-panel.active{transition:none;transform:none}
.app-header,.brand-wordmark,.bottom-nav{animation:none}

/* SDDS icons and a restrained circular progress indicator share one fixed anchor. */
.transaction-panel{gap:24px}
.status-mark{position:relative;display:grid;place-items:center;width:144px;height:144px;flex-shrink:0;isolation:isolate;color:var(--muted);--status-surface:var(--surface-soft);--status-ink:var(--muted)}
.status-disc{position:absolute;inset:22px;border-radius:34px;background:var(--status-surface);transition:background-color 480ms ease,border-radius 480ms var(--ease);border:1px solid var(--line)}
.status-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.status-ring circle{fill:none;stroke-width:1.5;stroke-linecap:round}
.status-track{stroke:var(--line);opacity:0;transition:opacity 400ms ease}
.status-progress{stroke:var(--brand);stroke-width:2.5!important;stroke-dasharray:72 236;transform-origin:60px 60px;opacity:0;transition:opacity 300ms ease}
.status-pending .status-disc{border-radius:50%;background:transparent;border-color:transparent}
.status-pending .status-track,.status-pending .status-progress{opacity:1}
.status-pending .status-progress{animation:status-turn 1.6s linear infinite}
.status-symbol{position:absolute;width:42px;height:42px;display:grid;place-items:center;opacity:0;transform:scale(.92);color:var(--status-ink);transition:opacity 280ms ease,transform 420ms var(--ease),color 420ms ease}
.status-symbol svg{width:42px;height:42px;display:block;stroke:none;fill:none}
.status-mark.success{--status-surface:var(--accent-soft);--status-ink:var(--accent-ink)}
.status-mark.decline{--status-surface:#fbeeed;--status-ink:#bc5152}
html[data-theme="dark"] .status-mark.decline{--status-surface:#302426;--status-ink:#e48e8e}
.success .status-success,.cancelled .status-cancelled,.decline .status-failure,.refunded .status-refunded,.unpaired .status-unpaired{opacity:1;transform:scale(1);transition-delay:80ms}
.transaction-copy{min-height:116px;width:100%;max-width:330px}
.transaction-copy h2{font-size:27px;line-height:1.2;letter-spacing:-.8px;margin:0 0 14px}
.transaction-copy p{font-size:14px;line-height:1.6;max-width:280px;margin:0 auto;color:var(--muted)}
@keyframes status-turn{to{transform:rotate(360deg)}}
@media(max-height:720px){.status-mark{width:118px;height:118px}.status-disc{inset:17px;border-radius:29px}.transaction-panel{gap:18px}.transaction-copy{min-height:94px}.transaction-copy h2{font-size:24px}.transaction-copy p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.status-progress{animation:none!important}.status-symbol,.status-disc,.status-track,.status-progress{transition:none!important}}

/* Touch hover must never latch after a tap; keyboard focus keeps its outline. */
.key:hover,html[data-theme="dark"] .key:hover{background:var(--surface-soft)}
.key.delete:hover,html[data-theme="dark"] .key.delete:hover{background:transparent}
.terminal[data-phase="amount"] #primary:not(:disabled),html[data-theme="dark"] .terminal[data-phase="amount"] #primary:not(:disabled){background:var(--brand);color:#123B3A}
.terminal[data-phase="amount"] #primary:not(:disabled) .button-icon{color:inherit}