@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Inter:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
html,body{font-family:'Inter',system-ui,sans-serif;color:#1b1c1d;background:#f8fafc;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;border:0;}
ul,li{list-style:none;}
input,select,button,textarea{font-family:inherit;outline:none;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
.ms-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}

/* ===== Top Bar ===== */
.u-topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;display:flex;align-items:center;padding:0 8px;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(195,198,213,0.15);}
.u-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#475569;flex-shrink:0;}
.u-back .material-symbols-outlined{font-size:22px;}
.u-title{flex:1;text-align:center;font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:#1b1c1d;margin-right:44px;}

/* ===== Page ===== */
.u-page{padding:68px 16px 80px;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}

/* ===== Card ===== */
.u-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.05);}

/* ===== Record List (流水/记录) ===== */
.u-record-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px;}
.u-record-item+.u-record-item{border-top:1px solid rgba(195,198,213,0.12);}
.u-record-left{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.u-record-title{font-size:14px;font-weight:500;color:#1b1c1d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.u-record-sub{font-size:12px;color:#94a3b8;}
.u-record-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.u-record-amount{font-family:'Noto Serif',serif;font-size:16px;font-weight:700;}
.u-record-amount.plus{color:#16a34a;}
.u-record-amount.minus{color:#dc2626;}
.u-record-amount.neutral{color:#1b1c1d;}
.u-record-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:50px;}
.u-status-pending{background:#fef9c3;color:#92400e;}
.u-status-ok{background:#dcfce7;color:#166534;}
.u-status-fail{background:#fee2e2;color:#991b1b;}

/* ===== Empty State ===== */
.u-empty{padding:48px 16px;text-align:center;color:#94a3b8;}
.u-empty .material-symbols-outlined{font-size:48px;margin-bottom:12px;display:block;}
.u-empty-text{font-size:14px;}

/* ===== Form ===== */
.u-form-group{display:flex;flex-direction:column;gap:6px;}
.u-form-label{font-family:'Public Sans',sans-serif;font-size:13px;font-weight:600;color:#1b1c1d;}
.u-form-input{width:100%;height:48px;padding:0 16px;font-size:14px;color:#1b1c1d;background:#f1f5f9;border:2px solid transparent;border-radius:12px;transition:border-color 0.2s,background 0.2s;}
.u-form-input:focus{border-color:#094cb2;background:#fff;}
.u-form-input::placeholder{color:#94a3b8;}
.u-form-input:read-only{color:#64748b;cursor:default;}
.u-form-select{width:100%;height:48px;padding:0 12px;font-size:14px;color:#1b1c1d;background:#f1f5f9;border:2px solid transparent;border-radius:12px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.u-form-hint{font-size:12px;color:#64748b;}
.u-form-hint strong{color:#094cb2;}

/* ===== Amount Input ===== */
.u-amount-wrap{position:relative;}
.u-amount-prefix{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:'Noto Serif',serif;font-size:18px;font-weight:700;color:#094cb2;}
.u-amount-input{width:100%;height:56px;padding:0 16px 0 36px;font-family:'Noto Serif',serif;font-size:22px;font-weight:700;color:#1b1c1d;background:#f1f5f9;border:2px solid transparent;border-radius:12px;transition:border-color 0.2s,background 0.2s;}
.u-amount-input:focus{border-color:#094cb2;background:#fff;}
.u-amount-input::placeholder{font-size:16px;font-weight:400;color:#94a3b8;}

/* ===== Balance Banner ===== */
.u-balance-banner{background:linear-gradient(135deg,#094cb2,#3366cc);border-radius:16px;padding:20px;color:#fff;}
.u-balance-label{font-size:12px;opacity:0.8;margin-bottom:4px;}
.u-balance-val{font-family:'Noto Serif',serif;font-size:28px;font-weight:700;}

/* ===== Radio Group ===== */
.u-radio-group{display:flex;flex-direction:column;gap:10px;}
.u-radio-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f8fafc;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:all 0.15s;}
.u-radio-item.selected{background:#eff6ff;border-color:#094cb2;}
.u-radio-item input[type=radio]{accent-color:#094cb2;width:18px;height:18px;}
.u-radio-label{font-size:14px;font-weight:500;}

/* ===== Submit Button ===== */
.u-submit{display:block;width:100%;padding:15px;text-align:center;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#094cb2,#3366cc);border:none;border-radius:14px;cursor:pointer;transition:opacity 0.15s;}
.u-submit:active{opacity:0.88;}

/* ===== Menu List ===== */
.u-menu-item{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.u-menu-item+.u-menu-item{border-top:1px solid rgba(195,198,213,0.12);}
.u-menu-item:active{background:#f8fafc;}
.u-menu-left{display:flex;align-items:center;gap:12px;}
.u-menu-icon{width:36px;height:36px;border-radius:10px;background:#eff6ff;display:flex;align-items:center;justify-content:center;}
.u-menu-icon .material-symbols-outlined{font-size:20px;color:#094cb2;}
.u-menu-name{font-size:14px;font-weight:500;}
.u-menu-right{display:flex;align-items:center;gap:6px;}
.u-menu-tag{font-size:11px;padding:2px 8px;border-radius:50px;background:#f1f5f9;color:#64748b;}
.u-menu-tag.ok{background:#eff6ff;color:#094cb2;}
.u-menu-tag.done{background:#dcfce7;color:#166534;}
.u-menu-arrow{font-size:18px;color:#94a3b8;}

/* ===== Bank Card ===== */
.u-bank-card{background:linear-gradient(135deg,#1e3a8a,#3366cc);border-radius:16px;padding:20px;color:#fff;position:relative;overflow:hidden;}
.u-bank-card-bg{position:absolute;right:-10px;bottom:-10px;opacity:0.08;}
.u-bank-card-bg .material-symbols-outlined{font-size:100px;}
.u-bank-name{font-size:14px;font-weight:600;margin-bottom:8px;}
.u-bank-type{font-size:12px;opacity:0.75;margin-bottom:16px;}
.u-bank-num{font-family:'Noto Serif',serif;font-size:18px;letter-spacing:0.15em;}
.u-bank-del{position:absolute;top:16px;right:16px;font-size:12px;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.15);padding:4px 10px;border-radius:50px;}

/* ===== QR Code ===== */
.u-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;}
.u-qr-box{width:180px;height:180px;padding:12px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);}
.u-qr-box img,.u-qr-box>div{width:100%;height:100%;}
.u-qr-label{font-size:13px;color:#64748b;text-align:center;}
.u-qr-id{font-family:'Noto Serif',serif;font-size:18px;font-weight:700;color:#094cb2;}

/* ===== Msg Box ===== */
.u-msgbox-overlay{display:none;position:fixed;inset:0;z-index:10000;background:rgba(26,28,32,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);justify-content:center;align-items:center;}
.u-msgbox-overlay.show{display:flex;}
.u-msgbox{width:85%;max-width:320px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,0.1);animation:msgIn 0.3s cubic-bezier(0.16,1,0.3,1);}
@keyframes msgIn{from{transform:scale(0.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.u-msgbox-title{padding:16px 20px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:14px;color:#fff;background:linear-gradient(135deg,#094cb2,#3366cc);}
.u-msgbox-content{padding:20px;font-size:14px;line-height:1.6;color:#1b1c1d;}
.u-msgbox-actions{padding:12px 20px;display:flex;justify-content:flex-end;gap:10px;}
.u-msgbox-btn{padding:8px 20px;font-size:13px;font-weight:500;border:none;border-radius:8px;cursor:pointer;background:#094cb2;color:#fff;}
