/* ── LOGIN (Clean & Simple) ── */
    /* ════════════════════════════════════════════════════════════
     * LOGIN — Luxury Navy & Gold (redesign 2026-06-01)
     * ════════════════════════════════════════════════════════════ */
    #loginScreen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      font-family: 'Sarabun', sans-serif;
      background:
        radial-gradient(ellipse 52% 42% at 50% 12%, rgba(200, 169, 106, .10) 0%, transparent 58%),   /* gold bloom เบาลง */
        radial-gradient(ellipse 90% 70% at 50% 126%, rgba(29, 59, 107, .34) 0%, transparent 72%),     /* ฟ้าก้นจอ หมองลง */
        radial-gradient(ellipse 62% 55% at 50% 50%, rgba(1, 5, 14, .55) 0%, transparent 68%),         /* core มืดหลังการ์ด → การ์ดเด่นสุด */
        linear-gradient(160deg, #06122a 0%, #0a2046 45%, #030b18 100%);                               /* ฐานเข้มขึ้น (galaxy ลึก) */
      overflow: hidden;
    }
    #loginScreen::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
      box-shadow: inset 0 0 260px rgba(2, 7, 18, .82);   /* vignette แรงขึ้น โฟกัสกลางจอ */
    }

    /* ════ GALAXY STARFIELD (พื้นหลัง login — คงสีกรมท่า-ทองเดิม วางดาวทับ) ════
     * ทุกคลาส prefix `lg-` กันชนกับ SPA; layers z-index 1-3 อยู่ใต้ card (z-index 5) */
    .lg-neb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: .38; z-index: 1; will-change: transform; }
    .lg-neb-gold { width: 460px; height: 460px; left: 8%; top: 14%; background: radial-gradient(circle, rgba(200,169,106,.30) 0%, rgba(200,169,106,.08) 45%, transparent 70%); animation: lgNebA 26s ease-in-out infinite alternate; }
    .lg-neb-blue { width: 520px; height: 520px; right: 4%; bottom: 6%; background: radial-gradient(circle, rgba(56,102,176,.34) 0%, rgba(29,59,107,.12) 50%, transparent 72%); animation: lgNebB 32s ease-in-out infinite alternate; }
    .lg-neb-gold2 { width: 300px; height: 300px; right: 22%; top: 8%; background: radial-gradient(circle, rgba(232,201,122,.18) 0%, transparent 68%); animation: lgNebA 22s ease-in-out infinite alternate-reverse; }
    @keyframes lgNebA { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,30px) scale(1.12); } }
    @keyframes lgNebB { from { transform: translate(0,0) scale(1); } to { transform: translate(-46px,-26px) scale(1.08); } }

    .lg-milkyway { position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none;
      background: linear-gradient(115deg, transparent 30%, rgba(122,150,200,.06) 42%, rgba(200,169,106,.07) 50%, rgba(122,150,200,.06) 58%, transparent 70%);
      filter: blur(14px); transform: rotate(-8deg); }

    .lg-aurora { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 46%; z-index: 1; pointer-events: none;
      -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
              mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
      transform-origin: bottom; will-change: transform; }
    .lg-aurora-main { background: linear-gradient(100deg, transparent 8%, rgba(56,102,176,.12) 26%, rgba(200,169,106,.18) 46%, rgba(120,160,210,.13) 64%, transparent 90%); filter: blur(36px); opacity: .62; animation: lgAuroraA 19s ease-in-out infinite alternate; }
    .lg-aurora-gold { height: 34%; bottom: -4%; background: linear-gradient(95deg, transparent 22%, rgba(232,201,122,.22) 48%, rgba(200,169,106,.10) 64%, transparent 84%); filter: blur(26px); opacity: .58; animation: lgAuroraB 24s ease-in-out infinite alternate-reverse; }
    @keyframes lgAuroraA { 0% { transform: translateX(-5%) skewX(-7deg) scaleY(1); } 50% { transform: translateX(4%) skewX(5deg) scaleY(1.14); } 100% { transform: translateX(-2%) skewX(-3deg) scaleY(.96); } }
    @keyframes lgAuroraB { 0% { transform: translateX(4%) skewX(6deg) scaleY(.98); } 100% { transform: translateX(-5%) skewX(-5deg) scaleY(1.12); } }

    .lg-dust-cloud { position: absolute; border-radius: 50%; filter: blur(44px); opacity: .4; pointer-events: none; z-index: 1; will-change: transform; }
    .lg-dust-c1 { width: 380px; height: 220px; left: 20%; top: 44%; background: radial-gradient(ellipse, rgba(150,180,230,.16) 0%, rgba(200,169,106,.06) 50%, transparent 72%); animation: lgNebA 28s ease-in-out infinite alternate; }
    .lg-dust-c2 { width: 320px; height: 180px; right: 14%; top: 30%; background: radial-gradient(ellipse, rgba(200,169,106,.12) 0%, transparent 70%); animation: lgNebB 34s ease-in-out infinite alternate-reverse; }
    .lg-dust-layer { position: absolute; inset: -6%; z-index: 1; pointer-events: none; animation: lgDust 150s linear infinite; will-change: transform; }
    .lg-dust { position: absolute; border-radius: 50%; background: #cfe0ff; }
    .lg-dust.gold { background: #ecd8a4; }
    @keyframes lgDust { from { transform: translate(0,0); } to { transform: translate(46px,-34px); } }

    .lg-star-layer { position: absolute; inset: -5%; z-index: 2; pointer-events: none; will-change: transform; }
    .lg-star-layer.l1 { animation: lgDrift1 90s linear infinite; }
    .lg-star-layer.l2 { animation: lgDrift2 140s linear infinite; }
    .lg-star-layer.l3 { animation: lgDrift3 200s linear infinite; }
    @keyframes lgDrift1 { from { transform: translateY(0); } to { transform: translateY(-60px); } }
    @keyframes lgDrift2 { from { transform: translate(0,0); } to { transform: translate(30px,-40px); } }
    @keyframes lgDrift3 { from { transform: translate(0,0); } to { transform: translate(-24px,-28px); } }
    .lg-star { position: absolute; border-radius: 50%; background: #fff; animation: lgTwinkle var(--tw,3.5s) ease-in-out var(--td,0s) infinite; }
    .lg-star.gold { background: #f3dca0; }
    @keyframes lgTwinkle { 0%,100% { opacity: var(--base,.35); transform: scale(1); } 50% { opacity: var(--peak,1); transform: scale(1.35); } }

    .lg-sparkle-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
    .lg-sparkle { position: absolute; --s: 16px; width: var(--s); height: var(--s); color: #fff; animation: lgSparkle var(--tw,4.5s) ease-in-out var(--td,0s) infinite; }
    .lg-sparkle.gold { color: #f3dca0; }
    .lg-sparkle::before, .lg-sparkle::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
    .lg-sparkle::before { width: 1.4px; height: 100%; background: linear-gradient(to bottom, transparent, currentColor 46%, currentColor 54%, transparent); filter: drop-shadow(0 0 3px currentColor); }
    .lg-sparkle::after  { width: 100%; height: 1.4px; background: linear-gradient(to right, transparent, currentColor 46%, currentColor 54%, transparent); filter: drop-shadow(0 0 3px currentColor); }
    @keyframes lgSparkle { 0%,100% { opacity: .12; transform: scale(.45) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

    .lg-shooter { position: absolute; z-index: 3; pointer-events: none; width: 140px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 60%, #f3dca0); border-radius: 2px; opacity: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
    .lg-shooter.run { animation: lgShoot 1.1s ease-out forwards; }
    @keyframes lgShoot { 0% { opacity: 0; transform: translate(0,0) rotate(18deg) scaleX(.2); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(520px,170px) rotate(18deg) scaleX(1); } }

    @media (prefers-reduced-motion: reduce) {
      .lg-star, .lg-neb, .lg-star-layer, .lg-sparkle, .lg-aurora, .lg-dust-cloud, .lg-dust-layer, .lg-shooter { animation: none !important; }
    }
    /* ponytail: galaxy decor (324 animated nodes + fullscreen blur) crashes/reloads low-end phones → strip to a static gradient on mobile */
    @media (max-width: 820px) {
      .lg-star-layer, .lg-sparkle, .lg-shooter, .lg-dust-layer, .lg-dust-cloud { display: none !important; }
      .lg-neb, .lg-aurora { animation: none !important; filter: none !important; }
    }

    /* ── Card ── */
    .login-card {
      position: relative;
      z-index: 5;
      width: 100%;
      max-width: 412px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
      border-radius: 20px;
      padding: 44px 40px 30px;
      border: 1px solid rgba(200, 169, 106, .35);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 30px 70px rgba(3, 10, 25, .55),
        0 8px 24px rgba(3, 10, 25, .35);
      animation: loginRise .6s cubic-bezier(.2, .8, .25, 1) both;
    }
    /* gold hairline accent across the top edge */
    .login-card::before {
      content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, var(--brand-gold) 25%, #e8c97a 50%, var(--brand-gold) 75%, transparent);
    }
    @keyframes loginRise {
      from { opacity: 0; transform: translateY(18px) scale(.98); }
      to   { opacity: 1; transform: none; }
    }

    /* ── Brand ──
     * โลโก้ login = เหรียญตราม้าทองทรงกลม (เหมือน .kdp-logo-wrap หน้าหลัก) ขยายใหญ่ + เล่นแสงหรู:
     *   1) วงแหวนทองซ้อน + รัศมีเรืองทอง (box-shadow)
     *   2) halo นุ่มหายใจอยู่ข้างหลัง (loginHaloPulse)
     *   3) แสงเหรียญเต้นนวล ๆ (loginMedallionGlow)
     *   4) แสงกวาดแรงรอบเดียวตอนเข้า (::before burst) + แสงวับวนต่อเนื่อง (::after) */
    .login-logo {
      position: relative;
      text-align: center;
      margin-bottom: 22px;
    }
    /* halo รัศมีทองนุ่ม ๆ หายใจอยู่หลังเหรียญ */
    .login-logo::before {
      content: ''; position: absolute; z-index: 0; pointer-events: none;
      left: 50%; top: 88px; width: 276px; height: 276px;   /* จัดให้ตรงกลางเหรียญพอดี (margin-top 10 + รัศมี 78) */
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(200, 169, 106, .42) 0%, rgba(200, 169, 106, .15) 44%, transparent 70%);
      animation: loginHaloPulse 4.6s ease-in-out 1s infinite;
    }
    /* รูปตราม้าทอง — เต็มเหรียญ (object-fit:cover) ไม่เหลือขอบทองหนากลาง */
    .login-logo-img {
      width: 100%; height: 100%;
      margin: 0; display: block;
      border-radius: 50%;
      object-fit: contain; object-position: center;   /* contain = โชว์เหรียญเต็มใบรวมวงแหวนทองของโลโก้เอง ไม่ครอป */
      position: relative; z-index: 1;
      filter: drop-shadow(0 2px 6px rgba(70, 46, 12, .30));
    }
    /* เหรียญทองทรงกลมครอบโลโก้ (ใหญ่/เด่น) + แสงวับวิ่งผ่านตลอดเวลา */
    .login-logo-shine {
      position: relative; z-index: 1;
      display: inline-flex; align-items: center; justify-content: center;
      width: 156px; height: 156px;             /* bold variant — ใหญ่ขึ้น/เด่นขึ้น (logo_preview .lg-bold) */
      border-radius: 50%; overflow: hidden;
      margin: 10px auto 16px;
      background: transparent;                 /* เลิกวงแหวนทองปลอม — ใช้วงแหวนของโลโก้เอง */
      box-shadow:
        0 0 0 1px rgba(200, 169, 106, .35),    /* ขอบทองบางเน้นรูปเหรียญ */
        0 0 46px rgba(200, 169, 106, .55),     /* glow ทองเด่นขึ้น */
        0 18px 46px rgba(3, 10, 25, .55);
      animation:
        loginLogoIn .7s cubic-bezier(.2, .8, .25, 1) both,
        loginMedallionGlow 5.5s ease-in-out 1.2s infinite;
    }
    .login-logo-shine .login-logo-img { margin: 0; }
    /* แสงกวาดบาง ๆ รอบเดียวตอนเข้าหน้า (glint) — ทินลง ไม่ฟอกโลโก้, ไม่มีลูปต่อเนื่อง
     * (เดิม ::after วนตลอด + ::before .90 หนา → ฟอกตราม้าทองจนไม่เด่น — เอาออก) */
    .login-logo-shine::before {
      content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%;
      background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.40) 50%, transparent 58%);
      background-size: 280% 100%; background-position: 200% 0;
      animation: kdpLogoShine 1.1s cubic-bezier(.3,0,.2,1) .55s 1 both;
      pointer-events: none; mix-blend-mode: screen;
    }
    @keyframes loginHaloPulse {
      0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(.9); }
      50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
    }
    @keyframes loginMedallionGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(200, 169, 106, .35), 0 0 46px rgba(200, 169, 106, .55), 0 18px 46px rgba(3, 10, 25, .55); }
      50%      { box-shadow: 0 0 0 1px rgba(214, 184, 122, .45), 0 0 70px rgba(214, 184, 122, .70), 0 18px 50px rgba(3, 10, 25, .58); }
    }
    @media (prefers-reduced-motion: reduce) {
      .login-logo::before,
      .login-logo-shine,
      .login-logo-shine::before { animation: none; }
    }
    @keyframes loginLogoIn {
      from { opacity: 0; transform: scale(.85); }
      to   { opacity: 1; transform: none; }
    }
    .login-logo-text {
      font-size: 25px;
      font-weight: 800;
      color: #0c2348;            /* navy เข้มขึ้นนิด → คอนทราสต์บนการ์ดขาวชัดขึ้น */
      letter-spacing: .2px;
      line-height: 1.22;
    }
    .login-logo-text span { color: #a07d3a; }
    .login-logo-sub {
      font-size: 11px;
      font-weight: 700;
      color: #a07d3a;
      letter-spacing: 2px;
      margin-top: 5px;
      text-transform: uppercase;
    }

    /* ── Gold divider ── */
    .login-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 18px 4px 22px; color: #b7a06a;
    }
    .login-divider::before, .login-divider::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .55));
    }
    .login-divider::after { background: linear-gradient(90deg, rgba(200, 169, 106, .55), transparent); }
    .login-divider span {
      font-size: 10px; letter-spacing: 2.5px; font-weight: 700; text-transform: uppercase;
    }

    /* ── Fields ── */
    .login-field {
      margin-bottom: 16px;
    }

    .login-field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #5b6b85;
      margin-bottom: 7px;
      letter-spacing: .8px;
      text-transform: uppercase;
    }

    .login-field .input-wrap {
      position: relative;
    }

    /* !important to win over ket-theme.css global glass input styling */
    .login-field input {
      width: 100%;
      padding: 13px 44px 13px 16px;
      font-size: 14.5px;
      color: #1f2a44;
      font-family: inherit;
      background: #fff !important;
      border: 1.5px solid #e2e6ee !important;
      border-radius: 11px !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      outline: none;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .login-field input::placeholder { color: #aab3c4; }

    .login-field input:focus {
      border-color: var(--brand-gold) !important;
      background: #fffdf8 !important;
      box-shadow: 0 0 0 4px rgba(200, 169, 106, .18) !important;
      animation: none !important;
    }

    .login-field .toggle-pw {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #9aa6bb;
      padding: 8px 10px;
      border-radius: 8px;
      transition: color .15s;
    }

    .login-field .toggle-pw:hover {
      color: var(--brand-navy);
    }

    /* ── CapsLock warning ── */
    .caps-warn {
      display: none;
      margin-top: 5px;
      font-size: 11px;
      color: #b8870b;
      font-weight: 600;
    }

    .caps-warn.show {
      display: block;
    }

    /* ── Options row ── */
    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
      font-size: 12.5px;
    }

    .login-options label {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #5b6b85;
      cursor: pointer;
    }

    .login-options input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: var(--brand-navy);
      cursor: pointer;
    }

    .login-options a {
      color: #a07d3a;
      font-weight: 700;
      text-decoration: none;
    }

    .login-options a:hover {
      text-decoration: underline;
    }

    /* ── Submit ── */
    .login-submit {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 11px;
      font-weight: 800;
      font-size: 15px;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 1px;
      color: #e8c97a;
      background: linear-gradient(135deg, #14315f 0%, var(--brand-navy) 55%, #0a1f3f 100%);
      box-shadow: 0 6px 18px rgba(15, 42, 82, .40), 0 1px 0 rgba(255, 255, 255, .12) inset;
      position: relative;
      overflow: hidden;
      transition: transform .12s, box-shadow .2s, filter .2s;
    }
    /* gold sheen sweep on hover */
    .login-submit::after {
      content: ''; position: absolute; top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(232, 201, 122, .35), transparent);
      transform: skewX(-18deg);
      transition: left .55s ease;
    }

    .login-submit:hover {
      box-shadow: 0 10px 26px rgba(15, 42, 82, .50);
      filter: brightness(1.06);
    }
    .login-submit:hover::after { left: 130%; }

    .login-submit:active {
      transform: scale(.985);
    }

    .login-submit.loading {
      opacity: .8;
      pointer-events: none;
    }

    .login-submit.loading .btn-label {
      display: none;
    }

    .login-submit:not(.loading) .btn-spin {
      display: none;
    }
    .login-submit .btn-spin { color: #e8c97a; }

    /* ── Error ── */
    .login-err {
      display: none;
      margin-top: 15px;
      padding: 11px 14px;
      background: #fdecec;
      border: 1px solid #f3c5c5;
      border-radius: 11px;
      color: #b91c1c;
      font-size: 13px;
      text-align: center;
    }

    .login-err.show {
      display: block;
    }

    /* ── Footer ── */
    .login-footer {
      text-align: center;
      margin-top: 22px;
      font-size: 11px;
      color: #9aa6bb;
      line-height: 1.8;
    }
    .login-secure { color: #5b6b85; font-weight: 600; }
    .login-secure i { color: #0a7a3b; margin-right: 5px; }

    @media (prefers-reduced-motion: reduce) {
      .login-card,
      .login-logo-img { animation: none !important; }
      .login-submit::after { display: none; }
    }

    @media(max-width: 440px) {
      .login-card {
        margin: 0;
        padding: 32px 22px 24px;
        border-radius: 16px;
      }

      .login-logo-shine {
        width: 132px;
        height: 132px;
        margin: 6px auto 14px;
      }
      .login-logo::before {
        top: 72px;
        width: 232px;
        height: 232px;
      }

      .login-logo-text {
        font-size: 22px;
      }
    }