/* Chuniao pink identity. Shared by the served site and offline review build.
   Legacy aliases keep CMS-configured components on the same palette. */
:root {
  color-scheme: dark;
  --brand: #ff5b91;
  --brand-hover: #ff80aa;
  --brand-deep: #f52c72;
  --brand-soft: #ffb4ce;
  --brand-ink: #300c1b;
  --brand-tint: #ff5b9114;
  --brand-line: #ff5b9138;
  --brand-gradient: linear-gradient(120deg, #ff80aa, #ff5b91 55%, #f5417e);
  --yellow: var(--brand);
  --member-gold: var(--brand-soft);
  --color-primary: var(--brand);
  --color-primary-rgb: 255, 91, 145;
  --color-primary-grad-end: var(--brand-deep);
  --color-accent-gold: var(--brand-soft);
  --bg: #100c12;
  --card: #1a141d;
  --elevated: #211924;
  --active: #2d202e;
  --muted: #a89eaf;
  --color-bg: var(--bg);
  --color-bg-card: var(--card);
  --color-bg-elevated: var(--elevated);
  --color-text-secondary: var(--muted);
}
::selection { background: #ff5b914d; color: #fff; }
input, select, progress { accent-color: var(--brand); }
.reference-home, .reference-account, .reference-secondary,
.reference-home .channels, .reference-home .channels > button,
.desktop-header { background: var(--bg); }
.desktop-header { border-bottom-color: #ff5b9117; }
.brand { gap: 8px; }
.brand > img { width: 46px; height: 46px; object-fit: contain; filter: none; }
.brand > b { color: var(--brand); font-size: 24px; letter-spacing: .5px; white-space: nowrap; }
#desktop-nav a.active { color: var(--brand); }
.header-search, .reference-home .mobile-search { background: var(--card); border: 1px solid #ffffff0c; }
.header-search:focus-visible, .reference-home .mobile-search:focus-visible { outline-color: var(--brand); }
.reference-home .channel-scroll a.active { color: var(--brand); }
.reference-home .channel-scroll a.active::after { background: var(--brand); }
.reference-home .shortcut .shortcut-art { border-color: var(--brand-line); background: var(--card); }
.reference-home .shortcut:hover .shortcut-art { border-color: var(--brand); }
.reference-home .shortcut:hover em { color: var(--brand-soft); }
.reference-home .announcement { background: var(--card); }
.reference-home .block-header { background: linear-gradient(180deg, #ff5b910d, transparent); }
.reference-home .block-header h2 { color: #f8f0f5; border-left-color: var(--brand); }
.reference-home .block-header > a { color: var(--brand); }
.reference-banner b { color: #fff1f6; }
.reference-banner::after { background: linear-gradient(90deg, #210d1bbc, #0002); }
.primary, .channel-done, .channel-panel .channel-done,
.vip-page .member-open, .vip-page .member-more,
.local-coin-actions [data-coin-confirm], .local-coin-confirm {
  background: var(--brand-gradient);
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 5px 18px #f52c7226;
}
.primary:hover:not(:disabled), .channel-done:hover,
.vip-page .member-open:hover { filter: brightness(1.08); }
.primary:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 3px; }
.secondary:hover { border-color: var(--brand-line); }
#panel.channel-panel, .channel-panel .panel-head { background: #1c161f; }
.channel-chip, .channel-panel .panel-channels button { background: #29212e; }
.channel-chip.is-fixed { background: #241c28; }
.channel-chip .channel-remove { border-color: #1c161f; }
.channel-chip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.channel-section-title button { color: var(--brand-soft); }
.vip-page .vip-tabs a.active { color: var(--brand); background: none; }
.member-user-strip { border-color: var(--brand-line); background: linear-gradient(120deg, #30202d, #1b131e); }
.member-user-strip::before { background: radial-gradient(ellipse at top right, #ff5b911c, transparent 65%); }
.member-user-info p, .privilege-title { color: var(--brand-soft); }
.tier-diamond { border-color: var(--brand); box-shadow: 0 6px 26px #f52c7224; }
.membership-content ul { color: #f2dce6; }
.membership-card h3 em, .membership-bottom b { color: var(--brand-soft); }
.membership-recommend { background: linear-gradient(120deg, #ed3476, #c91858); }
.member-countdown.is-live { background: linear-gradient(100deg, #e82d70, #c91858); animation: none; box-shadow: 0 3px 12px #f52c7233; }
.replica-profile .profile-switch-entry { color: var(--brand); border-color: var(--brand-line); background: var(--brand-tint); }
.replica-profile .rebate-banner { background: linear-gradient(110deg, #ed3476, #bb205b); box-shadow: 0 6px 18px #f52c7224; }
.replica-profile .rebate-btn { color: #b51e52; }
.replica-profile .coin-wallet { --gold-rgb: 255, 91, 145; }
.replica-profile .trio-row { background: linear-gradient(180deg, #ff5b910d, transparent), var(--card); border-color: var(--brand-line); }
.ref-menu-icon { background: #ff5b910c; }
.ref-avatar-letter { background: #32202d; color: var(--brand-soft); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--brand); }
.site-footer a:focus-visible { outline-color: var(--brand); }
.download-hero .app-mark { background: radial-gradient(circle, #ff5b911a, transparent 70%); border-color: var(--brand-line); }
.download-hero .app-mark img { object-fit: contain; width: 96px; height: 96px; }
.regional-page { --local-pink: var(--brand); --local-deep: #c91e57; --local-soft: var(--brand-soft); }
@media (max-width: 900px) {
  .reference-home .mobile-header { gap: 10px; }
  .reference-home .mobile-header .brand { gap: 6px; }
  .reference-home .mobile-header .brand img { width: 33px; height: 38px; }
  .reference-home .mobile-header .brand b { font-size: 16px; letter-spacing: 0; }
  .reference-home .mobile-search { min-width: 0; font-size: 11px; }
  #bottom-nav, .reference-account #bottom-nav, .reference-home #bottom-nav {
    background: #130e17f5;
    border-top: 1px solid #ff5b911c;
    backdrop-filter: blur(20px);
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
  }
  #bottom-nav a.active, .reference-account #bottom-nav a.active,
  .reference-home #bottom-nav a.active { color: var(--brand); }
  #bottom-nav a.active .nav-reference-icon { filter: drop-shadow(0 2px 7px #ff5b9140); }
}
@media (max-width: 359px) {
  .reference-home .mobile-header { padding-inline: 12px; gap: 8px; }
  .reference-home .mobile-header .brand b { font-size: 14px; }
  .reference-home .mobile-header .brand img { width: 27px; height: 32px; }
}