.. العنوان: متتبع استعلام DNS ومتخيله
.. سبيكة: DNS-query-tracer-visualizer
.. التاريخ: 2026-03-26 12:00:00 بالتوقيت العالمي
.. العلامات: الشبكات، نظام أسماء النطاقات، أداة، متخيل
.. الفئة: أدوات
.. الرابط :
.. الوصف: تحريك الدقة المتكررة لـ 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>
لوحة علامة التبويب: محاكاة (واجهة المستخدم الحالية)
<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">جوجل DNS العام (8.8.8.8)</option>
<option value="1.1.1.1">كلاود فلير (1.1.1.1)</option>
<option value="9.9.9.9">كواد9 (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">أ (عنوان IPv4)</option>
<option value="AAAA">AAAA (عنوان IPv6)</option>
<option value="MX">MX (تبادل البريد)</option>
<option value="NS">NS (خادم الأسماء)</option>
<option value="TXT">TXT (سجل نصي)</option>
</select>
</div>
<div class="form-group" id="customResolverGroup" style="display:none">
<label for="customResolver">عنوان IP للمحلل المخصص:</label>
<input aria-label="Custom resolver IP address" id="customResolver" placeholder="e.g. 192.168.1.1" type="text"/>
</div>
</div>
مجالات الاختيار السريع
<div style="margin-top: 14px;">
<label style="font-size:13px;color:rgba(255,255,255,0.8);font-weight:600;">أمثلة سريعة:</label>
<div aria-label="Example domains" class="domain-pills" id="builtinPills" role="group">
<span class="domain-pill" onclick="setDomain('www.example.com')" role="button" tabindex="0">www.example.com</span>
<span class="domain-pill" onclick="setDomain('mail.example.com')" role="button" tabindex="0">mail.example.com</span>
<span class="domain-pill" onclick="setDomain('www.google.com')" role="button" tabindex="0">www.google.com</span>
<span class="domain-pill" onclick="setDomain('github.com')" role="button" tabindex="0">github.com</span>
<span class="domain-pill" onclick="setDomain('api.cloudflare.com')" role="button" tabindex="0">api.cloudflare.com</span>
<span class="domain-pill" onclick="setDomain('www.amazon.com')" role="button" tabindex="0">www.amazon.com</span>
<span class="domain-pill" onclick="setDomain('www.wikipedia.org')" role="button" tabindex="0">www.wikipedia.org</span>
<span class="domain-pill" onclick="setDomain('smtp.fastmail.com')" role="button" tabindex="0">smtp. fastmail.com</span>
<span class="domain-pill" onclick="setDomain('mx.example.net')" role="button" tabindex="0">mx.example.net</span>
<span class="domain-pill" onclick="setDomain('nxdomain.example.com')" role="button" tabindex="0">مثال NXDOMAIN</span>
</div>
</div>
<div class="btn-row">
<button aria-label="Trace DNS query" class="submit-btn" id="traceBtn" onclick="startTrace()">تتبع استعلام DNS</button>
<button aria-label="Repeat query to show cache behaviour" class="btn-secondary" disabled="" id="repeatBtn" onclick="repeatTrace()">كرر (إظهار ذاكرة التخزين المؤقت)</button>
</div>
<div class="error-box" id="errorBox" role="alert"></div>
<div class="unknown-domain-box" id="unknownDomainBox" role="alert"></div>
<div class="sim-notice">
<strong>قاعدة بيانات محاكاة:</strong>تستخدم هذه الأداة قاعدة بيانات DNS مدمجة
            (لا توجد استعلامات شبكة حقيقية ممكنة من المتصفح). استخدم منشئ المنطقة
            أدناه لإضافة أي نطاق تريد اختباره.</div>
<div class="help-text" style="margin-top:10px;">
<strong>كيف يعمل:</strong>يطلب المحلل الخاص بك من خوادم الأسماء الجذرية الحصول على
            TLD، ثم يقوم بالاستعلام عن خوادم TLD لخادم الأسماء الرسمي، ثم
            يجلب السجل. تعرض كل قفزة RTT وما إذا تم تخزين الإجابة مؤقتًا أم لا.</div>
منشئ المنطقة المخصصة
<button aria-expanded="false" class="zone-builder-toggle" id="zoneBuilderToggle" onclick="toggleZoneBuilder()">
<span>+</span>إنشاء/إدارة المناطق المخصصة<span id="customZoneCount" style="margin-left:auto;font-size:11px;opacity:0.7;"></span>
</button>
<div class="zone-builder-panel" id="zoneBuilderPanel">
<div style="font-size:14px;font-weight:600;color:rgba(255,255,255,0.95);margin-bottom:12px;">حدد منطقة مخصصة، ثم استعلم عنها مثل أي مجال آخر</div>
<div class="zone-form-grid">
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneNameInput">اسم المنطقة (المجال):</label>
<input autocomplete="off" class="zone-form-input" id="zoneNameInput" placeholder="e.g. mycompany.com" spellcheck="false" type="text"/>
</div>
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneNs1">اسم مضيف خادم الأسماء الأساسي:</label>
<input class="zone-form-input" id="zoneNs1" placeholder="ns1.mycompany.com" type="text"/>
</div>
<div>
<label class="zone-form-label" for="zoneNs1Ip">عنوان IP NS1:</label>
<input class="zone-form-input" id="zoneNs1Ip" placeholder="203.0.113.1" type="text"/>
</div>
<div>
<label class="zone-form-label" for="zoneNs2Ip">NS2 IP (اختياري):</label>
<input class="zone-form-input" id="zoneNs2Ip" placeholder="203.0.113.2" type="text"/>
</div>
<div style="grid-column:1/-1;">
<label class="zone-form-label" for="zoneRecordsArea">سجلات المنطقة (واحد لكل سطر):</label>
<textarea class="zone-records-area" id="zoneRecordsArea" placeholder='@ A 203.0.113.10 3600
www A 203.0.113.10 300
mail A 203.0.113.20 3600
@ MX mail.mycompany.com 3600 10
@ TXT "v=spf1 ip4:203.0.113.0/24 ~all" 3600
api CNAME www.mycompany.com 300'></textarea>
<div class="zone-hint">شكل:<code>label type value TTL [priority]</code><br/>يستخدم<code>@</code>لقمة المنطقة. تأخذ سجلات MX حقل أولوية إضافيًا.<br/>الأنواع المدعومة: A، AAAA، MX، NS، TXT، CNAME</div>
</div>
</div>
<div class="zone-error-msg" id="zoneErrorMsg"></div>
<button class="zone-save-btn" onclick="saveCustomZone()">منطقة الحفظ</button>
قائمة المناطق المحفوظة
<div class="saved-zones-wrap" id="savedZonesWrap" style="display:none;">
<div class="zone-meta-row" style="margin-top:14px;margin-bottom:8px;">
<span class="saved-zones-label" style="margin-bottom:0;">المناطق المخصصة المحفوظة:</span>
<button class="zone-clear-btn" onclick="clearAllZones()">مسح الكل</button>
</div>
<div class="saved-zones-list" id="savedZonesList"></div>
<div class="zone-meta-row">
<span id="storageInfo"></span>
</div>
</div>
</div>
</div>/.tab-panel#panelSimulate
لوحة علامة التبويب: استيراد استعلام حقيقي
<div aria-labelledby="tabImport" class="tab-panel" id="panelImport" role="tabpanel">
<div class="import-step">
<div class="import-step-label">
<span class="import-step-num">1</span>قم بتشغيل هذا الأمر على نظامك:</div>
<div class="cmd-block">
<span class="cmd-os" style="color: #4CAF50; font-weight: bold;">موصى به (الأكثر موثوقية - يعمل على أي مجال):</span>
<span class="cmd-line">حفر example.com</span>
<span class="cmd-os" style="margin-top:10px;">أو ويندوز / لينكس / ماك:</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">حفر + تتبع + محاولات = 1 + nodnssec example.com</span>
<span class="cmd-os" style="margin-top:15px;">لاستخدام خادم DNS عام محدد:</span>
<span class="cmd-line">حفر @8.8.8.8 example.com</span>
<span class="cmd-line" style="margin-top:5px;">حفر @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;">يفشل هذا في العديد من المجالات (DNS المستضافة على CDN والتي تم تكوينها بشكل خاطئ). استخدم الأوامر أعلاه بدلاً من ذلك.<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-header
تقدم الرسوم المتحركة
<div aria-live="polite" class="anim-progress" id="animProgress">
<div aria-label="Resolving" class="spinner" role="status"></div>
<span id="animProgressText">يتم الآن الاستعلام عن خوادم الأسماء الجذرية...</span>
</div>
متخيل SVG
<div class="result-section" id="visSection">
<div class="section-header">
<h3>مسار القرار</h3>
<span class="cache-badge miss" id="cacheStatusBadge">يفتقد</span>
</div>
<div class="section-content" style="padding:15px;">
<div id="svgWrapper">
<svg aria-label="DNS query path visualization" id="queryVisSvg" role="img">
يسكنها JS
</svg>
</div>
</div>
</div>
سجل خطوة بخطوة
<div class="result-section" id="stepsSection">
<div class="section-header">
<h3>سجل الحل خطوة بخطوة</h3>
</div>
<div class="section-content" style="padding: 0;">
<table aria-label="DNS resolution steps" class="step-table" id="stepsTable">
<thead>
<tr>
<th style="width:40px;">#</th>
<th>الخادم</th>
<th style="width:70px;">RTT</th>
<th>الاستعلام / الرد</th>
<th style="width:90px;">يكتب</th>
</tr>
</thead>
<tbody id="stepsBody">
</tbody>
</table>
</div>
</div>
الإجابة النهائية
<div class="result-section" id="answerSection">
<div class="section-header">
<h3>الإجابة النهائية</h3>
</div>
<div class="section-content" id="answerContent">
</div>
</div>
مؤقت TTL
<div class="result-section" id="ttlSection">
<div class="section-header">
<h3>مؤقت ذاكرة التخزين المؤقت TTL</h3>
</div>
<div class="section-content" id="ttlContent">
</div>
</div>
مفتش رسائل DNS
<div class="result-section" id="msgSection">
<div class="section-header">
<h3>مفتش رسائل DNS</h3>
</div>
<div class="section-content" id="msgContent">
</div>
</div>
المفاهيم
<div class="result-section" id="conceptsSection" style="display:block; margin-top:20px;">
<div class="section-header" style="cursor:default;">
<h3>مرجع مفاهيم DNS</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>يقوم كل خادم أسماء بإرجاع ملف<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 ثانية (ساعة واحدة)</li>
<li><code>MX</code>- 3600 ثانية نموذجية</li>
<li><code>NS</code>— 86400 ثانية (24 ساعة) نموذجيًا</li>
<li><code>TXT (SPF)</code>- 3600 ثانية نموذجية</li>
</ul>تسمح TTLs المنخفضة بإجراء تغييرات سريعة على السجلات؛ تعمل 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-container
==============================================================================================================
     جافا سكريبت
     ==============================================================================================================
<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>