.mobile-app{max-width:430px;margin:0 auto;min-height:100vh;background:#f3f4f6;position:relative;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}@supports (padding: env(safe-area-inset-top)){:root{--safe-area-top: env(safe-area-inset-top);--safe-area-bottom: env(safe-area-inset-bottom);--safe-area-left: env(safe-area-inset-left);--safe-area-right: env(safe-area-inset-right)}}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 12px #10b9814d}.btn-primary:active{background:#059669}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}.btn-secondary:active{background:#e5e7eb}.btn-sm{padding:8px 16px;font-size:13px}.input{width:100%;padding:14px 16px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px;background:#fff;transition:border-color .2s;-webkit-appearance:none}.input:focus{outline:none;border-color:#10b981}.input::placeholder{color:#9ca3af}::-webkit-scrollbar{display:none}:root{--color-primary: #10b981;--color-primary-light: #34d399;--color-primary-dark: #059669;--color-primary-bg: rgba(16, 185, 129, .1);--color-secondary: #3b82f6;--color-secondary-light: #60a5fa;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #06b6d4;--color-text: #1f2937;--color-text-secondary: #6b7280;--color-text-muted: #9ca3af;--color-border: #e5e7eb;--color-bg: #f3f4f6;--color-bg-card: #ffffff;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--nav-height: 48px;--tab-height: 56px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flex{display:flex}.flex-col{flex-direction:column}.flex-center{justify-content:center;align-items:center}.flex-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.text-center{text-align:center}.text-sm{font-size:var(--font-size-sm)}.text-lg{font-size:var(--font-size-lg)}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-primary{color:var(--color-primary)}.font-medium{font-weight:500}.font-bold{font-weight:600}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:0 2px 8px #0000000a}.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:500;border:none;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:0 4px 12px #10b9814d}.btn-primary:active{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-block{width:100%}.btn-sm{padding:8px 16px;font-size:var(--font-size-sm)}.btn-lg{padding:16px 32px;font-size:var(--font-size-lg)}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);gap:var(--spacing-md)}.loading-text{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center}.empty-icon{width:80px;height:80px;margin-bottom:var(--spacing-md);opacity:.5}.empty-text{color:var(--color-text-muted);font-size:var(--font-size-sm)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center}.error-icon{width:64px;height:64px;color:var(--color-error);margin-bottom:var(--spacing-md)}.error-text{color:var(--color-error);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.input{width:100%;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-md);background:#fff;transition:border-color .2s}.input:focus{outline:none;border-color:var(--color-primary)}.input::placeholder{color:var(--color-text-muted)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.slide-up-enter-active,.slide-up-leave-active{transition:all .3s ease}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(20px)}.safe-area-top{padding-top:var(--safe-area-top)}.safe-area-bottom{padding-bottom:var(--safe-area-bottom)}