/*
 * Converter FAQ and help pages (converter/{name}/content/faq.html and help-documentation.html).
 * One stylesheet for all 38 pages, replacing the inline <style> block each page carried until 2 Oct 2026.
 * Dark is the default; [data-theme="light"] is applied by the head one-liner and /libs/site.js (storage key
 * "theme", shared with the guide, blog, legal and converter listing pages). The palette matches tools/tools.css.
 */
:root {
    --primary: #8B5CF6;
    --bg: #0a0a14;
    --text: #eee;
    --text-2: #a8a8b3;
    --text-3: #888;
    --text-strong: #ddd;
    --placeholder: #555;
    --surface: rgba(255, 255, 255, .03);
    --surface-2: rgba(255, 255, 255, .02);
    --surface-hover: rgba(255, 255, 255, .04);
    --field: rgba(255, 255, 255, .05);
    --field-border: rgba(255, 255, 255, .1);
    --border: rgba(255, 255, 255, .08);
    --border-2: rgba(255, 255, 255, .06);
    --shadow: rgba(0, 0, 0, .1);
    --glow-1: rgba(139, 92, 246, .12);
    --glow-2: rgba(236, 72, 153, .08);
}

[data-theme="light"] {
    --bg: #f8f9fa;
    --text: #0a0a14;
    --text-2: #6c757d;
    --text-3: #6c757d;
    --text-strong: #0a0a14;
    --placeholder: #9aa0a6;
    --surface: rgba(0, 0, 0, .03);
    --surface-2: rgba(0, 0, 0, .02);
    --surface-hover: rgba(0, 0, 0, .05);
    --field: #ffffff;
    --field-border: rgba(0, 0, 0, .12);
    --border: rgba(0, 0, 0, .1);
    --border-2: rgba(0, 0, 0, .08);
    --shadow: rgba(0, 0, 0, .06);
    --glow-1: rgba(139, 92, 246, .08);
    --glow-2: rgba(236, 72, 153, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; padding: 20px; padding-top: 90px; }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 20% 50%, var(--glow-1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, var(--glow-2) 0%, transparent 50%); pointer-events: none; z-index: -1; }
.container { max-width: 800px; margin: 0 auto; background: var(--surface); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 20px; padding: 40px; box-shadow: 0 20px 40px var(--shadow); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; margin-bottom: 24px; }
.back:hover { color: var(--primary); }
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, #8B5CF6, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subtitle { color: var(--text-2); margin-bottom: 24px; font-size: 15px; }

/* Theme toggle, the same button as on the guide pages (tools/tools.css) */
.theme-toggle { position: fixed; top: 90px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: var(--field); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--field-border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s ease; z-index: 40; }
.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2); }

/* FAQ page */
.search { width: 100%; padding: 12px 16px; background: var(--field); border: 1px solid var(--field-border); border-radius: 10px; color: var(--text); font-size: 14px; outline: none; margin-bottom: 24px; }
.search:focus { border-color: var(--primary); }
.search::placeholder { color: var(--placeholder); }
.faq-item { border: 1px solid var(--border-2); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color .2s; }
.faq-item:hover { border-color: rgba(139, 92, 246, .3); }
.faq-q { width: 100%; padding: 16px 20px; background: var(--surface-2); border: none; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; font-family: inherit; }
.faq-q:hover { background: var(--surface-hover); }
.faq-q svg { flex-shrink: 0; transition: transform .3s; color: var(--primary); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.faq-item.open .faq-a { max-height: 500px; transition: max-height .5s ease-in; }
.faq-a p { padding: 0 20px 16px; color: var(--text-2); font-size: 14px; line-height: 1.7; }

/* Help page */
.help-page .subtitle { margin-bottom: 8px; }
.intro { color: var(--text-3); font-size: 14px; margin-bottom: 24px; line-height: 1.7; }
.toc { background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 20px; margin-bottom: 28px; }
.toc h3 { font-size: 13px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.toc ol { padding-left: 20px; margin: 0; }
.toc li { margin-bottom: 6px; font-size: 14px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--primary); }
.help-section { border: 1px solid var(--border-2); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color .2s; }
.help-section:hover { border-color: rgba(139, 92, 246, .3); }
.section-header { width: 100%; padding: 16px 20px; background: var(--surface-2); border: none; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; font-family: inherit; }
.section-header:hover { background: var(--surface-hover); }
.section-header svg { flex-shrink: 0; transition: transform .3s; color: var(--primary); }
.help-section.open .section-header svg { transform: rotate(180deg); }
.section-body { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.help-section.open .section-body { max-height: 2000px; transition: max-height .5s ease-in; }
.section-body p { padding: 0 20px 16px; color: var(--text-2); font-size: 14px; line-height: 1.8; white-space: pre-line; }
.section-body b { color: var(--text-strong); }

@media (max-width: 768px) {
    body { padding: 12px; }
    .container { padding: 24px; }
    h1 { font-size: 1.5rem; }
    .theme-toggle { top: 75px; right: 15px; }
}