/* FloraSense components: status language, gauge, plant cards, calendar, forms, charts. */
svg.i.down { transform: rotate(90deg); } svg.i.flip { transform: rotate(180deg); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .sec-head h2 { font-size: 1.2rem; }
.seg.wrap { flex-wrap: wrap; } .seg .cnt { margin-left: 6px; font-size: .74rem; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--muted); } .seg button[aria-pressed="true"] .cnt { background: var(--accent-soft); color: var(--accent-ink); }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.empty-line { grid-column: 1 / -1; text-align: center; padding: 18px; }
.one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dim { opacity: .5; }
.crumbs-row { margin-bottom: -8px; }

/* status colours */
.s-weather_alert { --sc: var(--bad); --sc-soft: var(--bad-soft); } .s-water_today { --sc: var(--water); --sc-soft: var(--water-soft); }
.s-water_soon { --sc: var(--warn); --sc-soft: var(--warn-soft); } .s-postponed { --sc: var(--soil); --sc-soft: var(--soil-soft); } .s-ok { --sc: var(--ok); --sc-soft: var(--ok-soft); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--sc, var(--ink-2)); background: var(--sc-soft, var(--bg-2)); }
.pill .i { width: 14px; height: 14px; }
.achip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; font-size: .76rem; font-weight: 700; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.achip.critical { background: var(--bad-soft); color: var(--bad); } .achip.info { background: var(--water-soft); color: var(--water); } .achip .i { width: 13px; height: 13px; }
.shift { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 650; color: var(--soil); background: var(--soil-soft); padding: 3px 9px; border-radius: 8px; white-space: nowrap; } .shift .i { width: 13px; height: 13px; } .shift.earlier { color: var(--water); background: var(--water-soft); } .s-ok .shift, .s-water_soon .shift { color: var(--muted); background: var(--bg-2); }
.badge.lg { padding: 5px 13px; font-size: .86rem; }

/* moisture gauge */
.gauge { flex: none; display: block; } .g-track { fill: none; stroke: var(--bg-2); } .g-arc { fill: none; stroke: var(--sc, var(--water)); transition: stroke-dasharray .6s ease; }
.gauge.g-weather_alert { --sc: var(--bad); } .gauge.g-water_today { --sc: var(--water); } .gauge.g-water_soon { --sc: var(--warn); } .gauge.g-postponed { --sc: var(--soil); } .gauge.g-ok { --sc: var(--ok); }
.g-tick { stroke: var(--ink); opacity: .7; stroke-linecap: round; } .g-num { font-size: 27px; font-weight: 750; fill: var(--ink); letter-spacing: -.03em; } .g-unit { font-size: 11px; fill: var(--muted); font-weight: 600; }

/* plant cards */
.plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.plant-card { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; align-content: start; }
.plant-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.plant-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc, var(--line)); }
.pc-top { display: flex; gap: 14px; align-items: center; } .pc-body { min-width: 0; display: grid; gap: 3px; } .pc-body h3 { font-size: 1.04rem; }
.pc-link { color: var(--ink); } .pc-link:hover { text-decoration: none; color: var(--accent-ink); } .pc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sub { color: var(--muted); font-size: .86rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-next { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--ink-2); } .pc-next.now { color: var(--water); } .pc-next .i { width: 15px; height: 15px; flex: none; }
.pc-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-note { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.pc-foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.split-btn { position: relative; display: inline-flex; z-index: 2; } .split-btn > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .split-btn > .btn:nth-child(2) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-inline: 8px; }
.water-pop { right: 0; left: auto; top: calc(100% + 6px); min-width: 230px; display: grid; gap: 8px; padding: 14px; } .water-pop label { color: var(--muted); font-weight: 600; }

/* kpi chips, hero */
.kchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.kchip { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-solid); border: 1px solid var(--line); }
.kchip b { display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.03em; } .kchip span:not(.ki) { color: var(--muted); font-size: .8rem; }
.ki { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.kchip.water .ki { background: var(--water-soft); color: var(--water); } .kchip.warn .ki { background: var(--warn-soft); color: var(--warn); } .kchip.ok .ki { background: var(--ok-soft); color: var(--ok); }
.hero { position: relative; display: flex; gap: 20px; align-items: center; padding: 26px 28px; border-radius: 24px; overflow: hidden; color: #f2faf4;
  background: radial-gradient(120% 140% at 100% 0%, rgba(92,201,138,.35), transparent 55%), linear-gradient(135deg, #1f5c3a, #14402a); box-shadow: var(--shadow-lg); }
.hero.frosty { background: radial-gradient(120% 140% at 100% 0%, rgba(124,200,232,.4), transparent 55%), linear-gradient(135deg, #1c4f6b, #123349); }
.hero.calm { background: radial-gradient(120% 140% at 100% 0%, rgba(184,100,58,.22), transparent 55%), linear-gradient(135deg, #2a6b46, #1a4a30); }
.hero-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.14); flex: none; } .hero-ic svg { width: 32px; height: 32px; }
.hero-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .hero-line { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 650; letter-spacing: -.02em; margin: 4px 0 0; line-height: 1.3; }
.hero .badge { background: rgba(255,255,255,.16); color: #fff; } .hero .small.muted { color: rgba(255,255,255,.75); } .hero-body { min-width: 0; display: grid; gap: 8px; }

/* attention */
.att-list { display: grid; gap: 12px; }
.att { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); transition: opacity .4s, transform .4s; }
.att::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc, var(--line)); }
.att h3 { font-size: 1rem; } .att-note { margin: 6px 0 8px; font-size: .9rem; color: var(--ink-2); } .att-body { min-width: 0; }
.att.done { opacity: .35; transform: scale(.98); } .att-act { align-self: center; }
.calm-box { display: flex; gap: 14px; align-items: center; padding: 6px 2px; } .calm-box p { margin: 2px 0 0; } .cb-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); flex: none; }

/* gardens */
.garden-card { display: grid; gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; align-content: start; }
.garden-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.garden-card.gs-attention { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.gc-title h3 { font-size: 1.08rem; } .gc-head { margin: 0; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.gc-wx { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--ink-2); font-size: .9rem; } .gc-wx span { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); } .gc-wx b { font-size: 1.05rem; color: var(--ink); }
.gc-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); } .gc-foot span { display: inline-flex; gap: 5px; align-items: center; } .gc-foot .is-water { color: var(--water); font-weight: 700; } .gc-foot .is-warn { color: var(--warn); font-weight: 700; }
.wtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.wtile { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-solid); border: 1px solid var(--line); }
.wtile b { display: block; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; } .wt-l { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .wt-s { display: block; font-size: .8rem; color: var(--muted); }
.wt-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.wtile.frost { border-color: color-mix(in srgb, var(--frost) 55%, var(--line)); background: linear-gradient(135deg, var(--frost-soft), var(--surface-solid) 70%); } .wtile.frost .wt-ic { background: var(--frost); color: #fff; }
.insight { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--soil-soft); border: 1px solid color-mix(in srgb, var(--soil) 30%, transparent); color: var(--ink-2); } .insight .i { color: var(--soil); margin-top: 3px; width: 20px; height: 20px; flex: none; }
.insight.muted-ins { background: var(--bg-2); border-color: var(--line); } .insight.muted-ins .i { color: var(--muted); }
.fc-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fc-day { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; } .fc-day.today { border-color: var(--accent); background: var(--accent-soft); } .fc-day.frost { border-color: var(--frost); background: var(--frost-soft); }
.fd-dow { font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .fd-ic { color: var(--ink-2); display: grid; margin: 4px 0; } .fd-ic .i { width: 24px; height: 24px; } .fd-lo { color: var(--muted); font-size: .86rem; } .fd-rain { font-size: .74rem; color: var(--water); font-weight: 600; margin-top: 4px; }
.how { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-solid); } .how summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; } .how summary::-webkit-details-marker { display: none; } .how summary .i { color: var(--ok); width: 22px; height: 22px; } .how summary b { display: block; } .how-in { padding: 0 16px 16px; display: grid; gap: 8px; }
.checks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .checks-list li { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); } .checks-list li .i { color: var(--ok); margin-top: 2px; flex: none; } .checks-list li.fail { background: var(--bad-soft); } .checks-list li.fail .i { color: var(--bad); }
.first-plant.spot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; } .feed .fi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--info-soft); color: var(--info); } .feed .warning .fi { background: var(--warn-soft); color: var(--warn); } .feed .critical .fi { background: var(--bad-soft); color: var(--bad); }
.onboard { padding: 10px; } .ob-hero { padding: 6px 0 0; } .ob-steps { list-style: none; margin: 8px 0 4px; padding: 0 12px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ob-steps li { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); } .ob-steps li.on { border-color: var(--accent); background: var(--accent-soft); } .ob-steps p { margin: 2px 0 10px; }
.ob-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; flex: none; }

/* illustration + empty states */
.art { width: 150px; height: 122px; } .art-shadow { fill: var(--bg-2); } .art-pot { fill: var(--soil); } .art-rim { fill: color-mix(in srgb, var(--soil) 80%, #000); } .art-stem { stroke: var(--accent-strong); } .art-leaf { fill: var(--accent); } .art-leaf2 { fill: color-mix(in srgb, var(--accent) 70%, var(--water)); } .art-spark { stroke: var(--peak); }
.empty.art-empty .big { width: auto; height: auto; background: none; margin-bottom: 4px; } .empty.art-empty .big svg { width: 150px; height: 122px; }

/* calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-day { display: grid; gap: 3px; justify-items: center; padding: 10px 4px; min-height: 108px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: center; color: var(--ink); align-content: start; transition: transform .15s, border-color .15s; }
.cal-day:hover { transform: translateY(-2px); border-color: var(--line-2); } .cal-day[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface-solid); } .cal-day.today { background: var(--accent-soft); } .cal-day.frost { background: linear-gradient(180deg, var(--frost-soft), var(--surface-2)); }
.cd-dow { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .cd-date { font-size: .82rem; font-weight: 650; } .cd-wx { display: grid; justify-items: center; gap: 1px; font-size: .74rem; color: var(--muted); } .cd-wx .i { width: 18px; height: 18px; color: var(--ink-2); }
.cd-marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 2px; } .cd-drop, .cd-warn { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; font-size: .74rem; font-weight: 800; } .cd-drop { background: var(--water-soft); color: var(--water); } .cd-warn { background: var(--warn-soft); color: var(--warn); } .cd-drop .i, .cd-warn .i { width: 12px; height: 12px; } .cd-none { color: var(--faint); }
.cal-detail { margin-top: 14px; } .cal-detail-in { padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; animation: fade .2s; } .cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cal-list li { display: flex; align-items: center; gap: 8px; } .cal-list .i { color: var(--water); } .cal-list.warn .i { color: var(--warn); }
.ics-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ics-list li { display: flex; align-items: center; gap: 10px; }

/* forms */
.form-card, .step { max-width: 920px; } .form-grid.one { grid-template-columns: minmax(0, 1fr); } .form-actions { max-width: 920px; position: sticky; bottom: 0; padding: 22px 0 12px; z-index: 3; background: linear-gradient(180deg, transparent, var(--bg) 40%); pointer-events: none; } .form-actions > * { pointer-events: auto; }
.place-card { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line-2); margin-top: 6px; } .pc-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.combo { position: relative; display: grid; gap: 4px; } .combo-list { position: absolute; z-index: 20; top: 46px; left: 0; right: 0; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; }
.combo-list li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; } .combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--accent-soft); } .combo-list .i { color: var(--accent-ink); }
.plant-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; } .summary { position: sticky; top: 84px; display: grid; gap: 10px; text-align: center; } .sum-art { display: grid; justify-items: center; } .sum-art .art { width: 120px; height: 98px; }
.sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; } .sum-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; } .sum-list .i { color: var(--accent-ink); margin-top: 2px; }
.step-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .step-head h2 { font-size: 1.1rem; }
.opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .opt-row.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.place-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px; }
.opt { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 14px; min-height: 64px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s, transform .15s; }
.opt:hover { border-color: var(--line-2); transform: translateY(-1px); } .opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } .opt .big { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-solid); color: var(--accent-ink); margin-bottom: 4px; }
.reveal-box { display: grid; gap: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); margin-top: 14px; animation: fade .25s; } .reveal-box.slim { margin-top: 8px; max-width: 360px; }
.compass { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 6px; justify-content: start; }
.cp { border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-solid); font-weight: 800; cursor: pointer; color: var(--ink-2); } .cp.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cp-north { grid-column: 2; grid-row: 1; } .cp-west { grid-column: 1; grid-row: 2; } .cp-east { grid-column: 3; grid-row: 2; } .cp-south { grid-column: 2; grid-row: 3; } .cp-mid { grid-column: 2; grid-row: 2; display: grid; place-items: center; color: var(--faint); }
.range { width: 100%; accent-color: var(--accent); height: 32px; } .field label output { font-weight: 800; color: var(--accent-ink); margin-left: 6px; }
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; padding: 4px; margin: -4px; }
.sp-card { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink); align-content: start; min-height: 74px; } .sp-card em { color: var(--muted); font-size: .8rem; } .sp-card:hover { border-color: var(--line-2); } .sp-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.picked { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); }
.photo-drop { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px 18px; border-radius: 18px; border: 2px dashed var(--line-2); background: var(--surface-2); transition: border-color .15s, background .15s; } .photo-drop.over { border-color: var(--accent); background: var(--accent-soft); } .photo-drop .big { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-ink); } .photo-drop .big svg { width: 28px; height: 28px; }
.ident { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; } .ident-img { width: 150px; height: 150px; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); } .ident-card { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); } .ident-match { display: flex; gap: 8px; align-items: center; color: var(--ok); font-weight: 600; font-size: .88rem; }
.work { text-align: center; display: grid; gap: 10px; justify-items: center; width: min(400px, 100%); } .work-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); animation: sway 2.4s ease-in-out infinite; } .work-art svg { width: 32px; height: 32px; }
.work-bar { width: 100%; height: 6px; border-radius: 6px; background: var(--bg-2); overflow: hidden; } .work-bar i { display: block; width: 40%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--water)); animation: slide 1.4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(6deg) scale(1.05); } } @keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* plant page */
.phero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px; position: relative; overflow: hidden; }
.phero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--sc, var(--line)); } .phero-art { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--bg-2); color: var(--faint); }
.phero h1 { font-size: 1.9rem; margin: 6px 0 2px; } .phero-body { display: grid; gap: 8px; min-width: 0; } .phero-next { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; } .phero-next .i { color: var(--water); width: 22px; height: 22px; flex: none; } .phero-note { margin: 0; color: var(--ink-2); max-width: 62ch; } .phero-act { display: grid; gap: 8px; justify-items: stretch; } .phero-act .btn { justify-content: center; }
.alert-list { display: grid; gap: 10px; } .alert-row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); } .alert-row.critical { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .alert-row > div { flex: 1; min-width: 0; } .alert-row .fi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--warn); color: #fff; flex: none; } .alert-row.critical .fi { background: var(--bad); }
.facts { display: grid; gap: 14px; } .fact { display: flex; gap: 12px; } .fact .fi { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); flex: none; } .fl { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .fl b { font-size: 1.05rem; white-space: nowrap; } .fact > div { flex: 1; min-width: 0; }
.mchart { position: relative; } .mchart svg { display: block; width: 100%; outline: none; } .mchart svg:focus-visible { box-shadow: var(--ring); }
.mc-dry { fill: var(--soil-soft); } .mc-fc { fill: var(--accent-soft); opacity: .55; } .mc-thr { stroke: var(--soil); stroke-width: 1.5; stroke-dasharray: 6 5; } .mc-thr-l { fill: var(--soil); font-weight: 700; font-size: 11px; }
.mc-line { stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .mc-line.past { stroke: var(--water-2); } .mc-line.fc { stroke: var(--water); } .mc-line.est { stroke: var(--water); stroke-dasharray: 2 7; opacity: .8; } .mc-area { fill: var(--water-soft); opacity: .6; }
.mc-line.unwatered { stroke: var(--faint); stroke-dasharray: 3 6; opacity: .7; } .mc-un-l { fill: var(--faint); font-size: 11px; font-style: italic; }
.mc-rain { fill: var(--water); opacity: .45; } .mc-today { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .5; } .mc-today-l { font-weight: 800; fill: var(--ink-2); } .mc-dot { fill: var(--water); stroke: var(--surface-solid); stroke-width: 3; }
.mc-water circle { fill: var(--accent); stroke: var(--surface-solid); stroke-width: 3; } .mc-drop { fill: #fff; } .mc-water-l { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 4; } .mc-water-t { fill: var(--accent-ink); font-weight: 800; font-size: 11.5px; }
.mc-cur line { stroke: var(--ink); opacity: .35; } .mc-cur circle { fill: var(--surface-solid); stroke: var(--water); stroke-width: 3; }
.wm-max { stroke: var(--soil); stroke-width: 2.5; } .wm-min { stroke: var(--frost); stroke-width: 2.5; }
.diag-list { display: grid; gap: 12px; } .diag-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; color: inherit; padding: 8px; border-radius: 14px; } .diag-item:hover { text-decoration: none; background: var(--surface-2); } .diag-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); } .diag-item p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-2); }
.doc-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } .doc-preview img { width: 100%; height: 170px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.diag-photo { margin: 0; display: grid; gap: 8px; } .diag-photo img { width: 100%; max-height: 520px; object-fit: contain; border-radius: 14px; background: var(--bg-2); }
.verdict { display: grid; gap: 10px; } .verdict-line { font-size: 1.2rem; font-weight: 650; margin: 0; letter-spacing: -.015em; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .todo li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } .todo input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; } .todo label { cursor: pointer; } .todo li.done label { text-decoration: line-through; color: var(--muted); }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tips li { display: flex; gap: 10px; } .tips .i { color: var(--ok); margin-top: 3px; } .tips.warn .i { color: var(--warn); }
.cal-card { overflow: visible; }
.note-list { display: grid; gap: 12px; } .note { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-solid); border: 1px solid var(--line); } .note::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc, var(--line)); } .note-body p { margin: 4px 0; } .note-body h3 { font-size: 1rem; }
.src { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); } .src.ai { background: var(--accent-soft); color: var(--accent-ink); } .src .i { width: 13px; height: 13px; }

@media (max-width: 1100px) { .plant-form { grid-template-columns: minmax(0, 1fr); } .summary { position: static; order: -1; } .ob-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .phero { grid-template-columns: auto minmax(0, 1fr); } .phero-act { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .hero { padding: 20px; }
  .cal-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } .cal-day { min-height: 0; grid-template-columns: 64px 1fr auto auto; justify-items: start; align-items: center; padding: 10px 14px; gap: 4px 12px; } .cal-day .cd-dow { grid-column: 1; } .cd-wx { grid-auto-flow: column; justify-items: start; gap: 6px; } .cd-marks { margin: 0; }
  .fc-strip { grid-template-columns: repeat(7, 74px); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .fc-day { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .phero { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 18px; } .phero h1 { font-size: 1.55rem; }
  .att { grid-template-columns: auto minmax(0, 1fr); } .att-act { grid-column: 1 / -1; } .att-act .split-btn, .att-act .btn { width: 100%; } .att-act .split-btn .btn:first-child { flex: 1; justify-content: center; }
  .note { grid-template-columns: auto minmax(0, 1fr); } .note .src { grid-column: 2; justify-self: start; } .ident { grid-template-columns: minmax(0, 1fr); } .ident-img { width: 100%; height: 190px; }
  .plant-grid, .grid.auto { grid-template-columns: minmax(0, 1fr); } .hero { gap: 14px; } .hero-ic { width: 48px; height: 48px; border-radius: 15px; } .hero-ic svg { width: 24px; height: 24px; } .kchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .water-pop { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; z-index: 70; } .form-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 30%); }
}
@media (prefers-reduced-motion: reduce) { .work-art, .work-bar i, .cal-detail-in, .reveal-box { animation: none; } .g-arc { transition: none; } }

.grid.split-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } @media (max-width: 1100px) { .grid.split-r { grid-template-columns: minmax(0, 1fr); } }
.verdict .insight { margin-top: 4px; }
.verdict .insight { background: var(--water-soft); border-color: color-mix(in srgb, var(--water) 30%, transparent); } .verdict .insight .i { color: var(--water); }
.check input.switch { width: 40px; height: 23px; accent-color: initial; }
.photo-drop.compact { padding: 10px; border-width: 1px; gap: 8px; background: none; }
.kchip span:not(.ki) { display: block; line-height: 1.3; } .kchip > div { min-width: 0; }
@media (max-width: 640px) { .kchips > :last-child:nth-child(odd) { grid-column: 1 / -1; } .kchip { padding: 12px; gap: 10px; } .kchip b { font-size: 1.3rem; } }
.plant-card .pc-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .phero .gauge { width: 104px; height: 104px; } .phero-act { grid-template-columns: 1fr 1fr; width: 100%; } .phero-act .split-btn { grid-column: 1 / -1; width: 100%; } .phero-act .split-btn .btn:first-child { flex: 1; justify-content: center; }
}