*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#e8d57b;--card:#f3f3f3;--text:#202020;--muted:#6b6b6b;--primary:#242424;--sheet:#dfe4ef;--sheet-active:#c9d7fb}body{background:var(--bg);color:var(--text);font-family:Inter,sans-serif}button{font:inherit;cursor:pointer}.layout{justify-content:center;min-height:100vh;display:flex}.mobile-frame{background:var(--bg);width:100%;max-width:480px;min-height:100vh;position:relative;overflow-x:hidden}.page{min-height:100vh;padding:20px}.primary-btn{background:var(--primary);color:#fff;border:none;border-radius:11px;width:100%;height:64px;font-size:22px;font-weight:600}.secondary-btn{width:100%;height:64px;color:var(--primary);cursor:pointer;background:0 0;border:none;border-radius:11px;margin-top:16px;font-size:22px;font-weight:600}.auth-page{flex-direction:column;padding:40px 20px;display:flex}.auth-logo{width:190px;margin:20px auto 0}.auth-content{text-align:center;margin-top:auto;margin-bottom:80px}.auth-content h1{margin-bottom:28px;font-size:52px;line-height:1.1}.auth-content p{color:var(--muted);margin-bottom:36px;font-size:20px;line-height:1.5}.policy{color:#8b8059;margin-top:24px;font-size:14px;line-height:1.5;display:block}.header{justify-content:space-between;align-items:center;display:flex}.user{align-items:center;gap:12px;display:flex}.avatar{border-radius:50%;width:56px;height:56px}.user h3{font-size:20px}.user p{color:#505050;margin-top:4px}.circle-btn{background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.qr-wrapper{flex-direction:column;align-items:center;margin-top:70px;display:flex}.qr-card{background:#fff;border-radius:12px;justify-content:center;align-items:center;width:360px;height:360px;display:flex}.qr-timer{text-align:center;margin-top:20px;font-size:32px;font-weight:700;transition:color .3s}.qr-timer-green{color:#27ae60}.qr-timer-red{color:#e74c3c}.bank-card{background:var(--card);border-radius:11px;justify-content:space-between;align-items:center;margin-top:28px;padding:18px;display:flex}.bank-left{align-items:center;gap:14px;display:flex}.bank-left img{width:48px}.bank-left h4{font-size:24px}.bank-left span{color:#666}.menu-box{background:var(--card);border-radius:11px;margin-top:20px;overflow:hidden}.menu-item{justify-content:space-between;align-items:center;height:72px;padding:0 22px;display:flex}.menu-left{align-items:center;gap:14px;display:flex}.menu-left span{font-size:18px}.sheet-overlay{z-index:998;background:#00000080;animation:.3s ease-out fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sheet{z-index:999;background:#fff;border-radius:14px 14px 0 0;width:100%;max-width:480px;padding:20px;transition:transform .3s ease-out;position:fixed;bottom:0;left:50%;transform:translate(-50%)translateY(100%)}.sheet.sheet-open{transform:translate(-50%)translateY(0)}.sheet-line{background:#d0d0d0;border-radius:999px;width:80px;height:6px;margin:0 auto 20px}.accounts{flex-direction:column;gap:12px;display:flex}.account-item{background:var(--sheet);border-radius:9px;justify-content:space-between;align-items:center;padding:16px;display:flex}.account-item.active{background:var(--sheet-active)}.account-info{align-items:center;gap:14px;display:flex}.account-info img{width:48px}.account-info h4{margin-bottom:4px;font-size:20px}.account-info span{color:#666}.account-actions{align-items:center;gap:12px;display:flex}.radio{border:2px solid #2463e8;border-radius:50%;width:24px;height:24px}.radio.active{background:#2463e8;border:6px solid #fff}.add-card{background:var(--sheet);border-radius:9px;align-items:center;gap:14px;height:82px;margin-top:12px;padding:0 20px;font-size:22px;font-weight:600;display:flex}.add-card-icon{color:#2463e8;background:#fff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.sheet .primary-btn{margin-top:20px}.more-btn{color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.settings-options{flex-direction:column;gap:12px;margin-bottom:20px;display:flex}.setting-item{background:var(--sheet);border-radius:9px;justify-content:space-between;align-items:center;padding:16px;display:flex}.setting-info h4{margin-bottom:4px;font-size:20px}.setting-info span{color:#666;font-size:14px}.toggle-switch{flex-shrink:0;width:50px;height:28px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#ccc;border-radius:28px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:20px;height:20px;transition:all .3s;position:absolute;bottom:4px;left:4px}.toggle-switch input:checked+.toggle-slider{background-color:#2463e8}.toggle-switch input:checked+.toggle-slider:before{transform:translate(22px)}.setting-item-input{background:var(--sheet);border-radius:9px;flex-direction:column;gap:12px;padding:16px;display:flex}.input-label{color:var(--text);font-size:18px;font-weight:600}.limit-input{border:2px solid #e0e0e0;border-radius:6px;outline:none;width:100%;padding:12px 16px;font-size:16px;transition:border-color .3s}.limit-input:focus{border-color:#2463e8}.limit-input::placeholder{color:#999}.history-header{align-items:center;gap:16px;margin-bottom:24px;display:flex}.back-btn{cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.history-header h2{font-size:28px;font-weight:600}.search-box{background:#fff;border-radius:16px;align-items:center;gap:12px;margin-bottom:24px;padding:14px 18px;display:flex}.search-input{background:0 0;border:none;outline:none;flex:1;font-size:16px}.search-input::placeholder{color:#999}.expenses-block{background:#fff;border-radius:20px;margin-bottom:24px;padding:20px}.expenses-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.expenses-header h3{font-size:20px;font-weight:600}.period-select{cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:12px;outline:none;padding:8px 12px;font-size:14px}.expenses-amount{margin-bottom:16px;font-size:36px;font-weight:700}.expenses-progress{background:#f0f0f0;border-radius:999px;width:100%;height:8px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#2463e8 0%,#5b8ef5 100%);border-radius:999px;height:100%;transition:width .3s}.transactions-list{flex-direction:column;gap:24px;display:flex}.transaction-group{flex-direction:column;gap:12px;display:flex}.transaction-date{margin-bottom:4px;font-size:18px;font-weight:600}.transaction-item{background:#fff;border-radius:16px;justify-content:space-between;align-items:center;padding:16px;display:flex}.transaction-info h5{margin-bottom:4px;font-size:18px;font-weight:600}.transaction-info span{color:#666;font-size:14px}.transaction-amount{color:#e74c3c;font-size:20px;font-weight:600}.transaction-amount.failed{color:#999;text-decoration:line-through}.scanner-header{align-items:center;gap:16px;margin-bottom:24px;display:flex}.close-btn{cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.scanner-header h2{font-size:28px;font-weight:600}.scanner-container{flex-direction:column;align-items:center;gap:24px;margin-top:60px;display:flex}.scanner-frame{background:#fff;border-radius:24px;justify-content:center;align-items:center;width:320px;height:320px;display:flex;position:relative;overflow:hidden}.scanner-overlay{background:#0000000d;position:absolute;inset:0}.scanner-corners{position:absolute;inset:20px}.corner{border:3px solid #2463e8;width:40px;height:40px;position:absolute}.corner-tl{border-bottom:none;border-right:none;border-radius:8px 0 0;top:0;left:0}.corner-tr{border-bottom:none;border-left:none;border-radius:0 8px 0 0;top:0;right:0}.corner-bl{border-top:none;border-right:none;border-radius:0 0 0 8px;bottom:0;left:0}.corner-br{border-top:none;border-left:none;border-radius:0 0 8px;bottom:0;right:0}.camera-icon{color:#2463e8;z-index:1}.scanner-hint{color:var(--muted);text-align:center;font-size:18px}.scanner-video{-o-object-fit:cover;object-fit:cover;border-radius:24px;width:100%;height:100%;position:absolute;top:0;left:0}.scanner-error{color:#e74c3c;z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scanner-error-text{color:#e74c3c;text-align:center;padding:0 20px;font-size:16px}.transaction-details-card{background:#fff;border-radius:20px;flex-direction:column;gap:16px;margin-top:24px;padding:32px 24px;display:flex}.merchant-logo{-o-object-fit:cover;object-fit:cover;border-radius:50%;width:80px;height:80px;margin:0 auto 16px}.merchant-logo-placeholder{color:#fff;background:#2463e8;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 16px;font-size:36px;font-weight:700;display:flex}.detail-row{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.detail-row-amount{padding:16px 0 8px}.detail-label{color:#666;text-align:left;font-size:16px}.detail-value{text-align:right;font-size:16px;font-weight:500}.detail-value-amount{color:#e74c3c;text-align:right;font-size:28px;font-weight:700}.detail-divider{background:repeating-linear-gradient(90deg,#d0d0d0 0 8px,#0000 8px 16px);width:100%;height:1px;margin:8px 0}.transaction-actions,.bonuses-list{flex-direction:column;gap:16px;margin-top:24px;display:flex}.bonus-card{background:#fff;border-radius:20px;flex-direction:column;gap:16px;padding:24px;display:flex}.bonus-header{justify-content:space-between;align-items:center;display:flex}.bonus-header h3{font-size:22px;font-weight:600}.bonus-balance{color:#27ae60;font-size:28px;font-weight:700}.bonus-stats{border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;gap:24px;padding:16px 0;display:flex}.bonus-stat{flex-direction:column;flex:1;gap:8px;display:flex}.bonus-stat-label{color:#666;font-size:14px}.bonus-stat-value{font-size:18px;font-weight:600}.bonus-footer{justify-content:space-between;align-items:center;display:flex}.bonus-last-activity{color:#666;font-size:14px}.payment-done-details{background:#fff;border-radius:20px;flex-direction:column;gap:16px;margin:32px 0;padding:24px;display:flex}.payment-done-row{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.payment-done-label{color:#666;text-align:left;font-size:16px}.payment-done-value{text-align:right;word-wrap:break-word;max-width:60%;font-size:16px;font-weight:600}.payment-done-divider{background:repeating-linear-gradient(90deg,#d0d0d0 0 8px,#0000 8px 16px);width:100%;height:1px;margin:8px 0}