:root{
    --navy:#071C3C; --navy-2:#0E2A54; --blue:#2F6FED; --blue-bright:#5B93FF;
    --ice:#EAF1FF; --slate:#5B6B84; --line:#DCE6F7; --white:#fff;
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family:Inter,'Space Grotesk',system-ui,sans-serif;
    background:linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 55%,#123163 100%);
    color:var(--white); min-height:100vh;
    display:flex; align-items:center; justify-content:center; padding:24px 16px 40px;
    -webkit-font-smoothing:antialiased;
  }
  .card{width:100%; max-width:420px}

  /* ---- identity ---- */
  .id{text-align:center; margin-bottom:26px}
  .mark{
    width:76px; height:76px; margin:0 auto 16px; border-radius:20px;
    background:var(--white); display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
  }
  .mark img{width:52px; height:52px}
  h1{font-family:'Space Grotesk',Inter,sans-serif; font-size:28px; line-height:1.15; margin:0 0 6px; letter-spacing:-.4px}
  .role{font-size:15px; color:var(--blue-bright); margin:0 0 2px; font-weight:500}
  .org{font-size:14px; color:#A9BEE4; margin:0}
  .pitch{
    font-size:14px; line-height:1.55; color:#C3D3EE; margin:16px auto 0; max-width:340px;
  }

  /* ---- actions ---- */
  .actions{display:flex; flex-direction:column; gap:10px; margin-bottom:22px}
  a.act{
    display:flex; align-items:center; gap:14px; text-decoration:none;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
    border-radius:14px; padding:14px 16px; color:var(--white);
    transition:background .18s ease, transform .18s ease, border-color .18s ease;
  }
  a.act:hover,a.act:focus-visible{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28); transform:translateY(-1px)}
  a.act i{font-size:19px; width:24px; text-align:center; color:var(--blue-bright); flex:none}
  .lbl{display:flex; flex-direction:column; min-width:0}
  .lbl b{font-size:15px; font-weight:600}
  .lbl span{font-size:12.5px; color:#9FB2D6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .chev{margin-left:auto; color:#6E85AD; font-size:14px}

  a.save{
    background:var(--blue); border-color:var(--blue);
    box-shadow:0 8px 22px rgba(47,111,237,.34);
  }
  a.save:hover,a.save:focus-visible{background:var(--blue-bright); border-color:var(--blue-bright)}
  a.save i,a.save .chev{color:#fff}
  a.save .lbl span{color:rgba(255,255,255,.82)}

  /* ---- qr ---- */
  .qr{
    background:var(--white); border-radius:16px; padding:18px; text-align:center;
    margin-bottom:20px;
  }
  .qr #qrbox{display:flex; justify-content:center}
  .qr #qrbox img,.qr #qrbox canvas{display:block}
  .qr p{margin:12px 0 0; font-size:12.5px; color:var(--slate); line-height:1.5}

  footer{text-align:center; font-size:12px; color:#8FA5CC; line-height:1.7}
  footer a{color:#A9BEE4}
  .rule{height:1px; background:rgba(255,255,255,.12); margin:20px 0}