:root { --navy:#07182d; --blue:#0f5f88; --teal:#10a6a2; --mint:#71d7c7; --ink:#132033; --muted:#69788a; --soft:#f3f7f8; --white:#fff; --border:#dfe8ec; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--soft); font-family:"Manrope",sans-serif; }
button,input { font:inherit; }
.login-layout { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }
.login-brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:52px clamp(34px,6vw,86px); color:var(--white); background:radial-gradient(circle at 25% 20%,rgba(113,215,199,.25),transparent 32%),linear-gradient(145deg,var(--navy),#0b4b61); }
.login-brand-panel::after { content:""; position:absolute; width:520px; height:520px; right:-270px; bottom:-280px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.login-brand { position:relative; z-index:1; display:inline-flex; align-items:center; color:var(--white); text-decoration:none; }
.login-brand img { display:block; width:min(260px,72vw); height:auto; filter:invert(1); }
.login-message { position:relative; z-index:1; max-width:570px; }
.login-kicker { color:var(--teal); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.login-brand-panel .login-kicker { color:var(--mint); }
.login-message h1 { margin:18px 0; font-size:clamp(46px,6vw,76px); line-height:1.02; letter-spacing:-.06em; }
.login-message p { max-width:520px; color:rgba(255,255,255,.65); font-size:16px; line-height:1.7; }
.security-note { position:relative; z-index:1; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.62); font-size:11px; }
.security-note span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:var(--mint); background:rgba(113,215,199,.12); }
.login-form-panel { display:grid; place-items:center; padding:40px 24px; }
.login-card { width:min(440px,100%); padding:42px; border:1px solid var(--border); border-radius:24px; background:var(--white); box-shadow:0 28px 80px rgba(7,24,45,.11); }
.form-heading { margin-bottom:28px; }
.form-heading h2 { margin:7px 0 8px; color:var(--navy); font-size:29px; line-height:1.15; letter-spacing:-.04em; }
.form-heading p { margin:0; color:var(--muted); font-size:12px; }
.field { margin-bottom:16px; }
.field label { display:block; margin-bottom:7px; color:var(--navy); font-size:10px; font-weight:800; }
.field input { width:100%; min-height:48px; padding:12px 13px; border:1px solid var(--border); border-radius:11px; color:var(--ink); background:#fbfdfd; outline:none; font-size:16px; }
.field input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(16,166,162,.1); }
.field small { display:block; margin-top:6px; color:var(--muted); font-size:9px; }
.password-field { position:relative; }
.password-field input { padding-right:60px; }
.password-field button { position:absolute; right:6px; top:6px; min-width:44px; min-height:36px; border:0; border-radius:8px; color:var(--blue); background:var(--soft); font-size:10px; font-weight:800; cursor:pointer; }
.submit-button { width:100%; min-height:50px; margin-top:5px; border:0; border-radius:12px; color:var(--white); background:linear-gradient(135deg,var(--teal),var(--blue)); box-shadow:0 12px 28px rgba(15,95,136,.2); font-weight:800; cursor:pointer; }
.submit-button:disabled { opacity:.65; cursor:wait; }
.forgot-button { width:100%; min-height:42px; border:0; color:var(--blue); background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.form-feedback { min-height:20px; margin:10px 0 0; color:#b23b47; text-align:center; font-size:11px; font-weight:700; }
.form-feedback.success { color:#087a68; }
.back-site { display:block; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); text-align:center; text-decoration:none; font-size:10px; font-weight:700; }

@media (max-width:860px) {
  .login-layout { grid-template-columns:1fr; }
  .login-brand-panel { min-height:280px; padding:30px 26px; }
  .login-message h1 { max-width:580px; font-size:clamp(38px,9vw,58px); }
  .login-message p,.security-note { display:none; }
}
@media (max-width:480px) {
  .login-brand-panel { min-height:220px; padding:24px 18px; }
  .login-message h1 { margin-bottom:0; font-size:36px; }
  .login-form-panel { padding:18px 12px 34px; }
  .login-card { padding:30px 20px; border-radius:20px; }
  .field input { font-size:16px; }
}