*{box-sizing:border-box;margin:0;padding:0;font-family:'Kanit','Sarabun',sans-serif;}
html,body{overflow-x:hidden;width:100%;}

/* ══════════════════════════════════════════
   60/30/10
   60% dominant  – off-white / pale sage   #FAFBF9
   30% secondary – deep forest green       #1E6B4E
   10% accent    – deep navy blue          #2C4A6E  (used sparingly: CTA button + tag mark only)
══════════════════════════════════════════ */

/* ========== PAGE ========== */
.page{
  min-height:100dvh;
  background:#FAFBF9; /* 60% */
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  padding-left:max(1rem,env(safe-area-inset-left));
  padding-right:max(1rem,env(safe-area-inset-right));
  padding-bottom:max(2rem,env(safe-area-inset-bottom));
  transition:background .3s,color .3s;
}

/* ========== CIRCLE LOGO ==========
   ใช้ clamp() ให้ขนาดไล่ระดับลื่น ๆ ตามความกว้างจอ แทนการกระโดดที่ breakpoint เดียว */
.circle-logo{
  position:absolute;
  left:-80px;top:50%;
  transform:translateY(-50%);
  width:clamp(200px,42vw,460px);
  height:clamp(200px,42vw,460px);
  border-radius:50%;
  border:2px solid rgba(30,107,78,.16);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;
  transition:border-color .3s,width .2s,height .2s;
}
.circle-logo .c2{
  width:76%;height:76%;border-radius:50%;
  border:2px solid rgba(30,107,78,.12);
  display:flex;align-items:center;justify-content:center;
}
.circle-logo .c3{
  width:52%;height:52%;border-radius:50%;
  border:2px solid rgba(30,107,78,.08);
  display:flex;align-items:center;justify-content:center;
}
.rmp-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.rmp-text{font-size:clamp(32px,7.2vw,74px);font-weight:700;color:#1E6B4E;line-height:1;letter-spacing:-3px;transition:color .3s;}
.rmp-text span{font-size:clamp(22px,5vw,52px);color:#2C4A6E;transition:color .3s;}
.ver-txt{font-size:clamp(7.5px,1vw,9.5px);color:#a9b3ac;letter-spacing:.02em;text-align:center;padding:0 4px;}

/* ========== DECO ========== */
.cityscape{position:absolute;left:0;bottom:0;opacity:.10;pointer-events:none;}
.pkg{position:absolute;right:5%;top:5%;opacity:.06;pointer-events:none;}

/* ========== CONTENT + CARD ========== */
.content{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;width:100%;}

.card{
  background:#1E6B4E; /* 30% */
  border-radius:14px;
  padding:1.75rem 1.75rem 1.5rem;
  width:100%;max-width:480px;
  flex-shrink:0;
  box-shadow:0 10px 48px rgba(30,107,78,.25);
  margin-top:120px;
  transition:background .3s,border-color .3s;
}
.card-hd{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.5rem;}
.card-hd img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.3);background:#fff;flex-shrink:0;}
.school-nm{font-size:19px;font-weight:500;color:#fff;}

/* ── error alert ── */
.alert-err{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(255,120,120,.14);
  border:1px solid rgba(255,140,140,.35);
  color:#ffb3b3;
  font-size:13px;
  padding:.65rem .875rem;
  border-radius:8px;
  margin-bottom:1rem;
  line-height:1.5;
}
.alert-err svg{flex-shrink:0;margin-top:1px;}

/* ── inputs ── */
.inp-wrap{position:relative;margin-bottom:.85rem;}
.inp-label{display:block;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);margin-bottom:6px;}
.inp-wrap input{
  width:100%;height:42px;border:none;border-radius:6px;
  background:#fff; /* 60% surface inside the 30% card */
  padding:0 44px 0 14px;
  font-size:16px; /* prevent iOS zoom */
  font-family:'Kanit','Sarabun',sans-serif;
  color:#1a1a1a;outline:none;
  transition:background .2s,border .2s,box-shadow .2s;
}
.inp-wrap input::placeholder{color:#bbb;}
.inp-wrap input:focus{box-shadow:0 0 0 3px rgba(47,107,79,.25);}
/* เบราว์เซอร์ (โดยเฉพาะ Chrome) บังคับพื้นหลังฟ้า/เหลืองทับช่องที่ autofill ไว้
   โดยไม่สนใจ background ที่ตั้งไว้ข้างบน — บังคับกลับเป็นขาวด้วย inset shadow แทน */
.inp-wrap input:-webkit-autofill,
.inp-wrap input:-webkit-autofill:hover,
.inp-wrap input:-webkit-autofill:focus,
.inp-wrap input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 100px #fff inset;
  -webkit-text-fill-color:#1a1a1a;
  caret-color:#1a1a1a;
  transition:background-color 9999s ease-in-out 0s;
}
.ic{
  /* ยึดจากขอบล่างของ .inp-wrap แล้วให้สูงเท่า input (42px) พอดี
     เพราะ input เป็น element สุดท้ายในกล่อง ขอบล่างของ wrapper = ขอบล่างของ input เสมอ
     ไม่ว่า label ด้านบนจะสูงแค่ไหน (ต่างจากการใช้ top:50% ที่จะ center กลาง
     ทั้งกล่อง label+input ทำให้ไอคอนเยื้องขึ้นไปชิดบน) */
  position:absolute;right:10px;bottom:0;
  width:28px;height:42px;
  display:flex;align-items:center;justify-content:center;
  color:#2F6B4F;font-size:17px;line-height:1;
  cursor:pointer;border-radius:6px;
  transition:background .15s,color .15s;
}
.ic:hover{background:rgba(47,107,79,.08);}
.ic::before{line-height:1;}

/* ── row: remember + submit ── */
.row-act{display:flex;align-items:center;justify-content:space-between;margin-top:.2rem;gap:8px;flex-wrap:wrap;}
.btn-in{
  height:36px;padding:0 1.4rem;background:#2C4A6E;color:#fff; /* 10% accent — the one CTA pop on the page */
  border:none;
  border-radius:6px;font-size:13.5px;font-weight:600;
  font-family:'Kanit','Sarabun',sans-serif;cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.btn-in:hover{background:#1f3752;}

/* ── forgot link ── */
.forgot{font-size:12px;color:#9fb8a7;text-decoration:none;transition:color .15s;}
.forgot:hover{color:#d7e5da;}

/* ── divider ── */
.sep{display:flex;align-items:center;gap:8px;margin:.9rem 0 .6rem;}
.sep span{font-size:11px;color:#8ea896;white-space:nowrap;}
.sep::before,.sep::after{content:'';flex:1;height:.5px;background:rgba(255,255,255,.14);}

/* ── Google btn ── */
.btn-g{
  width:100%;height:36px;border-radius:6px;
  border:.5px solid rgba(0,0,0,.12);background:#fff;color:#3c4043;
  font-size:13px;font-family:'Kanit','Sarabun',sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s;text-decoration:none;
}
.btn-g:hover{background:#f5f5f5;}

/* ── notes ── */
.notes{
  position:relative;z-index:4;
  width:100%;max-width:480px;
  margin-top:40px;padding:0 0 1.5rem;
}
.nt{font-size:13px;font-weight:600;color:#1E6B4E;margin-bottom:.7rem;transition:color .3s;}
.nr{display:grid;grid-template-columns:130px 1fr;gap:3px 10px;font-size:12px;margin-bottom:.65rem;}
.nr .k{font-weight:600;color:#1E6B4E;transition:color .3s;}
.nr .v{color:#5a655d;line-height:1.6;transition:color .3s;}

/* ── back link ── */
.back-wrap{position:relative;z-index:4;text-align:center;margin-top:1rem;margin-bottom:.5rem;}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:#889188;text-decoration:none;
  transition:color .15s;
}
.back-link:hover{color:#5a655d;}

/* ── theme toggle ── */
#themeToggle{
  position:fixed;top:1rem;right:1rem;z-index:50;
  width:2.25rem;height:2.25rem;border-radius:50%;
  border:1.5px solid #dbe5dc;background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
#themeToggle:hover{box-shadow:0 3px 10px rgba(0,0,0,.14);}

/* ══════════════════════════════════════════
   DARK THEME  (same 60/30/10 roles, darker values)
   60% #10201A · 30% #1C332A · 10% #4C74A6 (kept only on monogram + CTA for contrast)
══════════════════════════════════════════ */
[data-theme="black"] .page{background:#10201A;}
[data-theme="black"] .circle-logo{border-color:rgba(143,191,160,.15);}
[data-theme="black"] .circle-logo .c2{border-color:rgba(143,191,160,.10);}
[data-theme="black"] .circle-logo .c3{border-color:rgba(143,191,160,.07);}
[data-theme="black"] .rmp-text{color:#eef3ef;}
[data-theme="black"] .rmp-text span{color:#7FA8D9;}
[data-theme="black"] .card{background:#1C332A;box-shadow:0 10px 48px rgba(0,0,0,.5);}
[data-theme="black"] .inp-wrap input{background:rgba(28,51,42,.85);color:#eef3ef;border:1px solid rgba(238,243,239,.15);}
[data-theme="black"] .inp-wrap input::placeholder{color:#4a544d;}
[data-theme="black"] .inp-wrap input:focus{border-color:rgba(143,191,160,.4);box-shadow:0 0 0 3px rgba(143,191,160,.15);}
[data-theme="black"] .inp-wrap input:-webkit-autofill,
[data-theme="black"] .inp-wrap input:-webkit-autofill:hover,
[data-theme="black"] .inp-wrap input:-webkit-autofill:focus,
[data-theme="black"] .inp-wrap input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 100px #1C332A inset;
  -webkit-text-fill-color:#eef3ef;
  caret-color:#eef3ef;
}
[data-theme="black"] .btn-in{background:#4C74A6;color:#fff;}
[data-theme="black"] .btn-in:hover{background:#5F87B9;}
[data-theme="black"] .ic{color:#8FBFA0;}
[data-theme="black"] .nt,[data-theme="black"] .nr .k{color:#eef3ef;}
[data-theme="black"] .nr .v{color:#c2cbc4;}
[data-theme="black"] .back-link{color:#788075;}
[data-theme="black"] .back-link:hover{color:#eef3ef;}
[data-theme="black"] #themeToggle{background:#1C332A;border-color:rgba(238,243,239,.15);box-shadow:0 1px 4px rgba(0,0,0,.5);}

/* ========== RESPONSIVE: TABLET (≤680px) ==========
   ขนาด circle-logo / rmp-text ไล่ลื่นด้วย clamp() ในตัวแล้ว
   ที่นี่ปรับแค่ "ตำแหน่ง/เลย์เอาต์" ที่ต้องเปลี่ยนจริง ๆ ตามจอ */
@media(max-width:680px){
  .circle-logo{left:-60px;}
  .card{margin-top:80px;}
}

/* ========== RESPONSIVE: MOBILE (≤480px) ========== */
@media(max-width:480px){
  .page{padding:1.5rem .875rem 1.25rem;justify-content:flex-start;padding-top:160px;}
  .ver-txt{display:none;} /* วงกลมเล็กเกินไปสำหรับข้อความนี้ ตกบรรทัด+ล้นขอบวงแหวน */
  .circle-logo{
    left:50%;top:0;
    transform:translateX(-50%) translateY(-30%);
  }
  .pkg{display:none;}
  .cityscape{opacity:.06;}
  .card{margin-top:0;padding:1.25rem 1rem 1rem;border-radius:12px;max-width:100%;}
  .school-nm{font-size:16px;}
  .card-hd img{width:46px;height:46px;}
  .row-act{flex-direction:column;align-items:flex-start;gap:10px;}
  .btn-in{width:100%;text-align:center;}
  .notes{margin-top:24px;}
  .nr{grid-template-columns:1fr;gap:2px 0;margin-bottom:.9rem;}
  .nr .k{margin-bottom:1px;}
}

@media(max-width:360px){
  .page{padding-top:130px;}
  .circle-logo{transform:translateX(-50%) translateY(-25%);}
}

/* ========== RESPONSIVE: จอเตี้ย/แนวนอนบนมือถือ ========== */
@media(max-height:520px) and (orientation:landscape){
  .page{padding-top:1.25rem;justify-content:center;}
  .circle-logo{display:none;}
  .cityscape{opacity:.05;}
  .card{margin-top:0;}
  .notes{margin-top:1rem;}
}