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

:root{
  /* 🌙 WINADS — INK & VIOLET PRO THEME */
  --primary:#7C5CFF;
  --pl:#9E86FF;
  --sec:#22D3EE;
  --acc:#F472B6;
  --bg:#0C0B14;
  --bg-card:#15131F;
  --field:#0F0D18;
  --txt:#ECEAF6;
  --muted:#8B87A6;
  --muted2:#A9A5C4;
  --ok:#34D399;
  --err:#FB7185;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#7C5CFF 0%,#B96BFF 100%);
  --grad2:linear-gradient(135deg,#7C5CFF 0%,#22D3EE 100%);
  --on-grad:#0C0B14;
}

html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* Deep ink backdrop with soft violet / cyan aurora */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;position:relative;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(124,92,255,.22) 0%,transparent 60%),
    radial-gradient(760px 460px at 92% 108%,rgba(34,211,238,.14) 0%,transparent 58%),
    var(--bg)}
.auth-bg::before{content:'';position:fixed;width:620px;height:620px;background:radial-gradient(circle,rgba(124,92,255,.16) 0%,transparent 70%);top:-220px;right:-180px;border-radius:50%;pointer-events:none;animation:floatOrb 11s ease-in-out infinite;z-index:0}
.auth-bg::after{content:'';position:fixed;width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,.10) 0%,transparent 70%);bottom:-160px;left:-140px;border-radius:50%;pointer-events:none;animation:floatOrb 13s ease-in-out infinite reverse;z-index:0}

@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-24px) scale(1.05)}}

.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%)}

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

/* Frosted ink card */
.auth-card{background:linear-gradient(180deg,rgba(29,26,42,.86),rgba(17,15,26,.92));backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border:1px solid var(--line2);border-radius:26px;padding:42px;position:relative;overflow:hidden;
  box-shadow:0 44px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);animation:cardIn .65s cubic-bezier(.34,1.4,.64,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}

.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad2)}
.auth-card::after{content:'';position:absolute;top:-140px;right:-120px;width:320px;height:320px;background:radial-gradient(circle,rgba(124,92,255,.20),transparent 68%);pointer-events:none}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:30px;text-decoration:none;position:relative;z-index:1}
.brand-logo{width:46px;height:46px;background:var(--grad);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:var(--on-grad);box-shadow:0 10px 30px rgba(124,92,255,.45);letter-spacing:-.5px}
.brand-name{font-size:21px;font-weight:800;letter-spacing:2.5px;color:var(--txt)}
.brand-name b{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}

.auth-title{font-size:27px;font-weight:800;margin-bottom:6px;letter-spacing:-.7px;position:relative;z-index:1}
.auth-sub{color:var(--muted2);font-size:14.5px;margin-bottom:26px;position:relative;z-index:1}

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

.input-wrap input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:13px;padding:15px 44px 15px 46px;color:var(--txt);font-size:14.5px;font-family:inherit;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.input-wrap input:focus{border-color:var(--primary);background:rgba(124,92,255,.06);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.input-wrap input::placeholder{color:#615D7A}

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

.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:9px;font-size:13.5px;color:var(--muted2);cursor:pointer;position:relative;z-index:1}
.check-label input[type=checkbox]{accent-color:var(--primary);width:15px;height:15px}

.forgot{font-size:13.5px;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:13px;color:var(--on-grad);font-weight:800;font-size:15px;cursor:pointer;transition:transform .25s,box-shadow .25s,filter .25s;font-family:inherit;letter-spacing:.2px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(124,92,255,.34);z-index:1}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);transform:translateX(-120%);transition:transform .7s}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(124,92,255,.5);filter:saturate(1.08)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none!important}

.switch-auth{text-align:center;margin-top:20px;font-size:13.5px;color:var(--muted2);position:relative;z-index:1}
.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(251,113,133,.08);border:1px solid rgba(251,113,133,.32);color:#FDA4AF;padding:12px 15px;border-radius:12px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;animation:shake .4s ease;position:relative;z-index:1}
.success-msg{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.32);color:#6EE7B7;padding:12px 15px;border-radius:12px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;position:relative;z-index:1}
@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,.07);overflow:hidden}
.pw-strength-fill{height:100%;border-radius:4px;transition:all .4s;width:0%}
.pw-strength-text{font-size:11px;margin-top:5px;color:var(--muted);font-weight:600;letter-spacing:.3px}

/* PROMO PANEL */
.auth-promo{display:flex;flex-direction:column;gap:24px;animation:promoIn .75s ease both;animation-delay:.08s}
@keyframes promoIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}

.promo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.34);padding:8px 16px;border-radius:100px;font-size:12.5px;color:var(--txt);font-weight:600;width:fit-content}

.auth-promo h1{font-size:50px;font-weight:800;line-height:1.06;letter-spacing:-1.8px}
.highlight{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-promo>p{color:var(--muted2);font-size:15.5px;line-height:1.8;max-width:460px}

.promo-stats{display:flex;gap:12px}
.stat-item{background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:16px;padding:16px 14px;flex:1;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.stat-item:hover{border-color:rgba(124,92,255,.4);transform:translateY(-3px)}
.stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad2)}
.stat-num{font-size:19px;font-weight:800;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.stat-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600}

.feature-list{display:flex;flex-direction:column;gap:11px}
.feature-item{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted2)}
.feature-icon{width:34px;height:34px;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.24);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}

/* GLOBAL SVG ICON */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle;flex-shrink:0;pointer-events:none}
.ic-12{width:12px;height:12px}
.ic-14{width:14px;height:14px}
.ic-16{width:16px;height:16px}
.ic-20{width:20px;height:20px}
.ic-24{width:24px;height:24px}
.ic-28{width:28px;height:28px}
.ic-32{width:32px;height:32px}
.ic-fill{fill:currentColor;stroke:none}
.input-icon .ic{width:16px;height:16px;color:var(--muted)}
.feature-icon .ic{width:16px;height:16px;color:var(--sec)}
.promo-badge .ic{width:14px;height:14px;color:var(--pl)}
.pw-toggle .ic{width:16px;height:16px}
.err-msg .ic,.success-msg .ic{width:15px;height:15px;flex-shrink:0}
.btn-primary .ic{width:16px;height:16px}

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