/* Flower Shop - Pixel Art Theme */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1a2e1a;
  --panel: #2d4a2d;
  --panel-light: #3d5f3d;
  --accent: #8bc34a;
  --accent-2: #fdd835;
  --text: #f0f8e0;
  --danger: #e57373;
  --good: #66bb6a;
  --border: #1a2e1a;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 20px;
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
  overflow: hidden;
}

body.scrollable { overflow: auto; }

h1, h2, h3, .pixel { font-family: 'Press Start 2P', monospace; line-height: 1.6; }

button, input, select, textarea {
  font-family: 'VT323', monospace;
  font-size: 20px;
  background: var(--panel-light);
  color: var(--text);
  border: 3px solid var(--border);
  padding: 8px 14px;
  cursor: pointer;
  outline: none;
  box-shadow: inset -3px -3px 0 #1a2e1a55;
}
button:hover:not(:disabled) { background: var(--accent); color: #1a2e1a; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input, select, textarea { background: #1f3320; cursor: text; }

/* ----- Join page ----- */
.center-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.version-badge {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  background: #1f3320;
  border: 3px solid var(--border);
  color: var(--accent-2);
  padding: 6px 10px;
  box-shadow: 4px 4px 0 #00000088;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}
.landing-stack {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card {
  background: var(--panel); padding: 28px; border: 4px solid var(--border);
  box-shadow: 6px 6px 0 #00000088; max-width: 460px; width: 100%;
}
.card h1 { font-size: 18px; margin-bottom: 18px; color: var(--accent-2); text-align: center; }
.card p { margin-bottom: 14px; }
.card label { display: block; margin: 12px 0 4px; font-size: 16px; color: var(--accent); }
.card input { width: 100%; }
.card .actions { margin-top: 18px; display: flex; gap: 10px; }
.error { color: var(--danger); margin-top: 10px; min-height: 20px; }
.tagline { text-align:center; color: var(--accent); font-size:14px; margin-bottom:8px; }

/* Landing intro: logo + one-line pitch above the sign-in card */
.intro { text-align: center; }
.intro .tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px; line-height: 1.5; margin-bottom: 16px;
}
@media (max-width: 480px) {
  .intro .tagline { font-size: 16px; }
}
.pitch {
  color: var(--accent-2); font-size: 20px; line-height: 1.4; margin-bottom: 6px;
}
.pitch-sub { color: #cfe0c4; font-size: 17px; line-height: 1.4; margin-bottom: 0; }

.card-hint { color: #bcd; font-size: 15px; margin-bottom: 4px; }

/* "OR" divider between Clock In and the demo action */
.divider {
  display: flex; align-items: center; text-align: center;
  color: var(--accent); margin: 18px 0; gap: 10px; font-size: 14px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 3px; background: var(--border);
}

/* Secondary, friendlier demo call-to-action */
.demo-btn {
  width: 100%; background: var(--accent-2); color: #1a2e1a; font-size: 18px;
}
.demo-btn:hover:not(:disabled) { background: var(--accent); }
.demo-hint { text-align: center; color: #bcd; font-size: 14px; margin: 8px 0 0; }

/* Demo name modal (reuses .modal-overlay / .modal-card) */
.demo-modal-label {
  display: block; font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--accent); margin: 6px 0 6px;
}
#demo-name {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 16px;
  padding: 10px 12px; border-radius: 6px;
}
.demo-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
}
.demo-cancel {
  background: var(--panel-light) !important; color: var(--text) !important;
}
.demo-cancel:hover { background: #4a6b4a !important; color: var(--text) !important; }

/* De-emphasized admin entry point */
.admin-link {
  display: block; text-align: center; margin-top: 16px;
  color: #9eb494; font-size: 14px; text-decoration: none;
}
.admin-link:hover { color: var(--accent); text-decoration: underline; }

/* "How it works" explainer below the fold */
.how-card {
  background: #203820; border: 3px solid var(--border);
  box-shadow: 6px 6px 0 #00000066; padding: 20px 22px;
}
.how-card h2 { color: var(--accent-2); font-size: 12px; margin-bottom: 14px; }
.how-steps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px; font-size: 16px; color: #dceccd; margin-bottom: 14px;
}
.how-arrow { color: var(--accent); }
.how-text { color: #cfe0c4; font-size: 16px; line-height: 1.4; margin-bottom: 0; }
.updates-card {
  background: #203820;
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 #00000066;
  padding: 18px;
}
.updates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.updates-header h2 {
  color: var(--accent-2);
  font-size: 12px;
}
.updates-header span {
  color: var(--accent);
  font-size: 16px;
  white-space: nowrap;
}
.updates-card ul {
  padding-left: 22px;
}
.updates-card li {
  margin: 8px 0;
  line-height: 1.25;
  color: #dceccd;
}
.updates-card b {
  color: var(--accent);
}
.updates-more {
  margin-top: 14px;
  width: 100%;
  font-size: 10px;
  padding: 10px;
}
.history-card {
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
}
.history-release {
  margin-bottom: 18px;
}
.history-release:last-child {
  margin-bottom: 0;
}
.history-release h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 6px;
}
.history-card b {
  color: var(--accent);
}

/* Corner badges: version chip + "What's New" link, stacked top-right */
.corner-badges {
  position: fixed; top: 14px; right: 30px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.corner-badges .version-badge { position: static; top: auto; right: auto; }
.whats-new-link {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--accent); color: #1a2e1a;
  border: 3px solid var(--border); box-shadow: 4px 4px 0 #00000088;
  padding: 6px 10px; font-family: 'Press Start 2P', monospace; font-size: 10px;
}
.whats-new-link:hover { background: var(--accent-2); }

/* On narrow/phone screens the fixed top-right badges collide with the hero
   text, so drop them out of the corner and into the normal flow at the very
   bottom of the page instead. */
@media (max-width: 600px) {
  .corner-badges {
    position: static; top: auto; right: auto; z-index: auto;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 10px; width: 100%; padding: 20px 12px 28px;
  }
}

/* Release notes / "What's New" changelog page */
.changelog-wrap { max-width: 760px; margin: 0 auto; padding: 72px 20px 56px; }
.changelog-header { margin-bottom: 28px; }
.back-link { color: var(--accent); text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; }
.changelog-header h1 {
  font-family: 'Press Start 2P', monospace; color: var(--accent-2);
  font-size: 20px; margin: 14px 0 8px;
}
.changelog-sub { color: #bcd; font-size: 14px; }
.changelog { display: flex; flex-direction: column; gap: 22px; }
.changelog-entry {
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: 6px 6px 0 #00000066; padding: 20px 22px;
}
.changelog-meta {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--panel-light);
}
.changelog-version {
  font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--accent);
}
.changelog-date { color: #9eb494; font-size: 13px; }
.changelog-items { padding-left: 22px; margin: 0; }
.changelog-items li { margin: 8px 0; line-height: 1.4; color: #dceccd; }
.changelog-items b { color: var(--accent); }
.changelog-loading, .changelog-empty { color: #bcd; font-size: 14px; }

/* ----- Game ----- */
.game-wrap {
  position: relative; width: 100vw; height: 100vh; overflow: hidden;
  background: #0f1a0f;
  display: flex; align-items: center; justify-content: center;
}
#game-canvas {
  background: #6b8e3d;
  image-rendering: pixelated;
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px #2d4a2d;
  /* Canvas size is set dynamically by JS based on viewport */
  /* On large screens: full world view at ~125% scale */
  /* On small screens: viewport shrinks and camera follows player */
}

/* Large screens - scale up the canvas display */
@media (min-width: 900px) and (min-height: 650px) {
  #game-canvas {
    width: min(1000px, 95vw);
    height: auto;
    max-height: 90vh;
  }
}

/* Medium screens - fit to available space */
@media (max-width: 899px), (max-height: 649px) {
  #game-canvas {
    max-width: 95vw;
    max-height: calc(100vh - 120px);
  }
}

/* Small screens (mobile) - compact viewport with camera */
@media (max-width: 600px) {
  #game-canvas {
    max-width: 100vw;
    max-height: calc(100vh - 100px);
    border-width: 2px;
    box-shadow: 0 0 0 2px #2d4a2d;
  }
}

/* ----- Touch / Mobile Controls ----- */
/* D-pad and talk button hidden; tap-to-move is handled in JS */
.touch-controls {
  display: none !important;
}

/* Hide keyboard hint on touch devices */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  .hint { display: none; }
}

.hud {
  position: fixed; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none; z-index: 10;
}
.hud .panel {
  background: var(--panel); padding: 8px 14px; border: 3px solid var(--border);
  box-shadow: 4px 4px 0 #00000088; pointer-events: auto;
}
.hud .panel h3 { font-size: 10px; color: var(--accent-2); margin-bottom: 4px; }
.hud .panel .row { display: flex; gap: 18px; }
.bar { width: 160px; height: 14px; background: #1a2e1a; border: 2px solid var(--border); position: relative; }
.bar > div { height: 100%; background: var(--accent); transition: width .3s; }

.dialogue {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(960px, 95vw); background: var(--panel); border: 4px solid var(--border);
  box-shadow: 6px 6px 0 #00000088; padding: 20px; z-index: 20;
  display: none;
}
.dialogue.active { display: block; }
.dialogue .speaker { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--accent-2); margin-bottom: 10px; }
.dialogue .text { font-size: 22px; margin-bottom: 16px; min-height: 30px; }

/* Desktop: image sits in its own left column with the text + choices beside
   it on the right, so a large image never pushes the answers down the page. */
.dialogue-body { display: flex; align-items: flex-start; gap: 24px; }
.dialogue-content { flex: 1 1 auto; min-width: 0; }
#plant-image-wrap { flex: 0 0 auto; }
#plant-image-wrap:empty { display: none; }
.dialogue .plant-image {
  width: clamp(280px, 30vw, 360px); height: clamp(280px, 30vw, 360px);
  object-fit: cover; border-radius: 6px; display: block;
  border: 4px solid var(--border); background: #1a2e1a;
  box-shadow: 3px 3px 0 #00000066;
  image-rendering: auto; /* override pixelated for photo quality */
}
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; clear: both; }
.choices.single { grid-template-columns: 1fr 1fr; }
.choice {
  background: var(--panel-light); border: 3px solid var(--border); padding: 10px;
  font-size: 22px; cursor: pointer; text-align: left; transition: transform .05s;
}
.choice:hover { background: var(--accent); color: #1a2e1a; }
.choice.correct { background: var(--good) !important; color: #fff; }
.choice.wrong { background: var(--danger) !important; color: #fff; }
.choice.selected { outline: 3px solid var(--accent-2); }
/* Multi-select: user has toggled this on but not yet submitted */
.choice.chosen { background: var(--accent); color: #1a2e1a; box-shadow: inset 0 0 0 4px var(--accent-2); }
.choice.chosen::before { content: "✓ "; }
/* After submission: a correct option the player failed to pick */
.choice.missed { background: #f9a825 !important; color: #1a2e1a; outline: 3px dashed #1a2e1a; }
.choice.missed::before { content: "✗ missed: "; font-size: 14px; }
.dialogue .actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

/* Phone: no room for a side column, so stack the image on top of the text and
   choices and only bump its size a little. */
@media (max-width: 640px) {
  .dialogue-body { flex-direction: column; align-items: stretch; gap: 14px; }
  .dialogue .plant-image {
    width: 100%; max-width: 240px; height: 220px;
    margin: 0 auto;
  }
  .plant-image-figure { width: 100%; max-width: 240px; margin: 0 auto; }
  .plant-image-figure .plant-image { width: 100%; max-width: none; }
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--panel); border: 3px solid var(--border);
  border-radius: 10px; padding: 28px 32px; max-width: 520px; width: 92%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  font-family: 'Inter', sans-serif;
}
.modal-card h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px; color: var(--accent-2);
  margin-bottom: 14px;
}
.modal-card p { font-size: 16px; line-height: 1.5; margin-bottom: 10px; }
.modal-card ul { margin: 10px 0 14px 18px; font-size: 15px; line-height: 1.7; }
.modal-card li { margin-bottom: 4px; }
.modal-card button {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 10px 18px;
  background: var(--accent);
  color: #1a2e1a;
  border: 3px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.modal-card button:hover { background: var(--accent-2); }

/* Keep the modal usable when the list grows: the list scrolls inside the card
   while the title and action buttons stay put. */
#leaderboard-list { max-height: min(60vh, 460px); overflow-y: auto; }

/* The leaderboard is a CSS-grid "table". Each row is its own grid so it can be
   reflowed into a card on mobile, while fixed pixel column widths keep the rows
   aligned into columns on desktop. .lb-stats is display:contents on desktop so
   its three cells act as ordinary columns; on mobile it becomes a flex group. */
.leaderboard { font-family: 'Inter', sans-serif; }
.lb-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px 52px 56px 84px;
  align-items: center; column-gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid #3d5f3d;
  font-size: 15px;
}
.lb-stats { display: contents; }
.lb-head {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--accent-2);
}
.lb-row.me { background: rgba(139, 195, 74, 0.18); font-weight: 600; }
.lb-rank { font-variant-numeric: tabular-nums; }
.lb-name { overflow-wrap: anywhere; }
.lb-you { color: var(--accent-2); }
.lb-lv, .lb-acc, .lb-sales { color: #cfe0c4; font-variant-numeric: tabular-nums; }
.lb-rev {
  text-align: right; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Header cells share the value classes, so re-tint them and drop the emphasis. */
.lb-head .lb-lv, .lb-head .lb-acc, .lb-head .lb-sales,
.lb-head .lb-rev { color: var(--accent-2); font-weight: inherit; }

/* Phone portrait: reflow each row into a card — rank on the left (spanning both
   lines), name then a labelled stats line in the middle, revenue right-aligned
   and vertically centered on the right. */
@media (max-width: 640px) {
  .lb-head { display: none; }
  .lb-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name  rev"
      "rank stats rev";
    column-gap: 12px; row-gap: 3px; padding: 11px 6px;
  }
  .lb-rank { grid-area: rank; align-self: center; font-size: 19px; }
  .lb-name { grid-area: name; font-weight: 600; }
  .lb-rev  { grid-area: rev; align-self: center; justify-self: end; font-size: 17px; }
  .lb-stats {
    grid-area: stats; display: flex; flex-wrap: wrap;
    align-items: center; gap: 6px 14px; font-size: 13px;
  }
  .lb-stats > span {
    display: flex; align-items: center; gap: 5px;
    color: #bcd; white-space: nowrap;
  }
  .lb-stats [data-label]::before {
    content: attr(data-label);
    color: var(--accent-2); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
}

.toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  background: var(--accent-2); color: #1a2e1a; padding: 12px 20px;
  border: 4px solid var(--border); box-shadow: 4px 4px 0 #00000088;
  font-family: 'Press Start 2P', monospace; font-size: 14px; z-index: 50;
  display: none;
}
.toast.show { display: block; animation: pop .4s; }
@keyframes pop { from { transform: translate(-50%, -10px) scale(.9); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

.hint {
  position: fixed; bottom: 12px; left: 12px; background: #00000088; padding: 6px 10px;
  border: 2px solid var(--border); font-size: 16px; z-index: 5;
}

/* ----- Admin (calmer, less aggressively pixelated) ----- */
.admin-wrap {
  padding: 32px 28px; max-width: 1180px; margin: 0 auto;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  image-rendering: auto;
}
.admin-wrap h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 26px; font-weight: 700; color: var(--accent-2);
  margin-bottom: 20px; letter-spacing: 0.2px; line-height: 1.3;
}
.admin-wrap h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; color: var(--accent);
  margin: 22px 0 10px; letter-spacing: 0.2px; line-height: 1.3;
}
.admin-wrap p, .admin-wrap label, .admin-wrap span { font-family: inherit; }

.admin-wrap .panel {
  background: var(--panel);
  padding: 20px 22px;
  border: 1px solid #3d5f3d;
  border-radius: 8px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Tabs (Add Plants: single vs bulk) */
.admin-wrap .tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
  border-bottom: 1px solid #3d5f3d;
}
.admin-wrap .tab-btn {
  background: transparent;
  color: #bcd;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 18px;
  font-weight: 600;
  box-shadow: none;
  margin-bottom: -1px;
}
.admin-wrap .tab-btn:hover:not(:disabled) {
  background: #1f3320;
  color: var(--text);
}
.admin-wrap .tab-btn.is-active {
  background: var(--panel);
  color: var(--accent);
  border-color: #3d5f3d;
  border-bottom-color: var(--panel);
}
.admin-wrap .tab-panel {
  padding-top: 18px;
}

.admin-wrap button,
.admin-wrap input,
.admin-wrap select,
.admin-wrap textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid #3d5f3d;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-wrap input, .admin-wrap select, .admin-wrap textarea {
  background: #1f3320;
}
.admin-wrap input:focus, .admin-wrap select:focus, .admin-wrap textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.admin-wrap button {
  background: var(--accent);
  color: #1a2e1a;
  font-weight: 600;
  cursor: pointer;
}
.admin-wrap button:hover:not(:disabled) {
  background: #a4d365;
  color: #1a2e1a;
}
.admin-wrap button[style*="7a2c2c"], /* delete buttons */
.admin-wrap button.danger {
  background: #c64141 !important;
  color: #fff;
}
.admin-wrap button.danger:hover { background: #d65454 !important; }

.admin-wrap table { width: 100%; border-collapse: collapse; }
.admin-wrap th, .admin-wrap td {
  padding: 10px 8px;
  border-bottom: 1px solid #3d5f3d;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}
.admin-wrap th {
  color: var(--accent-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.row-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-flex input, .row-flex select { flex: 1; min-width: 150px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--panel-light);
  padding: 14px 16px;
  border: 1px solid #3d5f3d;
  border-radius: 6px;
}
.kpi .label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; color: var(--text); }

.admin-wrap textarea { width: 100%; min-height: 90px; resize: vertical; }
.admin-wrap .tag {
  display: inline-block;
  background: var(--panel-light);
  padding: 3px 10px;
  margin: 2px;
  border: 1px solid #3d5f3d;
  border-radius: 999px;
  font-size: 13px;
}
.admin-wrap pre {
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 13px !important;
  border-radius: 6px;
}

/* Attribute editor (Form ⇄ JSON) */
.attr-editor {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #3d5f3d;
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 280px;
}
.attr-tabs {
  display: inline-flex;
  gap: 2px;
  background: #1f3320;
  padding: 3px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.attr-tab {
  background: transparent !important;
  color: #bcd !important;
  border: none !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  cursor: pointer;
  box-shadow: none !important;
}
.attr-tab.active {
  background: var(--accent) !important;
  color: #1a2e1a !important;
}
.attr-tab:hover:not(.active) {
  background: rgba(139, 195, 74, 0.12) !important;
  color: var(--text) !important;
}
.attr-form-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attr-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) 30px;
  gap: 6px;
  align-items: center;
}
.attr-row .attr-key,
.attr-row .attr-value {
  font-size: 13px !important;
  padding: 6px 8px !important;
}
.attr-row .attr-remove {
  background: transparent !important;
  color: #c64141 !important;
  border: 1px solid #4a2828 !important;
  padding: 4px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.attr-row .attr-remove:hover {
  background: #6a3636 !important;
  color: #fff !important;
  border-color: #6a3636 !important;
}
.attr-add-btn {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px dashed var(--accent) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  align-self: flex-start;
  margin-top: 2px;
  border-radius: 4px !important;
}
.attr-add-btn:hover {
  background: rgba(139, 195, 74, 0.12) !important;
}
.attr-json-view {
  width: 100%;
  min-height: 100px;
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 13px !important;
  line-height: 1.4;
}

/* Tooltip for attribute help */
.tooltip-trigger {
  position: relative;
  cursor: help;
  color: var(--accent);
  font-size: 14px;
  margin-left: 4px;
  vertical-align: middle;
}
.tooltip-content {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #1a2e1a;
  color: var(--text);
  border: 1px solid #3d5f3d;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 100;
  text-align: left;
  font-weight: 400;
}
.tooltip-content code {
  background: #2d4a2d;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}
.tooltip-content em {
  color: var(--accent-2);
}
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus .tooltip-content {
  display: block;
}

/* Login card sits inside admin-wrap and inherits the calmer styles */
.admin-wrap .card {
  background: var(--panel);
  padding: 28px;
  border: 1px solid #3d5f3d;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  max-width: 460px; width: 100%;
  margin: 60px auto;
}
.admin-wrap .card h1 { text-align: left; }
.admin-wrap .card label { color: var(--accent); }
.admin-wrap .card input { width: 100%; }

/* ----- Master catalog (admin) ----- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.catalog-card {
  background: var(--panel-light);
  border: 1px solid #3d5f3d;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.catalog-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.catalog-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.catalog-card img {
  width: 100%; height: 110px; object-fit: cover;
  image-rendering: auto; background: #1a2e1a;
}
.catalog-noimg {
  width: 100%; height: 110px; display: flex;
  align-items: center; justify-content: center;
  font-size: 40px; background: #1a2e1a;
}
.catalog-card-body { padding: 10px 12px; }
.catalog-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.catalog-chip {
  background: var(--panel-light); border: 1px solid #3d5f3d; color: #cfe3bd;
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.catalog-chip:hover { border-color: var(--accent); }
.catalog-chip.active { background: var(--accent); color: #1a2e1a; border-color: var(--accent); }
#catalog-filters-btn.active { background: var(--accent); color: #1a2e1a; }
.catalog-hide-added {
  display: flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; color: #dceccd; cursor: pointer;
}
.catalog-hide-added input { width: auto; flex: none; min-width: 0; }
.catalog-filter-panel {
  margin-top: 10px; padding: 12px;
  border: 1px solid #3d5f3d; border-radius: 8px; background: rgba(0,0,0,0.18);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.catalog-filter-panel label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #bcd;
}
.catalog-filter-panel select, .catalog-filter-panel input { width: 100%; min-width: 0; }
.catalog-filter-actions { display: flex; align-items: flex-end; }
.catalog-filter-actions button { font-size: 12px; padding: 6px 10px; }
.catalog-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.catalog-footer > span { font-size: 12px; color: #bcd; }
.catalog-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.catalog-pager > button { font-size: 12px; padding: 5px 10px; }
.catalog-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.catalog-pages button {
  min-width: 30px; padding: 4px 8px; font-size: 12px; cursor: pointer;
  background: var(--panel-light); border: 1px solid #3d5f3d; border-radius: 4px; color: #cfe3bd;
}
.catalog-pages button:hover:not(:disabled) { border-color: var(--accent); }
.catalog-pages button.active { background: var(--accent); color: #1a2e1a; border-color: var(--accent); }
.catalog-ellipsis { padding: 0 3px; font-size: 12px; color: #bcd; }

/* ----- Owner console ----- */
/* Create-company form: name + slug + button. Collapses to one column on phones. */
.co-create-grid {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
  align-items: end; margin-top: 12px;
}
.co-create-grid > div { min-width: 0; }
.co-create-grid input { width: 100%; }

/* Add-plant-manually inputs: two columns that stack on phones. */
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-grid > div { min-width: 0; }
.mp-grid input { width: 100%; }

.ingest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.ingest-col { min-width: 0; }
.ingest-result { margin-top: 10px; }
.ingest-json {
  background: #16261a;
  border: 1px solid #3d5f3d;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ingest-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #bcd; margin-bottom: 6px; flex-wrap: wrap;
}
.badge {
  display: inline-block;
  background: var(--panel-light);
  border: 1px solid #3d5f3d;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}
.badge-fetched, .badge-stored, .badge-published, .badge-approved { background: #2e5e2e; color: #d8f5c8; border-color: #3a7a3a; }
.badge-cached, .badge-reviewed { background: #3a4a6a; color: #cde0ff; border-color: #4a5f8a; }
.badge-draft, .badge-pending { background: #6a5a2a; color: #fdeeb8; border-color: #8a7a3a; }
.badge-rejected { background: #6a2c2c; color: #ffd6d6; border-color: #8a3a3a; }
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid #3d5f3d; flex-wrap: wrap;
}
.contrib-card {
  border: 1px solid #3d5f3d; border-radius: 8px;
  padding: 12px; margin-bottom: 10px; background: rgba(0,0,0,0.15);
}
button.mini {
  font-size: 12px !important;
  padding: 5px 10px !important;
}
/* Admin-code cell: code value with an inline copy button */
.code-copy { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.code-copy > button.mini { white-space: nowrap; }
.mp-label {
  display: block; margin: 12px 0 4px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  font-family: 'Inter', system-ui, sans-serif;
}
#mp-modal input, #mp-modal textarea { width: 100%; }
#mp-modal .modal-card { font-family: 'Inter', system-ui, sans-serif; }

/* ----- Data tables ----- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  background: var(--panel-light);
  color: var(--accent);
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #3d5f3d;
  white-space: nowrap;
}
.data-table td {
  padding: 8px;
  border-bottom: 1px solid #3d5f3d;
  vertical-align: middle;
}
.data-table tr:hover {
  background: rgba(61, 95, 61, 0.2);
}
.raw-plants-table tbody tr[data-plant-row] { cursor: pointer; }
.raw-plants-table tbody tr[data-plant-row]:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: -2px;
}

/* ----- Company admin: condensed plants list ----- */
.plants-table-scroll { overflow-x: auto; border: 1px solid #3d5f3d; border-radius: 8px; }
.plants-list-table { font-size: 13px; }
.plants-list-table tbody tr { cursor: pointer; }
.plants-list-table tbody tr:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.plants-list-table td { vertical-align: middle; }
.plants-list-table .col-thumb { width: 52px; }
.plants-list-table .col-actions { width: 76px; white-space: nowrap; text-align: right; }
.plants-list-table .plant-name-cell { font-weight: 600; min-width: 120px; }
.plant-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 2px solid var(--border); background: #1f3320; display: block;
}
.plant-thumb-empty { display: grid; place-items: center; font-size: 20px; }
.plant-cell-empty { color: #7f8d79; }
.plants-list-table .col-attr { white-space: nowrap; }
.plant-source-tag { font-size: 12px; color: #cfe3bd; white-space: nowrap; }
.plant-source-manual { color: #9eb494; }
.plant-update-pill {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  background: var(--accent-2); color: #1a2e1a; padding: 1px 7px; border-radius: 999px;
}
.plant-row-edit, .plant-row-del {
  width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1;
  border-radius: 6px; cursor: pointer;
}
@media (max-width: 620px) {
  .plants-list-table .col-attr, .plants-list-table .col-source { display: none; }
}

/* ----- Company admin: plant edit dialog ----- */
.plant-edit-card {
  background: var(--panel); border: 3px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  max-width: 720px; width: 92%; max-height: 92vh; overflow-y: auto; padding: 24px;
}
.plant-edit-close { flex: 0 0 auto; }
.plant-edit-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--panel-light); margin-bottom: 16px;
}
.plant-edit-header h2 { margin: 0; }
.plant-edit-subtitle { color: #9eb494; font-size: 12px; margin-top: 6px; }
.plant-edit-body { display: flex; flex-direction: column; gap: 18px; }
.plant-edit-section { border-top: 1px solid var(--panel-light); padding-top: 16px; }
.plant-edit-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.plant-edit-section-head h3 {
  margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pe-share {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #dceccd; margin-bottom: 8px;
}
.pe-share input { width: auto; flex: none; }
.pe-origin { font-size: 12px; color: #9eb494; }
.pe-uptodate { font-size: 12px; color: #9eb494; margin-top: 6px; }
.pe-catalog-update { margin-top: 8px; }
.pe-catalog-update .resync-btn { font-size: 12px; padding: 6px 10px; }
.plant-edit-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--panel-light); padding-top: 16px; flex-wrap: wrap;
}
@media (max-width: 520px) {
  .plant-edit-card { padding: 18px; }
  .plant-edit-actions { flex-direction: column-reverse; align-items: stretch; }
  .plant-edit-actions .row-flex { justify-content: stretch; }
  .plant-edit-actions button { flex: 1; }
}

/* Owner console / admin: phone-friendly layout. The console was laid out for
   wide screens, so on narrow viewports give sections more room and collapse the
   multi-column forms and the ingestion grid to a single column. */
@media (max-width: 680px) {
  .admin-wrap { padding: 18px 14px; }
  .admin-wrap .panel { padding: 16px 14px; }

  /* Create-company form stacks; the button spans the full width. */
  .co-create-grid { grid-template-columns: 1fr; }
  .co-create-grid button { width: 100%; }

  /* Add-plant inputs stack. */
  .mp-grid { grid-template-columns: 1fr; }

  /* Ingestion columns stack and never force their 320px min width (which
     overflowed the panel on phones). */
  .ingest-grid { grid-template-columns: 1fr; }
  .ingest-col .row-flex input { min-width: 0; }
}

.plant-detail-card {
  max-width: 1100px; max-height: 92vh; overflow-y: auto; padding: 24px;
}
.plant-detail-heading {
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--accent-2);
  margin: 24px 0 12px;
}
.plant-detail-hero .plant-detail-heading { margin-top: 0; }
.plant-subheading {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--accent); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.04em;
}
.plant-carousel { margin: 0; }
.plant-carousel figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px;
}
.plant-carousel-group { color: var(--accent); text-transform: capitalize; }
.plant-carousel-credit { color: #a9bea0; overflow-wrap: anywhere; }
.image-credit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 11px;
}
.catalog-card .image-credit { padding: 4px 12px 0; }
.plant-image-figure { margin: 0; width: max-content; max-width: 100%; }
.plant-image-figure .plant-image { margin: 0; display: block; }
.plant-image-figure .image-credit { margin-top: 6px; }
.plant-carousel-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; font-size: 12px; color: #cfe3bd;
}
.image-url-ref {
  margin-top: 6px; font-size: 9px; color: #a9bea0; overflow-wrap: anywhere;
}

/* Image swap-out editor (catalog-linked plants) */
.image-swapper .swap-loading { font-size: 13px; color: #bcd; }
.swap-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--panel-light);
}
.swap-row:first-child { padding-top: 0; }
.swap-thumb {
  width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover;
  border: 2px solid var(--border); border-radius: 6px; background: #1a2e1a;
}
.swap-meta { flex: 1 1 auto; min-width: 0; }
.swap-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.swap-type {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #bcd;
}
.swap-type-select {
  width: auto; flex: none; padding: 4px 6px; font-size: 12px;
}
.swap-btn[disabled], .swap-add[disabled] { opacity: 0.5; cursor: not-allowed; }
.swap-footer { gap: 10px; margin-top: 10px; align-items: center; }
.swap-count { font-size: 12px; color: #bcd; }
.swap-hint { font-size: 12px; color: #9eb494; margin-top: 6px; }

/* Read-only attribute list (catalog detail viewer) */
.pe-readonly-attrs { display: flex; flex-direction: column; gap: 6px; }
.pe-readonly-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 10px; border: 1px solid var(--panel-light); border-radius: 6px;
  background: rgba(0,0,0,0.18); font-size: 13px;
}
.pe-readonly-key { color: var(--accent); text-transform: capitalize; }
.pe-readonly-val { color: #dceccd; text-align: right; overflow-wrap: anywhere; }
.pe-readonly-empty { font-size: 13px; color: #9eb494; }
.plant-publish-state {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 6px; font-size: 12px; color: #dceccd;
  border: 1px solid var(--panel-light); background: rgba(0,0,0,0.18);
}
.plant-publish-state.is-published { border-color: #3a7a3a; }
.plant-source-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.plant-source-card {
  min-width: 0; padding: 14px; border: 1px solid var(--panel-light);
  border-radius: 8px; background: rgba(0,0,0,0.12);
}
.plant-source-card header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.plant-source-card h4 {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--accent-2);
}
.plant-source-card header span { font-size: 11px; color: #a9bea0; }
.plant-source-card .plant-detail-grid { grid-template-columns: 1fr; }
.plant-editor { margin-top: 24px; border-top: 1px solid var(--panel-light); padding-top: 16px; }
.plant-editor > summary {
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--accent-2); cursor: pointer;
}
.plant-manual-form { margin-top: 14px; display: block; }
.plant-manual-form .plant-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plant-field {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 12px;
  font-size: 12px; color: var(--accent); font-family: 'Inter', system-ui, sans-serif;
}
.plant-manual-form .plant-detail-grid .plant-field { margin-top: 0; }
.plant-field input, .plant-field textarea { width: 100%; font-size: 14px; padding: 7px 9px; border-width: 1px; }
.plant-field-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.plant-field-check input { width: auto; }
.plant-attribute-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; margin-bottom: 8px;
}
.plant-attribute-row input { font-size: 14px; padding: 7px 9px; border-width: 1px; }
.plant-manual-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.plant-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--panel-light);
}
.plant-detail-header h2 { margin: 10px 0 4px; }
.plant-detail-scientific { color: #cfe3bd; font-style: italic; }
.modal-card button.plant-detail-close { flex: 0 0 auto; padding: 7px 10px; font-size: 10px; }
.plant-detail-body { padding-top: 18px; }
.plant-detail-actions {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--panel-light);
}
.plant-detail-actions-label {
  color: #bcd; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
}
.plant-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.plant-action-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 14px; min-width: 158px; flex: 0 1 auto;
  background: var(--panel-light); color: var(--text);
  border: 2px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: transform .05s, background .1s, border-color .1s;
}
.plant-action-btn:hover:not(:disabled) { background: var(--accent); color: #1a2e1a; border-color: var(--accent); }
.plant-action-btn:active:not(:disabled) { transform: translateY(1px); }
.plant-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.plant-action-label { font-size: 13px; font-weight: 600; }
.plant-action-hint {
  font-size: 10px; color: #9eb494; text-transform: uppercase; letter-spacing: 0.03em;
}
.plant-action-btn:hover:not(:disabled) .plant-action-hint { color: #1a4a1a; }
.plant-detail-grid-emphasis .plant-detail-field {
  border-color: var(--accent); background: rgba(139,195,74,0.12);
}
.plant-detail-grid-emphasis .plant-detail-field strong { font-size: 15px; color: var(--text); }
.plant-care-ranges { margin-top: 16px; }
.plant-care-ranges > summary { color: #a9bea0; }
.plant-care-ranges .plant-detail-grid { margin-top: 10px; }
.plant-detail-hero { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.plant-detail-image {
  width: 220px; height: 220px; object-fit: cover; border: 3px solid var(--border);
  border-radius: 8px; background: #1f3320; image-rendering: auto;
}
.plant-detail-image-empty {
  width: 220px; height: 220px; display: grid; place-items: center;
  border: 2px dashed var(--panel-light); border-radius: 8px; color: #9eb494;
}
.plant-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.plant-detail-field {
  min-width: 0; padding: 10px 12px; border: 1px solid var(--panel-light);
  border-radius: 6px; background: rgba(0,0,0,0.14);
}
.plant-detail-field span { display: block; color: #a9bea0; font-size: 11px; margin-bottom: 4px; }
.plant-detail-field strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.plant-detail-section { margin-top: 18px; }
.plant-detail-section h3 { color: var(--accent); font-size: 11px; margin-bottom: 10px; }
.plant-detail-note { color: #bcd; font-size: 13px; line-height: 1.5; }
.plant-detail-warn {
  margin: 12px 0; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  color: #f6e7c8; background: rgba(253,216,53,0.1);
  border: 1px solid var(--accent-2); border-radius: 6px;
}
.plant-detail-warn code { background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px; }
.plant-detail-json { margin-top: 16px; }
.plant-detail-json summary { color: var(--accent); cursor: pointer; font-size: 13px; }
.plant-detail-json pre {
  max-height: 300px; overflow: auto; margin-top: 8px; padding: 12px;
  border: 1px solid var(--panel-light); background: #172817; color: #dceccd;
  font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Collapsible JSON tree viewer (owner plant detail) */
.jt-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.jt-tree {
  max-height: 320px; overflow: auto; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--panel-light); background: #172817; border-radius: 6px;
  font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; line-height: 1.6;
  color: #dceccd;
}
.jt-node { margin: 0; }
.jt-node > summary {
  cursor: pointer; list-style: none; color: #dceccd; font-size: 12px;
  padding: 1px 0; outline: none;
}
.jt-node > summary::-webkit-details-marker { display: none; }
.jt-node > summary::before {
  content: "\25B8"; display: inline-block; width: 1em; color: var(--accent);
  transition: transform .1s;
}
.jt-node[open] > summary::before { transform: rotate(90deg); }
.jt-children { margin-left: 1.1em; border-left: 1px solid #2a4a2a; padding-left: 8px; }
.jt-row { padding: 1px 0 1px 1em; overflow-wrap: anywhere; }
.jt-key { color: var(--accent-2); margin-right: 6px; }
.jt-meta { color: #7f9a76; }
.jt-val { overflow-wrap: anywhere; }
.jt-str { color: #b9e08a; }
.jt-num { color: #7fd0e0; }
.jt-bool { color: #e0b97f; }
.jt-null { color: #c08a8a; font-style: italic; }
@media (max-width: 900px) {
  .plant-source-grid { grid-template-columns: 1fr; }
  .plant-manual-form .plant-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .plant-detail-card { padding: 18px; }
  .plant-action-buttons { flex-direction: column; }
  .plant-action-btn { width: 100%; min-width: 0; }
  .plant-detail-hero { grid-template-columns: 1fr; }
  .plant-detail-image, .plant-detail-image-empty { width: 100%; height: min(280px, 45vh); }
  .plant-detail-grid, .plant-manual-form .plant-detail-grid { grid-template-columns: 1fr; }
  .plant-attribute-row { grid-template-columns: 1fr 1fr auto; }
}
.badge-both {
  background: #2e5e2e;
  color: #d8f5c8;
  border-color: #3a7a3a;
}
.badge-manual {
  background: #3a3a6e;
  color: #c8cff5;
  border-color: #5555aa;
}

/* ---------- OCR "Scan Label" (owner Add Plant Manually) ---------- */
.ocr-status {
  margin: 4px 0 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: #dceccd;
  background: #1f3320;
  border: 2px solid var(--panel-light);
  border-radius: 6px;
}
.ocr-status.is-error { color: var(--danger); border-color: var(--danger); }
.ocr-bar {
  margin-top: 6px;
  height: 8px;
  background: #1a2e1a;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.ocr-bar > div { height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.ocr-matches { margin: 0 0 12px; }
.ocr-matches-title { font-size: 12px; color: var(--accent-2); margin: 0 0 6px; }
.ocr-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #1f3320;
  border: 2px solid var(--panel-light);
  border-radius: 6px;
}
.ocr-match.is-exact { border-color: var(--accent); }
.ocr-match-info { min-width: 0; }
.ocr-match-name { font-size: 13px; color: var(--text); word-break: break-word; }
.ocr-match-sub { font-size: 11px; color: #9eb494; margin-top: 2px; }
.ocr-match-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #2e5e2e;
  color: #d8f5c8;
  white-space: nowrap;
}
.ocr-match.is-exact .ocr-match-tag { background: var(--accent); color: #1a2e1a; }
.ocr-match button { font-size: 11px; padding: 4px 8px; white-space: nowrap; }
.ocr-none { font-size: 13px; color: #9eb494; }

/* OCR crop modal */
.ocr-crop-card {
  max-width: 720px; width: 94%;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 92vh;
}
.ocr-crop-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ocr-crop-header h2 { margin: 0; }
.ocr-crop-hint { font-size: 13px; color: #bcd; margin: 0; line-height: 1.4; }
.ocr-crop-stage {
  background: #0e170e;
  border: 2px solid var(--border);
  border-radius: 6px;
  /* Bounded box gives Cropper.js a stable area to lay the image into. */
  height: min(58vh, 460px);
  overflow: hidden;
}
/* Cropper.js replaces this img with its own container; the max-width keeps the
   source image from overflowing before Cropper initialises. */
.ocr-crop-stage > img { display: block; max-width: 100%; }
.ocr-crop-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 680px) {
  .ocr-crop-stage { height: 52vh; }
  .ocr-crop-actions { justify-content: stretch; }
  .ocr-crop-actions button { flex: 1; }
}