/* ---------- ธีมอวกาศ (ชุดเดียวกับริชเมนู/ข้อความทักทาย LINE) ----------
   โหลดต่อจาก style.css + redesign.css เฉพาะหน้าเว็บลูกค้า (หน้าแอดมินไม่โหลด)
   ถอดไฟล์นี้ออกจาก partials/top.ejs = กลับเป็นธีมเดิมทันที */

:root {
  --bg: #0a0720;
  --bg-2: #0f0a29;
  --surface: #161036;
  --surface-2: #1e1647;
  --border: #2d2462;
  --muted: #9b94c6;
  --primary: #7c5cff;
  --pink: #db2777;
  --glass: linear-gradient(165deg, rgba(124, 92, 255, .12), rgba(20, 13, 52, .88) 55%);
  --glass-border: rgba(167, 139, 250, .22);
}

/* พื้นหลังทุกหน้า: เนบิวลาม่วง-ชมพู + ดาว 2 ชั้น (ชั้นบนกะพริบช้าๆ) วางแบบ fixed ไม่เลื่อนตามหน้า */
body { background: var(--bg); }
body::before, body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(1.2px 1.2px at 20px 30px, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(216, 180, 254, .8), transparent 60%),
    radial-gradient(1.4px 1.4px at 260px 210px, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 330px 40px, rgba(165, 243, 252, .75), transparent 60%),
    radial-gradient(1.2px 1.2px at 80px 300px, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 190px 360px, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(900px 600px at 12% 8%, rgba(124, 58, 237, .30), transparent 62%),
    radial-gradient(800px 560px at 92% 30%, rgba(99, 102, 241, .20), transparent 62%),
    radial-gradient(900px 640px at 80% 105%, rgba(192, 38, 211, .22), transparent 62%),
    radial-gradient(700px 500px at 0% 85%, rgba(236, 72, 153, .10), transparent 62%);
  background-size: 380px 380px, 380px 380px, 380px 380px, 380px 380px, 380px 380px, 380px 380px, auto, auto, auto, auto;
}
body::after {
  background:
    radial-gradient(1.8px 1.8px at 60px 120px, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 410px 60px, #e9d5ff, transparent 60%),
    radial-gradient(2px 2px at 520px 400px, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 250px 520px, #a5f3fc, transparent 60%);
  background-size: 640px 640px;
  opacity: .7;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .85; } }

/* เมนูบน/ล่าง */
.nav { background: rgba(10, 7, 32, .72); border-bottom-color: var(--glass-border); }
.footer { background: linear-gradient(180deg, rgba(10, 7, 32, .2), rgba(10, 7, 32, .85)); border-top-color: var(--glass-border); }

/* กล่องแบบกระจกม่วง — ดาวด้านหลังจางผ่านได้นิดๆ */
.card, .lcard, .panel, .gcard, .flow li, .stat, .filters2, .faq details, .gnote, .steps-bar li, .float-card {
  background: var(--glass);
  border-color: var(--glass-border);
}
.card, .lcard, .panel, .gcard { box-shadow: 0 10px 30px rgba(5, 2, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.lcard:hover { border-color: rgba(196, 181, 253, .6); box-shadow: 0 14px 40px rgba(124, 58, 237, .35), inset 0 1px 0 rgba(255, 255, 255, .08); }
.stat.accent { background: linear-gradient(135deg, rgba(124, 92, 255, .32), rgba(219, 39, 119, .10) 70%), var(--surface); border-color: rgba(167, 139, 250, .5); }

/* ปุ่มหลัก: ม่วง → ชมพู เหมือนปุ่ม "แตะเพื่อเข้าเว็บ" ในโปสเตอร์ LINE */
.btn-primary {
  background: linear-gradient(90deg, #7c5cff 0%, #a855f7 55%, var(--pink) 100%);
  box-shadow: 0 8px 26px rgba(168, 85, 247, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 32px rgba(219, 39, 119, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ช่องกรอก */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  background: rgba(10, 6, 30, .75); border-color: var(--border);
}
input:focus, select:focus, textarea:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .22); }

/* หน้าแรก: ดาวเคราะห์มีวงแหวนเป็นฉากหลังของ hero */
.hero2-planet {
  position: absolute; z-index: -2; pointer-events: none;
  width: 340px; height: 340px; right: -110px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle at 30% 72%, #f0abfc 0%, #a855f7 28%, #5b21b6 62%, #2e1065 100%);
  box-shadow: 0 0 110px 16px rgba(139, 92, 246, .38);
  opacity: .85;
}
.hero2-planet::after {
  content: ''; position: absolute; left: -90px; top: 132px; width: 520px; height: 88px; border-radius: 50%;
  border: 10px solid rgba(233, 213, 255, .35); transform: rotate(-18deg);
}
@media (max-width: 900px) {
  .hero2-planet { width: 200px; height: 200px; right: -80px; top: -60px; opacity: .6; }
  .hero2-planet::after { left: -60px; top: 78px; width: 320px; height: 54px; border-width: 7px; }
}

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }