:root{
  --top-h: 56px;
  --bg: #020617;
  --paper: rgba(2,6,23,.65);
  --line: rgba(148,163,184,.15);
  --neon: #38bdf8;
  --danger: #ef4444;
  --radius-lg: 18px;
  --shadow-lg: 0 18px 45px rgba(0,0,0,.35);
  --txt: #e2e8f0;
  --muted: rgba(226,232,240,.65);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family:"Kanit",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* ชั้น 1 = แสงฟุ้ง, ชั้น 2 = รูปพื้นหลัง */
  background:
    radial-gradient(circle at 10% 10%, rgba(56,189,248,.12) 0%, rgba(2,6,23,0) 42%),
    url("images/bg.png") center top / cover no-repeat fixed;
  /* ↑ เปลี่ยน path เป็นของคุณ เช่น url("bg.png") */
  background-color: #020617;     /* fallback ถ้ารูปไม่โหลด */
  min-height:100vh;
  color:var(--txt);
  padding-top:var(--top-h);
}


/* ====== TOPBAR (ใช้โครงเดียวกับหน้าหลัก) ====== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--top-h);
  background: radial-gradient(circle at 10% 0%, rgba(59,130,246,.20) 0%, rgba(2,6,23,1) 40%);
  border-bottom: 1px solid rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:999;
  display:flex;
  align-items:center;
}
.topbar-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:14px;
  border-right:1px solid rgba(255,255,255,.05);
}
.brand-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  background: radial-gradient(circle, #38bdf8 0%, rgba(56,189,248,0) 70%);
  box-shadow: 0 0 16px rgba(56,189,248,.8);
}
.brand-text strong{
  display:block;
  font-weight:700;
  letter-spacing:.03em;
  font-size:13.5px;
}
.brand-text small{
  display:block;
  font-size:10.5px;
  color:rgba(226,232,240,.5);
}
.top-link{
  color:rgba(226,232,240,.7);
  text-decoration:none;
  font-size:13px;
  padding:6px 14px;
  border-radius:999px;
  transition:.12s;
}
.top-link:hover{
  background:rgba(148,163,184,.08);
  color:#fff;
}
.top-link.active{
  background:linear-gradient(135deg,#38bdf8 0%, #1d4ed8 100%);
  color:#fff;
  box-shadow:0 6px 18px rgba(30,64,175,.25);
}

/* ไม่มี user box เพราะยังไม่ล็อกอิน */
.topbar-right{
  display:flex;
  gap:10px;
}

/* ====== PAGE WRAP ====== */
.page-wrap{
  width:min(1100px, 100%);
  margin:38px auto 44px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - var(--top-h) - 80px);
  padding:16px;
}

/* ====== LOGIN CARD ====== */
.login-card{
  width:100%;
  max-width:410px;
  background: radial-gradient(circle at 20% 0%, rgba(15,23,42,.8) 0%, rgba(15,23,42,.25) 62%);
  border:1px solid rgba(148,163,184,.08);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
.login-head{
  text-align:center;
  padding:20px 20px 8px;
}
.login-icon{
  width:74px;
  height:74px;
  margin:0 auto 12px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(56,189,248,.9) 0%, rgba(56,189,248,0) 70%);
  display:grid;
  place-items:center;
  color:#0f172a;
  font-size:30px;
  font-weight:700;
  box-shadow: 0 0 25px rgba(56,189,248,.55);
}
.login-title{
  font-size:21px;
  font-weight:700;
  margin-bottom:2px;
}
.login-sub{
  color:rgba(226,232,240,.58);
  font-size:12.5px;
}

.login-body{
  padding:18px 20px 20px;
}
.field{ margin-bottom:12px; }
.label{
  font-size:12.5px;
  color:rgba(226,232,240,.6);
  margin-bottom:5px;
  display:block;
}
.control{
  position:relative;
}
.control input{
  width:100%;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
  padding:10px 38px 10px 12px;
  color:var(--txt);
  outline:none;
  transition:.15s;
}
.control input:focus{
  border-color:rgba(56,189,248,.6);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
  background:rgba(15,23,42,.4);
}
.control .icon{
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  color:rgba(226,232,240,.5);
  cursor:pointer;
}

/* alert */
.alert{
  background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.45);
  border-radius:12px;
  padding:8px 10px 9px;
  font-size:12.5px;
  color:#fee2e2;
  margin-bottom:12px;
}
.alert.ok{
  background:rgba(45,212,191,.12);
  border:1px solid rgba(45,212,191,.4);
  color:#ecfdf3;
}

/* button */
.btn-submit{
  width:100%;
  border:0;
  background:linear-gradient(135deg,#38bdf8 0%, #1d4ed8 100%);
  color:#fff;
  border-radius:12px;
  padding:10px 8px 11px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 15px 30px rgba(37,99,235,.25);
  transition:.12s;
}
.btn-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 36px rgba(37,99,235,.35);
}
.login-footer{
  text-align:center;
  margin-top:16px;
  font-size:12.5px;
  color:rgba(226,232,240,.6);
}
.login-footer a{
  color:#38bdf8;
  text-decoration:none;
}
.login-footer a:hover{
  text-decoration:underline;
}

@media (max-width: 720px){
  .topbar-inner{ flex-wrap: wrap; }
  .topbar-left{ flex-wrap: wrap; }
  .page-wrap{ margin-top:24px; }
}

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background: radial-gradient(circle at 10% 0%, rgba(59,130,246,.20) 0%, rgba(2,6,23,1) 40%);
  border-bottom: 1px solid rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  z-index:999;
  display:flex;
  align-items:center;
}
.topbar-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;  /* ซ้าย-กลาง-ขวา */
  gap:16px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand{display:flex;align-items:center;gap:8px;}
.brand-icon{
  width:30px;height:30px;border-radius:999px;
  background: radial-gradient(circle, #38bdf8 0%, rgba(56,189,248,0) 70%);
  box-shadow: 0 0 16px rgba(56,189,248,.8);
}
.brand-text strong{font-size:13.5px;}
.brand-text small{font-size:10.5px;color:rgba(226,232,240,.5);}

/* กลางให้กว้าง แล้วจัดกลาง */
.topbar-nav{
  flex:1;                     /* กินพื้นที่กลาง */
  display:flex;
  justify-content:center;     /* <-- ตรงนี้ทำให้เมนูอยู่กลาง */
  gap:14px;
}
.top-link{
  color:rgba(226,232,240,.7);
  text-decoration:none;
  font-size:13px;
  padding:6px 14px;
  border-radius:999px;
  transition:.12s;
}
.top-link:hover{
  background:rgba(148,163,184,.08);
  color:#fff;
}
.top-link.active{
  background:linear-gradient(135deg,#38bdf8 0%, #1d4ed8 100%);
  color:#fff;
  box-shadow:0 6px 18px rgba(30,64,175,.25);
}

.topbar-right{
  display:flex;
  gap:10px;
}

/* จอเล็กให้เมนูหดลง */
@media (max-width:820px){
  .topbar-inner{
    flex-wrap:wrap;
    justify-content:center;
  }
  .topbar-nav{
    order:3;
    flex-basis:100%;
    justify-content:center;
    gap:10px;
  }
}