.login-wrap { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; background: #010403; }
.cloud-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.login-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(1,4,3,.08), transparent 48%, rgba(1,4,3,.68)); }
.login-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0 34%, rgba(0,2,1,.14) 66%, rgba(0,2,1,.52) 100%); }
.login-side { background: transparent; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-side, .login-main { position: relative; z-index: 2; }
.login-brand { display: inline-flex; align-items: center; }
.login-logo { display: block; width: auto; height: 54px; max-width: 230px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .96; }
.login-side h2 { font-size: 26px; margin: 0 0 14px; }
.login-side p { color: var(--ink-2); font-size: 15px; max-width: 380px; }
.login-feat { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.login-feat div { padding: 5px 0; }
.login-main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { position: relative; overflow: hidden; box-sizing: border-box; width: 100%; max-width: 400px;
  background: linear-gradient(145deg, rgba(225,255,237,.09), rgba(3,15,9,.14) 42%, rgba(103,233,160,.055));
  backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35);
  border: 1px solid rgba(205,255,225,.24); border-radius: 22px; padding: 34px 32px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.18),
    inset 0 -1px rgba(103,233,160,.08); }
.login-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 2%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.035) 42%, transparent 66%); }
.login-card > * { position: relative; z-index: 1; }
.login-card h1 { font-size: 24px; margin: 0 0 6px; }
.login-card .lead { color: var(--ink-2); font-size: 14px; margin: 0 0 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.field input { display: block; box-sizing: border-box; width: 100%; min-width: 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(1,8,4,.24); border: 1px solid rgba(219,255,232,.17); color: var(--ink);
  box-shadow: inset 0 1px rgba(255,255,255,.035); font-family: var(--f-ui); font-size: 14px; }
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-btn { width: 100%; margin-top: 8px; }
.login-note { margin-top: 18px; font-size: 12px; color: var(--ink-2); line-height: 1.5;
  padding: 12px 14px; border-radius: 10px; background: rgba(1,8,4,.18); border: 1px solid rgba(219,255,232,.11); }
.login-msg { margin-top: 14px; font-size: 13px; padding: 11px 14px; border-radius: 9px; display: none; }
.login-msg.err { display: block; background: color-mix(in srgb, #C05B40 18%, transparent); border: 1px solid #C05B40; color: #e8c4b8; }
.login-back { display: inline-block; margin-bottom: 20px; font-size: 13px; color: var(--ink-3); }
.login-back:hover { color: var(--ink); }
.forgot { display: block; margin-top: 10px; text-align: right; color: var(--ink-3); font-size: 12px; text-decoration: none; }
.forgot:hover { color: var(--ink); }
@media (max-width: 820px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-main { padding: 24px; }
}