.fw-app-root { --fw-red: #FF3B30; --fw-blue: #007AFF; --fw-green: #34C759; --fw-pink: #FF2D55; --fw-black: #1C1C1E; --fw-white: #FFFFFF; --fw-bg: #F2F2F7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.fwallet-login-wrapper { display: flex; justify-content: center; padding: 20px 10px; width: 100%; box-sizing: border-box; }
.fwallet-login-container { width: 100%; max-width: 450px; background: linear-gradient(135deg, #FF3B30, #FF2D55); color: #fff; border-radius: 24px; padding: 30px; box-shadow: 0 15px 40px rgba(255, 45, 85, 0.3); box-sizing: border-box; }
.fw-login-box { background: #ffffff; border-radius: 20px; padding: 25px; text-align: left; margin-top: 20px; transition: 0.3s; }
.fw-login-input { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid #ddd; margin-bottom: 15px; font-size: 15px; background: #F2F2F7; color: #1C1C1E; box-sizing: border-box; outline:none; transition:0.3s; }
.fw-login-input:focus { border-color: #007AFF; box-shadow: 0 0 0 3px rgba(0,122,255,0.15); }
.fw-login-btn { width: 100%; background: linear-gradient(135deg, #007AFF, #0056b3); color: white; border: none; padding: 15px; border-radius: 16px; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 122, 255, 0.3); transition:all 0.3s; }
.fw-login-btn:active { transform:scale(0.96); }
.fw-rm-info { background: rgba(0,0,0,0.15); padding: 15px; border-radius: 16px; margin-top: 20px; text-align: center; border: 1px dashed rgba(255,255,255,0.3); }
.fwallet-app-wrapper { display: flex; justify-content: center; padding: 10px 0; width: 100%; box-sizing: border-box; }
.fwallet-app-container { width: 100%; max-width: 650px; background: var(--fw-bg); border-radius: 24px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); position: relative; overflow: hidden; box-sizing:border-box; }
.fw-card { padding: 25px; border-radius: 20px; text-align: center; margin-bottom: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); color: var(--fw-white); box-sizing:border-box; }
.fw-bg-blue { background: linear-gradient(135deg, #007AFF, #0056b3); } 
.fw-bg-pink { background: linear-gradient(135deg, #FF2D55, #c81b3f); } 
.fw-bg-green { background: linear-gradient(135deg, #34C759, #248a3d); } 
.fw-bg-black { background: linear-gradient(135deg, #1C1C1E, #3a3a3c); } 
.fw-bg-white { background: var(--fw-white); color: var(--fw-black); }
.fw-card h2 { margin: 0 0 10px 0; font-size: 18px; font-weight: 600; opacity: 0.9; }
.fw-balance-wrap { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 15px 0; width: 100%; }
.fw-balance { font-size: clamp(24px, 6vw, 42px); font-weight: 800; margin: 0; letter-spacing: -1px; word-break: break-word; line-height: 1.2; max-width: 85%; }
.fw-sync-icon { width: 38px; height: 38px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s; flex-shrink: 0; }
.fw-sync-icon:active { transform: scale(0.9); }
@keyframes fwSpin { 100% { transform: rotate(360deg); } } 
.fw-syncing svg { animation: fwSpin 1s infinite; }
.fw-btn { border: none; padding: 15px 10px; border-radius: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; }
.fw-btn:active { transform: scale(0.96); } 
.fw-text-white { color: white !important; } 
.fw-api-list { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; max-height: 200px; overflow-y: auto; }
.fw-api-item { background: rgba(255,255,255,0.1); padding: 12px 15px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: 13px; border: 1px solid rgba(255,255,255,0.2); }
.fw-api-item button { background: var(--fw-blue); color: white; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.fw-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 9999999; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; align-items: flex-end; justify-content: center; }
.fw-modal-overlay.active { opacity: 1; visibility: visible; }
.fw-modal-content { background: var(--fw-bg); width: 100%; max-width: 500px; border-radius: 30px 30px 0 0; padding: 30px 25px 40px; transform: translateY(100%); transition: transform 0.4s; box-shadow: 0 -10px 40px rgba(0,0,0,0.15); box-sizing: border-box; }
.fw-modal-overlay.active .fw-modal-content { transform: translateY(0); }
.fw-modal-handle { width: 45px; height: 6px; background: #ccc; border-radius: 10px; margin: 0 auto 25px; }
.fw-modal-input { width: 100%; padding: 15px; border-radius: 15px; border: 1px solid #E5E5EA; margin-bottom: 15px; font-size: 15px; background: var(--fw-white); outline: none; box-sizing: border-box; transition: 0.3s; }
.fw-modal-input:focus { border-color: var(--fw-blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.15); }
@keyframes fwPopIn { to { transform:scale(1); } }