:root{--green:#17624f;--green-dark:#0f4a3b;--soft:#eef5f0;--line:#e0e7e2;--ink:#1c2622;--muted:#6b7b74;--focus:#2f8f6f}
*{box-sizing:border-box}
body{margin:0;background:#f3f6f3;color:var(--ink);font:14px/1.5 -apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
main{width:100%;padding:20px 24px 28px}
h1{font:700 30px/1.2 Georgia,serif;color:var(--green-dark);margin:0 0 4px;letter-spacing:-.01em}
h2{font:700 18px/1.3 Georgia,serif;color:var(--green-dark);margin:0 0 6px}
.hint{color:var(--muted);margin:0 0 4px;font-size:13px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,40,30,.04)}
.toolbar{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:14px 0 10px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
input[type=file]{font-size:13px}
.toolbar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--ink)}
button{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .05s ease}
button:hover:not(:disabled){background:var(--soft);border-color:#c7d6cd}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
button#load,button#test{background:var(--green);border-color:var(--green);color:#fff}
button#load:hover:not(:disabled),button#test:hover:not(:disabled){background:var(--green-dark);border-color:var(--green-dark)}
.status{font-size:13px;color:var(--muted);padding-top:2px;transition:color .2s ease}
.status.ok{color:var(--green-dark)}
.status.error{color:#b3261e}
.din{font-weight:700;color:var(--green-dark);font-size:14px}
a.din{text-decoration:none;cursor:pointer}
a.din:hover{text-decoration:underline}
.badge{display:inline-block;font-size:11px;background:var(--soft);color:var(--green-dark);padding:3px 8px;border-radius:999px;margin-top:4px}
th:nth-last-child(6),td:nth-last-child(6){width:235px}th:nth-last-child(5),td:nth-last-child(5){width:110px}th:nth-last-child(4),td:nth-last-child(4){width:180px}th:nth-last-child(3),td:nth-last-child(3){width:160px}th:nth-last-child(2),td:nth-last-child(2){width:115px}th:last-child,td:last-child{width:150px}
.tablewrap{position:relative;overflow:auto;max-height:calc(100vh - 260px);margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1440px;background:#fff;table-layout:fixed}
th,td{padding:10px 12px;text-align:left;vertical-align:middle;overflow:hidden}
td{border-bottom:1px solid #eef1ee}
tr:last-child td{border-bottom:none}
th{background:var(--soft);color:#4b5c53;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line)}
th .colhead{display:flex;align-items:center;gap:6px}
th .colhead .sortbtn{cursor:pointer;border:none;background:none;padding:0;color:#4b5c53;font-size:11px;line-height:1}
th .colhead .sortbtn:hover{color:var(--green-dark)}
th select.colfilter{width:100%;margin-top:6px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-size:11px;font-weight:400;text-transform:none;letter-spacing:normal;background:#fff;color:var(--ink)}
tbody tr{transition:background-color .12s ease}
tbody tr:hover{background:#fafcfa}
td select{width:100%;min-width:0;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:13px;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}
td select:hover{border-color:#c7d6cd}
td select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(47,143,111,.15)}
.fieldcell{position:relative;display:flex;align-items:stretch;width:100%}
.fieldcell .fieldvalue{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px 0 0 7px;background:#fff;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;transition:border-color .15s ease,box-shadow .15s ease}
.fieldcell .fieldvalue.placeholder{color:#9aa5a0}
.fieldcell .fieldvalue:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(47,143,111,.15)}
.fieldcell .caret{flex:none;width:28px;border:1px solid var(--line);border-left:none;border-radius:0 7px 7px 0;background:var(--soft);color:#4b5c53;cursor:pointer;font-size:11px;padding:0}
.fieldcell .caret:hover{background:#e2ecE4}
.fieldcell select.realselect{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.fieldcell.open select.realselect{pointer-events:auto}
#vtbody tr{animation:rowfade .15s ease}
@keyframes rowfade{from{opacity:.4}to{opacity:1}}
.pager{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pager button{padding:7px 12px}
.pager .pageinfo{font-size:13px;color:var(--muted)}
.pager input.pagejump{width:60px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;text-align:center;font-size:13px}
.columns-menu{position:relative;display:inline-block}
.columns-panel{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(20,40,30,.12);padding:10px;min-width:220px;max-height:320px;overflow-y:auto;z-index:10}
.columns-panel label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;text-transform:none;letter-spacing:normal;padding:5px 4px;cursor:pointer;color:var(--ink)}
.columns-panel label:hover{background:var(--soft);border-radius:6px}
.columns-panel .columns-actions{display:flex;gap:8px;padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}
.columns-panel .columns-actions button{padding:5px 10px;font-size:12px}
.inline-progress{display:flex;flex-direction:column;gap:4px;min-width:160px}
.inline-progress #inlineProgressLabel{font-size:12px;font-weight:700;color:var(--ink)}
.inline-progressbar{height:8px;background:var(--soft);border-radius:999px;overflow:hidden}
.inline-progressfill{height:100%;background:var(--focus);border-radius:999px;transition:width .3s ease}