/* หน้าเข้าสู่ระบบ/สมัครสมาชิก/กู้รหัสผ่าน — โทนเดียวกับทั้งเว็บ (โหลดต่อท้าย ui.css) */
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) {
  --lg-surface: var(--bo-surface); --lg-soft: var(--bo-soft); --lg-ink: var(--bo-ink); --lg-muted: var(--bo-muted); --lg-line: var(--bo-line);
  --brand-ink: #fff;
  position: relative; isolation: isolate; min-height: 100vh; padding: 84px 16px 40px;
  background: var(--bo-night) !important; color: var(--bo-ink);
}
@supports (color: oklch(from red l c h)) {
  html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) { --brand-ink: oklch(from var(--brand-color) clamp(0, (0.68 - l) * 1000, 1) 0 0); }
}
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page)::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 678 313' fill='none' stroke='white' stroke-width='3'><rect x='0' y='0' width='670' height='305'/><path d='M0 23H670M0 282H670M335 0V305M236 23V282M434 23V282M38 0V305M632 0V305M0 152.5H236M434 152.5H670'/></svg>") no-repeat right -140px bottom -40px / 760px auto;
}
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) > .card {
  width: 100%; max-width: 440px; margin: 0 auto; border: 1px solid var(--bo-line) !important; border-radius: 20px; background: var(--bo-surface); box-shadow: 0 30px 80px -20px #000a; overflow: hidden;
}
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) > .card::before { height: 5px; background: var(--brand-color); }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) .card-body img { border: 3px solid var(--brand-color); padding: 3px; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) h2 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) h2 .text-brand { color: inherit !important; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) .bg-brand { color: var(--brand-ink) !important; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) button[type="submit"] { background: var(--brand-color) !important; color: var(--brand-ink) !important; border-radius: 12px; font-weight: 700; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) button[type="submit"]:hover { filter: brightness(.93); }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) .card-body a.btn[href*="line-login"] { border-radius: 12px; min-height: 52px; font-weight: 700; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) .text-brand { color: var(--brand-text) !important; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) > .absolute .btn { background: #ffffff14; color: #fff; border: 1px solid var(--bo-line-night); }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) > .absolute .btn svg { color: #fff; }
html[data-theme] :is(.login-page, .register-page, .recovery-page, .reset-page) .input { background: var(--bo-soft); border-color: var(--bo-line); color: var(--bo-ink); }