*{box-sizing:border-box;margin:0;padding:0;font-family:'Kanit','Sarabun',sans-serif;}

/* ========== PAGE ========== */
.page{
  min-height:100dvh;
  background:#f5f5f8;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  transition:background .3s,color .3s;
}

/* ========== CIRCLE LOGO ========== */
.circle-logo{
  position:absolute;
  left:-80px;top:50%;
  transform:translateY(-50%);
  width:460px;height:460px;
  border-radius:50%;
  border:2px solid rgba(160,40,40,.18);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;
  transition:border-color .3s;
}
.circle-logo .c2{
  width:350px;height:350px;border-radius:50%;
  border:2px solid rgba(160,40,40,.13);
  display:flex;align-items:center;justify-content:center;
}
.circle-logo .c3{
  width:240px;height:240px;border-radius:50%;
  border:2px solid rgba(160,40,40,.09);
  display:flex;align-items:center;justify-content:center;
}
.rmp-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.rmp-text{font-size:74px;font-weight:700;color:#7a1a1a;line-height:1;letter-spacing:-5px;transition:color .3s;}
.rmp-text span{font-size:52px;color:#5a1212;transition:color .3s;}
.ver-txt{font-size:9.5px;color:#bbb;letter-spacing:.02em;text-align:center;}

/* ========== DECO ========== */
.cityscape{position:absolute;left:0;bottom:0;opacity:.10;pointer-events:none;}
.gear{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:#1e2d5a;
  border-radius:14px;
  padding:1.75rem 1.75rem 1.5rem;
  width:100%;max-width:480px;
  flex-shrink:0;
  box-shadow:0 10px 48px rgba(0,0,0,.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:39px;height:39px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.3);background:#fff;flex-shrink:0;}
.school-nm{font-size:20px;font-weight:500;color:#fff;}

/* ── error alert ── */
.alert-err{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(255,80,80,.12);
  border:1px solid rgba(255,100,100,.35);
  color:#ffaaaa;
  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-wrap input{
  width:100%;height:42px;border:none;border-radius:6px;
  background:#fff;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;}
.ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#8B1C1C;font-size:17px;cursor:pointer;}

/* ── row: remember + submit ── */
.row-act{display:flex;align-items:center;justify-content:space-between;margin-top:.2rem;gap:8px;flex-wrap:wrap;}
.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#c8d0e8;cursor:pointer;}
.chk input{accent-color:#8B1C1C;width:13px;height:13px;}
.btn-in{
  height:36px;padding:0 1.4rem;background:#8B1C1C;color:#fff;border:none;
  border-radius:6px;font-size:13.5px;font-weight:500;
  font-family:'Kanit','Sarabun',sans-serif;cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.btn-in:hover{background:#a02020;}

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

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

/* ── 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:#1e2d5a;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:#1e2d5a;transition:color .3s;}
.nr .v{color:#555;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:#888;text-decoration:none;
  transition:color .15s;
}
.back-link:hover{color:#555;}

/* ── 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 #e5e7eb;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  (60 % #2C2C2C · 30 % #3F3F3F · 10 % #FFD369)
══════════════════════════════════════════ */
[data-theme="black"] .page{background:#2C2C2C;}
[data-theme="black"] .circle-logo{border-color:rgba(255,211,105,.15);}
[data-theme="black"] .circle-logo .c2{border-color:rgba(255,211,105,.10);}
[data-theme="black"] .circle-logo .c3{border-color:rgba(255,211,105,.07);}
[data-theme="black"] .rmp-text{color:#FFD369;}
[data-theme="black"] .rmp-text span{color:#ffe699;}
[data-theme="black"] .card{background:#3F3F3F;box-shadow:0 10px 48px rgba(0,0,0,.5);}
[data-theme="black"] .inp-wrap input{background:rgba(63,63,63,.85);color:#f0ece4;border:1px solid rgba(240,236,228,.15);}
[data-theme="black"] .inp-wrap input::placeholder{color:#4a4744;}
[data-theme="black"] .inp-wrap input:focus{border-color:rgba(255,211,105,.4);box-shadow:0 0 0 3px rgba(255,211,105,.15);}
[data-theme="black"] .btn-in{background:#FFD369;color:#1a1a1a;}
[data-theme="black"] .btn-in:hover{background:#ffe699;}
[data-theme="black"] .ic{color:#FFD369;}
[data-theme="black"] .nt,[data-theme="black"] .nr .k{color:#f0ece4;}
[data-theme="black"] .nr .v{color:#c9c5c0;}
[data-theme="black"] .back-link{color:#7a7570;}
[data-theme="black"] .back-link:hover{color:#f0ece4;}
[data-theme="black"] #themeToggle{background:#3F3F3F;border-color:rgba(240,236,228,.15);box-shadow:0 1px 4px rgba(0,0,0,.5);}

/* ========== RESPONSIVE: TABLET (≤680px) ========== */
@media(max-width:680px){
  .circle-logo{width:340px;height:340px;left:-60px;}
  .circle-logo .c2{width:256px;height:256px;}
  .circle-logo .c3{width:176px;height:176px;}
  .rmp-text{font-size:56px;letter-spacing:-4px;}
  .rmp-text span{font-size:40px;}
  .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;}
  .circle-logo{
    width:240px;height:240px;
    left:50%;top:0;
    transform:translateX(-50%) translateY(-30%);
  }
  .circle-logo .c2{width:176px;height:176px;}
  .circle-logo .c3{width:120px;height:120px;}
  .rmp-text{font-size:38px;letter-spacing:-3px;}
  .rmp-text span{font-size:28px;}
  .ver-txt{font-size:8px;}
  .gear{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:34px;height:34px;}
  .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:140px;}
  .circle-logo{width:200px;height:200px;transform:translateX(-50%) translateY(-25%);}
  .circle-logo .c2{width:148px;height:148px;}
  .circle-logo .c3{width:102px;height:102px;}
  .rmp-text{font-size:32px;letter-spacing:-2px;}
  .rmp-text span{font-size:24px;}
}