/* =========================================================
   luxe-patch.css — โหลดต่อจาก luxe.css (ทุกหน้า)
   สีนีออนทั้งหมดอิง --accent-a (สีหลัก) และ --accent-b (สีรอง)
   จากหน้า Admin → จึงเปลี่ยนตามธีมอัตโนมัติ
   ========================================================= */
:root {
  --na: var(--accent-a, #d50707);
  --nb: var(--accent-b, #e864f2);
}

/* ---------- 1) โลโก้วงกลมหน้าแรก: เล็กลงนิดหน่อย + ขยับขึ้น ---------- */
.lux-logo-classic {
  scale: .86;              /* ปรับขนาด: 1 = เดิม, ยิ่งน้อยยิ่งเล็ก */
  translate: 0 -22px;      /* ปรับตำแหน่ง: ติดลบ = ขึ้นบน, บวก = ลงล่าง */
}

/* ---------- 1.1) ข้อความลิขสิทธิ์ด้านล่าง: ขยับลงล่าง ---------- */
.lux-foot { padding-bottom: 40px; }          /* เดิม 96px — ยิ่งน้อยยิ่งลงต่ำ */
@media (max-width: 900px) { .lux-foot { padding-bottom: 96px; } }  /* มือถือ: เว้นที่ให้เพลเยอร์เพลง */

/* ---------- 2) ปุ่ม ROSTER: เอาเมาส์ชี้ = ดำ + แสงนีออนสีหลัก/รอง ---------- */
.lux-enter {
  transition: background .3s ease, border-color .3s ease, box-shadow .35s ease, color .3s ease, transform .3s ease;
}
.lux-enter:hover,
.lux-enter:focus-visible {
  background: #08080a !important;
  color: #f3eee6 !important;
  border-color: var(--na) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--na) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--na) 65%, transparent),
    0 0 34px color-mix(in srgb, var(--na) 40%, transparent),
    0 0 60px color-mix(in srgb, var(--nb) 38%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--na) 14%, transparent) !important;
}
.lux-enter:hover b,
.lux-enter:focus-visible b { color: #f3eee6 !important; text-shadow: 0 0 10px color-mix(in srgb, var(--na) 70%, transparent); }
.lux-enter:hover small,
.lux-enter:focus-visible small { color: color-mix(in srgb, var(--nb) 75%, #fff 25%) !important; }
.lux-enter:hover .go,
.lux-enter:focus-visible .go {
  color: var(--nb) !important;
  border-color: var(--nb) !important;
  background: transparent !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--nb) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--nb) 25%, transparent);
}

/* ---------- 3) หน้ารายชื่อ: ดันตัวอักษรยศให้ห่างจากรูป ----------
   สาเหตุเดิม: รูปโปรไฟล์เป็น position:absolute (ไม่กินที่) และข้อความถูกจัดชิดล่างการ์ด
   ระยะห่างจึงเท่ากับ "ความสูงการ์ด - เนื้อหา" → แก้ด้วยการเพิ่มความสูงการ์ด */
.lux-card.lux-member { min-height: 196px; }   /* เดิม 176px, เคยลอง 208px (ห่างไป) — เพิ่ม/ลดเพื่อปรับระยะ */

/* ---------- 4) หน้ารายชื่อ: แสงนีออนสีหลัก-รอง ---------- */
.lux-card.lux-member {
  border-color: color-mix(in srgb, var(--na) 38%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--na) 14%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--na) 38%, transparent),
    0 0 38px -12px color-mix(in srgb, var(--nb) 40%, transparent);
  transition: border-color .3s ease, box-shadow .35s ease, transform .3s ease;
}
.lux-card.lux-member:hover {
  border-color: var(--na) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--na) 60%, transparent),
    0 0 22px -2px color-mix(in srgb, var(--na) 62%, transparent),
    0 0 52px -8px color-mix(in srgb, var(--nb) 60%, transparent);
}
.lux-card.lux-member .lux-avatar {
  border-color: color-mix(in srgb, var(--na) 60%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--na) 45%, transparent), 0 0 26px -6px color-mix(in srgb, var(--nb) 50%, transparent);
}
.lux-card.lux-member .lux-fb:hover {
  color: var(--nb) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--nb) 70%, transparent);
}
.lux-sec-head .lux-dot { box-shadow: 0 0 10px var(--c, var(--na)), 0 0 22px color-mix(in srgb, var(--c, var(--na)) 55%, transparent); }
.lux-sec-head .lux-rule { background: linear-gradient(90deg, color-mix(in srgb, var(--na) 55%, transparent), color-mix(in srgb, var(--nb) 25%, transparent), transparent) !important; }

.lux-search input:focus {
  border-color: var(--na) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--na) 55%, transparent), 0 0 22px -2px color-mix(in srgb, var(--na) 50%, transparent), 0 0 40px -10px color-mix(in srgb, var(--nb) 50%, transparent) !important;
}
.lux-chip:hover, .lux-chip.is-active,
.lux-nav .lux-pill:hover {
  border-color: var(--na) !important;
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--na) 60%, transparent), 0 0 28px -8px color-mix(in srgb, var(--nb) 55%, transparent);
}

/* ---------- 5) หน้า Admin (dashboard + login) ---------- */
.lux-dash .glass-panel,
.lux-vault {
  border-color: color-mix(in srgb, var(--na) 30%, transparent) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb, var(--na) 10%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--na) 38%, transparent),
    0 0 46px -16px color-mix(in srgb, var(--nb) 40%, transparent);
}
.lux-dash .nav-pill:hover {
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--na) 55%, transparent);
}
.lux-dash .nav-pill.active {
  border-color: var(--na);
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--na) 60%, transparent), 0 0 40px -10px color-mix(in srgb, var(--nb) 55%, transparent);
}
.lux-dash .cyber-input:focus,
.lux-vault input:focus {
  border-color: var(--na);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--na) 55%, transparent), 0 0 20px -2px color-mix(in srgb, var(--na) 50%, transparent), 0 0 36px -10px color-mix(in srgb, var(--nb) 50%, transparent);
}
.lux-dash .btn-gradient,
.lux-vault .lux-btn {
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--na) 60%, transparent), 0 0 38px -8px color-mix(in srgb, var(--nb) 55%, transparent);
}
.lux-dash .btn-gradient:hover,
.lux-vault .lux-btn:hover {
  box-shadow: 0 0 24px 0 color-mix(in srgb, var(--na) 75%, transparent), 0 0 56px -6px color-mix(in srgb, var(--nb) 65%, transparent);
}
.lux-dash .upload-zone:hover,
.lux-dash .effect-card:hover {
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--na) 55%, transparent);
}