/* Selection Tools: "Midnight & Paper" theme. Loaded last, overrides the original look. */
:root{--bg:#f4f1ea;--surface:#fff;--ink:#14183a;--muted:#5f6384;--line:#e1ddd2;--steel:#cfd2e3;--steel-edge:#8f94b8;--steel-dark:#5a5f86;--floor:#ebe6da;--lane:#faf8f3;--go:#4f46e5;--go-ink:#fff;--go-soft:#e4e2fd;--warn:#b45309;--warn-soft:#fdecd2;--glass:#a9d3dc;--glass-edge:#3f8597;--r:16px;--sh:0 1px 2px rgba(20,24,58,.06),0 8px 24px rgba(20,24,58,.07);--font-body:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Noto Sans SC","PingFang SC",sans-serif;--font-head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif SC",serif;--font-num:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1020;--surface:#141a33;--ink:#e8eaf8;--muted:#9aa1c8;--line:#262d52;--steel:#3a4270;--steel-edge:#7b84b8;--steel-dark:#aab1de;--floor:#10162b;--lane:#1a2140;--go:#8b93ff;--go-ink:#0b1020;--go-soft:#232a5c;--warn:#f0a35e;--warn-soft:#3a2a18;--glass:#5fa9bb;--glass-edge:#8fd0e0;--sh:0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bg:#0b1020;--surface:#141a33;--ink:#e8eaf8;--muted:#9aa1c8;--line:#262d52;--steel:#3a4270;--steel-edge:#7b84b8;--steel-dark:#aab1de;--floor:#10162b;--lane:#1a2140;--go:#8b93ff;--go-ink:#0b1020;--go-soft:#232a5c;--warn:#f0a35e;--warn-soft:#3a2a18;--glass:#5fa9bb;--glass-edge:#8fd0e0;--sh:0 8px 24px rgba(0,0,0,.35)}
html,body{background:var(--bg)}
body{font-family:var(--font-body);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:0}
::selection{background:var(--go);color:var(--go-ink)}
/* hero banner */
.wrap{max-width:1240px}
.wrap>header{background:linear-gradient(135deg,#14183a 0%,#2b2f7a 62%,#4f46e5 130%);color:#fff;border-radius:24px;padding:30px clamp(20px,4vw,40px);box-shadow:var(--sh)}
.wrap>header .eyebrow{color:#b8bdf5;font-family:var(--font-num)}
.wrap>header h1{color:#fff;font-size:clamp(28px,4.4vw,40px)}
.wrap>header .lede{color:#d5d8f7}
/* cards */
.panel,.results>section,.shead,.sbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.results>section,.shead{padding:clamp(14px,2vw,22px)}
fieldset{border:0;border-bottom:1px solid var(--line)}
fieldset:last-child{border-bottom:0}
.step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--go);color:var(--go-ink);font-size:13px;font-weight:700;margin-right:8px}
/* controls */
.opt span{border-radius:999px;background:var(--surface);padding:8px 16px}
.opt:hover span{border-color:var(--go)}
.opt input:checked + span,.chips .opt input:checked + span{background:var(--go);border-color:var(--go);color:var(--go-ink);box-shadow:0 4px 12px rgba(79,70,229,.3)}
.opt input:checked + span small{color:var(--go-ink);opacity:.8}
select,textarea,input[type=text]{border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 12px}
select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--go);outline-offset:1px}
.stepper{border-radius:999px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.btn{border-radius:999px;font-weight:600;background:var(--go);color:var(--go-ink);border:1px solid var(--go);padding:10px 20px;box-shadow:0 4px 14px rgba(79,70,229,.28);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--go);box-shadow:none}
.tablewrap{border-radius:12px;overflow:auto;border:1px solid var(--line)}
table.bom{border-collapse:separate;border-spacing:0}
table.bom th{background:var(--go-soft);color:var(--ink);font-weight:600}
/* tool switcher (index.html) */
body>.bar{background:linear-gradient(90deg,#14183a,#2b2f7a);border-bottom:0;padding:10px 16px;align-items:center}
body>.bar .tabs{gap:4px;background:rgba(255,255,255,.1);padding:4px;border-radius:999px}
body>.bar .tab{color:#c4c8f3;border:0;border-radius:999px;font-size:15px;font-weight:600;padding:9px 20px}
body>.bar .tab svg{width:18px;height:18px}
body>.bar .tab:hover{color:#fff}
body>.bar .tab[aria-selected="true"]{background:#fff;color:#14183a}
body>.bar .brand{padding-bottom:0}
body>.bar .brand b{color:#fff;font-family:var(--font-head);font-size:16px}
body>.bar .brand a{color:#b8bdf5!important}
@media(max-width:640px){body>.bar .tabs{width:100%}body>.bar .tab{flex:1;justify-content:center;padding:9px 6px}}