/* ============================================
   THEME: Cyber (Neon Dark) - แนวเกมเมอร์ Dark Mode
   ============================================ */
:root {
  --t-primary: #00f2fe;
  --t-primary-dark: #00b4d8;
  --t-accent: #ff006e;
  --t-success: #00ff88;
  --t-danger: #ff3366;
  --t-bg: #0a0e27;
  --t-card-bg: #131938;
  --t-card-shadow: 0 4px 20px rgba(0,242,254,0.1);
  --t-text: #e0e7ff;
  --t-text-muted: #8b92b8;
  --t-border: #1f2754;
  --t-navbar-bg: #050817;
  --t-navbar-text: #00f2fe;
  --t-footer-bg: #050817;
  --t-hero-grad: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 50%, #00f2fe 200%);
  --t-balance-grad: linear-gradient(135deg, #ff006e 0%, #00f2fe 100%);
}

body { font-family: 'Sarabun','Segoe UI',sans-serif; background: var(--t-bg); color: var(--t-text); }
body::before { content: ''; position: fixed; inset: 0; background:
  radial-gradient(circle at 20% 30%, rgba(0,242,254,0.08), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(255,0,110,0.08), transparent 40%);
  pointer-events: none; z-index: -1; }

.navbar.bg-dark { background: var(--t-navbar-bg) !important; border-bottom: 1px solid var(--t-border); }
.navbar-brand i { color: var(--t-primary); filter: drop-shadow(0 0 8px var(--t-primary)); }
.nav-link { color: var(--t-text) !important; }
.nav-link:hover { color: var(--t-primary) !important; }

.card, .card-product { background: var(--t-card-bg); color: var(--t-text); border: 1px solid var(--t-border); border-radius: 12px; box-shadow: var(--t-card-shadow); }
.card-product:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,242,254,0.25); border-color: var(--t-primary); }
.card-header, .card-body, .card-footer { background: transparent; color: var(--t-text); }
.card .text-dark { color: var(--t-text) !important; }
.card .text-muted { color: var(--t-text-muted) !important; }

.btn-primary { background: linear-gradient(135deg, var(--t-primary), var(--t-primary-dark)); border: none; color: #000; font-weight: 600; }
.btn-primary:hover { background: var(--t-primary); box-shadow: 0 0 20px rgba(0,242,254,0.5); color: #000; }
.btn-outline-primary { color: var(--t-primary); border-color: var(--t-primary); }
.btn-success { background: var(--t-success); border-color: var(--t-success); color: #000; }

.price-tag { color: var(--t-accent); font-weight: bold; text-shadow: 0 0 10px rgba(255,0,110,0.4); }
.hero-section { background: var(--t-hero-grad); border: 1px solid var(--t-primary); box-shadow: 0 0 40px rgba(0,242,254,0.2); }
.balance-card { background: var(--t-balance-grad); color: white; border-radius: 16px; padding: 1.5rem; }
footer.bg-dark { background: var(--t-footer-bg) !important; border-top: 1px solid var(--t-border); }

.form-control, .form-select { background: var(--t-bg); color: var(--t-text); border-color: var(--t-border); }
.form-control:focus, .form-select:focus { background: var(--t-bg); color: var(--t-text); border-color: var(--t-primary); box-shadow: 0 0 0 0.25rem rgba(0,242,254,0.25); }
.table { color: var(--t-text); }
.table thead th { border-color: var(--t-border); }
.table tbody tr:hover { background: rgba(0,242,254,0.05); }
.dropdown-menu { background: var(--t-card-bg); border: 1px solid var(--t-border); }
.dropdown-item { color: var(--t-text); }
.dropdown-item:hover { background: rgba(0,242,254,0.1); color: var(--t-primary); }
.text-primary { color: var(--t-primary) !important; }
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--t-primary); }