:root{
  --brand:#ff444f; --bg:#f7f7f8; --card:#ffffff; --text:#0b0b0c; --muted:#6b7280; --border:#e5e7eb;
  --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06); --ring: rgba(255,68,79,.35); --maxw: 960px;
}
* { box-sizing: border-box; } html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(255,68,79,.08), transparent 60%),
             radial-gradient(1000px 600px at 110% 10%, rgba(255,68,79,.06), transparent 50%), var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:var(--maxw); margin:32px auto 64px; padding:0 20px;}

/* Header */
.site-header{ background: var(--card); border-bottom: 1px solid var(--border); }
.site-header-inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; }
.logo-link{ display: inline-flex; align-items: center; text-decoration: none; }
.logo-img{ height: 24px; width: auto; display: block; }

/* Toolbar */
.toolbar{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.search{flex:1 1 420px; position:relative;}
.search input{ width:100%; padding:14px 44px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); box-shadow:var(--shadow-sm); font-size:16px; outline:none; transition: box-shadow .2s, border-color .2s; }
.search input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring), var(--shadow-sm);}
.search .icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none;}
.search .kbd{position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted);
  border:1px solid var(--border); border-radius:8px; padding:2px 6px; background:#fff;}
.btn{border:1px solid var(--border); background:var(--card); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; box-shadow:var(--shadow-sm);}
.btn:focus-visible{outline:4px solid var(--ring); outline-offset:2px;}
.stats{margin-left:auto; color:var(--muted); font-size:14px}

/* Section headers */
.faq-section{ margin-top:28px; }
.section-title{
  display:flex; align-items:center; gap:12px;
  font-size:18px; font-weight:800; letter-spacing:.2px;
  margin:6px 2px 10px; color:#111827;
}
.section-title .count{
  margin-left:auto; font-size:12px; color:var(--muted);
  background:#fff; border:1px solid var(--border); border-radius:999px; padding:2px 8px;
}

/* Accordion */
.accordion{display:block;}
.item{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:clip; margin-bottom:12px;
}
.trigger{
  width:100%; text-align:left; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:20px; border:0; background:transparent; cursor:pointer; font-size:17px; font-weight:800; letter-spacing:.2px;
}
.trigger:hover{ background:linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02)); }
.chev{width:20px; height:20px; transition:transform .25s ease; opacity:.7;}
.trigger[aria-expanded="true"] .chev{transform:rotate(180deg); opacity:1;}

.panel{
  max-height:0; overflow:hidden; transition:max-height .25s ease; border-top:1px solid var(--border);
  background:linear-gradient(#fff,#fff) padding-box, radial-gradient(800px 200px at 0 -20%, rgba(255,68,79,.08), transparent 60%) border-box;
}

/* Content typography — headings, spacing, lists, quotes, code, tables */
.panel-inner{
  padding:18px 20px 22px;
  color:#111827;
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.1px;
}
.panel-inner > * + *{ margin-top:12px; }
.panel-inner p{ margin:0; }

.panel-inner h3{
  font-size:18px; font-weight:800; margin:6px 0 6px; color:#0b0b0c;
}
.panel-inner h4{
  font-size:15px; font-weight:800; margin:10px 0 6px; color:#111827;
}

.panel-inner a{ color:var(--brand); text-underline-offset:3px; text-decoration-thickness:1.5px; }
.panel-inner strong, .panel-inner b{ color:#0b0b0c; }
.panel-inner em, .panel-inner i{ color:#374151; }

/* Lists */
.panel-inner ul, .panel-inner ol{ margin:6px 0 10px 24px; }
.panel-inner li{ margin:4px 0; }
.panel-inner ul{ list-style: disc; }
.panel-inner ol{ list-style: decimal; }

/* Code */
.panel-inner code{
  background:#f2f4f7; padding:2px 6px; border-radius:6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:85%;
}
.panel-inner pre{
  background:#0b0b0c; color:#f9fafb; padding:14px; border-radius:12px; overflow:auto; line-height:1.6;
}

/* Blockquotes (callouts) */
.panel-inner blockquote{
  margin:8px 0; padding:10px 14px; border-left:4px solid #d9d8d8; background:#fff7f8;
}

/* Tables */
.panel-inner table{ width:100%; border-collapse: collapse; font-size:15px; }
.panel-inner th, .panel-inner td{ border:1px solid var(--border); padding:8px 10px; text-align:left; }
.panel-inner th{ background:#fafafa; }

/* Misc */
mark{background:rgba(255,68,79,.2); padding:0 2px; border-radius:4px;}
.empty{padding:24px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:12px; background:#fff;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}