{{ define "head" }}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" id="theme-color">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Resource hints for external domains -->
    <link rel="preconnect" href="https://imgs.blue" crossorigin>
    <link rel="dns-prefetch" href="https://imgs.blue">

    <!-- Preload critical assets -->
    <link rel="preload" href="/icons.svg" as="image" type="image/svg+xml">

    <!-- Theme: apply early to prevent flash -->
    <script>
    (function() {
        function getEffectiveTheme(pref) {
            if (pref === 'dark') return 'dark';
            if (pref === 'light') return 'light';
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }

        function updateThemeColor() {
            var meta = document.getElementById('theme-color');
            if (meta) {
                var bg = getComputedStyle(document.documentElement).getPropertyValue('--color-base-100').trim();
                if (bg) meta.setAttribute('content', bg);
            }
        }

        var pref = localStorage.getItem('theme') || 'system';
        var effective = getEffectiveTheme(pref);
        document.documentElement.classList.toggle('dark', effective === 'dark');
        document.documentElement.setAttribute('data-theme', effective);

        // Update theme-color after styles are applied
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateThemeColor);
        } else {
            updateThemeColor();
        }

        // Also update when system preference changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);
    })();
    </script>

    <!-- Tailwind CSS (built via npm run css:build) -->
    <link rel="stylesheet" href="/css/style.css?v={{ assetHash "css/style.css" }}">
    {{ extraCSS }}

    <!-- Bundled JS: HTMX + Actor Typeahead + App -->
    <script type="module" src="/js/bundle.min.js?v={{ assetHash "js/bundle.min.js" }}"></script>
{{ end }}