/* หน้าเข้าสู่ระบบ / สมัคร / จัดการบัญชี ให้หน้าตาเดียวกับเว็บใหม่ (หน้าต่างแบบในเกม)
   โหลดหลัง auth.css เพื่อทับสีเดิม (การ์ดดำ-ทอง) — owner 01/11: "สีไม่เหมือนกัน" */
.auth-wrap { padding: 32px var(--gutter) 60px; min-height: calc(100vh - 200px); }
.auth-card { background: var(--win-body); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0 0 22px; overflow: hidden; }
.auth-card::before { content: none; }
.auth-head { margin: 0 0 18px; padding: 10px 22px; background: linear-gradient(180deg, var(--win-title-a), var(--win-title-b)); border-bottom: 1px solid var(--win-line); }
.auth-head h1 { font: 500 20px/1.4 var(--font-head); color: var(--win-ink); letter-spacing: 0; }
.auth-head p { color: var(--win-mute); font-size: 13.5px; margin-top: 2px; }
.auth-card > :not(.auth-head) { margin-left: 22px; margin-right: 22px; }
.field label { font: 500 13px var(--font-head); letter-spacing: 0; color: var(--win-ink); }
.field label .req { color: var(--bad); }
.field input, .field select { background: #fff; border: 1px solid var(--win-line); border-radius: var(--radius); color: var(--win-ink); font: 15px var(--font-body); }
.field input:focus, .field select:focus { border-color: var(--ro-blue); outline: 2px solid #9cc0ef; outline-offset: 0; }
.field input::placeholder { color: #93a1b6; }
.field .hint, .terms { color: var(--win-mute); font-size: 12.5px; }
.auth-btn { height: 46px; border: 1px solid var(--gold-deep); border-radius: var(--radius); background: linear-gradient(180deg, #f6cf6e, var(--gold));
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; color: #3a2405; font: 500 16px var(--font-head); }
.auth-btn:hover { background: linear-gradient(180deg, #ffd97d, #ecbd56); }
.auth-alt { color: var(--win-mute); }
.auth-alt a, .terms a { color: var(--ro-blue-deep); }
.auth-msg.err { background: #fdeceb; border-color: #e7a59c; color: #8d2a22; }
.auth-msg.ok { background: #e7f6ec; border-color: #9fd3b2; color: #1f6a3c; }

/* หน้าจัดการบัญชี */
.acc-box { background: var(--win-body); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 0 14px; overflow: hidden; }
.acc-box h2 { margin: 0 0 12px; padding: 7px 16px; font: 500 15px var(--font-head); color: var(--win-ink);
  background: linear-gradient(180deg, var(--win-title-a), var(--win-title-b)); border-bottom: 1px solid var(--win-line); }
.acc-box > :not(h2) { margin-left: 16px; margin-right: 16px; }
.acc-row span { color: var(--win-mute); }
.acc-row b { color: var(--win-ink); }
.acc-row b.acc-gold { color: var(--gold-deep); }
.char-card { background: #fff; border: 1px solid #d5deea; border-radius: var(--radius); }
.char-card h3 { color: var(--win-ink); }
.char-card p { color: var(--win-mute); }
.char-empty { color: var(--win-mute); }

/* C4 form colors (03/11/2569): owner "ดูยากมาก เวลาผิดมันดูไม่ออก"
   styles.css ตั้งทั้งเว็บเป็น color-scheme dark ช่องเลือก/รายการตัวเลือกของเบราว์เซอร์จึงมืด ตัวหนังสือจม */
.auth-card, .acc-box { color-scheme: light; }
.field input, .field select, .field textarea { background: #fff !important; color: #1d2a3d !important; border: 1.5px solid #9fb2cc !important; }
.field select option { background: #fff; color: #1d2a3d; }
.field select option:disabled, .field select option[value=""] { color: #8a97ab; }
.field select:invalid { color: #8a97ab !important; }          /* ยังไม่ได้เลือก = สีจาง แต่อ่านออก */
.field input:hover, .field select:hover { border-color: #6f8fbe !important; }
/* กรอกผิด: กรอบแดง พื้นชมพูอ่อน (ขึ้นหลังผู้ใช้แตะช่องแล้วเท่านั้น ไม่แดงทั้งฟอร์มตั้งแต่เปิดหน้า) */
.field input:user-invalid, .field select:user-invalid,
.field input.is-invalid, .field select.is-invalid { border-color: #d0453a !important; background: #fff3f1 !important; outline: 2px solid #f4b6ae; }
.field input:user-valid, .field select:user-valid { border-color: #3f9c63 !important; }