:root { color:#202a26; background:#f8f9f6; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; padding:88px 20px 40px; }
main { max-width:1120px; margin:auto; }
.eyebrow { color:#bf6126; font-size:.75rem; font-weight:800; letter-spacing:.13em; }
h1 { font-size:clamp(2.3rem,6vw,4.8rem); letter-spacing:-.06em; line-height:.95; margin:.25rem 0 1rem; }
.lead { font-size:1.2rem; max-width:680px; line-height:1.5; color:#526158; }
.controls { display:grid; grid-template-columns:1.3fr .7fr; gap:22px; margin:38px 0 18px; }
.panel, .selected-panel, .result-group { background:#fff; border:1px solid #dce1d6; border-radius:16px; padding:24px; box-shadow:0 8px 30px #33461a0a; }
.panel h2, .selected-panel h2 { margin:0 0 8px; font-size:1.2rem; }
.panel p { color:#586a60; line-height:1.45; margin:0 0 18px; }
input[type=file] { display:none; }
.upload, button { display:inline-flex; align-items:center; justify-content:center; border-radius:9px; cursor:pointer; font:inherit; font-weight:750; padding:12px 15px; }
.upload { background:#202a26; color:white; }
button { border:1px solid #cbd4c7; background:#fff; color:#202a26; }
button.primary { background:#d4792c; border-color:#d4792c; color:#241408; }
button:disabled { cursor:not-allowed; opacity:.45; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
label[for=model] { display:block; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#586a60; margin-bottom:7px; }
select { border:1px solid #cbd4c7; border-radius:8px; width:100%; padding:11px; background:#fff; font:inherit; }
.status { min-height:24px; color:#586a60; margin:16px 2px; font-size:.94rem; }
.status.error { color:#a33b27; }.status.success { color:#24744b; }.status.ready { color:#516e38; }
.selected-panel { margin:20px 0 30px; }.selected-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; }.selected-panel h2 { margin:0; }.selected-panel header span { color:#66776c; font-size:.85rem; }
#selected { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; margin:18px 0 0; padding:0; }
#selected li { border:1px solid #e2e7de; border-radius:9px; min-width:0; padding:10px; } #selected strong,#selected span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #selected strong { font-size:.86rem; } #selected span { color:#758279; font-size:.77rem; margin-top:4px; }
#results { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }.result-group { padding:20px; }.result-group h2 { font-size:1rem; margin:0 0 14px; }.result-group h2 span { color:#d4792c; font-size:.8rem; }
.result-group ul { list-style:none; margin:0; padding:0; }.result-group li { border-top:1px solid #edf0ea; padding:12px 0; }.result-group li:first-child { border-top:0; padding-top:0; }.result-group a { color:#202a26; font-weight:750; text-decoration:none; }.result-group a:hover { text-decoration:underline; }.result-group li div { display:flex; justify-content:space-between; gap:12px; color:#738077; font-size:.78rem; margin:5px 0; }.result-group b { color:#516e38; } meter { width:100%; height:6px; accent-color:#d4792c; }
.fine-print { color:#66776c; font-size:.8rem; line-height:1.45; margin-top:34px; }
@media(max-width:720px) { body { padding:112px 14px 28px; }.controls { grid-template-columns:1fr; } #selected { grid-template-columns:repeat(2,minmax(0,1fr)); } }