:root {
  color-scheme: light;
  --ink: #173f35;
  --muted: #667b72;
  --leaf: #3f8f62;
  --mint: #dcefe2;
  --cream: #f5f2e9;
  --paper: #fffdf8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream); }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 4rem max(6vw, 1.25rem) 3rem; color: white; background-image: linear-gradient(125deg, rgba(14, 56, 45, .92), rgba(32, 103, 70, .77)), url('assets/header-plants.jpg'); background-position: center; background-size: cover; }
.hero-welcome { display: flex; min-width: 0; align-items: end; gap: clamp(1rem, 3vw, 2.5rem); }
.hero-copy { min-width: 0; }
.gardener-welcome { display: flex; flex: 0 0 auto; align-items: center; gap: .7rem; padding: .4rem .85rem .4rem .25rem; border: 1px solid #ffffff30; border-radius: 1.1rem; background: #ffffff12; backdrop-filter: blur(8px); }
.gardener-welcome img { width: 6rem; height: 6rem; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 .35rem .6rem #0a2b222d); }
.gardener-welcome span, .gardener-welcome strong { display: block; }
.gardener-welcome span { color: #d9e9df; font-size: .67rem; }
.gardener-welcome strong { margin-top: .2rem; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; white-space: nowrap; }
.eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: .95; font-weight: 500; }
.subtitle { margin: 1rem 0 0; opacity: .78; }
.hero-actions { display: flex; align-items: center; gap: 1rem; }
.notification-bell { position: relative; display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid #ffffff35; border-radius: 50%; color: white; background: #ffffff18; font-size: 1.15rem; cursor: pointer; backdrop-filter: blur(8px); }
.notification-bell:hover { background: #ffffff28; }
.notification-bell b { position: absolute; top: -.15rem; right: -.2rem; display: grid; min-width: 1.35rem; height: 1.35rem; padding: 0 .25rem; place-items: center; border: 2px solid #276548; border-radius: 99rem; color: white; background: #df654f; font-size: .62rem; }
.notification-bell b[hidden] { display: none; }
.status { display: flex; gap: .55rem; align-items: center; white-space: nowrap; font-size: .85rem; }
.status span { width: .65rem; height: .65rem; border-radius: 50%; background: #f0c86e; box-shadow: 0 0 0 .25rem #ffffff20; }
.status.online span { background: #77d698; }
.status.offline span { background: #ed866f; }
.quick-nav { position: sticky; top: 0; z-index: 18; border-bottom: 1px solid #173f3518; background: rgba(255, 253, 248, .9); box-shadow: 0 .35rem 1.2rem #173f350d; backdrop-filter: blur(14px); }
.quick-nav-track { display: flex; width: min(1100px, calc(100% - 2.5rem)); margin: 0 auto; gap: .45rem; padding: .65rem 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scrollbar-width: none; }
.quick-nav-track::-webkit-scrollbar { display: none; }
.quick-nav a { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; padding: .55rem .75rem; border: 1px solid #173f3518; border-radius: 99rem; color: #536b61; background: #ffffffb8; font-size: .72rem; font-weight: 800; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.quick-nav a:hover { color: var(--ink); border-color: #3f8f6250; transform: translateY(-1px); }
.quick-nav a.active { color: white; border-color: var(--ink); background: var(--ink); }
.quick-nav a:focus-visible { outline: 3px solid #70b88a70; outline-offset: 2px; }
[id="top"], main section[id] { scroll-margin-top: 5.5rem; }
main { width: min(1100px, calc(100% - 2.5rem)); margin: 0 auto 3rem; padding-top: 2.25rem; position: relative; }
.collapsible-section { scroll-margin-top: 5.5rem; }
.collapsible-header { position: relative; min-height: 3.25rem; padding-right: 9.2rem; cursor: pointer; transition: margin .2s ease, padding .2s ease, background .2s ease; }
.collapsible-header:hover h2 { color: #2f7351; }
.section-collapse-toggle { position: absolute; top: 50%; right: .2rem; display: grid; width: 2.25rem; height: 2.25rem; padding: 0; place-items: center; border: 1px solid #173f3520; border-radius: 50%; color: var(--ink); background: #ffffffd9; font: inherit; cursor: pointer; transform: translateY(-50%); box-shadow: 0 .2rem .7rem #173f3510; }
.section-collapse-toggle:focus-visible { outline: 3px solid #70b88a70; outline-offset: 2px; }
.section-collapse-toggle span { display: block; font-size: 1.25rem; line-height: 1; transform: rotate(180deg); transition: transform .2s ease; }
.is-collapsed .section-collapse-toggle span { transform: rotate(0deg); }
.section-order-controls { position: absolute; z-index: 2; top: 50%; right: 2.9rem; display: flex; align-items: center; gap: .25rem; transform: translateY(-50%); }
.section-order-controls button { display: grid; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 1px solid #173f3518; border-radius: .55rem; color: var(--muted); background: #ffffffd9; font: inherit; font-size: .8rem; cursor: pointer; touch-action: manipulation; }
.section-order-controls .section-drag-handle { width: 2rem; color: var(--ink); font-size: 1rem; cursor: grab; touch-action: pan-y; }
.section-order-controls .section-drag-handle:active { cursor: grabbing; }
.section-order-controls button:hover:not(:disabled) { color: var(--ink); border-color: #3f8f6250; background: #f0f7f1; }
.section-order-controls button:disabled { cursor: default; opacity: .28; }
.section-order-controls button:focus-visible { outline: 3px solid #70b88a70; outline-offset: 2px; }
.section-order-controls .section-order-menu-toggle, .section-order-menu { display: none; }
.collapsible-section.is-dragging { opacity: .55; }
.collapsible-section.section-drop-before::before, .collapsible-section.section-drop-after::after { content: ''; display: block; height: .25rem; margin: .45rem 0; border-radius: 99rem; background: var(--leaf); box-shadow: 0 0 0 .2rem #dcefe2; }
.collapsible-content { height: auto; overflow: hidden; opacity: 1; transition: height .22s ease, opacity .16s ease; }
.collapsible-content-inner { min-height: 0; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 30rem; }
.collapsible-section.is-collapsed { margin-top: 1rem; }
.collapsible-section.is-collapsed > .collapsible-header { margin-bottom: 0; }
.collapsible-section.is-collapsed > .collapsible-header > :not(:first-child):not(.section-collapse-toggle):not(.section-order-controls):not(.collapse-persistent-indicator) { display: none; }
.collapsible-section.is-collapsed > .collapsible-header > :first-child > p:not(.eyebrow) { display: none; }
.collapsible-section:not(.card):not(#gamification) > .collapsible-header { padding: 1rem 9.2rem 1rem 1.15rem; border: 1px solid #173f3515; border-radius: 1rem; background: var(--paper); box-shadow: 0 .35rem 1.2rem #173f3509; }
.collapsible-section:not(.is-collapsed):not(.card):not(#gamification) > .collapsible-header { margin-bottom: 1rem; }
#gamification.is-collapsed > .gamification-hero { grid-template-columns: minmax(0, 1fr); min-height: 5rem; padding: 1rem 9.2rem 1rem 1.15rem; text-align: left; }
#gamification.is-collapsed > .gamification-hero > img { display: none; }
#gamification.is-collapsed > .gamification-hero > .gamification-copy { display: block; }
#gamification.is-collapsed .gamification-copy > :not(.eyebrow):not(h2) { display: none; }
#events.is-collapsed .collapse-persistent-indicator { display: inline-flex; margin-right: .25rem; padding: .35rem .55rem; border-radius: 99rem; color: var(--muted); background: #ecefe9; font-size: .68rem; font-weight: 800; }
#events.is-collapsed .collapse-persistent-indicator.has-active { color: #8b3f32; background: #f8dfd8; }
.dashboard-section { margin-top: 2rem; }
.notification-center + .dashboard-section { margin-top: 0; }
.carousel-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.carousel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 500; }
.carousel-controls { display: flex; gap: .4rem; }
.carousel-controls button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid #173f3520; border-radius: 50%; color: var(--ink); background: var(--paper); font-size: 1.3rem; cursor: pointer; }
.carousel-content-navigation { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin: 0 0 .75rem; }
.carousel-content-navigation > span { color: var(--muted); font-size: .7rem; font-weight: 800; }
.carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.soil-grid > article, .environment > article { min-width: calc((100% - 2rem) / 3); scroll-snap-align: start; }
.carousel-heading > div:first-child > p:last-child { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; }
.evolution-card { min-height: 12rem; }
.evolution-card > strong { min-height: 2.6rem; color: var(--muted); font-family: inherit; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.evolution-card.trend-up > strong { color: #25603e; }
.evolution-card.trend-down > strong { color: #9a533f; }
.evolution-card.trend-stable > strong { color: #526b61; }
.evolution-values { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.evolution-values span { display: grid; gap: .2rem; }
.evolution-values small { margin: 0; color: var(--muted); font-size: .65rem; }
.evolution-values b { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.evolution-values i { color: #91a098; font-style: normal; }
.evolution-card > small { margin-top: auto; padding-top: 1rem; line-height: 1.4; }
.environment-section { margin-top: 2rem; }
.garden-map-section { margin-top: .5rem; }
.station-tabs { display: flex; gap: .5rem; margin-top: 1.15rem; }
.station-tabs button { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid #173f3520; border-radius: 99rem; color: var(--muted); background: var(--paper); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.station-tabs button span { padding: .2rem .4rem; border-radius: 99rem; background: #ece9df; font-size: .64rem; }
.station-tabs button.active { color: white; border-color: var(--ink); background: var(--ink); }
.station-tabs button.active span { color: var(--ink); background: #ffffffd9; }
.stations-panel { margin-top: 2rem; }
.stations-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stations-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.45rem); font-weight: 500; }
.stations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.station-config-card { padding: 1rem; border: 1px solid #173f3518; border-radius: 1rem; background: #f8faf5; }
.station-config-title { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.station-config-title p, .station-config-title h3, .station-config-card > p { margin: 0; }
.station-config-title p { color: var(--muted); font-size: .68rem; font-weight: 800; }
.station-config-title h3 { margin-top: .15rem; font-family: Georgia, serif; font-size: 1.25rem; }
.station-config-title small, .station-config-card > p, .station-config-card > small { color: var(--muted); font-size: .7rem; }
.station-connection { padding: .3rem .55rem; border-radius: 99rem; font-size: .65rem; font-weight: 800; white-space: nowrap; }
.station-connection.online { color: #25603e; background: #dcefe2; }
.station-connection.offline { color: #983f31; background: #f7ded8; }
.station-connection.unknown { color: #6d6554; background: #ece9df; }
.station-connection.warning { color: #7a5a18; background: #f8eac5; }
.station-connection.maintenance { color: #315d72; background: #dcebf1; }
.station-sensor-list { display: grid; gap: .45rem; margin: .8rem 0; }
.station-sensor-row { display: grid; grid-template-columns: minmax(7rem, .7fr) 1.3fr; gap: .6rem; padding: .6rem; border-radius: .7rem; background: white; }
.station-sensor-row span, .station-sensor-row small { display: block; }
.station-sensor-row strong, .station-sensor-row b { font-size: .75rem; }
.station-sensor-row small { margin-top: .15rem; color: var(--muted); font-size: .64rem; }
.station-dialog { width: min(50rem, calc(100% - 2rem)); }
.station-slot-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.station-slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .75rem; border: 1px solid #173f3520; border-radius: .8rem; }
.station-slot-row legend { padding: 0 .3rem; font-size: .75rem; font-weight: 800; }
.station-slot-row label { font-size: .68rem; }
.station-slot-row input, .station-slot-row select { width: 100%; margin-top: .25rem; padding: .55rem; border: 1px solid #173f3528; border-radius: .55rem; background: white; font: inherit; }
.station-slot-row .station-slot-enabled { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.station-slot-row .station-slot-enabled input { width: auto; margin: 0; }
.station-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.station-maintenance-note { margin-top: .65rem !important; padding: .55rem .65rem; border-radius: .65rem; color: #315d72 !important; background: #e7f1f4; }
.station-setup-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }
.station-setup-steps li { display: flex; align-items: center; gap: .35rem; padding: .55rem; border-radius: .65rem; color: var(--muted); background: #f2f5ef; font-size: .68rem; }
.station-setup-steps b { display: grid; flex: 0 0 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: white; background: var(--ink); }
.station-discovery-note { padding: .65rem .75rem; border-left: .2rem solid #78a98b; color: var(--muted); background: #f5f8f2; font-size: .72rem; }
.maintenance-dialog { width: min(34rem, calc(100% - 2rem)); }
.maintenance-dialog label { display: grid; gap: .35rem; margin-top: .8rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
.maintenance-dialog select, .maintenance-dialog textarea { width: 100%; padding: .7rem; border: 1px solid #173f3528; border-radius: .65rem; background: white; font: inherit; }

.system-health-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.system-health-card { display: grid; grid-template-columns: .7rem 1fr; gap: .65rem; padding: .85rem; border: 1px solid #173f3514; border-radius: .9rem; background: var(--paper); }
.system-health-card > span { width: .65rem; height: .65rem; margin-top: .2rem; border-radius: 50%; background: #48a16d; }
.system-health-card.warning > span { background: #d49b2b; }
.system-health-card.attention > span { background: #c45d4b; }
.system-health-card small, .system-health-card strong, .system-health-card p { display: block; margin: 0; }
.system-health-card small { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.system-health-card strong { margin-top: .18rem; font-size: .9rem; }
.system-health-card p { margin-top: .25rem; color: var(--muted); font-size: .7rem; }
.system-health-stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.system-station-card { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.system-station-card h3, .system-station-card p { margin: 0; }
.system-station-card ul { grid-column: 1 / -1; margin: .8rem 0 0; padding: 0; list-style: none; }
.system-station-card li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-top: 1px solid #173f3512; color: var(--muted); font-size: .72rem; }
.system-station-card li > div { flex: 1; }
.system-station-card li span { float: right; }
.system-station-card li button { padding: .35rem .55rem; font-size: .65rem; }
.system-station-card .station-actions { grid-column: 1 / -1; }
.garden-capacity { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.garden-capacity > div { flex: 1; height: .35rem; overflow: hidden; border-radius: 99rem; background: #dfe5df; }
.garden-capacity i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--leaf), #84b56f); transition: width .4s ease; }
.station-plant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.plant-slot { position: relative; display: grid; min-height: 7.8rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: 1rem; border: 1px solid #173f3515; border-radius: 1rem; color: var(--ink); background: var(--paper); box-shadow: 0 .35rem 1.2rem #173f3509; }
.plant-slot > .slot-number { position: absolute; top: .55rem; right: .65rem; color: #83948c; font-size: .62rem; font-weight: 900; }
.plant-slot > i { width: .8rem; height: .8rem; border-radius: 50%; background: #9da7a2; box-shadow: 0 0 0 .25rem #e5e9e6; }
.plant-slot.good > i { background: #42a766; box-shadow: 0 0 0 .25rem #dcefe2; }
.plant-slot.watch > i { background: #e0a730; box-shadow: 0 0 0 .25rem #f8eccb; }
.plant-slot.attention > i { background: #d75b48; box-shadow: 0 0 0 .25rem #f8dfd8; }
.plant-slot.assistant-highlight { outline: .18rem solid #62a87c; outline-offset: .15rem; box-shadow: 0 0 0 .45rem #62a87c24; }
.plant-slot-copy { min-width: 0; }
.plant-slot-copy p { margin: 0 0 .25rem; color: var(--muted); font-size: .62rem; font-weight: 800; }
.plant-slot-copy strong { display: block; overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.plant-slot-copy small { display: block; overflow: hidden; margin-top: .25rem; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.plant-slot-reading { min-width: 4rem; text-align: right; }
.plant-slot-reading b { display: block; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.plant-slot-reading span { display: block; margin-top: .2rem; color: var(--muted); font-size: .58rem; }
.plant-slot-reading .plant-slot-updated { display: block; max-width: 7rem; margin-top: .28rem; color: #7b8c84; font-size: .54rem; line-height: 1.25; }
.plant-slot.empty { display: grid; grid-template-columns: auto 1fr; align-content: center; border-style: dashed; color: var(--muted); background: #f8f6f0; text-align: left; cursor: pointer; box-shadow: none; }
.plant-slot.empty:hover { border-color: #3f8f6260; color: var(--ink); background: #f0f7f1; }
.plant-slot.empty b { grid-row: 1 / span 2; display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; color: #2f7351; background: #dcefe2; font-size: 1.2rem; }
.plant-slot.empty strong { font-size: .8rem; }
.plant-slot.empty small { font-size: .64rem; }
.calibration-section { margin-top: 2.5rem; }
.calibration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.calibration-card { position: relative; overflow: hidden; }
.calibration-card::after { content: ''; position: absolute; right: -2rem; bottom: -2rem; width: 7rem; height: 7rem; border-radius: 50%; background: #dcefe260; }
.calibration-card > p { font-size: .78rem; font-weight: 800; }
.calibration-card > strong { font-family: inherit; font-size: 1.05rem; font-weight: 800; }
.calibration-card > small { min-height: 2.1rem; line-height: 1.4; }
.calibration-progress { display: flex; gap: .35rem; margin-top: 1rem; }
.calibration-progress i { width: 2.1rem; height: .38rem; border-radius: 1rem; background: #d8ddd9; }
.calibration-progress i.done { background: var(--leaf); }
.calibration-card button { position: relative; z-index: 1; margin-top: 1rem; padding: .65rem .8rem; border: 0; border-radius: .7rem; color: white; background: var(--ink); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.card { padding: 1.5rem; border: 1px solid #173f3515; border-radius: 1.25rem; background: var(--paper); box-shadow: 0 .6rem 2rem #173f350d; }
.card p { margin: 0 0 .75rem; color: var(--muted); }
.card strong { display: block; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 500; }
.card small { display: block; margin-top: .75rem; color: var(--muted); }
.meter { height: .45rem; margin-top: 1.25rem; overflow: hidden; border-radius: 1rem; background: var(--mint); }
.meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--leaf); transition: width .5s ease; }
.meter.raw { background: repeating-linear-gradient(135deg, #d8ddd9, #d8ddd9 .4rem, #eef0ee .4rem, #eef0ee .8rem); }
.environment-card { display: flex; min-height: 12rem; align-items: center; justify-content: space-between; gap: 1.25rem; overflow: hidden; }
.environment-copy { min-width: 0; }
.environment-card .environment-copy > p { font-size: .82rem; font-weight: 800; }
.environment-card .environment-copy > strong { font-size: clamp(2rem, 4vw, 2.8rem); white-space: nowrap; }
.environment-card .environment-copy > small { max-width: 10rem; line-height: 1.35; }
.thermometer { position: relative; flex: 0 0 auto; width: 2.2rem; height: 7.5rem; border: .35rem solid #e7ebe7; border-radius: 1.2rem; background: #f8faf8; box-shadow: inset 0 0 0 .15rem white; }
.thermometer::after { content: ''; position: absolute; left: 50%; bottom: -.7rem; width: 2.65rem; height: 2.65rem; border: .35rem solid #e7ebe7; border-radius: 50%; background: #ef765b; transform: translateX(-50%); box-shadow: inset 0 0 0 .2rem #ffffff88; }
.thermometer i { position: absolute; left: 50%; bottom: .45rem; width: .65rem; height: calc(var(--level, 0) * 1%); max-height: 6.3rem; border-radius: 1rem; background: linear-gradient(#f1af4d, #ef765b); transform: translateX(-50%); transition: height .5s ease; }
.radial-gauge { --level: 0; display: grid; flex: 0 0 auto; width: 7.2rem; height: 7.2rem; place-items: center; border-radius: 50%; background: conic-gradient(#4aa0bd calc(var(--level) * 1%), #e7efed 0); box-shadow: inset 0 0 0 .1rem #ffffff, 0 .5rem 1.5rem #173f3510; }
.radial-gauge::before { content: ''; grid-area: 1 / 1; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: var(--paper); }
.radial-gauge div { z-index: 1; grid-area: 1 / 1; font-size: 1.8rem; }
.sun-gauge { background: conic-gradient(#e9ae35 calc(var(--level) * 1%), #f1ead8 0); }
.weather-panel { margin-top: 1rem; overflow: hidden; background: linear-gradient(135deg, #eef6f2, #fff8e8); }
.weather-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.weather-header h2, .event-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
.weather-header > div:first-child > p:last-child { max-width: 38rem; margin: .65rem 0 0; line-height: 1.45; }
.weather-current { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; min-width: 16rem; padding: .9rem 1rem; border: 1px solid #ffffffaa; border-radius: 1rem; background: #ffffffa8; }
.weather-current > span { font-size: 2.25rem; }
.weather-current strong { font-family: inherit; font-size: 1rem; font-weight: 800; }
.weather-current small { margin-top: .2rem; font-size: .72rem; }
.weather-location-form { margin-top: 1.15rem; }
.weather-location-form > label { display: block; margin-bottom: .45rem; font-size: .76rem; font-weight: 800; }
.weather-location-form > div { display: flex; gap: .5rem; }
.weather-location-form input { min-width: 0; flex: 1; padding: .72rem .85rem; border: 1px solid #173f3530; border-radius: .75rem; color: var(--ink); background: white; font: inherit; }
.weather-location-form button { padding: .72rem .95rem; border: 0; border-radius: .75rem; color: white; background: var(--ink); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.weather-location-form button.secondary { color: #25603e; background: #dcefe2; }
.weather-location-form button:disabled { cursor: wait; opacity: .55; }
.weather-location-form > p { margin: .45rem 0 0; color: var(--muted); font-size: .7rem; }
.weather-results { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.weather-results button { padding: .55rem .7rem; border: 1px solid #173f3525; border-radius: 99rem; color: var(--ink); background: white; font: inherit; font-size: .72rem; cursor: pointer; }
.weather-days { display: flex; gap: .6rem; margin-top: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.weather-days::-webkit-scrollbar { display: none; }
.weather-day { min-width: 7.6rem; padding: .8rem; border: 1px solid #173f3512; border-radius: .9rem; background: #ffffffc4; scroll-snap-align: start; }
.weather-day.today { border-color: #3f8f6250; background: white; }
.weather-day time { color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: capitalize; }
.weather-day b { display: block; margin: .4rem 0; font-size: 1.5rem; }
.weather-day strong { font-family: inherit; font-size: .85rem; font-weight: 800; }
.weather-day small { margin-top: .35rem; font-size: .66rem; line-height: 1.35; }
.weather-source { margin-top: .75rem; text-align: right; font-size: .64rem; }
.today-panel { margin-top: 1rem; color: white; background: linear-gradient(135deg, #173f35, #2f7351); }
.today-panel .eyebrow, .today-panel p { color: #dbeae1; }
.today-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.today-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
.today-header > span { padding: .5rem .7rem; border-radius: 99rem; background: #ffffff1c; font-size: .72rem; font-weight: 800; }
.today-guide { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .8rem; margin-top: .6rem; }
.today-guide > img { width: 8rem; height: 8rem; object-fit: contain; filter: drop-shadow(0 .6rem 1rem #08261d45); transition: opacity .2s ease, transform .2s ease; }
.assistant-speech { position: relative; padding: .9rem 1rem; border: 1px solid #ffffff24; border-radius: 1rem; background: #ffffff12; }
.assistant-speech::before { content: ''; position: absolute; left: -.42rem; top: 50%; width: .8rem; height: .8rem; background: #ffffff12; border-left: 1px solid #ffffff24; border-bottom: 1px solid #ffffff24; transform: translateY(-50%) rotate(45deg); }
.assistant-speech strong { font-family: inherit; font-size: .83rem; font-weight: 800; }
.assistant-speech p { margin: .28rem 0 0; font-size: .76rem; line-height: 1.45; }
.today-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 1rem; }
.today-action { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .85rem; border: 1px solid #ffffff20; border-radius: .9rem; background: #ffffff12; }
.today-action > i { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; background: #ffffff16; font-style: normal; }
.today-action strong { font-family: inherit; font-size: .82rem; font-weight: 800; }
.today-action p { margin: .2rem 0 0; font-size: .72rem; line-height: 1.4; }
.today-action.high { border-color: #ef9d8970; background: #9d493c35; }
.gamification-section { margin-top: 1rem; }
.gamification-hero { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 1.1rem; overflow: hidden; color: white; background: linear-gradient(135deg, #6f412e, #b06f42 55%, #d59d55); }
.gamification-hero > img { width: 9.5rem; height: 9.5rem; object-fit: contain; filter: drop-shadow(0 .7rem 1rem #45251850); }
.gamification-copy .eyebrow { color: #ffedc8; }
.gamification-copy h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.65rem, 4vw, 2.45rem); font-weight: 500; }
.gamification-copy > p:not(.eyebrow) { margin: .45rem 0 .75rem; color: #fff7e9; font-size: .82rem; }
.level-progress { height: .55rem; overflow: hidden; border-radius: 99rem; background: #4f2c244f; }
.level-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe488, #fff5c6); transition: width .5s ease; }
.gamification-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-top: .65rem; }
.gamification-stats strong { font-size: .8rem; }
.gamification-stats > span { color: #ffedc8; font-size: .7rem; }
.gamification-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.mini-section-title { display: flex; align-items: end; justify-content: space-between; gap: .8rem; }
.mini-section-title h3 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.mini-section-title > span { padding: .35rem .55rem; border-radius: 99rem; color: #72521f; background: #f7e8b7; font-size: .66rem; font-weight: 900; }
.challenge-list { display: grid; gap: .55rem; margin-top: 1rem; }
.challenge-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .7rem; border-radius: .8rem; background: #f7f5ef; }
.challenge-item > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #6d6e65; background: #e4e4dc; font-size: .7rem; font-weight: 900; }
.challenge-item.done > span { color: white; background: var(--leaf); }
.challenge-item strong, .achievement-item strong { display: block; font-size: .76rem; }
.challenge-item small, .achievement-item small { display: block; margin-top: .18rem; color: var(--muted); font-size: .62rem; }
.challenge-item > div > div { height: .28rem; margin-top: .45rem; overflow: hidden; border-radius: 99rem; background: #dedfd9; }
.challenge-item > div > div i { display: block; height: 100%; border-radius: inherit; background: var(--leaf); }
.challenge-item > b { color: #9a6e25; font-size: .66rem; }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.achievement-item { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: .6rem; min-height: 4.3rem; padding: .65rem; border-radius: .8rem; background: #f2f0e9; filter: grayscale(1); opacity: .52; }
.achievement-item > span { font-size: 1.55rem; text-align: center; }
.achievement-item > img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.achievement-item.unlocked { background: linear-gradient(135deg, #fff8da, #f3ead0); filter: none; opacity: 1; box-shadow: inset 0 0 0 1px #dcae5340; }
.add-plant-dialog { width: min(38rem, calc(100% - 2rem)); }
.traffic-panel { margin-top: 1rem; background: linear-gradient(145deg, #fffdf8, #f0f5ec); }
.traffic-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.traffic-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
.traffic-overall { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 99rem; background: #ece9df; font-size: .78rem; font-weight: 800; }
.traffic-overall span, .traffic-legend span { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #9da7a2; box-shadow: 0 0 0 .2rem #ffffffaa; }
.traffic-overall.green span, .traffic-legend .green, .traffic-item.green > i { background: #41a865; }
.traffic-overall.yellow span, .traffic-legend .yellow, .traffic-item.yellow > i { background: #e6ae38; }
.traffic-overall.red span, .traffic-legend .red, .traffic-item.red > i { background: #d75b48; }
.traffic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.15rem; }
.traffic-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .8rem; border-radius: .9rem; background: #f7f5ef; }
.traffic-item > i { width: 1rem; height: 1rem; border-radius: 50%; background: #9da7a2; box-shadow: 0 0 0 .3rem #ffffff; }
.traffic-item strong { font-family: inherit; font-size: .82rem; font-weight: 800; }
.traffic-item p { margin: .22rem 0 0; font-size: .72rem; line-height: 1.35; }
.traffic-legend { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: .8rem 0 0 !important; font-size: .68rem; }
.traffic-legend span:not(:first-child) { margin-left: .55rem; }
.notification-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; background: linear-gradient(135deg, #fffdf8, #eaf4ec); }
.notification-card h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 500; }
.notification-card > div > p:last-child { max-width: 43rem; margin: .65rem 0 0; line-height: 1.45; }
.notification-actions { display: flex; flex: 0 0 auto; gap: .55rem; }
.notification-card button { flex: 0 0 auto; padding: .8rem 1.1rem; border: 0; border-radius: 99rem; color: white; background: var(--ink); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.notification-card #notification-test { color: #25603e; background: #dcefe2; }
.notification-card button[hidden] { display: none; }
.notification-card button.active { color: #25603e; background: #d3ead9; }
.notification-card button:disabled { cursor: not-allowed; opacity: .55; }
.notification-card button:focus-visible { outline: 3px solid #77d698; outline-offset: 3px; }
.notification-center { position: relative; margin: 0 0 1.25rem; border-color: #3f8f6230; box-shadow: 0 1rem 3rem #173f3518; }
.notification-center[hidden] { display: none; }
.notification-center-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.notification-center-title { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.notification-center-title > img { width: 4.25rem; height: 4.25rem; flex: 0 0 auto; object-fit: contain; }
.notification-center-header h2 { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
#notification-unread { display: inline-grid; min-width: 1.65rem; height: 1.65rem; padding: 0 .4rem; place-items: center; border-radius: 99rem; color: white; background: #c7573f; font-family: Inter, sans-serif; font-size: .72rem; font-weight: 800; }
#notification-unread[hidden] { display: none; }
.notification-center-actions { display: flex; align-items: center; gap: .45rem; }
.notification-center-actions button { padding: .65rem .85rem; border: 1px solid #173f3525; border-radius: .7rem; color: var(--muted); background: transparent; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.notification-center-actions #notifications-close { display: grid; width: 2.35rem; height: 2.35rem; padding: 0; place-items: center; border-radius: 50%; font-size: 1.15rem; }
.notification-filters { display: flex; gap: .45rem; margin-top: 1.15rem; }
.notification-filters button { padding: .55rem .75rem; border: 0; border-radius: 99rem; color: var(--muted); background: #efede5; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.notification-filters button.active { color: white; background: var(--ink); }
.notification-list { display: grid; gap: .65rem; margin-top: .85rem; }
.notification-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid #173f3512; border-radius: .9rem; background: #faf8f2; cursor: pointer; }
.notification-item.unread { border-color: #3f8f6240; background: #f0f7f1; }
.notification-item-icon { display: block; width: 3.4rem; height: 3.4rem; object-fit: contain; border-radius: 50%; background: #e7ede8; }
.notification-item.severity-critical .notification-item-icon { background: #f6dcd5; }
.notification-item.severity-info .notification-item-icon { background: #dcecf2; }
.notification-item h3 { margin: 0; font-size: .88rem; }
.notification-item p { margin: .28rem 0 0; font-size: .78rem; line-height: 1.4; }
.notification-item-meta { display: flex; align-items: end; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .7rem; text-align: right; }
.notification-state { padding: .25rem .45rem; border-radius: 99rem; font-weight: 800; }
.notification-state.active { color: #8e3f2f; background: #f8dfd8; }
.notification-state.resolved { color: #25603e; background: #dcefe2; }
.notification-empty { margin: 0; padding: 1rem; border: 1px dashed #173f3530; border-radius: .9rem; color: var(--muted); text-align: center; }
.section-heading, .history-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.section-heading h2, .history-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; }
.section-heading > p { max-width: 35rem; margin: 0; color: var(--muted); }
.care-section { margin-top: 2.5rem; }
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.care-card { display: flex; flex-direction: column; min-height: 15rem; }
.care-card-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.care-card-header p { margin-bottom: .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.care-card h3 { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.care-card > p { margin: 1rem 0 0; color: var(--ink); line-height: 1.45; }
.care-card .care-target { color: var(--muted); font-size: .85rem; }
.care-card small { margin-top: auto; padding-top: 1.25rem; line-height: 1.45; }
.watering-button { width: 100%; margin-top: .65rem; padding: .72rem .9rem; border: 1px solid #3f8f6240; border-radius: .8rem; color: #25603e; background: #e9f4eb; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.watering-button:hover { background: #dcefe2; }
.watering-button:focus-visible { outline: 3px solid #77d698; outline-offset: 2px; }
.character-card { overflow: hidden; }
.character-stage { position: relative; display: grid; min-height: 12rem; margin: .5rem -1rem 0; place-items: end center; }
.character-stage::before { content: ''; position: absolute; inset: 25% 12% 0; border-radius: 50%; background: radial-gradient(circle, #dcefe2 0, #dcefe200 68%); }
.character-stage img { position: relative; z-index: 1; display: block; width: min(12rem, 78%); height: auto; filter: drop-shadow(0 .75rem .75rem #173f3520); animation: character-pop .35s ease-out; }
.character-stage span { position: absolute; z-index: 2; right: .3rem; bottom: .65rem; padding: .42rem .65rem; border: 1px solid #ffffff80; border-radius: 99rem; color: white; background: #173f35dd; box-shadow: 0 .3rem 1rem #173f3528; font-size: .72rem; font-weight: 800; }
@keyframes character-pop { from { opacity: 0; transform: translateY(.5rem) scale(.96); } to { opacity: 1; transform: none; } }
.care-status { flex: 0 0 auto; padding: .4rem .65rem; border-radius: 99rem; background: #ece9df; color: var(--muted); font-size: .72rem; font-weight: 800; }
.care-status.good { color: #25603e; background: #dcefe2; }
.care-status.watch { color: #785a18; background: #f8eccb; }
.care-status.water { color: #8e3f2f; background: #f8dfd8; }
.care-status.wet { color: #285f77; background: #dcecf2; }
.care-status.sleep { color: #56437b; background: #e8e1f3; }
.prediction-section { margin-top: 2.5rem; }
.prediction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.prediction-card { position: relative; overflow: hidden; }
.prediction-card::after { content: ''; position: absolute; width: 7rem; height: 7rem; right: -2.5rem; bottom: -3rem; border-radius: 50%; background: #dcefe280; }
.prediction-card > p { margin-bottom: .8rem; font-size: .8rem; font-weight: 800; }
.prediction-card strong { position: relative; z-index: 1; font-family: Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.05; }
.prediction-card small { position: relative; z-index: 1; min-height: 3.2rem; line-height: 1.4; }
.prediction-metrics { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.prediction-metrics span { padding: .35rem .5rem; border-radius: 99rem; color: var(--muted); background: #efede5; font-size: .68rem; font-weight: 800; }
.prediction-explanation { position: relative; z-index: 1; margin-top: .85rem; color: var(--muted); font-size: .72rem; }
.prediction-explanation summary { width: fit-content; color: var(--green); font-weight: 900; cursor: pointer; }
.prediction-explanation p { margin: .55rem 0 .2rem; line-height: 1.45; }
.prediction-explanation small { display: block; min-height: 0; }
.prediction-confidence.high { color: #25603e; background: #dcefe2; }
.prediction-confidence.medium { color: #785a18; background: #f8eccb; }
.prediction-confidence.low { color: #667b72; background: #ece9df; }
.prediction-metrics .weather-impact.faster { color: #8a4f1f; background: #f8e3c8; }
.prediction-metrics .weather-impact.slower { color: #285f77; background: #dcecf2; }
.forecast-panel { margin-top: 1rem; }
.forecast-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.forecast-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
.forecast-header > p { max-width: 30rem; margin: 0; text-align: right; }
.forecast-tabs, .photo-filters { display: flex; gap: .45rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; }
.forecast-tabs button, .photo-filters button { flex: 0 0 auto; padding: .58rem .75rem; border: 0; border-radius: 99rem; color: var(--muted); background: #ece9df; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.forecast-tabs button.active, .photo-filters button.active { color: white; background: var(--ink); }
.forecast-chart { position: relative; min-height: 15rem; margin-top: .8rem; padding: .75rem; border-radius: .9rem; background: #faf8f2; touch-action: pan-y; }
.forecast-chart svg { display: block; width: 100%; height: auto; }
.forecast-band { fill: #4f9d7130; }
.forecast-line { fill: none; stroke: #3f8f62; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.forecast-target { stroke: #d16c51; stroke-width: 1.5; stroke-dasharray: 7 6; }
.forecast-point { fill: white; stroke: #3f8f62; stroke-width: 2; }
.forecast-crosshair { stroke: #173f3566; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.forecast-focus { fill: white; stroke: #173f35; stroke-width: 3; pointer-events: none; }
.forecast-tooltip { position: absolute; z-index: 4; min-width: 8.5rem; max-width: 15rem; padding: .55rem .65rem; border-radius: .65rem; color: white; background: #173f35f2; box-shadow: 0 .4rem 1rem #173f3530; font-size: .68rem; line-height: 1.4; pointer-events: none; transform: translate(-50%, calc(-100% - .65rem)); }
.forecast-tooltip[hidden] { display: none; }
.forecast-tooltip strong, .forecast-tooltip small { display: block; }
.forecast-tooltip strong { font-family: inherit; font-size: .72rem; font-weight: 800; }
.forecast-tooltip small { margin-top: .18rem; color: #dcebe3; }
.forecast-interaction-hint { margin: .65rem 0 0 !important; color: var(--muted); font-size: .68rem; }
.forecast-legend { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: .7rem 0 0 !important; font-size: .68rem; }
.forecast-legend span { width: 1.4rem; height: .18rem; background: #3f8f62; }
.forecast-legend i { width: 1.4rem; height: .7rem; margin-left: .7rem; background: #4f9d7130; }
.intelligence-section { margin-top: 2.5rem; }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.health-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem 1rem; }
.health-ring { --score: 0; grid-row: 1 / 3; display: grid; width: 5.3rem; height: 5.3rem; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, var(--paper) 57%, transparent 58%), conic-gradient(#49a66d calc(var(--score) * 1%), #e7ebe7 0); font-family: Georgia, serif; font-size: 1.45rem; }
.health-card.watch .health-ring { background: radial-gradient(circle at center, var(--paper) 57%, transparent 58%), conic-gradient(#dfaa3f calc(var(--score) * 1%), #eee9db 0); }
.health-card.attention .health-ring { background: radial-gradient(circle at center, var(--paper) 57%, transparent 58%), conic-gradient(#d7644e calc(var(--score) * 1%), #f0e1de 0); }
.health-card > strong { font-family: inherit; font-size: .92rem; font-weight: 800; }
.health-card > small { margin: 0; font-size: .72rem; line-height: 1.4; }
.health-factors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.health-factors span { padding: .3rem .45rem; border-radius: 99rem; color: var(--muted); background: #f0eee7; font-size: .62rem; }
.event-panel { margin-top: 1rem; }
.event-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.event-header > span { padding: .5rem .7rem; border-radius: 99rem; color: #25603e; background: #dcefe2; font-size: .72rem; font-weight: 800; }
.event-list { display: grid; gap: .6rem; margin-top: 1rem; }
.automatic-event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .8rem; border-radius: .85rem; background: #f7f5ef; }
.automatic-event > i { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; background: #e4eee7; font-style: normal; }
.automatic-event > i img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.automatic-event.critical > i { background: #f5ddd7; }
.automatic-event.warning > i { background: #f8eccb; }
.automatic-event strong { font-family: inherit; font-size: .82rem; font-weight: 800; }
.automatic-event p { margin: .2rem 0 0; font-size: .72rem; line-height: 1.4; }
.automatic-event time { color: var(--muted); font-size: .66rem; text-align: right; }
.automatic-event.resolved { opacity: .68; }
.weekly-panel { margin-top: 1rem; background: linear-gradient(145deg, #fffdf8, #f2f6ed); }
.weekly-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.weekly-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; }
.weekly-header > strong { font-family: Georgia, serif; font-size: 2.3rem; font-weight: 500; }
.weekly-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1rem; }
.weekly-metric { padding: .8rem; border-radius: .8rem; background: #ffffffb8; }
.weekly-metric strong { font-family: Georgia, serif; font-size: 1.45rem; }
.weekly-metric span { display: block; margin-top: .25rem; color: var(--muted); font-size: .66rem; }
.weekly-highlights { display: grid; gap: .45rem; margin-top: .9rem; }
.weekly-highlight { display: flex; gap: .55rem; align-items: start; margin: 0 !important; padding: .55rem .7rem; border-radius: .65rem; background: #ffffff90; font-size: .74rem; line-height: 1.4; }
.profile-section { margin-top: 2.5rem; }
.photo-section { margin-top: 2.5rem; }
.photo-form { display: grid; grid-template-columns: .8fr 1fr 1.4fr .9fr auto; align-items: end; gap: .7rem; margin-top: 1rem; }
.photo-form label { color: var(--muted); font-size: .7rem; font-weight: 800; }
.photo-form input, .photo-form select { width: 100%; margin-top: .4rem; padding: .68rem .72rem; border: 1px solid #173f3530; border-radius: .7rem; color: var(--ink); background: white; font: inherit; font-size: .76rem; }
.photo-form button { padding: .74rem .9rem; border: 0; border-radius: .75rem; color: white; background: var(--ink); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.photo-form button:disabled { cursor: wait; opacity: .55; }
.photo-form > p { grid-column: 1 / -1; margin: 0; font-size: .68rem; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .8rem; }
.photo-card { position: relative; overflow: hidden; border-radius: 1rem; background: var(--paper); box-shadow: 0 .5rem 1.4rem #173f3510; }
.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e8ece8; }
.photo-card img.photo-image-fallback { padding: 2rem; object-fit: contain; }
.photo-card-body { padding: .75rem; }
.photo-card-body strong { font-size: .78rem; }
.photo-card-body p { min-height: 1.8rem; margin: .3rem 0; font-size: .68rem; line-height: 1.35; }
.photo-card-body time { color: var(--muted); font-size: .64rem; }
.photo-delete { position: absolute; top: .5rem; right: .5rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; color: white; background: #173f35c9; cursor: pointer; }
.photo-analysis { min-height: 0 !important; padding: .5rem; border-radius: .6rem; color: var(--muted); background: #f1efe7; }
.photo-analysis.complete { color: #23633f; background: #e1f1e6; }
.photo-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.photo-card-actions label { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .65rem; font-weight: 800; }
.photo-card-actions button, .photo-compare-toolbar button { padding: .42rem .55rem; border: 0; border-radius: .55rem; color: white; background: var(--ink); font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.photo-compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .8rem; padding: .7rem; border-radius: .8rem; background: #eef4ef; }
.photo-compare-toolbar span { flex: 1; color: var(--muted); font-size: .7rem; }
.photo-compare-toolbar button:disabled { opacity: .45; }
.photo-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.photo-comparison figure { margin: 0; }
.photo-comparison img { display: block; width: 100%; max-height: 65vh; border-radius: .8rem; object-fit: contain; background: #ecebe5; }
.photo-comparison figcaption { margin-top: .45rem; color: var(--muted); font-size: .72rem; text-align: center; }
.photo-compare-dialog { width: min(58rem, calc(100vw - 2rem)); }
.personalization-section { margin-top: 2.5rem; }
.personalization-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.preference-form fieldset { margin: 1rem 0; padding: .75rem; border: 1px solid #173f3520; border-radius: .8rem; }
.preference-form legend { color: var(--ink); font-size: .72rem; font-weight: 900; }
.preference-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.preference-checks label, .backup-option { display: flex; align-items: center; gap: .38rem; color: var(--muted); font-size: .68rem; }
.preference-form select, .backup-card select, .backup-card input[type="number"], .backup-file input { width: 100%; margin-top: .4rem; padding: .62rem; border: 1px solid #173f3530; border-radius: .65rem; background: white; font: inherit; }
.backup-card h3 { margin: .15rem 0 .8rem; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.backup-card > button { width: 100%; margin-top: .7rem; }
.backup-schedule { margin-top: .8rem; }
.backup-card hr { margin: 1rem 0; border: 0; border-top: 1px solid #173f3518; }
.backup-card > p, .backup-preview { margin: .7rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.backup-preview { padding: .65rem; border-radius: .65rem; background: #e7f2e9; }
.visual-preferences small { display: block; margin: .35rem 0 .7rem; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.visual-preferences > label:last-of-type { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; }
.visual-preferences input[type="number"] { width: 10rem; margin: .35rem 0 0; padding: .58rem; border: 1px solid #173f3530; border-radius: .65rem; font: inherit; }
.visual-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-top: .75rem; padding: .7rem; border-radius: .7rem; background: #eef4ef; color: var(--muted); font-size: .65rem; }
.visual-usage strong { grid-column: 1 / -1; color: var(--ink); }
.profile-tabs { display: flex; gap: .5rem; margin: 1rem 0 .75rem; overflow-x: auto; scrollbar-width: none; }
.profile-tabs button { flex: 0 0 auto; padding: .65rem .85rem; border: 0; border-radius: 99rem; color: var(--muted); background: #e9e6dc; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.profile-tabs button.active { color: white; background: var(--ink); }
.profile-detail { display: grid; grid-template-columns: minmax(12rem, .7fr) 1.3fr; gap: 1.35rem; }
.profile-identity { padding: 1.2rem; border-radius: 1rem; color: white; background: linear-gradient(145deg, #205341, #347554); }
.profile-identity .eyebrow { color: #d9efe0; }
.profile-identity h3 { margin: 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.profile-identity .scientific { margin: .35rem 0 1.25rem; color: #d9e7df; font-style: italic; }
.profile-personal { display: grid; gap: .55rem; }
.profile-personal span { font-size: .78rem; color: #e0ebe5; }
.profile-personal b { color: white; }
.profile-edit { width: 100%; margin-top: 1.2rem; padding: .7rem; border: 1px solid #ffffff55; border-radius: .75rem; color: white; background: #ffffff15; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.profile-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.profile-care div { padding: .85rem; border-radius: .85rem; background: #f6f4ed; }
.profile-care h4 { margin: 0 0 .35rem; font-size: .78rem; }
.profile-care p { margin: 0; font-size: .76rem; line-height: 1.45; }
.profile-care .profile-tip { grid-column: 1 / -1; background: #eaf4ec; }
.watering-panel { margin-top: 1rem; }
.watering-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.watering-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; }
.watering-header > p { margin: 0; color: var(--muted); }
.watering-list { display: grid; gap: .65rem; margin-top: 1.25rem; }
.watering-event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: .9rem; background: #f3f6ef; }
.watering-event-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; background: #dcecf2; }
.watering-event strong { font-family: inherit; font-size: .9rem; font-weight: 800; }
.watering-event p { margin: .2rem 0 0; font-size: .78rem; }
.watering-event > span:last-child { color: var(--muted); font-size: .78rem; text-align: right; }
.watering-empty { margin: 0; padding: 1rem; border: 1px dashed #173f3530; border-radius: .9rem; color: var(--muted); text-align: center; }
.journal-panel { margin-top: 1rem; }
.journal-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.journal-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; }
.primary-action { padding: .75rem 1rem; border: 0; border-radius: .8rem; color: white; background: var(--ink); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.calendar-toolbar { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.calendar-toolbar strong { text-align: center; text-transform: capitalize; }
.calendar-toolbar button { height: 2.5rem; border: 0; border-radius: .65rem; color: var(--ink); background: #efede5; font-size: 1.5rem; cursor: pointer; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.calendar-weekdays { margin: 1rem 0 .35rem; color: var(--muted); font-size: .68rem; font-weight: 800; text-align: center; }
.calendar-day { min-height: 5.2rem; padding: .45rem; border: 1px solid #173f3512; border-radius: .65rem; background: #faf8f2; }
.calendar-day.outside { opacity: .35; }
.calendar-day.today { border-color: #3f8f6270; background: #f0f7f1; }
.calendar-day > span { display: block; margin-bottom: .35rem; font-size: .7rem; font-weight: 800; }
.calendar-dot { display: block; overflow: hidden; margin-top: .22rem; padding: .25rem .3rem; border-radius: .35rem; color: #285f77; background: #dcecf2; font-size: .58rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.calendar-dot.fertilizing { color: #4f6225; background: #e5edcf; }
.calendar-dot.pruning { color: #785a18; background: #f8eccb; }
.calendar-dot.repotting { color: #754b2c; background: #eee0d3; }
.calendar-dot.inspection, .calendar-dot.note { color: #56437b; background: #e8e1f3; }
.journal-feed { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #173f3515; }
.journal-feed h3 { margin: 0 0 .75rem; font-family: Georgia, serif; font-size: 1.4rem; font-weight: 500; }
.journal-list { display: grid; gap: .55rem; }
.journal-event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .75rem; border-radius: .75rem; background: #f7f5ef; }
.journal-event-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: #e7ede8; }
.journal-event h4 { margin: 0; font-size: .8rem; }
.journal-event p { margin: .2rem 0 0; font-size: .72rem; }
.journal-event time { color: var(--muted); font-size: .68rem; text-align: right; }
.watering-dialog { width: min(31rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 1.25rem; color: var(--ink); background: var(--paper); box-shadow: 0 1.5rem 5rem #0c261e55; }
.watering-dialog::backdrop { background: #102d267a; backdrop-filter: blur(3px); }
.watering-dialog form { position: relative; padding: 1.7rem; }
.watering-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.watering-dialog form > p:not(.eyebrow):not(.dialog-error) { margin: .75rem 0 1.25rem; color: var(--muted); line-height: 1.45; }
.dialog-close { position: absolute; top: .9rem; right: .9rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; color: var(--muted); background: #efede5; font-size: 1.35rem; cursor: pointer; }
.watering-dialog label { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 800; }
.watering-dialog label span { color: var(--muted); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.form-grid label { margin: 0; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; margin-top: .4rem; padding: .72rem .78rem; border: 1px solid #173f3530; border-radius: .7rem; color: var(--ink); background: white; font: inherit; resize: vertical; }
.form-grid .form-wide { grid-column: 1 / -1; }
.amount-input { display: flex; align-items: center; border: 1px solid #173f3530; border-radius: .75rem; background: white; }
.amount-input input { min-width: 0; flex: 1; padding: .75rem .85rem; border: 0; outline: 0; background: transparent; font: inherit; }
.amount-input span { padding-right: .85rem; color: var(--muted); font-size: .85rem; }
.dialog-error { min-height: 1.2rem; margin: .55rem 0 0; color: #9a3f2d; font-size: .78rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .85rem; }
.dialog-actions button { padding: .75rem 1rem; border-radius: .75rem; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.dialog-actions .secondary { border: 1px solid #173f3525; color: var(--muted); background: transparent; }
.dialog-actions .primary { border: 0; color: white; background: var(--ink); }
.dialog-actions button:disabled { cursor: wait; opacity: .55; }
.history-panel { margin-top: 1rem; }
.history-actions { display: flex; align-items: center; gap: .65rem; }
.history-actions > button { padding: .72rem .85rem; border: 0; border-radius: .75rem; color: white; background: var(--leaf); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.history-header > div > p:last-child { margin: .75rem 0 0; }
.history-selector { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem .35rem .75rem; border-radius: .8rem; color: var(--muted); background: var(--cream); font-size: .72rem; font-weight: 800; }
.history-selector select { padding: .55rem .7rem; border: 0; border-radius: .6rem; color: white; background: var(--ink); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.history-state { margin: 1.5rem 0 .75rem; color: var(--muted); font-size: .8rem; }
.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.plant-history-charts { display: contents; }
.chart-card { min-width: 0; margin: 0; padding: 1rem; border: 1px solid #173f3512; border-radius: 1rem; background: #faf8f2; }
.chart-card.chart-wide { grid-column: 1 / -1; }
.chart-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.chart-card figcaption strong { font-size: .95rem; }
.chart-card figcaption span { color: var(--muted); font-size: .75rem; }
.legend { display: inline-block; width: .55rem; height: .55rem; margin: 0 .3rem 0 .65rem; border-radius: 50%; }
.legend.s1 { background: #3f8f62; }
.legend.s3 { background: #b1783f; }
.chart { position: relative; min-height: 12rem; touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-gridline { stroke: #173f3515; stroke-width: 1; }
.chart-axis { fill: var(--muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 11px; }
.chart-crosshair { stroke: #173f3570; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.chart-focus-dot { fill: white; stroke-width: 2.5; pointer-events: none; }
.chart-tooltip { position: absolute; z-index: 3; max-width: 14rem; padding: .55rem .65rem; border-radius: .65rem; color: white; background: #173f35ee; box-shadow: 0 .4rem 1rem #173f3530; font-size: .68rem; line-height: 1.45; pointer-events: none; transform: translate(-50%, calc(-100% - .55rem)); }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { display: block; font-family: inherit; font-size: .7rem; font-weight: 800; }
.chart-empty { display: grid; min-height: 12rem; place-items: center; margin: 0; color: var(--muted); text-align: center; }
.export-dialog { width: min(44rem, calc(100% - 2rem)); }
.export-dialog fieldset { margin: .9rem 0 0; padding: .85rem; border: 1px solid #173f3520; border-radius: .85rem; }
.export-dialog legend { padding: 0 .35rem; font-size: .85rem; font-weight: 800; }
.export-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; }
.export-options label, .export-all { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.export-all { margin-top: .8rem; padding: .75rem; border-radius: .75rem; background: var(--cream); font-weight: 800; }
.export-hint { margin: -.25rem 0 .6rem; color: var(--muted); font-size: .72rem; }
.export-dialog input[type="date"] { box-sizing: border-box; width: 100%; padding: .7rem; border: 1px solid #173f3530; border-radius: .65rem; font: inherit; }
.assistant-toggle { position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; width: 5.1rem; height: 5.1rem; padding: .2rem; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: linear-gradient(145deg, #fffdf8, #dcefe2); box-shadow: 0 .85rem 2.2rem #173f3545; cursor: pointer; }
.assistant-toggle img { width: 4.6rem; height: 4.6rem; object-fit: contain; }
.assistant-toggle span { position: absolute; right: 3.9rem; bottom: .45rem; padding: .35rem .55rem; border-radius: 99rem; color: white; background: #173f35; font-size: .66rem; font-weight: 800; box-shadow: 0 .25rem .7rem #173f3530; }
.assistant-toggle.attention { animation: assistant-pulse 2.4s ease-in-out infinite; }
.assistant-panel { position: fixed; z-index: 21; right: max(1rem, env(safe-area-inset-right)); bottom: max(6.8rem, calc(env(safe-area-inset-bottom) + 6.8rem)); display: block; width: min(34rem, calc(100vw - 2rem)); max-height: min(43rem, calc(100vh - 8rem)); overflow: auto; padding: 1rem; border: 1px solid #173f3520; border-radius: 1.25rem; color: var(--ink); background: #fffdf8f5; box-shadow: 0 1.2rem 3.5rem #173f3540; backdrop-filter: blur(12px); }
.assistant-panel[hidden] { display: none; }
.assistant-panel-header { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: .7rem; padding-right: 2rem; }
.assistant-panel-header > img { width: 6.5rem; height: 6.5rem; object-fit: contain; object-position: center bottom; }
.assistant-panel-copy { min-width: 0; }
.assistant-panel h2 { margin: 0; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 500; }
.assistant-panel-copy > p:not(.eyebrow) { margin: .45rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.assistant-chat { display: grid; gap: .55rem; max-height: 16rem; margin-top: .65rem; padding: .75rem; overflow-y: auto; border: 1px solid #173f3512; border-radius: .9rem; background: #f5f2e9; }
.assistant-bubble { max-width: 88%; padding: .65rem .75rem; border-radius: .85rem; font-size: .74rem; line-height: 1.45; }
.assistant-bubble strong { display: block; margin-bottom: .2rem; font-size: .65rem; }
.assistant-bubble p { margin: 0; }
.assistant-bubble.angie { justify-self: start; color: var(--ink); background: white; border-bottom-left-radius: .25rem; }
.assistant-bubble.user { justify-self: end; color: white; background: var(--ink); border-bottom-right-radius: .25rem; }
.assistant-bubble.loading { color: var(--muted); font-style: italic; }
.assistant-suggestions { display: flex; gap: .4rem; margin-top: .55rem; overflow-x: auto; scrollbar-width: none; }
.assistant-suggestions::-webkit-scrollbar { display: none; }
.assistant-suggestions button { flex: 0 0 auto; padding: .45rem .6rem; border: 1px solid #173f3520; border-radius: 99rem; color: var(--ink); background: white; font: inherit; font-size: .65rem; cursor: pointer; }
.assistant-form { display: grid; grid-template-columns: 1fr 2.6rem; gap: .45rem; margin-top: .6rem; }
.assistant-form input { min-width: 0; padding: .7rem .8rem; border: 1px solid #173f3530; border-radius: .75rem; color: var(--ink); background: white; font: inherit; font-size: .75rem; }
.assistant-form button { border: 0; border-radius: .75rem; color: white; background: var(--leaf); font-size: 1rem; cursor: pointer; }
.assistant-form button:disabled { cursor: wait; opacity: .55; }
.assistant-close { position: absolute; top: .55rem; right: .55rem; display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #efede5; font: inherit; font-size: 1.2rem; cursor: pointer; }
.assistant-quick-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.assistant-quick-actions button { padding: .5rem .65rem; border: 0; border-radius: 99rem; color: white; background: var(--ink); font: inherit; font-size: .67rem; font-weight: 800; cursor: pointer; }
.calibration-dialog { width: min(38rem, calc(100% - 2rem)); }
.calibration-guide { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .8rem; margin-top: .5rem; padding: .7rem; border-radius: .9rem; background: #eef5ef; }
.calibration-guide img { width: 7.5rem; height: 7.5rem; object-fit: contain; }
.calibration-guide p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.calibration-readings { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1rem; }
.calibration-readings div { padding: .7rem; border-radius: .75rem; background: #f5f2e9; }
.calibration-readings span { display: block; color: var(--muted); font-size: .64rem; }
.calibration-readings strong { display: block; margin-top: .25rem; font-size: .9rem; }
.calibration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.calibration-actions button { padding: .8rem; border: 0; border-radius: .75rem; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.sample-dry { color: #71522f; background: #eee0cf; }
.sample-wet { color: #245b70; background: #dcecf2; }
.calibration-method-title { margin: 1.1rem 0 .4rem; font-size: .9rem; }
.calibration-dialog .calibration-manual-hint { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.calibration-manual button { width: 100%; margin-top: .5rem; padding: .75rem; border: 0; border-radius: .75rem; font: inherit; cursor: pointer; }
#calibration-form button:disabled, #calibration-form input:disabled { opacity: .55; cursor: wait; }
#calibration-save-status { color: #25603e; font-size: .78rem; }
@keyframes assistant-pulse { 0%, 100% { box-shadow: 0 .85rem 2.2rem #173f3545; } 50% { box-shadow: 0 .85rem 2.5rem #d76b5680, 0 0 0 .45rem #d76b5625; } }
footer { padding: 0 1.25rem 2rem; text-align: center; color: var(--muted); font-size: .8rem; }
.notification-settings { margin-top: 1rem; }
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  main { width: calc(100% - 1rem); max-width: 1100px; padding-top: 1.25rem; }
  .hero { align-items: start; flex-direction: column; padding-top: 3rem; }
  .hero-welcome { width: 100%; min-width: 0; align-items: start; flex-direction: column; gap: 1rem; }
  .hero-copy { max-width: 100%; }
  .gardener-welcome { max-width: 100%; align-self: start; flex-direction: row; justify-content: flex-start; padding: .25rem .7rem .25rem .25rem; text-align: left; }
  .gardener-welcome img { width: 4rem; height: 4rem; }
  .gardener-welcome strong { font-size: .78rem; }
  .hero-actions { width: 100%; justify-content: space-between; }
  .care-grid, .prediction-grid, .charts-grid, .traffic-grid, .health-grid, .calibration-grid, .gamification-columns, .stations-grid { grid-template-columns: 1fr; }
  .stations-header { align-items: start; flex-direction: column; }
  .stations-header .primary-action { width: 100%; }
  .station-slot-editor { grid-template-columns: 1fr; }
  .station-setup-steps { grid-template-columns: 1fr 1fr; }
  .system-health-overview, .system-health-stations { grid-template-columns: 1fr; }
  .station-plant-grid { grid-template-columns: 1fr 1fr; }
  .plant-slot { min-height: 8.5rem; grid-template-columns: auto minmax(0, 1fr); }
  .plant-slot-reading { grid-column: 2; text-align: left; }
  .gamification-hero { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .gamification-hero > img { width: 7rem; height: 7rem; }
  .soil-grid > article, .environment > article { min-width: min(82vw, 20rem); }
  .card { padding: 1rem; border-radius: 1rem; }
  .dashboard-section, .calibration-section, .care-section, .prediction-section, .profile-section { margin-top: 1rem; }
  .carousel-heading { align-items: start; }
  .carousel-heading h2, .section-heading h2, .history-header h2, .watering-header h2, .stations-header h2, .weather-header h2, .event-header h2, .today-header h2, .traffic-header h2, .forecast-header h2, .weekly-header h2 { font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.08; }
  .carousel-heading > div:first-child > p:last-child, .section-heading > p { margin-top: .4rem; font-size: .76rem; line-height: 1.45; }
  .collapsible-header { width: 100%; min-width: 0; min-height: 3rem; padding-right: 5.7rem; }
  .collapsible-header > :first-child, .collapsible-header > :first-child > * { min-width: 0; max-width: 100%; }
  .collapsible-header > :first-child { width: 100%; }
  .section-heading > p, .history-header > p, .carousel-heading > div:first-child > p:last-child { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  .collapsible-section:not(.card):not(#gamification) > .collapsible-header { padding: .8rem 5.7rem .8rem .9rem; border-radius: .9rem; }
  .collapsible-section.card.is-collapsed { padding: .8rem .9rem; }
  #gamification.is-collapsed > .gamification-hero { min-height: 4.25rem; padding: .8rem 5.7rem .8rem .9rem; }
  .collapsible-section.is-collapsed { margin-top: .65rem; }
  .section-collapse-toggle { right: .05rem; width: 2.55rem; height: 2.55rem; }
  .section-order-controls { right: 2.9rem; }
  .section-order-controls > .section-drag-handle, .section-order-controls > [data-move-section] { display: none; }
  .section-order-controls .section-order-menu-toggle { display: grid; width: 2.55rem; height: 2.55rem; border-radius: 50%; font-size: 1.2rem; }
  .section-order-menu { position: absolute; z-index: 8; top: calc(100% + .45rem); right: 0; width: 10.5rem; padding: .35rem; border: 1px solid #173f3520; border-radius: .8rem; background: var(--paper); box-shadow: 0 .8rem 2rem #173f3528; }
  .section-order-menu:not([hidden]) { display: grid; gap: .2rem; }
  .section-order-menu button { display: flex; width: 100%; height: 2.75rem; justify-content: flex-start; gap: .55rem; padding: 0 .7rem; border: 0; background: transparent; font-size: .76rem; font-weight: 800; }
  .section-order-menu button:disabled { display: none; }
  .carousel-content-navigation { justify-content: space-between; margin: -.1rem 0 .65rem; padding: 0 .1rem; }
  .carousel-controls button { width: 2.75rem; height: 2.75rem; }
  .environment-card { min-height: 11rem; }
  .section-heading, .history-header, .watering-header, .notification-center-header, .traffic-header, .journal-header, .weather-header, .event-header, .today-header, .forecast-header, .weekly-header { align-items: start; flex-direction: column; }
  .weather-current { width: 100%; min-width: 0; }
  .weather-location-form > div { flex-wrap: wrap; }
  .weather-location-form input { flex-basis: 100%; }
  .weather-location-form button { flex: 1; }
  .automatic-event { grid-template-columns: auto 1fr; }
  .automatic-event time { grid-column: 2; text-align: left; }
  .today-list { grid-template-columns: 1fr; }
  .today-guide { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .today-guide > img { width: 6rem; height: 6rem; }
  .forecast-header > p { text-align: left; }
  .weekly-metrics { grid-template-columns: repeat(2, 1fr); }
  .photo-form { grid-template-columns: 1fr; }
  .photo-form > p { grid-column: auto; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-card-body { padding: .65rem; }
  .personalization-grid { grid-template-columns: 1fr; }
  .preference-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-card { align-items: stretch; flex-direction: column; gap: 1rem; }
  .notification-actions { align-items: stretch; flex-direction: column; }
  .notification-card button { width: 100%; }
  .chart-card.chart-wide { grid-column: auto; }
  .history-selector { width: 100%; justify-content: space-between; }
  .history-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .export-options { grid-template-columns: 1fr; }
  .character-stage img { width: min(13rem, 72%); }
  .watering-event { grid-template-columns: auto 1fr; }
  .watering-event > span:last-child { grid-column: 2; text-align: left; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
  .notification-center-actions { width: 100%; justify-content: space-between; }
  .notification-center-actions button:first-child { flex: 1; }
  .notification-item { grid-template-columns: auto 1fr; }
  .notification-item-meta { grid-column: 2; align-items: start; flex-direction: row; text-align: left; }
  .notification-center-title > img { width: 3.5rem; height: 3.5rem; }
  .profile-detail { grid-template-columns: 1fr; }
  .profile-care { grid-template-columns: 1fr; }
  .profile-care .profile-tip { grid-column: auto; }
  .journal-header .primary-action { width: 100%; }
  .calendar-day { min-height: 4rem; padding: .3rem; }
  .calendar-dot { width: .48rem; height: .48rem; margin: .25rem auto 0; padding: 0; border-radius: 50%; color: transparent !important; }
  .journal-event { grid-template-columns: auto 1fr; }
  .journal-event time { grid-column: 2; text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .form-wide { grid-column: auto; }
  .assistant-panel { bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 6.4rem)); max-height: calc(100vh - 7.5rem); }
  .assistant-panel-header { grid-template-columns: 5.2rem minmax(0, 1fr); }
  .assistant-panel-header > img { width: 5.5rem; height: 5.5rem; }
  .calibration-readings { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-comparison, .preference-checks { grid-template-columns: 1fr; }
  .station-plant-grid { grid-template-columns: 1fr; }
  .plant-slot { min-height: 6.8rem; grid-template-columns: auto minmax(0, 1fr) auto; }
  .plant-slot-reading { grid-column: auto; text-align: right; }
  .gamification-hero { grid-template-columns: 1fr; text-align: center; }
  .gamification-hero > img { width: 7.5rem; height: 7.5rem; margin: -1rem auto; }
  .gamification-stats { justify-content: center; }
  .assistant-toggle { right: max(.65rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); width: 4.55rem; height: 4.55rem; }
  .assistant-toggle img { width: 4.05rem; height: 4.05rem; }
  .assistant-toggle span { right: 3.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  html, .quick-nav-track, .carousel-track { scroll-behavior: auto; }
  .character-stage img { animation: none; }
  .assistant-toggle { animation: none; }
  .collapsible-header, .collapsible-content, .section-collapse-toggle span { transition: none; }
}