/* ธีม Smoothie Community — ให้หน้าตาเหมือน UI ในเซิร์ฟ (กระเป๋า/ตู้เก็บของ)
   แผงสีเทาเข้ม มุมมน ๆ ตัวอักษรอ่านง่าย มีชมพูอ่อนเป็นจุดเด่น
   โหลดต่อท้าย style.css / portal.css / rules.css → ใช้กับหน้า ยืนยันตัวตน, กฎ, /all, อัปเดต, กิจกรรม, สถานะ */
:root {
  --bg: #17161b;
  --surface: #232228;
  --surface-2: #2b2a31;
  --line: #34333b;
  --line-2: #424049;
  --text: #f4f1f6;
  --muted: #b9b4c2;
  --faint: #8a8593;
  --accent: #ff8fc1;
  --accent-ink: #2a1320;
  --accent-rgb: 255, 143, 193;
  --accent-soft: rgba(255, 143, 193, 0.14);
  --bg-rgb: 23, 22, 27;
  --surface-rgb: 35, 34, 40;
  --fg-rgb: 255, 255, 255;
  --blurple: #ff8fc1;
  --blurple-ink: #2a1320;
  --ok: #7ee2b8;
  --ok-soft: rgba(126, 226, 184, 0.13);
  --warn: #ffd27a;
  --warn-soft: rgba(255, 210, 122, 0.13);
  --danger: #ff7a8f;
  --danger-soft: rgba(255, 122, 143, 0.13);
  --chart-a: #6b6774;
  --chart-b: #ff8fc1;
  --r: 18px;
  --r-sm: 12px;
  --sm-head: 'Fredoka', 'Mitr', 'IBM Plex Sans Thai', system-ui, sans-serif;
}

:root[data-theme='light'] {
  --bg: #f6f3f6;
  --surface: #ffffff;
  --surface-2: #fbf8fb;
  --line: #ebe4ec;
  --line-2: #dcd2de;
  --text: #2b2730;
  --muted: #5f5868;
  --faint: #938b9c;
  --accent: #e8609e;
  --accent-ink: #ffffff;
  --accent-rgb: 232, 96, 158;
  --accent-soft: rgba(232, 96, 158, 0.1);
  --bg-rgb: 246, 243, 246;
  --surface-rgb: 255, 255, 255;
  --fg-rgb: 43, 39, 48;
  --blurple: #e8609e;
  --blurple-ink: #ffffff;
  --chart-b: #e8609e;
}

body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 143, 193, 0.09), transparent 65%),
    radial-gradient(800px 500px at -10% 30%, rgba(140, 170, 255, 0.05), transparent 65%),
    var(--bg) fixed;
}

:root[data-theme='light'] body {
  background: radial-gradient(900px 500px at 85% -10%, rgba(255, 143, 193, 0.18), transparent 65%), var(--bg) fixed;
}

body::before {
  display: none;
}

.bg-grid {
  display: none;
}

h1,
h2,
h3,
.h-hero h1,
.p-head h1,
.rl-hero h1,
.hero h1,
.dialog h2,
.h-sec-hd h2 {
  font-family: var(--sm-head);
  font-weight: 600;
  letter-spacing: 0;
}

.p-eyebrow,
.rl-eyebrow {
  color: var(--accent);
  font-family: var(--sm-head);
  letter-spacing: 0.14em;
}

/* แถบเมนู */
.nav,
header.nav {
  background: rgba(var(--bg-rgb), 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand .sm-logo {
  height: clamp(36px, 1.4vw + 28px, 46px);
  width: auto;
  display: block;
  transition: transform 0.3s cubic-bezier(.3, 1.5, .5, 1);
}

.brand:hover .sm-logo {
  transform: scale(1.06) rotate(-3deg);
}

.brand.sm-has-logo .brand-ic,
.brand.sm-has-logo .brand-tx,
.brand.sm-has-logo .sk {
  display: none;
}

/* แท็บเม็ดยา (เหมือนแท็บในกระเป๋า) */
.ptabs a {
  border-radius: 999px;
  font-family: var(--sm-head);
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
}

.ptabs a:hover {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--text);
}

.ptabs a.on {
  color: #ffd0e5;
  background: rgba(255, 143, 193, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 143, 193, 0.35);
}

:root[data-theme='light'] .ptabs a.on {
  color: #b23a74;
  background: rgba(232, 96, 158, 0.12);
}

@media (max-width: 760px) {
  .ptabs {
    justify-content: flex-start;
  }

  .ptabs a {
    flex: none;
    padding: 0 12px;
  }
}

/* การ์ด = แผงเทา มุมมน ขอบบาง */
.card,
.p-card,
.dialog {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.7);
}

:root[data-theme='light'] .card,
:root[data-theme='light'] .p-card {
  box-shadow: 0 14px 34px -26px rgba(80, 40, 70, 0.3);
}

/* ปุ่มหลัก — ชมพูอ่อน ตัวหนังสือเข้ม อ่านง่าย */
.btn.primary,
.rl-btn.primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  transition: transform 0.15s, filter 0.15s;
}

.btn.primary:hover,
.rl-btn.primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn.discord {
  background: #5865f2 !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ฟองจาง ๆ พื้นหลัง */
.sm-bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sm-bubbles i {
  position: absolute;
  bottom: -80px;
  border-radius: 50%;
  border: 1px solid rgba(255, 143, 193, 0.14);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16) 0 8%, transparent 20%);
  animation: smRise linear infinite;
}

@keyframes smRise {
  to {
    transform: translate3d(var(--dx, 30px), -115vh, 0);
  }
}

html {
  overflow-x: clip;
}

::selection {
  background: rgba(255, 143, 193, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .sm-bubbles {
    display: none;
  }
}

/* หมวดกฎที่เลือก — แบบช่องที่ถูกเลือกในกระเป๋า (ขอบชมพู พื้นเทา) */
.rl-tab.on {
  background: rgba(var(--accent-rgb), 0.14) !important;
  border-color: rgba(var(--accent-rgb), 0.55) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.rl-tab.on * {
  color: inherit;
}

.rl-tab.on .rl-tab-ic {
  background: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent) !important;
}