<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  
  <!-- ========================================== -->
  <!-- 1. DYNAMIC SEO & SEARCH ENGINE META TAGS   -->
  <!-- ========================================== -->
  <title><%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaTitle) ? tool.seo.metaTitle : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaTitle) ? landing.seo.metaTitle : 'HeySwan - 50+ Free Online Web & Developer Tools') %></title>
  <meta name="title" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaTitle) ? tool.seo.metaTitle : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaTitle) ? landing.seo.metaTitle : 'HeySwan - 50+ Free Online Web & Developer Tools') %>">
  <meta name="description" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaDescription) ? tool.seo.metaDescription : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaDescription) ? landing.seo.metaDescription : 'Ultra-fast, privacy-focused online utility tools.') %>">
  <meta name="keywords" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.targetKeyword) ? tool.seo.targetKeyword : ((typeof landing !== 'undefined' && landing.seo && landing.seo.keywords) ? landing.seo.keywords : 'web tools, developer utilities, formatters, compressors, image tools') %>">
  <meta name="robots" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.indexable === false) ? 'noindex, nofollow' : 'index, follow' %>">
  <link rel="canonical" href="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.canonical) ? tool.seo.canonical : 'https://tools.heyswan.cloud/' %>">
  <meta name="theme-color" content="#070a13">
  
  <!-- E-E-A-T Publisher & Author Signals -->
  <meta name="author" content="<%= (typeof settings !== 'undefined' && settings.siteName) ? settings.siteName : 'HeySwan' %>">
  <meta name="publisher" content="<%= (typeof settings !== 'undefined' && settings.siteName) ? settings.siteName : 'HeySwan Cloud' %>">

  <!-- ========================================== -->
  <!-- 2. FAVICONS & DEVICE APP ICONS             -->
  <!-- ========================================== -->
  <link rel="icon" type="image/x-icon" href="<%= (typeof landing !== 'undefined' && landing.seo && landing.seo.favicon) ? landing.seo.favicon : '/favicon.ico' %>">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- ========================================== -->
  <!-- 3. OPEN GRAPH / FACEBOOK / WHATSAPP SHARE  -->
  <!-- ========================================== -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="<%= (typeof settings !== 'undefined' && settings.siteName) ? settings.siteName : 'HeySwan' %>">
  <meta property="og:url" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.canonical) ? tool.seo.canonical : 'https://tools.heyswan.cloud/' %>">
  <meta property="og:title" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaTitle) ? tool.seo.metaTitle : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaTitle) ? landing.seo.metaTitle : 'HeySwan') %>">
  <meta property="og:description" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaDescription) ? tool.seo.metaDescription : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaDescription) ? landing.seo.metaDescription : 'Ultra-fast online utility tools.') %>">
  <meta property="og:image" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.ogImage && tool.seo.ogImage.trim()) ? tool.seo.ogImage : ((typeof landing !== 'undefined' && landing.seo && landing.seo.ogImage && landing.seo.ogImage.trim()) ? landing.seo.ogImage : 'https://tools.heyswan.cloud/banner.png') %>">

  <!-- ========================================== -->
  <!-- 4. TWITTER / X SUMMARY LARGE CARDS         -->
  <!-- ========================================== -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaTitle) ? tool.seo.metaTitle : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaTitle) ? landing.seo.metaTitle : 'HeySwan') %>">
  <meta name="twitter:description" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.metaDescription) ? tool.seo.metaDescription : ((typeof landing !== 'undefined' && landing.seo && landing.seo.metaDescription) ? landing.seo.metaDescription : 'Ultra-fast online utility tools.') %>">
  <meta name="twitter:image" content="<%= (typeof tool !== 'undefined' && tool.seo && tool.seo.ogImage && tool.seo.ogImage.trim()) ? tool.seo.ogImage : ((typeof landing !== 'undefined' && landing.seo && landing.seo.ogImage && landing.seo.ogImage.trim()) ? landing.seo.ogImage : 'https://tools.heyswan.cloud/banner.png') %>">

  <!-- ========================================== -->
  <!-- 5. INSTANT THEME BOOTSTRAPPER (NO FOUC)   -->
  <!-- ========================================== -->
  <script>
    (function() {
      try {
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const savedTheme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', savedTheme);
      } catch (e) {}
    })();
  </script>

  <!-- ========================================== -->
  <!-- 6. STRUCTURED SCHEMA.ORG JSON-LD GRAPH     -->
  <!-- ========================================== -->
  <!-- Google WebSite Schema -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "<%= (typeof settings !== 'undefined' && settings.siteName) ? settings.siteName : 'HeySwan' %>",
    "url": "https://tools.heyswan.cloud/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://tools.heyswan.cloud/?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
  </script>

  <!-- Tool-Specific WebApplication, Breadcrumb & FAQ Schema -->
  <% if (typeof tool !== 'undefined' && tool.name) { %>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "<%= tool.name %>",
        "url": "https://tools.heyswan.cloud/tool/<%= tool.slug %>",
        "applicationCategory": "<%= (tool.category || 'Utility') %>Application",
        "operatingSystem": "All",
        "browserRequirements": "Requires JavaScript",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://tools.heyswan.cloud/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "<%= tool.category || 'Utility' %> Tools",
            "item": "https://tools.heyswan.cloud/category/<%= (tool.category || 'utility').toLowerCase() %>"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "<%= tool.name %>",
            "item": "https://tools.heyswan.cloud/tool/<%= tool.slug %>"
          }
        ]
      }<% if (tool.faqs && tool.faqs.length > 0) { %>,
      {
        "@type": "FAQPage",
        "mainEntity": [
          <% tool.faqs.forEach(function(faq, i) { %>
          {
            "@type": "Question",
            "name": "<%- faq.q.replace(/"/g, '\\"') %>",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "<%- faq.a.replace(/"/g, '\\"') %>"
            }
          }<%= (i < tool.faqs.length - 1) ? ',' : '' %>
          <% }); %>
        ]
      }<% } %>
    ]
  }
  </script>
  <% } %>

  <!-- Google Analytics (GA4) -->
  <% if (typeof landing !== 'undefined' && landing.seo && landing.seo.gaId) { %>
    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= landing.seo.gaId %>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '<%= landing.seo.gaId %>');
    </script>
  <% } %>

  <!-- Google Search Console Tag -->
  <% if (typeof landing !== 'undefined' && landing.seo && landing.seo.gscTag) { %>
    <%- landing.seo.gscTag %>
  <% } %>

  <!-- Custom Head Code Injection from Admin -->
  <% if (typeof landing !== 'undefined' && landing.customCode && landing.customCode.headerScripts) { %>
    <%- landing.customCode.headerScripts %>
  <% } %>

  <!-- GLOBAL CSS & THEME VARIABLES -->
  <style>
    :root {
      --bg: #070a13;
      --surface: #0f172a;
      --surface-card: rgba(17, 24, 39, 0.75);
      --surface-hover: #1e293b;
      --border: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(59, 130, 246, 0.5);
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --primary: #3b82f6;
      --primary-hover: #2563eb;
      --primary-glow: rgba(59, 130, 246, 0.25);
      --accent: #10b981;
      --badge-bg: rgba(59, 130, 246, 0.12);
      --badge-text: #60a5fa;
      --glass-bg: rgba(255, 255, 255, 0.04);
      --glass-border: rgba(255, 255, 255, 0.07);
      --radius: 14px;
      --header-h: 56px;
      --sidebar-w: 280px;
      --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    [data-theme="light"] {
      --bg: #f8fafc;
      --surface: #ffffff;
      --surface-card: rgba(255, 255, 255, 0.9);
      --surface-hover: #f1f5f9;
      --border: rgba(0, 0, 0, 0.08);
      --border-hover: rgba(37, 99, 235, 0.4);
      --text: #0f172a;
      --text-muted: #64748b;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-glow: rgba(37, 99, 235, 0.15);
      --badge-bg: rgba(37, 99, 235, 0.08);
      --badge-text: #2563eb;
      --glass-bg: rgba(0, 0, 0, 0.03);
      --glass-border: rgba(0, 0, 0, 0.06);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: var(--font);
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: var(--primary);
      color: #fff;
      padding: 8px 16px;
      z-index: 9999;
      border-radius: 6px;
      text-decoration: none !important;
      font-weight: 600;
    }
    .skip-link:focus { top: 10px; }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* ── HEADER CONTAINER & GRID SHIELD ── */
    header.public-top-header {
      background: var(--surface) !important;
      border-bottom: 1px solid var(--border) !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      height: var(--header-h) !important;
      min-height: 56px !important;
      max-height: 56px !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
    }

    .nav-grid {
      display: grid !important;
      grid-template-columns: 38px 1fr 38px !important;
      align-items: center !important;
      height: 100% !important;
      width: 100% !important;
    }

    .nav-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
    .nav-center { display: flex !important; align-items: center !important; justify-content: center !important; }
    .nav-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; }

    /* ── PROTECTED ICON BUTTONS (NO UNDERLINE) ── */
    .icon-btn,
    #burgerBtn,
    #themeBtn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      max-width: 38px !important;
      max-height: 38px !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      border-radius: 10px !important;
      background: var(--surface-hover) !important;
      border: 1px solid var(--border) !important;
      color: var(--text) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      padding: 0 !important;
      margin: 0 !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
      transition: all 0.2s ease !important;
      text-decoration: none !important;
    }

    .icon-btn:hover,
    #burgerBtn:hover,
    #themeBtn:hover {
      border-color: var(--primary) !important;
      color: var(--primary) !important;
      transform: translateY(-1px) !important;
      text-decoration: none !important;
    }

    .icon-btn svg,
    #burgerBtn svg,
    #themeBtn svg {
      width: 19px !important;
      height: 19px !important;
      min-width: 19px !important;
      min-height: 19px !important;
      flex-shrink: 0 !important;
      display: block !important;
    }

    /* ── PURE TYPOGRAPHIC LOGO (NO UNDERLINE) ── */
    .logo {
      font-size: 1.35rem !important;
      font-weight: 900 !important;
      letter-spacing: -0.03em !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
      line-height: 1 !important;
      background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      transition: opacity 0.2s ease !important;
    }
    .logo:hover {
      opacity: 0.9 !important;
      text-decoration: none !important;
    }

    /* ── ANNOUNCEMENT RIBBON (UNDERLINE REMOVED) ── */
    .announcement-ribbon {
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
      border-bottom: 1px solid var(--border);
      padding: 8px 16px;
      text-align: center;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .announcement-ribbon a {
      color: var(--badge-text);
      text-decoration: none !important;
      margin-left: 6px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      transition: opacity 0.15s ease;
    }
    .announcement-ribbon a:hover {
      text-decoration: none !important;
      opacity: 0.85;
    }

    /* Mobile Drawer */
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .sidebar-overlay.active { opacity: 1; visibility: visible; }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-w);
      max-width: 85vw;
      height: 100vh;
      background: var(--surface);
      border-right: 1px solid var(--border);
      z-index: 2010;
      transform: translateX(-100%);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
    }
    .sidebar.active { transform: translateX(0); }

    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-h);
      padding: 0 16px;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-body {
      padding: 16px 12px;
      overflow-y: auto;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .sidebar-group-title {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      padding: 0 10px;
      margin-bottom: 6px;
    }

    .sidebar-nav {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      color: var(--text);
      text-decoration: none !important;
      font-weight: 500;
      font-size: 0.9rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .sidebar-item svg { color: var(--text-muted); flex-shrink: 0; }
    .sidebar-item:hover { background: var(--surface-hover); color: var(--primary); text-decoration: none !important; }
    .sidebar-item.active { background: var(--badge-bg); color: var(--badge-text); font-weight: 600; }
    .sidebar-item.active svg { color: var(--badge-text); }

    *:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
  </style>
</head>
<body>

  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- DYNAMIC ANNOUNCEMENT RIBBON -->
  <% if (typeof landing !== 'undefined' && landing.announcement && landing.announcement.enabled && landing.announcement.text) { %>
    <div class="announcement-ribbon">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
      <span><%= landing.announcement.text %></span>
      <% if (landing.announcement.link) { %>
        <a href="<%= landing.announcement.link %>">Try it now &rarr;</a>
      <% } %>
    </div>
  <% } %>

  <!-- SIDEBAR DRAWER OVERLAY -->
  <div class="sidebar-overlay" id="sidebarOverlay" aria-hidden="true"></div>

  <!-- SIDEBAR DRAWER (PUBLIC) -->
  <aside class="sidebar" id="sidebar" aria-label="Main Navigation" aria-hidden="true">
    <div class="sidebar-header">
      <a href="/" class="logo">HeySwan</a>
      <button class="icon-btn" id="sidebarClose" aria-label="Close navigation sidebar">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </button>
    </div>

    <div class="sidebar-body">
      <div>
        <div class="sidebar-group-title">Categories</div>
        <nav class="sidebar-nav">
          <a class="sidebar-item active" href="/#all" data-sidebar-cat="all">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            <span>All Tools</span>
          </a>
          <a class="sidebar-item" href="/category/developer" data-sidebar-cat="developer">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
            <span>Developer Tools</span>
          </a>
          <a class="sidebar-item" href="/category/text" data-sidebar-cat="text">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
            <span>Text Tools</span>
          </a>
          <a class="sidebar-item" href="/category/security" data-sidebar-cat="security">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
            <span>Security</span>
          </a>
          <a class="sidebar-item" href="/category/image" data-sidebar-cat="image">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
            <span>Image Tools</span>
          </a>
          <a class="sidebar-item" href="/category/utility" data-sidebar-cat="utility">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            <span>Utilities</span>
          </a>
        </nav>
      </div>

      <div>
        <div class="sidebar-group-title">Company</div>
        <nav class="sidebar-nav">
          <a href="/privacy" class="sidebar-item"><span>Privacy Policy</span></a>
          <a href="/terms" class="sidebar-item"><span>Terms of Service</span></a>
          <a href="/about" class="sidebar-item"><span>About Us</span></a>
          <a href="/contact" class="sidebar-item"><span>Contact Support</span></a>
        </nav>
      </div>
    </div>
  </aside>

  <!-- 56px COMPACT PUBLIC HEADER (PROTECTED) -->
  <header class="public-top-header">
    <div class="container nav-grid">
      <div class="nav-left">
        <button class="icon-btn" id="burgerBtn" aria-label="Open navigation sidebar" aria-expanded="false" aria-controls="sidebar">
          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
        </button>
      </div>

      <div class="nav-center">
        <a href="/" class="logo" aria-label="HeySwan Home">HeySwan</a>
      </div>

      <div class="nav-right">
        <button class="icon-btn" id="themeBtn" aria-label="Toggle dark/light mode">
          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
        </button>
      </div>
    </div>
  </header>