:root { --ink:#16352e; --green:#087f5b; --green-dark:#075943; --mint:#e8f3ef; --paper:#fcfbf7; --line:#cad8d3; --orange:#d97706; --muted:#62716d; --shadow:0 18px 50px rgba(18,52,44,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:inherit; }
button,input,select { font:inherit; }
main { min-height:calc(100vh - 150px); }
.site-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); background:rgba(252,251,247,.95); position:relative; z-index:10; }
.site-header nav { display:flex; gap:22px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.03em; font-size:18px; line-height:1.15; flex-shrink:0; }
.brand-mark { display:block; width:40px; height:40px; flex-shrink:0; }
.brand-name { display:block; color:var(--ink); }
.brand-name strong { display:block; color:var(--green); font-weight:800; }
.site-footer { padding:42px 20px; text-align:center; color:var(--muted); border-top:1px solid var(--line); margin-top:72px; }
.container,.panel { width:min(1200px,calc(100% - 40px)); margin-inline:auto; }
.hero { text-align:center; padding:76px 20px 58px; background:radial-gradient(circle at 50% 20%,#dcefe8 0,transparent 38%); }
.eyebrow,.section-label { text-transform:uppercase; color:var(--green); font-weight:800; font-size:12px; letter-spacing:.18em; }
.hero h1 { max-width:900px; margin:14px auto; font-size:clamp(40px,6vw,76px); line-height:.98; letter-spacing:-.06em; }
.hero p { max-width:720px; margin:24px auto 0; color:var(--muted); font-size:20px; line-height:1.55; }
.panel,.chart-panel,.assumptions-card { background:white; border:1px solid var(--line); box-shadow:var(--shadow); }
.questionnaire { padding:clamp(24px,4vw,56px); border-radius:22px; }
fieldset { border:0; padding:0; margin:0 0 32px; }
legend { font-weight:800; font-size:24px; margin-bottom:18px; }
.choice-grid,.vehicles-grid,.field-grid,.metrics-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-card { border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; align-items:flex-start; gap:12px; cursor:pointer; transition:.2s; }
.choice-card input { flex:0 0 auto; width:auto; margin:3px 0 0; }
.choice-card>span { flex:1; min-width:0; float:none; line-height:1.45; font-weight:500; }
.choice-card:has(input:checked) { border-color:var(--green); box-shadow:0 0 0 3px rgba(8,127,91,.12); background:#f2faf7; }
.choice-card strong { display:block; margin-bottom:5px; }
.choice-card span { color:var(--muted); }
.choice-card strong { color:var(--ink); }
label { display:block; font-weight:700; font-size:14px; }
label>span { float:right; color:var(--muted); font-weight:500; }
input,select { width:100%; padding:14px 15px; margin-top:8px; border:1px solid #b8c9c3; border-radius:8px; background:#fbfaf6; color:var(--ink); }
input:focus,select:focus,button:focus-visible,a:focus-visible { outline:3px solid rgba(8,127,91,.25); outline-offset:2px; border-color:var(--green); }
.conditional { margin:0 0 28px; padding:20px; background:var(--mint); border-radius:12px; }
.conditional[hidden] { display:none; }
.prominent-field { max-width:560px; font-size:18px; margin:34px 0; }
.vehicles-grid { margin:34px 0; }
.vehicle-card { padding:26px; border:1px solid var(--line); border-radius:16px; position:relative; }
.vehicle-electric { border-top:4px solid var(--green); }
.vehicle-thermal { border-top:4px dashed #66736f; }
.vehicle-tag { position:absolute; right:20px; top:20px; color:var(--muted); font-size:12px; font-weight:900; }
.vehicle-card h2 { margin:0 0 24px; }
.vehicle-card details { margin-top:16px; }
summary { cursor:pointer; font-weight:700; }
.field-stack,.parameter-groups { display:grid; gap:14px; margin-top:18px; }
.selected-vehicle { min-height:24px; font-weight:700; color:var(--green); }
.search-results { position:relative; max-height:260px; overflow:auto; border-radius:8px; }
.vehicle-result { width:100%; padding:12px; border:0; border-bottom:1px solid var(--line); background:white; text-align:left; cursor:pointer; }
.vehicle-result:hover { background:var(--mint); }
.primary-button,.secondary-button { display:inline-flex; justify-content:center; align-items:center; gap:20px; padding:16px 24px; border:0; border-radius:8px; background:var(--green); color:white; font-weight:800; text-decoration:none; cursor:pointer; }
.primary-button:hover { background:var(--green-dark); }
.questionnaire>.catalog-date { text-align:right; color:var(--muted); font-size:13px; }
.warning,.flash { padding:16px 20px; background:#fff3d6; border:1px solid #edc36c; border-radius:8px; }
.flash { width:min(900px,calc(100% - 40px)); margin:18px auto; }
.result-hero { background:var(--mint); padding:42px max(20px,calc((100vw - 1200px)/2)) 58px; }
.result-hero p { margin:42px 0 4px; color:var(--muted); }
.result-hero h1 { margin:0; color:var(--green-dark); font-size:clamp(48px,7vw,84px); line-height:1; letter-spacing:-.06em; }
.back-link { text-decoration:none; font-weight:700; }
.metrics-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:28px; }
.metric { border:1px solid var(--line); padding:24px; background:white; min-height:150px; display:flex; flex-direction:column; }
.metric span,.metric small { color:var(--muted); }
.metric strong { font-size:28px; margin:auto 0 6px; letter-spacing:-.04em; }
.metric-accent { background:var(--ink); color:white; }
.metric-accent span,.metric-accent small { color:#cfe0db; }
.chart-panel { margin-top:28px; padding:30px; min-height:480px; }
.chart-panel h2 { margin:8px 0 20px; }
.chart-panel canvas { width:100%!important; height:340px!important; }
.chart-panel details { margin-top:20px; }
.table-scroll { max-height:400px; overflow:auto; }
table { width:100%; border-collapse:collapse; margin-top:14px; }
th,td { padding:9px; text-align:left; border-bottom:1px solid var(--line); }
.carbon-section { background:var(--mint); margin-top:60px; padding:28px 0 60px; }
.carbon-metrics { margin-top:0; margin-bottom:28px; }
.carbon-section .chart-panel { margin-top:0; }
.carbon-summary { display:flex; gap:24px; margin-bottom:12px; font-weight:800; }
.assumptions-card { margin-top:34px; padding:28px; }
.assumptions-card summary span { display:flex; flex-direction:column; gap:4px; }
.assumptions-card summary small { color:var(--muted); font-weight:500; }
.assumptions-card form { margin-top:26px; }
.assumption-group { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.assumption-group:first-of-type { margin-top:8px; }
.assumption-group h3 { margin:0; font-size:17px; }
.assumption-group .parameter-groups { margin-top:14px; }
.assumption-group+.primary-button { margin-top:28px; }
.parameter-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
.export-actions { display:flex; gap:12px; margin-top:24px; }
.secondary-button { background:white; color:var(--ink); border:1px solid var(--line); }
.muted { color:var(--muted); cursor:default; }
.auth-card { width:min(480px,calc(100% - 40px)); margin:72px auto; padding:36px; border:1px solid var(--line); background:white; box-shadow:var(--shadow); border-radius:16px; }
.auth-card.wide { width:min(650px,calc(100% - 40px)); }
.auth-card form { display:grid; gap:20px; }
.auth-card small,.parameter-section small { display:block; color:var(--muted); font-weight:500; margin-top:6px; }
.admin-page { padding-top:52px; }
.admin-page>h1,.admin-heading h1 { font-size:44px; letter-spacing:-.04em; }
.admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }
.admin-grid a { display:flex; flex-direction:column; padding:28px; min-height:150px; border:1px solid var(--line); background:white; text-decoration:none; }
.admin-grid strong { font-size:42px; color:var(--green); }
.admin-grid span { margin-top:auto; color:var(--muted); }
.admin-heading { display:flex; align-items:center; justify-content:space-between; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.actions form { display:inline; }
.actions button { border:0; background:none; text-decoration:underline; cursor:pointer; color:var(--ink); }
.actions .danger { color:#b42318; }
.parameter-section,.upload-card { padding:24px; margin:20px 0; border:1px solid var(--line); background:white; }
.parameter-section h2 { margin-top:0; }
.sticky-save { position:sticky; bottom:20px; margin-top:20px; }
.upload-card form { display:flex; align-items:end; gap:16px; }
.upload-card form label { flex:1; }
@media (max-width:850px) { .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .parameter-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .site-header { padding:0 18px; }.site-header nav { gap:10px; font-size:13px; }.hero { padding-top:48px; }.hero p { font-size:17px; }.choice-grid,.vehicles-grid,.field-grid,.metrics-grid,.parameter-groups,.admin-grid { grid-template-columns:1fr; }.questionnaire { width:100%; border-radius:0; border-inline:0; padding:24px 18px; }.chart-panel { width:100%; border-inline:0; padding:22px 16px; }.result-hero { padding-inline:18px; }.metric strong { font-size:24px; }.admin-heading,.upload-card form { align-items:stretch; flex-direction:column; }.admin-page>h1,.admin-heading h1 { font-size:34px; } }
@media (max-width:640px) {
    .site-header { height:auto; min-height:72px; flex-wrap:wrap; gap:12px; padding-block:12px; }
    .site-header nav { flex-wrap:wrap; }
    .site-header nav a { display:inline-flex; align-items:center; min-height:44px; }
    input,select { font-size:16px; }
    .vehicle-card { padding:22px 18px; min-width:0; }
    .vehicle-card h2 { padding-right:26px; }
    .selected-vehicle { overflow-wrap:anywhere; }
    .export-actions { flex-direction:column; }
    .export-actions a,.questionnaire .primary-button { width:100%; }
}
@media print { .site-header,.site-footer,.back-link,.export-actions,.assumptions-card { display:none!important; } body { background:white; } .chart-panel,.metric { box-shadow:none; break-inside:avoid; } }