/* ============================================================
   Rooted — Plant Care  |  KDigitalStudio
   Botanical greens + KDS lavender/purple accents.
   ============================================================ */

:root {
  /* Botanical greens */
  --green-deep: #2f4a3c;
  --green: #4a7c59;
  --green-mid: #6a9a75;
  --green-soft: #a8c3a0;
  --green-tint: #eaf1e7;

  /* KDS brand accents */
  --purple: #cdb7d8;
  --purple-deep: #9c7bb0;
  --lavender: #ede4f3;
  --dark: #453952;

  /* Warm neutrals */
  --cream: #f7f5ef;
  --card: #ffffff;
  --ink: #2c2a2e;
  --muted: #6f6b74;
  --line: #e6e2dc;

  /* Utility */
  --terracotta: #c47a54;
  --amber: #d8a13a;
  --danger: #c25b52;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(69, 57, 82, 0.08);
  --shadow-hover: 0 12px 32px rgba(69, 57, 82, 0.14);
  --maxw: 1120px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--green-deep); }

a { color: var(--green); }

/* ---------------- Header ---------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 239, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand .logo {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: var(--shadow);
}
.brand .name { font-family: var(--serif); font-size: 1.35rem; color: var(--green-deep); font-weight: 600; }
.brand .name small { display: block; font-family: var(--sans); font-size: 0.7rem; color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

.tabs { display: flex; gap: 4px; background: var(--lavender); padding: 5px; border-radius: 999px; }
.tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600; color: var(--dark);
  padding: 8px 18px; border-radius: 999px; transition: all .2s ease; white-space: nowrap;
}
.tab:hover { color: var(--purple-deep); }
.tab.active { background: var(--card); color: var(--green-deep); box-shadow: 0 2px 8px rgba(69,57,82,.12); }

/* ---------------- Layout ---------------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 80px; }
.view { display: none; animation: fade .35s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- Hero ---------------- */
.hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  color: #fff; border-radius: var(--radius); padding: 44px 40px;
  position: relative; overflow: hidden; margin-bottom: 28px;
}
.hero::after {
  content: "🌿"; position: absolute; right: -10px; bottom: -30px;
  font-size: 180px; opacity: 0.10; transform: rotate(-15deg);
}
.hero h1 { color: #fff; font-size: 2.4rem; margin-bottom: 10px; }
.hero p { max-width: 560px; font-size: 1.05rem; opacity: 0.95; }
.hero .hero-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- Buttons ---------------- */
.btn {
  border: 0; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 999px; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-light { background: #fff; color: var(--green-deep); }
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-purple { background: var(--purple); color: var(--dark); }
.btn-purple:hover { background: var(--purple-deep); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--green-deep); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------------- Cards & sections ---------------- */
.section-head { margin-bottom: 20px; }
.section-head h2 { font-size: 1.7rem; }
.section-head p { color: var(--muted); margin-top: 4px; }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px; border: 1px solid var(--line);
}
.card + .card { margin-top: 20px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------------- Forms ---------------- */
label.field { display: block; margin-bottom: 16px; }
label.field span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .2s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-mid); }
textarea { resize: vertical; min-height: 70px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 160px; }

/* ---------------- Location results ---------------- */
.zone-badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--green-deep); color: #fff; padding: 14px 24px; border-radius: var(--radius);
}
.zone-badge .z-num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.zone-badge .z-lbl { font-size: .8rem; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }

.info-block { border-left: 3px solid var(--green-soft); padding: 4px 0 4px 16px; margin-bottom: 18px; }
.info-block h4 { color: var(--green-deep); font-size: 1.05rem; margin-bottom: 4px; }
.info-block p { color: var(--ink); font-size: 0.95rem; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  background: var(--lavender); color: var(--dark); font-size: 0.85rem; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
}
.chip.green { background: var(--green-tint); color: var(--green-deep); }

.frost-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.frost-cols .fc {
  flex: 1; min-width: 150px; background: var(--green-tint); border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.frost-cols .fc .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.frost-cols .fc .v { font-family: var(--serif); font-size: 1.15rem; color: var(--green-deep); margin-top: 2px; }

/* ---------------- Plant cards ---------------- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar .spacer { flex: 1; }
.filter-select { max-width: 220px; }

.plant-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pc-top { padding: 18px 20px 14px; display: flex; gap: 14px; align-items: flex-start; }
.pc-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; font-size: 26px;
  display: grid; place-items: center; background: var(--green-tint);
}
.pc-title { flex: 1; min-width: 0; }
.pc-title h3 { font-size: 1.15rem; margin-bottom: 2px; }
.pc-title .pc-room { font-size: 0.82rem; color: var(--purple-deep); font-weight: 600; }
.pc-title .pc-cat { font-size: 0.75rem; color: var(--muted); }

.water-status { padding: 0 20px 14px; }
.ws-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--green-tint); border-radius: var(--radius-sm); padding: 10px 14px;
}
.ws-bar.due { background: #fbeede; }
.ws-bar.overdue { background: #f7e0dd; }
.ws-text { font-size: 0.88rem; font-weight: 600; color: var(--green-deep); }
.ws-bar.due .ws-text { color: var(--terracotta); }
.ws-bar.overdue .ws-text { color: var(--danger); }
.ws-sub { font-size: 0.74rem; color: var(--muted); font-weight: 500; }

.pc-actions { display: flex; gap: 8px; padding: 0 20px 16px; }
.pc-actions .btn { flex: 1; justify-content: center; }

.pc-details { border-top: 1px solid var(--line); padding: 16px 20px; display: none; background: #fcfbf9; }
.pc-details.open { display: block; }
.detail-row { margin-bottom: 12px; }
.detail-row:last-child { margin-bottom: 0; }
.detail-row .dr-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--green); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.detail-row .dr-val { font-size: 0.9rem; color: var(--ink); }
.tox { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.tox.safe { background: var(--green-tint); color: var(--green-deep); }
.tox.toxic { background: #f7e0dd; color: var(--danger); }

.room-group-title {
  font-family: var(--serif); font-size: 1.3rem; color: var(--green-deep);
  margin: 30px 0 14px; display: flex; align-items: center; gap: 10px;
}
.room-group-title:first-child { margin-top: 0; }
.room-group-title .rg-count { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted); background: var(--green-tint); padding: 2px 12px; border-radius: 999px; }

/* ---------------- Library ---------------- */
.lib-card { cursor: pointer; }
.lib-card .pc-top { padding-bottom: 18px; }
.lib-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--lavender); color: var(--dark); }

/* ---------------- Empty state ---------------- */
.empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
}
.empty .em-icon { font-size: 56px; margin-bottom: 12px; }
.empty h3 { color: var(--green-deep); margin-bottom: 6px; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(44, 42, 46, 0.5); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 16px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius); width: 100%; max-width: 560px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); animation: pop .25s ease;
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 1.3rem; }
.modal-close { border: 0; background: var(--green-tint); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--green-deep); }
.modal-close:hover { background: var(--green-soft); }
.modal-body { padding: 24px 26px; }
.modal-foot { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: flex-end; }

.seg { display: flex; gap: 6px; background: var(--green-tint); padding: 5px; border-radius: 999px; margin-bottom: 20px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 999px; cursor: pointer; font-weight: 600; font-family: var(--sans); color: var(--dark); font-size: 0.88rem; }
.seg button.active { background: #fff; color: var(--green-deep); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.hint { font-size: 0.82rem; color: var(--muted); margin-top: -8px; margin-bottom: 14px; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140%);
  background: var(--green-deep); color: #fff; padding: 12px 24px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow-hover); z-index: 200;
  transition: transform .3s ease, opacity .3s ease, visibility .3s;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

/* Keep action buttons in a .row from stretching to the row's min-width */
.row > .btn { flex: 0 0 auto; min-width: auto; }

/* ---------------- Footer ---------------- */
footer { border-top: 1px solid var(--line); padding: 28px 20px; text-align: center; color: var(--muted); font-size: 0.85rem; }
footer a { color: var(--green); text-decoration: none; font-weight: 600; }

.note-banner {
  background: var(--lavender); color: var(--dark); border-radius: var(--radius-sm);
  padding: 12px 18px; font-size: 0.86rem; margin-bottom: 20px; display: flex; gap: 10px; align-items: flex-start;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; justify-content: space-between; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 1.9rem; }
}
@media (max-width: 480px) {
  .tab { padding: 8px 12px; font-size: 0.82rem; }
  .brand .name { font-size: 1.15rem; }
  main { padding: 22px 14px 60px; }
}

/* ============================================================
   Additions: home dashboard, activity log, custom rooms, notes
   ============================================================ */

/* Dashboard header + stats */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.dash-head h2 { font-size: 2rem; }
.dash-head p { color: var(--muted); margin-top: 2px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.stat .s-num { font-family: var(--serif); font-size: 2rem; color: var(--green-deep); line-height: 1; }
.stat .s-lbl { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-top: 4px; }
.stat .s-short { display: none; }   /* mobile-only short label */
.stat.alert .s-num { color: var(--terracotta); }

.dash-section-title {
  font-family: var(--serif); font-size: 1.35rem; color: var(--green-deep);
  margin: 28px 0 14px; display: flex; align-items: center; gap: 10px;
}

/* Recent activity feed */
.activity-feed { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 6px; }
.feed-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feed-item:last-child { border-bottom: 0; }
.feed-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--green-tint); display: grid; place-items: center; font-size: 18px; }
.feed-body { flex: 1; min-width: 0; }
.feed-body .fb-main { font-size: 0.9rem; color: var(--ink); }
.feed-body .fb-main strong { color: var(--green-deep); }
.feed-body .fb-date { font-size: 0.76rem; color: var(--muted); margin-top: 1px; }

/* Activity log timeline inside details */
.log-list { margin-top: 6px; }
.log-entry { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.log-entry:last-child { border-bottom: 0; }
.log-ic { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.log-txt { flex: 1; font-size: 0.85rem; }
.log-txt .lt-date { color: var(--muted); font-size: 0.74rem; }
.log-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 4px; }
.log-del:hover { color: var(--danger); }
.log-empty { font-size: 0.85rem; color: var(--muted); padding: 8px 0; }

/* Moisture chips */
.moist-opts { display: flex; gap: 8px; }
.moist-opts button {
  flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  padding: 10px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 0.85rem; color: var(--dark);
}
.moist-opts button.active { border-color: var(--green); background: var(--green-tint); color: var(--green-deep); }

.notes-box { background: #fcfbf9; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.88rem; color: var(--ink); white-space: pre-wrap; }

/* Log button in card actions — keep three buttons tidy */
.pc-actions.three .btn { padding: 7px 10px; font-size: 0.8rem; }

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Additions v3: weather, tasks, diary, health, photos, rooms, wishlist
   ============================================================ */

/* Weather card */
.weather-card {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  color:#fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 8px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; position:relative; box-shadow: var(--shadow);
}
.weather-card.empty { background: var(--card); color: var(--ink); border:1px solid var(--line); justify-content:space-between; }
.weather-card.empty strong { color: var(--green-deep); }
.wx-main { display:flex; align-items:center; gap:16px; }
.wx-icon { font-size: 52px; line-height:1; }
.wx-temp { font-family: var(--serif); font-size: 2.6rem; line-height:1; }
.wx-label { font-size: 0.9rem; opacity:.92; margin-top:4px; }
.wx-stats { display:flex; gap:26px; flex-wrap:wrap; margin-left:auto; }
.wx-stats .k { font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; opacity:.8; }
.wx-stats .v { font-family: var(--serif); font-size:1.05rem; margin-top:2px; }
.wx-unit { position:absolute; top:14px; right:16px; background:rgba(255,255,255,.2); color:#fff; border:0; border-radius:999px; padding:5px 12px; font-weight:600; cursor:pointer; font-family:var(--sans); font-size:0.8rem; }
.wx-unit:hover { background:rgba(255,255,255,.32); }

/* Task list */
.task-group { margin-bottom: 20px; }
.tg-title { font-family: var(--serif); font-size:1.1rem; color: var(--green-deep); margin: 4px 0 10px; }
.task-item {
  display:flex; align-items:center; gap:12px; background: var(--card); border:1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(69,57,82,.05);
}
.task-item.heads { background: var(--lavender); border-color: transparent; align-items:flex-start; }
.task-item.done .ti-body { text-decoration: line-through; color: var(--muted); }
.ti-icon { font-size: 20px; flex-shrink:0; }
.ti-body { flex:1; font-size:0.92rem; }
.ti-body strong { color: var(--green-deep); }
.ti-check { position:relative; display:inline-flex; cursor:pointer; }
.ti-check input { position:absolute; opacity:0; width:22px; height:22px; cursor:pointer; }
.ti-check span { width:22px; height:22px; border:2px solid var(--green-soft); border-radius:6px; display:inline-block; transition:all .15s; }
.ti-check input:checked + span { background: var(--green); border-color: var(--green); }
.ti-check input:checked + span::after { content:"✓"; color:#fff; font-size:14px; position:absolute; left:4px; top:-1px; }

/* Health remedy box */
.remedy-box { background: var(--green-tint); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; }
.remedy-box .rb-h { font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color: var(--green); margin:4px 0; }
.remedy-box ul { margin:0 0 6px 18px; }
.remedy-box li { font-size:0.86rem; margin-bottom:3px; }

/* Growth photos */
.growth-strip { display:flex; gap:8px; flex-wrap:wrap; }
.growth-thumb { width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--green-tint); flex-shrink:0; }
.growth-thumb.small { width:120px; height:120px; }
.growth-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Diary */
.diary-date { font-family: var(--serif); font-size:0.95rem; color: var(--purple-deep); font-weight:600; margin: 22px 0 8px; }
.diary-date:first-child { margin-top:0; }
.diary-entry { background: var(--card); border:1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 16px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(69,57,82,.05); }
.de-plant { font-size:0.78rem; font-weight:700; color: var(--green-deep); padding-top:8px; }
.diary-entry .log-entry { border-bottom:0; }

/* Rooms manager */
.room-edit { border:1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.re-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.re-head .log-del { margin-left:auto; }
.re-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.re-grid label { font-size:0.72rem; font-weight:600; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.re-grid select { padding:8px 10px; font-size:0.85rem; }

/* Wishlist */
.wish-pri { display:inline-block; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px; margin-top:6px; }
.wish-pri.soon { background:#f7e0dd; color:var(--danger); }
.wish-pri.want { background: var(--lavender); color: var(--dark); }
.wish-pri.someday { background: var(--green-tint); color: var(--green-deep); }

@media (max-width: 620px) {
  .wx-stats { gap:16px; margin-left:0; }
  .re-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Additions v4: clickable native chips, native modal, forecast,
   weekday picker, room emoji/exact env, weather footer
   ============================================================ */

/* Clickable native chips */
.chip-btn { border:0; cursor:pointer; font-family:var(--sans); font-weight:500; transition:all .15s ease; }
.chip-btn:hover { background:var(--green-soft); color:var(--green-deep); transform:translateY(-1px); }

/* Native plant modal */
.native-photo { width:100%; height:190px; border-radius:var(--radius-sm); overflow:hidden; background:var(--green-tint); display:grid; place-items:center; font-size:52px; margin-bottom:6px; }
.native-photo img { width:100%; height:100%; object-fit:cover; }
.native-photo.loading { color:var(--muted); font-size:0.9rem; }
.native-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.native-facts .nf { background:var(--green-tint); border-radius:var(--radius-sm); padding:8px 12px; }
.native-facts .nf-k { font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.native-facts .nf-v { font-size:0.9rem; color:var(--green-deep); margin-top:2px; }

/* Weather footer + forecast */
.wx-foot { position:absolute; right:14px; bottom:12px; display:flex; align-items:center; gap:12px; }
.wx-more { background:rgba(255,255,255,.2); color:#fff; border:0; border-radius:999px; padding:5px 12px; font-weight:600; cursor:pointer; font-family:var(--sans); font-size:0.8rem; }
.wx-more:hover { background:rgba(255,255,255,.32); }
.wx-src { color:rgba(255,255,255,.75); font-size:0.72rem; }
.weather-card { padding-bottom:44px; }
.forecast-list { display:flex; flex-direction:column; gap:8px; }
.fc-day { display:grid; grid-template-columns:64px 34px 1fr auto auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.fc-name { font-weight:700; color:var(--green-deep); font-size:0.9rem; display:flex; flex-direction:column; }
.fc-name span { font-weight:500; color:var(--muted); font-size:0.72rem; }
.fc-ic { font-size:22px; text-align:center; }
.fc-lab { font-size:0.82rem; color:var(--muted); }
.fc-temp { font-size:0.9rem; } .fc-temp strong{ color:var(--ink); } .fc-temp span{ color:var(--muted); }
.fc-rain { font-size:0.8rem; color:var(--green); font-weight:600; min-width:56px; text-align:right; }

/* Weekday picker */
.weekday-opts { display:flex; gap:6px; flex-wrap:wrap; }
.weekday-opts button { flex:1; min-width:44px; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm); padding:9px 4px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:0.82rem; color:var(--dark); }
.weekday-opts button.active { border-color:var(--green); background:var(--green-tint); color:var(--green-deep); }

/* Room emoji + fine-tune */
.emoji-input { width:44px; text-align:center; padding:6px; font-size:1.1rem; border:1.5px solid var(--line); border-radius:8px; }
.re-emoji { font-size:1.1rem; }
.re-fine { margin-top:10px; }
.re-fine summary { cursor:pointer; font-size:0.8rem; font-weight:600; color:var(--purple-deep); }
.re-fine .re-grid { margin-top:10px; }
.temp-range { display:flex; align-items:center; gap:6px; }
.temp-range input { width:70px; }
.temp-range b { color:var(--muted); }

@media (max-width:520px){
  .native-facts { grid-template-columns:1fr; }
  .fc-day { grid-template-columns:56px 28px 1fr auto; }
  .fc-lab { display:none; }
}

/* ============================================================
   Additions v5: care-guide popup, task day/plant meta
   ============================================================ */
.detail-topline { font-size:0.85rem; color:var(--purple-deep); font-weight:600; margin-bottom:12px; }
#plantDetailBody .detail-row:first-of-type { margin-top:0; }

.ti-metas { display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; }
.ti-meta { font-size:0.74rem; font-weight:600; color:var(--muted); background:var(--green-tint); padding:2px 9px; border-radius:999px; }
.ti-meta.over { background:#f7e0dd; color:var(--danger); }
.ti-meta.link { background:var(--lavender); color:var(--dark); cursor:pointer; }
.ti-meta.link:hover { background:var(--purple); }

/* Care-guide popup sits below other modals that open on top of it */
#plantDetailModal { z-index: 95; }

/* ============================================================
   Additions v6: task columns, difficulty pills, library popup
   ============================================================ */
.task-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.task-col { }
.tc-title { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--purple-deep); margin-bottom:8px; }
@media (max-width:640px){ .task-cols { grid-template-columns:1fr; } }

/* Care-level pills */
.diff-pill { display:inline-block; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.diff-pill.easy { background:#e2f0d9; color:#3f7d3a; }
.diff-pill.moderate { background:#fbe7c9; color:#9a7412; }
.diff-pill.advanced { background:#f7d9d5; color:#b23b30; }

.lib-actions-3 .btn { padding:7px 8px; font-size:0.78rem; }

/* ============================================================
   Additions v7: background themes, footer controls, auth
   ============================================================ */
body[data-theme="grid"]{ background-color:#ffffff; background-image:linear-gradient(#e7ebf1 1px,transparent 1px),linear-gradient(90deg,#e7ebf1 1px,transparent 1px); background-size:24px 24px; }
body[data-theme="canvas"]{ background-color:#f2ebdd; background-image:radial-gradient(rgba(150,120,80,0.07) 1px, transparent 1px); background-size:7px 7px; }
body[data-theme="green"]{ background-color:#eaf2e6; }
body[data-theme="purple"]{ background-color:#f1ebf7; }

.footer-controls { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.theme-pick { font-size:0.82rem; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.theme-pick select { width:auto; padding:6px 10px; font-size:0.82rem; }

.auth-row { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.auth-status { font-size:0.9rem; color:var(--green-deep); font-weight:600; }

/* ============================================================
   Additions v8: account button in top nav
   ============================================================ */
.nav-right { display:flex; align-items:center; gap:14px; }
.acct-btn { display:inline-flex; align-items:center; gap:6px; border:0; background:var(--lavender); color:var(--dark); font-family:var(--sans); font-weight:600; font-size:0.92rem; padding:8px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:all .2s ease; max-width:200px; }
.acct-btn:hover { background:var(--card); color:var(--green-deep); box-shadow:0 2px 8px rgba(69,57,82,.12); }
.acct-btn.signed-in { background:var(--green-tint); color:var(--green-deep); }
.acct-btn.signed-in:hover { background:var(--card); box-shadow:0 2px 8px rgba(69,57,82,.12); }

/* On phones: account button becomes emoji-only, pinned inline with the logo;
   tabs take their own full-width row and scroll horizontally. */
@media (max-width:860px){
  .nav { flex-wrap:wrap; position:relative; }
  .nav-right { order:3; width:100%; }
  .acct-btn { position:absolute; top:15px; right:20px; padding:8px 11px; max-width:none; z-index:5; }
  .acct-btn .acct-label { display:none; }
  .acct-btn .acct-ico { font-size:1.2rem; line-height:1; }
  .nav-right .tabs { width:100%; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-right .tabs::-webkit-scrollbar { display:none; }
  .nav-right .tabs .tab { flex:0 0 auto; }
}

/* ============================================================
   Landing page — shown only to new / signed-out visitors
   All selectors scoped under #landingPage (lp-* classes) so
   they never collide with the app's own .card/.hero/.grid.
   ============================================================ */
#landingPage{ position:fixed; inset:0; z-index:90; background:var(--cream,#f7f5ef); overflow-y:auto; -webkit-overflow-scrolling:touch; display:none; }
#landingPage.show{ display:block; }
body.landing-open{ overflow:hidden; }
#landingPage .lp-wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
#landingPage .lp-btn{ font-family:var(--sans); font-weight:600; font-size:.9rem; border-radius:999px; padding:10px 22px; cursor:pointer; border:1.5px solid transparent; transition:all .2s ease; text-decoration:none; display:inline-block; }
#landingPage .lp-primary{ background:var(--green); color:#fff; }
#landingPage .lp-primary:hover{ background:var(--green-deep); }
#landingPage .lp-ghost{ background:transparent; color:var(--green-deep); border-color:var(--line); }
#landingPage .lp-ghost:hover{ border-color:var(--green); color:var(--green); }

#landingPage .lp-top{ padding:22px 0; border-bottom:1px solid var(--line); }
#landingPage .lp-top .lp-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
#landingPage .lp-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--green-deep); }
#landingPage .lp-brand .lp-leaf{ font-size:1.5rem; }
#landingPage .lp-top-cta{ display:flex; gap:10px; align-items:center; }

#landingPage .lp-hero{ padding:64px 0 40px; }
#landingPage .lp-hero .lp-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
#landingPage .lp-hero h1{ font-family:var(--serif); font-weight:600; font-size:3.1rem; line-height:1.08; letter-spacing:-.01em; color:var(--green-deep); margin-bottom:18px; }
#landingPage .lp-hero h1 em{ font-style:italic; color:var(--green); }
#landingPage .lp-lead{ font-size:1.12rem; color:var(--muted); margin-bottom:28px; max-width:30ch; }
#landingPage .lp-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
#landingPage .lp-hero-note{ margin-top:16px; font-size:.86rem; color:var(--muted); }
#landingPage .lp-shot{ position:relative; }
#landingPage .lp-shot img{ width:100%; border-radius:18px; box-shadow:0 24px 60px rgba(47,74,60,.22); border:1px solid var(--line); display:block; }
#landingPage .lp-float{ position:absolute; background:var(--card); border-radius:14px; box-shadow:0 12px 30px rgba(69,57,82,.16); padding:12px 16px; font-size:.82rem; font-weight:600; color:var(--green-deep); }
#landingPage .lp-f1{ top:-16px; left:-18px; }
#landingPage .lp-f2{ bottom:-16px; right:-14px; color:var(--dark); }

#landingPage .lp-strip{ padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--green-tint); }
#landingPage .lp-strip .lp-wrap{ display:flex; justify-content:center; gap:38px; flex-wrap:wrap; font-size:.9rem; color:var(--green-deep); font-weight:500; }
#landingPage .lp-strip span{ display:flex; align-items:center; gap:8px; }

#landingPage .lp-features{ padding:72px 0 40px; }
#landingPage .lp-head{ text-align:center; max-width:44ch; margin:0 auto 44px; }
#landingPage .lp-head h2{ font-family:var(--serif); font-weight:600; font-size:2.2rem; color:var(--green-deep); margin-bottom:12px; }
#landingPage .lp-head p{ color:var(--muted); font-size:1.02rem; }
#landingPage .lp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
#landingPage .lp-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:transform .2s ease, box-shadow .2s ease; }
#landingPage .lp-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(47,74,60,.1); }
#landingPage .lp-ico{ width:46px; height:46px; border-radius:12px; background:var(--lavender); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
#landingPage .lp-card:nth-child(2n) .lp-ico{ background:var(--green-tint); }
#landingPage .lp-card h3{ font-family:var(--serif); font-weight:600; font-size:1.18rem; margin-bottom:8px; color:var(--green-deep); }
#landingPage .lp-card p{ color:var(--muted); font-size:.94rem; }

#landingPage .lp-showcase{ background:var(--green-deep); color:#fff; padding:70px 0; margin-top:36px; }
#landingPage .lp-showcase .lp-wrap{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
#landingPage .lp-showcase h2{ font-family:var(--serif); font-weight:600; font-size:2.1rem; margin-bottom:16px; color:#fff; }
#landingPage .lp-showcase p{ color:#cfe0d4; font-size:1.03rem; margin-bottom:14px; }
#landingPage .lp-showcase ul{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; }
#landingPage .lp-showcase li{ display:flex; align-items:flex-start; gap:12px; font-size:.98rem; color:#eaf3ec; }
#landingPage .lp-showcase li .lp-chk{ color:var(--purple); font-weight:700; }
#landingPage .lp-showcase-shot img{ width:100%; border-radius:16px; box-shadow:0 24px 56px rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.12); display:block; }

#landingPage .lp-how{ padding:74px 0 30px; }
#landingPage .lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; }
#landingPage .lp-step{ text-align:center; padding:10px; }
#landingPage .lp-num{ width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff; font-family:var(--serif); font-weight:600; font-size:1.15rem; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
#landingPage .lp-step h4{ font-family:var(--serif); font-weight:600; font-size:1.12rem; margin-bottom:8px; color:var(--green-deep); }
#landingPage .lp-step p{ color:var(--muted); font-size:.93rem; }

#landingPage .lp-final{ padding:40px 0 90px; }
#landingPage .lp-box{ background:linear-gradient(135deg,var(--lavender),var(--green-tint)); border-radius:24px; padding:56px 40px; text-align:center; border:1px solid var(--line); }
#landingPage .lp-box h2{ font-family:var(--serif); font-weight:600; font-size:2.3rem; color:var(--green-deep); margin-bottom:14px; }
#landingPage .lp-box p{ color:var(--muted); font-size:1.06rem; max-width:40ch; margin:0 auto 26px; }

#landingPage .lp-foot{ text-align:center; padding:30px 0; color:var(--muted); font-size:.84rem; border-top:1px solid var(--line); }
#landingPage .lp-foot .lp-leaf{ color:var(--green); }

@media (max-width:820px){
  #landingPage .lp-hero .lp-wrap, #landingPage .lp-showcase .lp-wrap{ grid-template-columns:1fr; }
  #landingPage .lp-hero{ padding:44px 0 30px; }
  #landingPage .lp-hero h1{ font-size:2.4rem; }
  #landingPage .lp-grid, #landingPage .lp-steps{ grid-template-columns:1fr; }
  #landingPage .lp-shot{ order:-1; }
  #landingPage .lp-strip .lp-wrap{ gap:20px; }
}

/* ============================================================
   My Plants — surface the plant list sooner on phones
   ============================================================ */
.tools-toggle { display:none; }  /* desktop: tools always visible, no toggle */
.tools-caret { transition:transform .2s ease; font-size:0.8rem; }
.tools-wrap.open .tools-caret { transform:rotate(180deg); }

@media (max-width:620px){
  .dash-sub { display:none; }                 /* drop the subtitle line */
  .dash-head { align-items:center; margin-bottom:16px; }
  /* stats become one slim summary strip: "7 plants · 0 need water · 2 rooms · 0 photos" */
  .stats { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 0;
    background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
    border-radius:14px; padding:11px 12px; margin-bottom:14px; }
  .stat { display:flex; align-items:baseline; gap:4px; background:none; border:0; box-shadow:none; padding:0; }
  .stat .s-num { font-size:1rem; }
  .stat .s-lbl { display:none; }
  .stat .s-short { display:inline; font-size:0.8rem; color:var(--muted); font-weight:600; margin-top:0; white-space:nowrap; }
  .stat:not(:last-child)::after { content:"·"; color:var(--green-soft); font-weight:700; margin:0 8px; align-self:center; }
  #plantsLocationBanner { margin-bottom:14px; }
  /* collapse rooms / filters / tools behind a single toggle */
  .tools-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
    border:1.5px solid var(--line); background:var(--card); color:var(--green-deep);
    font-family:var(--sans); font-weight:600; font-size:0.85rem; padding:11px 16px;
    border-radius:999px; cursor:pointer; margin-bottom:14px; }
  .tools-wrap:not(.open) .toolbar { display:none; }
  .tools-wrap.open .toolbar { display:flex; margin-bottom:16px; }
  .tools-wrap.open .toolbar .spacer { display:none; }
  .tools-wrap.open .toolbar .filter-select { max-width:none; flex:1 1 100%; }
  .tools-wrap.open .toolbar .btn { flex:1 1 auto; justify-content:center; }
}