:root{
  --cream:#FBF3E4;
  --paper:#FFF8EB;
  --coral:#FF8A6B;
  --pink:#F4B6C2;
  --hot:#E85A8E;
  --butter:#FFD66B;
  --sun:#FFB347;
  --mint:#9EE6C1;
  --sage:#BBD9A5;
  --leaf:#3F8C6A;
  --deep:#1F3D2A;
  --lav:#C9B6E4;
  --lilac:#E6DAFB;
  --terra:#D86A4A;
  --ink:#2A2622;
  --soft:#5A463C;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent}
html,body{
  margin:0; padding:0; height:100%;
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:
    radial-gradient(900px 600px at 8% -10%, #FFD66B55, transparent 60%),
    radial-gradient(900px 700px at 95% 12%, #E6DAFB88, transparent 55%),
    radial-gradient(900px 700px at 50% 110%, #C9F0D188, transparent 55%),
    var(--cream);
  background-size: 100% 100%;
  overflow:hidden;
}
#root{height:100%}

/* ===== App shell (fullscreen, no mockup) ===== */
.app-shell{
  position:fixed; inset:0;
  background:var(--paper);
  overflow:hidden;
}

/* ===== Screen layers ===== */
.screen-stack{position:absolute; inset:0; overflow:hidden}
.screen{
  position:absolute; inset:0;
  padding:max(16px, env(safe-area-inset-top)) 20px calc(88px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}
.screen.bg-cream{background:var(--cream)}
.screen.bg-rose{background:linear-gradient(180deg,#FFE3EB 0%, var(--paper) 50%)}
.screen.bg-mint{background:linear-gradient(180deg,#DBF3E2 0%, var(--paper) 50%)}
.screen.bg-lilac{background:linear-gradient(180deg,#ECE0FA 0%, var(--paper) 50%)}
.screen.bg-butter{background:linear-gradient(180deg,#FFEFC6 0%, var(--paper) 50%)}
.screen.bg-coral{background:linear-gradient(180deg,#FFD9CF 0%, var(--paper) 50%)}
.screen.bg-leaf{background:linear-gradient(180deg,#3F8C6A 0%, #2C6A50 100%); color:var(--paper)}

/* Page transitions */
@keyframes pageIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.screen{animation: pageIn .35s cubic-bezier(.2,.8,.2,1) both}


/* ===== Typography helpers ===== */
.h-serif{font-family:'DM Serif Display', serif; letter-spacing:-.01em; line-height:1.05; margin:0}
.h-script{font-family:'Caveat', cursive; line-height:1; margin:0}
.h-mono{font-family:'Space Grotesk', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--soft); margin:0}
.txt{font-family:'Space Grotesk', sans-serif; font-size:14px; line-height:1.4; color:var(--soft); margin:0}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:2.5px solid var(--ink); border-radius:18px;
  padding:14px 18px;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px;
  background:var(--paper); color:var(--ink);
  box-shadow:4px 4px 0 0 var(--ink);
  cursor:pointer;
  transition: transform .15s, box-shadow .15s;
  user-select:none;
}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 0 var(--ink)}
.btn.coral{background:var(--coral); color:var(--paper)}
.btn.leaf{background:var(--leaf); color:var(--paper)}
.btn.butter{background:var(--butter)}
.btn.pink{background:var(--pink)}
.btn.hot{background:var(--hot); color:var(--paper)}
.btn.lav{background:var(--lav)}
.btn.dark{background:var(--ink); color:var(--paper)}
.btn.ghost{background:transparent; box-shadow:none; border-style:dashed}
.btn.lg{padding:16px 20px; font-size:15px; border-radius:22px}
.btn.full{width:100%}
.btn.icon{padding:10px; border-radius:14px; width:44px; height:44px}

/* ===== Cards & boxes ===== */
.box{
  border:2.5px solid var(--ink); border-radius:20px;
  background:var(--paper);
  box-shadow:4px 4px 0 0 var(--ink);
  padding:14px;
}
.box.soft{box-shadow:none}
.box.dashed{border-style:dashed; background:transparent; box-shadow:none}

/* ===== Pills ===== */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:2px solid var(--ink); border-radius:999px;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px;
  background:var(--paper); cursor:pointer;
  transition: transform .15s;
  user-select:none;
}
.pill:active{transform: scale(.96)}
.pill.coral{background:var(--coral); color:var(--paper)}
.pill.leaf{background:var(--leaf); color:var(--paper)}
.pill.butter{background:var(--butter)}
.pill.mint{background:var(--mint)}
.pill.pink{background:var(--pink)}
.pill.lav{background:var(--lav)}
.pill.hot{background:var(--hot); color:var(--paper)}
.pill.outline{background:transparent}
.pill.sm{padding:3px 9px; font-size:10px}

/* ===== Tab bar ===== */
.tabbar{
  position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
  max-width:520px; margin-inline:auto;
  background:var(--paper);
  border:2.5px solid var(--ink); border-radius:26px;
  box-shadow:4px 4px 0 0 var(--ink);
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 6px;
  z-index:20;
}
.tabbar .t{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .2s, transform .15s;
  position:relative;
}
.tabbar .t svg{
  width:22px; height:22px; stroke:var(--ink);
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.tabbar .t.active{background:var(--ink)}
.tabbar .t.active svg{stroke:var(--paper)}
.tabbar .t.add{
  width:54px; height:54px; border-radius:18px;
  background: var(--hot); border:2.5px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: translateY(-10px);
}
.tabbar .t.add svg{stroke:var(--paper); width:24px; height:24px}
.tabbar .t.add:active{transform: translateY(-7px) scale(.96)}

/* ===== Sticky header ===== */
.scr-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-top:6px; margin-bottom:18px;
}
.scr-head h1{font-family:'DM Serif Display', serif; font-size:28px; line-height:1.15; margin:0; letter-spacing:-.02em}
.scr-head h1 .em{font-family:'DM Serif Display', serif; font-style:italic; color:var(--hot); font-weight:400; font-size:1em}
.scr-head .em{font-family:'Caveat', cursive; color:var(--hot); font-style:italic; font-size:1.05em}
.scr-head .h-script{font-size:18px; color:var(--soft); display:block; margin-bottom:2px}

/* avatar bubble */
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--pink); border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 0 var(--ink);
  display:grid; place-items:center; font-family:'DM Serif Display',serif; font-size:18px;
  cursor:pointer;
}

/* ===== Sparkles ===== */
.sparkle{
  position:absolute; font-family:'Caveat',cursive; font-weight:700;
  color:var(--hot); font-size:22px; pointer-events:none;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:1; transform: scale(1) rotate(0)}
  40%{opacity:.25; transform: scale(.6) rotate(-15deg)}
  70%{opacity:1; transform: scale(1.15) rotate(10deg)}
}

/* ===== Plant illustrations ===== */
.plant-svg{
  transform-origin: 60px 100px;
  animation: plantSway 5.5s ease-in-out infinite;
}
@keyframes plantSway{
  0%,100%{transform: rotate(-2deg)}
  50%{transform: rotate(2.4deg)}
}

/* ===== Page entry transitions: slide left/right ===== */
.screen.slide-in-r{animation: slideR .35s cubic-bezier(.2,.8,.2,1) both}
.screen.slide-in-l{animation: slideL .35s cubic-bezier(.2,.8,.2,1) both}
.screen.slide-in-up{animation: slideUp .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideR{from{opacity:0; transform: translateX(40px)} to{opacity:1; transform:none}}
@keyframes slideL{from{opacity:0; transform: translateX(-40px)} to{opacity:1; transform:none}}
@keyframes slideUp{from{opacity:0; transform: translateY(40px)} to{opacity:1; transform:none}}

/* ===== Sun halo on onboarding ===== */
.sun-halo{
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE6A8, #FFD66B 55%, #FFB347 100%);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 0 var(--ink);
  animation: haloPulse 3.4s ease-out infinite;
}
@keyframes haloPulse{
  0%,100%{box-shadow: 5px 5px 0 0 var(--ink), 0 0 0 0 #FFD66B66}
  50%{box-shadow: 5px 5px 0 0 var(--ink), 0 0 0 22px #FFD66B00}
}

/* ===== Progress bar ===== */
.progress{
  height:14px; background:rgba(0,0,0,.06); border:2px solid var(--ink);
  border-radius:8px; overflow:hidden; position:relative;
}
.progress > div{
  height:100%; background: linear-gradient(90deg, var(--coral), var(--hot));
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}

/* ===== Confetti ===== */
.confetti{
  position:absolute; inset:0; pointer-events:none; z-index:50; overflow:hidden;
}
.confetti span{
  position:absolute; top:-10px; width:10px; height:14px;
  border:1.5px solid var(--ink);
  animation: confettiFall 2.4s cubic-bezier(.4,.6,.6,1) forwards;
}
@keyframes confettiFall{
  0%{transform: translateY(-20px) rotate(0); opacity:1}
  100%{transform: translateY(900px) rotate(720deg); opacity:.4}
}

/* ===== Toast ===== */
.toast{
  position:absolute; left:50%; bottom:90px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:18px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 0 #FFD66B;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:13px;
  z-index:40;
  animation: toastIn .3s ease, toastOut .3s ease 2s forwards;
  white-space:nowrap;
}
@keyframes toastIn{from{opacity:0; transform: translate(-50%, 20px)} to{opacity:1; transform: translate(-50%,0)}}
@keyframes toastOut{to{opacity:0; transform: translate(-50%, -10px)}}

/* ===== Modal sheet ===== */
.sheet-bg{
  position:absolute; inset:0; background:rgba(42,38,34,.55); z-index:35;
  animation: fade .25s ease both;
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:36;
  background:var(--paper);
  border-top:3px solid var(--ink);
  border-radius:28px 28px 0 0;
  box-shadow:0 -6px 0 0 var(--ink);
  padding:20px 22px 22px;
  animation: sheetUp .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sheetUp{from{transform: translateY(100%)} to{transform: none}}
.sheet .handle{
  width:48px; height:5px; border-radius:3px; background:rgba(42,38,34,.25);
  margin: -8px auto 14px;
}

/* Floating + button on home */
.fab{
  position:absolute; right:16px; bottom:96px;
  width:56px; height:56px; border-radius:20px;
  background:var(--hot); color:var(--paper);
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 0 var(--ink);
  display:grid; place-items:center;
  font-family:'DM Serif Display', serif; font-size:32px; line-height:1;
  cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.fab:active{transform: translate(3px,3px); box-shadow: 1px 1px 0 0 var(--ink)}

/* Grid of plants */
.plant-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.plant-card{
  border:2.5px solid var(--ink); border-radius:20px;
  padding:10px; cursor:pointer;
  box-shadow:4px 4px 0 0 var(--ink);
  position:relative;
  transition: transform .2s, box-shadow .2s;
  overflow:hidden;
}
.plant-card:active{transform: translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink)}
.plant-card .top{height:96px; display:grid; place-items:center; position:relative}
.plant-card h3{
  font-family:'DM Serif Display', serif; font-size:17px; margin:6px 0 0; line-height:1;
}
.plant-card .sub{font-family:'Caveat', cursive; font-size:16px; color:var(--soft); line-height:1}
.plant-card .need{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px; padding:3px 9px; border:1.5px solid var(--ink); border-radius:999px;
  background:var(--paper); font-size:10px; font-weight:700;
  font-family:'Space Grotesk', sans-serif;
}
.plant-card .need.urgent{background:var(--coral); color:var(--paper); border-color:var(--ink)}
.plant-card .need.today{background:var(--butter)}

/* category chips strip */
.chips-row{display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; margin:0 -4px 12px}
.chips-row::-webkit-scrollbar{display:none}
.chips-row .pill{flex-shrink:0}

/* Today strip */
.today-strip{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:2.5px solid var(--ink); border-radius:20px;
  background:var(--mint);
  box-shadow:4px 4px 0 0 var(--ink);
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.today-strip .ic{
  width:42px; height:42px; border-radius:14px;
  background:var(--paper); border:2px solid var(--ink);
  display:grid; place-items:center; flex-shrink:0;
}
.today-strip .grow{flex:1}
.today-strip .grow h3{font-family:'DM Serif Display', serif; font-size:16px; margin:0; line-height:1.1}
.today-strip .grow p{font-size:12px; color:var(--soft); margin:2px 0 0}

/* Detail hero */
.detail-hero{
  position:relative; height:240px;
  display:grid; place-items:center;
  margin-top:8px; margin-bottom:6px;
}
.detail-hero .halo{
  position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE6A8, #FFD66B 55%, #FFB347 100%);
  border:3px solid var(--ink); box-shadow:5px 5px 0 0 var(--ink);
}

/* Detail stat cards */
.stats-row{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin:10px 0}
.stat-card{
  border:2px solid var(--ink); border-radius:16px; padding:10px 6px;
  text-align:center; box-shadow:3px 3px 0 0 var(--ink);
}
.stat-card .v{font-family:'DM Serif Display', serif; font-size:16px; line-height:1; margin-top:2px}
.stat-card .l{font-family:'Caveat', cursive; color:var(--soft); font-size:13px; line-height:1; margin-top:2px}

/* Task row */
.task-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:3px 3px 0 0 var(--ink);
  margin-bottom:8px;
  cursor:pointer;
  transition: background .2s, opacity .3s;
  user-select:none;
}
.task-row.done{opacity:.55}
.task-row .check{
  width:28px; height:28px; border-radius:50%;
  border:2.5px solid var(--ink); background:var(--paper);
  display:grid; place-items:center; flex-shrink:0;
  transition: background .2s;
}
.task-row.done .check{background:var(--ink)}
.task-row.done .check svg{stroke:var(--paper)}
.task-row .grow{flex:1}
.task-row .grow .name{font-family:'DM Serif Display', serif; font-size:15px; line-height:1.1}
.task-row.done .grow .name{text-decoration: line-through}
.task-row .grow .sub{font-size:11px; color:var(--soft); font-weight:600}

/* Journal timeline */
.timeline{position:relative; padding-left:24px; margin-top:14px}
.timeline::before{
  content:''; position:absolute; left:8px; top:6px; bottom:6px;
  width:3px; background:var(--ink); opacity:.25; border-radius:2px;
}
.timeline-item{position:relative; margin-bottom:14px}
.timeline-item::before{
  content:''; position:absolute; left:-22px; top:18px;
  width:14px; height:14px; border-radius:50%;
  background: var(--hot); border:2.5px solid var(--ink);
}
.timeline-item.leaf::before{background:var(--leaf)}
.timeline-item.butter::before{background:var(--butter)}
.timeline-item.lav::before{background:var(--lav)}

/* Form */
.field{margin-bottom:12px}
.field label{display:block; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin-bottom:6px}
.field input, .field textarea, .field select{
  width:100%;
  border:2.5px solid var(--ink); border-radius:14px;
  padding:12px 14px;
  background:var(--paper);
  font-family:'Space Grotesk', sans-serif; font-size:15px; color:var(--ink);
  box-shadow:3px 3px 0 0 var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; box-shadow:3px 3px 0 0 var(--hot);
}

/* Mood picker */
.mood-row{display:flex; gap:10px; flex-wrap:wrap}
.mood-row .m{
  width:42px; height:42px; border-radius:14px;
  border:2.5px solid var(--ink); cursor:pointer;
  box-shadow:2px 2px 0 0 var(--ink);
  transition: transform .15s;
  position:relative;
}
.mood-row .m.sel{
  transform: scale(1.12);
  box-shadow: 2px 2px 0 0 var(--ink), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

/* Step indicator */
.steps{display:flex; gap:6px; justify-content:center; margin-top:14px}
.steps .s{width:24px; height:6px; border-radius:3px; background:rgba(42,38,34,.2); transition: all .3s}
.steps .s.on{width:32px; background:var(--ink)}

/* Viewfinder for add screen */
.viewfinder{
  position:relative; height:280px;
  border:3px dashed var(--ink); border-radius:28px;
  background:linear-gradient(160deg,#FFD9CF 0%, #FFEFC6 60%, #DBF3E2 100%);
  overflow:hidden;
  display:grid; place-items:center;
}
.viewfinder .corner{
  position:absolute; width:28px; height:28px; border:4px solid var(--ink);
}
.viewfinder .corner.tl{top:14px; left:14px; border-right:none; border-bottom:none; border-radius:14px 0 0 0}
.viewfinder .corner.tr{top:14px; right:14px; border-left:none; border-bottom:none; border-radius:0 14px 0 0}
.viewfinder .corner.bl{bottom:14px; left:14px; border-right:none; border-top:none; border-radius:0 0 0 14px}
.viewfinder .corner.br{bottom:14px; right:14px; border-left:none; border-top:none; border-radius:0 0 14px 0}
.viewfinder .scanline{
  position:absolute; left:24px; right:24px; height:3px;
  background: linear-gradient(90deg, transparent, var(--hot), transparent);
  animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan{
  0%{top:14px; opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{top:260px; opacity:0}
}

/* Onboarding hero */
.onb-hero{
  position:relative; height:340px; display:grid; place-items:center;
  margin: 16px 0;
}
.onb-hero .sun-halo{width:260px;height:260px}
.onb-hero .p1{position:absolute; left:-4px; top:60px; z-index:3}
.onb-hero .p2{position:absolute; right:-4px; top:78px; z-index:3}
.onb-hero .p3{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); z-index:4}

/* Big serif */
.huge{
  font-family:'DM Serif Display', serif;
  font-size:36px; line-height:.98; letter-spacing:-.02em; margin:0;
}
.huge .em{font-family:'Caveat', cursive; color:var(--hot); font-style:italic; font-size:1.05em}

/* Toggle row */
.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px;
  border:2px solid var(--ink); border-radius:16px;
  background:var(--paper);
  margin-bottom:8px;
  cursor:pointer;
}
.toggle-row .label{font-family:'DM Serif Display', serif; font-size:15px}
.toggle-row .desc{font-size:12px; color:var(--soft); margin-top:2px}
.toggle{
  width:46px; height:26px; border-radius:14px; border:2px solid var(--ink);
  background:var(--paper); position:relative; flex-shrink:0;
  transition: background .25s;
}
.toggle::after{
  content:''; position:absolute; left:2px; top:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); transition: left .25s;
}
.toggle.on{background:var(--mint)}
.toggle.on::after{left:22px}

/* Plant kind selector */
.kind-row{display:flex; gap:10px; overflow-x:auto; padding:4px 0; margin: 0 -2px}
.kind-row::-webkit-scrollbar{display:none}
.kind-card{
  flex-shrink:0; width:90px; height:104px;
  border:2.5px solid var(--ink); border-radius:18px;
  background:var(--paper);
  box-shadow:3px 3px 0 0 var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:4px 0 8px;
  cursor:pointer;
  position:relative;
  transition: transform .15s;
}
.kind-card.sel{background:var(--butter); transform: translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--ink)}
.kind-card .name{font-family:'DM Serif Display', serif; font-size:12px; line-height:1}

/* Install banner */
.install-banner{
  position:absolute; left:14px; right:14px; bottom:84px;
  background:var(--butter); border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:4px 4px 0 0 var(--ink);
  padding:10px 12px; z-index:25;
  display:flex; align-items:center; gap:10px;
  font-size:12px;
  animation: slideUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.install-banner .grow b{font-family:'DM Serif Display',serif; font-weight:400; font-size:14px; display:block}
.install-banner button{
  border:2px solid var(--ink); border-radius:12px;
  background:var(--ink); color:var(--paper);
  padding:6px 12px; font-weight:700; font-size:12px;
  font-family:'Space Grotesk', sans-serif;
  cursor:pointer;
}
.install-banner .x{
  background:transparent; color:var(--ink); border:none;
  font-size:18px; line-height:1; padding:4px 8px;
}