/* ============================================================
   MacCom Admin — Login (โทนน้ำตาล / พื้นหลังตารางหมากรุก)
   ============================================================ */
:root{
  --coffee-900:#2b1c14;
  --coffee-800:#3a271c;
  --coffee-700:#4a3125;
  --coffee-600:#5c4030;
  --coffee-500:#6f4e37;   /* coffee */
  --coffee-400:#8a6a4f;
  --cream:#f3e9dd;
  --gold:#c9a24b;
  --gold-soft:#e6c877;
  --ink:#2a1c12;
  --danger:#b9433d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI","Sarabun","Kanit",system-ui,-apple-system,sans-serif;
  color:var(--cream);
  background-color:var(--coffee-800);
  /* ตารางหมากรุก 2 เฉดน้ำตาล + เส้นขาวจาง */
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.030) 0deg 90deg,
      rgba(0,0,0,.045) 90deg 180deg
    );
  background-size:76px 76px, 76px 76px, 152px 152px;
  background-position:center;
  position:relative;
  overflow:hidden;
}
/* แสงไล่โทนตรงกลางให้ดูมีมิติ */
body::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(1200px 700px at 50% 30%, rgba(201,162,75,.16), transparent 60%),
             radial-gradient(900px 900px at 50% 120%, rgba(0,0,0,.55), transparent 70%);
  pointer-events:none;
}

.login-wrap{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
}

.login-card{
  width:100%; max-width:410px;
  background:linear-gradient(180deg, rgba(74,49,37,.92), rgba(43,28,20,.96));
  border:1px solid rgba(230,200,119,.28);
  border-radius:18px;
  box-shadow:
     0 30px 70px -20px rgba(0,0,0,.75),
     inset 0 1px 0 rgba(255,255,255,.08);
  padding:34px 30px 30px;
  backdrop-filter:blur(6px);
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

.brand{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:22px;
}
.brand .logo-plaque{
  width:118px; height:118px; border-radius:22px;
  background:radial-gradient(circle at 50% 35%, #ffffff, #f0eae2);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.6), inset 0 0 0 3px rgba(201,162,75,.35);
  margin-bottom:14px;
}
.brand .logo-plaque img{ width:90px; height:auto; display:block; }
.brand h1{
  margin:2px 0 2px; font-size:21px; letter-spacing:.3px;
  color:#fff; font-weight:700;
}
.brand .sub{
  font-size:12.5px; color:var(--gold-soft); letter-spacing:1.6px;
  text-transform:uppercase;
}

.field{ margin-bottom:15px; }
.field label{
  display:block; font-size:12.5px; margin-bottom:7px;
  color:#e8d9c6; letter-spacing:.3px;
}
.input-shell{
  display:flex; align-items:center; gap:10px;
  background:rgba(20,13,9,.55);
  border:1px solid rgba(230,200,119,.22);
  border-radius:11px; padding:0 12px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.input-shell:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.20);
  background:rgba(20,13,9,.72);
}
.input-shell svg{ color:var(--gold-soft); flex:0 0 auto; }
.input-shell input{
  flex:1; background:transparent; border:0; outline:0;
  color:#fff; font-size:15px; padding:13px 0; letter-spacing:.3px;
  font-family:inherit;
}
.input-shell input::placeholder{ color:#b39a83; }
.toggle-eye{ background:none;border:0;cursor:pointer;color:#c9b295;padding:6px;display:flex}
.toggle-eye:hover{color:var(--gold-soft)}

.row-between{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 20px; }
.remember{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.remember input{ position:absolute; opacity:0; width:0; height:0; }
.remember .box{
  width:20px; height:20px; border-radius:6px;
  border:1.5px solid rgba(230,200,119,.5);
  background:rgba(20,13,9,.5);
  display:flex; align-items:center; justify-content:center;
  transition:all .16s;
}
.remember .box svg{ opacity:0; transform:scale(.5); transition:all .16s; color:#2b1c14 }
.remember input:checked + .box{ background:var(--gold-soft); border-color:var(--gold-soft); }
.remember input:checked + .box svg{ opacity:1; transform:none; }
.remember span{ font-size:13px; color:#e8d9c6; }
.link-muted{ font-size:12.5px; color:#c9b295; text-decoration:none; }
.link-muted:hover{ color:var(--gold-soft); }

.btn-login{
  width:100%; border:0; cursor:pointer;
  padding:14px 16px; border-radius:12px;
  font-size:15.5px; font-weight:700; letter-spacing:.6px; font-family:inherit;
  color:#2a1c12;
  background:linear-gradient(180deg,#e6c877,#c9a24b);
  box-shadow:0 12px 22px -10px rgba(201,162,75,.7), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s, box-shadow .18s, filter .18s;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn-login:hover{ filter:brightness(1.04); box-shadow:0 16px 26px -10px rgba(201,162,75,.8); }
.btn-login:active{ transform:translateY(1px); }

.alert{
  display:flex; align-items:center; gap:9px;
  background:rgba(185,67,61,.16); border:1px solid rgba(185,67,61,.5);
  color:#ffd9d6; font-size:13.5px; padding:11px 13px; border-radius:10px;
  margin-bottom:18px;
}

.login-foot{
  text-align:center; margin-top:22px;
  font-size:11.5px; color:#a98d72; letter-spacing:.4px;
}
.login-foot b{ color:var(--gold-soft); font-weight:600; }

.hint-cred{
  margin-top:14px; font-size:11.5px; color:#c9b295;
  background:rgba(255,255,255,.04); border:1px dashed rgba(230,200,119,.28);
  border-radius:10px; padding:9px 12px; text-align:center;
}
.hint-cred code{ color:var(--gold-soft); }

@media (max-width:440px){
  .login-card{ padding:26px 20px 24px; border-radius:15px; }
  .brand .logo-plaque{ width:100px; height:100px; }
}