:root { color-scheme: light; --ink:#18212f; --muted:#687386; --line:#d9e0e9; --panel:#fff; --canvas:#f4f7fa; --accent:#176b87; --accent-dark:#104d62; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:var(--canvas); }
body.postprocessor-app { height:100vh; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
button,input,select { font:inherit; }
button,.button,select,input[type="number"] { min-height:2.35rem; border:1px solid #bac5d2; border-radius:.45rem; background:#fff; color:var(--ink); }
button,.button { padding:.48rem .78rem; cursor:pointer; }
button:hover:not(:disabled),.button:hover { border-color:var(--accent); }
button:disabled { cursor:not-allowed; opacity:.48; }
.button.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; }
input[type="number"],input[type="range"],select { width:100%; padding:.4rem .5rem; }
:focus-visible { outline:3px solid rgba(23,107,135,.3); outline-offset:2px; }
.toolbar { min-height:4.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; background:#142432; color:#fff; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brand-mark { display:block; flex-shrink:0; width:38px; height:38px; padding:4px; object-fit:contain; border-radius:10px; background:linear-gradient(145deg,#1769aa,#19a18e); }
.brand small { display:block; max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#bfccd6; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.app-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem; margin-right:.3rem; }
.app-nav a { padding:.45rem .6rem; border-radius:.4rem; color:#bfccd6; text-decoration:none; white-space:nowrap; }
.app-nav a:focus-visible { outline:2px solid #bfccd6; outline-offset:2px; }
.app-nav a:hover,.app-nav a[aria-current=page] { color:#fff; background:#294557; }
.app-layout { min-height:0; height:100%; display:grid; grid-template-columns:16rem minmax(0,1fr); overflow:hidden; }
.settings { min-height:0; padding:1rem; overflow-y:auto; background:var(--panel); border-right:1px solid var(--line); }
.settings section+section { border-top:1px solid var(--line); margin-top:1rem; padding-top:.8rem; }
.settings h2,.details-panel h2 { margin:0 0 .65rem; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.settings label { display:block; margin:.55rem 0 .25rem; font-size:.9rem; }
.settings label:has(input[type="checkbox"]) { display:flex; gap:.55rem; align-items:center; }
.settings .help p,.control-note { color:var(--muted); font-size:.86rem; line-height:1.45; }
.control-note.warning-note { color:#8a5700; font-weight:600; }
.settings a { color:var(--accent-dark); }
.transport { display:grid; grid-template-columns:1fr 2fr 1fr; gap:.35rem; }
.workspace { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:1rem; gap:.65rem; }
.message { flex:none; padding:.7rem .85rem; border-radius:.45rem; border:1px solid; white-space:pre-wrap; }
.message.error { color:#791d22; background:#fff0f0; border-color:#e9aeb1; }
.message.notice { color:#5d4a11; background:#fff9df; border-color:#e8d68d; }
.drop-zone { position:relative; min-height:0; flex:1 1 0; overflow:hidden; border:2px dashed #a8b5c4; border-radius:.75rem; background:#fff; }
.drop-zone.dragging { border-color:var(--accent); background:#eefafd; }
.drop-copy { position:absolute; inset:0; display:grid; place-content:center; gap:.35rem; text-align:center; color:var(--muted); pointer-events:none; }
.drop-copy strong { color:var(--ink); font-size:1.1rem; }
.drop-zone.has-data .drop-copy { display:none; }
#viewport { display:none; width:100%; height:100%; min-height:0; touch-action:none; user-select:none; }
.drop-zone.has-data #viewport { display:block; }
.result-legend,.details-panel,.chart-panel { flex:none; background:#fff; border:1px solid var(--line); border-radius:.55rem; padding:.75rem .9rem; }
.result-legend { color:var(--muted); font-size:.86rem; }
.legend-header { margin-bottom:.45rem; color:var(--ink); font-weight:650; }
.legend-bar { height:.85rem; border:1px solid rgba(24,33,47,.28); border-radius:999px; }
.legend-ticks { display:flex; justify-content:space-between; margin-top:.28rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.legend-ticks.single { justify-content:center; }
.details-panel { max-height:11rem; overflow:auto; }
.details-panel pre { margin:0; white-space:pre-wrap; font:.86rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.chart-panel { min-height:17rem; }
.chart-help { margin:.35rem 0 0; color:var(--muted); font-size:.78rem; }
#history-chart { display:block; width:100%; height:15rem; }
#mpc-history-chart { width:100%; height:12rem; }
#mpc-results table { border-collapse:collapse; font-size:.8rem; }
#mpc-results td,#mpc-results th { padding:.35rem; border-bottom:1px solid var(--line); text-align:left; }
.status-bar { flex:none; color:var(--muted); font-size:.82rem; }
.structural-viewport .viewport-background { fill:#fff; }
.structural-viewport .original-element { fill:none; stroke:#7b8795; stroke-width:1.5; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.structural-viewport .deformed-element { fill:none; stroke:#087f9c; stroke-width:2.7; vector-effect:non-scaling-stroke; }
.structural-viewport .node-hit { fill:none; stroke:transparent; stroke-width:14; vector-effect:non-scaling-stroke; pointer-events:stroke; }
.structural-viewport .node { fill:#fff; stroke:#263847; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.structural-viewport .label { fill:#263847; font-family:sans-serif; paint-order:stroke; stroke:#fff; stroke-linejoin:round; }
.structural-viewport [data-node-id],.structural-viewport [data-element-id] { cursor:pointer; }
.structural-viewport path.selected,.structural-viewport circle.selected { stroke:#ef7d18!important; stroke-width:4!important; }
/* Chromium's native SVG focus outline can expand in model coordinates into
   a large black ring. Use the geometry stroke for keyboard focus instead. */
.structural-viewport [tabindex]:focus { outline:none; }
.structural-viewport path[tabindex]:focus-visible,.structural-viewport circle[tabindex]:focus-visible { stroke:#176b87!important; stroke-width:4!important; vector-effect:non-scaling-stroke; }
.structural-viewport .load-symbol { fill:none; stroke:#b63a3f; stroke-width:2; vector-effect:non-scaling-stroke; }
.structural-viewport .reaction-symbol { fill:none; vector-effect:non-scaling-stroke; }
.structural-viewport .reaction-force-symbol { stroke:#6d3ca5; stroke-width:2.8; stroke-dasharray:5 2.5; }
.structural-viewport .reaction-moment-symbol { stroke:#c56a00; stroke-width:3; stroke-dasharray:none; }
.structural-viewport .diagram-fill { fill:rgba(27,127,154,.16); stroke:none; vector-effect:non-scaling-stroke; }
.structural-viewport .diagram-line { fill:none; stroke:#176b87; stroke-width:2; vector-effect:non-scaling-stroke; }
#history-chart .chart-frame,#history-chart .chart-axis { fill:none; stroke:#9aa8b7; stroke-width:1; vector-effect:non-scaling-stroke; }
#history-chart .chart-series { fill:none; stroke:#087f9c; stroke-width:2; vector-effect:non-scaling-stroke; }
#history-chart .chart-cursor { stroke:#b63a3f; stroke-width:1.5; vector-effect:non-scaling-stroke; }
#history-chart .chart-hit-area { fill:transparent; pointer-events:all; cursor:crosshair; }
#history-chart .chart-sample { fill:#fff; stroke:#b63a3f; stroke-width:2; pointer-events:none; }
#history-chart .chart-tooltip { pointer-events:none; }
#history-chart .chart-tooltip rect { fill:#263847; stroke:none; opacity:.94; }
#history-chart .chart-tooltip text { fill:#fff; font:12px sans-serif; }
#history-chart [hidden] { display:none; }
#history-chart text { fill:#354657; font:12px sans-serif; }
@media (max-width:760px) { body.postprocessor-app{height:auto;display:block;overflow:auto}.toolbar{align-items:flex-start}.toolbar-actions{justify-content:flex-end}.brand small{max-width:42vw}.app-layout{height:auto;min-height:calc(100vh - 4.2rem);display:block;overflow:visible}.settings{overflow:visible;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.workspace{overflow:visible}.settings section+section{border-top:0;margin-top:0;padding-top:0}.settings .help{grid-column:1/-1}.drop-zone,#viewport{min-height:24rem}.details-panel{max-height:none} }
@media (max-width:480px) { .toolbar{flex-direction:column}.toolbar-actions{width:100%;justify-content:flex-start}.brand small{max-width:80vw}.settings{grid-template-columns:1fr}.settings .help{grid-column:auto} }
.section-result-panel{padding:18px;background:#fff;border:1px solid #d9e0e9;border-radius:8px;margin-top:12px}
.section-result-panel[hidden]{display:none}.section-result-panel label{display:flex;gap:12px;align-items:center}
.section-result-panel input[type=range]{flex:1}.section-result-panel input[type=number]{width:90px}
.section-result-svg{display:block;width:100%;height:280px;background:#f8fafc;border-radius:8px;margin-top:12px}
.section-result-svg[hidden]{display:none}.section-result-panel pre{white-space:pre-wrap}

.result-inspector{flex:none;min-height:0;max-height:22rem;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
.result-inspector:has(.section-result-panel:not([hidden])){grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr)}
.result-inspector:has(.section-result-panel:not([hidden])) .details-panel{max-height:none}
.result-inspector .section-result-panel{margin:0;padding:12px;min-width:0}
.result-inspector .section-result-panel h2{font-size:1rem;margin:0 0 8px}
.result-inspector .section-result-svg{height:240px;margin-top:8px}
.result-inspector .section-result-panel pre{font:14px/1.4 ui-monospace,monospace;margin:8px 0}
.workspace:has(.section-result-panel:not([hidden])) .drop-zone{min-height:240px}
@media(max-width:1000px){.result-inspector:has(.section-result-panel:not([hidden])){grid-template-columns:1fr}.workspace:has(.section-result-panel:not([hidden])){overflow:auto}}
@media(max-width:760px){.result-inspector{max-height:none}.result-inspector .section-result-svg{height:260px}}