<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futureclicks | Personal Control Panel</title>
    <meta name="description" content="A curated launchpad for AI solo entrepreneurs and independent thinkers.">
    <link rel="stylesheet" href="css/style.css">
    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="assets/favicons/favicon.svg">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32.png">
    <link rel="apple-touch-icon" href="assets/favicons/apple-touch-icon.png">
    <!-- Google Fonts for Mono stack -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div style="display: flex; justify-content: space-between; align-items: start;">
            <div>
                <h1>Futureclicks</h1>
                <p>A control panel for the tools shaping modern society.</p>
            </div>
            <button id="theme-toggle" class="header-btn" title="Toggle Theme (T)" aria-label="Toggle Theme">[ MODE:
                LIGHT ]</button>
        </div>
    </header>

    <section id="pins-section">
        <span class="section-label">PINNED</span>
        <div id="pins-container">
            <!-- Pinned items will be rendered here -->
        </div>
    </section>

    <main id="dashboard-grid">
        <!-- Categories and links will be rendered here -->
    </main>

    <footer
        style="margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.75rem;">
        <p>Built for independent work. A Technosociology project.</p>
    </footer>

    <script type="module" src="js/app.js"></script>
</body>

</html>