@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --sfaq-accent:   #6366f1;
  --sfaq-accent2:  #8b5cf6;
  --sfaq-bg:       #0f0f18;
  --sfaq-surface:  #16161f;
  --sfaq-surface2: #1c1c2a;
  --sfaq-border:   rgba(255,255,255,.07);
  --sfaq-text:     #e8e8f0;
  --sfaq-muted:    #6b6b80;
  --sfaq-radius:   10px;
  --sfaq-font:     'Inter', sans-serif;
  --sfaq-mono:     'JetBrains Mono', monospace;
  --sfaq-shadow:   0 8px 48px rgba(0,0,0,.6);
}

.sfaq-wrap * { box-sizing:border-box; margin:0; padding:0; }

.sfaq-wrap {
  font-family: var(--sfaq-font);
  background: var(--sfaq-bg);
  border: 1px solid var(--sfaq-border);
  border-radius: 20px;
  padding: 52px 48px;
  width: 80%;
  max-width: 1000px;
  margin: 40px auto;
  box-shadow: var(--sfaq-shadow);
  color: var(--sfaq-text);
  position: relative;
  overflow: hidden;
}

/* gradient mesh background */
.sfaq-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% -10%, rgba(99,102,241,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at -10% 80%, rgba(139,92,246,.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 110%, rgba(236,72,153,.08) 0%, transparent 60%);
}

/* HEADER */
.sfaq-header { position:relative; z-index:2; text-align:center; margin-bottom:36px; }

.sfaq-title {
  font-size: clamp(1.6rem,3.5vw,2.3rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.15;
  background: linear-gradient(135deg, #fff 30%, var(--sfaq-accent) 70%, var(--sfaq-accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:10px;
}
.sfaq-subtitle {
  color:var(--sfaq-muted); font-size:.88rem; letter-spacing:.02em; margin-bottom:30px;
}

/* SEARCH */
.sfaq-search-wrap {
  position:relative; max-width:600px; margin:0 auto 22px;
}
.sfaq-search-icon {
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--sfaq-muted); display:flex; align-items:center;
  pointer-events:none; z-index:1;
}
.sfaq-search-icon svg { width:16px; height:16px; flex-shrink:0; }
.sfaq-search {
  width:100%; padding:14px 80px 14px 52px;
  background:var(--sfaq-surface); border:1.5px solid var(--sfaq-border);
  border-radius:50px; color:var(--sfaq-text); font-family:var(--sfaq-font);
  font-size:.95rem; outline:none;
  transition:border-color .22s, box-shadow .22s;
}
.sfaq-search::placeholder { color:var(--sfaq-muted); font-size:.87rem; }
.sfaq-search:focus {
  border-color:var(--sfaq-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sfaq-accent) 18%,transparent),
             0 4px 20px rgba(0,0,0,.3);
}
.sfaq-clear {
  position:absolute; right:46px; top:50%; transform:translateY(-50%);
  color:var(--sfaq-muted); cursor:pointer; font-size:.75rem;
  width:20px; height:20px; display:none; align-items:center;
  justify-content:center; border-radius:50%; transition:background .15s;
}
.sfaq-clear:hover { background:rgba(255,255,255,.1); color:var(--sfaq-text); }
.sfaq-clear.visible { display:flex; }
.sfaq-kbd {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:var(--sfaq-surface2); border:1px solid var(--sfaq-border);
  color:var(--sfaq-muted); font-family:var(--sfaq-mono); font-size:.7rem;
  padding:2px 7px; border-radius:5px; pointer-events:none;
}

/* CATEGORY TABS */
.sfaq-cats { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.sfaq-cat {
  padding:5px 14px; border-radius:50px; border:1.5px solid var(--sfaq-border);
  background:transparent; color:var(--sfaq-muted); font-family:var(--sfaq-font);
  font-size:.79rem; font-weight:500; cursor:pointer; transition:all .18s;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.sfaq-cat:hover { border-color:var(--sfaq-accent); color:var(--sfaq-text); }
.sfaq-cat.active {
  background:linear-gradient(135deg,color-mix(in srgb,var(--sfaq-accent) 22%,transparent),color-mix(in srgb,var(--sfaq-accent2) 18%,transparent));
  border-color:var(--sfaq-accent); color:#c7d2fe;
}
.sfaq-cat-count {
  background:rgba(255,255,255,.07); border-radius:20px;
  padding:1px 6px; font-size:.7rem; font-weight:600;
}
.sfaq-cat.active .sfaq-cat-count { color:var(--sfaq-accent); }

/* TOOLBAR */
.sfaq-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--sfaq-surface);
  border:1px solid var(--sfaq-border); border-radius:10px;
  margin-bottom:14px; position:relative; z-index:2;
}
.sfaq-stats { font-size:.79rem; color:var(--sfaq-muted); }
.sfaq-stats span { color:var(--sfaq-accent); font-weight:600; }
.sfaq-toolbar-btns { display:flex; gap:7px; }
.sfaq-tool-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:7px; border:1px solid var(--sfaq-border);
  background:transparent; color:var(--sfaq-muted); font-family:var(--sfaq-font);
  font-size:.77rem; font-weight:500; cursor:pointer; transition:all .18s;
}
.sfaq-tool-btn svg { width:13px; height:13px; }
.sfaq-tool-btn:hover {
  background:color-mix(in srgb,var(--sfaq-accent) 12%,transparent);
  border-color:var(--sfaq-accent); color:var(--sfaq-accent);
}

/* FAQ LIST */
.sfaq-list { position:relative; z-index:2; }
.sfaq-item {
  border:1.5px solid var(--sfaq-border); border-radius:var(--sfaq-radius);
  margin-bottom:8px; overflow:hidden; background:var(--sfaq-surface);
  transition:border-color .22s, box-shadow .22s, transform .22s;
  animation:sfaqIn .38s ease both;
  animation-delay:calc(var(--i) * 0.03s);
}
@keyframes sfaqIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.sfaq-item:hover {
  border-color:color-mix(in srgb,var(--sfaq-accent) 45%,transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.sfaq-item.open {
  border-color:var(--sfaq-accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sfaq-accent) 25%,transparent),
             0 6px 28px rgba(0,0,0,.35);
}

.sfaq-q {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:15px 18px; background:transparent; border:none; cursor:pointer;
  text-align:left; font-family:var(--sfaq-font); color:var(--sfaq-text);
}
.sfaq-q-cat {
  flex-shrink:0; font-size:.71rem; font-weight:600; padding:2px 9px;
  background:color-mix(in srgb,var(--sfaq-accent) 14%,transparent);
  color:var(--sfaq-accent); border-radius:4px; white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--sfaq-accent) 28%,transparent);
}
.sfaq-q-text { flex:1; font-size:.92rem; font-weight:500; line-height:1.4; }
.sfaq-item.open .sfaq-q-text { color:#c7d2fe; }
.sfaq-arrow {
  width:26px; height:26px; flex-shrink:0;
  background:var(--sfaq-border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--sfaq-muted);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .22s, color .22s;
}
.sfaq-arrow svg { width:15px; height:15px; }
.sfaq-item.open .sfaq-arrow {
  transform:rotate(180deg);
  background:color-mix(in srgb,var(--sfaq-accent) 18%,transparent);
  color:var(--sfaq-accent);
}

/* highlight */
.sfaq-highlight {
  background:color-mix(in srgb,var(--sfaq-accent) 28%,transparent);
  color:#c7d2fe; border-radius:3px; padding:0 2px; font-weight:700;
}

/* ANSWER */
.sfaq-a { max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.4,0,.2,1); }
.sfaq-a:not([hidden]) { max-height:2400px; }
.sfaq-a[hidden] { display:block !important; }
.sfaq-a-inner {
  padding:16px 18px 20px;
  border-top:1px solid var(--sfaq-border);
  font-size:.875rem; line-height:1.78; color:#9ca3b8;
}
.sfaq-a-inner p { margin-bottom:.65em; }
.sfaq-a-inner ul,.sfaq-a-inner ol { padding-left:1.5em; margin-bottom:.7em; }
.sfaq-a-inner li { margin-bottom:.3em; }
.sfaq-a-inner a { color:var(--sfaq-accent); }
.sfaq-a-inner strong { color:#d1d5db; font-weight:600; }
.sfaq-a-inner em { color:#a5b4fc; font-style:normal; }
.sfaq-a-inner code {
  font-family:var(--sfaq-mono); font-size:.81em;
  background:#1e1e2e; color:#e0af68;
  padding:1px 6px; border-radius:4px;
  border:1px solid rgba(255,255,255,.08);
}
.sfaq-a-inner pre {
  font-family:var(--sfaq-mono); font-size:.8rem; line-height:1.68;
  background:#1a1a2e; border:1px solid rgba(99,102,241,.2);
  border-radius:10px; padding:28px 16px 15px;
  margin:.6em 0 .8em; overflow-x:auto;
  color:#a9c5e8; white-space:pre; position:relative;
}
.sfaq-a-inner pre::before {
  content:''; position:absolute; top:11px; left:14px; width:8px; height:8px;
  border-radius:50%;
  box-shadow:0 0 0 0 #ef4444, 13px 0 0 #ef4444, 26px 0 0 #f59e0b, 39px 0 0 #22c55e;
}
.sfaq-a-inner table { width:100%; border-collapse:collapse; margin:.5em 0; font-size:.82rem; }
.sfaq-a-inner th,.sfaq-a-inner td { border:1px solid var(--sfaq-border); padding:7px 11px; }
.sfaq-a-inner th { background:#1c1c2a; color:#c7d2fe; font-weight:600; }

/* EMPTY */
.sfaq-empty { text-align:center; padding:55px 20px; color:var(--sfaq-muted); position:relative; z-index:2; }
.sfaq-empty svg { width:58px; height:58px; margin:0 auto 18px; display:block; }
.sfaq-empty p { font-size:1rem; font-weight:500; color:var(--sfaq-text); margin-bottom:6px; }
.sfaq-empty span { font-size:.83rem; }
.sfaq-empty:not([hidden]) { display:block; }

@media(max-width:900px){
  .sfaq-wrap { width:92%; padding:36px 24px; }
}
@media(max-width:600px){
  .sfaq-wrap { width:96%; padding:28px 14px; border-radius:14px; margin:16px auto; }
  .sfaq-cats { gap:4px; }
  .sfaq-cat { font-size:.75rem; padding:4px 10px; }
  .sfaq-q { padding:12px 14px; }
  .sfaq-q-text { font-size:.87rem; }
  .sfaq-a-inner { padding:13px 14px 16px; }
  .sfaq-toolbar { flex-direction:column; gap:8px; align-items:flex-start; }
  .sfaq-kbd { display:none; }
}

/* ── Code block with language label (frontend) ── */
.sfaq-a-inner .sfaq-pre-wrap {
  position: relative;
  margin: .6em 0 .8em;
}
/* lang badge floats top-right inside the pre box */
.sfaq-a-inner .sfaq-pre-lang {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
  font-family: var(--sfaq-mono);
  font-size: .67rem;
  font-weight: 700;
  color: var(--sfaq-accent);
  background: color-mix(in srgb, var(--sfaq-accent) 14%, #1a1a2e);
  border: 1px solid color-mix(in srgb, var(--sfaq-accent) 30%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1.4;
}
.sfaq-a-inner .sfaq-pre-wrap pre {
  margin: 0 !important;
  padding-top: 34px !important; /* room for dots + badge */
  padding-right: 76px !important;
}
/* dots ::before still works since pre has position:relative */
.sfaq-a-inner .sfaq-pre-wrap pre::before {
  top: 12px;
  left: 14px;
}

/* ══ BACKGROUND THEMES ══ */
.sfaq-wrap.sfaq-bg-transparent {
  background: transparent;
  box-shadow: none;
  border-color: var(--sfaq-border);
}
.sfaq-wrap.sfaq-bg-light {
  --sfaq-bg: #f4f4f8;
  --sfaq-surface: #ffffff;
  --sfaq-surface2: #f0f0f7;
  --sfaq-border: rgba(0,0,0,.08);
  --sfaq-text: #1a1a2e;
  --sfaq-muted: #888;
  background: var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-light .sfaq-a-inner { color:#4b5563; }
.sfaq-wrap.sfaq-bg-light .sfaq-search { background:#fff; color:#1a1a2e; }
.sfaq-wrap.sfaq-bg-light .sfaq-title {
  background: linear-gradient(135deg, #1a1a2e 30%, var(--sfaq-accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sfaq-wrap.sfaq-bg-dark {
  --sfaq-bg: #0f0f18;
  --sfaq-surface: #16161f;
  --sfaq-surface2: #1c1c2a;
  --sfaq-border: rgba(255,255,255,.07);
  --sfaq-text: #e8e8f0;
  --sfaq-muted: #6b6b80;
  background: var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-ocean {
  --sfaq-bg: #0a1628;
  --sfaq-surface: #0f2040;
  --sfaq-surface2: #152a52;
  --sfaq-border: rgba(99,179,255,.12);
  --sfaq-text: #e0f0ff;
  --sfaq-muted: #6a9ec0;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0,80,160,.4) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0,140,200,.2) 0%, transparent 60%),
              var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-forest {
  --sfaq-bg: #0d1f0d;
  --sfaq-surface: #142414;
  --sfaq-surface2: #1a301a;
  --sfaq-border: rgba(100,200,80,.1);
  --sfaq-text: #e0f5e0;
  --sfaq-muted: #6a9e6a;
  background: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(20,100,20,.4) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 90% 100%, rgba(40,120,40,.2) 0%, transparent 60%),
              var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-sunset {
  --sfaq-bg: #1a0a1e;
  --sfaq-surface: #251030;
  --sfaq-surface2: #2e1840;
  --sfaq-border: rgba(200,100,255,.1);
  --sfaq-text: #f0e0ff;
  --sfaq-muted: #9a70aa;
  background: radial-gradient(ellipse 80% 50% at 0% 0%, rgba(180,40,120,.3) 0%, transparent 55%),
              radial-gradient(ellipse 60% 50% at 100% 80%, rgba(80,40,200,.25) 0%, transparent 55%),
              var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-gradient-blue {
  background: linear-gradient(135deg, #0f0f18 0%, #0d1f40 50%, #0f0f18 100%);
}
.sfaq-wrap.sfaq-bg-gradient-purple {
  background: linear-gradient(135deg, #0f0f18 0%, #1a0a2e 50%, #0f0f18 100%);
}
.sfaq-wrap.sfaq-bg-custom {
  /* background set inline via style attribute */
}

/* ══════════════════════════════════
   BACKGROUND THEMES
══════════════════════════════════ */
.sfaq-wrap.sfaq-bg-light {
  --sfaq-bg:#f0f2f8; --sfaq-surface:#fff; --sfaq-surface2:#e8eaf4;
  --sfaq-border:rgba(0,0,0,.08); --sfaq-text:#1a1a2e; --sfaq-muted:#7a7a8e;
  background:var(--sfaq-bg);
}
.sfaq-wrap.sfaq-bg-light::before,
.sfaq-wrap.sfaq-bg-light::after { opacity:.08; }
.sfaq-wrap.sfaq-bg-light .sfaq-title {
  background:linear-gradient(135deg,#1a1a2e 20%,var(--sfaq-accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sfaq-wrap.sfaq-bg-light .sfaq-a-inner { color:#374151; }
.sfaq-wrap.sfaq-bg-light .sfaq-item { background:#fff; }

.sfaq-wrap.sfaq-bg-transparent {
  --sfaq-bg:transparent; --sfaq-surface:rgba(255,255,255,.05);
  --sfaq-surface2:rgba(255,255,255,.08); --sfaq-border:rgba(255,255,255,.12);
  background:transparent !important; box-shadow:none;
}

/* iOS26-style glassmorphism */
.sfaq-wrap.sfaq-bg-glassmorphism {
  --sfaq-bg:rgba(15,15,30,.55); --sfaq-surface:rgba(255,255,255,.07);
  --sfaq-surface2:rgba(255,255,255,.11); --sfaq-border:rgba(255,255,255,.14);
  background: rgba(15,15,30,.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 48px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.sfaq-wrap.sfaq-bg-glassmorphism .sfaq-item {
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.1);
}
.sfaq-wrap.sfaq-bg-glassmorphism .sfaq-search {
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.15);
}
.sfaq-wrap.sfaq-bg-glassmorphism .sfaq-toolbar {
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}

.sfaq-wrap.sfaq-bg-ocean {
  --sfaq-bg:#071422; --sfaq-surface:#0c1e38; --sfaq-surface2:#112548;
  --sfaq-border:rgba(56,189,248,.1); --sfaq-text:#e0f0ff; --sfaq-muted:#5a9ec0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%,rgba(14,116,180,.35) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%,rgba(6,182,212,.2) 0%,transparent 60%),
    #071422;
}
.sfaq-wrap.sfaq-bg-forest {
  --sfaq-bg:#081508; --sfaq-surface:#0d1f0e; --sfaq-surface2:#122a14;
  --sfaq-border:rgba(74,222,128,.08); --sfaq-text:#dcfce7; --sfaq-muted:#4a8a5a;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(22,101,52,.4) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 100%,rgba(21,128,61,.2) 0%,transparent 60%),
    #081508;
}
.sfaq-wrap.sfaq-bg-sunset {
  --sfaq-bg:#120818; --sfaq-surface:#1e0d2e; --sfaq-surface2:#280f3e;
  --sfaq-border:rgba(192,132,252,.1); --sfaq-text:#f5e8ff; --sfaq-muted:#9060aa;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%,rgba(157,23,77,.3) 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 80%,rgba(109,40,217,.3) 0%,transparent 55%),
    #120818;
}
.sfaq-wrap.sfaq-bg-gradient {
  /* inline style handles actual gradient */
  --sfaq-bg:transparent;
}
.sfaq-wrap.sfaq-bg-custom {
  /* inline style handles bg-color */
}