:root{
      --bg:#0b1020;
      --card:#11182d;
      --muted:#7b88a8;
      --text:#e8ecf8;
      --accent:#4f8cff;
      --accent-2:#22d3ee;
      --error:#ef4444;
      --ring:0 0 0 3px rgb(79 140 255 / .35);
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }

    *{
      box-sizing:border-box;
    }

    html,
    body{
      height:100%;
    }

    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(34,211,238,.10), transparent 60%),
        radial-gradient(900px 400px at 90% 20%, rgba(79,140,255,.10), transparent 60%),
        radial-gradient(1000px 500px at 70% 90%, rgba(79,140,255,.06), transparent 60%),
        var(--bg);
      display:grid;
      place-items:center;
      padding:24px;
    }

    .container{
      width:100%;
      max-width:980px;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:28px;
      align-items:stretch;
    }

    @media (max-width:860px){
      .container{
        grid-template-columns:1fr;
        max-width:560px;
      }

      .side{
        order:2;
      }

      .card{
        order:1;
      }
    }

    .side{
      backdrop-filter:blur(4px);
      border-radius:var(--radius);
      padding:28px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:18px;
      position:relative;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      letter-spacing:.3px;
      text-transform:uppercase;
      background:linear-gradient(90deg, rgba(79,140,255,.18), rgba(34,211,238,.18));
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      padding:8px 12px;
      border-radius:999px;
      width:fit-content;
    }

    .headline{
      font-size:28px;
      line-height:1.2;
      margin:8px 0 6px;
      font-weight:700;
    }

    .sub{
      color:var(--muted);
      margin:0 0 10px;
      font-size:15px;
    }

    .list{
      display:grid;
      gap:10px;
      margin:8px 0 0;
      padding:0;
      list-style:none;
    }

    .list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#cfd6ee;
    }

    .list svg{
      flex:0 0 18px;
      margin-top:2px;
    }

    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--card);
      border:1px solid rgba(255,255,255,.08);
      border-radius:calc(var(--radius) + 2px);
      box-shadow:var(--shadow);
      padding:26px;
      display:grid;
      gap:18px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:6px;
    }

    .logo{
      width:44px;
      height:44px;
      border-radius:12px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      display:grid;
      place-items:center;
      color:white;
      font-weight:800;
      letter-spacing:.5px;
    }

    .brand h1{
      font-size:18px;
      margin:0;
    }

    .brand small{
      display:block;
      color:var(--muted);
      margin-top:2px;
    }

    .title{
      font-size:22px;
      margin:0;
    }

    form{
      display:grid;
      gap:14px;
    }

    .group{
      display:grid;
      gap:8px;
    }

    label{
      font-size:13px;
      color:#cfd6ee;
    }

    .field{
      position:relative;
    }

    .input{
      width:100%;
      padding:14px 14px 14px 42px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(6,9,20,.65);
      color:var(--text);
      outline:none;
      font-size:15px;
      transition:box-shadow .2s, border-color .2s, background .2s;
    }

    .input::placeholder{
      color:#93a2c8;
    }

    .input:focus{
      box-shadow:var(--ring);
      border-color:rgba(79,140,255,.45);
      background:rgba(8,12,28,.85);
    }

    .icon{
      position:absolute;
      inset:0 auto 0 12px;
      display:grid;
      place-items:center;
      pointer-events:none;
    }

    .roles{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(8,12,28,.5);
      cursor:pointer;
      user-select:none;
      font-size:13px;
    }

    .chip input{
      appearance:none;
      width:14px;
      height:14px;
      border-radius:50%;
      border:2px solid #94b2ff;
      display:grid;
      place-items:center;
      margin:0;
      background:transparent;
    }

    .chip input:checked{
      background:radial-gradient(circle at 50% 50%, #94b2ff 45%, transparent 46%);
      border-color:#c3d6ff;
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn{
      appearance:none;
      border:0;
      cursor:pointer;
      padding:12px 16px;
      border-radius:12px;
      font-weight:600;
      font-size:15px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:white;
      box-shadow:0 8px 20px rgba(79,140,255,.35);
      transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
    }

    .btn:hover{
      filter:brightness(1.03);
    }

    .btn:active{
      transform:translateY(1px) scale(.997);
    }

    .btn:focus-visible{
      outline:none;
      box-shadow:var(--ring);
    }

    .muted-link{
      color:var(--muted);
      text-decoration:none;
      font-size:13px;
    }

    .muted-link:hover{
      text-decoration:underline;
    }

    footer{
      text-align:center;
      color:var(--muted);
      font-size:12px;
      margin-top:12px;
    }