:root { --ink:#1c2920; --muted:#68736a; --green:#294936; --leaf:#86a768; --cream:#f6f3ec; --card:#fffdfa; --line:#e3e2d9; --coral:#d8795d; --shadow:0 8px 28px #233b2910; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--cream); } button,input,select,textarea { font:inherit; } button { color:inherit; cursor:pointer; } #app { max-width:760px; margin:0 auto; padding:24px 18px 122px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; } .brand { font-weight:800; font-size:1.2rem; letter-spacing:-.04em; } .brand i { font-style:normal; color:var(--leaf); } .icon-btn,.round-btn { border:1px solid var(--line); background:var(--card); border-radius:14px; min-height:42px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
h1 { font-size:2rem; letter-spacing:-.06em; line-height:1.04; margin:3px 0 8px; } h2 { font-size:1.15rem; margin:27px 0 12px; letter-spacing:-.03em; } .muted { color:var(--muted); } .eyebrow { color:var(--green); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .hero { padding:20px 0 2px; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:20px 0 29px; } .summary div { background:#e8efdf; border-radius:16px; padding:13px; } .summary strong { display:block; font-size:1.25rem; } .summary span { font-size:.76rem; color:#506052; }
.card { background:var(--card); border:1px solid var(--line); border-radius:19px; box-shadow:var(--shadow); } .attention-card { display:flex; align-items:center; padding:11px; gap:13px; margin:9px 0; text-align:left; width:100%; } .attention-card .arrow { margin-left:auto; color:var(--muted); font-size:1.25rem; }.thumb { width:60px; height:60px; border-radius:14px; object-fit:cover; background:#dce7d5; flex:none; }.thumb-placeholder { display:grid; place-items:center; font-size:1.7rem; background:#dce7d5; } .plant-copy { min-width:0; } .plant-copy strong,.plant-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .plant-copy small { color:var(--muted); margin-top:3px; }
.activity { padding:2px 0; } .activity-row { padding:13px 3px; display:flex; gap:11px; border-bottom:1px solid var(--line); align-items:center; } .event-dot { width:32px; height:32px; display:grid; place-items:center; flex:none; border-radius:11px; background:#eef3e8; } .activity-row small { color:var(--muted); display:block; margin-top:2px; }
.bottom-nav { position:fixed; z-index:5; bottom:0; left:50%; transform:translateX(-50%); width:min(760px,100%); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; height:76px; padding:7px 9px calc(7px + env(safe-area-inset-bottom)); background:#fffdfaf2; border-top:1px solid var(--line); backdrop-filter:blur(10px); } .nav-btn { min-width:0; background:none; border:0; color:var(--muted); font-size:.66rem; font-weight:750; line-height:1; display:grid; gap:4px; place-items:center; } .nav-icon { width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .nav-btn.active { color:var(--green); } .add-fab { width:54px;height:54px; border-radius:19px; border:0; color:white; background:var(--green); font-size:1.95rem; line-height:1; box-shadow:0 8px 17px #2949364d; margin:auto; transform:translateY(-13px); }
.search { width:100%; border:1px solid var(--line); background:var(--card); padding:13px 14px; border-radius:14px; margin:9px 0 12px; outline-color:var(--leaf); }.filters { display:flex; gap:8px; overflow:auto; padding-bottom:7px; }.chip { white-space:nowrap; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 11px; font-size:.82rem; }.chip.selected { background:var(--green); color:#fff; border-color:var(--green); }.plant-grid { display:grid; gap:10px; }.plant-card { width:100%; border:1px solid var(--line); background:var(--card); border-radius:17px; padding:10px; display:flex; gap:12px; text-align:left; }.plant-card .thumb { width:66px;height:66px; }.badge { display:inline-block; padding:4px 7px; background:#edf3e7; color:var(--green); border-radius:999px; font-size:.69rem; font-weight:750; margin-top:6px; }.badge.rehab { background:#fff0db; color:#9a5c0e; }.badge.dormant { background:#e8edf1; color:#4d6572; }.badge.dead,.badge.sold { background:#f0e6e1; color:#8b4b3a; }
.detail-hero { display:grid; grid-template-columns:112px 1fr; gap:17px; align-items:center; margin:10px 0 23px; }.detail-hero .thumb { width:112px; height:112px; border-radius:21px; font-size:2.8rem; }.meta { color:var(--muted); font-size:.87rem; line-height:1.65; }.stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.stat { border:1px solid var(--line); border-radius:14px; padding:11px; background:var(--card); }.stat span,.stat strong { display:block; }.stat span { font-size:.7rem; color:var(--muted); }.stat strong { font-size:.86rem; margin-top:4px; }.primary { width:100%; border:0; border-radius:15px; padding:15px; background:var(--green); color:#fff; font-weight:800; font-size:1rem; }.secondary { border:1px solid var(--line); border-radius:13px; padding:11px; background:var(--card); font-weight:700; }.two { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px; }
.timeline { position:relative; padding-left:22px; }.timeline:before { content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--line); }.timeline-item { position:relative; padding:0 0 18px 7px; }.timeline-item:before { content:""; position:absolute; left:-20px; top:6px; width:10px;height:10px;border-radius:50%;background:var(--leaf); border:2px solid var(--cream); }.timeline-item strong,.timeline-item small { display:block; }.timeline-item small { color:var(--muted); margin-top:2px; }
.modal-backdrop { position:fixed; inset:0; z-index:20; background:#17251b73; display:flex; align-items:end; justify-content:center; padding:16px; }.modal { width:min(610px,100%); max-height:90vh; overflow:auto; background:var(--card); border-radius:24px; padding:20px; box-shadow:0 18px 50px #1118; }.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.modal-head h2 { margin:0; }.close { border:0; background:none; font-size:1.6rem; color:var(--muted); }.event-options { display:grid; gap:9px; }.event-option { text-align:left; padding:14px; border:1px solid var(--line); background:#fff; border-radius:15px; display:flex; gap:12px; align-items:center; }.event-option b { display:block; }.event-option small { display:block; color:var(--muted); margin-top:2px; }.event-icon { font-size:1.35rem; width:28px; text-align:center; }.form-grid { display:grid; gap:13px; }.field { display:grid; gap:6px; font-size:.82rem; font-weight:750; }.field input,.field select,.field textarea { border:1px solid var(--line); border-radius:11px; padding:11px; background:white; color:var(--ink); }.field textarea { min-height:76px; resize:vertical; }.choice-row { display:flex; gap:7px; flex-wrap:wrap; }.choice { padding:9px 11px; border-radius:11px; border:1px solid var(--line); background:white; }.choice.selected { background:#e4eedb; border-color:var(--leaf); color:var(--green); font-weight:800; }.empty { color:var(--muted); padding:25px 8px; text-align:center; }.notice { background:#eef3e8; border-radius:13px; padding:12px; font-size:.83rem; color:#47604c; margin:0 0 13px; }.danger { color:#a54d3c; }.settings-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }.settings-row p { margin:2px 0 0; color:var(--muted); font-size:.82rem; }.hidden { display:none!important; }
@media (min-width:620px) { #app { padding-top:36px; }.plant-grid { grid-template-columns:1fr 1fr; }.hero h1 { font-size:2.4rem; } }