*{box-sizing:border-box}
  html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Arial,sans-serif}
  body{
    background:#1c1c1e;
    color:#f5f5f7;
    min-height:100vh;
    overflow-x:hidden;
  }
  .topbar{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    font-size:20px;
    font-weight:600;
  }
  .brand{display:flex;align-items:center;gap:6px;letter-spacing:-.3px}
  .brand .mini-orange{width:20px;height:20px}
  .dots{font-size:19px;letter-spacing:3px;color:#e5e5e7;line-height:1}
  .page{
    min-height:calc(100vh - 101px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:0;
  }
  .card{
    width:576px;
    min-height:605px;
    margin-top:0;
    padding:35px 80px 43px;
    border-radius:29px;
    background:linear-gradient(145deg,#1f1f21,#1a1a1c);
    box-shadow:0 17px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.015);
  }
  .logo-wrap{
    width:160px;height:160px;margin:0 auto 8px;
    display:flex;align-items:center;justify-content:center;
  }
  .halo{width:160px;height:160px}
  h1{
    margin:2px 0 27px;
    text-align:center;
    font-size:28px;
    line-height:1.15;
    letter-spacing:-.9px;
    font-weight:700;
  }
  .field{
    position:relative;
    height:51px;
    border:2px solid #0a84ff;
    border-radius:11px;
    background:#202023;
    box-shadow:0 0 0 1px rgba(10,132,255,.08),0 0 8px rgba(10,132,255,.10);
  }
  .field label{
    position:absolute;left:14px;top:8px;
    font-size:11px;color:#929297;
    pointer-events:none;
  }
  .field input{
    width:100%;height:100%;
    border:0;outline:0;background:transparent;
    color:#fff;font-size:14px;
    padding:18px 14px 0;
  }
  .account-link{
    display:block;margin-top:11px;
    color:#1685ff;text-decoration:none;font-size:14px;
  }
  .account-link:hover{text-decoration:underline}
  .privacy{
    margin-top:27px;
    display:flex;gap:12px;
  }
  .people{
    width:35px;height:35px;flex:0 0 35px;
    margin-top:1px;
  }
  .privacy p{
    margin:0;
    font-size:11.5px;
    line-height:1.22;
    color:#f1f1f3;
  }
  .privacy a{color:#087cf0;text-decoration:none}
  .buttons{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:9px;
    margin-top:27px;
  }
  button{
    height:35px;border-radius:8px;border:0;
    font-size:14px;font-weight:500;
    cursor:pointer;
  }
  .continue{background:#0a84ff;color:white}
  .continue:disabled{background:#164c7d;color:#8e9baa;cursor:default}
  .phone{background:#f5f5f7;color:#161618}
  .phone .phone-icon{margin-right:6px}
  .requirement{
    text-align:right;
    margin:11px 8px 0 0;
    font-size:11px;
    color:#e4e4e7;
  }
  footer{
    height:59px;
    background:#2a2a2c;
    border-top:1px solid rgba(255,255,255,.025);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8.5%;
    color:#bdbdc2;
    font-size:10px;
  }
  .footer-left{display:flex;align-items:center;gap:12px}
  .footer-left a{color:#c8c8cc;text-decoration:none}
  .sep{color:#626267}
  .copyright{white-space:nowrap}
  .mini-orange{
    display:inline-block;
    position:relative;
    width:20px;height:20px;
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%,#fff2a6 0 7%,#ffc62b 8%,#ff8a00 38%,#f4511e 75%,#d83a13 100%);
    box-shadow:inset -2px -3px 4px rgba(100,20,0,.2);
  }
  .mini-orange:before{
    content:"";position:absolute;width:8px;height:4px;
    background:#37b24d;border-radius:100% 0 100% 0;
    top:-3px;right:0;transform:rotate(-18deg);
  }
  .mini-orange:after{
    content:"";position:absolute;width:2px;height:5px;
    background:#78451e;top:-3px;left:10px;border-radius:2px;
  }

  @media(max-width:700px){
    .page{padding:0 14px 25px}
    .card{width:min(576px,100%);padding:30px 8%;border-radius:24px}
    footer{height:auto;min-height:72px;padding:16px 6%;gap:15px;align-items:flex-start}
    .copyright{white-space:normal;text-align:right}
  }
  @media(max-width:480px){
    .card{padding:25px 22px 35px}
    .buttons{grid-template-columns:1fr}
    .requirement{text-align:center;margin-right:0}
    h1{font-size:24px}
    .logo-wrap{transform:scale(.85);margin-bottom:-10px}
    footer{font-size:9px}
  }

.password-field{margin-top:15px;}
.main-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.top-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.brand-name {
    position: relative;
    left: -8px;
}
.phone {
    background: #f5f5f7;
    color: #161618;
    height: 35px;
    border-radius: 8px;
    border: 0;
    font-size: 14px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
}

.phone {
    display: flex;
    align-items: center;
    justify-content: center;
}