/* ═══════════════════════════════════════════════════════════════════════════
   dt-login.css — แผงเข้าสู่ระบบ "DEKTHAI ID" กลาง (includes/auth_ui.php · dt_login_panel / dt_login_social)
   ใช้ร่วม: login.php · goal-login.php · money-login.php · pos-login.php (+ แผง "สร้าง DEKTHAI ID" ของ Goal/Money)
   ทุกกฎขึ้นต้นด้วย .dtl ไม่พึ่งตัวแปรสีของหน้า (หน้าเหล่านี้ใช้ชื่อตัวแปรต่างกัน) — ต่างกันระหว่างโปรดักต์ได้แค่ --dtl-accent (วงโฟกัส) ที่ PHP ใส่ให้
   สไตล์ตาม Design System: Prompt · การ์ด/ช่อง 14px · ปุ่ม pill · ปุ่มหลักพื้นดำ (ink) · lime เป็นสีเน้นเท่านั้น · grid ใช้ minmax(0,1fr)
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl{--dtl-ink:#0A0A0B;--dtl-t2:#52576A;--dtl-t3:#6B7280;--dtl-bd:#E8E9EC;--dtl-bd2:#D5D8DD;--dtl-accent:#D4FF3E;
  font-family:'Prompt',system-ui,sans-serif;font-size:15px;line-height:1.55;color:var(--dtl-ink);text-align:left;width:100%;min-width:0}
.dtl *,.dtl *::before,.dtl *::after{box-sizing:border-box}
.dtl a{color:inherit;text-decoration:none}
.dtl :where(p){margin:0}   /* specificity ต่ำ — ให้ .dtl-cta/.dtl-note/.dtl-alert กำหนด margin ของตัวเองได้ (เดิม .dtl p ทับ margin-top ทิ้งหมด ทำให้ปุ่ม-ลิงก์-ข้อความชิดกัน) */

.dtl-alert{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;margin:0 0 14px;border-radius:14px;font-size:13.5px;font-weight:500;line-height:1.45;background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
.dtl-alert i{font-size:19px;flex:none;margin-top:1px}

/* ── ปุ่ม Google / LINE ── */
.dtl-soc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.dtl-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 18px;border-radius:100px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s;text-align:center}
.dtl-btn .dtl-ico{flex:none;display:block}
.dtl-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(10,10,11,.4)}
.dtl-google{background:#fff;color:var(--dtl-ink);border:1.5px solid var(--dtl-bd2)}
.dtl-google:hover{border-color:var(--dtl-ink)}
.dtl-line{background:#06C755;color:#fff;border:1.5px solid #06C755}

.dtl-or{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--dtl-t2);font-size:13px}
.dtl-or::before,.dtl-or::after{content:'';flex:1;height:1px;background:var(--dtl-bd)}
.dtl-or span{flex:none}

/* ── ฟอร์มอีเมล ── */
.dtl-form{display:block;margin:0}
.dtl-fl{display:flex;align-items:center;gap:6px;margin:16px 0 8px;font-size:13.5px;font-weight:600;color:var(--dtl-t2)}
.dtl-fl i{font-size:16px}
.dtl-fld{position:relative}
.dtl-lead{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dtl-t3);font-size:19px;pointer-events:none}
.dtl-in{display:block;width:100%;min-height:50px;margin:0;padding:0 14px 0 44px;border-radius:14px;border:1.5px solid var(--dtl-bd2);background:#fff;color:var(--dtl-ink);
  font:inherit;font-size:16px;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.dtl-in.has-eye{padding-right:50px}
.dtl-in::placeholder{color:#9AA0AD}
.dtl-in:focus{outline:none;border-color:var(--dtl-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--dtl-accent) 45%,transparent)}
.dtl-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--dtl-t3);font-size:20px;cursor:pointer;display:grid;place-items:center}
.dtl-eye:hover{color:var(--dtl-ink)}
.dtl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:13.5px}
.dtl-chk{display:inline-flex;align-items:center;gap:8px;color:var(--dtl-t2);cursor:pointer}
.dtl-chk input{width:16px;height:16px;margin:0;accent-color:var(--dtl-ink)}
.dtl-forgot{margin-left:auto;color:var(--dtl-t2);text-decoration:underline;text-underline-offset:3px}
.dtl-forgot:hover{color:var(--dtl-ink)}

.dtl-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:20px 0 0;padding:0 20px;border:0;border-radius:100px;background:var(--dtl-ink);color:#fff;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,opacity .2s}
.dtl-submit i{font-size:20px}
.dtl-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(10,10,11,.55)}
.dtl-submit:disabled,.dtl-submit.is-busy{opacity:.6;cursor:progress;transform:none;box-shadow:none;pointer-events:none}

.dtl-cta{margin-top:20px;line-height:1.6;text-align:center;font-size:14px;color:var(--dtl-t2)}
.dtl-cta a{display:inline-flex;align-items:center;gap:2px;margin-left:6px;color:var(--dtl-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dtl-note{display:flex;align-items:flex-start;justify-content:center;gap:var(--dtl-gap,6px);margin-top:12px;line-height:1.55;font-size:12.5px;color:var(--dtl-t2);text-align:center}
.dtl-note i{font-size:16px;flex:none;margin-top:2px}
.dtl-note a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}

.dtl a:focus-visible,.dtl button:focus-visible,.dtl input:focus-visible{outline:2px solid var(--dtl-ink);outline-offset:2px}
.dtl-in:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.dtl-btn,.dtl-submit,.dtl-in{transition:none}.dtl-btn:hover,.dtl-submit:hover{transform:none}}