.. назва: DNS Query Tracer & Visualizer
.. slug: dns-query-tracer-visualizer
.. дата: 2026-03-26 12:00:00 UTC
.. теги: мережа, dns, інструмент, візуалізатор
.. категорія: Інструменти
.. посилання:
.. опис: анімація рекурсивного розв’язання DNS від резолвера до офіційного сервера імен, показуючи кожен стрибок із RTT, TTL і поведінкою кешу.
.. тип: текст
<style>
    /* =========================================================
       Base layout — matches file-transfer-speed-calculator.html
       ========================================================= */
    .calc-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .form-group input,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        font-family: inherit;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
    }

    .form-group select {
        cursor: pointer;
    }

    /* Full-width domain row */
    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .submit-btn {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        margin-top: 15px;
        width: 100%;
    }

    .submit-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .submit-btn:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .submit-btn:disabled {
        background: #9E9E9E;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .btn-row {
        display: flex;
        gap: 12px;
        margin-top: 15px;
    }

    .btn-row .submit-btn {
        margin-top: 0;
    }

    .btn-secondary {
        padding: 14px 35px;
        font-size: 16px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.5);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        width: 100%;
    }

    .btn-secondary:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-1px);
    }

    .btn-secondary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }

    /* Quick-pick domain pills */
    .domain-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .domain-pill {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.4);
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Courier New', monospace;
        transition: all 0.2s ease;
        user-select: none;
    }

    .domain-pill:hover {
        background: rgba(255,255,255,0.35);
        transform: translateY(-1px);
    }

    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    /* =========================================================
       Result sections
       ========================================================= */
    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 10px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
        align-items: flex-start;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 180px;
        flex-shrink: 0;
        font-size: 14px;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 16px;
    }

    .data-value.highlight {
        color: #7B1FA2;
        font-weight: bold;
        font-size: 20px;
    }

    /* =========================================================
       SVG Visualizer
       ========================================================= */
    #svgWrapper {
        background: #1a1a2e;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    #queryVisSvg {
        width: 100%;
        display: block;
    }

    /* Status badge */
    .cache-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        font-family: 'Courier New', monospace;
        vertical-align: middle;
    }

    .cache-badge.miss { background: #ff6b6b; color: white; }
    .cache-badge.hit  { background: #51cf66; color: white; }

    /* Zone tags */
    .zone-tag {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: bold;
        font-family: 'Courier New', monospace;
        vertical-align: middle;
        margin-left: 5px;
    }
    .zone-tag.builtin { background: #1565C0; color: white; }
    .zone-tag.custom  { background: #2E7D32; color: white; }

    /* Custom zone builder */
    .zone-builder-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.4);
        color: white;
        padding: 10px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        text-align: left;
        margin-top: 14px;
        transition: background 0.2s ease;
    }
    .zone-builder-toggle:hover { background: rgba(255,255,255,0.25); }

    .zone-builder-panel {
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
        padding: 16px;
        margin-top: 12px;
        display: none;
    }
    .zone-builder-panel.open { display: block; }

    .zone-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .zone-form-label {
        font-size: 13px;
        font-weight: 600;
        color: rgba(255,255,255,0.9);
        margin-bottom: 4px;
        display: block;
    }

    .zone-form-input {
        width: 100%;
        padding: 9px 12px;
        font-size: 14px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 5px;
        background: rgba(255,255,255,0.92);
        font-family: 'Courier New', monospace;
        box-sizing: border-box;
    }
    .zone-form-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76,175,80,0.25);
    }

    .zone-records-area {
        width: 100%;
        padding: 9px 12px;
        font-size: 13px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 5px;
        background: rgba(255,255,255,0.92);
        font-family: 'Courier New', monospace;
        box-sizing: border-box;
        resize: vertical;
        min-height: 120px;
    }
    .zone-records-area:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76,175,80,0.25);
    }

    .zone-hint {
        font-size: 12px;
        color: rgba(255,255,255,0.7);
        margin-top: 4px;
        line-height: 1.5;
    }
    .zone-hint code {
        background: rgba(0,0,0,0.3);
        padding: 1px 4px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        color: #a5d6a7;
    }

    .zone-save-btn {
        padding: 9px 20px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .zone-save-btn:hover { background: #43a047; }

    .zone-error-msg {
        color: #ef9a9a;
        font-size: 13px;
        margin-top: 8px;
        display: none;
    }
    .zone-error-msg.show { display: block; }

    /* Saved zones list */
    .saved-zones-wrap {
        margin-top: 14px;
    }
    .saved-zones-label {
        font-size: 13px;
        font-weight: 600;
        color: rgba(255,255,255,0.8);
        margin-bottom: 8px;
    }
    .saved-zones-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .saved-zone-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(46,125,50,0.4);
        border: 1px solid rgba(76,175,80,0.6);
        border-radius: 20px;
        padding: 4px 10px 4px 12px;
        font-size: 13px;
        font-family: 'Courier New', monospace;
        color: white;
    }
    .saved-zone-use {
        background: none;
        border: none;
        color: #a5d6a7;
        cursor: pointer;
        font-size: 12px;
        padding: 0;
        font-family: inherit;
        text-decoration: underline;
    }
    .saved-zone-use:hover { color: white; }
    .saved-zone-del {
        background: none;
        border: none;
        color: rgba(255,255,255,0.5);
        cursor: pointer;
        font-size: 14px;
        padding: 0 2px;
        line-height: 1;
    }
    .saved-zone-del:hover { color: #ef9a9a; }

    .zone-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        font-size: 12px;
        color: rgba(255,255,255,0.6);
    }
    .zone-clear-btn {
        background: none;
        border: 1px solid rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.6);
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .zone-clear-btn:hover {
        border-color: #ef9a9a;
        color: #ef9a9a;
    }

    /* =========================================================
       Tab system
       ========================================================= */
    .tab-bar {
        display: flex;
        gap: 6px;
        margin-bottom: 22px;
        border-bottom: 2px solid rgba(255,255,255,0.25);
        padding-bottom: 0;
    }

    .tab-btn {
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.7);
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.25);
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
        position: relative;
        bottom: -2px;
    }

    .tab-btn:hover {
        background: rgba(255,255,255,0.2);
        color: white;
    }

    .tab-btn.active {
        background: rgba(255,255,255,0.95);
        color: #7B1FA2;
        border-color: rgba(255,255,255,0.6);
        border-bottom: 2px solid rgba(255,255,255,0.95);
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

    /* Import tab styles */
    .import-step {
        margin-bottom: 18px;
    }

    .import-step-label {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255,255,255,0.95);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .import-step-num {
        background: rgba(255,255,255,0.25);
        color: white;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .cmd-block {
        background: rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        padding: 12px 14px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #a5d6a7;
        line-height: 1.8;
    }

    .cmd-block .cmd-os {
        color: rgba(255,255,255,0.55);
        font-size: 11px;
        font-family: inherit;
        margin-bottom: 3px;
        display: block;
    }

    .cmd-block .cmd-line {
        color: #80cbc4;
    }

    .import-textarea {
        width: 100%;
        min-height: 160px;
        padding: 12px 14px;
        font-family: 'Courier New', monospace;
        font-size: 12.5px;
        line-height: 1.6;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        color: #1a1a2e;
        resize: vertical;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }

    .import-textarea:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
    }

    .import-parse-error {
        background: rgba(229,57,53,0.15);
        border: 1px solid rgba(229,57,53,0.5);
        border-left: 4px solid #e53935;
        border-radius: 4px;
        padding: 12px 15px;
        color: #ffcdd2;
        font-size: 13px;
        line-height: 1.6;
        margin-top: 12px;
        display: none;
    }

    .import-parse-error.show { display: block; }

    .import-parse-error code {
        background: rgba(0,0,0,0.3);
        padding: 1px 5px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #ff8a80;
    }

    .import-parse-success {
        background: rgba(76,175,80,0.15);
        border: 1px solid rgba(76,175,80,0.4);
        border-left: 4px solid #4CAF50;
        border-radius: 4px;
        padding: 12px 15px;
        color: rgba(255,255,255,0.9);
        font-size: 13px;
        line-height: 1.8;
        margin-top: 12px;
        display: none;
    }

    .import-parse-success.show { display: block; }

    .import-parse-success strong {
        color: #a5d6a7;
    }

    .import-path-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 4px 0;
    }

    .import-path-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4CAF50;
        margin-top: 5px;
        flex-shrink: 0;
    }

    .import-source-badge {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: bold;
        font-family: 'Courier New', monospace;
        margin-left: 6px;
        vertical-align: middle;
    }

    .import-source-badge.dig-trace { background: #1565C0; color: white; }
    .import-source-badge.dig-simple { background: #6A1B9A; color: white; }
    .import-source-badge.dig-short { background: #37474F; color: white; }
    .import-source-badge.nslookup { background: #E65100; color: white; }

    /* Unknown domain callout */
    .unknown-domain-box {
        background: #fff8e1;
        border: 1px solid #f9a825;
        border-left: 4px solid #f9a825;
        border-radius: 4px;
        padding: 14px 16px;
        font-size: 14px;
        color: #4a3200;
        margin-top: 10px;
        display: none;
    }
    .unknown-domain-box.show { display: block; }
    .unknown-domain-box strong { color: #e65100; }
    .unknown-domain-box .create-zone-quick {
        display: inline-block;
        margin-top: 8px;
        padding: 6px 14px;
        background: #e65100;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .unknown-domain-box .create-zone-quick:hover { background: #bf360c; }
    .unknown-domain-box ul {
        margin: 8px 0 0 0;
        padding-left: 20px;
        line-height: 1.8;
    }

    /* Simulation notice */
    .sim-notice {
        background: rgba(255,255,255,0.12);
        border-left: 3px solid rgba(255,255,255,0.5);
        border-radius: 0 4px 4px 0;
        padding: 8px 12px;
        font-size: 13px;
        color: rgba(255,255,255,0.85);
        margin-top: 12px;
        line-height: 1.5;
    }

    /* Step log table */
    .step-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .step-table th {
        background: #7B1FA2;
        color: white;
        padding: 10px 12px;
        text-align: left;
        font-size: 13px;
    }

    .step-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .step-table tr:last-child td {
        border-bottom: none;
    }

    .step-table tr:nth-child(even) td {
        background: #f5f5f5;
    }

    .step-num {
        background: #7B1FA2;
        color: white;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .arrow-query  { color: #4fc3f7; font-weight: bold; }
    .arrow-resp   { color: #81c784; font-weight: bold; }
    .arrow-ref    { color: #ffb74d; font-weight: bold; }
    .arrow-cached { color: #ce93d8; font-weight: bold; }
    .arrow-err    { color: #e57373; font-weight: bold; }

    /* DNS message hover panel */
    .msg-panel {
        background: #263238;
        border: 1px solid #455a64;
        border-radius: 6px;
        padding: 12px 15px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #cfd8dc;
        margin-top: 8px;
        line-height: 1.7;
        display: none;
        white-space: pre;
        overflow-x: auto;
    }

    .msg-panel.visible { display: block; }

    .msg-toggle {
        background: none;
        border: 1px solid #9C27B0;
        color: #9C27B0;
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .msg-toggle:hover {
        background: #9C27B0;
        color: white;
    }

    /* TTL timer */
    .ttl-bar-wrap {
        background: #e0e0e0;
        border-radius: 10px;
        height: 14px;
        overflow: hidden;
        margin-top: 6px;
    }

    .ttl-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #7B1FA2, #9C27B0);
        border-radius: 10px;
        transition: width 1s linear;
    }

    .ttl-label {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
        font-family: 'Courier New', monospace;
    }

    /* Error box */
    .error-box {
        background: #fce4ec;
        border: 1px solid #e91e63;
        border-left: 4px solid #e91e63;
        border-radius: 4px;
        padding: 12px 16px;
        color: #c62828;
        font-size: 14px;
        margin-top: 10px;
        display: none;
    }

    .error-box.show { display: block; }

    /* Animation progress indicator */
    .anim-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        background: rgba(156,39,176,0.08);
        border-radius: 4px;
        font-size: 13px;
        color: #7B1FA2;
        margin-bottom: 10px;
        display: none;
    }

    .anim-progress.show { display: flex; }

    .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(123,31,162,0.2);
        border-top-color: #7B1FA2;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        flex-shrink: 0;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Concept explainer accordions */
    .concept-wrap {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 8px;
    }

    .concept-toggle {
        background: #f5f0ff;
        border: none;
        width: 100%;
        text-align: left;
        padding: 12px 16px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: #7B1FA2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s ease;
    }

    .concept-toggle:hover { background: #ede7f6; }

    .concept-toggle .arrow {
        transition: transform 0.2s ease;
        font-size: 12px;
    }

    .concept-toggle.open .arrow { transform: rotate(90deg); }

    .concept-body {
        display: none;
        padding: 14px 16px;
        background: white;
        font-size: 14px;
        line-height: 1.7;
        color: #444;
    }

    .concept-body.open { display: block; }

    .concept-body code {
        background: #f5f0ff;
        padding: 1px 5px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #7B1FA2;
    }

    /* =========================================================
       Mobile responsive
       ========================================================= */
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-group.full-width {
            grid-column: 1;
        }

        .data-row {
            flex-direction: column;
        }

        .data-label {
            margin-bottom: 5px;
            min-width: auto;
        }

        .btn-row {
            flex-direction: column;
        }

        .step-table th:nth-child(3),
        .step-table td:nth-child(3) {
            display: none;
        }

        #queryVisSvg {
            min-height: 280px;
        }

        .zone-form-grid {
            grid-template-columns: 1fr;
        }

        .tab-bar {
            flex-direction: row; /* keep tabs side by side on mobile */
            gap: 4px;
        }

        .tab-btn {
            padding: 9px 14px;
            font-size: 13px;
        }

        .import-textarea {
            min-height: 120px;
            font-size: 12px;
        }

        .cmd-block {
            font-size: 12px;
        }
    }
</style>
==============================================================
     ОСНОВНИЙ КОНТЕЙНЕР
     ==============================================================
<div class="calc-container">
Заголовок / Панель введення
<div class="calc-header">
<h2>DNS Query Tracer &amp; Visualizer</h2>
<p>Анімуйте рекурсивну розв’язку DNS від вашого розв’язувача до авторитетного
            сервер імен. Переглядайте кожен стрибок, RTT, TTL і поведінку кешу.</p>
Панель вкладок
<div aria-label="Tool mode" class="tab-bar" role="tablist">
<button aria-controls="panelSimulate" aria-selected="true" class="tab-btn active" id="tabSimulate" onclick="switchTab('simulate')" role="tab">Імітація домену</button>
<button aria-controls="panelImport" aria-selected="false" class="tab-btn" id="tabImport" onclick="switchTab('import')" role="tab">Імпорт справжнього запиту</button>
</div>
Панель вкладок: Симуляція (існуючий інтерфейс користувача)
<div aria-labelledby="tabSimulate" class="tab-panel active" id="panelSimulate" role="tabpanel">
<div class="form-grid">
<div class="form-group full-width">
<label for="dnsInput">Доменне ім'я:</label>
<input aria-label="Domain name to resolve" autocomplete="off" id="dnsInput" placeholder="e.g. www.example.com" spellcheck="false" type="text" value="www.example.com"/>
</div>
<div class="form-group">
<label for="resolverSelect">Рекурсивний розв'язувач:</label>
<select aria-label="Choose recursive resolver" id="resolverSelect">
<option value="8.8.8.8">Google Public DNS (8.8.8.8)</option>
<option value="1.1.1.1">Cloudflare (1.1.1.1)</option>
<option value="9.9.9.9">Quad9 (9.9.9.9)</option>
<option value="custom">Спеціальний розв'язувач...</option>
</select>
</div>
<div class="form-group">
<label for="recordType">Тип запису:</label>
<select aria-label="DNS record type" id="recordType">
<option selected="" value="A">A (адреса IPv4)</option>
<option value="AAAA">AAAA (адреса IPv6)</option>
<option value="MX">MX (обмінник пошти)</option>
<option value="NS">NS (сервер імен)</option>
<option value="TXT">TXT (текстовий запис)</option>
</select>
</div>
<div class="form-group" id="customResolverGroup" style="display:none">
<label for="customResolver">IP-адреса користувацького розпізнавача:</label>
<input aria-label="Custom resolver IP address" id="customResolver" placeholder="e.g. 192.168.1.1" type="text"/>
</div>
</div>
Швидкий вибір доменів
<div style="margin-top: 14px;">
<label style="font-size:13px;color:rgba(255,255,255,0.8);font-weight:600;">Швидкі приклади:</label>
<div aria-label="Example domains" class="domain-pills" id="builtinPills" role="group">
<span class="domain-pill" onclick="setDomain('www.example.com')" role="button" tabindex="0">www.example.com</span>
<span class="domain-pill" onclick="setDomain('mail.example.com')" role="button" tabindex="0">mail.example.com</span>
<span class="domain-pill" onclick="setDomain('www.google.com')" role="button" tabindex="0">www.google.com</span>
<span class="domain-pill" onclick="setDomain('github.com')" role="button" tabindex="0">github.com</span>
<span class="domain-pill" onclick="setDomain('api.cloudflare.com')" role="button" tabindex="0">api.cloudflare.com</span>
<span class="domain-pill" onclick="setDomain('www.amazon.com')" role="button" tabindex="0">www.amazon.com</span>
<span class="domain-pill" onclick="setDomain('www.wikipedia.org')" role="button" tabindex="0">www.wikipedia.org</span>
<span class="domain-pill" onclick="setDomain('smtp.fastmail.com')" role="button" tabindex="0">smtp.fastmail.com</span>
<span class="domain-pill" onclick="setDomain('mx.example.net')" role="button" tabindex="0">mx.example.net</span>
<span class="domain-pill" onclick="setDomain('nxdomain.example.com')" role="button" tabindex="0">Приклад NXDOMAIN</span>
</div>
</div>
<div class="btn-row">
<button aria-label="Trace DNS query" class="submit-btn" id="traceBtn" onclick="startTrace()">Відстеження запиту DNS</button>
<button aria-label="Repeat query to show cache behaviour" class="btn-secondary" disabled="" id="repeatBtn" onclick="repeatTrace()">Повторити (показати кеш)</button>
</div>
<div class="error-box" id="errorBox" role="alert"></div>
<div class="unknown-domain-box" id="unknownDomainBox" role="alert"></div>
<div class="sim-notice">
<strong>Змодельована база даних:</strong>Цей інструмент використовує вбудовану базу даних DNS
            (неможливі реальні мережеві запити з браузера). Використовуйте конструктор зон
            нижче, щоб додати будь-який домен, який ви хочете протестувати.</div>
<div class="help-text" style="margin-top:10px;">
<strong>Як це працює:</strong>Ваш резолвер запитує кореневі сервери імен для
            TLD, потім запитує сервери TLD для отримання авторитетного сервера імен, потім
            отримує запис. Кожен стрибок показує RTT і чи була відповідь кешована.</div>
Конструктор спеціальних зон
<button aria-expanded="false" class="zone-builder-toggle" id="zoneBuilderToggle" onclick="toggleZoneBuilder()">
<span>+</span>Створюйте та керуйте спеціальними зонами<span id="customZoneCount" style="margin-left:auto;font-size:11px;opacity:0.7;"></span>
</button>
<div class="zone-builder-panel" id="zoneBuilderPanel">
<div style="font-size:14px;font-weight:600;color:rgba(255,255,255,0.95);margin-bottom:12px;">Визначте спеціальну зону — потім надішліть запит до неї, як до будь-якого іншого домену</div>
<div class="zone-form-grid">
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneNameInput">Назва зони (домен):</label>
<input autocomplete="off" class="zone-form-input" id="zoneNameInput" placeholder="e.g. mycompany.com" spellcheck="false" type="text"/>
</div>
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneNs1">Основне ім'я хоста сервера імен:</label>
<input class="zone-form-input" id="zoneNs1" placeholder="ns1.mycompany.com" type="text"/>
</div>
<div>
<label class="zone-form-label" for="zoneNs1Ip">IP-адреса NS1:</label>
<input class="zone-form-input" id="zoneNs1Ip" placeholder="203.0.113.1" type="text"/>
</div>
<div>
<label class="zone-form-label" for="zoneNs2Ip">NS2 IP (опціонально):</label>
<input class="zone-form-input" id="zoneNs2Ip" placeholder="203.0.113.2" type="text"/>
</div>
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneRecordsArea">Записи зон (по одному на рядок):</label>
<textarea class="zone-records-area" id="zoneRecordsArea" placeholder='@ A 203.0.113.10 3600
www A 203.0.113.10 300
mail A 203.0.113.20 3600
@ MX mail.mycompany.com 3600 10
@ TXT "v=spf1 ip4:203.0.113.0/24 ~all" 3600
api CNAME www.mycompany.com 300'></textarea>
<div class="zone-hint">Формат:<code>label type value TTL [priority]</code><br/>використання<code>@</code>для верхівки зони. Записи MX мають додаткове поле пріоритету.<br/>Підтримувані типи: A, AAAA, MX, NS, TXT, CNAME</div>
</div>
</div>
<div class="zone-error-msg" id="zoneErrorMsg"></div>
<button class="zone-save-btn" onclick="saveCustomZone()">Зона збереження</button>
Список збережених зон
<div class="saved-zones-wrap" id="savedZonesWrap" style="display:none;">
<div class="zone-meta-row" style="margin-top:14px;margin-bottom:8px;">
<span class="saved-zones-label" style="margin-bottom:0;">Збережені спеціальні зони:</span>
<button class="zone-clear-btn" onclick="clearAllZones()">Очистити все</button>
</div>
<div class="saved-zones-list" id="savedZonesList"></div>
<div class="zone-meta-row">
<span id="storageInfo"></span>
</div>
</div>
</div>
</div>/.tab-panel#panelSimulate
Панель вкладок: Імпорт справжнього запиту
<div aria-labelledby="tabImport" class="tab-panel" id="panelImport" role="tabpanel">
<div class="import-step">
<div class="import-step-label">
<span class="import-step-num">1</span>Виконайте цю команду у своїй системі:</div>
<div class="cmd-block">
<span class="cmd-os" style="color: #4CAF50; font-weight: bold;">РЕКОМЕНДОВАНО (найнадійніше — працює на будь-якому домені):</span>
<span class="cmd-line">dig example.com</span>
<span class="cmd-os" style="margin-top:10px;">Або Windows / Linux / macOS:</span>
<span class="cmd-line">nslookup example.com</span>
<span class="cmd-os" style="margin-top:15px; color: #FF9800;">Для повного шляху вирішення (може виникнути помилка на CDN або складному DNS):</span>
<span class="cmd-line">dig +trace +tries=1 +nodnssec example.com</span>
<span class="cmd-os" style="margin-top:15px;">Щоб використовувати певний загальнодоступний сервер DNS:</span>
<span class="cmd-line">dig @8.8.8.8 example.com</span>
<span class="cmd-line" style="margin-top:5px;">dig @1.1.1.1 example.com</span>
<span class="cmd-os" style="margin-top:15px; color: #f44336; font-weight: bold;">⚠️ УНИКАЙТЕ: копайте + відстежуйте самостійно</span>
<span class="cmd-os" style="color: #666; font-size: 13px; margin-top: 5px;">Це не вдається на багатьох доменах (розміщені на CDN, неправильно налаштовані DNS). Натомість використовуйте наведені вище команди.<br/>Примітка: dig @8.8.8.8 +trace також не вдається — прапор @ впливає лише на перший стрибок.</span>
</div>
</div>
<div class="import-step">
<div class="import-step-label">
<span class="import-step-num">2</span>Скопіюйте весь результат і вставте його нижче:</div>
<textarea aria-label="Paste dig or nslookup output" autocomplete="off" class="import-textarea" id="importTextarea" oninput="importOnInput()" placeholder="Paste dig or nslookup output here...

Example (dig +trace):
; &lt;&lt;&gt;&gt; DiG 9.16.1 &lt;&lt;&gt;&gt; +trace google.com
.    518400  IN  NS  a.root-servers.net.
...

Example (nslookup):
Server:  8.8.8.8
Address: 8.8.8.8#53
Name:    github.com
Address: 140.82.113.4" rows="10" spellcheck="false"></textarea>
<div class="import-parse-error" id="importParseError" role="alert"></div>
<div class="import-parse-success" id="importParseSuccess" role="status"></div>
</div>
<div class="import-step">
<div class="import-step-label">
<span class="import-step-num">3</span>Візуалізуйте проаналізований шлях запиту:</div>
<div class="btn-row">
<button class="submit-btn" id="importParseBtn" onclick="parseAndVisualize()">Розбір і візуалізація</button>
<button class="btn-secondary" id="importClearBtn" onclick="clearImport()">ясно</button>
</div>
</div>
</div>/.tab-panel#panelImport
</div>/.calc-заголовок
Прогрес анімації
<div aria-live="polite" class="anim-progress" id="animProgress">
<div aria-label="Resolving" class="spinner" role="status"></div>
<span id="animProgressText">Запит кореневих серверів імен...</span>
</div>
Візуалізатор SVG
<div class="result-section" id="visSection">
<div class="section-header">
<h3>Шлях вирішення</h3>
<span class="cache-badge miss" id="cacheStatusBadge">МІС</span>
</div>
<div class="section-content" style="padding:15px;">
<div id="svgWrapper">
<svg aria-label="DNS query path visualization" id="queryVisSvg" role="img">
Заповнено JS
</svg>
</div>
</div>
</div>
Покроковий журнал
<div class="result-section" id="stepsSection">
<div class="section-header">
<h3>Покроковий журнал вирішення</h3>
</div>
<div class="section-content" style="padding: 0;">
<table aria-label="DNS resolution steps" class="step-table" id="stepsTable">
<thead>
<tr>
<th style="width:40px;">#</th>
<th>Сервер</th>
<th style="width:70px;">RTT</th>
<th>Запит/Відповідь</th>
<th style="width:90px;">Тип</th>
</tr>
</thead>
<tbody id="stepsBody">
</tbody>
</table>
</div>
</div>
Остаточна відповідь
<div class="result-section" id="answerSection">
<div class="section-header">
<h3>Остаточна відповідь</h3>
</div>
<div class="section-content" id="answerContent">
</div>
</div>
Таймер TTL
<div class="result-section" id="ttlSection">
<div class="section-header">
<h3>Таймер кешу TTL</h3>
</div>
<div class="section-content" id="ttlContent">
</div>
</div>
Інспектор повідомлень DNS
<div class="result-section" id="msgSection">
<div class="section-header">
<h3>Інспектор повідомлень DNS</h3>
</div>
<div class="section-content" id="msgContent">
</div>
</div>
Концепції
<div class="result-section" id="conceptsSection" style="display:block; margin-top:20px;">
<div class="section-header" style="cursor:default;">
<h3>DNS Concepts Reference</h3>
</div>
<div class="section-content">
<div class="concept-wrap">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">Рекурсивне проти ітеративного вирішення<span class="arrow">▶</span>
</button>
<div class="concept-body">
<strong>рекурсивний:</strong>Ваш розпізнавач-заглушка надсилає один запит до рекурсивного розпізнавача
                    (наприклад, 8.8.8.8). Цей резолвер обробляє всю ітеративну роботу від вашого імені та
                    повертає остаточну відповідь.<br/><br/>
<strong>Ітеративний:</strong>Кожен сервер імен повертає a<em>направлення</em>— «Я ні
                    знаю, але спробуй цей сервер". Рекурсивний розпізнавач слідує за рефералами, доки не досягне
                    авторитетний сервер імен.<br/><br/>Цей інструмент імітує<em>ітеративний</em>запити, які виконує рекурсивний розв’язувач
                    внутрішньо: root → TLD → авторитетний.</div>
</div>
<div class="concept-wrap" style="margin-top:6px;">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">TTL (Time To Live) і кешування<span class="arrow">▶</span>
</button>
<div class="concept-body">Кожен запис DNS містить TTL за лічені секунди. Резолвери кешують відповіді протягом цього часу.
                    У кеш-пам’яті відповіді на наступні запити надаються миттєво (жодних зворотних маршрутів у мережі).<br/><br/>Загальні TTL:<ul>
<li><code>A/AAAA</code>— від 300 с (5 хв) до 3600 с (1 год)</li>
<li><code>MX</code>— 3600 с тип</li>
<li><code>NS</code>— 86400 с (24 години) типово</li>
<li><code>TXT (SPF)</code>— 3600 с тип</li>
</ul>Низькі TTL дозволяють швидко змінювати записи; високі TTL зменшують навантаження на резольвер.</div>
</div>
<div class="concept-wrap" style="margin-top:6px;">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">Авторитетні та рекурсивні сервери імен<span class="arrow">▶</span>
</button>
<div class="concept-body">
<strong>Авторитетний сервер імен:</strong>Містить фактичні дані зони (записи A, MX
                    записи тощо) для домену. Відповідає с<code>AA=1</code>(авторитетна відповідь)
                    у заголовку DNS.<br/><br/>
<strong>Рекурсивний (кешуючий) розпізнавач:</strong>Не зберігає дані зони. Це запити
                    інші сервери від імені клієнтів, кешує результати та повертає відповіді. приклади:
                    8.8.8.8, 1.1.1.1.</div>
</div>
<div class="concept-wrap" style="margin-top:6px;">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">NXDOMAIN і негативне кешування<span class="arrow">▶</span>
</button>
<div class="concept-body">Якщо домен не існує, повертається офіційний сервер імен<code>RCODE=NXDOMAIN</code>. Резолвери кешують цю негативну відповідь протягом певного часу
                    зони<strong>Мінімальний TTL SOA</strong>(частіше 300–3600 с).<br/><br/>Негативне кешування (RFC 2308) запобігає повторним запитам щодо неіснуючих імен.</div>
</div>
<div class="concept-wrap" style="margin-top:6px;">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">Записи клею<span class="arrow">▶</span>
</button>
<div class="concept-body">Коли є офіційний сервер імен зони<em>в межах</em>сама зона
                    (наприклад,<code>ns1.example.com</code>для<code>example.com</code>), циркуляр
                    виникне залежність. Батьківська зона TLD вирішує це шляхом включення<strong>клеїти записи</strong>— Записи для сервера імен надаються безпосередньо
                    у відповіді реферала, уникаючи необхідності додаткового пошуку.</div>
</div>
</div>
</div>
</div>/.calc-контейнер
==============================================================
     JAVASCRIPT
     ==============================================================
<script>
'use strict';

/* ================================================================
   DNS DATABASE
   Hardcoded zone data: root, TLD, and sample second-level domains.
   Record types supported: A, AAAA, MX, NS, TXT, CNAME
   ================================================================ */

/** @typedef {{ type: string, value: string, ttl: number, priority?: number }} DnsRecord */
/** @typedef {{ name: string, ip: string }} Nameserver */
/**
 * @typedef {{
 *   nameservers: Nameserver[],
 *   records?: Record<string, DnsRecord[]>
 * }} ZoneData
 */

/** @type {Record<string, ZoneData>} */
const DNS_DB = {
    /* ================================================================
       ROOT ZONE
       ================================================================ */
    '.': {
        nameservers: [
            { name: 'a.root-servers.net', ip: '198.41.0.4' },
            { name: 'b.root-servers.net', ip: '170.247.170.2' },
            { name: 'c.root-servers.net', ip: '192.33.4.12' },
            { name: 'k.root-servers.net', ip: '193.0.14.129' },
            { name: 'm.root-servers.net', ip: '202.12.27.33' }
        ]
    },

    /* ================================================================
       TLD ZONES — Generic
       ================================================================ */
    'com.': {
        nameservers: [
            { name: 'a.gtld-servers.net', ip: '192.5.6.30' },
            { name: 'b.gtld-servers.net', ip: '192.33.14.30' },
            { name: 'c.gtld-servers.net', ip: '192.26.92.30' }
        ]
    },
    'org.': {
        nameservers: [
            { name: 'a0.org.afilias-nst.info', ip: '199.19.56.1' },
            { name: 'b0.org.afilias-nst.org',  ip: '199.19.54.1' },
            { name: 'a2.org.afilias-nst.info', ip: '199.249.112.1' }
        ]
    },
    'net.': {
        nameservers: [
            { name: 'a.gtld-servers.net', ip: '192.5.6.30' },
            { name: 'b.gtld-servers.net', ip: '192.33.14.30' }
        ]
    },
    'edu.': {
        nameservers: [
            { name: 'a.edu-servers.net', ip: '192.5.6.30' },
            { name: 'c.edu-servers.net', ip: '192.26.92.30' }
        ]
    },
    'gov.': {
        nameservers: [
            { name: 'a.gov-servers.net', ip: '69.36.145.33' },
            { name: 'b.gov-servers.net', ip: '69.36.145.34' }
        ]
    },
    'io.': {
        nameservers: [
            { name: 'a0.nic.io', ip: '65.22.6.1' },
            { name: 'a2.nic.io', ip: '65.22.7.1' }
        ]
    },
    'dev.': {
        nameservers: [
            { name: 'ns-tld1.charlestonroadregistry.com', ip: '216.239.32.105' },
            { name: 'ns-tld2.charlestonroadregistry.com', ip: '216.239.34.105' }
        ]
    },
    'app.': {
        nameservers: [
            { name: 'ns-tld1.charlestonroadregistry.com', ip: '216.239.32.105' },
            { name: 'ns-tld2.charlestonroadregistry.com', ip: '216.239.34.105' }
        ]
    },
    'co.': {
        nameservers: [
            { name: 'a.gtld-servers.net', ip: '192.5.6.30' },
            { name: 'b.gtld-servers.net', ip: '192.33.14.30' }
        ]
    },
    'info.': {
        nameservers: [
            { name: 'a0.info.afilias-nst.info', ip: '199.254.31.1' },
            { name: 'b0.info.afilias-nst.info', ip: '199.254.30.1' }
        ]
    },
    'biz.': {
        nameservers: [
            { name: 'a.gtld-servers.net', ip: '192.5.6.30' },
            { name: 'b.gtld-servers.net', ip: '192.33.14.30' }
        ]
    },
    'us.': {
        nameservers: [
            { name: 'a.cctld.us', ip: '156.154.127.1' },
            { name: 'b.cctld.us', ip: '156.154.126.1' }
        ]
    },
    'uk.': {
        nameservers: [
            { name: 'ns1.nic.uk', ip: '213.219.7.90' },
            { name: 'ns2.nic.uk', ip: '213.219.7.91' }
        ]
    },
    'de.': {
        nameservers: [
            { name: 'a.nic.de', ip: '194.0.0.53' },
            { name: 'f.nic.de', ip: '81.91.164.5' }
        ]
    },
    'fr.': {
        nameservers: [
            { name: 'd.ext.nic.fr', ip: '194.0.9.1' },
            { name: 'g.ext.nic.fr', ip: '194.0.36.1' }
        ]
    },
    'ca.': {
        nameservers: [
            { name: 'any.ca-servers.ca', ip: '185.159.196.2' },
            { name: 'c.ca-servers.ca', ip: '185.159.197.2' }
        ]
    },
    'au.': {
        nameservers: [
            { name: 'a.au', ip: '58.65.254.131' },
            { name: 'b.au', ip: '58.65.255.131' }
        ]
    },
    'jp.': {
        nameservers: [
            { name: 'a.dns.jp', ip: '203.119.1.1' },
            { name: 'b.dns.jp', ip: '202.12.30.131' }
        ]
    },
    'cn.': {
        nameservers: [
            { name: 'a.dns.cn', ip: '203.119.25.1' },
            { name: 'b.dns.cn', ip: '203.119.26.1' }
        ]
    },
    'nl.': {
        nameservers: [
            { name: 'ns1.dns.nl', ip: '194.0.28.53' },
            { name: 'ns2.dns.nl', ip: '194.0.28.54' }
        ]
    },
    'se.': {
        nameservers: [
            { name: 'i.ns.se', ip: '192.36.133.107' },
            { name: 'a.ns.se', ip: '192.36.125.2' }
        ]
    },
    'no.': {
        nameservers: [
            { name: 'a.ns.no', ip: '194.0.28.1' },
            { name: 'b.ns.no', ip: '194.0.28.2' }
        ]
    },
    'tech.': {
        nameservers: [
            { name: 'a.nic.tech', ip: '156.154.144.1' },
            { name: 'b.nic.tech', ip: '156.154.145.1' }
        ]
    },
    'cloud.': {
        nameservers: [
            { name: 'a.nic.cloud', ip: '65.22.8.1' },
            { name: 'b.nic.cloud', ip: '65.22.9.1' }
        ]
    },
    'online.': {
        nameservers: [
            { name: 'a.nic.online', ip: '156.154.144.3' },
            { name: 'b.nic.online', ip: '156.154.145.3' }
        ]
    },
    'local.': {
        nameservers: [
            { name: 'ns1.local', ip: '192.168.1.1' }
        ]
    },
    'internal.': {
        nameservers: [
            { name: 'ns1.internal', ip: '10.0.0.1' }
        ]
    },
    'test.': {
        nameservers: [
            { name: 'ns1.test', ip: '192.0.2.1' }
        ]
    },
    'example.': {
        nameservers: [
            { name: 'ns1.example', ip: '192.0.2.2' }
        ]
    },

    /* ================================================================
       SECOND-LEVEL DOMAIN ZONES
       ================================================================ */

    /* ---- example.com ---- */
    'example.com.': {
        nameservers: [
            { name: 'ns1.example.com', ip: '93.184.216.1' },
            { name: 'ns2.example.com', ip: '93.184.216.2' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '93.184.216.34', ttl: 86400 },
                { type: 'AAAA', value: '2606:2800:220:1:248:1893:25c8:1946', ttl: 86400 },
                { type: 'NS',   value: 'ns1.example.com', ttl: 86400 },
                { type: 'NS',   value: 'ns2.example.com', ttl: 86400 },
                { type: 'MX',   value: 'mail.example.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.example.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A',    value: '93.184.216.34', ttl: 300 },
                { type: 'AAAA', value: '2606:2800:220:1:248:1893:25c8:1946', ttl: 300 }
            ],
            'mail': [
                { type: 'A',    value: '93.184.216.10', ttl: 3600 }
            ],
            'ftp': [
                { type: 'CNAME', value: 'www.example.com', ttl: 300 }
            ]
        }
    },

    /* ---- google.com ---- */
    'google.com.': {
        nameservers: [
            { name: 'ns1.google.com', ip: '216.239.32.10' },
            { name: 'ns2.google.com', ip: '216.239.34.10' },
            { name: 'ns3.google.com', ip: '216.239.36.10' },
            { name: 'ns4.google.com', ip: '216.239.38.10' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '142.250.80.46', ttl: 300 },
                { type: 'AAAA', value: '2607:f8b0:4004:c07::64', ttl: 300 },
                { type: 'NS',   value: 'ns1.google.com', ttl: 345600 },
                { type: 'MX',   value: 'smtp.google.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.google.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A',    value: '142.250.80.46', ttl: 300 },
                { type: 'AAAA', value: '2607:f8b0:4004:c07::64', ttl: 300 }
            ],
            'mail': [
                { type: 'A',    value: '142.250.80.108', ttl: 300 }
            ],
            'smtp': [
                { type: 'A',    value: '142.250.80.26', ttl: 300 }
            ],
            'dns': [
                { type: 'A',    value: '8.8.8.8', ttl: 3600 },
                { type: 'AAAA', value: '2001:4860:4860::8888', ttl: 3600 }
            ]
        }
    },

    /* ---- github.com ---- */
    'github.com.': {
        nameservers: [
            { name: 'ns-1283.awsdns-32.org', ip: '205.251.197.3' },
            { name: 'ns-421.awsdns-52.com',  ip: '205.251.193.165' },
            { name: 'ns-1707.awsdns-21.co.uk', ip: '205.251.198.171' },
            { name: 'ns-520.awsdns-01.net',  ip: '205.251.194.8' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '140.82.113.4', ttl: 3600 },
                { type: 'A',    value: '140.82.114.4', ttl: 3600 },
                { type: 'AAAA', value: '2606:50c0:8000::154', ttl: 3600 },
                { type: 'NS',   value: 'ns-1283.awsdns-32.org', ttl: 172800 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 ip4:192.30.252.0/22 include:_netblocks.google.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'CNAME', value: 'github.com', ttl: 3600 }
            ],
            'api': [
                { type: 'A', value: '140.82.112.5', ttl: 60 }
            ],
            'gist': [
                { type: 'A', value: '140.82.112.10', ttl: 3600 }
            ]
        }
    },

    /* ---- cloudflare.com ---- */
    'cloudflare.com.': {
        nameservers: [
            { name: 'ns3.cloudflare.com', ip: '108.162.193.9' },
            { name: 'ns4.cloudflare.com', ip: '108.162.197.9' },
            { name: 'ns5.cloudflare.com', ip: '173.245.59.167' },
            { name: 'ns6.cloudflare.com', ip: '173.245.58.167' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '104.16.132.229', ttl: 300 },
                { type: 'A',    value: '104.16.133.229', ttl: 300 },
                { type: 'AAAA', value: '2606:4700::6810:84e5', ttl: 300 },
                { type: 'NS',   value: 'ns3.cloudflare.com', ttl: 86400 },
                { type: 'MX',   value: 'mailstream.cloudflare.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.cloudflare.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '104.16.132.229', ttl: 300 }
            ],
            'api': [
                { type: 'A', value: '104.16.132.229', ttl: 300 }
            ],
            'dash': [
                { type: 'A', value: '104.16.133.229', ttl: 300 }
            ],
            'blog': [
                { type: 'CNAME', value: 'ghost.cloudflare.com', ttl: 300 }
            ],
            '1dot1dot1dot1': [
                { type: 'A', value: '1.1.1.1', ttl: 86400 }
            ]
        }
    },

    /* ---- amazon.com ---- */
    'amazon.com.': {
        nameservers: [
            { name: 'pdns1.ultradns.net', ip: '204.74.108.1' },
            { name: 'pdns2.ultradns.net', ip: '204.74.109.1' },
            { name: 'pdns3.ultradns.org', ip: '199.7.68.1' },
            { name: 'pdns4.ultradns.org', ip: '199.7.69.1' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '205.251.242.103', ttl: 900 },
                { type: 'A',    value: '52.94.236.248', ttl: 900 },
                { type: 'NS',   value: 'pdns1.ultradns.net', ttl: 172800 },
                { type: 'MX',   value: 'smtp.amazon.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:spf1.amazon.com include:spf2.amazon.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '205.251.242.103', ttl: 60 }
            ],
            'aws': [
                { type: 'CNAME', value: 'aws.amazon.com.edgekey.net', ttl: 300 }
            ],
            's3': [
                { type: 'A', value: '52.216.0.1', ttl: 60 }
            ]
        }
    },

    /* ---- microsoft.com ---- */
    'microsoft.com.': {
        nameservers: [
            { name: 'ns1.msft.net', ip: '208.84.0.53' },
            { name: 'ns2.msft.net', ip: '208.84.1.53' },
            { name: 'ns3.msft.net', ip: '208.84.2.53' },
            { name: 'ns4.msft.net', ip: '208.84.3.53' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '20.236.44.162', ttl: 3600 },
                { type: 'AAAA', value: '2603:1006:1400::1', ttl: 3600 },
                { type: 'NS',   value: 'ns1.msft.net', ttl: 86400 },
                { type: 'MX',   value: 'microsoft-com.mail.protection.outlook.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:spf.protection.outlook.com -all"', ttl: 3600 }
            ],
            'www': [
                { type: 'CNAME', value: 'www.microsoft.com.edgekey.net', ttl: 300 }
            ],
            'azure': [
                { type: 'CNAME', value: 'azure.microsoft.com', ttl: 300 }
            ]
        }
    },

    /* ---- apple.com ---- */
    'apple.com.': {
        nameservers: [
            { name: 'a.ns.apple.com', ip: '17.32.192.1' },
            { name: 'b.ns.apple.com', ip: '17.32.196.1' },
            { name: 'c.ns.apple.com', ip: '17.32.200.1' },
            { name: 'd.ns.apple.com', ip: '17.32.204.1' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '17.253.144.10', ttl: 3600 },
                { type: 'AAAA', value: '2620:149:af3:1::a', ttl: 3600 },
                { type: 'NS',   value: 'a.ns.apple.com', ttl: 86400 },
                { type: 'MX',   value: 'mx.apple.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.apple.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '17.253.144.10', ttl: 3600 }
            ],
            'developer': [
                { type: 'CNAME', value: 'developer.apple.com.edgekey.net', ttl: 300 }
            ]
        }
    },

    /* ---- meta.com ---- */
    'meta.com.': {
        nameservers: [
            { name: 'a.ns.meta.com', ip: '129.134.30.12' },
            { name: 'b.ns.meta.com', ip: '129.134.31.12' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '163.70.128.35', ttl: 300 },
                { type: 'NS',   value: 'a.ns.meta.com', ttl: 86400 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.meta.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '163.70.128.35', ttl: 300 }
            ]
        }
    },

    /* ---- facebook.com ---- */
    'facebook.com.': {
        nameservers: [
            { name: 'a.ns.facebook.com', ip: '129.134.30.12' },
            { name: 'b.ns.facebook.com', ip: '129.134.31.12' },
            { name: 'c.ns.facebook.com', ip: '185.89.218.12' },
            { name: 'd.ns.facebook.com', ip: '185.89.219.12' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '157.240.241.35', ttl: 3600 },
                { type: 'AAAA', value: '2a03:2880:f101:83:face:b00c:0:25de', ttl: 3600 },
                { type: 'NS',   value: 'a.ns.facebook.com', ttl: 86400 },
                { type: 'MX',   value: 'smtpin.vvv.facebook.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.facebook.com ip4:69.171.238.0/29 ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '157.240.241.35', ttl: 300 }
            ]
        }
    },

    /* ---- twitter.com ---- */
    'twitter.com.': {
        nameservers: [
            { name: 'ns1.p34.dynect.net', ip: '208.78.70.34' },
            { name: 'ns2.p34.dynect.net', ip: '204.13.250.34' },
            { name: 'ns3.p34.dynect.net', ip: '208.78.71.34' },
            { name: 'ns4.p34.dynect.net', ip: '204.13.251.34' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '104.244.42.193', ttl: 300 },
                { type: 'A',    value: '104.244.42.1', ttl: 300 },
                { type: 'NS',   value: 'ns1.p34.dynect.net', ttl: 3600 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.twitter.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '104.244.42.193', ttl: 300 }
            ],
            'api': [
                { type: 'A', value: '104.244.42.129', ttl: 60 }
            ]
        }
    },

    /* ---- linkedin.com ---- */
    'linkedin.com.': {
        nameservers: [
            { name: 'dns1.p09.nsone.net', ip: '198.51.44.9' },
            { name: 'dns2.p09.nsone.net', ip: '198.51.45.9' },
            { name: 'dns3.p09.nsone.net', ip: '198.51.46.9' },
            { name: 'dns4.p09.nsone.net', ip: '198.51.47.9' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '108.174.10.10', ttl: 3600 },
                { type: 'AAAA', value: '2620:109:c002::6cb6:a0a', ttl: 3600 },
                { type: 'NS',   value: 'dns1.p09.nsone.net', ttl: 3600 },
                { type: 'MX',   value: 'mx1.linkedin.com', ttl: 3600, priority: 5 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.linkedin.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'CNAME', value: 'www-linkedin-com.l-0005.l-msedge.net', ttl: 300 }
            ]
        }
    },

    /* ---- netflix.com ---- */
    'netflix.com.': {
        nameservers: [
            { name: 'ns-1504.awsdns-59.org', ip: '205.251.198.240' },
            { name: 'ns-1816.awsdns-35.co.uk', ip: '205.251.199.40' },
            { name: 'ns-203.awsdns-25.com', ip: '205.251.192.203' },
            { name: 'ns-770.awsdns-32.net', ip: '205.251.195.2' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '3.248.200.193', ttl: 300 },
                { type: 'NS',   value: 'ns-1504.awsdns-59.org', ttl: 172800 },
                { type: 'MX',   value: 'mx1.netflix.com', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.netflix.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'CNAME', value: 'cdn.netflix.com', ttl: 60 }
            ]
        }
    },

    /* ---- fastmail.com ---- */
    'fastmail.com.': {
        nameservers: [
            { name: 'ns1.messagingengine.com', ip: '66.111.4.1' },
            { name: 'ns2.messagingengine.com', ip: '66.111.4.2' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '66.111.4.131', ttl: 3600 },
                { type: 'NS',   value: 'ns1.messagingengine.com', ttl: 86400 },
                { type: 'MX',   value: 'in1-smtp.messagingengine.com', ttl: 3600, priority: 10 },
                { type: 'MX',   value: 'in2-smtp.messagingengine.com', ttl: 3600, priority: 20 },
                { type: 'TXT',  value: '"v=spf1 include:spf.messagingengine.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '66.111.4.131', ttl: 3600 }
            ],
            'smtp': [
                { type: 'A', value: '66.111.4.131', ttl: 3600 }
            ],
            'imap': [
                { type: 'A', value: '66.111.4.131', ttl: 3600 }
            ]
        }
    },

    /* ---- stripe.com ---- */
    'stripe.com.': {
        nameservers: [
            { name: 'ns-cloud-b1.googledomains.com', ip: '216.239.32.107' },
            { name: 'ns-cloud-b2.googledomains.com', ip: '216.239.34.107' },
            { name: 'ns-cloud-b3.googledomains.com', ip: '216.239.36.107' },
            { name: 'ns-cloud-b4.googledomains.com', ip: '216.239.38.107' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '54.187.216.72', ttl: 3600 },
                { type: 'NS',   value: 'ns-cloud-b1.googledomains.com', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.google.com include:_spf.stripe.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '54.187.216.72', ttl: 3600 }
            ],
            'api': [
                { type: 'A', value: '54.187.216.72', ttl: 60 }
            ],
            'dashboard': [
                { type: 'CNAME', value: 'stripe.com', ttl: 300 }
            ]
        }
    },

    /* ---- shopify.com ---- */
    'shopify.com.': {
        nameservers: [
            { name: 'ns1.dnsimple.com', ip: '162.159.25.4' },
            { name: 'ns2.dnsimple.com', ip: '162.159.27.4' },
            { name: 'ns3.dnsimple.com', ip: '162.159.26.4' },
            { name: 'ns4.dnsimple.com', ip: '162.159.24.4' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '23.227.38.65', ttl: 3600 },
                { type: 'NS',   value: 'ns1.dnsimple.com', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 include:shops.shopify.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '23.227.38.65', ttl: 3600 }
            ]
        }
    },

    /* ---- wikipedia.org ---- */
    'wikipedia.org.': {
        nameservers: [
            { name: 'ns0.wikimedia.org', ip: '208.80.154.238' },
            { name: 'ns1.wikimedia.org', ip: '208.80.153.231' },
            { name: 'ns2.wikimedia.org', ip: '91.198.174.239' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '208.80.154.224', ttl: 3600 },
                { type: 'AAAA', value: '2620:0:861:ed1a::1', ttl: 3600 },
                { type: 'NS',   value: 'ns0.wikimedia.org', ttl: 86400 },
                { type: 'MX',   value: 'mx1001.wikimedia.org', ttl: 3600, priority: 10 },
                { type: 'TXT',  value: '"v=spf1 include:wikimedia.org ~all"', ttl: 300 }
            ],
            'www': [
                { type: 'A',    value: '208.80.154.224', ttl: 3600 },
                { type: 'AAAA', value: '2620:0:861:ed1a::1', ttl: 3600 }
            ],
            'en': [
                { type: 'A', value: '208.80.154.224', ttl: 3600 }
            ]
        }
    },

    /* ---- mozilla.org ---- */
    'mozilla.org.': {
        nameservers: [
            { name: 'ns5.dnsmadeeasy.com', ip: '208.94.148.15' },
            { name: 'ns6.dnsmadeeasy.com', ip: '208.94.149.15' },
            { name: 'ns7.dnsmadeeasy.com', ip: '208.94.150.15' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '54.148.145.136', ttl: 3600 },
                { type: 'NS',   value: 'ns5.dnsmadeeasy.com', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.google.com include:_spf.mozilla.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'CNAME', value: 'mozilla.org.cdn.cloudflare.net', ttl: 300 }
            ]
        }
    },

    /* ---- example.net ---- */
    'example.net.': {
        nameservers: [
            { name: 'ns1.example.net', ip: '203.0.113.1' },
            { name: 'ns2.example.net', ip: '203.0.113.2' }
        ],
        records: {
            '@': [
                { type: 'A',   value: '203.0.113.10', ttl: 3600 },
                { type: 'NS',  value: 'ns1.example.net', ttl: 86400 },
                { type: 'MX',  value: 'mx.example.net', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A',   value: '203.0.113.10', ttl: 3600 }
            ],
            'mx': [
                { type: 'A',   value: '203.0.113.20', ttl: 3600 }
            ],
            'api': [
                { type: 'A',   value: '203.0.113.30', ttl: 300 }
            ]
        }
    },

    /* ---- example.org ---- */
    'example.org.': {
        nameservers: [
            { name: 'ns1.example.org', ip: '93.184.216.50' }
        ],
        records: {
            '@': [
                { type: 'A',   value: '93.184.216.34', ttl: 86400 },
                { type: 'NS',  value: 'ns1.example.org', ttl: 86400 },
                { type: 'MX',  value: 'mail.example.org', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A',   value: '93.184.216.34', ttl: 3600 }
            ],
            'mail': [
                { type: 'A',   value: '93.184.216.35', ttl: 3600 }
            ]
        }
    },

    /* ---- ietf.org ---- */
    'ietf.org.': {
        nameservers: [
            { name: 'ns0.amsl.com', ip: '4.31.198.40' },
            { name: 'ns1.amsl.com', ip: '4.31.198.42' }
        ],
        records: {
            '@': [
                { type: 'A',   value: '4.31.198.44', ttl: 1800 },
                { type: 'NS',  value: 'ns0.amsl.com', ttl: 86400 },
                { type: 'MX',  value: 'mail.ietf.org', ttl: 1800, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '4.31.198.44', ttl: 1800 }
            ],
            'datatracker': [
                { type: 'A', value: '4.31.198.46', ttl: 300 }
            ]
        }
    },

    /* ---- python.org ---- */
    'python.org.': {
        nameservers: [
            { name: 'ns1.p11.dynect.net', ip: '208.78.70.11' },
            { name: 'ns2.p11.dynect.net', ip: '204.13.250.11' },
            { name: 'ns3.p11.dynect.net', ip: '208.78.71.11' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '151.101.193.223', ttl: 3600 },
                { type: 'AAAA', value: '2a04:4e42:1::223', ttl: 3600 },
                { type: 'NS',   value: 'ns1.p11.dynect.net', ttl: 3600 },
                { type: 'MX',   value: 'mail.python.org', ttl: 3600, priority: 50 }
            ],
            'www': [
                { type: 'CNAME', value: 'python.org', ttl: 3600 }
            ],
            'docs': [
                { type: 'A', value: '151.101.193.223', ttl: 3600 }
            ],
            'pypi': [
                { type: 'CNAME', value: 'dualstack.pypi.org.cdn.cloudflare.net', ttl: 300 }
            ]
        }
    },

    /* ---- nodejs.org ---- */
    'nodejs.org.': {
        nameservers: [
            { name: 'ns1.cloudflare.com', ip: '108.162.192.1' },
            { name: 'ns2.cloudflare.com', ip: '108.162.193.1' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '104.20.22.46', ttl: 300 },
                { type: 'AAAA', value: '2606:4700:10::6814:162e', ttl: 300 },
                { type: 'NS',   value: 'ns1.cloudflare.com', ttl: 86400 }
            ],
            'www': [
                { type: 'A', value: '104.20.22.46', ttl: 300 }
            ]
        }
    },

    /* ---- npmjs.com ---- */
    'npmjs.com.': {
        nameservers: [
            { name: 'ns-1632.awsdns-12.co.uk', ip: '205.251.198.96' },
            { name: 'ns-412.awsdns-51.com', ip: '205.251.193.156' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '104.16.91.117', ttl: 300 },
                { type: 'AAAA', value: '2606:4700::6810:5b75', ttl: 300 },
                { type: 'NS',   value: 'ns-1632.awsdns-12.co.uk', ttl: 172800 }
            ],
            'www': [
                { type: 'CNAME', value: 'npmjs.com', ttl: 300 }
            ],
            'registry': [
                { type: 'A', value: '104.16.91.117', ttl: 60 }
            ]
        }
    },

    /* ---- stackoverflow.com ---- */
    'stackoverflow.com.': {
        nameservers: [
            { name: 'ns1.p25.dynect.net', ip: '208.78.70.25' },
            { name: 'ns2.p25.dynect.net', ip: '204.13.250.25' },
            { name: 'ns3.p25.dynect.net', ip: '208.78.71.25' },
            { name: 'ns4.p25.dynect.net', ip: '204.13.251.25' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '151.101.65.69', ttl: 3600 },
                { type: 'A',    value: '151.101.129.69', ttl: 3600 },
                { type: 'NS',   value: 'ns1.p25.dynect.net', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 }
            ],
            'www': [
                { type: 'A', value: '151.101.65.69', ttl: 300 }
            ],
            'api': [
                { type: 'CNAME', value: 'stackoverflow.com', ttl: 300 }
            ],
            'meta': [
                { type: 'A', value: '151.101.65.69', ttl: 3600 }
            ]
        }
    },

    /* ---- reddit.com ---- */
    'reddit.com.': {
        nameservers: [
            { name: 'ns-557.awsdns-05.net', ip: '205.251.194.45' },
            { name: 'ns-1029.awsdns-00.org', ip: '205.251.196.5' },
            { name: 'ns-104.awsdns-13.com', ip: '205.251.192.104' },
            { name: 'ns-1543.awsdns-00.co.uk', ip: '205.251.198.7' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '151.101.65.140', ttl: 60 },
                { type: 'AAAA', value: '2a04:4e42:200::396', ttl: 60 },
                { type: 'NS',   value: 'ns-557.awsdns-05.net', ttl: 172800 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 }
            ],
            'www': [
                { type: 'CNAME', value: 'reddit.com', ttl: 300 }
            ],
            'old': [
                { type: 'CNAME', value: 'reddit.com', ttl: 300 }
            ]
        }
    },

    /* ---- digitalocean.com ---- */
    'digitalocean.com.': {
        nameservers: [
            { name: 'ns1.digitalocean.com', ip: '173.245.58.51' },
            { name: 'ns2.digitalocean.com', ip: '173.245.59.41' },
            { name: 'ns3.digitalocean.com', ip: '198.41.142.47' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '104.16.181.15', ttl: 3600 },
                { type: 'AAAA', value: '2606:4700::6810:b50f', ttl: 3600 },
                { type: 'NS',   value: 'ns1.digitalocean.com', ttl: 1800 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.google.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '104.16.181.15', ttl: 3600 }
            ],
            'cloud': [
                { type: 'CNAME', value: 'digitalocean.com', ttl: 300 }
            ]
        }
    },

    /* ---- hashicorp.com ---- */
    'hashicorp.com.': {
        nameservers: [
            { name: 'ns-cloud-d1.googledomains.com', ip: '216.239.32.109' },
            { name: 'ns-cloud-d2.googledomains.com', ip: '216.239.34.109' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '76.76.21.21', ttl: 3600 },
                { type: 'NS',   value: 'ns-cloud-d1.googledomains.com', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 }
            ],
            'www': [
                { type: 'A', value: '76.76.21.21', ttl: 3600 }
            ],
            'registry': [
                { type: 'CNAME', value: 'hashicorp.com', ttl: 300 }
            ]
        }
    },

    /* ---- docker.com ---- */
    'docker.com.': {
        nameservers: [
            { name: 'ns-1899.awsdns-45.co.uk', ip: '205.251.199.107' },
            { name: 'ns-1276.awsdns-31.org', ip: '205.251.197.252' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '18.212.219.147', ttl: 300 },
                { type: 'NS',   value: 'ns-1899.awsdns-45.co.uk', ttl: 172800 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 },
                { type: 'TXT',  value: '"v=spf1 include:_spf.google.com ~all"', ttl: 3600 }
            ],
            'www': [
                { type: 'A', value: '18.212.219.147', ttl: 300 }
            ],
            'hub': [
                { type: 'CNAME', value: 'docker.com', ttl: 300 }
            ],
            'registry-1': [
                { type: 'A', value: '54.198.86.24', ttl: 60 }
            ]
        }
    },

    /* ---- gitlab.com ---- */
    'gitlab.com.': {
        nameservers: [
            { name: 'ns-705.awsdns-24.net', ip: '205.251.194.193' },
            { name: 'ns-74.awsdns-09.com', ip: '205.251.192.74' },
            { name: 'ns-1748.awsdns-26.co.uk', ip: '205.251.198.212' },
            { name: 'ns-1348.awsdns-40.org', ip: '205.251.197.68' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '172.65.251.78', ttl: 600 },
                { type: 'AAAA', value: '2606:4700:90:0:f22e:fbec:5bed:a9b9', ttl: 600 },
                { type: 'NS',   value: 'ns-705.awsdns-24.net', ttl: 172800 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 }
            ],
            'www': [
                { type: 'CNAME', value: 'gitlab.com', ttl: 300 }
            ],
            'registry': [
                { type: 'A', value: '172.65.251.78', ttl: 300 }
            ]
        }
    },

    /* ---- nginx.org ---- */
    'nginx.org.': {
        nameservers: [
            { name: 'ns1.nginx.org', ip: '213.180.204.3' },
            { name: 'ns2.nginx.org', ip: '88.198.131.252' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '95.211.80.227', ttl: 3600 },
                { type: 'NS',   value: 'ns1.nginx.org', ttl: 86400 }
            ],
            'www': [
                { type: 'A', value: '95.211.80.227', ttl: 3600 }
            ]
        }
    },

    /* ---- letsencrypt.org ---- */
    'letsencrypt.org.': {
        nameservers: [
            { name: 'dns1.p08.nsone.net', ip: '198.51.44.8' },
            { name: 'dns2.p08.nsone.net', ip: '198.51.45.8' },
            { name: 'dns3.p08.nsone.net', ip: '198.51.46.8' },
            { name: 'dns4.p08.nsone.net', ip: '198.51.47.8' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '52.0.84.167', ttl: 3600 },
                { type: 'NS',   value: 'dns1.p08.nsone.net', ttl: 3600 },
                { type: 'MX',   value: 'aspmx.l.google.com', ttl: 3600, priority: 1 }
            ],
            'www': [
                { type: 'A', value: '52.0.84.167', ttl: 3600 }
            ]
        }
    },

    /* ---- ubuntu.com ---- */
    'ubuntu.com.': {
        nameservers: [
            { name: 'ns1.canonical.com', ip: '91.189.94.1' },
            { name: 'ns2.canonical.com', ip: '91.189.95.1' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '185.125.190.20', ttl: 3600 },
                { type: 'AAAA', value: '2620:2d:4000:1::1a', ttl: 3600 },
                { type: 'NS',   value: 'ns1.canonical.com', ttl: 86400 },
                { type: 'MX',   value: 'mx.ubuntu.com', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '185.125.190.20', ttl: 3600 }
            ],
            'archive': [
                { type: 'A', value: '91.189.88.152', ttl: 300 }
            ]
        }
    },

    /* ---- debian.org ---- */
    'debian.org.': {
        nameservers: [
            { name: 'dns1.egressive.com', ip: '202.46.190.131' },
            { name: 'sec3.apnic.net', ip: '202.12.29.205' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '130.89.148.77', ttl: 300 },
                { type: 'AAAA', value: '2001:610:1908:b000::148:77', ttl: 300 },
                { type: 'NS',   value: 'dns1.egressive.com', ttl: 86400 },
                { type: 'MX',   value: 'smtp.foss.freebsd.org', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '130.89.148.77', ttl: 300 }
            ],
            'packages': [
                { type: 'CNAME', value: 'packages.qa.debian.org', ttl: 300 }
            ]
        }
    },

    /* ---- archlinux.org ---- */
    'archlinux.org.': {
        nameservers: [
            { name: 'ns2.zoneedit.com', ip: '69.64.68.41' },
            { name: 'ns15.zoneedit.com', ip: '68.186.109.22' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '95.217.163.246', ttl: 3600 },
                { type: 'NS',   value: 'ns2.zoneedit.com', ttl: 3600 },
                { type: 'MX',   value: 'mail.archlinux.org', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '95.217.163.246', ttl: 3600 }
            ],
            'aur': [
                { type: 'A', value: '95.217.163.246', ttl: 3600 }
            ]
        }
    },

    /* ---- harvard.edu ---- */
    'harvard.edu.': {
        nameservers: [
            { name: 'ns1.harvard.edu', ip: '128.103.60.10' },
            { name: 'ns2.harvard.edu', ip: '128.103.2.201' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '23.185.0.4', ttl: 3600 },
                { type: 'NS',   value: 'ns1.harvard.edu', ttl: 86400 },
                { type: 'MX',   value: 'mx.harvard.edu', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '23.185.0.4', ttl: 3600 }
            ],
            'hks': [
                { type: 'A', value: '23.185.0.4', ttl: 3600 }
            ]
        }
    },

    /* ---- mit.edu ---- */
    'mit.edu.': {
        nameservers: [
            { name: 'bitsy.mit.edu', ip: '18.72.0.3' },
            { name: 'strawberry.mit.edu', ip: '18.71.0.151' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '23.206.113.2', ttl: 1800 },
                { type: 'NS',   value: 'bitsy.mit.edu', ttl: 86400 },
                { type: 'MX',   value: 'smtp.mit.edu', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '23.206.113.2', ttl: 1800 }
            ],
            'web': [
                { type: 'CNAME', value: 'www.mit.edu', ttl: 300 }
            ]
        }
    },

    /* ---- whitehouse.gov ---- */
    'whitehouse.gov.': {
        nameservers: [
            { name: 'ns1.whitehouse.gov', ip: '38.101.55.30' },
            { name: 'ns2.whitehouse.gov', ip: '38.101.55.31' }
        ],
        records: {
            '@': [
                { type: 'A',    value: '38.101.55.7', ttl: 3600 },
                { type: 'NS',   value: 'ns1.whitehouse.gov', ttl: 86400 },
                { type: 'MX',   value: 'mx1.whitehouse.gov', ttl: 3600, priority: 10 }
            ],
            'www': [
                { type: 'A', value: '38.101.55.7', ttl: 3600 }
            ]
        }
    }
};

/* ================================================================
   CUSTOM ZONE MANAGER
   Stores user-defined zones in localStorage and merges them into
   the resolution engine at query time.
   ================================================================ */

const CUSTOM_ZONES_KEY = 'dns_tracer_custom_zones';

/**
 * Load all custom zones from localStorage.
 * @returns {Record<string, ZoneData>}
 */
function loadCustomZones() {
    try {
        const raw = localStorage.getItem(CUSTOM_ZONES_KEY);
        return raw ? JSON.parse(raw) : {};
    } catch {
        return {};
    }
}

/**
 * Persist custom zones to localStorage.
 * @param {Record<string, ZoneData>} zones
 */
function persistCustomZones(zones) {
    try {
        localStorage.setItem(CUSTOM_ZONES_KEY, JSON.stringify(zones));
    } catch (e) {
        console.warn('localStorage write failed:', e);
    }
}

/**
 * Look up a zone key in both the built-in DB and custom zones.
 * Custom zones take precedence (so users can override).
 * @param {string} zoneKey  e.g. "mycompany.com."
 * @returns {ZoneData | undefined}
 */
function lookupZone(zoneKey) {
    const custom = loadCustomZones();
    return custom[zoneKey] ?? DNS_DB[zoneKey];
}

/**
 * Return true if the given zone key exists (built-in or custom).
 * @param {string} zoneKey
 * @returns {boolean}
 */
function zoneExists(zoneKey) {
    return lookupZone(zoneKey) !== undefined;
}

/**
 * Return true if a zone key is built-in (not user-created).
 * @param {string} zoneKey
 * @returns {boolean}
 */
function isBuiltinZone(zoneKey) {
    return Object.prototype.hasOwnProperty.call(DNS_DB, zoneKey);
}

/**
 * Parse the freeform records textarea into an array of DnsRecord objects.
 * Format: label type value TTL [priority]
 * @param {string} text
 * @param {string} zoneName   e.g. "mycompany.com"
 * @returns {{ records: Record<string, DnsRecord[]>, error: string | null }}
 */
function parseZoneRecordsText(text, zoneName) {
    const VALID_TYPES = new Set(['A', 'AAAA', 'MX', 'NS', 'TXT', 'CNAME']);
    const records = {};
    const lines = text.split('\n').map(l => l.trim()).filter(l => l && !l.startsWith(';'));

    if (!lines.length) {
        return { records: null, error: 'Zone records cannot be empty. Add at least one A record.' };
    }

    for (const line of lines) {
        // Support quoted strings in TXT records — split carefully
        const tokenized = tokenizeLine(line);
        if (tokenized.length < 4) {
            return { records: null, error: `Invalid record line (need at least label type value TTL): "${line}"` };
        }

        const [label, typeRaw, value, ttlRaw, prioRaw] = tokenized;
        const type = typeRaw.toUpperCase();

        if (!VALID_TYPES.has(type)) {
            return { records: null, error: `Unknown record type "${typeRaw}". Supported: A, AAAA, MX, NS, TXT, CNAME.` };
        }

        const ttl = parseInt(ttlRaw, 10);
        if (isNaN(ttl) || ttl < 1 || ttl > 86400) {
            return { records: null, error: `TTL must be 1–86400 seconds (got "${ttlRaw}").` };
        }

        // Validate label
        const labelRegex = /^(@|[a-z0-9]([a-z0-9\-]{0,61}[a-z0-9])?)$/i;
        if (!labelRegex.test(label)) {
            return { records: null, error: `Invalid label "${label}". Use alphanumeric labels, hyphens allowed (not at start/end), or @ for apex.` };
        }

        /** @type {DnsRecord} */
        const rec = { type, value, ttl };
        if (type === 'MX') {
            const prio = prioRaw ? parseInt(prioRaw, 10) : 10;
            if (isNaN(prio)) {
                return { records: null, error: `MX priority must be a number (got "${prioRaw}").` };
            }
            rec.priority = prio;
        }

        const key = label.toLowerCase();
        if (!records[key]) records[key] = [];
        records[key].push(rec);
    }

    // Must have at least one A record somewhere
    const hasA = Object.values(records).some(arr => arr.some(r => r.type === 'A'));
    if (!hasA) {
        return { records: null, error: 'Zone must contain at least one A record so the domain resolves.' };
    }

    return { records, error: null };
}

/**
 * Tokenize a line, preserving quoted strings as single tokens.
 * @param {string} line
 * @returns {string[]}
 */
function tokenizeLine(line) {
    const tokens = [];
    let i = 0;
    while (i < line.length) {
        // Skip whitespace
        while (i < line.length && /\s/.test(line[i])) i++;
        if (i >= line.length) break;

        if (line[i] === '"') {
            // Quoted token — include the quotes
            let j = i + 1;
            while (j < line.length && line[j] !== '"') j++;
            tokens.push(line.slice(i, j + 1));
            i = j + 1;
        } else {
            let j = i;
            while (j < line.length && !/\s/.test(line[j])) j++;
            tokens.push(line.slice(i, j));
            i = j;
        }
    }
    return tokens;
}

/**
 * Save a new custom zone to localStorage.
 * Called from the UI form.
 */
function saveCustomZone() {
    const nameRaw = document.getElementById('zoneNameInput').value.trim().toLowerCase();
    const ns1Name = document.getElementById('zoneNs1').value.trim() || `ns1.${nameRaw}`;
    const ns1Ip   = document.getElementById('zoneNs1Ip').value.trim() || '203.0.113.1';
    const ns2Ip   = document.getElementById('zoneNs2Ip').value.trim();
    const recText = document.getElementById('zoneRecordsArea').value;
    const errEl   = document.getElementById('zoneErrorMsg');

    // Validate zone name
    const nameErr = validateDomain(nameRaw);
    if (nameErr) {
        showZoneError(nameErr);
        return;
    }

    const zoneKey = normalizeFqdn(nameRaw);

    // Parse records
    const { records, error } = parseZoneRecordsText(recText, nameRaw);
    if (error) {
        showZoneError(error);
        return;
    }

    // Build nameservers list
    const nameservers = [{ name: ns1Name, ip: ns1Ip }];
    if (ns2Ip) {
        nameservers.push({ name: `ns2.${nameRaw}`, ip: ns2Ip });
    }

    // Build zone data
    /** @type {ZoneData} */
    const zoneData = { nameservers, records, _custom: true };

    // Ensure TLD is registered
    const tld = extractTldFromFqdn(zoneKey);
    const customZones = loadCustomZones();

    if (tld && !DNS_DB[tld] && !customZones[tld]) {
        // Auto-register a placeholder TLD entry so resolution can proceed
        customZones[tld] = {
            nameservers: [{ name: `ns1.nic.${tld.replace('.', '')}`, ip: '192.0.2.53' }],
            _custom: true,
            _auto: true
        };
    }

    customZones[zoneKey] = zoneData;
    persistCustomZones(customZones);

    // Clear form
    document.getElementById('zoneNameInput').value = '';
    document.getElementById('zoneNs1').value = '';
    document.getElementById('zoneNs1Ip').value = '';
    document.getElementById('zoneNs2Ip').value = '';
    document.getElementById('zoneRecordsArea').value = '';
    hideZoneError();

    renderSavedZonesList();
    updateCustomZoneCount();
}

/**
 * Extract TLD from an FQDN like "mycompany.com." → "com."
 * @param {string} fqdn
 * @returns {string | null}
 */
function extractTldFromFqdn(fqdn) {
    const labels = fqdn.split('.').filter(l => l !== '');
    if (labels.length < 1) return null;
    return labels[labels.length - 1] + '.';
}

/**
 * Delete a custom zone by key.
 * @param {string} zoneKey
 */
function deleteCustomZone(zoneKey) {
    const zones = loadCustomZones();
    delete zones[zoneKey];
    // Remove orphan auto-registered TLD entries
    const tld = extractTldFromFqdn(zoneKey);
    if (tld && zones[tld]?._auto) {
        // Only remove auto-TLD if no other custom zones use it
        const otherZonesUseTld = Object.keys(zones).some(k => {
            if (k === tld) return false;
            const t = extractTldFromFqdn(k);
            return t === tld;
        });
        if (!otherZonesUseTld) delete zones[tld];
    }
    persistCustomZones(zones);
    renderSavedZonesList();
    updateCustomZoneCount();
}

/**
 * Clear all custom zones (after confirmation).
 */
function clearAllZones() {
    if (!confirm('Delete all custom zones? This cannot be undone.')) return;
    localStorage.removeItem(CUSTOM_ZONES_KEY);
    renderSavedZonesList();
    updateCustomZoneCount();
}

/**
 * Render the saved zones list UI.
 */
function renderSavedZonesList() {
    const wrap = document.getElementById('savedZonesWrap');
    const list = document.getElementById('savedZonesList');
    const info = document.getElementById('storageInfo');
    const zones = loadCustomZones();

    // Filter out auto-registered TLD placeholders from display
    const displayZones = Object.entries(zones).filter(([, v]) => !v._auto);

    if (!displayZones.length) {
        wrap.style.display = 'none';
        return;
    }

    wrap.style.display = '';
    list.innerHTML = displayZones.map(([key]) => {
        const displayName = key.endsWith('.') ? key.slice(0, -1) : key;
        return `
            <span class="saved-zone-item">
                <button class="saved-zone-use" onclick="quickUseZone('${escHtml(displayName)}')" title="Query this domain">
                    ${escHtml(displayName)}
                </button>
                <button class="saved-zone-del" onclick="deleteCustomZone('${escHtml(key)}')" title="Delete zone">&times;</button>
            </span>
        `;
    }).join('');

    // Rough storage usage
    const approxBytes = (localStorage.getItem(CUSTOM_ZONES_KEY) || '').length;
    info.textContent = `${displayZones.length} zone${displayZones.length !== 1 ? 's' : ''} — ~${Math.ceil(approxBytes / 1024)}KB stored`;
}

/**
 * Pre-fill the domain input with a saved zone name and kick off a trace.
 * @param {string} domain
 */
function quickUseZone(domain) {
    setDomain(domain);
    // Close the zone builder panel
    const panel = document.getElementById('zoneBuilderPanel');
    if (panel.classList.contains('open')) toggleZoneBuilder();
    startTrace();
}

/**
 * Open the zone builder with the zone name pre-filled.
 * @param {string} domain
 */
function prefillZoneBuilder(domain) {
    document.getElementById('zoneNameInput').value = domain;
    document.getElementById('zoneNs1').value = `ns1.${domain}`;
    document.getElementById('zoneNs1Ip').value = '203.0.113.1';
    document.getElementById('zoneNs2Ip').value = '203.0.113.2';
    document.getElementById('zoneRecordsArea').value =
        `@ A 203.0.113.10 3600\nwww A 203.0.113.10 300\nmail A 203.0.113.20 3600\n@ MX mail.${domain} 3600 10\n@ TXT "v=spf1 ip4:203.0.113.0/24 ~all" 3600`;

    const panel = document.getElementById('zoneBuilderPanel');
    if (!panel.classList.contains('open')) toggleZoneBuilder();

    // Scroll into view
    document.getElementById('zoneBuilderToggle').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function showZoneError(msg) {
    const el = document.getElementById('zoneErrorMsg');
    el.textContent = msg;
    el.classList.add('show');
}

function hideZoneError() {
    document.getElementById('zoneErrorMsg').classList.remove('show');
}

function toggleZoneBuilder() {
    const panel = document.getElementById('zoneBuilderPanel');
    const btn   = document.getElementById('zoneBuilderToggle');
    const isOpen = panel.classList.toggle('open');
    btn.setAttribute('aria-expanded', String(isOpen));
    if (isOpen) renderSavedZonesList();
}

function updateCustomZoneCount() {
    const zones = loadCustomZones();
    const count = Object.values(zones).filter(v => !v._auto).length;
    const el = document.getElementById('customZoneCount');
    if (el) el.textContent = count > 0 ? `${count} custom zone${count !== 1 ? 's' : ''}` : '';
}

/* ================================================================
   CACHE — simulates resolver cache between trace calls
   ================================================================ */

/** @type {Map<string, { records: DnsRecord[], expiry: number, cachedAt: number }>} */
const resolverCache = new Map();

/**
 * Build the cache key used to store/retrieve resolved records.
 * @param {string} fqdn
 * @param {string} type
 * @returns {string}
 */
function cacheKey(fqdn, type) {
    return `${normalizeFqdn(fqdn)}|${type}`;
}

/**
 * Check if a cached entry is still valid.
 * @param {string} fqdn
 * @param {string} type
 * @returns {{ records: DnsRecord[], remainingTtl: number } | null}
 */
function checkCache(fqdn, type) {
    const key = cacheKey(fqdn, type);
    const entry = resolverCache.get(key);
    if (!entry) return null;
    const now = Date.now();
    if (now >= entry.expiry) {
        resolverCache.delete(key);
        return null;
    }
    const remainingTtl = Math.round((entry.expiry - now) / 1000);
    return { records: entry.records, remainingTtl };
}

/**
 * Store resolved records in cache.
 * @param {string} fqdn
 * @param {string} type
 * @param {DnsRecord[]} records
 */
function storeCache(fqdn, type, records) {
    if (!records.length) return;
    const minTtl = Math.min(...records.map(r => r.ttl));
    const key = cacheKey(fqdn, type);
    resolverCache.set(key, {
        records,
        expiry: Date.now() + minTtl * 1000,
        cachedAt: Date.now()
    });
}

/* ================================================================
   DOMAIN PARSING UTILITIES
   ================================================================ */

/**
 * Ensure a domain name ends with a dot (FQDN notation).
 * @param {string} name
 * @returns {string}
 */
function normalizeFqdn(name) {
    name = name.trim().toLowerCase();
    if (!name.endsWith('.')) name += '.';
    return name;
}

/**
 * Parse a fully-qualified domain into its component labels.
 * "www.example.com." → ["www", "example", "com", ""]
 * @param {string} fqdn
 * @returns {string[]}
 */
function parseLabels(fqdn) {
    return fqdn.split('.');
}

/**
 * Extract the second-level domain zone key from a FQDN.
 * "www.example.com." → "example.com."
 * @param {string} fqdn
 * @returns {string | null}
 */
function extractZone(fqdn) {
    const labels = parseLabels(fqdn).filter(l => l !== '');
    if (labels.length < 2) return null;
    return labels.slice(-2).join('.') + '.';
}

/**
 * Extract the TLD zone from a FQDN.
 * "www.example.com." → "com."
 * @param {string} fqdn
 * @returns {string | null}
 */
function extractTld(fqdn) {
    const labels = parseLabels(fqdn).filter(l => l !== '');
    if (labels.length < 1) return null;
    return labels[labels.length - 1] + '.';
}

/**
 * Extract the subdomain label relative to the zone apex.
 * "www.example.com.", "example.com." → "www"
 * "example.com.", "example.com." → "@"
 * @param {string} fqdn
 * @param {string} zone
 * @returns {string}
 */
function relativeLabel(fqdn, zone) {
    const fqdnClean = fqdn.endsWith('.') ? fqdn.slice(0, -1) : fqdn;
    const zoneClean = zone.endsWith('.') ? zone.slice(0, -1) : zone;
    if (fqdnClean === zoneClean) return '@';
    if (fqdnClean.endsWith('.' + zoneClean)) {
        return fqdnClean.slice(0, -(zoneClean.length + 1));
    }
    return '@';
}

/**
 * Validate a domain name string. Returns an error message or null.
 * @param {string} input
 * @returns {string | null}
 */
function validateDomain(input) {
    const trimmed = input.trim().toLowerCase();
    if (!trimmed) return 'Domain name is required.';
    // Strip trailing dot for validation
    const withoutDot = trimmed.endsWith('.') ? trimmed.slice(0, -1) : trimmed;
    if (withoutDot.length > 253) return 'Domain name exceeds 253 characters.';
    const labelRegex = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/;
    const labels = withoutDot.split('.');
    for (const label of labels) {
        if (!labelRegex.test(label)) {
            return `Invalid label "${label}" in domain. Labels must be alphanumeric (hyphens allowed, not at start/end).`;
        }
    }
    return null;
}

/* ================================================================
   RTT SIMULATION
   Returns realistic simulated round-trip time in ms.
   ================================================================ */

/**
 * Simulate a realistic RTT for a given server tier.
 * @param {'root' | 'tld' | 'auth' | 'cached'} tier
 * @returns {number} milliseconds
 */
function simulateRtt(tier) {
    const ranges = {
        root:   { min: 20, max: 55 },
        tld:    { min: 10, max: 42 },
        auth:   { min: 5,  max: 32 },
        cached: { min: 0,  max: 1  }
    };
    const { min, max } = ranges[tier] || ranges.auth;
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

/* ================================================================
   RESOLUTION ENGINE

   Performs a simulated iterative resolution:
     stub → [cache check] → root → TLD → authoritative

   Returns a resolutionPath array describing each step.
   ================================================================ */

/**
 * @typedef {{
 *   step: number,
 *   server: string,
 *   serverIp: string,
 *   tier: 'resolver' | 'root' | 'tld' | 'auth' | 'cache',
 *   queryName: string,
 *   queryType: string,
 *   responseType: 'referral' | 'answer' | 'nxdomain' | 'cache_hit' | 'cname',
 *   responseData: string,
 *   rtt: number,
 *   cacheHit: boolean,
 *   records?: DnsRecord[],
 *   msgDetail?: string
 * }} ResolutionStep
 */

/**
 * Resolve a domain name and record type.
 * @param {string} domain     Raw domain input
 * @param {string} qtype      Record type (A, AAAA, MX, NS, TXT)
 * @param {string} resolverIp IP of the recursive resolver
 * @returns {{ path: ResolutionStep[], finalRecords: DnsRecord[], nxdomain: boolean, cacheHit: boolean }}
 */
function resolveDomain(domain, qtype, resolverIp) {
    const fqdn = normalizeFqdn(domain);
    /** @type {ResolutionStep[]} */
    const path = [];
    let stepNum = 0;

    // ---- Step 0: Check resolver cache ----
    const cached = checkCache(fqdn, qtype);
    if (cached) {
        path.push({
            step: ++stepNum,
            server: `Recursive Resolver (${resolverIp})`,
            serverIp: resolverIp,
            tier: 'cache',
            queryName: fqdn,
            queryType: qtype,
            responseType: 'cache_hit',
            responseData: `Cache HIT — ${cached.remainingTtl}s remaining TTL`,
            rtt: simulateRtt('cached'),
            cacheHit: true,
            records: cached.records,
            msgDetail: buildMsgDetail(fqdn, qtype, cached.records, true)
        });
        return { path, finalRecords: cached.records, nxdomain: false, cacheHit: true };
    }

    const tld = extractTld(fqdn);
    const zone = extractZone(fqdn);

    if (!tld || !zone) {
        return { path: [], finalRecords: [], nxdomain: true, cacheHit: false };
    }

    // ---- Step 1: Resolver queries root ----
    const rootNs = pickOne(DNS_DB['.'].nameservers);
    const tldZoneData = lookupZone(tld);
    path.push({
        step: ++stepNum,
        server: `Root Nameserver (${rootNs.name})`,
        serverIp: rootNs.ip,
        tier: 'root',
        queryName: fqdn,
        queryType: qtype,
        responseType: 'referral',
        responseData: `Referral → ${tld} TLD nameservers`,
        rtt: simulateRtt('root'),
        cacheHit: false,
        msgDetail: buildReferralDetail(fqdn, qtype, tld, tldZoneData ? tldZoneData.nameservers : [])
    });

    // ---- Step 2: Resolver queries TLD ----
    if (!tldZoneData) {
        // Unknown TLD — not in built-in DB or custom zones
        path.push({
            step: ++stepNum,
            server: `TLD Nameserver (${tld})`,
            serverIp: '0.0.0.0',
            tier: 'tld',
            queryName: fqdn,
            queryType: qtype,
            responseType: 'nxdomain',
            responseData: `SERVFAIL — TLD "${tld}" not in simulation database`,
            rtt: simulateRtt('tld'),
            cacheHit: false,
            msgDetail: `; No data for TLD ${tld}\n; Use "Create Custom Zone" to add this domain.`
        });
        return { path, finalRecords: [], nxdomain: true, cacheHit: false, unknownZone: zone };
    }

    const tldNs = pickOne(tldZoneData.nameservers);
    const zoneData = lookupZone(zone);
    const tldReferralData = zoneData
        ? `Referral → ${zone} authoritative NS (${zoneData.nameservers[0].name})`
        : `NXDOMAIN — no delegation for "${zone}" in simulation database`;

    path.push({
        step: ++stepNum,
        server: `TLD Nameserver (${tldNs.name})`,
        serverIp: tldNs.ip,
        tier: 'tld',
        queryName: fqdn,
        queryType: qtype,
        responseType: zoneData ? 'referral' : 'nxdomain',
        responseData: tldReferralData,
        rtt: simulateRtt('tld'),
        cacheHit: false,
        msgDetail: zoneData
            ? buildReferralDetail(fqdn, qtype, zone, zoneData.nameservers)
            : `; AUTHORITY SECTION:\n; ${zone} NXDOMAIN (not in simulation database)`
    });

    if (!zoneData) {
        return { path, finalRecords: [], nxdomain: true, cacheHit: false, unknownZone: zone };
    }

    // ---- Step 3: Resolver queries authoritative ----
    const authNs = pickOne(zoneData.nameservers);
    const label = relativeLabel(fqdn.slice(0, -1), zone.slice(0, -1));
    const zoneRecords = zoneData.records || {};
    const rawRecords = zoneRecords[label] || zoneRecords['@'] || [];

    // Filter to requested type (or all if NS/SOA)
    let matchedRecords = rawRecords.filter(r => r.type === qtype);

    // Handle CNAME chain (one level only)
    if (!matchedRecords.length) {
        const cnames = rawRecords.filter(r => r.type === 'CNAME');
        if (cnames.length && qtype !== 'CNAME') {
            const cnameTarget = normalizeFqdn(cnames[0].value);
            path.push({
                step: ++stepNum,
                server: `Authoritative NS (${authNs.name})`,
                serverIp: authNs.ip,
                tier: 'auth',
                queryName: fqdn,
                queryType: qtype,
                responseType: 'cname',
                responseData: `CNAME → ${cnameTarget}`,
                rtt: simulateRtt('auth'),
                cacheHit: false,
                records: cnames,
                msgDetail: buildMsgDetail(fqdn, 'CNAME', cnames, false)
            });
            // Recursively resolve the CNAME target
            const cnameResult = resolveDomain(cnameTarget, qtype, resolverIp);
            const cnameStepOffset = stepNum;
            cnameResult.path.forEach(s => {
                path.push({ ...s, step: cnameStepOffset + s.step });
            });
            return {
                path,
                finalRecords: cnameResult.finalRecords,
                nxdomain: cnameResult.nxdomain,
                cacheHit: cnameResult.cacheHit
            };
        }
    }

    const isNxdomain = matchedRecords.length === 0;

    path.push({
        step: ++stepNum,
        server: `Authoritative NS (${authNs.name})`,
        serverIp: authNs.ip,
        tier: 'auth',
        queryName: fqdn,
        queryType: qtype,
        responseType: isNxdomain ? 'nxdomain' : 'answer',
        responseData: isNxdomain
            ? `NXDOMAIN / NODATA — no ${qtype} records for "${fqdn}"`
            : formatRecordSummary(matchedRecords),
        rtt: simulateRtt('auth'),
        cacheHit: false,
        records: matchedRecords,
        msgDetail: buildMsgDetail(fqdn, qtype, matchedRecords, false)
    });

    if (!isNxdomain) {
        storeCache(fqdn, qtype, matchedRecords);
    }

    return { path, finalRecords: matchedRecords, nxdomain: isNxdomain, cacheHit: false };
}

/* ================================================================
   MESSAGE DETAIL BUILDERS
   ================================================================ */

/**
 * Format a concise answer summary for the step log.
 * @param {DnsRecord[]} records
 * @returns {string}
 */
function formatRecordSummary(records) {
    return records.map(r => {
        if (r.type === 'MX') return `MX ${r.priority} ${r.value} (TTL ${r.ttl}s)`;
        return `${r.type} ${r.value} (TTL ${r.ttl}s)`;
    }).join(' | ');
}

/**
 * Build a dig-style DNS message string for the inspector.
 * @param {string} qname
 * @param {string} qtype
 * @param {DnsRecord[]} answers
 * @param {boolean} fromCache
 * @returns {string}
 */
function buildMsgDetail(qname, qtype, answers, fromCache) {
    const id = Math.floor(Math.random() * 65535).toString(16).toUpperCase().padStart(4, '0');
    const flags = fromCache ? 'qr rd ra' : 'qr aa rd ra';
    const anCount = answers.length;
    let out = `;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 0x${id}\n`;
    out += `;; flags: ${flags}; QUERY: 1, ANSWER: ${anCount}, AUTHORITY: 0, ADDITIONAL: 0\n\n`;
    out += `;; QUESTION SECTION:\n;${qname}\t\t\tIN\t${qtype}\n\n`;
    if (anCount > 0) {
        out += `;; ANSWER SECTION:\n`;
        answers.forEach(r => {
            const prio = r.type === 'MX' ? `${r.priority} ` : '';
            out += `${qname}\t${r.ttl}\tIN\t${r.type}\t${prio}${r.value}\n`;
        });
    }
    return out;
}

/**
 * Build a dig-style referral message.
 * @param {string} qname
 * @param {string} qtype
 * @param {string} zone
 * @param {Nameserver[]} nslist
 * @returns {string}
 */
function buildReferralDetail(qname, qtype, zone, nslist) {
    const id = Math.floor(Math.random() * 65535).toString(16).toUpperCase().padStart(4, '0');
    let out = `;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 0x${id}\n`;
    out += `;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: ${nslist.length}, ADDITIONAL: ${nslist.length}\n\n`;
    out += `;; QUESTION SECTION:\n;${qname}\t\t\tIN\t${qtype}\n\n`;
    out += `;; AUTHORITY SECTION:\n`;
    nslist.forEach(ns => {
        out += `${zone}\t172800\tIN\tNS\t${ns.name}.\n`;
    });
    out += `\n;; ADDITIONAL SECTION:\n`;
    nslist.forEach(ns => {
        out += `${ns.name}.\t172800\tIN\tA\t${ns.ip}\n`;
    });
    return out;
}

/* ================================================================
   UTILITY
   ================================================================ */

/**
 * Pick a random element from an array.
 * @template T
 * @param {T[]} arr
 * @returns {T}
 */
function pickOne(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

/* ================================================================
   STATE
   ================================================================ */
/** @type {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string } | null} */
let lastResult = null;
let ttlTimerId = null;

/* ================================================================
   UI HELPERS
   ================================================================ */

function showError(msg) {
    const box = document.getElementById('errorBox');
    box.textContent = msg;
    box.classList.add('show');
}

function hideError() {
    document.getElementById('errorBox').classList.remove('show');
}

/**
 * Show a helpful callout when a queried domain is not in the database.
 * @param {string} zone  e.g. "mycompany.com."
 */
function showUnknownDomainBox(zone) {
    const zoneDisplay = zone.endsWith('.') ? zone.slice(0, -1) : zone;
    const box = document.getElementById('unknownDomainBox');

    // Build a list of example domains from the same TLD if available
    const tld = extractTld(normalizeFqdn(zoneDisplay));
    const examples = Object.keys(DNS_DB)
        .filter(k => k !== '.' && !k.endsWith('gtld') && k.endsWith(tld || 'com.') && k !== (tld || 'com.'))
        .slice(0, 4)
        .map(k => {
            const d = k.endsWith('.') ? k.slice(0, -1) : k;
            return `<li><button style="background:none;border:none;color:#1565c0;cursor:pointer;text-decoration:underline;font-size:13px;padding:0;" onclick="setDomain('${escHtml(d)}');document.getElementById('unknownDomainBox').classList.remove('show');">${escHtml(d)}</button></li>`;
        }).join('');

    box.innerHTML = `
        <strong>Domain "${escHtml(zoneDisplay)}" is not in the example database.</strong>
        <p style="margin:6px 0 4px 0;">This is a simulation — it only knows about the built-in zones. To trace this domain you can:</p>
        <ul>
            <li><strong>Create a custom zone</strong> for "${escHtml(zoneDisplay)}" and define its records below</li>
            ${examples ? `<li>Try one of these built-in examples from the same TLD: <ul style="margin:4px 0 0 0;">${examples}</ul></li>` : ''}
            <li>Enter a domain from the quick-examples list above</li>
        </ul>
        <button class="create-zone-quick" onclick="prefillZoneBuilder('${escHtml(zoneDisplay)}');document.getElementById('unknownDomainBox').classList.remove('show');">
            Create Zone for "${escHtml(zoneDisplay)}"
        </button>
    `;
    box.classList.add('show');
}

function hideUnknownDomainBox() {
    document.getElementById('unknownDomainBox').classList.remove('show');
}

function getResolverIp() {
    const sel = document.getElementById('resolverSelect').value;
    if (sel === 'custom') {
        const custom = document.getElementById('customResolver').value.trim();
        return custom || '192.168.1.1';
    }
    return sel;
}

/**
 * Validate the current form inputs. Returns error string or null.
 * @returns {string | null}
 */
function validateForm() {
    const domain = document.getElementById('dnsInput').value;
    const domainErr = validateDomain(domain);
    if (domainErr) return domainErr;
    const sel = document.getElementById('resolverSelect').value;
    if (sel === 'custom') {
        const custom = document.getElementById('customResolver').value.trim();
        if (custom && !/^(\d{1,3}\.){3}\d{1,3}$/.test(custom)) {
            return 'Custom resolver must be a valid IPv4 address.';
        }
    }
    return null;
}

function setDomain(domain) {
    document.getElementById('dnsInput').value = domain;
    document.getElementById('dnsInput').focus();
}

/* ================================================================
   MAIN TRACE ENTRY POINT
   ================================================================ */

/**
 * Start a fresh trace. Clears cache for a cold-start experience.
 */
function startTrace() {
    hideError();
    const err = validateForm();
    if (err) { showError(err); return; }

    const domain   = document.getElementById('dnsInput').value.trim();
    const qtype    = document.getElementById('recordType').value;
    const resolver = getResolverIp();

    // Do NOT clear cache here — let the user see the cache effect naturally
    // (cache is only seeded by previous traces of the same fqdn+type)
    runTrace(domain, qtype, resolver);
}

/**
 * Repeat the last trace (demonstrates cache hit).
 */
function repeatTrace() {
    if (!lastResult) return;
    hideError();
    const { domain, qtype, resolverIp } = lastResult;
    runTrace(domain, qtype, resolverIp);
}

/**
 * Run the trace, animate, and display results.
 * @param {string} domain
 * @param {string} qtype
 * @param {string} resolverIp
 */
function runTrace(domain, qtype, resolverIp) {
    // Disable buttons during animation
    document.getElementById('traceBtn').disabled = true;
    document.getElementById('repeatBtn').disabled = true;

    // Hide old results
    hideAllResultSections();
    hideUnknownDomainBox();
    stopTtlTimer();

    // Show progress
    const progress = document.getElementById('animProgress');
    progress.classList.add('show');
    setProgressText('Querying root nameservers...');

    // Run resolution (synchronous calculation)
    const result = resolveDomain(domain, qtype, resolverIp);
    lastResult = { path: result.path, domain, qtype, resolverIp };

    // Animate each step with staggered delays
    const STEP_DELAY = 600; // ms per step
    const totalSteps = result.path.length;

    result.path.forEach((step, idx) => {
        setTimeout(() => {
            if (idx === 0) {
                // Show SVG section on first step
                showSection('visSection');
                showSection('stepsSection');
                renderSvg(result.path, idx + 1);
            } else {
                renderSvg(result.path, idx + 1);
            }
            appendStepRow(step, idx + 1 === totalSteps);

            // Update progress text
            if (step.tier === 'root')  setProgressText('Querying TLD nameservers...');
            if (step.tier === 'tld')   setProgressText('Querying authoritative nameserver...');
            if (step.tier === 'auth')  setProgressText('Received authoritative answer.');
            if (step.tier === 'cache') setProgressText('Served from resolver cache.');

            // On last step
            if (idx + 1 === totalSteps) {
                setTimeout(() => {
                    progress.classList.remove('show');
                    showFinalAnswer(result, domain, qtype, resolverIp);
                    showMsgInspector(result.path);
                    if (!result.nxdomain && result.finalRecords.length) {
                        startTtlTimer(result.finalRecords);
                        showSection('ttlSection');
                    }
                    updateCacheBadge(result.cacheHit);
                    // Show helpful unknown-domain callout if applicable
                    if (result.unknownZone) {
                        showUnknownDomainBox(result.unknownZone);
                    }
                    document.getElementById('traceBtn').disabled = false;
                    document.getElementById('repeatBtn').disabled = false;
                }, 300);
            }
        }, idx * STEP_DELAY);
    });

    // Edge case: no steps at all (empty path)
    if (totalSteps === 0) {
        progress.classList.remove('show');
        // Check if it's purely an unknown zone situation
        if (result.unknownZone) {
            showUnknownDomainBox(result.unknownZone);
        } else {
            showError('Could not resolve the domain. Check the domain name and try again.');
        }
        document.getElementById('traceBtn').disabled = false;
        document.getElementById('repeatBtn').disabled = false;
    }
}

function hideAllResultSections() {
    ['visSection', 'stepsSection', 'answerSection', 'ttlSection', 'msgSection']
        .forEach(id => document.getElementById(id).classList.remove('show'));
    document.getElementById('stepsBody').innerHTML = '';
}

function showSection(id) {
    document.getElementById(id).classList.add('show');
}

function setProgressText(msg) {
    document.getElementById('animProgressText').textContent = msg;
}

function updateCacheBadge(isHit) {
    const badge = document.getElementById('cacheStatusBadge');
    badge.textContent = isHit ? 'CACHE HIT' : 'CACHE MISS';
    badge.className = 'cache-badge ' + (isHit ? 'hit' : 'miss');
}

/* ================================================================
   STEP TABLE RENDERING
   ================================================================ */

/**
 * Append a row to the steps table.
 * @param {ResolutionStep} step
 * @param {boolean} isLast
 */
function appendStepRow(step, isLast) {
    const tbody = document.getElementById('stepsBody');
    const tr = document.createElement('tr');

    const typeLabel = {
        referral:   '<span class="arrow-ref">REFERRAL</span>',
        answer:     '<span class="arrow-resp">ANSWER</span>',
        nxdomain:   '<span class="arrow-err">NXDOMAIN</span>',
        cache_hit:  '<span class="arrow-cached">CACHE HIT</span>',
        cname:      '<span class="arrow-query">CNAME</span>'
    }[step.responseType] || step.responseType;

    const msgId = `msg_${step.step}`;

    tr.innerHTML = `
        <td><span class="step-num">${step.step}</span></td>
        <td>
            <strong>${escHtml(step.server)}</strong><br>
            <small style="font-family:'Courier New',monospace;color:#888;">${escHtml(step.serverIp)}</small>
        </td>
        <td style="font-family:'Courier New',monospace;">${step.rtt}ms</td>
        <td>
            <div>
                <span class="arrow-query">Q: ${escHtml(step.queryName)} ${escHtml(step.queryType)}</span>
            </div>
            <div style="margin-top:4px;">${step.responseData ? escHtml(step.responseData) : ''}</div>
            ${step.msgDetail ? `
            <div style="margin-top:6px;">
                <button class="msg-toggle" onclick="toggleMsg('${msgId}')">DNS Message</button>
                <pre id="${msgId}" class="msg-panel">${escHtml(step.msgDetail)}</pre>
            </div>` : ''}
        </td>
        <td>${typeLabel}</td>
    `;

    tr.style.opacity = '0';
    tbody.appendChild(tr);

    // Fade in
    requestAnimationFrame(() => {
        tr.style.transition = 'opacity 0.4s ease';
        tr.style.opacity = '1';
    });
}

function toggleMsg(id) {
    const el = document.getElementById(id);
    el.classList.toggle('visible');
}

/* ================================================================
   FINAL ANSWER PANEL
   ================================================================ */

function showFinalAnswer(result, domain, qtype, resolverIp) {
    const section = document.getElementById('answerSection');
    const content = document.getElementById('answerContent');

    if (result.nxdomain) {
        content.innerHTML = `
            <div class="data-row" style="border-left-color:#e91e63;">
                <div class="data-label">Status:</div>
                <div class="data-value" style="color:#c62828;">NXDOMAIN / No ${qtype} records found</div>
            </div>
            <div class="data-row" style="border-left-color:#e91e63;">
                <div class="data-label">Domain:</div>
                <div class="data-value">${escHtml(normalizeFqdn(domain))}</div>
            </div>
            <div class="data-row" style="border-left-color:#e91e63;">
                <div class="data-label">Resolution:</div>
                <div class="data-value">${result.path.length} hop(s) — no answer returned</div>
            </div>
        `;
    } else if (result.cacheHit) {
        content.innerHTML = `
            <div class="data-row">
                <div class="data-label">Status:</div>
                <div class="data-value highlight">CACHE HIT</div>
            </div>
            <div class="data-row">
                <div class="data-label">Domain:</div>
                <div class="data-value">${escHtml(normalizeFqdn(domain))}</div>
            </div>
            ${buildRecordRows(result.finalRecords)}
            <div class="data-row">
                <div class="data-label">Resolver:</div>
                <div class="data-value">${escHtml(resolverIp)} (served from cache — 0 external queries)</div>
            </div>
        `;
    } else {
        const totalRtt = result.path.reduce((s, p) => s + p.rtt, 0);
        content.innerHTML = `
            <div class="data-row">
                <div class="data-label">Status:</div>
                <div class="data-value highlight">NOERROR</div>
            </div>
            <div class="data-row">
                <div class="data-label">Domain:</div>
                <div class="data-value">${escHtml(normalizeFqdn(domain))}</div>
            </div>
            ${buildRecordRows(result.finalRecords)}
            <div class="data-row">
                <div class="data-label">Total Hops:</div>
                <div class="data-value">${result.path.length}</div>
            </div>
            <div class="data-row">
                <div class="data-label">Total RTT (simulated):</div>
                <div class="data-value">${totalRtt}ms</div>
            </div>
        `;
    }

    showSection('answerSection');
}

/**
 * Build data-row HTML for each final record.
 * @param {DnsRecord[]} records
 * @returns {string}
 */
function buildRecordRows(records) {
    if (!records.length) return '';
    return records.map((r, i) => `
        <div class="data-row">
            <div class="data-label">${i === 0 ? 'Records:' : ''}</div>
            <div class="data-value">
                <strong>${escHtml(r.type)}</strong>&nbsp;
                ${r.type === 'MX' ? `<span style="color:#7B1FA2">prio ${r.priority}</span> ` : ''}
                ${escHtml(r.value)}
                <span style="color:#888;font-size:13px;margin-left:8px;">TTL ${r.ttl}s</span>
            </div>
        </div>
    `).join('');
}

/* ================================================================
   DNS MESSAGE INSPECTOR
   ================================================================ */

function showMsgInspector(path) {
    const content = document.getElementById('msgContent');
    content.innerHTML = `
        <p style="font-size:14px;color:#555;margin-top:0;">
            Click <strong>DNS Message</strong> buttons in the step log above to inspect
            individual wire-format messages. The final authoritative response is shown below.
        </p>
    `;
    const last = path[path.length - 1];
    if (last && last.msgDetail) {
        content.innerHTML += `
            <pre class="msg-panel visible">${escHtml(last.msgDetail)}</pre>
        `;
    }
    showSection('msgSection');
}

/* ================================================================
   TTL TIMER
   ================================================================ */

function startTtlTimer(records) {
    const minTtl = Math.min(...records.map(r => r.ttl));
    let remaining = minTtl;
    const content = document.getElementById('ttlContent');

    function renderTtl() {
        const pct = Math.max(0, (remaining / minTtl) * 100);
        content.innerHTML = `
            <p style="font-size:14px;color:#555;margin-top:0;">
                Records will expire from resolver cache after TTL reaches zero.
                A repeat query while cached returns an instant response.
            </p>
            <div style="margin-bottom:12px;">
                <div class="data-label" style="min-width:auto;margin-bottom:6px;">
                    TTL Remaining: <strong style="color:#7B1FA2;">${remaining}s</strong>
                    of ${minTtl}s
                </div>
                <div class="ttl-bar-wrap">
                    <div class="ttl-bar-fill" style="width:${pct}%;"></div>
                </div>
                <div class="ttl-label">${formatTtlTime(remaining)} remaining</div>
            </div>
            <div class="data-row" style="font-size:13px;">
                <div class="data-label">Cached records:</div>
                <div class="data-value">${records.map(r => `${r.type} ${r.value}`).join(', ')}</div>
            </div>
        `;
    }

    renderTtl();

    // Advance TTL visually at 1s intervals (capped at 60 steps for UX)
    const tickMs = 1000;
    const decrement = Math.max(1, Math.floor(minTtl / 60));

    ttlTimerId = setInterval(() => {
        remaining = Math.max(0, remaining - decrement);
        renderTtl();
        if (remaining <= 0) {
            stopTtlTimer();
            // Evict from cache
            resolverCache.forEach((_, k) => {
                if (Date.now() >= resolverCache.get(k).expiry) resolverCache.delete(k);
            });
        }
    }, tickMs);
}

function stopTtlTimer() {
    if (ttlTimerId !== null) {
        clearInterval(ttlTimerId);
        ttlTimerId = null;
    }
}

/**
 * Format seconds as human-readable time.
 * @param {number} s
 * @returns {string}
 */
function formatTtlTime(s) {
    if (s < 60)   return `${s}s`;
    if (s < 3600) return `${Math.floor(s/60)}m ${s%60}s`;
    return `${Math.floor(s/3600)}h ${Math.floor((s%3600)/60)}m`;
}

/* ================================================================
   SVG VISUALIZER
   ================================================================ */

/**
 * Render the SVG topology and animated arrows up to the given step.
 * @param {ResolutionStep[]} path   Full path
 * @param {number} upToStep         Render steps 1..upToStep
 */
function renderSvg(path, upToStep) {
    const svg = document.getElementById('queryVisSvg');

    /* Node definitions — fixed positions on an 860×320 canvas */
    const NODES = buildNodeDefs(path);
    const svgW = 860;
    const svgH = buildSvgHeight(NODES);

    svg.setAttribute('viewBox', `0 0 ${svgW} ${svgH}`);
    svg.setAttribute('height', svgH);

    svg.innerHTML = '';  // clear

    // Background gradient
    svg.innerHTML = `
        <defs>
            <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#1a1a2e"/>
                <stop offset="100%" style="stop-color:#16213e"/>
            </linearGradient>
            <marker id="arrowBlue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#4fc3f7"/>
            </marker>
            <marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#81c784"/>
            </marker>
            <marker id="arrowYellow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#ffb74d"/>
            </marker>
            <marker id="arrowPurple" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#ce93d8"/>
            </marker>
            <marker id="arrowRed" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#e57373"/>
            </marker>
        </defs>
        <rect width="${svgW}" height="${svgH}" fill="url(#bgGrad)" rx="8"/>
    `;

    // Draw nodes
    NODES.forEach(node => drawNode(svg, node));

    // Draw animated arrows for completed steps
    path.slice(0, upToStep).forEach(step => {
        drawArrow(svg, step, NODES, svgW);
    });
}

/**
 * Build node definition objects from the resolution path.
 * @param {ResolutionStep[]} path
 * @returns {Array<{id:string,label:string,sublabel:string,x:number,y:number,color:string,icon:string}>}
 */
function buildNodeDefs(path) {
    const nodeY = 130;
    const TIER_COLORS = {
        resolver: '#7B1FA2',
        cache:    '#7B1FA2',
        root:     '#1565C0',
        tld:      '#E65100',
        auth:     '#2E7D32',
        default:  '#37474F'
    };
    const TIER_ICONS = {
        resolver: 'R',
        cache:    'C',
        root:     '.',
        tld:      'T',
        auth:     'A',
        default:  '?'
    };

    // Collect unique tiers in order
    const seenTiers = [];
    path.forEach(step => {
        if (!seenTiers.includes(step.tier)) seenTiers.push(step.tier);
    });

    // Always start with resolver/client
    const allTiers = ['resolver', ...seenTiers.filter(t => t !== 'resolver' && t !== 'cache')];

    // For cache-only paths, show just resolver + cache
    const isCacheOnly = path.every(s => s.tier === 'cache');
    if (isCacheOnly) {
        return [
            { id: 'client', label: 'Stub Resolver', sublabel: 'Your device', x: 90,  y: nodeY, color: '#37474F', icon: 'S' },
            { id: 'resolver', label: 'Recursive Resolver', sublabel: path[0].serverIp, x: 430, y: nodeY, color: TIER_COLORS.resolver, icon: 'R' }
        ];
    }

    // Standard: client + resolver + root + tld + auth (+ extra for CNAME)
    const standardNodes = [
        { id: 'client',   label: 'Stub Resolver',         sublabel: 'Your device',      x: 60,  y: nodeY },
        { id: 'resolver', label: 'Recursive Resolver',    sublabel: path[0]?.serverIp || '8.8.8.8', x: 215, y: nodeY },
        { id: 'root',     label: 'Root Nameserver',       sublabel: 'a.root-servers.net', x: 390, y: nodeY },
        { id: 'tld',      label: 'TLD Nameserver',        sublabel: '.com / .org / .net', x: 580, y: nodeY },
        { id: 'auth',     label: 'Authoritative NS',      sublabel: 'Zone NS',            x: 780, y: nodeY }
    ];

    return standardNodes.map(n => ({
        ...n,
        color: TIER_COLORS[n.id] || TIER_COLORS.default,
        icon:  TIER_ICONS[n.id]  || TIER_ICONS.default
    }));
}

/**
 * Compute dynamic SVG height based on arrow count.
 * @param {Array} nodes
 * @returns {number}
 */
function buildSvgHeight(nodes) {
    return 320;
}

/**
 * Draw a single node as a rounded rect + icon + labels.
 * @param {SVGElement} svg
 * @param {{ id:string, label:string, sublabel:string, x:number, y:number, color:string, icon:string }} node
 */
function drawNode(svg, node) {
    const W = 115, H = 70, R = 8;
    const cx = node.x;
    const cy = node.y;
    const x = cx - W / 2;
    const y = cy - H / 2;

    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

    // Glow filter simulation via extra rect
    const glow = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    glow.setAttribute('x', x - 3);
    glow.setAttribute('y', y - 3);
    glow.setAttribute('width', W + 6);
    glow.setAttribute('height', H + 6);
    glow.setAttribute('rx', R + 2);
    glow.setAttribute('fill', node.color);
    glow.setAttribute('opacity', '0.15');
    g.appendChild(glow);

    // Main box
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', W);
    rect.setAttribute('height', H);
    rect.setAttribute('rx', R);
    rect.setAttribute('fill', '#263238');
    rect.setAttribute('stroke', node.color);
    rect.setAttribute('stroke-width', '1.5');
    g.appendChild(rect);

    // Icon circle
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('cx', cx);
    circle.setAttribute('cy', cy - 12);
    circle.setAttribute('r', 14);
    circle.setAttribute('fill', node.color);
    circle.setAttribute('opacity', '0.9');
    g.appendChild(circle);

    const iconText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    iconText.setAttribute('x', cx);
    iconText.setAttribute('y', cy - 7);
    iconText.setAttribute('text-anchor', 'middle');
    iconText.setAttribute('fill', 'white');
    iconText.setAttribute('font-size', '13');
    iconText.setAttribute('font-weight', 'bold');
    iconText.setAttribute('font-family', 'monospace');
    iconText.textContent = node.icon;
    g.appendChild(iconText);

    // Label
    const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    label.setAttribute('x', cx);
    label.setAttribute('y', cy + 12);
    label.setAttribute('text-anchor', 'middle');
    label.setAttribute('fill', '#eceff1');
    label.setAttribute('font-size', '10');
    label.setAttribute('font-weight', 'bold');
    label.setAttribute('font-family', 'sans-serif');
    label.textContent = node.label.length > 18 ? node.label.slice(0, 17) + '…' : node.label;
    g.appendChild(label);

    // Sublabel
    const sub = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    sub.setAttribute('x', cx);
    sub.setAttribute('y', cy + 25);
    sub.setAttribute('text-anchor', 'middle');
    sub.setAttribute('fill', '#90a4ae');
    sub.setAttribute('font-size', '8.5');
    sub.setAttribute('font-family', 'monospace');
    const sublabelText = node.sublabel || '';
    sub.textContent = sublabelText.length > 20 ? sublabelText.slice(0, 19) + '…' : sublabelText;
    g.appendChild(sub);

    svg.appendChild(g);
}

/**
 * Draw an animated arrow for a single resolution step.
 * @param {SVGElement} svg
 * @param {ResolutionStep} step
 * @param {Array} nodes
 * @param {number} svgW
 */
function drawArrow(svg, step, nodes, svgW) {
    const NODE_W = 115;
    const BASE_Y = 130;
    const QUERY_Y  = BASE_Y - 45;  // Query arrows above nodes
    const RESP_Y   = BASE_Y + 45;  // Response arrows below nodes

    // Map tier → node id
    const tierNodeMap = { root: 'root', tld: 'tld', auth: 'auth', cache: 'resolver' };
    const targetNodeId = tierNodeMap[step.tier] || step.tier;

    const resolverNode = nodes.find(n => n.id === 'resolver');
    const targetNode   = nodes.find(n => n.id === targetNodeId);
    if (!resolverNode || !targetNode) return;

    // Arrow colours
    const isCache    = step.responseType === 'cache_hit';
    const isNxdomain = step.responseType === 'nxdomain';
    const isReferral = step.responseType === 'referral';

    const qColor   = isCache ? '#ce93d8' : '#4fc3f7';  // query: purple if cache, blue otherwise
    const rColor   = isNxdomain ? '#e57373' : isReferral ? '#ffb74d' : '#81c784';
    const qMarker  = isCache ? 'arrowPurple' : 'arrowBlue';
    const rMarker  = isNxdomain ? 'arrowRed' : isReferral ? 'arrowYellow' : 'arrowGreen';

    const rx1 = resolverNode.x + NODE_W / 2 - 2;
    const tx1 = targetNode.x  - NODE_W / 2 + 2;

    // Swap if resolver is to the right (shouldn't happen, but guard)
    const fromX = Math.min(rx1, tx1);
    const toX   = Math.max(rx1, tx1);

    // For cache hits, draw a loopback arrow on the resolver node
    if (isCache) {
        drawLoopArrow(svg, resolverNode, step, svgW);
        return;
    }

    // Query arrow (resolver → server, above node row)
    appendAnimatedArrow(svg, rx1, QUERY_Y, tx1, QUERY_Y, qColor, qMarker,
        `Q: ${step.queryType}`, step.rtt, true);

    // Response arrow (server → resolver, below node row)
    const respLabel = isReferral ? `Referral` : isNxdomain ? `NXDOMAIN` : `Answer`;
    appendAnimatedArrow(svg, tx1, RESP_Y, rx1, RESP_Y, rColor, rMarker,
        `R: ${respLabel} (${step.rtt}ms)`, 0, false);
}

/**
 * Draw a loopback self-arrow on a node for cache hits.
 * @param {SVGElement} svg
 * @param {{ x: number, y: number }} node
 * @param {ResolutionStep} step
 * @param {number} svgW
 */
function drawLoopArrow(svg, node, step, svgW) {
    const cx = node.x;
    const cy = node.y - 35 - 20;  // above node

    // Arc path
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    const d = `M ${cx - 30} ${cy + 20} Q ${cx} ${cy - 25} ${cx + 30} ${cy + 20}`;
    path.setAttribute('d', d);
    path.setAttribute('fill', 'none');
    path.setAttribute('stroke', '#ce93d8');
    path.setAttribute('stroke-width', '1.5');
    path.setAttribute('marker-end', 'url(#arrowPurple)');
    const pathLen = 120;
    path.setAttribute('stroke-dasharray', pathLen);
    path.setAttribute('stroke-dashoffset', pathLen);
    svg.appendChild(path);

    animateDashOffset(path, pathLen);

    // Label
    const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    lbl.setAttribute('x', cx);
    lbl.setAttribute('y', cy - 28);
    lbl.setAttribute('text-anchor', 'middle');
    lbl.setAttribute('fill', '#ce93d8');
    lbl.setAttribute('font-size', '9.5');
    lbl.setAttribute('font-family', 'monospace');
    lbl.textContent = `CACHE HIT (${step.rtt}ms)`;
    svg.appendChild(lbl);
}

/**
 * Append an animated dashed-line arrow.
 */
function appendAnimatedArrow(svg, x1, y1, x2, y2, color, markerEnd, label, rtt, isQuery) {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const len = Math.sqrt(dx*dx + dy*dy);

    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', x1);
    line.setAttribute('y1', y1);
    line.setAttribute('x2', x2);
    line.setAttribute('y2', y2);
    line.setAttribute('stroke', color);
    line.setAttribute('stroke-width', '1.5');
    line.setAttribute('marker-end', `url(#${markerEnd})`);
    line.setAttribute('stroke-dasharray', len);
    line.setAttribute('stroke-dashoffset', len);
    svg.appendChild(line);

    animateDashOffset(line, len);

    // Label at midpoint
    const mx = (x1 + x2) / 2;
    const my = y1 + (isQuery ? -8 : 10);

    const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    lbl.setAttribute('x', mx);
    lbl.setAttribute('y', my);
    lbl.setAttribute('text-anchor', 'middle');
    lbl.setAttribute('fill', color);
    lbl.setAttribute('font-size', '9');
    lbl.setAttribute('font-family', 'monospace');
    lbl.setAttribute('opacity', '0');
    // Truncate long labels for narrow arrows
    const truncLabel = len < 120 ? label.replace(/\(.*\)/, '').trim() : label;
    lbl.textContent = truncLabel;
    svg.appendChild(lbl);

    // Fade label in after line
    setTimeout(() => {
        lbl.style.transition = 'opacity 0.3s ease';
        lbl.setAttribute('opacity', '1');
    }, 350);
}

/**
 * Animate stroke-dashoffset from len → 0 using requestAnimationFrame.
 * @param {SVGElement} el
 * @param {number} len
 */
function animateDashOffset(el, len) {
    const duration = 400; // ms
    const start = performance.now();

    function tick(now) {
        const elapsed = now - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
        el.setAttribute('stroke-dashoffset', len * (1 - eased));
        if (progress < 1) requestAnimationFrame(tick);
    }

    requestAnimationFrame(tick);
}

/* ================================================================
   MISC UTILITIES
   ================================================================ */

/**
 * Escape HTML special characters.
 * @param {string} s
 * @returns {string}
 */
function escHtml(s) {
    if (typeof s !== 'string') s = String(s ?? '');
    return s
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

/**
 * Toggle concept accordion.
 * @param {HTMLButtonElement} btn
 */
function toggleConcept(btn) {
    const body = btn.nextElementSibling;
    const isOpen = body.classList.contains('open');
    body.classList.toggle('open', !isOpen);
    btn.classList.toggle('open', !isOpen);
    btn.setAttribute('aria-expanded', String(!isOpen));
}

/* ================================================================
   RESOLVER SELECT CHANGE HANDLER
   ================================================================ */

document.getElementById('resolverSelect').addEventListener('change', function() {
    const customGroup = document.getElementById('customResolverGroup');
    customGroup.style.display = (this.value === 'custom') ? '' : 'none';
});

/* ================================================================
   KEYBOARD SHORTCUTS
   ================================================================ */

document.getElementById('dnsInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') startTrace();
});

/* Keyboard support for domain pills */
document.querySelectorAll('.domain-pill').forEach(pill => {
    pill.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            pill.click();
        }
    });
});

/* ================================================================
   TAB SWITCHING
   ================================================================ */

/**
 * Switch between Simulate and Import Real Query tabs.
 * @param {'simulate' | 'import'} tabName
 */
function switchTab(tabName) {
    const panels = { simulate: 'panelSimulate', import: 'panelImport' };
    const btns   = { simulate: 'tabSimulate',   import: 'tabImport' };

    Object.entries(panels).forEach(([key, panelId]) => {
        const panel = document.getElementById(panelId);
        const btn   = document.getElementById(btns[key]);
        const isActive = key === tabName;
        panel.classList.toggle('active', isActive);
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', String(isActive));
    });
}

/* ================================================================
   IMPORT REAL QUERY — PARSERS
   ================================================================ */

const IMPORT_SESSION_KEY = 'dns_tracer_import_output';

/**
 * Remove error lines that dig produces on misconfigured domains.
 * Strips BAD (HORIZONTAL) REFERRAL and "too many lookups" lines.
 * @param {string} raw   Raw pasted text
 * @returns {string}     Cleaned text
 */
function sanitiseInput(raw) {
    return raw
        .split('\n')
        .filter(l => !l.includes('BAD (HORIZONTAL) REFERRAL'))
        .filter(l => !l.match(/too many lookups/i))
        .join('\n');
}

/**
 * Detect which command format was used and dispatch to the correct parser.
 * @param {string} raw   Raw pasted text
 * @returns {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean }}
 */
function detectAndParse(raw) {
    let text = raw.trim();
    if (!text) throw new Error('Input is empty.');

    // Sanitise error lines from dig on misconfigured domains
    text = sanitiseInput(text);

    // dig +trace — has DiG header with +trace OR root NS delegation lines
    if (/dig.*\+trace/i.test(text) || /^\.\s+\d+\s+IN\s+NS\s+/m.test(text)) {
        return parseDig(text);
    }

    // nslookup — has "Server:" line
    if (/^Server:/im.test(text) || /^Non-authoritative answer:/im.test(text)) {
        return parseNslookup(text);
    }

    // dig single query — has ;; QUESTION SECTION or DiG header without +trace
    if (/;; QUESTION SECTION/i.test(text) || /; <<>> DiG/i.test(text)) {
        return parseDigSimple(text);
    }

    // dig +short — only IP addresses / hostnames (few lines, no section headers)
    const lines = text.split('\n').map(l => l.trim()).filter(Boolean);
    const ipRe4 = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
    const ipRe6 = /^[0-9a-f:]+:[0-9a-f:]+$/i;
    if (lines.length <= 20 && lines.every(l => ipRe4.test(l) || ipRe6.test(l) || /^[a-z0-9][\w.\-]*\.$/i.test(l))) {
        const result = parseDigShort(text);
        if (result) return result;
    }

    throw new Error('Unrecognised format. See the expected formats listed in step 1.');
}

/* ----------------------------------------------------------------
   Fake RTT generator for imported paths (realistic by tier)
   ---------------------------------------------------------------- */
/**
 * @param {'root'|'tld'|'auth'|'resolver'} tier
 * @returns {number}
 */
function importRtt(tier) {
    const base   = { root: 38, tld: 28, auth: 18, resolver: 5 };
    const jitter = Math.floor(Math.random() * 15);
    return (base[tier] ?? 22) + jitter;
}

/* ----------------------------------------------------------------
   parseDig — full +trace output
   ---------------------------------------------------------------- */
/**
 * Parse `dig +trace domain` output into a ResolutionStep array.
 * @param {string} text
 * @returns {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean }}
 */
function parseDig(text) {
    let domain = '';
    let qtype  = 'A';

    // Try DiG header line: ; <<>> DiG 9.x <<>> +trace domain
    const headerLine = (text.match(/; <<>> DiG [^\n]+<<>>[^\n]+/i) || [])[0] || '';
    const hTokens    = headerLine.replace(/; <<>> DiG [^\n]*<<>>/i, '').trim().split(/\s+/);
    for (const tok of hTokens) {
        if (!tok || tok.startsWith('+') || tok.startsWith('-') || tok.startsWith('@')) continue;
        if (/^(A|AAAA|MX|NS|TXT|CNAME|SOA|PTR|SRV|CAA)$/i.test(tok)) { qtype = tok.toUpperCase(); continue; }
        if (!domain) domain = tok.replace(/\.$/, '');
    }

    // Scan QUESTION SECTIONs (last one is the deepest level — the actual target)
    const questionRe = /;(\S+)\s+IN\s+(\w+)/g;
    let qm;
    while ((qm = questionRe.exec(text)) !== null) {
        const d = qm[1].replace(/\.$/, '');
        const t = qm[2].toUpperCase();
        if (d && !d.startsWith(';') && !/^(A|AAAA|MX|NS|TXT)$/i.test(d)) {
            domain = d;
            qtype  = t;
        }
    }

    if (!domain) throw new Error('Could not extract queried domain from dig +trace output.');

    // Detect truncated output (missing ANSWER SECTION means dig was cut off)
    const isTruncated = !text.includes(';; ANSWER SECTION') && !text.includes(';; Got answer');
    if (isTruncated) {
        throw new Error(
            'dig +trace output appears truncated (no ANSWER SECTION found). ' +
            'This usually means the domain uses a CDN or has DNS configuration issues that prevent full tracing. ' +
            'Try: <code>dig example.com</code> instead.'
        );
    }

    // Check for SERVFAIL / NXDOMAIN status in response header
    const statusMatch = text.match(/status:\s*(SERVFAIL|NXDOMAIN|REFUSED)/i);
    if (statusMatch) {
        const code = statusMatch[1].toUpperCase();
        throw new Error(
            `DNS server returned ${code}. ` +
            (code === 'NXDOMAIN'
                ? 'The domain does not exist.'
                : code === 'SERVFAIL'
                    ? 'DNS resolution failed. Try: <code>dig @8.8.8.8 example.com</code>'
                    : 'The DNS server refused the query.')
        );
    }

    const domainParts = domain.replace(/\.$/, '').split('.');
    const tld = domainParts[domainParts.length - 1] || 'com';
    const sld = domainParts.length >= 2 ? domainParts.slice(-2).join('.') : domain;

    // Root NS
    const rootNsM    = /^\.\s+\d+\s+IN\s+NS\s+(\S+)/m.exec(text);
    const rootNsName = rootNsM ? rootNsM[1].replace(/\.$/, '') : 'a.root-servers.net';
    const rootIpM    = new RegExp(rootNsName.replace(/\./g, '\\.') + '\\.?\\s+\\d+\\s+IN\\s+A\\s+([\\d.]+)', 'i').exec(text);
    const rootIp     = rootIpM ? rootIpM[1] : '198.41.0.4';

    // TLD NS
    const tldNsM    = new RegExp('^' + tld + '\\.?\\s+\\d+\\s+IN\\s+NS\\s+(\\S+)', 'im').exec(text);
    const tldNsName = tldNsM ? tldNsM[1].replace(/\.$/, '') : 'a.gtld-servers.net';
    const tldIpM    = new RegExp(tldNsName.replace(/\./g, '\\.') + '\\.?\\s+\\d+\\s+IN\\s+A\\s+([\\d.]+)', 'i').exec(text);
    const tldIp     = tldIpM ? tldIpM[1] : '192.5.6.30';

    // Auth NS (for SLD)
    const authNsM    = new RegExp(sld.replace(/\./g, '\\.') + '\\.?\\s+\\d+\\s+IN\\s+NS\\s+(\\S+)', 'im').exec(text);
    const authNsName = authNsM ? authNsM[1].replace(/\.$/, '') : ('ns1.' + sld);
    const authIpM    = new RegExp(authNsName.replace(/\./g, '\\.') + '\\.?\\s+\\d+\\s+IN\\s+A\\s+([\\d.]+)', 'i').exec(text);
    const authIp     = authIpM ? authIpM[1] : '203.0.113.1';

    // Real RTT from last "in Xms" marker
    const rttMatches = [...text.matchAll(/\bin\s+(\d+)\s*ms/gi)];
    const lastRtt    = rttMatches.length ? parseInt(rttMatches[rttMatches.length - 1][1], 10) : importRtt('auth');

    const answerRecords = extractAnswerSection(text, domain, qtype);
    const isNxdomain    = answerRecords.length === 0;

    /** @type {ResolutionStep[]} */
    const path = [
        {
            step: 1,
            server: `Root Nameserver (${rootNsName})`,
            serverIp: rootIp,
            tier: 'root',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: 'referral',
            responseData: `Referral → ${tld}. TLD nameservers`,
            rtt: importRtt('root'),
            cacheHit: false,
            msgDetail: buildReferralDetail(normalizeFqdn(domain), qtype, tld + '.', [{ name: tldNsName, ip: tldIp }])
        },
        {
            step: 2,
            server: `TLD Nameserver (${tldNsName})`,
            serverIp: tldIp,
            tier: 'tld',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: 'referral',
            responseData: `Referral → ${sld} authoritative NS (${authNsName})`,
            rtt: importRtt('tld'),
            cacheHit: false,
            msgDetail: buildReferralDetail(normalizeFqdn(domain), qtype, sld + '.', [{ name: authNsName, ip: authIp }])
        },
        {
            step: 3,
            server: `Authoritative NS (${authNsName})`,
            serverIp: authIp,
            tier: 'auth',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: isNxdomain ? 'nxdomain' : 'answer',
            responseData: isNxdomain
                ? 'NXDOMAIN / NODATA — no ' + qtype + ' records found'
                : formatRecordSummary(answerRecords),
            rtt: lastRtt,
            cacheHit: false,
            records: answerRecords,
            msgDetail: buildMsgDetail(normalizeFqdn(domain), qtype, answerRecords, false)
        }
    ];

    return { path, domain, qtype, resolverIp: '(from dig +trace)', format: 'dig-trace', finalRecords: answerRecords, nxdomain: isNxdomain };
}

/* ----------------------------------------------------------------
   parseDigSimple — single dig query (no +trace)
   ---------------------------------------------------------------- */
/**
 * Parse single `dig domain [type]` output.
 * @param {string} text
 * @returns {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean }}
 */
function parseDigSimple(text) {
    let domain = '';
    let qtype  = 'A';

    const qRe = /;(\S+)\s+IN\s+(\w+)/;
    const qm  = qRe.exec(text);
    if (qm) {
        domain = qm[1].replace(/\.$/, '');
        qtype  = qm[2].toUpperCase();
    } else {
        const hm = text.match(/; <<>> DiG[^\n]+<<>>\s+(.*)/i);
        if (hm) {
            const toks = hm[1].trim().split(/\s+/);
            for (const tok of toks) {
                if (tok.startsWith('+') || tok.startsWith('-') || tok.startsWith('@')) continue;
                if (/^(A|AAAA|MX|NS|TXT|CNAME|SOA|PTR)$/i.test(tok)) { qtype = tok.toUpperCase(); continue; }
                if (!domain) domain = tok.replace(/\.$/, '');
            }
        }
    }

    if (!domain) throw new Error('Could not extract queried domain from dig output.');

    // Check for SERVFAIL / NXDOMAIN status in response header
    const statusMatch = text.match(/status:\s*(SERVFAIL|NXDOMAIN|REFUSED)/i);
    if (statusMatch) {
        const code = statusMatch[1].toUpperCase();
        throw new Error(
            `DNS server returned ${code}. ` +
            (code === 'NXDOMAIN'
                ? 'The domain does not exist.'
                : code === 'SERVFAIL'
                    ? 'DNS resolution failed. Try: <code>dig @8.8.8.8 example.com</code>'
                    : 'The DNS server refused the query.')
        );
    }

    const serverM    = text.match(/;; SERVER:\s*([\d.a-f:]+)/i);
    const resolverIp = serverM ? serverM[1] : '8.8.8.8';

    const authBlockM = text.match(/;; AUTHORITY SECTION:([\s\S]*?)(?:;;|$)/i);
    let authNsName   = '';
    if (authBlockM) {
        const nsLine = authBlockM[1].match(/\S+\s+\d+\s+IN\s+NS\s+(\S+)/i);
        if (nsLine) authNsName = nsLine[1].replace(/\.$/, '');
    }
    if (!authNsName) {
        const parts = domain.replace(/\.$/, '').split('.');
        authNsName  = 'ns1.' + parts.slice(-2).join('.');
    }

    const qtMatch = text.match(/Query time:\s*(\d+)\s*msec/i);
    const rttMs   = qtMatch ? parseInt(qtMatch[1], 10) : importRtt('auth');

    const answerRecords = extractAnswerSection(text, domain, qtype);
    const isNxdomain    = answerRecords.length === 0;

    /** @type {ResolutionStep[]} */
    const path = [
        {
            step: 1,
            server: 'Recursive Resolver (' + resolverIp + ')',
            serverIp: resolverIp,
            tier: 'resolver',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: 'referral',
            responseData: 'Resolver (' + resolverIp + ') accepted query for ' + normalizeFqdn(domain),
            rtt: Math.max(1, Math.round(rttMs * 0.15)),
            cacheHit: false,
            msgDetail: ''
        },
        {
            step: 2,
            server: 'Authoritative NS (' + authNsName + ')',
            serverIp: '(via resolver)',
            tier: 'auth',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: isNxdomain ? 'nxdomain' : 'answer',
            responseData: isNxdomain
                ? 'NXDOMAIN / NODATA — no ' + qtype + ' records found'
                : formatRecordSummary(answerRecords),
            rtt: rttMs,
            cacheHit: false,
            records: answerRecords,
            msgDetail: buildMsgDetail(normalizeFqdn(domain), qtype, answerRecords, false)
        }
    ];

    return { path, domain, qtype, resolverIp, format: 'dig-simple', finalRecords: answerRecords, nxdomain: isNxdomain };
}

/* ----------------------------------------------------------------
   parseDigShort — dig +short output (IPs only)
   ---------------------------------------------------------------- */
/**
 * Parse `dig domain +short` output (IP addresses or CNAME chains).
 * @param {string} text
 * @returns {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean } | null}
 */
function parseDigShort(text) {
    const lines  = text.split('\n').map(l => l.trim()).filter(Boolean);
    if (!lines.length) return null;

    const ipRe4 = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
    const ipRe6 = /^[0-9a-f:]+:[0-9a-f:]+$/i;
    const hnRe  = /^[a-z0-9][\w.\-]*\.$/i;

    const validLines = lines.filter(l => ipRe4.test(l) || ipRe6.test(l) || hnRe.test(l));
    if (!validLines.length) return null;

    const qtype = validLines.some(l => ipRe6.test(l)) ? 'AAAA' : 'A';

    const answerRecords = /** @type {DnsRecord[]} */ (validLines.map(v => ({
        type: ipRe6.test(v) ? 'AAAA' : ipRe4.test(v) ? 'A' : 'CNAME',
        value: v.replace(/\.$/, ''),
        ttl: 300
    })));

    /** @type {ResolutionStep[]} */
    const path = [
        {
            step: 1,
            server: 'Recursive Resolver (unknown)',
            serverIp: '(unknown)',
            tier: 'auth',
            queryName: '(unknown — use dig or nslookup for full path).',
            queryType: qtype,
            responseType: 'answer',
            responseData: formatRecordSummary(answerRecords),
            rtt: importRtt('auth'),
            cacheHit: false,
            records: answerRecords,
            msgDetail: ''
        }
    ];

    return {
        path,
        domain: '(unknown — dig +short omits domain info)',
        qtype,
        resolverIp: '(unknown)',
        format: 'dig-short',
        finalRecords: answerRecords,
        nxdomain: false
    };
}

/* ----------------------------------------------------------------
   parseNslookup — standard nslookup output
   ---------------------------------------------------------------- */
/**
 * Parse `nslookup domain` output.
 * @param {string} text
 * @returns {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean }}
 */
function parseNslookup(text) {
    const addrM      = text.match(/^Address(?:es)?:\s*([\d.a-f:]+)/im);
    const serverM    = text.match(/^Server:\s*(.+)/im);
    const resolverIp = (addrM ? addrM[1] : serverM ? serverM[1] : '8.8.8.8').split('#')[0].trim();

    const nameM  = text.match(/^Name:\s+(\S+)/im);
    let domain   = nameM ? nameM[1].replace(/\.$/, '') : '';

    if (!domain) {
        const nx = text.match(/can't find\s+(\S+)/i) || text.match(/server can't find\s+(\S+)/i);
        if (nx) domain = nx[1].replace(/[:.]+$/, '');
    }

    if (!domain) throw new Error('Could not extract domain name from nslookup output.');

    const answerRecords = /** @type {DnsRecord[]} */ ([]);
    const lines  = text.split('\n');
    const ipRe4  = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
    const seenIps = new Set([resolverIp]);
    let pastName = false;

    for (const line of lines) {
        if (/^Name:/i.test(line)) { pastName = true; continue; }
        if (!pastName) continue;

        const addrLine = line.match(/^\s*Addresses?:\s*([\d.a-f:]+)/i);
        if (addrLine) {
            const ip = addrLine[1].trim();
            if (!seenIps.has(ip)) {
                seenIps.add(ip);
                answerRecords.push({ type: ipRe4.test(ip) ? 'A' : 'AAAA', value: ip, ttl: 300 });
            }
            continue;
        }

        // Bare IP line (Windows multi-IP style)
        const bareIp = line.trim();
        if (ipRe4.test(bareIp) && !seenIps.has(bareIp)) {
            seenIps.add(bareIp);
            answerRecords.push({ type: 'A', value: bareIp, ttl: 300 });
        }
    }

    // Non-authoritative block IPs (Linux nslookup)
    const nonAuthBlock = text.replace(/^[\s\S]*?Non-authoritative answer:/im, '');
    const naAddrRe = /Addresses?:\s*([\d.]+)/gi;
    let na;
    while ((na = naAddrRe.exec(nonAuthBlock)) !== null) {
        const ip = na[1].trim();
        if (!seenIps.has(ip)) {
            seenIps.add(ip);
            answerRecords.push({ type: 'A', value: ip, ttl: 300 });
        }
    }

    // MX records
    const mxRe = /mail exchanger\s*=\s*(\S+)/gi;
    let mx;
    while ((mx = mxRe.exec(text)) !== null) {
        answerRecords.push({ type: 'MX', value: mx[1].replace(/\.$/, ''), ttl: 3600, priority: 10 });
    }

    // CNAME records
    const cnRe = /(?:canonical name|alias)\s*=\s*(\S+)/gi;
    let cn;
    while ((cn = cnRe.exec(text)) !== null) {
        answerRecords.push({ type: 'CNAME', value: cn[1].replace(/\.$/, ''), ttl: 300 });
    }

    const isNxdomain = answerRecords.length === 0 ||
                       /\*\*\*\s+can't find|NXDOMAIN|server can't find/i.test(text);
    const isNonAuth  = /Non-authoritative answer/i.test(text);
    const qtype      = answerRecords.find(r => r.type === 'AAAA') ? 'AAAA'
                     : answerRecords.find(r => r.type === 'MX')   ? 'MX'
                     : 'A';

    /** @type {ResolutionStep[]} */
    const path = [
        {
            step: 1,
            server: 'Recursive Resolver (' + resolverIp + ')',
            serverIp: resolverIp,
            tier: 'resolver',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: 'referral',
            responseData: 'Resolver (' + resolverIp + ') accepted query',
            rtt: importRtt('resolver'),
            cacheHit: false,
            msgDetail: ''
        },
        {
            step: 2,
            server: isNonAuth ? 'Resolver Cache / Upstream NS' : 'Authoritative NS',
            serverIp: resolverIp,
            tier: 'auth',
            queryName: normalizeFqdn(domain),
            queryType: qtype,
            responseType: isNxdomain ? 'nxdomain' : 'answer',
            responseData: isNxdomain
                ? 'NXDOMAIN — domain not found'
                : (isNonAuth ? '(non-authoritative) ' : '') + formatRecordSummary(answerRecords),
            rtt: importRtt('auth'),
            cacheHit: isNonAuth,
            records: answerRecords,
            msgDetail: buildMsgDetail(normalizeFqdn(domain), qtype, answerRecords, isNonAuth)
        }
    ];

    return { path, domain, qtype, resolverIp, format: 'nslookup', finalRecords: answerRecords, nxdomain: isNxdomain };
}

/* ----------------------------------------------------------------
   extractAnswerSection — shared helper for dig output
   ---------------------------------------------------------------- */
/**
 * Extract records from ;; ANSWER SECTION in dig output.
 * @param {string} text
 * @param {string} domain
 * @param {string} qtype
 * @returns {DnsRecord[]}
 */
function extractAnswerSection(text, domain, qtype) {
    const records = /** @type {DnsRecord[]} */ ([]);

    // Primary: parse ;; ANSWER SECTION blocks
    const ansBlockRe = /;; ANSWER SECTION:([\s\S]*?)(?:;;|$)/gi;
    let block;
    while ((block = ansBlockRe.exec(text)) !== null) {
        const recordRe = /^(\S+)\s+(\d+)\s+IN\s+(\w+)\s+(.+)$/gm;
        let rm;
        while ((rm = recordRe.exec(block[1])) !== null) {
            const ttl  = parseInt(rm[2], 10);
            const type = rm[3].toUpperCase();
            let value  = rm[4].trim().replace(/\.$/, '');
            if (type !== qtype && type !== 'CNAME') continue;
            /** @type {DnsRecord} */
            const rec = { type, value, ttl };
            if (type === 'MX') {
                const parts  = value.split(/\s+/);
                rec.priority = parseInt(parts[0], 10) || 10;
                rec.value    = parts.slice(1).join(' ').replace(/\.$/, '');
            }
            records.push(rec);
        }
    }

    // Fallback: scan for "domain TTL IN TYPE value" lines anywhere
    if (!records.length) {
        const fqdn    = normalizeFqdn(domain);
        const escaped = fqdn.replace(/\./g, '\\.').replace(/\*/g, '\\*');
        const re = new RegExp(
            '(?:' + escaped + '|' + escaped.slice(0, -1) + ')\\s+(\\d+)\\s+IN\\s+(\\w+)\\s+(.+)', 'gim'
        );
        let fm;
        while ((fm = re.exec(text)) !== null) {
            const ttl  = parseInt(fm[1], 10);
            const type = fm[2].toUpperCase();
            if (type !== qtype && type !== 'CNAME') continue;
            let value  = fm[3].trim().replace(/\.$/, '');
            /** @type {DnsRecord} */
            const rec  = { type, value, ttl };
            if (type === 'MX') {
                const parts  = value.split(/\s+/);
                rec.priority = parseInt(parts[0], 10) || 10;
                rec.value    = parts.slice(1).join(' ').replace(/\.$/, '');
            }
            records.push(rec);
        }
    }

    return records;
}

/* ================================================================
   IMPORT UI HANDLERS
   ================================================================ */

/**
 * Called on textarea input — clears previous parse results and saves to sessionStorage.
 * Also provides real-time early-warning for known dig errors.
 */
function importOnInput() {
    const el = document.getElementById('importParseError');
    const sl = document.getElementById('importParseSuccess');
    if (el) el.classList.remove('show');
    if (sl) sl.classList.remove('show');
    const ta = document.getElementById('importTextarea');
    const raw = ta.value;

    // Persist for session reload
    try { sessionStorage.setItem(IMPORT_SESSION_KEY, raw); } catch (e) { /* ignore */ }

    if (!raw.trim()) { return; }

    // Warn immediately on known-bad markers while user is still typing
    if (raw.includes('BAD (HORIZONTAL) REFERRAL') || raw.includes('too many lookups')) {
        showImportError(
            '⚠️ dig error detected in pasted output. ' +
            'Click "Parse & Visualize" for the recommended fix.'
        );
        return;
    }

    // Show format detected so far (silent during typing, no error)
    try {
        const result = detectAndParse(raw);
        if (result && result.path.length > 0) {
            showImportSuccess(`✅ ${result.format || 'Query'} detected — ${result.path[0].queryName}`);
        }
    } catch (_) { /* silent during typing */ }
}

function showImportError(html) {
    const el = document.getElementById('importParseError');
    el.innerHTML = html;
    el.classList.add('show');
    document.getElementById('importParseSuccess').classList.remove('show');
}

function showImportSuccess(html) {
    const el = document.getElementById('importParseSuccess');
    el.innerHTML = html;
    el.classList.add('show');
    document.getElementById('importParseError').classList.remove('show');
}

/**
 * Build a human-readable parsed results summary HTML string.
 * @param {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, format: string, finalRecords: DnsRecord[], nxdomain: boolean }} result
 * @returns {string}
 */
function buildImportSummary(result) {
    const formatLabels = {
        'dig-trace':  '<span class="import-source-badge dig-trace">dig +trace</span>',
        'dig-simple': '<span class="import-source-badge dig-simple">dig</span>',
        'dig-short':  '<span class="import-source-badge dig-short">dig +short</span>',
        'nslookup':   '<span class="import-source-badge nslookup">nslookup</span>'
    };
    const badge = formatLabels[result.format] || '';

    let html = '<strong>Parsed results:</strong> ' + badge + '<br>';
    html += '<strong>Domain:</strong> ' + escHtml(result.domain) + ' &nbsp; <strong>Type:</strong> ' + escHtml(result.qtype) + '<br>';
    if (result.resolverIp && result.resolverIp !== '(from dig +trace)') {
        html += '<strong>Resolver:</strong> ' + escHtml(result.resolverIp) + '<br>';
    }
    html += '<strong>Query path:</strong><br>';

    result.path.forEach(function(step) {
        const rttStr = step.rtt ? ' &rarr; ' + step.rtt + 'ms' : '';
        html += '<div class="import-path-item"><span class="import-path-dot"></span><span>' +
            escHtml(step.server) + rttStr + ' &mdash; <em>' + escHtml(step.responseType) + '</em></span></div>';
    });

    if (result.finalRecords && result.finalRecords.length) {
        const first = result.finalRecords[0];
        html += '<strong>Answer:</strong> ' + escHtml(first.type) + ' ' + escHtml(first.value);
        if (first.ttl) html += ' <span style="opacity:0.75;">(TTL: ' + first.ttl + 's)</span>';
        if (result.finalRecords.length > 1) html += ' + ' + (result.finalRecords.length - 1) + ' more';
    } else if (result.nxdomain) {
        html += '<strong>Answer:</strong> <span style="color:#ff8a80;">NXDOMAIN</span>';
    }

    return html;
}

/**
 * Main entry point for the "Parse & Visualize" button.
 */
function parseAndVisualize() {
    const el = document.getElementById('importParseError');
    const sl = document.getElementById('importParseSuccess');
    if (el) el.classList.remove('show');
    if (sl) sl.classList.remove('show');

    const raw = document.getElementById('importTextarea').value;

    if (!raw.trim()) {
        showImportError(
            'No output to parse. Paste the output from <code>dig +trace</code>, ' +
            '<code>dig</code>, or <code>nslookup</code> into the text area above.'
        );
        return;
    }

    // Pre-flight error detection for known dig failures
    if (raw.includes('BAD (HORIZONTAL) REFERRAL')) {
        showImportError(
            '⚠️ dig reported <strong>BAD (HORIZONTAL) REFERRAL</strong>.<br>' +
            'This domain\'s DNS uses CDN or complex delegation that <code>+trace</code> cannot follow.<br><br>' +
            'Use this command instead:<br>' +
            '<code>dig example.com</code> &nbsp;or&nbsp; <code>dig @8.8.8.8 example.com</code>'
        );
        return;
    }
    if (raw.includes('too many lookups')) {
        showImportError(
            '⚠️ dig hit its lookup limit (<strong>too many lookups</strong>).<br>' +
            'This is common with CDN-hosted domains (Cloudflare, Akamai, Fastly).<br><br>' +
            'Use this command instead:<br>' +
            '<code>dig example.com</code> &nbsp;or&nbsp; <code>nslookup example.com</code>'
        );
        return;
    }

    let result;
    try {
        result = detectAndParse(raw);
    } catch (err) {
        showImportError(
            'Could not parse output. Please ensure you ran:<br>' +
            '&nbsp;&nbsp;&bull; <code>dig +trace example.com</code> (preferred — full path)<br>' +
            '&nbsp;&nbsp;&bull; <code>dig example.com</code> (single query)<br>' +
            '&nbsp;&nbsp;&bull; <code>nslookup example.com</code><br>' +
            '&nbsp;&nbsp;&bull; <code>dig example.com +short</code><br><br>' +
            '<strong>Common issues:</strong><br>' +
            '&nbsp;&nbsp;&bull; Output incomplete or truncated<br>' +
            '&nbsp;&nbsp;&bull; Copy-paste missed the first line<br>' +
            '&nbsp;&nbsp;&bull; Wrong command format<br><br>' +
            '<em>Parser message: ' + escHtml(err.message) + '</em>'
        );
        return;
    }

    showImportSuccess(buildImportSummary(result));
    runImportedTrace(result);
}

/**
 * Run the SVG/step-log visualization with a pre-parsed result.
 * @param {{ path: ResolutionStep[], domain: string, qtype: string, resolverIp: string, finalRecords: DnsRecord[], nxdomain: boolean }} result
 */
function runImportedTrace(result) {
    const parseBtn = document.getElementById('importParseBtn');
    if (parseBtn) parseBtn.disabled = true;

    hideAllResultSections();
    stopTtlTimer();

    const progress = document.getElementById('animProgress');
    progress.classList.add('show');
    setProgressText('Parsing imported query output...');

    const STEP_DELAY = 600;
    const totalSteps = result.path.length;

    result.path.forEach(function(step, idx) {
        setTimeout(function() {
            if (idx === 0) {
                showSection('visSection');
                showSection('stepsSection');
                renderSvg(result.path, idx + 1);
            } else {
                renderSvg(result.path, idx + 1);
            }
            appendStepRow(step, idx + 1 === totalSteps);

            if (step.tier === 'root')     setProgressText('Following TLD referral...');
            if (step.tier === 'tld')      setProgressText('Reaching authoritative nameserver...');
            if (step.tier === 'auth')     setProgressText('Received authoritative answer.');
            if (step.tier === 'resolver') setProgressText('Contacting recursive resolver...');

            if (idx + 1 === totalSteps) {
                setTimeout(function() {
                    progress.classList.remove('show');
                    const fakeResult = {
                        nxdomain:     result.nxdomain,
                        cacheHit:     false,
                        finalRecords: result.finalRecords || [],
                        path:         result.path
                    };
                    showFinalAnswer(fakeResult, result.domain, result.qtype, result.resolverIp);
                    showMsgInspector(result.path);
                    if (!result.nxdomain && result.finalRecords && result.finalRecords.length) {
                        startTtlTimer(result.finalRecords);
                        showSection('ttlSection');
                    }
                    updateCacheBadge(false);
                    if (parseBtn) parseBtn.disabled = false;
                }, 300);
            }
        }, idx * STEP_DELAY);
    });

    if (totalSteps === 0) {
        progress.classList.remove('show');
        showImportError('Parsed output has no resolution steps. The output may be incomplete.');
        if (parseBtn) parseBtn.disabled = false;
    }
}

/**
 * Clear the import textarea and reset UI state.
 */
function clearImport() {
    document.getElementById('importTextarea').value = '';
    const el = document.getElementById('importParseError');
    const sl = document.getElementById('importParseSuccess');
    if (el) el.classList.remove('show');
    if (sl) sl.classList.remove('show');
    try { sessionStorage.removeItem(IMPORT_SESSION_KEY); } catch (e) { /* ignore */ }
}

/* ================================================================
   PAGE INIT — load persisted custom zones + restore import textarea
   ================================================================ */
(function initCustomZones() {
    updateCustomZoneCount();
    // Pre-populate saved zones list if builder is already open (e.g. hot-reload)
    const panel = document.getElementById('zoneBuilderPanel');
    if (panel && panel.classList.contains('open')) renderSavedZonesList();

    // Restore previously pasted import content from sessionStorage
    try {
        const saved = sessionStorage.getItem(IMPORT_SESSION_KEY);
        if (saved) {
            const ta = document.getElementById('importTextarea');
            if (ta) ta.value = saved;
        }
    } catch (e) { /* ignore */ }
})();
</script>