:root {
  --cream: #f4ead4;
  --paper: rgba(248, 237, 214, 0.82);
  --paper-strong: #fff6df;
  --ink: #243029;
  --soft-ink: #66705f;
  --sage: #7d936d;
  --moss: #2f5f48;
  --deep: #111b17;
  --grove: #21372d;
  --brass: #d9af55;
  --ember: #b86c48;
  --plum: #6c5368;
  --moon: #c9d6c9;
  --line: rgba(59, 76, 56, 0.18);
  --shadow: 0 18px 42px rgba(18, 27, 22, 0.2);
  --small-shadow: 0 10px 24px rgba(18, 27, 22, 0.13);
  --tap-shadow: 0 8px 18px rgba(18, 27, 22, 0.1);
  --selected-ring: 0 0 0 3px rgba(217, 175, 85, 0.22);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background:
    radial-gradient(circle at 16% 5%, rgba(217, 175, 85, 0.28), transparent 22rem),
    radial-gradient(circle at 90% 22%, rgba(120, 146, 107, 0.24), transparent 26rem),
    radial-gradient(circle at 50% 100%, rgba(184, 108, 72, 0.18), transparent 24rem),
    linear-gradient(150deg, #101815 0%, #22372e 48%, #594833 100%);
}

button,
textarea,
input {
  font: inherit;
}

textarea,
input,
select {
  font-size: 16px;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: default;
}

.app-shell {
  position: relative;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: visible;
  background:
    linear-gradient(rgba(255, 246, 223, 0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 246, 223, 0.28) 1px, transparent 1px),
    linear-gradient(180deg, #f7ecd4 0%, #ebdec5 52%, #d8c08e 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 15rem;
  height: 15rem;
  pointer-events: none;
  filter: blur(12px);
  opacity: 0.5;
}

.ambient-one {
  top: -4rem;
  left: calc(50% - 18rem);
  background: radial-gradient(circle, rgba(217, 175, 85, 0.58), transparent 68%);
}

.ambient-two {
  right: calc(50% - 17rem);
  bottom: 5rem;
  background: radial-gradient(circle, rgba(47, 95, 72, 0.42), transparent 68%);
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1rem calc(8.35rem + env(safe-area-inset-bottom, 0px));
}

.screen {
  animation: glimmers-soft-reveal 220ms ease both;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

@keyframes glimmers-soft-reveal {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Restrained Glimmers motion layer.
   These reusable classes keep motion soft now and map cleanly to Motion components later. */
.motion-soft-reveal {
  animation: glimmers-soft-reveal 220ms ease both;
}

.motion-gentle-presence {
  animation: glimmers-gentle-presence 240ms ease-out both;
}

.motion-soft-card {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.motion-soft-card:active,
.motion-soft-button:active,
.primary-btn:active,
.secondary-btn:active,
.choice-btn:active,
.card-btn:active,
.tool-card:active,
.dash-card:active,
.wide-card:active {
  transform: scale(0.985);
}

.motion-completion-glow:not(.timer-complete) {
  animation: glimmers-completion-glow 720ms ease-out both;
}

.timer-complete.motion-completion-glow {
  animation: timer-soft-pulse 900ms ease-out 1, glimmers-completion-glow 720ms ease-out 1;
}

.motion-word-fit-placed {
  animation: glimmers-tile-settle 180ms ease-out both;
}

/* A calm, one-time arrival moment for the welcome screen only - a soft bloom
   of light, not a flash. Respects prefers-reduced-motion below. */
.welcome-glow-bloom {
  animation:
    glimmers-welcome-bloom 900ms cubic-bezier(0.22, 1, 0.36, 1) both,
    glimmers-completion-glow 1400ms ease-out 260ms both;
}

@keyframes glimmers-welcome-bloom {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.capacity-home-control,
.capacity-depth-toggle {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.85rem 0;
  padding: 0.85rem;
  border: 1px solid rgba(47, 95, 72, 0.16);
  border-radius: 20px;
  background: rgba(255, 246, 223, 0.72);
  box-shadow: var(--tap-shadow);
}

.capacity-home-control > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.capacity-home-control strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.capacity-home-control span {
  color: var(--soft-ink);
  font-size: 0.84rem;
  line-height: 1.35;
}

.capacity-home-control.is-active,
.capacity-note,
.capacity-quick-panel .panel {
  border-color: rgba(217, 175, 85, 0.34);
  background: linear-gradient(135deg, rgba(255, 246, 223, 0.84), rgba(231, 217, 184, 0.72));
}

.capacity-depth-toggle {
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: none;
}

.chip-btn {
  min-height: 42px;
  padding: 0.68rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.82);
  color: var(--ink);
  border: 1px solid rgba(47, 95, 72, 0.18);
  box-shadow: var(--tap-shadow);
}

.chip-btn.selected-card {
  background: rgba(217, 175, 85, 0.28);
  border-color: rgba(47, 95, 72, 0.32);
}

@keyframes glimmers-gentle-presence {
  from {
    transform: translateY(5px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes glimmers-completion-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(127, 183, 168, 0), var(--small-shadow);
  }
  55% {
    box-shadow: 0 0 0 0.38rem rgba(127, 183, 168, 0.16), var(--small-shadow);
  }
  100% {
    box-shadow: 0 0 0 0.18rem rgba(127, 183, 168, 0.08), var(--small-shadow);
  }
}

@keyframes glimmers-tile-settle {
  from {
    transform: scale(0.96);
  }
  to {
    transform: scale(1);
  }
}

@keyframes brain-dump-dissolve {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0.12;
    transform: translateY(-0.75rem) scale(0.88);
  }
}

.brain-dump-burn-visual {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3.2rem;
  padding: 0.4rem 0;
}

.brain-dump-burn-visual span {
  display: block;
  width: 3.6rem;
  height: 0.52rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0.45));
  box-shadow: 0 0.6rem 1rem rgba(91, 68, 49, 0.12);
  animation: brain-dump-dissolve 980ms ease-out both;
}

.brain-dump-burn-visual span:nth-child(2) {
  animation-delay: 120ms;
}

.brain-dump-burn-visual span:nth-child(3) {
  animation-delay: 240ms;
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.back-btn,
.quiet-btn {
  min-height: 2.55rem;
  padding: 0.65rem 0.88rem;
  border-radius: 999px;
  color: var(--moss);
  border: 1px solid rgba(59, 76, 56, 0.16);
  background: rgba(255, 246, 223, 0.68);
  box-shadow: var(--small-shadow);
  cursor: pointer;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
  color: var(--moss);
  font-weight: 700;
}

.brand-mark::before {
  width: 2rem;
  height: 2rem;
  content: "";
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 50% 58%, #ffe6a0 0 16%, transparent 17%),
    linear-gradient(145deg, #1d3028 0 42%, var(--brass) 43% 58%, #2f5f48 59%);
  box-shadow: 0 0 20px rgba(217, 175, 85, 0.42), 0 8px 18px rgba(18, 27, 22, 0.18);
}

.hero {
  padding: 1.2rem 0 0.35rem;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.home-topbar > div {
  min-width: 0;
}

.home-topbar > div > .muted {
  max-width: 22rem;
  margin-bottom: 0;
  color: #50614f;
  font-size: 0.9rem;
  line-height: 1.45;
}

.home-topbar .brand-mark {
  margin-bottom: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01rem;
}

.home-subtitle {
  margin: 0.32rem 0 0.16rem;
  color: var(--ink);
  font-size: clamp(1.62rem, 7vw, 2.18rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

.home-illustration {
  position: relative;
  min-height: 7.5rem;
  margin: 0.4rem 0 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 246, 223, 0.82), transparent 4.8rem),
    linear-gradient(180deg, rgba(255, 229, 174, 0.65), rgba(181, 209, 202, 0.48)),
    linear-gradient(145deg, rgba(255, 246, 223, 0.74), rgba(228, 213, 184, 0.78));
  box-shadow: var(--small-shadow);
}

.sun-glimmer {
  position: absolute;
  top: 0.95rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  filter: drop-shadow(0 8px 16px rgba(217, 175, 85, 0.28));
}

.hills,
.hills::before,
.hills::after {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1.6rem;
  height: 5rem;
  content: "";
  border-radius: 50% 50% 0 0;
  background: rgba(125, 147, 109, 0.42);
}

.hills::before {
  left: 18%;
  right: -18%;
  bottom: 0.85rem;
  background: rgba(112, 159, 151, 0.35);
}

.hills::after {
  left: -20%;
  right: 28%;
  bottom: 1.5rem;
  background: rgba(217, 175, 85, 0.18);
}

.sparkle-field {
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  color: rgba(255, 246, 223, 0.95);
  font-size: 0.95rem;
  letter-spacing: 0.18rem;
}

.home-welcome-panel,
.home-glimmers-panel,
.today-value-panel {
  border: 1px solid rgba(127, 174, 131, 0.28);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 8% 16%, rgba(217, 175, 85, 0.18), transparent 8rem),
    rgba(255, 251, 239, 0.78);
  box-shadow: var(--small-shadow);
}

.home-welcome-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  margin: 0.35rem 0 0.8rem;
  padding: 0.78rem 0.82rem;
}

.home-welcome-panel strong {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--moss);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.075rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-welcome-panel strong::before {
  content: "✦";
  margin-right: 0.25rem;
  color: var(--gold);
}

.home-glow-mark {
  width: 2.28rem;
  height: 2.28rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 246, 223, 0.96) 0 28%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(217, 175, 85, 0.72), rgba(127, 174, 131, 0.5));
  box-shadow: 0 0 0 0.35rem rgba(217, 175, 85, 0.12), 0 0.6rem 1.4rem rgba(47, 95, 72, 0.16);
}

.home-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}

.home-action-row .secondary-btn {
  min-height: 2.8rem;
  padding: 0.62rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.18;
}

.home-section-action {
  min-height: 2.45rem;
  padding: 0.52rem 0.72rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.home-mini-actions {
  display: grid;
  gap: 0.45rem;
  min-width: min(12rem, 42vw);
}

.saved-status-pill {
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.25rem 0.68rem;
  border: 1px solid rgba(127, 174, 131, 0.38);
  border-radius: 999px;
  color: #385442;
  background: rgba(214, 231, 205, 0.76);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01rem;
}

.home-glimmers-panel,
.today-value-panel {
  padding: 0.95rem;
}

.home-glimmers-panel {
  display: grid;
  gap: 0.85rem;
}

.action-explain-card {
  display: grid;
  gap: 0.25rem;
  text-align: left;
}

.action-explain-card span {
  color: var(--soft-ink);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
}

.home-latest-glimmer {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 0.82rem;
  border: 1px solid rgba(127, 183, 168, 0.34);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 92% 12%, rgba(127, 183, 168, 0.2), transparent 6rem),
    radial-gradient(circle at 10% 18%, rgba(217, 175, 85, 0.18), transparent 6rem),
    rgba(255, 246, 223, 0.72);
}

button.home-latest-glimmer {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-glimmer-spark {
  position: absolute;
  top: 0.72rem;
  right: 0.85rem;
  color: #9a7d4b;
  font-size: 1.15rem;
  line-height: 1;
}

.home-latest-glimmer strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.28;
}

.private-preview-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-block-size: calc(1.28em * 3);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.snapshot-card .private-preview-text {
  max-block-size: calc(1.22em * 3);
}

.home-glimmer-details {
  border-top: 1px solid rgba(47, 95, 72, 0.12);
  padding-top: 0.45rem;
}

.home-glimmer-details summary {
  width: fit-content;
  padding: 0.36rem 0.58rem;
  border: 1px solid rgba(127, 174, 131, 0.34);
  border-radius: 999px;
  color: var(--moss);
  background: rgba(255, 251, 239, 0.7);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.15;
  cursor: pointer;
}

.home-glimmer-details[open] summary {
  margin-bottom: 0.45rem;
  color: #fff8ea;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
}

/* Home V1 dashboard hierarchy */
.home-screen-v1 {
  display: grid;
  gap: 0.78rem;
}

.home-screen-v1 .support-hero-card {
  margin: 0.55rem 0 0.2rem;
}

.home-cluster {
  display: grid;
  gap: 0.68rem;
  margin-top: 0.35rem;
}

.home-module-card,
.home-tool-group {
  border: 1px solid rgba(127, 174, 131, 0.24);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 8% 12%, rgba(217, 175, 85, 0.14), transparent 7rem),
    rgba(255, 251, 239, 0.72);
  box-shadow: var(--small-shadow);
}

.home-module-card {
  display: grid;
  gap: 0.66rem;
  width: 100%;
  padding: 0.92rem;
  color: var(--ink);
  text-align: left;
}

button.home-module-card {
  cursor: pointer;
}

button.home-module-card:hover,
.home-tool-group:hover {
  border-color: rgba(47, 95, 72, 0.34);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

button.home-module-card:active {
  transform: scale(0.985);
}

.home-module-card h3,
.home-explore-cluster h3 {
  margin: 0.12rem 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.15;
}

.home-module-card > strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.18;
}

.home-module-card > span,
.home-module-card .muted {
  color: var(--soft-ink);
  font-size: 0.86rem;
  line-height: 1.38;
}

.home-module-card em {
  width: fit-content;
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(47, 95, 72, 0.2);
  border-radius: 999px;
  color: var(--moss);
  background: rgba(255, 246, 223, 0.62);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.home-reflection-panel .compact-row {
  gap: 0.6rem;
  align-items: center;
}

.home-quote-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quote-refresh-btn {
  width: auto;
  min-height: 1.9rem;
  padding: 0.22rem 0.54rem;
  border-radius: 999px;
  background: rgba(255, 246, 223, 0.7);
  font-size: 0.72rem;
  white-space: nowrap;
}

.quote-favourite-btn {
  display: inline-grid;
  place-items: center;
  width: 2.05rem;
  min-height: 2.05rem;
  padding: 0;
  color: #8a5b4c;
  font-size: 1rem;
  line-height: 1;
}

.quote-favourite-btn.selected {
  color: #6f473d;
  border-color: rgba(217, 175, 85, 0.5);
  background: rgba(255, 224, 183, 0.82);
  box-shadow: 0 0 0 3px rgba(217, 175, 85, 0.18), var(--small-shadow);
}

.quote-favourite-btn:focus-visible {
  outline: 3px solid rgba(217, 175, 85, 0.45);
  outline-offset: 2px;
}

.primary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.home-value-compact {
  min-height: 7.2rem;
  background:
    radial-gradient(circle at 92% 14%, rgba(95, 167, 165, 0.18), transparent 7rem),
    linear-gradient(135deg, rgba(255, 251, 239, 0.76), rgba(244, 234, 212, 0.72));
}

.home-value-card-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

.home-value-card-row > div {
  display: grid;
  gap: 0.52rem;
}

.home-value-card-row strong {
  color: var(--ink);
  font-size: 1.03rem;
  font-weight: 900;
  line-height: 1.16;
}

.home-value-card-row > div > span:not(.card-kicker) {
  color: var(--soft-ink);
  font-size: 0.86rem;
  line-height: 1.35;
}

.home-value-feature {
  border-color: rgba(217, 175, 85, 0.42);
  box-shadow: var(--shadow);
}

.home-value-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.home-value-actions .secondary-btn {
  width: auto;
  min-height: 2.35rem;
  padding: 0.55rem 0.75rem;
}

.home-mini-wheel-wrap {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  min-width: 4.55rem;
}

.home-mini-wheel-wrap small {
  max-width: 5.2rem;
  color: var(--soft-ink);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.home-mini-wheel {
  position: relative;
  display: block;
  width: 4.15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      #f2c682 0 45deg,
      #d9957a 45deg 90deg,
      #91b986 90deg 135deg,
      #7fb7a8 135deg 180deg,
      #b7aacd 180deg 225deg,
      #d6b46b 225deg 270deg,
      #9eb9c9 270deg 315deg,
      #d9a78f 315deg 360deg
    );
  box-shadow: inset 0 0 0 0.34rem rgba(255, 251, 239, 0.86), var(--small-shadow);
}

.home-mini-wheel b {
  position: absolute;
  inset: 1.48rem;
  border-radius: 50%;
  background: rgba(255, 251, 239, 0.92);
  box-shadow: inset 0 0 0 1px rgba(83, 96, 77, 0.14);
}

.home-mini-wheel span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(calc(var(--i) * 45deg)) translate(1.65rem) rotate(calc(var(--i) * -45deg));
  opacity: 0.54;
}

.home-mini-wheel span.active {
  width: 0.62rem;
  height: 0.62rem;
  opacity: 1;
  box-shadow: 0 0 0 0.22rem rgba(255, 251, 239, 0.78), 0 0 0 0.34rem rgba(47, 95, 72, 0.28);
}

.home-glimmers-compact {
  gap: 0.75rem;
}

.home-rhythm-card {
  gap: 0.72rem;
  border: 2px solid #c85a1f;
}

body[data-theme="midnight"] .home-rhythm-card {
  border-color: #ffab6b;
}

.rhythm-pill-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.rhythm-pill {
  display: grid;
  gap: 0.32rem;
  min-height: 5.4rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(47, 95, 72, 0.4);
  border-radius: 1.05rem;
  text-align: center;
  justify-items: center;
  align-content: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
  color: #fff6e6;
  background: linear-gradient(135deg, #26493a, #4d7d5f 60%, #7d9b6a);
  box-shadow: 0 10px 20px rgba(47, 95, 72, 0.24);
}

.rhythm-pill:active {
  transform: scale(0.965);
}

/* Time-of-day identity colors: consistent all day, independent of status.
   Border uses a solid, deeper shade of the same hue as a real accent line,
   not a faded tint of the fill. */
.rhythm-pill.rhythm-tone-morning {
  color: #4a3a10;
  border: 2px solid #c98f1a;
  background: linear-gradient(135deg, #ffe19a, #f4c94f);
  box-shadow: 0 10px 20px rgba(217, 168, 43, 0.28);
}

.rhythm-pill.rhythm-tone-afternoon {
  color: #4a2a10;
  border: 2px solid #c85a1f;
  background: linear-gradient(135deg, #ffb27a, #f2793f);
  box-shadow: 0 10px 20px rgba(224, 122, 47, 0.28);
}

.rhythm-pill.rhythm-tone-evening {
  color: #f2f5ff;
  border: 2px solid #2f4a8f;
  background: linear-gradient(135deg, #7d9adf, #4a63b0);
  box-shadow: 0 10px 20px rgba(74, 99, 176, 0.3);
}

.rhythm-pill-icon {
  display: inline-grid;
  place-items: center;
  min-width: 2.15rem;
  min-height: 2.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease;
  font-size: 1.1rem;
  line-height: 1;
}

.rhythm-pill-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.rhythm-pill-check {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #2f6664;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.rhythm-pill strong {
  font-size: 0.94rem;
  line-height: 1.15;
  color: inherit;
}

.rhythm-pill span:not(.rhythm-pill-icon) {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
  color: inherit;
  opacity: 0.85;
}

/* "Now-ish": a quiet pulse ring layered on top of whichever time-color is underneath — does not change the base color */
.rhythm-pill.primary:not(.completed) {
  animation: rhythmPulse 2.6s ease-in-out infinite;
}

.rhythm-pill.primary {
  border-color: rgba(255, 255, 255, 0.75);
}

/* "Completed": a small checkmark badge over the icon, plus a slightly settled look — base time-color is preserved */
.rhythm-pill.completed {
  filter: saturate(1.08) brightness(0.97);
}

.rhythm-pill.completed span:not(.rhythm-pill-icon) {
  opacity: 1;
}


@keyframes rhythmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rhythm-pill.primary {
    animation: none;
  }
}

body[data-theme="midnight"] .rhythm-pill {
  color: #f3f0e6;
  border-color: rgba(224, 184, 74, 0.3);
  background: linear-gradient(135deg, #1c2748, #3f4f7a 55%, #5f7fa8);
}

/* Same vivid fills as light theme (kept bright rather than muted so they still
   pop against the dark background) — only the border gets a brighter accent
   tone here so it reads clearly against Midnight's navy surroundings. */
body[data-theme="midnight"] .rhythm-pill.rhythm-tone-morning {
  border-color: #ffd873;
}

body[data-theme="midnight"] .rhythm-pill.rhythm-tone-afternoon {
  border-color: #ffab6b;
}

body[data-theme="midnight"] .rhythm-pill.rhythm-tone-evening {
  border-color: #93b3f2;
}

body[data-theme="midnight"] .rhythm-pill.primary {
  border-color: rgba(255, 255, 255, 0.6);
}

.daily-rhythm-panel .compact-textarea {
  min-height: 5.8rem;
}

.rhythm-quick-stack,
.quick-section,
.quick-explore-body {
  display: grid;
  gap: 0.72rem;
}

.quick-section {
  padding: 0.72rem;
  border: 1px solid rgba(47, 95, 72, 0.12);
  border-radius: 1rem;
  background: rgba(255, 252, 244, 0.52);
}

.rhythm-approach-panel,
.rhythm-breathing-panel {
  display: grid;
  gap: 0.72rem;
}

.rhythm-breathing-note {
  width: 100%;
  min-height: 6.4rem;
  overflow: visible;
  white-space: normal;
}

.quick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.quick-chip {
  min-height: 2.85rem;
}

.quick-scale {
  display: grid;
  gap: 0.56rem;
  padding: 0.72rem;
  border: 1px solid rgba(47, 95, 72, 0.12);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 246, 223, 0.64), rgba(239, 246, 232, 0.5));
}

.quick-scale-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.38rem;
}

.quick-scale-point {
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  align-content: center;
  min-height: 4.2rem;
  padding: 0.52rem 0.32rem;
  border-radius: 0.82rem;
  border: 1px solid rgba(47, 95, 72, 0.14);
  color: var(--ink);
  background: rgba(255, 252, 244, 0.76);
  box-shadow: 0 6px 14px rgba(18, 27, 22, 0.06);
}

.quick-scale-point span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  color: var(--moss);
  background: rgba(217, 175, 85, 0.18);
  font-size: 0.72rem;
  font-weight: 900;
}

.quick-scale-point strong {
  font-size: 0.68rem;
  line-height: 1.08;
  text-align: center;
}

.quick-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.quick-choice-card {
  min-height: 4.35rem;
  justify-items: start;
  text-align: left;
}

.quick-choice-card span {
  color: var(--soft-ink);
  font-size: 0.76rem;
  line-height: 1.25;
}

.quick-custom-input {
  margin-top: 0.55rem;
}

.quick-explore {
  display: grid;
  gap: 0.64rem;
  padding-top: 0.1rem;
}

.quick-explore-toggle {
  justify-self: start;
}

.quick-explore-body {
  padding: 0.78rem;
  border-radius: 1rem;
  border: 1px dashed rgba(47, 95, 72, 0.2);
  background: rgba(255, 252, 244, 0.5);
}

.onboarding-screen {
  gap: 1rem;
}

.onboarding-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(217, 175, 85, 0.22), transparent 5rem),
    radial-gradient(circle at 92% 12%, rgba(95, 167, 165, 0.18), transparent 5rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.86), rgba(239, 246, 232, 0.68));
  border: 1px solid rgba(47, 95, 72, 0.12);
  box-shadow: var(--small-shadow);
}

.onboarding-card {
  border-color: rgba(47, 95, 72, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.9), rgba(255, 246, 223, 0.68));
}

.preferences-working-panel {
  margin-top: -0.45rem;
}

body[data-theme="dark"] .onboarding-hero,
body[data-theme="adaptive-night"] .onboarding-hero,
body[data-theme="dark"] .onboarding-card,
body[data-theme="adaptive-night"] .onboarding-card {
  color: var(--ink);
  border-color: rgba(222, 211, 188, 0.16);
  background:
    radial-gradient(circle at 14% 10%, rgba(189, 162, 97, 0.14), transparent 5rem),
    radial-gradient(circle at 88% 10%, rgba(144, 170, 145, 0.1), transparent 5rem),
    rgba(24, 32, 29, 0.88);
}

@media (max-width: 430px) {
  .quick-scale-options {
    grid-template-columns: repeat(5, minmax(2.7rem, 1fr));
    gap: 0.28rem;
  }

  .quick-scale-point {
    min-height: 3.85rem;
    padding-inline: 0.18rem;
  }

  .quick-scale-point strong {
    font-size: 0.62rem;
  }

  .quick-choice-grid {
    grid-template-columns: 1fr;
  }

  .search-inline-row {
    grid-template-columns: 1fr;
  }

  .search-inline-row .secondary-btn,
  .search-inline-row .primary-btn {
    width: 100%;
  }
}

.both-tension-grid {
  gap: 0.55rem;
}

.both-tension-card {
  justify-items: start;
  text-align: left;
}

.both-tension-card strong {
  line-height: 1.25;
}

.both-pair-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem;
  border: 1px solid rgba(95, 167, 165, 0.24);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 12% 12%, rgba(217, 175, 85, 0.14), transparent 6rem),
    rgba(255, 252, 244, 0.74);
  text-align: center;
}

.both-pair-visual.small {
  padding: 0.65rem;
}

.both-pair-visual strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.2;
}

.both-pair-visual span {
  color: var(--moss);
  font-size: 1.15rem;
  font-weight: 900;
}

.both-slider-field {
  gap: 0.48rem;
}

.home-compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.home-compact-actions .secondary-btn {
  width: auto;
  min-height: 2.35rem;
  padding: 0.48rem 0.68rem;
  font-size: 0.78rem;
  font-weight: 820;
}

/* Gives the flatter homepage action rows (My Glimmers quick actions, Daily
   Check-In's "Go Deeper"/"Check In Again", Values Wheel actions, etc.) the
   same rotating-accent-color treatment already used on the Daily Check-In
   state buttons and the choice grids elsewhere in the app, instead of
   inventing a new visual style from scratch. */
.home-compact-actions .secondary-btn,
.home-value-actions .secondary-btn {
  --choice-accent: var(--brass);
  border: 1px solid color-mix(in srgb, var(--choice-accent) 32%, var(--line));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent),
    color-mix(in srgb, var(--choice-accent) 11%, rgba(255, 246, 223, 0.72));
  color: color-mix(in srgb, var(--choice-accent) 58%, var(--moss));
}

.home-compact-actions .secondary-btn:nth-child(6n + 1),
.home-value-actions .secondary-btn:nth-child(6n + 1) { --choice-accent: #d9af55; }
.home-compact-actions .secondary-btn:nth-child(6n + 2),
.home-value-actions .secondary-btn:nth-child(6n + 2) { --choice-accent: #7fae83; }
.home-compact-actions .secondary-btn:nth-child(6n + 3),
.home-value-actions .secondary-btn:nth-child(6n + 3) { --choice-accent: #5fa7a5; }
.home-compact-actions .secondary-btn:nth-child(6n + 4),
.home-value-actions .secondary-btn:nth-child(6n + 4) { --choice-accent: #d58aa5; }
.home-compact-actions .secondary-btn:nth-child(6n + 5),
.home-value-actions .secondary-btn:nth-child(6n + 5) { --choice-accent: #7ea6c8; }
.home-compact-actions .secondary-btn:nth-child(6n + 6),
.home-value-actions .secondary-btn:nth-child(6n + 6) { --choice-accent: #df8d79; }

.home-latest-glimmer.compact {
  padding: 0.72rem;
  box-shadow: none;
}

.home-latest-glimmer.compact strong {
  font-size: 0.94rem;
}

.home-explore-cluster {
  padding: 0.88rem;
  border: 1px solid rgba(217, 175, 85, 0.22);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 92% 8%, rgba(127, 183, 168, 0.16), transparent 8rem),
    rgba(255, 251, 239, 0.48);
}

.home-explore-grid {
  display: grid;
  gap: 0.5rem;
}

.home-tool-group {
  overflow: hidden;
}

.home-tool-group summary {
  min-height: 2.85rem;
  padding: 0.72rem 0.82rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  list-style-position: inside;
}

.home-tool-list {
  display: grid;
  gap: 0.42rem;
  padding: 0 0.82rem 0.82rem;
}

.home-search-strip,
.glimmers-search-panel {
  display: grid;
  gap: 0.55rem;
}

.home-search-strip {
  margin: 0.35rem 0 0.7rem;
  padding: 0.72rem;
  border: 1px solid rgba(47, 95, 72, 0.14);
  border-radius: 0.9rem;
  background: rgba(255, 252, 244, 0.62);
}

.home-search-strip label {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
}

.search-inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.search-inline-row .secondary-btn,
.search-inline-row .primary-btn {
  width: auto;
  min-width: 5.8rem;
}

.search-result-list,
.glimmers-search-results {
  display: grid;
  gap: 0.55rem;
}

.search-result-card {
  min-height: 3.9rem;
}

.home-tool-row {
  --choice-accent: var(--brass);
  display: grid;
  gap: 0.18rem;
  width: 100%;
  min-height: 3.1rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(47, 95, 72, 0.14);
  border-left: 3px solid color-mix(in srgb, var(--choice-accent) 55%, transparent);
  border-radius: 0.82rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--choice-accent) 7%, transparent), transparent 65%),
    rgba(255, 252, 244, 0.68);
  text-align: left;
}

.home-tool-row:hover {
  border-color: rgba(47, 95, 72, 0.3);
  border-left-color: color-mix(in srgb, var(--choice-accent) 75%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--choice-accent) 10%, transparent), transparent 65%),
    rgba(255, 249, 235, 0.9);
}

/* Same rotating-accent palette as the Daily Check-In / choice grids, so each
   tool row in the Explore accordions reads as distinct rather than a wall of
   identical beige rows. */
.home-tool-list .home-tool-row:nth-child(6n + 1) { --choice-accent: #d9af55; }
.home-tool-list .home-tool-row:nth-child(6n + 2) { --choice-accent: #7fae83; }
.home-tool-list .home-tool-row:nth-child(6n + 3) { --choice-accent: #5fa7a5; }
.home-tool-list .home-tool-row:nth-child(6n + 4) { --choice-accent: #d58aa5; }
.home-tool-list .home-tool-row:nth-child(6n + 5) { --choice-accent: #7ea6c8; }
.home-tool-list .home-tool-row:nth-child(6n + 6) { --choice-accent: #df8d79; }

.home-tool-row strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.15;
}

.home-tool-row span {
  color: var(--soft-ink);
  font-size: 0.74rem;
  line-height: 1.25;
}

.home-recent-section {
  margin-top: 0.65rem;
}

.snapshot-card.subtle {
  min-height: 4.7rem;
  background:
    radial-gradient(circle at 88% 10%, rgba(217, 175, 85, 0.1), transparent 5rem),
    rgba(255, 251, 239, 0.58);
}

.today-value-panel {
  border-color: rgba(95, 167, 165, 0.34);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--value-accent, #5fa7a5) 20%, transparent), transparent 7rem),
    radial-gradient(circle at 12% 82%, rgba(217, 175, 85, 0.13), transparent 7rem),
    rgba(255, 246, 223, 0.78);
}

.today-value-panel {
  gap: 0.75rem;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 38%, rgba(47, 95, 72, 0.2));
}

.today-value-name {
  display: block;
  margin: 0.24rem 0 0.36rem;
  color: var(--ink);
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  font-weight: 900;
  line-height: 1.08;
}

.today-value-area-label {
  display: block;
  color: var(--moss);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.075rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.today-value-area {
  margin: 0.12rem 0 0.44rem;
  color: var(--soft-ink);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.25;
}

.today-value-meaning {
  margin: 0;
  color: var(--soft-ink);
  font-size: 0.94rem;
  font-style: normal;
  line-height: 1.46;
}

.today-value-practice {
  background: color-mix(in srgb, var(--value-accent, var(--brass)) 10%, rgba(255, 251, 239, 0.78));
}

.today-value-actions {
  display: grid;
  gap: 0.68rem;
}

.today-value-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.55rem;
}

.today-value-panel .primary-btn,
.today-value-panel .value-primary-secondary {
  --choice-accent: var(--value-accent, var(--brass));
}

.today-value-panel .primary-btn {
  border-color: color-mix(in srgb, var(--choice-accent) 64%, var(--moss));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--choice-accent) 28%, var(--moss)), var(--moss));
}

.today-value-panel .value-primary-secondary {
  border-color: color-mix(in srgb, var(--choice-accent) 46%, rgba(47, 95, 72, 0.25));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--choice-accent) 20%, rgba(255, 251, 239, 0.95)), rgba(255, 251, 239, 0.78));
}

.today-value-more-actions {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.12rem;
}

.home-quiet-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.home-quiet-action-row .secondary-btn {
  width: auto;
  min-height: 2.25rem;
  padding: 0.42rem 0.62rem;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 28%, rgba(47, 95, 72, 0.2));
  background: rgba(255, 251, 239, 0.58);
  font-size: 0.76rem;
  font-weight: 780;
}

.home-overline,
.card-kicker {
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.today-value-panel .home-action-row .secondary-btn {
  --choice-accent: var(--value-accent, var(--brass));
  border-color: color-mix(in srgb, var(--choice-accent) 44%, rgba(47, 95, 72, 0.22));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--choice-accent) 20%, rgba(255, 246, 223, 0.96)), rgba(255, 251, 239, 0.84));
}

.today-value-panel .home-action-row .secondary-btn:nth-child(1) { --choice-accent: #2f5f48; }
.today-value-panel .home-action-row .secondary-btn:nth-child(2) { --choice-accent: #5fa7a5; }
.today-value-panel .home-action-row .secondary-btn:nth-child(3) { --choice-accent: #9a7d4b; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  color: var(--moss);
  background: rgba(255, 246, 223, 0.72);
  border: 1px solid var(--line);
  box-shadow: var(--small-shadow);
  font-weight: 800;
  position: relative;
}

.settings-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--moss);
  background: rgba(255, 246, 223, 0.76);
  box-shadow: var(--small-shadow);
  font-weight: 800;
}

.settings-pill .icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.icon-btn::before,
.icon-btn::after,
.card-marker::before,
.card-marker::after,
.mini-state-icon::before,
.mini-state-icon::after,
.lifeline-icon::before,
.lifeline-icon::after {
  content: "";
  position: absolute;
  display: block;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0.45rem;
  font-size: clamp(2.2rem, 12vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

h2,
.screen-title {
  margin-bottom: 0.45rem;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  letter-spacing: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

/* Shared Glimmers UI language for current and future tools.
   These classes are intentionally simple aliases for the existing static app. */
.screen-title {
  color: var(--ink);
}

.body-text,
.body-copy,
.BodyText {
  color: #465545;
  font-size: clamp(1rem, 3.5vw, 1.08rem);
  line-height: 1.58;
  cursor: default;
}

.prompt-text,
.PromptText {
  color: var(--ink);
  font-weight: 800;
  cursor: default;
}

/* .helper-note had no rule at all before this - it was rendering as plain,
   unstyled text, indistinguishable from surrounding .copy paragraphs
   wherever it's used across the app. This gives it its own quiet, consistent
   look: a small tinted note, not a sentence that competes with body copy. */
.helper-note {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 0.7rem;
  background: rgba(47, 95, 72, 0.07);
  color: var(--soft-ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.reflection-line,
.ReflectionLine {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid rgba(217, 175, 85, 0.48);
  border-radius: 0 0.8rem 0.8rem 0;
  background: rgba(255, 251, 239, 0.48);
  color: var(--soft-ink);
  font-style: italic;
  line-height: 1.5;
  cursor: default;
}

.copy,
.muted,
.subtitle,
.prompt,
.support-line,
.opening,
.footer-note,
.empty-state,
.route-notice {
  cursor: default;
}

.tool-card,
.ToolCard,
.selectable-card,
.SelectableCard,
.saved-item-card,
.SavedItemCard,
.prompt-card,
.PromptCard,
.empty-state-card,
.EmptyStateCard {
  border: 1px solid var(--line);
  border-radius: 1.15rem;
}

.subtitle {
  max-width: 31rem;
  color: var(--soft-ink);
  font-size: clamp(1rem, 3.6vw, 1.1rem);
  line-height: 1.55;
}

.opening {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 8% 12%, rgba(217, 175, 85, 0.2), transparent 10rem),
    rgba(255, 246, 223, 0.68);
  color: #405044;
  font-size: clamp(1.02rem, 3.8vw, 1.14rem);
  line-height: 1.56;
  box-shadow: var(--small-shadow);
  cursor: default;
}

.intro-copy {
  font-size: clamp(1.06rem, 4vw, 1.18rem);
  line-height: 1.55;
}

.grid {
  display: grid;
  gap: 0.78rem;
}

.home-section {
  display: grid;
  gap: 0.38rem;
  margin: 1.28rem 0 0.58rem;
}

.home-section h3 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: clamp(1.04rem, 3.7vw, 1.18rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.home-section > .muted,
.section-heading-row .muted {
  max-width: 28rem;
  margin: 0;
  color: var(--soft-ink);
  font-size: 0.84rem;
  line-height: 1.4;
}

.section-heading-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
}

.tiny-link {
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: var(--moss);
  border: 1px solid var(--line);
  background: rgba(255, 246, 223, 0.7);
  font-weight: 800;
  box-shadow: var(--small-shadow);
}

.passive-chip {
  cursor: default;
  color: var(--soft-ink);
  background: rgba(255, 251, 239, 0.62);
  border-color: rgba(127, 174, 131, 0.22);
  box-shadow: none;
}

.support-action-card {
  --choice-accent: var(--brass);
  border-color: color-mix(in srgb, var(--choice-accent) 34%, rgba(47, 95, 72, 0.22));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--choice-accent) 18%, transparent), transparent 6rem),
    rgba(255, 251, 239, 0.78);
}

.support-route-panel .support-action-card:nth-of-type(2n) {
  --choice-accent: var(--sage);
}

.support-route-panel .support-action-card:nth-of-type(3n) {
  --choice-accent: var(--ember);
}

.support-route-panel .support-action-card:nth-of-type(4n) {
  --choice-accent: var(--moss);
}

.below-grid-action {
  width: auto;
  justify-self: start;
  margin-top: 0.35rem;
}

.home-reflection {
  width: fit-content;
  max-width: 100%;
  margin: -0.05rem 0 0.15rem;
  padding: 0.32rem 0.52rem;
  border-left: 3px solid rgba(217, 175, 85, 0.48);
  border-radius: 0 0.7rem 0.7rem 0;
  background: rgba(255, 251, 239, 0.54);
  color: #53624f;
  font-size: 0.86rem;
  line-height: 1.38;
  font-style: italic;
  pointer-events: none;
}

.home-checkin-ack {
  margin: 0.1rem 0 0;
  padding: 0.62rem 0.74rem;
  border: 1px solid rgba(127, 174, 131, 0.34);
  border-radius: 0.95rem;
  color: #385442;
  background:
    radial-gradient(circle at 8% 18%, rgba(127, 174, 131, 0.2), transparent 5rem),
    rgba(255, 251, 239, 0.7);
  font-size: 0.86rem;
  line-height: 1.38;
}

.quote-card,
.support-hero-card,
.wide-card,
.dash-card,
.state-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--small-shadow);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
  position: relative;
}

button,
.chip,
.word-fit-word,
.word-fit-cell,
.support-hero-card,
.wide-card,
.dash-card,
.state-card,
.card-btn,
.choice-btn,
.practice-tool-card,
.practice-category-card,
.tiny-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(217, 175, 85, 0.22);
}

button,
.chip,
.word-fit-word,
.word-fit-cell,
.dash-card,
.card-btn,
.choice-btn,
.practice-tool-card,
.practice-category-card,
.state-card,
.wide-card,
.tiny-link {
  cursor: pointer;
}

.compact-check-row {
  grid-auto-columns: unset;
}

.wrap-check-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  overflow: visible;
  padding-bottom: 0;
}

.wrap-check-row .mini-state:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.mini-state {
  min-height: 3.15rem;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.35rem;
  text-align: center;
}

.mini-state i {
  font-style: normal;
  font-size: 1.35rem;
}

.mini-state-icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0.18rem 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.state-great::before {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: #e9b66f;
  box-shadow: 0 0 0 0.18rem rgba(233, 182, 111, 0.25);
}

.state-good::before {
  width: 0.95rem;
  height: 0.52rem;
  border-radius: 999px 999px 0 0;
  border: 0.15rem solid #7fb7a8;
  border-bottom: 0;
}

.state-okay::before {
  width: 1rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(169, 183, 217, 0.85);
}

.state-stressed::before {
  width: 0.18rem;
  height: 1rem;
  background: #d99384;
  transform: rotate(22deg);
  border-radius: 999px;
}

.state-stressed::after {
  width: 0.18rem;
  height: 0.55rem;
  background: #d99384;
  transform: translate(0.22rem, 0.23rem) rotate(22deg);
  border-radius: 999px;
}

.state-low::before {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 0.16rem solid #a9b7d9;
  border-top-color: transparent;
}

.state-unsure::before {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 0.16rem solid #c7add8;
  border-bottom-color: transparent;
}

.mini-state.good {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 230, 160, 0.42), transparent 5rem),
    rgba(255, 246, 223, 0.78);
}

.mini-state.selected-card {
  color: #fff5dd;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 230, 160, 0.28), transparent 5rem),
    linear-gradient(135deg, var(--moss), #8d6b36);
  border-color: rgba(47, 95, 72, 0.7);
}

.support-hero-card:active,
.wide-card:active,
.dash-card:active,
.state-card:active {
  transform: scale(0.985);
}

.support-hero-card:hover,
.wide-card:hover,
.dash-card:hover,
.state-card:hover,
.snapshot-card:hover,
.card-btn:hover,
.choice-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.danger-btn:hover,
.tiny-link:hover,
.back-btn:hover,
.quiet-btn:hover {
  border-color: rgba(47, 95, 72, 0.36);
  box-shadow: 0 12px 28px rgba(18, 27, 22, 0.15);
}

.quote-card {
  display: grid;
  gap: 0.7rem;
  min-height: 9rem;
  padding: 1.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(217, 175, 85, 0.26), transparent 9rem),
    radial-gradient(circle at 90% 90%, rgba(144, 170, 145, 0.18), transparent 9rem),
    rgba(255, 246, 223, 0.76);
  cursor: default;
}

.quote-card span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.25;
}

.quote-card small {
  color: var(--soft-ink);
  font-weight: 700;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.dots b {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(36, 48, 41, 0.26);
}

.dots b:first-child {
  background: var(--moss);
}

.check-row {
  display: grid;
  grid-auto-columns: minmax(9.2rem, 1fr);
  grid-auto-flow: column;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.45rem;
  scroll-snap-type: x proximity;
}

.check-row.wrap-check-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-columns: unset;
  grid-auto-flow: row;
  gap: 0.45rem;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}

.state-card {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: 8.3rem;
  padding: 0.9rem;
  background:
    linear-gradient(180deg, rgba(255, 246, 223, 0.84), rgba(235, 221, 191, 0.72));
  scroll-snap-align: start;
}

.state-card.mini-state {
  min-height: 3.15rem;
  padding: 0.4rem 0.35rem;
  gap: 0.15rem;
  align-content: center;
  justify-items: center;
  text-align: center;
  border-radius: 0.95rem;
  scroll-snap-align: none;
}

.state-card.mini-state strong {
  font-size: clamp(0.72rem, 2.7vw, 0.88rem);
  line-height: 1.05;
}

.state-card strong,
.dash-card strong,
.wide-card strong,
.support-hero-card strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
}

.state-card span,
.dash-card span,
.wide-card span,
.support-hero-card span {
  color: var(--soft-ink);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.support-hero-card {
  display: grid;
  align-items: start;
  justify-items: start;
  gap: 0.3rem;
  min-height: 5.9rem;
  margin: 0.85rem 0 0.75rem;
  text-align: left;
  color: #fff5dd;
  background:
    radial-gradient(circle at 20% 35%, rgba(255, 226, 154, 0.38), transparent 8rem),
    linear-gradient(135deg, #20382f, var(--moss) 55%, #8d6b36);
  box-shadow: var(--shadow);
}

.support-hero-card strong {
  font-family: inherit;
  font-size: 1.62rem;
  font-weight: 900;
  letter-spacing: 0;
}

.dashboard-hero strong {
  font-size: 1.62rem;
}

.support-hero-card span {
  color: rgba(255, 245, 221, 0.86);
  font-size: 0.92rem;
  line-height: 1.42;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.64rem;
  margin: 0.62rem 0;
}

.dash-card {
  --dash-accent: var(--brass);
  display: grid;
  gap: 0.38rem;
  align-content: start;
  min-height: 8.75rem;
  padding: 0.86rem;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--dash-accent) 20%, transparent), transparent 6rem),
    rgba(255, 246, 223, 0.75);
}

.dashboard-grid .dash-card:nth-child(6n + 1) { --dash-accent: #d9af55; }
.dashboard-grid .dash-card:nth-child(6n + 2) { --dash-accent: #5fa7a5; }
.dashboard-grid .dash-card:nth-child(6n + 3) { --dash-accent: #8aa95f; }
.dashboard-grid .dash-card:nth-child(6n + 4) { --dash-accent: #9a7d4b; }
.dashboard-grid .dash-card:nth-child(6n + 5) { --dash-accent: #c88861; }
.dashboard-grid .dash-card:nth-child(6n + 6) { --dash-accent: #7ea6c8; }

.dash-card::after,
.wide-card::after,
.snapshot-card::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 0.48rem;
  height: 0.48rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.34;
  transform: rotate(-45deg);
}

.dash-card small {
  color: var(--soft-ink);
  font-size: 0.76rem;
  line-height: 1.35;
}

.dash-card.small {
  min-height: 9rem;
}

.featured-glimmer-card {
  grid-column: 1 / -1;
  min-height: 9rem;
  background:
    radial-gradient(circle at 14% 18%, rgba(217, 175, 85, 0.22), transparent 8rem),
    radial-gradient(circle at 88% 72%, rgba(144, 170, 145, 0.18), transparent 8rem),
    rgba(255, 246, 223, 0.8);
}

.practice-tool-card.featured:nth-child(1) { --category-accent: #5fa7a5; }
.practice-tool-card.featured:nth-child(2) { --category-accent: #d9af55; }

.dash-card i {
  color: var(--moss);
  font-style: normal;
  font-size: 1.55rem;
}

.card-marker {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: rgba(255, 246, 223, 0.84);
  border: 1px solid var(--line);
  color: var(--moss);
  font-size: 0 !important;
}

.card-marker::before {
  width: 1.05rem;
  height: 1.05rem;
  border: 0.17rem solid var(--moss);
  border-radius: 0.25rem;
}

.icon-glimmer::before,
.icon-win::before {
  width: 1rem;
  height: 1rem;
  border: 0;
  background: var(--moss);
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 34%);
}

.icon-unload::before {
  width: 1.05rem;
  height: 0.9rem;
  border-radius: 0.2rem;
  border-color: var(--moss);
}

.icon-unload::after {
  width: 0.74rem;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--moss);
  top: 0.78rem;
}

.icon-practice::before {
  width: 1.1rem;
  height: 0.7rem;
  border: 0.16rem solid var(--moss);
  border-top: 0;
  border-radius: 0 0 1rem 1rem;
  transform: rotate(-18deg);
}

.icon-compass::before {
  border-radius: 50%;
}

.icon-compass::after {
  width: 0.18rem;
  height: 0.82rem;
  background: var(--moss);
  transform: rotate(42deg);
  border-radius: 999px;
}

.icon-care::before {
  width: 0.78rem;
  height: 0.78rem;
  border: 0;
  background: var(--moss);
  transform: rotate(45deg);
  border-radius: 0.18rem;
}

.icon-care::after {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--moss);
  transform: translate(-0.28rem, -0.28rem);
  box-shadow: 0.56rem 0 var(--moss);
}

.icon-pattern::before {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border-style: dashed;
}

.icon-perspective::before {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border-color: var(--moss);
}

.icon-perspective::after {
  width: 0.82rem;
  height: 0.18rem;
  border-radius: 999px;
  background: var(--moss);
  transform: rotate(-32deg);
  box-shadow: 0.22rem 0.28rem 0 -0.02rem var(--moss);
}

.icon-calendar::before {
  width: 1.05rem;
  height: 1rem;
  border-radius: 0.18rem;
  border-color: var(--moss);
}

.icon-calendar::after {
  width: 0.72rem;
  height: 0.12rem;
  border-radius: 999px;
  background: var(--moss);
  box-shadow: 0 0.38rem 0 var(--moss);
}

.icon-channel::before {
  width: 1rem;
  height: 1rem;
  border-radius: 0.22rem;
  border-color: var(--moss);
  transform: rotate(-7deg);
}

.icon-channel::after {
  width: 0.72rem;
  height: 0.72rem;
  border: 0.15rem solid var(--moss);
  border-radius: 0.2rem;
  background: rgba(255, 246, 223, 0.84);
  transform: translate(0.28rem, 0.22rem) rotate(8deg);
}

.icon-tending::before {
  width: 0.85rem;
  height: 0.85rem;
  border: 0;
  border-radius: 0.2rem;
  background: transparent;
  border-right: 0.19rem solid var(--moss);
  border-bottom: 0.19rem solid var(--moss);
  transform: rotate(40deg) translate(-0.08rem, -0.12rem);
}

.icon-learn::before {
  width: 1rem;
  height: 0.8rem;
  border-radius: 0.15rem;
  border-color: var(--moss);
}

.icon-learn::after {
  width: 0.15rem;
  height: 0.92rem;
  background: var(--moss);
}

.icon-discovery::before {
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--moss) 0 26%, transparent 28% 100%);
  box-shadow:
    0 -0.48rem 0 -0.25rem var(--moss),
    0.42rem -0.24rem 0 -0.25rem var(--moss),
    0.42rem 0.24rem 0 -0.25rem var(--moss),
    0 0.48rem 0 -0.25rem var(--moss),
    -0.42rem 0.24rem 0 -0.25rem var(--moss),
    -0.42rem -0.24rem 0 -0.25rem var(--moss);
}

.icon-discovery::after {
  width: 0.18rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--moss);
  transform: rotate(42deg);
}

.icon-gear::before {
  width: 1.05rem;
  height: 1.05rem;
  border: 0.18rem solid var(--moss);
  border-radius: 50%;
}

.icon-gear::after {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--moss);
}

.dash-card em,
.wide-card em,
.support-hero-card em {
  align-self: end;
  width: fit-content;
  margin-top: 0.14rem;
  padding: 0.3rem 0.52rem;
  border: 1px solid rgba(47, 95, 72, 0.22);
  border-radius: 999px;
  background: rgba(255, 246, 223, 0.58);
  color: var(--moss);
  font-style: normal;
  font-weight: 820;
  font-size: 0.76rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.support-hero-card em {
  border-color: rgba(255, 246, 223, 0.32);
  background: rgba(255, 246, 223, 0.18);
  color: #fff8e8;
}

.wide-card {
  display: grid;
  gap: 0.55rem;
  min-height: 8.5rem;
  margin: 1rem 0;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 246, 223, 0.84), rgba(235, 221, 191, 0.72)),
    radial-gradient(circle at 90% 20%, rgba(144, 170, 145, 0.22), transparent 8rem);
}

.card-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(47, 95, 72, 0.12);
  border-radius: 999px;
  background: rgba(255, 246, 223, 0.48);
  color: var(--soft-ink);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: default;
}

.mini-chips i {
  padding: 0.38rem 0.56rem;
  border: 1px solid rgba(59, 76, 56, 0.12);
  border-radius: 999px;
  color: var(--soft-ink);
  background: rgba(255, 246, 223, 0.42);
  font-style: normal;
  font-size: 0.8rem;
  cursor: default;
}

.value-home-card {
  background:
    radial-gradient(circle at 12% 20%, rgba(217, 175, 85, 0.24), transparent 8rem),
    radial-gradient(circle at 88% 80%, rgba(108, 83, 104, 0.14), transparent 8rem),
    rgba(255, 246, 223, 0.78);
}

.dashboard-hero {
  min-height: 8.9rem;
  padding: 1.05rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 246, 223, 0.34);
}

.dashboard-hero strong {
  font-size: clamp(1.34rem, 6vw, 1.78rem);
}

.dashboard-hero .card-kicker {
  color: rgba(255, 245, 221, 0.78);
}

.dashboard-hero strong {
  max-width: 24rem;
  line-height: 1.05;
}

.dashboard-hero small {
  color: rgba(255, 245, 221, 0.8);
  line-height: 1.35;
}

.lifeline-icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  background: rgba(255, 246, 223, 0.78);
  color: #5b4a25;
  font-size: 0;
}

.icon-life::before {
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 50%;
  border: 0.28rem solid #5b4a25;
}

.icon-life::after {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(255, 246, 223, 0.78);
}

.snapshot-section {
  margin-top: 1.8rem;
}

.word-bubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.word-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.58rem 0.76rem;
  border-radius: 999px;
  border: 1px solid rgba(94, 73, 44, 0.12);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.word-bubble.selected-card {
  color: #fff7de;
  border-color: rgba(34, 55, 45, 0.82);
  background:
    linear-gradient(135deg, rgba(47, 95, 72, 0.98), rgba(141, 107, 54, 0.96));
  box-shadow: 0 0 0 3px rgba(217, 175, 85, 0.28), 0 12px 22px rgba(18, 27, 22, 0.2);
  transform: translateY(-1px);
}

.word-bubble.selected-card::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  color: #243029;
  background: rgba(255, 246, 223, 0.9);
  font-size: 0.7rem;
  line-height: 1;
}

.tone-1,
.tone-border-1 {
  background: rgba(233, 182, 111, 0.24);
}

.tone-2,
.tone-border-2 {
  background: rgba(217, 147, 132, 0.22);
}

.tone-3,
.tone-border-3 {
  background: rgba(183, 201, 140, 0.24);
}

.tone-4,
.tone-border-4 {
  background: rgba(127, 183, 168, 0.22);
}

.tone-5,
.tone-border-5 {
  background: rgba(169, 183, 217, 0.24);
}

.tone-6,
.tone-border-6 {
  background: rgba(199, 173, 216, 0.24);
}

.practice-card-grid {
  display: grid;
  gap: 0.8rem;
}

.creative-result-panel {
  gap: 1rem;
}

.creative-result-hero {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brass) 34%, var(--line));
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--sage) 22%, transparent), transparent 5rem),
    rgba(255, 246, 223, 0.78);
  box-shadow: var(--small-shadow);
}

.creative-result-name {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 8vw, 2.65rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.creative-result-copy {
  margin: 0;
  color: var(--soft-ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

.related-spark-grid {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.related-spark-card {
  width: 100%;
  min-height: 5rem;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.related-spark-card span {
  display: block;
  margin-top: 0.35rem;
  color: var(--soft-ink);
  font-size: 0.92rem;
}

.related-spark-card:hover,
.related-spark-card:focus-visible {
  border-color: color-mix(in srgb, var(--sage) 42%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.creative-practice-preview {
  border-color: color-mix(in srgb, var(--sage) 34%, var(--line));
}

.practice-tool-grid,
.practice-category-grid {
  display: grid;
  gap: 0.75rem;
}

.practice-tool-grid {
  margin-bottom: 1rem;
}

.practice-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-tool-card,
.practice-category-card {
  --category-accent: var(--brass);
  display: grid;
  gap: 0.35rem;
  width: 100%;
  min-height: 0;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--category-accent) 34%, var(--line));
  border-radius: 1rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--category-accent) 18%, transparent), transparent 5.5rem),
    rgba(255, 246, 223, 0.68);
  box-shadow: var(--small-shadow);
  text-align: left;
}

.practice-category-card:nth-child(9n + 1) { --category-accent: #7fae83; }
.practice-category-card:nth-child(9n + 2) { --category-accent: #5fa7a5; }
.practice-category-card:nth-child(9n + 3) { --category-accent: #a697ca; }
.practice-category-card:nth-child(9n + 4) { --category-accent: #d98974; }
.practice-category-card:nth-child(9n + 5) { --category-accent: #9a7d4b; }
.practice-category-card:nth-child(9n + 6) { --category-accent: #c88861; }
.practice-category-card:nth-child(9n + 7) { --category-accent: #7ea6c8; }
.practice-category-card:nth-child(9n + 8) { --category-accent: #d9af55; }
.practice-category-card:nth-child(9n + 9) { --category-accent: #9fb46f; }

.practice-tool-card.featured {
  border-color: color-mix(in srgb, var(--category-accent) 42%, rgba(47, 95, 72, 0.2));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--category-accent) 20%, transparent), transparent 5rem),
    rgba(255, 246, 223, 0.78);
}

.practice-tool-card strong,
.practice-category-card strong {
  font-size: 1rem;
  line-height: 1.15;
}

.practice-tool-card span,
.practice-category-card span {
  color: var(--soft-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.practice-tool-card em,
.practice-category-card em,
.compact-tool-card em {
  width: fit-content;
  margin-top: 0.2rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  color: var(--moss);
  background: color-mix(in srgb, var(--category-accent, #7fb7a8) 22%, rgba(255, 246, 223, 0.72));
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.compact-tool-card {
  margin-top: 0.2rem;
}

.practice-preview-card,
.practice-detail-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--small-shadow);
  color: var(--ink);
}

.practice-preview-card {
  display: grid;
  gap: 0.55rem;
}

.practice-preview-card strong {
  font-size: 1.02rem;
}

.practice-preview-card p,
.practice-detail-card p {
  margin: 0;
}

.practice-meta,
.practice-info-grid {
  display: grid;
  gap: 0.45rem;
}

.practice-meta span,
.practice-info-grid div {
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.46);
  padding: 0.55rem 0.65rem;
  color: var(--soft-ink);
  font-size: 0.88rem;
}

.practice-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-info-grid div {
  display: grid;
  gap: 0.25rem;
}

.practice-info-grid strong {
  color: var(--ink);
}

.timer-face {
  display: grid;
  place-items: center;
  min-height: 7rem;
  border-radius: 1.2rem;
  background: rgba(255, 246, 223, 0.76);
  border: 1px solid var(--line);
  color: var(--moss);
  font-size: clamp(2.4rem, 14vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0;
}

.timer-complete {
  border-color: rgba(127, 183, 168, 0.42);
  box-shadow: 0 0 0 0.35rem rgba(127, 183, 168, 0.12), var(--small-shadow);
  animation: timer-soft-pulse 900ms ease-out 1;
}

.soft-check {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: -0.4rem auto 0;
  border-radius: 999px;
  background: rgba(127, 183, 168, 0.2);
  color: var(--moss);
  border: 1px solid rgba(127, 183, 168, 0.36);
  font-weight: 900;
}

@keyframes timer-soft-pulse {
  0% {
    transform: scale(0.98);
  }
  55% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.match-card {
  min-height: 4.3rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(59, 76, 56, 0.15);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 246, 223, 0.68), transparent 4rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.82), rgba(232, 221, 199, 0.72));
  color: var(--ink);
  box-shadow: var(--small-shadow);
  font-weight: 900;
  line-height: 1.1;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.match-card::before {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto;
  border-radius: 50%;
  border: 0.16rem solid rgba(47, 95, 72, 0.42);
  background: rgba(255, 246, 223, 0.42);
}

.match-card.revealed::before {
  display: none;
}

.match-card.revealed {
  border-color: var(--pair-border, rgba(59, 76, 56, 0.18));
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 246, 223, 0.58), transparent 4.2rem),
    linear-gradient(145deg, var(--pair-soft, rgba(199, 173, 216, 0.24)), rgba(255, 246, 223, 0.68));
  transform: translateY(-0.08rem);
}

.match-card.matched {
  border-color: var(--pair-border, rgba(47, 95, 72, 0.26));
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 246, 223, 0.7), transparent 4.2rem),
    linear-gradient(145deg, var(--pair-strong, rgba(183, 201, 140, 0.36)), rgba(255, 246, 223, 0.74));
  box-shadow: 0 0 0 0.18rem var(--pair-glow, rgba(183, 201, 140, 0.18)), var(--small-shadow);
  transform: translateY(0);
}

.match-card span {
  display: block;
  color: var(--ink);
  font-size: clamp(0.78rem, 3vw, 0.95rem);
}

.word-fit-panel {
  gap: 1rem;
  padding-bottom: 9rem;
}

.word-fit-grid {
  display: grid;
  grid-template-columns: repeat(var(--word-fit-cols), minmax(0, 1fr));
  gap: clamp(0.16rem, 0.9vw, 0.28rem);
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(0.45rem, 2vw, 0.7rem);
  border: 1px solid rgba(47, 95, 72, 0.18);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 16% 12%, rgba(217, 175, 85, 0.16), transparent 7rem),
    rgba(255, 246, 223, 0.52);
  box-shadow: var(--small-shadow);
}

.word-fit-cell,
.word-fit-block {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 0.34rem;
}

.word-fit-block {
  background: rgba(47, 95, 72, 0.14);
  opacity: 0.38;
}

.word-fit-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(1.5rem, 7.2vw, 2.25rem);
  border: 1.7px solid rgba(47, 95, 72, 0.48);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 6px rgba(47, 95, 72, 0.12);
  font-weight: 900;
  font-size: clamp(0.72rem, 3.4vw, 1.06rem);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.word-fit-cell.intersection::after {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  width: 0.28rem;
  height: 0.28rem;
  content: "";
  border-radius: 50%;
  background: rgba(217, 175, 85, 0.72);
}

.word-fit-cell small {
  position: absolute;
  top: 0.08rem;
  left: 0.14rem;
  color: var(--soft-ink);
  font-size: 0.48rem;
  line-height: 1;
}

.word-fit-cell.selected-card {
  border-color: rgba(217, 175, 85, 0.82);
  background: rgba(255, 246, 223, 0.92);
  box-shadow: var(--selected-ring), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}

.word-fit-cell.match-length {
  border-color: rgba(217, 175, 85, 0.88);
  background: rgba(255, 249, 232, 0.98);
  box-shadow: 0 0 0 3px rgba(217, 175, 85, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.word-fit-cell.active-slot {
  border-color: rgba(217, 175, 85, 0.95);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(217, 175, 85, 0.18);
}

.word-fit-cell.matched {
  color: #fff5dd;
  border-color: rgba(47, 95, 72, 0.48);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 230, 160, 0.22), transparent 2rem),
    linear-gradient(135deg, var(--moss), #8d6b36);
}

.word-fit-cell:not(.match-length):not(.matched) {
  box-shadow: inset 0 0 0 1px rgba(47, 95, 72, 0.1), 0 2px 6px rgba(47, 95, 72, 0.1);
}

.word-fit-bank {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 0.75rem 9rem;
  border: 1px dashed rgba(47, 95, 72, 0.26);
  border-radius: 1rem;
  background: rgba(255, 246, 223, 0.48);
}

.selected-word-line {
  margin: 0;
  padding: 0.72rem 0.85rem;
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(217, 175, 85, 0.24), rgba(127, 183, 168, 0.15));
  border: 1px solid rgba(217, 175, 85, 0.45);
  box-shadow: var(--selected-ring);
  text-align: center;
}

.word-fit-group {
  display: grid;
  gap: 0.45rem;
}

.word-fit-group > strong {
  color: var(--moss);
  font-size: 0.82rem;
}

.word-fit-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.word-fit-word {
  min-height: 2.45rem;
  padding: 0.52rem 0.78rem;
  border: 1px solid rgba(47, 95, 72, 0.24);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 246, 223, 0.82);
  box-shadow: var(--tap-shadow);
  font-weight: 850;
  letter-spacing: 0.02em;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.word-fit-word:active {
  transform: scale(0.97);
}

.word-fit-word.selected-card {
  color: #fff5dd;
  border-color: rgba(47, 95, 72, 0.72);
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

.word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(221, 232, 205, 0.62);
  border-style: dashed;
  box-shadow: none;
  opacity: 0.72;
  cursor: default;
}

.tone-blue,
.pair-boundary {
  --pair-soft: rgba(156, 190, 216, 0.3);
  --pair-strong: rgba(156, 190, 216, 0.5);
  --pair-border: rgba(87, 124, 155, 0.42);
  --pair-glow: rgba(156, 190, 216, 0.24);
}

.tone-gold,
.pair-values {
  --pair-soft: rgba(226, 185, 99, 0.28);
  --pair-strong: rgba(226, 185, 99, 0.48);
  --pair-border: rgba(154, 116, 40, 0.38);
  --pair-glow: rgba(226, 185, 99, 0.24);
}

.tone-sage,
.pair-nature {
  --pair-soft: rgba(157, 186, 137, 0.3);
  --pair-strong: rgba(157, 186, 137, 0.5);
  --pair-border: rgba(92, 129, 79, 0.4);
  --pair-glow: rgba(157, 186, 137, 0.24);
}

.tone-lavender,
.pair-music {
  --pair-soft: rgba(194, 171, 215, 0.32);
  --pair-strong: rgba(194, 171, 215, 0.52);
  --pair-border: rgba(124, 96, 151, 0.38);
  --pair-glow: rgba(194, 171, 215, 0.24);
}

.tone-coral,
.pair-connection {
  --pair-soft: rgba(224, 145, 130, 0.25);
  --pair-strong: rgba(224, 145, 130, 0.42);
  --pair-border: rgba(171, 92, 78, 0.34);
  --pair-glow: rgba(224, 145, 130, 0.2);
}

.tone-clay,
.pair-unload {
  --pair-soft: rgba(194, 132, 93, 0.26);
  --pair-strong: rgba(194, 132, 93, 0.44);
  --pair-border: rgba(143, 87, 54, 0.36);
  --pair-glow: rgba(194, 132, 93, 0.2);
}

.tone-teal,
.pair-pattern {
  --pair-soft: rgba(113, 178, 170, 0.28);
  --pair-strong: rgba(113, 178, 170, 0.48);
  --pair-border: rgba(61, 128, 119, 0.38);
  --pair-glow: rgba(113, 178, 170, 0.22);
}

.tone-rose,
.pair-care {
  --pair-soft: rgba(226, 163, 178, 0.28);
  --pair-strong: rgba(226, 163, 178, 0.48);
  --pair-border: rgba(167, 91, 110, 0.34);
  --pair-glow: rgba(226, 163, 178, 0.22);
}

@media (max-width: 390px) {
  .match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.snapshot-grid .empty-state {
  grid-column: 1 / -1;
}

.snapshot-card {
  display: grid;
  gap: 0.35rem;
  min-height: 5.2rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: var(--ink);
  text-align: left;
  background:
    radial-gradient(circle at 88% 18%, rgba(217, 175, 85, 0.16), transparent 5rem),
    rgba(255, 246, 223, 0.72);
  box-shadow: var(--small-shadow);
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.snapshot-card span {
  color: var(--soft-ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.snapshot-card strong {
  line-height: 1.22;
}

.glimmer-hub-line {
  margin: -0.25rem 0 0.9rem;
}

.glimmer-recent {
  background:
    radial-gradient(circle at 10% 12%, rgba(217, 175, 85, 0.2), transparent 7rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.9), rgba(235, 224, 199, 0.72));
}

.glimmer-top-summary {
  border-color: rgba(217, 175, 85, 0.34);
  background:
    radial-gradient(circle at 9% 10%, rgba(217, 175, 85, 0.24), transparent 7rem),
    radial-gradient(circle at 90% 88%, rgba(95, 167, 165, 0.16), transparent 7rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.9), rgba(238, 222, 190, 0.7));
}

.glimmer-recent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.glimmer-snapshot {
  min-height: 4.85rem;
}

.glimmer-hub-grid {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.glimmer-section-card {
  --glimmer-section-accent: #d9af55;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--glimmer-section-accent) 36%, var(--line));
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--glimmer-section-accent) 20%, transparent), transparent 6rem),
    rgba(255, 246, 223, 0.76);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--glimmer-section-accent) 10%, transparent);
}

.glimmer-section-card::before {
  content: "";
  display: block;
  width: 3.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--glimmer-section-accent);
}

.glimmer-accent-gold { --glimmer-section-accent: #d9af55; }
.glimmer-accent-sage { --glimmer-section-accent: #7fae83; }
.glimmer-accent-teal { --glimmer-section-accent: #5fa7a5; }
.glimmer-accent-coral { --glimmer-section-accent: #df8d79; }
.glimmer-accent-blue { --glimmer-section-accent: #7ea6c8; }
.glimmer-accent-lavender { --glimmer-section-accent: #a990c8; }
.glimmer-accent-rose { --glimmer-section-accent: #d58aa5; }
.glimmer-accent-clay { --glimmer-section-accent: #c88861; }
.glimmer-accent-green { --glimmer-section-accent: #8aa95f; }

.glimmer-section-card .secondary-btn,
.glimmer-section-card .choice-btn {
  --choice-accent: var(--glimmer-section-accent);
  border-color: color-mix(in srgb, var(--glimmer-section-accent) 44%, rgba(47, 95, 72, 0.2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--glimmer-section-accent) 22%, rgba(255, 246, 223, 0.94)), rgba(255, 246, 223, 0.8));
}

.glimmer-section-card .section-title {
  margin: 0 0 0.25rem;
}

.glimmer-keepsake-list {
  display: grid;
  gap: 0.65rem;
}

.glimmer-keepsake-card {
  --saved-accent: var(--brass);
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--saved-accent) 28%, rgba(47, 95, 72, 0.14));
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--saved-accent) 16%, transparent), transparent 5rem),
    rgba(255, 251, 239, 0.72);
  box-shadow: 0 0.5rem 1.1rem rgba(35, 42, 31, 0.05);
}

.glimmer-keepsake-card:nth-child(6n + 1) { --saved-accent: #d9af55; }
.glimmer-keepsake-card:nth-child(6n + 2) { --saved-accent: #7fae83; }
.glimmer-keepsake-card:nth-child(6n + 3) { --saved-accent: #5fa7a5; }
.glimmer-keepsake-card:nth-child(6n + 4) { --saved-accent: #d58aa5; }
.glimmer-keepsake-card:nth-child(6n + 5) { --saved-accent: #7ea6c8; }
.glimmer-keepsake-card:nth-child(6n + 6) { --saved-accent: #df8d79; }

.glimmer-keepsake-card strong {
  line-height: 1.28;
}

.glimmer-keepsake-card span {
  color: var(--soft-ink);
  font-size: 0.8rem;
  font-weight: 750;
}

.glimmer-empty {
  padding: 0.85rem;
}

.map-view-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.75rem 0;
}

.map-view-actions .secondary-btn:first-child {
  grid-column: 1 / -1;
}

.map-thread-card {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--moss) 24%, var(--line));
  cursor: pointer;
}

.map-thread-card strong {
  font-size: 1rem;
  color: var(--ink);
}

.map-thread-card span,
.map-thread-card small {
  color: var(--soft-ink);
}

.map-network {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(217, 175, 85, 0.18), transparent 5.5rem),
    radial-gradient(circle at 20% 18%, rgba(95, 167, 165, 0.14), transparent 7rem),
    rgba(255, 246, 223, 0.72);
}

.map-center-node {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 8.2rem;
  height: 8.2rem;
  padding: 0.8rem;
  border-radius: 50%;
  text-align: center;
  color: #fff5dd;
  font-weight: 900;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  box-shadow: var(--shadow);
}

.map-area-ring {
  position: absolute;
  inset: 0.9rem;
}

.map-area-node {
  position: absolute;
  width: 5.15rem;
  min-height: 3.2rem;
  padding: 0.42rem;
  border-radius: 1rem;
  border: 1px solid rgba(47, 95, 72, 0.22);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.05;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: var(--small-shadow);
}

.map-area-node:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); }
.map-area-node:nth-child(2) { right: 0; top: 22%; }
.map-area-node:nth-child(3) { right: 0; bottom: 18%; }
.map-area-node:nth-child(4) { left: 50%; bottom: 0; transform: translateX(-50%); }
.map-area-node:nth-child(5) { left: 0; bottom: 18%; }
.map-area-node:nth-child(6) { left: 0; top: 22%; }

.map-area-node.selected {
  color: #fff5dd;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  border-color: rgba(47, 95, 72, 0.62);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

.map-detail-section .section-heading-row {
  align-items: center;
}

.glimmer-add-form .section-title {
  margin-bottom: 0;
}

.example-strip {
  display: grid;
  gap: 0.45rem;
}

.example-strip span {
  display: block;
  padding: 0.65rem 0.75rem;
  border: 1px dashed rgba(47, 95, 72, 0.22);
  border-radius: 0.9rem;
  color: var(--soft-ink);
  background: rgba(255, 251, 239, 0.58);
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: default;
}

.checkin-card {
  background:
    radial-gradient(circle at 14% 18%, rgba(144, 170, 145, 0.24), transparent 8rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.86), rgba(226, 214, 185, 0.76));
}

.card-btn,
.choice-btn,
.primary-btn,
.secondary-btn,
.danger-btn {
  width: 100%;
  min-height: 3.35rem;
  border-radius: 1.05rem;
  text-align: left;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.card-btn:active,
.choice-btn:active,
.primary-btn:active,
.secondary-btn:active,
.danger-btn:active,
.back-btn:active,
.quiet-btn:active {
  transform: scale(0.985);
}

.card-btn {
  --choice-accent: var(--brass);
  padding: 1rem;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--choice-accent) 24%, var(--line));
  background:
    linear-gradient(145deg, rgba(255, 246, 223, 0.86), rgba(236, 220, 190, 0.72)),
    radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--choice-accent) 22%, transparent), transparent 8rem);
  box-shadow: var(--small-shadow);
}

.grid .card-btn:nth-child(6n + 1) { --choice-accent: #d9af55; }
.grid .card-btn:nth-child(6n + 2) { --choice-accent: #7fae83; }
.grid .card-btn:nth-child(6n + 3) { --choice-accent: #5fa7a5; }
.grid .card-btn:nth-child(6n + 4) { --choice-accent: #d58aa5; }
.grid .card-btn:nth-child(6n + 5) { --choice-accent: #7ea6c8; }
.grid .card-btn:nth-child(6n + 6) { --choice-accent: #df8d79; }

.card-btn.selected-card {
  border-color: rgba(217, 175, 85, 0.76);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

.choice-btn.selected-card {
  color: #fff5dd;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  border-color: rgba(47, 95, 72, 0.72);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

/* A suggestion, not a selection: no checkmark, just a light lift so it
   doesn't read as "already chosen" the way .selected-card does. */
.choice-btn.suggested-card {
  border-color: rgba(217, 175, 85, 0.5);
  background: rgba(217, 175, 85, 0.1);
}

.choice-btn.selected-card::before,
.choice-btn.selected::before,
.card-btn.selected-card::before,
.chip.selected::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  color: #fff8ea;
  background: rgba(47, 95, 72, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  vertical-align: middle;
}

.choice-btn.selected-card::before,
.choice-btn.selected::before {
  background: rgba(255, 248, 234, 0.22);
}

.slider-wrap {
  display: grid;
  gap: 0.55rem;
}

.value-slider {
  width: 100%;
  accent-color: var(--moss);
}

.slider-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  color: var(--soft-ink);
  font-size: 0.78rem;
  line-height: 1.2;
}

.slider-labels span:nth-child(2) {
  text-align: center;
}

.slider-labels span:last-child {
  text-align: right;
}

.card-btn strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.08rem;
}

.card-btn span,
.muted {
  color: var(--soft-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.choice-btn {
  --choice-accent: var(--brass);
  position: relative;
  padding: 0.95rem 1rem;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--choice-accent) 28%, rgba(47, 95, 72, 0.24));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent),
    color-mix(in srgb, var(--choice-accent) 9%, rgba(255, 246, 223, 0.72));
  box-shadow: var(--tap-shadow);
  font-size: 1rem;
  font-weight: 750;
}

.choice-btn[data-choice="true"]::after,
.card-btn[data-choice="true"]::after,
.card-btn[data-action]::after {
  content: "\203A";
  float: right;
  margin-left: 0.75rem;
  color: color-mix(in srgb, var(--choice-accent, var(--moss)) 70%, var(--moss));
  font-size: 1.1rem;
  line-height: 1;
}

.choice-btn.selected-card::after,
.choice-btn.selected::after,
.card-btn.selected-card::after {
  color: currentColor;
  opacity: 0.75;
}

.grid .choice-btn:nth-child(6n + 1) { --choice-accent: #d9af55; }
.grid .choice-btn:nth-child(6n + 2) { --choice-accent: #7fae83; }
.grid .choice-btn:nth-child(6n + 3) { --choice-accent: #5fa7a5; }
.grid .choice-btn:nth-child(6n + 4) { --choice-accent: #d58aa5; }
.grid .choice-btn:nth-child(6n + 5) { --choice-accent: #7ea6c8; }
.grid .choice-btn:nth-child(6n + 6) { --choice-accent: #df8d79; }

.choice-btn.selected {
  border-color: rgba(47, 95, 72, 0.62);
  background: rgba(213, 226, 196, 0.78);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

.primary-btn,
.secondary-btn,
.danger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  text-align: center;
  font-weight: 700;
}

.primary-btn {
  color: #fff5dd;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 226, 154, 0.36), transparent 7rem),
    linear-gradient(135deg, #20382f, var(--moss) 52%, #8d6b36);
  box-shadow: 0 14px 26px rgba(47, 95, 72, 0.28);
}

.secondary-btn {
  color: var(--moss);
  background: rgba(255, 246, 223, 0.72);
  border: 1px solid var(--line);
}

.quiet-btn,
.back-btn {
  font-weight: 750;
}

.danger-btn {
  color: #714038;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent),
    rgba(243, 218, 207, 0.82);
  border: 1px solid rgba(142, 72, 58, 0.28);
  box-shadow: var(--small-shadow);
}

.danger-btn.selected,
.danger-btn.selected-card {
  color: #fff7ed;
  background: linear-gradient(135deg, #8a4b3f, #b46e58);
  border-color: rgba(142, 72, 58, 0.72);
}

.stack {
  display: grid;
  gap: 0.85rem;
}

.panel {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background:
    linear-gradient(150deg, rgba(255, 246, 223, 0.84), rgba(235, 221, 191, 0.74)),
    radial-gradient(circle at 0 0, rgba(201, 214, 201, 0.18), transparent 12rem);
  box-shadow: var(--shadow);
}

.soft-panel {
  padding: 1rem;
  border-radius: 1.1rem;
  background: rgba(255, 246, 223, 0.58);
  border: 1px solid var(--line);
}

.settings-collapse {
  padding: 0;
  overflow: hidden;
}

.settings-collapse > summary {
  margin: 0;
  padding: 1rem;
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.settings-collapse > summary::-webkit-details-marker {
  display: none;
}

.settings-collapse > summary::after {
  content: "\25BE";
  flex-shrink: 0;
  color: var(--moss);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.settings-collapse[open] > summary::after {
  transform: rotate(180deg);
}

.settings-collapse[open] > summary {
  border-bottom: 1px solid var(--line);
}

.settings-collapse-body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.home-daily-reminder {
  margin: 0 0 0.8rem;
}

.home-reminder-text {
  white-space: pre-wrap;
}

.textarea-counter {
  margin-top: -0.55rem;
  color: var(--soft-ink);
  font-size: 0.74rem;
  text-align: right;
}

.dream-entry-text {
  white-space: pre-wrap;
}

.foundation-pill-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
  gap: 0.55rem;
}

.foundation-pill {
  display: grid;
  gap: 0.3rem;
  min-height: 4.2rem;
  padding: 0.7rem 0.65rem;
  border: 1px solid rgba(127, 174, 131, 0.32);
  border-radius: 1rem;
  position: relative;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(217, 175, 85, 0.14), rgba(255, 251, 239, 0.82));
  box-shadow: var(--small-shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.foundation-pill:active {
  transform: scale(0.97);
}

.foundation-pill strong {
  font-size: 0.86rem;
  line-height: 1.18;
}

.foundation-pill span {
  color: var(--soft-ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.foundation-pill-check {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--moss);
  color: #fff6e6;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.foundation-pill.completed {
  border-color: rgba(47, 95, 72, 0.42);
  box-shadow: 0 0 0 3px rgba(47, 95, 72, 0.12), var(--small-shadow);
}

.screen-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.7rem;
}

.screen-title-row .screen-title {
  margin: 0;
}

.rename-link {
  flex-shrink: 0;
}

.prompt-card,
.PromptCard {
  padding: 1rem;
  border-radius: 1.15rem;
  background: rgba(255, 246, 223, 0.68);
  border: 1px solid rgba(217, 175, 85, 0.28);
}

.support-line {
  margin: 0.65rem 0 0.2rem;
  padding: 0.68rem 0 0.68rem 0.85rem;
  border-left: 3px solid rgba(127, 183, 168, 0.56);
  color: var(--soft-ink);
  background: transparent;
  box-shadow: none;
  font-size: 0.94rem;
  line-height: 1.5;
  pointer-events: none;
}

.checkin-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.checkin-option-grid .choice-btn {
  min-width: 0;
}

.checkin-option-grid .choice-btn:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 680px) {
  .checkin-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.selected-checkin-pill {
  width: fit-content;
  padding: 0.55rem 0.78rem;
  border: 1px solid rgba(47, 95, 72, 0.34);
  border-radius: 999px;
  color: var(--moss);
  background: rgba(213, 226, 196, 0.72);
  font-weight: 800;
}

.text-input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: var(--ink);
  background: rgba(255, 246, 223, 0.72);
  font: inherit;
}

.contrast-grid {
  display: grid;
  gap: 0.75rem;
}

.moment-summary {
  display: grid;
  gap: 0.32rem;
}

.small-win-history-group {
  display: grid;
  gap: 0.7rem;
}

.small-win-history-list {
  display: grid;
  gap: 0.85rem;
}

.small-win-history-card {
  width: 100%;
  padding: 0.95rem;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 251, 239, 0.86), rgba(239, 248, 239, 0.66)),
    var(--card);
  box-shadow: var(--small-shadow);
}

.small-win-history-card:hover,
.small-win-history-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 95, 72, 0.28);
}

.small-win-history-card.full-entry-card {
  cursor: default;
}

.small-win-history-card .private-preview-text {
  font-size: 1rem;
  line-height: 1.32;
}

.prompt {
  margin: 0 0 0.72rem;
  padding-left: 0.72rem;
  border-left: 3px solid rgba(217, 175, 85, 0.72);
  color: var(--ink);
  font-size: clamp(1.05rem, 3.8vw, 1.16rem);
  font-weight: 850;
  line-height: 1.35;
}

.copy {
  color: #465545;
  font-size: clamp(1rem, 3.5vw, 1.08rem);
  line-height: 1.58;
}

.textOnLight,
.cardTitle {
  color: var(--ink);
}

.textOnDark {
  color: #fff5dd;
}

.mutedTextOnLight,
.cardSubtitle,
.helperNote {
  color: var(--soft-ink);
}

.mutedTextOnDark {
  color: rgba(255, 245, 221, 0.82);
}

.bodyCopy {
  color: #465545;
  line-height: 1.58;
}

.actionButtonText {
  font-weight: 800;
}

.split-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.textarea {
  width: 100%;
  min-height: 11rem;
  resize: vertical;
  padding: 1rem;
  border: 1px solid rgba(47, 95, 72, 0.24);
  border-radius: 1.1rem;
  color: var(--ink);
  background: rgba(255, 246, 223, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.textarea:focus,
button:focus-visible {
  outline: 3px solid rgba(217, 175, 85, 0.72);
  outline-offset: 2px;
}

.hype-me-textarea {
  min-height: 14rem;
  line-height: 1.6;
}

.hype-me-read-card {
  border-color: color-mix(in srgb, var(--brass) 40%, var(--line));
  background:
    radial-gradient(circle at 92% 8%, rgba(217, 175, 85, 0.16), transparent 7rem),
    linear-gradient(145deg, rgba(255, 250, 240, 0.96), rgba(245, 233, 210, 0.82));
}

.hype-me-note-card .grid {
  margin-top: 0.4rem;
}

.catch-glimmer { max-width: 42rem; margin-inline: auto; }
.catch-glimmer > * { min-width: 0; }
.catch-glimmer .catch-preview {
  display: grid; gap: .6rem; padding: 1rem; width: 100%; text-align: left;
  color: var(--ink); background: var(--paper-strong); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; min-height: 44px;
}
.catch-preview small { color: inherit; }
.catch-full-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.catch-keep { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.catch-keep.selected { color: var(--ink); background: var(--paper-strong); outline: 2px solid currentColor; outline-offset: -3px; }
.catch-keep:disabled { opacity: .65; }
.catch-keepsakes { border-inline-start: 3px solid var(--moss); padding-inline-start: .8rem; }
.catch-jar, .catch-theme { --jar-accent: #d6a781; }
.catch-jar.theme-1, .catch-theme.theme-1 { --jar-accent: #8baf94; }
.catch-jar.theme-2, .catch-theme.theme-2 { --jar-accent: #b1a1c5; }
.catch-jar.theme-3, .catch-theme.theme-3 { --jar-accent: #c7ad71; }
.catch-jar.theme-4, .catch-theme.theme-4 { --jar-accent: #83aab9; }
.catch-jar .gratitude-jar-lid { background: var(--jar-accent); }
.catch-jar .gratitude-jar-glass { height: 15rem; min-height: 15rem; padding-top: 1rem; border-color: var(--jar-accent); }
.catch-jar .gratitude-token { flex: 0 0 2.45rem; height: 1.75rem; }
.catch-jar .gratitude-jar-label { background: var(--paper-strong); color: var(--ink); }
.catch-theme { display: flex; align-items: center; gap: .8rem; text-align: left; }
.catch-theme-swatch { flex: 0 0 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--jar-accent); }
.catch-drop { animation: catch-glimmer-drop .65s ease-out both; }
@keyframes catch-glimmer-drop { from { opacity: 0; transform: translateY(-7rem) rotate(-8deg); } to { opacity: 1; transform: translateY(0) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .catch-drop { animation: none; } }
body[data-motion="reduced"] .catch-drop { animation: none; }

.gratitude-jar-visual {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: min(15rem, 100%);
  margin: 0.4rem auto 0.8rem;
  padding-top: 0.4rem;
}

.gratitude-jar-lid {
  width: 7.2rem;
  height: 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #9a7d4b, #d8b86a);
  box-shadow: 0 8px 16px rgba(72, 54, 28, 0.16);
}

.gratitude-jar-glass {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 0.35rem;
  width: 12rem;
  min-height: 12.6rem;
  padding: 4rem 1rem 1.1rem;
  border: 2px solid rgba(126, 166, 200, 0.42);
  border-radius: 1.2rem 1.2rem 2.3rem 2.3rem;
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.78), transparent 2.6rem),
    linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(207, 226, 228, 0.28));
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.48), var(--small-shadow);
  overflow: hidden;
}

.gratitude-jar-label {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: var(--moss);
  background: rgba(255, 246, 223, 0.82);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 800;
}

.gratitude-token {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  min-height: 1.75rem;
  padding: 0.22rem 0.42rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.28rem;
  color: #384334;
  background: #f4d37c;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
  transform: rotate(var(--tilt, -3deg));
  box-shadow: 0 6px 12px rgba(59, 47, 30, 0.12);
}

.gratitude-token::after {
  content: "";
  width: 72%;
  height: 1px;
  background: rgba(56, 67, 52, 0.22);
  box-shadow: 0 0.35rem 0 rgba(56, 67, 52, 0.16);
}

.gratitude-token.recent {
  outline: 2px solid rgba(217, 175, 85, 0.82);
  box-shadow: 0 0 0 0.28rem rgba(217, 175, 85, 0.15), 0 8px 15px rgba(59, 47, 30, 0.14);
}

.gratitude-token.placeholder {
  opacity: 0.38;
}

.token-1 { --tilt: -5deg; background: #f4d37c; }
.token-2 { --tilt: 4deg; background: #cddfa6; }
.token-3 { --tilt: -2deg; background: #add7d3; }
.token-4 { --tilt: 6deg; background: #e8b0a4; }
.token-5 { --tilt: -4deg; background: #d9c6ef; }

.gratitude-stars .gratitude-token::before,
.gratitude-warm-glow .gratitude-token::before {
  content: "*";
  margin-right: 0.16rem;
}

.gratitude-leaves .gratitude-token {
  border-radius: 999px 999px 999px 0.35rem;
}

.gratitude-ribbon .gratitude-jar-glass::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 2.8rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(223, 141, 121, 0.58);
}

.gratitude-warm-glow .gratitude-jar-glass {
  box-shadow: inset 0 0 34px rgba(255, 239, 184, 0.72), 0 16px 34px rgba(217, 175, 85, 0.22);
}

.gratitude-pulled-card {
  padding: 1rem;
}

.gratitude-recent-panel {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
  border: 1px solid rgba(217, 175, 85, 0.34);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 92% 10%, rgba(217, 175, 85, 0.18), transparent 5rem),
    rgba(255, 246, 223, 0.72);
}

.gratitude-note-count {
  width: fit-content;
  margin: 0 auto;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  color: #fff8ea;
  background: linear-gradient(135deg, #9a7d4b, #2f5f48);
  font-weight: 850;
  box-shadow: 0 10px 20px rgba(72, 54, 28, 0.14);
}

.gratitude-note-list {
  display: grid;
  gap: 0.7rem;
}

.gratitude-date-group {
  display: grid;
  gap: 0.55rem;
}

.gratitude-date-group h4 {
  margin: 0.15rem 0 0;
  color: var(--moss);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
}

.calendar-shell {
  display: grid;
  gap: 0.55rem;
  margin: 0.85rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(127, 174, 131, 0.24);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 8% 12%, rgba(217, 175, 85, 0.14), transparent 5.5rem),
    rgba(255, 251, 239, 0.68);
  box-shadow: var(--small-shadow);
}

.calendar-month-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
}

.calendar-month-bar h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.15;
  text-align: center;
}

.calendar-nav-btn {
  min-height: 2.2rem;
  padding-inline: 0.65rem;
  font-size: 0.76rem;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.32rem;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  padding: 0.32rem 0.1rem 0.5rem;
  border: 1px solid rgba(127, 174, 131, 0.22);
  border-radius: 0.8rem;
  color: var(--ink);
  background: rgba(255, 255, 250, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  box-shadow: 0 0.35rem 0.9rem rgba(72, 54, 28, 0.06);
  cursor: pointer;
}

.calendar-day.blank {
  min-height: 2.25rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.calendar-day.today {
  border-color: rgba(217, 175, 85, 0.58);
  background: rgba(255, 246, 223, 0.88);
}

.calendar-day.selected {
  color: #fff8ea;
  border-color: rgba(47, 95, 72, 0.54);
  background: linear-gradient(135deg, #2f5f48, #7fae83);
}

.calendar-day.has-entries i {
  position: absolute;
  bottom: 0.28rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #d9af55;
  box-shadow: 0 0 0 0.16rem rgba(217, 175, 85, 0.14);
}

.calendar-day.selected.has-entries i {
  background: #fff8ea;
}

.calendar-day-panel {
  margin: 1rem 0;
}

.calendar-subsection {
  padding: 0.75rem;
  border: 1px solid rgba(127, 174, 131, 0.18);
  border-radius: 1rem;
  background: rgba(255, 251, 239, 0.46);
}

.calendar-subsection h4 {
  margin: 0;
  color: var(--moss);
  font-size: 0.88rem;
  font-weight: 900;
}

.calendar-entry-list {
  display: grid;
  gap: 0.72rem;
}

.calendar-entry-card {
  display: grid;
  gap: 0.62rem;
  color: var(--ink);
}

.calendar-area-row {
  gap: 0.35rem;
}

.calendar-area-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(47, 95, 72, 0.2);
  border-radius: 999px;
  color: #385442;
  background: rgba(214, 231, 205, 0.72);
  font-size: 0.75rem;
  font-weight: 850;
}

.calendar-entry-form .form-label {
  margin-top: 0.2rem;
  color: var(--moss);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.035rem;
  text-transform: uppercase;
}

.compact-textarea {
  min-height: 7rem;
}

.tending-chip-grid,
.tending-starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.45rem;
}

.tending-chip {
  min-height: 2.7rem;
  justify-content: center;
  text-align: center;
}

.foundation-grid {
  display: grid;
  gap: 0.85rem;
}

.foundation-card,
.foundations-intro {
  position: relative;
  overflow: hidden;
}

.foundation-card::before {
  content: "";
  position: absolute;
  inset: 0.65rem auto auto 0.65rem;
  width: 0.44rem;
  height: calc(100% - 1.3rem);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 175, 85, 0.78), rgba(127, 174, 131, 0.56));
}

.foundation-card > * {
  position: relative;
}

.foundation-card {
  padding-left: 1.35rem;
}

@media (min-width: 760px) {
  .foundation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-theme="dark"] .calendar-shell,
body[data-theme="adaptive-night"] .calendar-shell {
  border-color: rgba(216, 198, 154, 0.18);
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 198, 154, 0.09), transparent 5.5rem),
    rgba(38, 45, 42, 0.92);
}

body[data-theme="dark"] .calendar-month-bar h3,
body[data-theme="dark"] .calendar-entry-card,
body[data-theme="adaptive-night"] .calendar-month-bar h3,
body[data-theme="adaptive-night"] .calendar-entry-card {
  color: var(--ink);
}

body[data-theme="dark"] .calendar-day,
body[data-theme="adaptive-night"] .calendar-day {
  color: var(--ink);
  border-color: rgba(216, 198, 154, 0.18);
  background: rgba(50, 58, 54, 0.92);
}

body[data-theme="dark"] .calendar-day.today,
body[data-theme="adaptive-night"] .calendar-day.today {
  border-color: rgba(216, 198, 154, 0.44);
  background: rgba(67, 65, 52, 0.92);
}

body[data-theme="dark"] .calendar-day.selected,
body[data-theme="adaptive-night"] .calendar-day.selected {
  color: #f3eadc;
  border-color: rgba(216, 198, 154, 0.55);
  background: linear-gradient(135deg, #425a50, #6e806f);
}

body[data-theme="dark"] .calendar-area-chip,
body[data-theme="adaptive-night"] .calendar-area-chip {
  color: #f3eadc;
  border-color: rgba(216, 198, 154, 0.22);
  background: rgba(67, 65, 52, 0.86);
}

body[data-theme="dark"] .calendar-subsection,
body[data-theme="adaptive-night"] .calendar-subsection {
  border-color: rgba(216, 198, 154, 0.16);
  background: rgba(34, 43, 39, 0.78);
}

body[data-theme="dark"] .calendar-subsection h4,
body[data-theme="adaptive-night"] .calendar-subsection h4 {
  color: var(--ink);
}

.gratitude-note-entry {
  display: grid;
  gap: 0.5rem;
  padding: 0.78rem;
  border: 1px solid rgba(127, 174, 131, 0.24);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 94% 10%, rgba(217, 175, 85, 0.13), transparent 5rem),
    rgba(255, 251, 239, 0.58);
}

.gratitude-note-label {
  color: var(--moss);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
}

.gratitude-note-category-row {
  gap: 0.42rem;
}

.gratitude-note-category-row .chip {
  border-color: rgba(47, 95, 72, 0.18);
  background:
    radial-gradient(circle at 90% 10%, rgba(217, 175, 85, 0.14), transparent 4rem),
    rgba(255, 246, 223, 0.68);
}

.gratitude-note-category-row .chip.selected {
  color: #fff8ea;
  border-color: rgba(47, 95, 72, 0.28);
  background: linear-gradient(135deg, #9a7d4b, var(--moss));
  box-shadow: var(--selected-ring);
}

.gratitude-note-card {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  border-color: color-mix(in srgb, var(--brass) 34%, var(--line));
  background:
    radial-gradient(circle at 94% 10%, rgba(217, 175, 85, 0.18), transparent 6rem),
    linear-gradient(145deg, rgba(255, 250, 240, 0.96), rgba(240, 226, 198, 0.74));
  cursor: pointer;
}

.gratitude-note-card:active {
  transform: scale(0.985);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.unload-visual {
  position: relative;
  min-height: 16.5rem;
  margin: 0.65rem 0 1rem;
  padding: clamp(1rem, 5vw, 1.4rem);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 50% 18%, rgba(217, 175, 85, 0.18), transparent 9rem),
    linear-gradient(180deg, rgba(255, 246, 223, 0.62), rgba(221, 232, 205, 0.44));
  border: 1px solid var(--line);
  box-shadow: var(--small-shadow);
  overflow: hidden;
}

.unload-visual::before {
  position: absolute;
  inset: auto -10% -1.1rem;
  height: 5.2rem;
  content: "";
  background:
    radial-gradient(ellipse at 50% 35%, rgba(47, 95, 72, 0.12), transparent 55%),
    linear-gradient(180deg, transparent, rgba(47, 95, 72, 0.08));
  pointer-events: none;
}

.unload-scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(6.8rem, 0.75fr);
  gap: clamp(0.7rem, 4vw, 1.25rem);
  align-items: end;
  min-height: 13.7rem;
}

.unload-visual.placed .placed-burdens .burden-object:first-child {
  animation: burden-release 720ms ease both;
}

@keyframes burden-release {
  0% {
    opacity: 0;
    transform: translate(-2.4rem, -2.2rem) rotate(-12deg) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.backpack-shadow {
  position: absolute;
  left: clamp(1rem, 17vw, 4rem);
  bottom: 0.38rem;
  width: clamp(7.6rem, 43vw, 10.8rem);
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(36, 48, 41, 0.14);
  filter: blur(0.04rem);
}

.backpack-shape {
  position: relative;
  justify-self: center;
  width: clamp(7.4rem, 43vw, 10.2rem);
  height: clamp(9.2rem, 48vw, 12rem);
  border-radius: 2.35rem 2.2rem 1.55rem 1.65rem;
  background:
    radial-gradient(ellipse at 46% 18%, rgba(255, 246, 223, 0.24) 0 14%, transparent 15%),
    linear-gradient(100deg, rgba(255, 246, 223, 0.13), transparent 25%),
    linear-gradient(145deg, #4a604f 0%, #6b7356 48%, #8b6840 100%);
  border: 1px solid rgba(43, 62, 51, 0.28);
  box-shadow:
    inset 0 -1rem 0 rgba(65, 84, 65, 0.23),
    inset 0.7rem 0 1rem rgba(255, 246, 223, 0.08),
    0 18px 34px rgba(18, 27, 22, 0.18);
  transition: transform 220ms ease, box-shadow 220ms ease, border-radius 220ms ease;
}

.backpack-shape::after {
  position: absolute;
  inset: 0.55rem 0.75rem;
  content: "";
  border: 1px dashed rgba(255, 246, 223, 0.22);
  border-radius: 2rem 1.9rem 1.3rem 1.4rem;
  opacity: 0.9;
  pointer-events: none;
}

.backpack-handle {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  width: 3.45rem;
  height: 1.75rem;
  border: 0.42rem solid #4a604f;
  border-bottom: 0;
  border-radius: 1.6rem 1.6rem 0 0;
  transform: translateX(-50%);
}

.backpack-lid {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  width: 5.6rem;
  height: 2.35rem;
  border: 1px solid rgba(36, 48, 41, 0.25);
  border-radius: 1.45rem 1.45rem 0.7rem 0.7rem;
  background: linear-gradient(145deg, #394d43, #6f613d);
  box-shadow: 0 0.28rem 0 rgba(36, 48, 41, 0.14);
  transform: translateX(-50%);
}

.backpack-pocket {
  position: absolute;
  left: 50%;
  bottom: 1.05rem;
  width: 4.55rem;
  height: 2.55rem;
  border: 1px solid rgba(255, 246, 223, 0.3);
  border-radius: 0.85rem 0.85rem 1rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 246, 223, 0.27), rgba(70, 88, 65, 0.18));
  transform: translateX(-50%);
}

.front-pocket::after {
  position: absolute;
  top: 0.58rem;
  left: 50%;
  width: 2.7rem;
  height: 0.16rem;
  content: "";
  border-radius: 999px;
  background: rgba(36, 48, 41, 0.2);
  transform: translateX(-50%);
}

.backpack-side-pocket {
  position: absolute;
  top: 4.8rem;
  width: 1.55rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 246, 223, 0.23);
  border-radius: 0.55rem 0.55rem 0.85rem 0.85rem;
  background: rgba(36, 48, 41, 0.16);
}

.side-left {
  left: -0.22rem;
  transform: rotate(-5deg);
}

.side-right {
  right: -0.22rem;
  transform: rotate(5deg);
}

.backpack-strap {
  position: absolute;
  top: 2.2rem;
  width: 0.5rem;
  height: 5.7rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 223, 0.14), transparent),
    rgba(39, 56, 47, 0.38);
}

.strap-left {
  left: 0.78rem;
  transform: rotate(2deg);
}

.strap-right {
  right: 0.78rem;
  transform: rotate(-2deg);
}

.backpack-buckle {
  position: absolute;
  top: 6.75rem;
  width: 0.8rem;
  height: 0.62rem;
  border: 0.12rem solid rgba(217, 175, 85, 0.72);
  border-radius: 0.15rem;
  background: rgba(36, 48, 41, 0.1);
}

.buckle-left {
  left: 0.62rem;
}

.buckle-right {
  right: 0.62rem;
}

.backpack-seam {
  position: absolute;
  top: 3.1rem;
  width: 1px;
  height: 4.9rem;
  border-left: 1px dashed rgba(255, 246, 223, 0.24);
}

.seam-left {
  left: 2rem;
}

.seam-right {
  right: 2rem;
}

.pack-burdens {
  position: absolute;
  left: 50%;
  top: 2.65rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 5.7rem;
  gap: 0.34rem;
  transform: translateX(-50%);
}

.hanging-burdens {
  position: absolute;
  right: -0.55rem;
  top: 3.15rem;
  display: grid;
  gap: 0.32rem;
}

.burden-object,
.stone-dot {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.08rem;
  height: 0.82rem;
  border-radius: 44% 56% 52% 48%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 246, 223, 0.32), transparent 30%),
    #8c7d68;
  box-shadow: inset -0.08rem -0.08rem 0 rgba(36, 48, 41, 0.16);
}

.burden-bundle,
.burden-note {
  width: 1.16rem;
  height: 0.9rem;
  border-radius: 0.18rem;
  background:
    linear-gradient(90deg, transparent 46%, rgba(108, 83, 59, 0.4) 47% 53%, transparent 54%),
    linear-gradient(145deg, #e8d8b5, #b99a70);
  transform: rotate(-7deg);
}

.burden-knot {
  width: 0.98rem;
  height: 0.98rem;
  border: 0.2rem solid #7b5a3a;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 0.08rem rgba(255, 246, 223, 0.12);
}

.burden-tag {
  width: 1rem;
  height: 1.14rem;
  border-radius: 0.18rem 0.18rem 0.3rem 0.3rem;
  background: linear-gradient(145deg, #c7a45c, #8f6c3f);
  transform: rotate(8deg);
}

.burden-tag::before {
  position: absolute;
  top: 0.15rem;
  left: 50%;
  width: 0.22rem;
  height: 0.22rem;
  content: "";
  border-radius: 50%;
  background: rgba(255, 246, 223, 0.5);
  transform: translateX(-50%);
}

.burden-weight {
  width: 1.06rem;
  height: 0.92rem;
  border-radius: 0.18rem 0.18rem 0.34rem 0.34rem;
  background: linear-gradient(145deg, #6f6254, #3e3833);
}

.burden-weight::before {
  position: absolute;
  top: -0.32rem;
  left: 50%;
  width: 0.54rem;
  height: 0.38rem;
  content: "";
  border: 0.13rem solid #6f6254;
  border-bottom: 0;
  border-radius: 0.4rem 0.4rem 0 0;
  transform: translateX(-50%);
}

.burden-twig {
  width: 1.32rem;
  height: 0.22rem;
  border-radius: 999px;
  background: #6f4c32;
  transform: rotate(-24deg);
}

.burden-twig::after {
  position: absolute;
  right: 0.16rem;
  top: -0.28rem;
  width: 0.8rem;
  height: 0.18rem;
  content: "";
  border-radius: 999px;
  background: #6f4c32;
  transform: rotate(52deg);
}

.burden-shoe {
  width: 1.36rem;
  height: 0.56rem;
  border-radius: 0.55rem 0.22rem 0.22rem 0.42rem;
  background: linear-gradient(145deg, #5a493c, #8b6840);
  transform: rotate(-10deg);
}

.burden-shoe::after {
  position: absolute;
  right: -0.14rem;
  bottom: -0.05rem;
  width: 0.46rem;
  height: 0.16rem;
  content: "";
  border-radius: 999px;
  background: #332c27;
}

.burden-mug {
  width: 0.92rem;
  height: 0.9rem;
  border-radius: 0.16rem 0.16rem 0.34rem 0.34rem;
  background: linear-gradient(145deg, #d9c49f, #9b8059);
}

.burden-mug::after {
  position: absolute;
  right: -0.3rem;
  top: 0.18rem;
  width: 0.4rem;
  height: 0.42rem;
  content: "";
  border: 0.12rem solid #9b8059;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.burden-plate {
  width: 1.16rem;
  height: 1.16rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(111, 98, 84, 0.24) 35% 42%, transparent 43%),
    linear-gradient(145deg, #eee0c5, #c5ad85);
}

.burden-book,
.burden-list,
.burden-envelope {
  width: 1.05rem;
  height: 1.24rem;
  border-radius: 0.12rem;
  background: linear-gradient(145deg, #e8d8b5, #af8e62);
  transform: rotate(6deg);
}

.burden-book::before {
  position: absolute;
  left: 0.22rem;
  inset-block: 0.1rem;
  width: 0.12rem;
  content: "";
  background: rgba(65, 84, 65, 0.22);
}

.burden-list::before {
  position: absolute;
  left: 0.22rem;
  right: 0.22rem;
  top: 0.3rem;
  height: 0.1rem;
  content: "";
  background: rgba(65, 84, 65, 0.26);
  box-shadow: 0 0.28rem 0 rgba(65, 84, 65, 0.22), 0 0.56rem 0 rgba(65, 84, 65, 0.18);
}

.burden-envelope::before {
  position: absolute;
  inset: 0.18rem;
  content: "";
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
  background: rgba(255, 246, 223, 0.28);
}

.burden-keys {
  width: 1.28rem;
  height: 0.88rem;
  background: transparent;
  box-shadow: none;
}

.burden-keys::before {
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  border: 0.14rem solid #c7a45c;
  border-radius: 50%;
}

.burden-keys::after {
  position: absolute;
  left: 0.52rem;
  top: 0.42rem;
  width: 0.7rem;
  height: 0.15rem;
  content: "";
  border-radius: 999px;
  background: #c7a45c;
  box-shadow: 0.34rem 0.18rem 0 -0.04rem #c7a45c;
}

.burden-charger {
  width: 1.28rem;
  height: 1rem;
  border: 0.16rem solid #4c4a45;
  border-right-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-20deg);
}

.burden-charger::after {
  position: absolute;
  right: -0.26rem;
  top: 0.2rem;
  width: 0.34rem;
  height: 0.3rem;
  content: "";
  border-radius: 0.08rem;
  background: #4c4a45;
}

.burden-bottle {
  width: 0.62rem;
  height: 1.34rem;
  border-radius: 0.18rem 0.18rem 0.34rem 0.34rem;
  background: linear-gradient(180deg, #9eb9ad, #5d7a70);
}

.burden-bottle::before {
  position: absolute;
  top: -0.22rem;
  left: 50%;
  width: 0.34rem;
  height: 0.28rem;
  content: "";
  border-radius: 0.08rem;
  background: #4d675e;
  transform: translateX(-50%);
}

.burden-cloth,
.burden-laundry {
  width: 1.28rem;
  height: 0.84rem;
  border-radius: 0.12rem 0.34rem 0.18rem 0.34rem;
  background: linear-gradient(145deg, #cfb98e, #8d7451);
  transform: rotate(-8deg);
}

.burden-cloth::before,
.burden-laundry::before {
  position: absolute;
  inset: 0.18rem 0.28rem auto;
  height: 0.1rem;
  content: "";
  background: rgba(255, 246, 223, 0.28);
  box-shadow: 0 0.25rem 0 rgba(255, 246, 223, 0.2);
}

.burden-box {
  width: 1.1rem;
  height: 1rem;
  border-radius: 0.14rem;
  background:
    linear-gradient(90deg, transparent 45%, rgba(84, 60, 38, 0.26) 46% 54%, transparent 55%),
    linear-gradient(145deg, #bc9160, #8c623d);
}

.burden-umbrella {
  width: 1.38rem;
  height: 0.82rem;
  border-radius: 1rem 1rem 0.12rem 0.12rem;
  background: linear-gradient(145deg, #60706a, #3f554e);
}

.burden-umbrella::after {
  position: absolute;
  left: 50%;
  top: 0.68rem;
  width: 0.13rem;
  height: 0.72rem;
  content: "";
  border-radius: 999px;
  background: #3f554e;
  transform: translateX(-50%);
}

.placed-burden-zone {
  position: relative;
  align-self: end;
  min-height: 6.3rem;
  padding: 1.1rem 0.75rem 0.55rem;
  border: 1px solid rgba(47, 95, 72, 0.14);
  border-radius: 1.1rem;
  background: rgba(255, 251, 239, 0.46);
}

.placed-ground {
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.42rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(47, 95, 72, 0.1);
}

.placed-zone-label,
.unload-state-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.62rem;
  border: 1px solid rgba(47, 95, 72, 0.16);
  border-radius: 999px;
  background: rgba(255, 246, 223, 0.8);
  color: var(--moss);
  font-size: 0.75rem;
  font-weight: 900;
}

.unload-state-pill {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
}

.placed-burdens {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  align-items: end;
  margin-top: 0.88rem;
  min-height: 2.6rem;
}

.placed-burdens .burden-object:nth-child(2n) {
  transform: translateY(0.22rem) rotate(8deg);
}

.placed-burdens .burden-object:nth-child(3n) {
  transform: translateY(-0.12rem) rotate(-8deg);
}

.unload-burden-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
  gap: 0.7rem;
}

.burden-level-card {
  align-items: flex-start;
  min-height: 5.7rem;
  padding: 0.82rem;
  text-align: left;
  border-color: rgba(47, 95, 72, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 251, 239, 0.92), rgba(245, 232, 204, 0.58));
}

.burden-level-card strong,
.burden-level-card span {
  display: block;
}

.burden-level-card strong {
  margin-bottom: 0.28rem;
  color: var(--moss);
  font-size: 0.94rem;
}

.burden-level-card span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.burden-level-card.selected-card {
  border-color: rgba(81, 132, 102, 0.55);
  background:
    linear-gradient(145deg, rgba(223, 238, 214, 0.95), rgba(255, 246, 223, 0.86));
  color: var(--ink);
  box-shadow: 0 12px 24px rgba(47, 95, 72, 0.16);
}

.burden-level-card.selected-card strong {
  color: var(--ink);
}

.burden-level-card.selected-card span {
  color: var(--body-copy);
}

.backpack-state-very-heavy .backpack-shape {
  transform: translateY(0.32rem) scaleX(1.08) scaleY(1.04) rotate(-1deg);
  border-radius: 2.6rem 2.45rem 1.5rem 1.55rem;
}

.backpack-state-slightly-lighter .backpack-shape {
  transform: translateY(0.12rem) scaleX(1.03) scaleY(1.01);
}

.backpack-state-medium .backpack-shape {
  transform: translateY(0) scale(0.99);
}

.backpack-state-noticeably-lighter .backpack-shape {
  transform: translateY(-0.12rem) scale(0.96);
}

.backpack-state-relief .backpack-shape {
  transform: translateY(-0.22rem) scale(0.92);
  box-shadow:
    inset 0 -0.65rem 0 rgba(65, 84, 65, 0.18),
    0 12px 22px rgba(18, 27, 22, 0.12);
}

.backpack-state-noticeably-lighter .hanging-burdens,
.backpack-state-relief .hanging-burdens {
  opacity: 0.28;
}

.backpack-state-relief .inside-burdens .burden-object:not(:first-child) {
  opacity: 0.16;
}

.backpack-state-overburdened .backpack-shape {
  transform: translateY(0.42rem) scaleX(1.11) scaleY(1.06) rotate(-1.5deg);
  border-radius: 2.75rem 2.5rem 1.42rem 1.48rem;
  box-shadow:
    inset 0 -0.9rem 0 rgba(65, 84, 65, 0.28),
    inset 0 0.7rem 0 rgba(255, 255, 255, 0.16),
    0 18px 30px rgba(18, 27, 22, 0.2);
}

.backpack-state-overburdened .backpack-lid {
  top: -0.28rem;
  height: 2.85rem;
  transform: rotate(-2deg);
}

.backpack-state-overburdened .backpack-strap {
  opacity: 0.95;
}

.backpack-state-overburdened .side-left {
  left: -1.02rem;
}

.backpack-state-overburdened .side-right {
  right: -1.02rem;
}

.backpack-state-overburdened .hanging-burdens {
  opacity: 1;
  transform: translateY(0.15rem) rotate(2deg);
}

.backpack-state-heavy .backpack-shape {
  transform: translateY(0.22rem) scaleX(1.05) scaleY(1.02);
  border-radius: 2.55rem 2.45rem 1.55rem 1.55rem;
}

.backpack-state-heavy .hanging-burdens {
  opacity: 0.88;
}

.backpack-state-manageable .backpack-shape {
  transform: translateY(0) scale(0.99);
}

.backpack-state-manageable .hanging-burdens {
  opacity: 0.58;
}

.backpack-state-light .backpack-shape {
  transform: translateY(-0.1rem) scale(0.95);
  box-shadow:
    inset 0 -0.6rem 0 rgba(65, 84, 65, 0.17),
    0 11px 20px rgba(18, 27, 22, 0.12);
}

.backpack-state-light .hanging-burdens {
  opacity: 0.35;
}

.backpack-state-light .inside-burdens .burden-object:nth-child(n + 4) {
  opacity: 0;
}

.backpack-state-weightless .backpack-shape {
  transform: translateY(-0.28rem) scale(0.9);
  box-shadow:
    inset 0 -0.48rem 0 rgba(65, 84, 65, 0.13),
    0 9px 18px rgba(18, 27, 22, 0.1),
    0 0 0 0.42rem rgba(255, 246, 223, 0.28);
}

.backpack-state-weightless .hanging-burdens {
  opacity: 0;
}

.backpack-state-weightless .inside-burdens .burden-object:not(:first-child) {
  opacity: 0;
}

.backpack-glimmer-light {
  position: absolute;
  inset: -1.1rem;
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 222, 145, 0.34), rgba(255, 222, 145, 0.08) 45%, transparent 68%);
  pointer-events: none;
}

@media (max-width: 430px) {
  .unload-visual {
    min-height: 21rem;
  }

  .unload-scene {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    min-height: 18rem;
  }

  .backpack-shadow {
    left: 50%;
    bottom: 6.3rem;
    transform: translateX(-50%);
  }

  .placed-burden-zone {
    min-height: 5.3rem;
  }

  .unload-burden-choice-grid {
    grid-template-columns: 1fr;
  }
}

.unload-stone-list {
  display: grid;
  gap: 0.55rem;
}

.unload-stone-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.72rem;
  border-radius: 1rem;
  border: 1px solid rgba(47, 95, 72, 0.14);
  background: rgba(255, 246, 223, 0.5);
}

.unload-stone-card p {
  margin: 0 0 0.18rem;
  color: var(--ink);
  line-height: 1.35;
}

.stone-dot {
  width: 1.05rem;
  height: 0.78rem;
  margin-top: 0.18rem;
}

.section-title {
  margin: 1.15rem 0 0.65rem;
  color: var(--moss);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  --choice-accent: var(--brass);
  min-height: 2.75rem;
  padding: 0.6rem 0.78rem;
  border-radius: 999px;
  color: #415444;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent),
    color-mix(in srgb, var(--choice-accent) 10%, rgba(255, 246, 223, 0.72));
  border: 1px solid color-mix(in srgb, var(--choice-accent) 30%, var(--line));
  font-size: 0.88rem;
  box-shadow: 0 6px 14px rgba(18, 27, 22, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.chip:active {
  transform: scale(0.975);
}

.chip.selected {
  color: #fff5dd;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  border-color: var(--moss);
}

.chip-row .chip:nth-child(6n + 1) { --choice-accent: #d9af55; }
.chip-row .chip:nth-child(6n + 2) { --choice-accent: #7fae83; }
.chip-row .chip:nth-child(6n + 3) { --choice-accent: #5fa7a5; }
.chip-row .chip:nth-child(6n + 4) { --choice-accent: #d58aa5; }
.chip-row .chip:nth-child(6n + 5) { --choice-accent: #7ea6c8; }
.chip-row .chip:nth-child(6n + 6) { --choice-accent: #df8d79; }

.glimmer-category-row {
  gap: 0.5rem;
}

.glimmer-category-chip {
  --glimmer-chip-accent: var(--brass);
  --glimmer-chip-bg: color-mix(in srgb, var(--glimmer-chip-accent) 16%, #fffaf0);
  --glimmer-chip-border: color-mix(in srgb, var(--glimmer-chip-accent) 48%, var(--line));
  color: #314539;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent),
    var(--glimmer-chip-bg);
  border-color: var(--glimmer-chip-border);
}

.glimmer-category-chip.selected {
  color: #25352d;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--glimmer-chip-accent) 34%, #fff9eb), color-mix(in srgb, var(--glimmer-chip-accent) 18%, #ffffff));
  border-color: color-mix(in srgb, var(--glimmer-chip-accent) 72%, var(--moss));
  box-shadow: var(--selected-ring), 0 8px 18px color-mix(in srgb, var(--glimmer-chip-accent) 22%, transparent);
}

.glimmer-category-body { --glimmer-chip-accent: #7fae83; }
.glimmer-category-senses { --glimmer-chip-accent: #5fa7a5; }
.glimmer-category-joy { --glimmer-chip-accent: #d9af55; }
.glimmer-category-connection { --glimmer-chip-accent: #df8d79; }
.glimmer-category-boundary { --glimmer-chip-accent: #7ea6c8; }
.glimmer-category-practical-care { --glimmer-chip-accent: #9fb46f; }
.glimmer-category-emotional-care { --glimmer-chip-accent: #d58aa5; }
.glimmer-category-meaning { --glimmer-chip-accent: #cfa052; }
.glimmer-category-gratitude { --glimmer-chip-accent: #e0b85e; }
.glimmer-category-acts-of-care { --glimmer-chip-accent: #d98974; }
.glimmer-category-im-not-sure { --glimmer-chip-accent: #a697ca; }

.value-card {
  display: grid;
  gap: 0.7rem;
}

.value-result-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 42%, var(--line));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--value-accent, var(--brass)) 22%, transparent), transparent 7rem),
    linear-gradient(145deg, rgba(255, 246, 223, 0.92), rgba(236, 224, 196, 0.76));
}

.value-result-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.38rem;
  background: var(--value-accent, var(--brass));
}

.value-result-card > * {
  position: relative;
}

.value-summary-card {
  gap: 0.75rem;
}

.value-summary-card .prompt {
  padding: 0.85rem 0.95rem;
  border-left: 0.28rem solid var(--value-accent, var(--brass));
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--value-accent, var(--brass)) 14%, rgba(255, 246, 223, 0.86));
}

.value-action-grid .choice-btn,
.value-action-grid .secondary-btn,
.value-action-grid .primary-btn {
  --choice-accent: var(--value-accent, var(--brass));
  color: #243029;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 54%, rgba(47, 95, 72, 0.24));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, var(--brass)) 18%, transparent), transparent 5rem),
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, var(--brass)) 32%, rgba(255, 246, 223, 0.96)), rgba(255, 251, 239, 0.86));
  box-shadow: 0 10px 18px color-mix(in srgb, var(--value-accent, var(--brass)) 22%, transparent);
}

.value-action-grid .choice-btn:first-child,
.value-action-grid .primary-btn:first-child {
  color: #fff8ea;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 246, 223, 0.24), transparent 7rem),
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, var(--brass)) 78%, #2f5f48), #2f5f48);
}

.value-accordion {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--value-accent, var(--brass)) 44%, var(--line));
  border-radius: 1rem;
  background: rgba(255, 246, 223, 0.66);
}

.value-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3.2rem;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--value-accent, var(--brass)) 28%, rgba(255, 246, 223, 0.94)), rgba(255, 246, 223, 0.72));
}

.value-accordion summary::-webkit-details-marker {
  display: none;
}

.value-accordion summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  color: #fff8ea;
  background: color-mix(in srgb, var(--value-accent, var(--brass)) 74%, #2f5f48);
}

.value-accordion[open] summary {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--value-accent, var(--brass)) 30%, var(--line));
}

.value-accordion[open] summary::after {
  content: "–";
}

.value-accordion-body {
  padding: 0.95rem;
}

.uncover-values-area-grid {
  display: grid;
  gap: 0.85rem;
}

.uncover-values-area-card {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 42%, var(--line));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--value-accent, var(--brass)) 22%, transparent), transparent 6.5rem),
    linear-gradient(145deg, color-mix(in srgb, var(--value-accent, var(--brass)) 13%, rgba(255, 246, 223, 0.94)), rgba(255, 246, 223, 0.76));
  box-shadow: var(--tap-shadow);
}

.uncover-values-area-card strong {
  font-size: 1.02rem;
}

.uncover-values-area-card span,
.uncover-values-area-card small {
  color: var(--soft-ink);
  line-height: 1.4;
}

.uncover-values-area-card small {
  font-size: 0.78rem;
}

.uncover-values-rating {
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 42%, var(--line));
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--value-accent, var(--brass)) 18%, transparent), transparent 7rem),
    rgba(255, 246, 223, 0.78);
}

.uncover-values-rating.uncover-rating-compact {
  background: none;
  gap: 0.8rem;
}

.screen:has(.uncover-rating-compact) > .hero {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-block: 0.8rem;
  padding-block: 0;
}

.screen:has(.uncover-rating-compact) > .hero .subtitle {
  order: -1;
  margin: 0;
  font-size: 0.9rem;
  color: var(--soft-ink);
}

.screen:has(.uncover-rating-compact) > .hero .screen-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
}

.uncover-rating-compact > .copy {
  margin-top: 0;
}

.uncover-feedback {
  min-height: 1.5em;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
}

.uncover-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.uncover-summary-item {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.uncover-summary-item h3,
.uncover-summary-section h2 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.uncover-summary-item dl {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
}

.uncover-summary-item dl > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.5rem;
  font-size: 0.85rem;
}

.uncover-summary-item dd { margin: 0; }
.uncover-summary-item meter { grid-column: 1 / -1; width: 100%; height: 0.5rem; }
.uncover-summary details > summary,
.uncover-rating-compact details > summary { cursor: pointer; padding-block: 0.6rem; }

.value-slider-field {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--value-accent, var(--brass)) 30%, var(--line));
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.38);
}

.value-slider-field > span {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
}

.value-slider-field em {
  color: var(--soft-ink);
  font-size: 0.88rem;
  line-height: 1.35;
}

.value-slider-field .slider-status {
  color: var(--moss);
  font-size: 0.86rem;
}

.value-slider-field.not-rated input[type="range"] {
  opacity: 0.42;
}

.value-slider-field input[type="range"] {
  width: 100%;
  accent-color: var(--value-accent, var(--brass));
}

.value-slider-field small {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  color: var(--soft-ink);
  font-size: 0.76rem;
  line-height: 1.25;
}

.value-slider-field small span:nth-child(2) {
  text-align: center;
}

.value-slider-field small span:last-child {
  text-align: right;
}

.value-needs-panel {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--value-accent, var(--brass)) 34%, var(--line));
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, var(--brass)) 13%, rgba(255, 246, 223, 0.92)), rgba(255, 255, 255, 0.34));
}

.value-need-chip-row {
  gap: 0.55rem;
}

.value-need-chip {
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 40%, rgba(47, 95, 72, 0.18));
  background: color-mix(in srgb, var(--value-accent, var(--brass)) 12%, rgba(255, 246, 223, 0.82));
}

.value-need-chip.selected,
.value-need-chip.selected-card {
  color: #fff8ea;
  border-color: color-mix(in srgb, var(--value-accent, var(--brass)) 78%, #2f5f48);
  background: linear-gradient(135deg, color-mix(in srgb, var(--value-accent, var(--brass)) 78%, #2f5f48), #2f5f48);
  box-shadow: var(--selected-ring);
}

.uncover-result-group {
  display: grid;
  gap: 0.75rem;
}

.uncover-result-card-grid {
  display: grid;
  gap: 0.7rem;
}

.uncover-result-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--value-accent, var(--brass)) 30%, var(--line));
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.36);
}

.uncover-result-card > strong {
  color: var(--ink);
  font-size: 1.02rem;
}

.uncover-percent-row {
  display: grid;
  gap: 0.42rem;
}

.uncover-percent-row span {
  width: fit-content;
  max-width: 100%;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  color: var(--soft-ink);
  background: rgba(255, 246, 223, 0.72);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.uncover-percent-row span.is-low {
  color: #6b4c2b;
  background: #f5dfb8;
}

.uncover-percent-row span.is-high {
  color: #fff8ea;
  background: linear-gradient(135deg, color-mix(in srgb, var(--value-accent, var(--brass)) 74%, #2f5f48), #2f5f48);
}

.uncover-percent-row span.is-unrated {
  color: var(--soft-ink);
  background: rgba(255, 251, 239, 0.54);
}

.value-need-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.value-need-tags span {
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--value-accent, var(--brass)) 36%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--value-accent, var(--brass)) 15%, rgba(255, 246, 223, 0.86));
  font-size: 0.76rem;
  font-weight: 750;
}

.value-list {
  color: var(--soft-ink);
  line-height: 1.65;
}

.detail-grid {
  display: grid;
  gap: 0.8rem;
}

.soft-list {
  margin: 0;
  padding-left: 1.25rem;
  color: inherit;
  line-height: 1.55;
}

.result-value {
  padding: 1.25rem;
  border-radius: 1.35rem;
  color: #2d3d33;
  background:
    linear-gradient(150deg, rgba(255, 246, 223, 0.84), rgba(238, 222, 190, 0.7)),
    radial-gradient(circle at 12% 18%, rgba(217, 175, 85, 0.34), transparent 10rem);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin: 1.25rem auto;
}

.wheel-pointer {
  position: absolute;
  top: -0.2rem;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 0.65rem solid transparent;
  border-right: 0.65rem solid transparent;
  border-top: 1.05rem solid var(--moss);
  filter: drop-shadow(0 4px 8px rgba(18, 27, 22, 0.18));
}

.wheel {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 19rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--wheel-gradient, conic-gradient(from 20deg, var(--brass), var(--ember), var(--plum), var(--moon), var(--moss), var(--brass)));
  border: 1px solid rgba(47, 95, 72, 0.18);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(255, 246, 223, 0.2);
  cursor: pointer;
  font: inherit;
  transform: rotate(var(--wheel-rotation, 0deg));
  transition: transform 480ms cubic-bezier(0.16, 0.72, 0.2, 1);
}

.wheel.spinning {
  animation: glimmer-spin 1200ms cubic-bezier(0.16, 0.72, 0.2, 1) both;
}

@keyframes glimmer-spin {
  from {
    transform: rotate(calc(var(--wheel-rotation, 0deg) - 720deg));
  }
  to {
    transform: rotate(var(--wheel-rotation, 0deg));
  }
}

.wheel-label {
  position: absolute;
  width: 5rem;
  color: rgba(25, 36, 31, 0.92);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 6px rgba(255, 246, 223, 0.72);
  pointer-events: none;
}

.wheel-label,
.wheel-inner {
  rotate: var(--wheel-counter-rotation, 0deg);
}

.label-0 { top: 15%; left: 50%; }
.label-1 { top: 27%; left: 76%; }
.label-2 { top: 50%; left: 86%; }
.label-3 { top: 74%; left: 76%; }
.label-4 { top: 85%; left: 50%; }
.label-5 { top: 74%; left: 24%; }
.label-6 { top: 50%; left: 14%; }
.label-7 { top: 27%; left: 24%; }

.wheel-inner {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  padding: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 246, 223, 0.9);
  color: var(--moss);
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.82rem, 3vw, 1rem);
  line-height: 1.12;
  box-shadow: inset 0 0 0 1px rgba(47, 95, 72, 0.14);
  pointer-events: none;
}

.wheel-area-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.8rem 0 1.1rem;
}

.wheel-area-token {
  display: grid;
  gap: 0.18rem;
  min-height: 3.05rem;
  width: 100%;
  padding: 0.62rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--accent, var(--brass)) 42%, var(--line));
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--brass)) 16%, rgba(255, 246, 223, 0.9)), rgba(255, 251, 239, 0.76));
  color: var(--ink);
  box-shadow: var(--small-shadow);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.wheel-area-token:active {
  transform: scale(0.985);
}

.wheel-area-token i {
  color: color-mix(in srgb, var(--accent, var(--brass)) 55%, var(--ink));
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wheel-area-token small {
  color: var(--soft-ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.18;
}

.wheel-area-token.active {
  border-color: color-mix(in srgb, var(--accent, var(--brass)) 64%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--brass)) 18%, transparent), var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .screen,
  .motion-soft-reveal,
  .motion-gentle-presence,
  .motion-completion-glow,
  .motion-word-fit-placed,
  .welcome-glow-bloom,
  .wheel.spinning,
  .timer-complete,
  .unload-visual.placed .placed-burdens .burden-object:first-child {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Same effect as the prefers-reduced-motion query above, but driven by the
   explicit in-app choice offered at onboarding and in Settings > Movement
   On Screen, rather than only the device's OS-level setting. Either one
   turns motion off. */
body[data-motion="reduced"] * ,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
}

body[data-motion="reduced"] .screen,
body[data-motion="reduced"] .motion-soft-reveal,
body[data-motion="reduced"] .motion-gentle-presence,
body[data-motion="reduced"] .motion-completion-glow,
body[data-motion="reduced"] .motion-word-fit-placed,
body[data-motion="reduced"] .welcome-glow-bloom,
body[data-motion="reduced"] .wheel.spinning,
body[data-motion="reduced"] .timer-complete,
body[data-motion="reduced"] .unload-visual.placed .placed-burdens .burden-object:first-child {
  animation: none !important;
  transition-duration: 0.01ms !important;
}

.wheel-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: -0.35rem 0 1rem;
}

.wheel-legend span {
  min-height: 2.35rem;
  padding: 0.55rem 0.65rem;
  border-radius: 999px;
  color: var(--soft-ink);
  background: rgba(255, 246, 223, 0.58);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.15;
  display: grid;
  place-items: center;
  text-align: center;
}

.value-area-grid {
  grid-template-columns: 1fr;
  margin-top: 0.9rem;
}

.value-area-chip {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  min-height: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: rgba(255, 246, 223, 0.68);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 20px rgba(47, 95, 72, 0.08);
}

.value-area-chip span {
  display: block;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--soft-ink);
  font-size: 0.84rem;
  line-height: 1.32;
  text-align: left;
}

.value-area-chip strong {
  font-size: 0.95rem;
}

.empty-state {
  padding: 1.15rem;
  border-radius: 1.15rem;
  color: var(--soft-ink);
  background: rgba(255, 246, 223, 0.62);
  border: 1px dashed rgba(47, 95, 72, 0.28);
  line-height: 1.5;
  box-shadow: none;
}

.footer-note {
  margin-top: 1.2rem;
  padding: 1rem;
  color: var(--soft-ink);
  border-radius: 1.1rem;
  background: rgba(255, 246, 223, 0.52);
  border: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.45;
}

.bottom-line {
  margin: 1.25rem 0 0;
  color: #50624f;
  text-align: center;
  line-height: 1.5;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  max-width: 520px;
  margin: 0 auto;
  padding: 0.62rem 0.78rem calc(0.78rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(47, 95, 72, 0.16);
  background: rgba(246, 234, 211, 0.88);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  display: grid;
  place-items: center;
  gap: 0.12rem;
  min-height: 3.25rem;
  border-radius: 0.9rem;
  color: var(--soft-ink);
  background: transparent;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.05;
}

@media (max-width: 430px) {
  .app {
    padding-right: 0.82rem;
    padding-left: 0.82rem;
  }

  .dashboard-grid,
  .grid {
    gap: 0.58rem;
  }

  .dash-card,
  .card-btn,
  .choice-btn,
  .state-card,
  .support-action-card {
    min-height: 3.25rem;
  }

  .dash-card {
    padding: 0.8rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .check-row.wrap-check-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-action-row,
  .today-value-primary-actions {
    grid-template-columns: 1fr;
  }

  .home-quiet-action-row .secondary-btn {
    flex: 1 1 9.5rem;
  }

  .textarea {
    min-height: 9.5rem;
  }

  .bottom-nav {
    gap: 0.16rem;
    padding-right: 0.48rem;
    padding-left: 0.48rem;
  }

  .bottom-nav button {
    min-height: 3.15rem;
    padding: 0.28rem 0.12rem;
    font-size: 0.62rem;
  }
}

.nav-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
  font-size: 0;
  line-height: 1;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.nav-home::before {
  width: 0.82rem;
  height: 0.82rem;
  border-left: 0.16rem solid currentColor;
  border-bottom: 0.16rem solid currentColor;
  transform: translateY(0.06rem) rotate(-45deg);
}

.nav-home::after {
  width: 0.48rem;
  height: 0.42rem;
  border: 0.14rem solid currentColor;
  border-top: 0;
  bottom: 0.08rem;
}

.nav-support::before {
  width: 0.92rem;
  height: 0.92rem;
  border: 0.17rem solid currentColor;
  border-radius: 50%;
}

.nav-support::after {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  border: 0.16rem solid currentColor;
  background: transparent;
}

.nav-unload::before {
  width: 0.88rem;
  height: 0.7rem;
  border: 0.15rem solid currentColor;
  border-radius: 0.16rem;
}

.nav-unload::after {
  width: 0.6rem;
  height: 0.16rem;
  border-radius: 999px;
  background: currentColor;
  bottom: 0.34rem;
}

.nav-practices::before {
  width: 0.88rem;
  height: 0.88rem;
  border: 0.15rem solid currentColor;
  border-radius: 0.2rem;
  transform: rotate(45deg);
}

.nav-glimmers::before {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 34%);
}

.bottom-nav button.active {
  color: #fff5dd;
  background: linear-gradient(135deg, var(--moss), #8d6b36);
  box-shadow: 0 10px 22px rgba(47, 95, 72, 0.26);
}

body[data-theme="dark"] {
  --cream: #101614;
  --paper: rgba(30, 39, 35, 0.94);
  --paper-strong: #27322d;
  --ink: #ded6c8;
  --soft-ink: #b4ad9f;
  --sage: #8aa08b;
  --moss: #90aa91;
  --deep: #080d0c;
  --grove: #151d1a;
  --brass: #bda261;
  --ember: #9c7059;
  --plum: #90839a;
  --moon: #bac3b9;
  --line: rgba(222, 211, 188, 0.2);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --small-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(circle at 18% 6%, rgba(189, 162, 97, 0.12), transparent 20rem),
    radial-gradient(circle at 86% 20%, rgba(144, 170, 145, 0.12), transparent 24rem),
    linear-gradient(150deg, #080d0c 0%, #111917 56%, #171615 100%);
}

body[data-theme="dark"] .app-shell {
  background:
    linear-gradient(rgba(222, 211, 188, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 211, 188, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #101614 0%, #151d1a 58%, #171a17 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="dark"] .opening,
body[data-theme="dark"] .reflection-line,
body[data-theme="dark"] .home-checkin-ack,
body[data-theme="dark"] .home-illustration,
body[data-theme="dark"] .card-btn,
body[data-theme="dark"] .quote-card,
body[data-theme="dark"] .state-card,
body[data-theme="dark"] .dash-card,
body[data-theme="dark"] .snapshot-card,
body[data-theme="dark"] .wide-card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .soft-panel,
body[data-theme="dark"] .creative-result-hero,
body[data-theme="dark"] .capacity-home-control,
body[data-theme="dark"] .capacity-depth-toggle,
body[data-theme="dark"] .chip-btn,
body[data-theme="dark"] .secondary-btn,
body[data-theme="dark"] .danger-btn,
body[data-theme="dark"] .quiet-btn,
body[data-theme="dark"] .back-btn,
body[data-theme="dark"] .chip,
body[data-theme="dark"] .textarea,
body[data-theme="dark"] .footer-note,
body[data-theme="dark"] .bottom-nav {
  color: var(--ink);
  background: rgba(34, 44, 39, 0.96);
  border-color: rgba(222, 211, 188, 0.24);
}

body[data-theme="dark"] .copy,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .subtitle,
body[data-theme="dark"] .bottom-line,
body[data-theme="dark"] .card-btn span,
body[data-theme="dark"] .state-card span,
body[data-theme="dark"] .dash-card span,
body[data-theme="dark"] .dash-card small,
body[data-theme="dark"] .snapshot-card span,
body[data-theme="dark"] .tiny-link,
body[data-theme="dark"] .wide-card span,
body[data-theme="dark"] .creative-result-copy,
body[data-theme="dark"] .related-spark-card span,
body[data-theme="dark"] .card-kicker,
body[data-theme="dark"] .quote-card small,
body[data-theme="dark"] .capacity-home-control span,
body[data-theme="dark"] .helperNote,
body[data-theme="dark"] .cardSubtitle,
body[data-theme="dark"] .mutedTextOnLight {
  color: var(--soft-ink);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] .prompt,
body[data-theme="dark"] .brand-mark,
body[data-theme="dark"] .section-title {
  color: var(--ink);
}

body[data-theme="dark"] .primary-btn,
body[data-theme="dark"] .bottom-nav button.active,
body[data-theme="dark"] .chip.selected,
body[data-theme="dark"] .support-hero-card {
  color: #211b11;
  background: linear-gradient(135deg, #bda261, #90aa91);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
}

body[data-theme="dark"] .support-hero-card span {
  color: rgba(33, 27, 17, 0.72);
}

body[data-theme="dark"] .map-network,
body[data-theme="adaptive-night"] .map-network {
  background:
    radial-gradient(circle at center, rgba(217, 175, 85, 0.13), transparent 5.5rem),
    radial-gradient(circle at 20% 18%, rgba(116, 150, 144, 0.12), transparent 7rem),
    rgba(35, 44, 40, 0.84);
}

body[data-theme="dark"] .map-area-node,
body[data-theme="adaptive-night"] .map-area-node,
body[data-theme="dark"] .map-thread-card,
body[data-theme="adaptive-night"] .map-thread-card {
  color: var(--ink);
  background: rgba(42, 52, 48, 0.92);
  border-color: rgba(222, 211, 188, 0.2);
}

body[data-theme="dark"] .danger-btn,
body[data-theme="adaptive-night"] .danger-btn {
  color: #ffd9cb;
  background: rgba(92, 54, 47, 0.66);
  border-color: rgba(238, 171, 145, 0.34);
}

body[data-theme="dark"] .word-bubble.selected-card,
body[data-theme="adaptive-night"] .word-bubble.selected-card {
  color: #211b11;
  border-color: rgba(255, 232, 170, 0.78);
  background: linear-gradient(135deg, #d9af55, #98b48c);
  box-shadow: 0 0 0 3px rgba(217, 175, 85, 0.28), 0 12px 24px rgba(0, 0, 0, 0.32);
}

body[data-theme="dark"] .word-bubble.selected-card::before,
body[data-theme="adaptive-night"] .word-bubble.selected-card::before {
  color: #fff7de;
  background: rgba(34, 44, 39, 0.9);
}

body[data-theme="dark"] .dashboard-hero .card-kicker,
body[data-theme="dark"] .dashboard-hero span,
body[data-theme="dark"] .dashboard-hero small {
  color: rgba(33, 27, 17, 0.78);
}

body[data-theme="dark"] .tiny-link {
  background: rgba(42, 53, 47, 0.94);
  border-color: rgba(222, 211, 188, 0.24);
}

body[data-theme="dark"] .home-illustration {
  background:
    radial-gradient(circle at 50% 35%, rgba(189, 162, 97, 0.18), transparent 4.8rem),
    linear-gradient(180deg, rgba(34, 44, 39, 0.98), rgba(25, 34, 31, 0.98));
}

body[data-theme="dark"] .quote-card span,
body[data-theme="dark"] .state-card strong,
body[data-theme="dark"] .dash-card strong,
body[data-theme="dark"] .wide-card strong,
body[data-theme="dark"] .creative-result-name,
body[data-theme="dark"] .textOnLight,
body[data-theme="dark"] .cardTitle,
body[data-theme="dark"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="dark"] .featured-glimmer-card {
  background:
    radial-gradient(circle at 14% 18%, rgba(189, 162, 97, 0.16), transparent 8rem),
    rgba(38, 49, 43, 0.98);
}

body[data-theme="dark"] .snapshot-card strong {
  color: var(--ink);
}

body[data-theme="dark"] .mini-chips i {
  color: var(--soft-ink);
  background: rgba(19, 27, 24, 0.72);
  border-color: rgba(222, 211, 188, 0.18);
}

body[data-theme="dark"] .secondary-btn,
body[data-theme="dark"] .choice-btn,
body[data-theme="dark"] .chip,
body[data-theme="dark"] .text-input,
body[data-theme="dark"] .support-line,
body[data-theme="dark"] .selected-checkin-pill,
body[data-theme="dark"] .textarea {
  color: var(--ink);
  border-color: rgba(222, 211, 188, 0.22);
}

body[data-theme="dark"] .choice-btn,
body[data-theme="dark"] .result-value,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .unload-visual,
body[data-theme="dark"] .unload-stone-card,
body[data-theme="dark"] .practice-tool-card,
body[data-theme="dark"] .practice-category-card,
body[data-theme="dark"] .word-fit-grid,
body[data-theme="dark"] .word-fit-bank,
body[data-theme="dark"] .selected-word-line,
body[data-theme="dark"] .wheel-legend span,
body[data-theme="dark"] .wheel-area-token,
body[data-theme="adaptive-night"] .wheel-area-token {
  color: var(--ink);
  background: rgba(42, 53, 47, 0.94);
  border-color: rgba(222, 211, 188, 0.25);
}

body[data-theme="dark"] .wheel-area-token i,
body[data-theme="adaptive-night"] .wheel-area-token i {
  color: var(--accent);
}

body[data-theme="dark"] .wheel-area-token small,
body[data-theme="adaptive-night"] .wheel-area-token small {
  color: var(--soft-ink);
}

body[data-theme="dark"] .text-input,
body[data-theme="dark"] .support-line,
body[data-theme="dark"] .selected-checkin-pill,
body[data-theme="dark"] .textarea {
  background: rgba(42, 53, 47, 0.94);
}

body[data-theme="dark"] .wheel-inner {
  color: #211b11;
  background: #d9cba9;
}

body[data-theme="dark"] .wheel-label {
  color: rgba(33, 27, 17, 0.82);
}

body[data-theme="dark"] .value-area-chip {
  color: var(--ink);
  background: rgba(42, 53, 47, 0.94);
  border-color: rgba(222, 211, 188, 0.25);
}

body[data-theme="dark"] .value-area-chip span {
  color: var(--soft-ink);
  background: transparent;
  border: 0;
}

body[data-theme="dark"] .wheel-pointer {
  border-top-color: #bda261;
}

body[data-theme="dark"] .bottom-nav button {
  color: var(--soft-ink);
}

body[data-theme="spectrum"] {
  --cream: #fbf1dd;
  --paper: rgba(255, 246, 224, 0.84);
  --paper-strong: #fff8ea;
  --ink: #29302d;
  --soft-ink: #68706a;
  --sage: #7b9b85;
  --moss: #3b7466;
  --deep: #18231f;
  --grove: #264238;
  --brass: #d9b45f;
  --ember: #c9896e;
  --plum: #8b789b;
  --moon: #a7c8c7;
  --line: rgba(68, 82, 72, 0.16);
  background:
    radial-gradient(circle at 18% 5%, rgba(217, 180, 95, 0.23), transparent 20rem),
    radial-gradient(circle at 86% 14%, rgba(139, 120, 155, 0.18), transparent 22rem),
    radial-gradient(circle at 75% 88%, rgba(167, 200, 199, 0.2), transparent 24rem),
    linear-gradient(150deg, #f8ecd8 0%, #eaf1dd 48%, #efe5ed 100%);
}

body[data-theme="spectrum"] .app-shell {
  background:
    linear-gradient(rgba(255, 248, 234, 0.52) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 234, 0.34) 1px, transparent 1px),
    linear-gradient(180deg, #fff3df 0%, #e9efd9 48%, #efe4ee 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="spectrum"] .primary-btn,
body[data-theme="spectrum"] .bottom-nav button.active,
body[data-theme="spectrum"] .chip.selected {
  color: #fff8ea;
  background:
    linear-gradient(135deg, #3b7466 0%, #7a789d 52%, #b87861 100%);
}

body[data-theme="spectrum"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #fff2b7 0 16%, transparent 17%),
    conic-gradient(from 210deg, #3b7466, #a7c8c7, #8b789b, #c9896e, #d9b45f, #3b7466);
}

body[data-theme="deep-tide"] {
  --cream: #dfecea;
  --paper: rgba(241, 246, 241, 0.86);
  --paper-strong: #f7f2e7;
  --ink: #173238;
  --soft-ink: #4b666b;
  --sage: #7b9e8d;
  --moss: #205f62;
  --deep: #0e2d35;
  --grove: #16434c;
  --brass: #c7a45c;
  --ember: #b18a57;
  --plum: #536f88;
  --moon: #98c8c6;
  --line: rgba(32, 95, 98, 0.2);
  --shadow: 0 20px 46px rgba(14, 45, 53, 0.16);
  --small-shadow: 0 12px 28px rgba(14, 45, 53, 0.12);
  --tap-shadow: 0 8px 18px rgba(14, 45, 53, 0.14);
  --selected-ring: 0 0 0 0.2rem rgba(54, 126, 132, 0.24);
  background:
    radial-gradient(circle at 16% 4%, rgba(152, 200, 198, 0.34), transparent 23rem),
    radial-gradient(circle at 88% 14%, rgba(80, 122, 145, 0.24), transparent 24rem),
    radial-gradient(circle at 76% 88%, rgba(199, 164, 92, 0.16), transparent 22rem),
    linear-gradient(150deg, #dfecea 0%, #c8dcdd 48%, #e4ddcc 100%);
}

body[data-theme="deep-tide"] .app-shell {
  background:
    linear-gradient(rgba(247, 242, 231, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 242, 231, 0.3) 1px, transparent 1px),
    linear-gradient(180deg, #eef5f2 0%, #d7e6e5 54%, #e8dfcc 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="deep-tide"] .opening,
body[data-theme="deep-tide"] .reflection-line,
body[data-theme="deep-tide"] .home-checkin-ack,
body[data-theme="deep-tide"] .card-btn,
body[data-theme="deep-tide"] .quote-card,
body[data-theme="deep-tide"] .state-card,
body[data-theme="deep-tide"] .dash-card,
body[data-theme="deep-tide"] .snapshot-card,
body[data-theme="deep-tide"] .wide-card,
body[data-theme="deep-tide"] .panel,
body[data-theme="deep-tide"] .soft-panel,
body[data-theme="deep-tide"] .empty-state,
body[data-theme="deep-tide"] .practice-tool-card,
body[data-theme="deep-tide"] .practice-category-card,
body[data-theme="deep-tide"] .practice-preview-card,
body[data-theme="deep-tide"] .saved-section-card,
body[data-theme="deep-tide"] .saved-item-card,
body[data-theme="deep-tide"] .result-value,
body[data-theme="deep-tide"] .unload-visual,
body[data-theme="deep-tide"] .unload-stone-card,
body[data-theme="deep-tide"] .word-fit-grid,
body[data-theme="deep-tide"] .word-fit-bank,
body[data-theme="deep-tide"] .selected-word-line,
body[data-theme="deep-tide"] .wheel-legend span,
body[data-theme="deep-tide"] .value-area-chip,
body[data-theme="deep-tide"] .bottom-nav,
body[data-theme="deep-tide"] .footer-note {
  color: var(--ink);
  border-color: rgba(32, 95, 98, 0.22);
  background:
    radial-gradient(circle at 92% 12%, rgba(152, 200, 198, 0.16), transparent 7rem),
    rgba(247, 242, 231, 0.84);
}

body[data-theme="deep-tide"] .reflection-line,
body[data-theme="deep-tide"] .support-line,
body[data-theme="deep-tide"] .theme-confirmation {
  border-color: rgba(32, 95, 98, 0.22);
  background:
    linear-gradient(135deg, rgba(231, 241, 239, 0.9), rgba(247, 242, 231, 0.78));
  color: #254b51;
}

body[data-theme="deep-tide"] .copy,
body[data-theme="deep-tide"] .muted,
body[data-theme="deep-tide"] .subtitle,
body[data-theme="deep-tide"] .bottom-line,
body[data-theme="deep-tide"] .card-btn span,
body[data-theme="deep-tide"] .state-card span,
body[data-theme="deep-tide"] .dash-card span,
body[data-theme="deep-tide"] .dash-card small,
body[data-theme="deep-tide"] .snapshot-card span,
body[data-theme="deep-tide"] .wide-card span,
body[data-theme="deep-tide"] .card-kicker,
body[data-theme="deep-tide"] .quote-card small,
body[data-theme="deep-tide"] .bottom-nav button,
body[data-theme="deep-tide"] .helperNote,
body[data-theme="deep-tide"] .cardSubtitle,
body[data-theme="deep-tide"] .mutedTextOnLight,
body[data-theme="deep-tide"] .value-area-chip span {
  color: var(--soft-ink);
}

body[data-theme="deep-tide"] h1,
body[data-theme="deep-tide"] h2,
body[data-theme="deep-tide"] h3,
body[data-theme="deep-tide"] .prompt,
body[data-theme="deep-tide"] .brand-mark,
body[data-theme="deep-tide"] .section-title,
body[data-theme="deep-tide"] .quote-card span,
body[data-theme="deep-tide"] .state-card strong,
body[data-theme="deep-tide"] .dash-card strong,
body[data-theme="deep-tide"] .wide-card strong,
body[data-theme="deep-tide"] .textOnLight,
body[data-theme="deep-tide"] .cardTitle,
body[data-theme="deep-tide"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="deep-tide"] .primary-btn,
body[data-theme="deep-tide"] .bottom-nav button.active,
body[data-theme="deep-tide"] .chip.selected,
body[data-theme="deep-tide"] .choice-btn.selected-card,
body[data-theme="deep-tide"] .choice-btn.selected,
body[data-theme="deep-tide"] .word-bubble.selected-card,
body[data-theme="deep-tide"] .value-need-chip.selected-card,
body[data-theme="deep-tide"] .support-hero-card {
  color: #f8f3e8;
  border-color: rgba(14, 45, 53, 0.36);
  background:
    linear-gradient(135deg, #0f4651 0%, #1f6a70 58%, #516f88 100%);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

body[data-theme="deep-tide"] .support-hero-card span,
body[data-theme="deep-tide"] .support-hero-card em {
  color: rgba(248, 243, 232, 0.86);
}

body[data-theme="deep-tide"] .secondary-btn,
body[data-theme="deep-tide"] .quiet-btn,
body[data-theme="deep-tide"] .back-btn,
body[data-theme="deep-tide"] .chip,
body[data-theme="deep-tide"] .choice-btn,
body[data-theme="deep-tide"] .text-input,
body[data-theme="deep-tide"] .textarea,
body[data-theme="deep-tide"] .selected-checkin-pill,
body[data-theme="deep-tide"] .glimmer-category-chip,
body[data-theme="deep-tide"] .gratitude-category-chip {
  color: var(--ink);
  border-color: rgba(32, 95, 98, 0.24);
  background:
    linear-gradient(135deg, rgba(247, 242, 231, 0.9), rgba(221, 237, 234, 0.76));
}

body[data-theme="deep-tide"] .secondary-btn:hover,
body[data-theme="deep-tide"] .choice-btn:hover,
body[data-theme="deep-tide"] .card-btn:hover,
body[data-theme="deep-tide"] .wide-card:hover,
body[data-theme="deep-tide"] .dash-card:hover,
body[data-theme="deep-tide"] .practice-tool-card:hover,
body[data-theme="deep-tide"] .practice-category-card:hover {
  border-color: rgba(31, 106, 112, 0.48);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="deep-tide"] .card-btn.selected-card,
body[data-theme="deep-tide"] .glimmer-category-chip.selected,
body[data-theme="deep-tide"] .gratitude-category-chip.selected-card {
  border-color: rgba(199, 164, 92, 0.68);
  background:
    radial-gradient(circle at 92% 10%, rgba(199, 164, 92, 0.26), transparent 7rem),
    linear-gradient(135deg, rgba(218, 232, 228, 0.96), rgba(247, 242, 231, 0.92));
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="deep-tide"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #e9dba7 0 16%, transparent 17%),
    conic-gradient(from 210deg, #0f4651, #98c8c6, #516f88, #7b9e8d, #c7a45c, #0f4651);
}

body[data-theme="deep-tide"] .dash-card {
  --dash-accent: #1f6a70;
}

body[data-theme="deep-tide"] .today-value-panel,
body[data-theme="deep-tide"] .today-value-context,
body[data-theme="deep-tide"] .value-accordion,
body[data-theme="deep-tide"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #1f6a70) 34%, rgba(32, 95, 98, 0.2));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, #98c8c6) 18%, transparent), transparent 8rem),
    linear-gradient(145deg, rgba(247, 242, 231, 0.94), rgba(220, 235, 233, 0.82));
}

body[data-theme="deep-tide"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #1f6a70) 34%, rgba(32, 95, 98, 0.2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #98c8c6) 14%, rgba(247, 242, 231, 0.9)), rgba(221, 237, 234, 0.76));
}

body[data-theme="deep-tide"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #c7a45c 0 12.5%, #b18a57 12.5% 25%, #1f6a70 25% 37.5%, #516f88 37.5% 50%, #7b9e8d 50% 62.5%, #98c8c6 62.5% 75%, #e0cf93 75% 87.5%, #2e7f83 87.5% 100%) !important;
  border-color: rgba(14, 45, 53, 0.28);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(247, 242, 231, 0.26);
}

body[data-theme="deep-tide"] .wheel-inner {
  color: var(--ink);
  background: #f4edda;
  border-color: rgba(32, 95, 98, 0.18);
}

body[data-theme="deep-tide"] .wheel-label {
  color: rgba(23, 50, 56, 0.84);
}

body[data-theme="deep-tide"] .wheel-pointer {
  border-top-color: #0f4651;
}

body[data-theme="deep-tide"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #0f4651, #c7a45c);
}

body[data-theme="deep-tide"] .gratitude-jar-glass {
  border-color: rgba(32, 95, 98, 0.34);
  background:
    radial-gradient(circle at 35% 32%, rgba(248, 243, 232, 0.78), transparent 3.5rem),
    linear-gradient(180deg, rgba(221, 237, 234, 0.68), rgba(152, 200, 198, 0.36));
  box-shadow: inset 0 0 30px rgba(248, 243, 232, 0.72), 0 16px 34px rgba(14, 45, 53, 0.16);
}

body[data-theme="deep-tide"] .gratitude-token,
body[data-theme="deep-tide"] .gratitude-note-card {
  border-color: rgba(199, 164, 92, 0.36);
  background:
    radial-gradient(circle at 90% 12%, rgba(199, 164, 92, 0.16), transparent 5rem),
    linear-gradient(145deg, rgba(248, 243, 232, 0.96), rgba(221, 237, 234, 0.78));
}

body[data-theme="deep-tide"] .word-fit-cell {
  color: var(--ink);
  border-color: rgba(32, 95, 98, 0.28);
  background: rgba(248, 243, 232, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 8px rgba(14, 45, 53, 0.12);
}

body[data-theme="deep-tide"] .word-fit-block {
  background: rgba(32, 95, 98, 0.16);
}

body[data-theme="deep-tide"] .word-fit-cell.match-length,
body[data-theme="deep-tide"] .word-fit-cell.active-slot {
  border-color: rgba(199, 164, 92, 0.86);
  background: rgba(247, 242, 231, 0.98);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(14, 45, 53, 0.14);
}

body[data-theme="deep-tide"] .word-fit-cell.matched,
body[data-theme="deep-tide"] .word-fit-word.selected-card {
  color: #f8f3e8;
  border-color: rgba(14, 45, 53, 0.42);
  background: linear-gradient(135deg, #0f4651, #1f6a70);
}

body[data-theme="deep-tide"] .word-fit-word {
  color: var(--ink);
  border-color: rgba(32, 95, 98, 0.24);
  background: linear-gradient(135deg, rgba(247, 242, 231, 0.92), rgba(221, 237, 234, 0.8));
}

body[data-theme="deep-tide"] .word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(207, 224, 219, 0.64);
}

body[data-theme="deep-tide"] .danger-btn {
  color: #fff8ed;
  background: linear-gradient(135deg, #725047, #9a6d55);
  border-color: rgba(114, 80, 71, 0.42);
}

.theme-preview {
  display: flex;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.2rem;
}

.theme-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(31, 23, 18, 0.16);
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

body[data-theme="sun-ember"] {
  --cream: #fff8ed;
  --paper: rgba(255, 255, 255, 0.9);
  --paper-strong: #ffffff;
  --ink: #111111;
  --soft-ink: #3f3129;
  --sage: #ff9f1c;
  --moss: #ff6b00;
  --deep: #1f1712;
  --grove: #7a3100;
  --brass: #ffd23f;
  --ember: #ff5a00;
  --plum: #ff7a1a;
  --moon: #ffc857;
  --line: rgba(255, 107, 0, 0.26);
  --shadow: 0 22px 48px rgba(255, 107, 0, 0.2);
  --small-shadow: 0 14px 30px rgba(255, 107, 0, 0.14);
  --tap-shadow: 0 8px 20px rgba(255, 107, 0, 0.18);
  --selected-ring: 0 0 0 0.2rem rgba(255, 210, 63, 0.42);
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 210, 63, 0.44), transparent 21rem),
    radial-gradient(circle at 86% 12%, rgba(255, 107, 0, 0.28), transparent 24rem),
    radial-gradient(circle at 76% 88%, rgba(255, 159, 28, 0.24), transparent 22rem),
    linear-gradient(150deg, #ffffff 0%, #fff8ed 48%, #ffe0a8 100%);
}

body[data-theme="sun-ember"] .app-shell {
  background:
    linear-gradient(rgba(255, 210, 63, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 210, 63, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #fff8ed 52%, #ffe7ba 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="sun-ember"] .opening,
body[data-theme="sun-ember"] .reflection-line,
body[data-theme="sun-ember"] .home-checkin-ack,
body[data-theme="sun-ember"] .card-btn,
body[data-theme="sun-ember"] .quote-card,
body[data-theme="sun-ember"] .state-card,
body[data-theme="sun-ember"] .dash-card,
body[data-theme="sun-ember"] .snapshot-card,
body[data-theme="sun-ember"] .wide-card,
body[data-theme="sun-ember"] .panel,
body[data-theme="sun-ember"] .soft-panel,
body[data-theme="sun-ember"] .empty-state,
body[data-theme="sun-ember"] .practice-tool-card,
body[data-theme="sun-ember"] .practice-category-card,
body[data-theme="sun-ember"] .practice-preview-card,
body[data-theme="sun-ember"] .saved-section-card,
body[data-theme="sun-ember"] .saved-item-card,
body[data-theme="sun-ember"] .result-value,
body[data-theme="sun-ember"] .unload-visual,
body[data-theme="sun-ember"] .unload-stone-card,
body[data-theme="sun-ember"] .word-fit-grid,
body[data-theme="sun-ember"] .word-fit-bank,
body[data-theme="sun-ember"] .selected-word-line,
body[data-theme="sun-ember"] .wheel-legend span,
body[data-theme="sun-ember"] .value-area-chip,
body[data-theme="sun-ember"] .bottom-nav,
body[data-theme="sun-ember"] .footer-note {
  color: var(--ink);
  border-color: rgba(255, 107, 0, 0.28);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 210, 63, 0.22), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 237, 0.9));
  box-shadow: var(--small-shadow);
}

body[data-theme="sun-ember"] .dash-card,
body[data-theme="sun-ember"] .wide-card,
body[data-theme="sun-ember"] .card-btn,
body[data-theme="sun-ember"] .practice-tool-card,
body[data-theme="sun-ember"] .practice-category-card,
body[data-theme="sun-ember"] .saved-item-card {
  border-top-color: rgba(255, 107, 0, 0.58);
}

body[data-theme="sun-ember"] .reflection-line,
body[data-theme="sun-ember"] .support-line,
body[data-theme="sun-ember"] .theme-confirmation {
  color: #1f1712;
  border-color: rgba(255, 107, 0, 0.34);
  background:
    radial-gradient(circle at 96% 18%, rgba(255, 210, 63, 0.3), transparent 7rem),
    linear-gradient(135deg, #ffffff, #fff2d6);
}

body[data-theme="sun-ember"] .copy,
body[data-theme="sun-ember"] .muted,
body[data-theme="sun-ember"] .subtitle,
body[data-theme="sun-ember"] .bottom-line,
body[data-theme="sun-ember"] .card-btn span,
body[data-theme="sun-ember"] .state-card span,
body[data-theme="sun-ember"] .dash-card span,
body[data-theme="sun-ember"] .dash-card small,
body[data-theme="sun-ember"] .snapshot-card span,
body[data-theme="sun-ember"] .wide-card span,
body[data-theme="sun-ember"] .card-kicker,
body[data-theme="sun-ember"] .quote-card small,
body[data-theme="sun-ember"] .bottom-nav button,
body[data-theme="sun-ember"] .helperNote,
body[data-theme="sun-ember"] .cardSubtitle,
body[data-theme="sun-ember"] .mutedTextOnLight,
body[data-theme="sun-ember"] .value-area-chip span {
  color: var(--soft-ink);
}

body[data-theme="sun-ember"] h1,
body[data-theme="sun-ember"] h2,
body[data-theme="sun-ember"] h3,
body[data-theme="sun-ember"] .prompt,
body[data-theme="sun-ember"] .brand-mark,
body[data-theme="sun-ember"] .section-title,
body[data-theme="sun-ember"] .quote-card span,
body[data-theme="sun-ember"] .state-card strong,
body[data-theme="sun-ember"] .dash-card strong,
body[data-theme="sun-ember"] .wide-card strong,
body[data-theme="sun-ember"] .textOnLight,
body[data-theme="sun-ember"] .cardTitle,
body[data-theme="sun-ember"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="sun-ember"] .primary-btn,
body[data-theme="sun-ember"] .bottom-nav button.active,
body[data-theme="sun-ember"] .chip.selected,
body[data-theme="sun-ember"] .choice-btn.selected-card,
body[data-theme="sun-ember"] .choice-btn.selected,
body[data-theme="sun-ember"] .word-bubble.selected-card,
body[data-theme="sun-ember"] .value-need-chip.selected-card,
body[data-theme="sun-ember"] .glimmer-category-chip.selected,
body[data-theme="sun-ember"] .gratitude-category-chip.selected-card {
  color: #111111;
  border-color: rgba(255, 90, 0, 0.72);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 210, 63, 0.42), transparent 6rem),
    linear-gradient(135deg, #ffd23f 0%, #ff7a1a 52%, #ff5a00 100%);
  box-shadow: var(--selected-ring), 0 12px 28px rgba(255, 90, 0, 0.24);
}

body[data-theme="sun-ember"] .support-hero-card {
  color: #111111;
  border: 1px solid rgba(255, 107, 0, 0.36);
  background:
    radial-gradient(circle at 94% 12%, rgba(255, 210, 63, 0.34), transparent 9rem),
    linear-gradient(145deg, #ffffff, #fff1d0);
  box-shadow: 0 16px 34px rgba(255, 107, 0, 0.16);
}

body[data-theme="sun-ember"] .support-hero-card span,
body[data-theme="sun-ember"] .support-hero-card em {
  color: #3f3129;
}

body[data-theme="sun-ember"] .secondary-btn,
body[data-theme="sun-ember"] .quiet-btn,
body[data-theme="sun-ember"] .back-btn,
body[data-theme="sun-ember"] .chip,
body[data-theme="sun-ember"] .choice-btn,
body[data-theme="sun-ember"] .text-input,
body[data-theme="sun-ember"] .textarea,
body[data-theme="sun-ember"] .selected-checkin-pill,
body[data-theme="sun-ember"] .glimmer-category-chip,
body[data-theme="sun-ember"] .gratitude-category-chip {
  color: #111111;
  border-color: rgba(255, 107, 0, 0.34);
  background: linear-gradient(135deg, #ffffff, #fff3db);
  box-shadow: 0 8px 18px rgba(255, 107, 0, 0.1);
}

body[data-theme="sun-ember"] .secondary-btn:hover,
body[data-theme="sun-ember"] .choice-btn:hover,
body[data-theme="sun-ember"] .card-btn:hover,
body[data-theme="sun-ember"] .wide-card:hover,
body[data-theme="sun-ember"] .dash-card:hover,
body[data-theme="sun-ember"] .practice-tool-card:hover,
body[data-theme="sun-ember"] .practice-category-card:hover {
  border-color: rgba(255, 90, 0, 0.62);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="sun-ember"] .card-btn.selected-card {
  border-color: rgba(255, 90, 0, 0.74);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 210, 63, 0.38), transparent 7rem),
    linear-gradient(135deg, #ffffff, #ffe0a8);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="sun-ember"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #ffffff 0 15%, transparent 16%),
    conic-gradient(from 210deg, #ff6b00, #ffd23f, #ff9f1c, #ff5a00, #ffffff, #ff6b00);
  box-shadow: 0 0 22px rgba(255, 210, 63, 0.56), 0 8px 18px rgba(255, 107, 0, 0.22);
}

body[data-theme="sun-ember"] .dash-card {
  --dash-accent: #ff6b00;
}

body[data-theme="sun-ember"] .today-value-panel,
body[data-theme="sun-ember"] .today-value-context,
body[data-theme="sun-ember"] .value-accordion,
body[data-theme="sun-ember"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #ff6b00) 42%, rgba(255, 107, 0, 0.2));
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 210, 63, 0.28), transparent 8rem),
    linear-gradient(145deg, #ffffff, #fff2d6);
}

body[data-theme="sun-ember"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #ff6b00) 42%, rgba(255, 107, 0, 0.2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #ff9f1c) 16%, #ffffff), #fff0c8);
}

body[data-theme="sun-ember"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #ff6b00 0 12.5%, #ffd23f 12.5% 25%, #ff9f1c 25% 37.5%, #2f9e8f 37.5% 50%, #4472a7 50% 62.5%, #8f7ac8 62.5% 75%, #6aa84f 75% 87.5%, #c7862f 87.5% 100%) !important;
  border-color: rgba(255, 107, 0, 0.34);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(255, 255, 255, 0.34);
}

body[data-theme="sun-ember"] .wheel-inner {
  color: #111111;
  background: #ffffff;
  border-color: rgba(255, 107, 0, 0.2);
}

body[data-theme="sun-ember"] .wheel-label {
  color: rgba(17, 17, 17, 0.84);
}

body[data-theme="sun-ember"] .wheel-pointer {
  border-top-color: #ff5a00;
}

body[data-theme="sun-ember"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #ff5a00, #ffd23f);
  box-shadow: 0 8px 18px rgba(255, 107, 0, 0.2);
}

body[data-theme="sun-ember"] .gratitude-jar-glass {
  border-color: rgba(255, 107, 0, 0.38);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.96), transparent 3.5rem),
    radial-gradient(circle at 72% 74%, rgba(255, 210, 63, 0.32), transparent 4.8rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 232, 185, 0.46));
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.82), 0 16px 34px rgba(255, 107, 0, 0.18);
}

body[data-theme="sun-ember"] .gratitude-token,
body[data-theme="sun-ember"] .gratitude-note-card {
  border-color: rgba(255, 159, 28, 0.46);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 210, 63, 0.28), transparent 5rem),
    linear-gradient(145deg, #ffffff, #fff0c8);
}

body[data-theme="sun-ember"] .word-fit-cell {
  color: #111111;
  border-color: rgba(255, 107, 0, 0.32);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 8px rgba(255, 107, 0, 0.12);
}

body[data-theme="sun-ember"] .word-fit-block {
  background: rgba(255, 159, 28, 0.2);
}

body[data-theme="sun-ember"] .word-fit-cell.match-length,
body[data-theme="sun-ember"] .word-fit-cell.active-slot {
  border-color: rgba(255, 90, 0, 0.86);
  background: #fff8ed;
  box-shadow: var(--selected-ring), 0 8px 20px rgba(255, 107, 0, 0.16);
}

body[data-theme="sun-ember"] .word-fit-cell.matched,
body[data-theme="sun-ember"] .word-fit-word.selected-card {
  color: #111111;
  border-color: rgba(255, 90, 0, 0.56);
  background: linear-gradient(135deg, #ffd23f, #ff7a1a);
}

body[data-theme="sun-ember"] .word-fit-word {
  color: #111111;
  border-color: rgba(255, 107, 0, 0.34);
  background: linear-gradient(135deg, #ffffff, #fff0c8);
}

body[data-theme="sun-ember"] .word-fit-word.used {
  color: #5b4a40;
  background: rgba(255, 232, 185, 0.66);
}

body[data-theme="sun-ember"] .danger-btn {
  color: #111111;
  border-color: rgba(122, 49, 0, 0.32);
  background: linear-gradient(135deg, #ffd23f, #c9862b);
}

body[data-theme="deep-tide"] .placed-burden-zone {
  border-color: rgba(32, 95, 98, 0.22);
  background: rgba(231, 241, 239, 0.5);
}

body[data-theme="deep-tide"] .placed-zone-label,
body[data-theme="deep-tide"] .unload-state-pill {
  color: #205f62;
  border-color: rgba(32, 95, 98, 0.22);
  background: rgba(248, 243, 232, 0.82);
}

body[data-theme="deep-tide"] .backpack-shadow,
body[data-theme="deep-tide"] .placed-ground {
  background: rgba(14, 45, 53, 0.12);
}

body[data-theme="sun-ember"] .placed-burden-zone {
  border-color: rgba(255, 107, 0, 0.28);
  background: rgba(255, 255, 255, 0.56);
}

body[data-theme="sun-ember"] .placed-zone-label,
body[data-theme="sun-ember"] .unload-state-pill {
  color: #1f1712;
  border-color: rgba(255, 107, 0, 0.3);
  background: #fff8ed;
}

body[data-theme="sun-ember"] .backpack-shadow,
body[data-theme="sun-ember"] .placed-ground {
  background: rgba(255, 107, 0, 0.13);
}

/* Garden Glow — rich, earthy garden tones: moss/grass green, deep foliage,
   soil brown, and sun-gold. Built the same way as Deep Tide/Sun Ember above
   (same CSS variables, same selector list), just with a garden palette. */
body[data-theme="garden"] {
  --cream: #f6efd8;
  --paper: rgba(250, 244, 227, 0.88);
  --paper-strong: #fbf5e6;
  --ink: #2c3820;
  --soft-ink: #5b6b45;
  --sage: #8fae6a;
  --moss: #4f7942;
  --deep: #1e2a14;
  --grove: #33481f;
  --brass: #dba526;
  --ember: #bc6a2c;
  --plum: #8c5a34;
  --moon: #cddc8a;
  --line: rgba(79, 121, 66, 0.22);
  --shadow: 0 20px 46px rgba(30, 42, 20, 0.18);
  --small-shadow: 0 12px 28px rgba(30, 42, 20, 0.13);
  --tap-shadow: 0 8px 18px rgba(30, 42, 20, 0.15);
  --selected-ring: 0 0 0 0.2rem rgba(219, 165, 38, 0.38);
  background:
    radial-gradient(circle at 16% 4%, rgba(143, 174, 106, 0.38), transparent 23rem),
    radial-gradient(circle at 88% 14%, rgba(219, 165, 38, 0.3), transparent 24rem),
    radial-gradient(circle at 76% 88%, rgba(188, 106, 44, 0.22), transparent 22rem),
    linear-gradient(150deg, #f6efd8 0%, #e3ecc4 48%, #f0ddb8 100%);
}

body[data-theme="garden"] .app-shell {
  background:
    linear-gradient(rgba(251, 245, 230, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 245, 230, 0.32) 1px, transparent 1px),
    linear-gradient(180deg, #faf5e6 0%, #dfe9c0 54%, #f1ddb4 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="garden"] .opening,
body[data-theme="garden"] .reflection-line,
body[data-theme="garden"] .home-checkin-ack,
body[data-theme="garden"] .card-btn,
body[data-theme="garden"] .quote-card,
body[data-theme="garden"] .state-card,
body[data-theme="garden"] .dash-card,
body[data-theme="garden"] .snapshot-card,
body[data-theme="garden"] .wide-card,
body[data-theme="garden"] .panel,
body[data-theme="garden"] .soft-panel,
body[data-theme="garden"] .empty-state,
body[data-theme="garden"] .practice-tool-card,
body[data-theme="garden"] .practice-category-card,
body[data-theme="garden"] .practice-preview-card,
body[data-theme="garden"] .saved-section-card,
body[data-theme="garden"] .saved-item-card,
body[data-theme="garden"] .result-value,
body[data-theme="garden"] .unload-visual,
body[data-theme="garden"] .unload-stone-card,
body[data-theme="garden"] .word-fit-grid,
body[data-theme="garden"] .word-fit-bank,
body[data-theme="garden"] .selected-word-line,
body[data-theme="garden"] .wheel-legend span,
body[data-theme="garden"] .value-area-chip,
body[data-theme="garden"] .bottom-nav,
body[data-theme="garden"] .footer-note {
  color: var(--ink);
  border-color: rgba(79, 121, 66, 0.26);
  background:
    radial-gradient(circle at 92% 12%, rgba(143, 174, 106, 0.2), transparent 7rem),
    rgba(251, 245, 230, 0.86);
  box-shadow: var(--small-shadow);
}

body[data-theme="garden"] .dash-card,
body[data-theme="garden"] .wide-card,
body[data-theme="garden"] .card-btn,
body[data-theme="garden"] .practice-tool-card,
body[data-theme="garden"] .practice-category-card,
body[data-theme="garden"] .saved-item-card {
  border-top-color: rgba(219, 165, 38, 0.6);
}

body[data-theme="garden"] .reflection-line,
body[data-theme="garden"] .support-line,
body[data-theme="garden"] .theme-confirmation {
  border-color: rgba(79, 121, 66, 0.26);
  background:
    linear-gradient(135deg, rgba(238, 240, 216, 0.92), rgba(251, 245, 230, 0.8));
  color: #33481f;
}

body[data-theme="garden"] .copy,
body[data-theme="garden"] .muted,
body[data-theme="garden"] .subtitle,
body[data-theme="garden"] .bottom-line,
body[data-theme="garden"] .card-btn span,
body[data-theme="garden"] .state-card span,
body[data-theme="garden"] .dash-card span,
body[data-theme="garden"] .dash-card small,
body[data-theme="garden"] .snapshot-card span,
body[data-theme="garden"] .wide-card span,
body[data-theme="garden"] .card-kicker,
body[data-theme="garden"] .quote-card small,
body[data-theme="garden"] .bottom-nav button,
body[data-theme="garden"] .helperNote,
body[data-theme="garden"] .cardSubtitle,
body[data-theme="garden"] .mutedTextOnLight,
body[data-theme="garden"] .value-area-chip span {
  color: var(--soft-ink);
}

body[data-theme="garden"] h1,
body[data-theme="garden"] h2,
body[data-theme="garden"] h3,
body[data-theme="garden"] .prompt,
body[data-theme="garden"] .brand-mark,
body[data-theme="garden"] .section-title,
body[data-theme="garden"] .quote-card span,
body[data-theme="garden"] .state-card strong,
body[data-theme="garden"] .dash-card strong,
body[data-theme="garden"] .wide-card strong,
body[data-theme="garden"] .textOnLight,
body[data-theme="garden"] .cardTitle,
body[data-theme="garden"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="garden"] .primary-btn,
body[data-theme="garden"] .bottom-nav button.active,
body[data-theme="garden"] .chip.selected,
body[data-theme="garden"] .choice-btn.selected-card,
body[data-theme="garden"] .choice-btn.selected,
body[data-theme="garden"] .word-bubble.selected-card,
body[data-theme="garden"] .value-need-chip.selected-card,
body[data-theme="garden"] .glimmer-category-chip.selected,
body[data-theme="garden"] .gratitude-category-chip.selected-card,
body[data-theme="garden"] .support-hero-card {
  /* Was a light-to-gold gradient that put light text directly on bright
     gold — measured contrast there was ~2:1, well under the ~4.5:1 needed
     for text to stay legible. Now a dark forest-to-moss gradient (gold kept
     only as a soft corner glow, never under the text), which also gives the
     theme the deep, grounded contrast note it was missing. Verified with a
     WCAG contrast check: light text now reads 14:1 / 9.9:1 / 4.7:1 across
     the gradient's dark, mid, and lightest points, all passing. */
  color: #fbf7e6;
  border-color: rgba(30, 42, 20, 0.4);
  background:
    radial-gradient(circle at 88% 10%, rgba(219, 165, 38, 0.4), transparent 7rem),
    linear-gradient(135deg, #1e2a14 0%, #2f4423 46%, #4f7942 100%);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

body[data-theme="garden"] .support-hero-card span,
body[data-theme="garden"] .support-hero-card em {
  color: rgba(251, 247, 230, 0.88);
}

body[data-theme="garden"] .secondary-btn,
body[data-theme="garden"] .quiet-btn,
body[data-theme="garden"] .back-btn,
body[data-theme="garden"] .chip,
body[data-theme="garden"] .choice-btn,
body[data-theme="garden"] .text-input,
body[data-theme="garden"] .textarea,
body[data-theme="garden"] .selected-checkin-pill,
body[data-theme="garden"] .glimmer-category-chip,
body[data-theme="garden"] .gratitude-category-chip {
  color: var(--ink);
  border-color: rgba(79, 121, 66, 0.28);
  background:
    linear-gradient(135deg, rgba(251, 245, 230, 0.92), rgba(224, 233, 196, 0.78));
}

body[data-theme="garden"] .secondary-btn:hover,
body[data-theme="garden"] .choice-btn:hover,
body[data-theme="garden"] .card-btn:hover,
body[data-theme="garden"] .wide-card:hover,
body[data-theme="garden"] .dash-card:hover,
body[data-theme="garden"] .practice-tool-card:hover,
body[data-theme="garden"] .practice-category-card:hover {
  border-color: rgba(51, 72, 31, 0.5);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="garden"] .card-btn.selected-card,
body[data-theme="garden"] .glimmer-category-chip.selected,
body[data-theme="garden"] .gratitude-category-chip.selected-card {
  border-color: rgba(219, 165, 38, 0.72);
  background:
    radial-gradient(circle at 92% 10%, rgba(219, 165, 38, 0.3), transparent 7rem),
    linear-gradient(135deg, rgba(224, 233, 196, 0.96), rgba(251, 245, 230, 0.92));
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="garden"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #f3e6b0 0 16%, transparent 17%),
    conic-gradient(from 210deg, #1e2a14, #cddc8a, #8c5a34, #8fae6a, #dba526, #1e2a14);
  box-shadow: 0 0 22px rgba(219, 165, 38, 0.4), 0 8px 18px rgba(30, 42, 20, 0.2);
}

body[data-theme="garden"] .dash-card {
  --dash-accent: #4f7942;
}

body[data-theme="garden"] .today-value-panel,
body[data-theme="garden"] .today-value-context,
body[data-theme="garden"] .value-accordion,
body[data-theme="garden"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #4f7942) 36%, rgba(79, 121, 66, 0.22));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, #8fae6a) 20%, transparent), transparent 8rem),
    linear-gradient(145deg, rgba(251, 245, 230, 0.94), rgba(224, 233, 196, 0.82));
}

body[data-theme="garden"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #4f7942) 36%, rgba(79, 121, 66, 0.22));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #8fae6a) 14%, rgba(251, 245, 230, 0.9)), rgba(224, 233, 196, 0.78));
}

body[data-theme="garden"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #dba526 0 12.5%, #bc6a2c 12.5% 25%, #4f7942 25% 37.5%, #8c5a34 37.5% 50%, #8fae6a 50% 62.5%, #cddc8a 62.5% 75%, #f3e6b0 75% 87.5%, #33481f 87.5% 100%) !important;
  border-color: rgba(30, 42, 20, 0.3);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(251, 245, 230, 0.3);
}

body[data-theme="garden"] .wheel-inner {
  color: var(--ink);
  background: #f8f0d8;
  border-color: rgba(79, 121, 66, 0.2);
}

body[data-theme="garden"] .wheel-label {
  color: rgba(44, 56, 32, 0.86);
}

body[data-theme="garden"] .wheel-pointer {
  border-top-color: #1e2a14;
}

body[data-theme="garden"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #1e2a14, #dba526);
  box-shadow: 0 8px 18px rgba(30, 42, 20, 0.2);
}

body[data-theme="garden"] .gratitude-jar-glass {
  border-color: rgba(79, 121, 66, 0.36);
  background:
    radial-gradient(circle at 35% 32%, rgba(251, 247, 230, 0.8), transparent 3.5rem),
    linear-gradient(180deg, rgba(224, 233, 196, 0.7), rgba(143, 174, 106, 0.38));
  box-shadow: inset 0 0 30px rgba(251, 247, 230, 0.72), 0 16px 34px rgba(30, 42, 20, 0.16);
}

body[data-theme="garden"] .gratitude-token,
body[data-theme="garden"] .gratitude-note-card {
  border-color: rgba(219, 165, 38, 0.4);
  background:
    radial-gradient(circle at 90% 12%, rgba(219, 165, 38, 0.22), transparent 5rem),
    linear-gradient(145deg, rgba(251, 247, 230, 0.96), rgba(224, 233, 196, 0.8));
}

body[data-theme="garden"] .word-fit-cell {
  color: var(--ink);
  border-color: rgba(79, 121, 66, 0.3);
  background: rgba(251, 247, 230, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 8px rgba(30, 42, 20, 0.12);
}

body[data-theme="garden"] .word-fit-block {
  background: rgba(79, 121, 66, 0.18);
}

body[data-theme="garden"] .word-fit-cell.match-length,
body[data-theme="garden"] .word-fit-cell.active-slot {
  border-color: rgba(219, 165, 38, 0.86);
  background: rgba(251, 245, 230, 0.98);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(30, 42, 20, 0.14);
}

body[data-theme="garden"] .word-fit-cell.matched,
body[data-theme="garden"] .word-fit-word.selected-card {
  color: #fbf7e6;
  border-color: rgba(30, 42, 20, 0.44);
  background: linear-gradient(135deg, #1e2a14, #4f7942);
}

body[data-theme="garden"] .word-fit-word {
  color: var(--ink);
  border-color: rgba(79, 121, 66, 0.26);
  background: linear-gradient(135deg, rgba(251, 245, 230, 0.92), rgba(224, 233, 196, 0.8));
}

body[data-theme="garden"] .word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(214, 224, 190, 0.66);
}

body[data-theme="garden"] .danger-btn {
  color: #fff8ed;
  background: linear-gradient(135deg, #7a4a35, #a56b4a);
  border-color: rgba(122, 74, 53, 0.42);
}

body[data-theme="garden"] .placed-burden-zone {
  border-color: rgba(79, 121, 66, 0.24);
  background: rgba(238, 240, 216, 0.52);
}

body[data-theme="garden"] .placed-zone-label,
body[data-theme="garden"] .unload-state-pill {
  color: #33481f;
  border-color: rgba(79, 121, 66, 0.24);
  background: rgba(251, 245, 230, 0.84);
}

body[data-theme="garden"] .backpack-shadow,
body[data-theme="garden"] .placed-ground {
  background: rgba(30, 42, 20, 0.13);
}

/* Midnight — a genuinely dark theme (not just a light theme with dark
   accents): deep navy base that fades between two navy tones with a soft
   glow, warm gold as the primary accent. Panels/cards sit on a moderately
   lifted dark navy surface with a gold-tinted border for definition; the
   primary/selected buttons and hero cards use a full bright gold fill with
   dark navy text on top (measured at 9:1+ contrast) so the highlighted
   moments genuinely pop rather than blending into the background. */
body[data-theme="midnight"] {
  --cream: #141b2b;
  --paper: rgba(28, 36, 56, 0.88);
  --paper-strong: #1c2438;
  --ink: #f3f0e6;
  --soft-ink: #aab4c8;
  --sage: #5f7fa8;
  --moss: #e0b84a;
  --deep: #0d1220;
  --grove: #1c2748;
  --brass: #e0b84a;
  --ember: #5f7fa8;
  --plum: #3f4f7a;
  --moon: #b9cbe0;
  --line: rgba(224, 184, 74, 0.22);
  --shadow: 0 20px 46px rgba(10, 14, 24, 0.4);
  --small-shadow: 0 12px 28px rgba(10, 14, 24, 0.32);
  --tap-shadow: 0 8px 18px rgba(10, 14, 24, 0.34);
  --selected-ring: 0 0 0 0.2rem rgba(224, 184, 74, 0.4);
  background:
    radial-gradient(circle at 15% 8%, rgba(95, 127, 168, 0.28), transparent 22rem),
    radial-gradient(circle at 88% 92%, rgba(224, 184, 74, 0.14), transparent 20rem),
    linear-gradient(160deg, #0d1220 0%, #141b2b 45%, #1c2748 100%);
}

body[data-theme="midnight"] .app-shell {
  background:
    linear-gradient(rgba(28, 36, 56, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 36, 56, 0.28) 1px, transparent 1px),
    linear-gradient(180deg, #141b2b 0%, #1c2748 54%, #12182a 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="midnight"] .opening,
body[data-theme="midnight"] .reflection-line,
body[data-theme="midnight"] .home-checkin-ack,
body[data-theme="midnight"] .card-btn,
body[data-theme="midnight"] .quote-card,
body[data-theme="midnight"] .state-card,
body[data-theme="midnight"] .dash-card,
body[data-theme="midnight"] .snapshot-card,
body[data-theme="midnight"] .wide-card,
body[data-theme="midnight"] .panel,
body[data-theme="midnight"] .soft-panel,
body[data-theme="midnight"] .empty-state,
body[data-theme="midnight"] .practice-tool-card,
body[data-theme="midnight"] .practice-category-card,
body[data-theme="midnight"] .practice-preview-card,
body[data-theme="midnight"] .saved-section-card,
body[data-theme="midnight"] .saved-item-card,
body[data-theme="midnight"] .result-value,
body[data-theme="midnight"] .unload-visual,
body[data-theme="midnight"] .unload-stone-card,
body[data-theme="midnight"] .word-fit-grid,
body[data-theme="midnight"] .word-fit-bank,
body[data-theme="midnight"] .selected-word-line,
body[data-theme="midnight"] .wheel-legend span,
body[data-theme="midnight"] .value-area-chip,
body[data-theme="midnight"] .bottom-nav,
body[data-theme="midnight"] .footer-note,
body[data-theme="midnight"] .home-module-card,
body[data-theme="midnight"] .home-tool-group,
body[data-theme="midnight"] .capacity-home-control {
  color: var(--ink);
  border-color: rgba(224, 184, 74, 0.22);
  background:
    radial-gradient(circle at 92% 12%, rgba(95, 127, 168, 0.18), transparent 7rem),
    rgba(28, 36, 56, 0.88);
  box-shadow: var(--small-shadow);
}

body[data-theme="midnight"] .dash-card,
body[data-theme="midnight"] .wide-card,
body[data-theme="midnight"] .card-btn,
body[data-theme="midnight"] .practice-tool-card,
body[data-theme="midnight"] .practice-category-card,
body[data-theme="midnight"] .saved-item-card {
  border-top-color: rgba(224, 184, 74, 0.5);
}

body[data-theme="midnight"] .reflection-line,
body[data-theme="midnight"] .support-line,
body[data-theme="midnight"] .theme-confirmation {
  border-color: rgba(224, 184, 74, 0.26);
  background:
    linear-gradient(135deg, rgba(36, 46, 70, 0.92), rgba(20, 27, 43, 0.85));
  color: #f3f0e6;
}

body[data-theme="midnight"] .copy,
body[data-theme="midnight"] .muted,
body[data-theme="midnight"] .subtitle,
body[data-theme="midnight"] .bottom-line,
body[data-theme="midnight"] .card-btn span,
body[data-theme="midnight"] .state-card span,
body[data-theme="midnight"] .dash-card span,
body[data-theme="midnight"] .dash-card small,
body[data-theme="midnight"] .snapshot-card span,
body[data-theme="midnight"] .wide-card span,
body[data-theme="midnight"] .card-kicker,
body[data-theme="midnight"] .quote-card small,
body[data-theme="midnight"] .bottom-nav button,
body[data-theme="midnight"] .helperNote,
body[data-theme="midnight"] .cardSubtitle,
body[data-theme="midnight"] .mutedTextOnLight,
body[data-theme="midnight"] .value-area-chip span,
body[data-theme="midnight"] .capacity-home-control span {
  color: var(--soft-ink);
}

body[data-theme="midnight"] h1,
body[data-theme="midnight"] h2,
body[data-theme="midnight"] h3,
body[data-theme="midnight"] .prompt,
body[data-theme="midnight"] .brand-mark,
body[data-theme="midnight"] .section-title,
body[data-theme="midnight"] .quote-card span,
body[data-theme="midnight"] .state-card strong,
body[data-theme="midnight"] .dash-card strong,
body[data-theme="midnight"] .wide-card strong,
body[data-theme="midnight"] .textOnLight,
body[data-theme="midnight"] .cardTitle,
body[data-theme="midnight"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="midnight"] .primary-btn,
body[data-theme="midnight"] .bottom-nav button.active,
body[data-theme="midnight"] .chip.selected,
body[data-theme="midnight"] .choice-btn.selected-card,
body[data-theme="midnight"] .choice-btn.selected,
body[data-theme="midnight"] .word-bubble.selected-card,
body[data-theme="midnight"] .value-need-chip.selected-card,
body[data-theme="midnight"] .glimmer-category-chip.selected,
body[data-theme="midnight"] .gratitude-category-chip.selected-card,
body[data-theme="midnight"] .support-hero-card {
  color: #141b2b;
  border-color: rgba(20, 27, 43, 0.4);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.2), transparent 7rem),
    linear-gradient(135deg, #e0b84a 0%, #ecc978 100%);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

body[data-theme="midnight"] .support-hero-card span,
body[data-theme="midnight"] .support-hero-card em {
  color: rgba(20, 27, 43, 0.78);
}

body[data-theme="midnight"] .secondary-btn,
body[data-theme="midnight"] .quiet-btn,
body[data-theme="midnight"] .back-btn,
body[data-theme="midnight"] .chip,
body[data-theme="midnight"] .choice-btn,
body[data-theme="midnight"] .text-input,
body[data-theme="midnight"] .textarea,
body[data-theme="midnight"] .selected-checkin-pill,
body[data-theme="midnight"] .glimmer-category-chip,
body[data-theme="midnight"] .gratitude-category-chip {
  color: var(--ink);
  border-color: rgba(224, 184, 74, 0.26);
  background:
    linear-gradient(135deg, rgba(36, 46, 70, 0.9), rgba(20, 27, 43, 0.78));
}

body[data-theme="midnight"] .secondary-btn:hover,
body[data-theme="midnight"] .choice-btn:hover,
body[data-theme="midnight"] .card-btn:hover,
body[data-theme="midnight"] .wide-card:hover,
body[data-theme="midnight"] .dash-card:hover,
body[data-theme="midnight"] .practice-tool-card:hover,
body[data-theme="midnight"] .practice-category-card:hover {
  border-color: rgba(224, 184, 74, 0.55);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="midnight"] .card-btn.selected-card,
body[data-theme="midnight"] .glimmer-category-chip.selected,
body[data-theme="midnight"] .gratitude-category-chip.selected-card {
  border-color: rgba(224, 184, 74, 0.75);
  background:
    radial-gradient(circle at 92% 10%, rgba(224, 184, 74, 0.28), transparent 7rem),
    linear-gradient(135deg, rgba(40, 50, 76, 0.96), rgba(24, 31, 48, 0.92));
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="midnight"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #fff3d6 0 16%, transparent 17%),
    conic-gradient(from 210deg, #0d1220, #b9cbe0, #3f4f7a, #5f7fa8, #e0b84a, #0d1220);
  box-shadow: 0 0 22px rgba(224, 184, 74, 0.4), 0 8px 18px rgba(10, 14, 24, 0.32);
}

body[data-theme="midnight"] .dash-card {
  --dash-accent: #e0b84a;
}

body[data-theme="midnight"] .today-value-panel,
body[data-theme="midnight"] .today-value-context,
body[data-theme="midnight"] .value-accordion,
body[data-theme="midnight"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #e0b84a) 36%, rgba(224, 184, 74, 0.22));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, #5f7fa8) 20%, transparent), transparent 8rem),
    linear-gradient(145deg, rgba(36, 46, 70, 0.94), rgba(20, 27, 43, 0.86));
}

body[data-theme="midnight"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #e0b84a) 36%, rgba(224, 184, 74, 0.22));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #5f7fa8) 16%, rgba(36, 46, 70, 0.9)), rgba(20, 27, 43, 0.78));
}

body[data-theme="midnight"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #e0b84a 0 12.5%, #5f7fa8 12.5% 25%, #3f4f7a 25% 37.5%, #b9cbe0 37.5% 50%, #e0b84a 50% 62.5%, #1c2748 62.5% 75%, #ecc978 75% 87.5%, #0d1220 87.5% 100%) !important;
  border-color: rgba(10, 14, 24, 0.4);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(28, 36, 56, 0.34);
}

body[data-theme="midnight"] .wheel-inner {
  color: var(--ink);
  background: #1c2438;
  border-color: rgba(224, 184, 74, 0.22);
}

body[data-theme="midnight"] .wheel-label {
  color: rgba(243, 240, 230, 0.86);
}

body[data-theme="midnight"] .wheel-pointer {
  border-top-color: #e0b84a;
}

body[data-theme="midnight"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #0d1220, #e0b84a);
  box-shadow: 0 8px 18px rgba(10, 14, 24, 0.34);
}

body[data-theme="midnight"] .gratitude-jar-glass {
  border-color: rgba(224, 184, 74, 0.36);
  background:
    radial-gradient(circle at 35% 32%, rgba(224, 184, 74, 0.22), transparent 3.5rem),
    linear-gradient(180deg, rgba(36, 46, 70, 0.7), rgba(20, 27, 43, 0.5));
  box-shadow: inset 0 0 30px rgba(224, 184, 74, 0.14), 0 16px 34px rgba(10, 14, 24, 0.34);
}

body[data-theme="midnight"] .gratitude-token,
body[data-theme="midnight"] .gratitude-note-card {
  border-color: rgba(224, 184, 74, 0.4);
  background:
    radial-gradient(circle at 90% 12%, rgba(224, 184, 74, 0.22), transparent 5rem),
    linear-gradient(145deg, rgba(36, 46, 70, 0.96), rgba(20, 27, 43, 0.86));
}

body[data-theme="midnight"] .word-fit-cell {
  color: var(--ink);
  border-color: rgba(224, 184, 74, 0.3);
  background: rgba(28, 36, 56, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(10, 14, 24, 0.3);
}

body[data-theme="midnight"] .word-fit-block {
  background: rgba(224, 184, 74, 0.18);
}

body[data-theme="midnight"] .word-fit-cell.match-length,
body[data-theme="midnight"] .word-fit-cell.active-slot {
  border-color: rgba(224, 184, 74, 0.86);
  background: rgba(36, 46, 70, 0.96);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(10, 14, 24, 0.3);
}

body[data-theme="midnight"] .word-fit-cell.matched,
body[data-theme="midnight"] .word-fit-word.selected-card {
  color: #141b2b;
  border-color: rgba(20, 27, 43, 0.4);
  background: linear-gradient(135deg, #e0b84a, #ecc978);
}

body[data-theme="midnight"] .word-fit-word {
  color: var(--ink);
  border-color: rgba(224, 184, 74, 0.26);
  background: linear-gradient(135deg, rgba(36, 46, 70, 0.9), rgba(20, 27, 43, 0.78));
}

body[data-theme="midnight"] .word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(20, 27, 43, 0.5);
}

body[data-theme="midnight"] .danger-btn {
  color: #fff8ed;
  background: linear-gradient(135deg, #7a4a35, #a56b4a);
  border-color: rgba(122, 74, 53, 0.42);
}

body[data-theme="midnight"] .placed-burden-zone {
  border-color: rgba(224, 184, 74, 0.24);
  background: rgba(36, 46, 70, 0.4);
}

body[data-theme="midnight"] .placed-zone-label,
body[data-theme="midnight"] .unload-state-pill {
  color: #e0b84a;
  border-color: rgba(224, 184, 74, 0.28);
  background: rgba(28, 36, 56, 0.86);
}

body[data-theme="midnight"] .backpack-shadow,
body[data-theme="midnight"] .placed-ground {
  background: rgba(10, 14, 24, 0.4);
}

/* Twilight — dusky deep indigo base fading toward violet, with warm coral
   and yellow as the two contrasting accents (alternated on primary
   moments rather than one flat accent). Same dark-panel/bright-highlight
   structure as Midnight above. */
body[data-theme="twilight"] {
  --cream: #241b3a;
  --paper: rgba(46, 35, 72, 0.88);
  --paper-strong: #2e2348;
  --ink: #f5eef0;
  --soft-ink: #c3b6db;
  --sage: #b28fd0;
  --moss: #e0895f;
  --deep: #1a1430;
  --grove: #2f2350;
  --brass: #f0c04a;
  --ember: #e0895f;
  --plum: #8a6bb0;
  --moon: #d8c9ea;
  --line: rgba(224, 137, 95, 0.24);
  --shadow: 0 20px 46px rgba(20, 15, 32, 0.4);
  --small-shadow: 0 12px 28px rgba(20, 15, 32, 0.32);
  --tap-shadow: 0 8px 18px rgba(20, 15, 32, 0.34);
  --selected-ring: 0 0 0 0.2rem rgba(240, 192, 74, 0.4);
  background:
    radial-gradient(circle at 12% 10%, rgba(224, 137, 95, 0.18), transparent 22rem),
    radial-gradient(circle at 90% 90%, rgba(138, 107, 176, 0.26), transparent 20rem),
    linear-gradient(160deg, #1a1430 0%, #241b3a 45%, #2f2350 100%);
}

body[data-theme="twilight"] .app-shell {
  background:
    linear-gradient(rgba(46, 35, 72, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 35, 72, 0.28) 1px, transparent 1px),
    linear-gradient(180deg, #241b3a 0%, #2f2350 54%, #1a1430 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="twilight"] .opening,
body[data-theme="twilight"] .reflection-line,
body[data-theme="twilight"] .home-checkin-ack,
body[data-theme="twilight"] .card-btn,
body[data-theme="twilight"] .quote-card,
body[data-theme="twilight"] .state-card,
body[data-theme="twilight"] .dash-card,
body[data-theme="twilight"] .snapshot-card,
body[data-theme="twilight"] .wide-card,
body[data-theme="twilight"] .panel,
body[data-theme="twilight"] .soft-panel,
body[data-theme="twilight"] .empty-state,
body[data-theme="twilight"] .practice-tool-card,
body[data-theme="twilight"] .practice-category-card,
body[data-theme="twilight"] .practice-preview-card,
body[data-theme="twilight"] .saved-section-card,
body[data-theme="twilight"] .saved-item-card,
body[data-theme="twilight"] .result-value,
body[data-theme="twilight"] .unload-visual,
body[data-theme="twilight"] .unload-stone-card,
body[data-theme="twilight"] .word-fit-grid,
body[data-theme="twilight"] .word-fit-bank,
body[data-theme="twilight"] .selected-word-line,
body[data-theme="twilight"] .wheel-legend span,
body[data-theme="twilight"] .value-area-chip,
body[data-theme="twilight"] .bottom-nav,
body[data-theme="twilight"] .footer-note {
  color: var(--ink);
  border-color: rgba(224, 137, 95, 0.24);
  background:
    radial-gradient(circle at 92% 12%, rgba(138, 107, 176, 0.2), transparent 7rem),
    rgba(46, 35, 72, 0.88);
  box-shadow: var(--small-shadow);
}

body[data-theme="twilight"] .dash-card,
body[data-theme="twilight"] .wide-card,
body[data-theme="twilight"] .card-btn,
body[data-theme="twilight"] .practice-tool-card,
body[data-theme="twilight"] .practice-category-card,
body[data-theme="twilight"] .saved-item-card {
  border-top-color: rgba(240, 192, 74, 0.5);
}

body[data-theme="twilight"] .reflection-line,
body[data-theme="twilight"] .support-line,
body[data-theme="twilight"] .theme-confirmation {
  border-color: rgba(224, 137, 95, 0.26);
  background:
    linear-gradient(135deg, rgba(58, 46, 88, 0.92), rgba(26, 20, 48, 0.85));
  color: #f5eef0;
}

body[data-theme="twilight"] .copy,
body[data-theme="twilight"] .muted,
body[data-theme="twilight"] .subtitle,
body[data-theme="twilight"] .bottom-line,
body[data-theme="twilight"] .card-btn span,
body[data-theme="twilight"] .state-card span,
body[data-theme="twilight"] .dash-card span,
body[data-theme="twilight"] .dash-card small,
body[data-theme="twilight"] .snapshot-card span,
body[data-theme="twilight"] .wide-card span,
body[data-theme="twilight"] .card-kicker,
body[data-theme="twilight"] .quote-card small,
body[data-theme="twilight"] .bottom-nav button,
body[data-theme="twilight"] .helperNote,
body[data-theme="twilight"] .cardSubtitle,
body[data-theme="twilight"] .mutedTextOnLight,
body[data-theme="twilight"] .value-area-chip span {
  color: var(--soft-ink);
}

body[data-theme="twilight"] h1,
body[data-theme="twilight"] h2,
body[data-theme="twilight"] h3,
body[data-theme="twilight"] .prompt,
body[data-theme="twilight"] .brand-mark,
body[data-theme="twilight"] .section-title,
body[data-theme="twilight"] .quote-card span,
body[data-theme="twilight"] .state-card strong,
body[data-theme="twilight"] .dash-card strong,
body[data-theme="twilight"] .wide-card strong,
body[data-theme="twilight"] .textOnLight,
body[data-theme="twilight"] .cardTitle,
body[data-theme="twilight"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="twilight"] .primary-btn,
body[data-theme="twilight"] .bottom-nav button.active,
body[data-theme="twilight"] .chip.selected,
body[data-theme="twilight"] .choice-btn.selected-card,
body[data-theme="twilight"] .choice-btn.selected,
body[data-theme="twilight"] .word-bubble.selected-card,
body[data-theme="twilight"] .value-need-chip.selected-card,
body[data-theme="twilight"] .glimmer-category-chip.selected,
body[data-theme="twilight"] .gratitude-category-chip.selected-card,
body[data-theme="twilight"] .support-hero-card {
  color: #1a1430;
  border-color: rgba(26, 20, 48, 0.4);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.16), transparent 7rem),
    linear-gradient(135deg, #e0895f 0%, #f0c04a 100%);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

body[data-theme="twilight"] .support-hero-card span,
body[data-theme="twilight"] .support-hero-card em {
  color: rgba(26, 20, 48, 0.78);
}

body[data-theme="twilight"] .secondary-btn,
body[data-theme="twilight"] .quiet-btn,
body[data-theme="twilight"] .back-btn,
body[data-theme="twilight"] .chip,
body[data-theme="twilight"] .choice-btn,
body[data-theme="twilight"] .text-input,
body[data-theme="twilight"] .textarea,
body[data-theme="twilight"] .selected-checkin-pill,
body[data-theme="twilight"] .glimmer-category-chip,
body[data-theme="twilight"] .gratitude-category-chip {
  color: var(--ink);
  border-color: rgba(224, 137, 95, 0.28);
  background:
    linear-gradient(135deg, rgba(58, 46, 88, 0.9), rgba(26, 20, 48, 0.78));
}

body[data-theme="twilight"] .secondary-btn:hover,
body[data-theme="twilight"] .choice-btn:hover,
body[data-theme="twilight"] .card-btn:hover,
body[data-theme="twilight"] .wide-card:hover,
body[data-theme="twilight"] .dash-card:hover,
body[data-theme="twilight"] .practice-tool-card:hover,
body[data-theme="twilight"] .practice-category-card:hover {
  border-color: rgba(240, 192, 74, 0.55);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="twilight"] .card-btn.selected-card,
body[data-theme="twilight"] .glimmer-category-chip.selected,
body[data-theme="twilight"] .gratitude-category-chip.selected-card {
  border-color: rgba(240, 192, 74, 0.75);
  background:
    radial-gradient(circle at 92% 10%, rgba(240, 192, 74, 0.28), transparent 7rem),
    linear-gradient(135deg, rgba(60, 48, 92, 0.96), rgba(30, 23, 54, 0.92));
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="twilight"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #fff0c8 0 16%, transparent 17%),
    conic-gradient(from 210deg, #1a1430, #d8c9ea, #8a6bb0, #e0895f, #f0c04a, #1a1430);
  box-shadow: 0 0 22px rgba(240, 192, 74, 0.4), 0 8px 18px rgba(20, 15, 32, 0.32);
}

body[data-theme="twilight"] .dash-card {
  --dash-accent: #e0895f;
}

body[data-theme="twilight"] .today-value-panel,
body[data-theme="twilight"] .today-value-context,
body[data-theme="twilight"] .value-accordion,
body[data-theme="twilight"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #e0895f) 36%, rgba(224, 137, 95, 0.24));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, #8a6bb0) 20%, transparent), transparent 8rem),
    linear-gradient(145deg, rgba(58, 46, 88, 0.94), rgba(26, 20, 48, 0.86));
}

body[data-theme="twilight"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #e0895f) 36%, rgba(224, 137, 95, 0.24));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #8a6bb0) 16%, rgba(58, 46, 88, 0.9)), rgba(26, 20, 48, 0.78));
}

body[data-theme="twilight"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #f0c04a 0 12.5%, #e0895f 12.5% 25%, #8a6bb0 25% 37.5%, #2f2350 37.5% 50%, #d8c9ea 50% 62.5%, #b28fd0 62.5% 75%, #f0c04a 75% 87.5%, #1a1430 87.5% 100%) !important;
  border-color: rgba(20, 15, 32, 0.4);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(46, 35, 72, 0.34);
}

body[data-theme="twilight"] .wheel-inner {
  color: var(--ink);
  background: #2e2348;
  border-color: rgba(224, 137, 95, 0.24);
}

body[data-theme="twilight"] .wheel-label {
  color: rgba(245, 238, 240, 0.86);
}

body[data-theme="twilight"] .wheel-pointer {
  border-top-color: #f0c04a;
}

body[data-theme="twilight"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #1a1430, #f0c04a);
  box-shadow: 0 8px 18px rgba(20, 15, 32, 0.34);
}

body[data-theme="twilight"] .gratitude-jar-glass {
  border-color: rgba(224, 137, 95, 0.36);
  background:
    radial-gradient(circle at 35% 32%, rgba(240, 192, 74, 0.2), transparent 3.5rem),
    linear-gradient(180deg, rgba(58, 46, 88, 0.7), rgba(26, 20, 48, 0.5));
  box-shadow: inset 0 0 30px rgba(240, 192, 74, 0.14), 0 16px 34px rgba(20, 15, 32, 0.34);
}

body[data-theme="twilight"] .gratitude-token,
body[data-theme="twilight"] .gratitude-note-card {
  border-color: rgba(240, 192, 74, 0.4);
  background:
    radial-gradient(circle at 90% 12%, rgba(240, 192, 74, 0.22), transparent 5rem),
    linear-gradient(145deg, rgba(58, 46, 88, 0.96), rgba(26, 20, 48, 0.86));
}

body[data-theme="twilight"] .word-fit-cell {
  color: var(--ink);
  border-color: rgba(224, 137, 95, 0.3);
  background: rgba(46, 35, 72, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(20, 15, 32, 0.3);
}

body[data-theme="twilight"] .word-fit-block {
  background: rgba(224, 137, 95, 0.18);
}

body[data-theme="twilight"] .word-fit-cell.match-length,
body[data-theme="twilight"] .word-fit-cell.active-slot {
  border-color: rgba(240, 192, 74, 0.86);
  background: rgba(58, 46, 88, 0.96);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(20, 15, 32, 0.3);
}

body[data-theme="twilight"] .word-fit-cell.matched,
body[data-theme="twilight"] .word-fit-word.selected-card {
  color: #1a1430;
  border-color: rgba(26, 20, 48, 0.4);
  background: linear-gradient(135deg, #e0895f, #f0c04a);
}

body[data-theme="twilight"] .word-fit-word {
  color: var(--ink);
  border-color: rgba(224, 137, 95, 0.28);
  background: linear-gradient(135deg, rgba(58, 46, 88, 0.9), rgba(26, 20, 48, 0.78));
}

body[data-theme="twilight"] .word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(26, 20, 48, 0.5);
}

body[data-theme="twilight"] .danger-btn {
  color: #fff8ed;
  background: linear-gradient(135deg, #7a4a35, #a56b4a);
  border-color: rgba(122, 74, 53, 0.42);
}

body[data-theme="twilight"] .placed-burden-zone {
  border-color: rgba(224, 137, 95, 0.26);
  background: rgba(58, 46, 88, 0.4);
}

body[data-theme="twilight"] .placed-zone-label,
body[data-theme="twilight"] .unload-state-pill {
  color: #f0c04a;
  border-color: rgba(224, 137, 95, 0.3);
  background: rgba(46, 35, 72, 0.86);
}

body[data-theme="twilight"] .backpack-shadow,
body[data-theme="twilight"] .placed-ground {
  background: rgba(20, 15, 32, 0.4);
}

/* Golden Sunrise — deep plum "horizon" base fading toward warm brown-plum,
   with gold and coral as the two contrasting accents (alternated, like
   Twilight). Same dark-panel/bright-highlight structure as the two above. */
body[data-theme="sunrise"] {
  --cream: #2c1f30;
  --paper: rgba(58, 42, 61, 0.88);
  --paper-strong: #3a2a3d;
  --ink: #fff3e0;
  --soft-ink: #dcb98f;
  --sage: #d98a63;
  --moss: #f2a154;
  --deep: #221827;
  --grove: #3a2740;
  --brass: #f2a154;
  --ember: #ee7a68;
  --plum: #7a4a5a;
  --moon: #ffd9a0;
  --line: rgba(242, 161, 84, 0.24);
  --shadow: 0 20px 46px rgba(20, 14, 22, 0.4);
  --small-shadow: 0 12px 28px rgba(20, 14, 22, 0.32);
  --tap-shadow: 0 8px 18px rgba(20, 14, 22, 0.34);
  --selected-ring: 0 0 0 0.2rem rgba(242, 161, 84, 0.4);
  background:
    radial-gradient(circle at 15% 12%, rgba(242, 161, 84, 0.2), transparent 22rem),
    radial-gradient(circle at 88% 90%, rgba(238, 122, 104, 0.22), transparent 20rem),
    linear-gradient(160deg, #221827 0%, #2c1f30 45%, #3a2740 100%);
}

body[data-theme="sunrise"] .app-shell {
  background:
    linear-gradient(rgba(58, 42, 61, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 42, 61, 0.28) 1px, transparent 1px),
    linear-gradient(180deg, #2c1f30 0%, #3a2740 54%, #221827 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="sunrise"] .opening,
body[data-theme="sunrise"] .reflection-line,
body[data-theme="sunrise"] .home-checkin-ack,
body[data-theme="sunrise"] .card-btn,
body[data-theme="sunrise"] .quote-card,
body[data-theme="sunrise"] .state-card,
body[data-theme="sunrise"] .dash-card,
body[data-theme="sunrise"] .snapshot-card,
body[data-theme="sunrise"] .wide-card,
body[data-theme="sunrise"] .panel,
body[data-theme="sunrise"] .soft-panel,
body[data-theme="sunrise"] .empty-state,
body[data-theme="sunrise"] .practice-tool-card,
body[data-theme="sunrise"] .practice-category-card,
body[data-theme="sunrise"] .practice-preview-card,
body[data-theme="sunrise"] .saved-section-card,
body[data-theme="sunrise"] .saved-item-card,
body[data-theme="sunrise"] .result-value,
body[data-theme="sunrise"] .unload-visual,
body[data-theme="sunrise"] .unload-stone-card,
body[data-theme="sunrise"] .word-fit-grid,
body[data-theme="sunrise"] .word-fit-bank,
body[data-theme="sunrise"] .selected-word-line,
body[data-theme="sunrise"] .wheel-legend span,
body[data-theme="sunrise"] .value-area-chip,
body[data-theme="sunrise"] .bottom-nav,
body[data-theme="sunrise"] .footer-note {
  color: var(--ink);
  border-color: rgba(242, 161, 84, 0.24);
  background:
    radial-gradient(circle at 92% 12%, rgba(238, 122, 104, 0.2), transparent 7rem),
    rgba(58, 42, 61, 0.88);
  box-shadow: var(--small-shadow);
}

body[data-theme="sunrise"] .dash-card,
body[data-theme="sunrise"] .wide-card,
body[data-theme="sunrise"] .card-btn,
body[data-theme="sunrise"] .practice-tool-card,
body[data-theme="sunrise"] .practice-category-card,
body[data-theme="sunrise"] .saved-item-card {
  border-top-color: rgba(242, 161, 84, 0.5);
}

body[data-theme="sunrise"] .reflection-line,
body[data-theme="sunrise"] .support-line,
body[data-theme="sunrise"] .theme-confirmation {
  border-color: rgba(242, 161, 84, 0.26);
  background:
    linear-gradient(135deg, rgba(70, 51, 74, 0.92), rgba(28, 20, 31, 0.85));
  color: #fff3e0;
}

body[data-theme="sunrise"] .copy,
body[data-theme="sunrise"] .muted,
body[data-theme="sunrise"] .subtitle,
body[data-theme="sunrise"] .bottom-line,
body[data-theme="sunrise"] .card-btn span,
body[data-theme="sunrise"] .state-card span,
body[data-theme="sunrise"] .dash-card span,
body[data-theme="sunrise"] .dash-card small,
body[data-theme="sunrise"] .snapshot-card span,
body[data-theme="sunrise"] .wide-card span,
body[data-theme="sunrise"] .card-kicker,
body[data-theme="sunrise"] .quote-card small,
body[data-theme="sunrise"] .bottom-nav button,
body[data-theme="sunrise"] .helperNote,
body[data-theme="sunrise"] .cardSubtitle,
body[data-theme="sunrise"] .mutedTextOnLight,
body[data-theme="sunrise"] .value-area-chip span {
  color: var(--soft-ink);
}

body[data-theme="sunrise"] h1,
body[data-theme="sunrise"] h2,
body[data-theme="sunrise"] h3,
body[data-theme="sunrise"] .prompt,
body[data-theme="sunrise"] .brand-mark,
body[data-theme="sunrise"] .section-title,
body[data-theme="sunrise"] .quote-card span,
body[data-theme="sunrise"] .state-card strong,
body[data-theme="sunrise"] .dash-card strong,
body[data-theme="sunrise"] .wide-card strong,
body[data-theme="sunrise"] .textOnLight,
body[data-theme="sunrise"] .cardTitle,
body[data-theme="sunrise"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="sunrise"] .primary-btn,
body[data-theme="sunrise"] .bottom-nav button.active,
body[data-theme="sunrise"] .chip.selected,
body[data-theme="sunrise"] .choice-btn.selected-card,
body[data-theme="sunrise"] .choice-btn.selected,
body[data-theme="sunrise"] .word-bubble.selected-card,
body[data-theme="sunrise"] .value-need-chip.selected-card,
body[data-theme="sunrise"] .glimmer-category-chip.selected,
body[data-theme="sunrise"] .gratitude-category-chip.selected-card,
body[data-theme="sunrise"] .support-hero-card {
  color: #221827;
  border-color: rgba(28, 20, 31, 0.4);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.16), transparent 7rem),
    linear-gradient(135deg, #f2a154 0%, #ee7a68 100%);
  box-shadow: var(--selected-ring), var(--tap-shadow);
}

body[data-theme="sunrise"] .support-hero-card span,
body[data-theme="sunrise"] .support-hero-card em {
  color: rgba(28, 20, 31, 0.78);
}

body[data-theme="sunrise"] .secondary-btn,
body[data-theme="sunrise"] .quiet-btn,
body[data-theme="sunrise"] .back-btn,
body[data-theme="sunrise"] .chip,
body[data-theme="sunrise"] .choice-btn,
body[data-theme="sunrise"] .text-input,
body[data-theme="sunrise"] .textarea,
body[data-theme="sunrise"] .selected-checkin-pill,
body[data-theme="sunrise"] .glimmer-category-chip,
body[data-theme="sunrise"] .gratitude-category-chip {
  color: var(--ink);
  border-color: rgba(242, 161, 84, 0.28);
  background:
    linear-gradient(135deg, rgba(70, 51, 74, 0.9), rgba(28, 20, 31, 0.78));
}

body[data-theme="sunrise"] .secondary-btn:hover,
body[data-theme="sunrise"] .choice-btn:hover,
body[data-theme="sunrise"] .card-btn:hover,
body[data-theme="sunrise"] .wide-card:hover,
body[data-theme="sunrise"] .dash-card:hover,
body[data-theme="sunrise"] .practice-tool-card:hover,
body[data-theme="sunrise"] .practice-category-card:hover {
  border-color: rgba(242, 161, 84, 0.55);
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="sunrise"] .card-btn.selected-card,
body[data-theme="sunrise"] .glimmer-category-chip.selected,
body[data-theme="sunrise"] .gratitude-category-chip.selected-card {
  border-color: rgba(242, 161, 84, 0.75);
  background:
    radial-gradient(circle at 92% 10%, rgba(242, 161, 84, 0.28), transparent 7rem),
    linear-gradient(135deg, rgba(72, 53, 76, 0.96), rgba(32, 23, 35, 0.92));
  box-shadow: var(--selected-ring), var(--small-shadow);
}

body[data-theme="sunrise"] .brand-mark::before {
  background:
    radial-gradient(circle at 50% 58%, #ffe3bd 0 16%, transparent 17%),
    conic-gradient(from 210deg, #221827, #ffd9a0, #7a4a5a, #d98a63, #f2a154, #221827);
  box-shadow: 0 0 22px rgba(242, 161, 84, 0.4), 0 8px 18px rgba(20, 14, 22, 0.32);
}

body[data-theme="sunrise"] .dash-card {
  --dash-accent: #f2a154;
}

body[data-theme="sunrise"] .today-value-panel,
body[data-theme="sunrise"] .today-value-context,
body[data-theme="sunrise"] .value-accordion,
body[data-theme="sunrise"] .value-result-card {
  border-color: color-mix(in srgb, var(--value-accent, #f2a154) 36%, rgba(242, 161, 84, 0.24));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--value-accent, #ee7a68) 20%, transparent), transparent 8rem),
    linear-gradient(145deg, rgba(70, 51, 74, 0.94), rgba(28, 20, 31, 0.86));
}

body[data-theme="sunrise"] .value-accordion summary {
  border-color: color-mix(in srgb, var(--value-accent, #f2a154) 36%, rgba(242, 161, 84, 0.24));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--value-accent, #ee7a68) 16%, rgba(70, 51, 74, 0.9)), rgba(28, 20, 31, 0.78));
}

body[data-theme="sunrise"] .wheel {
  --wheel-gradient: conic-gradient(from -90deg, #f2a154 0 12.5%, #ee7a68 12.5% 25%, #7a4a5a 25% 37.5%, #3a2740 37.5% 50%, #ffd9a0 50% 62.5%, #d98a63 62.5% 75%, #f2a154 75% 87.5%, #221827 87.5% 100%) !important;
  border-color: rgba(20, 14, 22, 0.4);
  box-shadow: var(--shadow), inset 0 0 0 0.7rem rgba(58, 42, 61, 0.34);
}

body[data-theme="sunrise"] .wheel-inner {
  color: var(--ink);
  background: #3a2a3d;
  border-color: rgba(242, 161, 84, 0.24);
}

body[data-theme="sunrise"] .wheel-label {
  color: rgba(255, 243, 224, 0.86);
}

body[data-theme="sunrise"] .wheel-pointer {
  border-top-color: #f2a154;
}

body[data-theme="sunrise"] .gratitude-jar-lid {
  background: linear-gradient(135deg, #221827, #f2a154);
  box-shadow: 0 8px 18px rgba(20, 14, 22, 0.34);
}

body[data-theme="sunrise"] .gratitude-jar-glass {
  border-color: rgba(242, 161, 84, 0.36);
  background:
    radial-gradient(circle at 35% 32%, rgba(242, 161, 84, 0.2), transparent 3.5rem),
    linear-gradient(180deg, rgba(70, 51, 74, 0.7), rgba(28, 20, 31, 0.5));
  box-shadow: inset 0 0 30px rgba(242, 161, 84, 0.14), 0 16px 34px rgba(20, 14, 22, 0.34);
}

body[data-theme="sunrise"] .gratitude-token,
body[data-theme="sunrise"] .gratitude-note-card {
  border-color: rgba(242, 161, 84, 0.4);
  background:
    radial-gradient(circle at 90% 12%, rgba(242, 161, 84, 0.22), transparent 5rem),
    linear-gradient(145deg, rgba(70, 51, 74, 0.96), rgba(28, 20, 31, 0.86));
}

body[data-theme="sunrise"] .word-fit-cell {
  color: var(--ink);
  border-color: rgba(242, 161, 84, 0.3);
  background: rgba(58, 42, 61, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(20, 14, 22, 0.3);
}

body[data-theme="sunrise"] .word-fit-block {
  background: rgba(242, 161, 84, 0.18);
}

body[data-theme="sunrise"] .word-fit-cell.match-length,
body[data-theme="sunrise"] .word-fit-cell.active-slot {
  border-color: rgba(242, 161, 84, 0.86);
  background: rgba(70, 51, 74, 0.96);
  box-shadow: var(--selected-ring), 0 8px 20px rgba(20, 14, 22, 0.3);
}

body[data-theme="sunrise"] .word-fit-cell.matched,
body[data-theme="sunrise"] .word-fit-word.selected-card {
  color: #221827;
  border-color: rgba(28, 20, 31, 0.4);
  background: linear-gradient(135deg, #f2a154, #ee7a68);
}

body[data-theme="sunrise"] .word-fit-word {
  color: var(--ink);
  border-color: rgba(242, 161, 84, 0.28);
  background: linear-gradient(135deg, rgba(70, 51, 74, 0.9), rgba(28, 20, 31, 0.78));
}

body[data-theme="sunrise"] .word-fit-word.used {
  color: var(--soft-ink);
  background: rgba(28, 20, 31, 0.5);
}

body[data-theme="sunrise"] .danger-btn {
  color: #fff8ed;
  background: linear-gradient(135deg, #7a4a35, #a56b4a);
  border-color: rgba(122, 74, 53, 0.42);
}

body[data-theme="sunrise"] .placed-burden-zone {
  border-color: rgba(242, 161, 84, 0.26);
  background: rgba(70, 51, 74, 0.4);
}

body[data-theme="sunrise"] .placed-zone-label,
body[data-theme="sunrise"] .unload-state-pill {
  color: #f2a154;
  border-color: rgba(242, 161, 84, 0.3);
  background: rgba(58, 42, 61, 0.86);
}

body[data-theme="sunrise"] .backpack-shadow,
body[data-theme="sunrise"] .placed-ground {
  background: rgba(20, 14, 22, 0.4);
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body[data-theme^="adaptive-"] {
  transition: background 400ms ease, color 400ms ease;
}

body[data-theme="adaptive-morning"] {
  --cream: #fff2da;
  --paper: rgba(255, 244, 221, 0.86);
  --paper-strong: #fff7e7;
  --ink: #2d332d;
  --soft-ink: #6c6f64;
  --sage: #819b77;
  --moss: #557c5c;
  --brass: #d8a84d;
  --ember: #c98261;
  --plum: #8f728a;
  --moon: #b8c8bc;
  --line: rgba(86, 95, 74, 0.18);
  background:
    radial-gradient(circle at 18% 4%, rgba(216, 168, 77, 0.28), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(201, 130, 97, 0.16), transparent 24rem),
    linear-gradient(150deg, #fff3dd 0%, #f5ead0 48%, #e9dfbf 100%);
}

body[data-theme="adaptive-day"] {
  --cream: #f7f0df;
  --paper: rgba(255, 248, 232, 0.84);
  --paper-strong: #fff9ed;
  --ink: #26332d;
  --soft-ink: #657064;
  --sage: #839c80;
  --moss: #4f7764;
  --brass: #cfad5e;
  --ember: #aa795f;
  --plum: #7d748f;
  --moon: #abc9cf;
  --line: rgba(70, 87, 74, 0.17);
  background:
    radial-gradient(circle at 15% 5%, rgba(207, 173, 94, 0.22), transparent 22rem),
    radial-gradient(circle at 90% 18%, rgba(171, 201, 207, 0.2), transparent 25rem),
    linear-gradient(150deg, #f8f0df 0%, #edf2e4 50%, #e5ece9 100%);
}

body[data-theme="adaptive-evening"] {
  --cream: #f0e4dc;
  --paper: rgba(246, 232, 219, 0.84);
  --paper-strong: #fbefe4;
  --ink: #302d31;
  --soft-ink: #716b70;
  --sage: #7c8e75;
  --moss: #5f7460;
  --brass: #c49a59;
  --ember: #b87764;
  --plum: #857194;
  --moon: #c4b8cf;
  --line: rgba(80, 70, 82, 0.18);
  background:
    radial-gradient(circle at 18% 8%, rgba(196, 154, 89, 0.18), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(133, 113, 148, 0.22), transparent 24rem),
    linear-gradient(150deg, #efe2d9 0%, #e4d8de 52%, #d8d3c6 100%);
}

body[data-theme="adaptive-night"] {
  --cream: #101614;
  --paper: rgba(30, 39, 35, 0.94);
  --paper-strong: #27322d;
  --ink: #e8dfcf;
  --soft-ink: #b8b3a7;
  --sage: #8aa08b;
  --moss: #90aa91;
  --deep: #080d0c;
  --grove: #151d1a;
  --brass: #bda261;
  --ember: #9c7059;
  --plum: #90839a;
  --moon: #bac3b9;
  --line: rgba(222, 211, 188, 0.2);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --small-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(circle at 18% 6%, rgba(189, 162, 97, 0.12), transparent 20rem),
    radial-gradient(circle at 86% 20%, rgba(144, 170, 145, 0.12), transparent 24rem),
    linear-gradient(150deg, #080d0c 0%, #111917 56%, #171615 100%);
}

body[data-theme="adaptive-morning"] .app-shell,
body[data-theme="adaptive-day"] .app-shell,
body[data-theme="adaptive-evening"] .app-shell {
  background:
    linear-gradient(rgba(255, 248, 234, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 234, 0.32) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-strong), var(--cream));
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="adaptive-night"] .app-shell {
  background:
    linear-gradient(rgba(222, 211, 188, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 211, 188, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #101614 0%, #151d1a 58%, #171a17 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body[data-theme="adaptive-night"] .opening,
body[data-theme="adaptive-night"] .reflection-line,
body[data-theme="adaptive-night"] .home-checkin-ack,
body[data-theme="adaptive-night"] .card-btn,
body[data-theme="adaptive-night"] .quote-card,
body[data-theme="adaptive-night"] .state-card,
body[data-theme="adaptive-night"] .dash-card,
body[data-theme="adaptive-night"] .wide-card,
body[data-theme="adaptive-night"] .panel,
body[data-theme="adaptive-night"] .soft-panel,
body[data-theme="adaptive-night"] .creative-result-hero,
body[data-theme="adaptive-night"] .capacity-home-control,
body[data-theme="adaptive-night"] .capacity-depth-toggle,
body[data-theme="adaptive-night"] .chip-btn,
body[data-theme="adaptive-night"] .secondary-btn,
body[data-theme="adaptive-night"] .danger-btn,
body[data-theme="adaptive-night"] .quiet-btn,
body[data-theme="adaptive-night"] .back-btn,
body[data-theme="adaptive-night"] .chip,
body[data-theme="adaptive-night"] .textarea,
body[data-theme="adaptive-night"] .footer-note,
body[data-theme="adaptive-night"] .bottom-nav {
  color: var(--ink);
  background: rgba(30, 39, 35, 0.94);
  border-color: rgba(222, 211, 188, 0.18);
}

body[data-theme="adaptive-night"] .copy,
body[data-theme="adaptive-night"] .muted,
body[data-theme="adaptive-night"] .subtitle,
body[data-theme="adaptive-night"] .bottom-line,
body[data-theme="adaptive-night"] .card-btn span,
body[data-theme="adaptive-night"] .state-card span,
body[data-theme="adaptive-night"] .dash-card span,
body[data-theme="adaptive-night"] .wide-card span,
body[data-theme="adaptive-night"] .creative-result-copy,
body[data-theme="adaptive-night"] .related-spark-card span,
body[data-theme="adaptive-night"] .card-kicker,
body[data-theme="adaptive-night"] .quote-card small,
body[data-theme="adaptive-night"] .capacity-home-control span,
body[data-theme="adaptive-night"] .bottom-nav button,
body[data-theme="adaptive-night"] .helperNote,
body[data-theme="adaptive-night"] .cardSubtitle,
body[data-theme="adaptive-night"] .mutedTextOnLight {
  color: var(--soft-ink);
}

body[data-theme="adaptive-night"] h1,
body[data-theme="adaptive-night"] h2,
body[data-theme="adaptive-night"] h3,
body[data-theme="adaptive-night"] .prompt,
body[data-theme="adaptive-night"] .brand-mark,
body[data-theme="adaptive-night"] .section-title,
body[data-theme="adaptive-night"] .quote-card span,
body[data-theme="adaptive-night"] .state-card strong,
body[data-theme="adaptive-night"] .dash-card strong,
body[data-theme="adaptive-night"] .wide-card strong,
body[data-theme="adaptive-night"] .creative-result-name,
body[data-theme="adaptive-night"] .textOnLight,
body[data-theme="adaptive-night"] .cardTitle,
body[data-theme="adaptive-night"] .bodyCopy {
  color: var(--ink);
}

body[data-theme="adaptive-night"] .primary-btn,
body[data-theme="adaptive-night"] .bottom-nav button.active,
body[data-theme="adaptive-night"] .chip.selected,
body[data-theme="adaptive-night"] .support-hero-card {
  color: #211b11;
  background: linear-gradient(135deg, #bda261, #90aa91);
}

body[data-theme="adaptive-evening"] .primary-btn,
body[data-theme="adaptive-evening"] .bottom-nav button.active,
body[data-theme="adaptive-evening"] .chip.selected {
  background: linear-gradient(135deg, #5f7460, #857194);
}

body[data-theme="dark"] .glimmer-category-chip,
body[data-theme="adaptive-night"] .glimmer-category-chip {
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--glimmer-chip-accent) 22%, rgba(34, 44, 39, 0.96)), rgba(34, 44, 39, 0.96));
  border-color: color-mix(in srgb, var(--glimmer-chip-accent) 52%, rgba(222, 211, 188, 0.22));
}

body[data-theme="dark"] .glimmer-category-chip.selected,
body[data-theme="adaptive-night"] .glimmer-category-chip.selected {
  color: #211b11;
  background: linear-gradient(135deg, color-mix(in srgb, var(--glimmer-chip-accent) 78%, #fff3d0), color-mix(in srgb, var(--glimmer-chip-accent) 34%, #90aa91));
  border-color: color-mix(in srgb, var(--glimmer-chip-accent) 82%, #fff3d0);
}

@media (min-width: 720px) {
  .app-shell {
    margin: 2rem auto;
    min-height: calc(100vh - 4rem);
    border: 1px solid rgba(255, 246, 223, 0.18);
    border-radius: 2rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  }

  .bottom-nav {
    bottom: 2rem;
    border-radius: 0 0 2rem 2rem;
  }
}

@media (min-width: 860px) {
  .app-shell:has(.home-screen-v1) {
    max-width: 860px;
  }

  .home-screen-v1 {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    align-items: start;
    column-gap: 1rem;
  }

  .home-screen-v1 .home-topbar,
  .home-screen-v1 .support-hero-card,
  .home-screen-v1 .capacity-home-control,
  .home-screen-v1 .home-welcome-panel,
  .home-screen-v1 .home-explore-cluster,
  .home-screen-v1 .home-recent-section,
  .home-screen-v1 .bottom-line,
  .home-screen-v1 .footer-note {
    grid-column: 1 / -1;
  }

  .home-today-cluster {
    grid-column: 1;
  }

  .home-continue-cluster {
    grid-column: 2;
  }

  .home-explore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .snapshot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .home-screen-v1 .check-row.wrap-check-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-module-card,
  .home-explore-cluster {
    padding: 0.78rem;
  }
}

body[data-theme="dark"] .home-module-card,
body[data-theme="dark"] .home-tool-group,
body[data-theme="adaptive-night"] .home-module-card,
body[data-theme="adaptive-night"] .home-tool-group {
  color: var(--ink);
  border-color: rgba(222, 211, 188, 0.2);
  background:
    radial-gradient(circle at 8% 12%, rgba(189, 162, 97, 0.1), transparent 7rem),
    rgba(34, 44, 39, 0.94);
}

body[data-theme="dark"] .home-explore-cluster,
body[data-theme="adaptive-night"] .home-explore-cluster {
  border-color: rgba(222, 211, 188, 0.18);
  background:
    radial-gradient(circle at 92% 8%, rgba(144, 170, 145, 0.1), transparent 8rem),
    rgba(30, 39, 35, 0.78);
}

body[data-theme="dark"] .home-module-card > strong,
body[data-theme="dark"] .home-module-card h3,
body[data-theme="dark"] .home-explore-cluster h3,
body[data-theme="dark"] .home-tool-group summary,
body[data-theme="adaptive-night"] .home-module-card > strong,
body[data-theme="adaptive-night"] .home-module-card h3,
body[data-theme="adaptive-night"] .home-explore-cluster h3,
body[data-theme="adaptive-night"] .home-tool-group summary {
  color: var(--ink);
}

body[data-theme="dark"] .home-module-card > span,
body[data-theme="dark"] .home-module-card .muted,
body[data-theme="dark"] .home-mini-wheel-wrap small,
body[data-theme="dark"] .home-tool-row span,
body[data-theme="dark"] .rhythm-pill span,
body[data-theme="adaptive-night"] .home-module-card > span,
body[data-theme="adaptive-night"] .home-module-card .muted,
body[data-theme="adaptive-night"] .home-mini-wheel-wrap small,
body[data-theme="adaptive-night"] .home-tool-row span,
body[data-theme="adaptive-night"] .rhythm-pill span {
  color: var(--soft-ink);
}

body[data-theme="dark"] .home-tool-row,
body[data-theme="dark"] .rhythm-pill,
body[data-theme="dark"] .quick-section,
body[data-theme="dark"] .quick-scale,
body[data-theme="dark"] .quick-scale-point,
body[data-theme="dark"] .quick-explore-body,
body[data-theme="adaptive-night"] .home-tool-row,
body[data-theme="adaptive-night"] .rhythm-pill,
body[data-theme="adaptive-night"] .quick-section,
body[data-theme="adaptive-night"] .quick-scale,
body[data-theme="adaptive-night"] .quick-scale-point,
body[data-theme="adaptive-night"] .quick-explore-body {
  color: var(--ink);
  border-color: rgba(222, 211, 188, 0.16);
  background: rgba(24, 32, 29, 0.82);
}

body[data-theme="dark"] .home-tool-row strong,
body[data-theme="dark"] .rhythm-pill strong,
body[data-theme="dark"] .quick-scale-point strong,
body[data-theme="adaptive-night"] .home-tool-row strong,
body[data-theme="adaptive-night"] .rhythm-pill strong,
body[data-theme="adaptive-night"] .quick-scale-point strong {
  color: var(--ink);
}

body[data-theme="dark"] .quick-choice-card span,
body[data-theme="adaptive-night"] .quick-choice-card span {
  color: var(--soft-ink);
}

body[data-theme="dark"] .quick-scale-point span,
body[data-theme="adaptive-night"] .quick-scale-point span {
  color: #f2e5c6;
  background: rgba(217, 175, 85, 0.28);
}

body[data-theme="dark"] .rhythm-pill.primary,
body[data-theme="adaptive-night"] .rhythm-pill.primary {
  border-color: rgba(189, 162, 97, 0.38);
  background:
    radial-gradient(circle at 20% 10%, rgba(189, 162, 97, 0.16), transparent 3rem),
    rgba(34, 44, 39, 0.94);
}

body[data-theme="dark"] .both-pair-visual,
body[data-theme="adaptive-night"] .both-pair-visual {
  border-color: rgba(222, 211, 188, 0.16);
  background:
    radial-gradient(circle at 12% 12%, rgba(189, 162, 97, 0.12), transparent 6rem),
    rgba(24, 32, 29, 0.82);
}

body[data-theme="dark"] .both-pair-visual strong,
body[data-theme="adaptive-night"] .both-pair-visual strong {
  color: var(--ink);
}

body[data-theme="dark"] .both-pair-visual span,
body[data-theme="adaptive-night"] .both-pair-visual span {
  color: var(--brass);
}

body[data-theme="dark"] .quote-refresh-btn,
body[data-theme="adaptive-night"] .quote-refresh-btn,
body[data-theme="dark"] .quote-favourite-btn,
body[data-theme="adaptive-night"] .quote-favourite-btn {
  color: var(--ink);
  background: rgba(30, 39, 35, 0.94);
  border-color: rgba(222, 211, 188, 0.18);
}

body[data-theme="dark"] .quote-favourite-btn.selected,
body[data-theme="adaptive-night"] .quote-favourite-btn.selected {
  color: #f3dfaa;
  border-color: rgba(189, 162, 97, 0.44);
  background: rgba(89, 71, 45, 0.72);
  box-shadow: 0 0 0 3px rgba(189, 162, 97, 0.14), var(--small-shadow);
}

body[data-theme="dark"] .home-mini-wheel,
body[data-theme="adaptive-night"] .home-mini-wheel {
  box-shadow: inset 0 0 0 0.34rem rgba(30, 39, 35, 0.9), var(--small-shadow);
}

body[data-theme="dark"] .home-mini-wheel b,
body[data-theme="adaptive-night"] .home-mini-wheel b {
  background: rgba(34, 44, 39, 0.94);
  box-shadow: inset 0 0 0 1px rgba(222, 211, 188, 0.16);
}