:root{--bg: #f4f6fa;--card: #ffffff;--ink: #16202f;--muted: #6b7a90;--line: #e2e8f2;--brand: #2a6df4;--brand-dark: #1e56c8;--ok: #15866b;--warn: #c2410c;--warn-bg: #fff4ed;--info: #6d28d9;--pack: #b45309;--radius: 12px;font-family:Segoe UI,Sarabun,Noto Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px}.app{max-width:1240px;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:16px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(135deg,#1f3a68,#2a6df4);color:#fff;padding:20px 24px;border-radius:var(--radius)}.topbar h1{margin:0 0 4px;font-size:20px}.topbar p{margin:0;opacity:.85;font-size:13px}.ratio label{font-size:12px;opacity:.9}.ratio__input{display:flex;align-items:center;gap:6px;background:#ffffff26;border-radius:8px;padding:6px 10px;margin-top:4px}.ratio__input input{width:60px;background:transparent;border:none;color:#fff;font-size:20px;font-weight:700;text-align:right}.ratio__input input:focus{outline:none}.columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.columns>*{min-width:0}@media (max-width: 900px){.columns{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.panel--erp{border-top:3px solid #0e9f6e}.panel--platform{border-top:3px solid var(--brand)}.panel--pack{border-top:3px solid var(--pack)}.panel__head h2{margin:0 0 4px;font-size:15px}.panel__head p{margin:0 0 14px;color:var(--muted);font-size:12.5px}.panel__head--row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.dropzone{border:2px dashed #c4d0e3;border-radius:var(--radius);padding:32px 16px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;transition:.15s;background:#fbfcfe}.dropzone:hover,.dropzone--active{border-color:var(--brand);background:#eef4ff}.dropzone__icon{font-size:26px;color:var(--brand)}.filebox{display:flex;flex-direction:column;gap:12px}.filebox__row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f2f6fd;border-radius:8px;padding:8px 12px}.filebox__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}.field span{font-weight:600}.sample{font-style:normal;font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input,select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}input:focus,select:focus{outline:2px solid #bcd2ff;border-color:var(--brand)}.btn{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}.btn:hover:not(:disabled){background:#f1f5fc}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}.btn--primary:hover:not(:disabled){background:var(--brand-dark)}.btn--ghost{background:transparent}.btn--link{border:none;background:none;color:var(--brand);padding:0 4px;font-size:12px}.full{width:100%;margin-top:8px}.maprow{display:grid;grid-template-columns:1fr auto 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:10px}.maprow--pack{grid-template-columns:1.4fr auto 90px auto 1.2fr auto}@media (max-width: 720px){.maprow,.maprow--pack{grid-template-columns:1fr}.maprow .arrow,.maprow--pack .arrow{display:none}}.inline-num{width:90px;text-align:right}.formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#fffbf2;border:1px solid #f5e2bf;border-radius:8px;padding:10px 12px;margin-bottom:12px}.formula .checkbox{color:var(--ink);font-weight:600}.formula__code{font-family:Cascadia Mono,Consolas,monospace;font-size:12px;background:#fff;border:1px solid #f0e3cc;border-radius:6px;padding:3px 8px;color:#7c4a03}.formula__eg{font-size:12px;color:var(--muted)}.formula__eg strong{color:var(--pack)}.arrow{color:var(--muted)}.maptools{display:flex;gap:8px;margin-bottom:10px}.search{flex:1}.tablewrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:8px}.tablewrap--short{max-height:260px}table{width:100%;border-collapse:collapse;font-size:12.5px}th,td{padding:7px 10px;text-align:left;border-bottom:1px solid #eef2f8}thead th{position:sticky;top:0;background:#f7f9fd;z-index:1;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}tbody tr:hover{background:#fafcff}.row--warn{background:var(--warn-bg)}.num{text-align:right;font-variant-numeric:tabular-nums}.strong{font-weight:700}.mono{font-family:Cascadia Mono,Consolas,monospace}.muted{color:var(--muted)}.small{font-size:11px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.chip{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer}.chip b{margin-left:4px}.chip--on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip--warn b{color:var(--warn)}.chip--warn.chip--on b,.chip--ok.chip--on b,.chip--info.chip--on b,.chip--pack.chip--on b{color:#fff}.chip--ok b{color:var(--ok)}.chip--info b{color:var(--info)}.chip--pack b{color:var(--pack)}.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#eef2f8;color:var(--muted)}.tag--exact{background:#e7f6f0;color:var(--ok)}.tag--normalized{background:#e8f0ff;color:var(--brand-dark)}.tag--mapped{background:#f2ebff;color:var(--info)}.tag--not-found{background:#ffe9dd;color:var(--warn)}.tag--pack{background:#fff3d6;color:#92590b;margin-left:4px}.unit{font-weight:500;font-size:11px;color:var(--muted)}.alert{background:#eef4ff;border:1px solid #d4e2fb;color:#1e3a6d;border-radius:8px;padding:10px 12px;font-size:12.5px;margin-top:10px}.alert--error{background:#fff0ee;border-color:#ffd4cc;color:#a8321c}.alert--warn{background:#fffaf0;border-color:#f6e2bd;color:#7c4a03}.actionbar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;position:sticky;top:8px;z-index:5}.actionbar__right{display:flex;gap:8px}.actionbar__opts{display:flex;flex-direction:column;gap:6px;min-width:0}.checkbox{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.zerotext{width:120px;padding:3px 8px;font-size:12px}.zerotext:disabled{background:#f4f6fa;color:#a9b4c4}.tag--zero{background:#ffe9dd;color:var(--warn);font-weight:700;font-family:Cascadia Mono,Consolas,monospace}.checkbox input{width:16px;height:16px}.empty{padding:24px;text-align:center;color:var(--muted)}.guide h2{margin:0 0 10px;font-size:15px}.guide h3{margin:18px 0 8px;font-size:13px}.guide ol,.guide ul{margin:0;padding-left:20px;color:#33405a;line-height:1.9}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:0 8px 24px #0003;z-index:50}