@font-face { font-family:"Disp"; src:url("/assets/fonts/anton.ttf") format("truetype"); font-display:swap; }
  @font-face { font-family:"Body"; src:url("/assets/fonts/outfit.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
  :root { --navy:#150D49; --vi:#967CF2; --lav:#C4B6F8; --or:#FF8500; --or-d:#E07500; --pk:#E73088; }
  * { box-sizing:border-box; }
  html, body { margin:0; min-height:100%; }
  body {
    font-family:"Body", system-ui, sans-serif; color:var(--navy);
    background:var(--navy); min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px; position:relative; overflow-x:hidden;
  }
  .shape {
    position:fixed; inset:6vh 4vw; background:var(--vi); z-index:0;
    clip-path:polygon(0 18%, 14% 0, 100% 0, 100% 82%, 86% 100%, 0 100%);
  }
  .wrap { position:relative; z-index:1; width:100%; max-width:980px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
  .intro { color:#fff; }
  .intro .eye { font-family:"Disp", Impact, sans-serif; letter-spacing:.08em; font-size:15px; text-transform:uppercase; opacity:.95; }
  .intro h1 { font-family:"Disp", Impact, sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(48px,7vw,92px); line-height:.92; margin:14px 0 18px; }
  .intro p { font-size:20px; font-weight:600; max-width:420px; margin:0; line-height:1.35; }
  .card { background:#fff; border-radius:22px; padding:36px 34px 30px; box-shadow:0 20px 60px rgba(21,13,73,.35); }
  .card img { height:34px; display:block; margin-bottom:20px; }
  .card h2 { font-family:"Disp", Impact, sans-serif; font-weight:400; text-transform:uppercase; font-size:28px; margin:0 0 6px; }
  .card .sub { color:#6E6A85; font-size:15px; margin:0 0 22px; }
  label { display:block; font-weight:600; font-size:14px; margin-bottom:8px; }
  input[type=password] {
    width:100%; font:inherit; font-size:17px; padding:14px 16px; border:2px solid var(--lav); border-radius:12px;
    outline:none; color:var(--navy); background:#FBFAFF; transition:border-color .15s, box-shadow .15s;
  }
  input[type=password]:focus { border-color:var(--vi); box-shadow:0 0 0 4px rgba(150,124,242,.18); }
  button {
    margin-top:18px; width:100%; font:inherit; font-size:17px; font-weight:700; color:#fff; background:var(--or);
    border:0; border-radius:999px; padding:14px 18px; cursor:pointer; transition:background .15s, transform .05s;
  }
  button:hover, button:focus-visible { background:var(--or-d); }
  button:active { transform:translateY(1px); }
  .msg { margin:0 0 16px; padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600; }
  .msg.err { background:#FDE7F1; color:#B3125F; }
  .foot { margin-top:22px; font-size:12px; color:#6E6A85; text-align:center; }
  @media (max-width:760px) {
    .wrap { grid-template-columns:1fr; gap:24px; }
    .intro { text-align:center; } .intro p { margin:0 auto; font-size:17px; }
    .shape { inset:3vh 3vw; }
    .card { padding:28px 22px 24px; }
  }

  .card img { height:40px; width:auto; }