:root{--primary:#246bdb;--ink:#19375b;--muted:#657c96;--line:#deebf8;--soft:#eff6ff;--gradient:linear-gradient(125deg,#20b9cf,#3489ed 60%,#4277eb);--shadow:0 6px 24px rgba(43,100,168,.08)}
body{color:var(--ink);background:linear-gradient(180deg,#e3f2ff,#f4f8fd 420px);background-attachment:fixed;-webkit-tap-highlight-color:transparent}
body:has(.tabbar){padding-bottom:calc(88px + env(safe-area-inset-bottom))}
button,input,textarea{font-family:inherit}a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #88befa;outline-offset:3px}
.header-section,.profile-header,.navbar,.chat-header{background:var(--gradient);color:#fff;box-shadow:none}
.header-section{padding:32px 24px 48px;border-radius:0 0 28px 28px}
.header-section::before,.header-section::after{background:radial-gradient(circle,#ffffff30,transparent 70%)}
.welcome-text p,.user-name{color:#eef9ff}
.profile-header{padding:28px 20px 24px;border-radius:0 0 24px 24px}
.user-avatar{background:#ffffff26;color:#fff;border:1px solid #ffffff50;box-shadow:none;border-radius:22px}
.user-name i{color:#dbfaff}.user-details{min-width:0}.user-phone{overflow-wrap:anywhere}
.quick-stats{background:transparent;padding:0;gap:10px}
.stat-card{background:#fff;border:1px solid #e3efff;border-radius:16px;padding:16px 6px;box-shadow:var(--shadow)}
.info-card,.verify-section,.function-grid,.settings-section,.order-item{background:#fff;border:1px solid #e5eff9;border-radius:20px;box-shadow:var(--shadow)}
.info-card{padding:22px 16px}.card-title,.section-title{color:var(--ink)}
.card-title i,.section-title i,.verify-progress,.stat-icon,.stat-value,.stat-number,.amount-value,.amount-item-value,.info-row .label i,.info-row .value,.order-footer i{color:var(--primary)}
.stat-label,.amount-label,.amount-item-label,.function-text,.verify-card-text{color:var(--muted)}
.stats-grid{gap:8px}.stat-box,.amount-item{background:var(--soft);border-radius:14px;min-width:0;padding:16px 4px}
.stat-value{font-size:clamp(16px,4.8vw,22px);overflow-wrap:anywhere}.amount-item-value{overflow-wrap:anywhere}
.alert-box{background:#fff7e9;border-color:#e6a237}.alert-box i{color:#b87916}.alert-text{color:#80612d;line-height:1.6}
.repay-button,.login-btn,.send-btn{background:var(--gradient);color:#fff;border:0;border-radius:14px;font-weight:600;box-shadow:0 6px 16px #3489ed38}
.repay-button{min-height:50px;padding:12px 20px;gap:8px}.container>.repay-button{margin:20px 16px}
.order-actions{display:grid;gap:12px;padding:16px}.order-actions .repay-button{width:100%;margin:0}
.repay-button:active,.login-btn:active,.send-btn:active{filter:brightness(.94)}
.verify-section{padding:18px 16px;margin-top:16px}
.verify-scroll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible;padding-bottom:0}
.verify-card{min-width:0;padding:16px 2px;border:1px solid var(--line);background:#f7faff}
.verify-card.verified{background:#edf6ff;border:1px solid #b9d9ff}.verify-card-icon{font-size:24px;color:#8fa9c7}
.verify-card.verified .verify-card-icon,.verify-card.verified .verify-card-text{color:var(--primary)}.verify-card-text{font-size:12px}
.function-grid{gap:8px;padding:20px 12px}.function-icon,.settings-icon{color:var(--primary);background:#edf5ff;border-radius:16px}.function-text{font-size:12px}
.settings-item{min-height:64px;border-color:#eef3f9}.settings-item:active{background:var(--soft)}
.logout-btn{background:#fff;color:var(--muted);border:1px solid var(--line);box-shadow:none;border-radius:14px;min-height:48px}
.tabbar{background:#fffffff5;border-top:1px solid var(--line);box-shadow:0 -4px 24px #326ca010;height:calc(68px + env(safe-area-inset-bottom));max-width:500px;margin:auto;z-index:100}
.tabbar-item{color:#7e91a7;gap:4px}.tabbar-item.active{color:var(--primary)}.tabbar-item.active i{color:var(--primary);text-shadow:none;filter:none}
.order-header,.order-footer{background:#f7faff;border-color:var(--line);gap:8px;flex-wrap:wrap}.order-no{overflow-wrap:anywhere;min-width:0}
.status-badge{background:#edf5ff;border-color:#c7deff;color:var(--primary);flex-shrink:0}.amount-main{gap:12px;flex-wrap:wrap}
.login-container{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:36px 24px;border-radius:24px}
.login-container h1{color:var(--ink);text-shadow:none;font-size:28px}.logo{border-color:#cce2ff;box-shadow:0 4px 16px #3489ed20}
.login-container input{background:#f5f9ff;color:var(--ink);border:1px solid var(--line);border-radius:14px}.login-container input::placeholder{color:#8094ad}
.login-container input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px #3489ed18}.login-btn{min-height:50px}.login-btn:hover{background:var(--gradient);box-shadow:0 8px 22px #3489ed30}
body:has(.chat-header){height:100dvh;max-width:600px;margin:auto}.chat-header{flex-shrink:0}.chat-header .back-btn{color:#fff;min-width:44px;min-height:44px}
.chat-container,.chat-messages{min-height:0}.message-avatar{background:#438beb;color:#fff}.message-content,.message-bubble{overflow-wrap:anywhere}
.message.sent .message-content,.message.sent .message-bubble{background:var(--gradient);color:#fff}
.message.sent .message-time{color:#e7f4ff}.input-area,.chat-input-area{gap:8px;border-color:var(--line);padding:12px 12px calc(12px + env(safe-area-inset-bottom));flex-shrink:0}
.message-input,.chat-input{min-width:0;background:#f3f8ff;border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.image-btn,.image-upload-btn{color:var(--primary);background:#edf5ff;border-radius:12px;min-width:44px;min-height:44px;flex-shrink:0}
.send-btn{min-width:44px;min-height:44px;flex-shrink:0}.message-image{max-width:100%}
@media(max-width:360px){.verify-scroll{grid-template-columns:repeat(2,minmax(0,1fr))}.function-grid{gap:6px;padding:16px 8px}.amount-grid{gap:6px}.info-card{padding:20px 12px}.stat-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}