body{display:flex;align-items:center;justify-content:center;padding:20px}
.box{width:min(360px,100%)}
.head{text-align:center;margin-bottom:18px}
.head a{text-decoration:none}
.head .logo{font-size:26px;font-weight:bold;color:var(--m2)}
.head .logo b{color:var(--m4)}
.head .tag{color:var(--m14);margin-top:4px}
.panel{padding:20px}
.providers{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.btn.soon{opacity:.55;cursor:not-allowed;position:relative}
.btn.soon .tag{margin-left:auto;font-size:11px;color:var(--m14);border:1px solid var(--line);padding:0 5px}
.btn .ic{font-weight:bold}
.or{display:flex;align-items:center;gap:8px;color:var(--m14);font-size:12px;margin:14px 0 10px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
#error{margin-bottom:12px}
@media (max-width:420px){
  body{padding:14px}
  .head{margin-bottom:14px} .head .logo{font-size:23px}
  .panel{padding:16px}
}