:root { --page:#f4f1ea; --surface:#fff; --ink:#1d2521; --muted:#66736b; --line:#d9ded7; --accent:#0f6b55; --strong:#094c3c; --danger:#8a221c; --danger-bg:#fae9e7; --soft:#e8f2ee; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--page); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { min-height:48px; font:inherit; }
button { border:1px solid var(--accent); border-radius:8px; padding:8px 16px; color:#fff; background:var(--accent); font-weight:700; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
button:not(:disabled):hover { background:var(--strong); box-shadow:0 5px 12px rgba(9,76,60,.2); transform:translateY(-1px); }
button:not(:disabled):active { box-shadow:0 2px 4px rgba(9,76,60,.16); transform:translateY(1px) scale(.98); }
button.secondary, button:disabled { color:var(--ink); background:var(--surface); border-color:var(--line); }
button:disabled { color:var(--muted); cursor:not-allowed; }
a { color:var(--strong); font-weight:700; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.site-header { display:flex; justify-content:space-between; gap:24px; padding:32px clamp(16px,4vw,48px); align-items:center; }
h1 { margin:4px 0 0; font-size:clamp(32px,4vw,61px); line-height:1.1; }
h2,h3,p { margin-top:0; }
.eyebrow { color:var(--strong); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.account-controls,.actions,.future-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.account-email,.later,.status,.validation-summary { overflow-wrap:anywhere; }
main { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:24px; padding:0 clamp(16px,4vw,48px) 48px; }
.project-bar,.tabs,.tab-panel { grid-column:1; }
.project-bar,.tab-panel,.settings { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; }
.project-bar { display:flex; gap:16px; flex-wrap:wrap; align-items:end; }
label { display:grid; gap:4px; font-size:14px; font-weight:700; }
input,select { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; background:#fff; }
input[aria-invalid="true"] { border-color:var(--danger); background:var(--danger-bg); }
.tabs { display:flex; gap:8px; }
.tabs button { flex:1; color:var(--ink); background:var(--surface); border-color:var(--line); }
.tabs button[aria-selected="true"] { color:#fff; background:var(--accent); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.tree-toolbar { margin:20px 0; padding:16px; background:var(--soft); border:1px solid #cfe4dc; border-radius:8px; }
.tree-toolbar-actions { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.tree-toolbar-actions .file-control { flex:1 1 280px; }
.tree-toolbar-actions .calculate-button { min-width:180px; font-size:16px; }
.tree-metrics { margin:16px 0 0; }
.settings { grid-column:2; grid-row:1 / span 4; align-self:start; position:sticky; top:16px; }
.settings label { margin:16px 0; }
.table-scroll { overflow-x:auto; margin:16px 0; }
table { width:100%; min-width:1180px; border-collapse:collapse; }
th,td { padding:8px; border-bottom:1px solid var(--line); text-align:left; }
.icon-button { min-width:48px; padding:8px; color:var(--danger); background:var(--surface); border-color:var(--line); }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.metrics article { padding:16px; background:var(--soft); border:1px solid #cfe4dc; border-radius:8px; }
.metrics span,.metrics strong { display:block; }
.metrics strong { margin-top:8px; font-size:16px; }
.soil-zone { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.zone-grid,.outcome { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.outcome { grid-template-columns:minmax(0,1fr) minmax(120px,180px) 48px; align-items:end; }
.outcome .icon-button { width:48px; min-width:48px; }
.validation-summary.is-error { color:var(--danger); background:var(--danger-bg); padding:16px; border:1px solid var(--danger); border-radius:8px; }
.import-preview,.result-tables { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.import-preview label { display:inline-flex; align-items:center; margin:8px 16px 8px 0; }
.import-preview input[type="radio"] { width:auto; margin-right:8px; }
.result-state { margin:16px 0 0; color:var(--muted); font-weight:700; }
.result-table { min-width:820px; }
.file-control { min-width:240px; }
.peat-evidence { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.peat-evidence textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; font:inherit; }
.peat-map { height:320px; margin:12px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.map-controls { display:flex; gap:8px; margin:8px 0 12px; }
.status { grid-column:1 / -1; }
@media (max-width:980px) { main { grid-template-columns:1fr; } .settings { grid-column:1; grid-row:auto; position:static; } .metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .site-header,.account-controls,.panel-heading,.actions,.tabs,.future-actions { align-items:stretch; flex-direction:column; } .account-controls>* ,.tabs button,.actions button { width:100%; } .metrics,.zone-grid { grid-template-columns:1fr; } .outcome { grid-template-columns:minmax(0,1fr) minmax(110px,1fr) 48px; gap:8px; } .project-bar { align-items:stretch; flex-direction:column; } }
.account-main { min-height:100vh; display:grid; place-items:center; padding:16px; }
.account-card { width:100%; max-width:440px; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 16px 32px rgba(24,42,34,.08); }
.account-card form p { margin:16px 0; }
.account-card button { width:100%; }