:root{--bg-primary: #09090b;--bg-secondary: #18181b;--bg-tertiary: #27272a;--text-primary: #fafafa;--text-secondary: #71717a;--text-muted: #52525b;--accent: #3b82f6;--accent-dim: #1d4ed8;--success: #10b981;--error: #ef4444;--border: #27272a;--border-light: #3f3f46}*{box-sizing:border-box}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border)}.header h1{font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.merchant-info{display:flex;align-items:center;gap:10px}.merchant-name{font-size:13px;color:var(--text-secondary)}.mode-switch{font-size:12px;color:var(--text-muted);text-decoration:none;padding:6px 12px;border:1px solid var(--border);border-radius:6px;transition:all .15s}.mode-switch:hover{color:var(--text-secondary);border-color:var(--border-light);background:var(--bg-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.status-dot.ready{background:var(--success)}.status-dot.loading{background:#f59e0b;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;gap:24px}.amount-display{display:flex;align-items:baseline;gap:4px}.currency-symbol{font-size:32px;color:var(--text-muted);font-weight:400}.amount-value{font-size:56px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em;min-width:180px;text-align:center}.currency-label{font-size:16px;color:var(--text-muted);font-weight:500;margin-left:4px}.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:8px}.keypad-btn{width:72px;height:72px;border-radius:50%;border:none;background:var(--bg-secondary);color:var(--text-primary);font-size:24px;font-weight:400;cursor:pointer;transition:background .15s}.keypad-btn:hover{background:var(--bg-tertiary)}.keypad-btn:active{background:var(--border-light)}.charge-btn{width:100%;max-width:280px;padding:16px 24px;font-size:16px;font-weight:500;color:#fff;background:var(--accent);border:none;border-radius:12px;cursor:pointer;transition:background .15s;margin-top:8px}.charge-btn:hover:not(:disabled){background:var(--accent-dim)}.charge-btn:disabled{opacity:.4;cursor:not-allowed}.transmitting-screen{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.sonic-animation{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center}.sonic-wave{position:absolute;border:2px solid var(--accent);border-radius:50%;opacity:.6;animation:wave 2s infinite ease-out}.sonic-wave:nth-child(1){animation-delay:0s}.sonic-wave:nth-child(2){animation-delay:.5s}.sonic-wave:nth-child(3){animation-delay:1s}@keyframes wave{0%{width:30px;height:30px;opacity:.6}to{width:120px;height:120px;opacity:0}}.transmitting-screen h2{font-size:20px;font-weight:500;color:var(--text-primary)}.payment-details{background:var(--bg-secondary);padding:20px 32px;border-radius:12px;border:1px solid var(--border)}.payment-details .amount{font-size:28px;font-weight:500;margin-bottom:4px}.payment-details .merchant{font-size:14px;color:var(--text-secondary)}.payment-details .chain{font-size:12px;color:var(--text-muted);margin-top:8px}.payment-details .payment-id{font-size:11px;color:var(--text-muted);font-family:SF Mono,Monaco,monospace;margin-top:12px;word-break:break-all}.spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.instruction{color:var(--text-secondary);font-size:14px}.frequency-info{font-size:13px;color:var(--text-secondary);font-family:SF Mono,Monaco,monospace}.hint-text{color:var(--text-muted);font-size:12px}.action-buttons{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px}.cancel-btn{padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s}.cancel-btn:hover{border-color:var(--border-light);color:var(--text-primary)}.simulate-btn{padding:12px 20px;font-size:13px;font-weight:500;color:var(--text-muted);background:var(--bg-secondary);border:1px dashed var(--border);border-radius:10px;cursor:pointer;transition:all .15s}.simulate-btn:hover{border-color:var(--border-light);color:var(--text-secondary)}.success-screen{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.checkmark{width:80px;height:80px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff}.success-screen h2{font-size:20px;font-weight:500;color:var(--success)}.error-screen{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.error-icon{width:80px;height:80px;border-radius:50%;background:var(--error);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:600;color:#fff}.error-screen h2{font-size:20px;font-weight:500;color:var(--error)}.error-screen p{color:var(--text-secondary);font-size:14px}.retry-btn{padding:12px 24px;font-size:14px;font-weight:500;color:#fff;background:var(--error);border:none;border-radius:10px;cursor:pointer}.retry-btn:hover{opacity:.9}.footer{padding:16px 24px;border-top:1px solid var(--border);text-align:center}.footer p{color:var(--text-muted);font-size:12px}.signal-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:24px;margin:12px 0}.signal-bar{width:6px;background:var(--border);border-radius:2px;transition:background .15s}.signal-bar.active{background:var(--success)}.name-input{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-size:16px;color:var(--text-primary);text-align:center;width:100%;max-width:240px;outline:none;transition:border-color .15s}.name-input:focus{border-color:var(--border-light)}.name-input::placeholder{color:var(--text-muted)}.customer-detected{background:var(--bg-secondary);border:1px solid var(--success);padding:12px 20px;border-radius:10px;text-align:center}.customer-detected .label{font-size:11px;color:var(--success);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.customer-detected .name{font-size:18px;font-weight:500}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;min-height:100vh}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}