:root{
  --bg:#040404;
  --panel:rgba(11,11,12,.92);
  --panel-2:#0e0e10;
  --line:#242428;
  --line-soft:#19191c;
  --text:#f4f4f5;
  --muted:#85858d;
  --soft:#b9bac1;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 30%,#151518 0%,#09090a 32%,#040404 68%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.grid{
  position:fixed;inset:0;pointer-events:none;opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at center,black,transparent 75%);
}
.ambient{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none}
.ambient-a{width:300px;height:300px;background:rgba(255,255,255,.055);left:12%;top:10%}
.ambient-b{width:360px;height:360px;background:rgba(255,255,255,.04);right:10%;bottom:5%}
.shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 18px;
}
.auth-card{
  width:min(430px,100%);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,17,19,.96),rgba(8,8,9,.96));
  border-radius:22px;
  padding:26px;
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:2px 0 25px;
}
.brand img{
  width:54px;height:54px;object-fit:cover;border-radius:13px;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.12));
}
.brand strong{
  display:block;
  font-size:15px;
  letter-spacing:.19em;
}
.brand span{
  display:block;
  color:#686870;
  font-size:9px;
  letter-spacing:.2em;
  margin-top:5px;
}
.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  background:#09090b;
  border:1px solid var(--line-soft);
  border-radius:12px;
  margin-bottom:26px;
}
.tab{
  border:0;
  border-radius:9px;
  background:transparent;
  color:#74747b;
  padding:11px 12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}
.tab.active{
  color:#f5f5f6;
  background:#171719;
  box-shadow:inset 0 0 0 1px #252529;
}
.panel{display:none}
.panel.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.heading{text-align:center;margin-bottom:25px}
.heading h1{
  font-size:27px;
  letter-spacing:-.04em;
  margin:0 0 8px;
}
.heading p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
form{display:grid;gap:15px}
label>span{
  display:block;
  color:#a7a7ad;
  font-size:12px;
  font-weight:650;
  margin:0 0 7px 2px;
}
input{
  width:100%;
  height:47px;
  border-radius:10px;
  border:1px solid #252529;
  background:#09090b;
  color:#f4f4f5;
  outline:none;
  padding:0 13px;
  font-size:13px;
  transition:.18s ease;
}
input::placeholder{color:#4f4f56}
input:focus{
  border-color:#52525a;
  box-shadow:0 0 0 3px rgba(255,255,255,.035);
}
.password-wrap{position:relative}
.password-wrap input{padding-right:62px}
.eye{
  position:absolute;
  right:7px;top:50%;transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#717178;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:8px;
}
.eye:hover{color:#ddd}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:-2px;
}
.remember{
  display:flex;align-items:center;gap:7px;
  color:#85858d;font-size:11px;
}
.remember input{width:14px;height:14px;accent-color:white}
.remember span{margin:0;font-size:11px;color:#85858d;font-weight:500}
.row a{
  color:#aaaab1;
  font-size:11px;
  text-decoration:none;
}
.primary{
  height:47px;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg,#f5f5f6,#d8d8da);
  color:#0a0a0b;
  font-weight:800;
  cursor:pointer;
  margin-top:3px;
  transition:.18s ease;
}
.primary:hover{transform:translateY(-1px);filter:brightness(1.03)}
.primary:active{transform:translateY(0)}
.bottom-copy{
  text-align:center;
  color:#6e6e75;
  font-size:11px;
  margin:20px 0 2px;
}
.link-switch{
  border:0;background:none;padding:0;
  color:#c8c8cd;font-weight:700;cursor:pointer;
}
.secure-line{
  border-top:1px solid var(--line-soft);
  margin-top:22px;
  padding-top:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#57575e;
  font-size:10px;
  letter-spacing:.04em;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:#bfc0c5;
  box-shadow:0 0 10px rgba(255,255,255,.45);
}
@media(max-width:520px){
  .shell{padding:18px 12px}
  .auth-card{padding:21px 18px;border-radius:18px}
}