<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║  TNI Device Compatibility Calculator                                         ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  Version: 1.9.0                                                              ║
║  Updated: 2025-12-16                                                         ║
║  Part of: TNI Toolkit (https://github.com/salvo-praxis/tni-toolkit)          ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  Description:                                                                ║
║    Device resource planning tool. Calculate CPU, memory, and storage         ║
║    requirements for program configurations across all device types           ║
║    including servers, switches, routers, firewalls, debuggers, and rigs.     ║
║                                                                              ║
║  Features:                                                                   ║
║    - Device selection with category filtering and search                     ║
║    - Program/firmware resource calculation                                   ║
║    - SATA expansion support for applicable devices                           ║
║    - Shareable configuration codes (URL hash support)                        ║
║    - File-level resource breakdown table                                     ║
║    - Colorized stats display (CPU/MEM/HDD/W/T/s)                             ║
║    - Traversal metrics (TPT, TPS, T/s) with granular toggles                 ║
║    - Program throughput metrics (O/t, I/t, Stack, O/s) with toggles          ║
║    - Comprehensive device tooltip on hover (optional)                        ║
║    - Warranty and vendor information display                                 ║
║    - Config menu with persistent settings                                    ║
║                                                                              ║
║  Contributors:                                                               ║
║    - Salvo Praxis (original author, style guide compliance)                  ║
║    - Claude (Anthropic)                                                      ║
║    - AlinaNova (device categories, search, sharecode, file table)          ║
║    - gamers2000 (warranty display, refurb devices suggestions)               ║
║    - Singing Pot Beast (auto-prune/config menu suggestion)                   ║
║                                                                              ║
║  Bug Reports:                                                                ║
║    - Блинчик (program search box fix)                                        ║
║                                                                              ║
║  Changelog:                                                                  ║
║    1.9.0 - Added "Back to Toolkit" config toggle in General section;         ║
║            simplified backlink logic for archive.org compatibility;          ║
║            added GitHub SVG icon to footer                                   ║
║    1.8.2 - Fixed program search box not filtering results; search now        ║
║            matches program names, output uses, and input uses; reported by   ║
║            Блинчик                                                           ║
║    1.8.1 - Firewall specs corrected: 4/1/2 → 6/3/3; firmware field now       ║
║            supports arrays for multiple pre-installed programs; reported by  ║
║            gamers2000                                                        ║
║    1.8.0 - Program throughput metrics: output/tick (O/t), input/tick (I/t),  ║
║            stack limit, output/sec (O/s) with config toggles; Throughput     ║
║            Summary panel with Input (needs) / Output / Dynamic Capacity      ║
║            boxes; aggregated I/O by use-type across all programs; dynamic    ║
║            capacity calculations (decentro-wallet: 10/free hdd, decentro-    ║
║            collector: 6/free mem); SATA behavior split into minimum vs       ║
║            maximize toggles; config menu two-column layout; results panel    ║
║            shows when programs selected without device; file table headers   ║
║            changed to CPU MEM HDD; formula labels: "free mem" / "free hdd"   ║
║    1.7.0 - Config menu with granular toggles: show refurbs, vendor,          ║
║            warranty, power (W), traversals/sec (T/s), traversals/tick (TPT), ║
║            ticks/sec (TPS); comprehensive device tooltip on hover (opt-in);  ║
║            localStorage persistence; clear buttons; colorized stats;         ║
║            traversals_per_tick and cpu_cycle data for all devices;           ║
║            Decentro Rigs category with Dvergar; refurbished devices data;    ║
║            auto-SATA toggle; auto-prune disabled pending compatibility data  ║
║    1.6.0 - Warranty display, refurbished devices data (gamers2000)           ║
║    1.5.0 - SATA stepper control (−/+ buttons, auto-adjust + manual override) ║
║    1.4.1 - Fixed SATA storage value: 6 → 4 (thanks Kurtchen!)                ║
║    1.4.0 - Smart SATA (x/y slots, cost-per-need), program type filter,       ║
║            device category dividers, needs on own line (←/→ arrows),         ║
║            click-to-deselect, sharecode fixes, excluded refurbs              ║
║    1.3.0 - Header/footer standardization, container max-width, back button   ║
║    1.2.0 - Added all device types, category filter, search, sharecode,       ║
║            file table display (AlinaNova); renamed from server-calculator; ║
║            style guide alignment                                             ║
║    1.1.0 - Added firmware programs support, ICC1 sata_slots fix              ║
║    1.0.0 - Initial release with server/program compatibility                 ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='bg' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%230a0e14'/><stop offset='50%' stop-color='%231a1f2e'/><stop offset='100%' stop-color='%230d1117'/></linearGradient><filter id='glowG' x='-150%' y='-150%' width='400%' height='400%'><feGaussianBlur stdDeviation='4'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.53 0 0 0 0.2 0'/></filter><filter id='glowO' x='-150%' y='-150%' width='400%' height='400%'><feGaussianBlur stdDeviation='3'/><feColorMatrix type='matrix' values='0 0 0 0 0.94 0 0 0 0 0.53 0 0 0 0 0.24 0 0 0 0.2 0'/></filter><radialGradient id='inset' cx='50%' cy='50%' r='50%'><stop offset='70%' stop-color='%23000' stop-opacity='0'/><stop offset='100%' stop-color='%23000' stop-opacity='0.12'/></radialGradient></defs><rect width='64' height='64' rx='8' fill='%23f0883e'/><rect x='1.5' y='1.5' width='61' height='61' rx='6.5' fill='url(%23bg)'/><rect x='1.5' y='1.5' width='61' height='61' rx='6.5' fill='url(%23inset)'/><g filter='url(%23glowG)'><line x1='32' y1='32' x2='16' y2='16' stroke='%2300ff88' stroke-width='3'/><line x1='32' y1='32' x2='48' y2='16' stroke='%2300ff88' stroke-width='3'/><line x1='32' y1='32' x2='16' y2='48' stroke='%2300ff88' stroke-width='3'/><line x1='32' y1='32' x2='48' y2='48' stroke='%2300ff88' stroke-width='3'/><circle cx='16' cy='16' r='6' fill='%2300ff88'/><circle cx='48' cy='16' r='6' fill='%2300ff88'/><circle cx='16' cy='48' r='6' fill='%2300ff88'/><circle cx='48' cy='48' r='6' fill='%2300ff88'/><circle cx='32' cy='32' r='10' fill='%2300ff88'/></g><g filter='url(%23glowO)'><line x1='32' y1='32' x2='32' y2='12' stroke='%23f0883e' stroke-width='2'/><line x1='32' y1='32' x2='32' y2='52' stroke='%23f0883e' stroke-width='2'/><line x1='32' y1='32' x2='12' y2='32' stroke='%23f0883e' stroke-width='2'/><line x1='32' y1='32' x2='52' y2='32' stroke='%23f0883e' stroke-width='2'/><circle cx='32' cy='12' r='4' fill='%23f0883e'/><circle cx='32' cy='52' r='4' fill='%23f0883e'/><circle cx='12' cy='32' r='4' fill='%23f0883e'/><circle cx='52' cy='32' r='4' fill='%23f0883e'/></g><line x1='32' y1='32' x2='32' y2='12' stroke='%239c5628' stroke-width='1.5'/><line x1='32' y1='32' x2='32' y2='52' stroke='%239c5628' stroke-width='1.5'/><line x1='32' y1='32' x2='12' y2='32' stroke='%239c5628' stroke-width='1.5'/><line x1='32' y1='32' x2='52' y2='32' stroke='%239c5628' stroke-width='1.5'/><line x1='32' y1='32' x2='16' y2='16' stroke='%2300a658' stroke-width='2'/><line x1='32' y1='32' x2='48' y2='16' stroke='%2300a658' stroke-width='2'/><line x1='32' y1='32' x2='16' y2='48' stroke='%2300a658' stroke-width='2'/><line x1='32' y1='32' x2='48' y2='48' stroke='%2300a658' stroke-width='2'/><circle cx='32' cy='12' r='3.5' fill='%23161b22' stroke='%23f0883e' stroke-width='1.5'/><circle cx='32' cy='52' r='3.5' fill='%23161b22' stroke='%23f0883e' stroke-width='1.5'/><circle cx='12' cy='32' r='3.5' fill='%23161b22' stroke='%23f0883e' stroke-width='1.5'/><circle cx='52' cy='32' r='3.5' fill='%23161b22' stroke='%23f0883e' stroke-width='1.5'/><circle cx='16' cy='16' r='5' fill='%23161b22' stroke='%2300ff88' stroke-width='2'/><circle cx='48' cy='16' r='5' fill='%23161b22' stroke='%2300ff88' stroke-width='2'/><circle cx='16' cy='48' r='5' fill='%23161b22' stroke='%2300ff88' stroke-width='2'/><circle cx='48' cy='48' r='5' fill='%23161b22' stroke='%2300ff88' stroke-width='2'/><circle cx='32' cy='32' r='8' fill='%2300ff88'/><circle cx='32' cy='32' r='4' fill='%230a0e14'/></svg>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Calculator - TNI Toolkit</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Plan your TNI server builds. Select devices, check off programs, verify CPU/Memory/Storage requirements fit. Works offline.">
    <meta name="author" content="Salvo Praxis">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Device Calculator - TNI Toolkit">
    <meta property="og:description" content="Plan your TNI server builds. Select devices, check off programs, verify CPU/Memory/Storage requirements fit.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://tni-toolkit.salvo.host/tools/device-calculator.html">
    <meta property="og:site_name" content="TNI Toolkit">
    <meta property="og:image" content="https://tni-toolkit.salvo.host/images/og/og-device-calculator.png">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Device Calculator - TNI Toolkit">
    <meta name="twitter:description" content="Plan your TNI server builds. Select devices, verify CPU/Memory/Storage requirements fit.">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://tni-toolkit.salvo.host/tools/device-calculator.html">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Custom Scrollbars */
        * {
            scrollbar-width: thin;
            scrollbar-color: #30363d #0d1117;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #0d1117;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #30363d;
            border-radius: 4px;
            border: 1px solid #0d1117;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #58a6ff;
        }
        
        ::-webkit-scrollbar-corner {
            background: #0d1117;
        }
        
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0a0e14 0%, #1a1f2e 50%, #0d1117 100%);
            color: #c9d1d9;
            font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
            margin: 0;
            padding: 24px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Back to Toolkit button */
        .back-link {
            display: none;
            margin-top: 16px;
            color: #58a6ff;
            text-decoration: none;
            font-size: 11px;
            padding: 6px 12px;
            border: 1px solid #30363d;
            border-radius: 4px;
            transition: all 0.15s;
        }
        .back-link:hover {
            border-color: #58a6ff;
            background: rgba(88, 166, 255, 0.1);
        }
        .back-link.visible {
            display: inline-block;
        }
        
        .header {
            text-align: center;
            padding: 40px 0 30px;
            border-bottom: 1px solid #30363d;
            margin-bottom: 30px;
        }
        
        .header h1 {
            margin: 0 0 8px 0;
            font-size: 20px;
            font-weight: 600;
            color: #00ff88;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
        }
        
        .header h1 span {
            color: #58a6ff;
        }
        
        .header p {
            margin: 0;
            font-size: 12px;
            color: #8b949e;
        }
        
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: stretch;
        }
        
        .grid > div {
            display: flex;
            flex-direction: column;
            max-height: 520px;
        }
        
        @media (max-width: 800px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
        
        .section-title {
            font-size: 13px;
            font-weight: 600;
            color: #58a6ff;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* === FORM INPUTS (Style Guide Compliant) === */
        .search-input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 6px;
            border: 1px solid #30363d;
            background: rgba(22, 27, 34, 0.8);
            color: #c9d1d9;
            font-size: 12px;
            font-family: inherit;
            margin-bottom: 12px;
            transition: border-color 0.15s;
        }
        
        .search-input:hover {
            border-color: #58a6ff;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #58a6ff;
        }
        
        .search-input::placeholder {
            color: #8b949e;
        }
        
        /* === FILTER ROW (Dropdown + Clear Button) === */
        .filter-row {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .filter-row .custom-select {
            flex: 1;
            margin-bottom: 0;
        }
        
        .clear-btn {
            padding: 10px 12px;
            border-radius: 6px;
            border: 1px solid #30363d;
            background: rgba(22, 27, 34, 0.8);
            color: #8b949e;
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        
        .clear-btn:hover {
            border-color: #f85149;
            color: #f85149;
            background: rgba(248, 81, 73, 0.1);
        }
        
        /* === CUSTOM DROPDOWN (Style Guide Compliant) === */
        .custom-select {
            position: relative;
            margin-bottom: 12px;
        }
        
        .custom-select-trigger {
            width: 100%;
            padding: 10px 12px;
            padding-right: 36px;
            border-radius: 6px;
            border: 1px solid #30363d;
            background: rgba(22, 27, 34, 0.8);
            color: #c9d1d9;
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            transition: border-color 0.15s;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .custom-select-trigger:hover {
            border-color: #58a6ff;
        }
        
        .custom-select-trigger.open {
            border-color: #58a6ff;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        .custom-select-trigger::after {
            content: '▼';
            position: absolute;
            right: 12px;
            font-size: 10px;
            color: #8b949e;
            transition: transform 0.15s;
        }
        
        .custom-select-trigger.open::after {
            transform: rotate(180deg);
        }
        
        .custom-select-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(22, 27, 34, 0.98);
            border: 1px solid #58a6ff;
            border-top: none;
            border-radius: 0 0 6px 6px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 100;
            display: none;
        }
        
        .custom-select-options.open {
            display: block;
        }
        
        .custom-select-option {
            padding: 10px 12px;
            font-size: 12px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid #21262d;
        }
        
        .custom-select-option:last-child {
            border-bottom: none;
        }
        
        .custom-select-option:hover {
            background: rgba(88, 166, 255, 0.08);
        }
        
        .custom-select-option.selected {
            background: rgba(0, 255, 136, 0.1);
            color: #00ff88;
        }
        
        /* === LIST CONTAINER === */
        .list-container {
            background: rgba(22,27,34,0.8);
            border: 1px solid #30363d;
            border-radius: 6px;
            min-height: 200px;
            flex: 1;
            overflow-y: auto;
        }
        
        .list-item {
            padding: 10px 12px;
            border-bottom: 1px solid #21262d;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .list-item:hover {
            background: rgba(88,166,255,0.08);
        }
        
        .list-item.selected {
            background: rgba(88,166,255,0.15);
        }
        
        .list-item.program-selected {
            background: rgba(0,255,136,0.1);
        }
        
        .list-item.program-selected:hover {
            background: rgba(0,255,136,0.15);
        }
        
        .list-item:not(.program-selected):hover {
            background: rgba(0,255,136,0.05);
        }
        
        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        
        .item-header-left {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
        }
        
        .item-name {
            font-weight: 500;
            font-size: 12px;
            color: #c9d1d9;
            white-space: nowrap;
        }
        
        .item-name.active {
            color: #58a6ff;
        }
        
        .item-name.program-active {
            color: #00ff88;
        }
        
        .item-vendor {
            color: #7d8590;
            font-size: 10px;
            margin-left: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .item-price {
            color: #f0883e;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .item-stats {
            font-size: 10px;
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .item-stats-left {
            display: flex;
            gap: 10px;
        }
        
        .stat {
            font-family: 'JetBrains Mono', monospace;
        }
        
        .stat-label {
            opacity: 0.7;
            margin-right: 2px;
        }
        
        .stat-cpu { color: #58a6ff; }
        .stat-mem { color: #a371f7; }
        .stat-hdd { color: #f0883e; }
        .stat-pwr { color: #f0c674; }
        .stat-tpt { color: #7ee787; }
        .stat-tps { color: #79c0ff; }
        .stat-tsec { color: #00ff88; }
        /* Program stats */
        .stat-output { color: #7ee787; }
        .stat-input { color: #ff7b72; }
        .stat-stack { color: #d2a8ff; }
        .stat-osec { color: #00ff88; }
        
        .stat-warranty {
            color: #8b949e;
            font-size: 9px;
        }
        
        .stat-warranty .stat-label {
            opacity: 0.6;
        }
        
        /* Device tooltip */
        .list-item.has-tooltip {
            position: relative;
        }
        
        .device-tooltip {
            position: fixed;
            z-index: 1000;
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 12px;
            font-size: 11px;
            min-width: 200px;
            max-width: 280px;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        
        .device-tooltip::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 10px;
            height: 10px;
            background: #161b22;
            border-left: 1px solid #30363d;
            border-top: 1px solid #30363d;
            transform: rotate(45deg);
        }
        
        .device-tooltip-header {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #30363d;
        }
        
        .device-tooltip-model {
            color: #00ff88;
            font-weight: 600;
            font-size: 12px;
        }
        
        .device-tooltip-vendor {
            color: #8b949e;
            font-size: 10px;
            margin-top: 2px;
        }
        
        .device-tooltip-section {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
        }
        
        .device-tooltip-section:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .device-tooltip-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 3px;
        }
        
        .device-tooltip-row:last-child {
            margin-bottom: 0;
        }
        
        .device-tooltip-label {
            color: #8b949e;
        }
        
        .device-tooltip-value {
            color: #c9d1d9;
            font-weight: 500;
        }
        
        .device-tooltip-value.cpu { color: #58a6ff; }
        .device-tooltip-value.mem { color: #a371f7; }
        .device-tooltip-value.hdd { color: #f0883e; }
        .device-tooltip-value.pwr { color: #f0c674; }
        .device-tooltip-value.tsec { color: #00ff88; }
        
        .device-tooltip-calc {
            font-size: 10px;
            color: #7d8590;
            margin-top: 4px;
        }
        
        .item-stats .firmware-tag {
            color: #00ff88;
            margin-left: 6px;
        }
        
        .program-meta {
            font-size: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .program-stats {
            display: flex;
            gap: 8px;
        }
        
        .type-badge {
            padding: 2px 6px;
            border-radius: 3px;
            margin-right: 8px;
        }
        
        .type-producer { background: rgba(88,166,255,0.2); }
        .type-converter { background: rgba(240,136,62,0.2); }
        .type-storage { background: rgba(139,148,158,0.2); }
        .type-firmware { background: rgba(0,255,136,0.2); color: #00ff88; }
        
        .category-divider {
            padding: 6px 12px;
            background: rgba(0,0,0,0.3);
            border-bottom: 1px solid #30363d;
            font-size: 10px;
            color: #7d8590;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .item-output {
            font-size: 10px;
            color: #7d8590;
            margin-top: 4px;
        }
        
        .item-requires {
            font-size: 10px;
            color: #f0883e;
            margin-top: 2px;
        }
        
        .install-method {
            color: #00ff88;
            font-style: italic;
        }
        
        .sata-toggle {
            margin-top: 12px;
            padding: 10px 12px;
            background: rgba(22,27,34,0.8);
            border: 1px solid #30363d;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
        }
        
        .sata-toggle.disabled {
            opacity: 0.5;
        }
        
        .sata-toggle.disabled .sata-stepper button {
            cursor: not-allowed;
            pointer-events: none;
        }
        
        .sata-label {
            color: #c9d1d9;
        }
        
        .sata-stepper {
            display: flex;
            align-items: center;
            gap: 0;
            background: #21262d;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #30363d;
        }
        
        .sata-stepper button {
            width: 28px;
            height: 26px;
            border: none;
            background: linear-gradient(180deg, #2d333b 0%, #22272e 100%);
            color: #58a6ff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .sata-stepper button:hover:not(:disabled) {
            background: linear-gradient(180deg, #3d444d 0%, #2d333b 100%);
            color: #00ff88;
        }
        
        .sata-stepper button:active:not(:disabled) {
            background: linear-gradient(180deg, #22272e 0%, #2d333b 100%);
        }
        
        .sata-stepper button:disabled {
            color: #484f58;
            cursor: not-allowed;
            background: #21262d;
        }
        
        .sata-stepper button:first-child {
            border-right: 1px solid #30363d;
        }
        
        .sata-stepper button:last-child {
            border-left: 1px solid #30363d;
        }
        
        .sata-stepper-value {
            min-width: 40px;
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: #00ff88;
            padding: 0 6px;
            background: rgba(0, 255, 136, 0.05);
        }
        
        .sata-info {
            color: #8b949e;
            flex: 1;
        }
        
        /* === RESULTS PANEL === */
        .results {
            margin-top: 24px;
            border-radius: 8px;
            padding: 20px;
        }
        
        .results.valid {
            background: linear-gradient(135deg, rgba(0,255,136,0.05) 0%, rgba(22,27,34,0.9) 100%);
            border: 1px solid #238636;
        }
        
        .results.invalid {
            background: linear-gradient(135deg, rgba(248,81,73,0.05) 0%, rgba(22,27,34,0.9) 100%);
            border: 1px solid #f85149;
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .results-title {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .results-title.valid { color: #00ff88; }
        .results-title.invalid { color: #f85149; }
        
        .total-cost {
            font-size: 14px;
            font-weight: 700;
        }
        
        .cost-value { color: #f0883e; }
        .cost-sata { font-size: 11px; color: #8b949e; }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        
        @media (max-width: 600px) {
            .metrics-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .metric-box {
            border-radius: 6px;
            padding: 12px;
        }
        
        .metric-box.fits {
            background: rgba(0,255,136,0.1);
            border: 1px solid rgba(0,255,136,0.2);
        }
        
        .metric-box.over {
            background: rgba(248,81,73,0.1);
            border: 1px solid rgba(248,81,73,0.2);
        }
        
        .metric-label {
            font-size: 11px;
            color: #8b949e;
            margin-bottom: 4px;
        }
        
        .metric-value {
            font-size: 20px;
            font-weight: 700;
        }
        
        .metric-value.fits { color: #00ff88; }
        .metric-value.over { color: #f85149; }
        
        .metric-remaining {
            font-size: 10px;
            color: #8b949e;
            margin-top: 4px;
        }
        
        .metric-bar {
            margin-top: 8px;
            height: 4px;
            background: #21262d;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .metric-bar-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s;
        }
        
        .metric-bar-fill.fits { background: #00ff88; }
        .metric-bar-fill.over { background: #f85149; }
        
        .programs-summary {
            margin-top: 16px;
            font-size: 11px;
            color: #8b949e;
        }
        
        .programs-summary strong {
            color: #c9d1d9;
        }
        
        /* === FILE TABLE (Style Guide Compliant) === */
        .file-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            margin-top: 12px;
        }
        
        .file-table th {
            text-align: left;
            color: #58a6ff;
            font-weight: 600;
            padding: 8px 12px;
            border-bottom: 1px solid #30363d;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .file-table th:not(:first-child) {
            text-align: center;
            width: 40px;
        }
        
        .file-table td {
            padding: 6px 12px;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
            color: #c9d1d9;
        }
        
        .file-table td:first-child {
            color: #00ff88;
        }
        
        .file-table td:not(:first-child) {
            text-align: center;
            color: #8b949e;
        }
        
        .file-table tr:hover td {
            background: rgba(88, 166, 255, 0.05);
        }
        
        /* I/O Summary Tables */
        .io-section {
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid #30363d;
        }
        
        .io-section-title {
            font-size: 10px;
            font-weight: 600;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .io-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        
        .io-box {
            background: rgba(13, 17, 23, 0.6);
            border: 1px solid #30363d;
            border-radius: 4px;
            padding: 10px 12px;
        }
        
        .io-box-title {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }
        
        .io-box-title.output { color: #7ee787; }
        .io-box-title.input { color: #ff7b72; }
        .io-box-title.storage { color: #d2a8ff; }
        
        .io-box-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 6px;
        }
        
        .io-col-header {
            display: flex;
            font-size: 9px;
            color: #8b949e;
            white-space: nowrap;
        }
        
        .io-col-header .h-tick {
            width: 42px;
            text-align: right;
        }
        
        .io-col-header .h-sep {
            width: 16px;
            text-align: center;
        }
        
        .io-col-header .h-sec {
            width: 40px;
            text-align: left;
        }
        
        .io-items {
            display: flex;
            flex-direction: column;
        }
        
        .io-item {
            display: flex;
            align-items: baseline;
            font-size: 11px;
            color: #c9d1d9;
            padding: 2px 0;
        }
        
        .io-item-use {
            flex: 1;
            opacity: 0.8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 8px;
        }
        
        .io-item-tick {
            width: 42px;
            text-align: right;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .io-item-sep {
            width: 16px;
            text-align: center;
            opacity: 0.4;
            flex-shrink: 0;
        }
        
        .io-item-sec {
            width: 40px;
            text-align: left;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .io-item-formula {
            text-align: left;
            padding-left: 6px;
            opacity: 0.5;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .io-total {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px dashed #30363d;
            font-weight: 600;
            font-size: 12px;
        }
        
        /* === SHARECODE PANEL (Style Guide Compliant) === */
        .sharecode-panel {
            margin-top: 24px;
            background: rgba(22, 27, 34, 0.8);
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px 20px;
        }
        
        .sharecode-panel h3 {
            font-size: 11px;
            font-weight: 600;
            color: #58a6ff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }
        
        .sharecode-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .sharecode-input {
            flex: 1;
            min-width: 200px;
            padding: 10px 12px;
            background: rgba(22, 27, 34, 0.8);
            border: 1px solid #30363d;
            border-radius: 6px;
            color: #00ff88;
            font-family: inherit;
            font-size: 11px;
            transition: border-color 0.15s;
        }
        
        .sharecode-input:hover {
            border-color: #58a6ff;
        }
        
        .sharecode-input:focus {
            outline: none;
            border-color: #58a6ff;
        }
        
        .sharecode-input::placeholder {
            color: #8b949e;
        }
        
        /* === BUTTONS (Style Guide Compliant) === */
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 4px;
            font-size: 11px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            background: rgba(88, 166, 255, 0.1);
            border: 1px solid #30363d;
            color: #8b949e;
        }
        
        .btn-secondary:hover {
            border-color: #58a6ff;
            color: #58a6ff;
        }
        
        .btn-secondary:active {
            transform: translateY(1px);
        }
        
        /* === FOOTER === */
        .site-footer {
            margin-top: 40px;
            padding-top: 16px;
            border-top: 1px solid #30363d;
            text-align: center;
            font-size: 11px;
            color: #7d8590;
        }
        
        .site-footer a {
            color: #8b949e;
            text-decoration: none;
            transition: color 0.15s;
        }
        
        .site-footer a:hover {
            color: #58a6ff;
        }
        
        .site-footer .sep {
            margin: 0 8px;
            color: #30363d;
        }
        
        .site-footer .footer-note {
            margin: 12px 0;
            color: #7d8590;
        }
        
        .site-footer .footer-badges {
            margin-top: 12px;
        }
        
        .site-footer .version-badge {
            display: inline-block;
            background: rgba(0, 255, 136, 0.1);
            border: 1px solid #30363d;
            color: #8b949e;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 10px;
            margin-right: 8px;
        }
        
        .site-footer .license-badge {
            display: inline-block;
            background: rgba(88, 166, 255, 0.1);
            border: 1px solid #30363d;
            color: #8b949e;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 10px;
            text-decoration: none;
            transition: all 0.15s;
        }
        
        .site-footer .license-badge:hover {
            border-color: #58a6ff;
            color: #58a6ff;
        }
        
        .hidden {
            display: none;
        }
        
        /* === CONFIG MENU === */
        .config-bar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 16px;
            position: relative;
        }
        
        .config-btn {
            background: rgba(22, 27, 34, 0.8);
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 8px 12px;
            color: #8b949e;
            cursor: pointer;
            font-family: inherit;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }
        
        .config-btn:hover {
            border-color: #58a6ff;
            color: #c9d1d9;
        }
        
        .config-btn.active {
            border-color: #58a6ff;
            background: rgba(88, 166, 255, 0.1);
            color: #58a6ff;
        }
        
        .config-btn svg {
            width: 14px;
            height: 14px;
        }
        
        .config-panel {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(22, 27, 34, 0.95);
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 16px;
            min-width: 600px;
            max-width: 700px;
            z-index: 100;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            display: none;
        }
        
        .config-panel.show {
            display: block;
        }
        
        .config-panel h3 {
            color: #58a6ff;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #30363d;
        }
        
        .config-columns {
            display: flex;
            gap: 24px;
        }
        
        .config-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .config-full-width {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #30363d;
        }
        
        .config-section {
            margin-bottom: 0;
        }
        
        .config-section-title {
            color: #8b949e;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .config-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
            min-height: 52px;
        }
        
        .config-option:last-child {
            border-bottom: none;
        }
        
        .config-option-label {
            color: #c9d1d9;
            font-size: 12px;
        }
        
        .config-option-desc {
            color: #7d8590;
            font-size: 10px;
            margin-top: 2px;
            max-width: 220px;
        }
        
        /* Toggle Switch */
        .toggle {
            position: relative;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
        }
        
        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #21262d;
            border: 1px solid #30363d;
            border-radius: 10px;
            transition: 0.2s;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 2px;
            bottom: 2px;
            background: #8b949e;
            border-radius: 50%;
            transition: 0.2s;
        }
        
        .toggle input:checked + .toggle-slider {
            background: rgba(0, 255, 136, 0.2);
            border-color: #00ff88;
        }
        
        .toggle input:checked + .toggle-slider:before {
            transform: translateX(16px);
            background: #00ff88;
        }
        
        .toggle input:focus + .toggle-slider {
            box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
        }
        
        /* Disabled config option */
        .config-option.disabled {
            opacity: 0.5;
        }
        
        .config-option.disabled .toggle {
            pointer-events: none;
        }
        
        .config-option-note {
            margin-top: 6px;
            padding: 6px 8px;
            background: rgba(240, 136, 62, 0.1);
            border-left: 2px solid #f0883e;
            border-radius: 0 4px 4px 0;
            font-size: 10px;
            color: #8b949e;
        }
        
        .config-option-note a {
            color: #58a6ff;
            text-decoration: none;
        }
        
        .config-option-note a:hover {
            text-decoration: underline;
        }
    </style>
    
    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "TNI Device Calculator",
  "description": "Device resource planning tool for Tower Networking Inc. Calculate CPU, memory, and storage requirements for program configurations across servers, switches, routers, firewalls, debuggers, and rigs.",
  "url": "https://tni-toolkit.salvo.host/tools/device-calculator.html",
  "applicationCategory": "GameTool",
  "operatingSystem": "Web Browser",
  "browserRequirements": "Requires JavaScript",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "featureList": [
    "Device selection with category filtering and search",
    "Program/firmware resource calculation",
    "SATA expansion support",
    "Shareable configuration codes",
    "Traversal metrics (TPT, TPS, T/s)",
    "Works offline"
  ],
  "isPartOf": {
    "@type": "WebSite",
    "name": "TNI Toolkit",
    "url": "https://tni-toolkit.salvo.host/"
  },
  "about": {
    "@type": "VideoGame",
    "name": "Tower Networking Inc.",
    "url": "https://store.steampowered.com/app/2939600/Tower_Networking_Inc/"
  }
}
</script>
</head>
<body>
    <div class="container">
    <!-- Header -->
    <div class="header">
        <h1><span>TNI</span> Device Compatibility Calculator</h1>
        <p>Tower Networking Inc. • Device Resource Planning Tool</p>
        <a href="../index.html" class="back-link" id="back-to-toolkit">← Back to Toolkit</a>
    </div>

    <!-- Config Bar -->
    <div class="config-bar">
        <button class="config-btn" id="config-toggle" onclick="toggleConfig()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <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>
            Settings
        </button>
        <div class="config-panel" id="config-panel">
            <h3>⚙ Configuration</h3>
            
            <div class="config-columns">
                <!-- Left Column: Device Settings -->
                <div class="config-column">
                    <div class="config-section">
                        <div class="config-section-title">Device List</div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Include refurbished devices</div>
                                <div class="config-option-desc">Show devices from Refurb Hut (lower price, 3-day warranty)</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-refurbs" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show vendor</div>
                                <div class="config-option-desc">Display vendor name on device cards</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-vendor" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show warranty</div>
                                <div class="config-option-desc">Display warranty days on device cards</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-warranty" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <div class="config-section-title">Device Inline Stats</div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show power (W)</div>
                                <div class="config-option-desc">Display power consumption in watts</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-power" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show traversals/sec (T/s)</div>
                                <div class="config-option-desc">Display calculated traversals per second</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-traversals" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show traversals/tick (TPT)</div>
                                <div class="config-option-desc">Display raw traversals per tick value</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-tpt" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show ticks/sec (TPS)</div>
                                <div class="config-option-desc">Display ticks per second from cpu_cycle</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-tps" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <div class="config-section-title">Tooltip</div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show detailed tooltip on hover</div>
                                <div class="config-option-desc">Comprehensive stats popup when hovering devices</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-tooltip" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column: Program Settings -->
                <div class="config-column">
                    <div class="config-section">
                        <div class="config-section-title">Program Inline Stats</div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show output/tick (O/t)</div>
                                <div class="config-option-desc">Uses produced per tick for producers/converters</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-program-output" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show input/tick (I/t)</div>
                                <div class="config-option-desc">Uses consumed per tick (converters only)</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-program-input" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show stack limit</div>
                                <div class="config-option-desc">Maximum use stack size for the program</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-program-stack" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Show output/sec (O/s)</div>
                                <div class="config-option-desc">Calculated uses per second (requires device)</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-show-program-output-sec" checked onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <div class="config-section-title">SATA Behavior</div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Auto-populate SATA (minimum)</div>
                                <div class="config-option-desc">Add minimum SATA modules to meet storage needs</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-auto-sata" onchange="onConfigChange()" checked>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="config-option">
                            <div>
                                <div class="config-option-label">Auto-maximize SATA</div>
                                <div class="config-option-desc">Fill all available SATA slots for max storage</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-max-sata" onchange="onConfigChange()">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <div class="config-section-title">Compatibility</div>
                        
                        <div class="config-option disabled">
                            <div>
                                <div class="config-option-label">Auto-prune incompatible</div>
                                <div class="config-option-desc">Hide devices that can't run selected programs</div>
                            </div>
                            <label class="toggle">
                                <input type="checkbox" id="config-auto-prune" disabled>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div class="config-option-note">
                            ⚠ Requires firmware/software compatibility data. 
                            <a href="../contributing.html" target="_blank">Help contribute →</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Full-width General section -->
            <div class="config-full-width">
                <div class="config-section">
                    <div class="config-section-title">General</div>
                    
                    <div class="config-option">
                        <div>
                            <div class="config-option-label">Show "Back to Toolkit" link</div>
                            <div class="config-option-desc">Display navigation link in header</div>
                        </div>
                        <label class="toggle">
                            <input type="checkbox" id="config-show-backlink" checked onchange="onConfigChange()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <!-- Device Selection -->
        <div>
            <h2 class="section-title">▸ Select Device</h2>
            <input type="text" class="search-input" id="device-search" placeholder="Search devices...">
            <div class="filter-row">
                <div class="custom-select" id="device-type-select">
                    <div class="custom-select-trigger" id="device-type-trigger">All Devices</div>
                    <div class="custom-select-options" id="device-type-options">
                        <div class="custom-select-option selected" data-value="all">All Devices</div>
                        <div class="custom-select-option" data-value="servers">Servers</div>
                        <div class="custom-select-option" data-value="network_switches">Switches</div>
                        <div class="custom-select-option" data-value="routers">Routers</div>
                        <div class="custom-select-option" data-value="firewalls_and_taps">Firewalls &amp; TAPs</div>
                        <div class="custom-select-option" data-value="debuggers_and_test_devices">Debuggers</div>
                        <div class="custom-select-option" data-value="decentro_rigs">Decentro Rigs</div>
                    </div>
                </div>
                <button class="clear-btn" onclick="clearDeviceSelection()">Clear</button>
            </div>
            <div class="list-container" id="device-list"></div>
            
            <!-- SATA Stepper (always visible, state-dependent) -->
            <div class="sata-toggle" id="sata-toggle">
                <span class="sata-label">SATA Expansion</span>
                <div class="sata-stepper">
                    <button id="sata-minus" disabled>−</button>
                    <span class="sata-stepper-value" id="sata-value">0/0</span>
                    <button id="sata-plus" disabled>+</button>
                </div>
                <span class="sata-info" id="sata-info">(no device selected)</span>
            </div>
        </div>
        
        <!-- Program Selection -->
        <div>
            <h2 class="section-title">▸ Select Programs</h2>
            <input type="text" class="search-input" id="program-search" placeholder="Search programs...">
            <div class="filter-row">
                <div class="custom-select" id="program-type-select">
                    <div class="custom-select-trigger" id="program-type-trigger">All Programs</div>
                    <div class="custom-select-options" id="program-type-options">
                        <div class="custom-select-option selected" data-value="all">All Programs</div>
                        <div class="custom-select-option" data-value="Producer">Producers</div>
                        <div class="custom-select-option" data-value="Converter">Converters</div>
                        <div class="custom-select-option" data-value="Storage">Storage</div>
                        <div class="custom-select-option" data-value="Firmware">Firmware</div>
                    </div>
                </div>
                <button class="clear-btn" onclick="clearProgramSelection()">Clear</button>
            </div>
            <div class="list-container programs" id="program-list"></div>
        </div>
    </div>
    
    <!-- Results -->
    <div class="results hidden" id="results">
        <div class="results-header">
            <h3 class="results-title" id="results-title"></h3>
            <div class="total-cost" id="total-cost"></div>
        </div>
        <div class="metrics-grid" id="metrics-grid"></div>
        <div class="programs-summary hidden" id="programs-summary"></div>
    </div>

    <!-- Sharecode Panel -->
    <div class="sharecode-panel">
        <h3>📋 Share Configuration</h3>
        <div class="sharecode-row">
            <input type="text" id="sharecode" class="sharecode-input" placeholder="Paste sharecode to load configuration...">
            <button class="btn-secondary" id="copy-sharecode">Copy Code</button>
            <button class="btn-secondary" id="copy-url">Copy URL</button>
        </div>
    </div>
    
    <footer class="site-footer">
        <div class="footer-links">
            <a href="../index.html">TNI Toolkit</a>
            <span class="sep">|</span>
            <a href="https://github.com/salvo-praxis/tni-toolkit" target="_blank"><svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" style="vertical-align: -2px; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>GitHub</a>
            <span class="sep">|</span>
            <a href="../contributions.html">Contributions Log</a>
            <span class="sep">|</span>
            <a href="https://store.steampowered.com/app/2939600/Tower_Networking_Inc/" target="_blank">TNI on Steam</a>
        </div>
        <p class="footer-note">Made with ❤️ for the TNI community</p>
        <div class="footer-badges">
            <span class="version-badge">v1.8.2</span>
            <a href="https://github.com/salvo-praxis/tni-toolkit/blob/main/LICENSE" target="_blank" class="license-badge">MIT License — Free to use, modify, and share</a>
        </div>
    </footer>
    </div><!-- /.container -->

    <script>
        // === TNI DATA: DEVICES ===
        const devices = {
            servers: [
                { model: "MacroHard Boulder SRV", vendor: "AB compute Ltd.", cpu: 4, memory: 4, storage: 6, sata_slots: 0, price: 540, power_w: 72, ports: 2, warranty_days: 14, traversals_per_tick: 16, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Boulder+ SRV", vendor: "AB compute Ltd.", cpu: 6, memory: 8, storage: 8, sata_slots: 0, price: 1020, power_w: 161, ports: 2, warranty_days: 14, traversals_per_tick: 28, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Boulder+ SRV (Refurb)", vendor: "Refurb Hut", cpu: 6, memory: 8, storage: 8, sata_slots: 0, price: 255, power_w: 161, ports: 2, warranty_days: 3, traversals_per_tick: 28, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Boulder++ SRV", vendor: "The Server Shoppe", cpu: 6, memory: 10, storage: 10, sata_slots: 0, price: 1750, power_w: 312, ports: 3, warranty_days: 14, traversals_per_tick: 48, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Monolith SRV", vendor: "The Server Shoppe", cpu: 16, memory: 10, storage: 4, sata_slots: 2, price: 2100, power_w: 429, ports: 2, warranty_days: 14, traversals_per_tick: 52, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Ledge Two SRV", vendor: "The Server Shoppe", cpu: 24, memory: 14, storage: 4, sata_slots: 2, price: 2625, power_w: 973, ports: 3, warranty_days: 21, traversals_per_tick: 150, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Ledge Three SRV", vendor: "The Server Shoppe", cpu: 24, memory: 16, storage: 4, sata_slots: 2, price: 4000, power_w: 1125, ports: 4, warranty_days: 21, traversals_per_tick: 208, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard Megalith SRV", vendor: "The Server Shoppe", cpu: 32, memory: 16, storage: 4, sata_slots: 6, price: 4750, power_w: 1223, ports: 5, warranty_days: 24, traversals_per_tick: 240, cpu_cycle: "1 tick / 2.0s" },
                { model: "Savannah Meerkat", vendor: "Savannah Org.", cpu: 4, memory: 4, storage: 4, sata_slots: 0, price: 950, power_w: 62, ports: 2, warranty_days: 21, traversals_per_tick: 16, cpu_cycle: "1 tick / 2.0s" },
                { model: "Savannah Gazelle", vendor: "AB compute Ltd.", cpu: 6, memory: 6, storage: 6, sata_slots: 0, price: 2640, power_w: 108, ports: 2, warranty_days: 35, traversals_per_tick: 24, cpu_cycle: "1 tick / 2.0s" },
                { model: "Savannah Gazelle", vendor: "Savannah Org.", cpu: 6, memory: 6, storage: 6, sata_slots: 0, price: 2200, power_w: 108, ports: 2, warranty_days: 35, traversals_per_tick: 24, cpu_cycle: "1 tick / 2.0s" },
                { model: "Savannah Aardvark", vendor: "Savannah Org.", cpu: 10, memory: 10, storage: 5, sata_slots: 2, price: 4500, power_w: 293, ports: 3, warranty_days: 42, traversals_per_tick: 65, cpu_cycle: "1 tick / 2.0s" },
                { model: "Savannah Wildebeest", vendor: "Savannah Org.", cpu: 16, memory: 16, storage: 8, sata_slots: 2, price: 6800, power_w: 423, ports: 3, warranty_days: 49, traversals_per_tick: 104, cpu_cycle: "1 tick / 2.0s" },
                { model: "MacroHard NLB2", vendor: "The Server Shoppe", cpu: 2, memory: 1, storage: 1, sata_slots: 0, price: 437, power_w: 83, ports: 3, warranty_days: 73, traversals_per_tick: 80, cpu_cycle: "1 tick / 2.0s" },
                { model: "ICC1", vendor: "Interchange Compute", cpu: 1, memory: 2, storage: 2, sata_slots: 1, price: 160, power_w: 19, ports: 1, warranty_days: 8, traversals_per_tick: 6, cpu_cycle: "1 tick / 2.0s" },
                { model: "Golonys-Cinco", vendor: "Golonys Ltd.", cpu: 1, memory: 1, storage: 1, sata_slots: 5, price: 400, power_w: 13, ports: 1, warranty_days: 17, traversals_per_tick: 6, cpu_cycle: "1 tick / 2.0s" },
            ],
            network_switches: [
                { model: "Blade5", vendor: "Blade Networking Inc", cpu: 2, memory: 1, storage: 1, firmware: "bladeos", price: 100, power_w: 22, ports: 5, warranty_days: 7, traversals_per_tick: 25, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade10", vendor: "Blade Networking Inc", cpu: 2, memory: 1, storage: 1, firmware: "bladeos", price: 450, power_w: 41, ports: 10, warranty_days: 7, traversals_per_tick: 50, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade4", vendor: "Blade Networking Inc", cpu: 2, memory: 1, storage: 1, firmware: "bladeos", price: 100, power_w: 30, ports: 4, warranty_days: 7, traversals_per_tick: 36, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade12", vendor: "Blade Networking Inc", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 1000, power_w: 84, ports: 12, warranty_days: 14, traversals_per_tick: 108, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade66", vendor: "Blade Networking Inc", cpu: 2, memory: 1, storage: 1, firmware: "bladeos", price: 950, power_w: 66, ports: 12, warranty_days: 14, traversals_per_tick: 84, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade15", vendor: "Blade Networking Inc", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 900, power_w: 88, ports: 15, warranty_days: 14, traversals_per_tick: 75, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade88", vendor: "Blade Networking Inc", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 1600, power_w: 87, ports: 16, warranty_days: 18, traversals_per_tick: 112, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade88 (Refurb)", vendor: "Refurb Hut", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 480, power_w: 87, ports: 16, warranty_days: 3, traversals_per_tick: 112, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade30", vendor: "Blade Networking Inc", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 1650, power_w: 183, ports: 30, warranty_days: 21, traversals_per_tick: 150, cpu_cycle: "1 tick / 2.0s" },
                { model: "Blade1515", vendor: "Blade Networking Inc", cpu: 2, memory: 2, storage: 2, firmware: "vlanfirm", price: 1850, power_w: 208, ports: 30, warranty_days: 21, traversals_per_tick: 210, cpu_cycle: "1 tick / 2.0s" },
            ],
            routers: [
                { model: "Disco Nano", vendor: "AB compute Ltd. / Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 264, power_w: 21, ports: 5, warranty_days: 17, traversals_per_tick: 60, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Nano 2G", vendor: "Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 180, power_w: 23, ports: 4, warranty_days: 21, traversals_per_tick: 65, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Nano 3H", vendor: "Conduit Systems", cpu: 8, memory: 2, storage: 4, firmware: "hakernel", price: 450, power_w: 26, ports: 4, warranty_days: 28, traversals_per_tick: 75, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Milli", vendor: "Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 325, power_w: 27, ports: 8, warranty_days: 16, traversals_per_tick: 80, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Milli 2G", vendor: "Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 500, power_w: 30, ports: 8, warranty_days: 18, traversals_per_tick: 112, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Milli 3G", vendor: "Conduit Systems", cpu: 8, memory: 2, storage: 4, firmware: "hakernel", price: 800, power_w: 41, ports: 8, warranty_days: 21, traversals_per_tick: 160, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Milli 4G", vendor: "Conduit Systems", cpu: 8, memory: 2, storage: 4, firmware: "hakernel", price: 1150, power_w: 60, ports: 8, warranty_days: 25, traversals_per_tick: 240, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Micro", vendor: "Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 600, power_w: 41, ports: 10, warranty_days: 14, traversals_per_tick: 125, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Micro 2G", vendor: "Conduit Systems", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 950, power_w: 47, ports: 10, warranty_days: 19, traversals_per_tick: 162, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Micro 2G (Refurb)", vendor: "Refurb Hut", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 285, power_w: 47, ports: 10, warranty_days: 3, traversals_per_tick: 162, cpu_cycle: "1 tick / 2.0s" },
                { model: "Disco Micro 3G", vendor: "Conduit Systems", cpu: 8, memory: 2, storage: 4, firmware: "hakernel", price: 1300, power_w: 50, ports: 10, warranty_days: 21, traversals_per_tick: 175, cpu_cycle: "1 tick / 2.0s" },
                { model: "Zodianet Spine Router", vendor: "Zodiac Networks", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 1200, power_w: 78, ports: 3, warranty_days: 14, traversals_per_tick: 250, cpu_cycle: "1 tick / 2.0s" },
                { model: "Zodianet Beam Router", vendor: "Zodiac Networks", cpu: 4, memory: 1, storage: 2, firmware: "rtkernel", price: 3700, power_w: 138, ports: 4, warranty_days: 17, traversals_per_tick: 450, cpu_cycle: "1 tick / 2.0s" },
            ],
            firewalls_and_taps: [
                { model: "FireWatch ES4A", vendor: "Fortypoint Security", cpu: 6, memory: 3, storage: 3, firmware: ["firewatcher", "wirerat"], price: 550, power_w: 55, ports: 3, warranty_days: 19, traversals_per_tick: 52, cpu_cycle: "1 tick / 2.0s" },
                { model: "FireWatch CP4E", vendor: "Fortypoint Security", cpu: 6, memory: 3, storage: 3, firmware: ["firewatcher", "wirerat"], price: 1500, power_w: 163, ports: 4, warranty_days: 16, traversals_per_tick: 160, cpu_cycle: "1 tick / 2.0s" },
                { model: "EthTapper", vendor: "Fortypoint Security", cpu: 2, memory: 2, storage: 1, firmware: "wirerat", price: 300, power_w: 12, ports: 3, warranty_days: 21, traversals_per_tick: 18, cpu_cycle: "1 tick / 2.0s" },
                { model: "Bastion 5E", vendor: "Fortypoint Security", cpu: 6, memory: 3, storage: 3, firmware: ["firewatcher", "wirerat"], price: 4000, power_w: 387, ports: 4, warranty_days: 14, traversals_per_tick: 384, cpu_cycle: "1 tick / 2.0s" },
            ],
            debuggers_and_test_devices: [
                { model: "Debugger Alice", vendor: "AB compute Ltd.", cpu: 1, memory: 1, storage: 1, firmware: "netpeeker", price: 1200, power_w: 72, ports: 2, warranty_days: 21, traversals_per_tick: 12, cpu_cycle: "1 tick / 2.0s" },
                { model: "DNS Load Test Box", vendor: "AB compute Ltd.", cpu: 1, memory: 1, storage: 1, firmware: "dnsspam", price: 0, power_w: 112, ports: 1, warranty_days: 0, traversals_per_tick: 6, cpu_cycle: "5 tick(s) / 1.0s" },
                { model: "DNS UDP/53 Load Tester", vendor: "AB compute Ltd.", cpu: 1, memory: 1, storage: 1, firmware: "dnsspam", price: 1200, power_w: 202, ports: 1, warranty_days: 7, traversals_per_tick: 6, cpu_cycle: "10 tick(s) / 1.0s" },
            ],
            decentro_rigs: [
                { model: "Dvergar", vendor: "AB compute Ltd.", cpu: 24, memory: 16, storage: 8, sata_slots: 0, price: 1320, power_w: 523, ports: 0, warranty_days: 7, traversals_per_tick: 40, cpu_cycle: "1 tick / 2.0s" },
            ],
        };

        const categoryLabels = {
            servers: "Servers",
            network_switches: "Switches",
            routers: "Routers",
            firewalls_and_taps: "Firewalls & TAPs",
            debuggers_and_test_devices: "Debuggers",
            decentro_rigs: "Decentro Rigs"
        };

        // === TNI DATA: PROGRAMS ===
        const programs = [
            { name: "dns-lite", type: "Producer", cpu: 1, memory: 1, storage: 2, output_uses: ["reply-dns-queries"], output_amount: 3, input_amount: null, input_uses: null, stack_limit: 3, requires: null },
            { name: "dns-server", type: "Converter", cpu: 4, memory: 3, storage: 3, output_uses: ["reply-dns-queries"], output_amount: 20, input_amount: 1, input_uses: "store-text", stack_limit: 20, requires: "store-text" },
            { name: "sun-dns", type: "Converter", cpu: 10, memory: 6, storage: 9, output_uses: ["reply-dns-queries"], output_amount: 40, input_amount: 3, input_uses: "store-text", stack_limit: 40, requires: "store-text" },
            { name: "dnsmasq", type: "Producer", cpu: 1, memory: 1, storage: 2, output_uses: ["reply-dhcp-request"], output_amount: 3, input_amount: null, input_uses: null, stack_limit: 3, requires: null },
            { name: "kea", type: "Converter", cpu: 6, memory: 5, storage: 7, output_uses: ["reply-dhcp-request"], output_amount: 15, input_amount: 1, input_uses: "store-text", stack_limit: 15, requires: "store-text" },
            { name: "padu_v1", type: "Producer", cpu: 1, memory: 2, storage: 4, output_uses: ["store-text", "store-image"], output_amount: 1, input_amount: null, input_uses: null, stack_limit: 2, requires: null },
            { name: "padu_v2", type: "Producer", cpu: 2, memory: 4, storage: 8, output_uses: ["store-text", "store-image", "store-audio"], output_amount: 2, input_amount: null, input_uses: null, stack_limit: 2, requires: null },
            { name: "padu_v3", type: "Producer", cpu: 4, memory: 6, storage: 12, output_uses: ["store-text", "store-image", "store-audio", "store-video"], output_amount: 4, input_amount: null, input_uses: null, stack_limit: 4, requires: null },
            { name: "poems-db", type: "Producer", cpu: 4, memory: 4, storage: 6, output_uses: ["store-text"], output_amount: 4, input_amount: null, input_uses: null, stack_limit: 4, requires: null },
            { name: "gitcoffee", type: "Converter", cpu: 4, memory: 2, storage: 4, output_uses: ["read-text", "update-software"], output_amount: 16, input_amount: 2, input_uses: "store-text", stack_limit: 16, requires: "store-text" },
            { name: "mailer", type: "Converter", cpu: 5, memory: 6, storage: 3, output_uses: ["read-text", "post-text", "verify-user"], output_amount: 15, input_amount: 3, input_uses: "store-text + store-image", stack_limit: 15, requires: "store-text AND store-image" },
            { name: "voip-server", type: "Producer", cpu: 5, memory: 2, storage: 5, output_uses: ["accept-voip-phone-connection"], output_amount: 10, input_amount: null, input_uses: null, stack_limit: 10, requires: null },
            { name: "rtsp-diva-r", type: "Producer", cpu: 6, memory: 4, storage: 10, output_uses: ["accept-cctv-camera-connection", "accept-cctv-monitor-connection"], output_amount: 13, input_amount: null, input_uses: null, stack_limit: 13, requires: null },
            { name: "decentro-node", type: "Producer", cpu: 24, memory: 12, storage: 6, output_uses: ["facilitate-p2p-transaction"], output_amount: 10, input_amount: null, input_uses: null, stack_limit: 10, requires: null },
            { name: "decentro-wallet", type: "Storage", cpu: 1, memory: 2, storage: 2, output_uses: ["access-p2p-currency"], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: null, capacity_per: { resource: "storage", amount: 10 } },
            { name: "decentro-collector", type: "Converter", cpu: 1, memory: 1, storage: 1, output_uses: ["access-p2p-currency"], output_amount: 1, input_amount: 1, input_uses: "access-p2p-currency", stack_limit: null, requires: null, stack_per: { resource: "memory", amount: 6 } },
            { name: "ubbt", type: "Converter", cpu: 4, memory: 4, storage: 6, output_uses: ["support-bots"], output_amount: 4, input_amount: 4, input_uses: "inspect-user-packets", stack_limit: 4, requires: "inspect-user-packets" },
            // Firmware
            { name: "rtkernel", type: "Firmware", cpu: 4, memory: 1, storage: 2, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: "/etc/routes.conf" },
            { name: "hakernel", type: "Firmware", cpu: 8, memory: 2, storage: 4, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: "/etc/routes.conf" },
            { name: "bladeos", type: "Firmware", cpu: 2, memory: 1, storage: 1, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: null },
            { name: "vlanfirm", type: "Firmware", cpu: 2, memory: 2, storage: 2, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: "/etc/vlan.tags" },
            { name: "firewatcher", type: "Firmware", cpu: 4, memory: 1, storage: 2, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: "/etc/nftables.conf" },
            { name: "wirerat", type: "Firmware", cpu: 2, memory: 2, storage: 1, output_uses: ["inspect-user-packets"], output_amount: 4, input_amount: null, input_uses: null, stack_limit: 12, requires: null },
            { name: "netpeeker", type: "Firmware", cpu: 1, memory: 1, storage: 1, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: null },
            { name: "dnsspam", type: "Firmware", cpu: 1, memory: 1, storage: 1, output_uses: [], output_amount: null, input_amount: null, input_uses: null, stack_limit: null, requires: null },
        ];

        // Constants
        const SATA_DRIVE_COST = 75;
        const SATA_DRIVE_STORAGE = 4;

        // State
        let selectedDevice = null;
        let selectedDeviceCategory = null;
        let selectedPrograms = [];
        let sataSelected = 0; // Number of SATA slots selected
        let sataManualOverride = false; // True if user manually adjusted SATA
        let currentFilter = 'all';
        let programFilter = 'all';
        let deviceSearch = '';
        let programSearch = '';

        // Config State
        const config = {
            showRefurbs: false,
            showVendor: true,
            showWarranty: true,
            showPower: true,
            showTraversals: true,  // T/s calculated
            showTPT: false,        // Traversals per tick
            showTPS: false,        // Ticks per second
            showTooltip: false,    // Comprehensive tooltip on hover
            autoSata: true,        // Auto-populate minimum SATA to meet storage
            maxSata: false,        // Auto-maximize all SATA slots
            autoPrune: false,
            // Program display options
            showProgramOutput: true,   // O/t - output per tick
            showProgramInput: false,   // I/t - input per tick (converters)
            showProgramStack: false,   // Stack limit
            showProgramOutputSec: true, // O/s - calculated output per second
            // General options
            showBacklink: true         // Show "Back to Toolkit" link
        };

        // Load config from localStorage
        function loadConfig() {
            try {
                const saved = localStorage.getItem('tni-device-calc-config');
                if (saved) {
                    const parsed = JSON.parse(saved);
                    Object.assign(config, parsed);
                    // Force autoPrune off until compatibility data is documented
                    config.autoPrune = false;
                    // Update checkboxes to match
                    document.getElementById('config-show-refurbs').checked = config.showRefurbs;
                    document.getElementById('config-show-vendor').checked = config.showVendor;
                    document.getElementById('config-show-warranty').checked = config.showWarranty;
                    document.getElementById('config-show-power').checked = config.showPower;
                    document.getElementById('config-show-traversals').checked = config.showTraversals;
                    document.getElementById('config-show-tpt').checked = config.showTPT;
                    document.getElementById('config-show-tps').checked = config.showTPS;
                    document.getElementById('config-show-tooltip').checked = config.showTooltip;
                    document.getElementById('config-auto-sata').checked = config.autoSata;
                    document.getElementById('config-max-sata').checked = config.maxSata;
                    // config-auto-prune checkbox is disabled, don't update it
                    // Program config options
                    document.getElementById('config-show-program-output').checked = config.showProgramOutput;
                    document.getElementById('config-show-program-input').checked = config.showProgramInput;
                    document.getElementById('config-show-program-stack').checked = config.showProgramStack;
                    document.getElementById('config-show-program-output-sec').checked = config.showProgramOutputSec;
                    // General options
                    document.getElementById('config-show-backlink').checked = config.showBacklink;
                    updateBacklink();
                }
            } catch (e) {
                // Ignore localStorage errors
            }
        }

        // Save config to localStorage
        function saveConfig() {
            try {
                localStorage.setItem('tni-device-calc-config', JSON.stringify(config));
            } catch (e) {
                // Ignore localStorage errors
            }
        }

        // Toggle config panel
        function toggleConfig() {
            const panel = document.getElementById('config-panel');
            const btn = document.getElementById('config-toggle');
            panel.classList.toggle('show');
            btn.classList.toggle('active');
        }

        // Close config panel when clicking outside
        document.addEventListener('click', (e) => {
            const panel = document.getElementById('config-panel');
            const btn = document.getElementById('config-toggle');
            if (panel && !panel.contains(e.target) && !btn.contains(e.target)) {
                panel.classList.remove('show');
                btn.classList.remove('active');
            }
        });

        // Handle config changes
        function onConfigChange() {
            config.showRefurbs = document.getElementById('config-show-refurbs').checked;
            config.showVendor = document.getElementById('config-show-vendor').checked;
            config.showWarranty = document.getElementById('config-show-warranty').checked;
            config.showPower = document.getElementById('config-show-power').checked;
            config.showTraversals = document.getElementById('config-show-traversals').checked;
            config.showTPT = document.getElementById('config-show-tpt').checked;
            config.showTPS = document.getElementById('config-show-tps').checked;
            config.showTooltip = document.getElementById('config-show-tooltip').checked;
            config.autoSata = document.getElementById('config-auto-sata').checked;
            config.maxSata = document.getElementById('config-max-sata').checked;
            // If maxSata is on, autoSata should be implied
            if (config.maxSata) {
                config.autoSata = true;
                document.getElementById('config-auto-sata').checked = true;
            }
            // config.autoPrune is disabled until compatibility data is documented
            // Program config options
            config.showProgramOutput = document.getElementById('config-show-program-output').checked;
            config.showProgramInput = document.getElementById('config-show-program-input').checked;
            config.showProgramStack = document.getElementById('config-show-program-stack').checked;
            config.showProgramOutputSec = document.getElementById('config-show-program-output-sec').checked;
            // General options
            config.showBacklink = document.getElementById('config-show-backlink').checked;
            updateBacklink();
            saveConfig();
            renderDevices();
            renderPrograms();
            calculate();
        }

        // DOM Elements
        const deviceListEl = document.getElementById('device-list');
        const deviceSearchEl = document.getElementById('device-search');
        const deviceTypeTrigger = document.getElementById('device-type-trigger');
        const deviceTypeOptions = document.getElementById('device-type-options');
        const programListEl = document.getElementById('program-list');
        const programSearchEl = document.getElementById('program-search');
        const programTypeTrigger = document.getElementById('program-type-trigger');
        const programTypeOptions = document.getElementById('program-type-options');
        const sataToggleEl = document.getElementById('sata-toggle');
        const sataValueEl = document.getElementById('sata-value');
        const sataMinusBtn = document.getElementById('sata-minus');
        const sataPlusBtn = document.getElementById('sata-plus');
        const sataInfoEl = document.getElementById('sata-info');
        const resultsEl = document.getElementById('results');
        const resultsTitleEl = document.getElementById('results-title');
        const totalCostEl = document.getElementById('total-cost');
        const metricsGridEl = document.getElementById('metrics-grid');
        const programsSummaryEl = document.getElementById('programs-summary');
        const sharecodeEl = document.getElementById('sharecode');
        const copySharecodeBtn = document.getElementById('copy-sharecode');
        const copyUrlBtn = document.getElementById('copy-url');

        // === CLEAR SELECTION FUNCTIONS ===
        function clearDeviceSelection() {
            selectedDevice = null;
            selectedDeviceCategory = null;
            sataSelected = 0;
            sataManualOverride = false;
            updateToggles();
            renderDevices();
            calculate();
        }

        function clearProgramSelection() {
            selectedPrograms = [];
            renderPrograms();
            calculate();
        }

        // === CUSTOM DROPDOWN LOGIC ===
        deviceTypeTrigger.addEventListener('click', () => {
            deviceTypeTrigger.classList.toggle('open');
            deviceTypeOptions.classList.toggle('open');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#device-type-select')) {
                deviceTypeTrigger.classList.remove('open');
                deviceTypeOptions.classList.remove('open');
            }
        });

        // Handle option selection
        deviceTypeOptions.querySelectorAll('.custom-select-option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.dataset.value;
                const text = option.textContent;
                
                // Update trigger text
                deviceTypeTrigger.textContent = text;
                
                // Update selected state
                deviceTypeOptions.querySelectorAll('.custom-select-option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');
                
                // Close dropdown
                deviceTypeTrigger.classList.remove('open');
                deviceTypeOptions.classList.remove('open');
                
                // Apply filter
                currentFilter = value;
                if (selectedDevice && currentFilter !== 'all' && selectedDeviceCategory !== currentFilter) {
                    selectedDevice = null;
                    selectedDeviceCategory = null;
                    updateToggles();
                }
                renderDevices();
                calculate();
            });
        });

        // === PROGRAM DROPDOWN LOGIC ===
        programTypeTrigger.addEventListener('click', () => {
            programTypeTrigger.classList.toggle('open');
            programTypeOptions.classList.toggle('open');
        });

        // Close program dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#program-type-select')) {
                programTypeTrigger.classList.remove('open');
                programTypeOptions.classList.remove('open');
            }
        });

        // Handle program type option selection
        programTypeOptions.querySelectorAll('.custom-select-option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.dataset.value;
                const text = option.textContent;
                
                // Update trigger text
                programTypeTrigger.textContent = text;
                
                // Update selected state
                programTypeOptions.querySelectorAll('.custom-select-option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');
                
                // Close dropdown
                programTypeTrigger.classList.remove('open');
                programTypeOptions.classList.remove('open');
                
                // Apply filter
                programFilter = value;
                renderPrograms();
            });
        });

        // === SHARECODE FUNCTIONS ===
        function generateSharecode() {
            const data = {
                d: selectedDevice ? selectedDevice.model : null,
                v: selectedDevice ? selectedDevice.vendor : null,
                p: selectedPrograms.map(p => p.name),
                s: sataSelected
            };
            return btoa(JSON.stringify(data));
        }

        function loadSharecode(code) {
            try {
                const data = JSON.parse(atob(code));

                // Find device by model and vendor
                if (data.d) {
                    for (const [category, deviceList] of Object.entries(devices)) {
                        const device = deviceList.find(d => d.model === data.d && (data.v ? d.vendor === data.v : true));
                        if (device) {
                            selectedDevice = { ...device, _category: category };
                            selectedDeviceCategory = category;
                            break;
                        }
                    }
                } else {
                    selectedDevice = null;
                    selectedDeviceCategory = null;
                }

                // Find programs by name
                selectedPrograms = [];
                if (data.p && Array.isArray(data.p)) {
                    data.p.forEach(name => {
                        const program = programs.find(p => p.name === name);
                        if (program) selectedPrograms.push(program);
                    });
                }

                // Set SATA expansion (handle old boolean format and new number format)
                if (typeof data.s === 'number') {
                    sataSelected = data.s;
                } else if (data.s === true) {
                    // Old format: true means auto-calculate needed slots
                    sataSelected = 0; // Will be updated by calculate()
                } else {
                    sataSelected = 0;
                }

                // Update UI
                renderDevices();
                renderPrograms();
                updateToggles();
                calculate();
            } catch (e) {
                // Invalid sharecode, ignore
            }
        }

        function updateSharecode() {
            // Clear sharecode if nothing selected
            if (!selectedDevice && selectedPrograms.length === 0) {
                sharecodeEl.value = '';
                try { history.replaceState(null, '', window.location.pathname); } catch(e) {}
                return;
            }
            const code = generateSharecode();
            sharecodeEl.value = code;
            try { history.replaceState(null, '', '#' + code); } catch(e) {}
        }

        // === CALCULATE PROGRAM NEEDS (for auto-prune) ===
        function calculateProgramNeeds() {
            return {
                cpu: selectedPrograms.reduce((sum, p) => sum + p.cpu, 0),
                memory: selectedPrograms.reduce((sum, p) => sum + p.memory, 0),
                storage: selectedPrograms.reduce((sum, p) => sum + p.storage, 0)
            };
        }

        // === TRAVERSAL CALCULATION HELPERS ===
        // Parse cpu_cycle string to get ticks per second
        // Format 1: "1 tick / 2.0s" → 0.5 ticks/sec
        // Format 2: "5 tick(s) / 1.0s" → 5 ticks/sec
        function parseTicksPerSecond(cpuCycle) {
            if (!cpuCycle) return null;
            // Match patterns like "1 tick / 2.0s" or "5 tick(s) / 1.0s"
            const match = cpuCycle.match(/(\d+(?:\.\d+)?)\s*tick(?:\(s\))?\s*\/\s*(\d+(?:\.\d+)?)\s*s/i);
            if (match) {
                const ticks = parseFloat(match[1]);
                const seconds = parseFloat(match[2]);
                return ticks / seconds;
            }
            return null;
        }

        // Calculate traversals per second
        function calculateTraversalsPerSec(device) {
            if (!device.traversals_per_tick || !device.cpu_cycle) return null;
            const tps = parseTicksPerSecond(device.cpu_cycle);
            if (tps === null) return null;
            return device.traversals_per_tick * tps;
        }

        // Format traversals/sec for display
        function formatTraversals(value) {
            if (value === null) return '—';
            // Show 1 decimal if not a whole number
            return value % 1 === 0 ? value.toString() : value.toFixed(1);
        }

        // === GET FILTERED DEVICES ===
        function getFilteredDevices() {
            let result = [];
            if (currentFilter === 'all') {
                for (const [category, deviceList] of Object.entries(devices)) {
                    deviceList.forEach(device => {
                        result.push({ ...device, _category: category });
                    });
                }
            } else {
                result = devices[currentFilter].map(d => ({ ...d, _category: currentFilter }));
            }
            // Exclude refurb devices unless config enabled
            if (!config.showRefurbs) {
                result = result.filter(d => !d.model.includes('Refurb'));
            }
            // Apply search filter
            if (deviceSearch) {
                const search = deviceSearch.toLowerCase();
                result = result.filter(d => d.model.toLowerCase().includes(search));
            }
            // Auto-prune: filter out devices that can't run selected programs
            // NOTE: Currently disabled in config. When enabled, this will check
            // device.compatible_programs array (in tni-store.json) to determine what
            // software a device can actually run based on firmware compatibility
            // (e.g., bladeos vs vlanfirm vs rtkernel). "example" and "example2" entries
            // are ignored as placeholders for partial community data.
            if (config.autoPrune && selectedPrograms.length > 0) {
                result = result.filter(device => {
                    // Check if device.compatible_programs includes all selected program names
                    // Ignore placeholder entries ("example", "example2")
                    const validPrograms = (device.compatible_programs || [])
                        .filter(p => p !== 'example' && p !== 'example2');
                    return selectedPrograms.every(p => validPrograms.includes(p.name));
                });
            }
            return result;
        }

        // === RENDER DEVICES ===
        function renderDevices() {
            const filteredDevices = getFilteredDevices();
            let html = '';
            let lastCategory = null;
            
            // Category display names
            const categoryNames = {
                'servers': 'Servers',
                'network_switches': 'Switches',
                'routers': 'Routers',
                'firewalls_and_taps': 'Firewalls & TAPs',
                'debuggers_and_test_devices': 'Debuggers',
                'decentro_rigs': 'Decentro Rigs'
            };

            filteredDevices.forEach((device, idx) => {
                // Add category divider when showing all devices
                if (currentFilter === 'all' && device._category !== lastCategory) {
                    html += `<div class="category-divider">${categoryNames[device._category] || device._category}</div>`;
                    lastCategory = device._category;
                }

                const isSelected = selectedDevice && selectedDevice.model === device.model && selectedDevice.vendor === device.vendor && selectedDeviceCategory === device._category;
                const sataInfo = device.sata_slots > 0 ? ` +${device.sata_slots}SATA` : '';
                const firmwareInfo = device.firmware ? `<span class="firmware-tag">FW:${Array.isArray(device.firmware) ? device.firmware.join(', ') : device.firmware}</span>` : '';
                const vendorInfo = config.showVendor ? `<span class="item-vendor">· ${device.vendor}</span>` : '';
                const warrantyInfo = config.showWarranty ? `<span class="stat stat-warranty"><span class="stat-label">WARRANTY</span> ${device.warranty_days ? device.warranty_days + 'd' : '—'}</span>` : '';
                
                // Power display
                const powerInfo = config.showPower ? `<span class="stat stat-pwr"><span class="stat-label">W</span>${device.power_w}</span>` : '';
                
                // Traversal calculations
                const tps = parseTicksPerSecond(device.cpu_cycle);
                const traversalsSec = calculateTraversalsPerSec(device);
                
                // Traversal stats (inline)
                let traversalStats = '';
                if (config.showTPT && device.traversals_per_tick) {
                    traversalStats += `<span class="stat stat-tpt"><span class="stat-label">TPT</span>${device.traversals_per_tick}</span>`;
                }
                if (config.showTPS && tps !== null) {
                    traversalStats += `<span class="stat stat-tps"><span class="stat-label">TPS</span>${formatTraversals(tps)}</span>`;
                }
                if (config.showTraversals && traversalsSec !== null) {
                    traversalStats += `<span class="stat stat-tsec"><span class="stat-label">T/s</span>${formatTraversals(traversalsSec)}</span>`;
                }
                
                // Tooltip data (for comprehensive hover)
                const tooltipData = config.showTooltip ? `data-tooltip-model="${device.model}"
                         data-tooltip-vendor="${device.vendor}"
                         data-tooltip-cpu="${device.cpu}"
                         data-tooltip-mem="${device.memory}"
                         data-tooltip-hdd="${device.storage}"
                         data-tooltip-power="${device.power_w}"
                         data-tooltip-warranty="${device.warranty_days || 0}"
                         data-tooltip-tpt="${device.traversals_per_tick || ''}"
                         data-tooltip-tps="${tps !== null ? formatTraversals(tps) : ''}"
                         data-tooltip-tsec="${traversalsSec !== null ? formatTraversals(traversalsSec) : ''}"` : '';

                html += `
                    <div class="list-item ${isSelected ? 'selected' : ''} ${config.showTooltip ? 'has-tooltip' : ''}"
                         data-device-idx="${idx}"
                         ${tooltipData}>
                        <div class="item-header">
                            <div class="item-header-left">
                                <span class="item-name ${isSelected ? 'active' : ''}">${device.model}</span>
                                ${vendorInfo}
                            </div>
                            <span class="item-price">$${device.price}</span>
                        </div>
                        <div class="item-stats">
                            <div class="item-stats-left">
                                <span class="stat stat-cpu"><span class="stat-label">CPU</span>${device.cpu}</span>
                                <span class="stat stat-mem"><span class="stat-label">MEM</span>${device.memory}</span>
                                <span class="stat stat-hdd"><span class="stat-label">HDD</span>${device.storage}${sataInfo}</span>
                                ${powerInfo}
                                ${traversalStats}
                                ${firmwareInfo}
                            </div>
                            ${warrantyInfo}
                        </div>
                    </div>
                `;
            });

            deviceListEl.innerHTML = html;

            // Add click handlers
            deviceListEl.querySelectorAll('.list-item').forEach(el => {
                el.addEventListener('click', () => {
                    const idx = parseInt(el.dataset.deviceIdx);
                    const device = filteredDevices[idx];
                    // Toggle selection: click again to deselect
                    if (selectedDevice && selectedDevice.model === device.model && selectedDevice.vendor === device.vendor) {
                        selectedDevice = null;
                        selectedDeviceCategory = null;
                        sataSelected = 0; // Reset to 0
                    } else {
                        selectedDevice = device;
                        selectedDeviceCategory = device._category;
                        sataSelected = 0; // Start at 0, user can increment
                    }
                    renderDevices();
                    updateToggles();
                    calculate();
                });
            });
            
            // Add tooltip handlers if enabled
            if (config.showTooltip) {
                deviceListEl.querySelectorAll('.list-item.has-tooltip').forEach(el => {
                    el.addEventListener('mouseenter', showDeviceTooltip);
                    el.addEventListener('mouseleave', hideDeviceTooltip);
                    el.addEventListener('mousemove', moveDeviceTooltip);
                });
            }
        }

        // === TOOLTIP FUNCTIONS ===
        let tooltipEl = null;
        
        function createTooltipElement() {
            if (tooltipEl) return tooltipEl;
            tooltipEl = document.createElement('div');
            tooltipEl.className = 'device-tooltip';
            tooltipEl.style.display = 'none';
            document.body.appendChild(tooltipEl);
            return tooltipEl;
        }
        
        function showDeviceTooltip(e) {
            const el = e.currentTarget;
            const tooltip = createTooltipElement();
            
            const model = el.dataset.tooltipModel;
            const vendor = el.dataset.tooltipVendor;
            const cpu = el.dataset.tooltipCpu;
            const mem = el.dataset.tooltipMem;
            const hdd = el.dataset.tooltipHdd;
            const power = el.dataset.tooltipPower;
            const warranty = el.dataset.tooltipWarranty;
            const tpt = el.dataset.tooltipTpt;
            const tps = el.dataset.tooltipTps;
            const tsec = el.dataset.tooltipTsec;
            
            let traversalSection = '';
            if (tsec) {
                traversalSection = `
                    <div class="device-tooltip-section">
                        <div class="device-tooltip-row">
                            <span class="device-tooltip-label">Traversals</span>
                            <span class="device-tooltip-value tsec">${tsec}/sec</span>
                        </div>
                        ${tpt && tps ? `<div class="device-tooltip-calc">= ${tpt}/tick × ${tps} tick/s</div>` : ''}
                    </div>
                `;
            }
            
            tooltip.innerHTML = `
                <div class="device-tooltip-header">
                    <div class="device-tooltip-model">${model}</div>
                    <div class="device-tooltip-vendor">${vendor}</div>
                </div>
                <div class="device-tooltip-section">
                    <div class="device-tooltip-row">
                        <span class="device-tooltip-label">CPU</span>
                        <span class="device-tooltip-value cpu">${cpu}</span>
                    </div>
                    <div class="device-tooltip-row">
                        <span class="device-tooltip-label">Memory</span>
                        <span class="device-tooltip-value mem">${mem}</span>
                    </div>
                    <div class="device-tooltip-row">
                        <span class="device-tooltip-label">Storage</span>
                        <span class="device-tooltip-value hdd">${hdd}</span>
                    </div>
                    <div class="device-tooltip-row">
                        <span class="device-tooltip-label">Power</span>
                        <span class="device-tooltip-value pwr">${power}W</span>
                    </div>
                    <div class="device-tooltip-row">
                        <span class="device-tooltip-label">Warranty</span>
                        <span class="device-tooltip-value">${warranty > 0 ? warranty + ' days' : '—'}</span>
                    </div>
                </div>
                ${traversalSection}
            `;
            
            tooltip.style.display = 'block';
            positionTooltip(e);
        }
        
        function hideDeviceTooltip() {
            if (tooltipEl) {
                tooltipEl.style.display = 'none';
            }
        }
        
        function moveDeviceTooltip(e) {
            positionTooltip(e);
        }
        
        function positionTooltip(e) {
            if (!tooltipEl) return;
            
            const padding = 15;
            const rect = tooltipEl.getBoundingClientRect();
            let x = e.clientX + padding;
            let y = e.clientY + padding;
            
            // Keep tooltip on screen
            if (x + rect.width > window.innerWidth) {
                x = e.clientX - rect.width - padding;
            }
            if (y + rect.height > window.innerHeight) {
                y = e.clientY - rect.height - padding;
            }
            
            tooltipEl.style.left = x + 'px';
            tooltipEl.style.top = y + 'px';
        }

        // === GET FILTERED PROGRAMS ===
        function getFilteredPrograms() {
            let result = programs;
            
            // Filter by type
            if (programFilter !== 'all') {
                result = result.filter(p => p.type === programFilter);
            }
            
            // Filter by search
            if (programSearch) {
                const search = programSearch.toLowerCase();
                result = result.filter(p => {
                    if (p.name.toLowerCase().includes(search)) return true;
                    if (p.output_uses && p.output_uses.some(u => u.toLowerCase().includes(search))) return true;
                    if (p.input_uses && p.input_uses.toLowerCase().includes(search)) return true;
                    return false;
                });
            }
            
            return result;
        }

        // === RENDER PROGRAMS ===
        function renderPrograms() {
            const filteredPrograms = getFilteredPrograms();
            let html = '';
            let programsDividerAdded = false;
            let firmwareDividerAdded = false;
            
            // Get device TPS for O/s calculation
            let deviceTPS = null;
            if (selectedDevice && selectedDevice.cpu_cycle) {
                deviceTPS = parseTicksPerSecond(selectedDevice.cpu_cycle);
            }

            filteredPrograms.forEach((program) => {
                const idx = programs.indexOf(program);

                // Add dividers only when showing all programs
                if (programFilter === 'all') {
                    if (program.type !== 'Firmware' && !programsDividerAdded) {
                        html += '<div class="category-divider">Programs (program install)</div>';
                        programsDividerAdded = true;
                    }
                    if (program.type === 'Firmware' && !firmwareDividerAdded) {
                        html += '<div class="category-divider">Firmware (sftp copy)</div>';
                        firmwareDividerAdded = true;
                    }
                }

                const isSelected = selectedPrograms.some(p => p.name === program.name);
                const typeClass = `type-${program.type.toLowerCase()}`;
                
                // Build program throughput stats
                let programThroughput = '';
                
                // Output per tick (O/t)
                if (config.showProgramOutput && program.output_amount !== null) {
                    programThroughput += `<span class="stat stat-output"><span class="stat-label">O/t</span>${program.output_amount}</span>`;
                }
                
                // Input per tick (I/t) - converters only
                if (config.showProgramInput && program.input_amount !== null) {
                    programThroughput += `<span class="stat stat-input"><span class="stat-label">I/t</span>${program.input_amount}</span>`;
                }
                
                // Stack limit
                if (config.showProgramStack && program.stack_limit !== null) {
                    programThroughput += `<span class="stat stat-stack"><span class="stat-label">Stack</span>${program.stack_limit}</span>`;
                }
                
                // Output per second (O/s) - calculated from device TPS
                if (config.showProgramOutputSec && program.output_amount !== null && deviceTPS !== null) {
                    const outputPerSec = program.output_amount * deviceTPS;
                    programThroughput += `<span class="stat stat-osec"><span class="stat-label">O/s</span>${formatTraversals(outputPerSec)}</span>`;
                }
                
                // Dynamic capacity display for special programs
                let dynamicNote = '';
                if (program.capacity_per) {
                    const capResLabel = program.capacity_per.resource === 'storage' ? 'hdd' : 'mem';
                    dynamicNote = `${program.capacity_per.amount}/free ${capResLabel}`;
                } else if (program.stack_per) {
                    const stackResLabel = program.stack_per.resource === 'memory' ? 'mem' : 'hdd';
                    dynamicNote = `stack: ${program.stack_per.amount}/free ${stackResLabel}`;
                }
                
                html += `
                    <div class="list-item ${isSelected ? 'program-selected' : ''}"
                         data-program-idx="${idx}">
                        <div class="item-header">
                            <span class="item-name ${isSelected ? 'program-active' : ''}">
                                ${isSelected ? '✓ ' : ''}${program.name}
                            </span>
                            <div class="program-meta">
                                <span class="type-badge ${typeClass}">${program.type}</span>
                                <div class="program-stats">
                                    <span class="stat stat-cpu"><span class="stat-label">CPU</span>${program.cpu}</span>
                                    <span class="stat stat-mem"><span class="stat-label">MEM</span>${program.memory}</span>
                                    <span class="stat stat-hdd"><span class="stat-label">HDD</span>${program.storage}</span>
                                    ${programThroughput}
                                </div>
                            </div>
                        </div>
                        <div class="item-output">
                            → ${program.output_uses && program.output_uses.length > 0 ? program.output_uses.join(', ') : (program.type === 'Firmware' ? program.type + ' OS' : '—')}${dynamicNote ? ` <span style="color: #f0c674;">(${dynamicNote})</span>` : ''}
                        </div>
                        ${program.requires ? `<div class="item-requires">← needs: ${program.requires}</div>` : ''}
                    </div>
                `;
            });

            programListEl.innerHTML = html;

            // Add click handlers
            programListEl.querySelectorAll('.list-item').forEach(el => {
                el.addEventListener('click', () => {
                    const idx = parseInt(el.dataset.programIdx);
                    const program = programs[idx];
                    const existsIdx = selectedPrograms.findIndex(p => p.name === program.name);

                    if (existsIdx >= 0) {
                        selectedPrograms.splice(existsIdx, 1);
                    } else {
                        selectedPrograms.push(program);
                    }
                    
                    // Reset SATA override so it auto-adjusts to new program requirements
                    sataManualOverride = false;

                    renderPrograms();
                    calculate();
                });
            });
        }

        // === UPDATE TOGGLES ===
        function updateToggles() {
            const sataSlots = selectedDevice ? (selectedDevice.sata_slots || 0) : 0;
            
            if (!selectedDevice) {
                // No device selected
                sataToggleEl.classList.add('disabled');
                sataMinusBtn.disabled = true;
                sataPlusBtn.disabled = true;
                sataValueEl.textContent = '0/0';
                sataInfoEl.textContent = '(no device selected)';
            } else if (sataSlots === 0) {
                // Device has no SATA slots
                sataToggleEl.classList.add('disabled');
                sataMinusBtn.disabled = true;
                sataPlusBtn.disabled = true;
                sataValueEl.textContent = '0/0';
                sataInfoEl.textContent = '(device has no SATA slots)';
            } else {
                // Device has SATA slots
                sataToggleEl.classList.remove('disabled');
                sataMinusBtn.disabled = sataSelected <= 0;
                sataPlusBtn.disabled = sataSelected >= sataSlots;
                sataValueEl.textContent = `${sataSelected}/${sataSlots}`;
                sataInfoEl.textContent = `@ $${SATA_DRIVE_COST}/+${SATA_DRIVE_STORAGE} storage each`;
            }
        }

        // === CALCULATE RESULTS ===
        function calculate() {
            // Hide if nothing selected at all
            if (!selectedDevice && selectedPrograms.length === 0) {
                resultsEl.classList.add('hidden');
                updateSharecode();
                return;
            }
            
            // Show panel - determine validity
            resultsEl.classList.remove('hidden');
            
            // Case: Programs selected but no device
            if (!selectedDevice) {
                const totalCpu = selectedPrograms.reduce((sum, p) => sum + p.cpu, 0);
                const totalMemory = selectedPrograms.reduce((sum, p) => sum + p.memory, 0);
                const totalStorage = selectedPrograms.reduce((sum, p) => sum + p.storage, 0);
                
                resultsEl.classList.remove('valid', 'invalid');
                resultsEl.classList.add('invalid');
                
                resultsTitleEl.className = 'results-title invalid';
                resultsTitleEl.textContent = '✗ NO DEVICE SELECTED';
                
                totalCostEl.innerHTML = `Total Cost: <span class="cost-value">—</span>`;
                
                // Show program requirements without device comparison
                metricsGridEl.innerHTML = `
                    <div class="metric-box">
                        <div class="metric-label">CPU NEEDED</div>
                        <div class="metric-value">${totalCpu}</div>
                        <div class="metric-remaining">select a device</div>
                    </div>
                    <div class="metric-box">
                        <div class="metric-label">MEMORY NEEDED</div>
                        <div class="metric-value">${totalMemory}</div>
                        <div class="metric-remaining">select a device</div>
                    </div>
                    <div class="metric-box">
                        <div class="metric-label">STORAGE NEEDED</div>
                        <div class="metric-value">${totalStorage}</div>
                        <div class="metric-remaining">select a device</div>
                    </div>
                `;
                
                // Still show programs summary
                if (selectedPrograms.length > 0) {
                    const files = [];
                    selectedPrograms.forEach(p => {
                        const hasConfig = p.requires && p.requires.startsWith('/etc/');
                        const binStorage = hasConfig ? p.storage - 1 : p.storage;
                        files.push({ path: `/bin/${p.name}`, cpu: p.cpu, mem: p.memory, storage: binStorage });
                        if (hasConfig) {
                            files.push({ path: p.requires, cpu: '-', mem: '-', storage: 1 });
                        }
                    });
                    files.sort((a, b) => a.path.localeCompare(b.path));
                    const rows = files.map(f =>
                        `<tr><td>${f.path}</td><td>${f.cpu}</td><td>${f.mem}</td><td>${f.storage}</td></tr>`
                    ).join('');
                    
                    // Basic I/O summary without device TPS
                    let ioHtml = '';
                    const outputs = {};
                    const inputs = {};
                    const stores = [];
                    selectedPrograms.forEach(p => {
                        // Aggregate outputs by individual use type
                        if (p.output_amount !== null && p.output_amount > 0 && p.output_uses) {
                            p.output_uses.forEach(use => {
                                if (!outputs[use]) outputs[use] = { perTick: 0 };
                                outputs[use].perTick += p.output_amount;
                            });
                        }
                        if (p.input_amount !== null && p.input_amount > 0 && p.input_uses) {
                            const key = p.input_uses;
                            if (!inputs[key]) inputs[key] = { perTick: 0 };
                            inputs[key].perTick += p.input_amount;
                        }
                        // Storage programs with dynamic capacity
                        if (p.capacity_per) {
                            const resLabel = p.capacity_per.resource === 'storage' ? 'hdd' : 'mem';
                            stores.push({ use: p.output_uses ? p.output_uses.join(', ') : '?', capacity: '?', formula: `${p.capacity_per.amount}/free ${resLabel}`, needsDevice: true });
                        }
                        // Programs with dynamic stack limit
                        if (p.stack_per) {
                            const stackResLabel = p.stack_per.resource === 'memory' ? 'mem' : 'hdd';
                            stores.push({ use: `${p.name} limit`, capacity: '?', formula: `${p.stack_per.amount}/free ${stackResLabel}`, needsDevice: true });
                        }
                    });
                    
                    const hasOutputs = Object.keys(outputs).length > 0;
                    const hasInputs = Object.keys(inputs).length > 0;
                    const hasStores = stores.length > 0;
                    
                    if (hasOutputs || hasInputs || hasStores) {
                        ioHtml = '<div class="io-section"><div class="io-section-title">Throughput Summary</div><div class="io-grid">';
                        if (hasInputs) {
                            let inputItems = '';
                            for (const [use, data] of Object.entries(inputs)) {
                                inputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span></div>`;
                            }
                            ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title input">↓ Input (needs)</span><span class="io-col-header">per tick</span></div><div class="io-items">${inputItems}</div></div>`;
                        }
                        if (hasOutputs) {
                            let outputItems = '';
                            for (const [use, data] of Object.entries(outputs)) {
                                outputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span></div>`;
                            }
                            ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title output">↑ Output</span><span class="io-col-header">per tick</span></div><div class="io-items">${outputItems}</div></div>`;
                        }
                        if (hasStores) {
                            let storeItems = '';
                            for (const s of stores) {
                                storeItems += `<div class="io-item"><span class="io-item-use">${s.use}</span><span class="io-item-tick">${s.capacity}</span><span class="io-item-formula">(${s.formula})</span></div>`;
                            }
                            ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title storage">◆ Dynamic Capacity</span></div><div class="io-items">${storeItems}</div><div style="font-size:10px;color:#8b949e;margin-top:6px;">Select device to calculate</div></div>`;
                        }
                        ioHtml += '</div></div>';
                    }
                    
                    programsSummaryEl.classList.remove('hidden');
                    programsSummaryEl.innerHTML = `
                        <strong>Selected:</strong> ${selectedPrograms.map(p => p.name).join(' + ')}${ioHtml}
                        <table class="file-table">
                            <thead><tr><th>File</th><th>CPU</th><th>MEM</th><th>HDD</th></tr></thead>
                            <tbody>${rows}</tbody>
                        </table>`;
                } else {
                    programsSummaryEl.classList.add('hidden');
                }
                
                updateSharecode();
                return;
            }
            
            // Case: Device selected (with or without programs)

            const totalCpu = selectedPrograms.reduce((sum, p) => sum + p.cpu, 0);
            const totalMemory = selectedPrograms.reduce((sum, p) => sum + p.memory, 0);
            const totalStorage = selectedPrograms.reduce((sum, p) => sum + p.storage, 0);

            const sataSlots = selectedDevice.sata_slots || 0;
            const maxStorage = selectedDevice.storage + (sataSlots * SATA_DRIVE_STORAGE);
            
            // Calculate how many SATA slots are needed
            const storageDeficit = totalStorage - selectedDevice.storage;
            const sataNeeded = (storageDeficit > 0 && sataSlots > 0)
                ? Math.min(Math.ceil(storageDeficit / SATA_DRIVE_STORAGE), sataSlots)
                : 0;
            
            // Auto-populate SATA if config enabled and user hasn't manually overridden
            if (!sataManualOverride) {
                if (config.maxSata && sataSlots > 0) {
                    // Maximize: fill all SATA slots
                    if (sataSelected !== sataSlots) {
                        sataSelected = sataSlots;
                        updateToggles();
                    }
                } else if (config.autoSata && sataNeeded !== sataSelected) {
                    // Minimum: only add what's needed
                    sataSelected = sataNeeded;
                    updateToggles();
                }
            }
            
            // Use sataSelected (auto-adjusted or user-controlled)
            const sataUsed = Math.min(sataSelected, sataSlots);
            const sataStorageProvided = sataUsed * SATA_DRIVE_STORAGE;

            const effectiveStorage = selectedDevice.storage + sataStorageProvided;
            const sataCost = sataUsed * SATA_DRIVE_COST;
            const totalCost = selectedDevice.price + sataCost;

            const cpuFits = totalCpu <= selectedDevice.cpu;
            const memoryFits = totalMemory <= selectedDevice.memory;
            const storageFits = totalStorage <= effectiveStorage;
            const allFit = cpuFits && memoryFits && storageFits;

            const cpuRemaining = selectedDevice.cpu - totalCpu;
            const memoryRemaining = selectedDevice.memory - totalMemory;
            const storageRemaining = effectiveStorage - totalStorage;

            // Update results panel
            resultsEl.classList.remove('hidden', 'valid', 'invalid');
            resultsEl.classList.add(allFit ? 'valid' : 'invalid');

            resultsTitleEl.className = `results-title ${allFit ? 'valid' : 'invalid'}`;
            resultsTitleEl.textContent = allFit ? '✓ CONFIGURATION VALID' : '✗ INSUFFICIENT RESOURCES';

            totalCostEl.innerHTML = `Total Cost: <span class="cost-value">$${totalCost}</span>` +
                (sataCost > 0 ? ` <span class="cost-sata">(incl. $${sataCost} SATA)</span>` : '');

            // Render metrics
            metricsGridEl.innerHTML = `
                ${renderMetric('CPU LOAD', totalCpu, selectedDevice.cpu, cpuFits, cpuRemaining, '')}
                ${renderMetric('MEMORY', totalMemory, selectedDevice.memory, memoryFits, memoryRemaining, '')}
                ${renderMetric(
                    'STORAGE' + (sataUsed > 0 ? ` (+${sataUsed} SATA)` : ''),
                    totalStorage,
                    effectiveStorage,
                    storageFits,
                    storageRemaining,
                    !storageFits ? ` (max: ${maxStorage})` : ''
                )}
            `;

            // Programs summary with file table and I/O summary
            if (selectedPrograms.length > 0) {
                // Build file list
                const files = [];
                selectedPrograms.forEach(p => {
                    const hasConfig = p.requires && p.requires.startsWith('/etc/');
                    const binStorage = hasConfig ? p.storage - 1 : p.storage;
                    files.push({ path: `/bin/${p.name}`, cpu: p.cpu, mem: p.memory, storage: binStorage });
                    if (hasConfig) {
                        files.push({ path: p.requires, cpu: '-', mem: '-', storage: 1 });
                    }
                });
                // Sort alphabetically by path
                files.sort((a, b) => a.path.localeCompare(b.path));

                const rows = files.map(f =>
                    `<tr><td>${f.path}</td><td>${f.cpu}</td><td>${f.mem}</td><td>${f.storage}</td></tr>`
                ).join('');
                
                // Build I/O summary
                const outputs = {};
                const inputs = {};
                const stores = [];
                let deviceTPS = null;
                
                if (selectedDevice && selectedDevice.cpu_cycle) {
                    deviceTPS = parseTicksPerSecond(selectedDevice.cpu_cycle);
                }
                
                selectedPrograms.forEach(p => {
                    // Aggregate outputs by individual use type
                    if (p.output_amount !== null && p.output_amount > 0 && p.output_uses) {
                        p.output_uses.forEach(use => {
                            if (!outputs[use]) outputs[use] = { perTick: 0, perSec: 0 };
                            outputs[use].perTick += p.output_amount;
                            if (deviceTPS) outputs[use].perSec += p.output_amount * deviceTPS;
                        });
                    }
                    
                    // Aggregate inputs
                    if (p.input_amount !== null && p.input_amount > 0 && p.input_uses) {
                        const key = p.input_uses;
                        if (!inputs[key]) inputs[key] = { perTick: 0, perSec: 0 };
                        inputs[key].perTick += p.input_amount;
                        if (deviceTPS) inputs[key].perSec += p.input_amount * deviceTPS;
                    }
                    
                    // Storage programs with dynamic capacity
                    if (p.capacity_per) {
                        const freeResource = p.capacity_per.resource === 'storage' 
                            ? storageRemaining 
                            : (p.capacity_per.resource === 'memory' ? memoryRemaining : 0);
                        const capacity = Math.max(0, freeResource) * p.capacity_per.amount;
                        const resLabel = p.capacity_per.resource === 'storage' ? 'hdd' : 'mem';
                        stores.push({ use: p.output_uses ? p.output_uses.join(', ') : '?', capacity: capacity, formula: `${p.capacity_per.amount}/free ${resLabel}` });
                    }
                    
                    // Programs with dynamic stack limit
                    if (p.stack_per) {
                        const freeResource = p.stack_per.resource === 'memory' 
                            ? memoryRemaining 
                            : (p.stack_per.resource === 'storage' ? storageRemaining : 0);
                        const stackCap = Math.max(0, freeResource) * p.stack_per.amount;
                        const stackResLabel = p.stack_per.resource === 'memory' ? 'mem' : 'hdd';
                        stores.push({ use: `${p.name} limit`, capacity: stackCap, formula: `${p.stack_per.amount}/free ${stackResLabel}` });
                    }
                });
                
                // Build I/O HTML
                let ioHtml = '';
                const hasOutputs = Object.keys(outputs).length > 0;
                const hasInputs = Object.keys(inputs).length > 0;
                const hasStores = stores.length > 0;
                
                if (hasOutputs || hasInputs || hasStores) {
                    ioHtml = '<div class="io-section"><div class="io-section-title">Throughput Summary</div><div class="io-grid">';
                    
                    // Inputs box (left side - what flows in)
                    if (hasInputs) {
                        let inputItems = '';
                        for (const [use, data] of Object.entries(inputs)) {
                            if (deviceTPS) {
                                inputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span><span class="io-item-sep">•</span><span class="io-item-sec">${formatTraversals(data.perSec)}</span></div>`;
                            } else {
                                inputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span></div>`;
                            }
                        }
                        const colHeader = deviceTPS 
                            ? '<span class="h-tick">per tick</span><span class="h-sep"></span><span class="h-sec">per sec</span>' 
                            : 'per tick';
                        ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title input">↓ Input (needs)</span><span class="io-col-header">${colHeader}</span></div><div class="io-items">${inputItems}</div></div>`;
                    }
                    
                    // Outputs box (right side - what flows out)
                    if (hasOutputs) {
                        let outputItems = '';
                        for (const [use, data] of Object.entries(outputs)) {
                            if (deviceTPS) {
                                outputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span><span class="io-item-sep">•</span><span class="io-item-sec">${formatTraversals(data.perSec)}</span></div>`;
                            } else {
                                outputItems += `<div class="io-item"><span class="io-item-use">${use}</span><span class="io-item-tick">${data.perTick}</span></div>`;
                            }
                        }
                        const colHeader = deviceTPS 
                            ? '<span class="h-tick">per tick</span><span class="h-sep"></span><span class="h-sec">per sec</span>' 
                            : 'per tick';
                        ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title output">↑ Output</span><span class="io-col-header">${colHeader}</span></div><div class="io-items">${outputItems}</div></div>`;
                    }
                    
                    // Storage box
                    if (hasStores) {
                        let storeItems = '';
                        for (const s of stores) {
                            storeItems += `<div class="io-item"><span class="io-item-use">${s.use}</span><span class="io-item-tick">${s.capacity}</span><span class="io-item-formula">(${s.formula})</span></div>`;
                        }
                        ioHtml += `<div class="io-box"><div class="io-box-header"><span class="io-box-title storage">◆ Dynamic Capacity</span></div><div class="io-items">${storeItems}</div></div>`;
                    }
                    
                    ioHtml += '</div></div>';
                }

                programsSummaryEl.classList.remove('hidden');
                programsSummaryEl.innerHTML = `
                    <strong>Selected:</strong> ${selectedPrograms.map(p => p.name).join(' + ')}${ioHtml}
                    <table class="file-table">
                        <thead><tr><th>File</th><th>CPU</th><th>MEM</th><th>HDD</th></tr></thead>
                        <tbody>${rows}</tbody>
                    </table>`;
            } else {
                programsSummaryEl.classList.add('hidden');
            }

            // Update sharecode
            updateSharecode();
        }

        function renderMetric(label, used, total, fits, remaining, extra) {
            const pct = Math.min(100, (used / total) * 100);
            const statusClass = fits ? 'fits' : 'over';
            const remainingText = fits
                ? `${remaining} remaining`
                : `${Math.abs(remaining)} over capacity${extra}`;

            return `
                <div class="metric-box ${statusClass}">
                    <div class="metric-label">${label}</div>
                    <div class="metric-value ${statusClass}">${used} / ${total}</div>
                    <div class="metric-remaining">${remainingText}</div>
                    <div class="metric-bar">
                        <div class="metric-bar-fill ${statusClass}" style="width: ${pct}%"></div>
                    </div>
                </div>
            `;
        }

        // === EVENT HANDLERS ===
        sataMinusBtn.addEventListener('click', () => {
            if (sataSelected > 0) {
                sataSelected--;
                sataManualOverride = true;
                updateToggles();
                calculate();
            }
        });

        sataPlusBtn.addEventListener('click', () => {
            const sataSlots = selectedDevice ? (selectedDevice.sata_slots || 0) : 0;
            if (sataSelected < sataSlots) {
                sataSelected++;
                sataManualOverride = true;
                updateToggles();
                calculate();
            }
        });

        deviceSearchEl.addEventListener('input', (e) => {
            deviceSearch = e.target.value;
            renderDevices();
        });

        programSearchEl.addEventListener('input', (e) => {
            programSearch = e.target.value;
            renderPrograms();
        });

        sharecodeEl.addEventListener('input', (e) => {
            const code = e.target.value.trim();
            if (code) loadSharecode(code);
        });

        copySharecodeBtn.addEventListener('click', () => {
            sharecodeEl.select();
            navigator.clipboard.writeText(sharecodeEl.value);
        });

        copyUrlBtn.addEventListener('click', () => {
            navigator.clipboard.writeText(window.location.href);
        });

        window.addEventListener('hashchange', () => {
            const hash = window.location.hash.slice(1);
            if (hash) loadSharecode(hash);
        });

        // === INITIALIZE ===
        loadConfig(); // Load saved config from localStorage
        renderDevices();
        renderPrograms();
        updateToggles();

        // Load from URL hash if present, otherwise clear sharecode
        if (window.location.hash) {
            loadSharecode(window.location.hash.slice(1));
        } else {
            updateSharecode();
        }
        
        // Update backlink visibility based on config
        function updateBacklink() {
            const backLink = document.getElementById('back-to-toolkit');
            const isArchiveOrg = window.location.hostname.includes('archive.org');
            
            if (config.showBacklink) {
                if (isArchiveOrg) {
                    // Archive.org already rewrote the static href — just show the link
                    backLink.classList.add('visible');
                } else {
                    backLink.href = '../index.html';
                    backLink.classList.add('visible');
                }
            } else {
                backLink.classList.remove('visible');
            }
        }
        
        // Initial backlink setup
        updateBacklink();
    </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9ca31ca66855cc78',t:'MTc3MDQ2OTY2Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>