html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  /* `clip` (not `hidden`) contains horizontal overflow WITHOUT turning the
     body into a scroll container — `hidden` did the latter, which broke the
     sticky sidebar (it scrolled away with the page). */
  overflow-x: clip;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* No rubber-banding in the native app; the rule breaks wheel scrolling on
   desktop browsers, so it is scoped to play mode (class set at boot). */
html.mode-play,
html.mode-play body {
  overscroll-behavior: none;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500 560;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 570 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --bg: var(--bg);
  --sidebar: var(--bg);
  --surface: var(--surface);
  --surface-soft: var(--surface);
  --surface-raised: var(--surface-2);
  --line: var(--line);
  --line-soft: var(--line);
  --text: var(--text);
  --muted: var(--muted);
  --dim: var(--muted);
  --active: var(--surface-2);
  background: var(--bg);
  color: var(--text);
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

img,
svg {
  -webkit-user-drag: none;
  user-drag: none;
}

body {
  min-height: 100vh;
  background: var(--bg);
}

.app-shell.exercise-entering::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  animation: exercise-enter-blackout 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell.exercise-entering .app-content {
  animation: exercise-content-settle 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes exercise-enter-blackout {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes exercise-content-settle {
  0% {
    background-color: transparent;
  }
  38% {
    background-color: var(--bg);
  }
  100% {
    background-color: var(--bg);
  }
}

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

button,
a,
[role="button"],
input,
select,
textarea,
summary,
.exercise-card,
.preset-button,
.side-nav-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

button {
  border: 1px solid var(--text);
  border-radius: 8px;
  padding: 15px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.preset-button:disabled,
.disabled-option {
  cursor: not-allowed;
  opacity: 0.42;
}

.disabled-option input {
  cursor: not-allowed;
}

input {
  width: 100%;
  accent-color: var(--text);
}

input[type="number"],
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--text);
}

.app-shell {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  border-right: 1px solid var(--line-soft);
  background: var(--sidebar);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 0 18px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sidebar-brand:hover {
  opacity: 0.7;
}

.sidebar-brand img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: contain;
}

.sidebar-brand strong {
  color: var(--text);
  font-size: 1rem;
}

.side-nav {
  display: grid;
  gap: 4px;
  padding: 0 12px;
}

.side-nav-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 10px 9px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  box-shadow: none;
}

.side-nav-button:hover,
.side-nav-button.active {
  background: var(--active);
  color: var(--text);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon svg path {
  vector-effect: non-scaling-stroke;
}

.app-content {
  width: min(1160px, calc(100% - 32px));
  min-height: calc(100vh - 32px);
  margin: 16px auto;
  /* No frame: content sits directly on the page like the reference, so the
     cards are the only surfaces. The old border + graph-paper grid + shadow
     read as a "box within a box". */
  border: none;
  border-radius: 0;
  padding: 25px 25px 40px;
  background: transparent;
  box-shadow: none;
}

.hero {
  position: relative;
  width: min(860px, 100%);
  margin: 0 auto 18px;
}

.page-status {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-streak-pill,
.page-notification-button {
  display: inline-grid;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    var(--surface);
  color: var(--text);
  box-shadow: none;
}

.page-streak-pill {
  grid-template-columns: auto auto;
  gap: 7px;
  padding: 0 12px;
  font-weight: 600;
}

.page-streak-pill svg {
  width: 18px;
  height: 18px;
  fill: var(--text);
}

.page-notification-button {
  position: relative;
  place-items: center;
  width: 38px;
  padding: 0;
}

.page-notification-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-notification-button span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--surface);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--surface);
  font-size: 0.62rem;
  font-weight: 600;
}

.page-notification-button span[hidden] {
  display: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

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

.eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h1 {
  margin: 4px 0 5px;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.lede {
  max-width: 620px;
  line-height: 1.55;
}

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

.dashboard-panel,
.placeholder-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
  box-shadow: none;
}

.dashboard-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 180px;
}

.dashboard-panel h2,
.placeholder-panel h2 {
  margin: 0;
  font-size: 1.5rem;
}

.dashboard-panel p,
.placeholder-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.leaderboard-page {
  gap: 15px;
}

.rank-hero-card,
.rank-progress-card,
.leaderboard-list-card,
.xp-events-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  background:
    var(--surface-2);
  box-shadow: none;
}

.rank-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.rank-hero-card h2 {
  margin: 3px 0 7px;
  color: var(--text);
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 0.95;
}

.rank-hero-card p:not(.exercise-type) {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.rank-hero-card > strong {
  display: grid;
  place-items: center;
  width: clamp(70px, 20vw, 96px);
  height: clamp(70px, 20vw, 96px);
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(145deg, var(--surface-2), var(--surface));
  color: var(--text);
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
}

.rank-progress-card {
  display: grid;
  gap: 17px;
}

.rank-progress-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: end;
}

.rank-progress-copy span,
.rank-metrics-grid span,
.leaderboard-row span,
.xp-event-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rank-progress-copy strong {
  color: var(--text);
  font-size: 1.35rem;
}

.rank-progress-copy b {
  color: var(--muted);
  font-size: 0.85rem;
}

.rank-progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.rank-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
}

.rank-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rank-metrics-grid article {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 13px;
  background: var(--surface);
}

.rank-metrics-grid strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
}

.rank-metrics-grid p,
.leaderboard-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.leaderboard-list-card,
.xp-events-card {
  display: grid;
  gap: 10px;
}

.leaderboard-row,
.xp-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
}

.leaderboard-row.current {
  border-color: var(--line);
}

.leaderboard-row strong,
.xp-event-row strong {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.leaderboard-row b {
  color: var(--muted);
  font-size: 0.8rem;
}

.leaderboard-row em,
.xp-event-row b {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.xp-event-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.xp-event-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboard-panel span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-panel strong {
  color: var(--text);
  font-size: 2.2rem;
  line-height: 1;
}

.home-page {
  display: none;
  gap: 17px;
  width: min(760px, 100%);
  margin: 0 auto;
}

.friends-page {
  display: none;
  gap: 22px;
  width: min(760px, 100%);
  margin: 0 auto;
}

.friends-hero-card,
.friends-add-card,
.friends-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    var(--surface);
}

.friends-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 22px;
}

.friends-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.8rem;
  font-weight: 600;
}

.friends-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friends-hero-card span,
.friends-hero-card p {
  color: var(--muted);
}

.friends-hero-card span {
  font-size: 0.82rem;
  font-weight: 600;
}

.friends-hero-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  line-height: 1;
}

.friends-hero-card p {
  margin: 7px 0 0;
  font-size: 0.88rem;
}

.friends-hero-card > b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--surface);
  font-size: 0.85rem;
}

.friends-leaderboard-button {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

.friends-leaderboard-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friends-add-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.friends-add-search svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friends-add-search input {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  font-weight: 500;
  outline: none;
}

.friends-add-search input::placeholder {
  color: var(--line-strong);
}

.friends-page-status:empty {
  display: none;
}

.friends-add-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.friends-add-card .friend-status {
  grid-column: 1 / -1;
}

.friends-add-card button {
  min-height: 44px;
  border-radius: var(--radius);
  padding: 0 17px;
}

.friends-panel {
  display: grid;
  gap: 13px;
  padding: 14px;
}

.friends-main-list {
  display: block;
}

.friends-empty-state {
  display: grid;
  justify-items: center;
  gap: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(48px, 14vw, 72px) 22px;
  background:
    var(--surface-2);
  text-align: center;
}

.friends-empty-state svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friends-empty-state strong {
  color: var(--text);
  font-size: clamp(1.25rem, 5.5vw, 1.7rem);
}

.friends-empty-state p {
  max-width: 310px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  line-height: 1.35;
}

.friends-invite-button {
  justify-self: center;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  padding: 0 16px;
  background: transparent;
  color: var(--accent-blue);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 600;
}

.friends-invite-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-streak-card {
  display: grid;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 5vw, 34px);
  background:
    var(--surface);
  box-shadow: var(--shadow);
}

.home-streak-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.home-streak-top > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-streak-top strong {
  color: var(--text);
  font-size: clamp(2.8rem, 10vw, 4rem);
  line-height: 0.78;
  letter-spacing: 0;
}

.home-streak-top > span {
  color: var(--dim);
  font-size: 1rem;
  font-weight: 600;
}

.home-bolt {
  display: block;
  width: 28px;
  height: 44px;
  background: var(--line);
  clip-path: polygon(52% 0, 8% 54%, 42% 54%, 28% 100%, 92% 40%, 56% 40%);
}

.home-streak-days i {
  display: block;
  width: 22px;
  height: 30px;
  background: var(--line);
  clip-path: polygon(52% 0, 8% 54%, 42% 54%, 28% 100%, 92% 40%, 56% 40%);
}

.home-streak-card p {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 3.6vw, 1.28rem);
  line-height: 1.35;
}

.home-streak-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

.home-streak-days div {
  display: grid;
  justify-items: center;
  gap: 15px;
  min-width: 0;
}

.home-streak-days span {
  --streak-orb-size: clamp(44px, 12vw, 58px);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--streak-orb-size);
  height: var(--streak-orb-size);
  min-width: var(--streak-orb-size);
  min-height: var(--streak-orb-size);
  border: 4px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.home-streak-days .today span {
  border-color: var(--line-strong);
}

.home-streak-days .complete span {
  border-color: var(--line-strong);
  background: var(--fill-subtle);
  box-shadow: none;
}

.home-streak-days .complete i {
  background: var(--text);
}

.home-streak-days b {
  color: var(--muted);
  font-size: clamp(0.86rem, 3.4vw, 1.05rem);
  line-height: 1;
}

.home-streak-days .today b {
  color: var(--text);
}

.home-friends-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 18px;
  background: var(--surface);
  cursor: pointer;
}

.home-friends-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-friends-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: clamp(1.12rem, 4.4vw, 1.45rem);
  line-height: 1.05;
}

.home-social-icons {
  display: flex;
  align-items: end;
  gap: 5px;
}

.home-social-icons i {
  display: grid;
  place-items: center;
  width: 24px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 5px 5px;
  background: var(--line);
  color: var(--text);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 600;
}

.home-social-icons i:nth-child(1) {
  height: 30px;
}

.home-social-icons i:nth-child(2) {
  height: 42px;
}

.home-social-icons i:nth-child(3) {
  height: 25px;
}

.home-social-notification {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 2px solid var(--surface);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--surface);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.home-social-notification[hidden] {
  display: none;
}

.social-leaderboard-dialog {
  width: min(500px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 28px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.social-leaderboard-dialog::backdrop {
  background: var(--line-strong);
}

.social-leaderboard-dialog form {
  display: grid;
  gap: 17px;
  max-height: inherit;
  overflow: hidden;
  padding: 22px;
}

#social-leaderboard-content {
  display: grid;
  gap: 17px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.social-leaderboard-hero {
  display: grid;
  gap: 7px;
}

.social-leaderboard-hero h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  line-height: 0.95;
}

.social-leaderboard-hero p:not(.exercise-type) {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.social-friends-panel {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  background:
    var(--surface);
}

.social-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.social-section-heading span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.social-section-heading strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

.social-section-heading b {
  flex: 0 0 auto;
  border: 1px solid var(--fill-subtle);
  border-radius: var(--radius);
  padding: 6px 9px;
  background: var(--fill-subtle);
  color: var(--accent);
  font-size: 0.72rem;
}

.social-add-friend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.social-add-friend-row button {
  min-height: 44px;
  border-radius: var(--radius);
  padding: 0 17px;
  font-size: 0.86rem;
}

.social-friend-field {
  min-width: 0;
}

.social-friend-field input {
  font-size: 0.95rem;
}

.social-friend-grid {
  display: grid;
  gap: 10px;
}

.social-friends-panel .friend-list-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 11px;
}

.social-friends-panel .friend-list-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.social-friends-panel .friend-list-item {
  background: var(--surface);
}

.leaderboard-timeframe-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 5px;
  background: var(--surface);
}

.leaderboard-timeframe-switch button {
  min-height: 36px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.85rem;
}

.leaderboard-timeframe-switch button.active {
  background: var(--accent);
  color: var(--on-accent);
}

.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.leaderboard-podium article {
  display: grid;
  align-content: end;
  gap: 6px;
  min-height: 104px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 9px;
  background:
    var(--surface);
}

.leaderboard-podium article.first {
  min-height: 132px;
  border-color: var(--line);
}

.leaderboard-podium span,
.leaderboard-podium b {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.leaderboard-podium strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.leaderboard-top100 {
  display: grid;
  gap: 7px;
}

.social-leaderboard-dialog .leaderboard-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.profile-rank-progress-card {
  display: grid;
  gap: 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px;
  background:
    var(--surface);
}

.profile-rank-progress-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: end;
}

.profile-rank-progress-top > div:last-child {
  text-align: right;
}

.profile-rank-progress-top span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-rank-progress-top strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 1.1rem;
}

.profile-rank-progress-top b,
.profile-rank-progress-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.primary-panel {
  border-color: var(--line);
  background: var(--surface);
}

.primary-panel button {
  justify-self: start;
  margin-top: 8px;
}

.exercise-page {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.routine-section,
.section-heading,
.routine-empty {
  grid-column: 1 / -1;
}

.routine-section {
  display: grid;
  gap: 15px;
  margin-bottom: 4px;
}

.routine-empty,
.routine-list,
.exercise-card,
.controls,
.stage-card,
.mot-stage-card,
.rrt-stage-card,
.cct-stage-card,
.ufov-stage-card,
.ict-stage-card {
  border-color: var(--line-soft);
  background:
    var(--surface);
  box-shadow: none;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 17px;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.45rem;
}

.exercise-heading {
  margin-top: 10px;
}

.routine-actions {
  display: flex;
  gap: 8px;
}

.routine-actions button,
.primary-panel button {
  padding: 10px 12px;
}

.routine-empty {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 20px;
  background: var(--surface);
}

.routine-empty p,
.routine-empty span {
  margin: 0;
}

.routine-empty p {
  color: var(--text);
  font-weight: 500;
}

.routine-empty span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.routine-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
}

.routine-list:empty {
  display: none;
}

.routine-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.routine-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.routine-card p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.routine-card-actions {
  display: flex;
  gap: 8px;
}

.routine-dialog {
  width: min(920px, calc(100% - 28px));
  max-height: min(860px, calc(100vh - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
}

.routine-dialog::backdrop {
  background: var(--line-strong);
}

.routine-dialog form {
  display: grid;
  gap: 20px;
  max-height: inherit;
  overflow: auto;
  padding: 25px;
}

.routine-dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: start;
}

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

.dialog-close-button {
  padding: 8px 10px;
}

.routine-builder-grid,
.routine-add-row,
.routine-dialog-actions,
.routine-block-grid,
.routine-settings-grid {
  display: grid;
  gap: 10px;
}

.routine-builder-grid {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.routine-add-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.routine-name-field,
.routine-total-card,
.routine-block label {
  display: grid;
  gap: 7px;
}

.routine-name-field span,
.routine-total-card span,
.routine-block label span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.routine-total-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.routine-total-card strong {
  font-size: 1.35rem;
}

.routine-block-list {
  display: grid;
  gap: 8px;
}

.routine-block-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.routine-block {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  cursor: grab;
  transition:
    border-color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}

.routine-block.dragging {
  opacity: 0.48;
  cursor: grabbing;
}

.routine-block.drag-over {
  border-color: var(--text);
  transform: translateY(2px);
}

.routine-block-header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.routine-block-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.routine-drag-handle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-color: var(--line-soft);
  border-radius: 8px;
  padding: 0;
  background: var(--fill-subtle);
  color: var(--muted);
  cursor: grab;
  font: 900 1rem "Geist", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -0.12em;
}

.routine-block-title > div {
  min-width: 0;
}

.routine-block-title strong,
.routine-block-title span {
  display: block;
}

.routine-block-title strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-block-title span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.routine-drag-handle:active {
  cursor: grabbing;
}

.routine-block-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.routine-icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-color: var(--line-soft);
  border-radius: 8px;
  padding: 0;
  background: var(--fill-subtle);
  color: var(--text);
}

.routine-icon-button:hover {
  border-color: var(--line);
  background: var(--line);
}

.routine-icon-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.routine-block-grid,
.routine-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.routine-block input,
.routine-block select,
.routine-name-field input,
.routine-add-row select {
  width: 100%;
}

.routine-settings {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  background: var(--line-strong);
}

.routine-settings summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.routine-settings:not([open]) {
  display: none;
}

.routine-setting-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.routine-setting-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 500;
}

.routine-setting-checks input {
  width: auto;
}

.routine-dialog-actions {
  grid-template-columns: auto 1fr;
  justify-items: end;
}

.routine-dialog-actions .routine-save-confirmed,
.routine-dialog-actions .routine-save-confirmed:disabled {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  opacity: 1;
}

.statistics-page {
  display: none;
  gap: 15px;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.profile-filter-bar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.brain-snapshot-panel {
  display: grid;
  gap: 22px;
  width: min(520px, 100%);
  margin: 2px auto 10px;
  padding: 0 0 12px;
}

.brain-age-card {
  position: relative;
  display: grid;
  min-height: 176px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 26px 24px;
  background:
    var(--surface);
  box-shadow: none;
}

.brain-age-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  color: var(--text);
  text-align: center;
}

.brain-age-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 500;
  letter-spacing: 0;
}

.brain-age-copy p {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
}

.brain-age-copy strong {
  color: var(--text);
  font-size: clamp(4rem, 12vw, 5.8rem);
  line-height: 0.78;
}

.brain-age-copy span {
  padding-bottom: 8px;
  color: var(--line-strong);
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  font-weight: 500;
}

.brain-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 0;
}

.brain-metric-grid article {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
  box-shadow: none;
}

.brain-metric-grid h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0;
}

.brain-metric-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brain-metric-score {
  color: var(--text);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 0.95;
}

.metric-change {
  flex: 0 0 auto;
  font-size: clamp(1.55rem, 5vw, 2.05rem);
  line-height: 1;
}

.metric-change.positive {
  color: var(--success);
}

.metric-change.negative {
  color: var(--error);
}

.profile-quick-actions {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0 0;
}

.profile-quick-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 154px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 18px;
  background:
    var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}

.profile-quick-actions button.active {
  background:
    var(--text);
  color: var(--surface);
  box-shadow: none;
}

.profile-quick-actions button span {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.profile-quick-actions button.active span {
  transform: rotate(225deg) translate(-2px, -1px);
}

.profile-data-panels {
  display: grid;
  gap: 15px;
}

.profile-data-panel {
  display: grid;
  gap: 15px;
}

.placeholder-page,
.leaderboard-page {
  display: none;
  width: min(720px, 100%);
  margin: 0 auto;
}

.profile-page {
  display: none;
  min-height: 260px;
}

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

.profile-overview article,
.exercise-stats-section {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
  box-shadow: none;
}

.profile-overview span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-overview strong {
  display: block;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.profile-overview p {
  margin: 8px 0 0;
  color: var(--muted);
}

.exercise-stats-section {
  display: grid;
  gap: 15px;
}

.exercise-stats-heading {
  align-items: center;
}

.exercise-stat-picker {
  position: relative;
  z-index: 6;
}

.exercise-stat-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background:
    var(--surface-2);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
}

.exercise-stat-trigger small,
.exercise-stat-menu button span {
  display: block;
}

.exercise-stat-trigger small {
  margin-bottom: 5px;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exercise-stat-trigger strong {
  display: block;
  color: var(--text);
  font-size: 1.12rem;
}

.picker-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

.exercise-stat-picker.open .picker-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.exercise-stat-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  background:
    var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 140ms ease,
    transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.exercise-stat-picker.open .exercise-stat-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.exercise-stat-menu button {
  border: 0;
  border-radius: var(--radius);
  padding: 12px 13px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  box-shadow: none;
  font-weight: 500;
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.exercise-stat-menu button:hover,
.exercise-stat-menu button.active {
  background: var(--line);
  color: var(--text);
}

.exercise-stat-menu button.active {
  background:
    var(--muted);
  color: var(--surface);
}

.segmented-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 5px;
  background: transparent;
  box-shadow: none;
}

.segmented-control::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--active-left, 5px);
  width: var(--active-width, 0px);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: var(--active-opacity, 0);
  transition:
    left 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease;
}

.segmented-control button {
  position: relative;
  z-index: 1;
  flex: 1 0 max-content;
  min-width: 112px;
  border: 0;
  border-radius: var(--radius);
  padding: 11px 18px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 500;
  transition:
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.segmented-control button.active {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.segmented-control button.active::before {
  content: none;
}

.compact-segmented {
  width: auto;
  min-width: min(430px, 100%);
}

.compact-segmented button {
  min-width: 86px;
  padding: 9px 13px;
  font-size: 0.88rem;
}

.stats-summary,
.stats-grid {
  display: grid;
  gap: 15px;
}

.stats-summary,
.stats-grid {
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.stats-summary.stats-refreshing,
.stats-grid.stats-refreshing {
  opacity: 0.72;
  transform: translateY(3px);
}

.stats-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-summary article,
.stats-panel,
.stat-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
  box-shadow: none;
}

.stats-summary span,
.stat-card span,
.stats-panel p {
  color: var(--muted);
}

.stats-summary span,
.stat-card span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stats-summary strong {
  display: block;
  color: var(--text);
  font-size: 1.65rem;
}

.stats-summary p,
.stats-panel p,
.stat-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

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

.nback-mode-filter {
  display: grid;
  grid-template-columns: minmax(150px, 0.25fr) minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.nback-mode-filter span,
.nback-mode-filter small {
  color: var(--muted);
}

.nback-mode-filter span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nback-mode-filter strong {
  color: var(--text);
}

.nback-filter-stack {
  display: grid;
  gap: 8px;
}

.nback-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.nback-filter-row button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--line);
  min-height: 38px;
  padding: 8px 11px;
  background: var(--surface-2);
  color: var(--muted);
}

.nback-filter-row button.active {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.nback-filter-row small {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius);
  background: var(--line);
  color: inherit;
  font-size: 0.72rem;
}

.advanced-stats-disclosure {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.advanced-stats-disclosure summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}

.advanced-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 14px;
}

.stat-card {
  display: grid;
  gap: 17px;
}

.selected-stat-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr);
  align-items: start;
}

.level-progress-card {
  grid-column: 1 / -1;
}

.level-progress-track {
  overflow: hidden;
  height: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.level-progress-track span {
  display: block;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background: var(--muted);
}

.stat-card h2,
.stats-panel h2 {
  margin: 0;
  font-size: 1.35rem;
}

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

.stat-metrics div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.stat-metrics dt {
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
}

.stat-metrics dd {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 500;
}

.lab-chart-card {
  min-height: 260px;
}

.lab-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.rt-histogram,
.dual-axis-graph,
.breakdown-graph {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 150px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
}

.rt-histogram span,
.breakdown-graph span {
  flex: 1;
  min-width: 8px;
  margin: 0;
  border-radius: var(--radius) 999px 2px 2px;
  background: var(--text);
}

.breakdown-graph span.fatigue {
  background: var(--text);
  opacity: 0.55;
}

.dual-axis-graph span {
  position: relative;
  flex: 1;
  min-width: 10px;
  height: 135px;
  margin: 0;
}

.dual-axis-graph i,
.dual-axis-graph b {
  position: absolute;
  bottom: 0;
  width: 42%;
  border-radius: var(--radius) 999px 2px 2px;
}

.dual-axis-graph i {
  left: 4%;
  background: var(--text);
}

.dual-axis-graph b {
  right: 4%;
  background: var(--muted);
}

.cognitive-map {
  display: grid;
  gap: 15px;
}

.cognitive-map div {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cognitive-map span {
  margin: 0;
}

.cognitive-map b {
  color: var(--text);
}

.cognitive-map i {
  overflow: hidden;
  height: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.cognitive-map i::before {
  content: "";
  display: block;
  width: var(--axis-value);
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
}

.pfit-map {
  position: relative;
  min-height: 180px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 42%, rgba(255, 255, 255, var(--frontal-alpha)), transparent 24%),
    radial-gradient(circle at 66% 52%, rgba(255, 255, 255, var(--parietal-alpha)), transparent 24%),
    var(--fill-subtle);
}

.pfit-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--line);
  color: var(--text);
  font-size: 0.75rem;
}

.pfit-node.frontal {
  left: 24%;
  top: 28%;
  box-shadow: none;
}

.pfit-node.parietal {
  right: 20%;
  top: 42%;
  box-shadow: none;
}

.pfit-link {
  position: absolute;
  left: 38%;
  right: 33%;
  top: 52%;
  height: 2px;
  margin: 0;
  background: var(--line-strong);
  transform: rotate(12deg);
  transform-origin: left center;
}

.exercise-card {
  display: grid;
  align-content: space-between;
  gap: 22px;
  min-height: 205px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px;
}

.exercise-card-active {
  border-color: var(--line);
  background:
    var(--surface);
}

.exercise-type,
.exercise-card p,
.coming-soon {
  margin: 0;
  color: var(--muted);
}

.exercise-type {
  margin-bottom: 10px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exercise-card h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.exercise-card p {
  line-height: 1.45;
}

.coming-soon {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 11px 12px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
}

.workbench {
  display: none;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  justify-content: stretch;
  width: 100%;
  min-height: calc(100vh - 176px);
}

.controls,
.stage-card,
.mot-stage-card,
.rrt-stage-card,
.cct-stage-card,
.ufov-stage-card,
.ict-stage-card {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.controls {
  display: grid;
  gap: 20px;
  align-content: start;
  max-height: calc(100vh - 148px);
  overflow: auto;
  padding: 22px;
}

.nback-workbench .controls,
.mot-workbench .controls,
.rrt-workbench .controls,
.cct-workbench .controls,
.ufov-workbench .controls,
.ict-workbench .controls {
  position: sticky;
  top: 20px;
}

.nback-workbench .stage-card,
.mot-workbench .mot-stage-card,
.rrt-workbench .rrt-stage-card,
.cct-workbench .cct-stage-card,
.ufov-workbench .ufov-stage-card,
.ict-workbench .ict-stage-card {
  align-self: start;
  width: 100%;
}

.nback-workbench {
  grid-template-columns: minmax(320px, 390px) minmax(560px, 1fr);
  width: min(1180px, 100%);
  margin: 0 auto;
}

.nback-open:not(.game-active) .nback-workbench,
.mot-open:not(.game-active) .mot-workbench,
.rrt-open:not(.game-active) .rrt-workbench,
.cct-open:not(.game-active) .cct-workbench,
.ufov-open:not(.game-active) .ufov-workbench,
.ict-open:not(.game-active) .ict-workbench {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  width: min(620px, 100%);
}

.nback-open .stage-card,
.mot-open .mot-stage-card,
.rrt-open .rrt-stage-card,
.cct-open .cct-stage-card,
.ufov-open .ufov-stage-card,
.ict-open .ict-stage-card {
  display: none;
}

.nback-open .quit-button,
.mot-open .quit-button,
.rrt-open .quit-button,
.cct-open .quit-button,
.ufov-open .quit-button,
.ict-open .quit-button,
.nback-open .response-grid,
.cct-open .cct-answer,
.cct-open .cct-keypad,
.rrt-open .rrt-answer-grid,
.mot-open .mot-actions,
.ufov-open .ufov-answer-panel,
.ict-open .ict-response-grid {
  display: none;
}

.nback-open .stage-card,
.cct-open .cct-stage-card,
.rrt-open .rrt-stage-card,
.mot-open .mot-stage-card,
.ufov-open .ufov-stage-card,
.ict-open .ict-stage-card {
  opacity: 0.72;
}

.nback-open .stage-card::before,
.cct-open .cct-stage-card::before,
.rrt-open .rrt-stage-card::before,
.mot-open .mot-stage-card::before,
.ufov-open .ufov-stage-card::before,
.ict-open .ict-stage-card::before {
  content: "Preview";
  justify-self: start;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 5px 9px;
  background: var(--fill-subtle);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  border-color: transparent;
  min-height: 34px;
  padding: 6px 12px 6px 4px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.back-button::before,
.quit-button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.9;
}

.back-button:hover,
.quit-button:hover:not(:disabled) {
  color: var(--text);
  background: var(--fill-subtle);
}

.control-row {
  display: grid;
  gap: 8px;
}

.inline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.inline-actions button {
  padding: 10px 12px;
}

.timer-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.timer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 500;
}

.timer-toggle input {
  width: auto;
}

.timer-control:has(input:disabled) {
  opacity: 0.62;
}

.rrt-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rrt-object-group .preset-button,
.rrt-mode-group .preset-button {
  min-height: 48px;
  white-space: normal;
}

.nested-control {
  margin-left: 28px;
}

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

.duration-presets,
.time-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.nback-preset-group,
.time-preset-group {
  display: grid;
  gap: 8px;
}

.nback-preset-group > span,
.time-preset-group > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nback-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.custom-duration,
.nback-custom-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 0 8px;
  background: var(--surface-2);
  color: var(--muted);
}

.custom-duration span,
.nback-custom-duration span {
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.custom-duration:focus-within,
.nback-custom-duration:focus-within {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.custom-duration input,
.nback-custom-duration input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: center;
  font-weight: 600;
}

.custom-duration input:focus,
.nback-custom-duration input:focus {
  outline: none;
}

.preset-button {
  border-color: var(--line);
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.preset-button.active {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.interval-preset-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
}

.interval-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.interval-presets button {
  border-color: var(--line);
  padding: 8px 6px;
  background: var(--surface-2);
  color: var(--text);
}

.interval-presets button.active {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.rrt-mode-settings {
  display: grid;
  gap: 15px;
}

.mode-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.mode-panel p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mode-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 500;
}

.mode-grid input {
  min-width: 0;
}

@media (min-width: 1040px) {
  .controls .control-row {
    grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 15px;
  }

  .controls .control-row > label:first-child {
    margin: 0;
  }

  .controls .control-row > input,
  .controls .control-row > select,
  .controls .control-row > .interval-preset-row,
  .controls .control-row > .timer-control {
    grid-column: 2;
  }

  .controls .control-row > span,
  .controls .control-row > .inline-check {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
  }

  .nback-workbench .controls,
  .mot-workbench .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nback-workbench .back-button,
  .nback-workbench .nback-preset-group,
  .nback-workbench fieldset,
  .nback-workbench details,
  .nback-workbench #start-session,
  .mot-workbench .back-button,
  .mot-workbench details,
  .mot-workbench #start-mot-session {
    grid-column: 1 / -1;
  }

  .nback-workbench .controls .control-row,
  .mot-workbench .controls .control-row {
    grid-template-columns: 1fr;
  }

  .nback-workbench .controls .control-row > *,
  .mot-workbench .controls .control-row > * {
    grid-column: auto;
    justify-self: stretch;
  }

  .nback-workbench .modality-field {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nback-workbench .modality-field legend {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1040px) {
  .ufov-workbench .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ufov-workbench .back-button,
  .ufov-workbench details,
  .ufov-workbench #start-ufov-session {
    grid-column: 1 / -1;
  }

  .ufov-workbench .controls .control-row {
    grid-template-columns: 1fr;
  }
}

.small-check {
  color: var(--text-2);
  font-size: 0.88rem;
}

.setting-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
}

.setting-stat span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.setting-stat strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
}

.advanced-settings {
  display: grid;
  gap: 17px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.advanced-settings summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface-2);
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}

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

.advanced-settings summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.advanced-settings[open] summary {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.advanced-settings[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.advanced-settings:not([open]) > :not(summary),
.advanced-settings:not([open]) > :not(summary) * {
  display: none;
}

.advanced-settings[open] {
  gap: 20px;
}

.advanced-settings[open] > :not(summary) {
  margin-top: 2px;
}

.control-row label,
.control-row span,
legend {
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 500;
}

fieldset {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin: 0;
  padding: 12px;
}

.modality-field,
.progression-field {
  display: grid;
  gap: 10px;
}

.modality-field label,
.progression-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
}

.modality-field input,
.progression-field input[type="checkbox"] {
  width: auto;
}

/* Keycap chips (reference-matched): a bordered rounded key with a slightly
   heavier bottom edge + hairline shadow, so it reads as a raised key. */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
  text-align: center;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font: 500 0.8rem "Geist", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.stage-card,
.mot-stage-card,
.rrt-stage-card,
.cct-stage-card,
.ufov-stage-card,
.ict-stage-card {
  position: relative;
  display: none;
  gap: 17px;
  width: 100%;
  justify-self: center;
  border: 1px solid var(--line-soft);
  padding: 20px;
}

.rrt-stage-card {
  width: 100%;
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.cct-stage-card {
  width: 100%;
  padding: 22px;
}

.ufov-stage-card {
  position: relative;
  display: none;
  gap: 17px;
  width: 100%;
  justify-self: center;
  border: 1px solid var(--line);
  padding: 20px;
}

.cct-display {
  display: grid;
  place-items: center;
  min-height: 190px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

.cct-display span {
  color: var(--text);
  font-size: clamp(5rem, 20vw, 8rem);
  font-weight: 600;
  line-height: 1;
}

.cct-display p {
  width: min(320px, 100%);
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.cct-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.cct-answer input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 500;
  text-align: center;
}

.cct-keypad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.cct-keypad button {
  min-height: 54px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

.cct-game-active .cct-stage-card {
  min-height: 100dvh;
  width: 100%;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  align-content: stretch;
  justify-items: center;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    max(28px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  background: var(--surface);
}

.cct-game-active.cct-voice-mode .cct-display {
  display: none;
}

.cct-game-active .cct-display {
  min-height: 120px;
}

.cct-game-active .cct-keypad {
  align-self: center;
  justify-self: center;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(560px, 100%);
  max-width: calc(100vw - 56px);
  margin-inline: auto;
  gap: 9px;
}

.cct-game-active .cct-keypad button {
  min-height: clamp(58px, 8.2vh, 76px);
  border-radius: var(--radius);
  padding: 0 4px;
  font-size: clamp(1.08rem, 4.4vw, 1.5rem);
}

.cct-game-active .live-stats,
.cct-game-active .feedback-line,
.cct-game-active pre {
  display: none;
}

.ufov-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 52vh, 620px);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    var(--surface);
  overflow: hidden;
}

.ufov-center,
.ufov-target,
.ufov-distractor {
  position: absolute;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  user-select: none;
}

.ufov-center {
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--line);
  color: var(--text);
  font-size: 2.1rem;
  font-weight: 600;
}

.ufov-target {
  color: var(--text);
  font-size: 2rem;
  font-weight: 600;
}

.ufov-distractor {
  color: var(--line-strong);
  font-size: 1.1rem;
  font-weight: 500;
}

.ufov-answer-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 15px;
}

.ufov-center-choices,
.ufov-sector-grid {
  display: grid;
  gap: 8px;
}

.ufov-center-choices {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ufov-sector-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ufov-center-choices button,
.ufov-sector-grid button {
  min-height: 48px;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.ufov-center-choices button.selected,
.ufov-sector-grid button.selected {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.ict-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(330px, 50vh, 560px);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  text-align: center;
}

.ict-fixation,
.ict-cue,
.ict-stop-signal {
  grid-area: 1 / 1;
}

.ict-fixation {
  color: var(--muted);
  font-size: 3.4rem;
  font-weight: 600;
}

.ict-cue {
  color: var(--text);
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 600;
  line-height: 1;
}

.ict-cue.food-cue {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 32px;
  background: var(--fill-subtle);
  font-size: clamp(2rem, 8vw, 4.6rem);
}

.ict-stop-signal {
  align-self: start;
  margin-top: 34px;
  color: var(--text);
  font-size: 2.4rem;
  font-weight: 600;
}

.ict-stop-signal.triangle-signal {
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-bottom: 58px solid var(--text);
  color: transparent;
}

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

.ict-response-grid button {
  min-height: 70px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.2rem;
}

.rrt-timer-strip {
  position: relative;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.rrt-timer-progress {
  width: calc(var(--rrt-timer-progress, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  transition: width var(--rrt-timer-transition, 0ms) linear;
}

.rrt-timer-off .rrt-timer-progress {
  width: 0;
}

.rrt-prompt {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--surface);
}

.rrt-prompt h2 {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 500;
}

.rrt-prompt ol {
  display: grid;
  gap: 15px;
  margin: 0;
  padding-left: 0;
  color: var(--text);
  font-size: clamp(1.12rem, 5.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
}

.rrt-prompt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 14px 14px 4px;
}

.rrt-prompt-head .exercise-type {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rrt-prompt-head span {
  display: none;
}

.rrt-frame {
  display: grid;
  gap: 17px;
  border: 0;
  margin: 0;
  padding: 8px 0 10px;
}

.rrt-frame h3 {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  font-weight: 600;
}

.rrt-frame h3:not(:first-of-type) {
  margin-top: 18px;
}

.rrt-conclusion {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  color: var(--text);
  font-size: clamp(1.12rem, 5.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.rrt-result-strip {
  display: grid;
  grid-template-columns: repeat(var(--rrt-trial-count, 12), minmax(6px, 1fr));
  gap: 4px;
  width: min(520px, 100%);
  justify-self: center;
}

.rrt-result-strip span {
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
}

.rrt-result-strip span.current {
  border-color: var(--muted);
  background: var(--line);
}

.rrt-result-strip span.correct {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
}

.rrt-result-strip span.wrong {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, var(--surface));
}

.cct-result-strip {
  display: grid;
  grid-template-columns: repeat(var(--cct-result-count, 24), minmax(6px, 1fr));
  gap: 4px;
  width: min(520px, 100%);
  justify-self: center;
}

.cct-result-strip span {
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
}

.cct-result-strip span.current {
  border-color: var(--muted);
  background: var(--line);
}

.cct-result-strip span.correct {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
}

.cct-result-strip span.wrong {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, var(--surface));
}

.rrt-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  width: min(380px, 100%);
  justify-self: center;
  margin-top: 0;
}

.rrt-answer-grid button {
  min-height: 58px;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
}

.rrt-answer-grid button:first-child:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
}

.rrt-answer-grid button:last-child:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.rrt-answer-grid button.correct-answer,
.rrt-answer-grid button.correct-answer:disabled {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
  color: var(--text);
}

.rrt-answer-grid button.wrong-answer,
.rrt-answer-grid button.wrong-answer:disabled {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, var(--surface));
  color: var(--text);
}

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

.quit-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  border: 0;
  min-height: 34px;
  padding: 6px 12px 6px 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: none;
}

.mot-stage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.stage-fullscreen-button {
  border-color: var(--line);
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
}

.session-bar,
.response-grid,
.live-stats {
  display: grid;
  gap: 10px;
}

.session-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--text-2);
  font-weight: 500;
}

.nback-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(390px, 48vh, 560px);
  border: 1px solid var(--fill-subtle);
  border-radius: 8px;
  background:
    var(--surface);
  color: inherit;
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
}

.nback-stage:disabled {
  opacity: 1;
}

.mot-workbench {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.mot-stage {
  position: relative;
  min-height: clamp(520px, 62vh, 760px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

.mot-canvas-wrap,
.mot-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.mot-canvas-wrap {
  min-height: 520px;
}

.mot-overlay {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(520px, calc(100% - 28px));
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--line-strong);
  color: var(--text);
  text-align: center;
  font-weight: 500;
  pointer-events: none;
}

.mot-overlay.countdown-mode {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 0;
  max-width: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(6rem, 20vw, 9rem);
  font-weight: 500;
  line-height: 1;
  animation: countdown-fade 850ms ease both;
  z-index: 4;
}

.mot-fixation-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--error);
  pointer-events: none;
}

.mot-actions {
  display: grid;
}

.mot-actions button:disabled {
  display: none;
}

.inline-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--text);
}

.inline-check input {
  width: auto;
}

.grid-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  width: min(390px, 72vw, 72vh);
  aspect-ratio: 1;
}

.grid-cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    var(--surface);
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: clamp(6rem, 20vw, 9rem);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

.exercise-countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.82);
  color: var(--text);
  font-size: clamp(6rem, 18vw, 9rem);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

.rrt-game-active .exercise-countdown-overlay {
  background: var(--bg);
}

.countdown:empty,
.countdown[hidden] {
  display: none;
}

.countdown-active .grid-board,
.countdown-active .audio-cue {
  visibility: hidden;
}

.countdown-pop {
  animation: countdown-fade 850ms ease both;
}

@keyframes countdown-fade {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.grid-cell.active {
  background: var(--surface-2);
  box-shadow: none;
}

.grid-cell.active.position-only {
  background: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.center-mark {
  width: 41%;
  height: 41%;
  object-fit: contain;
  opacity: 0.2;
  pointer-events: none;
}

.grid-cell.active .center-mark {
  display: none;
}

.shape {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 56%;
  height: 56%;
  max-width: 64px;
  max-height: 64px;
  background: var(--shape-color, var(--text));
  color: var(--text);
  font-size: clamp(0.7rem, 2vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
}

.shape-circle {
  border-radius: 50%;
}

.shape-triangle {
  clip-path: polygon(50% 5%, 96% 92%, 4% 92%);
}

.shape-diamond {
  transform: translateZ(18px) rotate(45deg) scale(0.78);
}

.shape-ring {
  border: clamp(5px, 0.9vw, 9px) solid var(--shape-color, var(--text));
  border-radius: 50%;
  background: transparent;
}

.shape-cross,
.shape-plus {
  border-radius: 8px;
}

.shape-bar {
  width: 28%;
}

.shape-tee,
.shape-ell,
.shape-zig,
.shape-corner {
  border-radius: 4px;
}

.audio-cue {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.response-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, 100%);
  justify-self: center;
  column-gap: 30px;
  row-gap: 22px;
}

.response-grid button {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-color: var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font-size: 1.26rem;
  line-height: 1;
}

.response-grid button kbd {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.response-grid button:nth-child(1) kbd,
.response-grid button:nth-child(3) kbd {
  left: -48px;
}

.response-grid button:nth-child(2) kbd,
.response-grid button:nth-child(4) kbd {
  right: -48px;
}

.response-grid button.pressed {
  border-color: var(--text);
  box-shadow: none;
}

.response-grid button.correct {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
}

.response-grid button.wrong {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, var(--surface));
}

.response-grid button.inactive {
  display: none;
}

.live-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.live-stats div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.live-stats dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.live-stats dd {
  margin: 6px 0 0;
  font-size: 1.45rem;
  font-weight: 600;
}

.feedback-line {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text-2);
  font-weight: 500;
}

.hide-feedback .feedback-line,
.hide-counter .live-stats {
  display: none;
}

pre {
  min-height: 168px;
  max-height: 280px;
  overflow: auto;
  margin: 0;
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}

.game-active {
  width: 100%;
}

.home-open .home-page {
  display: grid;
}

.friends-open .friends-page {
  display: grid;
}

.exercises-open .exercise-page {
  display: grid;
}

.nback-open .exercise-page,
.mot-open .exercise-page,
.rrt-open .exercise-page,
.cct-open .exercise-page,
.ufov-open .exercise-page,
.ict-open .exercise-page,
.stats-open .exercise-page,
.placeholder-open .exercise-page,
.coach-open .exercise-page,
.screentime-open .exercise-page,
.game-active .exercise-page {
  display: none;
}

.coach-page,
.screentime-page {
  display: none;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.coach-open .coach-page { display: block; }
.screentime-open .screentime-page { display: block; }

.stats-open .statistics-page {
  display: grid;
}

.placeholder-open .placeholder-page {
  display: block;
}

.leaderboard-open .leaderboard-page {
  display: grid;
}

.profile-open .profile-page {
  display: block;
}

.assessments-open .assessment-page {
  display: grid;
  gap: 15px;
  align-content: start;
}

.nback-open .nback-workbench,
.mot-open .mot-workbench,
.rrt-open .rrt-workbench,
.cct-open .cct-workbench,
.ufov-open .ufov-workbench,
.ict-open .ict-workbench,
.nback-game-active .nback-workbench,
.mot-game-active .mot-workbench,
.rrt-game-active .rrt-workbench,
.cct-game-active .cct-workbench,
.ufov-game-active .ufov-workbench,
.ict-game-active .ict-workbench {
  display: grid;
}

.game-active .hero,
.game-active .controls,
.game-active .app-sidebar {
  display: none;
}

.game-active {
  display: block;
}

.game-active .app-content {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--surface);
  box-shadow: none;
}

.game-active .workbench {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  padding: 0;
}

.game-active .stage-card,
.game-active .mot-stage-card,
.game-active .rrt-stage-card,
.game-active .cct-stage-card,
.game-active .ufov-stage-card,
.game-active .ict-stage-card {
  width: min(820px, 100%);
  border: 0;
  padding: 0;
  opacity: 1;
}

.nback-game-active .stage-card {
  width: 100%;
  min-height: 100dvh;
  align-content: stretch;
  gap: 22px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  background: var(--surface);
}

.mot-game-active .mot-stage-card {
  width: min(1160px, 100%);
}

.game-active .stage-card::before,
.game-active .mot-stage-card::before,
.game-active .rrt-stage-card::before,
.game-active .cct-stage-card::before,
.game-active .ufov-stage-card::before,
.game-active .ict-stage-card::before {
  content: none;
}

.game-active .quit-button,
.game-active .response-grid,
.game-active .cct-answer,
.game-active .cct-keypad,
.game-active .rrt-answer-grid,
.game-active .mot-actions,
.game-active .ufov-answer-panel,
.game-active .ict-response-grid {
  display: grid;
}

.game-active .quit-button,
.game-active .mot-stage-actions .quit-button {
  display: inline-flex;
}

.nback-game-active .stage-card,
.mot-game-active .mot-stage-card,
.rrt-game-active .rrt-stage-card,
.cct-game-active .cct-stage-card,
.ufov-game-active .ufov-stage-card,
.ict-game-active .ict-stage-card {
  display: grid;
}

.cct-game-active .cct-stage-card {
  width: 100%;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  align-content: stretch;
  justify-items: center;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    max(28px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  background: var(--surface);
}

.cct-game-active .cct-keypad {
  align-self: center;
  justify-self: center;
  width: min(560px, 100%);
  max-width: calc(100vw - 56px);
  margin-inline: auto;
}

.rrt-game-active .rrt-stage-card {
  min-height: 100dvh;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 20px;
  align-content: stretch;
  padding: calc(env(safe-area-inset-top) + 24px) 16px max(22px, env(safe-area-inset-bottom));
  background: var(--surface);
}

.rrt-game-active .quit-button {
  align-self: start;
  justify-self: start;
}

.rrt-game-active .rrt-prompt {
  align-self: center;
}

.rrt-game-active .rrt-answer-grid {
  align-self: start;
}

.rrt-game-active .feedback-line,
.rrt-game-active pre {
  display: none;
}

.nback-game-active .nback-stage {
  min-height: clamp(292px, calc(100dvh - 510px), 370px);
  border: 0;
  background:
    var(--surface);
}

.nback-game-active .grid-board {
  width: min(300px, 78vw, 40vh);
}

.nback-game-active .session-bar,
.nback-game-active .live-stats,
.nback-game-active .feedback-line,
.nback-game-active pre {
  display: none;
}

.mot-game-active .app-content {
  width: min(1160px, calc(100% - 32px));
}

.mot-game-active .mot-stage {
  min-height: min(78vh, 760px);
}

.mot-game-active .mot-canvas-wrap {
  min-height: min(78vh, 760px);
}

.mot-stage:fullscreen,
.mot-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: var(--bg);
}

.mot-stage:fullscreen .mot-canvas-wrap,
.mot-stage:-webkit-full-screen .mot-canvas-wrap {
  min-height: 100vh;
}

.quit-dialog {
  width: min(360px, calc(100% - 36px));
  border: 1px solid var(--text);
  border-radius: 8px;
  padding: 25px;
  background: var(--bg);
  color: var(--text);
}

.quit-dialog::backdrop {
  background: var(--line-strong);
}

.quit-dialog h2 {
  margin: 0 0 8px;
}

.quit-dialog p {
  margin: 0 0 18px;
  color: var(--muted);
}

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

.session-summary-dialog {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.session-summary-dialog::backdrop {
  background: var(--line-strong);
}

.session-summary-dialog form {
  display: grid;
  gap: 22px;
  padding: 25px;
}

.session-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.session-summary-header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.session-summary-header button {
  min-height: 36px;
  border-radius: var(--radius);
  padding: 0 14px;
}

.session-summary-dialog h2 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1;
}

.session-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.session-summary-grid div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--fill-subtle);
}

.session-summary-grid dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.session-summary-grid dd {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.session-summary-grid div:first-child {
  grid-column: 1 / -1;
}

.friend-dialog {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.friend-dialog::backdrop {
  background: var(--line-strong);
}

.friend-dialog form {
  display: grid;
  gap: 17px;
  padding: 25px;
}

.friend-dialog h2 {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 2.1rem);
  line-height: 1;
}

.friend-dialog-copy,
.friend-status,
.friend-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.friend-status[data-state="success"] {
  color: var(--success);
}

.friend-status[data-state="error"] {
  color: var(--error);
}

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

.friend-handle-field > span,
.friend-list-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.friend-handle-field div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--surface);
}

.friend-handle-field b {
  color: var(--muted);
}

.friend-handle-field input {
  min-width: 0;
  border: 0;
  padding: 12px 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  outline: none;
}

.friend-list-section {
  display: grid;
  gap: 8px;
}

.friend-list {
  display: grid;
  gap: 8px;
}

.friend-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 11px 12px;
  background: var(--surface-2);
}

.friend-list-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.friend-list-item span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.friend-list-item div {
  display: flex;
  gap: 7px;
}

.friend-list-item button {
  min-height: 30px;
  border-radius: var(--radius);
  padding: 0 10px;
  font-size: 0.76rem;
}

#cancel-quit {
  background: var(--bg);
  color: var(--text);
}

@media (max-width: 820px) {
  :root {
    --mobile-nav-height: 84px;
  }

  html {
    background: var(--bg);
  }

  body {
    min-height: 100svh;
    background: var(--bg);
  }

  .app-shell {
    display: block;
    grid-template-columns: 1fr;
    min-height: 100svh;
  }

  .app-sidebar {
    position: fixed;
    z-index: 40;
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    min-height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
  }

  .sidebar-brand {
    display: none;
  }

  .side-nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding: 6px;
  }

  .side-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 22px) / 3);
    border-radius: var(--radius);
    background:
      var(--line);
    box-shadow: var(--shadow);
    transform: translateX(calc(var(--active-nav-shift, 0%) + var(--active-nav-gap-shift, 0px)));
    transition: transform 280ms cubic-bezier(0.22, 0.9, 0.24, 1);
    will-change: transform;
  }

  .side-nav-button {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    width: auto;
    min-height: 52px;
    border-radius: var(--radius);
    padding: 6px 3px 5px;
    color: var(--line-strong);
    text-align: center;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.05;
  }

  .side-nav-button:hover,
  .side-nav-button.active {
    background: transparent;
    color: var(--text);
    box-shadow: none;
  }

  .nav-icon,
  .nav-icon svg {
    width: 21px;
    height: 21px;
  }

  .nav-icon svg {
    stroke-width: 1.65;
  }

  .response-grid button kbd {
    display: none;
  }

  .app-content {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: max(90px, calc(env(safe-area-inset-top) + 32px)) 26px calc(var(--mobile-nav-height) + 34px);
    background: var(--surface);
    box-shadow: none;
  }

  .hero {
    width: 100%;
    margin: 0 0 18px;
  }

  .page-status {
    top: -42px;
    right: 0;
    z-index: 2;
  }

  .page-streak-pill,
  .page-notification-button {
    min-height: 34px;
  }

  .page-streak-pill {
    padding: 0 10px;
  }

  .page-notification-button {
    width: 34px;
  }

  .brand-logo,
  .eyebrow,
  .lede {
    display: none;
  }

  .brand-lockup {
    display: block;
    text-align: left;
  }

  h1 {
    margin: 0;
    font-size: clamp(1.7rem, 7vw, 2.05rem);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
  }

  .rank-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .rank-metrics-grid article {
    padding: 11px 9px;
  }

  .rank-metrics-grid strong {
    font-size: 1.18rem;
  }

  .leaderboard-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .leaderboard-row b {
    display: none;
  }

  .home-open h1,
  .friends-open h1,
  .assessments-open h1,
  .leaderboard-open h1 {
    font-size: clamp(1.7rem, 7vw, 2.05rem);
    letter-spacing: -0.02em;
  }

  .exercises-open .hero {
    margin-bottom: 26px;
  }

  .nback-workbench .controls,
  .mot-workbench .controls,
  .rrt-workbench .controls,
  .cct-workbench .controls,
  .ufov-workbench .controls,
  .ict-workbench .controls {
    position: static;
  }

  .dashboard-grid,
  .workbench,
  .mot-workbench,
  .ufov-workbench,
  .ict-workbench,
  .live-stats,
  .profile-overview,
  .stats-summary,
  .stats-grid,
  .selected-stat-card,
  .ufov-answer-panel,
  .ict-response-grid {
    grid-template-columns: 1fr;
  }

  .exercise-page {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 22px;
  }

  .section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .routine-section {
    display: contents;
  }

  .routine-section .section-heading {
    display: block;
    grid-column: 1 / -1;
    order: -2;
  }

  .routine-section .section-heading > div:first-child,
  .exercise-heading {
    display: none;
  }

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

  .routine-actions button {
    min-height: 54px;
    border: 0;
    border-radius: var(--radius);
    padding: 0 14px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: clamp(0.94rem, 3.8vw, 1.08rem);
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
  }

  #create-routine::before {
    content: "+";
    margin-right: 8px;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 0;
    vertical-align: -0.08em;
  }

  .routine-empty,
  .routine-list {
    display: none;
  }

  .routine-list:not(:empty) {
    display: grid;
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 2px;
    border-color: var(--line);
    background: var(--surface);
  }

  .routine-card,
  .routine-builder-grid,
  .routine-add-row,
  .routine-dialog-actions,
  .routine-block-grid,
  .routine-settings-grid,
  .routine-setting-checks {
    grid-template-columns: 1fr;
  }

  .nback-stage {
    min-height: 310px;
  }

  .exercise-card {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    padding: 25px;
    background: var(--surface);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

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

  .exercise-card h2 {
    margin: 0;
    font-size: clamp(1.3rem, 5.4vw, 1.6rem);
    line-height: 1.1;
    font-weight: 500;
  }

  .exercise-card .exercise-type,
  .exercise-card p,
  .exercise-card button {
    display: none;
  }

  .exercise-card[data-open-exercise="nback"] {
    order: 1;
  }

  .exercise-card[data-open-exercise="rrt"] {
    order: 2;
  }

  .exercise-card[data-open-exercise="cct"] {
    order: 3;
  }

  .exercise-card[data-open-exercise="mot"] {
    order: 4;
  }

  .exercise-card[data-open-exercise="ict"] {
    order: 5;
  }

  .exercise-card[data-open-exercise="ufov"] {
    order: 6;
  }

  .profile-page,
  .placeholder-page {
    padding-bottom: 12px;
  }

  .placeholder-panel,
  .profile-overview article,
  .exercise-stats-section,
  .brain-age-card,
  .brain-metric-grid article {
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .nback-open .app-content,
  .mot-open .app-content,
  .rrt-open .app-content,
  .cct-open .app-content,
  .ufov-open .app-content,
  .ict-open .app-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .cct-open:not(.game-active) .app-content {
    padding-right: max(30px, env(safe-area-inset-right));
    padding-left: max(30px, env(safe-area-inset-left));
  }

  .cct-open:not(.game-active) .cct-workbench {
    width: min(430px, 100%);
    margin-inline: auto;
    justify-content: center;
  }

  .cct-open:not(.game-active) .cct-controls {
    width: 100%;
  }

  .cct-open:not(.game-active) .preset-button,
  .cct-open:not(.game-active) .custom-duration,
  .cct-open:not(.game-active) .interval-presets button {
    min-height: 54px;
  }

  .nback-open h1,
  .mot-open h1,
  .rrt-open h1,
  .cct-open h1,
  .ufov-open h1,
  .ict-open h1,
  .profile-open h1,
  .placeholder-open h1 {
    font-size: clamp(1.05rem, 4.4vw, 1.45rem);
    line-height: 1.1;
  }

  .controls,
  .stage-card,
  .mot-stage-card,
  .rrt-stage-card,
  .cct-stage-card,
  .ufov-stage-card,
  .ict-stage-card {
    border-radius: var(--radius);
  }

  .controls {
    max-height: none;
  }

  .game-active .app-content {
    width: 100%;
    min-height: 100svh;
    padding: 0;
  }

  .game-active .workbench {
    min-height: 100svh;
  }

  .nback-game-active .stage-card {
    min-height: 100svh;
    padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  }

  .nback-game-active .nback-stage {
    min-height: calc(100svh - 190px);
  }
}

@media (max-width: 420px) {
  .app-content {
    padding-right: 22px;
    padding-left: 22px;
  }

  h1 {
    font-size: clamp(3.25rem, 15vw, 4.3rem);
  }

  .exercise-page {
    gap: 24px 18px;
  }

  .exercise-card {
    border-radius: var(--radius);
    padding: 22px;
  }

  .exercise-card h2 {
    font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  }

  .routine-actions {
    gap: 10px;
  }

  .routine-actions button {
    min-height: 48px;
    padding: 0 12px;
  }

  .side-nav {
    padding-right: 10px;
    padding-left: 10px;
  }

  .nav-icon,
  .nav-icon svg {
    width: 31px;
    height: 31px;
  }

  .response-grid {
    width: min(260px, calc(100% - 58px));
    column-gap: 24px;
  }

  .response-grid button {
    font-size: 1.05rem;
  }

}

/* Final CCT game layout override: keep the answer keypad centered with real phone gutters. */
.cct-game-active .cct-stage-card {
  width: 100% !important;
  min-height: 100dvh !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  justify-items: center !important;
  align-content: start !important;
  padding:
    calc(env(safe-area-inset-top) + 18px)
    max(32px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(32px, env(safe-area-inset-left)) !important;
}

.cct-game-active .cct-keypad {
  align-self: start !important;
  justify-self: center !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(520px, calc(100vw - 64px)) !important;
  max-width: 100% !important;
  margin: 18px auto 0 !important;
  gap: 12px !important;
}

.cct-game-active .cct-keypad button {
  min-height: clamp(66px, 9.2vh, 88px) !important;
  border-radius: var(--radius) !important;
  font-size: clamp(1.35rem, 6vw, 2rem) !important;
}

/* ADHD assessment */
.assessment-page {
  display: none;
  width: min(720px, 100%);
  margin: 0 auto;
}

.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history {
  display: grid;
  gap: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 34px;
  background: var(--surface);
  box-shadow: none;
}

.assessment-intro h2,
.assessment-detail h2,
.assessment-run h2,
.assessment-result h2,
.assessment-history h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.04;
}

.assessment-intro > p:not(.exercise-type):not(.assessment-disclaimer),
.assessment-detail > p:not(.exercise-type):not(.assessment-disclaimer),
.assessment-result > p:not(.assessment-disclaimer) {
  margin: -8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.assessment-intro > button,
.assessment-result > button {
  justify-self: start;
  min-width: 170px;
}

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

.secondary-button {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

.assessment-history-copy {
  margin: -10px 0 0;
  color: var(--muted);
}

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

.assessment-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
  background: var(--fill-subtle);
}

.assessment-history-item div {
  display: grid;
  gap: 3px;
}

.assessment-history-item span,
.assessment-history-item p,
.assessment-history-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.assessment-history-item strong {
  font-size: 1rem;
}

.assessment-history-item > b {
  align-self: center;
  font-size: 1.15rem;
  white-space: nowrap;
}

.assessment-history-item p {
  grid-column: 1 / -1;
  line-height: 1.35;
}

.assessment-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assessment-scale span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.assessment-disclaimer {
  margin: 0;
  color: var(--dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

.assessment-run-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.assessment-run-header .back-button {
  min-height: 36px;
  padding: 7px 11px;
}

#adhd-progress {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.assessment-progress-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}

#adhd-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  transition: width 180ms ease;
}

.assessment-run h2 {
  min-height: 3.2em;
  max-width: 28ch;
  font-size: clamp(1.55rem, 4.2vw, 2.25rem);
  line-height: 1.22;
}

.adhd-rating-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.adhd-rating-button {
  display: grid;
  gap: 6px;
  min-height: 76px;
  border-color: var(--line);
  border-radius: var(--radius);
  padding: 9px 6px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.adhd-rating-button strong {
  font-size: 1.35rem;
  line-height: 1;
}

.adhd-rating-button span {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.15;
}

.adhd-rating-button:hover,
.adhd-rating-button.selected {
  border-color: var(--text);
  background: var(--surface-2);
}

.assessment-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.adhd-simple-score {
  display: grid;
  grid-template-columns: auto minmax(112px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 17px;
  background: var(--surface-2);
}

.adhd-simple-score > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adhd-simple-score > strong {
  color: var(--text);
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  line-height: 1;
  white-space: nowrap;
}

.adhd-simple-score div {
  min-width: 0;
}

.adhd-simple-score b {
  display: block;
  font-size: 1rem;
}

.adhd-simple-score p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.assessment-result-grid div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 13px;
  background: var(--fill-subtle);
}

.assessment-result-grid dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

.assessment-result-grid dd {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 820px) {
  .assessments-open .app-content {
    padding-right: 22px;
    padding-left: 22px;
  }

  .assessment-intro,
  .assessment-detail,
  .assessment-run,
  .assessment-result,
  .assessment-history {
    border-radius: var(--radius);
    padding: 27px;
  }

  .assessment-run h2 {
    min-height: 0;
  }

  .adhd-rating-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .adhd-rating-button {
    min-height: 70px;
    padding: 8px 3px;
  }

  .adhd-rating-button span {
    font-size: 0.64rem;
  }

  .assessment-result-grid {
    grid-template-columns: 1fr;
  }

  .adhd-simple-score {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }

  .adhd-simple-score > span {
    grid-column: 1 / -1;
  }

  .adhd-simple-score div {
    grid-column: 1 / -1;
  }
}

/* Compact test list cards so the page can hold many assessments. */
.assessments-open .assessment-page {
  width: min(760px, 100%);
}

.assessment-intro {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: var(--radius);
  padding: 13px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.assessment-intro:hover,
.assessment-intro:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
  outline: none;
}

.assessment-intro:active {
  transform: translateY(1px);
}

.assessment-intro .exercise-type {
  margin-bottom: 3px;
}

.assessment-intro h2 {
  font-size: clamp(0.98rem, 3.2vw, 1.16rem);
  line-height: 1.05;
}

.assessment-card-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.assessment-intro .assessment-list-actions {
  display: none !important;
}

@media (max-width: 820px) {
  .assessment-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
}

/* Fullscreen games: keep primary controls below the iPhone status area and away from edges. */
.game-active {
  --game-safe-top: max(64px, calc(env(safe-area-inset-top) + 20px));
  --game-safe-side: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --game-safe-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
}

.game-active .live-stats {
  display: none !important;
}

.nback-game-active .stage-card,
.rrt-game-active .rrt-stage-card,
.cct-game-active .cct-stage-card,
.ufov-game-active .ufov-stage-card,
.ict-game-active .ict-stage-card,
.mot-game-active .mot-stage-card {
  padding: var(--game-safe-top) var(--game-safe-side) var(--game-safe-bottom) !important;
}

.game-active .quit-button {
  position: relative;
  z-index: 2;
  min-height: 44px;
  padding: 10px 14px 10px 6px;
}

/* Profile progress board */
.profile-page {
  width: min(860px, 100%);
  margin: 0 auto;
}

.profile-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: min(360px, 100%);
  margin: 0 auto 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px;
  background:
    var(--surface);
  box-shadow: none;
}

.profile-view-switch button {
  min-height: 38px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.86rem;
}

.profile-view-switch button.active {
  background: var(--accent);
  color: var(--on-accent);
}

.profile-simple-panel {
  display: grid;
  gap: 15px;
}

.profile-identity-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  background:
    var(--surface-2);
}

.profile-identity-edit-card {
  border-color: var(--line-strong);
  padding-top: 58px;
}

.profile-edit-button {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 32px;
  border-color: var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  font-size: 0.78rem;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(68px, 20vw, 92px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: clamp(1.65rem, 7vw, 2.45rem);
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.profile-avatar-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.profile-avatar-editor,
.profile-onboarding-photo {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.profile-avatar-edit {
  cursor: pointer;
}

.profile-avatar-edit > span:not(.profile-avatar-initial) {
  position: absolute;
  right: -8px;
  bottom: -5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--shadow);
}

.profile-photo-actions {
  display: flex;
  gap: 7px;
}

.profile-photo-actions button {
  min-height: 30px;
  border-color: var(--line);
  border-radius: var(--radius);
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.72rem;
  box-shadow: none;
}

.profile-identity-main {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding-top: 4px;
}

.profile-identity-main > strong {
  color: var(--text);
  font-size: clamp(1.55rem, 6.5vw, 2.15rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.profile-social-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.profile-social-stats div {
  display: grid;
  gap: 3px;
}

.profile-social-stats strong {
  color: var(--text);
  font-size: clamp(1.1rem, 4.8vw, 1.45rem);
  line-height: 1;
}

.profile-social-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.profile-hexagon-card,
.profile-calendar-card,
.profile-graph-card {
  display: grid;
  gap: 17px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--bg);
}

.profile-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.profile-calendar-pad,
.profile-calendar-day {
  aspect-ratio: 1;
  border-radius: var(--radius);
}

.profile-calendar-day {
  background: var(--line);
}

.profile-calendar-day.trained {
  background: var(--success);
}

.profile-calendar-day.today {
  box-shadow: inset 0 0 0 1.5px var(--accent-2);
}

.profile-calendar-day.future {
  background: var(--line);
}

.profile-graph {
  width: 100%;
  height: 130px;
  display: block;
}

.profile-graph-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.profile-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}

.profile-graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.profile-graph-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.profile-graph-legend b {
  color: var(--text);
  font-weight: 600;
}

.profile-graph-empty {
  color: var(--muted);
  font-size: 0.85rem;
}

.profile-handle-edit {
  display: grid;
  gap: 8px;
}

.profile-handle-edit > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-handle-edit div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 13px;
  background: var(--surface);
}

.profile-handle-edit b {
  color: var(--muted);
  font-weight: 600;
}

.profile-handle-edit input {
  min-width: 0;
  border: 0;
  padding: 12px 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(1.25rem, 6vw, 1.9rem);
  font-weight: 600;
  line-height: 1;
  outline: none;
}

.profile-edit-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.profile-edit-actions button {
  min-height: 32px;
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 0.78rem;
}

.profile-edit-actions button[type="submit"] {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}

.profile-edit-panel {
  display: grid;
  gap: 17px;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface-2);
}

.profile-edit-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.profile-edit-heading h2 {
  margin: 2px 0 0;
  font-size: 1.3rem;
  line-height: 1;
}

.profile-edit-heading .secondary-button {
  min-height: 34px;
  border-radius: var(--radius);
  padding: 0 12px;
}

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

.profile-edit-field > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-edit-field div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--surface);
}

.profile-edit-field b {
  color: var(--muted);
}

.profile-edit-field input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  outline: none;
}

.profile-edit-field div input {
  border: 0;
  padding-right: 0;
  padding-left: 0;
  background: transparent;
}

.profile-edit-panel > button[type="submit"] {
  border-radius: var(--radius);
}

.profile-onboarding {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px);
}

.profile-onboarding-card {
  display: grid;
  gap: 20px;
  width: min(380px, 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 27px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.profile-onboarding-card h2 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 0.95;
}

.profile-onboarding-card > button[type="submit"] {
  min-height: 52px;
  border-radius: var(--radius);
}

.profile-brain-score-card,
.profile-board,
.profile-exercise-section,
.profile-detail-section {
  display: grid;
  gap: 20px;
  margin-bottom: 22px;
}

.profile-board-header,
.profile-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 17px;
}

.profile-board-header h2,
.profile-section-heading h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1;
}

.profile-section-heading > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.profile-timeframe-control {
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: var(--surface-2);
}

.profile-timeframe-control button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  padding: 0 11px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.8rem;
}

.profile-timeframe-control button.active {
  background: var(--accent);
  color: var(--on-accent);
}

.profile-brain-score-card {
  display: grid;
  justify-items: center;
  gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  background: var(--surface-2);
  overflow: hidden;
}

.profile-brain-context {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.profile-brain-score-card > strong {
  margin-top: -58px;
  color: var(--text);
  font-size: clamp(4.7rem, 19vw, 6.2rem);
  line-height: 0.8;
  letter-spacing: 0;
}

.profile-brain-gauge {
  width: min(244px, 100%);
  height: 112px;
  margin-top: 0;
}

.profile-brain-gauge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.profile-brain-gauge path {
  fill: none;
  stroke-width: 20;
  stroke-linecap: round;
}

.brain-gauge-track {
  stroke: var(--line);
}

.brain-gauge-progress {
  stroke: url("#brain-score-gradient");
}

.profile-exercise-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-exercise-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  border-color: var(--line-soft);
  border-radius: 8px;
  padding: 15px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.profile-exercise-card:hover,
.profile-exercise-card.active {
  border-color: var(--text);
  background: var(--surface-2);
}

.profile-exercise-card span,
.profile-detail-summary span,
.profile-weight-breakdown > div > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-exercise-card strong {
  font-size: 1.65rem;
  line-height: 1;
}

.profile-exercise-card small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.profile-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-detail-summary article,
.profile-weight-breakdown,
.profile-trend-empty {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 20px;
  background: var(--surface-2);
}

.profile-detail-summary strong {
  display: block;
  margin-top: 9px;
  font-size: 1.4rem;
  line-height: 1;
}

.profile-detail-summary p,
.profile-weight-breakdown p,
.profile-trend-empty {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.profile-trend-legend {
  display: flex;
  gap: 17px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.profile-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-trend-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.profile-legend-accuracy { background: var(--text); }
.profile-legend-weight { background: var(--muted); border-radius: var(--radius) !important; }

.profile-trend-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 178px;
  border-bottom: 1px solid var(--line);
  padding: 12px 6px 0;
  background: repeating-linear-gradient(to top, transparent 0 42px, var(--fill-subtle) 42px 43px);
}

.profile-trend-point {
  position: relative;
  display: grid;
  align-items: end;
  height: 154px;
}

.profile-accuracy-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--text);
}

.profile-weight-marker {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--muted);
  transform: translate(-50%, 50%);
}

.profile-weight-breakdown {
  display: grid;
  gap: 15px;
}

.profile-weight-breakdown > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 17px;
}

.profile-weight-breakdown > div:first-child strong {
  font-size: 1.55rem;
}

.profile-factor-list {
  display: grid;
  gap: 9px;
}

.profile-factor-list > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.75fr) minmax(0, 2fr) 28px;
  align-items: center;
  gap: 10px;
}

.profile-factor-list span,
.profile-factor-list strong {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.profile-factor-list strong { text-align: right; }

.profile-factor-list i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.profile-factor-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
}

@media (max-width: 820px) {
  .profile-identity-card {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }

  .profile-identity-main {
    width: 100%;
  }

  .profile-edit-button {
    top: 12px;
    right: 12px;
  }

  .profile-board,
  .profile-exercise-section,
  .profile-detail-section {
    gap: 17px;
    margin-bottom: 28px;
  }

  .profile-board-header,
  .profile-section-heading {
    align-items: start;
    flex-direction: column;
  }

  .profile-timeframe-control {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-timeframe-control button {
    min-height: 42px;
    padding: 0 6px;
    font-size: 0.72rem;
  }

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

  .profile-exercise-card {
    min-height: 116px;
  }

  .profile-detail-summary {
    grid-template-columns: 1fr;
  }
}

/* Exercise controls should remain above visual stages and avoid the phone's lower edge. */
.game-active .audio-cue {
  display: none !important;
}

.nback-game-active .stage-card {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 15px;
  align-content: start;
}

.nback-game-active .response-grid {
  align-self: start;
  margin-top: 0;
}

.cct-game-active .cct-keypad {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.cct-game-active .cct-keypad button:not(:disabled) {
  pointer-events: auto;
  touch-action: manipulation;
}

/* Keep the routine builder inside the iPhone viewport. */
@media (max-width: 820px) {
  .routine-dialog {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 28px));
    margin: auto;
    overflow: hidden;
  }

  .routine-dialog form {
    width: 100%;
    max-width: 100%;
    gap: 22px;
    overflow-x: hidden;
    padding: 22px clamp(16px, 5vw, 24px);
  }

  .routine-dialog-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }

  .routine-dialog-header h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.02;
  }

  .dialog-close-button {
    justify-self: start;
    max-width: 100%;
  }

  .routine-builder-grid,
  .routine-add-row,
  .routine-dialog-actions,
  .routine-block-grid,
  .routine-settings-grid,
  .routine-setting-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-add-row button,
  .routine-dialog-actions button {
    width: 100%;
    min-width: 0;
  }

  .routine-block {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .routine-block-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    align-items: start;
  }

  .routine-block-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    width: 100%;
    gap: 8px;
  }

  .routine-icon-button {
    width: 100%;
    height: 44px;
  }

  .routine-dialog-actions {
    gap: 10px;
    justify-items: stretch;
  }
}

/* Final N-back phone layout: keep answer buttons visible with the board. */
.nback-game-active .stage-card {
  height: 100dvh !important;
  min-height: 100dvh !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;
}

.nback-game-active .nback-stage {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: clamp(38px, 9svh, 82px) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.nback-game-active .grid-board {
  width: min(304px, calc(100vw - 56px), 36svh) !important;
}

.nback-game-active .response-grid {
  align-self: start !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  /* Cap the button size so two rows of circles + the grid board fit the
     screen without overlapping. */
  width: min(260px, calc(100vw - 150px)) !important;
  margin: 6px auto 0 !important;
  gap: 16px 20px !important;
}

.nback-game-active .response-grid button {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  border: 2px solid var(--line) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  font-size: clamp(1.05rem, 4.4vw, 1.28rem) !important;
  font-weight: 600;
}

.nback-game-active .response-grid button:not(:disabled):active {
  border-color: var(--line-strong) !important;
  background: var(--surface-2) !important;
}

.nback-game-active .shape-circle,
.nback-game-active .shape-ring {
  border-radius: 50% !important;
}

/* Final active exercise surface: no grey shell, no debug panels, mobile-first controls. */
.game-active,
.game-active .app-content,
.game-active .workbench,
.game-active .stage-card,
.game-active .mot-stage-card,
.game-active .rrt-stage-card,
.game-active .cct-stage-card,
.game-active .ufov-stage-card,
.game-active .ict-stage-card {
  background: var(--bg) !important;
  box-shadow: none !important;
}

.game-active .stage-card,
.game-active .mot-stage-card,
.game-active .rrt-stage-card,
.game-active .cct-stage-card,
.game-active .ufov-stage-card,
.game-active .ict-stage-card {
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
}

.game-active .live-stats,
.game-active .feedback-line,
.game-active pre,
.game-active kbd {
  display: none !important;
}

.ict-game-active .ict-stage-card {
  height: 100dvh !important;
  min-height: 100dvh !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 16px !important;
  overflow: hidden !important;
  padding: var(--game-safe-top) var(--game-safe-side) var(--game-safe-bottom) !important;
}

.ict-game-active .session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  color: var(--text);
  font-size: clamp(1rem, 4.6vw, 1.28rem);
  font-weight: 600;
}

.ict-game-active .ict-stage {
  align-self: center;
  width: 100%;
  min-height: 0 !important;
  height: min(46svh, 420px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
}

.ict-game-active .ict-cue {
  font-size: clamp(4.8rem, 25vw, 8rem) !important;
}

.ict-game-active .ict-cue.food-cue {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.ict-game-active .ict-response-grid {
  align-self: start;
  justify-self: center;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(336px, calc(100vw - 48px)) !important;
  gap: 18px !important;
  margin: 0 auto !important;
}

.ict-game-active .ict-response-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 50% !important;
  padding: 0 !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  color: var(--text);
  font-size: clamp(1.05rem, 4.4vw, 1.28rem) !important;
  font-weight: 600;
  box-shadow: none;
  touch-action: manipulation;
}

.ict-game-active .ict-response-grid button:not(:disabled):active {
  border-color: var(--line-strong);
  background: var(--surface-2) !important;
}

.ict-game-active .ict-response-grid button:disabled {
  opacity: 0.42;
}

.ict-game-active .ict-response-grid button[aria-disabled="true"] {
  opacity: 1;
}

.cct-game-active .cct-stage-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

.cct-game-active .cct-result-strip {
  align-self: center;
  width: min(520px, calc(100vw - 56px));
}

.app-content {
  background: var(--bg);
}

/* Routine loading lives in its own sheet, not on the Exercises hub. */
.routine-load-dialog {
  width: min(520px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.routine-load-dialog::backdrop {
  background: var(--line-strong);
}

.routine-load-dialog form {
  display: grid;
  gap: 22px;
  padding: 27px;
}

.routine-load-dialog .routine-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}

.routine-load-dialog .routine-list:empty {
  display: none;
}

.routine-load-dialog .routine-empty {
  display: block;
}

.routine-load-dialog .routine-empty[hidden] {
  display: none;
}

.exercises-open h1 {
  font-size: clamp(1.6rem, 3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
}

@media (max-width: 820px) {
  .exercises-open h1 {
    font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  }

  .routine-load-dialog .routine-empty,
  .routine-load-dialog .routine-list:not(:empty) {
    display: grid;
  }

  .routine-load-dialog .routine-empty[hidden],
  .routine-load-dialog .routine-list:empty {
    display: none;
  }

  .routine-load-dialog .routine-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-load-dialog .routine-card-actions {
    width: 100%;
  }
}

@media (max-width: 820px) {
  :root {
    --mobile-nav-height: 84px;
  }

  .app-sidebar {
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(340px, calc(100vw - 28px));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      var(--surface);
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
  }

  .side-nav {
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
  }

  .side-nav-button {
    position: relative;
    z-index: 1;
    min-height: 52px;
    gap: 3px;
    border-radius: var(--radius);
    padding: 6px 3px 5px;
    color: var(--line-strong);
    font-size: 0.58rem;
    line-height: 1.05;
  }

  .side-nav-button:hover,
  .side-nav-button.active {
    background: transparent;
    color: var(--text);
    box-shadow: none;
  }

  .nav-icon,
  .nav-icon svg {
    width: 21px;
    height: 21px;
  }

  .home-page {
    gap: 15px;
  }

  .home-streak-card {
    border-radius: var(--radius);
    padding: 22px 18px;
  }

  .home-streak-days {
    gap: 8px;
  }
}

/* Match Profile/Data switch to the routine action buttons. */
.profile-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(360px, 100%);
  margin: 0 auto 18px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.profile-view-switch button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.profile-view-switch button.active {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

@media (max-width: 820px) {
  .profile-view-switch {
    gap: 17px;
  }

  .profile-view-switch button {
    min-height: 54px;
    border: 0;
    border-radius: var(--radius);
    padding: 0 14px;
    font-size: clamp(0.94rem, 3.8vw, 1.08rem);
    line-height: 1;
  }
}

/* Premium visual polish: keep Cogni dark, but make controls feel less default-web. */
:root {
  --bg: var(--surface);
  --surface: var(--surface);
  --surface-soft: var(--surface-2);
  --surface-raised: var(--surface-2);
  --line: var(--line);
  --line-soft: var(--line);
  --muted: var(--muted);
  --dim: var(--muted);
  --active: var(--line);
  --control-bg: var(--fill-subtle);
  --control-bg-hover: var(--line);
  --accent-blue: var(--accent);
  --accent-cyan: var(--accent);
  --accent-warm: var(--error);
}

body {
  background:
    var(--bg);
}

.app-content {
  background:
    radial-gradient(circle at 78% 0%, rgba(0, 0, 0, 0.08), transparent 34%),
    var(--surface);
}

:where(button):not(.side-nav-button):not(.response-grid button):not(.rrt-answer-grid button):not(.cct-keypad button):not(.ict-response-grid button):not(.ufov-sector-grid button) {
  border-color: transparent;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

:where(button):not(.side-nav-button):not(.response-grid button):not(.rrt-answer-grid button):not(.cct-keypad button):not(.ict-response-grid button):not(.ufov-sector-grid button):hover {
  border-color: transparent;
  background: var(--surface-2);
}

.routine-actions button:first-child,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session,
.assessment-list-actions button:first-child,
.profile-edit-actions button[type="submit"],
.friends-leaderboard-button,
.friends-add-card button,
.social-add-friend-row button {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.secondary-button,
.back-button,
.dialog-close-button,
.profile-edit-button,
.profile-photo-actions button,
.profile-edit-actions button:not([type="submit"]),
.routine-icon-button {
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
}

.home-streak-card,
.home-friends-card,
.friends-hero-card,
.friends-add-card,
.friends-panel,
.rank-hero-card,
.rank-progress-card,
.leaderboard-list-card,
.xp-events-card,
.profile-rank-progress-card,
.profile-identity-card,
.profile-edit-panel,
.profile-exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.routine-empty,
.routine-list,
.exercise-card,
.controls,
.stage-card,
.mot-stage-card,
.rrt-stage-card,
.cct-stage-card,
.ufov-stage-card,
.ict-stage-card,
.friend-list-item,
.assessment-history-item,
.assessment-result-grid div {
  border-color: var(--line);
  background:
    var(--surface-2);
  box-shadow: var(--shadow);
}

.home-friends-card,
.friends-hero-card,
.profile-identity-card {
  background:
    var(--surface-2);
}

.preset-button,
.interval-presets button,
.leaderboard-timeframe-switch button,
.profile-view-switch button,
.profile-timeframe-control button,
.compact-segmented button,
.segmented-control button,
.adhd-rating-button,
.custom-duration,
.nback-custom-duration {
  border-color: var(--line);
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
}

.preset-button.active,
.interval-presets button.active,
.leaderboard-timeframe-switch button.active,
.profile-view-switch button.active,
.profile-timeframe-control button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected {
  border-color: var(--line-strong);
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
}

.custom-duration:focus-within,
.nback-custom-duration:focus-within,
.friend-handle-field div:focus-within,
.profile-handle-edit div:focus-within {
  border-color: var(--line-strong);
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
}

.profile-avatar-edit > span:not(.profile-avatar-initial) {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}

#adhd-progress-bar,
.rank-progress-track i {
  background: var(--text);
}

.assessment-scale span {
  background: var(--fill-subtle);
}

@media (max-width: 820px) {
  .app-content {
    background:
      var(--surface);
  }

  .home-streak-card,
  .home-friends-card,
  .friends-hero-card,
  .friends-add-card,
  .friends-panel,
  .assessment-intro,
  .assessment-detail,
  .assessment-run,
  .assessment-result,
  .profile-identity-card {
    border-radius: var(--radius);
  }
}

/* Keep Profile/Data and Review timeframe controls aligned with routine actions. */
.profile-view-switch,
.profile-timeframe-control {
  display: grid;
  gap: 8px;
  width: min(360px, 100%);
  margin: 0 auto 18px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

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

.profile-timeframe-control {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(480px, 100%);
  margin: 0;
}

.profile-view-switch button,
.profile-timeframe-control button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background:
    var(--fill-subtle);
  color: var(--text);
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 160ms ease;
}

.profile-view-switch button.active,
.profile-timeframe-control button.active {
  border-color: var(--line-strong);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.profile-view-switch button:active,
.profile-timeframe-control button:active {
  transform: translateY(1px);
}

@media (max-width: 820px) {
  .profile-view-switch,
  .profile-timeframe-control {
    gap: 17px;
  }

  .profile-view-switch button,
  .profile-timeframe-control button {
    min-height: 54px;
    border: 0;
    border-radius: var(--radius);
    padding: 0 14px;
    font-size: clamp(0.94rem, 3.8vw, 1.08rem);
    line-height: 1;
  }
}

/* Profile Data refresh: calmer analytics surfaces, less old dashboard chrome. */
.profile-open .profile-page[data-selected-profile-view="data"] {
  display: grid;
  gap: 20px;
}

.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section {
  gap: 20px;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background:
    var(--surface-2);
  box-shadow: none;
}

.profile-page[data-selected-profile-view="data"] .profile-board-header,
.profile-page[data-selected-profile-view="data"] .profile-section-heading {
  align-items: center;
}

.profile-page[data-selected-profile-view="data"] .profile-board-header h2,
.profile-page[data-selected-profile-view="data"] .profile-section-heading h2 {
  font-size: clamp(1.16rem, 4.6vw, 1.42rem);
  letter-spacing: 0;
}

.profile-page[data-selected-profile-view="data"] .profile-section-heading > span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  background: var(--fill-subtle);
  color: var(--text);
  line-height: 1;
}

.profile-page[data-selected-profile-view="data"] .profile-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  background:
    var(--surface);
  box-shadow: none;
}

.profile-page[data-selected-profile-view="data"] .profile-overview span,
.profile-page[data-selected-profile-view="data"] .profile-exercise-card span,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary span,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown > div > span {
  color: var(--line-strong);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.profile-page[data-selected-profile-view="data"] .profile-overview strong {
  font-size: clamp(1.45rem, 5vw, 1.9rem);
}

.profile-page[data-selected-profile-view="data"] .profile-overview p,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary p,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown p,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty {
  color: var(--line-strong);
  font-size: 0.78rem;
}

.profile-page[data-selected-profile-view="data"] .profile-exercise-list {
  gap: 10px;
}

.profile-page[data-selected-profile-view="data"] .profile-exercise-card {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background:
    var(--surface);
  box-shadow: none;
}

.profile-page[data-selected-profile-view="data"] .profile-exercise-card:hover,
.profile-page[data-selected-profile-view="data"] .profile-exercise-card.active {
  border-color: var(--line-strong);
  background:
    var(--surface);
}

.profile-page[data-selected-profile-view="data"] .profile-exercise-card strong,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary strong,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown > div:first-child strong {
  color: var(--text);
  font-size: clamp(1.28rem, 4.7vw, 1.62rem);
}

.profile-page[data-selected-profile-view="data"] .profile-exercise-card small {
  color: var(--line-strong);
}

.profile-page[data-selected-profile-view="data"] .profile-detail-summary {
  gap: 10px;
}

.profile-page[data-selected-profile-view="data"] .profile-trend-empty {
  display: grid;
  place-items: center;
  min-height: 116px;
  text-align: center;
}

.profile-page[data-selected-profile-view="data"] .profile-trend-legend {
  color: var(--line-strong);
}

.profile-page[data-selected-profile-view="data"] .profile-legend-accuracy {
  background: var(--text);
}

.profile-page[data-selected-profile-view="data"] .profile-legend-weight {
  background: var(--line-strong);
}

.profile-page[data-selected-profile-view="data"] .profile-trend-chart {
  min-height: 168px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px 0;
  background:
    repeating-linear-gradient(to top, transparent 0 40px, var(--fill-subtle) 40px 41px),
    var(--surface);
  overflow: hidden;
}

.profile-page[data-selected-profile-view="data"] .profile-accuracy-bar {
  background: var(--text);
  box-shadow: none;
}

.profile-page[data-selected-profile-view="data"] .profile-weight-marker {
  border-color: var(--on-accent);
  background: var(--accent);
}

.profile-page[data-selected-profile-view="data"] .profile-factor-list i {
  background: var(--line);
}

.profile-page[data-selected-profile-view="data"] .profile-factor-list b {
  background: var(--text);
}

@media (max-width: 820px) {
  .profile-page[data-selected-profile-view="data"] {
    gap: 15px;
  }

  .profile-page[data-selected-profile-view="data"] .profile-board,
  .profile-page[data-selected-profile-view="data"] .profile-exercise-section,
  .profile-page[data-selected-profile-view="data"] .profile-detail-section {
    border-radius: var(--radius);
    padding: 15px;
  }

  .profile-page[data-selected-profile-view="data"] .profile-board-header,
  .profile-page[data-selected-profile-view="data"] .profile-section-heading {
    align-items: stretch;
    gap: 15px;
  }

  .profile-page[data-selected-profile-view="data"] .profile-overview,
  .profile-page[data-selected-profile-view="data"] .profile-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-page[data-selected-profile-view="data"] .profile-timeframe-control {
    gap: 8px;
  }

  .profile-page[data-selected-profile-view="data"] .profile-timeframe-control button {
    min-height: 48px;
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  }
}

/* Friendly character pass: keep Cogni dark, but make controls feel less sterile. */
:root {
  --accent-blue: var(--accent);
  --accent-cyan: var(--accent);
  --accent-purple: var(--accent);
  --accent-pink: var(--error);
  --playful-shadow: rgba(0, 0, 0, 0.2);
}

:where(button):not(.side-nav-button):not(.response-grid button):not(.rrt-answer-grid button):not(.cct-keypad button):not(.ict-response-grid button):not(.ufov-sector-grid button) {
  border-width: 1px;
  border-color: transparent;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

:where(button):not(.side-nav-button):not(.response-grid button):not(.rrt-answer-grid button):not(.cct-keypad button):not(.ict-response-grid button):not(.ufov-sector-grid button):active {
  transform: translateY(1px);
  box-shadow: none;
}

.routine-actions button:first-child,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session,
.assessment-list-actions button:first-child,
.profile-edit-actions button[type="submit"],
.friends-leaderboard-button,
.friends-add-card button,
.social-add-friend-row button,
.friends-invite-button {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.secondary-button,
.back-button,
.dialog-close-button,
.profile-photo-actions button,
.profile-edit-actions button:not([type="submit"]),
.routine-icon-button {
  border-color: var(--line);
  background:
    var(--surface-2);
  box-shadow: none;
}

.preset-button.active,
.interval-presets button.active,
.leaderboard-timeframe-switch button.active,
.profile-view-switch button.active,
.profile-timeframe-control button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected {
  border-color: var(--line-strong);
  background: var(--line-strong);
  color: var(--text);
  box-shadow: none;
}

.home-streak-card,
.home-friends-card,
.friends-hero-card,
.friends-add-card,
.friends-panel,
.rank-hero-card,
.rank-progress-card,
.leaderboard-list-card,
.xp-events-card,
.profile-rank-progress-card,
.profile-identity-card,
.profile-edit-panel,
.profile-exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.routine-empty,
.routine-list,
.exercise-card,
.controls,
.friend-list-item,
.assessment-history-item,
.assessment-result-grid div {
  border-width: 2px;
  border-color: var(--line);
  border-radius: var(--radius);
  background:
    var(--surface);
  box-shadow: var(--shadow);
}

.home-streak-card {
  background:
    var(--surface);
}

.home-streak-days span {
  border-width: 2px;
  background:
    var(--surface);
}

.home-streak-days .complete span {
  border-color: var(--line-strong);
  background:
    var(--surface);
}

.home-social-icons i {
  border-width: 2px;
  border-color: var(--fill-subtle);
  border-radius: var(--radius) 10px 7px 7px;
  background:
    var(--surface);
}

.page-streak-pill,
.page-notification-button {
  border-width: 2px;
  border-color: var(--line);
  background:
    var(--surface-2);
  box-shadow: none;
}

@media (max-width: 820px) {
  .side-nav {
    border-color: var(--line);
    background:
      var(--surface);
    box-shadow: var(--shadow);
  }

  .side-nav::before {
    background:
      var(--fill-subtle);
  }

  .side-nav-button.active .nav-icon {
    color: var(--accent);
  }
}

/* Make selected Profile/Data and Review filters unmistakable. */
.profile-view-switch button,
.profile-timeframe-control button {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
  background:
    var(--surface);
  color: var(--line-strong);
}

.profile-view-switch button.active,
.profile-timeframe-control button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.profile-view-switch button.active::after,
.profile-timeframe-control button.active::after,
.profile-view-switch button[aria-pressed="true"]::after,
.profile-timeframe-control button[aria-pressed="true"]::after {
  content: none;
}

@media (max-width: 820px) {
  .profile-view-switch button.active::after,
  .profile-timeframe-control button.active::after,
  .profile-view-switch button[aria-pressed="true"]::after,
  .profile-timeframe-control button[aria-pressed="true"]::after {
    bottom: 9px;
  }
}

/* Tone-down pass: keep the friendly feel, remove noisy gradients, sharpen cue shapes. */
:where(button):not(.side-nav-button):not(.response-grid button):not(.rrt-answer-grid button):not(.cct-keypad button):not(.ict-response-grid button):not(.ufov-sector-grid button) {
  background: var(--surface-2);
  border-color: transparent;
  box-shadow: none;
}

.routine-actions button:first-child,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session,
.assessment-list-actions button:first-child,
.profile-edit-actions button[type="submit"],
.friends-leaderboard-button,
.friends-add-card button,
.social-add-friend-row button,
.friends-invite-button,
.preset-button.active,
.interval-presets button.active,
.leaderboard-timeframe-switch button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected,
.profile-view-switch button.active,
.profile-timeframe-control button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.home-streak-card,
.home-friends-card,
.friends-hero-card,
.friends-add-card,
.friends-panel,
.rank-hero-card,
.rank-progress-card,
.leaderboard-list-card,
.xp-events-card,
.profile-rank-progress-card,
.profile-identity-card,
.profile-edit-panel,
.profile-exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.routine-empty,
.routine-list,
.exercise-card,
.controls,
.friend-list-item,
.assessment-history-item,
.assessment-result-grid div,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-streak-card,
.home-friends-card,
.profile-identity-card {
  background: var(--surface);
}

.page-streak-pill,
.page-notification-button,
.home-streak-days span,
.home-social-icons i {
  background: var(--surface-2);
}

.home-streak-days .complete span {
  background: var(--surface);
}

@media (max-width: 820px) {
  .side-nav,
  .side-nav::before {
    background: var(--surface);
  }
}

.shape,
.shape-square,
.shape-cross,
.shape-plus,
.shape-bar,
.shape-tee,
.shape-ell,
.shape-zig,
.shape-corner,
.shape-block {
  border-radius: 0 !important;
  overflow: visible;
}

.shape-circle,
.shape-ring {
  border-radius: 50% !important;
}

.shape-triangle,
.shape-diamond {
  border-radius: 0 !important;
}

/* IQ-test MVP focus: social surfaces paused, flatter controls, consistent selected states. */
.friends-page,
.social-leaderboard-dialog,
#friend-dialog {
  display: none !important;
}

.page-notification-button[hidden] {
  display: none !important;
}

.profile-view-switch button,
.profile-timeframe-control button,
.leaderboard-timeframe-switch button,
.compact-segmented button,
.segmented-control button,
.routine-actions button,
.preset-button,
.interval-presets button,
.assessment-list-actions button,
.primary-panel button,
.friends-leaderboard-button,
.friends-add-card button,
.friends-invite-button,
.social-add-friend-row button {
  background-image: none !important;
  background-color: var(--surface-2) !important;
  border-color: transparent !important;
  box-shadow: none;
  color: var(--text) !important;
}

.routine-actions button:first-child,
.assessment-list-actions button:first-child,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session,
.preset-button.active,
.interval-presets button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected,
.profile-view-switch button.active,
.profile-timeframe-control button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button[aria-pressed="true"],
.auth-submit {
  background-image: none !important;
  background-color: var(--accent) !important;
  border: none !important;
  color: #FFFFFF !important;
  /* The whole 3D effect: one 2px lit band along the top edge. No gradient,
     no drop shadow — measured off the reference, which is flat otherwise. */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

.profile-view-switch button.active::after,
.profile-timeframe-control button.active::after,
.profile-view-switch button[aria-pressed="true"]::after,
.profile-timeframe-control button[aria-pressed="true"]::after {
  content: none !important;
}

.home-streak-card,
.friends-hero-card,
.friends-add-card,
.friends-panel,
.rank-hero-card,
.rank-progress-card,
.leaderboard-list-card,
.xp-events-card,
.profile-rank-progress-card,
.profile-identity-card,
.profile-edit-panel,
.profile-exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.routine-empty,
.routine-list,
.exercise-card,
.controls,
.assessment-history-item,
.assessment-result-grid div,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty {
  background-image: none !important;
  background-color: var(--surface) !important;
  box-shadow: var(--shadow);
}

@media (max-width: 820px) {
  .side-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    background-image: none !important;
    background-color: var(--surface) !important;
  }
}

/* Default Liquid Glass style for the mobile menu hub. */
@media (max-width: 820px) {
  :root {
    --mobile-nav-height: 72px;
  }

  .app-sidebar {
    right: max(22px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(22px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      var(--surface) !important;
    box-shadow: var(--shadow);
    transform: none;
    backdrop-filter: blur(28px) saturate(1.75);
    -webkit-backdrop-filter: blur(28px) saturate(1.75);
  }

  .app-sidebar::before {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle at 82% 100%, var(--fill-subtle), transparent 36%);
    opacity: 0.9;
  }

  .side-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px;
    overflow: hidden;
    padding: 5px;
    border-radius: inherit;
    background: transparent !important;
  }

  .side-nav::before {
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 25px) / 4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      var(--line) !important;
    box-shadow: var(--shadow);
    transform: translateX(calc(var(--active-nav-shift, 0%) + var(--active-nav-gap-shift, 0px)));
    transition:
      transform 340ms cubic-bezier(0.2, 0.9, 0.2, 1),
      width 340ms cubic-bezier(0.2, 0.9, 0.2, 1);
  }

  .side-nav-button {
    min-height: 50px;
    padding: 5px 2px 4px;
    border-radius: var(--radius);
    color: var(--line-strong);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .side-nav-button.active {
    color: var(--text);
  }

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

  .side-nav-button.active .nav-icon {
    color: var(--text);
  }
}

/* Apple dark theme overrides */
h1,
.hero h1,
.section-heading h2,
.exercise-card h2,
.assessment-page h2,
.assessment-intro h2,
.profile-page h2,
.home-page h2,
dialog h2 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.exercise-type,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

/* Clear segmented picker — transparent labels, one glass indicator */
.preset-button,
.interval-presets button,
.profile-view-switch button,
.profile-timeframe-control button,
.leaderboard-timeframe-switch button {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: #98989d !important;
  font-weight: 500;
  transition: color 180ms ease;
}

.preset-button.active,
.interval-presets button.active,
.profile-view-switch button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button.active,
.profile-timeframe-control button[aria-pressed="true"],
.leaderboard-timeframe-switch button.active {
  background: var(--line) !important;
  border-color: transparent !important;
  color: var(--text) !important;
}

.adhd-rating-button.selected {
  background: var(--line) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.seg-sliding {
  position: relative;
}

.seg-sliding::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--seg-w, 0px);
  height: var(--seg-h, 0px);
  transform: translate(var(--seg-x, 0px), var(--seg-y, 0px));
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transition: var(--seg-anim,
    transform 340ms cubic-bezier(0.32, 1.25, 0.4, 1),
    width 340ms cubic-bezier(0.32, 1.25, 0.4, 1),
    height 340ms cubic-bezier(0.32, 1.25, 0.4, 1));
}

.seg-sliding > * {
  position: relative;
  z-index: 1;
}

.seg-sliding > button.active,
.seg-sliding > button[aria-pressed="true"] {
  background: transparent !important;
}

/* Apple workspace polish inspired by the dark reference UI. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  --bg: var(--bg);
  --sidebar: var(--bg);
  --surface: var(--bg);
  --surface-soft: #18181a;
  --surface-raised: #202024;
  --line: var(--line);
  --line-soft: var(--line);
  --text: var(--text);
  --muted: #9a9aa0;
  --dim: #6f6f75;
  --active: var(--line);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  background:
    radial-gradient(circle at 18% 7%, var(--fill-subtle), transparent 26%),
    radial-gradient(circle at 84% 2%, var(--fill-subtle), transparent 22%),
    var(--bg) !important;
  color: var(--text);
}

.app-content {
  color: var(--text);
}

.hero,
.home-page,
.exercise-page,
.assessment-page,
.profile-page {
  isolation: isolate;
}

.hero h1,
.section-heading h2,
.exercise-card h2,
.assessment-intro h2,
.profile-page h2,
.home-page h2,
dialog h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.028em;
}

.lede,
.exercise-card p,
.assessment-history-copy,
.profile-exercise-card small,
.profile-weight-breakdown p {
  color: rgba(245, 245, 247, 0.62) !important;
}

.home-streak-card,
.exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty,
.controls,
.routine-empty,
.routine-list {
  border: 1px solid var(--line) !important;
  background:
    var(--fill-subtle),
    var(--bg) !important;
  box-shadow:
    inset 0 1px 0 var(--fill-subtle),
    0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

.exercise-card,
.assessment-intro,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board {
  border-radius: var(--radius) !important;
}

.routine-actions button:first-child,
.assessment-list-actions button:first-child,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session,
.auth-submit {
  background: var(--accent) !important;
  border: none !important;
  color: #FFFFFF !important;
  /* Single 2px lit band along the top edge — the whole 3D read. The old
     rule put a grey --line-strong line here, which showed as an artefact
     across the top of the (then white) button. */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

.routine-actions button:not(:first-child),
.assessment-list-actions button:not(:first-child),
.secondary-button {
  background: var(--line) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.profile-view-switch,
.profile-timeframe-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background:
    linear-gradient(180deg, var(--line), var(--fill-subtle)),
    rgba(17, 17, 18, 0.56) !important;
  box-shadow:
    inset 0 1px 0 var(--line),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}

.profile-view-switch button,
.profile-timeframe-control button {
  min-height: 36px;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(245, 245, 247, 0.56) !important;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.profile-view-switch button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button.active,
.profile-timeframe-control button[aria-pressed="true"] {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.profile-view-switch button.active::after,
.profile-view-switch button[aria-pressed="true"]::after,
.profile-timeframe-control button.active::after,
.profile-timeframe-control button[aria-pressed="true"]::after {
  content: none !important;
}

.seg-sliding::after {
  top: 0;
  left: 0;
  border: 1px solid var(--line);
  background:
    var(--line),
    var(--line) !important;
  box-shadow:
    inset 0 1px 0 var(--line),
    0 8px 18px rgba(0, 0, 0, 0.18);
  transition:
    transform 420ms cubic-bezier(0.18, 1.18, 0.24, 1),
    width 420ms cubic-bezier(0.18, 1.18, 0.24, 1),
    height 420ms cubic-bezier(0.18, 1.18, 0.24, 1);
}

@media (max-width: 820px) {
  .hero {
    padding-top: max(42px, env(safe-area-inset-top));
  }

  .home-streak-card,
  .exercise-card,
  .assessment-intro,
  .profile-identity-card,
  .profile-rank-progress-card,
  .profile-page[data-selected-profile-view="data"] .profile-board {
    border-radius: var(--radius) !important;
  }

  .profile-view-switch {
    margin-inline: auto;
  }

  .profile-timeframe-control {
    width: 100%;
    justify-content: space-between;
  }

  .profile-timeframe-control button {
    flex: 1 1 auto;
    padding-inline: 10px !important;
  }

  .app-sidebar {
    background:
      linear-gradient(180deg, var(--line), var(--fill-subtle)),
      rgba(18, 18, 20, 0.66) !important;
    border-color: var(--line) !important;
  }

  .side-nav::before {
    background:
      var(--line),
      var(--line) !important;
    box-shadow:
      inset 0 1px 0 var(--line),
      0 8px 18px rgba(0, 0, 0, 0.18);
  }
}

/* Professional product polish: quieter, cleaner, more intentional surfaces. */
:root {
  --bg: var(--bg);
  --surface: var(--bg);
  --surface-soft: #121316;
  --surface-raised: #1b1c20;
  --line: var(--line);
  --line-soft: var(--line);
  --text: var(--text);
  --muted: #9b9ca3;
  --dim: #73747b;
  --active: var(--line);
  --professional-card-shadow: 0 1px 0 var(--fill-subtle) inset, 0 16px 34px rgba(0, 0, 0, 0.2);
  --professional-flat-shadow: 0 1px 0 var(--fill-subtle) inset;
}

html,
body {
  background: var(--bg) !important;
}

body {
  background:
    radial-gradient(circle at 18% 0%, var(--fill-subtle), transparent 24%),
    var(--bg) !important;
}

.app-content {
  width: min(1040px, calc(100% - 36px));
}

.hero {
  margin-bottom: 22px;
}

.brand-logo,
.lede,
.sidebar-brand {
  opacity: 0.92;
}

.hero h1,
.page-title,
.section-heading h2,
.exercise-card h2,
.assessment-intro h2,
.profile-page h2,
.home-page h2,
dialog h2 {
  color: var(--text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.026em !important;
}

.exercise-type,
.eyebrow,
.profile-board-header .exercise-type,
.profile-section-heading .exercise-type {
  color: rgba(244, 244, 245, 0.42) !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
}

.lede,
.home-streak-card p,
.exercise-card p,
.assessment-history-copy,
.assessment-disclaimer,
.profile-exercise-card small,
.profile-detail-summary span,
.profile-weight-breakdown p,
.profile-rank-progress-card p {
  color: rgba(244, 244, 245, 0.56) !important;
}

.home-streak-card,
.exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty,
.routine-empty,
.routine-list,
.controls,
.routine-dialog form,
.routine-load-dialog form,
.assessment-result-grid div,
.assessment-history-item,
.session-summary-dialog form,
.quit-dialog,
.friend-dialog form {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
  background-image: none !important;
  box-shadow: var(--professional-card-shadow) !important;
}

.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.assessment-result-grid div {
  background: #141519 !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

.exercise-card,
.assessment-intro,
.profile-exercise-card,
.routine-card,
.assessment-history-item {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.exercise-card:hover,
.assessment-intro:hover,
.profile-exercise-card:hover,
.profile-exercise-card.active {
  border-color: var(--line) !important;
  background: #191a1e !important;
  transform: translateY(-1px);
}

.home-streak-card {
  padding: 22px !important;
}

.home-streak-top strong {
  font-weight: 600;
  letter-spacing: -0.045em;
}

.home-streak-days span {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.home-streak-days .complete span {
  border-color: rgba(86, 173, 255, 0.42) !important;
  background: rgba(86, 173, 255, 0.11) !important;
}

.home-bolt,
.home-streak-days i,
.page-streak-pill svg {
  opacity: 0.72;
}

.page-status {
  gap: 8px;
}

.page-streak-pill,
.page-notification-button {
  min-height: 34px;
  border: 1px solid var(--line) !important;
  background: rgba(22, 23, 26, 0.72) !important;
  box-shadow: var(--professional-flat-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

button,
.preset-button,
.interval-presets button,
.secondary-button,
.back-button,
.dialog-close-button,
.profile-edit-button,
.routine-icon-button,
.profile-photo-actions button,
.profile-edit-actions button:not([type="submit"]) {
  border: 1px solid var(--line) !important;
  background: #17181c !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

.routine-actions button:first-child,
.assessment-list-actions button:first-child,
.primary-panel button,
.profile-edit-actions button[type="submit"],
.profile-onboarding-card > button[type="submit"],
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session {
  border-color: var(--text) !important;
  background: var(--text) !important;
  color: #101114 !important;
  box-shadow: var(--shadow);
}

.preset-button.active,
.interval-presets button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected {
  border-color: var(--line) !important;
  background: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

input[type="number"],
input[type="text"],
select,
textarea,
.custom-duration,
.nback-custom-duration,
.profile-edit-field input,
.profile-handle-edit input,
.routine-block input,
.routine-name-field input {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--line-strong) !important;
}

.profile-view-switch,
.profile-timeframe-control,
.segmented-control,
.compact-segmented {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

.profile-view-switch button,
.profile-timeframe-control button,
.segmented-control button,
.compact-segmented button {
  border: 0 !important;
  background: transparent !important;
  color: rgba(244, 244, 245, 0.5) !important;
  box-shadow: none !important;
}

.profile-view-switch button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button.active,
.profile-timeframe-control button[aria-pressed="true"],
.segmented-control button.active,
.compact-segmented button.active {
  background: transparent !important;
  color: var(--text) !important;
}

.seg-sliding::after,
.segmented-control::before {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow:
    0 1px 0 var(--fill-subtle) inset,
    0 6px 14px rgba(0, 0, 0, 0.2) !important;
}

.profile-rank-track,
.level-progress-track,
.assessment-progress-track,
.profile-factor-list i,
.profile-trend-chart {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.profile-rank-track span,
.level-progress-track span,
.assessment-progress-track div,
.profile-factor-list b {
  background: var(--text) !important;
  box-shadow: none !important;
}

.profile-avatar,
.profile-avatar-edit,
.profile-identity-avatar,
.profile-onboarding-avatar {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

.live-stats,
.output {
  display: none !important;
}

@media (max-width: 820px) {
  .app-content {
    width: min(100%, calc(100vw - 34px));
  }

  .hero {
    padding-top: max(40px, env(safe-area-inset-top));
    margin-bottom: 18px;
  }

  .home-streak-card,
  .exercise-card,
  .assessment-intro,
  .assessment-detail,
  .assessment-run,
  .assessment-result,
  .assessment-history,
  .profile-identity-card,
  .profile-rank-progress-card,
  .profile-page[data-selected-profile-view="data"] .profile-board,
  .profile-page[data-selected-profile-view="data"] .profile-exercise-section,
  .profile-page[data-selected-profile-view="data"] .profile-detail-section {
    border-radius: var(--radius) !important;
  }

  .app-sidebar {
    right: max(24px, env(safe-area-inset-right));
    left: max(24px, env(safe-area-inset-left));
    bottom: max(15px, env(safe-area-inset-bottom));
    border-color: var(--line) !important;
    background: rgba(18, 19, 22, 0.78) !important;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.32),
      0 1px 0 var(--fill-subtle) inset !important;
  }

  .app-sidebar::before {
    background: none !important;
  }

  .side-nav {
    padding: 5px !important;
  }

  .side-nav::before {
    border-color: var(--line) !important;
    background: #27282d !important;
    box-shadow: var(--shadow);
  }

  .side-nav-button {
    color: rgba(244, 244, 245, 0.46) !important;
    font-weight: 560 !important;
  }

  .side-nav-button.active,
  .side-nav-button.active .nav-icon {
    color: var(--text) !important;
    filter: none !important;
  }
}

/* Mobile alignment fixes: centered profile switch, calmer safe-area spacing, no horizontal drift. */
@media (max-width: 820px) {
  html,
  body,
  .app-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    position: relative;
  }

  .app-shell {
    display: block;
    min-height: 100svh;
  }

  .app-content {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding:
      max(72px, calc(env(safe-area-inset-top) + 42px))
      max(20px, env(safe-area-inset-right))
      calc(var(--mobile-nav-height) + max(34px, env(safe-area-inset-bottom)))
      max(20px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  .hero {
    padding-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .page-status {
    top: -24px !important;
    right: 2px !important;
    z-index: 6;
  }

  .brand-lockup,
  .lede {
    transform: translateY(-8px);
  }

  .home-page,
  .assessment-page,
  .exercise-page,
  .profile-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .profile-open .profile-page {
    display: grid;
    justify-items: center;
  }

  .profile-view-switch {
    justify-self: center !important;
    margin: 0 auto 14px !important;
    transform: none !important;
  }

  .profile-simple-panel,
  .profile-board,
  .profile-exercise-section,
  .profile-detail-section {
    width: 100%;
    min-width: 0;
  }

  .profile-page[data-selected-profile-view="data"] .profile-view-switch {
    margin-inline: auto !important;
  }

  .assessment-intro,
  .home-streak-card,
  .exercise-card,
  .profile-identity-card,
  .profile-rank-progress-card,
  .profile-page[data-selected-profile-view="data"] .profile-board,
  .profile-page[data-selected-profile-view="data"] .profile-exercise-section,
  .profile-page[data-selected-profile-view="data"] .profile-detail-section {
    width: 100%;
    max-width: 100%;
  }
}

html.native-liquid-nav .app-sidebar {
  display: none !important;
}

html.native-liquid-nav .app-content {
  padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
}

/* Black-first visual pass: keep the app premium, but make black the dominant surface. */
:root {
  --bg: var(--bg);
  --sidebar: var(--bg);
  --surface: var(--surface);
  --surface-soft: var(--surface);
  --surface-raised: var(--surface);
  --line: var(--line);
  --line-soft: var(--fill-subtle);
  --text: var(--text);
  --muted: #96979d;
  --dim: #6f7077;
  --active: var(--line);
  --accent-blue: #5aa8ff;
  --professional-card-shadow: 0 1px 0 var(--fill-subtle) inset, 0 14px 34px rgba(0, 0, 0, 0.34);
  --professional-flat-shadow: 0 1px 0 var(--fill-subtle) inset;
}

html,
body,
.app-shell,
.app-content,
.home-page,
.exercise-page,
.assessment-page,
.profile-page {
  background: var(--bg) !important;
}

body {
  background: var(--bg) !important;
}

.hero::before,
.hero::after,
.app-shell::before,
.app-shell::after {
  background-image: none !important;
}

.home-streak-card,
.exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty,
.routine-empty,
.routine-list,
.routine-card,
.controls,
.routine-dialog form,
.routine-load-dialog form,
.assessment-result-grid div,
.assessment-history-item,
.session-summary-dialog form,
.quit-dialog,
.friend-dialog form,
.primary-panel,
.stats-summary article,
.advanced-settings,
.modality-field,
.time-preset-group,
.nback-preset-group,
.control-row {
  border-color: var(--line) !important;
  background: #08090b !important;
  background-image: none !important;
  box-shadow: var(--professional-card-shadow) !important;
}

.controls,
.game-active .stage,
.nback-workbench,
.rrt-workbench,
.cct-workbench,
.ict-workbench,
.mot-workbench,
.ufov-workbench {
  background: var(--bg) !important;
  background-image: none !important;
}

button,
.preset-button,
.interval-presets button,
.secondary-button,
.back-button,
.quit-button,
.dialog-close-button,
.profile-edit-button,
.routine-icon-button,
.profile-photo-actions button,
.profile-edit-actions button,
.routine-actions button,
.assessment-list-actions button,
.primary-panel button,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session {
  border-color: var(--line) !important;
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

button:hover,
.exercise-card:hover,
.assessment-intro:hover,
.profile-exercise-card:hover {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.routine-actions button:first-child,
.assessment-list-actions button:first-child,
.profile-edit-actions button[type="submit"],
.profile-onboarding-card > button[type="submit"],
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session {
  border-color: var(--text) !important;
  background: var(--text) !important;
  color: var(--bg) !important;
}

.preset-button.active,
.interval-presets button.active,
.compact-segmented button.active,
.segmented-control button.active,
.adhd-rating-button.selected {
  border-color: var(--line) !important;
  background: var(--line) !important;
  color: var(--text) !important;
}

.profile-view-switch,
.profile-timeframe-control,
.segmented-control,
.compact-segmented,
.page-streak-pill,
.page-notification-button {
  border-color: var(--line) !important;
  background: var(--glass) !important;
  background-image: none !important;
  box-shadow: var(--professional-flat-shadow) !important;
}

.seg-sliding::after,
.segmented-control::before,
.side-nav::before {
  border-color: var(--line) !important;
  background: var(--line) !important;
  box-shadow: none !important;
}

input[type="number"],
input[type="text"],
select,
textarea,
.custom-duration,
.nback-custom-duration,
.profile-edit-field input,
.profile-handle-edit input,
.routine-block input,
.routine-name-field input {
  border-color: var(--line) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.app-sidebar {
  background: var(--glass) !important;
  border-color: var(--line) !important;
}

@media (max-width: 820px) {
  .app-sidebar {
    background: var(--glass) !important;
    border-color: var(--line) !important;
  }
}

/* Apple-style capsule selections for the settings UI. */
.routine-actions,
.time-preset-row,
.nback-preset-row,
.rrt-preset-row,
.interval-presets,
.profile-view-switch,
.profile-timeframe-control,
.segmented-control,
.compact-segmented {
  display: flex;
  align-items: center;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: rgba(8, 9, 11, 0.92) !important;
  background-image: none !important;
  box-shadow:
    0 1px 0 var(--fill-subtle) inset,
    0 10px 26px rgba(0, 0, 0, 0.22) !important;
}

.routine-actions button,
.time-preset-row .preset-button,
.nback-preset-row .preset-button,
.rrt-preset-row .preset-button,
.interval-presets button,
.profile-view-switch button,
.profile-timeframe-control button,
.segmented-control button,
.compact-segmented button {
  min-height: 42px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.55) !important;
  box-shadow: none !important;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.routine-actions button {
  flex: 1 1 0;
  justify-content: center;
}

.routine-actions button:first-child,
.routine-actions button:not(:first-child) {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.72) !important;
  box-shadow: none !important;
}

.routine-actions button:hover,
.time-preset-row .preset-button:hover,
.nback-preset-row .preset-button:hover,
.rrt-preset-row .preset-button:hover,
.interval-presets button:hover {
  background: var(--line) !important;
  color: var(--text) !important;
  transform: none !important;
}

.time-preset-row .preset-button.active,
.nback-preset-row .preset-button.active,
.rrt-preset-row .preset-button.active,
.interval-presets button.active,
.profile-view-switch button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button.active,
.profile-timeframe-control button[aria-pressed="true"],
.segmented-control button.active,
.compact-segmented button.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow:
    0 1px 0 var(--line) inset,
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.time-preset-row.seg-sliding .preset-button.active,
.nback-preset-row.seg-sliding .preset-button.active,
.rrt-preset-row.seg-sliding .preset-button.active,
.interval-presets.seg-sliding button.active,
.profile-view-switch.seg-sliding button.active,
.profile-view-switch.seg-sliding button[aria-pressed="true"],
.profile-timeframe-control.seg-sliding button.active,
.profile-timeframe-control.seg-sliding button[aria-pressed="true"] {
  background: transparent !important;
  box-shadow: none !important;
}

.custom-duration,
.nback-custom-duration {
  min-height: 42px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.custom-duration:focus-within,
.nback-custom-duration:focus-within {
  background: var(--surface) !important;
  box-shadow: 0 0 0 1px var(--line-strong) inset !important;
}

.custom-duration input,
.nback-custom-duration input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.rrt-preset-row {
  flex-wrap: wrap;
  border-radius: var(--radius) !important;
}

.rrt-preset-row .preset-button {
  flex: 1 1 calc(50% - 4px);
}

@media (max-width: 820px) {
  .routine-actions,
  .time-preset-row,
  .nback-preset-row,
  .rrt-preset-row,
  .interval-presets {
    width: 100%;
  }

  .time-preset-row .preset-button,
  .nback-preset-row .preset-button,
  .rrt-preset-row .preset-button,
  .interval-presets button {
    flex: 1 1 0;
    padding-inline: 10px !important;
  }
}

/* Final black UI cleanup: softer blocks, no cheap outlines, no segmented pop-in. */
html,
body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
}

.home-streak-card,
.exercise-card,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty,
.routine-card,
.controls,
.primary-panel,
.stats-summary article,
.advanced-settings,
.modality-field,
.time-preset-group,
.nback-preset-group,
.control-row,
.assessment-result-grid div,
.assessment-history-item {
  border: 0 !important;
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-rank-progress-card,
.profile-identity-card {
  background: var(--surface) !important;
}

.profile-exercise-card,
.profile-exercise-card.active,
.profile-detail-summary article,
.profile-weight-breakdown,
.assessment-result-grid div {
  border: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.exercise-card:hover,
.assessment-intro:hover,
.profile-exercise-card:hover,
.profile-exercise-card.active {
  border: 0 !important;
  background: var(--surface) !important;
  transform: none !important;
}

.routine-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.routine-actions button,
.routine-actions button:first-child,
.routine-actions button:not(:first-child) {
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.routine-actions button:hover {
  background: var(--surface) !important;
}

.seg-sliding::after,
.side-nav::before {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

.profile-view-switch.seg-sliding::after,
.profile-timeframe-control.seg-sliding::after {
  content: none !important;
  display: none !important;
}

.profile-view-switch,
.profile-timeframe-control {
  border: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}

.profile-view-switch button,
.profile-timeframe-control button {
  transition:
    background-color 160ms ease,
    color 160ms ease !important;
}

.profile-view-switch button.active,
.profile-view-switch button[aria-pressed="true"],
.profile-timeframe-control button.active,
.profile-timeframe-control button[aria-pressed="true"] {
  background: #24252b !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.profile-view-switch button.active::after,
.profile-view-switch button[aria-pressed="true"]::after,
.profile-timeframe-control button.active::after,
.profile-timeframe-control button[aria-pressed="true"]::after {
  content: none !important;
}

.home-open h1,
.assessments-open h1,
.exercises-open h1,
.profile-open h1 {
  font-size: clamp(1.6rem, 3vw, 1.9rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.profile-board-header h2,
.profile-section-heading h2,
.profile-exercise-card strong,
.profile-rank-progress-card strong,
.profile-identity-card strong {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

select,
.profile-stat-select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
}

.page-streak-pill {
  display: none !important;
}

.routine-dialog::backdrop,
.routine-load-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.routine-dialog,
.routine-load-dialog {
  background: transparent !important;
  box-shadow: none !important;
}

.routine-dialog form,
.routine-load-dialog form {
  background: var(--bg) !important;
  box-shadow: var(--shadow);
}

.profile-identity-card {
  padding-top: 20px !important;
}

.profile-edit-button {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 32px;
  padding: 0 12px !important;
  border-radius: var(--radius) !important;
  font-size: 0.78rem;
  font-weight: 600;
}

.profile-identity-edit-card {
  align-items: center !important;
}

.profile-identity-edit-card .profile-avatar {
  pointer-events: none;
}

/* Home + compact profile update. */
.home-page {
  display: none;
  width: min(860px, 100%);
  margin: 0 auto;
  gap: 15px;
}

.home-open .home-page {
  display: grid;
}

.home-mascot-card {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 22px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.home-mascot-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.home-mascot-wrap > strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.home-mascot-ball {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 32vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, var(--text), transparent 16%),
    var(--accent);
  box-shadow: 0 16px 42px rgba(18, 103, 255, 0.25);
}

.home-mascot-ball::before,
.home-mascot-ball::after {
  content: "";
  position: absolute;
  top: 39%;
  width: 9px;
  height: 9px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.home-mascot-ball::before {
  left: 34%;
}

.home-mascot-ball::after {
  right: 34%;
}

.home-mascot-ball span {
  position: absolute;
  left: 50%;
  bottom: 32%;
  width: 34px;
  height: 14px;
  border-bottom: 4px solid color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.home-mascot-low .home-mascot-ball {
  filter: saturate(0.78);
  transform: scaleY(0.96);
}

.home-mascot-tired .home-mascot-ball {
  filter: saturate(0.55) brightness(0.86);
  transform: scaleY(0.88);
}

.home-mascot-critical .home-mascot-ball {
  filter: grayscale(0.35) saturate(0.35) brightness(0.72);
  transform: scaleY(0.78);
}

.home-mascot-tired .home-mascot-ball::before,
.home-mascot-tired .home-mascot-ball::after,
.home-mascot-critical .home-mascot-ball::before,
.home-mascot-critical .home-mascot-ball::after {
  height: 3px;
}

.home-mascot-tired .home-mascot-ball span,
.home-mascot-critical .home-mascot-ball span {
  bottom: 28%;
  border-top: 4px solid color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-bottom: 0;
  border-radius: var(--radius) 999px 0 0;
}

.home-mascot-copy {
  display: grid;
  gap: 10px;
}

.home-mascot-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.55rem, 7vw, 2.35rem);
  line-height: 1.03;
}

.home-mascot-copy p {
  margin: 0;
  color: rgba(245, 245, 247, 0.62);
}

.home-mascot-copy button {
  justify-self: start;
  min-height: 42px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 0 18px !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  box-shadow: none !important;
}

.profile-simple-panel {
  gap: 14px !important;
}

.profile-simple-panel > .profile-rank-progress-card {
  display: none !important;
}

.profile-identity-card .profile-rank-progress-card {
  margin-top: 2px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-identity-card .profile-rank-progress-top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.profile-identity-card .profile-rank-progress-top strong {
  margin-top: 3px;
  font-size: 0.98rem;
}

.profile-identity-card .profile-rank-progress-card p,
.profile-identity-card .profile-rank-progress-top b {
  font-size: 0.76rem;
}

@media (max-width: 820px) {
  .side-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .side-nav::before {
    width: calc((100% - 25px) / 4) !important;
  }

  .home-mascot-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-mascot-copy button {
    justify-self: center;
  }

  .profile-identity-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    padding: 16px !important;
  }
}

/* Compact home mascot card. */
.home-mascot-card {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px !important;
  text-align: left !important;
}

.home-mascot-wrap {
  gap: 6px !important;
}

.home-mascot-wrap > strong {
  font-size: 1rem !important;
}

.home-mascot-ball {
  width: clamp(70px, 22vw, 94px) !important;
  box-shadow: 0 10px 26px rgba(18, 103, 255, 0.2) !important;
}

.home-mascot-copy {
  gap: 6px !important;
}

.home-mascot-copy h2 {
  font-size: clamp(1.15rem, 5.4vw, 1.55rem) !important;
  line-height: 1.06 !important;
}

.home-mascot-copy p:not(.exercise-type) {
  font-size: 0.84rem !important;
  line-height: 1.32 !important;
}

.home-mascot-copy button {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 0.86rem !important;
}

@media (max-width: 420px) {
  .home-mascot-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  .home-mascot-copy button {
    justify-self: start !important;
  }
}

/* Screen Time economy — cognition health gauge, coin wallet, daily quests. */
.home-health {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  text-align: center;
}

.home-health-gauge {
  position: relative;
  width: min(54vw, 215px);
  aspect-ratio: 1;
}

.home-health-gauge::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: var(--fill-subtle);
}

.home-health-gauge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-health-track,
.home-health-fill {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.home-health-track {
  stroke: var(--line);
}

.home-health-head,
.home-health-brain {
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.home-health-brain {
  transition: opacity 600ms ease;
}

.home-health > strong {
  margin-top: 2px;
  color: var(--text);
  font-size: clamp(1.9rem, 8.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.home-health > span {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.home-points-card {
  position: relative;
  display: grid;
  gap: 6px;
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
}

.home-points-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
}

.home-points-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-points-balance strong {
  color: var(--text);
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.home-points-balance img {
  width: 45px;
  height: 45px;
}

.home-points-buy {
  flex-shrink: 0;
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0 20px;
  background: var(--surface-2) !important;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 500;
}

.home-points-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.home-points-apps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.home-points-apps button {
  border: 0 !important;
  padding: 4px 0;
  background: none !important;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
}

.home-quests {
  display: grid;
  gap: 10px;
}

.home-quest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--surface);
}

.home-quest-row > span {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 500;
}

.quest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 0.95rem;
  font-weight: 600;
}

.quest-pill img {
  width: 23px;
  height: 23px;
}

.quest-pill-claimable {
  background: var(--success) !important;
  color: var(--text);
}

.quest-pill-claimed {
  background: var(--surface-2) !important;
  color: var(--text);
  font-weight: 500;
}

.quest-pill-progress {
  /* Functional progress meter: hard-stop two-tone, no decorative fade. */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent-2) 30%, var(--surface-2)) var(--quest-progress, 0%),
    var(--surface-2) var(--quest-progress, 0%)
  ) !important;
  color: var(--text);
}

.home-quests-more {
  justify-self: center;
  min-height: 36px;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0 18px;
  background: var(--surface-2) !important;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}

.screen-time-balance strong img {
  width: 23px;
  height: 23px;
  vertical-align: -5px;
}

.screen-time-dialog {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.screen-time-dialog::backdrop {
  background: var(--line-strong);
}

.screen-time-dialog form {
  display: grid;
  gap: 17px;
  padding: 25px;
}

.screen-time-dialog h2 {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.screen-time-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--fill-subtle);
}

.screen-time-balance span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.screen-time-balance strong {
  font-size: 1.2rem;
  font-weight: 600;
}

.screen-time-rate {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.screen-time-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.screen-time-options button {
  display: grid;
  gap: 4px;
  min-height: 64px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 8px;
  background: var(--fill-subtle);
  color: var(--text);
  text-align: center;
}

.screen-time-options button strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.screen-time-options button span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.screen-time-options button[disabled] {
  opacity: 0.4;
}


/* Centered page titles + compact hero (2026-07-07). */
.hero .brand-lockup {
  justify-content: center !important;
  text-align: center !important;
}

.hero .lede {
  text-align: center !important;
  /* The lede is a max-width block; without auto margins it hugs the left
     edge and only its text centers, so the line sits off-center. */
  margin-inline: auto !important;
}

/* Boxless back buttons — chevron + label only, no chip behind (2026-07-07). */
.back-button {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  color: var(--muted) !important;
}

.back-button:hover,
.back-button:active {
  background: transparent !important;
  color: var(--text) !important;
}

.back-button::before {
  width: 10px;
  height: 10px;
  margin-right: 2px;
}

/* In-game surfaces are pure black — the grey card look is for settings screens only (2026-07-07). */
.nback-workbench {
  background: var(--bg) !important;
  background-image: none !important;
}

.game-active .stage-card,
.game-active .mot-stage-card,
.game-active .rrt-stage-card,
.game-active .cct-stage-card,
.game-active .ufov-stage-card,
.game-active .ict-stage-card {
  background: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.quit-button {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}

.quit-button:hover:not(:disabled),
.quit-button:active:not(:disabled) {
  background: transparent !important;
  color: var(--text) !important;
}

/* Immersive game mode: no forced page padding, pure black everywhere (2026-07-07). */
.game-active .app-content,
html.native-liquid-nav .game-active .app-content {
  padding: 0 !important;
}

.game-active .nback-stage,
.game-active .mot-stage,
.game-active .rrt-stage,
.game-active .cct-display,
.game-active .ufov-stage,
.game-active .ict-stage {
  border: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}

/* Daily tasks sheet + screen-time controls row (2026-07-07). */
#tasks-dialog {
  display: grid;
  gap: 17px;
  padding: 25px;
}

#tasks-dialog:not([open]) {
  display: none;
}

#tasks-content {
  display: grid;
  gap: 17px;
}

#tasks-dialog .home-quest-row {
  padding: 15px 18px;
}

.task-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.task-remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: none !important;
}

.task-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.task-add-row input,
.task-add-row select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.task-add-row button {
  min-height: 40px;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0 16px;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-weight: 500;
}

.screen-time-apps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--fill-subtle);
  color: var(--muted);
  font-size: 0.88rem;
}

.screen-time-apps-row button {
  border: 0 !important;
  padding: 4px 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 0.88rem;
  font-weight: 500;
}

/* Cycling app showcase on the points card (2026-07-07). */
.home-app-cycle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.home-app-cycle.app-cycle-out {
  opacity: 0;
  transform: translateY(6px);
}

.home-app-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
}

.home-app-icon::after {
  content: attr(data-letter);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.home-app-icon img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-app-name {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
}

.home-quest-add {
  justify-content: center !important;
  border: 1px dashed var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-quest-add span {
  color: var(--muted) !important;
}

/* Home design language everywhere: borderless var(--surface) cards, 16px radii, no hairlines (2026-07-07). */
.exercise-card,
.exercise-card-active,
.coming-soon,
.assessment-intro,
.assessment-detail,
.assessment-run,
.assessment-result,
.assessment-history,
.assessment-history-list article,
.profile-identity-card,
.profile-rank-progress-card,
.profile-page[data-selected-profile-view="data"] .profile-board,
.profile-page[data-selected-profile-view="data"] .profile-exercise-section,
.profile-page[data-selected-profile-view="data"] .profile-detail-section,
.profile-page[data-selected-profile-view="data"] .profile-overview article,
.profile-page[data-selected-profile-view="data"] .profile-detail-summary article,
.profile-page[data-selected-profile-view="data"] .profile-weight-breakdown,
.profile-page[data-selected-profile-view="data"] .profile-trend-empty,
.profile-exercise-card,
.routine-card,
.routine-empty,
.routine-total-card,
.stats-summary article,
.stats-panel,
.controls,
.primary-panel,
.advanced-settings,
.friends-main-list,
.friends-add-search,
.friend-list-section,
.home-streak-card {
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.exercise-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  gap: 10px !important;
  padding: 18px !important;
}

.exercise-card h2 {
  margin: 0;
}

/* Big square exercise tiles on mobile: category on top, title at the bottom (2026-07-10). */
@media (max-width: 820px) {
  .exercise-card {
    aspect-ratio: 1 / 1 !important;
    grid-template-rows: minmax(0, 1fr);
    padding: 20px !important;
  }

  .exercise-card > div {
    display: grid;
    align-content: space-between;
    min-height: 100%;
  }

  .exercise-card .exercise-type {
    display: block;
    margin: 0;
    font-size: 0.72rem;
  }

  .exercise-card h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.65rem);
  }
}

.section-heading h2,
.friend-list-section h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Claimable count rides inline on the quests "more" button (2026-07-08). */
.home-quests-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.quests-more-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius);
  padding: 0 5px;
  background: var(--error) !important;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  font-style: normal;
}

.home-app-icon:has(img) {
  background: transparent;
}

/* Points card polish: link-blue unlock text, deeper claim green, legible reward text (2026-07-08). */
.home-points-apps button {
  color: var(--accent) !important;
}

.quest-pill-claimable {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
}

.quest-pill-claimable img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Daily detox hero on the Train page (2026-07-08). */
.daily-detox-card {
  display: grid;
  gap: 7px;
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  padding: 15px 16px 14px !important;
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

.daily-detox-card h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.daily-detox-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.daily-detox-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.daily-detox-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}

.daily-detox-card button {
  margin-top: 5px;
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-size: 1.02rem;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.daily-detox-card {
  grid-column: 1 / -1;
  order: -3;
}

/* Routines row tile at the end of the exercise grid (2026-07-08). */
.routines-tile {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 15px 16px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  text-align: left;
}

.routines-tile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.routines-tile-copy strong {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.routines-tile-copy span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 400;
}

.routines-tile-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}

.routine-create-inline {
  min-height: 44px !important;
  border: 1px dashed var(--line) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* iOS-style bottom sheets: dark blurred dim, slide-up card, grabber (2026-07-08). */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.58) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.screen-time-dialog,
#tasks-dialog,
.friend-dialog,
.social-leaderboard-dialog,
.routine-dialog,
.routine-load-dialog,
.exercise-sheet,
.session-summary-dialog {
  inset: auto 0 calc(env(safe-area-inset-bottom, 0px) + 14px) 0 !important;
  margin: auto auto 0 !important;
  width: min(600px, calc(100% - 24px)) !important;
  max-height: 82dvh;
  overflow: auto;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow);
  animation: cogni-sheet-up 0.34s cubic-bezier(0.32, 0.72, 0.35, 1);
}

@keyframes cogni-sheet-up {
  from {
    transform: translateY(36px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.screen-time-dialog::before,
#tasks-dialog::before,
.friend-dialog::before,
.social-leaderboard-dialog::before,
.routine-dialog::before,
.routine-load-dialog::before,
.exercise-sheet::before,
.session-summary-dialog::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin: 9px auto 2px;
  border-radius: var(--radius);
  background: var(--line);
}

.screen-time-dialog form,
#tasks-dialog,
.friend-dialog form,
.social-leaderboard-dialog form,
.routine-dialog form,
.routine-load-dialog form {
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}

/* Quit confirm matches the app language: borderless card, pill actions (2026-07-08). */
.quit-dialog {
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow);
}

.quit-dialog h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.quit-dialog .dialog-actions button {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.quit-dialog .dialog-actions button:first-child {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

.quit-dialog .dialog-actions button:last-child {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

/* Unlock sheet breathing room + no focus rings on sheet chrome (2026-07-09). */
#screen-time-content {
  display: grid;
  gap: 17px;
}

.screen-time-dialog form,
#tasks-dialog {
  gap: 16px !important;
  padding: 24px 20px max(26px, env(safe-area-inset-bottom)) !important;
}

.screen-time-dialog h2,
#tasks-dialog h2 {
  margin: -4px 0 2px !important;
}

.screen-time-apps-row {
  padding: 14px !important;
}

.screen-time-balance {
  padding: 14px !important;
}

.screen-time-rate {
  margin: 2px 2px 0 !important;
}

.screen-time-options {
  gap: 12px !important;
}

.screen-time-options button {
  gap: 5px !important;
  min-height: 76px !important;
  padding: 14px 8px !important;
}

dialog button:focus,
dialog button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Elevated sheets: var(--surface) surface with var(--surface-2) inner cards for contrast (2026-07-10). */
dialog .routine-empty,
dialog .routine-list,
dialog .routine-card,
dialog .routine-total-card,
dialog .screen-time-balance,
dialog .home-quest-row,
dialog .screen-time-apps-row {
  border: 0 !important;
  background: var(--surface-2) !important;
}

/* Exercise settings sheet: hosts the exercise's own controls before starting. */
.exercise-sheet-body {
  display: grid;
  gap: 22px;
  padding: 14px 20px max(26px, env(safe-area-inset-bottom));
}

.exercise-sheet .controls {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.exercise-sheet .controls .back-button {
  display: none !important;
}

/* Health-colored aura behind the home head/brain. */
.home-health-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  filter: blur(16px);
}

/* Coin claim feedback: rising "+N" float, balance pop, locked-pill shake (2026-07-10). */
.coin-claim-float {
  position: fixed;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 1.05rem;
  font-weight: 600;
  pointer-events: none;
  animation: coin-claim-rise 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

.coin-claim-float img {
  width: 23px;
  height: 23px;
}

@keyframes coin-claim-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.85);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64px) scale(1);
  }
}

.balance-pop strong {
  animation: balance-pop 0.55s ease;
}

@keyframes balance-pop {
  0%, 100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.16);
    color: var(--success);
  }
}

.quest-pill-shake {
  animation: quest-shake 0.4s ease;
}

@keyframes quest-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}

/* Exercise sheet settings match the app language: var(--surface-2) rows, pill toggle,
   clean sliders and fields (2026-07-10). */
.exercise-sheet .advanced-settings summary,
.exercise-sheet .advanced-settings[open] summary {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--line);
  color: var(--text);
  font-weight: 500;
}

.exercise-sheet .advanced-settings[open] summary {
  background: var(--line);
}

.exercise-sheet .control-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface-2) !important;
}

.exercise-sheet .control-row > label {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}

.exercise-sheet .control-row > span {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.exercise-sheet .control-row > input[type="range"] {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
}

.exercise-sheet .control-row > input[type="number"],
.exercise-sheet .control-row > select {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  width: auto;
  min-width: 90px;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  text-align: right;
  box-shadow: none;
}

.exercise-sheet .setting-stat {
  border: 0;
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface-2);
}

.exercise-sheet .controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  margin: 0;
  background: transparent;
}

.exercise-sheet .controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius);
  background: var(--line);
}

.exercise-sheet .controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow);
}

.exercise-sheet .controls input[type="checkbox"] {
  accent-color: var(--success);
}

.exercise-sheet .controls fieldset,
.exercise-sheet .progression-field {
  display: grid;
  gap: 15px;
  margin: 0;
  border: 0;
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
}

.exercise-sheet .controls fieldset legend,
.exercise-sheet .progression-field legend {
  float: left;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exercise-sheet .controls fieldset label {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9rem;
}

/* Cognitive profile hexagon (2026-07-11). */
.profile-hexagon {
  width: min(100%, 340px);
  justify-self: center;
  display: block;
}

.hexagon-grid polygon,
.hexagon-grid line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.hexagon-shape {
  fill: rgba(48, 209, 88, 0.32);
  stroke: var(--success);
  stroke-width: 2;
  stroke-linejoin: round;
}

.profile-hexagon text {
  fill: var(--text);
  font-size: 14.5px;
  font-weight: 500;
}

.profile-hexagon .hexagon-value {
  fill: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* Contribution-style activity heatmap: week columns, month labels, legend (2026-07-12). */
.activity-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-columns: 1fr;
  gap: 4px;
}

.activity-day {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 4.5px;
  background: var(--line);
}

.activity-day.empty {
  visibility: hidden;
}

.activity-day.today {
  box-shadow: inset 0 0 0 1.5px var(--accent-2);
}

.activity-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.activity-legend i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
}

.activity-months {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.activity-months span {
  min-width: 0;
  white-space: nowrap;
}

/* Adaptive cognitive assessment (2026-07-12). */
.cat-rules {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

#cat-timer-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--success) !important;
  transition: width 240ms linear;
}

.cat-prompt {
  font-size: 1.25rem;
  line-height: 1.3;
}

.cat-stage:empty {
  display: none;
}

.cat-matrix {
  display: block;
  width: min(100%, 300px);
  margin: 0 auto;
}

.cat-matrix-frame {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1;
}

.cat-matrix-question {
  fill: var(--muted);
  font-size: 26px;
  font-weight: 600;
}

.cat-options {
  display: grid;
  gap: 10px;
}

.cat-options button {
  min-height: 52px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  text-align: left;
  font-size: 1rem;
  font-weight: 550;
  box-shadow: none !important;
}

.cat-options button:active {
  transform: scale(0.985);
}

.cat-options-matrix {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.cat-options-matrix button {
  display: grid;
  place-items: center;
  padding: 10px;
}

.cat-cell {
  width: 64px;
  height: 64px;
}

.cat-score-hero {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.cat-score-hero strong {
  color: var(--text);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cat-score-hero span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.cat-curve svg {
  display: block;
  width: 100%;
}

.cat-curve-line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
}

.cat-curve-marker {
  stroke: var(--success);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.cat-curve-dot {
  fill: var(--success);
}

.cat-curve-label {
  fill: var(--muted);
  font-size: 10px;
}

/* Focus test (sustained attention) and Memory test (spatial span) (2026-07-12). */
.focus-stimulus {
  display: grid;
  place-items: center;
  min-height: 160px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 5rem;
  font-weight: 600;
  transition: transform 120ms ease;
}

.focus-stimulus.focus-tapped {
  transform: scale(0.96);
}

.focus-tap {
  min-height: 110px;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: none !important;
}

.focus-tap:active {
  transform: scale(0.98);
}

.memory-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(100%, 320px);
  margin: 0 auto;
}

.memory-cell {
  aspect-ratio: 1;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
  transition: background 120ms ease, transform 120ms ease;
}

.memory-cell.lit {
  background: var(--success) !important;
  transform: scale(1.04);
}

/* Coin rate pill in the exercise sheet + centered session coin float (2026-07-12). */
.exercise-sheet-earn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  border-radius: var(--radius);
  padding: 8px 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.exercise-sheet-earn img {
  width: 20px;
  height: 20px;
}

.exercise-sheet-earn b {
  color: var(--text);
  font-weight: 600;
}

.coin-claim-float-center {
  left: 50% !important;
  top: 32% !important;
  font-size: 1.5rem;
}

.coin-claim-float-center img {
  width: 30px;
  height: 30px;
}

/* Settings side drawer: agreements + community links (2026-07-12). */
.settings-drawer {
  position: fixed;
  inset: 0 0 0 auto !important;
  margin: 0 !important;
  width: min(320px, 86vw) !important;
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
  border: 0 !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow);
  animation: settings-drawer-in 0.3s cubic-bezier(0.32, 0.72, 0.35, 1);
}

@keyframes settings-drawer-in {
  from {
    transform: translateX(48px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.settings-drawer-body {
  display: grid;
  gap: 15px;
  align-content: start;
  min-height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 18px max(24px, env(safe-area-inset-bottom));
}

.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 6px;
}

.settings-drawer-header h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.settings-drawer-group-label {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.settings-drawer-group {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.settings-drawer-group a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 550;
  text-decoration: none;
}

.settings-drawer-group a + a {
  border-top: 1px solid var(--line);
}

.settings-drawer-group a:active {
  background: var(--line);
}

.settings-drawer-group svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-drawer-group a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--line-strong);
  border-top: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.settings-drawer-version {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Pro (web) mode: pure training tool — no home feed, no coin economy (2026-07-12). */
.pro-mode .side-nav-button[data-section="home"] {
  display: none !important;
}

.pro-mode .home-quests,
.pro-mode .home-points-card {
  display: none !important;
}

.pro-mode .eyebrow {
  display: none !important;
}

/* Pro mode drops the mobile detox hero from the Train page (2026-07-12). */
.pro-mode .daily-detox-card {
  display: none !important;
}

/* Keybind chips on answer buttons: visible on the pro (web) build even
   mid-game; the mobile app keeps them hidden (2026-07-12). */
.pro-mode kbd {
  display: inline-block !important;
}

#rrt-true,
#rrt-false,
[data-ict-response] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Shareable IQ funnel: standalone page chrome and the lead form (2026-07-13). */
.iq-standalone .app-sidebar {
  display: none !important;
}

.iq-standalone #cat-back-to-list,
.iq-standalone #cat-result-back,
.iq-standalone #cat-open-history {
  display: none !important;
}

.cat-lead-form {
  display: grid;
  gap: 10px;
}

.cat-lead-form input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.cat-lead-form button {
  min-height: 48px;
}

/* ==========================================================================
   ANTI-DOPAMINE THEME — design tokens (2026-07-13)
   Single source of truth for color, type, and shape. Cool neutral palette:
   light = cool grey paper, dark = cool ink. Tweak values here only.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Type */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --radius-s: 8px;
  --radius: 12px;

  /* Palette — dark, and dark unconditionally. The app is a single fixed
     theme (Tailwind zinc + indigo-500); only the marketing landing page and
     the onboarding flow opt into light, and they carry their own tokens. */
  --bg: #18181B;            /* zinc-900  — page */
  --surface: #27272A;       /* zinc-800  — sidebar, cards, inputs */
  --surface-2: #3F3F46;     /* zinc-700  — raised / pressed */
  --text: #F4F4F5;          /* zinc-100 */
  --text-2: #D4D4D8;        /* zinc-300 */
  --muted: #A1A1AA;         /* zinc-400 */
  --line: #27272A;          /* zinc-800  — dividers read on --bg, vanish on cards (intended: cards are flat) */
  --line-strong: #3F3F46;   /* zinc-700  — borders that must read on a card */
  --fill-subtle: rgba(244, 244, 245, 0.06);
  --accent: #6366F1;        /* indigo-500 */
  --on-accent: #FFFFFF;
  --accent-2: #818CF8;      /* indigo-400 */
  --success: #22C55E;
  --error: #F87171;
  --warning: #FACC15;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --glass: rgba(39, 39, 42, 0.88);

  /* Legacy variable remap — older layers keep working, now tokenized */
  --sidebar: var(--surface);
  --surface-soft: var(--surface);
  --surface-raised: var(--surface-2);
  --line-soft: var(--line);
  --dim: var(--muted);
  --active: var(--fill-subtle);
  --control-bg: var(--fill-subtle);
  --control-bg-hover: rgba(244, 244, 245, 0.1);
  --accent-blue: var(--accent);
  --accent-cyan: var(--accent);
  --accent-purple: var(--accent);
  --accent-pink: var(--error);
  --playful-shadow: transparent;
  --professional-card-shadow: var(--shadow);
  --professional-flat-shadow: none;

  background: var(--bg);
  color: var(--text);
}


/* Base type: humanist sans body, book serif headings, unhurried rhythm. */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans) !important;
}

body {
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

kbd {
  font-family: var(--font-mono) !important;
}

/* Nav legibility on the paper glass bar. */
.side-nav-button {
  color: var(--muted) !important;
}

.side-nav-button.active {
  color: var(--text) !important;
}

.side-nav-button .nav-icon svg {
  stroke: currentColor !important;
}

/* Custom exercise-task builder hint (2026-07-14). */
.task-add-hint {
  margin: -6px 2px 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Web IQ funnel (2026-07-19): email gate -> slides -> test -> phone gate. */
.iq-standalone .hero,
.iq-standalone #cat-intro,
.iq-standalone #ocd-intro,
.iq-standalone #focus-intro,
.iq-standalone #memory-intro,
.iq-standalone #adhd-assessment-intro {
  display: none !important;
}

.iq-funnel {
  max-width: 560px;
}

.iq-slide-dots {
  display: flex;
  gap: 8px;
  margin: 22px 0 4px;
}

.iq-slide-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.iq-slide-dots i.active {
  background: var(--accent);
}

/* Landing: one clean hero, nothing else. */
.iq-landing {
  margin-top: 8vh;
  text-align: center;
}

.iq-landing h2 {
  font-size: 2rem;
  margin: 14px 0 12px;
}

.iq-landing .assessment-history-copy {
  max-width: 420px;
  margin: 0 auto 26px;
}

.iq-landing .assessment-list-actions {
  justify-content: center;
}

.iq-brand {
  font-family: var(--font-serif) !important;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Discord CTA: brand blurple in both themes. */
.iq-discord-button,
.iq-discord-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius);
  background: #5865F2 !important;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  margin: 6px 0 10px;
}

.iq-discord-button:hover {
  background: #4752C4 !important;
}

.iq-discord-button svg {
  width: 22px;
  height: 16px;
  flex: none;
}

/* Standalone funnel layout: kill the sidebar grid track, center one column. */
.app-shell.iq-standalone {
  display: block !important;
}

.iq-standalone .app-content {
  width: min(760px, calc(100% - 36px)) !important;
  margin: 24px auto !important;
}

.iq-standalone .assessment-page {
  max-width: 620px;
  margin: 0 auto;
}

.iq-about {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* "Calculating your results" screen: bar + interrupt cards. */
.iq-calc-track {
  height: 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  margin: 26px 0 12px;
}

#iq-calc-bar {
  height: 100%;
  width: 0%;
  background: var(--accent) !important;
  border-radius: inherit;
  transition: width 0.18s linear;
}

.iq-calc-status {
  color: var(--muted);
  font-size: 0.88rem;
}

.iq-calc-status b {
  color: var(--text);
  font-weight: 600;
}

.iq-calc-interrupt {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.iq-calc-interrupt h3 {
  font-family: var(--font-serif) !important;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 10px;
}

.iq-calc-interrupt .assessment-history-copy {
  margin-top: 0;
}

/* Post-funnel recommendations: only shown on the shareable /iq result. */
.iq-recommend {
  display: none;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.iq-standalone .iq-recommend {
  display: block;
}

.iq-recommend h3 {
  font-family: var(--font-serif) !important;
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.iq-recommend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.iq-recommend-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}

.iq-recommend-card:hover {
  border-color: var(--accent);
}

.iq-recommend-card b {
  font-weight: 600;
  font-size: 1.02rem;
}

.iq-recommend-card span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .iq-recommend-grid {
    grid-template-columns: 1fr;
  }
}

/* Funnel result: recommendations replace the in-app "Back to tests". */
.iq-standalone #cat-result-back {
  display: none !important;
}

/* ===================================================================
   Accounts: login/signup gate (2026-07-22)
   =================================================================== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  overflow-y: auto;
}

.auth-card {
  width: min(420px, 100%);
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}

.auth-brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.auth-brand strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
}

.auth-card h1 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 1.7rem;
  text-align: center;
  margin: 0 0 6px;
}

.auth-subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 26px;
  font-size: 0.94rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-2);
}

.auth-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.auth-forgot {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

.auth-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.98rem;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-password {
  position: relative;
  display: block;
}

.auth-password input {
  padding-right: 46px;
}

.auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.auth-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.auth-error {
  margin: 0;
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 500;
}

.auth-submit {
  padding: 14px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
}

.auth-google svg {
  width: 19px;
  height: 19px;
}

.auth-switch {
  text-align: center;
  margin: 24px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.auth-switch-button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}

/* Settings drawer account block. */
.settings-account {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.settings-account-email {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 0.9rem;
}

.settings-signout {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--error);
  font-weight: 500;
  cursor: pointer;
}

/* ===================================================================
   Marketing landing page (restyled 2026-07-24)

   Deliberately its own light palette, scoped to .landing: the marketing
   page stays white and high-contrast even when the app shell is in dark
   mode, so the first impression is consistent for every visitor.
   =================================================================== */
/* The two light surfaces. Everything else in the product is the fixed dark
   theme; these two subtrees re-point the shared tokens at a light palette so
   every nested component follows without needing its own override. */
.landing,
.onboarding {
  /* Local palette — overrides the app tokens for this subtree only. */
  --l-bg: #FFFFFF;
  --l-ink: #10132B;
  --l-ink-2: #4A5169;
  --l-muted: #6B7280;
  --l-line: #E6E8EF;
  --l-line-strong: #D3D7E2;
  --l-surface: #FFFFFF;
  --l-surface-2: #F7F8FC;
  /* The light surfaces use the deeper reference blue; the dark app keeps
     indigo-500, which is what reads well against #18181B. */
  --l-accent: #323DD6;
  --l-accent-press: #2A34BE;

  /* Remap the shared tokens the nested/hover rules already reference. */
  --bg: var(--l-bg);
  --surface: var(--l-surface);
  --surface-2: var(--l-surface-2);
  --text: var(--l-ink);
  --text-2: var(--l-ink-2);
  --muted: var(--l-muted);
  --line: var(--l-line);
  --line-strong: var(--l-line-strong);
  --accent: var(--l-accent);
  --accent-2: var(--l-accent);
  --on-accent: #FFFFFF;

  color-scheme: light;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.landing { min-height: 100vh; }

/* The serif display face is the app's voice, not the marketing page's.
   Every landing heading is the sans, tightly tracked. */
.landing h1,
.landing h2,
.landing h3 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em;
  color: var(--l-ink);
}

/* ---------- Nav ---------- */
.landing-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
}

/* The mark ships as black-on-white, so multiply drops its plate on the
   white page without needing a second asset. */
.landing-brand img {
  width: 32px;
  height: 32px;
  margin-left: -3px;
  mix-blend-mode: multiply;
}

.landing-brand strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--l-ink);
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.landing-nav-links a {
  color: var(--l-ink);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.landing-nav-links a:hover { color: var(--l-accent); }

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  justify-content: flex-end;
}

.landing-login {
  padding: 9px 20px;
  border: 1px solid var(--l-line-strong) !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--l-ink) !important;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.landing-login:hover {
  border-color: var(--l-ink) !important;
  background: var(--l-surface-2) !important;
}

.landing-nav-cta {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--l-accent) !important;
  background-image: none !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.landing-nav-cta:hover { background: var(--l-accent-press) !important; }
.landing-nav-cta:active { transform: translateY(1px); }

/* ---------- Hero ---------- */
.landing-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 32px 30px;
}

.landing-hero-centered {
  text-align: center;
  padding: 70px 32px 30px;
}

.landing-hero h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.65rem);
  line-height: 1.12;
  margin: 0 auto 20px;
  max-width: 20em;
  text-wrap: balance;
}

.landing-hero-lede {
  color: var(--l-ink-2);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  max-width: 32em;
  margin: 0 auto 34px;
  text-wrap: balance;
}

.landing-cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.landing-cta {
  padding: 15px 34px;
  border: none !important;
  border-radius: 12px;
  background: var(--l-accent) !important;
  background-image: none !important;
  /* The 3D read is one 2px lit band along the top edge — nothing else. */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.landing-cta:hover { background: var(--l-accent-press) !important; }
.landing-cta:active { transform: translateY(1px); }
.landing-cta .landing-cta-note { font-weight: 500; opacity: 0.82; }

.landing-hero-secondary {
  display: block;
  margin: 18px auto 0;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  color: var(--l-muted) !important;
  font-family: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.landing-hero-secondary:hover { color: var(--l-accent) !important; text-decoration: underline; }

/* Paradigm marquee. Two identical tracks' worth of items (the second copy is
   cloned in at boot), so translating the track by exactly -50% loops
   seamlessly. Spacing lives in item padding, not flex gap — a gap would make
   the two copies unequal and the loop would jump. */
.landing-marquee {
  padding: 2px 0 52px;
}

.landing-marquee-title {
  margin: 0 0 24px;
  padding: 0 24px;
  text-align: center;
  color: var(--l-muted);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.landing-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.landing-marquee-track {
  display: flex;
  width: max-content;
  animation: landing-marquee-scroll 38s linear infinite;
}

.landing-marquee-viewport:hover .landing-marquee-track {
  animation-play-state: paused;
}

@keyframes landing-marquee-scroll {
  to { transform: translateX(-50%); }
}

.landing-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  color: var(--l-ink-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.landing-marquee-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--l-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .landing-marquee-track { animation: none; }
  .landing-marquee-viewport { overflow-x: auto; }
}

/* ---------- Sections ---------- */
.landing-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 62px 32px;
}

.landing-h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.22;
  margin: 0 0 34px;
  text-align: center;
  text-wrap: balance;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.landing-step {
  padding: 26px 24px;
  border: 1px solid var(--l-line);
  border-radius: 16px;
  background: var(--l-surface);
}

.landing-step-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--l-accent);
  margin: 0 0 14px;
}

.landing-step h3 {
  font-size: 1.12rem;
  margin: 0 0 8px;
}

.landing-step p {
  color: var(--l-ink-2);
  line-height: 1.6;
  margin: 0;
}

.landing-approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.landing-approach-card {
  padding: 28px 26px;
  border: 1px solid var(--l-line);
  border-radius: 16px;
  background: var(--l-surface-2);
}

.landing-approach-card h3 {
  font-size: 1.18rem;
  margin: 0 0 10px;
}

.landing-approach-card p {
  color: var(--l-ink-2);
  line-height: 1.65;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .landing-step,
  .landing-approach-card,
  .landing-faq-item {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .landing-step:hover,
  .landing-approach-card:hover,
  .landing-faq-item:hover {
    border-color: var(--l-line-strong);
    box-shadow: 0 8px 24px -16px rgba(16, 19, 43, 0.45);
  }
}

.landing-disclaimer {
  margin: 28px 0 0;
  color: var(--l-muted);
  font-size: 0.88rem;
  text-align: center;
}

.landing-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.landing-faq-item {
  border: 1px solid var(--l-line);
  border-radius: 14px;
  background: var(--l-surface);
  padding: 2px 20px;
}

.landing-faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.012em;
  list-style: none;
  color: var(--l-ink);
}

.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after { content: "＋"; float: right; color: var(--l-muted); }
.landing-faq-item[open] summary::after { content: "－"; }

.landing-faq-item p {
  color: var(--l-ink-2);
  line-height: 1.65;
  margin: 0 0 20px;
}

/* ---------- Pricing ---------- */
.landing-eyebrow {
  margin: 0 0 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--l-accent);
}

.landing-pricing-sub {
  max-width: 34em;
  margin: -18px auto 0;
  text-align: center;
  color: var(--l-ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

/* Billing toggle — a pill switch with a sliding active chip. */
.landing-billing {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 30px auto 44px;
  padding: 5px;
  border-radius: 999px;
  background: var(--l-surface-2);
  border: 1px solid var(--l-line);
  left: 50%;
  transform: translateX(-50%);
}

.landing-billing-option {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  background: transparent;
  color: var(--l-muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.18s ease;
}

.landing-billing-option.is-active {
  background: var(--l-surface);
  color: var(--l-ink);
  box-shadow: 0 1px 2px rgba(16, 19, 43, 0.12);
}

.landing-billing-save {
  margin-left: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #E3F5EA;
  color: #14804A;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.landing-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.landing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--l-line);
  border-radius: 22px;
  background: var(--l-surface);
}

/* Featured plan: the accent gradient, lifted, white type — the one your eye
   lands on. */
.landing-plan-featured {
  padding-top: 40px;
  border: none;
  color: #fff;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(165deg, #4A54E6 0%, #323DD6 55%, #2A34BE 100%);
  box-shadow: 0 24px 48px -22px rgba(50, 61, 214, 0.65);
  transform: translateY(-8px);
}

.landing-plan-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-plan-head h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}

.landing-plan-featured .landing-plan-head h3 { color: #fff; }

.landing-plan-tag {
  margin: 0;
  color: var(--l-muted);
  font-size: 0.92rem;
}

.landing-plan-featured .landing-plan-tag { color: rgba(255, 255, 255, 0.78); }

.landing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 24px 0 22px;
  min-height: 46px;
  flex-wrap: wrap;
}

.landing-plan-amount {
  font-size: 2.6rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1;
}

.landing-plan-per {
  color: var(--l-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.landing-plan-featured .landing-plan-per { color: rgba(255, 255, 255, 0.78); }

.landing-plan-cta {
  width: 100%;
  padding: 14px 20px;
  border: none !important;
  border-radius: 12px;
  background: var(--l-accent) !important;
  color: #fff !important;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
  transition: background 0.15s ease, transform 0.12s ease;
}

.landing-plan-cta:hover { background: var(--l-accent-press) !important; }
.landing-plan-cta:active { transform: translateY(1px); }

/* On the featured card the button inverts: white on the gradient. */
.landing-plan-featured .landing-plan-cta {
  background: #fff !important;
  color: var(--l-accent) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.landing-plan-featured .landing-plan-cta:hover { background: #F0F1FF !important; }

/* Ghost CTA on the two flat cards. */
.landing-plan-cta-ghost {
  background: transparent !important;
  color: var(--l-ink) !important;
  box-shadow: inset 0 0 0 1px var(--l-line-strong) !important;
}

.landing-plan-cta-ghost:hover {
  background: var(--l-surface-2) !important;
  box-shadow: inset 0 0 0 1px var(--l-ink) !important;
}

.landing-plan-features {
  list-style: none;
  margin: 26px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--l-line);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.landing-plan-featured .landing-plan-features { border-top-color: rgba(255, 255, 255, 0.2); }

.landing-plan-features li {
  position: relative;
  padding-left: 30px;
  color: var(--l-ink-2);
  font-size: 0.95rem;
  line-height: 1.4;
}

.landing-plan-featured .landing-plan-features li { color: rgba(255, 255, 255, 0.92); }

/* Checkmark: a tinted disc with a drawn tick, no icon font needed. */
.landing-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #EDEEFD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23323DD6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

.landing-plan-featured .landing-plan-features li::before {
  background-color: rgba(255, 255, 255, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}

.landing-pricing-note {
  margin: 40px auto 0;
  text-align: center;
  color: var(--l-muted);
  font-size: 0.92rem;
}

.landing-pricing-note strong { color: var(--l-ink); }

@media (max-width: 900px) {
  .landing-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .landing-plan-featured { transform: none; }
}

/* ---------- Closing ---------- */
.landing-final {
  max-width: 1140px;
  margin: 0 auto;
  padding: 68px 32px 84px;
  text-align: center;
  border-top: 1px solid var(--l-line);
}

.landing-final h2 {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.16;
  margin: 0 0 28px;
  text-wrap: balance;
}

.landing-final p {
  color: var(--l-ink-2);
  font-size: 1.1rem;
  margin: 0 0 32px;
}

.landing-discord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  padding: 15px 24px;
  border-radius: 12px;
  background: #5865F2 !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.landing-discord svg { width: 20px; height: 15px; }

.auth-back {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  .landing-nav-links { display: none; }
  .landing-brand,
  .landing-nav-actions { flex: 0 1 auto; }
}

@media (max-width: 860px) {
  .landing-nav { padding: 16px 20px; }
  .landing-nav-cta { display: none; }
  .landing-hero,
  .landing-hero-centered { padding: 52px 20px 32px; }
  .landing-section { padding: 56px 20px; }
  .landing-final { padding: 64px 20px 84px; }
  .landing-cta { width: 100%; }
  .landing-steps,
  .landing-approach-grid,
  .landing-faq { grid-template-columns: 1fr; }
  .landing-discord { display: flex; margin: 18px auto 0; width: fit-content; justify-content: center; }
}

/* Landing covers the app shell until "Start training". */
html.landing-active #app-shell { display: none !important; }

/* ===================================================================
   Mini exercises (2026-07-22): shared runner + five quick games
   =================================================================== */
.mini-ex {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  padding: max(18px, env(safe-area-inset-top)) 20px 24px;
}

.mini-ex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.mini-ex-back {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 2px;
}

.mini-ex-status {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.mini-ex-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: 12px;
  width: min(88vw, 460px);
  aspect-ratio: 1;
}

.mini-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2) !important;
  color: var(--text);
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.mini-cell.has-num { border-color: var(--line-strong) !important; }
.mini-cell.flash { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent); }
.mini-cell.correct { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent); }
.mini-cell.wrong { background: var(--error) !important; border-color: var(--error) !important; color: #fff; }
.mini-cell:active { transform: scale(0.96); }

.mini-hint {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}

.mini-number {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: clamp(2.4rem, 11vw, 4.4rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text);
  text-align: center;
}

.mini-number.entry { color: var(--accent); min-height: 1.2em; }
.mini-number.wrong { color: var(--error); }

.mini-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(84vw, 320px);
}

.mini-keypad button {
  aspect-ratio: 1.6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}

.mini-keypad button.ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mini-keypad button:active { transform: scale(0.96); }

.mini-word {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  font-weight: 500;
  text-transform: lowercase;
  color: var(--text);
}

.mini-word.wrong { color: var(--error); }

.mini-word-actions {
  display: flex;
  gap: 16px;
}

.mini-word-actions button {
  padding: 15px 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.mini-word-actions button:active { transform: scale(0.97); }

.mini-react {
  width: min(90vw, 560px);
  min-height: min(58vh, 460px);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-react.waiting { background: var(--error); }
.mini-react.go { background: var(--success); }
.mini-react.early { background: var(--warning); color: var(--bg); }
.mini-react.result { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

.mini-result { text-align: center; max-width: 420px; }
.mini-result h2 { font-family: var(--font-serif) !important; font-weight: 500 !important; margin: 4px 0 20px; }
.mini-result-metric { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mini-result-metric strong { font-size: 2.6rem; font-weight: 600; color: var(--accent); }
.mini-result-metric span { color: var(--muted); font-size: 0.95rem; }
.mini-result-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }
.mini-result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.mini-primary { padding: 13px 26px; border: none; border-radius: var(--radius); background: var(--accent) !important; color: var(--on-accent) !important; font-weight: 600; cursor: pointer; }
.mini-secondary { padding: 13px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-weight: 500; cursor: pointer; }

/* Mini exercise: first-time tutorial screen. */
.mini-intro {
  max-width: 440px;
  text-align: center;
}

.mini-intro h2 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 1.9rem;
  margin: 4px 0 22px;
}

.mini-intro-steps {
  text-align: left;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mini-intro-steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  line-height: 1.5;
}

.mini-intro-steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.85rem;
}

.mini-intro .mini-primary {
  padding: 14px 40px;
  font-size: 1rem;
}

.mini-howto {
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ===================================================================
   Clean hover interactions (2026-07-22)
   Subtle lift + border/surface shift. Calm, not flashy. Only on real
   pointers, and disabled for reduced-motion.
   =================================================================== */
@media (hover: hover) and (pointer: fine) {
  .exercise-card,
  .assessment-intro,
  .routines-tile,
  .iq-recommend-card,
  .home-quest-row,
  .mini-secondary {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .exercise-card:hover,
  .assessment-intro:hover,
  .routines-tile:hover,
  .iq-recommend-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.5);
  }

  /* Primary / filled actions: a touch of lift and depth. */
  .auth-submit,
  .mini-primary,
  .auth-google,
  .mini-secondary,
  .settings-signout,
  .exercise-card button,
  .assessment-list-actions button,
  .cat-lead-form button,
  .iq-email-form button {
    transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .auth-submit:hover,
  .mini-primary:hover,
  .exercise-card button:hover,
  .assessment-list-actions button:hover,
  .cat-lead-form button:hover,
  .iq-email-form button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }

  /* Outline / secondary controls: highlight the edge. */
  .auth-google:hover,
  .mini-secondary:hover,
  .settings-signout:hover {
    border-color: var(--accent);
    background: var(--surface);
  }

  /* Grid/keypad cells: gentle edge highlight before you commit. */
  .mini-cell:not(.flash):not(.correct):not(.wrong):hover,
  .mini-keypad button:hover,
  .mini-word-actions button:hover {
    border-color: var(--accent);
  }

  /* Nav: subtle brighten on hover. */
  .side-nav-button {
    transition: color 0.15s ease, background 0.15s ease;
  }

  .side-nav-button:not(.active):hover {
    color: var(--text-2) !important;
  }

  /* Discord CTAs keep their brand colour but lift slightly. */
  .iq-discord-button,
  .landing-discord {
    transition: transform 0.15s ease, filter 0.15s ease;
  }

  .iq-discord-button:hover,
  .landing-discord:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .exercise-card,
  .assessment-intro,
  .routines-tile,
  .iq-recommend-card,
  .auth-submit,
  .mini-primary {
    transition: none !important;
    transform: none !important;
  }
}

/* Mini exercise feedback animations (2026-07-22). */
@keyframes mini-pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes mini-correct-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes mini-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Each prompt animates in, so a repeated word is clearly a NEW question. */
.mini-word { animation: mini-pop 0.28s ease; }
.mini-word.ok { color: var(--success); animation: mini-correct-pulse 0.4s ease; }
.mini-word.wrong { color: var(--error); animation: mini-shake 0.42s ease; }

.mini-word-actions button { transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.mini-word-actions button.picked-ok { background: var(--success) !important; border-color: var(--success) !important; color: #fff; }
.mini-word-actions button.picked-wrong { background: var(--error) !important; border-color: var(--error) !important; color: #fff; }

.mini-number.entry { animation: mini-pop 0.2s ease; }
.mini-number.ok { color: var(--success); animation: mini-correct-pulse 0.4s ease; }
.mini-feedback {
  min-height: 1.4em;
  font-weight: 600;
  font-size: 1rem;
}
.mini-feedback.ok { color: var(--success); }
.mini-feedback.wrong { color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  .mini-word, .mini-word.ok, .mini-word.wrong, .mini-number.entry, .mini-number.ok { animation: none !important; }
}

/* ------------------------------------------------------------------------
   Link-style buttons ("Back", "Forgot password?", "Sign up", the password
   eye): the late global button rules give every <button> a boxed look —
   these should read as plain text/icons, so strip the box back off.
   ------------------------------------------------------------------------ */
.auth-back,
.auth-forgot,
.auth-eye,
.auth-switch-button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-back:hover,
.auth-forgot:hover,
.auth-eye:hover,
.auth-switch-button:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.75;
}

.auth-forgot,
.auth-switch-button {
  color: var(--accent) !important;
}

.auth-back,
.auth-eye {
  color: var(--muted) !important;
}

/* ------------------------------------------------------------------------
   First-run onboarding (mobile "play" mode). Full-screen story: hook ->
   the lost hour -> quick question -> brain cost -> the flip -> the
   interactive IQ bell curve. Uses the app tokens throughout.
   ------------------------------------------------------------------------ */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

.onboarding-inner {
  min-height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));
}

.onboarding-top {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 6px;
}

.onboarding-back {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 10px 4px 0;
  cursor: pointer;
}

.onboarding-back[hidden] { display: none; }

.onboarding-dots {
  display: flex;
  gap: 7px;
  margin: 0 auto;
  /* Balance the back button so the dots sit dead center. */
  transform: translateX(-11px);
}

.onboarding-back[hidden] + .onboarding-dots { transform: none; }

.onboarding-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong, var(--line));
  transition: background 0.25s ease, transform 0.25s ease;
}

.onboarding-dots i.active {
  background: var(--accent);
  transform: scale(1.25);
}

.onboarding-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.onboarding-slide {
  text-align: center;
  animation: onboarding-in 0.34s ease both;
}

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

.onboarding-slide h2,
.onboarding-brand span {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

.onboarding-slide h2 {
  font-size: clamp(1.6rem, 6.4vw, 2.05rem);
  line-height: 1.16;
  margin: 0 0 14px;
}

.onboarding-slide > p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 30em;
  margin: 0 auto;
}

.onboarding-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.onboarding-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* black-on-white mark; multiply drops the plate on the light onboarding */
  mix-blend-mode: multiply;
}

.onboarding-brand span {
  font-size: 1.4rem;
}

/* The lost hour. */
.onboarding-clocks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}

.onboarding-clock {
  padding: 10px 16px;
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
}

.onboarding-clock.is-late {
  color: #E8462F;
  border-color: rgba(232, 70, 47, 0.55);
  background: rgba(232, 70, 47, 0.08);
}

.onboarding-clock-arrow { color: var(--muted); }

/* Question options. */
.onboarding-options {
  display: grid;
  gap: 11px;
  margin-top: 20px;
  text-align: left;
}

.onboarding-options button {
  padding: 15px 18px;
  border-radius: var(--radius) !important;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.onboarding-options button.selected {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  color: var(--text) !important;
}

/* Loop pills (bad = what feeds do, good = what Cogni does). */
.onboarding-loop {
  display: grid;
  gap: 11px;
  margin: 22px 0 20px;
}

.onboarding-loop span {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.02rem;
}

.onboarding-loop.is-bad span {
  color: #E8462F;
  background: rgba(232, 70, 47, 0.09);
}

.onboarding-loop.is-good span {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.onboarding-loop span:nth-child(2) { transform: rotate(0.4deg); }
.onboarding-loop span:nth-child(1) { transform: rotate(-0.4deg); }

/* The IQ bell curve. Stage colors: 90 red -> 110 amber -> 130 green. */
.onboarding-iq {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 4px;
  transition: color 0.4s ease;
}

.onboarding-iq strong {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.onboarding-iq span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.onboarding-curve { margin: 0 0 18px; }

.onboarding-curve svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.onboarding-iq.stage-0, .onboarding-curve.stage-0 { color: #E8462F; }
.onboarding-iq.stage-1, .onboarding-curve.stage-1 { color: #F0A31A; }
.onboarding-iq.stage-2, .onboarding-curve.stage-2 { color: var(--success); }

.onboarding-curve .ob-curve-line {
  fill: none;
  stroke: var(--line-strong, var(--line));
  stroke-width: 2;
}

.onboarding-curve .ob-curve-fill {
  fill: currentColor;
  opacity: 0.16;
  transition: fill 0.4s ease;
}

.onboarding-curve .ob-curve-marker {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.onboarding-curve .ob-curve-dot { fill: currentColor; }

.onboarding-curve .ob-curve-label {
  fill: var(--muted);
  font-size: 11px;
}

/* CTA pinned to the bottom of the flow. */
.onboarding-cta {
  margin-top: 26px;
  padding: 16px 30px;
  border: none !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s ease, filter 0.16s ease, opacity 0.2s ease;
}

.onboarding-cta:hover {
  background: var(--l-accent-press) !important;
  color: #fff !important;
}

.onboarding-cta:active { transform: translateY(1px); }

.onboarding-cta:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-slide { animation: none; }
}

/* Cogni wordmark on the IQ result — for shareable marketing screenshots. */
.cat-result-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.cat-result-brand img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
}

.cat-result-brand span {
  font-family: var(--font-serif) !important;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
}

/* ------------------------------------------------------------------------
   Train tab order (2026-07-23): detox -> slim Routines strip -> all
   exercise tiles as one block (classic four first, then the minis). The
   old per-card order rules left the classic exercises below the minis
   and the routines tile mid-page.
   ------------------------------------------------------------------------ */
@media (max-width: 820px) {
  .exercise-page .routines-tile { order: -2; }
  .exercise-page .exercise-card,
  .exercise-page .exercise-card[data-open-exercise="nback"],
  .exercise-page .exercise-card[data-open-exercise="rrt"],
  .exercise-page .exercise-card[data-open-exercise="cct"],
  .exercise-page .exercise-card[data-open-exercise="ict"] { order: 1; }
  /* Saved-routine quick list (only when non-empty) sits under the tiles. */
  .exercise-page .routine-section .section-heading { order: 2; }
  .exercise-page .routine-list:not(:empty) { order: 3; }
}

/* Slimmer routines strip: instantly visible, no spotlight. */
.routines-tile {
  padding: 11px 15px !important;
}

.routines-tile-copy {
  flex-direction: row !important;
  align-items: baseline;
  gap: 8px;
}

.routines-tile-copy strong { font-size: 0.98rem; }

.routines-tile-copy span {
  font-size: 0.84rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .routines-tile-copy span { display: none; }
}

/* Onboarding v2 additions: name input, hints, how-it-works rows, and a
   progress bar instead of 20 dots. */
.onboarding-progress {
  display: block;
  width: 148px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong, var(--line));
  overflow: hidden;
}

.onboarding-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.onboarding-input {
  width: min(100%, 320px);
  margin: 22px auto 0;
  display: block;
  padding: 13px 4px;
  border: none;
  border-bottom: 2px solid var(--line-strong, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.35rem;
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease;
}

.onboarding-input:focus { border-bottom-color: var(--accent); }

.onboarding-input::placeholder { color: var(--muted); opacity: 0.6; }

.onboarding-hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin: -4px 0 0;
}

.onboarding-slide h2 em {
  font-style: italic;
  color: #E8462F;
}

.onboarding-how {
  display: grid;
  gap: 11px;
  margin: 22px 0 4px;
  text-align: left;
}

.onboarding-how span {
  position: relative;
  padding: 14px 18px 14px 40px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.4;
}

.onboarding-how span::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* With ~8 options the list can outgrow small screens: let the slide breathe. */
.onboarding-options { max-width: 380px; margin-left: auto; margin-right: auto; width: 100%; }
.onboarding-how { max-width: 400px; margin-left: auto; margin-right: auto; }

/* Feedback ask dialog + mini-block note in the routine builder. */
.feedback-dialog {
  width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface);
  color: var(--text);
}

.feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

.feedback-dialog h2 { margin: 4px 0 8px; }

.feedback-lede {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.feedback-dialog textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s, 8px);
  padding: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 14px;
}

.feedback-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.routine-mini-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Wrapped inputs ("@ username" fields): the wrapper div is the box — undo
   the global input boxing on the inner input so it doesn't double up. */
.profile-edit-field div input,
.profile-handle-edit div input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ------------------------------------------------------------------------
   Onboarding v3: game checklist, brain-health quiz arc (analyzing bar,
   red/green radar, compare bars), research cards, permission skip links,
   and the hold-to-promise CTA.
   ------------------------------------------------------------------------ */
.onboarding-checklist {
  display: grid;
  gap: 11px;
  margin: 22px auto 18px;
  max-width: 360px;
  text-align: left;
}

.onboarding-checklist span {
  position: relative;
  padding: 14px 18px 14px 46px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 1rem;
}

.onboarding-checklist span::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M4 12.5 9.5 18 20 6.5"/></svg>') center / 14px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M4 12.5 9.5 18 20 6.5"/></svg>') center / 14px no-repeat exclude, linear-gradient(#000 0 0);
}

.ob-analyze-track {
  width: min(300px, 80%);
  height: 6px;
  margin: 26px auto 16px;
  border-radius: 999px;
  background: var(--line-strong, var(--line));
  overflow: hidden;
}

.ob-analyze-track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

#ob-analyze-step { color: var(--muted); }

/* Radar (red now / green potential). */
.ob-radar { margin: 6px 0 2px; }

.ob-radar svg {
  width: 100%;
  max-width: 330px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ob-radar-grid polygon,
.ob-radar-grid line {
  fill: none;
  stroke: var(--line-strong, var(--line));
  stroke-width: 1;
}

.ob-radar-shape {
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.ob-radar.is-bad .ob-radar-shape { fill: rgba(232, 70, 47, 0.18); stroke: #E8462F; }
.ob-radar.is-good .ob-radar-shape { fill: color-mix(in srgb, var(--success) 18%, transparent); stroke: var(--success); }

.ob-radar text {
  fill: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.ob-radar.is-bad .ob-radar-value { fill: #E8462F; }
.ob-radar.is-good .ob-radar-value { fill: var(--success); }

.ob-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 12px;
}

.ob-score strong {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ob-score span { color: var(--muted); font-weight: 600; }
.ob-score.is-bad strong { color: #E8462F; }
.ob-score.is-good strong { color: var(--success); }

/* You vs Average bars. */
.ob-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  min-height: 190px;
  margin: 26px 0 20px;
}

.ob-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.ob-bar {
  display: block;
  width: 64px;
  border-radius: 10px;
  transition: height 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ob-bar.is-bad { background: #E8462F; height: 56px; }
.ob-bar.is-good { background: var(--success); height: 122px; }

.ob-bar-col b { font-size: 1.05rem; }
.ob-bar-col span { color: var(--muted); font-size: 0.9rem; }

/* Research cards. */
.onboarding-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 22px auto 4px;
  max-width: 420px;
  text-align: left;
}

.onboarding-cards article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.onboarding-cards h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.onboarding-cards p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.onboarding-skip {
  margin-top: 16px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Hold-to-promise: the CTA fills left-to-right while held. */
.onboarding-cta {
  position: relative;
  overflow: hidden;
}

.onboarding-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--hold, 0%);
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  transition: width 0.08s linear;
}

.onboarding-cta.holding {
  transform: scale(0.985);
}

/* University cards on the method slide: white logo tiles on dark cards. */
.onboarding-uni-cards article { text-align: left; }

.onboarding-uni-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #FFFFFF;
}

.onboarding-uni-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.onboarding-uni-cards p { font-size: 0.82rem; }

/* First-run tutorial for the classic exercises (reuses .mini-intro-steps). */
.exercise-intro-dialog {
  width: min(460px, calc(100vw - 36px));
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--surface);
  color: var(--text);
}

.exercise-intro-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.exercise-intro-body { text-align: center; }

.exercise-intro-body h2 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 1.7rem;
  margin: 4px 0 20px;
}

.exercise-intro-body .mini-intro-steps { margin-bottom: 22px; }

.exercise-intro-body .mini-primary {
  width: 100%;
  padding: 15px 30px;
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  box-shadow: none !important;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}

/* "How it works" link in the exercise settings sheet. */
.exercise-sheet-howto {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0 !important;
  margin: 2px 0 6px;
  cursor: pointer;
}

/* Streak celebration toast — fires on the first exercise completed each day. */
.streak-toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  transform: translate(-50%, -140%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 13px 18px 13px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 1.1, 0.3, 1), opacity 0.3s ease;
}

.streak-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.streak-toast-flame {
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(240, 120, 30, 0.55));
}

.streak-toast-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.streak-toast-copy strong { font-size: 1rem; }

.streak-toast-copy span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .streak-toast { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}

/* Big dramatic number for the "time lost to scrolling" onboarding slides. */
.ob-bignum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 24px 0 18px;
}

.ob-bignum strong {
  font-size: clamp(3.6rem, 17vw, 5.2rem);
  font-weight: 800;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ob-bignum span {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 600;
}

.ob-bignum.is-bad strong { color: #E8462F; }

/* ------------------------------------------------------------------------
   Sign-in-first wall: Apple + Google before anything else, every platform.
   ------------------------------------------------------------------------ */
.signin-first {
  position: fixed;
  inset: 0;
  z-index: 8900;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  display: flex;
}

.signin-first-inner {
  margin: auto;
  width: min(440px, 100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: calc(40px + env(safe-area-inset-top)) 28px calc(32px + env(safe-area-inset-bottom));
}

.signin-first-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.signin-first-brand img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
}

.signin-first-brand span {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem;
  font-weight: 500;
}

.signin-first h1 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.9rem, 6.5vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 12px;
}

.signin-first-lede {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 auto 34px;
  max-width: 26em;
}

.signin-first-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  border-radius: 14px !important;
  border: none !important;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
}

.signin-btn svg { width: 20px; height: 20px; }

.signin-btn-apple {
  background: #FFFFFF !important;
  color: #000000 !important;
}

.signin-btn-apple svg { color: #000; }

.signin-btn-google {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1.5px var(--line-strong, var(--line)) !important;
}

/* The app is always dark, so the Apple button always takes its light variant. */
.signin-btn-apple { background: #FFFFFF !important; color: #000 !important; }

.signin-first-error {
  margin: 16px 0 0;
  color: var(--error);
  font-size: 0.9rem;
}

.signin-first-email {
  margin: 22px auto 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 0.95rem;
  cursor: pointer;
}

.signin-first-legal {
  margin: 26px auto 0;
  max-width: 24em;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  opacity: 0.8;
}


/* ===================================================================
   App chrome, matched to the reference (2026-07-24)

   Appended last on purpose: the nav and card rules above are layered
   across half a dozen older passes, and source order is the cheapest way
   to win without unpicking them.
   =================================================================== */
/* Sidebar nav, Jenni-style: no filled pill, white inactive labels, accent for
   the active tab. Compact rows. */
@media (min-width: 821px) {
  .side-nav { gap: 1px; }

  .side-nav-button {
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 9px !important;
    gap: 12px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  /* Icons a touch dimmer than the label, like the reference. */
  .side-nav-button .nav-icon,
  .side-nav-button .nav-icon svg { color: var(--muted) !important; }

  .side-nav-button:hover { background: var(--fill-subtle) !important; }
  .side-nav-button:hover .nav-icon,
  .side-nav-button:hover .nav-icon svg { color: var(--text) !important; }

  /* Active tab: accent text + icon, no background pill. */
  .side-nav-button.active,
  .side-nav-button.active .nav-icon,
  .side-nav-button.active .nav-icon svg {
    background: transparent !important;
    color: #818CF8 !important;
  }
}

.nav-icon,
.nav-icon svg { width: 18px !important; height: 18px !important; }

.nav-icon svg { stroke-width: 1.8 !important; }

/* Primary actions. Six earlier passes each re-declare these selectors as a
   white (--text) button; this is the last word, so it wins on source order.
   Flat accent + one 2px lit top band — the same treatment as the landing. */
.routine-actions button:first-child,
.assessment-list-actions button:first-child,
.primary-panel button,
.profile-edit-actions button[type="submit"],
.profile-onboarding-card > button[type="submit"],
.auth-submit,
#start-session,
#start-mot-session,
#start-rrt-session,
#start-cct-session,
#start-ufov-session,
#start-ict-session {
  background: var(--accent) !important;
  background-image: none !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

.routine-actions button:first-child:hover,
.assessment-list-actions button:first-child:hover,
.primary-panel button:hover,
.auth-submit:hover,
#start-session:hover,
#start-mot-session:hover,
#start-rrt-session:hover,
#start-cct-session:hover,
#start-ufov-session:hover,
#start-ict-session:hover {
  background: #4F52E8 !important;
  filter: none !important;
}

/* ===================================================================
   Clean card surfaces (2026-07-24)

   The reference cards are borderless: a flat fill one step above the
   page, a large radius, generous padding, and a hover that simply
   lightens the fill. Cogni's cards carried 1px borders from older
   passes; this layer removes them and unifies the surface. Appended
   last so it wins on source order without unpicking those passes.
   =================================================================== */
@media (min-width: 821px) {
  .exercise-card,
  .assessment-intro,
  .routines-tile,
  .home-points-card,
  .profile-calendar-card,
  .profile-graph-card,
  .profile-hexagon-card,
  .profile-identity-card,
  .iq-recommend-card {
    border: none !important;
    border-radius: 18px !important;
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Exercise cards lost their inner "Open" button — the whole card opens the
     exercise now, so drop the tall min-height and the space-between layout
     that only existed to pin that button to the bottom. Compact, top-aligned. */
  .exercise-card {
    min-height: 0 !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 20px 22px !important;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease !important;
  }

  .exercise-card h2 { font-size: 1.12rem !important; }
  .exercise-card p { font-size: 0.9rem !important; line-height: 1.45 !important; }

  .assessment-intro {
    padding: 20px 22px !important;
    transition: background 0.16s ease, transform 0.16s ease !important;
  }

  /* Hover: lighten the fill toward zinc-700, a touch of lift. No border,
     no glow — the fill shift is the whole interaction. */
  .exercise-card:hover,
  .assessment-intro:hover,
  .routines-tile:hover,
  .iq-recommend-card:hover {
    background: var(--surface-2) !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
  }
}

/* Reduce motion preference (settings toggle sets this class on <html>). */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ===================================================================
   Sidebar account menu (2026-07-24)

   Replaces the old brand button (which jumped back to the marketing
   landing). A pill showing the avatar + handle opens a dropdown with
   Settings, Logout, the current plan, and an upgrade action.
   =================================================================== */
.sidebar-account {
  position: relative;
  margin-bottom: 14px;
}

.sidebar-account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none !important;
  border-radius: 10px;
  /* No resting box — the global button fill would otherwise make this a
     card. Only hover/open shows a background. */
  background: transparent !important;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.15s ease;
}

.sidebar-account-button:hover,
.sidebar-account[data-open] .sidebar-account-button {
  background: var(--fill-subtle) !important;
}

.sidebar-account-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.sidebar-account-name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-caret {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}

.sidebar-account-menu[hidden] { display: none; }

.sidebar-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border: none !important;
  border-radius: 9px;
  /* Clean list rows, no filled boxes — the global button fill would
     otherwise tint each item into a card. */
  background: transparent !important;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.14s ease;
}

.sidebar-account-item:hover { background: var(--fill-subtle) !important; }

.sidebar-account-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-account-divider {
  height: 1px;
  margin: 8px 4px;
  background: var(--line);
}

.sidebar-account-plan {
  padding: 4px 10px 12px;
}

.sidebar-account-plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-account-plan-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.sidebar-account-plan-row strong {
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sidebar-account-plan-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.sidebar-account-upgrade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: none !important;
  border-radius: 10px;
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
  transition: background 0.15s ease, transform 0.12s ease;
}

.sidebar-account-upgrade:hover { background: #4F52E8 !important; }
.sidebar-account-upgrade:active { transform: translateY(1px); }

.sidebar-account-upgrade svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

/* ===================================================================
   Settings modal, rebuilt (2026-07-24)

   Was a narrow right-hand drawer; now a centered two-pane modal like the
   reference — left section nav, right content with grouped rows.
   Appended last so it overrides the older drawer rules.
   =================================================================== */
.settings-drawer {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(880px, 94vw) !important;
  height: min(600px, 90vh) !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7) !important;
}

.settings-drawer::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.settings-drawer .settings-drawer-body {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  height: 100%;
  padding: 0 !important;
}

.settings-drawer .settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.settings-drawer .settings-drawer-header h2 { font-size: 1.3rem; }

.settings-drawer .dialog-close-button {
  width: 34px;
  height: 34px;
  min-height: 0 !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1.05rem;
  cursor: pointer;
}

.settings-drawer .dialog-close-button:hover {
  background: var(--fill-subtle) !important;
  color: var(--text) !important;
}

.settings-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  flex: 1;
  min-height: 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.14s ease, color 0.14s ease;
}

.settings-nav-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-nav-item:hover { background: var(--fill-subtle) !important; color: var(--text); }

.settings-nav-item.is-active {
  background: var(--fill-subtle) !important;
  color: var(--text);
}

.settings-content {
  padding: 26px 30px;
  overflow-y: auto;
}

.settings-panel[hidden] { display: none; }

.settings-section-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.settings-section-danger { color: var(--error); }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.settings-row + .settings-row { border-top: 1px solid var(--line); }

.settings-row strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settings-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 42ch;
}

.settings-row-value {
  color: var(--text-2);
  font-size: 0.95rem;
  white-space: nowrap;
}

.settings-divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

.settings-links {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
}

.settings-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.94rem;
  transition: background 0.14s ease;
}

.settings-links a:hover { background: var(--fill-subtle); }

.settings-links svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */
.settings-upgrade-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.settings-upgrade-button:hover { background: #4F52E8; }
.settings-upgrade-button svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.settings-outline-button,
.settings-danger-button {
  flex: none;
  padding: 10px 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
}

.settings-outline-button {
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.settings-outline-button:hover { background: var(--fill-subtle); }

.settings-danger-button {
  border: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
}

.settings-danger-button:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }

/* Toggle switch */
.settings-row-toggle { cursor: pointer; }

.settings-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  transition: background 0.16s ease;
}

.settings-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s ease;
}

.settings-switch:checked { background: var(--accent); }
.settings-switch:checked::after { transform: translateX(18px); }

.settings-drawer .settings-drawer-version {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .settings-drawer {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .settings-nav-item span { white-space: nowrap; }
}

/* Feature assessment card: icon + copy + arrow, for the single IQ test. */
.assessment-intro-feature {
  display: flex !important;
  align-items: center;
  gap: 20px;
  padding: 24px 26px !important;
}

.assessment-intro-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.14);
}

.assessment-intro-icon svg {
  width: 26px;
  height: 26px;
  color: var(--accent-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assessment-intro-body { flex: 1; min-width: 0; }

.assessment-intro-desc {
  margin: 4px 0 8px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.5;
  max-width: 60ch;
}

.assessment-intro-body .assessment-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.assessment-intro-arrow {
  flex: none;
  color: var(--muted);
  transition: transform 0.16s ease, color 0.16s ease;
}

.assessment-intro-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assessment-intro-feature:hover .assessment-intro-arrow {
  color: var(--text);
  transform: translateX(3px);
}

/* Only the Cogni IQ test is offered for now. Hidden by id: the list renderer
   sets .hidden = false on these at runtime, which an id + !important beats. */
#ocd-intro,
#focus-intro,
#memory-intro,
#adhd-assessment-intro { display: none !important; }

/* ===================================================================
   Exercise settings as a centered modal (2026-07-25)

   Was a bottom sheet; the reference presents these as a centered card
   over a dimmed backdrop. Appended last to win over the sheet rules.
   =================================================================== */
.exercise-sheet {
  inset: 0 !important;
  margin: auto !important;
  width: min(560px, 94vw) !important;
  max-height: 88vh !important;
  height: max-content !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7) !important;
  animation: cogni-modal-in 0.22s ease !important;
}

.exercise-sheet::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

/* No drag handle on a centered modal. */
.exercise-sheet::before { display: none !important; }

@keyframes cogni-modal-in {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===================================================================
   Exercise cards, reference "All tests" style (2026-07-25)

   Bordered card + soft shadow + a tinted category pill — reads as
   clearly clickable. Dark-mode adaptation of the light reference.
   Appended last to override the earlier borderless treatment.
   =================================================================== */
.exercise-card {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -20px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

.exercise-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.exercise-card:hover {
  transform: translateY(-3px) !important;
  /* Full border shorthand (not just color): earlier passes set
     `border: none !important` on hover, and if this only set border-color the
     width would flip 1px->0 mid-transition — that flip is the purple flash.
     Declaring the whole border here (last in the cascade) locks it. */
  border: 1px solid var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -16px rgba(0, 0, 0, 0.7) !important;
}

/* Sleek category chip. Every property needs !important because an earlier
   pass forces .exercise-type to dim-grey with 0.11em tracking + uppercase,
   all with !important — that's what made these look cheap and bulky. */
.exercise-card .exercise-type {
  display: inline-block !important;
  width: auto !important;
  margin: 0 0 6px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: rgba(129, 140, 248, 0.12) !important;
  color: var(--accent-2) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

.exercise-card h2 {
  margin: 0 !important;
  font-size: 1.14rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em;
  color: var(--text) !important;
}

.exercise-card p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

/* ===================================================================
   Coach (training plan) + Screen Time pages (2026-07-25)
   =================================================================== */
.coach-page,
.screentime-page {
  gap: 18px;
  padding-bottom: 40px;
}

.coach-hero {
  padding: 28px 30px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, #4A54E6 0%, #4338CA 60%, #3730A3 100%);
  box-shadow: 0 24px 48px -26px rgba(67, 56, 202, 0.7);
  margin-bottom: 18px;
}

.coach-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-hero h2 { margin: 0 0 8px; font-size: 1.6rem; letter-spacing: -0.02em; color: #fff; }
.coach-hero > p { margin: 0; max-width: 60ch; color: rgba(255, 255, 255, 0.9); line-height: 1.55; }
.coach-hero > p strong { color: #fff; }

.coach-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 22px;
}

.coach-hero-stats strong { display: block; font-size: 1.5rem; font-weight: 700; }
.coach-hero-stats span { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; }

.coach-week {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.coach-day {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.coach-day[data-coach-open] { cursor: pointer; }
.coach-day[data-coach-open]:hover { border-color: var(--accent); transform: translateY(-2px); }
.coach-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.coach-day.is-rest { opacity: 0.6; }

.coach-day-name {
  width: 96px;
  flex: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.coach-day-body { flex: 1; min-width: 0; }
.coach-day-body strong { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.coach-day-body span { color: var(--muted); font-size: 0.85rem; }

.coach-day-arrow { color: var(--muted); font-size: 1.4rem; }
.coach-day-rest { color: var(--muted); }

.coach-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--fill-subtle);
}

.coach-upsell strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.coach-upsell p { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; max-width: 52ch; }

.coach-upsell-cta {
  flex: none;
  padding: 12px 22px;
  border: none !important;
  border-radius: 11px;
  background: var(--accent) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

.coach-upsell-cta:hover { background: #4F52E8 !important; }

/* Screen Time */
.screentime-ring-card {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  flex-wrap: wrap;
}

.screentime-ring {
  --pct: 0;
  width: 168px;
  height: 168px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid;
  place-items: center;
}

.screentime-ring-inner {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  text-align: center;
}

.screentime-ring-inner strong { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.screentime-ring-inner strong span { font-size: 0.9rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.screentime-ring-inner > span { display: block; color: var(--muted); font-size: 0.85rem; }

.screentime-ring-copy { flex: 1; min-width: 220px; }
.screentime-ring-copy h2 { margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -0.02em; }
.screentime-ring-copy p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; max-width: 46ch; }

.screentime-train-cta {
  padding: 12px 24px;
  border: none !important;
  border-radius: 11px;
  background: var(--accent) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

.screentime-train-cta:hover { background: #4F52E8 !important; }

.screentime-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.screentime-stat {
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}

.screentime-stat strong { display: block; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; }
.screentime-stat strong span { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.screentime-stat > span { color: var(--muted); font-size: 0.86rem; }

@media (max-width: 720px) {
  .coach-upsell { flex-direction: column; align-items: flex-start; }
  .screentime-stats { grid-template-columns: 1fr; }
}

/* ===================================================================
   Exercise settings modal — compact & sleek (2026-07-25)

   The segmented pickers were tall (42px), heavily shadowed and chunky.
   Scoped tighter here so the popup reads light and quick to scan.
   =================================================================== */
.exercise-sheet .controls { gap: 14px !important; padding: 0 !important; }

/* Section labels: smaller, quieter. */
.exercise-sheet .nback-preset-group > span,
.exercise-sheet .time-preset-group > span {
  font-size: 0.66rem !important;
  letter-spacing: 0.08em !important;
}

.exercise-sheet .nback-preset-group,
.exercise-sheet .time-preset-group { gap: 6px !important; }

/* Segmented containers: flatter, lighter, no heavy drop shadow. */
.exercise-sheet .time-preset-row,
.exercise-sheet .nback-preset-row,
.exercise-sheet .rrt-preset-row,
.exercise-sheet .interval-presets,
.exercise-sheet .segmented-control,
.exercise-sheet .compact-segmented {
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  box-shadow: none !important;
}

/* Segmented buttons: shorter, smaller type, rounded to match. */
.exercise-sheet .time-preset-row .preset-button,
.exercise-sheet .nback-preset-row .preset-button,
.exercise-sheet .rrt-preset-row .preset-button,
.exercise-sheet .interval-presets button,
.exercise-sheet .segmented-control button,
.exercise-sheet .compact-segmented button {
  min-height: 34px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  /* Fill the segmented track evenly instead of leaving dead space. */
  flex: 1 1 0 !important;
}

.exercise-sheet .preset-button.active,
.exercise-sheet .segmented-control button.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Rows and stat blocks: tighter. */
.exercise-sheet .control-row,
.exercise-sheet .setting-stat {
  padding: 11px 14px !important;
  border-radius: 10px !important;
}

.exercise-sheet .control-row > label { font-size: 0.9rem !important; }

/* Advanced dropdown + custom-duration: smaller. */
.exercise-sheet .advanced-settings summary,
.exercise-sheet .advanced-settings[open] summary {
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}

.exercise-sheet .custom-duration,
.exercise-sheet .nback-custom-duration { min-height: 34px !important; border-radius: 8px !important; }

/* Start button: sleeker, accent, not full-bleed-heavy. */
.exercise-sheet #start-session,
.exercise-sheet #start-mot-session,
.exercise-sheet #start-rrt-session,
.exercise-sheet #start-cct-session,
.exercise-sheet #start-ufov-session,
.exercise-sheet #start-ict-session {
  min-height: 46px !important;
  border-radius: 12px !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Sheet header + padding: tighter, sleeker. */
.exercise-sheet .exercise-sheet-body { padding: 22px 24px 24px !important; }
.exercise-sheet-howto { font-size: 0.85rem !important; }

/* Exercise-sheet close as a subtle icon button (matches the settings modal). */
.exercise-sheet-close {
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1.05rem !important;
  box-shadow: none !important;
}

.exercise-sheet-close:hover {
  background: var(--fill-subtle) !important;
  color: var(--text) !important;
}

/* ===================================================================
   Advanced settings — flat, clean rows (2026-07-25)

   The stacked filled cards read heavy; make them transparent rows with a
   hairline divider and slimmer controls, like the reference list.
   =================================================================== */
.exercise-sheet .control-row,
.exercise-sheet .setting-stat {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 12px 2px !important;
}

.exercise-sheet .control-row:last-of-type,
.exercise-sheet .setting-stat:last-of-type { border-bottom: 0 !important; }

/* Slimmer slider: smaller thumb, thin track. */
.exercise-sheet .controls input[type="range"] { height: 20px !important; }

.exercise-sheet .controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  background: var(--surface-2) !important;
}

.exercise-sheet .controls input[type="range"]::-webkit-slider-thumb {
  width: 15px !important;
  height: 15px !important;
  margin-top: -5.5px !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}

.exercise-sheet .controls input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
}

.exercise-sheet .controls input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  background: var(--accent);
}

/* Number inputs + selects: smaller, softer, not chunky black. */
.exercise-sheet .control-row > input[type="number"],
.exercise-sheet .control-row > select {
  min-width: 76px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
  padding: 0 12px !important;
  background: var(--surface-2) !important;
  font-size: 0.9rem !important;
}

/* Checkbox uses the brand accent, not green. */
.exercise-sheet .controls input[type="checkbox"] { accent-color: var(--accent) !important; }

/* Advanced fieldset: lighter, tighter. */
.exercise-sheet .controls fieldset,
.exercise-sheet .progression-field {
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: var(--fill-subtle) !important;
}

/* ===================================================================
   Exercise settings modal — single, thin scrollbar (2026-07-25)

   The dialog and the inner .controls were both scroll containers, so you
   got two scrollbars (the stray "second line"). Let only the dialog
   scroll, and give it a thin, sleek scrollbar.
   =================================================================== */
.exercise-sheet {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.exercise-sheet::-webkit-scrollbar { width: 6px; }
.exercise-sheet::-webkit-scrollbar-track { background: transparent; }
.exercise-sheet::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
.exercise-sheet::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* The controls no longer scroll on their own — the modal handles it. */
.exercise-sheet .controls {
  overflow: visible !important;
  max-height: none !important;
}

/* ===================================================================
   De-bulk pass: sleek modals (2026-07-25)

   One place for the sleek settings/routines look. Kills the tall padded
   segmented buttons, the heavy filled boxes, and switches the routines
   dialogs to the same centered-modal treatment as the exercise sheet.
   The exercise *cards* on the hub are deliberately untouched.
   =================================================================== */

/* ---- Shared centered-modal close (✕) ---- */
.modal-close-x {
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.modal-close-x:hover { background: var(--fill-subtle) !important; color: var(--text) !important; }

/* ---- Exercise settings: kill the real bulk (button padding) ---- */
.exercise-sheet .preset-button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;      /* was 15px 8px — the 15px was the bulk */
  font-size: 0.86rem !important;
  line-height: 1 !important;
}
.exercise-sheet .time-preset-row,
.exercise-sheet .nback-preset-row,
.exercise-sheet .rrt-preset-row,
.exercise-sheet .interval-presets {
  padding: 3px !important;
  border-radius: 9px !important;
}
.exercise-sheet .custom-duration,
.exercise-sheet .nback-custom-duration {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 7px !important;
}
.exercise-sheet .controls { gap: 12px !important; }
.exercise-sheet .nback-preset-group,
.exercise-sheet .time-preset-group { gap: 5px !important; }
.exercise-sheet-title,
.exercise-sheet #exercise-sheet-title { font-size: 1.2rem !important; }
.exercise-sheet-howto { margin: 0 auto 4px !important; font-size: 0.82rem !important; }
.exercise-sheet .exercise-sheet-body { padding: 18px 22px 20px !important; }
.exercise-sheet #start-session,
.exercise-sheet #start-mot-session,
.exercise-sheet #start-rrt-session,
.exercise-sheet #start-cct-session,
.exercise-sheet #start-ufov-session,
.exercise-sheet #start-ict-session {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  margin-top: 2px !important;
}

/* ---- Routines: centered modal like the exercise sheet ---- */
.routine-load-dialog,
.routine-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(560px, 94vw) !important;
  height: max-content !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  animation: cogni-modal-in 0.22s ease !important;
}
/* The builder holds more, so it can be a touch wider. */
.routine-dialog { width: min(680px, 94vw) !important; }

.routine-load-dialog::backdrop,
.routine-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(2px);
}
.routine-load-dialog::-webkit-scrollbar,
.routine-dialog::-webkit-scrollbar { width: 6px; }
.routine-load-dialog::-webkit-scrollbar-thumb,
.routine-dialog::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.routine-load-dialog::-webkit-scrollbar-track,
.routine-dialog::-webkit-scrollbar-track { background: transparent; }

.routine-load-dialog > form,
.routine-dialog > form {
  display: grid;
  gap: 14px;
  max-height: none !important;
  overflow: visible !important;
  padding: 18px 22px 20px !important;
}

.routine-load-dialog .routine-dialog-header h2,
.routine-dialog .routine-dialog-header h2 { font-size: 1.2rem; }

/* Empty state: flat, not a chunky filled card. Specificity must beat
   `dialog .routine-empty { background: var(--surface-2) !important }`. */
.routine-load-dialog .routine-empty,
.routine-dialog .routine-empty {
  border: 1px dashed var(--line-strong) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: transparent !important;
  text-align: center;
}

/* Create button: sleek accent. */
.routine-create-inline {
  min-height: 44px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}
.routine-create-inline:hover { background: #4F52E8 !important; }

/* Builder fields: flatter, smaller. */
.routine-dialog .routine-name-field input,
.routine-dialog .routine-add-row select,
.routine-dialog .routine-total-card {
  min-height: 40px !important;
  border-radius: 10px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
}
.routine-dialog .routine-add-row #add-routine-block {
  min-height: 40px !important;
  border-radius: 10px !important;
}

/* Routine builder primary action = accent (matches the sleek language). */
.routine-dialog #save-routine {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  min-height: 42px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}
.routine-dialog #save-routine:hover { background: #4F52E8 !important; }
.routine-dialog .routine-dialog-actions #delete-routine {
  border-radius: 11px !important;
  min-height: 42px !important;
}

/* ===================================================================
   Mobile / narrow-web layout cleanup (2026-07-25)

   The narrow layout was built for the native app (square icon-tile
   cards, a 3-slot bottom bar). On the web at phone width that broke:
   tall empty cards with hidden descriptions, and a 3-column nav holding
   5 tabs + the account row, so it wrapped. This restores the clean
   desktop look at small widths. Appended last so it wins.
   =================================================================== */
@media (max-width: 820px) {
  :root { --mobile-nav-height: 68px; }

  .app-content {
    background: transparent !important;
    padding-top: max(26px, calc(env(safe-area-inset-top) + 12px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: calc(var(--mobile-nav-height) + 22px) !important;
  }

  .hero { margin-bottom: 14px !important; }

  /* Clean single-column exercise cards, descriptions shown. */
  .exercise-page {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .exercise-card {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  .exercise-card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .exercise-card h2 {
    font-size: 1.08rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  .exercise-card p {
    display: block !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  /* --- Bottom nav: 5 tabs in one row, no account row --- */
  .sidebar-account { display: none !important; }

  .app-sidebar {
    border-radius: 16px !important;
    border: 1px solid var(--line-strong) !important;
    background: var(--surface) !important;
    padding: 0 !important;
  }

  .side-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 5px 4px !important;
  }

  /* The 3-slot sliding indicator is wrong for 5 tabs — drop it. */
  .side-nav::before { display: none !important; }

  .side-nav-button {
    min-height: 50px !important;
    padding: 6px 1px !important;
    font-size: 0.52rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    background: transparent !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  .side-nav-button .nav-icon,
  .side-nav-button .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--muted) !important;
  }

  .side-nav-button.active,
  .side-nav-button.active .nav-icon,
  .side-nav-button.active .nav-icon svg {
    color: #818CF8 !important;
    background: transparent !important;
  }
}

/* Keep the modal close (✕) top-right on mobile — the native-app rule
   stacked the header and pushed it to the left. */
@media (max-width: 820px) {
  .exercise-sheet .routine-dialog-header,
  .routine-load-dialog .routine-dialog-header,
  .routine-dialog .routine-dialog-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .modal-close-x { justify-self: end !important; }

  .exercise-sheet .routine-dialog-header h2,
  .routine-load-dialog .routine-dialog-header h2,
  .routine-dialog .routine-dialog-header h2 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }
}

/* ===================================================================
   Modal scroll boundary fix (2026-07-25)

   Scrolling a modal to its top/bottom edge chained/bounced into the page
   behind (the "glitch"). Contain the overscroll so the boundary is hard.
   =================================================================== */
.exercise-sheet,
.routine-load-dialog,
.routine-dialog,
.settings-drawer,
.settings-content {
  overscroll-behavior: contain !important;
}

/* ===================================================================
   Unified popup colours — Jenni palette (2026-07-25)

   Reference popup background is #18181B (the page bg / zinc-900), NOT a
   lighter surface. So every Cogni dialog goes dark, and interior filled
   controls (segmented tracks, inputs, kbd) move to #27272A so they pop.
   The dimmed backdrop is what separates the dark modal from the page.
   =================================================================== */
.feedback-dialog,
.quit-dialog,
.session-summary-dialog,
.friend-dialog,
.social-leaderboard-dialog,
.routine-load-dialog,
.routine-dialog,
.settings-drawer,
.exercise-sheet,
.exercise-intro-dialog,
.screen-time-dialog {
  background: var(--bg) !important;              /* #18181B */
  border: 1px solid #2c2c31 !important;
}

.feedback-dialog::backdrop,
.quit-dialog::backdrop,
.session-summary-dialog::backdrop,
.friend-dialog::backdrop,
.social-leaderboard-dialog::backdrop,
.routine-load-dialog::backdrop,
.routine-dialog::backdrop,
.settings-drawer::backdrop,
.exercise-sheet::backdrop,
.exercise-intro-dialog::backdrop,
.screen-time-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px);
}

/* Interior fills pop against the darker modal (#27272A on #18181B). */
.exercise-sheet .time-preset-row,
.exercise-sheet .nback-preset-row,
.exercise-sheet .rrt-preset-row,
.exercise-sheet .interval-presets,
.exercise-sheet .segmented-control,
.exercise-sheet .compact-segmented,
.exercise-sheet .custom-duration,
.exercise-sheet .nback-custom-duration,
.exercise-sheet .control-row > input[type="number"],
.exercise-sheet .control-row > select {
  background: var(--surface) !important;
  border-color: #2c2c31 !important;
}

.exercise-sheet .controls input[type="range"]::-webkit-slider-runnable-track {
  background: var(--surface) !important;
}

/* Settings modal panes read on the darker bg. */
.settings-drawer .settings-nav { border-right-color: #2c2c31 !important; }
.settings-drawer .settings-drawer-header { border-bottom-color: #2c2c31 !important; }
.settings-row + .settings-row,
.settings-divider,
.exercise-sheet .control-row,
.exercise-sheet .setting-stat { border-color: #2c2c31 !important; }

/* Feedback textarea / inputs pop. */
.feedback-dialog textarea,
.feedback-dialog input {
  background: var(--surface) !important;
  border-color: #2c2c31 !important;
}

/* Routine builder fields on the dark modal. */
.routine-dialog .routine-name-field input,
.routine-dialog .routine-add-row select,
.routine-dialog .routine-total-card {
  background: var(--surface) !important;
  border-color: #2c2c31 !important;
}

/* ===================================================================
   Collapsible sidebar + mobile drawer (2026-07-25)
   Desktop: a « toggle collapses the sidebar; a ☰ reopens it.
   Mobile: the sidebar is a left drawer opened by ☰ (ChatGPT-style),
   replacing the bottom tab bar.
   =================================================================== */

/* Sidebar top row: account pill + collapse button. */
.sidebar-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 4px;
}
.sidebar-top .sidebar-account { flex: 1; min-width: 0; margin-bottom: 0 !important; }

.sidebar-collapse {
  flex: none;
  width: 30px;
  height: 30px;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  cursor: pointer;
  box-shadow: none !important;
}
.sidebar-collapse:hover { background: var(--fill-subtle) !important; color: var(--text) !important; }
.sidebar-collapse svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Hamburger (reopen on desktop, drawer opener on mobile). */
.nav-hamburger {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--text) !important;
  cursor: pointer;
  box-shadow: none !important;
}
.nav-hamburger svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-hamburger:hover { background: var(--fill-subtle) !important; }

.sidebar-backdrop { display: none; }

/* --- Desktop: collapse the sidebar out of the grid, animated --- */
@media (min-width: 821px) {
  /* Animate the grid column width so the content slides over smoothly. */
  .app-shell { transition: grid-template-columns 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
  .app-sidebar { overflow: hidden; }

  html.sidebar-collapsed .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
  /* The sidebar content fades/slides as the column closes. */
  html.sidebar-collapsed .app-sidebar {
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  /* Hamburger fades in once the sidebar is gone. */
  .nav-hamburger {
    display: grid;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.06s;
  }
  html.sidebar-collapsed .nav-hamburger { opacity: 1; pointer-events: auto; }
}

/* --- Mobile: the sidebar is a slide-in left drawer --- */
@media (max-width: 820px) {
  .nav-hamburger { display: grid !important; }
  html.sidebar-open .nav-hamburger { opacity: 0; pointer-events: none; }

  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(300px, 84vw) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    z-index: 70 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: max(12px, env(safe-area-inset-top)) 0 14px !important;
    border: none !important;
    border-right: 1px solid var(--line-strong) !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(-100%) !important;
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0.35, 1) !important;
  }
  html.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5) !important;
  }

  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 65 !important;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  html.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* Vertical nav inside the drawer (undo the bottom-bar layout). */
  .sidebar-top { display: flex !important; padding: 4px 12px 8px !important; }
  .sidebar-account { display: flex !important; }
  .sidebar-collapse { display: grid !important; }

  .side-nav {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 6px 10px !important;
  }
  .side-nav::before { display: none !important; }

  .side-nav-button {
    display: grid !important;
    grid-template-columns: 20px 1fr !important;
    place-items: center start !important;
    gap: 12px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: nowrap !important;
    color: var(--text) !important;
    border-radius: 9px !important;
  }
  .side-nav-button .nav-icon,
  .side-nav-button .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--muted) !important;
  }
  .side-nav-button.active,
  .side-nav-button.active .nav-icon,
  .side-nav-button.active .nav-icon svg { color: #818CF8 !important; }

  /* No bottom bar now: normal content padding + room for the hamburger. */
  :root { --mobile-nav-height: 0px; }
  .app-content {
    padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)) !important;
    padding-bottom: 32px !important;
  }
}

/* Drawer nav buttons: clean rows, not filled boxes (global button fill leak). */
@media (max-width: 820px) {
  .side-nav-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .side-nav-button:hover { background: var(--fill-subtle) !important; }
}

/* ===================================================================
   Sidebar footer: Web Extension / Tutorials / Help + See Pricing.
   Pinned to the bottom of the sidebar (2026-07-25).
   =================================================================== */
.app-sidebar { display: flex; flex-direction: column; }

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 1px;
  padding: 8px 12px max(16px, env(safe-area-inset-bottom));
}

.sidebar-footer-link {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 9px !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

.sidebar-footer-link:hover { background: var(--fill-subtle) !important; }

.sidebar-footer-link .nav-icon,
.sidebar-footer-link .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--muted) !important;
}
.sidebar-footer-link .nav-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-see-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 11px;
  background: var(--accent) !important;
  color: #fff !important;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12) !important;
}
.sidebar-see-pricing:hover { background: #4F52E8 !important; }
.sidebar-see-pricing svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

/* Brand icons (e.g. the Chrome logo) keep their own fills — don't apply the
   monochrome stroke treatment the other nav icons use. */
.sidebar-footer-link .nav-icon.brand-icon svg {
  fill: none;
  stroke: none !important;
  stroke-width: 0 !important;
}

/* ===================================================================
   Tab-switch animation (2026-07-25)
   The incoming page section fades + slides up when you change tabs.
   (Sections go display:none -> block on switch, which re-triggers it.)
   =================================================================== */
/* Pure slide up from below — no opacity fade (that read as a flash). */
@keyframes cogni-page-enter {
  from { transform: translateY(22px); }
  to { transform: translateY(0); }
}

.exercises-open .exercise-page,
.assessments-open .assessment-page,
.profile-open .profile-page,
.stats-open .statistics-page,
.coach-open .coach-page,
.screentime-open .screentime-page,
.home-open .home-page {
  animation: cogni-page-enter 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reduce-motion .exercises-open .exercise-page,
html.reduce-motion .assessments-open .assessment-page,
html.reduce-motion .profile-open .profile-page,
html.reduce-motion .stats-open .statistics-page,
html.reduce-motion .coach-open .coach-page,
html.reduce-motion .screentime-open .screentime-page,
html.reduce-motion .home-open .home-page {
  animation: none;
}

/* Transient toast (e.g. placeholder tabs). */
.cogni-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 300;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.cogni-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ===================================================================
   Profile page: de-bulk + monthly calendar (2026-07-25)
   =================================================================== */
/* Tighter overall rhythm. */
.profile-simple-panel { gap: 12px !important; }

/* Identity card: smaller, less padding. */
.profile-identity-card {
  gap: 16px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
}
.profile-identity-main { gap: 8px !important; padding-top: 0 !important; }
.profile-identity-main > strong { font-size: clamp(1.3rem, 3.6vw, 1.7rem) !important; }
.profile-social-stats { gap: 18px !important; }
.profile-social-stats strong { font-size: 1.15rem !important; }

/* The three panel cards: less padding, tighter. */
.profile-hexagon-card,
.profile-calendar-card,
.profile-graph-card {
  gap: 12px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
}

/* Abilities radar: shrink it — it dominated the page. */
.profile-hexagon {
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Section headings smaller. */
.profile-section-heading h2,
.profile-board-header h2 { font-size: 1.1rem !important; }

/* ---- Monthly calendar ---- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cal-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }

.cal-nav { display: flex; gap: 4px; }
.cal-nav-btn {
  width: 28px;
  height: 28px;
  min-height: 0 !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
}
.cal-nav-btn:hover:not(:disabled) { background: var(--fill-subtle) !important; }
.cal-nav-btn:disabled { opacity: 0.35; cursor: default; }

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cal-day {
  position: relative;
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
}
.cal-day b {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
}
.cal-day.is-active { background: var(--cal-fill); }
.cal-day.is-active b { color: #fff; font-weight: 650; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day.is-today b { color: var(--text); }
.cal-day.is-future { opacity: 0.4; }
.cal-day-blank { background: transparent !important; }

.cal-summary { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }

/* ---- Data view: denser ---- */
.profile-board { padding: 16px 18px !important; border-radius: 16px !important; }
.profile-overview article,
.profile-detail-summary article,
.profile-exercise-card { padding: 14px 16px !important; }