.hc-narrow { max-width: 820px; }
.hc [hidden] { display: none !important; }

.hc-tint-violet  { background: var(--color-violet-100);  color: var(--color-violet-700); }
.hc-tint-teal    { background: var(--color-teal-100);    color: var(--color-teal-700); }
.hc-tint-blue    { background: var(--color-blue-100);    color: var(--color-blue-700); }
.hc-tint-emerald { background: var(--color-emerald-100); color: var(--color-emerald-700); }
.hc-tint-amber   { background: var(--color-amber-100);   color: var(--color-amber-600); }

.hc-hero {
  padding: 72px 0 40px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(50% 70% at 90% 10%, rgba(20, 184, 166, 0.08), transparent 70%);
}
.hc-hero-inner { max-width: 760px; margin-inline: auto; }
.hc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 14px 0 14px;
  text-wrap: balance;
}
.hc-hero .lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-body); margin: 0 auto var(--space-8); max-width: 600px; }
.hc-hint { margin: var(--space-4) 0 0; font-size: var(--fs-body-sm); color: var(--fg-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.hc-hint a { color: var(--color-violet-700); text-decoration: underline; text-underline-offset: 3px; }
.hc-hint a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

.hc-search {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 640px; margin: 0 auto;
  padding: 6px 6px 6px 52px;
  min-height: 60px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.hc-search:focus-within { border-color: var(--color-violet-400); box-shadow: var(--shadow-lg), var(--focus-ring); }
.hc-search > i, .hc-search > svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-violet-600); }
.hc-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; padding: 0; font: inherit; font-size: 16px; color: var(--fg); }
.hc-search input:focus { outline: none; }
.hc-search .btn { flex: none; }
.hc-head .hc-search { margin: var(--space-6) 0 0; box-shadow: var(--shadow-sm); }

.hc-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hc-cat {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hc-cat:hover { box-shadow: var(--shadow-md); border-color: var(--border-brand); }
.hc-cat-art { position: relative; height: 92px; margin: calc(var(--space-2) * -1) 0 var(--space-5); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-violet-100); }
.hc-cat-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; margin-bottom: var(--space-4); }
.hc-cat-ic i, .hc-cat-ic svg { width: 24px; height: 24px; }
.hc-cat h3 { font-family: var(--font-display); font-size: var(--fs-h5); margin: 0 0 var(--space-2); }
.hc-cat h3 a { color: var(--fg); text-decoration: none; }
.hc-cat h3 a:hover { color: var(--brand); }
.hc-cat h3 a:focus-visible, .hc-cat-links a:focus-visible, .hc-cat-all:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.hc-cat > p { margin: 0 0 var(--space-4); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--fg-muted); }
.hc-cat-links { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 2px; }
.hc-cat-links a { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--fg-body); text-decoration: none; }
.hc-cat-links a:hover { color: var(--brand); }
.hc-cat-links i, .hc-cat-links svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--fg-faint); }
.hc-cat-all { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--brand); text-decoration: none; }
.hc-cat-all:hover { text-decoration: underline; }
.hc-cat-all i, .hc-cat-all svg { width: 15px; height: 15px; }

.hc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hc-listing .hc-list { grid-template-columns: minmax(0, 1fr); }
.hc-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-list > li { display: flex; }
.hc-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hc-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-brand); transform: translateY(-2px); }
.hc-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }
.hc-card-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.hc-card-ic i, .hc-card-ic svg { width: 20px; height: 20px; }
.hc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-card-cat { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-violet-700); }
.hc-card-title { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--fg); }
.hc-card-excerpt { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--fg-body); }
.hc-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-caption); color: var(--fg-muted); }
.hc-card-foot span { display: inline-flex; align-items: center; gap: 5px; }
.hc-card-foot i, .hc-card-foot svg { width: 13px; height: 13px; }
.hc-card-go { width: 18px; height: 18px; flex: none; margin-top: 11px; color: var(--fg-faint); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hc-card:hover .hc-card-go { color: var(--brand); transform: translateX(3px); }

.hc-head { padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--border); background: radial-gradient(60% 90% at 0% 0%, rgba(139, 92, 246, 0.08), transparent 70%); }
.hc-head-row { display: flex; align-items: flex-start; gap: var(--space-5); max-width: 820px; }
.hc-head-art { position: relative; flex: none; width: 96px; height: 96px; margin-top: 4px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-violet-100); }
.hc-head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.hc-head .lede { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-body); max-width: 68ch; }
.hc-head .hc-search { max-width: 640px; }

.hc-listing { padding: var(--space-10) 0 var(--space-16); }
.hc-listing .gdd-wrap > * { max-width: 880px; }
.hc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-4); }
.hc-controls .gd-chip { display: inline-flex; align-items: center; text-decoration: none; }
.hc-sort { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.hc-sort label { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg); }
.hc-sort select {
  min-height: 44px; padding: 0 36px 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--fg); font: inherit; font-size: var(--fs-body-sm);
}
.hc-sort select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hc-reset { font-weight: 600; color: var(--brand); margin-left: var(--space-2); }
.hc-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.hc-subhead { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--fg); margin: var(--space-10) 0 var(--space-4); }

.hc-noresults { padding: var(--space-8); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--bg-card); }
.hc-noresults h2 { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--fg); margin: 0 0 var(--space-3); }
.hc-noresults ul { margin: 0; padding-left: 1.2em; color: var(--fg-body); line-height: var(--lh-relaxed); }

.hc-explore, .hc-other { margin-top: var(--space-10); }
.hc-explore h2, .hc-other h2 { font-family: var(--font-display); font-size: var(--fs-h5); color: var(--fg); margin: 0 0 var(--space-3); }
.hc-explore ul, .hc-other ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hc-explore a, .hc-other a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--fg-body);
  font-size: var(--fs-body-sm); font-weight: 500; text-decoration: none;
}
.hc-explore a:hover, .hc-other a:hover { border-color: var(--color-violet-300); color: var(--brand); }
.hc-explore a:focus-visible, .hc-other a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hc-explore i, .hc-explore svg { width: 14px; height: 14px; }

.hc-faq { border-top: 1px solid var(--border); }
.hc-faq-item { border-bottom: 1px solid var(--border); }
.hc-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 44px; padding: var(--space-5) 4px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg);
}
.hc-faq-item summary::-webkit-details-marker { display: none; }
.hc-faq-item summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.hc-faq-item summary i, .hc-faq-item summary svg { width: 20px; height: 20px; flex: none; color: var(--color-violet-600); transition: transform var(--dur-base) var(--ease-out); }
.hc-faq-item[open] summary i, .hc-faq-item[open] summary svg { transform: rotate(45deg); }
.hc-faq-a { padding: 0 4px var(--space-6); }
.hc-faq-a p { margin: 0 0 var(--space-2); font-size: 15px; line-height: 1.65; color: var(--fg-body); max-width: 68ch; }
.hc-faq-a a { color: var(--brand); font-weight: 600; }

.hc-contact {
  display: flex; align-items: center; gap: var(--space-5);
  margin: var(--space-10) 0 var(--space-6);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  background: var(--gradient-ai-soft, var(--color-violet-50));
}
.hc-support-sec .hc-contact { margin: 0; }
.hc-contact-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--color-violet-100); color: var(--color-violet-700); }
.hc-contact-ic i, .hc-contact-ic svg { width: 22px; height: 22px; }
.hc-contact-text { flex: 1; min-width: 0; }
.hc-contact h2 { font-family: var(--font-display); font-size: var(--fs-h5); color: var(--fg); margin: 0 0 4px; }
.hc-contact p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-body); }
.hc-contact .btn { flex: none; }

.hc-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.hc-feedback-q { margin: 0; font-weight: 600; color: var(--fg); }
.hc-feedback-btns { display: flex; gap: var(--space-2); }
.hc-feedback .gd-chip { display: inline-flex; align-items: center; gap: 6px; }
.hc-feedback .gd-chip i, .hc-feedback .gd-chip svg { width: 16px; height: 16px; }
.hc-feedback-thanks { margin: 0; flex-basis: 100%; font-size: var(--fs-body-sm); color: var(--fg-muted); }
.hc-feedback-thanks:empty { display: none; }
.hcd .hc-contact { margin-top: var(--space-6); }

.hcd-single { grid-template-columns: minmax(0, 760px); justify-content: start; }
.gdd-back { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.hc-top { font-weight: 500 !important; color: var(--fg-muted) !important; }
.hcd .gd-meta a.gd-tag { text-decoration: none; }
.hcd .gd-meta a.gd-tag:hover { background: var(--color-violet-100); }
.hcd .gd-meta a.gd-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 1100px) {
  .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-list-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hc-list { grid-template-columns: minmax(0, 1fr); }
  .hc-sort { margin-left: 0; }
}
@media (max-width: 640px) {
  .hc-hero { padding-top: 48px; }
  .hc-cats, .hc-list-3 { grid-template-columns: minmax(0, 1fr); }
  .hc-cat { padding: var(--space-6); }
  .hc-search { padding-left: 46px; min-height: 56px; }
  .hc-search > i, .hc-search > svg { left: 16px; }
  .hc-search .btn { padding: 0 14px; }
  .hc-head-row { flex-direction: column; gap: var(--space-3); }
  .hc-card { padding: var(--space-5); gap: var(--space-3); }
  .hc-card-go { display: none; }
  .hc-contact { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
  .hc-contact .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-cat, .hc-card, .hc-card-go, .hc-faq-item summary i, .hc-faq-item summary svg { transition: none; }
  .hc-card:hover, .hc-card:hover .hc-card-go { transform: none; }
}

.hc-contact.is-highlighted { border-color: var(--color-violet-400); box-shadow: 0 0 0 4px var(--color-violet-100); }