Htaccess Generator

Htaccess Generator: Generate htaccess with speed and clarity. Runs straight in the browser and keeps the workflow lightweight. Useful when you need a.

No sign-up 100% free Private

HTTPS Redirect

Force secure connection via HTTPS

WWW Redirect

Redirecionar www ↔ non-www

Custom Error Pages

404, 403, 500 personalizados

Disable Directory Listing

Bloquear listagem de arquivos (Options -Indexes)

Compressão Gzip/Deflate

Enable compression for HTML, CSS, JS and JSON

Cache Control

Set cache headers by file type

Block IPs

Deny access from specific IPs

<div class="htaccess-rule bg-surface border border-border rounded-xl overflow-hidden" data-rule="cors">
                <label class="flex items-center gap-3 p-3 cursor-pointer hover:bg-elevated/50 transition-colors">
                    <input type="checkbox" id="rule-cors" class="ft-checkbox" />
                    <div class="flex-1">
                        <span class="text-sm font-semibold text-text-primary">CORS Headers</span>
                        <p class="text-xs text-text-muted">Allow Cross-Origin Resource Sharing</p>
                    </div>
                </label>
                <div id="opts-cors" class="hidden border-t border-border px-4 py-3">
                    <input type="text" id="cors-origin" class="ft-input text-sm"
                           placeholder="https://example.com (ou * para todos)" value="*" />
                </div>
            </div>

<div class="htaccess-rule bg-surface border border-border rounded-xl" data-rule="charset">
                <label class="flex items-center gap-3 p-3 cursor-pointer hover:bg-elevated/50 transition-colors">
                    <input type="checkbox" id="rule-charset" class="ft-checkbox" />
                    <div class="flex-1">
                        <span class="text-sm font-semibold text-text-primary">Forçar Charset UTF-8</span>
                        <p class="text-xs text-text-muted">AddDefaultCharset UTF-8</p>
                    </div>
                </label>
            </div>

<button type="button" id="btn-htaccess-reset" class="ft-btn ft-btn-ghost w-full text-sm">
                Clear all rules
            </button>
        </div>

<div>
            <div class="sticky top-20">
                <div class="flex items-center justify-between mb-2">
                    <label class="ft-label">.htaccess</label>
                    <div class="flex gap-2">
                        
<button type="button"
        class="ft-btn-outline ft-btn-sm"
        data-copy="htaccess-output"
        aria-label="Copy">
    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>
    <span class="copy-label">Copy</span>
</button>

<button type="button" id="btn-htaccess-dl" class="ft-btn ft-btn-ghost ft-btn-sm" title="Download .htaccess">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        </button>
                    </div>
                </div>
                <div class="bg-elevated border border-border rounded-2xl overflow-hidden">
                    <div class="flex items-center gap-2 px-4 py-2 bg-surface border-b border-border">
                        <div class="w-3 h-3 rounded-full bg-red-500/50"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500/50"></div>
                        <span class="ml-2 text-xs text-text-muted font-mono">.htaccess</span>
                    </div>
                    <pre id="htaccess-output"
                         class="p-4 text-xs font-mono text-text-primary overflow-x-auto overflow-y-auto max-h-[500px] leading-relaxed whitespace-pre"
                         aria-live="polite"></pre>
                </div>
                <p class="ft-hint mt-2" id="htaccess-lines-count"></p>
            </div>
        </div>
    </div>
</div>

</div>

</div>
    </div>

<div class="mb-8">
            
<div id="feedback-widget" class="flex flex-col items-center gap-3 py-4" data-tool="htaccess-generator">
    <p class="ft-text-sm text-text-muted font-medium">
        Was this tool helpful?
    </p>
    <div class="flex items-center gap-3" id="feedback-buttons">
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="up"
                aria-label="Yes, helpful">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
            </svg>
            Yes
        </button>
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="down"
                aria-label="No, not helpful">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L14 22h0a3.13 3.13 0 0 1-3-3.88Z" />
            </svg>
            No
        </button>
    </div>
    <p id="feedback-thanks" class="ft-text-sm text-success font-medium hidden">
        Thank you for your feedback!
    </p>
</div>

</div>
</div>

<section class="bg-transparent border-t border-border/50">
        <div class="ft-container ft-section">
            <div class="ft-cartoon-card max-w-3xl mx-auto">
                <div class="ft-text-seo prose prose-sm dark:prose-invert">
                    <h2>Why use Htaccess Generator</h2><p>People searching for quick answers often land here because Htaccess Generator matches common searches such as Htaccess Generator, online htaccess and a practical way to handle htaccess The page is meant to produce htaccess fast, with output that is ready for testing, examples or operational use.</p><p>Use Htaccess Generator when you need to create test-ready output on demand without opening spreadsheets, heavy editors or back-and-forth forms. Useful for developers, analysts and QA routines that need a fast result without writing throwaway scripts. The page is structured to answer the practical question first, then give enough context to review the result with confidence. That matters when you need quantity, consistency and less manual repetition.</p><h3>Where this tool is most useful</h3><ul><li>Quick generation for a practical way to handle Htaccess Generator</li><li>Clear output that is easier to review and trust for technical review and quick validation</li><li>Local-first handling for Works well in short operational workflows</li></ul><p>For client-side tools, the page highlights local execution and practical steps so the result feels trustworthy before you move on. If this step is only part of your workflow, nearby tools like Robots.txt, Meta Tags Generator and Env Formatter help you continue without redoing context from scratch.</p><div class="ft-seo-legacy"><h2>.htaccess Generator — Visual Builder for Apache Rewrite Rules</h2><p>The <strong>.htaccess Generator</strong> is a visual builder for creating Apache .htaccess configuration rules without memorizing complex directive syntax. Build redirects, URL rewrites, CORS headers, browser caching rules, and security headers through an intuitive form-based interface.</p><p>Select the type of rule you need — 301/302 redirects, RewriteRule patterns, CORS access-control headers, Cache-Control and Expires directives, or security headers like X-Frame-Options, Content-Security-Policy, and HSTS. The tool generates the correct Apache syntax with proper flags (L, R, NC, QSA) and outputs a complete .htaccess file you can download or copy.</p><p><strong>Web developers</strong> use this tool when migrating sites, setting up URL rewrites, or configuring HTTPS redirects. <strong>System administrators</strong> generate cache and security header configurations for Apache servers. <strong>WordPress administrators</strong> create custom redirect rules and performance optimizations without risking syntax errors.</p><p>.htaccess Generator is part of the facilita.tools suite of free browser-based developer utilities. Available in Portuguese, English, and Spanish, optimized for desktop and mobile browsers.</p></div>
                </div>
                    <p class="ft-caption mt-4">
                        <time datetime="2026-03-24">Last updated: 2026-03-24</time>
                    </p>
            </div>
        </div>
    </section>
    <section class="border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Frequently Asked Questions</h2>
            
    <div class="ft-accordion">
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    What does Htaccess Generator do?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Htaccess Generator helps you generate htaccess with a short, direct workflow. It is meant for people who need an answer quickly without losing the context behind the result.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    When should I use Htaccess Generator?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Use Htaccess Generator when the priority is speed, repeatability and fewer manual steps. It works well for quick checks, operational routines and situations where you do not want to open a full application for a small task.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Does Htaccess Generator keep my data private?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>For client-side tools, the main processing happens in the browser. That reduces friction for sensitive or temporary inputs and makes the page useful for quick private checks.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    How is Htaccess Generator different from nearby tools?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Htaccess Generator focuses on one narrow job so the page stays fast and easier to trust. If your workflow continues after this step, Robots.txt is the kind of related tool you would use next.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    What types of rules can I generate?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>You can generate 301/302 redirects, URL rewrites with regex, CORS headers, browser caching directives, security headers (CSP, HSTS, X-Frame-Options), and HTTPS enforcement rules.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Will the generated file work on Nginx?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>No. The .htaccess format is specific to Apache web servers. Nginx uses a different configuration syntax (nginx.conf). The generated rules will only work on Apache with mod_rewrite enabled.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Can I combine multiple rules in one file?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Yes. Add as many rules as you need — redirects, caching, security headers — and the tool combines them into a single .htaccess file with proper ordering and syntax.</div>
                </div>
            </details>
    </div>

</div>
    </section>
    <section id="related-tools" class="relative overflow-hidden border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Related Tools</h2>
            
    <div class="ft-grid-tools">
            <a href="/en/robots-txt-generator" class="ft-card-tool group" aria-label="Robots.txt">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #0EA5E9; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="bot" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Robots.txt</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/meta-tags-generator" class="ft-card-tool group" aria-label="Meta Tags Generator">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #0EA5E9; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="tags" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Meta Tags Generator</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/env-formatter" class="ft-card-tool group" aria-label="Env Formatter">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #0EA5E9; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="file-cog" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Env Formatter</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/en/regex-tester" class="ft-card-tool group" aria-label="Regex Tester">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #0EA5E9; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="regex" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Regex Tester</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
    </div>

</div>
    </section>

</main>
        </div>
    </div>

<footer class="mt-auto">
    <div class="ft-footer-shell">
        <a href="/en" class="ft-footer-wordmark block mb-12 sm:mb-16" aria-label="facilita.tools home">
            facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span>
        </a>

<div class="space-y-5">
                <a href="/en" class="flex items-center gap-2.5">
                    <img src="/images/brand/site-logo.webp" alt="" class="h-8 w-8 flex-shrink-0" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true" />
                    <span class="text-lg font-bold">facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span></span>
                </a>
                <p class="text-sm leading-relaxed max-w-sm">
                    Free online tools for developers, professionals, and everyday tasks.
                </p>
                <div class="flex items-center gap-3 pt-1">
                    <a href="https://github.com/Wmedrado" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="GitHub">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        <span class="sr-only">GitHub opens in new tab</span>
                    </a>
                    <a href="https://www.linkedin.com/in/devwilliam" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="LinkedIn">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        <span class="sr-only">LinkedIn opens in new tab</span>
                    </a>
                </div>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Tools
                </p>
                <ul class="space-y-2.5">
                        <li><a href="/en/tools/developer" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Developer</a></li>
                        <li><a href="/en/tools/finance" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Finance</a></li>
                        <li><a href="/en/tools/calculators" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Calculators</a></li>
                        <li><a href="/en/tools/text" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Text</a></li>
                        <li><a href="/en/tools/security" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Security</a></li>
                        <li><a href="/en/tools/date-time" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Date & Time</a></li>
                </ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Resources
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/en/favorites" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Favorites</a></li>
                    <li><a href="/en/api/plans" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Plans</a></li>
                    <li><a href="/en/api/docs" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">API Docs</a></li>

</ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Company
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/en/about" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">About</a></li>
                    <li><a href="/en/terms" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Terms of Use</a></li>
                    <li><a href="/en/privacy" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Privacy Policy</a></li>
                    <li><button type="button" data-cookie-preferences class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200 text-left">Cookie preferences</button></li>
                </ul>
            </div>
        </div>

<div class="border-t border-white/20 mt-12 pt-6">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/60">
            <p>© 2026 facilita.tools. All rights reserved.</p>

<a href="https://medradolabs.com" target="_blank" rel="noopener noreferrer"
               class="flex items-center gap-1.5 text-white/60 hover:text-white transition-colors duration-200">
                <img src="/images/brand/medrado-labs-icon.webp" alt="" width="14" height="14" class="w-3.5 h-3.5 rounded-sm" aria-hidden="true">
                Developed by Medrado Labs
            </a>

<section id="ft-chat-panel"
             class="ft-chat-panel hidden"
             role="dialog"
             aria-modal="false"
             aria-label="Assistant">
        <div class="ft-chat-header">
            <div class="min-w-0">
                <p class="ft-chat-kicker">AI Assistant</p>
                <h2 class="truncate text-base font-semibold text-text-primary">Assistant</h2>
            </div>
            <button id="ft-chat-close"
                    type="button"
                    class="ft-chat-icon-btn"
                    aria-label="Close">
                <i data-lucide="x" class="h-5 w-5" aria-hidden="true"></i>
            </button>
        </div>

<div id="ft-chat-thread"
             class="ft-chat-thread">
            <article class="ft-chat-bubble ft-chat-bubble-assistant">
                <p>Hi! I'm the Facilita assistant. I can generate, validate and format CPF/CNPJ, help with passwords, JSON, conversions, calculators, and answer questions about our tools. How can I help?</p>
            </article>
            <div class="ft-chat-quick-actions" aria-label="Ask me anything or try "generate cpf"...">
                    <button type="button" class="ft-chat-chip" data-chat-message="generate cpf">Generate CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="validate cpf">Validate CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="generate cnpj">Generate CNPJ</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="hello">Say hello</button>
            </div>
        </div>

<form id="ft-chat-form" class="ft-chat-form">
            <label class="sr-only" for="ft-chat-input">Ask me anything or try "generate cpf"...</label>
            <div class="flex items-end gap-2">
                <input id="ft-chat-input"
                       type="text"
                       class="ft-chat-input"
                       placeholder="Ask me anything or try "generate cpf"..."
                       autocomplete="off"
                       enterkeyhint="send" />
                <button id="ft-chat-send"
                        type="submit"
                        class="ft-chat-send"
                        aria-label="Send">
                    <i data-lucide="send-horizontal" class="h-5 w-5" aria-hidden="true"></i>
                </button>
            </div>
        </form>
    </section>

<div id="cookie-consent-banner"
     class="ft-cookie-consent translate-y-full print:hidden"
     role="dialog"
     aria-modal="false"
     aria-labelledby="cookie-consent-title"
     style="display:none;">
    <div class="ft-cookie-card">
        <div class="ft-cookie-copy">
            <div class="ft-cookie-heading">
                <span class="ft-cookie-icon" aria-hidden="true">
                    <i data-lucide="shield-check" class="h-5 w-5"></i>
                </span>
                <div>
                    <p class="ft-cookie-kicker">Privacy</p>
                    <h2 id="cookie-consent-title">You control cookies</h2>
                </div>
            </div>
            <p class="ft-cookie-message">
                We use essential cookies and local preferences to keep the site working. Measurement and attribution are only enabled with your consent.
                <a href="/en/privacy">Privacy Policy</a>.
            </p>

<div id="cookie-consent-details" class="ft-cookie-details" hidden>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Necessary</strong>
                        <p>Authentication, security, language, consent and session stability.</p>
                    </div>
                    <span>Always on</span>
                </div>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Local preferences</strong>
                        <p>Theme, accessibility, local favorites and technical cache requested by the user.</p>
                    </div>
                    <span>Always on</span>
                </div>
                <label class="ft-cookie-choice ft-cookie-choice-toggle" for="cookie-consent-analytics">
                    <div>
                        <strong>Measurement and attribution</strong>
                        <p>Helps understand traffic origin and improve content without selling personal data.</p>
                    </div>
                    <input id="cookie-consent-analytics" type="checkbox" />
                    <span class="ft-cookie-switch" aria-hidden="true"></span>
                </label>
            </div>
        </div>

<div class="ft-cookie-actions">
            <button id="cookie-consent-decline" type="button" class="ft-cookie-btn ft-cookie-btn-muted">
                Reject non-essential
            </button>
            <button id="cookie-consent-manage"
                    type="button"
                    class="ft-cookie-btn ft-cookie-btn-ghost"
                    aria-expanded="false"
                    aria-controls="cookie-consent-details">
                Preferences
            </button>
            <button id="cookie-consent-save" type="button" class="ft-cookie-btn ft-cookie-btn-primary" hidden>
                Save preferences
            </button>
            <button id="cookie-consent-accept" type="button" class="ft-cookie-btn ft-cookie-btn-primary">
                Accept all
            </button>
        </div>
    </div>
</div>

<div class="flex items-center justify-between p-4 border-b border-border">
        <h2 class="text-sm font-semibold text-text-primary flex items-center gap-2">
            <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="4" r="1" fill="currentColor" stroke="none"/>
                <path d="M7 8l5 0l5 0"/>
                <path d="M12 8l0 8"/>
                <path d="M8 20l4-4l4 4"/>
            </svg>
            Accessibility
        </h2>
        <button type="button"
                class="p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-elevated
                       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                aria-label="Close"
                data-a11y-close>
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

<button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="high-contrast"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">High Contrast</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="dyslexia-font"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
                    </svg>
                    <span class="text-sm text-text-primary">Dyslexia Font</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="highlight-links"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                    </svg>
                    <span class="text-sm text-text-primary">Highlight Links</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="reading-guide"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 6h16M4 12h16M4 18h7"/>
                    </svg>
                    <span class="text-sm text-text-primary">Reading Guide</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="big-cursor"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3zM13 13l6 6"/>
                    </svg>
                    <span class="text-sm text-text-primary">Big Cursor</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="pause-animations"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Pause Animations</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="text-spacing"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 6H3M3 12h18M3 18h18M8 6v12m8-12v12"/>
                    </svg>
                    <span class="text-sm text-text-primary">Text Spacing</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>

<div class="pt-2 border-t border-border">
            <button type="button"
                    class="w-full text-center text-xs text-text-muted hover:text-error transition-colors py-2
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded"
                    data-a11y-action="reset">
                Reset all preferences
            </button>
        </div>
    </div>
</div>