/* PostJaa - Login / Register (ใช้ร่วมกับ site.css) */
body.auth-body { min-height: 100vh; background: var(--ink); color: #cbd5e1; }
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 991.98px) { .auth { grid-template-columns: 1fr; } }

/* ---- ฝั่งภาพประกอบ ---- */
.auth-visual { position: relative; overflow: hidden; padding: 48px 56px; display: flex; flex-direction: column; background: radial-gradient(900px 500px at 20% 0%, #1a2a52 0%, transparent 60%), var(--ink); }
.auth-visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse at 40% 40%, #000 25%, transparent 75%);
}
.auth-visual > *:not(.aurora) { position: relative; z-index: 2; }
.auth-visual .aurora { z-index: 0; }
.auth-visual { position: sticky; top: 0; height: 100vh; }
.auth-panel { min-height: 100vh; }
.auth-visual .brand { font-size: 1.35rem; }
.auth-stage { flex: 1; display: grid; place-items: center; padding: 40px 0; }
.orbit { position: relative; width: min(440px, 100%); aspect-ratio: 1; }
.orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); animation: spin 40s linear infinite; }
.orbit-ring.r2 { inset: 16%; animation-duration: 28s; animation-direction: reverse; border-style: solid; border-color: rgba(124, 92, 255, .25); }
.orbit-ring.r3 { inset: 32%; animation-duration: 18s; border-color: rgba(29, 155, 240, .3); }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-core {
    position: absolute; inset: 38%; border-radius: 30%; display: grid; place-items: center; color: #fff; font-size: 2.6rem;
    background: linear-gradient(135deg, var(--brand), var(--violet)); box-shadow: 0 0 0 12px rgba(29, 155, 240, .12), 0 30px 70px rgba(124, 92, 255, .45);
    animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.06); box-shadow: 0 0 0 22px rgba(29, 155, 240, .06), 0 30px 80px rgba(124, 92, 255, .55); } }
.orbit-item {
    position: absolute; display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border-radius: 14px;
    background: rgba(18, 27, 48, .92); border: 1px solid rgba(255, 255, 255, .1); color: #e2e8f0; font-size: .82rem; font-weight: 600;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35); animation: floaty 6s ease-in-out infinite; white-space: nowrap;
}
.orbit-item i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .85rem; }
.orbit-item small { display: block; color: #94a3b8; font-weight: 400; font-size: .7rem; line-height: 1.2; }
.oi-1 { top: 4%; left: 8%; } .oi-1 i { background: var(--brand); }
.oi-2 { top: 22%; right: -2%; animation-delay: -1.5s; } .oi-2 i { background: var(--mint); }
.oi-3 { bottom: 16%; left: -4%; animation-delay: -3s; } .oi-3 i { background: var(--violet); }
.oi-4 { bottom: 2%; right: 10%; animation-delay: -4.5s; } .oi-4 i { background: var(--sun); }
.auth-quote h2 { color: #fff; font-size: 1.7rem; margin-bottom: .5rem; }
.auth-quote p { color: #94a3b8; margin: 0; max-width: 460px; }

/* ---- ฝั่งฟอร์ม ---- */
.auth-panel { display: grid; place-items: center; padding: 40px 20px; background: var(--soft); color: var(--text); position: relative; }
.auth-card {
    width: 100%; max-width: 430px; background: #fff; border-radius: 26px; padding: 2.4rem 2.2rem; border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10); animation: cardIn .7s var(--ease) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-card.shake { animation: shake .5s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.auth-mobile-brand { display: none; justify-content: center; margin-bottom: 1.4rem; }
.auth-mobile-brand .brand { color: var(--ink); }
@media (max-width: 991.98px) { .auth-mobile-brand { display: flex; } }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-sub { color: var(--muted); margin-bottom: 1.6rem; }
.auth-sub a { font-weight: 600; text-decoration: none; }

.auth-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; margin-bottom: 1.2rem; font-size: .93rem; animation: cardIn .4s var(--ease) both; }
.auth-alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.auth-alert.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.field { position: relative; margin-bottom: 1rem; }
.field > i.lead-icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--muted); transition: color .2s; pointer-events: none; }
.field input {
    width: 100%; height: 58px; padding: 1.35rem 3rem .45rem 2.9rem; border-radius: 14px; border: 1.5px solid var(--line);
    background: #fff; font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(29, 155, 240, .14); }
.field input:focus ~ i.lead-icon { color: var(--brand); }
.field label {
    position: absolute; left: 2.9rem; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none;
    transition: top .2s var(--ease), font-size .2s var(--ease), color .2s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 16px; font-size: .74rem; color: var(--brand-dark); }
.field input.is-invalid { border-color: #ef4444; }
.toggle-pass { position: absolute; right: 8px; top: 50%; translate: 0 -50%; border: 0; background: none; color: var(--muted); width: 40px; height: 40px; border-radius: 10px; }
.toggle-pass:hover { color: var(--ink); background: var(--soft); }
.caps-hint { display: none; font-size: .8rem; color: #b45309; margin: -.5rem 0 .8rem .3rem; }
.caps-hint.show { display: block; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: .3rem 0 1.4rem; font-size: .92rem; }
.auth-row label { display: flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--text); }
.auth-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.auth-row a { text-decoration: none; font-weight: 500; }

.btn-auth { width: 100%; height: 54px; border: 0; border-radius: 14px; font-size: 1.05rem; position: relative; overflow: hidden; }
.btn-auth .spinner { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-auth.loading .spinner { display: inline-block; }
.btn-auth.loading .label, .btn-auth.loading .bi { display: none; }
.btn-auth::after { /* แสงวิ่งผ่านปุ่ม */
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg);
    animation: sweep 3.5s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.auth-divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-alt { display: grid; gap: .6rem; }
.auth-alt .btn-light-soft { width: 100%; }
.auth-back { position: absolute; top: 20px; left: 20px; text-decoration: none; color: var(--muted); font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; }
.auth-back:hover { color: var(--ink); }
.auth-legal { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.4rem; }
.auth-legal a { color: inherit; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } .auth-card { padding: 2rem 1.4rem; } }
.strength { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: -.4rem 0 .3rem; }
.strength span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .3s var(--ease), background .3s; }
.strength-text { font-size: .78rem; color: var(--muted); margin-bottom: .9rem; }

/* มือถือ: ซ่อนภาพประกอบ (ต้องอยู่หลังกฎ .auth-visual หลัก) */
@media (max-width: 991.98px) { .auth-visual { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-core, .orbit-item, .btn-auth::after { animation: none !important; }
}