*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Inter,Arial;color:#eaf0f6}

/* LOGIN */
body.login{
  background:
    linear-gradient(rgba(8,15,25,.75),rgba(8,15,25,.8)),
    url("building.jpg") center/cover no-repeat fixed;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-right:8%;
}

.login-card{
  width:420px;
  background:rgba(22,30,44,.88);
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:34px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

.logo{height:40px;display:block;margin:0 auto 14px}

h1{text-align:center;font-size:18px}
.subtitle{text-align:center;font-size:13px;opacity:.7;margin-bottom:20px}

.tabs{display:flex;background:rgba(255,255,255,.08);border-radius:14px;padding:4px;margin-bottom:20px}
.tabs button{flex:1;border:0;background:none;color:#ccc;padding:10px;border-radius:10px}
.tabs .active{background:#2f80ff;color:#fff}

.form-group{margin-bottom:14px}
label{font-size:12px;opacity:.7}
input{
  width:100%;
  padding:13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.hint{font-size:12px;opacity:.6;margin:10px 0}

.btn-submit{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:0;
  background:linear-gradient(135deg,#18c964,#2ed573);
  font-weight:700;
  cursor:pointer;
}

.footer{text-align:center;font-size:11px;opacity:.5;margin-top:16px}

/* PANEL */
body.panel{
  background:#0b1220;
  min-height:100vh;
}

.topbar{
  padding:20px 30px;
  display:flex;
  justify-content:space-between;
}

.topbar a{
  color:#fff;
  text-decoration:none;
}

.card{
  margin:30px;
  padding:24px;
  background:rgba(22,30,44,.85);
  border-radius:18px;
}