:root,
[data-theme="blush"] {
  --bg: #fbf8f6;
  --surface: #fffdfb;
  --surface-2: #f5efeb;
  --surface-3: #efe6e1;
  --border: #ebe2dc;
  --border-strong: #dccfc7;
  --ink: #2a2523;
  --ink-muted: #6f655f;
  --ink-subtle: #998d86;
  --accent-soft: #f7e7e9;
  --accent-mid: #e0a8b0;
  --accent: #c97c87;
  --accent-strong: #7d4450;
  --button: #ae5c6a;
  --success: #5c785a;
  --success-soft: #e7efe5;
  --warning: #926937;
  --warning-soft: #f8eede;
  --danger: #af574e;
  --danger-soft: #f7e5e2;
  --focus: #7d4450;
  --rail: #f4ece8;
  --paper-dot: rgba(89, 70, 62, 0.035);
  --shadow-soft: 0 1px 2px rgba(42, 37, 35, 0.03), 0 10px 28px rgba(42, 37, 35, 0.055);
  --shadow-lift: 0 4px 10px rgba(42, 37, 35, 0.06), 0 24px 65px rgba(42, 37, 35, 0.14);
}

[data-theme="sage"] {
  --bg: #f7f8f3;
  --surface: #fffefa;
  --surface-2: #edf1e8;
  --surface-3: #e3e9dc;
  --border: #dde4d6;
  --border-strong: #cbd5c3;
  --accent-soft: #e5eee1;
  --accent-mid: #abc3a4;
  --accent: #7e9b78;
  --accent-strong: #466141;
  --button: #5d7a57;
  --focus: #466141;
  --rail: #eef1e8;
}

[data-theme="ink"] {
  --bg: #f5f7f8;
  --surface: #fdfefe;
  --surface-2: #e9edf0;
  --surface-3: #dfe5e9;
  --border: #dbe1e5;
  --border-strong: #c6d0d6;
  --accent-soft: #e3e9ee;
  --accent-mid: #9cabb7;
  --accent: #5b6b7c;
  --accent-strong: #334351;
  --button: #4b5d6e;
  --focus: #334351;
  --rail: #eaedef;
}

[data-theme="sand"] {
  --bg: #faf7f1;
  --surface: #fffdf8;
  --surface-2: #f3ebe0;
  --surface-3: #e9ddcf;
  --border: #e7dccf;
  --border-strong: #d7c8b7;
  --accent-soft: #f2e4d3;
  --accent-mid: #cba982;
  --accent: #aa7c52;
  --accent-strong: #68472c;
  --button: #8d633f;
  --focus: #68472c;
  --rail: #f3eadf;
}

[data-theme="lilac"] {
  --bg: #f9f7fb;
  --surface: #fffdfd;
  --surface-2: #f0ebf5;
  --surface-3: #e7dfee;
  --border: #e4ddea;
  --border-strong: #d1c5dc;
  --accent-soft: #eee6f5;
  --accent-mid: #b9a7ca;
  --accent: #8a78aa;
  --accent-strong: #57476f;
  --button: #725e8f;
  --focus: #57476f;
  --rail: #f0ebf4;
}

[data-theme="slate"] {
  --bg: #f4f7f7;
  --surface: #fcfefe;
  --surface-2: #e8eeee;
  --surface-3: #dce6e6;
  --border: #d8e2e2;
  --border-strong: #c2d0d0;
  --accent-soft: #e0ebec;
  --accent-mid: #94afb4;
  --accent: #54717a;
  --accent-strong: #304b53;
  --button: #42616a;
  --focus: #304b53;
  --rail: #e8eeee;
}

[data-mode="dark"] {
  --bg: #17130f;
  --surface: #201a17;
  --surface-2: #2a2320;
  --surface-3: #352c28;
  --border: #352c28;
  --border-strong: #473b36;
  --ink: #f3ede8;
  --ink-muted: #b0a49c;
  --ink-subtle: #877a72;
  --accent-soft: #352629;
  --accent-mid: #bc8790;
  --accent: #e5a0aa;
  --accent-strong: #f2c8ce;
  --button: #edb4bc;
  --success: #93b58f;
  --success-soft: #24301f;
  --warning: #d8ac6e;
  --warning-soft: #33281a;
  --danger: #de8c82;
  --danger-soft: #351f1c;
  --focus: #f0c2c8;
  --rail: #1d1815;
  --paper-dot: rgba(255, 255, 255, 0.025);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.16);
  --shadow-lift: 0 5px 12px rgba(0, 0, 0, 0.18), 0 28px 70px rgba(0, 0, 0, 0.36);
}

[data-theme="sage"][data-mode="dark"] { --accent-soft: #243027; --accent-mid: #8fa98a; --accent: #a9c4a3; --accent-strong: #d0e3cc; --button: #b8d0b3; --focus: #d0e3cc; }
[data-theme="ink"][data-mode="dark"] { --accent-soft: #252d34; --accent-mid: #8798a7; --accent: #aec0ce; --accent-strong: #d7e2e9; --button: #c0cfda; --focus: #d7e2e9; }
[data-theme="sand"][data-mode="dark"] { --accent-soft: #342a20; --accent-mid: #b99772; --accent: #d3ad84; --accent-strong: #ead0b2; --button: #dfbf9c; --focus: #ead0b2; }
[data-theme="lilac"][data-mode="dark"] { --accent-soft: #2d2735; --accent-mid: #a897bb; --accent: #c0aed4; --accent-strong: #dfd3eb; --button: #cdbce0; --focus: #dfd3eb; }
[data-theme="slate"][data-mode="dark"] { --accent-soft: #223034; --accent-mid: #80a2a8; --accent: #9fc0c5; --accent-strong: #c8dfe2; --button: #afd0d4; --focus: #c8dfe2; }

@media (prefers-color-scheme: dark) {
  [data-mode="system"] {
    --bg: #17130f;
    --surface: #201a17;
    --surface-2: #2a2320;
    --surface-3: #352c28;
    --border: #352c28;
    --border-strong: #473b36;
    --ink: #f3ede8;
    --ink-muted: #b0a49c;
    --ink-subtle: #877a72;
    --accent-soft: #352629;
    --accent-mid: #bc8790;
    --accent: #e5a0aa;
    --accent-strong: #f2c8ce;
    --button: #edb4bc;
    --success: #93b58f;
    --success-soft: #24301f;
    --warning: #d8ac6e;
    --warning-soft: #33281a;
    --danger: #de8c82;
    --danger-soft: #351f1c;
    --focus: #f0c2c8;
    --rail: #1d1815;
    --paper-dot: rgba(255, 255, 255, 0.025);
  }
  [data-theme="sage"][data-mode="system"] { --accent-soft: #243027; --accent-mid: #8fa98a; --accent: #a9c4a3; --accent-strong: #d0e3cc; --button: #b8d0b3; --focus: #d0e3cc; }
  [data-theme="ink"][data-mode="system"] { --accent-soft: #252d34; --accent-mid: #8798a7; --accent: #aec0ce; --accent-strong: #d7e2e9; --button: #c0cfda; --focus: #d7e2e9; }
  [data-theme="sand"][data-mode="system"] { --accent-soft: #342a20; --accent-mid: #b99772; --accent: #d3ad84; --accent-strong: #ead0b2; --button: #dfbf9c; --focus: #ead0b2; }
  [data-theme="lilac"][data-mode="system"] { --accent-soft: #2d2735; --accent-mid: #a897bb; --accent: #c0aed4; --accent-strong: #dfd3eb; --button: #cdbce0; --focus: #dfd3eb; }
  [data-theme="slate"][data-mode="system"] { --accent-soft: #223034; --accent-mid: #80a2a8; --accent: #9fc0c5; --accent-strong: #c8dfe2; --button: #afd0d4; --focus: #c8dfe2; }
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html {
  min-width: 320px;
  background: var(--bg);
  color-scheme: light;
  font-size: 17px;
  scroll-behavior: smooth;
}

html[data-mode="dark"] {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  transition: background-color 180ms ease, color 180ms ease;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--accent-mid);
  color: var(--ink);
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--paper-dot) 1px, transparent 0);
  background-size: 14px 14px;
}

.app-shell {
  min-height: 100vh;
}

.side-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 238px;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--rail) 92%, transparent);
  padding: 30px 20px 24px;
  backdrop-filter: blur(18px);
}

.brand {
  display: block;
  width: fit-content;
  text-decoration: none;
}

.streaklio-logo { position: relative; display: block; width: 164px; aspect-ratio: 500 / 165; flex: 0 0 auto; }
.streaklio-logo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.streaklio-logo .logo-dark { display: none; }
[data-mode="dark"] .streaklio-logo .logo-light { display: none; }
[data-mode="dark"] .streaklio-logo .logo-dark { display: block; }
.streaklio-logo.is-on-dark .logo-light { display: none; }
.streaklio-logo.is-on-dark .logo-dark { display: block; }
.brand .streaklio-logo { width: 180px; }

.rail-nav {
  display: grid;
  gap: 7px;
  margin-top: 58px;
}

.nav-item {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 10px 14px;
  font-size: 1.00rem;
  font-weight: 600;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--ink);
  transform: translateX(2px);
}

.nav-item.is-active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 1px 0 var(--border);
}

.nav-item svg,
.mobile-tab svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.nav-item[hidden],
.mobile-tab[hidden] { display: none !important; }

.rail-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 22px 8px 0;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.42;
}

.rail-note p {
  margin: 0;
}

.rail-note-flower {
  color: var(--accent);
  font-size: 1.00rem;
}

.main-stage {
  min-height: 100vh;
  margin-left: 238px;
  padding: 48px clamp(28px, 5vw, 78px) 80px;
}

.page {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.page.today-page {
  width: min(100%, 720px);
}

.page.journal-page {
  width: min(100%, 820px);
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.loading-state {
  display: grid;
  min-height: calc(100vh - 130px);
  place-items: center;
  align-content: center;
  gap: 16px;
  color: var(--ink-muted);
}

.loading-streaklio {
  width: 34px;
  height: 34px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h1,
h2,
h3,
.display-number {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

.page-title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 1.04;
}

.page-subtitle {
  max-width: 630px;
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 1.00rem;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.today-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}

.today-meta {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 1.00rem;
}

.today-meta strong {
  color: var(--ink);
  font-weight: 600;
}

.today-creature-slider {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1.08fr) minmax(135px, .92fr) 108px;
  align-items: center;
  gap: 11px;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 21px;
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
  padding: 10px;
}

.today-creature-slider::before {
  position: absolute;
  top: -76px;
  left: -42px;
  width: 170px;
  height: 170px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.today-creature-current {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.today-creature-portrait {
  position: relative;
  display: grid;
  width: 66px;
  height: 72px;
  place-items: end center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
}

.today-creature-portrait img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px color-mix(in srgb, var(--ink) 12%, transparent));
}

.today-creature-name {
  display: grid;
  min-width: 0;
}

.today-creature-name small,
.today-creature-progress-copy small,
.today-creature-next small {
  color: var(--ink-muted);
  font-size: .76rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.25;
  text-transform: uppercase;
}

.today-creature-name strong {
  overflow: hidden;
  margin-top: 3px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-creature-name em {
  margin-top: 4px;
  color: var(--accent-strong);
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
}

.today-creature-progress {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  min-width: 0;
}

.today-creature-progress-copy {
  display: grid;
  gap: 3px;
}

.today-creature-progress-copy strong {
  overflow: hidden;
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-creature-track {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-3));
}

.today-creature-track > i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 7px;
  border-radius: inherit;
  background: var(--accent);
}

.today-creature-track > i::after {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  content: "";
  transform: translateY(-50%);
}

.today-creature-xp {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-muted);
  font-size: .76rem;
  line-height: 1.25;
}

.today-creature-xp strong {
  color: var(--ink);
  font-size: inherit;
  white-space: nowrap;
}

.today-creature-xp small {
  overflow: hidden;
  font-size: inherit;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-creature-slider.is-complete .today-creature-track > i { min-width: 100%; }

.today-creature-next {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 76px;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
}

.today-creature-next > span {
  display: grid;
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-strong);
  font-family: "Fraunces", Georgia, serif;
  font-size: .88rem;
}

.today-creature-next strong {
  overflow: hidden;
  width: 100%;
  font-size: .76rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-creature-next:hover,
.today-creature-next:focus-visible {
  border-style: solid;
  border-color: var(--accent);
  outline: 0;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
}

.today-creature-slider.is-complete .today-creature-next { border-style: solid; }

.date-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date-kicker::before {
  width: 26px;
  height: 1px;
  background: var(--accent);
  content: "";
}

.today-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
}

.is-history-day .today-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.progress-ring {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  flex: 0 0 auto;
  place-items: center;
}

.progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track,
.ring-fill {
  fill: none;
  stroke-width: 8;
}

.ring-track { stroke: var(--surface-3); }
.ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms cubic-bezier(.22, 1, .36, 1);
}

.ring-label {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ring-label strong {
  display: block;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ring-label span {
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-soft);
}

.day-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 7px;
  margin-bottom: 34px;
  padding: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}

.day-strip::-webkit-scrollbar { display: none; }

.day-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 8px 4px;
  scroll-snap-align: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.day-button:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
  transform: translateY(-1px);
}

.day-button:disabled {
  cursor: not-allowed;
  opacity: 0.33;
}

.day-button.is-selected {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.day-button.is-today .day-number {
  box-shadow: 0 0 0 1px var(--accent);
}

.day-name {
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.day-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: inherit;
  font-size: 1.00rem;
  font-weight: 600;
}

.day-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}

.day-dot.has-progress { background: var(--accent); }
.day-dot.is-complete { background: var(--success); }
.day-dot.is-protected {
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent-mid);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.day-button.is-protected:not(.is-selected) { background: color-mix(in srgb, var(--accent-soft) 28%, transparent); }

.comeback-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: -4px 0 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
  padding: 22px;
}

.comeback-flower {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 1.35rem;
  box-shadow: var(--shadow-soft);
}

.comeback-flower::before,
.comeback-flower::after,
.comeback-flower i::before,
.comeback-flower i::after {
  position: absolute;
  width: 16px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 50%;
  content: "";
}

.comeback-flower::before { transform: translateY(-17px); }
.comeback-flower::after { transform: translateY(17px); }
.comeback-flower i::before { transform: translateX(-17px) rotate(90deg); }
.comeback-flower i::after { transform: translateX(17px) rotate(90deg); }
.comeback-flower span { position: relative; z-index: 1; }

.comeback-kicker {
  color: var(--accent-strong);
  font-size: 0.80rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.comeback-copy h2 { margin: 4px 0 3px; font-size: 1.55rem; }
.comeback-copy p { margin: 0; color: var(--ink-muted); font-size: 0.94rem; line-height: 1.55; }
.comeback-actions { display: flex; grid-column: 2; flex-wrap: wrap; gap: 8px; margin-top: -5px; }
.comeback-actions .button { min-height: 38px; }

.history-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -18px 0 30px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  padding: 13px 14px;
}

.history-banner > span { color: var(--accent-strong); font-size: 1.1rem; }
.history-banner strong { display: block; font-size: 0.86rem; }
.history-banner p { margin: 2px 0 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.45; }

.protection-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: -18px 0 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
  padding: 13px 15px;
}

.protection-symbol {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 1rem;
}

.protection-banner strong { display: block; font-size: 0.86rem; }
.protection-banner p { margin: 2px 0 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.45; }

.habit-window + .habit-window {
  margin-top: 30px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-label::after {
  height: 1px;
  flex: 1;
  background: var(--border);
  content: "";
}

.habit-list {
  display: grid;
  gap: 10px;
}

.habit-row {
  position: relative;
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.habit-row[data-type="quantity"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.habit-row:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.habit-row.is-complete {
  background: color-mix(in srgb, var(--surface) 64%, var(--success-soft));
}

.habit-row:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 3px;
}

.habit-row.is-complete .habit-main,
.habit-row.is-complete .checklist-items { opacity: 0.62; }

.habit-row.is-complete:hover .habit-main,
.habit-row.is-complete:hover .checklist-items,
.habit-row.is-complete:focus-within .habit-main,
.habit-row.is-complete:focus-within .checklist-items { opacity: 0.82; }

.habit-row.is-long-pressing {
  border-color: var(--accent);
  transform: scale(0.995);
}

.habit-row.is-long-pressing::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--accent);
  content: "";
  transform-origin: left;
  animation: hold-fill 550ms linear both;
}

@keyframes hold-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.habit-row.is-complete .habit-name {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-muted) 55%, transparent);
}

.habit-main {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 11px 15px 11px 11px;
}

.habit-toggle {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 1.25rem;
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), background 180ms ease, border-color 180ms ease;
}

.habit-toggle:hover { transform: scale(1.05); }
.habit-toggle.is-complete {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: var(--success-soft);
}

.habit-toggle .checkmark {
  color: var(--success);
  font-size: 1.05rem;
  font-weight: 700;
}

.habit-copy {
  min-width: 0;
}

.habit-name {
  margin: 0;
  font-size: 1.00rem;
  font-weight: 600;
  line-height: 1.35;
}

.habit-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.hold-hint {
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface-2);
  cursor: pointer;
  padding: 2px 6px;
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.hold-hint:hover { border-color: var(--accent); background: var(--accent-soft); }
.hold-hint:active { transform: scale(.97); }

.schedule-note {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 2px 7px;
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
}

.schedule-note.is-met {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: var(--success-soft);
  color: var(--success);
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--warning);
  font-weight: 700;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-button,
.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.step-button:hover,
.icon-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.step-button:disabled {
  cursor: default;
  opacity: .38;
  transform: none;
}

.step-button:disabled:hover {
  border-color: var(--border);
  background: var(--surface);
}

.step-button {
  width: 46px;
  height: 46px;
}

.quantity-value {
  min-width: 56px;
  text-align: center;
}

.quantity-value strong {
  display: block;
  font-size: 1.00rem;
  font-variant-numeric: tabular-nums;
}

.quantity-value span {
  display: block;
  color: var(--ink-muted);
  font-size: 0.80rem;
}

.habit-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--surface-2);
}

.habit-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 500ms cubic-bezier(.22, 1, .36, 1);
}

.checklist-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 12px 15px 15px 74px;
}

.check-item {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0.86rem;
  text-align: left;
}

.check-item.is-checked {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--success-soft);
  color: var(--success);
}

.check-box {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.80rem;
}

.empty-card {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  padding: 48px 24px;
  text-align: center;
}

.empty-illustration {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 1.55rem;
}

.empty-card h2 {
  margin: 17px 0 5px;
  font-size: 1.55rem;
}

.empty-card p {
  max-width: 380px;
  margin: 0 0 20px;
  color: var(--ink-muted);
  font-size: 1.00rem;
}

.journal-prompt {
  position: relative;
  overflow: hidden;
  margin-top: 34px;
  padding: 28px;
}

.journal-prompt::after {
  position: absolute;
  right: -35px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  opacity: 0.35;
  content: "";
}

.journal-prompt h2 {
  margin: 0 0 5px;
  font-size: 1.4rem;
}

.journal-prompt > p {
  margin: 0 0 19px;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.mood-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mood-button {
  display: grid;
  min-width: 55px;
  min-height: 54px;
  place-items: center;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  cursor: pointer;
  padding: 7px;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.mood-button:hover { transform: translateY(-2px); }
.mood-button.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mood-face { font-size: 1.25rem; line-height: 1; }
.mood-label { color: var(--ink-muted); font-size: 0.80rem; font-weight: 600; }

.gratitude-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 16px;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.input,
.select { min-height: 46px; }
.textarea { min-height: 112px; resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: var(--ink-subtle); }

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.timezone-select {
  min-height: 54px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.ready-card .timezone-select {
  min-height: 62px;
  border-radius: 17px;
  padding-inline: 18px 42px;
  font-size: 1rem;
  font-weight: 600;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  padding: 10px 17px;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: 0.55; transform: none; }
.button-primary { background: var(--button); color: #fff; }
[data-mode="dark"] .button-primary { color: #231a17; }
.button-primary:hover { background: var(--accent-strong); }
.button-soft { border-color: var(--border); background: var(--surface-2); color: var(--ink); }
.button-soft:hover { border-color: var(--border-strong); }
.button-ghost { background: transparent; color: var(--ink-muted); }
.button-danger { background: var(--danger-soft); color: var(--danger); }
.button-small { min-height: 38px; border-radius: 11px; padding: 7px 12px; font-size: 0.86rem; }

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.capacity-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -8px 0 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  padding: 14px 16px;
}

.capacity-note.is-full {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
  background: var(--warning-soft);
}

.capacity-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent-strong);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
}

.capacity-note strong,
.capacity-note p { display: block; margin: 0; }
.capacity-note strong { font-size: 0.86rem; }
.capacity-note p { margin-top: 2px; color: var(--ink-muted); font-size: 0.80rem; }
.capacity-count { color: var(--ink-muted); font-size: 0.80rem; font-weight: 800; }

.stat-card {
  min-height: 132px;
  padding: 22px;
}

.stat-label {
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stat-value {
  display: block;
  margin-top: 10px;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-foot {
  display: block;
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.section-block {
  margin-top: 36px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.section-heading p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.manage-list {
  display: grid;
  gap: 10px;
}

.manage-row {
  display: grid;
  grid-template-columns: 30px auto minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: 13px;
  padding: 14px 15px 14px 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.drag-handle {
  display: grid;
  width: 30px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-subtle);
  cursor: grab;
  font-size: 1.08rem;
  letter-spacing: -0.18em;
}

.drag-handle:hover { background: var(--surface-2); color: var(--ink-muted); }
.drag-handle:active { cursor: grabbing; }
.manage-row.is-dragging { opacity: 0.42; transform: scale(.99); }
.manage-row.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.manage-row.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }

.manage-health {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}

.manage-health > span { min-width: 48px; }
.manage-health strong,
.manage-health small { display: block; white-space: nowrap; }
.manage-health strong { color: var(--ink); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.manage-health small { margin-top: 2px; color: var(--ink-subtle); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; }

.habit-icon-large {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-2);
  font-size: 1.2rem;
}

.manage-copy h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
}

.manage-copy p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.dot-row {
  display: flex;
  gap: 5px;
}

.mini-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-3);
}

.mini-dot.is-done { background: var(--accent); }
.mini-dot.not-due { background: transparent; border: 1px solid var(--border-strong); }
.mini-dot.is-optional { background: transparent; border: 1px dashed var(--accent-mid); }
.mini-dot.is-protected { border: 1px solid var(--accent); background: var(--accent-soft); }

.row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.order-buttons {
  display: inline-flex;
  gap: 3px;
  margin-right: 2px;
}

.order-button {
  display: grid;
  width: 30px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.86rem;
}

.order-button:hover:not(:disabled) { border-color: var(--accent-mid); color: var(--accent-strong); }
.order-button:disabled { cursor: default; opacity: 0.3; }
.danger-link { color: var(--danger); }

.archive-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.archive-toggle {
  display: flex;
  width: 100%;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 14px 18px;
  text-align: left;
}

.archive-toggle:hover { background: var(--surface-2); }
.archive-toggle > span:first-child,
.archive-toggle-end { display: flex; align-items: center; gap: 12px; }
.archive-symbol {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 1.00rem;
}
.archive-toggle strong,
.archive-toggle small { display: block; }
.archive-toggle strong { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.archive-toggle small { margin-top: 2px; color: var(--ink-muted); font-size: 0.80rem; }
.archive-count {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 800;
}
.archive-chevron { width: 18px; color: var(--ink-muted); font-size: 1rem; text-align: center; }

.archive-drawer {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--border);
  padding: 12px;
  animation: archive-open 180ms ease both;
}

@keyframes archive-open { from { opacity: 0; transform: translateY(-5px); } }

.archived-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  box-shadow: none;
}

.archived-row .habit-icon-large { filter: grayscale(.35); opacity: .72; }
.archive-empty { padding: 25px; color: var(--ink-muted); text-align: center; }
.archive-empty span { color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; }
.archive-empty p { margin: 4px 0 0; font-size: 0.80rem; }

.template-scroller {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.template-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  padding: 20px;
  transition: transform 170ms ease, border-color 170ms ease;
}

.template-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.template-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.template-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  font-size: 1.15rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checklist-count {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 5px;
  min-width: 76px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface-2));
  white-space: nowrap;
}

.checklist-count strong {
  color: var(--ink);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.checklist-count small {
  align-self: center;
  color: var(--ink-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
}

.template-card h3 {
  margin: 18px 0 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.00rem;
  font-weight: 700;
}

.template-card p {
  margin: 0 0 16px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.template-card .button {
  align-self: flex-start;
  margin-top: auto;
}

/* Template library */
.templates-page {
  width: min(1180px, 100%);
}

.templates-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent-soft) 84%, transparent) 0 9%, transparent 9.3%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent-soft) 42%, var(--surface)));
  padding: clamp(28px, 5vw, 58px);
}

.templates-hero::before,
.templates-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.templates-hero::before {
  top: -105px;
  right: 80px;
  width: 270px;
  height: 270px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 50%;
}

.templates-hero::after {
  top: 48px;
  right: 204px;
  width: 1px;
  height: 250px;
  background: color-mix(in srgb, var(--accent) 23%, transparent);
  transform: rotate(39deg);
  transform-origin: top;
}

.templates-hero-copy { position: relative; z-index: 1; max-width: 670px; }
.templates-hero .page-title { margin-top: 11px; font-size: clamp(3rem, 6.4vw, 5.7rem); line-height: .91; }
.templates-hero .page-title em { color: var(--accent-strong); font-weight: 300; }
.templates-hero .page-subtitle { max-width: 570px; margin-top: 22px; font-size: 1.00rem; }

.templates-hero-mark {
  position: absolute;
  top: 37px;
  right: 43px;
  z-index: 1;
  color: var(--accent);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.4rem;
  transform: rotate(12deg);
}

.template-library-counts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: end;
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 19px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  padding: 13px 16px;
  backdrop-filter: blur(12px);
}

.template-library-counts span { min-width: 72px; padding: 4px 13px; text-align: center; }
.template-library-counts span + span { border-left: 1px solid var(--border); }
.template-library-counts strong,
.template-library-counts small { display: block; }
.template-library-counts strong { font-family: "Fraunces", Georgia, serif; font-size: 1.8rem; font-weight: 400; line-height: 1; }
.template-library-counts small { margin-top: 5px; color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.template-library-section { margin-top: clamp(48px, 7vw, 84px); }
.template-library-heading { align-items: end; margin-bottom: 21px; }
.template-library-heading > div { max-width: 680px; }
.template-library-heading h2 { margin: 3px 0 4px; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.template-library-heading p:not(.section-number) { margin: 0; color: var(--ink-muted); font-size: 0.86rem; }
.section-number { margin: 0; color: var(--accent-strong); font-size: 0.80rem; font-weight: 700; letter-spacing: .12em; }

.starter-routine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.starter-routine-card {
  --routine-color: var(--accent);
  --routine-soft: var(--accent-soft);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--routine-color) 24%, var(--border));
  border-radius: 25px;
  background: color-mix(in srgb, var(--routine-soft) 44%, var(--surface));
  padding: 27px;
  transition: transform 180ms ease, border-color 180ms ease;
}

.starter-routine-card:hover { border-color: color-mix(in srgb, var(--routine-color) 54%, var(--border)); transform: translateY(-2px); }
.starter-routine-card::after { position: absolute; right: -55px; bottom: -75px; width: 190px; height: 190px; border: 1px solid color-mix(in srgb, var(--routine-color) 29%, transparent); border-radius: 50%; content: ""; }
.starter-routine-card.is-featured { grid-column: 1 / -1; min-height: 285px; }
.routine-rose,
.pack-rose { --routine-color: #c97c87; --routine-soft: #f7e7e9; }
.routine-sage,
.pack-sage { --routine-color: #7e9b78; --routine-soft: #e5eee1; }
.routine-lilac,
.pack-lilac { --routine-color: #8a78aa; --routine-soft: #eee6f5; }
.routine-ink,
.pack-ink { --routine-color: #5b6b7c; --routine-soft: #e3e9ee; }
.routine-sand,
.pack-sand { --routine-color: #aa7c52; --routine-soft: #f2e4d3; }
.routine-blue,
.pack-blue { --routine-color: #688da8; --routine-soft: #e5eff5; }

.starter-routine-copy { position: relative; z-index: 1; min-width: 0; }
.routine-overline { display: flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--routine-color) 72%, var(--ink)); font-size: 0.76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.routine-overline span + span { display: inline-flex; align-items: center; gap: 10px; }
.routine-overline span + span::before { width: 17px; height: 1px; background: currentColor; content: ""; }
.starter-routine-card h3 { max-width: 460px; margin: 18px 0 8px; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 400; line-height: 1; }
.starter-routine-card p { max-width: 540px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.65; }
.routine-habit-list { display: flex; flex-wrap: wrap; gap: 7px; max-width: 650px; margin-top: 24px; }
.routine-habit-list span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--routine-color) 22%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 74%, transparent); padding: 7px 10px; color: var(--ink); font-size: 0.80rem; }
.routine-habit-list i { font-style: normal; }
.starter-routine-action { position: relative; z-index: 1; display: flex; align-items: flex-end; flex-direction: column; justify-content: space-between; gap: 22px; padding-left: 22px; }
.routine-count { display: grid; width: 67px; height: 67px; place-content: center; border: 1px solid color-mix(in srgb, var(--routine-color) 30%, var(--border)); border-radius: 50%; text-align: center; }
.routine-count strong,
.routine-count small { display: block; }
.routine-count strong { font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 400; line-height: 1; }
.routine-count small { margin-top: 3px; color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.starter-routine-action .button { white-space: nowrap; }

.template-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.template-pack-card {
  --routine-color: var(--accent);
  --routine-soft: var(--accent-soft);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 125px;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  padding: 17px;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.template-pack-card:hover,
.template-pack-card.is-selected { border-color: color-mix(in srgb, var(--routine-color) 58%, var(--border)); background: color-mix(in srgb, var(--routine-soft) 48%, var(--surface)); transform: translateY(-1px); }
.pack-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--routine-soft) 82%, var(--surface)); color: color-mix(in srgb, var(--routine-color) 74%, var(--ink)); font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }
.pack-copy { min-width: 0; }
.pack-copy strong,
.pack-copy small { display: block; }
.pack-copy strong { font-size: 0.86rem; }
.pack-copy small { display: -webkit-box; overflow: hidden; margin-top: 5px; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pack-count { display: grid; justify-items: end; color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 1.08rem; }
.pack-count i { color: color-mix(in srgb, var(--routine-color) 68%, var(--ink)); font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.86rem; font-style: normal; }

.catalog-heading { align-items: end; }
.catalog-count { border: 1px solid var(--border); border-radius: 999px; background: var(--surface); padding: 8px 12px; color: var(--ink-muted); font-size: 0.80rem; font-weight: 700; }
.template-filter-bar { display: grid; grid-template-columns: minmax(230px, 1fr) auto auto auto; align-items: end; gap: 10px; margin-bottom: 14px; padding: 12px; box-shadow: none; }
.template-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-height: 46px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 0 13px; }
.template-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 20%, transparent); }
.template-search i { color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-style: normal; }
.template-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 0.86rem; }
.template-search input::placeholder { color: var(--ink-subtle); }
.template-filter { display: grid; gap: 4px; }
.template-filter > span { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.template-filter select { min-width: 128px; min-height: 46px; border: 1px solid var(--border); border-radius: 14px; outline: 0; background: var(--bg); color: var(--ink); padding: 0 30px 0 11px; font-size: 0.80rem; }
.clear-template-filters { min-height: 46px; border: 0; background: transparent; color: var(--accent-strong); padding: 0 11px; font-size: 0.80rem; font-weight: 700; cursor: pointer; }

.active-pack-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 17px; background: color-mix(in srgb, var(--accent-soft) 43%, var(--surface)); padding: 13px 15px; }
.active-pack-note > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--surface); color: var(--accent-strong); }
.active-pack-note p { display: grid; gap: 2px; margin: 0; color: var(--ink-muted); font-size: 0.80rem; }
.active-pack-note strong { color: var(--ink); font-size: 0.86rem; }
.active-pack-note button { border: 0; background: transparent; color: var(--accent-strong); font-size: 0.80rem; font-weight: 700; cursor: pointer; }

.library-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.library-template-card {
  --template-color: var(--accent);
  --template-soft: var(--accent-soft);
  display: flex;
  min-height: 330px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 19px;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.library-template-card:hover { border-color: color-mix(in srgb, var(--template-color) 50%, var(--border)); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.library-template-card[data-accent="rose"] { --template-color: #c97c87; --template-soft: #f7e7e9; }
.library-template-card[data-accent="sage"] { --template-color: #7e9b78; --template-soft: #e5eee1; }
.library-template-card[data-accent="lilac"] { --template-color: #8a78aa; --template-soft: #eee6f5; }
.library-template-card[data-accent="sand"] { --template-color: #aa7c52; --template-soft: #f2e4d3; }
.library-template-card[data-accent="ink"] { --template-color: #5b6b7c; --template-soft: #e3e9ee; }
.library-template-card[data-accent="blue"] { --template-color: #688da8; --template-soft: #e5eff5; }
.library-template-card[data-accent="yellow"] { --template-color: #b38a3e; --template-soft: #f7edcf; }
.library-template-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.library-template-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 17px; background: color-mix(in srgb, var(--template-soft) 82%, var(--surface)); font-size: 1.35rem; }
.library-template-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.time-pill { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; }
.difficulty-gentle { background: var(--success-soft); color: var(--success); }
.difficulty-steady { background: var(--warning-soft); color: var(--warning); }
.difficulty-ambitious { background: var(--danger-soft); color: var(--danger); }
.library-template-copy { margin-top: 19px; }
.template-pack-name { color: color-mix(in srgb, var(--template-color) 76%, var(--ink)); font-size: 0.76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.library-template-copy h3 { margin: 6px 0 7px; font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 400; line-height: 1.12; }
.library-template-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.58; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.library-template-details { display: flex; flex-wrap: wrap; gap: 6px 13px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 15px; color: var(--ink-muted); font-size: 0.76rem; }
.library-template-details span { display: inline-flex; align-items: center; gap: 6px; }
.library-template-details span::before { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--template-color) 72%, var(--ink)); content: ""; }
.template-add-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid color-mix(in srgb, var(--template-color) 30%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--template-soft) 55%, var(--surface)); color: var(--ink); padding: 0 10px 0 13px; font-size: 0.80rem; font-weight: 700; cursor: pointer; }
.template-add-button i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: var(--surface); color: color-mix(in srgb, var(--template-color) 78%, var(--ink)); font-size: 0.94rem; font-style: normal; }
.template-add-button:hover { border-color: var(--template-color); }
.template-add-button:disabled { cursor: not-allowed; opacity: .5; }
.template-empty-state { grid-column: 1 / -1; display: grid; min-height: 310px; place-items: center; align-content: center; border: 1px dashed var(--border-strong); border-radius: 24px; background: var(--surface); padding: 30px; text-align: center; }
.template-empty-state > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; }
.template-empty-state h3 { margin: 15px 0 5px; font-size: 1.25rem; }
.template-empty-state p { margin: 0 0 17px; color: var(--ink-muted); font-size: 0.86rem; }

.journal-editor {
  padding: clamp(22px, 4vw, 34px);
}

.journal-editor h2 {
  margin: 0 0 6px;
  font-size: 1.55rem;
}

.journal-editor > p {
  margin: 0 0 24px;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.field-group {
  display: grid;
  gap: 8px;
}

.field-group + .field-group { margin-top: 19px; }

.field-label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.field-hint {
  color: var(--ink-muted);
  font-size: 0.80rem;
}

.emotion-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emotion-chip {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 7px 12px;
  font-size: 0.86rem;
  font-weight: 600;
}

.emotion-chip.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.privacy-note {
  color: var(--ink-muted);
  font-size: 0.80rem;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-card {
  position: relative;
  padding: 20px 22px;
}

.timeline-date {
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-mood {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 1.25rem;
}

.timeline-card blockquote {
  margin: 13px 0 0;
  color: var(--ink);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.55;
}

.timeline-card p {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

/* Private journal */
.journal-page { width: min(1180px, 100%); }

.journal-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 26px;
}

.journal-date-ribbon {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  padding: 7px;
}

.journal-date-chip {
  position: relative;
  display: grid;
  min-height: 68px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.journal-date-chip:hover { background: var(--surface-2); transform: translateY(-1px); }
.journal-date-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.journal-date-chip small { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; }
.journal-date-chip strong { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.journal-date-chip > span { position: absolute; right: 7px; bottom: 5px; color: var(--accent-strong); font-size: 0.76rem; }
.journal-date-chip.has-entry:not(.is-selected)::after { position: absolute; bottom: 7px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); content: ""; transform: translateX(-50%); }
.journal-date-chip.has-entry > span:not(:empty) + * { display: none; }

.journal-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 345px);
  align-items: start;
  gap: 14px;
}

.journal-sheet {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(90deg, transparent 57px, color-mix(in srgb, var(--accent) 13%, transparent) 58px, transparent 59px),
    repeating-linear-gradient(180deg, var(--surface) 0, var(--surface) 34px, color-mix(in srgb, var(--border) 55%, transparent) 35px);
  padding: clamp(24px, 4vw, 38px);
}

.journal-sheet::after { position: absolute; top: 25px; right: 28px; width: 66px; height: 66px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.journal-sheet-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.journal-entry-kicker { color: var(--accent-strong); font-size: 0.76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.journal-sheet-header h2 { margin: 7px 0 5px; font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 300; letter-spacing: -.035em; }
.journal-sheet-header p { margin: 0; color: var(--ink-muted); font-size: 0.86rem; }
.journal-page-number { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border: 1px solid var(--accent-mid); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.55rem; }

.journal-prompt-group { position: relative; z-index: 1; padding: 22px 0; }
.journal-prompt-group + .journal-prompt-group { border-top: 1px solid var(--border); }
.journal-prompt-label { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.journal-prompt-label > span { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; min-height: 27px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 0.80rem; }
.journal-prompt-label > div:not(.gratitude-mode) { min-width: 0; }
.journal-prompt-label strong,
.journal-prompt-label small { display: block; }
.journal-prompt-label strong { font-size: 0.86rem; }
.journal-prompt-label small { margin-top: 3px; color: var(--ink-muted); font-size: 0.80rem; }
.journal-mood-row { flex-wrap: nowrap; padding-left: 39px; }
.journal-mood-row .mood-button { width: min(92px, 18%); min-width: 0; min-height: 67px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.journal-mood-row .mood-face { font-size: 1.5rem; }
.journal-emotions { padding-left: 39px; }
.journal-emotions .emotion-chip { min-height: 36px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); }

.gratitude-mode { display: flex; gap: 3px; margin-left: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 3px; }
.gratitude-mode button { min-height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-muted); padding: 4px 9px; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.gratitude-mode button.is-selected { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 5px color-mix(in srgb, var(--ink) 10%, transparent); }

.journal-writing-field { position: relative; display: block; padding-left: 39px; }
.journal-writing-field .input,
.journal-writing-field .textarea { width: 100%; border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.journal-writing-field .input { min-height: 52px; padding-right: 58px; }
.journal-writing-field > small { position: absolute; right: 12px; bottom: 9px; color: var(--ink-subtle); font-size: 0.76rem; }
.journal-note-field .textarea { min-height: 155px; padding-bottom: 28px; line-height: 1.75; }

.gratitude-three { display: grid; gap: 8px; padding-left: 39px; }
.gratitude-three label { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.gratitude-three label > span { display: grid; height: 100%; place-items: center; border-right: 1px solid var(--border); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.gratitude-three .input { border: 0; background: transparent; }

.journal-save-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 7px; border-top: 1px solid var(--border); padding-top: 22px; }
.journal-save-bar > div { display: flex; gap: 7px; }

.journal-overview { display: grid; gap: 12px; }
.journal-calendar-card,
.journal-month-summary { padding: 21px; }
.journal-calendar-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.journal-calendar-card h2 { margin: 4px 0 0; font-size: 1.35rem; font-weight: 400; }
.journal-calendar-card > header > span { border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); padding: 6px 8px; color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; }
.mood-calendar-weekdays,
.mood-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mood-calendar-weekdays { margin-bottom: 5px; }
.mood-calendar-weekdays span { color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; text-align: center; }
.mood-calendar-day,
.mood-calendar-blank { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-muted); font-size: 0.76rem; }
button.mood-calendar-day { cursor: pointer; }
.mood-calendar-day.has-entry { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); }
.mood-calendar-day.is-selected { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.mood-calendar-day.is-future { opacity: .32; }
.mood-calendar-day > span { position: absolute; top: 4px; left: 5px; font-size: 0.72rem; }
.mood-calendar-day > i { font-size: 0.86rem; font-style: normal; }
.mood-calendar-day.mood-1 { background: color-mix(in srgb, var(--surface-3) 70%, var(--surface)); }
.mood-calendar-day.mood-2 { background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); }
.mood-calendar-day.mood-3 { background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface)); }
.mood-calendar-day.mood-4 { background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface)); }
.mood-calendar-day.mood-5 { border-color: color-mix(in srgb, var(--accent) 54%, var(--border)); background: var(--accent-soft); }
.mood-calendar-legend { display: flex; justify-content: center; gap: 12px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.mood-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-muted); font-size: 0.72rem; }
.mood-calendar-legend i { width: 8px; height: 8px; border-radius: 3px; background: var(--surface-3); }
.mood-calendar-legend i.mood-3 { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.mood-calendar-legend i.mood-5 { background: var(--accent); }

.journal-month-summary { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface)); }
.journal-summary-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; margin-top: 15px; }
.journal-summary-main > span { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid var(--accent-mid); border-radius: 16px; background: var(--surface); color: var(--accent-strong); font-size: 1.3rem; }
.journal-summary-main strong,
.journal-summary-main small { display: block; }
.journal-summary-main strong { font-size: 0.80rem; }
.journal-summary-main small { margin-top: 3px; color: var(--ink-muted); font-size: 0.76rem; }
.journal-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
.journal-summary-grid > span { border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--surface) 76%, transparent); padding: 11px; }
.journal-summary-grid strong,
.journal-summary-grid small { display: block; }
.journal-summary-grid strong { overflow: hidden; font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.journal-summary-grid small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; }
.journal-summary-note { margin: 15px 0 0; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); padding-top: 13px; color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 0.86rem; font-style: italic; line-height: 1.55; }

.journal-history { margin-top: clamp(46px, 7vw, 76px); }
.journal-history > .section-heading { align-items: end; }
.journal-month-group + .journal-month-group { margin-top: 34px; }
.journal-month-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.journal-month-heading::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.journal-month-heading h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 400; }
.journal-month-heading span { order: 3; color: var(--ink-muted); font-size: 0.76rem; }
.journal-history .timeline { gap: 8px; }
.journal-history .timeline-card { overflow: hidden; padding: 0; box-shadow: none; transition: border-color 160ms ease, transform 160ms ease; }
.journal-history .timeline-card.is-selected { border-color: var(--accent); }
.journal-history .timeline-card > button,
.timeline-static { display: grid; grid-template-columns: 57px minmax(0, 1fr) 64px auto; align-items: center; width: 100%; min-height: 116px; gap: 16px; border: 0; background: transparent; color: var(--ink); padding: 15px 17px; text-align: left; }
.journal-history .timeline-card > button { cursor: pointer; }
.journal-history .timeline-card > button:hover { background: color-mix(in srgb, var(--accent-soft) 28%, transparent); }
.journal-history .timeline-date { display: grid; width: 50px; height: 67px; place-items: center; align-content: center; border-right: 1px solid var(--border); color: var(--ink); letter-spacing: 0; text-align: center; }
.journal-history .timeline-date strong { font-family: "Fraunces", Georgia, serif; font-size: 1.55rem; font-weight: 400; line-height: 1; }
.journal-history .timeline-date small { margin-top: 5px; color: var(--ink-muted); font-size: 0.72rem; text-transform: uppercase; }
.timeline-copy { min-width: 0; }
.timeline-copy > span { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.journal-history .timeline-card blockquote { display: -webkit-box; overflow: hidden; margin: 7px 0 0; font-size: 1.00rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.journal-history .timeline-card p { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.journal-history .timeline-card p i { border-radius: 99px; background: var(--surface-2); color: var(--ink-muted); padding: 4px 7px; font-size: 0.72rem; font-style: normal; }
.journal-history .timeline-mood { position: static; display: grid; justify-items: center; gap: 3px; font-size: 1.25rem; }
.journal-history .timeline-mood small { color: var(--ink-muted); font-size: 0.72rem; font-weight: 600; }
.journal-history .timeline-mood.is-empty { color: var(--ink-subtle); }
.timeline-edit-note { color: var(--accent-strong); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.timeline-static .timeline-edit-note { color: var(--ink-subtle); }
.journal-empty { min-height: 300px; }

.streak-system {
  display: grid;
  gap: 16px;
  margin-bottom: 34px;
}

.streak-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, .42fr);
  align-items: center;
  gap: clamp(22px, 4vw, 42px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  padding: clamp(24px, 4vw, 38px);
}

.streak-hero::after {
  position: absolute;
  right: -80px;
  bottom: -125px;
  width: 250px;
  height: 250px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.streak-orbit {
  position: relative;
  display: grid;
  width: 124px;
  height: 124px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
  box-shadow: inset 0 0 0 11px var(--surface), inset 0 0 0 12px var(--border);
}

.streak-orbit::before,
.streak-orbit::after,
.streak-orbit i::before,
.streak-orbit i::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.streak-orbit::before { top: -4px; }
.streak-orbit::after { right: -4px; }
.streak-orbit i::before { bottom: -4px; left: 58px; }
.streak-orbit i::after { top: 58px; left: -4px; }
.streak-orbit > span { font-family: "Fraunces", Georgia, serif; font-size: 3.2rem; font-weight: 300; letter-spacing: -.06em; }

.streak-hero-copy h2 { margin: 3px 0 8px; font-size: clamp(1.75rem, 3.6vw, 2.8rem); font-weight: 300; letter-spacing: -.035em; }
.streak-hero-copy > p:last-of-type { max-width: 590px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.65; }

.streak-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
}

.streak-facts span { color: var(--ink-muted); font-size: 0.80rem; }
.streak-facts strong { margin-right: 3px; color: var(--ink); font-size: 0.94rem; font-variant-numeric: tabular-nums; }

.level-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.level-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: var(--ink);
  color: var(--surface);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
}

.level-card small,
.level-card strong { display: block; }
.level-card small { color: var(--ink-muted); font-size: 0.80rem; }
.level-card strong { margin-top: 2px; font-size: 0.94rem; }
.level-track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.level-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 650ms cubic-bezier(.22,1,.36,1); }

.streak-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.streak-tool { min-width: 0; padding: 24px; }
.tool-heading { display: flex; align-items: center; gap: 13px; }
.tool-heading .eyebrow { margin-bottom: 3px; }
.tool-heading h3 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.94rem; font-weight: 700; }
.tool-icon { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); }
.streak-tool > p { margin: 15px 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.6; }
.streak-tool > small { display: block; margin-top: 10px; color: var(--ink-subtle); font-size: 0.80rem; }

.freeze-bank { display: grid; grid-template-columns: repeat(4, 38px); gap: 7px; }
.freeze-bank span { display: grid; height: 38px; place-items: center; border: 1px dashed var(--border-strong); border-radius: 13px; color: var(--ink-subtle); font-size: 0.86rem; }
.freeze-bank span.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); }

.vacation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 8px;
}

.vacation-form label { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vacation-form .input { min-height: 38px; margin-top: 5px; border-radius: 11px; padding: 7px 9px; font-size: 0.80rem; }

.vacation-list { display: grid; gap: 6px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.vacation-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vacation-list strong,
.vacation-list small { display: block; }
.vacation-list strong { font-size: 0.80rem; }
.vacation-list small { margin-top: 2px; color: var(--ink-muted); font-size: 0.76rem; }
.vacation-list .icon-button { width: 32px; height: 32px; }

.badge-shelf { padding: 24px; }
.badge-shelf .section-heading { align-items: center; }
.badge-count { border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); padding: 6px 9px; color: var(--ink-muted); font-size: 0.80rem; font-weight: 700; white-space: nowrap; }
.badge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.badge-tile { min-width: 0; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-2); padding: 15px; opacity: .58; }
.badge-tile.is-earned { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); opacity: 1; }
.badge-medallion { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 12px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 0.86rem; filter: grayscale(1); }
.badge-tile.is-earned .badge-medallion { border-color: var(--accent); background: var(--surface); color: var(--accent-strong); filter: none; box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 14%, transparent); }
.badge-tile strong,
.badge-tile small { display: block; }
.badge-tile strong { overflow: hidden; font-size: 0.80rem; text-overflow: ellipsis; white-space: nowrap; }
.badge-tile small { min-height: 17px; margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; }
.badge-progress { height: 3px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.badge-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent-mid); }
.badge-heading-actions { display: flex; align-items: center; gap: 8px; }

.rewards-page { padding-bottom: 30px; }
.rewards-header { margin-bottom: 28px; }

.reward-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, .36fr);
  align-items: center;
  gap: clamp(24px, 4vw, 46px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  padding: clamp(26px, 4vw, 42px);
}

.reward-hero::before {
  position: absolute;
  top: -135px;
  right: -80px;
  width: 310px;
  height: 310px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent-soft) 34%, transparent), 0 0 0 68px color-mix(in srgb, var(--accent-soft) 20%, transparent);
  content: "";
}

.reward-level-seal {
  position: relative;
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
  align-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 9px var(--surface), inset 0 0 0 10px var(--border);
}

.reward-level-seal::before,
.reward-level-seal::after {
  position: absolute;
  width: 18px;
  height: 34px;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  content: "";
}

.reward-level-seal::before { top: -13px; transform: rotate(-25deg); }
.reward-level-seal::after { bottom: -13px; transform: rotate(25deg); }
.reward-level-seal span { font-family: "Fraunces", Georgia, serif; font-size: 3.05rem; font-weight: 300; letter-spacing: -.06em; line-height: 1; }
.reward-level-seal i { margin-top: 6px; color: var(--accent-strong); font-size: 0.76rem; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.reward-hero-copy h2 { margin: 4px 0 9px; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; letter-spacing: -.035em; }
.reward-hero-copy > p { max-width: 620px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.65; }
.reward-xp-line { display: grid; gap: 8px; margin-top: 20px; }
.reward-xp-line > div:first-child { display: flex; justify-content: space-between; gap: 20px; }
.reward-xp-line strong { font-size: 0.86rem; }
.reward-xp-line span { color: var(--ink-muted); font-size: 0.80rem; }

.next-reward {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.next-reward > span:first-child { color: var(--ink-muted); font-size: 0.76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.next-reward strong { margin-top: 8px; font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 400; }
.next-reward small { margin-top: 2px; color: var(--ink-muted); font-size: 0.80rem; }
.next-creature-lock { display: grid; width: 46px; height: 46px; place-items: center; margin-top: 17px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; box-shadow: inset 0 0 0 6px var(--surface); }
.next-creature-lock.is-complete { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

.reward-section { margin-top: 40px; }
.reward-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reward-theme-card { position: relative; display: grid; min-width: 0; overflow: hidden; padding: 14px; transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease; }
.reward-theme-card:hover:not(.is-locked) { transform: translateY(-3px); border-color: var(--accent-mid); }
.reward-theme-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.reward-theme-card.is-locked { opacity: .6; }

.theme-miniature {
  --preview-bg: #fbf8f6;
  --preview-surface: #fffdfb;
  --preview-soft: #f7e7e9;
  --preview-accent: #c97c87;
  display: grid;
  grid-template-columns: 32% 1fr;
  height: 136px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--preview-accent) 25%, #d9d3cf);
  border-radius: 15px;
  background: var(--preview-bg);
}

.theme-preview-ink .theme-miniature { --preview-bg:#f5f7f8; --preview-surface:#fdfefe; --preview-soft:#e3e9ee; --preview-accent:#5b6b7c; }
.theme-preview-sage .theme-miniature { --preview-bg:#f7f8f3; --preview-surface:#fffefa; --preview-soft:#e5eee1; --preview-accent:#7e9b78; }
.theme-preview-sand .theme-miniature { --preview-bg:#faf7f1; --preview-surface:#fffdf8; --preview-soft:#f2e4d3; --preview-accent:#aa7c52; }
.theme-preview-lilac .theme-miniature { --preview-bg:#f9f7fb; --preview-surface:#fffdfd; --preview-soft:#eee6f5; --preview-accent:#8a78aa; }
.theme-preview-slate .theme-miniature { --preview-bg:#f4f7f7; --preview-surface:#fcfefe; --preview-soft:#e0ebec; --preview-accent:#54717a; }
.mini-rail { display: grid; align-content: start; gap: 8px; border-right: 1px solid color-mix(in srgb, var(--preview-accent) 16%, #ddd); background: var(--preview-soft); padding: 20px 10px; }
.mini-rail i { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--preview-accent) 28%, var(--preview-surface)); }
.mini-rail i:first-child { width: 70%; background: var(--preview-accent); }
.mini-page { display: grid; align-content: start; gap: 9px; background: var(--preview-bg); padding: 22px 15px; }
.mini-page b { display: block; width: 62%; height: 15px; border-radius: 5px; background: var(--preview-accent); opacity: .74; }
.mini-page i { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--preview-accent) 18%, var(--preview-surface)); }
.mini-page i:nth-of-type(2) { width: 78%; }
.mini-page em { display: block; height: 36px; margin-top: 3px; border: 1px solid color-mix(in srgb, var(--preview-accent) 24%, #ddd); border-radius: 9px; background: var(--preview-surface); }

.reward-theme-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 14px 2px; }
.theme-reward-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface-2); }
.reward-theme-copy h3 { margin: 0; font-size: 0.94rem; }
.reward-theme-copy p { margin: 3px 0 0; color: var(--ink-muted); font-size: 0.80rem; }
.reward-theme-card .button { width: 100%; }

.badge-vault { padding: 26px; }
.reward-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.reward-badge { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-2); padding: 14px; opacity: .58; }
.reward-badge.is-earned { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); opacity: 1; }
.reward-badge-medal { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: 0.86rem; filter: grayscale(1); }
.reward-badge.is-earned .reward-badge-medal { border-color: var(--accent); color: var(--accent-strong); filter: none; box-shadow: inset 0 0 0 5px var(--accent-soft); }
.reward-badge strong { display: block; overflow: hidden; font-size: 0.80rem; text-overflow: ellipsis; white-space: nowrap; }
.reward-badge p { min-height: 30px; margin: 3px 0 2px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.35; }
.reward-badge small { color: var(--ink-subtle); font-size: 0.76rem; }
.reward-badge .badge-progress { margin-top: 7px; }

.creature-vault { overflow: hidden; padding: clamp(22px, 3vw, 34px); }
.creature-vault > .section-heading { align-items: flex-start; margin-bottom: 25px; }
.creature-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.creature-level { position: relative; min-width: 0; min-height: 232px; overflow: hidden; border: 1px solid var(--border); border-radius: 21px; background: color-mix(in srgb, var(--accent-soft) 20%, var(--surface-2)); }
.creature-level::before { position: absolute; top: 24px; left: 50%; width: 150px; height: 150px; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 55%, transparent); content: ""; transform: translateX(-50%); }
.creature-stage { position: absolute; inset: 0; }
.creature-stage > img { position: absolute; z-index: 1; bottom: 61px; left: 50%; width: min(82%, 174px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 13px color-mix(in srgb, var(--ink) 14%, transparent)); transform: translateX(-50%); transition: transform 180ms ease; }
.creature-level.is-unlocked:hover .creature-stage > img { transform: translateX(-50%) translateY(-3px); }
.creature-level-box { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 2; display: grid; min-height: 80px; align-content: center; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft)); box-shadow: 0 -8px 22px color-mix(in srgb, var(--surface) 62%, transparent); padding: 12px 14px; }
.creature-level-box > span { color: var(--accent-strong); font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.creature-level-box strong { margin-top: 2px; font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; font-weight: 400; line-height: 1.05; }
.creature-level-box small { margin-top: 4px; color: var(--ink-muted); font-size: 0.72rem; }
.creature-level.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 9px 24px color-mix(in srgb, var(--accent) 13%, transparent); }
.creature-level.is-current .creature-level-box { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface)); }
.creature-level.is-locked { background: color-mix(in srgb, var(--surface-3) 48%, var(--surface)); }
.creature-level.is-locked::before { border-style: dashed; border-color: var(--border); background: transparent; }
.creature-secret { position: absolute; top: 70px; left: 50%; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; transform: translateX(-50%); }
.creature-level.is-locked .creature-level-box { border-color: var(--border); background: var(--surface-2); }
.creature-level.is-locked .creature-level-box > span { color: var(--ink-subtle); }

.insights-page { width: min(1220px, 100%); }
.insights-page-header { align-items: flex-end; }

.insight-coverage-seal {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 9px;
  min-width: 132px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  padding: 9px 15px 9px 10px;
}
.insight-coverage-seal > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--accent-mid); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; }
.insight-coverage-seal small { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; }

.insight-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) minmax(190px, .42fr);
  align-items: center;
  gap: clamp(25px, 4vw, 46px);
  overflow: hidden;
  margin-bottom: clamp(42px, 6vw, 68px);
  border-color: color-mix(in srgb, var(--accent) 31%, var(--border));
  padding: clamp(25px, 4vw, 40px);
}
.insight-hero::after { position: absolute; right: -86px; bottom: -142px; width: 260px; height: 260px; border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.insight-ring-wrap { display: grid; justify-items: center; gap: 7px; }
.insight-ring-wrap .progress-ring { position: relative; top: auto; right: auto; }
.insight-ring-wrap > span { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.consistency-ring { width: 154px; height: 154px; }
.consistency-ring .ring-label strong { font-size: 2.55rem; }

.insight-copy { min-width: 0; }
.insight-copy h2 { max-width: 610px; margin: 3px 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.75rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.insight-copy > p:last-child { max-width: 620px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.7; }
.insight-copy > p strong { color: var(--ink); }

.insight-comparison { position: relative; z-index: 1; border-left: 1px solid var(--border); padding: 7px 0 7px 24px; }
.insight-comparison small,
.insight-comparison strong,
.insight-comparison span { display: block; }
.insight-comparison small { color: var(--ink-subtle); font-size: 0.76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.insight-comparison strong { margin-top: 8px; color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 400; line-height: 1.3; }
.insight-comparison span { margin-top: 7px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.5; }
.insight-comparison.is-up strong { color: var(--accent-strong); }

.insight-observations { margin-bottom: 16px; }
.insight-observations > .section-heading { margin-bottom: 15px; }
.evidence-chip,
.chart-callout { border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); padding: 7px 10px; color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.observation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.observation-grid.has-one { grid-template-columns: minmax(0, 1fr); }
.observation-card { position: relative; display: grid; min-height: 205px; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 14px; overflow: hidden; padding: 22px; box-shadow: none; }
.observation-card::after { position: absolute; right: -26px; bottom: -34px; width: 90px; height: 90px; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 50%; content: ""; }
.observation-card.tone-gentle { border-color: color-mix(in srgb, #b98961 30%, var(--border)); background: color-mix(in srgb, #f3e7dc 24%, var(--surface)); }
.observation-card.tone-positive { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)); }
.observation-card.tone-evidence { border-style: dashed; }
.observation-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 0.94rem; }
.observation-card h3 { margin: 6px 0 7px; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 400; line-height: 1.2; }
.observation-card p:not(.eyebrow) { margin: 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.6; }
.observation-metric { grid-column: 2; align-self: end; margin-top: 17px; color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 400; }

.year-card { min-width: 0; margin-bottom: 16px; padding: clamp(21px, 3vw, 29px); }
.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.chart-heading h2 { margin: 3px 0 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; }
.chart-heading p:not(.eyebrow) { max-width: 670px; margin: 5px 0 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.55; }
.heat-legend { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; padding-top: 8px; }
.heat-legend > span { color: var(--ink-subtle); font-size: 0.72rem; }
.heat-legend > span:nth-last-child(2) { margin-left: 6px; }
.heat-legend .heat-cell { display: inline-block; }

.heatmap-wrap { overflow-x: auto; padding: 9px 2px 8px; scrollbar-width: thin; }
.year-heatmap-wrap { margin-top: 23px; }
.year-heatmap-layout { display: grid; width: max-content; grid-template-columns: 27px auto; gap: 8px; }
.heatmap-weekdays { display: grid; height: 95px; align-content: space-between; padding-top: 21px; padding-bottom: 16px; color: var(--ink-subtle); font-size: 0.72rem; }
.year-heatmap-core { min-width: 739px; }
.heatmap-months { position: relative; display: grid; height: 18px; grid-template-columns: repeat(53, 11px); column-gap: 3px; color: var(--ink-muted); font-size: 0.72rem; }
.heatmap-months > span { grid-column: var(--month-column); white-space: nowrap; }
.heatmap { display: grid; width: max-content; grid-auto-flow: column; grid-auto-columns: 11px; grid-template-rows: repeat(7, 11px); gap: 3px; }
.heat-cell { width: 11px; height: 11px; border: 1px solid transparent; border-radius: 3px; background: var(--surface-2); }
.heat-cell.level-1 { background: color-mix(in srgb, var(--accent) 24%, var(--surface-2)); }
.heat-cell.level-2 { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.heat-cell.level-3 { background: color-mix(in srgb, var(--accent) 68%, var(--surface-2)); }
.heat-cell.level-4 { background: var(--accent); }
.heat-cell.is-protected { border-color: var(--accent-mid); background: transparent; }
.heat-cell.is-future { border-color: color-mix(in srgb, var(--border) 55%, transparent); background: transparent; opacity: .42; }
.heatmap-note { display: flex; align-items: center; gap: 7px; margin: 13px 0 0 35px; color: var(--ink-subtle); font-size: 0.76rem; }
.heatmap-note > span { width: 20px; height: 1px; background: var(--border-strong); }

.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.chart-card { min-width: 0; padding: clamp(21px, 3vw, 27px); }
.weekday-bars { display: grid; height: 208px; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 9px; padding-top: 26px; }
.weekday-bar { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; align-items: end; gap: 7px; text-align: center; }
.bar-value { color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; }
.bar-track { position: relative; width: min(30px, 75%); height: 100%; justify-self: center; overflow: hidden; border-radius: 9px 9px 4px 4px; background: var(--surface-2); }
.bar-fill { position: absolute; inset: auto 0 0; min-height: 3px; border-radius: inherit; background: var(--accent-mid); transition: height 650ms cubic-bezier(.22, 1, .36, 1); }
.weekday-bar.is-best .bar-fill { background: var(--accent); }
.weekday-bar.is-best .bar-value,
.weekday-bar.is-best .weekday-label { color: var(--accent-strong); }
.weekday-label { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; }

.mood-line-wrap { display: grid; min-height: 208px; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 7px; padding-top: 22px; }
.mood-scale { display: flex; grid-row: 1; align-items: center; justify-content: space-between; flex-direction: column; padding-block: 3px 11px; color: var(--ink-subtle); font-size: 0.80rem; }
.mood-line { width: 100%; height: 165px; overflow: visible; }
.mood-line line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.mood-line polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mood-line circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.mood-axis { display: flex; grid-column: 2; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 7px; color: var(--ink-subtle); font-size: 0.72rem; }
.chart-empty { display: grid; min-height: 210px; place-items: center; align-content: center; padding: 25px; text-align: center; }
.chart-empty > span { color: var(--accent-mid); font-family: "Fraunces", Georgia, serif; font-size: 2rem; }
.chart-empty strong { margin-top: 7px; font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.chart-empty p { max-width: 340px; margin: 6px 0 13px; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.55; }

.habit-progress-card { margin-top: 0; }
.habit-table-wrap { overflow-x: auto; margin-top: 17px; }
.habit-insight-table { width: 100%; min-width: 810px; border-collapse: collapse; }
.habit-insight-table th,
.habit-insight-table td { border-bottom: 1px solid var(--border); padding: 14px 10px; color: var(--ink-muted); font-size: 0.80rem; text-align: left; vertical-align: middle; }
.habit-insight-table th { color: var(--ink-subtle); font-size: 0.76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.habit-insight-table td:not(:first-child),
.habit-insight-table th:not(:first-child) { text-align: right; }
.habit-insight-table tr:last-child td { border-bottom: 0; }
.habit-insight-name { display: flex; min-width: 190px; align-items: center; gap: 10px; color: var(--ink); text-align: left; }
.habit-insight-name > i { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 1.00rem; font-style: normal; }
.habit-insight-name strong,
.habit-insight-name small { display: block; }
.habit-insight-name strong { overflow: hidden; max-width: 200px; font-size: 0.80rem; text-overflow: ellipsis; white-space: nowrap; }
.habit-insight-name small { margin-top: 2px; color: var(--ink-subtle); font-size: 0.72rem; }
.habit-trend { display: inline-flex; min-width: 83px; align-items: center; justify-content: flex-end; gap: 6px; text-align: left; }
.habit-trend > b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--ink-muted); }
.habit-trend.is-up > b { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); }
.habit-trend.is-down > b { border-color: color-mix(in srgb, #b98961 42%, var(--border)); color: #9a6845; }
.habit-trend > span,
.habit-trend small { display: block; }
.habit-trend > span { color: var(--ink); font-size: 0.76rem; font-weight: 700; }
.habit-trend small { margin-top: 1px; color: var(--ink-subtle); font-size: 0.72rem; font-weight: 500; white-space: nowrap; }
.table-percent { display: inline-grid; min-width: 72px; justify-items: end; gap: 5px; }
.table-percent > b { color: var(--ink); font-size: 0.80rem; }
.table-percent > i { display: block; width: 68px; height: 3px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.table-percent > i > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.table-empty { padding: 30px; color: var(--ink-muted); text-align: center; }
.insight-support { margin-top: clamp(44px, 7vw, 76px); }
.insight-support > .section-heading { margin-bottom: 15px; }
.insight-support .streak-system { margin-bottom: 0; }

.today-header-actions { display: flex; align-items: center; gap: 12px; }
.reminder-bell { position: relative; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink-muted); cursor: pointer; font-family: "Fraunces", Georgia, serif; font-size: 1rem; transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.reminder-bell:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); }
.reminder-bell.has-unread { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.reminder-bell > b { position: absolute; top: -4px; right: -2px; display: grid; min-width: 17px; height: 17px; place-items: center; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.72rem; }

.you-page { width: min(1180px, 100%); }
.you-reminder-seal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-width: 165px; border: 1px solid color-mix(in srgb, var(--accent) 27%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); color: var(--ink); padding: 10px 14px 10px 10px; text-align: left; cursor: pointer; }
.you-reminder-seal > span { grid-row: 1 / span 2; display: grid; width: 37px; height: 37px; place-items: center; margin-right: 10px; border: 1px solid var(--accent-mid); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.you-reminder-seal strong,
.you-reminder-seal small { display: block; }
.you-reminder-seal strong { font-size: 0.80rem; }
.you-reminder-seal small { margin-top: 2px; color: var(--ink-muted); font-size: 0.72rem; }

.reminder-settings { grid-column: 1 / -1; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); padding: 0; }
.reminder-settings > form { padding: clamp(23px, 4vw, 36px); }
.reminder-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 38px); padding-bottom: 29px; }
.reminder-hero::after { position: absolute; right: 92px; bottom: 0; left: 0; height: 1px; background: var(--border); content: ""; }
.reminder-orbit { position: relative; display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid var(--accent-mid); border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 9px var(--surface); color: var(--accent-strong); }
.reminder-orbit::before,
.reminder-orbit::after { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); content: ""; }
.reminder-orbit::before { top: -3px; }
.reminder-orbit::after { right: -3px; }
.reminder-orbit > span { font-family: "Fraunces", Georgia, serif; font-size: 1.65rem; }
.reminder-orbit.is-quiet { border-color: var(--border-strong); background: var(--surface-2); color: var(--ink-muted); }
.reminder-orbit.is-quiet::before,
.reminder-orbit.is-quiet::after { background: var(--ink-subtle); }
.reminder-hero-copy h2 { margin: 2px 0 7px; font-size: clamp(1.8rem, 3.4vw, 2.65rem); font-weight: 300; letter-spacing: -.035em; }
.reminder-hero-copy > p:last-of-type { max-width: 660px; margin: 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.65; }
.reminder-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin-top: 14px; }
.reminder-next > span { color: var(--ink-subtle); font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reminder-next > strong { font-size: 0.80rem; }
.reminder-next > small { color: var(--accent-strong); font-size: 0.76rem; font-weight: 700; }

.master-reminder-switch { display: grid; width: 122px; justify-items: center; cursor: pointer; text-align: center; }
.master-reminder-switch input,
.mini-switch input { position: absolute; opacity: 0; pointer-events: none; }
.master-reminder-switch > span { position: relative; display: block; width: 64px; height: 34px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface-2); transition: background 180ms ease, border-color 180ms ease; }
.master-reminder-switch > span > i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 7px color-mix(in srgb, var(--ink) 15%, transparent); transition: transform 180ms ease; }
.master-reminder-switch input:checked + span { border-color: var(--accent); background: var(--accent); }
.master-reminder-switch input:checked + span > i { transform: translateX(30px); }
.master-reminder-switch input:focus-visible + span,
.mini-switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.master-reminder-switch strong { margin-top: 9px; font-size: 0.76rem; }
.master-reminder-switch small { margin-top: 2px; color: var(--ink-subtle); font-size: 0.72rem; }

.reminder-budget { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 13px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 17px; background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)); padding: 15px 17px; }
.reminder-budget strong,
.reminder-budget span { display: block; }
.reminder-budget strong { margin-top: 3px; font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-weight: 400; }
.reminder-budget span { margin-top: 3px; color: var(--ink-muted); font-size: 0.76rem; }
.budget-marks { display: flex; gap: 7px; }
.budget-marks > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px dashed var(--border-strong); border-radius: 50%; color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-size: 0.80rem; font-style: normal; }
.budget-marks > i.is-used { border-style: solid; border-color: var(--accent); background: var(--surface); color: var(--accent-strong); }

.reminder-schedule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.reminder-schedule-card { position: relative; display: grid; min-height: 238px; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 17px 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-2); padding: 20px; }
.reminder-card-number { position: absolute; right: 12px; bottom: -15px; color: color-mix(in srgb, var(--accent) 13%, transparent); font-family: "Fraunces", Georgia, serif; font-size: 5rem; line-height: 1; pointer-events: none; }
.reminder-schedule-card h3 { margin: 5px 0 5px; font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; font-weight: 400; }
.reminder-schedule-card p:not(.eyebrow) { max-width: 260px; margin: 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }

.mini-switch { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; cursor: pointer; }
.mini-switch > span { position: relative; display: block; width: 39px; height: 22px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); transition: background 160ms ease; }
.mini-switch > span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-subtle); content: ""; transition: transform 160ms ease, background 160ms ease; }
.mini-switch input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.mini-switch input:checked + span::after { background: var(--accent); transform: translateX(17px); }
.mini-switch small { color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; }
.reminder-time-field { align-self: end; grid-column: 1 / -1; width: min(176px, 100%); }
.reminder-time-field > span,
.quiet-time-pair label > span,
.habit-reminder-time > span,
.habit-modal-reminder-time > span { display: block; margin-bottom: 5px; color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.reminder-time-field .input { min-height: 42px; background: var(--surface); }
.reminder-time-field .input,
.quiet-time-pair .input,
.habit-reminder-time .input,
.habit-modal-reminder-time .input { min-width: 0; padding-inline: 12px 8px; font-size: 0.92rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
input[type="time"].input::-webkit-datetime-edit { min-width: 0; padding: 0; }
input[type="time"].input::-webkit-calendar-picker-indicator { flex: 0 0 20px; margin: 0; padding: 2px; }
.quiet-time-pair { position: relative; z-index: 1; display: grid; min-width: 0; grid-column: 1 / -1; grid-template-columns: minmax(142px, 1fr) auto minmax(142px, 1fr); align-items: end; gap: 7px; }
.quiet-time-pair label { min-width: 0; }
.quiet-time-pair .input { min-height: 42px; background: var(--surface); }
.quiet-time-pair > i { margin-bottom: 13px; color: var(--ink-subtle); font-style: normal; }

.reminder-channel-section { margin-top: 27px; border-top: 1px solid var(--border); padding-top: 25px; }
.reminder-channel-section .section-heading { margin-bottom: 12px; }
.reminder-channel-section h3,
.habit-reminder-section h3,
.reminder-inbox h3 { margin: 0; font-size: 1rem; }
.reminder-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reminder-channel-card { display: grid; min-height: 130px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-2); padding: 14px; }
.reminder-channel-card.is-ready { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }
.reminder-channel-card.is-deferred { opacity: .62; }
.channel-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.reminder-channel-card strong,
.reminder-channel-card small { display: block; }
.reminder-channel-card strong { font-size: 0.76rem; }
.reminder-channel-card small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; line-height: 1.4; }
.reminder-channel-card .button { grid-column: 2 / -1; justify-self: start; }
.channel-state { border: 1px solid var(--border); border-radius: 99px; padding: 5px 7px; color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; }
.channel-state.is-on { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: var(--success-soft); color: var(--success); }
.reminder-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.reminder-settings-footer > span { color: var(--ink-muted); font-size: 0.76rem; }
.reminder-settings-footer > span strong { color: var(--ink); }

.habit-reminder-section,
.reminder-inbox { border-top: 1px solid var(--border); padding: clamp(23px, 4vw, 34px); }
.habit-reminder-section > .section-heading,
.reminder-inbox > .section-heading { margin-bottom: 15px; }
.reminder-count { border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); padding: 6px 9px; color: var(--ink-muted); font-size: 0.72rem; font-weight: 700; }
.habit-reminder-list { display: grid; gap: 7px; }
.habit-reminder-row { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(112px, .38fr) auto auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 11px 12px; }
.habit-reminder-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.habit-reminder-row > div > strong,
.habit-reminder-row > div > small { display: block; }
.habit-reminder-row > div > strong { font-size: 0.80rem; }
.habit-reminder-row > div > small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; }
.habit-reminder-time .input { min-height: 39px; background: var(--surface); }
.reminder-inbox-actions { display: flex; gap: 6px; }
.reminder-inbox-list { display: grid; gap: 6px; }
.reminder-inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); padding: 13px 15px; }
.reminder-inbox-item.is-unread { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)); }
.reminder-inbox-item > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.reminder-inbox-item strong { font-size: 0.80rem; }
.reminder-inbox-item p { margin: 3px 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.45; }
.reminder-inbox-item small { color: var(--ink-subtle); font-size: 0.72rem; }
.reminder-inbox-item > i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.reminder-empty { display: grid; min-height: 130px; place-items: center; align-content: center; color: var(--ink-muted); padding: 24px; text-align: center; }
.reminder-empty > span { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; }
.reminder-empty > strong { margin-top: 5px; color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-weight: 400; }
.reminder-empty > p { margin: 4px 0 0; font-size: 0.76rem; }

.habit-reminder-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, .32fr); align-items: center; gap: 13px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface)); padding: 14px; }
.habit-reminder-composer p { margin: 3px 0 0; color: var(--ink-muted); font-size: 0.76rem; }
.habit-modal-reminder-time .input { min-height: 42px; background: var(--surface); }
.habit-modal-reminder-time .input:disabled { opacity: .45; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-card {
  padding: 26px;
}

.settings-card.full { grid-column: 1 / -1; }
.settings-card h2 { margin: 0 0 5px; font-size: 1.3rem; }
.settings-card > p { margin: 0 0 20px; color: var(--ink-muted); font-size: 0.86rem; }

.theme-row,
.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-choice {
  display: grid;
  min-width: 92px;
  min-height: 78px;
  place-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-2);
  cursor: pointer;
  padding: 10px;
  font-size: 0.80rem;
  font-weight: 700;
}

.theme-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-choice:disabled { cursor: not-allowed; opacity: .5; }
.theme-swatch { width: 28px; height: 28px; border-radius: 50%; }
.theme-swatch.blush { background: #c97c87; }
.theme-swatch.sage { background: #7e9b78; }
.theme-swatch.ink { background: #5b6b7c; }
.theme-swatch.sand { background: #aa7c52; }
.theme-swatch.lilac { background: #8a78aa; }
.theme-swatch.slate { background: #54717a; }

.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding: 18px 0;
}

.data-row:first-of-type { border-top: 0; }
.data-row strong { display: block; font-size: 0.94rem; }
.data-row span { color: var(--ink-muted); font-size: 0.80rem; }

.you-page {
  width: 100%;
  max-width: none;
}
.settings-page-header { margin-bottom: 28px; }
.settings-directory {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: clamp(25px, 5vw, 64px);
  align-items: end;
  overflow: hidden;
  padding: clamp(27px, 4vw, 42px);
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
}
.settings-directory h2 { max-width: 430px; margin: 6px 0 10px; font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.05; }
.settings-directory p:last-child { max-width: 370px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.65; }
.settings-directory-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
.settings-directory-links button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; padding: 8px 9px; text-align: left; }
.settings-directory-links button:nth-child(odd) { border-right: 1px solid var(--border); }
.settings-directory-links button:hover { background: color-mix(in srgb, var(--accent-soft) 52%, transparent); }
.settings-directory-links span { color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 0.76rem; }
.settings-directory-links strong { font-size: 0.80rem; }
.settings-directory-links i { color: var(--ink-subtle); font-size: 0.76rem; font-style: normal; }

.settings-card { position: relative; scroll-margin-top: 24px; }
.settings-card-number { position: absolute; top: 22px; right: 24px; color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-size: 0.76rem; letter-spacing: .08em; }
.settings-profile-card,
.settings-appearance-card { min-height: 300px; }
.settings-profile-card .form-footer { margin-top: 35px; }

@media (min-width: 761px) {
  .settings-profile-card { grid-column: 1; }
  .settings-appearance-card { grid-column: 2; }
}
.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.settings-section-heading > div { position: relative; }
.settings-section-heading .settings-card-number { top: 0; right: auto; left: 0; transform: translateY(-4px); }
.settings-section-heading .eyebrow { padding-left: 31px; }
.settings-section-heading h2 { max-width: 630px; margin: 6px 0 8px; font-size: clamp(1.45rem, 3vw, 2.05rem); }
.settings-section-heading p:last-child { max-width: 700px; margin: 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.65; }
.settings-local-stamp { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 99px; background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); color: var(--accent-strong); padding: 7px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 22px; }
.settings-form-grid .field-group { margin: 0; }
.settings-choice-field { min-width: 0; margin: 0; border: 0; padding: 0; }
.settings-choice-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-choice-pair input { position: absolute; opacity: 0; pointer-events: none; }
.settings-choice-pair label { cursor: pointer; }
.settings-choice-pair label > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 54px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); padding: 8px 12px; }
.settings-choice-pair label i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 0.76rem; font-style: normal; }
.settings-choice-pair label strong { font-size: 0.76rem; }
.settings-choice-pair input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.settings-choice-field > .field-hint { display: block; margin-top: 7px; }
.settings-privacy-toggle { grid-column: 1 / -1; cursor: pointer; }
.settings-privacy-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.settings-privacy-toggle > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 78px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 14px 16px; }
.settings-privacy-toggle > span > i { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-style: normal; }
.settings-privacy-toggle b { font-weight: 400; }
.settings-privacy-toggle strong,
.settings-privacy-toggle small { display: block; }
.settings-privacy-toggle strong { font-size: 0.80rem; }
.settings-privacy-toggle small { margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }
.settings-privacy-toggle input:checked + span { border-color: color-mix(in srgb, var(--success) 46%, var(--border)); background: color-mix(in srgb, var(--success-soft) 64%, var(--surface)); }
.settings-privacy-toggle input:checked + span > i { color: var(--success); }
.settings-privacy-toggle.is-static { cursor: default; }
.settings-privacy-toggle.is-static > span { border-color: color-mix(in srgb, var(--success) 46%, var(--border)); background: color-mix(in srgb, var(--success-soft) 64%, var(--surface)); }
.settings-privacy-toggle.is-static > span > i { color: var(--success); }
.settings-save-footer > span { max-width: 460px; color: var(--ink-muted); font-size: 0.76rem; }

.settings-onboarding-card { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); align-items: center; gap: 30px; }
.settings-onboarding-card h2 { margin-top: 4px; }
.settings-onboarding-card > div:first-child > p:last-child { margin: 6px 0 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.6; }
.settings-onboarding-card .data-row { border-top: 0; border-left: 1px solid var(--border); padding: 8px 0 8px 30px; }

.export-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.export-choice-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 16px; }
.export-choice-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 0.80rem; }
.export-choice-grid strong,
.export-choice-grid small { display: block; }
.export-choice-grid strong { font-size: 0.80rem; }
.export-choice-grid small { margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.5; }
.export-choice-grid .button { grid-column: 2; justify-self: start; }
.privacy-inventory { display: grid; margin-top: 22px; border-top: 1px solid var(--border); }
.privacy-inventory > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding: 15px 2px; }
.privacy-inventory > div > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.privacy-inventory p { margin: 0; }
.privacy-inventory strong,
.privacy-inventory small { display: block; }
.privacy-inventory strong { font-size: 0.80rem; }
.privacy-inventory small { margin-top: 3px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.45; }
.privacy-inventory b { border-radius: 99px; background: var(--success-soft); color: var(--success); padding: 6px 9px; font-size: 0.72rem; }
.settings-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: 17px; background: color-mix(in srgb, var(--danger-soft) 44%, var(--surface)); padding: 18px 20px; }
.settings-danger-zone span { display: block; margin-bottom: 5px; color: var(--danger); font-size: 0.72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.settings-danger-zone strong { font-family: "Fraunces", Georgia, serif; font-size: 1.00rem; font-weight: 400; }
.settings-danger-zone p { max-width: 720px; margin: 5px 0 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.5; }

.settings-about-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 17px 25px; align-items: start; }
.settings-about-card > .settings-card-number { position: static; align-self: start; padding-top: 3px; }
.settings-about-card h2 { margin-top: 3px; }
.settings-about-card > div > p:last-child { max-width: 850px; margin: 7px 0 0; color: var(--ink-muted); font-size: 0.80rem; line-height: 1.65; }
.reset-impact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.reset-impact-list span { border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--danger-soft) 36%, var(--surface)); color: var(--ink-muted); padding: 10px 12px; font-size: 0.76rem; }

.today-phase-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 99px; background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface)); color: var(--ink); padding: 6px 11px 6px 7px; cursor: pointer; }
.today-phase-pill > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.today-phase-pill strong { font-size: 0.76rem; }
.today-phase-pill small { color: var(--ink-muted); font-size: 0.72rem; }
.today-phase-pill:hover { border-color: var(--accent); transform: translateY(-1px); }

.cycle-page { width: min(1180px, 100%); --cycle-rose: color-mix(in srgb, #c98594 72%, var(--accent)); --cycle-wash: color-mix(in srgb, #e8c9d0 30%, var(--surface)); }
.cycle-consent-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 58px); max-width: 970px; margin: 12px auto 52px; }
.cycle-consent-hero .page-title { max-width: 760px; margin-top: 7px; font-size: clamp(3rem, 7.2vw, 6.5rem); line-height: .88; }
.cycle-consent-hero > div:last-child > p:last-child { max-width: 630px; margin: 20px 0 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.75; }
.cycle-consent-mark { position: relative; display: grid; width: clamp(120px, 17vw, 190px); height: clamp(120px, 17vw, 190px); place-items: center; border: 1px solid color-mix(in srgb, var(--cycle-rose) 60%, var(--border)); border-radius: 50%; background: var(--cycle-wash); box-shadow: inset 0 0 0 17px var(--surface); color: var(--cycle-rose); }
.cycle-consent-mark > span { z-index: 2; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.7rem, 6vw, 4.8rem); }
.cycle-consent-mark > i,
.cycle-consent-mark > b { position: absolute; border: 1px solid var(--cycle-rose); border-radius: 50%; content: ""; }
.cycle-consent-mark > i { width: 11px; height: 11px; transform: translate(69px, -38px); background: var(--surface); }
.cycle-consent-mark > b { width: 6px; height: 6px; transform: translate(-61px, 52px); background: var(--cycle-rose); }
.cycle-consent-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 18px; align-items: stretch; }
.cycle-trust-panel { padding: clamp(25px, 4vw, 40px); background: color-mix(in srgb, var(--surface) 76%, var(--cycle-wash)); }
.cycle-trust-panel h2 { max-width: 400px; margin: 8px 0 29px; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; line-height: 1.05; }
.trust-list { display: grid; gap: 0; }
.trust-list > div { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 13px; border-top: 1px solid var(--border); padding: 17px 0; }
.trust-list > div > span { color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; font-size: 0.86rem; }
.trust-list p { margin: 0; }
.trust-list strong,
.trust-list small { display: block; }
.trust-list strong { font-size: 0.80rem; }
.trust-list small { margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }
.cycle-consent-form { padding: clamp(25px, 4vw, 40px); }
.privacy-seal { border: 1px solid color-mix(in srgb, var(--cycle-rose) 40%, var(--border)); border-radius: 99px; color: var(--cycle-rose); padding: 7px 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cycle-consent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 26px 0; }
.cycle-consent-fields .field-group { margin: 0; }
.cycle-consent-fields small { margin-top: 6px; color: var(--ink-subtle); font-size: 0.72rem; line-height: 1.45; }
.cycle-consent-check { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 12px; border-top: 1px solid var(--border); padding: 17px 0; cursor: pointer; }
.cycle-consent-check input { margin-top: 6px; accent-color: var(--cycle-rose); }
.cycle-consent-check > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--cycle-wash); color: var(--cycle-rose); }
.cycle-consent-check p { margin: 0; }
.cycle-consent-check strong,
.cycle-consent-check small { display: block; }
.cycle-consent-check strong { font-size: 0.80rem; }
.cycle-consent-check small { margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.5; }

.cycle-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 210px; min-height: 400px; overflow: hidden; align-items: center; gap: 30px; border: 1px solid color-mix(in srgb, var(--cycle-rose) 30%, var(--border)); border-radius: 29px; background: color-mix(in srgb, var(--surface) 79%, var(--cycle-wash)); padding: clamp(29px, 5vw, 55px); }
.cycle-hero::before { position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle at 1px 1px, var(--cycle-rose) 1px, transparent 0); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent, #000 70%); content: ""; pointer-events: none; }
.cycle-hero-copy { position: relative; z-index: 2; }
.cycle-hero .page-title { max-width: 720px; margin: 7px 0 16px; font-size: clamp(3.6rem, 7.2vw, 6.8rem); line-height: .84; }
.cycle-hero-copy > p:not(.eyebrow) { max-width: 580px; margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.7; }
.cycle-hero-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.cycle-hero-meta > span { border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--ink-muted); padding: 7px 11px; font-size: 0.76rem; }
.cycle-hero-meta strong { color: var(--ink); }
.phase-orbit { position: relative; z-index: 2; display: grid; width: 190px; height: 190px; place-items: center; border: 1px solid var(--cycle-rose); border-radius: 50%; box-shadow: inset 0 0 0 18px var(--surface), 0 20px 55px color-mix(in srgb, var(--cycle-rose) 17%, transparent); color: var(--cycle-rose); }
.phase-orbit > span { font-family: "Fraunces", Georgia, serif; font-size: 4.3rem; }
.phase-orbit > i,
.phase-orbit > b,
.phase-orbit > em { position: absolute; border-radius: 50%; background: var(--cycle-rose); }
.phase-orbit > i { width: 9px; height: 9px; transform: translate(91px, -15px); }
.phase-orbit > b { width: 6px; height: 6px; transform: translate(-79px, 61px); }
.phase-orbit > em { width: 4px; height: 4px; transform: translate(59px, 79px); }
.cycle-primary-action { position: absolute; right: clamp(29px, 5vw, 55px); bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 11px; }
.cycle-primary-action > span { color: var(--ink-muted); font-size: 0.76rem; }
.cycle-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(275px, .58fr); gap: 18px; margin-top: 18px; }
.cycle-calendar-card { padding: clamp(22px, 4vw, 35px); }
.cycle-calendar-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; text-align: center; }
.cycle-calendar-heading h2 { margin: 3px 0 0; font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.cycle-weekdays,
.cycle-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cycle-weekdays { margin: 26px 0 8px; color: var(--ink-subtle); font-size: 0.72rem; font-weight: 700; text-align: center; }
.cycle-day { position: relative; display: grid; min-height: 59px; place-items: center; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--ink-muted); cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.80rem; }
.cycle-day:hover { border-color: var(--border); background: var(--surface-2); color: var(--ink); }
.cycle-day.is-outside { opacity: .28; }
.cycle-day.is-today > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ink-muted); border-radius: 50%; }
.cycle-day.is-selected { border-color: var(--cycle-rose); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cycle-rose) 26%, transparent); color: var(--ink); }
.cycle-day > i,
.cycle-day > b,
.cycle-day > em { position: absolute; right: 8px; bottom: 7px; left: 8px; height: 4px; border-radius: 99px; }
.cycle-day > i { background: var(--cycle-rose); }
.cycle-day > b { border: 1px solid var(--cycle-rose); background: transparent; }
.cycle-day > em { background: color-mix(in srgb, #b59bc9 74%, var(--accent)); }
.cycle-day.is-period { background: color-mix(in srgb, var(--cycle-rose) 12%, var(--surface)); color: var(--ink); }
.cycle-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; color: var(--ink-muted); font-size: 0.72rem; }
.cycle-legend > span { display: flex; align-items: center; gap: 6px; }
.cycle-legend i { display: block; width: 15px; height: 4px; border-radius: 99px; }
.legend-period { background: var(--cycle-rose); }
.legend-predicted { border: 1px solid var(--cycle-rose); }
.legend-fertile { background: color-mix(in srgb, #b59bc9 74%, var(--accent)); }
.cycle-disclaimer { margin: 19px 0 0; border-top: 1px solid var(--border); padding-top: 15px; color: var(--ink-subtle); font-size: 0.72rem; line-height: 1.5; }
.cycle-side-stack { display: grid; gap: 18px; }
.cycle-prediction-card,
.cycle-quick-card { padding: 25px; }
.prediction-date { display: grid; margin-top: 18px; }
.prediction-date > span { color: var(--ink-muted); font-size: 0.76rem; }
.prediction-date strong { margin: 3px 0; font-family: "Fraunces", Georgia, serif; font-size: 2.35rem; font-weight: 400; }
.prediction-date small { color: var(--ink-subtle); font-size: 0.72rem; }
.prediction-range { display: grid; gap: 10px; margin-top: 23px; }
.prediction-range > span { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; border-top: 1px solid var(--border); padding-top: 11px; }
.prediction-range i { grid-row: 1 / span 2; color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-style: normal; }
.prediction-range b { font-size: 0.76rem; }
.prediction-range small { margin-top: 2px; color: var(--ink-subtle); font-size: 0.72rem; }
.confidence-track { height: 4px; overflow: hidden; margin-top: 18px; border-radius: 99px; background: var(--surface-2); }
.confidence-track span { display: block; height: 100%; border-radius: inherit; background: var(--cycle-rose); }
.prediction-empty { display: grid; min-height: 220px; place-items: center; align-content: center; text-align: center; }
.prediction-empty > span { color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; letter-spacing: .2em; }
.prediction-empty h3 { max-width: 210px; margin: 7px 0; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.prediction-empty p { max-width: 240px; margin: 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }
.cycle-quick-card { align-content: center; background: color-mix(in srgb, var(--cycle-wash) 58%, var(--surface)); }
.cycle-quick-card h3 { margin: 5px 0; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.cycle-quick-card p { margin: 0 0 14px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }
.cycle-log-card { margin-top: 18px; padding: clamp(24px, 4vw, 36px); }
.phase-chip { border: 1px solid var(--border); border-radius: 99px; background: var(--cycle-wash); color: var(--cycle-rose); padding: 7px 11px; font-size: 0.76rem; font-weight: 700; }
.symptom-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.symptom-choice { position: relative; display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); cursor: pointer; }
.symptom-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.symptom-choice > span { display: grid; min-height: 92px; place-items: center; align-content: center; padding: 13px; text-align: center; }
.symptom-choice > span i { color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-style: normal; }
.symptom-choice strong,
.symptom-choice small { display: block; }
.symptom-choice strong { margin-top: 5px; font-size: 0.76rem; }
.symptom-choice small { margin-top: 2px; color: var(--ink-subtle); font-size: 0.72rem; }
.symptom-choice select { width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 8px; font-size: 0.72rem; text-align: center; }
.symptom-choice.is-active { border-color: var(--cycle-rose); background: var(--cycle-wash); }
.cycle-future-note,
.cycle-empty { display: grid; min-height: 130px; place-items: center; color: var(--ink-muted); font-size: 0.76rem; text-align: center; }
.cycle-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.cycle-profile-card,
.cycle-history-card { padding: clamp(24px, 4vw, 34px); }
.cycle-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 22px; }
.cycle-profile-fields > label:last-child { grid-column: 1 / -1; }
.cycle-profile-fields label > span,
.adaptation-percent > span { display: block; margin-bottom: 6px; color: var(--ink-muted); font-size: 0.72rem; font-weight: 700; }
.cycle-profile-fields .input-suffix i { font-size: 0.76rem; font-style: normal; }
.cycle-adaptation-master { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; margin-top: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 15px; cursor: pointer; }
.cycle-adaptation-master > input { position: absolute; opacity: 0; }
.cycle-adaptation-master > span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: var(--border-strong); transition: background 160ms ease; }
.cycle-adaptation-master > span i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform 160ms ease; }
.cycle-adaptation-master > input:checked + span { background: var(--cycle-rose); }
.cycle-adaptation-master > input:checked + span i { transform: translateX(18px); }
.cycle-adaptation-master p { margin: 0; }
.cycle-adaptation-master strong,
.cycle-adaptation-master small { display: block; }
.cycle-adaptation-master strong { font-size: 0.76rem; }
.cycle-adaptation-master small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; line-height: 1.45; }
.cycle-count { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--cycle-wash); color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; }
.cycle-history-list { display: grid; margin-top: 14px; }
.cycle-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; border-top: 1px solid var(--border); padding: 15px 0; }
.history-drop { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--cycle-wash); color: var(--cycle-rose); }
.cycle-history-row strong,
.cycle-history-row small { display: block; }
.cycle-history-row strong { font-size: 0.76rem; }
.cycle-history-row small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; }
.cycle-history-row p { margin: 6px 0 0; color: var(--ink-muted); font-size: 0.72rem; line-height: 1.45; }
.cycle-history-row > div:last-child { display: flex; align-items: center; gap: 6px; }
.cycle-adaptation-card { margin-top: 18px; padding: clamp(24px, 4vw, 36px); }
.adaptation-state { border: 1px solid var(--border); border-radius: 99px; color: var(--ink-muted); padding: 7px 10px; font-size: 0.72rem; font-weight: 700; }
.adaptation-state.is-on { border-color: color-mix(in srgb, var(--cycle-rose) 55%, var(--border)); background: var(--cycle-wash); color: var(--cycle-rose); }
.cycle-habit-adaptations { display: grid; margin-top: 12px; }
.cycle-habit-adaptation { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(100px, .42fr) minmax(100px, .42fr) auto auto; align-items: center; gap: 13px; border-top: 1px solid var(--border); padding: 15px 0; }
.cycle-habit-adaptation > div:nth-child(2) strong,
.cycle-habit-adaptation > div:nth-child(2) small { display: block; }
.cycle-habit-adaptation > div:nth-child(2) strong { font-size: 0.76rem; }
.cycle-habit-adaptation > div:nth-child(2) small { margin-top: 3px; color: var(--ink-muted); font-size: 0.72rem; }
.adaptation-percent .select { min-width: 90px; padding: 9px 30px 9px 10px; font-size: 0.76rem; }
.cycle-privacy-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 18px; border-color: color-mix(in srgb, #b65d61 27%, var(--border)); padding: 25px 28px; }
.privacy-lock { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in srgb, #b65d61 38%, var(--border)); border-radius: 50%; color: #a65358; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; }
.cycle-privacy-card h2 { margin: 3px 0; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.cycle-privacy-card p:not(.eyebrow) { margin: 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.5; }
.cycle-period-modal { --cycle-rose: color-mix(in srgb, #c98594 72%, var(--accent)); --cycle-wash: color-mix(in srgb, #e8c9d0 30%, var(--surface)); }
.cycle-period-modal { width: min(700px, 100%); }
.flow-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.flow-picker input { position: absolute; opacity: 0; }
.flow-picker label { cursor: pointer; }
.flow-picker label > span { display: grid; min-height: 70px; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); color: var(--ink-muted); font-size: 0.76rem; }
.flow-picker label > span i { color: var(--cycle-rose); font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-style: normal; }
.flow-picker input:checked + span { border-color: var(--cycle-rose); background: var(--cycle-wash); color: var(--ink); }
.encrypted-hint { margin-top: 6px; color: var(--ink-subtle); font-size: 0.72rem; }

@media (max-width: 980px) {
  .cycle-hero { grid-template-columns: minmax(0, 1fr) 150px; min-height: 390px; }
  .phase-orbit { width: 145px; height: 145px; box-shadow: inset 0 0 0 13px var(--surface); }
  .phase-orbit > span { font-size: 3.2rem; }
  .cycle-dashboard-grid { grid-template-columns: 1fr; }
  .cycle-side-stack { grid-template-columns: 1fr 1fr; }
  .cycle-settings-grid { grid-template-columns: 1fr; }
  .symptom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cycle-habit-adaptation { grid-template-columns: auto minmax(0, 1fr) 100px 100px; }
  .cycle-habit-adaptation .mini-switch,
  .cycle-habit-adaptation .button { justify-self: end; }
  .cycle-habit-adaptation .mini-switch { grid-column: 3; }
  .cycle-habit-adaptation .button { grid-column: 4; }
}

@media (max-width: 760px) {
  .cycle-consent-layout { grid-template-columns: 1fr; }
  .cycle-consent-hero { grid-template-columns: 88px minmax(0, 1fr); margin-bottom: 30px; }
  .cycle-consent-mark { width: 88px; height: 88px; box-shadow: inset 0 0 0 9px var(--surface); }
  .cycle-consent-mark > i,
  .cycle-consent-mark > b { display: none; }
  .cycle-consent-hero .page-title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .cycle-hero { grid-template-columns: 1fr; min-height: 510px; align-content: start; }
  .phase-orbit { position: absolute; right: 27px; bottom: 85px; width: 120px; height: 120px; opacity: .72; }
  .cycle-primary-action { right: 25px; bottom: 25px; left: 25px; justify-content: flex-end; }
  .cycle-primary-action > span { margin-right: auto; }
  .symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle-privacy-card { grid-template-columns: auto minmax(0, 1fr); }
  .cycle-privacy-card .button { grid-column: 2; justify-self: start; justify-items: start; }
  .cycle-habit-adaptation { grid-template-columns: auto minmax(0, 1fr) 1fr 1fr; }
  .cycle-habit-adaptation .adaptation-percent:first-of-type { grid-column: 2 / 4; }
  .cycle-habit-adaptation .adaptation-percent:nth-of-type(2) { grid-column: 4; }
}

@media (max-width: 460px) {
  .cycle-consent-hero { grid-template-columns: 1fr; }
  .cycle-consent-mark { width: 82px; height: 82px; }
  .cycle-consent-fields { grid-template-columns: 1fr; }
  .cycle-side-stack { grid-template-columns: 1fr; }
  .cycle-hero { min-height: 550px; padding: 25px; }
  .cycle-hero .page-title { font-size: 3.35rem; }
  .cycle-hero-meta { display: grid; justify-items: start; }
  .phase-orbit { right: 20px; bottom: 115px; width: 105px; height: 105px; }
  .cycle-primary-action { align-items: stretch; flex-direction: column; }
  .cycle-calendar-card { padding: 18px 12px; }
  .cycle-day { min-height: 45px; border-radius: 10px; }
  .cycle-legend { gap: 9px; }
  .symptom-grid { grid-template-columns: 1fr 1fr; }
  .cycle-profile-fields { grid-template-columns: 1fr; }
  .cycle-profile-fields > label:last-child { grid-column: auto; }
  .cycle-history-row { grid-template-columns: auto minmax(0, 1fr); }
  .cycle-history-row > div:last-child { grid-column: 2; justify-content: flex-end; }
  .cycle-habit-adaptation { grid-template-columns: auto minmax(0, 1fr); }
  .cycle-habit-adaptation .adaptation-percent,
  .cycle-habit-adaptation .adaptation-percent:first-of-type,
  .cycle-habit-adaptation .adaptation-percent:nth-of-type(2) { grid-column: auto; }
  .cycle-habit-adaptation .mini-switch { grid-column: 1; }
  .cycle-habit-adaptation .button { grid-column: 2; }
  .cycle-privacy-card { grid-template-columns: 1fr; }
  .cycle-privacy-card .button { grid-column: 1; }
  .flow-picker { grid-template-columns: repeat(2, 1fr); }
}

/* Full history archive */
.page.history-page { width: min(100%, 1500px); }
.history-page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(40px, 7vw, 110px); margin-bottom: clamp(42px, 6vw, 76px); }
.history-page-header h1 { max-width: 900px; margin: 8px 0 20px; font-size: clamp(4.2rem, 7.2vw, 8.4rem); font-weight: 300; letter-spacing: -.055em; line-height: .86; text-wrap: balance; }
.history-page-header > div:first-child > p:last-child { max-width: 680px; margin: 0; color: var(--ink-muted); font-size: .98rem; line-height: 1.75; text-wrap: pretty; }
.history-era-mark { position: relative; display: grid; width: clamp(168px, 14vw, 220px); aspect-ratio: 1; place-items: center; align-content: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 50%; background: color-mix(in srgb, var(--surface) 78%, transparent); text-align: center; box-shadow: inset 0 0 0 12px var(--bg); }
.history-era-mark::before { position: absolute; inset: 27%; border: 1px solid var(--border); border-radius: 50%; content: ""; }
.history-era-mark span,
.history-era-mark strong { position: relative; z-index: 1; display: block; }
.history-era-mark span { color: var(--ink-muted); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.history-era-mark strong { max-width: 110px; margin-top: 8px; font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; font-weight: 400; line-height: 1.15; }
.history-era-mark i { position: absolute; right: 18px; bottom: 15px; color: var(--accent); font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-style: normal; }
.history-month-shell { transition: opacity 160ms ease; }
.history-month-shell.is-loading { opacity: .58; pointer-events: none; }
.history-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 20px; border-top: 1px solid var(--border-strong); padding-top: 22px; }
.history-month-nav { display: grid; grid-template-columns: auto minmax(190px, 1fr) auto; align-items: center; gap: 16px; }
.history-month-nav > div { text-align: center; }
.history-month-nav .eyebrow { margin: 0 0 3px; }
.history-month-nav h2 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -.035em; }
.history-month-nav .icon-button:disabled { opacity: .28; cursor: not-allowed; }
.history-tools { display: flex; align-items: end; gap: 10px; }
.history-filter { display: grid; gap: 5px; }
.history-filter > span { color: var(--ink-muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.history-filter select { min-width: 220px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0 38px 0 13px; }
.history-metrics { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); margin-bottom: 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); }
.history-metrics article { min-height: 132px; border-right: 1px solid var(--border); padding: 22px 24px; }
.history-metrics article:last-child { border-right: 0; }
.history-metrics article:first-child { border-radius: 19px 0 0 19px; background: #332c2c; color: #fffaf7; }
.history-metrics span,
.history-metrics strong,
.history-metrics small { display: block; }
.history-metrics span { color: var(--ink-muted); font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.history-metrics article:first-child span,
.history-metrics article:first-child small { color: rgba(255, 250, 247, .62); }
.history-metrics strong { margin: 13px 0 7px; font-family: "Fraunces", Georgia, serif; font-size: 2.3rem; font-weight: 300; line-height: 1; }
.history-metrics small { color: var(--ink-muted); font-size: .7rem; line-height: 1.45; }
.history-workspace { display: grid; grid-template-columns: minmax(650px, 1.52fr) minmax(340px, .68fr); align-items: start; gap: 18px; }
.history-calendar-card { overflow: hidden; padding: clamp(18px, 2vw, 30px); }
.history-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 8px; }
.history-weekdays span { color: var(--ink-muted); padding: 0 10px; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.history-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.history-calendar-day { position: relative; display: grid; min-width: 0; min-height: 108px; grid-template-rows: auto 1fr auto auto; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); color: var(--ink); padding: 10px; text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.history-calendar-day:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.history-calendar-day.is-selected { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.history-calendar-day.is-complete { background: color-mix(in srgb, var(--success-soft) 62%, var(--surface)); }
.history-calendar-day.is-partial { background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }
.history-calendar-day.is-missed { background: color-mix(in srgb, var(--surface-2) 80%, var(--danger-soft)); }
.history-calendar-day.is-protected { background: color-mix(in srgb, var(--surface-2) 68%, var(--success-soft)); }
.history-calendar-day.is-outside { opacity: .42; }
.history-calendar-day:disabled { opacity: .25; cursor: default; }
.history-day-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.history-day-top b { font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; font-weight: 400; }
.history-day-top em { border-radius: 99px; background: var(--accent-strong); color: var(--surface); padding: 3px 5px; font-size: .52rem; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.history-day-center { display: flex; align-items: center; justify-content: center; color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; }
.history-day-center > i { font-style: normal; }
.history-calendar-day.is-complete .history-day-center { color: var(--success); font-family: inherit; font-weight: 800; }
.history-calendar-day.is-protected .history-day-center { color: var(--accent-strong); }
.history-day-mood { font-size: 1rem; }
.history-calendar-day > small { overflow: hidden; min-height: 1.1em; color: var(--ink-muted); font-size: .61rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.history-day-progress { height: 3px; overflow: hidden; margin-top: 7px; border-radius: 99px; background: var(--border); }
.history-day-progress i { display: block; width: var(--history-day-progress); height: 100%; border-radius: inherit; background: var(--accent); }
.history-calendar-day.is-complete .history-day-progress i { background: var(--success); }
.history-calendar-day.is-protected .history-day-progress i { background: var(--accent-mid); }
.history-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; margin-top: 18px; color: var(--ink-muted); font-size: .66rem; }
.history-legend span { display: inline-flex; align-items: center; gap: 6px; }
.history-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.history-legend i.is-complete { background: var(--success); }
.history-legend i.is-partial { background: var(--accent); }
.history-legend i.is-missed { background: var(--danger); }
.history-legend i.is-protected { border: 1px solid var(--accent-mid); background: transparent; }
.history-day-panel { position: sticky; top: 24px; padding: 25px; }
.history-day-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 18px; }
.history-day-heading h2 { max-width: 290px; margin: 4px 0 0; font-family: "Fraunces", Georgia, serif; font-size: 1.65rem; font-weight: 400; line-height: 1.1; }
.history-selected-mood { display: grid; min-width: 54px; justify-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 8px; }
.history-selected-mood i { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-style: normal; }
.history-selected-mood small { color: var(--ink-muted); font-size: .58rem; }
.history-protection-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 14px; background: var(--accent-soft); padding: 12px; }
.history-protection-note > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-strong); }
.history-protection-note p { margin: 0; }
.history-protection-note strong,
.history-protection-note small { display: block; }
.history-protection-note strong { font-size: .75rem; }
.history-protection-note small { margin-top: 2px; color: var(--ink-muted); font-size: .65rem; line-height: 1.4; }
.history-day-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 17px 0; }
.history-day-score > strong { font-family: "Fraunces", Georgia, serif; font-size: 2.8rem; font-weight: 300; line-height: 1; }
.history-day-score span,
.history-day-score b,
.history-day-score small { display: block; }
.history-day-score b { font-size: .78rem; }
.history-day-score small { margin-top: 3px; color: var(--ink-muted); font-size: .66rem; }
.history-detail-list { display: grid; gap: 8px; max-height: min(52vh, 600px); overflow-y: auto; margin: 17px -7px 0 0; padding-right: 7px; scrollbar-width: thin; }
.history-habit { border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); padding: 12px; }
.history-habit.is-completed { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: color-mix(in srgb, var(--success-soft) 52%, var(--surface)); }
.history-habit.is-missed { background: color-mix(in srgb, var(--danger-soft) 22%, var(--surface)); }
.history-habit-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.history-habit-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--surface); font-size: 1rem; }
.history-habit-main h3 { overflow: hidden; margin: 0; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.history-habit-main p { overflow: hidden; margin: 3px 0 0; color: var(--ink-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.history-habit-status { border-radius: 99px; background: var(--surface); color: var(--ink-muted); padding: 5px 7px; font-size: .57rem; font-weight: 700; }
.history-habit.is-completed .history-habit-status { background: var(--success-soft); color: var(--success); }
.history-habit.is-in_progress .history-habit-status { background: var(--accent-soft); color: var(--accent-strong); }
.history-habit.is-missed .history-habit-status { background: var(--danger-soft); color: var(--danger); }
.history-habit-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.history-habit-progress > strong { color: var(--ink-muted); font-size: .63rem; font-weight: 600; }
.history-habit-progress > span { width: 86px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--border); }
.history-habit-progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.history-checklist { display: grid; gap: 5px; margin: 10px 0 0 48px; padding: 0; list-style: none; }
.history-checklist li { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: .63rem; }
.history-checklist li span { color: var(--ink-subtle); }
.history-checklist li.is-complete { color: var(--ink); }
.history-checklist li.is-complete span { color: var(--success); }
.history-day-empty { display: grid; min-height: 190px; place-items: center; align-content: center; padding: 20px; color: var(--ink-muted); text-align: center; }
.history-day-empty > span { font-family: "Fraunces", Georgia, serif; font-size: 1.8rem; }
.history-day-empty h3 { margin: 7px 0 3px; color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.history-day-empty p { max-width: 250px; margin: 0; font-size: .68rem; line-height: 1.55; }
.history-readonly-note { display: flex; align-items: flex-start; gap: 7px; margin: 17px 0 0; color: var(--ink-subtle); font-size: .61rem; line-height: 1.5; }
.history-readonly-note span { color: var(--accent-strong); }

@media (max-width: 1280px) {
  .history-workspace { grid-template-columns: 1fr; }
  .history-day-panel { position: static; }
  .history-detail-list { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .history-day-empty { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .history-page-header { grid-template-columns: 1fr; align-items: start; }
  .history-era-mark { display: none; }
  .history-toolbar { align-items: stretch; flex-direction: column; }
  .history-month-nav { width: min(100%, 520px); }
  .history-tools { justify-content: space-between; }
  .history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-metrics article { border-bottom: 1px solid var(--border); }
  .history-metrics article:nth-child(2) { border-right: 0; }
  .history-metrics article:nth-child(3),
  .history-metrics article:nth-child(4) { border-bottom: 0; }
  .history-metrics article:first-child { border-radius: 19px 0 0 0; }
}

@media (max-width: 620px) {
  .history-page-header { margin-bottom: 38px; }
  .history-page-header h1 { font-size: clamp(3.25rem, 16vw, 4.7rem); }
  .history-page-header > div:first-child > p:last-child { font-size: .84rem; }
  .history-month-nav { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; }
  .history-month-nav h2 { font-size: 2rem; }
  .history-tools { align-items: stretch; flex-direction: column; }
  .history-filter select { width: 100%; min-width: 0; }
  .history-metrics article { min-height: 116px; padding: 18px; }
  .history-metrics strong { font-size: 2rem; }
  .history-calendar-card { border-radius: 18px; padding: 10px 7px 14px; }
  .history-weekdays span { padding: 0; font-size: .55rem; text-align: center; }
  .history-calendar-grid { gap: 4px; }
  .history-calendar-day { min-height: 70px; border-radius: 10px; padding: 6px; }
  .history-day-top b { font-size: .9rem; }
  .history-day-top em { overflow: hidden; width: 6px; height: 6px; border-radius: 50%; padding: 0; color: transparent; }
  .history-day-center { font-size: .72rem; }
  .history-calendar-day > small { display: none; }
  .history-day-progress { margin-top: 4px; }
  .history-legend { justify-content: flex-start; gap: 10px; padding-inline: 4px; }
  .history-day-panel { padding: 18px 15px; }
  .history-detail-list { grid-template-columns: 1fr; }
  .history-habit-main { grid-template-columns: 38px minmax(0, 1fr); }
  .history-habit-status { grid-column: 2; justify-self: start; }
}

@media (max-width: 380px) {
  .history-metrics { grid-template-columns: 1fr; }
  .history-metrics article { border-right: 0; border-bottom: 1px solid var(--border) !important; }
  .history-metrics article:last-child { border-bottom: 0 !important; }
  .history-metrics article:first-child { border-radius: 19px 19px 0 0; }
  .history-calendar-day { min-height: 61px; }
  .history-day-center { display: none; }
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgba(26, 19, 16, 0.43);
  padding: 24px;
  backdrop-filter: blur(8px);
}

.modal-layer[hidden] { display: none; }

.modal {
  width: min(100%, 610px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 27px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  animation: modal-in 260ms cubic-bezier(.22, 1, .36, 1) both;
}

.modal.modal-wide { width: min(100%, 780px); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 24px 26px 20px;
}

.modal-header h2 { margin: 0; font-size: 1.5rem; }
.modal-header p { margin: 4px 0 0; color: var(--ink-muted); font-size: 0.86rem; }
.modal-body { padding: 24px 26px 28px; }

.modal-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.confirm-modal { width: min(100%, 510px); }
.confirm-habit {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-2);
  padding: 14px;
}
.confirm-habit > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--surface);
  font-size: 1.15rem;
}
.confirm-habit strong,
.confirm-habit small { display: block; }
.confirm-habit strong { font-size: 0.94rem; }
.confirm-habit small { margin-top: 3px; color: var(--ink-muted); font-size: 0.80rem; }
.confirm-modal .form-footer { margin-top: 22px; }

.danger-modal .modal-kicker { color: var(--danger); }
.delete-confirm-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
  border-radius: 14px;
  background: var(--danger-soft);
  padding: 12px 13px;
}
.delete-confirm-copy > span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
}
.delete-confirm-copy p { margin: 0; color: var(--danger); font-size: 0.80rem; }
.danger-input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

.radio-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.radio-card {
  position: relative;
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card span {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 9px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.radio-card input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.radio-card input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

.schedule-composer {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 18px;
}

.schedule-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.schedule-card {
  position: relative;
  cursor: pointer;
}

.schedule-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-card > span {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  padding: 13px;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.schedule-card:hover > span { transform: translateY(-1px); }

.schedule-card i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent-strong);
  font-family: Georgia, serif;
  font-size: 1rem;
  font-style: normal;
}

.schedule-card strong { font-size: 0.80rem; line-height: 1.25; }
.schedule-card small { margin-top: 4px; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.35; }

.schedule-card input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.schedule-card input:checked + span small { color: var(--accent-strong); }
.schedule-card input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

.input-suffix {
  position: relative;
}

.input-suffix .input { padding-right: 56px; }
.input-suffix > span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--ink-muted);
  font-size: 0.80rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.weekday-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.weekday-check {
  position: relative;
}

.weekday-check input { position: absolute; opacity: 0; }
.weekday-check span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
}
.weekday-check input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

.conditional-field[hidden] { display: none; }

.toast-region {
  position: fixed;
  z-index: 150;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: min(360px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  contain: layout paint;
  gap: 9px;
  isolation: isolate;
  overflow-anchor: none;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  padding: 13px 15px;
  color: var(--ink);
  font-size: 0.86rem;
  pointer-events: auto;
}

.toast-copy { min-width: 0; flex: 1; }

.toast-action {
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  cursor: pointer;
  padding: 7px 10px;
  font: inherit;
  font-weight: 800;
}

.toast-action:hover { background: color-mix(in srgb, var(--accent-soft) 72%, var(--accent)); }

.toast.has-action {
  overflow: hidden;
  padding-bottom: 15px;
}

.toast.has-action::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--accent);
  content: "";
  transform-origin: left;
  animation: undo-window 10s linear both;
}

@keyframes undo-window { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  content: "";
}

.toast.is-error::before { background: var(--danger); }

.celebration {
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 5px;
  background: var(--accent);
  animation: confetti-fall 1100ms cubic-bezier(.16, .8, .32, 1) forwards;
}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 105vh, 0) rotate(540deg); opacity: .15; }
}

body.onboarding-active {
  overflow-x: hidden;
}

body.onboarding-active .side-rail,
body.onboarding-active .mobile-tabs {
  display: none !important;
}

body.onboarding-active .main-stage {
  min-height: 100vh;
  margin-left: 0;
  padding: 0;
}

.onboarding-page {
  min-height: 100vh;
}

.onboarding-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(310px, 38%) minmax(0, 62%);
  background: var(--bg);
}

.onboarding-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--rail);
  padding: clamp(28px, 4vw, 55px);
}

.onboarding-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.onboarding-brand .streaklio-logo { width: 176px; }

.onboarding-story-copy {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: auto 0;
  padding: 70px 0 120px;
}

.onboarding-number {
  display: block;
  margin-bottom: 28px;
  color: var(--accent);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 0.94rem;
  letter-spacing: 0.18em;
}

.onboarding-story-copy blockquote {
  margin: 18px 0 24px;
  color: var(--ink);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.onboarding-story-copy blockquote em {
  color: var(--accent-strong);
  font-weight: 300;
}

.onboarding-story-copy > p:last-of-type {
  max-width: 380px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.onboarding-botanical {
  position: absolute;
  right: -85px;
  bottom: -70px;
  width: 310px;
  height: 350px;
  opacity: 0.48;
  transform: rotate(-8deg);
}

.onboarding-botanical::before,
.onboarding-botanical::after,
.onboarding-botanical span,
.onboarding-botanical i,
.onboarding-botanical b {
  position: absolute;
  display: block;
  border: 1px solid var(--accent-mid);
  content: "";
}

.onboarding-botanical::before {
  bottom: -30px;
  left: 140px;
  width: 1px;
  height: 360px;
  border-width: 0 0 0 1px;
  border-radius: 50%;
  transform: rotate(20deg);
}

.onboarding-botanical::after {
  top: 62px;
  left: 78px;
  width: 90px;
  height: 42px;
  border-radius: 100% 0 100% 0;
  transform: rotate(22deg);
}

.onboarding-botanical span {
  top: 140px;
  left: 142px;
  width: 105px;
  height: 48px;
  border-radius: 0 100% 0 100%;
  transform: rotate(18deg);
}

.onboarding-botanical i {
  top: 210px;
  left: 78px;
  width: 82px;
  height: 38px;
  border-radius: 100% 0 100% 0;
  transform: rotate(20deg);
}

.onboarding-botanical b {
  top: 19px;
  left: 125px;
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 48% 52%;
  transform: rotate(35deg);
}

.onboarding-work {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(26px, 4vw, 52px) clamp(24px, 7vw, 88px);
}

.onboarding-progress {
  display: grid;
  width: min(100%, 690px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto 52px;
}

.onboarding-progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-subtle);
}

.onboarding-progress-step:not(:last-child)::after {
  height: 1px;
  flex: 1;
  margin-right: 10px;
  background: var(--border-strong);
  content: "";
}

.onboarding-progress-step span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  font-size: 0.80rem;
  font-weight: 700;
}

.onboarding-progress-step small {
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onboarding-progress-step.is-current,
.onboarding-progress-step.is-done {
  color: var(--accent-strong);
}

.onboarding-progress-step.is-current span {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.onboarding-progress-step.is-done span {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.onboarding-panel {
  display: grid;
  width: min(100%, 760px);
  flex: 1;
  align-items: center;
  margin: 0 auto;
  padding-bottom: 36px;
}

.onboarding-step {
  width: 100%;
  animation: onboarding-step-in 360ms cubic-bezier(.22, 1, .36, 1) both;
}

.onboarding-step-narrow {
  width: min(100%, 630px);
  margin: 0 auto;
}

@keyframes onboarding-step-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-heading {
  margin-bottom: 32px;
}

.onboarding-heading > span {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-strong);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.onboarding-heading h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.onboarding-heading p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.goal-card {
  position: relative;
  display: grid;
  min-height: 104px;
  grid-template-columns: 45px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 13px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 18px;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.goal-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.goal-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
}

.goal-icon {
  display: grid;
  width: 43px;
  height: 43px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
}

.goal-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 0.94rem;
}

.goal-card small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: var(--ink-muted);
  font-size: 0.80rem;
}

.goal-check {
  display: grid;
  width: 23px;
  height: 23px;
  grid-column: 3;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--success);
  font-size: 0.86rem;
  font-weight: 700;
}

.goal-card.is-selected .goal-check {
  border-color: var(--success);
  background: var(--success-soft);
}

.onboarding-selection-note,
.onboarding-footnote {
  margin: 13px 0 0;
  color: var(--ink-muted);
  font-size: 0.80rem;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.onboarding-actions > div {
  display: flex;
  gap: 8px;
}

.onboarding-continue,
.onboarding-finish {
  min-width: 142px;
}

.onboarding-continue span,
.onboarding-finish span {
  font-size: 1rem;
}

.routine-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.routine-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--border);
  padding: 23px 25px;
}

.routine-card-head h2 {
  margin: 10px 0 4px;
  font-size: 1.55rem;
}

.routine-card-head p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.routine-count {
  display: grid;
  min-width: 75px;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}

.routine-count small {
  margin-top: 5px;
  color: var(--ink-muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.routine-list {
  display: grid;
  gap: 1px;
  background: var(--border);
}

.routine-item {
  display: grid;
  min-height: 65px;
  grid-template-columns: 42px minmax(0, 1fr) 31px;
  align-items: center;
  gap: 13px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 11px 20px;
  text-align: left;
  transition: background 150ms ease;
}

.routine-item:hover { background: var(--surface-2); }
.routine-item.is-selected { background: color-mix(in srgb, var(--success-soft) 52%, var(--surface)); }

.routine-item-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-2);
  font-size: 1.05rem;
}

.routine-item strong,
.routine-item small { display: block; }
.routine-item strong { font-size: 0.86rem; }
.routine-item small { margin-top: 3px; color: var(--ink-muted); font-size: 0.80rem; text-transform: capitalize; }

.routine-toggle {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.routine-item.is-selected .routine-toggle {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.time-composer {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 27px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 34px 28px 26px;
  text-align: center;
}

.time-orbit {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 1.5rem;
}

.time-composer > label {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.time-picker {
  display: grid;
  width: min(100%, 390px);
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr) minmax(68px, auto);
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--border-strong);
  padding: 9px 0 15px;
  font-variant-numeric: tabular-nums;
}

.time-picker select {
  min-width: 0;
  border: 0;
  border-radius: 10px;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 6px 3px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.time-picker select:hover { background: var(--surface-2); }
.time-picker select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }
.time-picker .time-period { align-self: stretch; background: var(--surface-2); padding-inline: 9px; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(0.88rem, 1.8vw, 1.05rem); font-weight: 700; line-height: 1; letter-spacing: 0.06em; }
.time-picker-divider { transform: translateY(-2px); color: var(--ink-muted); font-family: "Fraunces", Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300; }

.quiet-hours {
  display: grid;
  width: min(100%, 420px);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 23px;
  border-radius: 15px;
  background: var(--surface-2);
  padding: 12px 14px;
  text-align: left;
}

.quiet-hours > span:first-child { color: var(--accent-strong); font-size: 1.1rem; }
.quiet-hours strong,
.quiet-hours small { display: block; }
.quiet-hours strong { font-size: 0.86rem; }
.quiet-hours small { margin-top: 2px; color: var(--ink-muted); font-size: 0.80rem; }

.onboarding-info {
  margin-top: 12px;
  border-left: 2px solid var(--accent-mid);
  color: var(--ink-muted);
  padding: 5px 0 5px 12px;
  font-size: 0.80rem;
  line-height: 1.55;
}

.onboarding-notification-card {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-soft) 72%, transparent) 0 19%, transparent 20%),
    var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 30px;
}

.onboarding-notification-card.is-ready {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--success-soft) 78%, transparent) 0 19%, transparent 20%),
    var(--surface);
}

.onboarding-notification-card.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.notification-orbit {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  grid-row: 1 / span 3;
  place-items: center;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  color: var(--accent-strong);
}

.notification-orbit::before,
.notification-orbit::after,
.notification-orbit i,
.notification-orbit b {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 50%;
  content: "";
}

.notification-orbit::before { inset: 8px; }
.notification-orbit::after { inset: 18px; }
.notification-orbit i { inset: -8px; opacity: 0.32; }
.notification-orbit b { inset: -17px; opacity: 0.15; }

.notification-orbit > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 1.08rem;
  font-weight: 700;
}

.is-ready .notification-orbit {
  border-color: color-mix(in srgb, var(--success) 52%, transparent);
  color: var(--success);
}

.is-ready .notification-orbit::before,
.is-ready .notification-orbit::after,
.is-ready .notification-orbit i,
.is-ready .notification-orbit b {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.is-ready .notification-orbit > span { background: var(--success-soft); }

.notification-card-copy { min-width: 0; }

.notification-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notification-card-copy h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.notification-card-copy p {
  max-width: 470px;
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.notification-preview {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface));
  padding: 12px 14px;
}

.notification-preview-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: "Fraunces", Georgia, serif;
}

.notification-preview strong,
.notification-preview small { display: block; }
.notification-preview strong { font-size: 0.84rem; }
.notification-preview small { margin-top: 2px; color: var(--ink-muted); font-size: 0.76rem; }
.notification-preview em { align-self: start; color: var(--ink-subtle); font-size: 0.70rem; font-style: normal; }

.notification-permission-button {
  width: fit-content;
  grid-column: 2;
  justify-self: start;
}

.notification-permission-state {
  display: inline-flex;
  width: fit-content;
  grid-column: 2;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  padding: 9px 14px;
  font-size: 0.82rem;
}

.notification-permission-state span { font-weight: 800; }

.ready-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 27px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 29px;
}

.ready-card::after {
  position: absolute;
  top: -75px;
  right: -75px;
  width: 180px;
  height: 180px;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
  content: "";
}

.ready-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.2rem;
}

.ready-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 21px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.ready-summary span,
.ready-summary strong { display: block; }
.ready-summary span { color: var(--ink-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.ready-summary strong { margin-top: 5px; font-size: 0.86rem; line-height: 1.45; }

.mobile-tabs { display: none; }

@media (max-width: 980px) {
  .side-rail { width: 208px; }
  .main-stage { margin-left: 208px; padding-inline: 32px; }
  .template-scroller { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .template-pack-grid,
  .library-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-filter-bar { grid-template-columns: minmax(200px, 1fr) auto auto; }
  .clear-template-filters { grid-column: 1 / -1; justify-self: end; min-height: 28px; }
  .journal-workspace { grid-template-columns: 1fr; }
  .journal-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-hero { grid-template-columns: auto minmax(0, 1fr); }
  .insight-comparison { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--border); border-left: 0; padding: 18px 0 0; }
  .insight-grid { grid-template-columns: 1fr; }
  .onboarding-shell { grid-template-columns: minmax(270px, 34%) minmax(0, 66%); }
  .onboarding-work { padding-inline: clamp(24px, 5vw, 54px); }
  .onboarding-story-copy blockquote { font-size: clamp(2.7rem, 5vw, 4rem); }
  .onboarding-progress-step small { display: none; }
  .manage-row { grid-template-columns: 30px auto minmax(160px, 1fr) auto auto; }
  .manage-row .dot-row { display: none; }
  .streak-hero { grid-template-columns: auto minmax(0, 1fr); }
  .level-card { grid-column: 1 / -1; grid-template-columns: auto minmax(120px, .45fr) minmax(160px, 1fr); align-items: center; border-top: 1px solid var(--border); border-left: 0; padding: 18px 0 0; }
  .level-card > small { text-align: right; }
  .reward-hero { grid-template-columns: auto minmax(0, 1fr); }
  .next-reward { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--border); border-left: 0; padding: 18px 0 0; }
  .next-reward strong,
  .next-reward small { grid-column: 1; }
  .next-creature-lock { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .reward-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reminder-schedule-grid { grid-template-columns: 1fr; }
  .reminder-schedule-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto minmax(125px, .36fr); align-items: center; }
  .reminder-time-field { grid-column: auto; align-self: center; }
  .quiet-time-pair { grid-column: auto; min-width: 240px; }
  .reminder-channel-grid { grid-template-columns: 1fr; }
  .reminder-channel-card { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .reminder-channel-card .button { grid-column: auto; }
}

@media (max-width: 760px) {
  .side-rail { display: none; }
  .main-stage {
    margin-left: 0;
    padding: 30px 18px 112px;
  }
  .mobile-tabs {
    position: fixed;
    inset: auto 10px 10px;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    border: 1px solid var(--border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow-lift);
    padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
    backdrop-filter: blur(22px);
  }
  .mobile-tab {
    display: grid;
    min-height: 49px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 5px 2px;
    font-size: 0.76rem;
    font-weight: 700;
  }
  .mobile-tab svg { width: 19px; height: 19px; }
  .mobile-tab.is-active { background: var(--accent-soft); color: var(--accent-strong); }
  .today-header { align-items: end; gap: 14px; }
  .progress-ring { width: 94px; height: 94px; }
  .ring-label strong { font-size: 1.55rem; }
  .page-title { font-size: clamp(2.2rem, 12vw, 3.35rem); }
  .day-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; overflow-x: hidden; padding: 7px; }
  .day-button { min-width: 0; min-height: 66px; border-radius: 13px; }
  .comeback-card { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .comeback-actions { grid-column: 1 / -1; margin-top: 0; }
  .history-banner { grid-template-columns: auto minmax(0, 1fr); }
  .history-banner .button { grid-column: 2; justify-self: start; }
  .habit-main { grid-template-columns: 46px minmax(0, 1fr); }
  .habit-row[data-type="checklist"] .habit-main { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .habit-toggle { width: 44px; height: 44px; border-radius: 14px; }
  .quantity-control { grid-column: 1 / -1; justify-content: flex-end; padding: 0 3px 4px 58px; }
  .checklist-items { grid-template-columns: 1fr; padding: 14px 16px 16px; }
  .habit-row[data-type="checklist"] .checklist-count { justify-self: end; }
  .page-header { align-items: flex-start; flex-direction: column; margin-bottom: 26px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid .stat-card:last-child { grid-column: 1 / -1; }
  .manage-row {
    grid-template-columns: 30px 44px minmax(0, 1fr) auto;
    gap: 10px;
    padding-right: 12px;
  }
  .manage-row .habit-icon-large { width: 44px; height: 44px; }
  .manage-row .manage-health { border-left: 0; padding-left: 0; }
  .manage-row .row-actions { grid-column: 2 / -1; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 10px; }
  .archived-row { grid-template-columns: 44px minmax(0, 1fr); }
  .archived-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .template-scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .template-card { min-width: min(82vw, 300px); scroll-snap-align: start; }
  .templates-hero { grid-template-columns: 1fr; min-height: 400px; align-items: end; gap: 32px; padding: 29px 24px; }
  .templates-hero .page-title { font-size: clamp(3rem, 12vw, 5rem); }
  .templates-hero::before { right: -48px; }
  .templates-hero::after { right: 97px; }
  .template-library-counts { justify-self: start; }
  .starter-routine-grid,
  .template-pack-grid,
  .library-template-grid { grid-template-columns: 1fr; }
  .starter-routine-card.is-featured { grid-column: auto; }
  .template-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-search { grid-column: 1 / -1; }
  .clear-template-filters { grid-column: 1 / -1; }
  .journal-page-header { align-items: flex-start; flex-direction: column; }
  .journal-date-ribbon { grid-template-columns: repeat(8, minmax(48px, 1fr)); overflow-x: auto; }
  .journal-overview { grid-template-columns: 1fr; }
  .journal-save-bar { align-items: flex-start; flex-direction: column; }
  .journal-save-bar > div { width: 100%; justify-content: flex-end; }
  .journal-history .timeline-card > button,
  .timeline-static { grid-template-columns: 52px minmax(0, 1fr) 55px; }
  .timeline-edit-note { grid-column: 2 / -1; justify-self: end; }
  .insights-page-header { width: 100%; }
  .insight-coverage-seal { align-self: flex-start; }
  .insight-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .insight-comparison { text-align: center; }
  .observation-grid { grid-template-columns: 1fr; }
  .observation-card { min-height: 0; }
  .chart-heading { align-items: flex-start; flex-direction: column; }
  .heat-legend { flex-wrap: wrap; padding-top: 0; }
  .year-card { padding-inline: 20px; }
  .year-heatmap-wrap { margin-right: -20px; }
  .habit-progress-card { padding-inline: 20px; }
  .habit-table-wrap { margin-right: -20px; }
  .streak-tools-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creature-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .creature-level { min-height: 215px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card.full { grid-column: auto; }
  .modal-layer { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 91vh; border-radius: 25px 25px 0 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .schedule-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-card:last-child { grid-column: 1 / -1; }
  .schedule-card > span { min-height: 98px; }
  .toast-region { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .onboarding-shell { display: block; min-height: 100vh; }
  .onboarding-story {
    min-height: 205px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 22px 24px 26px;
  }
  .onboarding-story-copy { margin: 34px 0 0; padding: 0; }
  .onboarding-story-copy .eyebrow,
  .onboarding-story-copy > p:last-of-type,
  .onboarding-number { display: none; }
  .onboarding-story-copy blockquote { margin: 0; font-size: clamp(2.15rem, 10vw, 3.35rem); }
  .onboarding-botanical { right: -70px; bottom: -180px; transform: scale(.72) rotate(-8deg); }
  .onboarding-work { padding: 24px 18px 46px; }
  .onboarding-progress { margin-bottom: 34px; }
  .onboarding-panel { padding-bottom: 0; }
  .onboarding-heading { margin-bottom: 24px; }
  .onboarding-heading h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .goal-card { min-height: 96px; padding: 14px; }
  .onboarding-notification-card { grid-template-columns: 74px minmax(0, 1fr); padding: 24px; }
  .notification-orbit { width: 70px; height: 70px; }
}

@media (max-width: 520px) {
  .mobile-tabs { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); }
  .mobile-tab { min-width: 0; min-height: 52px; }
  .mobile-tab span { display: none; }
  .mobile-tab svg { width: 21px; height: 21px; }
  .day-strip {
    gap: 2px;
    padding: 7px 4px;
  }
  .day-button { min-width: 0; padding-inline: 0; }
  .day-name { font-size: .68rem; letter-spacing: .045em; }
  .today-creature-slider { grid-template-columns: minmax(0, 1fr) 104px; }
  .today-creature-progress { grid-column: 1 / -1; grid-row: 2; padding: 2px 4px 3px; }
  .today-creature-next { grid-column: 2; grid-row: 1; }
}

@media (max-width: 460px) {
  .main-stage { padding-inline: 13px; }
  .today-header { grid-template-columns: 1fr; }
  .progress-ring {
    position: absolute;
    top: 23px;
    right: 14px;
    width: 76px;
    height: 76px;
  }
  .today-page { position: relative; }
  .today-header > div:first-child { padding-right: 0; }
  .today-header-actions { position: absolute; top: 20px; right: 14px; align-items: flex-start; gap: 7px; }
  .today-header-actions .progress-ring { position: relative; top: auto; right: auto; }
  .reminder-bell { width: 38px; height: 38px; }
  .date-kicker {
    position: relative;
    z-index: 2;
    max-width: none;
    min-height: 20px;
    padding-right: 126px;
    font-size: 0.80rem;
    line-height: 1.45;
  }
  .date-kicker::before { display: none; }
  .today-header .page-title { padding-right: 126px; }
  .today-creature-slider { width: calc(100vw - 26px); }
  .today-meta { max-width: calc(100% - 40px); }
  .ring-label strong { font-size: 1.25rem; }
  .ring-label span { font-size: 0.76rem; }
  .day-name { font-size: .68rem; letter-spacing: .045em; }
  .day-number { width: 25px; height: 25px; font-size: 0.94rem; }
  .day-button { min-height: 61px; }
  .comeback-card { grid-template-columns: 1fr; gap: 13px; }
  .comeback-flower { width: 52px; height: 52px; }
  .comeback-actions { grid-column: auto; display: grid; }
  .comeback-actions .button { width: 100%; }
  .history-banner { margin-top: -20px; }
  .history-banner .button { grid-column: 1 / -1; width: 100%; }
  .streak-hero { grid-template-columns: 1fr; justify-items: start; }
  .streak-orbit { width: 96px; height: 96px; }
  .streak-orbit > span { font-size: 2.45rem; }
  .streak-orbit i::before { left: 44px; }
  .streak-orbit i::after { top: 44px; }
  .level-card { width: 100%; grid-template-columns: auto minmax(0, 1fr); }
  .level-card .level-track { grid-column: 1 / -1; width: 100%; }
  .level-card > small { grid-column: 1 / -1; text-align: left; }
  .vacation-form { grid-template-columns: 1fr; }
  .vacation-form .button { width: 100%; }
  .badge-shelf { padding: 19px; }
  .badge-shelf .section-heading { align-items: flex-start; }
  .badge-count { margin-top: 4px; }
  .rewards-header .button { width: 100%; }
  .reward-hero { grid-template-columns: 1fr; justify-items: start; }
  .reward-level-seal { width: 112px; height: 112px; }
  .reward-level-seal span { font-size: 2.35rem; }
  .next-reward { width: 100%; }
  .reward-theme-grid { grid-template-columns: 1fr; }
  .reward-badge-grid { grid-template-columns: 1fr; }
  .templates-hero { min-height: 430px; border-radius: 24px; }
  .templates-hero-mark { top: 25px; right: 27px; }
  .templates-hero .page-title { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .template-library-counts { width: 100%; grid-template-columns: repeat(3, 1fr); padding-inline: 7px; }
  .template-library-counts span { min-width: 0; padding-inline: 5px; }
  .starter-routine-card { grid-template-columns: 1fr; min-height: 0; padding: 21px; }
  .starter-routine-action { align-items: center; flex-direction: row; padding: 22px 0 0; }
  .routine-count { width: 58px; height: 58px; }
  .starter-routine-action .button { flex: 1; }
  .template-pack-card { min-height: 112px; }
  .template-filter-bar { grid-template-columns: 1fr; }
  .template-search,
  .clear-template-filters { grid-column: auto; }
  .template-filter select { width: 100%; }
  .active-pack-note { grid-template-columns: auto minmax(0, 1fr); }
  .active-pack-note button { grid-column: 2; justify-self: start; padding: 0; }
  .library-template-card { min-height: 310px; }
  .journal-page-header { margin-bottom: 20px; }
  .journal-date-ribbon { margin-inline: -2px; }
  .journal-date-chip { min-height: 62px; }
  .journal-sheet { padding: 22px 18px; background: repeating-linear-gradient(180deg, var(--surface) 0, var(--surface) 34px, color-mix(in srgb, var(--border) 48%, transparent) 35px); }
  .journal-sheet::after { right: 17px; }
  .journal-sheet-header { gap: 13px; }
  .journal-page-number { width: 48px; height: 48px; font-size: 1.25rem; }
  .journal-prompt-label { flex-wrap: wrap; }
  .gratitude-mode { width: 100%; margin: 8px 0 0 39px; }
  .gratitude-mode button { flex: 1; }
  .journal-mood-row { gap: 5px; padding-left: 0; }
  .journal-mood-row .mood-button { min-height: 61px; padding: 5px 2px; }
  .journal-mood-row .mood-label { font-size: 0.76rem; }
  .journal-emotions,
  .journal-writing-field,
  .gratitude-three { padding-left: 0; }
  .journal-save-bar > div { display: grid; width: 100%; grid-template-columns: 1fr; }
  .journal-save-bar .button { width: 100%; }
  .journal-calendar-card,
  .journal-month-summary { padding: 18px; }
  .journal-history > .section-heading { align-items: flex-start; flex-direction: column; }
  .journal-history .timeline-card > button,
  .timeline-static { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding: 13px; }
  .journal-history .timeline-date { width: 42px; }
  .journal-history .timeline-mood { grid-column: 1; grid-row: 2; align-self: start; }
  .timeline-edit-note { grid-column: 2; grid-row: 2; justify-self: end; }
  .badge-vault,
  .creature-vault { padding: 19px; }
  .badge-heading-actions { align-items: flex-end; flex-direction: column; }
  .journal-prompt { padding: 22px 18px; }
  .gratitude-inline { grid-template-columns: 1fr; }
  .gratitude-inline .button { width: 100%; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 116px; padding: 17px; }
  .stat-value { font-size: 1.9rem; }
  .capacity-note { grid-template-columns: auto minmax(0, 1fr); margin-top: -2px; }
  .capacity-count { grid-column: 2; }
  .manage-row { grid-template-columns: 26px 42px minmax(0, 1fr); }
  .habit-icon-large { width: 42px; height: 42px; }
  .drag-handle { width: 26px; }
  .manage-row .manage-health { grid-column: 2 / -1; justify-content: flex-start; padding-left: 52px; }
  .manage-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .order-buttons { margin-right: auto; }
  .archive-toggle { padding-inline: 13px; }
  .archive-toggle small { max-width: 185px; }
  .archived-row .row-actions { display: grid; grid-template-columns: 1fr; }
  .archived-row .row-actions .button { width: 100%; }
  .radio-cards { grid-template-columns: 1fr; }
  .schedule-cards { grid-template-columns: 1fr; }
  .schedule-card:last-child { grid-column: auto; }
  .schedule-card > span {
    min-height: 74px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: center;
    column-gap: 10px;
    padding: 11px 13px;
  }
  .schedule-card i { grid-row: 1 / span 2; margin: 0; }
  .modal-header,
  .modal-body { padding-inline: 19px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .button { width: 100%; }
  .habit-insight-table th:nth-child(3),
  .habit-insight-table td:nth-child(3) { display: none; }
  .onboarding-story { min-height: 176px; }
  .onboarding-story-copy { margin-top: 27px; }
  .onboarding-story-copy blockquote { font-size: 2.25rem; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-card { min-height: 82px; }
  .onboarding-actions { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-actions > div { display: grid; grid-template-columns: 1fr; }
  .onboarding-actions .button { width: 100%; }
  .routine-card-head { align-items: flex-start; padding: 19px; }
  .routine-item { padding-inline: 15px; }
  .time-composer { padding-inline: 18px; }
  .onboarding-notification-card { grid-template-columns: 1fr; gap: 17px; padding: 23px 19px; }
  .notification-orbit { width: 68px; height: 68px; grid-row: auto; }
  .notification-card-copy,
  .notification-preview,
  .notification-permission-button,
  .notification-permission-state { grid-column: 1; }
  .notification-permission-button { width: 100%; }
  .ready-card { padding: 22px 19px; }
  .ready-summary { grid-template-columns: 1fr; gap: 14px; }
  .insight-coverage-seal { min-width: 0; }
  .insight-hero { padding-inline: 20px; }
  .consistency-ring { width: 128px !important; height: 128px !important; }
  .consistency-ring .ring-label strong { font-size: 2.15rem; }
  .insight-comparison { width: 100%; }
  .insight-observations > .section-heading { align-items: flex-start; flex-direction: column; }
  .observation-card { grid-template-columns: 34px minmax(0, 1fr); padding: 19px; }
  .observation-mark { width: 34px; height: 34px; }
  .observation-metric { grid-column: 2; }
  .year-card { padding-inline: 17px; }
  .year-heatmap-wrap { margin-right: -17px; }
  .weekday-bars { gap: 5px; }
  .bar-track { width: min(24px, 72%); }
  .mood-chart-card { padding-inline: 18px; }
  .habit-progress-card { padding-inline: 17px; }
  .habit-table-wrap { margin-right: -17px; }
  .insight-support > .section-heading { align-items: flex-start; flex-direction: column; }
  .you-reminder-seal { align-self: flex-start; }
  .reminder-settings > form,
  .habit-reminder-section,
  .reminder-inbox { padding: 19px; }
  .reminder-hero { grid-template-columns: auto minmax(0, 1fr); }
  .reminder-orbit { width: 72px; height: 72px; box-shadow: inset 0 0 0 7px var(--surface); }
  .master-reminder-switch { grid-column: 1 / -1; width: 100%; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: 9px; border-top: 1px solid var(--border); padding-top: 17px; text-align: left; }
  .master-reminder-switch > span { grid-row: 1 / span 2; }
  .master-reminder-switch strong,
  .master-reminder-switch small { margin: 0; }
  .reminder-hero::after { right: 0; }
  .reminder-schedule-card { grid-template-columns: minmax(0, 1fr) auto; }
  .reminder-time-field,
  .quiet-time-pair { grid-column: 1 / -1; }
  .reminder-channel-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .reminder-channel-card .button { grid-column: 2 / -1; }
  .reminder-budget { align-items: flex-start; flex-direction: column; }
  .reminder-settings-footer { align-items: stretch; flex-direction: column; }
  .reminder-settings-footer .button { width: 100%; }
  .habit-reminder-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .habit-reminder-time { grid-column: 2; }
  .habit-reminder-row > .mini-switch { grid-column: 3; grid-row: 1; }
  .habit-reminder-row > .button { grid-column: 3; }
  .habit-reminder-composer { grid-template-columns: minmax(0, 1fr) auto; }
  .habit-modal-reminder-time { grid-column: 1 / -1; }
  .reminder-inbox > .section-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .day-strip { padding-inline: 3px; }
  .day-name { font-size: .64rem; letter-spacing: .02em; }
  .day-number { width: 23px; height: 23px; font-size: .88rem; }
}

@media (max-width: 980px) {
  .settings-directory { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  .settings-directory { padding: 24px 20px; }
  .settings-form-grid,
  .export-choice-grid { grid-template-columns: 1fr; }
  .settings-privacy-toggle { grid-column: auto; }
  .settings-onboarding-card { grid-template-columns: 1fr; gap: 15px; }
  .settings-onboarding-card .data-row { border-top: 1px solid var(--border); border-left: 0; padding: 17px 0 0; }
  .settings-section-heading { flex-direction: column; }
  .settings-local-stamp { align-self: flex-start; }
  .export-choice-grid .button { grid-column: 2; }
  .settings-danger-zone { align-items: flex-start; flex-direction: column; }
  .settings-danger-zone .button { width: 100%; }
}

@media (max-width: 460px) {
  .quiet-time-pair { grid-template-columns: 1fr; gap: 10px; }
  .quiet-time-pair > i { display: none; }
  .settings-directory-links { grid-template-columns: 1fr; }
  .settings-directory-links button:nth-child(odd) { border-right: 0; }
  .settings-card { padding: 21px 18px; }
  .settings-card-number { top: 18px; right: 18px; }
  .settings-choice-pair { grid-template-columns: 1fr; }
  .export-choice-grid article { grid-template-columns: auto minmax(0, 1fr); }
  .export-choice-grid .button { grid-column: 1 / -1; width: 100%; }
  .privacy-inventory > div { grid-template-columns: auto minmax(0, 1fr); }
  .privacy-inventory b { grid-column: 2; justify-self: start; }
  .settings-about-card { grid-template-columns: 1fr; }
  .settings-about-card > .settings-card-number { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .celebration { display: none; }
}

/* Account gate and multi-customer owner console */
body.account-gate-active .side-rail,
body.account-gate-active .mobile-tabs,
body.owner-console-active .side-rail,
body.owner-console-active .mobile-tabs { display: none !important; }

body.account-gate-active .main-stage,
body.owner-console-active .main-stage {
  min-height: 100vh;
  margin-left: 0;
  padding: 0;
}

.account-gate {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(390px, .86fr) minmax(560px, 1.14fr);
  background: var(--bg);
  animation: page-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}

.account-story {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
  padding: clamp(34px, 5vw, 72px);
}

.account-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.account-brand .streaklio-logo { width: 176px; }

.account-brand small {
  margin-left: 12px;
  border-left: 1px solid var(--border-strong);
  color: var(--ink-muted);
  padding-left: 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.account-story > div { max-width: 650px; margin: clamp(70px, 12vh, 150px) 0 72px; }
.account-story .eyebrow { color: var(--accent-mid); }
.account-story h1 {
  max-width: 760px;
  margin: 12px 0 24px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3.3rem, 5.6vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: .94;
}
.account-story > div > p:last-child { max-width: 570px; margin: 0; color: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 1rem; line-height: 1.8; }

.account-promises { display: grid; margin: 0; padding: 0; list-style: none; }
.account-promises li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; border-top: 1px solid color-mix(in srgb, var(--surface) 16%, transparent); padding: 18px 0; }
.account-promises li > span { color: var(--accent-mid); font-family: "Fraunces", Georgia, serif; font-size: .8rem; }
.account-promises strong,
.account-promises small { display: block; }
.account-promises strong { margin-bottom: 4px; font-size: .9rem; }
.account-promises small { color: color-mix(in srgb, var(--surface) 66%, transparent); font-size: .8rem; line-height: 1.55; }

.account-panel {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 6vw, 94px);
}

.account-panel-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 34px; }
.step-seal { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; }
.account-panel-heading h2 { margin: 5px 0 7px; font-size: clamp(2rem, 3.3vw, 3.2rem); }
.account-panel-heading p:last-child { margin: 0; color: var(--ink-muted); font-size: .9rem; }
.account-form { display: grid; gap: 22px; }
.account-form fieldset { margin: 0; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-soft); }
.account-form legend { padding: 0 10px; color: var(--ink-muted); font-size: .78rem; }
.account-form legend span { margin-right: 7px; color: var(--ink); font-size: .9rem; font-weight: 700; }
.account-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-field-grid .field-group,
.account-form.compact .field-group { margin: 0; }
.account-submit { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-submit p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink-muted); font-size: .8rem; }
.account-submit p span { color: var(--success); }

.login-gate {
  min-height: 100dvh;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
  align-items: stretch;
  background: var(--bg);
}
.login-context {
  position: relative;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #302a2a;
  color: #fffaf7;
  padding: clamp(34px, 5vw, 72px);
}
.owner-login-gate .login-context { background: #2d292f; }
.etsy-signup-gate .login-context { background: #3b292b; }
.login-context::before,
.login-context::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.login-context::before { width: 42vw; height: 42vw; right: -23vw; bottom: -21vw; }
.login-context::after { width: 27vw; height: 27vw; right: -15vw; bottom: -14vw; }
.login-context .account-brand { position: relative; z-index: 1; }
.login-context-copy { position: relative; z-index: 1; max-width: 660px; margin: clamp(70px, 13vh, 150px) 0 56px; }
.login-context-copy .eyebrow { color: var(--accent-mid); }
.login-context-copy h2 {
  max-width: 760px;
  margin: 12px 0 24px;
  color: inherit;
  font-size: clamp(3.4rem, 5.7vw, 6.7rem);
  font-weight: 300;
  letter-spacing: -.052em;
  line-height: .92;
  text-wrap: balance;
}
.login-context-copy > p:last-child { max-width: 590px; margin: 0; color: rgba(255, 250, 247, .7); font-size: 1rem; line-height: 1.8; text-wrap: pretty; }
.login-context-list { position: relative; z-index: 1; display: grid; margin: 0; padding: 0; list-style: none; }
.login-context-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; border-top: 1px solid rgba(255, 250, 247, .14); padding: 16px 0; }
.login-context-list li > span { color: var(--accent-mid); font-family: "Fraunces", Georgia, serif; font-size: .78rem; }
.login-context-list strong,
.login-context-list small { display: block; }
.login-context-list strong { margin-bottom: 4px; font-size: .86rem; font-weight: 600; }
.login-context-list small { color: rgba(255, 250, 247, .6); font-size: .76rem; line-height: 1.5; }
.login-context-foot { position: relative; z-index: 1; margin: 28px 0 0; color: rgba(255, 250, 247, .48); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.login-card {
  width: min(100%, 660px);
  align-self: center;
  justify-self: center;
  background: transparent;
  padding: clamp(40px, 7vw, 92px);
  text-align: left;
}
.login-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: clamp(56px, 10vh, 110px); }
.login-wordmark { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.login-wordmark .streaklio-logo { width: 160px; }
.portal-label { color: var(--ink-muted); font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.login-flower { position: relative; display: grid; width: 66px; height: 66px; margin: 0 0 28px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; }
.login-flower i { position: absolute; inset: 9px; border: 1px solid var(--border); border-radius: 50%; }
.login-card h1 { max-width: 640px; margin: 8px 0 14px; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.login-card > p:not(.eyebrow) { max-width: 560px; margin: 0 0 34px; color: var(--ink-muted); font-size: .94rem; line-height: 1.75; text-wrap: pretty; }
.account-form.compact { text-align: left; }
.password-field { position: relative; display: block; }
.password-field .input { padding-right: 78px; }
.password-field button { position: absolute; top: 50%; right: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--accent-strong); padding: 7px 9px; font: inherit; font-size: .7rem; font-weight: 700; transform: translateY(-50%); cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.password-field button:hover { background: var(--surface-3); }
.password-field button:active { transform: translateY(calc(-50% + 1px)); }
.password-field button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.login-form-error { margin: -8px 0 0; border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); padding: 11px 13px; font-size: .76rem; line-height: 1.5; }
.account-login-button { width: 100%; margin-top: 4px; }
.login-privacy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 22px; border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); padding: 14px; text-align: left; }
.login-privacy > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.login-privacy strong,
.login-privacy small { display: block; }
.login-privacy strong { font-size: .78rem; }
.login-privacy small { margin-top: 3px; color: var(--ink-muted); font-size: .72rem; line-height: 1.5; }
.login-help-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.login-help-row p { margin: 0; color: var(--ink-muted); font-size: .72rem; line-height: 1.5; }
.login-inline-action { border: 0; background: transparent; color: var(--accent-strong); padding: 0; font: inherit; font-size: .78rem; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; cursor: pointer; }
.login-inline-action:hover { text-decoration-color: currentColor; }
.login-inline-action:focus-visible { border-radius: 5px; outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 4px; }
.login-switch-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--accent-strong); font-size: .74rem; font-weight: 700; text-decoration: none; }
.login-switch-link span { transition: transform 180ms ease; }
.login-switch-link:hover span { transform: translateX(3px); }
.etsy-signup-card { width: min(100%, 700px); }
.etsy-signup-card .login-card-topline { margin-bottom: clamp(32px, 5vh, 58px); }
.etsy-signup-card .login-flower { width: 58px; height: 58px; margin-bottom: 22px; }
.etsy-signup-card h1 { font-size: clamp(3.1rem, 4.8vw, 5.2rem); }
.etsy-signup-card > p:not(.eyebrow) { margin-bottom: 24px; }
.etsy-signup-form { gap: 15px; }
.etsy-signup-form .field-hint { margin-top: 6px; }
.etsy-portal-label { border: 1px solid var(--border); border-radius: 99px; background: var(--surface); padding: 7px 10px; }
.etsy-order-seal { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.etsy-activation-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; text-align: left; }
.etsy-activation-note > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--accent-strong); }
.etsy-activation-note p { min-width: 0; margin: 0; }
.etsy-activation-note strong,
.etsy-activation-note small { display: block; }
.etsy-activation-note strong { font-size: .78rem; }
.etsy-activation-note small { margin-top: 3px; color: var(--ink-muted); font-size: .7rem; line-height: 1.45; }
.setup-pending-gate { grid-template-columns: 1fr; place-items: center; padding: 24px; }
.setup-pending-gate .login-card { border: 1px solid var(--border); border-radius: 28px; background: var(--surface); padding: clamp(34px, 6vw, 64px); box-shadow: var(--shadow-lift); }
.setup-pending-gate .login-wordmark { margin-bottom: 64px; }
.account-error-panel { max-width: 650px; margin: 0 auto; text-align: center; }
.account-error-panel .account-mark { font-size: 2.5rem; }
.account-error-panel h1 { margin: 8px 0; }

.owner-console { min-height: 100vh; background: var(--bg); padding: 0 clamp(24px, 5vw, 76px) 80px; animation: page-in 260ms cubic-bezier(.22, 1, .36, 1) both; }
.owner-topbar { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.owner-identity { display: flex; align-items: center; gap: 11px; }
.owner-identity > span,
.customer-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; }
.owner-identity p { margin: 0 6px 0 0; }
.owner-identity strong,
.owner-identity small { display: block; }
.owner-identity strong { font-size: .8rem; }
.owner-identity small { color: var(--ink-muted); font-size: .72rem; }
.owner-hero { display: flex; align-items: end; justify-content: space-between; gap: 36px; padding: clamp(54px, 8vw, 106px) 0 46px; }
.owner-hero h1 { max-width: 850px; margin: 9px 0 18px; font-size: clamp(3rem, 6vw, 6.8rem); line-height: .93; }
.owner-hero > div > p:last-child { max-width: 660px; margin: 0; color: var(--ink-muted); font-size: .95rem; line-height: 1.7; }
.owner-hero > .button { flex: 0 0 auto; }
.owner-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.owner-metrics article { position: relative; min-height: 184px; border-right: 1px solid var(--border); padding: 28px 30px; }
.owner-metrics article:last-child { border-right: 0; }
.owner-metrics article > span { position: absolute; top: 18px; right: 20px; color: var(--ink-subtle); font-family: "Fraunces", Georgia, serif; font-size: .76rem; }
.owner-metrics small { display: block; color: var(--ink-muted); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.owner-metrics strong { display: block; margin: 18px 0 8px; font-family: "Fraunces", Georgia, serif; font-size: 3.4rem; font-weight: 300; line-height: 1; }
.owner-metrics p { margin: 0; color: var(--ink-muted); font-size: .76rem; }
.owner-privacy-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 24px 0 56px; border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--success-soft) 62%, var(--surface)); padding: 16px 18px; }
.owner-privacy-note > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--success); }
.owner-privacy-note strong { font-size: .84rem; }
.owner-privacy-note p { margin: 3px 0 0; color: var(--ink-muted); font-size: .76rem; }
.customer-directory { max-width: 1500px; margin: 0 auto; }
.customer-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.customer-directory-heading h2 { margin: 2px 0 0; font-size: 2.1rem; }
.customer-directory-heading > span { color: var(--ink-muted); font-size: .78rem; }
.customer-list { display: grid; gap: 10px; }
.customer-card { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(370px, 1fr) auto; align-items: center; gap: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 20px; box-shadow: var(--shadow-soft); }
.customer-card.is-disabled { background: var(--surface-2); opacity: .76; }
.customer-main { display: flex; min-width: 0; align-items: center; gap: 14px; }
.customer-main > div { min-width: 0; }
.customer-name-line { display: flex; align-items: center; gap: 9px; }
.customer-name-line h3 { overflow: hidden; margin: 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-main p { overflow: hidden; margin: 3px 0; color: var(--ink-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-main small { color: var(--ink-subtle); font-size: .7rem; }
.customer-etsy-order { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; margin: 7px 0 5px; border-radius: 99px; background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface)); color: var(--accent-strong); padding: 5px 8px; font-size: .67rem; }
.customer-etsy-order i { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--surface); font-family: "Fraunces", Georgia, serif; font-size: .65rem; font-style: normal; }
.customer-etsy-order strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-etsy-order + small { display: block; }
.account-status { display: inline-flex; width: fit-content; align-items: center; gap: 6px; border-radius: 99px; background: var(--surface-3); color: var(--ink-muted); padding: 4px 8px; font-size: .66rem; font-weight: 700; }
.account-status.is-active { background: var(--success-soft); color: var(--success); }
.account-status.is-active::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.customer-usage { display: grid; grid-template-columns: repeat(4, minmax(68px, 1fr)); gap: 6px; }
.customer-usage span { border-left: 1px solid var(--border); padding-left: 14px; }
.customer-usage strong,
.customer-usage small { display: block; }
.customer-usage strong { font-size: .9rem; }
.customer-usage small { margin-top: 3px; color: var(--ink-muted); font-size: .66rem; }
.customer-actions { display: flex; justify-content: flex-end; gap: 6px; }
.owner-empty { display: grid; min-height: 280px; place-items: center; align-content: center; border: 1px dashed var(--border-strong); border-radius: 22px; color: var(--ink-muted); text-align: center; }
.owner-empty > span { font-family: "Fraunces", Georgia, serif; font-size: 2rem; }
.owner-empty h3 { margin: 8px 0 2px; color: var(--ink); }
.owner-empty p { margin: 0; font-size: .82rem; }

.workspace-boundary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center; border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border)); border-radius: 15px; background: var(--success-soft); padding: 13px; }
.workspace-boundary > span { color: var(--success); }
.workspace-boundary strong,
.workspace-boundary small { display: block; }
.workspace-boundary strong { font-size: .8rem; }
.workspace-boundary small { margin-top: 2px; color: var(--ink-muted); font-size: .74rem; }
.account-profile-meta { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.account-profile-meta small { color: var(--ink-muted); font-size: .74rem; }
.account-signout-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 20px; }
.account-signout-row strong,
.account-signout-row span { display: block; }
.account-signout-row strong { font-size: .86rem; }
.account-signout-row span { margin-top: 3px; color: var(--ink-muted); font-size: .76rem; }

@media (max-width: 1120px) {
  .account-gate { grid-template-columns: minmax(330px, .72fr) minmax(500px, 1.28fr); }
  .account-story { padding: 40px; }
  .account-panel { padding: 45px; }
  .customer-card { grid-template-columns: minmax(250px, 1fr) minmax(330px, 1fr); }
  .customer-actions { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .account-gate { grid-template-columns: 1fr; }
  .account-story { min-height: auto; padding: 28px 24px 32px; }
  .account-story > div { margin: 70px 0 38px; }
  .account-story h1 { font-size: clamp(3rem, 12vw, 5rem); }
  .account-promises { display: none; }
  .account-panel { min-height: auto; padding: 42px 24px 60px; }
  .owner-topbar { align-items: flex-start; padding: 20px 0; }
  .owner-identity { flex-wrap: wrap; justify-content: flex-end; }
  .owner-identity p { display: none; }
  .owner-hero { align-items: flex-start; flex-direction: column; }
  .owner-metrics { grid-template-columns: 1fr; }
  .owner-metrics article { min-height: 132px; border-right: 0; border-bottom: 1px solid var(--border); }
  .owner-metrics article:last-child { border-bottom: 0; }
  .owner-privacy-note { grid-template-columns: auto minmax(0, 1fr); }
  .owner-privacy-note .button { grid-column: 2; justify-self: start; }
  .customer-card { grid-template-columns: 1fr; }
  .customer-usage { padding-top: 10px; }
  .customer-actions { grid-column: auto; justify-content: flex-start; }
  .login-context { min-height: auto; padding: 30px 28px 34px; }
  .login-context-copy { margin: 72px 0 0; }
  .login-context-copy h2 { max-width: 640px; font-size: clamp(3.2rem, 11vw, 5.6rem); }
  .login-context-copy > p:last-child { max-width: 610px; }
  .login-context-list,
  .login-context-foot { display: none; }
  .login-card { width: min(100%, 680px); padding: 52px 28px 68px; }
  .login-card-topline { margin-bottom: 58px; }
  .etsy-signup-card .login-card-topline { margin-bottom: 38px; }
}

@media (max-width: 560px) {
  .account-field-grid { grid-template-columns: 1fr; }
  .account-submit { align-items: stretch; flex-direction: column; }
  .account-submit .button { width: 100%; }
  .login-gate { padding: 0; }
  .login-context { padding: 24px 20px 28px; }
  .login-context-copy { margin: 56px 0 0; }
  .login-context-copy h2 { margin-bottom: 18px; font-size: 3.1rem; }
  .login-context-copy > p:last-child { font-size: .88rem; line-height: 1.65; }
  .login-card { padding: 38px 20px 50px; }
  .login-card-topline { align-items: flex-start; margin-bottom: 48px; }
  .portal-label { max-width: 100px; text-align: right; }
  .login-flower { width: 58px; height: 58px; }
  .login-card h1 { font-size: 3.2rem; }
  .login-help-row { align-items: flex-start; flex-direction: column; }
  .etsy-activation-note { grid-template-columns: auto minmax(0, 1fr); }
  .etsy-activation-note .login-switch-link { grid-column: 2; justify-self: start; }
  .setup-pending-gate { padding: 14px; }
  .setup-pending-gate .login-card { border-radius: 24px; padding: 32px 20px; }
  .owner-console { padding-inline: 16px; }
  .owner-topbar .account-brand small { display: none; }
  .owner-identity > span { display: none; }
  .owner-hero { padding-top: 54px; }
  .owner-hero h1 { font-size: 3.25rem; }
  .owner-hero > .button { width: 100%; }
  .owner-privacy-note { grid-template-columns: 1fr; }
  .owner-privacy-note .button { grid-column: auto; width: 100%; }
  .customer-directory-heading { align-items: flex-start; flex-direction: column; }
  .customer-main small { display: block; white-space: normal; }
  .customer-usage { grid-template-columns: repeat(2, 1fr); gap: 13px 4px; }
  .customer-actions { display: grid; grid-template-columns: 1fr; }
  .customer-actions .button { width: 100%; }
  .account-signout-row { align-items: stretch; flex-direction: column; }
  .account-signout-row .button { width: 100%; }
}