:root{--color-bg: #fff7ed;--color-surface: rgba(255, 255, 255, .7);--color-surface-solid: #ffffff;--color-text-primary: #0f172a;--color-text-secondary: #1f2937;--color-text-muted: #6b7280;--gradient-primary: linear-gradient(135deg, #facc15 0%, #f97316 50%, #ea580c 100%);--gradient-subtle: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);--color-primary: #f97316;--color-border: #fed7aa;--shadow-sm: 0 2px 4px rgb(0 0 0 / .02);--shadow-card: 0 4px 6px -1px rgb(0 0 0 / .05), 0 10px 15px -3px rgb(0 0 0 / .05), 0 0 0 1px rgba(255, 255, 255, .5) inset;--glow-primary: 0 0 20px rgba(250, 204, 21, .18);--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh;background-color:var(--color-bg);color:var(--color-text-primary);overflow-x:hidden;background-image:radial-gradient(circle at 0% 0%,rgba(250,204,21,.18) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(249,115,22,.12) 0%,transparent 50%);background-attachment:fixed}*,*:before,*:after{box-sizing:border-box}.bank-selector{position:relative;width:100%}.bank-input{padding-right:40px!important}.bank-input.selected-view{display:flex;align-items:center;gap:12px;cursor:pointer;height:58px;padding:16px 40px 16px 20px;border:2px solid transparent;border-radius:var(--radius-lg, 12px);background-color:#ffffff80;color:var(--color-text-primary);font-size:1.1rem;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #00000005 inset}.bank-input.selected-view:hover{background-color:#fffc}.bank-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:250px;overflow-y:auto;background-color:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg, 12px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;list-style:none;padding:0;margin:0}.bank-dropdown li{padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(0,0,0,.05);transition:background-color .2s ease;color:var(--color-text-primary, #333)}.bank-dropdown li:last-child{border-bottom:none}.bank-dropdown li:hover{background-color:#facc151f}.bank-dropdown li.selected{background-color:#f973161f;color:var(--color-primary, #f97316)}.bank-code{font-weight:600;font-family:monospace;background:#0000000d;padding:2px 6px;border-radius:4px;font-size:.75em;line-height:1.4}.selected-view .bank-code{background:#00000014}.bank-name{font-weight:500}.match-highlight{color:#ef4444;font-weight:700}.qr-canvas{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);background:#fff;border:none;box-shadow:0 20px 25px -5px #0000000d,0 0 0 1px #0000000d;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-muted);position:relative;transition:all .3s ease}.qr-canvas.has-text{aspect-ratio:auto;min-height:480px}.qr-wrapper{display:flex;justify-content:center;width:100%}.qr-code-image{max-width:80%;height:auto;border-radius:var(--radius-md)}.qr-canvas:after{content:"";position:absolute;inset:-10px;border-radius:calc(var(--radius-lg) + 10px);background:var(--gradient-primary);z-index:-1;opacity:.1;filter:blur(20px)}.qr-canvas p{margin-top:16px;font-weight:500;font-size:.9rem}@media(max-width:480px){.qr-canvas{max-width:100%;height:auto}.qr-canvas.has-text{min-height:450px}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.app-container{max-width:520px;margin:0 auto;padding:60px 24px 80px;display:flex;flex-direction:column;gap:56px;min-height:100vh}.main-content{display:flex;flex-direction:column;gap:40px;flex:1}.app-header{text-align:center;padding:10px 0 20px;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1)}.app-header h1{font-size:3rem;line-height:1.1;font-weight:800;letter-spacing:-.04em;margin-bottom:12px;background:linear-gradient(135deg,#facc15,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 10px rgba(249,115,22,.2))}.card{background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards}.input-section{animation-delay:.1s}.qr-section{animation-delay:.2s}.qr-canvas-container{position:relative;width:100%}.guide-section{animation-delay:.3s}.card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000000d,0 8px 10px -6px #00000003,0 0 0 1px #fffc inset}.card h2{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0 0 24px;display:flex;align-items:center;gap:8px;font-weight:700}.form-group{margin-bottom:24px}.form-group label{display:block;font-size:.875rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:8px;margin-left:4px}.form-group input{width:100%;padding:16px 20px;border:2px solid transparent;border-radius:var(--radius-lg);font-size:1.1rem;background-color:#ffffff80;color:var(--color-text-primary);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #00000005 inset}.form-group input:hover{background-color:#fffc}.form-group input:focus{outline:none;background-color:#fff;border-color:#fb923c;box-shadow:0 0 0 4px #fb923c26}.form-group input::placeholder{color:#94a3b8}.input-wrapper{position:relative;width:100%;display:flex;align-items:center}.input-with-clear{padding-right:40px!important}.input-wrapper .bank-select-trigger{padding-right:40px}.clear-btn{position:absolute;right:12px;background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;z-index:10}.clear-btn:hover{background-color:#0000000d;color:var(--color-text-secondary)}.collapsible-section{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.collapsible-section.expanded{grid-template-rows:1fr}.collapsible-content{overflow:hidden}.expand-toggle{width:100%;height:32px;margin-top:-12px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all .3s ease;border-radius:var(--radius-md)}.expand-toggle:hover{color:var(--color-primary);background:#facc151f}.expand-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}.expand-toggle.expanded svg{transform:rotate(180deg)}.qr-section{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffffff80,#fff3);position:relative}.action-buttons-container{position:absolute;bottom:-24px;right:-12px;display:flex;gap:12px;z-index:20}.action-btn{width:48px;height:48px;border-radius:50%;background:#f59e0b;color:#fff;border:none;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);padding:0}.action-btn.share-btn{background:#f97316}.action-btn.share-btn svg{margin-right:3px}.action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003;background:#d97706}.action-btn.share-btn:hover{background:#ea580c}.action-btn:active{transform:translateY(0)}.guide-section{padding:0;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.3s}.guide-section h2{margin-bottom:32px;justify-content:center;font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);display:flex;align-items:center;gap:8px;font-weight:700;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.3s}.guide-section ol{display:flex;flex-direction:column;gap:24px;padding:0;margin:0}.guide-section li{list-style:none;display:flex;align-items:flex-start;gap:16px;padding:16px;background:#fff9;border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-lg);font-weight:500;color:var(--color-text-secondary);flex-wrap:wrap}.guide-section li:before{content:counter(step-counter);counter-increment:step-counter;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--gradient-primary);color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #f9731640}.guide-section ol{counter-reset:step-counter}.security-warning{margin-top:24px;padding:16px;background:#fb923c;border:1px solid #ea580c;border-radius:var(--radius-lg);color:#ffffffe6;font-size:.875rem;line-height:1.5;font-weight:500;width:100%}.security-warning a{color:#ffffffe6;text-decoration:underline;font-weight:600;transition:color .2s,opacity .2s}.security-warning a:hover{color:#fff;text-decoration:none;opacity:1}.intro-section{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.35s}.intro-section p{margin:0;color:var(--color-text-secondary);line-height:1.6;font-size:.95rem}.intro-section a{color:var(--color-text-secondary);text-decoration:underline}.intro-section a:hover{text-decoration:none;opacity:.9}.privacy-section{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.4s}.privacy-section p{margin:0;color:var(--color-text-secondary);line-height:1.6;font-size:.95rem}.app-footer{margin-top:24px;text-align:center;padding:0 12px 20px;color:var(--color-text-muted);font-size:.75rem;line-height:1.5;opacity:.7;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.4s}.app-footer a{color:var(--color-text-muted);text-decoration:underline}.app-footer a:hover{text-decoration:none;opacity:.9}@media(max-width:480px){.app-header h1{font-size:2.25rem;margin-bottom:4px}.app-container{padding:32px 24px 60px;gap:40px}.card{padding:24px;box-shadow:0 4px 20px -2px #0000000d}}.qr-data-container{margin-bottom:12px}.qr-data-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:8px;margin-left:4px}.qr-data-display{width:100%;height:auto;padding:16px;border-radius:var(--radius-lg);border:1px solid rgba(251,146,60,.2);background-color:#fffbeb99;color:#c2410c;font:.875rem monospace;transition:all .2s ease;word-break:break-all;white-space:pre-wrap;line-height:1.5;margin:0;overflow-x:auto}