:root{
  --accent:#2563eb;
  --card-border:rgba(255,255,255,.15);
  --glass-bg:rgba(12,18,32,.28); /* การ์ดโปร่งใสสำหรับธีม Glass */
}
*{box-sizing:border-box}

body{
  margin:0;min-height:100vh;
  font-family:"Segoe UI","Prompt",system-ui,Arial,sans-serif;
  background:#000 center/cover no-repeat fixed;
  display:flex;align-items:center;justify-content:center;
  transition:background .45s ease-in-out,color .2s;
  color:#e5e7eb;
}

/* พื้นหลัง 5 รูป */
body[data-bg="1"]{background-image:url("../D1_IMAGE_index/background_1.jpg");}
body[data-bg="2"]{background-image:url("../D1_IMAGE_index/background_2.jpg");}
body[data-bg="3"]{background-image:url("../D1_IMAGE_index/background_3.jpg");}
body[data-bg="4"]{background-image:url("../D1_IMAGE_index/background_4.jpg");}
body[data-bg="5"]{background-image:url("../D1_IMAGE_index/background_5.jpg");}

/* การ์ดหลัก */
.login-card{
  width:390px;max-width:92vw;
  padding:30px 24px;border-radius:22px;text-align:center;
  border:1px solid var(--card-border);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transition:background .25s,border-color .25s,color .25s,box-shadow .25s;
}

/* ธีม */
.theme-dark .login-card{ background:rgba(17,24,39,.92); color:#e5e7eb; }
.theme-light{ color:#111; }
.theme-light .login-card{ background:rgba(255,255,255,.92); color:#111; }
.theme-glass .login-card{
  background:var(--glass-bg); color:#f1f5f9;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* ✅ ธีมโปร่งใส 100% */
.theme-clear .login-card{
  background:transparent;border-color:transparent;
  box-shadow:none;color:#fff;
}

.logo{
  width:200px;margin:6px auto 22px;display:block;
  user-select:none;-webkit-user-select:none;
  -webkit-user-drag:none;
  touch-action:manipulation;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))
         drop-shadow(0 0 18px var(--accent));
}

/* ฟอร์ม */
.form{display:flex;flex-direction:column;gap:14px}

/* ✅ ขอบ input เปลี่ยนตาม Accent (ปกติและตอนโฟกัส) */
.form input{
  padding:12px 14px;border-radius:12px;outline:none;font-size:16px;
  color:#fff;background:rgba(0,0,0,.28);
  border:2px solid var(--accent);                /* สีตาม Accent */
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.form input::placeholder{color:#cbd5e1;}
.form input:focus{
  box-shadow:0 0 8px var(--accent);
  background:rgba(0,0,0,.35);
}
/* light mode ให้ input อ่านง่าย */
.theme-light .form input{background:#eef2ff;color:#111;}
.theme-light .form input::placeholder{color:#64748b;}

/* ✅ ธีม clear: การอ่านบนภาพ */
.theme-clear .form input{
  background:rgba(0,0,0,.40); color:#fff;
}

/* ปุ่ม */
.form .btn-accent{
  background:var(--accent);color:#fff;border:none;border-radius:12px;
  padding:12px;font-size:17px;cursor:pointer;transition:.25s;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.form .btn-accent:hover{transform:translateY(-1px);opacity:.9}

/* บัญชี DEMO ใช้ฟอร์ม Username/Password เดียวกับสมาชิก แต่แยก Session ฝั่ง Server */
.form .btn-accent:disabled{opacity:.62;cursor:wait;transform:none}
.demo-login-hint{margin:10px 2px 0;color:#cbd5e1;font-size:10px;line-height:1.5}
.demo-login-hint strong{color:#fff;letter-spacing:.08em}
.theme-light .demo-login-hint{color:#475569}
.theme-light .demo-login-hint strong{color:#0f172a}
.demo-access__notice{margin:9px 0 0;padding:8px 9px;border-radius:9px;background:rgba(239,68,68,.13);color:#fecaca!important;font-size:11px;line-height:1.5}
.demo-access__notice.is-success{background:rgba(16,185,129,.13);color:#a7f3d0!important}
.theme-light .demo-access__notice{color:#991b1b!important}
.theme-light .demo-access__notice.is-success{color:#065f46!important}
.login-customize__divider{margin-top:16px;display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:12px;font-weight:700}
.login-customize__divider::before,.login-customize__divider::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.2)}
.theme-light .login-customize__divider{color:#475569}
.theme-light .login-customize__divider::before,.theme-light .login-customize__divider::after{background:rgba(15,23,42,.16)}

/* สวิตช์ */
.switcher{margin-top:18px;text-align:center}
.switcher label{font-size:14px;margin-right:6px;color:#e2e8f0}
.theme-light .switcher label{color:#475569}
.switcher button{
  margin:4px;border:none;cursor:pointer;
  padding:6px 10px;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;
}
.theme-light .switcher button{background:#e2e8f0;color:#111}
#glass{
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.25);
}

/* Accent palette */
.accent-toggle button{
  width:22px;height:22px;border-radius:50%;
  padding:0;border:none;cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.accent-toggle button:hover{
  transform:scale(1.2);
  box-shadow:0 0 6px var(--accent);
}


/* Background thumbnails */
.thumbs{display:flex;gap:6px;justify-content:center;margin-top:6px}
.thumbs img{
  width:42px;height:30px;object-fit:cover;border-radius:6px;cursor:pointer;
  opacity:.75;transition:.2s;border:1px solid rgba(255,255,255,.25)
}
.thumbs img:hover,.thumbs img.active{opacity:1;outline:2px solid var(--accent)}

footer{
  position:fixed;bottom:10px;width:100%;text-align:center;
  color:#d1d5db;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.45)
}

/* กล่องยืนยันทางเข้า Setup จะแสดงหลังจากกดโลโก้ครบตามลำดับเท่านั้น */
.setup-access-dialog[hidden]{display:none!important}
.setup-access-dialog{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.setup-access-dialog__panel{
  width:min(100%,420px);
  padding:26px 24px 22px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:20px;
  background:#0f172a;
  color:#e5e7eb;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.58);
  outline:none;
}
.setup-access-dialog__icon{
  margin-bottom:8px;
  font-size:34px;
  line-height:1;
}
.setup-access-dialog__panel h2{
  margin:0;
  font-size:22px;
  color:#fff;
}
.setup-access-dialog__panel p{
  margin:12px auto 20px;
  max-width:330px;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.65;
}
.setup-access-dialog__actions{
  display:flex;
  justify-content:center;
  gap:10px;
}
.setup-access-dialog__button{
  min-width:120px;
  padding:11px 16px;
  border:1px solid transparent;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
}
.setup-access-dialog__button:hover{transform:translateY(-1px)}
.setup-access-dialog__button:focus-visible{
  outline:3px solid rgba(96,165,250,.5);
  outline-offset:2px;
}
.setup-access-dialog__button--cancel{
  border-color:#475569;
  background:#1e293b;
  color:#e2e8f0;
}
.setup-access-dialog__button--cancel:hover{background:#334155}
.setup-access-dialog__button--open{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.setup-access-dialog__button--open:hover{
  color:#fff;
  text-decoration:none;
  filter:brightness(1.08)
}
body.setup-access-dialog-open{overflow:hidden}

@media (max-width:480px){
  .setup-access-dialog{padding:16px}
  .setup-access-dialog__panel{padding:22px 16px 18px}
  .setup-access-dialog__actions{flex-direction:column-reverse}
  .setup-access-dialog__button{width:100%}
}