:root{--primary: #B91C1C;--primary-light: #DC2626;--primary-dark: #991B1B;--bg: #F9FAFB;--surface: #FFFFFF;--text: #111827;--text-secondary: #6B7280;--border: #E5E7EB;--success: #059669;--warning: #D97706;--radius: 12px;--radius-sm: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.page{min-height:100vh;padding:16px;max-width:480px;margin:0 auto}.page-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-top:8px}.page-header h1{font-size:24px;font-weight:700}.back-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:4px}.card{background:var(--surface);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 1px 3px #00000014}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:16px;font-weight:600;cursor:pointer;transition:all .15s;width:100%}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-primary:disabled{background:#d1d5db;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary)}.input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:16px;outline:none;transition:border-color .15s}.input:focus{border-color:var(--primary)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.tier-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px}.nav-bottom{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;color:var(--text-secondary);text-decoration:none;font-size:11px;font-weight:500}.nav-item.active{color:var(--primary)}.nav-icon{font-size:22px}.empty-state{text-align:center;padding:48px 16px;color:var(--text-secondary)}.empty-state .icon{font-size:48px;margin-bottom:12px}.loading{display:flex;align-items:center;justify-content:center;padding:48px}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}