:root {
  color-scheme: light;
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  --shadow-soft-1: 0 6px 16px rgba(26, 43, 33, 0.12);
  --shadow-soft-2: 0 16px 36px rgba(24, 38, 29, 0.07);
  --shadow-soft-3: 0 10px 25px rgba(24, 38, 29, 0.12);
  --focus-ring: #8ab4f8;

  --color-bg-canvas: #f5f7f4;
  --color-bg-soft: #edf5f1;
  --color-surface-1: #ffffff;
  --color-surface-2: #f8fbf8;
  --color-border-default: #d9e1dc;
  --color-border-strong: #b9cbc0;
  --color-text-primary: #1e2a23;
  --color-text-muted: #5f6d64;
  --color-action-primary: #1f7a4e;
  --color-action-primary-strong: #15583a;
  --color-action-primary-soft: #e7f5eb;
  --color-action-primary-soft-border: #cde8d7;

  --color-state-success-bg: #f4fcf6;
  --color-state-success-border: #bde4c9;
  --color-state-success-text: #175b31;
  --color-state-error-bg: #fff3f3;
  --color-state-error-border: #f1b7b7;
  --color-state-error-text: #8d2424;
  --color-state-warning-bg: #fff7ee;
  --color-state-warning-border: #f0c68c;
  --color-state-warning-text: #8a4d0f;

  --gradient-bg-page: linear-gradient(160deg, #f5f7f4 0%, #ecf2ef 55%, #e4efe8 100%);
  --gradient-soft-section: linear-gradient(165deg, #f5faf7 0%, #eff7f2 100%);
  --gradient-soft-cta: linear-gradient(180deg, #f1f8f4 0%, #ecf6f0 100%);

  --dark-color-bg-canvas: #111813;
  --dark-color-bg-soft: #1a251e;
  --dark-color-surface-1: #17211b;
  --dark-color-surface-2: #1e2a22;
  --dark-color-border-default: #2c3b32;
  --dark-color-border-strong: #3a4c41;
  --dark-color-text-primary: #e7efe9;
  --dark-color-text-muted: #a9b8af;
  --dark-color-action-primary: #3aa86f;
  --dark-color-action-primary-strong: #2f8c5d;

  /* Legacy aliases kept for compatibility with existing selectors */
  --bg: var(--color-bg-canvas);
  --surface: var(--color-surface-1);
  --text: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --primary: var(--color-action-primary);
  --primary-strong: var(--color-action-primary-strong);
  --border: var(--color-border-default);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--dark-color-bg-canvas);
  --color-bg-soft: var(--dark-color-bg-soft);
  --color-surface-1: var(--dark-color-surface-1);
  --color-surface-2: var(--dark-color-surface-2);
  --color-border-default: var(--dark-color-border-default);
  --color-border-strong: var(--dark-color-border-strong);
  --color-text-primary: var(--dark-color-text-primary);
  --color-text-muted: var(--dark-color-text-muted);
  --color-action-primary: var(--dark-color-action-primary);
  --color-action-primary-strong: var(--dark-color-action-primary-strong);
  --color-action-primary-soft: #1d3227;
  --color-action-primary-soft-border: #2e4e3e;
  --color-state-success-bg: #163225;
  --color-state-success-border: #2f5d46;
  --color-state-success-text: #b7eacb;
  --color-state-error-bg: #3a2124;
  --color-state-error-border: #6a3940;
  --color-state-error-text: #f5c4c9;
  --color-state-warning-bg: #3b2d17;
  --color-state-warning-border: #71562c;
  --color-state-warning-text: #f6deaf;
  --gradient-bg-page: linear-gradient(160deg, #111813 0%, #16211a 55%, #1a261e 100%);
  --gradient-soft-section: linear-gradient(165deg, #1a281f 0%, #1e2e24 100%);
  --gradient-soft-cta: linear-gradient(180deg, #18251e 0%, #1d2b23 100%);
  --focus-ring: #86b8ff;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--gradient-bg-page);
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, white);
  position: sticky;
  top: 0;
  z-index: 1200;
  backdrop-filter: blur(6px);
}

.brand {
  font-weight: 700;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.95rem;
  align-items: center;
  justify-content: flex-end;
}

.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  color: var(--text);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
  background: var(--color-bg-soft);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--color-bg-soft);
}

.site-nav a.nav-signup-button {
  min-height: 44px;
  padding: 0.65rem 1rem;
  color: #ffffff;
}

.inline-form {
  margin: 0;
}

.nav-button {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: 0.2rem 0.6rem;
  background: var(--color-surface-1);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.alert {
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
}

.alert.error {
  border-color: var(--color-state-error-border);
  background: var(--color-state-error-bg);
  color: var(--color-state-error-text);
}

.alert.success {
  border-color: var(--color-state-success-border);
  background: var(--color-state-success-bg);
  color: var(--color-state-success-text);
}

.page-container {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 1rem;
}

.form-hint {
  margin: -0.2rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.eyebrow {
  margin: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lede {
  margin: 0;
  color: var(--muted);
}

.landing-page .mobile-tabbar {
  display: none;
}

.landing-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
}

.landing-header {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 88%, white);
  background: color-mix(in oklab, var(--surface) 95%, #f8fbf8);
}

.landing-brand {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.landing-nav {
  gap: 0.55rem;
  flex-wrap: nowrap;
  font-size: 0.9rem;
}

.landing-nav .landing-nav-link {
  color: var(--muted);
}

.landing-nav .landing-nav-cta {
  min-height: 40px;
  padding: 0.5rem 0.9rem;
}

.landing-container {
  width: min(1160px, 100%);
  padding-top: 1.45rem;
  padding-bottom: 2.4rem;
}

.landing-hero-section {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.landing-hero-copy,
.landing-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.2rem;
  box-shadow: 0 16px 36px rgba(24, 38, 29, 0.07);
}

.landing-hero-copy h1 {
  margin: 0.4rem 0 0.95rem;
  font-size: clamp(2rem, 5.1vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.landing-hero-copy .lede {
  max-width: 58ch;
  font-size: 1.03rem;
}

.landing-hero-actions {
  margin-top: 1.2rem;
}

.landing-cta-primary,
.landing-cta-secondary {
  min-height: 48px;
  padding-inline: 1.05rem;
}

.landing-reassurance {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.91rem;
}

.landing-preview {
  position: relative;
}

.landing-preview-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.landing-preview-section {
  margin-top: 0.8rem;
}

.landing-preview-section p {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.landing-preview-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.landing-preview li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96rem;
}

.landing-preview .done {
  color: var(--primary);
  font-weight: 700;
}

.landing-preview .todo {
  color: var(--muted);
}

.landing-streak-badge {
  margin: 1rem 0 0;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  background: #e7f5eb;
  border: 1px solid #cde8d7;
  color: var(--primary-strong);
  font-weight: 700;
  font-size: 0.88rem;
}

.landing-social-proof {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--surface) 93%, #f7fbf8);
  padding: 0.9rem 1rem;
  text-align: center;
}

.landing-social-proof p {
  margin: 0;
  color: var(--muted);
}

.landing-social-proof strong {
  color: var(--text);
}

.landing-features,
.landing-how,
.landing-testimonials,
.landing-final-cta {
  margin-top: 1.25rem;
}

.landing-section-head h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
}

.landing-section-subtext {
  margin: 0.7rem 0 0;
  color: var(--muted);
}

.landing-feature-grid {
  margin-top: 0.95rem;
  display: grid;
  gap: 0.9rem;
}

.landing-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(23, 38, 27, 0.1);
}

.landing-feature-icon {
  margin: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7f5eb;
  color: var(--primary);
  font-size: 1rem;
}

.landing-feature-card h3 {
  margin: 0.7rem 0 0.35rem;
  font-size: 1.1rem;
}

.landing-feature-card p {
  margin: 0;
  color: var(--muted);
}

.landing-how {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem;
  background: var(--gradient-soft-section);
}

.landing-steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  position: relative;
}

.landing-steps li {
  position: relative;
  background: #ffffffd9;
  border: 1px solid #dbe7df;
  border-radius: 14px;
  padding: 0.95rem;
}

.landing-step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #cde8d7;
  background: #e7f5eb;
  color: var(--primary-strong);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.landing-steps h3 {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.03rem;
}

.landing-steps p {
  margin: 0;
  color: var(--muted);
}

.landing-testimonial-grid {
  margin-top: 0.95rem;
  display: grid;
  gap: 0.9rem;
}

.landing-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}

.landing-quote {
  margin: 0;
  color: #314139;
  font-size: 1.02rem;
  line-height: 1.5;
}

.landing-quote-author {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.landing-final-cta {
  text-align: center;
  border: 1px solid #d4e4da;
  background: var(--gradient-soft-cta);
  border-radius: 22px;
  padding: 1.4rem 1rem;
}

.landing-final-cta h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
}

.landing-final-cta p {
  margin: 0.7rem auto 0;
  max-width: 58ch;
  color: var(--muted);
}

.landing-final-cta .button {
  margin-top: 1rem;
}

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 1rem;
  background: color-mix(in oklab, var(--surface) 96%, #f7faf8);
}

.landing-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.landing-footer-inner small {
  color: var(--muted);
}

.landing-footer-inner nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.landing-footer-inner nav a {
  color: var(--muted);
  text-decoration: none;
}

.landing-footer-inner nav a:hover,
.landing-footer-inner nav a:focus-visible {
  text-decoration: underline;
}

.actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.button.primary {
  background: var(--color-action-primary);
  color: #ffffff;
  border: 1px solid var(--color-action-primary);
}

.button.primary:hover {
  background: var(--color-action-primary-strong);
  border-color: var(--color-action-primary-strong);
}

.button.secondary {
  background: var(--color-surface-1);
  border: 1px solid var(--border);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}

.button.discord {
  background: #5865f2;
  border: 1px solid #4f5be8;
  color: #ffffff;
}

.button.discord:hover,
.button.discord:focus-visible {
  background: #4f5be8;
  border-color: #4350dd;
}

.button.discord:focus-visible {
  outline: 2px solid color-mix(in oklab, #5865f2 38%, white);
  outline-offset: 2px;
}

.oauth-provider-button {
  width: 100%;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: var(--color-surface-1);
  border: 1px solid #d6dcea;
  border-radius: 10px;
  color: #111827;
  min-height: 46px;
  padding: 0.65rem 0.9rem;
}

.oauth-provider-button:hover:not(:disabled):not([aria-disabled="true"]),
.oauth-provider-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: #f8faff;
  border-color: #bac5dd;
  transform: none;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.08), 0 6px 14px rgba(17, 24, 39, 0.08);
}

.oauth-provider-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.oauth-provider-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oauth-provider-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.oauth-provider-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111827;
}

.oauth-provider-discord .oauth-provider-label {
  color: #1f2a44;
}

.button.pending-action {
  background: #f4b942;
  color: #2c2415;
  border: 1px solid #d79d31;
}

.button.pending-action:hover {
  background: #e4ab3a;
}

.button:hover:not(:disabled):not([aria-disabled="true"]),
.button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  transform: none;
  box-shadow: var(--shadow-soft-1);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.2rem;
  width: min(520px, 100%);
  margin: 0 auto;
}

.auth-card h1 {
  margin: 0 0 0.4rem;
}

.auth-required-card {
  position: relative;
  overflow: hidden;
}

.auth-required-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 169, 123, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(245, 252, 247, 0.72) 100%);
  pointer-events: none;
}

.auth-required-card > * {
  position: relative;
  z-index: 1;
}

.auth-required-points {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.auth-required-point {
  border: 1px solid #d3e6d9;
  background: #fbfefc;
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
}

.auth-required-point h2 {
  margin: 0;
  font-size: 0.98rem;
}

.auth-required-point p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.muted {
  color: var(--muted);
}

.form-stack {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.number-fields {
  display: grid;
  gap: 0.55rem;
}

.form-stack input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
}

.form-stack select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  background: var(--color-surface-1);
}

.auth-form-error {
  margin: 0.1rem 0 0;
  color: #8d2424;
  font-size: 0.9rem;
}

.form-error {
  margin: 0.1rem 0 0;
  color: #8d2424;
  font-size: 0.9rem;
}

.oauth-block {
  margin-top: 1rem;
}

.divider {
  margin: 0 0 0.65rem;
  color: var(--muted);
}

.oauth-grid {
  display: grid;
  gap: 0.55rem;
}

.auth-link {
  margin-top: 1rem;
  color: var(--muted);
}

.auth-legal-note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.account-layout {
  display: grid;
  gap: 0.8rem;
}

.billing-layout {
  display: grid;
  gap: 0.8rem;
}

.billing-card,
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
}

.legal-consent-field {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.94rem;
}

.legal-consent-field input[type="checkbox"] {
  margin-top: 0.16rem;
}

.legal-consent-copy {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.legal-consent-copy a {
  color: inherit;
}

.billing-free-access-note {
  margin-top: 0.65rem;
  color: var(--primary-strong);
  font-weight: 600;
}

.billing-free-access-panel {
  margin-top: 0.65rem;
  margin-bottom: 0.75rem;
  border: 1px dashed var(--color-action-primary-soft-border);
  border-radius: var(--radius-md);
  background: var(--color-action-primary-soft);
  padding: 0.75rem;
}

.billing-free-access-panel p {
  margin: 0;
}

.billing-free-access-panel p + p {
  margin-top: 0.4rem;
  color: var(--muted);
}

.account-card h1,
.account-card h2 {
  margin-top: 0;
}

.account-profile-card {
  background: linear-gradient(150deg, #f4fbf6 0%, #eef7ff 50%, #f8f4ff 100%);
  border-color: #d2e3da;
  grid-column: 1 / -1;
}

.account-settings-shell {
  margin-top: 0.8rem;
  border: 1px solid #cfddd5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.account-settings-header {
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid #d9e7df;
  background: linear-gradient(165deg, #f6fbf8 0%, #f3f8fc 100%);
}

.account-settings-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.account-settings-header .muted {
  margin: 0.2rem 0 0;
}

.account-settings-form {
  margin: 0;
}

.account-settings-rows {
  display: grid;
}

.account-settings-edit-row {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid #e1ebe5;
}

.account-settings-edit-row:last-child {
  border-bottom: 0;
}

.account-settings-name {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.account-settings-hint {
  margin: 0.22rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.account-settings-control {
  display: grid;
  gap: 0.45rem;
}

.account-settings-control input,
.account-settings-control select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #c8d8cf;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  background: #ffffff;
  color: #1f2a23;
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 rgba(20, 36, 27, 0.03);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.account-settings-control input:focus,
.account-settings-control select:focus {
  outline: none;
  border-color: #4f7d68;
  box-shadow: 0 0 0 3px rgba(79, 125, 104, 0.16);
}

.account-settings-control input::placeholder {
  color: #7a887f;
}

.account-settings-control input[readonly] {
  background: #f7faf8;
  color: #4b5a52;
  border-color: #d3dfd8;
  box-shadow: none;
}

.account-settings-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.account-settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  background: linear-gradient(165deg, #eff5f1 0%, #ecf2f8 100%);
  border-top: 1px solid #d9e7df;
}

.account-settings-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 760px) {
  .account-settings-edit-row {
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 640px) {
  .account-settings-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .account-settings-footer .button {
    width: 100%;
    justify-content: center;
  }
}

.account-setting-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.account-setting-value.is-positive {
  color: #1f7a4e;
}

.account-setting-value.is-warning {
  color: #995211;
}

.account-export-topbar {
  margin-bottom: 0.65rem;
}

.export-option-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.export-option-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fcfdfc;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
}

.export-option-card h2 {
  margin: 0;
  font-size: 1.02rem;
}

.provider-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0;
}

.provider-list li:last-child {
  border-bottom: 0;
}

.provider-status.connected {
  color: #1a6a3d;
  font-weight: 600;
}

.status-chip {
  display: inline-flex;
  margin: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.status-chip.positive {
  background: #eaf8ef;
  color: #1f7a4e;
}

.status-chip.warning {
  background: #fff4e7;
  color: #9c5b12;
}

.subscription-list {
  margin: 0.75rem 0 0;
  padding: 0 0 0 1rem;
  color: var(--muted);
}

.full {
  width: 100%;
  margin-top: 0.65rem;
}

.app-dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
}

.history-note {
  margin: 0;
  font-size: 0.88rem;
}

.history-panel {
  margin-top: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}

.history-day-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.history-day-card {
  text-decoration: none;
  color: var(--text);
  border: 1px solid #cddfd3;
  border-radius: 12px;
  background: #f9fdfb;
  padding: 0.55rem 0.5rem;
  display: grid;
  gap: 0.15rem;
  box-shadow: 0 4px 12px rgba(18, 40, 28, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.history-day-card:hover,
.history-day-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(18, 40, 28, 0.09);
  border-color: #aac9b6;
}

.history-day-card.selected {
  border-color: #1f7a4e;
  background: #eef9f2;
}

.history-day-card.complete {
  background: #effaf2;
}

.history-day-card.today {
  box-shadow: 0 0 0 2px #d6ebdd inset;
}

.history-day-card.read-only {
  opacity: 0.7;
  background: #f5f6f7;
}

.history-day-week {
  font-size: 0.76rem;
  color: var(--muted);
}

.history-day-date {
  font-size: 0.94rem;
  font-weight: 700;
}

.history-day-progress {
  font-size: 0.8rem;
  color: #2c5d44;
}

.celebration-banner {
  background: linear-gradient(160deg, #ecfaef 0%, #f7f9ea 100%);
  border: 1px solid #bde4c9;
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.celebration-banner h2 {
  margin: 0 0 0.6rem;
}

.routine-section,
.onboarding-card,
.routine-editor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin-top: 0.85rem;
}

.routine-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.routine-section-header h2 {
  margin: 0;
}

.routine-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.2;
}

.routine-type-chip.morning {
  border-color: #edc892;
  background: linear-gradient(155deg, #fff6e9 0%, #ffe9cf 52%, #ffd9aa 100%);
  color: #7a4a12;
}

.routine-type-chip.daily {
  border-color: #b9d4f7;
  background: linear-gradient(155deg, #f1f8ff 0%, #e6f2ff 52%, #d7e8ff 100%);
  color: #2f557e;
}

.routine-type-chip.night {
  border-color: #344154;
  background: linear-gradient(155deg, #1f2a3c 0%, #2a3650 52%, #344468 100%);
  color: #f5f8ff;
}

.routine-section-theme-morning {
  border-color: #e9dac5;
  background: linear-gradient(155deg, #fff6e9 0%, #ffe9cf 52%, #ffd9aa 100%);
}

.routine-section-theme-daily {
  border-color: #d3e1f3;
  background: linear-gradient(155deg, #f1f8ff 0%, #e6f2ff 52%, #d7e8ff 100%);
}

.routine-section-theme-night {
  border-color: #c8d1e8;
  background: linear-gradient(155deg, #eef1fb 0%, #e4e9f8 52%, #d6ddf2 100%);
}

.routine-editor-topbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.routine-editor-close {
  text-decoration: none;
  min-height: 36px;
  min-width: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
}

.routine-editor-close:hover,
.routine-editor-close:focus-visible {
  background: #eef4f0;
  color: var(--text);
}

.routine-card-grid {
  display: grid;
  gap: 0.75rem;
}

.routine-link-card {
  text-decoration: none;
  border: 1px solid #cddfd3;
  border-radius: 14px;
  padding: 0.8rem;
  display: grid;
  gap: 0.3rem;
  color: var(--text);
  box-shadow: 0 6px 16px rgba(21, 40, 29, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.routine-link-card:hover,
.routine-link-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(21, 40, 29, 0.1);
}

.routine-link-card:focus-visible {
  outline: 2px solid #6aa98a;
  outline-offset: 2px;
}

.routine-link-card.morning {
  background: linear-gradient(155deg, #fff6e9 0%, #ffe9cf 52%, #ffd9aa 100%);
}

.routine-link-card.daily {
  background: linear-gradient(155deg, #f1f8ff 0%, #e6f2ff 52%, #d7e8ff 100%);
}

.routine-link-card.night {
  border-color: #344154;
  background: linear-gradient(155deg, #1f2a3c 0%, #2a3650 52%, #344468 100%);
  color: #f5f8ff;
}

.routine-link-card.inactive {
  filter: grayscale(0.9);
  opacity: 0.78;
}

.routine-link-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.routine-link-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.routine-link-type {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.routine-link-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.routine-link-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.routine-link-cta {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.routine-link-card.night .routine-link-type,
.routine-link-card.night .routine-link-hint {
  color: #cfdaef;
}

.routine-link-card.night .status-chip.positive {
  background: #39587f;
  color: #d9ecff;
}

.routine-link-card.night .status-chip.warning {
  background: #5a4a34;
  color: #ffe8c2;
}

.today-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.today-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem;
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 0.6rem;
}

.today-item.done {
  border-color: #b8dbc7;
  background: #f4fbf7;
}

.today-item-main {
  display: grid;
  gap: 0.25rem;
}

.today-item-title {
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.today-item-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.today-item-feedback {
  margin: 0.25rem 0 0;
  color: #2b6f3b;
  font-size: 0.88rem;
}

.task-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.task-status.pending {
  background: #fff3d9;
  color: #7d5712;
  border: 1px solid #f0d7a7;
}

.task-status.done {
  background: #eaf8ef;
  color: #1f7a4e;
  border: 1px solid #bde4c9;
}

.today-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.today-item-actions-number {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.today-item-actions-number [data-role="decrement-form"] {
  order: 1;
}

.today-item-actions-number [data-role="increment-form"] {
  order: 2;
}

.value-form {
  display: flex;
  gap: 0.4rem;
}

.value-form input {
  width: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
  min-height: 36px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.stats-grid.compact {
  margin-top: 0.7rem;
}

.stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fcfdfc;
  padding: 0.75rem;
}

.stat-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.stat-value {
  margin: 0.2rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.quantity-list,
.achievement-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.quantity-item,
.achievement-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  background: #fcfdfc;
}

.quantity-total {
  margin: 0;
  font-weight: 700;
  font-size: 1.2rem;
}

.quantity-label {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.achievement-item.earned {
  border-color: #bde4c9;
  background: #f5fbf7;
}

.achievement-item.locked {
  opacity: 0.9;
}

.achievement-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.achievement-title {
  margin: 0;
  font-weight: 700;
}

.achievement-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.achievement-list.compact .achievement-item {
  padding: 0.6rem;
}

.radio-grid {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.radio-grid legend {
  font-weight: 600;
}

.radio-option {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.category-picker {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.45rem;
}

.category-picker legend {
  font-weight: 600;
}

.category-card-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.category-card-choice {
  position: relative;
}

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

.category-card {
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.55rem;
  min-height: 88px;
  background: #fcfdfc;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.category-card * {
  user-select: none;
  -webkit-user-select: none;
}

.category-card::selection,
.category-card *::selection {
  background: transparent;
}

.category-card-input:focus + .category-card {
  outline: none;
}

.category-card-input:focus-visible + .category-card {
  border-color: #4f7d68;
  box-shadow: 0 0 0 2px rgba(79, 125, 104, 0.28);
}

.category-card-input:checked + .category-card {
  border-color: #4f7d68;
  background: #eef7f2;
  box-shadow: inset 0 0 0 1px #4f7d68;
}

.category-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.category-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.category-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.simple-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
}

.inline-grid {
  display: grid;
  gap: 0.55rem;
}

.inline-grid input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.inline-grid select,
.form-stack select {
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-control {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d8e2dc;
  border: 1px solid #bfcfc5;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.toggle-control::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(19, 45, 31, 0.22);
  transition: transform 0.18s ease;
}

.toggle-input:checked + .toggle-control {
  background: #2b8f5e;
  border-color: #23734c;
}

.toggle-input:checked + .toggle-control::after {
  transform: translateX(20px);
}

.toggle-input:focus-visible + .toggle-control {
  outline: 2px solid #7fb5ff;
  outline-offset: 2px;
}

.item-editor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.item-editor {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
}

.form-stack.compact {
  margin-top: 0;
}

.item-row-actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.item-status {
  margin: 0.45rem 0 0;
}

.habit-summary-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.habit-sort-hint {
  margin-bottom: 0.65rem;
}

.habit-summary-card {
  border-radius: 14px;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.habit-summary-card.dragging {
  opacity: 0.72;
}

.habit-summary-card.drop-target-above .habit-summary-shell {
  box-shadow: inset 0 3px 0 #6aa98a;
}

.habit-summary-card.drop-target-below .habit-summary-shell {
  box-shadow: inset 0 -3px 0 #6aa98a;
}

.habit-summary-shell {
  padding: 0.85rem;
  gap: 0.45rem;
}

.habit-summary-card.inactive .habit-summary-shell {
  filter: grayscale(0.9);
  opacity: 0.72;
  transform: scale(0.985);
}

.habit-summary-main {
  display: grid;
  gap: 0.35rem;
}

.habit-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.habit-summary-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.habit-summary-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.habit-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid #c7dbcf;
  background: #f5fbf7;
  color: #25563f;
  padding: 0.2rem 0.6rem;
  font-weight: 600;
  font-size: 0.82rem;
}

.habit-summary-actions {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.habit-sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.habit-sort-controls form {
  margin: 0;
}

.habit-sort-button {
  min-width: 36px;
  padding-inline: 0.55rem;
  font-weight: 700;
}

.habit-editor-panel {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem;
}

.alert.warning {
  border-color: var(--color-state-warning-border);
  background: var(--color-state-warning-bg);
  color: var(--color-state-warning-text);
}

.button.small {
  min-height: 36px;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}

.pricing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
}

.price-card {
  margin-top: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.price {
  font-size: 2.1rem;
  font-weight: 800;
  margin: 0 0 0.7rem;
}

.price span {
  font-size: 1rem;
  color: var(--muted);
  margin-left: 0.2rem;
}

.price-card ul {
  margin: 0 0 1rem;
  padding-left: 1rem;
  color: var(--muted);
}

.site-footer {
  color: var(--muted);
  padding: 1.5rem 1rem 2rem;
}

.site-footer-inner {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.site-footer-inner nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.site-footer-inner a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer-inner a:hover,
.site-footer-inner a:focus-visible {
  text-decoration: underline;
}

.legal-page {
  width: min(900px, 100%);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.legal-page h1 {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.legal-page h2 {
  margin: 0;
  font-size: 1.1rem;
}

.legal-page h3 {
  margin: 0.85rem 0 0.25rem;
  font-size: 1rem;
}

.legal-page p,
.legal-page li {
  color: #2f3b35;
  line-height: 1.55;
}

.legal-page ul {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
}

.legal-page section + section {
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px solid #e4ede7;
}

.design-system-page {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.design-system-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  box-shadow: var(--shadow-soft-2);
}

.design-system-hero h1 {
  margin: 0.35rem 0 0.65rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.design-system-jump-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.design-system-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.design-system-section h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.design-system-section h3 {
  margin: 0;
  font-size: 1rem;
}

.design-system-grid {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.8rem;
}

.design-system-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface) 90%, #f7fbf8);
  padding: 0.9rem;
}

.design-system-card p {
  margin: 0.55rem 0 0;
  color: var(--muted);
}

.swatch-grid {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.swatch-token {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.85rem;
}

.swatch-token code {
  font-size: 0.82rem;
}

.swatch-chip {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--text) 18%, white);
  background: var(--swatch);
  display: inline-block;
  flex-shrink: 0;
}

.design-system-code {
  margin: 0.9rem 0 0;
  border: 1px solid color-mix(in oklab, var(--border) 85%, white);
  border-radius: var(--radius-lg);
  background: #f7faf8;
  padding: 0.8rem;
  overflow: auto;
}

.design-system-code code {
  display: block;
  color: #1f2e26;
  line-height: 1.5;
  font-size: 0.84rem;
}

.type-sample-1 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--text);
}

.type-sample-2 {
  margin: 0.5rem 0 0;
  font-size: 1.4rem;
  color: var(--text);
}

.type-sample-3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.type-sample-4 {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}

.space-sample {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.6rem;
}

.space-pill {
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  display: inline-block;
}

.space-pill-1 {
  width: var(--space-2);
}

.space-pill-2 {
  width: var(--space-4);
}

.space-pill-3 {
  width: var(--space-6);
}

.space-pill-4 {
  width: var(--space-8);
}

.design-system-form-preview {
  margin-top: 0.7rem;
}

.theme-preview-panel {
  --preview-bg: var(--color-surface-1);
  --preview-border: var(--color-border-default);
  --preview-text: var(--color-text-primary);
  --preview-muted: var(--color-text-muted);
  --preview-kicker: var(--color-action-primary);
  --preview-action: var(--color-action-primary);
  --preview-action-strong: var(--color-action-primary-strong);
  margin-top: 0.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--preview-border);
  background: var(--preview-bg);
  color: var(--preview-text);
  padding: 0.9rem;
}

.theme-preview-panel.is-dark {
  --preview-bg: var(--dark-color-surface-1);
  --preview-border: var(--dark-color-border-default);
  --preview-text: var(--dark-color-text-primary);
  --preview-muted: var(--dark-color-text-muted);
  --preview-kicker: var(--dark-color-action-primary);
  --preview-action: var(--dark-color-action-primary);
  --preview-action-strong: var(--dark-color-action-primary-strong);
}

.theme-preview-kicker {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--preview-kicker);
  font-weight: 700;
}

.theme-preview-panel h4 {
  margin: 0.45rem 0 0;
  font-size: 1.1rem;
}

.theme-preview-panel p {
  margin: 0.5rem 0 0.85rem;
  color: var(--preview-muted);
}

.theme-preview-panel .button.primary {
  background: var(--preview-action);
  border-color: var(--preview-action);
}

.theme-preview-panel .button.primary:hover,
.theme-preview-panel .button.primary:focus-visible {
  background: var(--preview-action-strong);
  border-color: var(--preview-action-strong);
}

.toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 0.55rem;
  z-index: 1600;
  width: min(420px, calc(100vw - 1.5rem));
}

.toast {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--color-surface-1);
  color: var(--text);
  padding: 0.65rem 0.8rem;
  box-shadow: var(--shadow-soft-3);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  border-color: var(--color-state-success-border);
  background: var(--color-state-success-bg);
  color: var(--color-state-success-text);
}

.toast.error {
  border-color: var(--color-state-error-border);
  background: var(--color-state-error-bg);
  color: var(--color-state-error-text);
}

.toast.warning {
  border-color: var(--color-state-warning-border);
  background: var(--color-state-warning-bg);
  color: var(--color-state-warning-text);
}

.mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 94%, white);
  backdrop-filter: blur(8px);
}

.mobile-tabbar a {
  text-decoration: none;
  font-size: 0.82rem;
  text-align: center;
  border-radius: 8px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid transparent;
}

.mobile-tabbar a.active {
  color: var(--text);
  border-color: var(--border);
  background: #edf5f1;
}

.emoji-burst {
  position: fixed;
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 0.85s ease-out, opacity 0.85s ease-out;
  pointer-events: none;
  z-index: 1200;
  font-size: 1.2rem;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 18, 0.45);
}

.modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-close {
  min-height: 36px;
  min-width: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}

.modal-body {
  overflow: auto;
  padding: 1rem;
}


.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.admin-nav {
  margin-bottom: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.admin-nav a {
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
}

.admin-filter-form {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.55rem;
}

.admin-filter-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.admin-filter-form input,
.admin-filter-form select {
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 40px;
  padding: 0.45rem 0.65rem;
  font: inherit;
}

.table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-actions-grid {
  display: grid;
  gap: 0.75rem;
}

.admin-actions-grid form {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem;
  background: #fcfdfc;
}

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

.diagnostic-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  background: #fcfdfc;
}

.diagnostic-card.warning {
  border-color: #f0c68c;
  background: #fffaf3;
}

.diagnostic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
}

.diagnostic-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.diagnostic-title {
  margin: 0.85rem 0 0.35rem;
  font-weight: 700;
}

[data-theme="dark"] .site-header {
  background: color-mix(in oklab, var(--surface) 94%, black);
}

[data-theme="dark"] .landing-header {
  border-bottom-color: color-mix(in oklab, var(--border) 82%, black);
  background: color-mix(in oklab, var(--surface) 94%, black);
}

[data-theme="dark"] .landing-footer {
  background: color-mix(in oklab, var(--surface) 94%, black);
}

[data-theme="dark"] .site-nav-toggle,
[data-theme="dark"] .nav-button,
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .routine-editor-close,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .admin-nav a {
  background: var(--color-surface-2);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .site-nav-toggle:hover,
[data-theme="dark"] .site-nav-toggle:focus-visible,
[data-theme="dark"] .site-nav a:hover,
[data-theme="dark"] .site-nav a:focus-visible,
[data-theme="dark"] .button.secondary:hover,
[data-theme="dark"] .button.secondary:focus-visible,
[data-theme="dark"] .routine-editor-close:hover,
[data-theme="dark"] .routine-editor-close:focus-visible,
[data-theme="dark"] .mobile-tabbar a.active {
  background: color-mix(in oklab, var(--color-surface-2) 82%, #ffffff);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .landing-streak-badge,
[data-theme="dark"] .landing-feature-icon,
[data-theme="dark"] .landing-step-number {
  background: var(--color-action-primary-soft);
  border-color: var(--color-action-primary-soft-border);
  color: var(--color-action-primary);
}

[data-theme="dark"] .landing-steps li {
  background: color-mix(in oklab, var(--surface) 90%, black);
  border-color: var(--border);
}

[data-theme="dark"] .landing-quote {
  color: var(--text);
}

[data-theme="dark"] .landing-final-cta {
  border-color: var(--border);
}

[data-theme="dark"] .auth-required-card::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(58, 168, 111, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(19, 30, 24, 0.7) 100%);
}

[data-theme="dark"] .auth-required-point,
[data-theme="dark"] .history-day-card,
[data-theme="dark"] .export-option-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .quantity-item,
[data-theme="dark"] .achievement-item,
[data-theme="dark"] .category-card,
[data-theme="dark"] .habit-editor-panel,
[data-theme="dark"] .admin-actions-grid form,
[data-theme="dark"] .diagnostic-card {
  background: var(--color-surface-2);
  border-color: var(--border);
}

[data-theme="dark"] .oauth-provider-button {
  background: var(--color-surface-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .oauth-provider-button:hover:not(:disabled):not([aria-disabled="true"]),
[data-theme="dark"] .oauth-provider-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in oklab, var(--color-surface-2) 86%, #ffffff);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .oauth-provider-label,
[data-theme="dark"] .oauth-provider-discord .oauth-provider-label {
  color: var(--text);
}

[data-theme="dark"] .history-day-card:hover,
[data-theme="dark"] .history-day-card:focus-visible {
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .history-day-card.selected,
[data-theme="dark"] .history-day-card.complete {
  background: color-mix(in oklab, var(--color-action-primary-soft) 74%, var(--surface));
  border-color: var(--color-action-primary-soft-border);
}

[data-theme="dark"] .history-day-card.read-only {
  background: color-mix(in oklab, var(--surface) 84%, black);
}

[data-theme="dark"] .history-day-card.today {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-action-primary) 46%, black) inset;
}

[data-theme="dark"] .history-day-progress,
[data-theme="dark"] .today-item-feedback,
[data-theme="dark"] .provider-status.connected,
[data-theme="dark"] .account-setting-value.is-positive {
  color: #9dd9b5;
}

[data-theme="dark"] .account-setting-value.is-warning {
  color: #f0c881;
}

[data-theme="dark"] .account-profile-card {
  background: linear-gradient(150deg, #1d2c24 0%, #1e2f3b 50%, #2a263a 100%);
  border-color: var(--border);
}

[data-theme="dark"] .account-settings-shell {
  border-color: var(--border);
  background: color-mix(in oklab, var(--surface) 92%, black);
}

[data-theme="dark"] .account-settings-header {
  border-bottom-color: var(--border);
  background: linear-gradient(165deg, #1b2b23 0%, #1d2f27 100%);
}

[data-theme="dark"] .account-settings-edit-row {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .account-settings-footer {
  background: linear-gradient(165deg, #1a281f 0%, #1c2b21 100%);
  border-top-color: var(--border);
}

[data-theme="dark"] .account-settings-control input,
[data-theme="dark"] .account-settings-control select {
  background: color-mix(in oklab, var(--surface) 92%, black);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .account-settings-control input::placeholder {
  color: #8f9d94;
}

[data-theme="dark"] .account-settings-control input:focus,
[data-theme="dark"] .account-settings-control select:focus {
  border-color: var(--color-action-primary);
  box-shadow: 0 0 0 3px rgba(58, 168, 111, 0.24);
}

[data-theme="dark"] .account-settings-control input[readonly] {
  background: color-mix(in oklab, var(--surface) 78%, black);
  color: #a9b5ae;
  border-color: var(--border);
}

[data-theme="dark"] .status-chip.positive,
[data-theme="dark"] .task-status.done {
  background: color-mix(in oklab, var(--color-action-primary-soft) 70%, var(--surface));
  color: #9ed6b5;
  border-color: var(--color-action-primary-soft-border);
}

[data-theme="dark"] .status-chip.warning,
[data-theme="dark"] .task-status.pending {
  background: color-mix(in oklab, var(--color-state-warning-bg) 78%, var(--surface));
  color: #efcd91;
  border-color: var(--color-state-warning-border);
}

[data-theme="dark"] .celebration-banner {
  background: linear-gradient(160deg, #1b3023 0%, #2d2f1e 100%);
  border-color: #3a5f47;
}

[data-theme="dark"] .routine-type-chip.morning,
[data-theme="dark"] .routine-section-theme-morning,
[data-theme="dark"] .routine-link-card.morning {
  border-color: #6f5031;
  background: linear-gradient(155deg, #3c2d1d 0%, #4e3722 52%, #5d4028 100%);
  color: #f8dfbd;
}

[data-theme="dark"] .routine-type-chip.daily,
[data-theme="dark"] .routine-section-theme-daily,
[data-theme="dark"] .routine-link-card.daily {
  border-color: #3e5575;
  background: linear-gradient(155deg, #1f2e43 0%, #243852 52%, #2b4464 100%);
  color: #d8e8ff;
}

[data-theme="dark"] .routine-type-chip.night,
[data-theme="dark"] .routine-section-theme-night,
[data-theme="dark"] .routine-link-card.night {
  border-color: #475e7b;
  background: linear-gradient(155deg, #182333 0%, #1f2d40 52%, #26384f 100%);
  color: #e8f0ff;
}

[data-theme="dark"] .routine-link-card {
  border-color: var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .routine-link-card.night .routine-link-type,
[data-theme="dark"] .routine-link-card.night .routine-link-hint {
  color: #c7d8f2;
}

[data-theme="dark"] .routine-link-card.night .status-chip.positive {
  background: color-mix(in oklab, var(--color-action-primary-soft) 70%, var(--surface));
  color: #9ed6b5;
  border-color: var(--color-action-primary-soft-border);
}

[data-theme="dark"] .routine-link-card.night .status-chip.warning {
  background: #654d33;
  color: #ffe5bb;
}

[data-theme="dark"] .today-item.done {
  border-color: #3c6149;
  background: color-mix(in oklab, var(--color-action-primary-soft) 68%, var(--surface));
}

[data-theme="dark"] .category-card-input:focus-visible + .category-card {
  border-color: #5f8f79;
  box-shadow: 0 0 0 2px rgba(95, 143, 121, 0.34);
}

[data-theme="dark"] .category-card-input:checked + .category-card {
  border-color: #5f8f79;
  background: color-mix(in oklab, var(--color-action-primary-soft) 75%, var(--surface));
  box-shadow: inset 0 0 0 1px #5f8f79;
}

[data-theme="dark"] .toggle-control {
  background: #2a372f;
  border-color: #3a4d42;
}

[data-theme="dark"] .toggle-control::after {
  background: #dbe7df;
}

[data-theme="dark"] .toggle-input:checked + .toggle-control {
  background: #31885c;
  border-color: #2a734f;
}

[data-theme="dark"] .toggle-input:focus-visible + .toggle-control,
[data-theme="dark"] .routine-link-card:focus-visible {
  outline-color: var(--focus-ring);
}

[data-theme="dark"] .habit-summary-card.drop-target-above .habit-summary-shell {
  box-shadow: inset 0 3px 0 #4f7f68;
}

[data-theme="dark"] .habit-summary-card.drop-target-below .habit-summary-shell {
  box-shadow: inset 0 -3px 0 #4f7f68;
}

[data-theme="dark"] .habit-category-chip {
  border-color: #3e5f4d;
  background: #203428;
  color: #a8d5bb;
}

[data-theme="dark"] .legal-page p,
[data-theme="dark"] .legal-page li {
  color: var(--text);
}

[data-theme="dark"] .legal-page section + section {
  border-top-color: var(--border);
}

[data-theme="dark"] .design-system-card {
  background: color-mix(in oklab, var(--surface) 90%, black);
}

[data-theme="dark"] .design-system-code {
  border-color: var(--border);
  background: color-mix(in oklab, var(--surface) 84%, black);
}

[data-theme="dark"] .design-system-code code {
  color: var(--text);
}

[data-theme="dark"] .mobile-tabbar {
  background: color-mix(in oklab, var(--surface) 90%, black);
}

[data-theme="dark"] .modal-overlay {
  background: rgba(4, 7, 6, 0.66);
}

[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: color-mix(in oklab, var(--surface) 92%, black);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #8f9d94;
}

[data-theme="dark"] .diagnostic-card.warning {
  border-color: var(--color-state-warning-border);
  background: color-mix(in oklab, var(--color-state-warning-bg) 82%, var(--surface));
}

@media (max-width: 767px) {
  .site-header {
    position: static;
    flex-wrap: wrap;
  }

  .site-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-top: 0.45rem;
  }

  .site-header.nav-open .site-nav {
    display: flex;
  }

  .site-nav a {
    width: 100%;
    justify-content: flex-start;
    min-height: 36px;
    padding: 0.2rem 0.45rem;
  }

  .site-header .inline-form {
    width: 100%;
  }

  .site-header .nav-button {
    width: 100%;
  }

  .page-container {
    padding-bottom: 5.5rem;
  }

  .landing-page .page-container {
    padding-bottom: 1.5rem;
  }

  .landing-header {
    position: sticky;
    top: 0;
  }

  .landing-shell {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .landing-nav {
    gap: 0.35rem;
  }

  .landing-nav .landing-nav-link {
    min-height: 36px;
    padding: 0.15rem 0.35rem;
  }

  .landing-nav .landing-nav-cta {
    width: 100%;
    justify-content: center;
  }

  .landing-hero-actions .button {
    width: 100%;
  }

  .landing-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .design-system-jump-links .button {
    width: 100%;
  }

  .toast-root {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) {
  .site-header {
    padding: 1rem 2rem;
  }

  .page-container {
    padding: 2rem;
  }

  .landing-header {
    padding: 0.9rem 2rem;
  }

  .landing-container {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }

  .landing-hero-section {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 1.15rem;
  }

  .landing-preview {
    transform: rotate(0.85deg);
  }

  .landing-feature-grid,
  .landing-testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-system-grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .toast-root {
    bottom: 1rem;
  }

  .routine-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

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

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

  .today-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .today-item-actions {
    justify-content: flex-end;
  }

  .admin-filter-form {
    grid-template-columns: minmax(0, 1fr) 220px auto;
    align-items: end;
  }

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

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

  .mobile-tabbar {
    display: none;
  }

}