/* Creator Hub Page Specific Styles */
/* Focus: readability, rhythm, subtle motion, accessible contrast */

:root {
  --ch-accent: #6366f1;
  --ch-accent-soft: 99 102 241;
  --ch-cyan: #22d3ee;
  --ch-bg-glass: rgba(255,255,255,0.04);
  --ch-border: rgba(255,255,255,0.09);
  --ch-radius: 1rem;
}

.ch-grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.ch-section { scroll-margin-top: 90px; }

.ch-sticky-toc { top: 6.5rem; }
@media (min-width:1280px){
  .ch-sticky-toc { max-height: calc(100vh - 7rem); overflow:auto; padding-right:.25rem; }
  .ch-sticky-toc::-webkit-scrollbar { width:6px; }
  .ch-sticky-toc::-webkit-scrollbar-track { background:transparent; }
  .ch-sticky-toc::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }
}

@media (max-width: 1024px) { .ch-sticky-toc { display:none; } }

.toc-link { position:relative; display:block; padding:.45rem .75rem .5rem 1rem; font-size: .7rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.42); border-left:2px solid transparent; transition:.25s; font-weight:600; border-radius:.4rem; }
.toc-link:hover, .toc-link:focus { color:#fff; background:rgba(255,255,255,0.03); }
.toc-link[aria-current='true'] { color:#fff; border-left-color:var(--ch-accent); background:rgba(99,102,241,0.12); }

.fade-in { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.4,.8,.3,1); }
.fade-in.is-visible { opacity:1; transform:none; }

/* FAQ accordion */
.faq-item + .faq-item { border-top:1px solid var(--ch-border); }
.faq-button { width:100%; text-align:left; padding:1rem 0; font-weight:600; display:flex; gap:.75rem; align-items:center; }
.faq-button span { flex:1; }
.faq-content { max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-item[open] .faq-content { max-height:320px; }
.faq-icon { width:1rem; height:1rem; position:relative; }
.faq-icon::before, .faq-icon::after { content:""; position:absolute; inset:0; margin:auto; background:currentColor; transition:.35s; }
.faq-icon::before { width:2px; height:100%; }
.faq-icon::after { height:2px; width:100%; }
.faq-item[open] .faq-icon::before { transform:scaleY(0); }

/* Light touch animation for glass hover */
.glass-hover { transition:background .35s, border-color .35s, transform .4s; }
.glass-hover:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); transform:translateY(-3px); }

/* Improve list readability */
.prose-list li { padding-left:.4rem; }

/* Simple utility for gradient text accent */
.text-gradient { background:linear-gradient(90deg,#fff,#9fc5ff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) { .fade-in { transition:none; opacity:1; transform:none; } }