/* ============================================================
   Adopt a Tree! — Design system
   Natural & organic: cream, forest green, warm clay
   ============================================================ */

:root {
  /* Surfaces & ink */
  --bg:        #f2eee4;
  --bg-deep:   #ebe5d6;
  --surface:   #fbf9f3;
  --surface-2: #f0ebde;
  --ink:       #221f19;
  --ink-soft:  #5d574a;
  --ink-faint: #8b8473;
  --line:      #ddd5c2;
  --line-soft: #e7e0cf;

  /* Brand */
  --green:       #3f5e3a;
  --green-deep:  #2b4127;
  --green-mid:   #587a4f;
  --green-soft:  #e0e8d4;
  --green-tint:  #eef2e6;
  --clay:        #9c7a4d;
  --clay-deep:   #7e6038;
  --clay-soft:   #ecddc4;
  --clay-tint:   #f4ecdc;

  /* State colors for cells */
  --st-available: #ffffff;
  --st-reserved:  #e7c98a;
  --st-adopted:   #3f5e3a;
  --st-review:    #b9b0a0;

  /* Radius & shadow */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(40,34,20,.05), 0 1px 3px rgba(40,34,20,.06);
  --shadow:    0 4px 14px rgba(40,34,20,.07), 0 2px 5px rgba(40,34,20,.05);
  --shadow-lg: 0 18px 50px rgba(40,34,20,.16), 0 6px 18px rgba(40,34,20,.08);

  /* Type */
  --font-display: "Spectral", Georgia, serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
#root { min-height: 100vh; display: flex; flex-direction: column; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); }

::selection { background: var(--green-soft); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cfc7b3; border-radius: 20px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 88px 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clay-deep); font-weight: 500;
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  border: 1px solid transparent; border-radius: 100px;
  font-weight: 600; font-size: 15px; padding: 13px 24px;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-primary { background: var(--green); color: #f6f7f0; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-deep); box-shadow: var(--shadow); }
.btn-clay { background: var(--clay); color: #fdf9f1; }
.btn-clay:hover { background: var(--clay-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-faint); }
.btn-soft { background: var(--green-soft); color: var(--green-deep); }
.btn-soft:hover { background: #d4dec5; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--line);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--ink-soft);
}

/* status pills */
.pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:100px; }
.pill .dot { width:8px; height:8px; border-radius:50%; }
.pill-available { background: var(--surface-2); color: var(--ink-soft); }
.pill-reserved  { background: var(--clay-soft); color: var(--clay-deep); }
.pill-adopted   { background: var(--green-soft); color: var(--green-deep); }
.pill-review    { background: #e8e4db; color: #6c6557; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,238,228,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.hdr-in { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 21px; cursor: pointer; white-space: nowrap; }
.brand .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.nav { display: flex; gap: 4px; margin-left: 6px; }
.nav a {
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 100px; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a.active { color: var(--green-deep); background: var(--green-tint); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hdr-cart { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }
.hdr-cart .count { position: absolute; top: -4px; right: -4px; background: var(--clay); color: #fff; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 4px; }
.hdr-menu-btn { display: none; }

/* ---------- Footer ---------- */
.ftr { background: var(--green-deep); color: #e6ead9; margin-top: auto; }
.ftr a { color: #c5d0b4; }
.ftr a:hover { color: #fff; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 40px; }
.ftr h4 { color: #fff; font-size: 16px; margin-bottom: 16px; font-family: var(--font-ui); letter-spacing: .02em; }
.ftr-col a { display: block; padding: 5px 0; font-size: 14.5px; }
.ftr-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; font-size: 13px; color: #aebb9b; gap: 16px; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.input, .select, textarea.input {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-tint); }
.input::placeholder { color: var(--ink-faint); }

/* ---------- Tree glyph (circle canopy + trunk) ---------- */
.tree { position: relative; display: inline-block; }

/* ---------- Grid cells ---------- */
.parcel-grid { display: grid; gap: var(--cell-gap, 7px); }
.cell {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--st-available);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s, border-color .15s;
}
.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow); z-index: 2; border-color: var(--green-mid); }
.cell.is-available { background: var(--surface); border-style: dashed; }
.cell.is-reserved  { background: var(--clay-soft); border-color: #d9bc83; }
.cell.is-adopted   { background: var(--green); border-color: var(--green-deep); }
.cell.is-review    { background: repeating-linear-gradient(45deg, #e6e2d8 0 6px, #ddd8cc 6px 12px); border-color: #c5bdad; }
.cell.sel { outline: 3px solid var(--clay); outline-offset: 2px; z-index: 3; }
.cell .cl-idx { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); opacity: .8; }
.cell.is-adopted .cl-idx { color: #cdd9c0; }

/* canopy dot inside cell */
.canopy { width: 46%; height: 46%; border-radius: 50%; }
.cell.is-available .canopy { background: var(--line); opacity:.5; }
.cell.is-reserved .canopy { background: var(--clay-deep); }
.cell.is-adopted .canopy { background: #cfe0b8; }
.cell.is-review .canopy { background: #9a958a; }

/* ---------- Image placeholder ---------- */
.imgph {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,.035) 11px 22px);
  display: grid; place-items: center; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  border-radius: var(--r); overflow: hidden; position: relative;
}
.imgph.green { background-color: #dde6cf; color: var(--green-deep); background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(43,65,39,.05) 11px 22px); }

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.gap32{gap:32px}
.grow { flex: 1; }
.center { align-items: center; }
.between { justify-content: space-between; }
.wrapf { flex-wrap: wrap; }
.hr { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.stat-num { font-family: var(--font-display); font-weight: 600; line-height: 1; }

/* fade-in for view transitions */
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view { opacity: 1; }

/* ---------- Modal / drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(34,31,25,.42); backdrop-filter: blur(2px); z-index: 100; display: grid; place-items: center; padding: 24px; animation: viewIn .2s ease; }
.modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
.drawer-r { position: fixed; top:0; right:0; bottom:0; width: 420px; max-width: 92vw; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 100; overflow:auto; animation: drawerIn .28s ease; }
@keyframes drawerIn { from { transform: translateX(30px); opacity:.4; } to { transform:none; opacity:1; } }

/* mobile drawer nav */
.mnav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-menu-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .section { padding: 60px 0; }
}
/* ============================================================
   Component layouts
   ============================================================ */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-art { display: flex; justify-content: center; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: end; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* segmented control */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 100px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; padding: 8px 14px; border-radius: 100px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--surface); color: var(--green-deep); box-shadow: var(--shadow-sm); }

/* map */
.map-layout { display: grid; gap: 24px; align-items: start; }
.cell.incart { outline: 2.5px solid var(--green); outline-offset: 1px; }
.incart-tick { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.cell.is-available .incart-tick { color: var(--green); }

/* list view */
.lv-row { display: grid; grid-template-columns: 90px 130px 1fr 1fr 1fr 30px; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: transparent; border: none; text-align: left; font-size: 14px; cursor: pointer; width: 100%; transition: background .12s; }
.lv-row:hover { background: var(--surface-2); }
.lv-row.on { background: var(--green-tint); }
.lv-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 600; cursor: default; }
.lv-head:hover { background: transparent; }

/* tree detail */
.tree-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 30px; width: 2px; background: var(--line); }
.tl-item { position: relative; margin-bottom: 28px; }
.tl-dot { position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--green); }
.tl-dot.pending { background: var(--bg); box-shadow: 0 0 0 2px var(--line); }

/* checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pay-opt { text-align: left; padding: 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; }
.pay-opt.on { border-color: var(--green); background: var(--green-tint); }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; transition: .15s; }
.radio[data-on="true"] { border-color: var(--green); background: radial-gradient(var(--green) 0 38%, transparent 42%); }

/* profile */
.ptab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; background: transparent; font-weight: 600; font-size: 14.5px; color: var(--ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; }
.ptab.on { color: var(--green-deep); border-bottom-color: var(--green); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }

/* admin */
.admin-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.admin-side { background: var(--green-deep); padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; }
.admin-side .brand { color: #fff; }
.aside-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: none; background: transparent; color: #c5d0b4; font-weight: 600; font-size: 14.5px; text-align: left; transition: background .14s, color .14s; }
.aside-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.aside-link.on { background: var(--green); color: #fff; }
.admin-main { padding: 40px clamp(24px, 4vw, 56px); background: var(--bg); overflow-x: hidden; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; padding: 14px 16px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.up-badge { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 8px; background: var(--surface); color: var(--green); display: grid; place-items: center; box-shadow: var(--shadow-sm); }

/* grid generator */
.gen-layout { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 100px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; animation: toastIn .3s ease; max-width: 92vw; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .tree-layout { grid-template-columns: 1fr; }
  .gen-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { display: none; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .map-layout { grid-template-columns: 1fr !important; }
  .cell-panel { position: static !important; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { flex-direction: row; height: auto; position: sticky; overflow-x: auto; padding: 12px; align-items: center; }
  .admin-side .brand { display: none; }
  .admin-side nav { flex-direction: row !important; }
  .admin-side > div { margin-left: auto !important; }
  .aside-link { white-space: nowrap; padding: 10px 12px; }
  .admin-2col { grid-template-columns: 1fr; }
  .pay-methods { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none !important; }
  .lv-row { grid-template-columns: 80px 120px 1fr 30px; }
  .lv-row > *:nth-child(3), .lv-head > *:nth-child(3) { display: none; }
  .lv-row > *:nth-child(5), .lv-head > *:nth-child(5) { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .ftr-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 14px 22px; }
  .feat-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 48px 0; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}