/* CasinoOpsAI route-scoped page-family design. Internal.
   Loaded only for the matching visual family; the protected homepage loads none. */
body[data-page-family='product-server'] {
  --family-accent: #216a9a;
  --family-accent-dark: #0b3654;
  --family-accent-soft: #e8f3fa;
  --family-border: #9fc4da;
  --family-surface: #f3f8fb;
  --family-radius: 10px;
  --family-shadow: 0 12px 28px rgba(17, 74, 111, 0.11);
}

body[data-page-family='product-browser'] {
  --family-accent: #0f766e;
  --family-accent-dark: #07534d;
  --family-accent-soft: #e6f5f2;
  --family-border: #97cbc3;
  --family-surface: #f2faf8;
  --family-radius: 14px;
  --family-shadow: 0 14px 32px rgba(15, 118, 110, 0.12);
}

/* Product pages: interface-led, precise, and more technical. */
body[data-page-family='product-server'] .hero,
body[data-page-family='product-browser'] .hero {
  border-bottom: 4px solid var(--family-accent);
}

body[data-page-family='product-server'] .hero {
  background:
    linear-gradient(90deg, transparent 0 69%, rgba(38, 125, 178, 0.18) 69% 100%),
    radial-gradient(circle at 14% 5%, rgba(85, 173, 222, 0.2), transparent 27rem),
    linear-gradient(135deg, #061725 0%, #0a2e48 60%, #0e466d 100%) !important;
}

body[data-page-family='product-browser'] .hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(65, 196, 178, 0.25), transparent 24rem),
    linear-gradient(135deg, #06242a 0%, #0b4d50 56%, #0f766e 100%) !important;
}

body[data-page-family^='product-'] .hero::before {
  background-size: 24px 24px;
  opacity: 0.75;
}

body[data-page-family^='product-'] :is(.dashboard-card, .floating-card, .hero-stats .stat) {
  border-radius: 8px !important;
}

body[data-page-family^='product-'] .dashboard-card {
  border-color: color-mix(in srgb, var(--family-accent) 65%, white) !important;
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.28);
}

body[data-page-family^='product-'] .section--alt {
  background: linear-gradient(180deg, var(--family-accent-soft), #fff);
  border-color: var(--family-border);
}

body[data-page-family^='product-'] .btn-primary,
body[data-page-family^='product-'] .button-primary,
body[data-page-family^='product-'] .button--primary {
  background: var(--family-accent-dark);
}