/* ══════════════════════════════════════════════════════════════════
   XML GUID Transfer — styles  v1.4
   ══════════════════════════════════════════════════════════════════ */

.xgt-wrap { display:flex; flex-direction:column; gap:14px; }

/* ══ PHASE 1 — INPUT ════════════════════════════════════════════════ */

/* Input grid */
.xgt-grid {
    display:grid;
    grid-template-columns:1fr 40px 1fr;
    border:1.5px solid var(--border);
    border-radius:var(--r-lg,10px);
    overflow:hidden;
}
.xgt-pane { display:flex; flex-direction:column; }
.xgt-pane-head {
    display:flex; align-items:center; gap:8px;
    padding:9px 14px;
    background:var(--page-bg);
    border-bottom:1.5px solid var(--border);
    font-size:.78rem; font-weight:700; color:var(--txt-2);
}
.xgt-pane-head small { font-weight:500; color:var(--txt-3); }
.xgt-fname {
    margin-left:auto; font-size:.67rem; font-weight:600;
    color:var(--primary,#6366f1);
    max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xgt-clear-btn {
    width:22px; height:22px; border-radius:5px; border:none;
    background:transparent; color:var(--txt-3); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:.75rem;
    flex-shrink:0; transition:background .12s;
}
.xgt-clear-btn:hover { background:var(--border); color:var(--txt); }

/* Drop zone */
.xgt-drop-zone {
    flex:1; position:relative;
    min-height:320px;
}
.xgt-ta {
    width:100%; height:100%; min-height:320px;
    resize:none; border:none; outline:none;
    padding:10px 13px;
    font-family:'SFMono-Regular',Consolas,monospace;
    font-size:.74rem; line-height:1.65;
    color:var(--txt); background:var(--surface);
    box-sizing:border-box;
    transition:background .15s;
}
.xgt-ta::placeholder { color:var(--txt-3); font-style:italic; }
.xgt-drop-overlay {
    position:absolute; inset:0;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; pointer-events:none;
    background:rgba(99,102,241,.07);
    border:2px dashed #6366f1;
    border-radius:0;
    font-size:.9rem; font-weight:700; color:#6366f1;
}
.xgt-drop-overlay i { font-size:1.8rem; }
.xgt-drop-zone.drag-over .xgt-ta { background:rgba(99,102,241,.04); }
.xgt-drop-zone.drag-over .xgt-drop-overlay { display:flex; }

.xgt-mid {
    display:flex; align-items:center; justify-content:center;
    background:var(--page-bg);
    border-left:1.5px solid var(--border);
    border-right:1.5px solid var(--border);
    color:var(--txt-3);
}

/* Upload row */
.xgt-file-row {
    display:flex; align-items:center; gap:10px;
    padding:6px 13px 8px;
    background:var(--page-bg);
    border-top:1px solid var(--border);
}
.xgt-upload-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:6px;
    border:1.5px solid var(--primary,#6366f1);
    background:color-mix(in srgb, var(--brand) 7%, transparent); color:var(--primary,#6366f1);
    font-size:.72rem; font-weight:700; cursor:pointer;
    transition:background .12s;
}
.xgt-upload-btn:hover { background:color-mix(in srgb, var(--brand) 15%, transparent); }
.xgt-char-count { font-size:.67rem; color:var(--txt-3); margin-left:auto; }

/* Options bar */
.xgt-opts {
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    padding:9px 14px;
    background:var(--page-bg);
    border:1.5px solid var(--border);
    border-radius:var(--r-lg,10px);
    font-size:.77rem;
}
.xgt-opts-label { font-weight:700; color:var(--txt); white-space:nowrap; }
.xgt-opt-chk {
    display:flex; align-items:center; gap:5px;
    font-weight:600; color:var(--txt-2); cursor:pointer; white-space:nowrap;
}
.xgt-opt-chk input { accent-color:var(--primary,#6366f1); cursor:pointer; margin:0; }
.xgt-sep { width:1px; height:18px; background:var(--border); }
.xgt-thresh { display:flex; align-items:center; gap:6px; font-weight:600; color:var(--txt-2); }
.xgt-thresh i { color:var(--txt-3); font-size:.73rem; }
.xgt-thresh input[type=range] { width:88px; accent-color:var(--primary,#6366f1); }
.xgt-thresh #xgtThreshVal { font-weight:700; color:var(--primary,#6366f1); min-width:28px; }
.xgt-hint { font-size:.66rem; color:var(--txt-3); }

/* Inline status */
.xgt-inline-msg {
    padding:9px 14px; border-radius:8px;
    font-size:.78rem; font-weight:600; border-left:3px solid;
}
.xgt-msg-ok    { background:#dcfce7; color:#15803d; border-color:#22c55e; }
.xgt-msg-error { background:#fee2e2; color:#dc2626; border-color:#ef4444; }
.xgt-msg-info  { background:#dbeafe; color:#1d4ed8; border-color:#3b82f6; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .xgt-msg-ok    { background:rgba(22,163,74,.15);  color:#86efac; }
    :root:not([data-theme="light"]) .xgt-msg-error { background:rgba(220,38,38,.15);  color:#fca5a5; }
    :root:not([data-theme="light"]) .xgt-msg-info  { background:rgba(59,130,246,.15); color:#93c5fd; }
}
:root[data-theme="dark"] .xgt-msg-ok    { background:rgba(22,163,74,.15);  color:#86efac; }
:root[data-theme="dark"] .xgt-msg-error { background:rgba(220,38,38,.15);  color:#fca5a5; }
:root[data-theme="dark"] .xgt-msg-info  { background:rgba(59,130,246,.15); color:#93c5fd; }

/* Action bar */
.xgt-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.xgt-run-btn { min-width:150px; font-size:.82rem; }


/* ══ PHASE 2 — PROGRESS (matches existing tool style) ═══════════════ */
.xgt-phase-progress {
    padding:40px 20px; text-align:center;
    border:1.5px solid var(--border);
    border-radius:var(--r-lg,10px);
    background:var(--page-bg);
}
/* Ring */
.xgt-ring-wrap { position:relative; width:140px; height:140px; margin:0 auto 18px; }
.xgt-ring      { width:100%; height:100%; transform:rotate(-90deg); }
.xgt-ring-track { fill:none; stroke:var(--border,#e2e8f0); stroke-width:8; }
.xgt-ring-fill  { fill:none; stroke:#6366f1; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .25s ease; }
.xgt-ring-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--txt); }
.xgt-ring-count { font-size:2.1rem; line-height:1; }
.xgt-ring-pct   { font-size:1.1rem; opacity:.7; margin-left:2px; }
/* Step icons */
.xgt-proc-steps { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 20px; }
.xgt-proc-step  { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--txt-2); opacity:.4; transition:opacity .2s; }
.xgt-proc-icon  { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:2px solid var(--border); color:var(--txt-2); font-size:.9rem; transition:border-color .2s, color .2s, background .2s; }
.xgt-proc-line  { width:30px; height:2px; background:var(--border); flex-shrink:0; }
.xgt-proc-step.xgt-proc-active { opacity:1; }
.xgt-proc-step.xgt-proc-active .xgt-proc-icon { border-color:var(--brand, #6366f1); color:var(--brand, #6366f1); }
.xgt-proc-step.xgt-proc-done   { opacity:1; }
.xgt-proc-step.xgt-proc-done   .xgt-proc-icon { border-color:#16a34a; color:#fff; background:#16a34a; }
.xgt-proc-step.xgt-proc-error  { opacity:1; }
.xgt-proc-step.xgt-proc-error  .xgt-proc-icon { border-color:#ef4444; color:#fff; background:#ef4444; }
.xgt-proc-text { text-align:center; color:#6366f1; font-size:.92rem; font-weight:600; }


/* ══ PHASE 3 — RESULTS ══════════════════════════════════════════════ */
.xgt-result-topbar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.xgt-result-topbar .xgt-inline-msg { flex:1; margin:0; }
.xgt-back-btn { white-space:nowrap; }

.xgt-stats {
    display:flex; gap:8px; flex-wrap:wrap;
    padding:10px 14px;
    background:var(--page-bg);
    border:1.5px solid var(--border);
    border-radius:var(--r-lg,10px);
}
.xgt-stat {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.73rem; font-weight:700; padding:4px 12px; border-radius:20px;
}
.xgt-s-ok   { background:#dcfce7; color:#15803d; }
.xgt-s-warn { background:#fef9c3; color:#a16207; }
.xgt-s-miss { background:#fee2e2; color:#dc2626; }
.xgt-s-info { background:#dbeafe; color:#1d4ed8; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .xgt-s-ok   { background:rgba(22,163,74,.18);  color:#86efac; }
    :root:not([data-theme="light"]) .xgt-s-warn { background:rgba(202,138,4,.18);  color:#fde047; }
    :root:not([data-theme="light"]) .xgt-s-miss { background:rgba(220,38,38,.18);  color:#fca5a5; }
    :root:not([data-theme="light"]) .xgt-s-info { background:rgba(59,130,246,.18); color:#93c5fd; }
}
:root[data-theme="dark"] .xgt-s-ok   { background:rgba(22,163,74,.18);  color:#86efac; }
:root[data-theme="dark"] .xgt-s-warn { background:rgba(202,138,4,.18);  color:#fde047; }
:root[data-theme="dark"] .xgt-s-miss { background:rgba(220,38,38,.18);  color:#fca5a5; }
:root[data-theme="dark"] .xgt-s-info { background:rgba(59,130,246,.18); color:#93c5fd; }

/* Shared section head */
.xgt-sect-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 16px;
    background:var(--page-bg); border-bottom:1.5px solid var(--border);
    font-weight:700; font-size:.8rem; color:var(--txt); gap:8px; flex-wrap:wrap;
}
.xgt-click-hint {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.67rem; font-weight:500; color:var(--txt-3); margin-left:10px;
}
.xgt-success-note {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.67rem; font-weight:600; color:#22c55e; margin-left:10px;
}

/* Filter tabs */
.xgt-ftabs { display:flex; gap:4px; }
.xgt-ftab {
    padding:3px 10px; border-radius:20px; border:1.5px solid var(--border);
    background:transparent; color:var(--txt-2);
    font-size:.7rem; font-weight:600; cursor:pointer; transition:background .12s;
}
.xgt-ftab.active, .xgt-ftab:hover { background:var(--primary,#6366f1); color:#fff; border-color:var(--primary,#6366f1); }

/* Accordion — match details (collapsed by default) */
.xgt-accordion { border:1.5px solid var(--border); border-radius:var(--r-lg,10px); overflow:hidden; }
.xgt-accordion-head {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:9px 16px; gap:8px; flex-wrap:wrap;
    background:var(--page-bg); border:none; cursor:pointer;
    font-weight:700; font-size:.8rem; color:var(--txt);
    text-align:left; transition:background .12s;
}
.xgt-accordion-head:hover { background:var(--hover-bg,rgba(0,0,0,.04)); }
.xgt-acc-arrow { font-size:.72rem; color:var(--txt-3); transition:transform .25s; }
.xgt-acc-arrow.open { transform:rotate(180deg); }
.xgt-accordion-body { border-top:1.5px solid var(--border); }

/* Results table */
.xgt-result-wrap { border:1.5px solid var(--border); border-radius:var(--r-lg,10px); overflow:hidden; }
.xgt-table-scroll { overflow-x:auto; max-height:400px; overflow-y:auto; }
table.xgt-table {
    width:100%; border-collapse:collapse;
    font-size:.73rem; font-family:'SFMono-Regular',Consolas,monospace;
}
table.xgt-table th {
    position:sticky; top:0; z-index:1;
    padding:7px 12px; background:var(--page-bg);
    border-bottom:2px solid var(--border);
    font-family:system-ui,sans-serif; font-size:.68rem;
    font-weight:700; color:var(--txt-2); text-align:left; white-space:nowrap;
}
table.xgt-table td {
    padding:6px 12px; border-bottom:1px solid var(--border);
    vertical-align:middle; max-width:240px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
table.xgt-table tr:last-child td { border-bottom:none; }
table.xgt-table .xgt-clickable { cursor:pointer; }
table.xgt-table .xgt-clickable:hover td { background:rgba(99,102,241,.06); }
.xgt-row-ok    td:first-child { border-left:3px solid #22c55e; }
.xgt-row-fuzzy td:first-child { border-left:3px solid #f59e0b; }
.xgt-row-miss  td:first-child { border-left:3px solid #ef4444; }

.xgt-badge-ok    { background:#dcfce7; color:#15803d; padding:1px 7px; border-radius:20px; font-size:.66rem; font-weight:700; white-space:nowrap; }
.xgt-badge-fuzzy { background:#fef9c3; color:#a16207; padding:1px 7px; border-radius:20px; font-size:.66rem; font-weight:700; white-space:nowrap; }
.xgt-badge-miss  { background:#fee2e2; color:#dc2626; padding:1px 7px; border-radius:20px; font-size:.66rem; font-weight:700; white-space:nowrap; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .xgt-badge-ok    { background:rgba(22,163,74,.22);  color:#86efac; }
    :root:not([data-theme="light"]) .xgt-badge-fuzzy { background:rgba(202,138,4,.22);  color:#fde047; }
    :root:not([data-theme="light"]) .xgt-badge-miss  { background:rgba(220,38,38,.22);  color:#fca5a5; }
}
:root[data-theme="dark"] .xgt-badge-ok    { background:rgba(22,163,74,.22);  color:#86efac; }
:root[data-theme="dark"] .xgt-badge-fuzzy { background:rgba(202,138,4,.22);  color:#fde047; }
:root[data-theme="dark"] .xgt-badge-miss  { background:rgba(220,38,38,.22);  color:#fca5a5; }

.xgt-guid      { font-size:.67rem; color:var(--txt-3); }
.xgt-guid.filled { color:var(--primary,#6366f1); }
.xgt-sim       { font-size:.68rem; font-weight:700; }
.xgt-sim.hi    { color:#15803d; }
.xgt-sim.md    { color:#a16207; }
.xgt-sim.lo    { color:#dc2626; }
.xgt-para-cnt  { background:var(--border); color:var(--txt-2); font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:20px; }

/* Output */
.xgt-output-wrap { border:1.5px solid var(--border); border-radius:var(--r-lg,10px); overflow:hidden; }
.xgt-output-ta {
    display:block; width:100%; min-height:180px; max-height:380px;
    border:none; outline:none; resize:vertical;
    padding:12px 14px;
    font-family:'SFMono-Regular',Consolas,monospace;
    font-size:.73rem; line-height:1.65;
    color:var(--txt); background:var(--surface);
    overflow:auto; box-sizing:border-box;
}
.xgt-output-ta::placeholder { color:var(--txt-3); font-style:italic; }


/* ══ DETAIL MODAL ════════════════════════════════════════════════════ */
.xgt-modal-overlay {
    position:fixed; inset:0; z-index:9000;
    background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center;
    padding:24px; backdrop-filter:blur(2px);
}
.xgt-modal {
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-lg,12px);
    width:100%; max-width:680px; max-height:88vh;
    display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.xgt-modal-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 18px; background:var(--page-bg);
    border-bottom:1.5px solid var(--border);
    font-size:.82rem; font-weight:700; color:var(--txt); flex-shrink:0;
}
.xgt-modal-close {
    width:28px; height:28px; border-radius:6px;
    border:none; background:transparent; color:var(--txt-3);
    font-size:.9rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .12s;
}
.xgt-modal-close:hover { background:var(--border); color:var(--txt); }
.xgt-modal-body { padding:18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }

.xgt-d-header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.xgt-d-badge  { padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.xgt-d-sim    { font-size:.8rem; color:var(--txt-2); }
.xgt-d-sim strong { color:var(--primary,#6366f1); }
.xgt-d-section { border:1.5px solid var(--border); border-radius:8px; overflow:hidden; }
.xgt-d-label {
    padding:6px 12px; background:var(--page-bg); border-bottom:1px solid var(--border);
    font-size:.68rem; font-weight:700; color:var(--txt-3);
    text-transform:uppercase; letter-spacing:.05em;
}
.xgt-d-title { padding:10px 12px; font-size:.82rem; font-weight:600; color:var(--txt); border-bottom:1px solid var(--border); }
.xgt-d-meta  { padding:7px 12px; font-size:.71rem; color:var(--txt-2); font-family:'SFMono-Regular',Consolas,monospace; }
.xgt-d-table { width:100%; border-collapse:collapse; font-size:.73rem; font-family:'SFMono-Regular',Consolas,monospace; }
.xgt-d-table th { padding:6px 12px; background:var(--page-bg); border-bottom:1px solid var(--border); font-family:system-ui,sans-serif; font-size:.67rem; font-weight:700; color:var(--txt-3); text-align:left; }
.xgt-d-table td { padding:7px 12px; border-bottom:1px solid var(--border); }
.xgt-d-table tr:last-child td { border-bottom:none; }
.xgt-d-old  { color:var(--txt-3); }
.xgt-d-arr  { color:var(--txt-3); text-align:center; width:24px; }
.xgt-d-new  { color:var(--primary,#6366f1); font-weight:600; }
.xgt-d-changed .xgt-d-new { color:#22c55e; }
.xgt-d-miss { padding:16px 18px; color:var(--txt-2); font-size:.8rem; display:flex; align-items:center; gap:8px; }
.xgt-d-miss i { color:#ef4444; font-size:1rem; }

/* ══ MOBILE RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* Input grid: stack vertically */
    .xgt-grid {
        grid-template-columns: 1fr !important;
    }
    .xgt-mid {
        border-left: none !important;
        border-right: none !important;
        border-top: 1.5px solid var(--border);
        border-bottom: 1.5px solid var(--border);
        padding: 8px 0;
        justify-content: center;
    }
    /* Rotate arrow to point down */
    .xgt-mid i { transform: rotate(90deg); }

    /* Options bar: stack */
    .xgt-opts { flex-direction: column; align-items: flex-start; gap: 8px; }
    .xgt-sep  { width: 100%; height: 1px; }
    .xgt-thresh { flex-wrap: wrap; }
    .xgt-thresh input[type=range] { width: 100%; }

    /* Progress steps: shrink */
    .xgt-proc-steps { gap: 3px; }
    .xgt-proc-icon  { width: 30px !important; height: 30px !important; font-size: .75rem !important; }
    .xgt-proc-line  { width: 16px !important; }
    .xgt-proc-step  { font-size: .62rem !important; }

    /* Table: allow horizontal scroll */
    .xgt-table-scroll { max-height: 300px; }
    table.xgt-table td { max-width: 140px; }

    /* Result topbar: stack */
    .xgt-result-topbar { flex-direction: column; align-items: stretch; }
    .xgt-result-topbar .xgt-inline-msg { font-size: .73rem; }

    /* Accordion head: wrap */
    .xgt-accordion-head { flex-wrap: wrap; gap: 8px; }

    /* Modal: full screen nearly */
    .xgt-modal-overlay { padding: 12px; }
    .xgt-modal { max-height: 92vh; }

    /* Output textarea: shorter */
    .xgt-output-ta { min-height: 130px; max-height: 260px; }
}

@media (max-width: 480px) {
    .xgt-ta { min-height: 200px; }
    .xgt-pane-head { font-size: .73rem; }
    .xgt-upload-btn { font-size: .68rem; padding: 4px 10px; }
    .xgt-ftabs { flex-wrap: wrap; gap: 3px; }
    .xgt-ftab  { font-size: .65rem; padding: 2px 7px; }
    .xgt-stats { gap: 5px; }
    .xgt-stat  { font-size: .68rem; padding: 3px 8px; }
    .xgt-d-table { font-size: .68rem; }
    .xgt-d-table td, .xgt-d-table th { padding: 5px 8px; }
}