:root{
    --bg:#f6f5f2; --panel:#ffffff; --border:#dcd9d2; --text:#1c1c1a;
    --text-muted:#7a7770; --ok:#2f7d4f; --err:#b3412c; --mono:'IBM Plex Mono','Courier New',monospace;
    --highlight-direct:#fde68a; --highlight-direct-accent:#c2790a; --highlight-indirect:#fdf6e3; --highlight-target:#dbeafe;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,sans-serif;}
.wrap{padding:28px 20px 60px;}
h1{font-size:19px;font-weight:600;margin:0 0 4px;}
p.sub{color:var(--text-muted);font-size:13px;margin:0 0 22px;}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:800px){.cols{grid-template-columns:1fr;}}
.label{font-size:12px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
textarea{
    width:100%;font-family:var(--mono);font-size:12.5px;line-height:1.5;
    padding:12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);
    resize:none;overflow:hidden;
}
#out{border:1px solid var(--border);border-radius:6px;background:var(--panel);}
.section-head{
    display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
    background:#e3ded2;font-size:12px;font-weight:600;color:var(--text);border-top:1px solid var(--border);
    cursor:pointer;user-select:none;
}
.section-head:hover{background:#dad3c3;}
.section-head .chevron{display:inline-block;width:12px;font-size:9px;}
.section-head .val{font-size:13px;font-weight:600;color:var(--text);}
.group-head{
    display:flex;justify-content:space-between;align-items:center;padding:8px 14px;
    background:#f0eee9;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);
    cursor:pointer;user-select:none;
}
.group-head:hover{background:#e8e5de;}
.group-head .chevron{display:inline-block;width:12px;font-size:9px;}
.group-head .val{font-size:12px;color:var(--text-muted);}
.section-body .group-head{padding-left:26px;}
.section-body .group-body .row{padding-left:26px;}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-top:1px solid var(--border);font-size:13px;}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;}
.dot.ok{background:var(--ok);}
.dot.err{background:var(--err);}
.key{font-family:var(--mono);}
.val{font-family:var(--mono);display:flex;flex-shrink:0;}
.val.err{color:var(--err);}
.val-num{width:13ch;text-align:right;white-space:pre;}
.val-unit{width:4ch;text-align:left;color:var(--text-muted);white-space:pre;}
.val.err .val-unit{color:var(--err);}
.formula-toggle{
    display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
    width:15px;height:15px;border-radius:50%;background:var(--border);color:var(--text-muted);
    font-size:10.5px;line-height:1;cursor:pointer;user-select:none;
}
.formula-toggle:hover{background:var(--text-muted);color:#fff;}
.row.highlight-direct{background:var(--highlight-direct);border-left:3px solid var(--highlight-direct-accent);padding-left:11px;}
.row.highlight-indirect{background:var(--highlight-indirect);}
.row.highlight-target{background:var(--highlight-target);}
.formula-box{
    padding:8px 14px 8px 34px;border-top:1px dashed var(--border);background:var(--highlight-target);
    font-family:var(--mono);font-size:12px;color:var(--text-muted);
}
.formula-ref{cursor:pointer;color:var(--text);text-decoration:underline;text-decoration-style:dotted;}
.formula-ref:hover{color:var(--ok);}
.row.flash{outline:2px solid var(--ok);outline-offset:-2px;}
#errors{margin-top:12px;font-size:12.5px;color:var(--err);}
#order{margin-top:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:6px;
    font-family:var(--mono);font-size:12px;color:var(--text-muted);}