:root {
  /* ========================================================
     MODERN DASHBOARD DESIGN SYSTEM (WCAG 2.1 Compliant)
     ======================================================== 
     Skema Warna Primer (Background/Surface Fallback):
     Hex: #252D35 | RGB: 37, 45, 53 | HSL: 210, 18%, 18%
     
     Skema Warna Sekunder (Hover State Fallback):
     Hex: #2C353E | RGB: 44, 53, 62 | HSL: 210, 17%, 21%
     
     Aksen Komplementer: var(--theme-color) (Dinamis mengikuti tema)
     
     Teks Utama (High Contrast untuk Aksesibilitas):
     Hex: #F8F9FA | RGB: 248, 249, 250 | HSL: 210, 17%, 98%
     ======================================================== */

  --dash-bg: transparent;
  
  /* Solid fallbacks for older browsers */
  --dash-surface-solid: #252D35;
  --dash-surface-hover-solid: #2C353E;
  
  /* Modern dynamic surface: 15% theme color mixed with 85% dark surface */
  --dash-surface: color-mix(in srgb, var(--theme-color) 15%, #252D35);
  
  /* Hover surface: 20% theme color */
  --dash-surface-hover: color-mix(in srgb, var(--theme-color) 20%, #2C353E);

  --dash-border: rgba(255, 255, 255, 0.08);
  --dash-border-hover: color-mix(in srgb, var(--theme-color) 40%, rgba(255, 255, 255, 0.2));
  --dash-card-header-bg: rgba(0, 0, 0, 0.15);
  
  --dash-text: #F8F9FA;
  --dash-text-soft: #A0AEC0;
  --dash-accent: var(--theme-color);
  --dash-icon-text: #ffffff;
  --dash-table-head-bg: rgba(0, 0, 0, 0.22);
  --dash-table-head-text: #ffffff;
  --dash-table-cell-border: rgba(255, 255, 255, 0.1);
  --dash-control-bg: rgba(255, 255, 255, 0.08);
  --dash-control-border: rgba(255, 255, 255, 0.2);
  --dash-control-text: #ffffff;
  --dash-control-hover-border: rgba(255, 255, 255, 0.85);
  --dash-control-hover-ring: rgba(255, 255, 255, 0.16);
  --dash-r2-card-bg: var(--dash-surface);
  --dash-r2-card-hover-bg: var(--dash-surface-hover);
  --dash-r2-card-header-bg: color-mix(in srgb, var(--theme-color) 22%, #1a2327);
  --dash-r2-card-border: rgba(255, 255, 255, 0.12);
  --dash-r2-box-bg: color-mix(in srgb, var(--theme-color) 12%, #2a383d);
  --dash-r2-box-hover-bg: color-mix(in srgb, var(--theme-color) 16%, #314247);
  --dash-r2-box-border: rgba(255, 255, 255, 0.14);
  --dash-r2-accent: var(--theme-color);
  --dash-r2-title: #F8F9FA;
  --dash-r2-text: #E6EDF3;
  --dash-r2-text-soft: #B8C2CC;
  --dash-r2-icon: #F8F9FA;
  --dash-r2-focus-ring: color-mix(in srgb, var(--dash-r2-accent) 55%, rgba(255, 255, 255, 0.6));
  
  --dash-radius-sm: 8px;
  --dash-radius-md: 12px;
  --dash-radius-lg: 16px;
  
  --dash-shadow-1: 0 4px 12px rgba(0, 0, 0, 0.15);
  --dash-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Theme-based text contrast overrides */
body.theme-dark {
  --dash-text: #F8F9FA;
  --dash-text-soft: #A0AEC0;
  --dash-icon-text: #ffffff;
  --dash-table-head-bg: rgba(0, 0, 0, 0.22);
  --dash-table-head-text: #ffffff;
  --dash-table-cell-border: rgba(255, 255, 255, 0.1);
  --dash-control-bg: rgba(255, 255, 255, 0.08);
  --dash-control-border: rgba(255, 255, 255, 0.2);
  --dash-control-text: #ffffff;
  --dash-control-hover-border: rgba(255, 255, 255, 0.85);
  --dash-control-hover-ring: rgba(255, 255, 255, 0.16);
  --dash-r2-accent: #272D31;
}

body.theme-blue {
  --dash-surface-solid: #ffffff;
  --dash-surface-hover-solid: #ffffff;
  --dash-surface: color-mix(in srgb, var(--theme-color) 6%, #ffffff);
  --dash-surface-hover: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
  --dash-border: color-mix(in srgb, var(--theme-color) 24%, rgba(47, 53, 58, 0.16));
  --dash-border-hover: color-mix(in srgb, var(--theme-color) 45%, rgba(47, 53, 58, 0.24));
  --dash-card-header-bg: color-mix(in srgb, var(--theme-color) 6%, #F5F6F7);
  --dash-text: #2f353a;
  --dash-text-soft: #73818f;
  --dash-icon-text: #2f353a;
  --dash-table-head-bg: var(--dash-card-header-bg);
  --dash-table-head-text: #2f353a;
  --dash-table-cell-border: var(--dash-border);
  --dash-control-bg: rgba(255, 255, 255, 0.62);
  --dash-control-border: var(--dash-border);
  --dash-control-text: #2f353a;
  --dash-control-hover-border: rgba(47, 53, 58, 0.55);
  --dash-control-hover-ring: rgba(47, 53, 58, 0.12);
  --dash-r2-accent: #008BC9;
  --dash-r2-card-bg: #ffffff;
  --dash-r2-card-hover-bg: #ffffff;
  --dash-r2-card-header-bg: #ffffff;
  --dash-r2-card-border: rgba(47, 53, 58, 0.16);
  --dash-r2-box-bg: #ffffff;
  --dash-r2-box-hover-bg: #ffffff;
  --dash-r2-box-border: rgba(47, 53, 58, 0.18);
  --dash-r2-title: #1f2a33;
  --dash-r2-text: #2f353a;
  --dash-r2-text-soft: #5c6670;
  --dash-r2-icon: #2f353a;
  --dash-r2-focus-ring: color-mix(in srgb, var(--dash-r2-accent) 45%, rgba(47, 53, 58, 0.45));
}

body.theme-green {
  --dash-surface-solid: #ffffff;
  --dash-surface-hover-solid: #ffffff;
  --dash-surface: color-mix(in srgb, var(--theme-color) 6%, #ffffff);
  --dash-surface-hover: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
  --dash-border: color-mix(in srgb, var(--theme-color) 24%, rgba(47, 53, 58, 0.16));
  --dash-border-hover: color-mix(in srgb, var(--theme-color) 45%, rgba(47, 53, 58, 0.24));
  --dash-card-header-bg: color-mix(in srgb, var(--theme-color) 6%, #F5F6F7);
  --dash-text: #2f353a;
  --dash-text-soft: #73818f;
  --dash-icon-text: #2f353a;
  --dash-table-head-bg: var(--dash-card-header-bg);
  --dash-table-head-text: #2f353a;
  --dash-table-cell-border: var(--dash-border);
  --dash-control-bg: rgba(255, 255, 255, 0.62);
  --dash-control-border: var(--dash-border);
  --dash-control-text: #2f353a;
  --dash-control-hover-border: rgba(47, 53, 58, 0.55);
  --dash-control-hover-ring: rgba(47, 53, 58, 0.12);
  --dash-r2-accent: #4dbd74;
  --dash-r2-card-bg: #ffffff;
  --dash-r2-card-hover-bg: #ffffff;
  --dash-r2-card-header-bg: #ffffff;
  --dash-r2-card-border: rgba(47, 53, 58, 0.16);
  --dash-r2-box-bg: #ffffff;
  --dash-r2-box-hover-bg: #ffffff;
  --dash-r2-box-border: rgba(47, 53, 58, 0.18);
  --dash-r2-title: #1f2a33;
  --dash-r2-text: #2f353a;
  --dash-r2-text-soft: #5c6670;
  --dash-r2-icon: #2f353a;
  --dash-r2-focus-ring: color-mix(in srgb, var(--dash-r2-accent) 45%, rgba(47, 53, 58, 0.45));
}

body.theme-pink {
  --dash-surface-solid: #ffffff;
  --dash-surface-hover-solid: #ffffff;
  --dash-surface: color-mix(in srgb, var(--theme-color) 6%, #ffffff);
  --dash-surface-hover: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
  --dash-border: color-mix(in srgb, var(--theme-color) 24%, rgba(47, 53, 58, 0.16));
  --dash-border-hover: color-mix(in srgb, var(--theme-color) 45%, rgba(47, 53, 58, 0.24));
  --dash-card-header-bg: color-mix(in srgb, var(--theme-color) 6%, #F5F6F7);
  --dash-text: #2f353a;
  --dash-text-soft: #73818f;
  --dash-icon-text: #2f353a;
  --dash-table-head-bg: var(--dash-card-header-bg);
  --dash-table-head-text: #2f353a;
  --dash-table-cell-border: var(--dash-border);
  --dash-control-bg: rgba(255, 255, 255, 0.62);
  --dash-control-border: var(--dash-border);
  --dash-control-text: #2f353a;
  --dash-control-hover-border: rgba(47, 53, 58, 0.55);
  --dash-control-hover-ring: rgba(47, 53, 58, 0.12);
  --dash-r2-accent: #e83e8c;
  --dash-r2-card-bg: #ffffff;
  --dash-r2-card-hover-bg: #ffffff;
  --dash-r2-card-header-bg: #ffffff;
  --dash-r2-card-border: rgba(47, 53, 58, 0.16);
  --dash-r2-box-bg: #ffffff;
  --dash-r2-box-hover-bg: #ffffff;
  --dash-r2-box-border: rgba(47, 53, 58, 0.18);
  --dash-r2-title: #1f2a33;
  --dash-r2-text: #2f353a;
  --dash-r2-text-soft: #5c6670;
  --dash-r2-icon: #2f353a;
  --dash-r2-focus-ring: color-mix(in srgb, var(--dash-r2-accent) 45%, rgba(47, 53, 58, 0.45));
}

body.theme-light {
  --dash-surface-solid: #ffffff;
  --dash-surface-hover-solid: #ffffff;
  --dash-surface: color-mix(in srgb, var(--theme-color) 6%, #ffffff);
  --dash-surface-hover: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
  --dash-border: color-mix(in srgb, var(--theme-color) 18%, rgba(47, 53, 58, 0.16));
  --dash-border-hover: color-mix(in srgb, var(--theme-color) 40%, rgba(47, 53, 58, 0.24));
  --dash-card-header-bg: color-mix(in srgb, var(--theme-color) 4%, #F5F6F7);
  --dash-text: #2f353a;
  --dash-text-soft: #73818f;
  --dash-icon-text: #2f353a;
  --dash-table-head-bg: var(--dash-card-header-bg);
  --dash-table-head-text: #2f353a;
  --dash-table-cell-border: var(--dash-border);
  --dash-control-bg: rgba(255, 255, 255, 0.62);
  --dash-control-border: var(--dash-border);
  --dash-control-text: #2f353a;
  --dash-control-hover-border: rgba(47, 53, 58, 0.55);
  --dash-control-hover-ring: rgba(47, 53, 58, 0.12);
  --dash-r2-card-bg: #ffffff;
  --dash-r2-card-hover-bg: #ffffff;
  --dash-r2-card-header-bg: #ffffff;
  --dash-r2-card-border: rgba(47, 53, 58, 0.16);
  --dash-r2-box-bg: #ffffff;
  --dash-r2-box-hover-bg: #ffffff;
  --dash-r2-box-border: rgba(47, 53, 58, 0.18);
  --dash-r2-accent: #008BC9;
  --dash-r2-title: #1f2a33;
  --dash-r2-text: #2f353a;
  --dash-r2-text-soft: #5c6670;
  --dash-r2-icon: #2f353a;
  --dash-r2-focus-ring: color-mix(in srgb, var(--dash-r2-accent) 45%, rgba(47, 53, 58, 0.45));
}

/* Top system boxes are visually bright on non-dark themes, so force dark text for readability */
body.theme-light #reloadHome #r_1 .box,
body.theme-blue #reloadHome #r_1 .box,
body.theme-green #reloadHome #r_1 .box,
body.theme-pink #reloadHome #r_1 .box {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(47, 53, 58, 0.14);
}

body.theme-light #reloadHome #r_1 .box-group-area,
body.theme-blue #reloadHome #r_1 .box-group-area,
body.theme-green #reloadHome #r_1 .box-group-area,
body.theme-pink #reloadHome #r_1 .box-group-area {
  color: #2f353a;
}

body.theme-light #reloadHome #r_1 .box-group-icon,
body.theme-blue #reloadHome #r_1 .box-group-icon,
body.theme-green #reloadHome #r_1 .box-group-icon,
body.theme-pink #reloadHome #r_1 .box-group-icon {
  color: #2f353a;
  background: rgba(47, 53, 58, 0.06);
  border-color: rgba(47, 53, 58, 0.16);
}

#reloadHome {
  color: var(--dash-text);
}

#reloadHome .card,
#reloadHome .box {
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-md);
}

#reloadHome .card {
  background: var(--dash-surface-solid); /* Fallback */
  background: var(--dash-surface);
  box-shadow: var(--dash-shadow-1);
  transition: background 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

#reloadHome .card:hover {
  background: var(--dash-surface-hover-solid); /* Fallback */
  background: var(--dash-surface-hover);
  box-shadow: var(--dash-shadow-2);
  border-color: var(--dash-border-hover);
}

#reloadHome .card-header {
  background: var(--dash-card-header-bg);
  border-bottom: 1px solid var(--dash-border);
  padding: 14px 18px;
}

#reloadHome .card-header h3,
#reloadHome .card-header .card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--dash-text);
}

#reloadHome .card-header a {
  color: var(--dash-text) !important;
  opacity: 1 !important;
}

#reloadHome .card-header a:hover {
  color: var(--dash-accent);
}

#reloadHome .card-body {
  padding: 14px;
}

#reloadHome .box {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 240ms ease, box-shadow 240ms ease, filter 240ms ease;
  position: relative;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#reloadHome .box:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.theme-light #reloadHome .box,
body.theme-blue #reloadHome .box,
body.theme-green #reloadHome .box,
body.theme-pink #reloadHome .box {
  background: #ffffff;
  border-color: rgba(47, 53, 58, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
}

body.theme-light #reloadHome .box:hover,
body.theme-blue #reloadHome .box:hover,
body.theme-green #reloadHome .box:hover,
body.theme-pink #reloadHome .box:hover {
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

#reloadHome .box a {
  color: var(--dash-text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100%;
  position: relative;
  z-index: 2;
}

#reloadHome .box h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#reloadHome .box h1 span {
  font-size: 14px !important;
  font-weight: 600;
  opacity: 0.8;
}

#reloadHome .box a > div:last-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--dash-text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

#reloadHome .box a > div:last-child i {
  font-size: 16px;
}

/* --- Top System Info Box Redesign --- */
#reloadHome .box-bordered {
  padding: 14px;
  display: flex;
  align-items: center;
}

#reloadHome .box-group {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

#reloadHome .box-group-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15); /* More visible on brighter box */
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--dash-icon-text);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#reloadHome .box-group-area {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dash-text);
}

/* --- Dashboard Main Cards (#r_2_hotspot, #r_2_ppp) Theme Tokens --- */
#reloadHome #r_2_hotspot .card,
#reloadHome #r_2_ppp .card {
  background: var(--dash-r2-card-bg);
  border-color: var(--dash-r2-card-border);
}

#reloadHome #r_2_hotspot .card:hover,
#reloadHome #r_2_ppp .card:hover {
  background: var(--dash-r2-card-hover-bg);
  border-color: color-mix(in srgb, var(--dash-r2-accent) 35%, var(--dash-r2-card-border));
}

#reloadHome #r_2_hotspot .card-header,
#reloadHome #r_2_ppp .card-header {
  background: var(--dash-r2-card-header-bg);
  border-bottom-color: var(--dash-r2-card-border);
}

#reloadHome #r_2_hotspot .card-header h3,
#reloadHome #r_2_hotspot .card-header .card-title,
#reloadHome #r_2_ppp .card-header h3,
#reloadHome #r_2_ppp .card-header .card-title {
  color: var(--dash-r2-title);
}

#reloadHome #r_2_hotspot .box,
#reloadHome #r_2_ppp .box {
  background: var(--dash-r2-box-bg);
  border-color: var(--dash-r2-box-border);
}

#reloadHome #r_2_hotspot .box:hover,
#reloadHome #r_2_ppp .box:hover {
  background: var(--dash-r2-box-hover-bg);
}

body.theme-light #reloadHome #r_2_hotspot .box,
body.theme-blue #reloadHome #r_2_hotspot .box,
body.theme-green #reloadHome #r_2_hotspot .box,
body.theme-pink #reloadHome #r_2_hotspot .box,
body.theme-light #reloadHome #r_2_ppp .box,
body.theme-blue #reloadHome #r_2_ppp .box,
body.theme-green #reloadHome #r_2_ppp .box,
body.theme-pink #reloadHome #r_2_ppp .box {
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#reloadHome .bg-blue,
#reloadHome .bg-green,
#reloadHome .bg-yellow,
#reloadHome .bg-red {
  background: var(--dash-r2-box-bg) !important;
  border-color: var(--dash-r2-box-border);
  color: var(--dash-r2-text);
}

#reloadHome .bg-blue:hover,
#reloadHome .bg-green:hover,
#reloadHome .bg-yellow:hover,
#reloadHome .bg-red:hover {
  background: var(--dash-r2-box-hover-bg) !important;
}

#reloadHome #r_2_hotspot .box a,
#reloadHome #r_2_ppp .box a {
  color: var(--dash-r2-text);
}

#reloadHome #r_2_hotspot .box a > div:last-child,
#reloadHome #r_2_ppp .box a > div:last-child {
  color: var(--dash-r2-text-soft);
}

#reloadHome #r_2_hotspot .box a > div:last-child i,
#reloadHome #r_2_hotspot .box h1 i,
#reloadHome #r_2_ppp .box a > div:last-child i,
#reloadHome #r_2_ppp .box h1 i {
  color: var(--dash-r2-icon);
}

#reloadHome #r_2_hotspot .box a:focus-visible,
#reloadHome #r_2_ppp .box a:focus-visible,
#reloadHome #r_2_ppp .card2 .ppp-link:focus-visible {
  outline: 2px solid var(--dash-r2-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

#reloadHome #r_traffic {
  background: var(--dash-r2-card-bg);
  border-color: var(--dash-r2-card-border);
}

#reloadHome #r_traffic:hover {
  background: var(--dash-r2-card-hover-bg);
  border-color: color-mix(in srgb, var(--dash-r2-accent) 35%, var(--dash-r2-card-border));
}

#reloadHome #r_traffic .card-header {
  background: var(--dash-r2-card-header-bg);
  border-bottom-color: var(--dash-r2-card-border);
}

#reloadHome #r_traffic .card-header h3,
#reloadHome #r_traffic .card-header .card-title {
  color: var(--dash-r2-title);
}

#reloadHome #trafficMonitor .highcharts-background,
#reloadHome #trafficMonitor .highcharts-plot-background,
#reloadHome #trafficMonitor .highcharts-plot-border {
  fill: transparent !important;
  stroke: transparent !important;
}

#reloadHome #trafficMonitor .highcharts-title,
#reloadHome #trafficMonitor .highcharts-title tspan {
  fill: var(--dash-text) !important;
}

#reloadHome #trafficMonitor .highcharts-axis-labels text {
  fill: var(--dash-text-soft) !important;
}

/* --- Neon Accent Styles for Stats Boxes --- */
#reloadHome .bg-blue::before,
#reloadHome .bg-green::before,
#reloadHome .bg-yellow::before,
#reloadHome .bg-red::before,
#reloadHome .card1::before,
#reloadHome .card2::before,
#reloadHome .card3::before,
#reloadHome .card4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1;
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-transition: background-position 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  -moz-transition: background-position 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  transition: background-position 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  will-change: background-position;
}

#reloadHome .box:hover::before {
  background-position: 100% 50%;
}

/* Blue Accent */
#reloadHome .bg-blue, #reloadHome .card2 {
}
#reloadHome .bg-blue::before, #reloadHome .card2::before {
  background-image: -webkit-linear-gradient(90deg, #4ea8ff 0%, #a252ff 50%, #4ea8ff 100%);
  background-image: -moz-linear-gradient(90deg, #4ea8ff 0%, #a252ff 50%, #4ea8ff 100%);
  background-image: linear-gradient(90deg, #4ea8ff 0%, #a252ff 50%, #4ea8ff 100%);
  box-shadow: 0 0 12px rgba(78, 168, 255, 0.7);
}
#reloadHome .bg-blue:hover::before, #reloadHome .card2:hover::before {
  box-shadow: 0 0 18px rgba(162, 82, 255, 0.8);
}
#reloadHome .bg-blue h1, #reloadHome .card2 h1, #reloadHome .card2 b {
  color: #4ea8ff;
}

/* Green Accent */
#reloadHome .bg-green, #reloadHome .card1 {
}
#reloadHome .bg-green::before, #reloadHome .card1::before {
  background-image: -webkit-linear-gradient(90deg, #2fd199 0%, #f3bf12 50%, #2fd199 100%);
  background-image: -moz-linear-gradient(90deg, #2fd199 0%, #f3bf12 50%, #2fd199 100%);
  background-image: linear-gradient(90deg, #2fd199 0%, #f3bf12 50%, #2fd199 100%);
  box-shadow: 0 0 12px rgba(47, 209, 153, 0.7);
}
#reloadHome .bg-green:hover::before, #reloadHome .card1:hover::before {
  box-shadow: 0 0 18px rgba(243, 191, 18, 0.8);
}
#reloadHome .bg-green h1, #reloadHome .card1 h1 {
  color: #2fd199;
}

/* Yellow Accent */
#reloadHome .bg-yellow, #reloadHome .card3 {
}
#reloadHome .bg-yellow::before, #reloadHome .card3::before {
  background-image: -webkit-linear-gradient(90deg, #f3bf12 0%, #ff735c 50%, #f3bf12 100%);
  background-image: -moz-linear-gradient(90deg, #f3bf12 0%, #ff735c 50%, #f3bf12 100%);
  background-image: linear-gradient(90deg, #f3bf12 0%, #ff735c 50%, #f3bf12 100%);
  box-shadow: 0 0 12px rgba(243, 191, 18, 0.7);
}
#reloadHome .bg-yellow:hover::before, #reloadHome .card3:hover::before {
  box-shadow: 0 0 18px rgba(255, 115, 92, 0.8);
}
#reloadHome .bg-yellow h1, #reloadHome .card3 h1 {
  color: #f3bf12;
}

/* Red Accent */
#reloadHome .bg-red, #reloadHome .card4 {
}
#reloadHome .bg-red::before, #reloadHome .card4::before {
  background-image: -webkit-linear-gradient(90deg, #f07575 0%, #c940b3 50%, #f07575 100%);
  background-image: -moz-linear-gradient(90deg, #f07575 0%, #c940b3 50%, #f07575 100%);
  background-image: linear-gradient(90deg, #f07575 0%, #c940b3 50%, #f07575 100%);
  box-shadow: 0 0 12px rgba(240, 117, 117, 0.7);
}
#reloadHome .bg-red:hover::before, #reloadHome .card4:hover::before {
  box-shadow: 0 0 18px rgba(201, 64, 179, 0.8);
}
#reloadHome .bg-red h1, #reloadHome .card4 h1 {
  color: #f07575;
}

/* Fix icon inside h1 spacing */
#reloadHome .box h1 i {
  margin-right: 6px;
}

/* --- PPP Split Card Redesign --- */
#reloadHome .card2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

#reloadHome .card2 .ppp-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(78, 168, 255, 0.08);
  border: 1px solid rgba(78, 168, 255, 0.15);
  border-radius: 8px;
  color: #4ea8ff;
  font-weight: 600;
  transition: all 200ms ease;
  width: 100%;
  box-sizing: border-box;
}

#reloadHome .card2 .ppp-link:hover {
  background: rgba(78, 168, 255, 0.15);
  transform: translateX(4px);
}

#reloadHome .card2 a:nth-child(2) .ppp-link {
  background: rgba(240, 117, 117, 0.08);
  border: 1px solid rgba(240, 117, 117, 0.15);
  color: #f07575;
}

#reloadHome .card2 a:nth-child(2) .ppp-link:hover {
  background: rgba(240, 117, 117, 0.15);
}

#reloadHome .table {
  background: transparent;
  color: var(--dash-text);
}

#reloadHome .table th {
  color: var(--dash-table-head-text);
  background: var(--dash-table-head-bg);
  border: 1px solid var(--dash-border);
  font-size: 12px;
  letter-spacing: 0.04em;
}

#reloadHome .table td {
  color: var(--dash-text-soft);
  border: 1px solid var(--dash-table-cell-border);
}

#reloadHome .traffic-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--dash-control-border);
  background: var(--dash-control-bg);
  color: var(--dash-control-text);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}

#reloadHome .traffic-toggle:active {
  transform: translateY(1px);
}

#reloadHome .traffic-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dash-control-hover-ring);
}

#reloadHome .traffic-toggle:hover {
  border-color: var(--dash-control-hover-border);
  box-shadow: 0 0 0 3px var(--dash-control-hover-ring);
}

#reloadHome .traffic-toggle .traffic-toggle-state {
  opacity: 0.9;
}

#reloadHome .traffic-toggle .traffic-toggle-knob {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dash-control-text) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--dash-control-text) 25%, rgba(47, 53, 58, 0.18));
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  transform: translateX(0);
  transition: transform 240ms ease, background 220ms ease, border-color 220ms ease;
}

#reloadHome .traffic-toggle.on {
  background: color-mix(in srgb, var(--dash-r2-accent) 88%, #0b1220);
  border-color: color-mix(in srgb, var(--dash-r2-accent) 70%, rgba(47, 53, 58, 0.24));
  color: #ffffff;
}

#reloadHome .traffic-toggle.on .traffic-toggle-state {
  opacity: 1;
}

#reloadHome .traffic-toggle.on .traffic-toggle-knob {
  transform: translateX(12px);
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
  #reloadHome .card-header h3,
  #reloadHome .card-header .card-title {
    font-size: 19px;
  }

  #reloadHome .box h1 {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  #reloadHome .col-8,
  #reloadHome .col-6,
  #reloadHome .col-4 {
    width: 100%;
  }

  #reloadHome .col-3.col-box-6 {
    width: 50%;
  }

  #reloadHome .card-body {
    padding: 12px;
  }

  #reloadHome .box h1 {
    font-size: 24px;
  }

  #reloadHome .card-header h3,
  #reloadHome .card-header .card-title {
    font-size: 18px;
  }
}

@media (max-width: 320px) {
  #reloadHome .col-3.col-box-6 {
    width: 100%;
  }

  #reloadHome .card-header {
    padding: 10px 12px;
  }

  #reloadHome .card-header h3,
  #reloadHome .card-header .card-title {
    font-size: 16px;
  }

  #reloadHome .box {
    border-radius: var(--dash-radius-sm);
  }

  #reloadHome .box h1 {
    font-size: 20px;
  }
}

@media (min-width: 1920px) {
  #reloadHome {
    max-width: 1850px;
    margin: 0 auto;
  }

  #reloadHome .card-header h3,
  #reloadHome .card-header .card-title {
    font-size: 22px;
  }

  #reloadHome .box h1 {
    font-size: 38px;
  }
}