/* ═══ Auth — ตาม design_handoff_janetoeic_lms 2 (Jane TOEIC Auth.dc.html) ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; color: #0f2a38;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
  background: radial-gradient(120% 90% at 50% 0%, #f2efe8, #e4e1d9 70%);
}
a { color: #0f6f8c; text-decoration: none; }
a:hover { color: #128fb2; }
input { font-family: 'IBM Plex Sans Thai', sans-serif; }

.auth-card {
  width: 100%; max-width: 940px; display: flex; background: #fff;
  border: 1px solid rgba(15,42,56,.08); border-radius: 26px; overflow: hidden;
  box-shadow: 0 44px 100px -46px rgba(15,42,56,.55);
}

/* ── Left: brand panel ── */
.brand-panel {
  width: 42%; flex: none; color: #fff; padding: 40px 38px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0f2a38 0%, #123f52 55%, #0f6f8c 100%);
}
.brand-row { display: flex; align-items: center; gap: 11px; position: relative; z-index: 2; text-decoration: none; }
.brand-row:hover b { color: #4fd0ee; transition: color .15s; }
.brand-row img { width: 42px; height: 42px; object-fit: contain; }
.brand-row b { font: 700 18px 'Noto Serif Thai', serif; color: #fff; display: block; line-height: 1.1; }
.brand-row small { display: block; margin-top: 2px; font: 600 7.5px 'Space Grotesk', monospace; letter-spacing: .18em; color: #4fd0ee; }
.hero { margin-top: auto; position: relative; z-index: 2; }
.hero .pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 9.5px 'Space Grotesk', monospace; letter-spacing: .07em; color: #8fe6ff;
  background: rgba(28,181,216,.14); border: 1px solid rgba(28,181,216,.3);
  padding: 6px 11px; border-radius: 99px; margin-bottom: 18px;
}
.hero h1 { font: 600 28px/1.3 'Noto Serif Thai', serif; margin-bottom: 14px; }
.hero h1 em { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; color: #4fd0ee; }
.hero p { font: 400 12.5px/1.7 'IBM Plex Sans Thai', sans-serif; color: #a9c6d0; max-width: 320px; }
.proof { display: flex; gap: 10px; margin-top: 28px; position: relative; z-index: 2; }
.proof > div { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 13px 12px; }
.proof b { font: 700 20px 'Space Grotesk', monospace; color: #4fd0ee; display: block; }
.proof .gold b { color: #e8c766; }
.proof small { font: 400 9.5px 'IBM Plex Sans Thai', sans-serif; color: #9fbcc6; margin-top: 2px; display: block; }
.glow { position: absolute; right: -110px; top: -70px; width: 300px; height: 300px; border-radius: 99px; background: radial-gradient(circle, rgba(28,181,216,.28), transparent 70%); pointer-events: none; }

/* ── Right: form panel ── */
.form-panel { flex: 1; min-width: 0; padding: 40px 42px; }
.tabs { display: flex; gap: 5px; background: #eceae3; padding: 5px; border-radius: 12px; margin-bottom: 24px; }
.tabs button {
  flex: 1; text-align: center; padding: 11px; border-radius: 8px; cursor: pointer; border: none;
  font: 600 13px 'IBM Plex Sans Thai', sans-serif; transition: .15s; color: #7c8a90; background: transparent;
}
.tabs button.on { background: #fff; color: #0f2a38; box-shadow: 0 2px 8px -3px rgba(15,42,56,.25); }
.head h2 { font: 600 22px/1.3 'Noto Serif Thai', serif; margin-bottom: 5px; }
.head p { font: 400 12.5px 'IBM Plex Sans Thai', sans-serif; color: #7c8a90; }

.formwrap { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; animation: au-fade .3s ease; }
@keyframes au-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fld label { display: block; font: 500 11.5px 'IBM Plex Sans Thai', sans-serif; color: #46595f; margin-bottom: 6px; }
.fld label span { color: #9aa8ae; font-weight: 400; }
.fld input {
  width: 100%; background: #faf8f2; border: 1px solid rgba(15,42,56,.16);
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: #0f2a38;
}
.fld input:focus { outline: none; border-color: #128fb2; box-shadow: 0 0 0 3px rgba(18,143,178,.14); }
.row-between { display: flex; align-items: center; justify-content: space-between; margin-top: -1px; }
.chk { display: flex; align-items: center; gap: 7px; font: 400 12px 'IBM Plex Sans Thai', sans-serif; color: #46595f; cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: #128fb2; }
.chk.terms { align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: #6a7a82; }
.chk.terms input { margin-top: 1px; }
.link-sm { font: 500 12px 'IBM Plex Sans Thai', sans-serif; }

.btn-submit {
  background: #128fb2; color: #fff; text-align: center; border: none; cursor: pointer;
  font: 700 14px 'IBM Plex Sans Thai', sans-serif; padding: 14px; border-radius: 11px;
  box-shadow: 0 10px 24px -10px rgba(18,143,178,.7); margin-top: 3px; transition: .15s; width: 100%;
}
.btn-submit:hover { background: #0f7a99; }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(15,42,56,.12); }
.divider span { font: 400 11px 'IBM Plex Sans Thai', sans-serif; color: #9aa8ae; }

.socials { display: flex; flex-direction: column; gap: 10px; }
.soc {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border-radius: 11px; padding: 12px; cursor: pointer; transition: .15s; border: 1px solid;
  font: 600 13px 'IBM Plex Sans Thai', sans-serif; width: 100%;
}
.soc.google { background: #fff; border-color: rgba(15,42,56,.15); color: #3a4d56; }
.soc.google:hover { background: #faf8f2; border-color: rgba(15,42,56,.28); }
.soc.facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
.soc.facebook:hover { background: #1568d8; }
.soc.line { background: #06C755; border-color: #06C755; color: #fff; }
.soc.line:hover { background: #05b04b; }
.soc-off { opacity: .55; }

.switch { text-align: center; margin-top: 22px; font: 400 12.5px 'IBM Plex Sans Thai', sans-serif; color: #6a7a82; }
.switch button { background: none; border: none; cursor: pointer; color: #0f6f8c; font: 600 12.5px 'IBM Plex Sans Thai', sans-serif; border-bottom: 1px solid rgba(15,111,140,.3); padding: 0; }
.msg { font-size: 12.5px; margin-top: 12px; min-height: 18px; text-align: center; }
.msg.err { color: #C33; } .msg.ok { color: #1F9D57; }

@media (max-width: 880px) {
  body { padding: 20px 16px; }
  .auth-card { flex-direction: column; max-width: 440px; }
  .brand-panel { width: 100%; padding: 26px 26px 28px; }
  .hero, .proof { display: none; }
  .form-panel { padding: 28px 24px 32px; }
}