@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* 🌊 MODERN OCEAN NAVY THEME */
  --primary: #0EA5E9;  /* Sky Blue */
  --pl: #38BDF8;
  --sec: #2DD4BF;      /* Teal */
  --acc: #8B5CF6;      /* Violet */
  --bg: #172A45;       /* Deep Azure Blue */
  --bg-card: #203A5C;  /* Premium Blue Card */
  --text: #E6F1FF;
  --muted: #8892B0;
  --muted2: #A8B2D1;
  --ok: #10B981;
  --err: #EF4444;
  --grad: linear-gradient(135deg, #0EA5E9, #2DD4BF);
  --grad2: linear-gradient(135deg, #0EA5E9 0%, #8B5CF6 50%, #2DD4BF 100%);
}

html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* Ocean Blue Glowing Backgrounds */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 20px;position:relative;
  background:radial-gradient(ellipse at 20% 50%,rgba(14,165,233,.12) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 20%,rgba(45,212,191,.10) 0%,transparent 50%),var(--bg)}
.auth-bg::before{content:'';position:fixed;width:700px;height:700px;background:radial-gradient(circle,rgba(14,165,233,.15) 0%,transparent 70%);top:-200px;left:-200px;border-radius:50%;pointer-events:none;animation:floatOrb 8s ease-in-out infinite;z-index:0}
.auth-bg::after{content:'';position:fixed;width:500px;height:500px;background:radial-gradient(circle,rgba(45,212,191,.10) 0%,transparent 70%);bottom:-100px;right:-100px;border-radius:50%;pointer-events:none;animation:floatOrb 10s ease-in-out infinite reverse;z-index:0}

@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.06)}}

.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px}

.auth-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1160px;width:100%;position:relative;z-index:1}

/* Glassmorphism Navy Card */
.auth-card{background:rgba(17,34,64,0.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:44px;position:relative;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);animation:cardIn .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:32px;text-decoration:none}
.brand-logo{width:46px;height:46px;background:var(--grad);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#112240;box-shadow:0 8px 28px rgba(14,165,233,.45);letter-spacing:-1px}
.brand-name{font-size:22px;font-weight:900;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}

.auth-title{font-size:28px;font-weight:800;margin-bottom:6px;letter-spacing:-.8px}
.auth-sub{color:var(--muted2);font-size:15px;margin-bottom:26px}

.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--muted2);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;z-index:1}

.input-wrap input{width:100%;background:#112240;border:1.5px solid rgba(255,255,255,.08);border-radius:14px;padding:15px 44px 15px 48px;color:var(--text);font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:all .3s}
.input-wrap input:focus{border-color:var(--primary);background:rgba(14,165,233,.05);box-shadow:0 0 0 4px rgba(14,165,233,.14)}
.input-wrap input::placeholder{color:var(--muted)}

.pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:4px;transition:color .2s;z-index:2}
.pw-toggle:hover{color:var(--muted2)}

.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:8px;flex-wrap:wrap}

.check-label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted2);cursor:pointer}
.check-label input[type=checkbox]{accent-color:var(--primary);width:15px;height:15px}

.forgot{font-size:14px;color:var(--pl);text-decoration:none;font-weight:600;transition:color .2s;white-space:nowrap}
.forgot:hover{color:var(--sec)}

.btn-primary{width:100%;padding:16px;background:var(--grad);border:none;border-radius:14px;color:#112240;font-weight:800;font-size:16px;cursor:pointer;transition:all .3s;font-family:'Outfit',sans-serif;box-shadow:0 8px 28px rgba(14,165,233,.38);position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent);opacity:0;transition:opacity .3s}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(14,165,233,.52)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none!important}

.switch-auth{text-align:center;margin-top:20px;font-size:14px;color:var(--muted2)}
.switch-auth a{color:var(--pl);text-decoration:none;font-weight:700;transition:color .2s}
.switch-auth a:hover{color:var(--sec)}

.err-msg{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:#FCA5A5;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;animation:shake .4s ease}
.success-msg{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.3);color:#6EE7B7;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.pw-strength{margin-top:8px}
.pw-strength-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.pw-strength-fill{height:100%;border-radius:4px;transition:all .4s;width:0%}
.pw-strength-text{font-size:11px;margin-top:4px;color:var(--muted)}

/* PROMO */
.auth-promo{display:flex;flex-direction:column;gap:28px;animation:promoIn .7s ease both;animation-delay:.1s}
@keyframes promoIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
.promo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.35);padding:8px 18px;border-radius:100px;font-size:13px;color:var(--text);font-weight:600;width:fit-content}
.auth-promo h1{font-size:48px;font-weight:900;line-height:1.08;letter-spacing:-1.5px}
.highlight{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-promo p{color:var(--muted2);font-size:16px;line-height:1.8}
.promo-stats{display:flex;gap:12px}
.stat-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:18px 14px;flex:1;position:relative;overflow:hidden;transition:all .3s}
.stat-item:hover{border-color:rgba(14,165,233,.3);transform:translateY(-3px)}
.stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.stat-num{font-size:20px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.feature-list{display:flex;flex-direction:column;gap:12px}
.feature-item{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted2)}
.feature-icon{width:34px;height:34px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}

@media(max-width:1020px){.auth-wrapper{grid-template-columns:1fr;max-width:520px}.auth-promo{display:none}}
@media(max-width:560px){.auth-card{padding:30px 22px;border-radius:22px}.auth-title{font-size:24px}.form-2col{grid-template-columns:1fr}.auth-bg{padding:16px 14px}}