:root{
  --bg:#f4f7f0; --surface:#ffffff; --surface2:#f8faf5; --ink:#19241b; --muted:#6c786f;
  --brand:#2f5f37; --brand2:#4c7c54; --soft:#e6efe3; --soft2:#eef4eb; --line:#d7e1d5;
  --warn:#9b6a16; --danger:#a03b3b; --shadow:0 10px 30px rgba(25,65,34,.08); --radius:22px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(#f7faf4,#eef4eb);color:var(--ink);min-height:100%}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{max-width:920px;margin:auto;min-height:100vh;background:rgba(250,252,247,.86);padding:18px 18px 104px}
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:8px 0 18px}
.brandline{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:14px;background:var(--brand);display:grid;place-items:center;color:white;font-size:1.45rem;box-shadow:var(--shadow)}
.kicker{letter-spacing:.16em;font-weight:900;color:var(--brand2);font-size:.7rem}
h1{font-size:clamp(2rem,8vw,3.15rem);margin:.2rem 0 .35rem;line-height:1}
h2{margin:.2rem 0 0}
h3{margin:.2rem 0 .35rem}
.subtitle{color:var(--muted);font-size:1rem;line-height:1.45;margin:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:20px;background:linear-gradient(140deg,#fff,#edf5e9);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.hero-icon{font-size:3rem}
.tabs{display:flex;gap:8px;overflow:auto;padding:2px 0 8px;margin:16px 0 20px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;border:0;background:#dfe8dd;padding:12px 17px;border-radius:15px;font-weight:850;color:var(--ink)}
.tab.active{background:var(--brand);color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.metric{padding:20px 16px;min-height:118px}
.metric-label{color:var(--muted);font-weight:700}
.metric-value{font-size:2.25rem;font-weight:900;margin-top:5px}
.section{margin:25px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px}
.section-head h2{font-size:1.45rem}
.primary,.secondary,.danger,.ghost{border-radius:14px;padding:11px 14px;font-weight:850}
.primary{border:0;background:var(--brand);color:#fff}
.secondary{border:1px solid var(--line);background:#fff;color:var(--brand)}
.danger{border:0;background:#f8e8e8;color:var(--danger)}
.ghost{border:0;background:transparent;color:var(--brand)}
.iconbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:white;font-size:1.2rem}
.list{display:grid;gap:10px}
.row{display:flex;gap:12px;align-items:center;padding:14px 15px}
.row-main{flex:1;min-width:0}
.row-main b{display:block}
.small{font-size:.84rem;color:var(--muted);line-height:1.4}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:.74rem;font-weight:850}
.badge.warn{background:#f8efd9;color:var(--warn)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.bottom-nav{position:fixed;z-index:50;bottom:0;left:50%;transform:translateX(-50%);width:min(920px,100%);background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.nav{border:0;background:transparent;color:var(--muted);padding:6px 2px;border-radius:14px;font-size:.73rem;font-weight:850}
.nav span{display:block;font-size:1.25rem;line-height:1.1;margin-bottom:2px}
.nav.active{background:var(--soft);color:var(--brand)}
.map-wrap{padding:14px}
.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.map-board{position:relative;height:520px;border:2px dashed #b8c8b6;border-radius:18px;background:
 linear-gradient(#edf3e9 1px,transparent 1px),linear-gradient(90deg,#edf3e9 1px,transparent 1px),#fbfcf8;
 background-size:24px 24px;overflow:hidden;touch-action:none}
.plot{position:absolute;border:2px solid rgba(40,85,47,.34);border-radius:12px;background:#dce9d7;padding:8px;user-select:none;touch-action:none;box-shadow:0 5px 15px rgba(30,60,35,.08);min-width:64px;min-height:52px;overflow:hidden}
.plot[data-type="Planter"]{background:#e9e2cf}
.plot[data-type="Potato sack"]{background:#dfd4c4;border-radius:38%}
.plot[data-type="Greenhouse"]{background:#dcebee}
.plot[data-type="Open ground"]{background:#e1ecd4}
.plot[data-type="Fruit cage"]{background:#e7e0ef}
.plot.selected{outline:3px solid var(--brand)}
.plot-title{font-weight:900;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plot-crop{font-size:.7rem;color:#526053;margin-top:3px}
.resize-handle{position:absolute;right:3px;bottom:3px;width:18px;height:18px;border-radius:50%;background:var(--brand);border:2px solid white}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-weight:800}
.form input,.form select,.form textarea{padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal{position:fixed;z-index:100;inset:0;background:rgba(12,24,15,.45);display:grid;place-items:end center;padding:18px}
.sheet{width:min(650px,100%);max-height:88vh;overflow:auto;background:white;border-radius:28px 28px 18px 18px;padding:22px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.crop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.crop{padding:16px}
.crop .emoji{font-size:2rem}
.crop p{margin:.5rem 0}
.search{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.callout{padding:16px;background:#eef5ea;border:1px solid #d4e4cf;border-radius:18px}
.seed-card,.weather-card{padding:16px}
.empty{padding:28px;text-align:center;border:1px dashed var(--line);border-radius:18px;color:var(--muted);background:#fff}
.progress{height:9px;background:#edf1ea;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--brand);border-radius:999px}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick{padding:15px;text-align:left;border:1px solid var(--line);background:white;border-radius:18px}
.quick b{display:block;margin-top:6px}
.photo-preview img{width:100%;max-height:360px;object-fit:cover;border-radius:18px}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
@media(max-width:650px){
  .grid3{grid-template-columns:1fr}
  .grid2,.crop-grid{grid-template-columns:1fr}
  .metric{min-height:auto}
  .map-board{height:460px}
}