/* ==== Meta Wealth AI AUTH PAGES (login.html / signup.html) ==== */
.auth-body{min-height:100vh;overflow-x:hidden;position:relative}
.auth-nav{padding:16px 32px}
.auth-nav .nav-actions{gap:14px}
/* Animated background elements */
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.auth-bg .auth-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;
animation:orbFloat 14s ease-in-out infinite}
.auth-bg .o1{width:520px;height:520px;background:#7ff2ff;top:-160px;left:-160px}
.auth-bg .o2{width:600px;height:600px;background:#3ecfe5;bottom:-240px;right:-200px;opacity:.28;animation-delay:-4s}
.auth-bg .o3{width:340px;height:340px;background:#a78bfa;top:50%;left:55%;opacity:.22;animation-delay:-8s}
@keyframes orbFloat{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(30px,-40px) scale(1.08)}
}
.auth-bg .auth-grid{position:absolute;inset:0;
background-image:
linear-gradient(rgba(127,242,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(127,242,255,.06) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
#authParticles{position:absolute;inset:0;width:100%;height:100%}
/* Layout */
.auth-shell{
position:relative;z-index:2;
max-width:1180px;margin:0 auto;padding:120px 32px 60px;
display:grid;grid-template-columns: 1.05fr .95fr;gap:44px;align-items:center;
}
/* Card */
.auth-card{
background:linear-gradient(180deg, rgba(18,34,52,.85), rgba(11,24,38,.85));
border:1px solid var(--border);border-radius:22px;
padding:40px 38px;backdrop-filter:blur(18px);
box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(127,242,255,.05) inset;
}
.auth-title{font-size:clamp(30px,3.6vw,44px);line-height:1.05;margin-top:10px}
.auth-title .accent{color:var(--accent);text-shadow:0 0 22px rgba(127,242,255,.4)}
.auth-sub{color:var(--muted);margin-top:10px;font-size:14px;line-height:1.7;max-width:440px}
/* Form */
.auth-form{margin-top:28px;display:grid;gap:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--muted)}
.field input{
width:100%;background:rgba(0,0,0,.35);border:1px solid var(--border);
color:var(--ink);font-family:var(--sans);font-size:15px;
padding:14px 16px;border-radius:12px;outline:none;
transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{color:#5f7789}
.field input:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(127,242,255,.15), 0 0 24px rgba(127,242,255,.15);
background:rgba(0,0,0,.5);
}
.row-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer}
.check input{accent-color:var(--accent);width:16px;height:16px}
.text-link{color:var(--accent);border-bottom:1px dashed rgba(127,242,255,.4)}
.text-link.small{font-size:13px}
.glow-btn.full{width:100%;text-align:center}
.form-msg{min-height:18px;font-family:var(--mono);font-size:12px;letter-spacing:1px}
.form-msg.error{color:var(--down)}
.form-msg.ok{color:var(--up);text-shadow:0 0 10px rgba(127,242,255,.4)}
.auth-alt{margin-top:22px;color:var(--muted);font-size:14px;text-align:center}
/* Visual side */
.auth-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.auth-robot-wrap{position:relative;width:340px;height:340px;display:flex;align-items:center;justify-content:center}
.auth-ring{position:absolute;border-radius:50%;border:1px dashed rgba(127,242,255,.4)}
.auth-ring.r1{width:320px;height:320px;animation:spin 22s linear infinite}
.auth-ring.r2{width:230px;height:230px;border-style:solid;border-color:rgba(127,242,255,.2);
box-shadow:0 0 60px rgba(127,242,255,.25) inset;animation:spin 14s linear infinite reverse}
.auth-robot{width:260px;height:auto;filter:drop-shadow(0 24px 40px rgba(127,242,255,.35));position:relative;z-index:2}
.auth-glasses{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;z-index:3;pointer-events:none}
.auth-glasses .lens{width:52px;height:36px;border:2.5px solid #7ff2ff;border-radius:10px;
background:rgba(127,242,255,.18);box-shadow:0 0 18px rgba(127,242,255,.6), inset 0 0 10px rgba(127,242,255,.4)}
.auth-glasses .bridge{width:10px;height:2.5px;background:#7ff2ff;box-shadow:0 0 8px #7ff2ff}
.auth-tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);
border:1px solid var(--border);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.35)}
.auth-tag .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);
box-shadow:0 0 10px var(--accent);margin-right:8px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.auth-quote{font-size:22px;line-height:1.35;max-width:360px;color:var(--ink)}
.auth-perks{list-style:none;display:grid;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--muted)}
.auth-perks li{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.25)}
/* Responsive */
@media (max-width: 980px){
.auth-shell{grid-template-columns:1fr;padding-top:100px;gap:30px}
.auth-visual{order:-1}
.auth-robot-wrap{width:260px;height:260px}
.auth-robot{width:200px}
.auth-ring.r1{width:250px;height:250px}
.auth-ring.r2{width:180px;height:180px}
}
@media (max-width: 560px){
.auth-nav{padding:14px 18px}
.auth-nav .nav-actions .link-btn{display:none}
.auth-shell{padding:100px 16px 40px}
.auth-card{padding:28px 22px;border-radius:18px}
.two-col{grid-template-columns:1fr}
.auth-title{font-size:30px}
.auth-robot-wrap{width:220px;height:220px}
.auth-robot{width:170px}
.auth-ring.r1{width:210px;height:210px}
.auth-ring.r2{width:150px;height:150px}
.auth-glasses .lens{width:40px;height:28px}
}
/* ---- Signup extras: phone / password / captcha rows ---- */
.phone-row{display:flex;gap:8px;align-items:stretch}
.phone-code{display:flex;align-items:center;justify-content:center;
padding:0 14px;border:1px solid rgba(127,242,255,.25);border-radius:10px;
font-family:var(--mono);font-size:13px;color:#7ff2ff;background:rgba(127,242,255,.06)}
.phone-row input{flex:1}
.pass-row{position:relative;display:flex;align-items:center}
.pass-row input{flex:1;padding-right:44px}
.pass-toggle{position:absolute;right:10px;background:transparent;border:0;
color:#7ff2ff;cursor:pointer;font-size:16px;line-height:1}
.captcha-row{display:flex;gap:10px;align-items:stretch}
.captcha-row input{flex:1}
.captcha-box{display:flex;align-items:center;justify-content:center;
min-width:120px;padding:0 16px;border:1px solid rgba(127,242,255,.35);
border-radius:10px;background:rgba(127,242,255,.08);color:#eaf6ff;
font-family:var(--mono);font-weight:600;letter-spacing:4px;
user-select:none;cursor:pointer}
.captcha-box:hover{background:rgba(127,242,255,.14)}