:root{
  --blue:#0b6bd6; --red:#e3000f; --yellow:#ffc700; --green:#00a651;
  --ink:#111; --muted:#5b6470; --line:#dfe3e8; --bg:#fff; --soft:#f5f7fa;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px}
.brand img{height:40px;width:auto}
.topbar nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;margin-left:20px}
.topbar nav a:hover{color:var(--blue)}

.shell{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 69px)}
.panel{position:relative;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:6vw;overflow:hidden}
.panel h2{font-size:clamp(28px,3.4vw,46px);font-weight:800;line-height:1.1;max-width:12ch}
.panel p{margin-top:16px;color:#c9ced6;max-width:34ch}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:55%;transform:skewX(-35deg)}
.panel::before{left:3vw;top:8%;background:linear-gradient(var(--blue) 50%,var(--red) 50%)}
.panel::after{right:3vw;bottom:8%;background:linear-gradient(var(--yellow) 50%,var(--green) 50%)}

.form-wrap{display:flex;align-items:center;justify-content:center;padding:6vw 5vw}
form{width:100%;max-width:400px}
form h1{font-size:30px;font-weight:800}
.sub{color:var(--muted);margin:6px 0 24px;font-size:15px}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px}
input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:#fff}
input:focus{outline:3px solid rgba(11,107,214,.25);border-color:var(--blue)}
button.primary{width:100%;margin-top:22px;padding:14px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer}
button.primary:hover{background:#0954a8}
button.primary:disabled{opacity:.6;cursor:wait}
.alt{margin-top:18px;font-size:14px;color:var(--muted)}
.alt a{color:var(--blue);font-weight:700;text-decoration:none}
.link{background:none;border:0;color:var(--blue);font:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:0;margin-top:10px}
.msg{margin-top:16px;padding:12px 14px;border-radius:6px;font-size:14px;display:none}
.msg.err{display:block;background:#fdecee;color:#a1000b;border-left:4px solid var(--red)}
.msg.ok{display:block;background:#e8f7ef;color:#006b36;border-left:4px solid var(--green)}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .panel{padding:36px 8vw}
  .panel::before,.panel::after{display:none}
  .panel h2{max-width:none}
  .topbar nav{display:none}
}