:root{
  --cream:#f7f2e7;
  --cream-2:#fffaf1;
  --sage:#8fae8b;
  --sage-dark:#476c54;
  --sage-deep:#2f5842;
  --mist:#e7efe5;
  --blush:#e6c9c2;
  --gold:#c9a86b;
  --ink:#294234;
  --muted:#738077;
  --line:rgba(71,108,84,.16);
  --shadow:0 16px 36px rgba(54,77,61,.11);
}
*{box-sizing:border-box}
html{background:var(--cream)}
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Avenir Next",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 0%,rgba(230,201,194,.34),transparent 28rem),
    linear-gradient(180deg,#fbf7ee 0%,#f4efe3 100%);
}
button,input,textarea,select{font:inherit}
button{color:inherit}
#app{
  max-width:520px;
  width:100%;
  min-height:100vh;
  margin:0 auto;
  padding:env(safe-area-inset-top) 18px calc(104px + env(safe-area-inset-bottom));
  /* Clip accidental wide content without creating a scroll container; this keeps the Home garden sticky. */
  overflow-x:clip;
}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 4px 10px;
}
h1,h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  margin:.15rem 0;
}
h1{font-size:2rem;line-height:1.05}
h2{font-size:1.3rem}
p{line-height:1.45}
.eyebrow{
  margin:0;
  color:var(--sage-dark);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
}
.icon-button,.text-button,.small-button{
  border:0;background:transparent;cursor:pointer;
}
.icon-button{
  width:42px;height:42px;border-radius:50%;font-size:1.6rem;
  background:rgba(255,255,255,.68);box-shadow:0 8px 18px rgba(54,77,61,.08)
}
.text-button{color:var(--sage-deep);font-weight:700;padding:8px}
.segment{
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.55);padding:5px;border-radius:16px;
  margin:6px 0 14px;border:1px solid var(--line)
}
.segment-button{
  border:0;background:transparent;padding:10px;border-radius:12px;font-weight:700;cursor:pointer
}
.segment-button.active{background:var(--sage-deep);color:#fff;box-shadow:0 8px 16px rgba(47,88,66,.16)}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.card,.garden-card{
  background:rgba(255,250,241,.92);
  border:1px solid rgba(71,108,84,.12);
  border-radius:25px;
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}
.garden-card{overflow:hidden;padding-bottom:16px}
.garden-heading,.section-title-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.progress-pill{
  min-width:58px;text-align:center;padding:9px 12px;border-radius:999px;
  background:var(--mist);color:var(--sage-deep);font-weight:800
}
.garden-stage{
  position:relative;height:255px;margin:14px -18px 10px;
  overflow:hidden;
  background:linear-gradient(#dfeadb 0%,#f2e9d6 62%,#cdd8b7 63%,#9bae83 100%);
  transition:background .4s ease;
}
.garden-stage.evening{
  background:linear-gradient(#263c4b 0%,#5d6f70 55%,#a7a98a 66%,#657b58 100%);
}
.sky-glow{
  position:absolute;inset:-40% 0 auto 0;height:95%;
  background:radial-gradient(circle,rgba(255,250,221,.8),transparent 60%);
}
.sun-moon{
  position:absolute;width:66px;height:66px;border-radius:50%;
  right:40px;top:24px;background:#f3d990;box-shadow:0 0 32px rgba(244,216,144,.75)
}
.evening .sun-moon{
  width:54px;height:54px;background:#f5eccd;box-shadow:0 0 28px rgba(255,245,211,.52)
}
.evening .sun-moon:after{
  content:"";position:absolute;width:52px;height:52px;border-radius:50%;
  background:#314955;left:17px;top:-5px
}
.ground{position:absolute;left:-10%;width:120%;border-radius:50% 50% 0 0}
.ground.back{height:85px;bottom:25px;background:#879d73;opacity:.8}
.ground.front{height:65px;bottom:-15px;background:#536f4e}
.plant,.flower{position:absolute;bottom:38px;transform-origin:bottom;transition:.55s cubic-bezier(.2,.8,.2,1)}
.plant i,.plant b,.plant em,.flower i,.flower b,.flower em{position:absolute;display:block}
.plant{width:46px;height:110px;transform:scale(.1);opacity:0}
.plant:before,.flower:before{
  content:"";position:absolute;left:22px;bottom:0;width:4px;height:88px;border-radius:10px;background:#496d4b
}
.plant i,.plant b,.plant em{
  width:35px;height:15px;border-radius:100% 0 100% 0;background:#6f9367
}
.plant i{left:-7px;bottom:45px;transform:rotate(25deg)}
.plant b{left:20px;bottom:63px;transform:scaleX(-1) rotate(25deg)}
.plant em{left:-5px;bottom:78px;transform:rotate(35deg)}
.plant-a{left:15%}.plant-b{left:48%;height:125px}.plant-c{right:13%;height:105px}
.flower{width:56px;height:118px;transform:scale(.1);opacity:0}
.flower:after{
  content:"";position:absolute;width:42px;height:42px;left:2px;top:4px;border-radius:50%;
  background:
    radial-gradient(circle,#d6a76c 0 18%,transparent 19%),
    radial-gradient(circle at 50% 5%,#dcbfc3 0 25%,transparent 27%),
    radial-gradient(circle at 95% 50%,#dcbfc3 0 25%,transparent 27%),
    radial-gradient(circle at 50% 95%,#dcbfc3 0 25%,transparent 27%),
    radial-gradient(circle at 5% 50%,#dcbfc3 0 25%,transparent 27%);
}
.flower i,.flower b{
  width:30px;height:14px;border-radius:100% 0 100% 0;background:#76956a
}
.flower i{left:-2px;bottom:42px;transform:rotate(25deg)}
.flower b{left:20px;bottom:58px;transform:scaleX(-1) rotate(28deg)}
.flower-a{left:29%}.flower-b{left:61%;height:130px}.flower-c{right:5%;height:100px}
.flower-b:after{filter:hue-rotate(55deg)}
.flower-c:after{filter:hue-rotate(290deg)}
.butterfly{
  position:absolute;top:60px;left:47%;font-size:32px;color:#f6dc9b;
  opacity:0;transform:translateY(20px) scale(.3);transition:.6s ease
}
.stage-1 .plant-a,.stage-1 .plant-b,
.stage-2 .plant,.stage-3 .plant,.stage-4 .plant{
  transform:scale(1);opacity:1
}
.stage-2 .flower-a,.stage-3 .flower-a,.stage-3 .flower-b,.stage-4 .flower{
  transform:scale(1);opacity:1
}
.stage-4 .butterfly{opacity:1;transform:translateY(0) scale(1)}
.progress-track{
  height:9px;border-radius:999px;background:#e1e8dc;overflow:hidden
}
.progress-track div{
  height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--sage),var(--sage-deep));
  transition:width .35s ease
}
.encouragement{color:var(--muted);margin:10px 0 0;text-align:center;font-size:.92rem}
.routine-list{display:grid;gap:10px;margin:15px 0}
.routine-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid var(--line);background:#fffdf8;padding:13px;border-radius:16px;cursor:pointer
}
.routine-item.completed{background:#e9f0e5}
.check-circle{
  width:27px;height:27px;border:2px solid #9eb29a;border-radius:50%;display:grid;place-items:center;flex:0 0 auto
}
.completed .check-circle{background:var(--sage-deep);border-color:var(--sage-deep);color:white}
.completed .check-circle:after{content:"✓";font-weight:900}
.routine-copy{display:flex;flex-direction:column;gap:2px;flex:1}
.routine-copy small{color:var(--muted)}
.leaf-mark{color:#92aa8a;font-size:1.3rem}
.primary-button,.small-button,.upload-button{
  display:block;border:0;background:var(--sage-deep);color:white;border-radius:16px;
  padding:14px 18px;font-weight:800;text-align:center;cursor:pointer;
  box-shadow:0 10px 20px rgba(47,88,66,.16)
}
.primary-button{width:100%}
.small-button{padding:11px 16px;border-radius:12px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-card{
  border:1px solid var(--line);border-radius:20px;background:rgba(255,250,241,.9);
  padding:15px;text-align:left;display:flex;gap:10px;box-shadow:0 10px 22px rgba(54,77,61,.08)
}
.quick-card>span{font-size:1.5rem;color:var(--sage-dark)}
.quick-card div{display:flex;flex-direction:column;gap:4px}
.quick-card small{color:var(--muted)}
.page-heading{padding:16px 4px 8px}
.page-heading p:not(.eyebrow){color:var(--muted);margin-top:8px}
.with-back{display:flex;align-items:center;gap:12px}
input,textarea,select{
  width:100%;border:1px solid var(--line);background:#fffdf9;color:var(--ink);
  border-radius:14px;padding:13px;outline:none
}
input:focus,textarea:focus,select:focus{border-color:var(--sage)}
.editor-list{display:grid;gap:9px;margin:13px 0}
.editor-item{
  display:flex;gap:8px;align-items:center;background:#fffdf8;border:1px solid var(--line);border-radius:14px;padding:10px 12px
}
.editor-item span{flex:1}
.editor-item button{border:0;background:#f3e7e2;border-radius:10px;padding:7px 10px}
.add-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.journal-form{display:grid;gap:12px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.choice{
  border:1px solid var(--line);background:#fffdf8;border-radius:14px;padding:11px;cursor:pointer
}
.choice.selected{background:var(--sage-deep);color:#fff}
.journal-entry{
  border-bottom:1px solid var(--line);padding:12px 0
}
.journal-entry:last-child{border:0}
.journal-entry time{color:var(--muted);font-size:.82rem}
.muted{color:var(--muted)}
.add-product-form{display:grid;gap:10px}
.product-list{display:grid;gap:12px}
.product-card{
  background:rgba(255,250,241,.92);border:1px solid var(--line);border-radius:20px;padding:15px;
  display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 22px rgba(54,77,61,.07)
}
.product-card small{color:var(--muted)}
.status{
  font-size:.76rem;font-weight:800;padding:6px 9px;border-radius:999px;background:var(--mist)
}
.settings-card{display:grid;gap:12px}
.switch-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)
}
.switch-row span{display:flex;flex-direction:column;gap:3px}
.switch-row small{color:var(--muted)}
.switch-row input{width:22px;height:22px}
.photo-capture{display:grid;gap:12px}
.photo-source-buttons{display:grid;grid-template-columns:1fr;gap:10px}
.secondary-upload-button{
  display:block;border:1px solid var(--sage-dark);background:#fffdf8;color:var(--sage-deep);
  border-radius:16px;padding:14px 18px;font-weight:800;text-align:center;cursor:pointer
}
.photo-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.photo-card{
  overflow:hidden;background:#fffaf2;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 22px rgba(54,77,61,.08)
}
.photo-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.photo-meta{padding:10px}
.photo-meta small{display:block;color:var(--muted)}
.photo-meta button{margin-top:7px;border:0;background:#f3e7e2;border-radius:9px;padding:7px 9px}
.empty-state{color:var(--muted);text-align:center;padding:18px}
.tabbar{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(520px,100%);display:grid;grid-template-columns:repeat(5,1fr);
  padding:9px 8px calc(9px + env(safe-area-inset-bottom));
  background:rgba(250,247,238,.94);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);z-index:10
}
.tab{
  border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;color:#7d897f
}
.tab span{font-size:1.25rem}
.tab.active{color:var(--sage-deep)}
@media (min-width:700px){
  body{padding:28px}
  #app{border-radius:34px;box-shadow:0 30px 80px rgba(39,60,45,.18);overflow:hidden;background:rgba(247,242,231,.68)}
  .tabbar{bottom:28px;border-radius:0 0 34px 34px}
}


.hidden{display:none !important}
.tap-hint{
  margin:-4px 2px 12px;
  color:var(--muted);
  text-align:center;
  font-size:.88rem
}
.editable-product-card{
  width:100%;
  text-align:left;
  cursor:pointer
}
.product-card-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}
.product-card-copy strong,
.product-card-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.product-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto
}
.edit-chevron{
  font-size:1.8rem;
  line-height:1;
  color:var(--sage-dark)
}
.danger-button{
  width:100%;
  border:1px solid rgba(139,76,67,.28);
  background:#f6e8e4;
  color:#8b4c43;
  border-radius:16px;
  padding:13px 18px;
  font-weight:800;
  cursor:pointer
}

.edit-product-button{
  border:0;
  border-radius:11px;
  background:var(--sage-deep);
  color:white;
  padding:9px 13px;
  font-weight:800;
  cursor:pointer
}
.version-stamp{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--sage-dark);
  font-size:.82rem;
  text-align:center
}


.product-field{
  display:grid;
  gap:7px
}
.product-field label{
  color:var(--sage-deep);
  font-weight:800;
  font-size:.9rem
}
.save-message{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:var(--mist);
  color:var(--sage-deep);
  text-align:center;
  font-weight:800
}

.tappable-product-card{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,250,241,.92);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tappable-product-card:active{
  transform:scale(.992);
  background:#eef3ea;
}
.tappable-product-card .product-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.tappable-product-card .edit-chevron{
  font-size:1.9rem;
  line-height:1;
  color:var(--sage-dark);
}

.reorder-hint{
  margin:5px 0 12px;
  color:var(--muted);
  font-size:.86rem
}
.reorderable-step{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease
}
.reorderable-step.dragging{
  z-index:20;
  background:#eef3ea;
  box-shadow:0 16px 30px rgba(47,88,66,.22);
  transform:scale(1.018)
}
.drag-handle{
  width:38px;
  min-width:38px;
  height:38px;
  border:0;
  border-radius:11px;
  background:var(--mist);
  color:var(--sage-deep);
  font-size:1.25rem;
  font-weight:900;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none
}
.drag-handle:active{
  cursor:grabbing
}
.editor-step-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700
}
.editor-controls{
  display:flex;
  align-items:center;
  gap:5px
}
.move-step-button,
.remove-step-button{
  border:0;
  border-radius:9px;
  padding:7px 9px;
  font-weight:800
}
.move-step-button{
  background:var(--mist);
  color:var(--sage-deep);
  min-width:34px
}
.move-step-button:disabled{
  opacity:.32
}
.remove-step-button{
  background:#f3e7e2;
  color:#7f5149
}
.routine-drag-active{
  overflow:hidden;
  overscroll-behavior:none
}
@media (max-width:390px){
  .reorderable-step{
    grid-template-columns:auto minmax(0,1fr)
  }
  .editor-controls{
    grid-column:1 / -1;
    justify-content:flex-end
  }
}

.arrow-only-step{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px
}
.arrow-only-step .editor-controls{
  display:flex;
  align-items:center;
  gap:6px
}
.arrow-only-step .editor-step-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700
}

.streak-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  margin-bottom:14px;
  border:1px solid rgba(71,108,84,.14);
  border-radius:21px;
  background:linear-gradient(135deg,rgba(255,250,241,.96),rgba(231,239,229,.96));
  box-shadow:0 10px 24px rgba(54,77,61,.08)
}
.streak-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sage-deep);
  color:#f5df9d;
  font-size:1.25rem
}
.streak-copy{
  min-width:0
}
.streak-copy h2{
  margin:2px 0 3px
}
.streak-copy p:last-child{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.3
}
.streak-best{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:47px;
  padding:8px;
  border-radius:13px;
  background:rgba(255,255,255,.6)
}
.streak-best small{
  color:var(--muted);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.streak-best strong{
  font-size:1.2rem;
  color:var(--sage-deep)
}
.minimum-explainer{
  display:grid;
  gap:4px;
  padding:13px 14px;
  margin:14px 0 3px;
  border-radius:16px;
  background:var(--mist);
  color:var(--sage-deep)
}
.minimum-explainer span{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.35
}
.minimum-capable-step{
  grid-template-columns:minmax(0,1fr) auto
}
.step-main{
  min-width:0;
  display:grid;
  gap:7px
}
.minimum-toggle{
  justify-self:start;
  border:1px solid rgba(71,108,84,.2);
  border-radius:999px;
  background:#fffdf8;
  color:var(--sage-dark);
  padding:6px 10px;
  font-size:.76rem;
  font-weight:800;
  cursor:pointer
}
.minimum-toggle.selected{
  background:var(--sage-deep);
  color:white;
  border-color:var(--sage-deep)
}
@media (max-width:390px){
  .streak-card{
    grid-template-columns:auto minmax(0,1fr)
  }
  .streak-best{
    grid-column:1 / -1;
    justify-self:end;
    flex-direction:row;
    gap:6px
  }
  .minimum-capable-step{
    grid-template-columns:1fr
  }
  .minimum-capable-step .editor-controls{
    justify-content:flex-end
  }
}

.streak-repair-card .secondary-button{
  width:100%;
  margin-top:8px
}
.streak-repair-card .secondary-button:disabled{
  opacity:.65;
  cursor:default
}

.garden-keep{
  position:absolute;
  opacity:0;
  transform:scale(.3) translateY(10px);
  transition:.45s ease;
  z-index:4;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))
}
.garden-keep.visible{
  opacity:1;
  transform:scale(1) translateY(0)
}
.garden-keep-1{left:16%;bottom:18px;font-size:24px}
.garden-keep-2{left:31%;bottom:34px;font-size:24px}
.garden-keep-3{right:23%;bottom:18px;font-size:20px}
.garden-keep-4{right:14%;top:78px;font-size:20px}
.garden-keep-5{left:67%;bottom:24px;font-size:20px}

.keepsakes-card{
  background:rgba(255,250,241,.92);
  border:1px solid rgba(71,108,84,.12);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
  margin:0 0 16px;
}
.keepsake-message{margin:.35rem 0 0}
.keepsake-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
.keepsake-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(231,239,229,.95);
  color:var(--sage-deep);
  border:1px solid rgba(71,108,84,.12)
}
.keepsake-chip span{font-size:1rem}
.keepsake-chip small{font-weight:700}


/* Bloom 2.5 — refined typography */
:root{
  --display-serif: Georgia, "Times New Roman", serif;
  --body-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --ink-warm: #263c31;
  --ink-soft: #5f685f;
  --olive-muted: #7f8d78;
}

body{
  font-family:var(--body-sans);
  color:var(--ink-warm);
  letter-spacing:-0.006em;
}

h1,
h2,
.page-heading h1,
.garden-card h2,
.routine-card h2,
.streak-card h2,
.keepsakes-card h2{
  font-family:var(--display-serif);
  color:var(--ink-warm);
  font-weight:400;
  letter-spacing:-0.025em;
}

#greeting{
  font-family:var(--display-serif);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.02;
}

.page-heading h1{
  line-height:1.08;
  margin-bottom:.35rem;
}

.garden-card h2,
.routine-card h2,
.streak-card h2,
.keepsakes-card h2{
  line-height:1.12;
}

.eyebrow{
  font-family:var(--body-sans);
  color:var(--olive-muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

p,
.muted,
.routine-copy small,
.streak-copy p:last-child,
.minimum-explainer span,
.tap-hint{
  color:var(--ink-soft);
}

button,
input,
select,
textarea{
  font-family:var(--body-sans);
}

.routine-copy strong,
.editor-step-name,
.product-card strong,
label,
.primary-button,
.secondary-button{
  letter-spacing:-0.01em;
}

.version-stamp{
  color:var(--olive-muted);
}

@media (max-width:390px){
  #greeting{
    font-size:clamp(1.95rem, 8vw, 2.35rem);
  }
}


/* Bloom 2.6 — prettier sanctuary garden */
.garden-card{
  background:linear-gradient(180deg, rgba(255,252,247,.97), rgba(255,249,241,.93));
  border-color:rgba(124,145,116,.16);
}
.garden-stage{
  position:relative;
  height:282px;
  margin:16px -18px 12px;
  overflow:hidden;
  border-radius:24px;
  background:
    linear-gradient(180deg,#f7f2e7 0%, #efe5d4 54%, #d8d8bf 55%, #b7c29e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -40px 70px rgba(91,117,82,.10);
}
.garden-stage.evening{
  background:linear-gradient(180deg,#364754 0%, #687777 52%, #a9ab8e 54%, #7d8f6a 100%);
}
.garden-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 20%, rgba(255,253,247,.65), transparent 32%),
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.42), transparent 26%),
    linear-gradient(180deg, transparent 0%, rgba(107,124,93,.05) 100%);
  pointer-events:none;
}
.garden-wall{
  position:absolute;
  inset:0 0 100px 0;
  background:
    radial-gradient(circle at 80% 26%, rgba(255,255,255,.48), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(140,135,115,.06)),
    linear-gradient(90deg, rgba(112,129,95,.06), rgba(255,255,255,.02) 30%, rgba(112,129,95,.04) 70%, rgba(255,255,255,.02));
  opacity:.92;
}
.sky-glow{
  inset:-30% -10% auto -10%;
  height:90%;
  background:radial-gradient(circle, rgba(255,251,229,.84), transparent 58%);
  filter:blur(4px);
}
.sun-moon{
  width:74px;
  height:74px;
  right:34px;
  top:22px;
  background:#efdaa2;
  box-shadow:0 0 38px rgba(244,216,144,.68);
}
.trellis{
  position:absolute;
  left:18px;
  bottom:54px;
  width:86px;
  height:184px;
  border:4px solid rgba(128,144,104,.75);
  border-bottom:none;
  border-radius:54px 54px 0 0;
  opacity:.65;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.trellis::before,
.trellis::after{
  content:"";
  position:absolute;
  inset:10px 12px 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(128,144,104,.45) 18% 22%, transparent 22% 46%, rgba(128,144,104,.45) 46% 50%, transparent 50% 74%, rgba(128,144,104,.45) 74% 78%, transparent 78% 100%),
    linear-gradient(180deg, transparent 0 12%, rgba(128,144,104,.38) 12% 15%, transparent 15% 31%, rgba(128,144,104,.38) 31% 34%, transparent 34% 50%, rgba(128,144,104,.38) 50% 53%, transparent 53% 69%, rgba(128,144,104,.38) 69% 72%, transparent 72% 88%, rgba(128,144,104,.38) 88% 91%, transparent 91% 100%);
  border-radius:40px 40px 0 0;
}
.trellis::after{
  inset:16px 18px 0;
  background:
    radial-gradient(circle at 30% 18%, rgba(131,165,112,.7) 0 6px, transparent 7px),
    radial-gradient(circle at 53% 36%, rgba(131,165,112,.7) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 58%, rgba(131,165,112,.7) 0 6px, transparent 7px),
    radial-gradient(circle at 44% 72%, rgba(131,165,112,.7) 0 8px, transparent 9px),
    radial-gradient(circle at 18% 84%, rgba(131,165,112,.7) 0 6px, transparent 7px);
  opacity:.85;
}
.herb-label{
  position:absolute;
  bottom:92px;
  padding:4px 8px;
  border-radius:6px;
  font-size:.62rem;
  letter-spacing:.02em;
  color:#6e6c61;
  background:rgba(255,249,240,.85);
  border:1px solid rgba(163,160,144,.38);
  box-shadow:0 4px 10px rgba(118,113,97,.08);
  opacity:0;
  transform:translateY(8px);
  transition:.4s ease;
}
.label-a{ left:21%; }
.label-b{ left:42%; bottom:88px; }
.label-c{ left:60%; }
.stage-3 .herb-label,
.stage-4 .herb-label{ opacity:1; transform:translateY(0); }

.ground{
  left:-8%;
  width:116%;
}
.ground.back{
  height:100px;
  bottom:38px;
  border-radius:52% 52% 22% 22% / 46% 46% 14% 14%;
  background:
    linear-gradient(180deg, #f0ebe1 0%, #e4ddcf 18%, #d0c5b2 19%, #bba98f 100%);
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.38),
    inset 0 -10px 16px rgba(129,108,88,.18),
    0 18px 28px rgba(74,78,62,.12);
  opacity:1;
}
.ground.back::before{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  top:18px;
  height:40px;
  border-radius:50%;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.15) 0 2px, transparent 3px),
    linear-gradient(180deg, #786247 0%, #5d4c39 100%);
  box-shadow:inset 0 12px 14px rgba(0,0,0,.05);
}
.ground.front{
  height:72px;
  bottom:-16px;
  border-radius:44% 44% 0 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(130,164,109,.95) 0 12px, transparent 13px),
    radial-gradient(circle at 18% 38%, rgba(99,132,86,.92) 0 14px, transparent 15px),
    radial-gradient(circle at 28% 55%, rgba(130,164,109,.95) 0 12px, transparent 13px),
    radial-gradient(circle at 40% 42%, rgba(99,132,86,.92) 0 14px, transparent 15px),
    radial-gradient(circle at 55% 58%, rgba(130,164,109,.95) 0 13px, transparent 14px),
    radial-gradient(circle at 68% 40%, rgba(99,132,86,.92) 0 16px, transparent 17px),
    radial-gradient(circle at 80% 55%, rgba(130,164,109,.95) 0 12px, transparent 13px),
    radial-gradient(circle at 92% 38%, rgba(99,132,86,.92) 0 16px, transparent 17px),
    linear-gradient(180deg, #6e8b60 0%, #536f4e 100%);
}

.plant,.flower{
  bottom:62px;
  filter:drop-shadow(0 10px 10px rgba(43,58,45,.10));
}
.plant{ width:54px; height:122px; }
.plant:before,.flower:before{
  left:25px;
  width:4px;
  background:#57734f;
}
.plant i,.plant b,.plant em{
  width:32px;
  height:16px;
  background:linear-gradient(180deg,#8ead7b 0%, #6f8d63 100%);
  box-shadow:inset 0 -2px 0 rgba(60,93,57,.15);
}
.plant i{ left:-4px; bottom:32px; transform:rotate(-38deg); }
.plant b{ left:16px; bottom:54px; transform:scaleX(-1) rotate(-30deg); }
.plant em{ left:-2px; bottom:74px; transform:rotate(-22deg); }
.plant-a{ left:18%; }
.plant-b{ left:50%; height:138px; }
.plant-c{ right:10%; height:116px; }

.flower{
  width:64px;
  height:132px;
}
.flower:before{ background:#698456; }
.flower:after{
  width:46px;
  height:46px;
  left:6px;
  top:6px;
  background:
    radial-gradient(circle,#d9ae65 0 18%,transparent 19%),
    radial-gradient(circle at 50% 5%,#e8cab9 0 26%,transparent 28%),
    radial-gradient(circle at 95% 50%,#e8cab9 0 26%,transparent 28%),
    radial-gradient(circle at 50% 95%,#e8cab9 0 26%,transparent 28%),
    radial-gradient(circle at 5% 50%,#e8cab9 0 26%,transparent 28%);
  box-shadow:0 4px 8px rgba(126,93,90,.08);
}
.flower i,.flower b{
  width:32px;
  height:14px;
  background:#89a479;
}
.flower i{ left:-3px; bottom:44px; }
.flower b{ left:22px; bottom:64px; }
.flower-a{ left:31%; height:116px; }
.flower-b{ left:60%; height:138px; }
.flower-c{ right:4%; height:112px; }
.flower-b:after{ filter:hue-rotate(55deg) saturate(1.08); }
.flower-c:after{ filter:hue-rotate(298deg) saturate(.95); }

.butterfly{
  top:56px;
  left:54%;
  color:#e9c38c;
  text-shadow:0 6px 10px rgba(72,58,41,.12);
}

.apothecary-bottle{
  position:absolute;
  right:72px;
  bottom:74px;
  width:26px;
  height:48px;
  border-radius:7px 7px 9px 9px;
  background:linear-gradient(180deg, rgba(123,79,39,.95) 0%, rgba(155,100,51,.92) 38%, rgba(88,52,24,.95) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,227,187,.12), 0 8px 12px rgba(66,42,18,.16);
}
.apothecary-bottle::before{
  content:"";
  position:absolute;
  top:-8px;
  left:6px;
  width:14px;
  height:10px;
  border-radius:4px 4px 0 0;
  background:#6b4d2c;
}
.apothecary-bottle::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:16px;
  height:13px;
  border-radius:4px;
  background:rgba(252,240,222,.82);
}
.sanctuary-pot{
  position:absolute;
  right:18px;
  bottom:82px;
  width:52px;
  height:58px;
  border-radius:9px 9px 16px 16px;
  background:linear-gradient(180deg, #d8b89e 0%, #b98d6d 100%);
  box-shadow:0 8px 12px rgba(86,64,49,.14);
}
.sanctuary-pot::before{
  content:"";
  position:absolute;
  left:-4px; right:-4px; top:-7px;
  height:12px;
  border-radius:12px;
  background:linear-gradient(180deg, #e2c6b1 0%, #c89d7b 100%);
}
.sanctuary-pot::after{
  content:"";
  position:absolute;
  left:11px;
  bottom:42px;
  width:28px;
  height:40px;
  background:
    radial-gradient(circle at 20% 80%, rgba(116,153,98,.95) 0 7px, transparent 8px),
    radial-gradient(circle at 60% 38%, rgba(152,181,130,.95) 0 8px, transparent 9px),
    radial-gradient(circle at 78% 72%, rgba(126,165,106,.95) 0 7px, transparent 8px);
}
.watering-can{
  position:absolute;
  left:6px;
  bottom:50px;
  width:42px;
  height:28px;
  border-radius:10px 10px 16px 16px;
  border:3px solid rgba(174,147,87,.8);
  background:linear-gradient(180deg, rgba(224,198,135,.58), rgba(188,157,90,.55));
  opacity:.85;
}
.watering-can::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:3px solid rgba(174,147,87,.82);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  left:-11px;
  top:6px;
  transform:rotate(-35deg);
}
.watering-can::after{
  content:"";
  position:absolute;
  right:-20px;
  top:8px;
  width:26px;
  height:6px;
  border-radius:999px;
  background:rgba(174,147,87,.86);
  transform:rotate(-28deg);
}
.garden-keep{
  z-index:6;
}
.garden-keep-1{ left:20%; bottom:40px; font-size:22px; }
.garden-keep-2{ left:34%; bottom:55px; font-size:22px; }
.garden-keep-3{ right:25%; bottom:40px; font-size:18px; }
.garden-keep-4{ right:15%; top:88px; font-size:18px; }
.garden-keep-5{ left:70%; bottom:52px; font-size:18px; }

@media (max-width:390px){
  .garden-stage{ height:260px; }
  .herb-label{ font-size:.58rem; padding:3px 6px; }
  .label-a{ left:19%; } .label-b{ left:40%; } .label-c{ left:58%; }
  .trellis{ width:72px; height:170px; left:10px; }
}


/* Bloom 2.7 — Home routine card refresh */
.section-title-row{
  align-items:flex-start;
}
#editRoutineBtn.text-button{
  border:1px solid rgba(123,142,115,.16);
  background:rgba(255,252,247,.98);
  color:var(--olive-muted);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  box-shadow:0 4px 10px rgba(86,99,76,.04);
}
#completeNextBtn.primary-button{
  background:#f5efe6;
  color:#7d735f;
  border:1px solid rgba(137,130,113,.14);
  box-shadow:none;
}
#completeNextBtn.primary-button:disabled{
  opacity:.78;
}
.routine-list{
  display:grid;
  gap:0;
  margin:16px 0 14px;
  border-top:1px solid rgba(121,133,117,.12);
}
.routine-item{
  width:100%;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  text-align:left;
  border:0;
  border-bottom:1px solid rgba(121,133,117,.12);
  background:transparent;
  padding:14px 2px;
  border-radius:0;
  cursor:pointer;
}
.routine-item:last-child{
  border-bottom:0;
}
.routine-item.completed{
  background:transparent;
}
.check-circle{
  width:30px;
  height:30px;
  border:2px solid #d3d4c7;
  background:#fffdf9;
}
.completed .check-circle{
  background:#88af76;
  border-color:#88af76;
}
.step-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg,#f7f3eb,#eee6d8);
  border:1px solid rgba(155,148,132,.12);
  display:grid;
  place-items:center;
  font-size:1.15rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.routine-copy{
  gap:3px;
  min-width:0;
}
.routine-copy strong{
  font-family:var(--display-serif);
  font-weight:400;
  font-size:1.12rem;
  color:var(--ink-warm);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.routine-copy small{
  font-size:.88rem;
  color:#6e756d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-pill{
  min-width:76px;
  text-align:center;
  padding:9px 12px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:-0.01em;
  background:#f7eceb;
  color:#ad7670;
  border:1px solid rgba(205,171,167,.18);
}
.routine-item.completed .status-pill{
  background:#edf3e9;
  color:#6c8661;
  border-color:rgba(131,164,114,.12);
}
.item-chevron{
  color:#b8b2a5;
  font-size:1.65rem;
  line-height:1;
}
@media (max-width:390px){
  .routine-item{
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:10px;
  }
  .status-pill{
    grid-column:3 / 4;
    justify-self:start;
    margin-top:4px;
    min-width:70px;
    padding:7px 10px;
    font-size:.84rem;
  }
  .item-chevron{
    grid-column:4;
    grid-row:1 / span 2;
    align-self:center;
  }
}


/* Bloom 2.8 — beauty container-style routine icons */
.step-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(155,148,132,.12);
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.tone-sage{ background:linear-gradient(180deg,#eef3e8,#e5edde); }
.tone-butter{ background:linear-gradient(180deg,#faf4e5,#f1ead8); }
.tone-lavender{ background:linear-gradient(180deg,#f3eef8,#eae3f1); }
.tone-blush{ background:linear-gradient(180deg,#fbefef,#f3e7e7); }
.tone-blue{ background:linear-gradient(180deg,#edf4f8,#e2edf4); }
.tone-warm{ background:linear-gradient(180deg,#faf1e3,#f2e5d2); }
.tone-stone{ background:linear-gradient(180deg,#f3f1eb,#e9e5dc); }

.container-icon{
  position:relative;
  display:block;
  width:24px;
  height:28px;
  color:#84705a;
}
.container-icon::before,
.container-icon::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
}

/* pump bottle */
.pump-bottle::before{
  left:6px;
  bottom:2px;
  width:12px;
  height:20px;
  border:2.2px solid currentColor;
  border-radius:4px 4px 5px 5px;
  background:rgba(255,255,255,.55);
}
.pump-bottle::after{
  left:8px;
  top:1px;
  width:10px;
  height:10px;
  border-top:2.2px solid currentColor;
  border-left:2.2px solid currentColor;
  border-right:2.2px solid currentColor;
  border-radius:3px 3px 0 0;
  background:
    linear-gradient(90deg, transparent 0 55%, currentColor 55% 70%, transparent 70% 100%),
    linear-gradient(180deg, transparent 0 25%, currentColor 25% 38%, transparent 38% 100%);
}

/* serum bottle */
.serum-bottle::before{
  left:7px;
  bottom:1px;
  width:11px;
  height:21px;
  border:2.2px solid currentColor;
  border-radius:3px 3px 5px 5px;
  background:rgba(255,255,255,.55);
}
.serum-bottle::after{
  left:9px;
  top:0;
  width:8px;
  height:8px;
  border:2.2px solid currentColor;
  border-bottom:none;
  border-radius:3px 3px 0 0;
}

/* round bottle / toner */
.bottle-round::before{
  left:6px;
  bottom:2px;
  width:13px;
  height:20px;
  border:2.2px solid currentColor;
  border-radius:5px 5px 6px 6px;
  background:rgba(255,255,255,.55);
}
.bottle-round::after{
  left:9px;
  top:0;
  width:8px;
  height:8px;
  border:2.2px solid currentColor;
  border-bottom:none;
  border-radius:3px 3px 0 0;
}

/* dropper bottle */
.dropper::before{
  left:7px;
  bottom:2px;
  width:11px;
  height:18px;
  border:2.2px solid currentColor;
  border-radius:3px 3px 5px 5px;
  background:rgba(255,255,255,.55);
}
.dropper::after{
  left:10px;
  top:0;
  width:5px;
  height:11px;
  border:2.2px solid currentColor;
  border-bottom:none;
  border-radius:3px 3px 0 0;
  box-shadow: 0 -1px 0 0 rgba(255,255,255,.45) inset;
}
.dropper{
  background:
    radial-gradient(circle at 50% 11px, currentColor 0 1.4px, transparent 1.6px),
    linear-gradient(180deg, transparent 0 8px, currentColor 8px 10px, transparent 10px 100%);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:4px 12px;
}

/* jar */
.jar::before{
  left:4px;
  bottom:4px;
  width:16px;
  height:12px;
  border:2.2px solid currentColor;
  border-top:none;
  border-radius:0 0 5px 5px;
  background:rgba(255,255,255,.55);
}
.jar::after{
  left:3px;
  bottom:16px;
  width:18px;
  height:6px;
  border:2.2px solid currentColor;
  border-radius:4px;
  background:rgba(255,255,255,.35);
}

/* slim tube */
.tube-slim::before{
  left:7px;
  top:1px;
  width:11px;
  height:22px;
  border:2.2px solid currentColor;
  border-radius:4px 4px 6px 6px;
  background:rgba(255,255,255,.55);
  transform:perspective(20px) rotateX(6deg);
}
.tube-slim::after{
  left:10px;
  bottom:2px;
  width:5px;
  height:4px;
  border:2.2px solid currentColor;
  border-top:none;
  border-radius:0 0 2px 2px;
  background:rgba(255,255,255,.3);
}

/* sunscreen tube */
.tube-sun::before{
  left:7px;
  top:1px;
  width:11px;
  height:22px;
  border:2.2px solid currentColor;
  border-radius:4px 4px 6px 6px;
  background:rgba(255,255,255,.55);
}
.tube-sun::after{
  left:10px;
  bottom:2px;
  width:5px;
  height:4px;
  border:2.2px solid currentColor;
  border-top:none;
  border-radius:0 0 2px 2px;
  background:rgba(255,255,255,.3);
}
.tube-sun{
  background:
    radial-gradient(circle, currentColor 0 1.3px, transparent 1.5px),
    linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-size:3px 3px, 2px 6px;
  background-position:12px 10px, 12px 6px;
}
.tube-sun span{ display:none; }


/* Bloom 2.9 — stage-art sanctuary garden */
.garden-card{
  background:linear-gradient(180deg, rgba(255,252,247,.97), rgba(255,248,241,.94));
}

.garden-stage{
  position:relative;
  height:305px;
  margin:16px -18px 12px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(180deg,#f6f1e7,#ece4d6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 12px 28px rgba(86,88,67,.08);
}

/* use painterly stage artwork as the main garden */
.garden-art{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 55%;
  transform:scale(1.02);
}
.stage-0 .garden-art{ background-image:url("./garden-art/stage-0.jpg"); }
.stage-1 .garden-art{ background-image:url("./garden-art/stage-1.jpg"); }
.stage-2 .garden-art{ background-image:url("./garden-art/stage-2.jpg"); }
.stage-3 .garden-art{ background-image:url("./garden-art/stage-3.jpg"); }
.stage-4 .garden-art{ background-image:url("./garden-art/stage-4.jpg"); }

.garden-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%, rgba(80,91,64,.04) 100%),
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.22), transparent 28%);
  pointer-events:none;
}

.garden-stage.stage-refresh .garden-art{
  animation:gardenFadeIn .62s ease;
}

@keyframes gardenFadeIn{
  0%{ opacity:.35; transform:scale(1.045); filter:saturate(.92) brightness(1.02); }
  100%{ opacity:1; transform:scale(1.02); filter:saturate(1) brightness(1); }
}

/* hide the old CSS scene pieces so the artwork can shine */
.garden-stage .sky-glow,
.garden-stage .garden-wall,
.garden-stage .sun-moon,
.garden-stage .trellis,
.garden-stage .herb-label,
.garden-stage .ground,
.garden-stage .plant,
.garden-stage .flower,
.garden-stage .butterfly,
.garden-stage .apothecary-bottle,
.garden-stage .sanctuary-pot,
.garden-stage .watering-can,
.garden-stage .garden-keep{
  display:none !important;
}

.progress-track{
  margin-top:10px;
}

.encouragement{
  text-align:center;
  margin-top:12px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(132,147,116,.16);
  background:rgba(255,252,247,.96);
  box-shadow:0 6px 14px rgba(81,92,67,.05);
}

@media (max-width:390px){
  .garden-stage{
    height:286px;
  }
  .garden-art{
    background-position:center 54%;
  }
}


/* Bloom 3.0 — evening stage sanctuary artwork */
.stage-0.evening .garden-art{ background-image:url("./garden-art-evening/stage-0.jpg"); background-position:center 54%; }
.stage-1.evening .garden-art{ background-image:url("./garden-art-evening/stage-1.jpg"); background-position:center 54%; }
.stage-2.evening .garden-art{ background-image:url("./garden-art-evening/stage-2.jpg"); background-position:center 54%; }
.stage-3.evening .garden-art{ background-image:url("./garden-art-evening/stage-3.jpg"); background-position:center 54%; }
.stage-4.evening .garden-art{ background-image:url("./garden-art-evening/stage-4.jpg"); background-position:center 54%; }

.garden-stage.evening{
  background:linear-gradient(180deg,#2d3750,#4c5670);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(31,38,58,.18);
}
.garden-stage.evening::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.02) 36%, rgba(16,17,30,.10) 100%),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.14), transparent 22%);
}

/* remove now-hidden reward layout gap if old cache lingers */
.keepsakes-card{ display:none !important; }


/* Bloom 3.1 — true evening garden growth */
.stage-0.evening .garden-art{
  background-image:url("./garden-art-evening/stage-0.jpg");
  background-position:center 54%;
}
.stage-1.evening .garden-art{
  background-image:url("./garden-art-evening/stage-1.jpg");
  background-position:center 54%;
}
.stage-2.evening .garden-art{
  background-image:url("./garden-art-evening/stage-2.jpg");
  background-position:center 54%;
}
.stage-3.evening .garden-art{
  background-image:url("./garden-art-evening/stage-3.jpg");
  background-position:center 54%;
}
.stage-4.evening .garden-art{
  background-image:url("./garden-art-evening/stage-4.jpg");
  background-position:center 54%;
}


/* Bloom 3.2 — journal refresh */
.journal-heading{
  text-align:center;
  gap:4px;
  margin-bottom:10px;
}
.leaf-inline{
  color:#97b08b;
  font-size:.76em;
}
.journal-heading h1{
  font-size:2.25rem;
}
.journal-date-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  margin-bottom:14px;
}
.small-icon-button{
  width:40px;
  height:40px;
  font-size:1.45rem;
}
.journal-date-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--ink-warm);
}
.date-icon{
  font-size:1.1rem;
}
.journal-moment-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:16px;
}
.journal-moment{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid rgba(114,131,104,.14);
  background:rgba(255,251,246,.96);
  border-radius:18px;
  padding:14px 15px;
  box-shadow:0 8px 20px rgba(84,92,72,.04);
}
.journal-moment.active{
  border-color:#9eb28f;
  background:#f2f6ed;
}
.moment-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fbf3df,#f4ecd7);
  color:#d3a64f;
  font-size:1.3rem;
}
.journal-moment:nth-child(2) .moment-icon{ color:#d7b46a; }
.journal-moment:nth-child(3) .moment-icon{ color:#5c6455; background:linear-gradient(180deg,#eef2e9,#e4ebde); }
.journal-moment:nth-child(4) .moment-icon{ color:#7284b9; background:linear-gradient(180deg,#eef1f8,#e6ebf4); }
.journal-moment strong{ display:block; font-size:1rem; color:var(--ink-warm); }
.journal-moment small{ color:var(--muted); }

.journal-photo-card,
.journal-checkin-card,
.journal-notes-card,
.journal-summary-card,
.journal-history-card{
  margin-bottom:16px;
}

.section-icon{
  color:#97b08b;
  margin-right:6px;
}
.journal-photo-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.journal-photo-thumb,
.journal-photo-add{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:160px;
  background:rgba(255,251,246,.92);
  border:1px solid rgba(122,137,113,.14);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 10px 22px rgba(84,92,72,.05);
}
.journal-photo-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.journal-photo-thumb strong{
  position:relative;
  z-index:1;
  background:rgba(255,251,246,.93);
  padding:8px 10px 10px;
  color:var(--ink-warm);
  font-weight:700;
  text-align:center;
}
.photo-time{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  background:rgba(255,251,246,.94);
  border-radius:999px;
  padding:4px 8px;
  font-size:.72rem;
  color:#6d6f6a;
}
.journal-photo-add{
  justify-content:center;
  align-items:center;
  gap:6px;
  border-style:dashed;
  color:#718a69;
  text-align:center;
  font-weight:700;
}
.journal-photo-add span{
  font-size:2rem;
  line-height:1;
}
.journal-photo-add small{ color:var(--muted); font-weight:600; }
.journal-photo-tip{
  margin-top:12px;
  border-radius:999px;
  padding:10px 14px;
  background:#f6f5ee;
  border:1px solid rgba(125,141,117,.10);
  color:#6d756d;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.92rem;
}
.journal-photo-tip span{ color:#95ad8b; }

.journal-dashboard{
  display:block;
}
.journal-checkin-card .section-title-row{
  align-items:flex-start;
}
#journalHowBtn{
  white-space:nowrap;
}
.journal-checkin-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.journal-inline-picker{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background:#f8f6ed;
  border:1px solid rgba(122,137,113,.16);
  overflow:hidden;
}
.journal-add-tracker{
  width:36px;
  height:36px;
  font-size:1.45rem;
  line-height:1;
  background:#eef4ea;
  color:var(--sage-deep);
}
.journal-metric-options{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  margin:14px 0;
  max-height:320px;
  overflow:auto;
  padding-right:4px;
  width:100%;
  box-sizing:border-box;
  overflow-x:hidden;
}
.journal-metric-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(122,137,113,.10);
  cursor:pointer;
  min-width:0;
  box-sizing:border-box;
  width:100%;
  text-align:left;
  color:inherit;
}
.journal-metric-option input{ accent-color:#718a69; }
.metric-option-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  flex:0 0 auto;
}
.journal-metric-option strong,
.journal-metric-option small{ display:block; }
.journal-metric-option > span:last-child{
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
}
.metric-option-plus{
  flex:0 0 auto;
  font-size:1.35rem;
  color:var(--sage-deep);
}
.journal-metric-option strong,
.journal-metric-option small{ overflow-wrap:anywhere; }
.journal-metric-option small{ color:var(--muted); margin-top:2px; }
.custom-metric-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  margin:12px 0;
}
.custom-metric-form input{
  min-width:0;
  border:1px solid rgba(122,137,113,.18);
  border-radius:12px;
  padding:10px 12px;
  background:#fffdf8;
  color:var(--ink-warm);
  box-sizing:border-box;
}
.journal-no-trackers{
  display:grid;
  gap:5px;
  padding:22px 12px;
  text-align:center;
  color:var(--ink-warm);
}
.journal-no-trackers span{ color:var(--muted); }
.journal-picker-empty{ margin:4px 0 8px; }
@media (max-width:640px){
  .journal-checkin-actions{ justify-content:flex-start; }
  .journal-metric-options{ grid-template-columns:minmax(0,1fr); max-height:280px; }
  .custom-metric-form{ grid-template-columns:1fr; }
  .custom-metric-form button{ width:100%; }
}
.journal-metrics{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.metric-row{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1.8fr) 42px 28px;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(122,137,113,.12);
}
.metric-row:last-child{ border-bottom:0; }
.metric-copy{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.metric-copy strong{
  display:block;
  font-size:1.05rem;
  color:var(--ink-warm);
}
.metric-copy small{
  display:block;
  color:var(--muted);
  line-height:1.25;
}
.metric-icon,
.metric-value{
  display:grid;
  place-items:center;
  border-radius:999px;
}
.metric-remove{
  border:0;
  background:transparent;
  color:#a4aaa0;
  font-size:1.35rem;
  cursor:pointer;
  padding:4px;
}
.metric-remove:hover{ color:#9d6c70; }
.metric-icon{
  width:38px;
  height:38px;
  font-size:1.05rem;
  font-weight:700;
  border:1px solid rgba(125,141,117,.10);
}
.metric-value{
  width:42px;
  height:42px;
  font-weight:700;
  color:var(--ink-warm);
  justify-self:end;
}
.tone-blue{ background:#edf3fb; color:#6c8fbc; }
.tone-rose{ background:#faedf1; color:#ca748b; }
.tone-sage{ background:#eff4ea; color:#7c9a6d; }
.tone-blush{ background:#fbf0f4; color:#c285a8; }
.tone-gold{ background:#fcf4e6; color:#d9a954; }
.tone-teal{ background:#ecf4f4; color:#6ba6a2; }

.metric-scale{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  align-items:center;
}
.metric-dot{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:999px;
  border:2px solid #d7d4ca;
  background:#fffdf9;
  color:#8e9088;
  font-size:.74rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.metric-dot span{
  position:absolute;
  inset:auto 0 -18px 0;
  text-align:center;
  font-size:.7rem;
  color:#8b8d88;
}
.metric-dot.selected{
  background:#73966c;
  border-color:#73966c;
  color:#fff;
}
.metric-dot.selected span{
  color:#5c675b;
  font-weight:700;
}
.journal-notes-card textarea{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(122,137,113,.14);
  padding:16px;
  min-height:120px;
  background:#fffefb;
  resize:vertical;
}
.journal-note-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.journal-summary-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr .92fr;
  gap:16px;
  align-items:stretch;
  margin-top:8px;
}
.summary-block{
  display:flex;
  gap:14px;
  align-items:center;
}
.summary-ring{
  width:86px;
  height:86px;
  border-radius:999px;
  border:7px solid #88a878;
  border-right-color:#d8dfcf;
  border-bottom-color:#d8dfcf;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink-warm);
  background:#fffdf8;
  flex:0 0 86px;
}
.summary-ring span{
  font-family:var(--display-serif);
  font-size:2rem;
  line-height:1;
}
.summary-ring small{
  color:var(--muted);
  font-size:.75rem;
}
.summary-steps strong,
.summary-vibe strong{
  display:block;
  color:var(--ink-warm);
}
.summary-steps p,
.summary-vibe p{
  margin:.25rem 0 0;
  color:var(--muted);
}
.summary-vibe{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-left:10px;
  border-left:1px solid rgba(122,137,113,.12);
}
.summary-vibe small{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:#90a58a;
}
.summary-vibe strong{
  font-family:var(--display-serif);
  font-size:1.9rem;
  color:#68885d;
}
.summary-illustration{
  border-left:1px solid rgba(122,137,113,.12);
  padding-left:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mini-botanical{
  width:100%;
  min-height:130px;
  border-radius:20px;
  background:
    url("./garden-art/stage-4.jpg") center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.journal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0 16px;
}
.journal-save-button{
  min-height:58px;
  font-size:1.06rem;
}
.journal-photo-button{
  min-height:58px;
  background:#fffdf9;
}
.journal-history-card .journal-entry{
  padding:14px 0;
}
.journal-entry-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.entry-metrics{
  color:#71906c;
  font-size:.88rem;
  margin:.15rem 0 .35rem;
}

@media (max-width:760px){
  .journal-photo-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .journal-summary-grid{
    grid-template-columns:1fr;
  }
  .summary-vibe,
  .summary-illustration{
    border-left:0;
    padding-left:0;
    border-top:1px solid rgba(122,137,113,.12);
    padding-top:12px;
  }
}
@media (max-width:520px){
  .journal-moment-grid{
    grid-template-columns:1fr 1fr;
  }
  .metric-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .metric-value{
    justify-self:start;
  }
  .metric-scale{
    gap:8px;
    padding-bottom:18px;
  }
  .journal-actions{
    grid-template-columns:1fr;
  }
}


/* Bloom 3.4: keep the living garden visible while routine steps scroll */
.garden-card {
  position: -webkit-sticky;
  position: sticky;
  top: 8px;
  z-index: 12;
}

@media (max-height: 700px) {
  .garden-card { top: 4px; }
  .garden-stage { max-height: 36vh; }
}