:root{
  --bg:#0e0f12;
  --panel:#121625e6;
  --border:#2a3242;
  --txt:#e8eaf0;
  --muted:#a7afbf;
  --brand:#3b82f6;
  --brand-strong:#2563eb;
  --danger:#ef4444;
  --radius:14px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background:#0e0f12 url('/image/background.jpeg') center/cover fixed no-repeat;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Prompt", sans-serif;
  font-size:18px; line-height:1.45;
}
body::before{
  content:""; position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(8,12,20,.55) 0%, rgba(8,12,20,.35) 40%, rgba(8,12,20,.55) 100%);
  pointer-events:none;
}

/* Layout */
.container{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.panel{
  width:min(92vw, 460px);
  background:var(--panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 24px 22px;
}

/* Header (center) */
.logoRow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; text-align:center; }
.logoImg{ width:50px; height:50px; border-radius:50%; object-fit:cover; object-position:center; }
h1{ font-size:26px; margin:0; }

/* Form */
label{ display:block; font-size:15px; color:var(--muted); margin:12px 0 6px; }

.control{ position:relative; }

/* เผื่อพื้นที่ด้านขวาให้ปุ่มตา */
.control input{
  width:100%; height:52px;
  border-radius:12px; border:1px solid var(--border);
  background:#0f1424; color:var(--txt);
  padding:0 54px 0 44px;
  font-size:18px;
  transition:border-color .15s ease, background-color .15s ease;
}
.control input:focus{ outline:0; border-color:var(--brand); background:#0f1529; }

/* ไอคอนด้านซ้าย */
.iconL{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#94a3b8;
}

/* ปุ่มตา: จัดกึ่งกลางแนวตั้งด้วย inset-block + margin-block */
.togglePwd{
  position:absolute; right:8px; inset-block:0; margin-block:auto;
  width:38px; height:38px;
  border-radius:10px; border:1px solid transparent;
  background:transparent; color:#9aa6bd;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.togglePwd:focus{ outline:0; border-color:#6ea8ff; }

/* ซ้อนทับไอคอนทั้งสองตัวตำแหน่งเดียว */
.togglePwd svg{ position:absolute; width:22px; height:22px; pointer-events:none; }

/* ปุ่มหลัก */
.btn{
  width:100%; height:52px; margin-top:16px;
  border:1px solid var(--brand-strong);
  border-radius:12px; background:var(--brand);
  color:#fff; font-weight:700; letter-spacing:.2px; cursor:pointer;
  transition:background-color .15s ease, transform .05s ease;
}
.btn:hover{ background:var(--brand-strong) }
.btn:active{ transform:translateY(1px) }
.btn[disabled]{ opacity:.65; cursor:not-allowed }

/* กล่อง error */
.err{
  margin-top:12px; padding:12px 14px;
  border-radius:12px; font-size:16px;
  color:#ffd5d6; background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
}

/* Links centered */
.links{ display:flex; align-items:center; gap:22px; margin-top:16px; font-size:15px; }
.links-center{ justify-content:center; }
.link{ color:#cbd5ff; text-decoration:none }
.link:hover{ text-decoration:underline }
.dot{ color:#667; user-select:none }

footer{ text-align:center; color:var(--muted); font-size:12px; margin-top:16px }

/* Overlay Loader */
.overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(10,12,18,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index:50;
  opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.spinnerWrap{
  background:#111522; border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; min-width:240px; text-align:center;
}
.spinner{
  width:30px;height:30px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:#7aa8ff;
  margin:0 auto 10px; animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.loadingTxt{ font-size:15px; color:#dbe6ff }

@media (min-width:1280px){
  h1{font-size:27px}
  .control input{height:52px}
}