/* Self-hosted fonts (SPEC 005a): replaces fonts.googleapis.com, which the
   site CSP (style-src/font-src 'self') blocked anyway. Same families/weights
   the old Google link requested; latin subset; variable-weight woff2 files.
   Licences: assets/fonts/OFL.txt (SIL OFL 1.1). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Anastasis web app — water theme. Calm, harmony, focused. */

:root {
  --bg: #050c11;
  --bg2: #071118;
  --card: #0a1620;
  --card2: #0e1f2b;
  --line: rgba(140, 205, 222, 0.09);
  --aqua: #3fc6de;
  --aqua-hi: #8deefc;
  --aqua-deep: #14768f;
  --red: #c1272d;
  --red-hi: #e0444a;
  --foam: #edf5f3;
  --gray: #8fa7b0;
  --dim: #57707a;
  --radius: 16px;
  --tabbar-h: 68px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--foam);
  font-family: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient water glow */
.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% -6%, rgba(63, 198, 222, 0.12), transparent 70%),
    radial-gradient(44% 26% at 85% 108%, rgba(20, 118, 143, 0.10), transparent 70%),
    radial-gradient(30% 20% at 12% 96%, rgba(63, 198, 222, 0.05), transparent 70%);
}

#app {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* ---------- top bar ---------- */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
}

.wordmark-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.3em;
  background: linear-gradient(180deg, var(--aqua-hi) 0%, var(--aqua) 60%, var(--aqua-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#topbar-right { display: flex; align-items: center; gap: 10px; }

.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--aqua-hi);
  background: rgba(63, 198, 222, 0.08);
  border: 1px solid rgba(63, 198, 222, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
  text-shadow: 0 0 14px rgba(63, 198, 222, 0.4);
}

.streak-pill svg { width: 14px; height: 14px; }

/* Beta countdown pill (testers only) — small, quiet, turns urgent under 24h. */
.beta-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffc46b;
  background: rgba(255, 170, 60, 0.07);
  border: 1px solid rgba(255, 170, 60, 0.35);
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.beta-timer svg { width: 13px; height: 13px; }
.beta-timer.urgent {
  color: #ff8f8f;
  border-color: rgba(255, 110, 110, 0.55);
  background: rgba(255, 90, 90, 0.08);
}

/* Beta-over lock screen. */
.beta-ended {
  max-width: 440px;
  margin: 16vh auto 0;
  text-align: center;
  padding: 36px 28px;
}
.be-lock {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffc46b;
  background: rgba(255, 170, 60, 0.08);
  border: 1px solid rgba(255, 170, 60, 0.35);
}
.be-lock svg { width: 28px; height: 28px; }
.beta-ended h2 {
  font-size: 26px;
  margin: 10px 0 12px;
  letter-spacing: 0.01em;
}
.beta-ended p { opacity: 0.75; line-height: 1.6; margin: 0 0 26px; }

.icon-btn {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--gray);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
}
.icon-btn:hover { color: var(--foam); border-color: rgba(140,205,222,0.3); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- views ---------- */
#view { flex: 1; padding: 10px 20px 26px; }

.view { animation: viewIn 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 8px;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 7.4vw, 42px);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--foam);
}

.h-sub { color: var(--dim); font-size: 14px; margin-top: 6px; letter-spacing: 0.02em; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 26px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(140, 205, 222, 0.05);
}

.card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 8px;
}

.card p.body { color: var(--foam); font-size: 16px; line-height: 1.55; }

.card .edit-link {
  margin-top: 10px;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
  font-family: var(--font);
}
.card .edit-link:hover { color: var(--aqua-hi); }

/* ---------- habit list ---------- */
.habit {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  min-height: 66px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s, transform 0.12s, background 0.25s;
  animation: habitIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes habitIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.habit:active { transform: scale(0.985); }

.check {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #2c424c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.25s, box-shadow 0.25s;
}
.check svg {
  width: 16px;
  height: 16px;
  color: #052530;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.habit.done .check {
  border-color: transparent;
  background: linear-gradient(135deg, var(--aqua-hi), var(--aqua-deep));
  box-shadow: 0 0 18px rgba(63, 198, 222, 0.45);
}
.habit.done .check svg { opacity: 1; transform: scale(1); }

.habit .name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.25s, opacity 0.25s;
}
.habit.done .name { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(63,198,222,0.5); }

.habit .leaving {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua-hi);
  background: rgba(63, 198, 222, 0.1);
  border: 1px solid rgba(63, 198, 222, 0.3);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.habit .archive-btn {
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
  flex: 0 0 auto;
}
.habit .archive-btn:hover { color: var(--red-hi); background: rgba(193, 39, 45, 0.1); }
.habit .archive-btn svg { width: 17px; height: 17px; display: block; }

.lock-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(63, 198, 222, 0.3);
  border-radius: 12px;
  background: rgba(63, 198, 222, 0.04);
  color: var(--gray);
  font-size: 13px;
  line-height: 1.55;
}
.lock-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--aqua); }

/* ---------- add habit ---------- */
.add-row { display: flex; gap: 10px; margin-top: 4px; }

.text-input, textarea.text-input {
  flex: 1;
  background: #08131a;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--foam);
  font-size: 16px;
  font-family: var(--font);
  padding: 15px 18px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.text-input::placeholder { color: var(--dim); }
.text-input:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(63, 198, 222, 0.15);
}

.btn-add {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--aqua-hi), var(--aqua-deep));
  color: #052530;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(63, 198, 222, 0.3);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.btn-add:hover { filter: brightness(1.08); }
.btn-add:active { transform: scale(0.93); }
.btn-add svg { width: 22px; height: 22px; }

.empty-state { text-align: center; padding: 34px 20px; }
.empty-state h3 { font-size: 19px; margin-bottom: 6px; }
.empty-state p { color: var(--gray); font-size: 14px; margin-bottom: 18px; }

/* ---------- buttons ---------- */
.btn, .btn-primary {
  display: inline-block;
  width: 100%;
  background: linear-gradient(180deg, #9df1ff 0%, var(--aqua) 55%, #1d9db8 100%);
  color: #052530;
  border: 0;
  border-radius: 14px;
  padding: 17px 24px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 8px 26px rgba(63, 198, 222, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.15s, filter 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.btn:hover, .btn-primary:hover { filter: brightness(1.07); }
.btn:active, .btn-primary:active { transform: scale(0.97); }
.btn:disabled, .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.5); }

.btn-ghost {
  display: inline-block;
  width: 100%;
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--foam); border-color: rgba(140,205,222,0.3); }

.link-btn {
  background: none;
  border: 0;
  color: var(--aqua-hi);
  font-size: 14px;
  cursor: pointer;
  padding: 10px;
  font-family: var(--font);
  letter-spacing: 0.04em;
}
.link-btn:hover { text-decoration: underline; }

.form-error {
  display: none;
  color: var(--red-hi);
  font-size: 13.5px;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}
.form-error.show { display: block; animation: viewIn 0.25s ease; }
.form-ok {
  display: none;
  color: var(--aqua);
  font-size: 13.5px;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}
.form-ok.show { display: block; animation: viewIn 0.25s ease; }
.danger-zone {
  margin: 34px auto 0;
  max-width: 420px;
  padding: 18px;
  border: 1px solid rgba(224, 68, 74, 0.35);
  border-radius: 14px;
  background: rgba(193, 39, 45, 0.06);
  text-align: center;
}
.push-card {
  margin: 26px auto 0;
  max-width: 420px;
  padding: 18px;
  border: 1px solid rgba(63, 198, 222, 0.3);
  border-radius: 14px;
  background: rgba(63, 198, 222, 0.05);
  text-align: center;
}
.push-card .dz-title { color: var(--aqua-hi); }
.push-card .btn[disabled] { opacity: 0.55; }
.fb-card { text-align: left; }
.fb-card .dz-title, .fb-card .dz-sub { text-align: center; }
.fb-chips { margin: 4px 0 2px; }
.fb-card textarea.text-input { width: 100%; min-height: 84px; resize: vertical; margin: 10px 0; }
.fb-card .btn { width: 100%; }
.fb-msg { font-size: 13px; min-height: 18px; margin: 8px 0 0; text-align: center; }
.fb-msg.ok { color: var(--aqua-hi); }
.fb-msg.err { color: #ff8f8f; }
.dz-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-hi); margin: 0 0 6px; }
.dz-sub { font-size: 13px; color: var(--dim); line-height: 1.55; margin: 0 0 14px; }
.btn-danger {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(224, 68, 74, 0.6);
  background: transparent;
  color: var(--red-hi);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(193, 39, 45, 0.15); }

/* ---------- auth / hero ---------- */
.hero {
  text-align: center;
  padding: 54px 6px 30px;
  animation: viewIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 12vw, 70px);
  letter-spacing: 0.18em;
  margin-left: 0.18em;
  background: linear-gradient(180deg, var(--aqua-hi) 0%, var(--aqua) 55%, var(--aqua-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(63, 198, 222, 0.3));
}
.hero .tagline { margin: 22px auto 0; color: var(--gray); font-size: 16.5px; line-height: 1.65; max-width: 380px; }
.hero .launchline {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--aqua);
}

.auth-card { margin-top: 8px; }
.auth-card .field { margin-bottom: 12px; }
.auth-card .btn { margin-top: 8px; }
.auth-switch { text-align: center; margin-top: 18px; color: var(--dim); font-size: 14px; }

/* ---------- onboarding ---------- */
.onboard { padding-top: 40px; animation: viewIn 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.onboard h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 7vw, 38px);
  letter-spacing: 0.02em;
  color: var(--foam);
}
.onboard .lede { color: var(--gray); font-size: 15px; line-height: 1.7; margin: 14px 0 20px; max-width: 420px; }
.onboard textarea.text-input { min-height: 150px; resize: vertical; }
.onboard .btn { margin-top: 18px; }

/* ---------- journey calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.cal-title { font-size: 15px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); }
.cal-nav { display: flex; gap: 8px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 6px 0;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--foam);
  background: #08131a;
  border: 1px solid transparent;
  transition: transform 0.15s, background 0.3s;
  position: relative;
}
.cal-day.blank { background: transparent; }
.cal-day.today { border: 2px solid var(--aqua); box-shadow: 0 0 14px rgba(63, 198, 222, 0.4); font-weight: 700; }
.cal-day.future { opacity: 0.32; }
.cal-legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--dim); font-size: 12px; }
.cal-legend .swatches { display: flex; gap: 4px; }
.cal-legend .sw { width: 16px; height: 16px; border-radius: 5px; }

/* reflections on the journey calendar */
.cal-day[data-ymd] { cursor: pointer; }
.cal-day.has-refl::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua-hi);
  box-shadow: 0 0 6px rgba(141, 238, 252, 0.8);
}
.cal-hint { margin-top: 14px; color: var(--dim); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.refl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-hi); box-shadow: 0 0 6px rgba(141, 238, 252, 0.8); flex: 0 0 7px; }

/* ---------- reflect ---------- */
.reflect-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  color: var(--gray);
  line-height: 1.6;
  margin: 16px 0 20px;
  padding-left: 16px;
  border-left: 2px solid var(--aqua);
}
.reflect-area { min-height: 220px; resize: vertical; font-size: 16.5px; line-height: 1.65; }
.reflect-save { margin-top: 16px; }
.saved-note { text-align: center; color: var(--aqua-hi); font-size: 13px; margin-top: 12px; min-height: 20px; letter-spacing: 0.06em; }
/* multi-note reflections */
.rnotes { margin: 4px 0 6px; }
.rnote { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.rnote-time { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.rnote-body { font-size: 16px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.rnote-actions { margin-top: 10px; display: flex; gap: 18px; }
.rnote-del { color: var(--red-hi); }
.rnotes-empty { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 6px 0 18px; }
.reflect-add-area { min-height: 120px; resize: vertical; font-size: 16px; line-height: 1.6; }
.rnote-edit-area { min-height: 120px; resize: vertical; font-size: 16px; line-height: 1.6; }

/* ---------- progress ---------- */
.stat-card { margin-bottom: 12px; }
.stat-card .num {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--aqua-hi), var(--aqua-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-card .num .unit { font-size: 17px; font-weight: 700; }
.progress-foot {
  text-align: center;
  color: var(--dim);
  font-style: italic;
  font-size: 14px;
  margin-top: 26px;
  letter-spacing: 0.02em;
}

/* areas being rebuilt */
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.area-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aqua-hi);
  border: 1px solid rgba(63, 198, 222, 0.35);
  background: rgba(63, 198, 222, 0.07);
  padding: 7px 13px;
  border-radius: 999px;
}

/* ---------- tab bar ---------- */
#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(5, 12, 17, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
#tabbar[hidden] { display: none; }
.tab {
  flex: 1;
  background: none;
  border: 0;
  color: var(--dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 22px; height: 22px; transition: transform 0.2s; }
.tab.active { color: var(--aqua-hi); text-shadow: 0 0 12px rgba(63, 198, 222, 0.45); }
.tab.active svg { transform: translateY(-1px); }
.tab:active svg { transform: scale(0.88); }

/* ---------- modal ---------- */
#modal-root:empty { display: none; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 8, 12, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #0e1e29, #0a141c);
  border: 1px solid rgba(140, 205, 222, 0.14);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h3 { font-size: 18px; margin-bottom: 10px; }
.modal p { color: var(--gray); font-size: 14.5px; line-height: 1.65; margin-bottom: 14px; }
.modal p strong { color: var(--foam); }
.modal textarea.text-input { min-height: 110px; resize: vertical; margin-bottom: 6px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn, .modal-actions .btn-ghost { padding: 14px 20px; font-size: 12.5px; }

/* ---------- toast ---------- */
#toast-root {
  position: fixed;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 20px;
}
.toast {
  background: #0c1a24;
  border: 1px solid rgba(63, 198, 222, 0.35);
  color: var(--foam);
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(63, 198, 222, 0.12);
  animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 100%;
  text-align: center;
}
.toast.out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px) scale(0.96); }
}

/* ---------- misc ---------- */
.greeting {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 8vw, 42px);
  color: var(--foam);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.date-line { font-size: 13px; color: var(--dim); margin-top: 4px; letter-spacing: 0.06em; }

.db-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
  line-height: 1.7;
}
.db-error h2 { font-family: var(--font-display); color: var(--aqua); margin-bottom: 12px; letter-spacing: 0.04em; }

@media (min-width: 640px) {
  #view { padding-left: 28px; padding-right: 28px; }
  #topbar { padding-left: 28px; padding-right: 28px; }
}

/* ---------- flow (the streak, water) ---------- */
.flow-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background:
    radial-gradient(120% 130% at 50% 115%, rgba(63, 198, 222, 0.16), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid rgba(63, 198, 222, 0.24);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(140, 205, 222, 0.07);
}
.flow-big {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  color: #5fd7ec;
  filter: drop-shadow(0 0 14px rgba(63, 198, 222, 0.5));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-pulse { display: block; width: 100%; height: 100%; animation: ripplePulse 3.4s ease-in-out infinite; transform-origin: 50% 50%; }
.flow-pulse svg { width: 100%; height: 100%; display: block; }
@keyframes ripplePulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.1); opacity: 1; }
}
.flow-hero.still { border-color: var(--line); }
.flow-hero.still .flow-big { color: #2a3d47; filter: none; }
.flow-hero.still .flow-pulse { animation: none; }
.flow-stage {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--aqua-hi), var(--aqua) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flow-count { font-size: 24px; font-weight: 700; color: var(--foam); line-height: 1.2; margin-top: 2px; }
.flow-note { font-size: 13px; color: var(--dim); margin-top: 4px; line-height: 1.5; }

/* reason strip — lean quote under the flow */
.reason-strip { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 20px; }
.rs-quote { font-family: var(--font-display); font-style: italic; color: var(--foam); opacity: 0.75; font-size: 18px; line-height: 1.5; }
.rs-edit { font-size: 12px; flex: 0 0 auto; }

/* ---------- signup wizard ---------- */
.wiz { animation: viewIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.wsteps { display: flex; gap: 10px; margin: 26px 0 24px; }
.wstep {
  flex: 1;
  padding-top: 10px;
  border-top: 2px solid #1b2b34;
  color: #3d545e;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: border-color 0.3s, color 0.3s;
}
.wstep-n { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.05em; }
.wstep.now { border-color: var(--aqua); color: var(--foam); }
.wstep.now .wstep-n { color: var(--aqua-hi); }
.wstep.done { border-color: #1e4b5a; color: var(--dim); }
.wiz-slide { animation: wizIn 0.38s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes wizIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
.w-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 10vw, 54px);
  line-height: 1.05;
  margin: 4px 0 10px;
  color: var(--foam);
  text-shadow: 0 0 34px rgba(63, 198, 222, 0.25);
}
.w-sub { color: var(--gray); font-size: 15px; line-height: 1.6; margin: 0 0 20px; max-width: 340px; }
.fld { display: block; margin-bottom: 14px; }
.fld > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.w-nav { display: flex; gap: 10px; margin-top: 20px; }
.w-nav .btn-ghost { flex: 1; width: auto; }
.w-nav .btn-primary { flex: 1.5; }

/* battleground chips */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.chip {
  padding: 15px 6px;
  border-radius: 14px;
  border: 1px solid #1c2e38;
  background: linear-gradient(180deg, #0c1820, #081218);
  color: var(--gray);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s, color 0.15s, box-shadow 0.2s, background 0.2s;
}
.chip:active { transform: scale(0.94); }
.chip.on {
  border-color: var(--aqua);
  color: #fff;
  background: linear-gradient(180deg, rgba(141, 238, 252, 0.22), rgba(63, 198, 222, 0.08));
  box-shadow: 0 0 0 1px var(--aqua), 0 6px 20px rgba(63, 198, 222, 0.25);
}

/* the contract */
.contract {
  border: 1px solid #1c2e38;
  border-left: 3px solid var(--aqua);
  background: linear-gradient(180deg, #0c1820, #081218);
  border-radius: 14px;
  padding: 20px 18px;
  margin: 4px 0 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.contract p { margin: 0 0 14px; color: var(--foam); font-size: 15px; line-height: 1.6; }
.contract p:last-child { margin-bottom: 0; }
.contract strong { color: #fff; }
.contract-hard {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px !important;
  letter-spacing: 0.03em;
  line-height: 1.35 !important;
  color: #fff !important;
  text-shadow: 0 0 20px rgba(63, 198, 222, 0.35);
}
.accept-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px dashed #2c424c;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
  transition: border-color 0.2s;
}
.accept-row:hover { border-color: #3f5a66; }
.accept-row input { position: absolute; opacity: 0; pointer-events: none; }
.accept-box {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid #2c424c;
  flex: 0 0 26px;
  position: relative;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.accept-row input:checked + .accept-box {
  background: linear-gradient(180deg, var(--aqua-hi), var(--aqua));
  border-color: var(--aqua);
  box-shadow: 0 0 16px rgba(63, 198, 222, 0.5);
}
.accept-row input:checked + .accept-box::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #052530; font-weight: 800; font-size: 16px;
}
.accept-row input:focus-visible + .accept-box { outline: 2px solid var(--aqua-hi); outline-offset: 2px; }

/* ================= LIVING WATER — home screen ================= */

/* ocean backdrop: visible on home only, never restarts */
.ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s ease;
}
body[data-tab="home"] .ocean { opacity: 1; }
.ocean .or {
  position: absolute;
  left: 50%;
  top: -14%;
  border: 1px solid rgba(63, 198, 222, 0.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: oceanBreathe 9s ease-in-out infinite alternate;
}
.ocean .o1 { width: 62vmax; height: 62vmax; }
.ocean .o2 { width: 84vmax; height: 84vmax; animation-delay: -1.5s; }
.ocean .o3 { width: 108vmax; height: 108vmax; animation-delay: -3s; }
.ocean .o4 { width: 134vmax; height: 134vmax; animation-delay: -4.5s; }
.ocean .o5 { width: 162vmax; height: 162vmax; animation-delay: -6s; }
.ocean .oglow {
  position: absolute;
  width: 74vmax;
  height: 74vmax;
  left: 50%;
  top: 32%;
  background: radial-gradient(circle, rgba(63, 198, 222, 0.075), transparent 65%);
  animation: oceanDrift 17s ease-in-out infinite alternate;
}
.ocean .bub {
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 238, 252, 0.55), rgba(141, 238, 252, 0) 70%);
  animation: rise linear infinite;
  opacity: 0;
}
.ocean .b1 { left: 12%; width: 9px; height: 9px; animation-duration: 12s; }
.ocean .b2 { left: 27%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: -4s; }
.ocean .b3 { left: 54%; width: 11px; height: 11px; animation-duration: 13s; animation-delay: -8s; }
.ocean .b4 { left: 71%; width: 6px; height: 6px; animation-duration: 17s; animation-delay: -2s; }
.ocean .b5 { left: 86%; width: 9px; height: 9px; animation-duration: 14s; animation-delay: -10s; }
.ocean .b6 { left: 40%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: -6s; }

@keyframes oceanBreathe {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  to   { transform: translate(-50%, -50%) scale(1.045); opacity: 1; }
}
@keyframes oceanDrift {
  from { transform: translate(-58%, -44%); }
  to   { transform: translate(-42%, -56%); }
}
@keyframes rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.75; }
  88%  { opacity: 0.5; }
  100% { transform: translateY(-108vh); opacity: 0; }
}

/* home layout */
.home .greeting { margin-top: 6px; }
.home-quote { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 0; }
.hq-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray);
}
.hq-edit { font-size: 11px; padding: 6px 4px; flex: 0 0 auto; }

/* the flow orb */
#flow-orb { margin: 4px 0 2px; }
.orb {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 1;
  margin: 14px auto 0;
}
.orb-sonar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(93, 215, 236, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.52);
  opacity: 0;
  animation: sonar 4.8s ease-out infinite;
}
.orb-sonar.s2 { animation-delay: 1.2s; }
.orb-sonar.s3 { animation-delay: 2.4s; }
.orb-sonar.s4 { animation-delay: 3.6s; }
@keyframes sonar {
  0%   { transform: translate(-50%, -50%) scale(0.52); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
.orb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(63, 198, 222, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orb-ring.r1 { width: 80%; height: 80%; }
.orb-ring.r2 { width: 62%; height: 62%; opacity: 0.7; }
.orb-ring.r3 { width: 46%; height: 46%; opacity: 0.45; }
.orb-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18%;
  animation: coreBreathe 5.2s ease-in-out infinite;
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.orb-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--foam);
  letter-spacing: 0.01em;
  text-shadow: 0 0 22px rgba(63, 198, 222, 0.35);
}
.orb-stage {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aqua-hi);
  margin-top: 8px;
  text-shadow: 0 0 16px rgba(63, 198, 222, 0.55);
}
.orb-days {
  font-size: 27px;
  font-weight: 800;
  color: var(--foam);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.orb.still .orb-sonar { display: none; }
.orb.still .orb-ring { border-color: rgba(63, 198, 222, 0.1); }
.orb.still .orb-title { color: var(--gray); text-shadow: none; }
.orb-note {
  text-align: center;
  color: var(--gray);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  margin: 16px 0 2px;
  line-height: 1.55;
  padding: 0 24px;
}

/* today header */
.today-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 24px 0 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(140, 205, 222, 0.12);
}
.th-title { font-size: 17px; font-weight: 700; color: var(--foam); }
.th-dot { color: var(--dim); }
.th-date { color: var(--gray); font-size: 14px; }
.th-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* habit rows — clean, borderless, rounded-square checks */
.home .habit {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 13px 6px;
  margin-bottom: 2px;
  border-radius: 14px;
}
.home .habit:active { background: rgba(63, 198, 222, 0.05); transform: scale(0.995); }
.check { border-radius: 10px; width: 30px; height: 30px; border-color: #33505c; }
.home .habit .name { font-weight: 600; }

/* floating tab bar */
#tabbar {
  left: 14px;
  right: 14px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: var(--tabbar-h);
  padding-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(8, 18, 25, 0.85);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6), 0 0 26px rgba(63, 198, 222, 0.07);
}
#app {
  padding-bottom: calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom));
}
/* Form controls near the bottom of a view must be able to scroll fully
   clear of the floating tab bar (found in live testing 2026-10-12: the
   Add vice row could sit under the bar on short screens). */
.view input, .view textarea, .view select, .view .add-row {
  scroll-margin-bottom: calc(var(--tabbar-h) + 48px + env(safe-area-inset-bottom));
}
#toast-root {
  bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom));
}

/* ================= DESKTOP — make the column intentional ================= */
@media (min-width: 760px) {
  body {
    background:
      radial-gradient(60% 45% at 50% 0%, rgba(63, 198, 222, 0.06), transparent 70%),
      radial-gradient(80% 60% at 50% 110%, rgba(20, 118, 143, 0.10), transparent 70%),
      var(--bg);
  }
  #app {
    max-width: 440px;
    border-left: 1px solid rgba(140, 205, 222, 0.10);
    border-right: 1px solid rgba(140, 205, 222, 0.10);
    box-shadow:
      0 0 90px rgba(0, 0, 0, 0.55),
      0 0 140px rgba(63, 198, 222, 0.05);
  }
  .view { padding: 34px 34px 0; }
  .greeting { font-size: 36px; }
  .orb { width: min(74vw, 320px); }
  /* keep the floating tab bar inside the column */
  #tabbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 412px;
    max-width: calc(100vw - 28px);
  }
  #toast-root { left: 50%; transform: translateX(-50%); right: auto; width: 412px; max-width: calc(100vw - 28px); }
}

/* large desktop: let the ocean breathe around the column */
@media (min-width: 1200px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(34vmax 34vmax at 12% 78%, rgba(63, 198, 222, 0.05), transparent 70%),
      radial-gradient(30vmax 30vmax at 88% 22%, rgba(63, 198, 222, 0.045), transparent 70%);
  }
}

/* ---------- vices: breaking free ---------- */
.vice-head { margin-top: 30px; }
.habit.vice .name { position: relative; }
.vice-clean {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--aqua);
  margin-top: 3px;
  opacity: 0.9;
}
.habit.vice.done .vice-clean { color: var(--aqua-hi); }
.vice-empty {
  color: var(--dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 2px 0;
}

/* ---------- wizard build/break steps ---------- */
.wiz-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.wiz-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15px; font-weight: 600; color: var(--foam);
}
.wiz-item .check.on {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  display: flex; align-items: center; justify-content: center; color: #04222b;
}
.wiz-item .check.on svg { width: 14px; height: 14px; }
.wiz-item.vice .vice-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #f2a7b5, #c25a72);
  box-shadow: 0 0 10px rgba(194, 90, 114, 0.5);
}
.wiz-hint { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 14px 2px; }
.add-row.wiz-add { margin-top: 12px; }

/* ---------- profile ---------- */
.profile .eyebrow { margin-bottom: 6px; }
.p-email {
  font-family: var(--font-display, var(--font));
  font-size: 24px; font-weight: 700; color: var(--foam);
  margin: 0; word-break: break-all;
}
.p-sub { color: var(--dim); font-size: 13.5px; margin: 6px 0 0; letter-spacing: 0.03em; }
.p-name { color: var(--dim); font-size: 14px; margin: 8px 0 0; }
.p-name strong { color: var(--foam); font-weight: 700; }
.p-name .link-btn { margin-left: 6px; }
.reason-strip {
  margin-top: 18px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-left: 3px solid var(--aqua);
  border-radius: 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.rs-quote { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--foam); flex: 1; }
.rs-edit { flex: none; margin-top: 2px; }
.p-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 18px;
}
.p-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 6px; text-align: center;
  display: flex; flex-direction: column; gap: 5px;
}
.p-num { font-size: 22px; font-weight: 800; color: var(--aqua-hi); font-variant-numeric: tabular-nums; }
.p-lab { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.p-vices { display: flex; flex-direction: column; gap: 8px; }
.p-vice {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--foam);
}
.p-vice-clean { font-size: 12.5px; color: var(--aqua); font-weight: 600; }

/* ---------- rewards / badges ---------- */
.rewards-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 28px; margin-bottom: 12px; }
.rewards-count { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--aqua); text-transform: uppercase; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge {
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 8px 14px; text-align: center;
  opacity: 0.45; filter: saturate(0.4);
}
.badge.earned {
  opacity: 1; filter: none;
  border-color: rgba(63, 198, 222, 0.45);
  background: radial-gradient(circle at 50% 0%, rgba(63, 198, 222, 0.14), rgba(255, 255, 255, 0.02) 70%);
  box-shadow: 0 0 18px rgba(63, 198, 222, 0.12);
}
.badge-medal {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 24px; color: var(--dim);
}
.badge.earned .badge-medal {
  border-color: rgba(63, 198, 222, 0.6); color: var(--aqua-hi);
  background: radial-gradient(circle at 35% 30%, rgba(63, 198, 222, 0.35), rgba(10, 40, 52, 0.6));
  box-shadow: 0 0 16px rgba(63, 198, 222, 0.35);
}
.badge-name { font-size: 12.5px; font-weight: 700; color: var(--foam); letter-spacing: 0.02em; }
.badge-desc { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.4; }
.btn-logout {
  margin: 30px auto 0; display: flex; align-items: center; gap: 8px;
  color: var(--dim);
}
.btn-logout svg { width: 18px; height: 18px; }
.btn-logout:hover { color: var(--foam); }

/* ---------------- face the day (daily check-in) ---------------- */
.orb-btn {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 24px;
  transition: transform .25s ease;
}
.orb-btn:hover { transform: scale(1.015); }
.orb-btn:active { transform: scale(0.985); }
.orb-btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 6px; }
.orb-hint {
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .04em;
  margin: 10px 0 0;
  animation: ci-rise .7s ease both;
}

.ci-screen {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 48px;
  animation: ci-rise .5s ease both;
}
@keyframes ci-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.ci-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 4px;
}
.ci-head-t { flex: 1; }
.ci-title { margin: 2px 0 4px; }
.ci-date { color: var(--dim); font-size: 13px; letter-spacing: .06em; }
.ci-head-sp { width: 40px; flex: 0 0 auto; }

.ci-sec {
  margin-top: 26px;
  animation: ci-rise .55s ease both;
}
.ci-sec:nth-of-type(2) { animation-delay: .05s; }
.ci-sec:nth-of-type(3) { animation-delay: .1s; }
.ci-sec:nth-of-type(4) { animation-delay: .15s; }
.ci-sec h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.ci-sub { color: var(--dim); font-size: 13.5px; margin-bottom: 12px; }

.rate-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.rate-row.read-only .rate-orb { cursor: default; }
.rate-orb {
  flex: 1;
  aspect-ratio: 1;
  max-width: 64px;
  border-radius: 50%;
  border: 1px solid rgba(140, 205, 222, 0.25);
  background: rgba(14, 31, 43, 0.6);
  color: var(--gray);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s;
}
.rate-orb:hover { transform: translateY(-2px); border-color: rgba(140, 205, 222, 0.5); }
.rate-orb.sel {
  background: radial-gradient(circle at 35% 30%, var(--aqua-hi), var(--aqua) 60%, var(--aqua-deep));
  color: #04222b;
  border-color: transparent;
  box-shadow: 0 0 24px rgba(63, 198, 222, 0.45);
  animation: ci-pop .3s ease;
}
@keyframes ci-pop {
  0% { transform: scale(0.9); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.ci-note { width: 100%; resize: vertical; min-height: 64px; }
.ci-note-text {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 2px solid var(--aqua);
  background: rgba(63, 198, 222, 0.06);
  border-radius: 0 12px 12px 0;
  color: var(--foam);
  font-style: italic;
  line-height: 1.55;
}

.ci-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  animation: ci-rise .45s ease both;
}
.ci-item.vice { border-color: rgba(193, 39, 45, 0.18); }
.ci-name {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 10px;
}
.seg { display: flex; gap: 8px; }
.seg-btn {
  flex: 1;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid rgba(140, 205, 222, 0.22);
  background: rgba(7, 17, 24, 0.7);
  color: var(--gray);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.seg-btn:hover { border-color: rgba(140, 205, 222, 0.45); color: var(--foam); }
.seg-btn.sel { color: #04222b; border-color: transparent; animation: ci-pop .3s ease; }
.seg-btn.seg-good.sel, .seg-btn.seg-clean.sel {
  background: linear-gradient(135deg, var(--aqua-hi), var(--aqua));
  box-shadow: 0 4px 18px rgba(63, 198, 222, 0.35);
}
.seg-btn.seg-missed.sel {
  background: linear-gradient(135deg, #8fa7b0, #5d737d);
  box-shadow: 0 4px 18px rgba(120, 140, 150, 0.25);
}
.seg-btn.seg-relapsed.sel {
  background: linear-gradient(135deg, var(--red-hi), var(--red));
  color: #fff;
  box-shadow: 0 4px 18px rgba(193, 39, 45, 0.4);
}

.ci-why {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease, margin .3s ease;
  margin-top: 0;
}
.ci-why.show {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}
.ci-why > label, .ci-why > textarea { overflow: hidden; min-height: 0; }
.ci-why label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 8px;
}
.ci-why .req {
  color: var(--red-hi);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ci-why textarea { width: 100%; resize: vertical; min-height: 64px; }

.ci-hint {
  text-align: center;
  color: var(--dim);
  font-size: 14px;
  min-height: 22px;
  margin: 22px 0 12px;
}
.ci-hint.err { color: var(--red-hi); }

.ci-seal {
  display: block;
  width: 100%;
  padding: 18px;
  border: 0;
  border-radius: 18px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #04222b;
  background: linear-gradient(135deg, var(--aqua-hi), var(--aqua) 55%, var(--aqua-deep));
  box-shadow: 0 10px 34px rgba(63, 198, 222, 0.35);
  cursor: pointer;
  transition: transform .15s ease, filter .2s, box-shadow .3s;
  animation: ci-seal-breathe 3.2s ease-in-out infinite;
}
@keyframes ci-seal-breathe {
  0%, 100% { box-shadow: 0 10px 34px rgba(63, 198, 222, 0.3); }
  50% { box-shadow: 0 10px 44px rgba(63, 198, 222, 0.5); }
}
.ci-seal:hover:not(:disabled) { filter: brightness(1.06); }
.ci-seal:active:not(:disabled) { transform: scale(0.98); }
.ci-seal:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  animation: none;
  filter: grayscale(0.4);
}
.ci-fine {
  text-align: center;
  color: var(--dim);
  font-size: 12.5px;
  margin-top: 12px;
  letter-spacing: .03em;
}

/* sealed read-only state */
.ci-sealed-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(63, 198, 222, 0.12), rgba(63, 198, 222, 0.04));
  border: 1px solid rgba(63, 198, 222, 0.3);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 18px;
  animation: ci-rise .5s ease both;
}
.seal-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(63, 198, 222, 0.15);
  color: var(--aqua);
}
.seal-mark svg { width: 20px; height: 20px; }
.ci-sealed-banner strong { font-size: 16px; letter-spacing: .02em; }
.ci-sealed-banner p { color: var(--dim); font-size: 13.5px; margin-top: 6px; }
.perfect-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #04222b;
  background: linear-gradient(135deg, var(--aqua-hi), var(--aqua));
  vertical-align: middle;
}
.ci-item.sealed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ci-item.sealed .ci-name { margin-bottom: 0; }
.ci-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ci-pill.p-done, .ci-pill.p-clean {
  background: rgba(63, 198, 222, 0.15);
  color: var(--aqua-hi);
  border: 1px solid rgba(63, 198, 222, 0.4);
}
.ci-pill.p-missed {
  background: rgba(143, 167, 176, 0.12);
  color: var(--gray);
  border: 1px solid rgba(143, 167, 176, 0.3);
}
.ci-pill.p-relapsed {
  background: rgba(193, 39, 45, 0.14);
  color: var(--red-hi);
  border: 1px solid rgba(193, 39, 45, 0.4);
}
.ci-why-text {
  margin: -4px 0 12px;
  padding: 12px 16px;
  border-left: 2px solid var(--red);
  background: rgba(193, 39, 45, 0.06);
  border-radius: 0 12px 12px 0;
  color: var(--gray);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 420px) {
  .rate-orb { font-size: 16px; }
  .seg-btn { font-size: 13px; padding: 10px 6px; }
  .ci-seal { font-size: 15px; }
}

/* ---------- today's list (home) ---------- */
.today-count { color: var(--dim); letter-spacing: 0.08em; font-size: 11px; font-weight: 400; }
.home-list { margin-bottom: 6px; }
.home-list.locked .habit { cursor: default; }
.home-list.locked .habit:active { transform: none; }
.home-list.locked .archive-btn { display: none; }

/* ---------- rekindle ---------- */
.rekindle { margin: 18px 0 6px; text-align: center; padding: 22px 18px; border-color: rgba(140, 205, 222, 0.24); }
.rekindle-t { font-family: var(--font-display); font-size: 23px; color: var(--foam); margin-bottom: 6px; }
.rekindle-s { color: var(--dim); font-size: 13.5px; margin-bottom: 14px; line-height: 1.55; }

/* ---------- seal ceremony ---------- */
.seal-ceremony {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(70% 50% at 50% 45%, rgba(20, 118, 143, 0.30), rgba(5, 12, 17, 0.97) 78%);
  cursor: pointer;
  animation: scIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.seal-ceremony.out { animation: scOut 0.38s ease forwards; }
@keyframes scIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scOut { to { opacity: 0; } }
.sc-bloom { position: relative; width: 190px; height: 190px; margin-bottom: 26px; }
.sc-core {
  position: absolute; inset: 62px; border-radius: 50%;
  background: radial-gradient(circle, var(--aqua-hi) 0%, var(--aqua) 45%, rgba(63, 198, 222, 0) 72%);
  animation: scCore 2.6s ease-out forwards;
}
@keyframes scCore {
  0% { transform: scale(0.2); opacity: 0; }
  35% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
.sc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(141, 238, 252, 0.55);
  opacity: 0;
  animation: scRing 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sc-ring.r2 { animation-delay: 0.28s; border-color: rgba(63, 198, 222, 0.4); }
.sc-ring.r3 { animation-delay: 0.56s; border-color: rgba(63, 198, 222, 0.25); }
@keyframes scRing {
  0% { transform: scale(0.25); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.sc-title {
  font-family: var(--font-display); font-size: clamp(38px, 10vw, 54px);
  color: var(--foam); letter-spacing: 0.02em; text-align: center;
  animation: scText 0.7s 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.sc-sub {
  color: var(--gray); font-size: 15px; margin-top: 10px; text-align: center; padding: 0 24px;
  animation: scText 0.7s 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.sc-flow {
  color: var(--aqua); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; margin-top: 18px;
  animation: scText 0.7s 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes scText {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- coach tab ---------- */
.coach-msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 38dvh;
  max-height: 52dvh;
  overflow-y: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.coach-msg { display: flex; animation: viewIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.coach-msg.user { justify-content: flex-end; }
.coach-bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--foam);
  overflow-wrap: break-word;
}
.coach-msg.user .coach-bubble {
  background: linear-gradient(180deg, rgba(63, 198, 222, 0.20), rgba(63, 198, 222, 0.08));
  border-color: rgba(63, 198, 222, 0.30);
  border-bottom-right-radius: 6px;
}
.coach-msg.coach .coach-bubble { border-bottom-left-radius: 6px; }
.coach-bubble.typing { display: flex; gap: 5px; padding: 15px 17px; }
.coach-bubble.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aqua); opacity: 0.35;
  animation: coachBlink 1.1s infinite;
}
.coach-bubble.typing span:nth-child(2) { animation-delay: 0.18s; }
.coach-bubble.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes coachBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.coach-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}
#coach-input {
  flex: 1;
  resize: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--foam);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  padding: 12px 14px;
  max-height: 120px;
}
#coach-input::placeholder { color: var(--dim); }
#coach-input:focus { outline: none; border-color: rgba(63, 198, 222, 0.45); }
.coach-send {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(63, 198, 222, 0.35);
  background: linear-gradient(180deg, rgba(63, 198, 222, 0.25), rgba(63, 198, 222, 0.08));
  color: var(--aqua-hi);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.coach-send svg { width: 20px; height: 20px; }
.coach-send:active { transform: scale(0.92); }
.coach-send:disabled { opacity: 0.45; cursor: default; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orb-sonar, .sc-ring { display: none; }
}