feat: CONTRABAND page - 16k+ FMHY resources with search, categories, military theme

api/app.py

@@ -820,6 +820,81 @@ def backup_all():
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
+# ─── Contraband (FMHY) ───────────────────────────────
+_contraband_cache = None
+_contraband_mtime = 0
+
+def _load_contraband():
+    global _contraband_cache, _contraband_mtime
+    p = DATA_DIR / 'contraband.json'
+    if not p.exists():
+        return {'categories': [], 'total_entries': 0, 'total_starred': 0, 'total_categories': 0}
+    mt = p.stat().st_mtime
+    if _contraband_cache is None or mt != _contraband_mtime:
+        with open(p, encoding='utf-8') as f:
+            _contraband_cache = json.load(f)
+        _contraband_mtime = mt
+    return _contraband_cache
+
+@app.route('/api/contraband')
+def contraband_index():
+    db = _load_contraband()
+    cats = []
+    for c in db.get('categories', []):
+        cats.append({
+            'slug': c['slug'], 'code': c['code'], 'name': c['name'], 'icon': c['icon'],
+            'entry_count': c['entry_count'], 'starred_count': c['starred_count'],
+            'subcategory_count': c['subcategory_count']
+        })
+    return jsonify({
+        'total_entries': db.get('total_entries', 0),
+        'total_starred': db.get('total_starred', 0),
+        'total_categories': db.get('total_categories', 0),
+        'categories': cats
+    })
+
+@app.route('/api/contraband/<slug>')
+def contraband_category(slug):
+    db = _load_contraband()
+    for c in db.get('categories', []):
+        if c['slug'] == slug:
+            return jsonify(c)
+    abort(404, f'Category {slug} not found')
+
+@app.route('/api/contraband/search')
+def contraband_search():
+    q = request.args.get('q', '').lower().strip()
+    if not q or len(q) < 2:
+        return jsonify({'query': q, 'results': [], 'total': 0})
+    starred_only = request.args.get('starred', '').lower() == 'true'
+    limit = min(int(request.args.get('limit', 100)), 500)
+    db = _load_contraband()
+    results = []
+    for cat in db.get('categories', []):
+        for sub in cat.get('subcategories', []):
+            for entry in sub.get('entries', []):
+                if starred_only and not entry.get('starred'):
+                    continue
+                searchable = f"{entry.get('name','')} {entry.get('description','')}".lower()
+                if q in searchable:
+                    results.append({
+                        'category_code': cat['code'], 'category_name': cat['name'],
+                        'category_slug': cat['slug'],
+                        'subcategory': sub['name'],
+                        'name': entry.get('name', ''), 'url': entry.get('url', ''),
+                        'description': entry.get('description', ''),
+                        'starred': entry.get('starred', False),
+                        'extra_links': entry.get('extra_links', [])
+                    })
+                    if len(results) >= limit:
+                        break
+            if len(results) >= limit:
+                break
+        if len(results) >= limit:
+            break
+    return jsonify({'query': q, 'results': results, 'total': len(results)})
+
+
 # ─── Run ─────────────────────────────────────────────
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=5000, debug=False)

css/contraband.css

@@ -0,0 +1,529 @@
+/* ═══════════════════════════════════════════════════════
+   CONTRABAND // FMHY DATABASE — Classified Resource Index
+   ═══════════════════════════════════════════════════════ */
+
+/* ─── Stats Bar ──────────────────────────────────────── */
+.crt-stats-bar {
+    display: flex;
+    gap: 2rem;
+    padding: 1rem 1.5rem;
+    background: rgba(16, 16, 16, 0.8);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--mil-red);
+    margin-bottom: 1.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+    flex-wrap: wrap;
+}
+
+.crt-stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.crt-stat-label {
+    color: var(--text-muted);
+    font-size: 0.55rem;
+    text-transform: uppercase;
+}
+
+.crt-stat-value {
+    color: var(--status-green);
+    font-weight: 700;
+    font-size: 0.8rem;
+}
+
+.crt-stat-value.amber { color: var(--status-amber); }
+.crt-stat-value.red { color: var(--mil-red); }
+
+/* ─── Search ─────────────────────────────────────────── */
+.crt-search-container {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.crt-search-input {
+    width: 100%;
+    padding: 0.85rem 1.25rem 0.85rem 2.75rem;
+    background: rgba(16, 16, 16, 0.9);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 1px;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.crt-search-input::placeholder {
+    color: var(--text-muted);
+    letter-spacing: 2px;
+}
+
+.crt-search-input:focus {
+    border-color: var(--mil-red);
+    box-shadow: 0 0 20px rgba(139, 0, 0, 0.15);
+}
+
+.crt-search-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    pointer-events: none;
+}
+
+.crt-search-count {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+}
+
+/* ─── Filter Toggles ─────────────────────────────────── */
+.crt-filters {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.crt-filter-btn {
+    padding: 0.4rem 0.85rem;
+    background: rgba(16, 16, 16, 0.8);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+}
+
+.crt-filter-btn:hover {
+    border-color: var(--text-secondary);
+    color: var(--text-secondary);
+}
+
+.crt-filter-btn.active {
+    border-color: var(--mil-red);
+    color: #fff;
+    background: rgba(139, 0, 0, 0.15);
+}
+
+/* ─── Category Grid ──────────────────────────────────── */
+.crt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.crt-card {
+    background: rgba(16, 16, 16, 0.6);
+    border: 1px solid var(--border);
+    padding: 1.25rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.crt-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0;
+    width: 3px; height: 100%;
+    background: var(--mil-red);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.crt-card:hover {
+    border-color: var(--text-muted);
+    background: rgba(20, 20, 20, 0.9);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.crt-card:hover::before { opacity: 1; }
+
+.crt-card-code {
+    font-family: var(--font-mono);
+    font-size: 0.55rem;
+    color: var(--mil-red);
+    letter-spacing: 2px;
+    margin-bottom: 0.35rem;
+    opacity: 0.8;
+}
+
+.crt-card-name {
+    font-family: var(--font-display);
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: 1px;
+    margin-bottom: 0.6rem;
+}
+
+.crt-card-icon {
+    float: right;
+    font-size: 1.4rem;
+    opacity: 0.5;
+    margin-top: -0.25rem;
+}
+
+.crt-card-meta {
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--font-mono);
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+    border-top: 1px solid var(--border);
+    padding-top: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.crt-card-count {
+    color: var(--status-green);
+}
+
+.crt-card-stars {
+    color: var(--status-amber);
+}
+
+.crt-card-status {
+    font-size: 0.5rem;
+    color: var(--status-green);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+/* ─── Back Button ────────────────────────────────────── */
+.crt-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(16, 16, 16, 0.8);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-bottom: 1.5rem;
+    text-transform: uppercase;
+}
+
+.crt-back:hover {
+    border-color: var(--mil-red);
+    color: #fff;
+}
+
+/* ─── Category Detail Header ─────────────────────────── */
+.crt-detail-header {
+    padding: 1.5rem;
+    background: rgba(16, 16, 16, 0.8);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--mil-red);
+    margin-bottom: 1.5rem;
+}
+
+.crt-detail-code {
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--mil-red);
+    letter-spacing: 3px;
+    margin-bottom: 0.25rem;
+}
+
+.crt-detail-title {
+    font-family: var(--font-display);
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: 2px;
+    margin-bottom: 0.5rem;
+}
+
+.crt-detail-meta {
+    display: flex;
+    gap: 1.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+}
+
+/* ─── Subcategory Sections ───────────────────────────── */
+.crt-subcategory {
+    margin-bottom: 1.5rem;
+}
+
+.crt-sub-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    background: rgba(20, 20, 20, 0.9);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--status-amber);
+    margin-bottom: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.crt-sub-header:hover {
+    background: rgba(25, 25, 25, 0.9);
+    border-left-color: var(--mil-red);
+}
+
+.crt-sub-toggle {
+    color: var(--text-muted);
+    font-size: 0.6rem;
+    transition: transform 0.3s ease;
+}
+
+.crt-sub-header.collapsed .crt-sub-toggle {
+    transform: rotate(-90deg);
+}
+
+.crt-sub-name {
+    font-family: var(--font-display);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    letter-spacing: 1px;
+    flex: 1;
+}
+
+.crt-sub-count {
+    font-family: var(--font-mono);
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+}
+
+.crt-sub-notes {
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--status-amber);
+    line-height: 1.5;
+    border-left: 2px solid var(--status-amber);
+    background: rgba(201, 162, 39, 0.05);
+}
+
+/* ─── Entry List ─────────────────────────────────────── */
+.crt-entries {
+    border: 1px solid var(--border);
+    border-top: none;
+}
+
+.crt-entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+    transition: all 0.2s ease;
+    font-family: var(--font-mono);
+}
+
+.crt-entry:last-child { border-bottom: none; }
+
+.crt-entry:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.crt-entry-star {
+    color: var(--status-amber);
+    font-size: 0.7rem;
+    min-width: 1rem;
+    text-align: center;
+    padding-top: 0.1rem;
+}
+
+.crt-entry-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.crt-entry-name {
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+.crt-entry-name a {
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.crt-entry-name a:hover {
+    color: var(--mil-red);
+}
+
+.crt-entry.starred .crt-entry-name a {
+    color: #fff;
+}
+
+.crt-entry-desc {
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin-top: 0.15rem;
+}
+
+.crt-entry-extra {
+    display: inline-flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.2rem;
+}
+
+.crt-entry-extra a {
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0.1rem 0.3rem;
+    border: 1px solid var(--border);
+    transition: all 0.2s ease;
+}
+
+.crt-entry-extra a:hover {
+    border-color: var(--mil-red);
+    color: var(--text-secondary);
+}
+
+/* ─── Search Results ─────────────────────────────────── */
+.crt-search-results {
+    margin-top: 1rem;
+}
+
+.crt-search-result {
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border);
+    border-bottom: none;
+    background: rgba(16, 16, 16, 0.6);
+    transition: all 0.2s ease;
+}
+
+.crt-search-result:last-child { border-bottom: 1px solid var(--border); }
+.crt-search-result:hover { background: rgba(20, 20, 20, 0.9); }
+
+.crt-result-breadcrumb {
+    font-family: var(--font-mono);
+    font-size: 0.5rem;
+    color: var(--mil-red);
+    letter-spacing: 1px;
+    margin-bottom: 0.25rem;
+}
+
+.crt-result-name {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 600;
+}
+
+.crt-result-name a {
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+.crt-result-name a:hover { color: var(--mil-red); }
+
+.crt-result-desc {
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    margin-top: 0.15rem;
+}
+
+/* ─── Loading State ──────────────────────────────────── */
+.crt-loading {
+    text-align: center;
+    padding: 3rem;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    letter-spacing: 2px;
+}
+
+.crt-loading::after {
+    content: '';
+    animation: crt-blink 0.8s infinite;
+}
+
+@keyframes crt-blink {
+    0%, 100% { content: '█'; }
+    50% { content: ' '; }
+}
+
+/* ─── Empty State ────────────────────────────────────── */
+.crt-empty {
+    text-align: center;
+    padding: 3rem;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    letter-spacing: 2px;
+    border: 1px dashed var(--border);
+}
+
+/* ─── FMHY Attribution ───────────────────────────────── */
+.crt-attribution {
+    margin-top: 2rem;
+    padding: 1rem 1.25rem;
+    background: rgba(16, 16, 16, 0.5);
+    border: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+    text-align: center;
+}
+
+.crt-attribution a {
+    color: var(--status-amber);
+    text-decoration: none;
+}
+
+.crt-attribution a:hover {
+    color: #fff;
+}
+
+/* ─── Responsive ─────────────────────────────────────── */
+@media (max-width: 768px) {
+    .crt-stats-bar {
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+    }
+    .crt-grid {
+        grid-template-columns: 1fr;
+    }
+    .crt-detail-title {
+        font-size: 1rem;
+    }
+    .crt-entry {
+        padding: 0.5rem 0.75rem;
+    }
+    .crt-filters {
+        gap: 0.4rem;
+    }
+}

depot/contraband.html

@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JAESWIFT // CONTRABAND</title>
+    <title>JAESWIFT // CONTRABAND — FMHY Resource Index</title>
+    <meta name="description" content="The largest classified index of free resources on the internet — catalogued, coded, and declassified.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/section.css">
+    <link rel="stylesheet" href="/css/contraband.css">
 </head>
 <body>
     <div class="scanline-overlay"></div>
@@ -37,17 +39,14 @@
     </div>
 
     <section class="section-header" style="padding-top: calc(var(--nav-height) + 1.5rem);">
-        <div class="section-header-label">DEPOT // SUPPLY & LOGISTICS</div>
-        <h1 class="section-header-title">CONTRABAND</h1>
-        <p class="section-header-sub">&gt; The largest classified index of free resources on the internet — catalogued by type.</p>
+        <div class="section-header-label">DEPOT // CLASSIFIED RESOURCE INDEX</div>
+        <h1 class="section-header-title">CONTRABAND <span class="accent">//</span> FMHY</h1>
+        <p class="section-header-sub">&gt; The largest classified index of free resources on the internet — 16,000+ assets catalogued, coded, and declassified.</p>
     </section>
 
-    <section class="subpage-content">
-        <div class="subpage-placeholder">
-            <div class="placeholder-icon">◆</div>
-            <div class="placeholder-status">UNDER CONSTRUCTION</div>
-            <div class="placeholder-text">This section is being prepared. Content deployment imminent.</div>
-            <div class="placeholder-classification">CLASSIFICATION: PENDING // STATUS: STANDBY</div>
+    <section class="subpage-content" style="max-width: 1400px; margin: 0 auto; padding: 0 2rem 3rem;">
+        <div id="contrabandRoot">
+            <div class="crt-loading">INITIALISING CONTRABAND DATABASE...</div>
         </div>
     </section>
 
@@ -65,5 +64,6 @@
 
     <script src="/js/nav.js"></script>
     <script src="/js/clock.js"></script>
+    <script src="/js/contraband.js"></script>
 </body>
-</html>
+</html>

js/contraband.js

@@ -0,0 +1,367 @@
+/* ═══════════════════════════════════════════════════════
+   CONTRABAND // FMHY Resource Database Controller
+   ═══════════════════════════════════════════════════════ */
+(function () {
+    'use strict';
+
+    const API = '/api/contraband';
+    const root = document.getElementById('contrabandRoot');
+    if (!root) return;
+
+    let state = { view: 'index', categories: [], searchTimeout: null };
+
+    // ─── Utilities ───────────────────────────────────────
+    function esc(s) {
+        const d = document.createElement('div');
+        d.textContent = s || '';
+        return d.innerHTML;
+    }
+
+    function fmt(n) {
+        return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    // ─── API Fetch ───────────────────────────────────────
+    async function api(endpoint) {
+        const res = await fetch(API + endpoint);
+        if (!res.ok) throw new Error(`API ${res.status}`);
+        return res.json();
+    }
+
+    // ─── Render: Index View ──────────────────────────────
+    function renderIndex(data) {
+        state.view = 'index';
+        state.categories = data.categories || [];
+
+        let html = '';
+
+        // Stats bar
+        html += `<div class="crt-stats-bar">
+            <div class="crt-stat"><span class="crt-stat-label">DATABASE</span><span class="crt-stat-value">FMHY</span></div>
+            <div class="crt-stat"><span class="crt-stat-label">TOTAL ASSETS</span><span class="crt-stat-value">${fmt(data.total_entries)}</span></div>
+            <div class="crt-stat"><span class="crt-stat-label">STARRED</span><span class="crt-stat-value amber">${fmt(data.total_starred)}</span></div>
+            <div class="crt-stat"><span class="crt-stat-label">CATEGORIES</span><span class="crt-stat-value">${data.total_categories}</span></div>
+            <div class="crt-stat"><span class="crt-stat-label">STATUS</span><span class="crt-stat-value">● DECLASSIFIED</span></div>
+        </div>`;
+
+        // Search
+        html += `<div class="crt-search-container">
+            <span class="crt-search-icon">⌕</span>
+            <input type="text" class="crt-search-input" id="crtSearch" placeholder="SEARCH ALL ASSETS..." autocomplete="off">
+            <span class="crt-search-count" id="crtSearchCount"></span>
+        </div>`;
+
+        // Search results container
+        html += `<div class="crt-search-results" id="crtSearchResults"></div>`;
+
+        // Category grid
+        html += `<div class="crt-grid" id="crtGrid">`;
+        for (const cat of state.categories) {
+            if (cat.entry_count === 0) continue;
+            html += `<div class="crt-card" data-slug="${esc(cat.slug)}">
+                <span class="crt-card-icon">${cat.icon}</span>
+                <div class="crt-card-code">${esc(cat.code)}</div>
+                <div class="crt-card-name">${esc(cat.name)}</div>
+                <div class="crt-card-meta">
+                    <span class="crt-card-count">${fmt(cat.entry_count)} assets</span>
+                    <span class="crt-card-stars">⭐ ${cat.starred_count}</span>
+                </div>
+                <div class="crt-card-status">● ACCESSIBLE</div>
+            </div>`;
+        }
+        html += `</div>`;
+
+        // Attribution
+        html += `<div class="crt-attribution">
+            DATA SOURCE: <a href="https://fmhy.net" target="_blank" rel="noopener">FREEMEDIAHECKYEAH</a>
+            &nbsp;//&nbsp; AUTO-SYNCED FROM <a href="https://github.com/fmhy/edit" target="_blank" rel="noopener">GITHUB.COM/FMHY/EDIT</a>
+            &nbsp;//&nbsp; ALL CREDIT TO THE FMHY COMMUNITY
+        </div>`;
+
+        root.innerHTML = html;
+        bindIndexEvents();
+    }
+
+    // ─── Render: Category Detail ─────────────────────────
+    function renderCategory(cat) {
+        state.view = 'detail';
+        let html = '';
+
+        // Back button
+        html += `<div class="crt-back" id="crtBack">◄ BACK TO INDEX</div>`;
+
+        // Detail header
+        html += `<div class="crt-detail-header">
+            <div class="crt-detail-code">${esc(cat.code)}</div>
+            <div class="crt-detail-title">${esc(cat.icon)} ${esc(cat.name)}</div>
+            <div class="crt-detail-meta">
+                <span>${fmt(cat.entry_count)} ASSETS</span>
+                <span>⭐ ${cat.starred_count} STARRED</span>
+                <span>${cat.subcategory_count} SECTIONS</span>
+            </div>
+        </div>`;
+
+        // Search within category
+        html += `<div class="crt-search-container">
+            <span class="crt-search-icon">⌕</span>
+            <input type="text" class="crt-search-input" id="crtCatSearch" placeholder="FILTER THIS CATEGORY..." autocomplete="off">
+        </div>`;
+
+        // Filter buttons
+        html += `<div class="crt-filters">
+            <button class="crt-filter-btn active" data-filter="all">ALL (${fmt(cat.entry_count)})</button>
+            <button class="crt-filter-btn" data-filter="starred">⭐ STARRED (${cat.starred_count})</button>
+        </div>`;
+
+        // Subcategories
+        html += `<div id="crtSubcategories">`;
+        for (let i = 0; i < cat.subcategories.length; i++) {
+            const sub = cat.subcategories[i];
+            if (sub.entries.length === 0 && sub.notes.length === 0) continue;
+
+            html += `<div class="crt-subcategory" data-sub-idx="${i}">`;
+            html += `<div class="crt-sub-header" data-toggle="${i}">
+                <span class="crt-sub-toggle">▾</span>
+                <span class="crt-sub-name">${esc(sub.name)}</span>
+                <span class="crt-sub-count">${sub.entries.length} items</span>
+            </div>`;
+
+            // Notes
+            if (sub.notes && sub.notes.length > 0) {
+                html += `<div class="crt-sub-notes">`;
+                for (const note of sub.notes) {
+                    html += `⚠ ${esc(note)}<br>`;
+                }
+                html += `</div>`;
+            }
+
+            // Entries
+            html += `<div class="crt-entries" id="crtEntries${i}">`;
+            for (const entry of sub.entries) {
+                html += renderEntry(entry);
+            }
+            html += `</div></div>`;
+        }
+        html += `</div>`;
+
+        // Attribution
+        html += `<div class="crt-attribution">
+            DATA SOURCE: <a href="https://fmhy.net" target="_blank" rel="noopener">FREEMEDIAHECKYEAH</a>
+            &nbsp;//&nbsp; CATEGORY: ${esc(cat.code)} // ${esc(cat.name)}
+        </div>`;
+
+        root.innerHTML = html;
+        bindDetailEvents(cat);
+    }
+
+    // ─── Render: Single Entry ────────────────────────────
+    function renderEntry(entry) {
+        const starClass = entry.starred ? ' starred' : '';
+        const starIcon = entry.starred ? '⭐' : '·';
+        let html = `<div class="crt-entry${starClass}">`;
+        html += `<span class="crt-entry-star">${starIcon}</span>`;
+        html += `<div class="crt-entry-content">`;
+
+        if (entry.url) {
+            html += `<div class="crt-entry-name"><a href="${esc(entry.url)}" target="_blank" rel="noopener">${esc(entry.name || entry.url)}</a></div>`;
+        } else if (entry.name) {
+            html += `<div class="crt-entry-name">${esc(entry.name)}</div>`;
+        }
+
+        if (entry.description) {
+            html += `<div class="crt-entry-desc">${esc(entry.description)}</div>`;
+        }
+
+        if (entry.extra_links && entry.extra_links.length > 0) {
+            html += `<div class="crt-entry-extra">`;
+            for (const link of entry.extra_links) {
+                html += `<a href="${esc(link.url)}" target="_blank" rel="noopener">${esc(link.name)}</a>`;
+            }
+            html += `</div>`;
+        }
+
+        html += `</div></div>`;
+        return html;
+    }
+
+    // ─── Render: Search Results ──────────────────────────
+    function renderSearchResults(data) {
+        const container = document.getElementById('crtSearchResults');
+        const countEl = document.getElementById('crtSearchCount');
+        const grid = document.getElementById('crtGrid');
+
+        if (!data.results || data.results.length === 0) {
+            container.innerHTML = data.query ? '<div class="crt-empty">NO MATCHING ASSETS FOUND</div>' : '';
+            countEl.textContent = data.query ? '0 RESULTS' : '';
+            if (grid) grid.style.display = data.query ? 'none' : '';
+            return;
+        }
+
+        countEl.textContent = `${data.results.length} RESULTS`;
+        if (grid) grid.style.display = 'none';
+
+        let html = '';
+        for (const r of data.results) {
+            const starIcon = r.starred ? '⭐ ' : '';
+            html += `<div class="crt-search-result">`;
+            html += `<div class="crt-result-breadcrumb">${esc(r.category_code)} // ${esc(r.category_name)} / ${esc(r.subcategory)}</div>`;
+            html += `<div class="crt-result-name">${starIcon}`;
+            if (r.url) {
+                html += `<a href="${esc(r.url)}" target="_blank" rel="noopener">${esc(r.name || r.url)}</a>`;
+            } else {
+                html += esc(r.name);
+            }
+            html += `</div>`;
+            if (r.description) {
+                html += `<div class="crt-result-desc">${esc(r.description)}</div>`;
+            }
+            html += `</div>`;
+        }
+        container.innerHTML = html;
+    }
+
+    // ─── Event Bindings: Index ───────────────────────────
+    function bindIndexEvents() {
+        // Card clicks
+        document.querySelectorAll('.crt-card').forEach(card => {
+            card.addEventListener('click', () => {
+                const slug = card.dataset.slug;
+                loadCategory(slug);
+            });
+        });
+
+        // Global search
+        const searchInput = document.getElementById('crtSearch');
+        if (searchInput) {
+            searchInput.addEventListener('input', () => {
+                clearTimeout(state.searchTimeout);
+                const q = searchInput.value.trim();
+                if (q.length < 2) {
+                    renderSearchResults({ query: '', results: [] });
+                    return;
+                }
+                state.searchTimeout = setTimeout(async () => {
+                    try {
+                        const data = await api(`/search?q=${encodeURIComponent(q)}&limit=100`);
+                        renderSearchResults(data);
+                    } catch (e) {
+                        console.warn('Search failed:', e);
+                    }
+                }, 300);
+            });
+        }
+    }
+
+    // ─── Event Bindings: Detail ──────────────────────────
+    function bindDetailEvents(cat) {
+        // Back button
+        document.getElementById('crtBack').addEventListener('click', () => {
+            loadIndex();
+        });
+
+        // Subcategory toggle (collapse/expand)
+        document.querySelectorAll('.crt-sub-header').forEach(header => {
+            header.addEventListener('click', () => {
+                const idx = header.dataset.toggle;
+                const entries = document.getElementById(`crtEntries${idx}`);
+                if (!entries) return;
+                const isCollapsed = header.classList.contains('collapsed');
+                if (isCollapsed) {
+                    header.classList.remove('collapsed');
+                    entries.style.display = '';
+                } else {
+                    header.classList.add('collapsed');
+                    entries.style.display = 'none';
+                }
+            });
+        });
+
+        // Filter buttons
+        document.querySelectorAll('.crt-filter-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.crt-filter-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                const filter = btn.dataset.filter;
+                document.querySelectorAll('.crt-entry').forEach(entry => {
+                    if (filter === 'starred') {
+                        entry.style.display = entry.classList.contains('starred') ? '' : 'none';
+                    } else {
+                        entry.style.display = '';
+                    }
+                });
+            });
+        });
+
+        // Category search (local filter)
+        const catSearch = document.getElementById('crtCatSearch');
+        if (catSearch) {
+            catSearch.addEventListener('input', () => {
+                const q = catSearch.value.trim().toLowerCase();
+                document.querySelectorAll('.crt-entry').forEach(entry => {
+                    if (!q) {
+                        entry.style.display = '';
+                        return;
+                    }
+                    const text = entry.textContent.toLowerCase();
+                    entry.style.display = text.includes(q) ? '' : 'none';
+                });
+                // Hide empty subcategories
+                document.querySelectorAll('.crt-subcategory').forEach(sub => {
+                    const visible = sub.querySelectorAll('.crt-entry:not([style*="display: none"])');
+                    sub.style.display = visible.length > 0 || !q ? '' : 'none';
+                });
+            });
+        }
+    }
+
+    // ─── Load Functions ──────────────────────────────────
+    async function loadIndex() {
+        root.innerHTML = '<div class="crt-loading">ACCESSING CONTRABAND DATABASE...</div>';
+        try {
+            const data = await api('');
+            renderIndex(data);
+            history.pushState({ view: 'index' }, '', '/depot/contraband');
+        } catch (e) {
+            root.innerHTML = `<div class="crt-empty">DATABASE ACCESS DENIED // ${esc(e.message)}</div>`;
+        }
+    }
+
+    async function loadCategory(slug) {
+        root.innerHTML = '<div class="crt-loading">DECRYPTING CATEGORY DATA...</div>';
+        try {
+            const data = await api(`/${slug}`);
+            renderCategory(data);
+            history.pushState({ view: 'detail', slug }, '', `/depot/contraband?cat=${slug}`);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        } catch (e) {
+            root.innerHTML = `<div class="crt-empty">CATEGORY NOT FOUND // ${esc(e.message)}</div>`;
+        }
+    }
+
+    // ─── Handle Back/Forward ─────────────────────────────
+    window.addEventListener('popstate', (e) => {
+        if (e.state && e.state.view === 'detail' && e.state.slug) {
+            loadCategory(e.state.slug);
+        } else {
+            loadIndex();
+        }
+    });
+
+    // ─── Init ────────────────────────────────────────────
+    function init() {
+        // Check URL for category param
+        const params = new URLSearchParams(window.location.search);
+        const cat = params.get('cat');
+        if (cat) {
+            loadCategory(cat);
+        } else {
+            loadIndex();
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();