.showcase-category-shell { --showcase-accent: #0879fb; --showcase-accent-dark: #075fd0; --showcase-icon-bg: #dceeff; --showcase-hero-a: #f2f8ff; --showcase-hero-b: #dcecff; --showcase-hero-c: #a9d1ff; --showcase-ink: #102b56; }
.showcase-theme-green { --showcase-accent: #08a961; --showcase-accent-dark: #087b49; --showcase-icon-bg: #d8f7e7; --showcase-hero-a: #f2fff8; --showcase-hero-b: #dcf8e9; --showcase-hero-c: #9ee1bd; --showcase-ink: #105438; }
.showcase-theme-orange { --showcase-accent: #ef7517; --showcase-accent-dark: #c65308; --showcase-icon-bg: #ffe5ce; --showcase-hero-a: #fff9f1; --showcase-hero-b: #ffebd8; --showcase-hero-c: #ffc58c; --showcase-ink: #673813; }
.showcase-theme-red { --showcase-accent: #ef4a4a; --showcase-accent-dark: #c82935; --showcase-icon-bg: #ffe1e3; --showcase-hero-a: #fff6f6; --showcase-hero-b: #ffe3e5; --showcase-hero-c: #ffadb2; --showcase-ink: #6c2229; }
.showcase-theme-purple { --showcase-accent: #9147df; --showcase-accent-dark: #6e27bd; --showcase-icon-bg: #eedfff; --showcase-hero-a: #fbf7ff; --showcase-hero-b: #eee1ff; --showcase-hero-c: #caa8f2; --showcase-ink: #49226e; }
.showcase-theme-violet { --showcase-accent: #6e4bd8; --showcase-accent-dark: #5030b1; --showcase-icon-bg: #e8e2ff; --showcase-hero-a: #faf8ff; --showcase-hero-b: #e9e4ff; --showcase-hero-c: #bbb0f2; --showcase-ink: #392970; }
.showcase-theme-cyan { --showcase-accent: #078ec2; --showcase-accent-dark: #056b98; --showcase-icon-bg: #dff6ff; --showcase-hero-a: #f2fcff; --showcase-hero-b: #dcf5fb; --showcase-hero-c: #9fdce9; --showcase-ink: #164d61; }
.showcase-theme-coral { --showcase-accent: #ed684b; --showcase-accent-dark: #c84631; --showcase-icon-bg: #ffe3dd; --showcase-hero-a: #fff8f5; --showcase-hero-b: #ffe8df; --showcase-hero-c: #f5b39e; --showcase-ink: #713426; }
.showcase-theme-pink { --showcase-accent: #eb3f78; --showcase-accent-dark: #c5235d; --showcase-icon-bg: #ffdfeb; --showcase-hero-a: #fff7fa; --showcase-hero-b: #ffe4ed; --showcase-hero-c: #f6abc5; --showcase-ink: #70223f; }
.showcase-theme-slate { --showcase-accent: #47617f; --showcase-accent-dark: #30465f; --showcase-icon-bg: #e2e9f1; --showcase-hero-a: #f8fafc; --showcase-hero-b: #e8eef4; --showcase-hero-c: #b8c7d7; --showcase-ink: #273c54; }

.showcase-category-hero { position: relative; min-height: 210px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--showcase-accent) 18%, #dfe7f0); border-radius: 10px; background: radial-gradient(circle at 76% -12%, rgba(255,255,255,.94), transparent 29%), linear-gradient(120deg, var(--showcase-hero-a) 0%, var(--showcase-hero-b) 51%, var(--showcase-hero-c) 100%); }
.showcase-category-hero::before, .showcase-category-hero::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.63); border-radius: 50%; }
.showcase-category-hero::before { width: 290px; height: 290px; right: 17%; top: -220px; }
.showcase-category-hero::after { width: 220px; height: 220px; left: 51%; bottom: -186px; }
.showcase-hero-copy { width: 68%; }
.showcase-category-icon { width: 72px; height: 72px; align-self: start; display: grid; place-items: center; border-radius: 16px; color: var(--showcase-accent); background: var(--showcase-icon-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--showcase-accent) 8%, transparent); }
.showcase-category-icon .sv-icon { width: 40px; height: 40px; stroke-width: 1.9; }
.showcase-category-hero .ai-hero-copy h1 { color: var(--showcase-ink); }
.showcase-category-hero .ai-hero-copy p { color: color-mix(in srgb, var(--showcase-ink) 76%, #718096); }
.showcase-category-hero .ai-new-topic { background: linear-gradient(135deg, var(--showcase-accent), var(--showcase-accent-dark)); box-shadow: 0 7px 15px color-mix(in srgb, var(--showcase-accent) 25%, transparent); }
.showcase-category-hero .ai-hero-stats .sv-icon { color: color-mix(in srgb, var(--showcase-accent) 45%, #65758c); }

.showcase-hero-art { position: absolute; z-index: 3; inset: 0 0 0 62%; overflow: hidden; }
.showcase-orbit { position: absolute; display: block; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; }
.showcase-orbit-one { width: 180px; height: 180px; right: 35px; top: -65px; }
.showcase-orbit-two { width: 105px; height: 105px; left: 28px; bottom: -35px; }
.showcase-ground { position: absolute; width: 270px; height: 105px; right: -22px; bottom: -43px; border-radius: 50%; background: rgba(255,255,255,.42); transform: rotate(-7deg); }
.showcase-main-symbol { position: absolute; z-index: 5; width: 126px; height: 126px; right: 76px; bottom: 20px; display: grid; place-items: center; border: 7px solid rgba(255,255,255,.78); border-radius: 32px; color: #fff; background: linear-gradient(145deg, var(--showcase-accent), var(--showcase-accent-dark)); box-shadow: 0 18px 30px color-mix(in srgb, var(--showcase-accent-dark) 30%, transparent), inset 0 0 25px rgba(255,255,255,.12); transform: rotate(-7deg); }
.showcase-main-symbol::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 21px; }
.showcase-main-symbol .sv-icon { position: relative; z-index: 2; width: 70px; height: 70px; stroke-width: 1.65; }
.showcase-float-card { position: absolute; z-index: 7; width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.88); border-radius: 11px; color: var(--showcase-accent); background: rgba(255,255,255,.82); box-shadow: 0 10px 20px rgba(38,61,89,.13); font-style: normal; backdrop-filter: blur(5px); }
.showcase-float-card .sv-icon { width: 26px; height: 26px; }
.showcase-card-one { left: 9px; top: 40px; transform: rotate(-8deg); }
.showcase-card-two { right: 13px; top: 38px; transform: rotate(8deg); }
.showcase-card-three { right: 9px; bottom: 15px; transform: rotate(-6deg); }
.showcase-hero-notice { position: absolute; z-index: 9; top: 12px; right: 13px; max-width: 260px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.72); border-radius: 7px; color: var(--showcase-ink); background: rgba(255,255,255,.72); box-shadow: 0 6px 15px rgba(32,53,75,.08); font-size: 8px; font-weight: 650; backdrop-filter: blur(5px); }
.showcase-hero-notice .sv-icon { width: 13px; height: 13px; color: var(--showcase-accent); }
.showcase-category-shell .ai-topic-toolbar button.active { border-color: var(--showcase-accent); background: var(--showcase-accent); box-shadow: 0 5px 12px color-mix(in srgb, var(--showcase-accent) 22%, transparent); }
.showcase-category-shell .category-search button { background: var(--showcase-accent); }
.showcase-category-shell .ai-tags > div strong { color: var(--showcase-accent); }

@media (max-width: 1180px) {
  .showcase-hero-copy { width: 74%; }
  .showcase-hero-art { left: 69%; }
  .showcase-main-symbol { right: 45px; }
}

@media (max-width: 680px) {
  .showcase-category-hero { min-height: 360px; }
  .showcase-category-icon { width: 56px; height: 56px; }
  .showcase-category-icon .sv-icon { width: 32px; height: 32px; }
  .showcase-hero-copy { width: 100%; }
  .showcase-hero-art { inset: auto 0 0 31%; height: 155px; }
  .showcase-main-symbol { width: 105px; height: 105px; right: 62px; bottom: 15px; border-width: 5px; border-radius: 27px; }
  .showcase-main-symbol .sv-icon { width: 59px; height: 59px; }
  .showcase-card-one { left: 4px; top: 24px; }
  .showcase-card-two { right: 12px; top: 19px; }
  .showcase-card-three { right: 4px; bottom: 8px; }
  .showcase-hero-notice { top: auto; right: 12px; bottom: 8px; max-width: 220px; }
}