:root {
  color-scheme: dark;
  --ink:#f3f6fa; --muted:#8a97ac; --bg:#0b1220; --surface:#111a2e; --surface-2:#182140;
  --field:#0e1729; --line:#26314a; --accent:#4c8dff; --accent-2:#2f63c9; --accent-ink:#04101f;
  --danger:#f0645f; --danger-soft:#241417;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --radius:14px; --radius-sm:9px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink:#0b1220; --muted:#5b6b80; --bg:#f3f7fb; --surface:#ffffff; --surface-2:#eaf1f8;
  --field:#ffffff; --line:#d9e3ee; --accent:#0a66c2; --accent-2:#084c94; --accent-ink:#ffffff;
  --danger:#c0392b; --danger-soft:#fbeceb;
  --shadow:0 24px 60px rgba(11,18,32,.12);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; color:var(--ink); background:var(--bg); font-family:"DM Sans",sans-serif;
  display:flex; min-height:100vh; overflow-x:hidden;
}
button, input { font:inherit; }
.hidden { display:none !important; }

.login-shell { display:grid; grid-template-columns:1.05fr .95fr; width:100%; min-height:100vh; }

/* ---------- Left: showcase ---------- */
.login-showcase {
  position:relative; overflow:hidden; padding:64px max(4vw,48px);
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(ellipse 900px 620px at 15% -10%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 60%),
    radial-gradient(ellipse 800px 700px at 100% 110%, color-mix(in srgb,var(--accent-2) 20%,transparent), transparent 60%),
    var(--surface);
  border-right:1px solid var(--line);
}
.showcase-grid {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb,var(--ink) 4%,transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 4%,transparent) 0 1px, transparent 1px 56px);
  mask-image:radial-gradient(ellipse 900px 700px at 30% 30%, #000 20%, transparent 75%);
}
.showcase-blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:drift 16s ease-in-out infinite; }
.blob-a { width:360px; height:360px; background:var(--accent); top:-120px; left:-90px; }
.blob-b { width:300px; height:300px; background:var(--accent-2); bottom:-100px; right:-60px; animation-delay:-5s; }
.blob-c { width:220px; height:220px; background:#3fae8f; top:45%; left:55%; animation-delay:-10s; opacity:.35; }
@keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(24px,-18px) scale(1.06); } }

.showcase-content { position:relative; z-index:2; max-width:460px; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
.brand-mark { position:relative; display:grid; place-items:center; width:52px; height:52px; color:var(--accent-ink); background:linear-gradient(145deg,var(--accent),var(--accent-2)); border-radius:16px 16px 16px 8px; font-weight:900; box-shadow:0 12px 30px -8px color-mix(in srgb,var(--accent) 60%,transparent); }
.brand-mark svg { position:relative; z-index:2; width:27px; height:27px; }
.brand-mark i { position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--accent-ink) 22%,transparent); border-radius:10px; transform:rotate(12deg); }
.brand-mark em { position:absolute; width:10px; height:10px; right:-3px; top:-3px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); } 50% { box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 8%,transparent); } }

.showcase-content .eyebrow { margin:26px 0 14px; color:var(--accent); font:700 11px Manrope,sans-serif; letter-spacing:.22em; }
.showcase-content h1 { margin:0; font:800 clamp(32px,3.6vw,46px)/1.08 Manrope,sans-serif; letter-spacing:-.03em; }
.showcase-content h1 em { color:var(--accent); font-style:normal; }
.showcase-copy { max-width:400px; margin:22px 0 0; color:var(--muted); line-height:1.7; font-size:14.5px; }

.showcase-list { list-style:none; margin:42px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.showcase-list li { display:flex; align-items:flex-start; gap:14px; }
.showcase-list li>span { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); font-size:13px; }
.showcase-list strong { display:block; font-size:13.5px; }
.showcase-list small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.5; }

/* ---------- Right: form ---------- */
.login-panel { display:flex; align-items:center; justify-content:center; padding:48px 32px; position:relative;
  background:
    radial-gradient(ellipse 700px 460px at 85% -10%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 60%),
    var(--bg);
}
.login-card {
  width:100%; max-width:400px; padding:40px 36px 32px; border:1px solid var(--line); border-radius:20px;
  background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(20px);
  box-shadow:var(--shadow); animation:rise .6s .1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.login-card.shake { animation:shake .45s; }
@keyframes shake { 10%,90% { transform:translateX(-1px); } 20%,80% { transform:translateX(3px); } 30%,50%,70% { transform:translateX(-7px); } 40%,60% { transform:translateX(7px); } }

.login-card-head { text-align:center; margin-bottom:28px; }
.login-mark { margin:0 auto 18px; }
.login-card-head h2 { margin:0; font:800 24px Manrope,sans-serif; letter-spacing:-.02em; }
.login-card-head p { margin:8px 0 0; color:var(--muted); font-size:13px; }

.login-alert { display:none; gap:2px; flex-direction:column; margin-bottom:18px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line)); border-radius:var(--radius-sm); background:var(--danger-soft); }
.login-alert.show { display:flex; }
.login-alert strong { color:var(--danger); font-size:12.5px; }
.login-alert span { color:var(--muted); font-size:11.5px; }

.login-field { display:block; margin-bottom:16px; }
.login-field > span { display:block; margin-bottom:7px; color:var(--muted); font-weight:600; font-size:11px; letter-spacing:.02em; }
.field-wrap { position:relative; display:flex; align-items:center; }
.field-icon { position:absolute; left:14px; width:17px; height:17px; color:var(--muted); pointer-events:none; }
.login-field input { width:100%; padding:13px 14px 13px 42px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--field); color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.login-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.login-field input:focus + .field-toggle { color:var(--accent); }
#password { padding-right:42px; }
.field-toggle { position:absolute; right:8px; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.field-toggle:hover { color:var(--ink); background:var(--surface-2); }
.field-toggle svg { width:18px; height:18px; }

.login-options { margin:4px 0 22px; }
.remember-toggle { display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.remember-toggle input { position:absolute; opacity:0; width:0; height:0; }
.toggle-track { flex:none; position:relative; width:36px; height:20px; border-radius:20px; background:var(--field); border:1px solid var(--line); transition:background .2s, border-color .2s; }
.toggle-thumb { position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .2s cubic-bezier(.3,1,.5,1), background .2s; }
.remember-toggle input:checked + .toggle-track { background:color-mix(in srgb,var(--accent) 25%,var(--field)); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
.remember-toggle input:checked + .toggle-track .toggle-thumb { transform:translateX(16px); background:var(--accent); }
.remember-toggle input:focus-visible + .toggle-track { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.remember-text { color:var(--muted); font-size:12px; line-height:1.4; }

.login-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:var(--radius-sm); padding:14px; background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-weight:800; font-size:14px; cursor:pointer; transition:filter .15s, transform .15s; }
.login-submit:hover { filter:brightness(1.08); transform:translateY(-1px); }
.login-submit:active { transform:translateY(0); }
.submit-arrow { transition:transform .2s; }
.login-submit:hover .submit-arrow { transform:translateX(3px); }

.login-footnote { display:flex; align-items:center; justify-content:center; gap:8px; margin:24px 0 0; color:var(--muted); font-size:11px; }
.footnote-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); }

@media (max-width:900px) {
  .login-shell { grid-template-columns:1fr; }
  .login-showcase { display:none; }
  .login-panel { padding:32px 20px; min-height:100vh; }
}