/* Shared auth-page chrome — adapted from starian-portal passcode page UI.
   Unicorn Studio WebGL fog background + frosted glass card. */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0a0a0a;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden}

.bg{position:fixed;inset:0;z-index:0;background:#000}
.bg [data-us-project-src]{width:100%;height:100%}
.bg canvas{display:block !important}

.bg::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.6) 100%);
}

.center{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;pointer-events:none}
.card{
  width:100%;max-width:420px;
  background:rgba(15,15,20,.65);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:36px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  pointer-events:auto;
}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mark{display:inline-block;width:22px;height:22px;border:2px solid #e6edf3;border-radius:6px;background:radial-gradient(circle at 30% 30%,#e6edf3 0%,transparent 60%)}
.brand-name{font-size:14px;font-weight:600;letter-spacing:1.5px;color:#e6edf3}

.title{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.3px;color:#fff;margin-bottom:8px}
.desc{font-size:13px;color:#9ca3af;line-height:1.55;margin-bottom:26px}

.form{display:flex;flex-direction:column;gap:10px}
.label{font-size:11px;color:#8b949e;letter-spacing:.4px;text-transform:uppercase;font-weight:500;margin-bottom:-4px}
.input{
  padding:13px 14px;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;
  color:#e6edf3;font-size:15px;
  outline:none;transition:border-color .15s,background .15s;
  width:100%;
}
.input:focus{border-color:rgba(255,255,255,.32);background:rgba(0,0,0,.55)}
.input::placeholder{color:#4b5563}

.btn{margin-top:4px;padding:12px 14px;background:#e6edf3;color:#0a0a0a;border:none;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}
.btn:hover{opacity:.92}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;color:#9ca3af;border:1px solid rgba(255,255,255,.12);text-decoration:none;text-align:center;display:inline-block}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:#e6edf3}

.row{display:flex;gap:8px;align-items:center}
.row .btn,.row .btn-ghost{flex:1}

.msg{font-size:12px;min-height:16px;margin-top:2px;text-align:center}
.msg.error{color:#f85149}
.msg.success{color:#3fb950}
.msg.blocked{color:#d29922}

.foot{margin-top:22px;font-size:11px;color:#6b7280;text-align:center}
.foot a{color:#9ca3af;text-decoration:none;margin:0 4px}
.foot a:hover{color:#d1d5db}

@media(max-width:480px){
  .card{padding:28px 24px}
  .title{font-size:21px}
}