.hc-hero { text-align: center; padding: 1.5rem 0 2rem; }
.hc-hero h1 { font-size: 2.25rem; font-weight: 600; color: #231E41; margin: 0 0 0.5rem; }
.hc-hero p { color: #6F6F87; font-size: 1.0625rem; margin: 0 0 1.5rem; }
.hc-search { position: relative; max-width: 560px; margin: 0 auto; }
.hc-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #9CA3AF; pointer-events: none; }
.hc-search input {
    width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px 0 46px;
    border: 1px solid #E0DDE6; border-radius: 12px; background: #fff;
    font: inherit; font-size: 1rem; color: #231E41; outline: none;
    box-shadow: 0 1px 2px rgba(35, 30, 65, 0.04);
}
.hc-search input:focus { border-color: #8D75E6; box-shadow: 0 0 0 3px rgba(141, 117, 230, 0.15); }

.hc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.hc-cat {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 1rem; padding: 1.5rem;
    scroll-margin-top: 90px;
}
.hc-cat.focus { border-color: #8D75E6; box-shadow: 0 0 0 3px rgba(141, 117, 230, 0.12); }
.hc-cat h2 { font-size: 1.125rem; font-weight: 600; color: #231E41; margin: 0 0 0.25rem; }
.hc-cat p { font-size: 0.875rem; color: #6F6F87; margin: 0 0 1rem; }
.hc-cat ul { list-style: none; margin: 0; padding: 0; }
.hc-cat li + li { margin-top: 0.5rem; }
.hc-cat a { color: #8D75E6; text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.hc-cat a:hover { text-decoration: underline; }

.hc-results { max-width: 760px; margin: 0 auto; }
.hc-results-head { font-size: 0.875rem; color: #6F6F87; margin-bottom: 0.75rem; }
.hc-result {
    display: block; padding: 1rem 1.25rem; border: 1px solid #E5E7EB; border-radius: 12px;
    background: #fff; text-decoration: none; margin-bottom: 0.75rem;
}
.hc-result:hover { border-color: #d8b4fe; }
.hc-result-cat { display: block; font-size: 0.75rem; color: #8D75E6; font-weight: 500; margin-bottom: 2px; }
.hc-result-title { display: block; font-size: 1.0625rem; font-weight: 600; color: #231E41; }
.hc-result-desc { display: block; font-size: 0.875rem; color: #6F6F87; margin-top: 4px; line-height: 1.5; }
.hc-results-none { color: #6F6F87; font-size: 0.9375rem; }
.hc-results-none a, .hc-contact a { color: #8D75E6; }

.hc-contact { text-align: center; padding: 2.5rem 0 1rem; }
.hc-contact h2 { font-size: 1.25rem; font-weight: 600; color: #231E41; margin: 0 0 0.375rem; }
.hc-contact p { color: #6F6F87; margin: 0; }

.hc-body { color: #374151; font-size: 1.0625rem; line-height: 1.7; }
.hc-body h2 { font-size: 1.375rem; font-weight: 600; color: #231E41; margin: 2.25rem 0 0.75rem; scroll-margin-top: 90px; }
.hc-body h3 { font-size: 1.125rem; font-weight: 600; color: #231E41; margin: 1.5rem 0 0.375rem; scroll-margin-top: 90px; }
.hc-body p { margin: 0 0 1rem; }
.hc-body ul, .hc-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.hc-body li { margin-bottom: 0.5rem; }
.hc-body li p { margin: 0.5rem 0 0; }
.hc-body strong { font-weight: 600; color: #231E41; }
.hc-body a { color: #8D75E6; text-decoration: none; }
.hc-body a:hover { text-decoration: underline; }
.hc-body hr { border: 0; border-top: 1px solid #E5E7EB; margin: 2rem 0; }
.hc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; background: #F3F0FA; color: #5B3FC4; padding: 2px 6px; border-radius: 4px; }
.hc-body pre { position: relative; background: #1E1B33; color: #E9E5FF; border-radius: 10px; padding: 16px 18px; margin: 0 0 1.25rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; }

.hc-code { position: relative; margin: 0 0 1.25rem; }
.hc-code pre { margin: 0; padding-top: 46px; }
.hc-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.hc-copy {
    position: absolute; top: 10px; right: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
    color: #fff; font: inherit; font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.hc-copy:hover { background: rgba(255, 255, 255, 0.16); }
.hc-note { background: #F3ECF7; border-left: 3px solid #8D75E6; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 1.25rem; font-size: 1rem; }
.hc-note p { margin: 0; }
.hc-note p + p { margin-top: 0.5rem; }
.hc-table { overflow-x: auto; margin: 0 0 1.5rem; }
.hc-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.hc-table th { background: #F8F7F4; font-weight: 600; text-align: left; color: #231E41; padding: 10px 14px; border: 1px solid #E5E7EB; }
.hc-table td { padding: 10px 14px; border: 1px solid #E5E7EB; vertical-align: top; }
.hc-shot { margin: 1rem 0 1.5rem; }
.hc-shot img { display: block; width: 100%; height: auto; border: 1px solid #E5E7EB; border-radius: 10px; }
.hc-shot figcaption { font-size: 0.8125rem; color: #6F6F87; margin-top: 0.5rem; line-height: 1.5; }
.hc-shot-ph {
    display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 16px;
    border: 2px dashed #D6CCF5; border-radius: 10px; background: #FBFAFE;
    color: #8D75E6; font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
}

.hc-feedback { margin: 2.5rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid #E5E7EB; border-radius: 12px; background: #FBFAFE; }
.hc-feedback-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500; color: #231E41; }
.hc-feedback-ask span { margin-right: 6px; }
.hc-fb-btn { border: 1px solid #E0DDE6; background: #fff; color: #231E41; font: inherit; font-size: 0.875rem; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.hc-fb-btn:hover { border-color: #8D75E6; color: #8D75E6; }
.hc-feedback p { margin: 0; color: #4B5563; font-size: 0.9375rem; }
.hc-feedback a { color: #8D75E6; }

.hc-page .bp-article-header { margin-bottom: 1.75rem; }
.hc-page .bp-title { color: #231E41; margin: 0 0 0.5rem; }
.hc-page .bp-widget-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.hc-page .bp-navigation { margin-top: 2rem; }
.hc-body h2:first-child { margin-top: 0; }

.hc-tl { position: relative; padding: 12px 0; }
.hc-tl-track, .hc-tl-fill { position: absolute; left: 24px; width: 2px; border-radius: 1px; pointer-events: none; }
.hc-tl-track { background: #E5E7EB; }
.hc-tl-fill { background: #8D75E6; height: 0; }
.hc-toc-link { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 7px 20px; color: #6F6F87; text-decoration: none; font-size: 0.875rem; line-height: 1.4; transition: color 0.2s; }
.hc-toc-link:hover { color: #8D75E6; }
.hc-tl-dot {
    position: relative; z-index: 1; flex-shrink: 0; width: 10px; height: 10px; margin-top: 5px; box-sizing: border-box;
    border: 2px solid #D6D3E0; border-radius: 50%; background: #fff;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.hc-toc-link.is-done .hc-tl-dot { background: #8D75E6; border-color: #8D75E6; }
.hc-toc-link.is-active { color: #231E41; font-weight: 600; }
.hc-toc-link.is-active .hc-tl-dot { background: #8D75E6; border-color: #8D75E6; transform: scale(1.2); box-shadow: 0 0 0 4px rgba(141, 117, 230, 0.2); }

@media (max-width: 1024px) {
    .hc-page .bp-widget-sidebar { margin-top: 0; }
    .hc-toc-widget { display: none; }
}
@media (max-width: 860px) {
    .hc-cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .hc-cats { grid-template-columns: 1fr; }
    .hc-hero h1 { font-size: 1.75rem; }
    .hc-body { font-size: 1rem; }
}

[data-theme="dark"] .hc-hero h1, [data-theme="dark"] .hc-cat h2, [data-theme="dark"] .hc-contact h2,
[data-theme="dark"] .hc-page .bp-title, [data-theme="dark"] .hc-body h2, [data-theme="dark"] .hc-body h3,
[data-theme="dark"] .hc-body strong, [data-theme="dark"] .hc-result-title, [data-theme="dark"] .hc-feedback-ask,
[data-theme="dark"] .hc-table th { color: #FFFFFF; }
[data-theme="dark"] .hc-body, [data-theme="dark"] .hc-feedback p { color: #E2E8F0; }
[data-theme="dark"] .hc-hero p, [data-theme="dark"] .hc-cat p, [data-theme="dark"] .hc-result-desc,
[data-theme="dark"] .hc-contact p, [data-theme="dark"] .hc-toc-link { color: rgba(255, 255, 255, 0.6); }
[data-theme="dark"] .hc-toc-link:hover { color: #C4B5FD; }
[data-theme="dark"] .hc-toc-link.is-active { color: #FFFFFF; }
[data-theme="dark"] .hc-tl-track { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .hc-tl-dot { background: #1A1B2E; border-color: rgba(255, 255, 255, 0.25); }
[data-theme="dark"] .hc-tl-fill, [data-theme="dark"] .hc-toc-link.is-done .hc-tl-dot,
[data-theme="dark"] .hc-toc-link.is-active .hc-tl-dot { background: #A894F0; border-color: #A894F0; }
[data-theme="dark"] .hc-cat, [data-theme="dark"] .hc-result, [data-theme="dark"] .hc-search input,
[data-theme="dark"] .hc-feedback, [data-theme="dark"] .hc-fb-btn { background: #1A1B2E; border-color: rgba(255, 255, 255, 0.1); color: #E2E8F0; }
[data-theme="dark"] .hc-body hr, [data-theme="dark"] .hc-table td, [data-theme="dark"] .hc-table th { border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .hc-table th { background: #1A1B2E; }
[data-theme="dark"] .hc-note { background: #22213A; }
[data-theme="dark"] .hc-body code { background: #2A2B3E; color: #C4B5FD; }
[data-theme="dark"] .hc-body pre { background: #0D1117; }
[data-theme="dark"] .hc-shot-ph { background: #1A1B2E; border-color: rgba(196, 181, 253, 0.3); }
[data-theme="dark"] .hc-shot img { border-color: rgba(255, 255, 255, 0.1); }