/* ============================================================
   TumDee — ทำดีทุกวัน  |  Theme tokens
   Two style sets: [data-theme="clean"] (เรียบ) / [data-theme="rich"] (สวยจัดเต็ม)
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

:root {
  --font-display: "Taviraj", Georgia, serif;
  --font-body: "Sarabun", system-ui, sans-serif;
  --font-script: "Charmonman", cursive;
}

/* ---------- Stage (desktop shows phone frame, mobile fills) ---------- */
.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 800px at 50% -10%, #f0e6cf 0%, #e7dcc2 45%, #ddd0b0 100%);
  padding: 0;
}
@media (min-width: 560px) {
  .stage { padding: 28px; background:
    radial-gradient(1000px 700px at 50% 0%, #efe5cd 0%, #e3d7ba 55%, #d8c9a6 100%); }
}

/* ---------- Phone frame ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
}
@media (min-width: 560px) {
  .phone {
    height: min(900px, calc(100dvh - 56px));
    border-radius: 44px;
    box-shadow:
      0 0 0 11px #1c1813,
      0 0 0 13px #2e2820,
      0 40px 90px -30px rgba(40,30,10,.55);
  }
}

/* notch / status bar */
.statusbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 26px 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .3px;
  background: var(--bg);
  z-index: 5;
}
.statusbar .right { display: flex; gap: 6px; align-items: center; }

/* scroll area */
.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.screen::-webkit-scrollbar { display: none; }
.screen-pad { padding: 6px 20px 120px; }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 74px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--tabbar-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  z-index: 5;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted);
  font-size: 10.5px; font-weight: 600;
  padding-top: 8px;
  transition: color .2s, transform .15s;
}
.tab.active { color: var(--gold-ink); }
.tab:active { transform: scale(.92); }
.tab svg { width: 24px; height: 24px; }

/* center FAB tab */
.tab-fab {
  align-self: center;
  width: 56px; height: 56px;
  margin: -22px auto 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fab-bg);
  color: var(--fab-ink);
  box-shadow: var(--fab-shadow);
  transition: transform .15s;
}
.tab-fab:active { transform: scale(.9); }
.tab-fab svg { width: 28px; height: 28px; }

/* =================================================================
   CLEAN  (ชุดเรียบ)
   ================================================================= */
[data-theme="clean"] {
  --bg: #FAF6EC;
  --surface: #FFFFFF;
  --surface-2: #FBF7EE;
  --ink: #2C281F;
  --ink-soft: #5A5446;
  --muted: #9A9078;
  --line: #ECE5D5;
  --gold: #C79A3A;
  --gold-ink: #A67C22;
  --gold-soft: #F2E7C5;
  --gold-tint: #FBF4DF;
  --accent: #6E8B6B;        /* sage for dharma */
  --accent-tint: #EBF1E8;
  --shadow-card: 0 1px 2px rgba(60,50,20,.05), 0 8px 22px -14px rgba(60,50,20,.18);
  --radius-card: 20px;
  --tabbar-bg: rgba(255,255,255,.86);
  --fab-bg: linear-gradient(180deg, #D6AC4C, #BE8E2A);
  --fab-ink: #fff;
  --fab-shadow: 0 8px 20px -6px rgba(190,142,42,.55);
  --hero-bg: linear-gradient(165deg, #FFFFFF 0%, #FBF4DF 100%);
}

/* =================================================================
   RICH  (ชุดสวยจัดเต็ม)
   ================================================================= */
[data-theme="rich"] {
  --bg: #F6ECCF;
  --surface: #FFFDF6;
  --surface-2: #FBF3DC;
  --ink: #3A2C10;
  --ink-soft: #6B5526;
  --muted: #A98F58;
  --line: #E7D3A0;
  --gold: #B9892A;
  --gold-ink: #9A6E15;
  --gold-soft: #EAD08A;
  --gold-tint: #FBEFC9;
  --accent: #8C2B1E;        /* temple maroon */
  --accent-tint: #F6E2D8;
  --shadow-card: 0 2px 4px rgba(120,80,10,.08), 0 14px 34px -16px rgba(140,95,15,.34);
  --radius-card: 22px;
  --tabbar-bg: rgba(255,251,240,.9);
  --fab-bg: linear-gradient(160deg, #F2D27A 0%, #D7A63C 45%, #B9892A 100%);
  --fab-ink: #4A370F;
  --fab-shadow: 0 10px 24px -6px rgba(160,110,20,.6), inset 0 1px 0 rgba(255,255,255,.5);
  --hero-bg: linear-gradient(160deg, #4A3A12 0%, #6E521A 55%, #8A6A22 100%);
}

/* =================================================================
   Shared component styles (token-driven)
   ================================================================= */
/* --- Rich-only ornamentation (ชุดสวยจัดเต็ม) --- */
[data-theme="rich"] .phone {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(201,155,58,.10) 0, transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(201,155,58,.08) 0, transparent 26%);
}
[data-theme="rich"] .card,
[data-theme="rich"] .merit-stat,
[data-theme="rich"] .deed,
[data-theme="rich"] .habit {
  background-image: linear-gradient(170deg, rgba(255,255,255,.6), rgba(245,228,180,.18));
}
[data-theme="rich"] .hero::before {
  content: ""; position: absolute; inset: 6px; border-radius: 20px;
  border: 1px solid rgba(247,215,126,.35); pointer-events: none; z-index: 1;
}
[data-theme="rich"] .deed-ic,
[data-theme="rich"] .set-ic:not(.tg):not(.gc) {
  background: linear-gradient(160deg, #F4DA8E, #D7A63C);
  color: #5A4210;
}
[data-theme="rich"] .section-title::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  background: var(--gold); opacity: .8;
  -webkit-mask: var(--lotus-mask) center/contain no-repeat;
  mask: var(--lotus-mask) center/contain no-repeat;
}
:root { --lotus-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Cpath d='M50 82c-9-6-15-17-15-31 0-9 6-16 15-23 9 7 15 14 15 23 0 14-6 25-15 31z'/%3E%3Cpath d='M50 84c-16-2-29-11-33-24-2-7 0-13 7-19 12 3 21 10 26 20 2 8 2 16 0 23z'/%3E%3Cpath d='M50 84c16-2 29-11 33-24 2-7 0-13-7-19-12 3-21 10-26 20-2 8-2 16 0 23z'/%3E%3C/g%3E%3C/svg%3E"); }

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
[data-theme="rich"] .card { border-color: var(--gold-soft); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 22px 2px 12px;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.section-title .muted-link { margin-left: auto; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--gold-ink); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-ink);
}

/* ---------- Greeting / header ---------- */
.greet-wrap { padding: 8px 2px 4px; }
.greet-date { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing:.3px; }
.greet-name { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); margin: 2px 0 0; line-height: 1.2; }

/* ---------- Hero streak card ---------- */
.hero {
  position: relative;
  border-radius: 26px;
  padding: 22px 22px 20px;
  overflow: hidden;
  background: var(--hero-bg);
  box-shadow: var(--shadow-card);
  margin-top: 6px;
}
[data-theme="clean"] .hero { border: 1px solid var(--gold-soft); }
[data-theme="rich"] .hero { border: 1px solid #C79B3A; }
.hero-ink-rich { color: #FBEFC9; }
.hero .lotus-bg {
  position: absolute; right: -28px; top: -22px; width: 170px; height: 170px;
  opacity: .14; pointer-events: none;
}
[data-theme="rich"] .hero .lotus-bg { opacity: .22; }
.hero-row { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.flame-badge {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.streak-num { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; }
.streak-label { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.hero-foot {
  display: flex; gap: 6px; margin-top: 16px; position: relative; z-index: 1;
}
.dot-day {
  flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12);
}
[data-theme="rich"] .hero .dot-day { background: rgba(255,255,255,.22); }
.dot-day.on { background: var(--gold); }
[data-theme="rich"] .hero .dot-day.on { background: #F2D27A; }

/* ---------- Merit summary ---------- */
.merit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.merit-stat {
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
[data-theme="rich"] .merit-stat { border-color: var(--gold-soft); background: var(--surface); }
.merit-stat .big { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.merit-stat .lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }

/* lotus/beads visual merit */
.beads { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.bead { width: 13px; height: 13px; border-radius: 50%; background: var(--gold-soft); }
.bead.full { background: var(--gold); }
.lotus-meter { display:flex; align-items:flex-end; gap: 4px; }

/* ---------- Deed list item ---------- */
.deed {
  display: flex; gap: 13px; align-items: center;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
[data-theme="rich"] .deed { border-color: var(--gold-soft); }
.deed + .deed { margin-top: 9px; }
.deed-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-tint); color: var(--gold-ink);
}
.deed-ic svg { width: 22px; height: 22px; }
.deed-body { flex: 1; min-width: 0; }
.deed-cat { font-size: 11.5px; font-weight: 700; color: var(--gold-ink); letter-spacing:.3px; }
.deed-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deed-meta { font-size: 12px; color: var(--muted); margin-top: 2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.deed-meta > span { white-space: nowrap; }
.deed-merit { font-family: var(--font-display); font-weight: 700; color: var(--gold-ink); font-size: 15px; text-align: right; flex: 0 0 auto; }

/* ---------- Habit chips ---------- */
.habit {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-card);
}
[data-theme="rich"] .habit { border-color: var(--gold-soft); }
.habit + .habit { margin-top: 9px; }
.habit-check {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all .18s;
}
.habit-check.done { background: var(--gold); border-color: var(--gold); }
.habit-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.habit-name.done { color: var(--muted); text-decoration: line-through; }
.habit-streak { font-size: 12px; font-weight: 700; color: var(--gold-ink); display:flex; align-items:center; gap:3px; }

/* ---------- Dhamma quote ---------- */
.quote {
  position: relative; padding: 22px 22px;
  border-radius: 20px; overflow: hidden;
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
}
[data-theme="rich"] .quote {
  background: linear-gradient(155deg, #FBF1CF, #F3E0A8);
  border-color: #DBBE72;
}
.quote-mark { font-family: var(--font-display); font-size: 56px; line-height: .4; color: var(--gold); opacity:.5; }
.quote-text { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.55; }
.quote-src { font-size: 12.5px; font-weight: 700; color: var(--gold-ink); margin-top: 10px; }

/* ---------- Buttons / inputs ---------- */
.btn {
  width: 100%; padding: 15px; border-radius: 16px;
  font-size: 16px; font-weight: 700; color: var(--fab-ink);
  background: var(--fab-bg); box-shadow: var(--fab-shadow);
  transition: transform .12s, filter .15s;
}
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(1.03); }
.btn-ghost {
  background: var(--surface); color: var(--gold-ink); box-shadow: none;
  border: 1.5px solid var(--gold-soft);
}

.field { margin-bottom: 16px; }
.field-label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); margin: 0 2px 7px; display:flex; align-items:center; gap:6px; white-space: nowrap; }
.field-label .opt { color: var(--muted); font-weight: 600; }
.input, .textarea, .select {
  width: 100%; padding: 13px 14px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint);
}
.textarea { resize: none; min-height: 92px; line-height: 1.5; }

/* category chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 13px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: all .15s;
}
.chip svg { width: 17px; height: 17px; }
.chip.active {
  background: var(--gold-tint); border-color: var(--gold);
  color: var(--gold-ink);
}
.chip:active { transform: scale(.96); }

/* segmented toggle */
.seg {
  display: flex; padding: 4px; gap: 4px;
  background: var(--surface-2); border-radius: 15px;
  border: 1px solid var(--line);
}
.seg-btn {
  flex: 1; padding: 11px; border-radius: 11px;
  font-size: 14px; font-weight: 700; color: var(--muted);
  transition: all .18s;
}
.seg-btn.active { background: var(--surface); color: var(--gold-ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.18); }
[data-theme="rich"] .seg-btn.active { background: var(--gold); color: #fff; }

/* link list (unlimited links) */
.linkrow { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.linkrow .input { flex: 1; }
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--muted);
}
.icon-btn.danger { color: var(--accent); }

/* photo upload */
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-add, .photo-thumb {
  width: 78px; height: 78px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.photo-add { border: 2px dashed var(--gold-soft); color: var(--gold-ink); background: var(--gold-tint); }
.photo-thumb { background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.photo-thumb .x { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }

/* ---------- Journal timeline (สมุดธรรม) ---------- */
.tl-day { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gold-ink); margin: 20px 2px 12px; display:flex; align-items:center; gap:10px; }
.tl-day::after { content:""; flex:1; height:1px; background: var(--line); }
.jr-card { padding: 14px; }
.jr-card + .jr-card { margin-top: 11px; }
.jr-head { display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.jr-photos { display:flex; gap:6px; margin-top:10px; }
.jr-photo { width:56px; height:56px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--muted); }
.jr-links { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.jr-link { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gold-ink); font-weight:600; }
.tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:9px; font-size:11.5px; font-weight:700;
  background: var(--accent-tint); color: var(--accent); white-space:nowrap;
}
.tag.gold { background: var(--gold-tint); color: var(--gold-ink); }

/* ---------- Settings ---------- */
.set-group { margin-top: 14px; }
.set-row {
  display:flex; align-items:center; gap:14px;
  padding: 15px 16px; background: var(--surface);
  border:1px solid var(--line);
}
.set-row:first-child { border-radius: 16px 16px 0 0; }
.set-row:last-child { border-radius: 0 0 16px 16px; }
.set-row:only-child { border-radius: 16px; }
.set-row + .set-row { border-top: none; }
[data-theme="rich"] .set-row { border-color: var(--gold-soft); }
.set-ic { width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:var(--gold-tint); color:var(--gold-ink); }
.set-ic.tg { background:#E5F0FB; color:#2C7BD0; }
.set-ic.gc { background:#E9F3EA; color:#3A8E4A; }
.set-body { flex:1; min-width:0; }
.set-name { font-size:15px; font-weight:600; color:var(--ink); }
.set-sub { font-size:12.5px; color:var(--muted); margin-top:1px; }

/* iOS-style switch */
.sw { width:48px; height:28px; border-radius:16px; background:var(--line); position:relative; flex:0 0 auto; transition: background .2s; }
.sw.on { background: var(--gold); }
.sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.sw.on::after { transform: translateX(20px); }

.pill-connect { padding:8px 14px; border-radius:11px; font-size:13px; font-weight:700; background:var(--gold-tint); color:var(--gold-ink); flex:0 0 auto; white-space:nowrap; }
.pill-connect.done { background: var(--accent-tint); color: var(--accent); }

/* profile header */
.profile {
  display:flex; align-items:center; gap:15px; padding: 6px 2px 2px;
}
.avatar {
  width:64px;height:64px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-size:26px; font-weight:700; color:#fff;
  background: var(--fab-bg);
}

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg);
  padding: 13px 20px; border-radius: 14px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.8,.3,1);
  z-index: 50; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Modal sheet ---------- */
.sheet-backdrop {
  position:absolute; inset:0; background:rgba(30,22,8,.4);
  display:flex; align-items:flex-end; z-index: 40;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.sheet-backdrop.show { opacity:1; pointer-events:auto; }
.sheet {
  width:100%; background:var(--bg); border-radius:26px 26px 0 0;
  padding: 10px 20px calc(26px + env(safe-area-inset-bottom,0));
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
  max-height: 88%; overflow-y: auto;
}
.sheet-backdrop.show .sheet { transform: translateY(0); }
.sheet-grab { width:40px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 16px; }

/* entrance anim */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp .5s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }
}

.stagger > * { animation: fadeUp .5s cubic-bezier(.2,.8,.3,1) both; }
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}
.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}
.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}
.stagger > *:nth-child(8){animation-delay:.30s}