/* DS Studios personal project dashboard */
:root {
  --bg: #071019;
  --panel: #0d1823;
  --panel-2: #111f2d;
  --line: #223447;
  --text: #f5f7fa;
  --muted: #91a4b7;
  --cyan: #45c8ff;
  --blue: #478cff;
  --green: #55dc87;
  --amber: #f2bc57;
  --red: #ff6565;
  --purple: #a98cff;
  --radius: 20px;
  --shadow: 0 18px 40px rgba(0,0,0,.22);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 80% -10%, rgba(71,140,255,.14), transparent 34rem), var(--bg); color: var(--text); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.app-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px; border-right: 1px solid var(--line); background: rgba(7,16,25,.92); backdrop-filter: blur(18px); }
.brand { display:flex; gap:12px; align-items:center; padding:0 10px 26px; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:linear-gradient(145deg,var(--blue),var(--cyan)); box-shadow:0 8px 24px rgba(69,200,255,.2); }
.brand h1 { font-size:18px; margin:0; letter-spacing:.02em; }
.brand small { color:var(--muted); display:block; margin-top:2px; }
.profile { margin:0 6px 24px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.profile strong { display:block; }
.profile span { font-size:12px; color:var(--muted); }
.nav { display:flex; flex-direction:column; gap:6px; }
.nav-label { margin:18px 10px 7px; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#60778c; font-weight:700; }
.nav a { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; color:#b8c5d1; font-size:14px; }
.nav a:hover, .nav a.active { color:#fff; background:#142638; }
.nav .nav-icon { width:26px; color:var(--cyan); }
.nav a.disabled { opacity:.45; cursor:default; }
.nav-badge { font-size:9px; padding:3px 6px; border:1px solid #38506a; border-radius:999px; color:#8297aa; }
.sidebar-bottom { position:absolute; bottom:22px; left:18px; right:18px; }
.main { min-width:0; padding:34px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.eyebrow { margin:0 0 7px; color:var(--cyan); text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:800; }
.topbar h2 { margin:0; font-size:30px; letter-spacing:-.03em; }
.topbar p { margin:8px 0 0; color:var(--muted); }
.status-pill { display:inline-flex; align-items:center; gap:8px; color:#b9c9d6; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(13,24,35,.75); font-size:12px; white-space:nowrap; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }
.grid { display:grid; gap:18px; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.two-col { grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); margin-top:18px; }
.facts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.plant-main-grid { grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr); }
.card { background:linear-gradient(180deg, rgba(17,31,45,.96), rgba(11,23,34,.96)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-pad { padding:22px; }
.metric-card { padding:20px; min-height:150px; position:relative; }
.metric-card:after { content:""; position:absolute; width:92px; height:92px; border-radius:50%; background:rgba(69,200,255,.07); right:-25px; top:-28px; }
.metric-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.metric-value { margin:18px 0 3px; font-size:32px; font-weight:750; letter-spacing:-.04em; }
.metric-sub { color:var(--muted); font-size:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-head h3 { margin:0; font-size:17px; }
.section-head small { color:var(--muted); }

.chart-section-head { align-items:flex-start; }
.chart-head-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.chart-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.chart-controls label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.chart-controls select { min-width:138px; padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:10px; background:#0a1621; color:var(--text); font:inherit; font-size:12px; text-transform:none; letter-spacing:0; outline:none; }
.chart-controls select:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(69,200,255,.12); }
.chart-wrap { min-height:330px; width:100%; overflow:hidden; }
.chart-wrap svg { width:100%; min-width:650px; height:330px; display:block; }
.chart-grid { stroke:#253a4e; stroke-width:1; }
.chart-axis-text { fill:#71899d; font-size:11px; }
.chart-value-text { fill:#dbe7f0; font-size:10px; font-weight:700; }
.chart-line { fill:none; stroke:var(--cyan); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.chart-area { fill:url(#tempGradient); opacity:.28; }
.chart-point { fill:#071019; stroke:var(--cyan); stroke-width:3; }
.moisture-panel { display:grid; place-items:center; text-align:center; min-height:385px; padding:24px; }
.gauge { --value:0; --gauge-color:var(--green); width:210px; height:210px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--gauge-color) calc(var(--value) * 1%), #203345 0); position:relative; box-shadow:inset 0 0 0 1px #2b4154; }
.gauge:after { content:""; position:absolute; inset:18px; border-radius:50%; background:#0b1722; border:1px solid #253a4c; }
.gauge-content { position:relative; z-index:1; }
.gauge-value { font-size:46px; font-weight:800; letter-spacing:-.05em; }
.gauge-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.gauge-meta { margin-top:20px; display:flex; gap:22px; color:var(--muted); font-size:12px; }
.gauge-meta strong { color:#fff; display:block; font-size:16px; margin-top:3px; }
.fact-card { padding:22px; min-height:180px; position:relative; }
.fact-topic { color:var(--cyan); font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.fact-text { margin:15px 0; line-height:1.65; font-size:16px; }
.fact-meta { font-size:11px; color:var(--muted); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid #1c3042; white-space:nowrap; }
th { color:#7f96aa; font-weight:650; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
td { color:#d4dfe8; }
.photo-placeholder { min-height:330px; border:1px dashed #3b5369; border-radius:16px; display:grid; place-items:center; text-align:center; padding:28px; background:linear-gradient(145deg,#0b1722,#0d1b28); }
.photo-placeholder .camera { font-size:38px; display:block; margin-bottom:12px; }
.photo-placeholder p { margin:5px 0; color:var(--muted); }
.device-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.device-card { padding:22px; }
.device-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.device-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#15293b; font-size:22px; }
.device-card h3 { margin:15px 0 5px; }
.device-role { color:var(--muted); font-size:13px; line-height:1.5; }
.device-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.device-tags span { font-size:10px; color:#a9bfd1; border:1px solid #2a4257; border-radius:999px; padding:5px 8px; }
.footer { display:flex; justify-content:space-between; gap:20px; margin-top:28px; padding:20px 2px 4px; color:#71869a; font-size:12px; }
.footer strong { color:#aebdca; }
.error-banner { display:none; margin-bottom:18px; padding:12px 14px; border:1px solid rgba(255,101,101,.35); color:#ffc1c1; background:rgba(255,101,101,.08); border-radius:12px; }
.loading { color:var(--muted); }
.mobile-menu { display:none; }
@media(max-width:1050px){ .metrics{grid-template-columns:repeat(2,1fr)} .two-col,.plant-main-grid{grid-template-columns:1fr} }
@media(max-width:760px){ .chart-section-head{display:block}.chart-head-right{align-items:flex-start;margin-top:12px}.chart-controls{justify-content:flex-start}.chart-controls label{flex:1;min-width:130px}.chart-controls select{width:100%;min-width:0} .app-shell{display:block}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.sidebar-bottom{position:static;margin-top:18px}.main{padding:22px 16px}.metrics,.facts-grid,.device-grid{grid-template-columns:1fr}.topbar{display:block}.status-pill{margin-top:14px}.chart-wrap{overflow:auto}.footer{flex-direction:column}.profile{display:none}.nav{display:grid;grid-template-columns:repeat(2,1fr)}.nav-label{grid-column:1/-1}.nav a{font-size:13px}}


/* Device quick-status cards and device detail pages */
.nav-sub { display:flex; flex-direction:column; gap:3px; margin:2px 0 7px 36px; padding-left:10px; border-left:1px solid #263c50; }
.nav-sub a { padding:7px 9px; border-radius:9px; font-size:11px; color:#7f96aa; }
.nav-sub a:hover, .nav-sub a.active { color:#fff; background:#102234; }
.gauge-meta-single { justify-content:center; }
.device-status-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; }
.device-status-card { padding:20px; min-height:168px; transition:border-color .18s ease, background .18s ease, transform .18s ease; text-align:center; }
.device-status-card:hover { border-color:#395a72; transform:translateY(-1px); }
.device-status-card.is-online { border-color:rgba(85,220,135,.28); }
.device-status-card.is-offline { border-color:rgba(255,101,101,.6); background:linear-gradient(180deg,rgba(55,22,28,.94),rgba(25,17,24,.97)); }
.device-status-card.is-unknown { border-color:rgba(242,188,87,.38); }
.device-status-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.device-status-name { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.device-health-badge { flex:none; font-size:9px; font-weight:800; letter-spacing:.08em; padding:4px 7px; border-radius:999px; border:1px solid #40566c; color:#9cafc0; }
.device-health-badge.is-online { border-color:rgba(85,220,135,.45); color:var(--green); background:rgba(85,220,135,.08); }
.device-health-badge.is-offline { border-color:rgba(255,101,101,.55); color:#ff9191; background:rgba(255,101,101,.1); }
.device-health-badge.is-checking { color:var(--amber); }
.device-status-value { margin:22px 0 7px; font-size:19px; line-height:1.35; font-weight:760; letter-spacing:-.025em; }
.device-status-details { min-height:18px; color:var(--muted); font-size:11px; }
.device-status-time { margin-top:16px; color:#6f8598; font-size:10px; }
.device-status-card.is-offline .device-status-value { color:#ff9a9a; }
.device-detail-metrics { grid-template-columns:1.15fr 1fr 1.35fr; }
.device-detail-value { font-size:24px; }
.device-detail-time { font-size:20px; line-height:1.35; }
.device-detail-role { margin-top:18px; color:#d8e3eb; line-height:1.55; font-size:14px; }
.device-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.device-placeholder { min-height:220px; display:grid; place-items:center; text-align:center; padding:24px; color:var(--muted); border:1px dashed #344d62; border-radius:15px; background:#0a1621; line-height:1.6; }
.live-data-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.live-data-item { padding:14px; border:1px solid #20364a; border-radius:13px; background:#0a1621; }
.live-data-item span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.live-data-item strong { display:block; margin-top:6px; font-size:16px; }
.status-dot.offline { background:var(--red); box-shadow:0 0 14px var(--red); }
.status-dot.unknown { background:var(--amber); box-shadow:0 0 14px var(--amber); }
@media(max-width:1250px){ .device-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:1050px){ .device-detail-metrics{grid-template-columns:1fr 1fr}.device-detail-grid{grid-template-columns:1fr} }
@media(max-width:760px){ .nav-sub{grid-column:1/-1;margin-left:18px}.device-status-grid,.device-detail-metrics,.live-data-list{grid-template-columns:1fr} }
.sidebar { overflow-y:auto; }
.sidebar-bottom { position:static; margin-top:18px; }

/* Version 4.1 additions */
body[data-page="plant"] {
  --bg: #06150d;
  --panel: #0c2517;
  --panel-2: #12321f;
  --line: #24533a;
  --text: #f3fbf5;
  --muted: #a6c4ae;
  --cyan: #73e6a1;
  --blue: #63b987;
  --green: #55dc87;
  --amber: #e8c96c;
  --red: #ef756d;
  background: radial-gradient(circle at 80% -10%, rgba(85,220,135,.18), transparent 34rem), var(--bg);
}
body[data-page="plant"] .sidebar { background: rgba(6,21,13,.95); }
body[data-page="plant"] .brand-mark { background: linear-gradient(145deg,#23834f,#73e6a1); box-shadow: 0 8px 24px rgba(85,220,135,.2); }
body[data-page="plant"] .nav a:hover,
body[data-page="plant"] .nav a.active,
body[data-page="plant"] .nav-sub a:hover,
body[data-page="plant"] .nav-sub a.active { background:#17452b; }
body[data-page="plant"] .photo-placeholder { background: linear-gradient(145deg,#0e2d1b,#092117); }
body[data-page="plant"] .card { background:linear-gradient(180deg,rgba(15,43,27,.97),rgba(8,31,19,.97)); }
body[data-page="plant"] .live-data-item,
body[data-page="plant"] .chart-controls select { background:#081d12; }

.device-figure { margin: 0; }
.device-figure img { display:block; width:100%; height:auto; border-radius:16px; border:1px solid #274057; background:#fff; }
.device-figure figcaption { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.5; }

.bike-layout { grid-template-columns:minmax(0,1.85fr) minmax(280px,.65fr); }
.bike-chart-card .chart-wrap { min-height:360px; }
.bike-chart-card .chart-wrap svg { height:360px; }
.gauge-bike { --gauge-color: var(--purple); }
.bike-panel .gauge-value { font-size:40px; }
.bike-panel .gauge-label { min-height:32px; display:flex; align-items:center; justify-content:center; }

.grow-guide-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.grow-guide-grid > div { padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.12); }
.grow-guide-grid strong { display:block; margin-bottom:7px; color:var(--green); font-size:13px; }
.grow-guide-grid span { display:block; color:var(--muted); font-size:12px; line-height:1.6; }

@media(max-width:1100px){
  .bike-layout { grid-template-columns:1fr; }
  .grow-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .grow-guide-grid { grid-template-columns:1fr; }
}

/* Version 4.2 additions */
.account-avatar {
  font-size:22px;
  background:linear-gradient(145deg,#1b3044,#274d69);
  border:1px solid #385d78;
  box-shadow:0 8px 24px rgba(69,200,255,.14);
}
.project-flow-card { overflow:hidden; }
.project-flow-figure { background:#0c1722; border-radius:18px; padding:0; }
.project-flow-figure img { width:100%; height:auto; max-height:none; object-fit:initial; background:#0c1722; border-color:#24394d; }
.page-note { margin:0; color:var(--muted); line-height:1.7; }
.changelog-table th:nth-child(1), .changelog-table td:nth-child(1) { width:210px; }
.changelog-table th:nth-child(2), .changelog-table td:nth-child(2) { width:100px; }
.changelog-table td:nth-child(3) { white-space:normal; min-width:360px; line-height:1.55; }

/* Brighter plant-green theme */
body[data-page="plant"] {
  --bg:#04150b;
  --panel:#0a2a16;
  --panel-2:#103a20;
  --line:#23663b;
  --muted:#abd3b5;
  --cyan:#72efa2;
  --blue:#52c77f;
  --green:#45df79;
  background:radial-gradient(circle at 80% -10%,rgba(69,223,121,.22),transparent 34rem),var(--bg);
}
body[data-page="plant"] .sidebar { background:rgba(4,21,11,.96); }
body[data-page="plant"] .card { background:linear-gradient(180deg,rgba(10,42,22,.98),rgba(5,29,14,.98)); }
body[data-page="plant"] .nav a:hover,
body[data-page="plant"] .nav a.active,
body[data-page="plant"] .nav-sub a:hover,
body[data-page="plant"] .nav-sub a.active { background:#14532b; }

/* Version 4.4 Raspberry Pi plant camera */
.camera-photo-panel {
  display: grid;
  gap: 12px;
}
.camera-photo-link {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #061019;
}
.camera-photo-link[hidden],
.camera-photo-meta[hidden],
.photo-placeholder[hidden] {
  display: none !important;
}
.camera-photo-img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  background: #050b10;
}
.camera-photo-meta {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.camera-photo-meta strong,
.camera-photo-meta span {
  display: block;
}
.camera-photo-meta strong {
  color: var(--text);
  font-size: 12px;
}
.camera-photo-meta span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body[data-page="plant"] .camera-photo-link {
  border-color: rgba(110,220,137,.35);
  background: #07170d;
}

/* Version 5.0 */
.sidebar { overflow-x:hidden; }
.nav-icon.plant-nav-icon { font-size:15px; }
.dashboard-device-grid { margin-top:18px; }

.weather-metric-card { position:relative; overflow:hidden; }
.weather-card-icon { position:absolute; right:16px; top:14px; font-size:28px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.28)); transform-origin:center; }
.icon-temp { animation:weatherFloat 2.8s ease-in-out infinite; }
.icon-humidity { animation:weatherBob 2.2s ease-in-out infinite; }
.icon-pressure { animation:weatherSpin 7s linear infinite; }
.icon-wifi { animation:weatherPulse 1.8s ease-in-out infinite; }
@keyframes weatherFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes weatherBob { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(4px) scale(1.06)} }
@keyframes weatherSpin { from{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} to{transform:rotate(-6deg)} }
@keyframes weatherPulse { 0%,100%{opacity:.7;transform:scale(.94)} 50%{opacity:1;transform:scale(1.08)} }
.metric-card.temp-hot { border-color:rgba(255,92,79,.9); box-shadow:0 0 0 1px rgba(255,92,79,.28),var(--shadow); }
.metric-card.temp-cold { border-color:rgba(72,153,255,.9); box-shadow:0 0 0 1px rgba(72,153,255,.28),var(--shadow); }

.plant-story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; }
.plant-profile-card { min-height:330px; }
.plant-story-icon { font-size:64px; text-align:center; margin:10px 0 20px; animation:weatherFloat 3s ease-in-out infinite; }
.plant-story-list { display:grid; gap:10px; }
.plant-story-list > div { padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.1); }
.plant-story-list span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.plant-story-list strong { display:block; margin-top:5px; font-size:13px; line-height:1.45; }

/* Mama's Harvest Hub */
body[data-page="harvest"] {
  --bg:#1d120d;
  --panel:#342016;
  --panel-2:#42281a;
  --line:#6a432c;
  --text:#fff7ea;
  --muted:#d7bfa7;
  --cyan:#f0b56b;
  --blue:#dc8f53;
  --green:#9ec46f;
  --amber:#f0b56b;
  --red:#ef7866;
  background:radial-gradient(circle at 80% -10%,rgba(215,121,61,.24),transparent 34rem),var(--bg);
}
body[data-page="harvest"] .sidebar { background:rgba(29,18,13,.96); }
body[data-page="harvest"] .card { background:linear-gradient(180deg,rgba(63,38,24,.98),rgba(42,25,17,.98)); }
body[data-page="harvest"] .nav a:hover, body[data-page="harvest"] .nav a.active, body[data-page="harvest"] .nav-sub a:hover, body[data-page="harvest"] .nav-sub a.active { background:#57351f; }
.harvest-source-value { font-size:20px; line-height:1.3; }
.harvest-areas { display:grid; gap:18px; margin-top:18px; }
.harvest-area-card { padding:22px; }
.harvest-area-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.harvest-area-head h3 { margin:0; font-size:24px; }
.harvest-plant-icon { font-size:42px; }
.harvest-area-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr); gap:18px; margin-top:18px; }
.harvest-profile-pane, .harvest-photo-pane { border:1px solid var(--line); border-radius:16px; padding:18px; background:rgba(0,0,0,.11); }
.harvest-default-plant { min-height:150px; display:grid; place-items:center; font-size:92px; border-radius:14px; background:linear-gradient(145deg,rgba(255,239,212,.08),rgba(126,67,31,.08)); }
.harvest-meta-list { display:grid; gap:9px; margin-top:15px; }
.harvest-meta-list div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:7px; }
.harvest-meta-list span { color:var(--muted); font-size:11px; }
.harvest-meta-list strong { font-size:11px; text-align:right; }
.harvest-details { color:var(--muted); font-size:12px; line-height:1.6; }
.harvest-photo-link { display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#140d09; }
.harvest-photo-link[hidden] { display:none!important; }
.harvest-photo-link img { width:100%; max-height:360px; object-fit:contain; display:block; background:#110b08; }
.harvest-photo-empty { min-height:220px; border:1px dashed var(--line); border-radius:14px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.harvest-photo-empty span { display:block; font-size:44px; }
.harvest-ai-note { margin-top:12px; padding:11px 12px; border-radius:12px; background:rgba(158,196,111,.1); border:1px solid rgba(158,196,111,.25); color:#dce9c7; font-size:12px; line-height:1.55; }
.harvest-upload-form { display:grid; grid-template-columns:1fr; gap:9px; margin-top:12px; }
.upload-button { display:block; padding:10px 12px; border:1px solid var(--line); border-radius:11px; text-align:center; background:#4c2e1d; cursor:pointer; font-size:12px; font-weight:700; }
.upload-button input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.harvest-note-input, .upload-submit { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#27170f; color:var(--text); font:inherit; }
.upload-submit { background:#77502e; cursor:pointer; font-weight:750; }
.harvest-area-card.is-available { opacity:.72; }
.upload-banner { margin-bottom:18px; border-radius:12px; padding:12px 14px; font-size:13px; }
.upload-banner.is-success { color:#e7ffd9; border:1px solid rgba(158,196,111,.45); background:rgba(158,196,111,.12); }
.upload-banner.is-error { color:#ffd4cd; border:1px solid rgba(239,120,102,.45); background:rgba(239,120,102,.12); }
.harvest-facts-grid { margin-top:18px; }

/* Admin system-history page */
.system-history-section { overflow:hidden; }
.history-static-list { margin-bottom:18px; }
.history-chart-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.history-chart-card { border:1px solid var(--line); border-radius:15px; padding:14px; background:#0a1621; }
.history-chart-card h4 { margin:0 0 8px; }
.compact-chart { min-height:250px; overflow:auto; }
.compact-chart svg { height:250px; min-width:520px; }

@media(max-width:1100px){
  .plant-story-grid,.history-chart-grid { grid-template-columns:1fr; }
  .harvest-area-grid { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .weather-card-icon { right:12px; top:12px; font-size:24px; }
}

/* V5.0.1 Harvest Hub database editor */
.harvest-notes-block { margin-top:14px; }
.harvest-notes-block > span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.harvest-editor { margin-top:16px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.10); overflow:hidden; }
.harvest-editor summary { cursor:pointer; padding:11px 13px; font-size:12px; font-weight:700; color:var(--text); user-select:none; }
.harvest-editor[open] summary { border-bottom:1px solid var(--line); }
.harvest-plant-edit-form { display:grid; gap:11px; padding:14px; }
.harvest-plant-edit-form label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
.harvest-plant-edit-form input[type="text"],
.harvest-plant-edit-form input[type="date"],
.harvest-plant-edit-form textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#27170f; color:var(--text); font:inherit; }
.harvest-plant-edit-form textarea { resize:vertical; min-height:92px; }
.harvest-active-toggle { display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:9px!important; }
.harvest-active-toggle input { width:16px; height:16px; }
body[data-page="harvest"] .harvest-facts-grid { margin-top:18px; margin-bottom:18px; }
body[data-page="harvest"] .harvest-areas { margin-top:0; }

/* Version 5.0.2 UI refinements */
.changelog-latest-pill {
  white-space: normal;
  max-width: 440px;
  line-height: 1.4;
}

/* Shared navigation emoji alignment. */
.nav .nav-icon {
  display: inline-block;
  width: 26px;
  text-align: center;
  color: inherit;
}

/* Per-account dashboard themes. These affect the main Dashboard only. */
body[data-page="dashboard"][data-user-theme="mama"] {
  --bg:#1d120d;
  --panel:#342016;
  --panel-2:#42281a;
  --line:#6a432c;
  --text:#fff7ea;
  --muted:#d7bfa7;
  --cyan:#f0b56b;
  --blue:#dc8f53;
  --green:#9ec46f;
  --amber:#f0b56b;
  --red:#ef7866;
  background:radial-gradient(circle at 80% -10%,rgba(215,121,61,.24),transparent 34rem),var(--bg);
}
body[data-page="dashboard"][data-user-theme="mama"] .sidebar { background:rgba(29,18,13,.96); }
body[data-page="dashboard"][data-user-theme="mama"] .card { background:linear-gradient(180deg,rgba(63,38,24,.98),rgba(42,25,17,.98)); }
body[data-page="dashboard"][data-user-theme="mama"] .nav a:hover,
body[data-page="dashboard"][data-user-theme="mama"] .nav a.active,
body[data-page="dashboard"][data-user-theme="mama"] .nav-sub a:hover,
body[data-page="dashboard"][data-user-theme="mama"] .nav-sub a.active { background:#57351f; }

body[data-page="dashboard"][data-user-theme="anissa"] {
  --bg:#180707;
  --panel:#2a0d10;
  --panel-2:#391217;
  --line:#6b2830;
  --text:#fff5f5;
  --muted:#d8a8ad;
  --cyan:#ff777f;
  --blue:#e5505b;
  --green:#67d99a;
  --amber:#f2b35f;
  --red:#ff5e68;
  background:radial-gradient(circle at 80% -10%,rgba(220,46,58,.24),transparent 34rem),var(--bg);
}
body[data-page="dashboard"][data-user-theme="anissa"] .sidebar { background:rgba(24,7,7,.96); }
body[data-page="dashboard"][data-user-theme="anissa"] .card { background:linear-gradient(180deg,rgba(58,18,23,.98),rgba(35,10,13,.98)); }
body[data-page="dashboard"][data-user-theme="anissa"] .nav a:hover,
body[data-page="dashboard"][data-user-theme="anissa"] .nav a.active,
body[data-page="dashboard"][data-user-theme="anissa"] .nav-sub a:hover,
body[data-page="dashboard"][data-user-theme="anissa"] .nav-sub a.active { background:#50171d; }

body[data-page="dashboard"][data-user-theme="nilay"] {
  --bg:#071713;
  --panel:#0d2a22;
  --panel-2:#12382e;
  --line:#2b6657;
  --text:#f3fff9;
  --muted:#a9d3c4;
  --cyan:#74e6bd;
  --blue:#56c9a2;
  --green:#70dfa7;
  --amber:#e8c86a;
  --red:#ef746f;
  background:radial-gradient(circle at 80% -10%,rgba(88,211,168,.22),transparent 34rem),var(--bg);
}
body[data-page="dashboard"][data-user-theme="nilay"] .sidebar { background:rgba(7,23,19,.96); }
body[data-page="dashboard"][data-user-theme="nilay"] .card { background:linear-gradient(180deg,rgba(17,55,45,.98),rgba(9,35,29,.98)); }
body[data-page="dashboard"][data-user-theme="nilay"] .nav a:hover,
body[data-page="dashboard"][data-user-theme="nilay"] .nav a.active,
body[data-page="dashboard"][data-user-theme="nilay"] .nav-sub a:hover,
body[data-page="dashboard"][data-user-theme="nilay"] .nav-sub a.active { background:#164d3e; }

body[data-page="dashboard"][data-user-theme="giggles"] {
  --bg:#190913;
  --panel:#301020;
  --panel-2:#40162c;
  --line:#743454;
  --text:#fff5fb;
  --muted:#ddb0c9;
  --cyan:#ff8fc5;
  --blue:#e964a7;
  --green:#72d99d;
  --amber:#f0bc67;
  --red:#ff6d8e;
  background:radial-gradient(circle at 80% -10%,rgba(230,77,151,.22),transparent 34rem),var(--bg);
}
body[data-page="dashboard"][data-user-theme="giggles"] .sidebar { background:rgba(25,9,19,.96); }
body[data-page="dashboard"][data-user-theme="giggles"] .card { background:linear-gradient(180deg,rgba(64,22,44,.98),rgba(39,12,27,.98)); }
body[data-page="dashboard"][data-user-theme="giggles"] .nav a:hover,
body[data-page="dashboard"][data-user-theme="giggles"] .nav a.active,
body[data-page="dashboard"][data-user-theme="giggles"] .nav-sub a:hover,
body[data-page="dashboard"][data-user-theme="giggles"] .nav-sub a.active { background:#5b1f3d; }

/* Cilantro layout: story + history, then gauge + photo + compact information stack. */
.plant-overview-grid {
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr);
}
.plant-history-card .chart-wrap { min-height:330px; }
.plant-detail-row {
  grid-template-columns:minmax(250px,.72fr) minmax(320px,1.15fr) minmax(270px,.85fr);
  margin-top:18px;
  align-items:stretch;
}
.plant-detail-row > * { min-width:0; }
.plant-moisture-card { min-height:390px; }
.plant-photo-card .camera-photo-img { max-height:340px; }
.plant-right-stack {
  display:grid;
  grid-template-rows:auto 1fr;
  gap:18px;
  min-width:0;
}
.plant-fact-compact {
  min-height:0;
  padding:20px;
}
.plant-fact-compact .fact-text {
  font-size:14px;
  line-height:1.55;
  margin:12px 0;
}
.plant-mini-weather-card { min-height:190px; }
.plant-mini-weather-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.plant-mini-weather-grid > div {
  padding:10px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.11);
}
.mini-weather-icon {
  display:block;
  font-size:23px;
  min-height:28px;
  transform-origin:center;
}
.plant-mini-weather-grid small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.plant-mini-weather-grid strong {
  display:block;
  margin-top:5px;
  font-size:12px;
}
.plant-mini-weather-time { margin-top:12px; text-align:center; }

@media(max-width:1180px) {
  .plant-detail-row { grid-template-columns:1fr 1fr; }
  .plant-right-stack { grid-column:1/-1; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
}
@media(max-width:900px) {
  .plant-overview-grid { grid-template-columns:1fr; }
  .plant-detail-row { grid-template-columns:1fr; }
  .plant-right-stack { grid-column:auto; grid-template-columns:1fr; }
}
@media(max-width:520px) {
  .plant-mini-weather-grid { grid-template-columns:1fr; }
}

/* =========================================================
   V5.0.4 Photo framing optimization
   Raspberry Pi cilantro camera: fixed landscape 4:3 frame.
   Harvest Hub iPhone uploads: portrait 3:4 frame.
   ========================================================= */

/* Cilantro + Raspberry Pi camera photos.
   The plant camera is stationary, so fill a consistent 4:3 frame
   rather than letterboxing the JPEG against a black background. */
.camera-photo-link {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
}
.camera-photo-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}
body[data-page="plant"] .camera-photo-link {
  background: transparent;
}
.plant-photo-card .camera-photo-img {
  max-height: none;
}

/* Harvest Hub photos are expected to be iPhone portrait images.
   Keep the frame portrait-shaped instead of stretching it across the
   whole garden card, and crop only enough to fill the frame. */
.harvest-photo-link {
  width: min(100%, 390px);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background: transparent;
}
.harvest-photo-link img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

/* Keep the portrait frame comfortably sized on narrow phones. */
@media (max-width: 640px) {
  .harvest-photo-link {
    width: min(100%, 360px);
  }
}

/* =========================================================
   V5.0.6 Cilantro growing-condition gauges
   ========================================================= */
.cilantro-conditions-card {
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cilantro-range-gauges {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.cilantro-range-gauge {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.11);
  transition:border-color .2s ease, background .2s ease;
}
.cilantro-gauge-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.cilantro-gauge-head > span {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.condition-icon {
  font-size:19px;
  line-height:1;
  flex:0 0 auto;
}
.cilantro-gauge-head strong {
  color:var(--text);
  font-size:18px;
  white-space:nowrap;
}
.cilantro-range-track {
  --position:50%;
  position:relative;
  height:12px;
  margin-top:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  overflow:visible;
}
.cilantro-range-track.temp-track {
  background:linear-gradient(90deg,
    var(--cyan) 0%,
    var(--green) 28%,
    var(--green) 71%,
    var(--amber) 86%,
    var(--red) 100%);
}
.cilantro-range-track.humidity-track {
  background:linear-gradient(90deg,
    var(--amber) 0%,
    var(--green) 20%,
    var(--green) 80%,
    var(--amber) 100%);
}
.cilantro-range-pointer {
  position:absolute;
  left:var(--position);
  top:50%;
  width:4px;
  height:22px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.24);
  transform:translate(-50%,-50%);
}
.cilantro-range-track.is-low .cilantro-range-pointer,
.cilantro-range-track.is-high .cilantro-range-pointer {
  height:26px;
}
.cilantro-range-scale {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:6px;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
}
.cilantro-range-scale span:nth-child(2) { text-align:center; }
.cilantro-condition-status {
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}
.condition-good .cilantro-condition-status { color:var(--green); }
.condition-watch .cilantro-condition-status { color:var(--amber); }
.condition-alert .cilantro-condition-status { color:var(--red); }
.condition-neutral .cilantro-condition-status { color:var(--muted); }
.cilantro-range-gauge.condition-alert { border-color:rgba(239,116,111,.62); }
.cilantro-range-gauge.condition-watch { border-color:rgba(232,200,106,.52); }
.cilantro-range-gauge.condition-good { border-color:rgba(112,223,167,.42); }

.cilantro-condition-lower {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.cilantro-pressure-card,
.cilantro-overall-card {
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.11);
}
.cilantro-pressure-card > div,
.cilantro-overall-card > div { min-width:0; }
.cilantro-pressure-card small,
.cilantro-overall-card small {
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.cilantro-pressure-card strong,
.cilantro-overall-card strong {
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:13px;
}
.cilantro-pressure-card span:not(.condition-icon),
.cilantro-overall-card span:not(.cilantro-overall-icon) {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.cilantro-overall-icon {
  font-size:28px;
  line-height:1;
  flex:0 0 auto;
}
.cilantro-overall-card.condition-good { border-color:rgba(112,223,167,.42); }
.cilantro-overall-card.condition-watch { border-color:rgba(232,200,106,.52); }
.cilantro-overall-card.condition-alert { border-color:rgba(239,116,111,.62); }
.cilantro-overall-card.condition-good strong { color:var(--green); }
.cilantro-overall-card.condition-watch strong { color:var(--amber); }
.cilantro-overall-card.condition-alert strong { color:var(--red); }

@media (min-width:1181px) {
  .cilantro-conditions-card { justify-content:flex-start; }
}
@media (max-width:1180px) and (min-width:901px) {
  .cilantro-range-gauges { grid-template-columns:1fr 1fr; }
  .cilantro-condition-lower { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .cilantro-gauge-head { align-items:flex-start; }
  .cilantro-range-scale { font-size:8px; }
}

/* ================================================================
   V5.0.7 - Harvest Hub compact garden cards
   ================================================================ */
body[data-page="harvest"] .harvest-areas {
  gap: 12px;
}
body[data-page="harvest"] .harvest-area-card {
  padding: 16px;
}
body[data-page="harvest"] .harvest-area-head h3 {
  font-size: 21px;
}
body[data-page="harvest"] .harvest-plant-icon {
  font-size: 34px;
}
body[data-page="harvest"] .harvest-area-grid {
  grid-template-columns: minmax(250px, .9fr) minmax(280px, 1.1fr);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
body[data-page="harvest"] .harvest-profile-pane,
body[data-page="harvest"] .harvest-photo-pane {
  padding: 14px;
  border-radius: 14px;
}
body[data-page="harvest"] .harvest-default-plant {
  min-height: 105px;
  font-size: 68px;
}
body[data-page="harvest"] .harvest-meta-list {
  gap: 6px;
  margin-top: 11px;
}
body[data-page="harvest"] .harvest-meta-list div {
  padding-bottom: 5px;
}
body[data-page="harvest"] .harvest-notes-block {
  margin-top: 10px;
}
body[data-page="harvest"] .harvest-details {
  margin-bottom: 0;
  line-height: 1.45;
}
body[data-page="harvest"] .harvest-editor {
  margin-top: 11px;
}
body[data-page="harvest"] .harvest-photo-link {
  width: min(100%, 280px);
  margin: 0 auto;
}
body[data-page="harvest"] .harvest-photo-empty {
  width: min(100%, 280px);
  min-height: 135px;
  margin: 0 auto;
}
body[data-page="harvest"] .harvest-photo-empty span {
  font-size: 34px;
}
body[data-page="harvest"] .harvest-ai-note {
  margin-top: 9px;
  padding: 9px 10px;
  line-height: 1.4;
}
body[data-page="harvest"] .harvest-ai-generated-note {
  display: grid;
  gap: 3px;
}
body[data-page="harvest"] .harvest-ai-generated-note strong,
body[data-page="harvest"] .harvest-photo-note-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}
body[data-page="harvest"] .harvest-ai-generated-note span {
  color: #dce9c7;
  font-weight: 400;
}
body[data-page="harvest"] .harvest-upload-form {
  gap: 8px;
  margin-top: 9px;
}
body[data-page="harvest"] .harvest-photo-note-label {
  display: grid;
  gap: 5px;
}
body[data-page="harvest"] .harvest-note-input,
body[data-page="harvest"] .upload-button,
body[data-page="harvest"] .upload-submit {
  padding: 9px 10px;
}
body[data-page="harvest"] .harvest-upload-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body[data-page="harvest"] .harvest-upload-actions .upload-button,
body[data-page="harvest"] .harvest-upload-actions .upload-submit {
  margin: 0;
}

@media (max-width: 1100px) {
  body[data-page="harvest"] .harvest-area-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  body[data-page="harvest"] .harvest-area-card {
    padding: 12px;
  }
  body[data-page="harvest"] .harvest-profile-pane,
  body[data-page="harvest"] .harvest-photo-pane {
    padding: 12px;
  }
  body[data-page="harvest"] .harvest-photo-link,
  body[data-page="harvest"] .harvest-photo-empty {
    width: min(100%, 240px);
  }
  body[data-page="harvest"] .harvest-upload-actions {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   V5.0.8 - Compact Cilantro + Harvest Hub layout
   ================================================================ */

/* Plant Story now carries the Cilantro fun fact. */
body[data-page="plant"] .plant-profile-card {
  min-height: 0;
  align-self: start;
}
body[data-page="plant"] .plant-story-icon {
  font-size: 54px;
  margin: 4px 0 12px;
}
body[data-page="plant"] .plant-story-list-compact {
  gap: 7px;
}
body[data-page="plant"] .plant-story-list-compact > div {
  padding: 9px 10px;
}
body[data-page="plant"] .plant-story-fact {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(85,220,135,.28);
  border-radius: 13px;
  background: rgba(85,220,135,.07);
}
body[data-page="plant"] .plant-story-fact .fact-text {
  margin: 8px 0 7px;
  font-size: 13px;
  line-height: 1.48;
}
body[data-page="plant"] .plant-story-fact .fact-meta {
  font-size: 9px;
}

/* Three independent cards. Shorter soil/photo cards no longer stretch
   to the height of the growing-conditions panel. */
body[data-page="plant"] .plant-detail-row {
  grid-template-columns: minmax(220px,.62fr) minmax(280px,.86fr) minmax(330px,1.24fr);
  gap: 14px;
  align-items: start;
}
body[data-page="plant"] .plant-moisture-card {
  min-height: 0;
  padding: 18px 16px;
  align-self: start;
}
body[data-page="plant"] .plant-moisture-card .gauge {
  width: 174px;
  height: 174px;
  margin: 0 auto;
}
body[data-page="plant"] .plant-moisture-card .gauge:after {
  inset: 15px;
}
body[data-page="plant"] .plant-moisture-card .gauge-value {
  font-size: 38px;
}
body[data-page="plant"] .plant-moisture-card .gauge-meta {
  margin-top: 12px;
}
body[data-page="plant"] .plant-moisture-card #plantSoilStatus {
  margin-top: 7px;
}
body[data-page="plant"] .plant-photo-card {
  align-self: start;
  padding: 16px;
}
body[data-page="plant"] .plant-photo-card .section-head {
  margin-bottom: 10px;
}
body[data-page="plant"] .plant-photo-card .camera-photo-link,
body[data-page="plant"] .plant-photo-card .photo-placeholder {
  width: min(100%, 330px);
  margin-left: auto;
  margin-right: auto;
}
body[data-page="plant"] .plant-photo-card .photo-placeholder {
  min-height: 220px;
  padding: 18px;
}
body[data-page="plant"] .cilantro-conditions-card {
  align-self: start;
}

/* Harvest Hub: compact garden cards with a mini profile and photo tools
   beside the portrait image instead of stacked beneath it. */
body[data-page="harvest"] .harvest-areas {
  gap: 9px;
}
body[data-page="harvest"] .harvest-area-card {
  padding: 12px;
}
body[data-page="harvest"] .harvest-area-head {
  align-items: center;
  gap: 10px;
}
body[data-page="harvest"] .harvest-area-head .eyebrow {
  margin-bottom: 2px;
}
body[data-page="harvest"] .harvest-area-head h3 {
  font-size: 19px;
  line-height: 1.2;
}
body[data-page="harvest"] .harvest-plant-icon {
  font-size: 30px;
}
body[data-page="harvest"] .harvest-area-grid {
  grid-template-columns: minmax(245px,.78fr) minmax(420px,1.22fr);
  gap: 9px;
  margin-top: 8px;
}
body[data-page="harvest"] .harvest-profile-pane,
body[data-page="harvest"] .harvest-photo-pane {
  padding: 10px;
  border-radius: 12px;
}
body[data-page="harvest"] .harvest-profile-pane {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 8px 10px;
  align-items: start;
}
body[data-page="harvest"] .harvest-default-plant {
  grid-column: 1;
  grid-row: 1;
  min-height: 72px;
  height: 72px;
  font-size: 46px;
  border-radius: 11px;
}
body[data-page="harvest"] .harvest-meta-list {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  gap: 4px;
  margin-top: 0;
}
body[data-page="harvest"] .harvest-meta-list div {
  padding-bottom: 3px;
  gap: 7px;
}
body[data-page="harvest"] .harvest-meta-list span,
body[data-page="harvest"] .harvest-meta-list strong {
  font-size: 9.5px;
}
body[data-page="harvest"] .harvest-notes-block,
body[data-page="harvest"] .harvest-editor,
body[data-page="harvest"] .harvest-profile-pane > .harvest-ai-note {
  grid-column: 1 / -1;
}
body[data-page="harvest"] .harvest-notes-block {
  margin-top: 1px;
}
body[data-page="harvest"] .harvest-details {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.35;
}
body[data-page="harvest"] .harvest-editor {
  margin-top: 2px;
}
body[data-page="harvest"] .harvest-editor summary {
  padding: 8px 10px;
}
body[data-page="harvest"] .harvest-plant-edit-form {
  gap: 8px;
  padding: 10px;
}

body[data-page="harvest"] .harvest-photo-head {
  margin-bottom: 7px;
}
body[data-page="harvest"] .harvest-photo-head h4 {
  margin: 0;
}
body[data-page="harvest"] .harvest-photo-compact-grid {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 9px;
  align-items: start;
}
body[data-page="harvest"] .harvest-photo-preview,
body[data-page="harvest"] .harvest-photo-tools {
  min-width: 0;
}
body[data-page="harvest"] .harvest-photo-link,
body[data-page="harvest"] .harvest-photo-empty {
  width: 150px;
  margin: 0;
}
body[data-page="harvest"] .harvest-photo-empty {
  min-height: 200px;
}
body[data-page="harvest"] .harvest-photo-empty span {
  font-size: 28px;
}
body[data-page="harvest"] .harvest-ai-note {
  margin-top: 0;
  padding: 8px 9px;
  font-size: 11px;
  line-height: 1.32;
}
body[data-page="harvest"] .harvest-upload-form {
  gap: 6px;
  margin-top: 7px;
}
body[data-page="harvest"] .harvest-photo-note-label {
  gap: 4px;
  font-size: 10px;
}
body[data-page="harvest"] .harvest-note-input,
body[data-page="harvest"] .upload-button,
body[data-page="harvest"] .upload-submit {
  padding: 7px 8px;
  font-size: 11px;
}
body[data-page="harvest"] .harvest-upload-actions {
  gap: 6px;
}

@media (max-width: 1180px) {
  body[data-page="plant"] .plant-detail-row {
    grid-template-columns: 1fr 1fr;
  }
  body[data-page="plant"] .cilantro-conditions-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1100px) {
  body[data-page="harvest"] .harvest-area-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="harvest"] .harvest-photo-compact-grid {
    grid-template-columns: 170px minmax(0,1fr);
  }
  body[data-page="harvest"] .harvest-photo-link,
  body[data-page="harvest"] .harvest-photo-empty {
    width: 170px;
  }
  body[data-page="harvest"] .harvest-photo-empty {
    min-height: 226px;
  }
}
@media (max-width: 900px) {
  body[data-page="plant"] .plant-detail-row {
    grid-template-columns: 1fr;
  }
  body[data-page="plant"] .cilantro-conditions-card {
    grid-column: auto;
  }
}
@media (max-width: 640px) {
  body[data-page="harvest"] .harvest-area-card {
    padding: 9px;
  }
  body[data-page="harvest"] .harvest-profile-pane {
    grid-template-columns: 58px minmax(0,1fr);
  }
  body[data-page="harvest"] .harvest-default-plant {
    width: 58px;
    height: 58px;
    min-height: 58px;
    font-size: 37px;
  }
  body[data-page="harvest"] .harvest-photo-compact-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="harvest"] .harvest-photo-link,
  body[data-page="harvest"] .harvest-photo-empty {
    width: min(100%, 190px);
    margin: 0 auto;
  }
  body[data-page="harvest"] .harvest-photo-empty {
    min-height: 150px;
  }
}


/* ================================================================
   V5.0.9 - Plant row alignment + compact growing conditions
   ================================================================ */
body[data-page="plant"] .plant-detail-row {
  grid-template-columns: minmax(215px,.72fr) minmax(390px,1.34fr) minmax(255px,.82fr);
  gap: 14px;
  align-items: stretch;
}
body[data-page="plant"] .plant-detail-row > article {
  height: 100%;
  align-self: stretch;
}
body[data-page="plant"] .plant-moisture-card,
body[data-page="plant"] .plant-photo-card,
body[data-page="plant"] .cilantro-conditions-card {
  min-height: 390px;
}
body[data-page="plant"] .plant-moisture-card {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="plant"] .plant-photo-card {
  display: flex;
  flex-direction: column;
}
body[data-page="plant"] .plant-photo-card .camera-photo-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body[data-page="plant"] .plant-photo-card .camera-photo-link,
body[data-page="plant"] .plant-photo-card .photo-placeholder {
  width: min(100%, 440px);
}
body[data-page="plant"] .plant-photo-card .photo-placeholder {
  min-height: 280px;
}
body[data-page="plant"] .cilantro-conditions-card {
  display: flex;
  flex-direction: column;
}
body[data-page="plant"] .cilantro-condition-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  flex: 1 1 auto;
}
body[data-page="plant"] .cilantro-overall-card-primary {
  align-self: stretch;
  min-height: 88px;
}
body[data-page="plant"] .cilantro-overall-card-primary .cilantro-overall-icon {
  font-size: 31px;
}
body[data-page="plant"] .cilantro-pressure-card,
body[data-page="plant"] .cilantro-condition-lower {
  display: none;
}

@media (max-width: 1180px) {
  body[data-page="plant"] .plant-detail-row {
    grid-template-columns: 1fr 1.25fr;
    align-items: stretch;
  }
  body[data-page="plant"] .cilantro-conditions-card {
    grid-column: 1 / -1;
    min-height: 0;
  }
  body[data-page="plant"] .cilantro-condition-grid {
    grid-template-columns: 1fr 1fr;
  }
  body[data-page="plant"] .cilantro-overall-card-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body[data-page="plant"] .plant-detail-row {
    grid-template-columns: 1fr;
  }
  body[data-page="plant"] .plant-moisture-card,
  body[data-page="plant"] .plant-photo-card,
  body[data-page="plant"] .cilantro-conditions-card {
    min-height: 0;
  }
  body[data-page="plant"] .cilantro-conditions-card {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  body[data-page="plant"] .cilantro-condition-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="harvest"] .harvest-photo-empty strong {
  text-align: center;
}


/* ================================================================
   V5.0.10 - Plant photo metadata + soil colors + Harvest card stack
   ================================================================ */

/* Plant: center capture date/details directly below the latest photo. */
body[data-page="plant"] .camera-photo-meta {
  text-align: center;
}
body[data-page="plant"] .camera-photo-meta strong,
body[data-page="plant"] .camera-photo-meta span {
  text-align: center;
}

/* Harvest Hub: Plant Details first, Recent Photo below. */
body[data-page="harvest"] .harvest-area-card {
  padding: 12px 14px;
}
body[data-page="harvest"] .harvest-area-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 8px;
}
body[data-page="harvest"] .harvest-profile-pane,
body[data-page="harvest"] .harvest-photo-pane {
  width: 100%;
  min-width: 0;
}

/* Compact plant-details strip. */
body[data-page="harvest"] .harvest-profile-pane {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  grid-template-areas:
    "icon meta"
    "notes notes"
    "editor editor";
  gap: 7px 10px;
  padding: 9px 10px;
  align-items: start;
}
body[data-page="harvest"] .harvest-default-plant {
  grid-area: icon;
  width: 64px;
  height: 64px;
  min-height: 64px;
  font-size: 41px;
  border-radius: 10px;
}
body[data-page="harvest"] .harvest-meta-list {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px 10px;
  margin: 0;
  align-self: center;
}
body[data-page="harvest"] .harvest-meta-list div {
  display: block;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(0,0,0,.08);
}
body[data-page="harvest"] .harvest-meta-list span,
body[data-page="harvest"] .harvest-meta-list strong {
  display: block;
  text-align: left;
}
body[data-page="harvest"] .harvest-meta-list span {
  margin-bottom: 3px;
  font-size: 9px;
}
body[data-page="harvest"] .harvest-meta-list strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
body[data-page="harvest"] .harvest-notes-block {
  grid-area: notes;
  margin: 0;
  padding-top: 1px;
}
body[data-page="harvest"] .harvest-details {
  margin: 2px 0 0;
}
body[data-page="harvest"] .harvest-editor,
body[data-page="harvest"] .harvest-profile-pane > .harvest-ai-note {
  grid-area: editor;
  margin-top: 0;
}

/* Recent Photo is a full-width section below Plant Details. */
body[data-page="harvest"] .harvest-photo-pane {
  padding: 9px 10px 10px;
}
body[data-page="harvest"] .harvest-photo-head {
  margin-bottom: 7px;
}
body[data-page="harvest"] .harvest-photo-compact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
body[data-page="harvest"] .harvest-photo-preview {
  display: grid;
  place-items: center;
}
body[data-page="harvest"] .harvest-photo-link,
body[data-page="harvest"] .harvest-photo-empty {
  width: min(100%, 220px);
  margin: 0 auto;
}
body[data-page="harvest"] .harvest-photo-empty[hidden] {
  display: none !important;
}
body[data-page="harvest"] .harvest-photo-empty {
  min-height: 150px;
}
body[data-page="harvest"] .harvest-photo-tools {
  display: grid;
  gap: 6px;
}
body[data-page="harvest"] .harvest-ai-generated-note {
  margin: 0;
}
body[data-page="harvest"] .harvest-upload-form {
  margin-top: 0;
  gap: 6px;
}
body[data-page="harvest"] .harvest-upload-form .harvest-photo-note-label {
  display: grid;
  grid-template-columns: minmax(135px,.28fr) minmax(240px,1fr);
  align-items: center;
  gap: 8px;
}
body[data-page="harvest"] .harvest-upload-actions {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 850px) {
  body[data-page="harvest"] .harvest-meta-list {
    grid-template-columns: 1fr;
  }
  body[data-page="harvest"] .harvest-upload-form .harvest-photo-note-label {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  body[data-page="harvest"] .harvest-profile-pane {
    grid-template-columns: 52px minmax(0,1fr);
  }
  body[data-page="harvest"] .harvest-default-plant {
    width: 52px;
    height: 52px;
    min-height: 52px;
    font-size: 34px;
  }
  body[data-page="harvest"] .harvest-photo-link,
  body[data-page="harvest"] .harvest-photo-empty {
    width: min(100%, 190px);
  }
}


/* ================================================================
   2026-10-07 - Auk Mini 2 telemetry card
   All selectors namespaced under .auk-card.
   ================================================================ */

.auk-card .auk-stage {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 18px auto 4px;
  cursor: pointer;
}

.auk-card .auk-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid var(--auk-ring, #33404f);
  box-shadow: 0 0 30px var(--auk-ringsoft, rgba(0, 0, 0, 0));
  transition: border-color 0.5s;
}

.auk-card[data-state="on"] {
  --auk-ring: #ffd54a;
  --auk-ringsoft: rgba(255, 213, 74, 0.25);
  --auk-accent: #ffd54a;
}
.auk-card[data-state="dim"] {
  --auk-ring: #b97a2e;
  --auk-ringsoft: rgba(255, 159, 67, 0.14);
  --auk-accent: var(--amber);
}
.auk-card[data-state="off"] {
  --auk-ring: #33404f;
  --auk-ringsoft: rgba(0, 0, 0, 0);
  --auk-accent: var(--muted);
}

.auk-card .auk-glow {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 205, 80, 0.5) 0%,
    rgba(255, 205, 80, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.auk-card[data-state="on"] .auk-glow {
  opacity: 1;
  animation: auk-breathe 3.2s ease-in-out infinite;
}
.auk-card[data-state="dim"] .auk-glow {
  opacity: 0.45;
  background: radial-gradient(
    circle,
    rgba(255, 159, 67, 0.45) 0%,
    rgba(255, 159, 67, 0) 68%
  );
  animation: auk-breathe 5s ease-in-out infinite;
}
@keyframes auk-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.auk-card .auk-bulb-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.auk-card .auk-bulb {
  width: 96px;
  height: 96px;
  overflow: visible;
}
.auk-card .auk-rays {
  transform-origin: 60px 58px;
  opacity: 0;
  transition: opacity 0.5s;
}
.auk-card[data-state="on"] .auk-rays {
  opacity: 1;
  animation: auk-spin 26s linear infinite;
}
.auk-card[data-state="dim"] .auk-rays {
  opacity: 0.35;
}
@keyframes auk-spin {
  to { transform: rotate(360deg); }
}

.auk-card .auk-glass {
  transition: fill 0.5s;
}
.auk-card[data-state="on"] .auk-glass {
  fill: url(#aukGlassOn);
  filter: drop-shadow(0 0 14px rgba(255, 200, 60, 0.85));
}
.auk-card[data-state="dim"] .auk-glass {
  fill: url(#aukGlassDim);
  filter: drop-shadow(0 0 7px rgba(255, 159, 67, 0.4));
}
.auk-card[data-state="off"] .auk-glass {
  fill: #1c2632;
  stroke: #4a5a6e;
  stroke-width: 3;
}
.auk-card .auk-filament {
  transition: all 0.5s;
  stroke-width: 4;
}
.auk-card[data-state="on"] .auk-filament {
  stroke: #fff3c4;
  filter: drop-shadow(0 0 6px #ffdf80);
}
.auk-card[data-state="dim"] .auk-filament {
  stroke: #caa25e;
}
.auk-card[data-state="off"] .auk-filament {
  stroke: #3d4a5b;
}
.auk-card .auk-base rect {
  fill: #8b98a8;
  transition: fill 0.5s;
}
.auk-card[data-state="off"] .auk-base rect {
  fill: #3d4a5b;
}

.auk-card .auk-mini {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #8a94a3;
  margin-top: 6px;
}
.auk-card .auk-mini.on { color: #ffdf7e; }
.auk-card .auk-mini.dim { color: #a5854f; }
.auk-card .auk-mini.off { color: #4a5568; }
.auk-card .auk-mini.auto { color: #6aa8ff; }

.auk-card .auk-rows {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.auk-card .auk-row {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  text-align: left;
}

.auk-card .auk-row .k {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auk-card .auk-row .v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.auk-card .auk-row .v small {
  color: var(--muted);
  font-weight: 600;
}
.auk-card .auk-row-status {
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 6px 10px;
  max-width: 200px;
  margin: 0 auto;
}
.auk-card .auk-row-status .k,
.auk-card .auk-row-status .v {
  font-size: 11px;
}