/* Pebble — 90-second calm. Warm dawn palette (day) / deep indigo (night). */
:root {
  --cream: #FFF9F2;
  --peach: #FFD9BE;
  --peach-deep: #FFB98F;
  --lav: #DCCBF2;
  --lav-deep: #B79CE0;
  --ink: #4A3F55;
  --ink-soft: #7A6C86;
  --card: #FFFFFF;
  --accent: #E8935A;
  --accent-ink: #FFFFFF;
  --shadow: 0 8px 24px rgba(190, 140, 100, 0.16);
  --radius: 22px;
}
body.night {
  --cream: #14152E;
  --peach: #2A2C55;
  --peach-deep: #3A3D70;
  --lav: #2E3158;
  --lav-deep: #4A4E8F;
  --ink: #EDEAFF;
  --ink-soft: #A9A5CC;
  --card: #1E2040;
  --accent: #8F9BFF;
  --accent-ink: #14152E;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 34%, var(--cream) 100%);
  color: var(--ink);
  min-height: 100vh;
  transition: background 0.6s ease, color 0.4s ease;
}
body.night {
  background: radial-gradient(120% 60% at 50% -10%, #2B2E63 0%, var(--cream) 70%);
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
header.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 6px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.brand .name { font-weight: 800; font-size: 20px; letter-spacing: 0.2px; }
.brand .tag { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.sos-btn {
  background: #E4574F; color: #fff; border: none; border-radius: 999px;
  font-weight: 800; font-size: 14px; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(228, 87, 79, 0.4);
}

/* Screens */
main { flex: 1; padding: 8px 18px 96px; }
.screen { display: none; animation: fadein 0.35s ease; }
.screen.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1.title { font-size: 26px; line-height: 1.25; margin: 14px 0 6px; font-weight: 800; }
p.sub { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }

.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px;
}

/* Feeling grid */
.feel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feel-card {
  background: var(--card); border: 2px solid transparent; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 12px; text-align: center; cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
  font-family: inherit; color: var(--ink);
}
.feel-card:active { transform: scale(0.96); }
.feel-card .emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.feel-card .fname { font-weight: 700; font-size: 15px; }
.feel-card .ftag { font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: block; line-height: 1.4; }
.feel-card.panic { border-color: #E4574F; background: #FFF1F0; }
body.night .feel-card.panic { background: #2A1E2E; }
.feel-card .lock { font-size: 12px; color: var(--ink-soft); display: block; margin-top: 6px; }
.feel-card.featured { border-color: var(--accent); }

/* Buttons */
.btn {
  display: block; width: 100%; border: none; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 800; padding: 16px; cursor: pointer;
  margin: 10px 0; font-family: inherit;
  box-shadow: 0 6px 18px rgba(232, 147, 90, 0.35);
}
body.night .btn { box-shadow: 0 6px 18px rgba(143, 155, 255, 0.3); }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 2px solid var(--lav-deep); }
.btn.small { font-size: 14px; padding: 12px; }
.linklike { background: none; border: none; color: var(--ink-soft); text-decoration: underline; font-size: 14px; padding: 10px; cursor: pointer; font-family: inherit; }

/* Breathing */
.breath-wrap { position: relative; width: 240px; height: 240px; margin: 26px auto; }
.breath-wrap svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--lav); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
.breath-circle {
  position: absolute; inset: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--peach), var(--lav-deep));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 1s ease-in-out; box-shadow: var(--shadow);
}
body.night .breath-circle { background: radial-gradient(circle at 35% 30%, #3A3D70, #8F9BFF); }
.breath-circle .phase { font-weight: 800; font-size: 19px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.breath-circle .count { font-size: 44px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.breath-hint { text-align: center; color: var(--ink-soft); font-size: 14px; min-height: 44px; line-height: 1.5; }

/* Check-in faces */
.faces { display: flex; justify-content: center; gap: 18px; margin: 18px 0; }
.face { font-size: 46px; background: var(--card); border: 2px solid transparent; border-radius: 50%; width: 84px; height: 84px; cursor: pointer; box-shadow: var(--shadow); font-family: inherit; }
.face:active { transform: scale(0.92); }
.face.sel { border-color: var(--accent); }

/* Steps */
.step-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.step-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }
.step-dots span.on { background: var(--accent); }
.ground-num { font-size: 64px; font-weight: 800; text-align: center; color: var(--accent); margin: 8px 0; }

/* Crisis */
.crisis { background: #FFF1F0; border: 2px solid #E4574F; }
body.night .crisis { background: #2A1E2E; }
.crisis a { display: block; text-align: center; font-weight: 800; font-size: 17px; color: #E4574F; padding: 12px; text-decoration: none; border-radius: 14px; }
.crisis p { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 6px 0; line-height: 1.5; }

/* Bottom nav */
nav.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; background: var(--card);
  display: flex; border-top: 1px solid var(--lav);
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  z-index: 20;
}
body.onboarding nav.tabbar { display: none; }
nav.tabbar button {
  flex: 1; background: none; border: none; font-family: inherit; cursor: pointer;
  color: var(--ink-soft); font-size: 11px; font-weight: 700; padding: 6px 2px;
}
nav.tabbar button .ti { font-size: 22px; display: block; margin-bottom: 2px; }
nav.tabbar button.on { color: var(--accent); }

/* Paywall */
.paywall-hero { text-align: center; padding: 10px 0 4px; }
.paywall-hero img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.price { font-size: 40px; font-weight: 800; text-align: center; margin: 6px 0; }
.price small { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.check-list { list-style: none; padding: 0; margin: 12px 0; }
.check-list li { padding: 9px 0 9px 34px; position: relative; font-size: 15px; line-height: 1.45; }
.check-list li:before { content: "✓"; position: absolute; left: 6px; color: #5FA86B; font-weight: 800; }

/* Referral */
.ref-code {
  font-size: 26px; font-weight: 800; letter-spacing: 3px; text-align: center;
  background: var(--peach); border-radius: 16px; padding: 16px; margin: 12px 0; color: var(--ink);
}

/* Inputs */
input[type=email], input[type=text], select {
  width: 100%; border: 2px solid var(--lav); border-radius: 14px; padding: 14px;
  font-size: 16px; font-family: inherit; background: var(--card); color: var(--ink); margin: 8px 0;
}
.fine { font-size: 12px; color: var(--ink-soft); line-height: 1.55; }

/* Settings rows */
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--lav); font-size: 16px; font-weight: 600; }
.set-row:last-child { border-bottom: none; }

/* History */
.hist-item { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--lav); font-size: 14px; }
.hist-item:last-child { border-bottom: none; }
.hist-item .d { color: var(--ink-soft); }

/* Streak */
.streak-num { font-size: 72px; font-weight: 800; text-align: center; color: var(--accent); line-height: 1; }
.streak-label { text-align: center; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.week-dots { display: flex; justify-content: center; gap: 10px; margin: 14px 0; }
.week-dots span { width: 40px; height: 40px; border-radius: 50%; background: var(--lav); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.week-dots span.hit { background: var(--accent); color: var(--accent-ink); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(40, 25, 40, 0.5); display: none; align-items: flex-end; justify-content: center; z-index: 50; }
.modal-bg.open { display: flex; }
.modal { background: var(--card); border-radius: 26px 26px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); width: 100%; max-width: 480px; animation: slideup 0.3s ease; }
@keyframes slideup { from { transform: translateY(60px); opacity: 0.5; } to { transform: none; opacity: 1; } }
.modal h2 { margin: 0 0 8px; font-size: 21px; }

/* Language picker */
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.lang-btn { padding: 18px 8px; border-radius: 18px; border: 2px solid var(--lav); background: var(--card); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--ink); }
.lang-btn.sel { border-color: var(--accent); }

/* Footer */
footer.foot { padding: 18px; text-align: center; }
footer.foot p { font-size: 11px; color: var(--ink-soft); line-height: 1.6; margin: 4px 0; }
footer.foot button { background: none; border: none; color: var(--ink-soft); text-decoration: underline; font-size: 11px; cursor: pointer; font-family: inherit; }

.mascot-hero { text-align: center; margin: 6px 0 2px; }
.mascot-hero img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.timer-line { text-align: center; font-size: 13px; color: var(--ink-soft); font-weight: 700; margin-top: 10px; }

@media (min-width: 520px) {
  body { padding: 24px 0; }
  #app { border-radius: 32px; overflow: hidden; box-shadow: 0 20px 60px rgba(120, 80, 60, 0.25); min-height: calc(100vh - 48px); }
  nav.tabbar { border-radius: 0 0 32px 32px; }
}

/* ---- distinct tool visuals (v0.4.0): box / wave / hold / ground ---- */
.box-wrap { position: relative; width: 240px; height: 240px; margin: 26px auto; }
.box-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.box-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.box-center .phase { font-weight: 800; font-size: 19px; color: var(--ink); }
.box-center .count { font-size: 44px; font-weight: 800; color: var(--ink); }
.wave-wrap { margin: 26px auto; max-width: 340px; text-align: center; }
.wave-svg { width: 100%; height: auto; display: block; }
.wave-path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.wave-dot { fill: var(--accent); }
.wave-phase { font-weight: 800; font-size: 20px; margin: 12px 0 8px; color: var(--ink); }
.wave-bar { height: 8px; border-radius: 99px; background: var(--lav); overflow: hidden; margin: 0 24px; }
.wave-fill { height: 100%; width: 0; background: var(--accent); border-radius: 99px; }
.hold-wrap { text-align: center; margin: 26px auto; }
.hold-btn { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--peach), var(--lav-deep));
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.hold-btn:active { transform: scale(0.97); }
.hold-emoji { font-size: 76px; pointer-events: none; }
.hold-btn svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); pointer-events: none; }
.hold-label { font-weight: 700; margin-top: 16px; color: var(--ink); font-size: 17px; }

/* ---------- distinct tools v0.5.0: thoughts, name-it, bilateral, moon, write ---------- */
.thought-wrap { position: relative; height: 330px; overflow: hidden; background: linear-gradient(#eef3ff, #f7f4ff); border-radius: 18px; margin-top: 8px; }
.thought-hint { position: absolute; top: 12px; left: 12px; right: 12px; text-align: center; font-weight: 700; color: #5a5a8a; z-index: 2; }
.thought-count { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 13px; color: #8a8ab0; z-index: 2; }
.thought-chip { position: absolute; bottom: -46px; background: #fff; border: 2px solid #cfd6f5; color: #4a4a7a; border-radius: 999px; padding: 10px 18px; font-weight: 700; box-shadow: 0 4px 12px rgba(90, 100, 180, .18); animation: thoughtRise 7s linear forwards; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; white-space: nowrap; }
.thought-chip.out { opacity: 0 !important; transform: scale(1.5) !important; transition: all .3s; }
@keyframes thoughtRise { to { transform: translateY(-400px); } }
.nameit-hint { text-align: center; font-weight: 700; color: #5a5a8a; margin: 10px 4px 14px; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.word-chip { border: 2px solid #cfd6f5; background: #fff; color: #4a4a7a; border-radius: 999px; padding: 12px 20px; font-size: 16px; font-weight: 700; cursor: pointer; }
.word-chip.on { background: #5b6ee1; border-color: #5b6ee1; color: #fff; }
.bi-hint { text-align: center; font-weight: 700; color: #5a5a8a; margin: 10px 4px 16px; }
.bi-row { display: flex; gap: 14px; }
.bi-pad { flex: 1; height: 150px; border-radius: 20px; background: #eceff7; border: 3px solid #d4d9ec; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #8a8ab0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.bi-pad.lit { background: #5b6ee1; border-color: #5b6ee1; color: #fff; box-shadow: 0 0 24px rgba(91, 110, 225, .55); }
.bi-count { text-align: center; font-size: 15px; font-weight: 800; color: #5b6ee1; margin-top: 14px; }
.moon-wrap { position: relative; }
.moon-sky { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background: linear-gradient(#141b3a, #3d4a80); }
.moon-disc { position: absolute; left: 50%; transform: translateX(-50%); font-size: 64px; top: 4%; line-height: 1; }
.moon-dim { position: absolute; inset: 0; background: #070b1d; opacity: 0; border-radius: 18px; pointer-events: none; }
.moon-cue { text-align: center; font-weight: 700; color: #3f4568; margin-top: 12px; min-height: 26px; }
.write-box { width: 100%; margin-top: 12px; border: 2px solid #cfd6f5; border-radius: 12px; padding: 12px; font-size: 16px; font-family: inherit; resize: none; box-sizing: border-box; }
.write-box:focus { outline: none; border-color: #5b6ee1; }

/* ---------- v0.6.0: one feeling = one look ---------- */
#scr-track .btn { background: var(--tacc, var(--accent)); }
#scr-track .btn.ghost { background: transparent; }
#scr-track .title { color: var(--tacc, var(--ink)); }
#scr-track .step-dots span.on { background: var(--tacc, var(--accent)); }
#scr-track .card { background: var(--tsoft, var(--card)); }
#scr-track .thought-hint, #scr-track .nameit-hint, #scr-track .bi-hint { color: var(--tacc, #5a5a8a); }
#scr-track .bi-count { color: var(--tacc, #5b6ee1); }
.ring-fg { stroke: var(--tacc, var(--accent)); }
.wave-path { stroke: var(--tacc, var(--accent)); }
.wave-dot { fill: var(--tacc, var(--accent)); }
.word-chip.on { background: var(--tacc, #5b6ee1); border-color: var(--tacc, #5b6ee1); }
.bi-pad.lit { background: var(--tacc, #5b6ee1); border-color: var(--tacc, #5b6ee1); }
.thought-chip { border-color: var(--tacc, #cfd6f5); }
.per-day { text-align: center; font-weight: 800; color: var(--ink-soft); margin: 2px 0 12px; font-size: 15px; }

/* ---------- v0.8.0: Talk to Pebble ---------- */
.talk-head { display: flex; gap: 12px; align-items: center; margin: 6px 0 12px; }
.talk-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.talk-name { font-weight: 800; font-size: 18px; }
.talk-log { display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: 54vh; overflow-y: auto; padding: 4px 2px 12px; }
.talk-msg { max-width: 84%; padding: 12px 16px; border-radius: 18px; line-height: 1.5; font-size: 16px; }
.talk-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.talk-msg.pebble { align-self: flex-start; background: var(--card); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
.talk-msg.typing { opacity: 0.55; font-style: italic; }
.talk-input { display: flex; gap: 8px; margin-top: 8px; }
.talk-input input { flex: 1; border: 2px solid var(--lav-deep); border-radius: 999px; padding: 12px 16px; font-size: 16px; font-family: inherit; min-width: 0; }
.talk-input input:focus { outline: none; border-color: var(--accent); }
.talk-input .btn { width: auto; margin: 0; padding: 12px 20px; flex-shrink: 0; }
.talk-crisis { background: #FFF1F0; border: 2px solid #E4574F; border-radius: 18px; padding: 16px; }
.talk-crisis-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.talk-crisis p { margin: 0 0 6px; line-height: 1.55; }
.talk-crisis ul { margin: 8px 0 0; padding-left: 20px; }
.talk-crisis li { margin-bottom: 6px; line-height: 1.5; }
.talk-crisis .btn { margin-top: 10px; }