:root{
  --bg:#020814;
  --bg2:#06111f;
  --card:#0b1828;
  --card2:#071321;
  --gold:#f2c76a;
  --gold2:#c8952e;
  --text:#f7fbff;
  --muted:#9fb0c3;
  --line:rgba(242,199,106,.20);
  --line2:rgba(255,255,255,.10);
  --fb:#1f5ad7;
  --tg:#229ed9;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,'Noto Sans Thai',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 8%,rgba(242,199,106,.10),transparent 22%),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));
}

a{color:inherit;text-decoration:none}

.auth-page{
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  position:relative;
  overflow:hidden;
}

.auth-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/hero-finance-time-dark.png") center/cover no-repeat;
  opacity:.15;
  filter:brightness(.78) contrast(1.08);
  pointer-events:none;
}

.auth-page::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,transparent 0,rgba(2,8,20,.30) 36%,rgba(2,8,20,.92) 78%),
    linear-gradient(90deg,rgba(2,8,20,.97),rgba(2,8,20,.66),rgba(2,8,20,.97));
  pointer-events:none;
}

.auth-wrap{
  position:relative;
  z-index:2;
  width:min(100%,440px);
  margin:auto;
}

.auth-logo{
  display:block;
  width:154px;
  max-width:58vw;
  margin:0 auto 12px;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.42));
}

.auth-card{
  width:100%;
  background:linear-gradient(180deg,rgba(11,24,40,.94),rgba(7,19,33,.94));
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  box-shadow:0 28px 82px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}

.auth-card h1{
  margin:0 0 4px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.auth-subtitle{
  margin:0 0 18px;
  color:#c7d4e6;
  font-size:14px;
}

.field{margin:10px 0}

label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:900;
  color:#eaf3ff;
}

.input-wrap{position:relative}

.input-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:#b8c8da;
  z-index:2;
  opacity:.92;
}

.input-icon svg{display:block;width:18px;height:18px}

input{
  width:100%;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(242,199,106,.16);
  background:rgba(2,8,20,.46);
  color:var(--text);
  outline:none;
  padding:0 44px;
  font-size:15px;
  font-weight:750;
}

input::placeholder{color:#8998aa}

input:focus{
  border-color:rgba(242,199,106,.65);
  box-shadow:0 0 0 4px rgba(242,199,106,.08);
}

.password-toggle{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#dbe8f7;
  cursor:pointer;
  width:22px;
  height:22px;
  padding:0;
  opacity:.9;
}

.password-toggle svg{width:21px;height:21px;display:block}

.form-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0 14px;
  color:#dbe8f7;
  font-weight:800;
  font-size:13px;
}

.remember{
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}

.remember input{
  width:19px;
  height:19px;
  padding:0;
  accent-color:var(--gold);
}

.forgot{
  color:var(--gold);
  font-weight:950;
}

.btn{
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
  transition:.18s ease;
  text-align:center;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1c1205;
  box-shadow:0 16px 34px rgba(200,149,46,.22);
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:#9fb0c3;
  margin:20px 0 14px;
  font-weight:900;
  font-size:13px;
}

.divider:before,.divider:after{
  content:"";
  height:1px;
  background:var(--line2);
  flex:1;
}

.social-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.social-btn{
  min-height:46px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  color:#fff;
}

.social-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:950;
  flex:0 0 auto;
}

.google{
  background:linear-gradient(180deg,#fff,#eef2f6);
  color:#101827;
}

.google-g{
  font-size:20px;
  font-weight:950;
  background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.facebook{
  background:linear-gradient(135deg,#2366e8,#153f9c);
}

.facebook-f{
  font-size:21px;
  color:#fff;
  background:#1877f2;
  line-height:1;
}

.telegram{
  background:linear-gradient(135deg,#2cbfff,#1685d8);
}

.telegram-t{
  font-size:16px;
  color:#fff;
  background:#229ed9;
}

.auth-switch{
  text-align:center;
  margin:18px 0 0;
  color:#b8c8da;
  font-weight:800;
  font-size:14px;
}

.auth-switch a{
  color:var(--gold);
  font-weight:950;
}

.message{
  min-height:19px;
  margin:10px 0 0;
  color:var(--gold);
  font-weight:900;
  text-align:center;
  font-size:13px;
}

.auth-footer{
  margin-top:14px;
  text-align:center;
  color:#94a6ba;
  font-weight:800;
  letter-spacing:.05em;
  font-size:11px;
}

.auth-footer strong{
  display:block;
  color:var(--gold);
  letter-spacing:.22em;
  margin-bottom:3px;
  font-size:13px;
}

.complete-card .auth-card{padding:22px}
.complete-card .btn{margin-top:10px}

@media(max-height:760px){
  .auth-page{align-items:flex-start;overflow:auto}
  .auth-logo{width:138px;margin-bottom:8px}
  .auth-card{padding:20px}
  .auth-card h1{font-size:27px}
  .auth-subtitle{margin-bottom:12px}
  input,.btn{height:44px;min-height:44px}
  .divider{margin:14px 0 10px}
  .auth-footer{display:none}
}

@media(max-width:560px){
  .auth-page{height:auto;min-height:100vh;overflow:auto}
  .auth-card{padding:20px;border-radius:18px}
  .auth-card h1{font-size:28px}
  .social-row{grid-template-columns:1fr}
  .form-row{display:block}
  .forgot{display:block;margin-top:8px}
}