/* Obsidian Luxury: shared visual system. Kept separate from page behavior and data. */
:root {
  --bg-main: #0b0909;
  --bg-secondary: #120d0e;
  --bg-elevated: #191314;
  --surface-1: #171313;
  --surface-2: #20191a;
  --surface-3: #292021;
  --wine-900: #2a0b10;
  --wine-800: #3b0d15;
  --wine-700: #54101c;
  --wine-600: #711525;
  --wine-500: #941e31;
  --gold-500: #c9a35b;
  --gold-400: #d8b873;
  --gold-300: #e8d3a2;
  --text-primary: #f7f2e9;
  --text-secondary: #bdb3aa;
  --text-muted: #817975;
  --border-soft: rgba(232, 211, 162, 0.10);
  --border-medium: rgba(232, 211, 162, 0.18);
  --border-highlight: rgba(216, 184, 115, 0.38);
  --success: #62b98c;
  --danger: #c9535d;
  --primary: var(--wine-600);
  --primary-dark: var(--wine-800);
  --primary-light: var(--gold-300);
  --secondary: var(--gold-500);
  --secondary-dark: var(--wine-700);
  --gold: var(--gold-500);
  --gold-dark: var(--wine-700);
  --gold-light: var(--gold-300);
  --white: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-dim: var(--text-muted);
  --line: var(--border-soft);
  --gradient-brand: linear-gradient(135deg, #861a2d 0%, #55101c 100%);
  --shadow-glow: 0 12px 28px rgba(113, 21, 37, 0.20);
  --shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.38), 0 0 22px rgba(113, 21, 37, 0.10);
}

html, body {
  color: var(--text-primary) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(120, 25, 42, 0.18), transparent 32%),
    radial-gradient(circle at 82% 28%, rgba(201, 163, 91, 0.07), transparent 28%),
    linear-gradient(145deg, #090707 0%, #120a0c 45%, #080707 100%) !important;
}

body::before {
  opacity: .22 !important;
  background-image:
    radial-gradient(circle, rgba(232, 211, 162, .35) 0 1px, transparent 1.5px),
    linear-gradient(120deg, transparent 49.8%, rgba(113, 21, 37, .10) 50%, transparent 50.2%) !important;
}

/* Home banner and shared navigation */
.hero-banner,
.hero-art,
.guide-hero,
.page-hero,
.home-top-video::after {
  background:
    radial-gradient(circle at 78% 35%, rgba(201, 163, 91, .16), transparent 28%),
    linear-gradient(115deg, #48101b 0%, #230b10 42%, #0f0b0b 100%) !important;
}
.hero-art { border: 1px solid var(--border-soft) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .30) !important; }
.home-slide { background: #120b0d !important; }
.home-carousel::after { background: linear-gradient(90deg, rgba(15, 7, 8, .08), rgba(15, 7, 8, .04) 55%, rgba(15, 7, 8, .48)) !important; }
.brandbar, .platform-header, .guide-header { border-color: var(--border-soft) !important; }
.site-nav a, .platform-nav a, .guide-nav a { color: var(--text-secondary) !important; }
.site-nav a:hover, .platform-nav a:hover, .guide-nav a:hover, .guide-nav a.active { color: var(--gold-400) !important; background: rgba(201, 163, 91, .07) !important; }
.brand-mark, .guide-mark, .brand-mark img { background: linear-gradient(145deg, #3b0d15, #171010) !important; border-color: var(--border-highlight) !important; color: var(--gold-400) !important; }

.hero-copy h1, .page-title, .guide-hero h1, .section-title, .platform-name, .guide-content h1, .guide-content h2 {
  color: var(--text-primary) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 18px rgba(201, 163, 91, .08) !important;
}
.hero-copy h1, .guide-hero h1 { background: linear-gradient(180deg, #fff9ec 0%, #e9d5a8 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.eyebrow, .platform-home-main .eyebrow, .guide-hero .eyebrow { color: var(--gold-400) !important; }
.page-description, .guide-hero p, .section-description, .hero-copy p { color: var(--text-secondary) !important; }

/* Platform cards and controls */
.platform-home-main .category-list,
.category-list,
.platform-filters,
.search-wrap {
  border-color: var(--border-soft) !important;
  background: rgba(23, 19, 19, .88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 12px 24px rgba(0, 0, 0, .18) !important;
}
.platform-home-main .category-card,
.category-card { color: var(--text-secondary) !important; }
.platform-home-main .category-card:hover,
.platform-home-main .category-card.is-active,
.category-card:hover,
.category-card.is-active {
  color: var(--text-primary) !important;
  border-color: var(--border-highlight) !important;
  background: linear-gradient(135deg, rgba(113, 21, 37, .42), rgba(42, 11, 16, .66)) !important;
  box-shadow: inset 0 1px 0 rgba(232, 211, 162, .06) !important;
}
.platform-home-main .category-icon { background: #241d1d !important; color: var(--gold-400) !important; }
.platform-home-main .platform-card,
.platform-card,
.platform-small,
.app-card,
.guide-card,
.guide-content,
.card {
  border-color: var(--border-soft) !important;
  background: linear-gradient(145deg, rgba(31, 25, 25, .96), rgba(17, 14, 14, .98)) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}
.platform-home-main .platform-card:hover,
.platform-card:hover,
.platform-small:hover,
.app-card:hover,
.guide-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border-highlight) !important;
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(232, 211, 162, .05) !important;
}
.platform-home-main .platform-card-top { border-color: var(--border-soft) !important; background: linear-gradient(120deg, rgba(71, 20, 29, .45), rgba(25, 18, 18, .50)) !important; }
.platform-home-main .platform-logo,
.logo-box { border-color: rgba(255, 255, 255, .06) !important; background: linear-gradient(145deg, #241d1d, #100d0d) !important; box-shadow: 0 0 16px rgba(201, 163, 91, .06), inset 0 1px 0 rgba(255, 255, 255, .04) !important; }
.platform-home-main .platform-logo:hover { transform: scale(1.025); }
.platform-home-main .platform-group, .platform-home-main .data-label, .platform-home-main .notice { color: var(--text-secondary) !important; }
.platform-home-main .data-block, .platform-home-main .notice { border-color: var(--border-soft) !important; background: rgba(11, 9, 9, .42) !important; }
.platform-home-main .platform-tag { border-color: rgba(148, 30, 49, .38) !important; color: #e8bcc3 !important; background: rgba(148, 30, 49, .12) !important; }
.platform-home-main .rebate { border-color: rgba(148, 30, 49, .38) !important; color: #e8bcc3 !important; background: rgba(148, 30, 49, .12) !important; }
.platform-home-main .recommendation { border: 0 !important; color: #1a1310 !important; background: linear-gradient(135deg, #b78d43, #d5b56d) !important; box-shadow: 0 0 0 3px rgba(201, 163, 91, .08) !important; animation: none !important; }
.platform-home-main .notice svg, .platform-home-main .search-icon { color: var(--gold-400) !important; }
.platform-home-main .card-action,
.btn-primary,
.button-primary { border-color: rgba(216, 184, 115, .20) !important; color: #fff7ed !important; background: linear-gradient(135deg, #861a2d, #55101c) !important; box-shadow: none !important; }
.platform-home-main .card-action:hover,
.btn-primary:hover,
.button-primary:hover { border-color: var(--gold-400) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(232, 211, 162, .20) !important; }
.platform-home-main .card-action.backup { background: #2a2221 !important; color: var(--text-secondary) !important; border-color: var(--border-medium) !important; }
.platform-home-main .card-action.download { background: linear-gradient(135deg, #5f3f1b, #3b2410) !important; border-color: rgba(216, 184, 115, .35) !important; }

/* Platform directory: reserve a real column for the logo before its text. */
.platform-header { position: relative; }
.platform-card-top {
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 22px !important;
}
.platform-logo {
  width: 128px !important;
  height: 128px !important;
}
.platform-info { min-width: 0; }

@media (min-width: 768px) {
  .platform-top-nav {
    position: absolute;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
  }
}

/* Guides and application surfaces */
.guide-page { --guide-bg: var(--bg-main); --guide-panel: var(--surface-1); --guide-card: var(--surface-2); --guide-card-2: var(--surface-3); --guide-purple: var(--wine-600); --guide-yellow: var(--gold-400); --guide-white: var(--text-primary); --guide-muted: var(--text-secondary); --guide-dim: var(--text-muted); --guide-border: var(--border-soft); }
.guide-page .guide-mark { background: linear-gradient(145deg, var(--wine-800), #171010) !important; }
.guide-page .guide-hero, .guide-page .guide-card { border-color: var(--border-soft) !important; }
.guide-page .guide-content, .guide-page .source-gallery figure { background: var(--surface-1) !important; border-color: var(--border-soft) !important; }

/* Chat: VIP service badge and panel */
.chat-widget-launcher, .chat-fab {
  background-color: var(--wine-700) !important;
  background-image: none !important;
  border: 2px solid var(--gold-400) !important;
  box-shadow: 0 0 0 4px rgba(201, 163, 91, .08), 0 8px 26px rgba(0, 0, 0, .35) !important;
}
.chat-widget-launcher::after, .chat-fab::after { content: "VIP"; color: var(--gold-300); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-widget-panel, .chat-panel {
  color: var(--text-primary) !important;
  background: var(--surface-1) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-hover) !important;
}
.chat-widget-header, .chat-header { background: linear-gradient(135deg, var(--wine-800), #1a1111) !important; border-color: var(--border-soft) !important; }
.chat-widget-header h3, .chat-widget-welcome strong, .chat-header strong { color: var(--text-primary) !important; }
.chat-widget-welcome, .chat-widget-nickname-form label, .chat-header small { color: var(--text-secondary) !important; }
.chat-widget-footer, .chat-widget-nickname-form { background: #130f0f !important; border-color: var(--border-soft) !important; }
.chat-widget-nickname-row input, .chat-widget-input, .chat-input-row input { color: var(--text-primary) !important; background: #20191a !important; border-color: var(--border-medium) !important; }
.chat-widget-panel .chat-widget-nickname-row button, .chat-widget-panel .chat-widget-send, .chat-input-row button { background: linear-gradient(135deg, #861a2d, #55101c) !important; border-color: rgba(216, 184, 115, .25) !important; }
.chat-widget-panel .chat-msg.visitor, .chat-message.visitor { background: linear-gradient(135deg, #861a2d, #55101c) !important; border-color: rgba(216, 184, 115, .18) !important; }
.chat-widget-panel .chat-msg.agent, .chat-message.agent { color: var(--text-primary) !important; background: #292021 !important; border-color: var(--border-soft) !important; }

/* Health monitor */
body:has(.health-page) { background: radial-gradient(circle at 18% 12%, rgba(120, 25, 42, .22), transparent 32%), linear-gradient(145deg, #090707, #120a0c 45%, #080707) !important; }
.video-backdrop { background: #0b0909 !important; }
.video-backdrop video { filter: sepia(.25) saturate(.55) brightness(.38) !important; }
.health-card { --ink: var(--text-primary); --muted: var(--text-secondary); --mint: var(--gold-400); --panel: rgba(23, 19, 19, .88); --line: var(--border-medium); border-color: var(--border-medium) !important; border-radius: 18px !important; box-shadow: var(--shadow-hover) !important; }
.health-orbit { border-color: rgba(216, 184, 115, .58) !important; background: radial-gradient(circle at 45% 38%, rgba(201, 163, 91, .28), rgba(84, 16, 28, .22) 48%, rgba(14, 10, 10, .22) 72%) !important; box-shadow: 0 0 0 1px rgba(201, 163, 91, .08), inset 0 0 22px rgba(113, 21, 37, .18) !important; }
.orbit-ring-one { border-top-color: var(--gold-300) !important; }
.orbit-dot { background: var(--gold-300) !important; box-shadow: 0 0 12px rgba(216, 184, 115, .55) !important; }
.action-button { border-color: var(--border-medium) !important; background: linear-gradient(135deg, rgba(84, 16, 28, .90), rgba(30, 15, 17, .96)) !important; }
.action-button:hover { border-color: var(--gold-400) !important; }

/* Admin retains its functionality while using the same lounge palette. */
body:has(.admin-app), body:has(.login-view) { --ink: var(--text-primary); --muted: var(--text-secondary); --line: var(--border-soft); --canvas: var(--bg-secondary); --navy: #160d0f; --violet: var(--gold-400); --violet-deep: var(--wine-600); color: var(--text-primary) !important; }
.login-view { background: radial-gradient(circle at 70% 20%, rgba(201, 163, 91, .10), transparent 30%), linear-gradient(145deg, #2a0b10, #0b0909) !important; }
.login-card, .stats-summary > div, .stats-trends > section { color: var(--text-primary) !important; background: var(--surface-1) !important; border-color: var(--border-soft) !important; }
.sidebar { background: linear-gradient(180deg, #220b10, #100b0c) !important; }
.nav-button.active, .nav-button:hover { background: rgba(113, 21, 37, .48) !important; }
.notice, .view-actions { color: var(--text-secondary) !important; background: rgba(84, 16, 28, .20) !important; border-color: rgba(148, 30, 49, .30) !important; }

@media (max-width: 700px) {
  .platform-card-top {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .platform-logo {
    width: 72px !important;
    height: 72px !important;
    padding: 5px !important;
  }

  .hero-banner {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .platform-home-main .category-list { background: rgba(23, 19, 19, .94) !important; border-color: var(--border-soft) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, .24) !important; }
  .platform-home-main .platform-list { gap: 8px !important; }
}

/* Light Luxury: warm pearl, champagne, and khaki-gold final visual layer. */
:root {
  --bg-main: #f8f4ed;
  --bg-secondary: #f2ebe1;
  --bg-elevated: #fffdfa;
  --surface-1: #fffdfa;
  --surface-2: #f8f1e8;
  --surface-3: #f2e7da;
  --wine-900: #5d4a36;
  --wine-800: #7d6242;
  --wine-700: #a77e49;
  --wine-600: #b8925d;
  --wine-500: #cfad79;
  --gold-500: #b88b57;
  --gold-400: #c9a46f;
  --gold-300: #e6cfaa;
  --text-primary: #3f3733;
  --text-secondary: #766b63;
  --text-muted: #9c9087;
  --border-soft: rgba(176, 139, 94, .20);
  --border-medium: rgba(176, 139, 94, .32);
  --border-highlight: rgba(167, 126, 73, .48);
  --primary: var(--wine-700);
  --primary-dark: #846239;
  --primary-light: #f2e2c3;
  --secondary: var(--gold-500);
  --secondary-dark: #967044;
  --gold: var(--gold-500);
  --gold-dark: #967044;
  --gold-light: #f2e1be;
  --white: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-dim: var(--text-muted);
  --line: var(--border-soft);
  --gradient-brand: linear-gradient(135deg, #d5b984 0%, #ad864f 100%);
  --shadow-glow: 0 14px 34px rgba(145, 111, 63, .13);
  --shadow-hover: 0 20px 42px rgba(121, 91, 71, .16), 0 2px 7px rgba(121, 91, 71, .07);
}

html, body {
  color: var(--text-primary) !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(232, 202, 169, .44), transparent 36%),
    radial-gradient(ellipse at 94% 16%, rgba(224, 205, 170, .25), transparent 31%),
    linear-gradient(135deg, #fffdf9 0%, #f7f1e9 47%, #f2eae0 100%) !important;
}

body::before {
  opacity: .32 !important;
  background-image:
    radial-gradient(circle, rgba(184, 139, 87, .25) 0 1px, transparent 1.5px),
    linear-gradient(125deg, transparent 49.8%, rgba(201, 164, 111, .10) 50%, transparent 50.2%) !important;
}

.brandbar, .platform-header, .guide-header {
  border-color: rgba(184, 139, 87, .23) !important;
}

.brandbar {
  background: rgba(255, 253, 249, .92) !important;
  box-shadow: 0 8px 22px rgba(121, 91, 71, .08) !important;
}

.site-nav a, .platform-nav a, .guide-nav a {
  color: #766b63 !important;
}

.site-nav a:hover, .platform-nav a:hover, .guide-nav a:hover, .guide-nav a.active {
  color: #805f40 !important;
  border-color: rgba(184, 139, 87, .26) !important;
  background: rgba(255, 253, 249, .78) !important;
}

.hero-banner, .hero-art, .guide-hero, .page-hero, .home-top-video::after {
  background:
    radial-gradient(circle at 77% 35%, rgba(231, 197, 143, .32), transparent 30%),
    radial-gradient(circle at 20% 87%, rgba(222, 198, 162, .18), transparent 34%),
    linear-gradient(125deg, #fffefa 0%, #f5eadc 51%, #ead8c4 100%) !important;
}

.hero-art {
  border-color: rgba(184, 139, 87, .30) !important;
  box-shadow: 0 18px 42px rgba(121, 91, 71, .14) !important;
}

.home-slide {
  background: #f2e6d9 !important;
  filter: grayscale(.48) sepia(.34) saturate(.62) brightness(1.11) contrast(.91) !important;
}

.home-carousel::after {
  background: linear-gradient(90deg, rgba(255, 253, 249, .06), rgba(255, 249, 241, .04) 55%, rgba(120, 84, 61, .15)) !important;
}

.hero-layout.fade.delay-1 {
  opacity: 1 !important;
  animation: none !important;
}

.hero-art, .home-carousel {
  background: linear-gradient(125deg, #fffefa 0%, #f6eadc 56%, #ecd8c4 100%) !important;
}

.home-slide {
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.home-slide.is-active { opacity: 1 !important; }

.home-carousel::after {
  background: transparent !important;
}

.hero-copy h1, .page-title, .guide-hero h1, .section-title, .platform-name, .guide-content h1, .guide-content h2 {
  color: #3f3733 !important;
  text-shadow: none !important;
}

.hero-copy h1, .guide-hero h1 {
  background: none !important;
  -webkit-text-fill-color: #3f3733 !important;
}

.eyebrow, .platform-home-main .eyebrow, .guide-hero .eyebrow { color: #a67852 !important; }
.page-description, .guide-hero p, .section-description, .hero-copy p { color: #766b63 !important; }

.hero-button, .btn-primary, .button-primary, .platform-home-main .card-action.official {
  color: #fffdfa !important;
  border-color: rgba(167, 126, 73, .30) !important;
  background: linear-gradient(135deg, #d5b984 0%, #ad864f 100%) !important;
  box-shadow: 0 9px 20px rgba(145, 111, 63, .20) !important;
}

.hero-button:hover, .btn-primary:hover, .button-primary:hover, .platform-home-main .card-action.official:hover {
  box-shadow: 0 12px 25px rgba(145, 111, 63, .28), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

.platform-home-main .platform-card, .platform-card, .platform-small, .app-card, .guide-card, .guide-content, .card {
  color: var(--text-primary) !important;
  border-color: rgba(184, 139, 87, .24) !important;
  background: linear-gradient(145deg, rgba(255, 254, 251, .98), rgba(248, 241, 232, .96)) !important;
  box-shadow: 0 12px 30px rgba(121, 91, 71, .11), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

.platform-home-main .platform-card:hover, .platform-card:hover, .platform-small:hover, .app-card:hover, .guide-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(167, 126, 73, .52) !important;
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

.platform-home-main .platform-card-top {
  border-color: rgba(184, 139, 87, .16) !important;
  background: linear-gradient(110deg, #fffdf8 0%, #f7ebda 100%) !important;
}

.platform-home-main .platform-logo, .platform-logo, .logo-box {
  border-color: rgba(184, 139, 87, .29) !important;
  background: linear-gradient(145deg, #fffefa, #f2e4d0) !important;
  box-shadow: 0 7px 18px rgba(129, 95, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

.platform-home-main .platform-logo:hover { transform: scale(1.025); }
.platform-home-main .platform-group, .platform-home-main .data-label, .platform-home-main .notice { color: #857970 !important; }

.platform-home-main .recommendation {
  border: 1px solid rgba(184, 139, 87, .32) !important;
  color: #6d5134 !important;
  background: linear-gradient(135deg, #f4e5c8, #e8c994) !important;
  box-shadow: 0 0 0 3px rgba(201, 164, 111, .10) !important;
}

.platform-home-main .rebate, .platform-home-main .platform-tag {
  border-color: rgba(184, 144, 89, .30) !important;
  color: #80613a !important;
  background: #f6e8d0 !important;
}

.platform-home-main .card-action, .platform-home-main .card-action.backup {
  color: #6f5d52 !important;
  border-color: rgba(184, 139, 87, .35) !important;
  background: #fffdf9 !important;
  box-shadow: 0 5px 13px rgba(121, 91, 71, .06) !important;
}

.platform-home-main .card-action.download {
  color: #765936 !important;
  border-color: rgba(184, 139, 87, .34) !important;
  background: linear-gradient(135deg, #f6e8cd, #e5c98e) !important;
}

.platform-home-main .card-action:hover {
  border-color: rgba(167, 126, 73, .52) !important;
  box-shadow: 0 9px 18px rgba(121, 91, 71, .13), inset 0 1px 0 #fff !important;
}

.platform-home-main .section-heading {
  padding-left: 15px;
  border-left: 3px solid #cfaa79;
}

.platform-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 88% 3%, rgba(231, 191, 157, .30), transparent 31%),
    radial-gradient(ellipse at 4% 42%, rgba(234, 216, 187, .24), transparent 34%),
    #f8f4ed !important;
}

.platform-page .platform-main {
  min-height: calc(100vh - 72px);
  border-top: 1px solid rgba(184, 139, 87, .14);
  background:
    linear-gradient(115deg, rgba(255, 253, 249, .94), rgba(247, 238, 228, .84)) !important;
  box-shadow: inset 0 18px 34px rgba(201, 164, 111, .05);
}

.platform-page .platform-card { border-radius: 14px !important; }
.platform-page .platform-logo { border-radius: 10px !important; }

.platform-page .recommendation {
  border: 1px solid rgba(184, 139, 87, .32) !important;
  border-radius: 999px !important;
  color: #6d5134 !important;
  background: linear-gradient(135deg, #f4e5c8, #e8c994) !important;
  box-shadow: 0 0 0 3px rgba(201, 164, 111, .10) !important;
}

.platform-page .card-action.official {
  color: #fffdfa !important;
  border-color: rgba(167, 126, 73, .30) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #d5b984 0%, #ad864f 100%) !important;
  box-shadow: 0 9px 20px rgba(145, 111, 63, .20) !important;
}

.platform-page .card-action.backup {
  color: #6f5d52 !important;
  border-color: rgba(184, 139, 87, .35) !important;
  border-radius: 8px !important;
  background: #fffdf9 !important;
  box-shadow: 0 5px 13px rgba(121, 91, 71, .06) !important;
}

.platform-page .card-action.download {
  color: #765936 !important;
  border-color: rgba(184, 139, 87, .34) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #f6e8cd, #e5c98e) !important;
  box-shadow: 0 5px 13px rgba(121, 91, 71, .06) !important;
}

.platform-home-main .category-list, .category-list, .platform-filters, .search-wrap {
  border-color: rgba(184, 139, 87, .22) !important;
  background: rgba(255, 253, 249, .80) !important;
  box-shadow: 0 10px 24px rgba(121, 91, 71, .08) !important;
}

.platform-home-main .category-card { color: #766b63 !important; }
.platform-home-main .category-card:hover, .platform-home-main .category-card.is-active {
  color: #604c3b !important;
  border-color: rgba(184, 139, 87, .30) !important;
  background: linear-gradient(135deg, #f8eadc, #f1dfc0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}

.chat-widget-launcher, .chat-fab {
  background-color: #fffdfa !important;
  background-image: none !important;
  border: 2px solid #c9a46f !important;
  box-shadow: 0 0 0 5px rgba(201, 164, 111, .12), 0 10px 24px rgba(121, 91, 71, .17) !important;
}

.chat-widget-launcher::after, .chat-fab::after { color: #8a6541 !important; }
.chat-widget-launcher svg, .chat-fab svg { color: #a77e49 !important; }

.chat-widget-panel, .chat-panel {
  color: var(--text-primary) !important;
  background: #fffdfa !important;
  border-color: rgba(184, 139, 87, .28) !important;
  box-shadow: var(--shadow-hover) !important;
}

.chat-widget-header, .chat-header {
  background: linear-gradient(135deg, #f3e4cc, #ecd8b8) !important;
  border-color: rgba(184, 139, 87, .20) !important;
}

.chat-widget-header h3, .chat-widget-welcome strong, .chat-header strong { color: #4a3b34 !important; }
.chat-widget-welcome, .chat-widget-nickname-form label, .chat-header small { color: #766b63 !important; }
.chat-widget-footer, .chat-widget-nickname-form { background: #faf4ec !important; border-color: rgba(184, 139, 87, .18) !important; }
.chat-widget-nickname-row input, .chat-widget-input, .chat-input-row input { color: #4a3b34 !important; background: #fffdfa !important; border-color: rgba(184, 139, 87, .28) !important; }
.chat-widget-panel .chat-widget-nickname-row button, .chat-widget-panel .chat-widget-send, .chat-input-row button, .chat-widget-panel .chat-msg.visitor, .chat-message.visitor { background: linear-gradient(135deg, #d5b984, #ad864f) !important; border-color: rgba(167, 126, 73, .30) !important; }
.chat-widget-panel .chat-msg.agent, .chat-message.agent { color: #4a3b34 !important; background: #f4ebe1 !important; border-color: rgba(184, 139, 87, .18) !important; }

/* Keep the homepage directory independent from the legacy graphite card skin. */
#platform-list .platform-card {
  color: #443b34 !important;
  border: 1px solid #e6d6bd !important;
  background: #fffdfa !important;
  box-shadow: 0 10px 26px rgba(104, 82, 57, .10), inset 0 1px 0 #fff !important;
}

#platform-list .platform-card-top {
  border-bottom-color: #eadcc8 !important;
  background: linear-gradient(112deg, #fffefa 0%, #f6ead7 100%) !important;
}

#platform-list .platform-logo {
  border-color: #dfc79f !important;
  background: #fffefa !important;
  box-shadow: 0 6px 15px rgba(104, 82, 57, .10), inset 0 1px 0 #fff !important;
}

#platform-list .platform-group { color: #847568 !important; }
#platform-list .platform-name { color: #443b34 !important; }

#platform-list .recommendation {
  border-color: #dfc18b !important;
  color: #72552f !important;
  background: #f7e8c8 !important;
  box-shadow: none !important;
  animation: none !important;
}

#platform-list .rebate {
  border-color: #b9d6c2 !important;
  color: #557765 !important;
  background: #e6f1e8 !important;
}

#platform-list .card-actions {
  border-top: 1px solid #f0e5d5 !important;
  background: #fffdfa !important;
}

@media (max-width: 700px) {
  #platform-list .card-actions {
    border-top: 0 !important;
  }
}

/* Neutral service-directory system: quiet UI lets platform logos carry the color. */
body:has(.platform-home-main) {
  --bg-main: #F6F7F9;
  --bg-soft: #F1F3F5;
  --surface: #FFFFFF;
  --surface-soft: #FAFBFC;
  --primary: #66758A;
  --primary-hover: #58677B;
  --accent-soft: #EEF3F7;
  --text-primary: #282D33;
  --text-secondary: #66707A;
  --text-muted: #929BA4;
  --border: #E3E7EB;
  --border-strong: #D5DAE0;
  --tag-bg: #F0F4F7;
  --tag-text: #627181;
  --tag-border: #DCE4EA;
  background:
    linear-gradient(rgba(246, 247, 249, .35), rgba(246, 247, 249, .35)),
    url("../img/cr9-background-desktop.png?v=iceblue-refinement-20260819") center center / cover fixed no-repeat !important;
}

.platform-home-main {
  color: var(--text-primary) !important;
}

.platform-home-main .section-title,
#platform-list .platform-name {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

.platform-home-main .section-description,
.platform-home-main .platform-group {
  color: var(--text-muted) !important;
}

.platform-home-main .section-heading {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.platform-home-main .eyebrow {
  color: var(--primary) !important;
}

.platform-home-main .category-list,
.platform-home-main .search-wrap {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 42, .04) !important;
}

.platform-home-main .category-card {
  color: var(--text-secondary) !important;
}

.platform-home-main .category-card:hover,
.platform-home-main .category-card.is-active {
  color: var(--primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
}

.platform-home-main .category-icon,
.platform-home-main .search-icon {
  color: var(--primary) !important;
  background: var(--accent-soft) !important;
}

.platform-home-main .platform-search {
  color: var(--text-primary) !important;
}

.platform-home-main .platform-search::placeholder {
  color: var(--text-muted) !important;
}

#platform-list .platform-card {
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 42, .05) !important;
}

#platform-list .platform-card:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 12px 30px rgba(23, 32, 42, .07) !important;
}

#platform-list .platform-card-top,
#platform-list .card-actions {
  background: transparent !important;
}

#platform-list .platform-card-top {
  border-bottom-color: var(--border) !important;
}

#platform-list .platform-logo {
  border-color: var(--border) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(23, 32, 42, .04) !important;
}

#platform-list .recommendation {
  border: 1px solid var(--tag-border) !important;
  border-radius: 7px !important;
  color: var(--tag-text) !important;
  background: var(--tag-bg) !important;
  box-shadow: none !important;
}

#platform-list .rebate,
#platform-list .platform-tag {
  border: 1px solid #DCE5EC !important;
  border-radius: 7px !important;
  color: #617284 !important;
  background: var(--accent-soft) !important;
}

#platform-list .card-actions {
  border-top-color: var(--border) !important;
}

#platform-list .card-action,
#platform-list .card-action.backup {
  border: 1px solid #DDE2E7 !important;
  border-radius: 9px !important;
  color: #4F5963 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

#platform-list .card-action.official {
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  background: var(--primary) !important;
  box-shadow: none !important;
}

#platform-list .card-action.download {
  border: 1px solid #DCE5EC !important;
  border-radius: 9px !important;
  color: #586879 !important;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
}

#platform-list .card-action:hover {
  border-color: var(--border-strong) !important;
  box-shadow: 0 4px 12px rgba(23, 32, 42, .06) !important;
}

#platform-list .card-action.official:hover {
  border-color: var(--primary-hover) !important;
  background: var(--primary-hover) !important;
}

@media (max-width: 700px) {
  body:has(.platform-home-main) {
    background:
      linear-gradient(rgba(246, 247, 249, .35), rgba(246, 247, 249, .35)),
      url("../img/cr9-background-mobile.png?v=iceblue-refinement-20260819") center top / cover scroll no-repeat !important;
  }

  #platform-list .card-actions {
    border-top: 0 !important;
  }
}

#platform-list .card-action,
#platform-list .card-action.backup {
  color: #695847 !important;
  border-color: #dec9a8 !important;
  background: #fffaf3 !important;
  box-shadow: 0 3px 9px rgba(104, 82, 57, .07) !important;
}

#platform-list .card-action.official {
  color: #fffdf8 !important;
  border-color: #b78b52 !important;
  background: linear-gradient(135deg, #cfad79, #aa7b40) !important;
  box-shadow: 0 5px 12px rgba(139, 102, 51, .18) !important;
}

#platform-list .card-action.download {
  color: #6c5632 !important;
  border-color: #ddbf83 !important;
  background: #f4dfb4 !important;
  box-shadow: 0 3px 9px rgba(129, 96, 46, .10) !important;
}

#platform-list .platform-card:hover {
  border-color: #cfad79 !important;
  background: #fffefa !important;
  box-shadow: 0 15px 30px rgba(104, 82, 57, .15), inset 0 1px 0 #fff !important;
}

/* Responsive site background: supplied desktop artwork and portrait mobile artwork. */
html,
body {
  background: #f8f4ed url("../img/cr9-background-desktop.png?v=iceblue-refinement-20260819") center center / cover fixed no-repeat !important;
}

body::before {
  display: none !important;
}

body:has(.health-page) .video-backdrop {
  background: transparent !important;
}

body:has(.health-page) .video-backdrop video {
  display: none !important;
}

/* Let the homepage header sit directly on the page artwork. */
.brandbar.fade {
  isolation: isolate !important;
  z-index: 1000 !important;
  background: #fffdfa !important;
  border-bottom-color: rgba(184, 139, 87, .24) !important;
  box-shadow: 0 0 0 100vmax #fffdfa, 0 2px 12px rgba(121, 91, 71, .08) !important;
  clip-path: inset(0 -100vmax) !important;
}

@media (min-width: 701px) {
  .brandbar.fade {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 700px) {
  .brandbar.fade {
    position: relative !important;
  }

  .brandbar.fade .mobile-nav-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html,
  body {
    background: #f8f4ed url("../img/cr9-background-mobile.png?v=iceblue-refinement-20260819") center top / cover scroll no-repeat !important;
  }

  .platform-home-main .category-list { background: rgba(255, 253, 249, .94) !important; border-color: rgba(184, 139, 87, .22) !important; box-shadow: 0 12px 24px rgba(121, 91, 71, .10) !important; }

  .mobile-nav-toggle {
    border-color: rgba(184, 139, 87, .45) !important;
    background: #fffdfa !important;
    box-shadow: 0 5px 14px rgba(121, 91, 71, .12) !important;
  }

  .mobile-nav-toggle span { background: #2f2925 !important; }

  .site-nav.is-open {
    border-color: rgba(184, 139, 87, .40) !important;
    background: linear-gradient(145deg, #fffefa, #f6ede2) !important;
    box-shadow: 0 16px 34px rgba(121, 91, 71, .18) !important;
  }

  .site-nav.is-open a {
    color: #24201d !important;
    border-color: transparent !important;
  }

  .site-nav.is-open a + a { border-top-color: rgba(112, 92, 71, .16) !important; }

  .site-nav.is-open a:hover,
  .site-nav.is-open a:focus-visible {
    color: #241d18 !important;
    background: #f2dfc3 !important;
  }
}

/* Final authority for the neutral platform-directory visual system. */
body:has(.platform-home-main) .brandbar.fade {
  background: #FFFFFF !important;
  border-bottom-color: #E3E7EB !important;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 2px 12px rgba(23, 32, 42, .04) !important;
}

body:has(.platform-home-main) .platform-home-main .category-list {
  border-color: #E3E7EB !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 42, .04) !important;
}

body:has(.platform-home-main) #platform-list .platform-card {
  border-color: #E3E7EB !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 42, .05) !important;
}

body:has(.platform-home-main) #platform-list .platform-card:hover {
  border-color: #D5DAE0 !important;
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 12px 30px rgba(23, 32, 42, .07) !important;
}

body:has(.platform-home-main) #platform-list .card-action,
body:has(.platform-home-main) #platform-list .card-action.backup {
  border-color: #DDE2E7 !important;
  color: #4F5963 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

body:has(.platform-home-main) #platform-list .card-action.official {
  border-color: #66758A !important;
  color: #FFFFFF !important;
  background: #66758A !important;
  box-shadow: none !important;
}

body:has(.platform-home-main) #platform-list .card-action.official:hover {
  border-color: #58677B !important;
  background: #58677B !important;
}

body:has(.platform-home-main) #platform-list .card-action.download {
  border-color: #DCE5EC !important;
  color: #586879 !important;
  background: #EEF3F7 !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  body:has(.platform-home-main) .mobile-nav-toggle {
    border-color: #D5DAE0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(23, 32, 42, .05) !important;
  }

  body:has(.platform-home-main) .site-nav.is-open {
    border-color: #E3E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 28px rgba(23, 32, 42, .08) !important;
  }

  body:has(.platform-home-main) .site-nav.is-open a:hover,
  body:has(.platform-home-main) .site-nav.is-open a:focus-visible {
    color: #58677B !important;
    background: #EEF3F7 !important;
  }
}

/* Global ice-blue boutique system. This final layer overrides legacy wine and gold skins. */
:root {
  --bg-main: #F5F9FC;
  --bg-secondary: #EEF5FA;
  --bg-tertiary: #E8F1F7;
  --surface-main: #FFFFFF;
  --surface-soft: #F8FBFD;
  --surface-blue: #F0F6FA;
  --surface-hover: #F3F8FC;
  --primary: #3D6F9E;
  --primary-hover: #345F89;
  --primary-active: #2C5277;
  --primary-dark: #345F89;
  --primary-light: #EAF3F9;
  --secondary: #6F94B4;
  --secondary-hover: #6186A7;
  --blue-soft: #EAF3F9;
  --blue-soft-hover: #DFEDF6;
  --blue-pale: #F2F7FB;
  --text-primary: #263746;
  --text-secondary: #607384;
  --text-muted: #91A1AF;
  --text-blue: #456C8D;
  --border: #DCE7EF;
  --border-soft: #E8EFF4;
  --border-strong: #C8D9E5;
  --border-medium: #DCE7EF;
  --border-highlight: #AFC8DA;
  --shadow-xs: 0 1px 3px rgba(40, 78, 108, .04);
  --shadow-sm: 0 4px 12px rgba(40, 78, 108, .055);
  --shadow-md: 0 8px 24px rgba(40, 78, 108, .07);
  --shadow-lg: 0 16px 40px rgba(40, 78, 108, .09);
  --white: #FFFFFF;
  --muted: #607384;
  --muted-dim: #91A1AF;
  --line: #DCE7EF;
  --gradient-brand: none;
  --shadow-glow: var(--shadow-sm);
  --shadow-hover: 0 12px 30px rgba(40, 78, 108, .09);
}

html,
body {
  color: var(--text-primary) !important;
  background-color: rgba(245, 249, 252, .72) !important;
  background-blend-mode: screen !important;
}

body::before { display: none !important; }

.brandbar,
.brandbar.fade,
.platform-header,
.guide-header {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(210, 224, 234, .75) !important;
  box-shadow: 0 2px 12px rgba(40, 78, 108, .04) !important;
  backdrop-filter: blur(16px) !important;
}

.brandbar.fade {
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .82), 0 2px 12px rgba(40, 78, 108, .04) !important;
}

.site-nav a,
.platform-nav a,
.guide-nav a {
  color: var(--text-secondary) !important;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active,
.platform-nav a:hover,
.platform-nav a.active,
.guide-nav a:hover,
.guide-nav a.active {
  color: var(--primary) !important;
  background: var(--blue-soft) !important;
  border-color: #BFD4E3 !important;
}

.hero-banner,
.hero-art,
.guide-hero,
.page-hero,
.home-top-video::after,
.home-carousel::after {
  background: transparent !important;
}

.hero-copy h1,
.page-title,
.guide-hero h1,
.section-title,
.platform-name,
.guide-content h1,
.guide-content h2,
h1,
h2,
h3 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

.page-description,
.section-description,
.hero-copy p,
.platform-group,
.data-label,
.notice,
small {
  color: var(--text-muted) !important;
}

.platform-card,
.platform-small,
.app-card,
.guide-card,
.guide-content,
.card,
.modal,
[role="dialog"],
.dropdown-menu,
.dropdown-content {
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 6px 20px rgba(40, 78, 108, .055) !important;
}

.platform-card:hover,
.platform-small:hover,
.app-card:hover,
.guide-card:hover,
.card:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(40, 78, 108, .09) !important;
}

.platform-card-top,
.card-actions,
.platform-home-main .platform-card-top,
.platform-home-main .card-actions {
  background: var(--surface-soft) !important;
  border-color: var(--border-soft) !important;
}

.platform-logo,
.logo-box,
.brand-mark,
.guide-mark,
.brand-mark img {
  border: 1px solid #D8E4EC !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(35, 65, 90, .05) !important;
}

.recommendation,
.recommend-tag {
  border: 1px solid #D7E4ED !important;
  border-radius: 999px !important;
  color: #587791 !important;
  background: #EFF5F9 !important;
  box-shadow: none !important;
}

.rebate,
.platform-tag,
.tag,
.badge {
  border: 1px solid #D4E4EF !important;
  border-radius: 7px !important;
  color: #567A98 !important;
  background: #EDF5FA !important;
  box-shadow: none !important;
}

.card-action,
.btn-secondary,
.button-secondary {
  border: 1px solid #CFDDE7 !important;
  border-radius: 9px !important;
  color: #506779 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.card-action.official,
.card-action.primary,
.btn-primary,
.button-primary,
.hero-button,
.primary-button {
  border: 1px solid var(--primary) !important;
  border-radius: 9px !important;
  color: #FFFFFF !important;
  background: var(--primary) !important;
  box-shadow: 0 3px 8px rgba(61, 111, 158, .14) !important;
}

.card-action.download,
.btn-soft,
.button-soft {
  border: 1px solid #D3E3EE !important;
  border-radius: 9px !important;
  color: #4F7492 !important;
  background: var(--blue-soft) !important;
  box-shadow: none !important;
}

.card-action:hover,
.btn-secondary:hover,
.button-secondary:hover {
  border-color: #BFD2E0 !important;
  color: #3D6789 !important;
  background: #F4F8FB !important;
}

.card-action.official:hover,
.card-action.primary:hover,
.btn-primary:hover,
.button-primary:hover,
.hero-button:hover,
.primary-button:hover {
  border-color: var(--primary-hover) !important;
  background: var(--primary-hover) !important;
}

.card-action.official:active,
.card-action.primary:active,
.btn-primary:active,
.button-primary:active,
.hero-button:active,
.primary-button:active {
  border-color: var(--primary-active) !important;
  background: var(--primary-active) !important;
}

.card-action.download:hover,
.btn-soft:hover,
.button-soft:hover {
  border-color: #C4D9E7 !important;
  background: var(--blue-soft-hover) !important;
}

input,
select,
textarea,
.input {
  color: var(--text-primary) !important;
  border: 1px solid #D8E4EC !important;
  border-radius: 9px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus {
  outline: none !important;
  border-color: #91B3CD !important;
  box-shadow: 0 0 0 3px rgba(111, 148, 180, .12) !important;
}

::placeholder { color: var(--text-muted) !important; }

.modal,
[role="dialog"] { box-shadow: 0 24px 70px rgba(32, 63, 88, .14) !important; }
.modal-backdrop,
.overlay,
[data-overlay] { background: rgba(39, 60, 77, .20) !important; }

.tooltip,
[role="tooltip"] {
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  background: #456C8D !important;
  box-shadow: var(--shadow-sm) !important;
}

.pagination a,
.pagination button,
.page-link {
  color: #718493 !important;
  border: 1px solid #DEE8EF !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
}

.pagination .active,
.pagination [aria-current="page"],
.page-link.active {
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

.chat-widget-panel,
.chat-panel {
  color: var(--text-primary) !important;
  border-color: #DDE8EF !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 70px rgba(32, 63, 88, .14) !important;
}

.chat-widget-header,
.chat-header,
.chat-widget-footer,
.chat-widget-nickname-form {
  border-color: var(--border-soft) !important;
  background: var(--surface-blue) !important;
}

.chat-widget-launcher,
.chat-fab {
  border-color: #BFD4E3 !important;
  background: #FFFFFF !important;
  box-shadow: var(--shadow-md) !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F6F9; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: #BCD0DE; }
::-webkit-scrollbar-thumb:hover { background: #9EBACD; }

@media (max-width: 700px) {
  .site-nav.is-open {
    border-color: var(--border) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--shadow-lg) !important;
  }

  .mobile-nav-toggle {
    border-color: #D8E4EC !important;
    background: #FFFFFF !important;
    box-shadow: var(--shadow-xs) !important;
  }

  .mobile-nav-toggle span { background: var(--text-primary) !important; }
}

/* Homepage final color authority: must remain after legacy embedded platform skins. */
body#top .platform-home-main,
body#top .platform-home-main .section-title {
  color: #263746 !important;
}

body#top #platform-list .platform-card {
  border: 1px solid #DCE7EF !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 6px 20px rgba(40, 78, 108, .055) !important;
}

body#top #platform-list .platform-card:hover {
  border-color: #C8D9E5 !important;
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 30px rgba(40, 78, 108, .09) !important;
}

body#top #platform-list .platform-card-top {
  border-bottom-color: #E8EFF4 !important;
  background: #FFFFFF !important;
}

body#top #platform-list .platform-logo {
  border-color: #D8E4EC !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(35, 65, 90, .05) !important;
}

body#top #platform-list .platform-name { color: #263746 !important; }
body#top #platform-list .platform-group { color: #91A1AF !important; }

body#top #platform-list .recommendation {
  border-color: #D7E4ED !important;
  border-radius: 999px !important;
  color: #587791 !important;
  background: #EFF5F9 !important;
}

body#top #platform-list .rebate,
body#top #platform-list .platform-tag {
  border-color: #D4E4EF !important;
  border-radius: 7px !important;
  color: #567A98 !important;
  background: #EDF5FA !important;
}

body#top #platform-list .card-actions {
  border-top-color: #E8EFF4 !important;
  background: #F8FBFD !important;
}

body#top #platform-list .card-action.official {
  border-color: #3D6F9E !important;
  color: #FFFFFF !important;
  background: #3D6F9E !important;
  box-shadow: 0 3px 8px rgba(61, 111, 158, .14) !important;
}

body#top #platform-list .card-action.backup {
  border-color: #CFDDE7 !important;
  color: #506779 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

body#top #platform-list .card-action.download {
  border-color: #D3E3EE !important;
  color: #4F7492 !important;
  background: #EAF3F9 !important;
  box-shadow: none !important;
}

body#top #platform-list .card-action.official:hover {
  border-color: #345F89 !important;
  background: #345F89 !important;
}

@media (max-width: 700px) {
  body#top #platform-list .card-actions { border-top: 0 !important; }
}

/* Platform-page navigation uses .nav-toggle rather than the homepage toggle. */
@media (max-width: 767px) {
  .platform-header {
    position: relative !important;
    display: flex !important;
    min-height: 62px !important;
    padding-right: 48px !important;
  }

  .platform-header .nav-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 3 !important;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border-color: #D8E4EC !important;
    color: #263746 !important;
    background: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(35, 65, 90, .05) !important;
  }

  .platform-header .platform-nav {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: none !important;
    margin: 0 !important;
    padding: 8px 12px 14px !important;
    border: 1px solid #DCE7EF !important;
    border-radius: 0 0 12px 12px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 12px 30px rgba(40, 78, 108, .09) !important;
  }

  .platform-header .platform-nav.is-open { display: grid !important; }

  .platform-header .platform-nav a {
    padding: 12px 10px !important;
    border-radius: 8px !important;
    color: #607384 !important;
  }

  .platform-header .platform-nav a:hover,
  .platform-header .platform-nav a:focus-visible {
    color: #3D6F9E !important;
    background: #EAF3F9 !important;
  }
}

/* Platform pages retain legacy gold skins, so keep this final layer page-scoped. */
body[data-platform-page] .platform-page {
  background: #F5F9FC !important;
}

body[data-platform-page] .platform-main {
  border-top-color: #E8EFF4 !important;
  background: rgba(248, 251, 253, .82) !important;
  box-shadow: none !important;
}

body[data-platform-page] #platform-list .platform-card {
  border-color: #DCE7EF !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 6px 20px rgba(40, 78, 108, .055) !important;
}

body[data-platform-page] #platform-list .platform-card:hover {
  border-color: #C8D9E5 !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 30px rgba(40, 78, 108, .09) !important;
}

body[data-platform-page] #platform-list .platform-card-top {
  border-bottom-color: #E8EFF4 !important;
  background: #FFFFFF !important;
}

body[data-platform-page] #platform-list .platform-logo {
  border-color: #D8E4EC !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(35, 65, 90, .05) !important;
}

body[data-platform-page] #platform-list .platform-name { color: #263746 !important; }
body[data-platform-page] #platform-list .platform-group { color: #91A1AF !important; }

body[data-platform-page] #platform-list .recommendation {
  border-color: #D7E4ED !important;
  color: #587791 !important;
  background: #EFF5F9 !important;
  box-shadow: none !important;
}

body[data-platform-page] #platform-list .rebate {
  border-color: #D4E4EF !important;
  color: #567A98 !important;
  background: #EDF5FA !important;
}

body[data-platform-page] #platform-list .card-actions {
  border-top-color: #E8EFF4 !important;
  background: #F8FBFD !important;
}

body[data-platform-page] #platform-list .card-action.official {
  border-color: #3D6F9E !important;
  color: #FFFFFF !important;
  background: #3D6F9E !important;
  box-shadow: 0 3px 8px rgba(61, 111, 158, .14) !important;
}

body[data-platform-page] #platform-list .card-action.backup {
  border-color: #CFDDE7 !important;
  color: #506779 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

body[data-platform-page] #platform-list .card-action.download {
  border-color: #D3E3EE !important;
  color: #4F7492 !important;
  background: #EAF3F9 !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  body[data-platform-page] .platform-header {
    position: relative !important;
  }

  body[data-platform-page] .platform-header .platform-nav {
    position: absolute !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* The platform directory now shares the homepage navigation component. */
@media (max-width: 700px) {
  body[data-platform-page] .platform-header.brandbar {
    min-height: 72px !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
  }

  body[data-platform-page] .platform-header.brandbar .mobile-nav-toggle {
    display: grid !important;
  }
}

/* Match the homepage header geometry without importing homepage-only page styles. */
body[data-platform-page] .home-brand-image {
  display: flex !important;
  width: 200px !important;
  height: 72px !important;
  overflow: hidden !important;
  background: url("../img/cr9-brand.png") center / contain no-repeat !important;
}

body[data-platform-page] .home-brand-image img { display: none !important; }

@media (min-width: 701px) {
  body[data-platform-page] .platform-header.brandbar {
    min-height: 96px !important;
  }

  body[data-platform-page] .platform-header.brandbar .site-nav {
    position: absolute !important;
    left: 50% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  body[data-platform-page] .platform-header.brandbar .site-nav a {
    padding: 8px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 700px) {
  body[data-platform-page] .home-brand-image {
    width: 136px !important;
    height: 54px !important;
    background: none !important;
  }

  body[data-platform-page] .home-brand-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: translateY(-6px) !important;
  }

  body[data-platform-page] .platform-header.brandbar .site-nav {
    top: 78px !important;
  }
}

/* Homepage download cards and service launcher retain older dark skin rules. */
body#top .home-download-card {
  border-color: #D5E3EC !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #263746 !important;
  box-shadow: 0 4px 12px rgba(40, 78, 108, .06) !important;
}

body#top .home-download-card span {
  color: #6F8494 !important;
}

body#top .home-download-card strong {
  color: #365D7C !important;
}

body#top .home-download-card em {
  color: #3D6F9E !important;
}

body#top .home-download-card:hover {
  border-color: #BFD4E3 !important;
  background: #F5FAFD !important;
  box-shadow: 0 8px 18px rgba(40, 78, 108, .10) !important;
}

body#top .chat-widget-launcher {
  background-color: transparent !important;
  background-image: url("../img/chat-launcher.gif") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-color: #D8E4EC !important;
  box-shadow: 0 8px 22px rgba(40, 78, 108, .16) !important;
}

body#top .chat-widget-launcher svg,
body#top .chat-widget-launcher::after { display: none !important; }

/* Keep every homepage information card within the same ice-blue visual family. */
body#top #platform-list .platform-card,
body#top .home-download-card,
body#top .home-channel-card,
body#top .platform-small,
body#top .app-card {
  border-color: #C9DDE9 !important;
  background: #EAF3F9 !important;
  box-shadow: 0 5px 16px rgba(40, 78, 108, .07) !important;
}

body#top #platform-list .platform-card-top,
body#top #platform-list .card-actions {
  background: #F4F9FC !important;
}

body#top #platform-list .platform-card:hover,
body#top .home-download-card:hover,
body#top .home-channel-card:hover,
body#top .platform-small:hover,
body#top .app-card:hover {
  border-color: #AFC9DB !important;
  background: #DDEDF6 !important;
  box-shadow: 0 10px 24px rgba(40, 78, 108, .11) !important;
}

/* Shared homepage-style header: deep blue on desktop and mobile. */
body:has(.platform-home-main) .brandbar.fade,
body[data-platform-page] .brandbar.fade {
  background: #123B5D !important;
  border-bottom-color: #285878 !important;
  box-shadow: 0 0 0 100vmax #123B5D, 0 3px 14px rgba(13, 43, 68, .22) !important;
  backdrop-filter: none !important;
}

body:has(.platform-home-main) .brandbar.fade .site-nav a,
body[data-platform-page] .brandbar.fade .site-nav a {
  color: #DCEBF5 !important;
}

body:has(.platform-home-main) .brandbar.fade .site-nav a:hover,
body:has(.platform-home-main) .brandbar.fade .site-nav a:focus-visible,
body:has(.platform-home-main) .brandbar.fade .site-nav a.active,
body[data-platform-page] .brandbar.fade .site-nav a:hover,
body[data-platform-page] .brandbar.fade .site-nav a:focus-visible,
body[data-platform-page] .brandbar.fade .site-nav a.active {
  border-color: rgba(220, 235, 245, .28) !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, .13) !important;
}

@media (max-width: 700px) {
  body:has(.platform-home-main) .brandbar.fade .mobile-nav-toggle,
  body[data-platform-page] .brandbar.fade .mobile-nav-toggle {
    border-color: rgba(220, 235, 245, .42) !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
  }

  body:has(.platform-home-main) .brandbar.fade .mobile-nav-toggle span,
  body[data-platform-page] .brandbar.fade .mobile-nav-toggle span {
    background: #FFFFFF !important;
  }

  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open,
  body[data-platform-page] .brandbar.fade .site-nav.is-open {
    border-color: #2C6388 !important;
    background: #123B5D !important;
    box-shadow: 0 14px 30px rgba(13, 43, 68, .28) !important;
  }

  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open a,
  body[data-platform-page] .brandbar.fade .site-nav.is-open a {
    color: #E6F1F8 !important;
  }

  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open a + a,
  body[data-platform-page] .brandbar.fade .site-nav.is-open a + a {
    border-top-color: rgba(220, 235, 245, .18) !important;
  }

  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open a:hover,
  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open a:focus-visible,
  body[data-platform-page] .brandbar.fade .site-nav.is-open a:hover,
  body[data-platform-page] .brandbar.fade .site-nav.is-open a:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .13) !important;
  }
}

/* Homepage platform directory: restrained pearl, graphite, and sage palette. */
body#top {
  --page-bg: #F4F6F2;
  --page-bg-soft: #EEF2EE;
  --surface: #FFFFFF;
  --surface-soft: #F8FAF7;
  --surface-hover: #F5F8F5;
  --primary: #627C70;
  --primary-hover: #536C61;
  --primary-active: #475E54;
  --accent-soft: #EAF0EC;
  --accent-muted: #DCE7E0;
  --text-primary: #28312D;
  --text-secondary: #69746E;
  --text-muted: #98A19C;
  --border: #E0E7E2;
  --border-strong: #CBD7D0;
  --shadow-sm: 0 3px 10px rgba(39, 55, 47, .045);
  --shadow-md: 0 8px 24px rgba(39, 55, 47, .065);
  --shadow-lg: 0 16px 36px rgba(39, 55, 47, .085);
  color: var(--text-primary) !important;
  background-color: var(--page-bg) !important;
  background-image: linear-gradient(rgba(248, 250, 247, .86), rgba(248, 250, 247, .86)), url("../img/cr9-background-desktop.png?v=iceblue-refinement-20260819") !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
}

body#top .platform-home-host,
body#top .platform-home-main,
body#top .platform-home-main #platform-list {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

body#top .platform-home-main .section-title {
  color: #28312D !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

body#top .platform-home-main .section-description {
  color: #8C9992 !important;
}

body#top #platform-list .platform-list {
  gap: 14px !important;
}

body#top #platform-list .platform-card {
  overflow: hidden !important;
  border: 1px solid #E0E7E2 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 5px 18px rgba(39, 55, 47, .055) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body#top #platform-list .platform-card:hover {
  transform: translateY(-2px) !important;
  border-color: #CBD7D0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(39, 55, 47, .08) !important;
}

body#top #platform-list .platform-card-top {
  padding: 14px !important;
  border-bottom: 1px solid #EEF2EE !important;
  background: #FFFFFF !important;
}

body#top #platform-list .platform-logo {
  border: 1px solid #E3E9E5 !important;
  border-radius: 11px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(39, 55, 47, .045) !important;
}

body#top #platform-list .platform-name {
  color: #28312D !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body#top #platform-list .platform-group {
  color: #98A19C !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body#top #platform-list .recommendation,
body#top #platform-list .rebate,
body#top #platform-list .platform-tag {
  border: 1px solid #D9E4DD !important;
  border-radius: 6px !important;
  color: #667B70 !important;
  background: #EEF3EF !important;
  box-shadow: none !important;
}

body#top #platform-list .card-actions {
  gap: 6px !important;
  padding: 10px 12px 12px !important;
  border-top: 0 !important;
  background: #F8FAF7 !important;
}

body#top #platform-list .card-action {
  min-height: 36px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease !important;
}

body#top #platform-list .card-action.official {
  border-color: #627C70 !important;
  color: #FFFFFF !important;
  background: #627C70 !important;
  box-shadow: 0 2px 6px rgba(71, 94, 84, .12) !important;
}

body#top #platform-list .card-action.official:hover { background: #536C61 !important; }
body#top #platform-list .card-action.official:active { background: #475E54 !important; transform: scale(.98) !important; }

body#top #platform-list .card-action.backup {
  border-color: #D8E1DB !important;
  color: #5F6C65 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

body#top #platform-list .card-action.backup:hover {
  border-color: #C4D1C9 !important;
  background: #F6F8F6 !important;
}

body#top #platform-list .card-action.download {
  border-color: #DCE5DF !important;
  color: #607269 !important;
  background: #EDF2EE !important;
  box-shadow: none !important;
}

body#top #platform-list .card-action.download:hover { background: #E4EBE6 !important; }

@media (max-width: 700px) {
  body#top {
    background-image: linear-gradient(rgba(248, 250, 247, .86), rgba(248, 250, 247, .86)), url("../img/cr9-background-mobile.png?v=iceblue-refinement-20260819") !important;
    background-attachment: scroll, scroll !important;
  }

  body#top .page {
    width: 100% !important;
    max-width: 100% !important;
  }

  body#top .platform-home-host {
    padding: 0 12px 20px !important;
  }

  body#top #platform-list .platform-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }

  body#top #platform-list .platform-card {
    min-height: 178px !important;
  }

  body#top #platform-list .platform-card-top {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 112px !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body#top #platform-list .platform-logo {
    width: 58px !important;
    height: 58px !important;
    padding: 4px !important;
  }

  body#top #platform-list .platform-name-row {
    margin-top: 6px !important;
  }

  body#top #platform-list .platform-name {
    font-size: 16px !important;
  }

  body#top #platform-list .rebate {
    display: inline-flex !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  body#top #platform-list .recommendation { display: none !important; }

  body#top #platform-list .card-actions {
    gap: 5px !important;
    padding: 10px !important;
  }

  body#top #platform-list .card-action {
    min-height: 36px !important;
    padding: 5px 2px !important;
    font-size: 11px !important;
  }

  body#top #platform-list .platform-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 146px !important;
  }

  body#top #platform-list .platform-card:last-child:nth-child(odd) .platform-card-top {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    min-height: 94px !important;
  }

  body#top #platform-list .platform-card:last-child:nth-child(odd) .platform-logo {
    width: 70px !important;
    height: 70px !important;
  }
}

/* Final global authority: glacier-blue boutique UI, preserving existing layout and behavior. */
:root {
  --bg-main: #F4F8FB;
  --bg-secondary: #EDF4F8;
  --bg-soft: #F8FBFD;
  --surface: #FFFFFF;
  --surface-soft: #F7FAFC;
  --surface-blue: #EAF3F8;
  --primary: #4C7FA8;
  --primary-hover: #3D6B91;
  --primary-active: #335B7C;
  --primary-soft: #E9F2F7;
  --primary-soft-hover: #DFEBF2;
  --text-primary: #263A4A;
  --text-secondary: #718595;
  --text-muted: #9AABB7;
  --text-accent: #476F8D;
  --border: #D9E6EE;
  --border-soft: #E7EFF4;
  --border-strong: #C7D9E5;
  --shadow-xs: 0 2px 6px rgba(42, 74, 98, .035);
  --shadow-sm: 0 5px 16px rgba(42, 74, 98, .055);
  --shadow-md: 0 10px 28px rgba(42, 74, 98, .075);
  --shadow-lg: 0 16px 36px rgba(42, 74, 98, .09);
  --bg-page: var(--bg-main);
  --bg-white: var(--surface);
  --bg-warm: var(--bg-secondary);
  --bg-blue-soft: var(--surface-blue);
  --bg-green-soft: var(--surface-soft);
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-soft);
  --text-heading: var(--text-primary);
  --color-bg-main: var(--bg-main);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-section: var(--bg-soft);
  --color-bg-card: var(--surface);
  --color-bg-card-hover: var(--surface-soft);
  --color-primary: var(--primary);
  --color-primary-light: var(--primary-hover);
  --color-secondary: var(--text-accent);
  --color-accent: var(--text-accent);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border);
  --color-border-hover: var(--border-strong);
  --gold: var(--primary);
  --gold-dark: var(--primary-active);
  --gold-light: var(--primary-soft);
  --gold-500: var(--primary);
  --gold-400: var(--text-accent);
  --gold-300: var(--primary-soft);
  --secondary: var(--text-accent);
  --secondary-dark: var(--primary-active);
  --white: #FFFFFF;
  --muted: var(--text-secondary);
  --muted-dim: var(--text-muted);
  --line: var(--border);
  --gradient-brand: none;
  --shadow-glow: var(--shadow-sm);
  --shadow-hover: var(--shadow-md);
}

html,
body {
  color: var(--text-primary) !important;
  background-color: #F4F8FB !important;
  background-blend-mode: screen !important;
}

body:not(#top):not([data-platform-page]) {
  background-image: linear-gradient(rgba(244, 248, 251, .72), rgba(244, 248, 251, .72)) !important;
}

body::before { display: none !important; }

.brandbar,
.brandbar.fade,
.platform-header,
.guide-header,
body:has(.platform-home-main) .brandbar.fade,
body[data-platform-page] .brandbar.fade {
  background: linear-gradient(180deg, #213B4F 0%, #162B3C 100%) !important;
  border-color: #34556D !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 5px 16px rgba(14, 31, 43, .24) !important;
  backdrop-filter: none !important;
}

.brandbar.fade,
body:has(.platform-home-main) .brandbar.fade,
body[data-platform-page] .brandbar.fade {
  box-shadow: 0 0 0 100vmax #162B3C, 0 1px 0 rgba(255, 255, 255, .07) inset, 0 5px 16px rgba(14, 31, 43, .24) !important;
}

.site-nav a,
.platform-nav a,
.guide-nav a {
  color: var(--text-secondary) !important;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active,
.platform-nav a:hover,
.platform-nav a:focus-visible,
.platform-nav a.active,
.guide-nav a:hover,
.guide-nav a:focus-visible,
.guide-nav a.active {
  border-color: #BFD4E2 !important;
  color: #426F91 !important;
  background: #EAF3F8 !important;
  box-shadow: 0 2px 7px rgba(71, 111, 141, .07) !important;
}

.brandbar.fade .site-nav a,
.brandbar.fade .site-nav a:hover,
.brandbar.fade .site-nav a:focus-visible,
.brandbar.fade .site-nav a.active {
  color: #F7FBFD !important;
}

body:has(.platform-home-main) .brandbar.fade .site-nav a,
body:has(.platform-home-main) .brandbar.fade .site-nav a:hover,
body:has(.platform-home-main) .brandbar.fade .site-nav a:focus-visible,
body:has(.platform-home-main) .brandbar.fade .site-nav a.active,
body[data-platform-page] .brandbar.fade .site-nav a,
body[data-platform-page] .brandbar.fade .site-nav a:hover,
body[data-platform-page] .brandbar.fade .site-nav a:focus-visible,
body[data-platform-page] .brandbar.fade .site-nav a.active {
  color: #F7FBFD !important;
}

.brandbar.fade .site-nav a:hover,
.brandbar.fade .site-nav a:focus-visible,
.brandbar.fade .site-nav a.active,
body:has(.platform-home-main) .brandbar.fade .site-nav a:hover,
body:has(.platform-home-main) .brandbar.fade .site-nav a:focus-visible,
body:has(.platform-home-main) .brandbar.fade .site-nav a.active,
body[data-platform-page] .brandbar.fade .site-nav a:hover,
body[data-platform-page] .brandbar.fade .site-nav a:focus-visible,
body[data-platform-page] .brandbar.fade .site-nav a.active {
  border-color: rgba(174, 205, 224, .34) !important;
  color: #FFFFFF !important;
  background: rgba(126, 169, 196, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.hero-banner,
.hero-art,
.guide-hero,
.page-hero,
.home-top-video::after,
.home-carousel::after { background: transparent !important; }

.hero-copy h1,
.page-title,
.guide-hero h1,
.section-title,
.platform-name,
.guide-content h1,
.guide-content h2,
h1,
h2,
h3 {
  color: #263A4A !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.page-description,
.section-description,
.hero-copy p,
.platform-group,
.data-label,
.notice,
small { color: #8294A2 !important; }

.platform-card,
.platform-small,
.app-card,
.home-channel-card,
.home-download-card,
.guide-card,
.guide-content,
.card,
.modal,
[role="dialog"],
.dropdown-menu,
.dropdown-content,
.chat-widget-panel {
  color: var(--text-primary) !important;
  border: 1px solid #D9E6EE !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--shadow-sm) !important;
}

.platform-card:hover,
.platform-small:hover,
.app-card:hover,
.home-channel-card:hover,
.home-download-card:hover,
.guide-card:hover,
.card:hover {
  border-color: #C7D9E5 !important;
  background: #FFFFFF !important;
  box-shadow: var(--shadow-md) !important;
}

.platform-card-top,
.card-actions,
.platform-home-main .platform-card-top,
.platform-home-main .card-actions {
  border-color: #E7EFF4 !important;
  background: #F7FAFC !important;
}

.platform-logo,
.logo-box,
.brand-mark,
.guide-mark,
.brand-mark img {
  border: 1px solid #D7E4EC !important;
  border-radius: 11px !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 9px rgba(42, 74, 98, .045) !important;
}

.recommendation,
.recommend-tag,
.rebate,
.platform-tag,
.tag,
.badge {
  border: 1px solid #D5E5EE !important;
  border-radius: 7px !important;
  color: #54758D !important;
  background: #EDF5F9 !important;
  box-shadow: none !important;
}

.recommendation,
.recommend-tag,
.badge-recommend {
  border-color: #D8E5EC !important;
  color: #607D92 !important;
  background: #EFF5F8 !important;
}

.card-action,
.button,
button[type="submit"],
.btn-primary,
.primary-button {
  border-color: #4C7FA8 !important;
  color: #FFFFFF !important;
  background: #4C7FA8 !important;
  box-shadow: 0 3px 8px rgba(76, 127, 168, .14) !important;
}

.card-action:hover,
.button:hover,
button[type="submit"]:hover,
.btn-primary:hover,
.primary-button:hover {
  border-color: #3D6B91 !important;
  background: #3D6B91 !important;
}

.card-action:active,
.button:active,
button[type="submit"]:active,
.btn-primary:active,
.primary-button:active { background: #335B7C !important; }

.card-action.backup,
.btn-secondary,
.secondary-button {
  border-color: #D5E2EA !important;
  color: #526B7E !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.card-action.backup:hover,
.btn-secondary:hover,
.secondary-button:hover {
  border-color: #C4D7E3 !important;
  color: #3E6685 !important;
  background: #F5F9FC !important;
}

.card-action.download,
.btn-download,
.download-button {
  border-color: #D4E4ED !important;
  color: #52748E !important;
  background: #EAF3F8 !important;
  box-shadow: none !important;
}

.card-action.download:hover,
.btn-download:hover,
.download-button:hover {
  color: #456986 !important;
  background: #DFEBF2 !important;
}

input,
select,
textarea,
.input {
  border-color: #D7E4EC !important;
  color: #263A4A !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus {
  border-color: #86A9C2 !important;
  box-shadow: 0 0 0 3px rgba(76, 127, 168, .10) !important;
  outline: none !important;
}

.modal-overlay,
.overlay,
[data-overlay] { background: rgba(38, 58, 74, .20) !important; }

.chat-widget-header,
.chat-header,
.chat-widget-footer,
.chat-widget-nickname-form {
  border-color: #E7EFF4 !important;
  background: #F7FAFC !important;
}

.chat-widget-launcher,
.chat-fab {
  border-color: #D7E4EC !important;
  box-shadow: var(--shadow-md) !important;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #EFF5F8; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: #B9CEDC; }
::-webkit-scrollbar-thumb:hover { background: #9EBBCF; }

/* Replace the previous page-specific sage palette while keeping its layout rules. */
body#top,
body[data-platform-page] {
  color: #263A4A !important;
  background-color: #F4F8FB !important;
  background-image: linear-gradient(rgba(246, 247, 249, .35), rgba(246, 247, 249, .35)), url("../img/cr9-background-desktop.png?v=iceblue-refinement-20260819") !important;
  background-blend-mode: normal !important;
}

body#top .platform-home-main .section-title { color: #263A4A !important; }
body#top .platform-home-main .section-description { color: #8294A2 !important; }
body#top #platform-list .platform-card {
  border-color: #D9E6EE !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 6px 18px rgba(42, 74, 98, .055) !important;
}
body#top #platform-list .platform-card:hover {
  border-color: #C7D9E5 !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(42, 74, 98, .075) !important;
}
body#top #platform-list .platform-card-top,
body#top #platform-list .card-actions { border-color: #E7EFF4 !important; background: #F7FAFC !important; }
body#top #platform-list .platform-logo { border-color: #D7E4EC !important; box-shadow: 0 3px 9px rgba(42, 74, 98, .045) !important; }
body#top #platform-list .platform-name { color: #263A4A !important; }
body#top #platform-list .platform-group { color: #8FA0AD !important; }
body#top #platform-list .recommendation,
body#top #platform-list .rebate,
body#top #platform-list .platform-tag { border-color: #D5E5EE !important; color: #54758D !important; background: #EDF5F9 !important; }
body#top #platform-list .card-action.official { border-color: #4C7FA8 !important; background: #4C7FA8 !important; }
body#top #platform-list .card-action.official:hover { border-color: #3D6B91 !important; background: #3D6B91 !important; }
body#top #platform-list .card-action.official:active { background: #335B7C !important; }
body#top #platform-list .card-action.backup { border-color: #D5E2EA !important; color: #526B7E !important; background: #FFFFFF !important; }
body#top #platform-list .card-action.download { border-color: #D4E4ED !important; color: #52748E !important; background: #EAF3F8 !important; }

@media (max-width: 700px) {
  body#top,
  body[data-platform-page] {
    background-image: linear-gradient(rgba(246, 247, 249, .35), rgba(246, 247, 249, .35)), url("../img/cr9-background-mobile.png?v=iceblue-refinement-20260819") !important;
  }

  .brandbar.fade,
  body:has(.platform-home-main) .brandbar.fade,
  body[data-platform-page] .brandbar.fade {
    clip-path: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 5px 16px rgba(14, 31, 43, .24) !important;
  }

  body[data-platform-page] .platform-header.brandbar {
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0 !important;
  }

  .brandbar.fade .mobile-nav-toggle,
  body:has(.platform-home-main) .brandbar.fade .mobile-nav-toggle,
  body[data-platform-page] .brandbar.fade .mobile-nav-toggle {
    border-color: #456B84 !important;
    background: #203B50 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(8, 23, 34, .25) !important;
  }

  .brandbar.fade .mobile-nav-toggle span,
  body:has(.platform-home-main) .brandbar.fade .mobile-nav-toggle span,
  body[data-platform-page] .brandbar.fade .mobile-nav-toggle span { background: #F7FBFD !important; }

  .site-nav.is-open,
  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open,
  body[data-platform-page] .brandbar.fade .site-nav.is-open {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1100 !important;
    border-color: #426780 !important;
    background: linear-gradient(180deg, #28475C 0%, #1B3548 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 30px rgba(8, 23, 34, .32) !important;
  }

  .site-nav.is-open a,
  body:has(.platform-home-main) .brandbar.fade .site-nav.is-open a,
  body[data-platform-page] .brandbar.fade .site-nav.is-open a { color: #F2F8FB !important; }
}

/* cr9 homepage: compact platform directory without hero or download panels. */
body#top .brandbar.fade,
body#top:has(.platform-home-main) .brandbar.fade {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body#top .brandbar.fade .site-nav a,
body#top:has(.platform-home-main) .brandbar.fade .site-nav a {
  color: #31566C !important;
}

body#top .brandbar.fade .site-nav a:hover,
body#top .brandbar.fade .site-nav a:focus-visible,
body#top:has(.platform-home-main) .brandbar.fade .site-nav a:hover,
body#top:has(.platform-home-main) .brandbar.fade .site-nav a:focus-visible {
  color: #1F4962 !important;
  background: rgba(255, 255, 255, .58) !important;
}

@media (min-width: 701px) {
  body#top {
    background-attachment: fixed !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}

@media (min-width: 701px) {
  body#top #platform-list .platform-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  body#top #platform-list .platform-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    align-items: stretch;
  }

  body#top #platform-list .platform-card-top {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 116px !important;
  }

  body#top #platform-list .card-actions {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-left: 1px solid #E1EBF1 !important;
    background: #F7FAFC !important;
  }

  body#top #platform-list .card-action {
    min-height: 0 !important;
    width: 100%;
  }
}

@media (max-width: 700px) {
  body#top {
    padding-bottom: 120px !important;
  }

  body#top #platform-list .platform-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#top #platform-list .platform-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body#top #platform-list .platform-card-top,
  body#top #platform-list .card-actions {
    grid-column: 1 !important;
  }

  body#top #platform-list .card-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    border-left: 0 !important;
  }
}

body#top .chat-widget-launcher {
  background-color: transparent !important;
  background-image: url("../img/cr9-chat-launcher.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Homepage navigation: increase type size only; preserve the existing treatment. */
body#top .site-nav a {
  font-size: 16px !important;
}

@media (max-width: 700px) {
  body#top .site-nav a { font-size: 15px !important; }
}

/* Homepage human-support shortcut: make the action unmistakable. */
body#top .chat-widget-launcher {
  right: 22px !important;
  bottom: 48px !important;
  width: 98px !important;
  height: 98px !important;
  overflow: visible !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 28px rgba(13,43,68,.30) !important;
}

body#top .chat-widget-launcher::after {
  content: "人工客服" !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  display: block !important;
  width: max-content !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #123B5D !important;
  box-shadow: 0 4px 10px rgba(13,43,68,.22) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 700px) {
  body#top .chat-widget-launcher {
    right: 16px !important;
    bottom: 44px !important;
    width: 88px !important;
    height: 88px !important;
  }
}