* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-variant); color: var(--on-surface); font-family: var(--body-font); font-size: var(--body-size); line-height: var(--body-line); }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button, input { -webkit-appearance: none; }
button { color: inherit; }
button, h1, h2, h3, p { margin: 0; }
img { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
.preview-layout { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-40); padding: var(--space-32); }
.device { width: var(--screen-width); height: var(--screen-height); flex: 0 0 auto; background: var(--surface); border-radius: var(--radius-device); position: relative; overflow: hidden; }
.app-screen { height: 100%; display: flex; flex-direction: column; position: relative; isolation: isolate; }
.dark { color: var(--inverse-on-surface); background: var(--payment-surface); }
.app-header { position: relative; flex: 0 0 auto; z-index: 2; }
.safe-area-top { height: max(var(--status-height), env(safe-area-inset-top, 0px)); }
.app-bar { height: var(--appbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8) 0 var(--space-20); position: relative; }
.app-title { position: absolute; left: var(--space-20); right: var(--space-20); text-align: center; font: 400 var(--title-size)/var(--title-line) var(--heading-font); color: var(--on-surface); pointer-events: none; }
.app-bar .icon-button { margin-left: auto; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; padding: var(--space-8); background: transparent; border: 1px solid transparent; border-radius: var(--radius-full); color: var(--secondary); flex-shrink: 0; }
.icon-button.outline { border-color: var(--secondary); background: rgba(255,255,255,.01); width: var(--space-40); height: var(--space-40); padding: 7px; }
.icon-button.plain { padding: var(--space-8); border-width: 0; }
.c-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-8); height: var(--button-height); flex-shrink: 0; border: 1px solid transparent; padding: 0 var(--space-24); border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-weight: 500; line-height: var(--body-line); letter-spacing: .15px; white-space: nowrap; }
.c-button.text { background: transparent; color: var(--secondary); }
.bottom-action { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: var(--action-height); padding: var(--space-8) var(--space-16) var(--space-32); border-radius: var(--radius-action) var(--radius-action) 0 0; background: var(--primary); }
.bottom-action .c-button { width: 100%; }
.empty-page { flex: 1; min-height: 0; padding-bottom: 120px; display: flex; position: relative; }
.empty-state { padding: var(--space-32) var(--space-16); display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); z-index: 1; text-align: center; }
.empty-badge, .detail-badge { display: flex; padding: var(--space-14); border-radius: var(--radius-full); background: var(--tertiary-container); }
.empty-copy { padding: var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.empty-copy h2 { font: 500 var(--headline-small)/var(--headline-small-line) var(--heading-font); }
.empty-copy p { font-size: var(--body-size); line-height: var(--body-line); letter-spacing: var(--body-tracking); }
.ray { pointer-events: none; position: absolute; z-index: 0; left: 50%; transform: translate(-50%,-50%); }
.ray-empty { top: calc(50% - 167.69px); }
.amount-page { position: relative; flex: 1; min-height: 0; padding-bottom: 132px; display: flex; flex-direction: column; gap: var(--space-16); }
.amount-zone { min-height: 0; flex: 1; padding: var(--space-24) var(--space-16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); }
.amount-label { font-weight: 500; letter-spacing: var(--body-tracking); }
.amount-entry { display: flex; justify-content: center; align-items: center; width: 100%; padding: var(--space-8) 0; border-bottom: 1px solid var(--primary); font: 400 var(--display-large)/var(--display-large-line) var(--heading-font); letter-spacing: var(--display-tracking); }
.amount-input { min-width: 35px; max-width: calc(100% - 41px); height: var(--display-large-line); color: var(--on-surface); background: transparent; border: 0; outline: 0; border-radius: 0; padding: 0; font: inherit; letter-spacing: inherit; text-align: right; caret-color: var(--primary); }
.amount-currency { line-height: var(--display-large-line); flex-shrink: 0; }
.amount-hint { color: var(--on-surface-variant); font-size: var(--small-size); line-height: var(--small-line); letter-spacing: var(--small-tracking); text-align: center; }
.keypad { flex-shrink: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-12); align-self: center; width: min(var(--keypad-width),calc(100% - var(--space-32))); padding: var(--space-16) 0; }
.digital-key { display: flex; align-items: center; justify-content: center; height: var(--key-height); padding: var(--space-10); border: 0; border-radius: 100px; background: var(--surface-variant); color: var(--on-surface); font: 400 var(--display-small)/var(--display-small-line) var(--heading-font); }
.qr-amount { padding: var(--space-24) var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.qr-amount p { font-weight: 500; letter-spacing: var(--body-tracking); }
.payment-amount { font: 500 var(--display-large)/var(--display-large-line) var(--heading-font); letter-spacing: var(--display-tracking); text-align: center; padding: var(--space-8) 0; max-width: 100%; white-space: nowrap; }
.qr-content { padding: var(--space-24) var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.qr-content h2 { font: 400 var(--title-size)/var(--title-line) var(--heading-font); }
.demo-qr { display: block; width: 223.276px; height: 222px; border-radius: 30.621px; background: white; }
.payment-glow { position: absolute; left: calc(50% - 314.5925px); top: calc(100% - 161.27px); pointer-events: none; z-index: -1; }
.payment-logo { position: absolute; bottom: var(--space-30); left: calc(50% - 35px); z-index: 1; }
.success-page { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-4); padding: var(--space-24) var(--space-16) 124px; position: relative; }
.success-page h2 { position: relative; font: 500 var(--headline-medium)/var(--headline-medium-line) var(--heading-font); text-align: center; width: 100%; }
.success-page > img:not(.ray) { position: relative; }
.success-page .payment-amount { position: relative; }
.ray-success { top: calc(50% - 40px); }
.history-page { position: relative; flex: 1; min-height: 0; padding-bottom: 120px; overflow-y: auto; scrollbar-width: none; }
.history-page::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: var(--space-10); padding: var(--space-8) var(--space-16); overflow-x: auto; scrollbar-width: none; }
.chip { height: var(--space-32); flex-shrink: 0; border: 1px solid var(--secondary); border-radius: var(--radius-chip); padding: 5px 11px; color: var(--secondary); background: transparent; font-size: var(--small-size); line-height: var(--small-line); letter-spacing: var(--label-tracking); font-weight: 500; white-space: nowrap; }
.chip:nth-child(1) { width: 48px; }
.chip:nth-child(2), .chip:nth-child(3) { width: 100px; }
.chip:nth-child(4) { width: 69px; }
.chip[aria-pressed="true"]:not([data-filter="all"]) { background: var(--primary-container); }
.history-group h2 { height: var(--space-28); padding: var(--space-8) var(--space-16) 0; font-size: var(--small-size); line-height: var(--small-line); font-weight: 500; letter-spacing: var(--small-tracking); color: var(--on-surface-variant); }
.transaction-row { display: block; width: 100%; border: 0; background: transparent; padding: 1px var(--space-4); text-align: left; }
.transaction-inner { display: flex; gap: var(--space-16); align-items: center; width: 100%; min-height: var(--button-height); padding: 0 var(--space-12); border-radius: var(--radius-row); }
.transaction-row.latest .transaction-inner { background: var(--list-selected); }
.transaction-icon { padding: var(--space-10); border-radius: var(--radius-full); background: var(--success); flex-shrink: 0; }
.transaction-icon.out { background: var(--primary-container); }
.transaction-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.transaction-title { font-size: var(--body-size); line-height: var(--body-line); letter-spacing: var(--body-tracking); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-time { font-size: var(--small-size); line-height: var(--small-line); letter-spacing: var(--small-tracking); color: var(--on-surface-variant); }
.transaction-sum { font-size: var(--small-size); line-height: var(--small-line); letter-spacing: var(--label-tracking); font-weight: 500; color: var(--success); white-space: nowrap; }
.transaction-sum.out { color: var(--on-surface-variant); }
.detail-page { min-height: 0; flex: 1; padding: 0 var(--space-16) 132px; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); overflow-y: auto; }
.detail-badge { background: var(--success); }
.detail-heading { text-align: center; display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.detail-heading h2 { font: 500 var(--headline-medium)/var(--headline-medium-line) var(--heading-font); }
.detail-heading p { color: var(--on-surface-variant); letter-spacing: var(--body-tracking); }
.detail-amount { font: 400 var(--headline-large)/var(--headline-large-line) var(--heading-font); width: 100%; text-align: center; overflow-wrap: anywhere; }
.summary-card { background: var(--surface-variant); border-radius: var(--radius-card); padding: var(--space-12); width: 100%; }
.summary-row { padding: 1px var(--space-16); min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); letter-spacing: var(--body-tracking); position: relative; }
.summary-row:first-child::after { content: ''; position: absolute; height: .5px; bottom: 0; left: var(--space-16); right: var(--space-16); background: var(--outline-variant); }
.summary-row-value { font-size: var(--small-size); line-height: var(--small-line); letter-spacing: var(--label-tracking); font-weight: 500; color: var(--on-surface-variant); white-space: nowrap; }
.summary-number { display: flex; align-items: center; gap: var(--space-12); }
.summary-number .icon-button { padding: var(--space-8); }
/* iOS insets are provided by the device; no simulated status bar. */
:root { --safe-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
button { touch-action: manipulation; }
.qr-payment { padding: 0; border: 0; background: transparent; border-radius: 30.621px; }
.bottom-action { height: calc(64px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
.payment-logo { bottom: max(var(--space-30), env(safe-area-inset-bottom, 0px)); }
@media(max-width:760px), (display-mode:standalone) {
  body { background: var(--surface); }
  body.payment-mode { background: var(--payment-surface); }
  .preview-layout { padding: 0; height: 100%; width: 100%; }
  .device { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  .amount-page { padding-bottom: calc(100px + var(--safe-bottom)); }
}
@media(max-height:740px) and (max-width:760px) {
  .amount-page { padding-bottom: calc(80px + var(--safe-bottom)); gap: var(--space-8); }
  .keypad { padding: var(--space-8) 0; gap: var(--space-8); }
  .digital-key { height: 54px; }
  .amount-zone { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .empty-page { padding-bottom: 80px; }
  .success-page { padding-bottom: 100px; }
}

@media(max-height:640px) and (max-width:760px) {
  .amount-input { --amount-display-size: 40px; height: 48px; }
  .amount-entry { padding-top: 4px; padding-bottom: 4px; line-height: 48px; }
  .amount-currency { line-height: 48px; }
  .digital-key { height: 40px; font-size: 32px; line-height: 40px; padding: 0; }
  .amount-zone { padding-top: 0; padding-bottom: 0; }
  .qr-amount, .qr-content { padding-top: 12px; padding-bottom: 12px; }
  .qr-content { gap: 12px; }
  .demo-qr { width: 160px; height: 160px; border-radius: 22px; }
}
@media(max-height:500px) and (max-width:760px) {
  .amount-page { overflow-y: auto; }
  .amount-zone { flex-shrink: 0; min-height: 132px; }
  .qr-content { overflow-y: auto; }
  .payment-logo { display: none; }
}