/* Nusa Melati Login + Account Styles - V297 */
:root {
  --login-bg: #061413;
  --login-panel: rgba(11, 22, 23, .94);
  --login-panel-2: rgba(8, 18, 19, .82);
  --login-text: #f8fafc;
  --login-muted: #a7b0b8;
  --login-line: rgba(148, 163, 184, .22);
  --login-green: #08a94f;
  --login-green-2: #16c766;
  --login-danger: #f87171;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--login-text);
  background:
    radial-gradient(circle at 24% 0%, rgba(22, 199, 102, .22), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(14, 165, 233, .10), transparent 28%),
    linear-gradient(160deg, #071818, #050b0c 72%);
}
a { color: inherit; }
.auth-checking body { visibility: hidden; }
.loginShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}
.loginCard {
  width: min(100%, 520px);
  background: var(--login-panel);
  border: 1px solid var(--login-line);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.04);
}
.brandRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.brandMark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--login-green-2);
  background: rgba(22, 199, 102, .10);
}
.brandTitle {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
}
.loginTitle {
  text-align: center;
  font-size: clamp(24px, 5vw, 36px);
  margin: 6px 0 10px;
  font-weight: 900;
}
.loginModeBadge {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 8px 12px;
  border: 1px solid rgba(22, 199, 102, .24);
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(22, 199, 102, .10);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.field { margin: 0 0 22px; }
.field label {
  display: block;
  font-size: 19px;
  line-height: 1;
  margin: 0 0 12px;
  font-weight: 800;
}
.inputWrap { position: relative; }
.field input {
  width: 100%;
  height: 62px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
  background: rgba(3, 10, 11, .40);
  color: var(--login-text);
  outline: none;
  padding: 0 54px 0 18px;
  font-size: 19px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.field input::placeholder { color: rgba(226, 232, 240, .72); }
.field input:focus {
  border-color: rgba(22, 199, 102, .70);
  box-shadow: 0 0 0 4px rgba(22, 199, 102, .12);
}
.eyeBtn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  color: rgba(248, 250, 252, .78);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.eyeBtn:hover { background: rgba(255,255,255,.06); }
.loginBtn, .primaryBtn, .secondaryBtn {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  border-radius: 16px;
  min-height: 60px;
}
.loginBtn, .primaryBtn {
  background: linear-gradient(180deg, var(--login-green-2), var(--login-green));
  color: white;
  font-size: 23px;
  box-shadow: 0 12px 30px rgba(8, 169, 79, .26);
}
.loginBtn:disabled { opacity: .65; cursor: wait; }
.secondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 18px;
  border: 1px solid var(--login-line);
  background: rgba(255,255,255,.06);
  color: var(--login-text);
  font-size: 16px;
}
.loginFoot {
  text-align: center;
  margin: 26px 0 0;
  color: rgba(248, 250, 252, .82);
  font-size: 18px;
  font-weight: 800;
}
.loginMsg {
  display: none;
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.loginMsg.show { display: block; }
.loginMsg.error { color: #fecaca; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .24); }
.loginMsg.info { color: #bbf7d0; background: rgba(22, 199, 102, .12); border: 1px solid rgba(22, 199, 102, .24); }
.configHint {
  margin: 18px 0 0;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.accountShell { min-height: 100vh; padding: 24px; }
.accountWrap { max-width: 980px; margin: 0 auto; }
.accountTop { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.accountCard {
  background: var(--login-panel);
  border: 1px solid var(--login-line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
  margin-bottom: 16px;
}
.accountCard h1, .accountCard h2 { margin: 0 0 12px; }
.statusGrid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top: 16px; }
.statusItem { background: var(--login-panel-2); border:1px solid var(--login-line); border-radius:16px; padding:14px; }
.statusItem small { display:block; color:var(--login-muted); margin-bottom:6px; }
.statusItem b { overflow-wrap:anywhere; }
.accountActions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.accountActions .primaryBtn, .accountActions .secondaryBtn { width:auto; min-height:48px; }
.codeNote { background:#020617; color:#dbeafe; border-radius:14px; padding:14px; overflow:auto; }
@media (max-width: 600px) {
  .loginCard { padding: 26px 20px; border-radius: 22px; }
  .field input { height: 58px; font-size: 17px; }
  .statusGrid { grid-template-columns: 1fr; }
  .accountTop { align-items: stretch; flex-direction: column; }
}