:root{
  --p:#5ED4FF;--p2:rgba(94,212,255,.15);--glow:rgba(94,212,255,.4);
  --gold:#FFDB3C;--grn:#39FF8C;--red:#FF4F4F;--pur:#C084FC;--amb:#FFA94D;
  --txt:#E8F0FF;--dim:#8FA0B5;--dim2:rgba(139,160,181,.45);
  --bord:rgba(94,212,255,.14);--bord2:rgba(255,255,255,.055);
  --glass:rgba(5,12,26,.82);--glass2:rgba(2,7,16,.92);
  --r:10px;--r2:6px;--t:.16s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:radial-gradient(1200px 700px at 78% -8%,rgba(192,132,252,.16),transparent 60%),radial-gradient(1000px 700px at 8% 108%,rgba(94,212,255,.14),transparent 55%),linear-gradient(160deg,#070d1c,#04070f 60%,#03060e)}
body{width:100%;height:100%;overflow:hidden;color:var(--txt);font-family:'Sora',sans-serif;display:flex;flex-direction:column}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(94,212,255,.22);border-radius:6px;border:1px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(94,212,255,.55);background-clip:padding-box}
button{border:none;outline:none;cursor:pointer;font-family:inherit;transition:var(--t)}
input{font-family:inherit;outline:none;transition:var(--t)}

/* ── TOP BAR ── */
#bar{height:56px;flex-shrink:0;display:flex;align-items:center;padding:0 18px;gap:14px;background:rgba(2,6,16,.9);border-bottom:1px solid var(--bord);backdrop-filter:blur(20px);z-index:100}
#logo{display:flex;align-items:center;gap:11px}
#logo-fb{width:36px;height:36px;background:linear-gradient(135deg,#C9A6FF,#7B3FE0);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;font-weight:900;box-shadow:0 4px 14px rgba(123,63,224,.35)}
#logo-name{font-size:15px;font-weight:800;letter-spacing:.5px;color:var(--pur)}
#logo-sub{font-size:9px;color:var(--dim);margin-top:2px;letter-spacing:.3px}
.demo-tag{font-size:8px;font-weight:800;letter-spacing:1px;color:var(--gold);background:rgba(255,219,60,.1);border:1px solid rgba(255,219,60,.25);border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.vd{width:1px;height:24px;background:var(--bord);flex-shrink:0}
#core-meta{flex:1;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);overflow:hidden}
.stat{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.25);border:1px solid var(--bord2);border-radius:7px;padding:4px 9px;white-space:nowrap}
.stat b{color:var(--p);font-weight:800;font-family:'JetBrains Mono',monospace}
.stat.e b{color:var(--gold)}
#acts{display:flex;gap:7px;align-items:center;flex-shrink:0}
.ab{height:32px;padding:0 14px;background:rgba(94,212,255,.08);border:1px solid var(--bord);color:var(--dim);border-radius:var(--r2);font-size:11px;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.ab:hover{background:rgba(94,212,255,.15);color:var(--p);border-color:rgba(94,212,255,.3)}
.ab.x{color:var(--pur);border-color:rgba(192,132,252,.28)}
.ab.x:hover{background:rgba(192,132,252,.12);color:var(--pur);border-color:var(--pur)}
.ab.g{color:var(--gold);border-color:rgba(255,219,60,.25)}
.ab.g:hover{background:rgba(255,219,60,.1);border-color:var(--gold)}
.ab:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.4)}
.ab:disabled:hover{background:rgba(94,212,255,.08);color:var(--dim);border-color:var(--bord)}

/* ── WORKSPACE ── */
#ws{flex:1;overflow:hidden;display:flex;padding:10px;gap:10px}
.panel{background:var(--glass);backdrop-filter:blur(22px) saturate(1.1);border:1px solid var(--bord2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.ph{height:40px;flex-shrink:0;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid var(--bord2);background:rgba(0,0,0,.14)}
.pt{flex:1;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--p)}
.pt.x{color:var(--pur)}

/* ── LEFT: PICKER ── */
#picker{width:430px;flex-shrink:0}
.tools{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--bord2);flex-shrink:0}
.srch{flex:1;height:36px;background:rgba(0,0,0,.45);border:1px solid var(--bord);border-radius:8px;color:var(--txt);font-size:12px;padding:0 12px}
.srch:focus{border-color:var(--pur);box-shadow:0 0 0 2px rgba(192,132,252,.18)}
.allbtn{height:36px;padding:0 13px;border-radius:8px;background:rgba(94,212,255,.08);border:1px solid var(--bord);color:var(--dim);font-size:11px;font-weight:700;white-space:nowrap}
.allbtn:hover{color:var(--p);border-color:var(--p)}
.allbtn.on{color:var(--pur);border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.1)}
.cnt{font-size:10px;color:var(--dim);font-weight:700;padding:5px 14px;border-bottom:1px solid var(--bord2);flex-shrink:0;display:flex;justify-content:space-between}
.cnt b{color:var(--p)}
#list{flex:1;overflow-y:auto;padding:6px}
.row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.12s}
.row:hover{background:rgba(94,212,255,.06);border-color:var(--bord2)}
.row.on{background:rgba(192,132,252,.13);border-color:rgba(192,132,252,.4)}
.ck{width:17px;height:17px;flex-shrink:0;border-radius:4px;border:1.5px solid var(--bord);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:transparent}
.row.on .ck{background:var(--pur);border-color:var(--pur);color:#0a0a14}
.nm{flex:1;font-size:12px;font-weight:700;color:var(--txt);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ee{font-size:10px;font-weight:700;color:var(--dim);background:rgba(94,212,255,.1);border-radius:5px;padding:2px 7px;white-space:nowrap}
.empty{padding:42px 20px;text-align:center;color:var(--dim);font-size:12px;line-height:1.9}
.empty .big{font-size:40px;margin-bottom:6px}

/* ── RIGHT: OUTPUT ── */
#out{flex:1;min-width:0}
.out-acts{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--bord2);flex-shrink:0;align-items:center}
.out-acts .sp{flex:1}
#sel-sum{padding:10px 14px;font-size:11px;color:var(--dim);line-height:1.8;border-bottom:1px solid var(--bord2);flex-shrink:0;max-height:120px;overflow-y:auto}
#sel-sum b{color:var(--p);font-weight:800}
.dep{display:inline-block;margin-right:10px}
.warn{color:var(--amb)}
#results{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.rc{background:rgba(0,0,0,.24);border:1px solid var(--bord2);border-radius:9px;overflow:hidden}
.rc-hd{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer}
.rc-hd:hover{background:rgba(94,212,255,.04)}
.rc-ico{font-size:14px;color:var(--pur)}
.rc-nm{flex:1;font-size:12px;font-weight:800;color:var(--txt);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-kb{font-size:9px;color:var(--dim2);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.rc-dl{width:26px;height:26px;flex-shrink:0;border-radius:6px;background:rgba(255,219,60,.08);border:1px solid rgba(255,219,60,.2);color:var(--gold);font-size:13px;display:flex;align-items:center;justify-content:center}
.rc-dl:hover{background:rgba(255,219,60,.18)}
.rc-cp{width:26px;height:26px;flex-shrink:0;border-radius:6px;background:rgba(94,212,255,.08);border:1px solid var(--bord);color:var(--dim);font-size:12px;display:flex;align-items:center;justify-content:center}
.rc-cp:hover{background:rgba(94,212,255,.16);color:var(--p)}
.rc-arr{font-size:11px;color:var(--dim2);transition:.15s;flex-shrink:0}
.rc.open .rc-arr{transform:rotate(90deg)}
.rc-meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.chip{font-size:9px;font-weight:700;color:var(--dim);background:rgba(94,212,255,.08);border:1px solid var(--bord2);border-radius:20px;padding:3px 9px}
.chip b{color:var(--p)}
.rc-xml{display:none;border-top:1px solid var(--bord2)}
.rc.open .rc-xml{display:block}
.rc-xml pre{margin:0;max-height:280px;overflow:auto;background:rgba(1,6,14,.92);color:#5AE8B8;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.75;padding:11px 13px;white-space:pre}
#out-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--dim);font-size:12px;opacity:.7;text-align:center;line-height:2}
#out-empty .big{font-size:48px}

/* ── NOTIF + DROP ── */
.nt{position:fixed;top:66px;right:14px;min-width:210px;padding:10px 14px;background:rgba(3,9,20,.97);color:var(--p);border:1px solid rgba(94,212,255,.22);border-radius:9px;box-shadow:0 4px 20px rgba(94,212,255,.12);font-size:11px;font-weight:700;z-index:9999;animation:ni .2s ease;pointer-events:none}
.nt.out{animation:no .25s ease forwards}
@keyframes ni{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes no{to{opacity:0;transform:translateX(110%)}}
#fi{display:none}
body.drag::after{content:"วาง core.ypt.xml ที่นี่";position:fixed;inset:0;z-index:9998;background:rgba(192,132,252,.05);border:2px dashed var(--pur);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--pur);letter-spacing:1px}
#busy{position:fixed;inset:0;z-index:9997;background:rgba(2,6,16,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--p);font-size:13px;font-weight:700}
#busy.on{display:flex}
.spin{width:38px;height:38px;border:3px solid rgba(94,212,255,.2);border-top-color:var(--p);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

#sb{height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:9px;background:rgba(1,5,14,.95);border-top:1px solid var(--bord2);color:var(--dim)}
#sd{width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 5px var(--grn);animation:bl 2s infinite;flex-shrink:0;margin-right:6px}
@keyframes bl{0%,100%{opacity:.4}50%{opacity:1}}

/* ── MODE NAV ── */
#modenav{height:40px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 14px;background:rgba(2,6,16,.7);border-bottom:1px solid var(--bord2)}
.mtab{height:28px;padding:0 12px;background:transparent;border:1px solid transparent;color:var(--dim);border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.2px}
.mtab:hover{color:var(--p);background:rgba(94,212,255,.06)}
.mtab.on{color:var(--pur);background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.35)}

/* ── MODE PANES ── */
.modepane{display:none;flex:1;gap:10px;min-height:0}
.modepane.on{display:flex}
.miss{font-size:9px;font-weight:800;color:var(--amb);background:rgba(255,169,77,.12);border:1px solid rgba(255,169,77,.3);border-radius:5px;padding:2px 6px;white-space:nowrap;margin-right:4px;flex-shrink:0}
.side-block{padding:12px 14px;display:flex;flex-direction:column;gap:10px;font-size:11px}
.side-lbl{color:var(--dim);margin-bottom:4px}
.side-val{font-family:'JetBrains Mono',monospace;font-size:11px}
.hsep{width:100%;height:1px;background:var(--bord2)}
#dup-types{padding:8px;display:flex;flex-direction:column;gap:6px}

/* ── MODAL ── */
.modal-wrap{position:fixed;inset:0;z-index:9996;background:rgba(2,6,16,.7);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center}
.modal-wrap.on{display:flex}
.modal{width:620px;max-height:76vh;display:flex;flex-direction:column;background:var(--glass2);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-hd{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--bord2);font-size:12px;font-weight:800;color:var(--pur)}
.modal-hd button{background:none;color:var(--dim);font-size:16px;width:26px;height:26px;border-radius:6px}
.modal-hd button:hover{color:var(--red);background:rgba(255,79,79,.1)}
.modal-body{flex:1;overflow-y:auto;padding:12px 14px;font-size:11px;line-height:1.9}
#fiDiffB,#fiMerge,#fiVal{display:none}