/* ============================================================
   GROW & GLOW — styles.css
   Palette: cream paper, deep sage green, warm terracotta, muted gold
   Type: "Fraunces" (display serif) + "Manrope" (body/UI sans)
   ============================================================ */

:root{
  --cream:        #F6F2E9;
  --cream-2:      #EFEADD;
  --paper:        #FFFFFF;
  --ink:          #2B2A22;
  --ink-soft:     #6B6A5D;
  --ink-faint:    #9A9787;

  --green-900:    #2E4436;
  --green-700:    #3E5A47;
  --green-500:    #6C8C6F;
  --green-200:    #D9E3D4;
  --green-100:    #ECF1E8;

  --terracotta:   #C9705C;
  --terracotta-200:#F1DAD2;

  --gold:         #B8923F;
  --gold-200:     #EEE3C6;

  --line:         #E3DCC9;
  --shadow:       0 10px 30px -12px rgba(46,68,54,0.25);
  --shadow-soft:  0 4px 14px -6px rgba(46,68,54,0.18);

  --radius-lg:    28px;
  --radius-md:    18px;
  --radius-sm:    12px;
  --radius-pill:  999px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream-2);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; color:var(--green-900); }
p{ margin:0; }
button{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green-200); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Phone shell ---------- */
.app-shell{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh; /* the real visible height on phones (excludes browser bars) */
  background:var(--cream);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (min-width:431px){
  body{ display:flex; justify-content:center; padding:0; background:var(--cream-2); }
  .app-shell{ min-height:100vh; box-shadow:none; }
}

/* ============ DESKTOP LAYOUT (sidebar + widgets panel) ============ */
.desktop-layout{ display:block; width:100%; }
.desktop-sidebar{ display:none; }
.desktop-widgets{ display:none; }

@media (min-width:1100px){
  body{ align-items:flex-start; }
  .desktop-layout{
    display:grid; grid-template-columns:240px minmax(420px,680px) 360px;
    gap:24px; max-width:1600px; margin:0 auto; padding:24px 32px; align-items:start;
  }
  .app-shell{ max-width:none; margin:0; min-height:calc(100vh - 48px); border-radius:20px; box-shadow:0 10px 34px rgba(0,0,0,0.07); }
  .bottom-nav{ display:none !important; }

  .desktop-sidebar{
    display:flex; flex-direction:column; position:sticky; top:24px;
    background:var(--paper); border-radius:20px; padding:18px 12px; box-shadow:var(--shadow-soft);
    height:calc(100vh - 48px); box-sizing:border-box;
  }
  .desktop-sidebar-brand{ display:flex; align-items:center; gap:9px; padding:8px 10px 22px; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--green-900); }
  .desktop-sidebar-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
  .desktop-nav-item{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--radius-md); color:var(--ink-soft); font-weight:600; font-size:14px; cursor:pointer; }
  .desktop-nav-item:hover{ background:var(--cream-2); }
  .desktop-nav-item.active{ background:var(--green-100); color:var(--green-900); }
  .desktop-nav-item svg{ width:19px; height:19px; flex-shrink:0; }
  .desktop-sidebar-user{ display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--line); margin-top:8px; cursor:pointer; }
  .desktop-sidebar-user-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
  .desktop-sidebar-user-plan{ font-size:11.5px; color:var(--ink-faint); }

  .desktop-widgets{ display:flex; flex-direction:column; gap:16px; position:sticky; top:24px; }
  .dw-card{ background:var(--paper); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-soft); }
  .dw-card-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-faint); margin-bottom:12px; }
  .dw-card-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .dw-card-top-row .dw-card-label{ margin-bottom:0; }
  .dw-streak-label{ font-size:12px; font-weight:700; color:var(--terracotta); }
  .dw-week-detail{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .dw-week-detail-label{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:8px; }
  .dw-week-detail-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); padding:3px 0; }
  .dw-week-detail-item.done{ color:var(--green-700); font-weight:600; }
  .dw-growth-row{ display:flex; align-items:center; gap:18px; }
  .dw-growth-ring{ width:80px; height:80px; flex-shrink:0; }
  .dw-growth-legend{ display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--ink); }
  .dw-growth-legend-item{ display:flex; align-items:center; gap:8px; }
  .dw-growth-legend-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .dw-coffee-card{ display:flex; align-items:center; gap:14px; background:var(--terracotta-200); border-radius:var(--radius-lg); padding:16px; cursor:pointer; }
  .dw-coffee-card h4{ font-size:14.5px; margin:0 0 2px; }
  .dw-coffee-card p{ font-size:12px; color:var(--ink-soft); margin:0; }
  .dw-circle-card .post-name{ font-size:13.5px; }
  .dw-circle-card .post-time{ font-size:11px; }
  .dw-circle-card .post-media{ height:120px; margin-top:8px; }
  .dw-circle-card .post-text{ font-size:12.5px; margin-top:8px; }

  .desktop-layout.no-widgets{ grid-template-columns:240px minmax(420px, 900px); }

  .desktop-layout.pre-auth{ grid-template-columns:1fr; max-width:430px; }
  .desktop-layout.pre-auth .desktop-sidebar,
  .desktop-layout.pre-auth .desktop-widgets{ display:none; }
}

.status-spacer{ height:14px; }

/* ---------- Screens ---------- */
.screen{
  display:none;
  flex-direction:column;
  flex:1;
  min-height:0;
  animation:fadeIn .35s ease;
}
.screen.active{ display:flex; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.screen-scroll{
  flex:1;
  overflow-y:auto;
  /* Bottom space so the last item can scroll clear of the fixed bottom
     nav, plus the phone's home-indicator strip on notched phones. */
  padding:0 22px calc(100px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.screen-scroll::-webkit-scrollbar{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:15.5px;
  padding:16px 20px; border-radius:var(--radius-pill);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  width:100%;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--green-900); color:var(--cream); box-shadow:var(--shadow-soft); }
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; }
.btn-secondary{ background:var(--cream); color:var(--green-900); border:1.5px solid var(--line); }
.btn-ghost{ background:transparent; color:var(--ink-soft); font-weight:600; text-decoration:underline; }
.btn-sm{ padding:10px 16px; font-size:13.5px; width:auto; }
.btn-icon{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.home-avatar-btn{ position:relative; }
.home-avatar-btn img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}

/* ---------- Icons ---------- */
.icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-fill{ fill:currentColor; stroke:none; }

/* ============ SPLASH ============ */
.splash-actions{ padding:22px 26px 30px; display:flex; flex-direction:column; gap:12px; background:var(--cream); }

/* ============ TOP BAR (generic) ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 22px 6px;
}
.topbar h1{ font-size:24px; }
.topbar .sub{ color:var(--ink-soft); font-size:13.5px; margin-top:2px; }

/* ============ ONBOARDING ============ */
.onb-head{ padding:calc(34px + env(safe-area-inset-top)) 26px 10px; text-align:center; }
.onb-head h1{ font-size:26px; line-height:1.25; }
.onb-head p{ color:var(--ink-soft); font-size:14px; margin-top:10px; }

.goal-card{
  display:flex; align-items:center; gap:14px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:16px; margin-bottom:12px; cursor:pointer; transition:border-color .15s, background .15s;
}
.goal-card.selected{ border-color:var(--green-700); background:var(--green-100); }
.goal-emoji{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.goal-text h4{ font-size:15.5px; }
.goal-text p{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.goal-check{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.goal-card.selected .goal-check{ background:var(--green-700); border-color:var(--green-700); color:#fff; }

.journey-teaser{ margin-top:18px; padding:18px; background:var(--green-100); border-radius:var(--radius-md); text-align:center; }
.journey-teaser h4{ font-size:15px; }
.journey-teaser p{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.onb-footer{ padding:16px 26px 28px; background:var(--cream); }

/* ============ HOME / CHALLENGES ============ */
.date-pill{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.routine-header-sub{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
.routine-add-btn-v2{ width:44px; height:44px; border-radius:50%; background:var(--green-900); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.challenge-row{
  display:flex; align-items:center; gap:14px;
  background:var(--paper); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px; box-shadow:var(--shadow-soft);
  cursor:pointer; border:1.5px solid transparent;
}
.chal-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chal-body{ flex:1; min-width:0; }
.chal-body h4{ font-size:15px; }
.chal-body p{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.tag{
  display:inline-block; margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:.3px;
  padding:3px 10px; border-radius:var(--radius-pill); text-transform:uppercase;
}
.tag-physical{ background:var(--green-200); color:var(--green-900); }
.tag-mental{ background:var(--terracotta-200); color:#8A4536; }
.tag-spiritual{ background:var(--gold-200); color:#7A6122; }

.chal-check{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.chal-check.checked{ background:var(--green-700); border-color:var(--green-700); }

.view-all-link{ display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 0 6px; color:var(--green-700); font-weight:700; font-size:14px; cursor:pointer; }

.category-complete-banner{
  background:var(--green-100); border:1.5px solid var(--green-200); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:14px; font-size:13px; color:var(--green-900); line-height:1.5;
}

.section-label{ font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-faint); font-weight:700; margin:22px 0 12px; }

/* ============ BOTTOM NAV ============ */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px;
  display:flex; background:var(--paper); border-top:1px solid var(--line);
  padding:9px 2px calc(9px + env(safe-area-inset-bottom));
  z-index:20;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:9.5px; font-weight:600;
  padding:4px 1px;
}
.nav-item.active{ color:var(--green-700); }
.nav-item .icon{ width:19px; height:19px; }
.nav-icon-wrap{ position:relative; display:inline-flex; }
.nav-dot{
  position:absolute; top:-3px; right:-4px; width:8px; height:8px; border-radius:50%;
  background:var(--terracotta); border:1.5px solid var(--paper);
}

/* ============ CHALLENGE DETAIL ============ */
.detail-topbar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
}
.detail-topbar-title{ font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--green-900); text-align:center; }
.detail-hero{
  height:220px; border-radius:0 0 32px 32px; position:relative; overflow:hidden; flex-shrink:0;
}
.detail-hero svg{ width:100%; height:100%; display:block; }
.detail-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-card{ margin:-30px 20px 0; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px; position:relative; z-index:2; }
.detail-card h2{ font-size:21px; margin-top:12px; }
.detail-card .desc{ color:var(--ink-soft); font-size:14px; margin-top:8px; line-height:1.5; }
.detail-tags-row{ display:flex; gap:8px; align-items:center; }
.tag-points{
  display:inline-flex; align-items:center; gap:3px; margin-top:8px; font-size:10.5px; font-weight:700;
  padding:3px 10px; border-radius:var(--radius-pill); background:var(--cream-2); color:var(--ink-soft);
}
.howto{ margin-top:18px; }
.howto h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin-bottom:10px; }
.howto-item{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:14px; color:var(--ink); }
.howto-item .icon{ color:var(--green-700); width:18px; height:18px; margin-top:2px; }
.reflect-box{ margin-top:18px; background:var(--green-100); border-radius:var(--radius-md); padding:16px; }

.evidence-row{ display:flex; gap:10px; }
.evidence-box{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:16px 10px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.evidence-box .icon{ width:22px; height:22px; color:var(--green-700); }
.evidence-box.filled{ background:var(--green-100); border-color:var(--green-500); color:var(--green-900); }

.challenge-feeling-row{ display:flex; justify-content:space-between; gap:4px; }
.feeling-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer; padding:6px 2px; border-radius:var(--radius-sm);
  font-family:inherit; font-size:10px; font-weight:600; color:var(--ink-faint);
}
.feeling-emoji{
  width:38px; height:38px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center;
  justify-content:center; font-size:19px; transition:transform .15s, background .15s;
}
.feeling-btn.active .feeling-emoji{ background:var(--green-200); transform:scale(1.1); }
.feeling-btn.active{ color:var(--green-900); }
.reflect-box h4{ font-size:13.5px; margin-bottom:4px; }
.reflect-box p{ font-size:12.5px; color:var(--ink-soft); }
.detail-footer{ padding:18px 20px 26px; }

.ideas-box{ margin-top:18px; }
.ideas-box h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin-bottom:10px; }
.idea-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.idea-chip{
  display:inline-block; font-size:12.5px; font-weight:600; color:var(--green-900);
  background:var(--green-100); border:1px solid var(--green-200); border-radius:var(--radius-pill);
  padding:7px 13px; line-height:1.3;
}

/* ============ JOURNAL ============ */
.seg-toggle{ display:flex; background:var(--cream-2); border-radius:var(--radius-pill); padding:4px; margin:16px 0; }
.seg-btn{ position:relative; flex:1; border:none; background:none; padding:9px 4px; border-radius:var(--radius-pill); font-weight:700; font-size:12px; color:var(--ink-soft); cursor:pointer; }
.seg-btn.active{ background:var(--green-900); color:var(--cream); }
.seg-dot{
  display:none; position:absolute; top:6px; right:10px; width:7px; height:7px; border-radius:50%;
  background:var(--terracotta); border:1.5px solid var(--paper);
}

.prompt-card{ background:var(--paper); border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-soft); margin-bottom:14px; }
.settings-card{ background:var(--paper); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-soft); margin-bottom:14px; }
.prompt-label{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--green-700); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.prompt-label .icon{ width:16px; height:16px; }
.prompt-q{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:12px; }
textarea.journal-input{
  width:100%; min-height:110px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px; font-family:inherit; font-size:14px; resize:vertical; background:var(--cream);
}
.prompt-footer{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:10px; }
.saved-tag{ font-size:12.5px; color:var(--green-700); font-weight:700; display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .3s; }
.saved-tag.show{ opacity:1; }

.entry-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; position:absolute; top:10px; right:10px; }

/* ============ JOURNAL "YOUR THREAD" ============ */
.journal-thread-subtitle{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; margin-bottom:18px; }
.journal-mood-chart{ background:var(--paper); border-radius:var(--radius-lg); padding:18px 18px 14px; box-shadow:var(--shadow-soft); margin-bottom:22px; }
.journal-mood-bars{ display:flex; align-items:flex-end; gap:5px; height:90px; }
.journal-mood-bar{ flex:1; border-radius:5px; min-width:0; }
.journal-mood-chart-labels{ display:flex; justify-content:space-between; margin-top:10px; font-size:10.5px; font-weight:700; letter-spacing:0.4px; color:var(--ink-faint); }

.journal-timeline-item{ display:flex; gap:14px; position:relative; }
.journal-timeline-item::before{
  content:''; position:absolute; left:5px; top:22px; bottom:-10px; width:1.5px; background:var(--line);
}
.journal-timeline-item:last-child::before{ display:none; }
.journal-timeline-dot{ width:11px; height:11px; border-radius:50%; margin-top:20px; flex-shrink:0; z-index:1; }
.journal-entry-card{ position:relative; flex:1; min-width:0; background:var(--paper); border-radius:var(--radius-md); padding:16px 40px 16px 16px; margin-bottom:16px; box-shadow:var(--shadow-soft); cursor:pointer; }
.journal-entry-meta{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-faint); margin-bottom:6px; }
.journal-entry-title{ font-family:var(--font-display); font-size:17px; font-weight:700; margin:0 0 6px; }
.journal-entry-text{ font-size:13.5px; line-height:1.5; color:var(--ink); margin:0; }
.entry-photo{ width:100%; max-height:220px; object-fit:cover; border-radius:var(--radius-sm); margin-top:10px; display:block; background:var(--cream-2); }

.journal-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.journal-photo-grid-item{ position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--cream-2); cursor:pointer; }
.journal-photo-grid-item::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:45%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); }
.journal-photo-grid-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.journal-photo-grid-label{ position:absolute; left:8px; bottom:8px; font-size:10px; font-weight:700; letter-spacing:0.4px; color:#fff; z-index:1; }

.empty-state{ text-align:center; padding:30px 10px; color:var(--ink-faint); font-size:13.5px; }

/* ============ JOURNAL — Prompts tab ============ */
.journal-header-sub{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.prompt-card-v2{ background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); margin-top:16px; }
.prompt-card-photo-wrap{ position:relative; height:130px; }
.prompt-card-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.prompt-card-photo-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%); }
.prompt-card-day-label{ position:absolute; left:16px; bottom:12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:#fff; }
.prompt-card-body{ padding:18px; }
.prompt-shuffle-link{ display:flex; align-items:center; gap:6px; margin:12px auto 0; background:none; border:none; color:var(--terracotta); font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font-body); }
.prompt-suggestion-chip{ display:flex; align-items:center; gap:12px; background:var(--cream-2); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; cursor:pointer; font-size:14px; color:var(--ink); }
.prompt-suggestion-icon{ width:36px; height:36px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.prompt-history-card{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-soft); cursor:pointer; }
.prompt-history-card-body h4{ font-size:14.5px; margin:0 0 3px; }
.prompt-history-card-body p{ font-size:12px; color:var(--ink-faint); margin:0; }

/* ============ JOURNAL — My Journal tab ============ */
.write-entry-cta{ display:flex; align-items:center; gap:14px; background:var(--green-900); border-radius:var(--radius-lg); padding:14px; margin:16px 0 18px; cursor:pointer; }
.write-entry-cta-thumb{ width:54px; height:54px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.write-entry-cta-body{ flex:1; min-width:0; }
.write-entry-cta-body h3{ color:#fff; font-size:17px; margin:0 0 3px; }
.write-entry-cta-body p{ color:rgba(255,255,255,0.72); font-size:12.5px; margin:0; }
.write-entry-cta-btn{ width:40px; height:40px; border-radius:50%; background:var(--terracotta); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }

.journal-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.journal-featured-card{ position:relative; background:var(--paper); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-soft); margin-bottom:14px; }
.journal-featured-menu{ position:absolute; top:12px; right:12px; background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; }
.journal-featured-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-right:24px; margin-bottom:6px; }
.journal-prompt-category{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-faint); flex-shrink:0; }
.journal-read-all{ display:block; background:none; border:none; color:var(--terracotta); font-weight:700; font-size:13px; margin-top:10px; padding:0; cursor:pointer; font-family:var(--font-body); }

.journal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.journal-grid-card{ background:var(--cream-2); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; }
.journal-grid-card.has-photo{ background:var(--paper); }
.journal-grid-photo{ width:100%; height:100px; object-fit:cover; display:block; background:var(--cream-2); }
.journal-grid-body{ padding:12px; }
.journal-grid-body p{ font-size:12.5px; line-height:1.4; color:var(--ink); margin-top:4px; }

/* ============ COMMUNITY ============ */
.post-card{ background:var(--paper); border-radius:var(--radius-lg); padding:16px 0; margin-bottom:14px; box-shadow:var(--shadow-soft); overflow:hidden; }
.post-head-row{ padding:0 16px; }
.post-text{ padding:0 16px; }
.post-actions{ padding:0 16px; }
.post-media{ margin-top:12px; width:100%; height:220px; border-radius:0; display:block; object-fit:cover; background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.post-head{ display:flex; align-items:center; gap:10px; }
.avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; flex-shrink:0; overflow:hidden; }
.avatar.avatar-photo{ background:var(--cream-2); }
.avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-name{ font-size:14px; font-weight:700; }
.post-time{ font-size:11.5px; color:var(--ink-faint); }
.post-tag-pill{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.4px; color:var(--green-700); background:var(--green-100); border-radius:999px; padding:3px 9px; margin-top:2px; }
.post-text{ font-size:14px; margin-top:10px; line-height:1.5; }
.post-completed-heading{ font-weight:700; color:var(--green-900); }
.post-note{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5; font-style:italic; }
.post-media-wrap{ position:relative; }
.post-media-edit-btn{
  position:absolute; bottom:8px; right:8px; display:flex; align-items:center; gap:5px;
  background:rgba(43,42,34,0.72); color:#fff; border:none; border-radius:var(--radius-pill);
  padding:6px 12px 6px 9px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.post-media-edit-btn .icon{ color:#fff; }
.post-head-row{ display:flex; align-items:center; gap:10px; }
.post-namewrap{ flex:1; min-width:0; }
.post-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; flex-shrink:0; }

/* share box media preview — grid of thumbnails, each individually removable */
#mediaPreviewWrap{ margin-top:12px; }
.media-preview-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.media-preview-item{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--cream-2); }
.media-preview-item img, .media-preview-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.media-preview-item-single{ grid-column:1 / -1; aspect-ratio:16/10; }
.media-remove-btn{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  background:rgba(43,42,34,0.7); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* Single-photo preview — still used by the challenge-completion photo
   picker, which stays single-photo (one photo per completed challenge). */
.media-preview-box{ position:relative; width:100%; height:160px; border-radius:14px; overflow:hidden; background:var(--cream-2); display:flex; align-items:center; justify-content:center; }
.media-preview-box img, .media-preview-box video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Photo collage on a post — 1/2/3-column grid depending on how many photos */
.photo-collage{ display:grid; gap:2px; margin-top:12px; border-radius:0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.photo-collage-1{ grid-template-columns:1fr; }
.photo-collage-grid2{ grid-template-columns:repeat(2, 1fr); }
.photo-collage-grid3{ grid-template-columns:repeat(3, 1fr); }
.photo-collage-item{ position:relative; aspect-ratio:1; cursor:pointer; background:var(--cream-2); }
.photo-collage-1 .photo-collage-item{ aspect-ratio:16/10; }
.photo-collage-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-collage-loading{ min-height:120px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; }

/* Lightbox — full-screen photo viewer */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:200;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image{ max-width:92vw; max-height:82vh; object-fit:contain; border-radius:6px; }
.lightbox-close{
  position:absolute; top:calc(18px + env(safe-area-inset-top)); right:18px; background:rgba(255,255,255,0.15); border:none;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.15); border:none;
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-prev{ left:14px; }
.lightbox-next{ right:14px; }
.lightbox-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.15); color:#fff; font-size:12.5px; font-weight:700;
  padding:5px 14px; border-radius:var(--radius-pill);
}

/* visibility toggle */
.visibility-toggle{ display:flex; gap:8px; margin-top:12px; }
.vis-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line); background:var(--cream); color:var(--ink-soft);
  padding:9px 8px; border-radius:var(--radius-pill); font-weight:700; font-size:12.5px; cursor:pointer;
}
.vis-btn.active{ background:var(--green-900); border-color:var(--green-900); color:var(--cream); }
.visibility-hint{ font-size:11.5px; color:var(--ink-faint); margin-top:8px; text-align:center; }
.push-hint{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.4; }
.private-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color:var(--ink-soft); background:var(--cream-2); padding:3px 9px; border-radius:var(--radius-pill);
}
.post-actions{ display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--ink-soft); font-size:13px; }
.post-actions button{ background:var(--paper); border:1.5px solid var(--line); border-radius:999px; display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink-soft); padding:7px 14px; font-weight:700; font-size:13px; }
.post-actions button .icon{ width:15px; height:15px; }
.post-actions button.liked{ background:var(--terracotta-200); border-color:var(--terracotta-200); color:var(--terracotta); }

.comment-thread{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.comment-row{ font-size:13px; color:var(--ink); margin-bottom:7px; line-height:1.4; }
.comment-row b{ color:var(--green-900); margin-right:4px; }
.comment-row.comment-empty{ color:var(--ink-faint); font-style:italic; }
.comment-input-row{ display:flex; gap:8px; margin-top:8px; }
.comment-input-row input{
  flex:1; border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:8px 14px; font-family:inherit; font-size:13px; background:var(--cream);
}
.comment-input-row button{
  background:var(--green-900); color:var(--cream); border:none; border-radius:var(--radius-pill);
  padding:8px 16px; font-weight:700; font-size:13px; cursor:pointer;
}

/* ============ YOUR CIRCLE: invite/request rows ============ */
.access-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--paper); border-radius:var(--radius-md); margin-bottom:8px; box-shadow:var(--shadow-soft);
}
.access-name{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.access-username{ font-weight:500; color:var(--ink-faint); font-size:12px; }
.access-actions{ display:flex; gap:6px; }
.access-accept, .access-decline, .access-remove{
  border:none; border-radius:var(--radius-pill); padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
}
.access-accept{ background:var(--green-700); color:#fff; }
.access-decline, .access-remove{ background:var(--cream); color:var(--ink-soft); border:1px solid var(--line); }
.access-pending-label{
  font-size:11.5px; font-weight:700; color:var(--ink-faint); background:var(--cream-2);
  padding:5px 11px; border-radius:var(--radius-pill);
}
.post-media-unavailable{
  margin:12px 16px 0; padding:14px; border-radius:14px; background:var(--cream-2);
  color:var(--ink-soft); font-size:12.5px; text-align:center; line-height:1.4;
}

/* ---------- My Posts scrapbook grid ---------- */
.gallery-month-label{ display:flex; align-items:center; gap:10px; margin:22px 0 12px; }
.gallery-month-label span{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-faint); flex-shrink:0; }
.gallery-month-label::after{ content:''; flex:1; height:1px; background:var(--line); }
.posts-gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.gallery-tile{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--cream-2); cursor:pointer; }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-tile-lg{ grid-row:span 2; grid-column:span 2; }
.gallery-tile-count{
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.55); color:#fff;
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--radius-pill); z-index:1;
}
.gallery-tile-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%); }
.gallery-tile-tag{
  position:absolute; left:12px; bottom:36px; z-index:1; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.85);
}
.gallery-tile-caption{ position:absolute; left:12px; bottom:12px; right:12px; z-index:1; color:#fff; font-size:14.5px; font-weight:600; line-height:1.3; }
.scrapbook-video{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--green-700), var(--green-900));
}
.scrapbook-loading{ width:100%; height:100%; background:var(--cream-2); }
.scrapbook-back{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  color:var(--green-700); font-weight:700; font-size:13px; padding:8px 4px; margin-bottom:6px;
}

.community-add-btn{
  width:40px; height:40px; border-radius:50%;
  background:var(--green-900); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(46,68,54,0.35);
  flex-shrink:0;
}

/* ============ BUSINESS ACCOUNTS & EVENTS ============ */
.category-pin-row{ cursor:pointer; }
.category-pin-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.access-name{ display:flex; flex-direction:column; }
.access-name .access-username{ font-size:11.5px; margin-top:1px; }
.category-checkbox-group{ display:flex; flex-direction:column; gap:8px; }
.category-checkbox-row{
  display:flex; align-items:center; gap:10px; background:var(--cream-2); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:13.5px; font-weight:600; cursor:pointer;
}
.category-checkbox-row input{ width:17px; height:17px; accent-color:var(--green-700); cursor:pointer; }

.business-post-card{ border-left:3px solid var(--gold); }
.rsvp-row{ display:flex; gap:8px; margin-top:12px; }
.rsvp-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:8px 6px; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.rsvp-btn.active{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.category-back-btn{ margin-top:4px; }

.saved-event-card{
  display:flex; align-items:center; gap:12px; background:var(--paper); border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow-soft);
}
.post-photo-thumb{
  width:52px; height:52px; border-radius:var(--radius-sm); background-size:cover; background-position:center;
  flex-shrink:0; background-color:var(--cream-2);
}
.upcoming-event-card{
  background:var(--paper); border-radius:var(--radius-md); padding:14px; margin-bottom:10px; box-shadow:var(--shadow-soft);
}

/* ============ MODAL (RSVP summary) ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(43,42,34,0.55); z-index:150;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-card{
  background:var(--paper); border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:430px;
  max-height:80vh; overflow-y:auto; padding:20px 20px calc(24px + env(safe-area-inset-bottom));
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal-head h4{ font-size:17px; margin:0; }
.modal-empty{ font-size:13px; color:var(--ink-faint); margin:4px 0 14px; }
.rsvp-summary-count{ display:flex; gap:10px; margin-top:8px; }
.rsvp-summary-count > div{ flex:1; background:var(--green-100); border-radius:var(--radius-md); padding:12px; text-align:center; }
.rsvp-summary-count b{ display:block; font-size:20px; color:var(--green-900); }
.rsvp-summary-count span{ font-size:11.5px; color:var(--ink-soft); }
.rsvp-person-row{
  font-size:13.5px; padding:9px 12px; background:var(--cream-2); border-radius:var(--radius-sm); margin-bottom:6px;
}

/* ============ REWARDS ============ */
.rewards-hero{ text-align:center; padding:26px 10px 10px; }
.coffee-badge{ width:88px; height:88px; margin:0 auto 14px; border-radius:50%; background:var(--gold-200); display:flex; align-items:center; justify-content:center; }
.rewards-card{ background:var(--paper); border-radius:var(--radius-lg); padding:22px; text-align:center; box-shadow:var(--shadow); margin-top:6px; }
.rewards-card h2{ font-size:19px; }
.progress-dots{ display:flex; justify-content:center; gap:7px; margin:18px 0 10px; flex-wrap:wrap; }
.dot{ width:16px; height:16px; border-radius:50%; background:var(--cream-2); border:1.5px solid var(--line); }
.dot.filled{ background:var(--green-700); border-color:var(--green-700); }
.progress-caption{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.claim-qr-box{
  margin-top:16px; background:var(--green-100); border:1.5px solid var(--green-200);
  border-radius:var(--radius-lg); padding:20px; text-align:center;
}
.claim-qr-box h4{ font-size:15px; margin-bottom:12px; }
.claim-qr-canvas{ display:flex; justify-content:center; margin:0 auto 12px; }
.claim-qr-canvas svg{ width:150px; height:150px; }
.claim-qr-code{ font-size:13px; font-weight:700; color:var(--green-900); letter-spacing:.5px; }
.claim-qr-hint{ font-size:12px; color:var(--ink-soft); margin-top:6px; margin-bottom:14px; }

/* ============ PROFILE ============ */
.profile-hero-v3{ position:relative; padding:calc(14px + env(safe-area-inset-top)) 20px 20px; overflow:hidden; min-height:210px; display:flex; flex-direction:column; justify-content:flex-end; }
.profile-hero-v3-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.profile-hero-v3-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,0.15) 0%, rgba(10,10,8,0.55) 100%); z-index:0; }
.profile-bell-btn-v3{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:20px; z-index:2; background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); }
.profile-hero-v3-content{ position:relative; z-index:1; }
.profile-hero-v3-content.profile-hero-v3-centered{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; }
.profile-hero-v3-row{ display:flex; align-items:center; gap:12px; }
.profile-hero-v3-namewrap-centered{ margin-top:12px; }
.profile-avatar-wrap{ position:relative; flex-shrink:0; }
.profile-avatar{ width:56px; height:56px; border-radius:50%; background:var(--green-200); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(255,255,255,0.5); }
.profile-avatar.profile-avatar-lg{ width:90px; height:90px; border-width:3px; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-edit-btn{
  position:absolute; bottom:-2px; right:-2px; width:22px; height:22px; border-radius:50%;
  background:var(--green-900); border:2px solid var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.profile-hero-v3-namewrap{ flex:1; min-width:0; }
.profile-hero-v3 h2{ font-size:21px; color:#fff; margin:0; }
.profile-name-row{ display:flex; align-items:center; gap:8px; }
.profile-edit-btn{
  background:none; border:none; color:rgba(255,255,255,0.75); cursor:pointer; padding:2px;
  display:inline-flex; align-items:center; flex-shrink:0;
}
.profile-username{ font-size:12.5px; color:rgba(255,255,255,0.72); margin-top:1px; }
.profile-tagline{ font-size:15px; font-weight:700; margin-top:5px; }
.profile-joindate{ font-size:11.5px; color:rgba(255,255,255,0.65); margin-top:2px; }
.form-field-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint); display:block; margin-bottom:4px; }

.profile-hero-v3-stats{ position:relative; z-index:1; display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; gap:8px; margin-top:16px; }
.profile-hero-v3-pill{ flex:1 1 0; min-width:0; background:rgba(20,20,15,0.45); border-radius:var(--radius-sm); padding:9px 6px; text-align:center; }
.profile-hero-v3-pill b{ display:block; font-family:var(--font-display); font-size:19px; font-weight:700; color:#fff; }
.profile-hero-v3-pill span{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:rgba(255,255,255,0.8); }

.section-label-row{ display:flex; align-items:center; justify-content:space-between; margin:24px 0 10px; }
.achievements-row{ display:flex; gap:10px; margin-bottom:18px; }
.achievement-badge-v2{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--cream-2); border-radius:var(--radius-md); padding:14px 8px; text-align:center; }
.achievement-badge-v2.unlocked{ background:var(--green-700); }
.achievement-icon-v2{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--paper);
}
.achievement-badge-v2.unlocked .achievement-icon-v2{ background:rgba(255,255,255,0.2); }
.achievement-title-v2{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:var(--ink-soft); }
.achievement-badge-v2.unlocked .achievement-title-v2{ color:#fff; }
.achievement-progress-v2{ font-size:10px; color:var(--ink-faint); }
.achievement-badge-v2.unlocked .achievement-progress-v2{ color:rgba(255,255,255,0.75); }

.growth-card{ background:var(--paper); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-soft); margin-bottom:16px; }
.growth-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.growth-bar-row:last-of-type{ margin-bottom:14px; }
.growth-bar-label{ width:62px; flex-shrink:0; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:var(--ink-soft); }
.growth-bar-track{ flex:1; height:8px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.growth-bar-fill{ height:100%; border-radius:999px; transition:width .3s ease; }
.growth-bar-value{ width:20px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink); flex-shrink:0; }
.growth-insight{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; padding-top:12px; border-top:1px solid var(--line); margin:0; }

.coffee-reward-card{ display:flex; align-items:center; gap:14px; background:var(--gold-200); border-radius:var(--radius-lg); padding:16px; margin-bottom:6px; cursor:pointer; }
.coffee-reward-icon{ width:44px; height:44px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.coffee-reward-card h4{ font-size:15px; margin:0 0 2px; }
.coffee-reward-card p{ font-size:12px; color:var(--ink-soft); margin:0; }

.guest-upgrade-banner{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--gold-200); border-radius:var(--radius-md); padding:13px 14px; margin-bottom:16px;
}
.guest-upgrade-banner span{ flex:1; font-size:12.5px; color:var(--ink); line-height:1.4; font-weight:600; }
.list-row{ display:flex; align-items:center; gap:14px; background:var(--paper); border-radius:var(--radius-md); padding:15px 16px; margin-bottom:10px; box-shadow:var(--shadow-soft); cursor:pointer; }
.list-row .icon{ color:var(--green-700); }
.list-row span{ flex:1; font-size:14.5px; font-weight:600; }
.stat-row{ display:flex; gap:10px; margin:16px 0; }
.stat-box{ flex:1; background:var(--green-100); border-radius:var(--radius-md); padding:14px; text-align:center; }
.stat-box b{ display:block; font-size:20px; color:var(--green-900); font-family:var(--font-display); }
.stat-box span{ font-size:11px; color:var(--ink-soft); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:110px; transform:translateX(-50%) translateY(20px);
  background:var(--green-900); color:var(--cream); padding:12px 20px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:all .3s ease; z-index:100;
  max-width:80%; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ HOME HERO (real photography) ============ */
.home-hero{ position:relative; width:100%; height:290px; overflow:hidden; }
.home-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,10,0.03) 0%, rgba(20,18,10,0.1) 55%, rgba(18,16,8,0.65) 100%); }
.home-hero-avatar-btn{ position:absolute; top:18px; right:18px; z-index:2; background:rgba(255,255,255,0.85); backdrop-filter:blur(4px); }
.home-hero-text{ position:absolute; left:22px; right:22px; bottom:22px; z-index:1; }
.home-hero-text h1{ font-family:var(--font-display); font-size:30px; font-weight:700; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.3); margin:0; line-height:1.1; }
.home-hero-text p{ font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.92); margin-top:6px; text-shadow:0 1px 8px rgba(0,0,0,0.25); }

/* ============ MOOD CHECK-IN (Home) ============ */
.mood-card{ background:var(--paper); border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-soft); margin-bottom:16px; }
.mood-question{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.mood-options{ display:flex; justify-content:space-between; }
.mood-btn{ border:none; background:var(--cream-2); font-size:22px; width:46px; height:46px; border-radius:50%; cursor:pointer; transition:transform .15s; }
.mood-btn:hover{ transform:scale(1.1); }
.mood-done{ display:none; align-items:center; justify-content:space-between; font-size:14px; }
.mood-done span{ font-weight:600; color:var(--ink); }
.mood-done button{ background:none; border:none; color:var(--green-700); font-weight:700; font-size:13px; cursor:pointer; }

.mood-card-v2{ padding:18px 4px 4px; }
.mood-question-v2{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.4px; }
.mood-row-v2{ display:flex; justify-content:space-between; }
.mood-btn-v2{ display:flex; flex-direction:column; align-items:center; gap:7px; border:none; background:none; cursor:pointer; padding:0; }
.mood-btn-v2 .mood-circle-v2{ width:50px; height:50px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:21px; border:2px solid transparent; transition:transform .15s, background .15s; }
.mood-btn-v2:hover .mood-circle-v2{ transform:scale(1.06); }
.mood-btn-v2.selected .mood-circle-v2{ background:var(--green-700); border-color:var(--green-900); }
.mood-btn-v2 .mood-label-v2{ font-size:9.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-faint); }
.mood-btn-v2.selected .mood-label-v2{ color:var(--green-700); }
.mood-done-v2{ display:none; align-items:center; justify-content:space-between; font-size:14px; padding:4px; }
.mood-done-v2 span{ font-weight:600; color:var(--ink); }
.mood-done-v2 button{ background:none; border:none; color:var(--green-700); font-weight:700; font-size:13px; cursor:pointer; }

/* ============ CELEBRATION SCREEN (Reward — earned moments only) ============ */
.celebration-overlay{ position:fixed; inset:0; z-index:500; background:#111; }
.celebration-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.celebration-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,0.35) 0%, rgba(10,10,8,0.25) 35%, rgba(8,8,6,0.85) 100%); }
.celebration-content{ position:absolute; left:0; right:0; bottom:0; padding:28px 26px calc(28px + env(safe-area-inset-bottom)); z-index:1; }
.celebration-check{ width:52px; height:52px; border-radius:50%; background:var(--terracotta); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.celebration-label{ font-family:var(--font-body); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--terracotta); margin-bottom:8px; }
.celebration-content h1{ font-family:var(--font-display); font-size:34px; font-weight:700; color:#fff; line-height:1.12; margin:0 0 10px; }
.celebration-content p{ font-family:var(--font-body); font-size:14.5px; color:rgba(255,255,255,0.82); line-height:1.4; margin:0 0 18px; }
.celebration-dots{ display:flex; gap:6px; margin-bottom:26px; }
.celebration-dots .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.28); }
.celebration-dots .dot.filled{ background:var(--terracotta); }
.celebration-share-btn{ width:100%; background:var(--cream); color:var(--ink); border:none; border-radius:999px; padding:15px; font-weight:700; font-size:15px; cursor:pointer; font-family:var(--font-body); }
.celebration-private-link{ display:block; width:100%; text-align:center; background:none; border:none; color:rgba(255,255,255,0.65); font-size:13.5px; font-weight:600; margin-top:14px; cursor:pointer; font-family:var(--font-body); }

/* ============ MONTHLY THEME BANNER (Home) ============ */
.theme-banner-green{
  background:var(--green-900); border-radius:var(--radius-lg); padding:18px;
  margin-bottom:20px;
}
.theme-banner-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gold-200); margin-bottom:4px; }
.theme-banner-green h3{ color:#fff; font-size:19px; margin:0; }
#themeTagline{ font-size:12.5px; color:rgba(255,255,255,0.75); margin-top:2px; }
.theme-banner-green .challenge-row{ box-shadow:none; margin-bottom:0; }

.theme-label-small{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--terracotta); margin:4px 0 10px; }
.theme-card-wide{ display:flex; align-items:stretch; background:var(--green-900); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; cursor:pointer; min-height:150px; }
.theme-card-wide-photo{ width:38%; object-fit:cover; display:block; flex-shrink:0; }
.theme-card-wide-body{ padding:18px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.theme-card-wide-body h3{ color:#fff; font-size:21px; line-height:1.2; margin:0; }
.theme-card-wide-body p{ color:rgba(255,255,255,0.75); font-size:13px; line-height:1.4; margin:0; }

/* ============ LEARN ============ */
.learn-card{ background:var(--paper); border-radius:var(--radius-md); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-soft); cursor:pointer; }
.learn-type{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--green-700); }
.learn-card h4{ font-size:15.5px; margin-top:6px; }
.learn-blurb{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }
.learn-body{ display:none; font-size:13.5px; color:var(--ink); line-height:1.55; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.learn-body.open{ display:block; }
.learn-goto{
  display:inline-block; margin-top:10px; color:var(--green-700); font-weight:700; font-size:13px; text-decoration:none;
}
.learn-goto:hover{ text-decoration:underline; }

.resource-card{
  background:var(--paper); border-radius:var(--radius-md); padding:12px; margin-bottom:10px; box-shadow:var(--shadow-soft);
}
.resource-top-row{ display:flex; align-items:center; gap:12px; }
.resource-thumb-link{ position:relative; flex-shrink:0; display:block; width:88px; height:64px; border-radius:10px; overflow:hidden; }
.resource-thumb{ width:100%; height:100%; object-fit:cover; display:block; background:var(--cream-2); }
.resource-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; background:rgba(0,0,0,0.25);
}
.resource-info{ flex:1; min-width:0; }
.resource-info h4{ font-size:14.5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; }
.resource-info h4 a{ color:var(--ink); text-decoration:none; }
.resource-info h4 a:hover{ text-decoration:underline; }
.resource-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; flex-shrink:0; }

.resource-notes{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line); cursor:pointer;
}
.resource-notes-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint); }
.resource-notes p{ font-size:13px; color:var(--ink); margin-top:4px; line-height:1.5; white-space:pre-wrap; }
.resource-add-notes{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line); width:100%; text-align:left;
  background:none; border-left:none; border-right:none; border-bottom:none; color:var(--green-700);
  font-weight:700; font-size:12.5px; cursor:pointer;
}
.resource-notes-edit{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.resource-notes-edit textarea{ min-height:70px; }

/* ============ MOOD TRENDS SCREEN ============ */
.mood-chart-card{ background:var(--paper); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-soft); }
.mood-chart{ display:flex; align-items:flex-end; gap:5px; height:140px; }
.mood-bar{ flex:1; border-radius:5px 5px 2px 2px; min-height:4px; transition:height .3s ease; cursor:pointer; }
.mood-chart-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--ink-faint); }
.mood-tap-hint{ text-align:center; font-size:12px; color:var(--ink-faint); margin-top:10px; }
.mood-day-card{
  margin-top:12px; background:var(--paper); border-radius:var(--radius-lg);
  padding:16px 18px; box-shadow:var(--shadow-soft);
}
.mood-day-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mood-day-date{ font-weight:700; font-size:14.5px; color:var(--green-900); }
.mood-day-badge{
  font-size:12px; font-weight:700; color:#fff; padding:5px 12px; border-radius:var(--radius-pill);
}
.mood-day-badge-none{ background:var(--cream-2); color:var(--ink-faint); }
.mood-day-empty{ font-size:13px; color:var(--ink-soft); margin-top:12px; }
.mood-day-section-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-faint); margin-top:14px; margin-bottom:6px;
}
.mood-day-item{ font-size:13.5px; color:var(--ink); padding:4px 0; line-height:1.4; }
.mood-day-item-clickable{
  cursor:pointer; border-radius:8px; margin:0 -8px; padding:6px 8px;
  display:flex; align-items:center; gap:6px; transition:background .15s ease;
}
.mood-day-item-clickable:hover, .mood-day-item-clickable:active{ background:var(--cream-2); }
.mood-day-item-clickable .mood-day-item-text{ flex:1; }
.mood-day-item-chevron{ color:var(--ink-faint); font-size:12px; flex-shrink:0; }

/* ============ REMINDERS (Profile) ============ */
.reminder-card{ background:var(--paper); border-radius:var(--radius-md); padding:16px; margin-bottom:10px; box-shadow:var(--shadow-soft); }
.reminder-row{ display:flex; align-items:center; justify-content:space-between; font-size:14.5px; font-weight:600; }
.switch{ width:46px; height:26px; border-radius:var(--radius-pill); background:var(--line); border:none; position:relative; cursor:pointer; flex-shrink:0; }
.switch .switch-knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s ease; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.switch.on{ background:var(--green-700); }
.switch.on .switch-knob{ left:23px; }
.reminder-time-row{ display:none; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); }
.reminder-time-row input[type="time"]{ border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px; font-family:inherit; background:var(--cream); }

/* ============ LOYALTY TIERS (Rewards) ============ */
.tier-card{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; opacity:.6; }
.tier-card.unlocked{ opacity:1; border-color:var(--green-700); background:var(--green-100); }
.tier-head{ display:flex; justify-content:space-between; align-items:center; }
.tier-name{ font-weight:700; font-size:14.5px; color:var(--green-900); }
.tier-status{ font-size:11.5px; font-weight:700; color:var(--ink-faint); }
.tier-card.unlocked .tier-status{ color:var(--green-700); }
.tier-perk{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.tier-code-row{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tier-code{ font-size:13px; background:var(--paper); border:1px dashed var(--green-700); border-radius:var(--radius-sm); padding:6px 10px; display:inline-block; }
.tier-qr-toggle{
  background:none; border:none; color:var(--green-700); font-weight:700; font-size:12px;
  cursor:pointer; padding:6px 4px; text-decoration:underline;
}
.tier-qr-box{
  margin-top:12px; background:var(--paper); border-radius:var(--radius-md); padding:16px;
  text-align:center; display:flex; justify-content:center;
}
.tier-qr-box svg{ width:130px; height:130px; }

/* ============ MY ROUTINE ============ */
.routine-row{
  display:flex; align-items:center; gap:12px;
  background:var(--paper); border-radius:var(--radius-lg);
  padding:10px 14px; margin-bottom:8px; box-shadow:var(--shadow-soft);
}
.routine-row.done{ background:var(--green-100); }
.routine-timeline-item{ display:flex; align-items:flex-start; gap:12px; position:relative; }
.routine-timeline-item::before{
  content:''; position:absolute; left:4px; top:26px; bottom:-4px; width:1.5px; background:var(--line);
}
.routine-timeline-item:last-child::before{ display:none; }
.routine-timeline-dot{ width:9px; height:9px; border-radius:50%; margin-top:18px; flex-shrink:0; background:var(--ink-faint); z-index:1; }
.routine-timeline-dot.done{ background:var(--green-700); }
.routine-row .chal-icon{ width:38px; height:38px; border-radius:10px; font-size:16px; }
.routine-add-block-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:1.5px dashed var(--line); border-radius:999px; background:none; color:var(--ink-soft);
  font-weight:600; font-size:13.5px; padding:13px; cursor:pointer; font-family:var(--font-body); margin-top:16px;
}
.routine-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; flex-shrink:0; }
.routine-edit{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:4px; flex-shrink:0; }
.routine-text-input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px; font-family:inherit; font-size:14px; background:var(--cream);
}
.routine-form-row{ display:flex; gap:10px; margin-top:12px; }
.routine-form-row-times{ gap:8px; }
.routine-select, .routine-time-input{
  flex:1; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:10px; font-family:inherit; font-size:13.5px; background:var(--cream); color:var(--ink);
}
.routine-form-heading{ font-size:14px; margin-bottom:10px; }
.routine-time-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.routine-time-field label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint); }
.routine-time-field .routine-time-input{
  width:100%; min-width:0; padding:8px 6px; font-size:12.5px; text-align:center;
}
.routine-check-disabled{ border-color:var(--line); opacity:.4; cursor:default; }

.routine-day-picker{ display:flex; flex-wrap:wrap; gap:6px; }
.day-chip{
  border:1.5px solid var(--line); background:var(--cream); color:var(--ink-soft);
  font-weight:700; font-size:12px; padding:7px 11px; border-radius:var(--radius-pill); cursor:pointer;
}
.day-chip.active{ background:var(--green-900); border-color:var(--green-900); color:var(--cream); }

.day-tabs{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:20px;
  -webkit-overflow-scrolling:touch;
}
.day-tabs::-webkit-scrollbar{ display:none; }
.day-tab{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  border:none; background:none; cursor:pointer; padding:0;
}
.day-tab .day-tab-circle{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1.5px solid var(--line); color:var(--ink-soft); font-weight:700; font-size:12px;
}
.day-tab.active .day-tab-circle{ background:var(--green-900); border-color:var(--green-900); color:var(--cream); }
.day-tab.selected .day-tab-circle{ box-shadow:0 0 0 2px var(--terracotta); }
.idea-chip-clickable{ cursor:pointer; transition:transform .12s ease, background .12s ease; }
.idea-chip-clickable:hover{ background:var(--green-200); }
.idea-chip-clickable:active{ transform:scale(0.96); }

/* ============ SPLASH v2 (real photo hero) ============ */
.hero-v2{ position:relative; height:60vh; min-height:380px; overflow:hidden; display:flex; align-items:flex-end; }
.hero-v2-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-v2-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,12,0.05) 0%, rgba(20,18,12,0.15) 45%, rgba(18,16,10,0.85) 100%); }
.brand-mark-v2{ position:relative; z-index:1; padding:0 26px 26px; width:100%; }
.logo-circle-v2{
  width:52px; height:52px; border-radius:50%; background:var(--terracotta); color:var(--green-900);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px;
  margin-bottom:14px; box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.brand-title-v2{ font-size:40px; line-height:1.05; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.3); margin:0 0 10px; }
.brand-sub-v2{ font-size:14.5px; color:rgba(255,255,255,0.9); line-height:1.5; max-width:300px; margin:0; text-shadow:0 1px 8px rgba(0,0,0,0.25); }

/* ============ LOGIN / SIGN UP ============ */
.auth-hero{ position:relative; height:180px; overflow:hidden; flex-shrink:0; }
.auth-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.auth-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,12,0.1) 0%, rgba(20,18,12,0.35) 100%); }
.auth-back-btn{ position:absolute; top:calc(14px + env(safe-area-inset-top)); left:16px; z-index:2; }
.auth-logo-badge{ position:absolute; left:20px; bottom:-24px; z-index:2; width:48px; height:48px; font-size:20px; margin-bottom:0; }
.auth-head{ text-align:center; margin-bottom:22px; }
.auth-head h1{ font-size:24px; }
.auth-head p{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
.auth-error{
  background:var(--terracotta-200); color:#7A3226; border-radius:var(--radius-sm);
  padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:14px; line-height:1.4;
}
.auth-input-v2{ background:var(--paper); border-color:var(--line); }
.auth-password-wrap{ position:relative; }
.auth-password-wrap .auth-input-v2{ padding-right:44px; }
.auth-password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:8px; display:flex; align-items:center;
}
.auth-remember-v2{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.auth-remember-v2 input{ position:absolute; opacity:0; width:0; height:0; }
.auth-remember-check{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-remember-v2 input:checked + .auth-remember-check{ background:var(--green-700); border-color:var(--green-700); }
.auth-switch{ text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft); }
.auth-switch-btn{
  background:none; border:none; color:var(--green-700); font-weight:700; font-size:13.5px;
  cursor:pointer; margin-left:4px; padding:0; text-decoration:underline;
}

/* QR sign-up: trial vs free account choice */
.qr-plan-options{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.qr-plan-option{
  display:flex; flex-direction:column; gap:2px; text-align:left; width:100%;
  padding:12px 14px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--paper); cursor:pointer; font-family:var(--font-body);
}
.qr-plan-option.active{ border-color:var(--green-900); background:var(--cream-2); }
.qr-plan-title{ font-weight:700; font-size:14px; color:var(--green-900); }
.qr-plan-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

/* Share box: add-photos button sits above the text field */
.add-media-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:12px; border-radius:14px; border:1.5px dashed var(--line);
  background:var(--cream-2); color:var(--green-900); font-weight:700; font-size:13.5px;
  font-family:var(--font-body); cursor:pointer;
}
.add-media-btn:hover{ border-color:var(--green-900); }

/* Who liked a post */
.liker-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.liker-row:last-child{ border-bottom:none; }
.liker-row .avatar{ width:34px; height:34px; font-size:12px; background:var(--green-200); }
.liker-name{ font-size:14px; font-weight:600; color:var(--ink); }
.liker-username{ font-size:12px; color:var(--ink-soft); }

/* Subscribe screen: what you're paying for, itemised */
.sub-lines{ text-align:left; margin:4px 0 16px; border-top:1px solid var(--line); }
.sub-line{ display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.sub-line-body{ flex:1; }
.sub-line-name{ font-size:14px; font-weight:700; color:var(--green-900); }
.sub-line-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; margin-top:2px; }
.sub-line-price{ font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; }
.sub-line input[type=checkbox]{ margin-top:3px; width:17px; height:17px; accent-color:var(--green-900); }
.sub-total{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 2px; }
.sub-total b{ font-size:17px; color:var(--green-900); }