@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#EFF2EC;
  --surface:#FBFCF9;
  --ink:#22281F;
  --ink-soft:#5B6355;
  --ink-faint:#8E9686;
  --accent:#4F7A5B;
  --accent-dark:#3A5C44;
  --accent-soft:#DCE6DA;
  --gold:#A67C3D;
  --border:#D9DED2;
  --danger:#B5533F;
  --radius:14px;
  --font-display:'Source Serif 4', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:84px;
}

.app-header{
  position:sticky; top:0; z-index:10;
  background:var(--bg);
  padding:16px 20px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.app-header .brand{
  font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--ink);
}
.lang-toggle{
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  font-family:var(--font-body); font-size:12px; font-weight:500;
  padding:6px 12px; border-radius:999px; cursor:pointer;
}
.lang-toggle:active{ background:var(--accent-soft); }

.week-dots{
  display:flex; gap:8px; padding:2px 20px 16px; overflow-x:auto;
}
.week-dot{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--ink-soft); font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.week-dot.current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.week-dot.done{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark); }

main{ padding:0 20px 20px; max-width:640px; margin:0 auto; }

.eyebrow{ font-size:12px; letter-spacing:.04em; color:var(--ink-faint); font-weight:500; text-transform:uppercase; }
.headline{ font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.3; margin:6px 0 2px; }
.subheadline{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--ink-soft); margin:0 0 16px; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:14px;
}
.purpose-text{ color:var(--ink-soft); font-size:15px; line-height:1.75; }
.purpose-text .en{ display:block; margin-top:8px; font-size:13.5px; color:var(--ink-faint); }

.section-title{ font-size:13px; font-weight:600; color:var(--ink-soft); margin:22px 0 10px; }

.practice-row{
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
.practice-info{ flex:1; min-width:0; }
.practice-name{ font-weight:500; font-size:15px; }
.practice-name .en{ display:block; font-weight:400; font-size:12.5px; color:var(--ink-faint); margin-top:1px; }
.practice-duration{ font-size:12.5px; color:var(--ink-faint); margin-top:3px; font-variant-numeric: tabular-nums; }
.practice-missing{ font-size:12px; color:var(--gold); margin-top:3px; }

.breathe-btn{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--accent); background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative;
}
.breathe-btn svg{ width:16px; height:16px; fill:var(--accent-dark); }
.breathe-btn.playing{ background:var(--accent); }
.breathe-btn.playing svg{ fill:#fff; }
.breathe-btn.idle::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--accent); opacity:.4;
  animation:breathe 4s ease-in-out infinite;
}
.breathe-btn.disabled{ opacity:.4; cursor:default; border-color:var(--border); background:var(--surface); }
.breathe-btn.disabled svg{ fill:var(--ink-faint); }
@media (prefers-reduced-motion:no-preference){
  @keyframes breathe{
    0%,100%{ transform:scale(1); opacity:.4; }
    50%{ transform:scale(1.35); opacity:0; }
  }
}

.audio-panel{ margin-top:8px; }
.audio-panel audio{ width:100%; height:34px; }

.primary-btn{
  width:100%; padding:15px; border:none; border-radius:var(--radius);
  background:var(--accent); color:#fff; font-family:var(--font-body);
  font-size:15px; font-weight:500; cursor:pointer; margin-top:6px;
}
.primary-btn:active{ background:var(--accent-dark); }
.secondary-btn{
  width:100%; padding:13px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font-family:var(--font-body);
  font-size:14px; font-weight:500; cursor:pointer;
}

.overview-card{ cursor:pointer; }
.overview-card .headline{ font-size:19px; margin:2px 0; }
.overview-card .purpose-text{ font-size:13.5px; }

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; padding:8px 12px calc(8px + env(safe-area-inset-bottom));
}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:none; background:none; color:var(--ink-faint); font-family:var(--font-body);
  font-size:11px; padding:6px 0; cursor:pointer;
}
.tab-btn svg{ width:22px; height:22px; stroke:var(--ink-faint); fill:none; stroke-width:1.6; }
.tab-btn.active{ color:var(--accent-dark); }
.tab-btn.active svg{ stroke:var(--accent-dark); }

.view{ display:none; }
.view.active{ display:block; }

label{ display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin:14px 0 6px; }
label:first-child{ margin-top:0; }
select,input[type=number],input[type=date],input[type=time],textarea{
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:15px;
}
textarea{ min-height:70px; resize:vertical; }

.feeling-row{ display:flex; gap:8px; }
.feeling-btn{
  flex:1; padding:10px 4px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); font-size:12px; color:var(--ink-soft); cursor:pointer; text-align:center;
}
.feeling-btn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }

.log-entry{
  border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; background:var(--surface);
}
.log-entry .row1{ display:flex; justify-content:space-between; align-items:baseline; }
.log-entry .date{ font-weight:500; font-size:14px; font-variant-numeric: tabular-nums; }
.log-entry .del{ background:none; border:none; color:var(--ink-faint); font-size:12px; cursor:pointer; }
.log-entry .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.log-entry .note{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }

.empty-state{ text-align:center; padding:40px 20px; color:var(--ink-faint); font-size:14px; }

.reminder-box{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:16px; margin-bottom:20px; }
.reminder-box .section-title{ margin-top:0; color:var(--accent-dark); }

/* ---- v2 additions: practice cards, daily plans, library ---- */
.practice-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
.practice-card .practice-row{ border:none; padding:0; margin:0; background:none; }
.practice-desc{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-top:8px; }
.practice-desc .en{ display:block; margin-top:3px; color:var(--ink-faint); font-size:12px; }

.practice-actions{ display:flex; gap:8px; margin-top:10px; }
.pill-btn{
  border:1px solid var(--border); background:var(--bg); color:var(--ink-soft);
  font-family:var(--font-body); font-size:12.5px; font-weight:500;
  padding:7px 12px; border-radius:999px; cursor:pointer;
}
.pill-btn.done{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark); }

.inline-panel{
  margin-top:10px; padding:12px; border-radius:10px; background:var(--bg); border:1px solid var(--border);
}
.inline-panel[hidden]{ display:none; }
.inline-panel .mini-row{ display:flex; gap:8px; align-items:center; }
.inline-panel label{ margin:8px 0 4px; }
.inline-panel label:first-child{ margin-top:0; }
.mini-save-btn{
  border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:8px; cursor:pointer; margin-top:8px;
}

.hint-text{ font-size:12px; color:var(--accent-dark); margin-top:10px; opacity:.85; }

.plan-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:12px;
}
.plan-card .row1{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan-card .plan-name{ font-weight:500; font-size:15.5px; }
.plan-card .plan-name .en{ display:block; font-weight:400; font-size:12.5px; color:var(--ink-faint); margin-top:1px; }
.streak-badge{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--gold);
  background:#F3E9D8; border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.plan-card .plan-actions{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.plan-del{ background:none; border:none; color:var(--ink-faint); font-size:12px; cursor:pointer; margin-left:auto; }

.reading-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
.reading-card .rc-title{ font-weight:500; font-size:14.5px; }
.reading-card .rc-meta{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.reading-card .rc-note{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.reading-card a{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--accent-dark); }

.library-audio-row{ margin-bottom:10px; }
.library-audio-row .practice-duration{ margin-top:2px; }

.log-tag{
  display:inline-block; font-size:11px; font-weight:600; color:var(--accent-dark);
  background:var(--accent-soft); border-radius:6px; padding:2px 7px; margin-right:6px;
}

.reflection-card{ margin-bottom:10px; }
.reflection-card .rw{ font-size:12.5px; color:var(--ink-faint); margin-bottom:4px; }
.reflection-card .rt{ font-size:13.5px; color:var(--ink); white-space:pre-wrap; }

/* ---- v3 additions: start date bar, activity choice, structured reflection ---- */
.start-date-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px;
  padding:9px 14px; margin-bottom:16px; font-size:12.5px; color:var(--accent-dark);
}
.start-date-bar.unset{ background:#F3E9D8; border-color:var(--gold); color:#7A5A26; }
.start-date-bar input[type=date]{ padding:6px 8px; font-size:13px; }
.link-btn{
  border:none; background:none; color:var(--accent-dark); font-family:var(--font-body);
  font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:underline; flex:0 0 auto;
}

.activity-picker{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.activity-pill{
  border:1px solid var(--border); background:var(--bg); color:var(--ink-soft);
  font-family:var(--font-body); font-size:13px; padding:8px 13px; border-radius:999px; cursor:pointer;
}
.activity-pill.custom{ border-style:dashed; }
.custom-activity-input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  font-family:var(--font-body); font-size:14px; margin-bottom:8px;
}

.reflect-block{ margin-bottom:18px; }
.reflect-block:last-of-type{ margin-bottom:16px; }
.reflect-practice-name{ font-weight:500; font-size:14px; margin-bottom:4px; }
.reflect-prompt{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:8px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.tag-pill{
  border:1px solid var(--border); background:var(--bg); color:var(--ink-soft);
  font-family:var(--font-body); font-size:12.5px; padding:6px 11px; border-radius:999px; cursor:pointer;
}
.tag-pill.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.reflect-example{
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:10px;
  font-family:var(--font-body); font-size:13.5px;
}
.reflect-text{
  width:100%; min-height:60px; padding:9px 11px; border:1px solid var(--border); border-radius:10px;
  font-family:var(--font-body); font-size:13.5px; resize:vertical;
}
.congrats-msg{
  margin-top:12px; text-align:center; font-weight:500; color:var(--accent-dark);
  background:var(--accent-soft); border-radius:10px; padding:12px; font-size:14px;
}
.reflect-archive-practice{ margin-bottom:10px; }
.reflect-archive-practice:last-child{ margin-bottom:0; }

/* ---- v7 additions: numbered marker, reminder moved to header ---- */
.practice-number{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.practice-header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.bell-btn{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--surface); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.bell-btn svg{ width:16px; height:16px; stroke:var(--ink-soft); fill:none; stroke-width:1.8; }
.bell-btn:active{ background:var(--accent-soft); border-color:var(--accent); }

/* ---- v8 additions: library audio expandable description ---- */
.lib-name-row{ display:flex; align-items:center; gap:6px; }
.chevron-btn{
  flex:0 0 auto; border:none; background:none; padding:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.chevron-btn .chevron{ width:16px; height:16px; stroke:var(--ink-faint); fill:none; stroke-width:2; transition:transform .15s ease; }
.chevron-btn.open .chevron{ transform:rotate(180deg); stroke:var(--accent-dark); }
.lib-audio-desc{
  margin-top:8px; font-size:13px; color:var(--ink-soft); line-height:1.6;
  padding-top:8px; border-top:1px dashed var(--border);
}
.lib-audio-desc[hidden]{ display:none; }

/* ---- v9 additions: week note, per-practice checkin prompt ---- */
.week-note{
  background:#F3E9D8; border:1px solid var(--gold); color:#7A5A26;
  border-radius:10px; padding:9px 14px; font-size:13px; margin:-4px 0 16px;
}
.qc-prompt-text{
  font-size:12.5px; color:var(--ink-soft); line-height:1.6;
  background:var(--bg); border-radius:8px; padding:8px 10px; margin-bottom:8px;
}