:root{
  --bg:#07101c;
  --panel:#0d1928;
  --panel2:#111f30;
  --text:#f7f9fc;
  --muted:#93a4b8;
  --line:#213247;
  --blue:#5aa2ff;
  --blue2:#2d7ff9;
  --green:#78e64c;
  --danger:#ff6b6b;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
  background:
    radial-gradient(circle at 85% 0%,rgba(90,162,255,.13),transparent 34rem),
    var(--bg);
  color:var(--text);
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.shell{width:min(1080px,calc(100% - 32px));margin:0 auto}
.topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  color:#fff;
  font-weight:900;
  letter-spacing:.12em;
  font-size:14px;
  text-decoration:none;
}
.brand span{color:var(--blue)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--muted);font-size:14px}
.main{padding:54px 0 80px}
.auth-wrap{
  width:min(470px,100%);
  margin:20px auto;
}
.card{
  background:rgba(13,25,40,.94);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
}
h1{font-size:36px;line-height:1.05;margin:0 0 10px}
h2{margin:0 0 8px}
p{color:var(--muted);line-height:1.55}
label{
  display:block;
  color:#c7d2df;
  font-size:13px;
  font-weight:700;
  margin:17px 0 7px;
}
input,select{
  width:100%;
  border:1px solid var(--line);
  background:#08131f;
  color:#fff;
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  font-size:15px;
}
input:focus,select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(90,162,255,.12);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
button,.button{
  border:0;
  border-radius:12px;
  padding:13px 18px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
button:hover,.button:hover{text-decoration:none}
.primary{
  width:100%;
  margin-top:20px;
  background:var(--blue2);
  color:#fff;
}
.secondary{
  background:#142338;
  border:1px solid var(--line);
  color:#fff;
}
.danger{background:#351a21;color:#ff9b9b}
.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:5px;
  background:#08131f;
  border-radius:13px;
  margin-bottom:25px;
}
.tab{
  border:0;
  margin:0;
  background:transparent;
  color:var(--muted);
}
.tab.active{background:#18283b;color:#fff}
.form-panel{display:none}
.form-panel.active{display:block}
.msg{
  display:none;
  margin-top:16px;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  line-height:1.4;
}
.msg.show{display:block}
.msg.ok{background:#132d20;color:#9bedb6}
.msg.err{background:#351a21;color:#ffaaaa}
.small{font-size:13px}
.center{text-align:center}
.muted{color:var(--muted)}
.dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px;
}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.stat{
  min-height:155px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.eyebrow{
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.big{font-size:31px;font-weight:900}
.profile-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  margin-top:16px;
}
.value{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-top:5px;
}
.divider{height:1px;background:var(--line);margin:22px 0}
.password-wrap{position:relative}
.password-wrap input{padding-right:54px}
.eye{
  position:absolute;
  right:5px;
  top:5px;
  width:42px;
  height:36px;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--muted);
  font-size:17px;
}
.footer{
  padding:25px 0 40px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
}
@media(max-width:760px){
  .dashboard-grid,.profile-grid{grid-template-columns:1fr}
  .dashboard-head{align-items:flex-start;flex-direction:column}
  h1{font-size:31px}
  .nav{gap:10px}
  .card{padding:22px}
}