/* TCHAHIT — FAQ and help guide reading surface (loaded only on /faq and /help). */
.content-page { min-height: 100vh; padding-bottom: 64px; background: radial-gradient(circle at 92% 0, rgba(194, 65, 12, .07), transparent 30%), #f5f2ea; color: #1d2a23; }
.content-page-bar { position: sticky; top: 0; z-index: 20; min-height: 72px; padding: 10px max(16px, calc((100vw - 1000px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(22, 45, 35, .08); }
.content-page-body { width: min(860px, calc(100% - 32px)); margin: 36px auto 0; padding: clamp(22px, 5vw, 56px); border: 1px solid rgba(22, 45, 35, .08); border-radius: 26px; background: #fff; box-shadow: 0 22px 60px rgba(33, 42, 37, .07); }
.content-page-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #edf8f1; color: #1f4d36; }
.content-page-icon svg { width: 26px; height: 26px; }
.content-page h1 { margin: 12px 0 10px; font-size: clamp(30px, 5vw, 48px); line-height: 1.2; }
.content-page-lead { margin: 0 0 22px; color: #45524b; font-size: 17px; line-height: 1.8; }
.content-search { position: relative; display: block; margin-bottom: 26px; }
.content-search svg { position: absolute; top: 50%; inset-inline-start: 14px; width: 20px; height: 20px; color: #5b6861; transform: translateY(-50%); pointer-events: none; }
.content-search input { width: 100%; height: 52px; padding-inline: 46px 14px; border: 1px solid #d5ddd8; border-radius: 14px; background: #fafbfa; color: #1d2a23; font: inherit; font-size: 16px; }
.content-search input:focus-visible { outline: 3px solid rgba(31, 77, 54, .35); outline-offset: 1px; border-color: #1f4d36; }
.content-empty { padding: 16px; border-radius: 12px; background: #f6f8f7; color: #45524b; font-size: 16px; }
.faq-group { margin: 0 0 28px; }
.faq-group h2 { margin: 0 0 12px; color: #1f4d36; font-size: 20px; }
.faq-item { border: 1px solid #e1e6e2; border-radius: 14px; background: #fff; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary { position: relative; min-height: 52px; padding: 14px 18px; padding-inline-end: 46px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 800; line-height: 1.6; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; top: 12px; inset-inline-end: 16px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f1ece3; color: #9a3412; font-size: 18px; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { outline: 3px solid rgba(31, 77, 54, .35); outline-offset: 2px; border-radius: 14px; }
.faq-item p { margin: 0; padding: 0 18px 16px; color: #3d4a43; font-size: 16px; line-height: 1.85; }
.faq-item a, .help-panel > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 18px 8px; color: #9a3412; font-weight: 800; }
.help-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.help-tabs button { min-height: 52px; padding: 10px; border: 1px solid #d9dfdb; border-radius: 14px; background: #fafbfa; color: #33413a; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.help-tabs button svg { width: 20px; height: 20px; flex: none; }
.help-tabs button.active { border-color: #1f4d36; background: #1f4d36; color: #fff; }
.help-tabs button:focus-visible { outline: 3px solid rgba(194, 65, 12, .45); outline-offset: 2px; }
.help-panel { padding: 4px 0 8px; }
.help-panel:focus-visible { outline: 3px solid rgba(31, 77, 54, .3); outline-offset: 6px; border-radius: 12px; }
.help-panel h2 { margin: 6px 0 6px; font-size: 24px; }
.help-panel > p { margin: 0 0 16px; color: #45524b; font-size: 16px; line-height: 1.8; }
.help-panel ol { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.help-panel li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid #e6eae7; border-radius: 14px; background: #fbfcfb; }
.help-panel li span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff0e8; color: #9a3412; font-weight: 900; }
.help-panel li p { margin: 4px 0 0; color: #2f3c35; font-size: 16px; line-height: 1.75; }
.help-panel > a { margin: 0; }
.content-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.content-links a { min-height: 44px; padding: 10px 14px; border: 1px solid #dfe5e1; border-radius: 12px; background: #fff; color: #33413a; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; text-decoration: none; }
.content-links a svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .help-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-page-body { margin-top: 18px; border-radius: 20px; }
}