:root{--blue:#168cff}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;color:#fff;font-family:Inter,system-ui,sans-serif;display:flex;flex-direction:column;background:#04070f}
/* Drop a photo named signin-bg.jpg next to this file to use it as the background */
.bg{position:fixed;inset:0;z-index:-1;background:url(signin-bg.jpg) center/cover no-repeat,
  radial-gradient(800px 520px at 72% 14%,rgba(26,100,255,.38),transparent 62%),radial-gradient(700px 500px at 8% 45%,rgba(70,100,170,.22),transparent 60%),#04070f}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,7,15,.45),rgba(4,7,15,.93))}
header{display:flex;align-items:center;gap:20px;height:72px;padding:0 32px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(4,7,15,.6);backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;color:#fff;text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-.02em}
.logo span{border:2px solid var(--blue);margin-left:6px;padding:0 8px;line-height:1.25}
.logo sup{font-size:11px;margin-left:5px;letter-spacing:0}
.hs{flex:0 1 330px;margin-left:auto;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#9aa6c4}
.hs input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:14px}
.hi{display:flex;gap:6px}.hi a{color:#fff;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}.hi a:hover{background:rgba(255,255,255,.1)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
main{flex:1;display:grid;place-items:center;padding:40px 20px}
.card{width:100%;max-width:440px;padding:36px 36px 28px;border-radius:20px;text-align:center;background:rgba(5,10,22,.82);border:1px solid rgba(40,120,255,.4);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(22,140,255,.12);backdrop-filter:blur(14px)}
.card .logo{justify-content:center;font-size:26px;margin-bottom:22px}
.lockic{display:grid;place-items:center;color:var(--blue);margin-bottom:10px}.lockic svg{width:38px;height:38px;stroke-width:1.5}
h1{font-size:36px;font-weight:700;letter-spacing:-.02em}
.sub{color:#9fb0d6;margin:8px 0 28px;font-size:16px}
.f{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;margin-bottom:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:#8fa0c6;transition:border-color .2s,box-shadow .2s}
.f:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,140,255,.18)}
.f input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:16px}
.f button{background:none;border:0;color:#8fa0c6;display:grid;cursor:pointer}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:14px;font:600 17px Inter,sans-serif;cursor:pointer;transition:transform .15s,filter .2s,background .2s}
.btn:active{transform:translateY(1px)}
.go{margin-top:12px;border:0;background:var(--blue);color:#fff}.go:hover{filter:brightness(1.1)}.go:disabled{opacity:.7}
.adm{background:transparent;border:1.5px solid var(--blue);color:#fff}.adm:hover{background:rgba(22,140,255,.12)}
.or{display:flex;align-items:center;gap:16px;color:#8fa0c6;margin:20px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.err{color:#ff7b7b;font-size:14px;min-height:18px;margin-top:10px}
.foot{margin-top:22px;font-size:13px;color:#8fa0c6}
/* Everything on the card fades up in turn, like the menu and the rest of the site */
.rv{opacity:0;transform:translateY(18px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 100ms)}
@keyframes up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv{animation:none;opacity:1;transform:none}}

/* Phone view: a smaller, calmer card with room to breathe */
@media (max-width:640px){
  header{height:60px;padding:0 18px}.hs{display:none}.hi{margin-left:auto}header .logo{font-size:20px}
  main{padding:28px 28px 48px}
  .card{max-width:330px;padding:26px 22px 22px;border-radius:18px}
  .card .logo{font-size:19px;margin-bottom:16px}.card .logo span{border-width:1.5px;padding:0 6px}
  .lockic{margin-bottom:6px}.lockic svg{width:26px;height:26px}
  h1{font-size:25px}.sub{font-size:14px;margin:6px 0 20px}
  .f{height:48px;border-radius:12px;gap:10px;padding:0 14px;margin-bottom:12px}.f input{font-size:15px}.f svg{width:18px;height:18px}
  .btn{height:48px;font-size:15px;border-radius:12px}.go{margin-top:6px}
  .or{margin:16px 0;font-size:13px}
  .foot{margin-top:18px;font-size:11.5px}
}

/* Real logo */
.logo img{height:32px;width:auto;display:block}
.card .logo img{height:30px;margin:0 auto}
@media (max-width:640px){header .logo img{height:26px}.card .logo img{height:24px}}