:root {
  color-scheme: dark;
  --color-bg: #101514;
  --color-bg-deep: #0b0f0e;
  --color-surface: #171d1b;
  --color-surface-raised: #1d2522;
  --color-surface-soft: #202a26;
  --color-text: #f3f7f5;
  --color-text-muted: #a8b5b0;
  --color-text-faint: #81908a;
  --color-primary: #7ef0c3;
  --color-primary-strong: #53d9a4;
  --color-primary-ink: #08261b;
  --color-secondary: #f2b56b;
  --color-danger: #e38a89;
  --color-border: rgba(217, 239, 231, 0.1);
  --color-border-strong: rgba(126, 240, 195, 0.3);
  --color-scrim: rgba(3, 7, 6, 0.66);
  --gradient-primary: linear-gradient(135deg, #8bf3cb 0%, #5cdda9 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.24);
  --shadow-glow: 0 0 64px rgba(92, 221, 169, 0.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --content-max: 720px;
  --nav-height: 72px;
  --z-base: 0;
  --z-sticky: 20;
  --z-toast: 50;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-standard: 220ms;
  --background: var(--color-bg);
  --surface: var(--color-surface);
  --surface-raised: var(--color-surface-raised);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --mint: var(--color-primary);
  --amber: var(--color-secondary);
  --danger: var(--color-danger);
  --border: var(--color-border);
  --radius-xl: var(--radius-lg);
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --shadow-lg: var(--shadow-md);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f3f7f5;
  --color-bg-deep: #e8eeeb;
  --color-surface: #ffffff;
  --color-surface-raised: #f9fbfa;
  --color-surface-soft: #e7efeb;
  --color-text: #14201c;
  --color-text-muted: #53645e;
  --color-text-faint: #687a73;
  --color-primary: #087a54;
  --color-primary-strong: #066243;
  --color-primary-ink: #ffffff;
  --color-secondary: #9a590e;
  --color-border: rgba(22, 56, 44, 0.13);
  --color-border-strong: rgba(8, 122, 84, 0.3);
  --color-scrim: rgba(10, 22, 18, 0.5);
  --gradient-primary: linear-gradient(135deg, #0b875e 0%, #076d4b 100%);
  --shadow-sm: 0 1px 2px rgba(27, 54, 44, 0.08);
  --shadow-md: 0 14px 36px rgba(27, 54, 44, 0.12);
  --shadow-glow: 0 0 64px rgba(8, 122, 84, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-bg-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  background:
    radial-gradient(circle at 86% -8%, rgba(126, 240, 195, 0.08), transparent 32rem),
    var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
}

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

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

button {
  cursor: pointer;
}

img,
svg {
  display: block;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

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

h1,
h2 {
  text-wrap: balance;
}

h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(2rem, 9vw, 3.5rem);
  font-weight: 660;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

p {
  color: var(--color-text-muted);
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
}

.app-header {
  display: flex;
  width: min(100%, calc(var(--content-max) + (var(--space-6) * 2)));
  min-height: 76px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.brand-name,
.brand-tagline {
  margin: 0;
}

.brand-name {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand-tagline {
  font-size: 0.75rem;
  line-height: 1.3;
}

.privacy-chip,
.status-dot {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.privacy-chip {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 620;
}

.privacy-chip svg {
  width: 14px;
  height: 14px;
}

.app-main {
  width: min(100%, calc(var(--content-max) + (var(--space-6) * 2)));
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-8));
}

.view {
  animation: view-enter var(--duration-standard) var(--ease-standard);
}

.date-row {
  display: flex;
  margin: 0 2px var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 720;
  letter-spacing: 0.115em;
  line-height: 1.35;
  text-transform: uppercase;
}

.date-row .eyebrow {
  margin: 0;
  color: var(--color-text-muted);
}

.status-dot {
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: 0.75rem;
  font-weight: 600;
}

.status-dot > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(126, 240, 195, 0.08);
}

.hero-card,
.surface-card,
.empty-state,
.info-note {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.hero-card {
  position: relative;
  min-height: 426px;
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
}

.hero-card::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(155deg, rgba(126, 240, 195, 0.055), transparent 46%);
  content: "";
}

.hero-glow {
  position: absolute;
  top: -7rem;
  right: -7rem;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: rgba(126, 240, 195, 0.11);
  filter: blur(64px);
}

.control-orbit {
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  margin-bottom: var(--space-8);
  place-items: center;
}

.control-orbit > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-72deg);
}

.orbit-track,
.orbit-progress {
  fill: none;
  stroke-width: 6;
}

.orbit-track {
  stroke: var(--color-surface-soft);
}

.orbit-progress {
  stroke: var(--color-primary);
  stroke-dasharray: 254 415;
  filter: drop-shadow(0 0 6px rgba(126, 240, 195, 0.28));
}

.control-orbit > img {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: var(--shadow-glow);
}

.orbit-spark {
  position: absolute;
  top: 11px;
  right: 16px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 14px rgba(242, 181, 107, 0.32);
}

.hero-eyebrow {
  margin-bottom: var(--space-3);
}

.hero-card h1 {
  max-width: 11ch;
}

.hero-copy {
  max-width: 42rem;
  margin-bottom: var(--space-6);
  font-size: 1rem;
}

.foundation-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.foundation-status span {
  display: inline-flex;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.025);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 620;
}

.foundation-status svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  stroke-width: 2.2;
}

.surface-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
}

.next-card {
  display: grid;
  margin-top: var(--space-4);
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
}

.next-card p:last-child {
  margin-bottom: 0;
}

.card-icon,
.empty-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--color-primary);
}

.card-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: rgba(126, 240, 195, 0.07);
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.section-heading {
  padding: var(--space-6) var(--space-2) var(--space-5);
}

.section-heading h1 {
  font-size: clamp(2.5rem, 10vw, 4rem);
}

.section-heading > p:last-child {
  max-width: 36rem;
  margin-bottom: 0;
}

.empty-state {
  display: flex;
  min-height: 320px;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  border-radius: 20px;
  background: var(--color-surface-soft);
}

.empty-icon svg {
  width: 28px;
  height: 28px;
}

.empty-state p {
  max-width: 34rem;
  margin-bottom: 0;
}

.settings-preview dl {
  margin: 0;
}

.settings-preview dl > div {
  display: flex;
  min-height: 56px;
  padding: var(--space-3) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.settings-preview dl > div:first-child {
  padding-top: 0;
}

.settings-preview dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-preview dt {
  color: var(--color-text-muted);
}

.settings-preview dd {
  margin: 0;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
}

.info-note {
  display: grid;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
}

.info-note > svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-secondary);
}

.info-note p {
  margin-bottom: 0;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
  padding: 0 var(--space-3) env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bottom-nav-inner {
  display: grid;
  width: min(100%, 560px);
  min-height: var(--nav-height);
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.nav-item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 56px;
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: 14px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: transparent;
  color: var(--color-text-faint);
  transition:
    background-color var(--duration-fast) ease-out,
    color var(--duration-fast) ease-out,
    opacity var(--duration-fast) ease-out;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nav-item span {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: rgba(126, 240, 195, 0.05);
  color: var(--color-text-muted);
}

.nav-item:active {
  opacity: 0.72;
}

.nav-item.is-active {
  background: rgba(126, 240, 195, 0.09);
  color: var(--color-primary);
}

.nav-item.is-active::before {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  content: "";
}

.app-message {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  left: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  max-width: 560px;
  min-height: 56px;
  margin: 0 auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  align-items: center;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  gap: var(--space-3);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  animation: toast-enter var(--duration-standard) var(--ease-standard);
}

.app-message > svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.app-message p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.875rem;
}

.app-message button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: transparent;
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) ease-out;
}

.app-message button:hover {
  background: var(--color-surface-soft);
}

.app-message button svg {
  width: 20px;
  height: 20px;
}

.app-message.is-error {
  border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
}

.app-message.is-error > svg {
  color: var(--color-danger);
}

.noscript-message {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-toast);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  text-align: center;
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (min-width: 600px) {
  .app-header,
  .app-main {
    padding-right: var(--space-6);
    padding-left: var(--space-6);
  }

  .hero-card {
    min-height: 400px;
    padding: var(--space-10);
  }

  .hero-card h1 {
    max-width: 14ch;
  }
}

@media (min-width: 900px) {
  .app-header {
    min-height: 88px;
  }

  .app-main {
    padding-top: var(--space-6);
  }

  .hero-card {
    padding-right: 13.5rem;
  }

  .control-orbit {
    position: absolute;
    top: 50%;
    right: var(--space-10);
    width: 154px;
    height: 154px;
    margin: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 359px) {
  .privacy-chip {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .privacy-chip svg {
    width: 18px;
    height: 18px;
  }

  .privacy-chip {
    color: transparent;
    font-size: 0;
  }

  .privacy-chip svg {
    color: var(--color-text-muted);
  }

  .hero-card {
    padding: var(--space-6) var(--space-5);
  }

  .next-card {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .app-header {
    min-height: 64px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .hero-card {
    min-height: 300px;
  }

  .control-orbit {
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-4);
  }
}

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

/* Stage 4: History and Evidence */
.history-controls,.history-metrics,.detail-metrics,.evidence-grid{display:grid;gap:var(--space-3)}
.history-controls{grid-template-columns:repeat(2,minmax(0,1fr));margin-block:var(--space-5) var(--space-2)}
.history-controls .field-group{margin:0}.filter-result{min-height:1.4em;margin:0 0 var(--space-3);color:var(--text-muted);font-size:var(--text-sm)}
.history-list,.evidence-sections,.streak-list{display:grid;gap:var(--space-4)}
.history-day-card{width:100%;padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--mint) 6%),var(--surface));color:var(--text);text-align:left;box-shadow:var(--shadow-sm);transition:transform 180ms ease,border-color 180ms ease}
.history-day-card:hover{border-color:color-mix(in srgb,var(--mint) 45%,var(--border))}.history-day-card:active{transform:scale(.99)}
.history-day-heading,.history-rewards,.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.history-day-heading h2{margin:var(--space-2) 0 0;font-size:var(--text-xl)}
.day-type-badge{display:inline-flex;min-height:28px;align-items:center;padding:0 var(--space-3);border-radius:999px;background:var(--surface-raised);color:var(--mint);font-size:var(--text-xs);font-weight:750}
.history-count{display:flex;align-items:baseline;gap:4px;color:var(--text-muted)}.history-count strong{color:var(--text);font-size:clamp(2rem,8vw,2.75rem);line-height:1}
.history-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--space-5) 0}
.history-metrics div,.detail-metrics div{min-width:0;padding:var(--space-3);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-raised) 82%,transparent)}
.history-metrics dt,.detail-metrics span{color:var(--text-muted);font-size:var(--text-xs)}.history-metrics dd{margin:var(--space-1) 0 0;color:var(--text);font-weight:750}
.history-rewards{justify-content:flex-start;flex-wrap:wrap;color:var(--text-muted);font-size:var(--text-xs)}.history-rewards span{padding:var(--space-2) var(--space-3);border-radius:999px;background:var(--surface-raised)}.history-rewards .is-clear{color:var(--mint)}
.history-open{display:block;margin-top:var(--space-4);color:var(--mint);font-size:var(--text-sm);font-weight:750}
.detail-dialog{width:min(720px,calc(100% - 24px));max-height:min(88dvh,900px);margin:auto;padding:var(--space-5);overflow:auto;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--background);color:var(--text);box-shadow:var(--shadow-lg)}
.detail-dialog::backdrop{background:rgb(0 0 0/.72);backdrop-filter:blur(5px)}.detail-header h2{margin:var(--space-1) 0;font-size:var(--text-2xl)}.detail-header p:last-child{margin:0;color:var(--text-muted)}
.detail-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-block:var(--space-5)}.detail-metrics strong{display:block;margin-top:var(--space-1);overflow-wrap:anywhere}
.timeline{position:relative;display:grid}.timeline-item{display:grid;grid-template-columns:70px 18px minmax(0,1fr);gap:var(--space-2);min-width:0}.timeline-item time{padding-top:var(--space-4);color:var(--text-muted);font-size:var(--text-xs);text-align:right}.timeline-marker{position:relative}
.timeline-marker::before{position:absolute;top:22px;left:5px;width:8px;height:8px;border:2px solid var(--background);border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px color-mix(in srgb,var(--mint) 35%,transparent);content:"";z-index:1}
.timeline-marker::after{position:absolute;top:28px;bottom:-1px;left:8px;width:1px;background:var(--border);content:""}.timeline-item:last-child .timeline-marker::after{display:none}
.timeline-copy{min-width:0;padding:var(--space-4);border-bottom:1px solid var(--border)}.timeline-copy p{margin:0;overflow-wrap:anywhere}.timeline-copy .timeline-type{margin-bottom:var(--space-1);color:var(--text);font-weight:800}.timeline-detail{margin-top:var(--space-2)!important;color:var(--amber);font-size:var(--text-sm)}
.timeline-actions{display:flex;gap:var(--space-4);margin-top:var(--space-3)}.text-button{min-height:44px;padding:0;border:0;background:transparent;color:var(--mint);font:inherit;font-weight:750}.text-button.is-danger{color:var(--danger)}
.strongest-evidence{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);margin-block:var(--space-5);padding:var(--space-5);border:1px solid color-mix(in srgb,var(--mint) 38%,var(--border));border-radius:var(--radius-xl);background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--mint) 14%,transparent),transparent 45%),var(--surface)}
.strongest-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--mint) 16%,transparent);color:var(--mint)}.strongest-icon svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.strongest-evidence h2{margin:var(--space-1) 0 var(--space-2);font-size:var(--text-xl)}.strongest-evidence p:last-child{margin:0;color:var(--text-muted)}
.evidence-period{padding-top:var(--space-2)}.evidence-period>h2{margin:0 0 var(--space-3);font-size:var(--text-xl)}.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.evidence-card{min-width:0;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.evidence-card p,.evidence-card span{margin:0;color:var(--text-muted);font-size:var(--text-sm)}.evidence-card strong{display:block;margin-block:var(--space-2);color:var(--text);font-size:clamp(1.35rem,5vw,1.8rem);line-height:1.15;overflow-wrap:anywhere}.evidence-empty{border-style:dashed}.evidence-empty strong{color:var(--amber);font-size:var(--text-base)}
.streak-section{margin-top:var(--space-7)}.streak-note{margin-top:0;color:var(--text-muted);font-size:var(--text-sm)}
.streak-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.streak-card p{margin:0;font-weight:750}.streak-card div{min-width:54px;text-align:center}.streak-card strong,.streak-card span{display:block}.streak-card strong{color:var(--mint);font-size:var(--text-xl)}.streak-card span{color:var(--text-muted);font-size:var(--text-xs)}
.inline-error{padding:var(--space-4);border:1px solid color-mix(in srgb,var(--danger) 60%,var(--border));border-radius:var(--radius-lg);color:var(--danger)}
.history-cleanup,.detail-danger-zone{display:grid;gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-4);border:1px solid color-mix(in srgb,var(--danger) 42%,var(--border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.history-cleanup h2{margin:var(--space-1) 0;font-size:var(--text-xl)}.history-cleanup p,.detail-danger-zone p{margin:0;color:var(--text-muted)}
.history-cleanup .button,.detail-danger-zone .button{justify-self:start}.cleanup-summary{text-align:left}.cleanup-summary p{margin-bottom:var(--space-2)}.cleanup-summary ul{margin:0;padding-left:1.25rem;color:var(--text-muted)}
@media(max-width:560px){.history-metrics,.detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-dialog{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}}
@media(max-width:350px){.history-controls,.evidence-grid{grid-template-columns:1fr}.history-day-card{padding:var(--space-4)}.timeline-item{grid-template-columns:56px 14px minmax(0,1fr)}.timeline-copy{padding-inline:var(--space-2)}.streak-card{gap:var(--space-2)}.history-cleanup .button,.detail-danger-zone .button{width:100%}}
@media(min-width:800px){.history-list{grid-template-columns:repeat(2,minmax(0,1fr))}.evidence-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.history-day-card{transition:none}}

.settings-form,.settings-card{display:grid;gap:var(--space-4)}.settings-form{margin-top:var(--space-5)}
.settings-card{margin-top:var(--space-5);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.settings-card h2{margin:0;font-size:1.25rem}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.toggle-row{display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.toggle-row span,.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:3px;color:var(--color-text-muted)}.toggle-row input{width:24px;height:24px;accent-color:var(--color-primary)}
.settings-action-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.data-actions>p,.danger-zone>p,.install-guidance p,.medical-note p{margin:0;color:var(--color-text-muted)}
.install-guidance{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.danger-zone{border-color:color-mix(in srgb,var(--color-danger) 45%,var(--color-border))}
.medical-note{margin-top:var(--space-5);padding:var(--space-4);border-left:3px solid var(--color-secondary);font-size:.875rem}
.settings-dialog{width:min(520px,calc(100% - 24px));color:var(--color-text);background:var(--color-surface)}
.import-summary{display:grid;gap:var(--space-2);margin:var(--space-4) 0}.import-summary div{display:flex;justify-content:space-between;gap:var(--space-4)}.import-summary dt{color:var(--color-text-muted)}.import-summary dd{margin:0;text-align:right}.import-warning{color:var(--color-secondary)}
@media(max-width:560px){.settings-grid{grid-template-columns:1fr}.settings-card{padding:var(--space-4)}}

@supports not (backdrop-filter: blur(1px)) {
  .bottom-nav {
    background: var(--color-bg);
  }
}

/* Stage 2 — Today dashboard and focused logging sheets */

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

.today-greeting {
  margin: var(--space-1) 0 0;
  font-size: clamp(1.75rem, 7vw, 2.5rem);
}

.date-row > div {
  min-width: 0;
}

.date-row > div .eyebrow {
  color: var(--color-primary);
}

.delay-resume-card {
  display: flex;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: rgba(126, 240, 195, 0.07);
}

.delay-resume-card h2,
.delay-resume-card p {
  margin-bottom: 0;
}

.delay-resume-card #delay-resume-time {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.progress-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(155deg, rgba(126, 240, 195, 0.055), transparent 46%),
    var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.progress-card-main {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(132px, 42%) minmax(0, 1fr);
  gap: var(--space-5);
}

.control-ring {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 1;
  place-items: center;
}

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

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

.ring-track {
  stroke: var(--color-surface-soft);
}

.ring-value {
  stroke: var(--color-primary);
  stroke-dasharray: 452.4;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 7px rgba(126, 240, 195, 0.24));
  transition: stroke-dashoffset 300ms var(--ease-standard);
}

.ring-copy {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.ring-copy strong {
  color: var(--color-text);
  font-size: clamp(2.35rem, 12vw, 3.75rem);
  font-weight: 720;
  letter-spacing: -0.07em;
  line-height: 1;
}

.ring-copy span {
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 650;
}

.progress-copy .eyebrow {
  margin-bottom: var(--space-2);
}

.progress-copy h2 {
  font-size: clamp(1.2rem, 5vw, 1.65rem);
}

.progress-copy > p:not(.eyebrow) {
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
}

.target-status,
.count-chip {
  display: inline-flex;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.target-status.is-over {
  border-color: color-mix(in srgb, var(--color-secondary) 45%, transparent);
  color: var(--color-secondary);
}

.metric-grid {
  display: grid;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.metric-grid > div {
  min-width: 0;
}

.metric-grid dt {
  color: var(--color-text-faint);
  font-size: 0.7rem;
  font-weight: 620;
  line-height: 1.3;
}

.metric-grid dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text);
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  font-weight: 690;
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.today-actions {
  display: grid;
  margin-top: var(--space-4);
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.button {
  display: inline-flex;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 690;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color var(--duration-fast) ease-out,
    border-color var(--duration-fast) ease-out,
    color var(--duration-fast) ease-out,
    opacity var(--duration-fast) ease-out,
    box-shadow var(--duration-fast) ease-out,
    transform var(--duration-fast) ease-out;
}

.button:hover {
  filter: brightness(1.04);
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.button svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke-width: 2;
}

.button-large {
  min-height: 58px;
  border-radius: 14px;
  font-size: 1rem;
}

.button-compact {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

.button-primary {
  background: var(--gradient-primary);
  color: var(--color-primary-ink);
  box-shadow: 0 8px 24px rgba(83, 217, 164, 0.13);
}

.button-secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.button-tertiary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

.button-danger {
  border-color: color-mix(in srgb, var(--color-danger) 54%, transparent);
  background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface));
  color: #ffd7d6;
}

.today-log-section {
  margin-top: var(--space-6);
}

.section-title-row {
  display: flex;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-title-row h2,
.section-title-row .eyebrow {
  margin-bottom: 0;
}

.today-log-list {
  display: grid;
  gap: var(--space-3);
}

.inline-empty {
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}

.inline-empty p {
  margin-bottom: var(--space-1);
}

.inline-empty p:last-child {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.inline-empty strong {
  color: var(--color-text);
}

.smoke-entry {
  display: grid;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.smoke-entry-time {
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.smoke-entry-meta,
.smoke-entry-note {
  margin-bottom: 0;
  font-size: 0.8rem;
}

.smoke-entry-note {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.entry-actions {
  display: flex;
  gap: var(--space-2);
}

.entry-button,
.icon-button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) ease-out,
    border-color var(--duration-fast) ease-out,
    color var(--duration-fast) ease-out,
    opacity var(--duration-fast) ease-out;
}

.entry-button:hover,
.icon-button:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.entry-button:active,
.icon-button:active {
  opacity: 0.7;
}

.entry-button svg,
.icon-button svg {
  width: 20px;
  height: 20px;
}

.entry-button.delete-entry {
  color: var(--color-danger);
}

dialog {
  color: var(--color-text);
}

dialog::backdrop {
  background: var(--color-scrim);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.sheet-dialog {
  width: min(100% - var(--space-4), 540px);
  max-height: min(88dvh, 760px);
  margin: auto auto max(env(safe-area-inset-bottom, 0px), var(--space-2));
  padding: var(--space-5);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: sheet-enter var(--duration-standard) var(--ease-standard);
}

.sheet-dialog[open] {
  display: block;
}

.sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.sheet-header {
  display: flex;
  margin-bottom: var(--space-3);
  padding: 0;
  border: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  background: transparent;
}

.sheet-header h2,
.sheet-header .eyebrow {
  margin-bottom: 0;
}

.sheet-header h2 {
  font-size: clamp(1.65rem, 7vw, 2.2rem);
}

.sheet-lead {
  margin-bottom: var(--space-5);
}

.field-group {
  display: grid;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.field-group label,
.delay-picker legend {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 650;
}

.field-group label span {
  margin-left: var(--space-1);
  color: var(--color-text-faint);
  font-size: 0.75rem;
  font-weight: 520;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 16px;
  transition:
    border-color var(--duration-fast) ease-out,
    box-shadow var(--duration-fast) ease-out;
}

.field-group textarea {
  min-height: 88px;
  resize: vertical;
}

.field-group input:hover,
.field-group select:hover,
.field-group textarea:hover {
  border-color: var(--color-border-strong);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(126, 240, 195, 0.12);
}

.field-group input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field-hint,
.field-error {
  margin: 0;
  font-size: 0.75rem;
}

.field-error {
  color: #f3aaaa;
  font-weight: 620;
}

.delay-picker {
  margin-bottom: var(--space-5);
}

.delay-picker fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.delay-picker legend {
  margin-bottom: var(--space-2);
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.choice-row label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.choice-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-row span {
  display: flex;
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 650;
  transition:
    background-color var(--duration-fast) ease-out,
    border-color var(--duration-fast) ease-out,
    color var(--duration-fast) ease-out;
}

.choice-row input:checked + span {
  border-color: var(--color-primary);
  background: rgba(126, 240, 195, 0.1);
  color: var(--color-primary);
}

.choice-row input:focus-visible + span {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.compact-field {
  margin-top: var(--space-3);
}

.sheet-actions {
  display: grid;
  gap: var(--space-2);
}

.safety-copy {
  margin: var(--space-3) 0 0;
  color: var(--color-text-faint);
  font-size: 0.75rem;
  text-align: center;
}

.timer-dialog {
  text-align: center;
}

.timer-dialog .sheet-header {
  text-align: left;
}

.timer-visual {
  position: relative;
  display: grid;
  width: min(66vw, 250px);
  margin: var(--space-4) auto;
  aspect-ratio: 1;
  place-items: center;
}

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

.timer-track,
.timer-progress {
  fill: none;
  stroke-width: 10;
}

.timer-track {
  stroke: var(--color-surface-soft);
}

.timer-progress {
  stroke: var(--color-primary);
  stroke-dasharray: 527.8;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 7px rgba(126, 240, 195, 0.28));
  transition: stroke-dashoffset 1s linear;
}

.timer-copy {
  display: grid;
  gap: var(--space-1);
}

.timer-copy strong {
  color: var(--color-text);
  font-size: clamp(2.5rem, 14vw, 4.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -0.06em;
  line-height: 1;
}

.timer-copy span {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 620;
}

.timer-message {
  min-height: 3em;
  margin: var(--space-4) auto;
  max-width: 34ch;
  color: var(--color-text-muted);
}

.completion-copy {
  display: grid;
  margin-bottom: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  align-items: center;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-3);
  background: rgba(126, 240, 195, 0.07);
  text-align: left;
}

.completion-copy svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  stroke-width: 2.4;
}

.completion-copy strong,
.completion-copy span {
  display: block;
}

.completion-copy span {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.confirm-dialog {
  width: min(100% - var(--space-8), 420px);
  margin: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: dialog-enter var(--duration-standard) var(--ease-standard);
}

.confirm-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 18px;
  place-items: center;
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
}

.confirm-icon svg {
  width: 28px;
  height: 28px;
}

.confirm-actions {
  display: grid;
  margin-top: var(--space-5);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.app-message {
  grid-template-columns: 24px minmax(0, 1fr) auto 44px;
}

.app-message .message-action {
  width: auto;
  min-width: 52px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.app-message .message-dismiss {
  width: 44px;
}

@keyframes sheet-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@media (min-width: 560px) {
  .today-actions {
    grid-template-columns: 1.25fr 1fr;
  }

  .sheet-dialog {
    margin-bottom: auto;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 374px) {
  .progress-card-main {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .progress-card {
    padding: var(--space-4);
  }

  .metric-grid {
    gap: var(--space-2);
  }

  .choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-message {
    right: var(--space-2);
    left: var(--space-2);
    grid-template-columns: 20px minmax(0, 1fr) auto 40px;
    gap: var(--space-2);
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .sheet-dialog {
    max-height: calc(100dvh - var(--space-2));
  }

  .timer-visual {
    width: 150px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .timer-message {
    margin: var(--space-2) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-value,
  .timer-progress {
    transition: none;
  }
}

/* Stage 3: deterministic progression */

.day-type-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.day-type-control h2,
.day-type-control p {
  margin: 0;
}

.day-type-control h2 {
  font-size: 1rem;
}

.day-type-control > div:first-child > p:last-child {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.day-type-field {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: min(48%, 210px);
}

.day-type-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 34px 8px 12px;
}

.day-type-field span {
  color: var(--color-primary);
  font-size: 0.75rem;
  text-align: right;
}

.level-card,
.mission-section,
.achievement-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 42%),
    var(--color-surface);
  box-shadow: var(--shadow-md);
}

.level-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.level-card-top,
.level-progress-copy,
.mission-card-top,
.mission-progress-copy,
.achievement-card-top,
.achievement-progress-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.level-card h2,
.mission-section h2,
.achievement-section h2 {
  margin: 0;
}

.level-card h2 {
  font-size: clamp(1.15rem, 5vw, 1.45rem);
}

.lifetime-xp {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: clamp(1.2rem, 6vw, 1.65rem);
  font-variant-numeric: tabular-nums;
}

.level-progress,
.mission-progress {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 999px;
  background: var(--color-surface-soft);
}

.level-progress {
  height: 10px;
}

.level-progress > span,
.mission-progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary-strong), var(--color-primary));
  transition: width 220ms var(--ease-standard);
}

.level-progress-copy,
.mission-progress-copy {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.recent-xp {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.recent-xp span {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  font-size: 0.78rem;
  white-space: nowrap;
}

.recent-xp strong {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.mission-section,
.achievement-section {
  padding: var(--space-4);
}

.mission-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mission-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}

.mission-card.is-complete {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-raised));
}

.mission-card h3,
.achievement-card h3 {
  margin: 0;
  font-size: 1rem;
}

.mission-card p,
.achievement-card p,
.daily-clear p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mission-reward,
.achievement-state {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
}

.mission-card.is-complete .mission-reward,
.achievement-card.is-unlocked .achievement-state {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.mission-progress {
  height: 7px;
}

.mission-card.is-complete .mission-progress > span {
  width: 100%;
}

.daily-clear {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 42%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 40%),
    var(--color-surface-raised);
}

.daily-clear[hidden] {
  display: none;
}

.daily-clear svg {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 7px;
  color: var(--color-primary-ink);
  background: var(--color-secondary);
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.daily-clear strong {
  color: var(--color-secondary);
  font-size: 1.12rem;
}

.achievement-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.achievement-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-raised);
}

.achievement-card.is-locked {
  opacity: 0.76;
}

.achievement-card.is-unlocked {
  border-color: color-mix(in srgb, var(--color-secondary) 38%, transparent);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--color-secondary) 15%, transparent), transparent 34%),
    var(--color-surface-raised);
}

.achievement-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.achievement-badge {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-faint);
  background: var(--color-surface-soft);
}

.achievement-badge svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.achievement-card.is-unlocked .achievement-badge {
  border-color: color-mix(in srgb, var(--color-secondary) 45%, transparent);
  color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 9%, var(--color-surface-soft));
}

.achievement-requirement,
.achievement-unlocked-at {
  font-size: 0.78rem;
}

.achievement-unlocked-at {
  color: var(--color-primary) !important;
}

.achievement-progress-copy {
  align-items: center;
}

.achievement-progress-copy span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.xp-awarded .lifetime-xp,
.achievement-unlocked .achievement-card.is-unlocked:first-of-type,
.mission-completed .mission-card.is-complete {
  animation: reward-pulse 420ms var(--ease-standard);
}

@keyframes reward-pulse {
  0% {
    opacity: 0.72;
    transform: translateY(3px);
  }
  55% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

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

@media (max-width: 350px) {
  .day-type-control {
    align-items: stretch;
    flex-direction: column;
  }

  .day-type-field {
    justify-items: stretch;
    min-width: 0;
  }

  .day-type-field span {
    text-align: left;
  }

  .level-card-top,
  .mission-card-top,
  .achievement-card-top {
    align-items: flex-start;
  }

  .lifetime-xp {
    font-size: 1.1rem;
  }

  .mission-card,
  .achievement-card,
  .mission-section,
  .achievement-section {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-progress > span,
  .mission-progress > span {
    transition: none;
  }

  .xp-awarded .lifetime-xp,
  .achievement-unlocked .achievement-card.is-unlocked:first-of-type,
  .mission-completed .mission-card.is-complete {
    animation: none;
  }
}