:root{
  color-scheme:light;
  --ink-950:#0b1a22;
  --ink-900:#102630;
  --graphite:#516266;
  --graphite-soft:#7b8a8e;
  --teal:#257a98;
  --teal-deep:#027092;
  --teal-bright:#008add;
  --paper:#f2f5f6;
  --white:#ffffff;
  --line:#d8e1e4;
  --error-bg:#fdecec;
  --error-border:#f3b7b7;
  --error-text:#9d1c1c;
  --success-bg:#ebf8ef;
  --success-border:#a9d8b5;
  --success-text:#176239;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--paper);color:var(--ink-900);font-family:var(--body);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
button,input{font:inherit}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:100vh}
.login-brand{position:relative;background:var(--ink-950);color:#fff;padding:72px 6vw;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.login-brand::before{content:"";position:absolute;inset:0;z-index:-2;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:56px 56px}
.login-brand::after{content:"";position:absolute;z-index:-1;width:620px;height:620px;left:-200px;bottom:-260px;border-radius:50%;background:radial-gradient(circle,rgba(2,112,146,.5),rgba(2,112,146,0) 64%)}
.login-brand img{width:220px}
.login-brand h2{font-size:clamp(26px,2.8vw,36px);line-height:1.15;margin-top:26px;max-width:16ch;font-family:var(--display);font-weight:600;letter-spacing:-.025em}
.login-brand p:not(.eyebrow):not(.mono){margin-top:18px;color:rgba(255,255,255,.66);max-width:42ch;font-size:16px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--teal-bright)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow-dark{color:var(--teal)}
.login-meta{display:flex;gap:44px;flex-wrap:wrap}
.login-meta div span{display:block;font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.login-meta div p{margin:0;color:rgba(255,255,255,.45)}
.login-form{background:var(--white);display:flex;align-items:center;justify-content:center;padding:72px 6vw}
.form-card{width:min(400px,100%)}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--graphite);font-size:13.5px;margin-bottom:44px;text-decoration:none}
.back:hover{color:var(--teal)}
.form-card h1{font-family:var(--display);font-size:32px;line-height:1.05;margin:18px 0 0}
.sub{color:var(--graphite);margin-top:12px;font-size:15.5px}
.note,.error,.success{margin-top:26px;padding:14px 16px;font-size:14px;border-radius:0 var(--r) var(--r) 0}
.note{border-left:2px solid var(--teal);background:var(--paper);color:var(--graphite)}
.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);border-radius:var(--r)}
.success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text);border-radius:var(--r)}
.field{margin-top:22px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);margin-bottom:9px}
.input{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);transition:border-color .2s,box-shadow .2s}
.input:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(37,122,152,.12)}
.input svg{width:18px;height:18px;color:var(--graphite-soft);flex:none}
.input input{border:0;outline:0;flex:1;font:inherit;font-size:15px;color:var(--ink-900);background:transparent;min-width:0}
.input input::placeholder{color:#a9b5b8}
.toggle-btn{border:0;background:transparent;padding:0;cursor:pointer;color:var(--graphite-soft)}
.form-links{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:13.5px}
.form-links button{border:0;background:transparent;color:var(--teal);font-weight:500;cursor:pointer}
.form-links button:hover{text-decoration:underline}
.submit,.button-secondary{min-height:52px;border:0;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.submit{width:100%;margin-top:28px;padding:0 24px;background:var(--teal);color:#fff;font-weight:600;transition:background .2s}
.submit:hover{background:var(--teal-deep)}
.button-secondary{background:#e7eef7;color:var(--ink-900);font-weight:600;padding:0 18px}
.helper{min-height:20px;margin:16px 0 0;color:var(--graphite-soft);font-size:12.5px}
.modal-backdrop{position:fixed;inset:0;z-index:20;background:rgba(7,26,62,.42);display:none;align-items:center;justify-content:center;padding:18px}
.modal-backdrop.open{display:flex}
.modal-card{width:100%;max-width:420px;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(7,26,62,.2);padding:22px}
.modal-card h2{margin:0 0 12px;font-family:var(--display);font-size:24px}
.muted{font-size:13px;color:rgba(33,37,44,.62);margin-bottom:12px;line-height:1.55}
.modal-actions{display:flex;gap:10px;margin-top:14px}
.modal-actions button{flex:1}
@media (max-width:980px){
  .login{grid-template-columns:1fr}
  .login-brand{min-height:34vh;padding:40px 24px}
  .login-form{padding:32px 24px 44px}
}
@media (max-width:520px){
  .login-brand{min-height:28vh}
  .login-brand img{width:min(220px,72%)}
  .form-links,.modal-actions{flex-direction:column;align-items:stretch}
}