src/index.css

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Serif+Display&family=DM+Mono:wght@400;500&display=swap');

:root {
  --g: #1a6b2f; --gd: #145a24; --gxd: #0e3d1a;
  --or: #b86e00; --red: #c0392b; --blue: #1565a0; --teal: #1a7a6b;
  --bg: #f5f0e8; --bgs: #faf7f2; --bgm: #e8e0d0;
  --tx: #2c2c2c; --mt: #6b6b6b;
  --bl: rgba(26,107,47,.13); --bm: rgba(26,107,47,.24);
  --fn: "Outfit", sans-serif; --fh: "DM Serif Display", serif; --fm: "DM Mono", monospace;
  --hg: linear-gradient(135deg,#081a08 0%,#16500d 55%,#081a08 100%);
  --r4: 4px; --r6: 6px; --r8: 8px; --r10: 10px;
  --sh: 0 2px 8px rgba(0,0,0,.07); --shh: 0 2px 14px rgba(0,0,0,.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; overflow: hidden; font-family: var(--fn); font-size: 13px; color: var(--tx); background: var(--bg); }

/* ── Page layout ── */
.page { display: flex; height: 100vh; width: 100%; flex-direction: column; overflow: hidden; }

/* ── Header ── */
.hdr { background: var(--hg); height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; flex-shrink: 0; box-shadow: var(--shh); z-index: 200; }
.hdr-brand { display: flex; align-items: center; gap: 9px; }
.hdr-logo { width: 26px; height: 26px; background: rgba(255,255,255,.13); border-radius: 5px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); }
.hdr-logo svg { width: 14px; height: 14px; }
.hdr-title { font-family: var(--fh); font-size: 16px; color: #fff; letter-spacing: .2px; }
.hdr-sub { font-size: 10px; color: rgba(255,255,255,.5); margin-left: 3px; font-family: var(--fm); }
.hdr-badge { font-size: 10px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); padding: 2px 9px; border-radius: 20px; font-family: var(--fm); border: 1px solid rgba(255,255,255,.13); }

/* ── Stepper ── */
.stepper { height: 34px; background: #fff; border-bottom: 1px solid var(--bl); display: flex; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; }
.stp { display: flex; align-items: center; gap: 5px; padding: 0 12px; height: 34px; position: relative; }
.stp-n { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0; font-family: var(--fm); }
.stp.done .stp-n { background: var(--g); color: #fff; }
.stp.active .stp-n { background: var(--g); color: #fff; box-shadow: 0 0 0 3px rgba(26,107,47,.16); }
.stp.pend .stp-n { background: var(--bgm); color: var(--mt); }
.stp-l { font-size: 10.5px; font-weight: 600; color: var(--mt); }
.stp.active .stp-l { color: var(--g); }
.stp.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--or); }
.stp.clickable { cursor: pointer; }
.stp.clickable .stp-l { text-decoration: underline dotted; }
.stp-line { width: 28px; height: 1px; background: var(--bm); }

/* ── Footer nav ── */
.nav-foot { height: 44px; background: #fff; border-top: 1px solid var(--bl); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; box-shadow: 0 -1px 5px rgba(0,0,0,.04); }
.nav-foot-info { font-size: 11px; color: var(--mt); }
.nav-foot-info strong { color: var(--g); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; border-radius: var(--r6); font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all .13s; font-family: var(--fn); }
.btn-pri { background: var(--g); color: #fff; }
.btn-pri:hover:not(:disabled) { background: var(--gd); }
.btn-pri:disabled { background: var(--bgm); color: var(--mt); cursor: not-allowed; }
.btn-sec { background: #fff; color: var(--g); border: 1.5px solid var(--bm); }
.btn-sec:hover { background: var(--bgs); }
.btn-ghost { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.22); font-size: 11.5px; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-or { background: var(--or); color: #fff; }
.btn-or:hover { background: #9a5d00; }
.btn-sm { padding: 3px 9px; font-size: 11px; }
.btn-danger { color: var(--red); border-color: rgba(192,57,43,.3); }

/* ── Cards ── */
.card { background: #fff; border: 1px solid var(--bl); border-radius: var(--r10); box-shadow: var(--sh); }
.card-hd { padding: 8px 12px; border-bottom: 1px solid var(--bl); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.card-hd-t { font-size: 11.5px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Tags ── */
.tag { display: inline-block; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 20px; }
.tag-g { background: rgba(26,107,47,.09); color: var(--g); }
.tag-r { background: rgba(192,57,43,.09); color: var(--red); }
.tag-gy { background: var(--bgm); color: var(--mt); }
.tag-or { background: rgba(184,110,0,.09); color: var(--or); }

/* ── Inputs ── */
.inp { padding: 4px 8px; border: 1px solid var(--bm); border-radius: var(--r6); font-size: 11.5px; font-family: var(--fn); color: var(--tx); background: #fff; outline: none; transition: border-color .13s; }
.inp:focus { border-color: var(--g); box-shadow: 0 0 0 2px rgba(26,107,47,.1); }
.inp::placeholder { color: #bbb; }
.lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); font-family: var(--fm); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--bm); border-radius: 3px; }

/* ── Tooltip ── */
.tt { position: fixed; background: #1a1a1a; color: #fff; font-size: 10.5px; padding: 4px 8px; border-radius: var(--r4); pointer-events: none; z-index: 9999; max-width: 280px; line-height: 1.5; }
.tt-dict { padding: 8px 10px; max-width: 300px; min-width: 180px; }
.tt-dict-row { display: flex; gap: 6px; line-height: 1.6; font-size: 10px; }
.tt-dict-key { color: rgba(255,255,255,.45); flex-shrink: 0; font-family: var(--fm); font-size: 9px; min-width: 80px; }
.tt-dict-val { color: #fff; word-break: break-word; }

/* ── Loader ── */
.loader-ov { position: fixed; inset: 0; background: rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(2px); }
.loader-card { background: #fff; border-radius: var(--r10); padding: 20px 28px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.14); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--bgm); border-top-color: var(--g); border-radius: 50%; animation: spin .6s linear infinite; margin: 0 auto 9px; }
@keyframes spin { to { transform: rotate(360deg); } }
.prog-bar { height: 4px; background: var(--bgm); border-radius: 3px; overflow: hidden; margin: 5px 0 3px; width: 190px; }
.prog-fill { height: 4px; background: var(--g); border-radius: 3px; transition: width .14s; }

/* ── Toast ── */
.toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); font-size: 11.5px; padding: 7px 16px; border-radius: 6px; z-index: 9999; pointer-events: none; white-space: nowrap; animation: toastIn .2s ease; }
.toast-warn { background: #1a1a1a; color: #fff; }
.toast-ok { background: var(--g); color: #fff; }
@keyframes toastIn { from { opacity: 0; } to { opacity: 1; } }

/* ══ PAGE 1 ══ */
#p1 .body { flex: 1; display: grid; grid-template-columns: 290px 1fr; gap: 10px; padding: 10px; overflow: hidden; min-height: 0; }
.upload-panel { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.up-item { padding: 9px 11px; }
.dz { border: 1.5px dashed var(--bm); border-radius: var(--r8); padding: 10px 8px; text-align: center; cursor: pointer; transition: all .13s; background: var(--bgs); }
.dz:hover, .dz.drag { border-color: var(--g); background: rgba(26,107,47,.03); }
.dz-ico { width: 24px; height: 24px; border-radius: 50%; background: rgba(26,107,47,.07); margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; }
.dz-ico svg { width: 13px; height: 13px; color: var(--g); }
.dz-main { font-size: 11px; font-weight: 600; color: var(--tx); }
.dz-sub { font-size: 10px; color: var(--mt); margin-top: 1px; }
.file-chip { display: flex; align-items: center; gap: 6px; background: rgba(26,107,47,.06); border: 1px solid rgba(26,107,47,.14); border-radius: var(--r6); padding: 5px 9px; margin-top: 5px; }
.fc-name { font-size: 11px; font-weight: 600; color: var(--g); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-size { font-size: 9.5px; color: var(--mt); font-family: var(--fm); white-space: nowrap; }
.fc-rm { background: none; border: none; cursor: pointer; color: var(--mt); font-size: 13px; line-height: 1; padding: 1px 3px; border-radius: 3px; }
.fc-rm:hover { color: var(--red); }
.file-err { font-size: 10px; color: var(--red); margin-top: 3px; }
.restore-ok { font-size: 10px; margin-top: 4px; font-family: var(--fm); }

/* Panel table */
.panel-panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-sel-bar { padding: 5px 10px; background: var(--bgm); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.panel-tbl-wrap { flex: 1; overflow: auto; min-height: 0; }
.ptbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ptbl thead th { background: var(--bgm); border-bottom: 1px solid var(--bm); white-space: nowrap; min-width: 80px; padding: 0; user-select: none; vertical-align: top; position: sticky; top: 0; z-index: 5; }
.ptbl thead th:first-child { min-width: 32px; width: 32px; }
.pth-inner { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; gap: 4px; cursor: pointer; transition: background .12s; height: 100%; }
.pth-inner:hover { background: rgba(26,107,47,.07); }
.pth-inner.filtered { background: rgba(26,107,47,.06); }
.pth-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mt); overflow: hidden; text-overflow: ellipsis; flex: 1; font-family: var(--fm); }
.pth-inner.filtered .pth-lbl { color: var(--g); }
.ptbl thead th:first-child .pth-inner { cursor: default; justify-content: center; padding: 5px 4px; }
.ptbl tbody tr { border-bottom: 1px solid var(--bl); transition: background .12s; cursor: pointer; }
.ptbl tbody tr:hover { background: rgba(26,107,47,.035); }
.ptbl tbody tr.sel { background: rgba(26,107,47,.06); }
.ptbl tbody td { padding: 5px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ptbl tbody td:first-child { text-align: center; padding: 5px 6px; }
.pcb { width: 12px; height: 12px; accent-color: var(--g); cursor: pointer; }
.empty-tbl { padding: 28px; text-align: center; font-size: 11.5px; color: var(--mt); }

/* ══ PAGE 2 ══ */
.p2-hdr { height: 44px; background: var(--hg); display: grid; grid-template-columns: 140px 1fr 140px; align-items: center; padding: 0 14px; gap: 8px; flex-shrink: 0; box-shadow: var(--shh); }
.p2-title { font-family: var(--fh); font-size: 15px; color: #fff; text-align: center; }
.p2-body { flex: 1; display: grid; grid-template-columns: 1fr 280px; overflow: hidden; min-height: 0; }
.p2-pane { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.p2-pane + .p2-pane { border-left: 1px solid var(--bl); }
.pane-hd { height: 34px; background: var(--bgs); border-bottom: 1px solid var(--bl); display: flex; align-items: center; padding: 0 9px; gap: 5px; flex-shrink: 0; }
.pane-title { font-size: 11px; font-weight: 700; }
.pane-ct { font-size: 10px; color: var(--mt); margin-left: auto; font-family: var(--fm); }
.pane-srch-row { padding: 5px 8px; border-bottom: 1px solid var(--bl); background: #fff; flex-shrink: 0; position: relative; }
.pane-srch { width: 100%; padding: 4px 8px 4px 24px; border: 1px solid var(--bm); border-radius: var(--r6); font-size: 11px; font-family: var(--fn); color: var(--tx); background: var(--bgs); outline: none; transition: border-color .13s; }
.pane-srch:focus { border-color: var(--g); background: #fff; }
.pane-srch-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; color: var(--mt); pointer-events: none; }
.ftags-bar { min-height: 0; max-height: 0; overflow: hidden; background: rgba(26,107,47,.03); border-bottom: 1px solid var(--bl); display: flex; align-items: center; padding: 0 9px; gap: 4px; flex-shrink: 0; transition: max-height .18s, padding .18s; }
.ftags-bar.has { max-height: 26px; padding-top: 3px; padding-bottom: 3px; }
.ftag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--g); background: rgba(26,107,47,.07); padding: 1px 6px; border-radius: 20px; white-space: nowrap; }
.ftag button { background: none; border: none; cursor: pointer; color: var(--g); font-size: 11.5px; line-height: 1; padding: 0; }
.ftag button:hover { color: var(--red); }
.ftag-clr { font-size: 10px; color: var(--red); cursor: pointer; background: rgba(192,57,43,.07); border: none; padding: 1px 7px; border-radius: var(--r4); font-weight: 600; font-family: var(--fn); }
.tbl-outer { flex: 1; overflow: auto; min-height: 0; }
table { border-collapse: collapse; font-size: 11.5px; }
.dict-tbl { width: 100%; table-layout: fixed; }
thead th { background: #fff; position: sticky; top: 0; z-index: 10; padding: 0; border-bottom: 1px solid var(--bm); white-space: nowrap; overflow: hidden; user-select: none; vertical-align: top; }
.th-inner { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; gap: 2px; cursor: pointer; transition: background .12s; }
.th-inner:hover { background: var(--bgs); }
.th-inner.filtered { background: rgba(26,107,47,.05); color: var(--g); }
.th-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); overflow: hidden; text-overflow: ellipsis; flex: 1; font-family: var(--fm); }
.th-inner.filtered .th-lbl { color: var(--g); }
.th-fic { width: 9px; height: 9px; flex-shrink: 0; opacity: .4; }
.th-inner:hover .th-fic, .th-inner.filtered .th-fic { opacity: 1; color: var(--g); }
tbody tr { border-bottom: 1px solid rgba(26,107,47,.05); transition: background .12s; }
tbody tr:hover { background: var(--bgs); }
tbody tr.hl { background: rgba(26,107,47,.06); }
tbody td { padding: 4px 7px; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.cb-cell { padding: 3px 5px; width: 24px; }
.row-cb { width: 11px; height: 11px; accent-color: var(--g); cursor: pointer; }
.empty-st { padding: 22px; text-align: center; font-size: 11.5px; }
.empty-st svg { width: 24px; height: 24px; margin: 0 auto 6px; display: block; color: var(--bm); }
.es-t { font-weight: 600; color: var(--tx); margin-bottom: 2px; }
.es-s { color: var(--mt); font-size: 10.5px; }

/* P2 summary */
.p2-summ-group { margin-bottom: 10px; }
.p2-summ-act { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mt); font-family: var(--fm); margin-bottom: 3px; }
.p2-summ-act.warn { color: var(--or); background: rgba(184,110,0,.08); padding: 2px 5px; border-radius: var(--r4); border-left: 3px solid var(--or); }
.p2-summ-var { font-size: 10.5px; color: var(--tx); padding: 2px 0 2px 8px; border-left: 2px solid var(--bm); margin-bottom: 1px; white-space: normal; word-break: break-word; }

/* ══ PAGE 3 ══ */
.p3-orient-wrap { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--mt); }
.p3-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.p3-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.p3-toggle-track { width: 32px; height: 17px; background: var(--bm); border-radius: 9px; transition: background .2s; flex-shrink: 0; }
.p3-toggle input:checked + .p3-toggle-track { background: var(--g); }
.p3-toggle-thumb { position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: left .2s; pointer-events: none; }
.p3-toggle input:checked ~ .p3-toggle-thumb { left: 17px; }
.p3-mx-td-act { padding: 5px 9px; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--bl); border-right: 2px solid var(--bm); background: #fff; position: sticky; left: 0; z-index: 3; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.p3-mx-td-vars { padding: 4px 8px; font-size: 10px; color: var(--mt); border-bottom: 1px solid var(--bl); border-right: 2px solid var(--bl); background: #fff; position: sticky; left: 140px; z-index: 3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.p3-mx-td-inp { padding: 3px 4px; border-bottom: 1px solid var(--bl); border-left: 1px solid var(--bl); text-align: center; vertical-align: middle; background: #fff; }
.p3-mx-tr:hover .p3-mx-td-act, .p3-mx-tr:hover .p3-mx-td-vars { background: var(--bgs); }
.p3-mx-tr:hover .p3-mx-td-inp { background: var(--bgs); }
.p3-apply-all { font-size: 8.5px; font-weight: 600; padding: 1px 6px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; margin-left: 4px; }
.p3-apply-all:hover { border-color: var(--g); color: var(--g); }
.c-num-inp { width: 58px; padding: 3px 5px; border: 1.5px solid var(--bm); border-radius: var(--r4); font-size: 11px; text-align: center; outline: none; transition: border-color .13s; color: var(--tx); font-family: var(--fn); }
.c-num-inp:focus { border-color: var(--g); box-shadow: 0 0 0 2px rgba(26,107,47,.09); }
.c-num-inp.err { border-color: var(--red); background: rgba(192,57,43,.04); }
.c-num-inp[type=number] { -moz-appearance: textfield; }
.c-num-inp[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.p3-err { font-size: 9px; color: var(--red); display: block; margin-top: 1px; font-family: var(--fm); min-height: 11px; }
.mx-body { flex: 1; overflow: auto; min-height: 0; }

/* ══ PAGE 4 (mapping matrix) ══ */
.m-tbl { border-collapse: collapse; font-size: 11px; }
.m-tbl th, .m-tbl td { border: 1px solid var(--bl); }
.m-tbl thead th { background: var(--bgs); padding: 0; white-space: nowrap; position: sticky; top: 0; z-index: 5; }
.m-tbl thead th.pcol { background: var(--bgs); min-width: 85px; }
.col-hdr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 7px; min-width: 100px; }
.col-hdr-nm { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; font-family: var(--fm); }
.col-tog { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; }
.col-tog:hover { border-color: var(--g); color: var(--g); }
.col-tog.on { border-color: var(--g); background: rgba(26,107,47,.07); color: var(--g); }
.row-hdr { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 4px 7px; }
.row-tog { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; }
.row-tog:hover { border-color: var(--g); color: var(--g); }
.row-tog.on { border-color: var(--g); background: rgba(26,107,47,.07); color: var(--g); }
.m-cell { display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; transition: background .1s; }
.m-cell:hover { background: var(--bgs); }
.m-cb { width: 11px; height: 11px; accent-color: var(--g); cursor: pointer; }
.m-tbl tbody tr.row-full td { background: rgba(26,107,47,.045); }
.m-tbl tbody td.pdc { background: #fff; font-size: 10.5px; color: var(--tx); padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.m-tbl tbody tr:hover td.pdc { background: var(--bgs); }
.pth-inner { display: flex; align-items: center; justify-content: space-between; padding: 4px 7px; gap: 2px; cursor: pointer; min-width: 85px; transition: background .12s; }
.pth-inner:hover { background: rgba(26,107,47,.06); }
.pth-inner.filtered { background: rgba(26,107,47,.06); }
.pth-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mt); overflow: hidden; text-overflow: ellipsis; flex: 1; font-family: var(--fm); }
.pth-inner.filtered .pth-lbl { color: var(--g); }
.p4-ftags { min-height: 0; max-height: 0; overflow: hidden; background: var(--bgs); border-bottom: 1px solid var(--bl); display: flex; align-items: center; padding: 0 12px; gap: 4px; flex-shrink: 0; transition: max-height .18s, padding .18s; }
.p4-ftags.has { max-height: 26px; padding-top: 3px; padding-bottom: 3px; }

/* ══ PAGE 5 (fixed vars) ══ */
.p5-tbl { border-collapse: collapse; font-size: 11px; }
.p5-tbl th, .p5-tbl td { border: 1px solid var(--bl); }
.p5-tbl thead th.p5-pcol { background: var(--bgs); padding: 0; white-space: nowrap; position: sticky; top: 0; z-index: 6; min-width: 90px; }
.p5-tbl thead th.p5-rowtog { background: var(--bgs); padding: 0; position: sticky; top: 0; z-index: 6; white-space: nowrap; }
.p5-tbl thead th.p5-vcol { background: var(--bgs); padding: 0; position: sticky; top: 0; z-index: 5; min-width: 100px; }
.p5-tbl tbody td.p5-pdc { background: #fff; font-size: 10.5px; color: var(--tx); padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; position: sticky; z-index: 2; }
.p5-tbl tbody tr:hover td.p5-pdc { background: var(--bgs); }
.p5-tbl tbody tr.p5-row-full td { background: rgba(26,107,47,.045); }
.p5-tbl tbody tr.p5-row-full td.p5-pdc { background: rgba(26,107,47,.055); }
.p5-col-hdr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; }
.p5-col-nm { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; font-family: var(--fm); }
.p5-col-tog { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; }
.p5-col-tog:hover { border-color: var(--g); color: var(--g); }
.p5-col-tog.on { border-color: var(--g); background: rgba(26,107,47,.07); color: var(--g); }
.p5-pcol-inner { display: flex; align-items: center; padding: 5px 7px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mt); font-family: var(--fm); }
.p5-row-tog { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; }
.p5-row-tog:hover { border-color: var(--g); color: var(--g); }
.p5-row-tog.on { border-color: var(--g); background: rgba(26,107,47,.07); color: var(--g); }
.p5-cell { display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; transition: background .1s; }
.p5-cell:hover { background: var(--bgs); }
.p5-cb { width: 11px; height: 11px; accent-color: var(--g); cursor: pointer; }

/* ══ PAGE 6 (model params) ══ */
.p6-tbl { border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.p6-tbl th, .p6-tbl td { border: 1px solid var(--bl); }
.p6-th-var { background: var(--bgs); padding: 5px 9px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mt); font-family: var(--fm); position: sticky; left: 0; top: 0; z-index: 9; min-width: 140px; }
.p6-th-panel { background: var(--bgs); padding: 4px 8px; text-align: center; font-size: 9px; font-weight: 700; color: var(--mt); font-family: var(--fm); position: sticky; top: 0; z-index: 6; }
.p6-th-group { background: var(--bgs); padding: 3px 4px; text-align: center; font-size: 8.5px; font-weight: 700; color: var(--mt); font-family: var(--fm); border-top: 2px solid var(--bl); position: sticky; top: 22px; z-index: 5; }
.p6-th-sub { background: var(--bgs); padding: 3px 4px; text-align: center; font-size: 8px; color: var(--mt); font-family: var(--fm); position: sticky; top: 42px; z-index: 5; min-width: 58px; }
.p6-td-var { padding: 4px 9px; font-size: 11px; font-weight: 600; background: #fff; position: sticky; left: 0; z-index: 3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--bm); }
.p6-td-inp { padding: 2px 3px; text-align: center; vertical-align: middle; background: #fff; }
.p6-tbl tr:hover .p6-td-var { background: var(--bgs); }
.p6-tbl tr:hover .p6-td-inp { background: var(--bgs); }
.p6-inp { width: 56px; padding: 2px 4px; border: 1.5px solid var(--bm); border-radius: var(--r4); font-size: 11px; text-align: center; outline: none; transition: border-color .13s; font-family: var(--fn); color: var(--tx); }
.p6-inp:focus { border-color: var(--g); box-shadow: 0 0 0 2px rgba(26,107,47,.09); }
.p6-inp[type=number] { -moz-appearance: textfield; }
.p6-inp[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.p6-apply-btn { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 20px; cursor: pointer; border: 1px solid var(--bm); background: #fff; color: var(--mt); transition: all .12s; white-space: nowrap; }
.p6-apply-btn:hover { border-color: var(--g); color: var(--g); }
.p6-group-adstock { border-left: 2px solid rgba(21,101,160,.25); }
.p6-group-power { border-left: 2px solid rgba(184,110,0,.25); }
.p6-group-lag { border-left: 2px solid rgba(26,107,47,.25); }
.p6-panel-dd { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--bm); border-radius: var(--r8); box-shadow: 0 4px 18px rgba(0,0,0,.11); z-index: 500; min-width: 200px; max-height: 260px; overflow-y: auto; font-size: 11.5px; }

/* ══ PAGE 7 (config) ══ */
.cfg-node { font-family: var(--fn); font-size: 11.5px; line-height: 1.7; }
.cfg-node + .cfg-node { border-top: 1px solid var(--bl); }
.cfg-row { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; min-height: 26px; }
.cfg-toggle { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mt); font-size: 9px; margin-top: 5px; user-select: none; transition: transform .15s; }
.cfg-toggle.open { transform: rotate(90deg); }
.cfg-key { font-weight: 600; color: var(--tx); flex-shrink: 0; min-width: 0; white-space: nowrap; margin-top: 4px; }
.cfg-sep { color: var(--mt); margin-top: 4px; flex-shrink: 0; }
.cfg-children { padding-left: 20px; border-left: 1px solid var(--bl); }
.cfg-inp { border: 1.5px solid var(--bm); border-radius: var(--r4); padding: 2px 6px; font-size: 11px; font-family: var(--fn); color: var(--tx); background: #fff; outline: none; min-width: 80px; max-width: 340px; transition: border-color .13s; }
.cfg-inp:focus { border-color: var(--g); box-shadow: 0 0 0 2px rgba(26,107,47,.09); }
.cfg-inp-num { width: 90px; }
.cfg-inp-arr { min-width: 200px; max-width: 400px; }
.cfg-type-tag { font-size: 9px; color: var(--mt); font-family: var(--fm); margin-top: 5px; flex-shrink: 0; }
.cfg-obj-label { color: var(--mt); font-size: 10.5px; cursor: pointer; display: flex; align-items: center; gap: 4px; }

/* ── Col filter dropdown ── */
.col-dd-ov { position: fixed; inset: 0; z-index: 7000; }
.col-dd { position: fixed; background: #fff; border: 1px solid var(--bm); border-radius: var(--r8); box-shadow: 0 4px 18px rgba(0,0,0,.11); z-index: 7001; display: flex; flex-direction: column; min-width: 180px; max-width: 250px; max-height: 270px; overflow: hidden; }
.col-dd-si { padding: 6px 7px; border-bottom: 1px solid rgba(26,107,47,.08); }
.col-dd-si input { width: 100%; padding: 3px 6px; border: 1px solid var(--bm); border-radius: var(--r4); font-size: 11px; font-family: var(--fn); outline: none; }
.col-dd-list { overflow-y: auto; flex: 1; }
.dd-item { display: flex; align-items: center; gap: 6px; padding: 4px 9px; cursor: pointer; font-size: 11.5px; transition: background .1s; }
.dd-item:hover { background: var(--bgs); }
.dd-item input { accent-color: var(--g); flex-shrink: 0; }
.col-dd-foot { padding: 5px 7px; border-top: 1px solid rgba(26,107,47,.08); display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--mt); font-family: var(--fm); }

/* Toolbar shared */
.toolbar { min-height: 38px; background: #fff; border-bottom: 1px solid var(--bl); display: flex; align-items: center; padding: 4px 14px; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.page-note { font-size: 10.5px; color: var(--mt); }