:root {--primary: #FF725E;--primary-hover: #e05b48;--primary-soft: rgba(255, 114, 94, 0.12);--navy-dark: #071A2B;--navy: #0F172A;--surface-bg: #F8FAFC;--card-bg: #FFFFFF;--text-main: #0F172A;--text-sub: #64748B;--border-color: #E2E8F0;}
* { -webkit-tap-highlight-color: transparent; user-select: none; box-sizing: border-box; }
body {font-family: 'Plus Jakarta Sans', sans-serif;background: var(--surface-bg);color: var(--text-main);min-height: 100vh;display: flex;flex-direction: column;}
.text-primary {--bs-text-opacity: 1;color: rgba(var(--text-white),var(--bs-text-opacity)) !important;}
.bg-success {--bs-bg-opacity: 1;background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity)) !important;}
/* ================= DESKTOP STYLING ================= */
.top-bar { background-color: var(--navy-dark); font-size: 13px; font-weight: 500; }
.ticker-bar{background: linear-gradient(90deg,#00776E 0%,#006E66 100%);color: #FFF;font-size: 13px;font-weight: 600;padding: 8px 0;overflow: hidden;white-space: nowrap;}
.ticker-content {display: inline-block;animation: ticker 25s linear infinite;}.ticker-content:hover {animation-play-state: paused;}
@keyframes ticker {0% {transform:translateX(100%);}100% {transform:translateX(-100%);}}
.app-header{background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1040;}
.brand-logo{font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:-0.3px; }
.brand-logo img{width:42px;margin-right:10px;}
.btn-app-primary {background: var(--primary); color: #FFFFFF; border: none;border-radius: 50px; font-weight: 700; padding: 10px 24px;transition: all 0.25s ease;}
.btn-app-primary:hover { background: var(--primary-hover); color: #FFFFFF; transform: translateY(-1px); }
.desktop-auth-wrapper { padding: 60px 0; flex: 1; }
.auth-card-web {background: #ffffff;border-radius: 24px;border: 1px solid var(--border-color);box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);overflow: hidden;}
.auth-banner-side {background: linear-gradient(135deg, var(--navy-dark), var(--navy));padding: 48px;color: #ffffff;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.auth-tab-group {background: #F1F5F9;padding: 5px;border-radius: 16px;display: flex;gap: 5px;}
.auth-tab-btn {flex: 1;border: none;background: transparent;padding: 12px;font-weight: 700;font-size: 14px;color: var(--text-sub);border-radius: 12px;transition: all 0.25s ease;cursor: pointer;}
.auth-tab-btn.active {background: #FFFFFF;color: var(--navy);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);}
.custom-input-group {position:relative;display:flex;align-items:center;width:100%;}
.custom-input-group .input-icon {position: absolute;left: 16px;color: var(--text-sub);font-size: 20px;z-index: 5;}
.custom-input-group .toggle-pass {position: absolute;right: 16px;color: var(--text-sub);cursor: pointer;z-index: 5;}
.form-control-app {width: 100%;background: #F8FAFC;border: 1.5px solid var(--border-color);font-size: 14px;font-weight: 500;padding: 14px 16px 14px 48px;border-radius: 14px;transition: all 0.2s ease;color: var(--text-main);}
.form-control-app:focus {outline: none;background: #FFFFFF;border-color: var(--primary);box-shadow: 0 0 0 4px var(--primary-soft);}
.btn-action-primary {background: var(--primary);color: #FFFFFF;border: none;border-radius: 14px;padding: 14px;font-weight: 700;font-size: 15px;width: 100%;box-shadow: 0 8px 20px rgba(255, 114, 94, 0.25);transition: all 0.25s ease;}.btn-action-primary:active { transform: scale(0.98); }
/* Footer Styling */
.app-footer { background-color: var(--navy-dark); color: #94A3B8; margin-top: auto; }
.footer-bottom-bar {border-top: 1px solid rgba(255, 255, 255, 0.08);padding: 20px 0;font-size: 13px;}.text-white-50 {--bs-text-opacity: 1;color: rgba(255,255,255,.5) !important;}
/* ================= NATIVE MOBILE APP STYLING ================= */
@media (max-width: 767.98px) {
.top-bar, .app-header, .app-footer, .desktop-auth-wrapper {display: none !important;}
.ticker-bar{ display:none !important;}
body {background: #0F172A;padding: 0;margin: 0;height: 100vh;overflow: hidden;}
.mobile-app-container {display: flex !important;flex-direction: column;height: 100vh;width: 100vw;background: var(--navy);}
/* Native App Header Area */
.app-top-header { min-height:5vh;padding:50px 30px;text-align: center;color: #FFFFFF;position: relative;}
.app-header-brand img {width: 58px;height: auto;filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));}
/* Native App Sheet / Card Area */
.app-bottom-sheet {flex: 1;background: #FFFFFF;border-top-left-radius: 32px;border-top-right-radius: 32px;padding: 28px 24px env(safe-area-inset-bottom, 24px);display: flex;flex-direction: column;justify-content: space-between;overflow-y: auto;box-shadow: 0 -10px 40px rgba(0,0,0,0.25);}
.app-sheet-handle {width: 40px;height: 4px;background: #E2E8F0;border-radius: 10px;margin: 0 auto 20px;}
.app-auth-nav {background: #F1F5F9;padding: 4px;border-radius: 16px;display: flex;margin-bottom: 24px;}
.app-auth-nav button {flex: 1;border: none;padding: 12px;font-weight: 700;font-size: 14px;color: var(--text-sub);border-radius: 12px;background: transparent;transition: all 0.25s ease;}
.app-auth-nav button.active {background: #FFFFFF;color: var(--navy);box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.mobile-back-link {color: var(--text-sub);font-size: 13px;font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;gap: 6px;margin-bottom:80px;}
}

@media (min-width: 768px) {
.mobile-app-container {display: none !important;}
}
.app-footer h5 {color: #FFFFFF;font-weight: 700;margin-bottom: 20px;position: relative;}
.app-footer h5::after {content: '';position: absolute;left: 0;bottom: -6px;width: 32px;height: 3px;background-color: var(--coral);border-radius: 2px;}
.footer-link-list {list-style: none;padding: 0;margin: 0;}
.footer-link-list a {color: #94A3B8;text-decoration: none;font-size: 14px;font-weight: 500;transition: all 0.2s ease;display: inline-flex;align-items: center;gap: 8px;}
.footer-newsletter-card {background: rgba(255, 255, 255, 0.03);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 20px;padding: 24px;}
.footer-social-btn {width: 40px;height: 40px;border-radius: 12px;background: rgba(255, 255, 255, 0.06);color: #FFFFFF;display: inline-flex;align-items: center;justify-content: center;text-decoration: none;transition: all 0.3s ease;}
.footer-social-btn:hover {background: var(--coral);color: #FFFFFF;transform: translateY(-3px);}
.errMsg{float:right;font-size:.75rem !important; color:#d65000;}
textarea{resize:none;}