/* ============================================================ login-native.css — PowerTech login (native app only) INERT on the website: every rule is scoped under `.is-native-app` (set on by the inline head guard in login.html, and on by mobile-shell.js). The website keeps its desktop split login layout (brand panel + form panel). On native, the desktop split layout is converted into a clean mobile-app login: an orange brand banner up top, then a single full-width form card with app-style inputs, segmented tabs and a big orange Sign-In button. ============================================================ */ .is-native-app body { display: block !important; height: auto !important; min-height: 100vh; overflow: auto !important; overflow-x: hidden; background: #f1f5f9 !important; } /* hide mobile-shell's fixed auth bar — we render our own branded banner below; avoids a duplicate top bar. */ .is-native-app .pt-mobile-auth-bar { display: none !important; } /* ---- Wrapper: single column, full height, scroll ---- */ .is-native-app .auth-wrapper { display: block !important; flex-direction: column !important; width: 100%; max-width: 100%; height: auto !important; min-height: 100vh; overflow: visible !important; /* mobile-app.css reserves 56px top padding here for the fixed pt-mobile-auth-bar, but this layout hides that bar and renders its own branded banner flush to the top. Zero it out so the orange banner meets the roof with no gray strip above it. !important overrides mobile-app.css's higher-specificity `body.is-native-app .auth-wrapper` rule. */ padding-top: 0 !important; padding-bottom: 0 !important; } /* ---- Brand panel -> compact orange banner ---- */ .is-native-app .auth-brand { flex: 0 0 auto !important; width: 100% !important; height: auto !important; background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; padding: calc(env(safe-area-inset-top) + 10px) 24px 26px !important; display: block !important; overflow: visible !important; } .is-native-app .auth-brand::before, .is-native-app .auth-brand::after { display: none !important; } .is-native-app .brand-content { max-width: 440px; margin: 0 auto; text-align: center; padding: 0 !important; } .is-native-app .brand-logo { justify-content: center !important; color: #fff !important; margin-bottom: 10px !important; } .is-native-app .brand-logo i { color: #fff !important; font-size: 26px !important; background: rgba(255, 255, 255, 0.22); width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; } .is-native-app .brand-logo span { color: #fff !important; font-size: 20px !important; font-weight: 800 !important; } .is-native-app .brand-tagline { color: #fff !important; font-size: 15px !important; margin-bottom: 0 !important; } .is-native-app .brand-tagline span { color: #fff !important; font-weight: 800; } .is-native-app .brand-subtitle, .is-native-app .brand-illustration, .is-native-app .brand-badges { display: none !important; } /* ---- Form panel -> full width card ---- */ .is-native-app .auth-form-panel { flex: 1 1 auto !important; width: 100% !important; height: auto !important; background: transparent !important; padding: 22px 18px calc(40px + env(safe-area-inset-bottom)) !important; overflow: visible !important; } .is-native-app .auth-form-container { max-width: 440px !important; margin: 0 auto !important; width: 100% !important; padding: 0 !important; } .is-native-app .auth-header { text-align: left; margin-bottom: 18px !important; } .is-native-app .auth-header h1 { font-size: 24px !important; font-weight: 800 !important; color: #0f172a !important; } .is-native-app .auth-header p { font-size: 13px !important; color: #64748b !important; margin-top: 4px !important; } .is-native-app .auth-header a { color: #ea580c !important; font-weight: 700; } /* already-logged-in box */ .is-native-app #already-logged-in { border-radius: 12px !important; } /* ---- Inputs -> app style (44px, rounded, focus orange) ---- */ .is-native-app .form-group { margin-bottom: 14px !important; } .is-native-app .form-group label { font-size: 13px !important; color: #475569 !important; } .is-native-app .input-wrapper input { height: 50px !important; padding: 0 14px 0 44px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 16px !important; background: #fff !important; } .is-native-app .input-wrapper input:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important; } .is-native-app .input-wrapper input:focus + i, .is-native-app .input-wrapper input:focus ~ i { color: #ea580c !important; } .is-native-app .input-wrapper > i { left: 16px !important; font-size: 15px !important; } .is-native-app .input-wrapper .toggle-pw { right: 14px !important; } /* ---- Segmented tab switcher ---- */ .is-native-app .tab-container { display: flex !important; background: #e2e8f0 !important; border-radius: 12px !important; padding: 4px !important; margin-bottom: 18px !important; border: none !important; gap: 4px; } .is-native-app .tab-btn { flex: 1 1 0 !important; justify-content: center !important; height: 42px !important; border-radius: 9px !important; background: transparent !important; color: #475569 !important; border: none !important; font-size: 14px !important; font-weight: 600 !important; } .is-native-app .tab-btn.active { background: #fff !important; color: #ea580c !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; } /* ---- Social buttons ---- */ .is-native-app .social-group { gap: 10px !important; margin-bottom: 16px !important; } .is-native-app .social-btn { flex: 1 1 0 !important; justify-content: center !important; height: 46px !important; border-radius: 12px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; } /* ---- Divider ---- */ .is-native-app .divider { margin: 18px 0 !important; color: #94a3b8 !important; } .is-native-app .divider span { background: transparent !important; color: #94a3b8 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; } .is-native-app .divider::before, .is-native-app .divider::after { background: #e2e8f0 !important; } /* ---- Primary button -> full-width orange ---- */ .is-native-app .btn-primary { width: 100% !important; height: 50px !important; border-radius: 12px !important; background: linear-gradient(135deg, #f59e0b, #ea580c) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border: none !important; margin-top: 6px !important; justify-content: center !important; box-shadow: 0 6px 18px rgba(234, 88, 12, 0.25) !important; } .is-native-app .btn-primary:active { transform: translateY(1px); } .is-native-app .btn-primary:disabled { opacity: 0.6 !important; } /* ---- OTP inputs ---- */ .is-native-app .otp-input-group { gap: 8px !important; justify-content: space-between !important; } .is-native-app .otp-input-group input { width: 44px !important; height: 50px !important; border-radius: 12px !important; border: 1.5px solid #e2e8f0 !important; font-size: 20px !important; font-weight: 700; text-align: center; } /* ---- Footer ---- */ .is-native-app .auth-footer { text-align: center; margin-top: 22px !important; color: #64748b !important; font-size: 13px !important; } .is-native-app .auth-footer a { color: #ea580c !important; font-weight: 600; } .is-native-app .back-link { display: none !important; } /* app has its own nav */ /* ---- Alert + loading ---- */ .is-native-app .alert { border-radius: 12px !important; font-size: 13px !important; } .is-native-app .loading-overlay { background: rgba(15, 23, 42, 0.45) !important; }