:root{
  --white:#FFFFFF;
  --bg:#F8FAFC;
  --bg-deep:#F1EEFC;
  --ink:#1E1B2E;
  --ink-soft:#413B54;
  --muted:#79758C;
  --line:rgba(139,92,246,0.12);
  --violet:#8B5CF6;
  --violet-deep:#7C3AED;
  --pink:#EC4899;
  --grad: linear-gradient(135deg,#A855F7 0%, #EC4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(168,85,247,0.14) 0%, rgba(236,72,153,0.14) 100%);
  --shadow-soft: 0 20px 60px -20px rgba(124,58,237,0.18);
  --shadow-card: 0 10px 34px -14px rgba(76,29,149,0.14);
  --radius-pill: 999px;
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(168,85,247,0.25);}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select{font-family:inherit;}
a{color:inherit; text-decoration:none;}

/* ===== Ambient background mesh ===== */
.mesh{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh span{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35;
}
.mesh .b1{width:520px; height:520px; background:#C4B5FD; top:-160px; left:-120px; animation:drift1 22s ease-in-out infinite;}
.mesh .b2{width:480px; height:480px; background:#F9A8D4; bottom:-180px; right:-140px; animation:drift2 26s ease-in-out infinite;}
.mesh .b3{width:360px; height:360px; background:#DDD6FE; top:40%; left:60%; animation:drift1 30s ease-in-out infinite reverse;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,60px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-30px);}}

/* ===== Equalizer signature element ===== */
.eq{display:inline-flex; align-items:flex-end; gap:3px; height:18px;}
.eq span{
  width:3px; border-radius:2px; background:var(--grad);
  animation:eqbounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(1){height:40%; animation-delay:0s;}
.eq span:nth-child(2){height:100%; animation-delay:0.15s;}
.eq span:nth-child(3){height:60%; animation-delay:0.3s;}
.eq span:nth-child(4){height:85%; animation-delay:0.45s;}
.eq span:nth-child(5){height:50%; animation-delay:0.6s;}
@keyframes eqbounce{
  0%,100%{transform:scaleY(0.35);}
  50%{transform:scaleY(1);}
}
.eq.eq-lg span{width:5px; border-radius:3px;}
.eq.eq-lg{height:34px;}

.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:var(--shadow-card);
}
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:700; font-size:14.5px;
  background:var(--grad); color:#fff; letter-spacing:0.2px;
  box-shadow:0 14px 30px -10px rgba(168,85,247,0.55);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pill-btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px -8px rgba(168,85,247,0.6);}

/* ===== LOGIN VIEW ===== */
#view-login{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 24px; z-index:1;
}
.login-shell{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1px 1fr;
  width:100%; max-width:920px;
  border-radius:32px;
  overflow:hidden;
}
.login-brand{
  background:linear-gradient(160deg,#8B5CF6 0%, #7C3AED 45%, #EC4899 130%);
  padding:52px 42px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center;
  color:#fff; position:relative; overflow:hidden;
}
.login-brand::before{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,0.10); top:-90px; right:-90px;
}
.login-brand::after{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,0.08); bottom:-70px; left:-50px;
}
.login-logo{display:flex; align-items:center; justify-content:center; width:100%; text-align:center; position:relative; z-index:1;}
.login-logo img{margin:0 auto; display:block;}
.login-logo .mark{
  width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.35);
}
.login-logo .mark svg{width:22px; height:22px;}
.login-logo .name{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:0.3px;}
.login-logo .name small{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; opacity:0.85; letter-spacing:0.4px; text-transform:uppercase; margin-top:1px;}

.login-brand-mid{position:relative; z-index:1; margin:auto 0; display:flex; align-items:center; justify-content:center; width:100%; text-align:center;}
.login-brand-mid img{margin:0 auto; display:block;}

.login-brand-foot{position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:22px; font-size:12px; opacity:0.75; width:100%; text-align:center;}

.login-divider{background:linear-gradient(to bottom, transparent, rgba(139,92,246,0.25), transparent);}

.login-form{
  background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
  padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
}
.login-form h2{font-size:22px; font-weight:800; margin-bottom:6px; font-family:var(--font-display); color:var(--ink);}
.login-form .sub{font-size:13.5px; color:var(--muted); margin-bottom:30px;}
.field{margin-bottom:18px;}
.field label{
  display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:7px;
  font-family:var(--font-display); letter-spacing:0.2px;
}
.field .control{
  position:relative; display:flex; align-items:center;
}
.field .control svg{position:absolute; left:16px; width:17px; height:17px; color:var(--violet); opacity:0.7;}
.field input, .field select{
  width:100%; padding:13px 16px 13px 44px; border-radius:14px; border:1.5px solid #EAE6F8;
  background:#FBFAFF; font-size:14px; color:var(--ink); transition:border-color .2s, background .2s;
  appearance:none;
}
.field select{padding-right:38px;}
.field .chev{left:auto; right:16px;}
.field input:focus, .field select:focus{outline:none; border-color:var(--violet); background:#fff; box-shadow:0 0 0 4px rgba(139,92,246,0.12);}
.field input::placeholder{color:#B7B2CC;}
.login-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; font-size:12.5px;}
.login-row label{display:flex; align-items:center; gap:7px; color:var(--muted); cursor:pointer;}
.login-row a{color:var(--violet-deep); font-weight:600;}
.login-form .pill-btn{width:100%; padding:15px;}
.login-help{margin-top:24px; text-align:center; font-size:12.5px; color:var(--muted);}

@media (max-width: 980px){
  .login-shell{grid-template-columns:1fr; max-width:440px;}
  .login-divider, .login-brand-foot, .login-brand-mid{display:none !important;}
  .login-brand{padding:24px; align-items:center; justify-content:center;}
  .login-logo{justify-content:center !important; width:100%;}
}