* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; color: #eaeaea; background: #000; }

.bg{
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,0,0,.20), rgba(0,0,0,.90)),
    radial-gradient(circle at 20% 10%, rgba(255,106,0,.10), transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(255,106,0,.08), transparent 55%);
  filter: saturate(1.1);
}

.wrap{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 50px;
}

.topbar{
  width: min(880px, 94vw);
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.brand{ display:flex; align-items:center; gap: 10px; }
.brand-icon{
  width: 34px; height: 34px; display:grid; place-items:center;
  border-radius: 10px; background: rgba(255,106,0,.15); color:#ff6a00;
}
.brand-name{ font-weight: 700; }
.brand-sub{ font-size: 12px; opacity: .7; margin-top: 1px; }

.nav{ display:flex; gap: 16px; }
.navlink{
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.navlink:hover{ background: rgba(255,255,255,.07); }

.card{
  width: min(420px, 94vw);
  background: rgba(18,18,18,.92);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.card-accent{
  height: 3px;
  background: #ff6a00;
}

.card-header{
  text-align:center;
  padding: 22px 22px 10px;
}
.card-logo{
  width: 46px; height: 46px; border-radius: 16px;
  display:grid; place-items:center;
  margin: 0 auto 10px;
  background: rgba(255,106,0,.12);
  color:#ff6a00;
  font-size: 20px;
}
h1{ margin: 0; font-size: 24px; }
.card-header p{ margin: 8px 0 0; opacity:.7; font-size: 13px; }

.form{ padding: 8px 22px 22px; }
label{ display:block; margin-top: 14px; font-size: 12px; font-weight: 650; opacity: .85; }

.field{
  margin-top: 7px;
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.icon{ width: 18px; opacity: .7; font-size: 14px; }
input{
  width:100%;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
}
input::placeholder{ color: rgba(255,255,255,.35); }

.btn{
  width:100%;
  margin-top: 18px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: #ff6a00;
  color: #0b0b0b;
  font-weight: 800;
  cursor:pointer;
}
.btn:hover{ filter: brightness(1.05); }

.msg{
  margin-top: 14px;
  text-align:center;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
}
.msg.ok{
  color: #8af7b2;
  background: rgba(0,255,130,.08);
  border: 1px solid rgba(0,255,130,.14);
}
.msg.err{
  color: #ff9b9b;
  background: rgba(255,0,0,.08);
  border: 1px solid rgba(255,0,0,.14);
}

.footer{
  margin-top: 26px;
  height: 44px; /* reserved space for logo */
  width: min(420px, 94vw);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .65;
}