:root { --faq-ink:#182033; --faq-muted:#64748b; --faq-line:#e8e4de; --faq-accent:#b72f2a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--faq-ink); font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
[hidden] { display:none !important; }
.side-nav { position:fixed; left:16px; top:16px; bottom:16px; z-index:90; width:180px; padding:14px 12px; border:1px solid var(--faq-line); border-radius:16px; background:#fffdf9; display:flex; flex-direction:column; gap:8px; }
.side-brand { display:flex; align-items:center; gap:9px; padding:6px 8px 14px; margin-bottom:4px; border-bottom:1px solid var(--faq-line); font-weight:950; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; }
.side-nav-link { display:flex; align-items:center; gap:9px; min-height:40px; padding:9px 10px; border-radius:12px; color:#526077; text-decoration:none; font-size:14px; font-weight:850; }
.side-nav-icon { width:20px; text-align:center; }
.mobile-nav-toggle { display:none; }
.container { width:min(1040px,calc(100% - 48px)); margin:28px auto; }
.faq-header { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:22px; }
.faq-header h1 { margin:0; font-size:24px; letter-spacing:.03em; font-weight:850; }
.faq-count { color:var(--faq-muted); font-size:12px; }
.faq-search { display:flex; gap:10px; padding:12px; margin-bottom:20px; border:1px solid var(--faq-line); border-radius:14px; background:rgba(255,253,249,.9); }
.faq-search input { flex:1; min-width:0; height:42px; padding:0 14px; border:1px solid var(--faq-line); border-radius:10px; background:#fff; color:var(--faq-ink); font:inherit; font-size:14px; }
.faq-search input::placeholder { color:#85909f; }
.faq-button { flex:0 0 auto; min-height:40px; padding:9px 15px; border:1px solid var(--faq-line); border-radius:10px; background:#fffdf9; color:#526077; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.faq-button.primary { border-color:transparent; background:linear-gradient(120deg,#ef4d43,#f59e0b); color:white; }
.faq-button:disabled { opacity:.4; cursor:not-allowed; }
.faq-button:hover:not(:disabled):not(.primary) { border-color:#e8b5a7; color:var(--faq-accent); }
.faq-list { display:grid; gap:12px; }
.faq-item { border:1px solid var(--faq-line); border-radius:14px; background:rgba(255,255,255,.92); overflow:hidden; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-question { display:block; font-size:15px; font-weight:750; line-height:1.6; }
.faq-category { display:block; margin-top:3px; color:var(--faq-muted); font-size:11px; font-weight:450; }
.faq-arrow { flex:0 0 auto; color:var(--faq-muted); font-size:20px; transition:transform .16s ease; }
.faq-item[open] .faq-arrow { transform:rotate(90deg); }
.faq-item[open] summary { border-bottom:1px solid #f0eeea; }
.faq-answer { padding:4px 20px 18px; }
.faq-answer p { color:#3c485c; font-size:14px; line-height:1.85; margin:14px 0; white-space:pre-line; overflow-wrap:anywhere; }
.faq-answer .faq-scope { margin:14px 0 10px; padding:10px 12px; border-left:2px solid #e9bcb0; border-radius:0 8px 8px 0; background:#fff9f3; color:var(--faq-muted); font-size:12px; line-height:1.7; }
.faq-date { color:var(--faq-muted); font-size:11px; }
.faq-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; }
.faq-pagination span { color:var(--faq-muted); font-size:13px; }
.faq-error,.faq-empty { padding:28px 20px; border:1px solid var(--faq-line); border-radius:14px; background:#fffdf9; text-align:center; color:var(--faq-muted); font-size:14px; }
.faq-error button { margin-left:12px; }
.faq-loading { height:150px; margin-bottom:12px; border:1px solid var(--faq-line); border-radius:14px; background:linear-gradient(100deg,#f8f5ef 30%,#fffdf9 50%,#f8f5ef 70%); background-size:200% 100%; animation:faq-shimmer 1.5s ease infinite; }
.support-footer { padding:20px 16px; color:var(--faq-muted); text-align:center; font-size:12px; }
.support-footer a { color:var(--faq-accent); text-decoration:none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid var(--faq-accent); outline-offset:3px; }
@keyframes faq-shimmer { to { background-position:-200% 0; } }
@media(min-width:1020px) { body { padding-left:212px; } }
@media(max-width:1019px) {
    body { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
    .mobile-nav-toggle { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:130; display:inline-flex; min-height:44px; align-items:center; padding:0 14px; border:1px solid #f3c9bd; border-radius:999px; background:#fffdf9; color:var(--faq-accent); font:inherit; font-size:14px; font-weight:850; }
    .side-nav { display:none; left:auto; right:14px; top:auto; bottom:calc(72px + env(safe-area-inset-bottom)); width:min(232px,calc(100vw - 28px)); max-height:70vh; overflow-y:auto; height:auto; }
    .side-nav.mobile-open { display:flex; }
}
@media(max-width:700px) {
    .container { width:calc(100% - 28px); margin:20px auto; }
    .faq-header { align-items:center; gap:10px; }
    .faq-header h1 { font-size:21px; }
    .faq-search { gap:8px; padding:9px; flex-wrap:wrap; }
    .faq-search input { flex-basis:calc(100% - 74px); font-size:16px; }
    .faq-item summary { padding:15px 14px; gap:10px; }
    .faq-answer { padding:2px 14px 16px; }
    .faq-question { font-size:14px; }
    .faq-pagination { gap:10px; }
    .faq-button { padding:9px 12px; }
}
@media(prefers-reduced-motion:reduce) { .faq-loading { animation:none; } .faq-arrow { transition:none; } }