:root { color-scheme: dark; --purple: #9e45ff; --deep: #070711; --line: #62507f; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, Arial, sans-serif; background: #06060d url('background.png') center/cover no-repeat fixed; color: #fff; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(4,4,10,.78) 0%, rgba(4,4,11,.30) 52%, rgba(5,4,13,.18)); pointer-events: none; }
.login-page { min-height: 100vh; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px,1fr) minmax(420px,570px); align-items: center; gap: clamp(32px,7vw,140px); padding: clamp(36px,7vw,110px); }
.brand-panel { align-self: start; padding-top: 4vh; max-width: 520px; }
.brand-logo { width: min(290px,80%); height: auto; display:block; filter: drop-shadow(0 10px 20px rgba(91,33,220,.28)); }
h1 { margin: clamp(54px,8vh,100px) 0 24px; font-size: clamp(42px,4.6vw,74px); line-height: 1.05; letter-spacing: -0.06em; font-weight: 800; }
h1 span { display: block; color: var(--purple); }
.pallas-label,.welcome { display:inline-block; margin: 0; padding: 8px 18px; border: 1px solid #a34eff; border-radius: 999px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 11px; color: #dfc3ff; background: rgba(73,27,117,.16); }
.login-card { width:100%; background: linear-gradient(135deg,rgba(18,19,42,.94),rgba(9,9,23,.92)); border:1px solid rgba(166,95,255,.76); border-radius: 32px; padding: clamp(34px,4vw,64px); box-shadow: 0 28px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(14px); }
.login-card h2 { margin: 24px 0 10px; font-size: clamp(31px,3.1vw,47px); letter-spacing:-.04em; }.intro { color:#c7c6d8; font-size:16px; line-height:1.55; margin:0 0 29px; }
form { display:grid; gap:9px; } label { font-size:14px; font-weight:600; } input { min-width:0; width:100%; height:55px; margin-bottom:13px; color:#fff; border:1px solid #4b4c70; border-radius:13px; padding:0 17px; background:rgba(22,24,46,.82); font:inherit; outline:none; } input:focus { border-color:var(--purple); box-shadow: 0 0 0 3px rgba(158,69,255,.16); }.password-wrap { position:relative; }.password-wrap span { position:absolute; right:17px; top:16px; color:#bca6de; font-size:17px; }.password-wrap input { padding-right:45px; }.form-options { display:flex; justify-content:space-between; align-items:center; gap:16px; margin: -3px 0 19px; }.remember { display:flex; align-items:center; gap:8px; font-size:13px; color:#cfcede; font-weight:400; }.remember input{ width:18px;height:18px;margin:0;accent-color:#913dff; }.form-options a,.signup a { color:#c061ff; } a { text-decoration:none; }.form-options a { font-size:13px; text-decoration:underline; }
button { height:58px; border:0; border-radius:15px; cursor:pointer; background:linear-gradient(100deg,#af55ff,#7220f5); color:#fff; font:700 18px Inter,sans-serif; box-shadow:0 12px 25px rgba(117,34,245,.26); }button span{font-size:27px;margin-left:11px;vertical-align:-2px;}.divider{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;color:#bab6ca;font-size:13px;margin:31px 0 25px}.divider span{height:1px;background:#49475e}.google{height:55px;display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid #54536c;border-radius:14px;color:#ecebf5;font-weight:600}.google b{font-size:21px;color:#fff;background:conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.signup{text-align:center;color:#c8c6d2;font-size:13px;margin:27px 0 0}
.login-page { grid-template-columns:minmax(0,1fr) minmax(340px,460px); gap:5vw; padding:32px 6vw; }
.brand-panel { min-width:0; container-type:inline-size; padding-top:6vh; }
h1 { font-size:clamp(24px,9.7cqw,54px); line-height:1.13; letter-spacing:-.045em; margin:48px 0 24px; }
h1 span { white-space:nowrap; }
h1 .headline-first { color:#fff; }
.login-card { padding:32px 36px; border-radius:28px; }
.login-card h2 { margin:18px 0 10px; font-size:34px; }
.intro { font-size:14px; margin-bottom:22px; }
input { height:48px; margin-bottom:8px; }
.password-wrap span { top:13px; }
.form-options { margin-bottom:12px; gap:8px; }
button { height:50px; }
.signup { margin-top:22px; }
@media(max-width:760px){.login-page{grid-template-columns:minmax(0,1fr);padding:28px 24px;gap:32px}.brand-panel{padding:0;max-width:520px;width:100%;justify-self:center}h1{margin:24px 0 18px}.login-card{max-width:460px;justify-self:center}.brand-logo{width:230px}}
@media(max-width:480px){.login-card{padding:26px 22px;border-radius:24px}.login-card h2{font-size:29px}.form-options{flex-wrap:wrap;gap:12px}.remember,.form-options a{font-size:12px}}
@media(min-width:761px) and (max-height:650px){.login-page{padding-top:16px;padding-bottom:16px}.login-card{padding:24px 30px}.login-card h2{margin-top:12px}.intro{margin-bottom:14px}form{gap:6px}.signup{margin-top:16px}}