:root{--bg-base: #f4f1e8;--bg-panel: rgba(255, 255, 255, .78);--bg-panel-border: rgba(11, 42, 44, .14);--text-primary: #0b2a2c;--text-muted: #31555a;--accent-a: #0ea5a8;--accent-b: #ff8c42;--accent-c: #2a6fdb;--danger: #b42318;--tone-precip: #0b879b;--tone-temp: #d97706;--tone-weather: #2563eb;--tone-wind: #0f766e;--tone-pressure: #334155;--tone-cloud: #64748b;--tone-solar: #ca8a04;--tone-vpd: #3f6212;--tone-soil-temp: #9a3412;--tone-soil-moisture: #0369a1;--radius-lg: 20px;--radius-md: 14px;--shadow-soft: 0 15px 45px rgba(11, 42, 44, .12)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Avenir Next,Segoe UI,sans-serif;color:var(--text-primary);background:linear-gradient(155deg,#f6f3eb,#ecf6fa 55%,#fef5eb);line-height:1.5}.app-shell{width:min(1920px,calc(100vw - 2rem));margin:1rem auto 2rem;display:grid;gap:1.2rem}.hero{padding:1.2rem .1rem .6rem}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--accent-c);font-size:.78rem}h1{margin:.3rem 0;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.06}.hero p{max-width:72ch;margin:0;color:var(--text-muted)}.panel{background:var(--bg-panel);border:1px solid var(--bg-panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls{padding:1rem 1rem 1.2rem}.controls h2,.chart-panel h2,.data-table-panel h2{margin:0 0 .8rem;font-size:1.05rem}.field-grid{display:grid;gap:.9rem}.field label{font-weight:650;font-size:.92rem}.location-row,.coords-row,.dates-row,.submit-row{display:grid;gap:.65rem}.coords-row,.dates-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}input,button{font:inherit}input{width:100%;padding:.7rem .78rem;border:1px solid rgba(49,85,90,.36);border-radius:11px;background:#fffffff2;color:var(--text-primary)}input:focus{outline:3px solid color-mix(in srgb,var(--accent-c) 34%,white);border-color:var(--accent-c)}.help-text{margin:.4rem 0 0;font-size:.85rem;color:var(--text-muted)}.search-results{list-style:none;margin:.5rem 0 0;padding:0;max-height:220px;overflow-y:auto;border-radius:12px}.search-results:empty{display:none}.search-results li{margin:.22rem 0}.search-results button{width:100%;text-align:left;border:1px solid rgba(14,165,168,.28);background:#0ea5a817;padding:.55rem .65rem;border-radius:10px;cursor:pointer}.search-results button:hover{background:#0ea5a82e}.btn{border:0;padding:.72rem .9rem;border-radius:11px;cursor:pointer;font-weight:700}.btn.primary{background:linear-gradient(90deg,var(--accent-a),#0b879b);color:#fff}.btn.secondary{background:#2a6fdb1f;color:#16346c}.quick-ranges{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}.chip{border:1px solid rgba(49,85,90,.3);background:#ffffffb8;color:var(--text-primary);border-radius:999px;padding:.4rem .8rem;cursor:pointer}.chip:hover{border-color:var(--accent-a)}.chip.active{border-color:transparent;background:linear-gradient(90deg,var(--accent-a),#0b879b);color:#fff;box-shadow:0 8px 20px #0ea5a847}.chip:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-c) 34%,white);outline-offset:2px}.submit-row{grid-template-columns:auto 1fr;align-items:center;margin-top:.95rem}.status{margin:0;font-size:.9rem;color:var(--text-muted)}.status.error{color:var(--danger);font-weight:600}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}.metric-card{padding:.9rem;border-radius:var(--radius-md);background:linear-gradient(170deg,#ffffffe6,#ffffffa8);border:1px solid rgba(49,85,90,.13)}.metric-card h3{margin:0;font-size:.9rem;color:var(--text-muted)}.metric-value{margin:.3rem 0 0;font-weight:800;font-size:1.25rem}.tone-precip{--tone-color: var(--tone-precip)}.tone-temp{--tone-color: var(--tone-temp)}.tone-weather{--tone-color: var(--tone-weather)}.tone-wind{--tone-color: var(--tone-wind)}.tone-pressure{--tone-color: var(--tone-pressure)}.tone-cloud{--tone-color: var(--tone-cloud)}.tone-solar{--tone-color: var(--tone-solar)}.tone-vpd{--tone-color: var(--tone-vpd)}.tone-soil-temp{--tone-color: var(--tone-soil-temp)}.tone-soil-moisture{--tone-color: var(--tone-soil-moisture)}.metric-card[class*=tone-] h3,.chart-panel[class*=tone-] h2{color:var(--tone-color)}.metric-card[class*=tone-] .metric-value{color:color-mix(in srgb,var(--tone-color) 82%,#0b2a2c)}.chart-panel[class*=tone-]{box-shadow:inset 0 3px color-mix(in srgb,var(--tone-color) 45%,white),var(--shadow-soft)}.metric-value.compact{font-size:1rem;line-height:1.35}.chart-toggles-panel{padding:.95rem}.view-presets{display:inline-flex;gap:.45rem;margin:.25rem 0 .6rem;padding:.22rem;border-radius:999px;background:#0b2a2c12}.preset-btn{border:0;background:transparent;color:var(--text-primary);padding:.42rem .75rem;border-radius:999px;cursor:pointer;font-weight:700}.preset-btn.active{background:#fff;box-shadow:0 6px 16px #0b2a2c1f}.toggle-help{margin:0 0 .7rem;color:var(--text-muted);font-size:.9rem}.chart-toggles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.45rem}.toggle-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border:1px solid rgba(49,85,90,.23);border-radius:999px;background:#ffffffb3;font-size:.88rem}.toggle-chip input{width:16px;height:16px}.chart-grid{display:grid;gap:.85rem;grid-template-columns:1fr}.chart-grid.chart-grid--single{grid-template-columns:1fr!important}.chart-panel{padding:.9rem;display:flex;flex-direction:column}.chart-panel.is-hidden{display:none!important}.chart-canvas-wrap{position:relative;height:320px;min-height:320px}.chart-panel canvas{display:block;width:100%!important;height:100%!important}.table-wrap{overflow:auto;max-height:390px;border-radius:14px}table{width:100%;border-collapse:collapse;min-width:760px;background:#ffffff9e}th,td{text-align:left;padding:.62rem .65rem;border-bottom:1px solid rgba(49,85,90,.17)}th{position:sticky;top:0;background:#eef8f8;z-index:1}.data-table-panel{padding:.9rem}@media(min-width:760px){.location-row{grid-template-columns:1fr auto;align-items:start}.field-grid{grid-template-columns:1.2fr 1fr 1fr;align-items:start}.field-location{grid-column:1 / -1}.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1200px){.chart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.app-shell{width:calc(100vw - 1rem);margin-top:1rem}.submit-row{grid-template-columns:1fr}}
