/* ═══════════════════════════════════════════════════════════════
   CloudPC Gaming Rental Website
   Theme: Clean White & Sky Blue (สไตล์ angpaox3d.com)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f1f5f9;
  --bg-header: rgba(255, 255, 255, 0.95);

  --primary: #0066ff;        /* Vibrant Royal Blue (ตรงตามปุ่มทำรายการโอนเงิน) */
  --primary-hover: #0052cc;  /* Deep Royal Blue */
  --primary-light: #eff6ff;  /* Soft Ice Blue */
  --primary-border: #bfdbfe; /* Soft Blue Border */
  --primary-glow: rgba(0, 102, 255, 0.22);

  --accent-cyan: #0080ff;
  --accent-green: #10b981;
  --accent-green-light: #d1fae5;
  --accent-red: #ef4444;
  --accent-red-light: #fee2e2;

  --text-main: #0f172a;       /* Slate 900 */
  --text-secondary: #475569;  /* Slate 600 */
  --text-muted: #94a3b8;      /* Slate 400 */

  --border-light: #e2e8f0;
  --border-hover: #cbd5e1;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 10px 25px -5px rgba(0, 102, 255, 0.28);

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans Thai', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/custom-gaming-bg.jpg') center top / cover no-repeat;
  opacity: 0.28;
  filter: saturate(1.22) contrast(1.08);
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.35) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.35) 100%);
}

/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 10px var(--primary-glow);
}

.brand-text h1 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.brand-text span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-item:hover, .nav-item.active {
  color: var(--primary);
  background: var(--primary-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--primary-glow);
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover {
  border-color: var(--border-hover);
  color: var(--text-main);
  background: var(--bg-surface-alt);
}

/* ─── Main Container ─────────────────────────────────────────── */
.main-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* ─── Futuristic Streaming Dock (Connect & Play) ─────────────── */
.cyber-streaming-dock {
  position: relative;
  background: linear-gradient(135deg, rgba(8, 14, 30, 0.95) 0%, rgba(13, 22, 48, 0.92) 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.08);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.dock-backdrop-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.dock-header {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}

.dock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cyber-pulse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 18px #38bdf8;
  animation: cyberBeaconPulse 2s infinite ease-in-out;
}

@keyframes cyberBeaconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.dock-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.dock-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  max-width: 650px;
  line-height: 1.5;
}

.dock-apps-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cyber-app-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.cyber-app-card:hover {
  transform: translateY(-5px);
}

/* Moonlight Theme */
.cyber-app-card.app-moonlight {
  border-color: rgba(56, 189, 248, 0.3);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.07) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.cyber-app-card.app-moonlight:hover {
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.25), 0 0 20px rgba(56, 189, 248, 0.2);
}
.cyber-app-card.app-moonlight .app-card-icon {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}
.cyber-app-card.app-moonlight .app-card-badge {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Parsec Theme */
.cyber-app-card.app-parsec {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.07) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.cyber-app-card.app-parsec:hover {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.25), 0 0 20px rgba(239, 68, 68, 0.2);
}
.cyber-app-card.app-parsec .app-card-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.cyber-app-card.app-parsec .app-card-badge {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* OSLink Theme */
.cyber-app-card.app-oslink {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.07) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.cyber-app-card.app-oslink:hover {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25), 0 0 20px rgba(59, 130, 246, 0.2);
}
.cyber-app-card.app-oslink .app-card-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.cyber-app-card.app-oslink .app-card-badge {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.app-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.app-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.app-card-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
}

.app-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.app-card-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0 0 16px 0;
  line-height: 1.45;
}

.app-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: auto;
}

.app-card-tag {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.app-card-link-btn {
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s;
}

.cyber-app-card:hover .app-card-link-btn {
  transform: translateX(3px);
  color: #fff;
}

/* ─── Compact Mini Streaming Dock (แบบเล็กๆ กะทัดรัด ไม่กินพื้นที่) ─ */
.cyber-streaming-dock.compact-mini-dock {
  padding: 14px 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: linear-gradient(135deg, rgba(8, 14, 30, 0.94) 0%, rgba(13, 22, 48, 0.90) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.06);
}

.dock-mini-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dock-mini-headline {
  flex-shrink: 0;
  max-width: 260px;
}

.dock-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.dock-mini-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.dock-mini-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 2px 0 0 0;
  white-space: nowrap;
}

.dock-mini-cards {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dock-mini-capsule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s ease;
  min-width: 135px;
  flex: 1 1 135px;
  max-width: 200px;
  box-sizing: border-box;
}

.dock-mini-capsule:hover {
  transform: translateY(-2px);
}

.dock-mini-capsule.app-moonlight {
  border-color: rgba(56, 189, 248, 0.25);
}
.dock-mini-capsule.app-moonlight:hover {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
}

.dock-mini-capsule.app-parsec {
  border-color: rgba(239, 68, 68, 0.25);
}
.dock-mini-capsule.app-parsec:hover {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.dock-mini-capsule.app-oslink {
  border-color: rgba(59, 130, 246, 0.25);
}
.dock-mini-capsule.app-oslink:hover {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.12);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.dock-mini-capsule.app-anydesk {
  border-color: rgba(239, 68, 68, 0.25);
}
.dock-mini-capsule.app-anydesk:hover {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

/* แถวที่ 1: โลโก้ + ชื่อโปรแกรม */
.mini-capsule-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-capsule-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  overflow: hidden;
}

.mini-capsule-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-capsule-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

/* แถวที่ 2: ปุ่มดาวน์โหลด */
.mini-capsule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  transition: all 0.18s ease;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.app-moonlight .mini-capsule-btn {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}
.app-moonlight:hover .mini-capsule-btn {
  background: rgba(56, 189, 248, 0.22);
  color: #fff;
}

.app-parsec .mini-capsule-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}
.app-parsec:hover .mini-capsule-btn {
  background: rgba(239, 68, 68, 0.22);
  color: #fff;
}

.app-oslink .mini-capsule-btn {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #93c5fd;
}
.app-oslink:hover .mini-capsule-btn {
  background: rgba(59, 130, 246, 0.22);
  color: #fff;
}

.app-anydesk .mini-capsule-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}
.app-anydesk:hover .mini-capsule-btn {
  background: rgba(239, 68, 68, 0.22);
  color: #fff;
}

@media (max-width: 900px) {
  .dock-mini-layout {
    flex-direction: column;
    align-items: flex-start;
  }
  .dock-mini-headline {
    max-width: 100%;
  }
  .dock-mini-desc {
    white-space: normal;
  }
  .dock-mini-cards {
    width: 100%;
    justify-content: stretch;
  }
  .dock-mini-capsule {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ─── Hero Section ───────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.hero-banner {
  background: linear-gradient(105deg, rgba(7, 11, 24, 0.92) 0%, rgba(7, 11, 24, 0.80) 48%, rgba(7, 11, 24, 0.25) 100%), url('/images/custom-gaming-bg.jpg') center center / cover no-repeat;
  border-radius: var(--radius-xl);
  padding: 42px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -8px rgba(0, 102, 255, 0.35), 0 0 24px rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Hero Banner Slider Mode ────────────────────────────────── */
.hero-banner.hero-banner-slider {
  padding: 0;
  background: none;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 16px 36px -8px rgba(0, 102, 255, 0.35), 0 0 24px rgba(56, 189, 248, 0.12);
}

.hero-slides-wrapper {
  display: grid;
  grid-template-areas: "slide";
  width: 100%;
  min-height: 390px;
}

.hero-slide-item {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.985);
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center center;
  border-radius: var(--radius-xl);
  z-index: 1;
  pointer-events: none;
}

.hero-slide-item.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
  pointer-events: auto;
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

/* Slider Controls (Arrows & Dots) */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 14, 30, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.22s ease;
  backdrop-filter: blur(8px);
  padding: 0;
}

.hero-slider-arrow:hover {
  background: rgba(14, 165, 233, 0.35);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.hero-slider-arrow.prev { left: 14px; }
.hero-slider-arrow.next { right: 14px; }

.hero-slider-controls {
  position: absolute;
  bottom: 14px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  background: rgba(8, 14, 30, 0.75);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.hero-slider-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.hero-slider-dot.active {
  width: 24px;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.hero-slider-counter {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.hero-banner::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.hero-badge-pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-badge-pill.neon {
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
}

.hero-badge-pill.partner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.16) 100%);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fef08a;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
}

.hero-badge-pill.partner .partner-badge-tag {
  background: #f59e0b;
  color: #000;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

.hero-badge-pill.price-pill {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
  font-weight: 900;
}

.hero-title {
  font-size: 2.35rem;
  font-weight: 900;
  line-height: 1.22;
  margin-bottom: 12px;
  color: #ffffff;
}

.hero-title .gradient-text {
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 0.95rem;
  color: #cbd5e1;
  max-width: 520px;
  line-height: 1.55;
  margin-bottom: 20px;
}

.hero-floating-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e2e8f0;
}

.spec-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.spec-pill .dot.green {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-hero {
  background: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 210, 255, 0.5);
  color: #fff;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* ─── Popular Games Showcase ────────────────────────────────────────── */
.popular-games-section {
  margin-bottom: 28px;
}

.games-feature-card {
  position: relative;
  background: linear-gradient(105deg, rgba(8, 12, 24, 0.90) 0%, rgba(8, 12, 24, 0.78) 50%, rgba(8, 12, 24, 0.40) 100%), url('/images/custom-gaming-bg.jpg') center center / cover no-repeat;
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(168, 85, 247, 0.12);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
}

.admin-banner-quick-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.admin-banner-quick-toggle:hover {
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  border-color: #ef4444;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.admin-showcase-hidden-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 18px;
  padding: 16px 24px;
  margin-bottom: 22px;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.games-feature-content h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #fff;
}

.games-feature-content p {
  font-size: 0.92rem;
  color: #cbd5e1;
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}

.games-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* ─── Cyber Category Filter Bar ──────────────────────────────── */
.games-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.game-filter-btn {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.22s ease;
  backdrop-filter: blur(8px);
}

.game-filter-btn:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: #e2e8f0;
  transform: translateY(-2px);
}

.game-filter-btn.active {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.35) 0%, rgba(0, 210, 255, 0.25) 100%);
  border-color: #00d2ff;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.25);
}

/* ─── 🎮 DUAL SPLIT LAYOUT: ประเภทเครื่อง (ซ้าย) & สไลด์เกม (ขวา) ─── */
.games-cluster-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

@media (max-width: 960px) {
  .games-cluster-split-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─── Column 1 (Left): Futuristic Cyber HUD Hardware Clusters ─── */
.cluster-types-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.cluster-types-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}

.cluster-types-badge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.cluster-terminal-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 10px;
  border-radius: 6px;
}

.cluster-status-ready {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}

.cluster-types-heading {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

.cluster-types-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ─── Futuristic Cyber HUD Card ─── */
.cluster-type-card {
  position: relative;
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  flex: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Glowing Top Laser Line */
.cluster-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/* Gaming Card Variant (Cyan / Electric Blue) */
.cluster-type-card.gaming {
  background: 
    radial-gradient(circle at 92% 16%, rgba(0, 240, 255, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 10% 85%, rgba(0, 102, 255, 0.12) 0%, transparent 60%),
    linear-gradient(145deg, rgba(10, 22, 45, 0.94) 0%, rgba(6, 12, 26, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.22);
}

.cluster-type-card.gaming::before {
  background: linear-gradient(90deg, transparent 0%, #00f0ff 30%, #38bdf8 70%, transparent 100%);
  box-shadow: 0 0 12px #00f0ff;
}

.cluster-type-card.gaming:hover {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 20px 42px -6px rgba(0, 102, 255, 0.4), 0 0 28px rgba(0, 240, 255, 0.25);
}

/* Bot Rig Card Variant (Ruby / Pink / Crimson) */
.cluster-type-card.bot {
  background: 
    radial-gradient(circle at 92% 16%, rgba(255, 42, 109, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 10% 85%, rgba(225, 29, 72, 0.12) 0%, transparent 60%),
    linear-gradient(145deg, rgba(32, 12, 28, 0.94) 0%, rgba(16, 6, 18, 0.98) 100%);
  border: 1px solid rgba(255, 42, 109, 0.24);
}

.cluster-type-card.bot::before {
  background: linear-gradient(90deg, transparent 0%, #ff2a6d 30%, #ec4899 70%, transparent 100%);
  box-shadow: 0 0 12px #ff2a6d;
}

.cluster-type-card.bot:hover {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(255, 42, 109, 0.55);
  box-shadow: 0 20px 42px -6px rgba(225, 29, 72, 0.4), 0 0 28px rgba(255, 42, 109, 0.25);
}

/* Cyberpunk Corner HUD Brackets */
.hud-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.75;
  transition: all 0.3s ease;
}

.hud-bracket-tl {
  top: 7px;
  left: 7px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.hud-bracket-br {
  bottom: 7px;
  right: 7px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.cluster-type-card.gaming .hud-bracket {
  border-color: #00f0ff;
  filter: drop-shadow(0 0 4px #00f0ff);
}

.cluster-type-card.bot .hud-bracket {
  border-color: #ff2a6d;
  filter: drop-shadow(0 0 4px #ff2a6d);
}

.cluster-type-card:hover .hud-bracket {
  opacity: 1;
  width: 16px;
  height: 16px;
}

/* Card Inner Layout */
.cluster-card-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top HUD Info Bar */
.cluster-hud-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.cluster-hud-tag-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cluster-hud-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}

.cluster-hud-badge.gaming {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.cluster-hud-badge.bot {
  color: #ff2a6d;
  background: rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.35);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.15);
}

.pulse-dot-cyan {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  animation: cyber-dot-pulse 1.8s infinite;
}

.pulse-dot-ruby {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2a6d;
  box-shadow: 0 0 8px #ff2a6d;
  animation: cyber-dot-pulse 1.8s infinite;
}

@keyframes cyber-dot-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.cluster-hud-subtag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.cluster-hud-subtag.gaming {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.cluster-hud-subtag.bot {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.08);
  border: 1px solid rgba(251, 113, 133, 0.2);
}

/* ─── Neon Price Capsule ─── */
.cluster-neon-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}

.cluster-neon-price.gaming {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.12);
}

.cluster-neon-price.bot {
  border-color: rgba(255, 42, 109, 0.35);
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.12);
}

.cluster-neon-price .price-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.cluster-neon-price .price-val-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1.1;
  margin-top: 2px;
}

.cluster-neon-price .price-currency {
  font-size: 0.85rem;
  font-weight: 900;
}

.cluster-neon-price.gaming .price-currency,
.cluster-neon-price.gaming .price-num {
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}

.cluster-neon-price.bot .price-currency,
.cluster-neon-price.bot .price-num {
  color: #ff2a6d;
  text-shadow: 0 0 12px rgba(255, 42, 109, 0.6);
}

.cluster-neon-price .price-num {
  font-family: 'Orbitron', 'JetBrains Mono', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.cluster-neon-price .price-unit {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-left: 1px;
}

/* ─── Main Info & Floating Hologram ─── */
.cluster-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cluster-info-text {
  flex: 1;
}

.cluster-hud-title {
  font-size: 1.22rem;
  font-weight: 900;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.cluster-hud-title.gaming {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}

.cluster-hud-title.bot {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255, 42, 109, 0.3);
}

.cluster-hud-en {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 5px;
  vertical-align: middle;
}

.cluster-hud-title.gaming .cluster-hud-en {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.cluster-hud-title.bot .cluster-hud-en {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.12);
  border: 1px solid rgba(251, 113, 133, 0.3);
}

.cluster-hud-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.48;
  margin: 0;
}

/* Floating Hologram Graphics */
.cluster-hologram-wrap {
  width: 95px;
  height: 75px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: float-hologram 4s ease-in-out infinite;
}

@keyframes float-hologram {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.cluster-hologram-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.cluster-hologram-wrap.gaming .cluster-hologram-svg {
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.35));
}

.cluster-hologram-wrap.bot .cluster-hologram-svg {
  filter: drop-shadow(0 0 12px rgba(255, 42, 109, 0.35));
}

@media (max-width: 540px) {
  .cluster-hologram-wrap {
    display: none;
  }
}

/* ─── Cyber Specs HUD Matrix ─── */
.cluster-hud-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .cluster-hud-specs {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.hud-spec-chip {
  background: rgba(13, 20, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.2s ease;
}

.hud-spec-chip.gaming {
  border-left: 2px solid #00f0ff;
}

.hud-spec-chip.bot {
  border-left: 2px solid #ff2a6d;
}

.hud-spec-chip:hover {
  background: rgba(20, 32, 58, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}

.hud-spec-chip .spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hud-spec-chip .spec-val {
  font-size: 0.74rem;
  font-weight: 800;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Cyber CTA Buttons with Laser Shine ─── */
.cluster-hud-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 12px;
  z-index: 1;
}

.cluster-hud-btn .btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cluster-hud-btn .btn-icon {
  font-size: 1rem;
}

.cluster-hud-btn .btn-arrow {
  transition: transform 0.2s ease;
}

.cluster-hud-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Animated Diagonal Laser Beam Sweep */
.cluster-hud-btn .btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: cyber-btn-sweep 3.5s infinite;
  pointer-events: none;
}

@keyframes cyber-btn-sweep {
  0% { left: -100%; }
  30%, 100% { left: 200%; }
}

.cluster-hud-btn.gaming {
  background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cluster-hud-btn.gaming:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0052cc 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 210, 255, 0.55), 0 0 20px rgba(0, 240, 255, 0.35);
}

.cluster-hud-btn.bot {
  background: linear-gradient(135deg, #ff2a6d 0%, #be123c 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 42, 109, 0.4);
  box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cluster-hud-btn.bot:hover {
  background: linear-gradient(135deg, #fb7185 0%, #9f1239 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 42, 109, 0.55), 0 0 20px rgba(255, 42, 109, 0.35);
}

/* ─── Column 2 (Right): Single Game Slider ─── */
.cluster-games-slider-column {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.game-slider-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.game-slide-nav-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-slide-nav-pill {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.game-slide-nav-pill:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: #e2e8f0;
}

.game-slide-nav-pill.active {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.35) 0%, rgba(0, 210, 255, 0.25) 100%);
  border-color: #00d2ff;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.25);
}

.game-slider-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-slider-counter {
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748b;
  margin-right: 4px;
}

.game-slider-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-slider-arrow-btn:hover {
  background: #0066ff;
  border-color: #0066ff;
  transform: scale(1.08);
}

.single-game-slider-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #080d1a;
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 540px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-game-slider-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00f0ff 30%, #38bdf8 70%, transparent 100%);
  box-shadow: 0 0 12px #00f0ff;
  z-index: 6;
}

.single-game-slider-card .hud-bracket {
  border-color: #00f0ff;
  filter: drop-shadow(0 0 4px #00f0ff);
  z-index: 6;
}

.single-game-slider-card:hover {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 20px 42px -6px rgba(0, 102, 255, 0.4), 0 0 28px rgba(0, 240, 255, 0.25);
}

.single-game-slide {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  animation: gameSlideFade 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-game-slide.active {
  display: flex;
}

/* 1. Full-Bleed Game Poster Backdrop (100% visible, no solid covers) */
.single-game-slide .game-slide-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #070c18;
  pointer-events: none;
}

.single-game-slide .game-slide-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-game-slider-card:hover .single-game-slide.active .game-slide-backdrop img {
  transform: scale(1.04);
}

/* 2. Soft Vignette: Transparent in middle so game visual is 100% bright */
.single-game-slide .game-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 12, 26, 0.65) 0%,
    rgba(6, 12, 26, 0.05) 18%,
    transparent 35%,
    transparent 55%,
    rgba(5, 9, 20, 0.75) 75%,
    rgba(5, 9, 20, 0.98) 100%
  );
}

/* 3. Floating Top Badges Bar */
.single-game-slide .game-slide-top-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0 20px;
  gap: 10px;
}

.single-game-slide .cyber-badge-fps {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 800;
  color: #00f0ff;
  background: rgba(6, 14, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 240, 255, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.single-game-slide .cyber-badge-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(6, 14, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(16, 185, 129, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 4. Middle Artwork Spacer */
.single-game-slide .game-slide-spacer {
  flex: 1;
  min-height: 140px;
  pointer-events: none;
}

/* 5. Bottom Frosted Glass HUD Dock */
.single-game-slide .game-slide-bottom-dock {
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 24px 22px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 10, 22, 0.75) 20%,
    rgba(5, 9, 20, 0.98) 85%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.single-game-slide .cyber-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.single-game-slide .cyber-card-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.single-game-slide .cyber-card-tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.single-game-slide .cyber-card-tag-pill.pubg {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.35);
}

.single-game-slide .cyber-card-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  margin: 0;
  line-height: 1.25;
}

.single-game-slide .cyber-card-sub {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.52;
  margin: 4px 0 16px 0;
  max-width: 95%;
}

.single-game-slide .cyber-card-footer {
  margin-top: 4px;
}

.single-game-slide .cyber-play-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-game-slide .cyber-play-btn:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0052cc 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 210, 255, 0.6), 0 0 24px rgba(0, 240, 255, 0.4);
}

.single-game-slide .cyber-play-btn svg {
  transition: transform 0.2s ease;
}

.single-game-slide .cyber-play-btn:hover svg {
  transform: translateX(4px);
}

.single-game-slide .cyber-play-btn .btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  transform: skewX(-25deg);
  animation: cyber-btn-sweep 3.5s infinite;
  pointer-events: none;
}

/* ─── Futuristic Cyber Games Grid ────────────────────────────── */
.cyber-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.cyber-games-grid.featured-duo {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.cyber-game-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #090e1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.cyber-game-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(0, 210, 255, 0.65);
  box-shadow: 0 20px 42px -8px rgba(0, 102, 255, 0.4), 0 0 28px rgba(0, 210, 255, 0.25);
  z-index: 2;
}

.cyber-game-card.featured {
  border-color: rgba(56, 189, 248, 0.22);
}

.cyber-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cyber-card-poster {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #0f172a;
}

.cyber-game-card.featured .cyber-card-poster {
  height: 280px;
}

.cyber-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-game-card:hover .cyber-card-poster img {
  transform: scale(1.08);
}

.cyber-card-glow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 24, 0.05) 0%, rgba(7, 11, 24, 0.2) 40%, rgba(7, 11, 24, 0.98) 100%);
  pointer-events: none;
}

.cyber-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
}

.cyber-badge-fps {
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(8, 14, 30, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.5px;
}

.cyber-badge-status {
  font-size: 0.72rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(8, 14, 30, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.cyber-badge-status .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  display: inline-block;
  animation: cyberBeaconPulse 1.8s infinite;
}

.cyber-card-body {
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, rgba(10, 16, 32, 0.98) 0%, rgba(7, 11, 24, 1) 100%);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cyber-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cyber-card-cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #818cf8;
  text-transform: uppercase;
}

.cyber-card-tag-pill {
  font-size: 0.65rem;
  font-weight: 800;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
}

.cyber-card-tag-pill.pubg {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

.cyber-card-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.cyber-card-sub {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0 0 18px 0;
  line-height: 1.5;
  flex: 1;
}

.cyber-card-footer {
  margin-top: auto;
}

.cyber-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.22s ease;
}

.cyber-play-btn.primary {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.25) 0%, rgba(0, 210, 255, 0.15) 100%);
  border-color: rgba(0, 210, 255, 0.35);
  color: #ffffff;
}

.cyber-play-btn:hover,
.cyber-play-btn.primary:hover {
  background: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);
  border-color: #00d2ff;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.45);
  transform: translateY(-2px);
}

/* ─── Cyber Quick Services Deck ──────────────────────────────── */
.services-card {
  position: relative;
  background: linear-gradient(145deg, rgba(13, 20, 42, 0.94) 0%, rgba(8, 14, 30, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-top: 2px solid #00d2ff;
  border-radius: var(--radius-xl);
  padding: 24px 22px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 189, 248, 0.08);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.3s ease;
}

.services-card:hover {
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 20px 42px -6px rgba(0, 102, 255, 0.35), 0 0 28px rgba(0, 210, 255, 0.15);
}

.services-deck-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.services-title {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.services-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.services-title .title-main {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.services-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.8px;
}

.services-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.service-item:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.18) 0%, rgba(0, 210, 255, 0.08) 100%);
  border-color: rgba(0, 210, 255, 0.45);
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.25);
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.service-item:hover .service-icon {
  transform: scale(1.1) rotate(-3deg);
}

/* Individual Icon Themes */
.service-icon.icon-pc {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.service-icon.icon-game {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.service-icon.icon-wallet {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.service-icon.icon-guide {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.service-text {
  flex: 1;
  min-width: 0;
}

.service-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.service-desc {
  display: block;
  font-size: 0.74rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-arrow {
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.service-item:hover .service-arrow {
  color: #38bdf8;
  transform: translateX(3px);
}

/* ─── Cyber Telemetry HUD Metrics Bar ────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.metric-card.metric-cyber {
  background: linear-gradient(145deg, rgba(13, 20, 42, 0.9) 0%, rgba(8, 13, 28, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-top: 2px solid #00d2ff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.metric-card.metric-cyber:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 14px 32px rgba(0, 102, 255, 0.25), 0 0 20px rgba(0, 210, 255, 0.15);
}

.metric-cyber-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.metric-cyber .metric-label {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.metric-beacon-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.metric-beacon-live .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: cyberBeaconPulse 1.8s infinite;
}

.metric-sub-chip {
  font-size: 0.62rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.metric-cyber .metric-value {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.metric-glow-cyan {
  color: #38bdf8;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
}

.metric-glow-green {
  color: #34d399;
  text-shadow: 0 0 14px rgba(52, 211, 153, 0.45);
}

.metric-glow-purple {
  color: #c084fc;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.45);
}

.metric-glow-blue {
  color: #60a5fa;
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.45);
}

.metric-unit {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 600;
}

.metric-sub-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.metric-sub-bar .bar-fill {
  height: 100%;
  border-radius: 999px;
}

.metric-sub-bar .bar-fill.cyan {
  background: linear-gradient(90deg, #0066ff, #00d2ff);
  box-shadow: 0 0 8px #00d2ff;
}

.metric-sub-bar .bar-fill.green {
  background: linear-gradient(90deg, #059669, #10b981);
  box-shadow: 0 0 8px #10b981;
}

.metric-sub-bar .bar-fill.purple {
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  box-shadow: 0 0 8px #c084fc;
}

.metric-sub-bar .bar-fill.blue {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  box-shadow: 0 0 8px #38bdf8;
}

/* ─── Cyber-Gaming Style Machine Card (เข้ากับธีมเว็บมืดนีออน) ─── */
.section-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(8, 14, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pulse-beacon-blue {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: pulseBeaconBlue 2s infinite;
}

@keyframes pulseBeaconBlue {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.section-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.section-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  margin-top: 4px;
}

.machines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}

.machine-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(9, 14, 28, 0.96) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.machine-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.8) 50%, transparent 100%);
  opacity: 0.6;
  transition: opacity 0.3s;
}

.machine-card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 24px 50px -12px rgba(0, 102, 255, 0.38), 0 0 25px rgba(56, 189, 248, 0.22);
}

.machine-card:hover::before {
  opacity: 1;
}

/* Top Dark Graphic Stage with Neon Radial Lighting */
.machine-card-media {
  position: relative;
  width: 100%;
  height: 215px;
  background: radial-gradient(ellipse at 50% 55%, rgba(30, 58, 138, 0.45) 0%, rgba(10, 15, 30, 0.95) 75%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.machine-card-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(9, 14, 28, 0.95) 0%, transparent 100%);
  pointer-events: none;
}

.machine-card-media img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.machine-card:hover .machine-card-media img {
  transform: scale(1.06) translateY(-4px);
}

/* Floating Status Pill */
.machine-badge-float {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(16, 185, 129, 0.45);
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #34d399;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(16, 185, 129, 0.2);
  z-index: 2;
  letter-spacing: 0.2px;
}

.machine-badge-float.busy {
  border-color: rgba(245, 158, 11, 0.55);
  color: #fbbf24;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 158, 11, 0.25);
}

.machine-badge-float.standby {
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(56, 189, 248, 0.2);
}

.machine-badge-float.offline {
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(239, 68, 68, 0.2);
}

.machine-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ─── 🎀 Machine Corner Ribbon (ริบบิ้นเฉียงมุมขวาบน) ─── */
.machine-corner-ribbon-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;
  pointer-events: none;
  z-index: 15;
  border-top-right-radius: 24px;
}

.machine-corner-ribbon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 150px;
  padding: 6px 0;
  top: 24px;
  right: -36px;
  transform: rotate(45deg);
  text-align: center;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.2;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  user-select: none;
  transition: all 0.3s ease;
}

.machine-card:hover .machine-corner-ribbon {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}

/* กลุ่มที่ 2: คอมบอท (Bot Rig - Magenta / Crimson Cyberpunk) */
.machine-corner-ribbon.ribbon-bot {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* กลุ่มที่ 1: เกมมิ่ง (Gaming - Electric Blue / Cyan) */
.machine-corner-ribbon.ribbon-gaming {
  background: linear-gradient(135deg, #0066ff 0%, #0284c7 50%, #06b6d4 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* กลุ่มที่ 3: VIP RTX 4090 (Luxury Royal Purple) */
.machine-corner-ribbon.ribbon-vip {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* กลุ่มอื่นๆ ทั่วไป */
.machine-corner-ribbon.ribbon-custom {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.3);
}

/* Card Body Content */
.machine-card-content {
  padding: 22px 22px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.machine-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
}

.machine-card-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0;
}

.machine-partner-tag {
  font-size: 0.7rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Spec List with Cyber-Grid Rows */
.machine-spec-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 22px;
}

.machine-spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.machine-spec-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.25);
}

.spec-label-group {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.spec-icon {
  width: 17px;
  height: 17px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
}

.spec-value-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--font-mono), monospace;
}

.spec-value-text.gpu-highlight {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

/* Footer (Price & Cyber Glow Button) */
.machine-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  gap: 12px;
}

.price-box {
  display: flex;
  flex-direction: column;
}

.price-label-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 2px;
}

.price-number-big {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: linear-gradient(135deg, #ffffff 30%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-number-big span {
  font-size: 0.78rem;
  font-weight: 800;
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
}

/* Rent Button: Glow Cyber Neon */
.btn-rent-angpao {
  background: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 11px 22px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  white-space: nowrap;
}

.btn-rent-angpao:hover {
  background: linear-gradient(135deg, #0052cc 0%, #00b4d8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 210, 255, 0.55), 0 0 15px rgba(0, 102, 255, 0.35);
}

.btn-rent-angpao:disabled {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  font-weight: 700;
}

.btn-rent-angpao.busy {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.btn-rent-angpao.standby {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.btn-rent:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-glow);
}

.btn-rent:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── My PC Control Panel Section (เครื่องที่เช่าอยู่) ────────── */
.my-pc-section {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 48px;
  box-shadow: var(--shadow-sm);
}

.my-pc-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.control-btn-group {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.ctrl-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.ctrl-btn.power {
  color: var(--accent-green);
  border-color: rgba(16, 185, 129, 0.3);
}

.ctrl-btn.power:hover {
  background: var(--accent-green-light);
}

.ctrl-btn.restart {
  color: var(--primary);
  border-color: var(--primary-border);
}

.ctrl-btn.restart:hover {
  background: var(--primary-light);
}

.ctrl-btn.shutdown {
  color: var(--accent-red);
  border-color: rgba(239, 68, 68, 0.3);
}

.ctrl-btn.shutdown:hover {
  background: var(--accent-red-light);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .my-pc-card { grid-template-columns: 1fr; }
  .supported-apps { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .hero-title { font-size: 1.7rem; }
  .apps-list { flex-direction: column; width: 100%; }
  .app-card { width: 100%; }
}

/* ─── 🎮 3-Way Connect Modal (Moonlight / Parsec / OSLink) ─── */
.connect-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index: 3100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.connect-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  animation: modalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideUp {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.connect-header {
  padding: 22px 24px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.connect-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.connect-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
}
.connect-close-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s;
}
.connect-close-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.connect-body {
  padding: 0 24px 24px;
}
/* Segmented Tab Bar */
.connect-nav-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 22px;
}
.connect-tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.connect-tab-item:hover {
  background: #ffffff;
  border-color: #e2e8f0;
}
.connect-tab-item.active {
  background: #fff1f2;
  border-color: #fecdd3;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.08);
}
.connect-tab-item.active .tab-title {
  color: #0f172a;
}
.connect-tab-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tab-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  line-height: 1.2;
}
.tab-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tab Contents */
.connect-panel {
  display: none;
}
.connect-panel.active {
  display: block;
}
/* Steps in Moonlight */
.step-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.step-num {
  font-size: 0.88rem;
  font-weight: 900;
  color: #e11d48;
  letter-spacing: -0.02em;
}
.step-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}
.step-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.45;
}
.connect-copy-bar {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 8px 6px 14px;
  margin-bottom: 18px;
  transition: border-color 0.15s;
}
.connect-copy-bar:focus-within {
  border-color: #f43f5e;
  background: #fff;
}
.connect-copy-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  padding: 4px 0;
}
.btn-copy-sm {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-copy-sm:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.connect-step-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 18px 0;
}
/* PIN Boxes (4 individual digit boxes) */
.pin-boxes-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 20px;
}
.pin-digit-input {
  width: 58px;
  height: 60px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
  outline: none;
}
.pin-digit-input:focus {
  border-color: #fb7185;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.18);
}
.btn-submit-pin {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #f87171;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.3);
}
.btn-submit-pin:hover {
  background: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}
.btn-submit-pin:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.pin-status-pill {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pin-status-pill.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}
.pin-status-pill.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.pin-status-pill.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

/* Parsec Form Styling */
.parsec-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.parsec-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 16px;
}
.parsec-saved-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 0.82rem;
}
.parsec-input-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}
.parsec-input-field {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.88rem;
  color: #0f172a;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
  margin-bottom: 14px;
}
.parsec-input-field:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.parsec-remember-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 18px;
}
.btn-submit-parsec {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}
.btn-submit-parsec:hover {
  background: linear-gradient(135deg, #f97316, #ea580c);
  transform: translateY(-1px);
}

/* OSLink Styling */
.btn-submit-oslink-qr {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}
.btn-submit-oslink-qr:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

/* Chrome Remote Desktop Styling */
.btn-submit-crd {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a73e8, #1557b0);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
}
.btn-submit-crd:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 115, 232, 0.38);
}

/* ═══════════════════════════════════════════════════════════════════
   WALLET & AUTHENTICATION UI STYLING
   ═══════════════════════════════════════════════════════════════════ */

/* User Navbar Wallet & Profile Badges */
.user-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-full);
  padding: 4px 12px 4px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12);
}
.user-wallet-pill:hover {
  background: #dcfce7;
  border-color: #4ade80;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}
.user-wallet-pill .wallet-icon {
  font-size: 1.1rem;
}
.user-wallet-pill .wallet-amount {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.95rem;
  color: #15803d;
  letter-spacing: -0.3px;
}
.user-wallet-pill .btn-add-funds {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  border: none;
  font-size: 0.85rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.user-wallet-pill:hover .btn-add-funds {
  transform: scale(1.15);
}

/* ─── User Profile & Dropdown (ตรงตามรูปภาพเป๊ะ 100%) ─────────── */
.header-user-group {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.user-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 14px;
  color: #0066ff;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.user-wallet-pill:hover {
  border-color: #0066ff;
  background: #f0f7ff;
  transform: translateY(-1px);
}

.user-wallet-pill .wallet-icon-svg {
  display: inline-flex;
  color: #0066ff;
}

.profile-dropdown-wrapper {
  position: relative;
}

.btn-profile-dropdown-trigger {
  background: #0066ff;
  color: #ffffff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  border: none;
  border-radius: 10px;
  padding: 7px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
  transition: all 0.2s;
}

.btn-profile-dropdown-trigger:hover {
  background: #0052cc;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
  transform: translateY(-1px);
}

.btn-profile-dropdown-trigger .dropdown-chevron {
  font-size: 0.72rem;
  transition: transform 0.2s;
}

.profile-dropdown-wrapper.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* Floating Dropdown Card */
.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 255px;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 32%);
  border: 1.5px solid #dbeafe;
  border-radius: 20px;
  padding: 18px 14px 14px;
  box-shadow: 0 16px 40px rgba(0, 102, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
  z-index: 1200;
  display: none;
  animation: dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-dropdown-wrapper.open .profile-dropdown-menu {
  display: block;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.p-dropdown-header {
  margin-bottom: 10px;
}

.p-dropdown-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0066ff;
  font-size: 0.88rem;
  font-weight: 800;
}

.p-dropdown-wallet-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0066ff;
  font-weight: 900;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.p-dropdown-wallet-box:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.p-dropdown-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0066ff;
  font-size: 0.86rem;
  font-weight: 800;
  margin-bottom: 12px;
  padding: 0 4px;
}

.p-dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

.p-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #0066ff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.p-dropdown-item:hover {
  background: #f0f7ff;
  transform: translateX(3px);
}

.p-dropdown-item.highlight-topup {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px dashed #86efac;
  margin: 4px 0;
}

.p-dropdown-item.highlight-topup:hover {
  background: #dcfce7;
  transform: translateX(3px);
}

.p-dropdown-item.logout {
  color: #0066ff;
}

.p-dropdown-item.logout:hover {
  background: #fef2f2;
  color: #dc2626;
}

.p-item-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

/* Modal Backdrops & Cards */
.custom-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.custom-modal-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  position: relative;
  border: 1px solid #e2e8f0;
  animation: modalScaleUp 0.2s ease-out;
}

.custom-modal-card.wide {
  max-width: 620px;
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-close-icon:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Segmented Tabs inside Modal */
.modal-nav-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin: 18px 0 20px;
}
.modal-tab-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.modal-tab-btn.active {
  background: #ffffff;
  color: #0066ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Form Groups */
.form-group-item {
  margin-bottom: 16px;
}
.form-label-text {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.form-input-box {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input-box:focus {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

/* Amount Chip Selector */
.amount-chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.amount-chip {
  padding: 12px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.amount-chip:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.amount-chip.selected {
  background: #eff6ff;
  border-color: #0066ff;
  color: #0066ff;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
}

/* PromptPay QR Container */
.promptpay-card-box {
  background: #ffffff;
  border: 2px solid #005696;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0, 86, 150, 0.1);
}
.promptpay-header-banner {
  background: #005696;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  display: inline-block;
}
.promptpay-qr-img {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Top-up Confirmation Action Button */
.btn-topup-action {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}
.btn-topup-action:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4);
}

/* Transactions Table */
.wallet-tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin-top: 10px;
}
.wallet-tx-table th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.wallet-tx-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.wallet-tx-table tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBER PROFILE & AUTH SUCCESS MODALS
   ═══════════════════════════════════════════════════════════════ */

/* Profile Header Banner */
.profile-header-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.profile-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.3);
  flex-shrink: 0;
}
.profile-role-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #eff6ff;
  color: #0052cc;
  border: 1px solid #bfdbfe;
}
.profile-role-pill.admin {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

/* Member Stats Grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.profile-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.stat-icon-sm {
  font-size: 1.5rem;
}
.stat-meta {
  display: flex;
  flex-direction: column;
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  font-family: var(--font-mono, monospace);
}
.stat-val.text-green {
  color: #16a34a;
}
.btn-topup-mini {
  margin-left: auto;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-topup-mini:hover {
  background: #15803d;
  transform: translateY(-1px);
}

.profile-card-sub {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS MODAL (โมดอลล็อกอินสำเร็จ)
   ═══════════════════════════════════════════════════════════════ */
.success-card {
  max-width: 440px !important;
  text-align: center;
  padding: 32px 28px 24px !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 0 40px rgba(16, 185, 129, 0.15) !important;
  position: relative;
  overflow: hidden;
  animation: successModalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successModalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  position: relative;
}

/* Animated Checkmark SVG */
.success-checkmark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  stroke-width: 3.5;
  stroke: #10b981;
  stroke-miterlimit: 10;
  box-shadow: inset 0 0 0 #10b981;
  animation: fillGreen .4s ease-in-out .4s forwards, scaleCheck .3s ease-in-out .9s both;
}
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3.5;
  stroke-miterlimit: 10;
  stroke: #10b981;
  fill: #f0fdf4;
  animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeCheck 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes strokeCircle {
  100% { stroke-dashoffset: 0; }
}
@keyframes strokeCheck {
  100% { stroke-dashoffset: 0; }
}
@keyframes scaleCheck {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}

.success-badge-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #059669;
  background: #dcfce7;
  border: 1px solid #86efac;
  padding: 3px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
}
.success-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 6px;
}
.success-subtitle {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 20px;
}
.success-subtitle b {
  color: #0066ff;
}

.success-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  text-align: left;
}
.success-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.85rem;
}
.success-info-row:not(:last-child) {
  border-bottom: 1px dashed #e2e8f0;
}
.info-label {
  color: #64748b;
  font-weight: 600;
}
.info-val {
  font-weight: 800;
  color: #1e293b;
}

.success-actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.btn-success-primary {
  flex: 1.4;
  height: 44px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
}
.btn-success-primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}
.btn-success-secondary {
  flex: 1;
  height: 44px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-success-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Auto Dismiss Progress Bar */
.success-progress-bar {
  width: 100%;
  height: 3px;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar-fill {
  height: 100%;
  width: 100%;
  background: #10b981;
  transform-origin: left;
  animation: countdownBar 3.2s linear forwards;
}

@keyframes countdownBar {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   MY PC CARD & EMBEDDED REAL CONNECTION HUB (NO POPUP MODAL)
   ═══════════════════════════════════════════════════════════════ */
.my-pc-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 28px;
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

.my-pc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

@media (max-width: 860px) {
  .my-pc-card-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.my-pc-header-left {
  flex: 1;
}

.my-pc-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.my-pc-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1.5px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.12);
}

.my-pc-name {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.my-pc-session-id {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}

.my-pc-session-id code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0066ff;
  font-weight: 700;
  font-family: var(--font-mono);
}

.my-pc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: #0066ff;
  border: 1px solid #bfdbfe;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 800;
}

.my-pc-time-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 8px 14px;
  color: #0066ff;
  font-size: 0.88rem;
  margin-top: 12px;
  font-weight: 600;
}

.my-pc-time-banner strong {
  color: #0052cc;
  font-weight: 800;
}

/* Hardware Controls */
.control-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
}

.ctrl-btn.power {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.ctrl-btn.power:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.ctrl-btn.restart {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.ctrl-btn.restart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.ctrl-btn.shutdown {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.ctrl-btn.shutdown:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Embedded Connection Hub */
.embedded-connect-hub {
  margin-top: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
}

.connect-hub-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.connect-hub-title h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
}

.connect-hub-title span {
  font-size: 0.82rem;
  color: #64748b;
}

/* 3-Way Tabs Nav */
.mypc-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .mypc-tabs-nav {
    grid-template-columns: 1fr;
  }
}

.mypc-tab-btn {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.mypc-tab-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.mypc-tab-btn.active {
  border-color: #0066ff;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15);
}

.mypc-tab-btn .tab-icon {
  font-size: 1.4rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
  transition: all 0.2s;
}

.mypc-tab-btn.active .tab-icon {
  background: #0066ff;
  color: #ffffff;
}

.mypc-tab-btn .tab-main {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e293b;
  display: block;
}

.mypc-tab-btn.active .tab-main {
  color: #0066ff;
}

.mypc-tab-btn .tab-sub {
  font-size: 0.75rem;
  color: #64748b;
  display: block;
}

/* Tab Panes */
.mypc-tab-pane {
  display: none !important;
  animation: mypcFadeIn 0.25s ease-out;
}

.mypc-tab-pane.active {
  display: block !important;
}

@keyframes mypcFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Step Card inside Moonlight */
.connect-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .connect-step-card {
    flex-direction: column;
    gap: 10px;
  }
}

.step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0066ff;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-body {
  flex: 1;
  width: 100%;
}

.step-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}

.ip-copy-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 500px) {
  .ip-copy-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
}

.real-ip-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0066ff;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
}

.real-ip-input:focus {
  border-color: #0066ff;
  background: #ffffff;
}

.btn-copy-ip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-copy-ip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.3);
}

.host-info-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748b;
}

/* PIN Input Boxes */
.pin-inputs-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0 18px;
}

.pin-box {
  width: 58px;
  height: 64px;
  border-radius: 12px;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  color: #0f172a;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
  outline: none;
}

.pin-box:focus {
  border-color: #0066ff;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

.btn-submit-real-pin {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.25);
  transition: all 0.2s;
}

.btn-submit-real-pin:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35);
}

.btn-submit-real-pin:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Parsec Pane */
.parsec-pane-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
}

.parsec-header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
}

.chip-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.chip-badge.blue {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.parsec-instruction-text, .oslink-instruction-text {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.5;
}

.parsec-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 600px) {
  .parsec-form-row {
    grid-template-columns: 1fr;
  }
}

.form-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  display: block;
  margin-bottom: 6px;
}

.parsec-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #f8fafc;
  outline: none;
}

.parsec-input:focus {
  border-color: #f43f5e;
  background: #ffffff;
}

.parsec-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: #64748b;
}

.btn-clear-saved {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.btn-submit-real-parsec {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
  transition: all 0.2s;
}

/* OSLink Pane */
.oslink-pane-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
}

.google-auth-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.btn-google-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 30px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  width: 100%;
  max-width: 360px;
}

.btn-google-auth:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.oslink-url-wrap {
  margin-top: 16px;
  text-align: left;
}

.oslink-url-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0369a1;
  margin-bottom: 6px;
}

.oslink-url-copy-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.oslink-input {
  flex: 1;
  font-size: 0.78rem;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  outline: none;
}

.btn-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}

.oslink-qr-details {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 12px 16px;
}

.oslink-qr-details summary {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

.btn-fetch-qr {
  width: 100%;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 12px;
}

.oslink-qr-image {
  max-width: 260px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

.qr-subtext {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 6px;
}

/* Status Alert Pill */
.mypc-status-alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mypc-status-alert.info {
  background: #eff6ff;
  color: #0066ff;
  border: 1px solid #bfdbfe;
}

.mypc-status-alert.success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.mypc-status-alert.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Modal tab pane fix for any modal usages */
.connect-tab-pane {
  display: none !important;
}
.connect-tab-pane.active {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   📱 COMPREHENSIVE MOBILE RESPONSIVE SYSTEM (FOR ALL PAGES)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Mobile Bottom Navigation Bar (จอ <= 768px) ─── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 2px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: #0066ff;
  }

  .mobile-nav-item .m-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: transform 0.15s ease;
  }

  .mobile-nav-item.active .m-nav-icon {
    transform: translateY(-2px);
    color: #0066ff;
  }

  .mobile-nav-item span {
    letter-spacing: -0.2px;
  }
}

/* ─── 2. Top Header on Mobile (จอ <= 640px) ─── */
@media (max-width: 640px) {
  .site-header {
    padding: 0;
  }
  .header-inner {
    padding: 10px 14px;
    gap: 8px;
  }
  .brand {
    gap: 8px;
  }
  .brand-icon {
    width: 34px;
    height: 34px;
  }
  .brand-text h1 {
    font-size: 1rem;
  }
  .brand-text span {
    font-size: 0.62rem;
  }
  .header-actions {
    display: flex;
    gap: 6px;
  }
  .header-actions .btn-primary,
  .header-actions .btn-outline {
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: 8px;
  }
  .header-user-group {
    gap: 6px;
  }
  .user-wallet-pill {
    padding: 5px 10px;
    font-size: 0.82rem;
    gap: 6px;
  }
  .user-wallet-pill .wallet-icon-svg svg {
    width: 14px;
    height: 14px;
  }
  .btn-profile-dropdown-trigger {
    padding: 6px 12px;
    font-size: 0.82rem;
    border-radius: 8px;
    gap: 4px;
  }
  .profile-dropdown-menu {
    width: 230px;
    right: 0;
    top: calc(100% + 6px);
  }
}

/* ─── 3. Home Page (/): Hero, Cards, Metrics ─── */
@media (max-width: 768px) {
  .main-wrapper {
    padding: 0 14px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }
  .hero-banner {
    padding: 16px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(7, 11, 24, 0.94) 0%, rgba(7, 11, 24, 0.88) 100%), url('/images/custom-gaming-bg.jpg') center center / cover no-repeat;
  }
  .hero-banner.hero-banner-slider {
    padding: 0;
    background: none;
    border-radius: 16px;
  }
  .hero-slides-wrapper {
    min-height: 235px;
  }
  .hero-slide-item {
    padding: 16px 14px 28px 14px;
    border-radius: 16px;
    justify-content: center;
  }
  .hero-badge-group {
    gap: 5px;
    margin-bottom: 6px;
  }
  .hero-badge-pill {
    font-size: 0.60rem;
    padding: 2px 7px;
    gap: 4px;
    letter-spacing: 0.4px;
  }
  .hero-badge-pill.partner {
    padding: 2px 7px;
    font-size: 0.60rem;
  }
  .hero-badge-pill.partner .partner-badge-tag {
    font-size: 0.52rem;
    padding: 1px 4px;
  }
  .hero-badge-pill.price-pill {
    font-size: 0.62rem;
    padding: 2px 7px;
  }
  .hero-title {
    font-size: 1.18rem;
    line-height: 1.25;
    margin-bottom: 5px;
  }
  .hero-subtitle {
    font-size: 0.73rem;
    line-height: 1.35;
    margin-bottom: 8px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.88;
  }
  .hero-floating-specs {
    gap: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .spec-pill {
    font-size: 0.64rem;
    padding: 2px 8px;
    border-radius: 6px;
    gap: 4px;
  }
  .spec-pill .dot {
    width: 6px;
    height: 6px;
  }
  .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
  }
  .btn-hero, .btn-hero-secondary {
    flex: 1;
    min-width: 0;
    width: auto;
    text-align: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.78rem;
    border-radius: 8px;
    white-space: nowrap;
  }
  .btn-hero svg {
    width: 15px;
    height: 15px;
  }
  .hero-slider-arrow {
    display: none;
  }
  .hero-slider-controls {
    bottom: 6px;
    right: 10px;
    padding: 2px 8px;
    gap: 8px;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
  .hero-slider-dot {
    width: 6px;
    height: 6px;
  }
  .hero-slider-dot.active {
    width: 16px;
  }
  .hero-slider-counter {
    font-size: 0.65rem;
  }
  .games-feature-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .games-feature-content h3 {
    font-size: 1.15rem;
  }
  .cyber-games-grid,
  .cyber-games-grid.featured-duo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cyber-card-poster,
  .cyber-game-card.featured .cyber-card-poster {
    height: 220px;
  }
  .cyber-card-body {
    padding: 16px 18px 18px;
  }

  /* ─── 🎮 Dual Split: Hardware Clusters & Game Slider (Mobile Compact) ─── */
  .games-cluster-split-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }
  .cluster-types-header .cluster-types-heading {
    font-size: 1.15rem;
  }
  .cluster-types-header .cluster-types-sub {
    font-size: 0.76rem;
  }
  .cluster-type-card {
    padding: 14px 16px;
    border-radius: 16px;
  }
  .cluster-hud-title {
    font-size: 1.05rem;
  }
  .cluster-hud-desc {
    font-size: 0.74rem;
    line-height: 1.4;
    margin: 2px 0 8px;
    -webkit-line-clamp: 2;
  }
  .cluster-hologram-wrap {
    width: 68px;
    height: 48px;
  }
  .cluster-hud-specs {
    gap: 6px;
    margin-bottom: 10px;
  }
  .hud-spec-chip {
    padding: 3px 8px;
  }
  .hud-spec-chip .spec-label {
    font-size: 0.55rem;
  }
  .hud-spec-chip .spec-val {
    font-size: 0.68rem;
  }
  .cluster-hud-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    border-radius: 10px;
  }

  /* ─── Single Game Slider (Mobile Compact) ─── */
  .game-slider-controls-bar {
    gap: 6px;
    margin-bottom: 8px;
  }
  .game-slide-nav-pills {
    gap: 5px;
  }
  .game-slide-nav-pill {
    padding: 4px 9px;
    font-size: 0.70rem;
  }
  .game-slider-counter {
    font-size: 0.70rem;
    margin-right: 2px;
  }
  .game-slider-arrow-btn {
    width: 28px;
    height: 28px;
  }
  .game-slider-arrow-btn svg {
    width: 13px;
    height: 13px;
  }

  /* Game Card */
  .single-game-slider-card {
    min-height: 260px;
    max-height: 350px;
    border-radius: 16px;
  }
  .single-game-slide .game-slide-backdrop img {
    object-position: center 25%;
  }
  .single-game-slide .game-slide-top-bar {
    padding: 10px 12px 0 12px;
  }
  .single-game-slide .cyber-badge-fps,
  .single-game-slide .cyber-badge-status {
    font-size: 0.62rem;
    padding: 2px 8px;
  }
  .single-game-slide .game-slide-spacer {
    min-height: 40px;
  }
  .single-game-slide .game-slide-bottom-dock {
    padding: 12px 14px 14px;
    gap: 4px;
  }
  .single-game-slide .cyber-card-meta {
    margin-bottom: 1px;
  }
  .single-game-slide .cyber-card-cat {
    font-size: 0.58rem;
  }
  .single-game-slide .cyber-card-tag-pill {
    font-size: 0.56rem;
    padding: 1px 6px;
  }
  .single-game-slide .cyber-card-title {
    font-size: 1.10rem;
    line-height: 1.22;
  }
  .single-game-slide .cyber-card-sub {
    font-size: 0.72rem;
    line-height: 1.35;
    margin: 2px 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single-game-slide .cyber-play-btn {
    padding: 8px 12px;
    font-size: 0.78rem;
    border-radius: 8px;
    justify-content: center;
    width: 100%;
  }
  .services-card {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .metric-card.metric-cyber {
    padding: 14px 16px;
    border-radius: 14px;
  }
  .metric-cyber .metric-value {
    font-size: 1.3rem;
  }
  .cyber-streaming-dock {
    padding: 22px 18px;
    border-radius: 20px;
  }
  .dock-title {
    font-size: 1.2rem;
  }
  .dock-apps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cyber-app-card {
    padding: 16px 18px;
  }
  .machines-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .hero-slides-wrapper {
    min-height: 220px;
  }
  .hero-slide-item {
    padding: 14px 12px 26px 12px;
  }
  .hero-title {
    font-size: 1.05rem;
    line-height: 1.22;
    margin-bottom: 4px;
  }
  .hero-subtitle {
    font-size: 0.70rem;
    line-height: 1.3;
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
  }
  .hero-badge-pill {
    font-size: 0.58rem;
    padding: 1px 6px;
  }
  .spec-pill {
    font-size: 0.62rem;
    padding: 2px 6px;
  }
  .spec-pill:nth-child(n+3) {
    display: none;
  }
  .btn-hero, .btn-hero-secondary {
    font-size: 0.74rem;
    padding: 7px 8px;
  }
  .single-game-slider-card {
    min-height: 240px;
    max-height: 315px;
  }
  .single-game-slide .game-slide-spacer {
    min-height: 25px;
  }
  .single-game-slide .cyber-card-title {
    font-size: 1.02rem;
  }
  .single-game-slide .game-slide-bottom-dock {
    padding: 10px 12px 12px;
  }
  .single-game-slide .cyber-play-btn {
    padding: 7px 10px;
    font-size: 0.75rem;
  }
  .game-slide-nav-pill {
    padding: 3px 7px;
    font-size: 0.65rem;
  }
  .cluster-type-card {
    padding: 12px 12px;
  }
  .cluster-hud-title {
    font-size: 0.98rem;
  }
  .cluster-hologram-wrap {
    width: 58px;
    height: 42px;
  }
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .metric-label {
    font-size: 0.7rem;
  }
  .metric-value {
    font-size: 1.15rem;
  }
}

/* ─── 4. My Rentals Page (/my-rentals) Desktop Base Styling ─── */
.my-pc-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  padding: 24px 28px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: start;
  transition: all 0.2s ease;
}

.my-pc-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.06);
}

.my-pc-card-main {
  min-width: 0;
}

.my-rental-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.my-rental-spec-chip {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s, transform 0.15s;
}

.my-rental-spec-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

.my-rental-connect-panel {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.my-rental-actions-grid {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-connect-action {
  flex: 1;
  min-width: 160px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0066ff, #0052cc);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  text-decoration: none;
}

.btn-connect-action:hover {
  background: linear-gradient(135deg, #0052cc, #003da6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.42);
}

.btn-extend-action {
  flex: 1;
  min-width: 140px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  text-decoration: none;
}

.btn-extend-action:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.42);
}

.my-pc-card-sidebar {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  height: fit-content;
}

@media (max-width: 768px) {
  .my-rentals-wrapper {
    margin: 16px auto 60px !important;
    padding: 0 12px !important;
  }
  .my-rentals-header {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .my-rentals-header h1 {
    font-size: 1.28rem !important;
  }
  .my-rentals-header p {
    font-size: 0.82rem !important;
  }
  .btn-rent-more {
    width: 100%;
    justify-content: center;
    padding: 9px 16px;
  }
}

@media (max-width: 900px) {
  .my-pc-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 20px 16px !important;
  }
  .my-pc-card-main {
    width: 100% !important;
    min-width: 0 !important;
  }
  .my-pc-card-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .my-rentals-wrapper {
    margin: 16px auto 100px !important;
    padding: 0 12px 40px !important;
  }
  .my-rentals-header {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .my-rentals-header h1 {
    font-size: 1.2rem !important;
  }
  .my-rentals-header p {
    font-size: 0.8rem !important;
  }
  .btn-rent-more {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  .my-pc-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }
  .my-pc-card-main {
    width: 100% !important;
    min-width: 0 !important;
  }
  .my-pc-card-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* สเปกคอมพิวเตอร์ 2 คอลัมน์บนมือถือ */
  .my-rental-specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .my-rental-spec-chip {
    padding: 8px 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* กล่องนับเวลาคงเหลือบนมือถือ */
  .my-rental-timer-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }
  .my-rental-clock-wrap {
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }

  /* แผงเชื่อมต่อและปุ่มกดบนมือถือ */
  .my-rental-connect-panel {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  .connect-info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  .connect-info-row code {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    padding: 6px 8px !important;
    word-break: break-all !important;
  }

  .my-rental-actions-grid {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
    box-sizing: border-box !important;
  }
  .btn-connect-action {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.3) !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .btn-connect-action:active {
    transform: scale(0.97) !important;
  }
  .btn-extend-action {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .btn-extend-action:active {
    transform: scale(0.97) !important;
  }

  /* ศูนย์ควบคุมฮาร์ดแวร์ ปุ่ม 3 ปุ่ม */
  .control-btn-group {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .control-btn-group .ctrl-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .pin-box {
    width: 42px;
    height: 48px;
    font-size: 1.3rem;
  }
  .my-rental-specs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 5. Topup Page (/topup) ─── */
@media (max-width: 860px) {
  .topup-container-layout {
    margin: 20px auto 60px !important;
    padding: 0 14px !important;
    gap: 16px;
    flex-direction: column !important;
  }
  .topup-sidebar-menu {
    width: 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .topup-nav-tab {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 10px;
  }
  .topup-nav-icon-box {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
  .topup-nav-title {
    font-size: 0.88rem;
  }
  .topup-nav-sub {
    font-size: 0.7rem;
    display: none;
  }
  .topup-main-panel {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  .topup-main-title {
    font-size: 1.25rem;
  }
  .topup-illustration-box {
    height: 160px;
  }
}

@media (max-width: 520px) {
  .topup-sidebar-menu {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .topup-nav-tab {
    padding: 8px 6px;
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .topup-nav-icon-box {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 8px;
  }
  .topup-nav-title {
    font-size: 0.78rem;
  }
  .preset-chips-row {
    gap: 6px;
  }
  .preset-chip-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .qr-card-box {
    padding: 16px;
  }
  .qr-image-wrapper {
    width: 180px;
    height: 180px;
  }
  .qr-amount-val {
    font-size: 1.4rem;
  }
}

/* ─── 6. All Modal Dialogs & Backdrops on Mobile ─── */
@media (max-width: 640px) {
  .custom-modal-backdrop,
  .connect-modal-backdrop,
  .modal-overlay {
    padding: 10px !important;
    align-items: center;
  }
  .custom-modal-card,
  .connect-modal-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
  .modal-overlay > div {
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 16px !important;
    border-radius: 18px !important;
    width: 100% !important;
  }
  .connect-header {
    padding: 16px 16px 10px !important;
  }
  .connect-body {
    padding: 0 16px 16px !important;
  }
  .connect-nav-tabs {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }
  .connect-tab-item {
    padding: 8px 4px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .connect-tab-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .tab-title {
    font-size: 0.78rem !important;
  }
  .tab-subtitle {
    display: none !important;
  }
  .amount-chips-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .amount-chip {
    padding: 10px 4px !important;
    font-size: 0.88rem !important;
  }
  .profile-stats-grid {
    grid-template-columns: 1fr !important;
  }
}