:root { --ink:#171a3f; --violet:#262363; --muted:#6f7384; --line:#e5e7ef; --soft:#f5f6fa; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial, Helvetica, sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }

.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(470px, 1.05fr) minmax(500px, .95fr); background:#fff; }
.brand-panel { min-height:100vh; position:relative; overflow:hidden; padding:48px 58px 38px; color:#fff; display:flex; flex-direction:column; background:linear-gradient(145deg,#171534 0%,#25205f 55%,#32288a 100%); isolation:isolate; }
.brand-panel:before { content:""; position:absolute; inset:0; z-index:-2; opacity:.38; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom right,#000,transparent 78%); }
.brand-panel:after { content:""; position:absolute; width:470px; height:470px; right:-210px; bottom:-165px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 68px rgba(255,255,255,.025),0 0 0 138px rgba(255,255,255,.02); z-index:-1; }
.ambient { position:absolute; border-radius:999px; filter:blur(2px); z-index:-1; }
.ambient-one { width:330px; height:330px; left:-170px; top:23%; background:radial-gradient(circle,rgba(112,96,246,.4),transparent 69%); }
.ambient-two { width:220px; height:220px; right:10%; top:12%; background:radial-gradient(circle,rgba(86,160,255,.17),transparent 69%); }
.brand-top,.brand-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand-logo { width:190px; height:53px; object-fit:contain; object-position:left center; }
.brand-logo-light { filter:brightness(0) invert(1); }
.version-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); font-size:11px; font-weight:700; letter-spacing:.13em; }
.version-badge i { width:6px; height:6px; border-radius:50%; background:#a99cff; box-shadow:0 0 0 4px rgba(169,156,255,.12); }
.brand-copy { margin:auto 0; max-width:680px; padding:64px 0; }
.eyebrow,.form-kicker { margin:0 0 16px; font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.24em; font-weight:800; }
.eyebrow { color:#bcb5ff; }
.brand-copy h1 { margin:0; font-size:clamp(52px,5.2vw,82px); line-height:.97; letter-spacing:-.055em; font-weight:650; }
.brand-copy h1 span { color:#a99cff; }
.brand-description { max-width:540px; margin:28px 0 44px; color:rgba(255,255,255,.7); font-size:17px; line-height:1.7; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); max-width:650px; border-top:1px solid rgba(255,255,255,.13); padding-top:24px; gap:22px; }
.feature-row div { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:11px; }
.feature-row strong { color:#a99cff; font-size:11px; letter-spacing:.08em; }
.feature-row span { color:rgba(255,255,255,.73); font-size:12px; line-height:1.45; }
.brand-footer { color:rgba(255,255,255,.42); font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.secure-label { display:flex; align-items:center; gap:7px; }
.secure-label svg { width:15px; fill:none; stroke:currentColor; stroke-width:1.7; }

.form-panel { min-height:100vh; display:flex; flex-direction:column; padding:46px 7vw 32px; background:radial-gradient(circle at 92% 4%,#f1f0ff 0,transparent 26%),#fff; }
.mobile-brand { display:none; }
.form-wrap { width:min(100%,470px); margin:auto; padding:54px 0; }
.welcome-mark { width:46px; height:46px; display:grid; place-items:center; margin-bottom:28px; border-radius:14px; color:#fff; background:linear-gradient(145deg,#312a79,#6760d8); box-shadow:0 12px 28px rgba(38,35,99,.22); font-size:13px; font-weight:800; letter-spacing:.06em; }
.form-kicker { color:#6e65ce; margin-bottom:12px; }
.form-wrap h2 { margin:0; font-size:38px; letter-spacing:-.035em; font-weight:680; }
.form-intro { margin:13px 0 38px; color:var(--muted); line-height:1.65; font-size:15px; }
form > label,.password-heading label { display:block; margin-bottom:10px; color:#303346; font-size:13px; font-weight:700; }
.password-heading { display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.password-heading label { margin:0 0 10px; }
.text-action { border:0; padding:0 0 10px; background:transparent; color:#554bb6; font-size:12px; font-weight:700; }
.input-wrap { height:57px; display:flex; align-items:center; gap:12px; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:.2s ease; }
.input-wrap:focus-within { border-color:#6c63cf; box-shadow:0 0 0 4px rgba(108,99,207,.10); }
.input-wrap > svg,.eye-button svg { width:19px; fill:none; stroke:#9094a6; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.field-icon { width:19px; color:#9094a6; font-size:18px; text-align:center; flex:none; }
.input-wrap input { width:100%; height:100%; border:0; outline:0; color:#20233c; background:transparent; font-size:14px; }
.input-wrap input::placeholder { color:#a2a5b2; }
.eye-button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; }
.eye-button:hover { background:var(--soft); }
.remember { margin:21px 0 25px; display:flex!important; align-items:center; gap:10px; color:#676a79!important; font-weight:500!important; cursor:pointer; }
.remember input { position:absolute; opacity:0; pointer-events:none; }
.remember span { width:19px; height:19px; border:1px solid #cfd1dc; border-radius:6px; background:#fff; position:relative; }
.remember input:checked + span { background:var(--violet); border-color:var(--violet); }
.remember input:checked + span:after { content:""; position:absolute; width:8px; height:4px; left:4px; top:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.login-button { width:100%; height:58px; display:flex; align-items:center; justify-content:center; gap:13px; border:0; border-radius:14px; color:#fff; background:linear-gradient(100deg,#25215e,#4a40aa); box-shadow:0 13px 30px rgba(38,35,99,.21); font-weight:750; transition:.2s ease; }
.login-button:hover { transform:translateY(-2px); box-shadow:0 17px 34px rgba(38,35,99,.27); }
.login-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.form-message { min-height:38px; margin:15px 0 0; padding:0 12px; display:flex; align-items:center; border-radius:9px; color:#5d5798; background:#f4f2ff; opacity:0; font-size:12px; transition:.2s; }
.form-message.visible { opacity:1; }
.form-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#a0a3af; font-size:11px; }
.form-footer nav { display:flex; gap:20px; }
.form-footer button { border:0; padding:0; background:transparent; color:#777b8a; font-size:11px; }
.form-footer nav { display:flex; gap:20px; }
.form-wrap.compact { max-width:470px; }
.back-link { display:inline-block; margin-bottom:30px; color:#6158bd; text-decoration:none; font-size:13px; font-weight:700; }
.help-note { margin:13px 2px 24px; color:#858897; font-size:12px; line-height:1.6; }
.password-field { margin-bottom:18px; }
.change-button { margin-top:26px; }
.simple-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#f8f8fc,#efeff9); }
.simple-card { width:min(100%,650px); padding:48px; border:1px solid #e5e5ef; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(38,35,99,.10); }
.simple-card h1 { margin:24px 0 10px; font-size:38px; }
.simple-card p { color:var(--muted); line-height:1.7; }
.simple-card dl { margin:30px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.simple-card dl div { padding:15px; border-radius:12px; background:#f6f6fb; }
.simple-card dt { color:#8b8d9a; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.simple-card dd { margin:6px 0 0; font-weight:700; }
.link-button { text-decoration:none; }

@media (max-width:960px) {
  .login-shell { grid-template-columns:1fr; }
  .brand-panel { display:none; }
  .form-panel { padding:28px 7vw; }
  .mobile-brand { display:flex; justify-content:space-between; align-items:center; }
  .mobile-brand .brand-logo { width:145px; }
  .version-badge.dark { color:#4b4680; border-color:#dfddee; background:#f6f5ff; }
  .form-wrap { padding:58px 0 36px; }
}
@media (max-width:520px) {
  .form-panel { padding:20px 22px; }
  .form-wrap h2 { font-size:31px; }
  .welcome-mark { display:none; }
  .form-wrap { padding:52px 0 20px; }
  .form-footer { margin-top:28px; flex-direction:column-reverse; }
}