/* ==========================================================================
   Vibe Coding 大赏 · Premium Brand Layer
   Soul: 影展柠光 (Cinema Lime)
   - One accent locked across the whole product
   - light / cyber = day / night of the SAME brand
   - Overrides the multi-theme / multi-accent drift in index_fixed2.css
   ========================================================================== */

/* ---------- Dark / cyber (night gallery) ---------- */
html[data-theme="cyber"],
html:not([data-theme]) {
  --bg: #070a10;
  --panel: #101722;
  --panel-2: #161e2c;
  --line: rgba(237, 242, 246, 0.12);
  --text: #edf2f6;
  --muted: #8b9aab;
  --soft: #657386;
  --teal: #b8f24a;
  --blue: #8b9aab;
  --coral: #ff6b6b;
  --amber: #e2b84a;
  --violet: #8b9aab;
  --ok: #7bc96f;
  --danger: #ff6b6b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --r: 10px;

  --vibe-void: #070a10;
  --vibe-surface: #101722;
  --vibe-raised: #161e2c;
  --vibe-ink: #edf2f6;
  --vibe-muted: #8b9aab;
  --vibe-line: rgba(237, 242, 246, 0.12);
  --vibe-accent: #b8f24a;
  --vibe-accent-hover: #c8ff62;
  --vibe-accent-soft: rgba(184, 242, 74, 0.12);
  --vibe-accent-ring: rgba(184, 242, 74, 0.42);
  --vibe-on-accent: #11190d;
  --vibe-gold: #e2b84a;
  --vibe-topbar: rgba(7, 10, 16, 0.86);
  --vibe-card: #101722;
  --vibe-card-2: #141c2a;
  --vibe-glow: rgba(184, 242, 74, 0.1);
  --vibe-grain: 0.035;
}

/* ---------- Light (day gallery, same hue family) ---------- */
html[data-theme="light"] {
  --bg: #f3f5f0;
  --panel: #ffffff;
  --panel-2: #eef2ea;
  --line: rgba(18, 22, 15, 0.1);
  --text: #12160f;
  --muted: #5c6b5a;
  --soft: #7a8a76;
  --teal: #5a8a12;
  --blue: #5c6b5a;
  --coral: #d64545;
  --amber: #b8891f;
  --violet: #5c6b5a;
  --ok: #3f8f4a;
  --danger: #d64545;
  --shadow: 0 18px 48px rgba(18, 32, 10, 0.08);
  --r: 10px;

  --vibe-void: #f3f5f0;
  --vibe-surface: #ffffff;
  --vibe-raised: #eef2ea;
  --vibe-ink: #12160f;
  --vibe-muted: #5c6b5a;
  --vibe-line: rgba(18, 22, 15, 0.1);
  --vibe-accent: #5a8a12;
  --vibe-accent-hover: #4d780f;
  --vibe-accent-soft: rgba(90, 138, 18, 0.1);
  --vibe-accent-ring: rgba(90, 138, 18, 0.35);
  --vibe-on-accent: #f7ffe8;
  --vibe-gold: #b8891f;
  --vibe-topbar: rgba(243, 245, 240, 0.88);
  --vibe-card: #ffffff;
  --vibe-card-2: #f7faf4;
  --vibe-glow: rgba(90, 138, 18, 0.08);
  --vibe-grain: 0.022;
  /* Deep ink over luminous hero — solid, not washed slate */
  --vibe-hero-ink: #15283c;
  --vibe-hero-muted: rgba(21, 40, 60, 0.78);
}

/* ---------- Page substrate ---------- */
html,
body {
  background: var(--vibe-void) !important;
  color: var(--vibe-ink) !important;
}

body {
  background:
    radial-gradient(ellipse 72% 36% at 50% -8%, var(--vibe-glow), transparent 70%),
    var(--vibe-void) !important;
}

/* Kill multi-color cyber scanlines / rainbow grids from base theme blocks */
body::after {
  display: none !important;
}

/* Fine grain — premium texture without neon gimmicks */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 40 !important;
  pointer-events: none !important;
  opacity: var(--vibe-grain) !important;
  mix-blend-mode: soft-light !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  background-repeat: repeat !important;
  mask-image: none !important;
}

/* ---------- Chrome ---------- */
.topbar {
  background: var(--vibe-topbar) !important;
  border-bottom: 1px solid var(--vibe-line) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
}

.brand-title,
.section-title,
.section-head h2,
.card-title,
h1, h2, h3, h4, h5, h6,
.panel h3,
.challenge h3,
.modal-title,
.drawer-title {
  color: var(--vibe-ink) !important;
  text-shadow: none !important;
}

.brand-title {
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.brand-sub,
.section-desc,
.hero-sub,
.card-desc,
.muted,
.maker-name,
.panel p,
.panel li,
.challenge p,
.cinema-intro,
.home-hero-stats span {
  color: var(--vibe-muted) !important;
}

/* Logo: solid accent block, no rainbow */
.brand-mark {
  background: var(--vibe-accent) !important;
  color: var(--vibe-on-accent) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 22px var(--vibe-accent-soft) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.brand-mark::after {
  display: none !important;
}

.nav button,
.mobile-nav button {
  color: var(--vibe-muted) !important;
  border-color: transparent !important;
  text-transform: none !important;
  background: transparent !important;
}

.nav button:hover,
.nav button.on,
.mobile-nav button:hover,
.mobile-nav button.on {
  color: var(--vibe-ink) !important;
  background: var(--vibe-accent-soft) !important;
  border-color: transparent !important;
}

.icon-btn,
.close {
  background: var(--vibe-raised) !important;
  border: 1px solid var(--vibe-line) !important;
  color: var(--vibe-muted) !important;
  box-shadow: none !important;
}

.icon-btn:hover,
.close:hover {
  color: var(--vibe-ink) !important;
  border-color: var(--vibe-accent-ring) !important;
  box-shadow: none !important;
}

/* ---------- Buttons ---------- */
.btn-primary,
.cinema-actions .btn-primary,
.home-final-cta .btn-primary {
  background: var(--vibe-accent) !important;
  color: var(--vibe-on-accent) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 12px 28px var(--vibe-accent-soft) !important;
  font-weight: 800 !important;
}

.btn-primary:hover,
.cinema-actions .btn-primary:hover,
.home-final-cta .btn-primary:hover {
  background: var(--vibe-accent-hover) !important;
  color: var(--vibe-on-accent) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px var(--vibe-accent-soft) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--vibe-raised) !important;
  color: var(--vibe-ink) !important;
  border: 1px solid var(--vibe-line) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  border-color: var(--vibe-accent-ring) !important;
  color: var(--vibe-ink) !important;
  box-shadow: none !important;
}

.btn-danger {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(255, 107, 107, 0.18) !important;
}

.btn-coral {
  background: rgba(255, 107, 107, 0.1) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 107, 107, 0.28) !important;
}

/* ---------- Surfaces / cards ---------- */
.panel,
.card,
.work-card,
.award-row,
.award-board,
.challenge-detail,
.challenge-lane,
.challenge,
.riser-panel,
.ranking-board,
.creator-card,
.curator-card,
.insight-panel,
.feature-band,
.theme-console,
.about-brief,
.submit-panel,
.modal,
.drawer,
.ranking-hero,
.award-hero,
.challenge-hero,
.creators-hero,
.about-hero-grid,
.ticker-panel,
.award-ticket,
.profile-stat,
.comment,
.review-line,
.signal,
.metric,
.weekly-signal-card,
.home-live-list,
.spotlight-card,
.spotlight-item,
.ai-status-card,
.drawer-card,
.jury-panel,
.award-copy,
.award-flow,
.award-share-lab,
.detail-process-card,
.process-note {
  background: var(--vibe-card) !important;
  border-color: var(--vibe-line) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
  color: var(--vibe-ink) !important;
}

.panel:nth-child(even),
.work-card:nth-child(even),
.creator-card:nth-child(even),
.grid .card:nth-child(even) {
  background: var(--vibe-card-2) !important;
}

.grid .card:hover,
.work-card:hover,
.award-row:hover,
.challenge-card:hover,
.creator-card:hover,
.challenge:hover {
  border-color: var(--vibe-accent-ring) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--vibe-accent-soft) !important;
  transform: translateY(-2px);
}

/* Soften leftover light-theme blue glass panels */
.spotlight-card,
.spotlight-item,
.award-copy,
.theme-console,
.jury-panel,
.award-flow,
.award-share-lab {
  background: var(--vibe-card) !important;
  border-color: var(--vibe-line) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------- Pills / badges / kickers — accent lock ---------- */
.pill,
.select,
.field,
.textarea,
.search {
  background: var(--vibe-raised) !important;
  border-color: var(--vibe-line) !important;
  color: var(--vibe-ink) !important;
  box-shadow: none !important;
}

.pill.on,
.pill:hover {
  background: var(--vibe-accent) !important;
  border-color: var(--vibe-accent) !important;
  color: var(--vibe-on-accent) !important;
  box-shadow: none !important;
}

.badge,
.tag-chip,
.section-kicker,
.eyebrow,
.hero-tag,
.ticket-code {
  background: var(--vibe-accent-soft) !important;
  border: 1px solid var(--vibe-accent-ring) !important;
  color: var(--vibe-accent) !important;
  box-shadow: none !important;
}

/* Collapse rainbow badge family into 2 tones */
.b-teal,
.b-blue,
.b-amber,
.b-violet {
  background: var(--vibe-accent-soft) !important;
  color: var(--vibe-accent) !important;
  border-color: var(--vibe-accent-ring) !important;
}

.b-coral {
  background: rgba(255, 107, 107, 0.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 107, 107, 0.28) !important;
}

.like-btn.liked {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #ff8e8e !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
}

html[data-theme="light"] .like-btn.liked {
  color: #d64545 !important;
}

/* Awards / ranks: gold only */
.award-row .rank,
.award-row .award-rank,
.award-board .rank,
.ranking-board .rank,
.award-badge,
.vibe-badge,
.insight-no,
.insight-value {
  color: var(--vibe-gold) !important;
}

.award-row:first-child,
.award-board .winner,
.ranking-table .rank-1 {
  border-color: rgba(226, 184, 74, 0.42) !important;
}

.success,
.is-success,
.status-approved,
.status-selected {
  color: var(--ok) !important;
}

.danger,
.error,
.status-rejected {
  color: var(--danger) !important;
}

/* ---------- Home cinema hero ---------- */
#page-home {
  color: var(--vibe-ink);
  background:
    radial-gradient(ellipse 72% 38% at 50% -4%, var(--vibe-glow), transparent 72%),
    var(--vibe-void) !important;
}

#page-home .cinema-hero {
  background: var(--vibe-void) !important;
}

html[data-theme="cyber"] #page-home .cinema-media,
html:not([data-theme="light"]) #page-home .cinema-media {
  filter: saturate(0.72) contrast(1.06) brightness(0.72) !important;
}

html[data-theme="cyber"] #page-home .cinema-media::before,
html:not([data-theme="light"]) #page-home .cinema-media::before {
  background: linear-gradient(
    90deg,
    rgba(7, 10, 16, 0.92) 0%,
    rgba(7, 10, 16, 0.7) 42%,
    rgba(7, 10, 16, 0.16) 76%,
    rgba(7, 10, 16, 0.4) 100%
  ) !important;
}

/* Light hero still sits on luminous cyber art — do NOT pour milky beige fog.
   Use cool navy scrim so white type reads, and the scene keeps energy. */
html[data-theme="light"] #page-home .cinema-media {
  filter: saturate(1.02) contrast(1.05) brightness(0.96) !important;
}

html[data-theme="light"] #page-home .cinema-media::before {
  background:
    linear-gradient(
      90deg,
      rgba(8, 16, 32, 0.72) 0%,
      rgba(8, 16, 32, 0.48) 38%,
      rgba(8, 16, 32, 0.12) 68%,
      rgba(8, 16, 32, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 16, 32, 0.18) 0%,
      rgba(8, 16, 32, 0.05) 40%,
      rgba(8, 16, 32, 0.28) 100%
    ) !important;
}

/* Hero type is always bright over the cinema field (light or cyber).
   Dark slate on milky fog was the actual problem — dead, not just "too black". */
#page-home .cinema-title {
  color: #f5f8fc !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  font-weight: 860 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 36px rgba(0, 12, 36, 0.45) !important;
  -webkit-text-fill-color: #f5f8fc !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

#page-home .cinema-intro {
  color: rgba(235, 242, 250, 0.88) !important;
  text-shadow: 0 8px 22px rgba(0, 12, 36, 0.35) !important;
  font-weight: 480 !important;
}

html[data-theme="light"] #page-home .cinema-title,
html[data-theme="cyber"] #page-home .cinema-title,
html:not([data-theme="light"]) #page-home .cinema-title {
  color: #f5f8fc !important;
  font-weight: 860 !important;
  -webkit-text-fill-color: #f5f8fc !important;
  background: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 36px rgba(0, 12, 36, 0.45) !important;
}

html[data-theme="light"] #page-home .cinema-intro,
html[data-theme="cyber"] #page-home .cinema-intro,
html:not([data-theme="light"]) #page-home .cinema-intro {
  color: rgba(235, 242, 250, 0.88) !important;
  text-shadow: 0 8px 22px rgba(0, 12, 36, 0.35) !important;
}

/* Stats chips stay readable over photo */
html[data-theme="light"] #page-home .home-hero-stats div {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
}

html[data-theme="light"] #page-home .home-hero-stats b {
  color: #f5f8fc !important;
}

html[data-theme="light"] #page-home .home-hero-stats span {
  color: rgba(235, 242, 250, 0.78) !important;
}

#page-home .home-hero-stats div {
  background: color-mix(in srgb, var(--vibe-surface) 78%, transparent) !important;
  border-color: var(--vibe-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

#page-home .home-hero-stats b {
  color: var(--vibe-ink) !important;
  text-shadow: none !important;
}

#page-home .section-kicker,
#page-home .ticker-label,
#page-home .home-live-head b {
  color: var(--vibe-accent) !important;
  background: transparent !important;
  border: 0 !important;
}

#page-home .weekly-signal-card,
#page-home .curator-card,
#page-home .insight-panel,
#page-home .award-ticket,
#page-home .ticker-panel,
#page-home .home-live-list {
  background: var(--vibe-card-2) !important;
  border-color: var(--vibe-line) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), var(--shadow) !important;
}

html[data-theme="light"] #page-home .weekly-signal-card,
html[data-theme="light"] #page-home .curator-card,
html[data-theme="light"] #page-home .insight-panel,
html[data-theme="light"] #page-home .award-ticket,
html[data-theme="light"] #page-home .ticker-panel,
html[data-theme="light"] #page-home .home-live-list {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), var(--shadow) !important;
}

#page-home .grid .card,
#page-home .work-card {
  background: var(--vibe-card) !important;
  border-color: var(--vibe-line) !important;
}

#page-home .grid .card:hover,
#page-home .work-card:hover {
  border-color: var(--vibe-accent-ring) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.16) !important;
}

/* ---------- Avatar / accents that used rainbow ---------- */
.avatar {
  background: linear-gradient(135deg, var(--vibe-accent), #d6ff8a) !important;
  color: var(--vibe-on-accent) !important;
}

html[data-theme="light"] .avatar {
  background: linear-gradient(135deg, var(--vibe-accent), #8fbf3a) !important;
  color: var(--vibe-on-accent) !important;
}

.dot {
  background: var(--vibe-accent) !important;
  box-shadow: 0 0 12px var(--vibe-accent-soft) !important;
}

.accent,
.vibe-number {
  color: var(--vibe-accent) !important;
  text-shadow: none !important;
}

/* ---------- Drawer / steam / profile leftovers (blue → brand) ---------- */
.drawer-progress i,
html[data-theme="light"] .drawer-progress i {
  background: linear-gradient(90deg, var(--vibe-accent), var(--vibe-accent-hover)) !important;
}

.drawer-stat em,
.drawer-card-head strong,
.drawer-link span,
.profile-award-download {
  color: var(--vibe-accent) !important;
}

.steam-modal,
.steam-media,
.steam-cover,
.steam-panel {
  border-color: var(--vibe-line) !important;
}

.steam-actions .btn-primary {
  background: var(--vibe-accent) !important;
  color: var(--vibe-on-accent) !important;
  border-color: transparent !important;
}

.steam-actions .btn-secondary,
.steam-comments .btn-secondary {
  background: var(--vibe-raised) !important;
  border-color: var(--vibe-line) !important;
  color: var(--vibe-ink) !important;
}

.steam-title-row h3,
.steam-panel h3,
.steam-comments h3,
.steam-modal .modal-title {
  color: var(--vibe-ink) !important;
}

.steam-desc,
.steam-panel p,
.steam-panel span {
  color: var(--vibe-muted) !important;
}

/* ---------- Focus / a11y ---------- */
:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vibe-accent) !important;
  outline-offset: 3px !important;
}

/* ---------- Modal backdrop ---------- */
.modal-backdrop {
  background: rgba(4, 7, 12, 0.72) !important;
  backdrop-filter: blur(8px);
}

html[data-theme="light"] .modal-backdrop {
  background: rgba(18, 22, 15, 0.42) !important;
}

/* ---------- Decorative section glows from older layers ---------- */
.section::before,
.works-ai-gallery::before,
.creators-section::before,
.ranking-section::before {
  display: none !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before {
    opacity: 0.02 !important;
  }
  .grid .card:hover,
  .work-card:hover,
  .btn-primary:hover,
  .cinema-actions .btn-primary:hover {
    transform: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* ---------- Mobile touch targets for primary CTAs ---------- */
@media (max-width: 900px) {
  #page-home .cinema-actions .btn {
    min-height: 48px !important;
  }
}