:root {
--tokm-hdf-bg: var(--theme-palette-color-8, #f7f7f8);
--tokm-hdf-surface: #fff;
--tokm-hdf-border: rgba(0, 0, 0, 0.08);
--tokm-hdf-text: var(--theme-text-color, #1f2937);
--tokm-hdf-muted: #6b7280;
--tokm-hdf-accent: var(--theme-palette-color-1, #2563eb);
--tokm-hdf-accent-contrast: #fff;
--tokm-hdf-radius: var(--theme-button-border-radius, 12px);
}

.tokm-hdf-search-wrapper,
.tokm-hdf-single,
.tokm-hdf-archive {
color: var(--tokm-hdf-text);
}

.tokm-hdf-header {
margin-bottom: 1rem;
}

.tokm-hdf-title {
margin: 0;
}

.tokm-hdf-filters {
display: grid;
gap: 1rem;
margin-bottom: 1.5rem;
}

.tokm-hdf-search__input {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--tokm-hdf-border);
border-radius: var(--tokm-hdf-radius);
background: var(--tokm-hdf-surface);
color: var(--tokm-hdf-text);
font: inherit;
}

.tokm-hdf-search__input:focus {
outline: none;
border-color: var(--tokm-hdf-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.tokm-hdf-categories {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.tokm-hdf-chip {
appearance: none;
border: 1px solid var(--tokm-hdf-border);
background: var(--tokm-hdf-surface);
color: var(--tokm-hdf-text);
padding: 0.6rem 0.9rem;
border-radius: 999px;
cursor: pointer;
font: inherit;
transition: all 0.2s ease;
}

.tokm-hdf-chip:hover,
.tokm-hdf-chip.is-active {
background: var(--tokm-hdf-accent);
color: var(--tokm-hdf-accent-contrast);
border-color: var(--tokm-hdf-accent);
}

.tokm-hdf-meta {
color: var(--tokm-hdf-muted);
font-size: 0.95rem;
}

.tokm-hdf-results-grid {
display: grid;
gap: 1rem;
}

.tokm-hdf-layout-cards {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tokm-hdf-layout-list,
.tokm-hdf-layout-accordion {
grid-template-columns: 1fr;
}

.tokm-hdf-item {
background: var(--tokm-hdf-surface);
border: 1px solid var(--tokm-hdf-border);
border-radius: var(--tokm-hdf-radius);
overflow: hidden;
}

.tokm-hdf-item__summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}

.tokm-hdf-item__summary::-webkit-details-marker {
display: none;
}

.tokm-hdf-item__summary::after {
content: "+";
font-size: 1.25rem;
line-height: 1;
color: var(--tokm-hdf-accent);
}

.tokm-hdf-item[open] .tokm-hdf-item__summary::after {
content: "–";
}

.tokm-hdf-item__body {
padding: 1.25rem;
}

.tokm-hdf-item--accordion .tokm-hdf-item__body {
padding-top: 0;
}

.tokm-hdf-item__heading {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.125rem;
}

.tokm-hdf-item__heading a {
color: inherit;
text-decoration: none;
}

.tokm-hdf-item__excerpt {
color: var(--tokm-hdf-muted);
margin-bottom: 1rem;
}

.tokm-hdf-item__terms,
.tokm-hdf-single__terms {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}

.tokm-hdf-tag {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 999px;
background: var(--tokm-hdf-bg);
color: var(--tokm-hdf-text);
font-size: 0.85rem;
text-decoration: none;
}

.tokm-hdf-item__link {
margin-top: 1rem;
margin-bottom: 0;
}

.tokm-hdf-item__link a {
color: var(--tokm-hdf-accent);
font-weight: 600;
text-decoration: none;
}

.tokm-hdf-empty {
padding: 1rem 1.25rem;
border: 1px dashed var(--tokm-hdf-border);
border-radius: var(--tokm-hdf-radius);
background: var(--tokm-hdf-bg);
}

.tokm-hdf-search-wrapper.is-loading .tokm-hdf-results {
opacity: 0.6;
pointer-events: none;
transition: opacity 0.2s ease;
}

.tokm-hdf-archive,
.tokm-hdf-single {
padding-top: 2rem;
padding-bottom: 2rem;
}

.tokm-hdf-hero {
margin-bottom: 2rem;
}

.tokm-hdf-related {
margin-top: 3rem;
}

.tokm-hdf-related ul {
margin: 0;
padding-left: 1.2rem;
}

.tokm-hdf-highlight {
background: color-mix(in srgb, var(--theme-palette-color-1, #2563eb) 18%, white);
color: inherit;
padding: 0 0.15em;
border-radius: 0.2em;
font-weight: 600;
}