/* ============================================================
   SHARED CSS — ใช้ร่วมกันทุกหน้า
   ============================================================ */

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* --- Glass Effects --- */
.glass-effect {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(29, 62, 62, 0.4);
}
.glass-card {
  background: rgba(11, 47, 47, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(65, 72, 72, 0.15);
}
.glass-panel {
  background: rgba(29, 62, 62, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(65, 72, 72, 0.15);
}

/* --- Ghost Border --- */
.ghost-border {
  border: 1px solid rgba(65, 72, 72, 0.15);
}

/* --- Gradient Button --- */
.gradient-button {
  background: linear-gradient(135deg, #b3d17a 0%, #4edea3 100%);
}

/* --- Text Effects --- */
.text-glow {
  text-shadow: 0 0 20px rgba(179, 209, 122, 0.3);
}
.text-gradient {
  background: linear-gradient(135deg, #b3d17a 0%, #4edea3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Scrollbar --- */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #002020; }
::-webkit-scrollbar-thumb { background: #4edea3; border-radius: 2px; }