.. عنوان: DNS Query Tracer & Visualizer
.. slug: dns-query-tracer-visualizer
.. تاریخ: 2026-03-26 12:00:00 UTC
.. ٹیگز: نیٹ ورکنگ، ڈی این ایس، ٹول، ویژولائزر
.. زمرہ: اوزار
.. لنک:
.. تفصیل: حل کرنے والے سے مستند نام سرور تک 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 استفسار ٹریسر اور ویژولائزر</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>
ٹیب پینل: نقل کریں (موجودہ UI)
<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">NS1 IP پتہ:</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">مثال ڈاٹ کام کو کھودیں۔</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 +ٹریس بھی ناکام ہو جاتا ہے — @ پرچم صرف پہلی ہاپ کو متاثر کرتا ہے۔</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>
ایس وی جی ویژولائزر
<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;">آر ٹی ٹی</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>
ٹی ٹی ایل ٹائمر
<div class="result-section" id="ttlSection">
<div class="section-header">
<h3>ٹی ٹی ایل کیشے ٹائمر</h3>
</div>
<div class="section-content" id="ttlContent">
</div>
</div>
ڈی این ایس میسج انسپکٹر
<div class="result-section" id="msgSection">
<div class="section-header">
<h3>ڈی این ایس میسج انسپکٹر</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 تصورات کا حوالہ</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>تکراری حل کرنے والے سوالات کرتا ہے۔
                    اندرونی طور پر: جڑ → TLD → مستند۔</div>
</div>
<div class="concept-wrap" style="margin-top:6px;">
<button aria-expanded="false" class="concept-toggle" onclick="toggleConcept(this)">TTL (ٹائم ٹو لائیو) اور کیشنگ<span class="arrow">▶</span>
</button>
<div class="concept-body">ہر DNS ریکارڈ سیکنڈوں میں TTL رکھتا ہے۔ اس دورانیے کے لیے ریزولورز کیشے جوابات۔
                    کیش ہونے پر، بعد کے سوالات کا فوری جواب دیا جاتا ہے (کوئی نیٹ ورک راؤنڈ ٹرپ نہیں)۔<br/><br/>عام TTLs:<ul>
<li><code>A/AAAA</code>— 300 سیکنڈ (5 منٹ) سے 3600 سیکنڈ (1 گھنٹہ)</li>
<li><code>MX</code>- 3600s عام</li>
<li><code>NS</code>— 86400 s (24 گھنٹے) عام</li>
<li><code>TXT (SPF)</code>- 3600s عام</li>
</ul>کم ٹی ٹی ایل تیز ریکارڈ تبدیلیوں کی اجازت دیتے ہیں۔ اعلی TTLs حل کرنے والے بوجھ کو کم کرتے ہیں۔</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>SOA کم از کم TTL</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-کنٹینر
=====================================================
     جاوا اسکرپٹ
     =====================================================
<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>