/* Auth page (AGENT-A) — ตาม docs/refs/ref-2-register.png */

.auth{
  flex:1;display:flex;flex-direction:column;width:100%;max-width:420px;margin:0 auto;
  padding:calc(30px + env(safe-area-inset-top)) 26px calc(18px + env(safe-area-inset-bottom));
}

/* header: โลโก้เล็ก + ชื่อแอป + หัวข้อโหมด */
.auth-head{text-align:center;margin-bottom:26px}
.auth-logo-wrap{
  position:relative;width:80px;height:80px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  animation:authUp .55s ease both;
}
.auth-glow{
  position:absolute;inset:-26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(92,172,255,.42) 0%,rgba(60,140,255,.12) 50%,transparent 74%);
  filter:blur(3px);
}
.auth-logo{
  position:relative;width:72px;height:72px;border-radius:18px;
  filter:drop-shadow(0 0 18px rgba(92,176,255,.55)) drop-shadow(0 8px 22px rgba(0,18,50,.5));
}
.auth-name{
  margin-top:13px;font-size:27px;font-weight:800;letter-spacing:.4px;
  background:linear-gradient(180deg,#2013c9 20%,#10069f 70%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:authUp .55s ease .06s both;
}
/* ธีมมืด (night) ใช้ตัวอักษรขาวเรืองแบบเดิม */
html[data-wtheme="night"] .auth-name{
  background:linear-gradient(180deg,#ffffff 22%,#cfe7ff 60%,#9ccdff 100%);
  -webkit-background-clip:text;background-clip:text;
}
.auth-title{
  margin-top:7px;font-size:21px;font-weight:700;color:var(--ink);
  animation:authUp .55s ease .12s both;
}

/* form */
.auth-form{display:flex;flex-direction:column;gap:14px;animation:authUp .55s ease .18s both}

/* ช่องรหัสยืนยัน + ปุ่ม "ขอรหัส" ฝังในช่อง */
.auth-code-row{position:relative}
.auth-code-row .input-glass{padding-right:104px}
.auth-code-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(47,139,255,.22);border:1px solid var(--glass-brd-hi);
  color:#9ed0ff;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .15s,box-shadow .15s,opacity .15s,transform .12s;
}
.auth-code-btn:hover{background:rgba(47,139,255,.32);box-shadow:var(--glow)}
.auth-code-btn:active{transform:translateY(-50%) scale(.95)}
.auth-code-btn:focus-visible{box-shadow:var(--glow)}
.auth-code-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
/* ระหว่าง cooldown: ตัวเลขความกว้างคงที่ ไม่ให้ปุ่มกระตุก */
.auth-code-btn.cooldown{
  font-variant-numeric:tabular-nums;color:var(--ink-faint);
  background:rgba(47,139,255,.12);
}

/* ปุ่มหลัก gradient + สถานะ loading */
.auth-submit{
  margin-top:9px;display:flex;align-items:center;justify-content:center;gap:9px;
}
.auth-submit:focus-visible{box-shadow:0 6px 22px rgba(47,139,255,.45),0 0 0 3px rgba(87,230,168,.45)}
.auth-submit:disabled{cursor:default}
.auth-submit.loading{opacity:.75}
.auth-submit.loading .auth-submit-label{opacity:.85}
.auth-spinner{
  display:none;width:17px;height:17px;border-radius:50%;flex:none;
  border:2.5px solid rgba(4,34,63,.25);border-top-color:#04223f;
  animation:authSpin .7s linear infinite;
}
.auth-submit.loading .auth-spinner{display:inline-block}

/* เงื่อนไขบริการ + badge E2E */
.auth-terms{
  margin-top:3px;font-size:12px;line-height:1.6;text-align:center;color:var(--ink-faint);
  padding:0 6px;
}
.auth-e2e{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--accent-2);
  text-shadow:0 0 12px rgba(87,230,168,.35);
}
.auth-e2e svg{width:14px;height:14px;flex:none}

/* ลิงก์สลับโหมด */
.auth-switch{
  align-self:center;margin:18px 0 6px;padding:6px 10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--accent);
  transition:color .15s,text-shadow .15s;
}
.auth-switch:hover{color:#7db9ff;text-shadow:0 0 12px rgba(47,139,255,.5)}
.auth-switch:focus-visible{box-shadow:var(--glow)}

/* ส่วนล่าง: ปุ่มเขียวเรืองแสง + demo hint */
.auth-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:16px;
  animation:authUp .55s ease .26s both}
.auth-alt{transition:box-shadow .15s,background .15s,transform .12s}
.auth-alt:hover{background:rgba(87,230,168,.08);
  box-shadow:0 0 20px rgba(87,230,168,.4),inset 0 0 16px rgba(87,230,168,.12)}
.auth-alt:active{transform:scale(.98)}
.auth-alt:focus-visible{box-shadow:0 0 0 3px rgba(87,230,168,.4)}
.auth-demo{text-align:center;font-size:12px;color:var(--ink-faint);opacity:.75;letter-spacing:.3px}

@keyframes authUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* จอแคบมาก */
@media (max-width:374px){
  .auth{padding-left:20px;padding-right:20px}
  .auth-head{margin-bottom:20px}
  .auth-logo{width:62px;height:62px}
  .auth-logo-wrap{width:70px;height:70px}
  .auth-name{font-size:24px}
  .auth-form{gap:12px}
}

/* จอเตี้ย (landscape มือถือ) — ให้เลื่อนได้แทนการบีบ */
@media (max-height:640px){
  .auth-head{margin-bottom:16px}
  .auth-bottom{padding-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .auth-logo-wrap,.auth-name,.auth-title,.auth-form,.auth-bottom{animation:none}
}

/* ===== ลืมรหัสผ่าน + ลิงก์เอกสารกฎหมาย (FIX-TEAM-D) ===== */
.auth-forgot{margin-top:-4px;align-self:center;padding:6px 10px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;color:#9ed0ff;transition:color .15s,background .15s}
.auth-forgot:hover{background:rgba(47,139,255,.14);color:#c6e4ff}
.auth-forgot:active{transform:scale(.96)}

.auth-legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
  font-size:11.5px;color:var(--ink-faint)}
.auth-legal button{font-size:11.5px;color:var(--ink-dim);text-decoration:underline;
  text-underline-offset:2px;padding:2px 1px;transition:color .15s}
.auth-legal button:hover{color:#9ed0ff}

/* แผ่นตั้งรหัสผ่านใหม่ */
.auth-sheet-bg{position:fixed;inset:0;z-index:100;background:rgba(4,12,28,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:auFade .25s ease}
@keyframes auFade{from{opacity:0}to{opacity:1}}
.auth-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:101;
  width:min(480px,100%);max-height:90dvh;overflow-y:auto;color:var(--ink);
  display:flex;flex-direction:column;gap:13px;
  background:var(--glass);border:1px solid var(--glass-brd);border-bottom:none;
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-radius:26px 26px 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 60px rgba(3,10,26,.55);
  animation:auUp .34s cubic-bezier(.32,.72,.22,1)}
@keyframes auUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.auth-sheet.closing{animation:auDown .2s ease forwards}
.auth-sheet-bg.closing{animation:auFadeOut .2s ease forwards}
@keyframes auDown{to{transform:translate(-50%,100%)}}
@keyframes auFadeOut{to{opacity:0}}
.auth-sheet .grab{width:40px;height:6px;border-radius:3px;background:rgba(148,178,214,.28);
  margin:0 auto 2px}
.auth-sheet h3{font-size:17px;font-weight:700}
.auth-sheet-desc{font-size:12.5px;line-height:1.7;color:var(--ink-dim);margin-top:-6px}
.auth-sheet .btn-cta{margin-top:4px}
.auth-sheet .btn-cta[disabled]{opacity:.6;pointer-events:none}
.auth-sheet-cancel{display:block;width:100%;text-align:center;padding:11px;
  font-size:14px;color:var(--ink-dim)}