style.css

:root{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#94a3b8;--accent:#22c55e;--warn:#ef4444}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1220,#0f172a);font-family:Inter,system-ui,Segoe UI,Arial;color:var(--text)}
.container{max-width:980px;margin:0 auto;padding:24px}
header{margin-bottom:16px}
h1{margin:0 0 8px;font-size:28px}
.controls{margin:12px 0}
form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:240px;position:relative}
label{font-size:12px;color:var(--muted)}
input{padding:10px 12px;border-radius:8px;border:1px solid #1f2937;background:#0b1220;color:var(--text)}
button{padding:10px 16px;border:0;border-radius:8px;background:var(--accent);color:#052e16;font-weight:600;cursor:pointer}
.status{margin-top:10px;color:var(--muted)}
.btn-secondary{padding:10px 16px;border:1px solid #334155;border-radius:8px;background:#0b1220;color:var(--text);cursor:pointer}
button[disabled]{opacity:.6;cursor:not-allowed}
.summary,.recommendations{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric-label{font-size:12px;color:var(--muted)}
.metric-value{font-size:24px;margin-top:6px}
.fallback{margin-top:12px;display:flex;gap:8px;align-items:center}
.hidden{display:none}
.suggestions{position:absolute;z-index:10;margin-top:4px;background:#0b1220;border:1px solid #1f2937;border-radius:8px;list-style:none;padding:6px 0;width:100%}
.suggestions li{padding:8px 12px;cursor:pointer}
.suggestions li:hover{background:#111827}
.crop-list{list-style:none;margin:0;padding:0}
.crop-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #1f2937;border-radius:10px;margin-bottom:10px}
.score{font-size:12px;color:var(--muted)}
footer{margin-top:20px;color:var(--muted)}
@media (max-width:720px){.grid{grid-template-columns:1fr}}