:root { --ink:#182019; --muted:#697268; --line:#dfe4dc; --paper:#fffefb; --wash:#f3f5ef; --accent:#335c3c; --accent-light:#e2ecdf; --danger:#a03636; }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(135deg,#eef1e8 0%,#f9f8f2 48%,#e9f0ea 100%); color:var(--ink); font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif; min-height:100vh; }
.shell { width:min(920px, calc(100% - 36px)); margin:0 auto; padding:72px 0; } header { margin-bottom:32px; } h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; font-family:Georgia,serif; font-size:clamp(2.3rem,6vw,4rem); letter-spacing:-.055em; } h2 { margin-bottom:5px; font-size:1.1rem; } .lede,.step-title p { color:var(--muted); margin-bottom:0; } .eyebrow { color:var(--accent); text-transform:uppercase; font-size:.72rem; letter-spacing:.13em; font-weight:800; margin-bottom:9px; }
.card { background:rgba(255,254,251,.9); border:1px solid rgba(100,115,100,.18); box-shadow:0 12px 38px rgba(31,57,36,.08); border-radius:18px; padding:26px; margin:16px 0; } .step-title { display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; } .step-title>span { background:var(--accent); color:white; font-weight:800; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; flex:none; }
.file-drop { min-height:98px; cursor:pointer; border:1.5px dashed #a7b4a4; border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:var(--wash); } .file-drop:hover { background:var(--accent-light); border-color:var(--accent); } .file-drop input { display:none; } .file-drop small,.row span { color:var(--muted); } .row { display:flex; align-items:end; gap:18px; padding-top:16px; font-size:.9rem; } label { display:grid; gap:7px; color:#435044; font-size:.84rem; font-weight:700; } select { min-width:200px; background:white; border:1px solid var(--line); border-radius:8px; padding:10px 34px 10px 10px; font:inherit; color:var(--ink); }
.editor-head { display:flex; justify-content:space-between; background:#273227; color:#edf2e9; padding:10px 13px; border-radius:10px 10px 0 0; font:700 .78rem ui-monospace,SFMono-Regular,monospace; } #json-status.valid { color:#b7e9a9; } #json-status.error { color:#ffc5ba; } textarea { width:100%; height:250px; resize:vertical; border:1px solid var(--line); padding:16px; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; border-radius:0 0 10px 10px; } .CodeMirror { height:300px; border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; background:#fff; color:#1e2a21; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; } .CodeMirror-gutters { background:#f5f7f2; border-right:1px solid var(--line); } .CodeMirror-linenumber { color:#8a9488; } .CodeMirror-cursor { border-left-color:#24492d; } .CodeMirror-matchingbracket { color:#1f6f38!important; font-weight:800; } .cm-property { color:#835b16; } .cm-string { color:#216b50; } .cm-number,.cm-atom { color:#7650a8; } .actions { display:flex; flex-wrap:wrap; gap:9px; padding-top:14px; }
button { cursor:pointer; border:0; border-radius:8px; font:800 .85rem inherit; padding:10px 14px; } button:disabled { cursor:not-allowed; opacity:.45; } .primary { background:var(--accent); color:white; } .primary:hover:not(:disabled) { background:#24492d; } .primary span { font-size:1.1em; padding-left:6px; } .secondary { color:#2e4332; background:#e8eee6; } .secondary:hover { background:#dae6d6; }.selection-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:3px 0 22px; }.selection-grid select { min-width:0; width:100%; }
.result { border-color:#a6c1a5; background:#fbfdf9; }.result-head { display:flex; justify-content:space-between; align-items:start; gap:15px; }.result-head h2 { font-family:Georgia,serif; font-size:1.6rem; }.result-actions { display:flex; gap:8px; }.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }.quote-field { background:#f1f5ee; padding:13px; border-radius:9px; min-height:68px; }.quote-field small { display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; }.quote-field strong { word-break:break-word; } details { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; } summary { cursor:pointer; font-weight:750; } pre { overflow:auto; padding:14px; background:#202920; color:#e5eee0; border-radius:9px; font-size:.78rem; }.hidden { display:none!important; }
.line-tables { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }.line-tables h3 { margin:0 0 9px; font-size:.9rem; }.line-table { width:100%; border-collapse:collapse; font-size:.8rem; }.line-table th { text-align:left; color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.06em; }.line-table th,.line-table td { padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top; }.line-table td:last-child,.line-table th:last-child { text-align:right; white-space:nowrap; }.line-table .remark { color:var(--muted); font-size:.72rem; display:block; margin-top:3px; }.line-table tfoot td { border-top:2px solid #9bb39a; border-bottom:0; color:var(--accent); font-weight:800; padding-top:11px; }
.reconciliation { margin-top:20px; padding:14px; border-radius:10px; background:#e9f3e7; color:#24492d; font-size:.85rem; }.reconciliation strong { display:block; margin-bottom:4px; }.reconciliation p { margin:4px 0 0; }.reconciliation ul { margin:9px 0 0; padding-left:19px; }.reconciliation.mismatch { background:#fff1ed; color:#8a3627; }
.unit-details { margin-top:22px; padding:16px; border-radius:10px; background:#f4f7f2; }.unit-details h3 { margin:0 0 11px; font-size:.9rem; }.unit-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.unit-detail { background:#fff; border:1px solid var(--line); border-radius:7px; padding:9px; }.unit-detail small { display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }.unit-detail span { font-size:.84rem; overflow-wrap:anywhere; }
#future-costs { margin-top:22px; }.future-costs-table { max-width:calc(50% - 9px); }
@media(max-width:600px){ .shell{width:min(100% - 24px,920px);padding:36px 0}.card{padding:19px}.selection-grid,.quote-grid,.line-tables,.unit-detail-grid{grid-template-columns:1fr}.future-costs-table{max-width:none}.result-head{flex-direction:column}.row{align-items:start;flex-direction:column;gap:9px} }