:root{
  --gold-1:#f6e6b4;
  --gold-2:#d7b25c;
  --gold-3:#9c7a2f;
  --gold-4:#6f5220;
  --bg:#000000;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:#eee;
  font-family: "Noto Sans Thai",sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
	radial-gradient(80% 60% at 50% -10%, rgba(214,178,92,.15), transparent 60%),
	#000;
  font-family: "IBM Plex Sans Thai", sans-serif;
}
.card{
  width:100%;
  max-width: 420px;
  background:#0b0b0b;
  border-radius: 18px;
  padding: 28px 26px;
  position:relative;
  box-shadow:
	0 0 0 1px rgba(214,178,92,0.18),
	0 10px 30px rgba(0,0,0,0.6),
	0 0 80px rgba(214,178,92,0.08) inset;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 19px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2), var(--gold-3));
  filter: blur(8px); opacity:.18; z-index:-1;
}
.logo{
  width:72px; height:72px; border-radius:14px;
  margin:0 auto 8px auto; display:block; object-fit:contain;
  box-shadow: 0 4px 20px rgba(214,178,92,.25);
}
h1{
  margin:8px 0 18px 0; text-align:center; font-size:24px; font-weight:700;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.5px;
}
label{display:block; font-size:14px; margin:10px 6px 6px; color:#cfcfcf}
.input{
  width:100%; padding:12px 14px; border-radius:12px; outline:none;
  background:#0f0f0f; color:#eee; border:1px solid #272727;
  transition: border .2s, box-shadow .2s, background .2s;
}
.input:focus{
  border-color: var(--gold-2);
  box-shadow: 0 0 0 4px rgba(214,178,92,.12);
  background:#121212;
}
.btn{
  width:100%; margin-top:16px; padding:12px 16px; border:none; border-radius:12px;
  font-weight:700; letter-spacing:.3px; cursor:pointer; color:#1a1205;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  box-shadow: 0 6px 18px rgba(214,178,92,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter: brightness(1.06) }
.btn:active{ transform: translateY(1px) }
.footer{
  margin-top:14px; text-align:center; font-size:12px; color:#b7a36a; opacity:.95;
}
.alert {
  margin-bottom: 14px;
}

.icon_login {
  position: absolute;
  color: #777;
  margin-top: 17px;
  margin-left: 17px;
}