.faq-hero { margin: 4px 0 56px; }
@media (max-width: 900px) { .faq-hero { margin-bottom: 36px; } }
.search { position: relative; margin-top: 32px; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-2); transition: box-shadow var(--t), border-color var(--t); }
.search:focus-within { border-color: var(--link); outline: 4px solid var(--brand-glow); box-shadow: var(--shadow-3); }
.search svg { width: 22px; height: 22px; margin-left: 22px; color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--ink); padding: 18px 14px; outline: none; }
.search kbd { margin-right: 20px; }
@media (hover: none), (max-width: 640px) { .search kbd { display: none; } .search input { padding-right: 20px; } }
.search-status { min-height: 1.5em; margin-top: 12px; }
.faq-nav .label { color: var(--muted); }
.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.faq-nav { position: sticky; top: 88px; }
.faq-nav ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.faq-nav a { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 550; transition: background var(--t), color var(--t); }
.faq-nav a:hover { background: var(--bg-2); color: var(--ink); }
.faq-nav a.is-active { background: var(--surface); color: var(--link); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.faq-nav .nav-name { flex: 1; min-width: 0; }
.faq-nav .count { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.faq-nav .chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform var(--t) var(--ease-out), color var(--t); }
.faq-nav a:hover .chev, .faq-nav a.is-active .chev { color: currentColor; transform: translateX(2px); }
@media (max-width: 860px) {
  .faq-nav { position: static; }
  .faq-nav ul { gap: 0; margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
  .faq-nav li + li { border-top: 1px solid var(--line); }
  .faq-nav a { min-height: 52px; padding: 12px 14px 12px 18px; border-radius: 0; color: var(--ink); font-weight: 600; }
  .faq-nav a.is-active { background: none; box-shadow: none; color: var(--ink); }
}
.faq-content { display: grid; gap: 40px; min-width: 0; }
.faq-group h2 { margin-bottom: 14px; font-size: 1.25rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; box-shadow: var(--shadow-1); transition: border-color var(--t), box-shadow var(--t); }
.faq-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.faq-item[open] { border-color: color-mix(in oklab, var(--link) 35%, var(--line)); box-shadow: var(--shadow-2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.0625rem; border-radius: var(--r); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(var(--muted), var(--muted)) center / 9px 1.75px no-repeat, linear-gradient(var(--muted), var(--muted)) center / 1.75px 9px no-repeat, var(--bg-2); transition: transform 240ms var(--ease-out), background-color var(--t); }
.faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--brand-soft); }
.faq-answer { padding: 0 20px 20px; color: var(--ink-2); max-width: 70ch; }
.faq-answer p + p { margin-top: 10px; }
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.faq-close { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.empty { color: var(--muted); }
/* admin */
.fa-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .fa-grid { grid-template-columns: minmax(0, 1fr); } }
.cat-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.cat-list li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); }
.cat-list li:hover { background: var(--surface-2); }
.cat-list .name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.entry-row { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.entry-row:last-child { border-bottom: 0; }
.entry-row .q { flex: 1; min-width: 0; font-weight: 600; }
.entry-row .q small { display: block; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor { display: grid; gap: 18px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
.switch input { appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background var(--t); margin: 0; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform 200ms var(--ease-out); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }