/* CoreStream Batch 4: Today, Stats, Goals, Learn, Reminders and TikTok connect. */

/* Shared coaching page primitives */
.coaching-page {
  display: grid;
  gap: var(--cs-space-6);
  min-width: 0;
}
.coaching-page__header {
  display: grid;
  gap: var(--cs-space-3);
}
.coaching-page__title {
  margin: 0;
  color: var(--cs-color-text-strong);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: var(--cs-font-weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.coaching-page__support {
  max-width: 42rem;
  margin: 0;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-body);
  line-height: 1.65;
}
.coaching-page__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-2);
}
.coaching-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  min-height: 2.25rem;
  padding-inline: var(--cs-space-3);
  border: 1px solid var(--cs-color-info-line);
  border-radius: var(--cs-radius-pill);
  background: var(--cs-color-info-bg);
  color: var(--cs-color-light-blue);
  font-size: var(--cs-font-size-caption);
  font-weight: var(--cs-font-weight-semibold);
  line-height: 1.25;
}
.coaching-chip svg { width: 1rem; height: 1rem; flex: none; }
.coaching-chip--neutral {
  border-color: var(--cs-color-line-strong);
  background: rgba(3, 16, 31, 0.36);
  color: var(--cs-color-text-muted);
}
.coaching-chip--success {
  border-color: var(--cs-color-success-line);
  background: var(--cs-color-success-bg);
  color: var(--cs-color-success-text);
}
.coaching-chip--warning {
  border-color: var(--cs-color-warning-line);
  background: var(--cs-color-warning-bg);
  color: var(--cs-color-warning-text);
}
.coaching-card {
  min-width: 0;
  padding: var(--cs-space-5);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: var(--cs-color-surface-soft);
  box-shadow: var(--cs-shadow-card);
}
.coaching-card--quiet {
  background: var(--cs-color-surface-quiet);
  box-shadow: none;
}
.coaching-card--focus {
  position: relative;
  overflow: hidden;
  border-color: rgba(1, 126, 255, 0.48);
  background:
    radial-gradient(85% 130% at 95% 0%, rgba(1, 126, 255, 0.24), transparent 66%),
    linear-gradient(145deg, rgba(14, 58, 92, 0.98), rgba(5, 24, 45, 0.96));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(1, 126, 255, 0.08) inset;
}
.coaching-card--focus::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1, 126, 255, 0.92), transparent);
}
.coaching-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-4);
}
.coaching-card__title {
  margin: 0;
  color: var(--cs-color-text-strong);
  font-size: var(--cs-font-size-h3);
  font-weight: var(--cs-font-weight-semibold);
  line-height: 1.25;
}
.coaching-card__support {
  margin: var(--cs-space-1) 0 0;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  line-height: 1.55;
}
.coaching-icon-disc {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: 50%;
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
  flex: none;
}
.coaching-icon-disc svg { width: 1.4rem; height: 1.4rem; }
.coaching-icon-disc--success {
  border-color: var(--cs-color-success-line);
  background: var(--cs-color-success-bg);
  color: var(--cs-color-success-text);
}
.coaching-icon-disc--warning {
  border-color: var(--cs-color-warning-line);
  background: var(--cs-color-warning-bg);
  color: var(--cs-color-warning-text);
}
.coaching-icon-disc--danger {
  border-color: var(--cs-color-danger-line);
  background: var(--cs-color-danger-bg);
  color: var(--cs-color-danger-text);
}
.coaching-section {
  display: grid;
  gap: var(--cs-space-4);
}
.coaching-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cs-space-4);
}
.coaching-section__title {
  margin: 0;
  color: var(--cs-color-text-strong);
  font-size: var(--cs-font-size-h3);
  font-weight: var(--cs-font-weight-semibold);
  line-height: 1.25;
}
.coaching-section__meta {
  margin: 0;
  color: var(--cs-color-text-subtle);
  font-size: var(--cs-font-size-caption);
}
.cs-num { font-variant-numeric: tabular-nums; }

/* Progress sub-navigation */
.progress-tabs {
  display: flex;
  gap: var(--cs-space-2);
  overflow-x: auto;
  margin-inline: calc(var(--cs-space-5) * -1);
  padding: 0 var(--cs-space-5) var(--cs-space-1);
  scrollbar-width: none;
}
.progress-tabs::-webkit-scrollbar { display: none; }
.progress-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--cs-space-4);
  border: 1px solid var(--cs-color-line-strong);
  border-radius: var(--cs-radius-pill);
  background: rgba(3, 16, 31, 0.30);
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  font-weight: var(--cs-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.progress-tabs__link:hover { color: var(--cs-color-text); border-color: rgba(204, 225, 246, 0.42); }
.progress-tabs__link[aria-current="page"] {
  border-color: var(--cs-color-info-line);
  background: var(--cs-color-info-bg);
  color: var(--cs-color-light-blue);
}

/* Today */
.today-hero {
  display: grid;
  gap: var(--cs-space-5);
  padding: var(--cs-space-5);
}
.today-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  color: var(--cs-color-primary);
  font-size: var(--cs-font-size-small);
  font-weight: var(--cs-font-weight-semibold);
}
.today-hero__eyebrow svg { width: 1.15rem; height: 1.15rem; }
.today-hero__content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-4);
  align-items: start;
}
.today-hero__title {
  margin: 0;
  color: var(--cs-color-text-strong);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: var(--cs-font-weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.today-hero__body {
  margin: var(--cs-space-3) 0 0;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  line-height: 1.65;
}
.today-hero__why {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-3);
  padding: var(--cs-space-3) var(--cs-space-4);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.34);
  color: var(--cs-color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.today-hero__why strong { color: var(--cs-color-light-blue); font-weight: 600; }
.today-hero__why svg { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; color: var(--cs-color-primary); }
.today-hero__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); }
.today-hero__actions .cs-button { flex: 1 1 12rem; }
.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-space-3);
}
.trend-card {
  min-width: 0;
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(10, 42, 77, 0.52);
}
.trend-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-2);
}
.trend-card__label {
  overflow: hidden;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-caption);
  font-weight: var(--cs-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-card__delta {
  color: var(--cs-color-success-text);
  font-size: var(--cs-font-size-caption);
  font-weight: var(--cs-font-weight-semibold);
  white-space: nowrap;
}
.trend-card__delta--down { color: var(--cs-color-danger-text); }
.trend-card__value {
  display: block;
  margin-top: var(--cs-space-2);
  color: var(--cs-color-text-strong);
  font-size: 1.5rem;
  font-weight: var(--cs-font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.trend-card__chart { width: 100%; height: 2.5rem; margin-top: var(--cs-space-2); }
.trend-card__chart .line { fill: none; stroke: var(--cs-color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trend-card__chart .area { fill: url(#trendFill); opacity: 0.35; }
.trend-card--positive { border-color: rgba(31, 157, 87, 0.35); }
.trend-card--negative { border-color: rgba(210, 63, 77, 0.36); }
.plan-list {
  display: grid;
  gap: var(--cs-space-2);
}
.plan-item {
  display: grid;
  /* Default (no icon): text grows, optional meta. The text column is
     minmax(0, 1fr) so it can shrink/wrap instead of collapsing to min-content. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cs-space-3);
  align-items: center;
  min-height: 4.75rem;
  padding: var(--cs-space-3);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.28);
  color: inherit;
  text-decoration: none;
}
/* When an icon is present, add the fixed leading icon column. */
.plan-item:has(.plan-item__icon) {
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
}
/* Belt-and-suspenders: the text wrapper (the unclassed span between title/body
   and any meta) must be allowed to shrink so its content wraps at full width. */
.plan-item > span:not([class]) { min-width: 0; }
.plan-item:hover { border-color: rgba(204, 225, 246, 0.36); background: rgba(10, 42, 77, 0.66); }
.plan-item__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: 50%;
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
}
.plan-item__icon svg { width: 1.25rem; height: 1.25rem; }
.plan-item__title { display: block; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; }
.plan-item__body { display: block; margin-top: 0.1rem; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.4; }
.plan-item__meta { color: var(--cs-color-light-blue); font-size: 0.8125rem; font-weight: 600; text-align: end; }
.plan-item__meta svg { width: 1rem; height: 1rem; }
.goal-mini {
  display: grid;
  gap: var(--cs-space-2);
  min-width: 6.5rem;
}
.goal-mini__numbers { display: flex; justify-content: flex-end; gap: 0.25rem; color: var(--cs-color-text-muted); font-size: 0.75rem; }
.goal-mini__numbers strong { color: var(--cs-color-light-blue); font-weight: 600; }
.progress-track {
  position: relative;
  overflow: hidden;
  height: var(--cs-progress-height);
  border-radius: var(--cs-radius-pill);
  background: var(--cs-color-progress-track);
}
.progress-track__fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--cs-color-primary);
}
.progress-track__fill--success { background: var(--cs-color-success); }

/* Stats */
.period-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cs-space-1);
  padding: var(--cs-space-1);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.42);
}
.period-toggle__link {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  border-radius: var(--cs-radius-md);
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  font-weight: 600;
  text-decoration: none;
}
.period-toggle__link:hover { color: var(--cs-color-text); background: rgba(204, 225, 246, 0.06); }
.period-toggle__link[aria-current="page"] { background: var(--cs-color-primary); color: var(--cs-color-primary-ink); }
.stats-grid { display: grid; gap: var(--cs-space-3); }
.stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-4);
  min-width: 0;
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: rgba(10, 42, 77, 0.54);
}
.stat-card--hero { grid-template-columns: 1fr; padding: var(--cs-space-5); }
.stat-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: 50%;
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
}
.stat-card__icon svg { width: 1.35rem; height: 1.35rem; }
.stat-card__content { min-width: 0; }
.stat-card__label { display: block; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); font-weight: 600; }
.stat-card__value-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cs-space-2); margin-top: var(--cs-space-1); }
.stat-card__value { color: var(--cs-color-text-strong); font-size: 2rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.stat-card__delta { color: var(--cs-color-success-text); font-size: var(--cs-font-size-small); font-weight: 600; }
.stat-card__delta--down { color: var(--cs-color-danger-text); }
.stat-card__meta { margin: var(--cs-space-1) 0 0; color: var(--cs-color-text-subtle); font-size: 0.75rem; }
.stat-card__sparkline { width: 100%; height: 4rem; margin-top: var(--cs-space-2); }
.stat-card__sparkline .grid { stroke: var(--cs-color-chart-grid); stroke-width: 1; }
.stat-card__sparkline .line { fill: none; stroke: var(--cs-color-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stat-card__sparkline .dot { fill: var(--cs-color-primary); }
.stat-card__sparkline--danger .line { stroke: var(--cs-color-danger); }
.stat-card__sparkline--danger .dot { fill: var(--cs-color-danger); }
.stat-card__sparkline--success .line { stroke: var(--cs-color-success); }
.stat-card__sparkline--success .dot { fill: var(--cs-color-success); }
.stat-card__wide-chart {
  width: 100%;
  height: var(--cs-chart-height);
  margin-top: var(--cs-space-4);
}
.stat-card__wide-chart .grid { stroke: var(--cs-color-chart-grid); stroke-width: 1; }
.stat-card__wide-chart .area { fill: var(--cs-color-chart-fill); }
.stat-card__wide-chart .line { fill: none; stroke: var(--cs-color-primary); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.stat-card__wide-chart .dot { fill: var(--cs-color-primary); }
.valid-days {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: var(--cs-space-3);
}
.valid-days__day {
  aspect-ratio: 1;
  border: 1px solid var(--cs-color-line-strong);
  border-radius: 50%;
  background: rgba(3, 16, 31, 0.38);
}
.valid-days__day--done { border-color: var(--cs-color-primary); background: var(--cs-color-primary); }
.valid-days__day--done::after { content: ""; display: block; width: 0.35rem; height: 0.2rem; margin: 42% auto 0; border-inline-start: 1.5px solid var(--cs-color-primary-ink); border-block-end: 1.5px solid var(--cs-color-primary-ink); transform: rotate(-45deg); }

/* Goals */
.goal-summary {
  display: grid;
  gap: var(--cs-space-4);
  padding: var(--cs-space-5);
}
.goal-summary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cs-space-4); }
.goal-summary__label { color: var(--cs-color-light-blue); font-size: var(--cs-font-size-small); font-weight: 600; }
.goal-summary__value { display: block; margin-top: var(--cs-space-1); color: var(--cs-color-text-strong); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.goal-summary__target { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); font-weight: 500; }
.goal-summary__percent {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--cs-color-primary) var(--progress, 0%), var(--cs-color-ring-track) 0);
  color: var(--cs-color-text-strong);
  font-size: var(--cs-font-size-small);
  font-weight: 700;
  position: relative;
}
.goal-summary__percent::before { content: ""; position: absolute; inset: 0.45rem; border-radius: 50%; background: #071F39; }
.goal-summary__percent span { position: relative; }
.milestone-ladder { display: grid; gap: var(--cs-space-3); }
.milestone-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--cs-space-3);
  align-items: center;
  padding: var(--cs-space-3);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.28);
}
.milestone-row__marker {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cs-color-line-strong);
  border-radius: 50%;
  background: rgba(3, 16, 31, 0.46);
  color: var(--cs-color-text-subtle);
}
.milestone-row__marker svg { width: 1.2rem; height: 1.2rem; }
.milestone-row--complete .milestone-row__marker { border-color: var(--cs-color-success-line); background: var(--cs-color-success-bg); color: var(--cs-color-success-text); }
.milestone-row--current { border-color: var(--cs-color-info-line); background: var(--cs-color-info-bg); }
.milestone-row--current .milestone-row__marker { border-color: var(--cs-color-info-line); background: rgba(1, 126, 255, 0.14); color: var(--cs-color-primary); }
.milestone-row__title { display: block; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; }
.milestone-row__body { display: block; margin-top: 0.1rem; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.4; }
.milestone-row__status { color: var(--cs-color-text-muted); font-size: 0.75rem; font-weight: 600; text-align: end; }
.goal-form {
  display: grid;
  gap: var(--cs-space-4);
  padding: var(--cs-space-5);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: rgba(10, 42, 77, 0.52);
}
.goal-form__currency { position: relative; }
.goal-form__prefix { position: absolute; inset-block: 0; inset-inline-start: var(--cs-space-4); display: flex; align-items: center; color: var(--cs-color-text-subtle); font-weight: 600; }
.goal-form__currency .cs-input { padding-inline-start: 3rem; }
.goal-achieved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-4);
  align-items: start;
  padding: var(--cs-space-5);
  border: 1px solid var(--cs-color-success-line);
  border-radius: var(--cs-radius-2xl);
  background: linear-gradient(145deg, rgba(31, 157, 87, 0.18), rgba(10, 42, 77, 0.50));
}
.goal-achieved__title { margin: 0; color: var(--cs-color-text-strong); font-size: var(--cs-font-size-h3); font-weight: 600; }
.goal-achieved__body { margin: var(--cs-space-2) 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); line-height: 1.55; }

/* Learn */
.learn-search { position: relative; }
.learn-search svg { position: absolute; inset-inline-start: var(--cs-space-4); inset-block-start: 50%; width: 1.25rem; height: 1.25rem; color: var(--cs-color-text-subtle); transform: translateY(-50%); pointer-events: none; }
.learn-search .cs-input { padding-inline-start: 3rem; }
.learn-categories {
  display: flex;
  gap: var(--cs-space-2);
  overflow-x: auto;
  margin-inline: calc(var(--cs-space-5) * -1);
  padding: 0 var(--cs-space-5) var(--cs-space-1);
  scrollbar-width: none;
}
.learn-categories::-webkit-scrollbar { display: none; }
.learn-category {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--cs-space-4);
  border: 1px solid var(--cs-color-line-strong);
  border-radius: var(--cs-radius-pill);
  background: rgba(3, 16, 31, 0.30);
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.learn-category[aria-current="true"] { border-color: var(--cs-color-primary); background: var(--cs-color-primary); color: var(--cs-color-primary-ink); }
.lesson-list { display: grid; gap: var(--cs-space-3); }
.lesson-card {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) auto;
  gap: var(--cs-space-4);
  align-items: center;
  min-height: 6.75rem;
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: rgba(10, 42, 77, 0.54);
  color: inherit;
  text-decoration: none;
}
.lesson-card:hover { border-color: rgba(204, 225, 246, 0.36); background: rgba(14, 58, 92, 0.62); }
.lesson-card--focus { border-color: var(--cs-color-info-line); background: linear-gradient(145deg, var(--cs-color-info-bg), rgba(10, 42, 77, 0.58)); }
.lesson-card__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: var(--cs-radius-xl);
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
}
.lesson-card__icon svg { width: 1.75rem; height: 1.75rem; }
.lesson-card__content { min-width: 0; }
.lesson-card__kicker { display: block; color: var(--cs-color-primary); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; }
.lesson-card__title { display: block; margin-top: 0.2rem; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; line-height: 1.4; }
.lesson-card__body { display: block; margin-top: 0.2rem; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.45; }
.lesson-card__meta { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); margin-top: var(--cs-space-2); color: var(--cs-color-text-muted); font-size: 0.6875rem; }
.lesson-card__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.lesson-card__meta svg { width: 0.9rem; height: 0.9rem; }
.lesson-card__trailing { color: var(--cs-color-light-blue); }
.lesson-card__trailing svg { width: 1.25rem; height: 1.25rem; }
.lesson-card__done { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--cs-color-success-text); font-size: 0.75rem; font-weight: 600; }
.lesson-reader {
  display: grid;
  gap: var(--cs-space-6);
  max-width: var(--cs-reading-width);
}
.lesson-reader__back {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  width: fit-content;
  color: var(--cs-color-light-blue);
  font-size: var(--cs-font-size-small);
  font-weight: 600;
  text-decoration: none;
}
.lesson-reader__back svg { width: 1rem; height: 1rem; }
.lesson-reader__header { display: grid; gap: var(--cs-space-3); }
.lesson-reader__title { margin: 0; color: var(--cs-color-text-strong); font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.lesson-reader__meta { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); }
.lesson-reader__progress { display: grid; gap: var(--cs-space-2); }
.lesson-reader__progress-row { display: flex; justify-content: space-between; gap: var(--cs-space-4); color: var(--cs-color-text-subtle); font-size: 0.75rem; }
.lesson-reader__body {
  display: grid;
  gap: var(--cs-space-5);
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-body);
  line-height: 1.78;
}
.lesson-reader__body h2 { margin: var(--cs-space-3) 0 0; color: var(--cs-color-text-strong); font-size: var(--cs-font-size-h2); line-height: 1.3; }
.lesson-reader__body p, .lesson-reader__body ul { margin: 0; }
.lesson-reader__body ul { display: grid; gap: var(--cs-space-2); padding-inline-start: 1.25rem; }
.lesson-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-3);
  padding: var(--cs-space-4);
  border: 1px solid var(--cs-color-info-line);
  border-radius: var(--cs-radius-xl);
  background: var(--cs-color-info-bg);
}
.lesson-callout svg { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--cs-color-primary); }
.lesson-callout strong { color: var(--cs-color-text-strong); }
.lesson-reader__actions { display: grid; gap: var(--cs-space-3); }

/* Reminders */
.reminder-stack { display: grid; gap: var(--cs-space-3); }
.reminder-channel {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--cs-space-3);
  align-items: center;
  min-height: 5rem;
  padding: var(--cs-space-3);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.28);
}
.reminder-channel__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: 50%;
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
}
.reminder-channel__icon svg { width: 1.25rem; height: 1.25rem; }
.reminder-channel__title { display: block; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; }
.reminder-channel__body { display: block; margin-top: 0.1rem; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.4; }
.reminder-channel--disabled { opacity: 0.62; }
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 3.25rem;
  min-height: var(--cs-touch-target);
  cursor: pointer;
}
.toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle__track {
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  border: 1px solid var(--cs-color-line-strong);
  border-radius: var(--cs-radius-pill);
  background: rgba(3, 16, 31, 0.62);
  transition: background-color var(--cs-duration-base), border-color var(--cs-duration-base);
}
.toggle__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--cs-color-text-muted);
  transition: transform var(--cs-duration-base) var(--cs-ease-standard), background-color var(--cs-duration-base);
}
.toggle__input:checked + .toggle__track { border-color: var(--cs-color-primary); background: var(--cs-color-primary); }
.toggle__input:checked + .toggle__track::after { background: var(--cs-color-primary-ink); transform: translateX(1.45rem); }
[dir="rtl"] .toggle__input:checked + .toggle__track::after { transform: translateX(-1.45rem); }
.toggle__input:focus-visible + .toggle__track { box-shadow: var(--cs-shadow-focus); }
.weekday-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cs-space-2); }
.weekday-option { position: relative; }
.weekday-option__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.weekday-option__label {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--cs-color-line-strong);
  border-radius: var(--cs-radius-md);
  background: rgba(3, 16, 31, 0.38);
  color: var(--cs-color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.weekday-option__input:checked + .weekday-option__label { border-color: var(--cs-color-primary); background: var(--cs-color-info-bg); color: var(--cs-color-light-blue); }
.weekday-option__input:focus-visible + .weekday-option__label { box-shadow: var(--cs-shadow-focus); }
.permission-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cs-space-4);
  align-items: start;
  padding: var(--cs-space-5);
  border: 1px solid var(--cs-color-warning-line);
  border-radius: var(--cs-radius-2xl);
  background: var(--cs-color-warning-bg);
}
.permission-card__title { margin: 0; color: var(--cs-color-text-strong); font-size: var(--cs-font-size-h3); font-weight: 600; }
.permission-card__body { margin: var(--cs-space-2) 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); line-height: 1.55; }
.permission-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--cs-space-3); }

/* Shared empty, error, success and loading states */
.coaching-state {
  display: grid;
  justify-items: start;
  gap: var(--cs-space-4);
  padding: var(--cs-space-6);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: rgba(10, 42, 77, 0.52);
}
.coaching-state--error { border-color: var(--cs-color-danger-line); background: var(--cs-color-danger-bg); }
.coaching-state--success { border-color: var(--cs-color-success-line); background: var(--cs-color-success-bg); }
.coaching-state--warning { border-color: var(--cs-color-warning-line); background: var(--cs-color-warning-bg); }
.coaching-state__title { margin: 0; color: var(--cs-color-text-strong); font-size: var(--cs-font-size-h3); font-weight: 600; }
.coaching-state__body { margin: var(--cs-space-1) 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-small); line-height: 1.6; }
.coaching-state__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); }
.coaching-skeleton { display: grid; gap: var(--cs-space-3); }
.coaching-skeleton__card { display: grid; gap: var(--cs-space-4); min-height: 8rem; padding: var(--cs-space-4); border: 1px solid var(--cs-color-line); border-radius: var(--cs-radius-2xl); background: rgba(10, 42, 77, 0.42); }
.coaching-skeleton__row { display: flex; justify-content: space-between; gap: var(--cs-space-4); }
.coaching-skeleton__line { display: block; height: 0.75rem; border-radius: var(--cs-radius-pill); background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)); background-size: 200% 100%; animation: coaching-shimmer 1.5s linear infinite; }
.coaching-skeleton__line--xs { width: 4rem; }
.coaching-skeleton__line--sm { width: 7rem; }
.coaching-skeleton__line--md { width: 12rem; }
.coaching-skeleton__line--lg { width: 74%; }
.coaching-skeleton__chart { height: 5rem; border-radius: var(--cs-radius-lg); background: rgba(255, 255, 255, 0.05); }
@keyframes coaching-shimmer { to { background-position: -200% 0; } }
.coaching-toast {
  position: fixed;
  inset-inline: var(--cs-space-4);
  inset-block-end: calc(5.75rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--cs-space-3);
  align-items: center;
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--cs-space-3) var(--cs-space-4);
  border: 1px solid var(--cs-color-success-line);
  border-radius: var(--cs-radius-xl);
  background: #0A2A31;
  color: var(--cs-color-text);
  box-shadow: var(--cs-shadow-raised);
}
.coaching-toast[hidden] { display: none; }
.coaching-toast svg { width: 1.1rem; height: 1.1rem; color: var(--cs-color-success-text); }
.coaching-toast__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.75rem -0.5rem 0; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; }

/* TikTok connect onboarding shell */
.connect-app {
  min-height: 100dvh;
  background: var(--cs-hero-glow), var(--cs-color-bg);
}
.connect-main {
  width: min(100%, var(--cs-mobile-column));
  margin-inline: auto;
  padding: calc(var(--cs-space-6) + env(safe-area-inset-top)) var(--cs-space-5) calc(var(--cs-space-8) + env(safe-area-inset-bottom));
}
.connect-brand { margin-bottom: var(--cs-space-10); }
.connect-brand img { width: 10.5rem; height: auto; }
.connect-panel { display: grid; gap: var(--cs-space-6); }
.connect-hero { display: grid; gap: var(--cs-space-4); }
.connect-hero__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: var(--cs-radius-xl);
  background: var(--cs-color-info-bg);
  color: var(--cs-color-primary);
}
.connect-hero__icon svg { width: 2rem; height: 2rem; }
.connect-hero__title { margin: 0; color: var(--cs-color-text-strong); font-size: clamp(2.25rem, 10vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; }
.connect-hero__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-body); line-height: 1.7; }
.connect-trust { display: grid; gap: var(--cs-space-3); }
.connect-trust__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--cs-space-3);
  align-items: start;
  padding: var(--cs-space-3);
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-xl);
  background: rgba(3, 16, 31, 0.28);
}
.connect-trust__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--cs-color-info-line); border-radius: 50%; background: var(--cs-color-info-bg); color: var(--cs-color-primary); }
.connect-trust__icon svg { width: 1.15rem; height: 1.15rem; }
.connect-trust__title { display: block; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; }
.connect-trust__body { display: block; margin-top: 0.1rem; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.45; }
.connect-consent { margin: 0; color: var(--cs-color-text-subtle); font-size: 0.75rem; line-height: 1.55; text-align: center; }
.connect-footer { display: grid; gap: var(--cs-space-2); margin-top: var(--cs-space-8); padding-top: var(--cs-space-5); border-top: 1px solid var(--cs-color-line); color: var(--cs-color-text-subtle); font-size: var(--cs-font-size-caption); line-height: 1.6; }
.connect-footer__links { display: flex; flex-wrap: wrap; gap: var(--cs-space-4); }
.connect-footer a { color: var(--cs-color-light-blue); text-underline-offset: 0.2em; }
.connect-aside { display: none; }


@media (max-width: 30rem) {
  .trend-card__head { display: grid; gap: 0.1rem; align-items: start; }
  .trend-card__label { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; }
  .trend-card__delta { text-align: start; }
}

@media (max-width: 24rem) {
  .trend-grid { grid-template-columns: 1fr; }
  .weekday-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan-item { grid-template-columns: minmax(0, 1fr); }
  .plan-item:has(.plan-item__icon) { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .plan-item:has(.plan-item__icon) .plan-item__meta { grid-column: 2; text-align: start; }
}

@media (min-width: 40rem) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card--hero { grid-column: 1 / -1; }
  .lesson-reader__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56.25rem) {
  .coaching-page { gap: var(--cs-space-8); }
  .coaching-page__header { gap: var(--cs-space-4); }
  .coaching-page__title { font-size: 3.25rem; }
  .progress-tabs { margin: 0; padding: 0; overflow: visible; }
  .today-hero { padding: var(--cs-space-6); }
  .today-hero__content { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--cs-space-5); }
  .trend-card { padding: var(--cs-space-4); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card--hero { grid-column: 1 / -1; }
  .goal-summary { padding: var(--cs-space-6); }
  .goal-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: var(--cs-space-4); align-items: start; }
  .learn-categories { margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
  .lesson-card { padding: var(--cs-space-5); }
  .reminder-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr); gap: var(--cs-space-4); align-items: start; }
  .coaching-toast { inset-block-end: var(--cs-space-6); }

  .connect-app { display: grid; grid-template-columns: minmax(22rem, 0.85fr) minmax(32rem, 1.15fr); }
  .connect-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100dvh;
    padding: var(--cs-space-12);
    overflow: hidden;
    border-inline-end: 1px solid var(--cs-color-line);
    background: linear-gradient(165deg, rgba(14, 58, 92, 0.96), rgba(3, 16, 31, 0.98));
  }
  .connect-aside::after {
    content: "";
    position: absolute;
    width: 34rem;
    height: 34rem;
    inset-inline-start: -12rem;
    inset-block-end: -14rem;
    border: 1px solid rgba(1, 126, 255, 0.26);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(1, 126, 255, 0.12);
  }
  .connect-aside__logo { position: relative; z-index: 1; width: 11rem; }
  .connect-aside__content { position: relative; z-index: 1; max-width: 28rem; }
  .connect-aside__kicker { margin: 0 0 var(--cs-space-4); color: var(--cs-color-light-blue); font-size: var(--cs-font-size-caption); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  .connect-aside__title { margin: 0; color: var(--cs-color-text-strong); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
  .connect-aside__body { margin: var(--cs-space-4) 0 0; color: var(--cs-color-text-muted); line-height: 1.7; }
  .connect-aside__foot { position: relative; z-index: 1; color: var(--cs-color-text-subtle); font-size: var(--cs-font-size-caption); }
  .connect-main { width: min(100%, 42rem); padding: var(--cs-space-16) var(--cs-space-10); align-self: center; }
  .connect-brand { display: none; }
  .connect-panel { gap: var(--cs-space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .coaching-skeleton__line { animation: none; background: rgba(255, 255, 255, 0.07); }
  .toggle__track, .toggle__track::after { transition: none; }
}

/* Example-mode banner — persistent across the public demo dashboard surfaces.
   Anonymous-only (see context_processors.example_mode); converts to TikTok
   sign-in from any demo page. */
.example-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--cs-color-primary);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
}
.example-banner__tag {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.example-banner__text { flex: 1 1 auto; min-width: 0; }
.example-banner__cta {
  flex: none;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.example-banner__cta:hover { background: rgba(255, 255, 255, 0.3); }

/* Content gating — locked teasers (anonymous/example + non-network). */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--cs-color-light-blue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lock-badge svg { width: 0.85rem; height: 0.85rem; }
.unlock-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cs-color-info-line);
  border-radius: var(--cs-radius-xl);
  background: var(--cs-color-info-bg);
}
.unlock-banner__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: rgba(1, 126, 255, 0.16);
  color: var(--cs-color-primary);
}
.unlock-banner__icon svg { width: 1.2rem; height: 1.2rem; }
.unlock-banner__text { flex: 1 1 14rem; min-width: 0; display: grid; gap: 0.1rem; }
.unlock-banner__text strong { color: var(--cs-color-text); font-size: 0.9rem; }
.unlock-banner__text span { color: var(--cs-color-text-subtle); font-size: 0.78rem; }
.unlock-banner__cta {
  flex: none;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--cs-color-primary);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.unlock-banner__cta:hover { filter: brightness(1.08); }
.lesson-card--locked .lesson-card__icon,
.lesson-rec--locked { opacity: 0.92; }
.lesson-lock-card {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem 1.25rem;
  border: 1px solid var(--cs-color-line);
  border-radius: var(--cs-radius-2xl);
  background: var(--cs-color-surface-quiet);
}
.lesson-lock-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(1, 126, 255, 0.16);
  color: var(--cs-color-primary);
}
.lesson-lock-card__icon svg { width: 1.4rem; height: 1.4rem; }
.lesson-lock-card__why { margin: 0; color: var(--cs-color-text); font-size: 0.95rem; line-height: 1.5; max-width: 34rem; }
.lesson-lock-card__note { margin: 0; color: var(--cs-color-text-subtle); font-size: 0.82rem; line-height: 1.5; max-width: 32rem; }
.lesson-lock-card .cs-button { margin-top: 0.4rem; max-width: 22rem; }

/* Member footer Sign out (Phase 1 quick win; reachable at both widths). */
.member-footer__signout { font-weight: 600; color: var(--cs-color-light-blue); }
.member-footer__signout:hover { color: #fff; }

/* --- Phase 5: limited-tier (non-network) free tools ----------------------- */
.lt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--cs-space-3); }
.lt-stat { display: grid; gap: .15rem; padding: var(--cs-space-4); border: 1px solid var(--cs-color-line); border-radius: var(--cs-radius-md); background: rgba(255,255,255,.02); text-align: center; }
.lt-stat__v { font-size: 1.35rem; font-weight: var(--cs-font-weight-semibold); font-variant-numeric: tabular-nums; }
.lt-stat__k { color: var(--cs-color-text-subtle); font-size: .8125rem; }

.lt-streak { margin: 0; line-height: 1.55; }

.lt-logform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-3); }
.lt-field { display: grid; gap: .3rem; min-width: 0; }
.lt-field--wide { grid-column: 1 / -1; }
.lt-field span { color: var(--cs-color-text-subtle); font-size: .8125rem; }
.lt-field input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--cs-color-line); border-radius: var(--cs-radius-md); background: rgba(255,255,255,.03); color: var(--cs-color-text); font: inherit; }
.lt-logform .cs-button { grid-column: 1 / -1; }

.lt-bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: .4rem; height: 7rem; }
.lt-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; }
.lt-bar__fill { width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--cs-color-light-blue), rgba(1,126,255,.45)); }
.lt-bar__d { color: var(--cs-color-text-subtle); font-size: .625rem; white-space: nowrap; }
.lt-totals { margin: var(--cs-space-3) 0 0; color: var(--cs-color-text-subtle); font-size: .875rem; }
.lt-empty { margin: 0; color: var(--cs-color-text-subtle); }

.lt-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-3); }
.lt-tip { display: grid; gap: .15rem; }
.lt-tip__t { font-weight: var(--cs-font-weight-medium); }
.lt-tip__x { color: var(--cs-color-text-subtle); font-size: .875rem; line-height: 1.5; }

.lt-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-3); padding: var(--cs-space-4); border: 1px solid rgba(1,126,255,.30); border-radius: var(--cs-radius-md); background: rgba(1,126,255,.07); }
.lt-nudge p { margin: 0; min-width: 12rem; flex: 1 1 14rem; line-height: 1.5; }
.lt-nudge__cta { display: inline-block; padding: .55rem .9rem; border: 0; border-radius: var(--cs-radius-md); background: var(--cs-color-light-blue); color: #fff; font: inherit; font-weight: var(--cs-font-weight-semibold); text-decoration: none; cursor: pointer; white-space: nowrap; }

.member-sidebar__link--apply { color: var(--cs-color-light-blue); font-weight: var(--cs-font-weight-semibold); }

/* Example campaigns (demo / non-network preview) */
.campaign-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.campaign-meta li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.campaign-meta__k { color: var(--cs-color-text-subtle); font-size: .8125rem; }
.campaign-meta__v { font-size: .9rem; line-height: 1.45; }

/* --- LIVE Rewards path card (Spec InApp 1A; creator-facing, no %/$) -------- */
.lrp-card { display: grid; gap: var(--cs-space-4); }
.lrp-group { display: grid; gap: var(--cs-space-2); }
.lrp-group__title { margin: 0; font-size: .8125rem; font-weight: var(--cs-font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--cs-color-light-blue); }
.lrp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.lrp-item { display: grid; gap: .2rem; padding: var(--cs-space-3); border: 1px solid var(--cs-color-line); border-radius: var(--cs-radius-md); background: rgba(255,255,255,.02); }
.lrp-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-3); }
.lrp-item__k { font-weight: var(--cs-font-weight-medium); }
.lrp-item__you { color: var(--cs-color-light-blue); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrp-item__tip { color: var(--cs-color-text-subtle); font-size: .875rem; line-height: 1.45; }
.lrp-foot { margin: 0; color: var(--cs-color-text-subtle); font-size: .8125rem; line-height: 1.5; }

/* --- Gift Gallery card (Spec InApp 1A; public tik.tools data, all tiers) ---- */
.gg-card { display: grid; gap: var(--cs-space-3); }
.gg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.gg-item { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; gap: var(--cs-space-3); align-items: center; }
.gg-item__name { font-weight: var(--cs-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-item__bar { height: .5rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.gg-item__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cs-color-light-blue), #2ec48a); }
.gg-item__pct { color: var(--cs-color-text-subtle); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gg-foot { margin: 0; color: var(--cs-color-text-subtle); font-size: .8125rem; }

/* Graduation progress card (Spec InApp Feature 3) */
.grad-bar { display: grid; gap: var(--cs-space-2); }
.grad-bar .goal-mini__numbers { font-variant-numeric: tabular-nums; }

/* Campaigns buckets (Eligible / Signed up / Ongoing / Ended) */
.campaign-bucket { margin-bottom: var(--cs-space-6); }
.campaign-bucket__label { margin: 0 0 var(--cs-space-3); font-size: .75rem; font-weight: var(--cs-font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-color-text-subtle); }