/* =========================================================
   QUIET FOOD NOISE — design tokens
   Palette: dusk indigo base, lavender + dusty rose accents.
   Feel: a calm room, not a clinical screen.
========================================================= */

@font-face{
  font-family: 'Fraunces';
  src: url('fonts/fraunces-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fraunces';
  src: url('fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fraunces';
  src: url('fonts/fraunces-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Quicksand';
  src: url('fonts/quicksand-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Quicksand';
  src: url('fonts/quicksand-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Quicksand';
  src: url('fonts/quicksand-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Outfit';
  src: url('fonts/outfit-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Outfit';
  src: url('fonts/outfit-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Outfit';
  src: url('fonts/outfit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg-deep:      #14121F;
  --bg-card:      #1E1B2E;
  --bg-elevated:  #2A2640;
  --bg-elevated-2:#332C4D;

  --accent-lav:   #9B8FE0;
  --accent-lav-soft: #6F63A8;
  --accent-rose:  #E3A9C9;
  --accent-rose-soft: #B884A3;
  --accent-gold:  #E8C994;

  --text-hi:      #F1EEFA;
  --text-mid:     #C7C1DD;
  --text-low:     #8E87A8;

  --line-soft:    rgba(241,238,250,0.08);
  --shadow-soft:  rgba(10,8,20,0.45);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --ease-calm: cubic-bezier(.4,0,.2,1);
  --dur-screen: 480ms;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg-deep);
  overflow: hidden;
}
body{
  font-family: var(--font-body);
  color: var(--text-hi);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
textarea, input{ user-select: text; -webkit-user-select: text; }

button{
  font-family: var(--font-ui);
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent-lav);
  outline-offset: 3px;
}

/* ---------- ambient background ---------- */
.ambient{
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #16131F 0%, #1A1730 45%, #1C1626 100%);
}
.ambient-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  will-change: transform;
}
.blob-a{
  width: 70vw; height: 70vw;
  top: -20vw; left: -15vw;
  background: radial-gradient(circle, var(--accent-lav-soft), transparent 70%);
  animation: driftA 26s ease-in-out infinite alternate;
}
.blob-b{
  width: 80vw; height: 80vw;
  bottom: -30vw; right: -20vw;
  background: radial-gradient(circle, var(--accent-rose-soft), transparent 70%);
  animation: driftB 32s ease-in-out infinite alternate;
}
@keyframes driftA{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(6vw, 8vw) scale(1.15); }
}
@keyframes driftB{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-5vw, -6vw) scale(1.1); }
}

/* ---------- app shell / screen system ---------- */
#app{
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.screen{
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-screen) var(--ease-calm), transform var(--dur-screen) var(--ease-calm);
}
.screen.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ---------- shared layout wraps ---------- */
.home-wrap, .flow-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 28px;
}

.home-top{
  display:flex; align-items:center; justify-content:space-between;
}
.icon-btn{
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  color: var(--text-mid);
  transition: background 200ms var(--ease-calm), color 200ms var(--ease-calm), transform 150ms var(--ease-calm);
}
.icon-btn svg{ width: 21px; height: 21px; }
.icon-btn:active{ transform: scale(0.92); background: rgba(255,255,255,0.09); }

.home-title-mark{
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-low);
  text-transform: lowercase;
}

.home-center{
  flex: 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
  text-align:center;
}
.home-kicker{
  font-size: 15px;
  color: var(--text-low);
  letter-spacing: 0.02em;
  margin: 0;
}
.done-title{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text-hi);
  margin: 0;
  max-width: 280px;
  line-height: 1.35;
}

.home-bottom{
  display:flex; flex-direction:column; align-items:center; gap: 14px;
  padding-bottom: 6px;
}

/* ---------- the orb: signature element ---------- */
.orb-wrap{
  position: relative;
  width: 180px; height: 180px;
  display:flex; align-items:center; justify-content:center;
}
.orb-core{
  position:absolute;
  width: 64%; height: 64%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C9BFF2, var(--accent-lav) 45%, var(--accent-rose-soft) 100%);
  box-shadow: 0 0 50px 6px rgba(155, 143, 224, 0.35);
}
.orb-ring{
  position:absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(155,143,224,0.35);
}
.orb-ring.ring-2{
  width: 130%; height: 130%;
  border-color: rgba(227,169,201,0.22);
}

.orb-idle .orb-core{
  animation: orbPulseIdle 6s ease-in-out infinite;
}
.orb-idle .orb-ring{
  animation: ringPulseIdle 6s ease-in-out infinite;
}
@keyframes orbPulseIdle{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes ringPulseIdle{
  0%,100%{ transform: scale(1); opacity: 0.7; }
  50%{ transform: scale(1.12); opacity: 0.3; }
}

/* breathing orb states driven by JS via data-phase on #breathe-orb */
.orb-breathing .orb-core,
.orb-breathing .orb-ring{
  transition: transform 4000ms cubic-bezier(.45,0,.55,1), opacity 4000ms ease;
}
.orb-breathing[data-phase="in"] .orb-core{ transform: scale(1.35); }
.orb-breathing[data-phase="in"] .orb-ring{ transform: scale(1.5); opacity: 0.85; }
.orb-breathing[data-phase="hold"] .orb-core{ transform: scale(1.35); }
.orb-breathing[data-phase="hold"] .orb-ring{ transform: scale(1.5); opacity: 0.85; }
.orb-breathing[data-phase="out"] .orb-core{ transform: scale(0.85); }
.orb-breathing[data-phase="out"] .orb-ring{ transform: scale(0.95); opacity: 0.4; }

/* ---------- buttons ---------- */
.btn-primary{
  width: 100%;
  max-width: 420px;
  padding: 19px 28px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-lav) 0%, var(--accent-rose) 100%);
  color: #20162C;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -8px rgba(155,143,224,0.55);
  transition: transform 160ms var(--ease-calm), box-shadow 160ms var(--ease-calm), opacity 200ms;
}
.btn-primary:active{ transform: scale(0.97); box-shadow: 0 6px 18px -6px rgba(155,143,224,0.5); }
.btn-primary:disabled{ opacity: 0.35; box-shadow:none; }

.btn-huge{
  padding: 23px 28px;
  font-size: 18px;
}

.btn-ghost{
  padding: 12px 18px;
  color: var(--text-low);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  transition: color 160ms var(--ease-calm), background 160ms var(--ease-calm);
}
.btn-ghost:active{ color: var(--text-mid); background: rgba(255,255,255,0.04); }

.back-btn{
  width: 40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  color: var(--text-mid);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.back-btn svg{ width: 19px; height: 19px; }
.back-btn:active{ transform: scale(0.92); }

.flow-bottom{
  display:flex; flex-direction:column; align-items:center; gap: 12px;
  padding-top: 18px;
  padding-bottom: 6px;
}

/* ---------- settle screen ---------- */
.settle-body{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 26px;
  text-align:center;
  padding: 0 6px;
}
.settle-line{
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: settleIn 900ms var(--ease-calm) forwards;
}
.line-1{ font-size: 22px; color: var(--text-mid); animation-delay: 150ms; }
.line-2{ font-size: 27px; color: var(--text-hi); line-height: 1.4; animation-delay: 900ms; }
.line-3{ font-size: 18px; color: var(--accent-rose); font-style: italic; animation-delay: 1900ms; }
@keyframes settleIn{
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- breathing screen ---------- */
.breathe-body{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 30px;
}
.breathe-word{
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  color: var(--text-hi);
  margin: 0;
  min-height: 34px;
}
.breathe-timer{
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-low);
  margin: 0;
}

/* ---------- check-in shared ---------- */
.checkin-body{
  flex:1;
  display:flex; flex-direction:column;
  padding-top: 6px;
  overflow-y: auto;
}
.checkin-eyebrow{
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent-rose);
  text-transform: lowercase;
  margin: 0 0 10px;
}
.checkin-q{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-hi);
  margin: 0 0 26px;
}
.reflect-q-spaced{ margin-top: 30px; }

.feeling-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.feeling-chip{
  display:flex; align-items:center; gap: 10px;
  padding: 16px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  color: var(--text-mid);
  font-size: 15.5px;
  font-weight: 600;
  transition: transform 140ms var(--ease-calm), border-color 140ms var(--ease-calm), background 140ms var(--ease-calm), color 140ms var(--ease-calm);
}
.feeling-chip .chip-emoji{ font-size: 19px; }
.feeling-chip:active{ transform: scale(0.96); }
.feeling-chip.selected{
  background: linear-gradient(135deg, rgba(155,143,224,0.22), rgba(227,169,201,0.18));
  border-color: var(--accent-lav);
  color: var(--text-hi);
}

.intensity-display{
  display:flex; align-items:baseline; gap: 12px;
  margin-bottom: 18px;
}
.intensity-num{
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  color: var(--accent-lav);
  line-height: 1;
}
.intensity-label{
  font-size: 16px;
  color: var(--text-low);
}
.intensity-slider{
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-lav) 0%, var(--accent-rose) var(--fill, 50%), var(--bg-elevated) var(--fill, 50%));
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin: 8px 0;
}
.intensity-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--text-hi);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 5px rgba(155,143,224,0.25);
  cursor: pointer;
}
.intensity-slider::-moz-range-thumb{
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--text-hi);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 5px rgba(155,143,224,0.25);
  cursor: pointer;
}
.intensity-ticks{
  display:flex; justify-content:space-between;
  font-size: 13px; color: var(--text-low);
}

.journal-box{
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 16px 18px;
  resize: none;
  line-height: 1.5;
  transition: border-color 160ms var(--ease-calm);
}
.journal-box::placeholder{ color: var(--text-low); }
.journal-box:focus-visible{ border-color: var(--accent-lav); outline: none; }

/* ---------- support card stage ---------- */
.card-stage{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
}
.reminder-card{
  width: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card) 70%);
  border: 1px solid var(--line-soft);
  padding: 30px 26px;
  box-shadow: 0 18px 40px -16px var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  animation: cardArrive 520ms var(--ease-calm);
}
@keyframes cardArrive{
  0%{ opacity:0; transform: translateY(16px) scale(0.97); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.big-card{ min-height: 220px; }
.reminder-text{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-hi);
  margin: 0;
}
.save-fav-btn{
  display:flex; align-items:center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  color: var(--text-mid);
  font-size: 14.5px;
  font-weight: 600;
  transition: background 160ms, color 160ms, transform 140ms;
}
.save-fav-btn svg{ width: 18px; height: 18px; transition: fill 160ms, stroke 160ms; }
.save-fav-btn.saved{ color: var(--accent-rose); background: rgba(227,169,201,0.12); }
.save-fav-btn.saved svg{ fill: var(--accent-rose); stroke: var(--accent-rose); }
.save-fav-btn:active{ transform: scale(0.95); }

/* ---------- tools menu ---------- */
.tools-body{ flex:1; padding-top: 6px; overflow-y:auto; }
.tools-title{
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  color: var(--text-hi);
  margin: 0 0 8px;
}
.tools-sub{
  font-size: 14.5px; color: var(--text-low);
  margin: 0 0 22px;
}
.tools-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tool-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap: 6px;
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  text-align:left;
  transition: transform 140ms var(--ease-calm), border-color 140ms;
}
.tool-tile:active{ transform: scale(0.96); border-color: var(--accent-lav); }
.tool-icon{ font-size: 26px; }
.tool-name{ font-size: 15px; font-weight: 700; color: var(--text-hi); }
.tool-desc{ font-size: 12.5px; color: var(--text-low); }

/* ---------- grounding tool ---------- */
.tool-run-body{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 18px; text-align:center;
}
.tool-run-eyebrow{
  font-family: var(--font-display);
  font-size: 23px; font-weight: 500;
  color: var(--text-hi);
  margin:0;
  min-height: 60px;
  display:flex; align-items:center;
}
.grounding-step-icon{
  font-size: 58px;
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.tool-run-hint{ font-size: 14px; color: var(--text-low); margin:0; }
.grounding-dots{ display:flex; gap: 8px; margin-top: 10px; }
.grounding-dots span{
  width: 7px; height: 7px; border-radius:50%;
  background: var(--bg-elevated-2);
  transition: background 200ms, transform 200ms;
}
.grounding-dots span.done{ background: var(--accent-lav); transform: scale(1.2); }

/* ---------- timer tool ---------- */
.timer-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 28px;
  text-align:center;
}
.timer-ring-wrap{ position:relative; width: 220px; height:220px; }
.timer-svg{ width:100%; height:100%; transform: rotate(-90deg); }
.timer-track{ fill:none; stroke: var(--bg-elevated); stroke-width: 10; }
.timer-progress{
  fill:none; stroke: url(#none);
  stroke: var(--accent-lav);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 553;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.timer-readout{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 38px; font-weight: 600;
  color: var(--text-hi);
}
.timer-caption{
  font-size: 15px; color: var(--text-low);
  max-width: 280px; line-height: 1.5; margin:0;
}

/* ---------- activities ---------- */
.activities-body{ flex:1; display:flex; flex-direction:column; padding-top:6px; }
.activity-card{
  margin-top: 14px;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card) 70%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 34px 24px;
  display:flex; flex-direction:column; align-items:center; gap: 16px;
  text-align:center;
  min-height: 180px;
  justify-content:center;
  animation: cardArrive 420ms var(--ease-calm);
}
.activity-emoji{ font-size: 40px; }
.activity-text{
  font-family: var(--font-display);
  font-size: 21px; font-weight: 500;
  color: var(--text-hi);
  margin:0; line-height: 1.4;
}

/* ---------- library screens (cards / reminders) ---------- */
.library-head{ padding-top: 4px; padding-bottom: 6px; }
.library-title{
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  color: var(--text-hi);
  margin: 4px 0 6px;
}
.library-sub{ font-size: 14px; color: var(--text-low); margin: 0 0 16px; }

.tab-row{
  display:flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin: 0 -26px;
  padding-left: 26px; padding-right: 26px;
  scrollbar-width: none;
}
.tab-row::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex-shrink:0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  color: var(--text-low);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.tab-btn.active{
  background: linear-gradient(135deg, rgba(155,143,224,0.25), rgba(227,169,201,0.2));
  border-color: var(--accent-lav);
  color: var(--text-hi);
}

.card-list{
  flex:1;
  overflow-y:auto;
  display:flex; flex-direction:column; gap: 12px;
  padding-bottom: 24px;
}
.mini-card{
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  display:flex; align-items:center; gap: 14px;
}
.mini-card-text{
  flex:1;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-hi);
  line-height: 1.4;
  margin:0;
}
.mini-heart-btn{
  width: 36px; height: 36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  color: var(--text-low);
  transition: color 160ms, transform 140ms;
}
.mini-heart-btn svg{ width: 19px; height:19px; }
.mini-heart-btn.saved{ color: var(--accent-rose); }
.mini-heart-btn.saved svg{ fill: var(--accent-rose); }
.mini-heart-btn:active{ transform: scale(0.9); }

.library-empty{
  text-align:center;
  color: var(--text-low);
  font-size: 14.5px;
  padding: 40px 20px;
  line-height: 1.6;
}

/* ---------- my reminders add row ---------- */
.add-reminder-row{
  display:flex; gap: 10px;
  margin-bottom: 18px;
}
.add-reminder-row input{
  flex:1;
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 20px;
}
.add-reminder-row input::placeholder{ color: var(--text-low); }
.add-reminder-row input:focus-visible{ border-color: var(--accent-lav); outline:none; }
.add-btn{
  width: 48px; height: 48px; flex-shrink:0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-rose));
  color: #20162C;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px -6px rgba(155,143,224,0.5);
}
.add-btn svg{ width: 20px; height: 20px; }
.add-btn:active{ transform: scale(0.92); }

.delete-x-btn{
  width: 34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  color: var(--text-low);
  font-size: 18px;
}
.delete-x-btn:active{ transform: scale(0.9); color: var(--text-mid); }

/* =========================================================
   SECONDARY HOME BUTTONS (Urge Reset / Emergency entry points)
========================================================= */
.btn-secondary{
  width: 100%;
  max-width: 420px;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1.5px solid rgba(155,143,224,0.35);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 160ms var(--ease-calm), border-color 160ms var(--ease-calm), background 160ms var(--ease-calm);
}
.btn-secondary-emoji{ font-size: 17px; }
.btn-secondary:active{ transform: scale(0.97); background: var(--bg-elevated); }

.btn-emergency-link{
  font-size: 13px;
  color: var(--text-low);
  text-decoration: underline;
  text-decoration-color: rgba(142,135,168,0.35);
  text-underline-offset: 3px;
  padding: 8px 10px;
  transition: color 160ms;
}
.btn-emergency-link:active{ color: var(--accent-rose); }

/* =========================================================
   URGE RESET — INTRO
========================================================= */
.reset-intro-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  overflow-y: auto;
}
.reset-intro-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  color: var(--text-hi);
  margin: 4px 0 12px;
}
.reset-intro-sub{
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 320px;
}
.reset-steps-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reset-step-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
}
.reset-step-num{
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-rose));
  color: #20162C;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.reset-step-text{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.reset-step-name{ font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-hi); }
.reset-step-desc{ font-size: 13px; color: var(--text-low); }
.reset-step-emoji{ font-size: 22px; flex-shrink: 0; }

/* =========================================================
   STEP 1 — PATTERN DETECTIVE
========================================================= */
.detective-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10px;
  overflow-y: auto;
}
.detective-icon{
  font-size: 44px;
  margin: 6px 0 14px;
  animation: floatIcon 3s ease-in-out infinite;
}
.detective-body .checkin-q{ margin-bottom: 22px; }
.detective-chip-grid{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.detective-chip{
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1.5px solid var(--line-soft);
  color: var(--text-mid);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 140ms var(--ease-calm), border-color 140ms, background 140ms, color 140ms;
}
.detective-chip:active{ transform: scale(0.95); }
.detective-chip.selected{
  background: linear-gradient(135deg, rgba(155,143,224,0.22), rgba(227,169,201,0.18));
  border-color: var(--accent-lav);
  color: var(--text-hi);
}
.detective-freetext{
  width: 100%;
  text-align: left;
  font-size: 15px;
}

/* =========================================================
   STEP 1 RESULT — VISUAL PATTERN MAP (connected clue chain)
========================================================= */
.map-body{
  flex: 1;
  padding-top: 10px;
  overflow-y: auto;
}
.pattern-chain{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 10px 0 22px;
}
.chain-node{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card) 75%);
  border: 1px solid var(--line-soft);
  animation: cardArrive 420ms var(--ease-calm);
}
.chain-node-icon{
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(155,143,224,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.chain-node-text{ display: flex; flex-direction: column; gap: 1px; }
.chain-node-label{ font-size: 11.5px; letter-spacing: 0.05em; color: var(--text-low); text-transform: lowercase; }
.chain-node-value{ font-family: var(--font-display); font-size: 16.5px; font-weight: 500; color: var(--text-hi); }
.chain-connector{
  width: 1.5px;
  height: 20px;
  margin-left: 33px;
  background: linear-gradient(180deg, var(--accent-lav), var(--accent-rose));
  opacity: 0.5;
}
.map-footnote{
  font-size: 13.5px;
  color: var(--text-low);
  line-height: 1.6;
  margin: 4px 0 0;
}

/* =========================================================
   STEP 2 — STOP IT (interrupt sequence)
========================================================= */
.interrupt-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 30px;
}
.interrupt-lead{
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--text-hi);
  line-height: 1.5;
  margin: 0;
  max-width: 300px;
}
.interrupt-step-card{
  width: 100%;
  max-width: 320px;
  padding: 34px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card) 70%);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: cardArrive 420ms var(--ease-calm);
}
.interrupt-step-emoji{ font-size: 42px; }
.interrupt-step-title{
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-hi);
  margin: 0;
}
.interrupt-step-detail{
  font-size: 14.5px;
  color: var(--text-mid);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.interrupt-dots{ display: flex; gap: 8px; }
.interrupt-dots span{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-elevated-2);
  transition: background 200ms, transform 200ms;
}
.interrupt-dots span.done{ background: var(--accent-lav); transform: scale(1.2); }
.interrupt-dots span.current{ background: var(--accent-rose); transform: scale(1.3); }

/* =========================================================
   STEP 2 — AFFIRMATION + REPEAT 3X
========================================================= */
.affirm-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.affirm-line{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--text-hi);
  margin: 0;
  line-height: 1.5;
}
.affirm-count{
  font-size: 13.5px;
  color: var(--text-low);
  margin-top: 8px;
}

/* =========================================================
   STEP 3 — SHIFT IT
========================================================= */
.shift-body{
  flex: 1;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.shift-card{ margin: 4px 0 20px; min-height: 140px; }
.shift-sub{
  font-size: 14.5px;
  color: var(--text-low);
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   EMERGENCY GROUNDING SCREEN
   Stripped down. Minimal choices. Fastest possible access.
========================================================= */
.emergency-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: radial-gradient(circle at 50% 30%, rgba(155,143,224,0.10), transparent 60%);
}
.emergency-back{
  align-self: flex-end;
  margin-bottom: 0;
}
.emergency-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
}
.emergency-orb{ width: 170px; height: 170px; }
.emergency-cue{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-hi);
  margin: 0;
  min-height: 36px;
}
.emergency-lines{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.emergency-lines p{
  font-size: 16px;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.5;
}
.emergency-lines .emergency-italic{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-rose);
  font-size: 15px;
}
.emergency-timer{
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-low);
  margin: 0;
}
.emergency-exit{ color: var(--text-mid); }

/* ---------- small screen safety ---------- */
@media (max-height: 680px){
  .orb-wrap{ width: 150px; height: 150px; }
  .checkin-q{ font-size: 23px; margin-bottom: 18px; }
}